Issue controls panel UI (#81)

* Resizeable controls panel v1

* fixed button color

* cleaned code

* Refactored resize functionality code

* cleaned code

* Fix lint check

* Fix controls panel resizing

* Revert lighting parameters in renderer

* Improve controls panel UI resize feature

* Make joint names overflow correctly

* Lint CSS code

Author: Yahiewi

src/controls.ts

@@ -40,6 +40,13 @@ 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,
+      grabZoneWidth: 12
+    });
+
+    // Create folders
     this._workspaceFolder = this.addFolder('Workspace');
     this._workspaceFolder.domElement.setAttribute(
       'class',
@@ -207,4 +214,53 @@ 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;
+    grabZoneWidth: number;
+  }): void {
+    let isResizing = false;
+    let startX: number;
+    let startWidth: number;
+
+    const { minWidth, grabZoneWidth } = options;
+
+    const onMouseMove = (e: MouseEvent) => {
+      if (!isResizing) {
+        return;
+      }
+
+      const width = startWidth - (e.clientX - startX);
+      if (width >= minWidth) {
+        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);
+      }
+    });
+  }
 }

style/base.css

@@ -27,6 +27,18 @@
   color: var(--gui-color-font);
   border: none;
   box-sizing: border-box;
+  min-width: 150px;
+  max-width: 98%;
+  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 {
@@ -129,8 +141,46 @@
   overflow: scroll;
 }
 
+/* Style for Dat.GUI's close button */
+.urdf-gui .close-button {
+  width: 100% !important;
+  color: white !important;
+  position: absolute;
+}
+
 /* Expand hover area to reach color pickers */
 .urdf-gui .cr.color .c:hover {
   padding: 15px 0;
   margin: -15px 0;
 }
+
+.urdf-gui li.cr.number.has-slider .property-name {
+  flex: 1 1;
+  padding-right: 15px;
+}
+
+.urdf-gui li.cr.number.has-slider .property-name:hover {
+  overflow-x: auto;
+  text-overflow: unset;
+}
+
+/* Adjust the control container */
+.urdf-gui li.cr.number.has-slider .c {
+  flex: 0 1 180px;
+  margin-left: auto;
+}
+
+li.cr.number.has-slider > div {
+  display: flex;
+}
+
+/* Styling for Chromium based browsers */
+.urdf-gui li.cr.number.has-slider .property-name:hover::-webkit-scrollbar {
+  height: 8px;
+}
+
+.urdf-gui
+  li.cr.number.has-slider
+  .property-name:hover::-webkit-scrollbar-thumb {
+  background: #888;
+}