fix: 修复 GroupNode 中 getNodeStyle 解构后调用，BaseNodeModel 中 getNodeStyle 方…

…法 this 为空的问题

 - 确认解构后赋值和直接 this.props.model.getNodeStyle() 方法调用的区别 -> this 指向的问题
 - LogicFlow Examples 中新增 Group 插件

examples/feature-examples/.umirc.ts

@@ -82,6 +82,11 @@ export default defineConfig({
           name: 'BPMN 插件',
           component: './extensions/bpmn',
         },
+        {
+          path: '/extension/group',
+          name: 'Group 插件',
+          component: './extensions/group',
+        },
       ],
     },
   ],

examples/feature-examples/src/pages/extensions/group/index.less

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

examples/feature-examples/src/pages/extensions/group/index.tsx

@@ -0,0 +1,170 @@
+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 styles from './index.less'
+
+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: require('@/assets/group/group.png'),
+  },
+  {
+    type: 'circle',
+    label: '圆形',
+    text: 'Circle',
+    icon: require('@/assets/group/circle.png'),
+  },
+  {
+    type: 'rect',
+    label: '矩形',
+    text: 'Rect',
+    icon: require('@/assets/group/rect.png'),
+  },
+  {
+    type: 'sub-process',
+    label: '子流程-展开',
+    text: 'SubProcess',
+    icon: require('@/assets/group/subprocess-expanded.png'),
+  },
+  {
+    type: 'sub-process',
+    label: '子流程-收起',
+    text: 'SubProcess',
+    icon: require('@/assets/group/subprocess-collapsed.png'),
+  },
+]
+
+const getDndPanelConfig = (lf: LogicFlow): ShapeItem[] => [
+  {
+    label: '选区',
+    icon: require('@/assets/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={styles.viewport}></div>
+    </Card>
+  )
+}

examples/feature-examples/src/pages/extensions/group/nodes/custom-group/index.ts

@@ -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/feature-examples/src/pages/extensions/group/nodes/index.ts

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

examples/feature-examples/src/pages/extensions/group/nodes/sub-process/index.ts

@@ -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/feature-examples/src/pages/graph/index.tsx

@@ -1,4 +1,4 @@
-import { map } from 'lodash-es'
+import { forEach, map } from 'lodash-es'
 import LogicFlow, { ElementState, LogicFlowUtil } from '@logicflow/core'
 import '@logicflow/core/es/index.css'
 
@@ -274,15 +274,15 @@ export default function BasicNode() {
   const handleTurnAnimationOn = () => {
     if (lfRef.current) {
       const { edges } = lfRef.current.getGraphData() as GraphConfigData
-      edges.forEach((edge) => {
+      forEach(edges, (edge) => {
         lfRef.current?.openEdgeAnimation(edge.id)
       })
     }
   }
   const handleTurnAnimationOff = () => {
     if (lfRef.current) {
       const { edges } = lfRef.current.getGraphData() as GraphConfigData
-      edges.forEach((edge) => {
+      forEach(edges, (edge) => {
         lfRef.current?.closeEdgeAnimation(edge.id)
       })
     }

packages/core/package.json

@@ -4,7 +4,7 @@
   "description": "LogicFlow, help you quickly create flowcharts",
   "main": "dist/index.js",
   "module": "es/index.js",
-  "types": "lib/index.d.ts",
+  "types": "es/index.d.ts",
   "scripts": {
     "clean:turbo": "rss",
     "clean:build": "rss",

packages/core/src/model/node/BaseNodeModel.ts

@@ -20,6 +20,7 @@ import {
 
 import AnchorConfig = Model.AnchorConfig
 import GraphElements = LogicFlow.GraphElements
+import TextConfig = LogicFlow.TextConfig
 
 export interface IBaseNodeModel extends Model.BaseModel {
   /**
@@ -44,7 +45,7 @@ export class BaseNodeModel implements IBaseNodeModel {
   @observable readonly type = ''
   @observable x = 0
   @observable y = 0
-  @observable text = {
+  @observable text: TextConfig = {
     value: '',
     x: 0,
     y: 0,

packages/core/src/view/node/BaseNode.tsx

@@ -141,7 +141,9 @@ export abstract class BaseNode extends Component<IProps, IState> {
       }
       return (
         <BaseText
-          editable={editConfigModel.nodeTextEdit && model.text.editable}
+          editable={
+            editConfigModel.nodeTextEdit && (model.text.editable ?? true)
+          }
           model={model}
           graphModel={graphModel}
           draggable={draggable}