fix(graph): fix resize logic (#6469)

Co-authored-by: antv <[email protected]>
antvis · Nov 5, 2024 · 858a23f · 858a23f
1 parent cffb974
commit 858a23f
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 13 deletions.
diff --git a/packages/g6/src/runtime/graph.ts b/packages/g6/src/runtime/graph.ts
@@ -155,16 +155,18 @@ export class Graph extends EventEmitter {
   }
 
   /**
-   * <zh/> 获取当前画布容器的尺寸
+   * <zh/> 设置当前画布容器的尺寸
    *
-   * <en/> Get the size of the current canvas container
+   * <en/> Set the size of the current canvas container
    * @param width - <zh/> 画布宽度 | <en/> canvas width
    * @param height - <zh/> 画布高度 | <en/> 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
@@ -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
@@ -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
@@ -99,5 +99,3 @@ graph.on('node:pointerleave', (event) => {
     },
   });
 });
-
-window.graph = graph;