perfect-gui 5.1.0 → 5.1.2

package/README.md

@@ -13,6 +13,7 @@
 - **Modern UI**: Clean, customizable, and polished design right out of the box.
 - **Rich Inputs**: Support for sliders, buttons, color pickers, vectors, images, lists, and toggles.
 - **Folders**: Easily group and organize your controls in collapsible sections.
+- **Tabs**: Create tabbed interfaces to organize content in separate panels.
 - **Draggable & Auto-positioned**: Snap it to screen edges or let the user drag it anywhere.
 - **Data Binding**: Automatically sync your controls with object properties.
 - **Zero Dependencies**: Lightweight and built with vanilla JavaScript.
@@ -110,4 +111,5 @@ See the [Documentation](https://thibka.github.io/perfect-gui/) for a comprehensi
 - [`color()`](https://thibka.github.io/perfect-gui/public/#color)
 - [`vector2()`](https://thibka.github.io/perfect-gui/public/#vector2)
 - [`folder()`](https://thibka.github.io/perfect-gui/public/#folder)
+- [`tabs()`](https://thibka.github.io/perfect-gui/public/#tabs)
 - [`toggleClose()`](https://thibka.github.io/perfect-gui/public)

package/dist/perfect-gui.js

@@ -543,7 +543,7 @@ class C {
     typeof t.onUpdate == "function" && (this.onUpdate = t.onUpdate), this.label = t != null && typeof t.label == "string" ? t.label : "", this.backgroundColor = t.color || null, this.opacity = t.opacity || 1, this.container == document.body ? this.maxHeight = window.innerHeight : this.maxHeight = Math.min(
       this.container.clientHeight,
       window.innerHeight
-    ), t.maxHeight && (this.initMaxHeight = t.maxHeight, this.maxHeight = Math.min(this.initMaxHeight, this.maxHeight)), this.screenCorner = this._parseScreenCorner(t.position), window.perfectGUI || (window.perfectGUI = {}), window.perfectGUI.instanceCounter == null ? window.perfectGUI.instanceCounter = 0 : window.perfectGUI.instanceCounter++, this.instanceId = window.perfectGUI.instanceCounter, this.wrapperWidth = t.width || 290, this.stylesheet = document.createElement("style"), this.stylesheet.setAttribute("type", "text/css"), this.stylesheet.setAttribute("id", "lm-gui-stylesheet"), document.head.append(this.stylesheet), this.instanceId == 0 && this._addStyles(`${oe(this.position_type)}`), this._styleInstance(), this._addWrapper(), this.domElement.setAttribute("data-corner-x", this.screenCorner.x), this.domElement.setAttribute("data-corner-y", this.screenCorner.y), t.autoRepositioning != !1 && window.addEventListener("resize", this._handleResize.bind(this)), this._handleResize(), this.hasBeenDragged = !1, t.draggable == !0 && this._makeDraggable(), this.closed = !1, t.closed && this.toggleClose();
+    ), t.maxHeight && (this.initMaxHeight = t.maxHeight, this.maxHeight = Math.min(this.initMaxHeight, this.maxHeight)), this.screenCorner = this._parseScreenCorner(t.position), window.perfectGUI || (window.perfectGUI = {}), window.perfectGUI.instanceCounter == null ? window.perfectGUI.instanceCounter = 0 : window.perfectGUI.instanceCounter++, this.instanceId = window.perfectGUI.instanceCounter, this.wrapperWidth = t.width || 290, this.stylesheet = document.createElement("style"), this.stylesheet.setAttribute("type", "text/css"), this.stylesheet.setAttribute("id", "lm-gui-stylesheet"), document.head.append(this.stylesheet), this.instanceId == 0 && this._addStyles(`${oe(this.position_type)}`), this._styleInstance(), this.closed = !!t.closed, this._addWrapper(), this.domElement.setAttribute("data-corner-x", this.screenCorner.x), this.domElement.setAttribute("data-corner-y", this.screenCorner.y), t.autoRepositioning != !1 && window.addEventListener("resize", this._handleResize.bind(this)), this._handleResize(), this.hasBeenDragged = !1, t.draggable == !0 && this._makeDraggable();
   }
   _styleInstance() {
     let t = this._getScrollbarWidth(this.container);
@@ -603,7 +603,7 @@ class C {
     this.stylesheet.innerHTML += t;
   }
   _addWrapper() {
-    this.domElement = document.createElement("div"), this.domElement.id = "p-gui-" + this.instanceId, this.domElement.className = "p-gui", this.domElement.setAttribute("data-lenis-prevent", ""), this.container.append(this.domElement), this.header = document.createElement("div"), this.header.className = "p-gui__header", this.header.textContent = this.label, this.header.style = `${this.backgroundColor ? "border-color: " + this.backgroundColor + ";" : ""}`, this.domElement.append(this.header);
+    this.domElement = document.createElement("div"), this.domElement.id = "p-gui-" + this.instanceId, this.domElement.className = "p-gui" + (this.closed ? " p-gui--collapsed" : ""), this.domElement.setAttribute("data-lenis-prevent", ""), this.container.append(this.domElement), this.header = document.createElement("div"), this.header.className = "p-gui__header", this.header.textContent = this.label, this.header.style = `${this.backgroundColor ? "border-color: " + this.backgroundColor + ";" : ""}`, this.domElement.append(this.header);
     const t = document.createElement("div");
     t.className = "p-gui__header-close", t.addEventListener("click", this.toggleClose.bind(this)), this.header.append(t);
     const e = document.createElement("div");

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "perfect-gui",
   "type": "module",
-  "version": "5.1.0",
+  "version": "5.1.2",
   "description": "GUI for JavaScript",
   "main": "dist/perfect-gui.js",
   "module": "dist/perfect-gui.js",

package/src/components/Slider.js

@@ -91,17 +91,18 @@ export default class Slider {
 
         // init position
         setTimeout(() => {
+            const sliderWidth = this.ctrlDiv.offsetWidth;
             const handleWidth = this.handle.offsetWidth;
             this.handle.position = this._mapLinear(
                 this.valueInput.value,
                 this.min,
                 this.max,
                 handleWidth / 2,
-                88 - handleWidth / 2,
+                sliderWidth - handleWidth / 2,
             );
             this.handle.position = Math.min(
                 this.handle.position,
-                88 - handleWidth / 2,
+                sliderWidth - handleWidth / 2,
             );
             this.handle.position = Math.max(
                 this.handle.position,
@@ -126,6 +127,10 @@ export default class Slider {
             this.ctrlDiv.pointerDown = false;
         });
 
+        window.addEventListener('pointercancel', (evt) => {
+            this.ctrlDiv.pointerDown = false;
+        });
+
         window.addEventListener('pointermove', (evt) => {
             if (this.ctrlDiv.pointerDown) {
                 this.ctrlDiv.pointerDelta =
@@ -154,14 +159,15 @@ export default class Slider {
     }
 
     _updateHandlePositionFromPointer(evt, firstDown = false) {
-        const sliderWidth = this.ctrlDiv.offsetWidth;
+        const rect = this.ctrlDiv.getBoundingClientRect();
+        const sliderWidth = rect.width;
         const handleWidth = this.handle.offsetWidth;
         const pointerDelta = evt.clientX - this.ctrlDiv.prevPosition;
         const currentValue = parseFloat(this.valueInput.value);
         let handlePosition;
 
         if (firstDown) {
-            handlePosition = evt.offsetX;
+            handlePosition = evt.clientX - rect.left;
         } else {
             handlePosition = this.handle.position + pointerDelta;
         }

package/src/index.js

@@ -81,6 +81,7 @@ export default class GUI {
         // Instance specific styles
         this._styleInstance();
 
+        this.closed = !!options.closed;
         this._addWrapper();
         this.domElement.setAttribute('data-corner-x', this.screenCorner.x);
         this.domElement.setAttribute('data-corner-y', this.screenCorner.y);
@@ -92,9 +93,6 @@ export default class GUI {
 
         this.hasBeenDragged = false;
         if (options.draggable == true) this._makeDraggable();
-
-        this.closed = false;
-        if (options.closed) this.toggleClose();
     }
 
     _styleInstance() {
@@ -245,7 +243,7 @@ export default class GUI {
     _addWrapper() {
         this.domElement = document.createElement('div');
         this.domElement.id = 'p-gui-' + this.instanceId;
-        this.domElement.className = 'p-gui';
+        this.domElement.className = 'p-gui' + (this.closed ? ' p-gui--collapsed' : '');
         this.domElement.setAttribute('data-lenis-prevent', '');
         this.container.append(this.domElement);
 

package/src/styles/_slider.css

@@ -8,6 +8,7 @@
     color: var(--color-text-dark);
     transition: color var(--transition);
     padding: 3px;
+    touch-action: none;
 }
 
 .p-gui__slider:hover {
@@ -32,6 +33,7 @@
     height: 14px;
     margin: 0 0 0 auto;
     width: 37%;
+    touch-action: none;
 }
 
 .p-gui__slider-bar {
@@ -51,6 +53,7 @@
     height: 100%;
     background: var(--color-accent);
     width: 0;
+    pointer-events: none;
 }
 
 .p-gui__slider:hover .p-gui__slider-filling {