/* eslint-disable */ /* global $, describe, it, xit, xdescribe, after, afterEach, expect*/ describe("flot navigate plugin", function () { var placeholder, plot, options; beforeEach(function () { placeholder = setFixtures('
') .find('#test-container'); options = { xaxes: [{ autoScale: 'exact' }], yaxes: [{ autoScale: 'exact' }], zoom: { interactive: true, active: true, amount: 10 }, pan: { interactive: true, active: true, frameRate: -1 } }; }); it('provides a zoom, zoomOut, pan, smartPan functions', function () { plot = $.plot(placeholder, [ [] ], options); expect(typeof plot.zoom).toBe('function'); expect(typeof plot.zoomOut).toBe('function'); expect(typeof plot.pan).toBe('function'); expect(typeof plot.smartPan).toBe('function'); }); describe('zoom', function () { it('uses the provided amount', function () { var xaxis, yaxis; plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], options); xaxis = plot.getXAxes()[0]; yaxis = plot.getYAxes()[0]; plot.zoom({ amount: 2 }); expect(xaxis.min).toBe(2.5); expect(xaxis.max).toBe(7.5); expect(yaxis.min).toBeCloseTo(2.5, 7); expect(yaxis.max).toBeCloseTo(7.5, 7); }); it('works with autoScale', function () { var xaxis, yaxis, opts = { xaxes: [{ autoScale: 'sliding-window' , min: 0, max: 100}], yaxes: [{ autoScale: 'loose' }], zoom: { interactive: true, amount: 10 }, pan: { interactive: true, frameRate: -1 } }; plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], opts); xaxis = plot.getXAxes()[0]; yaxis = plot.getYAxes()[0]; plot.zoom({ amount: 4, center: { left: 0, top: plot.height()/2 } }); expect(xaxis.min).toBe(0); expect(xaxis.max).toBe(25); expect(yaxis.min).toBeCloseTo(4.4, 7); expect(yaxis.max).toBeCloseTo(5.8, 7); plot.zoom({ amount: -2, center: { left: plot.width()/2, top: plot.height()/2 } }); expect(xaxis.min).toBeCloseTo(6.25, 2); expect(xaxis.max).toBe(18.75); expect(yaxis.min).toBeCloseTo(4.8, 7); expect(yaxis.max).toBe(5.4); }); it('uses the amount configured in the plot if none is provided', function () { var xaxis, yaxis; plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], options); xaxis = plot.getXAxes()[0]; yaxis = plot.getYAxes()[0]; plot.zoom(); expect(xaxis.min).toBe(4.5); expect(xaxis.max).toBe(5.5); expect(yaxis.min).toBeCloseTo(4.5, 7); expect(yaxis.max).toBeCloseTo(5.5, 7); }); it('uses the provided center', function () { var xaxis, yaxis; plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], options); plot.zoom({ amount: 2, center: { left: 0, top: plot.height() } }); xaxis = plot.getXAxes()[0]; yaxis = plot.getYAxes()[0]; expect(xaxis.min).toBe(0); expect(xaxis.max).toBe(5); expect(yaxis.min).toBe(0); expect(yaxis.max).toBe(5); }); it('uses the provided axes', function () { var xaxis, yaxis; plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], options); plot.zoom({ amount: 2, center: { left: 0, top: plot.height() }, axes: plot.getXAxes() }); xaxis = plot.getXAxes()[0]; yaxis = plot.getYAxes()[0]; expect(xaxis.min).toBe(0); expect(xaxis.max).toBe(5); expect(yaxis.min).toBe(0); expect(yaxis.max).toBe(10); }); it ('doesn\'t got to Infinity and beyond', function () { var xaxis, yaxis; plot = $.plot(placeholder, [ [ [-1, -10e200 ], [1, 10e200] ] ], options); plot.zoom({ amount: 10e-200 }); yaxis = plot.getYAxes()[0]; expect(yaxis.min).not.toBe(-Infinity); expect(yaxis.max).not.toBe(Infinity); }); it('generates subunitary ticks for X axis', function () { var xaxis, ticks, middle; plot = $.plot(placeholder, [ [ [3, 0], [9, 10] ] ], options); plot.zoom({ amount: 4, center: { left: 0, top: plot.height() } }); xaxis = plot.getXAxes()[0]; expect(xaxis.min).toBe(3); expect(xaxis.max).toBe(4.5); ticks = xaxis.ticks; middle = Math.floor(ticks.length / 2); expect(ticks[middle- 1].v).toBe(3.6); expect(ticks[middle].v).toBe(3.8); expect(ticks[middle + 1].v).toBe(4); }); it('does not zoom for active false', function () { plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], { xaxes: [{ autoScale: 'exact' }], yaxes: [{ autoScale: 'exact' }], zoom: { interactive: true, active: false, amount: 10 }, pan: { interactive: true, active: false, frameRate: -1 } }); var eventHolder = plot.getEventHolder(), xaxis = plot.getXAxes()[0], yaxis = plot.getYAxes()[0], initialCoords = [ {x: 3, y: 5}, {x:7, y:9} ], finalCoords = [ {x: 2, y: 4}, {x: 8, y: 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 }; simulate.sendTouchEvents(initialCoords, eventHolder, 'touchstart'); simulate.sendTouchEvents(finalCoords, eventHolder, 'touchmove'); simulate.sendTouchEvents(finalCoords, eventHolder, 'touchend'); expect(xaxis.min).toBe(0); expect(xaxis.max).toBe(10); expect(yaxis.min).toBe(0); expect(yaxis.max).toBe(10); }); describe('with large numbers', function() { it ('limits the navigation offsets', function () { var yaxis; plot = $.plot(placeholder, [ [ [0, -1e308], [1000, 1e308] ] ], options); yaxis = plot.getYAxes()[0]; plot.zoom({ amount: 10e-20 }); expect(yaxis.min).toBe(-Number.MAX_VALUE); expect(yaxis.max).toBe(Number.MAX_VALUE); expect(isFinite(plot.navigationState().yaxis.navigationOffset.below)).toBe(true); expect(isFinite(plot.navigationState().yaxis.navigationOffset.above)).toBe(true); }); }) }); describe('zoomOut', function () { it('uses the provided amount', function () { var xaxis, yaxis; plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], options); xaxis = plot.getXAxes()[0]; yaxis = plot.getYAxes()[0]; plot.zoomOut({ amount: 0.5 }); expect(xaxis.min).toBe(2.5); expect(xaxis.max).toBe(7.5); expect(yaxis.min).toBeCloseTo(2.5, 7); expect(yaxis.max).toBeCloseTo(7.5, 7); }); it('uses the amount configured in the plot if none is provided', function () { var xaxis, yaxis; plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], options); xaxis = plot.getXAxes()[0]; yaxis = plot.getYAxes()[0]; plot.zoom(); expect(xaxis.min).toBe(4.5); expect(xaxis.max).toBe(5.5); expect(yaxis.min).toBeCloseTo(4.5, 7); expect(yaxis.max).toBeCloseTo(5.5, 7); }); it('uses the provided center', function () { var xaxis, yaxis; plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], options); plot.zoomOut({ amount: 0.5, center: { left: 0, top: plot.height() } }); xaxis = plot.getXAxes()[0]; yaxis = plot.getYAxes()[0]; expect(xaxis.min).toBe(0); expect(xaxis.max).toBe(5); expect(yaxis.min).toBe(0); expect(yaxis.max).toBe(5); }); it ('doesn\'t got to Infinity and beyond', function () { var xaxis, yaxis; plot = $.plot(placeholder, [ [ [-1, -10e200 ], [1, 10e200] ] ], options); plot.zoomOut({ amount: 10e200 }); yaxis = plot.getYAxes()[0]; expect(yaxis.min).not.toBe(-Infinity); expect(yaxis.max).not.toBe(Infinity); }); it ('can be disabled per axis for zoom on plot', function () { var xaxis, yaxis; plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], options); xaxis = plot.getXAxes()[0]; yaxis = plot.getYAxes()[0]; xaxis.options.plotZoom = false; plot.zoomOut({ amount: 0.5 }); expect(xaxis.min).toBe(0); expect(xaxis.max).toBe(10); expect(yaxis.min).toBeCloseTo(2.5, 7); expect(yaxis.max).toBeCloseTo(7.5, 7); }); it ('can be disabled per axis for zoom on axis', function () { var xaxis, yaxis; plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], options); xaxis = plot.getXAxes()[0]; yaxis = plot.getYAxes()[0]; xaxis.options.axisZoom = false; plot.zoomOut({ amount: 0.5, axes: [xaxis] }); expect(xaxis.min).toBe(0); expect(xaxis.max).toBe(10); expect(yaxis.min).toBe(0); expect(yaxis.max).toBe(10); }); }); describe('smartPan', function () { it('uses the provided x delta', function () { var xaxis, yaxis; plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], options); xaxis = plot.getXAxes()[0]; yaxis = plot.getYAxes()[0]; plot.smartPan({ x: -plot.width(), y: 0 }, plot.navigationState()); expect(xaxis.min).toBe(-10); expect(xaxis.max).toBe(0); expect(yaxis.min).toBe(0); expect(yaxis.max).toBe(10); }); it('uses the provided y delta', function () { var xaxis, yaxis; plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], options); xaxis = plot.getXAxes()[0]; yaxis = plot.getYAxes()[0]; plot.smartPan({ x: 0, y: plot.height(), }, plot.navigationState()); expect(xaxis.min).toBe(0); expect(xaxis.max).toBe(10); expect(yaxis.min).toBe(-10); expect(yaxis.max).toBe(0); }); it('snaps to the x direction when delta y is small', function () { var xaxis, yaxis; plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], options); xaxis = plot.getXAxes()[0]; yaxis = plot.getYAxes()[0]; plot.smartPan({ x: -plot.width(), y: 1 }, plot.navigationState()); expect(xaxis.min).toBe(-10); expect(xaxis.max).toBe(0); expect(yaxis.min).toBe(0); expect(yaxis.max).toBe(10); }); it('snaps to the y direction when delta x is small', function () { var xaxis, yaxis; plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], options); xaxis = plot.getXAxes()[0]; yaxis = plot.getYAxes()[0]; plot.smartPan({ x: 1, y: plot.height(), }, plot.navigationState()); expect(xaxis.min).toBe(0); expect(xaxis.max).toBe(10); expect(yaxis.min).toBe(-10); expect(yaxis.max).toBe(0); }); it('restore xaxis offset on snap on y direction if returns from diagonal snap', function () { var xaxis, yaxis; plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], options); xaxis = plot.getXAxes()[0]; yaxis = plot.getYAxes()[0]; var initialState = plot.navigationState(0, 0); plot.smartPan({ x: plot.width(), y: plot.height(), }, initialState); expect(xaxis.min).toBe(10); expect(xaxis.max).toBe(20); expect(yaxis.min).toBe(-10); expect(yaxis.max).toBe(0); plot.smartPan({ x: plot.width(), y: 2, }, initialState); expect(yaxis.min).toBe(0); expect(yaxis.max).toBe(10); }); it ('can be disabled per axis for panning the etire plot', function () { var xaxis, yaxis; plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], options); xaxis = plot.getXAxes()[0]; yaxis = plot.getYAxes()[0]; xaxis.options.plotPan = false; plot.smartPan({ x: plot.width(), y: plot.height(), }, plot.navigationState()); expect(xaxis.min).toBe(0); expect(xaxis.max).toBe(10); expect(yaxis.min).toBe(-10); expect(yaxis.max).toBe(0); }); it ('can be disabled per axis for pan on that axis', function () { var xaxis, yaxis; plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], options); xaxis = plot.getXAxes()[0]; yaxis = plot.getYAxes()[0]; xaxis.options.axisPan = false; plot.smartPan({ x: plot.width(), y: plot.height(), }, plot.navigationState(), [xaxis]); expect(xaxis.min).toBe(0); expect(xaxis.max).toBe(10); expect(yaxis.min).toBe(0); expect(yaxis.max).toBe(10); }); it('can pan close to 0 for logaxis', function () { var xaxis, yaxis; plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], { xaxes: [{ autoScale: 'exact', mode : 'log'}], yaxes: [{ autoScale: 'exact' }], zoom: { interactive: true, active: true, amount: 10 }, pan: { interactive: true, active: true, frameRate: -1 } }); xaxis = plot.getXAxes()[0]; yaxis = plot.getYAxes()[0]; expect(xaxis.min).toBe(0.1); expect(xaxis.max).toBe(10); plot.smartPan({ x: -plot.width(), y: 0 }, plot.navigationState()); expect(xaxis.min).toBeCloseTo(0.001, 4); expect(xaxis.max).toBeCloseTo(0.1, 4); expect(yaxis.min).toBe(0); expect(yaxis.max).toBe(10); }); describe('with large numbers', function() { it ('limits the navigation offsets', function () { var yaxis; plot = $.plot(placeholder, [ [ [0, -1e308], [1000, 1e308] ] ], options); yaxis = plot.getYAxes()[0]; plot.smartPan({ x: 0, y: plot.height(), }, plot.navigationState()); expect(yaxis.min).toBe(-1e308); expect(yaxis.max).toBeLessThan(0); expect(isFinite(plot.navigationState().yaxis.navigationOffset.below)).toBe(true); expect(isFinite(plot.navigationState().yaxis.navigationOffset.above)).toBe(true); }); }) }); describe('mousePan', function() { it ('pans on xaxis only', function () { plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], options); var xaxis = plot.getXAxes()[0], yaxis = plot.getYAxes()[0], initialXmin = xaxis.min, initialXmax = xaxis.max, eventHolder = plot.getEventHolder(), 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.mouseDown(eventHolder, pointCoords[0].x, pointCoords[0].y); simulate.mouseMove(eventHolder, pointCoords[0].x, pointCoords[0].y); simulate.mouseMove(eventHolder, pointCoords[1].x, pointCoords[1].y); simulate.mouseUp(eventHolder, pointCoords[1].x, pointCoords[1].y); expect(xaxis.min).toBeCloseTo(xaxis.c2p(xaxis.p2c(initialXmin) + (pointCoords[0].x - pointCoords[1].x)), 0); expect(xaxis.max).toBeCloseTo(xaxis.c2p(xaxis.p2c(initialXmax) + (pointCoords[0].x - pointCoords[1].x)), 0); expect(yaxis.min).toBe(0); expect(yaxis.max).toBe(10); }); it ('pans on yaxis only', function () { plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], options); var xaxis = plot.getXAxes()[0], yaxis = plot.getYAxes()[0], initialYmin = yaxis.min, initialYmax = yaxis.max, eventHolder = plot.getEventHolder(), pointCoords = [ { x: xaxis.box.left - 10, y: yaxis.p2c(4) }, { x: yaxis.p2c(3), y: yaxis.p2c(8) } ]; simulate.mouseDown(eventHolder, pointCoords[0].x, pointCoords[0].y); simulate.mouseMove(eventHolder, pointCoords[0].x, pointCoords[0].y); simulate.mouseMove(eventHolder, pointCoords[1].x, pointCoords[1].y); simulate.mouseUp(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)), 0); expect(yaxis.max).toBeCloseTo(yaxis.c2p(yaxis.p2c(initialYmax) + (pointCoords[0].y - pointCoords[1].y)), 0); }); }); describe('click', function(){ it('on plot activates plot\'s zoom and pan active propriety', function() { plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], { zoom: { interactive: true, active: false, amount: 10 }, pan: { interactive: true, active: false} }); var eventHolder = plot.getEventHolder(), pointCoords = { x: 0, y: plot.height() }; simulate.click(eventHolder, pointCoords.x, pointCoords.y); expect(plot.getOptions().pan.active).toBe(true); expect(plot.getOptions().zoom.active).toBe(true); }); }); describe('mouse dblclick', function(){ it('on plot activates plot\'s zoom and pan active propriety', function() { plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], { zoom: { interactive: true, active: false, amount: 10 }, pan: { interactive: true, active: false} }); var eventHolder = plot.getEventHolder(), pointCoords = { x: 0, y: plot.height() }; simulate.dblclick(eventHolder, pointCoords.x, pointCoords.y); expect(plot.getOptions().pan.active).toBe(true); expect(plot.getOptions().zoom.active).toBe(true); }); it('sends touched axis for double click on axis', function(){ plot = $.plot(placeholder, [ [ [-1, 2], [11, 12] ] ], options); var eventHolder = plot.getEventHolder(), xaxis = plot.getXAxes()[0], coords = { x: xaxis.p2c(4), y: xaxis.box.top + 10 }; var spyRecenter = jasmine.createSpy('spy'); $(plot.getPlaceholder()).on('re-center', spyRecenter); simulate.dblclick(eventHolder, coords.x, coords.y); expect(spyRecenter).toHaveBeenCalled(); expect(spyRecenter.calls.all()[0].args[0].detail.axisTouched).toEqual(xaxis); }); }); });