w-flow-vue 1.0.21 → 1.0.23

package/docs/examples/ex-AppBasic.html

@@ -43,7 +43,7 @@
     />
 
     <!-- w-flow-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-flow-vue@1.0.21/dist/w-flow-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-flow-vue@1.0.23/dist/w-flow-vue.umd.js"></script>
 
     <!-- lodash -->
     <script src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>

package/docs/examples/ex-AppConnectivity.html

@@ -43,7 +43,7 @@
     />
 
     <!-- w-flow-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-flow-vue@1.0.21/dist/w-flow-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-flow-vue@1.0.23/dist/w-flow-vue.umd.js"></script>
 
     <!-- lodash -->
     <script src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>

package/docs/global.html

@@ -2354,7 +2354,7 @@ Used when nodes are too close for OrthConnector (tooShort).</p></li></ul></dd>
 <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/index.html

@@ -71,7 +71,7 @@
 <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/js_defaults.mjs.html

@@ -92,7 +92,7 @@ export const CONN_DEFAULTS = {
 <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/js_edgePath.mjs.html

@@ -342,7 +342,7 @@ function labelAtHalfLength(pts) {
 <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/js_fixSvgNs.mjs.html

@@ -85,7 +85,7 @@ export default fixSvgNs
 <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/js_geometry.mjs.html

@@ -285,7 +285,7 @@ export function snapPosition(position, gridSize) {
 <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/js_graph.mjs.html

@@ -96,7 +96,7 @@ export function generateId() {
 <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/js_stepRouting.mjs.html

@@ -333,7 +333,7 @@ function segmentFallback(sx, sy, tx, ty, sObs, tObs) {
 <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/module-WFlowVue.html

@@ -4186,7 +4186,7 @@ Any value of the wrong type (or an empty string) falls back to the default liste
 <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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "w-flow-vue",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "main": "dist/w-flow-vue.umd.js",
   "dependencies": {
     "w-component-vue": "^2.5.2",

package/src/components/WFlowVue.vue

@@ -74,6 +74,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"
@@ -377,6 +378,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) {
@@ -387,6 +389,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() {
@@ -766,6 +769,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
@@ -789,6 +794,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)
             }
@@ -802,6 +815,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()
@@ -819,6 +845,8 @@ export default {
 
         // --- Pan ---
         startPan(event) {
+            //手動平移優先於程式動畫, 否則二者同時寫viewport而互相覆寫
+            this.cancelViewportAnimation()
             this.isPanning = true
             this.panStartPos = { x: event.clientX, y: event.clientY }
         },
@@ -846,16 +874,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 = {}
@@ -878,6 +910,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
@@ -1014,6 +1052,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)
@@ -1252,6 +1294,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())
         },

package/src/components/nodes/NodeRenderer.vue

@@ -21,6 +21,7 @@
       :snap-grid-size="snapGridSize"
       :settings-enabled="settingsEnabled"
       :settings-excludes="settingsExcludes"
+      @drag-prepare="$emit('drag-prepare', $event)"
       @drag-start="$emit('drag-start', $event)"
       @node-click="$emit('node-click', $event)"
       @node-double-click="$emit('node-double-click', $event)"

package/src/components/nodes/NodeWrapper.vue

@@ -208,6 +208,12 @@ export default {
     updated() {
         this.reportDimensions()
     },
+    beforeDestroy() {
+        //拖曳/縮放進行中被銷毀時, 掛在document上的監聽器與插入document.head之全域游標樣式
+        //都不會自行移除, 於此一併收尾
+        this.endMouseGesture(false)
+        this.endResizeGesture(false)
+    },
     methods: {
         reportDimensions() {
             if (!this.$el) return
@@ -218,13 +224,57 @@ export default {
             this.cachedH = h
             this.$emit('dimensions', { nodeId: this.node.id, width: w, height: h })
         },
+        //收掉本次mousedown手勢之document監聽與暫存態; restorePopup=false供beforeDestroy使用(元件將銷毀不需再排程還原)
+        endMouseGesture(restorePopup = true) {
+            const g = this._mouseGesture
+            if (!g) return
+            this._mouseGesture = null
+            this._mouseDownPos = null
+            document.removeEventListener('mousemove', g.onDragMove)
+            document.removeEventListener('mouseup', g.onDragEnd)
+            window.removeEventListener('blur', g.onDragEnd)
+            if (restorePopup && !this.infoPopupEditable) {
+                setTimeout(() => {
+                    this.infoPopupEditable = true
+                }, 0)
+            }
+        },
+        //收掉本次resize手勢之document監聽與插入document.head之全域游標樣式;
+        //回傳是否確實收到一個進行中之手勢(供onMouseUp判斷該不該再發node-resize-end)
+        //why: 全域樣式為`* { cursor: X !important; }`, 若因元件銷毀或視窗外放開而未移除,
+        //     整頁每個元素都會卡在該游標直到重新整理(已於jsdom確定性重現: 銷毀後樣式仍留在head)
+        endResizeGesture(restorePopup = true) {
+            const g = this._resizeGesture
+            if (!g) return false
+            this._resizeGesture = null
+            document.removeEventListener('mousemove', g.onMouseMove)
+            document.removeEventListener('mouseup', g.onMouseUp)
+            window.removeEventListener('blur', g.onMouseUp)
+            if (g.cursorStyle && g.cursorStyle.parentNode) {
+                g.cursorStyle.parentNode.removeChild(g.cursorStyle)
+            }
+            if (restorePopup) {
+                setTimeout(() => {
+                    this.infoPopupEditable = true
+                }, 0)
+            }
+            return true
+        },
         onMouseDown(event) {
+            //新手勢開始前先收掉上一次殘留者(如上次mouseup落在視窗外未送達document), 避免監聽器疊加
+            this.endMouseGesture()
             //點設定齒輪(及其popup錨區)不啟動節點拖曳/點擊: 齒輪刻意不用@mousedown.stop(stopPropagation會擋掉window層WPopup互斥協調),
             //故於此明確排除, 使點齒輪只開設定popup、不移動節點座標(避免尚未變更設定就先改到座標→誤觸發變更儲存)
             if (event.target.closest && event.target.closest('.vue-flow__node-settings-anchor')) {
                 this._mouseDownPos = null
                 return
             }
+            //非主鍵(右鍵/中鍵)不啟動拖曳與點擊: 判準對齊畫布平移之onCanvasMouseDown(event.button === 0),
+            //使同套件內「按下開始拖動」採同一套判準; contextmenu走@contextmenu.stop另一條路徑不受影響
+            if (event.button !== 0) {
+                this._mouseDownPos = null
+                return
+            }
             this._mouseDownPos = { x: event.clientX, y: event.clientY }
             if (!this.draggable) return
             if (this.node.dragHandle) {
@@ -232,26 +282,40 @@ export default {
                 if (!handle) return
             }
             this.infoPopupShow = false
-            this.$emit('drag-start', { node: this.node, event })
+            //選取仍於mousedown完成(與修正前一致): 拖曳延後但選取不可延後,
+            //否則按住節點未移動時, 原本立即出現的選取回饋會拖到mouseup才出現
+            this.$emit('drag-prepare', { node: this.node, event })
             const startX = event.clientX
             const startY = event.clientY
-            const onDragMove = (e) => {
+            const gesture = { crossed: false, onDragMove: null, onDragEnd: null }
+            gesture.onDragMove = (e) => {
+                //mouseup落在視窗外時不會送達document, 監聽器會殘留;
+                //此處確認主鍵仍按著, 否則於無按鍵狀態下跨門檻會誤啟動拖曳(幽靈拖曳)
+                if ((e.buttons & 1) === 0) {
+                    this.endMouseGesture()
+                    return
+                }
+                if (gesture.crossed) return
                 if (Math.abs(e.clientX - startX) > 2 || Math.abs(e.clientY - startY) > 2) {
+                    gesture.crossed = true
                     this.infoPopupEditable = false
-                    document.removeEventListener('mousemove', onDragMove)
+                    //拖曳延後至跨越位移門檻才啟動
+                    //why: 若於mousedown即emit drag-start, 無位移之純點擊於mouseup仍會走endDrag→回寫座標→emit update:nodes,
+                    //     宿主收到未變更之全量節點而誤判有未儲存變更
+                    //event傳原始mousedown事件, 使WFlowVue之dragStartPos取按下當下座標(改傳本次mousemove會少算門檻位移);
+                    //moveEvent供WFlowVue於啟動當下立即補跑一次doDrag, 否則跨門檻後立刻放開會完全沒有位移
+                    this.$emit('drag-start', { node: this.node, event, moveEvent: e })
                 }
+                //刻意不移除mousemove: 後續仍需靠它做buttons清理, crossed旗標已保證不會重複啟動
             }
-            const onDragEnd = () => {
-                document.removeEventListener('mousemove', onDragMove)
-                document.removeEventListener('mouseup', onDragEnd)
-                if (!this.infoPopupEditable) {
-                    setTimeout(() => {
-                        this.infoPopupEditable = true
-                    }, 0)
-                }
+            gesture.onDragEnd = () => {
+                this.endMouseGesture()
             }
-            document.addEventListener('mousemove', onDragMove)
-            document.addEventListener('mouseup', onDragEnd)
+            this._mouseGesture = gesture
+            document.addEventListener('mousemove', gesture.onDragMove)
+            document.addEventListener('mouseup', gesture.onDragEnd)
+            //視窗失焦後收不到mouseup, 本地監聽與popup態同樣需收尾(WFlowVue之onWindowBlur只收父層狀態)
+            window.addEventListener('blur', gesture.onDragEnd)
         },
         onMouseUp(event) {
             if (!this._mouseDownPos) return
@@ -376,12 +440,7 @@ export default {
             let lastY = startPosY
 
             const onMouseUp = () => {
-                document.removeEventListener('mousemove', onMouseMove)
-                document.removeEventListener('mouseup', onMouseUp)
-                document.head.removeChild(cursorStyle)
-                setTimeout(() => {
-                    this.infoPopupEditable = true
-                }, 0)
+                if (!this.endResizeGesture()) return
                 this.$emit('node-resize-end', {
                     nodeId: this.node.id,
                     width: lastW,
@@ -391,8 +450,11 @@ export default {
                 })
             }
 
+            this._resizeGesture = { onMouseMove, onMouseUp, cursorStyle }
             document.addEventListener('mousemove', onMouseMove)
             document.addEventListener('mouseup', onMouseUp)
+            //視窗失焦後收不到mouseup, 全域游標樣式與監聽器同樣需收尾
+            window.addEventListener('blur', onMouseUp)
         },
     },
 }

package/test/unit-WFlowVue-features.test.mjs

@@ -122,10 +122,12 @@ describe('ConnSettingsForm', () => {
 })
 
 // 3. Node Resize
+//縮放ghost已由獨立之 resizeOverlay 改為併入 dragPositions 之 per-key 機制(WFlowVue.onNodeResize),
+//斷言意圖不變: 縮放中ghost帶有該次尺寸/座標, 結束或被鎖定時不留ghost
 describe('Node Resize', () => {
     test('onNodeResize sets overlay', () => {
         const w = createWrapper(); w.vm.onNodeResize({ nodeId: '1', width: 200, height: 80, x: 50, y: 50 })
-        expect(w.vm.resizeOverlay).toEqual({ id: '1', width: 200, height: 80, x: 50, y: 50 }); w.destroy()
+        expect(w.vm.dragPositions['1']).toEqual({ x: 50, y: 50, width: 200, height: 80 }); w.destroy()
     })
     test('onNodeResizeEnd updates node', () => {
         const w = createWrapper()
@@ -134,12 +136,12 @@ describe('Node Resize', () => {
         const n = w.vm.nodeById('1')
         expect(n.width).toBe(200); expect(n.height).toBe(80)
         expect(n.position.x).toBe(60); expect(n.position.y).toBe(70)
-        expect(w.vm.resizeOverlay).toBeNull(); w.destroy()
+        expect(w.vm.dragPositions['1']).toBeNull(); w.destroy()
     })
     test('blocked when locked', () => {
         const w = createWrapper(); w.vm.toggleInteractive()
         w.vm.onNodeResize({ nodeId: '1', width: 200, height: 80, x: 50, y: 50 })
-        expect(w.vm.resizeOverlay).toBeNull(); w.destroy()
+        expect(w.vm.dragPositions['1']).toBeFalsy(); w.destroy()
     })
     test('emits nodes-change', () => {
         const w = createWrapper()
@@ -350,8 +352,8 @@ describe('Snap-to-Grid integration', () => {
         const w = createWrapper({ snapToGrid: false })
         // Directly call onNodeResize with non-round values
         w.vm.onNodeResize({ nodeId: '1', width: 137, height: 63, x: 51, y: 49 })
-        expect(w.vm.resizeOverlay.width).toBe(137)
-        expect(w.vm.resizeOverlay.height).toBe(63)
+        expect(w.vm.dragPositions['1'].width).toBe(137)
+        expect(w.vm.dragPositions['1'].height).toBe(63)
         w.destroy()
     })
     test('snapGridSize passed to NodeRenderer', () => {
@@ -434,7 +436,7 @@ describe('onDocMouseMove dispatching', () => {
         const w = createWrapper()
         w.vm.viewport = { x: 0, y: 0, zoom: 1 }
         w.vm.startPan({ clientX: 100, clientY: 100 })
-        w.vm.onDocMouseMove({ clientX: 150, clientY: 120 })
+        w.vm.onDocMouseMove({ clientX: 150, clientY: 120, buttons: 1 })
         expect(w.vm.viewport.x).toBe(50)
         expect(w.vm.viewport.y).toBe(20)
         w.destroy()
@@ -443,7 +445,7 @@ describe('onDocMouseMove dispatching', () => {
         const w = createWrapper()
         w.vm.$refs.canvas = { getContainerRect: () => ({ left: 0, top: 0, width: 800, height: 600 }) }
         w.vm.startSelection({ clientX: 100, clientY: 100 })
-        w.vm.onDocMouseMove({ clientX: 200, clientY: 200 })
+        w.vm.onDocMouseMove({ clientX: 200, clientY: 200, buttons: 1 })
         expect(w.vm.selectionBox.width).toBe(100)
         expect(w.vm.selectionBox.height).toBe(100)
         w.destroy()
@@ -451,7 +453,7 @@ describe('onDocMouseMove dispatching', () => {
     test('does nothing when idle', () => {
         const w = createWrapper()
         w.vm.viewport = { x: 0, y: 0, zoom: 1 }
-        w.vm.onDocMouseMove({ clientX: 200, clientY: 200 })
+        w.vm.onDocMouseMove({ clientX: 200, clientY: 200, buttons: 1 })
         expect(w.vm.viewport.x).toBe(0)
         w.destroy()
     })