muigui 0.0.1 → 0.0.2

package/src/controllers/Select.js

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

package/src/controllers/Slider.js

@@ -0,0 +1,12 @@
+import ValueController from './ValueController.js';
+import NumberView from '../views/NumberView.js';
+import SliderView from '../views/SliderView.js';
+
+export default class Slider extends ValueController {
+  constructor(object, property, options = {}) {
+    super(object, property, 'muigui-slider');
+    this.add(new SliderView(this, options));
+    this.add(new NumberView(this, options));
+    this.updateDisplay();
+  }
+}

package/src/controllers/TabHolder.js

@@ -0,0 +1,36 @@
+import { createElem } from '../libs/elem.js';
+import Controller from './Controller.js';
+
+export default class TabHolder extends Controller {
+  #labelElem;
+
+  constructor(name = 'Controls', className = 'muigui-tab-holder') {
+    super(className);
+    this.#labelElem = createElem('label');
+    this.addElem(createElem('button', {
+      type: 'button',
+      onClick: () => this.toggleOpen(),
+    }, [this.#labelElem]));
+    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/Text.js

@@ -0,0 +1,10 @@
+import TextView from '../views/TextView.js';
+import ValueController from './ValueController.js';
+
+export default class Text extends ValueController {
+  constructor(object, property) {
+    super(object, property, 'muigui-checkbox');
+    this.add(new TextView(this));
+    this.updateDisplay();
+  }
+}

package/src/controllers/TextNumber.js

@@ -0,0 +1,18 @@
+
+import NumberView from '../views/NumberView.js';
+import ValueController from './ValueController.js';
+
+// Wanted to name this `Number` but it conflicts with
+// JavaScript `Number`. It most likely wouldn't be
+// an issue? But users might `import {Number} ...` and
+// things would break.
+export default class TextNumber extends ValueController {
+  #textView;
+  #step;
+
+  constructor(object, property, options = {}) {
+    super(object, property, 'muigui-checkbox');
+    this.#textView = this.add(new NumberView(this, options));
+    this.updateDisplay();
+  }
+}

package/src/controllers/ValueController.js

@@ -0,0 +1,107 @@
+import {addTask, removeTask} from '../libs/taskrunner.js';
+import { isTypedArray } from '../libs/utils.js';
+import LabelController from './LabelController.js';
+
+export default class ValueController extends LabelController {
+  #object;
+  #property;
+  #initialValue;
+  #listening;
+  #views;
+  #updateFn;
+
+  constructor(object, property, className = '') {
+    super(className, property);
+    this.#object = object;
+    this.#property = property;
+    this.#initialValue = this.getValue();
+    this.#listening = false;
+    this.#views = [];
+  }
+  get initialValue() {
+    return this.#initialValue;
+  }
+  get object() {
+    return this.#object;
+  }
+  get property() {
+    return this.#property;
+  }
+  add(view) {
+    this.#views.push(view);
+    super.add(view);
+    this.updateDisplay();
+    return view;
+  }
+  #setValueImpl(v, ignoreCache) {
+    if (typeof v === 'object') {
+      const dst = this.#object[this.#property];
+      // don't replace objects, just their values.
+      if (Array.isArray(v)) {
+        for (let i = 0; i < v.length; ++i) {
+          dst[i] = v[i];
+        }
+      } else if (isTypedArray(v)) {
+        dst.set(v);
+      } else {
+        Object.assign(dst, v);
+      }
+    } else {
+      this.#object[this.#property] = v;
+    }
+    this.updateDisplay(ignoreCache);
+    this.emitChange(this.getValue(), this.#object, this.#property);
+    return this;
+  }
+  setValue(v) {
+    this.#setValueImpl(v);
+  }
+  setFinalValue(v) {
+    this.#setValueImpl(v, true);
+    this.emitFinalChange(this.getValue(), this.#object, this.#property);
+    return this;
+  }
+  updateDisplay(ignoreCache) {
+    const newV = this.getValue();
+    for (const view of this.#views) {
+      view.updateDisplayIfNeeded(newV, ignoreCache);
+    }
+    return this;
+  }
+  setOptions(options) {
+    for (const view of this.#views) {
+      view.setOptions(options);
+    }
+    this.updateDisplay();
+    return this;
+  }
+  getValue() {
+    return this.#object[this.#property];
+  }
+  value(v) {
+    this.setValue(v);
+    return this;
+  }
+  reset() {
+    this.setValue(this.#initialValue);
+    return this;
+  }
+  listen(listen = true) {
+    if (!this.#updateFn) {
+      this.#updateFn = this.updateDisplay.bind(this);
+    }
+    if (listen) {
+      if (!this.#listening) {
+        this.#listening = true;
+        addTask(this.#updateFn);
+      }
+    } else {
+      if (this.#listening) {
+        this.#listening = false;
+        removeTask(this.#updateFn);
+      }
+    }
+    return this;
+  }
+}
+

package/src/controllers/Vec2.js

@@ -0,0 +1,50 @@
+import GridView from '../views/GridView.js';
+import NumberView from '../views/NumberView.js';
+import Vec2View from '../views/Vec2View.js';
+import PopDownController from './PopDownController.js';
+import { strToNumber } from '../libs/conversions.js';
+
+// TODO: zoom with wheel and pinch?
+// TODO: grid?
+// // options
+//   scale:
+//   range: number (both x and y + /)
+//   range: array (min, max)
+//   xRange:
+// deg/rad/turn
+
+export default class Vec2 extends PopDownController {
+  constructor(object, property) {
+    super(object, property, 'muigui-vec2');
+
+    const makeSetter = (ndx) => {
+      return {
+        setValue: (v) => {
+          const newV = this.getValue();
+          newV[ndx] = v;
+          this.setValue(newV);
+        },
+        setFinalValue: (v) => {
+          const newV = this.getValue();
+          newV[ndx] = v;
+          this.setFinalValue(newV);
+        },
+      };
+    };
+
+    this.addTop(new NumberView(makeSetter(0), {
+      converters: {
+        to: v => v[0],
+        from: strToNumber.from,
+      },
+    }));
+    this.addTop(new NumberView(makeSetter(1), {
+      converters: {
+        to: v => v[1],
+        from: strToNumber.from,
+      },
+    }));
+    this.addBottom(new Vec2View(this));
+    this.updateDisplay();
+  }
+}

package/src/controllers/create-controller.js

@@ -0,0 +1,43 @@
+import Button from './Button.js';
+import Checkbox from './Checkbox.js';
+import TextNumber from './TextNumber.js';
+import Select from './Select.js';
+import Range from './Range.js';
+import Text from './Text.js';
+
+// const isConversion = o => typeof o.to === 'function' && typeof o.from === 'function';
+
+/**
+ * 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, property, ...args) {
+  const [arg1] = args;
+  if (Array.isArray(arg1)) {
+    return new Select(object, property, {keyValues: arg1});
+  }
+
+  const t = typeof object[property];
+  switch (t) {
+    case 'number':
+      return args.length === 0
+          ? new TextNumber(object, property, ...args)
+          : new Range(object, property, ...args);
+    case 'boolean':
+      return new Checkbox(object, property, ...args);
+    case 'function':
+      return new Button(object, property, ...args);
+    case 'string':
+      return new Text(object, property, ...args);
+    default:
+      throw new Error(`unhandled type ${t} for property ${property}`);
+  }
+}

package/src/layout/Column.js

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

package/src/layout/Frame.js

@@ -0,0 +1,11 @@
+import Layout from './Layout.js';
+
+export default class Frame extends Layout {
+  static css = 'foo';
+  constructor() {
+    super('div', 'muigui-frame');
+  }
+  static get foo() {
+    return 'boo';
+  }
+}

package/src/layout/Grid.js

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

package/src/layout/Layout.js

@@ -0,0 +1,47 @@
+import { createElem } from '../libs/elem.js';
+import View from '../views/View.js';
+
+function showCSS(ob) {
+  if (ob.prototype.css) {
+    console.log(ob.prototype.css);
+    showCSS(ob.prototype);
+  }
+}
+
+export default class Layout extends View {
+  static css = 'bar';
+  constructor(tag, className) {
+    super(createElem(tag, {className}));
+
+    showCSS(this);
+  }
+}
+
+/*
+class ValueController ?? {
+  const row = this.add(new Row());
+  const label = row.add(new Label());
+  const div = row.add(new Div());
+  const row = div.add(new Row());
+}
+*/
+
+/*
+class MyCustomThing extends ValueController {
+  constructor(object, property, options) {
+    const topRow = this.add(new Row());
+    const bottomRow = this.add(new Row());
+    topRow.add(new NumberView());
+    topRow.add(new NumberView());
+    topRow.add(new NumberView());
+    topRow.add(new NumberView());
+    bottomRow.add(new DirectionView());
+    bottomRow.add(new DirectionView());
+    bottomRow.add(new DirectionView());
+    bottomRow.add(new DirectionView());
+  }
+}
+  new Grid([
+    [new
+  ]
+  */

package/src/layout/Row.js

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

package/src/libs/assert.js

@@ -0,0 +1,5 @@
+export function assert(truthy, msg = '') {
+  if (!truthy) {
+    throw new Error(msg);
+  }
+}