@orangeworks/orangetree 0.4.0

package/dist/public/canvas.js

@@ -0,0 +1,362 @@
+import { t } from "./i18n.js";
+const SVG_NS = "http://www.w3.org/2000/svg";
+const COL_W = 170;
+const ROW_H = 120;
+const R = 24;
+const DEFAULT_FIT_SCALE = 0.7;
+const FIT_PAD = 72;
+const SCALE_KEY = "otree-fit-scale";
+const STATUS_VIEW = {
+  preparing: { fill: "#eeeeee", stroke: "#cccccc" },
+  in_progress: { fill: "#e8f1ea", stroke: "#2F6B3D" },
+  blocked: { fill: "#eef1f4", stroke: "#64748b" },
+  waiting_handoff: { fill: "#eaf2ee", stroke: "#2F6B3D" },
+  review: { fill: "#fbf0e4", stroke: "#B45309" },
+  done: { fill: "#fbe9dc", stroke: "#E0612A" }
+};
+function svgEl(tag, attrs) {
+  const e = document.createElementNS(SVG_NS, tag);
+  for (const [k, v] of Object.entries(attrs)) e.setAttribute(k, String(v));
+  return e;
+}
+const GLYPHS = {
+  preparing: [
+    ["circle", { r: 7, fill: "none", stroke: "#bbb", "stroke-width": 2, "stroke-dasharray": "4 4" }]
+  ],
+  blocked: [
+    ["ellipse", { cx: 0, cy: 1, rx: 7, ry: 10, fill: "#64748b" }],
+    ["path", { d: "M 0 -9 Q 4 -1 0 7 Q -4 -1 0 -9 Z", fill: "#94a3b8" }]
+  ],
+  in_progress: [
+    ["path", { d: "M 0 9 Q -16 2 -11 -13 Q 5 -7 0 9 Z", fill: "#2F6B3D" }],
+    ["path", { d: "M 2 10 Q 15 0 10 -14 Q -5 -5 2 10 Z", fill: "#4C9A5E" }],
+    ["path", { d: "M 2 10 Q 5 -2 10 -14", stroke: "#2F6B3D", "stroke-width": 1.2, fill: "none" }]
+  ],
+  waiting_handoff: [
+    ["line", { x1: 0, y1: 14, x2: 0, y2: 3, stroke: "#2F6B3D", "stroke-width": 1.8 }],
+    ["path", { d: "M 0 3 Q -3 -12 0 -17 Q 3 -12 0 3 Z", fill: "#C2710C" }],
+    ["path", { d: "M 0 6 Q -9 1 -7 -9 Q 0 -5 0 6 Z", fill: "#3f8a52" }],
+    ["path", { d: "M 0 6 Q 9 1 7 -9 Q 0 -5 0 6 Z", fill: "#4C9A5E" }]
+  ],
+  review: [
+    ["ellipse", { cx: 0, cy: -9, rx: 4.5, ry: 7.5, fill: "#C2710C" }],
+    ["ellipse", { cx: 9, cy: -3, rx: 4.5, ry: 7.5, fill: "#C2710C", transform: "rotate(72 9 -3)" }],
+    ["ellipse", { cx: 5.5, cy: 8, rx: 4.5, ry: 7.5, fill: "#C2710C", transform: "rotate(144 5.5 8)" }],
+    ["ellipse", { cx: -5.5, cy: 8, rx: 4.5, ry: 7.5, fill: "#C2710C", transform: "rotate(216 -5.5 8)" }],
+    ["ellipse", { cx: -9, cy: -3, rx: 4.5, ry: 7.5, fill: "#C2710C", transform: "rotate(288 -9 -3)" }],
+    ["circle", { r: 4, fill: "#7C3A06" }]
+  ],
+  done: [
+    ["circle", { cx: 0, cy: 3, r: 11, fill: "#E0612A" }],
+    ["circle", { cx: -3.5, cy: -0.5, r: 3, fill: "#EE8A5C" }],
+    ["line", { x1: 0, y1: -8, x2: 0, y2: -13, stroke: "#2F6B3D", "stroke-width": 1.8 }],
+    ["path", { d: "M 0 -11 Q 9 -16 12 -9 Q 3 -6 0 -11 Z", fill: "#4C9A5E" }]
+  ]
+};
+function makeGlyph(status) {
+  const g = document.createElementNS(SVG_NS, "g");
+  g.setAttribute("class", "glyph");
+  for (const [tag, attrs] of GLYPHS[status] ?? GLYPHS.in_progress) g.append(svgEl(tag, attrs));
+  return g;
+}
+class Canvas {
+  svg;
+  onSelect;
+  onMove;
+  onContextMenu;
+  view;
+  fitScale;
+  nodes = [];
+  sig = "";
+  constructor(svg, { onSelect, onMove, onContextMenu }) {
+    this.svg = svg;
+    this.onSelect = onSelect;
+    this.onMove = onMove;
+    this.onContextMenu = onContextMenu;
+    this.view = { x: -80, y: -60, w: 1200, h: 800 };
+    const saved = parseFloat(localStorage.getItem(SCALE_KEY) ?? "");
+    this.fitScale = saved > 0 ? saved : DEFAULT_FIT_SCALE;
+    this.applyView();
+    this.bindPanZoom();
+  }
+  applyView() {
+    const { x, y, w, h } = this.view;
+    this.svg.setAttribute("viewBox", `${x} ${y} ${w} ${h}`);
+  }
+  // Remember a user-chosen zoom as the fit cap (so the next auto-fit lands the same size).
+  rememberScale() {
+    const cw = this.svg.clientWidth || 800;
+    const scale = Math.max(0.1, Math.min(3, cw / this.view.w));
+    this.fitScale = scale;
+    localStorage.setItem(SCALE_KEY, String(scale));
+  }
+  // Zoom about the view center (factor>1 = out, <1 = in).
+  zoomBy(factor) {
+    const cx = this.view.x + this.view.w / 2;
+    const cy = this.view.y + this.view.h / 2;
+    this.view.w *= factor;
+    this.view.h *= factor;
+    this.view.x = cx - this.view.w / 2;
+    this.view.y = cy - this.view.h / 2;
+    this.applyView();
+    this.rememberScale();
+  }
+  // Fit the whole tree to the top-center of the canvas (capped so nodes don't blow up).
+  fitView() {
+    const nodes = this.nodes;
+    if (!nodes.length) return;
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    for (const n of nodes) {
+      minX = Math.min(minX, n.px);
+      maxX = Math.max(maxX, n.px);
+      minY = Math.min(minY, n.py);
+      maxY = Math.max(maxY, n.py);
+    }
+    const cw = this.svg.clientWidth || 800;
+    const ch = this.svg.clientHeight || 600;
+    const aspect = cw / ch;
+    const contentW = maxX - minX + R * 2;
+    const contentH = maxY - minY + R * 2;
+    let vw = Math.max(contentW + FIT_PAD * 2, (contentH + FIT_PAD * 2) * aspect);
+    const minVw = cw / this.fitScale;
+    if (vw < minVw) vw = minVw;
+    const vh = vw / aspect;
+    this.view.w = vw;
+    this.view.h = vh;
+    this.view.x = (minX + maxX) / 2 - vw / 2;
+    this.view.y = minY - R - FIT_PAD;
+    this.applyView();
+  }
+  bindPanZoom() {
+    let panning = null;
+    this.svg.addEventListener("pointerdown", (e) => {
+      if (e.target?.closest(".node")) return;
+      panning = { px: e.clientX, py: e.clientY, vx: this.view.x, vy: this.view.y };
+      this.svg.classList.add("panning");
+      this.svg.setPointerCapture(e.pointerId);
+    });
+    this.svg.addEventListener("pointermove", (e) => {
+      if (!panning) return;
+      const scale = this.view.w / this.svg.clientWidth;
+      this.view.x = panning.vx - (e.clientX - panning.px) * scale;
+      this.view.y = panning.vy - (e.clientY - panning.py) * scale;
+      this.applyView();
+    });
+    this.svg.addEventListener("pointerup", () => {
+      panning = null;
+      this.svg.classList.remove("panning");
+    });
+    this.svg.addEventListener("wheel", (e) => {
+      e.preventDefault();
+      const factor = e.deltaY > 0 ? 1.12 : 1 / 1.12;
+      const rect = this.svg.getBoundingClientRect();
+      const cx = this.view.x + (e.clientX - rect.left) / rect.width * this.view.w;
+      const cy = this.view.y + (e.clientY - rect.top) / rect.height * this.view.h;
+      this.view.w *= factor;
+      this.view.h *= factor;
+      this.view.x = cx - (cx - this.view.x) * factor;
+      this.view.y = cy - (cy - this.view.y) * factor;
+      this.applyView();
+      this.rememberScale();
+    }, { passive: false });
+  }
+  // Tree layout: assign x-slots from leaves up, parent centered over children.
+  layout(nodes) {
+    const byId = {};
+    for (const n of nodes) byId[n.id] = { ...n };
+    const children = {};
+    const roots = [];
+    for (const n of Object.values(byId)) {
+      if (n.parentId && byId[n.parentId]) (children[n.parentId] ??= []).push(n);
+      else roots.push(n);
+    }
+    const order = (a, b) => a.createdAt - b.createdAt;
+    let slot = 0;
+    const place = (n, depth) => {
+      const kids = (children[n.id] ?? []).sort(order);
+      if (!kids.length) {
+        n.gx = slot++;
+      } else {
+        for (const k of kids) place(k, depth + 1);
+        n.gx = (kids[0].gx + kids[kids.length - 1].gx) / 2;
+      }
+      n.gy = depth;
+    };
+    for (const r of roots.sort(order)) {
+      place(r, 0);
+      slot++;
+    }
+    for (const n of Object.values(byId)) {
+      if (n.pos && typeof n.pos.x === "number") {
+        n.px = n.pos.x;
+        n.py = n.pos.y;
+      } else {
+        n.px = n.gx * COL_W;
+        n.py = n.gy * ROW_H;
+      }
+    }
+    return { byId };
+  }
+  // tree.nodes = full layout set (whole project). visibleIds = ids actually shown (null = all).
+  // dimmedIds = subset of shown ids drawn faded (archived nodes under '아카이브 표시'). S7.
+  render(tree, selectedId, candidates = /* @__PURE__ */ new Set(), busy = /* @__PURE__ */ new Set(), visibleIds = null, dimmedIds = /* @__PURE__ */ new Set()) {
+    const nodes = Object.values(tree.nodes ?? {});
+    this.svg.replaceChildren();
+    this.nodes = [];
+    if (!nodes.length) {
+      this.sig = "";
+      return;
+    }
+    const { byId } = this.layout(nodes);
+    const isVisible = (id) => !visibleIds || visibleIds.has(id);
+    const shown = Object.values(byId).filter((n) => isVisible(n.id));
+    this.nodes = shown;
+    const edges = document.createElementNS(SVG_NS, "g");
+    const nodeLayer = document.createElementNS(SVG_NS, "g");
+    this.svg.append(edges, nodeLayer);
+    for (const n of shown) {
+      if (n.parentId && byId[n.parentId] && isVisible(n.parentId)) {
+        const p = byId[n.parentId];
+        edges.append(this.edge(p.px, p.py + R, n.px, n.py - R, false));
+      }
+      for (const dep of n.dependsOn ?? []) {
+        const d = byId[dep];
+        if (d && isVisible(dep)) edges.append(this.edge(d.px, d.py, n.px, n.py, true));
+      }
+      nodeLayer.append(this.node(n, n.id === selectedId, candidates.has(n.id), busy.has(n.id), dimmedIds.has(n.id)));
+    }
+    const sig = this.nodes.map((n) => n.id).sort().join(",");
+    if (sig !== this.sig) {
+      this.sig = sig;
+      this.fitView();
+    }
+  }
+  // Called during drag: redraw only the edge layer from current px/py.
+  redrawEdges() {
+    const edgeLayer = this.svg.querySelector("g");
+    if (!edgeLayer || !this.nodes.length) return;
+    const byId = {};
+    for (const n of this.nodes) byId[n.id] = n;
+    edgeLayer.replaceChildren();
+    for (const n of this.nodes) {
+      if (n.parentId && byId[n.parentId]) {
+        const p = byId[n.parentId];
+        edgeLayer.append(this.edge(p.px, p.py + R, n.px, n.py - R, false));
+      }
+      for (const dep of n.dependsOn ?? []) {
+        const d = byId[dep];
+        if (d) edgeLayer.append(this.edge(d.px, d.py, n.px, n.py, true));
+      }
+    }
+  }
+  edge(x1, y1, x2, y2, isDep) {
+    const path = document.createElementNS(SVG_NS, "path");
+    const my = (y1 + y2) / 2;
+    path.setAttribute("d", `M ${x1} ${y1} C ${x1} ${my}, ${x2} ${my}, ${x2} ${y2}`);
+    path.setAttribute("class", isDep ? "edge dep" : "edge");
+    return path;
+  }
+  rimBadge(symbol, fill, size = 16) {
+    const t2 = document.createElementNS(SVG_NS, "text");
+    t2.setAttribute("x", "18");
+    t2.setAttribute("y", "-18");
+    t2.setAttribute("text-anchor", "middle");
+    t2.setAttribute("dominant-baseline", "central");
+    t2.style.fill = fill;
+    t2.style.fontSize = `${size}px`;
+    t2.style.fontWeight = "800";
+    t2.style.pointerEvents = "none";
+    t2.textContent = symbol;
+    return t2;
+  }
+  node(n, selected, candidate, busy, dimmed = false) {
+    const view = STATUS_VIEW[n.status] ?? STATUS_VIEW.in_progress;
+    const g = document.createElementNS(SVG_NS, "g");
+    g.setAttribute("class", `node${selected ? " selected" : ""}${n.status === "preparing" ? " preparing" : ""}${dimmed ? " dimmed" : ""}`);
+    g.setAttribute("transform", `translate(${n.px}, ${n.py})`);
+    g.dataset.id = n.id;
+    const body = document.createElementNS(SVG_NS, "circle");
+    body.setAttribute("class", "body");
+    body.setAttribute("r", String(R));
+    body.setAttribute("fill", view.fill);
+    body.setAttribute("stroke", view.stroke);
+    if (busy) {
+      for (const delay of ["0s", "0.8s"]) {
+        const ring = document.createElementNS(SVG_NS, "circle");
+        ring.setAttribute("class", "busy-ring");
+        ring.setAttribute("r", String(R));
+        ring.style.animationDelay = delay;
+        g.append(ring);
+      }
+    }
+    const icon = makeGlyph(n.status);
+    const otid = document.createElementNS(SVG_NS, "text");
+    otid.setAttribute("class", "otid");
+    otid.setAttribute("y", String(-R - 8));
+    otid.textContent = n.id;
+    const label = document.createElementNS(SVG_NS, "text");
+    label.setAttribute("class", "label");
+    label.setAttribute("y", String(R + 16));
+    label.textContent = n.title.length > 18 ? `${n.title.slice(0, 17)}\u2026` : n.title;
+    if (n.mergeState === "conflict") {
+      g.append(this.rimBadge("!", "#dc2626"));
+    } else if (n.warn) {
+      const w = this.rimBadge("!", "#dc2626");
+      const t2 = document.createElementNS(SVG_NS, "title");
+      t2.textContent = n.warn;
+      w.append(t2);
+      w.style.pointerEvents = "auto";
+      g.append(w);
+    } else if ((n.notices ?? []).some((x) => x.kind === "code-change" && !x.delivered && !x.ack)) {
+      g.append(this.rimBadge("\u27F3", "#e8740c", 15));
+    }
+    if (candidate) {
+      const ring = document.createElementNS(SVG_NS, "circle");
+      ring.setAttribute("r", String(R + 6));
+      ring.setAttribute("class", "candidate-ring");
+      g.prepend(ring);
+      const hint = document.createElementNS(SVG_NS, "text");
+      hint.setAttribute("class", "otid");
+      hint.setAttribute("y", String(-R - 20));
+      hint.textContent = t("canvas.candidate.hint");
+      g.append(hint);
+    }
+    g.append(body, icon, otid, label);
+    g.addEventListener("pointerdown", (e) => {
+      e.stopPropagation();
+      const scale = this.view.w / this.svg.clientWidth;
+      const start = { px: e.clientX, py: e.clientY, x: n.px, y: n.py, moved: false };
+      const onMove = (ev) => {
+        if (!start.moved && Math.hypot(ev.clientX - start.px, ev.clientY - start.py) < 4) return;
+        start.moved = true;
+        const dx = (ev.clientX - start.px) * scale;
+        const dy = (ev.clientY - start.py) * scale;
+        n.px = start.x + dx;
+        n.py = start.y + dy;
+        g.setAttribute("transform", `translate(${n.px}, ${n.py})`);
+        this.redrawEdges();
+      };
+      const onUp = () => {
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        if (start.moved) this.onMove(n.id, { x: Math.round(n.px), y: Math.round(n.py) });
+        else this.onSelect(n.id);
+      };
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+    });
+    g.addEventListener("dblclick", (e) => {
+      e.stopPropagation();
+      this.onMove(n.id, null);
+    });
+    g.addEventListener("contextmenu", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.onContextMenu?.(n.id, e.clientX, e.clientY);
+    });
+    return g;
+  }
+}
+export {
+  Canvas
+};