@visualli/react 0.1.1

package/src/stores/useNodeStore.ts

@@ -0,0 +1,101 @@
+// ─── Node Store ───────────────────────────────────────────────────────────────
+
+import { create } from 'zustand';
+import type { FlatNode, NodeMap } from '@visualli/core';
+
+export interface INodeStore {
+  nodes: NodeMap;
+  childrenIndex: Map<string | null, Set<string>>;
+
+  setNodes: (nodes: NodeMap) => void;
+  updateNode: (nodeId: string, updates: Partial<FlatNode>) => void;
+  updateNodePosition: (nodeId: string, x: number, y: number) => void;
+  addNode: (node: FlatNode) => void;
+  removeNode: (nodeId: string) => void;
+  setNodeExpanded: (nodeId: string, expanded: boolean) => void;
+
+  getNode: (nodeId: string) => FlatNode | undefined;
+  getChildren: (parentId: string | null) => FlatNode[];
+  getChildrenIds: (parentId: string | null) => Set<string>;
+  getAllNodes: () => FlatNode[];
+}
+
+function buildChildrenIndex(nodes: NodeMap): Map<string | null, Set<string>> {
+  const index = new Map<string | null, Set<string>>();
+  for (const node of nodes.values()) {
+    const pid = node.parentId ?? null;
+    if (!index.has(pid)) index.set(pid, new Set());
+    index.get(pid)!.add(node.id);
+  }
+  return index;
+}
+
+export const useNodeStore = create<INodeStore>((set, get) => ({
+  nodes: new Map(),
+  childrenIndex: new Map(),
+
+  setNodes: (nodes) =>
+    set({ nodes, childrenIndex: buildChildrenIndex(nodes) }),
+
+  updateNode: (nodeId, updates) =>
+    set((s) => {
+      const node = s.nodes.get(nodeId);
+      if (!node) return s;
+      const next = new Map(s.nodes);
+      next.set(nodeId, { ...node, ...updates, updatedAt: new Date() });
+      return { nodes: next };
+    }),
+
+  updateNodePosition: (nodeId, x, y) =>
+    set((s) => {
+      const node = s.nodes.get(nodeId);
+      if (!node || (node.x === x && node.y === y)) return s;
+      const next = new Map(s.nodes);
+      next.set(nodeId, { ...node, x, y });
+      return { nodes: next };
+    }),
+
+  addNode: (node) =>
+    set((s) => {
+      const next = new Map(s.nodes);
+      next.set(node.id, node);
+      const idx = new Map(s.childrenIndex);
+      const pid = node.parentId ?? null;
+      if (!idx.has(pid)) idx.set(pid, new Set());
+      idx.get(pid)!.add(node.id);
+      return { nodes: next, childrenIndex: idx };
+    }),
+
+  removeNode: (nodeId) =>
+    set((s) => {
+      const node = s.nodes.get(nodeId);
+      if (!node) return s;
+      const next = new Map(s.nodes);
+      next.delete(nodeId);
+      const idx = new Map(s.childrenIndex);
+      const pid = node.parentId ?? null;
+      if (idx.has(pid)) {
+        const set = new Set(idx.get(pid)!);
+        set.delete(nodeId);
+        if (set.size === 0) idx.delete(pid); else idx.set(pid, set);
+      }
+      return { nodes: next, childrenIndex: idx };
+    }),
+
+  setNodeExpanded: (nodeId, expanded) =>
+    set((s) => {
+      const node = s.nodes.get(nodeId);
+      if (!node) return s;
+      const next = new Map(s.nodes);
+      next.set(nodeId, { ...node, isExpanded: expanded, updatedAt: new Date() });
+      return { nodes: next };
+    }),
+
+  getNode: (nodeId) => get().nodes.get(nodeId),
+  getChildren: (pid) => {
+    const { nodes, childrenIndex } = get();
+    return Array.from(childrenIndex.get(pid) ?? []).map(id => nodes.get(id)!).filter(Boolean);
+  },
+  getChildrenIds: (pid) => get().childrenIndex.get(pid) ?? new Set(),
+  getAllNodes: () => Array.from(get().nodes.values()),
+}));

package/src/stores/useViewportStore.ts

@@ -0,0 +1,95 @@
+// ─── Viewport Store ───────────────────────────────────────────────────────────
+
+import { create } from 'zustand';
+import type { ViewportState } from '@visualli/core';
+import {
+  panViewport,
+  zoomViewport,
+  setViewportCenter,
+  recalculateViewportBounds,
+  clampZoom,
+  DEFAULT_CANVAS_WIDTH,
+  DEFAULT_CANVAS_HEIGHT,
+  worldToScreen,
+  screenToWorld,
+  ZOOM_DEFAULT,
+} from '@visualli/core';
+
+export interface IViewportStore extends ViewportState {
+  canvasWidth:  number;
+  canvasHeight: number;
+
+  pan:              (deltaX: number, deltaY: number) => void;
+  zoom:             (delta: number, pivotX?: number, pivotY?: number) => void;
+  setCenter:        (x: number, y: number) => void;
+  setZoom:          (level: number) => void;
+  updateCanvasSize: (width: number, height: number) => void;
+
+  getVisibleBounds: () => ViewportState['visibleBounds'];
+  worldToScreen:    (x: number, y: number) => { x: number; y: number };
+  screenToWorld:    (x: number, y: number) => { x: number; y: number };
+}
+
+function makeInitial(w: number, h: number): ViewportState {
+  const vp: ViewportState = {
+    centerX: 0, centerY: 0,
+    zoomLevel: ZOOM_DEFAULT,
+    rotation: 0,
+    visibleBounds: { minX: 0, minY: 0, maxX: 0, maxY: 0 },
+  };
+  return recalculateViewportBounds(vp, w, h);
+}
+
+const getVP = (s: IViewportStore): ViewportState => ({
+  centerX: s.centerX, centerY: s.centerY,
+  zoomLevel: s.zoomLevel, rotation: s.rotation,
+  visibleBounds: s.visibleBounds,
+});
+
+export const useViewportStore = create<IViewportStore>((set, get) => {
+  const init = makeInitial(DEFAULT_CANVAS_WIDTH, DEFAULT_CANVAS_HEIGHT);
+  return {
+    ...init,
+    canvasWidth:  DEFAULT_CANVAS_WIDTH,
+    canvasHeight: DEFAULT_CANVAS_HEIGHT,
+
+    pan: (dx, dy) => set((s) => {
+      const updated = recalculateViewportBounds(panViewport(dx, dy, getVP(s)), s.canvasWidth, s.canvasHeight);
+      return { centerX: updated.centerX, centerY: updated.centerY, visibleBounds: updated.visibleBounds };
+    }),
+
+    zoom: (delta, pivotX, pivotY) => set((s) => {
+      const updated = recalculateViewportBounds(
+        zoomViewport(delta, getVP(s), pivotX, pivotY, s.canvasWidth, s.canvasHeight),
+        s.canvasWidth, s.canvasHeight,
+      );
+      return { centerX: updated.centerX, centerY: updated.centerY, zoomLevel: updated.zoomLevel, visibleBounds: updated.visibleBounds };
+    }),
+
+    setCenter: (x, y) => set((s) => {
+      const updated = recalculateViewportBounds(setViewportCenter(x, y, getVP(s)), s.canvasWidth, s.canvasHeight);
+      return { centerX: updated.centerX, centerY: updated.centerY, visibleBounds: updated.visibleBounds };
+    }),
+
+    setZoom: (level) => set((s) => {
+      const clamped = clampZoom(level);
+      const updated = recalculateViewportBounds({ ...getVP(s), zoomLevel: clamped }, s.canvasWidth, s.canvasHeight);
+      return { zoomLevel: updated.zoomLevel, visibleBounds: updated.visibleBounds };
+    }),
+
+    updateCanvasSize: (w, h) => set((s) => {
+      const updated = recalculateViewportBounds(getVP(s), w, h);
+      return { canvasWidth: w, canvasHeight: h, visibleBounds: updated.visibleBounds };
+    }),
+
+    getVisibleBounds: () => get().visibleBounds,
+    worldToScreen: (x, y) => {
+      const s = get();
+      return worldToScreen(x, y, getVP(s), s.canvasWidth, s.canvasHeight);
+    },
+    screenToWorld: (x, y) => {
+      const s = get();
+      return screenToWorld(x, y, getVP(s), s.canvasWidth, s.canvasHeight);
+    },
+  };
+});

package/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './layerNavigation';

package/src/utils/layerNavigation.ts

@@ -0,0 +1,15 @@
+// ─── Layer Navigation Utilities ──────────────────────────────────────────────
+//
+// React-specific re-exports or wrappers of core navigation logic.
+
+export {
+  getConnectionsForLayer,
+  getChildLayerForNode,
+  getLayerForNavigation,
+  calculateFitZoom,
+  calculateFitCenter,
+  getContainersForLayer,
+  calculateFitView,
+} from '@visualli/core';
+
+export type { FitResult, ContainerGroupInfo } from '@visualli/core';