From 54bc5f98e0ab9d7c3ca33e0de8ee639d2d67a305 Mon Sep 17 00:00:00 2001
From: Aaron <yangtao.yangtao@antgroup.com>
Date: Thu, 18 Apr 2024 14:37:03 +0800
Subject: [PATCH] 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
---
 packages/g6/__tests__/demos/graph-to-data-url.ts |  3 +++
 packages/g6/__tests__/main.ts                    | 11 ++++++++---
 packages/g6/src/runtime/canvas.ts                |  7 +++++--
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/g6/__tests__/demos/graph-to-data-url.ts b/packages/g6/__tests__/demos/graph-to-data-url.ts
index d5cd0a96240..c372c66c1d7 100644
--- 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
index 0535276bae0..8e3042a3254 100644
--- 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
index eb16657dc7a..f7f68f7b01a 100644
--- 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);
       });