From 1cc3569ffadf3f056efbdf9570f7e29f22c49553 Mon Sep 17 00:00:00 2001 From: Yahiewi Date: Fri, 18 Apr 2025 12:43:27 +0200 Subject: [PATCH 01/11] Resizeable controls panel v1 --- src/controls.ts | 29 +++++++++++++++++++++++++++++ style/base.css | 22 ++++++++++++++++++++++ 2 files changed, 51 insertions(+) diff --git a/src/controls.ts b/src/controls.ts index 63c2e69..4a1949a 100644 --- a/src/controls.ts +++ b/src/controls.ts @@ -40,6 +40,35 @@ export class URDFControls extends GUI { this.domElement.style.right = '5px'; this.domElement.setAttribute('class', 'dg main urdf-gui'); + // Add resize functionality + let isResizing = false; + let startX: number; + let startWidth: number; + + this.domElement.addEventListener('mousedown', (e: MouseEvent) => { + // Only trigger on left border + if (e.clientX < this.domElement.getBoundingClientRect().left + 6) { + isResizing = true; + startX = e.clientX; + startWidth = parseInt(getComputedStyle(this.domElement).width, 10); + } + }); + + document.addEventListener('mousemove', (e: MouseEvent) => { + if (!isResizing) return; + + const width = startWidth - (e.clientX - startX); + if (width >= 250 && width <= 500) { + this.domElement.style.width = `${width}px`; + } + }); + + document.addEventListener('mouseup', () => { + isResizing = false; + }); + + // + this._workspaceFolder = this.addFolder('Workspace'); this._workspaceFolder.domElement.setAttribute( 'class', diff --git a/style/base.css b/style/base.css index 78527b6..989f13b 100644 --- a/style/base.css +++ b/style/base.css @@ -27,6 +27,28 @@ color: var(--gui-color-font); border: none; box-sizing: border-box; + position: absolute; + top: 0; + right: 5px; + min-width: 250px; + max-width: 500px; + height: 100%; + border-left: 3px solid var(--gui-color-title-bg); + z-index: 1; + overflow-x: hidden; /* Hide horizontal scrollbar only */ + overflow-y: visible; /* Allow vertical overflow for Dat.GUI elements */ + padding-bottom: 20px; /* Add space for the toggle button */ +} + +/* Add a resize handle on the left border */ +.urdf-gui::before { + content: ""; + position: absolute; + left: -3px; /* Align with the left border */ + top: 0; + width: 6px; /* Wider hit area for easier grabbing */ + height: 100%; + cursor: ew-resize; /* Show resize cursor on the left edge */ } .urdf-gui li.folder { From ffc9c918f3cd45aae0a38f1332450952909f30bd Mon Sep 17 00:00:00 2001 From: Yahiewi Date: Fri, 18 Apr 2025 14:30:17 +0200 Subject: [PATCH 02/11] fixed button color --- style/base.css | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/style/base.css b/style/base.css index 989f13b..9e619f1 100644 --- a/style/base.css +++ b/style/base.css @@ -32,7 +32,6 @@ right: 5px; min-width: 250px; max-width: 500px; - height: 100%; border-left: 3px solid var(--gui-color-title-bg); z-index: 1; overflow-x: hidden; /* Hide horizontal scrollbar only */ @@ -150,3 +149,17 @@ max-height: 50vh; overflow: scroll; } + +/* Style for Dat.GUI's close button */ +.urdf-gui .close-button { + width: 100% !important; + color: white !important; /* This doesn't used a predefined color */ + position: absolute; + bottom: 0; + left: 0; +} + +/* Style for when panel is closed */ +.urdf-gui.closed .close-button { + position: relative; /* Reset position when panel is closed */ +} \ No newline at end of file From 0ec61115e5e5d5e335555993563f5ad9e8792f06 Mon Sep 17 00:00:00 2001 From: Yahiewi Date: Fri, 18 Apr 2025 15:24:48 +0200 Subject: [PATCH 03/11] cleaned code --- style/base.css | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/style/base.css b/style/base.css index 9e619f1..ded6b16 100644 --- a/style/base.css +++ b/style/base.css @@ -27,16 +27,9 @@ color: var(--gui-color-font); border: none; box-sizing: border-box; - position: absolute; - top: 0; - right: 5px; - min-width: 250px; + min-width: 150px; max-width: 500px; - border-left: 3px solid var(--gui-color-title-bg); - z-index: 1; - overflow-x: hidden; /* Hide horizontal scrollbar only */ - overflow-y: visible; /* Allow vertical overflow for Dat.GUI elements */ - padding-bottom: 20px; /* Add space for the toggle button */ + padding-bottom: 20px; } /* Add a resize handle on the left border */ @@ -45,7 +38,7 @@ position: absolute; left: -3px; /* Align with the left border */ top: 0; - width: 6px; /* Wider hit area for easier grabbing */ + width: 12px; /* Wider hit area for easier grabbing */ height: 100%; cursor: ew-resize; /* Show resize cursor on the left edge */ } From aa7e083b15d2b66da870841f8ae058a34c33b2a9 Mon Sep 17 00:00:00 2001 From: Yahiewi Date: Tue, 22 Apr 2025 10:04:09 +0200 Subject: [PATCH 04/11] Refactored resize functionality code --- src/controls.ts | 75 ++++++++++++++++++++++++++++++++----------------- style/base.css | 13 ++------- 2 files changed, 51 insertions(+), 37 deletions(-) diff --git a/src/controls.ts b/src/controls.ts index 4a1949a..9a39d9c 100644 --- a/src/controls.ts +++ b/src/controls.ts @@ -41,34 +41,13 @@ export class URDFControls extends GUI { this.domElement.setAttribute('class', 'dg main urdf-gui'); // Add resize functionality - let isResizing = false; - let startX: number; - let startWidth: number; - - this.domElement.addEventListener('mousedown', (e: MouseEvent) => { - // Only trigger on left border - if (e.clientX < this.domElement.getBoundingClientRect().left + 6) { - isResizing = true; - startX = e.clientX; - startWidth = parseInt(getComputedStyle(this.domElement).width, 10); - } + this._setupResizeHandling({ + minWidth: 150, + maxWidth: 500, + grabZoneWidth: 12 }); - document.addEventListener('mousemove', (e: MouseEvent) => { - if (!isResizing) return; - - const width = startWidth - (e.clientX - startX); - if (width >= 250 && width <= 500) { - this.domElement.style.width = `${width}px`; - } - }); - - document.addEventListener('mouseup', () => { - isResizing = false; - }); - - // - + // Create folders this._workspaceFolder = this.addFolder('Workspace'); this._workspaceFolder.domElement.setAttribute( 'class', @@ -236,4 +215,48 @@ export class URDFControls extends GUI { } return this.controls.joints; } + + /** + * Sets up panel resizing functionality + */ + 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); + } + }); + } + } + diff --git a/style/base.css b/style/base.css index ded6b16..68014a9 100644 --- a/style/base.css +++ b/style/base.css @@ -36,11 +36,9 @@ .urdf-gui::before { content: ""; position: absolute; - left: -3px; /* Align with the left border */ - top: 0; - width: 12px; /* Wider hit area for easier grabbing */ + width: 12px; height: 100%; - cursor: ew-resize; /* Show resize cursor on the left edge */ + cursor: ew-resize; } .urdf-gui li.folder { @@ -148,11 +146,4 @@ width: 100% !important; color: white !important; /* This doesn't used a predefined color */ position: absolute; - bottom: 0; - left: 0; } - -/* Style for when panel is closed */ -.urdf-gui.closed .close-button { - position: relative; /* Reset position when panel is closed */ -} \ No newline at end of file From 7ac5d5ea74fea818d54e4a5fc87f55cb80b6f19c Mon Sep 17 00:00:00 2001 From: Yahiewi Date: Wed, 23 Apr 2025 10:02:48 +0200 Subject: [PATCH 05/11] cleaned code --- src/controls.ts | 3 +++ style/base.css | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/controls.ts b/src/controls.ts index 9a39d9c..ecd7ba7 100644 --- a/src/controls.ts +++ b/src/controls.ts @@ -218,6 +218,9 @@ export class URDFControls extends GUI { /** * 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; diff --git a/style/base.css b/style/base.css index 68014a9..fed0a91 100644 --- a/style/base.css +++ b/style/base.css @@ -144,6 +144,6 @@ /* Style for Dat.GUI's close button */ .urdf-gui .close-button { width: 100% !important; - color: white !important; /* This doesn't used a predefined color */ + color: white !important; position: absolute; } From 22469489bd87f8d95fc2150960b701432f7c7ccc Mon Sep 17 00:00:00 2001 From: Yahiewi Date: Wed, 23 Apr 2025 16:50:04 +0200 Subject: [PATCH 06/11] Fix lint check --- src/controls.ts | 23 +++++++++++++---------- src/renderer.ts | 10 +++++----- style/base.css | 10 +++++----- 3 files changed, 23 insertions(+), 20 deletions(-) diff --git a/src/controls.ts b/src/controls.ts index ecd7ba7..28d9885 100644 --- a/src/controls.ts +++ b/src/controls.ts @@ -230,36 +230,39 @@ export class URDFControls extends GUI { let isResizing = false; let startX: number; let startWidth: number; - + const { minWidth, maxWidth, grabZoneWidth } = options; - + const onMouseMove = (e: MouseEvent) => { - if (!isResizing) return; - + 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) { + 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); } }); } - } - diff --git a/src/renderer.ts b/src/renderer.ts index fb09138..7a54fea 100644 --- a/src/renderer.ts +++ b/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, diff --git a/style/base.css b/style/base.css index fed0a91..e873c01 100644 --- a/style/base.css +++ b/style/base.css @@ -29,16 +29,16 @@ box-sizing: border-box; min-width: 150px; max-width: 500px; - padding-bottom: 20px; + padding-bottom: 20px; } /* Add a resize handle on the left border */ .urdf-gui::before { - content: ""; + content: ''; position: absolute; - width: 12px; + width: 12px; height: 100%; - cursor: ew-resize; + cursor: ew-resize; } .urdf-gui li.folder { @@ -144,6 +144,6 @@ /* Style for Dat.GUI's close button */ .urdf-gui .close-button { width: 100% !important; - color: white !important; + color: white !important; position: absolute; } From a528585dd8854181cd4e856594960b7048954a19 Mon Sep 17 00:00:00 2001 From: Yahiewi Date: Tue, 29 Apr 2025 17:37:11 +0200 Subject: [PATCH 07/11] Fix controls panel resizing --- src/controls.ts | 2 +- style/base.css | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/controls.ts b/src/controls.ts index 28d9885..63faa4c 100644 --- a/src/controls.ts +++ b/src/controls.ts @@ -43,7 +43,7 @@ export class URDFControls extends GUI { // Add resize functionality this._setupResizeHandling({ minWidth: 150, - maxWidth: 500, + maxWidth: 1000, grabZoneWidth: 12 }); diff --git a/style/base.css b/style/base.css index e873c01..79496b4 100644 --- a/style/base.css +++ b/style/base.css @@ -28,7 +28,7 @@ border: none; box-sizing: border-box; min-width: 150px; - max-width: 500px; + max-width: 1000px; padding-bottom: 20px; } @@ -110,6 +110,12 @@ padding: 0; } +.urdf-gui .c { + float: right; + max-width: 180px; + position: relative; +} + .urdf-gui .c .slider { margin: 0; margin-top: 0.5em; From 3f906b8d1fc99649fd54e6316f735c98e11a2dcd Mon Sep 17 00:00:00 2001 From: Yahiewi Date: Tue, 29 Apr 2025 17:38:58 +0200 Subject: [PATCH 08/11] Revert lighting parameters in renderer --- src/renderer.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/renderer.ts b/src/renderer.ts index 7a54fea..fb09138 100644 --- a/src/renderer.ts +++ b/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(0xff0000, 1.0); + const directionalLight = new THREE.DirectionalLight(0xffffff, 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('#ff0000'); - ambientLight.intensity = 1; + const ambientLight = new THREE.AmbientLight('#fff'); + ambientLight.intensity = 0.5; ambientLight.position.set(0, 5, 0); - //this._scene.add(ambientLight); + this._scene.add(ambientLight); const hemisphereLight = new THREE.HemisphereLight( this._colorSky, From 274c1182b1f431f0eb828e59aff96fe5e12d13e9 Mon Sep 17 00:00:00 2001 From: Yahiewi Date: Wed, 30 Apr 2025 10:18:08 +0200 Subject: [PATCH 09/11] Improve controls panel UI resize feature --- src/controls.ts | 6 ++---- style/base.css | 4 ++-- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/controls.ts b/src/controls.ts index 63faa4c..690e28d 100644 --- a/src/controls.ts +++ b/src/controls.ts @@ -43,7 +43,6 @@ export class URDFControls extends GUI { // Add resize functionality this._setupResizeHandling({ minWidth: 150, - maxWidth: 1000, grabZoneWidth: 12 }); @@ -224,14 +223,13 @@ export class URDFControls extends GUI { */ 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 { minWidth, grabZoneWidth } = options; const onMouseMove = (e: MouseEvent) => { if (!isResizing) { @@ -239,7 +237,7 @@ export class URDFControls extends GUI { } const width = startWidth - (e.clientX - startX); - if (width >= minWidth && width <= maxWidth) { + if (width >= minWidth) { this.domElement.style.width = `${width}px`; } }; diff --git a/style/base.css b/style/base.css index 79496b4..28143b8 100644 --- a/style/base.css +++ b/style/base.css @@ -28,7 +28,7 @@ border: none; box-sizing: border-box; min-width: 150px; - max-width: 1000px; + max-width: 98%; padding-bottom: 20px; } @@ -111,7 +111,7 @@ } .urdf-gui .c { - float: right; + float: right !important; max-width: 180px; position: relative; } From f41249e3887d2016c07167bbf09bc30077c26d8e Mon Sep 17 00:00:00 2001 From: Yahiewi Date: Wed, 7 May 2025 10:18:01 +0200 Subject: [PATCH 10/11] Make joint names overflow correctly --- style/base.css | 37 +++++++++++++++++++++++++++++++------ 1 file changed, 31 insertions(+), 6 deletions(-) diff --git a/style/base.css b/style/base.css index 28143b8..ff6ff29 100644 --- a/style/base.css +++ b/style/base.css @@ -110,12 +110,6 @@ padding: 0; } -.urdf-gui .c { - float: right !important; - max-width: 180px; - position: relative; -} - .urdf-gui .c .slider { margin: 0; margin-top: 0.5em; @@ -153,3 +147,34 @@ color: white !important; position: absolute; } + +.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; +} From cad09f342665342af23d0afc3e79463c2070ee30 Mon Sep 17 00:00:00 2001 From: Yahiewi Date: Mon, 12 May 2025 09:15:10 +0200 Subject: [PATCH 11/11] Lint CSS code --- style/base.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/style/base.css b/style/base.css index a95e4d1..6d84b22 100644 --- a/style/base.css +++ b/style/base.css @@ -148,6 +148,12 @@ 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; @@ -168,7 +174,7 @@ li.cr.number.has-slider > div { display: flex; } -/* Styling for Chromium based browsers*/ +/* Styling for Chromium based browsers */ .urdf-gui li.cr.number.has-slider .property-name:hover::-webkit-scrollbar { height: 8px; } @@ -178,9 +184,3 @@ li.cr.number.has-slider > div { .property-name:hover::-webkit-scrollbar-thumb { background: #888; } - -/* Expand hover area to reach color pickers */ -.urdf-gui .cr.color .c:hover { - padding: 15px 0; - margin: -15px 0; -}