Merge pull request #13 from brauliorivas/feat-toggle

Feat toggle
key4hep · May 10, 2024 · 9c021a8 · 9c021a8
2 parents 3101b49 + d00ef2c
commit 9c021a8
Show file tree

Hide file tree

Showing 8 changed files with 360 additions and 175 deletions.
diff --git a/css/main.css b/css/main.css
@@ -3,3 +3,7 @@ body {
   padding: 0;
   /* overflow: hidden; */
 }
+
+.manipulation-tool {
+  display: none;
+}
diff --git a/css/toggle.css b/css/toggle.css
@@ -0,0 +1,74 @@
+#toggle {
+  position: fixed;
+  display: none;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  top: 10px;
+  left: 10px;
+  z-index: 1;
+}
+
+#toggle-label {
+  margin-right: 10px;
+  font-family: sans-serif;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+input:checked + .slider {
+  background-color: #2196f3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196f3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
diff --git a/index.html b/index.html
@@ -1,56 +1,61 @@
 <!DOCTYPE html>
 
 <html lang="en-US">
-  <head>
-    <meta charset="utf-8" />
-    <title>dmX</title>
 
-    <link rel="stylesheet" href="css/main.css">
-    <link rel="stylesheet" href="css/canvas.css">
-    <link rel="stylesheet" href="css/modal.css">
-  </head>
+<head>
+  <meta charset="utf-8" />
+  <title>dmX</title>
 
-  <body>
-    <div id="input-modal" class="modal-background">
-      <div class="modal-content">
+  <link rel="stylesheet" href="css/main.css">
+  <link rel="stylesheet" href="css/canvas.css">
+  <link rel="stylesheet" href="css/modal.css">
+  <link rel="stylesheet" href="css/toggle.css">
+</head>
 
-        <p>Welcome to <span id="logo">
+<body>
+  <div id="input-modal" class="modal-background">
+    <div class="modal-content">
+
+      <p>Welcome to <span id="logo">
           <span id="logo-d">d</span><span id="logo-m">m</span><span id="logo-x">X</span>
         </span></p>
 
-        <div id="input-message">
+      <div id="input-message">
+      </div>
+      <form>
+        <div class="mb-20">
+          <label class="mr-10" for="input-file">Select EDM4hep JSON:</label>
+          <input id="input-file" name="input-file" type="file" accept=".json">
+          <p class="small-text ml-20">Example input file (right click to save): <a
+              href="https://fccsw.web.cern.ch/fccsw/dmx/p8_ee_ZH_ecm240.edm4hep.json">p8_ee_ZH_ecm240.edm4hep.json</a>
+          </p>
+        </div>
+        <div id="event-selector">
+          <label class="mr-10" for="event-number">Select event number:</label>
+          <input id="event-number" name="event-number" type="number" value="0" min="0">
         </div>
-        <form>
-          <div class="mb-20">
-            <label class="mr-10" for="input-file">Select EDM4hep JSON:</label>
-            <input id="input-file"
-                   name="input-file"
-                   type="file"
-                   accept=".json">
-            <p class="small-text ml-20">Example input file (right click to save): <a href="https://fccsw.web.cern.ch/fccsw/dmx/p8_ee_ZH_ecm240.edm4hep.json">p8_ee_ZH_ecm240.edm4hep.json</a></p>
-          </div>
-          <div id="event-selector">
-            <label class="mr-10" for="event-number">Select event number:</label>
-            <input id="event-number"
-                   name="event-number"
-                   type="number"
-                   value="0"
-                   min="0">
-          </div>
-          <br>
-          <div class="align-right">
-            <button id="visualize-button">Visualize</button>
-          </div>
-        </form>
-        <div class="file-overview">
+        <br>
+        <div class="align-right">
+          <button id="visualize-button">Visualize</button>
         </div>
+      </form>
+      <div class="file-overview">
       </div>
     </div>
+  </div>
+
+  <div id="toggle" class="manipulation-tool">
+    <span id="toggle-label">Show PDG IDs</span>
+    <label class="switch">
+      <input type="checkbox">
+      <span class="slider round"></span>
+    </label>
+  </div>
+
+  <canvas id="canvas" width="100vw" height="100vh"></canvas>
 
-    <canvas id="canvas" width="100vw" height="100vh"></canvas>
+  <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js" type="text/javascript"></script>
+  <script type="module" src="js/main.js"></script>
+</body>
 
-    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"
-            type="text/javascript"></script>
-    <script type="module" src="js/main.js"></script>
-  </body>
-</html>
+</html>
diff --git a/js/graphic-primitives.js b/js/graphic-primitives.js
@@ -48,8 +48,12 @@ export function drawTex(ctx, x, y, texImg, maxWidth) {
   const tempWidth = texImg.naturalWidth * scale;
 
   ctx.save();
-  ctx.drawImage(texImg,
-                x - tempWidth / 2, y - tempHeight / 2,
-                tempWidth, tempHeight);
+  ctx.drawImage(
+    texImg,
+    x - tempWidth / 2,
+    y - tempHeight / 2,
+    tempWidth,
+    tempHeight
+  );
   ctx.restore();
 }