@logicflow/core 2.2.0-alpha.7 → 2.2.1

package/src/model/node/BaseNodeModel.ts

@@ -1,959 +0,0 @@
-import { action, computed, isObservable, observable, toJS } from 'mobx'
-import {
-  assign,
-  cloneDeep,
-  has,
-  isNil,
-  mapKeys,
-  isUndefined,
-  set,
-} from 'lodash-es'
-import { GraphModel, Model } from '..'
-import LogicFlow from '../../LogicFlow'
-import {
-  createUuid,
-  formatData,
-  getClosestAnchor,
-  getZIndex,
-  Matrix,
-  pickNodeConfig,
-  TranslateMatrix,
-} from '../../util'
-import {
-  ElementState,
-  ElementType,
-  EventType,
-  ModelType,
-  OverlapMode,
-  TextMode,
-} from '../../constant'
-import { ResizeControl } from '../../view/Control'
-import AnchorConfig = Model.AnchorConfig
-import GraphElements = LogicFlow.GraphElements
-import TextConfig = LogicFlow.TextConfig
-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<P extends PropertiesType>
-  extends Model.BaseModel<P> {
-  /**
-   * model基础类型，固定为node
-   */
-  readonly BaseType: ElementType.NODE
-  properties: P
-
-  isDragging: boolean
-  isShowAnchor: boolean
-  getNodeStyle: () => CommonTheme
-  getTextStyle: () => LogicFlow.TextNodeTheme
-  setIsShowAnchor: (isShowAnchor: boolean) => void
-}
-
-export class BaseNodeModel<P extends PropertiesType = PropertiesType>
-  implements IBaseNodeModel<P> {
-  readonly BaseType = ElementType.NODE
-  static BaseType: ElementType = ElementType.NODE
-
-  // 数据属性
-  public id = ''
-  @observable readonly type = ''
-  @observable x = 0
-  @observable y = 0
-  @observable textMode = TextMode.TEXT
-  @observable text: TextConfig = {
-    value: '',
-    x: 0,
-    y: 0,
-    draggable: false,
-    editable: true,
-  }
-  @observable properties: P
-  // 形状属性
-  @observable private _width = 100
-  public get width() {
-    return this._width
-  }
-
-  public set width(value: number) {
-    this._width = value
-  }
-
-  @observable private _height = 80
-  public get height() {
-    return this._height
-  }
-
-  public set height(value: number) {
-    this._height = value
-  }
-
-  minWidth: number = 30
-  minHeight: number = 30
-  maxWidth: number = 2000
-  maxHeight: number = 2000
-  PCTResizeInfo?: PCTResizeParams
-
-  // 根据与 (x, y) 的偏移量计算 anchors 的坐标
-  @observable anchorsOffset: BaseNodeModel.AnchorsOffsetItem[] = []
-
-  // 状态属性
-  readonly virtual: boolean = false
-  @observable isSelected = false
-  @observable isHovered = false
-  @observable isShowAnchor = false
-  @observable isDragging = false
-  @observable isHitable = true // TODO: 兼容拼写错误的情况 Remove
-  @observable isHittable = true // 细粒度控制节点是否对用户操作进行反应
-  @observable draggable = true
-  @observable visible = true
-
-  @observable rotatable = true // 节点可旋转
-  @observable resizable = true // 节点可缩放
-
-  // 其它属性
-  graphModel: GraphModel
-  @observable zIndex = 1
-  @observable state = ElementState.DEFAULT
-  @observable autoToFront = true // 节点选中时是否自动置顶，默认为true.
-  @observable style: CommonTheme = {} // 每个节点自己的样式，动态修改
-
-  // TODO: 利用向量计算实现 平移、旋转、缩放 等操作，利用 svg 的 transform 属性
-  @observable transform!: string // 节点的transform属性
-  @observable private _rotate = 0
-  get rotate() {
-    return this._rotate
-  }
-
-  set rotate(value: number) {
-    this._rotate = value
-    const { x = 0, y = 0 } = this
-    this.transform = new TranslateMatrix(-x, -y)
-      .rotate(value)
-      .translate(x, y)
-      .toString()
-  }
-
-  modelType = ModelType.NODE
-  additionStateData?: Model.AdditionStateDataType = {}
-
-  // 节点连入、练出、移动等规则
-  targetRules: Model.ConnectRule[] = []
-  sourceRules: Model.ConnectRule[] = []
-  moveRules: Model.NodeMoveRule[] = [] // 节点移动之前的hook
-  resizeRules: Model.NodeResizeRule[] = [] // 节点resize之前的hook
-  hasSetTargetRules = false // 用来限制rules的重复值
-  hasSetSourceRules = false; // 用来限制rules的重复值
-  [propName: string]: any // 支持用户自定义属性
-
-  constructor(data: NodeConfig<P>, graphModel: GraphModel) {
-    this.graphModel = graphModel
-    this.properties = data.properties ?? ({} as P)
-
-    this.initNodeData(data)
-    this.setAttributes()
-  }
-
-  /**
-   * 获取进入当前节点的边和节点
-   */
-  @computed get incoming(): GraphElements {
-    return {
-      nodes: this.graphModel.getNodeIncomingNode(this.id),
-      edges: this.graphModel.getNodeIncomingEdge(this.id),
-    }
-  }
-
-  /*
-   * 获取离开当前节点的边和节点
-   */
-  @computed get outgoing(): GraphElements {
-    return {
-      nodes: this.graphModel.getNodeOutgoingNode(this.id),
-      edges: this.graphModel.getNodeOutgoingEdge(this.id),
-    }
-  }
-
-  /**
-   * @overridable 可以重写
-   * 初始化节点数据
-   * initNodeData 和 setAttributes 的区别在于
-   * initNodeData 只在节点初始化的时候调用，用于初始化节点的所有属性。
-   * setAttributes 除了初始化调用外，还会在 properties 发生变化了调用。
-   */
-  public initNodeData(data: NodeConfig) {
-    if (!data.properties) {
-      data.properties = {}
-    }
-
-    if (!data.id) {
-      // 自定义节点id > 全局定义id > 内置
-      const { idGenerator } = this.graphModel
-      const globalId = idGenerator && idGenerator(data.type)
-      const nodeId = this.createId()
-      data.id = nodeId || globalId || createUuid()
-    }
-
-    this.formatText(data)
-    // 在下面又将 NodeConfig 中的数据赋值给了 this，应该会触发 setAttributes，确认是否符合预期
-    // TODO: 确认 constructor 中赋值 properties 是否必要，此处将 NodeConfig 中所有属性赋值给 this，包括 rotate、rotatable，resizable 等
-    assign(this, pickNodeConfig(data))
-
-    const { overlapMode, eventCenter } = this.graphModel
-    this.updateZIndexByOverlap(overlapMode, data.zIndex || getZIndex())
-    eventCenter.on('overlap:change', (data) => {
-      const { overlapMode: newMode } = data
-      this.updateZIndexByOverlap(newMode, this.zIndex || getZIndex())
-    })
-  }
-
-  /**
-   * 设置model属性，每次properties发生变化会触发
-   * 例如设置节点的宽度
-   * @example
-   *
-   * setAttributes () {
-   *   this.width = 300
-   *   this.height = 200
-   * }
-   *
-   * @overridable 支持重写
-   */
-  public setAttributes() { }
-
-  /**
-   * @overridable 支持重写，自定义此类型节点默认生成方式
-   * @returns string | null
-   */
-  public createId(): string | null {
-    return null
-  }
-
-  /**
-   * 设置当前元素的文本模式
-   * @param mode
-   */
-  @action setTextMode(mode: TextMode) {
-    this.textMode = mode
-  }
-
-  /**
-   * 始化文本属性
-   */
-  private formatText(data: NodeConfig): void {
-    const {
-      editConfigModel: { nodeTextDraggable, nodeTextEdit },
-    } = this.graphModel
-    const { x, y, text } = data
-    let textConfig: TextConfig = {
-      value: '',
-      x,
-      y,
-      draggable: nodeTextDraggable,
-      editable: nodeTextEdit,
-    }
-    if (text) {
-      if (typeof text === 'string') {
-        textConfig.value = text
-      } else {
-        textConfig = {
-          ...textConfig,
-          x: text.x ?? x,
-          y: text.y ?? y,
-          value: text.value ?? '',
-        }
-        if (!isUndefined(text.draggable)) {
-          textConfig.draggable = text.draggable
-        }
-        if (!isUndefined(text.editable)) {
-          textConfig.editable = text.editable
-        }
-      }
-    }
-
-    data.text = textConfig
-  }
-
-  /**
-   * @overridable 支持重写
-   * 计算节点 resize 时
-   */
-  resize(resizeInfo: ResizeInfo): ResizeNodeData {
-    const { width, height, deltaX, deltaY } = resizeInfo
-
-    const isAllowResize = this.isAllowResizeNode(deltaX, deltaY, width, height)
-
-    if (!isAllowResize) {
-      return this.getData()
-    }
-
-    // 移动节点以及文本内容
-    this.move(deltaX / 2, deltaY / 2)
-
-    this.width = width
-    this.height = height
-    this.setProperties({
-      width,
-      height,
-    })
-    return this.getData()
-  }
-
-  // TODO: 等比例缩放
-  proportionalResize() { }
-
-  /**
-   * 获取被保存时返回的数据
-   * @overridable 支持重写
-   */
-  getData(): NodeData {
-    const { x, y, value } = this.text
-    let { properties } = this
-    if (isObservable(properties)) {
-      properties = toJS(properties)
-    }
-    if (isNil(properties.width)) {
-      // resize()的时候会触发this.setProperties({width,height})
-      // 然后返回getData()，可以从properties拿到width
-      // 但是初始化如果没有在properties传入width，那么getData()就一直无法从properties拿到width
-      properties.width = this.width
-    }
-    if (isNil(properties.height)) {
-      // resize()的时候会触发this.setProperties({width,height})
-      // 然后返回getData()，可以从properties拿到height
-      // 但是初始化如果没有在properties传入height，那么getData()就一直无法从properties拿到width
-      properties.height = this.height
-    }
-    const data: NodeData = {
-      id: this.id,
-      type: this.type,
-      x: this.x,
-      y: this.y,
-      properties,
-    }
-    if (this.rotate) {
-      data.rotate = this.rotate
-    }
-    // 因为默认模式和节点在上模式下，对边的zIndex要求不高（因为渲染的时候会按照模式对所有元素进行排序）
-    // 所以只在递增模式和静态模式下设置zIndex
-    if (
-      [OverlapMode.INCREASE, OverlapMode.STATIC].includes(
-        this.graphModel.overlapMode,
-      )
-    ) {
-      data.zIndex = this.zIndex
-    }
-    if (value) {
-      data.text = {
-        x,
-        y,
-        value,
-      }
-    }
-    return data
-  }
-
-  /**
-   * 用于在历史记录时获取节点数据，
-   * 在某些情况下，如果希望某个属性变化不引起history的变化，
-   * 可以重写此方法。
-   */
-  getHistoryData(): NodeData {
-    return this.getData()
-  }
-
-  /**
-   * 获取当前节点的properties
-   */
-  getProperties() {
-    return toJS(this.properties)
-  }
-
-  /**
-   * @overridable 支持重写
-   * 获取当前节点最外层g标签Attributes, 例如 className
-   * @returns 自定义节点样式
-   */
-  getOuterGAttributes(): LogicFlow.DomAttributes {
-    return {
-      className: '',
-    }
-  }
-
-  /**
-   * @overridable 支持重写
-   * 获取当前节点样式
-   * @returns 自定义节点样式
-   */
-  getNodeStyle(): CommonTheme {
-    return {
-      ...this.graphModel.theme.baseNode,
-      ...this.style,
-    }
-  }
-
-  /**
-   * @overridable 支持重写
-   * 获取当前节点文本样式
-   */
-  getTextStyle() {
-    // 透传 nodeText
-    const { nodeText } = this.graphModel.theme
-    const { textStyle = {} } = this.properties
-    return {
-      ...cloneDeep(nodeText),
-      ...cloneDeep(textStyle),
-    }
-  }
-
-  /**
-   * @overridable 支持重写
-   * 获取当前节点旋转控制点的样式
-   */
-  getRotateControlStyle(): CommonTheme {
-    const { rotateControl } = this.graphModel.theme
-    return cloneDeep(rotateControl)
-  }
-
-  /**
-   * @overrideable 支持重写
-   * 获取当前节点缩放控制节点的样式
-   */
-  getResizeControlStyle() {
-    const { resizeControl } = this.graphModel.theme
-    return cloneDeep(resizeControl)
-  }
-
-  getResizeOutlineStyle() {
-    const { resizeOutline } = this.graphModel.theme
-    let attributes = { ...resizeOutline }
-    if (this.isHovered) {
-      const hoverStyle = resizeOutline.hover || {}
-      attributes = {
-        ...attributes,
-        ...hoverStyle,
-      }
-    }
-    return cloneDeep(attributes)
-  }
-
-  /**
-   * @overridable 支持重写
-   * 获取当前节点锚点样式
-   * @returns 自定义样式
-   */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  getAnchorStyle(_anchorInfo?: Point): LogicFlow.AnchorTheme {
-    const { anchor } = this.graphModel.theme
-    // 防止被重写覆盖主题。
-    return cloneDeep(anchor)
-  }
-
-  /**
-   * @overridable 支持重写
-   * 获取当前节点锚点拖出连线样式
-   * @returns 自定义锚点拖出样式
-   */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  getAnchorLineStyle(_anchorInfo?: Point): LogicFlow.AnchorLineTheme {
-    const { anchorLine } = this.graphModel.theme
-    return cloneDeep(anchorLine)
-  }
-
-  /**
-   * @overridable 支持重写
-   * 获取outline样式，重写可以定义此类型节点outline样式， 默认使用主题样式
-   * @returns 自定义outline样式
-   */
-  getOutlineStyle(): LogicFlow.OutlineTheme {
-    const { outline } = this.graphModel.theme
-    return cloneDeep(outline)
-  }
-
-  /**
-   * @overridable 在连接边时，是否允许这个节点为 source 节点，边到 target 节点
-   * @param target 目标节点
-   * @param sourceAnchor 源锚点
-   * @param targetAnchor 目标锚点
-   * @param edgeId 调整后边的 id，在开启 adjustEdgeStartAndEnd 后调整边连接的节点时会传入
-   * 详见：https://github.com/didi/LogicFlow/issues/926#issuecomment-1371823306
-   */
-  isAllowConnectedAsSource(
-    target: BaseNodeModel,
-    sourceAnchor?: Model.AnchorConfig,
-    targetAnchor?: Model.AnchorConfig,
-    edgeId?: string,
-  ): Model.ConnectRuleResult {
-    const rules = !this.hasSetSourceRules
-      ? this.getConnectedSourceRules()
-      : this.sourceRules
-    this.hasSetSourceRules = true
-    let isAllPass = true
-    let msg: string = ''
-    for (let i = 0; i < rules.length; i++) {
-      const rule = rules[i]
-      if (
-        !rule.validate.call(
-          this,
-          this,
-          target,
-          sourceAnchor,
-          targetAnchor,
-          edgeId,
-        )
-      ) {
-        isAllPass = false
-        msg = rule.message
-        break
-      }
-    }
-    return {
-      isAllPass,
-      msg,
-    }
-  }
-
-  /**
-   * 获取当前节点作为连接的起始节点规则。
-   */
-  getConnectedSourceRules(): Model.ConnectRule[] {
-    return this.sourceRules
-  }
-
-  /**
-   * @overridable 在连线时，判断是否允许这个节点为 target 节点
-   * @param source 源节点
-   * @param sourceAnchor 源锚点
-   * @param targetAnchor 目标锚点
-   * @param edgeId 调整后边的 id，在开启 adjustEdgeStartAndEnd 后调整边连接的节点时会传入
-   * 详见：https://github.com/didi/LogicFlow/issues/926#issuecomment-1371823306
-   */
-  isAllowConnectedAsTarget(
-    source: BaseNodeModel,
-    sourceAnchor?: Model.AnchorConfig,
-    targetAnchor?: Model.AnchorConfig,
-    edgeId?: string,
-  ): Model.ConnectRuleResult {
-    const rules = !this.hasSetTargetRules
-      ? this.getConnectedTargetRules()
-      : this.targetRules
-    this.hasSetTargetRules = true
-    let isAllPass = true
-    let msg: string = ''
-    for (let i = 0; i < rules.length; i++) {
-      const rule = rules[i]
-      if (
-        !rule.validate.call(
-          this,
-          source,
-          this,
-          sourceAnchor,
-          targetAnchor,
-          edgeId,
-        )
-      ) {
-        isAllPass = false
-        msg = rule.message
-        break
-      }
-    }
-    return {
-      isAllPass,
-      msg,
-    }
-  }
-
-  /**
-   * 内部方法
-   * 是否允许移动节点到新的位置
-   */
-  isAllowMoveNode(deltaX: number, deltaY: number): boolean | Model.IsAllowMove {
-    let isAllowMoveX = true
-    let isAllowMoveY = true
-    const rules = this.moveRules.concat(this.graphModel.nodeMoveRules)
-    for (const rule of rules) {
-      const r = rule(this, deltaX, deltaY)
-      if (!r) return false
-      if (typeof r === 'object') {
-        const r1 = r as Model.IsAllowMove
-        if (!r1.x && !r1.y) {
-          return false
-        }
-        isAllowMoveX = isAllowMoveX && r1.x
-        isAllowMoveY = isAllowMoveY && r1.y
-      }
-    }
-    return {
-      x: isAllowMoveX,
-      y: isAllowMoveY,
-    }
-  }
-
-  /**
-   * 获取作为连线终点时的所有规则。
-   */
-  getConnectedTargetRules(): Model.ConnectRule[] {
-    return this.targetRules
-  }
-
-  /**
-   * @returns Point[] 锚点坐标构成的数组
-   */
-  getAnchorsByOffset(): Model.AnchorConfig[] {
-    const { anchorsOffset, id, x, y } = this
-    if (anchorsOffset && anchorsOffset.length > 0) {
-      return anchorsOffset.map((el, idx) => {
-        if (el.length) {
-          el = el as LogicFlow.PointTuple // 历史数据格式
-          return {
-            id: `${id}_${idx}`,
-            x: x + el[0],
-            y: y + el[1],
-          }
-        }
-        el = el as Model.AnchorConfig
-        return {
-          ...el,
-          x: x + el.x,
-          y: y + el.y,
-          id: el.id || `${id}_${idx}`,
-        }
-      })
-    }
-    return this.getDefaultAnchor()
-  }
-
-  /**
-   * @overridable 子类重写此方法设置默认锚点
-   * 获取节点默认情况下的锚点
-   */
-  public getDefaultAnchor(): Model.AnchorConfig[] {
-    return []
-  }
-
-  /**
-   * @overridable 子类重写此方法获取手动连接边到节点时，需要连接的锚点
-   * 手动连接边到节点时，需要连接的锚点
-   */
-  public getTargetAnchor(position: Point): Model.AnchorInfo {
-    const { customTargetAnchor } = this.graphModel
-    return (
-      customTargetAnchor?.(this, position) ?? getClosestAnchor(position, this)
-    )
-  }
-
-  /**
-   * 获取节点BBox
-   */
-  public getBounds(): Model.BoxBoundsPoint {
-    return {
-      minX: this.x - this.width / 2,
-      minY: this.y - this.height / 2,
-      maxX: this.x + this.width / 2,
-      maxY: this.y + this.height / 2,
-    }
-  }
-
-  get anchors(): Model.AnchorConfig[] {
-    const anchors = this.getAnchorsByOffset()
-    const { x, y, rotate } = this
-    anchors.forEach((anchor) => {
-      const { x: anchorX, y: anchorY } = anchor
-      const [e, f] = new Matrix([anchorX, anchorY, 1])
-        .translate(-x, -y)
-        .rotate(rotate)
-        .translate(x, y)[0]
-      anchor.x = e
-      anchor.y = f
-    })
-    return anchors
-  }
-
-  getAnchorInfo(anchorId: string | undefined): AnchorConfig | undefined {
-    if (isNil(anchorId)) return undefined
-
-    for (let i = 0; i < this.anchors.length; i++) {
-      const anchor = this.anchors[i]
-      if (anchor.id === anchorId) {
-        return anchor
-      }
-    }
-  }
-
-  @action addNodeMoveRules(fn: Model.NodeMoveRule) {
-    if (!this.moveRules.includes(fn)) {
-      this.moveRules.push(fn)
-    }
-  }
-
-  isAllowMoveByXORY(deltaX: number, deltaY: number, isIgnoreRule: boolean) {
-    let isAllowMoveX: boolean
-    let isAllowMoveY: boolean
-    if (isIgnoreRule) {
-      isAllowMoveX = true
-      isAllowMoveY = true
-    } else {
-      const r = this.isAllowMoveNode(deltaX, deltaY)
-      if (typeof r === 'boolean') {
-        isAllowMoveX = r
-        isAllowMoveY = r
-      } else {
-        isAllowMoveX = r.x
-        isAllowMoveY = r.y
-      }
-    }
-    return {
-      isAllowMoveX,
-      isAllowMoveY,
-    }
-  }
-
-  @action move(deltaX: number, deltaY: number, isIgnoreRule = false): boolean {
-    const { isAllowMoveX, isAllowMoveY } = this.isAllowMoveByXORY(
-      deltaX,
-      deltaY,
-      isIgnoreRule,
-    )
-    if (isAllowMoveX) {
-      this.x = this.x + deltaX
-      this.text && this.moveText(deltaX, 0)
-    }
-    if (isAllowMoveY) {
-      this.y = this.y + deltaY
-      this.text && this.moveText(0, deltaY)
-    }
-    if (isAllowMoveX || isAllowMoveY) {
-      // 更新x和y的同时也要更新对应的transform旋转矩阵（依赖x、y)
-      this.rotate = this._rotate
-    }
-    return isAllowMoveX || isAllowMoveY
-  }
-
-  @action getMoveDistance(
-    deltaX: number,
-    deltaY: number,
-    isIgnoreRule = false,
-  ): [number, number] {
-    const { isAllowMoveX, isAllowMoveY } = this.isAllowMoveByXORY(
-      deltaX,
-      deltaY,
-      isIgnoreRule,
-    )
-    let moveX = 0
-    let moveY = 0
-
-    if (isAllowMoveX && deltaX) {
-      this.x = this.x + deltaX
-      this.text && this.moveText(deltaX, 0)
-      moveX = deltaX
-    }
-    if (isAllowMoveY && deltaY) {
-      this.y = this.y + deltaY
-      this.text && this.moveText(0, deltaY)
-      moveY = deltaY
-    }
-    this.transform = new TranslateMatrix(-this.x, -this.y)
-      .rotate(this.rotate)
-      .translate(this.x, this.y)
-      .toString()
-    return [moveX, moveY]
-  }
-
-  @action moveTo(x: number, y: number, isIgnoreRule = false): boolean {
-    const deltaX = x - this.x
-    const deltaY = y - this.y
-    if (!isIgnoreRule && !this.isAllowMoveNode(deltaX, deltaY)) return false
-
-    this.text && this.moveText(deltaX, deltaY)
-    this.x = x
-    this.y = y
-    return true
-  }
-
-  @action moveText(deltaX: number, deltaY: number): void {
-    const { x, y, value, draggable, editable } = this.text
-    this.text = {
-      value,
-      editable,
-      draggable,
-      x: x + deltaX,
-      y: y + deltaY,
-    }
-  }
-
-  @action updateText(value: string): void {
-    this.text = {
-      ...toJS(this.text),
-      value,
-    }
-  }
-
-  @action addNodeResizeRules(fn: Model.NodeResizeRule) {
-    if (!this.resizeRules.includes(fn)) {
-      this.resizeRules.push(fn)
-    }
-  }
-
-  /**
-   * 内部方法
-   * 是否允许resize节点到新的位置
-   */
-  isAllowResizeNode(
-    deltaX: number,
-    deltaY: number,
-    width: number,
-    height: number,
-  ): boolean {
-    const rules = this.resizeRules.concat(this.graphModel.nodeResizeRules)
-    for (const rule of rules) {
-      const r = rule(this, deltaX, deltaY, width, height)
-      if (!r) return false
-    }
-    return true
-  }
-
-  @action setSelected(flag = true): void {
-    this.isSelected = flag
-  }
-
-  @action setHovered(flag = true): void {
-    this.isHovered = flag
-    this.setIsShowAnchor(flag)
-  }
-
-  @action setIsShowAnchor(flag = true): void {
-    this.isShowAnchor = flag
-  }
-
-  @action setRotatable(flag = true): void {
-    this.rotatable = flag
-  }
-
-  @action setResizable(flag = true): void {
-    this.resizable = flag
-  }
-
-  @action setHitable(flag = true): void {
-    this.isHitable = flag
-  }
-
-  @action setHittable(flag = true): void {
-    this.isHittable = flag
-  }
-
-  @action setElementState(
-    state: number,
-    additionStateData?: Model.AdditionStateDataType,
-  ): void {
-    this.state = state
-    this.additionStateData = additionStateData
-  }
-
-  private updateProperties(nextProperties: P, updateKeys: string[]): void {
-    const preProperties = toJS(this.properties)
-    this.properties = nextProperties
-    this.setAttributes()
-
-    // 触发更新节点 node:properties-change 的事件
-    this.graphModel.eventCenter.emit(EventType.NODE_PROPERTIES_CHANGE, {
-      id: this.id,
-      keys: updateKeys,
-      preProperties,
-      properties: nextProperties,
-    })
-  }
-
-  @action setProperty(key: string, val: any): void {
-    const preProperties = toJS(this.properties)
-    const nextProperties = cloneDeep(preProperties)
-    // https://lodash.com/docs/4.17.15#set
-    // 使用 lodash 的 set 方法更新某个属性，可以支持 key 为 'a.b.c' 的情况
-    set(nextProperties, key, formatData(val))
-
-    this.updateProperties(nextProperties, [key])
-  }
-
-  @action setProperties(properties: Record<string, any>): void {
-    const preProperties = toJS(this.properties)
-    const nextProperties = {
-      ...preProperties,
-      ...formatData(properties),
-    }
-
-    const updateKeys: string[] = []
-    mapKeys(properties, (val, key) => {
-      // key 存在于上一个 properties 并且与传入的值不相等 或者 key 不存在于上一个 properties
-      if (
-        (has(preProperties, key) && preProperties[key] !== val) ||
-        !has(preProperties, key)
-      ) {
-        updateKeys.push(key)
-      }
-    })
-
-    this.updateProperties(nextProperties, updateKeys)
-  }
-
-  @action deleteProperty(key: string): void {
-    delete this.properties[key]
-    this.setAttributes()
-  }
-
-  @action setStyle(key: string, val: any): void {
-    this.style = {
-      ...this.style,
-      [key]: formatData(val),
-    }
-  }
-
-  @action setStyles(styles: Record<string, any>): void {
-    this.style = {
-      ...this.style,
-      ...formatData(styles),
-    }
-  }
-
-  @action updateStyles(styles: Record<string, any>): void {
-    this.style = {
-      ...formatData(styles),
-    }
-  }
-
-  @action setZIndex(zIndex = 1): void {
-    this.zIndex = zIndex
-  }
-
-  @action updateAttributes(attributes: any) {
-    assign(this, attributes)
-  }
-  // 堆叠模式变化时，更新zIndex
-  @action
-  updateZIndexByOverlap(overlapMode: OverlapMode, defaultZIndex) {
-    switch (overlapMode) {
-      case OverlapMode.DEFAULT:
-        this.zIndex = 1
-        break
-      case OverlapMode.EDGE_TOP:
-        this.zIndex = 0
-        break
-      case OverlapMode.INCREASE:
-        this.zIndex = defaultZIndex
-        break
-      default:
-        break
-    }
-  }
-}
-
-export namespace BaseNodeModel {
-  export type PointTuple = [number, number]
-  export type AnchorsOffsetItem = PointTuple | Point
-}
-
-export default BaseNodeModel