@logicflow/core 2.2.0 → 2.2.1

package/src/common/keyboard.ts

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

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

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

@@ -1,179 +0,0 @@
-export const DEFAULT_VISIBLE_SPACE = 200
-export const ELEMENT_MAX_Z_INDEX = 9999
-
-export const DEFAULT_GRID_SIZE = 10
-
-export enum ElementState {
-  DEFAULT = 1, // 默认显示
-  TEXT_EDIT, // 此元素正在进行文本编辑
-  SHOW_MENU, // 显示菜单，废弃请使用菜单插件
-  ALLOW_CONNECT, // 此元素允许作为当前边的目标节点
-  NOT_ALLOW_CONNECT, // 此元素不允许作为当前边的目标节点
-}
-
-export enum ElementType {
-  NODE = 'node',
-  EDGE = 'edge',
-  GRAPH = 'graph',
-}
-
-export enum ModelType {
-  NODE = 'node',
-  CIRCLE_NODE = 'circle-node',
-  POLYGON_NODE = 'polygon-node',
-  RECT_NODE = 'rect-node',
-  TEXT_NODE = 'text-node',
-  ELLIPSE_NODE = 'ellipse-node',
-  DIAMOND_NODE = 'diamond-node',
-  HTML_NODE = 'html-node',
-  CUSTOM_HTML_NODE = 'custom-html-node',
-  EDGE = 'edge',
-  LINE_EDGE = 'line-edge',
-  POLYLINE_EDGE = 'polyline-edge',
-  BEZIER_EDGE = 'bezier-edge',
-  GRAPH = 'graph',
-}
-
-export enum EventType {
-  ELEMENT_CLICK = 'element:click', // 是 node:click & edge:click 的并集
-
-  // Node events
-  NODE_ADD = 'node:add',
-  NODE_DELETE = 'node:delete',
-  NODE_CLICK = 'node:click',
-  NODE_DBCLICK = 'node:dbclick',
-
-  NODE_GROUP_COPY = 'node:group-copy-add',
-  NODE_DND_ADD = 'node:dnd-add',
-  NODE_DND_DRAG = 'node:dnd-drag',
-  NODE_MOUSEDOWN = 'node:mousedown',
-  NODE_DRAGSTART = 'node:dragstart',
-  NODE_DRAG = 'node:drag',
-  NODE_DROP = 'node:drop',
-  NODE_MOUSEUP = 'node:mouseup',
-  NODE_MOUSEMOVE = 'node:mousemove',
-  NODE_MOUSEENTER = 'node:mouseenter',
-  NODE_MOUSELEAVE = 'node:mouseleave',
-  NODE_CONTEXTMENU = 'node:contextmenu',
-  NODE_ROTATE = 'node:rotate',
-  NODE_RESIZE = 'node:resize',
-  NODE_FOCUS = 'node:focus',
-  NODE_BLUR = 'node:blur',
-
-  // 节点 properties 变化事件
-  NODE_PROPERTIES_CHANGE = 'node:properties-change',
-  NODE_PROPERTIES_DELETE = 'node:properties-delete',
-
-  // Edge events
-  EDGE_ADD = 'edge:add',
-  EDGE_DELETE = 'edge:delete',
-  EDGE_CLICK = 'edge:click',
-  EDGE_DBCLICK = 'edge:dbclick',
-  EDGE_FOCUS = 'edge:focus',
-  EDGE_BLUR = 'edge:blur',
-
-  EDGE_MOUSEENTER = 'edge:mouseenter',
-  EDGE_MOUSELEAVE = 'edge:mouseleave',
-  EDGE_CONTEXTMENU = 'edge:contextmenu',
-  EDGE_ADJUST = 'edge:adjust',
-  EDGE_EXCHANGE_NODE = 'edge:exchange-node',
-
-  // Anchor events
-  ANCHOR_CLICK = 'anchor:click',
-  ANCHOR_MOUSEDOWN = 'anchor:mousedown',
-  ANCHOR_DRAGSTART = 'anchor:dragstart',
-  ANCHOR_DRAG = 'anchor:drag',
-  ANCHOR_DROP = 'anchor:drop',
-  ANCHOR_DRAGEND = 'anchor:dragend',
-
-  // Adjust point events
-  ADJUST_POINT_MOUSEDOWN = 'adjustPoint:mousedown',
-  ADJUST_POINT_MOUSEUP = 'adjustPoint:mouseup',
-  ADJUST_POINT_MOUSEMOVE = 'adjustPoint:mousemove',
-  ADJUST_POINT_DRAGSTART = 'adjustPoint:dragstart',
-  ADJUST_POINT_DRAG = 'adjustPoint:drag',
-  ADJUST_POINT_DROP = 'adjustPoint:drop',
-  ADJUST_POINT_DRAGEND = 'adjustPoint:dragend',
-
-  // Blank events
-  BLANK_MOUSEDOWN = 'blank:mousedown',
-  BLANK_DRAGSTART = 'blank:dragstart',
-  BLANK_DRAG = 'blank:drag',
-  BLANK_DROP = 'blank:drop',
-  BLANK_MOUSEMOVE = 'blank:mousemove',
-  BLANK_CANVAS_MOUSEMOVE = 'blank:canvas-mousemove',
-  BLANK_MOUSEUP = 'blank:mouseup',
-  BLANK_CLICK = 'blank:click',
-  BLANK_CONTEXTMENU = 'blank:contextmenu',
-
-  // Selection events
-  SELECTION_MOUSEDOWN = 'selection:mousedown',
-  SELECTION_DRAGSTART = 'selection:dragstart',
-  SELECTION_DRAG = 'selection:drag',
-  SELECTION_DROP = 'selection:drop',
-  SELECTION_MOUSEMOVE = 'selection:mousemove',
-  SELECTION_MOUSEUP = 'selection:mouseup',
-  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',
-  GRAPH_TRANSFORM = 'graph:transform',
-  GRAPH_RENDERED = 'graph:rendered',
-  GRAPH_UPDATED = 'graph:updated',
-  EDIT_CONFIG_CHANGED = 'editConfig:changed',
-}
-
-export enum OverlapMode {
-  STATIC = -1, // 静态(元素层级不随点击变化)
-  DEFAULT = 0, // 默认
-  INCREASE = 1, // 递增
-  EDGE_TOP = 2, // 边固定在顶部
-}
-
-export enum SegmentDirection {
-  HORIZONTAL = 'horizontal',
-  VERTICAL = 'vertical',
-}
-
-export enum TextMode {
-  TEXT = 'text',
-  LABEL = 'label',
-}

package/src/event/event.md

@@ -1,66 +0,0 @@
-# EventCenter
-
-`eventCenter` 是 LogicFlow 内部的通讯中心，通过 `eventCenter` 来发布事件或者监听事件，以低耦合的方式使两个实例产生交互。
-
-在开发过程中，使用 `eventCenter` 也需要遵循一些规范。
-
-## 事件名
-
-### 规范
-
-命名遵循 `namespace:eventName` 的结构，同类 eventName 通过 namespace 来区分。
-
-比如 node 和 edge 抛出的都是 click 事件，但是观察者可能是不同群体，通过 namespace 使得事件监听更精确，不容易出错。
-
-目前 core 包中定义的 namespace 包括：
-
-- `node`：节点事件
-- `edge`：边事件
-- `anchor`：锚点事件
-- `blank`：画布空白区域事件
-- `history`：历史记录事件
-- `selection`：选区事件
-
-### 开发注意
-
-内部均通过 `eventCenter` 来抛出事件，包括以下两种情况：
-
-- `graphModel` 中通过 `this.eventCenter` 调用 `eventCenter` 对象的 `emit` 方法抛出事件。
-- 组件通过 `props` 获取到 `eventCenter` 实例对象，然后在组件内部调用 `eventCenter` 的 `emit` 方法来抛出事件。
-  - 部分组件会从 `props` 中直接获取 `eventCenter` 实例
-  - 而另一部分组件则需要从 `props` 中获取 `graphModel` 实例，然后通过 `graphModel.eventCenter` 获取 `eventCenter` 实例
-
-用户可以通过 LogicFlow 的实例 `lf` 去监听我们抛出的事件。
-
-如果组件内部监听了 `eventCenter` 事件，在组件销毁的时候，需要取消这些监听。
-
-## 事件对象
-
-在使用 `emit` 方法抛出事件时，可以传递一个对象作为第二个参数，该对象将作为对应的事件监听器的回调函数的入参。
-
-事件对象可以包含任何与当前事件相关的信息，比如节点的 id，边的 id，原生鼠标事件对象等。
-
-以 `node:click` 事件为例：
-
-```ts
-// 抛出 node:click 事件
-eventCenter.emit('node:click', {
-  data: {
-    // 节点数据
-  },
-  e: MouseEvent,
-  position: {
-    // 鼠标点击的位置信息
-  }
-});
-
-// 监听 node:click 事件
-eventCenter.on('node:click', (event) => {
-  console.log(event); // event 即为抛出事件时传递的对象
-});
-
-// 使用解构赋值可以便捷地获取事件对象中的信息
-eventCenter.on('node:click', ({ data, e, position }) => {
-  console.log(data, e, position);
-});
-```