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