Skip to content

Commit e8e638b

Browse files
author
xwj02155382
committed
fix: draw-pattern editor instance
1 parent ab80218 commit e8e638b

File tree

20 files changed

+385
-265
lines changed

20 files changed

+385
-265
lines changed

‎packages/studio-draw-pattern/.npmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
registry=http://registry.anpm.alibaba-inc.com

‎packages/studio-draw-pattern/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,13 @@
3838
"dependencies": {
3939
"@ant-design/icons": "^5.2.6",
4040
"@graphscope/studio-components": "workspace:*",
41+
"@graphscope/studio-flow-editor": "workspace:*",
4142
"@graphscope/studio-graph-editor": "workspace:*",
4243
"antd": "^5.22.2",
4344
"lodash": "^4.17.21",
4445
"react": "^18.2.0",
4546
"react-dom": "^18.2.0",
47+
"reactflow": "^11.11.4",
4648
"rxjs": "^7.8.1",
4749
"uuid": "^10.0.0",
4850
"zustand": "^4.5.5"

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import { Toolbar } from '@graphscope/studio-components';
3+
import { AddNode, ClearCanvas, ExportSvg } from '@graphscope/studio-flow-editor';
4+
5+
const ButtonController: React.FunctionComponent = props => {
6+
return (
7+
<Toolbar>
8+
<AddNode noDefaultLabel />
9+
<ClearCanvas />
10+
<ExportSvg />
11+
</Toolbar>
12+
);
13+
};
14+
15+
export default ButtonController;

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

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
import { Graph } from '@graphscope/studio-graph-editor';
21
import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
32
import { useNodeStore } from '../../stores/useNodeStore';
43
import { useEdgeStore } from '../../stores/useEdgeStore';
5-
import { ISchemaEdge } from '@graphscope/studio-graph-editor';
64
import { useGenerateRelation } from '../../hooks/generateRelation/useGenerateRelation';
7-
import PopoverContent from './PopoverContent';
85
import { Property } from '../../types/property';
96
import { useTransform } from '../../hooks/transform/useTransform';
10-
import { ISchemaNode } from '@graphscope/studio-graph-editor';
117
import { useGraphStore } from '../../stores/useGraphStore';
128
import { useEncodeCypher } from '../../hooks/cypher/useEncodeCypher';
13-
import { Button, Input, Modal, Tooltip } from 'antd';
9+
import { Button, Tooltip } from 'antd';
1410
import { usePropertiesStore } from '../../stores/usePropertiesStore';
11+
import ButtonController from './ButtonController';
1512
import { DrawPatternContext, DrawPatternValue } from '../DrawPattern';
1613
import _ from 'lodash';
14+
import { theme } from 'antd';
1715
import { useSection } from '@graphscope/studio-components';
16+
import { Background, MiniMap, Controls } from 'reactflow';
1817
import { InsertRowRightOutlined, SearchOutlined } from '@ant-design/icons';
18+
import { GraphProvider, GraphEditor, ISchemaEdge, ISchemaNode } from '@graphscope/studio-flow-editor';
1919

2020
export const Canvas = () => {
2121
const [descState, setDescState] = useState<string>();
@@ -40,6 +40,7 @@ export const Canvas = () => {
4040
const { toggleLeftSide } = useSection();
4141
const [clickTrigger, setClickTrigger] = useState<boolean>(false);
4242
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
43+
const { token } = theme.useToken();
4344

4445
useEffect(() => {
4546
const nodeReturn = Array.from(nodesStore).map(node => `${node.variable}`);
@@ -115,22 +116,32 @@ export const Canvas = () => {
115116

116117
const MyGraph = useCallback(() => {
117118
return (
118-
<Graph
119-
graphId="edit-graph"
119+
<GraphEditor
120120
noDefaultLabel={true}
121121
defaultNodes={graphNodes}
122122
defaultEdges={graphEdges as unknown as ISchemaEdge[]}
123123
onNodesChange={handleNodes}
124124
onEdgesChange={handleEdges}
125-
isShowPopover={true}
126-
popoverCustomContent={<PopoverContent onChange={handlePropertiesChange}></PopoverContent>}
127-
/>
125+
>
126+
<ButtonController />
127+
<Controls
128+
style={{
129+
gap: '4px',
130+
boxShadow:
131+
'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)',
132+
}}
133+
/>
134+
<Background style={{ background: token.colorBgBase }} />
135+
<MiniMap style={{ backgroundColor: token.colorBgBase }} />
136+
</GraphEditor>
128137
);
129138
}, [graphNodes, graphEdges]);
130139

131140
return (
132141
<div style={{ height: '100%', width: '100%' }}>
133-
<MyGraph></MyGraph>
142+
<GraphProvider>
143+
<MyGraph></MyGraph>
144+
</GraphProvider>
134145
<div
135146
style={{
136147
backgroundColor: 'white',

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import React, { createContext, useEffect } from 'react';
22
import { QuickStart } from './QuickStart';
33
import { Canvas } from './Canvas';
44
import { Section } from '@graphscope/studio-components';
5-
import { ISchemaNode } from '@graphscope/studio-graph-editor';
6-
import { ISchemaEdge } from '@graphscope/studio-graph-editor';
5+
import { ISchemaEdge, ISchemaNode} from '@graphscope/studio-flow-editor';
76
import { useGraphStore } from '../stores/useGraphStore';
87
import { useEdgeStore } from '../stores/useEdgeStore';
98
import { useNodeStore } from '../stores/useNodeStore';

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

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React, { useCallback, useContext, useMemo } from 'react';
2-
import { Graph } from '@graphscope/studio-graph-editor';
3-
import { ISchemaNode } from '@graphscope/studio-graph-editor';
4-
import { ISchemaEdge } from '@graphscope/studio-graph-editor';
2+
import { ISchemaEdge, ISchemaNode, GraphEditor, GraphProvider } from '@graphscope/studio-flow-editor';
53
import { useTransform } from '../../hooks/transform/useTransform';
64
import { useGraphStore } from '../../stores/useGraphStore';
75
import { useNodeStore } from '../../stores/useNodeStore';
@@ -54,20 +52,23 @@ export const Preview = () => {
5452
flexBasis: '50%',
5553
marginTop: '1rem',
5654
overflow: 'hidden',
55+
position: 'relative',
5756
}}
5857
>
5958
<span style={{ fontSize: '1rem' }}>Model Preview</span>
6059
<div style={{ backgroundColor: 'white', height: '100%', flexGrow: '1' }}>
61-
<Graph
62-
isControlButton={false}
63-
isMiniMap={false}
64-
disabled={true}
65-
isPreview={true}
66-
defaultEdges={previewGraph?.edges}
67-
defaultNodes={updatePositionNode}
68-
graphId="preview-graph"
69-
onSelectionChange={handleSelectionChange}
70-
/>
60+
<GraphProvider>
61+
<GraphEditor
62+
showControl={false}
63+
showMinimap={false}
64+
isPreview={true}
65+
nodesDraggable={true}
66+
showDefaultBtn={false}
67+
defaultEdges={previewGraph?.edges}
68+
defaultNodes={updatePositionNode}
69+
onSelectionChange={handleSelectionChange}
70+
/>
71+
</GraphProvider>
7172
</div>
7273
</div>
7374
);

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import { ISchemaNode } from '@graphscope/studio-graph-editor';
1+
import { ISchemaEdge, ISchemaNode} from '@graphscope/studio-flow-editor';
22
import { useCallback } from 'react';
33
import { Node } from '../../types/node';
4-
import { ISchemaEdge } from '@graphscope/studio-graph-editor';
54
import { Edge } from '../../types/edge';
65
import { useNodeStore } from '../../stores/useNodeStore';
76
import { useEdgeStore } from '../../stores/useEdgeStore';

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { ISchemaEdge } from '@graphscope/studio-graph-editor';
2-
import { ISchemaNode } from '@graphscope/studio-graph-editor';
1+
import { ISchemaEdge, ISchemaNode} from '@graphscope/studio-flow-editor';
32
import _ from 'lodash';
43
import { create } from 'zustand';
54

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { IEdgeData, ISchemaEdge } from '@graphscope/studio-graph-editor';
1+
import { IEdgeData, ISchemaNode} from '@graphscope/studio-flow-editor';
22
import { Property } from './property';
33

44
export interface EdgeData extends ISchemaEdge {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ISchemaNode } from '@graphscope/studio-graph-editor';
1+
import { ISchemaNode } from '@graphscope/studio-flow-editor';
22
import type { Property } from './property';
33

44
export interface NodeData extends ISchemaNode {

0 commit comments

Comments
 (0)