@logicflow/core 2.2.0-alpha.7 → 2.2.1

package/src/util/node.ts

@@ -1,543 +0,0 @@
-import { pick } from 'lodash-es'
-import { createElement as h } from 'preact/compat'
-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 { Matrix } from './matrix'
-
-import Point = LogicFlow.Point
-import Direction = LogicFlow.Direction
-import NodeConfig = LogicFlow.NodeConfig
-import LineSegment = LogicFlow.LineSegment
-import AnchorInfo = Model.AnchorInfo
-import BoxBoundsPoint = Model.BoxBoundsPoint
-
-/* 获取所有锚点 */
-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,
-  offset = 0,
-): boolean => {
-  let inNode = false
-  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 (
-    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 => {
-  return isInNode(position, node, 5)
-}
-
-export type NodeBBox = {
-  x: number
-  y: number
-  width: number
-  height: number
-  centerX: number
-  centerY: number
-} & BoxBoundsPoint
-
-/* 获取节点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',
-    'label',
-    'properties',
-    'virtual', // 区域节点是否为dnd添加的虚拟节点
-    'rotate',
-
-    // TODO: 确认是否可以加到此处
-    'resizable',
-    'rotatable',
-  ])
-  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,
-  }
-}
-
-/*********************************************************
- * Text 节点文本相关工具函数
- ********************************************************/
-// Text 相关节点工具函数
-// TODO: 获取文案高度，设置自动换行，利用 dom 计算高度
-// function getTextHeight(text: string, font: string): number {
-//   const span = document.createElement('span');
-//   span.textContent = text;
-//   span.style.font = font;
-
-//   const range = document.createRange();
-//   range.selectNodeContents(span);
-
-//   const rect = range.getBoundingClientRect();
-//   const height = rect.height;
-
-//   return height;
-// }
-
-// 获取文案高度，自动换行，利用 dom 计算高度
-export const getHtmlTextHeight = ({
-  rows,
-  style,
-  rowsLength,
-  className,
-}: {
-  rows: string[]
-  style: h.JSX.CSSProperties
-  rowsLength: number
-  className: string
-}) => {
-  const dom = document.createElement('div')
-  dom.className = className
-  dom.style.fontSize = `${style.fontSize}`
-  dom.style.width = `${style.width}`
-  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 formatAnchorConnectValidateData = (
-  data: Model.ConnectRuleResult,
-) => {
-  if (typeof data !== 'object') {
-    return {
-      isAllPass: !!data,
-      msg: data ? '' : '不允许连接',
-    }
-  }
-  return data
-}

package/src/util/raf.ts

@@ -1,28 +0,0 @@
-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)
-  }
-}