refactor: reduce global redundant code (#1872)

* refactor: reduce global redundant code

* chore: add changeset

.changeset/honest-keys-train.md

@@ -0,0 +1,15 @@
+---
+'@antv/g-plugin-device-renderer': patch
+'@antv/g-plugin-image-loader': patch
+'@antv/g-plugin-svg-renderer': patch
+'@antv/g-image-exporter': patch
+'@antv/g-mobile-svg': patch
+'@antv/g-canvaskit': patch
+'@antv/g-canvas': patch
+'@antv/g-webgpu': patch
+'@antv/g-webgl': patch
+'@antv/g-lite': patch
+'@antv/g-svg': patch
+---
+
+refactor: reduce global redundant code

__tests__/demos/bugfix/1677.ts

@@ -23,7 +23,6 @@ export async function shadowroot_offset(context) {
         width: 500,
         height: 500,
         renderer: new Renderer(),
-        supportsCSSTransform: true,
       });
 
       const circle = new Circle({

__tests__/demos/event/dblClick.ts

@@ -1,11 +1,11 @@
-import { Circle, Text } from '@antv/g';
+import { Circle, Text, Canvas } from '@antv/g';
 
-export async function dblClick(context) {
+export async function dblClick(context: { canvas: Canvas }) {
   const { canvas } = context;
   await canvas.ready;
 
   let DELAY = 200;
-  canvas.dblClickSpeed = DELAY;
+  canvas.getConfig().dblClickSpeed = DELAY;
 
   const circle0 = new Circle({
     style: {
@@ -43,7 +43,7 @@ export async function dblClick(context) {
 
   circle0.addEventListener('mouseenter', () => {
     DELAY = 200;
-    canvas.dblClickSpeed = DELAY;
+    canvas.getConfig().dblClickSpeed = DELAY;
 
     text0.attr({ text: `current dblclick delay: ${DELAY}ms` });
     text1.attr({
@@ -52,7 +52,7 @@ export async function dblClick(context) {
   });
   circle1.addEventListener('mouseenter', () => {
     DELAY = 500;
-    canvas.dblClickSpeed = DELAY;
+    canvas.getConfig().dblClickSpeed = DELAY;
 
     text0.attr({ text: `current dblclick delay: ${DELAY}ms` });
     text1.attr({
@@ -61,7 +61,7 @@ export async function dblClick(context) {
   });
   circle2.addEventListener('mouseenter', () => {
     DELAY = 1000;
-    canvas.dblClickSpeed = DELAY;
+    canvas.getConfig().dblClickSpeed = DELAY;
 
     text0.attr({ text: `current dblclick delay: ${DELAY}ms` });
     text1.attr({

__tests__/demos/perf/event.ts

@@ -0,0 +1,93 @@
+import {
+  Canvas,
+  ElementEvent,
+  Rect,
+  Group,
+  CustomEvent,
+  EventTarget,
+} from '@antv/g';
+import * as tinybench from 'tinybench';
+
+export async function event(context: { canvas: Canvas }) {
+  const { canvas } = context;
+  console.log(canvas);
+
+  await canvas.ready;
+
+  const { width, height } = canvas.getConfig();
+  const root = new Group();
+  let count = 2e4;
+  let rects = [];
+  let eventTargets = [];
+
+  function render() {
+    root.destroyChildren();
+    rects = [];
+
+    for (let i = 0; i < count; i++) {
+      const x = Math.random() * width;
+      const y = Math.random() * height;
+      const size = 10 + Math.random() * 40;
+      const speed = 1 + Math.random();
+
+      const rect = new Rect({
+        style: {
+          x,
+          y,
+          width: size,
+          height: size,
+          fill: 'white',
+          stroke: '#000',
+          lineWidth: 1,
+        },
+      });
+      root.appendChild(rect);
+      rects[i] = { x, y, size, speed, el: rect };
+
+      // ---
+      const eventTarge = new EventTarget();
+      eventTargets.push(eventTarge);
+      eventTarge.addEventListener(ElementEvent.BOUNDS_CHANGED, () => {
+        //
+      });
+    }
+  }
+
+  render();
+  canvas.appendChild(root);
+
+  // benchmark
+  // ----------
+  const boundsChangedEvent = new CustomEvent(ElementEvent.BOUNDS_CHANGED);
+  boundsChangedEvent.detail = { affectChildren: true };
+
+  const bench = new tinybench.Bench({ name: 'event benchmark', time: 1e2 });
+
+  bench.add('Iterating trigger events', async () => {
+    root.forEach((el) => {
+      el.dispatchEvent(boundsChangedEvent);
+    });
+  });
+  bench.add('Iterating trigger events without propagate', async () => {
+    root.forEach((el) => {
+      el.dispatchEvent(boundsChangedEvent, true);
+    });
+  });
+  bench.add('Iterating over trigger events on empty objects', async () => {
+    eventTargets.forEach((el) => {
+      el.dispatchEvent(boundsChangedEvent);
+    });
+  });
+  bench.add('Batch triggering events', async () => {
+    canvas.dispatchEvent(boundsChangedEvent, true);
+  });
+
+  await bench.run();
+
+  console.log(bench.name);
+  console.table(bench.table());
+  console.log(bench.results);
+  console.log(bench.tasks);
+
+  // ----------
+}

packages/g-canvas/src/Canvas2DContextService.ts

@@ -7,7 +7,7 @@ import type {
   CanvasConfig,
   ContextService,
 } from '@antv/g-lite';
-import { RenderReason, isBrowser, setDOMSize } from '@antv/g-lite';
+import { RenderReason, setDOMSize } from '@antv/g-lite';
 import { isString } from '@antv/util';
 
 export class Canvas2DContextService
@@ -92,11 +92,7 @@ export class Canvas2DContextService
   }
 
   resize(width: number, height: number) {
-    const { devicePixelRatio } = this.canvasConfig;
-
-    // use user-defined dpr first
-    let dpr = devicePixelRatio || (isBrowser && window.devicePixelRatio) || 1;
-    dpr = dpr >= 1 ? Math.ceil(dpr) : 1;
+    const { devicePixelRatio: dpr } = this.canvasConfig;
     this.dpr = dpr;
 
     if (this.$canvas) {

packages/g-canvaskit/src/CanvasKitContextService.ts

@@ -6,7 +6,7 @@ import type {
   CanvasConfig,
   ContextService,
 } from '@antv/g-lite';
-import { isBrowser, setDOMSize } from '@antv/g-lite';
+import { setDOMSize } from '@antv/g-lite';
 import type * as CanvaskitRenderer from '@antv/g-plugin-canvaskit-renderer';
 import type { CanvasKitContext } from '@antv/g-plugin-canvaskit-renderer';
 import { isString } from '@antv/util';
@@ -40,7 +40,7 @@ export class CanvasKitContextService
   }
 
   async initAsync() {
-    const { container, canvas, devicePixelRatio } = this.canvasConfig;
+    const { container, canvas, devicePixelRatio: dpr } = this.canvasConfig;
 
     if (canvas) {
       this.$canvas = canvas;
@@ -71,9 +71,6 @@ export class CanvasKitContextService
       }
     }
 
-    // use user-defined dpr first
-    let dpr = devicePixelRatio || (isBrowser && window.devicePixelRatio) || 1;
-    dpr = dpr >= 1 ? Math.ceil(dpr) : 1;
     this.dpr = dpr;
     this.resize(this.canvasConfig.width, this.canvasConfig.height);
 

packages/g-image-exporter/src/ImageExporter.ts

@@ -188,16 +188,9 @@ export class ImageExporter {
   }
 
   private getOrCreateImage(src: string): Promise<HTMLImageElement> {
-    // @see https://github.com/antvis/g/issues/938
-    const { createImage } = this.options.canvas.getConfig();
-
     return new Promise((resolve, reject) => {
-      let image: HTMLImageElement;
-      if (createImage) {
-        image = createImage(src);
-      } else if (isBrowser) {
-        image = new window.Image();
-      }
+      // @see https://github.com/antvis/g/issues/938
+      const image = this.options.canvas.getConfig().createImage();
 
       if (image) {
         image.onload = () => {