muigui 0.0.1 → 0.0.3

package/src/views/ColorChooserView.js

@@ -0,0 +1,124 @@
+import { createElem } from '../libs/elem.js';
+import { addTouchEvents } from '../libs/touch.js';
+import { clamp } from '../libs/utils.js';
+import EditView from './EditView.js';
+import {
+  hexToUint8RGB,
+  hexToFloatRGB,
+  hslToRgbUint8,
+  hsv01ToRGBFloat,
+  rgbFloatToHSV01,
+  rgbUint8ToHsl,
+  floatRGBToHex,
+  uint8RGBToHex,
+} from '../libs/color-utils.js';
+
+const svg = `
+
+<svg tabindex="0" viewBox="0 0 64 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <linearGradient id="muigui-color-chooser-light-dark" x1="0" x2="0" y1="0" y2="1">
+      <stop stop-color="rgba(0,0,0,0)" offset="0%"/>
+      <stop stop-color="#000" offset="100%"/>
+    </linearGradient>
+    <linearGradient id="muigui-color-chooser-hue">
+      <stop stop-color="hsl(60, 0%, 100%)" offset="0%"/>
+      <stop stop-color="hsl(60, 100%, 50%)" offset="100%"/>
+    </linearGradient>
+
+    <rect width="64" height="48" fill="url(#muigui-color-chooser-hue)"/>
+    <rect width="64" height="48" fill="url(#muigui-color-chooser-light-dark)"/>
+    <circle r="4" class="muigui-color-chooser-circle"/>
+</svg>
+<svg tabindex="0" viewBox="0 0 64 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <linearGradient id="muigui-color-chooser-hues" x1="0" x2="1" y1="0" y2="0">
+      <stop stop-color="hsl(0,100%,50%)" offset="0%"/>
+      <stop stop-color="hsl(60,100%,50%)" offset="16.666%"/>
+      <stop stop-color="hsl(120,100%,50%)" offset="33.333%"/>
+      <stop stop-color="hsl(180,100%,50%)" offset="50%"/>
+      <stop stop-color="hsl(240,100%,50%)" offset="66.666%"/>
+      <stop stop-color="hsl(300,100%,50%)" offset="83.333%"/>
+      <stop stop-color="hsl(360,100%,50%)" offset="100%"/>
+    </linearGradient>
+    <rect y="1" width="64" height="4" fill="url('#muigui-color-chooser-hues')"/>
+    <g class="muigui-color-chooser-cursor">
+      <rect x="-3" width="6" height="6" />
+    </g>
+</svg>
+`;
+
+export default class ColorChooserView extends EditView {
+  #satLevelElem;
+  #hueUIElem;
+  #circleElem;
+  #hueElem;
+  #hueCursorElem;
+  #hsv;
+  #skipHueUpdate;
+  #skipSatLevelUpdate;
+
+  constructor(setter) {
+    super(createElem('div', {
+      innerHTML: svg,
+    }));
+    this.#satLevelElem = this.domElement.children[0];
+    this.#hueUIElem = this.domElement.children[1];
+    this.#circleElem = this.$('.muigui-color-chooser-circle');
+    this.#hueElem = this.$('#muigui-color-chooser-hue');
+    this.#hueCursorElem = this.$('.muigui-color-chooser-cursor');
+
+    const handleSatLevelChange = (e) => {
+      const s = clamp(e.nx, 0, 1);
+      const v = clamp(e.ny, 0, 1);
+      this.#hsv[1] = s;
+      this.#hsv[2] = (1 - v);
+      this.#skipHueUpdate = true;
+      setter.setValue(floatRGBToHex(hsv01ToRGBFloat(this.#hsv)));
+    };
+
+    const handleHueChange = (e) => {
+      const h = clamp(e.nx, 0, 1);
+      this.#hsv[0] = h;
+      this.#skipSatLevelUpdate = true;
+      setter.setValue(floatRGBToHex(hsv01ToRGBFloat(this.#hsv)));
+    };
+
+    addTouchEvents(this.#satLevelElem, {
+      onDown: handleSatLevelChange,
+      onMove: handleSatLevelChange,
+    });
+    addTouchEvents(this.#hueUIElem, {
+      onDown: handleHueChange,
+      onMove: handleHueChange,
+    });
+  }
+  updateDisplay(newV) {
+    if (!this.#hsv) {
+      this.#hsv = rgbFloatToHSV01(hexToFloatRGB(newV));
+    }
+    {
+      const [h, s, v] = rgbFloatToHSV01(hexToFloatRGB(newV));
+      // Don't copy the hue if it was un-computable.
+      if (!this.#skipHueUpdate) {
+        this.#hsv[0] = s > 0.001 && v > 0.001 ? h : this.#hsv[0];
+      }
+      if (!this.#skipSatLevelUpdate) {
+        this.#hsv[1] = s;
+        this.#hsv[2] = v;
+      }
+    }
+    {
+      const [h, s, v] = this.#hsv;
+      if (!this.#skipHueUpdate) {
+        this.#hueCursorElem.setAttribute('transform', `translate(${h * 64}, 0)`);
+        this.#hueElem.children[0].setAttribute('stop-color', `hsl(${h * 360}, 0%, 100%)`);
+        this.#hueElem.children[1].setAttribute('stop-color', `hsl(${h * 360}, 100%, 50%)`);
+      }
+      if (!this.#skipSatLevelUpdate) {
+        this.#circleElem.setAttribute('cx', `${s * 64}`);
+        this.#circleElem.setAttribute('cy', `${(1 - v) * 48}`);
+      }
+    }
+    this.#skipHueUpdate = false;
+    this.#skipSatLevelUpdate = false;
+  }
+}

package/src/views/ColorView.js

@@ -0,0 +1,50 @@
+import { createElem } from '../libs/elem.js';
+import { identity } from '../libs/conversions.js';
+import EditView from './EditView.js';
+import { copyExistingProperties } from '../libs/utils.js';
+
+export default class ColorView extends EditView {
+  #to;
+  #from;
+  #colorElem;
+  #skipUpdate;
+  #options = {
+    converters: identity,
+  };
+
+  constructor(setter, options) {
+    const colorElem = createElem('input', {
+      type: 'color',
+      onInput: () => {
+        const [valid, newV] = this.#from(colorElem.value);
+        if (valid) {
+          this.#skipUpdate = true;
+          setter.setValue(newV);
+        }
+      },
+      onChange: () => {
+        const [valid, newV] = this.#from(colorElem.value);
+        if (valid) {
+          this.#skipUpdate = true;
+          setter.setFinalValue(newV);
+        }
+      },
+    });
+    super(createElem('div', {}, [colorElem]));
+    this.setOptions(options);
+    this.#colorElem = colorElem;
+  }
+  updateDisplay(v) {
+    if (!this.#skipUpdate) {
+      this.#colorElem.value = this.#to(v);
+    }
+    this.#skipUpdate = false;
+  }
+  setOptions(options) {
+    copyExistingProperties(this.#options, options);
+    const {converters: {to, from}} = this.#options;
+    this.#to = to;
+    this.#from = from;
+    return this;
+  }
+}

package/src/views/DirectionView.js

@@ -0,0 +1,127 @@
+import { identity } from '../libs/conversions.js';
+import { createElem } from '../libs/elem.js';
+import { addKeyboardEvents } from '../libs/keyboard.js';
+import { arc } from '../libs/svg.js';
+import { addTouchEvents } from '../libs/touch.js';
+import { createWheelHelper } from '../libs/wheel.js';
+import { clamp, copyExistingProperties, euclideanModulo, lerp, stepify } from '../libs/utils.js';
+import EditView from './EditView.js';
+
+const svg = `
+<svg tabindex="0" viewBox="-32 -32 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <!--<circle id="muigui-outline" cx="0" cy="0" r="28.871" class="muigui-direction-circle"/>-->
+    <path id="muigui-range" class="muigui-direction-range" />
+    <g id="muigui-arrow">
+        <g transform="translate(-32, -32)">
+          <path d="M31.029,33.883c-1.058,-0.007 -1.916,-0.868 -1.916,-1.928c0,-1.065 0.864,-1.929 1.929,-1.929c0.204,0 0.401,0.032 0.586,0.091l14.729,-0l0,-2.585l12.166,4.468l-12.166,4.468l0,-2.585l-15.315,0l-0.013,0Z" class="muigui-direction-arrow"/>
+        </g>
+    </g>
+</svg>
+`;
+
+const twoPiMod = v => euclideanModulo(v + Math.PI, Math.PI * 2) - Math.PI;
+
+export default class DirectionView extends EditView {
+  #arrowElem;
+  #rangeElem;
+  #lastV;
+  #wrap;
+  #options = {
+    step: 1,
+    min: -180,
+    max:  180,
+
+    /*
+       --------
+      /  -π/2  \
+     /     |    \
+    |<- -π *     |
+    |      * 0 ->|     zero is down the positive X axis
+    |<- +π *     |
+     \     |    /
+      \   π/2  /
+       --------
+    */
+    dirMin: -Math.PI,
+    dirMax:  Math.PI,
+    //dirMin: Math.PI * 0.5,
+    //dirMax: Math.PI * 2.5,
+    //dirMin: -Math.PI * 0.75,  // test 10:30 to 7:30
+    //dirMax:  Math.PI * 0.75,
+    //dirMin:  Math.PI * 0.75,   // test 7:30 to 10:30
+    //dirMax: -Math.PI * 0.75,
+    //dirMin: -Math.PI * 0.75,  // test 10:30 to 1:30
+    //dirMax: -Math.PI * 0.25,
+    //dirMin:  Math.PI * 0.25,   // test 4:30 to 7:30
+    //dirMax:  Math.PI * 0.75,
+    //dirMin:  Math.PI * 0.75,   // test 4:30 to 7:30
+    //dirMax:  Math.PI * 0.25,
+    wrap: undefined,
+    converters: identity,
+  };
+
+  constructor(setter, options = {}) {
+    const wheelHelper = createWheelHelper();
+    super(createElem('div', {
+      className: 'muigui-direction',
+      innerHTML: svg,
+      onWheel: e => {
+        e.preventDefault();
+        const {min, max, step} = this.#options;
+        const delta = wheelHelper(e, step);
+        let tempV = this.#lastV + delta;
+        if (this.#wrap) {
+          tempV = euclideanModulo(tempV - min, max - min) + min;
+        }
+        const newV = clamp(stepify(tempV, v => v, step), min, max);
+        setter.setValue(newV);
+      },
+    }));
+    const handleTouch = (e) => {
+      const {min, max, step, dirMin, dirMax} = this.#options;
+      const nx = e.nx * 2 - 1;
+      const ny = e.ny * 2 - 1;
+      const a = Math.atan2(ny, nx);
+
+      const center = (dirMin + dirMax) / 2;
+
+      const centeredAngle = twoPiMod(a - center);
+      const centeredStart = twoPiMod(dirMin - center);
+      const diff = dirMax - dirMin;
+
+      const n = clamp((centeredAngle - centeredStart) / (diff), 0, 1);
+      const newV = stepify(min + (max - min) * n, v => v, step);
+      setter.setValue(newV);
+    };
+    addTouchEvents(this.domElement, {
+      onDown: handleTouch,
+      onMove: handleTouch,
+    });
+    addKeyboardEvents(this.domElement, {
+      onDown: (e) => {
+        const {min, max, step} = this.#options;
+        const newV = clamp(stepify(this.#lastV + e.dx * step, v => v, step), min, max);
+        setter.setValue(newV);
+      },
+    });
+    this.#arrowElem = this.$('#muigui-arrow');
+    this.#rangeElem = this.$('#muigui-range');
+    this.setOptions(options);
+  }
+  updateDisplay(v) {
+    this.#lastV = v;
+    const {min, max} = this.#options;
+    const n = (v - min) / (max - min);
+    const angle = lerp(this.#options.dirMin, this.#options.dirMax, n);
+    this.#arrowElem.style.transform = `rotate(${angle}rad)`;
+  }
+  setOptions(options) {
+    copyExistingProperties(this.#options, options);
+    const {dirMin, dirMax, wrap} = this.#options;
+    this.#wrap = wrap !== undefined
+       ? wrap
+       : Math.abs(dirMin - dirMax) >= Math.PI * 2 - Number.EPSILON;
+    const [min, max] = dirMin < dirMax ? [dirMin, dirMax] : [dirMax , dirMin];
+    this.#rangeElem.setAttribute('d', arc(0, 0, 28.87, min, max));
+  }
+}

package/src/views/EditView.js

@@ -0,0 +1,100 @@
+import { isTypedArray } from '../libs/utils.js';
+import View from './View.js';
+
+function arraysEqual(a, b) {
+  if (a.length !== b.length) {
+    return false;
+  }
+  for (let i = 0; i < a.length; ++i) {
+    if (a[i] !== b[i]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function copyArrayElementsFromTo(src, dst) {
+  dst.length = src.length;
+  for (let i = 0; i < src.length; ++i) {
+    dst[i] = src[i];
+  }
+}
+
+export default class EditView extends View {
+  #oldV;
+  #updateCheck;
+
+  #checkArrayNeedsUpdate(newV) {
+    // It's an array, we need to compare all elements
+    // Example, vec2, [r,g,b], ...
+    const needUpdate = !arraysEqual(newV, this.#oldV);
+    if (needUpdate) {
+      copyArrayElementsFromTo(newV, this.#oldV);
+    }
+    return needUpdate;
+  }
+
+  #checkTypedArrayNeedsUpdate() {
+    let once = true;
+    return function checkTypedArrayNeedsUpdateImpl(newV) {
+      // It's a typedarray, we need to compare all elements
+      // Example: Float32Array([r, g, b])
+      let needUpdate = once;
+      once = false;
+      if (!needUpdate) {
+        needUpdate = !arraysEqual(newV, this.#oldV);
+      }
+      return needUpdate;
+    };
+  }
+
+  #checkObjectNeedsUpdate(newV) {
+    let needUpdate = false;
+    for (const key in newV) {
+      if (newV[key] !== this.#oldV[key]) {
+        needUpdate = true;
+        this.#oldV[key] = newV[key];
+      }
+    }
+    return needUpdate;
+  }
+
+  #checkValueNeedsUpdate(newV) {
+    const needUpdate = newV !== this.#oldV;
+    this.#oldV = newV;
+    return needUpdate;
+  }
+
+  #getUpdateCheckForType(newV) {
+    if (Array.isArray(newV)) {
+      this.#oldV = [];
+      return this.#checkArrayNeedsUpdate.bind(this);
+    } else if (isTypedArray(newV)) {
+      this.#oldV = new newV.constructor(newV);
+      return this.#checkTypedArrayNeedsUpdate(this);
+    } else if (typeof newV === 'object') {
+      this.#oldV = {};
+      return this.#checkObjectNeedsUpdate.bind(this);
+    } else {
+      return this.#checkValueNeedsUpdate.bind(this);
+    }
+  }
+
+  // The point of this is updating DOM elements
+  // is slow but if we've called `listen` then
+  // every frame we're going to try to update
+  // things with the current value so if nothing
+  // has changed then skip it.
+  updateDisplayIfNeeded(newV, ignoreCache) {
+    this.#updateCheck = this.#updateCheck || this.#getUpdateCheckForType(newV);
+    // Note: We call #updateCheck first because it updates
+    // the cache
+    if (this.#updateCheck(newV) || ignoreCache) {
+      this.updateDisplay(newV);
+    }
+  }
+  setOptions(/*options*/) {
+    // override this
+    return this;
+  }
+}

package/src/views/ElementView.js

@@ -0,0 +1,8 @@
+import { createElem } from '../libs/elem.js';
+import View from './View.js';
+
+export default class ElementView extends View {
+  constructor(tag, className) {
+    super(createElem(tag, {className}));
+  }
+}

package/src/views/GridView.js

@@ -0,0 +1,15 @@
+import { createElem } from '../libs/elem.js';
+import View from './View.js';
+
+export default class GridView extends View {
+  // FIX: should this be 'options'?
+  constructor(cols) {
+    super(createElem('div', {
+      className: 'muigui-grid',
+    }));
+    this.cols(cols);
+  }
+  cols(cols) {
+    this.domElement.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
+  }
+}

package/src/views/NumberView.js

@@ -0,0 +1,67 @@
+import { createElem } from '../libs/elem.js';
+import { strToNumber } from '../libs/conversions.js';
+import { createWheelHelper } from '../libs/wheel.js';
+import { clamp, copyExistingProperties, stepify } from '../libs/utils.js';
+import EditView from './EditView.js';
+
+export default class NumberView extends EditView {
+  #to;
+  #from;
+  #step;
+  #skipUpdate;
+  #options = {
+    step: 0.01,
+    converters: strToNumber,
+    min: Number.NEGATIVE_INFINITY,
+    max: Number.POSITIVE_INFINITY,
+  };
+
+  constructor(setter, options) {
+    const setValue = setter.setValue.bind(setter);
+    const setFinalValue = setter.setFinalValue.bind(setter);
+    const wheelHelper = createWheelHelper();
+    super(createElem('input', {
+      type: 'number',
+      onInput: () => this.#handleInput(setValue, true),
+      onChange: () => this.#handleInput(setFinalValue, false),
+      onWheel: e => {
+        e.preventDefault();
+        const {min, max, step} = this.#options;
+        const delta = wheelHelper(e, step);
+        const v = parseFloat(this.domElement.value);
+        const newV = clamp(stepify(v + delta, v => v, step), min, max);
+        setter.setValue(newV);
+      },
+    }));
+    this.setOptions(options);
+  }
+  #handleInput(setFn, skipUpdate) {
+    const v = parseFloat(this.domElement.value);
+    const [valid, newV] = this.#from(v);
+    let inRange;
+    if (valid && !Number.isNaN(v)) {
+      const {min, max} = this.#options;
+      inRange = newV >= min && newV <= max;
+      this.#skipUpdate = skipUpdate;
+      setFn(clamp(newV, min, max));
+    }
+    this.domElement.classList.toggle('muigui-invalid-value', !valid || !inRange);
+  }
+  updateDisplay(v) {
+    if (!this.#skipUpdate) {
+      this.domElement.value = stepify(v, this.#to, this.#step);
+    }
+    this.#skipUpdate = false;
+  }
+  setOptions(options) {
+    copyExistingProperties(this.#options, options);
+    const {
+      step,
+      converters: {to, from},
+    } = this.#options;
+    this.#to = to;
+    this.#from = from;
+    this.#step = step;
+    return this;
+  }
+}

package/src/views/RadioGridView.js

@@ -0,0 +1,46 @@
+import { createElem } from '../libs/elem.js';
+import { makeId } from '../libs/ids.js';
+import EditView from './EditView.js';
+
+export default class RadioGridView extends EditView {
+  #values;
+
+  constructor(setter, keyValues, cols = 3) {
+    const values = [];
+    const name = makeId();
+    super(createElem('div', {}, keyValues.map(([key, value], ndx) => {
+      values.push(value);
+      return createElem('label', {}, [
+        createElem('input', {
+          type: 'radio',
+          name,
+          value: ndx,
+          onChange: function() {
+            if (this.checked) {
+              setter.setFinalValue(that.#values[this.value]);
+            }
+          },
+        }),
+        createElem('button', {
+          type: 'button',
+          textContent: key,
+          onClick: function() {
+            this.previousElementSibling.click();
+          },
+        }),
+      ]);
+    })));
+    const that = this;
+    this.#values = values;
+    this.cols(cols);
+  }
+  updateDisplay(v) {
+    const ndx = this.#values.indexOf(v);
+    for (let i = 0; i < this.domElement.children.length; ++i) {
+      this.domElement.children[i].children[0].checked = i === ndx;
+    }
+  }
+  cols(cols) {
+    this.domElement.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
+  }
+}

package/src/views/RangeView.js

@@ -0,0 +1,73 @@
+import { createElem } from '../libs/elem.js';
+import { identity } from '../libs/conversions.js';
+import { clamp, copyExistingProperties, stepify } from '../libs/utils.js';
+import { createWheelHelper } from '../libs/wheel.js';
+import EditView from './EditView.js';
+
+export default class RangeView extends EditView {
+  #to;
+  #from;
+  #step;
+  #skipUpdate;
+  #options = {
+    step: 0.01,
+    min: 0,
+    max: 1,
+    converters: identity,
+  };
+
+  constructor(setter, options) {
+    const wheelHelper = createWheelHelper();
+    super(createElem('input', {
+      type: 'range',
+      onInput: () => {
+        this.#skipUpdate = true;
+        const [valid, v] = this.#from(parseFloat(this.domElement.value));
+        if (valid) {
+          setter.setValue(v);
+        }
+      },
+      onChange: () => {
+        this.#skipUpdate = true;
+        const [valid, v] = this.#from(parseFloat(this.domElement.value));
+        if (valid) {
+          setter.setFinalValue(v);
+        }
+      },
+      onWheel: e => {
+        e.preventDefault();
+        const [valid, v] = this.#from(parseFloat(this.domElement.value));
+        if (!valid) {
+          return;
+        }
+        const {min, max, step} = this.#options;
+        const delta = wheelHelper(e, step);
+        const newV = clamp(stepify(v + delta, v => v, step), min, max);
+        setter.setValue(newV);
+      },
+    }));
+    this.setOptions(options);
+  }
+  updateDisplay(v) {
+    if (!this.#skipUpdate) {
+      this.domElement.value = stepify(v, this.#to, this.#step);
+    }
+    this.#skipUpdate = false;
+  }
+  setOptions(options) {
+    copyExistingProperties(this.#options, options);
+    const {
+      step,
+      min,
+      max,
+      converters: {to, from},
+    } = this.#options;
+    this.#to = to;
+    this.#from = from;
+    this.#step = step;
+    this.domElement.step = step;
+    this.domElement.min = min;
+    this.domElement.max = max;
+    return this;
+  }
+}

package/src/views/SelectView.js

@@ -0,0 +1,23 @@
+import { createElem } from '../libs/elem.js';
+import EditView from './EditView.js';
+
+export default class SelectView extends EditView {
+  #values;
+
+  constructor(setter, keyValues) {
+    const values = [];
+    super(createElem('select', {
+      onChange: () => {
+        setter.setFinalValue(this.#values[this.domElement.selectedIndex]);
+      },
+    }, keyValues.map(([key, value]) => {
+      values.push(value);
+      return createElem('option', {textContent: key});
+    })));
+    this.#values = values;
+  }
+  updateDisplay(v) {
+    const ndx = this.#values.indexOf(v);
+    this.domElement.selectedIndex = ndx;
+  }
+}