@logicflow/core 2.2.0 → 2.2.1

package/src/model/NestedTransformModel.ts

@@ -1,121 +0,0 @@
-import LogicFlow from '../LogicFlow'
-import { TransformModel } from './TransformModel'
-import { Options as LFOptions } from '../options'
-import EventEmitter from '../event/eventEmitter'
-type PointTuple = LogicFlow.PointTuple
-
-export class NestedTransformModel extends TransformModel {
-  parentTransform?: TransformModel
-
-  constructor(eventCenter: EventEmitter, options: LFOptions.Common) {
-    super(eventCenter, options)
-    this.parentTransform = options.parentTransform
-  }
-
-  /**
-   * 设置父级变换
-   * @param parentTransform 父级变换模型
-   */
-  setParentTransform(parentTransform: TransformModel) {
-    this.parentTransform = parentTransform
-  }
-
-  /**
-   * 获取累积的缩放值
-   * 计算包括所有父级的累积缩放
-   */
-  private getCumulativeScale(): { scaleX: number; scaleY: number } {
-    let scaleX = this.SCALE_X
-    let scaleY = this.SCALE_Y
-
-    if (this.parentTransform) {
-      if (this.parentTransform instanceof NestedTransformModel) {
-        const parentScale = this.parentTransform.getCumulativeScale()
-        scaleX *= parentScale.scaleX
-        scaleY *= parentScale.scaleY
-      } else {
-        scaleX *= this.parentTransform.SCALE_X
-        scaleY *= this.parentTransform.SCALE_Y
-      }
-    }
-
-    return { scaleX, scaleY }
-  }
-
-  /**
-   * 获取累积的平移值
-   * 计算包括所有父级的累积平移
-   */
-  private getCumulativeTranslate(): { translateX: number; translateY: number } {
-    let translateX = this.TRANSLATE_X
-    let translateY = this.TRANSLATE_Y
-
-    if (
-      this.parentTransform &&
-      this.parentTransform instanceof NestedTransformModel
-    ) {
-      const { scaleX, scaleY } = this.parentTransform.getCumulativeScale()
-      translateX = scaleX * translateX
-      translateY = scaleY * translateY
-    }
-
-    return { translateX, translateY }
-  }
-
-  /**
-   * 将最外层graph上的点基于缩放转换为canvasOverlay层上的点。
-   * 重写以支持嵌套变换
-   * @param point HTML点
-   */
-  HtmlPointToCanvasPoint(point: PointTuple): PointTuple {
-    const [x, y] = point
-    const { scaleX, scaleY } = this.getCumulativeScale()
-    const { translateX, translateY } = this.getCumulativeTranslate()
-
-    return [(x - translateX) / scaleX, (y - translateY) / scaleY]
-  }
-
-  /**
-   * 将最外层canvasOverlay层上的点基于缩放转换为graph上的点。
-   * 重写以支持嵌套变换
-   * @param point Canvas点
-   */
-  CanvasPointToHtmlPoint(point: PointTuple): PointTuple {
-    const [x, y] = point
-    const { scaleX, scaleY } = this.getCumulativeScale()
-    const { translateX, translateY } = this.getCumulativeTranslate()
-
-    return [x * scaleX + translateX, y * scaleY + translateY]
-  }
-
-  /**
-   * 将一个在canvas上的点，向x轴方向移动directionX距离，向y轴方向移动directionY距离。
-   * 重写以支持嵌套变换
-   * @param point 点
-   * @param directionX x轴距离
-   * @param directionY y轴距离
-   */
-  moveCanvasPointByHtml(
-    point: PointTuple,
-    directionX: number,
-    directionY: number,
-  ): PointTuple {
-    const [x, y] = point
-    const { scaleX, scaleY } = this.getCumulativeScale()
-
-    return [x + directionX / scaleX, y + directionY / scaleY]
-  }
-
-  /**
-   * 根据缩放情况，获取缩放后的delta距离
-   * 重写以支持嵌套变换
-   * @param deltaX x轴距离变化
-   * @param deltaY y轴距离变化
-   */
-  fixDeltaXY(deltaX: number, deltaY: number): PointTuple {
-    const { scaleX, scaleY } = this.getCumulativeScale()
-    return [deltaX / scaleX, deltaY / scaleY]
-  }
-}
-
-export default NestedTransformModel

package/src/model/SnaplineModel.ts

@@ -1,256 +0,0 @@
-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
-  // 对齐线显示的阈值距离
-  epsilon: number
-
-  constructor(graphModel: GraphModel, epsilon: number = 1) {
-    this.isShowHorizontal = false
-    this.isShowVertical = false
-    this.position = {
-      x: 0,
-      y: 0,
-    }
-    this.graphModel = graphModel
-    this.epsilon = epsilon
-  }
-
-  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 (equal(x, item.x, this.epsilon)) {
-          isShowVertical = true
-        }
-        if (equal(y, item.y, this.epsilon)) {
-          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 (
-          equal(itemData.minY, draggingData?.minY, this.epsilon) ||
-          equal(itemData.maxY, draggingData?.minY, this.epsilon)
-        ) {
-          // 找到则停止循环。减少不必要的遍历
-          isShowHorizontal = true
-          horizontalY = draggingData.minY
-          break
-        }
-        if (
-          equal(itemData.minY, draggingData?.maxY, this.epsilon) ||
-          equal(itemData.maxY, draggingData?.maxY, this.epsilon)
-        ) {
-          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 (equal(itemData.minX, draggingData?.minX, this.epsilon)) {
-          isShowVertical = true
-          verticalX = draggingData.minX
-          break
-        }
-        if (
-          equal(itemData.minX, draggingData?.minX, this.epsilon) ||
-          equal(itemData.maxX, draggingData?.minX, this.epsilon)
-        ) {
-          // 找到则停止循环。减少不必要的遍历
-          isShowVertical = true
-          verticalX = draggingData.minX
-          break
-        }
-        if (
-          equal(itemData.minX, draggingData?.maxX, this.epsilon) ||
-          equal(itemData.maxX, draggingData?.maxX, this.epsilon)
-        ) {
-          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)
-  }
-}
-
-function equal(num1: number, num2: number, epsilon: number) {
-  if (Math.abs(num1 - num2) <= epsilon) {
-    return true
-  } else {
-    return false
-  }
-}
-
-export default SnaplineModel

package/src/model/TransformModel.ts

@@ -1,258 +0,0 @@
-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: [-Infinity, -Infinity, Infinity, Infinity],
-  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