diff --git a/docs/guide/migrationV2.md b/docs/guide/migrationV2.md index 37471a52b..0d3f4d207 100644 --- a/docs/guide/migrationV2.md +++ b/docs/guide/migrationV2.md @@ -48,6 +48,8 @@ leave: function({element}) { }, ``` +`chartjs-plugin-annotation` plugin version 2 removes the clipping of the label to the box annotation size. + `chartjs-plugin-annotation` plugin version 2 hides the following methods in the `line` annotation element because they should be used only internally: * `intersects` diff --git a/src/annotation.js b/src/annotation.js index 070b3f044..5d87f09d1 100644 --- a/src/annotation.js +++ b/src/annotation.js @@ -141,19 +141,17 @@ export default { }; function draw(chart, caller, clip) { - const {ctx, canvas, chartArea} = chart; + const {ctx, chartArea} = chart; const {visibleElements} = chartStates.get(chart); - let area = {left: 0, top: 0, width: canvas.width, height: canvas.height}; if (clip) { clipArea(ctx, chartArea); - area = chartArea; } - const drawableElements = getDrawableElements(visibleElements, caller, area).sort((a, b) => a.element.options.z - b.element.options.z); + const drawableElements = getDrawableElements(visibleElements, caller).sort((a, b) => a.options.z - b.options.z); - for (const item of drawableElements) { - item.element.draw(chart.ctx, item.area); + for (const element of drawableElements) { + element.draw(chart.ctx, chartArea); } if (clip) { @@ -161,17 +159,16 @@ function draw(chart, caller, clip) { } } -function getDrawableElements(elements, caller, area) { +function getDrawableElements(elements, caller) { const drawableElements = []; for (const el of elements) { if (el.options.drawTime === caller) { - drawableElements.push({element: el, area}); + drawableElements.push(el); } if (el.elements && el.elements.length) { - const box = 'getBoundingBox' in el ? el.getBoundingBox() : area; for (const sub of el.elements) { if (sub.options.display && sub.options.drawTime === caller) { - drawableElements.push({element: sub, area: box}); + drawableElements.push(sub); } } } diff --git a/src/types/box.js b/src/types/box.js index 32a726e74..20a398bb8 100644 --- a/src/types/box.js +++ b/src/types/box.js @@ -20,20 +20,6 @@ export default class BoxAnnotation extends Element { ctx.restore(); } - getBoundingBox() { - const {x, y, width, height} = this.getProps(['x', 'y', 'width', 'height']); - const label = this.options.label; - const padding = toPadding(label.padding); - const borderWidth = this.options.borderWidth; - const halfBorder = borderWidth / 2; - return { - left: x + halfBorder + padding.left, - top: y + halfBorder + padding.top, - width: width - borderWidth - padding.width, - height: height - borderWidth - padding.height - }; - } - get label() { return this.elements && this.elements[0]; } diff --git a/src/types/label.js b/src/types/label.js index 169f43d2e..781fd6911 100644 --- a/src/types/label.js +++ b/src/types/label.js @@ -15,7 +15,7 @@ export default class LabelAnnotation extends Element { return getElementCenterPoint(this, useFinalPosition); } - draw(ctx, area) { + draw(ctx) { const options = this.options; if (!options.display || !options.content) { return; @@ -24,12 +24,6 @@ export default class LabelAnnotation extends Element { translate(ctx, this.getCenterPoint(), this.rotation); drawCallout(ctx, this); drawBox(ctx, this, options); - if (area) { - // clip - ctx.beginPath(); - ctx.rect(area.left, area.top, area.width, area.height); - ctx.clip(); - } drawLabel(ctx, getLabelSize(this), options); ctx.restore(); } diff --git a/test/fixtures/box/labelMultiline.png b/test/fixtures/box/labelMultiline.png index beeb3f8c9..1cf4c8ffa 100644 Binary files a/test/fixtures/box/labelMultiline.png and b/test/fixtures/box/labelMultiline.png differ diff --git a/test/fixtures/box/labelPadding.png b/test/fixtures/box/labelPadding.png index b7bb450f2..3087884b8 100644 Binary files a/test/fixtures/box/labelPadding.png and b/test/fixtures/box/labelPadding.png differ