From d0880450e8c1bbe831661d613fbcede1f5177648 Mon Sep 17 00:00:00 2001 From: stockiNail Date: Thu, 13 Oct 2022 08:48:13 +0200 Subject: [PATCH 1/5] Add drawTime option to zoom drag configuration --- package.json | 1 + src/plugin.js | 57 +++++++++++++++++++++++++------------ test/specs/defaults.spec.js | 1 + 3 files changed, 41 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index 3262a864..2da03b14 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "scripts": { "build": "rollup -c", "dev": "karma start --auto-watch --no-single-run --browsers chrome", + "dev:ff": "karma start --auto-watch --no-single-run --browsers firefox", "docs": "npm run build && vuepress build docs --no-cache", "docs:dev": "npm run build && vuepress dev docs --no-cache", "lint-js": "eslint \"samples/**/*.html\" \"test/**/*.js\" \"src/**/*.js\"", diff --git a/src/plugin.js b/src/plugin.js index 786a13d6..f10c4cde 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -6,6 +6,33 @@ import {panFunctions, zoomFunctions, zoomRectFunctions} from './scale.types'; import {getState, removeState} from './state'; import {version} from '../package.json'; +function draw(chart, caller, options) { + const dragOptions = options.zoom.drag; + if (dragOptions.drawTime !== caller) { + return; + } + + const {dragStart, dragEnd} = getState(chart); + + if (dragEnd) { + const {left, top, width, height} = computeDragRect(chart, options.zoom.mode, dragStart, dragEnd); + + const ctx = chart.ctx; + + ctx.save(); + ctx.beginPath(); + ctx.fillStyle = dragOptions.backgroundColor || 'rgba(225,225,225,0.3)'; + ctx.fillRect(left, top, width, height); + + if (dragOptions.borderWidth > 0) { + ctx.lineWidth = dragOptions.borderWidth; + ctx.strokeStyle = dragOptions.borderColor || 'rgba(225,225,225)'; + ctx.strokeRect(left, top, width, height); + } + ctx.restore(); + } +} + export default { id: 'zoom', @@ -26,6 +53,7 @@ export default { }, drag: { enabled: false, + drawTime: 'beforeDatasetsDraw', modifierKey: null }, pinch: { @@ -75,27 +103,20 @@ export default { addListeners(chart, options); }, - beforeDatasetsDraw: function(chart, args, options) { - const {dragStart, dragEnd} = getState(chart); - - if (dragEnd) { - const {left, top, width, height} = computeDragRect(chart, options.zoom.mode, dragStart, dragEnd); + beforeDatasetsDraw(chart, _args, options) { + draw(chart, 'beforeDatasetsDraw', options); + }, - const dragOptions = options.zoom.drag; - const ctx = chart.ctx; + afterDatasetsDraw(chart, _args, options) { + draw(chart, 'afterDatasetsDraw', options); + }, - ctx.save(); - ctx.beginPath(); - ctx.fillStyle = dragOptions.backgroundColor || 'rgba(225,225,225,0.3)'; - ctx.fillRect(left, top, width, height); + beforeDraw(chart, _args, options) { + draw(chart, 'beforeDraw', options); + }, - if (dragOptions.borderWidth > 0) { - ctx.lineWidth = dragOptions.borderWidth; - ctx.strokeStyle = dragOptions.borderColor || 'rgba(225,225,225)'; - ctx.strokeRect(left, top, width, height); - } - ctx.restore(); - } + afterDraw(chart, _args, options) { + draw(chart, 'afterDraw', options); }, stop: function(chart) { diff --git a/test/specs/defaults.spec.js b/test/specs/defaults.spec.js index 5e016a32..b82009fe 100644 --- a/test/specs/defaults.spec.js +++ b/test/specs/defaults.spec.js @@ -14,6 +14,7 @@ describe('defaults', function() { }, drag: { enabled: false, + drawTime: 'beforeDatasetsDraw', modifierKey: null }, pinch: { From 04ee6623890ce9c606f69eb97c44f3e62ab0c4c0 Mon Sep 17 00:00:00 2001 From: stockiNail Date: Thu, 13 Oct 2022 09:13:19 +0200 Subject: [PATCH 2/5] adds tests --- test/fixtures/zoom/dragDrawTime.js | 55 ++++++++++++++++++++++++++++ test/fixtures/zoom/dragDrawTime.png | Bin 0 -> 22595 bytes 2 files changed, 55 insertions(+) create mode 100644 test/fixtures/zoom/dragDrawTime.js create mode 100644 test/fixtures/zoom/dragDrawTime.png diff --git a/test/fixtures/zoom/dragDrawTime.js b/test/fixtures/zoom/dragDrawTime.js new file mode 100644 index 00000000..56d011e9 --- /dev/null +++ b/test/fixtures/zoom/dragDrawTime.js @@ -0,0 +1,55 @@ +const data = []; +for (let i = 0; i < 100; i++) { + data.push({x: i, y: Math.sin(i / 25 * Math.PI) * 10}); +} + +module.exports = { + tolerance: 0.004, + config: { + type: 'line', + data: { + datasets: [{ + data, + borderColor: 'red' + }] + }, + options: { + scales: { + x: {type: 'linear', display: false}, + y: {display: false} + }, + plugins: { + legend: false, + zoom: { + zoom: { + drag: { + enabled: true, + backgroundColor: 'yellow', + borderColor: 'black', + borderWidth: 1, + drawTime: 'afterDraw' + }, + } + } + }, + layout: { + padding: 2 + } + } + }, + options: { + run(chart) { + const scaleX = chart.scales.x; + const scaleY = chart.scales.y; + jasmine.triggerMouseEvent(chart, 'mousedown', { + x: scaleX.getPixelForValue(5), + y: scaleY.getPixelForValue(10) + }); + jasmine.triggerMouseEvent(chart, 'mousemove', { + x: scaleX.getPixelForValue(60), + y: scaleY.getPixelForValue(0) + }); + chart.render = function() { }; + } + } +}; diff --git a/test/fixtures/zoom/dragDrawTime.png b/test/fixtures/zoom/dragDrawTime.png new file mode 100644 index 0000000000000000000000000000000000000000..508c32e781e8be2a54f55c414faf5f8f053c5567 GIT binary patch literal 22595 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 literal 0 HcmV?d00001 From 4074fc9e2c49a38ffb63eb7bc08bde1d6415f518 Mon Sep 17 00:00:00 2001 From: stockiNail Date: Thu, 13 Oct 2022 09:20:44 +0200 Subject: [PATCH 3/5] adds type definitions --- types/options.d.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/types/options.d.ts b/types/options.d.ts index 6b1f2eb7..6f6ad051 100644 --- a/types/options.d.ts +++ b/types/options.d.ts @@ -3,6 +3,7 @@ import { Chart, Color, Point } from 'chart.js'; type Mode = 'x' | 'y' | 'xy'; type Key = 'ctrl' | 'alt' | 'shift' | 'meta'; +type DrawTime = 'afterDraw' | 'afterDatasetsDraw' | 'beforeDraw' | 'beforeDatasetsDraw'; export interface WheelOptions { /** @@ -52,6 +53,11 @@ export interface DragOptions { * Modifier key required for drag-to-zoom */ modifierKey?: Key; + + /** + * Draw time required for drag-to-zoom + */ + drawTime?: DrawTime; } export interface PinchOptions { From bd25a62f74fc21311232ae043d21458c04f0fa16 Mon Sep 17 00:00:00 2001 From: stockiNail Date: Thu, 13 Oct 2022 09:23:53 +0200 Subject: [PATCH 4/5] fixes CC --- src/plugin.js | 36 ++++++++++++++++-------------------- 1 file changed, 16 insertions(+), 20 deletions(-) diff --git a/src/plugin.js b/src/plugin.js index f10c4cde..0774f207 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -8,29 +8,25 @@ import {version} from '../package.json'; function draw(chart, caller, options) { const dragOptions = options.zoom.drag; - if (dragOptions.drawTime !== caller) { - return; - } - const {dragStart, dragEnd} = getState(chart); - if (dragEnd) { - const {left, top, width, height} = computeDragRect(chart, options.zoom.mode, dragStart, dragEnd); - - const ctx = chart.ctx; - - ctx.save(); - ctx.beginPath(); - ctx.fillStyle = dragOptions.backgroundColor || 'rgba(225,225,225,0.3)'; - ctx.fillRect(left, top, width, height); - - if (dragOptions.borderWidth > 0) { - ctx.lineWidth = dragOptions.borderWidth; - ctx.strokeStyle = dragOptions.borderColor || 'rgba(225,225,225)'; - ctx.strokeRect(left, top, width, height); - } - ctx.restore(); + if (dragOptions.drawTime !== caller || !dragEnd) { + return; + } + const {left, top, width, height} = computeDragRect(chart, options.zoom.mode, dragStart, dragEnd); + const ctx = chart.ctx; + + ctx.save(); + ctx.beginPath(); + ctx.fillStyle = dragOptions.backgroundColor || 'rgba(225,225,225,0.3)'; + ctx.fillRect(left, top, width, height); + + if (dragOptions.borderWidth > 0) { + ctx.lineWidth = dragOptions.borderWidth; + ctx.strokeStyle = dragOptions.borderColor || 'rgba(225,225,225)'; + ctx.strokeRect(left, top, width, height); } + ctx.restore(); } export default { From 3a28173b743833b459c180aaf1ef4c3d2bd6bc41 Mon Sep 17 00:00:00 2001 From: stockiNail Date: Thu, 13 Oct 2022 09:56:30 +0200 Subject: [PATCH 5/5] adds documentation --- docs/guide/options.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/docs/guide/options.md b/docs/guide/options.md index 2eedf5c6..a1a095ae 100644 --- a/docs/guide/options.md +++ b/docs/guide/options.md @@ -77,9 +77,22 @@ const chart = new Chart('id', { | `backgroundColor` | `Color` | `'rgba(225,225,225,0.3)'` | Fill color | `borderColor` | `Color` | `'rgba(225,225,225)'` | Stroke color | `borderWidth` | `number` | `0` | Stroke width +| [`drawTime`](#draw-time) | `string` | `beforeDatasetsDraw` | When the dragging box is dran on the chart | `threshold` | `number` | `0` | Minimal zoom distance required before actually applying zoom | `modifierKey` | `'ctrl'`\|`'alt'`\|`'shift'`\|`'meta'` | `null` | Modifier key required for drag-to-zoom + +## Draw Time + +The `drawTime` option for zooming determines where in the chart lifecycle the drag box drawing occurs. Four potential options are available: + +| Option | Notes +| ---- | ---- +| `'beforeDraw'` | Occurs before any drawing takes place +| `'beforeDatasetsDraw'` | Occurs after drawing of axes, but before datasets +| `'afterDatasetsDraw'` | Occurs after drawing of datasets but before items such as the tooltip +| `'afterDraw'` | After other drawing is completed + #### Pinch options | Name | Type | Default | Description