@joekytc/dsh-swarm 0.1.2 → 0.2.0

package/skills/llm-wiki-skill/packages/graph-engine/src/render/sigma-overlay-svg.ts

@@ -0,0 +1,121 @@
+import type { SigmaCommunityCloud } from "./community-cloud-geometry";
+
+export const SIGMA_OVERLAY_SVG_NS = "http://www.w3.org/2000/svg";
+
+export function createSigmaOverlayRoot(root: HTMLElement): HTMLElement {
+  const overlay = root.ownerDocument.createElement("div");
+  overlay.className = "sigma-global-overlay";
+  overlay.dataset.role = "sigma-global-overlay";
+  root.append(overlay);
+  return overlay;
+}
+
+export function sigmaOverlayButton(ownerDocument: Document, kind: string, id: string, label: string): HTMLButtonElement {
+  const element = ownerDocument.createElement("button");
+  element.type = "button";
+  element.dataset.kind = kind;
+  element.dataset.id = id;
+  element.setAttribute("aria-label", label);
+  return element;
+}
+
+export function sigmaOverlayPassiveElement(ownerDocument: Document, kind: string, id: string): HTMLDivElement {
+  const element = ownerDocument.createElement("div");
+  element.dataset.kind = kind;
+  element.dataset.id = id;
+  element.setAttribute("aria-hidden", "true");
+  element.tabIndex = -1;
+  element.style.pointerEvents = "none";
+  return element;
+}
+
+export function applyOverlayBox(element: HTMLElement, box: { left: number; top: number; width: number; height: number }): void {
+  element.style.left = `${box.left}px`;
+  element.style.top = `${box.top}px`;
+  element.style.width = `${box.width}px`;
+  element.style.height = `${box.height}px`;
+}
+
+let sigmaCloudFilterSequence = 0;
+
+export function nextSigmaCloudFilterSequence(): number {
+  sigmaCloudFilterSequence += 1;
+  return sigmaCloudFilterSequence;
+}
+
+export function sigmaSharedCloudFilterDef(ownerDocument: Document, filterId: string): SVGSVGElement {
+  const svg = ownerDocument.createElementNS(SIGMA_OVERLAY_SVG_NS, "svg");
+  svg.setAttribute("aria-hidden", "true");
+  svg.style.position = "absolute";
+  svg.style.width = "0";
+  svg.style.height = "0";
+  svg.style.overflow = "hidden";
+  const defs = ownerDocument.createElementNS(SIGMA_OVERLAY_SVG_NS, "defs");
+  const filter = ownerDocument.createElementNS(SIGMA_OVERLAY_SVG_NS, "filter");
+  filter.setAttribute("id", filterId);
+  filter.setAttribute("x", "-50%");
+  filter.setAttribute("y", "-50%");
+  filter.setAttribute("width", "200%");
+  filter.setAttribute("height", "200%");
+  const blur = ownerDocument.createElementNS(SIGMA_OVERLAY_SVG_NS, "feGaussianBlur");
+  blur.setAttribute("stdDeviation", "20");
+  filter.append(blur);
+  defs.append(filter);
+  svg.append(defs);
+  return svg;
+}
+
+export type SigmaCloudKind = "polygon" | "ellipse";
+
+export interface SigmaCloudSvgHandle {
+  svg: SVGSVGElement;
+  shape: SVGElement;
+  kind: SigmaCloudKind;
+}
+
+// 创建一次：svg 容器 + 形状元素 + 点击监听（只绑一次）。颜色/几何随后通过
+// applySigmaCloudColor / applySigmaCloudGeometry 更新，相机移动时无需重建。
+export function createSigmaCloudSvg(
+  ownerDocument: Document,
+  cloud: SigmaCommunityCloud,
+  filterId: string,
+  onSelect: () => void
+): SigmaCloudSvgHandle {
+  const svg = ownerDocument.createElementNS(SIGMA_OVERLAY_SVG_NS, "svg");
+  svg.setAttribute("width", "100%");
+  svg.setAttribute("height", "100%");
+  svg.style.position = "absolute";
+  svg.style.inset = "0";
+  svg.style.overflow = "visible";
+  svg.style.pointerEvents = "none";
+  const kind: SigmaCloudKind = cloud.localPoints ? "polygon" : "ellipse";
+  const shape = ownerDocument.createElementNS(SIGMA_OVERLAY_SVG_NS, kind);
+  shape.setAttribute("filter", `url(#${filterId})`);
+  shape.style.pointerEvents = "fill";
+  shape.style.cursor = "pointer";
+  shape.addEventListener("click", (event) => {
+    event.stopPropagation();
+    onSelect();
+  });
+  applySigmaCloudGeometry(shape, kind, cloud);
+  svg.append(shape);
+  return { svg, shape, kind };
+}
+
+export function applySigmaCloudColor(shape: SVGElement, color: string, dim: boolean): void {
+  shape.setAttribute("fill", color);
+  shape.setAttribute("fill-opacity", dim ? "0.06" : "0.2");
+}
+
+export function applySigmaCloudGeometry(shape: SVGElement, kind: SigmaCloudKind, cloud: SigmaCommunityCloud): void {
+  if (kind === "polygon") {
+    if (cloud.localPoints) {
+      shape.setAttribute("points", cloud.localPoints.map((p) => `${p.x},${p.y}`).join(" "));
+    }
+    return;
+  }
+  shape.setAttribute("cx", String(cloud.box.width / 2));
+  shape.setAttribute("cy", String(cloud.box.height / 2));
+  shape.setAttribute("rx", String(Math.max(8, cloud.box.width / 2)));
+  shape.setAttribute("ry", String(Math.max(8, cloud.box.height / 2)));
+}

package/skills/llm-wiki-skill/packages/graph-engine/src/render/simulation-bridge.ts

@@ -0,0 +1,59 @@
+import type { GraphScreenPoint, GraphWorldBounds, GraphWorldPoint } from "./geometry";
+import { screenPointToWorldPoint } from "./geometry";
+import type { RendererViewport, RendererViewportSize } from "./viewport";
+
+export interface GraphNodeDragStartInput {
+  nodeWorldPoint: GraphWorldPoint;
+  pointerScreenPoint: GraphScreenPoint;
+  viewport: RendererViewport;
+  viewportSize: RendererViewportSize;
+  worldBounds?: GraphWorldBounds;
+}
+
+export interface GraphNodeDragMoveInput {
+  pointerScreenPoint: GraphScreenPoint;
+  viewport: RendererViewport;
+  viewportSize: RendererViewportSize;
+  worldBounds?: GraphWorldBounds;
+  grabOffset: GraphWorldPoint;
+}
+
+export interface GraphNodeDragStartState {
+  pointerWorldPoint: GraphWorldPoint;
+  grabOffset: GraphWorldPoint;
+  targetWorldPoint: GraphWorldPoint;
+}
+
+export function beginGraphNodeDrag(input: GraphNodeDragStartInput): GraphNodeDragStartState {
+  const pointerWorldPoint = screenPointToWorldPoint(input.pointerScreenPoint, input.viewport, input.viewportSize, input.worldBounds);
+  const nodeWorldPoint = normalizeWorldPoint(input.nodeWorldPoint);
+  const grabOffset = {
+    x: pointerWorldPoint.x - nodeWorldPoint.x,
+    y: pointerWorldPoint.y - nodeWorldPoint.y
+  };
+  return {
+    pointerWorldPoint,
+    grabOffset,
+    targetWorldPoint: nodeWorldPoint
+  };
+}
+
+export function resolveGraphNodeDragTarget(input: GraphNodeDragMoveInput): GraphWorldPoint {
+  const pointerWorldPoint = screenPointToWorldPoint(input.pointerScreenPoint, input.viewport, input.viewportSize, input.worldBounds);
+  const grabOffset = normalizeWorldPoint(input.grabOffset);
+  return {
+    x: pointerWorldPoint.x - grabOffset.x,
+    y: pointerWorldPoint.y - grabOffset.y
+  };
+}
+
+function normalizeWorldPoint(point: GraphWorldPoint): GraphWorldPoint {
+  return {
+    x: finiteNumber(point.x, 0),
+    y: finiteNumber(point.y, 0)
+  };
+}
+
+function finiteNumber(value: unknown, fallback: number): number {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}

package/skills/llm-wiki-skill/packages/graph-engine/src/render/state.ts

@@ -0,0 +1,262 @@
+import type { CommunityId, NodeId, PinMap, SelectionInput } from "../types";
+import type { RenderPositionMap } from "./model";
+import { DEFAULT_RENDERER_VIEWPORT, normalizeRendererViewport, type RendererViewport } from "./viewport";
+
+export type GraphRuntimeHoverTarget =
+  | { kind: "node"; id: NodeId }
+  | { kind: "edge"; id: string }
+  | { kind: "community"; id: CommunityId }
+  | null;
+
+export type GraphRuntimeFocusTarget =
+  | { kind: "community"; id: CommunityId }
+  | null;
+
+export type GraphRuntimeSelectionSurface =
+  | "reader"
+  | "selection-panel"
+  | null;
+
+export type GraphRuntimeGestureState =
+  | {
+      kind: "node-drag";
+      pointerId: number;
+      nodeId: NodeId;
+      grabOffset: { x: number; y: number };
+      startWorldPoint: { x: number; y: number };
+      wasPinned: boolean;
+      locked: boolean;
+    }
+  | {
+      kind: "viewport-pan";
+      pointerId: number;
+      lastScreenPoint: { x: number; y: number };
+      locked: boolean;
+    }
+  | {
+      kind: "community-click";
+      pointerId: number;
+      communityId: CommunityId;
+      locked: boolean;
+    }
+  | null;
+
+export interface GraphRuntimeStateSnapshot {
+  viewport: RendererViewport;
+  positions: RenderPositionMap;
+  pins: PinMap;
+  hover: GraphRuntimeHoverTarget;
+  selection: SelectionInput | null;
+  selectionSurface: GraphRuntimeSelectionSurface;
+  focus: GraphRuntimeFocusTarget;
+  activeGesture: GraphRuntimeGestureState;
+}
+
+export interface GraphRuntimeStateOptions {
+  viewport?: Partial<RendererViewport> | null;
+  positions?: RenderPositionMap;
+  pins?: PinMap;
+  hover?: GraphRuntimeHoverTarget;
+  selection?: SelectionInput | null;
+  selectionSurface?: GraphRuntimeSelectionSurface;
+  focus?: GraphRuntimeFocusTarget;
+  activeGesture?: GraphRuntimeGestureState;
+}
+
+export type GraphRuntimeStateListener = (snapshot: GraphRuntimeStateSnapshot) => void;
+
+export class GraphRuntimeState {
+  private snapshotValue: GraphRuntimeStateSnapshot;
+  private readonly listeners = new Set<GraphRuntimeStateListener>();
+
+  constructor(options: GraphRuntimeStateOptions = {}) {
+    this.snapshotValue = normalizeSnapshot(options);
+  }
+
+  snapshot(): GraphRuntimeStateSnapshot {
+    return cloneSnapshot(this.snapshotValue);
+  }
+
+  subscribe(listener: GraphRuntimeStateListener): () => void {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  setViewport(viewport: Partial<RendererViewport> | null | undefined): GraphRuntimeStateSnapshot {
+    return this.update({ viewport: normalizeRendererViewport(viewport) });
+  }
+
+  setPositions(positions: RenderPositionMap): GraphRuntimeStateSnapshot {
+    return this.update({ positions: clonePositions(positions) });
+  }
+
+  commitPosition(nodeId: NodeId, position: { x: number; y: number }): GraphRuntimeStateSnapshot {
+    return this.update({
+      positions: {
+        ...this.snapshotValue.positions,
+        [nodeId]: { x: finiteNumber(position.x, 0), y: finiteNumber(position.y, 0) }
+      }
+    });
+  }
+
+  setPins(pins: PinMap): GraphRuntimeStateSnapshot {
+    return this.update({ pins: clonePins(pins) });
+  }
+
+  setHover(hover: GraphRuntimeHoverTarget): GraphRuntimeStateSnapshot {
+    return this.update({ hover: cloneHoverTarget(hover) });
+  }
+
+  setSelection(selection: SelectionInput | null, selectionSurface?: GraphRuntimeSelectionSurface): GraphRuntimeStateSnapshot {
+    const nextSelection = cloneSelection(selection);
+    return this.update({
+      selection: nextSelection,
+      selectionSurface: normalizeSelectionSurface(nextSelection, selectionSurface)
+    });
+  }
+
+  setFocus(focus: GraphRuntimeFocusTarget): GraphRuntimeStateSnapshot {
+    return this.update({ focus: cloneFocusTarget(focus) });
+  }
+
+  setActiveGesture(activeGesture: GraphRuntimeGestureState): GraphRuntimeStateSnapshot {
+    return this.update({ activeGesture: cloneGestureState(activeGesture) });
+  }
+
+  clearInteraction(): GraphRuntimeStateSnapshot {
+    return this.update({
+      hover: null,
+      selection: null,
+      selectionSurface: null,
+      focus: null,
+      activeGesture: null
+    });
+  }
+
+  private update(next: Partial<GraphRuntimeStateSnapshot>): GraphRuntimeStateSnapshot {
+    this.snapshotValue = {
+      ...this.snapshotValue,
+      ...next
+    };
+    const snapshot = this.snapshot();
+    for (const listener of this.listeners) listener(snapshot);
+    return snapshot;
+  }
+}
+
+export function createGraphRuntimeState(options: GraphRuntimeStateOptions = {}): GraphRuntimeState {
+  return new GraphRuntimeState(options);
+}
+
+function normalizeSnapshot(options: GraphRuntimeStateOptions): GraphRuntimeStateSnapshot {
+  return {
+    viewport: normalizeRendererViewport(options.viewport || DEFAULT_RENDERER_VIEWPORT),
+    positions: clonePositions(options.positions || {}),
+    pins: clonePins(options.pins || {}),
+    hover: cloneHoverTarget(options.hover ?? null),
+    selection: cloneSelection(options.selection ?? null),
+    selectionSurface: normalizeSelectionSurface(options.selection ?? null, options.selectionSurface),
+    focus: cloneFocusTarget(options.focus ?? null),
+    activeGesture: cloneGestureState(options.activeGesture ?? null)
+  };
+}
+
+function cloneSnapshot(snapshot: GraphRuntimeStateSnapshot): GraphRuntimeStateSnapshot {
+  return {
+    viewport: { ...snapshot.viewport },
+    positions: clonePositions(snapshot.positions),
+    pins: clonePins(snapshot.pins),
+    hover: cloneHoverTarget(snapshot.hover),
+    selection: cloneSelection(snapshot.selection),
+    selectionSurface: snapshot.selectionSurface,
+    focus: cloneFocusTarget(snapshot.focus),
+    activeGesture: cloneGestureState(snapshot.activeGesture)
+  };
+}
+
+function clonePositions(positions: RenderPositionMap): RenderPositionMap {
+  return Object.fromEntries(Object.entries(positions).map(([id, position]) => [
+    id,
+    {
+      x: finiteNumber(position.x, 0),
+      y: finiteNumber(position.y, 0)
+    }
+  ]));
+}
+
+function clonePins(pins: PinMap): PinMap {
+  return Object.fromEntries(Object.entries(pins).map(([key, position]) => [
+    key,
+    {
+      x: finiteNumber(position.x, 0),
+      y: finiteNumber(position.y, 0),
+      ...(position.coordinateSpace ? { coordinateSpace: position.coordinateSpace } : {})
+    }
+  ]));
+}
+
+function cloneHoverTarget(hover: GraphRuntimeHoverTarget): GraphRuntimeHoverTarget {
+  return hover ? { ...hover } : null;
+}
+
+function cloneFocusTarget(focus: GraphRuntimeFocusTarget): GraphRuntimeFocusTarget {
+  return focus ? { ...focus } : null;
+}
+
+function cloneSelection(selection: SelectionInput | null): SelectionInput | null {
+  if (!selection) return null;
+  if (selection.kind === "nodes") return { kind: "nodes", ids: [...selection.ids] };
+  return { ...selection };
+}
+
+function cloneGestureState(activeGesture: GraphRuntimeGestureState): GraphRuntimeGestureState {
+  if (!activeGesture) return null;
+  if (activeGesture.kind === "node-drag") {
+    return {
+      kind: "node-drag",
+      pointerId: finiteNumber(activeGesture.pointerId, 0),
+      nodeId: activeGesture.nodeId,
+      grabOffset: {
+        x: finiteNumber(activeGesture.grabOffset.x, 0),
+        y: finiteNumber(activeGesture.grabOffset.y, 0)
+      },
+      startWorldPoint: {
+        x: finiteNumber(activeGesture.startWorldPoint.x, 0),
+        y: finiteNumber(activeGesture.startWorldPoint.y, 0)
+      },
+      wasPinned: Boolean(activeGesture.wasPinned),
+      locked: Boolean(activeGesture.locked)
+    };
+  }
+  if (activeGesture.kind === "viewport-pan") {
+    return {
+      kind: "viewport-pan",
+      pointerId: finiteNumber(activeGesture.pointerId, 0),
+      lastScreenPoint: {
+        x: finiteNumber(activeGesture.lastScreenPoint.x, 0),
+        y: finiteNumber(activeGesture.lastScreenPoint.y, 0)
+      },
+      locked: Boolean(activeGesture.locked)
+    };
+  }
+  return {
+    kind: "community-click",
+    pointerId: finiteNumber(activeGesture.pointerId, 0),
+    communityId: activeGesture.communityId,
+    locked: Boolean(activeGesture.locked)
+  };
+}
+
+function normalizeSelectionSurface(
+  selection: SelectionInput | null,
+  selectionSurface: GraphRuntimeSelectionSurface | undefined
+): GraphRuntimeSelectionSurface {
+  if (!selection) return null;
+  return selectionSurface ?? "selection-panel";
+}
+
+function finiteNumber(value: unknown, fallback: number): number {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}

package/skills/llm-wiki-skill/packages/graph-engine/src/render/toolbar.ts

@@ -0,0 +1,40 @@
+export type GraphToolbarPanelState = "closed" | "filters" | "legend";
+
+export interface GraphToolbarStorage {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+}
+
+export const GRAPH_TOOLBAR_PANEL_KEY = "llm-wiki:graph:toolbar:panel";
+
+export function normalizeToolbarPanelState(value: unknown): GraphToolbarPanelState {
+  return value === "filters" || value === "legend" ? value : "closed";
+}
+
+export function readToolbarPanelState(storage: GraphToolbarStorage | null | undefined): GraphToolbarPanelState {
+  try {
+    return normalizeToolbarPanelState(storage?.getItem(GRAPH_TOOLBAR_PANEL_KEY));
+  } catch {
+    return "closed";
+  }
+}
+
+export function writeToolbarPanelState(storage: GraphToolbarStorage | null | undefined, state: GraphToolbarPanelState): void {
+  try {
+    storage?.setItem(GRAPH_TOOLBAR_PANEL_KEY, state);
+  } catch {
+    // localStorage can be unavailable in restricted file contexts.
+  }
+}
+
+export function nextToolbarPanelState(current: GraphToolbarPanelState, requested: Exclude<GraphToolbarPanelState, "closed">): GraphToolbarPanelState {
+  return current === requested ? "closed" : requested;
+}
+
+export function shouldBlankClickCloseToolbar(state: GraphToolbarPanelState): boolean {
+  return state !== "closed";
+}
+
+export function toolbarPanelStateAfterBlankClick(state: GraphToolbarPanelState): GraphToolbarPanelState {
+  return shouldBlankClickCloseToolbar(state) ? "closed" : state;
+}