@isothrum/editor 0.0.0-stage → 0.1.0

package/src/lib/tool/selection.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, test } from "vitest";
+import type { Plan } from "./engine";
+import { labIssues, nameById, selectionOf } from "./selection";
+import { cable, issueText, lan, machine, note } from "@/test/lab";
+
+const selected = <T extends object>(x: T): T => ({ ...x, selected: true });
+
+describe("selectionOf", () => {
+  test("one machine, LAN or cable selected opens its window", () => {
+    expect(selectionOf([selected(machine("m")), lan("l")], []).machine?.id).toBe("m");
+    expect(selectionOf([machine("m"), selected(lan("l"))], []).lan?.id).toBe("l");
+    expect(selectionOf([machine("m")], [selected(cable("c", "m", "l"))]).edge?.id).toBe("c");
+  });
+
+  test("several selected open none of them, and are counted", () => {
+    const s = selectionOf([selected(machine("m")), selected(lan("l"))], [selected(cable("c", "m", "l"))]);
+    expect(s).toMatchObject({ count: 3, machine: undefined, lan: undefined, edge: undefined });
+  });
+
+  test("a selected note is counted but opens no window", () => {
+    expect(selectionOf([selected(note("n"))], [])).toMatchObject({ count: 1, machine: undefined, lan: undefined });
+  });
+});
+
+describe("labIssues", () => {
+  const plan = (p: Partial<Plan>): Plan => ({ ok: true, error: null, isoloom_yml: null, problems: [], files: [], skipped: [], addresses: {}, ...p });
+
+  test("an empty canvas has nothing to fix yet", () => {
+    expect(labIssues([], plan({ ok: false, error: "empty" }), issueText)).toEqual([]);
+  });
+
+  test("lists the canvas's findings, then the engine's error and problems", () => {
+    const nodes = [machine("a", { name: "" })];
+    expect(labIssues(nodes, plan({ ok: false, error: "bad lab", problems: ["p1"] }), issueText)).toEqual(["unnamed machine", "bad lab", "p1"]);
+  });
+
+  test("lists the canvas's findings alone before the engine has run", () => {
+    expect(labIssues([machine("a", { name: "" })], null, issueText)).toEqual(["unnamed machine"]);
+  });
+});
+
+test("nameById shows a node's name, or ? for one that is gone", () => {
+  expect([nameById([machine("m", { name: "web" })], "m"), nameById([], "m")]).toEqual(["web", "?"]);
+});

package/src/lib/tool/selection.ts

@@ -0,0 +1,34 @@
+import { canvasIssues, type IssueText } from "./issues";
+import type { Plan } from "./engine";
+import { isLan, isMachine, nodeName, type CableEdge, type LabNode } from "./model";
+
+/** What is selected: one thing opens its window; several open the "selection" window instead. */
+export function selectionOf(nodes: LabNode[], edges: CableEdge[]) {
+  const selectedNodes = nodes.filter((n) => n.selected);
+  const selectedEdges = edges.filter((e) => e.selected);
+  const count = selectedNodes.length + selectedEdges.length;
+  const only = count === 1 ? selectedNodes.at(0) : undefined;
+  return {
+    selectedNodes,
+    selectedEdges,
+    count,
+    machine: only && isMachine(only) ? only : undefined,
+    lan: only && isLan(only) ? only : undefined,
+    edge: count === 1 ? selectedEdges.at(0) : undefined,
+  };
+}
+
+/**
+ * What to fix before the lab runs: the canvas's own findings, then the engine's. An empty canvas
+ * isn't a lab with problems yet: nothing until there is something to check.
+ */
+export function labIssues(nodes: LabNode[], plan: Plan | null, text: IssueText): string[] {
+  if (nodes.length === 0) return [];
+  return [...canvasIssues(nodes, text), ...(plan && !plan.ok && plan.error ? [plan.error] : []), ...(plan?.problems ?? [])];
+}
+
+/** A node's name by its id, as the windows show it ("?" for one that is gone). */
+export function nameById(nodes: LabNode[], id: string): string {
+  const n = nodes.find((x) => x.id === id);
+  return n ? nodeName(n) : "?";
+}

package/src/lib/tool/storage.test.ts

@@ -0,0 +1,123 @@
+import { describe, expect, test, vi } from "vitest";
+import { LAN_BEHAVIOR } from "./model";
+import { PRESETS } from "./presets";
+import {
+  autoStarts,
+  loadBlockChoices,
+  loadDesign,
+  loadDevices,
+  loadDraft,
+  loadProject,
+  saveBlockChoices,
+  saveDesign,
+  saveDevices,
+  saveDraft,
+  saveProject,
+  setAutoStarts,
+} from "./storage";
+import { cable, lan, machine } from "@/test/lab";
+
+/** This browser's storage, faked: what it holds, by key. */
+function useStorage(entries: Record<string, string> = {}): Map<string, string> {
+  const held = new Map(Object.entries(entries));
+  vi.stubGlobal("localStorage", {
+    getItem: (k: string) => held.get(k) ?? null,
+    setItem: (k: string, v: string) => held.set(k, v),
+    removeItem: (k: string) => held.delete(k),
+  });
+  return held;
+}
+
+/** Storage a private window blocks: every call throws. */
+function useBlockedStorage(): void {
+  const blocked = () => {
+    throw new Error("blocked");
+  };
+  vi.stubGlobal("localStorage", { getItem: blocked, setItem: blocked, removeItem: blocked });
+}
+
+describe("the draft", () => {
+  test("keeps the lab without its UI state, and reads it back current", () => {
+    const held = useStorage();
+    saveDraft({ name: "lab", nodes: [{ ...lan("office"), selected: true }, machine("web")], edges: [cable("c", "web", "office")], design: "business" });
+    expect(JSON.parse(held.get("isothrum-canvas-v1") ?? "")).not.toHaveProperty("design");
+    expect(loadDraft()?.nodes[0]).toMatchObject({ ...LAN_BEHAVIOR, id: "office" });
+    expect(loadDraft()?.nodes[0]).not.toHaveProperty("selected");
+  });
+
+  test("is nothing when there is none, it isn't JSON or it hasn't a lab's shape", () => {
+    useStorage();
+    expect(loadDraft()).toBeNull();
+    useStorage({ "isothrum-canvas-v1": "{" });
+    expect(loadDraft()).toBeNull();
+    useStorage({ "isothrum-canvas-v1": JSON.stringify({ nodes: [null], edges: [] }) });
+    expect(loadDraft()).toBeNull();
+  });
+});
+
+describe("saved devices", () => {
+  test("come back as they were saved", () => {
+    useStorage();
+    saveDevices([PRESETS[0]]);
+    expect(loadDevices()).toEqual([PRESETS[0]]);
+  });
+
+  test("come back with their OS as Isoloom names it now", () => {
+    const old = { ...PRESETS[0], data: { ...PRESETS[0].data, kind: "vm", os: "windows-server-2022" } };
+    useStorage({ "isothrum-devices-v1": JSON.stringify([old]) });
+    expect(loadDevices()[0].data.os).toBe("windows-server@2022");
+  });
+
+  test("leave out what can't be placed, and anything that isn't a list", () => {
+    useStorage({ "isothrum-devices-v1": JSON.stringify([PRESETS[1], { id: "x" }, null]) });
+    expect(loadDevices()).toEqual([PRESETS[1]]);
+    useStorage({ "isothrum-devices-v1": "{}" });
+    expect(loadDevices()).toEqual([]);
+  });
+});
+
+describe("the look and the toolbar", () => {
+  test("keep the canvas's look, and only a known one", () => {
+    useStorage();
+    saveDesign("business");
+    expect(loadDesign()).toBe("business");
+    useStorage({ "isothrum-design": "neon" });
+    expect(loadDesign()).toBeNull();
+  });
+
+  test("keep the kind each toolbar block places", () => {
+    useStorage();
+    expect(loadBlockChoices()).toEqual({});
+    saveBlockChoices({ router: "router-frr" });
+    expect(loadBlockChoices()).toEqual({ router: "router-frr" });
+  });
+});
+
+describe("auto-start and the attached project", () => {
+  test("a lab starts with the app once it is set to, until it is unset", () => {
+    useStorage();
+    setAutoStarts("lab-a", true);
+    setAutoStarts("lab-a", true);
+    expect(autoStarts("lab-a")).toBe(true);
+    setAutoStarts("lab-a", false);
+    expect(autoStarts("lab-a")).toBe(false);
+  });
+
+  test("keeps the attached project, and forgets it when detached", () => {
+    const held = useStorage();
+    saveProject({ id: "p1", name: "office" });
+    expect(loadProject()).toEqual({ id: "p1", name: "office" });
+    saveProject(null);
+    expect(held.has("isothrum-project")).toBe(false);
+  });
+});
+
+test("blocked storage keeps nothing and reads nothing, without failing", () => {
+  useBlockedStorage();
+  expect(() => {
+    saveDraft({ name: "lab", nodes: [], edges: [] });
+    saveDesign("sketch");
+    setAutoStarts("lab", true);
+  }).not.toThrow();
+  expect([loadDraft(), loadDesign(), loadBlockChoices(), loadProject(), loadDevices()]).toEqual([null, null, null, null, []]);
+});

package/src/lib/tool/storage.ts

@@ -0,0 +1,127 @@
+import { isDesign, normalizeDraft, storedEdges, storedNodes } from "./draft";
+import type { Design, Draft } from "./model";
+import { currentMachine } from "./os";
+import type { Preset } from "./presets";
+
+/**
+ * What the editor keeps in this browser (localStorage). Storage can be blocked (a private
+ * window) or full: then reading gives nothing and writing keeps nothing, and the editor works on.
+ */
+
+const DRAFT_KEY = "isothrum-canvas-v1";
+const DEVICES_KEY = "isothrum-devices-v1";
+const DESIGN_KEY = "isothrum-design";
+const BLOCKS_KEY = "isothrum-toolbar-blocks";
+const AUTO_START_KEY = "isothrum-auto-start";
+const PROJECT_KEY = "isothrum-project";
+
+/** The stored value at `key`, parsed; null when there is none or it can't be read. */
+function read(key: string): unknown {
+  try {
+    const raw = localStorage.getItem(key);
+    return raw === null ? null : (JSON.parse(raw) as unknown);
+  } catch {
+    return null;
+  }
+}
+
+/** Stores `value` at `key` as JSON, or removes it when null. */
+function write(key: string, value: unknown): void {
+  try {
+    if (value === null) localStorage.removeItem(key);
+    else localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+    // Not kept: it lasts as long as the page.
+  }
+}
+
+/** The last lab drawn in this browser; none (a blank canvas) when what is kept hasn't a lab's shape. */
+export function loadDraft(): Draft | null {
+  return normalizeDraft(read(DRAFT_KEY));
+}
+
+/** Keeps the lab, without its UI state (selection is not part of the lab). */
+export function saveDraft(draft: Draft): void {
+  write(DRAFT_KEY, { name: draft.name, nodes: storedNodes(draft.nodes), edges: storedEdges(draft.edges) });
+}
+
+/** Whether a stored device has what placing it needs: an id, its machine, a name prefix. */
+function isPreset(p: unknown): p is Preset {
+  if (typeof p !== "object" || p === null) return false;
+  const { id, data, prefix } = p as Partial<Record<keyof Preset, unknown>>;
+  return Boolean(id) && Boolean(data) && Boolean(prefix);
+}
+
+/** Devices saved from the canvas (GNS3's appliances), placed from the toolbar like the built-in ones. */
+export function loadDevices(): Preset[] {
+  const list = read(DEVICES_KEY);
+  // Saved before Isoloom's new format: OS names as it writes them now.
+  return Array.isArray(list) ? list.filter(isPreset).map((p) => ({ ...p, data: currentMachine(p.data) })) : [];
+}
+
+export function saveDevices(list: Preset[]): void {
+  write(DEVICES_KEY, list);
+}
+
+/** The canvas's look picked in this browser, if any. */
+export function loadDesign(): Design | null {
+  try {
+    const saved = localStorage.getItem(DESIGN_KEY);
+    return isDesign(saved) ? saved : null;
+  } catch {
+    return null;
+  }
+}
+
+export function saveDesign(design: Design): void {
+  try {
+    localStorage.setItem(DESIGN_KEY, design);
+  } catch {
+    // The choice lasts as long as the page.
+  }
+}
+
+/** The kind each toolbar block places, by block id, as picked last. */
+export function loadBlockChoices(): Record<string, string> | null {
+  try {
+    const saved: unknown = JSON.parse(localStorage.getItem(BLOCKS_KEY) ?? "{}");
+    return saved && typeof saved === "object" ? (saved as Record<string, string>) : null;
+  } catch {
+    // The first kind of each block.
+    return null;
+  }
+}
+
+export function saveBlockChoices(choices: Record<string, string>): void {
+  write(BLOCKS_KEY, choices);
+}
+
+/** The labs that start when the desktop app opens on them (GNS3's auto-start). */
+function autoStartLabs(): string[] {
+  const list = read(AUTO_START_KEY);
+  return Array.isArray(list) ? list.filter((x): x is string => typeof x === "string") : [];
+}
+
+/** Whether `lab` starts when the app opens on it. */
+export function autoStarts(lab: string): boolean {
+  return autoStartLabs().includes(lab);
+}
+
+export function setAutoStarts(lab: string, on: boolean): void {
+  const others = autoStartLabs().filter((l) => l !== lab);
+  write(AUTO_START_KEY, on ? [...others, lab] : others);
+}
+
+/** The saved project the editor is attached to. */
+export interface ProjectRef {
+  id: string;
+  name: string;
+}
+
+export function loadProject(): ProjectRef | null {
+  return read(PROJECT_KEY) as ProjectRef | null;
+}
+
+export function saveProject(p: ProjectRef | null): void {
+  write(PROJECT_KEY, p);
+}

package/src/lib/tool/switch-edit.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, test } from "vitest";
+import { addVlan, changeVlan, cyclePort, removeVlan, vlanNumber } from "./switch-edit";
+import { switchNode } from "@/test/lab";
+
+/** vlan10 on ports 1 and 2, vlan20 on port 3, port 4 a trunk, the rest unassigned. */
+const data = switchNode("sw1").data;
+
+test("cyclePort steps a port through each VLAN, then trunk, then unassigned", () => {
+  expect([0, 2, 3, 4].map((i) => cyclePort(data, i).ports[i])).toEqual([20, "trunk", null, 10]);
+});
+
+describe("VLANs", () => {
+  test("a renumbered VLAN moves its ports along", () => {
+    expect(changeVlan(data, 10, { id: 30 })).toEqual({
+      vlans: [
+        { id: 30, cidr: "10.10.10.0/24" },
+        { id: 20, cidr: "10.10.20.0/24" },
+      ],
+      ports: [30, 30, 20, "trunk", null, null, null, null],
+    });
+  });
+
+  test("a VLAN's new block leaves its ports", () => {
+    expect(changeVlan(data, 20, { cidr: "10.10.99.0/24" }).ports).toBe(data.ports);
+  });
+
+  test("a removed VLAN leaves its ports unassigned", () => {
+    expect(removeVlan(data, 10)).toEqual({ vlans: [{ id: 20, cidr: "10.10.20.0/24" }], ports: [null, null, 20, "trunk", null, null, null, null] });
+  });
+
+  test("a new VLAN is numbered 10 after the highest, with its own block", () => {
+    expect(addVlan(data).vlans.at(-1)).toEqual({ id: 30, cidr: "10.10.30.0/24" });
+    expect(addVlan({ ...data, vlans: [] }).vlans).toEqual([{ id: 10, cidr: "10.10.10.0/24" }]);
+  });
+
+  test("a VLAN numbered past 255 gets a block outside 10.10", () => {
+    expect(addVlan({ ...data, vlans: [{ id: 250, cidr: "x" }] }).vlans.at(-1)).toEqual({ id: 260, cidr: "10.11.0.0/24" });
+  });
+});
+
+describe("vlanNumber", () => {
+  test("takes a number from 1 to 4094", () => {
+    expect(["1", "30", "4094"].map((t) => vlanNumber(data, t))).toEqual([1, 30, 4094]);
+  });
+
+  test("refuses one out of range, not a number, or one the switch has", () => {
+    expect(["0", "4095", "abc", "10"].map((t) => vlanNumber(data, t))).toEqual([null, null, null, null]);
+  });
+});

package/src/lib/tool/switch-edit.ts

@@ -0,0 +1,38 @@
+import { TRUNK, type PortMode, type SwitchNode } from "./model";
+
+/** Editing a switch on the canvas: each change returns the switch's fields that change. */
+
+type SwitchData = SwitchNode["data"];
+
+/** A click steps a port through each VLAN, then trunk, then unassigned. */
+export function cyclePort(data: SwitchData, i: number): Pick<SwitchData, "ports"> {
+  const order: PortMode[] = [...data.vlans.map((v) => v.id), TRUNK, null];
+  const next = order[(order.indexOf(data.ports[i]) + 1) % order.length];
+  return { ports: data.ports.map((p, j) => (j === i ? next : p)) };
+}
+
+/** A VLAN's number or block changed; a new number moves its ports along. */
+export function changeVlan(data: SwitchData, old: number, patch: { id?: number; cidr?: string }): Pick<SwitchData, "vlans" | "ports"> {
+  const renumbered = patch.id;
+  return {
+    vlans: data.vlans.map((v) => (v.id === old ? { ...v, ...patch } : v)),
+    ports: renumbered === undefined ? data.ports : data.ports.map((p) => (p === old ? renumbered : p)),
+  };
+}
+
+/** A VLAN removed: its ports are left unassigned. */
+export function removeVlan(data: SwitchData, vid: number): Pick<SwitchData, "vlans" | "ports"> {
+  return { vlans: data.vlans.filter((v) => v.id !== vid), ports: data.ports.map((p) => (p === vid ? null : p)) };
+}
+
+/** A new VLAN, numbered 10 after the highest, with its own block. */
+export function addVlan(data: SwitchData): Pick<SwitchData, "vlans"> {
+  const next = Math.max(0, ...data.vlans.map((v) => v.id)) + 10;
+  return { vlans: [...data.vlans, { id: next, cidr: next <= 255 ? `10.10.${String(next)}.0/24` : "10.11.0.0/24" }] };
+}
+
+/** A typed VLAN number, if it can be one: 1–4094, and not one the switch has already. */
+export function vlanNumber(data: SwitchData, typed: string): number | null {
+  const n = Number(typed);
+  return n > 0 && n < 4095 && !data.vlans.some((v) => v.id === n) ? n : null;
+}