Arcentry - Frontend Architecture Overview

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.

Frontend Object Structure

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.

Object Graph

• app

  the main app

• errorReporter

  Catches errors and sends reports to a HTTP API

• accountData

  store for user account data

• userSettings

  store for user settings

• eventHub

  app-wide event distribution mechanism

• canvas

  main drawing node for the 3D space

• renderer

  Renders the scene graph to the canvas

• scene

  Root Node for the THREE.js scene

• camera

  A wrapper around THREE.Orthograpic camera

• grid

  The line grid in the 3D space

• mouseControls

  Tracks mouse movement and actions

• mouseProjector

  Maps 2D Mouse Coordinates to objects in the 3D space

• continuousPan

  Handles panning via arrow keys

• keyboardControls

  Handles keyboard interactions

• interactionPlane

  Draws ephemeral 2D visuals for selection, hover etc.

• widgetManager

  Handles Charts and Scaling Group Widgets

• pixelPlane

  Draws 2D shapes like lines, areas, images or icons.

• linePlane

  [DEPRECATED] lines are now drawn onto the PixelPlane

• selectionManager

  Manages individual and group selection of objects

• hoverManager

  Manages mouse hovering

• globalInteractions

  Manages Copy & Paste as well as moving grouped objects

• imageCache

  Loads and stores 2D textures for images and icons

• layerManager

  Handles the user-configurable object layers

• imageRenderer

  Renders Images and Icons onto the PixelPlane

• plugin

  Registry for Plugins (currently only AWS Cloudwatch)

• animations

  Tracks animations on every rendered frame

• directionalLight

  An angled light that adds contrast to the sides of components

• ambientLight

  A diffuse global light

• objects

  Registry for all instances of Arcentry Objects on a diagram

• state

  Core Mechanism that processes changes

• history

  Keeps a backlog of undo/redo steps

• persistence

  Saves state via HTTP

• pubSub

  WebSocket endpoint

• meta

  Adds non-object data to the state

• objectCreator

  Creates Components

• interactionMode

  Switches between Modes like Select, Pan, Place Component etc.

• objectFinder

  Finds objects based on coordinates

• $refs

  Child-component references

• fullscreenOverlay

  Shows errors and dialog boxes

• contextOverlay

  Shows component specific info

• imageAreaSelector

  Used in select rectangle for export as image

• sidebar

  The sidebar on the left hand side

• $refs

  Child-component references

• resizeHandle

  Used to resize the sidebar

• nav

  The tabs on top of the sidebar

• overlay

  Shows loading animations and status messages

• componentLibrary

  The accordeon of components

• contextPanel

  The panel showing the current selection

• filePanel

  The folder/document tree

• viewControls

  menu in the bottom right of the screen

• notifications

  Notification bubbles that pop up in the top right