Fix 1641 (#1642)

* fix: support shadowRoot #1641 * chore: commit changeset * chore: remove gui from test cases for now
antvis · Mar 18, 2024 · 10397c1 · 10397c1
1 parent 0bb1bbe
commit 10397c1
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 35 deletions.
diff --git a/.changeset/tasty-pigs-call.md b/.changeset/tasty-pigs-call.md
@@ -0,0 +1,6 @@
+---
+'@antv/g-plugin-svg-picker': patch
+'@antv/g-lite': patch
+---
+
+Support shadowRoot when picking.
diff --git a/__tests__/main.ts b/__tests__/main.ts
@@ -1,4 +1,3 @@
-import * as lil from 'lil-gui';
 import { runtime, Canvas, CanvasEvent } from '../packages/g';
 import { Renderer as CanvasRenderer } from '../packages/g-canvas';
 import { Renderer as CanvaskitRenderer } from '../packages/g-canvaskit';
@@ -209,10 +208,10 @@ function createSpecRender(object) {
       window.__g_instances__ = [canvas];
 
       // GUI
-      const gui = new lil.GUI({ autoPlace: false });
-      $div.appendChild(gui.domElement);
+      // const gui = new lil.GUI({ autoPlace: false });
+      // $div.appendChild(gui.domElement);
 
-      await generate({ canvas, renderer, container: $div, gui });
+      await generate({ canvas, renderer, container: $div });
 
       if (
         selectRenderer.value === 'canvas' &&

diff --git a/jest.node.config.js b/jest.node.config.js
@@ -47,4 +47,5 @@ module.exports = {
   globalSetup: './scripts/jest/setup.js',
   globalTeardown: './scripts/jest/teardown.js',
   testEnvironment: './scripts/jest/environment.js',
+  testPathIgnorePatterns: ['<rootDir>/__tests__/main.ts'],
 };
diff --git a/packages/g-lite/src/plugins/EventPlugin.ts b/packages/g-lite/src/plugins/EventPlugin.ts
@@ -94,20 +94,12 @@ export class EventPlugin implements RenderingPlugin {
         const $element =
           this.context.contextService.getDomElement() as HTMLCanvasElement;
 
-        let outside = 'outside';
-        try {
-          outside =
-            $element &&
-            nativeEvent.target &&
-            nativeEvent.target !== $element &&
-            $element.contains &&
-            !$element.contains(nativeEvent.target as Node)
-              ? 'outside'
-              : '';
-        } catch (e) {
-          // nativeEvent.target maybe not Node, such as Window
-          // @see https://github.com/antvis/G/issues/1235
-        }
+        const isNativeEventFromCanvas =
+          this.context.eventService.isNativeEventFromCanvas(
+            $element,
+            nativeEvent,
+          );
+        const outside = !isNativeEventFromCanvas ? 'outside' : '';
         const normalizedEvents = this.normalizeToPointerEvent(
           nativeEvent,
           canvas,

diff --git a/packages/g-lite/src/services/EventService.ts b/packages/g-lite/src/services/EventService.ts
@@ -1,6 +1,6 @@
 import EventEmitter from 'eventemitter3';
 import { mat4, vec3 } from 'gl-matrix';
-import type { CanvasContext, GlobalRuntime } from '..';
+import type { CanvasContext, GlobalRuntime, InteractivePointerEvent } from '..';
 import type { HTML } from '../display-objects';
 import type { FederatedEvent } from '../dom/FederatedEvent';
 import { FederatedMouseEvent } from '../dom/FederatedMouseEvent';
@@ -709,10 +709,16 @@ export class EventService {
    * whether the native event trigger came from Canvas,
    * should account for HTML shape
    */
-  private isNativeEventFromCanvas(event: FederatedEvent) {
-    const $el = this.context.contextService.getDomElement();
-
-    const target = event.nativeEvent?.target;
+  isNativeEventFromCanvas(
+    $el: HTMLCanvasElement,
+    nativeEvent: InteractivePointerEvent,
+  ) {
+    let target = nativeEvent?.target as Element;
+    // Get event target inside a web component.
+    // @see https://stackoverflow.com/questions/57963312/get-event-target-inside-a-web-component
+    if (target?.shadowRoot) {
+      target = nativeEvent.composedPath()[0] as Element;
+    }
 
     if (target) {
       // from <canvas>
@@ -726,8 +732,8 @@ export class EventService {
       }
     }
 
-    if (event.nativeEvent.composedPath) {
-      return event.nativeEvent.composedPath().indexOf($el as EventTarget) > -1;
+    if (nativeEvent?.composedPath) {
+      return nativeEvent.composedPath().indexOf($el as EventTarget) > -1;
     }
 
     // account for Touch
@@ -779,10 +785,13 @@ export class EventService {
     event.originalEvent = from;
 
     const existedHTML = this.getExistedHTML(event);
+    const $el =
+      this.context.contextService.getDomElement() as HTMLCanvasElement;
     event.target =
       target ??
       (existedHTML ||
-        (this.isNativeEventFromCanvas(event) && this.pickTarget(event)) ||
+        (this.isNativeEventFromCanvas($el, event.nativeEvent) &&
+          this.pickTarget(event)) ||
         fallbackTarget);
 
     if (typeof type === 'string') {
@@ -802,9 +811,13 @@ export class EventService {
     event.nativeEvent = from.nativeEvent;
     event.originalEvent = from;
     const existedHTML = this.getExistedHTML(event);
+
+    const $el =
+      this.context.contextService.getDomElement() as HTMLCanvasElement;
     event.target =
       existedHTML ||
-      (this.isNativeEventFromCanvas(event) && this.pickTarget(event));
+      (this.isNativeEventFromCanvas($el, event.nativeEvent) &&
+        this.pickTarget(event));
     return event;
   }
 

diff --git a/packages/g-plugin-svg-picker/src/SVGPickerPlugin.ts b/packages/g-plugin-svg-picker/src/SVGPickerPlugin.ts
@@ -40,7 +40,7 @@ export class SVGPickerPlugin implements RenderingPlugin {
 
   private pick(
     svgElementMap: WeakMap<SVGElement, DisplayObject>,
-    doc: Document,
+    doc: Document | ShadowRoot,
     result: PickingResult,
   ) {
     const {
@@ -55,14 +55,18 @@ export class SVGPickerPlugin implements RenderingPlugin {
         clientX,
         clientY,
       )) {
-        const target = svgElementMap.get(element as SVGElement);
-        // don't need to account for `visibility` since DOM API already does
-        if (target && target.isInteractive()) {
-          targets.push(target);
+        if (element.shadowRoot && element.shadowRoot !== doc) {
+          return this.pick(svgElementMap, element.shadowRoot, result);
+        } else {
+          const target = svgElementMap.get(element as SVGElement);
+          // don't need to account for `visibility` since DOM API already does
+          if (target && target.isInteractive()) {
+            targets.push(target);
 
-          if (topmost) {
-            result.picked = targets;
-            return result;
+            if (topmost) {
+              result.picked = targets;
+              return result;
+            }
           }
         }
       }