feat: 解决 git config core.ignorecase 为 true 导致修改文件夹名大小写不生效的问题

 - 重命名 BPMN -> bpmn; Control -> control
 - 命名规范：文件夹名小写（name or  name1-name2-name3）；.js or .ts 小驼峰；.tsx or .jsx 大驼峰
 - 新增 Vue3-memory-leak demo 用于定位内存泄漏的问题，后续基于此 demo 增加 LogicFlow destroy 的方法
 - 优化 properties 类型定义为 Record<string, any>，避免 unknow 引起的问题，后续再优化
 - 解决 graph demo 中发现 BezierEdge 初始化 path 为空的问题，可以看 -> BezierEdgeModel.ts 的改动

.eslintignore

@@ -15,4 +15,6 @@ packages/core/types
 packages/extension/src/bpmn-adapter/xml2json.ts
 packages/extension/src/bpmn-adapter/json2xml.ts
 
+examples/vue3-memory-leak
+
 **/*.d.ts

DEVELOPER.md

@@ -0,0 +1,129 @@
+# developer tips
+
+## Start
+
+我们选用 fork 仓库，然后提交 PR 的形式进行开发。
+
+### clone 自己 fork 后的仓库
+
+```shell
+git clone <your forked repository>
+```
+
+### 安装项目依赖
+
+> 需要提前安装 yarn
+
+```shell
+npm run bootstrap
+```
+
+### 构建 types 并打包
+
+LF 使用 monorepo 的形式进行管理，各个 package 之间存在依赖关系，所以需要先构建一次类型和源码才能进行开发。
+
+```shell
+npm run build:types
+
+npm run build
+```
+
+### 启动本地开发
+
+开发 core 包
+
+```shell
+cd packages/core
+npm run dev
+
+# 或跳过以上“构建部分”直接运行
+npm run dev:core
+```
+
+开发 extension
+
+```shell
+cd packages/extension
+npm run dev
+
+# 或跳过以上“构建部分”直接运行
+npm run dev:extension
+```
+
+### 项目配置修改
+
+windows 和 mac 平台的换行不一致，windows 下是 CRLF，mac 下是 LF，因此 windows 系统下需要修改 eslint 规则：
+（如果 widows 配置了转换为 LF，此条不适用）
+
+```js
+{
+  rules: {
+    'linebreak-style': ['error', 'unix'],
+    // ...
+  }
+}
+
+// 改为
+{
+  rules: {
+    'linebreak-style': ['error', process.env.NODE_ENV === 'production' ? 'unix' : 'windows'],
+    // ...
+  }
+}
+```
+
+## Publish
+
+### clone 源码仓库
+
+```shell
+git clone [email protected]:didi/LogicFlow.git
+```
+
+### 源码打包
+
+```shell
+# 安装依赖
+npm run bootstrap
+
+# 构建 types
+npm run build:types
+
+# 打包
+npm run build
+```
+
+### 更改 npm 官方源
+
+```shell
+npm config set registry https://registry.npmjs.org/
+```
+
+### 本地登陆 npm
+
+```shell
+npm login
+
+# 查看是否已经登陆
+npm whoami
+```
+
+### 为项目添加 tags
+
+```shell
+lerna version patch
+```
+
+lerna version 的详细使用方式见[这里](https://github.com/lerna/lerna/tree/main/libs/commands/version#readme)
+
+### 发布版本
+
+```shell
+npm run lerna:publish
+```
+
+### 推 tag 到远端
+
+```shell
+git push origin --tags
+```

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

@@ -1,10 +1,10 @@
-import { map } from 'lodash-es'
+import { forEach, map } from 'lodash-es'
 import LogicFlow, { ElementState, LogicFlowUtil } from '@logicflow/core'
 import '@logicflow/core/es/index.css'
 
 import { Button, Card, Divider, Flex } from 'antd'
 import { useEffect, useRef } from 'react'
-import { combine, square, star, uml, user } from './nodes'
+import { combine, square, star, uml, user, reactNode } from './nodes'
 import { animation, connection } from './edges'
 
 import GraphConfigData = LogicFlow.GraphConfigData
@@ -84,6 +84,17 @@ const data: GraphConfigData = {
       x: 600,
       y: 200,
     },
+    {
+      id: 'custom-react-node-1',
+      text: {
+        x: 200,
+        y: 500,
+        value: 'custom-react-node',
+      },
+      type: 'custom-react-node',
+      x: 200,
+      y: 500,
+    },
   ],
   edges: [],
 }
@@ -103,6 +114,7 @@ export default function BasicNode() {
       star,
       uml,
       user,
+      reactNode,
     ]
 
     map(elements, (customElement) => {
@@ -112,7 +124,7 @@ export default function BasicNode() {
   const registerEvents = (lf: LogicFlow) => {
     lf.on('history:change', () => {
       const data = lf.getGraphData()
-      console.log(data)
+      console.log('history:change', data)
     })
   }
 
@@ -123,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,
@@ -249,8 +261,9 @@ export default function BasicNode() {
     const lf = lfRef.current
     if (lf) {
       const data = lf.getGraphData()
-      console.log(data)
+      console.log('current graph data', data)
       const refreshData = LogicFlowUtil.refreshGraphId(data)
+      console.log('after refresh graphId', data)
       lf.render(refreshData)
     }
   }
@@ -275,15 +288,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)
       })
     }
@@ -444,9 +457,6 @@ 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}>

examples/engine-browser-examples/src/pages/graph/nodes/ReactNode.tsx

@@ -0,0 +1,63 @@
+import ReactDOM from 'react-dom/client'
+import { ColorPicker, Space, Tooltip } from 'antd'
+import { CheckCircleTwoTone } from '@ant-design/icons'
+import { HtmlNode, HtmlNodeModel } from '@logicflow/core'
+
+export class CustomReactNodeModel extends HtmlNodeModel {
+  createId() {
+    return Math.random() + '_react_node'
+  }
+
+  setAttributes() {
+    const width = 200
+    const height = 130
+    this.width = width
+    this.height = height
+    this.textHeight = 60
+    this.text = {
+      ...this.text,
+      y: this.y - this.height / 2,
+    }
+
+    this.anchorsOffset = [
+      {
+        x: width / 2,
+        y: 0,
+        isSourceAnchor: false,
+        isTargetAnchor: true,
+      },
+    ]
+    // this.anchorsOffset = [
+    //   [width / 2, 0],
+    //   [0, height / 2],
+    //   [-width / 2, 0],
+    //   [0, -height / 2],
+    // ]
+  }
+}
+
+export class CustomReactNode extends HtmlNode {
+  setHtml(rootEl: SVGForeignObjectElement) {
+    const { properties } = this.props.model
+    console.log('properties', properties)
+
+    const el = document.createElement('div')
+    el.className = 'custom-react-node-wrapper'
+    ReactDOM.createRoot(el).render(
+      <Space direction="vertical">
+        <CheckCircleTwoTone twoToneColor="#52c41a" style={{ fontSize: 40 }} />
+        <ColorPicker defaultValue="#1677ff" size="large" showText />
+        <Tooltip title="prompt text">
+          <span>Show Tooltip</span>
+        </Tooltip>
+      </Space>,
+    )
+    rootEl.appendChild(el)
+  }
+}
+
+export default {
+  type: 'custom-react-node',
+  view: CustomReactNode,
+  model: CustomReactNodeModel,
+}

examples/engine-browser-examples/src/pages/graph/nodes/index.ts

@@ -3,11 +3,13 @@ import star from './star'
 import square from './square'
 import uml from './uml'
 import user from './user'
+import reactNode from './ReactNode'
 
 export * from './combine'
 export * from './star'
 export * from './square'
 export * from './uml'
 export * from './user'
+export * from './ReactNode'
 
-export { combine, square, star, uml, user }
+export { combine, square, star, uml, user, reactNode }