README.md

WebPrototypingTool Application Frontend

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 firebase/firebase-js-sdk#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
  • Component ( canvas.component.ts )
  • Service ( canvas.service.ts )
• 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
  • Component

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

App Layers tree

• LayersTreeComponent
• LayersTreeService