fix: fix custom element with stroke may cause bounds error (#1857)

* fix: fix custom element with stroke may cause bounds error * chore: commit changeset
antvis · Nov 27, 2024 · 1fb7ecc · 1fb7ecc
1 parent ee852c4
commit 1fb7ecc
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 14 deletions.
diff --git a/.changeset/wicked-rabbits-exist.md b/.changeset/wicked-rabbits-exist.md
@@ -0,0 +1,5 @@
+---
+'@antv/g-lite': patch
+---
+
+fix: fix custom element with stroke may cause bounds error
diff --git a/__tests__/demos/bugfix/group-with-stroke.ts b/__tests__/demos/bugfix/group-with-stroke.ts
@@ -1,11 +1,13 @@
-import { Group, Path, Rect, runtime } from '@antv/g';
+import { Group, Path, Rect, runtime, CustomElement } from '@antv/g';
 
 export async function group_with_stroke(context) {
   const { canvas } = context;
 
   await canvas.ready;
 
-  const group = new Group({
+  class CustomGroup extends CustomElement<any> {}
+
+  const group = new CustomGroup({
     style: {
       stroke: 'red',
       lineWidth: 6,
@@ -28,24 +30,37 @@ export async function group_with_stroke(context) {
 
   canvas.appendChild(group);
 
-  const bounds = group.getRenderBounds();
+  let rect;
 
-  const {
-    min: [minX, minY],
-    max: [maxX, maxY],
-  } = bounds;
-  const width = maxX - minX;
-  const height = maxY - minY;
-  const rect = new Rect({
-    style: {
+  const upsert = () => {
+    const {
+      min: [minX, minY],
+      max: [maxX, maxY],
+    } = group.getRenderBounds();
+    const width = maxX - minX;
+    const height = maxY - minY;
+    const style = {
       x: minX,
       y: minY,
       width,
       height,
       fill: 'green',
       fillOpacity: 0.1,
-    },
-  });
+      zIndex: -1,
+    };
 
-  canvas.appendChild(rect);
+    if (!rect) {
+      rect = new Rect({ style });
+      canvas.appendChild(rect);
+    } else {
+      rect.attr(style);
+    }
+  };
+
+  upsert();
+
+  Object.assign(window, {
+    upsert,
+    group,
+  });
 }
diff --git a/packages/g-lite/src/display-objects/CustomElement.ts b/packages/g-lite/src/display-objects/CustomElement.ts
@@ -11,6 +11,21 @@ export interface BaseCustomElementStyleProps extends BaseStyleProps {}
 export abstract class CustomElement<
   CustomElementStyleProps,
 > extends DisplayObject<CustomElementStyleProps & BaseCustomElementStyleProps> {
+  static PARSED_STYLE_LIST: Set<string> = new Set([
+    'class',
+    'className',
+    'clipPath',
+    'cursor',
+    'draggable',
+    'droppable',
+    'opacity',
+    'pointerEvents',
+    'transform',
+    'transformOrigin',
+    'zIndex',
+    'visibility',
+  ]);
+
   isCustomElement = true;
 
   // private shadowNodes: DisplayObject[] = [];

diff --git a/packages/g-lite/src/display-objects/Fragment.ts b/packages/g-lite/src/display-objects/Fragment.ts
@@ -11,6 +11,8 @@ import { DisplayObject } from './DisplayObject';
  * @see https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
  */
 export class Fragment extends DisplayObject {
+  static PARSED_STYLE_LIST = new Set<string>(['class', 'className']);
+
   constructor() {
     super({ type: Shape.FRAGMENT });
   }