re-size the code window horizontally

ArduinoFrontend/src/app/code-editor/code-editor.component.html

@@ -46,8 +46,11 @@
               class="fas fa-external-link-alt"></i></a></button>
       </div>
     </div>
-    <ngx-monaco-editor id="editor" style="height: calc(100vh - 135px); display: block;" [options]="editorOptions" [(ngModel)]="code"
+ <!--  <ngx-monaco-editor id="editor" style="height * (window.innerHeight / 100) - 135"; [options]="editorOptions" [(ngModel)]="code"
       (ngModelChange)="codeChanged()" (onInit)="onInit($event)">
+    </ngx-monaco-editor>   --> 
+    <ngx-monaco-editor id="editor" [style.width.%]="100" [style.height.px]="editorHeight" [options]="editorOptions" [(ngModel)]="code"
+     (ngModelChange)="codeChanged()" (onInit)="onInit($event)">
     </ngx-monaco-editor>
   </div>
 

ArduinoFrontend/src/app/code-editor/code-editor.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
 import { ArduinoUno } from '../Libs/outputs/Arduino';
 import { Download } from '../Libs/Download';
 
@@ -109,6 +109,7 @@ export class CodeEditorComponent {
    * Height of the code editor in terms of VH
    */
   @Input() height = 80;
+  editorHeight = 0; // Editor's dynamic height
   /**
    * Code Visibility in LTI mode
    */
@@ -183,6 +184,24 @@ export class CodeEditorComponent {
     }]);
     this.openFolder();
   }
+  /**
+  * Monitor input changes for dynamic resizing
+  */
+ ngOnChanges(changes: SimpleChanges): void {
+  if (changes['width']) {
+    this.updateEditorHeight();
+  }
+}
+/**
+ * Calculate editor height dynamically
+ */
+private updateEditorHeight(): void {
+  const containerPadding = 135; // Account for toolbar and padding
+  this.editorHeight = (window.innerHeight * this.height) / 100 - containerPadding;
+  if (this.editor) {
+    this.editor.layout();
+  }
+}
   /**
    * On Monaco code editor initialization
    * @param editor Monaco Editor Instance

ArduinoFrontend/src/app/simulator/simulator.component.css

@@ -166,13 +166,23 @@
   position: fixed;
   top: 100px;
   left: -600px;
-  width: 500px;
+  /*width: 500px; */
   transition: left 0.5s ease-in-out;
 }
 
 .show-code-editor {
   left: 0;
 }
+.resize-handle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 10px; /* The width of the resize handle */
+  height: 100%; /* Full height of the editor */
+  cursor: ew-resize; /* Horizontal resize cursor */
+  background-color: #ccc; /* Optional: Add some color to the handle */
+ }
+
 
 .lightblue {
   background-color: lightskyblue;

ArduinoFrontend/src/app/simulator/simulator.component.html

@@ -248,13 +248,20 @@
 
 </div>
 <!-- end of icon block -->
-
+<!--
 
 <div class="code-editor" style="z-index: 1000;" #codeDiv>
   <app-code-editor width="500" height="100" [reinit]="openCodeEditor"></app-code-editor>
 </div>
-
-
+-->
+<div class="code-editor" style="z-index: 1000;" #codeDiv>
+  <app-code-editor [width]="editorWidth" height="100" [reinit]="openCodeEditor"></app-code-editor>
+  <div
+    class="resize-handle"
+    (mousedown)="startResize($event)">
+  </div>
+ </div>
+
 
 <div class="d-flex" id="wrapper">
   <!-- Sidebar -->

ArduinoFrontend/src/app/simulator/simulator.component.ts

@@ -162,6 +162,11 @@ export class SimulatorComponent implements OnInit, OnDestroy {
    * Determines whether staff is
    */
   isStaff = false;
+   // New properties for resizing the code editor
+   editorWidth: number = 500; // Set an initial width for the editor
+   isResizing: boolean = false;
+   initialWidth: number = 500;
+   initialMouseX: number = 0;
   /**
    * Simulator Component constructor
    * @param aroute Activated Route
@@ -190,6 +195,40 @@ export class SimulatorComponent implements OnInit, OnDestroy {
     el.setAttribute('transform', 'scale(1,1)translate(0,0)');
     return el;
   }
+  // Start resizing: Capture initial position
+ startResize(event: MouseEvent) {
+  this.isResizing = true;
+  this.initialWidth = this.editorWidth;
+  this.initialMouseX = event.clientX;
+  // Attach mousemove and mouseup event listeners to document
+  document.addEventListener('mousemove', this.onMouseMove.bind(this));
+  document.addEventListener('mouseup', this.stopResize.bind(this));
+}
+
+
+// Resize logic: Update editor width as the mouse moves
+onMouseMove(event: MouseEvent) {
+  if (this.isResizing) {
+    const diff = event.clientX - this.initialMouseX;
+    this.editorWidth = this.initialWidth + diff;
+
+    if (this.editorWidth < 500) this.editorWidth = 500; // Minimum width
+    // Update the handle position
+    const handle = document.querySelector('.resize-handle');
+    if (handle instanceof HTMLElement) {
+      handle.style.left = `${this.editorWidth}px`; 
+    }
+
+  }
+}
+
+
+// Stop resizing: Remove mousemove and mouseup event listeners
+stopResize() {
+  this.isResizing = false;
+  document.removeEventListener('mousemove', this.onMouseMove.bind(this));
+  document.removeEventListener('mouseup', this.stopResize.bind(this));
+}
   /**
    * On Destroy Callback
    */
@@ -430,7 +469,14 @@ export class SimulatorComponent implements OnInit, OnDestroy {
    * @param elem Code Editor Parent Div
    */
   toggleCodeEditor(elem: HTMLElement) {
-    elem.classList.toggle('show-code-editor');
+    const currentWidth = elem.offsetWidth; // Get the current width of the editor
+    if (this.toggle) {
+      // Show the editor
+      elem.style.left = `0px`;
+    } else {
+      // Hide the editor based on its current width
+      elem.style.left = `-${currentWidth}px`;
+    }
     this.toggle = !this.toggle;
     this.openCodeEditor = !this.openCodeEditor;
   }