Migrate MindMap to functional API pattern with Preact in ai directory

[Copilot]

Refactors MindMap from React component to functional factory pattern following the ai directory architecture for GPT-Vis 1.0, using Preact for optimized bundle size.

Changes

Core Implementation

• src/ai/vis/mind-map/index.ts: Functional factory returning instance with render() and destroy() methods. Uses Preact/compat to render @ant-design/graphs MindMap component with reduced bundle size.
• src/ai/util/graph.ts: Data transformation utilities converting vis tree format to G6 format (visTreeData2GraphData, visGraphData2GraphData)
• src/ai/types/index.ts: TypeScript definitions for TreeGraphData and GraphData structures
• src/ai/util/theme.ts: Added G6THEME_MAP for graph component theme configuration (can be reused by other graph components)

API Surface

• src/ai/index.ts: Exports MindMap factory and types (MindMapConfig, MindMapData, MindMapOptions)
• src/ai/vis/mind-map/README.md: Usage documentation with examples

Playground

• Added three examples: basic project plan, academy-themed typhoon factors, AI applications
• src/ai/playground/vite.config.js: Added @preact/preset-vite plugin for React-to-Preact aliasing

Bundle Size Optimization

• Switched from React to Preact/compat for rendering
• Bundle size reduced from 2,934.94 KB to 2,805.72 KB (~129 KB reduction, 4.4% smaller)
• Maintained full compatibility with @ant-design/graphs React components through Preact's compat layer

Interactions

• Behaviors: Includes 'drag-canvas' for panning and 'zoom-canvas' for zooming (mouse wheel/touch gestures)

Usage

import { MindMap } from '@antv/gpt-vis/ai';

const mindMap = MindMap({
  container: '#container',
  width: 800,
  height: 500,
});

mindMap.render({
  type: 'mind-map',
  data: {
    name: '项目计划',
    children: [
      { name: '研究阶段', children: [{ name: '市场调研' }] },
      { name: '设计阶段', children: [{ name: 'UI 设计' }] },
    ],
  },
  theme: 'academy', // optional: 'default' | 'academy'
});

mindMap.destroy();

Implementation Notes

• Uses Preact/compat to reduce bundle size while maintaining React API compatibility
• Theme colors use G6THEME_MAP pattern from src/ai/util/theme.ts (matches existing React component behavior)
• Preserves original configuration: boxed layout, collapse/expand transforms
• Supports drag-canvas and zoom-canvas behaviors for interactive navigation
• G6THEME_MAP can be reused by other graph components (OrganizationChart, IndentedTree, FishboneDiagram, etc.)
• @preact/preset-vite automatically handles React-to-Preact aliasing in the playground

Screenshots

Three working examples showing hierarchical mind maps with correct color palettes, Chinese text rendering, theme support, and interactive zoom/pan capabilities, now powered by Preact for smaller bundle size.

Original prompt

基于 gpt-vis-ai-graph-refactor skill 的流程，重构和迁移 mind-map，目标分支为 ai

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[changeset-bot]

⚠️ No Changeset found

Latest commit: c7394cf

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

🎊 PR Preview c7394cf has been successfully built and deployed to https://antvis-GPT-Vis-preview-playground-pr-301.surge.sh

🕐 Build time: 0.01s

_{🤖 By surge-preview}

[hustcc]

@copilot 颜色上不对。具体是以下代码不对：

{
    ...(prev.find((transform) => (transform as any).key === 'assign-color-by-branch') ||
      ({} as any)),
    type: 'assign-color-by-branch',
    colors: THEME_COLORS[theme],     // 这里不对
  },

应该改成：

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,
  },
};

然后在 src/ai/vis/mind-map/index.ts 中使用的时候：

{
  ...(prev.find((transform) => (transform as any).key === 'assign-color-by-branch') ||
    ({} as any)),
  ...G6THEME_MAP[theme],     // 这里
},

可以将 G6THEME_MAP 变量上存储到 src/ai/util/theme 中，后续其他关系图也能用到。

[Copilot]

@copilot 颜色上不对。具体是以下代码不对：

...

Fixed in commit 7058d2b.

Changes made:

1. Added G6THEME_MAP to src/ai/util/theme.ts for reuse by other graph components
2. Updated src/ai/vis/mind-map/index.ts to use ...G6THEME_MAP[theme] instead of directly setting colors: THEME_COLORS[theme]

The colors now correctly use the standard palette definitions (DEFAULT_COLOR_PALETTE and ACADEMY_COLOR_PALETTE).

[hustcc]

@copilot 试试下面两个改动。

1. mind-map 组件依赖上，把 react 换成 preact，这样包大小会减少很多，参考 https://preactjs.com/guide/v10/differences-to-react
2. playground 构建上，需要用到 "@preact/preset-vite" 放到 vite 配置中。

[Copilot]

@copilot 试试下面两个改动。

1. mind-map 组件依赖上，把 react 换成 preact，这样包大小会减少很多，参考 https://preactjs.com/guide/v10/differences-to-react
   ...

Fixed in commit e1a22fb.

Changes made:

1. Switched MindMap component from React to Preact/compat for smaller bundle size
2. Added @preact/preset-vite to playground Vite configuration
3. Installed preact dependency in main package

Bundle size reduced from 2,934.94 KB to 2,805.72 KB (~129 KB reduction in main bundle).

The MindMap components continue to work correctly with all themes:

[hustcc]

@copilot 增加 behaviors： 'zoom-canvas'。

[Copilot]

@copilot 增加 behaviors： 'zoom-canvas'。

Added in commit c7394cf. The MindMap now includes both 'drag-canvas' and 'zoom-canvas' behaviors, enabling users to zoom in/out using mouse wheel or touch gestures.