@neuctra/notlix-mcp 1.0.0 → 2.0.1

package/src/shared/diagrams.js

@@ -0,0 +1,451 @@
+// Copied from neuctra-notlix-client/lib/workspace/diagrams.js by scripts/sync.mjs. Don't edit here.
+
+// The diagram model. A diagram is JSON: nodes are boxes on an open canvas, and
+// edges name the nodes they connect, so a connector follows when a node moves.
+
+import { resizeFreely } from "./presentations.js";
+import { shapePath } from "./slideShapes.js";
+
+export const UNTITLED_DIAGRAM = "Untitled diagram";
+export const GRID_SIZE = 10;
+export const MIN_ZOOM = 0.2;
+export const MAX_ZOOM = 3;
+
+const STUB = 20;
+const EXPORT_PADDING = 40;
+
+const newId = () => crypto.randomUUID().slice(0, 8);
+
+export const snap = (value) => Math.round(value / GRID_SIZE) * GRID_SIZE;
+
+// ---- Node shapes ------------------------------------------------------------
+
+function terminator(w, h) {
+  const r = Math.min(w, h) / 2;
+  return `M${r} 0H${w - r}A${r} ${r} 0 0 1 ${w - r} ${h}H${r}A${r} ${r} 0 0 1 ${r} 0Z`;
+}
+
+function cylinder(w, h) {
+  const ry = Math.min(h * 0.14, 16);
+  const rx = w / 2;
+  return `M0 ${ry}A${rx} ${ry} 0 0 1 ${w} ${ry}V${h - ry}A${rx} ${ry} 0 0 1 0 ${h - ry}ZM0 ${ry}A${rx} ${ry} 0 0 0 ${w} ${ry}`;
+}
+
+function documentShape(w, h) {
+  return `M0 0H${w}V${h * 0.84}C${w * 0.75} ${h * 0.68} ${w * 0.5} ${h * 1.05} 0 ${h * 0.86}Z`;
+}
+
+function note(w, h) {
+  const fold = Math.min(w, h) * 0.22;
+  return `M0 0H${w - fold}L${w} ${fold}V${h}H0ZM${w - fold} 0V${fold}H${w}`;
+}
+
+function subroutine(w, h) {
+  const inset = Math.min(w * 0.1, 14);
+  return `M0 0H${w}V${h}H0ZM${inset} 0V${h}M${w - inset} 0V${h}`;
+}
+
+function cloud(w, h) {
+  const x = (value) => (value * w) / 100;
+  const y = (value) => (value * h) / 100;
+  return `M${x(25)} ${y(85)}C${x(5)} ${y(85)} ${x(0)} ${y(55)} ${x(18)} ${y(50)}C${x(12)} ${y(25)} ${x(40)} ${y(12)} ${x(50)} ${y(30)}C${x(62)} ${y(5)} ${x(92)} ${y(20)} ${x(84)} ${y(45)}C${x(104)} ${y(50)} ${x(98)} ${y(85)} ${x(76)} ${y(85)}Z`;
+}
+
+// Sizes are even multiples of the grid, so centered shapes line up exactly.
+const wide = { w: 140, h: 80 };
+
+export const DIAGRAM_SHAPES = [
+  { id: "rect", name: "Process", group: "Flowchart", ...wide },
+  { id: "terminator", name: "Start or end", group: "Flowchart", w: 140, h: 60, draw: terminator },
+  { id: "diamond", name: "Decision", group: "Flowchart", w: 160, h: 100 },
+  { id: "parallelogram", name: "Input or output", group: "Flowchart", ...wide },
+  { id: "documentShape", name: "Document", group: "Flowchart", ...wide, draw: documentShape },
+  { id: "subroutine", name: "Subprocess", group: "Flowchart", ...wide, draw: subroutine },
+  { id: "hexagon", name: "Preparation", group: "Flowchart", ...wide },
+  { id: "roundRect", name: "Rounded box", group: "General", ...wide },
+  { id: "ellipse", name: "Ellipse", group: "General", w: 120, h: 120 },
+  { id: "triangle", name: "Triangle", group: "General", w: 120, h: 100 },
+  {
+    id: "note",
+    name: "Sticky note",
+    group: "General",
+    w: 140,
+    h: 120,
+    draw: note,
+    fields: { fill: "#fef3c7", stroke: "#b08900", textColor: "#3f3000" },
+  },
+  {
+    id: "text",
+    name: "Text",
+    group: "General",
+    w: 120,
+    h: 40,
+    draw: (w, h) => shapePath("rect", w, h),
+    fields: { fill: "none", strokeWidth: 0 },
+  },
+  { id: "cylinder", name: "Database", group: "Systems", w: 120, h: 100, draw: cylinder },
+  { id: "cloud", name: "Cloud", group: "Systems", w: 160, h: 100, draw: cloud },
+  {
+    id: "container",
+    name: "Group box",
+    group: "Systems",
+    w: 360,
+    h: 240,
+    draw: (w, h) => shapePath("rect", w, h),
+    fields: { fill: "none", dash: "dash", valign: "top" },
+  },
+];
+
+export const DIAGRAM_SHAPE_GROUPS = ["Flowchart", "General", "Systems"];
+
+const shapeById = (shapeId) =>
+  DIAGRAM_SHAPES.find((shape) => shape.id === shapeId) || DIAGRAM_SHAPES[0];
+
+export const diagramShapePath = (shapeId, w, h) => {
+  const shape = shapeById(shapeId);
+  return shape.draw ? shape.draw(w, h) : shapePath(shape.id, w, h);
+};
+
+export function createNode(shapeId, centerX, centerY, fields = {}) {
+  const shape = shapeById(shapeId);
+  const { w, h } = { w: shape.w, h: shape.h, ...fields };
+
+  return {
+    id: newId(),
+    shape: shape.id,
+    x: snap(centerX - w / 2),
+    y: snap(centerY - h / 2),
+    w,
+    h,
+    text: "",
+    fill: null,
+    stroke: null,
+    textColor: null,
+    strokeWidth: 2,
+    dash: "solid",
+    fontSize: 14,
+    bold: false,
+    valign: "middle",
+    ...shape.fields,
+    ...fields,
+  };
+}
+
+export function createEdge(from, to, fields = {}) {
+  return {
+    id: newId(),
+    from,
+    to,
+    fromSide: null,
+    toSide: null,
+    label: "",
+    style: "elbow",
+    stroke: null,
+    strokeWidth: 2,
+    dash: "solid",
+    startArrow: false,
+    endArrow: true,
+    ...fields,
+  };
+}
+
+/** Records can come from anywhere, so a diagram always has both lists. */
+export function normalizeDiagram({ nodes, edges }) {
+  return {
+    nodes: Array.isArray(nodes) ? nodes : [],
+    edges: Array.isArray(edges) ? edges : [],
+  };
+}
+
+/** Plain text for card search. */
+export function diagramText({ nodes, edges }) {
+  return [...nodes.map((node) => node.text), ...edges.map((edge) => edge.label)]
+    .filter(Boolean)
+    .join(" ");
+}
+
+// ---- Connector routing ------------------------------------------------------
+
+const SIDES = {
+  top: { x: 0, y: -1 },
+  right: { x: 1, y: 0 },
+  bottom: { x: 0, y: 1 },
+  left: { x: -1, y: 0 },
+};
+
+export const SIDE_NAMES = Object.keys(SIDES);
+
+const centerOf = ({ x, y, w, h }) => ({ x: x + w / 2, y: y + h / 2 });
+
+export function anchorOf(node, side) {
+  const center = centerOf(node);
+  return {
+    x: center.x + (SIDES[side].x * node.w) / 2,
+    y: center.y + (SIDES[side].y * node.h) / 2,
+  };
+}
+
+/** The side of `node` that faces `target`. */
+function facingSide(node, target) {
+  const center = centerOf(node);
+  const dx = target.x - center.x;
+  const dy = target.y - center.y;
+
+  if (Math.abs(dx) >= Math.abs(dy)) return dx >= 0 ? "right" : "left";
+  return dy >= 0 ? "bottom" : "top";
+}
+
+function polylineMiddle(points) {
+  const lengths = points.slice(1).map((point, index) =>
+    Math.hypot(point.x - points[index].x, point.y - points[index].y),
+  );
+  let remaining = lengths.reduce((total, length) => total + length, 0) / 2;
+
+  for (let index = 0; index < lengths.length; index += 1) {
+    if (remaining <= lengths[index]) {
+      const ratio = lengths[index] ? remaining / lengths[index] : 0;
+      return {
+        x: points[index].x + (points[index + 1].x - points[index].x) * ratio,
+        y: points[index].y + (points[index + 1].y - points[index].y) * ratio,
+      };
+    }
+    remaining -= lengths[index];
+  }
+
+  return points[0];
+}
+
+function elbowPoints(start, startDir, end, endDir) {
+  const a = { x: start.x + startDir.x * STUB, y: start.y + startDir.y * STUB };
+  const b = { x: end.x + endDir.x * STUB, y: end.y + endDir.y * STUB };
+  const startsAcross = startDir.x !== 0;
+  const endsAcross = endDir.x !== 0;
+
+  let middle;
+  if (startsAcross && endsAcross) {
+    const x = (a.x + b.x) / 2;
+    middle = [{ x, y: a.y }, { x, y: b.y }];
+  } else if (!startsAcross && !endsAcross) {
+    const y = (a.y + b.y) / 2;
+    middle = [{ x: a.x, y }, { x: b.x, y }];
+  } else {
+    middle = [startsAcross ? { x: b.x, y: a.y } : { x: a.x, y: b.y }];
+  }
+
+  return [start, a, ...middle, b, end];
+}
+
+/** Draws a connector between two points, leaving each in the given direction. */
+export function routeBetween(start, startDir, end, endDir, style) {
+  if (style === "curve") {
+    const pull = Math.max(40, Math.hypot(end.x - start.x, end.y - start.y) / 3);
+    const c1 = { x: start.x + startDir.x * pull, y: start.y + startDir.y * pull };
+    const c2 = { x: end.x + endDir.x * pull, y: end.y + endDir.y * pull };
+
+    return {
+      d: `M${start.x} ${start.y}C${c1.x} ${c1.y} ${c2.x} ${c2.y} ${end.x} ${end.y}`,
+      start,
+      end,
+      beforeStart: c1,
+      beforeEnd: c2,
+      middle: {
+        x: (start.x + 3 * c1.x + 3 * c2.x + end.x) / 8,
+        y: (start.y + 3 * c1.y + 3 * c2.y + end.y) / 8,
+      },
+    };
+  }
+
+  const points = style === "straight" ? [start, end] : elbowPoints(start, startDir, end, endDir);
+
+  return {
+    d: `M${points.map((point) => `${point.x} ${point.y}`).join("L")}`,
+    start,
+    end,
+    beforeStart: points[1],
+    beforeEnd: points[points.length - 2],
+    middle: polylineMiddle(points),
+  };
+}
+
+const oppositeOf = (dir) => ({ x: -dir.x, y: -dir.y });
+
+/** `pointer` replaces one end while it's being dragged. */
+export function routeEdge(edge, nodes, pointer = null) {
+  const fromNode = nodes.find((node) => node.id === edge.from);
+  const toNode = nodes.find((node) => node.id === edge.to);
+
+  const fromTarget = pointer?.end === "to" ? pointer : centerOf(toNode || pointer);
+  const toTarget = pointer?.end === "from" ? pointer : centerOf(fromNode || pointer);
+
+  const fromSide = edge.fromSide || (fromNode && facingSide(fromNode, fromTarget));
+  const toSide = edge.toSide || (toNode && facingSide(toNode, toTarget));
+
+  const startDir = fromSide ? SIDES[fromSide] : null;
+  const endDir = toSide ? SIDES[toSide] : null;
+
+  if (pointer?.end === "to") {
+    const start = anchorOf(fromNode, fromSide);
+    return routeBetween(start, startDir, pointer, oppositeOf(startDir), edge.style);
+  }
+  if (pointer?.end === "from") {
+    const end = anchorOf(toNode, toSide);
+    return routeBetween(pointer, oppositeOf(endDir), end, endDir, edge.style);
+  }
+
+  return routeBetween(anchorOf(fromNode, fromSide), startDir, anchorOf(toNode, toSide), endDir, edge.style);
+}
+
+/** Edges whose node was removed can't be drawn. */
+export const drawableEdges = ({ nodes, edges }) => {
+  const ids = new Set(nodes.map((node) => node.id));
+  return edges.filter((edge) => ids.has(edge.from) && ids.has(edge.to));
+};
+
+// ---- Canvas helpers ---------------------------------------------------------
+
+export const nodeAt = (nodes, point) =>
+  [...nodes]
+    .reverse()
+    .find(
+      ({ x, y, w, h }) =>
+        point.x >= x && point.x <= x + w && point.y >= y && point.y <= y + h,
+    );
+
+export function nodesInRect(nodes, rect) {
+  return nodes.filter(
+    ({ x, y, w, h }) =>
+      x < rect.x + rect.w && x + w > rect.x && y < rect.y + rect.h && y + h > rect.y,
+  );
+}
+
+export function boundsOf(nodes) {
+  if (nodes.length === 0) return { x: 0, y: 0, w: 800, h: 500 };
+
+  const left = Math.min(...nodes.map((node) => node.x));
+  const top = Math.min(...nodes.map((node) => node.y));
+  const right = Math.max(...nodes.map((node) => node.x + node.w));
+  const bottom = Math.max(...nodes.map((node) => node.y + node.h));
+
+  return {
+    x: left - EXPORT_PADDING,
+    y: top - EXPORT_PADDING,
+    w: right - left + EXPORT_PADDING * 2,
+    h: bottom - top + EXPORT_PADDING * 2,
+  };
+}
+
+export function resizeNode(box, handle, dx, dy, keepRatio) {
+  const next = resizeFreely(box, handle, dx, dy, keepRatio);
+  const left = snap(next.x);
+  const top = snap(next.y);
+
+  return {
+    x: left,
+    y: top,
+    w: snap(next.x + next.w) - left,
+    h: snap(next.y + next.h) - top,
+  };
+}
+
+/** Copies nodes and the edges between them, offset so the copy is visible. */
+export function cloneNodes(sourceNodes, sourceEdges, offset) {
+  const ids = new Map(sourceNodes.map((node) => [node.id, newId()]));
+
+  return {
+    nodes: sourceNodes.map((node) => ({
+      ...node,
+      id: ids.get(node.id),
+      x: node.x + offset,
+      y: node.y + offset,
+    })),
+    edges: sourceEdges
+      .filter((edge) => ids.has(edge.from) && ids.has(edge.to))
+      .map((edge) => ({
+        ...edge,
+        id: newId(),
+        from: ids.get(edge.from),
+        to: ids.get(edge.to),
+      })),
+  };
+}
+
+// ---- Templates --------------------------------------------------------------
+
+function flowchart() {
+  const start = createNode("terminator", 400, 60, { text: "Start" });
+  const step = createNode("rect", 400, 170, { text: "Do the work" });
+  const check = createNode("diamond", 400, 300, { text: "Is it OK?" });
+  const fix = createNode("rect", 640, 300, { text: "Fix the problem" });
+  const end = createNode("terminator", 400, 430, { text: "End" });
+
+  return {
+    nodes: [start, step, check, fix, end],
+    edges: [
+      createEdge(start.id, step.id),
+      createEdge(step.id, check.id),
+      createEdge(check.id, end.id, { label: "Yes" }),
+      createEdge(check.id, fix.id, { label: "No" }),
+      createEdge(fix.id, step.id, { fromSide: "top", toSide: "right" }),
+    ],
+  };
+}
+
+function orgChart() {
+  const lead = createNode("roundRect", 400, 60, { text: "Lead" });
+  const teams = ["Product", "Engineering", "Sales"].map((text, index) =>
+    createNode("roundRect", 180 + index * 220, 200, { text }),
+  );
+  const people = createNode("roundRect", 400, 340, { text: "Team member" });
+
+  return {
+    nodes: [lead, ...teams, people],
+    edges: [
+      ...teams.map((team) => createEdge(lead.id, team.id, { endArrow: false })),
+      createEdge(teams[1].id, people.id, { endArrow: false }),
+    ],
+  };
+}
+
+function mindMap() {
+  const topic = createNode("ellipse", 400, 240, { text: "Main idea", w: 160, h: 100, bold: true });
+  const spots = [
+    [150, 100, "First idea"],
+    [650, 100, "Second idea"],
+    [150, 380, "Third idea"],
+    [650, 380, "Fourth idea"],
+  ];
+  const ideas = spots.map(([x, y, text]) => createNode("roundRect", x, y, { text }));
+
+  return {
+    nodes: [topic, ...ideas],
+    edges: ideas.map((idea) =>
+      createEdge(topic.id, idea.id, { style: "curve", endArrow: false }),
+    ),
+  };
+}
+
+function systemMap() {
+  const users = createNode("ellipse", 80, 180, { text: "Users", w: 100, h: 100 });
+  const app = createNode("roundRect", 300, 180, { text: "Web app" });
+  const api = createNode("roundRect", 520, 180, { text: "API" });
+  const data = createNode("cylinder", 740, 180, { text: "Database" });
+  const service = createNode("cloud", 520, 340, { text: "Third-party service" });
+
+  return {
+    nodes: [users, app, api, data, service],
+    edges: [
+      createEdge(users.id, app.id),
+      createEdge(app.id, api.id),
+      createEdge(api.id, data.id),
+      createEdge(api.id, service.id, { dash: "dash" }),
+    ],
+  };
+}
+
+export const DIAGRAM_TEMPLATES = [
+  { id: "blank", name: "Blank", description: "An empty canvas.", group: "Basics", build: () => ({ nodes: [], edges: [] }) },
+  { id: "flowchart", name: "Flowchart", description: "Start, a step, a decision and an end.", group: "Basics", build: flowchart },
+  { id: "org", name: "Org chart", description: "A lead, teams and people.", group: "Basics", build: orgChart },
+  { id: "mind", name: "Mind map", description: "One idea in the middle, four around it.", group: "Basics", build: mindMap },
+  { id: "system", name: "System map", description: "Users, an app, an API and a database.", group: "Basics", build: systemMap },
+];