@logicflow/core 2.0.0-beta.0 → 2.0.0-beta.10

package/src/event/eventArgs.ts

@@ -1,8 +1,8 @@
-import {
-  LogicFlow,
+import LogicFlow, {
   BaseNodeModel,
   BaseEdgeModel,
   Model,
+  GraphModel,
   TransformData,
   TransformType,
 } from '..'
@@ -24,12 +24,30 @@ type ClickEventArgs = {
   isMultiple: boolean
 }
 
-type NodeEventArgsPick<T extends 'data' | 'e' | 'position'> = Pick<
+type NodeEventArgsPick<
+  T extends
+    | 'preData'
+    | 'data'
+    | 'model'
+    | 'e'
+    | 'position'
+    | 'deltaX'
+    | 'deltaY'
+    | 'index',
+> = Pick<
   {
+    /**
+     * 上一个状态的节点数据
+     */
+    preData: NodeData
     /**
      * 节点数据
      */
     data: NodeData
+    /**
+     * 节点 model
+     */
+    model: BaseNodeModel
     /**
      * 原生鼠标事件对象
      */
@@ -38,6 +56,39 @@ type NodeEventArgsPick<T extends 'data' | 'e' | 'position'> = Pick<
      * 鼠标触发点相对于画布左上角的坐标
      */
     position: ClientPosition
+    /**
+     * 鼠标 X轴移动的距离
+     */
+    deltaX: number
+    /**
+     * 鼠标Y轴移动的距离
+     */
+    deltaY: number
+    /**
+     * Resize 时调整的是哪个控制点
+     */
+    index: number
+  },
+  T
+>
+
+type TextEventArgsPick<
+  T extends 'data' | 'e' | 'model' | 'element' | 'position',
+> = Pick<
+  {
+    // 节点数据
+    data?: any
+    // 原生鼠标事件对象
+    e?: MouseEvent | FocusEvent
+    // 文本所在元素model
+    model?: BaseNodeModel | BaseEdgeModel | unknown
+    // 文本dom
+    element?: HTMLElement | null
+    // 文本位置
+    position?: {
+      x: number
+      y: number
+    }
   },
   T
 >
@@ -65,7 +116,7 @@ interface NodeEventArgs {
   /**
    * 鼠标移动节点
    */
-  'node:mousemove': NodeEventArgsPick<'data' | 'e'>
+  'node:mousemove': NodeEventArgsPick<'data' | 'e' | 'deltaX' | 'deltaY'>
   /**
    * 鼠标进入节点
    */
@@ -97,7 +148,7 @@ interface NodeEventArgs {
   /**
    * 拖拽节点
    */
-  'node:drag': NodeEventArgsPick<'data' | 'e'>
+  'node:drag': NodeEventArgsPick<'data' | 'e' | 'deltaX' | 'deltaY'>
   /**
    * 拖拽节点结束
    */
@@ -106,6 +157,16 @@ interface NodeEventArgs {
    * 右键点击节点
    */
   'node:contextmenu': NodeEventArgsPick<'data' | 'e' | 'position'>
+  /**
+   * 节点旋转
+   */
+  'node:rotate': NodeEventArgsPick<'data' | 'e' | 'model'>
+  /**
+   * 节点缩放
+   */
+  'node:resize': NodeEventArgsPick<
+    'preData' | 'data' | 'model' | 'deltaX' | 'deltaY' | 'index'
+  >
 }
 
 type EdgeEventArgsPick<T extends 'data' | 'e' | 'position'> = Pick<
@@ -179,6 +240,88 @@ interface EdgeEventArgs {
   }
 }
 
+/**
+ * 文本事件
+ */
+interface TextEventArgs {
+  // 鼠标按下文本
+  'text:mousedown': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 开始拖拽文本
+  'text:dragstart': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 文本拖拽
+  'text:drag': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 文本拖拽结束
+  'text:drop': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 文本单击
+  'text:click': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 文本双击
+  'text:dbclick': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 文本失焦
+  'text:blur': TextEventArgsPick<'data' | 'e' | 'model' | 'element'>
+  // 鼠标移动文本
+  'text:mousemove': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 鼠标抬起
+  'text:mouseup': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 文本获焦
+  'text:focus': TextEventArgsPick<'data' | 'e' | 'model' | 'element'>
+  // 文本新增
+  'text:add': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 文本更新
+  'text:update': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 文本清空
+  'text:clear': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 文本删除
+  'text:delete': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 不允许增加文本
+  'text:not-allowed-add': TextEventArgsPick<'data' | 'e' | 'model'>
+}
+
+/**
+ * label插件文本事件
+ */
+interface TextEventArgs {
+  // 鼠标按下文本
+  'label:mousedown': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 开始拖拽文本
+  'label:dragstart': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 文本拖拽
+  'label:drag': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 文本拖拽结束
+  'label:drop': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 文本单击
+  'label:click': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 文本双击
+  'label:dbclick': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 文本失焦
+  'label:blur': TextEventArgsPick<'data' | 'e' | 'model' | 'element'>
+  // 鼠标移动文本
+  'label:mousemove': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 鼠标抬起
+  'label:mouseup': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 文本获焦
+  'label:focus': TextEventArgsPick<'data' | 'e' | 'model' | 'element'>
+  // 文本新增
+  'label:add': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 文本更新
+  'label:update': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 文本清空
+  'label:clear': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 文本删除
+  'label:delete': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 文本新增
+  'label:should-add': TextEventArgsPick<'data' | 'e' | 'model' | 'position'>
+  // 文本批量新增
+  'label:batch-add': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 文本更新
+  'label:should-update': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 文本删除
+  'label:should-delete': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 文本批量删除
+  'label:batch-delete': TextEventArgsPick<'data' | 'e' | 'model'>
+  // 不允许增加文本
+  'label:not-allowed-add': TextEventArgsPick<'data' | 'e' | 'model'>
+}
+
 /**
  * 连线事件
  */
@@ -240,26 +383,6 @@ interface CommonEventArgs {
       properties: Record<string, any>
     }
   }
-  /**
-   * 节点/边的文本更新
-   */
-  // TODO: 更新文本事件抛出的对象是否需要更详细？
-  'text:update': {
-    data: {
-      /**
-       * 更新的文本
-       */
-      text: string
-      /**
-       * 节点/边的 id
-       */
-      id: string
-      /**
-       * 节点/边的类型
-       */
-      type: string
-    }
-  }
   /**
    * 进行画布平移或缩放等变化操作时触发
    */
@@ -281,6 +404,21 @@ interface CommonEventArgs {
      * 渲染后的画布数据
      */
     data: GraphData
+    /**
+     * 渲染后的画布 model
+     */
+    graphModel: GraphModel
+  }
+  /**
+   * 画布重新更新后触发. 即 lf.render(graphData)方法被调用后或者改变画布（graphModel）上的属性后触发。
+   * 如果是主动修改某个特定属性导致画布更新，想要在画布更新后做一些操作，建议注册事件后在回调函数中及时注销该事件，或者使用once事件代替on事件。
+   * 因为其他属性也可能导致画布更新，触发该事件。
+   */
+  'graph:updated': {
+    /**
+     * 更新后的画布数据
+     */
+    data: GraphData
   }
 }
 
@@ -465,12 +603,13 @@ interface SelectionEventArgs {
   'selection:contextmenu': SelectionEventArgsPick<'data' | 'e' | 'position'>
 }
 
-export interface EventArgs
-  extends NodeEventArgs,
-    EdgeEventArgs,
-    ConnectionEventArgs,
-    CommonEventArgs,
-    AnchorEventArgs,
-    BlankEventArgs,
-    HistoryEventArgs,
-    SelectionEventArgs {}
+// 此处主要是对事件参数进行聚合
+export type EventArgs = NodeEventArgs &
+  EdgeEventArgs &
+  ConnectionEventArgs &
+  CommonEventArgs &
+  AnchorEventArgs &
+  BlankEventArgs &
+  HistoryEventArgs &
+  SelectionEventArgs &
+  TextEventArgs

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
 }
@@ -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

@@ -10,12 +10,17 @@ export function observer<P>(props: P) {
 
 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 { formateAnchorConnectValidateData } from './util/node'
+export { formatAnchorConnectValidateData } from './util/node'
 
 export default LogicFlow

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,22 +1,28 @@
+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
 
-function translationNodeData(nodeData: NodeData, distance: number) {
+export function translateNodeData(nodeData: NodeData, distance: number) {
   nodeData.x += distance
   nodeData.y += distance
-  if (nodeData.text) {
+
+  if (!isEmpty(nodeData.text)) {
     nodeData.text.x += distance
     nodeData.text.y += distance
   }
+
   return nodeData
 }
 
-function translationEdgeData(edgeData: EdgeData, distance: number) {
+export function translateEdgeData(edgeData: EdgeData, distance: number) {
   if (edgeData.startPoint) {
     edgeData.startPoint.x += distance
     edgeData.startPoint.y += distance
@@ -31,13 +37,78 @@ function translationEdgeData(edgeData: EdgeData, distance: number) {
       point.y += distance
     })
   }
-  if (edgeData.text) {
+
+  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
 
@@ -65,10 +136,10 @@ export function initDefaultShortcut(lf: LogicFlow, graph: GraphModel) {
     }
     selected = elements
     selected.nodes.forEach((node) =>
-      translationNodeData(node, TRANSLATION_DISTANCE),
+      translateNodeData(node, TRANSLATION_DISTANCE),
     )
     selected.edges.forEach((edge) =>
-      translationEdgeData(edge, TRANSLATION_DISTANCE),
+      translateEdgeData(edge, TRANSLATION_DISTANCE),
     )
     return false
   })
@@ -86,10 +157,10 @@ export function initDefaultShortcut(lf: LogicFlow, graph: GraphModel) {
       addElements.nodes.forEach((node) => lf.selectElementById(node.id, true))
       addElements.edges.forEach((edge) => lf.selectElementById(edge.id, true))
       selected.nodes.forEach((node) =>
-        translationNodeData(node, TRANSLATION_DISTANCE),
+        translateNodeData(node, TRANSLATION_DISTANCE),
       )
       selected.edges.forEach((edge) =>
-        translationEdgeData(edge, TRANSLATION_DISTANCE),
+        translateEdgeData(edge, TRANSLATION_DISTANCE),
       )
       CHILDREN_TRANSLATION_DISTANCE =
         CHILDREN_TRANSLATION_DISTANCE + TRANSLATION_DISTANCE

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]
@@ -63,11 +64,21 @@ export namespace Model {
   }
 
   // 定义边界数据结构，左上坐标 + 右下坐标定位一个矩形
+  // TODO: 在使用该类型的 API 中，都要做声明，返回值格式已更新
   export type BoxBoundsPoint = {
-    x1: number // Left Top X
-    y1: number // Left Top Y
-    x2: number // Right Bottom X
-    y2: number // Right Bottom Y
+    minX: number // Left Top X
+    minY: number // Left Top Y
+    maxX: number // Right Bottom X
+    maxY: number // Right Bottom Y
+  }
+
+  export interface BoxBounds extends BoxBoundsPoint {
+    x: number
+    y: number
+    width: number
+    height: number
+    centerX: number
+    centerY: number
   }
 
   export type OutlineInfo = {
@@ -90,7 +101,7 @@ export namespace Model {
     centerY: number
   }
 
-  export interface BaseModel {
+  export interface BaseModel<P extends PropertiesType = PropertiesType> {
     /**
      * 节点或边对应的 ID.
      *
@@ -139,11 +150,11 @@ export namespace Model {
     /**
      * 元素上的文本
      *
-     * LogicFlow 中存在梁总文本：1. 脱离边和节点单独存在的问题；2. 必须和边、节点关联的文本
+     * LogicFlow 中存在两种文本：1. 脱离边和节点单独存在的问题；2. 必须和边、节点关联的文本
      * 此属性控制的是第二种。节点和边在删除、调整的同时，其关联的文本也会对应删除、调整。
      */
     text: LogicFlow.TextConfig
-    properties: Record<string, unknown>
+    properties: P
 
     isSelected: boolean // 元素是否被选中
     isHovered: boolean // 鼠标是否悬停在元素上