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

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

@@ -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
@@ -10,8 +10,8 @@ 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 = {
     // 背景图片地址
@@ -68,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?:
@@ -88,7 +93,7 @@ export namespace Options {
     guards?: GuardsConfig
     overlapMode?: OverlapMode
 
-    plugins?: ExtensionConstructor[]
+    plugins?: ExtensionType[]
     pluginsOptions?: Record<string, any>
     disabledPlugins?: string[]
     disabledTools?: string[]
@@ -111,22 +116,13 @@ export namespace Options {
   export function get(options: Partial<Manual>) {
     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
-
-    return result
+    return assign({}, defaults, others) as Options.Definition
   }
 }
 

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
   }
 }