w-flow-vue 1.0.0

package/test/generate-visual-baselines.mjs

@@ -0,0 +1,206 @@
+/**
+ * Generate visual baseline screenshots for regression testing.
+ * Requires: npm run serve (http://localhost:8080) running
+ * Usage: node test/generate-visual-baselines.mjs
+ */
+import { chromium } from 'playwright'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const outDir = path.join(__dirname, 'pics')
+
+const VW = 1280
+const VH = 900
+
+/** Clip a region around a bounding box with padding, clamped to viewport */
+function clipAround(box, pad) {
+    let x = Math.max(0, Math.floor(box.x - pad))
+    let y = Math.max(0, Math.floor(box.y - pad))
+    let w = Math.min(Math.ceil(box.width + pad * 2), VW - x)
+    let h = Math.min(Math.ceil(box.height + pad * 2), VH - y)
+    if (w < 1 || h < 1) return null
+    return { x, y, width: w, height: h }
+}
+
+/** Center viewport on a node by its data id */
+function centerOnNode(page, nodeId) {
+    return page.evaluate((id) => {
+        let vm
+        for (let el of document.querySelectorAll('*')) {
+            if (el.__vue__ && el.__vue__.setViewport) { vm = el.__vue__; break }
+        }
+        if (!vm) return false
+        let n = vm.nodes.find(n => n.id === id)
+        if (!n) return false
+        let cw = vm.widthInp, ch = vm.heightInp
+        let w = n.width || 100, h = n.height || 40
+        vm.setViewport({ x: cw / 2 - (n.position.x + w / 2), y: ch / 2 - (n.position.y + h / 2), zoom: 1 })
+        return true
+    }, nodeId)
+}
+
+/** Reset viewport to origin */
+function resetViewport(page) {
+    return page.evaluate(() => {
+        for (let el of document.querySelectorAll('*')) {
+            if (el.__vue__ && el.__vue__.setViewport) {
+                el.__vue__.setViewport({ x: 0, y: 0, zoom: 1 })
+                return
+            }
+        }
+    })
+}
+
+/** fitView to show all nodes */
+function fitView(page) {
+    return page.evaluate(() => {
+        for (let el of document.querySelectorAll('*')) {
+            if (el.__vue__ && el.__vue__.fitView) { el.__vue__.fitView(30); return }
+        }
+    })
+}
+
+/** Get the canvas container clip region */
+function getCanvasClip(page) {
+    return page.evaluate(() => {
+        let el = document.querySelector('.vue-flow__viewport')
+        if (!el) return null
+        let container = el.closest('[style*="height"]')
+        if (!container) return null
+        let rect = container.getBoundingClientRect()
+        return { x: Math.floor(rect.x), y: Math.floor(rect.y), width: Math.ceil(rect.width), height: Math.ceil(rect.height) }
+    })
+}
+
+async function run() {
+    const browser = await chromium.launch()
+    const page = await browser.newPage({ viewport: { width: VW, height: VH } })
+    await page.goto('http://localhost:8080')
+    await page.waitForTimeout(2000)
+
+    const pad = 60
+
+    // 1. Overview — fitView to show all nodes
+    await fitView(page)
+    await page.waitForTimeout(500)
+    let canvasClip = await getCanvasClip(page)
+    await page.screenshot({ path: path.join(outDir, 'vb-overview.png'), clip: canvasClip })
+
+    // 2. Each node — center on node, clip with padding (includes surrounding edges)
+    let nodes = await page.$$('.vue-flow__node')
+    for (const node of nodes) {
+        const id = await node.getAttribute('data-id')
+        if (!id) continue
+        await centerOnNode(page, id)
+        await page.waitForTimeout(300)
+        let box = await node.boundingBox()
+        if (!box) continue
+        let clip = clipAround(box, pad)
+        if (!clip) continue
+        await page.screenshot({ path: path.join(outDir, `vb-node-${id}.png`), clip })
+    }
+
+    // 3. Node hovered (first node) — resize handles + settings icon
+    let firstNode = nodes[0]
+    let firstId = firstNode ? await firstNode.getAttribute('data-id') : null
+    if (firstNode && firstId) {
+        await centerOnNode(page, firstId)
+        await page.waitForTimeout(300)
+        let box = await firstNode.boundingBox()
+        await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2)
+        await page.waitForTimeout(500)
+        box = await firstNode.boundingBox()
+        await page.screenshot({ path: path.join(outDir, 'vb-node-hovered.png'), clip: clipAround(box, pad) })
+        await page.mouse.move(0, 0)
+        await page.waitForTimeout(300)
+    }
+
+    // 4. Node selected (click first node)
+    if (firstNode && firstId) {
+        await centerOnNode(page, firstId)
+        await page.waitForTimeout(300)
+        await firstNode.click()
+        await page.waitForTimeout(300)
+        let box = await firstNode.boundingBox()
+        await page.screenshot({ path: path.join(outDir, 'vb-node-selected.png'), clip: clipAround(box, pad) })
+        await page.mouse.click(10, 10)
+        await page.waitForTimeout(300)
+    }
+
+    // 5. Edge hovered — settings icon
+    await resetViewport(page)
+    await page.waitForTimeout(300)
+    let edges = await page.$$('.vue-flow__edge-interaction')
+    if (edges.length > 0) {
+        let box = await edges[0].boundingBox()
+        if (box) {
+            await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2)
+            await page.waitForTimeout(500)
+            box = await edges[0].boundingBox()
+            await page.screenshot({ path: path.join(outDir, 'vb-edge-hovered.png'), clip: clipAround(box, 40) })
+            await page.mouse.move(0, 0)
+            await page.waitForTimeout(300)
+        }
+    }
+
+    // 6. Edges normal (overview, no hover)
+    await fitView(page)
+    await page.waitForTimeout(500)
+    await page.screenshot({ path: path.join(outDir, 'vb-edges-normal.png'), clip: canvasClip })
+
+    // ===== LOCKED STATE =====
+    let lockBtn = await page.$('.vue-flow__controls button[title="Lock"]')
+    if (lockBtn) {
+        await lockBtn.click()
+        await page.waitForTimeout(500)
+    }
+
+    // 7. Locked overview
+    await page.screenshot({ path: path.join(outDir, 'vb-locked-overview.png'), clip: canvasClip })
+
+    // 8. Locked node hovered — no resize handles, no settings icon, no handles
+    if (firstNode && firstId) {
+        await centerOnNode(page, firstId)
+        await page.waitForTimeout(300)
+        let box = await firstNode.boundingBox()
+        await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2)
+        await page.waitForTimeout(500)
+        box = await firstNode.boundingBox()
+        await page.screenshot({ path: path.join(outDir, 'vb-locked-node-hovered.png'), clip: clipAround(box, pad) })
+        await page.mouse.move(0, 0)
+        await page.waitForTimeout(300)
+    }
+
+    // 9. Locked node selected
+    if (firstNode && firstId) {
+        await centerOnNode(page, firstId)
+        await page.waitForTimeout(300)
+        await firstNode.click()
+        await page.waitForTimeout(300)
+        let box = await firstNode.boundingBox()
+        await page.screenshot({ path: path.join(outDir, 'vb-locked-node-selected.png'), clip: clipAround(box, pad) })
+        await page.mouse.click(10, 10)
+        await page.waitForTimeout(300)
+    }
+
+    // 10. Locked edge hovered — no settings icon
+    await resetViewport(page)
+    await page.waitForTimeout(300)
+    if (edges.length > 0) {
+        let box = await edges[0].boundingBox()
+        if (box) {
+            await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2)
+            await page.waitForTimeout(500)
+            box = await edges[0].boundingBox()
+            await page.screenshot({ path: path.join(outDir, 'vb-locked-edge-hovered.png'), clip: clipAround(box, 40) })
+            await page.mouse.move(0, 0)
+            await page.waitForTimeout(300)
+        }
+    }
+
+    console.log('Visual baselines generated in test/pics/')
+    await browser.close()
+}
+
+run().catch(e => { console.error(e); process.exit(1) })

package/test/geometry.test.mjs

@@ -0,0 +1,236 @@
+import {
+    getHandlePosition,
+    getDiamondEdgePoint, getEllipseEdgePoint, getTriangleEdgePoint,
+    getOverlappingNodes,
+    clampPosition, snapPosition, rectsOverlap
+} from '../src/js/geometry'
+
+describe('geometry', () => {
+    const node = { id: '1', position: { x: 100, y: 50 }, width: 150, height: 40 }
+
+    describe('getHandlePosition', () => {
+        test('top handle is at top center', () => {
+            const pos = getHandlePosition(node, 'top', {})
+            expect(pos).toEqual({ x: 175, y: 50 })
+        })
+
+        test('bottom handle is at bottom center', () => {
+            const pos = getHandlePosition(node, 'bottom', {})
+            expect(pos).toEqual({ x: 175, y: 90 })
+        })
+
+        test('left handle is at left center', () => {
+            const pos = getHandlePosition(node, 'left', {})
+            expect(pos).toEqual({ x: 100, y: 70 })
+        })
+
+        test('right handle is at right center', () => {
+            const pos = getHandlePosition(node, 'right', {})
+            expect(pos).toEqual({ x: 250, y: 70 })
+        })
+
+        test('uses nodeInternals dimensions if provided', () => {
+            const pos = getHandlePosition(
+                { id: '1', position: { x: 0, y: 0 } },
+                'bottom',
+                { width: 200, height: 60 }
+            )
+            expect(pos).toEqual({ x: 100, y: 60 })
+        })
+
+        test('defaults to 150x40 if no dimensions', () => {
+            const pos = getHandlePosition({ id: '1', position: { x: 0, y: 0 } }, 'bottom', {})
+            expect(pos).toEqual({ x: 75, y: 40 })
+        })
+    })
+
+    describe('getHandlePosition — diamond', () => {
+        const diamond = { id: 'd', position: { x: 0, y: 0 }, width: 100, height: 100, shape: 'diamond', type: 'input' }
+
+        test('top handle is at top vertex', () => {
+            const pos = getHandlePosition(diamond, 'top', {})
+            expect(pos.x).toBe(50)
+            expect(pos.y).toBe(0)
+        })
+
+        test('bottom handle is at bottom vertex', () => {
+            const pos = getHandlePosition(diamond, 'bottom', {})
+            expect(pos.x).toBe(50)
+            expect(pos.y).toBe(100)
+        })
+    })
+
+    describe('getHandlePosition — ellipse', () => {
+        const ellipse = { id: 'e', position: { x: 0, y: 0 }, width: 200, height: 100, shape: 'ellipse', type: 'input' }
+
+        test('right handle is at rightmost point', () => {
+            const pos = getHandlePosition(ellipse, 'right', {})
+            expect(pos.x).toBeCloseTo(200, 0)
+            expect(pos.y).toBeCloseTo(50, 0)
+        })
+
+        test('left handle is at leftmost point', () => {
+            const pos = getHandlePosition(ellipse, 'left', {})
+            expect(pos.x).toBeCloseTo(0, 0)
+            expect(pos.y).toBeCloseTo(50, 0)
+        })
+
+        test('top handle is at topmost point', () => {
+            const pos = getHandlePosition(ellipse, 'top', {})
+            expect(pos.x).toBeCloseTo(100, 0)
+            expect(pos.y).toBeCloseTo(0, 0)
+        })
+    })
+
+    describe('getHandlePosition — triangle', () => {
+        const tri = { id: 't', position: { x: 0, y: 0 }, width: 100, height: 100, shape: 'triangle', type: 'input' }
+
+        test('top handle (apex) is at top center', () => {
+            const pos = getHandlePosition(tri, 'top', {})
+            expect(pos.x).toBeCloseTo(50, 0)
+            expect(pos.y).toBeCloseTo(0, 0)
+        })
+
+        test('bottom handle (base) is at bottom midpoint', () => {
+            const pos = getHandlePosition(tri, 'bottom', {})
+            expect(pos.x).toBe(50)
+            expect(pos.y).toBe(100)
+        })
+    })
+
+    describe('getDiamondEdgePoint', () => {
+        test('ratio 0 returns left vertex for top side', () => {
+            const p = getDiamondEdgePoint(0, 0, 100, 100, 'top', 0)
+            expect(p.x).toBeCloseTo(0, 0)
+            expect(p.y).toBeCloseTo(50, 0)
+        })
+
+        test('ratio 0.5 returns top vertex for top side', () => {
+            const p = getDiamondEdgePoint(0, 0, 100, 100, 'top', 0.5)
+            expect(p.x).toBeCloseTo(50, 0)
+            expect(p.y).toBeCloseTo(0, 0)
+        })
+
+        test('ratio 1 returns right vertex for top side', () => {
+            const p = getDiamondEdgePoint(0, 0, 100, 100, 'top', 1)
+            expect(p.x).toBeCloseTo(100, 0)
+            expect(p.y).toBeCloseTo(50, 0)
+        })
+    })
+
+    describe('getEllipseEdgePoint', () => {
+        test('top side ratio 0.5 returns top vertex', () => {
+            const p = getEllipseEdgePoint(0, 0, 200, 100, 'top', 0.5)
+            expect(p.x).toBeCloseTo(100, 0)
+            expect(p.y).toBeCloseTo(0, 0)
+        })
+
+        test('right side ratio 0.5 returns right vertex', () => {
+            const p = getEllipseEdgePoint(0, 0, 200, 100, 'right', 0.5)
+            expect(p.x).toBeCloseTo(200, 0)
+            expect(p.y).toBeCloseTo(50, 0)
+        })
+
+        test('returns point on ellipse boundary', () => {
+            const cx = 100; const cy = 50; const rx = 100; const ry = 50
+            const p = getEllipseEdgePoint(0, 0, 200, 100, 'top', 0.3)
+            const dx = (p.x - cx) / rx
+            const dy = (p.y - cy) / ry
+            expect(dx * dx + dy * dy).toBeCloseTo(1, 1)
+        })
+    })
+
+    describe('getTriangleEdgePoint', () => {
+        test('apex side ratio 0.5 returns apex for triangle-up', () => {
+            const p = getTriangleEdgePoint(0, 0, 100, 100, 'top', 0.5, 'triangle')
+            expect(p.x).toBeCloseTo(50, 0)
+            expect(p.y).toBeCloseTo(0, 0)
+        })
+
+        test('base side returns linear interpolation', () => {
+            const p0 = getTriangleEdgePoint(0, 0, 100, 100, 'bottom', 0, 'triangle')
+            const p1 = getTriangleEdgePoint(0, 0, 100, 100, 'bottom', 1, 'triangle')
+            expect(p0.x).toBeCloseTo(0, 0)
+            expect(p1.x).toBeCloseTo(100, 0)
+            expect(p0.y).toBe(p1.y)
+        })
+
+        test('triangle-right apex is at right edge', () => {
+            const p = getTriangleEdgePoint(0, 0, 100, 100, 'right', 0.5, 'triangle-right')
+            expect(p.x).toBeCloseTo(100, 0)
+            expect(p.y).toBeCloseTo(50, 0)
+        })
+
+        test('triangle-down apex is at bottom center', () => {
+            const p = getTriangleEdgePoint(0, 0, 100, 100, 'bottom', 0.5, 'triangle-down')
+            expect(p.x).toBeCloseTo(50, 0)
+            expect(p.y).toBeCloseTo(100, 0)
+        })
+
+        test('triangle-left apex is at left edge', () => {
+            const p = getTriangleEdgePoint(0, 0, 100, 100, 'left', 0.5, 'triangle-left')
+            expect(p.x).toBeCloseTo(0, 0)
+            expect(p.y).toBeCloseTo(50, 0)
+        })
+    })
+
+    describe('rectsOverlap', () => {
+        test('overlapping rects return true', () => {
+            const a = { x: 0, y: 0, width: 100, height: 100 }
+            const b = { x: 50, y: 50, width: 100, height: 100 }
+            expect(rectsOverlap(a, b)).toBe(true)
+        })
+
+        test('non-overlapping rects return false', () => {
+            const a = { x: 0, y: 0, width: 50, height: 50 }
+            const b = { x: 100, y: 100, width: 50, height: 50 }
+            expect(rectsOverlap(a, b)).toBe(false)
+        })
+
+        test('touching rects (edge) return false', () => {
+            const a = { x: 0, y: 0, width: 50, height: 50 }
+            const b = { x: 50, y: 0, width: 50, height: 50 }
+            expect(rectsOverlap(a, b)).toBe(false)
+        })
+    })
+
+    describe('getOverlappingNodes', () => {
+        const nodes = [
+            { id: '1', position: { x: 0, y: 0 }, width: 100, height: 50 },
+            { id: '2', position: { x: 200, y: 200 }, width: 100, height: 50 },
+            { id: '3', position: { x: 50, y: 20 }, width: 100, height: 50 },
+        ]
+
+        test('returns overlapping nodes', () => {
+            const rect = { x: 10, y: 10, width: 80, height: 80 }
+            const result = getOverlappingNodes(rect, nodes, {})
+            expect(result.map(n => n.id)).toEqual(['1', '3'])
+        })
+    })
+
+    describe('clampPosition', () => {
+        test('clamps to extent', () => {
+            const extent = [[0, 0], [100, 100]]
+            expect(clampPosition({ x: -10, y: 50 }, extent)).toEqual({ x: 0, y: 50 })
+            expect(clampPosition({ x: 50, y: 150 }, extent)).toEqual({ x: 50, y: 100 })
+        })
+
+        test('returns original if no extent', () => {
+            expect(clampPosition({ x: -10, y: 50 }, null)).toEqual({ x: -10, y: 50 })
+        })
+    })
+
+    describe('snapPosition', () => {
+        test('snaps to grid', () => {
+            expect(snapPosition({ x: 17, y: 23 }, 15)).toEqual({ x: 15, y: 30 })
+        })
+
+        test('returns original if no grid', () => {
+            expect(snapPosition({ x: 17, y: 23 }, null)).toEqual({ x: 17, y: 23 })
+        })
+
+        test('snaps negative positions', () => {
+            expect(snapPosition({ x: -7, y: -22 }, 10)).toEqual({ x: -10, y: -20 })
+        })
+    })
+})

package/test/graph.test.mjs

@@ -0,0 +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')
+        })
+    })
+})