muigui 0.0.16 → 0.0.20

package/README.md

@@ -179,9 +179,9 @@ into using tweakpane and it doesn't meet my needs as of v4.0.0. Examples below
   ```js
   const uniforms = {
     color1: [1, 0.5, 0.25],                   // orange
-    color2: new Float32Array([0, 1, 1]);      // cyan
-    color3: new Uint8Array([0, 128, 0, 128]); // transparent green
-  }
+    color2: new Float32Array([0, 1, 1]),      // cyan
+    color3: new Uint8Array([0, 128, 0, 128]), // transparent green
+  };
   ```
 
   Neither dat.gui, lil.gui, nor tweakpane can edit these AFAICT. (2023)
@@ -311,11 +311,11 @@ have not made it into muigui yet.
   But that's not really what you get from a typed system.
   In a typed system, the fact that `someOption` is an enum
   is known from its type. Similar that `someColor` is a
-  a color is known from it's type. `someNumber` is still
+  a color is known from its type. `someNumber` is still
   problematic because it needs a range which is probably
   not part of its type.
 
-  In any case, I'd be nice to find a way to get an
+  In any case, It'd be nice to find a way to get an
   instant UI like C#/Unity does.  
 
 * ## Modularity
@@ -325,7 +325,10 @@ have not made it into muigui yet.
   editor that is the combination of 3 number editors.
 
   I'm still experimenting. While muigui has components that
-  do this I'm not happy with the API ergonomics yet.
+  do this I'm not happy with the API ergonomics yet and is
+  why I haven't documented them. In fact I'd pretty much like
+  to re-write all of the code for like the 4th time 😅 but
+  I hope to keep the normal usage API the same.
 
   Similarly I'd like to more easily split layout so it's trivial
   to layout sub components. Again, still experimenting.
@@ -380,6 +383,36 @@ have not made it into muigui yet.
   just returned a canvas and left the rest outside
   the library made it way more flexible.
 
+  Another example might be monitoring. Some libraries
+  provide a way to make a GUI part poll its value for
+  the purpose of displaying values but does that really
+  need to be part of the library?
+
+  Compare
+
+  ```js
+  pane.addBinding(PARAMS, 'data', {
+    readonly: true,
+    interval: 200,
+  });
+  ```
+
+  vs
+
+  ```js
+  const label = gui.addLabel();
+  setInterval(() => {
+    label.text(JSON.stringify(PARAMS.data, null, 2));
+  }, 200);
+  ```
+
+  They're about the same amount of code but in the first version
+  you can only make that area show the data at `PARAMS.data` where
+  as in the 2nd version you can show whatever you want. Data
+  for the currently select item, player stats, a text based graph.
+  You're not limited to only properties of `PARAMS` nor are you
+  limited to how it chooses to format those.
+
   This problem of providing too specialized a solution
   is endemic throughout the library ecosystem of pretty much
   every language.
@@ -389,6 +422,8 @@ have not made it into muigui yet.
   wrong solution. It's better to provide the
   building blocks.
 
+  `</rant>` 😅
+
 ## No Save/Restore
 
 The problem with save/restore in lil.gui etc is it assumes the data

package/dist/0.x/controllers/Button.d.ts

@@ -1,7 +1,7 @@
 export default class Button extends Controller {
     constructor(object: any, property: any, options?: {});
-    name(name: any): void;
-    setOptions(options: any): void;
+    name(name: any): this;
+    setOptions(options: any): this;
     #private;
 }
 import Controller from './Controller.js';

package/dist/0.x/controllers/Canvas.d.ts

@@ -1,6 +1,7 @@
 export default class Canvas extends LabelController {
     constructor(name: any);
     get canvas(): HTMLElement;
+    listen(): this;
     #private;
 }
 import LabelController from './LabelController.js';

package/dist/0.x/controllers/Container.d.ts

@@ -8,6 +8,7 @@ export default class Container extends Controller {
     addController(controller: any): any;
     pushContainer(container: any): any;
     popContainer(): this;
+    listen(): this;
     #private;
 }
 import Controller from './Controller.js';

package/dist/0.x/muigui.js

@@ -1,4 +1,4 @@
-/* muigui@0.0.16, license MIT */
+/* muigui@0.0.20, license MIT */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
@@ -91,6 +91,7 @@
   font-size: var(--font-size);
   box-sizing: border-box;
   line-height: 100%;
+  white-space: nowrap;
 }
 .muigui * {
   box-sizing: inherit;
@@ -294,7 +295,7 @@
 }
 .muigui-closed>.muigui-open-container>* {
   transition: all 0.1s ease-out;
-  margin-top: -100%;
+  margin-top: -1000%;
 }
 
 /* ---- popdown ---- */
@@ -1214,11 +1215,13 @@
     }
     name(name) {
       this.#buttonElem.textContent = name;
+      return this;
     }
     setOptions(options) {
       copyExistingProperties(this.#options, options);
       const {name} = this.#options;
       this.#buttonElem.textContent = name;
+      return this;
     }
   }
 
@@ -2626,6 +2629,9 @@
     get canvas() {
       return this.#canvasElem;
     }
+    listen() {
+      return this;
+    }
   }
 
   class ColorView extends EditView {
@@ -2767,6 +2773,12 @@
       this.#childDestController = this.#childDestController.parent;
       return this;
     }
+    listen() {
+      this.#controllers.forEach(c => {
+        c.listen();
+      });
+      return this;
+    }
   }
 
   class Folder extends Container {
@@ -3275,11 +3287,22 @@
     }
   }
 
+  function camelCaseToSnakeCase(id) {
+    return id
+      .replace(/(.)([A-Z][a-z]+)/g, '$1_$2')
+      .replace(/([a-z0-9])([A-Z])/g, '$1_$2')
+      .toLowerCase();
+  }
+
+  function prepName(name) {
+    return camelCaseToSnakeCase(name.toString()).replaceAll('_', ' ');
+  }
+
   class GUIFolder extends Folder {
     add(object, property, ...args) {
       const controller = object instanceof Controller
           ? object
-          : createController(object, property, ...args);
+          : createController(object, property, ...args).name(prepName(property));
       return this.addController(controller);
     }
     addCanvas(name) {
@@ -3288,9 +3311,13 @@
     addColor(object, property, options = {}) {
       const value = object[property];
       if (hasAlpha(options.format || guessFormat(value))) {
-        return this.addController(new ColorChooser(object, property, options));
+        return this
+          .addController(new ColorChooser(object, property, options))
+          .name(prepName(property));
       } else {
-        return this.addController(new Color(object, property, options));
+        return this
+          .addController(new Color(object, property, options))
+          .name(prepName(property));
       }
     }
     addDivider() {
@@ -3304,7 +3331,7 @@
     }
     addButton(name, fn) {
       const o = {fn};
-      return this.add(o, 'fn').name(name);
+      return this.add(o, 'fn').name(prepName(name));
     }
   }