diff --git a/.changeset/wicked-rabbits-exist.md b/.changeset/wicked-rabbits-exist.md new file mode 100644 index 000000000..84acc14e6 --- /dev/null +++ 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 index e48e6e91f..e89e03802 100644 --- 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 {} + + 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 index 7c71a6091..27395a56a 100644 --- 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 { + static PARSED_STYLE_LIST: Set = 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 index c14af71bf..35fd01eac 100644 --- 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(['class', 'className']); + constructor() { super({ type: Shape.FRAGMENT }); }