w-flow-vue 1.0.0

package/test/components-node.test.mjs

@@ -0,0 +1,174 @@
+import { mount } from '@vue/test-utils'
+import Handle from '../src/components/nodes/Handle.vue'
+import DefaultNode from '../src/components/nodes/DefaultNode.vue'
+import InputNode from '../src/components/nodes/InputNode.vue'
+import OutputNode from '../src/components/nodes/OutputNode.vue'
+import NodeBody from '../src/components/nodes/NodeBody.vue'
+import NodeWrapper from '../src/components/nodes/NodeWrapper.vue'
+
+describe('Handle', () => {
+    test('renders with correct classes', () => {
+        const wrapper = mount(Handle, {
+            propsData: { type: 'source', position: 'bottom' },
+        })
+        expect(wrapper.classes()).toContain('vue-flow__handle')
+        expect(wrapper.classes()).toContain('vue-flow__handle--bottom')
+        expect(wrapper.classes()).toContain('vue-flow__handle--source')
+    })
+
+    test('emits connect-start on mousedown', () => {
+        const wrapper = mount(Handle, {
+            propsData: { type: 'source', position: 'bottom', connectable: true },
+        })
+        wrapper.trigger('mousedown')
+        expect(wrapper.emitted('connect-start')).toBeTruthy()
+        expect(wrapper.emitted('connect-start')[0][0]).toHaveProperty('handleType', 'source')
+    })
+
+    test('does not emit when not connectable', () => {
+        const wrapper = mount(Handle, {
+            propsData: { type: 'source', position: 'bottom', connectable: false },
+        })
+        wrapper.trigger('mousedown')
+        expect(wrapper.emitted('connect-start')).toBeFalsy()
+    })
+})
+
+describe('DefaultNode', () => {
+    const node = { id: '1', type: 'basic', name: 'Test', position: { x: 0, y: 0 } }
+
+    test('renders label', () => {
+        const wrapper = mount(DefaultNode, { propsData: { node } })
+        expect(wrapper.text()).toContain('Test')
+    })
+
+    test('has two handles', () => {
+        const wrapper = mount(DefaultNode, { propsData: { node } })
+        const handles = wrapper.findAllComponents(Handle)
+        expect(handles).toHaveLength(2)
+    })
+
+    test('has target handle on top and source on bottom', () => {
+        const wrapper = mount(DefaultNode, { propsData: { node } })
+        const handles = wrapper.findAllComponents(Handle)
+        const types = handles.wrappers.map(h => h.props('type'))
+        expect(types).toContain('target')
+        expect(types).toContain('source')
+    })
+})
+
+describe('InputNode', () => {
+    const node = { id: '1', type: 'input', name: 'Start', position: { x: 0, y: 0 } }
+
+    test('renders label', () => {
+        const wrapper = mount(InputNode, { propsData: { node } })
+        expect(wrapper.text()).toContain('Start')
+    })
+
+    test('has one source handle', () => {
+        const wrapper = mount(InputNode, { propsData: { node } })
+        const handles = wrapper.findAllComponents(Handle)
+        expect(handles).toHaveLength(1)
+        expect(handles.at(0).props('type')).toBe('source')
+    })
+})
+
+describe('OutputNode', () => {
+    const node = { id: '1', type: 'output', name: 'End', position: { x: 0, y: 0 } }
+
+    test('renders label', () => {
+        const wrapper = mount(OutputNode, { propsData: { node } })
+        expect(wrapper.text()).toContain('End')
+    })
+
+    test('has one target handle', () => {
+        const wrapper = mount(OutputNode, { propsData: { node } })
+        const handles = wrapper.findAllComponents(Handle)
+        expect(handles).toHaveLength(1)
+        expect(handles.at(0).props('type')).toBe('target')
+    })
+})
+
+describe('NodeBody', () => {
+    test('renders DefaultNode for type basic', () => {
+        const node = { id: '1', type: 'basic', name: 'Test', position: { x: 0, y: 0 } }
+        const wrapper = mount(NodeBody, { propsData: { node } })
+        expect(wrapper.findComponent(DefaultNode).exists()).toBe(true)
+    })
+
+    test('renders InputNode for type input', () => {
+        const node = { id: '1', type: 'input', name: 'Test', position: { x: 0, y: 0 } }
+        const wrapper = mount(NodeBody, { propsData: { node } })
+        expect(wrapper.findComponent(InputNode).exists()).toBe(true)
+    })
+
+    test('renders OutputNode for type output', () => {
+        const node = { id: '1', type: 'output', name: 'Test', position: { x: 0, y: 0 } }
+        const wrapper = mount(NodeBody, { propsData: { node } })
+        expect(wrapper.findComponent(OutputNode).exists()).toBe(true)
+    })
+
+    test('falls back to DefaultNode for unknown type', () => {
+        const node = { id: '1', type: 'unknown', name: 'Test', position: { x: 0, y: 0 } }
+        const wrapper = mount(NodeBody, { propsData: { node } })
+        expect(wrapper.findComponent(DefaultNode).exists()).toBe(true)
+    })
+})
+
+describe('NodeWrapper', () => {
+    const node = { id: '1', type: 'basic', name: 'Test', position: { x: 100, y: 50 } }
+
+    test('renders with correct transform', () => {
+        const wrapper = mount(NodeWrapper, { propsData: { node } })
+        expect(wrapper.attributes('style')).toContain('translate(100px, 50px)')
+    })
+
+    test('applies selected class', () => {
+        const wrapper = mount(NodeWrapper, { propsData: { node, selected: true } })
+        expect(wrapper.classes()).toContain('vue-flow__node--selected')
+    })
+
+    test('does not render when hidden', () => {
+        const hiddenNode = { ...node, hidden: true }
+        const wrapper = mount(NodeWrapper, { propsData: { node: hiddenNode } })
+        expect(wrapper.html()).toBe('')
+    })
+
+    test('applies custom class', () => {
+        const styledNode = { ...node, class: 'my-class' }
+        const wrapper = mount(NodeWrapper, { propsData: { node: styledNode } })
+        expect(wrapper.classes()).toContain('my-class')
+    })
+
+    test('applies custom style', () => {
+        const styledNode = { ...node, style: { border: '2px solid red' } }
+        const wrapper = mount(NodeWrapper, { propsData: { node: styledNode } })
+        expect(wrapper.attributes('style')).toContain('border: 2px solid red')
+    })
+
+    test('emits node-click on mousedown+mouseup', () => {
+        const wrapper = mount(NodeWrapper, { propsData: { node } })
+        wrapper.trigger('mousedown', { clientX: 0, clientY: 0 })
+        wrapper.trigger('mouseup', { clientX: 0, clientY: 0 })
+        expect(wrapper.emitted('node-click')).toBeTruthy()
+        expect(wrapper.emitted('node-click')[0][0].node.id).toBe('1')
+    })
+
+    test('emits drag-start on mousedown when draggable', () => {
+        const wrapper = mount(NodeWrapper, { propsData: { node, draggable: true } })
+        wrapper.trigger('mousedown')
+        expect(wrapper.emitted('drag-start')).toBeTruthy()
+    })
+
+    test('does not emit drag-start when not draggable', () => {
+        const wrapper = mount(NodeWrapper, { propsData: { node, draggable: false } })
+        wrapper.trigger('mousedown')
+        expect(wrapper.emitted('drag-start')).toBeFalsy()
+    })
+
+    test('applies zIndex from node', () => {
+        const zNode = { ...node, zIndex: 10 }
+        const wrapper = mount(NodeWrapper, { propsData: { node: zNode } })
+        expect(wrapper.attributes('style')).toContain('z-index: 10')
+    })
+})

package/test/components-ui.test.mjs

@@ -0,0 +1,69 @@
+import { mount } from '@vue/test-utils'
+import Controls from '../src/components/ui/Controls.vue'
+
+describe('Controls', () => {
+    test('renders all buttons by default', () => {
+        const wrapper = mount(Controls)
+        const buttons = wrapper.findAll('button')
+        expect(buttons).toHaveLength(4) // zoom in, zoom out, fit view, lock
+    })
+
+    test('hides zoom buttons when showZoom=false', () => {
+        const wrapper = mount(Controls, { propsData: { showZoom: false } })
+        const buttons = wrapper.findAll('button')
+        expect(buttons).toHaveLength(2) // fit view, lock
+    })
+
+    test('hides fit view button when showFitView=false', () => {
+        const wrapper = mount(Controls, { propsData: { showFitView: false } })
+        const buttons = wrapper.findAll('button')
+        expect(buttons).toHaveLength(3) // zoom in, zoom out, lock
+    })
+
+    test('hides interactive button when showInteractive=false', () => {
+        const wrapper = mount(Controls, { propsData: { showInteractive: false } })
+        const buttons = wrapper.findAll('button')
+        expect(buttons).toHaveLength(3) // zoom in, zoom out, fit view
+    })
+
+    test('emits zoom-in on click', () => {
+        const wrapper = mount(Controls)
+        const buttons = wrapper.findAll('button')
+        buttons.at(0).trigger('click') // first button is zoom in
+        expect(wrapper.emitted('zoom-in')).toBeTruthy()
+    })
+
+    test('emits zoom-out on click', () => {
+        const wrapper = mount(Controls)
+        const buttons = wrapper.findAll('button')
+        buttons.at(1).trigger('click')
+        expect(wrapper.emitted('zoom-out')).toBeTruthy()
+    })
+
+    test('emits fit-view on click', () => {
+        const wrapper = mount(Controls)
+        const buttons = wrapper.findAll('button')
+        buttons.at(2).trigger('click')
+        expect(wrapper.emitted('fit-view')).toBeTruthy()
+    })
+
+    test('emits toggle-interactive on click', () => {
+        const wrapper = mount(Controls)
+        const buttons = wrapper.findAll('button')
+        buttons.at(3).trigger('click')
+        expect(wrapper.emitted('toggle-interactive')).toBeTruthy()
+    })
+
+    test('applies position class', () => {
+        const wrapper = mount(Controls, { propsData: { position: 'bottom-right' } })
+        expect(wrapper.classes()).toContain('vue-flow__panel--bottom-right')
+    })
+
+    test('renders slot content', () => {
+        const wrapper = mount(Controls, {
+            slots: { default: '<button class="custom-btn">Custom</button>' },
+        })
+        expect(wrapper.find('.custom-btn').exists()).toBe(true)
+    })
+})
+

package/test/defaults.test.mjs

@@ -0,0 +1,86 @@
+import { NODE_DEFAULTS, CONN_DEFAULTS } from '../src/js/defaults'
+
+describe('defaults', () => {
+    describe('NODE_DEFAULTS', () => {
+        test('has all required keys', () => {
+            const keys = [
+                'type', 'shape', 'width', 'height',
+                'fontSize', 'fontSizeMin', 'fontSizeMax', 'fontColor',
+                'faceColor', 'edgeColor', 'edgeWidth',
+                'toPosition', 'fromPosition', 'popupDirection',
+            ]
+            keys.forEach(k => {
+                expect(NODE_DEFAULTS).toHaveProperty(k)
+            })
+        })
+
+        test('type is basic', () => {
+            expect(NODE_DEFAULTS.type).toBe('basic')
+        })
+
+        test('shape is rectangle', () => {
+            expect(NODE_DEFAULTS.shape).toBe('rectangle')
+        })
+
+        test('dimensions are positive numbers', () => {
+            expect(NODE_DEFAULTS.width).toBeGreaterThan(0)
+            expect(NODE_DEFAULTS.height).toBeGreaterThan(0)
+        })
+
+        test('fontSizeMin <= fontSize <= fontSizeMax', () => {
+            expect(NODE_DEFAULTS.fontSizeMin).toBeLessThanOrEqual(NODE_DEFAULTS.fontSize)
+            expect(NODE_DEFAULTS.fontSize).toBeLessThanOrEqual(NODE_DEFAULTS.fontSizeMax)
+        })
+
+        test('edgeWidth is a positive number', () => {
+            expect(NODE_DEFAULTS.edgeWidth).toBeGreaterThan(0)
+        })
+
+        test('positions are valid', () => {
+            const valid = ['top', 'bottom', 'left', 'right']
+            expect(valid).toContain(NODE_DEFAULTS.toPosition)
+            expect(valid).toContain(NODE_DEFAULTS.fromPosition)
+            expect(valid).toContain(NODE_DEFAULTS.popupDirection)
+        })
+
+        test('colors are hex strings', () => {
+            const hexPattern = /^#[0-9a-fA-F]{6}$/
+            expect(NODE_DEFAULTS.fontColor).toMatch(hexPattern)
+            expect(NODE_DEFAULTS.faceColor).toMatch(hexPattern)
+            expect(NODE_DEFAULTS.edgeColor).toMatch(hexPattern)
+        })
+    })
+
+    describe('CONN_DEFAULTS', () => {
+        test('has all required keys', () => {
+            const keys = [
+                'type', 'fontSize', 'fontSizeMin', 'fontSizeMax', 'fontColor',
+                'edgeColor', 'edgeWidth', 'markerEnd', 'animated', 'defOffset',
+            ]
+            keys.forEach(k => {
+                expect(CONN_DEFAULTS).toHaveProperty(k)
+            })
+        })
+
+        test('type is bezier', () => {
+            expect(CONN_DEFAULTS.type).toBe('bezier')
+        })
+
+        test('animated is boolean false', () => {
+            expect(CONN_DEFAULTS.animated).toBe(false)
+        })
+
+        test('fontSizeMin <= fontSize <= fontSizeMax', () => {
+            expect(CONN_DEFAULTS.fontSizeMin).toBeLessThanOrEqual(CONN_DEFAULTS.fontSize)
+            expect(CONN_DEFAULTS.fontSize).toBeLessThanOrEqual(CONN_DEFAULTS.fontSizeMax)
+        })
+
+        test('defOffset is a positive number', () => {
+            expect(CONN_DEFAULTS.defOffset).toBeGreaterThan(0)
+        })
+
+        test('markerEnd is a string', () => {
+            expect(typeof CONN_DEFAULTS.markerEnd).toBe('string')
+        })
+    })
+})

package/test/edge-path.test.mjs

@@ -0,0 +1,102 @@
+import { getBezierPath, getStraightPath, getStepPath, getSmoothStepPath } from '../src/js/edge-path'
+
+describe('edge-path', () => {
+    const source = { sourceX: 100, sourceY: 50 }
+    const target = { targetX: 300, targetY: 250 }
+
+    describe('getBezierPath', () => {
+        test('returns path string starting with M', () => {
+            const result = getBezierPath({ ...source, ...target })
+            expect(result.path).toMatch(/^M /)
+            expect(result.path).toContain('C ')
+        })
+
+        test('returns label position', () => {
+            const result = getBezierPath({ ...source, ...target })
+            expect(typeof result.labelX).toBe('number')
+            expect(typeof result.labelY).toBe('number')
+        })
+
+        test('label position is between source and target', () => {
+            const result = getBezierPath({ ...source, ...target })
+            expect(result.labelX).toBeGreaterThanOrEqual(source.sourceX)
+            expect(result.labelX).toBeLessThanOrEqual(target.targetX)
+        })
+
+        test('supports different positions', () => {
+            const r1 = getBezierPath({ ...source, ...target, sourcePosition: 'right', targetPosition: 'left' })
+            const r2 = getBezierPath({ ...source, ...target, sourcePosition: 'bottom', targetPosition: 'top' })
+            expect(r1.path).not.toBe(r2.path)
+        })
+
+        test('supports custom curvature', () => {
+            const r1 = getBezierPath({ ...source, ...target, curvature: 0.1 })
+            const r2 = getBezierPath({ ...source, ...target, curvature: 0.5 })
+            expect(r1.path).not.toBe(r2.path)
+        })
+
+        test('handles same position (zero distance)', () => {
+            const result = getBezierPath({ sourceX: 100, sourceY: 100, targetX: 100, targetY: 100 })
+            expect(result.path).toMatch(/^M /)
+        })
+    })
+
+    describe('getStraightPath', () => {
+        test('returns path with M and L', () => {
+            const result = getStraightPath({ ...source, ...target })
+            expect(result.path).toBe('M 100,50 L 300,250')
+        })
+
+        test('label is at midpoint', () => {
+            const result = getStraightPath({ ...source, ...target })
+            expect(result.labelX).toBe(200)
+            expect(result.labelY).toBe(150)
+        })
+    })
+
+    describe('getStepPath', () => {
+        test('returns path with only M and L commands', () => {
+            const result = getStepPath({ ...source, ...target })
+            expect(result.path).toMatch(/^M /)
+            expect(result.path).toContain('L ')
+            expect(result.path).not.toContain('C ')
+        })
+
+        test('returns label position', () => {
+            const result = getStepPath({ ...source, ...target })
+            expect(typeof result.labelX).toBe('number')
+            expect(typeof result.labelY).toBe('number')
+        })
+
+        test('horizontal source/target produces correct segments', () => {
+            const result = getStepPath({
+                sourceX: 100,
+                sourceY: 50,
+                sourcePosition: 'right',
+                targetX: 300,
+                targetY: 250,
+                targetPosition: 'left',
+            })
+            expect(result.path).toMatch(/^M /)
+        })
+    })
+
+    describe('getSmoothStepPath', () => {
+        test('returns path with Q commands for rounded corners', () => {
+            const result = getSmoothStepPath({ ...source, ...target })
+            expect(result.path).toContain('Q ')
+        })
+
+        test('returns label position', () => {
+            const result = getSmoothStepPath({ ...source, ...target })
+            expect(typeof result.labelX).toBe('number')
+            expect(typeof result.labelY).toBe('number')
+        })
+
+        test('supports custom borderRadius', () => {
+            const r1 = getSmoothStepPath({ ...source, ...target, borderRadius: 2 })
+            const r2 = getSmoothStepPath({ ...source, ...target, borderRadius: 10 })
+            expect(r1.path).not.toBe(r2.path)
+        })
+    })
+})

package/test/generate-routing-snapshots.mjs

@@ -0,0 +1,77 @@
+/**
+ * Generate routing snapshot data for all 4×4×36 = 576 combinations.
+ * - 4 source handle positions (top/bottom/left/right)
+ * - 4 target handle positions (top/bottom/left/right)
+ * - 36 angles (0°–350° in 10° steps): B position around A
+ *
+ * Based on AppExamConnectivity.vue defaults:
+ *   A center: (350, 250), Node size: 100×40, Offset: 200
+ */
+import { calculateStepPoints, clearStepCache } from '../src/js/step-routing.mjs'
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const CENTER_X = 350
+const CENTER_Y = 250
+const OFFSET = 200
+const NODE_W = 100
+const NODE_H = 40
+const BUF = 24
+
+const positions = ['top', 'bottom', 'left', 'right']
+
+// Handle position on node edge
+function handleXY(pos, nx, ny, w, h) {
+    switch (pos) {
+    case 'top': return { x: nx + w / 2, y: ny }
+    case 'bottom': return { x: nx + w / 2, y: ny + h }
+    case 'left': return { x: nx, y: ny + h / 2 }
+    case 'right': return { x: nx + w, y: ny + h / 2 }
+    }
+}
+
+let allCases = []
+
+for (let srcPos of positions) {
+    for (let tgtPos of positions) {
+        for (let deg = 0; deg < 360; deg += 10) {
+            let rad = deg * Math.PI / 180
+            let bx = Math.round(CENTER_X + OFFSET * Math.cos(rad))
+            let by = Math.round(CENTER_Y - OFFSET * Math.sin(rad)) // Y-axis inverted
+
+            let sH = handleXY(srcPos, CENTER_X, CENTER_Y, NODE_W, NODE_H)
+            let tH = handleXY(tgtPos, bx, by, NODE_W, NODE_H)
+
+            let nodes = [
+                { id: 'A', position: { x: CENTER_X, y: CENTER_Y }, width: NODE_W, height: NODE_H },
+                { id: 'B', position: { x: bx, y: by }, width: NODE_W, height: NODE_H },
+            ]
+
+            clearStepCache()
+            let pts = calculateStepPoints(
+                sH.x, sH.y, srcPos,
+                tH.x, tH.y, tgtPos,
+                BUF, nodes, {}, 'A', 'B'
+            )
+
+            allCases.push({
+                srcPos,
+                tgtPos,
+                deg,
+                aPos: { x: CENTER_X, y: CENTER_Y },
+                bPos: { x: bx, y: by },
+                sourceXY: sH,
+                targetXY: tH,
+                pts,
+            })
+        }
+    }
+}
+
+let outPath = path.join(__dirname, 'jsons', 'routing-snapshots.json')
+fs.writeFileSync(outPath, JSON.stringify(allCases, null, 2))
+console.log(`Generated ${allCases.length} cases → ${outPath}`)