sigma - npm Package Compare versions

Comparing version 2.0.0-alpha3 to 2.0.0-alpha4

camera.js

@@ -39,2 +39,4 @@ 'use strict';
 
+var DEFAULT_ZOOMING_RATIO = 1.5;
+
 // TODO: animate options = number polymorphism?
@@ -295,4 +297,3 @@ // TODO: pan, zoom, unzoom, reset, rotate, zoomTo
       // Canceling previous animation if needed
-      // if (this.nextFrame)
-      //   cancelAnimationFrame(this.nextFrame);
+      if (this.nextFrame) cancelAnimationFrame(this.nextFrame);
 
@@ -336,2 +337,56 @@ // State
     }
+
+    /**
+     * Method used to zoom the camera.
+     *
+     * @param  {number|object} factorOrOptions - Factor or options.
+     * @return {function}
+     */
+
+  }, {
+    key: 'animatedZoom',
+    value: function animatedZoom(factorOrOptions) {
+
+      if (!factorOrOptions) {
+        return this.animate({ ratio: this.ratio / DEFAULT_ZOOMING_RATIO });
+      } else {
+        if (typeof factorOrOptions === 'number') return this.animate({ ratio: this.ratio / factorOrOptions });else return this.animate({ ratio: this.ratio / (factorOrOptions.factor || DEFAULT_ZOOMING_RATIO) }, factorOrOptions);
+      }
+    }
+
+    /**
+     * Method used to unzoom the camera.
+     *
+     * @param  {number|object} factorOrOptions - Factor or options.
+     * @return {function}
+     */
+
+  }, {
+    key: 'animatedUnzoom',
+    value: function animatedUnzoom(factorOrOptions) {
+
+      if (!factorOrOptions) {
+        return this.animate({ ratio: this.ratio * DEFAULT_ZOOMING_RATIO });
+      } else {
+        if (typeof factorOrOptions === 'number') return this.animate({ ratio: this.ratio * factorOrOptions });else return this.animate({ ratio: this.ratio * (factorOrOptions.factor || DEFAULT_ZOOMING_RATIO) }, factorOrOptions);
+      }
+    }
+
+    /**
+     * Method used to reset the camera.
+     *
+     * @param  {object} options - Options.
+     * @return {function}
+     */
+
+  }, {
+    key: 'animatedReset',
+    value: function animatedReset(options) {
+      return this.animate({
+        x: 0,
+        y: 0,
+        ratio: 1,
+        angle: 0
+      }, options);
+    }
   }]);
@@ -338,0 +393,0 @@

captors/mouse.js

@@ -72,2 +72,3 @@ 'use strict';
     _this.doubleClickTimeout = null;
+    _this.wheelLock = false;
 
@@ -117,3 +118,3 @@ // Binding methods
 
-      this.emit('click', (0, _utils.getMouseCoords)(e));
+      this.emit('click', (0, _utils.getMouseCoords)(e, this.container.offsetLeft, this.container.offsetTop));
     }
@@ -169,3 +170,3 @@ }, {
           this.isMouseDown = true;
-          this.emit('mousedown', (0, _utils.getMouseCoords)(e));
+          this.emit('mousedown', (0, _utils.getMouseCoords)(e, this.container.offsetLeft, this.container.offsetTop));
       }
@@ -205,3 +206,3 @@ }
 
-      this.emit('mouseup', (0, _utils.getMouseCoords)(e));
+      this.emit('mouseup', (0, _utils.getMouseCoords)(e, this.container.offsetLeft, this.container.offsetTop));
       this.isMoving = false;
@@ -216,3 +217,3 @@ }
 
-      this.emit('mousemove', (0, _utils.getMouseCoords)(e));
+      this.emit('mousemove', (0, _utils.getMouseCoords)(e, this.container.offsetLeft, this.container.offsetTop));
 
@@ -259,14 +260,26 @@ if (this.isMouseDown) {
     value: function handleWheel(e) {
-      if (!this.enabled) return;
+      var _this4 = this;
 
+      if (!this.enabled) return false;
+
       var delta = (0, _utils.getWheelDelta)(e);
 
-      if (!delta) return;
+      if (!delta) return false;
 
+      if (this.wheelLock) return false;
+
+      this.wheelLock = true;
+      setTimeout(function () {
+        return _this4.wheelLock = false;
+      }, 30);
+
+      // TODO: handle max zoom
       var ratio = delta > 0 ? 1 / ZOOMING_RATIO : ZOOMING_RATIO;
 
+      var cameraState = this.camera.getState();
+
+      var newRatio = ratio * cameraState.ratio;
+
       var center = (0, _utils.getCenter)(e);
 
-      var cameraState = this.camera.getState();
-
       var position = this.camera.abstractDisplayToGraph((0, _utils.getX)(e) - center.x, (0, _utils.getY)(e) - center.y);
@@ -277,5 +290,5 @@
         y: position.y * (1 - ratio) + cameraState.y,
-        ratio: ratio * cameraState.ratio
+        ratio: newRatio
       }, {
-        easing: 'quadraticOut',
+        easing: this.camera.isAnimated() ? 'quadraticOut' : 'quadraticInOut',
         duration: MOUSE_ZOOM_DURATION
@@ -282,0 +295,0 @@ });

captors/utils.js

@@ -119,8 +119,6 @@ 'use strict';
 
-  var center = getCenter(e);
-
-  // TODO: is this really needed to have this strange {x,y} with now?
+  // const center = getCenter(e);
   return {
-    x: x - center.x,
-    y: y - center.y,
+    x: e.clientX - x,
+    y: e.clientY - y,
     clientX: e.clientX,
@@ -127,0 +125,0 @@ clientY: e.clientY,

package.json

 {
   "name": "sigma",
-  "version": "2.0.0-alpha3",
+  "version": "2.0.0-alpha4",
   "description": "A JavaScript library dedicated to graph drawing.",
@@ -5,0 +5,0 @@ "homepage": "http://sigmajs.org",

renderers/webgl/index.js

@@ -100,2 +100,4 @@ 'use strict';
     _this.nodeOrder = {};
+
+    // TODO: this could be improved by key => index => floatArray
     _this.nodeDataCache = {};
@@ -287,5 +289,7 @@ _this.edgeArray = null;
         // give some boost but this slows things down for WebGL empirically.
+
+        // TODO: this should be a method from the camera (or can be passed to graph to display somehow)
         var sizeRatio = Math.pow(_this3.camera.getState().ratio, 0.5);
 
-        var quadNodes = getQuadNodes(e.clientX, e.clientY);
+        var quadNodes = getQuadNodes(e.x, e.y);
 
@@ -301,3 +305,3 @@ for (var i = 0, l = quadNodes.length; i < l; i++) {
 
-          if (mouseIsOnNode(e.clientX, e.clientY, pos.x, pos.y, size)) {
+          if (mouseIsOnNode(e.x, e.y, pos.x, pos.y, size)) {
             _this3.hoveredNode = node;
@@ -318,3 +322,3 @@
 
-          if (!mouseIsOnNode(e.clientX, e.clientY, _pos.x, _pos.y, _size)) {
+          if (!mouseIsOnNode(e.x, e.y, _pos.x, _pos.y, _size)) {
             _this3.hoveredNode = null;
@@ -332,3 +336,3 @@
 
-        var quadNodes = getQuadNodes(e.clientX, e.clientY);
+        var quadNodes = getQuadNodes(e.x, e.y);
 
@@ -344,3 +348,3 @@ for (var i = 0, l = quadNodes.length; i < l; i++) {
 
-          if (mouseIsOnNode(e.clientX, e.clientY, pos.x, pos.y, size)) return _this3.emit('downNode', { node: node });
+          if (mouseIsOnNode(e.x, e.y, pos.x, pos.y, size)) return _this3.emit('downNode', { node: node });
         }
@@ -353,3 +357,3 @@ };
 
-        var quadNodes = getQuadNodes(e.clientX, e.clientY);
+        var quadNodes = getQuadNodes(e.x, e.y);
 
@@ -365,3 +369,3 @@ for (var i = 0, l = quadNodes.length; i < l; i++) {
 
-          if (mouseIsOnNode(e.clientX, e.clientY, pos.x, pos.y, size)) return _this3.emit('clickNode', { node: node });
+          if (mouseIsOnNode(e.x, e.y, pos.x, pos.y, size)) return _this3.emit('clickNode', { node: node });
         }
@@ -368,0 +372,0 @@

No alert changes

Improved metrics

Total package byte prevSize

594725

increased by0.87%

Lines of code

11863

increased by0.95%

No dependency changes