(obj: T): T;
+```
+
+#### 参数
+
+| 参数名 | 类型 | 描述 |
+| ------ | ---- | -------------- |
+| `obj` | T | 要深拷贝的对象 |
+
+#### 返回值
+
+| 类型 | 描述 |
+| ---- | -------------- |
+| T | 原对象的深拷贝 |
diff --git a/packages/studio-flow-editor/docs/components.md b/packages/studio-flow-editor/docs/components.md
new file mode 100644
index 000000000..964bc9390
--- /dev/null
+++ b/packages/studio-flow-editor/docs/components.md
@@ -0,0 +1,218 @@
+---
+order: 4
+title: 组件文档
+---
+# 组件文档
+
+`@graphscope/studio-flow-editor` 提供了几个预构建的组件，可以直接集成到您的应用中，简化图编辑器的操作与控制。
+
+## AddNode
+
+### 描述
+
+一个添加新节点的按钮组件。
+
+### 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 描述 |
+|-------|------|------|-------|------|
+| `style` | React.CSSProperties | 否 | - | 内联样式对象 |
+
+### 示例
+
+```bash
+import { AddNode } from '@graphscope/studio-flow-editor';
+
+// 基本用法
+
+
+// 自定义样式和文本
+
+```
+
+## ClearCanvas
+
+### 描述
+
+一个清除画布或删除选中元素的按钮组件。
+
+### 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 描述 |
+|-------|------|------|-------|------|
+| `style` | React.CSSProperties | 否 | - | 内联样式对象 |
+
+### 行为
+
+- 如果有选中的节点，会删除这些节点及相关边
+- 如果有选中的边，会删除这些边
+- 如果没有选中任何元素，会清空整个画布
+
+### 示例
+
+```bash
+import { ClearCanvas } from '@graphscope/studio-flow-editor';
+
+// 基本用法
+
+
+// 自定义样式
+
+```
+
+## ExportSvg
+
+### 描述
+
+一个导出图为SVG文件的按钮组件。
+
+### 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 描述 |
+|-------|------|------|-------|------|
+| `style` | React.CSSProperties | 否 | - | 内联样式对象 |
+| `fileName` | string | 'graph.svg' | - | 导出文件名 |
+| `parentId` | string | 否 | - | 当页面内存在多个图形实例是，可指定导出图上层dom的id |
+### 示例
+
+```bash
+import { ExportSvg } from '@graphscope/studio-flow-editor';
+
+// 基本用法
+
+
+// 自定义样式和文件名
+
+```
+
+## 组合使用
+
+这些组件通常组合在一起使用，创建一个完整的工具栏：
+
+```jsx
+import React from 'react';
+import {
+ GraphProvider,
+ GraphCanvas,
+ AddNode,
+ ClearCanvas,
+ ExportSvg
+} from '@graphscope/studio-flow-editor';
+
+const ToolbarStyle = {
+ position: 'absolute',
+ top: '10px',
+ right: '10px',
+ zIndex: 10,
+ display: 'flex',
+ gap: '8px',
+ background: 'white',
+ padding: '8px',
+ borderRadius: '4px',
+ boxShadow: '0 2px 6px rgba(0,0,0,0.1)'
+};
+
+const ButtonStyle = {
+ padding: '4px 12px',
+ borderRadius: '2px',
+ cursor: 'pointer',
+ border: '1px solid #d9d9d9',
+ backgroundColor: '#fff',
+};
+
+const App = () => {
+ return (
+
+ );
+};
+
+export default App;
+```
+
+## 自定义组件集成
+
+您也可以将这些内置组件与自定义组件结合使用，创建更丰富的控制面板：
+
+```jsx
+import React from 'react';
+import {
+ GraphProvider,
+ GraphCanvas,
+ useGraphStore,
+ AddNode,
+ ClearCanvas
+} from '@graphscope/studio-flow-editor';
+
+// 自定义信息面板
+const InfoPanel = () => {
+ const { store } = useGraphStore();
+
+ return (
+
+
节点数量: {store.nodes.length}
+
边数量: {store.edges.length}
+ {store.currentId && (
+
当前选中: {store.currentType === 'nodes' ? '节点' : '边'} {store.currentId}
+ )}
+
+ 请选择一个节点或边来编辑标签
+
+ );
+ }
+
+ // 处理标签变更
+ const handleLabelChange = e => {
+ setLabelValue(e.target.value);
+ };
+
+ // 应用标签变更
+ const applyLabelChange = () => {
+ updateStore(draft => {
+ if (currentType === 'nodes') {
+ const node = draft.nodes.find(n => n.id === currentId);
+ if (node) {
+ node.data.label = labelValue;
+ }
+ } else {
+ const edge = draft.edges.find(e => e.id === currentId);
+ if (edge) {
+ edge.data.label = labelValue;
+ }
+ }
+ });
+ };
+
+ return (
+
+
编辑 {currentType === 'nodes' ? '节点' : '边'} 标签
+
+
+
+
+
+
+ );
+};
+
+// 应用组件
+const App = () => {
+ return (
+
+
+
+
+
+
+
+
+ );
+};
+
+export default App;
+```
+
+## 示例二：生成Cypher查询语句
+
+这个示例展示了如何根据图编辑器中的节点和边生成Cypher查询语句。
+
+```jsx
+import React, { useState, useEffect } from 'react';
+import { MiniMap, Background } from 'reactflow';
+import { GraphProvider, GraphCanvas, useGraphStore, useAddNode, useClearCanvas } from '@graphscope/studio-flow-editor';
+
+// Cypher生成器组件
+const CypherGenerator = () => {
+ const { store } = useGraphStore();
+ const { nodes, edges } = store;
+ const [cypherQuery, setCypherQuery] = useState('');
+
+ // 当节点或边变化时，生成Cypher查询
+ useEffect(() => {
+ if (nodes.length === 0) {
+ setCypherQuery('// 请添加节点');
+ return;
+ }
+
+ // 生成MATCH语句
+ const matchClauses = nodes.map((node, index) => {
+ // 使用节点标签作为节点类型，默认为"Node"
+ const nodeLabel = node.data.label || 'Node';
+ // 使用"n0", "n1"等作为变量名
+ const variableName = `n${index}`;
+
+ // 生成属性对象
+ const properties = node.data.properties
+ ? Object.entries(node.data.properties)
+ .map(([key, value]) => `${key}: ${typeof value === 'string' ? `"${value}"` : value}`)
+ .join(', ')
+ : '';
+
+ const propertiesClause = properties ? `{${properties}}` : '';
+
+ // 返回完整的匹配模式
+ return `MATCH (${variableName}:${nodeLabel.replace(/\s+/g, '_')}${propertiesClause})`;
+ });
+
+ // 生成关系语句(WHERE子句)
+ const whereClauses = edges
+ .map((edge, index) => {
+ // 找到源节点和目标节点的索引
+ const sourceIndex = nodes.findIndex(node => node.id === edge.source);
+ const targetIndex = nodes.findIndex(node => node.id === edge.target);
+
+ if (sourceIndex === -1 || targetIndex === -1) return null;
+
+ // 使用边标签作为关系类型，默认为"RELATES_TO"
+ const relationshipType = (edge.data.label || 'RELATES_TO').replace(/\s+/g, '_');
+
+ // 返回关系条件
+ return `MATCH (n${sourceIndex})-[:${relationshipType}]->(n${targetIndex})`;
+ })
+ .filter(Boolean); // 过滤掉无效的关系
+
+ // 生成RETURN语句
+ const returnClause = `RETURN ${nodes.map((_, index) => `n${index}`).join(', ')}`;
+
+ // 组合完整查询
+ const query = [...matchClauses, ...whereClauses, returnClause].join('\n');
+
+ setCypherQuery(query);
+ }, [nodes, edges]);
+
+ // 复制查询到剪贴板
+ const copyToClipboard = () => {
+ navigator.clipboard
+ .writeText(cypherQuery)
+ .then(() => {
+ alert('已复制到剪贴板');
+ })
+ .catch(err => {
+ console.error('复制失败:', err);
+ });
+ };
+
+ return (
+
+
+ Cypher查询
+
+
+
+ {cypherQuery}
+
+
+
+
+
+
+ );
+};
+
+// 节点数据面板
+const NodeDataPanel = () => {
+ const { store, updateStore } = useGraphStore();
+ const { currentId, currentType, nodes } = store;
+ const [properties, setProperties] = useState({});
+ const [newKey, setNewKey] = useState('');
+ const [newValue, setNewValue] = useState('');
+
+ // 当选中节点变化时，更新属性面板
+ useEffect(() => {
+ if (currentId && currentType === 'nodes') {
+ const currentNode = nodes.find(node => node.id === currentId);
+ if (currentNode && currentNode.data) {
+ setProperties(currentNode.data.properties || {});
+ } else {
+ setProperties({});
+ }
+ } else {
+ setProperties({});
+ }
+ }, [currentId, currentType, nodes]);
+
+ // 没有选中节点时不显示面板
+ if (!currentId || currentType !== 'nodes') {
+ return null;
+ }
+
+ // 添加新属性
+ const addProperty = () => {
+ if (!newKey.trim()) return;
+
+ // 尝试转换为数字
+ let parsedValue = newValue;
+ if (!isNaN(Number(newValue))) {
+ parsedValue = Number(newValue);
+ }
+
+ const updatedProperties = {
+ ...properties,
+ [newKey]: parsedValue,
+ };
+
+ setProperties(updatedProperties);
+ updateStore(draft => {
+ const node = draft.nodes.find(n => n.id === currentId);
+ if (node) {
+ node.data.properties = updatedProperties;
+ }
+ });
+
+ // 清空输入框
+ setNewKey('');
+ setNewValue('');
+ };
+
+ // 删除属性
+ const removeProperty = key => {
+ const { [key]: _, ...rest } = properties;
+ setProperties(rest);
+
+ updateStore(draft => {
+ const node = draft.nodes.find(n => n.id === currentId);
+ if (node) {
+ node.data.properties = rest;
+ }
+ });
+ };
+
+ return (
+
+
节点属性编辑
+
+ {/* 现有属性 */}
+
+ {Object.entries(properties).length === 0 ? (
+
暂无属性
+ ) : (
+ Object.entries(properties).map(([key, value]) => (
+
+
+ {key}: {String(value)}
+
+
+
+ ))
+ )}
+
+
+ {/* 添加新属性 */}
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default App;
+```
+
+## 示例三：结合多个功能的完整应用
+
+以下是一个结合了多项功能的完整应用示例，包括：
+
+- 节点和边标签编辑
+- 节点属性编辑
+- Cypher查询生成
+- 图数据导入/导出
+- 自定义样式
+
+```jsx
+import React, { useState, useEffect } from 'react';
+import {
+ GraphProvider,
+ GraphCanvas,
+ useGraphStore,
+ useAddNode,
+ useClearCanvas,
+ useExportSvg,
+} from '@graphscope/studio-flow-editor';
+
+// 主应用组件
+const GraphApplication = () => {
+ return (
+
+ );
+};
+
+// 主工具栏
+const MainToolbar = () => {
+ const {handleAddVertex} = useAddNode();
+ const { handleClear } = useClearCanvas();
+ const {exportSvg} = useExportSvg();
+ const { store, updateStore } = useGraphStore();
+
+ // 导出图数据为JSON
+ const exportJSON = () => {
+ const { nodes, edges } = store;
+ const dataStr = JSON.stringify({ nodes, edges }, null, 2);
+ const dataUri = `data:application/json;charset=utf-8,${encodeURIComponent(dataStr)}`;
+
+ const exportLink = document.createElement('a');
+ exportLink.setAttribute('href', dataUri);
+ exportLink.setAttribute('download', 'graph-data.json');
+ document.body.appendChild(exportLink);
+ exportLink.click();
+ document.body.removeChild(exportLink);
+ };
+
+ // 导入JSON数据
+ const importJSON = () => {
+ const input = document.createElement('input');
+ input.type = 'file';
+ input.accept = '.json';
+
+ input.onchange = e => {
+ const file = e.target.files[0];
+ if (!file) return;
+
+ const reader = new FileReader();
+ reader.onload = event => {
+ try {
+ const { nodes, edges } = JSON.parse(event.target.result);
+ updateStore(draft => {
+ draft.nodes = nodes;
+ draft.edges = edges;
+ });
+ } catch (error) {
+ console.error('导入失败:', error);
+ alert('导入失败: ' + error.message);
+ }
+ };
+ reader.readAsText(file);
+ };
+
+ input.click();
+ };
+
+ return (
+
+
+
+
+
+
+
+ );
+};
+
+// 属性面板
+const PropertiesPanel = () => {
+ const { store, updateStore } = useGraphStore();
+ const { currentId, currentType, nodes, edges } = store;
+ const [labelValue, setLabelValue] = useState('');
+ const [properties, setProperties] = useState({});
+ const [newKey, setNewKey] = useState('');
+ const [newValue, setNewValue] = useState('');
+
+ // 当选中元素变化时，更新面板
+ useEffect(() => {
+ if (currentId && currentType) {
+ const currentItem =
+ currentType === 'nodes' ? nodes.find(item => item.id === currentId) : edges.find(item => item.id === currentId);
+
+ if (currentItem && currentItem.data) {
+ setLabelValue(currentItem.data.label || '');
+ setProperties(currentItem.data.properties || {});
+ }
+ } else {
+ setLabelValue('');
+ setProperties({});
+ }
+ }, [currentId, currentType, nodes, edges]);
+
+ if (!currentId) return null;
+
+ // 更新标签
+ const updateLabel = () => {
+ updateStore(draft => {
+ if (currentType === 'nodes') {
+ const node = draft.nodes.find(n => n.id === currentId);
+ if (node) {
+ node.data.label = labelValue;
+ }
+ } else {
+ const edge = draft.edges.find(e => e.id === currentId);
+ if (edge) {
+ edge.data.label = labelValue;
+ }
+ }
+ });
+ };
+
+ // 添加属性
+ const addProperty = () => {
+ if (!newKey.trim()) return;
+
+ // 尝试转换为数字
+ let parsedValue = newValue;
+ if (!isNaN(Number(newValue))) {
+ parsedValue = Number(newValue);
+ }
+
+ const updatedProperties = {
+ ...properties,
+ [newKey]: parsedValue,
+ };
+
+ setProperties(updatedProperties);
+ updateStore(draft => {
+ if (currentType === 'nodes') {
+ const node = draft.nodes.find(n => n.id === currentId);
+ if (node) {
+ node.data.properties = updatedProperties;
+ }
+ } else {
+ const edge = draft.edges.find(e => e.id === currentId);
+ if (edge) {
+ edge.data.properties = updatedProperties;
+ }
+ }
+ });
+
+ setNewKey('');
+ setNewValue('');
+ };
+
+ // 删除属性
+ const removeProperty = key => {
+ const { [key]: _, ...rest } = properties;
+ setProperties(rest);
+
+ updateStore(draft => {
+ if (currentType === 'nodes') {
+ const node = draft.nodes.find(n => n.id === currentId);
+ if (node) {
+ node.data.properties = rest;
+ }
+ } else {
+ const edge = draft.edges.find(e => e.id === currentId);
+ if (edge) {
+ edge.data.properties = rest;
+ }
+ }
+ });
+ };
+
+ return (
+
+
+ {currentType === 'nodes' ? '节点属性' : '边属性'}
+
+
+ {/* 标签编辑 */}
+
+
标签:
+
+ setLabelValue(e.target.value)}
+ style={{
+ padding: '6px 8px',
+ border: '1px solid #d9d9d9',
+ borderRadius: '2px',
+ flex: 1,
+ }}
+ />
+
+
+
+
+ {/* 属性列表 */}
+
+
属性:
+ {Object.entries(properties).length === 0 ? (
+
暂无属性
+ ) : (
+
+ {Object.entries(properties).map(([key, value]) => (
+
+
+ {key}: {String(value)}
+
+
+
+ ))}
+
+ )}
+
+ {/* 添加新属性 */}
+
+
+
+
+ Cypher查询
+
+
+
+ {cypherQuery}
+
+
+
+ 节点: {nodes.length} | 边: {edges.length}
+
+
{currentId && `当前选中: ${currentType === 'nodes' ? '节点' : '边'} ${currentId}`}
+
+
+
+
节点数量: {store.nodes.length}
+
边数量: {store.edges.length}
+
+
节点数量: {store.nodes.length}
+
边数量: {store.edges.length}
+
+
+
+
+
+ );
+};
+
+export default App;
+```
diff --git a/packages/studio-flow-editor/docs/utils.md b/packages/studio-flow-editor/docs/utils.md
new file mode 100644
index 000000000..f5d0d9b85
--- /dev/null
+++ b/packages/studio-flow-editor/docs/utils.md
@@ -0,0 +1,157 @@
+---
+order: 7
+title: 工具函数
+---
+# 工具函数
+
+`@graphscope/studio-flow-editor` 包提供了多个工具函数，帮助您处理图编辑中常见的任务。
+
+## 布局工具
+
+### getBBox
+
+计算一组节点的边界框，用于确定需要可见的区域。
+
+```typescript
+function getBBox(nodes: Node[]): {
+ x: number;
+ y: number;
+ width: number;
+ height: number;
+};
+```
+
+**示例：**
+```bash
+import { getBBox } from '@graphscope/studio-flow-editor';
+
+const nodes = [
+ { id: '1', position: { x: 100, y: 100 } },
+ { id: '2', position: { x: 200, y: 300 } }
+];
+
+const bbox = getBBox(nodes);
+// 返回: { x: 100, y: 100, width: 200, height: 300 }
+```
+
+## 标签工具
+
+### createNodeLabel
+
+为新节点生成唯一标签。
+
+```typescript
+function createNodeLabel(): string;
+```
+
+**示例：**
+```bash
+import { createNodeLabel } from '@graphscope/studio-flow-editor';
+
+const newNodeLabel = createNodeLabel();
+// 返回: "Vertex_1", "Vertex_2", 等
+```
+
+### createEdgeLabel
+
+为新边生成唯一标签。
+
+```bash
+function createEdgeLabel(): string;
+```
+
+**示例：**
+```bash
+import { createEdgeLabel } from '@graphscope/studio-flow-editor';
+
+const newEdgeLabel = createEdgeLabel();
+// 返回: "Edge_1", "Edge_2", 等
+```
+
+### resetIndex
+
+重置用于生成节点和边标签的内部计数器。
+
+```bash
+function resetIndex(): void;
+```
+
+**示例：**
+```bash
+import { resetIndex } from '@graphscope/studio-flow-editor';
+
+resetIndex();
+// 下次调用 createNodeLabel() 将返回 "Vertex_1"
+```
+
+## 数据处理工具
+
+### fakeSnapshot
+
+创建对象的深拷贝。当您需要克隆图数据以避免意外修改时，这非常有用。
+
+```bash
+function fakeSnapshot(obj: T): T;
+```
+
+**示例：**
+```bash
+import { fakeSnapshot } from '@graphscope/studio-flow-editor';
+
+const originalNodes = [...];
+const nodesCopy = fakeSnapshot(originalNodes);
+// 现在可以修改 nodesCopy 而不会影响 originalNodes
+```
+
+## 类型定义
+
+该包还导出了几个在处理图数据时有用的 TypeScript 类型定义：
+
+### INodeData
+
+```typescript
+interface INodeData {
+ label: string;
+ disabled?: boolean;
+ properties?: Property[];
+ dataFields?: string[];
+ delimiter?: string;
+ datatype?: 'csv' | 'odps';
+ filelocation?: string;
+ [key: string]: any;
+}
+```
+
+### IEdgeData
+
+```typescript
+interface IEdgeData {
+ label: string;
+ disabled?: boolean;
+ saved?: boolean;
+ properties?: Property[];
+ source_vertex_fields?: Property;
+ target_vertex_fields?: Property;
+ dataFields?: string[];
+ delimiter?: string;
+ datatype?: 'csv' | 'odps';
+ filelocation?: string;
+ _extra?: {
+ type?: string;
+ offset?: string;
+ isLoop: boolean;
+ isRevert?: boolean;
+ isPoly?: boolean;
+ index?: number;
+ count?: number;
+ };
+ [key: string]: any;
+}
+```
+
+### ISchemaNode 和 ISchemaEdge
+
+```typescript
+type ISchemaNode = Node;
+type ISchemaEdge = Edge & { data: IEdgeData };
+```
diff --git a/packages/studio-flow-editor/index.html b/packages/studio-flow-editor/index.html
new file mode 100644
index 000000000..c96f69e74
--- /dev/null
+++ b/packages/studio-flow-editor/index.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+ Studio Graph Editor
+
+
+
+
+
+
+
diff --git a/packages/studio-flow-editor/index.tsx b/packages/studio-flow-editor/index.tsx
new file mode 100644
index 000000000..e786751d2
--- /dev/null
+++ b/packages/studio-flow-editor/index.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { GraphProvider, GraphCanvas, useGraphStore, useAddNode } from './src/index';
+import { createRoot } from 'react-dom/client';
+import { Button } from 'antd';
+
+interface IAppProps {}
+const Edit = () => {
+ const { store } = useGraphStore();
+ const { handleAddVertex } = useAddNode();
+ const { nodes } = store;
+ const printData = () => {
+ console.log('nodes::: ', nodes);
+ };
+ return (
+ <>
+
+
+
+ );
+};
+const DrawGraph: React.FunctionComponent = props => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+ );
+};
+
+createRoot(document.getElementById('root')!).render();
diff --git a/packages/studio-flow-editor/package.json b/packages/studio-flow-editor/package.json
new file mode 100644
index 000000000..53e79400b
--- /dev/null
+++ b/packages/studio-flow-editor/package.json
@@ -0,0 +1,55 @@
+{
+ "name": "@graphscope/studio-flow-editor",
+ "version": "0.1.13",
+ "description": "",
+ "main": "lib/index.js",
+ "module": "es/index.js",
+ "types": "lib/index.d.ts",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/GraphScope/portal.git"
+ },
+ "files": [
+ "es",
+ "lib",
+ "dist"
+ ],
+ "publishConfig": {
+ "access": "public",
+ "registry": "https://registry.npmjs.org/"
+ },
+ "scripts": {
+ "start": "father dev",
+ "build": "father build",
+ "start:site": "vite dev",
+ "build:site": "vite build && tsc"
+ },
+ "peerDependencies": {
+ "react": "18.2.0",
+ "react-dom": "18.2.0"
+ },
+ "dependencies": {
+ "@graphscope/studio-components": "workspace:*",
+ "@graphscope/use-zustand": "workspace:*",
+ "antd": "^5.22.2",
+ "d3-force": "latest",
+ "dagre": "latest",
+ "html-to-image": "^1.11.11",
+ "immer": "^10.1.1",
+ "lodash": "^4.17.21",
+ "react-intl": "^6.6.1",
+ "reactflow": "latest",
+ "rxjs": "^7.8.1",
+ "uuid": "^9.0.1",
+ "valtio": "2.0.0-rc.1",
+ "zustand": "^4.5.5"
+ },
+ "devDependencies": {
+ "@types/d3-force": "latest",
+ "@types/lodash": "^4.14.202",
+ "@vitejs/plugin-react": "^4.2.1",
+ "vite": "^5.4.16"
+ },
+ "author": "",
+ "license": "ISC"
+}
diff --git a/packages/studio-flow-editor/src/app/button-controller/add-node.tsx b/packages/studio-flow-editor/src/app/button-controller/add-node.tsx
new file mode 100644
index 000000000..67625d9ce
--- /dev/null
+++ b/packages/studio-flow-editor/src/app/button-controller/add-node.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Button, Tooltip } from 'antd';
+import { Icons } from '@graphscope/studio-components';
+import { FormattedMessage } from 'react-intl';
+import { useGraphStore } from '../store';
+import { useAddNode } from '../hooks/useAddNode';
+
+const AddNodeIcon = Icons.AddNode;
+
+interface IAddNodeProps {
+ style?: React.CSSProperties;
+ noDefaultLabel?: boolean;
+}
+let addNodeIndex = 0;
+
+const AddNode: React.FunctionComponent = props => {
+ const { style, noDefaultLabel } = props;
+ const { store } = useGraphStore();
+ const { elementOptions } = store;
+ const disabled = !elementOptions.isConnectable;
+ const tooltipText = disabled ? (
+
+ ) : (
+
+ );
+ const { handleAddVertex } = useAddNode({ noDefaultLabel });
+
+ return (
+
+
+
+ );
+};
+
+export default AddNode;
diff --git a/packages/studio-importor/src/app/button-controller/clear-canvas.tsx b/packages/studio-flow-editor/src/app/button-controller/clear-canvas.tsx
similarity index 63%
rename from packages/studio-importor/src/app/button-controller/clear-canvas.tsx
rename to packages/studio-flow-editor/src/app/button-controller/clear-canvas.tsx
index 8c90fd8f5..d0559a40f 100644
--- a/packages/studio-importor/src/app/button-controller/clear-canvas.tsx
+++ b/packages/studio-flow-editor/src/app/button-controller/clear-canvas.tsx
@@ -1,44 +1,36 @@
import * as React from 'react';
import { Button, Tooltip } from 'antd';
-
+import { useGraphStore } from '../store';
import { Icons, useStudioProvier } from '@graphscope/studio-components';
-import { resetIndex } from '../utils';
import { FormattedMessage } from 'react-intl';
+import { useClearCanvas } from '../hooks/useClearCanvas';
interface IAddNodeProps {
style?: React.CSSProperties;
}
-import { useContext } from '@graphscope/use-zustand';
const ClearCanvas: React.FunctionComponent = props => {
const { style } = props;
- const { updateStore, store } = useContext();
+ const { store } = useGraphStore();
const { elementOptions } = store;
- const { isLight } = useStudioProvier();
+ const { algorithm } = useStudioProvier();
+ const isLight = algorithm === 'defaultAlgorithm';
/** svg pathFill */
let pathFill = () => {
if (!isLight) {
- return elementOptions.isEditable ? '#585858' : '#fff';
+ return elementOptions.isEditable ? '#fff' : '#585858';
} else {
- return elementOptions.isEditable ? '#ddd' : '#000';
+ return elementOptions.isEditable ? '#000' : '#ddd';
}
};
- const tooltipText = elementOptions.isEditable ? (
+ const tooltipText = !elementOptions.isEditable ? (
) : (
);
-
- const handleClear = () => {
- resetIndex();
- updateStore(draft => {
- draft.nodes = [];
- draft.edges = [];
- });
- };
-
+ const { handleClear } = useClearCanvas();
return (
+ );
+};
+
+export default ExportImage;
diff --git a/packages/studio-flow-editor/src/app/button-controller/index.tsx b/packages/studio-flow-editor/src/app/button-controller/index.tsx
new file mode 100644
index 000000000..77aa0aad5
--- /dev/null
+++ b/packages/studio-flow-editor/src/app/button-controller/index.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Toolbar } from '@graphscope/studio-components';
+import ClearCanvas from './clear-canvas';
+import AddNode from './add-node';
+import ExportImage from './export-image';
+
+const ButtonController: React.FunctionComponent<{ noDefaultLabel?: boolean }> = props => {
+ return (
+
+
+
+
+
+ );
+};
+
+export default ButtonController;
diff --git a/packages/studio-importor/src/app/elements/arrow-marker/index.tsx b/packages/studio-flow-editor/src/app/elements/arrow-marker/index.tsx
similarity index 100%
rename from packages/studio-importor/src/app/elements/arrow-marker/index.tsx
rename to packages/studio-flow-editor/src/app/elements/arrow-marker/index.tsx
diff --git a/packages/studio-importor/src/app/elements/connection-line/index.tsx b/packages/studio-flow-editor/src/app/elements/connection-line/index.tsx
similarity index 100%
rename from packages/studio-importor/src/app/elements/connection-line/index.tsx
rename to packages/studio-flow-editor/src/app/elements/connection-line/index.tsx
diff --git a/packages/studio-importor/src/app/elements/edge-types/graph-edge.tsx b/packages/studio-flow-editor/src/app/elements/edge-types/graph-edge.tsx
similarity index 96%
rename from packages/studio-importor/src/app/elements/edge-types/graph-edge.tsx
rename to packages/studio-flow-editor/src/app/elements/edge-types/graph-edge.tsx
index 6d7985671..6cf4786c7 100644
--- a/packages/studio-importor/src/app/elements/edge-types/graph-edge.tsx
+++ b/packages/studio-flow-editor/src/app/elements/edge-types/graph-edge.tsx
@@ -9,7 +9,7 @@ import {
getSmoothPath,
calculateDegree,
} from './utils';
-import { useContext } from '@graphscope/use-zustand';
+import { useGraphStore } from '../../store';
import LoopEdge from './loop-edge';
import Label from './label';
import { useStudioProvier } from '@graphscope/studio-components';
@@ -20,7 +20,7 @@ function GraphEdge(props: EdgeProps) {
const { offset = 0 } = _extra || {};
const sourceNode = useStore(useCallback(store => store.nodeInternals.get(source), [source]));
const targetNode = useStore(useCallback(store => store.nodeInternals.get(target), [target]));
- const { store } = useContext();
+ const { store } = useGraphStore();
const { currentId, theme } = store;
const { isLight } = useStudioProvier();
if (!sourceNode || !targetNode) {
diff --git a/packages/studio-importor/src/app/elements/edge-types/index.ts b/packages/studio-flow-editor/src/app/elements/edge-types/index.ts
similarity index 100%
rename from packages/studio-importor/src/app/elements/edge-types/index.ts
rename to packages/studio-flow-editor/src/app/elements/edge-types/index.ts
diff --git a/packages/studio-importor/src/app/elements/edge-types/label.tsx b/packages/studio-flow-editor/src/app/elements/edge-types/label.tsx
similarity index 96%
rename from packages/studio-importor/src/app/elements/edge-types/label.tsx
rename to packages/studio-flow-editor/src/app/elements/edge-types/label.tsx
index 69b079434..89f4d9697 100644
--- a/packages/studio-importor/src/app/elements/edge-types/label.tsx
+++ b/packages/studio-flow-editor/src/app/elements/edge-types/label.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import { EdgeLabelRenderer } from 'reactflow';
import { EditableText, useStudioProvier, useSection } from '@graphscope/studio-components';
-import { useContext } from '@graphscope/use-zustand';
+import { useGraphStore } from '../../store';
import { CheckOutlined } from '@ant-design/icons';
import { theme } from 'antd';
const { useToken } = theme;
@@ -15,7 +15,7 @@ interface ILabelProps {
const Label: React.FunctionComponent = props => {
const { id, label, style, filelocation, disabled } = props;
- const { store, updateStore } = useContext();
+ const { store, updateStore } = useGraphStore();
const { toggleRightSide } = useSection();
const { token } = useToken();
const { currentId, theme } = store;
diff --git a/packages/studio-importor/src/app/elements/edge-types/loop-edge.tsx b/packages/studio-flow-editor/src/app/elements/edge-types/loop-edge.tsx
similarity index 97%
rename from packages/studio-importor/src/app/elements/edge-types/loop-edge.tsx
rename to packages/studio-flow-editor/src/app/elements/edge-types/loop-edge.tsx
index 4eae5a0ed..ae0dbd5f7 100644
--- a/packages/studio-importor/src/app/elements/edge-types/loop-edge.tsx
+++ b/packages/studio-flow-editor/src/app/elements/edge-types/loop-edge.tsx
@@ -1,6 +1,5 @@
import React from 'react';
import type { EdgeProps } from 'reactflow';
-import { useContext } from '@graphscope/use-zustand';
import { usePathStyle } from './useStyle';
import Label from './label';
diff --git a/packages/studio-importor/src/app/elements/edge-types/table-edge.tsx b/packages/studio-flow-editor/src/app/elements/edge-types/table-edge.tsx
similarity index 100%
rename from packages/studio-importor/src/app/elements/edge-types/table-edge.tsx
rename to packages/studio-flow-editor/src/app/elements/edge-types/table-edge.tsx
diff --git a/packages/studio-importor/src/app/elements/edge-types/useStyle.ts b/packages/studio-flow-editor/src/app/elements/edge-types/useStyle.ts
similarity index 86%
rename from packages/studio-importor/src/app/elements/edge-types/useStyle.ts
rename to packages/studio-flow-editor/src/app/elements/edge-types/useStyle.ts
index e6f9ffc2f..70b400097 100644
--- a/packages/studio-importor/src/app/elements/edge-types/useStyle.ts
+++ b/packages/studio-flow-editor/src/app/elements/edge-types/useStyle.ts
@@ -1,7 +1,7 @@
-import { useContext } from '@graphscope/use-zustand';
+import {useGraphStore} from '../../store'
import { useStudioProvier } from '@graphscope/studio-components';
export const usePathStyle = (id: string) => {
- const { store } = useContext();
+ const { store } = useGraphStore();
const { currentId, theme } = store;
const isSelected = id === currentId;
const { isLight } = useStudioProvier();
diff --git a/packages/studio-importor/src/app/elements/edge-types/utils.ts b/packages/studio-flow-editor/src/app/elements/edge-types/utils.ts
similarity index 100%
rename from packages/studio-importor/src/app/elements/edge-types/utils.ts
rename to packages/studio-flow-editor/src/app/elements/edge-types/utils.ts
diff --git a/packages/studio-importor/src/app/elements/forceLayout.tsx b/packages/studio-flow-editor/src/app/elements/forceLayout.tsx
similarity index 81%
rename from packages/studio-importor/src/app/elements/forceLayout.tsx
rename to packages/studio-flow-editor/src/app/elements/forceLayout.tsx
index e0253fff1..5376278b7 100644
--- a/packages/studio-importor/src/app/elements/forceLayout.tsx
+++ b/packages/studio-flow-editor/src/app/elements/forceLayout.tsx
@@ -4,7 +4,7 @@ export interface IParams {
iterations?: number;
center?: { x: number; y: number };
}
-export function createStaticForceLayout(nodes, edges, params: IParams = {}) {
+export function createStaticForceLayout(nodes: any[], edges: any[], params: IParams = {}) {
const { iterations = 1000, center = { x: window.innerWidth / 2, y: window.innerHeight / 2 } } = params;
const edgeDistance = 250;
const nodeStrength = -1 * (edgeDistance * (edges.length === 0 ? 0.5 : 8));
@@ -27,7 +27,7 @@ export function createStaticForceLayout(nodes, edges, params: IParams = {}) {
}
// 输出最终的节点和连线的位置
- nodes.forEach(node => {
+ nodes.forEach((node: { index: any; vx: any; vy: any; position: { x: any; y: any; }; x: any; y: any; }) => {
delete node.index;
delete node.vx;
delete node.vy;
@@ -36,7 +36,7 @@ export function createStaticForceLayout(nodes, edges, params: IParams = {}) {
delete node.y;
});
- edges.forEach(edge => {
+ edges.forEach((edge: { index: any; source: { id: any; }; target: { id: any; }; }) => {
delete edge.index;
edge.source = edge.source.id;
edge.target = edge.target.id;
diff --git a/packages/studio-flow-editor/src/app/elements/index.ts b/packages/studio-flow-editor/src/app/elements/index.ts
new file mode 100644
index 000000000..aef897fe5
--- /dev/null
+++ b/packages/studio-flow-editor/src/app/elements/index.ts
@@ -0,0 +1,15 @@
+import processEdges from './processEdges';
+import { ISchemaEdge } from '../types';
+export function transformEdges(_edges: ISchemaEdge[], displayMode): ISchemaEdge[] {
+ const edges = processEdges(_edges);
+ return edges.map((item, index) => {
+ const { id, source, target, data } = item;
+ return {
+ id: id || `${source}-${target}-${index}`,
+ source,
+ target,
+ type: displayMode === 'table' ? 'smoothstep' : 'graph-edge',
+ data,
+ };
+ });
+}
diff --git a/packages/studio-importor/src/app/elements/node-types/arrow.tsx b/packages/studio-flow-editor/src/app/elements/node-types/arrow.tsx
similarity index 100%
rename from packages/studio-importor/src/app/elements/node-types/arrow.tsx
rename to packages/studio-flow-editor/src/app/elements/node-types/arrow.tsx
diff --git a/packages/studio-importor/src/app/elements/node-types/graph-node.tsx b/packages/studio-flow-editor/src/app/elements/node-types/graph-node.tsx
similarity index 97%
rename from packages/studio-importor/src/app/elements/node-types/graph-node.tsx
rename to packages/studio-flow-editor/src/app/elements/node-types/graph-node.tsx
index fcff6b572..8a4520e27 100644
--- a/packages/studio-importor/src/app/elements/node-types/graph-node.tsx
+++ b/packages/studio-flow-editor/src/app/elements/node-types/graph-node.tsx
@@ -4,7 +4,7 @@ import { theme } from 'antd';
import { CheckOutlined } from '@ant-design/icons';
import { EditableText, useStudioProvier, useSection } from '@graphscope/studio-components';
const { useToken } = theme;
-import { useContext } from '@graphscope/use-zustand';
+import {useGraphStore} from '../../store'
const R = 50;
const HALO_LINE_WIDTH = 16;
@@ -25,7 +25,7 @@ const styles = {
const GraphNode = (props: NodeProps) => {
const { data = {}, id } = props;
const { label, filelocation, disabled } = data;
- const { store, updateStore } = useContext();
+ const { store, updateStore } = useGraphStore();
const { currentId, theme, elementOptions } = store;
const { isLight } = useStudioProvier();
const { toggleRightSide, toggleLeftSide } = useSection();
diff --git a/packages/studio-importor/src/app/elements/node-types/index.ts b/packages/studio-flow-editor/src/app/elements/node-types/index.ts
similarity index 100%
rename from packages/studio-importor/src/app/elements/node-types/index.ts
rename to packages/studio-flow-editor/src/app/elements/node-types/index.ts
diff --git a/packages/studio-importor/src/app/elements/node-types/table-node.tsx b/packages/studio-flow-editor/src/app/elements/node-types/table-node.tsx
similarity index 100%
rename from packages/studio-importor/src/app/elements/node-types/table-node.tsx
rename to packages/studio-flow-editor/src/app/elements/node-types/table-node.tsx
diff --git a/packages/studio-flow-editor/src/app/elements/processEdges.tsx b/packages/studio-flow-editor/src/app/elements/processEdges.tsx
new file mode 100644
index 000000000..1fcacfb26
--- /dev/null
+++ b/packages/studio-flow-editor/src/app/elements/processEdges.tsx
@@ -0,0 +1,126 @@
+import type { ISchemaEdge } from '../types';
+function isEven(number: number) {
+ return number % 2 === 0;
+}
+
+function isOdd(number: number) {
+ return !isEven(number);
+}
+
+const POLY_DEFAULT = 30;
+const LOOP_DEFAULT = 10;
+const LOOP_LABEL_POSITION_DEFAULT = 1;
+
+/**
+ *
+ * @param edges 边的集合
+ * @param {poly,loop} 设置多边和自环多边的distance
+ */
+const processEdges = (
+ edges: ISchemaEdge[],
+ {
+ poly = POLY_DEFAULT,
+ loop = LOOP_DEFAULT,
+ loopLabelPosition = LOOP_LABEL_POSITION_DEFAULT,
+ }: {
+ /** poly distance */
+ poly?: number;
+ /** loop distance */
+ loop?: number;
+ /** loop label position based on loop edge */
+ loopLabelPosition?: number;
+ } = {
+ poly: POLY_DEFAULT,
+ loop: LOOP_DEFAULT,
+ loopLabelPosition: LOOP_LABEL_POSITION_DEFAULT,
+ },
+) => {
+ const edgesMap: { [edgeId: string]: ISchemaEdge[] } = {};
+ /** 计算得到 edgesMap */
+ edges.forEach((item, index) => {
+ const edge = { ...item };
+ const { source, target } = edge;
+ const groupId = `${source}-${target}`;
+ const revertGroupId = `${target}-${source}`;
+ /** 存储edge */
+ if (edgesMap[groupId]) {
+ edgesMap[groupId].push(edge);
+ } else if (edgesMap[revertGroupId]) {
+ edgesMap[revertGroupId].push(edge);
+ } else {
+ edgesMap[groupId] = [edge];
+ }
+ });
+
+ const edgeGroups = Object.values(edgesMap);
+ const newEdges: ISchemaEdge[] = [];
+ edgeGroups.forEach(edges => {
+ const isMultipleEdge = edges.length > 1;
+ // 说明是多边的情况
+ if (isMultipleEdge) {
+ const isEvenCount = isEven(edges.length);
+ edges.forEach((edge, i: number) => {
+ const { source, target, data } = edge;
+
+ const revertGroupId = `${target}-${source}`;
+ const isLoop = source === target;
+ const isRevert = !!edgesMap[revertGroupId];
+ const index = i;
+ let distance;
+ if (isEvenCount) {
+ // 奇数
+ const idx = Math.ceil((index + 1) / 2);
+ distance = poly * idx;
+ } else {
+ // 偶数
+ const calculateIdx = isOdd(index) ? index + 1 : index;
+ const idx = Math.ceil(calculateIdx / 2);
+ distance = poly * idx;
+ }
+ let offset = isEven(index) ? distance : -distance;
+ let type = 'poly';
+ // // 反向边需要revert
+ if (isRevert) {
+ offset = -offset;
+ }
+ if (isLoop) {
+ type = 'loop';
+ offset = index * loop;
+ }
+ newEdges.push({
+ ...edge,
+ data: {
+ ...data,
+ _extra: {
+ count: edges.length,
+ index: index,
+ type: type,
+ isPoly: true,
+ isLoop: isLoop,
+ offset: offset.toString(),
+ isRevert: isRevert,
+ },
+ },
+ });
+ });
+ } else {
+ const [edge] = edges;
+ const { source, target, data } = edge;
+ newEdges.push({
+ ...edge,
+ data: {
+ ...data,
+ _extra: {
+ count: 1,
+ index: 0,
+ isLoop: source === target,
+ },
+ },
+ });
+ }
+ });
+
+ return newEdges;
+};
+
+export default processEdges;
diff --git a/packages/studio-flow-editor/src/app/hooks/index.ts b/packages/studio-flow-editor/src/app/hooks/index.ts
new file mode 100644
index 000000000..ce6de1b4d
--- /dev/null
+++ b/packages/studio-flow-editor/src/app/hooks/index.ts
@@ -0,0 +1,3 @@
+export { useAddNode } from './useAddNode';
+export { useClearCanvas } from './useClearCanvas';
+export { useExportSvg } from './useExportSvg';
diff --git a/packages/studio-flow-editor/src/app/hooks/useAddNode.ts b/packages/studio-flow-editor/src/app/hooks/useAddNode.ts
new file mode 100644
index 000000000..280025419
--- /dev/null
+++ b/packages/studio-flow-editor/src/app/hooks/useAddNode.ts
@@ -0,0 +1,36 @@
+import { useRef } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { useReactFlow } from 'reactflow';
+import { useGraphStore } from '../store';
+import { createNodeLabel } from '../utils';
+
+export const useAddNode = ({ noDefaultLabel }: { noDefaultLabel?: boolean } = {}) => {
+ const addNodeIndexRef = useRef(0);
+ const { setCenter } = useReactFlow();
+ const { updateStore } = useGraphStore();
+ const handleAddVertex = (position?: { x: number; y: number }) => {
+
+ updateStore(draft => {
+ const label = noDefaultLabel ? '' : createNodeLabel();
+ const x = addNodeIndexRef.current * 200;
+ const y = addNodeIndexRef.current * 100;
+ addNodeIndexRef.current++;
+ draft.nodes = [
+ ...draft.nodes,
+ {
+ id: uuidv4(),
+ position: position || {
+ x,
+ y,
+ },
+ type: 'graph-node',
+ data: { label },
+ },
+ ];
+
+ setCenter(x + 100 / 2, y + 100 / 2, { duration: 600, zoom: 1 });
+ });
+ };
+
+ return { handleAddVertex };
+};
diff --git a/packages/studio-flow-editor/src/app/hooks/useClearCanvas.ts b/packages/studio-flow-editor/src/app/hooks/useClearCanvas.ts
new file mode 100644
index 000000000..585cd0278
--- /dev/null
+++ b/packages/studio-flow-editor/src/app/hooks/useClearCanvas.ts
@@ -0,0 +1,54 @@
+import { useGraphStore } from '../store';
+import { resetIndex } from '../utils';
+
+export const useClearCanvas = () => {
+ const { updateStore, store } = useGraphStore();
+ const { selectedNodeIds, selectedEdgeIds } = store;
+
+ const handleClear = () => {
+ // 如果有选中的节点或边
+ if ((selectedNodeIds && selectedNodeIds.length > 0) ||
+ (selectedEdgeIds && selectedEdgeIds.length > 0)) {
+
+ updateStore(draft => {
+ // 如果有选中的节点
+ if (selectedNodeIds && selectedNodeIds.length > 0) {
+ // 创建一个选中节点的集合，用于快速查找
+ const selectedNodeIdSet = new Set(selectedNodeIds);
+
+ // 删除选中的节点
+ draft.nodes = draft.nodes.filter(node => !selectedNodeIdSet.has(node.id));
+
+ // 删除与选中节点相关的边
+ draft.edges = draft.edges.filter(
+ edge => !selectedNodeIdSet.has(edge.source) && !selectedNodeIdSet.has(edge.target)
+ );
+ }
+
+ // 如果有选中的边
+ if (selectedEdgeIds && selectedEdgeIds.length > 0) {
+ // 创建一个选中边的集合，用于快速查找
+ const selectedEdgeIdSet = new Set(selectedEdgeIds);
+
+ // 删除选中的边
+ draft.edges = draft.edges.filter(edge => !selectedEdgeIdSet.has(edge.id));
+ }
+
+ // 清除选中状态
+ if (draft.selectedNodeIds) draft.selectedNodeIds = [];
+ if (draft.selectedEdgeIds) draft.selectedEdgeIds = [];
+ });
+ } else {
+ // 如果没有选中任何节点或边，则清空所有
+ resetIndex();
+ updateStore(draft => {
+ draft.nodes = [];
+ draft.edges = [];
+ if (draft.selectedNodeIds) draft.selectedNodeIds = [];
+ if (draft.selectedEdgeIds) draft.selectedEdgeIds = [];
+ });
+ }
+ };
+
+ return { handleClear };
+};
diff --git a/packages/studio-flow-editor/src/app/hooks/useExportSvg.ts b/packages/studio-flow-editor/src/app/hooks/useExportSvg.ts
new file mode 100644
index 000000000..4f11321bb
--- /dev/null
+++ b/packages/studio-flow-editor/src/app/hooks/useExportSvg.ts
@@ -0,0 +1,19 @@
+import { Utils } from '@graphscope/studio-components';
+import { toSvg } from 'html-to-image';
+
+export const useExportSvg = () => {
+ const exportSvg = async ({ name = 'model.svg', parentId = '' }: { name?: string; parentId?: string } = {}) => {
+ let viewBox: HTMLDivElement | null = null;
+ if(parentId){
+ viewBox = document.querySelector('#'+parentId+' .react-flow__viewport') as HTMLDivElement;
+ }else{
+ viewBox = document.querySelector('.react-flow__viewport') as HTMLDivElement;
+ }
+ if (viewBox) {
+ const dataUrl = await toSvg(viewBox, {});
+ Utils.downloadImage(dataUrl, name);
+ }
+ };
+
+ return { exportSvg };
+};
diff --git a/packages/studio-flow-editor/src/app/hooks/useInteractive.ts b/packages/studio-flow-editor/src/app/hooks/useInteractive.ts
new file mode 100644
index 000000000..e347a2f57
--- /dev/null
+++ b/packages/studio-flow-editor/src/app/hooks/useInteractive.ts
@@ -0,0 +1,232 @@
+import { useCallback, useEffect, useRef } from 'react';
+import {
+ useReactFlow,
+ applyEdgeChanges,
+ applyNodeChanges,
+ getNodesBounds,
+ ReactFlowInstance,
+ OnConnectStartParams,
+ OnConnectEnd,
+ useOnSelectionChange,
+} from 'reactflow';
+import { v4 as uuidv4 } from 'uuid';
+import { createStaticForceLayout } from '../elements/forceLayout';
+import { transformEdges } from '../elements';
+import { fakeSnapshot } from '../utils/index';
+import type { NodeChange, EdgeChange, NodePositionChange } from 'reactflow';
+import { useGraphStore } from '../store';
+import { ISchemaEdge } from '../types';
+import { getBBox, createEdgeLabel, createNodeLabel } from '../utils';
+
+const useInteractive = props => {
+ const { store, updateStore } = useGraphStore();
+ const { handleNodesChange, handleEdgesChange, onSelectionChange, isPreview, noDefaultLabel } = props;
+ const { nodes, edges, nodePositionChange, hasLayouted, elementOptions, displayMode } = store;
+ const { screenToFlowPosition, fitBounds } = useReactFlow();
+ const connectingNodeId = useRef(null);
+ const timerRef = useRef(null);
+ const tempRef = useRef([]);
+
+ const onConnectStart = useCallback(
+ (_: any, { nodeId }: OnConnectStartParams) => {
+ connectingNodeId.current = nodeId;
+ if (!elementOptions.isConnectable) return;
+ },
+ [elementOptions.isConnectable],
+ );
+
+ const onConnectEnd: OnConnectEnd = useCallback(
+ event => {
+ if (!connectingNodeId.current) return;
+ if (!elementOptions.isConnectable) return;
+
+ const target = event.target as HTMLElement;
+ const targetIsPane = target.classList.contains('react-flow__pane');
+ if (targetIsPane) {
+ const nodeId = uuidv4();
+ const edgeId = uuidv4();
+ const position =
+ 'clientX' in event
+ ? {
+ x: event.clientX,
+ y: event.clientY,
+ }
+ : {
+ x: event.touches[0].clientX,
+ y: event.touches[0].clientY,
+ };
+ const newPosition = screenToFlowPosition(position);
+ const newNode = {
+ id: nodeId,
+ position: {
+ x: newPosition.x - 50,
+ y: newPosition.y - 50,
+ },
+ type: 'graph-node',
+ data: { label: noDefaultLabel ? '' : createNodeLabel() },
+ };
+
+ updateStore(draft => {
+ draft.nodes = [...nodes, newNode];
+ draft.edges = [
+ ...edges,
+ {
+ id: edgeId,
+ source: connectingNodeId.current || '',
+ target: nodeId,
+ type: 'graph-edge',
+ data: {
+ label: noDefaultLabel ? '' : createEdgeLabel(),
+ },
+ },
+ ];
+ });
+ } else {
+ const nodeid = target.dataset.nodeid;
+ if (!nodeid) return;
+ const edgeId = uuidv4();
+ const edgeLabel = createEdgeLabel();
+
+ updateStore(draft => {
+ draft.edges = transformEdges(
+ [
+ ...draft.edges,
+ {
+ id: edgeId,
+ data: {
+ label: noDefaultLabel ? '' : edgeLabel,
+ },
+ source: connectingNodeId.current || '',
+ target: nodeid,
+ },
+ ],
+ displayMode,
+ );
+ });
+ }
+ },
+ [screenToFlowPosition, elementOptions.isConnectable, nodes, edges, updateStore],
+ );
+
+ const onNodesChange = (changes: NodeChange[]) => {
+ if (isPreview) {
+ return;
+ }
+ const { type } = changes[0];
+
+ if (elementOptions.isConnectable && type !== 'position') {
+ updateStore(draft => {
+ const newNodes = applyNodeChanges(changes, fakeSnapshot(nodes));
+ draft.nodes = newNodes;
+ if (handleNodesChange) {
+ handleNodesChange(newNodes);
+ }
+ });
+ }
+
+ if (type === 'position') {
+ if (changes[0].dragging) {
+ tempRef.current = changes;
+ updateStore(draft => {
+ draft.nodePositionChange = changes as NodePositionChange[];
+ });
+ } else {
+ updateStore(draft => {
+ const newNodes = applyNodeChanges(tempRef.current, nodes);
+ draft.nodes = newNodes;
+ if (handleNodesChange) {
+ handleNodesChange(newNodes);
+ }
+ });
+ }
+ }
+ };
+
+ useOnSelectionChange({
+ onChange: useCallback(
+ ({ nodes, edges }) => {
+ updateStore(draft => {
+ draft.selectedNodeIds = nodes.map(node => node.id);
+ draft.selectedEdgeIds = edges.map(edge => edge.id);
+ });
+ onSelectionChange && onSelectionChange(nodes, edges as unknown as ISchemaEdge[]);
+ },
+ [onSelectionChange],
+ ),
+ });
+ const onEdgesChange = (changes: EdgeChange[]) => {
+ if (isPreview) return;
+ if (elementOptions.isConnectable) {
+ updateStore(draft => {
+ draft.edges = applyEdgeChanges(changes, fakeSnapshot(edges)) as typeof edges;
+ });
+ }
+ };
+
+ const onDoubleClick = () => {
+ const bbox = getBBox(nodes);
+ fitBounds(bbox, { duration: 600 });
+ };
+
+ useEffect(() => {
+ if (handleEdgesChange) {
+ handleEdgesChange(edges);
+ console.log('handleEdgesChange edges::: ', edges);
+ }
+ if (handleNodesChange) {
+ handleNodesChange(nodes);
+ }
+ }, [edges, nodes]);
+
+ useEffect(() => {
+ if (nodes.length > 0 && !hasLayouted) {
+ const graph = createStaticForceLayout(fakeSnapshot(nodes), fakeSnapshot(edges));
+ if (timerRef.current) {
+ clearTimeout(timerRef.current);
+ }
+ const timerId = setTimeout(() => {
+ const bbox = getBBox(graph.nodes);
+ fitBounds(bbox, { duration: 300 });
+ }, 300);
+ timerRef.current = timerId;
+ updateStore(draft => {
+ draft.hasLayouted = true;
+ draft.nodes = graph.nodes;
+ draft.edges = graph.edges;
+ });
+ }
+ }, [nodes, edges, hasLayouted, updateStore]);
+
+ const onReactFlowInit = (reactFlowInstance: ReactFlowInstance) => {
+ if (reactFlowInstance) {
+ setTimeout(() => {
+ const allNodes = reactFlowInstance.toObject().nodes;
+ const bbox = getNodesBounds(allNodes);
+ fitBounds(bbox, { duration: 600 });
+ }, 300);
+ }
+ };
+
+ useEffect(() => {
+ /** 把marker 放到 reactflow 内部，目的是为了导出的时候 dom 不丢失 */
+ const marker = document.getElementById('arrow-marker-svg');
+ const view = document.querySelector('.react-flow__viewport');
+ if (marker && view) {
+ view.appendChild(marker);
+ }
+ }, []);
+
+ return {
+ nodes,
+ edges,
+ nodePositionChange,
+ onDoubleClick,
+ onEdgesChange,
+ onNodesChange,
+ onConnectStart,
+ onConnectEnd,
+ onReactFlowInit,
+ };
+};
+
+export default useInteractive;
diff --git a/packages/studio-flow-editor/src/app/index.tsx b/packages/studio-flow-editor/src/app/index.tsx
new file mode 100644
index 000000000..fb38ad617
--- /dev/null
+++ b/packages/studio-flow-editor/src/app/index.tsx
@@ -0,0 +1,89 @@
+import React,{useEffect} from 'react';
+import { ReactFlow, ReactFlowProvider, applyNodeChanges, Background, MiniMap, Controls } from 'reactflow';
+import useInteractive from './hooks/useInteractive';
+import { nodeTypes } from './elements/node-types';
+import { edgeTypes } from './elements/edge-types';
+import ArrowMarker from './elements/arrow-marker';
+import ConnectionLine from './elements/connection-line';
+import { theme } from 'antd';
+import type { ImportorProps } from './types';
+import cssStyles from './style';
+import locales from './locales';
+import { StudioProvier, useDynamicStyle } from '@graphscope/studio-components';
+import { useGraphStore } from './store';
+
+const GraphCanvas: React.FC = ({
+ children,
+ nodesDraggable = true,
+ isPreview = false,
+ onNodesChange: handleNodesChange,
+ onEdgesChange: handleEdgesChange,
+ onSelectionChange,
+ noDefaultLabel,
+ defaultNodes,
+ defaultEdges
+}) => {
+ const {
+ nodes,
+ edges,
+ nodePositionChange,
+ onDoubleClick,
+ onEdgesChange,
+ onNodesChange,
+ onConnectStart,
+ onConnectEnd,
+ onReactFlowInit,
+ } = useInteractive({ isPreview, handleNodesChange, handleEdgesChange, onSelectionChange, noDefaultLabel });
+ const { token } = theme.useToken();
+ const { updateStore } = useGraphStore();
+ useDynamicStyle(cssStyles, 'graphscope-flow-editor');
+ const _nodes = nodePositionChange.length === 0 ? nodes : applyNodeChanges(nodePositionChange, nodes);
+ useEffect(() => {
+ if(defaultNodes){
+ updateStore(draft => {
+ draft.nodes = defaultNodes||[];
+ });
+ }
+ if(defaultEdges){
+ updateStore(draft => {
+ draft.edges = defaultEdges||[];
+ });
+ }
+ }, []);
+ return (
+
+ );
+};
+export default (props: ImportorProps) => {
+ return (
+
+
+
+
+
+ );
+};
diff --git a/packages/studio-flow-editor/src/app/locales/en-US.ts b/packages/studio-flow-editor/src/app/locales/en-US.ts
new file mode 100644
index 000000000..2585d5a72
--- /dev/null
+++ b/packages/studio-flow-editor/src/app/locales/en-US.ts
@@ -0,0 +1,95 @@
+export default {
+ 'Start sketching a model, a vertex label is a named grouping or categorization of nodes within the graph dataset':
+ 'Start sketching a model, a vertex label is a named grouping or categorization of nodes within the graph dataset',
+ 'Please manually input the odps file location': 'Please manually input the odps file location',
+ Upload: 'Upload',
+ /** import data */
+ 'Load data': 'Load data',
+ 'Start importing': 'Start importing',
+ Close: 'Close',
+ 'Goto Modeling': 'Goto Modeling',
+ 'Save Modeling': 'Save Modeling',
+ 'Goto Graphs': 'Goto Graphs',
+ 'Goto Importing': 'Goto Importing',
+ 'Go back to modify the graph model.': 'Go back to modify the graph model.',
+ 'View Schema': 'View Schema',
+ 'Successfully saved the graph model': 'Successfully saved the graph model',
+ 'Failed to save the graph model': 'Failed to save the graph model',
+ 'Please create the graph model first': 'Please create the graph model first',
+ 'Sorry, the system detected that there is no available graph model. Please create a graph model before importing data':
+ 'Sorry, the system detected that there is no available graph model. Please create a graph model before importing data',
+ 'Bulk Import': 'Bulk Import',
+ 'Bulk Import Data': 'Bulk Import Data',
+ 'The system has detected that you have previously uploaded CSV files. You can quickly bulk import data into graphscope':
+ 'The system has detected that you have previously uploaded CSV files. You can quickly bulk import data into graphscope',
+ 'Click or drag file to this area to upload': 'Click or drag file to this area to upload',
+ 'Clear all files': 'Clear all files',
+ 'Generate graph model': 'Generate graph model',
+ 'If you already have CSV data, feel free to upload it here, and the system will automatically infer possible graph models for you.':
+ 'If you already have CSV data, feel free to upload it here, and the system will automatically infer possible graph models for you.',
+ 'If you already have SQLDDL file, feel free to upload it here, and the system will automatically infer possible graph models for you.':
+ 'If you already have SQLDDL file, feel free to upload it here, and the system will automatically infer possible graph models for you.',
+
+ /** 创建图模型tip */
+ 'A vertex must have a primary key.': 'A vertex must have a primary key.',
+ 'A vertex must have at least one property.': 'A vertex must have at least one property.',
+ 'A edge can only have one property.': 'A edge can only have one property.',
+
+ 'The current mode is preview only, and does not support clearing the model':
+ 'The current mode is preview only, and does not support clearing the model',
+ 'Clear graph model': 'Clear graph model',
+ 'The current mode is preview only, and does not support creating new vertex':
+ 'The current mode is preview only, and does not support creating new vertex',
+ 'Create new vertex': 'Create new vertex',
+ 'The current mode is preview only, and does not support opening multi-source modeling':
+ 'The current mode is preview only, and does not support opening multi-source modeling',
+ 'Expand or collapse multi-source modeling': 'Expand or collapse multi-source modeling',
+ Configuration: 'Configuration',
+ 'You have successfully bound the data source. Please complete the configuration to start importing data.':
+ 'You have successfully bound the data source. Please complete the configuration to start importing data.',
+ 'The data loading task has been successfully created. You can view detailed logs in the job center.':
+ 'The data loading task has been successfully created. You can view detailed logs in the job center.',
+ 'Goto Jobs': 'Goto Jobs',
+ 'Please select a primate type.': 'Please select a primate type.',
+ 'Click or drag file to this area to parse it': 'Click or drag file to this area to parse it',
+ 'If you already have CSV data, feel free to parse it here, and the system will automatically infer possible graph models for you.':
+ 'If you already have CSV data, feel free to parse it here, and the system will automatically infer possible graph models for you.',
+ 'Data source binding': 'Data source binding',
+ 'Shortcut: parse files into a graph model': 'Shortcut: parse files into a graph model',
+ 'Save graph model to svg image': 'Save graph model to svg image',
+ 'Save graph model to JSON config': 'Save graph model to JSON config',
+ 'Parse files into a graph model': 'Parse files into a graph model',
+ 'For the definition and description of the schema model, please refer to the ':
+ 'For the definition and description of the schema model, please refer to the ',
+ document: 'document',
+ Vertex: 'Vertex',
+ Edges: 'Edges',
+ 'File type': 'File type',
+ 'ID field': 'ID field',
+ 'Label field': 'Label field',
+ 'Target field': 'Target field',
+ 'Source field': 'Source field',
+ 'Delete this label': 'Delete this label',
+ Label: 'Label',
+ 'Data Fields': 'Data Fields',
+ 'Add Property': 'Add Property',
+ Properties: 'Properties',
+ 'Uploading...': 'Uploading...',
+ Delimiter: 'Delimiter',
+ Type: 'Type',
+ 'Header Row': 'Header Row',
+ 'Import Option': 'Import Option',
+ Quoting: 'Quoting',
+ 'Quote char': 'Quote char',
+ Source: 'Source',
+ Target: 'Target',
+ 'Load data right now': 'Load data right now',
+ 'Click to rebind datasource': 'Click to rebind datasource',
+ 'Click to bind datasource': 'Click to bind datasource',
+ 'Preview dataloading configuration': 'Preview dataloading configuration',
+ 'Please bind datasource first': 'Please bind datasource first',
+ "Click to load all label's data": "Click to load all label's data",
+ 'Binding all datasource in batch': 'Binding all datasource in batch',
+ 'Bind all the datasource, but first, please check if the location for each label is filled in correctly.':
+ 'Bind all the datasource, but first, please check if the location for each label is filled in correctly.',
+};
diff --git a/packages/studio-flow-editor/src/app/locales/index.tsx b/packages/studio-flow-editor/src/app/locales/index.tsx
new file mode 100644
index 000000000..8bcb434d2
--- /dev/null
+++ b/packages/studio-flow-editor/src/app/locales/index.tsx
@@ -0,0 +1,6 @@
+import enUS from './en-US';
+import zhCN from './zh-CN';
+export default {
+ 'en-US': enUS,
+ 'zh-CN': zhCN,
+};
diff --git a/packages/studio-flow-editor/src/app/locales/zh-CN.ts b/packages/studio-flow-editor/src/app/locales/zh-CN.ts
new file mode 100644
index 000000000..91e620f84
--- /dev/null
+++ b/packages/studio-flow-editor/src/app/locales/zh-CN.ts
@@ -0,0 +1,93 @@
+export default {
+ 'Start sketching a model, a vertex label is a named grouping or categorization of nodes within the graph dataset':
+ '开始绘制模型吧，顶点标签是图数据集中节点的命名分组或分类',
+ 'Please manually input the odps file location': '请手动填写 odps 文件位置',
+ Upload: '上传',
+ /** import data */
+ 'Load data': '加载数据',
+ 'Start importing': '开始导入',
+ Close: '关闭',
+ 'Goto Modeling': '跳转到建模',
+ 'Save Modeling': '保存建模',
+ 'Goto Graphs': '跳转到图实例列表',
+ 'Goto Importing': '跳转到数据导入',
+ 'Go back to modify the graph model.': '返回修改图实例。',
+ 'View Schema': '查看 Schema',
+ 'Successfully saved the graph model': '已成功保存图模型',
+ 'Failed to save the graph model': '无法保存图模型',
+ 'Please create the graph model first': '请先创建图模型',
+ 'Sorry, the system detected that there is no available graph model. Please create a graph model before importing data':
+ '对不起，系统检测到没有可用的图模型。导入数据前请先创建图模型.',
+ 'Bulk Import': '批量导入',
+ 'Bulk Import Data': '批量导入数据',
+ 'The system has detected that you have previously uploaded CSV files. You can quickly bulk import data into graphscope':
+ '系统检测到您之前上传过 CSV 文件。您可以快速将数据批量导入 graphscope',
+ 'Click or drag file to this area to upload': '单击或拖动文件到此区域进行上传',
+ 'Clear all files': '清除所有文件',
+ 'Generate graph model': '生成图模型',
+ 'If you already have CSV data, feel free to upload it here, and the system will automatically infer possible graph models for you.':
+ '如果您已经有 CSV 数据，请随时将其上传到此处，系统将自动为您推断可能的图模型。',
+ 'If you already have SQLDDL file, feel free to upload it here, and the system will automatically infer possible graph models for you.':
+ '如果您已经有 SQLDDL 文件，请随时在此处上传，系统将自动为您推断可能的图模型。',
+
+ /** 创建图模型tip */
+ 'A vertex must have a primary key.': '节点必须具有一个主键。',
+ 'A vertex must have at least one property.': '节点必须至少具有一个属性。',
+ 'A edge can only have one property.': '一条边只能有一个属性。',
+
+ 'The current mode is preview only, and does not support clearing the model': '当前模式仅为预览模式，不支持清除模型',
+ 'Clear graph model': '清除模型',
+ 'The current mode is preview only, and does not support creating new vertex':
+ '当前模式仅为预览模式，不支持创建新顶点',
+ 'Create new vertex': '创建节点',
+ 'The current mode is preview only, and does not support opening multi-source modeling':
+ '当前模式仅为预览模式，不支持打开多源建模',
+ 'Expand or collapse multi-source modeling': '展开或折叠多源建模',
+ Configuration: '配置',
+ 'You have successfully bound the data source. Please complete the configuration to start importing data.':
+ '您已成功绑定数据源。请完成配置以开始导入数据。',
+ 'The data loading task has been successfully created. You can view detailed logs in the job center.':
+ '数据加载任务已成功创建。您可以在作业中心查看详细日志。',
+ 'Goto Jobs': '跳转到日志',
+ 'Please select a primate type.': '请补充完数据类型',
+ 'Click or drag file to this area to parse it': '单击或拖动文件到此区域进行解析',
+ 'If you already have CSV data, feel free to parse it here, and the system will automatically infer possible graph models for you.':
+ '如果您已经有 CSV 数据，请随时将其放置到此处，系统将自动为您推断可能的图模型。',
+ 'Data source binding': '数据绑定',
+ 'Shortcut: parse files into a graph model': '快捷方式：将文件解析为图模型',
+ 'Save graph model to svg image': '将图模型保存到 svg 图像',
+ 'Save graph model to JSON config': '将图模型保存到 JSON 配置',
+ 'Parse files into a graph model': '将文件解析为图模型',
+ 'For the definition and description of the schema model, please refer to the ': '关于模式模型的定义和描述，请参阅 ',
+ document: '文档',
+ Vertex: '节点',
+ Edges: '边',
+ 'File type': '文件类型',
+ 'ID field': 'ID 字段',
+ 'Label field': 'label 字段',
+ 'Target field': '终止点字段',
+ 'Source field': '起始点字段',
+ 'Delete this label': '删除该类型',
+ Label: '类型',
+ Source: '起始点',
+ Target: '目标点',
+ 'Data Fields': 'Data Fields',
+ 'Add Property': '添加属性',
+ Properties: '属性',
+ 'Uploading...': '上传中...',
+ Delimiter: '定界符',
+ Type: '类型',
+ 'Header Row': '标题行',
+ 'Import Option': '导入选项',
+ Quoting: '引用',
+ 'Quote char': '分隔符',
+ 'Load data right now': '立即载入数据',
+ 'Click to rebind datasource': '点击解绑，可重新绑定数据源',
+ 'Click to bind datasource': '点击绑定数据源',
+ 'Preview dataloading configuration': '预览周期载入配置',
+ 'Please bind datasource first': '请先绑定数据源',
+ "Click to load all label's data": '点击载入所有 label 的数据',
+ 'Binding all datasource in batch': '批量绑定所有 label 数据源',
+ 'Bind all the datasource, but first, please check if the location for each label is filled in correctly.':
+ '绑定数据源之前，请先检查每个 label 的 location 是否填写正确',
+};
diff --git a/packages/studio-flow-editor/src/app/store/index.tsx b/packages/studio-flow-editor/src/app/store/index.tsx
new file mode 100644
index 000000000..e87c7acc7
--- /dev/null
+++ b/packages/studio-flow-editor/src/app/store/index.tsx
@@ -0,0 +1,66 @@
+import type { NodePositionChange } from 'reactflow';
+import StoreProvider, { useContext as useZustandContext } from '@graphscope/use-zustand';
+import React, { useContext, useMemo } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { ISchemaEdge, ISchemaNode } from '../types';
+
+export interface GraphState {
+ displayMode: 'graph' | 'table';
+ nodes: ISchemaNode[];
+ edges: ISchemaEdge[];
+ nodePositionChange: NodePositionChange[];
+ hasLayouted: boolean;
+ elementOptions: {
+ isEditable: boolean;
+ isConnectable: boolean;
+ };
+ theme: {
+ primaryColor: string;
+ };
+ currentId: string;
+ currentType: 'nodes' | 'edges';
+ selectedNodeIds: string[];
+ selectedEdgeIds: string[];
+}
+
+const initialStore: GraphState = {
+ displayMode: 'graph',
+ nodes: [],
+ edges: [],
+ nodePositionChange: [],
+ hasLayouted: false,
+ elementOptions: {
+ isEditable: true,
+ isConnectable: true,
+ },
+ currentId: '',
+ theme: {
+ primaryColor: '#1978FF',
+ },
+ currentType: 'nodes',
+ selectedNodeIds: [],
+ selectedEdgeIds: []
+};
+const GraphInstanceContext = React.createContext(null);
+
+export const GraphProvider = props => {
+ const { children, id } = props;
+ const instanceId = useMemo(() => {
+ return id || `graph-${uuidv4()}`;
+ }, []);
+ return (
+
+
+ {children}
+
+
+ );
+};
+export const useGraphStore = (id?: string) => {
+ const instanceId = useContext(GraphInstanceContext);
+
+ if (!instanceId) {
+ throw new Error('请在 GraphProvider 内使用 useGraphStore');
+ }
+ return useZustandContext(id || instanceId);
+};
diff --git a/packages/studio-importor/src/app/style.tsx b/packages/studio-flow-editor/src/app/style.ts
similarity index 100%
rename from packages/studio-importor/src/app/style.tsx
rename to packages/studio-flow-editor/src/app/style.ts
diff --git a/packages/studio-flow-editor/src/app/types/index.ts b/packages/studio-flow-editor/src/app/types/index.ts
new file mode 100644
index 000000000..485a1eba0
--- /dev/null
+++ b/packages/studio-flow-editor/src/app/types/index.ts
@@ -0,0 +1,64 @@
+import type { Property } from '@graphscope/studio-components';
+import type { Node, Edge } from 'reactflow';
+
+export interface IEdgeData {
+ label: string;
+ /** 禁用：saved / binded / xxxx */
+ disabled?: boolean;
+ /** 是否保存在服务端 */
+ saved?: boolean;
+ properties?: Property[];
+ source_vertex_fields?: Property;
+ target_vertex_fields?: Property;
+ dataFields?: string[];
+ delimiter?: string;
+ datatype?: 'csv' | 'odps';
+ filelocation?: string;
+ _extra?: {
+ type?: string;
+ offset?: string;
+ isLoop: boolean;
+ isRevert?: boolean;
+ isPoly?: boolean;
+ index?: number;
+ count?: number;
+ };
+ [key: string]: any;
+}
+
+export interface INodeData {
+ label: string;
+ disabled?: boolean;
+ properties?: Property[];
+ dataFields?: string[];
+ delimiter?: string;
+ datatype?: 'csv' | 'odps';
+ filelocation?: string;
+ [key: string]: any;
+}
+export type ISchemaNode = Node;
+
+export type ISchemaEdge = Edge & { data: IEdgeData };
+
+export interface ISchemaOptions {
+ nodes: ISchemaNode[];
+ edges: ISchemaEdge[];
+}
+
+export interface Option {
+ label: string;
+ value: string;
+}
+export interface ImportorProps {
+ /** 用于多实例管理的 ID */
+ id?: string;
+ children?: React.ReactNode;
+ nodesDraggable?: boolean;
+ isPreview?: boolean;
+ onNodesChange?: (nodes: ISchemaNode[]) => void;
+ onEdgesChange?: (edges: ISchemaEdge[]) => void;
+ onSelectionChange?: (nodes: ISchemaNode[], edges: ISchemaEdge[]) => void;
+ noDefaultLabel?: boolean;
+ defaultNodes?: ISchemaNode[];
+ defaultEdges?: ISchemaEdge[];
+}
diff --git a/packages/studio-flow-editor/src/app/utils/index.ts b/packages/studio-flow-editor/src/app/utils/index.ts
new file mode 100644
index 000000000..5d1b098df
--- /dev/null
+++ b/packages/studio-flow-editor/src/app/utils/index.ts
@@ -0,0 +1,28 @@
+import { Node } from 'reactflow';
+
+export const getBBox = (nodes: Node[]) => {
+ const xs = nodes.map(node => node.position.x);
+ const ys = nodes.map(node => node.position.y);
+ const minX = Math.min(...xs);
+ const maxX = Math.max(...xs);
+ const minY = Math.min(...ys);
+ const maxY = Math.max(...ys);
+ return {
+ x: minX,
+ y: minY,
+ width: maxX - minX + 100,
+ height: maxY - minY + 100,
+ };
+};
+
+let nodeIndex = 1;
+let edgeIndex = 1;
+export const createNodeLabel = () => `Vertex_${nodeIndex++}`;
+export const createEdgeLabel = () => `Edge_${edgeIndex++}`;
+export const resetIndex = () => {
+ nodeIndex = 1;
+ edgeIndex = 1;
+};
+export const fakeSnapshot = (obj: T): T => {
+ return JSON.parse(JSON.stringify(obj));
+};
\ No newline at end of file
diff --git a/packages/studio-flow-editor/src/index.tsx b/packages/studio-flow-editor/src/index.tsx
new file mode 100644
index 000000000..535ce86be
--- /dev/null
+++ b/packages/studio-flow-editor/src/index.tsx
@@ -0,0 +1,8 @@
+export { default as GraphCanvas } from './app';
+export * from './app/store';
+export { useClearCanvas, useAddNode, useExportSvg } from './app/hooks';
+export {default as AddNode} from './app/button-controller/add-node'
+export {default as ClearCanvas} from './app/button-controller/clear-canvas'
+export {default as ExportSvg} from './app/button-controller/export-image'
+export * from './app/utils';
+export * from './app/types';
diff --git a/packages/studio-flow-editor/tsconfig.json b/packages/studio-flow-editor/tsconfig.json
new file mode 100644
index 000000000..3b081fcbb
--- /dev/null
+++ b/packages/studio-flow-editor/tsconfig.json
@@ -0,0 +1,23 @@
+{
+ "compilerOptions": {
+ "allowSyntheticDefaultImports": true,
+ "allowJs": true,
+ "declaration": true,
+ "target": "es2018",
+ "moduleResolution": "node",
+ "emitDeclarationOnly": true, // Only emit type declarations
+ "outDir": "./dist", // Output directory for .d.ts files
+ "rootDir": "./src", // Root directory of your source files
+ "jsx": "react",
+ "resolveJsonModule": true,
+ "strict": true,
+ "noImplicitAny": false,
+ "lib": ["dom", "esnext"],
+ "module": "esnext",
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "isolatedModules": false
+ },
+ "include": ["src/**/*"],
+ "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/studio-flow-editor/vite.config.ts b/packages/studio-flow-editor/vite.config.ts
new file mode 100644
index 000000000..af4d5e86d
--- /dev/null
+++ b/packages/studio-flow-editor/vite.config.ts
@@ -0,0 +1,37 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig(({ mode }) => {
+ if (mode === 'production') {
+ return {
+ build: {
+ lib: {
+ entry: path.resolve(__dirname, 'src/index.tsx'),
+ name: '@graphscope/studio-graph-editor',
+ fileName: format => `studio-graph-editor.${format}.js`,
+ },
+ outDir: './dist',
+ rollupOptions: {
+ external: ['react', 'react-dom'],
+ },
+ },
+ resolve: {
+ dedupe: ['react', 'react-dom'],
+ },
+ plugins: [react()],
+ };
+ } else {
+ return {
+ root: './',
+ server: {
+ port: 8000,
+ open: '/',
+ },
+ build: {
+ outDir: './dist',
+ },
+ plugins: [react()],
+ };
+ }
+});
diff --git a/packages/studio-importor/.npmrc b/packages/studio-importor/.npmrc
new file mode 100644
index 000000000..1d06f3bac
--- /dev/null
+++ b/packages/studio-importor/.npmrc
@@ -0,0 +1 @@
+registry=http://registry.anpm.alibaba-inc.com
diff --git a/packages/studio-importor/package.json b/packages/studio-importor/package.json
index e234ee075..7a76792dc 100644
--- a/packages/studio-importor/package.json
+++ b/packages/studio-importor/package.json
@@ -27,6 +27,7 @@
"@graphscope/use-zustand": "workspace:*",
"@graphscope/studio-components": "workspace:*",
"@graphscope/studio-server": "workspace:*",
+ "@graphscope/studio-flow-editor": "workspace:*",
"d3-force": "latest",
"dagre": "latest",
"localforage": "latest",
diff --git a/packages/studio-importor/src/app/button-controller/add-node.tsx b/packages/studio-importor/src/app/button-controller/add-node.tsx
deleted file mode 100644
index fdffec58c..000000000
--- a/packages/studio-importor/src/app/button-controller/add-node.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as React from 'react';
-import { Button, Tooltip } from 'antd';
-import { v4 as uuidv4 } from 'uuid';
-import { useReactFlow } from 'reactflow';
-import { Icons } from '@graphscope/studio-components';
-import { FormattedMessage } from 'react-intl';
-const AddNodeIcon = Icons.AddNode;
-
-import { createNodeLabel } from '../utils';
-interface IAddNodeProps {
- style?: React.CSSProperties;
-}
-import { useContext } from '@graphscope/use-zustand';
-let addNodeIndex = 0;
-const AddNode: React.FunctionComponent = props => {
- const { style } = props;
- const { setCenter } = useReactFlow();
- const { updateStore, store } = useContext();
- const { elementOptions } = store;
- const disabled = !elementOptions.isConnectable;
- const tooltipText = disabled ? (
-
- ) : (
-
- );
-
- const handleAddVertex = () => {
- updateStore(draft => {
- const label = createNodeLabel();
- const x = addNodeIndex * 200;
- const y = addNodeIndex * 100;
- addNodeIndex++;
- draft.nodes = [
- ...draft.nodes,
- {
- id: uuidv4(),
- position: {
- x,
- y,
- },
- type: 'graph-node',
- data: { label },
- },
- ];
-
- setCenter(x + 100 / 2, y + 100 / 2, { duration: 600, zoom: 1 });
- });
- };
-
- return (
-
- }>
-
- );
-};
-
-export default AddNode;
diff --git a/packages/studio-importor/src/app/button-controller/export-image.tsx b/packages/studio-importor/src/app/button-controller/export-image.tsx
deleted file mode 100644
index e71d490ca..000000000
--- a/packages/studio-importor/src/app/button-controller/export-image.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Button, Tooltip } from 'antd';
-import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { FileImageOutlined } from '@ant-design/icons';
-import { Utils } from '@graphscope/studio-components';
-
-import { toSvg } from 'html-to-image';
-interface ILeftButtonProps {}
-
-const ExportImage: React.FunctionComponent = props => {
- const onClick = async () => {
- // we calculate a transform for the nodes so that all nodes are visible
- // we then overwrite the transform of the `.react-flow__viewport` element
- // with the style option of the html-to-image library
- const viewBox = document.querySelector('.react-flow__viewport') as HTMLDivElement;
- if (viewBox) {
- const dataUrl = await toSvg(viewBox, {});
- Utils.downloadImage(dataUrl, 'model.svg');
- }
- };
-
- return (
- } placement="right">
- } onClick={onClick} />
-
- );
-};
-
-export default ExportImage;
diff --git a/packages/studio-importor/src/app/button-controller/import-and-export-config.tsx b/packages/studio-importor/src/app/button-controller/import-and-export-config.tsx
index ee2ed114c..1d5dab262 100644
--- a/packages/studio-importor/src/app/button-controller/import-and-export-config.tsx
+++ b/packages/studio-importor/src/app/button-controller/import-and-export-config.tsx
@@ -1,7 +1,7 @@
import { Button, Popover, Flex, Typography, Divider, theme, Space } from 'antd';
import * as React from 'react';
import { Utils, Icons } from '@graphscope/studio-components';
-import { useContext } from '@graphscope/use-zustand';
+import { useContext } from '../useContext';
import { transOptionsToSchema } from '../utils/modeling';
import { transformImportOptionsToSchemaMapping } from '../utils/importing';
import yaml from 'js-yaml';
diff --git a/packages/studio-importor/src/app/button-controller/index.tsx b/packages/studio-importor/src/app/button-controller/index.tsx
index c4be6d39b..1e808abbc 100644
--- a/packages/studio-importor/src/app/button-controller/index.tsx
+++ b/packages/studio-importor/src/app/button-controller/index.tsx
@@ -1,12 +1,9 @@
import React from 'react';
import { Divider } from 'antd';
-import { Toolbar, useCustomToken } from '@graphscope/studio-components';
-
+import { Toolbar } from '@graphscope/studio-components';
+import {AddNode,ClearCanvas,ExportSvg} from '@graphscope/studio-flow-editor';
import RightButton from './right-button';
-import ClearCanvas from './clear-canvas';
-import AddNode from './add-node';
-import ExportImage from './export-image';
-import { useContext } from '@graphscope/use-zustand';
+import { useContext } from '../useContext';
import ParseCSV from './parse-csv';
import ImportAndExportConfig from './import-and-export-config';
@@ -28,7 +25,7 @@ const ButtonController: React.FunctionComponent = props
-
+
);
diff --git a/packages/studio-importor/src/app/button-controller/left-button.tsx b/packages/studio-importor/src/app/button-controller/left-button.tsx
index 1578bc8b0..022339294 100644
--- a/packages/studio-importor/src/app/button-controller/left-button.tsx
+++ b/packages/studio-importor/src/app/button-controller/left-button.tsx
@@ -1,6 +1,6 @@
import { Button, Tooltip } from 'antd';
import * as React from 'react';
-import { useContext } from '@graphscope/use-zustand';
+import { useContext } from '../useContext';
import { Icons, useSection } from '@graphscope/studio-components';
import { FormattedMessage } from 'react-intl';
interface ILeftButtonProps {}
@@ -8,7 +8,7 @@ const LeftButton: React.FunctionComponent = props => {
const { store } = useContext();
const { elementOptions } = store;
const { toggleLeftSide } = useSection();
- const tooltipText = elementOptions.isEditable ? (
+ const tooltipText = !elementOptions.isEditable ? (
) : (
@@ -20,7 +20,7 @@ const LeftButton: React.FunctionComponent = props => {
}
// onClick={() => {
// updateStore(draft => {
diff --git a/packages/studio-importor/src/app/button-controller/parse-csv.tsx b/packages/studio-importor/src/app/button-controller/parse-csv.tsx
index b100e491a..036805a05 100644
--- a/packages/studio-importor/src/app/button-controller/parse-csv.tsx
+++ b/packages/studio-importor/src/app/button-controller/parse-csv.tsx
@@ -7,7 +7,7 @@ import { SegmentedTabs, Icons, useStudioProvier } from '@graphscope/studio-compo
import type { SegmentedTabsProps } from '@graphscope/studio-components';
import { FormattedMessage } from 'react-intl';
-import { useContext } from '@graphscope/use-zustand';
+import { useContext } from '../useContext';
interface IImportSchemaProps {
style?: React.CSSProperties;
}
@@ -25,9 +25,9 @@ const ParseCSVButton: React.FunctionComponent = props => {
/** svg pathFill */
let pathFill = () => {
if (!isLight) {
- return elementOptions.isEditable ? '#585858' : '#fff';
+ return !elementOptions.isEditable ? '#585858' : '#fff';
} else {
- return elementOptions.isEditable ? '#ddd' : '#000';
+ return !elementOptions.isEditable ? '#ddd' : '#000';
}
};
const handleClick = () => {
@@ -48,7 +48,7 @@ const ParseCSVButton: React.FunctionComponent = props => {
} placement="left">
}
diff --git a/packages/studio-importor/src/app/graph-canvas/CustomControls.tsx b/packages/studio-importor/src/app/graph-canvas/CustomControls.tsx
deleted file mode 100644
index deab55804..000000000
--- a/packages/studio-importor/src/app/graph-canvas/CustomControls.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-import { Button, Flex, Divider } from 'antd';
-import { PlusOutlined, MinusOutlined, ExpandOutlined } from '@ant-design/icons';
-import { useReactFlow, Panel } from 'reactflow';
-import { Icons, useStudioProvier } from '@graphscope/studio-components';
-
-interface ICustomControlsProps {
- isLocked: boolean;
- handleLocked: (val: boolean) => void;
-}
-const CustomControls: React.FunctionComponent = props => {
- const { isLocked, handleLocked } = props;
- const { zoomIn, zoomOut, fitView } = useReactFlow();
- const { isLight } = useStudioProvier();
- // svg path fill
- const color = !isLight ? '#FFF' : '#000';
- // lock or unlock
- const Icon = isLocked ? : ;
- const background = !isLight ? '#1d1d1d' : '#fff';
- return (
- <>
-
-
- }
- onClick={() => zoomIn({ duration: 100 })}
- />
-
- }
- onClick={() => zoomOut({ duration: 100 })}
- />
-
- }
- onClick={() => fitView()}
- />
-
-
-
-
- );
-};
-
-export default CustomControls;
diff --git a/packages/studio-importor/src/app/graph-canvas/index.tsx b/packages/studio-importor/src/app/graph-canvas/index.tsx
deleted file mode 100644
index 4ae6ebe73..000000000
--- a/packages/studio-importor/src/app/graph-canvas/index.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, { useState } from 'react';
-import { ReactFlow, Controls, Background, MiniMap, applyNodeChanges } from 'reactflow';
-import { EmptyCanvas, useStudioProvier } from '@graphscope/studio-components';
-import { nodeTypes } from '../elements/node-types';
-import { edgeTypes } from '../elements/edge-types';
-import ConnectionLine from '../elements/connection-line';
-import ArrowMarker from '../elements/arrow-marker';
-import { PlayCircleOutlined } from '@ant-design/icons';
-import { theme } from 'antd';
-
-import useInteractive from './useInteractive';
-import { FormattedMessage } from 'react-intl';
-// import CustomControls from './CustomControls';
-
-interface IGraphEditorProps {}
-
-const fakeSnapshot = obj => {
- return JSON.parse(JSON.stringify(obj));
-};
-
-const GraphEditor: React.FunctionComponent = props => {
- const { store, onDoubleClick, onEdgesChange, onNodesChange, onConnectStart, onConnectEnd, onReactFlowInit } =
- useInteractive();
- const { nodes, edges, collapsed, appMode, nodePositionChange } = store;
-
- const [state, updateState] = useState({
- isLocked: false,
- });
-
- const { token } = theme.useToken();
-
- const isEmpty = nodes.length === 0;
-
- const description = (
- ,
- }}
- />
- );
- const IS_PURE = appMode === 'PURE';
- const _nodes = nodePositionChange.length === 0 ? nodes : applyNodeChanges(nodePositionChange, nodes);
-
- return (
-
-
-
-
- {!IS_PURE && }
- {isEmpty && }
- {!IS_PURE && }
-
-
-