@logicflow/core 2.2.0-alpha.7 → 2.2.1

package/src/algorithm/edge.ts

@@ -1,67 +0,0 @@
-import LogicFlow from '../LogicFlow'
-
-import Point = LogicFlow.Point
-
-/**
- * 求两个线段交点入参：线段1端点: ab, 线段2端点： cd,
- * @param a
- * @param b
- * @param c
- * @param d
- * @return：有交点返回交点 Point，无交点返回false
- */
-export const getCrossPointOfLine = (a: Point, b: Point, c: Point, d: Point) => {
-  /** 1 解线性方程组, 求线段交点. * */
-  // 如果分母为0 则平行或共线, 不相交
-  const denominator = (b.y - a.y) * (d.x - c.x) - (a.x - b.x) * (c.y - d.y)
-  if (denominator === 0) {
-    return false
-  }
-  // 线段所在直线的交点坐标 (x , y)
-  const x =
-    ((b.x - a.x) * (d.x - c.x) * (c.y - a.y) +
-      (b.y - a.y) * (d.x - c.x) * a.x -
-      (d.y - c.y) * (b.x - a.x) * c.x) /
-    denominator
-  const y =
-    -(
-      (b.y - a.y) * (d.y - c.y) * (c.x - a.x) +
-      (b.x - a.x) * (d.y - c.y) * a.y -
-      (d.x - c.x) * (b.y - a.y) * c.y
-    ) / denominator
-
-  /** 2 判断交点是否在两条线段上 * */
-  if (
-    // 交点在线段1上
-    (x - a.x) * (x - b.x) <= 0 &&
-    (y - a.y) * (y - b.y) <= 0 &&
-    // 且交点也在线段2上
-    (x - c.x) * (x - d.x) <= 0 &&
-    (y - c.y) * (y - d.y) <= 0
-  ) {
-    // 返回交点p
-    return {
-      x,
-      y,
-    }
-  }
-  // 否则不相交
-  return false
-}
-
-/* 判断一个点是否在线段中
-入参点：point, 线段起终点，start,end,
-返回值： 在线段中true，否则false
-*/
-export const isInSegment = (point: Point, start: Point, end: Point) => {
-  const { x, y } = point
-  const { x: startX, y: startY } = start
-  const { x: endX, y: endY } = end
-  const k = (endY - startY) / (endX - startX)
-  const b = startY - k * startX
-  return (
-    ((x >= startX && x <= endX) || (x <= startX && x >= endX)) &&
-    ((y >= startY && y <= endY) || (y <= startY && y >= endY)) &&
-    Math.abs(y - k * x - b) < Number.EPSILON
-  )
-}

package/src/algorithm/index.ts

@@ -1,70 +0,0 @@
-// 各类算法的实现
-export * from './outline'
-export * from './edge'
-
-/*
- * 计算垂直边的与起始点有一定距离对称，边垂直于边的点
- * 调用方：计算箭头位置，计算扩大变得点击区域
- */
-export const getVerticalPointOfLine = (config) => {
-  /*
-   ** offset: 端点到垂直点的距离
-   ** verticalLength: 两边点到垂直点的距离
-   ** type: 标识求的是线段的开始端点/结束端点
-   */
-  const { start, end, offset, verticalLength, type } = config
-  const pointPosition = {
-    leftX: 0,
-    leftY: 0,
-    rightX: 0,
-    rightY: 0,
-  }
-  // // 边与水平线的夹角
-  const angleOfHorizontal = Math.atan((end.y - start.y) / (end.x - start.x))
-  // 边和两边点的夹角
-  const angleOfPoints = Math.atan(offset / verticalLength)
-  // 点到起点的距离
-  const len = Math.sqrt(verticalLength * verticalLength + offset * offset)
-  if (type === 'start') {
-    if (end.x >= start.x) {
-      pointPosition.leftX =
-        start.x + len * Math.sin(angleOfHorizontal + angleOfPoints)
-      pointPosition.leftY =
-        start.y - len * Math.cos(angleOfHorizontal + angleOfPoints)
-      pointPosition.rightX =
-        start.x - len * Math.sin(angleOfHorizontal - angleOfPoints)
-      pointPosition.rightY =
-        start.y + len * Math.cos(angleOfHorizontal - angleOfPoints)
-    } else {
-      pointPosition.leftX =
-        start.x - len * Math.sin(angleOfHorizontal + angleOfPoints)
-      pointPosition.leftY =
-        start.y + len * Math.cos(angleOfHorizontal + angleOfPoints)
-      pointPosition.rightX =
-        start.x + len * Math.sin(angleOfHorizontal - angleOfPoints)
-      pointPosition.rightY =
-        start.y - len * Math.cos(angleOfHorizontal - angleOfPoints)
-    }
-  } else if (type === 'end') {
-    if (end.x >= start.x) {
-      pointPosition.leftX =
-        end.x + len * Math.sin(angleOfHorizontal - angleOfPoints)
-      pointPosition.leftY =
-        end.y - len * Math.cos(angleOfHorizontal - angleOfPoints)
-      pointPosition.rightX =
-        end.x - len * Math.sin(angleOfHorizontal + angleOfPoints)
-      pointPosition.rightY =
-        end.y + len * Math.cos(angleOfHorizontal + angleOfPoints)
-    } else {
-      pointPosition.leftX =
-        end.x - len * Math.sin(angleOfHorizontal - angleOfPoints)
-      pointPosition.leftY =
-        end.y + len * Math.cos(angleOfHorizontal - angleOfPoints)
-      pointPosition.rightX =
-        end.x + len * Math.sin(angleOfHorizontal + angleOfPoints)
-      pointPosition.rightY =
-        end.y - len * Math.cos(angleOfHorizontal + angleOfPoints)
-    }
-  }
-  return pointPosition
-}

package/src/algorithm/outline.ts

@@ -1,77 +0,0 @@
-import { ModelType } from '../constant'
-import {
-  Model,
-  BaseNodeModel,
-  BaseEdgeModel,
-  LineEdgeModel,
-  BezierEdgeModel,
-  PolylineEdgeModel,
-} from '../model'
-import { points2PointsList, getBBoxOfPoints, getBezierPoints } from '../util'
-
-import OutlineInfo = Model.OutlineInfo
-
-// 获取节点的out
-export const getNodeOutline = (node: BaseNodeModel): OutlineInfo => {
-  const { x, y, width, height } = node
-  return {
-    x: x - width / 2,
-    y: y - height / 2,
-    x1: x + width / 2,
-    y1: y + height / 2,
-  }
-}
-
-export const getLineOutline = (edge: LineEdgeModel): OutlineInfo => {
-  const { startPoint, endPoint } = edge
-  const x = (startPoint.x + endPoint.x) / 2
-  const y = (startPoint.y + endPoint.y) / 2
-  const width = Math.abs(startPoint.x - endPoint.x) + 10
-  const height = Math.abs(startPoint.y - endPoint.y) + 10
-  return {
-    x: x - width / 2,
-    y: y - height / 2,
-    x1: x + width / 2,
-    y1: y + height / 2,
-  }
-}
-
-export const getPolylineOutline = (edge: PolylineEdgeModel): OutlineInfo => {
-  const { points } = edge
-  const pointsList = points2PointsList(points)
-  const bbox = getBBoxOfPoints(pointsList, 8)
-  const { x, y, width, height } = bbox
-  return {
-    x: x - width / 2,
-    y: y - height / 2,
-    x1: x + width / 2,
-    y1: y + height / 2,
-  }
-}
-
-export const getBezierOutline = (edge: BezierEdgeModel): OutlineInfo => {
-  const { path } = edge
-  const pointsList = getBezierPoints(path)
-  const bbox = getBBoxOfPoints(pointsList, 8)
-  const { x, y, width, height } = bbox
-  return {
-    x: x - width / 2,
-    y: y - height / 2,
-    x1: x + width / 2,
-    y1: y + height / 2,
-  }
-}
-
-export const getEdgeOutline = (
-  edge: BaseEdgeModel,
-): OutlineInfo | undefined => {
-  if (edge.modelType === ModelType.LINE_EDGE) {
-    return getLineOutline(edge as LineEdgeModel)
-  }
-  if (edge.modelType === ModelType.POLYLINE_EDGE) {
-    return getPolylineOutline(edge as PolylineEdgeModel)
-  }
-  if (edge.modelType === ModelType.BEZIER_EDGE) {
-    return getBezierOutline(edge as BezierEdgeModel)
-  }
-}

package/src/algorithm/rotate.ts

@@ -1,55 +0,0 @@
-export interface SimplePoint {
-  x: number
-  y: number
-}
-
-/**
- * 根据两个点获取中心点坐标
- */
-export function getNewCenter(startPoint: SimplePoint, endPoint: SimplePoint) {
-  const { x: x1, y: y1 } = startPoint
-  const { x: x2, y: y2 } = endPoint
-  const newCenter = {
-    x: x1 + (x2 - x1) / 2,
-    y: y1 + (y2 - y1) / 2,
-  }
-  return newCenter
-}
-
-/**
- * 旋转矩阵公式，可以获取某一个坐标旋转angle后的坐标
- * @param p 当前坐标
- * @param center 旋转中心
- * @param angle 旋转角度（不是弧度）
- */
-export function calculatePointAfterRotateAngle(
-  p: SimplePoint,
-  center: SimplePoint,
-  angle: number,
-) {
-  const radian = angleToRadian(angle)
-  const dx = p.x - center.x
-  const dy = p.y - center.y
-  const x = dx * Math.cos(radian) - dy * Math.sin(radian) + center.x
-  const y = dx * Math.sin(radian) + dy * Math.cos(radian) + center.y
-  return {
-    x,
-    y,
-  }
-}
-
-/**
- * 角度转弧度
- * @param angle 角度
- */
-export function angleToRadian(angle: number) {
-  return (angle * Math.PI) / 180
-}
-
-/**
- * 弧度转角度
- * @param radian 弧度
- */
-export function radianToAngle(radian: number) {
-  return (radian / Math.PI) * 180
-}

package/src/common/drag.ts

@@ -1,219 +0,0 @@
-import { noop } from 'lodash-es'
-import { Model } from '../model'
-import { EventType } from '../constant'
-import EventEmitter from '../event/eventEmitter'
-
-// TODO：这种方式在同构项目中，会报错，该如何解决（是否要求用户控制在浏览器环境时才初始化）
-// const DOC: any = window?.document
-const LEFT_MOUSE_BUTTON_CODE = 0
-
-export type IDragParams = {
-  deltaX: number
-  deltaY: number
-  event: MouseEvent | null
-  [key: string]: unknown
-}
-
-export type ICreateDragParams = {
-  onDragStart?: (params: Partial<IDragParams>) => void
-  onDragging?: (param: IDragParams) => void
-  onDragEnd?: (param: Partial<IDragParams>) => void
-  step?: number
-  isStopPropagation?: boolean
-}
-
-export type IStepperDragProps = {
-  eventType?:
-    | 'NODE'
-    | 'BLANK'
-    | 'SELECTION'
-    | 'ADJUST_POINT'
-    | 'TEXT'
-    | 'LABEL'
-    | ''
-  eventCenter?: EventEmitter
-  model?: Model.BaseModel
-  data?: Record<string, unknown>
-  [key: string]: unknown
-} & Partial<ICreateDragParams>
-/**
- * 支持拖拽时按步长进行移动
- * REMIND：在绘制的过程中因为放大缩小，移动的真实 step 是变化的
- */
-export class StepperDrag {
-  // 初始化
-  onDragStart: (params: Partial<IDragParams>) => void
-  onDragging: (params: IDragParams) => void
-  onDragEnd: (params: Partial<IDragParams>) => void
-
-  step: number
-  isStopPropagation: boolean
-  eventType:
-    | 'NODE'
-    | 'BLANK'
-    | 'SELECTION'
-    | 'ADJUST_POINT'
-    | 'TEXT'
-    | 'LABEL'
-    | ''
-  eventCenter?: EventEmitter
-  model?: Model.BaseModel
-  data?: Record<string, unknown>
-
-  // 运行时
-  isDragging: boolean = false
-  isStartDrag: boolean = false
-
-  startX: number = 0
-  startY: number = 0
-  totalDeltaX: number = 0
-  totalDeltaY: number = 0
-
-  startTime?: number
-  constructor({
-    onDragStart = noop,
-    onDragging = noop,
-    onDragEnd = noop,
-    step = 1,
-    eventType = '',
-    isStopPropagation = true,
-    eventCenter,
-    model,
-    data,
-  }: IStepperDragProps) {
-    this.onDragStart = onDragStart
-    this.onDragging = onDragging
-    this.onDragEnd = onDragEnd
-    this.step = step
-    this.eventType = eventType
-    this.isStopPropagation = isStopPropagation
-    this.eventCenter = eventCenter
-    this.model = model
-    this.data = data
-  }
-
-  setStep(step: number) {
-    this.step = step
-  }
-
-  handleMouseMove = (e: MouseEvent) => {
-    if (this.isStopPropagation) e.stopPropagation()
-    if (!this.isStartDrag) return
-
-    this.totalDeltaX += e.clientX - this.startX
-    this.totalDeltaY += e.clientY - this.startY
-    this.startX = e.clientX
-    this.startY = e.clientY
-
-    if (
-      this.step <= 1 ||
-      Math.abs(this.totalDeltaX) > this.step ||
-      Math.abs(this.totalDeltaY) > this.step
-    ) {
-      const remainderX = this.totalDeltaX % this.step
-      const remainderY = this.totalDeltaY % this.step
-
-      const deltaX = this.totalDeltaX - remainderX
-      const deltaY = this.totalDeltaY - remainderY
-
-      this.totalDeltaX = remainderX
-      this.totalDeltaY = remainderY
-
-      const elementData = this.model?.getData()
-      // REMIND: 为了区分点击和拖动，在鼠标没有拖动时，不触发 dragstart。
-      if (!this.isDragging) {
-        if (this.eventType) {
-          this.eventCenter?.emit(EventType[`${this.eventType}_DRAGSTART`], {
-            e,
-            data: this.data || elementData,
-          })
-        }
-        this.onDragStart({ event: e })
-      }
-
-      this.isDragging = true
-      // REMIND: 为了让 dragstart 和 drag 不在同一个事件循环中，将 drag 事件放在下一个任务队列中。
-      // TODO: 测试用例是否可覆盖？？？
-      Promise.resolve().then(() => {
-        this.onDragging({ deltaX, deltaY, event: e })
-        if (this.eventType) {
-          this.eventCenter?.emit(EventType[`${this.eventType}_MOUSEMOVE`], {
-            e,
-            data: this.data || elementData,
-          })
-          this.eventCenter?.emit(EventType[`${this.eventType}_DRAG`], {
-            e,
-            data: this.data || elementData,
-          })
-        }
-      })
-    }
-  }
-
-  handleMouseUp = (e: MouseEvent) => {
-    const DOC: any = window?.document
-
-    this.isStartDrag = false
-    if (this.isStopPropagation) e.stopPropagation()
-
-    // fix: issue#568, 如果 onDragging 在下一个时间循环中触发，而 drop 在当前事件循环，会出现问题
-    Promise.resolve().then(() => {
-      DOC?.removeEventListener('mousemove', this.handleMouseMove, true)
-      DOC?.removeEventListener('mouseup', this.handleMouseUp, true)
-
-      const elementData = this.model?.getData()
-      if (this.eventType) {
-        this.eventCenter?.emit(EventType[`${this.eventType}_MOUSEUP`], {
-          e,
-          data: this.data || elementData,
-        })
-      }
-
-      if (!this.isDragging) return
-      this.isDragging = false
-      this.onDragEnd({ event: e })
-      if (this.eventType) {
-        this.eventCenter?.emit(EventType[`${this.eventType}_DROP`], {
-          e,
-          data: this.data || elementData,
-        })
-      }
-    })
-  }
-
-  handleMouseDown = (e: MouseEvent) => {
-    const DOC: any = window?.document
-
-    // issue: LogicFlow交流群-3群 8.10 号抛出的事件相关的问题，是否是这引起的？？？
-    if (e.button !== LEFT_MOUSE_BUTTON_CODE) return
-    if (this.isStopPropagation) e.stopPropagation()
-
-    this.isStartDrag = true
-    this.startX = e.clientX
-    this.startY = e.clientY
-
-    DOC?.addEventListener('mousemove', this.handleMouseMove, true)
-    DOC?.addEventListener('mouseup', this.handleMouseUp, true)
-
-    const elementData = this.model?.getData()
-    if (this.eventType) {
-      this.eventCenter?.emit(EventType[`${this.eventType}_MOUSEDOWN`], {
-        e,
-        data: this.data || elementData,
-      })
-    }
-    this.startTime = new Date().getTime()
-  }
-
-  cancelDrag = () => {
-    const DOC: any = window?.document
-
-    DOC?.removeEventListener('mousemove', this.handleMouseMove, true)
-    DOC?.removeEventListener('mouseup', this.handleMouseUp, true)
-
-    this.onDragEnd({ event: null })
-    this.isDragging = false
-  }
-}
-
-export default StepperDrag

package/src/common/history.ts

@@ -1,108 +0,0 @@
-import { cloneDeep, debounce, isEqual, last } from 'lodash-es'
-import { deepObserve, IDisposer } from 'mobx-utils'
-import { LogicFlow } from '../LogicFlow'
-// import { EventType } from '../constant'
-import { GraphModel } from '../model'
-import EventEmitter from '../event/eventEmitter'
-
-export type HistoryData = LogicFlow.GraphConfigData
-
-export class History {
-  undos: HistoryData[] = []
-  redos: HistoryData[] = []
-  stopWatch: IDisposer | null = null
-  curData: HistoryData | null = null
-  maxSize: number = 50
-  // 发生数据变化后，最多再等 500ms，把距离上次的数据变更存储起来。
-  // 所以 waitTime 值越小，History 对数据变化越敏感，存的 undos 数据就越细
-  waitTime: number = 100
-  eventCenter: EventEmitter
-
-  constructor(eventCenter: EventEmitter) {
-    this.eventCenter = eventCenter
-  }
-
-  add(data: HistoryData) {
-    if (isEqual(last(this.undos), data)) return
-    this.undos.push(data)
-
-    // 因为 undo 的时候会触发 add.
-    // 所以需要区分这个 add 是 undo 触发的还是用户正常操作触发的
-    // 如果是用户正常操作触发的，需要清空 redos
-    if (!isEqual(this.curData, data)) {
-      this.redos = []
-    }
-    // this.eventCenter.emit(EventType.HISTORY_CHANGE, {
-    //   data: {
-    //     undos: this.undos,
-    //     redos: this.redos,
-    //     undoAble: this.undos.length > 1,
-    //     redoAble: this.redos.length > 0,
-    //   },
-    // })
-
-    if (this.undos.length > this.maxSize) {
-      this.undos.shift()
-    }
-  }
-
-  undoAble() {
-    return this.undos.length > 1
-  }
-
-  /**
-   * undo 方法触发：
-   * graphModel 重新渲染 nodes 和 edges
-   * graphModel 发生变化，触发 watch
-   * watch 触发 add
-   */
-  undo() {
-    if (!this.undoAble()) return
-    const preData = this.undos.pop()
-    if (preData) {
-      this.redos.push(preData)
-    }
-    const curData = this.undos.pop()
-    if (curData) {
-      this.curData = cloneDeep(curData)
-    }
-    return curData
-  }
-
-  redoAble() {
-    return this.redos.length > 0
-  }
-
-  redo() {
-    if (!this.redoAble()) return
-    const curData = this.redos.pop()
-    if (curData) {
-      this.curData = cloneDeep(curData)
-    }
-    return curData
-  }
-
-  watch(model: GraphModel) {
-    this.stopWatch && this.stopWatch()
-
-    // 把当前 watch 的 model 转换一下数据存起来，无需清空 redos
-    const historyData = model.modelToHistoryData()
-    if (historyData) {
-      this.undos.push(historyData)
-    }
-
-    this.stopWatch = deepObserve(
-      model,
-      debounce(() => {
-        // 数据变更后，把最新的当前 model 数据存起来，并清空 redos
-        // 因为这个回调函数的触发，一般是用户交互而引起的，所以按照正常逻辑需要清空 redos
-        const data = model.modelToHistoryData()
-        if (data) {
-          this.add(data)
-        }
-      }, this.waitTime),
-    )
-  }
-}
-
-export default History

package/src/common/index.ts

@@ -1,6 +0,0 @@
-export * from './drag'
-export * from './history'
-export * from './keyboard'
-
-export * from './matrix'
-export * from './vector'