From 11f833b88f3b079047d79e7e61bc2e01fd837073 Mon Sep 17 00:00:00 2001
From: Josh Kelley <joshkel@gmail.com>
Date: Wed, 16 Apr 2025 09:52:00 -0400
Subject: [PATCH] Add support for per-element clip attributes

Fixes #874
---
 src/annotation.js  | 7 +++++++
 src/elements.js    | 6 +++---
 src/types/box.js   | 2 ++
 src/types/label.js | 1 +
 types/label.d.ts   | 3 ++-
 types/options.d.ts | 1 +
 6 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/annotation.js b/src/annotation.js
index c6540203a..a3613d0fb 100644
--- a/src/annotation.js
+++ b/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);
   }
 
diff --git a/src/elements.js b/src/elements.js
index d3dd19e90..c7308ce51 100644
--- a/src/elements.js
+++ b/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);
     }
diff --git a/src/types/box.js b/src/types/box.js
index 42ce4d549..56f665b25 100644
--- a/src/types/box.js
+++ b/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,
diff --git a/src/types/label.js b/src/types/label.js
index f8489878a..753a92233 100644
--- a/src/types/label.js
+++ b/src/types/label.js
@@ -78,6 +78,7 @@ LabelAnnotation.defaults = {
     side: 5,
     start: '50%',
   },
+  clip: undefined,
   color: 'black',
   content: null,
   display: true,
diff --git a/types/label.d.ts b/types/label.d.ts
index 4180e7fee..c8951e8bb 100644
--- a/types/label.d.ts
+++ b/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 {
diff --git a/types/options.d.ts b/types/options.d.ts
index 86e31ca7e..1865efaba 100644
--- a/types/options.d.ts
+++ b/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>,