How victortassinari/fossflow works
FossFLOW is a browser-based isometric diagram editor, with a React application around the reusable Isoflow editor library and an optional server-storage backend. The main workflow is: a user edits a diagram in the editor, the app tracks the model and saves or exports it, and the user can later reopen it. The graph also reflects documented editing, icon, interaction, and offline capabilities. Some connections use documented behavior because the relevant source was not sampled; uncertain internal wiring is omitted.
Main entry points: Isoflow.tsx Isoflow editor · useInitialDataManager.ts Model loading · useInteractionManager.ts Input handling · App.tsx App workflow
Components 20
Application
- App workflow
packages/fossflow-app/src/App.tsx - Diagram manager
packages/fossflow-app/src/components/DiagramManager.tsx - Storage manager UI
packages/fossflow-app/src/StorageManager.tsx
Diagram Editor
- Isoflow editor
packages/fossflow-lib/src/Isoflow.tsx - Scene rendering
packages/fossflow-lib/src/components/Renderer/Renderer.tsx - Item controls
packages/fossflow-lib/src/components/ItemControls/ItemControlsManager.tsx - Transform controls
packages/fossflow-lib/src/components/TransformControlsManager/TransformControlsManager.tsx - Context actions
packages/fossflow-lib/src/components/ContextMenu/ContextMenuManager.tsx
Model And Interaction
- Input handling
packages/fossflow-lib/src/interaction/useInteractionManager.ts - Pan controls
packages/fossflow-lib/src/interaction/usePanHandlers.ts - Model loading
packages/fossflow-lib/src/hooks/useInitialDataManager.ts - Scene operations
packages/fossflow-lib/src/hooks/useScene.ts - Diagram model
packages/fossflow-lib/src/stores/modelStore.tsx - Editor UI state
packages/fossflow-lib/src/stores/uiStateStore.tsx - Model validation
packages/fossflow-lib/src/schemas/model.ts
Persistence
- Storage selection
packages/fossflow-app/src/services/storageService.ts - Browser storage
- Storage API
packages/fossflow-backend/server.js - Diagram files
Other components
- Diagram author
Connections 22
- Diagram author → App workflow: edits and manages
- App workflow → Isoflow editor: supplies model
- Isoflow editor → Model loading: loads model
- Model loading → Model validation: validates with
- Model loading → Diagram model: sets model
- Model loading → Editor UI state: sets view state
- Input handling → Diagram model: reads model
- Input handling → Editor UI state: reads and updates
- Input handling → Scene operations: uses scene
- Pan controls → Editor UI state: updates scroll
- Pan controls → Scene operations: checks items
- Context actions → Scene operations: creates and reorders
- Context actions → Diagram model: reads icons
- Isoflow editor → Scene rendering: renders diagram
- Isoflow editor → Item controls: shows controls
- Isoflow editor → Transform controls: shows transforms
- Diagram manager → Storage selection: loads and saves
- App workflow → Browser storage: auto-saves diagrams
- Storage manager UI → Browser storage: measures and exports
- Storage selection → Browser storage: uses session fallback
- Storage selection → Storage API: checks and requests
- Storage API → Diagram files: reads and writes