Merge pull request #245 from codebdy/add-zoomable-editor

Add zoomable editor

apps/demo/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rxdrag-demo",
   "private": true,
-  "version": "0.2.3",
+  "version": "0.4.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

apps/demo/tsconfig.json

@@ -19,6 +19,6 @@
     //"target": "ES5",
     "experimentalDecorators": true
   },
-  "include": ["src", "../../examples/example-common/src/index.ts"],
+  "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

examples/app-designer-example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-designer-example",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "private": true,
   "module": "index.ts",
   "files": [
@@ -49,6 +49,9 @@
     "@rxdrag/react-antd-props-inputs": "workspace:*",
     "@rxdrag/react-menu-designer": "workspace:*",
     "@rxdrag/react-antd-icons": "workspace:*",
+    "@rxdrag/minions-schema": "workspace:*",
+    "@rxdrag/minions-logicflow-editor": "workspace:*",
+    "@rxdrag/logicflow-editor-antd5": "workspace:*",
     "antd": "^5.9.2",
     "classnames": "^2.3.2",
     "react-router-dom": "^6.9.0",

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

@@ -0,0 +1,50 @@
+import { Tree } from "antd";
+import { DataNode, DirectoryTreeProps } from "antd/es/tree";
+import { memo } from "react"
+import { TreeContainer } from "../common/TreeContainer";
+import { FunctionOutlined } from "@ant-design/icons";
+
+const { DirectoryTree } = Tree;
+
+const treeData: DataNode[] = [
+  {
+    title: '当前模块',
+    key: '0-0',
+    children: [
+
+      {
+        title: '查询用户列表',
+        key: '0-0-0', isLeaf: true,
+        icon: <FunctionOutlined />
+      },
+
+    ],
+  },
+  {
+    title: '全局',
+    key: '0-1',
+    children: [
+      { title: '子编排1', key: '0-1-0', icon: <FunctionOutlined />, isLeaf: true },
+      { title: '子编排2', key: '0-1-1', icon: <FunctionOutlined />, isLeaf: true },
+    ],
+  },
+];
+
+export const FXes = memo(() => {
+  const onSelect: DirectoryTreeProps['onSelect'] = (keys, info) => {
+    console.log('Trigger Select', keys, info);
+  };
+
+  const onExpand: DirectoryTreeProps['onExpand'] = (keys, info) => {
+    console.log('Trigger Expand', keys, info);
+  };
+  return (
+    <TreeContainer>
+      <DirectoryTree
+        onSelect={onSelect}
+        onExpand={onExpand}
+        treeData={treeData}
+      />
+    </TreeContainer>
+  )
+})

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

@@ -0,0 +1,51 @@
+import { Tree } from "antd";
+import { DataNode, DirectoryTreeProps } from "antd/es/tree";
+import { memo } from "react"
+import { TreeContainer } from "../common/TreeContainer";
+
+const { DirectoryTree } = Tree;
+
+const treeData: DataNode[] = [
+  {
+    title: '编排',
+    key: '0-0',
+    children: [
+      {
+        title: '列表',
+        key: '0-1',
+        children: [
+          { title: 'leaf 1-0', key: '0-1-0', isLeaf: true },
+          { title: 'leaf 1-1', key: '0-1-1', isLeaf: true },
+        ],
+      },
+      { title: '添加用户', key: '0-0-0', isLeaf: true },
+      { title: '编辑用户', key: '0-0-1', isLeaf: true },
+      { title: '删除用户', key: '0-0-2', isLeaf: true },
+    ],
+  },
+  {
+    title: '变量',
+    key: 'vars',
+  }
+
+];
+
+
+export const Flows = memo(() => {
+  const onSelect: DirectoryTreeProps['onSelect'] = (keys, info) => {
+    console.log('Trigger Select', keys, info);
+  };
+
+  const onExpand: DirectoryTreeProps['onExpand'] = (keys, info) => {
+    console.log('Trigger Expand', keys, info);
+  };
+  return (
+    <TreeContainer>
+      <DirectoryTree
+        onSelect={onSelect}
+        onExpand={onExpand}
+        treeData={treeData}
+      />
+    </TreeContainer>
+  )
+})

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

@@ -0,0 +1,36 @@
+import { ResizableColumn } from "@rxdrag/react-antd-shell"
+import { memo } from "react"
+import styled from "styled-components"
+import { Title } from "../common/Title"
+import { CloseOutlined } from "@ant-design/icons"
+import { Button } from "antd"
+
+const StyledColumn = styled(ResizableColumn)`
+  border-left: solid 1px ${props => props.theme.token?.colorBorderSecondary};
+`
+
+export const PropertyPanel = memo((
+  props: {
+    onClose?: () => void
+  }
+) => {
+  const { onClose } = props;
+  return (
+    <StyledColumn
+      right
+      width={260}
+      maxWidth={500}
+      minWidth={160}
+    >
+      <Title>
+        属性
+        <Button
+          type="text"
+          size="small"
+          icon={<CloseOutlined />}
+          onClick={onClose}
+        />
+      </Title>
+    </StyledColumn>
+  )
+})

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

@@ -0,0 +1,47 @@
+import { memo } from "react"
+import styled from "styled-components"
+import { Divider, Space } from "antd"
+import { FlowRemoveButton, FlowUdredoButtons } from "@rxdrag/logicflow-editor-antd5"
+
+const StyledToolbar = styled.div`
+  display: flex;
+  padding-left: 8px;
+  height: 40px;
+  align-items: center;
+  width: 100%;
+`
+
+
+const Title = styled.div`
+  flex:1;
+  display: flex;
+  align-items: center;
+`
+
+export const Toolbar = memo((
+  props: {
+    right?: React.ReactNode,
+    title?: React.ReactNode,
+    children?: React.ReactNode,
+  }
+) => {
+  const { title, children } = props;
+
+  return (
+    <StyledToolbar className="logicflow-editor-antd5-toolbar">
+      <Title>
+        {
+          title
+        }
+      </Title>
+      <Space>
+        <FlowUdredoButtons />
+        <Divider type="vertical" />
+        <FlowRemoveButton />
+      </Space>
+      {
+        children
+      }
+    </StyledToolbar>
+  )
+})

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

@@ -0,0 +1,157 @@
+import { ReactNode, memo, useCallback, useMemo, useState } from "react"
+import styled from "styled-components"
+import { Button, Space, Tooltip, theme } from "antd"
+import { FunctionOutlined, ControlOutlined, CloseOutlined, AppstoreOutlined } from "@ant-design/icons"
+import { FXes } from "./FXes"
+import { Flows } from "./Flows"
+import { LeftNav } from "../common/LeftNav"
+import { LeftColumn } from "../common/LeftColumn"
+import { Container } from "../common/Container"
+import { Title } from "../common/Title"
+import { LogicMetaEditorAntd5Inner, LogicFlowEditorAntd5Scope, Toolbox } from "@rxdrag/logicflow-editor-antd5"
+import { activityMaterialCategories, activityMaterialLocales } from "../minion-materials"
+import { IActivityMaterial } from "@rxdrag/minions-schema"
+import { Toolbar } from "./Toolbar"
+import { useThemeMode } from "@rxdrag/react-core"
+
+const Content = styled.div`
+  flex: 1;
+  position: relative;
+`
+
+const SaveButton = styled(Button)`
+  margin-left: 32px;
+`
+
+enum NavType {
+  toolbox = "toolbox",
+  flows = "flows",
+  fxes = "fxes",
+}
+
+const test = {
+  nodes: [],
+  lines: []
+}
+
+export const FlowDesigner = memo(() => {
+  const [navType, setNavType] = useState<NavType | null>(NavType.flows)
+  const { token } = theme.useToken()
+  const themMode = useThemeMode()
+  const materials = useMemo(() => {
+    const materials: IActivityMaterial<ReactNode>[] = []
+    return materials.concat(...activityMaterialCategories.map(category => category.materials))
+  }, [])
+
+  const handleToggleToolbox = useCallback(() => {
+    setNavType(type => type === NavType.toolbox ? null : NavType.toolbox)
+  }, [])
+
+  const handleToggleFlows = useCallback(() => {
+    setNavType(type => type === NavType.flows ? null : NavType.flows)
+  }, [])
+
+  const handleToggleFxes = useCallback(() => {
+    setNavType(type => type === NavType.fxes ? null : NavType.fxes)
+  }, [])
+
+  const handleCloseLeft = useCallback(() => {
+    setNavType(null)
+  }, [])
+
+
+  return (
+    <LogicFlowEditorAntd5Scope
+      themMode={themMode}
+      token={token}
+      materials={materials}
+      locales={activityMaterialLocales}
+    >
+      <Container>
+        <LeftNav>
+          <Space direction="vertical">
+            <Tooltip title="元件箱" placement="right">
+              <Button
+                type={navType === NavType.toolbox ? "link" : "text"}
+                icon={<AppstoreOutlined />}
+                onClick={handleToggleToolbox}
+              />
+            </Tooltip>
+            <Tooltip title="编排" placement="right">
+              <Button
+                type={navType === NavType.flows ? "link" : "text"}
+                icon={<ControlOutlined />}
+                onClick={handleToggleFlows}
+              />
+            </Tooltip>
+            <Tooltip title="子编排" placement="right">
+              <Button
+                type={navType === NavType.fxes ? "link" : "text"}
+                icon={<FunctionOutlined />}
+                onClick={handleToggleFxes}
+              />
+            </Tooltip>
+          </Space>
+        </LeftNav>
+        {
+          navType && <LeftColumn
+            width={260}
+            maxWidth={500}
+            minWidth={160}
+          >
+            <Title>
+              {
+                NavType.toolbox === navType &&
+                <span>
+                  元件
+                </span>
+              }
+              {
+                NavType.flows === navType &&
+                <span>
+                  逻辑编排
+                </span>
+              }
+              {
+                NavType.fxes === navType &&
+                <span>
+                  子编排
+                </span>
+              }
+              <Button
+                type="text"
+                size="small"
+                icon={<CloseOutlined />}
+                onClick={handleCloseLeft}
+              />
+            </Title>
+            {
+              navType === NavType.toolbox &&
+              <Toolbox materialCategories={activityMaterialCategories} />
+            }
+            {
+              navType === NavType.flows &&
+              <Flows />
+            }
+            {
+              navType === NavType.fxes &&
+              <FXes />
+            }
+          </LeftColumn>
+        }
+        <Content>
+          <LogicMetaEditorAntd5Inner
+            materialCategories={activityMaterialCategories}
+            value={test}
+            toolbox={false}
+            toolbar={<Toolbar
+              title="添加用户"
+            >
+              <SaveButton type="primary">保存</SaveButton>
+            </Toolbar>}
+          />
+        </Content>
+      </Container>
+    </LogicFlowEditorAntd5Scope>
+  )
+})