Add support for per-element clip attributes

Fixes #874

Author: joshkel

src/annotation.js

@@ -174,6 +174,13 @@ function draw(chart, caller, clip) {
 
   const drawableElements = getDrawableElements(state.visibleElements, caller).sort((a, b) => a.element.options.z - b.element.options.z);
   for (const item of drawableElements) {
+    if (item.element.options.clip && !clip) {
+      clipArea(ctx, chartArea);
+      clip = true;
+    } else if (item.element.options.clip === false && clip) {
+      unclipArea(ctx);
+      clip = false;
+    }
     drawElement(ctx, chartArea, state, item);
   }
 

src/elements.js

@@ -65,9 +65,9 @@ export function updateElements(chart, state, options, mode) {
     }
 
     if (!defined(element.x)) {
-      // If the element is newly created, assing the properties directly - to
-      // make them readily awailable to any scriptable options. If we do not do this,
-      // the properties retruned by `resolveElementProperties` are available only
+      // If the element is newly created, assign the properties directly - to
+      // make them readily available to any scriptable options. If we do not do this,
+      // the properties returned by `resolveElementProperties` are available only
       // after options resolution.
       Object.assign(element, properties);
     }

src/types/box.js

@@ -41,6 +41,7 @@ BoxAnnotation.defaults = {
   borderRadius: 0,
   borderShadowColor: 'transparent',
   borderWidth: 1,
+  clip: undefined,
   display: true,
   init: undefined,
   hitTolerance: 0,
@@ -50,6 +51,7 @@ BoxAnnotation.defaults = {
     callout: {
       display: false
     },
+    clip: undefined,
     color: 'black',
     content: null,
     display: false,

src/types/label.js

@@ -78,6 +78,7 @@ LabelAnnotation.defaults = {
     side: 5,
     start: '50%',
   },
+  clip: undefined,
   color: 'black',
   content: null,
   display: true,

types/label.d.ts

@@ -85,7 +85,8 @@ export interface CoreLabelOptions {
    * Overrides the opacity of the image.
    */
   opacity?: Scriptable<number, PartialEventContext>,
-  z?: Scriptable<number, PartialEventContext>
+  z?: Scriptable<number, PartialEventContext>,
+  clip?: Scriptable<boolean, PartialEventContext>
 }
 
 export interface ContainedLabelOptions extends CoreLabelOptions {

types/options.d.ts

@@ -41,6 +41,7 @@ export interface CoreAnnotationOptions extends AnnotationEvents, ShadowOptions,
   borderDash?: Scriptable<number[], PartialEventContext>,
   borderDashOffset?: Scriptable<number, PartialEventContext>,
   borderWidth?: Scriptable<number, PartialEventContext>,
+  clip?: Scriptable<boolean, PartialEventContext>,
   display?: Scriptable<boolean, PartialEventContext>,
   drawTime?: Scriptable<DrawTime, PartialEventContext>,
   hitTolerance?: Scriptable<number, PartialEventContext>,