test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-01 19:28:39 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(graph): fix resize logic

Browse Source
This commit is contained in:
antv 2024-11-04 10:56:06 +08:00
parent 0ef8e8f15d
commit 4066df1b67
4 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/g6/src/runtime/graph.ts
View File

@ -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 }));
}
/**

4
packages/g6/src/utils/dom.ts
View File

@ -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;

2
packages/site/.dumi/app.tsx
View File

@ -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);
};
}

2
packages/site/examples/behavior/update-label/demo/changeImg.js
View File

@ -99,5 +99,3 @@ graph.on('node:pointerleave', (event) => {
},
});
});
window.graph = graph;