muigui 0.0.14 → 0.0.16

package/README.md

@@ -40,7 +40,7 @@ gui.add(s, 'someFunction');
 
 produces
 
-<img src="./images/muigui-screenshot.png" style="max-width: 250px">
+<img src="./images/muigui-screenshot.png" width="250">
 
 ## Why
 
@@ -213,6 +213,8 @@ into using tweakpane and it doesn't meet my needs as of v4.0.0. Examples below
 
   So, I thought I'd try to write a library that handled that case.
 
+## Exploration
+
 I also wanted to explore various things though many of them
 have not made it into muigui yet.
 
@@ -266,7 +268,15 @@ have not made it into muigui yet.
   gui.add(s);
   ```
 
-  At the moment that won't work. `someNumber` could only become
+  You could implement that like this
+
+  ```js
+  for (const key of Object.keys(s)) {
+     gui.add(s, key);
+  }
+  ```
+
+  But that won't work. `someNumber` could only become
   a `TextNumber` because there's no range. `someOption` would
   only become a `Text` because there's no info that it's an enum.
   `someColor` would become a `Text` because there's no info that
@@ -274,7 +284,39 @@ have not made it into muigui yet.
   having to provide more info.
 
   It's not clear in JS that adding that info would be a win
-  for keeping it simple but it sure would be nice.
+  for keeping it simple but it sure would be nice. I've thought
+  about passing a second object with options. The simplest version
+  would be something like this
+
+  ```js
+  const s = {
+    someNumber: 123,
+    someString: 'hello',
+    someOption: 'dog',
+    someColor: '#ED3281',
+    someFunction: () => console.log('called')
+  };
+  const argsByName: {
+    someNumber: [{ min: 1, max: 200 }],
+    someOption: [['cat', 'bird', 'dog']],
+    someColor: [{type: 'color'}],
+  };
+  addObject(s, argsByName) {
+    for (const key of Object.keys(s)) {
+       gui.add(s, key, ...(argsByName[key] || []);
+    }
+  }
+  ```
+
+  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
+  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
+  instant UI like C#/Unity does.  
 
 * ## Modularity
 
@@ -389,12 +431,15 @@ some hidden gui state like whether or not a folder is expanded.
 You still run into the issue though that the data being edited
 might not be easily serializable so you'd have to find another solution.
 
+To put it another way, it's not the responsibility of a UI library
+to serialize.
+
 ## Future
 
 I'm under sure how much time I'll continue to put into this.
 I get the feeling other people are far more motivated to make
 UIs. Maybe if I'm lucky they'll take some inspiration from
-the thoughts above and I'll find they've covered it all.
+the thoughts and ideas above and I'll find they've covered it all.
 
 ## License
 

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

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

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

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

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

@@ -0,0 +1,4 @@
+export default class Checkbox extends ValueController {
+    constructor(object: any, property: any);
+}
+import ValueController from './ValueController.js';

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

@@ -0,0 +1,6 @@
+export default class Color extends ValueController {
+    constructor(object: any, property: any, options?: {});
+    setOptions(options: any): this;
+    #private;
+}
+import ValueController from './ValueController.js';

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

@@ -0,0 +1,6 @@
+export default class ColorChooser extends PopDownController {
+    ___setKnobHelper: boolean;
+    setOptions(options: any): this;
+    #private;
+}
+import PopDownController from './PopDownController.js';

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

@@ -0,0 +1,13 @@
+export default class Container extends Controller {
+    get children(): any[];
+    get controllers(): any[];
+    get folders(): any[];
+    reset(recursive?: boolean): this;
+    updateDisplay(): this;
+    remove(controller: any): this;
+    addController(controller: any): any;
+    pushContainer(container: any): any;
+    popContainer(): this;
+    #private;
+}
+import Controller from './Controller.js';

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

@@ -0,0 +1,20 @@
+export default class Controller extends View {
+    constructor(className: any);
+    get parent(): any;
+    setParent(parent: any): void;
+    show(show?: boolean): this;
+    hide(): this;
+    disabled(): boolean;
+    enable(enable?: boolean): this;
+    disable(disable?: boolean): this;
+    onChange(fn: any): this;
+    removeChange(fn: any): this;
+    onFinishChange(fn: any): this;
+    removeFinishChange(fn: any): this;
+    emitChange(value: any, object: any, property: any): void;
+    emitFinalChange(value: any, object: any, property: any): void;
+    updateDisplay(): void;
+    getColors(): any;
+    #private;
+}
+import View from '../views/View.js';

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

@@ -0,0 +1,5 @@
+export default class Direction extends PopDownController {
+    constructor(object: any, property: any, options: any);
+    #private;
+}
+import PopDownController from './PopDownController.js';

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

@@ -0,0 +1,4 @@
+export default class Divider extends Controller {
+    constructor();
+}
+import Controller from './Controller.js';

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

@@ -0,0 +1,10 @@
+export default class Folder extends Container {
+    constructor(name?: string, className?: string);
+    open(open?: boolean): this;
+    close(): this;
+    name(name: any): this;
+    title(title: any): this;
+    toggleOpen(): this;
+    #private;
+}
+import Container from './Container.js';

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

@@ -0,0 +1,4 @@
+export default class Label extends Controller {
+    text(text: any): this;
+}
+import Controller from './Controller.js';

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

@@ -0,0 +1,8 @@
+export default class LabelController extends Controller {
+    constructor(className?: string, name?: string);
+    get id(): string;
+    name(name: any): this;
+    tooltip(tip: any): void;
+    #private;
+}
+import Controller from './Controller.js';

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

@@ -0,0 +1,10 @@
+export default class PopDownController extends ValueController {
+    constructor(object: any, property: any, options?: {});
+    setKnobColor(bgCssColor: any): void;
+    updateDisplay(): void;
+    setOptions(options: any): void;
+    addTop(view: any): any;
+    addBottom(view: any): import("../views/View.js").default;
+    #private;
+}
+import ValueController from './ValueController.js';

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

@@ -0,0 +1,4 @@
+export default class RadioGrid extends ValueController {
+    constructor(object: any, property: any, options: any);
+}
+import ValueController from './ValueController.js';

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

@@ -0,0 +1,4 @@
+export default class Range extends ValueController {
+    constructor(object: any, property: any, options: any);
+}
+import ValueController from './ValueController.js';

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

@@ -0,0 +1,4 @@
+export default class Select extends ValueController {
+    constructor(object: any, property: any, options: any);
+}
+import ValueController from './ValueController.js';

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

@@ -0,0 +1,4 @@
+export default class Slider extends ValueController {
+    constructor(object: any, property: any, options?: {});
+}
+import ValueController from './ValueController.js';

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

@@ -0,0 +1,4 @@
+export default class Text extends ValueController {
+    constructor(object: any, property: any);
+}
+import ValueController from './ValueController.js';

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

@@ -0,0 +1,5 @@
+export default class TextNumber extends ValueController {
+    constructor(object: any, property: any, options?: {});
+    #private;
+}
+import ValueController from './ValueController.js';

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

@@ -0,0 +1,17 @@
+export default class ValueController extends LabelController {
+    constructor(object: any, property: any, className?: string);
+    get initialValue(): any;
+    get object(): any;
+    get property(): any;
+    add(view: any): any;
+    setValue(v: any): void;
+    setFinalValue(v: any): this;
+    updateDisplay(ignoreCache: any): this;
+    setOptions(options: any): this;
+    getValue(): any;
+    value(v: any): this;
+    reset(): this;
+    listen(listen?: boolean): this;
+    #private;
+}
+import LabelController from './LabelController.js';

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

@@ -0,0 +1,4 @@
+export default class Vec2 extends PopDownController {
+    constructor(object: any, property: any);
+}
+import PopDownController from './PopDownController.js';

package/dist/0.x/controllers/create-controller.d.ts

@@ -0,0 +1,13 @@
+/**
+ * possible inputs
+ *    add(o, p, min: number, max: number)
+ *    add(o, p, min: number, max: number, step: number)
+ *    add(o, p, array: [value])
+ *    add(o, p, array: [[key, value]])
+ *
+ * @param {*} object
+ * @param {string} property
+ * @param  {...any} args
+ * @returns {Controller}
+ */
+export function createController(object: any, property: string, ...args: any[]): Controller;

package/dist/0.x/esm.d.ts

@@ -0,0 +1,16 @@
+import GUI from './muigui.js';
+export { default as ColorChooser } from './controllers/ColorChooser.js';
+export { default as Direction } from './controllers/Direction.js';
+export { default as RadioGrid } from './controllers/RadioGrid.js';
+export { default as Range } from './controllers/Range.js';
+export { default as Select } from './controllers/Select.js';
+export { default as Slider } from './controllers/Slider.js';
+export { default as TextNumber } from './controllers/TextNumber.js';
+export { default as Vec2 } from './controllers/Vec2.js';
+import { graph } from './libs/graph.js';
+import { monitor } from './libs/monitor.js';
+export declare const helpers: {
+    graph: typeof graph;
+    monitor: typeof monitor;
+};
+export default GUI;

package/dist/0.x/layout/Column.d.ts

@@ -0,0 +1,4 @@
+export default class Column extends Layout {
+    constructor();
+}
+import Layout from './Layout.js';

package/dist/0.x/layout/Frame.d.ts

@@ -0,0 +1,5 @@
+export default class Frame extends Layout {
+    static get foo(): string;
+    constructor();
+}
+import Layout from './Layout.js';

package/dist/0.x/layout/Grid.d.ts

@@ -0,0 +1,4 @@
+export default class Grid extends Layout {
+    constructor();
+}
+import Layout from './Layout.js';

package/dist/0.x/layout/Layout.d.ts

@@ -0,0 +1,5 @@
+export default class Layout extends View {
+    static css: string;
+    constructor(tag: any, className: any);
+}
+import View from '../views/View.js';

package/dist/0.x/layout/Row.d.ts

@@ -0,0 +1,4 @@
+export default class Row extends Layout {
+    constructor();
+}
+import Layout from './Layout.js';

package/dist/0.x/libs/assert.d.ts

@@ -0,0 +1 @@
+export function assert(truthy: any, msg?: string): void;

package/dist/0.x/libs/color-utils.d.ts

@@ -0,0 +1,235 @@
+export function hslToRgbUint8([h, s, l]: [any, any, any]): number[];
+export function hslaToRgbaUint8([h, s, l, a]: [any, any, any, any]): number[];
+export function rgbFloatToHsl01([r, g, b]: [any, any, any]): number[];
+export function rgbaFloatToHsla01([r, g, b, a]: [any, any, any, any]): any[];
+export function hsv01ToRGBFloat([hue, sat, val]: [any, any, any]): number[];
+export function hsva01ToRGBAFloat([hue, sat, val, alpha]: [any, any, any, any]): any[];
+export function rgbFloatToHSV01([r, g, b]: [any, any, any]): number[];
+export function rgbaFloatToHSVA01([r, g, b, a]: [any, any, any, any]): any[];
+export function guessFormat(v: any): string;
+export function hexToUint8RGB(v: any): number[];
+export function uint8RGBToHex(v: any): string;
+export function hexToUint8RGBA(v: any): number[];
+export function uint8RGBAToHex(v: any): string;
+export function hexToFloatRGB(v: any): number[];
+export function floatRGBToHex(v: any): string;
+export function hexToFloatRGBA(v: any): number[];
+export function floatRGBAToHex(v: any): string;
+export function rgbUint8ToHsl(rgb: any): number[];
+export function rgbaUint8ToHsla(rgba: any): any[];
+export function hasAlpha(format: any): any;
+export const colorFormatConverters: {
+    hex6: {
+        color: {
+            from: (v: any) => any[];
+            to: typeof fixHex6;
+        };
+        text: {
+            from: (v: any) => any[];
+            to: (v: any) => any;
+        };
+    };
+    hex8: {
+        color: {
+            from: (v: any) => any[];
+            to: typeof fixHex8;
+        };
+        text: {
+            from: (v: any) => any[];
+            to: (v: any) => any;
+        };
+    };
+    hex3: {
+        color: {
+            from: (v: any) => any[];
+            to: typeof hex3ToHex6;
+        };
+        text: {
+            from: (v: any) => any[];
+            to: (v: any) => any;
+        };
+    };
+    'hex6-no-hash': {
+        color: {
+            from: (v: any) => any[];
+            to: (v: any) => string;
+        };
+        text: {
+            from: (v: any) => any[];
+            to: (v: any) => any;
+        };
+    };
+    'hex8-no-hash': {
+        color: {
+            from: (v: any) => any[];
+            to: (v: any) => string;
+        };
+        text: {
+            from: (v: any) => any[];
+            to: (v: any) => any;
+        };
+    };
+    'hex3-no-hash': {
+        color: {
+            from: (v: any) => any[];
+            to: typeof hex3ToHex6;
+        };
+        text: {
+            from: (v: any) => any[];
+            to: (v: any) => any;
+        };
+    };
+    'uint32-rgb': {
+        color: {
+            from: (v: any) => (number | boolean)[];
+            to: (v: any) => string;
+        };
+        text: {
+            from: (v: any) => (number | boolean)[];
+            to: (v: any) => string;
+        };
+    };
+    'uint32-rgba': {
+        color: {
+            from: (v: any) => (number | boolean)[];
+            to: (v: any) => string;
+        };
+        text: {
+            from: (v: any) => (number | boolean)[];
+            to: (v: any) => string;
+        };
+    };
+    'uint8-rgb': {
+        color: {
+            from: (v: any) => (boolean | number[])[];
+            to: (v: any) => string;
+        };
+        text: {
+            from: (s: any) => (boolean | number[])[];
+            to: (v: any) => any;
+        };
+    };
+    'uint8-rgba': {
+        color: {
+            from: (v: any) => (boolean | number[])[];
+            to: (v: any) => string;
+        };
+        text: {
+            from: (s: any) => (boolean | number[])[];
+            to: (v: any) => any;
+        };
+    };
+    'float-rgb': {
+        color: {
+            from: (v: any) => (boolean | number[])[];
+            to: (v: any) => string;
+        };
+        text: {
+            from: (s: any) => any[];
+            to: (v: any) => string;
+        };
+    };
+    'float-rgba': {
+        color: {
+            from: (v: any) => (boolean | number[])[];
+            to: (v: any) => string;
+        };
+        text: {
+            from: (s: any) => any[];
+            to: (v: any) => string;
+        };
+    };
+    'float-hsv': {
+        color: {
+            from: (v: any) => (boolean | number[])[];
+            to: (v: any) => number[];
+        };
+        text: {
+            from: (s: any) => any[];
+            to: (v: any) => string;
+        };
+    };
+    'float-hsva': {
+        color: {
+            from: (v: any) => (boolean | any[])[];
+            to: (v: any) => any[];
+        };
+        text: {
+            from: (s: any) => any[];
+            to: (v: any) => string;
+        };
+    };
+    'object-rgb': {
+        color: {
+            from: (v: any) => (boolean | {
+                r: number;
+                g: number;
+                b: number;
+            })[];
+            to: (v: any) => string;
+        };
+        text: {
+            from: (s: any) => any[];
+            to: (rgb: any) => string;
+        };
+    };
+    'object-rgba': {
+        color: {
+            from: (v: any) => (boolean | {
+                r: number;
+                g: number;
+                b: number;
+                a: number;
+            })[];
+            to: (v: any) => string;
+        };
+        text: {
+            from: (s: any) => any[];
+            to: (rgba: any) => string;
+        };
+    };
+    'css-rgb': {
+        color: {
+            from: (v: any) => (string | boolean)[];
+            to: (v: any) => string;
+        };
+        text: {
+            from: (s: any) => (string | boolean)[];
+            to: (v: any) => string | boolean;
+        };
+    };
+    'css-rgba': {
+        color: {
+            from: (v: any) => (string | boolean)[];
+            to: (v: any) => string;
+        };
+        text: {
+            from: (s: any) => (string | boolean)[];
+            to: (v: any) => string | boolean;
+        };
+    };
+    'css-hsl': {
+        color: {
+            from: (v: any) => (string | boolean)[];
+            to: (v: any) => string;
+        };
+        text: {
+            from: (s: any) => (string | boolean)[];
+            to: (v: any) => string | boolean;
+        };
+    };
+    'css-hsla': {
+        color: {
+            from: (v: any) => (string | boolean)[];
+            to: (v: any) => string;
+        };
+        text: {
+            from: (s: any) => (string | boolean)[];
+            to: (v: any) => string | boolean;
+        };
+    };
+};
+declare function fixHex6(v: any): any;
+declare function fixHex8(v: any): any;
+declare function hex3ToHex6(hex3: any): any;
+export {};

package/dist/0.x/libs/conversions.d.ts

@@ -0,0 +1,16 @@
+export namespace identity {
+    function to(v: any): any;
+    function from(v: any): any[];
+}
+export namespace strToNumber {
+    export function to_1(v: any): any;
+    export { to_1 as to };
+    export function from_1(v: any): (number | boolean)[];
+    export { from_1 as from };
+}
+export namespace converters {
+    let radToDeg: {
+        to: (v: any) => any;
+        from: (v: any) => any[];
+    };
+}

package/dist/0.x/libs/elem.d.ts

@@ -0,0 +1,4 @@
+export function setElemProps(elem: any, attrs: any, children: any): any;
+export function createElem(tag: any, attrs?: {}, children?: any[]): any;
+export function addElem(tag: any, parent: any, attrs?: {}, children?: any[]): any;
+export function getNewId(): string;

package/dist/0.x/libs/graph.d.ts

@@ -0,0 +1,6 @@
+export function graph(canvas: any, data: any, { min, max, interval, color, }: {
+    min?: number | undefined;
+    max?: number | undefined;
+    interval?: number | undefined;
+    color: any;
+}): void;

package/dist/0.x/libs/ids.d.ts

@@ -0,0 +1 @@
+export function makeId(): string;

package/dist/0.x/libs/key-values.d.ts

@@ -0,0 +1 @@
+export function convertToKeyValues(keyValues: any, valueIsNumber: any): any[];

package/dist/0.x/libs/keyboard.d.ts

@@ -0,0 +1,6 @@
+export function addKeyboardEvents(elem: any, { onDown, onUp }: {
+    onDown?: typeof noop | undefined;
+    onUp?: typeof noop | undefined;
+}): () => void;
+declare function noop(): void;
+export {};

package/dist/0.x/libs/monitor.d.ts

@@ -0,0 +1,3 @@
+export function monitor(label: any, object: any, property: any, { interval }?: {
+    interval?: number | undefined;
+}): void;

package/dist/0.x/libs/resize-helpers.d.ts

@@ -0,0 +1,3 @@
+export function onResize(elem: any, callback: any): void;
+export function onResizeSVGNoScale(elem: any, hAnchor: any, vAnchor: any, callback: any): void;
+export function onResizeCanvas(elem: any, callback: any): void;

package/dist/0.x/libs/svg.d.ts

@@ -0,0 +1 @@
+export function arc(cx: any, cy: any, r: any, start: any, end: any): string;

package/dist/0.x/libs/taskrunner.d.ts

@@ -0,0 +1,2 @@
+export function addTask(fn: any): void;
+export function removeTask(fn: any): void;

package/dist/0.x/libs/touch.d.ts

@@ -0,0 +1,17 @@
+export function computeRelativePosition(elem: any, event: any, start: any): {
+    x: number;
+    y: number;
+    nx: number;
+    ny: number;
+    dx: number;
+    dy: number;
+    ndx: number;
+    ndy: number;
+};
+export function addTouchEvents(elem: any, { onDown, onMove, onUp }: {
+    onDown?: typeof noop | undefined;
+    onMove?: typeof noop | undefined;
+    onUp?: typeof noop | undefined;
+}): () => void;
+declare function noop(): void;
+export {};