Remove canvas node snapping features

ParthJadhav · ParthJadhav · commit e3962aacada3 · 2026-03-19T19:21:21.000+05:30
diff --git a/README.md b/README.md
@@ -81,7 +81,6 @@ The details that make Supervisor feel native, fast, and right.
 
 - **Desktop notifications** — Get notified when agents complete tasks or need input.
 - **Project colors** — Customize each project for instant recognition.
-- **Agent snapping** — Snap to grid for organized layouts.
 - **Collapse & expand** — Collapse agents and projects to compact pills.
 - **System tray** — Minimize to tray with a live count of running agents.
 - **~20MB on disk** — Tauri + Rust. No bundled Chromium. Lean and resource-efficient.
diff --git a/src/components/canvas/AgentNode.tsx b/src/components/canvas/AgentNode.tsx
@@ -1,18 +1,9 @@
 import { memo, useCallback, useState, useRef, useEffect } from "react";
 import { createPortal } from "react-dom";
-import { type Node as FlowNode, type NodeProps, NodeResizer, useReactFlow } from "@xyflow/react";
+import { type Node as FlowNode, type NodeProps, NodeResizer } from "@xyflow/react";
 import { Trash2, RotateCcw, Play } from "lucide-react";
 import { useAgentStore } from "@/stores/agent-store";
 import { useProjectStore } from "@/stores/project-store";
-import {
-  computeResizeSnap,
-  getCandidates,
-  nodeRect,
-  getParentOffset,
-  emitResizeGuides,
-  triggerHaptic,
-  type SnapGuide,
-} from "@/hooks/use-snap-guides";
 import type { Agent, AgentTier } from "@/types";
 import { tintedBg, tintedBorder } from "@/lib/project-colors";
 import { AgentNodeDeleteDialog } from "./AgentNodeDeleteDialog";
@@ -164,72 +155,11 @@ export const AgentNode = memo(({ data }: NodeProps<AgentNodeNode>) => {
     }, 300);
   }, []);
 
-  const { getNodes, setNodes } = useReactFlow();
-  const wasResizeSnapped = useRef(false);
-  const resizeOriginalRect = useRef<{ x: number; y: number; w: number; h: number } | null>(null);
-
   const handleResizeStart = useCallback(() => {
     setActive(true);
-    // Capture the node's rect before resize begins so snap can skip already-aligned edges
-    const nodeId = `agent-${agent.id}`;
-    const thisNode = getNodes().find((n) => n.id === nodeId);
-    if (thisNode) {
-      resizeOriginalRect.current = nodeRect(thisNode);
-    }
-  }, [agent.id, getNodes]);
-
-  const handleResize = useCallback(
-    (_event: unknown, params: { x: number; y: number; width: number; height: number; direction: number[] }) => {
-      const nodeId = `agent-${agent.id}`;
-      const allNodes = getNodes();
-      const thisNode = allNodes.find((n) => n.id === nodeId);
-      if (!thisNode) return;
-
-      const candidates = getCandidates(thisNode, allNodes);
-      const candidateRects = candidates.map(nodeRect);
-      const resizeRect = { x: params.x, y: params.y, w: params.width, h: params.height };
-      const { rect, guides } = computeResizeSnap(resizeRect, candidateRects, params.direction, resizeOriginalRect.current ?? undefined);
-
-      // Offset guides to absolute canvas coords for rendering
-      const parentOff = getParentOffset(thisNode, allNodes);
-      const absoluteGuides: SnapGuide[] = guides.map((g) => {
-        if (g.axis === "x") {
-          return { ...g, value: g.value + parentOff.x, start: g.start + parentOff.y, end: g.end + parentOff.y };
-        }
-        return { ...g, value: g.value + parentOff.y, start: g.start + parentOff.x, end: g.end + parentOff.x };
-      });
-      emitResizeGuides(absoluteGuides);
-
-      const isSnapped = guides.length > 0;
-      if (isSnapped && !wasResizeSnapped.current) {
-        triggerHaptic();
-      }
-      wasResizeSnapped.current = isSnapped;
-
-      if (guides.length > 0) {
-        setNodes((nds) =>
-          nds.map((n) =>
-            n.id === nodeId
-              ? {
-                  ...n,
-                  position: { x: rect.x, y: rect.y },
-                  style: { ...n.style, width: rect.w, height: rect.h },
-                }
-              : n,
-          ),
-        );
-      }
-    },
-    [getNodes, setNodes, agent.id],
-  );
-
-  const handleResizeEnd = useCallback(() => {
-    emitResizeGuides([]);
-    wasResizeSnapped.current = false;
-    resizeOriginalRect.current = null;
   }, []);
 
-  // Collapse: store current size in store, Canvas effect handles dimension snap
+  // Collapse: store current size in store so Canvas can restore it on expand
   const handleCollapse = useCallback(() => {
     const el = nodeRef.current?.closest('.react-flow__node') as HTMLElement | null;
     if (el) {
@@ -263,8 +193,6 @@ export const AgentNode = memo(({ data }: NodeProps<AgentNodeNode>) => {
           minHeight={EXPANDED_MIN_HEIGHT}
           isVisible
           onResizeStart={handleResizeStart}
-          onResize={handleResize}
-          onResizeEnd={handleResizeEnd}
           lineStyle={{ borderColor: "transparent", borderWidth: 20 }}
           handleStyle={{
             backgroundColor: "transparent",
diff --git a/src/components/canvas/Canvas.tsx b/src/components/canvas/Canvas.tsx
@@ -21,10 +21,8 @@ import { AgentNodeDeleteDialog } from "./AgentNodeDeleteDialog";
 import type { DeletePreviewProject, DeletePreviewAgent } from "./AgentNodeDeleteDialog";
 import { CanvasControls } from "./CanvasControls";
 import { CanvasContextMenu, CanvasContextMenuItem, CanvasContextMenuDivider } from "./CanvasContextMenu";
-import { SnapGuides } from "./SnapGuides";
 import { ProjectZone } from "./ProjectZone";
 import { EmptyState } from "./EmptyState";
-import { useSnapGuides, setResizeGuidesListener, type SnapGuide } from "../../hooks/use-snap-guides";
 import { useCanvasKeyboard } from "../../hooks/use-canvas-keyboard";
 import { useCanvasContextMenu } from "../../hooks/use-canvas-context-menu";
 import { useCanvasPositions } from "../../hooks/use-canvas-positions";
@@ -155,17 +153,6 @@ function CanvasInner({ onCreateAgent, onCreateProject, onAgentClick }: CanvasInn
 
   const hasActiveFilter = canvasFilter.query !== "" || canvasFilter.status !== null;
 
-  // Snap guides
-  const { calculateSnap, clearGuides } = useSnapGuides();
-  const [activeGuides, setActiveGuides] = useState<SnapGuide[]>([]);
-  const [resizeGuides, setResizeGuides] = useState<SnapGuide[]>([]);
-
-  // Listen for resize snap guides emitted from node components
-  useEffect(() => {
-    setResizeGuidesListener(setResizeGuides);
-    return () => setResizeGuidesListener(null);
-  }, []);
-
   // Delete confirmation state for React Flow node removals
   const [pendingDeletePreview, setPendingDeletePreview] = useState<DeletePreview | null>(null);
 
@@ -596,44 +583,9 @@ function CanvasInner({ onCreateAgent, onCreateProject, onAgentClick }: CanvasInn
     return () => clearTimeout(fitTimer.current);
   }, [positionsLoaded, hasActiveFilter, canvasFilter.query, canvasFilter.status, canvasFilter.scope, getNodes, fitBounds, projectMap]);
 
-  // ── Snap guides during drag ──
-  const handleNodeDrag = useCallback(
-    (_event: React.MouseEvent, draggedNode: Node) => {
-      const allNodes = getNodes();
-      const result = calculateSnap(draggedNode, allNodes);
-      setActiveGuides(result.guides);
-
-      let finalX = result.x;
-      let finalY = result.y;
-
-      // Clamp agents inside project zones so they can't overlap the toolbar
-      if (draggedNode.parentId && draggedNode.type === "agent") {
-        finalY = Math.max(finalY, PROJECT_TOOLBAR_HEIGHT);
-      }
-
-      // Apply snapped position
-      const dx = finalX - draggedNode.position.x;
-      const dy = finalY - draggedNode.position.y;
-      if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5) {
-        setNodes((nds) =>
-          nds.map((n) =>
-            n.id === draggedNode.id
-              ? { ...n, position: { x: finalX, y: finalY } }
-              : n,
-          ),
-        );
-      }
-    },
-    [getNodes, calculateSnap, setNodes],
-  );
-
   // ── Prevent free agents from overlapping project zones ──
   const handleNodeDragStop = useCallback(
     (_event: React.MouseEvent, draggedNode: Node) => {
-      // Clear snap guides
-      clearGuides();
-      setActiveGuides([]);
-
       if (draggedNode.type !== "agent" || draggedNode.parentId) return;
 
       const allNodes = getNodes();
@@ -682,7 +634,7 @@ function CanvasInner({ onCreateAgent, onCreateProject, onAgentClick }: CanvasInn
         );
       }
     },
-    [getNodes, setNodes, clearGuides],
+    [getNodes, setNodes],
   );
 
   // ── Handle confirmed deletion from the dialog ──
@@ -723,7 +675,6 @@ function CanvasInner({ onCreateAgent, onCreateProject, onAgentClick }: CanvasInn
         nodes={nodes}
         edges={edges}
         onNodesChange={handleNodesChange}
-        onNodeDrag={handleNodeDrag}
         onNodeDragStop={handleNodeDragStop}
         nodeTypes={nodeTypes}
         proOptions={{ hideAttribution: true }}
@@ -747,7 +698,6 @@ function CanvasInner({ onCreateAgent, onCreateProject, onAgentClick }: CanvasInn
             hasActiveFilter ? "!fill-muted-foreground/2" : "!fill-muted-foreground/8",
           )}
         />
-        <SnapGuides guides={[...activeGuides, ...resizeGuides]} />
         <CanvasControls />
       </ReactFlow>
 
diff --git a/src/components/canvas/ProjectZone.tsx b/src/components/canvas/ProjectZone.tsx
@@ -7,13 +7,6 @@ import {
   Plus, Trash2, Settings, ChevronDown, ChevronRight,
 } from "lucide-react";
 import { NodeResizer, useReactFlow, useStore, type Node as FlowNode, type NodeProps } from "@xyflow/react";
-import {
-  computeResizeSnap,
-  getCandidates,
-  nodeRect,
-  emitResizeGuides,
-  triggerHaptic,
-} from "@/hooks/use-snap-guides";
 import { Button } from "@/components/ui/button";
 import {
   AlertDialog,
@@ -53,7 +46,7 @@ export const ProjectZone = memo(({ id, data }: NodeProps<ProjectZoneNode>) => {
   const { project, agentCount } = data;
   const deleteProject = useProjectStore((s) => s.deleteProject);
   const updateProject = useProjectStore((s) => s.updateProject);
-  const { setNodes, getNodes } = useReactFlow();
+  const { setNodes } = useReactFlow();
   const [showCreate, setShowCreate] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
@@ -80,60 +73,6 @@ export const ProjectZone = memo(({ id, data }: NodeProps<ProjectZoneNode>) => {
     (s) => s.projects.find((p) => p.id === project.id)?.color || project.color || "gray",
   );
 
-  // ── Resize snapping ──
-  const wasResizeSnapped = useRef(false);
-  const resizeOriginalRect = useRef<{ x: number; y: number; w: number; h: number } | null>(null);
-
-  const handleResizeStart = useCallback(() => {
-    const thisNode = getNodes().find((n) => n.id === id);
-    if (thisNode) {
-      resizeOriginalRect.current = nodeRect(thisNode);
-    }
-  }, [getNodes, id]);
-
-  const handleResize = useCallback(
-    (_event: unknown, params: { x: number; y: number; width: number; height: number; direction: number[] }) => {
-      const allNodes = getNodes();
-      const thisNode = allNodes.find((n) => n.id === id);
-      if (!thisNode) return;
-
-      const candidates = getCandidates(thisNode, allNodes);
-      const candidateRects = candidates.map(nodeRect);
-      const resizeRect = { x: params.x, y: params.y, w: params.width, h: params.height };
-      const { rect, guides } = computeResizeSnap(resizeRect, candidateRects, params.direction, resizeOriginalRect.current ?? undefined);
-
-      // ProjectZones are root-level, no offset needed
-      emitResizeGuides(guides);
-
-      const isSnapped = guides.length > 0;
-      if (isSnapped && !wasResizeSnapped.current) {
-        triggerHaptic();
-      }
-      wasResizeSnapped.current = isSnapped;
-
-      if (guides.length > 0) {
-        setNodes((nds) =>
-          nds.map((n) =>
-            n.id === id
-              ? {
-                  ...n,
-                  position: { x: rect.x, y: rect.y },
-                  style: { ...n.style, width: rect.w, height: rect.h },
-                }
-              : n,
-          ),
-        );
-      }
-    },
-    [getNodes, setNodes, id],
-  );
-
-  const handleResizeEnd = useCallback(() => {
-    emitResizeGuides([]);
-    wasResizeSnapped.current = false;
-    resizeOriginalRect.current = null;
-  }, []);
-
   const handleDelete = useCallback(() => {
     deleteProject(project.id);
   }, [deleteProject, project.id]);
@@ -228,9 +167,6 @@ export const ProjectZone = memo(({ id, data }: NodeProps<ProjectZoneNode>) => {
           isVisible
           minWidth={400}
           minHeight={200}
-          onResizeStart={handleResizeStart}
-          onResize={handleResize}
-          onResizeEnd={handleResizeEnd}
           lineStyle={{ borderColor: "transparent", borderWidth: 20 }}
           handleStyle={{
             backgroundColor: "transparent",
diff --git a/src/components/canvas/SnapGuides.tsx b/src/components/canvas/SnapGuides.tsx
diff --git a/src/hooks/use-snap-guides.ts b/src/hooks/use-snap-guides.ts
