Fix 1610 (#1611)

* fix: setup native html map per canvas instead of global singleton #1610

* chore: commit changeset

.changeset/late-books-arrive.md

@@ -0,0 +1,6 @@
+---
+'@antv/g-plugin-html-renderer': patch
+'@antv/g-lite': patch
+---
+
+Setup native html map per canvas instead of global singleton.

__tests__/demos/bugfix/1610.ts

@@ -0,0 +1,53 @@
+import { Canvas, Circle, HTML } from '../../../packages/g';
+import { Renderer as CanvasRenderer } from '../../../packages/g-canvas';
+
+export async function html(context) {
+  const { canvas, container } = context;
+  await canvas.ready;
+  canvas.resize(320, 320);
+
+  const $div2 = document.createElement('div');
+  $div2.id = 'div2';
+  container.appendChild($div2);
+  const canvasRenderer2 = new CanvasRenderer();
+  const canvas2 = new Canvas({
+    container: $div2,
+    width: 320,
+    height: 320,
+    renderer: canvasRenderer2,
+  });
+
+  const circle1 = new Circle({
+    style: {
+      cx: 100,
+      cy: 100,
+      r: 50,
+      fill: 'red',
+      cursor: 'pointer',
+    },
+  });
+  canvas.appendChild(circle1);
+  const circle2 = new Circle({
+    style: {
+      cx: 100,
+      cy: 100,
+      r: 50,
+      fill: 'green',
+      cursor: 'pointer',
+    },
+  });
+  canvas2.appendChild(circle2);
+
+  const html = new HTML({
+    id: 'html1',
+    style: {
+      x: 200,
+      y: 100,
+      width: 100,
+      height: 100,
+      innerHTML: 'canvas1',
+      // pointerEvents: 'none',
+    },
+  });
+  canvas.appendChild(html);
+}

__tests__/demos/bugfix/index.ts

@@ -0,0 +1 @@
+export { html } from './1610';

__tests__/main.ts

@@ -12,6 +12,7 @@ import * as animation from './demos/animation';
 import * as d3 from './demos/d3';
 import * as plugin from './demos/plugin';
 import * as hammerjs from './demos/hammerjs';
+import * as bugfix from './demos/bugfix';
 
 const tests = {
   ...createSpecRender(namespace(basic2d, '2d')),
@@ -20,6 +21,7 @@ const tests = {
   ...createSpecRender(namespace(d3, 'd3')),
   ...createSpecRender(namespace(plugin, 'plugin')),
   ...createSpecRender(namespace(hammerjs, 'hammerjs')),
+  ...createSpecRender(namespace(bugfix, 'bugfix')),
 };
 
 const renderers = {
@@ -130,7 +132,7 @@ function createOption(key) {
   const option = document.createElement('option');
   option.value = key;
   option.textContent = key;
-  if (key === (window['DEFAULT_RENDERER'] || 'svg')) {
+  if (key === (window['DEFAULT_RENDERER'] || 'canvas')) {
     option.selected = true;
   }
   return option;
@@ -180,7 +182,7 @@ function createSpecRender(object) {
       // @ts-ignore
       window.__g_instances__ = [canvas];
 
-      await generate({ canvas, renderer });
+      await generate({ canvas, renderer, container: $div });
 
       container.append($div);
     };

packages/g-lite/src/global-runtime.ts

@@ -25,7 +25,6 @@ import {
   CSSPropertyTransformOrigin,
   CSSPropertyZIndex,
 } from './css/properties';
-import type { HTML } from './display-objects';
 import type {
   GeometryAABBUpdater,
   SceneGraphSelector,
@@ -67,7 +66,6 @@ export interface GlobalRuntime {
   >;
   globalThis: any;
   enableCSSParsing: boolean;
-  nativeHTMLMap: WeakMap<HTMLElement, HTML>;
 
   /**
    * Enable using dataset property.
@@ -165,8 +163,6 @@ runtime.EasingFunction = null;
 
 runtime.offscreenCanvasCreator = new OffscreenCanvasCreator();
 
-runtime.nativeHTMLMap = new WeakMap();
-
 runtime.sceneGraphSelector = new DefaultSceneGraphSelector();
 
 runtime.sceneGraphService = new DefaultSceneGraphService(runtime);

packages/g-lite/src/services/EventService.ts

@@ -49,6 +49,11 @@ export class EventService {
 
   private emitter = new EventEmitter();
 
+  /**
+   * Store HTML elements in current canvas.
+   */
+  nativeHTMLMap = new WeakMap<HTMLElement, HTML>();
+
   cursor: Cursor | null = 'default';
 
   private mappingTable: Record<
@@ -735,7 +740,7 @@ export class EventService {
   private getExistedHTML(event: FederatedEvent): HTML {
     if (event.nativeEvent.composedPath) {
       for (const eventTarget of event.nativeEvent.composedPath() as HTMLElement[]) {
-        const existed = this.globalRuntime.nativeHTMLMap.get(eventTarget);
+        const existed = this.nativeHTMLMap.get(eventTarget);
         if (existed) {
           return existed;
         }

packages/g-plugin-html-renderer/src/HTMLRenderingPlugin.ts

@@ -51,6 +51,7 @@ export class HTMLRenderingPlugin implements RenderingPlugin {
     const { camera, renderingContext, renderingService } = context;
     this.context = context;
     const canvas = renderingContext.root.ownerDocument.defaultView;
+    const { nativeHTMLMap } = canvas.context.eventService;
 
     const setTransform = (object: HTML, $el: HTMLElement) => {
       $el.style.transform = this.joinTransformMatrix(
@@ -83,7 +84,7 @@ export class HTMLRenderingPlugin implements RenderingPlugin {
 
         setTransform(object, $el);
 
-        this.context.nativeHTMLMap.set($el, object);
+        nativeHTMLMap.set($el, object);
       }
     };
 
@@ -93,7 +94,7 @@ export class HTMLRenderingPlugin implements RenderingPlugin {
         const $el = this.getOrCreateEl(object);
         if ($el) {
           $el.remove();
-          this.context.nativeHTMLMap.delete($el);
+          nativeHTMLMap.delete($el);
         }
       }
     };

site/examples/canvas/container/demo/dom-canvas.js

@@ -1,4 +1,4 @@
-import { Canvas, CanvasEvent, Circle } from '@antv/g';
+import { Canvas, CanvasEvent, Circle, HTML } from '@antv/g';
 import { Renderer as CanvasRenderer } from '@antv/g-canvas';
 import { Renderer as SVGRenderer } from '@antv/g-svg';
 import { Renderer as WebGLRenderer } from '@antv/g-webgl';
@@ -52,6 +52,20 @@ canvas1.addEventListener(CanvasEvent.READY, () => {
   circle1.addEventListener('mouseleave', () => {
     circle1.attr('fill', '#1890FF');
   });
+
+  canvas1.appendChild(
+    new HTML({
+      id: 'html1',
+      style: {
+        x: 100,
+        y: 100,
+        width: 100,
+        height: 100,
+        innerHTML: 'canvas1',
+        // pointerEvents: 'none',
+      },
+    }),
+  );
 });
 
 canvas2.addEventListener(CanvasEvent.READY, () => {
@@ -74,6 +88,20 @@ canvas2.addEventListener(CanvasEvent.READY, () => {
   circle2.addEventListener('mouseleave', () => {
     circle2.attr('fill', '#1890FF');
   });
+
+  // canvas2.appendChild(
+  //   new HTML({
+  //     id: 'html2',
+  //     style: {
+  //       x: 100,
+  //       y: 100,
+  //       width: 100,
+  //       height: 100,
+  //       innerHTML: 'canvas2',
+  //       pointerEvents: 'none',
+  //     },
+  //   }),
+  // );
 });
 
 // stats