Skip to content

Commit

Permalink
Merge 95847ee into bbf52a9
Browse files Browse the repository at this point in the history
  • Loading branch information
@EnyaoGu
EnyaoGu committed Mar 21, 2019
2 parents bbf52a9 + 95847ee commit 51ed1c5
Show file tree
Hide file tree
Showing 8 changed files with 200 additions and 40 deletions.
19 changes: 15 additions & 4 deletions docs/navigate.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ The plugin supports these options:
zoom: {
interactive: false,
active: false,
amount: 1.5 // 2 = 200% (zoom in), 0.5 = 50% (zoom out)
amount: 1.5, // 2 = 200% (zoom in), 0.5 = 50% (zoom out)
enableTouch: false
}

pan: {
Expand All @@ -26,6 +27,13 @@ The plugin supports these options:
touchMode: ""
}

recenter: {
interactive: true,
enableTouch: true
}

propagateSupportedGesture: false,

xaxis: {
axisZoom: true, //zoom axis when mouse over it is allowed
plotZoom: true, //zoom axis is allowed for plot zoom
Expand All @@ -42,7 +50,7 @@ The plugin supports these options:
```
**interactive** enables the built-in drag/click behaviour. If you enable
interactive for pan, then you'll have a basic plot that supports moving
around; the same for zoom.
around; the same for zoom and recenter.

**active** is true after a touch tap on plot. This enables plot navigation.
Once activated, zoom and pan cannot be deactivated. When the plot becomes active,
Expand All @@ -67,12 +75,15 @@ to one direction when the drag direction is close to it;
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).
**enableTouch** enables the touch support, for pan (to drag), pinch (to zoom and move),
or 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'

**propagateSupportedGesture** set true to allow the propagation of origin touch events
(e.g. 'touchstart') that is already handled for pan or pinch. Default: false.

Example API usage:
```js
plot = $.plot(...);
Expand Down
6 changes: 4 additions & 2 deletions examples/navigateTouch/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,8 @@
autoScale: 'exact'
},
zoom: {
interactive: true
interactive: true,
enableTouch: true
},
pan: {
interactive: true,
Expand Down Expand Up @@ -154,7 +155,8 @@
yaxes: [ { mode: 'log', showTickLabels: 'all', autoScale: 'exact'},
{ mode: 'log', showTickLabels: 'all', autoScale: 'exact'} ],
zoom: {
interactive: true
interactive: true,
enableTouch: true
},
pan: {
interactive: true,
Expand Down
11 changes: 10 additions & 1 deletion source/jquery.flot.navigate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,9 @@ can set the default in the options.
frameRate: 60,
mode: 'smart'
},
recenter: {
interactive: true
},
xaxis: {
axisZoom: true, //zoom axis when mouse over it is allowed
plotZoom: true, //zoom axis is allowed for plot zoom
Expand Down Expand Up @@ -362,15 +365,21 @@ can set the default in the options.

function onDblClick(e) {
plot.activate();
var o = plot.getOptions()

if (!o.recenter.interactive) { return; }

var axes = plot.getTouchedAxis(e.clientX, e.clientY),
event;

plot.recenter({ axes: axes[0] ? axes : null });

if (axes[0]) {
event = new $.Event('re-center', { detail: {
axisTouched: axes[0]
}});
} else {
event = new $.Event('re-center', {detail: e});
event = new $.Event('re-center', { detail: e });
}
plot.getPlaceholder().trigger(event);
}
Expand Down
38 changes: 18 additions & 20 deletions source/jquery.flot.touch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@
'use strict';

var options = {
pan: {
enableTouch: false
}
propagateSupportedGesture: false
};

function init(plot) {
Expand All @@ -22,7 +20,7 @@
prevTap: { x: 0, y: 0 },
currentTap: { x: 0, y: 0 },
interceptedLongTap: false,
allowEventPropagation: false,
isUnsupportedGesture: false,
prevTapTime: null,
tapStartTime: null,
longTapTriggerId: null
Expand Down Expand Up @@ -75,8 +73,6 @@
case 'tap':
tap[e.type](e);
break;
default:
break;
}
}

Expand Down Expand Up @@ -107,18 +103,18 @@
},

touchmove: function(e) {
preventEventPropagation(e);
preventEventBehaviors(e);

updateCurrentForDoubleTap(e);
updateStateForLongTapEnd(e);

if (!gestureState.allowEventPropagation) {
if (!gestureState.isUnsupportedGesture) {
mainEventHolder.dispatchEvent(new CustomEvent('pandrag', { detail: e }));
}
},

touchend: function(e) {
preventEventPropagation(e);
preventEventBehaviors(e);

if (wasPinchEvent(e)) {
mainEventHolder.dispatchEvent(new CustomEvent('pinchend', { detail: e }));
Expand All @@ -135,21 +131,21 @@
},

touchmove: function(e) {
preventEventPropagation(e);
preventEventBehaviors(e);
gestureState.twoTouches = isPinchEvent(e);
if (!gestureState.allowEventPropagation) {
if (!gestureState.isUnsupportedGesture) {
mainEventHolder.dispatchEvent(new CustomEvent('pinchdrag', { detail: e }));
}
},

touchend: function(e) {
preventEventPropagation(e);
preventEventBehaviors(e);
}
};

var doubleTap = {
onDoubleTap: function(e) {
preventEventPropagation(e);
preventEventBehaviors(e);
mainEventHolder.dispatchEvent(new CustomEvent('doubletap', { detail: e }));
}
};
Expand Down Expand Up @@ -205,7 +201,7 @@
touchend: function(e) {
if (tap.isTap(e)) {
mainEventHolder.dispatchEvent(new CustomEvent('tap', { detail: e }));
preventEventPropagation(e);
preventEventBehaviors(e);
}
},

Expand All @@ -221,7 +217,7 @@
}
};

if (options.pan.enableTouch === true) {
if (options.pan.enableTouch === true || options.zoom.enableTouch) {
plot.hooks.bindEvents.push(bindEvents);
plot.hooks.shutdown.push(shutdown);
};
Expand Down Expand Up @@ -275,10 +271,12 @@
return false;
}

function preventEventPropagation(e) {
if (!gestureState.allowEventPropagation) {
function preventEventBehaviors(e) {
if (!gestureState.isUnsupportedGesture) {
e.preventDefault();
e.stopPropagation();
if (!plot.getOptions().propagateSupportedGesture) {
e.stopPropagation();
}
}
}

Expand All @@ -296,9 +294,9 @@

function updateOnMultipleTouches(e) {
if (e.touches.length >= 3) {
gestureState.allowEventPropagation = true;
gestureState.isUnsupportedGesture = true;
} else {
gestureState.allowEventPropagation = false;
gestureState.isUnsupportedGesture = false;
}
}

Expand Down
42 changes: 31 additions & 11 deletions source/jquery.flot.touchNavigate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,15 @@
'use strict';

var options = {
zoom: {
enableTouch: false
},
pan: {
enableTouch: false,
touchMode: 'manual'
},
recenter: {
enableTouch: true
}
};

Expand All @@ -31,21 +37,27 @@
navigationConstraint: 'unconstrained',
initialState: null,
},
useManualPan = options.pan.touchMode === 'manual',
useManualPan = options.pan.interactive && options.pan.touchMode === 'manual',
smartPanLock = options.pan.touchMode === 'smartLock',
useSmartPan = smartPanLock || options.pan.touchMode === 'smart',
useSmartPan = options.pan.interactive && (smartPanLock || options.pan.touchMode === 'smart'),
pan, pinch, doubleTap;

function bindEvents(plot, eventHolder) {
var o = plot.getOptions();

if (o.pan.interactive) {
eventHolder[0].addEventListener('panstart', pan.start, false);
eventHolder[0].addEventListener('pandrag', pan.drag, false);
eventHolder[0].addEventListener('panend', pan.end, false);
if (o.zoom.interactive && o.zoom.enableTouch) {
eventHolder[0].addEventListener('pinchstart', pinch.start, false);
eventHolder[0].addEventListener('pinchdrag', pinch.drag, false);
eventHolder[0].addEventListener('pinchend', pinch.end, false);
}

if (o.pan.interactive && o.pan.enableTouch) {
eventHolder[0].addEventListener('panstart', pan.start, false);
eventHolder[0].addEventListener('pandrag', pan.drag, false);
eventHolder[0].addEventListener('panend', pan.end, false);
}

if ((o.recenter.interactive && o.recenter.enableTouch)) {
eventHolder[0].addEventListener('doubletap', doubleTap.recenterPlot, false);
}
}
Expand Down Expand Up @@ -152,15 +164,14 @@

doubleTap = {
recenterPlot: function(e) {
if (e && e.detail && e.detail.type === 'touchmove') {
// do not recenter during touch moving;
return;
if (e && e.detail && e.detail.type === 'touchstart') {
// only do not recenter for touch start;
recenterPlotOnDoubleTap(plot, e, gestureState, navigationState);
}
recenterPlotOnDoubleTap(plot, e, gestureState, navigationState);
}
};

if (options.pan.enableTouch === true) {
if (options.pan.enableTouch === true || options.zoom.enableTouch === true) {
plot.hooks.bindEvents.push(bindEvents);
plot.hooks.shutdown.push(shutdown);
}
Expand All @@ -187,7 +198,16 @@
if ((navigationState.currentTouchedAxis === 'x' && navigationState.prevTouchedAxis === 'x') ||
(navigationState.currentTouchedAxis === 'y' && navigationState.prevTouchedAxis === 'y') ||
(navigationState.currentTouchedAxis === 'none' && navigationState.prevTouchedAxis === 'none')) {
var event;

plot.recenter({ axes: navigationState.touchedAxis });

if (navigationState.touchedAxis) {
event = new $.Event('re-center', { detail: { axisTouched: navigationState.touchedAxis } });
} else {
event = new $.Event('re-center', { detail: e });
}
plot.getPlaceholder().trigger(event);
}
}

Expand Down
48 changes: 48 additions & 0 deletions tests/jquery.flot.navigate-interaction.Test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -443,4 +443,52 @@ describe("flot navigate plugin interactions", function () {
expect(spy).toHaveBeenCalledWith('dblclick', jasmine.any(Function), jasmine.any(Boolean));
});

it('do recenter for double click by default', () => {
plot = $.plot(placeholder, [
[[0, 0], [10, 10]]
], {
xaxes: [{ autoScale: 'exact' }],
yaxes: [{ autoScale: 'exact' }],
});

var eventHolder = plot.getEventHolder(),
xaxis = plot.getXAxes()[0],
yaxis = plot.getYAxes()[0],
spyRecenter = jasmine.createSpy('spy');
$(plot.getPlaceholder()).on('re-center', spyRecenter);

plot.pan({ left: 10, top: 10});

simulate.dblclick(eventHolder, 200, 150);

expect(xaxis.options.offset).toEqual({ below: 0, above: 0 });
expect(yaxis.options.offset).toEqual({ below: 0, above: 0 });
expect(spyRecenter).toHaveBeenCalled();
});

it('do not recenter for double click if recenter is disabled', () => {
plot = $.plot(placeholder, [
[[0, 0], [10, 10]]
], {
xaxes: [{ autoScale: 'exact' }],
yaxes: [{ autoScale: 'exact' }],
pan: { interactive: true },
zoom: { interactive: true },
recenter: { interactive: false },
});

var eventHolder = plot.getEventHolder(),
xaxis = plot.getXAxes()[0],
yaxis = plot.getYAxes()[0],
spyRecenter = jasmine.createSpy('spy');
$(plot.getPlaceholder()).on('re-center', spyRecenter);

plot.pan({ left: 10, top: 10});

simulate.dblclick(eventHolder, 200, 150);

expect(xaxis.options.offset).not.toEqual({ below: 0, above: 0 });
expect(yaxis.options.offset).not.toEqual({ below: 0, above: 0 });
expect(spyRecenter).not.toHaveBeenCalled();
});
});
Loading

0 comments on commit 51ed1c5

Please sign in to comment.