w-flow-vue 1.0.21 → 1.0.23

package/docs/components_WFlowVue.vue.html

@@ -121,6 +121,7 @@
         :snap-grid-size="snapToGrid ? snapGridSize : null"
         :settings-enabled="nodesSettingsEnabled"
         :settings-excludes="nodesSettingsExcludes"
+        @drag-prepare="onNodeDragPrepare"
         @drag-start="onNodeDragStart"
         @node-click="onNodeClick"
         @node-double-click="onNodeDoubleClick"
@@ -424,6 +425,7 @@ export default {
         document.addEventListener('keyup', this.onKeyUp)
         document.addEventListener('mousemove', this.onDocMouseMove)
         document.addEventListener('mouseup', this.onDocMouseUp)
+        window.addEventListener('blur', this.onWindowBlur)
     },
     beforeDestroy() {
         if (this._panAnimId) {
@@ -434,6 +436,7 @@ export default {
         document.removeEventListener('keyup', this.onKeyUp)
         document.removeEventListener('mousemove', this.onDocMouseMove)
         document.removeEventListener('mouseup', this.onDocMouseUp)
+        window.removeEventListener('blur', this.onWindowBlur)
     },
     computed: {
         widthInp() {
@@ -813,6 +816,8 @@ export default {
         },
         onCanvasWheel(event) {
             if (!this.zoomOnScroll) return
+            //滾輪縮放亦為viewport寫入者, 先取消程式動畫避免二者互相覆寫
+            this.cancelViewportAnimation()
             const delta = -event.deltaY * 0.001
             const currentZoom = this.viewport.zoom
             // fitView may set zoom below zoomMin; use the current level as the
@@ -836,6 +841,14 @@ export default {
 
         // --- Document-level mouse ---
         onDocMouseMove(event) {
+            //按鍵已放開卻仍處於進行中狀態: 代表收尾事件未送達(於瀏覽器視窗外放開/視窗失焦/手勢被原生拖曳接管),
+            //此時須主動走既有收尾路徑清除狀態; 只return不清狀態無效, 旗標續留為真下次移動仍會誤判
+            if ((event.buttons & 1) === 0) {
+                if (this.isPanning || this.isDraggingNode || this.isConnecting || this.isSelecting) {
+                    this.onDocMouseUp(event)
+                }
+                return
+            }
             if (this.isPanning) {
                 this.doPan(event)
             }
@@ -849,6 +862,19 @@ export default {
                 this.doSelection(event)
             }
         },
+        onWindowBlur(event) {
+            //視窗失焦後不會再收到mouseup與keyup, 於此統一收尾避免狀態黏住
+            if (this.isPanning) {
+                this.endPan()
+            }
+            //節點拖曳同樣須收尾: 否則isDraggingNode殘留為true, 回到視窗後在觸發mousemove守衛前
+            //點擊其他節點, 該次node-click會被onNodeClick之拖曳守衛以過期狀態誤擋
+            //event為blur事件(非MouseEvent), endDrag不讀取座標僅原樣轉交node-drag-stop, 故不偽造mouseup
+            if (this.isDraggingNode) {
+                this.endDrag(event)
+            }
+            this.keysPressed = {}
+        },
         onDocMouseUp(event) {
             if (this.isPanning) {
                 this.endPan()
@@ -866,6 +892,8 @@ export default {
 
         // --- Pan ---
         startPan(event) {
+            //手動平移優先於程式動畫, 否則二者同時寫viewport而互相覆寫
+            this.cancelViewportAnimation()
             this.isPanning = true
             this.panStartPos = { x: event.clientX, y: event.clientY }
         },
@@ -893,16 +921,20 @@ export default {
         },
 
         // --- Node drag ---
-        onNodeDragStart({ node, event }) {
+        //於節點mousedown當下先行選取(拖曳本身延後至跨越位移門檻才由onNodeDragStart啟動)。
+        //守衛與選取條件皆與修正前之onNodeDragStart一致, 故選取時機不因拖曳延後而改變。
+        onNodeDragPrepare({ node }) {
             if (this.locked || !this.nodesDraggable) return
-            this.isDraggingNode = true
-            this.draggingNodeId = node.id
-            this.dragStartPos = { x: event.clientX, y: event.clientY }
-
             if (this.selectNodesOnDrag && !this.isMultiSelectPressed) {
                 this.setSelectedNodes([node.id])
                 this.setSelectedConns([])
             }
+        },
+        onNodeDragStart({ node, event, moveEvent }) {
+            if (this.locked || !this.nodesDraggable) return
+            this.isDraggingNode = true
+            this.draggingNodeId = node.id
+            this.dragStartPos = { x: event.clientX, y: event.clientY }
 
             // Cache start positions for drag
             const starts = {}
@@ -925,6 +957,12 @@ export default {
             }
 
             this.$emit('node-drag-start', { node, event })
+
+            //立即套用跨門檻的這一次mousemove: document層之onDocMouseMove於本輪事件已先看過
+            //(當時isDraggingNode仍為false而返回), 不補這一次則跨門檻後立刻放開將完全沒有位移
+            if (moveEvent && this.isDraggingNode) {
+                this.doDrag(moveEvent)
+            }
         },
         doDrag(event) {
             const zoom = this.viewport.zoom
@@ -1061,6 +1099,10 @@ export default {
 
         // --- Selection ---
         onNodeClick({ node, event }) {
+            //本次手勢已被接受為拖曳者不再視為點擊: NodeWrapper之@mouseup綁在節點元素上,
+            //必先於document層之onDocMouseUp→endDrag觸發, 故此刻isDraggingNode仍為true即代表拖曳成立。
+            //(涵蓋「跨門檻拖出後又移回原點放開」之情形——該情形最終位移為0, 僅靠距離判準無法辨識)
+            if (this.isDraggingNode) return
             if (!this.elementsSelectable) return
             if (this.isMultiSelectPressed) {
                 const idx = this.selectedNodes.indexOf(node.id)
@@ -1299,6 +1341,19 @@ export default {
         emitViewportChange() {
             this.$emit('viewport-change', { ...this.viewport })
         },
+        getViewport() {
+            //即時視口: viewport-change僅於手勢結束才發出, 平移途中呼叫端需要當下值時走此方法
+            //(呼叫端若以viewport-change快取之值為基準回寫setViewport, 會於平移途中以過期值覆寫使用者正在進行的平移)
+            let vp = this.viewport
+            return { x: vp.x, y: vp.y, zoom: vp.zoom }
+        },
+        cancelViewportAnimation() {
+            //取消進行中之視口動畫(panToNode), 否則動畫與手動手勢會同時寫入同一個viewport
+            if (this._panAnimId) {
+                cancelAnimationFrame(this._panAnimId)
+                this._panAnimId = null
+            }
+        },
         emitSelectionChange() {
             this.$emit('selection-change', this.getSelectedElements())
         },
@@ -1449,7 +1504,7 @@ export default {
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Sat Aug 22 2026 22:01:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Sun Aug 23 2026 15:03:25 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/components_ui_Controls.vue.html

@@ -265,7 +265,7 @@ export default {
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Sat Aug 22 2026 22:01:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Sun Aug 23 2026 15:03:25 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/examples/app.html

@@ -36,7 +36,7 @@
     
 
     <!-- app -->
-    <script src="app.umd.js?1787407269095"></script>
+    <script src="app.umd.js?1787468611978"></script>
 
 </head>
 <body style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;">