fix: npm 包 dependencies 中新增 lodash-es 依赖，解决引入项目中报错的问题

 - 开发节点文本换行等体验优化的功能
 - 解决 examples 中报错的问题

Author: boyongjiong

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

@@ -59,7 +59,7 @@ const customTheme: Partial<LogicFlow.Theme> = {
     lineHeight: 1.5,
     fontSize: 13,
     textWidth: 100,
-  }, // 确认 textWidth 是否必传
+  }, // 确认 textWidth 是否必传 ❓
   polyline: {
     stroke: 'red',
   },

examples/feature-examples/src/pages/nodes/native/index.tsx

@@ -52,7 +52,12 @@ const data = {
       type: 'circle',
       x: 350,
       y: 100,
-      text: '圆形',
+      properties: {},
+      text: {
+        x: 350,
+        y: 100,
+        value: '圆形射门来问\n撒发啊乐趣\n撒旦法捡垃圾二楼飒飒饭店\n阿萨德刚撒',
+      },
     },
     {
       id: '3',
@@ -108,6 +113,7 @@ export default function BasicNode() {
 
       lf.render(data)
       lfRef.current = lf
+      ;(window as any).lf = lf
     }
   }, [])
 

examples/feature-examples/src/pages/react/Portal.tsx

@@ -7,6 +7,7 @@ import {
 } from '@logicflow/react-node-registry'
 import { Button, Card, Divider } from 'antd'
 
+import '@logicflow/core/es/index.css'
 import styles from './index.less'
 
 const LFReactPortalProvider = Portal.getProvider() // 注意，一个 LogicFlow 实例只能生命一个 portal provider

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

@@ -2,8 +2,8 @@ import React, { FC } from 'react'
 import LogicFlow from '@logicflow/core'
 import { register, ReactNodeProps } from '@logicflow/react-node-registry'
 import { Card } from 'antd'
-import '@logicflow/core/es/index.css'
 
+import '@logicflow/core/es/index.css'
 import styles from './index.less'
 
 const NodeComponent: FC<ReactNodeProps> = ({ node }) => {

packages/core/package.json

@@ -40,6 +40,7 @@
   "author": "Logicflow-Team",
   "license": "Apache-2.0",
   "dependencies": {
+    "lodash-es": "^4.17.21",
     "classnames": "^2.3.2",
     "mobx": "^5.15.7",
     "mobx-preact": "^3.0.0",

packages/core/src/LogicFlow.tsx

@@ -1433,9 +1433,12 @@ export namespace LogicFlow {
   }
   export type TextConfig = {
     value: string
+    x: number
+    y: number
     editable?: boolean
     draggable?: boolean
-  } & Position
+    // overflowMode?: 'default' | 'autoWrap' | 'ellipsis'
+  }
 
   export type AppendConfig = {
     startIndex: number
@@ -1651,13 +1654,15 @@ export namespace LogicFlow {
      * ellipsis: 超出省略
      */
     overflowMode?: 'default' | 'autoWrap' | 'ellipsis'
+    textWidth?: number
     background?: RectTheme
     /**
      * 背景区域 padding
      * wrapPadding: '5px,10px'
      */
     wrapPadding?: string
   } & TextTheme
+
   // 边上文本样式
   export type EdgeTextTheme = {
     textWidth: number

packages/core/src/model/edge/BaseEdgeModel.ts

@@ -1,4 +1,4 @@
-import { assign, cloneDeep, find } from 'lodash-es'
+import { assign, cloneDeep, find, isUndefined } from 'lodash-es'
 import { action, computed, observable, toJS } from 'mobx'
 import { BaseNodeModel, GraphModel, Model } from '..'
 import LogicFlow from '../../LogicFlow'
@@ -20,6 +20,7 @@ import {
 import Point = LogicFlow.Point
 import EdgeData = LogicFlow.EdgeData
 import EdgeConfig = LogicFlow.EdgeConfig
+import TextConfig = LogicFlow.TextConfig
 
 export interface IBaseEdgeModel extends Model.BaseModel {
   /**
@@ -56,7 +57,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
   @observable startPoint!: Point
   @observable endPoint!: Point
 
-  @observable text = {
+  @observable text: Required<TextConfig> = {
     value: '',
     x: 0,
     y: 0,
@@ -431,8 +432,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
 
   /**
    * 设置边的属性，会触发重新渲染
-   * @param key 属性名
-   * @param val 属性值
+   * @param properties 要更新的 properties，会做合并
    */
   @action
   setProperties(properties: Record<string, any>): void {
@@ -497,28 +497,38 @@ export class BaseEdgeModel implements IBaseEdgeModel {
    * 内部方法，处理初始化文本格式
    */
   @action formatText(data: EdgeConfig) {
-    // 暂时处理，只传入text的情况
     const { x, y } = this.textPosition
-    if (!data.text || typeof data.text === 'string') {
-      this.text = {
-        value: data.text || '',
-        x,
-        y,
-        draggable: this.text.draggable,
-        editable: this.text.editable,
-      }
-      return
+    const { text } = data
+    let textConfig: Required<TextConfig> = {
+      value: '',
+      x,
+      y,
+      draggable: false,
+      editable: true,
     }
 
-    if (Object.prototype.toString.call(data.text) === '[object Object]') {
-      this.text = {
-        x: data.text.x || x,
-        y: data.text.y || y,
-        value: data.text.value || '',
-        draggable: this.text.draggable,
-        editable: this.text.editable,
+    if (text) {
+      if (typeof text === 'string') {
+        textConfig = {
+          ...textConfig,
+          value: text,
+        }
+      } else {
+        textConfig = {
+          ...textConfig,
+          x: text.x ?? x,
+          y: text.y ?? y,
+          value: text.value ?? '',
+        }
+        if (!isUndefined(text.draggable)) {
+          textConfig.draggable = text.draggable
+        }
+        if (!isUndefined(text.editable)) {
+          textConfig.editable = text.editable
+        }
       }
     }
+    this.text = textConfig
   }
 
   /**

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

@@ -1,5 +1,5 @@
 import { action, computed, isObservable, observable, toJS } from 'mobx'
-import { assign, cloneDeep, has, isNil, mapKeys } from 'lodash-es'
+import { assign, cloneDeep, has, isNil, isUndefined, mapKeys } from 'lodash-es'
 import { GraphModel, Model } from '..'
 import LogicFlow from '../../LogicFlow'
 import {
@@ -186,6 +186,7 @@ export class BaseNodeModel implements IBaseNodeModel {
     }
 
     this.formatText(data)
+    // 在下面又将 NodeConfig 中的数据赋值给了 this，应该会触发 setAttributes，确认是否符合预期
     assign(this, pickNodeConfig(data)) // TODO: 确认 constructor 中赋值 properties 是否必要
     const { overlapMode } = this.graphModel
     if (overlapMode === OverlapMode.INCREASE) {
@@ -219,27 +220,34 @@ export class BaseNodeModel implements IBaseNodeModel {
    * 始化文本属性
    */
   private formatText(data: NodeConfig): void {
-    if (!data.text) {
-      data.text = {
-        value: '',
-        x: data.x,
-        y: data.y,
-        draggable: false,
-        editable: true,
-      }
-    } else {
-      if (typeof data.text === 'string') {
-        data.text = {
-          value: data.text,
-          x: data.x,
-          y: data.y,
-          draggable: false,
-          editable: true,
-        }
+    const { x, y, text } = data
+    let textConfig: TextConfig = {
+      value: '',
+      x,
+      y,
+      draggable: false,
+      editable: true,
+    }
+    if (text) {
+      if (typeof text === 'string') {
+        textConfig.value = text
       } else {
-        data.text.editable = data.text.editable ?? true
+        textConfig = {
+          ...textConfig,
+          x: text.x ?? x,
+          y: text.y ?? y,
+          value: text.value ?? '',
+        }
+        if (!isUndefined(text.draggable)) {
+          textConfig.draggable = text.draggable
+        }
+        if (!isUndefined(text.editable)) {
+          textConfig.draggable = text.draggable
+        }
       }
     }
+
+    data.text = textConfig
   }
 
   /**

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

@@ -31,7 +31,7 @@ export class DiamondNodeModel extends BaseNodeModel {
     super(data, graphModel)
     this.properties = data.properties || {}
 
-    this.setAttributes()
+    // this.setAttributes()
   }
 
   setAttributes() {

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

@@ -7,7 +7,7 @@ import { observable } from 'mobx'
 import LogicFlow from '../../LogicFlow'
 import GraphModel from '../GraphModel'
 
-export type IHtmlNodeModel = {
+export type IHtmlNodeProperties = {
   width?: number
   height?: number
   style?: LogicFlow.CommonTheme
@@ -18,7 +18,7 @@ export type IHtmlNodeModel = {
 
 export class HtmlNodeModel extends BaseNodeModel {
   modelType = ModelType.HTML_NODE
-  @observable properties: IHtmlNodeModel = {}
+  @observable properties: IHtmlNodeProperties = {}
 
   constructor(data: LogicFlow.NodeConfig, graphModel: GraphModel) {
     super(data, graphModel)

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

@@ -23,6 +23,7 @@ export class RectNodeModel extends BaseNodeModel {
     super(data, graphModel)
     this.properties = data.properties || {}
 
+    // TODO: bug here, 上面更新 properties 会触发 setAttributes，下面再主动调用，会导致触发两次
     this.setAttributes()
   }
 

packages/core/src/tool/tool.ts

@@ -3,8 +3,8 @@ import { VNode } from 'preact'
 import TextEdit from './TextEditTool'
 import MultipleSelect from './MultipleSelectTool'
 import LogicFlow from '../LogicFlow'
-import { GraphModel, BaseEdgeModel, BaseNodeModel } from '../model'
 import { ElementState, EventType } from '../constant'
+import { GraphModel, BaseEdgeModel, BaseNodeModel } from '../model'
 
 export type IToolProps = {
   textEditElement?: BaseNodeModel | BaseEdgeModel

packages/core/src/view/shape/Text.tsx

@@ -10,7 +10,7 @@ export type ITextProps = {
   value: string
   fontSize?: number
   fill?: string
-  overflowMode?: string | 'default' | 'ellipsis'
+  overflowMode?: 'default' | 'autoWrap' | 'ellipsis'
   textWidth?: number
   lineHeight?: number
   fontFamily?: string | null
@@ -68,10 +68,10 @@ export function Text(props: ITextProps): h.JSX.Element | null {
     }
 
     if (rowsLength > 1) {
-      const tSpans = rows.map((row, i) => {
+      const tSpans = rows.map((row, idx) => {
         // 保证文字居中，文字 Y 轴偏移为当前行数对应中心行数的偏移行 * 行高
         const tSpanLineHeight = fontSize + 2
-        const offsetY = (i - (rowsLength - 1) / 2) * tSpanLineHeight
+        const offsetY = (idx - (rowsLength - 1) / 2) * tSpanLineHeight
         return (
           <tspan className="lf-text-tspan" x={x} y={y + offsetY}>
             {row}
@@ -137,6 +137,7 @@ export function renderHtmlText(props: ITextProps): h.JSX.Element {
         height={foreignObjectHeight}
         x={x - textRealWidth / 2}
         y={y - foreignObjectHeight / 2}
+        style={{ overflow: 'visible', textAlign: 'left' }}
       >
         <div
           className="lf-node-text-auto-wrap"

packages/extension/package.json

@@ -39,8 +39,11 @@
     "@logicflow/core": "workspace:*"
   },
   "dependencies": {
+    "lodash-es": "^4.17.21",
     "@antv/hierarchy": "^0.6.11",
-    "@logicflow/core": "workspace:*",
+    "@logicflow/core": "workspace:*"
+  },
+  "devDependencies": {
     "preact": "^10.17.1"
   }
 }

packages/react-node-registry/package.json

@@ -41,6 +41,7 @@
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "lodash-es": "^4.17.21"
   }
 }

packages/vue-node-registry/package.json

@@ -35,7 +35,8 @@
   "peerDependencies": {
     "@logicflow/core": "workspace:*",
     "@vue/composition-api": "^1.0.0-rc.1",
-    "vue": "^2.0.0 || >=3.0.0"
+    "vue": "^2.0.0 || >=3.0.0",
+    "lodash-es": "^4.17.21"
   },
   "peerDependenciesMeta": {
     "@vue/composition-api": {