Home

src/app/main.js is the main entry point for the Ray Optics Simulation web app. It uses Vue to build the web UI for the simulator, and uses the Ray Optics Simulation core library (see below) to do the simulation and editing of optical scenes on the canvas layers.

The app contains some mixed-paradigm code that combines Vue and vanilla JavaScript due to historical reasons. In particular, the ObjBar component uses direct DOM manipulation to create the controls.

The option-related part of the toolbar (not including the object bar) is fully implemented in Vue. An instance of the Scene class is used throughout the session. The state of the scene is stored in the Vue store and bound to the UI elements via useSceneStore. Also, the preferences are stored in the Vue store and bound to the UI elements via usePreferencesStore. The list of controls in the "settings" section of the toolbar is in the SettingsList component.

The "tools" section of the toolbar is mostly implemented in Vue. The list of tools is managed by the ToolsList component. However, the UI logic for the tools uses some direct DOM manipulation (especially the paging in the mobile interface).

src/core/index.js is the main entry point for the Ray Optics Simulation core library that does the simulation and editing of optical scenes. It exports the main classes and some utility functions, and is used by the web app (which adds the web UI for it with Vue). This library is also built directly by Webpack into the rayOptics.js node module, which is used in the automatic image generation of the Gallery, and can also be used in other projects.

Here are the classes and functions exported by this module:

• Scene - The class representing the optical scene for simulation, containing the instances from sceneObjs (optical elements, decorations, etc) and the settings of the scene. It is the main data structure of the app and can be serialized to (and deserialized from) JSON.

• Simulator - The class for simulating the optical system described by the Scene class and rendering the scene (optical elements, decorations, rays, etc) on the canvas layers. The actual canvas rendering is done by the CanvasRenderer or FloatColorRenderer class depending on the render mode, instead of this class.

• Editor - The main class for visually editing the Scene data. It manages the user interactions with the canvas, such as dragging objects, selecting objects, and adding objects. Rendering of the objects is done by the Simulator class instead of this class. Also, since the UI is separated from the core library, the UI update (e.g. object bar) is not done by this class. When UI update is needed, this class emits events to notify the UI to update.

• sceneObjs - The namespace for all the classes representing objects that can be added to the scene. Scene objects include optical elements (e.g. mirrors, lenses), detectors, decorations (e.g. rulers, text labels), and special objects (e.g. handles, cropboxes).

• geometry - The namespace for functions for 2D geometry operations (e.g. distance, intersection, etc).