@fortemi/graph 2026.7.2 → 2026.7.4

package/dist/index.js

@@ -77,6 +77,11 @@ function mulberry32(seed) {
 }
 
 // src/layout.ts
+function readPosition(map, id) {
+  if (!map) return void 0;
+  if (map instanceof Map) return map.get(id);
+  return Object.prototype.hasOwnProperty.call(map, id) ? map[id] : void 0;
+}
 var DEFAULTS = {
   width: 760,
   height: 460,
@@ -141,6 +146,29 @@ function layoutCommunityGraph(graph, options = {}) {
       y[index] = centerY + Math.sin(angle) * (algorithm === "radial" ? radius : localRadius * 0.72);
     }
   });
+  const pinnedIndex = /* @__PURE__ */ new Map();
+  const seededIndex = /* @__PURE__ */ new Set();
+  graph.nodes.forEach((node, index) => {
+    const seed = readPosition(options.initialPositions, node.id);
+    if (seed) {
+      x[index] = seed.x;
+      y[index] = seed.y;
+      seededIndex.add(index);
+    }
+    const pin = readPosition(options.pinned, node.id);
+    if (pin) {
+      x[index] = pin.x;
+      y[index] = pin.y;
+      pinnedIndex.set(index, pin);
+      seededIndex.add(index);
+    }
+  });
+  const holdPinned = () => {
+    for (const [index, pos] of pinnedIndex) {
+      x[index] = pos.x;
+      y[index] = pos.y;
+    }
+  };
   if (algorithm === "force" && n > 1) {
     const ticks = Math.max(0, Math.floor(options.ticks ?? DEFAULTS.ticks));
     const seed = options.seed ?? DEFAULTS.seed;
@@ -151,6 +179,7 @@ function layoutCommunityGraph(graph, options = {}) {
     const communityStrength = options.communityStrength ?? DEFAULTS.communityStrength;
     const rng = mulberry32(seed);
     for (let i = 0; i < n; i++) {
+      if (seededIndex.has(i)) continue;
       x[i] += (rng() - 0.5) * 8;
       y[i] += (rng() - 0.5) * 8;
     }
@@ -250,6 +279,7 @@ function layoutCommunityGraph(graph, options = {}) {
         x[i] = clampToRange(x[i], boundsPadding + r[i], width - boundsPadding - r[i]);
         y[i] = clampToRange(y[i], boundsPadding + r[i], height - boundsPadding - r[i]);
       }
+      holdPinned();
       alpha *= cooling;
     }
   } else {
@@ -257,6 +287,7 @@ function layoutCommunityGraph(graph, options = {}) {
       x[i] = clampToRange(x[i], boundsPadding + r[i], width - boundsPadding - r[i]);
       y[i] = clampToRange(y[i], boundsPadding + r[i], height - boundsPadding - r[i]);
     }
+    holdPinned();
   }
   const nodes = graph.nodes.map((node, index) => ({
     ...node,
@@ -430,6 +461,443 @@ function deserializeGraphSnapshot(input) {
   }
   return graph;
 }
+
+// src/render-prep.ts
+var GREYSCALE_COMMUNITY_RAMP = [
+  "#2B2824",
+  "#43403A",
+  "#585149",
+  "#6E665A",
+  "#837A6B",
+  "#968C7C"
+];
+function positionGetter(positions) {
+  if (!positions) return () => void 0;
+  if (positions instanceof Map) return (id) => positions.get(id);
+  return (id) => Object.prototype.hasOwnProperty.call(positions, id) ? positions[id] : void 0;
+}
+function communityRanks(graph) {
+  const rank = /* @__PURE__ */ new Map();
+  [...graph.communities].sort((a, b) => b.nodes.length - a.nodes.length || a.id.localeCompare(b.id)).forEach((community, index) => rank.set(community.id, index));
+  return rank;
+}
+function colorForRank(communityId, rank, palette) {
+  if (palette === "community") return colorForCommunity(communityId);
+  const ramp = palette === "greyscale" ? GREYSCALE_COMMUNITY_RAMP : palette;
+  if (ramp.length === 0) return UNASSIGNED_COMMUNITY_COLOR;
+  if (rank < 0) return ramp[ramp.length - 1];
+  return ramp[rank % ramp.length];
+}
+function mapCommunityGraph(graph, options = {}) {
+  const palette = options.palette ?? "community";
+  const labelFor = options.labelFor ?? ((id) => id);
+  const getPos = positionGetter(options.positions);
+  const sizeFor = options.sizeFor ?? ((degree) => nodeRadius(degree, options.radius));
+  const degrees = computeDegrees(graph);
+  const rankByComm = communityRanks(graph);
+  const commOfNode = /* @__PURE__ */ new Map();
+  for (const community of graph.communities) {
+    for (const id of community.nodes) commOfNode.set(id, community.id);
+  }
+  const nodes = graph.nodes.map((node) => {
+    const communityId = commOfNode.get(node.id);
+    const rank = communityId != null ? rankByComm.get(communityId) ?? -1 : -1;
+    const degree = degrees.get(node.id) ?? 0;
+    const pos = getPos(node.id);
+    const rendered = {
+      id: node.id,
+      label: labelFor(node.id),
+      size: sizeFor(degree, node.id),
+      color: colorForRank(communityId, rank, palette),
+      communityRank: rank
+    };
+    if (pos) {
+      rendered.x = pos.x;
+      rendered.y = pos.y;
+    }
+    return rendered;
+  });
+  const links = graph.edges.map((edge) => {
+    const link = { source: edge.source, target: edge.target, weight: edge.weight };
+    if (edge.kind !== void 0) link.kind = edge.kind;
+    return link;
+  });
+  return { nodes, links, clusters: graph.communities.length };
+}
+function bakeRenderGraph(graph, options = {}) {
+  const positioned = layoutCommunityGraph(graph, options.layout);
+  const positions = /* @__PURE__ */ new Map();
+  for (const node of positioned.nodes) positions.set(node.id, { x: node.x, y: node.y });
+  const mapOptions = { positions };
+  if (options.labelFor) mapOptions.labelFor = options.labelFor;
+  if (options.palette) mapOptions.palette = options.palette;
+  if (options.radius) mapOptions.radius = options.radius;
+  if (options.sizeFor) mapOptions.sizeFor = options.sizeFor;
+  return mapCommunityGraph(graph, mapOptions);
+}
+function stringifyRenderGraph(graph) {
+  const nodes = [...graph.nodes].sort((a, b) => a.id.localeCompare(b.id));
+  const links = [...graph.links].sort(
+    (a, b) => a.source.localeCompare(b.source) || a.target.localeCompare(b.target) || (a.kind ?? "").localeCompare(b.kind ?? "")
+  );
+  return JSON.stringify({ nodes, links, clusters: graph.clusters });
+}
+function isRenderGraph(value) {
+  if (!value || typeof value !== "object") return false;
+  const candidate = value;
+  return Array.isArray(candidate.nodes) && candidate.nodes.length > 0 && Array.isArray(candidate.links) && candidate.nodes.every(
+    (n) => n && typeof n.id === "string" && typeof n.size === "number" && typeof n.color === "string"
+  );
+}
+function hasBakedPositions(graph) {
+  return graph.nodes.every((n) => typeof n.x === "number" && typeof n.y === "number");
+}
+async function loadRenderSnapshot(source, options = {}) {
+  const requirePositions = options.requirePositions ?? true;
+  try {
+    let data;
+    if (typeof source === "string") {
+      const fetchImpl = options.fetchImpl ?? globalThis.fetch;
+      if (!fetchImpl) return null;
+      const res = await fetchImpl(source);
+      if (!res.ok) return null;
+      data = await res.json();
+    } else if (typeof source === "function") {
+      data = await source();
+    } else {
+      data = source;
+    }
+    if (!isRenderGraph(data)) return null;
+    if (requirePositions && !hasBakedPositions(data)) return null;
+    return data;
+  } catch {
+    return null;
+  }
+}
+
+// src/contract.ts
+function applyControlFilters(graph, filters) {
+  const base = filterCommunityGraph(graph, filters);
+  const minDegree = filters?.minDegree ?? 0;
+  if (minDegree <= 0) return base;
+  const degree = computeDegrees(base);
+  const keep = base.nodes.filter((n) => (degree.get(n.id) ?? 0) >= minDegree).map((n) => n.id);
+  if (keep.length === base.nodes.length) return base;
+  return filterCommunityGraph(base, { nodeIds: keep });
+}
+function communityLegend(graph, colors) {
+  if (!graph) return [];
+  return graph.communities.map((c) => ({
+    communityId: c.id,
+    color: colorForCommunity(c.id, colors),
+    count: c.nodes.length
+  })).sort((a, b) => b.count - a.count || a.communityId.localeCompare(b.communityId));
+}
+
+// src/render-dom.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+function el(tag, attrs) {
+  const node = document.createElementNS(SVG_NS, tag);
+  for (const [k, v] of Object.entries(attrs)) node.setAttribute(k, String(v));
+  return node;
+}
+function clamp(v, lo, hi) {
+  return Math.max(lo, Math.min(hi, v));
+}
+function renderCommunityGraph(container, graph, options = {}) {
+  const width = options.width ?? 760;
+  const height = options.height ?? 460;
+  const background = options.background ?? "#fafafa";
+  const interactive = options.interactive ?? true;
+  const minScale = options.minScale ?? 0.4;
+  const maxScale = options.maxScale ?? 3;
+  let currentGraph = graph;
+  let filters = options.filters;
+  let algorithm = options.algorithm ?? "force";
+  let selectedNodeId = options.selectedNodeId ?? null;
+  let labelFor = options.labelFor ?? ((id) => id);
+  let visible = applyControlFilters(currentGraph, filters);
+  let positioned = layoutCommunityGraph(visible, {
+    algorithm,
+    width,
+    height,
+    ...options.layoutOptions
+  });
+  let adjacency = buildAdjacency(visible);
+  const transform = { scale: 1, offsetX: 0, offsetY: 0 };
+  if (getComputedPosition(container) === "static") container.style.position = "relative";
+  const svg = el("svg", {
+    role: "img",
+    "aria-label": "Community graph",
+    viewBox: `0 0 ${width} ${height}`,
+    width: "100%"
+  });
+  svg.style.display = "block";
+  svg.style.background = background;
+  svg.style.touchAction = "none";
+  svg.style.aspectRatio = `${width} / ${height}`;
+  const viewport = el("g", {});
+  const edgesLayer = el("g", {});
+  const nodesLayer = el("g", {});
+  viewport.appendChild(edgesLayer);
+  viewport.appendChild(nodesLayer);
+  svg.appendChild(viewport);
+  container.appendChild(svg);
+  const popup = document.createElement("div");
+  popup.setAttribute("data-fortemi-graph-popup", "");
+  Object.assign(popup.style, {
+    position: "absolute",
+    display: "none",
+    pointerEvents: "none",
+    padding: "2px 6px",
+    font: "12px system-ui, sans-serif",
+    background: "#111",
+    color: "#fff",
+    borderRadius: "4px",
+    transform: "translate(-50%, -130%)",
+    whiteSpace: "nowrap",
+    zIndex: "2"
+  });
+  container.appendChild(popup);
+  const circles = /* @__PURE__ */ new Map();
+  const lines = [];
+  function applyTransform() {
+    viewport.setAttribute(
+      "transform",
+      `translate(${transform.offsetX} ${transform.offsetY}) scale(${transform.scale})`
+    );
+  }
+  function fitToViewport() {
+    const bounds = computeGraphBounds(positioned.nodes);
+    const fit = fitGraphToViewport(bounds, { width, height }, {
+      padding: 24,
+      minScale,
+      maxScale
+    });
+    transform.scale = fit.scale;
+    transform.offsetX = fit.offsetX;
+    transform.offsetY = fit.offsetY;
+    applyTransform();
+  }
+  function styleNode(id) {
+    const circle = circles.get(id);
+    if (!circle) return;
+    const node = positioned.nodeIndex.get(id);
+    if (!node) return;
+    const selected = id === selectedNodeId;
+    circle.setAttribute("r", String(selected ? node.r + 3 : node.r));
+    circle.setAttribute("stroke", selected ? "#111" : "#fff");
+    circle.setAttribute("stroke-width", selected ? "3" : "1.5");
+  }
+  function showPopup(id) {
+    const node = positioned.nodeIndex.get(id);
+    if (!node) {
+      popup.style.display = "none";
+      return;
+    }
+    const px = transform.offsetX + node.x * transform.scale;
+    const py = transform.offsetY + node.y * transform.scale;
+    const rect = svg.getBoundingClientRect?.();
+    const scaleToPx = rect && rect.width ? rect.width / width : 1;
+    popup.textContent = labelFor(id);
+    popup.style.left = `${px * scaleToPx}px`;
+    popup.style.top = `${py * scaleToPx}px`;
+    popup.style.display = "block";
+  }
+  function setSelected(id, emit) {
+    const prev = selectedNodeId;
+    selectedNodeId = id;
+    if (prev && prev !== id) styleNode(prev);
+    if (id) {
+      styleNode(id);
+      showPopup(id);
+      if (emit) options.onSelectNode?.(id);
+    } else {
+      popup.style.display = "none";
+    }
+  }
+  function setHover(id) {
+    if (!interactive) return;
+    if (!id) {
+      for (const [, c] of circles) c.style.opacity = "1";
+      for (const { line } of lines) line.style.opacity = "0.55";
+      return;
+    }
+    const keep = new Set(adjacency.get(id) ?? []);
+    keep.add(id);
+    for (const [nid, c] of circles) c.style.opacity = keep.has(nid) ? "1" : "0.15";
+    for (const { line, source, target } of lines) {
+      line.style.opacity = source === id || target === id ? "0.9" : "0.06";
+    }
+  }
+  function build() {
+    edgesLayer.replaceChildren();
+    nodesLayer.replaceChildren();
+    circles.clear();
+    lines.length = 0;
+    for (const edge of positioned.edges) {
+      const s = positioned.nodeIndex.get(edge.source);
+      const t = positioned.nodeIndex.get(edge.target);
+      if (!s || !t) continue;
+      const line = el("line", {
+        x1: s.x,
+        y1: s.y,
+        x2: t.x,
+        y2: t.y,
+        stroke: "#9aa0a6",
+        "stroke-width": clamp(edge.weight, 1, 5),
+        opacity: 0.55
+      });
+      edgesLayer.appendChild(line);
+      lines.push({ line, source: edge.source, target: edge.target });
+    }
+    for (const node of positioned.nodes) {
+      const circle = el("circle", {
+        cx: node.x,
+        cy: node.y,
+        r: node.r,
+        fill: colorForCommunity(node.communityId, options.colors),
+        stroke: "#fff",
+        "stroke-width": 1.5,
+        tabindex: 0,
+        role: "button",
+        "data-node-id": node.id,
+        "aria-label": `Graph node ${labelFor(node.id)}`
+      });
+      circle.style.cursor = "pointer";
+      circle.style.outline = "none";
+      const title = el("title", {});
+      title.textContent = labelFor(node.id);
+      circle.appendChild(title);
+      if (interactive) {
+        circle.addEventListener("click", (e) => {
+          e.stopPropagation();
+          setSelected(node.id, true);
+        });
+        circle.addEventListener("dblclick", (e) => {
+          e.stopPropagation();
+          options.onNavigate?.(node.id);
+        });
+        circle.addEventListener("mouseenter", () => setHover(node.id));
+        circle.addEventListener("mouseleave", () => setHover(null));
+        circle.addEventListener("keydown", (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            if (selectedNodeId === node.id) options.onNavigate?.(node.id);
+            else setSelected(node.id, true);
+          }
+        });
+      }
+      nodesLayer.appendChild(circle);
+      circles.set(node.id, circle);
+    }
+    if (selectedNodeId && circles.has(selectedNodeId)) {
+      styleNode(selectedNodeId);
+      showPopup(selectedNodeId);
+    } else {
+      selectedNodeId = null;
+      popup.style.display = "none";
+    }
+  }
+  function relayout() {
+    visible = applyControlFilters(currentGraph, filters);
+    positioned = layoutCommunityGraph(visible, {
+      algorithm,
+      width,
+      height,
+      ...options.layoutOptions
+    });
+    adjacency = buildAdjacency(visible);
+    build();
+    fitToViewport();
+  }
+  const onWheel = (e) => {
+    e.preventDefault();
+    const factor = e.deltaY < 0 ? 1.1 : 1 / 1.1;
+    transform.scale = clamp(transform.scale * factor, minScale, maxScale);
+    applyTransform();
+    if (selectedNodeId) showPopup(selectedNodeId);
+  };
+  let panning = null;
+  const onDown = (e) => {
+    if (e.target === svg || e.target === viewport) {
+      panning = { x: e.clientX, y: e.clientY };
+      setSelected(null, true);
+    }
+  };
+  const onMove = (e) => {
+    if (!panning) return;
+    transform.offsetX += e.clientX - panning.x;
+    transform.offsetY += e.clientY - panning.y;
+    panning = { x: e.clientX, y: e.clientY };
+    applyTransform();
+  };
+  const onUp = () => {
+    panning = null;
+  };
+  if (interactive) {
+    svg.addEventListener("wheel", onWheel, { passive: false });
+    svg.addEventListener("mousedown", onDown);
+    svg.addEventListener("mousemove", onMove);
+    svg.addEventListener("mouseup", onUp);
+    svg.addEventListener("mouseleave", onUp);
+  }
+  build();
+  fitToViewport();
+  return {
+    element: svg,
+    update(next) {
+      let needsRelayout = false;
+      if (next.graph && next.graph !== currentGraph) {
+        currentGraph = next.graph;
+        needsRelayout = true;
+      }
+      if ("filters" in next) {
+        filters = next.filters;
+        needsRelayout = true;
+      }
+      if (next.algorithm && next.algorithm !== algorithm) {
+        algorithm = next.algorithm;
+        needsRelayout = true;
+      }
+      if (next.labelFor) labelFor = next.labelFor;
+      if (needsRelayout) relayout();
+      if ("selectedNodeId" in next) setSelected(next.selectedNodeId ?? null, false);
+    },
+    focus(nodeId) {
+      if (!nodeId) {
+        setSelected(null, false);
+        return;
+      }
+      const node = positioned.nodeIndex.get(nodeId);
+      if (!node) return;
+      transform.offsetX = width / 2 - node.x * transform.scale;
+      transform.offsetY = height / 2 - node.y * transform.scale;
+      applyTransform();
+      setSelected(nodeId, false);
+    },
+    destroy() {
+      if (interactive) {
+        svg.removeEventListener("wheel", onWheel);
+        svg.removeEventListener("mousedown", onDown);
+        svg.removeEventListener("mousemove", onMove);
+        svg.removeEventListener("mouseup", onUp);
+        svg.removeEventListener("mouseleave", onUp);
+      }
+      svg.remove();
+      popup.remove();
+      circles.clear();
+      lines.length = 0;
+    }
+  };
+}
+function getComputedPosition(elm) {
+  const inline = elm.style.position;
+  if (inline) return inline;
+  const view = elm.ownerDocument?.defaultView;
+  if (view?.getComputedStyle) return view.getComputedStyle(elm).position || "static";
+  return "static";
+}
 var DEFAULT_LAYOUT = {
   algorithm: "force",
   preserveViewport: true,
@@ -609,8 +1077,8 @@ var GraphController = class _GraphController {
 };
 
 // src/index.ts
-var VERSION = "2026.7.2";
+var VERSION = "2026.7.4";
 
-export { COMMUNITY_COLORS, GRAPH_SNAPSHOT_VERSION, GraphController, UNASSIGNED_COMMUNITY_COLOR, VERSION, buildAdjacency, colorForCommunity, computeDegrees, computeGraphBounds, deserializeGraphSnapshot, expandNeighborhood, filterCommunityGraph, fitGraphToViewport, layoutCommunityGraph, neighborhoodSubgraph, neighborsOf, nodeRadius, serializeGraphSnapshot, stringifyGraphSnapshot, subgraphForNodes };
+export { COMMUNITY_COLORS, GRAPH_SNAPSHOT_VERSION, GREYSCALE_COMMUNITY_RAMP, GraphController, UNASSIGNED_COMMUNITY_COLOR, VERSION, applyControlFilters, bakeRenderGraph, buildAdjacency, colorForCommunity, communityLegend, communityRanks, computeDegrees, computeGraphBounds, deserializeGraphSnapshot, expandNeighborhood, filterCommunityGraph, fitGraphToViewport, hasBakedPositions, isRenderGraph, layoutCommunityGraph, loadRenderSnapshot, mapCommunityGraph, neighborhoodSubgraph, neighborsOf, nodeRadius, renderCommunityGraph, serializeGraphSnapshot, stringifyGraphSnapshot, stringifyRenderGraph, subgraphForNodes };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map