muigui 0.0.1 → 0.0.3

package/src/libs/taskrunner.js

@@ -0,0 +1,56 @@
+import { removeArrayElem } from './utils.js';
+
+const tasks = [];
+const tasksToRemove = new Set();
+
+let requestId;
+let processing;
+
+function removeTasks() {
+  if (!tasksToRemove.size) {
+    return;
+  }
+
+  if (processing) {
+    queueProcessing();
+    return;
+  }
+
+  tasksToRemove.forEach(task => {
+    removeArrayElem(tasks, task);
+  });
+  tasksToRemove.clear();
+}
+
+function processTasks() {
+  requestId = undefined;
+  processing = true;
+  for (const task of tasks) {
+    if (!tasksToRemove.has(task)) {
+      task();
+    }
+  }
+  processing = false;
+  removeTasks();
+  queueProcessing();
+}
+
+function queueProcessing() {
+  if (!requestId && tasks.length) {
+    requestId = requestAnimationFrame(processTasks);
+  }
+}
+
+export function addTask(fn) {
+  tasks.push(fn);
+  queueProcessing();
+}
+
+export function removeTask(fn) {
+  tasksToRemove.set(fn);
+
+  const ndx = tasks.indexOf(fn);
+  if (ndx >= 0) {
+    tasks.splice(ndx, 1);
+  }
+}

package/src/libs/touch.js

@@ -0,0 +1,50 @@
+function noop() {
+}
+
+export function computeRelativePosition(elem, event, start) {
+  const rect = elem.getBoundingClientRect();
+  const x = event.clientX - rect.left;
+  const y = event.clientY - rect.top;
+  const nx = x / rect.width;
+  const ny = y / rect.height;
+  start = start || [x, y];
+  const dx = x - start[0];
+  const dy = y - start[1];
+  const ndx = dx / rect.width;
+  const ndy = dy / rect.width;
+  return {x, y, nx, ny, dx, dy, ndx, ndy};
+}
+
+export function addTouchEvents(elem, {onDown = noop, onMove = noop, onUp = noop}) {
+  let start;
+  const mouseMove = function(event) {
+    const e = {
+      type: 'move',
+      ...computeRelativePosition(elem, event, start),
+    };
+    onMove(e);
+  };
+
+  const mouseUp = function() {
+    window.removeEventListener('mousemove', mouseMove);
+    window.removeEventListener('mouseup', mouseUp);
+    onUp('up');
+  };
+
+  const mouseDown = function(event) {
+    window.addEventListener('mousemove', mouseMove);
+    window.addEventListener('mouseup', mouseUp);
+    const rel = computeRelativePosition(elem, event);
+    start = [rel.x, rel.y];
+    onDown({
+      type: 'down',
+      ...rel,
+    });
+  };
+
+  elem.addEventListener('mousedown', mouseDown);
+
+  return function() {
+    elem.removeEventListener('mousedown', mouseDown);
+  };
+}

package/src/libs/utils.js

@@ -1,4 +1,4 @@
-export function removeElem(array, value) {
+export function removeArrayElem(array, value) {
   const ndx = array.indexOf(value);
   if (ndx) {
     array.splice(ndx, 1);
@@ -8,7 +8,7 @@ export function removeElem(array, value) {
 
 /**
  * Converts an camelCase or snake_case id to "camel case" or "snake case"
- * @param {string} id 
+ * @param {string} id
  */
 const underscoreRE = /_/g;
 const upperLowerRE = /([A-Z])([a-z])/g;
@@ -17,3 +17,39 @@ export function idToLabel(id) {
            .replace(upperLowerRE, (m, m1, m2) => `${m1.toLowerCase()} ${m2}`);
 }
 
+export function clamp(v, min, max) {
+  return Math.max(min, Math.min(max, v));
+}
+
+export const isTypedArray = typeof SharedArrayBuffer !== 'undefined'
+  ? function isArrayBufferOrSharedArrayBuffer(a) {
+    return a && a.buffer && (a.buffer instanceof ArrayBuffer || a.buffer instanceof SharedArrayBuffer);
+  }
+  : function isArrayBuffer(a) {
+    return a && a.buffer && a.buffer instanceof ArrayBuffer;
+  };
+
+export const isArrayOrTypedArray = v => Array.isArray(v) || isTypedArray(v);
+
+// Yea, I know this should be `Math.round(v / step) * step
+// but try step = 0.1, newV = 19.95
+//
+// I get
+//     Math.round(19.95 / 0.1) * 0.1
+//     19.900000000000002
+// vs
+//     Math.round(19.95 / 0.1) / (1 / 0.1)
+//     19.9
+//
+export const stepify = (v, from, step) => Math.round(from(v) / step) / (1 / step);
+
+export const euclideanModulo = (v, n) => ((v % n) + n) % n;
+export const lerp = (a, b, t) => a + (b - a) * t;
+export function copyExistingProperties(dst, src) {
+  for (const key in src) {
+    if (key in dst) {
+      dst[key] = src[key];
+    }
+  }
+  return dst;
+}

package/src/libs/wheel.js

@@ -0,0 +1,10 @@
+export function createWheelHelper() {
+  let wheelAccum = 0;
+  return function(e, step, wheelScale = 5) {
+    wheelAccum -= e.deltaY * step / wheelScale;
+    const wheelSteps = Math.floor(Math.abs(wheelAccum) / step) * Math.sign(wheelAccum);
+    const delta = wheelSteps * step;
+    wheelAccum -= delta;
+    return delta;
+  };
+}

package/src/muigui.js

@@ -1,26 +1,86 @@
-import { createElem } from './libs/elem.js';
-import Slider from './widgets/slider.js';
-import Widget from './widgets/widget.js';
+import css from './styles/muigui.css.js';
+import {createElem} from './libs/elem.js';
+import {createController} from './controllers/create-controller.js';
+import Canvas from './controllers/Canvas.js';
+import Color from './controllers/Color.js';
+import Divider from './controllers/Divider.js';
+import Folder from './controllers/Folder.js';
+import Label from './controllers/Label.js';
+import Controller from './controllers/Controller.js';
 
-export function createWidget(object, property, ...args) {
-  const t = typeof object[property];
-  switch (t) {
-    case 'number':
-      return new Slider(object, property, ...args);
+import Column from './layout/Column.js';
+import Frame from './layout/Frame.js';
+import Grid from './layout/Grid.js';
+import Row from './layout/Row.js';
+
+export {
+  Column,
+  Frame,
+  Grid,
+  Row,
+};
+
+let stylesInjected = false;
+const styleElem = createElem('style');
+
+export class GUIFolder extends Folder {
+  add(object, property, ...args) {
+    const controller = object instanceof Controller
+        ? object
+        : createController(object, property, ...args);
+    return this.addController(controller);
+  }
+  addCanvas(name) {
+    return this.addController(new Canvas(name));
+  }
+  addColor(object, property, ...args) {
+    return this.addController(new Color(object, property, ...args));
+  }
+  addDivider() {
+    return this.addController(new Divider());
+  }
+  addFolder(name) {
+    return this.addController(new GUIFolder(name));
+  }
+  addLabel(text) {
+    return this.addController(new Label(text));
   }
 }
 
-export class GUI extends Widget {
-  constructor() {
-    super({}, 'Controls', 'muigui-root');
-    document.body.appendChild(this.elem);
-    this._widgetsElem = createElem('div');
-    this.elem.appendChild(this._widgetsElem);
-  }
-  add(object, property, ...args) {
-    const widget = createWidget(object, property, ...args);
-    this._widgetsElem.appendChild(widget.elem);
-    return this;
+export class GUI extends GUIFolder {
+  constructor(options = {}) {
+    super('Controls', 'muigui-root');
+    if (options instanceof HTMLElement) {
+      options = {parent: options};
+    }
+    const {
+      autoPlace = true,
+      width,
+      title = 'Controls',
+      injectStyles = true,
+    } = options;
+    let {
+      parent,
+    } = options;
+    if (injectStyles && !stylesInjected) {
+      stylesInjected = true;
+      (document.head || document.documentElement).appendChild(styleElem);
+      styleElem.textContent = css;
+    }
+    if (width) {
+      this.domElement.style.width = /^\d+$/.test(width) ? `${width}px` : width;
+    }
+    if (parent === undefined && autoPlace) {
+      parent = document.body;
+      this.domElement.classList.add('muigui-auto-place');
+    }
+    if (parent) {
+      parent.appendChild(this.domElement);
+    }
+    if (title) {
+      this.title(title);
+    }
+    this.domElement.classList.add('muigui');
   }
 }