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

package/src/common/drag.ts

@@ -0,0 +1,205 @@
+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' | ''
+  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' | ''
+  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

@@ -114,6 +114,7 @@ export enum EventType {
   TEXT_UPDATE = 'text:update',
   GRAPH_TRANSFORM = 'graph:transform',
   GRAPH_RENDERED = 'graph:rendered',
+  GRAPH_UPDATED = 'graph:updated',
 }
 
 export enum OverlapMode {

package/src/event/eventArgs.ts

@@ -282,6 +282,12 @@ interface CommonEventArgs {
      */
     data: GraphData
   }
+  /**
+   * 画布重新更新后触发. 即 lf.render(graphData)方法被调用后或者改变画布（garphModel）上的属性后触发。
+   * 如果是主动修改某个特定属性导致画布更新，想要在画布更新后做一些操作，建议注册事件后在回调函数中及时注销该事件，或者使用once事件代替on事件。
+   * 因为其他属性也可能导致画布更新，触发该事件。
+   */
+  'graph:updated': Record<string, undefined>
 }
 
 type AnchorEventArgsPick<T extends 'data' | 'e' | 'nodeModel' | 'edgeModel'> =

package/src/event/eventEmitter.ts

@@ -74,10 +74,9 @@ export default class EventEmitter {
    */
   emit<T extends keyof EventArgs>(evts: T, eventArgs: CallbackArgs<T>): void
   emit<T extends string>(evts: T, eventArgs: CallbackArgs<T>): void
-  emit(evts: string, eventArgs: EventCallback) {
+  emit(evts: string, eventArgs?: EventCallback) {
     evts?.split(',').forEach((evt) => {
       const events = this._events[evt] || []
-      // TODO: 这是什么？？？
       const wildcardEvents = this._events[WILDCARD] || []
       // 实际的处理 emit 方法
       const doEmit = (es: EventType[]) => {

package/src/index.ts

@@ -16,6 +16,6 @@ export * from './options'
 export * from './keyboard'
 export { ElementState, ModelType, ElementType, EventType } from './constant'
 
-export { formateAnchorConnectValidateData } from './util/node'
+export { formatAnchorConnectValidateData } from './util/node'
 
 export default LogicFlow