How Simulator UI is Setup?

Contributing author: @shubhankarsharma00

Please read this article by @fpintos to get basic information on different parts of the simulator before you read this article.

The view for the CircuiVerse simulator hosted at URL/simulator can be found in app/simulator/edit.html.erb but the main files that are responsible for generating the whole simulator are in public/js. Currently, all these files are included in edit.html.erb and setup() function is called as soon as DOM gets loaded. The setup function is defined in logix.js which calls 4 functions:

1. setupElementsList - It initializes some useful array which is helpful while simulating, saving, and loading projects. It also draws icons in the sidebar.
2. setupEnvironment - function to setup environment variables for a new like projectId and Pixel Ratio. It also calls resetup which draws the grid and calls update function responsible for UI update.
3. setupUI - adds some UI elements to the sidebar and menu. It also attaches listeners to the sidebar.
4. startListeners - Which start all the listeners in the simulation area.

If we are loading a preexisting project it calls load() function. Further, the function looks for previous unsaved data and if there is some unsaved project simulator loads that too. In case we load a project default environment variables declared during setupEnvironment function call are overwritten else we proceed with those default variables.

Now if anyone clicks any circuit element icon (say AndGate icon) in the sidebar, a constructor(in this case new AndGate()) is called by mouse down listener defined (during setupUI function call). Most of these constructors are declared in modules.js, sequential.js, or in a standalone file in case od RAM or Counter.

Any Element drawn has nodes (of class Node) attached to it. This can be an input node or output node. In case this node is selected and dragged a wire (of class Wire) is drawn and another node is drawn wherever dragging stop if no node already exists. If the node is not part of any element it is an intermediatory node and it's parent is the whole Scope.