@logicflow/extension 2.2.0-alpha.4 → 2.2.0-alpha.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/extension",
-  "version": "2.2.0-alpha.4",
+  "version": "2.2.0-alpha.6",
   "description": "LogicFlow Extensions",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,8 +20,8 @@
   "author": "Logicflow-Team",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@logicflow/core": "2.2.0-alpha.4",
-    "@logicflow/vue-node-registry": "1.2.0-alpha.4"
+    "@logicflow/core": "2.2.0-alpha.6",
+    "@logicflow/vue-node-registry": "1.2.0-alpha.6"
   },
   "dependencies": {
     "@antv/hierarchy": "^0.6.11",
@@ -32,8 +32,8 @@
     "preact": "^10.17.1",
     "rangy": "^1.3.1",
     "vanilla-picker": "^2.12.3",
-    "@logicflow/core": "2.2.0-alpha.4",
-    "@logicflow/vue-node-registry": "1.2.0-alpha.4"
+    "@logicflow/core": "2.2.0-alpha.6",
+    "@logicflow/vue-node-registry": "1.2.0-alpha.6"
   },
   "devDependencies": {
     "less": "^4.1.1",

package/src/components/control/index.ts

@@ -130,13 +130,13 @@ export class Control {
       } else {
         itemContainer.append(icon)
       }
-      switch (item.text) {
-        case '上一步':
+      switch (item.key) {
+        case 'undo':
           this.lf.on('history:change', ({ data: { undoAble } }: any) => {
             itemContainer.className = undoAble ? NORMAL : DISABLED
           })
           break
-        case '下一步':
+        case 'redo':
           this.lf.on('history:change', ({ data: { redoAble } }: any) => {
             itemContainer.className = redoAble ? NORMAL : DISABLED
           })

package/src/materials/curved-edge/index.ts

@@ -1,9 +1,14 @@
 import { PolylineEdge, PolylineEdgeModel, h, LogicFlow } from '@logicflow/core'
 import PointTuple = LogicFlow.PointTuple
 
+// 方向类型：t=上(top), b=下(bottom), l=左(left), r=右(right)，'' 表示未确定
 type DirectionType = 't' | 'b' | 'l' | 'r' | ''
+// 圆弧所在象限：tl=左上，tr=右上，bl=左下，br=右下，'-' 表示不需要圆弧
 type ArcQuadrantType = 'tl' | 'tr' | 'bl' | 'br' | '-'
 
+// 方向组合到圆弧象限的映射。
+// key 由进入方向(dir1)和离开方向(dir2)拼接，例如 'tr' 表示从上(t)到右(r)的拐角。
+// 通过该映射确定在拐点处应该绘制的圆弧象限，用于计算中间控制点。
 const directionMap: {
   [key: string]: ArcQuadrantType
 } = {
@@ -17,19 +22,24 @@ const directionMap: {
   rt: 'br',
 }
 
+// 过滤折线中的共线中间点，减少不必要的顶点
 function pointFilter(points: number[][]) {
+  // 原地修改传入的数组
   const all = points
+  // 从第二个点开始，检查三点是否共线
   let i = 1
   while (i < all.length - 1) {
     const [x, y] = all[i - 1]
     const [x1, y1] = all[i]
     const [x2, y2] = all[i + 1]
+    // 如果三点在同一条水平或垂直直线上，删除中间点
     if ((x === x1 && x1 === x2) || (y === y1 && y1 === y2)) {
       all.splice(i, 1)
     } else {
       i++
     }
   }
+  // 返回精简后的点集
   return all
 }
 
@@ -87,45 +97,67 @@ function getMidPoints(
   }
 }
 
+/**
+ * 生成局部路径片段（包含圆角）
+ * - 输入为上一个顶点、当前拐点、下一个顶点，计算方向组合并选择圆弧象限
+ * - 将圆角半径限制在相邻两段长度的一半以内，避免过度弯曲
+ * @param prevPoint 上一个顶点
+ * @param cornerPoint 当前拐点（圆角所在拐点）
+ * @param nextPoint 下一个顶点
+ * @param cornerRadius 圆角半径上限
+ * @returns 局部 path 字符串（包含 L/Q 操作）
+ */
 function getPartialPath(
-  prev: PointTuple,
-  cur: PointTuple,
-  next: PointTuple,
-  radius: number,
+  prevPoint: PointTuple,
+  cornerPoint: PointTuple,
+  nextPoint: PointTuple,
+  cornerRadius: number,
 ): string {
-  let dir1: DirectionType = ''
-  let dir2: DirectionType = ''
-
-  if (prev[0] === cur[0]) {
-    dir1 = prev[1] > cur[1] ? 't' : 'b'
-  } else if (prev[1] === cur[1]) {
-    dir1 = prev[0] > cur[0] ? 'l' : 'r'
+  // 轴对齐容差（像素），用于消除微小误差
+  const epsilon = 1
+
+  const resolveDir = (a: PointTuple, b: PointTuple): DirectionType => {
+    const dx = b[0] - a[0]
+    const dy = b[1] - a[1]
+    const adx = Math.abs(dx)
+    const ady = Math.abs(dy)
+    if (ady <= epsilon && adx > epsilon) {
+      return dx < 0 ? 'l' : 'r'
+    }
+    if (adx <= epsilon && ady > epsilon) {
+      return dy < 0 ? 't' : 'b'
+    }
+    if (adx <= epsilon && ady <= epsilon) {
+      return ''
+    }
+    // 非严格对齐时，选择更接近的轴
+    return adx < ady ? (dx < 0 ? 'l' : 'r') : dy < 0 ? 't' : 'b'
   }
 
-  if (cur[0] === next[0]) {
-    dir2 = cur[1] > next[1] ? 't' : 'b'
-  } else if (cur[1] === next[1]) {
-    dir2 = cur[0] > next[0] ? 'l' : 'r'
-  }
+  const dir1: DirectionType = resolveDir(prevPoint, cornerPoint)
+  const dir2: DirectionType = resolveDir(cornerPoint, nextPoint)
 
   const r =
     Math.min(
-      Math.hypot(cur[0] - prev[0], cur[1] - prev[1]) / 2,
-      Math.hypot(next[0] - cur[0], next[1] - cur[1]) / 2,
-      radius,
-    ) || (1 / 5) * radius
+      Math.hypot(cornerPoint[0] - prevPoint[0], cornerPoint[1] - prevPoint[1]) /
+        2,
+      Math.hypot(nextPoint[0] - cornerPoint[0], nextPoint[1] - cornerPoint[1]) /
+        2,
+      cornerRadius,
+    ) || (1 / 5) * cornerRadius
 
   const key = `${dir1}${dir2}`
   const orientation: ArcQuadrantType = directionMap[key] || '-'
-  let path = `L ${prev[0]} ${prev[1]}`
+  let path = ''
 
   if (orientation === '-') {
-    path += `L ${cur[0]} ${cur[1]} L ${next[0]} ${next[1]}`
+    // 仅移动到当前拐点，由下一次迭代决定如何从拐点继续（直线或圆角）
+    path += `L ${cornerPoint[0]} ${cornerPoint[1]}`
   } else {
-    const [mid1, mid2] = getMidPoints(cur, key, orientation, r)
+    const [mid1, mid2] = getMidPoints(cornerPoint, key, orientation, r)
     if (mid1 && mid2) {
-      path += `L ${mid1[0]} ${mid1[1]} Q ${cur[0]} ${cur[1]} ${mid2[0]} ${mid2[1]}`
-      ;[cur[0], cur[1]] = mid2
+      path += `L ${mid1[0]} ${mid1[1]} Q ${cornerPoint[0]} ${cornerPoint[1]} ${mid2[0]} ${mid2[1]}`
+      ;[cornerPoint[0], cornerPoint[1]] = mid2
     }
   }
   return path

package/src/tools/snapshot/index.ts

@@ -315,31 +315,34 @@ export class Snapshot {
   }
 
   /**
-   * 根据浏览器类型获取Canvas尺寸限制
-   * @returns 包含最大主维度和次维度的对象
+   * 根据浏览器对 canvas 的大小限制，计算等比缩放比例
+   * - 参考 MDN 最大的画布尺寸：
+   * https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/canvas#最大的画布尺寸
+   *
+   * @param width
+   * @param height
    */
-  private getCanvasDimensionsByBrowser(): {
-    maxCanvasDimension: number
-    otherMaxCanvasDimension: number
-  } {
-    const userAgent = navigator.userAgent
+  private getCanvasScaleRatio(width: number, height: number): number {
+    /* 单边最大像素 */
+    const maxCanvasSide = 32767
+    /* 最大像素面积 */
+    const maxCanvasArea = 268435456
 
-    // 默认值
-    let maxCanvasDimension = 65535
-    let otherMaxCanvasDimension = 4096
+    const area = width * height
 
     if (
-      userAgent.indexOf('Chrome') !== -1 ||
-      userAgent.indexOf('Edge') !== -1
+      width <= maxCanvasSide &&
+      height <= maxCanvasSide &&
+      area <= maxCanvasArea
     ) {
-      maxCanvasDimension = 65535
-      otherMaxCanvasDimension = 4096
-    } else if (userAgent.indexOf('Firefox') !== -1) {
-      maxCanvasDimension = 32767
-      otherMaxCanvasDimension = 3814
+      return 1
     }
 
-    return { maxCanvasDimension, otherMaxCanvasDimension }
+    const widthScale = maxCanvasSide / width
+    const heightScale = maxCanvasSide / height
+    const areaScale = maxCanvasArea / area
+
+    return Math.min(widthScale, heightScale, areaScale)
   }
 
   /**
@@ -389,76 +392,50 @@ export class Snapshot {
     // 计算实际宽高，考虑缩放因素
     // 在宽画布情况下，getBoundingClientRect可能无法获取到所有元素的边界
     // 因此我们添加一个安全系数来确保能够容纳所有元素
-    const safetyFactor = toImageOptions.safetyFactor || 1.1 // 安全系数，增加10%的空间
-    const actualWidth = (bbox.width / SCALE_X) * safetyFactor
-    const actualHeight = (bbox.height / SCALE_Y) * safetyFactor
+    const safetyFactor = toImageOptions.safetyFactor || 1 // 安全系数，增加10%的空间
+    const actualWidth = bbox.width / SCALE_X
+    const actualHeight = bbox.height / SCALE_Y
+    const factorWidth = actualWidth * (safetyFactor - 1)
+    const factorHeight = actualHeight * (safetyFactor - 1)
 
     // 包含所有元素的最小宽高，确保足够大以容纳所有元素
-    const bboxWidth = Math.ceil(actualWidth)
-    const bboxHeight = Math.ceil(actualHeight)
+    const bboxWidth = Math.ceil(actualWidth + factorWidth)
+    const bboxHeight = Math.ceil(actualHeight + factorHeight)
     const canvas = document.createElement('canvas')
     canvas.style.width = `${bboxWidth}px`
     canvas.style.height = `${bboxHeight}px`
 
     // 宽高值 默认加padding 40，保证图形不会紧贴着下载图片
     // 为宽画布添加额外的安全边距，确保不会裁剪
-    const safetyMargin = toImageOptions.safetyMargin || 40 // 额外的安全边距
-
-    // 获取当前浏览器类型，不同浏览器对canvas的限制不同
-    const { maxCanvasDimension, otherMaxCanvasDimension } =
-      this.getCanvasDimensionsByBrowser()
-    const MAX_CANVAS_DIMENSION = maxCanvasDimension
-    const OTHER_MAX_CANVAS_DIMENSION = otherMaxCanvasDimension
-
-    let targetWidth = bboxWidth * dpr + padding * 2 + safetyMargin
-    let targetHeight = bboxHeight * dpr + padding * 2 + safetyMargin
-    let scaleWidth = 1 //宽 缩放
-    let scaleHeight = 1 //高 缩放
-    // 对宽和高分别进行缩放，如chrome，矩形单边最大宽度不超过65535，如宽超过65535，那么高不能超过4096，否则像素会超，也会显示不出。
-    if (
-      targetWidth > MAX_CANVAS_DIMENSION &&
-      targetHeight > OTHER_MAX_CANVAS_DIMENSION
-    ) {
-      scaleWidth = MAX_CANVAS_DIMENSION / targetWidth
-      scaleHeight = OTHER_MAX_CANVAS_DIMENSION / targetHeight
-    } else if (
-      targetWidth > OTHER_MAX_CANVAS_DIMENSION &&
-      targetHeight > MAX_CANVAS_DIMENSION
-    ) {
-      scaleWidth = OTHER_MAX_CANVAS_DIMENSION / targetWidth
-      scaleHeight = MAX_CANVAS_DIMENSION / targetHeight
-    } else if (
-      targetWidth > MAX_CANVAS_DIMENSION &&
-      targetHeight < OTHER_MAX_CANVAS_DIMENSION
-    ) {
-      scaleHeight = scaleWidth = MAX_CANVAS_DIMENSION / targetWidth
-    } else if (
-      targetWidth < OTHER_MAX_CANVAS_DIMENSION &&
-      targetHeight > MAX_CANVAS_DIMENSION
-    ) {
-      scaleHeight = scaleWidth = MAX_CANVAS_DIMENSION / targetHeight
-    }
+    const safetyMargin = toImageOptions.safetyMargin || 0 // 额外的安全边距
+
+    let targetWidth = bboxWidth * dpr
+    let targetHeight = bboxHeight * dpr
 
-    if (scaleWidth < 1 || scaleHeight < 1) {
-      targetWidth = Math.floor(targetWidth * scaleWidth)
-      targetHeight = Math.floor(targetHeight * scaleHeight)
+    // 超出 canvas 大小限制时，进行等比缩放
+    const scaleRatio = this.getCanvasScaleRatio(targetWidth, targetHeight)
+    if (scaleRatio < 1) {
+      targetWidth = Math.floor(targetWidth * scaleRatio)
+      targetHeight = Math.floor(targetHeight * scaleRatio)
     }
+
     // 将导出区域移动到左上角，canvas 绘制的时候是从左上角开始绘制的
     // 在transform矩阵中加入padding值，确保左侧元素不会被截断
     // 对这个矩阵进行缩放，否则会导致截断
     ;(copy.lastChild as SVGElement).style.transform =
-      `matrix(${scaleWidth}, 0, 0, ${scaleHeight}, ${
-        (-offsetX + TRANSLATE_X) * (1 / SCALE_X) * scaleWidth + padding / dpr
-      }, ${
-        (-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) * scaleHeight + padding / dpr
-      })`
-    canvas.width = targetWidth
-    canvas.height = targetHeight
+      `matrix(${scaleRatio}, 0, 0, ${scaleRatio}, ${
+        (-offsetX + TRANSLATE_X) * (1 / SCALE_X) * scaleRatio +
+        padding +
+        factorWidth / 2 +
+        safetyMargin
+      }, ${(-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) * scaleRatio + padding + factorHeight / 2 + safetyMargin})`
+    canvas.width = targetWidth + (padding + safetyMargin) * 2 * dpr
+    canvas.height = targetHeight + (padding + safetyMargin) * 2 * dpr
     const ctx = canvas.getContext('2d')
     if (ctx) {
       // 清空canvas
       ctx.clearRect(0, 0, canvas.width, canvas.height)
-      ctx.scale(dpr * scaleWidth, dpr * scaleHeight)
+      ctx.scale(dpr, dpr)
       // 如果有背景色，设置流程图导出的背景色
       if (backgroundColor) {
         ctx.fillStyle = backgroundColor
@@ -690,12 +667,6 @@ export class Snapshot {
     fileType?: string,
     toImageOptions?: ToImageOptions,
   ): Promise<SnapshotResponse> {
-    console.log(
-      'getSnapshotBase64---------------',
-      backgroundColor,
-      fileType,
-      toImageOptions,
-    )
     return await this.withExportPreparation(
       () => this._getSnapshotBase64(backgroundColor, fileType, toImageOptions),
       toImageOptions,