@logicflow/core 2.2.0-alpha.7 → 2.2.1

package/src/model/BaseModel.ts

@@ -1,250 +0,0 @@
-import GraphModel from './GraphModel'
-import { BaseNodeModel } from './node'
-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]
-  export type IsAllowMove = {
-    x: boolean
-    y: boolean
-  }
-
-  export type AnchorConfig = {
-    id?: string
-    x: number
-    y: number
-    [key: string]: unknown
-  }
-  export type AnchorInfo = {
-    index: number
-    anchor: AnchorConfig
-  }
-
-  export type ConnectRule = {
-    message: string
-    validate: (
-      source?: BaseNodeModel,
-      target?: BaseNodeModel,
-      sourceAnchor?: AnchorConfig,
-      targetAnchor?: AnchorConfig,
-      /**
-       * REMIND: 调整的边的 id
-       * 在开启 adjustEdgeStartAndEnd 后调整边连接的节点时会传入
-       * 详见：https://github.com/didi/LogicFlow/issues/926#issuecomment-1371823306
-       */
-      edgeID?: string,
-    ) => boolean | undefined
-  }
-  export type ConnectRuleResult = {
-    isAllPass: boolean
-    msg?: string
-  }
-
-  /**
-   * 限制节点移动规则
-   * model: 移动节点的 model
-   * deltaX: 移动的 X 轴距离
-   * deltaY: 移动的 Y 轴距离
-   */
-  export type NodeMoveRule = (
-    model: BaseNodeModel,
-    deltaX: number,
-    deltaY: number,
-  ) => boolean | IsAllowMove
-
-  /**
-   * 限制节点resize规则
-   * model: 移动节点的 model
-   * deltaX: 中心点移动的 X 轴距离
-   * deltaY: 中心点移动的 Y 轴距离
-   * width: 中心点新的width
-   * height: 中心点新的height
-   */
-  export type NodeResizeRule = (
-    model: BaseNodeModel,
-    deltaX: number,
-    deltaY: number,
-    width: number,
-    height: number,
-  ) => boolean
-
-  export type AdjustEdgeStartAndEndParams = {
-    startPoint: LogicFlow.Point
-    endPoint: LogicFlow.Point
-    sourceNode?: BaseNodeModel
-    targetNode?: BaseNodeModel
-  }
-
-  // 定义边界数据结构，左上坐标 + 右下坐标定位一个矩形
-  // TODO: 在使用该类型的 API 中，都要做声明，返回值格式已更新
-  export type BoxBoundsPoint = {
-    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 = {
-    x: number
-    y: number
-    x1: number
-    y1: number
-  }
-
-  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.
-     *
-     * 默认情况下，使用 uuidV4 生成。如需自定义，可通过传入 createId 方法覆盖。
-     */
-    id: string
-
-    /**
-     * model 对应的图形外观类型 (eg: 圆形、矩形、多边形等)
-     *
-     * 不可自定义，用于 LogicFlow 内部计算使用
-     */
-    readonly modelType: string
-
-    /**
-     * 请勿直接修改属性，如果想要将一个节点类型修改为另一个类型。（直接禁止修改不就可以了 public readonly）
-     * `lf.graphModel.changeEdgeType` or `lf.graphModel.changeNodeType`
-     *
-     * 流程图元素类型，自定义元素时对应的标识
-     * 在 logicflow/core 中对应着 rect/circle/polyline 这种
-     * 在实际项目中，我们会基于业务类型进行自定义 type.
-     * 例如 BPMN 场景中，我们会定义开始节点的类型为 bpmn:start-event
-     *
-     * 与 modelType 的区别是，type 更多的是业务上的类型，而 modelType 则是外观上的类型。
-     * 例如 bpmn.js 的开始节点和结束节点 type 分别为 'bpmn:start-event' 和 'bpmn:end-event'。
-     * 但是他们的 modelType 都是 circle-node，因为他们的外观都是基于圆形自定义而来。
-     */
-    readonly type: string
-    graphModel: GraphModel
-
-    /**
-     * 状态附加数据，例如显示菜单，菜单的位置信息
-     * @deprecated: 请勿使用，即将废弃
-     */
-    additionStateData?: AdditionStateDataType
-
-    /**
-     * Rule 相关配置，包括连入、连出、移动等
-     */
-    targetRules?: ConnectRule[]
-    sourceRules?: ConnectRule[]
-    moveRules?: NodeMoveRule[]
-    hasSetTargetRules?: boolean
-    hasSetSourceRules?: boolean
-
-    /**
-     * 元素上的文本
-     *
-     * LogicFlow 中存在两种文本：1. 脱离边和节点单独存在的问题；2. 必须和边、节点关联的文本
-     * 此属性控制的是第二种。节点和边在删除、调整的同时，其关联的文本也会对应删除、调整。
-     */
-    text: LogicFlow.TextConfig
-    properties: P
-
-    isSelected: boolean // 元素是否被选中
-    isHovered: boolean // 鼠标是否悬停在元素上
-    // TODO: 确认拼写 fix typo（兼容拼写错误的情况）
-    isHitable: boolean // TODO: 错误拼写，兼容拼写错误的情况 REMIND TO REMOVE
-    isHittable: boolean // 细粒度控制节点是否对用户操作进行反应
-    draggable: boolean // 是否可拖拽
-    visible: boolean // 元素是否显示
-    virtual: boolean // 元素是否可以通过 getGraphData 获取到
-
-    /**
-     * 元素堆叠的层级，默认情况下节点 zIndex 值为 1，边 zIndex 为 0
-     */
-    zIndex: number
-
-    /**
-     * 元素状态: 不同状态不应不同元素的显示效果（无法直接修改）
-     */
-    readonly state: ElementState
-
-    /**
-     * 创建节点 ID
-     *
-     * 默认情况下，LogicFlow 内部使用 uuidV4 生成 id。在自定义节点的时候，可以重写此方法，
-     * 基于自己的规则生成 id。
-     * 注意 📢：此方法必须是同步方法，如果想要异步修改 ID，建议删除此节点后在同一位置创建一个新的节点
-     * @overridable 可被重写
-     * @returns string
-     */
-    createId: () => string | null
-
-    // Actions
-    isAllowMoveNode?: (deltaX: number, deltaY: number) => boolean | IsAllowMove
-    moveText: (deltaX: number, deltaY: number) => void
-    moveTo?: (x: number, y: number, isIgnoreRule: boolean) => boolean
-    getMoveDistance?: (
-      deltaX: number,
-      deltaY: number,
-      isIgnoreRule: boolean,
-    ) => VectorType
-    move?: (x: number, y: number, isIgnoreRule: boolean) => boolean
-    updateText: (text: string) => void
-
-    setSelected: (isSelected: boolean) => void
-    setHovered: (isHovered: boolean) => void
-    setHitable: (isHittable: boolean) => void // TODO: 拼写错误 fix typo（兼容拼写错误的情况）
-    setHittable: (isHittable: boolean) => void
-
-    setZIndex: (zIndex?: number) => void
-    updateAttributes: (attributes: LogicFlow.AttributesType) => void
-    /**
-     * 设置 Node | Edge 等 model 的状态
-     * @param state 状态
-     * @param additionStateData 额外的参数
-     */
-    setElementState: (
-      state: ElementState,
-      additionStateData?: AdditionStateDataType,
-    ) => void
-
-    getData: () => Record<string, unknown>
-    getProperties: () => PropertyType
-    setProperty: (key: string, val: unknown) => void
-    setProperties: (properties: PropertyType) => void
-    deleteProperty: (key: string) => void
-
-    getNodeStyle?: () => LogicFlow.CommonTheme
-    getEdgeStyle?: () => LogicFlow.EdgeTheme
-    getTextStyle: () => LogicFlow.TextNodeTheme
-    getAnchorStyle?: () => LogicFlow.AnchorTheme
-    getAnchorLineStyle?: () => LogicFlow.AnchorLineTheme
-    getOutlineStyle: () => LogicFlow.OutlineTheme
-    setStyle: (key: string, val: LogicFlow.CommonThemePropTypes) => void
-    setStyles: (styles: LogicFlow.CommonTheme) => void
-    updateStyles: (styles: LogicFlow.CommonTheme) => void
-  }
-}

package/src/model/EditConfigModel.ts

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