feat: add snap-to-grid toggle to workflow canvas

[prudh-vi]

Summary

This PR adds a snap-to-grid toggle feature to the workflow canvas as described in #2813

Changes

Canvas Integration (app/web/src/ui/CanvasPage/index.tsx)

• Added isSnapToGridEnabled state to track grid snapping status
• Passed snapToGrid={isSnapToGridEnabled} and snapGrid={[16, 16]} props to ReactFlow component
• Grid spacing set to 16x16 pixels for consistent alignment

const [isSnapToGridEnabled, setIsSnapToGridEnabled] = useState(false);

<ReactFlow
  snapToGrid={isSnapToGridEnabled}
  snapGrid={[16, 16]}
  // ... other props
/>

UI Components (app/web/src/components/zoom-slider.tsx)

• Added grid toggle button to the ZoomSlider toolbar (bottom-left)
• Uses Grid3X3 icon from lucide-react
• Button variant changes based on state (default when enabled, ghost when disabled)
• Added tooltip: "Enable/Disable snap to grid" for user guidance

<Tooltip>
  <TooltipTrigger asChild>
    <Button
      variant={isSnapToGridEnabled ? "default" : "ghost"}
      size="icon-sm"
      onClick={() => setIsSnapToGridEnabled(!isSnapToGridEnabled)}
    >
      <Grid3X3 className="h-3 w-3" />
    </Button>
  </TooltipTrigger>
  <TooltipContent>
    {isSnapToGridEnabled ? "Disable snap to grid" : "Enable snap to grid"}
  </TooltipContent>
</Tooltip>

Functionality

• Toggle OFF (default): Nodes can be placed at any pixel position (free-form)
• Toggle ON: Nodes automatically snap to nearest 16px grid intersection
• Preserves all existing canvas functionality (zoom, pan, selection, etc.)

Testing

• ✅ Verified free-form placement when toggle is disabled
• ✅ Verified nodes snap to 16px grid systematically when toggle is enabled
• ✅ Toggle works smoothly without affecting other canvas operations
• ✅ No console errors or visual glitches

Before

Before.Video.mov

After

After.Video.mov

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}

This PR is being reviewed by Cursor Bugbot

Details

Your team is on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle for each member of your team.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

[shiroyasha]

@prudh-vi looks great 🎉 Assigning @AleksandarCole to review the functionality.

[AleksandarCole]

Hey @prudh-vi this works great! Thanks for taking this.
Do you think we can make few changes? Now that I see it in action, I think we should set the grid to 48 instead of 16.

Also, can we make an update so that by default this snap to grid is turned on?

[prudh-vi]

Sure I can do that @AleksandarCole

[prudh-vi]

@AleksandarCole I have changed the grid to 48 from 16 and also by default the snap to grid is turned on.

[AleksandarCole]

@prudh-vi awesome! Seems like CI format check is failing though: https://superplanehq.semaphoreci.com/jobs/c60d7b85-ab87-43f7-8f31-5a6d45226169
Can you try to fix this, and then we can merge.

[prudh-vi]

Sure @AleksandarCole

[AleksandarCole]

Merging this. Thank you for contributing @prudh-vi ⭐