flot - npm Package Compare versions

Comparing version 2.1.6 to 2.2.0

docs/navigate.md

@@ -24,3 +24,5 @@ ## jquery.flot.navigate.js
         frameRate: 60,
-        mode: "smart"       // enable smart pan mode
+        mode: "smart",       // enable smart pan mode
+        enableTouch: false,
+        touchMode: ""
     }
@@ -61,2 +63,16 @@
 
+**mode** a string specifies the pan mode for mouse interaction. Accepted values:
+'manual': no pan hint or direction snapping;
+'smart': The graph shows pan hint bar and the pan movement will snap
+to one direction when the drag direction is close to it;
+'smartLock'. The graph shows pan hint bar and the pan movement will always
+snap to a direction that the drag diorection started with.
+Default: 'smart'.
+
+**enableTouch** enables the touch support, including pan (to drag), pinch (to zoom and move),
+and double tap (to recenter).
+
+**touchMode** a string specifies the pan mode of touch pan.
+The accepted values is the sams as **mode** option. Default: 'manual'
+
 Example API usage:
@@ -63,0 +79,0 @@ ```js

package.json

 {
   "name": "flot",
-  "version": "2.1.6",
+  "version": "2.2.0",
   "main": "dist/es5/jquery.flot.js",
@@ -5,0 +5,0 @@ "scripts": {

source/jquery.flot.navigate.js

@@ -70,2 +70,9 @@ /* Flot plugin for adding the ability to pan and zoom the plot.
 
+**mode** a string specifies the pan mode for mouse interaction. Accepted values:
+'manual': no pan hint or direction snapping;
+'smart': The graph shows pan hint bar and the pan movement will snap
+to one direction when the drag direction is close to it;
+'smartLock'. The graph shows pan hint bar and the pan movement will always
+snap to a direction that the drag diorection started with.
+
 Example API usage:
@@ -111,3 +118,4 @@ ```js
             cursor: "move",
-            frameRate: 60
+            frameRate: 60,
+            mode: 'smart'
         },
@@ -134,4 +142,11 @@ xaxis: {
     function init(plot) {
+        plot.hooks.processOptions.push(initNevigation);
+    }
+
+    function initNevigation(plot, options) {
         var panAxes = null;
         var canDrag = false;
+        var useManualPan = options.pan.mode === 'manual',
+            smartPanLock = options.pan.mode === 'smartLock',
+            useSmartPan = smartPanLock || options.pan.mode === 'smart';
 
@@ -180,2 +195,3 @@ function onZoomClick(e, zoomOut, amount) {
             plotState,
+            prevDragPosition = { x: 0, y: 0 },
             isPanAction = false;
@@ -262,5 +278,11 @@
             plot.getPlaceholder().css('cursor', plot.getOptions().pan.cursor);
-            plotState = plot.navigationState(page.X, page.Y);
+
+            if (useSmartPan) {
+                plotState = plot.navigationState(page.X, page.Y);
+            } else if (useManualPan) {
+                prevDragPosition.x = page.X;
+                prevDragPosition.y = page.Y;
+            }
         }
-
+        
         function onDrag(e) {
@@ -271,7 +293,16 @@ var page = browser.getPageXY(e);
             if (frameRate === -1) {
-                plot.smartPan({
-                    x: plotState.startPageX - page.X,
-                    y: plotState.startPageY - page.Y
-                }, plotState, panAxes);
-
+                if (useSmartPan) {
+                    plot.smartPan({
+                        x: plotState.startPageX - page.X,
+                        y: plotState.startPageY - page.Y
+                    }, plotState, panAxes, false, smartPanLock);
+                } else if (useManualPan) {
+                    plot.pan({
+                        left: prevDragPosition.x - page.X,
+                        top: prevDragPosition.y - page.Y,
+                        axes: panAxes
+                    });
+                    prevDragPosition.x = page.X;
+                    prevDragPosition.y = page.Y;
+                }
                 return;
@@ -283,6 +314,16 @@ }
             panTimeout = setTimeout(function() {
-                plot.smartPan({
-                    x: plotState.startPageX - page.X,
-                    y: plotState.startPageY - page.Y
-                }, plotState, panAxes);
+                if (useSmartPan) {
+                    plot.smartPan({
+                        x: plotState.startPageX - page.X,
+                        y: plotState.startPageY - page.Y
+                    }, plotState, panAxes, false, smartPanLock);
+                } else if (useManualPan) {
+                    plot.pan({
+                        left: prevDragPosition.x - page.X,
+                        top: prevDragPosition.y - page.Y,
+                        axes: panAxes
+                    });
+                    prevDragPosition.x = page.X;
+                    prevDragPosition.y = page.Y;
+                }
 
@@ -303,7 +344,18 @@ panTimeout = null;
             plot.getPlaceholder().css('cursor', prevCursor);
-            plot.smartPan({
-                x: plotState.startPageX - page.X,
-                y: plotState.startPageY - page.Y
-            }, plotState, panAxes);
-            panHint = null;
+
+            if (useSmartPan) {
+                plot.smartPan({
+                    x: plotState.startPageX - page.X,
+                    y: plotState.startPageY - page.Y
+                }, plotState, panAxes, false, smartPanLock);
+                plot.smartPan.end();
+            } else if (useManualPan) {
+                plot.pan({
+                    left: prevDragPosition.x - page.X,
+                    top: prevDragPosition.y - page.Y,
+                    axes: panAxes
+                });
+                prevDragPosition.x = 0;
+                prevDragPosition.y = 0;
+            }
         }
@@ -524,2 +576,18 @@
 
+        var lockedDirection = null;
+        var lockDeltaDirection = function(delta) {
+            if (!lockedDirection && Math.max(Math.abs(delta.x), Math.abs(delta.y)) >= SNAPPING_CONSTANT) {
+                lockedDirection = Math.abs(delta.x) < Math.abs(delta.y) ? 'y' : 'x';
+            }
+
+            switch (lockedDirection) {
+                case 'x':
+                    return { x: delta.x, y: 0 };
+                case 'y':
+                    return { x: 0, y: delta.y };
+                default:
+                    return { x: 0, y: 0 };
+            }
+        }
+
         var isDiagonalMode = function(delta) {
@@ -544,7 +612,7 @@ if (Math.abs(delta.x) > 0 && Math.abs(delta.y) > 0) {
         var prevDelta = { x: 0, y: 0 };
-        plot.smartPan = function(delta, initialState, panAxes, preventEvent) {
-            var snap = shouldSnap(delta),
+        plot.smartPan = function(delta, initialState, panAxes, preventEvent, smartLock) {
+            var snap = smartLock ? true : shouldSnap(delta),
                 axes = plot.getAxes(),
                 opts;
-            delta = adjustDeltaToSnap(delta);
+            delta = smartLock ? lockDeltaDirection(delta) : adjustDeltaToSnap(delta);
 
@@ -629,2 +697,9 @@ if (isDiagonalMode(delta)) {
 
+        plot.smartPan.end = function() {
+            panHint = null;
+            lockedDirection = null;
+            prevDelta = { x: 0, y: 0 };
+            plot.triggerRedrawOverlay();
+        }
+
         function shutdown(plot, eventHolder) {
@@ -631,0 +706,0 @@ eventHolder.unbind("mousewheel", onMouseWheel);

source/jquery.flot.touchNavigate.js

@@ -8,3 +8,4 @@ /* global jQuery */
         pan: {
-            enableTouch: false
+            enableTouch: false,
+            touchMode: 'manual'
         }
@@ -31,4 +32,8 @@ };
                 touchedAxis: null,
-                navigationConstraint: 'unconstrained'
+                navigationConstraint: 'unconstrained',
+                initialState: null,
             },
+            useManualPan = options.pan.touchMode === 'manual',
+            smartPanLock = options.pan.touchMode === 'smartLock',
+            useSmartPan = smartPanLock || options.pan.touchMode === 'smart',
             pan, pinch, doubleTap;
@@ -64,2 +69,7 @@
                 updateData(e, 'pan', gestureState, navigationState);
+
+                if (useSmartPan) {
+                    var point = getPoint(e, 'pan');
+                    navigationState.initialState = plot.navigationState(point.x, point.y);
+                }
             },
@@ -69,8 +79,17 @@
                 presetNavigationState(e, 'pan', gestureState);
-                plot.pan({
-                    left: -delta(e, 'pan', gestureState).x,
-                    top: -delta(e, 'pan', gestureState).y,
-                    axes: navigationState.touchedAxis
-                });
-                updatePrevPanPosition(e, 'pan', gestureState, navigationState);
+
+                if (useSmartPan) {
+                    var point = getPoint(e, 'pan');
+                    plot.smartPan({
+                        x: navigationState.initialState.startPageX - point.x,
+                        y: navigationState.initialState.startPageY - point.y
+                    }, navigationState.initialState, navigationState.touchedAxis, false, smartPanLock);
+                } else if (useManualPan) {
+                    plot.pan({
+                        left: -delta(e, 'pan', gestureState).x,
+                        top: -delta(e, 'pan', gestureState).y,
+                        axes: navigationState.touchedAxis
+                    });
+                    updatePrevPanPosition(e, 'pan', gestureState, navigationState);
+                }
             },
@@ -80,2 +99,7 @@
                 presetNavigationState(e, 'pan', gestureState);
+
+                if (useSmartPan) {
+                    plot.smartPan.end();
+                }
+
                 if (wasPinchEvent(e, gestureState)) {
@@ -86,2 +110,3 @@ updateprevPanPosition(e, 'pan', gestureState, navigationState);
         };
+
         var pinchDragTimeout;
@@ -136,2 +161,6 @@ pinch = {
             recenterPlot: function(e) {
+                if (e && e.detail && e.detail.type === 'touchmove') {
+                    // do not recenter during touch moving;
+                    return;
+                }
                 recenterPlotOnDoubleTap(plot, e, gestureState, navigationState);
@@ -138,0 +167,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

965471

0.94%

Lines of code

19218

0.77%

No dependency changes