feat: add Elemenet#ignoreClip

ecomfe · Sep 29, 2020 · e78d62c · e78d62c
1 parent af3e472
commit e78d62c
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 12 deletions.
diff --git a/src/Element.ts b/src/Element.ts
@@ -156,9 +156,6 @@ export interface ElementTextConfig {
      * In case position is not using builtin `inside` hints.
      */
     inside?: boolean
-
-    // TODO applyClip
-    // TODO align, verticalAlign??
 }
 export interface ElementTextGuideLineConfig {
     /**
@@ -231,6 +228,8 @@ export interface ElementProps extends Partial<ElementEventHandlerProps> {
     draggable?: boolean
 
     silent?: boolean
+
+    ignoreClip?: boolean
     // From transform
     x?: number
     y?: number
@@ -331,6 +330,14 @@ class Element<Props extends ElementProps = ElementProps> {
 
     animators: Animator<any>[] = []
 
+    /**
+     * If ignore clip from it's parent or hosts.
+     * Applied on itself and all it's children.
+     *
+     * NOTE: It won't affect the clipPath set on the children.
+     */
+    ignoreClip: boolean
+
     /**
      * If element is used as a component of other element.
      */
@@ -1581,6 +1588,7 @@ class Element<Props extends ElementProps = ElementProps> {
         elProto.isGroup = false;
         elProto.draggable = false;
         elProto.dragging = false;
+        elProto.ignoreClip = false;
         elProto.__inHover = false;
         elProto.__dirty = Element.REDARAW_BIT;
 

diff --git a/src/Handler.ts b/src/Handler.ts
@@ -437,16 +437,23 @@ function isHover(displayable: Displayable, x: number, y: number) {
     if (displayable[displayable.rectHover ? 'rectContain' : 'contain'](x, y)) {
         let el: Element = displayable;
         let isSilent;
+        let ignoreClip = false;
         while (el) {
-            let clipPath = el.getClipPath();
-            // If clipped by ancestor.
-            // FIXME: If clipPath has neither stroke nor fill,
-            // el.clipPath.contain(x, y) will always return false.
-            if (clipPath && !clipPath.contain(x, y)) {
-                return false;
+            // Ignore clip on any ancestors.
+            if (el.ignoreClip) {
+                ignoreClip = true;
             }
-            if (el.silent) {
-                isSilent = true;
+            if (!ignoreClip) {
+                let clipPath = el.getClipPath();
+                // If clipped by ancestor.
+                // FIXME: If clipPath has neither stroke nor fill,
+                // el.clipPath.contain(x, y) will always return false.
+                if (clipPath && !clipPath.contain(x, y)) {
+                    return false;
+                }
+                if (el.silent) {
+                    isSilent = true;
+                }
             }
             // Consider when el is textContent, also need to be silent
             // if any of its host el and its ancestors is silent.

diff --git a/src/Storage.ts b/src/Storage.ts
@@ -100,7 +100,11 @@ export default class Storage {
         el.afterUpdate();
 
         const userSetClipPath = el.getClipPath();
-        if (userSetClipPath) {
+
+        if (el.ignoreClip) {
+            clipPaths = null;
+        }
+        else if (userSetClipPath) {
 
             // FIXME 效率影响
             if (clipPaths) {