@logicflow/extension 2.2.0 → 2.2.1

package/src/tools/label/mediumEditor.ts

@@ -1,94 +0,0 @@
-import MediumEditor from 'medium-editor'
-import Picker from 'vanilla-picker'
-import rangy from 'rangy'
-import 'rangy/lib/rangy-classapplier'
-
-export const defaultOptions = {
-  toolbar: {
-    allowMultiParagraphSelection: true,
-    buttons: [
-      'bold',
-      'colorpicker',
-      'italic',
-      'underline',
-      'strikethrough',
-      'quote',
-      'justifyLeft',
-      'justifyCenter',
-      'justifyRight',
-      'justifyFull',
-      'superscript',
-      'subscript',
-      'orderedlist',
-      'unorderedlist',
-      'pre',
-      'removeFormat',
-      'outdent',
-      'indent',
-      'h2',
-      'h3',
-    ],
-    standardizeSelectionStart: false,
-    updateOnEmptySelection: false,
-  },
-
-  placeholder: {
-    text: '请输入内容',
-    hideOnClick: true,
-  },
-  disableEditing: true,
-}
-
-export const ColorPickerButton = MediumEditor.extensions.button.extend({
-  name: 'colorpicker',
-  tagNames: ['mark'],
-  contentDefault: '<b>Color</b>',
-  aria: 'Color Picker',
-  action: 'colorPicker',
-  init: function () {
-    rangy.init()
-    MediumEditor.extensions.button.prototype.init.call(this)
-    this.colorPicker = new Picker({
-      parent: this.button,
-      color: '#000',
-      onDone: (res) => {
-        if (this.coloredText && this.coloredText.isAppliedToSelection()) {
-          this.coloredText.undoToSelection()
-        }
-        this.coloredText = rangy.createClassApplier('colored', {
-          elementTagName: 'span',
-          elementProperties: {
-            style: {
-              color: res.hex,
-            },
-          },
-          normalize: true,
-        })
-        this.coloredText.toggleSelection()
-        this.base.checkContentChanged()
-        this.setInactive()
-      },
-    })
-  },
-  getButton: function () {
-    return this.button
-  },
-  handleClick: function () {
-    this.setActive()
-    this.colorPicker.show()
-  },
-  isAlreadyApplied: function (node) {
-    return node.nodeName.toLowerCase() === 'mark'
-  },
-  isActive: function () {
-    return this.button.classList.contains('medium-editor-button-active')
-  },
-  setInactive: function () {
-    this.button.classList.remove('medium-editor-button-active')
-  },
-  setActive: function () {
-    this.button.classList.add('medium-editor-button-active')
-  },
-})
-
-export { MediumEditor }

package/src/tools/label/utils.ts

@@ -1,395 +0,0 @@
-import LogicFlow, {
-  BaseEdgeModel,
-  BaseNodeModel,
-  getNodeOutline,
-  getEdgeOutline,
-  Model,
-  ModelType,
-  BezierEdgeModel,
-  isInSegment,
-  getBezierPoints,
-  points2PointsList,
-  getBBoxOfPoints,
-} from '@logicflow/core'
-import { head, isEmpty, last, min } from 'lodash-es'
-import { calcTwoPointsDistance, getPointOnBezier } from './algorithm'
-
-import Point = LogicFlow.Point
-import LabelConfig = LogicFlow.LabelConfig
-import OutlineInfo = Model.OutlineInfo
-
-export type BBoxInfo = {
-  x: number
-  y: number
-  width: number
-  height: number
-}
-
-// 工具函数：计算「缩放」后 某坐标点 相对中心位置比例不变的 新坐标点
-// 前提条件: 当缩放一个矩形时，如果你希望矩形中的某个点的位置相对于矩形保持不变
-//
-// 1.	原始矩形的左上角坐标为 (x1, y1)，宽度为 w1，高度为 h1。
-// 2.	缩放后的矩形的左上角坐标为 (x2, y2)，宽度为 w2，高度为 h2。
-// 3.	矩形中的某个点在原始矩形中的坐标为 (px1, py1)。
-//
-// 目标
-// 计算该点在缩放后矩形中的新坐标 (px2, py2)。
-//
-// 步骤
-// 1.	计算相对位置：首先计算点 (px1, py1) 在原始矩形中的相对位置。
-// relativeX = (px1 - x1) / w1
-// relativeY = (py1 - y1) / h1
-//
-// 2.	计算新坐标：然后，使用相对位置计算该点在缩放后矩形中的新坐标。
-// px2 = x2 + relativeX * w2
-// py2 = y2 + relativeY * h2
-export function calcPointAfterResize(
-  origin: BBoxInfo,
-  scaled: BBoxInfo,
-  point: Point,
-): Point {
-  const { x: x1, y: y1, width: w1, height: h1 } = origin
-  const { x: x2, y: y2, width: w2, height: h2 } = scaled
-  const { x: px1, y: py1 } = point
-
-  // 计算点在原始矩形中的相对位置
-  const relativeX = (px1 - x1) / w1
-  const relativeY = (py1 - y1) / h1
-
-  // 计算点在缩放后矩形中的新坐标
-  const px2 = x2 + relativeX * w2
-  const py2 = y2 + relativeY * h2
-
-  return { x: px2, y: py2 }
-}
-
-// 工具函数：计算「旋转」后 某坐标点 相对中心位置比例不变的 新坐标点
-// 要计算以点 x1 = (x1, y1) 为中心，点 x2 = (x2, y2) 旋转 θ 度后的坐标位置，可以使用旋转矩阵进行计算。
-//
-// 旋转公式如下：
-// 	1. 首先将点  x2  平移到以  x1  为原点的坐标系：
-//  x' = x2 - x1
-//  y' = y2 - y1
-// 2.	然后应用旋转矩阵进行旋转：
-//  x'' = x' * cos(θ) - y' * sin(θ)
-//  y'' = x' * sin(θ) + y' * cos(θ)
-// 3.	最后将结果平移回原来的坐标系：
-//  x_new = x'' + x1
-//  y_new = y'' + y1
-//
-// 综合起来，旋转后的新坐标  (x_new, y_new)  计算公式如下：
-//
-//  x_new = (x2 - x1) * cos(θ) - (y2 - y1) * sin(θ) + x1
-//  y_new = (x2 - x1) * sin(θ) + (y2 - y1) * cos(θ) + y1
-//
-// 其中，θ 需要用弧度表示，如果你有的是角度，可以用以下公式转换为弧度：
-//
-// rad = deg * π / 180
-export function rotatePointAroundCenter(
-  target: Point,
-  center: Point,
-  radian: number,
-): Point {
-  // Rotate point (x2, y2) around point (x1, y1) by theta degrees.
-  //
-  // Parameters:
-  //   x1, y1: Coordinates of the center point.
-  //   x2, y2: Coordinates of the point to rotate.
-  //   theta_degrees: Angle in degrees to rotate the point.
-  //
-  // Returns:
-  //   Tuple of new coordinates (x_new, y_new) after rotation.
-
-  const { x: x1, y: y1 } = center
-  const { x: x2, y: y2 } = target
-
-  // Translate point to origin
-  const xPrime = x2 - x1
-  const yPrime = y2 - y1
-
-  // Rotate point
-  const xDoublePrime = xPrime * Math.cos(radian) - yPrime * Math.sin(radian)
-  const yDoublePrime = xPrime * Math.sin(radian) + yPrime * Math.cos(radian)
-
-  // Translate point back
-  const xNew = xDoublePrime + x1
-  const yNew = yDoublePrime + y1
-
-  return {
-    x: xNew,
-    y: yNew,
-  }
-}
-
-/** Edge 相关工具方法 */
-
-/**
- * 获取某点在一个矩形图形（节点 or 边的 outline）内的偏移量
- * @param point 目标点（此处即 Label 的坐标信息）
- * @param element 目标元素
- */
-export const getPointOffsetOfElementOutline = (
-  point: Point,
-  element: BaseNodeModel | BaseEdgeModel,
-) => {
-  const baseType = element.BaseType
-  const bboxInfo: OutlineInfo | undefined =
-    baseType === 'node' ? getNodeOutline(element) : getEdgeOutline(element)
-
-  if (bboxInfo) {
-    const { x, y } = point
-    const { x: minX, y: minY, x1: maxX, y1: maxY } = bboxInfo
-    let xDeltaPercent: number = 0.5
-    let yDeltaPercent: number = 0.5
-    let xDeltaDistance: number = x - maxX
-    let yDeltaDistance: number = y - maxY
-    /**
-     * 文本在由路径点组成的凸包内，就记录偏移比例
-     * 文本在凸包外，记录绝对距离
-     * 用于边路径变化时计算文本新位置
-     */
-    if (minX && maxX && minX < x && x < maxX) {
-      xDeltaPercent = min([(x - minX) / (maxX - minX), 1]) as number
-    } else if (x <= minX) {
-      xDeltaDistance = x - minX
-    } else {
-      xDeltaDistance = x - maxX
-    }
-    if (minY && maxY && minY < y && y < maxY) {
-      yDeltaPercent = min([(y - minY) / (maxY - minY), 1]) as number
-    } else if (y <= minY) {
-      yDeltaDistance = y - minY
-    } else {
-      yDeltaDistance = y - maxY
-    }
-    return {
-      xDeltaPercent,
-      yDeltaPercent,
-      xDeltaDistance,
-      yDeltaDistance,
-    }
-  }
-}
-
-/**
- * 判断节点是否在折线上
- * @param point 目标点坐标
- * @param points 折线上的点坐标
- */
-const isPointOnPolyline = (point: Point, points: Point[]): boolean => {
-  for (let i = 0; i < points.length - 1; i++) {
-    const start = points[i]
-    const end = points[i + 1]
-    if (isInSegment(point, start, end)) {
-      return true
-    }
-  }
-
-  return false
-}
-
-/**
- * 给定一个点  P = (x_0, y_0)  和线段的两个端点  A = (x_1, y_1)  和  B = (x_2, y_2) ，可以使用以下步骤计算点到线段的距离：
- * 1.	计算向量  AB  和  AP 。
- * 2.	计算  AB  的平方长度。
- * 3.	计算点  P  在直线  AB  上的投影点  Q 。
- * 4.	判断  Q  是否在线段  AB  上。
- * 5.	根据  Q  是否在线段上，计算点到线段的距离。
- *
- * 计算点到线段质检的距离
- * @param point
- * @param start
- * @param end
- */
-export const pointToSegmentDistance = (
-  point: Point,
-  start: Point,
-  end: Point,
-): number => {
-  const { x: px, y: py } = point
-  const { x: sx, y: sy } = start
-  const { x: ex, y: ey } = end
-
-  const SEx = ex - sx
-  const SEy = ey - sy
-  const SPx = px - sx
-  const SPy = py - sy
-
-  const SE_SE = SEx ** 2 + SEy ** 2
-  const SP_SE = SPx * SEx + SPy * SEy
-  let t = SP_SE / SE_SE
-  if (t < 0) t = 0
-  if (t > 1) t = 1
-
-  const qx = sx + t * SEx
-  const qy = sy + t * SEy
-  return Math.sqrt((px - qx) ** 2 + (py - qy) ** 2)
-}
-
-export const calcPolylineTotalLength = (points: Point[]) => {
-  let length = 0
-  for (let i = 0; i < points.length - 1; i++) {
-    const start = points[i]
-    const end = points[i + 1]
-    length += calcTwoPointsDistance(start, end)
-  }
-  return length
-}
-
-/**
- * TODO: 确认该函数的意义，写完还是没看懂什么意思
- * @param point
- * @param points
- */
-export const pointPositionRatio = (point: Point, points: Point[]): number => {
-  let length = 0
-  for (let i = 0; i < points.length - 1; i++) {
-    const start = points[i]
-    const end = points[i + 1]
-    const segmentLength = calcTwoPointsDistance(start, end)
-
-    if (pointToSegmentDistance(point, start, end) <= 20) {
-      const d1 = calcTwoPointsDistance(point, start)
-      length += d1
-      const totalLength = calcPolylineTotalLength(points)
-      // 小数点后保留一位（四舍五入）
-      return Math.round((length / totalLength) * 10) / 10
-    } else {
-      length += segmentLength
-    }
-  }
-  return 0
-}
-
-/**
- * 计算一个坐标在贝塞尔曲线上最近的一个点
- * @param point
- * @param edge
- * @param step
- */
-export const calcClosestPointOnBezierEdge = (
-  point: Point,
-  edge: BezierEdgeModel,
-  step: number = 5,
-): Point => {
-  let minDistance = Infinity
-  let closestPoint: Point = point
-
-  const pointsList = getBezierPoints(edge.path)
-  if (isEmpty(pointsList)) return closestPoint
-
-  const [start, sNext, ePre, end] = pointsList
-  for (let i = 0; i <= step; i++) {
-    const t = i / step
-    const bezierPoint = getPointOnBezier(t, start, sNext, ePre, end)
-    const distance = calcTwoPointsDistance(point, bezierPoint)
-    if (distance < minDistance) {
-      minDistance = distance
-      closestPoint = bezierPoint
-    }
-  }
-
-  return closestPoint
-}
-
-export const getNewPointAtDistance = (
-  points: Point[],
-  ratio: number,
-): Point | undefined => {
-  const totalLength = calcPolylineTotalLength(points)
-  const targetLength = totalLength * ratio
-
-  let length = 0
-  for (let i = 0; i < points.length - 1; i++) {
-    const start = points[i]
-    const end = points[i + 1]
-    const segmentLength = calcTwoPointsDistance(start, end)
-    if (length + segmentLength >= targetLength) {
-      const ratio = (targetLength - length) / segmentLength
-      return {
-        x: start.x + (end.x - start.x) * ratio,
-        y: start.y + (end.y - start.y) * ratio,
-      }
-    } else {
-      length += segmentLength
-    }
-  }
-  return last(points)
-}
-
-/**
- * 计算一个坐标离折线（包括 PolylineEdge 和 LineEdge 直线）最近的一个点
- * @param point
- * @param edge
- */
-export const calcLabelPositionOnPolyline = (
-  point: Point,
-  edge: BaseEdgeModel,
-): Point => {
-  let points = points2PointsList(edge.points)
-  if (points.length === 0) {
-    points = [edge.startPoint, edge.endPoint]
-  }
-
-  const { xDeltaPercent, yDeltaPercent, yDeltaDistance, xDeltaDistance } =
-    getPointOffsetOfElementOutline(point, edge) ?? {}
-  const isPointOnEdge = isPointOnPolyline(point, points)
-  const ratio = pointPositionRatio(point, points)
-
-  const start = head(points)
-  const end = last(points)
-
-  // 分别取路径中，x轴 和 y轴上的最大最小坐标值组合成一个矩形
-  const { minX, minY, maxX, maxY } = getBBoxOfPoints(points, 10)
-
-  if (!start || !end) return point
-
-  if (xDeltaPercent && yDeltaPercent) {
-    const positByPercent = {
-      x: minX + (maxX - minX) * xDeltaPercent,
-      y: minY + (maxY - minY) * yDeltaPercent,
-    }
-    return isPointOnEdge
-      ? (getNewPointAtDistance(points, ratio) ?? point) // 函数什么意思
-      : positByPercent
-  }
-  // 如果文本在凸包的上方或者下方
-  if (xDeltaPercent && yDeltaDistance) {
-    return {
-      x: minX + (maxX - minX) * xDeltaPercent,
-      y: yDeltaDistance < 0 ? minY + yDeltaDistance : maxY + yDeltaDistance,
-    }
-  }
-  // 如果文本在凸包的左边或者右边
-  if (yDeltaPercent && xDeltaDistance) {
-    return {
-      x: xDeltaDistance < 0 ? minX + xDeltaDistance : maxX + xDeltaDistance,
-      y: minY + (maxY - minY) * yDeltaPercent,
-    }
-  }
-  // 如果文本在凸包左上/左下/右上/右下
-  if (xDeltaDistance && yDeltaDistance) {
-    return {
-      x: xDeltaDistance < 0 ? minX + xDeltaDistance : maxX + xDeltaDistance,
-      y: yDeltaDistance < 0 ? minY + yDeltaDistance : maxY + yDeltaDistance,
-    }
-  }
-  // 兜底
-  return point
-}
-
-/**
- * 计算 Label 离边最近的点的坐标，用于更新为 Label 的坐标
- * @param label LabelConfig -> 当前 Label 的配置项
- * @param edge
- */
-export const getLabelPositionOfLine = (
-  label: LabelConfig,
-  edge: BaseEdgeModel,
-): Point => {
-  const { x, y } = label
-  if (edge.modelType === ModelType.BEZIER_EDGE) {
-    return calcClosestPointOnBezierEdge({ x, y }, edge as BezierEdgeModel)
-  }
-  return calcLabelPositionOnPolyline({ x, y }, edge)
-}