StudyMesh: Canvas/Spatial Notes (Obsidian Canvas-style workspace)

[Pichikachu]

🎨 Feature: Canvas / Spatial Notes

Inspired by Obsidian Canvas, this PR adds an infinite canvas workspace for spatial note organization.

What's New

Infinite Canvas

• Pan with middle mouse button or pan tool
• Zoom with Ctrl+Scroll (0.1x to 3x)
• Reset view to center everything

Canvas Items

• Notes: Large content blocks with yellow background
• Cards: Compact cards with green background
• Text blocks: Simple text with blue background
• All items support drag-and-drop positioning
• Double-click to edit inline
• Right-click context menu for actions

Connections

• Click the link icon to start a connection
• Click another item to connect them
• Curved bezier paths with arrows
• Labels on connections

Tools

• Select tool (V) - click/drag to move items
• Pan tool (H) - click and drag to pan canvas
• Note/Card/Text buttons to add new items
• Connect tool for linking items

Grid & Snapping

• Toggle grid visibility
• Snap to grid for precise positioning
• Configurable grid size

Undo/Redo

• Full undo/redo support (Ctrl+Z / Ctrl+Shift+Z)
• History tracking

Keyboard Shortcuts

• Delete/Backspace: Remove selected items
• Escape: Deselect / cancel connection
• Ctrl+Z: Undo
• Ctrl+Shift+Z: Redo

Hook API

const { isOpen, open, close, CanvasPanel } = useCanvas()

---

Closes #16 (Canvas Spatial Notes)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
study-mesh	Ready	Preview, Comment	Jun 4, 2026 4:34pm

[Pichikachu]

How to check

1. Open the Vercel preview URL above
2. Click Try StudyMesh (login bypass - no Google account needed)
3. Look for 🎨 Canvas floating button in the bottom-right corner
4. Click it to open the 🎨 Canvas panel
5. Test: Add sticky notes, move them around, zoom/pan the canvas

[Pichikachu]

📸 Preview

Features: 🎨 infinite canvas, 📝 sticky notes, 🔍 zoom/pan

[CosmeValera]

This is kinda cool, maybe i could add this: