fix: modify component name

packages/studio-draw-pattern/src/components/Canvas/index.tsx

@@ -15,7 +15,7 @@ import { theme } from 'antd';
 import { useSection } from '@graphscope/studio-components';
 import { Background, MiniMap, Controls } from 'reactflow';
 import { InsertRowRightOutlined, SearchOutlined } from '@ant-design/icons';
-import { GraphProvider, GraphEditor, ISchemaEdge, ISchemaNode } from '@graphscope/studio-flow-editor';
+import { GraphProvider, GraphCanvas, ISchemaEdge, ISchemaNode } from '@graphscope/studio-flow-editor';
 
 export const Canvas = () => {
   const [descState, setDescState] = useState<string>();
@@ -116,7 +116,7 @@ export const Canvas = () => {
 
   const MyGraph = useCallback(() => {
     return (
-      <GraphEditor
+      <GraphCanvas
         noDefaultLabel={true}
         defaultNodes={graphNodes}
         defaultEdges={graphEdges as unknown as ISchemaEdge[]}
@@ -133,7 +133,7 @@ export const Canvas = () => {
         />
         <Background style={{ background: token.colorBgBase }} />
         <MiniMap style={{ backgroundColor: token.colorBgBase }} />
-      </GraphEditor>
+      </GraphCanvas>
     );
   }, [graphNodes, graphEdges]);
 

packages/studio-draw-pattern/src/components/QuickStart/Preview.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useContext, useMemo } from 'react';
-import { ISchemaEdge, ISchemaNode, GraphEditor, GraphProvider } from '@graphscope/studio-flow-editor';
+import { ISchemaEdge, ISchemaNode, GraphCanvas, GraphProvider } from '@graphscope/studio-flow-editor';
 import { useTransform } from '../../hooks/transform/useTransform';
 import { useGraphStore } from '../../stores/useGraphStore';
 import { useNodeStore } from '../../stores/useNodeStore';
@@ -58,7 +58,7 @@ export const Preview = () => {
       <span style={{ fontSize: '1rem' }}>Model Preview</span>
       <div style={{ backgroundColor: 'white', height: '100%', flexGrow: '1' }}>
         <GraphProvider>
-          <GraphEditor
+          <GraphCanvas
             isPreview={true}
             nodesDraggable={true}
             defaultEdges={previewGraph?.edges}

packages/studio-flow-editor/README.md

@@ -22,25 +22,25 @@ yarn add @graphscope/studio-flow-editor
 ## 快速开始
 
 ```tsx
-import { GraphEditor, GraphProvider } from '@graphscope/studio-flow-editor';
+import { GraphCanvas, GraphProvider } from '@graphscope/studio-flow-editor';
 
 function App() {
   return (
     <GraphProvider>
-      <GraphEditor/>
+      <GraphCanvas/>
     </GraphProvider>
   );
 }
 ```
 
 ## 组件
 
-### GraphEditor
+### GraphCanvas
 
 流程图编辑器主组件。
 
 ```tsx
-<GraphEditor/>
+<GraphCanvas/>
 ```
 
 #### Props

packages/studio-flow-editor/docs/GraphEditor.md

@@ -1,30 +1,30 @@
 ---
 order: 3
-title: GraphEditor 组件
+title: GraphCanvas 组件
 ---
 
-# GraphEditor 组件
+# GraphCanvas 组件
 
-`GraphEditor` 组件是 `@graphscope/studio-flow-editor` 包的核心组件，提供了完整的图形可视化和交互编辑功能。本文档详细介绍该组件的用法和配置选项。
+`GraphCanvas` 组件是 `@graphscope/studio-flow-editor` 包的核心组件，提供了完整的图形可视化和交互编辑功能。本文档详细介绍该组件的用法和配置选项。
 
 ## 导入方式
 
 ```bash
-import { GraphEditor } from '@graphscope/studio-flow-editor';
+import { GraphCanvas } from '@graphscope/studio-flow-editor';
 ```
 
 ## 基本用法
 
 ```bash
 import React from 'react';
-import { GraphProvider, GraphEditor } from '@graphscope/studio-flow-editor';
+import { GraphProvider, GraphCanvas } from '@graphscope/studio-flow-editor';
 
 const MyGraph = () => {
   return (
     <GraphProvider>
-      <GraphEditor>
+      <GraphCanvas>
         {/* 可在此添加自定义UI组件 */}
-      </GraphEditor>
+      </GraphCanvas>
     </GraphProvider>
   );
 };
@@ -46,7 +46,7 @@ const MyGraph = () => {
 
 ## 功能特性
 
-`GraphEditor` 组件提供以下核心功能：
+`GraphCanvas` 组件提供以下核心功能：
 
 1. **节点管理**
 
@@ -75,7 +75,7 @@ const MyGraph = () => {
 
 ## 内部组件结构
 
-`GraphEditor` 组件内部由多个组件组合而成：
+`GraphCanvas` 组件内部由多个组件组合而成：
 
 - **GraphCanvas**：主要的画布区域，包含节点和边
 - **ReactFlow**：底层的 ReactFlow 组件，负责图形渲染
@@ -89,11 +89,11 @@ const MyGraph = () => {
 
 ## 与 GraphProvider 集成
 
-`GraphEditor` 必须在 `GraphProvider` 内使用才能访问共享状态：
+`GraphCanvas` 必须在 `GraphProvider` 内使用才能访问共享状态：
 
 ```bash
 <GraphProvider>
-  <GraphEditor />
+  <GraphCanvas />
 </GraphProvider>
 ```
 
@@ -104,7 +104,7 @@ const MyGraph = () => {
 
 ```jsx
 import React from 'react';
-import { GraphProvider, GraphEditor } from '@graphscope/studio-flow-editor';
+import { GraphProvider, GraphCanvas } from '@graphscope/studio-flow-editor';
 
 const App = () => {
   // 初始节点数据
@@ -137,7 +137,7 @@ const App = () => {
   return (
     <div style={{ width: '100%', height: '600px', position: 'relative' }}>
       <GraphProvider>
-        <GraphEditor defaultNodes={initialNodes} defaultEdges={initialEdges} />
+        <GraphCanvas defaultNodes={initialNodes} defaultEdges={initialEdges} />
       </GraphProvider>
     </div>
   );
@@ -152,7 +152,7 @@ export default App;
 
 ```jsx
 import React, { useState } from 'react';
-import { GraphProvider, GraphEditor, AddNode, ClearCanvas } from '@graphscope/studio-flow-editor';
+import { GraphProvider, GraphCanvas, AddNode, ClearCanvas } from '@graphscope/studio-flow-editor';
 import { Card, Divider } from 'antd';
 import { Toolbar } from '@graphscope/studio-components';
 
@@ -180,7 +180,7 @@ const App = () => {
   return (
     <div style={{ width: '100%', height: '600px', position: 'relative' }}>
       <GraphProvider>
-        <GraphEditor onNodesChange={handleNodesChange} onEdgesChange={handleEdgesChange}>
+        <GraphCanvas onNodesChange={handleNodesChange} onEdgesChange={handleEdgesChange}>
           <Toolbar style={{ top: '12px', right: '24px', left: 'unset' }} direction="vertical">
             <AddNode />
             <ClearCanvas />
@@ -195,7 +195,7 @@ const App = () => {
               <p style={{ overflow: 'auto' }}>{JSON.stringify(edges)}</p>
             </Card>
           </div>
-        </GraphEditor>
+        </GraphCanvas>
       </GraphProvider>
     </div>
   );
@@ -212,7 +212,7 @@ export default App;
 import React from 'react';
 import {
   GraphProvider,
-  GraphEditor,
+  GraphCanvas,
   useGraphStore,
   useAddNode,
   useClearCanvas,
@@ -266,10 +266,10 @@ const App = () => {
   return (
     <div style={{ width: '100%', height: '600px', position: 'relative' }} id="graphPanel">
       <GraphProvider>
-        <GraphEditor>
+        <GraphCanvas>
           <ControlPanel />
           <MiniMap />
-        </GraphEditor>
+        </GraphCanvas>
       </GraphProvider>
     </div>
   );
@@ -285,19 +285,19 @@ Studio Flow Editor 提供了几个预定义的控制组件，可以直接使用
 ```jsx
 import React from 'react';
 import { Toolbar } from '@graphscope/studio-components';
-import { GraphProvider, GraphEditor, AddNode, ClearCanvas, ExportSvg } from '@graphscope/studio-flow-editor';
+import { GraphProvider, GraphCanvas, AddNode, ClearCanvas, ExportSvg } from '@graphscope/studio-flow-editor';
 
 const App = () => {
   return (
     <div style={{ width: '100%', height: '600px', position: 'relative' }}>
       <GraphProvider>
-        <GraphEditor>
+        <GraphCanvas>
           <Toolbar>
             <AddNode />
             <ClearCanvas />
             <ExportSvg />
           </Toolbar>
-        </GraphEditor>
+        </GraphCanvas>
       </GraphProvider>
     </div>
   );
@@ -315,7 +315,7 @@ import React from 'react';
 import { Toolbar } from '@graphscope/studio-components';
 import {
   GraphProvider,
-  GraphEditor,
+  GraphCanvas,
   AddNode,
   ClearCanvas,
   useGraphStore,
@@ -350,20 +350,20 @@ const CustomNodePanel = () => {
 };
 
 // 完整示例
-const MyGraphEditor = () => {
+const MyGraphCanvas = () => {
   return (
     <div style={{ height: '50vh', position: 'relative' }}>
       <GraphProvider>
-        <GraphEditor>
+        <GraphCanvas>
           <Toolbar>
             <AddNode />
             <ClearCanvas />
           </Toolbar>
           <CustomNodePanel />
-        </GraphEditor>
+        </GraphCanvas>
       </GraphProvider>
     </div>
   );
 };
-export default MyGraphEditor;
+export default MyGraphCanvas;
 ```

packages/studio-flow-editor/docs/api.md

@@ -24,16 +24,16 @@ title: API 文档
 
 ```bash
 <GraphProvider id="my-graph">
-  <GraphEditor />
+  <GraphCanvas />
   {/* 其他需要访问图状态的组件 */}
 </GraphProvider>
 ```
 
-## GraphEditor
+## GraphCanvas
 
 ### 描述
 
-`GraphEditor` 是主要的图编辑器组件，提供了交互式的图形编辑界面。它必须包裹在 `GraphProvider` 内部。
+`GraphCanvas` 是主要的图编辑器组件，提供了交互式的图形编辑界面。它必须包裹在 `GraphProvider` 内部。
 
 ### 属性
 
@@ -52,7 +52,7 @@ title: API 文档
 ### 示例
 
 ```bash
-<GraphEditor
+<GraphCanvas
   nodesDraggable={true}
   isPreview={false}
   onNodesChange={(nodes) => console.log('Nodes changed:', nodes)}
@@ -62,7 +62,7 @@ title: API 文档
   defaultEdges={initialEdges}
 >
   {/* 可选的自定义UI组件 */}
-</GraphEditor>
+</GraphCanvas>
 ```
 
 ## Hooks

packages/studio-flow-editor/docs/components.md

@@ -100,7 +100,7 @@ import { ExportSvg } from '@graphscope/studio-flow-editor';
 import React from 'react';
 import { 
   GraphProvider, 
-  GraphEditor, 
+  GraphCanvas, 
   AddNode, 
   ClearCanvas, 
   ExportSvg 
@@ -131,7 +131,7 @@ const App = () => {
   return (
     <div style={{ width: '100%', height: '600px', position: 'relative' }} id="testZh">
       <GraphProvider>
-        <GraphEditor>
+        <GraphCanvas>
           <div style={ToolbarStyle}>
             <AddNode 
               style={ButtonStyle} 
@@ -144,7 +144,7 @@ const App = () => {
               style={ButtonStyle} 
             />
           </div>
-        </GraphEditor>
+        </GraphCanvas>
       </GraphProvider>
     </div>
   );
@@ -161,7 +161,7 @@ export default App;
 import React from 'react';
 import { 
   GraphProvider, 
-  GraphEditor, 
+  GraphCanvas, 
   useGraphStore,
   AddNode, 
   ClearCanvas 
@@ -195,7 +195,7 @@ const App = () => {
   return (
     <div style={{ width: '100%', height: '600px', position: 'relative' }}>
       <GraphProvider>
-        <GraphEditor>
+        <GraphCanvas>
           <div style={{ 
             position: 'absolute', 
             top: '10px', 
@@ -208,7 +208,7 @@ const App = () => {
             <ClearCanvas />
           </div>
           <InfoPanel />
-        </GraphEditor>
+        </GraphCanvas>
       </GraphProvider>
     </div>
   );