muigui 0.0.1 → 0.0.2

package/src/views/SliderView.js

@@ -0,0 +1,194 @@
+import { createElem } from '../libs/elem.js';
+import { addKeyboardEvents } from '../libs/keyboard.js';
+import { addTouchEvents } from '../libs/touch.js';
+import { createWheelHelper } from '../libs/wheel.js';
+import { onResizeSVGNoScale } from '../libs/resize-helpers.js';
+import { clamp, copyExistingProperties, 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;">
+  <g id="muigui-orientation">
+    <g id="muigui-origin">
+      <g transform="translate(0, 4)">
+        <path id="muigui-ticks" class="muigui-ticks"/>
+        <path id="muigui-thicks" class="muigui-thicks"/>
+      </g>
+      <g transform="translate(0, 14)">
+        <g id="muigui-number-orientation">
+          <g id="muigui-numbers" transform="translate(0, -3)" class="muigui-svg-text"/>
+        </g>
+      </g>
+    </g>
+    <linearGradient id="muigui-bg-to-transparent">
+      <stop stop-color="var(--value-bg-color)" offset="0%"/>
+      <stop stop-color="var(--value-bg-color)" stop-opacity="0" offset="100%"/>
+    </linearGradient>
+    <linearGradient id="muigui-transparent-to-bg">
+      <stop stop-color="var(--value-bg-color)" stop-opacity="0"  offset="0%"/>
+      <stop stop-color="var(--value-bg-color)" offset="100%"/>  
+    </linearGradient>
+    <!--<circle cx="0" cy="2" r="2" class="muigui-mark"/>-->
+    <!--<rect x="-1" y="0" width="2" height="10" class="muigui-mark"/>-->
+    <path d="M0 4L-2 0L2 0" class="muigui-mark"/>
+  </g>
+  <rect id="muigui-left-grad" x="0" y="0" width="20" height="20" fill="url(#muigui-bg-to-transparent)"/>
+  <rect id="muigui-right-grad" x="48" y="0" width="20" height="20" fill="url(#muigui-transparent-to-bg)"/>
+</svg>
+`;
+
+function createSVGTicks(start, end, step, min, max, height) {
+  const p = [];
+  if (start < min) {
+    start += stepify(min - start, v => v, step);
+  }
+  end = Math.min(end, max);
+  for (let i = start; i <= end; i += step) {
+    p.push(`M${i} 0 l0 ${height}`);
+  }
+  return p.join(' ');
+}
+
+function createSVGNumbers(start, end, unitSize, unit, minusSize, min, max, labelFn) {
+  const texts = [];
+  if (start < min) {
+    start += stepify(min - start, v => v, unitSize);
+  }
+  end = Math.min(end, max);
+  const digits = Math.max(0, -Math.log10(unit));
+  const f = v => labelFn(v.toFixed(digits));
+  for (let i = start; i <= end; i += unitSize) {
+    texts.push(`<text text-anchor="middle" dominant-baseline="hanging" x="${i >= 0 ? i : (i - minusSize / 2) }" y="0">${f(i / unitSize * unit)}</text>`);
+  }
+  return texts.join('\n');
+}
+
+function computeSizeOfMinus(elem) {
+  const oldHTML = elem.innerHTML;
+  elem.innerHTML = '<text>- </text>';
+  const text = elem.querySelector('text');
+  const size = text.getComputedTextLength();
+  elem.innerHTML = oldHTML;
+  return size;
+}
+
+export default class SliderView extends EditView {
+  #svgElem;
+  #originElem;
+  #ticksElem;
+  #thicksElem;
+  #numbersElem;
+  #leftGradElem;
+  #rightGradElem;
+  #width;
+  #height;
+  #lastV;
+  #minusSize;
+  #options = {
+    min: -100,
+    max: 100,
+    step: 1,
+    unit: 10,
+    unitSize: 10,
+    ticksPerUnit: 5,
+    labelFn: v => v,
+    tickHeight: 1,
+    limits: true,
+    thicksColor: undefined,
+    orientation: undefined,
+  };
+
+  constructor(setter, options) {
+    const wheelHelper = createWheelHelper();
+    super(createElem('div', {
+      innerHTML: svg,
+      onWheel: e => {
+        e.preventDefault();
+        const {min, max, step} = this.#options;
+        const delta = wheelHelper(e, step);
+        const newV = clamp(stepify(this.#lastV + delta, v => v, step), min, max);
+        setter.setValue(newV);
+      },
+    }));
+    this.#svgElem = this.$('svg');
+    this.#originElem = this.$('#muigui-origin');
+    this.#ticksElem = this.$('#muigui-ticks');
+    this.#thicksElem = this.$('#muigui-thicks');
+    this.#numbersElem = this.$('#muigui-numbers');
+    this.#leftGradElem = this.$('#muigui-left-grad');
+    this.#rightGradElem = this.$('#muigui-right-grad');
+    this.setOptions(options);
+    let startV;
+    addTouchEvents(this.domElement, {
+      onDown: () => {
+        startV = this.#lastV;
+      },
+      onMove: (e) => {
+        const {min, max, unitSize, unit, step} = this.#options;
+        const newV = clamp(stepify(startV - e.dx / unitSize * unit, v => v, step), min, max);
+        setter.setValue(newV);
+      },
+    });
+    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);
+      },
+    });
+    onResizeSVGNoScale(this.#svgElem, 0.5, 0, ({rect: {width}}) => {
+      this.#leftGradElem.setAttribute('x', -width / 2);
+      this.#rightGradElem.setAttribute('x', width / 2 - 20);
+      this.#minusSize = computeSizeOfMinus(this.#numbersElem);
+      this.#width = width;
+      this.#updateSlider();
+    });
+  }
+  // |--------V--------|
+  // . . | . . . | . . . |
+  //
+  #updateSlider() {
+    // There's no size if ResizeObserver has not fired yet.
+    if (!this.#width || this.#lastV === undefined) {
+      return;
+    }
+    const {
+      labelFn,
+      limits,
+      min,
+      max,
+      orientation,
+      tickHeight,
+      ticksPerUnit,
+      unit,
+      unitSize,
+      thicksColor,
+    } = this.#options;
+    const unitsAcross = Math.ceil(this.#width / unitSize);
+    const center = this.#lastV;
+    const centerUnitSpace = center / unit;
+    const startUnitSpace = Math.round(centerUnitSpace - unitsAcross);
+    const endUnitSpace = startUnitSpace + unitsAcross * 2;
+    const start = startUnitSpace * unitSize;
+    const end = endUnitSpace * unitSize;
+    const minUnitSpace = limits ? min * unitSize / unit : start;
+    const maxUnitSpace = limits ? max * unitSize / unit : end;
+    const height = labelFn(1) === '' ? 10 : 5;
+    if (ticksPerUnit > 1) {
+      this.#ticksElem.setAttribute('d', createSVGTicks(start, end, unitSize / ticksPerUnit, minUnitSpace, maxUnitSpace, height * tickHeight));
+    }
+    this.#thicksElem.style.stroke =  thicksColor; //setAttribute('stroke', thicksColor);
+    this.#thicksElem.setAttribute('d', createSVGTicks(start, end, unitSize, minUnitSpace, maxUnitSpace, height));
+    this.#numbersElem.innerHTML = createSVGNumbers(start, end, unitSize, unit, this.#minusSize, minUnitSpace, maxUnitSpace, labelFn);
+    this.#originElem.setAttribute('transform', `translate(${-this.#lastV * unitSize / unit} 0)`);
+    this.#svgElem.classList.toggle('muigui-slider-up', orientation === 'up');
+  }
+  updateDisplay(v) {
+    this.#lastV = v;
+    this.#updateSlider();
+  }
+  setOptions(options) {
+    copyExistingProperties(this.#options, options);
+    return this;
+  }
+}

package/src/views/TextView.js

@@ -0,0 +1,49 @@
+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 TextView extends EditView {
+  #to;
+  #from;
+  #skipUpdate;
+  #options = {
+    converters: identity,
+  };
+
+  constructor(setter, options) {
+    const setValue = setter.setValue.bind(setter);
+    const setFinalValue = setter.setFinalValue.bind(setter);
+    super(createElem('input', {
+      type: 'text',
+      onInput: () => this.#handleInput(setValue, true),
+      onChange: () => this.#handleInput(setFinalValue, false),
+    }));
+    this.setOptions(options);
+  }
+  #handleInput(setFn, skipUpdate) {
+    const [valid, newV] = this.#from(this.domElement.value);
+    if (valid) {
+      this.#skipUpdate = skipUpdate;
+      setFn(newV);
+    }
+    this.domElement.style.color = valid ? '' : 'var(--invalid-color)';
+
+  }
+  updateDisplay(v) {
+    if (!this.#skipUpdate) {
+      this.domElement.value = this.#to(v);
+      this.domElement.style.color = '';
+    }
+    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/ValueView.js

@@ -0,0 +1,11 @@
+import { createElem } from '../libs/elem.js';
+import View from './View.js';
+
+export default class ValueView extends View {
+  constructor(className = '') {
+    super(createElem('div', {className: 'muigui-value'}));
+    if (className) {
+      this.domElement.classList.add(className);
+    }
+  }
+}

package/src/views/Vec2View.js

@@ -0,0 +1,51 @@
+import { createElem } from '../libs/elem.js';
+import { addTouchEvents } from '../libs/touch.js';
+import { onResizeSVGNoScale } from '../libs/resize-helpers.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;">
+  <path d="m-3200,0L3200,0M0,-3200L0,3200" class="muigui-vec2-axis"/>
+  <path id="muigui-arrow" d="" class="muigui-vec2-line"/>
+  <g id="muigui-circle" transform="translate(0, 0)">
+    <circle r="3" class="muigui-vec2-axis"/>
+  </g>
+</svg>
+`;
+
+export default class Vec2View extends EditView {
+  #svgElem;
+  #arrowElem;
+  #circleElem;
+  #lastV = [];
+
+  constructor(setter) {
+    super(createElem('div', {
+      innerHTML: svg,
+    }));
+    const onTouch = (e) => {
+      const {width, height} = this.#svgElem.getBoundingClientRect();
+      const nx = e.nx * 2 - 1;
+      const ny = e.ny * 2 - 1;
+      setter.setValue([nx * width * 0.5, ny * height * 0.5]);
+    };
+    addTouchEvents(this.domElement, {
+      onDown: onTouch,
+      onMove: onTouch,
+    });
+    this.#svgElem = this.$('svg');
+    this.#arrowElem = this.$('#muigui-arrow');
+    this.#circleElem = this.$('#muigui-circle');
+    onResizeSVGNoScale(this.#svgElem, 0.5, 0.5, () => this.#updateDisplayImpl);
+  }
+  #updateDisplayImpl() {
+    const [x, y] = this.#lastV;
+    this.#arrowElem.setAttribute('d', `M0,0L${x},${y}`);
+    this.#circleElem.setAttribute('transform', `translate(${x}, ${y})`);
+  }
+  updateDisplay(v) {
+    this.#lastV[0] = v[0];
+    this.#lastV[1] = v[1];
+    this.#updateDisplayImpl();
+  }
+}

package/src/views/View.js

@@ -0,0 +1,56 @@
+import { removeArrayElem } from '../libs/utils.js';
+
+export default class View {
+  #childDestElem;
+  #views = [];
+
+  constructor(elem) {
+    this.domElement = elem;
+    this.#childDestElem = elem;
+  }
+  addElem(elem) {
+    this.#childDestElem.appendChild(elem);
+    return elem;
+  }
+  removeElem(elem) {
+    this.#childDestElem.removeChild(elem);
+    return elem;
+  }
+  pushSubElem(elem) {
+    this.#childDestElem.appendChild(elem);
+    this.#childDestElem = elem;
+  }
+  popSubElem() {
+    this.#childDestElem = this.#childDestElem.parentElement;
+  }
+  add(view) {
+    this.#views.push(view);
+    this.addElem(view.domElement);
+    return view;
+  }
+  remove(view) {
+    this.removeElem(view.domElement);
+    removeArrayElem(this.#views, view);
+    return view;
+  }
+  pushSubView(view) {
+    this.pushSubElem(view.domElement);
+  }
+  popSubView() {
+    this.popSubElem();
+  }
+  setOptions(options) {
+    for (const view of this.#views) {
+      view.setOptions(options);
+    }
+  }
+  updateDisplayIfNeeded(newV, ignoreCache) {
+    for (const view of this.#views) {
+      view.updateDisplayIfNeeded(newV, ignoreCache);
+    }
+    return this;
+  }
+  $(selector) {
+    return this.domElement.querySelector(selector);
+  }
+}

package/src/widgets/select.js

@@ -1 +0,0 @@
-export function createSlider()

package/src/widgets/slider.js

@@ -1,41 +0,0 @@
-import {
-  createElem,
-} from '../libs/elem.js';
-import Widget from './widget.js';
-
-export default class Slider extends Widget {
-  constructor(object, property, min = 0, max = 1, step = 0.01) {
-    super(object, property, 'muigui-slider');
-    const root = this.elem;
-    const id = this.id;
-
-    const value = this.getValue();
-    this._rangeElem = createElem('input', {
-      type: 'range',
-      min,
-      max,
-      value,
-      step,
-      id,
-      onInput: (e) => {
-        this.setValue(this._rangeElem.value);
-      }
-    });
-    root.appendChild(this._rangeElem);
-
-    this._textElem = createElem('input', {
-      type: 'number',
-      value: value,
-      onInput: (e) => {
-        this.setValue(parseFloat(this._textElem.value));
-      },
-    });
-    root.appendChild(this._textElem);
-  }
-  setValue(v) {
-    super.setValue(v);
-    const newV = super.getValue();
-    this._textElem.value = newV;
-    this._rangeElem.value = newV;
-  }
-}

package/src/widgets/widget.js

@@ -1,51 +0,0 @@
-import { createElem } from '../libs/elem.js';
-import { makeId } from '../libs/ids.js';
-import { idToLabel } from '../libs/utils.js';
-
-export default class Widget {
-  constructor(object, property, className = '') {
-    this._object = object;
-    this._property = property;
-    this._changeFns = [];
-    this._id = makeId();
-    this._nameElem = createElem('label', {textContent: property, for: this._id});
-    this._root = createElem('div', {className: `muigui-widget`}, [this._nameElem]);
-    // we need the specialization to come last so it takes precedence.
-    if (className) {
-      this._root.classList.add(className);
-    }
-  }
-  get elem() {
-    return this._root;
-  }
-  get id() {
-    return this._id;
-  }
-  setJustValue(v) {
-    this._object[this._property] = v;
-  }
-  setValue(v) {
-    this._object[this._property] = v;
-  }
-  getValue(v) {
-    return this._object[this._property];
-  }
-  value(v) {
-    this.setValue(v);
-    return this;
-  }
-  onChange(fn) {
-    this.removeChange(fn);
-    this._changeFns.push(fn);
-    return this;
-  }
-  removeChange(fn) {
-    this._changeFns.remove(fn);
-    return this;
-  }
-  name(name) {
-    this._nameElem.textContent = name;
-    return this;
-  }
-}
-