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

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/event/eventEmitter.ts

@@ -77,7 +77,7 @@ export default class EventEmitter {
   emit(evts: string, eventArgs: EventCallback) {
     evts?.split(',').forEach((evt) => {
       const events = this._events[evt] || []
-      // TODO: 这是什么？？？
+      // TODO: 这是什么？？？ +1
       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

package/src/model/edge/BaseEdgeModel.ts

@@ -1,4 +1,4 @@
-import { assign, cloneDeep, find } from 'lodash-es'
+import { assign, cloneDeep, find, isUndefined } from 'lodash-es'
 import { action, computed, observable, toJS } from 'mobx'
 import { BaseNodeModel, GraphModel, Model } from '..'
 import LogicFlow from '../../LogicFlow'
@@ -20,6 +20,7 @@ import {
 import Point = LogicFlow.Point
 import EdgeData = LogicFlow.EdgeData
 import EdgeConfig = LogicFlow.EdgeConfig
+import TextConfig = LogicFlow.TextConfig
 
 export interface IBaseEdgeModel extends Model.BaseModel {
   /**
@@ -56,7 +57,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
   @observable startPoint!: Point
   @observable endPoint!: Point
 
-  @observable text = {
+  @observable text: Required<TextConfig> = {
     value: '',
     x: 0,
     y: 0,
@@ -431,8 +432,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
 
   /**
    * 设置边的属性，会触发重新渲染
-   * @param key 属性名
-   * @param val 属性值
+   * @param properties 要更新的 properties，会做合并
    */
   @action
   setProperties(properties: Record<string, any>): void {
@@ -497,28 +497,38 @@ export class BaseEdgeModel implements IBaseEdgeModel {
    * 内部方法，处理初始化文本格式
    */
   @action formatText(data: EdgeConfig) {
-    // 暂时处理，只传入text的情况
     const { x, y } = this.textPosition
-    if (!data.text || typeof data.text === 'string') {
-      this.text = {
-        value: data.text || '',
-        x,
-        y,
-        draggable: this.text.draggable,
-        editable: this.text.editable,
-      }
-      return
+    const { text } = data
+    let textConfig: Required<TextConfig> = {
+      value: '',
+      x,
+      y,
+      draggable: false,
+      editable: true,
     }
 
-    if (Object.prototype.toString.call(data.text) === '[object Object]') {
-      this.text = {
-        x: data.text.x || x,
-        y: data.text.y || y,
-        value: data.text.value || '',
-        draggable: this.text.draggable,
-        editable: this.text.editable,
+    if (text) {
+      if (typeof text === 'string') {
+        textConfig = {
+          ...textConfig,
+          value: text,
+        }
+      } else {
+        textConfig = {
+          ...textConfig,
+          x: text.x ?? x,
+          y: text.y ?? y,
+          value: text.value ?? '',
+        }
+        if (!isUndefined(text.draggable)) {
+          textConfig.draggable = text.draggable
+        }
+        if (!isUndefined(text.editable)) {
+          textConfig.editable = text.editable
+        }
       }
     }
+    this.text = textConfig
   }
 
   /**

package/src/model/node/BaseNodeModel.ts

@@ -1,5 +1,5 @@
 import { action, computed, isObservable, observable, toJS } from 'mobx'
-import { assign, cloneDeep, has, isNil, mapKeys } from 'lodash-es'
+import { assign, cloneDeep, has, isNil, isUndefined, mapKeys } from 'lodash-es'
 import { GraphModel, Model } from '..'
 import LogicFlow from '../../LogicFlow'
 import {
@@ -186,6 +186,7 @@ export class BaseNodeModel implements IBaseNodeModel {
     }
 
     this.formatText(data)
+    // 在下面又将 NodeConfig 中的数据赋值给了 this，应该会触发 setAttributes，确认是否符合预期
     assign(this, pickNodeConfig(data)) // TODO: 确认 constructor 中赋值 properties 是否必要
     const { overlapMode } = this.graphModel
     if (overlapMode === OverlapMode.INCREASE) {
@@ -219,27 +220,34 @@ export class BaseNodeModel implements IBaseNodeModel {
    * 始化文本属性
    */
   private formatText(data: NodeConfig): void {
-    if (!data.text) {
-      data.text = {
-        value: '',
-        x: data.x,
-        y: data.y,
-        draggable: false,
-        editable: true,
-      }
-    } else {
-      if (typeof data.text === 'string') {
-        data.text = {
-          value: data.text,
-          x: data.x,
-          y: data.y,
-          draggable: false,
-          editable: true,
-        }
+    const { x, y, text } = data
+    let textConfig: TextConfig = {
+      value: '',
+      x,
+      y,
+      draggable: false,
+      editable: true,
+    }
+    if (text) {
+      if (typeof text === 'string') {
+        textConfig.value = text
       } else {
-        data.text.editable = data.text.editable ?? true
+        textConfig = {
+          ...textConfig,
+          x: text.x ?? x,
+          y: text.y ?? y,
+          value: text.value ?? '',
+        }
+        if (!isUndefined(text.draggable)) {
+          textConfig.draggable = text.draggable
+        }
+        if (!isUndefined(text.editable)) {
+          textConfig.draggable = text.draggable
+        }
       }
     }
+
+    data.text = textConfig
   }
 
   /**

package/src/model/node/CircleNodeModel.ts

@@ -54,11 +54,11 @@ export class CircleNodeModel extends BaseNodeModel {
         theme: { circle },
       },
     } = this
-    const { style: customStyle } = this.properties
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
-      ...(customStyle ?? {}),
       ...cloneDeep(circle),
+      ...cloneDeep(customStyle),
     }
   }
 

package/src/model/node/DiamondNodeModel.ts

@@ -53,9 +53,11 @@ export class DiamondNodeModel extends BaseNodeModel {
         theme: { diamond },
       },
     } = this
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
       ...cloneDeep(diamond),
+      ...cloneDeep(customStyle),
     }
   }
 

package/src/model/node/EllipseNodeModel.ts

@@ -51,9 +51,11 @@ export class EllipseNodeModel extends BaseNodeModel {
         theme: { ellipse },
       },
     } = this
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
       ...cloneDeep(ellipse),
+      ...cloneDeep(customStyle),
     }
   }
 

package/src/model/node/HtmlNodeModel.ts

@@ -7,7 +7,7 @@ import { observable } from 'mobx'
 import LogicFlow from '../../LogicFlow'
 import GraphModel from '../GraphModel'
 
-export type IHtmlNodeModel = {
+export type IHtmlNodeProperties = {
   width?: number
   height?: number
   style?: LogicFlow.CommonTheme
@@ -18,7 +18,7 @@ export type IHtmlNodeModel = {
 
 export class HtmlNodeModel extends BaseNodeModel {
   modelType = ModelType.HTML_NODE
-  @observable properties: IHtmlNodeModel = {}
+  @observable properties: IHtmlNodeProperties = {}
 
   constructor(data: LogicFlow.NodeConfig, graphModel: GraphModel) {
     super(data, graphModel)

package/src/model/node/PolygonNodeModel.ts

@@ -66,11 +66,11 @@ export class PolygonNodeModel extends BaseNodeModel {
         theme: { polygon },
       },
     } = this
-    const { style: customStyle } = this.properties
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
       ...cloneDeep(polygon),
-      ...(cloneDeep(customStyle) || {}),
+      ...cloneDeep(customStyle),
     }
   }
 

package/src/model/node/RectNodeModel.ts

@@ -8,6 +8,7 @@ import { ModelType } from '../../constant'
 export type IRectNodeModel = {
   width?: number
   height?: number
+  radius?: number
   style?: LogicFlow.CommonTheme
   textStyle?: LogicFlow.CommonTheme
 
@@ -21,17 +22,21 @@ export class RectNodeModel extends BaseNodeModel {
 
   constructor(data: LogicFlow.NodeConfig, graphModel: GraphModel) {
     super(data, graphModel)
-    this.properties = data.properties || {}
 
+    // TODO：类字段初始化会覆盖 super、setAttributes 中设置的属性
+    this.properties = data.properties || {}
+    // TODO: bug here, 上面更新 properties 会触发 setAttributes，下面再主动调用，会导致触发两次
     this.setAttributes()
   }
 
   setAttributes() {
     super.setAttributes()
 
-    const { width, height } = this.properties
+    const { width, height, radius } = this.properties
     if (width) this.width = width
     if (height) this.height = height
+    // 矩形特有
+    if (radius) this.radius = radius
   }
 
   getDefaultAnchor() {
@@ -47,9 +52,11 @@ export class RectNodeModel extends BaseNodeModel {
   getNodeStyle() {
     const style = super.getNodeStyle()
     const { rect } = this.graphModel.theme
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
       ...cloneDeep(rect),
+      ...cloneDeep(customStyle),
     }
   }
 }

package/src/options.ts

@@ -10,8 +10,8 @@ import GridOptions = Grid.GridOptions
 export namespace Options {
   import NodeData = LogicFlow.NodeData
   import EdgeData = LogicFlow.EdgeData
-  import ExtensionConstructor = LogicFlow.ExtensionConstructor
   import GraphData = LogicFlow.GraphData
+  import ExtensionType = LogicFlow.ExtensionType
   export type EdgeType = 'line' | 'polyline' | 'bezier' | string
   export type BackgroundConfig = {
     // 背景图片地址
@@ -88,7 +88,7 @@ export namespace Options {
     guards?: GuardsConfig
     overlapMode?: OverlapMode
 
-    plugins?: ExtensionConstructor[]
+    plugins?: ExtensionType[]
     pluginsOptions?: Record<string, any>
     disabledPlugins?: string[]
     disabledTools?: string[]
@@ -111,22 +111,13 @@ export namespace Options {
   export function get(options: Partial<Manual>) {
     const { ...others } = options
     const container = options.container
-    if (container != null) {
-      if (options.width == null) {
-        others.width = container.clientWidth
-      }
-      if (options.height == null) {
-        others.height = container.clientHeight
-      }
-    } else {
+    if (!container) {
       throw new Error(
         'Ensure the container of LogicFlow is specified and valid.',
       )
     }
 
-    const result = assign({}, defaults, others) as Options.Definition
-
-    return result
+    return assign({}, defaults, others) as Options.Definition
   }
 }
 

package/src/tool/tool.ts

@@ -3,8 +3,8 @@ import { VNode } from 'preact'
 import TextEdit from './TextEditTool'
 import MultipleSelect from './MultipleSelectTool'
 import LogicFlow from '../LogicFlow'
-import { GraphModel, BaseEdgeModel, BaseNodeModel } from '../model'
 import { ElementState, EventType } from '../constant'
+import { GraphModel, BaseEdgeModel, BaseNodeModel } from '../model'
 
 export type IToolProps = {
   textEditElement?: BaseNodeModel | BaseEdgeModel