@arcote.tech/arc-process 0.7.28

package/tests/layout.test.ts

@@ -0,0 +1,244 @@
+import { describe, expect, test } from "bun:test";
+import { buildProcessModel } from "../src/model/build";
+import { collapseContexts, type CollapseOptions } from "../src/model/collapse";
+import { layoutProcess, type DiagramNode } from "../src/layout/layout";
+import { COL_GAP_X, STEP_W } from "../src/layout/measure";
+import {
+  EMPTY_VIEW_STATE,
+  initialViewState,
+  rootKey,
+  toggleGroup,
+  type ProcessViewState,
+} from "../src/state/view-state";
+import { arcProfile, resolveArcRef, toProcessGraph } from "../src/profiles/arc";
+import type { Occurrence, ProcessGraph, StepOccurrence } from "../src/model/types";
+
+function el(id: string, kind: string, extra: Record<string, unknown> = {}) {
+  return { id, name: id, kind, ...extra };
+}
+
+const graph = toProcessGraph({
+  elements: [
+    el("cmd", "command", { queryDeps: ["v"], mutationDeps: ["e"] }),
+    el("v", "view"),
+    el("e", "event"),
+    el("l", "listener"),
+  ],
+  edges: [
+    { source: "cmd", target: "v", kind: "queries" },
+    { source: "cmd", target: "e", kind: "mutates" },
+    { source: "l", target: "e", kind: "handles" },
+  ],
+});
+
+function occ(occId: string, props: Record<string, string>): StepOccurrence {
+  return { type: "step", occId, ref: resolveArcRef(props), label: occId };
+}
+
+function run(
+  occurrences: Occurrence[],
+  state: ProcessViewState = EMPTY_VIEW_STATE,
+  g: ProcessGraph = graph,
+  collapseOpts?: Partial<CollapseOptions>,
+) {
+  const model = buildProcessModel({ graph: g, profile: arcProfile, occurrences });
+  const collapse = collapseContexts(model, {
+    contexts: g.contexts ?? [],
+    state,
+    defaultCollapsed: false,
+    ...collapseOpts,
+  });
+  return {
+    model,
+    collapse,
+    layout: layoutProcess({ model, collapse, graph: g, profile: arcProfile, state }),
+  };
+}
+
+const nodeById = (nodes: DiagramNode[], id: string) => nodes.find((n) => n.id === id)!;
+
+describe("layoutProcess — tracki i kierunki", () => {
+  test("sekwencja: x rośnie z depth, wspólny y", () => {
+    const { layout } = run([occ("o1", { command: "cmd" }), occ("o2", { event: "e" })]);
+    const a = nodeById(layout.nodes, "o1");
+    const b = nodeById(layout.nodes, "o2");
+    expect(a.y).toBe(b.y);
+    expect(b.x - a.x).toBeGreaterThanOrEqual(STEP_W);
+  });
+
+  test("rozwinięcie W (queries) stawia kartę na zachód od kroku", () => {
+    const state = toggleGroup(EMPTY_VIEW_STATE, rootKey("o1"), "queries");
+    const { layout } = run([occ("o1", { command: "cmd" })], state);
+    const step = nodeById(layout.nodes, "o1");
+    const card = layout.nodes.find((n) => n.type === "attachment")!;
+    expect(card).toBeDefined();
+    const stepCx = step.x + step.w / 2;
+    const cardCx = card.x + card.w / 2;
+    expect(cardCx).toBeCloseTo(stepCx - COL_GAP_X, 5);
+    // Krawędź wchodzi DO kroku (queries intoNode).
+    const edge = layout.edges.find((e) => e.source === card.id && e.target === "o1");
+    expect(edge).toBeDefined();
+  });
+
+  test("override side=SE przesuwa kolumnę na wschód POD krok", () => {
+    const o: StepOccurrence = { ...occ("o1", { command: "cmd" }), sides: { mutates: "SE" } };
+    const state = toggleGroup(EMPTY_VIEW_STATE, rootKey("o1"), "mutates");
+    const { layout } = run([o], state);
+    const step = nodeById(layout.nodes, "o1");
+    const card = layout.nodes.find((n) => n.type === "attachment")!;
+    const stepCx = step.x + step.w / 2;
+    expect(card.x + card.w / 2).toBeCloseTo(stepCx + COL_GAP_X, 5);
+    expect(card.y).toBeGreaterThan(step.y + step.h); // pod krokiem
+  });
+
+  test("track sizing: rozwinięcie E odsuwa następną kolumnę (brak nachodzenia)", () => {
+    // o2 = v (view) — e pozostaje doczepką (nie connectorem), więc otwarcie
+    // grupy mutates na o1 rezerwuje pasmo E kolumny depth 0.
+    const occs = [occ("o1", { command: "cmd" }), occ("o2", { view: "v" })];
+    const closed = run(occs);
+    const state = toggleGroup(EMPTY_VIEW_STATE, rootKey("o1"), "mutates");
+    const open = run(occs, state);
+    const shift =
+      nodeById(open.layout.nodes, "o2").x - nodeById(closed.layout.nodes, "o2").x;
+    expect(shift).toBeGreaterThan(0); // kolumna o2 przesunięta w prawo
+  });
+
+  test("notatka renderuje się nad krokiem (side N)", () => {
+    const occurrences: Occurrence[] = [
+      occ("o1", { command: "cmd" }),
+      { type: "note", occId: "n1", text: "notka", side: "N" },
+    ];
+    const { layout } = run(occurrences);
+    const step = nodeById(layout.nodes, "o1");
+    const note = layout.nodes.find((n) => n.type === "note")!;
+    expect(note).toBeDefined();
+    expect(note.y + note.h).toBeLessThanOrEqual(step.y);
+  });
+
+  test("rekurencja: karteczka otwiera własną grupę głębiej", () => {
+    // cmd -queries-> v; v jest czytane przez... l -handles-> e? Zbudujmy: v queriedBy cmd (visible), więc
+    // użyjemy e: cmd -mutates-> e (karta E), e handledBy l (rekurencyjnie na karcie).
+    let state = toggleGroup(EMPTY_VIEW_STATE, rootKey("o1"), "mutates");
+    state = toggleGroup(state, `${rootKey("o1")}/mutates:e`, "handledBy");
+    const { layout } = run([occ("o1", { command: "cmd" })], state);
+    const cards = layout.nodes.filter((n) => n.type === "attachment");
+    expect(cards.length).toBe(2); // e + l (rekurencyjnie)
+    const eCard = cards.find((c) => (c.data.node as { id: string }).id === "e")!;
+    const lCard = cards.find((c) => (c.data.node as { id: string }).id === "l")!;
+    expect(lCard).toBeDefined();
+    // l doczepione względem karty e (W od e).
+    expect(lCard.x).toBeLessThan(eCard.x);
+    const edge = layout.edges.find(
+      (e) => e.source === lCard.id && e.target === eCard.id,
+    );
+    expect(edge).toBeDefined();
+  });
+
+  test("Entry na torze ujemnym renderuje się nad osią + krawędź continues", () => {
+    const occurrences: Occurrence[] = [
+      {
+        ...occ("e1", { listener: "l" }),
+        path: [{ type: "entry", id: "en1", title: "Wejście" }],
+      },
+      { type: "continue", to: "p", path: [{ type: "entry", id: "en1" }] },
+      { ...occ("m1", { command: "cmd" }), path: [{ type: "step", id: "s1", phaseId: "p" }] },
+    ];
+    const { layout } = run(occurrences);
+    const entry = nodeById(layout.nodes, "e1");
+    const main = nodeById(layout.nodes, "m1");
+    expect(entry.y).toBeLessThan(main.y);
+    const cont = layout.edges.find((e) => e.id.startsWith("cont:"));
+    expect(cont).toBeDefined();
+    expect(cont!.source).toBe("e1");
+    expect(cont!.target).toBe("m1");
+  });
+});
+
+describe("collapse kontekstów", () => {
+  const ctxGraph = toProcessGraph({
+    elements: [
+      el("send", "command", { contextPath: ["ctx_leads", "ctx_chat"] }),
+      el("answer", "listener", { contextPath: ["ctx_leads", "ctx_chat"] }),
+      el("score", "listener", { contextPath: ["ctx_leads"] }),
+    ],
+    edges: [],
+    contexts: [
+      { id: "ctx_leads", path: ["ctx_leads"], name: "leads" },
+      { id: "ctx_chat", path: ["ctx_leads", "ctx_chat"], name: "chat", title: "Czat AI" },
+    ],
+  });
+
+  test("przyległe kroki zwiniętego kontekstu zlewają się w jeden box", () => {
+    const occurrences = [
+      occ("o1", { command: "send" }),
+      occ("o2", { listener: "answer" }),
+      occ("o3", { listener: "score" }),
+    ];
+    const { collapse, layout } = run(occurrences, EMPTY_VIEW_STATE, ctxGraph, {
+      defaultCollapsed: true,
+      homeContextId: "ctx_leads",
+    });
+    // send+answer (ctx_chat, obcy) → box; score (ctx_leads, domowy) zostaje.
+    expect(collapse.groups.length).toBe(1);
+    expect(collapse.groups[0].context.id).toBe("ctx_chat");
+    expect(collapse.groups[0].memberOccIds).toEqual(["o1", "o2"]);
+    const stepNodes = layout.nodes.filter((n) => n.type === "step");
+    expect(stepNodes.length).toBe(2); // box + score
+    const box = stepNodes.find((n) => (n.data.isContext as boolean) === true)!;
+    expect((n(box).step as { label: string }).label).toBe("Czat AI");
+
+    function n(x: DiagramNode) {
+      return x.data as { step: unknown };
+    }
+  });
+
+  test("stan czytelnika otwiera box → kroki wracają + obrys context-group", () => {
+    const occurrences = [occ("o1", { command: "send" }), occ("o2", { listener: "answer" })];
+    const state: ProcessViewState = {
+      expanded: {},
+      collapsedContexts: { ctx_chat: false },
+    };
+    const { collapse, layout } = run(occurrences, state, ctxGraph, {
+      defaultCollapsed: true,
+      homeContextId: "ctx_leads",
+    });
+    expect(collapse.groups.length).toBe(0);
+    const box = layout.nodes.find((n) => n.type === "context-group");
+    expect(box).toBeDefined();
+    const o1 = nodeById(layout.nodes, "o1");
+    expect(o1.x).toBeGreaterThan(box!.x);
+    expect(o1.y).toBeGreaterThan(box!.y);
+  });
+
+  test("relacje do wnętrza boxa re-targetowane (dedup)", () => {
+    const g = toProcessGraph({
+      elements: [
+        el("send", "command", { contextPath: ["ctx_chat"], mutationDeps: [] }),
+        el("answer", "listener", { contextPath: ["ctx_chat"] }),
+        el("out", "view"),
+      ],
+      edges: [
+        { source: "send", target: "out", kind: "mutates" },
+        { source: "answer", target: "out", kind: "mutates" },
+      ],
+      contexts: [{ id: "ctx_chat", path: ["ctx_chat"], name: "chat" }],
+    });
+    const occurrences = [
+      occ("o1", { command: "send" }),
+      occ("o2", { listener: "answer" }),
+      occ("o3", { view: "out" }),
+    ];
+    const { layout } = run(occurrences, EMPTY_VIEW_STATE, g, { defaultCollapsed: true });
+    // Obie relacje mutates z wnętrza boxa → jedna krawędź box→out na kind.
+    const rel = layout.edges.filter((e) => e.id.startsWith("rel:"));
+    expect(rel.length).toBe(1);
+    expect(rel[0].source.startsWith("grp:ctx_chat")).toBe(true);
+  });
+
+  test("initialViewState otwiera grupy z expand", () => {
+    const o: StepOccurrence = { ...occ("o1", { command: "cmd" }), expand: ["mutates"] };
+    const model = buildProcessModel({ graph, profile: arcProfile, occurrences: [o] });
+    const state = initialViewState(model);
+    expect(state.expanded[rootKey("o1")]).toEqual(["mutates"]);
+  });
+});

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["src/**/*", "tests/**/*"]
+}