diff --git a/dist/chartjs-plugin-boxselect.js b/dist/chartjs-plugin-boxselect.js index 3a3e714..c78bae9 100644 --- a/dist/chartjs-plugin-boxselect.js +++ b/dist/chartjs-plugin-boxselect.js @@ -1,8 +1,8 @@ (function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('chart.js')) : - typeof define === 'function' && define.amd ? define(['chart.js'], factory) : - (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.boxselectplugin = factory(global.Chart)); -}(this, (function (Chart) { 'use strict'; + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('chart.js/auto'), require('chart.js/helpers')) : + typeof define === 'function' && define.amd ? define(['chart.js/auto', 'chart.js/helpers'], factory) : + (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.boxselectplugin = factory(global.Chart, global.helpers)); +}(this, (function (Chart, helpers) { 'use strict'; function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } @@ -25,7 +25,10 @@ }; function getOption(chart, category, name) { - return Chart__default['default'].helpers.getValueOrDefault(chart.options.plugins.boxselect[category] ? chart.options.plugins.boxselect[category][name] : undefined, defaultOptions[category][name]); + if(category in chart.config.options.plugins.boxselect && name in chart.config.options.plugins.boxselect[category]){ + return chart.config.options.plugins.boxselect[category][name]; + } + return defaultOptions[category][name]; } @@ -40,26 +43,26 @@ function doSelect(chart, startX, endX, startY, endY) { // swap start/end if user dragged from right to left if (startX > endX) { - var tmp = startX; + const tmp = startX; startX = endX; endX = tmp; } if (startY > endY) { - var tmp = startY; + const tmp = startY; startY = endY; endY = tmp; } // notify delegate - var beforeSelectCallback = Chart__default['default'].helpers.getValueOrDefault(chart.options.plugins.boxselect.callbacks ? chart.options.plugins.boxselect.callbacks.beforeSelect : undefined, defaultOptions.callbacks.beforeSelect); - - if (!beforeSelectCallback(startX, endX, startY, endY)) { + var beforeSelectCallback = helpers.valueOrDefault(chart.options.plugins.boxselect.callbacks ? chart.options.plugins.boxselect.callbacks.beforeSelect : undefined, defaultOptions.callbacks.beforeSelect); + + if (!beforeSelectCallback) { return false; } var datasets = []; // filter dataset - for (var datasetIndex = 0; datasetIndex < chart.data.datasets.length; datasetIndex++) { + for (let datasetIndex = 0; datasetIndex < chart.data.datasets.length; datasetIndex++) { const sourceDataset = chart.data.datasets[datasetIndex]; var selectedDataset = { @@ -72,9 +75,9 @@ } // iterate data points - for (var dataIndex = 0; dataIndex < sourceDataset.data.length; dataIndex++) { + for (let dataIndex = 0; dataIndex < sourceDataset.data.length; dataIndex++) { - var dataPoint = sourceDataset.data[dataIndex]; + const dataPoint = sourceDataset.data[dataIndex]; let inX = true; if (startX == null) ; else { inX = (dataPoint.x >= startX && dataPoint.x <= endX); @@ -99,16 +102,15 @@ chart.boxselect.end = endX; // chart.update(); - - var afterSelectCallback = getOption(chart, 'callbacks', 'afterSelect'); + const afterSelectCallback = getOption(chart, 'callbacks', 'afterSelect'); afterSelectCallback(startX, endX, startY, endY, datasets); } function drawSelectbox(chart) { - var borderColor = getOption(chart, 'select', 'selectboxBorderColor'); - var fillColor = getOption(chart, 'select', 'selectboxBackgroundColor'); - var direction = getOption(chart, 'select', 'direction'); + const borderColor = getOption(chart, 'select', 'selectboxBorderColor'); + const fillColor = getOption(chart, 'select', 'selectboxBackgroundColor'); + const direction = getOption(chart, 'select', 'direction'); chart.ctx.beginPath(); // if direction == xy, rectangle @@ -138,16 +140,12 @@ chart.ctx.closePath(); } - var boxselectPlugin = { + const boxselectPlugin = { id: 'boxselect', afterInit: function (chart) { - if (chart.config.options.scales.xAxes.length == 0) { - return - } - if (chart.options.plugins.boxselect === undefined) { chart.options.plugins.boxselect = defaultOptions; } @@ -161,30 +159,25 @@ dragEndX: null, dragStartY: null, dragEndY: null, - suppressTooltips: false, + suppressTooltips: false }; }, afterEvent: function (chart, e) { - var chartType = chart.config.type; + const chartType = chart.config.type; if (chartType !== 'scatter' && chartType !== 'line') return; - - // fix for Safari - var buttons = (e.native.buttons === undefined ? e.native.which : e.native.buttons); - if (e.native.type === 'mouseup') { - buttons = 0; - } - + + const buttons = e.event.native.buttons; chart.boxselect.enabled = true; // handle drag to select - var selectEnabled = getOption(chart, 'select', 'enabled'); + const selectEnabled = getOption(chart, 'select', 'enabled'); if (buttons === 1 && !chart.boxselect.dragStarted && selectEnabled) { - chart.boxselect.dragStartX = e.x; - chart.boxselect.dragStartY = e.y; + chart.boxselect.dragStartX = e.event.x; + chart.boxselect.dragStartY = e.event.y; chart.boxselect.dragStarted = true; } @@ -192,17 +185,17 @@ if (chart.boxselect.dragStarted && buttons === 0) { chart.boxselect.dragStarted = false; - var direction = getOption(chart, 'select', 'direction'); + const direction = getOption(chart, 'select', 'direction'); // if direction == xy, rectangle // if direction == x, horizontal selection only // if direction == y, vertical selection only - var xScale = getXScale(chart); - var yScale = getYScale(chart); - var startX = xScale.getValueForPixel(chart.boxselect.dragStartX); - var endX = xScale.getValueForPixel(chart.boxselect.x); - var startY = yScale.getValueForPixel(chart.boxselect.dragStartY); - var endY = yScale.getValueForPixel(chart.boxselect.y); + const xScale = getXScale(chart); + const yScale = getYScale(chart); + let startX = xScale.getValueForPixel(chart.boxselect.dragStartX); + let endX = xScale.getValueForPixel(chart.boxselect.x); + let startY = yScale.getValueForPixel(chart.boxselect.dragStartY); + let endY = yScale.getValueForPixel(chart.boxselect.y); if (direction == 'x') { startY = null; endY = null; @@ -216,8 +209,8 @@ } } - chart.boxselect.x = e.x; - chart.boxselect.y = e.y; + chart.boxselect.x = e.event.x; + chart.boxselect.y = e.event.y; chart.draw(); }, @@ -242,7 +235,7 @@ }; - Chart__default['default'].plugins.register(boxselectPlugin); + Chart__default['default'].register(boxselectPlugin); return boxselectPlugin; diff --git a/package-lock.json b/package-lock.json index 8e45bd6..e6c3384 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,8 +1,101 @@ { "name": "chartjs-plugin-boxselect", - "version": "1.0.0", - "lockfileVersion": 1, + "version": "1.0.6", + "lockfileVersion": 2, "requires": true, + "packages": { + "": { + "version": "1.0.6", + "license": "MIT", + "dependencies": { + "chart.js": "^2.9.4" + }, + "devDependencies": { + "rollup": "^2.55.1" + } + }, + "node_modules/chart.js": { + "version": "2.9.4", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz", + "integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==", + "dependencies": { + "chartjs-color": "^2.1.0", + "moment": "^2.10.2" + } + }, + "node_modules/chartjs-color": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz", + "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==", + "dependencies": { + "chartjs-color-string": "^0.6.0", + "color-convert": "^1.9.3" + } + }, + "node_modules/chartjs-color-string": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz", + "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==", + "dependencies": { + "color-name": "^1.0.0" + } + }, + "node_modules/color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dependencies": { + "color-name": "1.1.3" + } + }, + "node_modules/color-convert/node_modules/color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" + }, + "node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, + "node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/moment": { + "version": "2.29.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", + "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==", + "engines": { + "node": "*" + } + }, + "node_modules/rollup": { + "version": "2.55.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.55.1.tgz", + "integrity": "sha512-1P9w5fpb6b4qroePh8vHKGIvPNxwoCQhjJpIqfZGHLKpZ0xcU2/XBmFxFbc9697/6bmHpmFTLk5R1dAQhFSo0g==", + "dev": true, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=10.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + } + }, "dependencies": { "chart.js": { "version": "2.9.4", @@ -50,10 +143,26 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, + "fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "optional": true + }, "moment": { "version": "2.29.1", "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==" + }, + "rollup": { + "version": "2.55.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.55.1.tgz", + "integrity": "sha512-1P9w5fpb6b4qroePh8vHKGIvPNxwoCQhjJpIqfZGHLKpZ0xcU2/XBmFxFbc9697/6bmHpmFTLk5R1dAQhFSo0g==", + "dev": true, + "requires": { + "fsevents": "~2.3.2" + } } } } diff --git a/package.json b/package.json index 3a4e6fb..251b087 100644 --- a/package.json +++ b/package.json @@ -28,5 +28,8 @@ "box", "scatter", "line" - ] + ], + "devDependencies": { + "rollup": "^2.55.1" + } } diff --git a/src/main.js b/src/main.js index 74972f6..b8f03d6 100644 --- a/src/main.js +++ b/src/main.js @@ -235,5 +235,5 @@ const boxselectPlugin = { }; -Chart.plugins.register(boxselectPlugin); +Chart.register(boxselectPlugin); export default boxselectPlugin;