@logicflow/core 1.2.27 → 2.0.0-beta.0

package/src/history/index.ts

@@ -0,0 +1,112 @@
+import { debounce, isEqual, last, cloneDeep } from 'lodash-es'
+import { deepObserve, IDisposer } from 'mobx-utils'
+import LogicFlow from '..'
+import { GraphModel } from '../model'
+import { EventType } from '../constant'
+import EventEmitter from '../event/eventEmitter'
+
+import GraphData = LogicFlow.GraphData
+
+export class History {
+  undos: GraphData[] = []
+  redos: GraphData[] = []
+  callbacks = []
+  stopWatch: IDisposer | null = null
+  curData: GraphData | null = null
+  maxSize = 50
+  // 发生数据变化后，最多再等500ms，把距离上次的数据变更存储起来。
+  // 所以waitTime值越小，History对数据变化越敏感，存的undos就越细。
+  waitTime = 100
+  eventCenter: EventEmitter
+
+  constructor(eventCenter: EventEmitter) {
+    this.eventCenter = eventCenter
+  }
+
+  add(data: GraphData) {
+    if (isEqual(last(this.undos), data)) return
+    this.undos.push(data)
+    // 因为undo的时候，会触发add.
+    // 所以需要区分这个add是undo触发的，还是用户正常操作触发的。
+    // 如果是用户正常操作触发的，需要清空redos
+    if (!isEqual(this.curData, data)) {
+      this.redos = []
+    }
+    this.eventCenter.emit(EventType.HISTORY_CHANGE, {
+      data: {
+        undos: this.undos,
+        redos: this.redos,
+        undoAble: this.undoAble(),
+        redoAble: this.redoAble(),
+      },
+    })
+    if (this.undos.length > this.maxSize) {
+      this.undos.shift()
+    }
+  }
+
+  undoAble() {
+    // undos栈顶就是当前图渲染出来的数据。
+    return this.undos.length > 1
+  }
+
+  // 1) undo方法触发
+  // 2) graphModel重新渲染nodes和edges
+  // 3) graphModel发生变化，触发watch
+  // 4) watch触发add
+  undo() {
+    if (!this.undoAble()) return
+    const preData = this.undos.pop()!
+    this.redos.push(preData)
+    const curData = this.undos.pop()!
+    this.curData = cloneDeep(curData)
+    return curData
+  }
+
+  redoAble() {
+    return this.redos.length > 0
+  }
+
+  redo() {
+    if (!this.redoAble()) return
+    const curData = this.redos.pop()!
+    this.curData = cloneDeep(curData)
+    return curData
+  }
+
+  watch(model: GraphModel) {
+    this.stopWatch && this.stopWatch()
+
+    // 把当前watch的model转换一下数据存起来，无需清空redos。
+    this.undos.push(model.modelToGraphData())
+
+    this.stopWatch = deepObserve(
+      // TODO：避免用户触发「The same observable object cannot appear twice in the same tree」 错误
+      // 例如：在自定义节点的 setAttributes 方法中，将 nodeModel 属性赋值给另一个 observable 属性
+      // eg:
+      // setAttributes() {
+      //   this.width = 120
+      //   this.height = 50
+      //
+      //   if (this.text) {
+      //     this.properties.text = this.text;
+      //     this.text.value = '';
+      //   }
+      // }
+      // 解决方案：使用 cloneDeep 方法，将 observable 对象克隆一份。需要测试下面操作是否会造成其它问题
+      // https://stackoverflow.com/questions/55328504/a-node-cannot-exists-twice-in-the-state-tree-mobx-state-tree
+      // cloneDeep(model),
+      model,
+      debounce(() => {
+        // 数据变更后，把最新的当前model数据存起来，并清空 redos。
+        // 因为这个回调函数的触发，一般是用户交互而引起的，所以按正常逻辑需要清空 redos。
+        const data = model.modelToHistoryData()
+        if (data) {
+          this.add({ ...data })
+        }
+      }, this.waitTime),
+    )
+  }
+}
+
+export default History

package/src/index.less

@@ -0,0 +1 @@
+@import url('./style/index');

package/src/index.ts

@@ -0,0 +1,21 @@
+import { observer as mobxObserver } from 'mobx-preact'
+import { createElement as h, createRef, Component } from 'preact/compat'
+import LogicFlow from './LogicFlow'
+
+import * as LogicFlowUtil from './util'
+
+export function observer<P>(props: P) {
+  return mobxObserver(props as any)
+}
+
+export { LogicFlow, h, createRef, Component, LogicFlowUtil }
+
+export * from './view'
+export * from './model'
+export * from './options'
+export * from './keyboard'
+export { ElementState, ModelType, ElementType, EventType } from './constant'
+
+export { formateAnchorConnectValidateData } from './util/node'
+
+export default LogicFlow

package/src/keyboard/index.ts

@@ -0,0 +1,106 @@
+import { isArray } from 'lodash-es'
+import Mousetrap, { MousetrapInstance } from 'mousetrap'
+import LogicFlow from '../LogicFlow'
+
+export type Action = 'keypress' | 'keydown' | 'keyup'
+export type Handler = (e: KeyboardEvent) => void
+
+export interface KeyboardDef {
+  enabled: boolean
+  shortcuts?: Array<{
+    keys: string | string[]
+    callback: Handler
+    action?: Action
+  }>
+}
+
+export interface KeyboardOptions {
+  lf: LogicFlow
+  keyboard?: KeyboardDef
+}
+
+export class Keyboard {
+  public readonly mousetrap: MousetrapInstance
+  public options: KeyboardOptions
+  private readonly target: HTMLElement
+
+  constructor(options: KeyboardOptions) {
+    if (!options.keyboard) {
+      options.keyboard = { enabled: false }
+    }
+    this.options = options
+    const { lf } = options
+    this.target = lf.container
+    this.mousetrap = new Mousetrap(this.target)
+    // 默认开启快捷键，且不是静默模式时enable
+    if (options.keyboard.enabled && !lf.options.isSilentMode) {
+      this.enable(true)
+    }
+  }
+
+  initShortcuts() {
+    const { shortcuts } = this.options.keyboard ?? {}
+    if (shortcuts) {
+      if (isArray(shortcuts)) {
+        shortcuts.forEach(({ keys, callback, action }) =>
+          this.on(keys, callback, action),
+        )
+      } else {
+        const { keys, callback, action } = shortcuts
+        this.on(keys, callback, action)
+      }
+    }
+  }
+
+  on(keys: string | string[], callback: Handler, action?: Action) {
+    this.mousetrap.bind(this.getKeys(keys), callback, action)
+  }
+
+  get disabled() {
+    return this.options?.keyboard?.enabled !== true
+  }
+
+  off(keys: string | string[], action?: Action) {
+    this.mousetrap.unbind(this.getKeys(keys), action)
+  }
+
+  enable(force: boolean) {
+    if (this.disabled || force) {
+      if (this.options.keyboard) {
+        this.options.keyboard.enabled = true
+      }
+      if (this.target instanceof HTMLElement) {
+        this.target.setAttribute('tabindex', '-1')
+        // 去掉节点被选中时container出现的边框
+        this.target.style.outline = 'none'
+      }
+    }
+  }
+
+  disable() {
+    if (!this.disabled) {
+      if (this.options.keyboard) {
+        this.options.keyboard.enabled = false
+      }
+      if (this.target instanceof HTMLElement) {
+        this.target.removeAttribute('tabindex')
+      }
+    }
+  }
+
+  private getKeys(keys: string | string[]) {
+    return (Array.isArray(keys) ? keys : [keys]).map((key) =>
+      this.formatKey(key),
+    )
+  }
+
+  protected formatKey(key: string) {
+    return key
+      .toLowerCase()
+      .replace(/\s/g, '')
+      .replace('delete', 'del')
+      .replace('cmd', 'command')
+  }
+}
+
+export default Keyboard

package/src/keyboard/shortcut.ts

@@ -0,0 +1,123 @@
+import LogicFlow from '../LogicFlow'
+import GraphModel from '../model/GraphModel'
+
+import NodeData = LogicFlow.NodeData
+import EdgeData = LogicFlow.EdgeData
+
+let selected: LogicFlow.GraphData | null = null
+
+function translationNodeData(nodeData: NodeData, distance: number) {
+  nodeData.x += distance
+  nodeData.y += distance
+  if (nodeData.text) {
+    nodeData.text.x += distance
+    nodeData.text.y += distance
+  }
+  return nodeData
+}
+
+function translationEdgeData(edgeData: EdgeData, distance: number) {
+  if (edgeData.startPoint) {
+    edgeData.startPoint.x += distance
+    edgeData.startPoint.y += distance
+  }
+  if (edgeData.endPoint) {
+    edgeData.endPoint.x += distance
+    edgeData.endPoint.y += distance
+  }
+  if (edgeData.pointsList && edgeData.pointsList.length > 0) {
+    edgeData.pointsList.forEach((point) => {
+      point.x += distance
+      point.y += distance
+    })
+  }
+  if (edgeData.text) {
+    edgeData.text.x += distance
+    edgeData.text.y += distance
+  }
+  return edgeData
+}
+
+const TRANSLATION_DISTANCE = 40
+let CHILDREN_TRANSLATION_DISTANCE = 40
+
+export function initDefaultShortcut(lf: LogicFlow, graph: GraphModel) {
+  const { keyboard } = lf
+  const {
+    options: { keyboard: keyboardOptions },
+  } = keyboard
+
+  // 复制
+  keyboard.on(['cmd + c', 'ctrl + c'], () => {
+    CHILDREN_TRANSLATION_DISTANCE = TRANSLATION_DISTANCE
+    if (!keyboardOptions?.enabled) return true
+    if (graph.textEditElement) return true
+    const { guards } = lf.options
+    const elements = graph.getSelectElements(false)
+    const enabledClone =
+      guards && guards.beforeClone ? guards.beforeClone(elements) : true
+    if (
+      !enabledClone ||
+      (elements.nodes.length === 0 && elements.edges.length === 0)
+    ) {
+      selected = null
+      return true
+    }
+    selected = elements
+    selected.nodes.forEach((node) =>
+      translationNodeData(node, TRANSLATION_DISTANCE),
+    )
+    selected.edges.forEach((edge) =>
+      translationEdgeData(edge, TRANSLATION_DISTANCE),
+    )
+    return false
+  })
+  // 粘贴
+  keyboard.on(['cmd + v', 'ctrl + v'], () => {
+    if (!keyboardOptions?.enabled) return true
+    if (graph.textEditElement) return true
+    if (selected && (selected.nodes || selected.edges)) {
+      lf.clearSelectElements()
+      const addElements = lf.addElements(
+        selected,
+        CHILDREN_TRANSLATION_DISTANCE,
+      )
+      if (!addElements) return true
+      addElements.nodes.forEach((node) => lf.selectElementById(node.id, true))
+      addElements.edges.forEach((edge) => lf.selectElementById(edge.id, true))
+      selected.nodes.forEach((node) =>
+        translationNodeData(node, TRANSLATION_DISTANCE),
+      )
+      selected.edges.forEach((edge) =>
+        translationEdgeData(edge, TRANSLATION_DISTANCE),
+      )
+      CHILDREN_TRANSLATION_DISTANCE =
+        CHILDREN_TRANSLATION_DISTANCE + TRANSLATION_DISTANCE
+    }
+    return false
+  })
+  // undo
+  keyboard.on(['cmd + z', 'ctrl + z'], () => {
+    if (!keyboardOptions?.enabled) return true
+    if (graph.textEditElement) return true
+    lf.undo()
+    return false
+  })
+  // redo
+  keyboard.on(['cmd + y', 'ctrl + y'], () => {
+    if (!keyboardOptions?.enabled) return true
+    if (graph.textEditElement) return true
+    lf.redo()
+    return false
+  })
+  // delete
+  keyboard.on(['backspace'], () => {
+    if (!keyboardOptions?.enabled) return true
+    if (graph.textEditElement) return true
+    const elements = graph.getSelectElements(true)
+    lf.clearSelectElements()
+    elements.edges.forEach((edge) => edge.id && lf.deleteEdge(edge.id))
+    elements.nodes.forEach((node) => node.id && lf.deleteNode(node.id))
+    return false
+  })
+}

package/src/model/BaseModel.ts

@@ -0,0 +1,223 @@
+import GraphModel from './GraphModel'
+import { BaseNodeModel } from './node'
+import LogicFlow from '../LogicFlow'
+import { ElementState } from '../constant'
+
+export namespace Model {
+  export type AdditionStateDataType = Record<string, unknown>
+  export type PropertyType = Record<string, unknown>
+  export type VectorType = [number, number]
+  export type IsAllowMove = {
+    x: boolean
+    y: boolean
+  }
+
+  export type AnchorConfig = {
+    id?: string
+    x: number
+    y: number
+    [key: string]: unknown
+  }
+  export type AnchorInfo = {
+    index: number
+    anchor: AnchorConfig
+  }
+
+  export type ConnectRule = {
+    message: string
+    validate: (
+      source?: BaseNodeModel,
+      target?: BaseNodeModel,
+      sourceAnchor?: AnchorConfig,
+      targetAnchor?: AnchorConfig,
+      /**
+       * REMIND: 调整的边的 id
+       * 在开启 adjustEdgeStartAndEnd 后调整边连接的节点时会传入
+       * 详见：https://github.com/didi/LogicFlow/issues/926#issuecomment-1371823306
+       */
+      edgeID?: string,
+    ) => boolean | undefined
+  }
+  export type ConnectRuleResult = {
+    isAllPass: boolean
+    msg?: string
+  }
+
+  /**
+   * 限制节点移动规则
+   * model: 移动节点的 model
+   * deltaX: 移动的 X 轴距离
+   * deltaY: 移动的 Y 轴距离
+   */
+  export type NodeMoveRule = (
+    model: BaseNodeModel,
+    deltaX: number,
+    deltaY: number,
+  ) => boolean | IsAllowMove
+
+  export type AdjustEdgeStartAndEndParams = {
+    startPoint: LogicFlow.Point
+    endPoint: LogicFlow.Point
+    sourceNode?: BaseNodeModel
+    targetNode?: BaseNodeModel
+  }
+
+  // 定义边界数据结构，左上坐标 + 右下坐标定位一个矩形
+  export type BoxBoundsPoint = {
+    x1: number // Left Top X
+    y1: number // Left Top Y
+    x2: number // Right Bottom X
+    y2: number // Right Bottom Y
+  }
+
+  export type OutlineInfo = {
+    x: number
+    y: number
+    x1: number
+    y1: number
+  }
+
+  export interface BoxBounds {
+    x: number
+    y: number
+    width: number
+    height: number
+    minX: number
+    minY: number
+    maxX: number
+    maxY: number
+    centerX: number
+    centerY: number
+  }
+
+  export interface BaseModel {
+    /**
+     * 节点或边对应的 ID.
+     *
+     * 默认情况下，使用 uuidV4 生成。如需自定义，可通过传入 createId 方法覆盖。
+     */
+    id: string
+
+    /**
+     * model 对应的图形外观类型 (eg: 圆形、矩形、多边形等)
+     *
+     * 不可自定义，用于 LogicFlow 内部计算使用
+     */
+    readonly modelType: string
+
+    /**
+     * 请勿直接修改属性，如果想要将一个节点类型修改为另一个类型。（直接禁止修改不就可以了 public readonly）
+     * `lf.graphModel.changeEdgeType` or `lf.graphModel.changeNodeType`
+     *
+     * 流程图元素类型，自定义元素时对应的标识
+     * 在 logicflow/core 中对应着 rect/circle/polyline 这种
+     * 在实际项目中，我们会基于业务类型进行自定义 type.
+     * 例如 BPMN 场景中，我们会定义开始节点的类型为 bpmn:start-event
+     *
+     * 与 modelType 的区别是，type 更多的是业务上的类型，而 modelType 则是外观上的类型。
+     * 例如 bpmn.js 的开始节点和结束节点 type 分别为 'bpmn:start-event' 和 'bpmn:end-event'。
+     * 但是他们的 modelType 都是 circle-node，因为他们的外观都是基于圆形自定义而来。
+     */
+    readonly type: string
+    graphModel: GraphModel
+
+    /**
+     * 状态附加数据，例如显示菜单，菜单的位置信息
+     * @deprecated: 请勿使用，即将废弃
+     */
+    additionStateData?: AdditionStateDataType
+
+    /**
+     * Rule 相关配置，包括连入、连出、移动等
+     */
+    targetRules?: ConnectRule[]
+    sourceRules?: ConnectRule[]
+    moveRules?: NodeMoveRule[]
+    hasSetTargetRules?: boolean
+    hasSetSourceRules?: boolean
+
+    /**
+     * 元素上的文本
+     *
+     * LogicFlow 中存在梁总文本：1. 脱离边和节点单独存在的问题；2. 必须和边、节点关联的文本
+     * 此属性控制的是第二种。节点和边在删除、调整的同时，其关联的文本也会对应删除、调整。
+     */
+    text: LogicFlow.TextConfig
+    properties: Record<string, unknown>
+
+    isSelected: boolean // 元素是否被选中
+    isHovered: boolean // 鼠标是否悬停在元素上
+    // TODO: 确认拼写 fix typo（兼容拼写错误的情况）
+    isHitable: boolean // TODO: 错误拼写，兼容拼写错误的情况 REMIND TO REMOVE
+    isHittable: boolean // 细粒度控制节点是否对用户操作进行反应
+    draggable: boolean // 是否可拖拽
+    visible: boolean // 元素是否显示
+    virtual: boolean // 元素是否可以通过 getGraphData 获取到
+
+    /**
+     * 元素堆叠的层级，默认情况下节点 zIndex 值为 1，边 zIndex 为 0
+     */
+    zIndex: number
+
+    /**
+     * 元素状态: 不同状态不应不同元素的显示效果（无法直接修改）
+     */
+    readonly state: ElementState
+
+    /**
+     * 创建节点 ID
+     *
+     * 默认情况下，LogicFlow 内部使用 uuidV4 生成 id。在自定义节点的时候，可以重写此方法，
+     * 基于自己的规则生成 id。
+     * 注意 📢：此方法必须是同步方法，如果想要异步修改 ID，建议删除此节点后在同一位置创建一个新的节点
+     * @overridable 可被重写
+     * @returns string
+     */
+    createId: () => string | null
+
+    // Actions
+    isAllowMoveNode?: (deltaX: number, deltaY: number) => boolean | IsAllowMove
+    moveText: (deltaX: number, deltaY: number) => void
+    moveTo?: (x: number, y: number, isIgnoreRule: boolean) => boolean
+    getMoveDistance?: (
+      deltaX: number,
+      deltaY: number,
+      isIgnoreRule: boolean,
+    ) => VectorType
+    move?: (x: number, y: number, isIgnoreRule: boolean) => boolean
+    updateText: (text: string) => void
+
+    setSelected: (isSelected: boolean) => void
+    setHovered: (isHovered: boolean) => void
+    setHitable: (isHittable: boolean) => void // TODO: 拼写错误 fix typo（兼容拼写错误的情况）
+    setHittable: (isHittable: boolean) => void
+
+    setZIndex: (zIndex?: number) => void
+    updateAttributes: (attributes: LogicFlow.AttributesType) => void
+    /**
+     * 设置 Node | Edge 等 model 的状态
+     * @param state 状态
+     * @param additionStateData 额外的参数
+     */
+    setElementState: (
+      state: ElementState,
+      additionStateData?: AdditionStateDataType,
+    ) => void
+
+    getData: () => Record<string, unknown>
+    getProperties: () => PropertyType
+    setProperty: (key: string, val: unknown) => void
+    setProperties: (properties: PropertyType) => void
+    deleteProperty: (key: string) => void
+
+    getNodeStyle?: () => LogicFlow.CommonTheme
+    getEdgeStyle?: () => LogicFlow.EdgeTheme
+    getTextStyle: () => LogicFlow.TextNodeTheme
+    getAnchorStyle?: () => LogicFlow.AnchorTheme
+    getAnchorLineStyle?: () => LogicFlow.AnchorLineTheme
+    getOutlineStyle: () => LogicFlow.OutlineTheme
+    setStyle: (key: string, val: LogicFlow.CommonThemePropTypes) => void
+    setStyles: (styles: LogicFlow.CommonTheme) => void
+    updateStyles: (styles: LogicFlow.CommonTheme) => void
+  }
+}