Modified the resizing code, to better explain how it works and what v…

…alues are utilized

packages/web/src/scripts/main.js

@@ -55,6 +55,13 @@ const resizerX = document.querySelector(".vertical-divider")
 
 /*** Horizontal sizing section ***/
 
+//The limits for the menus width before it snaps into its final width (px)
+const menuCollapseThreshold = 45;
+const menuExpandThreshold = 65;
+//The final expand and collapse widths of the menu element (px)
+const menuCollapseFinal = 30;
+const menuExpandFinal = 80;
+
 /**
  * Mouse down event listener for the resizerX element which
  * then runs the onmousemoveX and the onmouseupX functions
@@ -75,8 +82,8 @@ function onmousemoveX(e) {
   e.preventDefault()
   let clientX = e.clientX
   const deltaX = clientX - (resizerX.clientX || clientX)
-  const l = resizerX.previousElementSibling
-  const r = resizerX.nextElementSibling
+  const menuContainer = resizerX.previousElementSibling
+  const editorContainer = resizerX.nextElementSibling
 
   if (clientX > screen.width) {
     resizerX.clientX = screen.width
@@ -87,24 +94,26 @@ function onmousemoveX(e) {
   else {
     resizerX.clientX = clientX
 
-    // LEFT
+    // LEFT (menu collapse)
     if (deltaX < 0) {
-      const w = Math.round(parseInt(getComputedStyle(l).width) + deltaX)
-      l.style.flex = `0 ${w < 45 ? 30 : w}px`
-      r.style.flex = "1 0"
-      if (w < 65) {
+      const elementWidth = Math.round(parseInt(getComputedStyle(menuContainer).width) + deltaX)
+      menuContainer.style.flex = `0 ${elementWidth < menuCollapseThreshold ? menuCollapseFinal : elementWidth}px`
+      editorContainer.style.flex = "1 0"
+      //Hide the buttons text when the menus width is less than 65px
+      if (elementWidth < menuExpandThreshold) {
         textIcon.forEach(text => {
           text.classList.add("hiddenH")
         })
       }
     }
 
-    // RIGHT
+    // RIGHT (menu expand)
     if (deltaX > 0) {
-      const w = Math.round(parseInt(getComputedStyle(l).width) + deltaX)
-      l.style.flex = `0 ${w > 65 ? 80 : w}px`
-      r.style.flex = "1 0"
-      if (w > 65) {
+      const elementWidth = Math.round(parseInt(getComputedStyle(menuContainer).width) + deltaX)
+      menuContainer.style.flex = `0 ${elementWidth > menuExpandThreshold ? menuExpandFinal : elementWidth}px`
+      editorContainer.style.flex = "1 0"
+      //Show the buttons text when the menus width is bigger than 65px
+      if (elementWidth > menuExpandThreshold) {
         textIcon.forEach(text => {
           text.classList.remove("hiddenH")
         })
@@ -128,6 +137,13 @@ function onmouseupX(e) {
 
 /*** Vertical sizing section ***/
 
+//The limits for the consoles height before it snaps into its final height (px)
+const consoleCollapseThreshold = 55;
+const consoleExpandThreshold = 225;
+//The final expand and collapse heights of the collapse element (px)
+const consoleCollapseFinal = 43;
+const consoleExpandFinal = 210;
+
 /**
  * Mouse down event listener for the resizerY element which
  * then runs the onmousemoveY and the onmouseupY functions
@@ -148,8 +164,8 @@ function onmousemoveY(e) {
   e.preventDefault()
   const clientY = e.clientY
   const deltaY = clientY - (resizerY.clientY || clientY)
-  const t = resizerY.previousElementSibling
-  const b = resizerY.nextElementSibling
+  const editorContainer = resizerY.previousElementSibling
+  const consoleContainer = resizerY.nextElementSibling
 
   if (clientY > screen.height) {
     resizerY.clientY = screen.height
@@ -159,13 +175,15 @@ function onmousemoveY(e) {
   }
   else {
     resizerY.clientY = clientY
-    // DOWN
+
+    // DOWN (Console collapse)
     if (deltaY > 0) {
-      const h = Math.round(parseInt(getComputedStyle(b).height) - deltaY)
-      b.style.flex = `0 ${h < 55 ? 43 : h}px`
-      t.style.flex = "1 0"
+      const consoleHeight = Math.round(parseInt(getComputedStyle(consoleContainer).height) - deltaY)
+      consoleContainer.style.flex = `0 ${consoleHeight < consoleCollapseThreshold ? consoleCollapseFinal : consoleHeight}px`
+      editorContainer.style.flex = "1 0"
 
-      if (h < 43) {
+      //If the console is fully collapse, then change the state of the console element, as well as changing to the expand arrows icon
+      if (consoleHeight < consoleCollapseFinal) {
         consoleElement.classList.remove("expanded")
         consoleElement.classList.add("collapsed")
 
@@ -174,19 +192,24 @@ function onmousemoveY(e) {
         minMaxBtn.children[0].classList.remove("collapse-arrows")
       }
 
-      if (h < 445) {
+      //Show the buttons text only if there is enough space
+      if (consoleHeight < 445) {
         textIcon.forEach(text => {
           text.classList.remove("hiddenV")
         })
       }
     }
-    // UP
+
+    // UP (Console expand)
+    /*Note: Unlike the horizontal resizer, to decide how much the console should be able to expand the height of the editor is used rather than the console height.
+    This is to assure be responsiveness, since it is easier to know how small the editor can be in any screen size.*/
     if (deltaY < 0) {
-      const h = Math.round(parseInt(getComputedStyle(t).height) + deltaY)
-      t.style.flex = `0 ${h < 225 ? 210 : h}px`
-      b.style.flex = "1 0"
+      const editorHeight = Math.round(parseInt(getComputedStyle(editorContainer).height) + deltaY)
+      editorContainer.style.flex = `0 ${editorHeight < consoleExpandThreshold ? consoleExpandFinal : editorHeight}px`
+      consoleContainer.style.flex = "1 0"
 
-      if (h > 714) {
+      //If the console is not fully collapse, update the console element state to expanded and show the collapse arrows icon
+      if (editorHeight > 714) {
         consoleElement.classList.remove("collapsed")
         consoleElement.classList.add("expanded")
 
@@ -195,7 +218,8 @@ function onmousemoveY(e) {
         minMaxBtn.children[0].classList.add("collapse-arrows")
       }
 
-      if (h < 310) {
+      //Hide the buttons text when the editor width is less than 310px
+      if (editorHeight < 310) {
         textIcon.forEach(text => {
           text.classList.add("hiddenV")
         })
@@ -214,4 +238,4 @@ function onmouseupY(e) {
   document.removeEventListener("mousemove", onmousemoveY)
   document.removeEventListener("mouseup", onmouseupY)
   delete e.clientY
-}
+}