@logicflow/core 2.0.0-beta.7 → 2.0.0-beta.9

package/src/LogicFlow.tsx

@@ -19,10 +19,9 @@ import { formatData } from './util'
 import { Dnd, snapline } from './view/behavior'
 import Tool from './tool'
 import History from './history'
-import Keyboard from './keyboard'
+import Keyboard, { initDefaultShortcut } from './keyboard'
 import { EventCallback, CallbackArgs, EventArgs } from './event/eventEmitter'
 import { ElementType, EventType, SegmentDirection } from './constant'
-import { initDefaultShortcut } from './keyboard/shortcut'
 
 import Extension = LogicFlow.Extension
 import ExtensionConfig = LogicFlow.ExtensionConfig
@@ -692,10 +691,7 @@ export class LogicFlow {
    * @param edges
    * @param distance
    */
-  addElements(
-    { nodes, edges }: GraphConfigData,
-    distance = 40,
-  ): GraphElements | undefined {
+  addElements({ nodes, edges }: GraphConfigData, distance = 40): GraphElements {
     // TODO: 1. 解决下面方法中 distance 传参缺未使用的问题；该方法在快捷键中有调用
     // TODO: 2. review 一下本函数代码逻辑，确认 nodeIdMap 的作用，看是否有优化的空间
     console.log('distance', distance)
@@ -1387,12 +1383,17 @@ export namespace LogicFlow {
     [key: string]: string | undefined
   }
 
-  export type PropertiesType = {
+  export interface PropertiesType {
     width?: number
     height?: number
     rx?: number
     ry?: number
-  } & Record<string, any>
+
+    style?: LogicFlow.CommonTheme
+    textStyle?: LogicFlow.CommonTheme
+
+    [key: string]: any
+  }
   export type AttributesType = Record<string, any>
 
   export type VectorData = {
@@ -1530,17 +1531,20 @@ export namespace LogicFlow {
     [key: string]: any
   }
 
-  export interface NodeConfig {
+  export interface NodeConfig<P extends PropertiesType = PropertiesType> {
     id?: string
     type: string
     x: number
     y: number
     text?: TextConfig | string
     zIndex?: number
-    properties?: PropertiesType
+    properties?: P
     virtual?: boolean // 是否虚拟节点
     rotate?: number
 
+    rotatable?: boolean // 节点是否可旋转
+    resizable?: boolean // 节点是否可缩放
+
     [key: string]: any
   }
 
@@ -1550,7 +1554,7 @@ export namespace LogicFlow {
     [key: string]: unknown
   }
 
-  export interface EdgeConfig {
+  export interface EdgeConfig<P extends PropertiesType = PropertiesType> {
     id?: string
     type?: string // TODO: 将所有类型选项列出来；LogicFlow 内部默认为 polyline
 
@@ -1563,7 +1567,7 @@ export namespace LogicFlow {
     text?: TextConfig | string
     pointsList?: Point[]
     zIndex?: number
-    properties?: PropertiesType
+    properties?: P
   }
 
   export interface EdgeData extends EdgeConfig {
@@ -1828,8 +1832,8 @@ export namespace LogicFlow {
   }
   export type FocusOnArgsType = FocusOnById | FocusOnByCoordinate
 
-  export type BaseNodeModelCtor = typeof BaseNodeModel
-  export type BaseEdgeModelCtor = typeof BaseEdgeModel
+  export type BaseNodeModelCtor = typeof BaseNodeModel<PropertiesType>
+  export type BaseEdgeModelCtor = typeof BaseEdgeModel<PropertiesType>
 
   export type GraphElementCtor = BaseNodeModelCtor | BaseEdgeModelCtor
   export type GraphElement = BaseNodeModel | BaseEdgeModel

package/src/event/eventArgs.ts

@@ -32,7 +32,8 @@ type NodeEventArgsPick<
     | 'e'
     | 'position'
     | 'deltaX'
-    | 'deltaY',
+    | 'deltaY'
+    | 'index',
 > = Pick<
   {
     /**
@@ -63,6 +64,10 @@ type NodeEventArgsPick<
      * 鼠标Y轴移动的距离
      */
     deltaY: number
+    /**
+     * Resize 时调整的是哪个控制点
+     */
+    index: number
   },
   T
 >
@@ -159,7 +164,9 @@ interface NodeEventArgs {
   /**
    * 节点缩放
    */
-  'node:resize': NodeEventArgsPick<'preData' | 'data' | 'model'>
+  'node:resize': NodeEventArgsPick<
+    'preData' | 'data' | 'model' | 'deltaX' | 'deltaY' | 'index'
+  >
 }
 
 type EdgeEventArgsPick<T extends 'data' | 'e' | 'position'> = Pick<
@@ -403,11 +410,16 @@ interface CommonEventArgs {
     graphModel: GraphModel
   }
   /**
-   * 画布重新更新后触发. 即 lf.render(graphData)方法被调用后或者改变画布（garphModel）上的属性后触发。
+   * 画布重新更新后触发. 即 lf.render(graphData)方法被调用后或者改变画布（graphModel）上的属性后触发。
    * 如果是主动修改某个特定属性导致画布更新，想要在画布更新后做一些操作，建议注册事件后在回调函数中及时注销该事件，或者使用once事件代替on事件。
    * 因为其他属性也可能导致画布更新，触发该事件。
    */
-  'graph:updated': Record<string, undefined>
+  'graph:updated': {
+    /**
+     * 更新后的画布数据
+     */
+    data: GraphData
+  }
 }
 
 type AnchorEventArgsPick<T extends 'data' | 'e' | 'nodeModel' | 'edgeModel'> =

package/src/event/eventEmitter.ts

@@ -1,6 +1,6 @@
 import { EventArgs } from './eventArgs'
 
-export interface EventType<T extends string = string> {
+export type EventType<T extends string = string> = {
   readonly callback: EventCallback<T>
   readonly once: boolean
 }

package/src/index.ts

@@ -18,6 +18,7 @@ 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'

package/src/keyboard/index.ts

@@ -2,6 +2,8 @@ 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
 

package/src/keyboard/shortcut.ts

@@ -1,9 +1,12 @@
 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
 
@@ -42,6 +45,70 @@ export function translateEdgeData(edgeData: EdgeData, distance: number) {
   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
 

package/src/model/BaseModel.ts

@@ -4,6 +4,7 @@ import LogicFlow from '../LogicFlow'
 import { ElementState } from '../constant'
 
 export namespace Model {
+  import PropertiesType = LogicFlow.PropertiesType
   export type AdditionStateDataType = Record<string, unknown>
   export type PropertyType = Record<string, unknown>
   export type VectorType = [number, number]
@@ -87,7 +88,20 @@ export namespace Model {
     y1: number
   }
 
-  export interface BaseModel {
+  export interface BoxBounds {
+    x: number
+    y: number
+    width: number
+    height: number
+    minX: number
+    minY: number
+    maxX: number
+    maxY: number
+    centerX: number
+    centerY: number
+  }
+
+  export interface BaseModel<P extends PropertiesType = PropertiesType> {
     /**
      * 节点或边对应的 ID.
      *
@@ -140,8 +154,7 @@ export namespace Model {
      * 此属性控制的是第二种。节点和边在删除、调整的同时，其关联的文本也会对应删除、调整。
      */
     text: LogicFlow.TextConfig
-
-    properties: Record<string, unknown>
+    properties: P
 
     isSelected: boolean // 元素是否被选中
     isHovered: boolean // 鼠标是否悬停在元素上

package/src/model/EditConfigModel.ts

@@ -1,4 +1,4 @@
-import { assign, isBoolean, pick } from 'lodash-es'
+import { assign, isBoolean, isUndefined, pick } from 'lodash-es'
 import { observable, action } from 'mobx'
 import { TextMode } from '../constant'
 
@@ -206,7 +206,7 @@ export class EditConfigModel {
   @observable textDraggable = false
   // 节点
   @observable nodeTextEdit = true
-  @observable nodeTextDraggable = true
+  @observable nodeTextDraggable = false
   @observable nodeTextMultiple = false // 是否支持多个节点文本
   @observable nodeTextVertical = false // 节点文本朝向是否是纵向
   @observable nodeTextMode = TextMode.TEXT // 节点文本模式
@@ -279,24 +279,24 @@ export class EditConfigModel {
     }
 
     // 如果不传，默认undefined表示允许文本编辑
-    if (textEdit === false) {
+    if (!isUndefined(textEdit)) {
       assign(conf, {
-        nodeTextEdit: false,
-        edgeTextEdit: false,
+        nodeTextEdit: textEdit,
+        edgeTextEdit: textEdit,
       })
     }
 
-    if (textMode) {
+    if (!isUndefined(textDraggable)) {
       assign(conf, {
-        nodeTextMode: textMode,
-        edgeTextMode: textMode,
+        nodeTextDraggable: textDraggable,
+        edgeTextDraggable: textDraggable,
       })
     }
 
-    if (textDraggable === false) {
+    if (textMode) {
       assign(conf, {
-        nodeTextDraggable: false,
-        edgeTextDraggable: false,
+        nodeTextMode: textMode,
+        edgeTextMode: textMode,
       })
     }
 

package/src/model/GraphModel.ts

@@ -1,4 +1,4 @@
-import { find, forEach, isObject, map } from 'lodash-es'
+import { find, forEach, map } from 'lodash-es'
 import { action, computed, observable } from 'mobx'
 import {
   BaseEdgeModel,
@@ -789,7 +789,7 @@ export class GraphModel {
     if (nodeX && nodeY) {
       node.x = snapToGrid(nodeX, this.gridSize)
       node.y = snapToGrid(nodeY, this.gridSize)
-      if (isObject(node.text)) {
+      if (typeof node.text === 'object' && node.text !== null) {
         // 原来的处理是：node.text.x -= getGridOffset(nodeX, this.gridSize)
         // 由于snapToGrid()使用了Math.round()四舍五入的做法，因此无法判断需要执行
         // node.text.x = node.text.x + getGridOffset()
@@ -815,7 +815,7 @@ export class GraphModel {
       data.x += 30
       data.y += 30
       data.id = ''
-      if (isObject(data.text)) {
+      if (typeof data.text === 'object' && data.text !== null) {
         data.text.x += 30
         data.text.y += 30
       }

package/src/model/edge/BaseEdgeModel.ts

@@ -22,12 +22,15 @@ import Point = LogicFlow.Point
 import EdgeData = LogicFlow.EdgeData
 import EdgeConfig = LogicFlow.EdgeConfig
 import TextConfig = LogicFlow.TextConfig
+import PropertiesType = LogicFlow.PropertiesType
 
-export interface IBaseEdgeModel extends Model.BaseModel {
+export interface IBaseEdgeModel<P extends PropertiesType>
+  extends Model.BaseModel<P> {
   /**
    * model 基础类型，固定为 edge
    */
   readonly BaseType: ElementType.EDGE
+  properties: P
 
   sourceNodeId: string
   targetNodeId: string
@@ -46,7 +49,9 @@ export interface IBaseEdgeModel extends Model.BaseModel {
   arrowConfig?: LogicFlow.ArrowConfig
 }
 
-export class BaseEdgeModel implements IBaseEdgeModel {
+export class BaseEdgeModel<P extends PropertiesType = PropertiesType>
+  implements IBaseEdgeModel<P>
+{
   readonly BaseType = ElementType.EDGE
   static BaseType: ElementType = ElementType.EDGE
 
@@ -66,7 +71,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
     draggable: false,
     editable: true,
   }
-  @observable properties: Record<string, unknown> = {}
+  @observable properties: P
   @observable points = ''
   @observable pointsList: Point[] = []
 
@@ -104,8 +109,10 @@ export class BaseEdgeModel implements IBaseEdgeModel {
   };
   [propName: string]: unknown // 支持自定义
 
-  constructor(data: EdgeConfig, graphModel: GraphModel) {
+  constructor(data: EdgeConfig<P>, graphModel: GraphModel) {
     this.graphModel = graphModel
+    this.properties = data.properties ?? ({} as P)
+
     this.initEdgeData(data)
     this.setAttributes()
   }
@@ -420,7 +427,12 @@ export class BaseEdgeModel implements IBaseEdgeModel {
    */
   @action
   setProperty(key: string, val: any): void {
-    this.properties[key] = formatData(val)
+    const preProperties = toJS(this.properties)
+    this.properties = {
+      ...preProperties,
+      [key]: formatData(val),
+    }
+
     this.setAttributes()
   }
 

package/src/model/edge/BezierEdgeModel.ts

@@ -27,9 +27,11 @@ export class BezierEdgeModel extends BaseEdgeModel {
   getEdgeStyle() {
     const { bezier } = this.graphModel.theme
     const style = super.getEdgeStyle()
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
       ...cloneDeep(bezier),
+      ...cloneDeep(customStyle),
     }
   }
   getTextPosition(): Point {

package/src/model/edge/LineEdgeModel.ts

@@ -10,9 +10,11 @@ export class LineEdgeModel extends BaseEdgeModel {
   getEdgeStyle() {
     const { line } = this.graphModel.theme
     const style = super.getEdgeStyle()
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
       ...cloneDeep(line),
+      ...cloneDeep(customStyle),
     }
   }
   getTextPosition(): Point {

package/src/model/edge/PolylineEdgeModel.ts

@@ -41,9 +41,11 @@ export class PolylineEdgeModel extends BaseEdgeModel {
   getEdgeStyle() {
     const { polyline } = this.graphModel.theme
     const style = super.getEdgeStyle()
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
       ...cloneDeep(polyline),
+      ...cloneDeep(customStyle),
     }
   }
 

package/src/model/node/BaseNodeModel.ts

@@ -27,16 +27,19 @@ import NodeConfig = LogicFlow.NodeConfig
 import NodeData = LogicFlow.NodeData
 import Point = LogicFlow.Point
 import CommonTheme = LogicFlow.CommonTheme
+import PropertiesType = LogicFlow.PropertiesType
 
 import ResizeInfo = ResizeControl.ResizeInfo
 import ResizeNodeData = ResizeControl.ResizeNodeData
 import PCTResizeParams = ResizeControl.PCTResizeParams
 
-export interface IBaseNodeModel extends Model.BaseModel {
+export interface IBaseNodeModel<P extends PropertiesType>
+  extends Model.BaseModel<P> {
   /**
    * model基础类型，固定为node
    */
   readonly BaseType: ElementType.NODE
+  properties: P
 
   isDragging: boolean
   isShowAnchor: boolean
@@ -45,7 +48,9 @@ export interface IBaseNodeModel extends Model.BaseModel {
   setIsShowAnchor: (isShowAnchor: boolean) => void
 }
 
-export class BaseNodeModel implements IBaseNodeModel {
+export class BaseNodeModel<P extends PropertiesType = PropertiesType>
+  implements IBaseNodeModel<P>
+{
   readonly BaseType = ElementType.NODE
   static BaseType: ElementType = ElementType.NODE
 
@@ -62,7 +67,7 @@ export class BaseNodeModel implements IBaseNodeModel {
     draggable: false,
     editable: true,
   }
-  @observable properties: Record<string, unknown> = {}
+  @observable properties: P
   // 形状属性
   @observable private _width = 100
   public get width() {
@@ -101,8 +106,9 @@ export class BaseNodeModel implements IBaseNodeModel {
   @observable isHittable = true // 细粒度控制节点是否对用户操作进行反应
   @observable draggable = true
   @observable visible = true
-  @observable enableRotate = true
-  @observable enableResize = true
+
+  @observable rotatable = true // 节点可旋转
+  @observable resizable = true // 节点可缩放
 
   // 其它属性
   graphModel: GraphModel
@@ -138,9 +144,9 @@ export class BaseNodeModel implements IBaseNodeModel {
   hasSetSourceRules = false; // 用来限制rules的重复值
   [propName: string]: any // 支持用户自定义属性
 
-  constructor(data: NodeConfig, graphModel: GraphModel) {
+  constructor(data: NodeConfig<P>, graphModel: GraphModel) {
     this.graphModel = graphModel
-    this.properties = data.properties || {}
+    this.properties = data.properties ?? ({} as P)
 
     this.initNodeData(data)
     this.setAttributes()
@@ -169,9 +175,9 @@ export class BaseNodeModel implements IBaseNodeModel {
   /**
    * @overridable 可以重写
    * 初始化节点数据
-   * initNodeData和setAttributes的区别在于
-   * initNodeData只在节点初始化的时候调用，用于初始化节点的所有属性。
-   * setAttributes除了初始化调用外，还会在properties发生变化了调用。
+   * initNodeData 和 setAttributes 的区别在于
+   * initNodeData 只在节点初始化的时候调用，用于初始化节点的所有属性。
+   * setAttributes 除了初始化调用外，还会在 properties 发生变化了调用。
    */
   public initNodeData(data: NodeConfig) {
     if (!data.properties) {
@@ -188,7 +194,8 @@ export class BaseNodeModel implements IBaseNodeModel {
 
     this.formatText(data)
     // 在下面又将 NodeConfig 中的数据赋值给了 this，应该会触发 setAttributes，确认是否符合预期
-    assign(this, pickNodeConfig(data)) // TODO: 确认 constructor 中赋值 properties 是否必要
+    // TODO: 确认 constructor 中赋值 properties 是否必要，此处将 NodeConfig 中所有属性赋值给 this，包括 rotate、rotatable，resizable 等
+    assign(this, pickNodeConfig(data))
 
     const { overlapMode } = this.graphModel
     if (overlapMode === OverlapMode.INCREASE) {
@@ -363,7 +370,7 @@ export class BaseNodeModel implements IBaseNodeModel {
     const { textStyle = {} } = this.properties
     return {
       ...cloneDeep(nodeText),
-      ...cloneDeep(textStyle as object),
+      ...cloneDeep(textStyle),
     }
   }
 
@@ -743,12 +750,12 @@ export class BaseNodeModel implements IBaseNodeModel {
     this.isShowAnchor = flag
   }
 
-  @action setEnableRotate(flag = true): void {
-    this.enableRotate = flag
+  @action setRotatable(flag = true): void {
+    this.rotatable = flag
   }
 
-  @action setEnableResize(flag = true): void {
-    this.enableResize = flag
+  @action setResizable(flag = true): void {
+    this.resizable = flag
   }
 
   @action setHitable(flag = true): void {

package/src/model/node/CircleNodeModel.ts

@@ -18,9 +18,11 @@ export type ICircleNodeProperties = {
   [key: string]: any
 }
 
-export class CircleNodeModel extends BaseNodeModel {
+export class CircleNodeModel<
+  P extends ICircleNodeProperties = ICircleNodeProperties,
+> extends BaseNodeModel<P> {
   modelType = ModelType.CIRCLE_NODE
-  @observable properties: ICircleNodeProperties = {}
+  // @observable properties: ICircleNodeProperties = {}
   @observable r = 50
 
   @computed get width(): number {
@@ -31,9 +33,9 @@ export class CircleNodeModel extends BaseNodeModel {
     return this.r * 2
   }
 
-  constructor(data: NodeConfig, graphModel: GraphModel) {
+  constructor(data: NodeConfig<P>, graphModel: GraphModel) {
     super(data, graphModel)
-    this.properties = data.properties || {}
+    // this.properties = data.properties || {}
 
     this.setAttributes()
   }

package/src/model/node/DiamondNodeModel.ts

@@ -18,18 +18,20 @@ export type IDiamondNodeProperties = {
   style?: LogicFlow.CommonTheme
   textStyle?: LogicFlow.CommonTheme
 
-  [key: string]: any
+  [key: string]: unknown
 }
 
-export class DiamondNodeModel extends BaseNodeModel {
+export class DiamondNodeModel<
+  P extends IDiamondNodeProperties = IDiamondNodeProperties,
+> extends BaseNodeModel<P> {
   modelType = ModelType.DIAMOND_NODE
   @observable rx = 30
   @observable ry = 50
-  @observable properties: IDiamondNodeProperties = {}
+  // @observable properties: IDiamondNodeProperties = {}
 
-  constructor(data: NodeConfig, graphModel: GraphModel) {
+  constructor(data: NodeConfig<P>, graphModel: GraphModel) {
     super(data, graphModel)
-    this.properties = data.properties || {}
+    // this.properties = data.properties || {}
 
     this.setAttributes()
   }

package/src/model/node/EllipseNodeModel.ts

@@ -16,18 +16,20 @@ export type IEllipseNodeProperties = {
   style?: LogicFlow.CommonTheme
   textStyle?: LogicFlow.CommonTheme
 
-  [key: string]: any
+  [key: string]: unknown
 }
 
-export class EllipseNodeModel extends BaseNodeModel {
+export class EllipseNodeModel<
+  P extends IEllipseNodeProperties = IEllipseNodeProperties,
+> extends BaseNodeModel<P> {
   modelType = ModelType.ELLIPSE_NODE
   @observable rx = 30
   @observable ry = 45
-  @observable properties: IEllipseNodeProperties = {}
+  // @observable properties: IEllipseNodeProperties = {}
 
-  constructor(data: NodeConfig, graphModel: GraphModel) {
+  constructor(data: NodeConfig<P>, graphModel: GraphModel) {
     super(data, graphModel)
-    this.properties = data.properties || {}
+    // this.properties = data.properties || {}
 
     this.setAttributes()
   }