Migrate MindMap to functional API pattern with Preact in ai directory

package.json

@@ -66,6 +66,7 @@
     "@zumer/snapdom": "^1.9.14",
     "copy-text-to-clipboard": "^3.2.2",
     "lodash": "^4.17.21",
+    "preact": "^10.28.2",
     "rc-resize-observer": "^1.4.3",
     "react-error-boundary": "^6.0.0",
     "react-markdown": "^9.1.0",

src/ai/index.ts

@@ -18,6 +18,8 @@ export { Line } from './vis/line';
 export type { LineConfig, LineDataItem, LineOptions } from './vis/line';
 export { Liquid } from './vis/liquid';
 export type { LiquidConfig, LiquidOptions } from './vis/liquid';
+export { MindMap } from './vis/mind-map';
+export type { MindMapConfig, MindMapData, MindMapOptions } from './vis/mind-map';
 export { Radar } from './vis/radar';
 export type { RadarConfig, RadarDataItem, RadarOptions } from './vis/radar';
 export { Sankey } from './vis/sankey';

src/ai/playground/index.html

@@ -623,6 +623,27 @@ <h2>Custom Styles</h2>
       </div>
     </div>
 
+    <!-- MindMap -->
+    <div class="section">
+      <h2 class="section-title">MindMap (思维导图)</h2>
+      <div class="grid">
+        <div class="card">
+          <h2>Basic MindMap - Project Plan</h2>
+          <div id="mind-map-basic" class="chart-container"></div>
+        </div>
+
+        <div class="card">
+          <h2>Academy Theme - Typhoon Formation Factors</h2>
+          <div id="mind-map-academy" class="chart-container"></div>
+        </div>
+
+        <div class="card">
+          <h2>AI Applications</h2>
+          <div id="mind-map-ai" class="chart-container"></div>
+        </div>
+      </div>
+    </div>
+
     <script type="module" src="/main.ts"></script>
   </body>
 </html>

src/ai/playground/main.ts

@@ -8,6 +8,7 @@ import { Funnel } from '../vis/funnel/index';
 import { Histogram } from '../vis/histogram/index';
 import { Line } from '../vis/line/index';
 import { Liquid } from '../vis/liquid/index';
+import { MindMap } from '../vis/mind-map/index';
 import { Radar } from '../vis/radar/index';
 import { Sankey } from '../vis/sankey/index';
 import { Scatter } from '../vis/scatter/index';
@@ -1951,3 +1952,94 @@ radarCustom.render({
     lineWidth: 3,
   },
 });
+
+// MindMap Examples
+// Example 1: Basic MindMap
+const mindMapBasic = MindMap({
+  container: document.getElementById('mind-map-basic')!,
+  width: 800,
+  height: 500,
+});
+
+mindMapBasic.render({
+  type: 'mind-map',
+  data: {
+    name: '项目计划',
+    children: [
+      {
+        name: '研究阶段',
+        children: [{ name: '市场调研' }, { name: '技术可行性分析' }],
+      },
+      {
+        name: '设计阶段',
+        children: [{ name: '产品功能确定' }, { name: 'UI 设计' }],
+      },
+      {
+        name: '开发阶段',
+        children: [{ name: '编写代码' }, { name: '单元测试' }],
+      },
+      {
+        name: '测试阶段',
+        children: [{ name: '功能测试' }, { name: '性能测试' }],
+      },
+    ],
+  },
+});
+
+// Example 2: MindMap with Academy Theme
+const mindMapAcademy = MindMap({
+  container: document.getElementById('mind-map-academy')!,
+  width: 800,
+  height: 500,
+});
+
+mindMapAcademy.render({
+  type: 'mind-map',
+  data: {
+    name: '台风形成的因素',
+    children: [
+      {
+        name: '气象条件',
+        children: [
+          { name: '温暖的海水' },
+          { name: '气压分布' },
+          { name: '湿度水平' },
+          { name: '风的切变' },
+        ],
+      },
+      {
+        name: '地理环境',
+        children: [
+          { name: '大陆架的形状与深度' },
+          { name: '海洋暖流的分布' },
+          { name: '热带地区的气候特征' },
+          { name: '岛屿的影响' },
+        ],
+      },
+    ],
+  },
+  theme: 'academy',
+});
+
+// Example 3: MindMap - AI Applications
+const mindMapAI = MindMap({
+  container: document.getElementById('mind-map-ai')!,
+  width: 800,
+  height: 500,
+});
+
+mindMapAI.render({
+  type: 'mind-map',
+  data: {
+    name: '人工智能应用',
+    children: [
+      { name: '智能家居' },
+      { name: '自动驾驶' },
+      {
+        name: '医疗保健',
+        children: [{ name: '精准医疗' }, { name: '诊断辅助' }],
+      },
+      { name: '金融服务' },
+    ],
+  },
+});

src/ai/playground/package.json

@@ -9,10 +9,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@ant-design/graphs": "^2.1.1",
     "@antv/g2": "^5.4.1",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
+    "@preact/preset-vite": "^2.10.3",
     "@types/lodash": "^4.17.0",
     "typescript": "^5.0.0",
     "vite": "^5.0.0"

src/ai/playground/vite.config.js

@@ -1,7 +1,9 @@
+import preact from '@preact/preset-vite';
 import { resolve } from 'path';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
+  plugins: [preact()],
   root: './',
   resolve: {
     alias: {

src/ai/types/index.ts

@@ -0,0 +1,16 @@
+/**
+ * Tree graph data structure
+ */
+export interface TreeGraphData {
+  name: string;
+  description?: string; // For OrganizationChart
+  children?: TreeGraphData[];
+}
+
+/**
+ * Network graph data structure
+ */
+export interface GraphData {
+  nodes: { name: string }[];
+  edges: { source: string; target: string; name?: string }[];
+}

src/ai/util/graph.ts

@@ -0,0 +1,45 @@
+// Import G6 utilities from @ant-design/graphs
+import { G6 } from '@ant-design/graphs';
+import type { GraphData, TreeGraphData } from '../types';
+
+const { treeToGraphData } = G6;
+
+/**
+ * Transform tree data from vis format to G6 format
+ */
+export function visTreeData2GraphData(data: TreeGraphData) {
+  return treeToGraphData(data as unknown as G6.TreeData, {
+    getNodeData: (datum, depth) => {
+      datum.id = datum.name;
+      datum.depth = depth;
+      if (!datum.children) return datum as G6.NodeData;
+      const { children, ...restDatum } = datum;
+      return {
+        ...restDatum,
+        children: children.map((child) => child.name),
+      } as G6.NodeData;
+    },
+    getEdgeData: (source, target) =>
+      ({
+        source: source.name,
+        target: target.name,
+      }) as G6.EdgeData,
+  });
+}
+
+/**
+ * Transform graph data from vis format to G6 format
+ */
+export function visGraphData2GraphData(data: GraphData) {
+  return {
+    nodes: data.nodes.map((node) => ({
+      id: node.name,
+      style: { labelText: node.name },
+    })),
+    edges: data.edges.map((edge) => ({
+      source: edge.source,
+      target: edge.target,
+      style: { labelText: edge.name },
+    })),
+  };
+}

src/ai/util/theme.ts

@@ -44,3 +44,18 @@ export const getBackgroundColor = (theme: string): string => {
       return '#FFF';
   }
 };
+
+/**
+ * G6 theme map for graph components.
+ * Used by MindMap, OrganizationChart, IndentedTree, FishboneDiagram, etc.
+ */
+export const G6THEME_MAP: any = {
+  default: {
+    type: 'assign-color-by-branch',
+    colors: DEFAULT_COLOR_PALETTE,
+  },
+  academy: {
+    type: 'assign-color-by-branch',
+    colors: ACADEMY_COLOR_PALETTE,
+  },
+};