Merge pull request #177 from RAIRLab/20-no-highlights-pls

no highlight while dragging out of canvas
RAIRLab · Oct 22, 2023 · 408b9a0 · 408b9a0
2 parents dc399ff + 83f10c8
commit 408b9a0
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 28 deletions.
diff --git a/src/index.html b/src/index.html
@@ -19,10 +19,12 @@
     <script type="module" src="index.ts"></script>
   </head>
   <body>
-    <header id="header">
-      <p class="no-highlight">Peirce My Heart</p>
+    <header id="header" class="no-highlight" onmousedown="setHighlight('mousedown', 'header')"
+    onmouseleave="setHighlight('mouseleave', 'header')">
+      <p>Peirce My Heart</p>
     </header>
-    <div id="sidebar">
+    <div id="sidebar" class="no-highlight" onmousedown="setHighlight('mousedown', 'sidebar')"
+    onmouseleave="setHighlight('mouseleave', 'sidebar')">
       <div class="row">
         <button type="button" title="Selection Mode" class="modeButton">
           <i class="fa fa-mouse-pointer" aria-hidden="true"></i>
@@ -40,40 +42,37 @@
         </button>
       </div>
     </div>
-    <div id="toolbar">
+    <div id="toolbar" class="no-highlight" onmousedown="setHighlight('mousedown', 'toolbar')"
+    onmouseleave="setHighlight('mouseleave', 'toolbar')">
       <div id="genericTools">
         <div class="toolSetting">
           <p id="graphString"></p>
         </div>
         <div class="fileButton">
           <div class="toolSetting">
-            <p class="no-highlight">Theme:</p>
-          </div>
-          <select id="theme-select" name="theme-select" data-choose-theme>
+            <p>Theme:</p>
+          </div><select id="theme-select" name="theme-select" data-choose-theme>
             <option value="">Nature</option>
             <option value="Wireframe">Wireframe</option>
             <option value="Dark-Wireframe">Dark-Wireframe</option>
             <option value="vs-code">VS-Code</option>
-          </select>
-          <button type="button" onclick="saveMode()" title="Save File" class="modeButton">
+          </select><button type="button" onclick="saveMode()" title="Save File" class="modeButton">
             <i class="fa fa-floppy-o" aria-hidden="true"></i>
-          </button>
-          <button type="button" onclick="loadMode()" title="Load File" class="modeButton">
+          </button><button type="button" onclick="loadMode()" title="Load File" class="modeButton">
             <i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i>
           </button>
         </div>
       </div>
     </div>
-    <div id="subBar">
+    <div id="subBar" class="no-highlight" onmousedown="setHighlight('mousedown', 'subBar')"
+    onmouseleave="setHighlight('mouseleave', 'subBar')">
       <div id="cutTools">
         <div class="toolSetting">
-          <p class="no-highlight">Show Guidelines:</p>
+          <p>Show Guidelines:</p>
           <input id="showRect" type="checkbox" title="Show Rect"/>
-        </div>
-        <div class="toolSetting">
-          <p class="no-highlight">Cut Mode:</p>
-        </div>
-        <div class="toolSetting">
+        </div><div class="toolSetting">
+          <p>Cut Mode:</p>
+        </div><div class="toolSetting">
           <select id="mode" name="guideSelector">
             <option value="inscribed">Inscribed</option>
             <option value="circumscribed">Circumscribed</option>
@@ -82,17 +81,14 @@
       </div>
       <div id="atomTools">
         <div class="toolSetting">
-          <p class="no-highlight">Current Atom:</p>
-        </div>
-        <div class="toolSetting">
-          <p class="no-highlight" id="atomDisplay"></p>
-        </div>
-        <div class="toolSetting">
-          <p class="no-highlight">Show Current Bounding Box</p>
+          <p>Current Atom:</p>
+        </div><div class="toolSetting">
+          <p id="atomDisplay"></p>
+        </div><div class="toolSetting">
+          <p>Show Current Bounding Box</p>
           <input id="atomBox" type="checkbox" title="Show atomBox"/>
-        </div>
-        <div class="toolSetting">
-          <p class="no-highlight">Show All Bounding Boxes</p>
+        </div><div class="toolSetting">
+          <p>Show All Bounding Boxes</p>
           <input id="atomBoxes" type="checkbox" title="Show atomBoxes"/>
         </div>
       </div>

diff --git a/src/index.ts b/src/index.ts
@@ -49,13 +49,29 @@ window.cutMode = cutMode;
 window.dragMode = dragMode;
 window.saveMode = saveMode;
 window.loadMode = loadMode;
+window.setHighlight = setHighlight;
 declare global {
     interface Window {
         cutMode: () => void;
         atomMode: () => void;
         dragMode: () => void;
         saveMode: () => void;
         loadMode: () => void;
+        setHighlight: (event: string, id: string) => void;
+    }
+}
+
+//Add no-highlight class only when mouse is pressed on a div to ensure that elements in the div are
+//not highlighted any other time
+function setHighlight(event: string, id: string) {
+    const bar = document.getElementById(id);
+    switch (event) {
+        case "mousedown":
+            bar?.classList.remove("no-highlight");
+            break;
+        case "mouseleave":
+            bar?.classList.add("no-highlight");
+            break;
     }
 }