@logicflow/extension 2.1.4 → 2.1.6

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

@@ -1,8 +1,4 @@
 import LogicFlow from '@logicflow/core'
-import {
-  createTeleportContainer,
-  destroyTeleportContainer,
-} from '@logicflow/vue-node-registry'
 
 import Position = LogicFlow.Position
 import MiniMapOption = MiniMap.MiniMapOption
@@ -198,8 +194,6 @@ export class MiniMap {
     this.bounds = boundsInit
     this.elementAreaBounds = boundsInit
     this.viewPortBounds = boundsInit
-    this.initMiniMap()
-    lf.on('graph:resize', this.onGraphResize)
   }
 
   onGraphResize = () => {
@@ -230,8 +224,10 @@ export class MiniMap {
    */
   public show = (left?: number, top?: number) => {
     if (!this.isShow) {
+      this.initMiniMap()
+      this.lf.on('graph:resize', this.onGraphResize)
       this.createMiniMap(left, top)
-      this.setView()
+      this.setView(true)
     }
     this.isShow = true
   }
@@ -240,6 +236,12 @@ export class MiniMap {
    */
   public hide = () => {
     if (this.isShow) {
+      this.lf.off('graph:resize', this.onGraphResize)
+      this.lfMap.destroy()
+      // 保证重新创建实例时，小地图中内容偏移正确
+      this.translateX = 0
+      this.translateY = 0
+
       this.removeMiniMap()
       this.lf.emit('miniMap:close', {})
     }
@@ -355,14 +357,12 @@ export class MiniMap {
       history: false,
       snapline: false,
       disabledPlugins: this.disabledPlugins,
+      isMiniMap: true,
     })
     // 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)
@@ -677,8 +677,8 @@ export class MiniMap {
       },
     })
   }
+
   destroy() {
-    destroyTeleportContainer(this.lfMap.graphModel.flowId)
     this.lf.off('graph:resize', this.onGraphResize)
   }
 }

package/src/components/selection-select/index.ts

@@ -18,6 +18,7 @@ export class SelectionSelect {
   private disabled = true
   private isWholeNode = true
   private isWholeEdge = true
+  private originStatusSaved = false
   exclusiveMode = false // 框选独占模式：true 表示只能进行框选操作，false 表示可以同时进行其他画布操作
   // 用于区分选区和点击事件
   private mouseDownInfo: {
@@ -97,7 +98,6 @@ export class SelectionSelect {
 
   private addEventListeners() {
     if (!this.container) return
-
     if (this.exclusiveMode) {
       // 独占模式：监听 container 的 mousedown 事件
       this.container.style.pointerEvents = 'auto'
@@ -143,9 +143,12 @@ export class SelectionSelect {
       y: e.clientY,
       time: Date.now(),
     }
-
     // 记录原始设置并临时禁止画布移动
-    this.originalStopMoveGraph = this.lf.getEditConfig().stopMoveGraph!
+    if (!this.originStatusSaved) {
+      // 为了防止在开启框选时用户多次点击画布导致缓存的stopMoveGraph变化，所以只在第一次点击时记录原始的stopMoveGraph issue #2263
+      this.originalStopMoveGraph = this.lf.getEditConfig().stopMoveGraph!
+      this.originStatusSaved = true
+    }
     this.lf.updateEditConfig({
       stopMoveGraph: true,
     })
@@ -249,6 +252,11 @@ export class SelectionSelect {
     }
   }
   private drawOff = (e: MouseEvent) => {
+    // 恢复原始的 stopMoveGraph 设置
+    this.lf.updateEditConfig({
+      stopMoveGraph: this.originalStopMoveGraph,
+    })
+    this.originStatusSaved = false
     // 处理鼠标抬起事件
     // 首先判断是否是点击，如果是，则清空框选
     if (this.mouseDownInfo) {
@@ -271,11 +279,6 @@ export class SelectionSelect {
       document.removeEventListener('mouseup', this.drawOff)
     }
 
-    // 恢复原始的 stopMoveGraph 设置
-    this.lf.updateEditConfig({
-      stopMoveGraph: this.originalStopMoveGraph,
-    })
-
     if (curStartPoint && curEndPoint) {
       const { x, y } = curStartPoint
       const { x: x1, y: y1 } = curEndPoint

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

@@ -15,11 +15,19 @@ export type ProximityConnectProps = {
   distance: number
   reverseDirection: boolean
   virtualEdgeStyle: Record<string, unknown>
+  /**
+   * proximityConnect 类型:
+   * - 'node': 节点-节点连接
+   * - 'anchor': 锚点-锚点连接
+   * - 'default': 节点-锚点连接
+   */
+  type: 'node' | 'anchor' | 'default'
 }
 
 export class ProximityConnect {
   static pluginName = 'proximityConnect'
   enable: boolean = true
+  type: 'node' | 'anchor' | 'default' = 'default'
   lf: LogicFlow // lf实例
   closestNode?: BaseNodeModel // 当前距离最近的节点
   currentDistance: number = Infinity // 当前间距
@@ -52,6 +60,7 @@ export class ProximityConnect {
   addEventListeners() {
     // 节点开始拖拽事件
     this.lf.graphModel.eventCenter.on('node:dragstart', ({ data }) => {
+      if (this.type === 'anchor') return
       if (!this.enable) return
       const { graphModel } = this.lf
       const { id } = data
@@ -59,13 +68,14 @@ export class ProximityConnect {
     })
     // 节点拖拽事件
     this.lf.graphModel.eventCenter.on('node:drag', () => {
+      if (this.type === 'anchor') return
       this.handleNodeDrag()
     })
     // 锚点开始拖拽事件
     this.lf.graphModel.eventCenter.on(
       'anchor:dragstart',
       ({ data, nodeModel }) => {
-        if (!this.enable) return
+        if (!this.enable || this.type === 'node') return
         this.currentNode = nodeModel
         this.currentAnchor = data
       },
@@ -74,18 +84,18 @@ export class ProximityConnect {
     this.lf.graphModel.eventCenter.on(
       'anchor:drag',
       ({ e: { clientX, clientY } }) => {
-        if (!this.enable) return
+        if (!this.enable || this.type === 'node') return
         this.handleAnchorDrag(clientX, clientY)
       },
     )
     // 节点、锚点拖拽结束事件
     this.lf.graphModel.eventCenter.on('node:drop', () => {
-      if (!this.enable) return
+      if (!this.enable || this.type === 'anchor') return
       this.handleDrop()
     })
     // 锚点拖拽需要单独判断一下当前拖拽终点是否在某个锚点上，如果是，就不触发插件的连线，以免出现创建了两条连线的问题，表现见 issue 2140
     this.lf.graphModel.eventCenter.on('anchor:dragend', ({ e, edgeModel }) => {
-      if (!this.enable) return
+      if (!this.enable || this.type === 'node') return
       const {
         canvasOverlayPosition: { x: eventX, y: eventY },
       } = this.lf.graphModel.getPointByClient({

package/src/tools/snapshot/index.ts

@@ -35,6 +35,14 @@ export type ToImageOptions = {
    * - `true`：只导出画面区域内的可见元素
    */
   partial?: boolean
+  /**
+   * 导出图片时的安全系数，用于确保导出的图片能够容纳所有元素，默认值为 1.1
+   */
+  safetyFactor?: number
+  /**
+   * 导出图片时的安全边距，用于确保导出的图片能够容纳所有元素，默认值为 40
+   */
+  safetyMargin?: number
 }
 
 // Blob | base64
@@ -381,7 +389,7 @@ export class Snapshot {
     // 计算实际宽高，考虑缩放因素
     // 在宽画布情况下，getBoundingClientRect可能无法获取到所有元素的边界
     // 因此我们添加一个安全系数来确保能够容纳所有元素
-    const safetyFactor = 1.1 // 安全系数，增加20%的空间
+    const safetyFactor = toImageOptions.safetyFactor || 1.1 // 安全系数，增加10%的空间
     const actualWidth = (bbox.width / SCALE_X) * safetyFactor
     const actualHeight = (bbox.height / SCALE_Y) * safetyFactor
 
@@ -394,7 +402,7 @@ export class Snapshot {
 
     // 宽高值 默认加padding 40，保证图形不会紧贴着下载图片
     // 为宽画布添加额外的安全边距，确保不会裁剪
-    const safetyMargin = 40 // 额外的安全边距
+    const safetyMargin = toImageOptions.safetyMargin || 40 // 额外的安全边距
 
     // 获取当前浏览器类型，不同浏览器对canvas的限制不同
     const { maxCanvasDimension, otherMaxCanvasDimension } =