Issue controls panel UI

src/controls.ts

@@ -40,6 +40,14 @@ export class URDFControls extends GUI {
     this.domElement.style.right = '5px';
     this.domElement.setAttribute('class', 'dg main urdf-gui');
 
+    // Add resize functionality
+    this._setupResizeHandling({
+      minWidth: 150,
+      maxWidth: 500,
+      grabZoneWidth: 12
+    });
+
+    // Create folders
     this._workspaceFolder = this.addFolder('Workspace');
     this._workspaceFolder.domElement.setAttribute(
       'class',
@@ -207,4 +215,54 @@ export class URDFControls extends GUI {
     }
     return this.controls.joints;
   }
+
+  /**
+   * Sets up panel resizing functionality
+   * @param minWidth - Minimum width of the panel
+   * @param maxWidth - Maximum width of the panel
+   * @param grabZoneWidth - Width of the area where the mouse can be clicked
+   */
+  private _setupResizeHandling(options: {
+    minWidth: number;
+    maxWidth: number;
+    grabZoneWidth: number;
+  }): void {
+    let isResizing = false;
+    let startX: number;
+    let startWidth: number;
+
+    const { minWidth, maxWidth, grabZoneWidth } = options;
+
+    const onMouseMove = (e: MouseEvent) => {
+      if (!isResizing) {
+        return;
+      }
+
+      const width = startWidth - (e.clientX - startX);
+      if (width >= minWidth && width <= maxWidth) {
+        this.domElement.style.width = `${width}px`;
+      }
+    };
+
+    const onMouseUp = () => {
+      isResizing = false;
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+
+    this.domElement.addEventListener('mousedown', (e: MouseEvent) => {
+      if (
+        e.clientX <
+        this.domElement.getBoundingClientRect().left + grabZoneWidth
+      ) {
+        isResizing = true;
+        startX = e.clientX;
+        startWidth = parseInt(getComputedStyle(this.domElement).width, 10);
+        e.preventDefault();
+
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+      }
+    });
+  }
 }

src/renderer.ts

@@ -123,7 +123,7 @@ export class URDFRenderer extends THREE.WebGLRenderer {
    * Adds three lights to the scene
    */
   private _addLights(): void {
-    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
+    const directionalLight = new THREE.DirectionalLight(0xff0000, 1.0);
     directionalLight.castShadow = true;
     directionalLight.position.set(3, 10, 3);
     directionalLight.shadow.camera.top = 2;
@@ -132,12 +132,12 @@ export class URDFRenderer extends THREE.WebGLRenderer {
     directionalLight.shadow.camera.right = 2;
     directionalLight.shadow.camera.near = 0.1;
     directionalLight.shadow.camera.far = 40;
-    this._scene.add(directionalLight);
+    //this._scene.add(directionalLight);
 
-    const ambientLight = new THREE.AmbientLight('#fff');
-    ambientLight.intensity = 0.5;
+    const ambientLight = new THREE.AmbientLight('#ff0000');
+    ambientLight.intensity = 1;
     ambientLight.position.set(0, 5, 0);
-    this._scene.add(ambientLight);
+    //this._scene.add(ambientLight);
 
     const hemisphereLight = new THREE.HemisphereLight(
       this._colorSky,

style/base.css

@@ -27,6 +27,18 @@
   color: var(--gui-color-font);
   border: none;
   box-sizing: border-box;
+  min-width: 150px;
+  max-width: 500px;
+  padding-bottom: 20px;
+}
+
+/* Add a resize handle on the left border */
+.urdf-gui::before {
+  content: '';
+  position: absolute;
+  width: 12px;
+  height: 100%;
+  cursor: ew-resize;
 }
 
 .urdf-gui li.folder {
@@ -128,3 +140,10 @@
   max-height: 50vh;
   overflow: scroll;
 }
+
+/* Style for Dat.GUI's close button */
+.urdf-gui .close-button {
+  width: 100% !important;
+  color: white !important;
+  position: absolute;
+}