@logicflow/core 1.2.27 → 2.0.0-beta.0

package/src/model/SnaplineModel.ts

@@ -0,0 +1,238 @@
+import { action, observable } from 'mobx'
+import { GraphModel, BaseNodeModel } from '.'
+import LogicFlow from '../LogicFlow'
+import { getNodeBBox } from '../util'
+import Position = LogicFlow.Position
+import NodeData = LogicFlow.NodeData
+
+export type ISnaplineInfo = {
+  isShowHorizontal: boolean
+  isShowVertical: boolean
+  position: Position
+}
+
+export class SnaplineModel {
+  graphModel: GraphModel
+  // 是否展示水平对齐线
+  @observable isShowHorizontal: boolean
+  // 是否展示垂直对齐线
+  @observable isShowVertical: boolean
+  // 对齐线的中心位置，目前仅展示中心对齐的情况，后面可以考虑多种对齐策略
+  @observable position: Position
+
+  constructor(graphModel: GraphModel) {
+    this.isShowHorizontal = false
+    this.isShowVertical = false
+    this.position = {
+      x: 0,
+      y: 0,
+    }
+    this.graphModel = graphModel
+  }
+
+  getStyle() {
+    return {
+      ...this.graphModel.theme.snapline,
+    }
+  }
+
+  // 计算节点中心线与其他节点的对齐信息
+  private getCenterSnapLine(
+    draggingNode: NodeData,
+    nodes: BaseNodeModel[],
+  ): ISnaplineInfo {
+    const { x, y } = draggingNode
+    let isShowVertical = false
+    let isShowHorizontal = false
+    for (let i = 0; i < nodes.length; i++) {
+      const item = nodes[i]
+      // 排除当前节点
+      if (item.id !== draggingNode.id) {
+        if (x === item.x) {
+          isShowVertical = true
+        }
+        if (y === item.y) {
+          isShowHorizontal = true
+        }
+        // 如果水平垂直都显示，则停止循环。减少不必要的遍历
+        if (isShowVertical && isShowHorizontal) {
+          break
+        }
+      }
+    }
+    return {
+      isShowVertical,
+      isShowHorizontal,
+      position: {
+        x,
+        y,
+      },
+    }
+  }
+
+  // 计算节点上下边框与其他节点的上下边框的对齐信息
+  private getHorizontalSnapline(
+    draggingNode: NodeData,
+    nodes: BaseNodeModel[],
+  ): ISnaplineInfo {
+    let isShowHorizontal = false
+    let horizontalY: number = 0
+    const { id } = draggingNode
+    let draggingData
+    if (id) {
+      const { fakeNode } = this.graphModel
+      if (fakeNode && fakeNode.id === id) {
+        draggingData = getNodeBBox(fakeNode)
+      } else {
+        const nodeModel = this.graphModel.getNodeModelById(id)
+        if (nodeModel) {
+          draggingData = getNodeBBox(nodeModel)
+        }
+      }
+    }
+    for (let i = 0; i < nodes.length; i++) {
+      const item = nodes[i]
+      // 排除当前节点
+      if (item.id !== draggingNode.id) {
+        const itemData = getNodeBBox(item)
+        // 如果节点的最大最小Y轴坐标与节点的最大最小Y轴坐标相等，展示水平线
+        if (
+          itemData.minY === draggingData?.minY ||
+          itemData.maxY === draggingData?.minY
+        ) {
+          // 找到则停止循环。减少不必要的遍历
+          isShowHorizontal = true
+          horizontalY = draggingData.minY
+          break
+        }
+        if (
+          itemData.minY === draggingData?.maxY ||
+          itemData.maxY === draggingData?.maxY
+        ) {
+          isShowHorizontal = true
+          horizontalY = draggingData.maxY
+          break
+        }
+      }
+    }
+    return {
+      isShowHorizontal,
+      isShowVertical: this.isShowVertical,
+      position: {
+        ...this.position,
+        y: horizontalY,
+      },
+    }
+  }
+
+  // 计算节点左右边框与其他节点的左右边框的对齐信息
+  private getVerticalSnapline(
+    draggingNode: NodeData,
+    nodes: BaseNodeModel[],
+  ): ISnaplineInfo {
+    let isShowVertical: boolean = false
+    let verticalX: number = 0
+    const { id } = draggingNode
+    let draggingData
+    if (id) {
+      const { fakeNode } = this.graphModel
+      if (fakeNode && fakeNode.id === id) {
+        draggingData = getNodeBBox(fakeNode)
+      } else {
+        const nodeModel = this.graphModel.getNodeModelById(id)
+        if (nodeModel) {
+          draggingData = getNodeBBox(nodeModel)
+        }
+      }
+    }
+    for (let i = 0; i < nodes.length; i++) {
+      const item = nodes[i]
+      // 排除当前节点
+      if (item.id !== draggingNode.id) {
+        const itemData = getNodeBBox(item)
+        // 如果节点的最大最小X轴坐标与节点的最大最小X轴坐标相等，展示垂直线
+        if (
+          itemData.minX === draggingData?.minX ||
+          itemData.maxX === draggingData?.minX
+        ) {
+          // 找到则停止循环。减少不必要的遍历
+          isShowVertical = true
+          verticalX = draggingData.minX
+          break
+        }
+        if (
+          itemData.minX === draggingData?.maxX ||
+          itemData.maxX === draggingData?.maxX
+        ) {
+          isShowVertical = true
+          verticalX = draggingData.maxX
+          break
+        }
+      }
+    }
+    return {
+      isShowHorizontal: this.isShowHorizontal,
+      isShowVertical,
+      position: {
+        ...this.position,
+        x: verticalX,
+      },
+    }
+  }
+
+  // 计算节点与其他节点的对齐信息
+  getSnapLinePosition(
+    draggingNode: NodeData,
+    nodes: BaseNodeModel[],
+  ): ISnaplineInfo {
+    const snaplineInfo = this.getCenterSnapLine(draggingNode, nodes)
+    const { isShowHorizontal, isShowVertical } = snaplineInfo
+    // 中心对齐优先级最高
+    // 如果没有中心坐标的水平对齐，计算上下边框的对齐
+    if (!isShowHorizontal) {
+      const horizontalSnapline = this.getHorizontalSnapline(draggingNode, nodes)
+      if (horizontalSnapline.isShowHorizontal) {
+        snaplineInfo.isShowHorizontal = horizontalSnapline.isShowHorizontal
+        snaplineInfo.position.y = horizontalSnapline.position.y
+      }
+    }
+    // 如果没有中心坐标的垂直对齐，计算左右边框的对齐
+    if (!isShowVertical) {
+      const verticalSnapline = this.getVerticalSnapline(draggingNode, nodes)
+      if (verticalSnapline.isShowVertical) {
+        snaplineInfo.isShowVertical = verticalSnapline.isShowVertical
+        snaplineInfo.position.x = verticalSnapline.position.x
+      }
+    }
+    return snaplineInfo
+  }
+
+  // 设置对齐信息
+  private setSnaplineInfo(snaplineInfo: ISnaplineInfo): void {
+    const { isShowHorizontal, isShowVertical, position } = snaplineInfo
+    this.position = position
+    this.isShowHorizontal = isShowHorizontal
+    this.isShowVertical = isShowVertical
+  }
+
+  // 清空对齐信息，对齐线消失
+  @action
+  clearSnapline(): void {
+    this.position = {
+      x: 0,
+      y: 0,
+    }
+    this.isShowHorizontal = false
+    this.isShowVertical = false
+  }
+
+  // 设置节点对齐线
+  @action
+  setNodeSnapLine(nodeData: NodeData): void {
+    const { nodes } = this.graphModel
+    const info = this.getSnapLinePosition(nodeData, nodes)
+    this.setSnaplineInfo(info)
+  }
+}
+
+export default SnaplineModel

package/src/model/TransformModel.ts

@@ -0,0 +1,258 @@
+import { observable, action } from 'mobx'
+import LogicFlow from '../LogicFlow'
+import { EventType } from '../constant'
+import { Options as LFOptions } from '../options'
+import EventEmitter from '../event/eventEmitter'
+
+import PointTuple = LogicFlow.PointTuple
+
+export type ZoomParamType = boolean | number
+
+export type TransformData = Record<
+  'SCALE_X' | 'SCALE_Y' | 'SKEW_Y' | 'SKEW_X' | 'TRANSLATE_X' | 'TRANSLATE_Y',
+  number
+>
+
+export type TransformType = 'zoom' | 'resetZoom' | 'translate' | 'focusOn'
+
+export interface TransformInterface {
+  SCALE_X: number
+  SCALE_Y: number
+  SKEW_Y: number
+  SKEW_X: number
+  TRANSLATE_X: number
+  TRANSLATE_Y: number
+  ZOOM_SIZE: number
+  MINI_SCALE_SIZE: number // 缩小的最小值
+  MAX_SCALE_SIZE: number // 放大的最大值
+
+  translateLimitMinX: number
+  translateLimitMinY: number
+  translateLimitMaxX: number
+  translateLimitMaxY: number
+
+  zoom: (isZoomOut: ZoomParamType, point?: PointTuple) => string
+  HtmlPointToCanvasPoint: (point: PointTuple) => PointTuple
+  CanvasPointToHtmlPoint: (point: PointTuple) => PointTuple
+  moveCanvasPointByHtml: (point: PointTuple, x: number, y: number) => PointTuple
+  getTransformStyle: () => { transform: string }
+}
+
+const translateLimitsMap = {
+  false: [-Infinity, -Infinity, Infinity, Infinity],
+  true: [0, 0, 0, 0],
+  vertical: [-Infinity, 0, Infinity, 0],
+  horizontal: [0, -Infinity, 0, Infinity],
+}
+
+export class TransformModel implements TransformInterface {
+  MINI_SCALE_SIZE = 0.2
+  MAX_SCALE_SIZE = 16
+  @observable SCALE_X = 1
+  @observable SKEW_Y = 0
+  @observable SKEW_X = 0
+  @observable SCALE_Y = 1
+  @observable TRANSLATE_X = 0
+  @observable TRANSLATE_Y = 0
+  @observable ZOOM_SIZE = 0.04
+  eventCenter: EventEmitter
+
+  // 限制画布可移动区域
+  translateLimitMinX: number = -Infinity
+  translateLimitMinY: number = -Infinity
+  translateLimitMaxX: number = Infinity
+  translateLimitMaxY: number = Infinity
+
+  constructor(eventCenter: EventEmitter, options: LFOptions.Common) {
+    this.eventCenter = eventCenter
+    const { stopMoveGraph = false } = options
+    this.updateTranslateLimits(stopMoveGraph)
+  }
+
+  setZoomMiniSize(size: number): void {
+    this.MINI_SCALE_SIZE = size
+  }
+
+  setZoomMaxSize(size: number): void {
+    this.MAX_SCALE_SIZE = size
+  }
+
+  /**
+   * 将最外层graph上的点基于缩放转换为canvasOverlay层上的点。
+   * @param point HTML点
+   */
+  HtmlPointToCanvasPoint(point: PointTuple): PointTuple {
+    const [x, y] = point
+    return [
+      (x - this.TRANSLATE_X) / this.SCALE_X,
+      (y - this.TRANSLATE_Y) / this.SCALE_Y,
+    ]
+  }
+
+  /**
+   * 将最外层canvasOverlay层上的点基于缩放转换为graph上的点。
+   * @param point HTML点
+   */
+  CanvasPointToHtmlPoint(point: PointTuple): PointTuple {
+    const [x, y] = point
+    return [
+      x * this.SCALE_X + this.TRANSLATE_X,
+      y * this.SCALE_Y + this.TRANSLATE_Y,
+    ]
+  }
+
+  /**
+   * 将一个在canvas上的点，向x轴方向移动directionX距离，向y轴方向移动directionY距离。
+   * 因为canvas可能被缩小或者放大了，所以其在canvas层移动的距离需要计算上缩放的量。
+   * @param point 点
+   * @param directionX x轴距离
+   * @param directionY y轴距离
+   */
+  moveCanvasPointByHtml(
+    point: PointTuple,
+    directionX: number,
+    directionY: number,
+  ): PointTuple {
+    const [x, y] = point
+    return [x + directionX / this.SCALE_X, y + directionY / this.SCALE_Y]
+  }
+
+  /**
+   * 根据缩放情况，获取缩放后的delta距离
+   * @param deltaX x轴距离变化
+   * @param deltaY y轴距离变化
+   */
+  fixDeltaXY(deltaX: number, deltaY: number): PointTuple {
+    return [deltaX / this.SCALE_X, deltaY / this.SCALE_Y]
+  }
+
+  /**
+   * 基于当前的缩放，获取画布渲染样式transform值
+   */
+  getTransformStyle() {
+    const matrixString = [
+      this.SCALE_X,
+      this.SKEW_Y,
+      this.SKEW_X,
+      this.SCALE_Y,
+      this.TRANSLATE_X,
+      this.TRANSLATE_Y,
+    ].join(',')
+    return {
+      transform: `matrix(${matrixString})`,
+    }
+  }
+
+  /**
+   * 放大缩小图形
+   * @param zoomSize 放大缩小的值，支持传入0-n之间的数字。小于1表示缩小，大于1表示放大。也支持传入true和false按照内置的刻度放大缩小
+   * @param point 缩放的原点
+   * @returns {string} -放大缩小的比例
+   */
+  @action
+  zoom(zoomSize: ZoomParamType = false, point?: PointTuple): string {
+    let newScaleX = this.SCALE_X
+    let newScaleY = this.SCALE_Y
+    if (typeof zoomSize === 'number') {
+      newScaleX = zoomSize
+      newScaleY = zoomSize
+    } else {
+      if (zoomSize) {
+        newScaleX += this.ZOOM_SIZE
+        newScaleY += this.ZOOM_SIZE
+      } else {
+        newScaleX -= this.ZOOM_SIZE
+        newScaleY -= this.ZOOM_SIZE
+      }
+    }
+
+    if (newScaleX < this.MINI_SCALE_SIZE || newScaleX > this.MAX_SCALE_SIZE) {
+      return `${this.SCALE_X * 100}%`
+    }
+    if (point) {
+      this.TRANSLATE_X -= (newScaleX - this.SCALE_X) * point[0]
+      this.TRANSLATE_Y -= (newScaleY - this.SCALE_Y) * point[1]
+    }
+    this.SCALE_X = newScaleX
+    this.SCALE_Y = newScaleY
+    this.emitGraphTransform('zoom')
+    return `${this.SCALE_X * 100}%`
+  }
+
+  private emitGraphTransform(type: TransformType) {
+    this.eventCenter.emit(EventType.GRAPH_TRANSFORM, {
+      type,
+      transform: {
+        SCALE_X: this.SCALE_X,
+        SKEW_Y: this.SKEW_Y,
+        SKEW_X: this.SKEW_X,
+        SCALE_Y: this.SCALE_Y,
+        TRANSLATE_X: this.TRANSLATE_X,
+        TRANSLATE_Y: this.TRANSLATE_Y,
+      },
+    })
+  }
+
+  @action
+  resetZoom(): void {
+    this.SCALE_X = 1
+    this.SCALE_Y = 1
+    this.emitGraphTransform('resetZoom')
+  }
+
+  @action
+  translate(x: number, y: number) {
+    if (
+      this.TRANSLATE_X + x <= this.translateLimitMaxX &&
+      this.TRANSLATE_X + x >= this.translateLimitMinX
+    ) {
+      this.TRANSLATE_X += x
+    }
+    if (
+      this.TRANSLATE_Y + y <= this.translateLimitMaxY &&
+      this.TRANSLATE_Y + y >= this.translateLimitMinY
+    ) {
+      this.TRANSLATE_Y += y
+    }
+    this.emitGraphTransform('translate')
+  }
+
+  /**
+   * 将图形定位到画布中心
+   * @param targetX 图形当前x坐标
+   * @param targetY 图形当前y坐标
+   * @param width 画布宽
+   * @param height 画布高
+   */
+  @action
+  focusOn(targetX: number, targetY: number, width: number, height: number) {
+    const [x, y] = this.CanvasPointToHtmlPoint([targetX, targetY])
+    const [deltaX, deltaY] = [width / 2 - x, height / 2 - y]
+    this.TRANSLATE_X += deltaX
+    this.TRANSLATE_Y += deltaY
+    this.emitGraphTransform('focusOn')
+  }
+
+  /**
+   * 更新画布可以移动范围
+   */
+  updateTranslateLimits(
+    limit:
+      | boolean
+      | 'vertical'
+      | 'horizontal'
+      | [number, number, number, number],
+  ) {
+    ;[
+      this.translateLimitMinX,
+      this.translateLimitMinY,
+      this.translateLimitMaxX,
+      this.translateLimitMaxY,
+    ] =
+      Array.isArray(limit) && limit.length === 4
+        ? limit
+        : translateLimitsMap[limit.toString()]
+  }
+}
+
+export default TransformModel