w-flow-vue 1.0.21 → 1.0.23

package/test/unit-graph.test.mjs

@@ -1,72 +1,72 @@
-import { isValidConnection, generateId, resetIdCounter } from '../src/js/graph'
-
-describe('graph', () => {
-    const conns = [
-        { id: 'e1-2', from: '1', to: '2' },
-        { id: 'e2-3', from: '2', to: '3' },
-        { id: 'e1-3', from: '1', to: '3' },
-    ]
-
-    const nodes = [
-        { id: '1', position: { x: 0, y: 0 } },
-        { id: '2', position: { x: 100, y: 0 } },
-        { id: '3', position: { x: 200, y: 0 } },
-    ]
-
-    describe('isValidConnection', () => {
-        test('valid connection returns true', () => {
-            const connection = { from: '1', to: '2' }
-            expect(isValidConnection(connection, nodes, [], null)).toBe(true)
-        })
-
-        test('self-connection returns false', () => {
-            const connection = { from: '1', to: '1' }
-            expect(isValidConnection(connection, nodes, [], null)).toBe(false)
-        })
-
-        test('duplicate connection returns false', () => {
-            const connection = { from: '1', to: '2' }
-            expect(isValidConnection(connection, nodes, conns, null)).toBe(false)
-        })
-
-        test('missing from returns false', () => {
-            expect(isValidConnection({ to: '1' }, nodes, [], null)).toBe(false)
-        })
-
-        test('missing to returns false', () => {
-            expect(isValidConnection({ from: '1' }, nodes, [], null)).toBe(false)
-        })
-
-        test('custom validator rejection', () => {
-            const connection = { from: '1', to: '3' }
-            const validator = () => false
-            expect(isValidConnection(connection, nodes, [], validator)).toBe(false)
-        })
-
-        test('custom validator approval', () => {
-            const connection = { from: '1', to: '3' }
-            const validator = () => true
-            expect(isValidConnection(connection, nodes, [], validator)).toBe(true)
-        })
-
-        test('same from-to pair is always duplicate', () => {
-            const existing = [{ id: 'e1-2', from: '1', to: '2' }]
-            const connection = { from: '1', to: '2' }
-            expect(isValidConnection(connection, nodes, existing, null)).toBe(false)
-        })
-    })
-
-    describe('generateId', () => {
-        beforeEach(() => resetIdCounter())
-
-        test('generates unique ids', () => {
-            const id1 = generateId()
-            const id2 = generateId()
-            expect(id1).not.toBe(id2)
-        })
-
-        test('returns string', () => {
-            expect(typeof generateId()).toBe('string')
-        })
-    })
-})
+//resetIdCounter 已自 graph.mjs 移除; generateId 以 Date.now()+內部counter+random 組成,
+//唯一性不依賴 counter 歸零, 故原斷言仍有效, 僅移除該前置
+import { isValidConnection, generateId } from '../src/js/graph'
+
+describe('graph', () => {
+    const conns = [
+        { id: 'e1-2', from: '1', to: '2' },
+        { id: 'e2-3', from: '2', to: '3' },
+        { id: 'e1-3', from: '1', to: '3' },
+    ]
+
+    const nodes = [
+        { id: '1', position: { x: 0, y: 0 } },
+        { id: '2', position: { x: 100, y: 0 } },
+        { id: '3', position: { x: 200, y: 0 } },
+    ]
+
+    describe('isValidConnection', () => {
+        test('valid connection returns true', () => {
+            const connection = { from: '1', to: '2' }
+            expect(isValidConnection(connection, nodes, [], null)).toBe(true)
+        })
+
+        test('self-connection returns false', () => {
+            const connection = { from: '1', to: '1' }
+            expect(isValidConnection(connection, nodes, [], null)).toBe(false)
+        })
+
+        test('duplicate connection returns false', () => {
+            const connection = { from: '1', to: '2' }
+            expect(isValidConnection(connection, nodes, conns, null)).toBe(false)
+        })
+
+        test('missing from returns false', () => {
+            expect(isValidConnection({ to: '1' }, nodes, [], null)).toBe(false)
+        })
+
+        test('missing to returns false', () => {
+            expect(isValidConnection({ from: '1' }, nodes, [], null)).toBe(false)
+        })
+
+        test('custom validator rejection', () => {
+            const connection = { from: '1', to: '3' }
+            const validator = () => false
+            expect(isValidConnection(connection, nodes, [], validator)).toBe(false)
+        })
+
+        test('custom validator approval', () => {
+            const connection = { from: '1', to: '3' }
+            const validator = () => true
+            expect(isValidConnection(connection, nodes, [], validator)).toBe(true)
+        })
+
+        test('same from-to pair is always duplicate', () => {
+            const existing = [{ id: 'e1-2', from: '1', to: '2' }]
+            const connection = { from: '1', to: '2' }
+            expect(isValidConnection(connection, nodes, existing, null)).toBe(false)
+        })
+    })
+
+    describe('generateId', () => {
+        test('generates unique ids', () => {
+            const id1 = generateId()
+            const id2 = generateId()
+            expect(id1).not.toBe(id2)
+        })
+
+        test('returns string', () => {
+            expect(typeof generateId()).toBe('string')
+        })
+    })
+})

package/test/unit-node-drag-gesture.test.mjs

@@ -0,0 +1,254 @@
+/**
+ * 節點 mousedown 拖曳武裝之修正驗收(缺陷 C)。
+ *
+ * 修正前:mousedown 當下即 emit drag-start,不分按鍵、無位移門檻,
+ *        故純點擊也會走完 endDrag → 回寫座標 → emit update:nodes,
+ *        宿主收到未變更之全量節點而誤判有未儲存變更。
+ */
+import { mount } from '@vue/test-utils'
+import WFlowVue from '../src/components/WFlowVue.vue'
+
+const sampleNodes = [
+    { id: '1', type: 'input', name: 'Node 1', position: { x: 50, y: 50 }, width: 100, height: 40 },
+    { id: '2', type: 'output', name: 'Node 2', position: { x: 300, y: 300 }, width: 100, height: 40 },
+]
+
+function createWrapper(optOverrides = {}) {
+    return mount(WFlowVue, {
+        propsData: {
+            opt: {
+                nodes: JSON.parse(JSON.stringify(sampleNodes)),
+                conns: [],
+                ...optOverrides,
+            },
+        },
+        attachTo: document.body,
+    })
+}
+
+const nodeEl = (w, id) => w.find(`.vue-flow__node[data-id="${id}"]`)
+
+//以真實 DOM 事件驅動:mousedown/mouseup 打在節點元素上, mousemove 打在 document(與實作註冊位置一致)
+function mouseDownOn(el, { x = 0, y = 0, button = 0 } = {}) {
+    el.element.dispatchEvent(new MouseEvent('mousedown', {
+        bubbles: true, clientX: x, clientY: y, button, buttons: button === 0 ? 1 : 2,
+    }))
+}
+function mouseMoveDoc({ x = 0, y = 0, buttons = 1 } = {}) {
+    document.dispatchEvent(new MouseEvent('mousemove', { bubbles: true, clientX: x, clientY: y, buttons }))
+}
+function mouseUpOn(el, { x = 0, y = 0 } = {}) {
+    //節點元素上放開:先觸發元素層之 onMouseUp, 冒泡後才到 document 之 onDocMouseUp
+    el.element.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, clientX: x, clientY: y, buttons: 0 }))
+}
+
+describe('純點擊不得走拖曳生命週期', () => {
+    test('點擊節點無位移: 不發 node-drag-start / node-drag-stop / update:nodes', async () => {
+        const w = createWrapper()
+        const n = nodeEl(w, '1')
+        mouseDownOn(n, { x: 100, y: 100 })
+        mouseUpOn(n, { x: 100, y: 100 })
+        await w.vm.$nextTick()
+        expect(w.emitted('node-drag-start')).toBeFalsy()
+        expect(w.emitted('node-drag-stop')).toBeFalsy()
+        expect(w.emitted('update:nodes')).toBeFalsy()
+        expect(w.emitted('node-click')).toBeTruthy()
+        w.destroy()
+    })
+
+    test('位移 2px(未跨門檻)後放開: 仍視為點擊', async () => {
+        const w = createWrapper()
+        const n = nodeEl(w, '1')
+        mouseDownOn(n, { x: 100, y: 100 })
+        mouseMoveDoc({ x: 102, y: 100 })
+        mouseUpOn(n, { x: 102, y: 100 })
+        await w.vm.$nextTick()
+        expect(w.emitted('node-drag-start')).toBeFalsy()
+        expect(w.emitted('update:nodes')).toBeFalsy()
+        expect(w.emitted('node-click')).toBeTruthy()
+        w.destroy()
+    })
+})
+
+describe('跨越位移門檻才啟動拖曳', () => {
+    test('位移超過 2px: node-drag-start 恰發一次', async () => {
+        const w = createWrapper()
+        const n = nodeEl(w, '1')
+        mouseDownOn(n, { x: 100, y: 100 })
+        mouseMoveDoc({ x: 110, y: 100 })
+        mouseMoveDoc({ x: 120, y: 100 })
+        mouseMoveDoc({ x: 130, y: 100 })
+        await w.vm.$nextTick()
+        expect(w.emitted('node-drag-start')).toHaveLength(1)
+        w.destroy()
+    })
+
+    test('跨門檻後立即放開: 節點仍套用該次位移(不得原地不動)', async () => {
+        const w = createWrapper()
+        const n = nodeEl(w, '1')
+        const x0 = w.vm.opt.nodes[0].position.x
+        mouseDownOn(n, { x: 100, y: 100 })
+        mouseMoveDoc({ x: 140, y: 100 })
+        mouseUpOn(n, { x: 140, y: 100 })
+        await w.vm.$nextTick()
+        expect(w.vm.opt.nodes[0].position.x).not.toBe(x0)
+        w.destroy()
+    })
+
+    test('跨門檻拖出後又移回原點放開: 不得再發 node-click', async () => {
+        const w = createWrapper()
+        const n = nodeEl(w, '1')
+        mouseDownOn(n, { x: 100, y: 100 })
+        mouseMoveDoc({ x: 140, y: 100 })
+        mouseMoveDoc({ x: 100, y: 100 })
+        mouseUpOn(n, { x: 100, y: 100 })
+        await w.vm.$nextTick()
+        expect(w.emitted('node-drag-start')).toHaveLength(1)
+        expect(w.emitted('node-click')).toBeFalsy()
+        w.destroy()
+    })
+})
+
+describe('非主鍵不啟動拖曳', () => {
+    test('右鍵按於節點: 不發 drag-start 與 node-click', async () => {
+        const w = createWrapper()
+        const n = nodeEl(w, '1')
+        mouseDownOn(n, { x: 100, y: 100, button: 2 })
+        mouseMoveDoc({ x: 140, y: 100, buttons: 2 })
+        mouseUpOn(n, { x: 140, y: 100 })
+        await w.vm.$nextTick()
+        expect(w.emitted('node-drag-start')).toBeFalsy()
+        expect(w.emitted('node-click')).toBeFalsy()
+        w.destroy()
+    })
+
+    test('中鍵按於節點: 不發 drag-start', async () => {
+        const w = createWrapper()
+        const n = nodeEl(w, '1')
+        mouseDownOn(n, { x: 100, y: 100, button: 1 })
+        mouseMoveDoc({ x: 140, y: 100, buttons: 4 })
+        await w.vm.$nextTick()
+        expect(w.emitted('node-drag-start')).toBeFalsy()
+        w.destroy()
+    })
+})
+
+describe('mouseup 遺失後不得幽靈拖曳', () => {
+    test('主鍵已放開(buttons=0)之 mousemove 不得跨門檻啟動拖曳', async () => {
+        const w = createWrapper()
+        const n = nodeEl(w, '1')
+        mouseDownOn(n, { x: 100, y: 100 })
+        //模擬使用者在視窗外放開:document 收不到 mouseup, 回到視窗後移動時 buttons 已為 0
+        mouseMoveDoc({ x: 300, y: 300, buttons: 0 })
+        mouseMoveDoc({ x: 400, y: 400, buttons: 0 })
+        await w.vm.$nextTick()
+        expect(w.emitted('node-drag-start')).toBeFalsy()
+        expect(w.vm.isDraggingNode).toBe(false)
+        w.destroy()
+    })
+})
+
+describe('不可拖節點之點擊判準不受影響', () => {
+    test('nodesDraggable=false 時移動 4px 放開: 不得發 node-click(距離判準仍在)', async () => {
+        const w = createWrapper({ nodesDraggable: false })
+        const n = nodeEl(w, '1')
+        mouseDownOn(n, { x: 100, y: 100 })
+        mouseMoveDoc({ x: 104, y: 100 })
+        mouseUpOn(n, { x: 104, y: 100 })
+        await w.vm.$nextTick()
+        expect(w.emitted('node-drag-start')).toBeFalsy()
+        expect(w.emitted('node-click')).toBeFalsy()
+        w.destroy()
+    })
+
+    test('nodesDraggable=false 時原地點擊: node-click 照常發出', async () => {
+        const w = createWrapper({ nodesDraggable: false })
+        const n = nodeEl(w, '1')
+        mouseDownOn(n, { x: 100, y: 100 })
+        mouseUpOn(n, { x: 100, y: 100 })
+        await w.vm.$nextTick()
+        expect(w.emitted('node-click')).toBeTruthy()
+        w.destroy()
+    })
+})
+
+describe('選取時機不因拖曳延後而改變', () => {
+    test('selectNodesOnDrag=true: mousedown 當下即選取(不必等 mouseup)', async () => {
+        const w = createWrapper()
+        const n = nodeEl(w, '2')
+        mouseDownOn(n, { x: 100, y: 100 })
+        await w.vm.$nextTick()
+        expect(w.vm.selectedNodes).toContain('2')
+        w.destroy()
+    })
+
+    test('locked=true: mousedown 不選取亦不啟動拖曳', async () => {
+        const w = createWrapper({ locked: true })
+        const n = nodeEl(w, '2')
+        mouseDownOn(n, { x: 100, y: 100 })
+        mouseMoveDoc({ x: 140, y: 100 })
+        await w.vm.$nextTick()
+        expect(w.emitted('node-drag-start')).toBeFalsy()
+        expect(w.vm.selectedNodes).not.toContain('2')
+        w.destroy()
+    })
+})
+
+describe('元件銷毀時清理 document 監聽器', () => {
+    test('拖曳進行中銷毀: 後續 mousemove 不得再觸發任何 emit', async () => {
+        const w = createWrapper()
+        const n = nodeEl(w, '1')
+        mouseDownOn(n, { x: 100, y: 100 })
+        const addSpy = jest.spyOn(document, 'removeEventListener')
+        w.destroy()
+        const removed = addSpy.mock.calls.filter(c => c[0] === 'mousemove' || c[0] === 'mouseup')
+        expect(removed.length).toBeGreaterThan(0)
+        addSpy.mockRestore()
+    })
+})
+
+describe('resize 手勢收尾: 全域游標樣式不得殘留', () => {
+    //why: onResizeStart 會往 document.head 插入 `* { cursor: X !important; }`,
+    //     原本只在自身之 document mouseup 移除; 若元件於 resize 中被銷毀或視窗失焦後於視窗外放開,
+    //     該樣式會永久殘留, 使整頁每個元素卡在 resize 游標直到重新整理
+    const cursorStyles = () => Array.from(document.head.querySelectorAll('style'))
+        .filter(s => /\*\s*\{\s*cursor:/.test(s.textContent || ''))
+
+    const startResize = (w) => {
+        const nw = w.findComponent({ name: 'NodeWrapper' })
+        nw.vm.onResizeStart({ clientX: 0, clientY: 0, preventDefault() {}, stopPropagation() {} }, 'bottom-right')
+        return nw
+    }
+
+    test('resize 進行中銷毀元件: 全域游標樣式須被移除', () => {
+        const w = createWrapper()
+        const n0 = cursorStyles().length
+        startResize(w)
+        expect(cursorStyles()).toHaveLength(n0 + 1)
+        w.destroy()
+        expect(cursorStyles()).toHaveLength(n0)
+    })
+
+    test('resize 進行中視窗失焦: 全域游標樣式須被移除', () => {
+        const w = createWrapper()
+        const n0 = cursorStyles().length
+        startResize(w)
+        expect(cursorStyles()).toHaveLength(n0 + 1)
+        window.dispatchEvent(new Event('blur'))
+        expect(cursorStyles()).toHaveLength(n0)
+        w.destroy()
+    })
+
+    test('正常 mouseup 收尾: 樣式移除且發出 node-resize-end 恰一次', () => {
+        const w = createWrapper()
+        const n0 = cursorStyles().length
+        const nw = startResize(w)
+        document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, buttons: 0 }))
+        expect(cursorStyles()).toHaveLength(n0)
+        expect(nw.emitted('node-resize-end')).toHaveLength(1)
+        //收尾後再來一次 mouseup 不得重複發出
+        document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, buttons: 0 }))
+        expect(nw.emitted('node-resize-end')).toHaveLength(1)
+        w.destroy()
+    })
+})