mirror of
https://github.com/Dvorinka/excalidraw-full.git
synced 2026-06-03 22:02:57 +00:00
Tomas Dvorak
cd22ee1ee8
Implements multi-select functionality in the file browser, allowing users to perform batch actions such as deleting or moving multiple drawings at once. Adds full CRUD support for folders, including updating folder properties and reordering folders via a new `sort_order` column in the database. - feat(ui): add multi-select, batch delete, and batch move in FileBrowser - feat(api): add endpoints for updating, deleting, and reordering folders - feat(db): add `sort_order` column and index to `workspace_folders` - fix(editor): integrate `useHandleLibrary` for better library management - chore(deps): update excalidraw subproject
Excalidraw FULL Frontend
Production-grade frontend for the Excalidraw FULL overhaul.
Stack
- React 19 + TypeScript
- Vite (fast HMR, optimized builds)
- SCSS Modules (scoped styles)
- Zustand (state management)
- React Router (routing)
- Lucide React (icons)
Design System
Excalidraw's hand-drawn aesthetic preserved:
- Island UI: Floating panels with subtle shadows
- Primary: Purple (
#6965db) - Typography: Inter font, clear hierarchy
- Shadows: Multi-layer island shadows
- Radii: Consistent 6-12px rounding
Pages
| Route | Page | Features |
|---|---|---|
/ |
Dashboard | Stats, recent drawings, activity, templates |
/login |
Login | Email/password + GitHub OAuth |
/signup |
Signup | Account creation |
/files |
File Browser | Folder tree, grid/list view, drawing cards |
/team |
Team Settings | Members, roles, invites |
/settings |
User Settings | Profile, account, notifications, appearance |
/templates |
Templates | Gallery with categories |
/drawing/:id |
Editor | Canvas placeholder (integrate Excalidraw) |
Quick Start
npm install
npm run dev # Development server at http://localhost:3000
npm run typecheck # Type checking
npm run build # Production build
API Integration
Update src/services/api.ts endpoints to match your Go backend:
GET /api/auth/me- Current userPOST /api/auth/login- LoginGET /api/drawings- List drawingsGET /api/teams- List teams
The Vite proxy forwards /api to http://localhost:3002.
Canvas Integration
To integrate the existing Excalidraw canvas:
- Install package:
npm install @excalidraw/excalidraw - Import in
Editor.tsx:import { Excalidraw } from '@excalidraw/excalidraw' - Replace the placeholder div with the
<Excalidraw />component - Wire up
onChangeto save via API
Project Structure
src/
├── components/ # Reusable UI (Button, Input, Card, Layout)
├── pages/ # Route components
├── stores/ # Zustand state
├── services/ # API clients
├── types/ # TypeScript interfaces
└── styles/ # SCSS variables, global styles