fix: fix issue appearing when export data url (#5658)

* refactor: demo panel support search * fix: fix exported image lost background * fix: fix issue that image not load when export image
antvis · Apr 18, 2024 · 54bc5f9 · 54bc5f9
1 parent 79c18aa
commit 54bc5f9
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/packages/g6/__tests__/demos/graph-to-data-url.ts b/packages/g6/__tests__/demos/graph-to-data-url.ts
@@ -1,12 +1,15 @@
 import { Graph } from '@/src';
+import icon from '@@/assets/user.svg';
 
 export const graphToDataURL: TestCase = async (context) => {
   const graph = new Graph({
     ...context,
+    background: '#f4df4d',
     data: {
       nodes: [
         { id: 'node-1', style: { x: 50, y: 50, color: 'purple', halo: true, labelText: 'node-1' } },
         { id: 'node-2', style: { x: 100, y: 50, color: 'pink', halo: true, labelText: 'node-2' } },
+        { id: 'node-3', style: { x: 150, y: 50, iconSrc: icon, iconWidth: 30, iconHeight: 30, labelText: 'node-2' } },
       ],
       edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', style: { color: 'orange', lineWidth: 2 } }],
     },

diff --git a/packages/g6/__tests__/main.ts b/packages/g6/__tests__/main.ts
@@ -5,7 +5,7 @@ import * as demos from './demos';
 import { createGraphCanvas } from './utils';
 
 type Options = {
-  Type: string;
+  Search: string;
   Demo: string;
   Renderer: string;
   Theme: string;
@@ -14,7 +14,7 @@ type Options = {
 };
 
 const options: Options = {
-  Type: 'cases',
+  Search: '',
   Demo: Object.keys(demos)[0],
   Renderer: 'canvas',
   GridLine: true,
@@ -36,6 +36,11 @@ window.onload = render;
 function initPanel() {
   const panel = new GUI({ container: document.getElementById('panel')!, autoPlace: true });
   const Demo = panel.add(options, 'Demo', Object.keys(demos)).onChange(render);
+  const Search = panel.add(options, 'Search').onChange((keyword: string) => {
+    const keys = Object.keys(demos);
+    const filtered = keys.filter((key) => key.toLowerCase().includes(keyword.toLowerCase()));
+    Demo.options(filtered);
+  });
   const Renderer = panel.add(options, 'Renderer', { Canvas: 'canvas', SVG: 'svg', WebGL: 'webgl' }).onChange(render);
   const Theme = panel.add(options, 'Theme', { Light: 'light', Dark: 'dark' }).onChange(render);
   const GridLine = panel.add(options, 'GridLine').onChange(() => {
@@ -44,7 +49,7 @@ function initPanel() {
   });
   const Animation = panel.add(options, 'Animation').onChange(render);
   const reload = panel.add(options, 'Reload').onChange(render);
-  return { panel, Demo, Renderer, GridLine, Theme, Animation, reload };
+  return { panel, Demo, Search, Renderer, GridLine, Theme, Animation, reload };
 }
 
 async function render() {

diff --git a/packages/g6/src/runtime/canvas.ts b/packages/g6/src/runtime/canvas.ts
@@ -153,6 +153,7 @@ export class Canvas {
 
   public setBackground(background = this.config.background) {
     const container = this.getContainer();
+    this.config.background = background;
     if (container && background) {
       container.style.background = background;
       container.style.transition = 'background 0.5s';
@@ -248,7 +249,7 @@ export class Canvas {
       renderer: new CanvasRenderer(),
       devicePixelRatio,
       container,
-      background: this.background.getConfig().background,
+      background: this.config.background,
     });
 
     await offscreenCanvas.ready;
@@ -286,7 +287,9 @@ export class Canvas {
     const contextService = offscreenCanvas.getContextService();
 
     return new Promise<string>((resolve) => {
-      offscreenCanvas.on(CanvasEvent.AFTER_RENDER, async () => {
+      offscreenCanvas.on(CanvasEvent.RERENDER, async () => {
+        // 等待图片渲染完成 / Wait for the image to render
+        await new Promise((r) => setTimeout(r, 300));
         const url = await contextService.toDataURL(restOptions);
         resolve(url);
       });