mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-10-11 12:09:53 +08:00
refactor(web): validate and repair diagram XML with the MCP server's engine
- Delete the web app's own copy of the XML checks and repairs from lib/utils.ts (1,074 lines). loadDiagram now uses the MCP server's validateAndFixXml without the strict checks, because the XML may hold the user's own diagram - display_diagram and append_diagram prepare the model's XML with the new shared prepareNewDiagram, also used by the MCP create_new_diagram: wrap, validate strictly and auto-fix while it is still a bare model (where duplicate ids are renamed), then turn it into an mxfile - The streaming preview of display_diagram no longer redraws the model's raw cells after the tool handler loaded the checked diagram, and drops a queued preview once the input is complete. That redraw lost auto-fixes and UserObject/object wrappers, so a linked cell lost its label; it also showed a second error toast - The web repair regression tests now run against the MCP functions - New e2e test checks the canvas content after display_diagram - Fix the e2e upload tests, whose file input locator also matched the template import input
This commit is contained in:
@@ -1,12 +1,9 @@
|
||||
import { describe, expect, it } from "vitest"
|
||||
import {
|
||||
applyDiagramOperations,
|
||||
autoFixXml,
|
||||
cn,
|
||||
extractCompleteMxCells,
|
||||
isMxCellXmlComplete,
|
||||
validateAndFixXml,
|
||||
validateMxCellStructure,
|
||||
wrapWithMxFile,
|
||||
} from "@/lib/utils"
|
||||
|
||||
@@ -136,92 +133,6 @@ describe("extractCompleteMxCells", () => {
|
||||
})
|
||||
})
|
||||
|
||||
const page = (id: string, cells: string) =>
|
||||
`<diagram name="${id}" id="${id}"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/>${cells}</root></mxGraphModel></diagram>`
|
||||
|
||||
describe("duplicate ids in multi-page documents", () => {
|
||||
const shape = (id: string, value = "Box") =>
|
||||
`<mxCell id="${id}" value="${value}" vertex="1" parent="1"><mxGeometry x="0" y="0" width="80" height="40" as="geometry"/></mxCell>`
|
||||
|
||||
it("accepts the same ids on different pages", () => {
|
||||
const xml = `<mxfile>${page("p1", shape("2"))}${page("p2", shape("2"))}</mxfile>`
|
||||
expect(validateMxCellStructure(xml)).toBeNull()
|
||||
})
|
||||
|
||||
it("still reports duplicate ids within one page", () => {
|
||||
const xml = `<mxfile>${page("p1", shape("2") + shape("2"))}${page("p2", "")}</mxfile>`
|
||||
expect(validateMxCellStructure(xml)).toContain("duplicate ID")
|
||||
})
|
||||
|
||||
it("does not rename the root cells of other pages when fixing", () => {
|
||||
const xml = `<mxfile>${page("p1", shape("2", "R&D"))}${page("p2", shape("3"))}</mxfile>`
|
||||
const result = validateAndFixXml(xml)
|
||||
expect(result.valid).toBe(true)
|
||||
expect(result.fixed).not.toContain("_dup")
|
||||
expect(result.fixed).toContain("R&D")
|
||||
})
|
||||
|
||||
it("renames a duplicate id within a page", () => {
|
||||
const xml = `<mxfile>${page("p1", shape("d") + shape("d"))}</mxfile>`
|
||||
const { fixed } = autoFixXml(xml)
|
||||
expect(fixed).toContain('<mxCell id="d" ')
|
||||
expect(fixed).toContain('<mxCell id="d_dup1" ')
|
||||
})
|
||||
})
|
||||
|
||||
describe("autoFixXml", () => {
|
||||
it("does not insert a space at the start of style values", () => {
|
||||
const xml = `<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="2" value="R&D" style="rounded=1;whiteSpace=wrap;" vertex="1" parent="1"><mxGeometry as="geometry"/></mxCell></root></mxGraphModel>`
|
||||
const { fixed } = autoFixXml(xml)
|
||||
expect(fixed).toContain('style="rounded=1;whiteSpace=wrap;"')
|
||||
})
|
||||
|
||||
it("adds a missing space between attributes", () => {
|
||||
const xml = `<mxCell id="2" vertex="1"parent="1"/>`
|
||||
expect(autoFixXml(xml).fixed).toContain('vertex="1" parent="1"')
|
||||
})
|
||||
|
||||
it("keeps " inside rich text labels", () => {
|
||||
const label = "<font color="#ff0000">Hello</font>"
|
||||
const xml = `<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="2" value="${label}" style="html=1;" vertex="1" parent="1"><mxGeometry as="geometry"/></mxCell><mxCell id="3" value="Q&A" vertex="1" parent="1"><mxGeometry as="geometry"/></mxCell></root></mxGraphModel>`
|
||||
const result = validateAndFixXml(xml)
|
||||
expect(result.valid).toBe(true)
|
||||
expect(result.fixed).toContain(`value="${label}"`)
|
||||
})
|
||||
|
||||
it("fixes an attribute delimited by "", () => {
|
||||
const xml = `<mxCell id="2" dashPattern="1 1;" vertex="1" parent="1"/>`
|
||||
expect(autoFixXml(xml).fixed).toContain('dashPattern="1 1;"')
|
||||
})
|
||||
|
||||
it("keeps cells written on one line next to multi-line cells", () => {
|
||||
const xml = `<mxGraphModel><root>
|
||||
<mxCell id="0"/>
|
||||
<mxCell id="1" parent="0"/>
|
||||
<mxCell id="2" value="Q&A" vertex="1" parent="1">
|
||||
<mxGeometry x="0" y="0" width="80" height="40" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="e1" edge="1" parent="1" source="2" target="3"><mxGeometry relative="1" as="geometry"/></mxCell>
|
||||
<mxCell id="3" value="B" vertex="1" parent="1">
|
||||
<mxGeometry x="200" y="0" width="80" height="40" as="geometry"/>
|
||||
</mxCell>
|
||||
</root></mxGraphModel>`
|
||||
const result = validateAndFixXml(xml)
|
||||
expect(result.valid).toBe(true)
|
||||
for (const id of ["2", "e1", "3"]) {
|
||||
expect(result.fixed).toContain(`<mxCell id="${id}"`)
|
||||
}
|
||||
})
|
||||
|
||||
it("keeps object and UserObject wrappers", () => {
|
||||
const xml = `<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><UserObject id="2" label="Docs" link="https://example.com"><mxCell vertex="1" parent="1"><mxGeometry as="geometry"/></mxCell></UserObject><object id="3" label="A&B" owner="me"><mxCell vertex="1" parent="1"><mxGeometry as="geometry"/></mxCell></object></root></mxGraphModel>`
|
||||
const result = validateAndFixXml(xml)
|
||||
expect(result.valid).toBe(true)
|
||||
expect(result.fixed).toContain('<UserObject id="2"')
|
||||
expect(result.fixed).toContain('<object id="3"')
|
||||
})
|
||||
})
|
||||
|
||||
describe("applyDiagramOperations with wrapped cells", () => {
|
||||
const xml = `<mxfile><diagram id="p1"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><UserObject id="5" label="Docs" link="https://example.com"><mxCell vertex="1" parent="1"><mxGeometry as="geometry"/></mxCell></UserObject><mxCell id="6" value="B" vertex="1" parent="1"><mxGeometry as="geometry"/></mxCell><mxCell id="e1" edge="1" parent="1" source="5" target="6"><mxGeometry relative="1" as="geometry"/></mxCell></root></mxGraphModel></diagram></mxfile>`
|
||||
|
||||
|
||||
Reference in New Issue
Block a user