@logicflow/core 2.0.0-beta.1 → 2.0.0-beta.11

package/src/model/edge/BaseEdgeModel.ts

@@ -1,5 +1,5 @@
-import { assign, cloneDeep, find } from 'lodash-es'
-import { action, computed, observable, toJS } from 'mobx'
+import { assign, cloneDeep, find, isUndefined } from 'lodash-es'
+import { action, computed, isObservable, observable, toJS } from 'mobx'
 import { BaseNodeModel, GraphModel, Model } from '..'
 import LogicFlow from '../../LogicFlow'
 import {
@@ -15,17 +15,22 @@ import {
   ElementType,
   ModelType,
   OverlapMode,
+  TextMode,
 } from '../../constant'
 
 import Point = LogicFlow.Point
 import EdgeData = LogicFlow.EdgeData
 import EdgeConfig = LogicFlow.EdgeConfig
+import TextConfig = LogicFlow.TextConfig
+import PropertiesType = LogicFlow.PropertiesType
 
-export interface IBaseEdgeModel extends Model.BaseModel {
+export interface IBaseEdgeModel<P extends PropertiesType>
+  extends Model.BaseModel<P> {
   /**
    * model 基础类型，固定为 edge
    */
   readonly BaseType: ElementType.EDGE
+  properties: P
 
   sourceNodeId: string
   targetNodeId: string
@@ -44,7 +49,9 @@ export interface IBaseEdgeModel extends Model.BaseModel {
   arrowConfig?: LogicFlow.ArrowConfig
 }
 
-export class BaseEdgeModel implements IBaseEdgeModel {
+export class BaseEdgeModel<P extends PropertiesType = PropertiesType>
+  implements IBaseEdgeModel<P>
+{
   readonly BaseType = ElementType.EDGE
   static BaseType: ElementType = ElementType.EDGE
 
@@ -56,14 +63,15 @@ export class BaseEdgeModel implements IBaseEdgeModel {
   @observable startPoint!: Point
   @observable endPoint!: Point
 
-  @observable text = {
+  @observable textMode = TextMode.TEXT
+  @observable text: Required<TextConfig> = {
     value: '',
     x: 0,
     y: 0,
     draggable: false,
     editable: true,
   }
-  @observable properties: Record<string, unknown> = {}
+  @observable properties: P
   @observable points = ''
   @observable pointsList: Point[] = []
 
@@ -83,7 +91,6 @@ export class BaseEdgeModel implements IBaseEdgeModel {
   graphModel: GraphModel
   @observable zIndex: number = 0
   @observable state = ElementState.DEFAULT
-
   modelType = ModelType.EDGE
   additionStateData?: Model.AdditionStateDataType
 
@@ -102,8 +109,10 @@ export class BaseEdgeModel implements IBaseEdgeModel {
   };
   [propName: string]: unknown // 支持自定义
 
-  constructor(data: EdgeConfig, graphModel: GraphModel) {
+  constructor(data: EdgeConfig<P>, graphModel: GraphModel) {
     this.graphModel = graphModel
+    this.properties = data.properties ?? ({} as P)
+
     this.initEdgeData(data)
     this.setAttributes()
   }
@@ -182,7 +191,6 @@ export class BaseEdgeModel implements IBaseEdgeModel {
       ...this.graphModel.theme.edgeAdjust,
     }
   }
-
   /**
    * 自定义边文本样式
    *
@@ -373,16 +381,23 @@ export class BaseEdgeModel implements IBaseEdgeModel {
    * @overridable 支持重写
    */
   getData(): EdgeData {
-    const { x, y, value } = this.text
+    let { properties } = this
+    if (isObservable(properties)) {
+      properties = toJS(properties)
+    }
     const data: EdgeData = {
       id: this.id,
       type: this.type,
+      properties,
       sourceNodeId: this.sourceNode.id,
       targetNodeId: this.targetNode.id,
       startPoint: assign({}, this.startPoint),
       endPoint: assign({}, this.endPoint),
-      properties: toJS(this.properties),
     }
+    if (this.graphModel.overlapMode === OverlapMode.INCREASE) {
+      data.zIndex = this.zIndex
+    }
+    const { x, y, value } = this.text
     if (value) {
       data.text = {
         x,
@@ -390,9 +405,6 @@ export class BaseEdgeModel implements IBaseEdgeModel {
         value,
       }
     }
-    if (this.graphModel.overlapMode === OverlapMode.INCREASE) {
-      data.zIndex = this.zIndex
-    }
     return data
   }
 
@@ -415,7 +427,12 @@ export class BaseEdgeModel implements IBaseEdgeModel {
    */
   @action
   setProperty(key: string, val: any): void {
-    this.properties[key] = formatData(val)
+    const preProperties = toJS(this.properties)
+    this.properties = {
+      ...preProperties,
+      [key]: formatData(val),
+    }
+
     this.setAttributes()
   }
 
@@ -431,8 +448,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
 
   /**
    * 设置边的属性，会触发重新渲染
-   * @param key 属性名
-   * @param val 属性值
+   * @param properties 要更新的 properties，会做合并
    */
   @action
   setProperties(properties: Record<string, any>): void {
@@ -493,34 +509,51 @@ export class BaseEdgeModel implements IBaseEdgeModel {
     }
   }
 
+  /**
+   * 设置当前元素的文本模式
+   * @param mode
+   */
+  @action setTextMode(mode: TextMode) {
+    this.textMode = mode
+  }
+
   /**
    * 内部方法，处理初始化文本格式
    */
   @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
   }
-
   /**
    * 重置文本位置
    */
@@ -534,15 +567,13 @@ export class BaseEdgeModel implements IBaseEdgeModel {
    * 移动边上的文本
    */
   @action moveText(deltaX: number, deltaY: number): void {
-    if (this.text) {
-      const { x, y, value, draggable, editable } = this.text
-      this.text = {
-        value,
-        draggable,
-        x: x + deltaX,
-        y: y + deltaY,
-        editable,
-      }
+    const { x, y, value, draggable, editable } = this.text
+    this.text = {
+      value,
+      editable,
+      draggable,
+      x: x + deltaX,
+      y: y + deltaY,
     }
   }
 

package/src/model/edge/BezierEdgeModel.ts

@@ -1,11 +1,11 @@
-import { cloneDeep } from 'lodash-es'
+import { assign, cloneDeep } from 'lodash-es'
 import { action, observable } from 'mobx'
 import BaseEdgeModel from './BaseEdgeModel'
 import { BaseNodeModel } from '../node'
 import LogicFlow from '../../LogicFlow'
+import GraphModel from '../GraphModel'
 import { ModelType } from '../../constant'
 import { getBezierControlPoints, IBezierControls } from '../../util'
-import GraphModel from '../GraphModel'
 
 import Point = LogicFlow.Point
 import EdgeConfig = LogicFlow.EdgeConfig
@@ -15,14 +15,11 @@ export class BezierEdgeModel extends BaseEdgeModel {
 
   offset!: number
   @observable path = ''
-
   constructor(data: EdgeConfig, graphModel: GraphModel) {
     super(data, graphModel)
-
     this.initEdgeData(data)
     this.setAttributes()
   }
-
   initEdgeData(data: EdgeConfig): void {
     this.offset = 100
     super.initEdgeData(data)
@@ -30,9 +27,11 @@ export class BezierEdgeModel extends BaseEdgeModel {
   getEdgeStyle() {
     const { bezier } = this.graphModel.theme
     const style = super.getEdgeStyle()
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
       ...cloneDeep(bezier),
+      ...cloneDeep(customStyle),
     }
   }
   getTextPosition(): Point {
@@ -155,7 +154,9 @@ export class BezierEdgeModel extends BaseEdgeModel {
       this.pointsList[2] = anchor
     }
     this.path = this.getPath(this.pointsList)
-    this.setText(Object.assign({}, this.text, this.textPosition))
+    if (this.text?.value) {
+      this.setText(assign({}, this.text, this.textPosition))
+    }
   }
   // 获取边调整的起点
   @action

package/src/model/edge/LineEdgeModel.ts

@@ -10,9 +10,11 @@ export class LineEdgeModel extends BaseEdgeModel {
   getEdgeStyle() {
     const { line } = this.graphModel.theme
     const style = super.getEdgeStyle()
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
       ...cloneDeep(line),
+      ...cloneDeep(customStyle),
     }
   }
   getTextPosition(): Point {

package/src/model/edge/PolylineEdgeModel.ts

@@ -1,4 +1,4 @@
-import { cloneDeep } from 'lodash-es'
+import { assign, cloneDeep } from 'lodash-es'
 import { observable, action } from 'mobx'
 import { BaseEdgeModel } from '.'
 import { BaseNodeModel, RectNodeModel, CircleNodeModel, Model } from '..'
@@ -25,7 +25,7 @@ import {
 import Point = LogicFlow.Point
 import Position = LogicFlow.Position
 import AppendConfig = LogicFlow.AppendConfig
-import ArchorConfig = Model.AnchorConfig
+import AnchorConfig = Model.AnchorConfig
 
 export class PolylineEdgeModel extends BaseEdgeModel {
   modelType = ModelType.POLYLINE_EDGE
@@ -41,22 +41,22 @@ export class PolylineEdgeModel extends BaseEdgeModel {
   getEdgeStyle() {
     const { polyline } = this.graphModel.theme
     const style = super.getEdgeStyle()
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
       ...cloneDeep(polyline),
+      ...cloneDeep(customStyle),
     }
   }
 
   getTextPosition() {
-    // 在文案为空的情况下，文案位置为双击位置
+    // 在文本为空的情况下，文本位置为双击位置
     const textValue = this.text?.value
     if (this.dbClickPosition && !textValue) {
       const { x, y } = this.dbClickPosition
-      return {
-        x,
-        y,
-      }
+      return { x, y }
     }
+    // 文本不为空或者没有双击位置时，取最长边的中点作为文本位置
     const currentPositionList = points2PointsList(this.points)
     const [p1, p2] = getLongestEdge(currentPositionList)
     return {
@@ -69,9 +69,9 @@ export class PolylineEdgeModel extends BaseEdgeModel {
   getAfterAnchor(
     direction: SegmentDirection,
     position: Position,
-    anchorList: ArchorConfig[],
+    anchorList: AnchorConfig[],
   ) {
-    let anchor: ArchorConfig
+    let anchor: AnchorConfig
     let minDistance: number
     anchorList.forEach((item) => {
       let distanceX: number
@@ -186,7 +186,7 @@ export class PolylineEdgeModel extends BaseEdgeModel {
     direction: SegmentDirection,
     positionType: string,
     position: Position,
-    anchorList: ArchorConfig[],
+    anchorList: AnchorConfig[],
     draggingPointList: Point[],
   ) {
     const pointList = draggingPointList.map((i) => i)
@@ -438,10 +438,13 @@ export class PolylineEdgeModel extends BaseEdgeModel {
     }
     this.updatePointsAfterDrag(draggingPointList)
     this.draggingPointList = draggingPointList
-    this.setText(Object.assign({}, this.text, this.textPosition))
+    // TODO: 判断该逻辑是否需要
+    if (this.text?.value) {
+      this.setText(assign({}, this.text, this.textPosition))
+    }
     return {
-      start: Object.assign({}, pointsList[startIndex]),
-      end: Object.assign({}, pointsList[endIndex]),
+      start: assign({}, pointsList[startIndex]),
+      end: assign({}, pointsList[endIndex]),
       startIndex,
       endIndex,
       direction,
@@ -571,10 +574,13 @@ export class PolylineEdgeModel extends BaseEdgeModel {
       this.updatePointsAfterDrag(draggingPointList)
       this.draggingPointList = draggingPointList
     }
-    this.setText(Object.assign({}, this.text, this.textPosition))
+    // TODO: 确认该判断逻辑是否需要
+    if (this.text?.value) {
+      this.setText(assign({}, this.text, this.textPosition))
+    }
     return {
-      start: Object.assign({}, pointsList[startIndex]),
-      end: Object.assign({}, pointsList[endIndex]),
+      start: assign({}, pointsList[startIndex]),
+      end: assign({}, pointsList[endIndex]),
       startIndex,
       endIndex,
       direction,
@@ -591,9 +597,9 @@ export class PolylineEdgeModel extends BaseEdgeModel {
       this.draggingPointList = []
       // 更新起终点
       const startPoint = pointsList[0]
-      this.startPoint = Object.assign({}, startPoint)
+      this.startPoint = assign({}, startPoint)
       const endPoint = pointsList[pointsList.length - 1]
-      this.endPoint = Object.assign({}, endPoint)
+      this.endPoint = assign({}, endPoint)
     }
     this.isDragging = false
   }

package/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, mapKeys, isUndefined } from 'lodash-es'
 import { GraphModel, Model } from '..'
 import LogicFlow from '../../LogicFlow'
 import {
@@ -17,6 +17,7 @@ import {
   EventType,
   ModelType,
   OverlapMode,
+  TextMode,
 } from '../../constant'
 import { ResizeControl } from '../../view/Control'
 import AnchorConfig = Model.AnchorConfig
@@ -26,26 +27,30 @@ import NodeConfig = LogicFlow.NodeConfig
 import NodeData = LogicFlow.NodeData
 import Point = LogicFlow.Point
 import CommonTheme = LogicFlow.CommonTheme
+import PropertiesType = LogicFlow.PropertiesType
 
 import ResizeInfo = ResizeControl.ResizeInfo
 import ResizeNodeData = ResizeControl.ResizeNodeData
 import PCTResizeParams = ResizeControl.PCTResizeParams
 
-export interface IBaseNodeModel extends Model.BaseModel {
+export interface IBaseNodeModel<P extends PropertiesType>
+  extends Model.BaseModel<P> {
   /**
    * model基础类型，固定为node
    */
   readonly BaseType: ElementType.NODE
+  properties: P
 
   isDragging: boolean
   isShowAnchor: boolean
   getNodeStyle: () => CommonTheme
   getTextStyle: () => LogicFlow.TextNodeTheme
-
   setIsShowAnchor: (isShowAnchor: boolean) => void
 }
 
-export class BaseNodeModel implements IBaseNodeModel {
+export class BaseNodeModel<P extends PropertiesType = PropertiesType>
+  implements IBaseNodeModel<P>
+{
   readonly BaseType = ElementType.NODE
   static BaseType: ElementType = ElementType.NODE
 
@@ -54,6 +59,7 @@ export class BaseNodeModel implements IBaseNodeModel {
   @observable readonly type = ''
   @observable x = 0
   @observable y = 0
+  @observable textMode = TextMode.TEXT
   @observable text: TextConfig = {
     value: '',
     x: 0,
@@ -61,7 +67,7 @@ export class BaseNodeModel implements IBaseNodeModel {
     draggable: false,
     editable: true,
   }
-  @observable properties: Record<string, unknown> = {}
+  @observable properties: P
   // 形状属性
   @observable private _width = 100
   public get width() {
@@ -100,8 +106,9 @@ export class BaseNodeModel implements IBaseNodeModel {
   @observable isHittable = true // 细粒度控制节点是否对用户操作进行反应
   @observable draggable = true
   @observable visible = true
-  @observable enableRotate = true
-  @observable enableResize = true
+
+  @observable rotatable = true // 节点可旋转
+  @observable resizable = true // 节点可缩放
 
   // 其它属性
   graphModel: GraphModel
@@ -137,9 +144,9 @@ export class BaseNodeModel implements IBaseNodeModel {
   hasSetSourceRules = false; // 用来限制rules的重复值
   [propName: string]: any // 支持用户自定义属性
 
-  constructor(data: NodeConfig, graphModel: GraphModel) {
+  constructor(data: NodeConfig<P>, graphModel: GraphModel) {
     this.graphModel = graphModel
-    this.properties = data.properties || {}
+    this.properties = data.properties ?? ({} as P)
 
     this.initNodeData(data)
     this.setAttributes()
@@ -168,9 +175,9 @@ export class BaseNodeModel implements IBaseNodeModel {
   /**
    * @overridable 可以重写
    * 初始化节点数据
-   * initNodeData和setAttributes的区别在于
-   * initNodeData只在节点初始化的时候调用，用于初始化节点的所有属性。
-   * setAttributes除了初始化调用外，还会在properties发生变化了调用。
+   * initNodeData 和 setAttributes 的区别在于
+   * initNodeData 只在节点初始化的时候调用，用于初始化节点的所有属性。
+   * setAttributes 除了初始化调用外，还会在 properties 发生变化了调用。
    */
   public initNodeData(data: NodeConfig) {
     if (!data.properties) {
@@ -186,7 +193,10 @@ export class BaseNodeModel implements IBaseNodeModel {
     }
 
     this.formatText(data)
-    assign(this, pickNodeConfig(data)) // TODO: 确认 constructor 中赋值 properties 是否必要
+    // 在下面又将 NodeConfig 中的数据赋值给了 this，应该会触发 setAttributes，确认是否符合预期
+    // TODO: 确认 constructor 中赋值 properties 是否必要，此处将 NodeConfig 中所有属性赋值给 this，包括 rotate、rotatable，resizable 等
+    assign(this, pickNodeConfig(data))
+
     const { overlapMode } = this.graphModel
     if (overlapMode === OverlapMode.INCREASE) {
       this.zIndex = data.zIndex || getZIndex()
@@ -215,31 +225,46 @@ export class BaseNodeModel implements IBaseNodeModel {
     return null
   }
 
+  /**
+   * 设置当前元素的文本模式
+   * @param mode
+   */
+  @action setTextMode(mode: TextMode) {
+    this.textMode = mode
+  }
+
   /**
    * 始化文本属性
    */
   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
   }
 
   /**
@@ -257,7 +282,6 @@ export class BaseNodeModel implements IBaseNodeModel {
       width,
       height,
     })
-
     return this.getData()
   }
 
@@ -343,7 +367,11 @@ export class BaseNodeModel implements IBaseNodeModel {
   getTextStyle() {
     // 透传 nodeText
     const { nodeText } = this.graphModel.theme
-    return cloneDeep(nodeText)
+    const { textStyle = {} } = this.properties
+    return {
+      ...cloneDeep(nodeText),
+      ...cloneDeep(textStyle),
+    }
   }
 
   /**
@@ -576,10 +604,10 @@ export class BaseNodeModel implements IBaseNodeModel {
    */
   public getBounds(): Model.BoxBoundsPoint {
     return {
-      x1: this.x - this.width / 2,
-      y1: this.y - this.height / 2,
-      x2: this.x + this.width / 2,
-      y2: this.y + this.height / 2,
+      minX: this.x - this.width / 2,
+      minY: this.y - this.height / 2,
+      maxX: this.x + this.width / 2,
+      maxY: this.y + this.height / 2,
     }
   }
 
@@ -683,12 +711,9 @@ export class BaseNodeModel implements IBaseNodeModel {
   @action moveTo(x: number, y: number, isIgnoreRule = false): boolean {
     const deltaX = x - this.x
     const deltaY = y - this.y
-    if (!isIgnoreRule && !this.isAllowMoveNode(deltaX, deltaY)) {
-      return false
-    }
-    if (this.text) {
-      this.text && this.moveText(deltaX, deltaY)
-    }
+    if (!isIgnoreRule && !this.isAllowMoveNode(deltaX, deltaY)) return false
+
+    this.text && this.moveText(deltaX, deltaY)
     this.x = x
     this.y = y
     return true
@@ -725,12 +750,12 @@ export class BaseNodeModel implements IBaseNodeModel {
     this.isShowAnchor = flag
   }
 
-  @action setEnableRotate(flag = true): void {
-    this.enableRotate = flag
+  @action setRotatable(flag = true): void {
+    this.rotatable = flag
   }
 
-  @action setEnableResize(flag = true): void {
-    this.enableResize = flag
+  @action setResizable(flag = true): void {
+    this.resizable = flag
   }
 
   @action setHitable(flag = true): void {