Remove clipping for label to box annotation size (#764)

Author: stockiNail

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`

src/annotation.js

@@ -141,37 +141,34 @@ 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) {
     unclipArea(ctx);
   }
 }
 
-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);
         }
       }
     }

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];
   }

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();
   }