@logicflow/extension 2.1.5 → 2.2.0

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
@@ -240,8 +236,6 @@ export class MiniMap {
    */
   public hide = () => {
     if (this.isShow) {
-      // 隐藏小地图时摧毁实例
-      destroyTeleportContainer(this.lfMap.graphModel.flowId)
       this.lf.off('graph:resize', this.onGraphResize)
       this.lfMap.destroy()
       // 保证重新创建实例时，小地图中内容偏移正确
@@ -363,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)
@@ -624,8 +616,8 @@ export class MiniMap {
     const div = document.createElement('div')
     div.className = 'lf-minimap-viewport'
 
-    // 拖拽预览视窗，主画布视口跟随移动
-    div.addEventListener('mousedown', this.startDrag)
+    div.style.touchAction = 'none'
+    div.addEventListener('pointerdown', this.startDrag)
 
     // 禁止预览视窗的点击事件冒泡
     div.addEventListener('click', (e: MouseEvent) => {
@@ -634,9 +626,9 @@ export class MiniMap {
     this.viewport = div
   }
 
-  private startDrag = (e: MouseEvent) => {
-    document.addEventListener('mousemove', this.drag)
-    document.addEventListener('mouseup', this.drop)
+  private startDrag = (e: PointerEvent) => {
+    document.addEventListener('pointermove', this.drag)
+    document.addEventListener('pointerup', this.drop)
     const { x, y } = e
     this.startPosition = { x, y }
   }
@@ -644,7 +636,7 @@ export class MiniMap {
   /**
    * 拖拽预览视窗过程中，更新主画布视口
    */
-  private drag = (e: MouseEvent) => {
+  private drag = (e: PointerEvent) => {
     const { x, y } = e
     const translateX = (x - this.startPosition.x) / this.scale
     const translateY = (y - this.startPosition.y) / this.scale
@@ -667,8 +659,8 @@ export class MiniMap {
    * 拖拽预览视窗结束，移除拖拽事件
    */
   private drop = () => {
-    document.removeEventListener('mousemove', this.drag)
-    document.removeEventListener('mouseup', this.drop)
+    document.removeEventListener('pointermove', this.drag)
+    document.removeEventListener('pointerup', this.drop)
   }
 
   /**
@@ -687,7 +679,6 @@ 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: {
@@ -75,8 +76,8 @@ export class SelectionSelect {
     this.mouseDownInfo = null
 
     // 移除事件监听
-    document.removeEventListener('mousemove', this.draw)
-    document.removeEventListener('mouseup', this.drawOff)
+    document.removeEventListener('pointermove', this.draw)
+    document.removeEventListener('pointerup', this.drawOff)
   }
 
   /**
@@ -97,11 +98,11 @@ export class SelectionSelect {
 
   private addEventListeners() {
     if (!this.container) return
-
     if (this.exclusiveMode) {
       // 独占模式：监听 container 的 mousedown 事件
       this.container.style.pointerEvents = 'auto'
-      this.container.addEventListener('mousedown', this.handleMouseDown)
+      this.container.style.touchAction = 'none'
+      this.container.addEventListener('pointerdown', this.handleMouseDown)
     } else {
       // 非独占模式：监听画布的 blank:mousedown 事件
       this.container.style.pointerEvents = 'none'
@@ -113,7 +114,7 @@ export class SelectionSelect {
   private removeEventListeners() {
     if (this.container) {
       this.container.style.pointerEvents = 'none'
-      this.container.removeEventListener('mousedown', this.handleMouseDown)
+      this.container.removeEventListener('pointerdown', this.handleMouseDown)
     }
     // 移除 blank:mousedown 事件监听
     this.lf.off('blank:mousedown', this.handleBlankMouseDown)
@@ -122,15 +123,16 @@ export class SelectionSelect {
   /**
    * 处理画布空白处鼠标按下事件（非独占模式）
    */
-  private handleBlankMouseDown = ({ e }: { e: MouseEvent }) => {
-    this.handleMouseDown(e)
+  private handleBlankMouseDown = ({ e }: { e: MouseEvent | PointerEvent }) => {
+    this.handleMouseDown(e as PointerEvent)
   }
 
   /**
    * 处理鼠标按下事件
    */
-  private handleMouseDown(e: MouseEvent) {
+  private handleMouseDown(e: PointerEvent) {
     if (!this.container || this.disabled) return
+    if (this.lf.graphModel.editConfigModel.isPinching) return
 
     // 禁用右键框选
     const isRightClick = e.button === 2
@@ -143,9 +145,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,
     })
@@ -167,8 +172,8 @@ export class SelectionSelect {
     this.container?.appendChild(wrapper)
     this.wrapper = wrapper
 
-    document.addEventListener('mousemove', this.draw)
-    document.addEventListener('mouseup', this.drawOff)
+    document.addEventListener('pointermove', this.draw)
+    document.addEventListener('pointerup', this.drawOff)
   }
 
   /**
@@ -207,7 +212,7 @@ export class SelectionSelect {
     if (this.wrapper && this.startPoint && this.endPoint) {
       // 记录上一次的结束点，用于触发 mouseup 事件
       const lastEndPoint = cloneDeep(this.endPoint)
-      const lastEvent = new MouseEvent('mouseup', {
+      const lastEvent = new PointerEvent('pointerup', {
         clientX: lastEndPoint.x,
         clientY: lastEndPoint.y,
       })
@@ -218,7 +223,13 @@ export class SelectionSelect {
     this.close()
   }
 
-  private draw = (ev: MouseEvent) => {
+  private draw = (ev: PointerEvent) => {
+    if (this.lf.graphModel.editConfigModel.isPinching) {
+      this.lf.updateEditConfig({ stopMoveGraph: this.originalStopMoveGraph })
+      this.originStatusSaved = false
+      this.cleanupSelectionState()
+      return
+    }
     const {
       domOverlayPosition: { x: x1, y: y1 },
     } = this.lf.getPointByClient(ev.clientX, ev.clientY)
@@ -248,7 +259,12 @@ export class SelectionSelect {
       }
     }
   }
-  private drawOff = (e: MouseEvent) => {
+  private drawOff = (e: PointerEvent) => {
+    // 恢复原始的 stopMoveGraph 设置
+    this.lf.updateEditConfig({
+      stopMoveGraph: this.originalStopMoveGraph,
+    })
+    this.originStatusSaved = false
     // 处理鼠标抬起事件
     // 首先判断是否是点击，如果是，则清空框选
     if (this.mouseDownInfo) {
@@ -266,16 +282,11 @@ export class SelectionSelect {
 
     const curStartPoint = cloneDeep(this.startPoint)
     const curEndPoint = cloneDeep(this.endPoint)
-    document.removeEventListener('mousemove', this.draw)
+    document.removeEventListener('pointermove', this.draw)
     if (!this.exclusiveMode) {
-      document.removeEventListener('mouseup', this.drawOff)
+      document.removeEventListener('pointerup', 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/label/Label.tsx

@@ -72,7 +72,7 @@ export class Label extends Component<ILabelProps, ILabelState> {
     element.setHovered(false)
   }
 
-  handleMouseDown = (e: MouseEvent) => {
+  handleMouseDown = (e: PointerEvent) => {
     const { label, graphModel } = this.props
     const {
       editConfigModel: { nodeTextDraggable },
@@ -86,7 +86,7 @@ export class Label extends Component<ILabelProps, ILabelState> {
       this.stepDrag.handleMouseDown(e)
     }
   }
-  handleMouseUp = (e: MouseEvent) => {
+  handleMouseUp = (e: PointerEvent) => {
     if (this.state.isDragging) {
       this.stepDrag.handleMouseUp(e)
     }
@@ -320,8 +320,8 @@ export class Label extends Component<ILabelProps, ILabelState> {
         id={`element-container-${id}`}
         className={classNames('lf-label-editor-container')}
         style={containerStyle}
-        onMouseDown={this.handleMouseDown}
-        onMouseUp={this.handleMouseUp}
+        onPointerDown={this.handleMouseDown}
+        onPointerUp={this.handleMouseUp}
         onClick={this.handleClick}
         onDblClick={this.handleDbClick}
         onBlur={this.handleBlur}