Arcentry - Frontend Architecture Overview
This guide is targeted towards developers working with Arcentry's code-base. If you are an end-user, please consult the REST-API and Api-Docs documentation instead. If you are an enterprise customer, please find information in the Enterprise section of the documentation.
Arcentry's Browser App consists of three sections:
- A sidebar with multiple tabs on the left
- A shortcut menu on the bottom right
- A page-wide diagramming canvas
All of Arcentry's HTML based user interfaces are written in VueJS - a MVVM framework comparable to Angular or React.
Arcentry's diagramming canvas uses a 3D rendering technology called WebGL, facilitated by a 3D Framework called THREE.js. As far as the browser is concerned, WebGL is just a flat image. That means that all interactions, click handler, event bubbling etc. are custom implementations.
The frontend is organized as a hierarchical object graph. The root node is the app that's initialized in src\js\index.js. This is the Vue application that ties everything together.
The app, in turn, creates the sidebar and view menu at the bottom, as well as the canvas. It also initializes a number of services and other singletons that are accessed across the application.
The quickest way to get a holistic impression of how Arcentry works is by looking at the various nodes in this graph. Please find an overview with short descriptions below. The two most important nodes are the Canvas that handles all rendering and 3D interactions and the state.
the main app
Catches errors and sends reports to a HTTP API
store for user account data
store for user settings
app-wide event distribution mechanism
main drawing node for the 3D space
Renders the scene graph to the canvas
Root Node for the THREE.js scene
A wrapper around THREE.Orthograpic camera
The line grid in the 3D space
Tracks mouse movement and actions
Maps 2D Mouse Coordinates to objects in the 3D space
Handles panning via arrow keys
Handles keyboard interactions
Draws ephemeral 2D visuals for selection, hover etc.
Handles Charts and Scaling Group Widgets
Draws 2D shapes like lines, areas, images or icons.
[DEPRECATED] lines are now drawn onto the PixelPlane
Manages individual and group selection of objects
Manages mouse hovering
Manages Copy & Paste as well as moving grouped objects
Loads and stores 2D textures for images and icons
Handles the user-configurable object layers
Renders Images and Icons onto the PixelPlane
Registry for Plugins (currently only AWS Cloudwatch)
Tracks animations on every rendered frame
An angled light that adds contrast to the sides of components
A diffuse global light
Registry for all instances of Arcentry Objects on a diagram
Core Mechanism that processes changes
Keeps a backlog of undo/redo steps
Saves state via HTTP
Adds non-object data to the state
Switches between Modes like Select, Pan, Place Component etc.
Finds objects based on coordinates
Shows errors and dialog boxes
Shows component specific info
Used in select rectangle for export as image
The sidebar on the left hand side
Used to resize the sidebar
The tabs on top of the sidebar
Shows loading animations and status messages
The accordeon of components
The panel showing the current selection
The folder/document tree
menu in the bottom right of the screen
Notification bubbles that pop up in the top right