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

package/src/model/EditConfigModel.ts

@@ -1,19 +1,20 @@
-import { assign, pick } from 'lodash-es'
-import { observable, action } from '../util/mobx'
+import { assign, isBoolean, isUndefined, 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,115 +140,187 @@ 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 = false
+  @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) {
+    if (!isUndefined(textEdit)) {
+      assign(conf, {
+        nodeTextEdit: textEdit,
+        edgeTextEdit: textEdit,
+      })
+    }
+
+    if (!isUndefined(textDraggable)) {
+      assign(conf, {
+        nodeTextDraggable: textDraggable,
+        edgeTextDraggable: textDraggable,
+      })
+    }
+
+    if (textMode) {
       assign(conf, {
-        nodeTextEdit: false,
-        edgeTextEdit: false,
+        nodeTextMode: textMode,
+        edgeTextMode: textMode,
       })
     }
-    const userConfig = pick(config, keys)
+
+    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

@@ -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
@@ -420,8 +420,11 @@ export class GraphModel {
       this.nodes = []
     }
     if (graphData.edges) {
+      const currEdgeType = this.edgeType
       this.edges = map(graphData.edges, (edge) => {
-        const Model = this.getModel(edge.type ?? '') as BaseEdgeModelCtor
+        const Model = this.getModel(
+          edge.type ?? currEdgeType,
+        ) as BaseEdgeModelCtor
         if (!Model) {
           throw new Error(`找不到${edge.type}对应的边。`)
         }
@@ -620,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 })
+  }
+
   /**
    * 内部保留方法，请勿直接使用
    */
@@ -752,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 (typeof node.text === 'object' && node.text !== null) {
         // 原来的处理是：node.text.x -= getGridOffset(nodeX, this.gridSize)
         // 由于snapToGrid()使用了Math.round()四舍五入的做法，因此无法判断需要执行
         // node.text.x = node.text.x + getGridOffset()
@@ -778,7 +815,7 @@ export class GraphModel {
       data.x += 30
       data.y += 30
       data.id = ''
-      if (data.text) {
+      if (typeof data.text === 'object' && data.text !== null) {
         data.text.x += 30
         data.text.y += 30
       }
@@ -921,7 +958,9 @@ export class GraphModel {
     // 如果是自定义边文本位置，则移动节点的时候重新计算其位置
     if (edgeModel.customTextPosition) {
       edgeModel.resetTextPosition()
-    } else if (
+      return
+    }
+    if (
       edgeModel.modelType === ModelType.POLYLINE_EDGE &&
       edgeModel.text?.value
     ) {
@@ -931,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)
   }
 
   /**
@@ -1326,7 +1364,7 @@ export class GraphModel {
   }
 
   /**
-   * 获取节点连接到的所有目标节点
+   * 获取节点所有的下一级节点
    */
   @action getNodeOutgoingNode(nodeId?: string) {
     const nodes: BaseNodeModel[] = []
@@ -1484,6 +1522,23 @@ export class GraphModel {
     const edgeModel = this.getEdgeModelById(edgeId)
     edgeModel?.closeEdgeAnimation()
   }
+
+  /**
+   * 获取当前局部渲染模式
+   * @returns boolean
+   */
+  getPartial(): boolean {
+    return this.partial
+  }
+
+  /**
+   * 设置是否开启局部渲染模式
+   * @param partial boolean
+   * @returns
+   */
+  @action setPartial(partial: boolean): void {
+    this.partial = partial
+  }
 }
 
 export namespace GraphModel {

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],
 }