feat: 暂存「开发 动态组节点功能 代码」

Author: boyongjiong

examples/engine-browser-examples/src/assets/group/circle.png

@@ -3,11 +3,13 @@ import ReactDOM from 'react-dom/client'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 
 import Root from './routes/root'
+import Home from './pages/Home'
 import ErrorPage from './pages/ErrorPage'
 
 // 页面组件
 import Graph from './pages/graph'
 import Bpmn from './pages/extension/bpmn'
+import DynamicGroup from './pages/extension/dynamic-group'
 
 import GetStarted from './pages/engine/GetStarted'
 import Recorder from './pages/engine/Recorder'
@@ -20,6 +22,10 @@ const router = createBrowserRouter([
     element: <Root />,
     errorElement: <ErrorPage />,
     children: [
+      {
+        path: '/',
+        element: <Home />,
+      },
       {
         path: '/graph',
         children: [
@@ -36,6 +42,10 @@ const router = createBrowserRouter([
             path: '/extension/bpmn',
             element: <Bpmn />,
           },
+          {
+            path: '/extension/dynamic-group',
+            element: <DynamicGroup />,
+          },
         ],
       },
       {

examples/engine-browser-examples/src/assets/group/group.png

@@ -0,0 +1,18 @@
+import { useRouteError } from 'react-router-dom'
+
+export interface IErrorProps {
+  statusText?: string | number
+  message?: string
+}
+
+export default function ErrorPage() {
+  const error = useRouteError()
+  console.log('page error ===>>>', error)
+
+  return (
+    <div id="error-page">
+      <h1>Wire Your Ideas with LogicFlow!</h1>
+      <p>低成本实现，让逻辑管理更简单、更高效</p>
+    </div>
+  )
+}

examples/engine-browser-examples/src/assets/group/rect.png

@@ -181,6 +181,7 @@ export default function BPMNExtension() {
       const { control, miniMap } = lf.extension
 
       ;(control as Control).addItem({
+        key: 'mini-map',
         iconClass: 'custom-minimap',
         title: '',
         text: '导航',

examples/engine-browser-examples/src/assets/group/subprocess-collapsed.png

@@ -0,0 +1,9 @@
+.viewport {
+  position: relative;
+  height: 70vh;
+  overflow: hidden;
+}
+
+.lf-dnd-shape {
+  background-size: contain;
+}

examples/engine-browser-examples/src/assets/group/subprocess-expanded.png

@@ -0,0 +1,171 @@
+import LogicFlow from '@logicflow/core'
+import {
+  Control,
+  DndPanel,
+  ShapeItem,
+  Group,
+  SelectionSelect,
+} from '@logicflow/extension'
+
+import { Button, Card, Divider, Flex } from 'antd'
+import { useEffect, useRef } from 'react'
+import { customGroup, subProcess } from './nodes'
+import GraphConfigData = LogicFlow.GraphConfigData
+
+import '@logicflow/core/es/index.css'
+import '@logicflow/extension/es/index.css'
+import './index.less'
+import { getImageUrl } from '@/utls.ts'
+
+const config: Partial<LogicFlow.Options> = {
+  grid: true,
+  multipleSelectKey: 'alt',
+  autoExpand: false,
+  keyboard: {
+    enabled: true,
+  },
+  plugins: [Group, Control, DndPanel, SelectionSelect],
+}
+
+const customDndConfig: ShapeItem[] = [
+  {
+    type: 'custom-group',
+    label: '自定义分组',
+    text: 'CustomGroup',
+    icon: getImageUrl('/group/group.png'),
+  },
+  {
+    type: 'circle',
+    label: '圆形',
+    text: 'Circle',
+    icon: getImageUrl('/group/circle.png'),
+  },
+  {
+    type: 'rect',
+    label: '矩形',
+    text: 'Rect',
+    icon: getImageUrl('/group/rect.png'),
+  },
+  {
+    type: 'sub-process',
+    label: '子流程-展开',
+    text: 'SubProcess',
+    icon: getImageUrl('/group/subprocess-expanded.png'),
+  },
+  {
+    type: 'sub-process',
+    label: '子流程-收起',
+    text: 'SubProcess',
+    icon: getImageUrl('/group/subprocess-collapsed.png'),
+  },
+]
+
+const getDndPanelConfig = (lf: LogicFlow): ShapeItem[] => [
+  {
+    label: '选区',
+    icon: getImageUrl('/bpmn/select.png'),
+    callback: () => {
+      lf.openSelectionSelect()
+      lf.once('selection:selected', () => {
+        lf.closeSelectionSelect()
+      })
+    },
+  },
+  ...customDndConfig,
+]
+
+export default function BPMNExtension() {
+  const lfRef = useRef<LogicFlow>()
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!lfRef.current) {
+      const lf = new LogicFlow({
+        ...config,
+        container: containerRef.current as HTMLElement,
+      })
+
+      const dndPanelConfig = getDndPanelConfig(lf)
+      lf.setPatternItems(dndPanelConfig)
+
+      lf.register(customGroup)
+      lf.register(subProcess)
+
+      // 获取渲染数据
+      const graphData: GraphConfigData = {
+        nodes: [
+          // {
+          //   type: "custom-group",
+          //   x: 400,
+          //   y: 400,
+          //   text: 'custom-group1',
+          //   children: ["circle_1"]
+          // },
+          // {
+          //   id: "circle_1",
+          //   type: "circle",
+          //   x: 400,
+          //   y: 400
+          // },
+          // {
+          //   id: "rect_1",
+          //   type: "rect",
+          //   x: 200,
+          //   y: 100
+          // },
+          // {
+          //   id: "circle_2",
+          //   type: "circle",
+          //   x: 800,
+          //   y: 140
+          // },
+          {
+            id: 'group_1',
+            type: 'sub-process',
+            x: 300,
+            y: 120,
+            // children: ["rect_3"],
+            text: 'sub-process-1',
+            properties: {
+              isFolded: true,
+            },
+          },
+          // {
+          //   id: "group_2",
+          //   type: "sub-process",
+          //   x: 800,
+          //   y: 120,
+          //   children: ["circle_4"],
+          //   text: 'sub-process-2',
+          //   properties: {
+          //     isFolded: true
+          //   }
+          // }
+        ],
+        edges: [],
+      }
+      lf.render(graphData)
+
+      lfRef.current = lf
+    }
+  }, [])
+
+  const getGraphData = () => {}
+
+  const rerender = () => {}
+
+  return (
+    <Card title="LogicFlow Extension - DndPanel" className="control-container">
+      <Flex wrap="wrap" gap="small">
+        <Button type="primary" key="getData" onClick={getGraphData}>
+          获取数据
+        </Button>
+        <Button type="primary" key="rerender" onClick={rerender}>
+          重新渲染
+        </Button>
+      </Flex>
+      <Divider />
+      <div ref={containerRef} id="graph" className="viewport"></div>
+    </Card>
+  )
+}

examples/engine-browser-examples/src/main.tsx

@@ -0,0 +1,60 @@
+import LogicFlow from '@logicflow/core'
+import { GroupNode, GroupNodeModel } from '@logicflow/extension'
+
+import NodeConfig = LogicFlow.NodeConfig
+import TextConfig = LogicFlow.TextConfig
+
+export class CustomGroup extends GroupNode {}
+
+export class CustomGroupModel extends GroupNodeModel {
+  foldedText?: TextConfig
+
+  initNodeData(data: NodeConfig) {
+    super.initNodeData(data)
+    this.isRestrict = true
+    this.resizable = true
+    this.width = 480
+    this.height = 280
+  }
+
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    style.stroke = '#AEAFAE'
+    style.strokeWidth = 1
+    return style
+  }
+
+  foldGroup(folded: boolean) {
+    super.foldGroup(folded)
+    // this.isFolded = folded
+
+    if (folded) {
+      if (this.foldedText) {
+        this.text = { ...this.foldedText }
+      }
+      if (!this.text.value) {
+        this.text.value = '已折叠分组'
+      }
+      this.text.x = this.x + 10
+      this.text.y = this.y
+    } else {
+      this.foldedText = { ...this.text }
+      this.text.value = ''
+    }
+  }
+
+  // isAllowAppendIn(nodeData) {
+  //   if (nodeData.type === 'rect') {
+  //     return false
+  //   }
+  //   return true
+  // }
+}
+
+export const customGroup = {
+  type: 'custom-group',
+  view: CustomGroup,
+  model: CustomGroupModel,
+}
+
+export default customGroup

examples/engine-browser-examples/src/pages/Home.tsx

@@ -0,0 +1,2 @@
+export * from './custom-group'
+export * from './sub-process'

examples/engine-browser-examples/src/pages/extension/bpmn/index.tsx

@@ -0,0 +1,72 @@
+import LogicFlow from '@logicflow/core'
+import { GroupNode, GroupNodeModel } from '@logicflow/extension'
+
+import TextConfig = LogicFlow.TextConfig
+import NodeData = LogicFlow.NodeData
+
+export class SubProcess extends GroupNode {}
+
+export class SubProcessModel extends GroupNodeModel {
+  foldedText?: TextConfig
+  setAttributes() {
+    // const size = 80
+    const circleOnlyAsTarget = {
+      message: '正方形节点下一个节点只能是圆形节点',
+      validate: () => {
+        return false
+      },
+    }
+    this.targetRules.push(circleOnlyAsTarget)
+  }
+
+  initNodeData(data: NodeData) {
+    super.initNodeData(data)
+    this.foldable = true
+    this.resizable = true
+    this.width = 400
+    this.height = 200
+  }
+
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    style.stroke = '#989891'
+    style.strokeWidth = 1
+    style.strokeDasharray = '3 3'
+    if (this.isSelected) {
+      style.stroke = 'rgb(124, 15, 255)'
+    }
+    if (this.isFolded) {
+      style.fill = '#47C769'
+    }
+    return style
+  }
+
+  foldGroup(folded: boolean) {
+    super.foldGroup(folded)
+    if (folded) {
+      if (this.foldedText) {
+        this.text = { ...this.foldedText }
+      }
+      if (!this.text.value) {
+        this.text.value = '已折叠分组已折叠分组已折叠分组'
+      }
+      this.text.x = this.x + 10
+      this.text.y = this.y
+    } else {
+      this.foldedText = { ...this.text }
+      this.text.value = ''
+    }
+  }
+
+  // isAllowAppendIn(nodeData) {
+  //   return false
+  // }
+}
+
+export const subProcess = {
+  type: 'sub-process',
+  view: SubProcess,
+  model: SubProcessModel,
+}
+
+export default subProcess

examples/engine-browser-examples/src/pages/extension/dynamic-group/index.less

@@ -23,11 +23,12 @@ export default function Root() {
           <ul>
             <div className="nav-title">LogicFlow</div>
             <li>
-              <a href={`/graph/get-started`}>Graph</a>
+              <a href={`/graph/get-started`}>Overview</a>
             </li>
             <div className="nav-title">Extension</div>
             <li>
               <a href={`/extension/bpmn`}>BPMN</a>
+              <a href={`/extension/dynamic-group`}>Dynamic Group</a>
             </li>
             <div className="nav-title">Engine</div>
             <li>