fix(webapp): keep template routing clean and automatic

Author: FelixTJDietrich

.changeset/clear-signs-live.md

@@ -0,0 +1,5 @@
+---
+"@tumaet/webapp": patch
+---
+
+Start every bundled design-pattern template in a clean editing state, with automatic edges ready to rebalance as the diagram changes.

standalone/webapp/src/components/modals/NewDiagramModal.tsx

@@ -12,6 +12,7 @@ import {
   TabsTrigger,
 } from "@tumaet/ui/components/tabs"
 import { log } from "@/logger"
+import { prepareTemplateModel } from "@/utils/templateModels"
 import {
   HomeDialogActions,
   HomeDialogContent,
@@ -174,16 +175,15 @@ export const NewDiagramModal = () => {
         throw new Error("Selected template data not found")
       }
 
-      const templateModel =
-        typeof structuredClone === "function"
-          ? structuredClone(jsonData)
-          : JSON.parse(JSON.stringify(jsonData))
-
-      templateModel.title = newDiagramTitle
       // Templates ship with fixed ids (several even share one), so give each
       // created diagram a fresh id — otherwise creating two collides on the
-      // same store key and one silently overwrites the other.
-      templateModel.id = crypto.randomUUID()
+      // same store key and one silently overwrites the other. Preparing also
+      // removes stale React Flow interaction flags captured in the JSON asset
+      // without discarding deliberate pinned endpoints or authored bends.
+      const templateModel = prepareTemplateModel(jsonData, {
+        id: crypto.randomUUID(),
+        title: newDiagramTitle,
+      })
 
       createModel(templateModel)
       closeModal()

standalone/webapp/src/utils/templateModels.ts

@@ -0,0 +1,88 @@
+import type { UMLModel } from "@tumaet/apollon"
+
+type RuntimeNodeState = {
+  selected?: boolean
+  dragging?: boolean
+  resizing?: boolean
+}
+
+type RuntimeEdgeState = {
+  selected?: boolean
+}
+
+export type TemplateRoutingState = "automatic" | "pinned" | "authored"
+
+/**
+ * Classify the routing authority stored on an edge.
+ *
+ * Authored bends outrank endpoint pins in the solver, so they do here as well.
+ * Keeping this vocabulary outside the visual tests makes their fixture policy
+ * match the editor's actual routing semantics.
+ */
+export const getTemplateEdgeRoutingState = (
+  edge: UMLModel["edges"][number]
+): TemplateRoutingState => {
+  if (Array.isArray(edge.data?.points) && edge.data.points.length > 0) {
+    return "authored"
+  }
+
+  if (edge.data?.sourceAnchor != null || edge.data?.targetAnchor != null) {
+    return "pinned"
+  }
+
+  return "automatic"
+}
+
+/**
+ * Turn a bundled template asset into a clean model instance.
+ *
+ * The source JSON was originally captured from a live React Flow session and
+ * still contains transient selection/drag/resize flags. Those flags describe
+ * the editor that saved the asset, not the preset a user is creating. Strip
+ * them while preserving deliberate routing authority:
+ *
+ * - no anchors + no points: the holistic router owns the edge;
+ * - sourceAnchor/targetAnchor: the chosen endpoint seats stay pinned;
+ * - non-empty points: the authored bend topology stays authoritative.
+ *
+ * Missing legacy edge data is normalized to an empty automatic point list so a
+ * newly created preset satisfies the current UMLModel contract immediately.
+ */
+export const prepareTemplateModel = (
+  source: UMLModel,
+  overrides: Partial<Pick<UMLModel, "id" | "title">> = {}
+): UMLModel => {
+  const clone =
+    typeof structuredClone === "function"
+      ? structuredClone(source)
+      : (JSON.parse(JSON.stringify(source)) as UMLModel)
+
+  return {
+    ...clone,
+    ...overrides,
+    nodes: clone.nodes.map((node) => {
+      const persistentNode = {
+        ...node,
+      } as UMLModel["nodes"][number] & RuntimeNodeState
+      delete persistentNode.selected
+      delete persistentNode.dragging
+      delete persistentNode.resizing
+      return persistentNode
+    }),
+    edges: clone.edges.map((edge) => {
+      const persistentEdge = {
+        ...edge,
+      } as UMLModel["edges"][number] & RuntimeEdgeState
+      delete persistentEdge.selected
+      return {
+        ...persistentEdge,
+        data: {
+          ...(persistentEdge.data ?? {}),
+          points: Array.isArray(persistentEdge.data?.points)
+            ? persistentEdge.data.points
+            : [],
+        },
+      }
+    }),
+  }
+}

standalone/webapp/src/utils/templateThumbnails.ts

@@ -2,6 +2,7 @@ import type { UMLModel } from "@tumaet/apollon"
 import { renderThumbnailSvgFromModel } from "@/utils/thumbnailSvg"
 import { waitForIdle } from "@/utils/idle"
 import { log } from "@/logger"
+import { prepareTemplateModel } from "@/utils/templateModels"
 
 /**
  * Renders the bundled design-pattern templates to preview SVGs for the New
@@ -33,9 +34,7 @@ const importTemplateModel = async (name: string): Promise<UMLModel> => {
   if (!jsonData) {
     throw new Error(`Template "${name}" not found`)
   }
-  return typeof structuredClone === "function"
-    ? structuredClone(jsonData)
-    : (JSON.parse(JSON.stringify(jsonData)) as UMLModel)
+  return prepareTemplateModel(jsonData as UMLModel)
 }
 
 const notify = (name: string, lightSvg: string | null) => {

standalone/webapp/tests/e2e/edge-auto-reset.spec.ts

@@ -1,8 +1,12 @@
-import { test, expect, type Page } from "@playwright/test"
+import { test, expect } from "@playwright/test"
 import * as fs from "node:fs"
 import * as path from "node:path"
 import { fileURLToPath } from "node:url"
-import { waitForCanvasReady, openFixtureInLocalEditor } from "../helpers/canvas"
+import {
+  waitForCanvasReady,
+  openFixtureInLocalEditor,
+  selectEdgeOnPath,
+} from "../helpers/canvas"
 
 /**
  * The "Reset routing" affordance and the pinned-endpoint highlight.
@@ -21,23 +25,6 @@ const load = (name: string) =>
 
 const pinnedFixture = load("edge-pinned-anchors.json")
 
-async function selectEdgeOnPath(page: Page, id: string): Promise<void> {
-  const pt = await page.evaluate((eid) => {
-    const p = document.querySelector(
-      `.react-flow__edge[data-id="${eid}"] path.react-flow__edge-path`
-    ) as SVGPathElement | null
-    if (!p) return null
-    const ctm = p.getScreenCTM()
-    if (!ctm) return null
-    const q = p.getPointAtLength(p.getTotalLength() / 2)
-    const m = new DOMPoint(q.x, q.y).matrixTransform(ctm)
-    return { x: m.x, y: m.y }
-  }, id)
-  if (!pt) throw new Error(`edge ${id} path not found`)
-  await page.mouse.click(pt.x, pt.y)
-  await page.waitForTimeout(200)
-}
-
 test("a pinned-anchor edge exposes the reset button and highlights both anchored ends", async ({
   page,
 }) => {

standalone/webapp/tests/helpers/canvas.ts

@@ -95,3 +95,76 @@ export async function openFixtureInLocalEditor(
   await injectFixtureIntoLocalStorage(page, fixture)
   await page.goto(`/local/${fixture.id as string}`)
 }
+
+/**
+ * Create one of the bundled presets through the real dashboard dialog.
+ *
+ * Template visual tests use this instead of injecting the asset directly:
+ * cloning, transient-state cleanup, fresh-id assignment, persistence and route
+ * navigation are all part of what a user sees when choosing a preset.
+ */
+export async function createTemplateInLocalEditor(
+  page: Page,
+  templateName: string
+) {
+  await page.addInitScript(() => {
+    localStorage.setItem(
+      "persistenceModelStore",
+      JSON.stringify({
+        state: { models: {}, currentModelId: null },
+        version: 3,
+      })
+    )
+  })
+  await page.goto("/")
+  await page
+    .getByRole("heading", { level: 1, name: "Your diagrams" })
+    .waitFor({ timeout: 15_000 })
+
+  await page.getByRole("button", { name: "New diagram" }).first().click()
+  const dialog = page.getByRole("dialog")
+  await dialog.getByRole("tab", { name: "Use template" }).click()
+  await dialog.getByRole("button", { name: templateName, exact: true }).click()
+  await dialog.getByRole("button", { name: "Create Diagram" }).click()
+
+  await page.waitForURL(/\/local\/[^/]+$/, { timeout: 15_000 })
+  await waitForCanvasReady(page)
+
+  return page.evaluate(() => {
+    const persisted = localStorage.getItem("persistenceModelStore")
+    if (!persisted) return null
+
+    const state = JSON.parse(persisted).state as {
+      currentModelId?: string
+      models?: Record<string, { model?: Record<string, unknown> }>
+    }
+    const currentId = state.currentModelId
+    return currentId ? (state.models?.[currentId]?.model ?? null) : null
+  })
+}
+
+/** Select an edge through the visible middle of its rendered path. */
+export async function selectEdgeOnPath(page: Page, edgeId: string) {
+  const point = await page.evaluate((id) => {
+    const path = document.querySelector(
+      `.react-flow__edge[data-id="${id}"] path.react-flow__edge-path`
+    ) as SVGPathElement | null
+    if (!path) return null
+
+    const transform = path.getScreenCTM()
+    if (!transform) return null
+
+    const midpoint = path.getPointAtLength(path.getTotalLength() / 2)
+    const screenPoint = new DOMPoint(midpoint.x, midpoint.y).matrixTransform(
+      transform
+    )
+    return { x: screenPoint.x, y: screenPoint.y }
+  }, edgeId)
+
+  if (!point) {
+    throw new Error(`Edge "${edgeId}" path was not rendered`)
+  }
+
+  await page.mouse.click(point.x, point.y)
+  await page.waitForTimeout(200)
+}

standalone/webapp/tests/unit/templateModels.test.ts

@@ -0,0 +1,86 @@
+import type { UMLModel } from "@tumaet/apollon"
+import adapter from "../../assets/diagramTemplates/Adapter.json"
+import bridge from "../../assets/diagramTemplates/Bridge.json"
+import command from "../../assets/diagramTemplates/Command.json"
+import factory from "../../assets/diagramTemplates/Factory.json"
+import observer from "../../assets/diagramTemplates/Observer.json"
+import { describe, expect, it } from "vitest"
+import {
+  getTemplateEdgeRoutingState,
+  prepareTemplateModel,
+} from "../../src/utils/templateModels"
+
+const templates = [
+  ["Adapter", adapter],
+  ["Bridge", bridge],
+  ["Command", command],
+  ["Factory", factory],
+  ["Observer", observer],
+] as const
+
+describe("diagram template routing policy", () => {
+  it.each(templates)(
+    "%s deliberately leaves every edge under automatic routing",
+    (_name, source) => {
+      const model = source as unknown as UMLModel
+
+      expect(model.edges).not.toHaveLength(0)
+      expect(model.edges.map(getTemplateEdgeRoutingState)).toEqual(
+        model.edges.map(() => "automatic")
+      )
+    }
+  )
+
+  it.each(templates)(
+    "%s creates a clean model without mutating its bundled source",
+    (name, source) => {
+      const sourceSnapshot = JSON.stringify(source)
+      const model = prepareTemplateModel(source as unknown as UMLModel, {
+        id: `created-${name.toLowerCase()}`,
+        title: name,
+      })
+
+      expect(model.id).toBe(`created-${name.toLowerCase()}`)
+      expect(model.title).toBe(name)
+      expect(model.nodes).not.toHaveLength(0)
+      expect(model.edges).not.toHaveLength(0)
+      expect(
+        model.nodes.some(
+          (node) =>
+            "selected" in node || "dragging" in node || "resizing" in node
+        )
+      ).toBe(false)
+      expect(model.edges.some((edge) => "selected" in edge)).toBe(false)
+      expect(model.edges.every((edge) => Array.isArray(edge.data.points))).toBe(
+        true
+      )
+      expect(JSON.stringify(source)).toBe(sourceSnapshot)
+    }
+  )
+
+  it("preserves intentional endpoint pins and authored bends", () => {
+    const source = structuredClone(adapter) as unknown as UMLModel
+    source.edges[0].data = {
+      points: [],
+      sourceAnchor: { side: "right", ratio: 0.25 },
+    }
+    source.edges[1].data = {
+      points: [
+        { x: 120, y: 330 },
+        { x: 120, y: 250 },
+        { x: 365, y: 250 },
+        { x: 365, y: 190 },
+      ],
+    }
+
+    const model = prepareTemplateModel(source)
+
+    expect(getTemplateEdgeRoutingState(model.edges[0])).toBe("pinned")
+    expect(model.edges[0].data.sourceAnchor).toEqual({
+      side: "right",
+      ratio: 0.25,
+    })
+    expect(getTemplateEdgeRoutingState(model.edges[1])).toBe("authored")
+    expect(model.edges[1].data.points).toEqual(source.edges[1].data.points)
+  })
+})