WebPrototypingTool Application Frontend
October 4, 2021 ยท View on GitHub
App Debug Tooling
- Advanced settings panel
- Feature flags
- Debug Graph
- Debug Message communication
App Assets
- The image asset directory is served from /src/assets/
- SVG is the recommended format for all icons and assets.
- png|svg|gif have a 1hr cache defined in the /app.yaml
- Use svgo to optimize SVGs before adding them to the repo
- A Sketch file /assets.setch is included in the root of the repo which is the source of all icons in the product
Firebase
For firebase offline support we need to enable persistence but currently synchronously writes to a local database which slows down app performance. We're waiting for this issue to be resolved https://github.com/firebase/firebase-js-sdk/issues/983
App Styles
- Light Theme /src/styles/themes/default.scss
- Dark Theme /src/styles/themes/dark.scss
- CSS Mixins located in /sass-utils/
App Routes
Dashboard
/src/app/routes/dashboard
Project
This is the editor experience
/src/app/routes/project
Preview
/src/app/routes/project/preview
Admin
/src/app/routes/project/news-editor
App Systems
App Store
- AppStore - Global app store used for routing
- ProjectStore - Store per project
App Keyboard Shortcuts
All keyboard shortcuts are defined in the configuration located here: src/app/routes/project/configs/project.config.ts. Each config is an IConfig which maps to actions defined in the project store and is also used to populate context menus.
App Design Surface
The design surface is made up of 3 UI Layers and a few communication services
- Canvas - AKA the viewport for boards which also manages panning and zooming
- Glass Layer - SVG layer above the canvas for drawing design surface details like hover, selection, etc.
- This component is made up of multiple "panes"
- Component
- InteractionService - Manages communication between glass and layers tree
- Outlet Frames - The wrapper for each board iframe
App Services
- DndService Manages Drag & drop
- RendererService Manages communication between the renderer and main app
- InteractionService - Manages selection, hover, etc
- SelectionContextService - Context for currently selected element used by glass, top bar and layers tree
- PropertiesService Service for properties CRUD opertations
- DatabaseService Firebase communication
- AssetsService Manages asset uploading
- ClipboardService Manages the clipboard
App Properties
Properites are generated dynamically based on configurations defined in cd-common/models.
See configuration docs
- Dynamic Properties Component
- PropertiesService
- AdvancedProperties - CSS Key / Value editor
App Image Upload
- AssetsService Manages asset uploading