Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

dom-2d-camera

Package Overview
Dependencies
Maintainers
1
Versions
22
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

dom-2d-camera - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

5

CHANGELOG.md

@@ -0,1 +1,6 @@

## v1.2.1
- Fix an issue in switching between `defaultMouseDownMoveAction`
- Fix an issue with the zoom center when the page is scrolled
## v1.2.0

@@ -2,0 +7,0 @@

12

dist/dom-2d-camera.esm.js

@@ -85,3 +85,4 @@ import createCamera from 'camera-2d-simple';

isLeftMousePressed &&
(panOnMouseDownMove || !isMouseDownMoveModActive)
((panOnMouseDownMove && !isMouseDownMoveModActive) ||
(!panOnMouseDownMove && isMouseDownMoveModActive))
) {

@@ -112,3 +113,4 @@ // To pan 1:1 we need to half the width and height because the uniform

isLeftMousePressed &&
(!panOnMouseDownMove || isMouseDownMoveModActive)
((panOnMouseDownMove && isMouseDownMoveModActive) ||
(!panOnMouseDownMove && !isMouseDownMoveModActive))
) {

@@ -210,5 +212,7 @@ const wh = width / 2;

prevMouseY = mouseY;
mouseX = event.clientX - left;
mouseY = event.clientY - top;
// Normalize mouse coordinates
mouseX = event.clientX - left + window.scrollX;
mouseY = event.clientY - top + window.scrollY;
onMouseMove(event);

@@ -215,0 +219,0 @@ };

12

dist/dom-2d-camera.js

@@ -91,3 +91,4 @@ (function (global, factory) {

isLeftMousePressed &&
(panOnMouseDownMove || !isMouseDownMoveModActive)
((panOnMouseDownMove && !isMouseDownMoveModActive) ||
(!panOnMouseDownMove && isMouseDownMoveModActive))
) {

@@ -118,3 +119,4 @@ // To pan 1:1 we need to half the width and height because the uniform

isLeftMousePressed &&
(!panOnMouseDownMove || isMouseDownMoveModActive)
((panOnMouseDownMove && isMouseDownMoveModActive) ||
(!panOnMouseDownMove && !isMouseDownMoveModActive))
) {

@@ -217,5 +219,7 @@ var wh = width / 2;

prevMouseY = mouseY;
mouseX = event.clientX - left;
mouseY = event.clientY - top;
// Normalize mouse coordinates
mouseX = event.clientX - left + window.scrollX;
mouseY = event.clientY - top + window.scrollY;
onMouseMove(event);

@@ -222,0 +226,0 @@ };

2

dist/dom-2d-camera.min.js

@@ -1,1 +0,1 @@

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("camera-2d-simple"),require("gl-matrix")):"function"==typeof define&&define.amd?define(["camera-2d-simple","gl-matrix"],n):(e=e||self).createDom2dCamera=n(e.createCamera2d,e.glMatrix)}(this,(function(e,n){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var o=["pan","rotate"],t={alt:"altKey",cmd:"metaKey",ctrl:"ctrlKey",meta:"metaKey",shift:"shiftKey"};return function(i,r){void 0===r&&(r={});var v=r.distance;void 0===v&&(v=1);var a=r.target;void 0===a&&(a=[0,0]);var d=r.rotation;void 0===d&&(d=0);var u=r.isNdc;void 0===u&&(u=!0);var s=r.isFixed;void 0===s&&(s=!1);var l=r.isPan;void 0===l&&(l=!0);var c=r.panSpeed;void 0===c&&(c=1);var f=r.isRotate;void 0===f&&(f=!0);var p=r.rotateSpeed;void 0===p&&(p=1);var m=r.defaultMouseDownMoveAction;void 0===m&&(m="pan");var w=r.mouseDownMoveModKey;void 0===w&&(w="alt");var y=r.isZoom;void 0===y&&(y=!0);var M=r.zoomSpeed;void 0===M&&(M=1);var h=r.viewCenter,E=r.scaleBounds,L=r.onKeyDown;void 0===L&&(L=function(){});var g=r.onKeyUp;void 0===g&&(g=function(){});var K=r.onMouseDown;void 0===K&&(K=function(){});var x=r.onMouseUp;void 0===x&&(x=function(){});var D=r.onMouseMove;void 0===D&&(D=function(){});var k=r.onWheel;void 0===k&&(k=function(){});var S=e(a,v,d,h,E),C=!1,b=0,P=0,R=0,j=0,q=!1,z=0,A=0,B=0,F=1,O=1,U=1,Y=!1,Z="pan"===m,N=u?function(e){return e/F*2*U}:function(e){return e},W=u?function(e){return e/O*2}:function(e){return-e},X=u?function(e){return(e/F*2-1)*U}:function(e){return e},G=u?function(e){return 1-e/O*2}:function(e){return e},H=function(){var e=i.getBoundingClientRect();A=e.top,B=e.left,F=e.width,O=e.height,U=F/O},I=function(e){Y=!1,g(e)},J=function(e){Y=e[t[w]],L(e)},Q=function(e){q=!1,x(e)},T=function(e){q=1===e.buttons,K(e)},V=function(e){R=b,j=P,b=e.clientX-B,P=e.clientY-A,D(e)},$=function(e){e.preventDefault();var n=1===e.deltaMode?12:1;z+=n*(e.deltaY||0),k(e)};return window.addEventListener("keydown",J,{passive:!0}),window.addEventListener("keyup",I,{passive:!0}),i.addEventListener("mousedown",T,{passive:!0}),window.addEventListener("mouseup",Q,{passive:!0}),window.addEventListener("mousemove",V,{passive:!0}),i.addEventListener("wheel",$,{passive:!1}),H(),S.config=function(e){void 0===e&&(e={});var n=e.defaultMouseDownMoveAction;void 0===n&&(n=null);var i=e.isFixed;void 0===i&&(i=null);var r=e.isPan;void 0===r&&(r=null);var v=e.isRotate;void 0===v&&(v=null);var a=e.isZoom;void 0===a&&(a=null);var d=e.panSpeed;void 0===d&&(d=null);var u=e.rotateSpeed;void 0===u&&(u=null);var h=e.zoomSpeed;void 0===h&&(h=null);var E=e.mouseDownMoveModKey;void 0===E&&(E=null),m=null!==n&&o.includes(n)?n:m,Z="pan"===m,s=null!==i?i:s,l=null!==r?r:l,f=null!==v?v:f,y=null!==a?a:y,c=+d>0?d:c,p=+u>0?u:p,M=+h>0?h:M,w=null!==E&&Object.keys(t).includes(E)?E:w},S.dispose=function(){S=void 0,window.removeEventListener("keydown",J),window.removeEventListener("keyup",I),i.removeEventListener("mousedown",T),window.removeEventListener("mouseup",Q),window.removeEventListener("mousemove",V),i.removeEventListener("wheel",$)},S.refresh=H,S.tick=function(){if(s)return!1;if(C=!1,l&&q&&(Z||!Y)&&(S.pan([N(c*(b-R)),W(c*(j-P))]),C=!0),y&&z){var e=M*Math.exp(z/O),o=X(b),t=G(P);S.scale(1/e,[o,t]),C=!0}if(f&&q&&(!Z||Y)){var i=F/2,r=O/2,v=R-i,a=r-j,d=b-i,u=r-P,m=n.vec2.angle([v,a],[d,u]),w=v*u-d*a;S.rotate(p*m*Math.sign(w)),C=!0}return z=0,R=b,j=P,C},S}}));
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("camera-2d-simple"),require("gl-matrix")):"function"==typeof define&&define.amd?define(["camera-2d-simple","gl-matrix"],n):(e=e||self).createDom2dCamera=n(e.createCamera2d,e.glMatrix)}(this,(function(e,n){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var o=["pan","rotate"],i={alt:"altKey",cmd:"metaKey",ctrl:"ctrlKey",meta:"metaKey",shift:"shiftKey"};return function(t,r){void 0===r&&(r={});var v=r.distance;void 0===v&&(v=1);var a=r.target;void 0===a&&(a=[0,0]);var d=r.rotation;void 0===d&&(d=0);var u=r.isNdc;void 0===u&&(u=!0);var s=r.isFixed;void 0===s&&(s=!1);var l=r.isPan;void 0===l&&(l=!0);var c=r.panSpeed;void 0===c&&(c=1);var f=r.isRotate;void 0===f&&(f=!0);var p=r.rotateSpeed;void 0===p&&(p=1);var m=r.defaultMouseDownMoveAction;void 0===m&&(m="pan");var w=r.mouseDownMoveModKey;void 0===w&&(w="alt");var y=r.isZoom;void 0===y&&(y=!0);var M=r.zoomSpeed;void 0===M&&(M=1);var h=r.viewCenter,E=r.scaleBounds,L=r.onKeyDown;void 0===L&&(L=function(){});var g=r.onKeyUp;void 0===g&&(g=function(){});var K=r.onMouseDown;void 0===K&&(K=function(){});var x=r.onMouseUp;void 0===x&&(x=function(){});var D=r.onMouseMove;void 0===D&&(D=function(){});var k=r.onWheel;void 0===k&&(k=function(){});var S=e(a,v,d,h,E),C=!1,b=0,P=0,R=0,Y=0,j=!1,q=0,z=0,A=0,B=1,F=1,O=1,U=!1,X="pan"===m,Z=u?function(e){return e/B*2*O}:function(e){return e},N=u?function(e){return e/F*2}:function(e){return-e},W=u?function(e){return(e/B*2-1)*O}:function(e){return e},G=u?function(e){return 1-e/F*2}:function(e){return e},H=function(){var e=t.getBoundingClientRect();z=e.top,A=e.left,B=e.width,F=e.height,O=B/F},I=function(e){U=!1,g(e)},J=function(e){U=e[i[w]],L(e)},Q=function(e){j=!1,x(e)},T=function(e){j=1===e.buttons,K(e)},V=function(e){R=b,Y=P,b=e.clientX-A+window.scrollX,P=e.clientY-z+window.scrollY,D(e)},$=function(e){e.preventDefault();var n=1===e.deltaMode?12:1;q+=n*(e.deltaY||0),k(e)};return window.addEventListener("keydown",J,{passive:!0}),window.addEventListener("keyup",I,{passive:!0}),t.addEventListener("mousedown",T,{passive:!0}),window.addEventListener("mouseup",Q,{passive:!0}),window.addEventListener("mousemove",V,{passive:!0}),t.addEventListener("wheel",$,{passive:!1}),H(),S.config=function(e){void 0===e&&(e={});var n=e.defaultMouseDownMoveAction;void 0===n&&(n=null);var t=e.isFixed;void 0===t&&(t=null);var r=e.isPan;void 0===r&&(r=null);var v=e.isRotate;void 0===v&&(v=null);var a=e.isZoom;void 0===a&&(a=null);var d=e.panSpeed;void 0===d&&(d=null);var u=e.rotateSpeed;void 0===u&&(u=null);var h=e.zoomSpeed;void 0===h&&(h=null);var E=e.mouseDownMoveModKey;void 0===E&&(E=null),m=null!==n&&o.includes(n)?n:m,X="pan"===m,s=null!==t?t:s,l=null!==r?r:l,f=null!==v?v:f,y=null!==a?a:y,c=+d>0?d:c,p=+u>0?u:p,M=+h>0?h:M,w=null!==E&&Object.keys(i).includes(E)?E:w},S.dispose=function(){S=void 0,window.removeEventListener("keydown",J),window.removeEventListener("keyup",I),t.removeEventListener("mousedown",T),window.removeEventListener("mouseup",Q),window.removeEventListener("mousemove",V),t.removeEventListener("wheel",$)},S.refresh=H,S.tick=function(){if(s)return!1;if(C=!1,l&&j&&(X&&!U||!X&&U)&&(S.pan([Z(c*(b-R)),N(c*(Y-P))]),C=!0),y&&q){var e=M*Math.exp(q/F),o=W(b),i=G(P);S.scale(1/e,[o,i]),C=!0}if(f&&j&&(X&&U||!X&&!U)){var t=B/2,r=F/2,v=R-t,a=r-Y,d=b-t,u=r-P,m=n.vec2.angle([v,a],[d,u]),w=v*u-d*a;S.rotate(p*m*Math.sign(w)),C=!0}return q=0,R=b,Y=P,C},S}}));

2

package.json
{
"name": "dom-2d-camera",
"version": "1.2.0",
"version": "1.2.1",
"description": "A wrapper for attaching a 2D camera to a DOM element",

@@ -5,0 +5,0 @@ "author": "Fritz Lekschas",

20

README.md
# DOM 2D Camera
[![npm version](https://img.shields.io/npm/v/dom-2d-camera.svg)](https://www.npmjs.com/package/dom-2d-camera)
[![npm version](https://img.shields.io/npm/v/dom-2d-camera.svg?style=flat-square)](https://www.npmjs.com/package/dom-2d-camera)
[![build status](https://img.shields.io/github/workflow/status/flekschas/dom-2d-camera/build?color=139ce9&style=flat-square)](https://github.com/flekschas/dom-2d-camera/actions?query=workflow%3Abuild)
[![file size](http://img.badgesize.io/https://unpkg.com/dom-2d-camera/dist/dom-2d-camera.min.js?compression=gzip&color=0dacd4&style=flat-square)](https://bundlephobia.com/result?p=dom-2d-camera)
[![code style prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
[![demo](https://img.shields.io/badge/demo-online-6ae3c7.svg)](https://flekschas.github.io/regl-scatterplot/)
[![code style prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![demo](https://img.shields.io/badge/demo-online-6ae3c7.svg?style=flat-square)](https://flekschas.github.io/regl-scatterplot/)

@@ -50,8 +50,9 @@ > A wrapper for [camera-2d](https://github.com/flekschas/camera-2d) that supports pan, zoom, and rotate.

- `isPan`: if `true` panning is enabled. [dtype: bool, default: `true`]
- `isRotate`: if `true` rotation is enabled. [dtype: bool, default: `true`]
- `isZoom`: if `true` zooming is enabled. [dtype: bool, default: `true`]
- `panSpeed`: panning speed. [dtype: number, default: `1`]
- `isRotate`: if `true` rotation is enabled. [dtype: bool, default: `true`]
- `rotateSpeed`: rotation speed. [dtype: number, default: `1`]
- `rotateKey`: rotation modifier key. [dtype: string, valid: [`alt`, `shift`, `ctrl`, `cmd`, `meta`], default: `alt`]
- `isZoom`: if `true` zooming is enabled. [dtype: bool, default: `true`]
- `zoomSpeed`: zooming speed. [dtype: number, default: `1`]
- `defaultMouseDownMoveAction`: default behavior on mousedown + mousemove. [dtype: string, valid: `pan` or `rotate`, default: `pan`]
- `mouseDownMoveModKey`: modifier key for invoking opposite behavior on mousedown + mousemove.[dtype: string, valid: [`alt`, `shift`, `ctrl`, `cmd`, `meta`], default: `alt`]
- `scaleBounds`: see [camera-2d](https://github.com/flekschas/camera-2d#createCamera) [dtype: array, default: `null`]

@@ -94,7 +95,8 @@ - `viewCenter`: see [camera-2d](https://github.com/flekschas/camera-2d#createCamera) [dtype: array, default: `null`]

- `isPan`: if `true` panning is enabled. [dtype: bool, default: `true`]
- `isRotate`: if `true` rotation is enabled. [dtype: bool, default: `true`]
- `isZoom`: if `true` zooming is enabled. [dtype: bool, default: `true`]
- `panSpeed`: panning speed. [dtype: float, default: `1.0`]
- `isRotate`: if `true` rotation is enabled. [dtype: bool, default: `true`]
- `rotateSpeed`: rotation speed. [dtype: float, default: `1.0`]
- `rotateKey`: rotation modifier key. [dtype: string, valid: [`alt`, `shift`, `ctrl`, `cmd`, `meta`], default: `alt`]
- `isZoom`: if `true` zooming is enabled. [dtype: bool, default: `true`]
- `zoomSpeed`: zooming speed. [dtype: float, default: `1.0`]
- `defaultMouseDownMoveAction`: default behavior on mousedown + mousemove. [dtype: string, valid: `pan` or `rotate`, default: `pan`]
- `mouseDownMoveModKey`: modifier key for invoking opposite behavior on mousedown + mousemove.[dtype: string, valid: [`alt`, `shift`, `ctrl`, `cmd`, `meta`], default: `alt`]
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc