1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252 |
- /* eslint-disable */
- /* global $, describe, it, xit, xdescribe, after, afterEach, expect*/
- describe("flot touch navigate plugin", function () {
- var placeholder, plot, options;
- var minFrameDuration = 1 / 60 * 1000;
- beforeEach(function () {
- placeholder = setFixtures('<div id="test-container" style="width: 600px;height: 400px">')
- .find('#test-container');
- options = {
- xaxes: [{ autoScale: 'exact' }],
- yaxes: [{ autoScale: 'exact' }],
- zoom: { interactive: true, active: true, amount: 10, enableTouch: true },
- pan: { interactive: true, active: true, frameRate: -1, enableTouch: true }
- };
- jasmine.clock().install();
- });
- afterEach(function() {
- jasmine.clock().uninstall();
- });
- it('shows that the eventHolder is cleared through shutdown when the plot is replaced', function() {
- plot = $.plot(placeholder, [[]], options);
- var eventPlaceholder = plot.getEventHolder(),
- spy = spyOn(eventPlaceholder, 'removeEventListener').and.callThrough();
- plot = $.plot(placeholder, [[]], options);
- expect(spy).toHaveBeenCalledWith('panstart', jasmine.any(Function))
- expect(spy).toHaveBeenCalledWith('pandrag', jasmine.any(Function));
- expect(spy).toHaveBeenCalledWith('panend', jasmine.any(Function));
- });
- var simulateTouchEvent = function (coords, eventHolder, eventName) {
- simulate.sendTouchEvents(coords, eventHolder, eventName);
- jasmine.clock().tick(minFrameDuration);
- }
- describe('touchZoom', function() {
- it('should zoom the plot',function() {
- plot = $.plot(placeholder, [
- [
- [-1, 2],
- [11, 12]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0],
- initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- initialCoords = [
- getPairOfCoords(xaxis, yaxis, 3, 5),
- getPairOfCoords(xaxis, yaxis, 7, 9)
- ],
- finalCoords = [
- getPairOfCoords(xaxis, yaxis, 2, 4),
- getPairOfCoords(xaxis, yaxis, 8, 10)
- ],
- midPointCoords = {
- x: (xaxis.c2p(finalCoords[0].x - plot.offset().left) + xaxis.c2p(finalCoords[1].x - plot.offset().left)) / 2,
- y: (yaxis.c2p(finalCoords[0].y - plot.offset().top) + yaxis.c2p(finalCoords[1].y - plot.offset().top)) / 2
- },
- amount = getDistance(finalCoords) / getDistance(initialCoords);
- simulateTouchEvent(initialCoords, eventHolder, 'touchstart');
- simulateTouchEvent(finalCoords, eventHolder, 'touchmove');
- simulateTouchEvent(finalCoords, eventHolder, 'touchend');
- expect(xaxis.min).toBeCloseTo((midPointCoords.x - initialXmin) * (1 - 1/amount) + initialXmin, 6);
- expect(xaxis.max).toBeCloseTo(initialXmax - (initialXmax - midPointCoords.x) * (1 - 1/amount), 6);
- expect(yaxis.min).toBeCloseTo((midPointCoords.y - initialYmin) * (1 - 1/amount) + initialYmin, 6);
- expect(yaxis.max).toBeCloseTo(initialYmax - (initialYmax - midPointCoords.y) * (1 - 1/amount), 6);
- });
- it('should pan the plot for two fingers with constant distance',function() {
- plot = $.plot(placeholder, [
- [
- [-1, 2],
- [11, 12]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0],
- initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- canvasCoords = [ { x : 3, y : 5 }, { x : 7, y : 9 }, { x : 2, y : 4 }, { x : 6, y : 8 }],
- initialCoords = [
- getPairOfCoords(xaxis, yaxis, canvasCoords[0].x, canvasCoords[0].y),
- getPairOfCoords(xaxis, yaxis, canvasCoords[1].x, canvasCoords[1].y)
- ],
- finalCoords = [
- getPairOfCoords(xaxis, yaxis, canvasCoords[2].x, canvasCoords[2].y),
- getPairOfCoords(xaxis, yaxis, canvasCoords[3].x, canvasCoords[3].y)
- ];
- simulateTouchEvent(initialCoords, eventHolder, 'touchstart');
- simulateTouchEvent(finalCoords, eventHolder, 'touchmove');
- simulateTouchEvent(finalCoords, eventHolder, 'touchend');
- expect(xaxis.min).toBeCloseTo(initialXmin + (canvasCoords[0].x - canvasCoords[2].x), 6);
- expect(xaxis.max).toBeCloseTo(initialXmax + (canvasCoords[0].x - canvasCoords[2].x), 6);
- expect(yaxis.min).toBeCloseTo(initialYmin + (canvasCoords[0].y - canvasCoords[2].y), 6);
- expect(yaxis.max).toBeCloseTo(initialYmax + (canvasCoords[0].y - canvasCoords[2].y), 6);
- });
- it('should not zoom the plot for two fingers with small distance variation',function() {
- plot = $.plot(placeholder, [
- [
- [-1, 2],
- [11, 12]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0],
- initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- canvasCoords = [ { x : 3, y : 5 }, { x : 7, y : 8.999 }, { x : 2, y : 4 }, { x : 6.001, y : 8 }],
- initialCoords = [
- getPairOfCoords(xaxis, yaxis, canvasCoords[0].x, canvasCoords[0].y),
- getPairOfCoords(xaxis, yaxis, canvasCoords[1].x, canvasCoords[1].y)
- ],
- finalCoords = [
- getPairOfCoords(xaxis, yaxis, canvasCoords[2].x, canvasCoords[2].y),
- getPairOfCoords(xaxis, yaxis, canvasCoords[3].x, canvasCoords[3].y)
- ];
- var spy = spyOn(plot, 'zoom').and.callThrough();
- simulateTouchEvent(initialCoords, eventHolder, 'touchstart');
- simulateTouchEvent(finalCoords, eventHolder, 'touchmove');
- simulateTouchEvent(finalCoords, eventHolder, 'touchend');
- expect(spy).not.toHaveBeenCalled();
- });
- it('should zoom the plot correctly using pageXY when the canvas is placed in the bottom scrollable area of the page', function () {
- var largeDiv = $('<div style="height: 800px"> </div>');
- $(largeDiv).insertBefore(placeholder);
- plot = $.plot(placeholder, [
- [
- [-1, 2],
- [11, 12]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0],
- initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- initialCoords = [
- getPairOfCoords(xaxis, yaxis, 3, 5),
- getPairOfCoords(xaxis, yaxis, 7, 9)
- ],
- finalCoords = [
- getPairOfCoords(xaxis, yaxis, 2, 4),
- getPairOfCoords(xaxis, yaxis, 8, 10)
- ],
- midPointCoords = {
- x: (xaxis.c2p(finalCoords[0].x - plot.offset().left) + xaxis.c2p(finalCoords[1].x - plot.offset().left)) / 2,
- y: (yaxis.c2p(finalCoords[0].y - plot.offset().top) + yaxis.c2p(finalCoords[1].y - plot.offset().top)) / 2
- },
- amount = getDistance(finalCoords) / getDistance(initialCoords);
- simulateTouchEvent(initialCoords, plot.getEventHolder(), 'touchstart');
- simulateTouchEvent(finalCoords, plot.getEventHolder(), 'touchmove');
- simulateTouchEvent(finalCoords, plot.getEventHolder(), 'touchend');
- expect(xaxis.min).toBeCloseTo((midPointCoords.x - initialXmin) * (1 - 1/amount) + initialXmin, 6);
- expect(xaxis.max).toBeCloseTo(initialXmax - (initialXmax - midPointCoords.x) * (1 - 1/amount), 6);
- expect(yaxis.min).toBeCloseTo((midPointCoords.y - initialYmin) * (1 - 1/amount) + initialYmin, 6);
- expect(yaxis.max).toBeCloseTo(initialYmax - (initialYmax - midPointCoords.y) * (1 - 1/amount), 6);
- });
- it('should zoom the entire plot for touches not on the same axis',function() {
- plot = $.plot(placeholder, [
- [
- [-1, 2],
- [11, 12]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0],
- initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- initialCoords = [
- { x: xaxis.p2c(4), y: xaxis.box.top + plot.offset().top + 10 },
- { x: xaxis.p2c(5), y: xaxis.box.top + plot.offset().top - 10 }
- ],
- finalCoords = [
- getPairOfCoords(xaxis, yaxis, 2, 4),
- getPairOfCoords(xaxis, yaxis, 6, 6)
- ],
- midPointCoords = {
- x: (xaxis.c2p(finalCoords[0].x - plot.offset().left) + xaxis.c2p(finalCoords[1].x - plot.offset().left)) / 2,
- y: (yaxis.c2p(finalCoords[0].y - plot.offset().top) + yaxis.c2p(finalCoords[1].y - plot.offset().top)) / 2
- },
- amount = getDistance(finalCoords) / getDistance(initialCoords);
- simulateTouchEvent(initialCoords, eventHolder, 'touchstart');
- simulateTouchEvent(finalCoords, eventHolder, 'touchmove');
- simulateTouchEvent(finalCoords, eventHolder, 'touchend');
- expect(xaxis.min).not.toBeCloseTo(initialYmin, 6);
- expect(xaxis.max).not.toBeCloseTo(initialYmax, 6);
- expect(yaxis.min).not.toBeCloseTo(initialYmin, 6);
- expect(yaxis.max).not.toBeCloseTo(initialYmax, 6);
- });
- it('should zoom the plot on axis x',function() {
- plot = $.plot(placeholder, [
- [
- [-1, 2],
- [11, 12]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0],
- initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- initialCoords = [
- { x: xaxis.p2c(4), y: xaxis.box.top + plot.offset().top + 10 },
- { x: xaxis.p2c(5), y: xaxis.box.top + plot.offset().top + 10 }
- ],
- finalCoords = [
- getPairOfCoords(xaxis, yaxis, 2, 4),
- getPairOfCoords(xaxis, yaxis, 6, 6)
- ],
- midPointCoords = {
- x: (xaxis.c2p(finalCoords[0].x - plot.offset().left) + xaxis.c2p(finalCoords[1].x - plot.offset().left)) / 2,
- y: (yaxis.c2p(finalCoords[0].y - plot.offset().top) + yaxis.c2p(finalCoords[1].y - plot.offset().top)) / 2
- },
- amount = getDistance(finalCoords) / getDistance(initialCoords);
- simulateTouchEvent(initialCoords, eventHolder, 'touchstart');
- simulateTouchEvent(finalCoords, eventHolder, 'touchmove');
- simulateTouchEvent(finalCoords, eventHolder, 'touchend');
- expect(Math.abs(xaxis.min - ((midPointCoords.x - initialXmin) * (1 - 1/amount) + initialXmin))).toBeLessThan(1);
- expect(Math.abs(xaxis.max - (initialXmax - (initialXmax - midPointCoords.x) * (1 - 1/amount)))).toBeLessThan(1);
- expect(yaxis.min).toBeCloseTo(initialYmin, 6);
- expect(yaxis.max).toBeCloseTo(initialYmax, 6);
- });
- it('should zoom the plot on axis y',function() {
- plot = $.plot(placeholder, [
- [
- [-1, 2],
- [11, 12]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0],
- initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- initialCoords = [
- { x: xaxis.box.left - 10, y: yaxis.p2c(4) + plot.offset().top},
- { x: xaxis.box.left - 11, y: yaxis.p2c(5) + plot.offset().top}
- ],
- finalCoords = [
- getPairOfCoords(xaxis, yaxis, 2, 4),
- getPairOfCoords(xaxis, yaxis, 6, 6)
- ],
- midPointCoords = {
- x: (xaxis.c2p(finalCoords[0].x - plot.offset().left) + xaxis.c2p(finalCoords[1].x - plot.offset().left)) / 2,
- y: (yaxis.c2p(finalCoords[0].y - plot.offset().top) + yaxis.c2p(finalCoords[1].y - plot.offset().top)) / 2
- },
- amount = getDistance(finalCoords) / getDistance(initialCoords);
- simulateTouchEvent(initialCoords, eventHolder, 'touchstart');
- simulateTouchEvent(finalCoords, eventHolder, 'touchmove');
- simulateTouchEvent(finalCoords, eventHolder, 'touchend');
- expect(xaxis.min).toBeCloseTo(initialXmin, 6);
- expect(xaxis.max).toBeCloseTo(initialXmax, 6);
- expect(Math.abs(yaxis.min - ((midPointCoords.y - initialYmin) * (1 - 1/amount) + initialYmin))).toBeLessThan(1);
- expect(Math.abs(yaxis.max - (initialYmax - (initialYmax - midPointCoords.x) * (1 - 1/amount)))).toBeLessThan(1);
- });
- it('should not zoom the plot on axis for axis zoom not enabled',function() {
- plot = $.plot(placeholder, [
- [
- [0, 0],
- [10, 10]
- ]
- ], {
- xaxes: [{ autoScale: 'exact', axisZoom: false, axisPan: false }],
- yaxes: [{ autoScale: 'exact' }],
- zoom: { interactive: true, active: true, amount: 10 },
- pan: { interactive: true, active: true, frameRate: -1, enableTouch: true }
- });
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0],
- initialCoords = [
- { x: xaxis.p2c(4), y: xaxis.box.top + plot.offset().top + 10 },
- { x: xaxis.p2c(5), y: xaxis.box.top + plot.offset().top + 10 }
- ],
- finalCoords = [
- getPairOfCoords(xaxis, yaxis, 2, 4),
- getPairOfCoords(xaxis, yaxis, 6, 6)
- ],
- amount = getDistance(finalCoords) / getDistance(initialCoords);
- simulateTouchEvent(initialCoords, eventHolder, 'touchstart');
- simulateTouchEvent(finalCoords, eventHolder, 'touchmove');
- simulateTouchEvent(finalCoords, eventHolder, 'touchend');
- expect(xaxis.min).toBe(0);
- expect(xaxis.max).toBe(10);
- expect(yaxis.min).toBe(0);
- expect(yaxis.max).toBe(10);
- });
- it('should not zoom the axis for plot zoom not enabled',function() {
- plot = $.plot(placeholder, [
- [
- [0, 0],
- [10, 10]
- ]
- ], {
- xaxes: [{ autoScale: 'exact', plotZoom: false, plotPan: false }],
- yaxes: [{ autoScale: 'exact' }],
- zoom: { interactive: true, active: true, amount: 10, enableTouch: true },
- pan: { interactive: true, active: true, frameRate: -1, enableTouch: true }
- });
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0],
- initialCoords = [
- { x: 0, y: 10 },
- { x: 1, y: 50 }
- ],
- finalCoords = [
- getPairOfCoords(xaxis, yaxis, 2, 4),
- getPairOfCoords(xaxis, yaxis, 6, 6)
- ],
- amount = getDistance(finalCoords) / getDistance(initialCoords);
- simulateTouchEvent(initialCoords, eventHolder, 'touchstart');
- simulateTouchEvent(finalCoords, eventHolder, 'touchmove');
- simulateTouchEvent(finalCoords, eventHolder, 'touchend');
- expect(xaxis.min).toBe(0);
- expect(xaxis.max).toBe(10);
- expect(yaxis.min).not.toBe(0);
- expect(yaxis.max).not.toBe(10);
- });
- function getDistance(coords) {
- return Math.sqrt((coords[0].x - coords[1].x) * (coords[0].x - coords[1].x) + ((coords[0].y - coords[1].y) * (coords[0].y - coords[1].y)));
- }
- });
- describe('touchDrag', function() {
- it('should drag the plot',function() {
- plot = $.plot(placeholder, [
- [
- [-10, -10],
- [120, 120]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0],
- initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- canvasCoords = [ { x : 1, y : 1 }, { x : 100, y : 100 }],
- pointCoords = [
- getPairOfCoords(xaxis, yaxis, canvasCoords[0].x, canvasCoords[0].y),
- getPairOfCoords(xaxis, yaxis, canvasCoords[1].x, canvasCoords[1].y)
- ];
- simulate.touchstart(eventHolder, pointCoords[0].x, pointCoords[0].y);
- simulate.touchmove(eventHolder, pointCoords[1].x, pointCoords[1].y);
- simulateTouchEvent([], eventHolder, 'touchend'); // it can correctly trigger panend event.
- expect(xaxis.min).toBeCloseTo(initialXmin + (canvasCoords[0].x - canvasCoords[1].x), 6);
- expect(xaxis.max).toBeCloseTo(initialXmax + (canvasCoords[0].x - canvasCoords[1].x), 6);
- expect(yaxis.min).toBeCloseTo(initialYmin + (canvasCoords[0].y - canvasCoords[1].y), 6);
- expect(yaxis.max).toBeCloseTo(initialYmax + (canvasCoords[0].y - canvasCoords[1].y), 6);
- });
- it('should snap horizontal drag to x direction in smart pan mode', function() {
- var oldTouchMode = options.pan.touchMode;
- options.pan.touchMode = 'smart';
- plot = $.plot(placeholder, [
- [
- [-10, -10],
- [120, 120]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0];
- var initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- canvasCoords = [ { x : 1, y : 1 }, { x : 100, y : 2 }],
- pointCoords = [
- getPairOfCoords(xaxis, yaxis, canvasCoords[0].x, canvasCoords[0].y),
- getPairOfCoords(xaxis, yaxis, canvasCoords[1].x, canvasCoords[1].y)
- ];
- simulate.touchstart(eventHolder, pointCoords[0].x, pointCoords[0].y);
- simulate.touchmove(eventHolder, pointCoords[1].x, pointCoords[1].y);
- simulateTouchEvent([], eventHolder, 'touchend'); // it can correctly trigger panend event.
- expect(xaxis.min).toBeCloseTo(initialXmin + (canvasCoords[0].x - canvasCoords[1].x), 6);
- expect(xaxis.max).toBeCloseTo(initialXmax + (canvasCoords[0].x - canvasCoords[1].x), 6);
- expect(yaxis.min).toBe(initialYmin);
- expect(yaxis.max).toBe(initialYmax);
- options.pan.touchMode = oldTouchMode;
- });
- it('should snap vertical drag to x direction in smart pan mode', function() {
- var oldTouchMode = options.pan.touchMode;
- options.pan.touchMode = 'smart';
- plot = $.plot(placeholder, [
- [
- [-10, -10],
- [120, 120]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0];
- var initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- canvasCoords = [ { x : 1, y : 1 }, { x : 2, y : 100 }],
- pointCoords = [
- getPairOfCoords(xaxis, yaxis, canvasCoords[0].x, canvasCoords[0].y),
- getPairOfCoords(xaxis, yaxis, canvasCoords[1].x, canvasCoords[1].y)
- ];
- simulate.touchstart(eventHolder, pointCoords[0].x, pointCoords[0].y);
- simulate.touchmove(eventHolder, pointCoords[1].x, pointCoords[1].y);
- simulateTouchEvent([], eventHolder, 'touchend'); // it can correctly trigger panend event.
- expect(xaxis.min).toBe(initialXmin);
- expect(xaxis.max).toBe(initialXmax);
- expect(yaxis.min).toBeCloseTo(initialYmin + (canvasCoords[0].y - canvasCoords[1].y), 6);
- expect(yaxis.max).toBeCloseTo(initialYmax + (canvasCoords[0].y - canvasCoords[1].y), 6);
- options.pan.touchMode = oldTouchMode;
- });
- it('should no snap diagonal drag in smart pan mode', function() {
- var oldTouchMode = options.pan.touchMode;
- options.pan.touchMode = 'smart';
- plot = $.plot(placeholder, [
- [
- [-10, -10],
- [120, 120]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0];
- var initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- canvasCoords = [ { x : 1, y : 1 }, { x : 100, y : 100 }],
- pointCoords = [
- getPairOfCoords(xaxis, yaxis, canvasCoords[0].x, canvasCoords[0].y),
- getPairOfCoords(xaxis, yaxis, canvasCoords[1].x, canvasCoords[1].y)
- ];
- simulate.touchstart(eventHolder, pointCoords[0].x, pointCoords[0].y);
- simulate.touchmove(eventHolder, pointCoords[1].x, pointCoords[1].y);
- simulateTouchEvent([], eventHolder, 'touchend'); // it can correctly trigger panend event.
- expect(xaxis.min).toBeCloseTo(initialXmin + (canvasCoords[0].x - canvasCoords[1].x), 6);
- expect(xaxis.max).toBeCloseTo(initialXmax + (canvasCoords[0].x - canvasCoords[1].x), 6);
- expect(yaxis.min).toBeCloseTo(initialYmin + (canvasCoords[0].y - canvasCoords[1].y), 6);
- expect(yaxis.max).toBeCloseTo(initialYmax + (canvasCoords[0].y - canvasCoords[1].y), 6);
- options.pan.touchMode = oldTouchMode;
- });
- it('should snap horizontally-start-drag to x direction in smartLock pan mode', function() {
- var oldTouchMode = options.pan.touchMode;
- options.pan.touchMode = 'smartLock';
- plot = $.plot(placeholder, [
- [
- [-10, -10],
- [120, 120]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0];
- var initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- canvasCoords = [ { x : 1, y : 1 }, { x : 100, y : 2 }, { x: 100, y: 100 }],
- pointCoords = [
- getPairOfCoords(xaxis, yaxis, canvasCoords[0].x, canvasCoords[0].y),
- getPairOfCoords(xaxis, yaxis, canvasCoords[1].x, canvasCoords[1].y),
- getPairOfCoords(xaxis, yaxis, canvasCoords[2].x, canvasCoords[2].y)
- ];
-
- simulate.touchstart(eventHolder, pointCoords[0].x, pointCoords[0].y);
- simulate.touchmove(eventHolder, pointCoords[1].x, pointCoords[1].y);
- simulate.touchmove(eventHolder, pointCoords[2].x, pointCoords[2].y);
- simulateTouchEvent([], eventHolder, 'touchend'); // it can correctly trigger panend event.
- expect(xaxis.min).toBeCloseTo(initialXmin + (canvasCoords[0].x - canvasCoords[1].x), 6);
- expect(xaxis.max).toBeCloseTo(initialXmax + (canvasCoords[0].x - canvasCoords[1].x), 6);
- expect(yaxis.min).toBe(initialYmin);
- expect(yaxis.max).toBe(initialYmax);
- options.pan.touchMode = oldTouchMode;
- });
- it('should snap vertically-start-drag to y direction in smartLock pan mode', function() {
- var oldTouchMode = options.pan.touchMode;
- options.pan.touchMode = 'smartLock';
- plot = $.plot(placeholder, [
- [
- [-10, -10],
- [120, 120]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0];
- var initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- canvasCoords = [ { x : 1, y : 1 }, { x : 2, y : 100 }, { x: 100, y: 100 }],
- pointCoords = [
- getPairOfCoords(xaxis, yaxis, canvasCoords[0].x, canvasCoords[0].y),
- getPairOfCoords(xaxis, yaxis, canvasCoords[1].x, canvasCoords[1].y),
- getPairOfCoords(xaxis, yaxis, canvasCoords[2].x, canvasCoords[2].y)
- ];
- simulate.touchstart(eventHolder, pointCoords[0].x, pointCoords[0].y);
- simulate.touchmove(eventHolder, pointCoords[1].x, pointCoords[1].y);
- simulate.touchmove(eventHolder, pointCoords[2].x, pointCoords[2].y);
- simulateTouchEvent([], eventHolder, 'touchend'); // it can correctly trigger panend event.
- expect(xaxis.min).toBe(initialXmin);
- expect(xaxis.max).toBe(initialXmax);
- expect(yaxis.min).toBeCloseTo(initialYmin + (canvasCoords[0].y - canvasCoords[1].y), 6);
- expect(yaxis.max).toBeCloseTo(initialYmax + (canvasCoords[0].y - canvasCoords[1].y), 6);
- options.pan.touchMode = oldTouchMode;
- });
- it('should not drag if pan mode is invalid', function () {
- var oldTouchMode = options.pan.touchMode;
- options.pan.touchMode = '';
- plot = $.plot(placeholder, [
- [
- [-10, -10],
- [120, 120]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0],
- initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- canvasCoords = [ { x : 1, y : 1 }, { x : 100, y : 100 }],
- pointCoords = [
- getPairOfCoords(xaxis, yaxis, canvasCoords[0].x, canvasCoords[0].y),
- getPairOfCoords(xaxis, yaxis, canvasCoords[1].x, canvasCoords[1].y)
- ];
- simulate.touchstart(eventHolder, pointCoords[0].x, pointCoords[0].y);
- simulate.touchmove(eventHolder, pointCoords[1].x, pointCoords[1].y);
- simulateTouchEvent([], eventHolder, 'touchend'); // it can correctly trigger panend event.
- expect(xaxis.min).toBe(initialXmin);
- expect(xaxis.max).toBe(initialXmax);
- expect(yaxis.min).toBe(initialYmin);
- expect(yaxis.max).toBe(initialYmax);
- options.pan.touchMode = oldTouchMode;
- });
- it('should drag the logarithmic plot', function() {
- var d1 = [];
- for (var i = 0; i < 14; i += 0.2) {
- d1.push([i, 1.01 + Math.sin(i)]);
- }
- var plot = $.plot(placeholder, [d1], {
- series: {
- lines: { show: true },
- points: { show: true }
- },
- xaxis: { autoScale: 'exact' },
- yaxis: { mode: 'log', showTickLabels: "all", autoScale: 'exact' },
- zoom: { interactive: true, active: true },
- pan: { interactive: true, active: true, enableTouch: true }
- });
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0],
- initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- canvasCoords = [ { x : 4, y : 0.7 }, { x : 2, y : 10 } ],
- pointCoords = [
- getPairOfCoords(xaxis, yaxis, canvasCoords[0].x, canvasCoords[0].y),
- getPairOfCoords(xaxis, yaxis, canvasCoords[1].x, canvasCoords[1].y)
- ];
- simulate.touchstart(eventHolder, pointCoords[0].x, pointCoords[0].y);
- simulate.touchmove(eventHolder, pointCoords[1].x, pointCoords[1].y);
- simulate.touchend(eventHolder, pointCoords[1].x, pointCoords[1].y);
- expect(xaxis.min).toBeCloseTo(initialXmin + (canvasCoords[0].x - canvasCoords[1].x), 6);
- expect(xaxis.max).toBeCloseTo(initialXmax + (canvasCoords[0].x - canvasCoords[1].x), 6);
- expect(yaxis.min).toBeCloseTo((yaxis.c2p(yaxis.p2c(initialYmin) + (pointCoords[0].y - pointCoords[1].y))), 6);
- expect(yaxis.max).toBeCloseTo((yaxis.c2p(yaxis.p2c(initialYmax) + (pointCoords[0].y - pointCoords[1].y))), 6);
- });
- it('should drag the point in the same way for many sequential moves as for one long move',function() {
- //deactivate ticks for precision
- options.yaxes[0].showTickLabels = 'none';
- options.xaxes[0].showTickLabels = 'all';
- plot = $.plot(placeholder, [
- [
- [-10, -10],
- [120, 120]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0],
- initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- limit = 5,
- canvasCoords = [],
- pointCoords = [];
- for (var i = 1; i <= limit; i++) {
- canvasCoords[i] = { x: i, y: i };
- pointCoords[i] = getPairOfCoords(xaxis, yaxis, canvasCoords[i].x, canvasCoords[i].y);
- }
- //simulate drag from (1, 1) to (100, 100) sequentially
- simulate.touchstart(eventHolder, pointCoords[1].x, pointCoords[1].y);
- for (var i = 2; i <= limit; i++) {
- simulate.touchmove(eventHolder, pointCoords[i].x, pointCoords[i].y);
- }
- simulate.touchend(eventHolder, pointCoords[limit].x, pointCoords[limit].y);
- // compare axes after sequential drag with axes after direct drag
- expect(Math.abs(xaxis.min - (initialXmin + (canvasCoords[1].x - canvasCoords[limit].x)))).toBeLessThan(1);
- expect(Math.abs(xaxis.max - (initialXmax + (canvasCoords[1].x - canvasCoords[limit].x)))).toBeLessThan(1);
- expect(yaxis.min).toBeCloseTo(initialYmin + (canvasCoords[1].y - canvasCoords[limit].y), 0);
- expect(yaxis.max).toBeCloseTo(initialYmax + (canvasCoords[1].y - canvasCoords[limit].y), 0);
- });
- it('should not pan the plot for a finger outside canvas',function() {
- plot = $.plot(placeholder, [
- [
- [-10, 120],
- [-10, 120]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0],
- initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- canvasCoords = [ { x : 20, y : 20 }, { x : 120, y : 120 }],
- plotRight = plot.width() + plot.offset().left + plot.offset().right,
- plotBottom = plot.height() + plot.offset().top + plot.offset().bottom,
- pointCoords = [
- {x: plotRight + canvasCoords[0].x, y: plotBottom + canvasCoords[0].y},
- {x: plotRight + canvasCoords[1].x, y: plotBottom + canvasCoords[1].y}
- ];
- simulate.touchstart(eventHolder, pointCoords[0].x, pointCoords[0].y);
- simulate.touchmove(eventHolder, pointCoords[1].x, pointCoords[1].y);
- simulate.touchend(eventHolder, pointCoords[1].x, pointCoords[1].y);
- expect(xaxis.min).toBeCloseTo(initialXmin, 6);
- expect(xaxis.max).toBeCloseTo(initialXmax, 6);
- expect(yaxis.min).toBeCloseTo(initialYmin, 6);
- expect(yaxis.max).toBeCloseTo(initialYmax, 6);
- });
- it('should not pan the plot for a finger which comes from outside canvas',function() {
- plot = $.plot(placeholder, [
- [
- [-10, 120],
- [-10, 120]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0],
- initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- canvasCoords = [ { x : 20, y : 20 }, { x : 120, y : 120 }],
- plotRight = plot.width() + plot.offset().left + plot.offset().right,
- plotBottom = plot.height() + plot.offset().top + plot.offset().bottom,
- pointCoords = [
- {x: plotRight + canvasCoords[0].x, y: plotBottom + canvasCoords[0].y},
- {x: canvasCoords[1].x, y: canvasCoords[1].y}
- ];
- simulate.touchstart(eventHolder, pointCoords[0].x, pointCoords[0].y);
- simulate.touchmove(eventHolder, pointCoords[1].x, pointCoords[1].y);
- simulate.touchend(eventHolder, pointCoords[1].x, pointCoords[1].y);
- expect(xaxis.min).toBeCloseTo(initialXmin, 6);
- expect(xaxis.max).toBeCloseTo(initialXmax, 6);
- expect(yaxis.min).toBeCloseTo(initialYmin, 6);
- expect(yaxis.max).toBeCloseTo(initialYmax, 6);
- });
- it('should drag the plot on the yaxis only', function() {
- plot = $.plot(placeholder, [
- [
- [0, 0],
- [10, 10]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0],
- initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- pointCoords = [
- { x: xaxis.box.left - 10, y: yaxis.p2c(4) },
- { x: xaxis.box.left - 20, y: yaxis.p2c(5) }
- ];
- simulate.touchstart(eventHolder, pointCoords[0].x, pointCoords[0].y);
- simulate.touchmove(eventHolder, pointCoords[0].x, pointCoords[0].y);
- simulate.touchmove(eventHolder, pointCoords[1].x, pointCoords[1].y);
- simulate.touchend(eventHolder, pointCoords[1].x, pointCoords[1].y);
- expect(xaxis.min).toBe(0);
- expect(xaxis.max).toBe(10);
- expect(yaxis.min).toBeCloseTo(yaxis.c2p(yaxis.p2c(initialYmin) + (pointCoords[0].y - pointCoords[1].y)), 6);
- expect(yaxis.max).toBeCloseTo(yaxis.c2p(yaxis.p2c(initialYmax) + (pointCoords[0].y - pointCoords[1].y)), 6);
- });
- it('should drag the plot on the xaxis only', function() {
- plot = $.plot(placeholder, [
- [
- [0, 0],
- [10, 10]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0],
- initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- pointCoords = [
- { x: xaxis.p2c(4), y: xaxis.box.top + plot.offset().top + 10 },
- { x: xaxis.p2c(5), y: xaxis.box.top + plot.offset().top + 15 }
- ];
- simulate.touchstart(eventHolder, pointCoords[0].x, pointCoords[0].y);
- simulate.touchmove(eventHolder, pointCoords[0].x, pointCoords[0].y);
- simulate.touchmove(eventHolder, pointCoords[1].x, pointCoords[1].y);
- simulate.touchend(eventHolder, pointCoords[1].x, pointCoords[1].y);
- expect(xaxis.min).toBeCloseTo(xaxis.c2p(xaxis.p2c(initialXmin) + (pointCoords[0].x - pointCoords[1].x)), 6);
- expect(xaxis.max).toBeCloseTo(xaxis.c2p(xaxis.p2c(initialXmax) + (pointCoords[0].x - pointCoords[1].x)), 6);
- expect(yaxis.min).toBe(0);
- expect(yaxis.max).toBe(10);
- });
- it('should not drag the plot on axis for axis pan not enabled', function() {
- plot = $.plot(placeholder, [
- [
- [0, 0],
- [10, 10]
- ]
- ], {
- xaxes: [{ autoScale: 'exact', axisPan: false }],
- yaxes: [{ autoScale: 'exact' }],
- zoom: { interactive: true, active: true, amount: 10 },
- pan: { interactive: true, active: true, frameRate: -1, enableTouch: true }
- });
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0],
- initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- pointCoords = [
- { x: xaxis.p2c(4), y: xaxis.box.top + plot.offset().top + 10 },
- { x: xaxis.p2c(5), y: xaxis.box.top + plot.offset().top + 15 }
- ];
- simulate.touchstart(eventHolder, pointCoords[0].x, pointCoords[0].y);
- simulate.touchmove(eventHolder, pointCoords[0].x, pointCoords[0].y);
- simulate.touchmove(eventHolder, pointCoords[1].x, pointCoords[1].y);
- simulate.touchend(eventHolder, pointCoords[1].x, pointCoords[1].y);
- expect(xaxis.min).toBe(0);
- expect(yaxis.max).toBe(10);
- expect(yaxis.min).toBe(0);
- expect(yaxis.max).toBe(10);
- });
- it('should not drag the axis for plot pan not enabled', function() {
- plot = $.plot(placeholder, [
- [
- [0, 0],
- [10, 10]
- ]
- ], {
- xaxes: [{ autoScale: 'exact', plotPan: false }],
- yaxes: [{ autoScale: 'exact', plotPan: false }],
- zoom: { interactive: true, active: true, amount: 10 },
- pan: { interactive: true, active: true, frameRate: -1, enableTouch: true }
- });
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0],
- initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- pointCoords = [
- { x: 0, y: 50 },
- { x: 50, y: 100 }
- ];
- simulate.touchstart(eventHolder, pointCoords[0].x, pointCoords[0].y);
- simulate.touchmove(eventHolder, pointCoords[0].x, pointCoords[0].y);
- simulate.touchmove(eventHolder, pointCoords[1].x, pointCoords[1].y);
- simulate.touchend(eventHolder, pointCoords[1].x, pointCoords[1].y);
- expect(xaxis.min).toBe(0);
- expect(xaxis.max).toBe(10);
- expect(yaxis.min).toBe(0);
- expect(yaxis.max).toBe(10);
- });
- it('should recompute the axis to drag after a pinch event ended',function() {
- plot = $.plot(placeholder, [
- [
- [-1, 2],
- [11, 12]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0],
- initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- previousXmin, previousXmax, previousYmin, previousYmax,
- initialCoords = [
- getPairOfCoords(xaxis, yaxis, 1, 3),
- getPairOfCoords(xaxis, yaxis, 2, 4),
- ],
- midPointCoords = [
- getPairOfCoords(xaxis, yaxis, 3, 7),
- { x: xaxis.p2c(4), y: xaxis.box.top + plot.offset().top + 10 }
- ],
- finalCoordsPinch = [
- { x: xaxis.p2c(4), y: xaxis.box.top + plot.offset().top + 10 }
- ],
- finalCoordsPan = [
- { x: xaxis.p2c(5), y: xaxis.box.top + plot.offset().top + 15 }
- ];
- //simulate pinch
- simulateTouchEvent(initialCoords, eventHolder, 'touchstart');
- simulateTouchEvent(midPointCoords, eventHolder, 'touchmove');
- simulateTouchEvent(finalCoordsPinch, eventHolder, 'touchend');
- previousXmin = xaxis.min;
- previousXmax = xaxis.max;
- previousYmin = yaxis.min;
- previousYmax = yaxis.max;
- expect(previousXmin).not.toBeCloseTo(initialXmin, 6);
- expect(previousXmax).not.toBeCloseTo(initialXmax, 6);
- expect(previousYmin).not.toBeCloseTo(initialYmin, 6);
- expect(previousYmax).not.toBeCloseTo(initialYmax, 6);
- //simulate pan after pinch event
- simulateTouchEvent(finalCoordsPan, eventHolder, 'touchmove');
- simulateTouchEvent(finalCoordsPan, eventHolder, 'touchend');
- expect(xaxis.min).toBeCloseTo(xaxis.c2p(xaxis.p2c(previousXmin) + (finalCoordsPinch[0].x - finalCoordsPan[0].x)), 6);
- expect(xaxis.max).toBeCloseTo(xaxis.c2p(xaxis.p2c(previousXmax) + (finalCoordsPinch[0].x - finalCoordsPan[0].x)), 6);
- expect(yaxis.min).toBe(previousYmin);
- expect(yaxis.max).toBe(previousYmax);
- });
- it('can disable pinch', function() {
- var oldTouchZoom = options.zoom.enableTouch;
- options.zoom.enableTouch = false;
- plot = $.plot(placeholder, [
- [
- [-10, -10],
- [120, 120]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0];
- var initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- canvasCoords = [ { x : 1, y : 1 }, { x : 100, y : 5 }],
- initialCoords = [
- getPairOfCoords(xaxis, yaxis, canvasCoords[0].x, canvasCoords[0].y),
- getPairOfCoords(xaxis, yaxis, canvasCoords[0].x + 1, canvasCoords[0].y + 1),
- ],
- finalCoordsPinch = [
- getPairOfCoords(xaxis, yaxis, canvasCoords[1].x, canvasCoords[1].y),
- getPairOfCoords(xaxis, yaxis, canvasCoords[1].x + 1, canvasCoords[1].y + 1),
- ];
- //simulate pinch
- simulateTouchEvent(initialCoords, eventHolder, 'touchstart');
- simulateTouchEvent(finalCoordsPinch, eventHolder, 'touchmove');
- simulateTouchEvent(finalCoordsPinch, eventHolder, 'touchend');
- expect(xaxis.min).toBe(initialXmin);
- expect(xaxis.max).toBe(initialXmax);
- expect(yaxis.min).toBe(initialYmin);
- expect(yaxis.max).toBe(initialYmax);
- options.zoom.enableTouch = oldTouchZoom;
- })
- });
- describe('doubleTap', function() {
- it('should recenter the plot',function() {
- plot = $.plot(placeholder, [
- [
- [-10, 120],
- [-10, 120]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0],
- initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- canvasCoords = [ { x : 1, y : 2 }, { x : 3, y : 5 }],
- pointCoords = [
- getPairOfCoords(xaxis, yaxis, canvasCoords[0].x, canvasCoords[0].y),
- getPairOfCoords(xaxis, yaxis, canvasCoords[1].x, canvasCoords[1].y)
- ];
- simulate.touchstart(eventHolder, pointCoords[0].x, pointCoords[0].y);
- simulate.touchmove(eventHolder, pointCoords[1].x, pointCoords[1].y);
- simulate.touchend(eventHolder, pointCoords[1].x, pointCoords[1].y);
- //check if the drag modified the plot correctly
- expect(xaxis.min).toBeCloseTo(initialXmin + (canvasCoords[0].x - canvasCoords[1].x), 6);
- expect(xaxis.max).toBeCloseTo(initialXmax + (canvasCoords[0].x - canvasCoords[1].x), 6);
- expect(yaxis.min).toBeCloseTo(initialYmin + (canvasCoords[0].y - canvasCoords[1].y), 6);
- expect(yaxis.max).toBeCloseTo(initialYmax + (canvasCoords[0].y - canvasCoords[1].y), 6);
- //simulate double tap
- simulate.touchstart(eventHolder, pointCoords[1].x, pointCoords[1].y);
- simulate.touchend(eventHolder, pointCoords[1].x, pointCoords[1].y);
- simulate.touchstart(eventHolder, pointCoords[1].x, pointCoords[1].y);
- simulate.touchend(eventHolder, pointCoords[1].x, pointCoords[1].y);
- //check if axis values returned to initial coordinates
- expect(xaxis.min).toBeCloseTo(initialXmin, 6);
- expect(xaxis.max).toBeCloseTo(initialXmax, 6);
- expect(yaxis.min).toBeCloseTo(initialYmin, 6);
- expect(yaxis.max).toBeCloseTo(initialYmax, 6);
- });
- it('should not recenter for doubletap event triggered by touchmove', function() {
- //when touchmove to somewhere close to last doubletap point, another doubletap will be triggered
- //this doubletap event should not do recenter
- plot = $.plot(placeholder, [
- [
- [-10, 120],
- [-10, 120]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0],
- initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- canvasCoords = [ { x : 1, y : 2 }, { x : 3, y : 5 }],
- pointCoords = [
- getPairOfCoords(xaxis, yaxis, canvasCoords[0].x, canvasCoords[0].y),
- getPairOfCoords(xaxis, yaxis, canvasCoords[1].x, canvasCoords[1].y)
- ];
- //simulate double tap
- simulate.touchstart(eventHolder, pointCoords[1].x, pointCoords[1].y);
- simulate.touchend(eventHolder, pointCoords[1].x, pointCoords[1].y);
- simulate.touchstart(eventHolder, pointCoords[1].x, pointCoords[1].y);
- simulate.touchend(eventHolder, pointCoords[1].x, pointCoords[1].y);
- //drag the plot
- simulate.touchstart(eventHolder, pointCoords[0].x, pointCoords[0].y);
- simulate.touchmove(eventHolder, pointCoords[1].x, pointCoords[1].y);
-
- //check if the drag modified the plot correctly
- expect(xaxis.min).toBeCloseTo(initialXmin + (canvasCoords[0].x - canvasCoords[1].x), 6);
- expect(xaxis.max).toBeCloseTo(initialXmax + (canvasCoords[0].x - canvasCoords[1].x), 6);
- expect(yaxis.min).toBeCloseTo(initialYmin + (canvasCoords[0].y - canvasCoords[1].y), 6);
- expect(yaxis.max).toBeCloseTo(initialYmax + (canvasCoords[0].y - canvasCoords[1].y), 6);
- simulate.touchend(eventHolder, pointCoords[1].x, pointCoords[1].y);
- });
- it('should recenter the plot on axis x',function() {
- plot = $.plot(placeholder, [
- [
- [-10, -10],
- [120, 120]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0],
- initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- canvasCoords = [ { x : 1, y : 2 }, { x : 3, y : 5 }],
- pointCoords = [
- getPairOfCoords(xaxis, yaxis, canvasCoords[0].x, canvasCoords[0].y),
- getPairOfCoords(xaxis, yaxis, canvasCoords[1].x, canvasCoords[1].y)
- ];
- simulate.touchstart(eventHolder, pointCoords[0].x, pointCoords[0].y);
- simulate.touchmove(eventHolder, pointCoords[1].x, pointCoords[1].y);
- simulate.touchend(eventHolder, pointCoords[1].x, pointCoords[1].y);
- //check if the drag modified the plot correctly
- expect(xaxis.min).toBeCloseTo(initialXmin + (canvasCoords[0].x - canvasCoords[1].x), 6);
- expect(xaxis.max).toBeCloseTo(initialXmax + (canvasCoords[0].x - canvasCoords[1].x), 6);
- expect(yaxis.min).toBeCloseTo(initialYmin + (canvasCoords[0].y - canvasCoords[1].y), 6);
- expect(yaxis.max).toBeCloseTo(initialYmax + (canvasCoords[0].y - canvasCoords[1].y), 6);
- //simulate double tap
- simulate.touchstart(eventHolder, xaxis.p2c(5), xaxis.box.top + plot.offset().top + 15);
- simulate.touchend(eventHolder, xaxis.p2c(5), xaxis.box.top + plot.offset().top + 15);
- simulate.touchstart(eventHolder, xaxis.p2c(5), xaxis.box.top + plot.offset().top + 15);
- simulate.touchend(eventHolder, xaxis.p2c(5), xaxis.box.top + plot.offset().top + 15);
- //check if axis values returned to initial coordinates
- expect(xaxis.min).toBeCloseTo(initialXmin, 6);
- expect(xaxis.max).toBeCloseTo(initialXmax, 6);
- expect(yaxis.min).toBeCloseTo(initialYmin + (canvasCoords[0].y - canvasCoords[1].y), 6);
- expect(yaxis.max).toBeCloseTo(initialYmax + (canvasCoords[0].y - canvasCoords[1].y), 6);
- });
- it('should recenter the plot on axis y',function() {
- plot = $.plot(placeholder, [
- [
- [-10, -10],
- [120, 120]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0],
- initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- canvasCoords = [ { x : 1, y : 2 }, { x : 3, y : 5 }],
- pointCoords = [
- getPairOfCoords(xaxis, yaxis, canvasCoords[0].x, canvasCoords[0].y),
- getPairOfCoords(xaxis, yaxis, canvasCoords[1].x, canvasCoords[1].y)
- ];
- simulate.touchstart(eventHolder, pointCoords[0].x, pointCoords[0].y);
- simulate.touchmove(eventHolder, pointCoords[1].x, pointCoords[1].y);
- simulate.touchend(eventHolder, pointCoords[1].x, pointCoords[1].y);
- //check if the drag modified the plot correctly
- expect(xaxis.min).toBeCloseTo(initialXmin + (canvasCoords[0].x - canvasCoords[1].x), 6);
- expect(xaxis.max).toBeCloseTo(initialXmax + (canvasCoords[0].x - canvasCoords[1].x), 6);
- expect(yaxis.min).toBeCloseTo(initialYmin + (canvasCoords[0].y - canvasCoords[1].y), 6);
- expect(yaxis.max).toBeCloseTo(initialYmax + (canvasCoords[0].y - canvasCoords[1].y), 6);
- //simulate double tap
- simulate.touchstart(eventHolder, xaxis.box.left - 20, yaxis.p2c(5));
- simulate.touchend(eventHolder, xaxis.box.left - 20, yaxis.p2c(5));
- simulate.touchstart(eventHolder, xaxis.box.left - 20, yaxis.p2c(5));
- simulate.touchend(eventHolder, xaxis.box.left - 20, yaxis.p2c(5));
- //check if axis values returned to initial coordinates
- expect(xaxis.min).toBeCloseTo(initialXmin + (canvasCoords[0].x - canvasCoords[1].x), 6);
- expect(xaxis.max).toBeCloseTo(initialXmax + (canvasCoords[0].x - canvasCoords[1].x), 6);
- expect(yaxis.min).toBeCloseTo(initialYmin, 6);
- expect(yaxis.max).toBeCloseTo(initialYmax, 6);
- });
- it('should not recenter the plot for one touch inside axis box and one inside plot area', function(){
- plot = $.plot(placeholder, [
- [
- [-10, -10],
- [120, 120]
- ]
- ], options);
- var eventHolder = plot.getEventHolder(),
- xaxis = plot.getXAxes()[0],
- yaxis = plot.getYAxes()[0],
- initialXmin = xaxis.min,
- initialXmax = xaxis.max,
- initialYmin = yaxis.min,
- initialYmax = yaxis.max,
- canvasCoords = [ { x : 1, y : 2 }, { x : 3, y : 5 }],
- pointCoords = [
- getPairOfCoords(xaxis, yaxis, canvasCoords[0].x, canvasCoords[0].y),
- getPairOfCoords(xaxis, yaxis, canvasCoords[1].x, canvasCoords[1].y)
- ];
- simulate.touchstart(eventHolder, pointCoords[0].x, pointCoords[0].y);
- simulate.touchmove(eventHolder, pointCoords[1].x, pointCoords[1].y);
- simulate.touchend(eventHolder, pointCoords[1].x, pointCoords[1].y);
- //check if the drag modified the plot correctly
- expect(xaxis.min).toBeCloseTo(initialXmin + (canvasCoords[0].x - canvasCoords[1].x), 6);
- expect(xaxis.max).toBeCloseTo(initialXmax + (canvasCoords[0].x - canvasCoords[1].x), 6);
- expect(yaxis.min).toBeCloseTo(initialYmin + (canvasCoords[0].y - canvasCoords[1].y), 6);
- expect(yaxis.max).toBeCloseTo(initialYmax + (canvasCoords[0].y - canvasCoords[1].y), 6);
- //simulate double tap
- simulate.touchstart(eventHolder, xaxis.box.left - 20, yaxis.p2c(5));
- simulate.touchend(eventHolder, xaxis.box.left - 20, yaxis.p2c(5));
- simulate.touchstart(eventHolder, 10, 20);
- simulate.touchend(eventHolder, 10, 20);
- //check if axis values remained the same
- expect(xaxis.min).toBeCloseTo(initialXmin + (canvasCoords[0].x - canvasCoords[1].x), 6);
- expect(xaxis.max).toBeCloseTo(initialXmax + (canvasCoords[0].x - canvasCoords[1].x), 6);
- expect(yaxis.min).toBeCloseTo(initialYmin + (canvasCoords[0].y - canvasCoords[1].y), 6);
- expect(yaxis.max).toBeCloseTo(initialYmax + (canvasCoords[0].y - canvasCoords[1].y), 6);
- });
- });
- function getPairOfCoords(xaxis, yaxis, x, y) {
- return {
- x : xaxis.p2c(x) + plot.offset().left,
- y : yaxis.p2c(y) + plot.offset().top
- }
- }
- });
|