Feat graph editor

.dumirc.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'dumi';
 import { join } from 'path';
 import { defineThemeConfig } from 'dumi-theme-antd/dist/defineThemeConfig';
 import { Divider } from 'antd';
+import { dir } from 'console';
 
 const isProduction = process.env.NODE_ENV === 'production';
 const basePath = isProduction ? '/portal/' : '/';
@@ -15,12 +16,14 @@ const themeConfig = defineThemeConfig({
     'zh-CN': [
       { title: '图组件', link: '/graphs' },
       { title: '通用组件', link: '/components' },
+      { title: '模型编辑', link: '/floweditors' },
       { title: '建模', link: '/modelings' },
       { title: '查询', link: '/queries' },
     ],
     'en-US': [
       { title: 'graph', link: '/graphs' },
       { title: 'components', link: '/components' },
+      { title: 'flow-editor', link: '/floweditors' },
       { title: 'modeling', link: '/modelings' },
       { title: 'query', link: '/queries' },
     ],
@@ -181,6 +184,7 @@ export default defineConfig({
     '@graphscope/studio-query': join(__dirname, 'packages', 'studio-query'),
     '@graphscope/use-zustand': join(__dirname, 'packages', 'use-zustand'),
     '@graphscope/studio-graph': join(__dirname, 'packages', 'studio-graph'),
+    '@graphscope/studio-flow-editor': join(__dirname, 'packages', 'studio-flow-editor'),
   },
   externals: {
     'node:os': 'commonjs2 node:os',
@@ -205,6 +209,10 @@ export default defineConfig({
         type: 'components/query-statement',
         dir: 'packages/studio-query/src/statement',
       },
+      {
+        type: 'floweditor',
+        dir: 'packages/studio-flow-editor/docs',
+      },
       {
         type: 'modeling',
         dir: 'packages/studio-importor/src/app',

packages/studio-draw-pattern/.npmrc

@@ -0,0 +1 @@
+registry=http://registry.anpm.alibaba-inc.com

packages/studio-draw-pattern/package.json

@@ -38,11 +38,13 @@
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
     "@graphscope/studio-components": "workspace:*",
+    "@graphscope/studio-flow-editor": "workspace:*",
     "@graphscope/studio-graph-editor": "workspace:*",
     "antd": "^5.22.2",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "reactflow": "^11.11.4",
     "rxjs": "^7.8.1",
     "uuid": "^10.0.0",
     "zustand": "^4.5.5"

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Toolbar } from '@graphscope/studio-components';
+import { AddNode, ClearCanvas, ExportSvg } from '@graphscope/studio-flow-editor';
+
+const ButtonController: React.FunctionComponent = props => {
+  return (
+    <Toolbar>
+      <AddNode noDefaultLabel />
+      <ClearCanvas />
+      <ExportSvg />
+    </Toolbar>
+  );
+};
+
+export default ButtonController;

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

@@ -1,21 +1,21 @@
-import { Graph } from '@graphscope/studio-graph-editor';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useNodeStore } from '../../stores/useNodeStore';
 import { useEdgeStore } from '../../stores/useEdgeStore';
-import { ISchemaEdge } from '@graphscope/studio-graph-editor';
 import { useGenerateRelation } from '../../hooks/generateRelation/useGenerateRelation';
-import PopoverContent from './PopoverContent';
 import { Property } from '../../types/property';
 import { useTransform } from '../../hooks/transform/useTransform';
-import { ISchemaNode } from '@graphscope/studio-graph-editor';
 import { useGraphStore } from '../../stores/useGraphStore';
 import { useEncodeCypher } from '../../hooks/cypher/useEncodeCypher';
-import { Button, Input, Modal, Tooltip } from 'antd';
+import { Button, Tooltip } from 'antd';
 import { usePropertiesStore } from '../../stores/usePropertiesStore';
+import ButtonController from './ButtonController';
 import { DrawPatternContext, DrawPatternValue } from '../DrawPattern';
 import _ from 'lodash';
+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, GraphCanvas, ISchemaEdge, ISchemaNode } from '@graphscope/studio-flow-editor';
 
 export const Canvas = () => {
   const [descState, setDescState] = useState<string>();
@@ -40,6 +40,7 @@ export const Canvas = () => {
   const { toggleLeftSide } = useSection();
   const [clickTrigger, setClickTrigger] = useState<boolean>(false);
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const { token } = theme.useToken();
 
   useEffect(() => {
     const nodeReturn = Array.from(nodesStore).map(node => `${node.variable}`);
@@ -115,22 +116,32 @@ export const Canvas = () => {
 
   const MyGraph = useCallback(() => {
     return (
-      <Graph
-        graphId="edit-graph"
+      <GraphCanvas
         noDefaultLabel={true}
         defaultNodes={graphNodes}
         defaultEdges={graphEdges as unknown as ISchemaEdge[]}
         onNodesChange={handleNodes}
         onEdgesChange={handleEdges}
-        isShowPopover={true}
-        popoverCustomContent={<PopoverContent onChange={handlePropertiesChange}></PopoverContent>}
-      />
+      >
+        <ButtonController />
+        <Controls
+          style={{
+            gap: '4px',
+            boxShadow:
+              '0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
+          }}
+        />
+        <Background style={{ background: token.colorBgBase }} />
+        <MiniMap style={{ backgroundColor: token.colorBgBase }} />
+      </GraphCanvas>
     );
   }, [graphNodes, graphEdges]);
 
   return (
     <div style={{ height: '100%', width: '100%' }}>
-      <MyGraph></MyGraph>
+      <GraphProvider>
+        <MyGraph></MyGraph>
+      </GraphProvider>
       <div
         style={{
           backgroundColor: 'white',

packages/studio-draw-pattern/src/components/DrawPattern.tsx

@@ -2,8 +2,7 @@ import React, { createContext, useEffect } from 'react';
 import { QuickStart } from './QuickStart';
 import { Canvas } from './Canvas';
 import { Section } from '@graphscope/studio-components';
-import { ISchemaNode } from '@graphscope/studio-graph-editor';
-import { ISchemaEdge } from '@graphscope/studio-graph-editor';
+import { ISchemaEdge, ISchemaNode} from '@graphscope/studio-flow-editor';
 import { useGraphStore } from '../stores/useGraphStore';
 import { useEdgeStore } from '../stores/useEdgeStore';
 import { useNodeStore } from '../stores/useNodeStore';

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

@@ -1,7 +1,5 @@
 import React, { useCallback, useContext, useMemo } from 'react';
-import { Graph } from '@graphscope/studio-graph-editor';
-import { ISchemaNode } from '@graphscope/studio-graph-editor';
-import { ISchemaEdge } from '@graphscope/studio-graph-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';
@@ -54,20 +52,20 @@ export const Preview = () => {
         flexBasis: '50%',
         marginTop: '1rem',
         overflow: 'hidden',
+        position: 'relative',
       }}
     >
       <span style={{ fontSize: '1rem' }}>Model Preview</span>
       <div style={{ backgroundColor: 'white', height: '100%', flexGrow: '1' }}>
-        <Graph
-          isControlButton={false}
-          isMiniMap={false}
-          disabled={true}
-          isPreview={true}
-          defaultEdges={previewGraph?.edges}
-          defaultNodes={updatePositionNode}
-          graphId="preview-graph"
-          onSelectionChange={handleSelectionChange}
-        />
+        <GraphProvider>
+          <GraphCanvas
+            isPreview={true}
+            nodesDraggable={true}
+            defaultEdges={previewGraph?.edges}
+            defaultNodes={updatePositionNode}
+            onSelectionChange={handleSelectionChange}
+          />
+        </GraphProvider>
       </div>
     </div>
   );

packages/studio-draw-pattern/src/hooks/transform/useTransform.ts

@@ -1,7 +1,6 @@
-import { ISchemaNode } from '@graphscope/studio-graph-editor';
+import { ISchemaEdge, ISchemaNode} from '@graphscope/studio-flow-editor';
 import { useCallback } from 'react';
 import { Node } from '../../types/node';
-import { ISchemaEdge } from '@graphscope/studio-graph-editor';
 import { Edge } from '../../types/edge';
 import { useNodeStore } from '../../stores/useNodeStore';
 import { useEdgeStore } from '../../stores/useEdgeStore';

packages/studio-draw-pattern/src/stores/useGraphStore.ts

@@ -1,5 +1,4 @@
-import { ISchemaEdge } from '@graphscope/studio-graph-editor';
-import { ISchemaNode } from '@graphscope/studio-graph-editor';
+import { ISchemaEdge, ISchemaNode} from '@graphscope/studio-flow-editor';
 import _ from 'lodash';
 import { create } from 'zustand';
 

packages/studio-draw-pattern/src/types/edge.d.ts

@@ -1,4 +1,4 @@
-import { IEdgeData, ISchemaEdge } from '@graphscope/studio-graph-editor';
+import { IEdgeData, ISchemaNode} from '@graphscope/studio-flow-editor';
 import { Property } from './property';
 
 export interface EdgeData extends ISchemaEdge {

packages/studio-draw-pattern/src/types/node.d.ts

@@ -1,4 +1,4 @@
-import { ISchemaNode } from '@graphscope/studio-graph-editor';
+import { ISchemaNode } from '@graphscope/studio-flow-editor';
 import type { Property } from './property';
 
 export interface NodeData extends ISchemaNode {

packages/studio-draw-pattern/src/utils/index.ts

@@ -1,4 +1,4 @@
-import { ISchemaNode } from '@graphscope/studio-graph-editor';
+import { ISchemaNode } from '@graphscope/studio-flow-editor';
 
 export function isArrayExist<T>(item: T, arrary: Array<T>): boolean {
   return arrary.indexOf(item) !== -1;

packages/studio-flow-editor/.fatherrc.js

@@ -0,0 +1,4 @@
+export default {
+  esm: { output: 'es' },
+  cjs: { output: 'lib' },
+};

packages/studio-flow-editor/.npmrc

@@ -0,0 +1 @@
+registry=http://registry.anpm.alibaba-inc.com