Skip to content

Commit 25be74c

Browse files
codebdycodebdy
authored
Merge pull request #245 from codebdy/add-zoomable-editor
Add zoomable editor
2 parents 064fae5 + a0425bb commit 25be74c

File tree

228 files changed

+3417
-1120
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

228 files changed

+3417
-1120
lines changed

‎apps/demo/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "rxdrag-demo",
33
"private": true,
4-
"version": "0.2.3",
4+
"version": "0.4.0",
55
"scripts": {
66
"dev": "vite",
77
"build": "vite build",

‎apps/demo/tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,6 @@
1919
//"target": "ES5",
2020
"experimentalDecorators": true
2121
},
22-
"include": ["src", "../../examples/example-common/src/index.ts"],
22+
"include": ["src"],
2323
"references": [{ "path": "./tsconfig.node.json" }]
2424
}

‎examples/app-designer-example/package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "app-designer-example",
3-
"version": "0.3.0",
3+
"version": "0.4.0",
44
"private": true,
55
"module": "index.ts",
66
"files": [
@@ -49,6 +49,9 @@
4949
"@rxdrag/react-antd-props-inputs": "workspace:*",
5050
"@rxdrag/react-menu-designer": "workspace:*",
5151
"@rxdrag/react-antd-icons": "workspace:*",
52+
"@rxdrag/minions-schema": "workspace:*",
53+
"@rxdrag/minions-logicflow-editor": "workspace:*",
54+
"@rxdrag/logicflow-editor-antd5": "workspace:*",
5255
"antd": "^5.9.2",
5356
"classnames": "^2.3.2",
5457
"react-router-dom": "^6.9.0",

‎examples/app-designer-example/src/FrontendDesigner/BottomConsole/FlowDesigner/FXes.tsx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { Tree } from "antd";
2+
import { DataNode, DirectoryTreeProps } from "antd/es/tree";
3+
import { memo } from "react"
4+
import { TreeContainer } from "../common/TreeContainer";
5+
import { FunctionOutlined } from "@ant-design/icons";
6+
7+
const { DirectoryTree } = Tree;
8+
9+
const treeData: DataNode[] = [
10+
{
11+
title: '当前模块',
12+
key: '0-0',
13+
children: [
14+
15+
{
16+
title: '查询用户列表',
17+
key: '0-0-0', isLeaf: true,
18+
icon: <FunctionOutlined />
19+
},
20+
21+
],
22+
},
23+
{
24+
title: '全局',
25+
key: '0-1',
26+
children: [
27+
{ title: '子编排1', key: '0-1-0', icon: <FunctionOutlined />, isLeaf: true },
28+
{ title: '子编排2', key: '0-1-1', icon: <FunctionOutlined />, isLeaf: true },
29+
],
30+
},
31+
];
32+
33+
export const FXes = memo(() => {
34+
const onSelect: DirectoryTreeProps['onSelect'] = (keys, info) => {
35+
console.log('Trigger Select', keys, info);
36+
};
37+
38+
const onExpand: DirectoryTreeProps['onExpand'] = (keys, info) => {
39+
console.log('Trigger Expand', keys, info);
40+
};
41+
return (
42+
<TreeContainer>
43+
<DirectoryTree
44+
onSelect={onSelect}
45+
onExpand={onExpand}
46+
treeData={treeData}
47+
/>
48+
</TreeContainer>
49+
)
50+
})

‎examples/app-designer-example/src/FrontendDesigner/BottomConsole/FlowDesigner/Flows.tsx

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { Tree } from "antd";
2+
import { DataNode, DirectoryTreeProps } from "antd/es/tree";
3+
import { memo } from "react"
4+
import { TreeContainer } from "../common/TreeContainer";
5+
6+
const { DirectoryTree } = Tree;
7+
8+
const treeData: DataNode[] = [
9+
{
10+
title: '编排',
11+
key: '0-0',
12+
children: [
13+
{
14+
title: '列表',
15+
key: '0-1',
16+
children: [
17+
{ title: 'leaf 1-0', key: '0-1-0', isLeaf: true },
18+
{ title: 'leaf 1-1', key: '0-1-1', isLeaf: true },
19+
],
20+
},
21+
{ title: '添加用户', key: '0-0-0', isLeaf: true },
22+
{ title: '编辑用户', key: '0-0-1', isLeaf: true },
23+
{ title: '删除用户', key: '0-0-2', isLeaf: true },
24+
],
25+
},
26+
{
27+
title: '变量',
28+
key: 'vars',
29+
}
30+
31+
];
32+
33+
34+
export const Flows = memo(() => {
35+
const onSelect: DirectoryTreeProps['onSelect'] = (keys, info) => {
36+
console.log('Trigger Select', keys, info);
37+
};
38+
39+
const onExpand: DirectoryTreeProps['onExpand'] = (keys, info) => {
40+
console.log('Trigger Expand', keys, info);
41+
};
42+
return (
43+
<TreeContainer>
44+
<DirectoryTree
45+
onSelect={onSelect}
46+
onExpand={onExpand}
47+
treeData={treeData}
48+
/>
49+
</TreeContainer>
50+
)
51+
})

‎examples/app-designer-example/src/FrontendDesigner/BottomConsole/FlowDesigner/PropertyPanel.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { ResizableColumn } from "@rxdrag/react-antd-shell"
2+
import { memo } from "react"
3+
import styled from "styled-components"
4+
import { Title } from "../common/Title"
5+
import { CloseOutlined } from "@ant-design/icons"
6+
import { Button } from "antd"
7+
8+
const StyledColumn = styled(ResizableColumn)`
9+
border-left: solid 1px ${props => props.theme.token?.colorBorderSecondary};
10+
`
11+
12+
export const PropertyPanel = memo((
13+
props: {
14+
onClose?: () => void
15+
}
16+
) => {
17+
const { onClose } = props;
18+
return (
19+
<StyledColumn
20+
right
21+
width={260}
22+
maxWidth={500}
23+
minWidth={160}
24+
>
25+
<Title>
26+
属性
27+
<Button
28+
type="text"
29+
size="small"
30+
icon={<CloseOutlined />}
31+
onClick={onClose}
32+
/>
33+
</Title>
34+
</StyledColumn>
35+
)
36+
})

‎examples/app-designer-example/src/FrontendDesigner/BottomConsole/FlowDesigner/Toolbar.tsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { memo } from "react"
2+
import styled from "styled-components"
3+
import { Divider, Space } from "antd"
4+
import { FlowRemoveButton, FlowUdredoButtons } from "@rxdrag/logicflow-editor-antd5"
5+
6+
const StyledToolbar = styled.div`
7+
display: flex;
8+
padding-left: 8px;
9+
height: 40px;
10+
align-items: center;
11+
width: 100%;
12+
`
13+
14+
15+
const Title = styled.div`
16+
flex:1;
17+
display: flex;
18+
align-items: center;
19+
`
20+
21+
export const Toolbar = memo((
22+
props: {
23+
right?: React.ReactNode,
24+
title?: React.ReactNode,
25+
children?: React.ReactNode,
26+
}
27+
) => {
28+
const { title, children } = props;
29+
30+
return (
31+
<StyledToolbar className="logicflow-editor-antd5-toolbar">
32+
<Title>
33+
{
34+
title
35+
}
36+
</Title>
37+
<Space>
38+
<FlowUdredoButtons />
39+
<Divider type="vertical" />
40+
<FlowRemoveButton />
41+
</Space>
42+
{
43+
children
44+
}
45+
</StyledToolbar>
46+
)
47+
})

‎examples/app-designer-example/src/FrontendDesigner/BottomConsole/FlowDesigner/index.tsx

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
import { ReactNode, memo, useCallback, useMemo, useState } from "react"
2+
import styled from "styled-components"
3+
import { Button, Space, Tooltip, theme } from "antd"
4+
import { FunctionOutlined, ControlOutlined, CloseOutlined, AppstoreOutlined } from "@ant-design/icons"
5+
import { FXes } from "./FXes"
6+
import { Flows } from "./Flows"
7+
import { LeftNav } from "../common/LeftNav"
8+
import { LeftColumn } from "../common/LeftColumn"
9+
import { Container } from "../common/Container"
10+
import { Title } from "../common/Title"
11+
import { LogicMetaEditorAntd5Inner, LogicFlowEditorAntd5Scope, Toolbox } from "@rxdrag/logicflow-editor-antd5"
12+
import { activityMaterialCategories, activityMaterialLocales } from "../minion-materials"
13+
import { IActivityMaterial } from "@rxdrag/minions-schema"
14+
import { Toolbar } from "./Toolbar"
15+
import { useThemeMode } from "@rxdrag/react-core"
16+
17+
const Content = styled.div`
18+
flex: 1;
19+
position: relative;
20+
`
21+
22+
const SaveButton = styled(Button)`
23+
margin-left: 32px;
24+
`
25+
26+
enum NavType {
27+
toolbox = "toolbox",
28+
flows = "flows",
29+
fxes = "fxes",
30+
}
31+
32+
const test = {
33+
nodes: [],
34+
lines: []
35+
}
36+
37+
export const FlowDesigner = memo(() => {
38+
const [navType, setNavType] = useState<NavType | null>(NavType.flows)
39+
const { token } = theme.useToken()
40+
const themMode = useThemeMode()
41+
const materials = useMemo(() => {
42+
const materials: IActivityMaterial<ReactNode>[] = []
43+
return materials.concat(...activityMaterialCategories.map(category => category.materials))
44+
}, [])
45+
46+
const handleToggleToolbox = useCallback(() => {
47+
setNavType(type => type === NavType.toolbox ? null : NavType.toolbox)
48+
}, [])
49+
50+
const handleToggleFlows = useCallback(() => {
51+
setNavType(type => type === NavType.flows ? null : NavType.flows)
52+
}, [])
53+
54+
const handleToggleFxes = useCallback(() => {
55+
setNavType(type => type === NavType.fxes ? null : NavType.fxes)
56+
}, [])
57+
58+
const handleCloseLeft = useCallback(() => {
59+
setNavType(null)
60+
}, [])
61+
62+
63+
return (
64+
<LogicFlowEditorAntd5Scope
65+
themMode={themMode}
66+
token={token}
67+
materials={materials}
68+
locales={activityMaterialLocales}
69+
>
70+
<Container>
71+
<LeftNav>
72+
<Space direction="vertical">
73+
<Tooltip title="元件箱" placement="right">
74+
<Button
75+
type={navType === NavType.toolbox ? "link" : "text"}
76+
icon={<AppstoreOutlined />}
77+
onClick={handleToggleToolbox}
78+
/>
79+
</Tooltip>
80+
<Tooltip title="编排" placement="right">
81+
<Button
82+
type={navType === NavType.flows ? "link" : "text"}
83+
icon={<ControlOutlined />}
84+
onClick={handleToggleFlows}
85+
/>
86+
</Tooltip>
87+
<Tooltip title="子编排" placement="right">
88+
<Button
89+
type={navType === NavType.fxes ? "link" : "text"}
90+
icon={<FunctionOutlined />}
91+
onClick={handleToggleFxes}
92+
/>
93+
</Tooltip>
94+
</Space>
95+
</LeftNav>
96+
{
97+
navType && <LeftColumn
98+
width={260}
99+
maxWidth={500}
100+
minWidth={160}
101+
>
102+
<Title>
103+
{
104+
NavType.toolbox === navType &&
105+
<span>
106+
元件
107+
</span>
108+
}
109+
{
110+
NavType.flows === navType &&
111+
<span>
112+
逻辑编排
113+
</span>
114+
}
115+
{
116+
NavType.fxes === navType &&
117+
<span>
118+
子编排
119+
</span>
120+
}
121+
<Button
122+
type="text"
123+
size="small"
124+
icon={<CloseOutlined />}
125+
onClick={handleCloseLeft}
126+
/>
127+
</Title>
128+
{
129+
navType === NavType.toolbox &&
130+
<Toolbox materialCategories={activityMaterialCategories} />
131+
}
132+
{
133+
navType === NavType.flows &&
134+
<Flows />
135+
}
136+
{
137+
navType === NavType.fxes &&
138+
<FXes />
139+
}
140+
</LeftColumn>
141+
}
142+
<Content>
143+
<LogicMetaEditorAntd5Inner
144+
materialCategories={activityMaterialCategories}
145+
value={test}
146+
toolbox={false}
147+
toolbar={<Toolbar
148+
title="添加用户"
149+
>
150+
<SaveButton type="primary">保存</SaveButton>
151+
</Toolbar>}
152+
/>
153+
</Content>
154+
</Container>
155+
</LogicFlowEditorAntd5Scope>
156+
)
157+
})

0 commit comments

Comments
 (0)