feat: support penetrateEventList

VisActor · Dec 23, 2024 · 8b33611 · 8b33611
1 parent 07a3eba
commit 8b33611
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 3 deletions.
diff --git a/common/changes/@visactor/vrender-core/feat-penetrateEventList_2024-12-20-08-24.json b/common/changes/@visactor/vrender-core/feat-penetrateEventList_2024-12-20-08-24.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-core",
+      "comment": "feat: support penetrateEventList",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vrender-core"
+}
diff --git a/packages/vrender-core/src/interface/graphic.ts b/packages/vrender-core/src/interface/graphic.ts
@@ -202,6 +202,9 @@ export interface CommonDomOptions {
   container: string | HTMLElement | null; // id或者dom
   visible?: boolean;
   pointerEvents?: boolean | string;
+  // 可穿透的事件列表
+  // @since 0.21.2
+  penetrateEventList?: string[];
   anchorType?: 'position' | 'boundsLeftTop' | BoundsAnchorType;
 }
 

diff --git a/packages/vrender-core/src/plugins/builtin-plugin/html-attribute-plugin.ts b/packages/vrender-core/src/plugins/builtin-plugin/html-attribute-plugin.ts
@@ -118,19 +118,41 @@ export class HtmlAttributePlugin implements IPlugin {
     };
   }
 
+  onWheel = (ev: Event) => {
+    try {
+      const newEvent = new (ev as any).constructor(ev.type, ev);
+      const canvas = this.pluginService.stage.window.getContext().getCanvas().nativeCanvas;
+      canvas.dispatchEvent(newEvent);
+    } catch (err) {
+      return;
+      // console.log(err);
+    }
+  };
+
   updateStyleOfWrapContainer(
     graphic: IGraphic,
     stage: IStage,
     wrapContainer: HTMLElement,
     nativeContainer: HTMLElement,
     options: SimpleDomStyleOptions & CommonDomOptions
   ) {
-    const { pointerEvents } = options;
+    const { pointerEvents, penetrateEventList = [] } = options;
     let calculateStyle = this.parseDefaultStyleFromGraphic(graphic);
 
     calculateStyle.display = graphic.attribute.visible !== false ? 'block' : 'none';
     // 事件穿透
     calculateStyle.pointerEvents = pointerEvents === true ? 'all' : pointerEvents ? pointerEvents : 'none';
+    if (calculateStyle.pointerEvents !== 'none') {
+      // 删除所有的事件
+      this.removeWrapContainerEventListener(wrapContainer);
+      // 监听所有的事件
+      penetrateEventList.forEach(event => {
+        if (event === 'wheel') {
+          wrapContainer.addEventListener('wheel', this.onWheel);
+        }
+      });
+    }
+
     // 定位wrapGroup
     if (!wrapContainer.style.position) {
       wrapContainer.style.position = 'absolute';
@@ -246,12 +268,17 @@ export class HtmlAttributePlugin implements IPlugin {
     }
 
     const { wrapContainer } = this.htmlMap[id];
-
-    wrapContainer && application.global.removeDom(wrapContainer);
+    if (wrapContainer) {
+      application.global.removeDom(wrapContainer);
+    }
 
     this.htmlMap[id] = null;
   }
 
+  removeWrapContainerEventListener(wrapContainer: HTMLElement) {
+    wrapContainer.removeEventListener('wheel', this.onWheel);
+  }
+
   renderGraphicHTML(graphic: IGraphic) {
     const { html } = graphic.attribute;
     if (!html) {