From 95bd6c4f5565f70df5b58fc20aa963d4de39b318 Mon Sep 17 00:00:00 2001
From: hailin <hailin.zhao@gdzx.xyz>
Date: Sun, 5 Apr 2026 22:00:29 -0700
Subject: [PATCH] fix: force full ECharts re-mount on wordcloud config change

React key now includes shape+size+gridSize+customImage, ensuring
the echarts instance is fully destroyed and recreated when switching
shapes. This bypasses the wordcloud plugin's internal mask cache.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../EChartsOptionBuilder/wordcloudOptionBuilder.ts        | 7 +++++--
 .../src/frameworks/components/charts/ChartRenderer.tsx    | 8 +++++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/src/adapters/gateways/EChartsOptionBuilder/wordcloudOptionBuilder.ts b/frontend/src/adapters/gateways/EChartsOptionBuilder/wordcloudOptionBuilder.ts
index c1fd453..d7a617e 100644
--- a/frontend/src/adapters/gateways/EChartsOptionBuilder/wordcloudOptionBuilder.ts
+++ b/frontend/src/adapters/gateways/EChartsOptionBuilder/wordcloudOptionBuilder.ts
@@ -272,8 +272,11 @@ export function buildWordcloudOption(
     data: wordData,
   };
 
-  // Always set maskImage explicitly — undefined clears previous mask
-  series.maskImage = maskImage ?? undefined;
+  if (maskImage) {
+    series.maskImage = maskImage;
+  }
+  // For rectangle: no maskImage, no shape — pure default fills the container
+  // For other shapes with mask: maskImage handles the shape
 
   option.series = [series];
   return option;
diff --git a/frontend/src/frameworks/components/charts/ChartRenderer.tsx b/frontend/src/frameworks/components/charts/ChartRenderer.tsx
index 8fe765b..e690e11 100644
--- a/frontend/src/frameworks/components/charts/ChartRenderer.tsx
+++ b/frontend/src/frameworks/components/charts/ChartRenderer.tsx
@@ -38,9 +38,11 @@ export const ChartRenderer: React.FC<ChartRendererProps> = ({ chart, data, chart
     default:
       const borderRadius = chart.style?.background?.borderRadius ?? 0;
       const overflow = borderRadius > 0 ? 'hidden' as const : undefined;
-      // Force re-mount when wordcloud shape changes (plugin caches mask internally)
-      const wcShape = (chart.style as any)?.wordcloud?.shape ?? 'default';
-      const echartsKey = chart.type === 'wordcloud' ? `${chartId}-${wcShape}` : chartId;
+      // Force re-mount when wordcloud config changes (plugin caches mask internally)
+      const wcConfig = (chart.style as any)?.wordcloud;
+      const echartsKey = chart.type === 'wordcloud' && wcConfig
+        ? `${chartId}-${wcConfig.shape}-${wcConfig.sizeMin}-${wcConfig.sizeMax}-${wcConfig.gridSize}-${wcConfig.customImageUrl ? 'img' : 'no'}`
+        : chartId;
       return echartsOption
         ? <EChartsBase key={echartsKey} chartId={chartId} option={echartsOption} style={{ width: '100%', height: '100%', minHeight: 250, borderRadius, overflow }} />
         : <div style={{ padding: 16, color: '#999', textAlign: 'center' }}>请绑定数据字段</div>;