w-flowchart 1.0.0 → 1.0.2

package/test/snapshot.mjs

@@ -0,0 +1,67 @@
+// pN 渲染回歸共用層 — 以與 p10 相同之測試輸入(16 合成案 + 12 範例圖)對指定產線跑 PNG 快照基準。
+//   p1~p9 無 geom 幾何輸出(結構不變量為 p10 專屬), 其把關層為 PNG 像素基準:
+//   pixelmatch(includeAA:false, 反鋸齒容差 MAXDIFF)比對 pics/<mode>/<案>.png, 無基準或 UPDATE_BASELINE=1 時建立。
+import assert from 'assert'
+import fs from 'fs'
+import { fileURLToPath } from 'url'
+import { dirname, resolve } from 'path'
+import pixelmatch from 'pixelmatch'
+import { PNG } from 'pngjs'
+import { deriveLabels } from '../src/common/derive.mjs'
+import { CASES } from './cases.mjs'
+import { FIGURES } from './figures.mjs'
+
+const __dir = dirname(fileURLToPath(import.meta.url))
+const MAXDIFF = 60   // PNG 容許之反鋸齒雜訊像素上限(真 regression 量級遠超此)
+const UPDATE = process.env.UPDATE_BASELINE === '1' || process.env.UPDATE_BASELINE === 'true'
+
+// 測試輸入(同 p10): 合成案數據為原始形(rich 節點無 label), genPng 合約要求 caller 先衍生 → clone 後 deriveLabels
+const items = [
+    ...CASES.map(c => ({ name: c.name, data: () => deriveLabels(structuredClone(c.data)), kind: '合成' })),
+    ...FIGURES.map(f => ({ name: f.key, data: () => structuredClone(f.data), kind: '範例圖' })), //figures.mjs 已衍生
+]
+
+// PNG 像素比對(反鋸齒容差): 回 { same, detail }
+function pngCompare(baseBuf, curBuf, diffPath) {
+    const a = PNG.sync.read(baseBuf), b = PNG.sync.read(curBuf)
+    if (a.width !== b.width || a.height !== b.height) return { same: false, detail: `尺寸 ${a.width}x${a.height} → ${b.width}x${b.height}` }
+    const diff = new PNG({ width: a.width, height: a.height })
+    const n = pixelmatch(a.data, b.data, diff.data, a.width, a.height, { includeAA: false, threshold: 0.1 })
+    if (n > MAXDIFF) { fs.writeFileSync(diffPath, PNG.sync.write(diff)); return { same: false, detail: `${n} 像素差 (>${MAXDIFF}) → ${diffPath}` } }
+    return { same: true, detail: `${n} 像素差` }
+}
+
+// 對指定產線掛載整組 PNG 快照回歸測試(供各 pN.test.mjs 兩行調用)
+//   opt.timeout: 單案逾時毫秒(覆蓋 mocha 全域值; 供渲染較慢之引擎如 p5 D2 WASM 放寬)
+export function definePngSuite(mode, genPng, opt = {}) {
+    const SNAP = resolve(__dir, 'pics', mode)
+
+    describe(`${mode} 渲染回歸(PNG 快照基準)`, function() {
+
+        before(function() {
+            fs.mkdirSync(SNAP, { recursive: true })
+        })
+
+        for (const tc of items) {
+            it(`[${tc.kind}] ${tc.name}`, async function() {
+                if (opt.timeout) this.timeout(opt.timeout)
+                const png = await genPng(tc.data())
+                assert.ok(Buffer.isBuffer(png) && png[0] === 0x89 && png[1] === 0x50, '非合法 PNG Buffer')
+                const pngP = resolve(SNAP, tc.name + '.png')
+                if (UPDATE || !fs.existsSync(pngP)) { fs.writeFileSync(pngP, png); return }
+                const c = pngCompare(fs.readFileSync(pngP), png, resolve(SNAP, tc.name + '.diff.png'))
+                if (c.same) return
+                // 替代基準: 少數引擎存在佈局雙吸子非決定性(同輸入隨機落在兩種合法佈局, 如 G6 之 antv-dagre+combo),
+                // 主基準不符時改比對 <案>.alt.png(兩者皆須為人工複審過之合法輸出)
+                const altP = resolve(SNAP, tc.name + '.alt.png')
+                if (fs.existsSync(altP)) {
+                    const c2 = pngCompare(fs.readFileSync(altP), png, resolve(SNAP, tc.name + '.diff.png'))
+                    if (c2.same) return
+                }
+                fs.writeFileSync(resolve(SNAP, tc.name + '.new.png'), png)
+                assert.ok(false, `PNG 與基準不同: ${c.detail}(已輸出 ${tc.name}.new.png, 確認為預期後以 UPDATE_BASELINE=1 重建)`)
+            })
+        }
+
+    })
+}

package/test/wflowchart.test.mjs

@@ -1,40 +1,86 @@
-// WFlowchart 統一入口(mocha) — p1~p10 各以真圖數據渲染一張, 驗 PNG 合法性; 並驗入參檢查與 inp 不可變
+// WFlowchart 統一入口(mocha) — p1~p10 各以範例圖數據渲染 PNG 與 SVG(p9 除外), 驗輸出合法性; 並驗入參檢查與 inp 不可變
 import assert from 'assert'
 import fs from 'fs'
 import { fileURLToPath } from 'url'
 import { dirname, resolve } from 'path'
+import { chromium } from 'playwright'
 import WFlowchart from '../src/WFlowchart.mjs'
 
 const __dir = dirname(fileURLToPath(import.meta.url))
-const inp = JSON.parse(fs.readFileSync(resolve(__dir, 'data', '系統架構圖.json'), 'utf8'))
+const inp = JSON.parse(fs.readFileSync(resolve(__dir, 'data', '電商平台架構圖.json'), 'utf8'))
 
 const isPng = (buf) => Buffer.isBuffer(buf) && buf[0] === 0x89 && buf[1] === 0x50 && buf[2] === 0x4e && buf[3] === 0x47
+const SVG_MODES = ['p1', 'p2', 'p3', 'p4', 'p5', 'p6', 'p7', 'p8', 'p10']
 
-describe('WFlowchart(mode, inp) → PNG Buffer', function() {
+describe('WFlowchart(inp, opt) → PNG Buffer', function() {
 
     for (let i = 1; i <= 10; i++) {
         const m = 'p' + i
         it(`${m} 產出合法 PNG`, async function() {
-            const buf = await WFlowchart(m, inp)
+            const buf = await WFlowchart(inp, { mode: m })
             assert.ok(isPng(buf), '非合法 PNG Buffer')
             assert.ok(buf.length > 10000, 'PNG 過小: ' + buf.length)
         })
     }
 
-    it('拒絕非法 mode', async function() {
-        await assert.rejects(() => WFlowchart('p99', inp), /invalid mode/)
-        await assert.rejects(() => WFlowchart(123, inp), /invalid mode/)
+    it('未指定 opt.mode 預設 p10', async function() {
+        const def = await WFlowchart(inp)
+        const p10 = await WFlowchart(inp, { mode: 'p10' })
+        assert.ok(isPng(def), '非合法 PNG Buffer')
+        // 位元組級比對會受次像素反鋸齒不決定性影響, 以尺寸一致驗證走的是同一條產線
+        assert.strictEqual(def.readUInt32BE(16) + 'x' + def.readUInt32BE(20), p10.readUInt32BE(16) + 'x' + p10.readUInt32BE(20), '預設輸出尺寸應與 mode:p10 相同')
+    })
+
+    // opt.output:'svg' — 各支援產線產出 standalone SVG; 收集後由下一測項統一驗 XML 可解析
+    const SVGS = {}
+    for (const m of SVG_MODES) {
+        it(`${m} 產出合法 SVG(output:'svg')`, async function() {
+            const svg = await WFlowchart(inp, { mode: m, output: 'svg' })
+            assert.strictEqual(typeof svg, 'string', '非字串')
+            assert.ok(/^(?:<\?xml[^>]*\?>\s*)?<svg[^>]*xmlns=/.test(svg), '根元素非 <svg> 或缺 xmlns(允許 <?xml?> 宣告前綴)')
+            assert.ok(svg.includes('</svg>'), '缺結尾 </svg>')
+            assert.ok(!svg.includes('&nbsp;'), '含 XML 未定義之 &nbsp; 實體')
+            SVGS[m] = svg
+        })
+    }
+
+    it('SVG 可被瀏覽器以 XML 解析(standalone 直開)', async function() {
+        const browser = await chromium.launch()
+        try {
+            const page = await browser.newPage()
+            for (const m of Object.keys(SVGS)) {
+                await page.goto('data:image/svg+xml;charset=utf-8,' + encodeURIComponent(SVGS[m]))
+                const errTxt = await page.evaluate(() => document.body ? document.body.innerText.slice(0, 120) : '')
+                assert.ok(!/error|Entity/i.test(errTxt), `${m} XML 解析失敗: ${errTxt}`)
+            }
+        }
+        finally {
+            await browser.close()
+        }
+    })
+
+    it('p9 不支援 svg 輸出應拋錯', async function() {
+        await assert.rejects(() => WFlowchart(inp, { mode: 'p9', output: 'svg' }), /不支援 svg/)
+    })
+
+    it('拒絕非法 opt.output 字串', async function() {
+        await assert.rejects(() => WFlowchart(inp, { output: 'jpg' }), /invalid opt\.output/)
+    })
+
+    it('拒絕非法 opt.mode 字串', async function() {
+        await assert.rejects(() => WFlowchart(inp, { mode: 'p99' }), /invalid opt\.mode/)
+        await assert.rejects(() => WFlowchart(inp, { mode: 'abc' }), /invalid opt\.mode/)
     })
 
     it('拒絕非法 inp', async function() {
-        await assert.rejects(() => WFlowchart('p1', {}), /invalid inp/)
-        await assert.rejects(() => WFlowchart('p1', { dir: 'TB', nodes: [], edges: [] }), /invalid inp/)
-        await assert.rejects(() => WFlowchart('p1', { dir: 'TB', nodes: [{ id: 'a', label: 'A', cls: 'blue' }] }), /invalid inp/)
+        await assert.rejects(() => WFlowchart({}), /invalid inp/)
+        await assert.rejects(() => WFlowchart({ dir: 'TB', nodes: [], edges: [] }), /invalid inp/)
+        await assert.rejects(() => WFlowchart({ dir: 'TB', nodes: [{ id: 'a', label: 'A', cls: 'blue' }] }), /invalid inp/)
     })
 
     it('不改動 caller 傳入之 inp', async function() {
         const snap = JSON.stringify(inp)
-        await WFlowchart('p10', inp)
+        await WFlowchart(inp)
         assert.strictEqual(JSON.stringify(inp), snap)
     })
 

package/toolg/gDistRollup.mjs

@@ -31,6 +31,9 @@ async function core() {
             'cytoscape-dagre',
             'dagre',
             '@antv/g6',
+            '@antv/g-lite',
+            '@antv/g-svg',
+            'cytoscape-svg',
             '@joint/core',
             '@logicflow/core',
             'react',

package/test/data//344/275/234/346/245/255/346/265/201/347/250/213/345/234/226.json

@@ -1,92 +0,0 @@
-{
-  "dir": "TB",
-  "nodes": [
-    {
-      "id": "s1",
-      "title": "執行單位產製詮釋資料",
-      "items": [
-        "Excel 模板＋附件"
-      ],
-      "cls": "blue"
-    },
-    {
-      "id": "s2",
-      "label": "上傳（分片）",
-      "cls": "blue"
-    },
-    {
-      "id": "s3",
-      "label": "移至批次區",
-      "cls": "blue"
-    },
-    {
-      "id": "s4",
-      "title": "格式檢測",
-      "items": [
-        "欄位",
-        "必填",
-        "重複編號",
-        "重複檔案 SHA",
-        "引用關聯"
-      ],
-      "cls": "blue"
-    },
-    {
-      "id": "s5",
-      "label": "檢測摘要報告",
-      "cls": "blue"
-    },
-    {
-      "id": "s6",
-      "label": "管理員確認",
-      "cls": "diamond"
-    },
-    {
-      "id": "s7",
-      "label": "寫入資料庫",
-      "cls": "done"
-    },
-    {
-      "id": "s8",
-      "label": "查詢／展示／報表輸出",
-      "cls": "done"
-    }
-  ],
-  "edges": [
-    {
-      "from": "s1",
-      "to": "s2"
-    },
-    {
-      "from": "s2",
-      "to": "s3"
-    },
-    {
-      "from": "s3",
-      "to": "s4"
-    },
-    {
-      "from": "s4",
-      "to": "s5"
-    },
-    {
-      "from": "s5",
-      "to": "s6"
-    },
-    {
-      "from": "s6",
-      "to": "s7",
-      "label": "通過"
-    },
-    {
-      "from": "s7",
-      "to": "s8"
-    },
-    {
-      "from": "s6",
-      "to": "s1",
-      "label": "退回",
-      "kind": "dashed"
-    }
-  ]
-}