From 6505bd2875bf72aabe84b0be3a0a343a1812a191 Mon Sep 17 00:00:00 2001 From: stockiNail Date: Mon, 9 May 2022 13:40:47 +0200 Subject: [PATCH 1/3] Callout position calculated when label is drawn --- src/types/label.js | 9 ++++----- test/fixtures/line/labelShadowColors.js | 1 + 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/types/label.js b/src/types/label.js index 240ad30b4..cc7d66387 100644 --- a/src/types/label.js +++ b/src/types/label.js @@ -46,13 +46,11 @@ export default class LabelAnnotation extends Element { const padding = toPadding(options.padding); const labelSize = measureLabelSize(chart.ctx, options); const boxSize = measureRect(point, labelSize, options, padding); - const properties = { + return { pointX: point.x, pointY: point.y, ...boxSize }; - properties.calloutPosition = options.callout.display && resolveCalloutPosition(properties, options.callout, options.rotation); - return properties; } } @@ -143,11 +141,12 @@ function calculatePosition(start, size, adjust = 0, position) { } function drawCallout(ctx, element) { - const {pointX, pointY, calloutPosition, options} = element; + const {pointX, pointY, options} = element; + const callout = options.callout; + const calloutPosition = callout && callout.display && resolveCalloutPosition(element, callout, options.rotation); if (!calloutPosition || element.inRange(pointX, pointY)) { return; } - const callout = options.callout; ctx.save(); ctx.beginPath(); diff --git a/test/fixtures/line/labelShadowColors.js b/test/fixtures/line/labelShadowColors.js index ed06cf1fb..11d68d6e0 100644 --- a/test/fixtures/line/labelShadowColors.js +++ b/test/fixtures/line/labelShadowColors.js @@ -1,4 +1,5 @@ module.exports = { + tolerance: 0.0015, config: { type: 'scatter', options: { From 661494701da092f3af3c11d0941983f06e1d583a Mon Sep 17 00:00:00 2001 From: stockiNail Date: Mon, 9 May 2022 14:26:03 +0200 Subject: [PATCH 2/3] adds sample to doc --- docs/.vuepress/config.js | 8 +- docs/samples/interaction/dragging.md | 195 ++++++++++++++++++ docs/samples/{ => interaction}/interaction.md | 0 3 files changed, 202 insertions(+), 1 deletion(-) create mode 100644 docs/samples/interaction/dragging.md rename docs/samples/{ => interaction}/interaction.md (100%) diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index bfee2d581..6ab53be47 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -173,7 +173,13 @@ module.exports = { 'charts/line', ], }, - 'interaction', + { + title: 'Interaction', + children: [ + 'interaction/interaction', + 'interaction/dragging', + ], + }, 'utils', ] } diff --git a/docs/samples/interaction/dragging.md b/docs/samples/interaction/dragging.md new file mode 100644 index 000000000..5c5ce9eb9 --- /dev/null +++ b/docs/samples/interaction/dragging.md @@ -0,0 +1,195 @@ +# Dragging annotations + +```js chart-editor +// +Utils.srand(8); + +const data = { + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [{ + type: 'line', + label: 'Dataset 1', + borderColor: 'rgb(54, 162, 235)', + borderWidth: 2, + fill: false, + data: Utils.numbers({count: 7, min: 0, max: 100}), + }] +}; +// + +// +const annotation1 = { + type: 'box', + backgroundColor: 'rgba(165, 214, 167, 0.2)', + borderColor: 'rgb(165, 214, 167)', + borderWidth: 2, + label: { + display: true, + content: ['Box annotation', 'to drag'], + textAlign: 'center' + }, + xMax: 'May', + xMin: 'April', + xScaleID: 'x', + yMax: 75, + yMin: 25, + yScaleID: 'y' +}; +// + +// +const annotation2 = { + type: 'label', + backgroundColor: 'rgba(255, 99, 132, 0.25)', + borderWidth: 3, + borderColor: 'black', + content: ['Label annotation', 'to drag'], + callout: { + display: true, + borderColor: 'black', + }, + xValue: 1, + yValue: 40 +}; +// + +// +const annotation3 = { + type: 'point', + backgroundColor: 'rgba(0, 255, 255, 0.4)', + borderWidth: 2, + borderColor: 'black', + radius: 20, + xValue: 'March', + yValue: 50 +}; +// + +// +const annotation4 = { + type: 'polygon', + backgroundColor: 'rgba(150, 0, 0, 0.25)', + borderWidth: 2, + borderColor: 'black', + radius: 50, + sides: 6, + xValue: 'June', + yValue: 20 +}; +// + +// +let element; +let lastEvent; + +const drag = function(moveX, moveY) { + element.x += moveX; + element.y += moveY; + element.x2 += moveX; + element.y2 += moveY; + element.centerX += moveX; + element.centerY += moveY; + if (element.elements && element.elements.length) { + for (const subEl of element.elements) { + subEl.x += moveX; + subEl.y += moveY; + subEl.x2 += moveX; + subEl.y2 += moveY; + subEl.centerX += moveX; + subEl.centerY += moveY; + subEl.bX += moveX; + subEl.bY += moveY; + } + } +}; + +const handleElementDragging = function(event) { + if (!lastEvent || !element) { + return; + } + const moveX = event.x - lastEvent.x; + const moveY = event.y - lastEvent.y; + drag(moveX, moveY); + lastEvent = event; + return true; +}; + +const handleDrag = function(event) { + if (element) { + switch (event.type) { + case 'mousemove': + return handleElementDragging(event); + case 'mouseout': + case 'mouseup': + lastEvent = undefined; + break; + case 'mousedown': + lastEvent = event; + break; + default: + } + } +}; +// + +// +const dragger = { + id: 'dragger', + beforeEvent(chart, args, options) { + if (handleDrag(args.event)) { + args.changed = true; + return; + } + } +}; +// + +/* */ +const config = { + type: 'line', + plugins: [dragger], + data, + options: { + events: ['mousedown', 'mouseup', 'mousemove', 'mouseout'], + scales: { + y: { + beginAtZero: true, + min: 0, + max: 100 + } + }, + plugins: { + annotation: { + enter(ctx) { + element = ctx.element; + }, + leave() { + element = undefined; + lastEvent = undefined; + }, + annotations: { + annotation1, + annotation2, + annotation3, + annotation4 + } + } + } + } +}; +/* */ + +const actions = [ + { + name: 'Reset dragging', + handler: function(chart) { + chart.update(); + } + } +]; + +module.exports = { + actions: actions, + config: config, +}; +``` diff --git a/docs/samples/interaction.md b/docs/samples/interaction/interaction.md similarity index 100% rename from docs/samples/interaction.md rename to docs/samples/interaction/interaction.md From 3844edbc050802679f4470034774776f3797a1e4 Mon Sep 17 00:00:00 2001 From: stockiNail Date: Fri, 13 May 2022 12:36:41 +0200 Subject: [PATCH 3/3] removes tolerance --- test/fixtures/line/labelShadowColors.js | 1 - 1 file changed, 1 deletion(-) diff --git a/test/fixtures/line/labelShadowColors.js b/test/fixtures/line/labelShadowColors.js index 11d68d6e0..ed06cf1fb 100644 --- a/test/fixtures/line/labelShadowColors.js +++ b/test/fixtures/line/labelShadowColors.js @@ -1,5 +1,4 @@ module.exports = { - tolerance: 0.0015, config: { type: 'scatter', options: {