refactor: toDataURL support export overall mode (#5648)

* feat(canvas): toDataURL support by overall graph

* test: update snapshots

* test: add test case

* refactor: adjust code

packages/g6/__tests__/demos/graph-to-data-url.ts

@@ -16,13 +16,14 @@ export const graphToDataURL: TestCase = async (context) => {
   graphToDataURL.form = (panel) => {
     const config = {
       toDataURL: () => {
-        graph.toDataURL().then((url) => {
+        graph.toDataURL({ mode: config.mode } as any).then((url) => {
           navigator.clipboard.writeText(url);
           alert('The data URL has been copied to the clipboard');
         });
       },
+      mode: 'viewport',
       download: async () => {
-        const dataURL = await graph.toDataURL();
+        const dataURL = await graph.toDataURL({ mode: config.mode } as any);
         const [head, content] = dataURL.split(',');
         const contentType = head.match(/:(.*?);/)![1];
 
@@ -43,7 +44,11 @@ export const graphToDataURL: TestCase = async (context) => {
         a.click();
       },
     };
-    return [panel.add(config, 'toDataURL'), panel.add(config, 'download').name('Download')];
+    return [
+      panel.add(config, 'toDataURL'),
+      panel.add(config, 'mode', ['viewport', 'overall']),
+      panel.add(config, 'download').name('Download'),
+    ];
   };
 
   await graph.render();

packages/g6/__tests__/unit/runtime/graph/graph.spec.ts

@@ -313,8 +313,10 @@ describe('Graph', () => {
   });
 
   it('toDataURL', async () => {
-    const url = await graph.toDataURL();
-    expect(url).toBeDefined();
+    expect(await graph.toDataURL()).toBeDefined();
+    expect(await graph.toDataURL({ mode: 'overall' })).toBeDefined();
+    expect((await graph.toDataURL({ type: 'image/jpeg' })).startsWith('data:image/jpeg')).toBe(true);
+    expect((await graph.toDataURL({ type: 'image/png' })).startsWith('data:image/png')).toBe(true);
   });
 
   it('resize', () => {

packages/g6/src/runtime/canvas.ts

@@ -1,8 +1,8 @@
 import type {
   Cursor,
-  DataURLOptions,
   DisplayObject,
   CanvasConfig as GCanvasConfig,
+  DataURLOptions as GDataURLOptions,
   IAnimation,
   IRenderer,
   PointLike,
@@ -13,14 +13,27 @@ import { Plugin as DragNDropPlugin } from '@antv/g-plugin-dragndrop';
 import { createDOM, isFunction, isString } from '@antv/util';
 import type { CanvasOptions } from '../spec/canvas';
 import type { CanvasLayer } from '../types/canvas';
-import { getCombinedBBox } from '../utils/bbox';
+import { getBBoxSize, getCombinedBBox } from '../utils/bbox';
 
 export interface CanvasConfig
   extends Pick<GCanvasConfig, 'container' | 'devicePixelRatio' | 'width' | 'height' | 'cursor'> {
   renderer?: CanvasOptions['renderer'];
   background?: string;
 }
 
+export interface DataURLOptions extends GDataURLOptions {
+  /**
+   * <zh/> 导出模式
+   *  - viewport: 导出视口内容
+   *  - overall: 导出整个画布
+   *
+   * <en/> export mode
+   *  - viewport: export the content of the viewport
+   *  - overall: export the entire canvas
+   */
+  mode?: 'viewport' | 'overall';
+}
+
 /**
  * @deprecated this canvas will be replace by layered canvas
  */
@@ -173,7 +186,7 @@ export class Canvas {
       Object.values(this.canvas)
         .map((canvas) => canvas.document.documentElement)
         .filter((el) => el.childNodes.length > 0)
-        .map((el) => el.getBounds()),
+        .map((el) => el.getRenderBounds()),
     );
   }
 
@@ -211,7 +224,21 @@ export class Canvas {
 
   public async toDataURL(options: Partial<DataURLOptions> = {}) {
     const devicePixelRatio = window.devicePixelRatio || 1;
-    const { width, height } = this.config;
+    const { mode = 'viewport', ...restOptions } = options;
+
+    let startX = 0;
+    let startY = 0;
+    let width = 0;
+    let height = 0;
+
+    if (mode === 'viewport') {
+      [width, height] = [this.config.width || 0, this.config.height || 0];
+    } else if (mode === 'overall') {
+      const bounds = this.getBounds();
+      const size = getBBoxSize(bounds);
+      [startX, startY] = bounds.min;
+      [width, height] = size;
+    }
 
     const container: HTMLElement = createDOM('<div id="virtual-image"></div>');
 
@@ -244,15 +271,23 @@ export class Canvas {
 
     const camera = this.main.getCamera();
     const offscreenCamera = offscreenCanvas.getCamera();
-    offscreenCamera.setZoom(camera.getZoom());
-    offscreenCamera.setPosition(camera.getPosition());
-    offscreenCamera.setFocalPoint(camera.getFocalPoint());
+
+    if (mode === 'viewport') {
+      offscreenCamera.setZoom(camera.getZoom());
+      offscreenCamera.setPosition(camera.getPosition());
+      offscreenCamera.setFocalPoint(camera.getFocalPoint());
+    } else if (mode === 'overall') {
+      const [x, y, z] = offscreenCamera.getPosition();
+      const [fx, fy, fz] = offscreenCamera.getFocalPoint();
+      offscreenCamera.setPosition([x + startX, y + startY, z]);
+      offscreenCamera.setFocalPoint([fx + startX, fy + startY, fz]);
+    }
 
     const contextService = offscreenCanvas.getContextService();
 
     return new Promise<string>((resolve) => {
       offscreenCanvas.on(CanvasEvent.AFTER_RENDER, async () => {
-        const url = await contextService.toDataURL(options);
+        const url = await contextService.toDataURL(restOptions);
         resolve(url);
       });
     });

packages/g6/src/runtime/graph.ts

@@ -1,5 +1,5 @@
 import EventEmitter from '@antv/event-emitter';
-import type { AABB, BaseStyleProps, DataURLOptions } from '@antv/g';
+import type { AABB, BaseStyleProps } from '@antv/g';
 import type { ID } from '@antv/graphlib';
 import { debounce, isEqual, isFunction, isNumber, isObject, isString, omit } from '@antv/util';
 import { COMBO_KEY, GraphEvent } from '../constants';
@@ -49,6 +49,7 @@ import { zIndexOf } from '../utils/style';
 import { subtract } from '../utils/vector';
 import { BatchController } from './batch';
 import { BehaviorController } from './behavior';
+import type { DataURLOptions } from './canvas';
 import { Canvas } from './canvas';
 import type { HierarchyKey } from './data';
 import { DataController } from './data';
@@ -1051,6 +1052,21 @@ export class Graph extends EventEmitter {
     else if (elementType === 'combo') this.updateComboData([{ id, style: { collapsed } }]);
   }
 
+  /**
+   * <zh/> 导出画布内容为 DataURL
+   *
+   * <en/> Export canvas content as DataURL
+   * @param options - <zh/> 导出配置 | <en/> export configuration
+   * @param mode
+   * <zh/> 导出模式
+   *  - viewport: 导出视口内容
+   *  - overall: 导出整个画布
+   *
+   * <en/> export mode
+   *  - viewport: export the content of the viewport
+   *  - overall: export the entire canvas
+   * @returns <zh/> DataURL | <en/> DataURL
+   */
   public async toDataURL(options: Partial<DataURLOptions> = {}): Promise<string> {
     return this.context.canvas!.toDataURL(options);
   }