feat(core): 节点内置 resize 能力，并支持初始化时 properties 中传入 width、height 等尺寸信息定义节点形状大小

.github/workflows/docs.yaml

@@ -1,4 +1,4 @@
-name: docs
+name: Docs Deployment
 
 on: [push]
 
@@ -43,4 +43,4 @@ jobs:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./deploy
           cname: logic-flow.org
-          
+

.github/workflows/issue_checker.yaml

@@ -1,4 +1,4 @@
-name: issue checker
+name: Issue Checker
 
 on:
   issues:

examples/engine-browser-examples/src/pages/graph/index.tsx

@@ -149,7 +149,7 @@ export default function BasicNode() {
         // stopMoveGraph: true,
         adjustEdgeStartAndEnd: true,
         // adjustEdge: false,
-        allowRotation: true,
+        allowRotate: true,
         edgeTextEdit: true,
         keyboard: {
           enabled: true,

examples/feature-examples/package.json

@@ -1,6 +1,6 @@
 {
-  "private": true,
   "name": "@logicflow/feature-examples",
+  "private": true,
   "author": "boyongjiong <boyongjiong@didiglobal.com>",
   "scripts": {
     "dev": "umi dev",

examples/feature-examples/src/pages/graph/index.less

@@ -9,19 +9,19 @@
     outline: none;
   }
 
-  .rect {
-    width: 50px;
-    height: 50px;
-    background: #fff;
-    border: 2px solid #000;
+  .dnd-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: grab;
+    user-select: none;
   }
 
-  .circle {
-    width: 50px;
+  .wrapper {
+    width: 80px;
     height: 50px;
     background: #fff;
     border: 2px solid #000;
-    border-radius: 50%;
   }
 
   .uml-wrapper {

examples/feature-examples/src/pages/graph/index.tsx

@@ -7,8 +7,10 @@ import { useEffect, useRef } from 'react'
 import { combine, square, star, uml, user } from './nodes'
 import { animation, connection } from './edges'
 
+import GraphData = LogicFlow.GraphData
 import styles from './index.less'
-import GraphConfigData = LogicFlow.GraphConfigData
+
+import OnDragNodeConfig = LogicFlow.OnDragNodeConfig
 
 const config: Partial<LogicFlow.Options> = {
   isSilentMode: false,
@@ -78,11 +80,22 @@ const data = {
       text: {
         x: 600,
         y: 200,
-        value: 'xxxxx',
+        value: 'node-1',
       },
       type: 'rect',
       x: 600,
       y: 200,
+      properties: {
+        width: 80,
+        height: 120,
+      },
+    },
+    {
+      id: 'custom-node-2',
+      text: 'node-2',
+      type: 'polygon',
+      x: 90,
+      y: 94,
     },
   ],
 }
@@ -122,7 +135,7 @@ export default function BasicNode() {
         container: containerRef.current as HTMLElement,
         // hideAnchors: true,
         // width: 1200,
-        height: 400,
+        // height: 400,
         // adjustNodePosition: false,
         // isSilentMode: true,
         // overlapMode: 1,
@@ -136,7 +149,8 @@ export default function BasicNode() {
         // stopMoveGraph: true,
         adjustEdgeStartAndEnd: true,
         // adjustEdge: false,
-        allowRotation: true,
+        allowRotate: true,
+        allowResize: true,
         edgeTextEdit: true,
         keyboard: {
           enabled: true,
@@ -163,6 +177,9 @@ export default function BasicNode() {
           color: '#FFFFFF',
         },
         grid: true,
+        // grid: {
+        //   size: 1,
+        // },
         edgeTextDraggable: true,
         edgeType: 'bezier',
         style: {
@@ -249,7 +266,7 @@ export default function BasicNode() {
   const handleRefreshGraph = () => {
     const lf = lfRef.current
     if (lf) {
-      const data = lf.getGraphData()
+      const data = lf.getGraphRawData()
       console.log('current graph data', data)
       const refreshData = LogicFlowUtil.refreshGraphId(data)
       console.log('after refresh graphId', data)
@@ -276,38 +293,23 @@ export default function BasicNode() {
 
   const handleTurnAnimationOn = () => {
     if (lfRef.current) {
-      const { edges } = lfRef.current.getGraphData() as GraphConfigData
+      const { edges } = lfRef.current.getGraphData() as GraphData
       forEach(edges, (edge) => {
         lfRef.current?.openEdgeAnimation(edge.id)
       })
     }
   }
   const handleTurnAnimationOff = () => {
     if (lfRef.current) {
-      const { edges } = lfRef.current.getGraphData() as GraphConfigData
+      const { edges } = lfRef.current.getGraphData() as GraphData
       forEach(edges, (edge) => {
         lfRef.current?.closeEdgeAnimation(edge.id)
       })
     }
   }
 
-  const handleDragRect = () => {
-    lfRef?.current?.dnd.startDrag({
-      type: 'rect',
-      text: 'xxxxx',
-    })
-  }
-  const handleDragCircle = () => {
-    lfRef?.current?.dnd.startDrag({
-      type: 'circle',
-      r: 25,
-    })
-  }
-  const handleDragText = () => {
-    lfRef?.current?.dnd.startDrag({
-      type: 'text',
-      text: '文本',
-    })
+  const handleDragItem = (node: OnDragNodeConfig) => {
+    lfRef?.current?.dnd.startDrag(node)
   }
 
   return (
@@ -446,12 +448,95 @@ export default function BasicNode() {
         节点面板
       </Divider>
       <Flex wrap="wrap" gap="small" justify="center" align="center">
-        {/* <Button key="rect" type="primary">节点 1</Button> */}
-        {/* <Button key="circle" type="primary">节点 2</Button> */}
-        {/* <Button key="text" type="text">文本</Button> */}
-        <div className="rect" onMouseDown={handleDragRect} />
-        <div className="circle" onMouseDown={handleDragCircle} />
-        <div className="text" onMouseDown={handleDragText}>
+        <div
+          className="dnd-item wrapper"
+          onMouseDown={() =>
+            handleDragItem({
+              type: 'rect',
+              text: 'rect',
+            })
+          }
+        >
+          rect
+        </div>
+        <div
+          className="dnd-item wrapper"
+          onMouseDown={() => {
+            handleDragItem({
+              type: 'circle',
+              text: 'circle',
+            })
+          }}
+        >
+          circle
+        </div>
+        <div
+          className="dnd-item wrapper"
+          onMouseDown={() => {
+            handleDragItem({
+              type: 'diamond',
+              text: 'diamond',
+            })
+          }}
+        >
+          diamond
+        </div>
+        <div
+          className="dnd-item wrapper"
+          onMouseDown={() => {
+            handleDragItem({
+              type: 'ellipse',
+              text: 'ellipse',
+              properties: {
+                rx: 40,
+                ry: 80,
+              },
+            })
+          }}
+        >
+          ellipse
+        </div>
+        <div
+          className="dnd-item wrapper"
+          onMouseDown={() => {
+            handleDragItem({
+              type: 'html',
+              text: 'html',
+            })
+          }}
+        >
+          html
+        </div>
+        <div
+          className="dnd-item wrapper"
+          onMouseDown={() => {
+            handleDragItem({
+              type: 'polygon',
+              text: 'polygon',
+              properties: {
+                width: 110,
+                height: 100,
+                style: {
+                  fill: '#ffd591',
+                  stroke: '#ffa940',
+                  strokeWidth: 2,
+                  fillRule: 'evenodd',
+                },
+              },
+            })
+          }}
+        >
+          polygon
+        </div>
+        <div
+          className="dnd-item text"
+          onMouseDown={() => {
+            handleDragItem({
+              type: 'text',
+              text: '文本',
+            })
+          }}
+        >
           文本
         </div>
       </Flex>

examples/material-ui-demo/package.json

@@ -1,6 +1,5 @@
 {
   "name": "material-ui-app",
-  "version": "1.3.0",
   "private": true,
   "dependencies": {
     "@emotion/cache": "^11.9.3",

examples/next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-app",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

examples/next-app/src/app/page.tsx

@@ -150,7 +150,7 @@ export default function Graph() {
         // stopMoveGraph: true,
         adjustEdgeStartAndEnd: true,
         // adjustEdge: false,
-        allowRotation: true,
+        allowRotate: true,
         edgeTextEdit: true,
         keyboard: {
           enabled: true,

examples/vue3-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-app",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "private": true,
   "type": "module",
   "scripts": {

examples/vue3-app/src/views/LogicFlowView.vue

@@ -135,7 +135,7 @@ onMounted(() => {
       // stopMoveGraph: true,
       adjustEdgeStartAndEnd: true,
       // adjustEdge: false,
-      allowRotation: true,
+      allowRotate: true,
       edgeTextEdit: true,
       keyboard: {
         enabled: true

examples/vue3-memory-leak/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue3-memory-leak",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/core",
-  "version": "1.3.0",
+  "version": "2.0.0-beta.1",
   "description": "LogicFlow, help you quickly create flowcharts",
   "main": "dist/index.js",
   "module": "es/index.js",