How haitang-hub/canvas-director works
Canvas Director is a browser-based visual-production workbench: creators plan on an infinite canvas, stage and record shots in an embedded 3D director, then use those references for AI image/video generation and continue iterating on the canvas. The README documents the major product branches and integration flows; sampled source confirms selected local-storage, plugin-management, director-control, and agent-runtime details, but does not expose most canvas or generation call sites.
Main entry points: infinite-canvas.tsx Infinite Canvas · canvas-node-generation.ts Media Generation · index.tsx Canvas Workspace · use-config-store.ts Models & Sources Config
Components 27
Canvas Workspace
- Web Application
web/src/main.tsx - Canvas Workspace
web/src/pages/canvas/index.tsx - Infinite Canvas
web/src/components/canvas/infinite-canvas.tsx - Canvas State
web/src/stores/canvas/use-canvas-store.ts
3D Director
- Director Desk
web/src/pages/director/index.tsx - 3D Scene Editor
web/src/pages/director/editor/canvas/DirectorCanvas.tsx - Camera & Motion
web/src/pages/director/editor/motion/MotionStudio.tsx - Director Project State
web/src/pages/director/editor/store/directorStore.ts - Capture & Export Bridge
web/src/pages/director/editor/io/captureBridge.ts
AI Creation
- Media Generation
web/src/components/canvas/canvas-node-generation.ts - Image API
web/src/services/api/image.ts - Video API
web/src/services/api/video.ts - Audio API
web/src/services/api/audio.ts
Agent & Plugins
- Plugin Runtime
web/src/lib/canvas/plugin-runtime.ts - Plugin Manager
web/src/components/canvas/canvas-plugin-manager-modal.tsx - Canvas Agent UI
web/src/components/agent/agent-panel.tsx - Agent Canvas Bridge
web/src/pages/canvas/hooks/use-agent-bridge.ts - Local Canvas Agent
canvas-agent/src/index.ts
Assets & Settings
- Prompt Center
web/src/pages/prompts/index.tsx - Local Media Assets
web/src/services/file-storage.ts - Local Image Assets
web/src/services/image-storage.ts - Models & Sources Config
web/src/stores/use-config-store.ts - WebDAV Sync
web/src/services/webdav-sync.ts
Other components
- Creator
- Configured AI Services
- Codex CLI
- WebDAV Server
Connections 35
- Creator → Web Application: opens
- Web Application → Canvas Workspace: routes to
- Canvas Workspace → Infinite Canvas: renders
- Infinite Canvas → Canvas State: updates
- Canvas Workspace → Director Desk: opens embedded
- Director Desk → 3D Scene Editor: renders
- 3D Scene Editor → Director Project State: edits
- Camera & Motion → Director Project State: records motion
- Director Desk → Capture & Export Bridge: requests exports
- Capture & Export Bridge → Canvas Workspace: returns references
- Infinite Canvas → Media Generation: starts generation
- Media Generation → Image API: requests images
- Media Generation → Video API: requests videos
- Media Generation → Audio API: requests audio
- Image API → Configured AI Services: sends requests
- Video API → Configured AI Services: sends requests
- Audio API → Configured AI Services: sends requests
- Media Generation → Canvas State: writes results
- Infinite Canvas → Plugin Runtime: renders plugin nodes
- Plugin Manager → Plugin Runtime: installs and manages
- Creator → Plugin Manager: manages plugins
- Canvas Agent UI → Agent Canvas Bridge: exchanges canvas context
- Agent Canvas Bridge → Local Canvas Agent: dispatches MCP requests
- Local Canvas Agent → Codex CLI: runs CLI
- Local Canvas Agent → Agent Canvas Bridge: streams events
- Creator → Prompt Center: searches prompts
- Prompt Center → Infinite Canvas: inserts prompts
- Infinite Canvas → Local Media Assets: stores media
- Infinite Canvas → Local Image Assets: stores images
- Models & Sources Config → Image API: provides settings
- Models & Sources Config → Video API: provides settings
- Models & Sources Config → Audio API: provides settings
- WebDAV Sync → Canvas State: syncs projects
- WebDAV Sync → Local Media Assets: syncs assets
- WebDAV Sync → WebDAV Server: transfers data