@logicflow/extension 2.0.21 → 2.1.1

package/src/components/mini-map/index.ts

@@ -1,4 +1,5 @@
 import LogicFlow from '@logicflow/core'
+import { createTeleportContainer } from '@logicflow/vue-node-registry'
 
 import Position = LogicFlow.Position
 import MiniMapOption = MiniMap.MiniMapOption
@@ -355,6 +356,10 @@ export class MiniMap {
     // minimap中禁用adapter。
     // this.lfMap.adapterIn = (a) => a
     // this.lfMap.adapterOut = (a) => a
+
+    // 创建teleport容器（vue3中生效）
+    createTeleportContainer(miniMapWrap, this.lfMap.graphModel.flowId)
+
     this.miniMapWrap = miniMapWrap
     this.createViewPort()
     miniMapWrap.addEventListener('click', this.mapClick)

package/src/style/index.less

@@ -162,15 +162,27 @@
   transition: all 120ms ease-in-out;
 }
 
+.lf-menu-item {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  justify-content: flex-start;
+  list-style: none;
+}
+
+.lf-menu-item:hover {
+  background: #f3f3f3;
+}
+
 .lf-menu-item__disabled {
   color: #aaa;
-  cursor: default;
+  cursor: not-allowed !important;
   opacity: 0.88;
-  pointer-events: none;
+  pointer-events: inherit !important;
 }
 
-.lf-menu-item:hover {
-  background: #f3f3f3;
+.lf-menu-item__disabled:hover {
+  background: #fff;
 }
 
 /* dndpanel */

package/src/style/raw.ts

@@ -142,14 +142,24 @@ export const content = `@import url('medium-editor/dist/css/medium-editor.min.cs
   cursor: pointer;
   transition: all 120ms ease-in-out;
 }
+.lf-menu-item {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  justify-content: flex-start;
+  list-style: none;
+}
+.lf-menu-item:hover {
+  background: #f3f3f3;
+}
 .lf-menu-item__disabled {
   color: #aaa;
-  cursor: default;
+  cursor: not-allowed !important;
   opacity: 0.88;
-  pointer-events: none;
+  pointer-events: inherit !important;
 }
-.lf-menu-item:hover {
-  background: #f3f3f3;
+.lf-menu-item__disabled:hover {
+  background: #fff;
 }
 /* dndpanel */
 .lf-dndpanel {

package/src/tools/label/index.ts

@@ -157,15 +157,14 @@ export class Label implements Extension {
       const textEdit = element.BaseType === 'node' ? nodeTextEdit : edgeTextEdit
       const textDraggable =
         element.BaseType === 'node' ? nodeTextDraggable : edgeTextDraggable
-
       return {
         ...config,
         zIndex,
         labelWidth,
         content: content ?? value,
         vertical: vertical ?? false,
-        editable: textEdit && editable,
-        draggable: textDraggable && draggable,
+        editable: Boolean(textEdit) && editable,
+        draggable: Boolean(textDraggable) && draggable,
         textOverflowMode: labelTextOverflowMode ?? textOverflowMode,
       }
     })
@@ -347,8 +346,17 @@ export class Label implements Extension {
       const element = graphModel.getElement(data.id)
       if (element) {
         this.rewriteInnerMethods(element)
-        const formatedLabel = this.formatConfig(graphModel, data)
-        element.setProperty('_label', formatedLabel)
+        // 检查_label是否已经是格式化后的数组格式，如果是则跳过格式化
+        // 这样可以避免在复制粘贴时重复处理已经格式化好的label数据
+        const currentLabel = element.properties._label
+        if (
+          !isArray(currentLabel) ||
+          currentLabel.length === 0 ||
+          !currentLabel[0].id
+        ) {
+          const formatedLabel = this.formatConfig(graphModel, data)
+          element.setProperty('_label', formatedLabel)
+        }
       }
     })
   }

package/src/tools/proximity-connect/index.ts

@@ -92,7 +92,6 @@ export class ProximityConnect {
         x: e.clientX,
         y: e.clientY,
       })
-
       if (edgeModel && this.virtualEdge) {
         const { id: virtualEdgeId } = this.virtualEdge as BaseEdgeModel
         const { targetNodeId } = edgeModel as BaseEdgeModel
@@ -100,7 +99,7 @@ export class ProximityConnect {
           this.lf.graphModel.getNodeModelById(targetNodeId)
         if (
           targetNodeModel &&
-          isInNode({ x: eventX, y: eventY }, targetNodeModel)
+          isInNode({ x: eventX, y: eventY }, targetNodeModel, 10)
         ) {
           // 如果当前拖拽点在锚点上，就不触发插件的连线
           this.lf.deleteEdge(virtualEdgeId)

package/src/tools/snapshot/index.ts

@@ -306,6 +306,34 @@ export class Snapshot {
     return rules
   }
 
+  /**
+   * 根据浏览器类型获取Canvas尺寸限制
+   * @returns 包含最大主维度和次维度的对象
+   */
+  private getCanvasDimensionsByBrowser(): {
+    maxCanvasDimension: number
+    otherMaxCanvasDimension: number
+  } {
+    const userAgent = navigator.userAgent
+
+    // 默认值
+    let maxCanvasDimension = 65535
+    let otherMaxCanvasDimension = 4096
+
+    if (
+      userAgent.indexOf('Chrome') !== -1 ||
+      userAgent.indexOf('Edge') !== -1
+    ) {
+      maxCanvasDimension = 65535
+      otherMaxCanvasDimension = 4096
+    } else if (userAgent.indexOf('Firefox') !== -1) {
+      maxCanvasDimension = 32767
+      otherMaxCanvasDimension = 3814
+    }
+
+    return { maxCanvasDimension, otherMaxCanvasDimension }
+  }
+
   /**
    * 将 svg 转化为 canvas
    * @param svg - svg 元素
@@ -357,12 +385,6 @@ export class Snapshot {
     const actualWidth = (bbox.width / SCALE_X) * safetyFactor
     const actualHeight = (bbox.height / SCALE_Y) * safetyFactor
 
-    // 将导出区域移动到左上角，canvas 绘制的时候是从左上角开始绘制的
-    // 在transform矩阵中加入padding值，确保左侧元素不会被截断
-    ;(copy.lastChild as SVGElement).style.transform = `matrix(1, 0, 0, 1, ${
-      (-offsetX + TRANSLATE_X) * (1 / SCALE_X) + padding / dpr
-    }, ${(-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) + padding / dpr})`
-
     // 包含所有元素的最小宽高，确保足够大以容纳所有元素
     const bboxWidth = Math.ceil(actualWidth)
     const bboxHeight = Math.ceil(actualHeight)
@@ -373,13 +395,62 @@ export class Snapshot {
     // 宽高值 默认加padding 40，保证图形不会紧贴着下载图片
     // 为宽画布添加额外的安全边距，确保不会裁剪
     const safetyMargin = 40 // 额外的安全边距
-    canvas.width = bboxWidth * dpr + padding * 2 + safetyMargin
-    canvas.height = bboxHeight * dpr + padding * 2 + safetyMargin
+
+    // 获取当前浏览器类型，不同浏览器对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
+    }
+
+    if (scaleWidth < 1 || scaleHeight < 1) {
+      targetWidth = Math.floor(targetWidth * scaleWidth)
+      targetHeight = Math.floor(targetHeight * scaleHeight)
+    }
+    // 将导出区域移动到左上角，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
     const ctx = canvas.getContext('2d')
     if (ctx) {
       // 清空canvas
       ctx.clearRect(0, 0, canvas.width, canvas.height)
-      ctx.scale(dpr, dpr)
+      ctx.scale(dpr * scaleWidth, dpr * scaleHeight)
       // 如果有背景色，设置流程图导出的背景色
       if (backgroundColor) {
         ctx.fillStyle = backgroundColor