feat: introduced new split pane for uvl tutorial

WebSocketClient/index.html

@@ -64,11 +64,14 @@ <h1>Get the UVLS VSCode Extension</h1>
         <div id="first">
             <div id="container" class="editor"></div>
         </div>
-        <div id="separator"></div>
+        <div id="separator1" class="separator"></div>
 
         <div id="second">
             <div class="graph"></div>
         </div>
+        <div id="separator2" class="separator"></div>
+        <div id="third">
+        </div>
     </div>
 </div>
 
@@ -88,48 +91,77 @@ <h1>Get the UVLS VSCode Extension</h1>
 
 <script>
     // A function is used for dragging and moving
-    function dragElement(element, direction) {
+    function dragElement(s1, s2) {
         var md; // remember mouse down info
         const first = document.getElementById("first");
         const second = document.getElementById("second");
+        const third = document.getElementById("third");
 
-        element.onmousedown = onMouseDown;
+        s1.onmousedown = onMouseDownS1;
+        s2.onmousedown = onMouseDownS2;
 
-        function onMouseDown(e) {
+        function onMouseDownS1(e) {
             md = {
                 e,
-                offsetLeft: element.offsetLeft,
-                offsetTop: element.offsetTop,
+                offsetLeft: s1.offsetLeft,
+                offsetTop: s1.offsetTop,
                 firstWidth: first.offsetWidth,
                 secondWidth: second.offsetWidth
             };
 
-            document.onmousemove = onMouseMove;
+            document.onmousemove = onMouseMoveS1;
             document.onmouseup = () => {
                 document.onmousemove = document.onmouseup = null;
             }
         }
 
-        function onMouseMove(e) {
+        function onMouseMoveS1(e) {
             var delta = {
                 x: e.clientX - md.e.clientX,
                 y: e.clientY - md.e.clientY
             };
 
-            if (direction === "H") // Horizontal
-            {
-                // Prevent negative-sized elements
-                delta.x = Math.min(Math.max(delta.x, -md.firstWidth),
-                    md.secondWidth);
+            // Prevent negative-sized elements
+            delta.x = Math.min(Math.max(delta.x, -md.firstWidth),
+                md.secondWidth);
+
+            s1.style.left = md.offsetLeft + delta.x + "px";
+            first.style.width = (md.firstWidth + delta.x) + "px";
+            second.style.width = (md.secondWidth - delta.x) + "px";
+        }
 
-                element.style.left = md.offsetLeft + delta.x + "px";
-                first.style.width = (md.firstWidth + delta.x) + "px";
-                second.style.width = (md.secondWidth - delta.x) + "px";
+        function onMouseDownS2(e) {
+            md = {
+                e,
+                offsetLeft: s2.offsetLeft,
+                offsetTop: s2.offsetTop,
+                secondWidth: second.offsetWidth,
+                thirdWidth: third.offsetWidth,
+            };
+
+            document.onmousemove = onMouseMoveS2;
+            document.onmouseup = () => {
+                document.onmousemove = document.onmouseup = null;
             }
         }
+
+        function onMouseMoveS2(e) {
+            var delta = {
+                x: e.clientX - md.e.clientX,
+                y: e.clientY - md.e.clientY
+            };
+
+            // Prevent negative-sized elements
+            delta.x = Math.min(Math.max(delta.x, -md.secondWidth),
+                md.thirdWidth);
+
+            s2.style.left = md.offsetLeft + delta.x + "px";
+            second.style.width = (md.secondWidth + delta.x) + "px";
+            third.style.width = (md.thirdWidth - delta.x) + "px";
+        }
     }
 
-    dragElement(document.getElementById("separator"), "H");
+    dragElement(document.getElementById("separator1"), document.getElementById("separator2"));
 </script>
 </body>
 </html>

WebSocketClient/src/uvlTutorial.ts

@@ -13,13 +13,20 @@ export default function initUvlTutorial(editor: editor.IStandaloneCodeEditor) {
         uvlTutorialButton.addEventListener('click', function () {
             let tutorialPageCounter = 0;
             tutorialToggle = !tutorialToggle;
-            let mainDiv = document.getElementById("main-div");
-            let splitter = document.getElementById("splitter");
+            let mainDiv = document.getElementById("third");
+            const secondPane = document.getElementById("second");
+            const thirdPane = document.getElementById("third");
             if (tutorialToggle) {
-                splitter!.style.width = "75%";
+                if (secondPane && thirdPane) {
+                    secondPane.style.width = "50%";
+                    thirdPane.style.width = "50%";
+                }
                 setTutorialPage(mainDiv, tutorialPageCounter);
             } else {
-                splitter!.style.width = "100%";
+                if (secondPane && thirdPane) {
+                    secondPane.style.width = "100%";
+                    thirdPane.style.width = "0%";
+                }
                 let newDiv = document.getElementById("uvl-tutorial-div");
                 mainDiv!.removeChild(newDiv!);
             }

WebSocketClient/style/split.css

@@ -5,7 +5,7 @@
 
 }
 
-#separator {
+.separator {
     cursor: col-resize;
     background-color: #3e3e3e;
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='30'><path d='M2 0 v30 M5 0 v30 M8 0 v30' fill='none' stroke='black'/></svg>");
@@ -32,4 +32,10 @@
     width: 0;
     height: 100%;
     min-width: 10px;
+}
+
+#third {
+    width: 0;
+    height: 100%;
+    min-width: 10px;
 }

WebSocketClient/style/style.css

@@ -107,6 +107,7 @@ dialog {
     color: white;
     position: relative;
     width: 100%;
+    height: 100%;
 
     & .text {
         line-height: 1.6;