@logicflow/core 2.2.0 → 2.2.1

package/src/event/eventEmitter.ts

@@ -1,156 +0,0 @@
-import { EventArgs } from './eventArgs'
-
-export type EventType<T extends string = string> = {
-  readonly callback: EventCallback<T>
-  readonly once: boolean
-}
-
-export type EventsType<T extends string = string> = {
-  [k in T]?: EventType<k>[]
-}
-
-export type CallbackArgs<T extends string = string> = T extends keyof EventArgs
-  ? EventArgs[T]
-  : // 如果不是内部定义的事件类型，那么允许用户抛出任何类型的参数
-    // 这部分的类型定义由用户自己来保证
-    any
-
-export type EventCallback<T extends string = string> = (
-  args: CallbackArgs<T>,
-) => void
-
-const WILDCARD = '*'
-
-/* event-emitter */
-export default class EventEmitter {
-  private _events: EventsType = {}
-
-  /**
-   * 监听一个事件
-   * @param evt 事件名称
-   * @param callback 回调函数
-   * @param once 是否只监听一次
-   */
-  on<T extends keyof EventArgs>(
-    evt: T,
-    callback: EventCallback<T>,
-    once?: boolean,
-  ): void
-  on<T extends string>(evt: T, callback: EventCallback<T>, once?: boolean): void
-  on(evt: string, callback: EventCallback, once?: boolean) {
-    evt?.split(',').forEach((evKey) => {
-      evKey = evKey.trim()
-      if (!this._events[evKey]) {
-        this._events[evKey] = []
-      }
-      this._events[evKey]!.push({
-        callback,
-        once: !!once,
-      })
-    })
-  }
-
-  /**
-   * 监听一个事件一次
-   * @param evt 事件名称
-   * @param callback 回调函数
-   */
-  once<T extends keyof EventArgs>(
-    evt: T,
-    callback: (args: EventArgs[T]) => void,
-  ): void
-  once<T extends string>(evt: T, callback: EventCallback<T>): void
-  once(evt: string, callback: EventCallback) {
-    evt?.split(',').forEach((evKey) => {
-      evKey = evKey.trim()
-      this.on(evKey, callback, true)
-    })
-  }
-
-  /**
-   * 触发一个事件
-   * @param evts
-   * @param eventArgs
-   */
-  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) {
-    evts?.split(',').forEach((evt) => {
-      const events = this._events[evt] || []
-      const wildcardEvents = this._events[WILDCARD] || []
-      // 实际的处理 emit 方法
-      const doEmit = (es: EventType[]) => {
-        let { length } = es
-        for (let i = 0; i < length; i++) {
-          if (!es[i]) {
-            continue
-          }
-          const { callback, once } = es[i]
-          if (once) {
-            es.splice(i, 1)
-            if (es.length === 0) {
-              delete this._events[evt]
-            }
-            length--
-            i--
-          }
-          callback.apply(this, [eventArgs])
-        }
-      }
-      doEmit(events)
-      doEmit(wildcardEvents)
-    })
-  }
-
-  /**
-   * 取消事件监听
-   * @param evts 事件名称
-   * @param callback 回调函数
-   *
-   * - evts 为空时，清除所有事件的监听器
-   * - evts 非空，callback 为空时，清除指定事件的所有监听器
-   * - evts 非空，callback 非空，进行对象比较，清除指定事件的指定监听器
-   */
-  off<T extends keyof EventArgs>(
-    evts: T,
-    callback?: (args: EventArgs[T]) => void,
-  ): void
-  off<T extends string>(evts: T, callback?: EventCallback<T>): void
-  off(evts: string, callback?: EventCallback) {
-    if (!evts) {
-      // evt 为空全部清除
-      this._events = {}
-    }
-    evts.split(',').forEach((evt) => {
-      if (!callback) {
-        // evt 存在，callback 为空，清除事件所有方法
-        delete this._events[evt]
-      } else {
-        // evt 存在，callback 存在，清除匹配的
-        const events = this._events[evt] || []
-        let { length } = events
-        for (let i = 0; i < length; i++) {
-          if (events[i].callback === callback) {
-            events.splice(i, 1)
-            length--
-            i--
-          }
-        }
-        if (events.length === 0) {
-          delete this._events[evt]
-        }
-      }
-    })
-  }
-
-  /* 当前所有的事件 */
-  getEvents() {
-    return this._events
-  }
-
-  destroy() {
-    this._events = {}
-  }
-}
-
-export { EventEmitter, EventArgs }

package/src/history/index.ts

@@ -1,119 +0,0 @@
-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),
-    )
-  }
-
-  destroy() {
-    this.undos = []
-    this.redos = []
-    this.curData = null
-    this.stopWatch && this.stopWatch()
-  }
-}
-
-export default History

package/src/index.less

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

package/src/index.ts

@@ -1,26 +0,0 @@
-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 './util'
-export * from './tool'
-export * from './view'
-export * from './model'
-export * from './options'
-export * from './keyboard'
-export * from './constant'
-export * from './algorithm'
-export * from './event/eventEmitter'
-export { ElementState, ModelType, ElementType, EventType } from './constant'
-
-export { formatAnchorConnectValidateData } from './util/node'
-
-export default LogicFlow

package/src/keyboard/index.ts

@@ -1,112 +0,0 @@
-import { isArray } from 'lodash-es'
-import Mousetrap, { MousetrapInstance } from 'mousetrap'
-import LogicFlow from '../LogicFlow'
-
-export * from './shortcut'
-
-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')
-      }
-    }
-  }
-
-  destroy() {
-    this.mousetrap.reset()
-  }
-
-  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

@@ -1,200 +0,0 @@
-import { isEmpty } from 'lodash-es'
-import LogicFlow from '../LogicFlow'
-import { map } from 'lodash-es'
-import GraphModel from '../model/GraphModel'
-
-import NodeData = LogicFlow.NodeData
-import EdgeData = LogicFlow.EdgeData
-import NodeConfig = LogicFlow.NodeConfig
-import EdgeConfig = LogicFlow.EdgeConfig
-
-let selected: LogicFlow.GraphData | null = null
-
-export function translateNodeData(nodeData: NodeData, distance: number) {
-  nodeData.x += distance
-  nodeData.y += distance
-
-  if (!isEmpty(nodeData.text)) {
-    nodeData.text.x += distance
-    nodeData.text.y += distance
-  }
-
-  if (!isEmpty(nodeData.properties?._label)) {
-    nodeData.properties?._label.forEach((label) => {
-      label.x += distance
-      label.y += distance
-    })
-  }
-  return nodeData
-}
-
-export function translateEdgeData(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 (!isEmpty(edgeData.text)) {
-    edgeData.text.x += distance
-    edgeData.text.y += distance
-  }
-  return edgeData
-}
-
-export function transformNodeData(
-  nodeData: NodeData,
-  distance: number,
-): NodeConfig {
-  const { x, y, text } = nodeData
-  // 重新计算 text 的位置，保证粘贴后 text 位置和复制的原节点相对位置一致
-  const nextText = text
-    ? {
-        x: text.x + distance,
-        y: text.y + distance,
-        value: text.value,
-      }
-    : undefined
-
-  return {
-    ...nodeData,
-    id: '',
-    x: x + distance,
-    y: y + distance,
-    text: nextText,
-  }
-}
-
-export function transformEdgeData(
-  edgeData: EdgeData,
-  distance: number,
-): EdgeConfig {
-  const { startPoint, endPoint, pointsList, text, ...edgeConfig } = edgeData
-  // 清除原始边的 id
-  edgeConfig.id = ''
-
-  // 重新计算边的位置，包括 startPoint、endPoint、pointsList 以及 text
-  // TODO: 看这个是否可以提出一个通用方法，用于重新计算边的位置
-  const nextStartPoint = {
-    x: startPoint.x + distance,
-    y: startPoint.y + distance,
-  }
-  const nextEndPoint = {
-    x: endPoint.x + distance,
-    y: endPoint.y + distance,
-  }
-  const newPointsList: LogicFlow.Point[] = map(pointsList, (point) => {
-    return {
-      x: point.x + distance,
-      y: point.y + distance,
-    }
-  })
-  const nextText = text
-    ? {
-        ...text,
-        x: text.x + distance,
-        y: text.y + distance,
-      }
-    : undefined
-
-  return {
-    ...edgeConfig,
-    startPoint: nextStartPoint,
-    endPoint: nextEndPoint,
-    pointsList: newPointsList,
-    text: nextText,
-  }
-}
-
-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) =>
-      translateNodeData(node, TRANSLATION_DISTANCE),
-    )
-    selected.edges.forEach((edge) =>
-      translateEdgeData(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) =>
-        translateNodeData(node, TRANSLATION_DISTANCE),
-      )
-      selected.edges.forEach((edge) =>
-        translateEdgeData(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
-  })
-}