From abe696deb59bba1fa1e6f2259148cccd64774eb1 Mon Sep 17 00:00:00 2001
From: hailin <hailin.zhao@gdzx.xyz>
Date: Sun, 5 Apr 2026 21:53:54 -0700
Subject: [PATCH] fix: clear maskImage when switching back to rectangle shape

- Explicitly set maskImage=undefined for rectangle mode
- Force re-mount EChartsBase on wordcloud shape change via React key
- Prevents stale mask from previous shape persisting

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

diff --git a/frontend/src/adapters/gateways/EChartsOptionBuilder/wordcloudOptionBuilder.ts b/frontend/src/adapters/gateways/EChartsOptionBuilder/wordcloudOptionBuilder.ts
index 4524b23..c1fd453 100644
--- a/frontend/src/adapters/gateways/EChartsOptionBuilder/wordcloudOptionBuilder.ts
+++ b/frontend/src/adapters/gateways/EChartsOptionBuilder/wordcloudOptionBuilder.ts
@@ -272,9 +272,8 @@ export function buildWordcloudOption(
     data: wordData,
   };
 
-  if (maskImage) {
-    series.maskImage = maskImage;
-  }
+  // Always set maskImage explicitly — undefined clears previous mask
+  series.maskImage = maskImage ?? undefined;
 
   option.series = [series];
   return option;
diff --git a/frontend/src/frameworks/components/charts/ChartRenderer.tsx b/frontend/src/frameworks/components/charts/ChartRenderer.tsx
index b2165b3..8fe765b 100644
--- a/frontend/src/frameworks/components/charts/ChartRenderer.tsx
+++ b/frontend/src/frameworks/components/charts/ChartRenderer.tsx
@@ -38,8 +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;
       return echartsOption
-        ? <EChartsBase chartId={chartId} option={echartsOption} style={{ width: '100%', height: '100%', minHeight: 250, borderRadius, overflow }} />
+        ? <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>;
   }
 };