mirror of
https://github.com/Dvorinka/excalidraw-full.git
synced 2026-07-29 07:33:47 +00:00
Tomas DvorakandDevin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
8336c76705
- Move custom tools (checkbox, correct/incorrect, star) to floating canvas toolbar above native Excalidraw tools - Fix correct/incorrect toggle: square text element cycling empty/ check/cross with debounce to prevent double-firing - Fix star rating: updates displayed stars on click - Remove broken infinity-arrow feature entirely - Fix autosave false "unsaved" on load by skipping first change after initial data normalization - Fix presentation mode: remove opaque overlay blocking canvas, add pointer-events to only toolbar/thumbnails - Fix to-do list add: full text area clickable via customData, correct spacing when inserting new tasks - Add customData to all template "Add..." text elements so every template add button + text pair is fully clickable - Expand generic add handler with role-specific creation for brainstorm, retro, swot, storymap, wireframe, timeline, api, sitemap, and persona templates - Fix library import from libraries.excalidraw.com via #addLibrary hash: extract into reusable callback, listen to hashchange events, and offset imported elements to viewport center Generated with [Devin](https://cli.devin.ai/docs) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
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