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

package/src/common/drag.ts

@@ -0,0 +1,219 @@
+import { noop } from 'lodash-es'
+import { Model } from '../model'
+import { EventType } from '../constant'
+import EventEmitter from '../event/eventEmitter'
+
+// TODO：这种方式在同构项目中，会报错，该如何解决（是否要求用户控制在浏览器环境时才初始化）
+// const DOC: any = window?.document
+const LEFT_MOUSE_BUTTON_CODE = 0
+
+export type IDragParams = {
+  deltaX: number
+  deltaY: number
+  event: MouseEvent | null
+  [key: string]: unknown
+}
+
+export type ICreateDragParams = {
+  onDragStart?: (params: Partial<IDragParams>) => void
+  onDragging?: (param: IDragParams) => void
+  onDragEnd?: (param: Partial<IDragParams>) => void
+  step?: number
+  isStopPropagation?: boolean
+}
+
+export type IStepperDragProps = {
+  eventType?:
+    | 'NODE'
+    | 'BLANK'
+    | 'SELECTION'
+    | 'ADJUST_POINT'
+    | 'TEXT'
+    | 'LABEL'
+    | ''
+  eventCenter?: EventEmitter
+  model?: Model.BaseModel
+  data?: Record<string, unknown>
+  [key: string]: unknown
+} & Partial<ICreateDragParams>
+/**
+ * 支持拖拽时按步长进行移动
+ * REMIND：在绘制的过程中因为放大缩小，移动的真实 step 是变化的
+ */
+export class StepperDrag {
+  // 初始化
+  onDragStart: (params: Partial<IDragParams>) => void
+  onDragging: (params: IDragParams) => void
+  onDragEnd: (params: Partial<IDragParams>) => void
+
+  step: number
+  isStopPropagation: boolean
+  eventType:
+    | 'NODE'
+    | 'BLANK'
+    | 'SELECTION'
+    | 'ADJUST_POINT'
+    | 'TEXT'
+    | 'LABEL'
+    | ''
+  eventCenter?: EventEmitter
+  model?: Model.BaseModel
+  data?: Record<string, unknown>
+
+  // 运行时
+  isDragging: boolean = false
+  isStartDrag: boolean = false
+
+  startX: number = 0
+  startY: number = 0
+  totalDeltaX: number = 0
+  totalDeltaY: number = 0
+
+  startTime?: number
+  constructor({
+    onDragStart = noop,
+    onDragging = noop,
+    onDragEnd = noop,
+    step = 1,
+    eventType = '',
+    isStopPropagation = true,
+    eventCenter,
+    model,
+    data,
+  }: IStepperDragProps) {
+    this.onDragStart = onDragStart
+    this.onDragging = onDragging
+    this.onDragEnd = onDragEnd
+    this.step = step
+    this.eventType = eventType
+    this.isStopPropagation = isStopPropagation
+    this.eventCenter = eventCenter
+    this.model = model
+    this.data = data
+  }
+
+  setStep(step: number) {
+    this.step = step
+  }
+
+  handleMouseMove = (e: MouseEvent) => {
+    if (this.isStopPropagation) e.stopPropagation()
+    if (!this.isStartDrag) return
+
+    this.totalDeltaX += e.clientX - this.startX
+    this.totalDeltaY += e.clientY - this.startY
+    this.startX = e.clientX
+    this.startY = e.clientY
+
+    if (
+      this.step <= 1 ||
+      Math.abs(this.totalDeltaX) > this.step ||
+      Math.abs(this.totalDeltaY) > this.step
+    ) {
+      const remainderX = this.totalDeltaX % this.step
+      const remainderY = this.totalDeltaY % this.step
+
+      const deltaX = this.totalDeltaX - remainderX
+      const deltaY = this.totalDeltaY - remainderY
+
+      this.totalDeltaX = remainderX
+      this.totalDeltaY = remainderY
+
+      const elementData = this.model?.getData()
+      // REMIND: 为了区分点击和拖动，在鼠标没有拖动时，不触发 dragstart。
+      if (!this.isDragging) {
+        if (this.eventType) {
+          this.eventCenter?.emit(EventType[`${this.eventType}_DRAGSTART`], {
+            e,
+            data: this.data || elementData,
+          })
+        }
+        this.onDragStart({ event: e })
+      }
+
+      this.isDragging = true
+      // REMIND: 为了让 dragstart 和 drag 不在同一个事件循环中，将 drag 事件放在下一个任务队列中。
+      // TODO: 测试用例是否可覆盖？？？
+      Promise.resolve().then(() => {
+        this.onDragging({ deltaX, deltaY, event: e })
+        if (this.eventType) {
+          this.eventCenter?.emit(EventType[`${this.eventType}_MOUSEMOVE`], {
+            e,
+            data: this.data || elementData,
+          })
+          this.eventCenter?.emit(EventType[`${this.eventType}_DRAG`], {
+            e,
+            data: this.data || elementData,
+          })
+        }
+      })
+    }
+  }
+
+  handleMouseUp = (e: MouseEvent) => {
+    const DOC: any = window?.document
+
+    this.isStartDrag = false
+    if (this.isStopPropagation) e.stopPropagation()
+
+    // fix: issue#568, 如果 onDragging 在下一个时间循环中触发，而 drop 在当前事件循环，会出现问题
+    Promise.resolve().then(() => {
+      DOC?.removeEventListener('mousemove', this.handleMouseMove, true)
+      DOC?.removeEventListener('mouseup', this.handleMouseUp, true)
+
+      const elementData = this.model?.getData()
+      if (this.eventType) {
+        this.eventCenter?.emit(EventType[`${this.eventType}_MOUSEUP`], {
+          e,
+          data: this.data || elementData,
+        })
+      }
+
+      if (!this.isDragging) return
+      this.isDragging = false
+      this.onDragEnd({ event: e })
+      if (this.eventType) {
+        this.eventCenter?.emit(EventType[`${this.eventType}_DROP`], {
+          e,
+          data: this.data || elementData,
+        })
+      }
+    })
+  }
+
+  handleMouseDown = (e: MouseEvent) => {
+    const DOC: any = window?.document
+
+    // issue: LogicFlow交流群-3群 8.10 号抛出的事件相关的问题，是否是这引起的？？？
+    if (e.button !== LEFT_MOUSE_BUTTON_CODE) return
+    if (this.isStopPropagation) e.stopPropagation()
+
+    this.isStartDrag = true
+    this.startX = e.clientX
+    this.startY = e.clientY
+
+    DOC?.addEventListener('mousemove', this.handleMouseMove, true)
+    DOC?.addEventListener('mouseup', this.handleMouseUp, true)
+
+    const elementData = this.model?.getData()
+    if (this.eventType) {
+      this.eventCenter?.emit(EventType[`${this.eventType}_MOUSEDOWN`], {
+        e,
+        data: this.data || elementData,
+      })
+    }
+    this.startTime = new Date().getTime()
+  }
+
+  cancelDrag = () => {
+    const DOC: any = window?.document
+
+    DOC?.removeEventListener('mousemove', this.handleMouseMove, true)
+    DOC?.removeEventListener('mouseup', this.handleMouseUp, true)
+
+    this.onDragEnd({ event: null })
+    this.isDragging = false
+  }
+}
+
+export default StepperDrag

package/src/common/history.ts

@@ -0,0 +1,108 @@
+import { cloneDeep, debounce, isEqual, last } from 'lodash-es'
+import { deepObserve, IDisposer } from 'mobx-utils'
+import { LogicFlow } from '../LogicFlow'
+// import { EventType } from '../constant'
+import { GraphModel } from '../model'
+import EventEmitter from '../event/eventEmitter'
+
+export type HistoryData = LogicFlow.GraphConfigData
+
+export class History {
+  undos: HistoryData[] = []
+  redos: HistoryData[] = []
+  stopWatch: IDisposer | null = null
+  curData: HistoryData | null = null
+  maxSize: number = 50
+  // 发生数据变化后，最多再等 500ms，把距离上次的数据变更存储起来。
+  // 所以 waitTime 值越小，History 对数据变化越敏感，存的 undos 数据就越细
+  waitTime: number = 100
+  eventCenter: EventEmitter
+
+  constructor(eventCenter: EventEmitter) {
+    this.eventCenter = eventCenter
+  }
+
+  add(data: HistoryData) {
+    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.undos.length > 1,
+    //     redoAble: this.redos.length > 0,
+    //   },
+    // })
+
+    if (this.undos.length > this.maxSize) {
+      this.undos.shift()
+    }
+  }
+
+  undoAble() {
+    return this.undos.length > 1
+  }
+
+  /**
+   * undo 方法触发：
+   * graphModel 重新渲染 nodes 和 edges
+   * graphModel 发生变化，触发 watch
+   * watch 触发 add
+   */
+  undo() {
+    if (!this.undoAble()) return
+    const preData = this.undos.pop()
+    if (preData) {
+      this.redos.push(preData)
+    }
+    const curData = this.undos.pop()
+    if (curData) {
+      this.curData = cloneDeep(curData)
+    }
+    return curData
+  }
+
+  redoAble() {
+    return this.redos.length > 0
+  }
+
+  redo() {
+    if (!this.redoAble()) return
+    const curData = this.redos.pop()
+    if (curData) {
+      this.curData = cloneDeep(curData)
+    }
+    return curData
+  }
+
+  watch(model: GraphModel) {
+    this.stopWatch && this.stopWatch()
+
+    // 把当前 watch 的 model 转换一下数据存起来，无需清空 redos
+    const historyData = model.modelToHistoryData()
+    if (historyData) {
+      this.undos.push(historyData)
+    }
+
+    this.stopWatch = deepObserve(
+      model,
+      debounce(() => {
+        // 数据变更后，把最新的当前 model 数据存起来，并清空 redos
+        // 因为这个回调函数的触发，一般是用户交互而引起的，所以按照正常逻辑需要清空 redos
+        const data = model.modelToHistoryData()
+        if (data) {
+          this.add(data)
+        }
+      }, this.waitTime),
+    )
+  }
+}
+
+export default History

package/src/common/index.ts

@@ -0,0 +1,6 @@
+export * from './drag'
+export * from './history'
+export * from './keyboard'
+
+export * from './matrix'
+export * from './vector'

package/src/common/keyboard.ts

@@ -0,0 +1,108 @@
+import Mousetrap, { MousetrapInstance } from 'mousetrap'
+import { forEach, isArray } from 'lodash-es'
+import LogicFlow from '..'
+
+export class Keyboard {
+  private target: HTMLElement
+  readonly mousetrap: MousetrapInstance
+  options: Required<Keyboard.Options>
+
+  constructor(options: Keyboard.Options) {
+    const { lf } = options
+    if (!options.keyboard) {
+      options.keyboard = { enabled: false }
+    }
+    this.options = options as Required<Keyboard.Options>
+    this.target = lf.container
+    this.mousetrap = new Mousetrap(this.target)
+
+    if (options.keyboard?.enabled) {
+      this.enable(true)
+    }
+  }
+
+  protected formatKey(key: string) {
+    return key
+      .toLowerCase()
+      .replace(/\s/g, '')
+      .replace('delete', 'del')
+      .replace('cmd', 'command')
+  }
+
+  private getKeys(keys: string | string[]) {
+    return (isArray(keys) ? keys : [keys]).map((key) => this.formatKey(key))
+  }
+
+  get disabled() {
+    return this.options.keyboard?.enabled !== true
+  }
+
+  on(
+    keys: string | string[],
+    callback: Keyboard.HandlerFunc,
+    action?: Keyboard.ActionType,
+  ) {
+    this.mousetrap.bind(this.getKeys(keys), callback, action)
+  }
+
+  off(keys: string | string[], action?: Keyboard.ActionType) {
+    this.mousetrap.unbind(this.getKeys(keys), action)
+  }
+
+  enable(force: boolean) {
+    if (this.disabled || force) {
+      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) {
+      this.options.keyboard.enabled = false
+      if (this.target instanceof HTMLElement) {
+        this.target.removeAttribute('tabindex')
+      }
+    }
+  }
+
+  initShortcuts() {
+    const { shortcuts } = this.options.keyboard
+    if (shortcuts) {
+      if (isArray(shortcuts)) {
+        forEach(shortcuts, ({ keys, callback, action }) => {
+          this.on(keys, callback, action)
+        })
+      } else {
+        const { keys, callback, action } = shortcuts
+        this.on(keys, callback, action)
+      }
+    }
+  }
+}
+
+export namespace Keyboard {
+  export type ActionType = 'keypress' | 'keydown' | 'keyup'
+  export type HandlerFunc = (e: KeyboardEvent) => void
+
+  export interface Shortcut {
+    keys: string | string[]
+    callback: HandlerFunc
+    action?: ActionType
+  }
+
+  export interface KeyboardDef {
+    enabled: boolean
+    shortcuts?: Shortcut | Shortcut[]
+  }
+
+  export interface Options {
+    lf: LogicFlow
+    keyboard?: KeyboardDef
+  }
+}
+
+export default Keyboard

package/src/common/matrix.ts

@@ -0,0 +1,122 @@
+import { Vector } from './vector'
+
+export class Matrix extends Array {
+  rows: number
+  columns: number
+
+  constructor(...vectors: any[]) {
+    super(vectors.length)
+    this.fill(new Array(3))
+    vectors.forEach((v: any, index: number) => {
+      this[index] = v
+    })
+    this.columns = vectors[0].length
+    this.rows = vectors.length
+    Object.setPrototypeOf(this, Matrix.prototype)
+  }
+
+  getRow(index: number) {
+    return this[index]
+  }
+
+  getColumn(index: number) {
+    return [...this.map((row: number[]) => row[index])]
+  }
+
+  // 转置
+  transpose() {
+    const rows: any[] = []
+    for (let i = 0; i < this.columns; i++) {
+      rows.push(this.getColumn(i))
+    }
+    return new Matrix(...rows)
+  }
+
+  // 叉乘
+  cross(m1: Matrix) {
+    const arr = new Array(this.rows).fill('').map((): any => [])
+    if (this.columns === m1.rows) {
+      for (let i = 0; i < this.rows; i++) {
+        const row = this.getRow(i)
+        for (let j = 0; j < m1.columns; j++) {
+          const column = m1.getColumn(j)
+          arr[i][j] = row.reduce(
+            (prev: number, r: number, index: number) =>
+              prev + r * column[index],
+            0,
+          )
+        }
+      }
+    }
+    return new Matrix(...arr)
+  }
+
+  // 返回二维坐标（降维）
+  to2D() {
+    return this.map((item: any) => [item[0], item[1]])
+  }
+
+  toString(): string {
+    const [[a, b], [c, d], [e, f]] = this
+    return `matrix(${a} ${b} ${c} ${d} ${e} ${f})`
+  }
+
+  translate(tx: number, ty: number): Matrix {
+    return this.cross(new TranslateMatrix(tx, ty))
+  }
+
+  rotate(angle: number): Matrix {
+    return this.cross(new RotateMatrix(angle))
+  }
+
+  scale(sx: number, sy: number): Matrix {
+    return this.cross(new ScaleMatrix(sx, sy))
+  }
+}
+
+export class RotateMatrix extends Matrix {
+  constructor(theta: number) {
+    super(
+      new Vector(+Math.cos(theta).toFixed(2), +Math.sin(theta).toFixed(2), 0),
+      new Vector(-Math.sin(theta).toFixed(2), +Math.cos(theta).toFixed(2), 0),
+      new Vector(0, 0, 1),
+    )
+    Object.setPrototypeOf(this, RotateMatrix.prototype)
+  }
+
+  inverse() {
+    return this.transpose()
+  }
+}
+
+export class ScaleMatrix extends Matrix {
+  private readonly sx: number
+  private readonly sy: number
+
+  constructor(sx: number, sy: number) {
+    super(new Vector(sx, 0, 0), new Vector(0, sy, 0), new Vector(0, 0, 1))
+    this.sx = sx
+    this.sy = sy
+    Object.setPrototypeOf(this, ScaleMatrix.prototype)
+  }
+
+  inverse() {
+    return new ScaleMatrix(1 / this.sx, 1 / this.sy)
+  }
+}
+
+export class TranslateMatrix extends Matrix {
+  private readonly tx: number
+  private readonly ty: number
+
+  constructor(tx: number, ty: number) {
+    super(new Vector(1, 0, 0), new Vector(0, 1, 0), new Vector(tx, ty, 1))
+    this.tx = tx
+    this.ty = ty
+    Object.setPrototypeOf(this, TranslateMatrix.prototype)
+  }
+
+  inverse() {
+    return new TranslateMatrix(-this.tx, -this.ty)
+  }
+}

package/src/common/vector.ts

@@ -0,0 +1,93 @@
+function isVector(a1: any, a2: any): boolean {
+  return a1 instanceof Vector && a2 instanceof Vector
+}
+
+class Base extends Array {
+  x: number
+  y: number
+  z: number
+
+  constructor(x: number, y: number, z: number) {
+    super(3)
+    this[0] = x
+    this[1] = y
+    this[2] = z
+    this.x = x
+    this.y = y
+    this.z = z
+    Object.setPrototypeOf(this, Base.prototype)
+  }
+
+  add(v1: Vector | Point): Vector | Point {
+    if (isVector(this, v1)) {
+      return new Vector(this.x + v1.x, this.y + v1.y)
+    }
+    const z = this.z + v1.z
+    return new Point((this.x + v1.x) / z, (this.y + v1.y) / z)
+  }
+
+  subtract(v1: Vector | Point): Vector | Point {
+    if (isVector(this, v1)) {
+      return new Vector(this.x - v1.x, this.y - v1.y)
+    }
+    const z = this.z - v1.z
+    return z === 0
+      ? new Vector(this.x - v1.x, this.y - v1.y)
+      : new Point((this.x - v1.x) / z, (this.y - v1.y) / z)
+  }
+}
+
+class Vector extends Base {
+  constructor(x: number, y: number, z?: number) {
+    super(x, y, z ?? 0)
+    Object.setPrototypeOf(this, Vector.prototype)
+  }
+
+  toString(): string {
+    return 'Vector'
+  }
+
+  dot(v1: Vector) {
+    return v1.reduce((prev, cur, index) => prev + cur * this[index])
+  }
+
+  cross(v1: Vector) {
+    return new Vector(
+      this.y * v1.z - this.z * v1.y,
+      this.z * v1.x - this.x * v1.z,
+      this.x * v1.y - this.y * v1.x,
+    )
+  }
+
+  getLength() {
+    return Math.hypot(this.x, this.y)
+  }
+
+  normalize() {
+    const len = this.getLength()
+    return new Vector(this.x / len, this.y / len)
+  }
+
+  crossZ(v1: Vector) {
+    return this.x * v1.y - this.y * v1.x
+  }
+
+  angle(v1: Vector) {
+    const negative = this.crossZ(v1)
+    const r = Math.acos(this.normalize().dot(v1.normalize()))
+    return negative >= 0 ? r : -r
+  }
+}
+
+class Point extends Base {
+  constructor(x: number, y: number) {
+    super(x, y, 1)
+    Object.setPrototypeOf(this, Point.prototype)
+  }
+
+  toString(): string {
+    return 'Point'
+  }
+}
+
+export { Vector, Point }

package/src/constant/index.ts

@@ -109,11 +109,48 @@ export enum EventType {
   SELECTION_CONTEXTMENU = 'selection:contextmenu',
   CONNECTION_NOT_ALLOWED = 'connection:not-allowed',
 
+  // Text events
+  TEXT_MOUSEDOWN = 'text:mousedown',
+  TEXT_DRAGSTART = 'text:dragstart',
+  TEXT_DRAG = 'text:drag',
+  TEXT_DROP = 'text:drop',
+  TEXT_CLICK = 'text:click',
+  TEXT_DBCLICK = 'text:dbclick',
+  TEXT_BLUR = 'text:blur',
+  TEXT_MOUSEMOVE = 'text:mousemove',
+  TEXT_MOUSEUP = 'text:mouseup',
+  TEXT_FOCUS = 'text:focus',
+  TEXT_ADD = 'text:add',
+  TEXT_UPDATE = 'text:update',
+  TEXT_CLEAR = 'text:clear',
+
+  // label events
+  LABEL_MOUSEDOWN = 'label:mousedown',
+  LABEL_DRAGSTART = 'label:dragstart',
+  LABEL_DRAG = 'label:drag',
+  LABEL_DROP = 'label:drop',
+  LABEL_CLICK = 'label:click',
+  LABEL_DBCLICK = 'label:dbclick',
+  LABEL_BLUR = 'label:blur',
+  LABEL_MOUSEMOVE = 'label:mousemove',
+  LABEL_MOUSEUP = 'label:mouseup',
+  LABEL_FOCUS = 'label:focus',
+  LABEL_ADD = 'label:add',
+  LABEL_UPDATE = 'label:update',
+  LABEL_CLEAR = 'label:clear',
+  LABEL_DELETE = 'label:delete',
+  LABEL_SHOULD_ADD = 'label:should-add',
+  LABEL_BATCH_ADD = 'label:batch-add',
+  LABEL_SHOULD_UPDATE = 'label:should-update',
+  LABEL_SHOULD_DELETE = 'label:should-delete',
+  LABEL_BATCH_DELETE = 'label:batch-delete',
+  LABEL_NOT_ALLOWED_ADD = 'label:not-allowed-add',
+
   // Other events
   HISTORY_CHANGE = 'history:change',
-  TEXT_UPDATE = 'text:update',
   GRAPH_TRANSFORM = 'graph:transform',
   GRAPH_RENDERED = 'graph:rendered',
+  GRAPH_UPDATED = 'graph:updated',
 }
 
 export enum OverlapMode {
@@ -125,3 +162,8 @@ export enum SegmentDirection {
   HORIZONTAL = 'horizontal',
   VERTICAL = 'vertical',
 }
+
+export enum TextMode {
+  TEXT = 'text',
+  LABEL = 'label',
+}