@logicflow/core 1.2.27 → 2.0.0-beta.1

package/src/util/node.ts

@@ -0,0 +1,519 @@
+import { pick } from 'lodash-es'
+import { getBytesLength } from './edge'
+import LogicFlow from '../LogicFlow'
+import {
+  GraphModel,
+  Model,
+  BaseNodeModel,
+  // CircleNodeModel,
+  RectNodeModel,
+  EllipseNodeModel,
+  PolygonNodeModel,
+} from '../model'
+import { SegmentDirection } from '../constant'
+import { isInSegment } from '../algorithm/edge'
+
+import Point = LogicFlow.Point
+import Direction = LogicFlow.Direction
+import NodeConfig = LogicFlow.NodeConfig
+import LineSegment = LogicFlow.LineSegment
+import AnchorInfo = Model.AnchorInfo
+
+/* 获取所有锚点 */
+export const getAnchors = (data: BaseNodeModel) => {
+  const { anchors } = data
+  return anchors
+}
+
+export type NodeContaint = {
+  node: BaseNodeModel
+  anchorIndex: number
+  anchor: Model.AnchorConfig
+}
+
+/* 手动边时获取目标节点的信息：目标节点，目标节点的锚点index以及坐标 */
+export const targetNodeInfo = (
+  position: Point,
+  graphModel: GraphModel,
+): NodeContaint => {
+  const { nodes } = graphModel
+  let nodeInfo: NodeContaint
+  for (let i = nodes.length - 1; i >= 0; i--) {
+    const targetNode = nodes[i]
+    const inNode = isInNodeBbox(position, targetNode)
+    if (inNode) {
+      const anchorInfo = targetNode.getTargetAnchor(position)
+      if (anchorInfo) {
+        // 不能连接到没有锚点的节点
+        const currentNodeInfo = {
+          node: targetNode,
+          anchorIndex: anchorInfo.index,
+          anchor: anchorInfo.anchor,
+        }
+        // fix: 489 多个节点重合时，连线连接上面的那一个。
+        if (!nodeInfo! || isNodeHigher(targetNode, nodeInfo.node, graphModel)) {
+          nodeInfo = currentNodeInfo
+        }
+      }
+    }
+  }
+  return nodeInfo!
+}
+/**
+ * 比较两个节点
+ */
+const isNodeHigher = (
+  node1: BaseNodeModel,
+  node2: BaseNodeModel,
+  graphModel: GraphModel,
+) => {
+  if (node1.zIndex > node2.zIndex) {
+    return true
+  }
+  return (
+    graphModel.nodesMap[node1.id].index > graphModel.nodesMap[node2.id].index
+  )
+}
+
+/* 手动边时获取目标节点上，距离目标位置最近的锚点 */
+export const getClosestAnchor = (
+  position: Point,
+  node: BaseNodeModel,
+): AnchorInfo => {
+  const anchors = getAnchors(node)
+  let closest: AnchorInfo
+  let minDistance = Number.MAX_SAFE_INTEGER
+  for (let i = 0; i < anchors.length; i++) {
+    const len = distance(position.x, position.y, anchors[i].x, anchors[i].y)
+    if (len < minDistance) {
+      minDistance = len
+      closest = {
+        index: i,
+        anchor: {
+          ...anchors[i],
+          x: anchors[i].x,
+          y: anchors[i].y,
+          id: anchors[i].id,
+        },
+      }
+    }
+  }
+  return closest!
+}
+
+/* 两点之间距离 */
+export const distance = (
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+): number => Math.hypot(x1 - x2, y1 - y2)
+
+/* 是否在某个节点内，手否进行连接，有offset控制粒度，与outline有关，可以优化 */
+export const isInNode = (position: Point, node: BaseNodeModel): boolean => {
+  let inNode = false
+  const offset = 0
+  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
+}
+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
+}
+
+export type NodeBBox = {
+  x: number
+  y: number
+  width: number
+  height: number
+  minX: number
+  minY: number
+  maxX: number
+  maxY: number
+  centerX: number
+  centerY: number
+}
+
+/* 获取节点bbox */
+export const getNodeBBox = (node: BaseNodeModel): NodeBBox => {
+  const { x, y, width, height } = node
+  return {
+    minX: x - width / 2,
+    minY: y - height / 2,
+    maxX: x + width / 2,
+    maxY: y + height / 2,
+    x,
+    y,
+    width,
+    height,
+    centerX: x,
+    centerY: y,
+  }
+}
+type RadiusCircle = {
+  x: number
+  y: number
+  r: number
+}
+export const getRectRadiusCircle = (
+  node: BaseNodeModel,
+): [RadiusCircle, RadiusCircle, RadiusCircle, RadiusCircle] => {
+  const { x, y, width, height, radius } = node as RectNodeModel
+  return [
+    {
+      x: x - width / 2 + radius,
+      y: y - height / 2 + radius,
+      r: radius,
+    },
+    {
+      x: x + width / 2 - radius,
+      y: y - height / 2 + radius,
+      r: radius,
+    },
+    {
+      x: x - width / 2 + radius,
+      y: y + height / 2 - radius,
+      r: radius,
+    },
+    {
+      x: x + width / 2 - radius,
+      y: y + height / 2 - radius,
+      r: radius,
+    },
+  ]
+}
+
+export const getClosestRadiusCenter = (
+  point: Point,
+  direction: Direction,
+  node: BaseNodeModel,
+): Point => {
+  const radiusCenter = getRectRadiusCircle(node)
+  let closestRadiusPoint: RadiusCircle
+  let minDistance = Number.MAX_SAFE_INTEGER
+  radiusCenter.forEach((item) => {
+    const radiusDistance = distance(point.x, point.y, item.x, item.y)
+    if (radiusDistance < minDistance) {
+      minDistance = radiusDistance
+      closestRadiusPoint = item
+    }
+  })
+  return getCrossPointWithCircle(point, direction, closestRadiusPoint!)
+}
+/* 求点在垂直或者水平方向上与圆形的交点 */
+export const getCrossPointWithCircle = (
+  point: Point,
+  direction: Direction,
+  node: RadiusCircle,
+): Point => {
+  let crossPoint: Point
+  const { x, y, r } = node
+  if (direction === SegmentDirection.HORIZONTAL) {
+    // 水平，x轴
+    const crossLeft = x - Math.sqrt(r * r - (point.y - y) * (point.y - y))
+    const crossRight = x + Math.sqrt(r * r - (point.y - y) * (point.y - y))
+    const crossX =
+      Math.abs(crossLeft - point.x) < Math.abs(crossRight - point.x)
+        ? crossLeft
+        : crossRight
+    crossPoint = {
+      x: crossX,
+      y: point.y,
+    }
+  } else if (direction === SegmentDirection.VERTICAL) {
+    // 垂直，y轴
+    const crossTop = y - Math.sqrt(r * r - (point.x - x) * (point.x - x))
+    const crossBottom = y + Math.sqrt(r * r - (point.x - x) * (point.x - x))
+    const crossY =
+      Math.abs(crossTop - point.y) < Math.abs(crossBottom - point.y)
+        ? crossTop
+        : crossBottom
+    crossPoint = {
+      x: point.x,
+      y: crossY,
+    }
+  }
+  return crossPoint!
+}
+
+/* 判断点所在边的方向 */
+export const pointEdgeDirection = (
+  point: Point,
+  node: BaseNodeModel,
+): Direction => {
+  const dx = Math.abs(point.x - node.x)
+  const dy = Math.abs(point.y - node.y)
+  return dx / node.width > dy / node.height
+    ? SegmentDirection.VERTICAL
+    : SegmentDirection.HORIZONTAL
+}
+
+// 判断矩形外框上一点是否在矩形直行线上
+export const inStraightLineOfRect = (
+  point: Point,
+  node: BaseNodeModel,
+): boolean => {
+  const rect = node as RectNodeModel
+  let isInStraight = false
+  const { x, y, width, height, radius } = rect
+  const rectBox = {
+    minX: x - width / 2 + radius,
+    maxX: x + width / 2 - radius,
+    minY: y - height / 2 + radius,
+    maxY: y + height / 2 - radius,
+  }
+  if (point.y === y + height / 2 || point.y === y - height / 2) {
+    isInStraight = point.x > rectBox.minX && point.x < rectBox.maxX
+  } else if (point.x === x + width / 2 || point.x === x - width / 2) {
+    isInStraight = point.y > rectBox.minY && point.y < rectBox.maxY
+  }
+  return isInStraight
+}
+
+/* 求点在垂直或者水平方向上与椭圆的交点 */
+export const getCrossPointWithEllipse = (
+  point: Point,
+  direction: Direction,
+  node: BaseNodeModel,
+): Point => {
+  let crossPoint: Point
+  const { x, y, rx, ry } = node as EllipseNodeModel
+  if (direction === SegmentDirection.HORIZONTAL) {
+    // 水平
+    const crossLeft =
+      x -
+      Math.sqrt(rx * rx - ((point.y - y) * (point.y - y) * rx * rx) / (ry * ry))
+    const crossRight =
+      x +
+      Math.sqrt(rx * rx - ((point.y - y) * (point.y - y) * rx * rx) / (ry * ry))
+    const crossX =
+      Math.abs(crossLeft - point.x) < Math.abs(crossRight - point.x)
+        ? crossLeft
+        : crossRight
+    crossPoint = {
+      x: crossX,
+      y: point.y,
+    }
+  } else if (direction === SegmentDirection.VERTICAL) {
+    // 垂直
+    const crossTop =
+      y -
+      Math.sqrt(ry * ry - ((point.x - x) * (point.x - x) * ry * ry) / (rx * rx))
+    const crossBottom =
+      y +
+      Math.sqrt(ry * ry - ((point.x - x) * (point.x - x) * ry * ry) / (rx * rx))
+    const crossY =
+      Math.abs(crossTop - point.y) < Math.abs(crossBottom - point.y)
+        ? crossTop
+        : crossBottom
+    crossPoint = {
+      x: point.x,
+      y: crossY,
+    }
+  }
+  return crossPoint!
+}
+
+/* 求点在垂直或者水平方向上与多边形的交点 */
+export const getCrossPointWithPolygon = (
+  point: Point,
+  direction: Direction,
+  node: BaseNodeModel,
+): Point => {
+  const { pointsPosition } = node as PolygonNodeModel
+  let minDistance = Number.MAX_SAFE_INTEGER
+  let crossPoint: Point
+  const segments: LineSegment[] = []
+  for (let i = 0; i < pointsPosition.length; i++) {
+    segments.push({
+      start: pointsPosition[i],
+      end: pointsPosition[(i + 1) % pointsPosition.length],
+    })
+  }
+  segments.forEach((item) => {
+    const { start, end } = item
+    let a = start
+    let b = end
+    if (start.x > end.x) {
+      a = end
+      b = start
+    }
+    let pointXY = {
+      x: point.x,
+      y: point.y,
+    }
+    // 如果多边形当前线段是垂直,求交点
+    if (a.x === b.x && direction === SegmentDirection.HORIZONTAL) {
+      pointXY = {
+        x: a.x,
+        y: point.y,
+      }
+    }
+    // 如果多边形当前线段是水平,求交点
+    if (a.y === b.y && direction === SegmentDirection.VERTICAL) {
+      pointXY = {
+        x: point.x,
+        y: a.y,
+      }
+    }
+    // 如果线段不是水平或者垂直, 使用向量方程进行计算
+    if (a.x !== b.x && a.y !== b.y) {
+      const k = (b.y - a.y) / (b.x - a.x)
+      const m = (a.x * b.y - b.x * a.y) / (a.x - b.x)
+      if (direction === SegmentDirection.HORIZONTAL) {
+        pointXY = {
+          x: (point.y - m) / k,
+          y: point.y,
+        }
+      } else if (direction === SegmentDirection.VERTICAL) {
+        pointXY = {
+          x: point.x,
+          y: k * point.x + m,
+        }
+      }
+    }
+    // 如果交点在线段上
+    const inSegment = isInSegment(pointXY, start, end)
+    if (inSegment) {
+      const currentDistance = distance(pointXY.x, pointXY.y, point.x, point.y)
+      if (currentDistance < minDistance) {
+        minDistance = currentDistance
+        crossPoint = pointXY
+      }
+    }
+  })
+  return crossPoint!
+}
+
+// 规范节点初始化数据
+export const pickNodeConfig = (data: NodeConfig): NodeConfig => {
+  const nodeData = pick(data, [
+    'id',
+    'type',
+    'x',
+    'y',
+    'text',
+    'properties',
+    'virtual', // 区域节点是否为dnd添加的虚拟节点
+    'rotate',
+  ])
+  return nodeData
+}
+
+/**
+ * 基于节点的边，重新获取新的节点
+ */
+export const getNodeAnchorPosition = (
+  center: BaseNodeModel,
+  point: Point,
+  width: number,
+  height: number,
+) => {
+  let { x, y } = center
+  if (point.x > center.x) {
+    x = center.x + width / 2
+  } else if (point.x < center.x) {
+    x = center.x - width / 2
+  }
+  if (point.y > center.y) {
+    y = center.y + height / 2
+  } else if (point.y < center.y) {
+    y = center.y - height / 2
+  }
+  return {
+    x,
+    y,
+  }
+}
+
+// 获取文案高度，自动换行，利用dom计算高度
+export const getHtmlTextHeight = ({
+  rows,
+  style,
+  rowsLength,
+  className,
+}: {
+  rows: string[]
+  style: any // TODO: 完善类型
+  rowsLength: number
+  className: string
+}) => {
+  const dom = document.createElement('div')
+  dom.style.fontSize = style.fontSize
+  dom.style.width = style.width
+  dom.className = className
+  dom.style.lineHeight = style.lineHeight
+  dom.style.padding = style.padding
+  if (style.fontFamily) {
+    dom.style.fontFamily = style.fontFamily
+  }
+  if (rowsLength > 1) {
+    rows.forEach((row) => {
+      const rowDom = document.createElement('div')
+      rowDom.textContent = row
+      dom.appendChild(rowDom)
+    })
+  } else {
+    dom.textContent = rows[0]
+  }
+  document.body.appendChild(dom)
+  const height = dom.clientHeight
+  document.body.removeChild(dom)
+  return height
+}
+// 获取文案高度，自动换行，利用dom计算高度
+export const getSvgTextWidthHeight = ({
+  rows,
+  rowsLength,
+  fontSize,
+}: {
+  rows: string[]
+  rowsLength: number
+  fontSize: number
+}) => {
+  let longestBytes = 0
+  rows &&
+    rows.forEach((item) => {
+      const rowByteLength = getBytesLength(item)
+      longestBytes = rowByteLength > longestBytes ? rowByteLength : longestBytes
+    })
+  // 背景框宽度，最长一行字节数/2 * fontsize + 2
+  // 背景框宽度， 行数 * fontsize + 2
+  return {
+    width: Math.ceil(longestBytes / 2) * fontSize + fontSize / 4,
+    height: rowsLength * (fontSize + 2) + fontSize / 4,
+  }
+}
+
+/**
+ * @description 格式化边校验信息
+ */
+export const formateAnchorConnectValidateData = (
+  data: Model.ConnectRuleResult,
+) => {
+  if (typeof data !== 'object') {
+    return {
+      isAllPass: !!data,
+      msg: data ? '' : '不允许连接',
+    }
+  }
+  return data
+}

package/src/util/raf.ts

@@ -0,0 +1,28 @@
+import { createUuid } from './uuid'
+
+const rafIdMap = new Map()
+
+export const createRaf = (callback: () => void) => {
+  const rafId = createUuid()
+
+  function run() {
+    callback()
+    const eId = rafIdMap.get(rafId)
+    if (eId) {
+      const nId = window.requestAnimationFrame(run)
+      rafIdMap.set(rafId, nId)
+    }
+  }
+
+  const id = window.requestAnimationFrame(run)
+  rafIdMap.set(rafId, id)
+  return rafId
+}
+
+export const cancelRaf = (rafId: string) => {
+  const eId = rafIdMap.get(rafId)
+  if (eId) {
+    window.cancelAnimationFrame(eId)
+    rafIdMap.delete(rafId)
+  }
+}

package/src/util/sampling.ts

@@ -0,0 +1,85 @@
+import { distance } from './node'
+import LogicFlow from '../LogicFlow'
+
+import Point = LogicFlow.Point
+import Vector = LogicFlow.Vector
+
+const SAMPLING_FREQUENCY = 100
+const normal: Vector = {
+  x: 1,
+  y: 0,
+  z: 0,
+}
+
+// 采样三次贝塞尔曲线上的点, 假设采样频率为SAMPLING_FREQUENCY, 取倒数第1-6/SAMPLING_FREQUENCY个点即t=1-6/SAMPLING_FREQUENCY
+export function sampleCubic(
+  p1: Point,
+  cp1: Point,
+  cp2: Point,
+  p2: Point,
+  offset: number,
+) {
+  const program = (t: number) => {
+    if (t < 0 || t > 1) {
+      throw new RangeError('The value range of parameter "t" is [0,1]')
+    }
+    return {
+      x:
+        p1.x * (1 - t) ** 3 +
+        3 * cp1.x * t * (1 - t) ** 2 +
+        3 * cp2.x * t ** 2 * (1 - t) +
+        p2.x * t ** 3,
+      y:
+        p1.y * (1 - t) ** 3 +
+        3 * cp1.y * t * (1 - t) ** 2 +
+        3 * cp2.y * t ** 2 * (1 - t) +
+        p2.y * t ** 3,
+    }
+  }
+  // fix: https://github.com/didi/LogicFlow/issues/951
+  // 计算贝塞尔曲线上与终点距离为offset的点，作为箭头的的垂点。
+  let arrowDistance = 0
+  let t = 2
+  const { x: x1, y: y1 } = p2
+  let point = p2
+  while (arrowDistance < offset && t < 50) {
+    point = program(1 - t / SAMPLING_FREQUENCY)
+    const { x: x2, y: y2 } = point
+    arrowDistance = distance(x1, y1, x2, y2)
+    t++
+  }
+  return point
+}
+
+function crossByZ(v: Vector, v1: Vector) {
+  return v.x * v1.y - v.y * v1.x
+}
+
+function dot(v: Vector, w: Vector) {
+  const v1 = [v.x, v.y, v.z]
+  const v2 = [w.x, w.y, w.z]
+  return v2.reduce((prev, cur, index) => prev + cur * v1[index])
+}
+
+function angle(v1: Vector, v2: Vector) {
+  const negative = crossByZ(v1, v2)
+  const r = Math.acos(dot(normalize(v1), normalize(v2)))
+  return negative >= 0 ? r : -r
+}
+
+function normalize(v: Vector): Vector {
+  const len = Math.hypot(v.x, v.y)
+  return {
+    x: v.x / len,
+    y: v.y / len,
+    z: 0,
+  }
+}
+
+export function getThetaOfVector(v: Vector) {
+  return angle(normal, v)
+}
+
+export function degrees(radians: number) {
+  return radians * (180 / Math.PI)
+}