w-flow-vue 1.0.0

package/test/step-routing-connectivity.test.mjs

@@ -0,0 +1,78 @@
+/**
+ * Routing snapshot regression test.
+ *
+ * 576 combinations: 4 source handles × 4 target handles × 36 angles (10° steps).
+ * Each case verifies calculateStepPoints output matches the saved snapshot exactly.
+ * If a code change alters any routing result, this test will catch it.
+ *
+ * To regenerate snapshots after intentional changes:
+ *   node --experimental-vm-modules test/generate-routing-snapshots.mjs
+ */
+import { calculateStepPoints, clearStepCache } from '../src/js/step-routing'
+import snapshots from './jsons/routing-snapshots.json'
+
+const NODE_W = 100
+const NODE_H = 40
+const BUF = 24
+
+describe('routing snapshot regression', () => {
+    beforeEach(() => {
+        clearStepCache()
+    })
+
+    test('snapshot file has 576 cases', () => {
+        expect(snapshots.length).toBe(576)
+    })
+
+    describe.each(
+        snapshots.map((c, i) => [
+            `[${i}] ${c.srcPos}→${c.tgtPos} ${c.deg}°`,
+            c,
+        ])
+    )('%s', (_label, c) => {
+        test('matches snapshot', () => {
+            let nodes = [
+                { id: 'A', position: c.aPos, width: NODE_W, height: NODE_H },
+                { id: 'B', position: c.bPos, width: NODE_W, height: NODE_H },
+            ]
+            let pts = calculateStepPoints(
+                c.sourceXY.x, c.sourceXY.y, c.srcPos,
+                c.targetXY.x, c.targetXY.y, c.tgtPos,
+                BUF, nodes, {}, 'A', 'B'
+            )
+            expect(pts).toEqual(c.pts)
+        })
+
+        test('no NaN in points', () => {
+            let nodes = [
+                { id: 'A', position: c.aPos, width: NODE_W, height: NODE_H },
+                { id: 'B', position: c.bPos, width: NODE_W, height: NODE_H },
+            ]
+            let pts = calculateStepPoints(
+                c.sourceXY.x, c.sourceXY.y, c.srcPos,
+                c.targetXY.x, c.targetXY.y, c.tgtPos,
+                BUF, nodes, {}, 'A', 'B'
+            )
+            pts.forEach((p, j) => {
+                expect(isNaN(p.x)).toBe(false)
+                expect(isNaN(p.y)).toBe(false)
+            })
+        })
+
+        test('first/last points match source/target', () => {
+            let nodes = [
+                { id: 'A', position: c.aPos, width: NODE_W, height: NODE_H },
+                { id: 'B', position: c.bPos, width: NODE_W, height: NODE_H },
+            ]
+            let pts = calculateStepPoints(
+                c.sourceXY.x, c.sourceXY.y, c.srcPos,
+                c.targetXY.x, c.targetXY.y, c.tgtPos,
+                BUF, nodes, {}, 'A', 'B'
+            )
+            expect(pts[0].x).toBe(c.sourceXY.x)
+            expect(pts[0].y).toBe(c.sourceXY.y)
+            expect(pts[pts.length - 1].x).toBe(c.targetXY.x)
+            expect(pts[pts.length - 1].y).toBe(c.targetXY.y)
+        })
+    })
+})

package/test/step-routing.test.mjs

@@ -0,0 +1,88 @@
+import { calculateStepPoints, clearStepCache } from '../src/js/step-routing'
+
+describe('step-routing', () => {
+    beforeEach(() => {
+        clearStepCache()
+    })
+
+    describe('calculateStepPoints', () => {
+        test('returns array of points', () => {
+            const pts = calculateStepPoints(100, 50, 'bottom', 300, 250, 'top', 20)
+            expect(Array.isArray(pts)).toBe(true)
+            expect(pts.length).toBeGreaterThanOrEqual(2)
+        })
+
+        test('first point matches source', () => {
+            const pts = calculateStepPoints(100, 50, 'bottom', 300, 250, 'top', 20)
+            expect(pts[0].x).toBe(100)
+            expect(pts[0].y).toBe(50)
+        })
+
+        test('last point matches target', () => {
+            const pts = calculateStepPoints(100, 50, 'bottom', 300, 250, 'top', 20)
+            const last = pts[pts.length - 1]
+            expect(last.x).toBe(300)
+            expect(last.y).toBe(250)
+        })
+
+        test('all points have x and y', () => {
+            const pts = calculateStepPoints(0, 0, 'right', 200, 100, 'left', 20)
+            pts.forEach(p => {
+                expect(typeof p.x).toBe('number')
+                expect(typeof p.y).toBe('number')
+                expect(isNaN(p.x)).toBe(false)
+                expect(isNaN(p.y)).toBe(false)
+            })
+        })
+
+        test('works with all position combinations', () => {
+            const positions = ['top', 'bottom', 'left', 'right']
+            positions.forEach(sp => {
+                positions.forEach(tp => {
+                    const pts = calculateStepPoints(0, 0, sp, 200, 200, tp, 20)
+                    expect(pts.length).toBeGreaterThanOrEqual(2)
+                    expect(pts[0]).toEqual({ x: 0, y: 0 })
+                    expect(pts[pts.length - 1]).toEqual({ x: 200, y: 200 })
+                })
+            })
+        })
+
+        test('avoids node obstacles', () => {
+            const nodes = [
+                { id: '1', position: { x: 0, y: 0 }, width: 100, height: 40 },
+                { id: '2', position: { x: 200, y: 200 }, width: 100, height: 40 },
+                { id: 'block', position: { x: 100, y: 80 }, width: 100, height: 100 },
+            ]
+            const ni = {}
+            const pts = calculateStepPoints(
+                50, 40, 'bottom', 250, 200, 'top', 20,
+                nodes, ni, '1', '2'
+            )
+            expect(pts.length).toBeGreaterThanOrEqual(2)
+            expect(pts[0]).toEqual({ x: 50, y: 40 })
+        })
+
+        test('handles same source and target position', () => {
+            const pts = calculateStepPoints(100, 100, 'bottom', 100, 300, 'bottom', 20)
+            expect(pts.length).toBeGreaterThanOrEqual(2)
+        })
+
+        test('handles close source and target', () => {
+            const pts = calculateStepPoints(100, 100, 'bottom', 105, 105, 'top', 20)
+            expect(pts.length).toBeGreaterThanOrEqual(2)
+        })
+    })
+
+    describe('clearStepCache', () => {
+        test('does not throw', () => {
+            expect(() => clearStepCache()).not.toThrow()
+        })
+
+        test('can be called multiple times', () => {
+            clearStepCache()
+            clearStepCache()
+            clearStepCache()
+        })
+    })
+
+})

package/test/visual-regression.test.mjs

@@ -0,0 +1,274 @@
+/**
+ * Visual regression test using Playwright screenshots.
+ * Compares current rendering against baseline images pixel-by-pixel.
+ *
+ * Requires: npm run serve (http://localhost:8080) running
+ * Run: node test/visual-regression.test.mjs
+ *
+ * To regenerate baselines after intentional visual changes:
+ *   node test/generate-visual-baselines.mjs
+ */
+import { chromium } from 'playwright'
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { PNG } from 'pngjs'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const baselineDir = path.join(__dirname, 'pics')
+
+function comparePNG(baselinePath, currentBuffer, threshold = 0.01) {
+    if (!fs.existsSync(baselinePath)) {
+        return { match: false, reason: 'Baseline not found: ' + baselinePath }
+    }
+    const baseline = PNG.sync.read(fs.readFileSync(baselinePath))
+    const current = PNG.sync.read(currentBuffer)
+    if (baseline.width !== current.width || baseline.height !== current.height) {
+        return { match: false, reason: `Size: ${baseline.width}x${baseline.height} vs ${current.width}x${current.height}` }
+    }
+    let diffPixels = 0
+    const total = baseline.width * baseline.height
+    for (let i = 0; i < baseline.data.length; i += 4) {
+        let d = Math.abs(baseline.data[i] - current.data[i]) + Math.abs(baseline.data[i + 1] - current.data[i + 1]) + Math.abs(baseline.data[i + 2] - current.data[i + 2])
+        if (d > 30) diffPixels++
+    }
+    let diffRatio = diffPixels / total
+    return { match: diffRatio <= threshold, diffRatio, diffPixels, total }
+}
+
+let passed = 0, failed = 0, errors = []
+
+async function assert(name, result) {
+    if (result.match) {
+        passed++
+        console.log(`  ✓ ${name}`)
+    } else {
+        failed++
+        let msg = result.reason || `${(result.diffRatio * 100).toFixed(2)}% diff (${result.diffPixels}/${result.total})`
+        errors.push(`${name}: ${msg}`)
+        console.log(`  ✗ ${name} — ${msg}`)
+    }
+}
+
+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
+        let ch = vm.heightInp
+        let w = n.width || 100
+        let 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)
+
+    console.log('Visual Regression Tests\n')
+    const pad = 60
+
+    // 1. Overview — fitView to show all nodes
+    await fitView(page)
+    await page.waitForTimeout(500)
+    let canvasClip = await getCanvasClip(page)
+    let buf = await page.screenshot({ clip: canvasClip })
+    await assert('overview', comparePNG(path.join(baselineDir, 'vb-overview.png'), buf))
+
+    // 2. Each node — center on node, clip with padding (includes surrounding edges)
+    let nodes = await page.$$('.vue-flow__node')
+    for (let node of nodes) {
+        let id = await node.getAttribute('data-id')
+        if (!id) continue
+        let bp = path.join(baselineDir, `vb-node-${id}.png`)
+        if (!fs.existsSync(bp)) 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
+        buf = await page.screenshot({ clip })
+        await assert(`node-${id}`, comparePNG(bp, buf))
+    }
+
+    // 3. Node hovered — 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()
+        buf = await page.screenshot({ clip: clipAround(box, pad) })
+        await assert('node-hovered', comparePNG(path.join(baselineDir, 'vb-node-hovered.png'), buf))
+        await page.mouse.move(0, 0)
+        await page.waitForTimeout(300)
+    }
+
+    // 4. 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()
+        buf = await page.screenshot({ clip: clipAround(box, pad) })
+        await assert('node-selected', comparePNG(path.join(baselineDir, 'vb-node-selected.png'), buf))
+        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()
+            buf = await page.screenshot({ clip: clipAround(box, 40) })
+            await assert('edge-hovered', comparePNG(path.join(baselineDir, 'vb-edge-hovered.png'), buf))
+            await page.mouse.move(0, 0)
+            await page.waitForTimeout(300)
+        }
+    }
+
+    // 6. Edges normal
+    await fitView(page)
+    await page.waitForTimeout(500)
+    buf = await page.screenshot({ clip: canvasClip })
+    await assert('edges-normal', comparePNG(path.join(baselineDir, 'vb-edges-normal.png'), buf))
+
+    // ===== LOCKED STATE =====
+    console.log('')
+    let lockBtn = await page.$('.vue-flow__controls button[title="Lock"]')
+    if (lockBtn) {
+        await lockBtn.click()
+        await page.waitForTimeout(500)
+    }
+
+    // 7. Locked overview
+    buf = await page.screenshot({ clip: canvasClip })
+    await assert('locked-overview', comparePNG(path.join(baselineDir, 'vb-locked-overview.png'), buf))
+
+    // 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()
+        buf = await page.screenshot({ clip: clipAround(box, pad) })
+        await assert('locked-node-hovered', comparePNG(path.join(baselineDir, 'vb-locked-node-hovered.png'), buf))
+        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()
+        buf = await page.screenshot({ clip: clipAround(box, pad) })
+        await assert('locked-node-selected', comparePNG(path.join(baselineDir, 'vb-locked-node-selected.png'), buf))
+        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()
+            buf = await page.screenshot({ clip: clipAround(box, 40) })
+            await assert('locked-edge-hovered', comparePNG(path.join(baselineDir, 'vb-locked-edge-hovered.png'), buf))
+            await page.mouse.move(0, 0)
+            await page.waitForTimeout(300)
+        }
+    }
+
+    console.log(`\nResults: ${passed} passed, ${failed} failed`)
+    if (errors.length > 0) {
+        console.log('\nFailed:')
+        errors.forEach(e => console.log('  ' + e))
+    }
+
+    await browser.close()
+    process.exit(failed > 0 ? 1 : 0)
+}
+
+run().catch(e => { console.error(e); process.exit(1) })

package/toolg/addVersion.mjs

@@ -0,0 +1,4 @@
+import addVersion from 'w-package-tools/src/addVersion.mjs'
+
+
+addVersion()

package/toolg/cleanFolder.mjs

@@ -0,0 +1,4 @@
+import cleanFolder from 'w-package-tools/src/cleanFolder.mjs'
+
+
+cleanFolder('docs')

package/toolg/gDistApp.mjs

@@ -0,0 +1,34 @@
+import rollupVueToHtml from 'w-package-tools/src/rollupVueToHtml.mjs'
+
+
+let opt = {
+    title: `w-flow-vue`,
+    head: `
+
+    <!-- rollupVueToHtml已自動添加@babel/polyfill與vue -->
+
+    <!-- fontawesome -->
+    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css" rel="stylesheet">
+
+    <!-- mdi, 各組件使用mdi/js故不需引用 -->
+    <link _href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css" rel="stylesheet">
+
+    <!-- google, 各組件使用mdi/js故不需引用 -->
+    <link _href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
+    <link _href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
+
+    <!-- lodash -->
+    <script src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>
+
+    <!-- wsemi -->
+    <script src="https://cdn.jsdelivr.net/npm/wsemi/dist/wsemi.umd.min.js"></script>
+
+    `,
+    newVue: ``,
+    globals: {
+    },
+    external: [
+    ],
+}
+rollupVueToHtml('./src/App.vue', './docs/examples/app.html', opt)
+

package/toolg/gDistRollupComps.mjs

@@ -0,0 +1,22 @@
+import rollupFiles from 'w-package-tools/src/rollupFiles.mjs'
+
+
+let fdSrc = './src/components/'
+let fdTar = './dist'
+
+
+rollupFiles({
+    fns: 'WFlowVue.vue',
+    fdSrc,
+    fdTar,
+    format: 'umd',
+    //nameDistType: 'kebabCase',
+    hookNameDist: () => {
+        return 'w-flow-vue'
+    },
+    globals: {
+    },
+    external: [
+    ],
+})
+

package/toolg/gDocExams.mjs

@@ -0,0 +1,47 @@
+import _ from 'lodash-es'
+import fs from 'fs'
+import getFiles from 'w-package-tools/src/getFiles.mjs'
+import getPks from 'w-package-tools/src/getPks.mjs'
+
+
+let fdSrc = './test-html/'
+let fdTar = './docs/examples/'
+
+
+async function main() {
+    //把example裡面cdn更換, 再複製到docs的example內, 作為日後發佈為靜態網站
+
+    //pks
+    let pks = getPks()
+
+    //cdn
+    let cdn = `<script src="https://cdn.jsdelivr.net/npm/w-flow-vue@${pks.version}/dist/w-flow-vue.umd.js"></script>`
+
+    //mkdirSync
+    if (!fs.existsSync(fdTar)) {
+        fs.mkdirSync(fdTar)
+    }
+
+    //getFiles
+    let ltfs = getFiles(fdSrc)
+
+    _.each(ltfs, function(v) {
+
+        //fn
+        let fn = fdSrc + v
+
+        //c
+        let c = fs.readFileSync(fn, 'utf8')
+
+        //replace
+        let r = `<script src="../dist/w-flow-vue.umd.js"></script>`
+        c = c.replace(r, cdn)
+
+        //write
+        //console.log(c)
+        fs.writeFileSync(fdTar + v, c, 'utf8')
+
+    })
+
+}
+main()