#207: Improve resizable div behavior, remember adjustment per app session

Author: e-halinen

src/renderer/components/HelmetProject/HelmetProject.jsx

@@ -37,6 +37,9 @@ const HelmetProject = ({
   const [statusRunFinishTime, setStatusRunFinishTime] = useState(null); //Updated when receiving "finished" message
   const [demandConvergenceArray, setDemandConvergenceArray] = useState([]); // Add convergence values to array every iteration
 
+  // User-set scenario list height in the Scenarios tab
+  const [scenarioListHeight, setScenarioListHeight] = useState(null);
+
   // Cost-Benefit Analysis (CBA) controls
   const [cbaOptions, setCbaOptions] = useState({});
 
@@ -409,6 +412,8 @@ const HelmetProject = ({
               handleClickStartStop={_handleClickStartStop}
               logArgs={logArgs}
               duplicateScenario={duplicateScenario}
+              scenarioListHeight={scenarioListHeight}
+              setScenarioListHeight={setScenarioListHeight}
             />
           </TabPanel>
           <TabPanel>

src/renderer/components/HelmetProject/Runtime/Runtime.css

@@ -20,15 +20,15 @@
     border-bottom: 1px solid #CCCCCC;
     box-sizing: border-box;
     padding: 20px;
-    height: fit-content;
+    min-height: 190px;
     margin-top: 1rem;
-    min-height: 250px;
     position: relative;
 }
 
 .Runtime__scenarios_controls_drag_handle {
     cursor: row-resize;
     height: 50px;
+    background-color: #FFFFFF;
 }
 
 .Runtime__scenarios-heading {
@@ -42,7 +42,9 @@
 
 .Runtime__scenarios {
     width: 700px;
-    overflow-y: auto;
+    overflow-y: scroll;
+    scrollbar-width: 20px;
+    height: calc(100% - 95px);
 }
 
 .Runtime__scenario {
@@ -104,6 +106,9 @@
     background: #007AC9;
     border-color: #007AC9;
     color: #ffffff;
+    position: relative;
+    bottom: 16px;
+    z-index: 1;
 }
 .Runtime__add-new-scenario-btn:hover {
     color: #ffffff;
@@ -119,6 +124,10 @@
     background-repeat: no-repeat;
 }
 
+.no-select {
+    user-select: none;
+}
+
 /* Start-stop */
 
 .Runtime__start-stop-controls {

src/renderer/components/HelmetProject/Runtime/Runtime.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Tooltip } from 'react-tooltip'
 import { renderToStaticMarkup } from 'react-dom/server';
 const _ = require('lodash');
@@ -8,7 +8,7 @@ const Runtime = ({
   setOpenScenarioID,
   reloadScenarios,
   handleClickScenarioToActive, handleClickNewScenario,
-  handleClickStartStop, logArgs, duplicateScenario
+  handleClickStartStop, logArgs, duplicateScenario, scenarioListHeight, setScenarioListHeight
 }) => {
 
   const visibleTooltipProperties = [
@@ -121,27 +121,39 @@ const Runtime = ({
     return <div/>
   }
 
-  const resizableDiv = document.getElementById("resizableDiv");
+  useEffect(() => {
+    if (scenarioListHeight) {
+      const resizableDiv = document.getElementById("resizableDiv");
+      resizableDiv.style.height = scenarioListHeight;
+    }
+  });
 
   let mousePosition;
   const resize = (e) => {
+    if (e.buttons === 0) {
+      // No mouse button is pressed, release event listener
+      document.body.style = "user-select: auto;"
+      document.removeEventListener("mousemove", resize, false);
+    }
     const yDimension = mousePosition - e.y;
     mousePosition = e.y;
-    resizableDiv.style.height = (parseInt(getComputedStyle(resizableDiv, '').height) - yDimension) + "px";
+    const resizableDiv = document.getElementById("resizableDiv");
+
+    const newHeight = (parseInt(getComputedStyle(resizableDiv, '').height) - yDimension) + "px";
+    resizableDiv.style.height = newHeight;
+    setScenarioListHeight(newHeight);
   }
 
   const onMouseDown = (e) => {
     if (e.pageY > (e.target.offsetTop + e.target.offsetHeight)) {
       mousePosition = e.y;
+      document.body.style = "user-select: none;"
       document.addEventListener("mousemove", resize, false);
     }
   }
 
   const onMouseUp = () => {
-    document.removeEventListener("mousemove", resize, false);
-  }
-
-  const onMouseOut = () => {
+    document.body.style = "user-select: auto;"
     document.removeEventListener("mousemove", resize, false);
   }
 
@@ -165,7 +177,7 @@ const Runtime = ({
 
       <div className="Runtime__scenarios-controls" id="resizableDiv">
       <div className="Runtime__scenarios-heading">Ladatut skenaariot</div>
-      <div className="Runtime__scenarios">
+      <div className="Runtime__scenarios" id="scenarioList">
         {/* Create table of all scenarios "<Button-To-Add-As-Runnable> <Button-To-Open-Configuration>" */}
         {scenarios.map((s) => {
           // Component for the tooltip showing scenario settings
@@ -234,7 +246,7 @@ const Runtime = ({
               <div className={"Runtime__scenario-delete"}
                       onClick={(e) => runningScenarioID ? undefined : deleteScenario(s)}
               ></div>
-              <Tooltip id="scenario-tooltip" style={{ borderRadius: "1rem", maxWidth: "40rem", marginLeft: "-50px" }}/>
+              <Tooltip id="scenario-tooltip" style={{ borderRadius: "1rem", maxWidth: "40rem", marginLeft: "-50px", zIndex: 2 }}/>
 
               &nbsp;
               <div className={"Runtime__scenario-clone"}
@@ -256,7 +268,7 @@ const Runtime = ({
         </button>
       </div>
       </div>
-      <div className="Runtime__scenarios_controls_drag_handle" onMouseDown={onMouseDown} onMouseUp={onMouseUp} onMouseOut={onMouseOut} />
+      <div className="Runtime__scenarios_controls_drag_handle" onMouseDown={onMouseDown} onMouseUp={onMouseUp} />
 
       <div className="Runtime__start-stop-controls">
         <div className="Runtime__heading">Ajettavana</div>