diff --git a/packages/g6/src/runtime/graph.ts b/packages/g6/src/runtime/graph.ts index 36df5904ae0..4e8409d08ef 100644 --- a/packages/g6/src/runtime/graph.ts +++ b/packages/g6/src/runtime/graph.ts @@ -155,16 +155,18 @@ export class Graph extends EventEmitter { } /** - * 获取当前画布容器的尺寸 + * 设置当前画布容器的尺寸 * - * Get the size of the current canvas container + * Set the size of the current canvas container * @param width - 画布宽度 | canvas width * @param height - 画布高度 | canvas height * @apiCategory canvas */ public setSize(width: number, height: number): void { - Object.assign(this.options, { width, height }); - this.context.canvas?.resize(width, height); + if (width) this.options.width = width; + if (height) this.options.height = height; + + this.resize(width, height); } /** @@ -1242,11 +1244,17 @@ export class Graph extends EventEmitter { */ public resize(width: number, height: number): void; public resize(width?: number, height?: number): void { - const size: Vector2 = !width || !height ? sizeOf(this.context.canvas!.getContainer()!) : [width, height]; - if (isEqual(size, this.getSize())) return; - emit(this, new GraphLifeCycleEvent(GraphEvent.BEFORE_SIZE_CHANGE, { size })); - this.context.canvas.resize(...size); - emit(this, new GraphLifeCycleEvent(GraphEvent.AFTER_SIZE_CHANGE, { size })); + const containerSize = sizeOf(this.context.canvas?.getContainer()); + const specificSize: Vector2 = [width || containerSize[0], height || containerSize[1]]; + + if (!this.context.canvas) return; + + const canvasSize = this.context.canvas!.getSize(); + if (isEqual(specificSize, canvasSize)) return; + + emit(this, new GraphLifeCycleEvent(GraphEvent.BEFORE_SIZE_CHANGE, { size: specificSize })); + this.context.canvas.resize(...specificSize); + emit(this, new GraphLifeCycleEvent(GraphEvent.AFTER_SIZE_CHANGE, { size: specificSize })); } /** diff --git a/packages/g6/src/utils/dom.ts b/packages/g6/src/utils/dom.ts index bb4cd196a37..73d50d06ff6 100644 --- a/packages/g6/src/utils/dom.ts +++ b/packages/g6/src/utils/dom.ts @@ -24,7 +24,9 @@ function getContainerSize(container: HTMLElement): [number, number] { * @param container container of Graph * @returns Size of Graph */ -export function sizeOf(container: HTMLElement): [number, number] { +export function sizeOf(container: HTMLElement | null): [number, number] { + if (!container) return [0, 0]; + let effectiveWidth = 640; let effectiveHeight = 480; diff --git a/packages/site/.dumi/app.tsx b/packages/site/.dumi/app.tsx index 37e70c32357..68d7c9d24e0 100644 --- a/packages/site/.dumi/app.tsx +++ b/packages/site/.dumi/app.tsx @@ -4,6 +4,6 @@ if (typeof window !== 'undefined') { if (!graph || graph.destroyed) return; if (!container || !container.scrollWidth || !container.scrollHeight) return; - graph.setSize([container.scrollWidth + widthOffset, container.scrollHeight + heightOffset]); + graph.setSize(container.scrollWidth + widthOffset, container.scrollHeight + heightOffset); }; } diff --git a/packages/site/examples/behavior/update-label/demo/changeImg.js b/packages/site/examples/behavior/update-label/demo/changeImg.js index 4a669cbfe8f..6a105c5aec8 100644 --- a/packages/site/examples/behavior/update-label/demo/changeImg.js +++ b/packages/site/examples/behavior/update-label/demo/changeImg.js @@ -99,5 +99,3 @@ graph.on('node:pointerleave', (event) => { }, }); }); - -window.graph = graph; \ No newline at end of file