@logicflow/core 2.0.0-beta.4 → 2.0.0-beta.6

package/src/model/edge/BaseEdgeModel.ts

@@ -1,5 +1,5 @@
 import { assign, cloneDeep, find, isUndefined } from 'lodash-es'
-import { action, computed, observable, toJS } from 'mobx'
+import { action, computed, isObservable, observable, toJS } from 'mobx'
 import { BaseNodeModel, GraphModel, Model } from '..'
 import LogicFlow from '../../LogicFlow'
 import {
@@ -15,6 +15,7 @@ import {
   ElementType,
   ModelType,
   OverlapMode,
+  TextMode,
 } from '../../constant'
 
 import Point = LogicFlow.Point
@@ -57,6 +58,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
   @observable startPoint!: Point
   @observable endPoint!: Point
 
+  @observable textMode = TextMode.TEXT
   @observable text: Required<TextConfig> = {
     value: '',
     x: 0,
@@ -84,7 +86,6 @@ export class BaseEdgeModel implements IBaseEdgeModel {
   graphModel: GraphModel
   @observable zIndex: number = 0
   @observable state = ElementState.DEFAULT
-
   modelType = ModelType.EDGE
   additionStateData?: Model.AdditionStateDataType
 
@@ -183,7 +184,6 @@ export class BaseEdgeModel implements IBaseEdgeModel {
       ...this.graphModel.theme.edgeAdjust,
     }
   }
-
   /**
    * 自定义边文本样式
    *
@@ -374,16 +374,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,
@@ -391,9 +398,6 @@ export class BaseEdgeModel implements IBaseEdgeModel {
         value,
       }
     }
-    if (this.graphModel.overlapMode === OverlapMode.INCREASE) {
-      data.zIndex = this.zIndex
-    }
     return data
   }
 
@@ -493,6 +497,14 @@ export class BaseEdgeModel implements IBaseEdgeModel {
     }
   }
 
+  /**
+   * 设置当前元素的文本模式
+   * @param mode
+   */
+  @action setTextMode(mode: TextMode) {
+    this.textMode = mode
+  }
+
   /**
    * 内部方法，处理初始化文本格式
    */
@@ -530,7 +542,6 @@ export class BaseEdgeModel implements IBaseEdgeModel {
     }
     this.text = textConfig
   }
-
   /**
    * 重置文本位置
    */
@@ -544,15 +555,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)
@@ -155,7 +152,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/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
@@ -48,15 +48,13 @@ export class PolylineEdgeModel extends BaseEdgeModel {
   }
 
   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 +67,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 +184,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 +436,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 +572,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 +595,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, isUndefined, 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
@@ -41,7 +42,6 @@ export interface IBaseNodeModel extends Model.BaseModel {
   isShowAnchor: boolean
   getNodeStyle: () => CommonTheme
   getTextStyle: () => LogicFlow.TextNodeTheme
-
   setIsShowAnchor: (isShowAnchor: boolean) => void
 }
 
@@ -54,6 +54,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,
@@ -188,6 +189,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) {
       this.zIndex = data.zIndex || getZIndex()
@@ -216,6 +218,14 @@ export class BaseNodeModel implements IBaseNodeModel {
     return null
   }
 
+  /**
+   * 设置当前元素的文本模式
+   * @param mode
+   */
+  @action setTextMode(mode: TextMode) {
+    this.textMode = mode
+  }
+
   /**
    * 始化文本属性
    */
@@ -265,7 +275,6 @@ export class BaseNodeModel implements IBaseNodeModel {
       width,
       height,
     })
-
     return this.getData()
   }
 
@@ -584,10 +593,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,
     }
   }
 
@@ -691,12 +700,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

package/src/model/node/CircleNodeModel.ts

@@ -81,7 +81,6 @@ export class CircleNodeModel extends BaseNodeModel {
     this.setProperties({
       r: width,
     })
-
     return this.getData()
   }
 }

package/src/model/node/DiamondNodeModel.ts

@@ -122,7 +122,6 @@ export class DiamondNodeModel extends BaseNodeModel {
       rx: width,
       ry: height,
     })
-
     return this.getData()
   }
 }

package/src/model/node/EllipseNodeModel.ts

@@ -88,7 +88,6 @@ export class EllipseNodeModel extends BaseNodeModel {
       rx: width,
       ry: height,
     })
-
     return this.getData()
   }
 }

package/src/options.ts

@@ -2,7 +2,7 @@ import { assign } from 'lodash-es'
 import { createElement as h } from 'preact/compat'
 import LogicFlow from './LogicFlow'
 import { KeyboardDef } from './keyboard'
-import { OverlapMode } from './constant'
+import { OverlapMode, TextMode } from './constant'
 import { Grid } from './view/overlay'
 
 import GridOptions = Grid.GridOptions
@@ -68,6 +68,11 @@ export namespace Options {
     edgeType?: EdgeType
     adjustEdge?: boolean
 
+    // 元素文本类型：text or label
+    textMode?: TextMode
+    edgeTextMode?: TextMode
+    nodeTextMode?: TextMode
+
     allowRotate?: boolean // 允许节点旋转
     allowResize?: boolean // 是否允许缩放
 

package/src/tool/MultipleSelectTool.tsx

@@ -1,16 +1,16 @@
 import { Component } from 'preact/compat'
+import { IToolProps } from '.'
 import { Model, observer } from '..'
 import LogicFlow from '../LogicFlow'
 import { StepDrag, IDragParams } from '../util'
 import { ElementType, EventType } from '../constant'
 import { getNodeOutline, getEdgeOutline } from '../algorithm/outline'
-import { IToolProps } from './tool'
 
 import GraphData = LogicFlow.GraphData
 
 @observer
 export default class MultipleSelect extends Component<IToolProps> {
-  static toolName = 'multipleSelect'
+  static toolName = 'multiple-select-tool'
   stepDrag: StepDrag
 
   constructor(props: IToolProps) {
@@ -40,13 +40,13 @@ export default class MultipleSelect extends Component<IToolProps> {
       clientY,
       ctrlKey,
     })
-    this.props.logicFlow.container
+    this.props.lf.container
       ?.querySelector('.lf-canvas-overlay[name="canvas-overlay"]')
       ?.dispatchEvent(newEvent)
   }
   onDragging = ({ deltaX, deltaY }: IDragParams) => {
-    const { graphModel, logicFlow } = this.props
-    const { SCALE_X, SCALE_Y } = logicFlow.getTransform()
+    const { graphModel, lf } = this.props
+    const { SCALE_X, SCALE_Y } = lf.getTransform()
     const selectElements = graphModel.getSelectElements(true)
     graphModel.moveNodes(
       selectElements.nodes.map((node) => node.id),
@@ -88,7 +88,7 @@ export default class MultipleSelect extends Component<IToolProps> {
     const {
       graphModel: { selectElements, transformModel },
     } = this.props
-    const { SCALE_X, SCALE_Y } = this.props.logicFlow.getTransform()
+    const { SCALE_X, SCALE_Y } = this.props.lf.getTransform()
     if (selectElements.size <= 1) return
     let x = Number.MAX_SAFE_INTEGER
     let y = Number.MAX_SAFE_INTEGER

package/src/tool/TextEditTool.tsx

@@ -1,7 +1,7 @@
-import { createRef, Component } from 'preact'
+import { createRef, Component } from 'preact/compat'
+import { IToolProps } from '.'
 import { ElementState, observer } from '..'
 import { ElementType, EventType, ModelType } from '../constant'
-import { IToolProps } from './tool'
 
 type IState = {
   style: {
@@ -12,7 +12,7 @@ type IState = {
 
 @observer
 export class TextEditTool extends Component<IToolProps, IState> {
-  static toolName = 'textEdit'
+  static toolName = 'text-edit-tool'
   ref = createRef()
   __prevText = {
     type: '',

package/src/tool/index.ts

@@ -1,2 +1,96 @@
-export * from './tool'
-export * from './snapline'
+import { Component, ReactElement } from 'preact/compat'
+import { action, observable } from 'mobx'
+import { forEach } from 'lodash-es'
+import TextEdit from './TextEditTool'
+import MultipleSelect from './MultipleSelectTool'
+import LogicFlow from '../LogicFlow'
+import { ElementState, EventType } from '../constant'
+import { GraphModel, BaseEdgeModel, BaseNodeModel } from '../model'
+
+export type IToolProps = {
+  lf: LogicFlow
+  graphModel: GraphModel
+  textEditElement?: BaseNodeModel | BaseEdgeModel
+}
+
+type ToolConstructor = new (props: IToolProps) => Component<IToolProps>
+
+// 默认内置的工具
+const defaultTools = [TextEdit, MultipleSelect]
+
+export class Tool {
+  tools?: Component[]
+  components?: ReactElement<IToolProps>[]
+  @observable toolMap = new Map<string, ToolConstructor>()
+
+  disabledToolMap = new Map<string, ToolConstructor>()
+  instance: LogicFlow
+
+  constructor(instance: LogicFlow) {
+    this.instance = instance
+    forEach(defaultTools, (tool) => {
+      if (!this.isDisabled(tool.toolName)) {
+        this.registerTool(tool.toolName, tool)
+      }
+    })
+
+    // @see https://github.com/didi/LogicFlow/issues/152
+    const { graphModel } = instance
+    const { eventCenter } = graphModel
+    eventCenter.on(
+      `${EventType.GRAPH_TRANSFORM},${EventType.NODE_CLICK},${EventType.BLANK_CLICK} `,
+      () => {
+        const {
+          textEditElement,
+          editConfigModel: { edgeTextEdit, nodeTextEdit },
+        } = graphModel
+        // fix #826, 保留之前的文本可以编辑点击空白才设置为不可编辑。如果以后有其他需求再改。
+        if ((edgeTextEdit || nodeTextEdit) && textEditElement) {
+          graphModel.textEditElement?.setElementState(ElementState.DEFAULT)
+        }
+      },
+    )
+  }
+
+  private isDisabled(toolName) {
+    return this.instance.options.disabledTools?.indexOf(toolName) !== -1
+  }
+
+  // 注册工具
+  registerTool(name: string, component: ToolConstructor) {
+    this.toolMap.set(name, component)
+  }
+
+  // 禁用工具
+  @action
+  disableTool(name: string): boolean | Error {
+    const tool = this.toolMap.get(name)
+    if (tool) {
+      this.disabledToolMap.set(name, tool)
+      this.toolMap.delete(name)
+      return true
+    }
+    throw new Error('禁用失败，不存在名为 ${tool} 的工具')
+  }
+
+  @action
+  enableTool(name: string): boolean | Error {
+    const tool = this.disabledToolMap.get(name)
+    if (tool) {
+      this.toolMap.set(name, tool)
+      this.disabledToolMap.delete(name)
+      return true
+    }
+    throw new Error('不存在名为 ${tool} 的工具')
+  }
+
+  getTools() {
+    return Array.from(this.toolMap.values())
+  }
+
+  getInstance() {
+    return this.instance
+  }
+}
+
+export default Tool

package/src/util/drag.ts

@@ -10,7 +10,7 @@ const LEFT_MOUSE_BUTTON_CODE = 0
 export type IDragParams = {
   deltaX: number
   deltaY: number
-  event: MouseEvent | null
+  event?: MouseEvent
   [key: string]: unknown
 }
 
@@ -23,9 +23,16 @@ export type ICreateDragParams = {
 }
 
 export type IStepperDragProps = {
-  eventType?: 'NODE' | 'BLANK' | 'SELECTION' | 'ADJUST_POINT' | ''
+  eventType?:
+    | 'NODE'
+    | 'BLANK'
+    | 'SELECTION'
+    | 'ADJUST_POINT'
+    | 'TEXT'
+    | 'LABEL'
+    | ''
   eventCenter?: EventEmitter
-  model?: Model.BaseModel | null
+  model?: Model.BaseModel | unknown
   data?: Record<string, unknown>
   [key: string]: unknown
 } & Partial<ICreateDragParams>
@@ -39,9 +46,16 @@ export class StepDrag {
 
   step: number
   isStopPropagation: boolean
-  eventType: 'NODE' | 'BLANK' | 'SELECTION' | 'ADJUST_POINT' | ''
+  eventType:
+    | 'NODE'
+    | 'BLANK'
+    | 'SELECTION'
+    | 'ADJUST_POINT'
+    | 'TEXT'
+    | 'LABEL'
+    | ''
   eventCenter?: EventEmitter
-  model?: Model.BaseModel | null
+  model?: Model.BaseModel | any // TODO: 如何兼容 LabelModel 类型。 LabelModel 能否是 BaseModel 的实现呢？
   data?: Record<string, unknown>
 
   // 运行时
@@ -141,6 +155,8 @@ export class StepDrag {
           event: e,
         })
         this.eventCenter?.emit(EventType[`${this.eventType}_MOUSEMOVE`], {
+          deltaX,
+          deltaY,
           e,
           data: this.data || elementData,
         })
@@ -180,7 +196,7 @@ export class StepDrag {
 
     DOC.removeEventListener('mousemove', this.handleMouseMove, false)
     DOC.removeEventListener('mouseup', this.handleMouseUp, false)
-    this.onDragEnd({ event: null })
+    this.onDragEnd({ event: undefined })
     this.isDragging = false
   }
 }