Merge branch 'modulize'

ricktu288 · Aug 27, 2024 · 667e7f3 · 667e7f3
2 parents 87d4532 + 0491f7c
commit 667e7f3
Show file tree

Hide file tree

Showing 38 changed files with 3,425 additions and 2,923 deletions.
diff --git a/simulator/css/style.css b/simulator/css/style.css
@@ -1,4 +1,4 @@
-#canvas0 {
+#canvasBelowLight {
   background-color: #000;
   position: absolute;
   width: 100%;
@@ -25,7 +25,7 @@
   z-index: -5;
 }
 
-#canvas1 {
+#canvasAboveLight {
   background-color: transparent;
   position: absolute;
   width: 100%;
@@ -385,11 +385,13 @@
   bottom: 0;
   z-index: -2;
   padding-right: 80px;
+  pointer-events: none;
 }
 
 #forceStop {
   color: gray;
   cursor: pointer;
+  pointer-events: auto;
 }
 
 #forceStop .spinner-border {
@@ -408,6 +410,10 @@
   padding: 3px;
 }
 
+.footer-right .btn:focus {
+  box-shadow: none;
+}
+
 #about {
   color: white;
 }
@@ -435,6 +441,7 @@
   -webkit-backdrop-filter: blur(2px);
   border-top-right-radius: 0.5em;
   width: fit-content;
+  pointer-events: auto;
 }
 
 #sideBar {
@@ -474,6 +481,7 @@
   backdrop-filter: blur(2px);
   -webkit-backdrop-filter: blur(2px);
   border-top-right-radius: 0.5em;
+  pointer-events: auto;
 }
 
 #error {
@@ -484,6 +492,7 @@
   backdrop-filter: blur(2px);
   -webkit-backdrop-filter: blur(2px);
   border-top-right-radius: 0.5em;
+  pointer-events: auto;
 }
 
 ::-webkit-scrollbar {

diff --git a/simulator/index.html b/simulator/index.html
@@ -28,9 +28,9 @@
     <div style="position: fixed; width: 100%; height: 100%; display: flex; flex-direction: column;">
       <div id="canvas-container" style="display:none">
         <canvas id="canvasGrid"></canvas>
-        <canvas id="canvas0"></canvas>
+        <canvas id="canvasBelowLight"></canvas>
         <canvas id="canvasLight"></canvas>
-        <canvas id="canvas1"></canvas>
+        <canvas id="canvasAboveLight"></canvas>
       </div>
       <div id="welcome" style="position:absolute; top: calc(50% + 34px); left: 0; width: 100%; transform: translate(0%, -50%); z-index:-3; color:rgba(255,255,255,0.5); font-size:12pt; text-align:center; line-height:2; font-family: initial !important">
         <span style="font-size:22pt">Welcome to Ray Optics Simulation</span><br>To add an optical component, select a tool and click the blank space.<br>To load an example, please <a href="https://phydemo.app/ray-optics/gallery/">go to the Gallery page</a>.</span>
@@ -1381,19 +1381,15 @@ <h5 class="modal-title" id="staticBackdropLabel" data-text="import_modules_title
     <script src="locales/es.js"></script>
     <script src="locales/pt_BR.js"></script>
 
-    <!--UI scripts-->
-    <script src="js/ui.js"></script>
-
-
     <!--Simulator scripts-->
     <script src="js/versionUpdate.js"></script>
     <script src="js/Scene.js"></script>
+    <script src="js/Simulator.js"></script>
     <script src="js/Mouse.js"></script>
     <script src="js/index.js"></script>
     <script src="js/geometry.js"></script>
     <script src="js/CanvasRenderer.js"></script>
-    <script src="js/editor.js"></script>
-    <script src="js/simulator.js"></script>
+    <script src="js/Editor.js"></script>
     <script src="js/ObjBar.js"></script>
     <script src="../thirdparty/FileSaver.js"></script>
     <script src="../thirdparty/canvas2svg.js"></script>

diff --git a/simulator/js/CanvasRenderer.js b/simulator/js/CanvasRenderer.js
@@ -22,8 +22,22 @@ class CanvasRenderer {
     /** @property {Object|null} backgroundImage - The background image of the scene, null if not set. */
     this.backgroundImage = backgroundImage;
 
-    /** @property {boolean} isSVG - Whether the canvas is being exported to SVG. */
-    this.isSVG = ctx.constructor === C2S;
+    if (typeof C2S !== 'undefined' && ctx.constructor === C2S) {
+      /** @property {boolean} isSVG - Whether the canvas is being exported to SVG. */
+      this.isSVG = true;
+    }
+
+    // Initialize the canvas
+    if (!this.isSVG) {
+      // only do this when not being exported to SVG to avoid bug
+      this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      this.ctx.setTransform(this.scale, 0, 0, this.scale, this.origin.x, this.origin.y);
+      if (this.ctx.constructor !== C2S && this.backgroundImage) {
+        this.ctx.globalAlpha = 1;
+        this.ctx.drawImage(this.backgroundImage, 0, 0);
+      }
+    }
   }
 
   /**
@@ -103,21 +117,4 @@ class CanvasRenderer {
     }
     this.ctx.stroke();
   }
-
-  /**
-  * Clear the canvas, and draw the background image if there is one.
-  **/
-  clear() {
-    //console.log([this.scale, 0, 0, this.scale, this.origin.x, this.origin.y])
-    if (this.ctx.constructor !== C2S) {
-      // only do this when not being exported to SVG to avoid bug
-      this.ctx.setTransform(1, 0, 0, 1, 0, 0);
-      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-      this.ctx.setTransform(this.scale, 0, 0, this.scale, this.origin.x, this.origin.y);
-      if (this.ctx.constructor !== C2S && this.backgroundImage) {
-        this.ctx.globalAlpha = 1;
-        this.ctx.drawImage(this.backgroundImage, 0, 0);
-      }
-    }
-  }
 }