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

package/src/keyboard/shortcut.ts

@@ -1,3 +1,4 @@
+import { isEmpty } from 'lodash-es'
 import LogicFlow from '../LogicFlow'
 import GraphModel from '../model/GraphModel'
 
@@ -6,17 +7,19 @@ import EdgeData = LogicFlow.EdgeData
 
 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,7 +34,8 @@ function translationEdgeData(edgeData: EdgeData, distance: number) {
       point.y += distance
     })
   }
-  if (edgeData.text) {
+
+  if (!isEmpty(edgeData.text)) {
     edgeData.text.x += distance
     edgeData.text.y += distance
   }
@@ -65,10 +69,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 +90,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

@@ -63,33 +63,30 @@ 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 type OutlineInfo = {
-    x: number
-    y: number
-    x1: number
-    y1: number
-  }
-
-  export interface BoxBounds {
+  export interface BoxBounds extends BoxBoundsPoint {
     x: number
     y: number
     width: number
     height: number
-    minX: number
-    minY: number
-    maxX: number
-    maxY: number
     centerX: number
     centerY: number
   }
 
+  export type OutlineInfo = {
+    x: number
+    y: number
+    x1: number
+    y1: number
+  }
+
   export interface BaseModel {
     /**
      * 节点或边对应的 ID.
@@ -139,10 +136,11 @@ export namespace Model {
     /**
      * 元素上的文本
      *
-     * LogicFlow 中存在梁总文本：1. 脱离边和节点单独存在的问题；2. 必须和边、节点关联的文本
+     * LogicFlow 中存在两种文本：1. 脱离边和节点单独存在的问题；2. 必须和边、节点关联的文本
      * 此属性控制的是第二种。节点和边在删除、调整的同时，其关联的文本也会对应删除、调整。
      */
     text: LogicFlow.TextConfig
+
     properties: Record<string, unknown>
 
     isSelected: boolean // 元素是否被选中

package/src/model/EditConfigModel.ts

@@ -1,19 +1,20 @@
-import { assign, pick } from 'lodash-es'
-import { observable, action } from '../util/mobx'
+import { assign, isBoolean, pick } from 'lodash-es'
+import { observable, action } from 'mobx'
+import { TextMode } from '../constant'
 
-export interface EditConfigInterface {
+export interface IEditConfigType {
   /**
    * 是否为静默模式
    */
-  isSilentMode?: boolean
+  isSilentMode: boolean
   /**
    * 禁止缩放画布
    */
-  stopZoomGraph?: boolean
+  stopZoomGraph: boolean
   /**
    * 禁止鼠标滚动移动画布
    */
-  stopScrollGraph?: boolean
+  stopScrollGraph: boolean
   /**
    * 禁止拖动画布，默认为false
    * - true：完全禁止移动
@@ -21,7 +22,7 @@ export interface EditConfigInterface {
    * - horizontal：禁止水平方向拖动
    * - [number, number, number, number]：[minX, minY, maxX, maxY] 画布可拖动范围
    */
-  stopMoveGraph?:
+  stopMoveGraph:
     | boolean
     | 'vertical'
     | 'horizontal'
@@ -29,70 +30,109 @@ export interface EditConfigInterface {
   /**
    * 允许调整边
    */
-  adjustEdge?: boolean
+  adjustEdge: boolean
+  /**
+   * 允许调整边的中间点
+   */
+  adjustEdgeMiddle: boolean
   /**
    * 允许调整边起点和终点
    */
-  adjustEdgeStartAndEnd?: boolean
+  adjustEdgeStartAndEnd: boolean
+  /**
+   * 允许调整边起点
+   */
+  adjustEdgeStart: boolean
+  /**
+   * 允许调整边的终点
+   */
+  adjustEdgeEnd: boolean
   /**
    * 允许拖动节点
    */
-  adjustNodePosition?: boolean
+  adjustNodePosition: boolean
   /**
    * 隐藏节点所有锚点
    */
-  hideAnchors?: boolean
+  hideAnchors: boolean
   /**
    * 是否允许节点旋转（旋转点的显隐）
    */
-  allowRotate?: boolean
+  allowRotate: boolean
   /**
    * 是否允许节点缩放（缩放调整点的显隐）
    */
-  allowResize?: boolean
+  allowResize: boolean
+  /**
+   * 是否自动展开
+   */
+  autoExpand: boolean
   /**
    * 显示节点悬浮时的外框
    */
-  hoverOutline?: boolean
+  hoverOutline: boolean
   /**
    * 节点被选中时是否显示outline
    */
-  nodeSelectedOutline?: boolean
+  nodeSelectedOutline: boolean
   /**
    * 边被选中时是否显示outline
    */
-  edgeSelectedOutline?: boolean
+  edgeSelectedOutline: boolean
+  /**
+   * 允许文本可编辑
+   */
+  textEdit: boolean
   /**
    * 允许节点文本可以编辑
    */
-  nodeTextEdit?: boolean
+  nodeTextEdit: boolean
   /**
    * 允许边文本可以编辑
    */
-  edgeTextEdit?: boolean
+  edgeTextEdit: boolean
   /**
-   * 允许文本编辑
+   * 允许文本可拖拽（文本包括Text、Label）
    */
-  textEdit?: boolean
+  textDraggable: boolean
   /**
    * 允许节点文本可以拖拽
    */
-  nodeTextDraggable?: boolean
+  nodeTextDraggable: boolean
   /**
    * 允许边文本可以拖拽
    */
-  edgeTextDraggable?: boolean
+  edgeTextDraggable: boolean
   /**
    * 多选按键, 支持meta(cmd)、shift、alt
    * 不支持ctrl，ctrl会触发contextmenu
    */
-  multipleSelectKey?: string
+  multipleSelectKey: string
+
+  /**
+   * 2.0.0 新增配置，启用 Label 后生效
+   * 是否支持多文本，文本文字是否垂直展示
+   * 当前文本类型
+   */
+  nodeTextMultiple: boolean
+  edgeTextMultiple: boolean
+  nodeTextVertical: boolean
+  edgeTextVertical: boolean
+  textMode: TextMode
+  // 节点文本类型
+  nodeTextMode: TextMode
+  // 边文本类型
+  edgeTextMode: TextMode
 }
 
-const SilentConfig = {
+export type IConfigKeys = keyof IEditConfigType
+
+const silentModeConfig = {
+  // SilentMode 下允许用户操作画布
   stopZoomGraph: false,
   stopScrollGraph: false,
   stopMoveGraph: false,
+  // 节点 & 边相关配置
   adjustEdge: false,
   adjustEdgeStartAndEnd: false,
   adjustNodePosition: false,
@@ -100,103 +140,144 @@ const SilentConfig = {
   allowRotate: false,
   allowResize: false,
   nodeSelectedOutline: true,
+  // 文本相关配置
+  textEdit: false,
   nodeTextEdit: false,
   edgeTextEdit: false,
+  textDraggable: false,
   nodeTextDraggable: false,
   edgeTextDraggable: false,
 }
 
-const keys = [
-  'isSilentMode',
-  'stopZoomGraph',
-  'stopScrollGraph',
-  'stopMoveGraph',
-  'adjustEdge',
-  'adjustEdgeMiddle',
-  'adjustEdgeStartAndEnd',
-  'adjustNodePosition',
-  'hideAnchors',
-  'allowRotate',
-  'allowResize',
-  'hoverOutline',
-  'nodeSelectedOutline',
-  'edgeSelectedOutline',
-  'nodeTextEdit',
-  'edgeTextEdit',
-  'nodeTextDraggable',
-  'edgeTextDraggable',
-  'multipleSelectKey',
-  'autoExpand',
-]
+const allKeys = [
+  'isSilentMode', // 是否为静默模式
+  'stopZoomGraph', // 禁止缩放画布
+  'stopScrollGraph', // 禁止鼠标滚动移动画布
+  'stopMoveGraph', // 禁止拖动画布
+  'adjustEdge', // 允许调整边
+  'adjustEdgeMiddle', // 允许调整边中点
+  'adjustEdgeStartAndEnd', // 允许调整边起点和终点
+  'adjustEdgeStart', // 允许调整边起点
+  'adjustEdgeEnd', // 允许调整边终点
+  'adjustNodePosition', // 允许拖动节点
+  'hideAnchors', // 隐藏节点所有锚点
+  'allowRotate', // 是否允许节点旋转
+  'allowResize', // 是否允许节点缩放
+  'autoExpand', // 是否自动展开
+  'hoverOutline', // 显示节点悬浮时的外框
+  'nodeSelectedOutline', // 节点被选中时是否显示 outline
+  'edgeSelectedOutline', // 边被选中时是否显示 outline
+  'textEdit', // 是否允许文本可编辑（全局）
+  'nodeTextEdit', // 允许节点文本可以编辑
+  'edgeTextEdit', // 允许边文本可以编辑
+  'textDraggable', // 是否允许文本可拖拽（全局）
+  'nodeTextDraggable', // 允许节点文本可以拖拽
+  'edgeTextDraggable', // 允许边文本可以拖拽
+  'multipleSelectKey', // 多选按键
+
+  // 2.0.0 新增配置
+  'textMode', // 文本模式（全局）
+  'nodeTextMode', // 节点文本模式
+  'edgeTextMode', // 边文本模式
+  'nodeTextMultiple', // 是否支持多个节点文本
+  'edgeTextMultiple', // 是否支持多个边文本
+  'nodeTextVertical', // 节点文本是否纵向显示
+  'edgeTextVertical', // 边文本是否纵向显示
+] as const
+
 /**
  * 页面编辑配置
  */
 export class EditConfigModel {
+  stagedConfig?: Partial<IEditConfigType> // 暂存「设置为静默模式之前」的配置，在取消静默模式后恢复
+
+  /*********************************************************
+   * 画布相关配置
+   ********************************************************/
   @observable isSilentMode = false
   @observable stopZoomGraph = false
-  @observable stopScrollGraph = false
   @observable stopMoveGraph = false
-  @observable adjustEdge = true
-  @observable adjustEdgeMiddle = false
-  @observable adjustEdgeStartAndEnd = false
-  @observable adjustNodePosition = true
+  @observable stopScrollGraph = false
+  /*********************************************************
+   * 文本相关配置（全局）
+   ********************************************************/
+  @observable textMode = TextMode.TEXT // 全局的 textMode 设置
+  @observable textEdit = true
+  @observable textDraggable = false
+  // 节点
+  @observable nodeTextEdit = true
+  @observable nodeTextDraggable = true
+  @observable nodeTextMultiple = false // 是否支持多个节点文本
+  @observable nodeTextVertical = false // 节点文本朝向是否是纵向
+  @observable nodeTextMode = TextMode.TEXT // 节点文本模式
+  // 边
+  @observable edgeTextMode = TextMode.TEXT // 边文本模式
+  @observable edgeTextEdit = true
+  @observable edgeTextDraggable = false
+  @observable edgeTextMultiple = false // 是否支持多个边文本
+  @observable edgeTextVertical = false // 边文本朝向是否是纵向
+  /*********************************************************
+   * 节点相关配置
+   ********************************************************/
   @observable hideAnchors = false
   @observable allowRotate = false
   @observable allowResize = false
   @observable hoverOutline = true
   @observable nodeSelectedOutline = true
-  @observable edgeSelectedOutline = true
-  @observable nodeTextEdit = true
-  @observable edgeTextEdit = true
-  @observable nodeTextDraggable = false
-  @observable edgeTextDraggable = false
+  @observable adjustNodePosition = true
   @observable autoExpand = false
+  /*********************************************************
+   * 边相关配置
+   ********************************************************/
+  @observable adjustEdge = true
+  @observable adjustEdgeMiddle = false
+  @observable adjustEdgeStartAndEnd = false
+  @observable adjustEdgeStart = false
+  @observable adjustEdgeEnd = false
+  @observable edgeSelectedOutline = true
+  /*********************************************************
+   * 其他
+   ********************************************************/
   multipleSelectKey = ''
-  defaultConfig = {} // 设置为静默模式之前的配置，在取消静默模式后恢复
-  constructor(config: EditConfigInterface) {
-    assign(this, this.getConfigDetail(config))
+
+  constructor(config: Partial<IEditConfigType>) {
+    assign(this, this.computeConfig(config))
   }
+
   @action
-  updateEditConfig(config) {
-    const newConfig = this.getConfigDetail(config)
+  updateEditConfig(config: Partial<IEditConfigType>) {
+    const newConfig = this.computeConfig(config)
     assign(this, newConfig)
   }
-  getConfigDetail(config) {
-    const { isSilentMode, textEdit } = config
-    const conf = {}
-    // false表示从静默模式恢复
+
+  // TODO: 确认一下这个函数的逻辑，是否会有误合并的问题
+  computeConfig(config: Partial<IEditConfigType>) {
+    const {
+      isSilentMode,
+      textDraggable,
+      textMode,
+      textEdit,
+      adjustEdgeStartAndEnd,
+    } = config
+    const conf: Partial<IEditConfigType> = {}
+
+    // false 表示从静默模式恢复
     if (isSilentMode === false) {
-      assign(conf, this.defaultConfig)
+      assign(conf, this.stagedConfig)
     }
-    // 如果不传，默认undefined表示非静默模式
+
+    // 如果不传，默认 undefined 表示非静默模式
     if (isSilentMode === true && isSilentMode !== this.isSilentMode) {
       // https://github.com/didi/LogicFlow/issues/1180
-      // 如果重复调用isSilentMode=true多次，会导致this.defaultConfig状态保存错误：保存为修改之后的Config
-      // 因此需要阻止重复赋值为true，使用config.isSilentMode !== this.isSilentMode
-      const silentConfig = pick(SilentConfig, keys)
-      // 在修改之前，
-      this.defaultConfig = {
-        stopZoomGraph: this.stopZoomGraph,
-        stopScrollGraph: this.stopScrollGraph,
-        stopMoveGraph: this.stopMoveGraph,
-        adjustEdge: this.adjustEdge,
-        adjustEdgeMiddle: this.adjustEdgeMiddle,
-        adjustEdgeStartAndEnd: this.adjustEdgeStartAndEnd,
-        adjustNodePosition: this.adjustNodePosition,
-        hideAnchors: this.hideAnchors,
-        allowRotate: this.allowRotate,
-        allowResize: this.allowResize,
-        hoverOutline: this.hoverOutline,
-        nodeSelectedOutline: this.nodeSelectedOutline,
-        edgeSelectedOutline: this.edgeSelectedOutline,
-        nodeTextEdit: this.nodeTextEdit,
-        edgeTextEdit: this.edgeTextEdit,
-        nodeTextDraggable: this.nodeTextDraggable,
-        edgeTextDraggable: this.edgeTextDraggable,
-        autoExpand: this.autoExpand,
-      }
+      // 如果重复调用 isSilentMode=true 多次，会导致 this.stagedConfig 状态保存错误：保存为修改之后的 Config
+      // 因此需要阻止重复赋值为 true，使用 config.isSilentMode !== this.isSilentMode
+      const silentConfig = pick(silentModeConfig, allKeys)
+      // 暂存修改之前的所有配置项
+      this.stagedConfig = pick(this, allKeys)
+
       assign(conf, silentConfig)
     }
+
     // 如果不传，默认undefined表示允许文本编辑
     if (textEdit === false) {
       assign(conf, {
@@ -204,11 +285,42 @@ export class EditConfigModel {
         edgeTextEdit: false,
       })
     }
-    const userConfig = pick(config, keys)
+
+    if (textMode) {
+      assign(conf, {
+        nodeTextMode: textMode,
+        edgeTextMode: textMode,
+      })
+    }
+
+    if (textDraggable === false) {
+      assign(conf, {
+        nodeTextDraggable: false,
+        edgeTextDraggable: false,
+      })
+    }
+
+    if (isBoolean(adjustEdgeStartAndEnd)) {
+      assign(conf, {
+        adjustEdgeStart: adjustEdgeStartAndEnd,
+        adjustEdgeEnd: adjustEdgeStartAndEnd,
+      })
+    }
+
+    const userConfig = pick(config, allKeys)
     return assign(conf, userConfig)
   }
-  getConfig() {
-    return pick(this, keys)
+
+  @action
+  updateTextMode(textMode: TextMode) {
+    // 如果更新全局 textMode，同时更新节点和边的 textMode
+    this.textMode = textMode
+    this.edgeTextMode = textMode
+    this.nodeTextMode = textMode
+  }
+
+  getConfig(): IEditConfigType {
+    return pick(this, allKeys)
   }
 }
 

package/src/model/GraphModel.ts

@@ -1,4 +1,4 @@
-import { find, forEach, map } from 'lodash-es'
+import { find, forEach, isObject, map } from 'lodash-es'
 import { action, computed, observable } from 'mobx'
 import {
   BaseEdgeModel,
@@ -16,6 +16,7 @@ import {
   EventType,
   ModelType,
   OverlapMode,
+  TextMode,
 } from '../constant'
 import LogicFlow from '../LogicFlow'
 import { Options as LFOptions } from '../options'
@@ -35,7 +36,6 @@ import {
   updateTheme,
 } from '../util'
 import EventEmitter from '../event/eventEmitter'
-
 import Position = LogicFlow.Position
 import PointTuple = LogicFlow.PointTuple
 import GraphData = LogicFlow.GraphData
@@ -623,6 +623,40 @@ export class GraphModel {
     return newId
   }
 
+  /**
+   * 获取元素的文本模式
+   * @param model
+   */
+  getTextModel(model: BaseNodeModel): TextMode | undefined {
+    const { textMode, nodeTextMode, edgeTextMode } = this.editConfigModel
+
+    // textMode 的优先级：
+    // 元素自身 model.textMode > editConfigModel.node(edge)TextMode > editConfigModel.textMode
+    if (model.BaseType === ElementType.NODE) {
+      return model.textMode || nodeTextMode || textMode || TextMode.TEXT
+    }
+
+    // 同上
+    if (model.BaseType === ElementType.EDGE) {
+      return model.textMode || edgeTextMode || textMode || TextMode.TEXT
+    }
+  }
+
+  /**
+   * 更新元素的文本模式
+   * @param mode
+   * @param model
+   */
+  @action
+  setTextMode(mode: TextMode, model?: BaseNodeModel | BaseEdgeModel) {
+    // 如果有传入 model，则直接更新 model 的 textMode
+    if (model) {
+      // model.updateTextMode(mode)
+    }
+    // 调用 editConfigModel 的方法更新 textMode
+    this.editConfigModel.updateEditConfig({ textMode: mode })
+  }
+
   /**
    * 内部保留方法，请勿直接使用
    */
@@ -755,7 +789,7 @@ export class GraphModel {
     if (nodeX && nodeY) {
       node.x = snapToGrid(nodeX, this.gridSize)
       node.y = snapToGrid(nodeY, this.gridSize)
-      if (typeof node.text === 'object') {
+      if (isObject(node.text)) {
         // 原来的处理是：node.text.x -= getGridOffset(nodeX, this.gridSize)
         // 由于snapToGrid()使用了Math.round()四舍五入的做法，因此无法判断需要执行
         // node.text.x = node.text.x + getGridOffset()
@@ -781,7 +815,7 @@ export class GraphModel {
       data.x += 30
       data.y += 30
       data.id = ''
-      if (data.text) {
+      if (isObject(data.text)) {
         data.text.x += 30
         data.text.y += 30
       }
@@ -924,7 +958,9 @@ export class GraphModel {
     // 如果是自定义边文本位置，则移动节点的时候重新计算其位置
     if (edgeModel.customTextPosition) {
       edgeModel.resetTextPosition()
-    } else if (
+      return
+    }
+    if (
       edgeModel.modelType === ModelType.POLYLINE_EDGE &&
       edgeModel.text?.value
     ) {
@@ -934,10 +970,9 @@ export class GraphModel {
         newPoint.x - textPosition.x,
         newPoint.y - textPosition.y,
       )
-    } else {
-      const { x: x1, y: y1 } = edgeModel.textPosition
-      edgeModel.moveText(x1 - x, y1 - y)
     }
+    const { x: x1, y: y1 } = edgeModel.textPosition
+    edgeModel.moveText(x1 - x, y1 - y)
   }
 
   /**

package/src/model/TransformModel.ts

@@ -40,7 +40,7 @@ export interface TransformInterface {
 
 const translateLimitsMap = {
   false: [-Infinity, -Infinity, Infinity, Infinity],
-  true: [0, 0, 0, 0],
+  true: [-Infinity, -Infinity, Infinity, Infinity],
   vertical: [-Infinity, 0, Infinity, 0],
   horizontal: [0, -Infinity, 0, Infinity],
 }