muigui 0.0.1 → 0.0.2

package/README.md

@@ -1,29 +1,94 @@
 # muigui
 
-> Nothing to see here...yet?
+# NOT READY for USE
+
+<!---
 
 <img src="./images/muigui.png" style="max-width: 640px">
 
 A simple Web UI library.
 
 muigui is a simple UI library in the spirit of
-[dat.gui](https://github.com/dataarts/dat.gui).
+[dat.gui](https://github.com/dataarts/dat.gui) and/or [lil-gui](https://github.com/georgealways/).
+
+## Usage
+
+```js
+import GUI from 'https://muigui.org/dist/0.x/muigui.module.js';
+```
+
+or
+
+```html
+<script src="https://muigui.org/dist/0.x/muigui.min.js"></script>
+```
+
+Then
+
+```js
+const s = {
+  someNumber: 123,
+  someString: "hello",
+  someOption: "dog",
+  someColor: '#ED3281',
+  someFunction: () => console.log('called')
+};
+
+const gui = new GUI();
+gui.add(s, 'someNumber', 0, 200);  // range 0 to 200
+gui.add(s, 'someString);
+gui.add(s, 'someOption, ['cat', 'bird', 'dog']);
+gui.addColor(s, 'someColor');
+gui.add(s, 'someFunction');
+```
+
+produces
+
+<img src="./images/muigui-screenshot.png" style="max-width: 275px">
+
+or a shorter version
+
+```js
+const s = {
+  someNumber: 123,
+  someString: "hello",
+  someOption: "dog",
+  someColor: '#ED3281',
+  someFunction: () => console.log('called')
+};
+
+const options = {
+  someNumber: [1, 200],   // range 0 to 200
+  someOption: ['cat', 'bird', 'dog'],
+}
+
+const gui = new GUI();
+gui.add(s, options);
+```
+
+## What
 
 It is not a general purpose library for every type of GUI.
 Rather, it is a small, easy to use library for small apps.
 Basically I liked how simple it was to use dat.gui to add
-a few sliders and options to a demo. What I didn't like is
-that dat.gui is very opinionated on style. I thought I'd
-try to make a DOM based UI with DOM elements only and then
-require CSS to style it and see how far I got.
+a few sliders and options to a demo.
+
+I thought I'd try to make a CSS/DOM based UI standard elements
+only and then require CSS to style it and see how far I got.
 
 ### Not invented here syndrome
 
 It's possible this already exists but if so I couldn't find it.
 Most UI libraries seem to be giant and require a build step.
-I wanted something hopefully not to big and something I could
+I wanted something hopefully not too big and something I could
 easily add to any example with 1 file (or 2 if you add CSS).
 
+## muigui - wat?
+
+https://user-images.githubusercontent.com/234804/177000460-3449c2dd-da94-4119-903f-cc7460b46e7b.mp4
+
+-->
+
 ## License
 
 [MIT](https://github.com/greggman/muigui/blob/main/LICENSE.md)

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "muigui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A Simple GUI",
   "main": "muigui.js",
   "module": "src/muigui.js",
   "scripts": {
-    "build": "rollup -c",
+    "build": "npm run build-min",
+    "build-normal": "rollup -c",
+    "build-min": "rollup -c",
     "eslint": "eslint \"**/*.js\"",
     "pre-push": "npm run eslint",
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -30,11 +32,12 @@
   ],
   "homepage": "https://github.com/greggman/muiguiy#readme",
   "devDependencies": {
-    "eslint": "^7.5.0",
-    "eslint-plugin-html": "^6.0.2",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-terser": "^0.4.0",
+    "eslint": "^8.20.0",
+    "eslint-plugin-html": "^6.2.0",
     "eslint-plugin-optional-comma-spacing": "0.0.4",
     "eslint-plugin-require-trailing-comma": "0.0.1",
-    "rollup": "^2.23.0",
-    "rollup-plugin-node-resolve": "^5.2.0"
+    "rollup": "^2.77.0"
   }
 }

package/src/controllers/Button.js

@@ -0,0 +1,34 @@
+import {
+  createElem,
+} from '../libs/elem.js';
+import { copyExistingProperties } from '../libs/utils.js';
+import Controller from './Controller.js';
+
+export default class Button extends Controller {
+  #object;
+  #property;
+  #buttonElem;
+  #options = {
+    name: '',
+  };
+
+  constructor(object, property, options = {}) {
+    super('muigui-button', '');
+    this.#object = object;
+    this.#property = property;
+
+    this.#buttonElem = this.addElem(
+        createElem('button', {
+          type: 'button',
+          onClick: () => {
+            this.#object[this.#property](this);
+          },
+        }));
+    this.setOptions({name: property, ...options});
+  }
+  setOptions(options) {
+    copyExistingProperties(this.#options, options);
+    const {name} = this.#options;
+    this.#buttonElem.textContent = name;
+  }
+}

package/src/controllers/Canvas.js

@@ -0,0 +1,17 @@
+import ElementView from '../views/ElementView.js';
+import LabelController from './LabelController.js';
+
+// TODO: remove this? Should just be user side
+export default class Canvas extends LabelController {
+  #canvasElem;
+
+  constructor() {
+    super('muigui-canvas');
+    this.#canvasElem = this.add(
+      new ElementView('canvas', 'muigui-canvas'),
+    ).domElement;
+  }
+  get canvas() {
+    return this.#canvasElem;
+  }
+}

package/src/controllers/Checkbox.js

@@ -0,0 +1,11 @@
+import CheckboxView from '../views/CheckboxView.js';
+import ValueController from './ValueController.js';
+
+export default class Checkbox extends ValueController {
+  constructor(object, property) {
+    super(object, property, 'muigui-checkbox');
+    const id = this.id;
+    this.add(new CheckboxView(this, id));
+    this.updateDisplay();
+  }
+}

package/src/controllers/Color.js

@@ -0,0 +1,31 @@
+import {
+  colorFormatConverters,
+  guessFormat,
+} from '../libs/color-utils.js';
+import ValueController from './ValueController.js';
+import TextView from '../views/TextView.js';
+import ColorView from '../views/ColorView.js';
+
+export default class Color extends ValueController {
+  #colorView;
+  #textView;
+
+  constructor(object, property, options = {}) {
+    super(object, property, 'muigui-color');
+    const format = options.format || guessFormat(this.getValue());
+    const {color, text} = colorFormatConverters[format];
+    this.#colorView = this.add(new ColorView(this, {converters: color}));
+    this.#textView = this.add(new TextView(this, {converters: text}));
+    this.updateDisplay();
+  }
+  setOptions(options) {
+    const {format} = options;
+    if (format) {
+      const {color, text} = colorFormatConverters[format];
+      this.#colorView.setOptions({converters: color});
+      this.#textView.setOptions({converters: text});
+    }
+    super.setOptions(options);
+    return this;
+  }
+}

package/src/controllers/ColorChooser.js

@@ -0,0 +1,12 @@
+import ColorChooserView from '../views/ColorChooserView.js';
+import TextView from '../views/TextView.js';
+import PopDownController from './PopDownController.js';
+
+export default class ColorChooser extends PopDownController {
+  constructor(object, property) {
+    super(object, property, 'muigui-color-chooser');
+    this.addTop(new TextView(this));
+    this.addBottom(new ColorChooserView(this));
+    this.updateDisplay();
+  }
+}

package/src/controllers/Container.js

@@ -0,0 +1,58 @@
+import Controller from './Controller.js';
+
+export default class Container extends Controller {
+  #controllers;
+  #childDestController;
+
+  constructor(className) {
+    super(className);
+    this.#controllers = [];
+    this.#childDestController = this;
+  }
+  get children() {
+    return this.#controllers; // should we return a copy?
+  }
+  get controllers() {
+    return this.#controllers.filter(c => !(c instanceof Container));
+  }
+  get folders() {
+    return this.#controllers.filter(c => c instanceof Container);
+  }
+  reset(recursive = true) {
+    for (const controller of this.#controllers) {
+      if (!(controller instanceof Container) || recursive) {
+        controller.reset(recursive);
+      }
+    }
+    return this;
+  }
+  remove(controller) {
+    const ndx = this.#controllers.indexOf(controller);
+    if (ndx >= 0) {
+      const c = this.#controllers.splice(ndx, 1);
+      const c0 = c[0];
+      const elem = c0.domElement;
+      elem.remove();
+      c0.setParent(null);
+    }
+    return this;
+  }
+  _addControllerImpl(controller) {
+    this.domElement.appendChild(controller.domElement);
+    this.#controllers.push(controller);
+    controller.setParent(this);
+    return controller;
+  }
+  addController(controller) {
+    return this.#childDestController._addControllerImpl(controller);
+  }
+  pushContainer(container) {
+    this.addController(container);
+    this.#childDestController = container;
+    return container;
+  }
+  popContainer() {
+    this.#childDestController = this.#childDestController.parent;
+    return this;
+  }
+}

package/src/controllers/Controller.js

@@ -0,0 +1,138 @@
+import { createElem } from '../libs/elem.js';
+import { removeArrayElem } from '../libs/utils.js';
+import View from '../views/View.js';
+
+export default class Controller extends View {
+  #changeFns;
+  #finishChangeFns;
+  #parent;
+
+  constructor(className) {
+    super(createElem('div', {className: 'muigui-controller'}));
+    this.#changeFns = [];
+    this.#finishChangeFns = [];
+    // we need the specialization to come last so it takes precedence.
+    if (className) {
+      this.domElement.classList.add(className);
+    }
+  }
+  get parent() {
+    return this.#parent;
+  }
+  setParent(parent) {
+    this.#parent = parent;
+    this.enable(!this.disabled());
+  }
+  show(show = true) {
+    this.domElement.classList.toggle('muigui-hide', !show);
+    this.domElement.classList.toggle('muigui-show', show);
+    return this;
+  }
+  hide() {
+    return this.show(false);
+  }
+  disabled() {
+    return !!this.domElement.closest('.muigui-disabled');
+  }
+
+  enable(enable = true) {
+    this.domElement.classList.toggle('muigui-disabled', !enable);
+
+    // If disabled we need to set the attribute 'disabled=true' to all
+    // input/select/button/textarea's below
+    //
+    // If enabled we need to set the attribute 'disabled=false' to all below
+    // until we hit a disabled controller.
+    //
+    // ATM the problem is we can find the input/select/button/textarea elements
+    // but we can't easily find which controller they belong do.
+    // But we don't need to? We can just check up if it or parent has
+    // '.muigui-disabled'
+    ['input', 'button', 'select', 'textarea'].forEach(tag => {
+      this.domElement.querySelectorAll(tag).forEach(elem => {
+        const disabled = !!elem.closest('.muigui-disabled');
+        elem.disabled = disabled;
+      });
+    });
+
+    return this;
+  }
+  disable(disable = true) {
+    return this.enable(!disable);
+  }
+  onChange(fn) {
+    this.removeChange(fn);
+    this.#changeFns.push(fn);
+    return this;
+  }
+  removeChange(fn) {
+    removeArrayElem(this.#changeFns, fn);
+    return this;
+  }
+  onFinishChange(fn) {
+    this.removeFinishChange(fn);
+    this.#finishChangeFns.push(fn);
+    return this;
+  }
+  removeFinishChange(fn) {
+    removeArrayElem(this.#finishChangeFns, fn);
+    return this;
+  }
+  #callListeners(fns, newV) {
+    for (const fn of fns) {
+      fn.call(this, newV);
+    }
+  }
+  emitChange(value, object, property) {
+    this.#callListeners(this.#changeFns, value);
+    if (this.#parent) {
+      if (object === undefined) {
+        this.#parent.emitChange(value);
+      } else {
+        this.#parent.emitChange({
+          object,
+          property,
+          value,
+          controller: this,
+        });
+      }
+    }
+  }
+  emitFinalChange(value, object, property) {
+    this.#callListeners(this.#finishChangeFns, value);
+    if (this.#parent) {
+      if (object === undefined) {
+        this.#parent.emitChange(value);
+      } else {
+        this.#parent.emitFinalChange({
+          object,
+          property,
+          value,
+          controller: this,
+        });
+      }
+    }
+  }
+  getColors() {
+    const toCamelCase = s => s.replace(/-([a-z])/g, (m, m1) => m1.toUpperCase());
+    const keys = [
+      'color',
+      'bg-color',
+      'value-color',
+      'value-bg-color',
+      'hover-bg-color',
+      'menu-bg-color',
+      'menu-sep-color',
+      'disabled-color',
+    ];
+    const div = createElem('div');
+    this.domElement.appendChild(div);
+    const colors = Object.fromEntries(keys.map(key => {
+      div.style.color = `var(--${key})`;
+      const s = getComputedStyle(div);
+      return [toCamelCase(key), s.color];
+    }));
+    div.remove();
+    return colors;
+  }
+}

package/src/controllers/Direction.js

@@ -0,0 +1,23 @@
+import { identity } from '../libs/conversions.js';
+import DirectionView from '../views/DirectionView.js';
+import NumberView from '../views/NumberView.js';
+// import ValueController from './ValueController.js';
+import PopDownController from './PopDownController.js';
+
+
+// deg2rad
+// where is 0
+// range (0, 360), (-180, +180), (0,0)   Really this is a range
+
+export default class Direction extends PopDownController {
+  #options;
+  constructor(object, property, options) {
+    super(object, property, 'muigui-direction');
+this.#options = options; // FIX
+    this.addTop(new NumberView(this,
+identity));
+    this.addBottom(new DirectionView(this, options));
+    this.updateDisplay();
+  }
+}
+

package/src/controllers/Divider.js

@@ -0,0 +1,9 @@
+import Controller from './Controller.js';
+
+// This feels like it should be something else like
+// gui.addController({className: 'muigui-divider')};
+export default class Divider extends Controller {
+  constructor() {
+    super('muigui-divider');
+  }
+}

package/src/controllers/Folder.js

@@ -0,0 +1,37 @@
+import { createElem } from '../libs/elem.js';
+import Container from './Container.js';
+
+export default class Folder extends Container {
+  #labelElem;
+
+  constructor(name = 'Controls', className = 'muigui-menu') {
+    super(className);
+    this.#labelElem = createElem('label');
+    this.addElem(createElem('button', {
+      type: 'button',
+      onClick: () => this.toggleOpen(),
+    }, [this.#labelElem]));
+    this.pushContainer(new Container());
+    this.name(name);
+    this.open();
+  }
+  open(open = true) {
+    this.domElement.classList.toggle('muigui-closed', !open);
+    this.domElement.classList.toggle('muigui-open', open);
+    return this;
+  }
+  close() {
+    return this.open(false);
+  }
+  name(name) {
+    this.#labelElem.textContent = name;
+    return this;
+  }
+  title(title) {
+    return this.name(title);
+  }
+  toggleOpen() {
+    this.open(!this.domElement.classList.contains('muigui-open'));
+    return this;
+  }
+}

package/src/controllers/Label.js

@@ -0,0 +1,14 @@
+import Controller from './Controller.js';
+
+// This feels like it should be something else like
+// gui.addDividing = new Controller()
+export default class Label extends Controller {
+  constructor(text) {
+    super('muigui-label');
+    this.text(text);
+  }
+  text(text) {
+    this.domElement.textContent = text;
+    return this;
+  }
+}

package/src/controllers/LabelController.js

@@ -0,0 +1,32 @@
+import { createElem } from '../libs/elem.js';
+import { makeId } from '../libs/ids.js';
+import ValueView from '../views/ValueView.js';
+import Controller from './Controller.js';
+
+export default class LabelController extends Controller {
+  #id;
+  #nameElem;
+
+  constructor(className = '', name = '') {
+    super('muigui-label-controller');
+    this.#id = makeId();
+    this.#nameElem = createElem('label', {for: this.#id});
+    this.domElement.appendChild(this.#nameElem);
+    this.pushSubView(new ValueView(className));
+    this.name(name);
+  }
+  get id() {
+    return this.#id;
+  }
+  name(name) {
+    if (this.#nameElem.title === this.#nameElem.textContent) {
+      this.#nameElem.title = name;
+    }
+    this.#nameElem.textContent = name;
+    return this;
+  }
+  tooltip(tip) {
+    this.#nameElem.title = tip;
+  }
+}
+

package/src/controllers/PopDownController.js

@@ -0,0 +1,84 @@
+import ElementView from '../views/ElementView.js';
+import ValueController from './ValueController.js';
+import CheckboxView from '../views/CheckboxView.js';
+import { copyExistingProperties } from '../libs/utils.js';
+import { createElem } from '../libs/elem.js';
+/*
+
+holder = new TabHolder
+tab = holder.add(new Tab("name"))
+tab.add(...)
+
+
+pc = new PopdownController
+top = pc.add(new Row())
+top.add(new Button());
+values = topRow.add(new Div())
+bottom = pc.add(new Row());
+
+
+
+pc = new PopdownController
+pc.addTop
+pc.addTop
+
+pc.addBottom
+
+
+*/
+
+function makeSetter(object, property) {
+  return {
+    setValue(v) {
+      object[property] = v;
+    },
+    setFinalValue(v) {
+      this.setValue(v);
+    },
+  };
+}
+
+export default class PopDownController extends ValueController {
+  #top;
+  #valuesView;
+  #bottom;
+  #options = {open: false};
+
+  constructor(object, property, options = {}) {
+    super(object, property, 'muigui-pop-down-controller');
+    /*
+    [ValueView
+      [[B][values]]   upper row
+      [[  visual ]]   lower row
+    ]
+    */
+    this.#top = this.add(new ElementView('div', 'muigui-pop-down-top'));
+//    this.#top.add(new CheckboxView(makeSetter(this.#options, 'open')));
+    const checkboxElem = this.#top.addElem(createElem('input', {
+      type: 'checkbox',
+      onChange: () => {
+        this.#options.open = checkboxElem.checked;
+      },
+    }));
+    this.#valuesView = this.#top.add(new ElementView('div', 'muigui-pop-down-values'));
+    this.#bottom = this.add(new ElementView('div', 'muigui-pop-down-bottom'));
+    this.setOptions(options);
+  }
+  updateDisplay() {
+    super.updateDisplay();
+    const {open} = this.#options;
+    this.domElement.children[1].classList.toggle('muigui-open', open);
+    this.domElement.children[1].classList.toggle('muigui-closed', !open);
+  }
+  setOptions(options) {
+    copyExistingProperties(this.#options, options);
+    super.setOptions(options);
+    this.updateDisplay();
+  }
+  addTop(view) {
+    return this.#valuesView.add(view);
+  }
+  addBottom(view) {
+    return this.#bottom.add(view);
+  }
+}

package/src/controllers/RadioGrid.js

@@ -0,0 +1,17 @@
+import RadioGridView from '../views/RadioGridView.js';
+import ValueController from './ValueController.js';
+import { convertToKeyValues } from '../libs/key-values.js';
+
+export default class RadioGrid extends ValueController {
+  constructor(object, property, options) {
+    super(object, property, 'muigui-radio-grid');
+    const valueIsNumber = typeof this.getValue() === 'number';
+    const {
+      keyValues: keyValuesInput,
+      cols = 3,
+    } = options;
+    const keyValues = convertToKeyValues(keyValuesInput, valueIsNumber);
+    this.add(new RadioGridView(this, keyValues, cols));
+    this.updateDisplay();
+  }
+}

package/src/controllers/Range.js

@@ -0,0 +1,11 @@
+import ValueController from './ValueController.js';
+import NumberView from '../views/NumberView.js';
+import RangeView from '../views/RangeView.js';
+
+export default class Range extends ValueController {
+  constructor(object, property, options) {
+    super(object, property, 'muigui-range');
+    this.add(new RangeView(this, options));
+    this.add(new NumberView(this, options));
+  }
+}