@logicflow/core 2.0.9 → 2.0.11

package/src/model/GraphModel.ts

@@ -1,4 +1,12 @@
-import { find, forEach, map, merge, isBoolean, debounce, isEqual } from 'lodash-es'
+import {
+  find,
+  forEach,
+  map,
+  merge,
+  isBoolean,
+  debounce,
+  isNil,
+} from 'lodash-es'
 import { action, computed, observable } from 'mobx'
 import {
   BaseEdgeModel,
@@ -41,7 +49,6 @@ import Position = LogicFlow.Position
 import PointTuple = LogicFlow.PointTuple
 import GraphData = LogicFlow.GraphData
 import NodeConfig = LogicFlow.NodeConfig
-import AnchorConfig = Model.AnchorConfig
 import BaseNodeModelCtor = LogicFlow.BaseNodeModelCtor
 import BaseEdgeModelCtor = LogicFlow.BaseEdgeModelCtor
 
@@ -99,6 +106,15 @@ export class GraphModel {
    */
   customTrajectory: LFOptions.Definition['customTrajectory']
 
+  /**
+   * 判断是否使用的是容器的宽度
+   */
+  isContainerWidth: boolean
+  /**
+   * 判断是否使用的是容器的高度
+   */
+  isContainerHeight: boolean
+
   // 在图上操作创建边时，默认使用的边类型.
   @observable edgeType: string
   // 当前图上所有节点的model
@@ -144,7 +160,9 @@ export class GraphModel {
     this.rootEl = container
     this.partial = !!partial
     this.background = background
-    if (typeof grid === 'object') {
+    if (typeof grid === 'object' && options.snapGrid) {
+      // 开启网格对齐时才根据网格尺寸设置步长
+      // TODO：需要让用户设置成 0 吗？后面可以讨论一下
       this.gridSize = grid.size || 1 // 默认 gridSize 设置为 1
     }
     this.theme = setupTheme(options.style)
@@ -153,8 +171,10 @@ export class GraphModel {
     this.animation = setupAnimation(animation)
     this.overlapMode = options.overlapMode || OverlapMode.DEFAULT
 
-    this.width = options.width || this.rootEl.getBoundingClientRect().width
-    this.height = options.height || this.rootEl.getBoundingClientRect().height
+    this.width = options.width ?? this.rootEl.getBoundingClientRect().width
+    this.isContainerWidth = isNil(options.width)
+    this.height = options.height ?? this.rootEl.getBoundingClientRect().height
+    this.isContainerHeight = isNil(options.height)
 
     const resizeObserver = new ResizeObserver(
       debounce(
@@ -438,18 +458,25 @@ export class GraphModel {
    * @param { object } graphData 图数据
    */
   graphDataToModel(graphData: Partial<LogicFlow.GraphConfigData>) {
-    if (!this.width || !this.height) {
-      this.resize()
-    }
+    // 宽度必然存在，取消重新计算
+    // if (!this.width || !this.height) {
+    //   this.resize()
+    // }
     if (!graphData) {
-      this.nodes = []
-      this.edges = []
+      this.clearData()
       return
     }
+    this.elementsModelMap.clear()
+    this.nodeModelMap.clear()
+    this.edgeModelMap.clear()
+
     if (graphData.nodes) {
-      this.nodes = map(graphData.nodes, (node: NodeConfig) =>
-        this.getModelAfterSnapToGrid(node),
-      )
+      this.nodes = map(graphData.nodes, (node: NodeConfig) => {
+        const nodeModel = this.getModelAfterSnapToGrid(node)
+        this.elementsModelMap.set(nodeModel.id, nodeModel)
+        this.nodeModelMap.set(nodeModel.id, nodeModel)
+        return nodeModel
+      })
     } else {
       this.nodes = []
     }
@@ -463,58 +490,6 @@ export class GraphModel {
           throw new Error(`找不到${edge.type}对应的边。`)
         }
         const edgeModel = new Model(edge, this)
-        // 根据edgeModel中存储的数据找到当前画布上的起终锚点坐标
-        // 判断当前起终锚点数据和Model中存储的起终点数据是否一致，不一致更新起终点信息
-        const {
-          sourceNodeId,
-          targetNodeId,
-          sourceAnchorId = '',
-          targetAnchorId = '',
-          startPoint,
-          endPoint,
-          text,
-          textPosition,
-        } = edgeModel
-        const updateAnchorPoint = (
-          node: BaseNodeModel | undefined,
-          anchorId: string,
-          point: Position,
-          updatePoint: (anchor: AnchorConfig) => void,
-        ) => {
-          const anchor = node?.anchors.find((anchor) => anchor.id === anchorId)
-          if (anchor && !isEqual(anchor, point)) {
-            updatePoint(anchor)
-          }
-        }
-
-        const sourceNode = this.getNodeModelById(sourceNodeId)
-        const targetNode = this.getNodeModelById(targetNodeId)
-
-        updateAnchorPoint(
-          sourceNode,
-          sourceAnchorId,
-          startPoint,
-          edgeModel.updateStartPoint.bind(edgeModel),
-        )
-        updateAnchorPoint(
-          targetNode,
-          targetAnchorId,
-          endPoint,
-          edgeModel.updateEndPoint.bind(edgeModel),
-        )
-
-        // 而文本需要先算一下文本与默认文本位置之间的相对位置差
-        // 再计算新路径的文本默认位置，加上相对位置差，得到调整后边的文本的位置
-        if (text) {
-          const { x, y } = text
-          const { x: defaultX, y: defaultY } = textPosition
-          if (x && y && defaultX && defaultY) {
-            const deltaX = x - defaultX
-            const deltaY = y - defaultY
-            edgeModel.resetTextPosition()
-            edgeModel.moveText(deltaX, deltaY)
-          }
-        }
         this.edgeModelMap.set(edgeModel.id, edgeModel)
         this.elementsModelMap.set(edgeModel.id, edgeModel)
 
@@ -873,6 +848,7 @@ export class GraphModel {
    */
   getModelAfterSnapToGrid(node: NodeConfig) {
     const Model = this.getModel(node.type) as BaseNodeModelCtor
+    const { snapGrid } = this.editConfigModel
     if (!Model) {
       throw new Error(
         `找不到${node.type}对应的节点，请确认是否已注册此类型节点。`,
@@ -881,8 +857,8 @@ export class GraphModel {
     const { x: nodeX, y: nodeY } = node
     // 根据 grid 修正节点的 x, y
     if (nodeX && nodeY) {
-      node.x = snapToGrid(nodeX, this.gridSize)
-      node.y = snapToGrid(nodeY, this.gridSize)
+      node.x = snapToGrid(nodeX, this.gridSize, snapGrid)
+      node.y = snapToGrid(nodeY, this.gridSize, snapGrid)
       if (typeof node.text === 'object' && node.text !== null) {
         // 原来的处理是：node.text.x -= getGridOffset(nodeX, this.gridSize)
         // 由于snapToGrid()使用了Math.round()四舍五入的做法，因此无法判断需要执行
@@ -1499,7 +1475,14 @@ export class GraphModel {
   }
 
   /**
-   * 更新网格配置
+   * 更新网格尺寸
+   */
+  updateGridSize(size: number) {
+    this.gridSize = size
+  }
+
+  /**
+   * 更新背景配置
    */
   updateBackgroundOptions(
     options: boolean | Partial<LFOptions.BackgroundConfig>,
@@ -1518,8 +1501,11 @@ export class GraphModel {
    * 重新设置画布的宽高
    */
   @action resize(width?: number, height?: number): void {
-    this.width = width || this.rootEl.getBoundingClientRect().width
-    this.height = height || this.rootEl.getBoundingClientRect().height
+    this.width = width ?? this.rootEl.getBoundingClientRect().width
+    this.isContainerWidth = isNil(width)
+    this.height = height ?? this.rootEl.getBoundingClientRect().height
+    this.isContainerHeight = isNil(height)
+
     if (!this.width || !this.height) {
       console.warn(
         '渲染画布的时候无法获取画布宽高，请确认在container已挂载到DOM。@see https://github.com/didi/LogicFlow/issues/675',
@@ -1533,6 +1519,11 @@ export class GraphModel {
   @action clearData(): void {
     this.nodes = []
     this.edges = []
+
+    // 清除对已清除节点的引用
+    this.edgeModelMap.clear()
+    this.nodeModelMap.clear()
+    this.elementsModelMap.clear()
   }
 
   /**
@@ -1680,6 +1671,7 @@ export class GraphModel {
       console.warn('error on destroy GraphModel', err)
     }
     this.waitCleanEffects.length = 0
+    this.eventCenter.destroy()
   }
 }
 

package/src/model/edge/BaseEdgeModel.ts

@@ -392,6 +392,8 @@ export class BaseEdgeModel<P extends PropertiesType = PropertiesType>
       properties,
       sourceNodeId: this.sourceNodeId,
       targetNodeId: this.targetNodeId,
+      sourceAnchorId: this.sourceAnchorId,
+      targetAnchorId: this.targetAnchorId,
       startPoint: assign({}, this.startPoint),
       endPoint: assign({}, this.endPoint),
     }
@@ -515,14 +517,17 @@ export class BaseEdgeModel<P extends PropertiesType = PropertiesType>
    * 内部方法，处理初始化文本格式
    */
   @action formatText(data: EdgeConfig) {
+    const {
+      editConfigModel: { edgeTextDraggable, edgeTextEdit },
+    } = this.graphModel
     const { x, y } = this.textPosition
     const { text } = data
     let textConfig: Required<TextConfig> = {
       value: '',
       x,
       y,
-      draggable: false,
-      editable: true,
+      draggable: edgeTextDraggable,
+      editable: edgeTextEdit,
     }
 
     if (text) {

package/src/model/edge/BezierEdgeModel.ts

@@ -1,4 +1,4 @@
-import { assign, cloneDeep } from 'lodash-es'
+import { get, assign, cloneDeep } from 'lodash-es'
 import { action, observable } from 'mobx'
 import BaseEdgeModel from './BaseEdgeModel'
 import { BaseNodeModel } from '../node'
@@ -21,7 +21,7 @@ export class BezierEdgeModel extends BaseEdgeModel {
     this.setAttributes()
   }
   initEdgeData(data: EdgeConfig): void {
-    this.offset = 100
+    this.offset = get(data, 'properties.offset', 100)
     super.initEdgeData(data)
   }
   getEdgeStyle() {

package/src/model/edge/PolylineEdgeModel.ts

@@ -1,4 +1,4 @@
-import { assign, cloneDeep } from 'lodash-es'
+import { get, assign, cloneDeep } from 'lodash-es'
 import { observable, action } from 'mobx'
 import { BaseEdgeModel } from '.'
 import { BaseNodeModel, RectNodeModel, CircleNodeModel, Model } from '..'
@@ -34,7 +34,10 @@ export class PolylineEdgeModel extends BaseEdgeModel {
   @observable dbClickPosition?: Point
 
   initEdgeData(data: LogicFlow.EdgeConfig): void {
-    this.offset = 30
+    this.offset = get(data, 'properties.offset', 30)
+    if (data.pointsList) {
+      this.pointsList = data.pointsList
+    }
     super.initEdgeData(data)
   }
 
@@ -315,6 +318,11 @@ export class PolylineEdgeModel extends BaseEdgeModel {
     return list
   }
 
+  updatePath(pointList: Point[]) {
+    this.pointsList = pointList
+    this.points = this.getPath(this.pointsList)
+  }
+
   getData() {
     const data = super.getData()
     const pointsList = this.pointsList.map(({ x, y }) => ({

package/src/model/node/BaseNodeModel.ts

@@ -246,13 +246,16 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
    * 始化文本属性
    */
   private formatText(data: NodeConfig): void {
+    const {
+      editConfigModel: { nodeTextDraggable, nodeTextEdit },
+    } = this.graphModel
     const { x, y, text } = data
     let textConfig: TextConfig = {
       value: '',
       x,
       y,
-      draggable: false,
-      editable: true,
+      draggable: nodeTextDraggable,
+      editable: nodeTextEdit,
     }
     if (text) {
       if (typeof text === 'string') {
@@ -737,6 +740,10 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
       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]
   }
 

package/src/tool/index.ts

@@ -70,7 +70,7 @@ export class Tool {
       this.toolMap.delete(name)
       return true
     }
-    throw new Error('禁用失败，不存在名为 ${tool} 的工具')
+    throw new Error(`禁用失败，不存在名为 ${tool} 的工具`)
   }
 
   @action
@@ -81,7 +81,7 @@ export class Tool {
       this.disabledToolMap.delete(name)
       return true
     }
-    throw new Error('不存在名为 ${tool} 的工具')
+    throw new Error(`不存在名为 ${tool} 的工具`)
   }
 
   getTools() {
@@ -91,6 +91,11 @@ export class Tool {
   getInstance() {
     return this.instance
   }
+
+  destroy() {
+    this.toolMap.clear()
+    this.disabledToolMap.clear()
+  }
 }
 
 export default Tool

package/src/util/geometry.ts

@@ -1,7 +1,9 @@
 import LogicFlow from '../LogicFlow'
 import PointTuple = LogicFlow.PointTuple
 
-export function snapToGrid(point: number, gridSize: number) {
+export function snapToGrid(point: number, gridSize: number, snapGrid: boolean) {
+  // 开启节网格对齐时才根据网格尺寸校准坐标
+  if (!snapGrid) return point
   // 保证 x, y 的值为 gridSize 的整数倍
   return gridSize * Math.round(point / gridSize) || point
 }

package/src/util/node.ts

@@ -13,6 +13,7 @@ import {
 } from '../model'
 import { SegmentDirection } from '../constant'
 import { isInSegment } from '../algorithm/edge'
+import { Matrix } from './matrix'
 
 import Point = LogicFlow.Point
 import Direction = LogicFlow.Direction
@@ -112,33 +113,33 @@ export const distance = (
 ): number => Math.hypot(x1 - x2, y1 - y2)
 
 /* 是否在某个节点内，手否进行连接，有offset控制粒度，与outline有关，可以优化 */
-export const isInNode = (position: Point, node: BaseNodeModel): boolean => {
+export const isInNode = (
+  position: Point,
+  node: BaseNodeModel,
+  offset = 0,
+): boolean => {
   let inNode = false
-  const offset = 0
   const bBox = getNodeBBox(node)
+  const [x, y] = new Matrix([position.x, position.y, 1])
+    .translate(-node.x, -node.y)
+    .rotate(-node.rotate)
+    .translate(node.x, node.y)[0]
+  const reverseRotatedPosition = {
+    x,
+    y,
+  }
   if (
-    position.x >= bBox.minX - offset &&
-    position.x <= bBox.maxX + offset &&
-    position.y >= bBox.minY - offset &&
-    position.y <= bBox.maxY + offset
+    reverseRotatedPosition.x >= bBox.minX - offset &&
+    reverseRotatedPosition.x <= bBox.maxX + offset &&
+    reverseRotatedPosition.y >= bBox.minY - offset &&
+    reverseRotatedPosition.y <= bBox.maxY + offset
   ) {
     inNode = true
   }
   return inNode
 }
 export const isInNodeBbox = (position: Point, node: BaseNodeModel): boolean => {
-  let inNode = false
-  const offset = 5
-  const bBox = getNodeBBox(node)
-  if (
-    position.x >= bBox.minX - offset &&
-    position.x <= bBox.maxX + offset &&
-    position.y >= bBox.minY - offset &&
-    position.y <= bBox.maxY + offset
-  ) {
-    inNode = true
-  }
-  return inNode
+  return isInNode(position, node, 5)
 }
 
 export type NodeBBox = {

package/src/view/Graph.tsx

@@ -39,9 +39,26 @@ type ContainerStyle = {
 @observer
 class Graph extends Component<IGraphProps> {
   private handleResize = () => {
-    this.props.graphModel.resize()
+    const { graphModel, options } = this.props
+    const { width, height, isContainerWidth, isContainerHeight } = graphModel
+    let resizeWidth: number | undefined = width
+    let resizeHeight: number | undefined = height
+    let needUpdate = false
+    if (isContainerWidth) {
+      resizeWidth = undefined
+      needUpdate = true
+    }
+    if (isContainerHeight) {
+      resizeHeight = undefined
+      needUpdate = true
+    }
+    if (needUpdate) {
+      graphModel.resize(resizeWidth, resizeHeight)
+    }
+    options.width = width
+    options.height = height
   }
-  private throttleResize = () => throttle(this.handleResize, 200)
+  private throttleResize = throttle(this.handleResize, 200)
 
   componentDidMount() {
     window.addEventListener('resize', this.throttleResize)

package/src/view/behavior/dnd.ts

@@ -26,10 +26,13 @@ export class Dnd {
     })
     // 处理缩放和偏移
     const { x: x1, y: y1 } = position.canvasOverlayPosition
+    const {
+      editConfigModel: { snapGrid },
+    } = this.lf.graphModel
     // x, y 对齐到网格的 size
     return {
-      x: snapToGrid(x1, gridSize),
-      y: snapToGrid(y1, gridSize),
+      x: snapToGrid(x1, gridSize, snapGrid),
+      y: snapToGrid(y1, gridSize, snapGrid),
     }
   }
 

package/src/view/edge/BaseEdge.tsx

@@ -358,6 +358,7 @@ export abstract class BaseEdge<P extends IProps> extends Component<
       clearTimeout(this.clickTimer)
     }
     const { model, graphModel } = this.props
+    const { editConfigModel } = graphModel
     const position = graphModel.getPointByClient({
       x: ev.clientX,
       y: ev.clientY,
@@ -367,7 +368,10 @@ export abstract class BaseEdge<P extends IProps> extends Component<
       ElementState.SHOW_MENU,
       position.domOverlayPosition,
     )
-    this.toFront()
+    // 静默模式下点击节点不变更节点层级
+    if (!editConfigModel.isSilentMode) {
+      this.toFront()
+    }
     if (!model.isSelected) {
       graphModel.selectEdgeById(model.id)
     }
@@ -456,7 +460,10 @@ export abstract class BaseEdge<P extends IProps> extends Component<
     }
     const { editConfigModel } = graphModel
     graphModel.selectEdgeById(model.id, isMultipleSelect(e, editConfigModel))
-    this.toFront()
+    // 静默模式下点击节点不变更节点层级
+    if (!editConfigModel.isSilentMode) {
+      this.toFront()
+    }
   }
 
   handleFocus = () => {

package/src/view/node/BaseNode.tsx

@@ -13,7 +13,6 @@ import {
   isMultipleSelect,
   cancelRaf,
   createRaf,
-  TranslateMatrix,
   IDragParams,
   // RotateMatrix,
 } from '../../util'
@@ -80,6 +79,13 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
     if (this.modelDisposer) {
       this.modelDisposer()
     }
+
+    // 以下是 mobx-preact 中 componentWillUnmount 的回调逻辑，但是不知道出于什么考虑，mobx-preact 没有混入这一段逻辑
+    // @ts-ignore
+    if (this.render.$mobx) {
+      // @ts-ignore
+      this.render.$mobx.dispose()
+    }
   }
 
   componentDidMount() {}
@@ -234,7 +240,7 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
   onDragging = ({ event }: IDragParams) => {
     const { model, graphModel } = this.props
     const {
-      editConfigModel: { stopMoveGraph, autoExpand },
+      editConfigModel: { stopMoveGraph, autoExpand, snapGrid },
       transformModel,
       selectNodes,
       width,
@@ -254,9 +260,9 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
     // 2. 考虑鼠标位置不再节点中心
     x = x + (this.moveOffset?.dx ?? 0)
     y = y + (this.moveOffset?.dy ?? 0)
-    // 将x, y移动到grid上
-    x = snapToGrid(x, gridSize)
-    y = snapToGrid(y, gridSize)
+    // 校准坐标
+    x = snapToGrid(x, gridSize, snapGrid)
+    y = snapToGrid(y, gridSize, snapGrid)
     if (!width || !height) {
       graphModel.moveNode2Coordinate(model.id, x, y)
       return
@@ -290,11 +296,6 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
       cancelRaf(this.t)
     }
 
-    model.transform = new TranslateMatrix(-x, -y)
-      .rotate(model.rotate)
-      .translate(x, y)
-      .toString()
-
     let moveNodes = selectNodes.map((node) => node.id)
     // 未被选中的节点也可以拖动
     if (moveNodes.indexOf(model.id) === -1) {
@@ -371,7 +372,10 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
     } else {
       graphModel.selectNodeById(model.id, isMultiple)
       eventOptions.isSelected = true
-      this.toFront()
+      // 静默模式下点击节点不变更节点层级
+      if (!editConfigModel.isSilentMode) {
+        this.toFront()
+      }
     }
 
     // 不是双击的，默认都是单击
@@ -392,6 +396,7 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
   handleContextMenu = (ev: MouseEvent) => {
     ev.preventDefault()
     const { model, graphModel } = this.props
+    const { editConfigModel } = graphModel
     // 节点数据，多为事件对象数据抛出
     const nodeData = model.getData()
 
@@ -412,7 +417,10 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
       e: ev,
       position,
     })
-    this.toFront()
+    // 静默模式下点击节点不变更节点层级
+    if (!editConfigModel.isSilentMode) {
+      this.toFront()
+    }
   }
 
   handleMouseDown = (ev: MouseEvent) => {

package/src/view/node/HtmlNode.tsx

@@ -70,6 +70,7 @@ export class HtmlNode<
   }
 
   componentWillUnmount() {
+    super.componentWillUnmount()
     this.rootEl.innerHTML = ''
   }
 

package/src/view/overlay/CanvasOverlay.tsx

@@ -65,8 +65,9 @@ export class CanvasOverlay extends Component<IProps, IState> {
       graphModel,
     } = this.props
     const { deltaX: eX, deltaY: eY } = ev
+    const { stopScrollGraph, stopZoomGraph } = editConfigModel
     // 如果没有禁止滚动移动画布, 并且当前触发的时候ctrl键、cmd键没有按住, 那么移动画布
-    if (!editConfigModel.stopScrollGraph && !ev.ctrlKey && !ev.metaKey) {
+    if (!stopScrollGraph && !ev.ctrlKey && !ev.metaKey) {
       ev.preventDefault()
       this.stepScrollX += eX
       this.stepScrollY += eY
@@ -85,7 +86,7 @@ export class CanvasOverlay extends Component<IProps, IState> {
       return
     }
     // 如果没有禁止缩放画布，那么进行缩放. 在禁止缩放画布后，按住 ctrl、cmd 键也不能缩放了。
-    if (!editConfigModel.stopZoomGraph) {
+    if (!stopZoomGraph) {
       ev.preventDefault()
       const position = graphModel.getPointByClient({
         x: ev.clientX,
@@ -133,11 +134,11 @@ export class CanvasOverlay extends Component<IProps, IState> {
         gridSize,
       },
     } = this.props
+    const { adjustEdge, adjustNodePosition, stopMoveGraph } = editConfigModel
     const target = ev.target as HTMLElement
-    const isFrozenElement =
-      !editConfigModel.adjustEdge && !editConfigModel.adjustNodePosition
+    const isFrozenElement = !adjustEdge && !adjustNodePosition
     if (target.getAttribute('name') === 'canvas-overlay' || isFrozenElement) {
-      if (editConfigModel.stopMoveGraph !== true) {
+      if (stopMoveGraph !== true) {
         this.stepDrag.setStep(gridSize * SCALE_X)
         this.stepDrag.handleMouseDown(ev)
       } else {

package/src/view/text/BaseText.tsx

@@ -80,6 +80,7 @@ export class BaseText<
     } = graphModel
 
     if (draggable ?? nodeTextDraggable) {
+      e.stopPropagation()
       this.stepperDrag.model = model
       this.stepperDrag.handleMouseDown(e)
     }