Merge pull request #34 from Laaouatni/making-popup-animate-transition

fix #33 Making popup animate transition
Laaouatni · Aug 22, 2022 · 3df6501 · 3df6501 · vercel · Aug 22, 2022
2 parents e0463d4 + 00ece37
commit 3df6501
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 33 deletions.
diff --git a/gcode/index.html b/gcode/index.html
@@ -8,8 +8,9 @@
   </head>
   <body style="margin: 0">
     <div id="app" style="display: grid; place-items: center; height: 100vh">
-      <button id="btn">generate</button>
-      <!-- <section id="hello"></section> -->
+      <!-- <button id="btn">generate</button> -->
+      <section id="hello"></section>
+      <!-- <section id="GcodeSnippet">a</section> -->
     </div>
 
     <style>

diff --git a/gcode/main.js b/gcode/main.js
@@ -1,36 +1,44 @@
 const t0 = performance.now();
-// import GcodeAPI from "./src/API/GcodeApi/GcodeAPI_main/GcodeAPI";
-
+import GcodeAPI from "./src/API/GcodeApi/GcodeAPI_main/GcodeAPI";
 
 import G0 from "./src/API/GcodeApi/Gcommands/G/G0";
 import Gcss from "./src/API/GcodeApi/Gsimulator/Gcss/Gcss.js";
 
 let a = new G0({});
 
 for (let i = 0; i < 9; i++) {
-  if (i % 2 == 0) {
-    a.moveTo({ left: Math.random() * 100, top: Math.random() * 50 });
-  } else {
-    a.moveTo({ top: Math.random() * 100, left: Math.random() * 50 });
-  }
+  a.moveTo({ left: 50, top: 10*i});
 }
 
 
+let g = new Gcss({
+  width: 500,
+  height: 500,
+  parentHtmlContainer: document.querySelector("section"),
+});
 
-let btn = document.querySelector("#btn")
+g.generate();
 
-btn.addEventListener("click", btnGenerate, { once: true });
 
-function btnGenerate() {
-  let g = new Gcss({
-    width: 500,
-    height: 500,
-    parentHtmlContainer: document.querySelector("section"),
-  });
+const t1 = performance.now();
+console.log(`Call to doSomething took ${t1 - t0} milliseconds.`);
+console.table(GcodeAPI.array);
 
-  g.generate();
 
-  btn.disabled = true;
-}
-const t1 = performance.now();
-console.log(`Call to doSomething took ${t1 - t0} milliseconds.`);
+
+
+// let btn = document.querySelector("#btn")
+
+// btn.addEventListener("click", btnGenerate, { once: true });
+
+// function btnGenerate() {
+//   let g = new Gcss({
+//     width: 500,
+//     height: 500,
+//     parentHtmlContainer: document.querySelector("section"),
+//   });
+
+//   g.generate();
+
+//   btn.disabled = true;
+// }
diff --git a/gcode/src/API/GcodeApi/Gsimulator/Gcss/CssFloatPopup/CssFloatPopup.js b/gcode/src/API/GcodeApi/Gsimulator/Gcss/CssFloatPopup/CssFloatPopup.js
@@ -34,11 +34,11 @@ export default class CssFloatPopup {
   }
 
   hidePopup() {
-    this.popup.style.display = "none";
+    this.popup.style.opacity = "0";
   }
 
   showPopup() {
-    this.popup.style.display = "block";
+    this.popup.style.opacity = "1";
     this.span.innerHTML = getPopupSpanHtml(this);
     new UpdatePopup(this).update();
   }
@@ -55,10 +55,14 @@ export default class CssFloatPopup {
 
   stylePopup() {
     this.popupStylesToAdd = {
-      display: "none",
+      display: "block",
       position: "absolute",
       top: 0,
       left: 0,
+      opacity: 0, 
+      "z-index": "999999",
+      "pointer-events": "none",
+      transition: `top 0.3s ease-in-out,` + `left 0.3s ease-in-out,` + `opacity 0.3s ease-in-out`,
     };
 
     this.popupKeysArray = Object.keys(this.popupStylesToAdd);
@@ -76,6 +80,7 @@ export default class CssFloatPopup {
       height: "1rem",
       transform: "rotate(45deg)",
       "z-index": -1,
+      transition: `top 0.3s ease-in-out,` + `left 0.3s ease-in-out`,
     };
 
     this.arrowKeysArray = Object.keys(this.arrowStylesToAdd);

diff --git a/gcode/src/API/GcodeApi/Gsimulator/Gcss/other/Methods/CssLineLength/CssLineLength.js b/gcode/src/API/GcodeApi/Gsimulator/Gcss/other/Methods/CssLineLength/CssLineLength.js
@@ -21,10 +21,7 @@ export default class CssLineLength {
       this.obj.currentObj.x !== this.obj.previusObj.x
     ) {
       // pitagora's theorem
-      return Math.sqrt(
-        Math.pow(this.obj.PosDifference.x, 2) +
-          Math.pow(this.obj.PosDifference.y, 2),
-      );
+      return Math.hypot(this.obj.PosDifference.x, this.obj.PosDifference.y);
     } else {
       // 0 means they aren't moving
       return 0;
@@ -59,4 +56,4 @@ export default class CssLineLength {
       this.obj.notSameXY = false;
     }
   }
-}
+}
diff --git a/gcode/src/CSS/FloatingUI/arrow/arrow.css b/gcode/src/CSS/FloatingUI/arrow/arrow.css
@@ -1,4 +1,4 @@
 #arrow {
   background-color: var(--sky-50);
   border-radius: 0.2rem;
-}
+}
diff --git a/gcode/src/CSS/FloatingUI/tooltip/tooltip.css b/gcode/src/CSS/FloatingUI/tooltip/tooltip.css
@@ -9,5 +9,4 @@
   background-color: var(--sky-50);
   border-radius: 0.5rem;
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
-  z-index: 9999;
-}
+}