@logicflow/core 2.0.0-beta.0 → 2.0.0-beta.10

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 {

package/src/model/node/CircleNodeModel.ts

@@ -18,9 +18,11 @@ export type ICircleNodeProperties = {
   [key: string]: any
 }
 
-export class CircleNodeModel extends BaseNodeModel {
+export class CircleNodeModel<
+  P extends ICircleNodeProperties = ICircleNodeProperties,
+> extends BaseNodeModel<P> {
   modelType = ModelType.CIRCLE_NODE
-  @observable properties: ICircleNodeProperties = {}
+  // @observable properties: ICircleNodeProperties = {}
   @observable r = 50
 
   @computed get width(): number {
@@ -31,9 +33,9 @@ export class CircleNodeModel extends BaseNodeModel {
     return this.r * 2
   }
 
-  constructor(data: NodeConfig, graphModel: GraphModel) {
+  constructor(data: NodeConfig<P>, graphModel: GraphModel) {
     super(data, graphModel)
-    this.properties = data.properties || {}
+    // this.properties = data.properties || {}
 
     this.setAttributes()
   }
@@ -54,11 +56,11 @@ export class CircleNodeModel extends BaseNodeModel {
         theme: { circle },
       },
     } = this
-    const { style: customStyle } = this.properties
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
-      ...(customStyle ?? {}),
       ...cloneDeep(circle),
+      ...cloneDeep(customStyle),
     }
   }
 
@@ -81,7 +83,6 @@ export class CircleNodeModel extends BaseNodeModel {
     this.setProperties({
       r: width,
     })
-
     return this.getData()
   }
 }

package/src/model/node/DiamondNodeModel.ts

@@ -18,18 +18,20 @@ export type IDiamondNodeProperties = {
   style?: LogicFlow.CommonTheme
   textStyle?: LogicFlow.CommonTheme
 
-  [key: string]: any
+  [key: string]: unknown
 }
 
-export class DiamondNodeModel extends BaseNodeModel {
+export class DiamondNodeModel<
+  P extends IDiamondNodeProperties = IDiamondNodeProperties,
+> extends BaseNodeModel<P> {
   modelType = ModelType.DIAMOND_NODE
   @observable rx = 30
   @observable ry = 50
-  @observable properties: IDiamondNodeProperties = {}
+  // @observable properties: IDiamondNodeProperties = {}
 
-  constructor(data: NodeConfig, graphModel: GraphModel) {
+  constructor(data: NodeConfig<P>, graphModel: GraphModel) {
     super(data, graphModel)
-    this.properties = data.properties || {}
+    // this.properties = data.properties || {}
 
     this.setAttributes()
   }
@@ -53,9 +55,11 @@ export class DiamondNodeModel extends BaseNodeModel {
         theme: { diamond },
       },
     } = this
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
       ...cloneDeep(diamond),
+      ...cloneDeep(customStyle),
     }
   }
 
@@ -120,7 +124,6 @@ export class DiamondNodeModel extends BaseNodeModel {
       rx: width,
       ry: height,
     })
-
     return this.getData()
   }
 }

package/src/model/node/EllipseNodeModel.ts

@@ -16,18 +16,20 @@ export type IEllipseNodeProperties = {
   style?: LogicFlow.CommonTheme
   textStyle?: LogicFlow.CommonTheme
 
-  [key: string]: any
+  [key: string]: unknown
 }
 
-export class EllipseNodeModel extends BaseNodeModel {
+export class EllipseNodeModel<
+  P extends IEllipseNodeProperties = IEllipseNodeProperties,
+> extends BaseNodeModel<P> {
   modelType = ModelType.ELLIPSE_NODE
   @observable rx = 30
   @observable ry = 45
-  @observable properties: IEllipseNodeProperties = {}
+  // @observable properties: IEllipseNodeProperties = {}
 
-  constructor(data: NodeConfig, graphModel: GraphModel) {
+  constructor(data: NodeConfig<P>, graphModel: GraphModel) {
     super(data, graphModel)
-    this.properties = data.properties || {}
+    // this.properties = data.properties || {}
 
     this.setAttributes()
   }
@@ -51,9 +53,11 @@ export class EllipseNodeModel extends BaseNodeModel {
         theme: { ellipse },
       },
     } = this
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
       ...cloneDeep(ellipse),
+      ...cloneDeep(customStyle),
     }
   }
 
@@ -86,7 +90,6 @@ export class EllipseNodeModel extends BaseNodeModel {
       rx: width,
       ry: height,
     })
-
     return this.getData()
   }
 }

package/src/model/node/HtmlNodeModel.ts

@@ -3,26 +3,27 @@ import { Model } from '../BaseModel'
 import { ModelType } from '../../constant'
 
 import AnchorConfig = Model.AnchorConfig
-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
   textStyle?: LogicFlow.CommonTheme
 
-  [key: string]: any
+  [key: string]: unknown
 }
 
-export class HtmlNodeModel extends BaseNodeModel {
+export class HtmlNodeModel<
+  P extends IHtmlNodeProperties = IHtmlNodeProperties,
+> extends BaseNodeModel<P> {
   modelType = ModelType.HTML_NODE
-  @observable properties: IHtmlNodeModel = {}
+  // @observable properties: IHtmlNodeProperties = {}
 
-  constructor(data: LogicFlow.NodeConfig, graphModel: GraphModel) {
+  constructor(data: LogicFlow.NodeConfig<P>, graphModel: GraphModel) {
     super(data, graphModel)
-    this.properties = data.properties || {}
+    // this.properties = data.properties || {}
 
     this.setAttributes()
   }

package/src/model/node/PolygonNodeModel.ts

@@ -19,10 +19,12 @@ export type IPolygonNodeProperties = {
   style?: LogicFlow.CommonTheme
   textStyle?: LogicFlow.CommonTheme
 
-  [key: string]: any
+  [key: string]: unknown
 }
 
-export class PolygonNodeModel extends BaseNodeModel {
+export class PolygonNodeModel<
+  P extends IPolygonNodeProperties = IPolygonNodeProperties,
+> extends BaseNodeModel<P> {
   modelType = ModelType.POLYGON_NODE
   @observable points: PointTuple[] = [
     [50, 0],
@@ -36,11 +38,11 @@ export class PolygonNodeModel extends BaseNodeModel {
     // [10, 78],
     // [160, 198], // 五角星
   ]
-  @observable properties: IPolygonNodeProperties = {}
+  // @observable properties: IPolygonNodeProperties = {}
 
-  constructor(data: NodeConfig, graphModel: GraphModel) {
+  constructor(data: NodeConfig<P>, graphModel: GraphModel) {
     super(data, graphModel)
-    this.properties = data.properties || {}
+    // this.properties = data.properties || {}
 
     this.setAttributes()
   }
@@ -66,11 +68,11 @@ export class PolygonNodeModel extends BaseNodeModel {
         theme: { polygon },
       },
     } = this
-    const { style: customStyle } = this.properties
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
       ...cloneDeep(polygon),
-      ...(cloneDeep(customStyle) || {}),
+      ...cloneDeep(customStyle),
     }
   }
 

package/src/model/node/RectNodeModel.ts

@@ -5,33 +5,40 @@ import GraphModel from '../GraphModel'
 import LogicFlow from '../../LogicFlow'
 import { ModelType } from '../../constant'
 
-export type IRectNodeModel = {
+export type IRectNodeProperties = {
   width?: number
   height?: number
+  radius?: number
   style?: LogicFlow.CommonTheme
   textStyle?: LogicFlow.CommonTheme
 
-  [key: string]: any
+  [key: string]: unknown
 }
 
-export class RectNodeModel extends BaseNodeModel {
+export class RectNodeModel<
+  P extends IRectNodeProperties = IRectNodeProperties,
+> extends BaseNodeModel<P> {
   modelType = ModelType.RECT_NODE
   @observable radius = 0
-  @observable properties: IRectNodeModel = {}
+  // @observable properties: P
 
-  constructor(data: LogicFlow.NodeConfig, graphModel: GraphModel) {
+  constructor(data: LogicFlow.NodeConfig<P>, graphModel: GraphModel) {
     super(data, graphModel)
-    this.properties = data.properties || {}
 
+    // TODO：类字段初始化会覆盖 super、setAttributes 中设置的属性
+    // this.properties = data.properties || {}
+    // TODO: bug here, 上面更新 properties 会触发 setAttributes，下面再主动调用，会导致触发两次
     this.setAttributes()
   }
 
   setAttributes() {
     super.setAttributes()
 
-    const { width, height } = this.properties
+    const { width, height, radius } = this.properties
     if (width) this.width = width
     if (height) this.height = height
+    // 矩形特有
+    if (radius) this.radius = radius
   }
 
   getDefaultAnchor() {
@@ -43,13 +50,14 @@ export class RectNodeModel extends BaseNodeModel {
       { x: x - width / 2, y, id: `${this.id}_3` },
     ]
   }
-
   getNodeStyle() {
     const style = super.getNodeStyle()
     const { rect } = this.graphModel.theme
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
       ...cloneDeep(rect),
+      ...cloneDeep(customStyle),
     }
   }
 }

package/src/model/node/TextNodeModel.ts

@@ -3,18 +3,31 @@ import { computed } from 'mobx'
 import BaseNodeModel from './BaseNodeModel'
 import { ModelType } from '../../constant'
 import { getSvgTextWidthHeight } from '../../util'
+import LogicFlow from '../../LogicFlow'
 
-export class TextNodeModel extends BaseNodeModel {
+export type ITextNodeProperties = {
+  style?: LogicFlow.CommonTheme
+  textStyle?: LogicFlow.CommonTheme
+
+  [key: string]: unknown
+}
+
+export class TextNodeModel<
+  P extends ITextNodeProperties = ITextNodeProperties,
+> extends BaseNodeModel<P> {
   modelType = ModelType.TEXT_NODE
 
   getTextStyle() {
     const style = super.getTextStyle()
     const { text } = this.graphModel.theme
+    const { textStyle } = this.properties
     return {
       ...style,
       ...cloneDeep(text),
+      ...cloneDeep(textStyle),
     }
   }
+
   @computed get width(): number {
     const rows = String(this.text.value).split(/[\r\n]/g)
     const { fontSize } = this.getTextStyle()

package/src/options.ts

@@ -1,15 +1,17 @@
 import { assign } from 'lodash-es'
 import { createElement as h } from 'preact/compat'
 import LogicFlow from './LogicFlow'
-import { GraphModel } from './model'
 import { KeyboardDef } from './keyboard'
-import { DEFAULT_GRID_SIZE, OverlapMode } from './constant'
+import { OverlapMode, TextMode } from './constant'
+import { Grid } from './view/overlay'
+
+import GridOptions = Grid.GridOptions
 
 export namespace Options {
   import NodeData = LogicFlow.NodeData
   import EdgeData = LogicFlow.EdgeData
-  import ExtensionConstructor = LogicFlow.ExtensionConstructor
   import GraphData = LogicFlow.GraphData
+  import ExtensionType = LogicFlow.ExtensionType
   export type EdgeType = 'line' | 'polyline' | 'bezier' | string
   export type BackgroundConfig = {
     // 背景图片地址
@@ -25,19 +27,6 @@ export namespace Options {
     // TODO: 根据具体情况添加各种自定义样式
     [key: string]: any
   }
-  export type GridOptions = {
-    // 网格格子间距
-    size?: number
-    // 网格是否可见
-    visible?: boolean
-    graphModel?: GraphModel
-    // 网格类型
-    type?: 'dot' | 'mesh'
-    config?: {
-      color: string
-      thickness?: number
-    }
-  }
 
   export type AnimationConfig = {
     node: boolean
@@ -68,6 +57,9 @@ export namespace Options {
     width?: number
     height?: number
     background?: false | BackgroundConfig
+    /**
+     * Grid 网格配置
+     */
     grid?: number | boolean | GridOptions
 
     partial?: boolean
@@ -76,10 +68,15 @@ export namespace Options {
     edgeType?: EdgeType
     adjustEdge?: boolean
 
+    // 元素文本类型：text or label
+    textMode?: TextMode
+    edgeTextMode?: TextMode
+    nodeTextMode?: TextMode
+
     allowRotate?: boolean // 允许节点旋转
     allowResize?: boolean // 是否允许缩放
 
-    isSilentMode?: boolean
+    isSilentMode?: boolean // 是否为静默模式：可以简单理解为“只读”模式，这种模式下，画布中的节点和边不可移动，不可进行文案修改，没有锚点。
     stopScrollGraph?: boolean
     stopZoomGraph?: boolean
     stopMoveGraph?:
@@ -96,7 +93,7 @@ export namespace Options {
     guards?: GuardsConfig
     overlapMode?: OverlapMode
 
-    plugins?: ExtensionConstructor[]
+    plugins?: ExtensionType[]
     pluginsOptions?: Record<string, any>
     disabledPlugins?: string[]
     disabledTools?: string[]
@@ -117,47 +114,15 @@ export namespace Options {
 
 export namespace Options {
   export function get(options: Partial<Manual>) {
-    const { grid, ...others } = options
+    const { ...others } = options
     const container = options.container
-    if (container != null) {
-      if (options.width == null) {
-        others.width = container.clientWidth
-      }
-      if (options.height == null) {
-        others.height = container.clientHeight
-      }
-    } else {
+    if (!container) {
       throw new Error(
         'Ensure the container of LogicFlow is specified and valid.',
       )
     }
 
-    const result = assign({}, defaults, others) as Options.Definition
-
-    const defaultGrid: GridOptions = {
-      size: DEFAULT_GRID_SIZE,
-      type: 'dot',
-      visible: true,
-      config: {
-        color: '#ababab',
-        thickness: 1,
-      },
-    }
-    if (typeof grid === 'number') {
-      result.grid = {
-        ...defaultGrid,
-        size: grid,
-      }
-    } else if (typeof grid === 'boolean') {
-      result.grid = {
-        ...defaultGrid,
-        visible: grid,
-      }
-    } else {
-      result.grid = { ...defaultGrid, ...grid }
-    }
-
-    return result
+    return assign({}, defaults, others) as Options.Definition
   }
 }