forgot password?


API Endpoints


Arcentry Development

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
Arcentry Architecture

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