muigui 0.0.6 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muigui",
-  "version": "0.0.6",
+  "version": "0.0.10",
   "description": "A Simple GUI",
   "main": "muigui.js",
   "module": "src/muigui.js",

package/src/controllers/Container.js

@@ -26,6 +26,12 @@ export default class Container extends Controller {
     }
     return this;
   }
+  updateDisplay() {
+    for (const controller of this.#controllers) {
+      controller.updateDisplay();
+    }
+    return this;
+  }
   remove(controller) {
     const ndx = this.#controllers.indexOf(controller);
     if (ndx >= 0) {

package/src/controllers/Controller.js

@@ -113,6 +113,9 @@ export default class Controller extends View {
       }
     }
   }
+  updateDisplay() {
+    // placeholder. override
+  }
   getColors() {
     const toCamelCase = s => s.replace(/-([a-z])/g, (m, m1) => m1.toUpperCase());
     const keys = [

package/src/controllers/PopDownController.js

@@ -1,6 +1,5 @@
 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';
 /*
@@ -27,17 +26,6 @@ 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;

package/src/controllers/ValueController.js

@@ -34,31 +34,39 @@ export default class ValueController extends LabelController {
     return view;
   }
   #setValueImpl(v, ignoreCache) {
+    let isDifferent = false;
     if (typeof v === 'object') {
       const dst = this.#object[this.#property];
       // don't replace objects, just their values.
-      if (Array.isArray(v)) {
+      if (Array.isArray(v) || isTypedArray(v)) {
         for (let i = 0; i < v.length; ++i) {
+          isDifferent ||= dst[i] !== v[i];
           dst[i] = v[i];
         }
-      } else if (isTypedArray(v)) {
-        dst.set(v);
       } else {
+        for (const key of Object.keys(v)) {
+          isDifferent ||= dst[key] !== v[key];
+        }
         Object.assign(dst, v);
       }
     } else {
+      isDifferent = this.#object[this.#property] !== v;
       this.#object[this.#property] = v;
     }
     this.updateDisplay(ignoreCache);
-    this.emitChange(this.getValue(), this.#object, this.#property);
-    return this;
+    if (isDifferent) {
+      this.emitChange(this.getValue(), this.#object, this.#property);
+    }
+    return isDifferent;
   }
   setValue(v) {
     this.#setValueImpl(v);
   }
   setFinalValue(v) {
-    this.#setValueImpl(v, true);
-    this.emitFinalChange(this.getValue(), this.#object, this.#property);
+    const isDifferent = this.#setValueImpl(v, true);
+    if (isDifferent) {
+      this.emitFinalChange(this.getValue(), this.#object, this.#property);
+    }
     return this;
   }
   updateDisplay(ignoreCache) {

package/src/controllers/Vec2.js

@@ -1,4 +1,3 @@
-import GridView from '../views/GridView.js';
 import NumberView from '../views/NumberView.js';
 import Vec2View from '../views/Vec2View.js';
 import PopDownController from './PopDownController.js';

package/src/layout/Layout.js

@@ -3,7 +3,6 @@ import View from '../views/View.js';
 
 function showCSS(ob) {
   if (ob.prototype.css) {
-    console.log(ob.prototype.css);
     showCSS(ob.prototype);
   }
 }

package/src/libs/color-utils.js

@@ -34,12 +34,14 @@ const cssRGBToHex = v => {
   const m = cssRGBRegex.exec(v);
   return uint8RGBToHex([m[1], m[2], m[3]].map(v => parseInt(v)));
 };
+const cssRGBARegex = /^\s*rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)\s*$/;
 
 const hexToCssHSL = v => {
   const hsl = rgbUint8ToHsl(hexToUint8RGB(v)).map(v => f0(v));
   return `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`;
 };
 const cssHSLRegex = /^\s*hsl\(\s*(\d+)(?:deg|)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*\)\s*$/;
+const cssHSLARegex = /^\s*hsl\(\s*(\d+)(?:deg|)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*,\s*(\d+)%\s*\)\s*$/;
 
 const hex3DigitTo6Digit = v => `${v[0]}${v[0]}${v[1]}${v[1]}${v[2]}${v[2]}`;
 const cssHSLToHex = v => {
@@ -121,13 +123,20 @@ export function rgbFloatToHSV01([r, g, b]) {
 window.hsv01ToRGBFloat = hsv01ToRGBFloat;
 window.rgbFloatToHSV01 = rgbFloatToHSV01;
 
+// Yea, meh!
+export const hasAlpha = format => format.endsWith('a') || format.startsWith('hex8');
+
 const cssStringFormats = [
   { re: /^#(?:[0-9a-f]){6}$/i, format: 'hex6' },
   { re: /^(?:[0-9a-f]){6}$/i, format: 'hex6-no-hash' },
+  { re: /^#(?:[0-9a-f]){8}$/i, format: 'hex8' },
+  { re: /^(?:[0-9a-f]){8}$/i, format: 'hex8-no-hash' },
   { re: /^#(?:[0-9a-f]){3}$/i, format: 'hex3' },
   { re: /^(?:[0-9a-f]){3}$/i, format: 'hex3-no-hash' },
   { re: cssRGBRegex, format: 'css-rgb' },
   { re: cssHSLRegex, format: 'css-hsl' },
+  { re: cssRGBARegex, format: 'css-rgba' },
+  { re: cssHSLARegex, format: 'css-hsla' },
 ];
 
 function guessStringColorFormat(v) {
@@ -142,7 +151,8 @@ function guessStringColorFormat(v) {
 export function guessFormat(v) {
   switch (typeof v) {
     case 'number':
-      return 'uint32-rgb';
+      console.warn('can not reliably guess format based on a number. You should pass in a format like {format: "uint32-rgb"} or {format: "uint32-rgb"}');
+      return v <= 0xFFFFFF ? 'uint32-rgb' : 'uint32-rgba';
     case 'string': {
       const formatInfo = guessStringColorFormat(v.trim());
       if (formatInfo) {
@@ -154,18 +164,28 @@ export function guessFormat(v) {
       if (v instanceof Uint8Array || v instanceof Uint8ClampedArray) {
         if (v.length === 3) {
           return 'uint8-rgb';
+        } else if (v.length === 4) {
+          return 'uint8-rgba';
         }
       } else if (v instanceof Float32Array) {
         if (v.length === 3) {
           return 'float-rgb';
+        } else if (v.length === 4) {
+          return 'float-rgba';
         }
       } else if (Array.isArray(v)) {
         if (v.length === 3) {
           return 'float-rgb';
+        } else if (v.length === 4) {
+          return 'float-rgba';
         }
       } else {
         if ('r' in v && 'g' in v && 'b' in v) {
-          return 'object-rgb';
+          if ('a' in v) {
+            return 'object-rgba';
+          } else {
+            return 'object-rgb';
+          }
         }
       }
   }

package/src/libs/touch.js

@@ -29,9 +29,9 @@ export function addTouchEvents(elem, {onDown = noop, onMove = noop, onUp = noop}
     elem.releasePointerCapture(event.pointerId);
     elem.removeEventListener('pointermove', pointerMove);
     elem.removeEventListener('pointerup', pointerUp);
- 
+
     document.body.style.backgroundColor = '';
- 
+
     onUp('up');
   };
 

package/src/libs/utils.js

@@ -72,3 +72,34 @@ export const makeRangeOptions = ({from, to, step}) => {
   };
 };
 
+// TODO: remove an use one in conversions. Move makeRangeConverters there?
+export const identity = {
+  to: v => v,
+  from: v => [true, v],
+};
+export function makeMinMaxPair(gui, properties, minPropName, maxPropName, options) {
+  const { converters: { from } = identity } = options;
+  const { min, max } = options;
+  const guiMinRange = options.minRange || 0;
+  const valueMinRange = from(guiMinRange)[1];
+  const minGui = gui
+    .add(properties, minPropName, {
+      ...options,
+      min,
+      max: max - guiMinRange,
+    })
+    .onChange(v => {
+      maxGui.setValue(Math.min(max, Math.max(v + valueMinRange, properties[maxPropName])));
+    });
+  const maxGui = gui
+    .add(properties, maxPropName, {
+      ...options,
+      min: min + guiMinRange,
+      max,
+    })
+    .onChange(v => {
+      minGui.setValue(Math.max(min, Math.min(v - valueMinRange, properties[minPropName])));
+    });
+  return [ minGui, maxGui ];
+}
+

package/src/muigui.js

@@ -5,16 +5,22 @@ import {
   mapRange,
   makeRangeConverters,
   makeRangeOptions,
+  makeMinMaxPair,
 } from './libs/utils.js';
 import {
   converters
 } from './libs/conversions.js';
+import {
+  hasAlpha,
+  guessFormat,
+} from './libs/color-utils.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';
+import ColorChooser from './controllers/ColorChooser.js';
 
 import Column from './layout/Column.js';
 import Frame from './layout/Frame.js';
@@ -28,9 +34,6 @@ export {
   Row,
 };
 
-let stylesInjected = false;
-const styleElem = createElem('style');
-
 export class GUIFolder extends Folder {
   add(object, property, ...args) {
     const controller = object instanceof Controller
@@ -41,8 +44,13 @@ export class GUIFolder extends Folder {
   addCanvas(name) {
     return this.addController(new Canvas(name));
   }
-  addColor(object, property, ...args) {
-    return this.addController(new Color(object, property, ...args));
+  addColor(object, property, options = {}) {
+    const value = object[property];
+    if (hasAlpha(options.format || guessFormat(value))) {
+      return this.addController(new ColorChooser(object, property, options));
+    } else {
+      return this.addController(new Color(object, property, options));
+    }
   }
   addDivider() {
     return this.addController(new Divider());
@@ -55,11 +63,50 @@ export class GUIFolder extends Folder {
   }
 }
 
+class MuiguiElement extends HTMLElement {
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({mode: 'open'});
+  }
+}
+
+customElements.define('muigui-element', MuiguiElement);
+
+const baseStyleSheet = new CSSStyleSheet();
+baseStyleSheet.replaceSync(css.default);
+const userStyleSheet = new CSSStyleSheet();
+
+function makeStyleSheetUpdater(styleSheet) {
+  let newCss;
+  let newCssPromise;
+
+  function updateStyle() {
+    if (newCss && !newCssPromise) {
+      const s = newCss;
+      newCss = undefined;
+      newCssPromise = styleSheet.replace(s).then(() => {
+        newCssPromise = undefined;
+        updateStyle();
+      });
+    }
+  }
+
+  return function updateStyleSheet(css) {
+    newCss = css;
+    updateStyle();
+  };
+}
+
+const updateBaseStyle = makeStyleSheetUpdater(baseStyleSheet);
+const updateUserStyle = makeStyleSheetUpdater(userStyleSheet);
+
 export class GUI extends GUIFolder {
   static converters = converters;
   static mapRange = mapRange;
   static makeRangeConverters = makeRangeConverters;
   static makeRangeOptions = makeRangeOptions;
+  static makeMinMaxPair = makeMinMaxPair;
+  #localStyleSheet = new CSSStyleSheet();
 
   constructor(options = {}) {
     super('Controls', 'muigui-root');
@@ -70,16 +117,11 @@ export class GUI extends GUIFolder {
       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;
     }
@@ -88,13 +130,34 @@ export class GUI extends GUIFolder {
       this.domElement.classList.add('muigui-auto-place');
     }
     if (parent) {
-      parent.appendChild(this.domElement);
+      const muiguiElement = createElem('muigui-element');
+      muiguiElement.shadowRoot.adoptedStyleSheets = [baseStyleSheet, userStyleSheet, this.#localStyleSheet];
+      muiguiElement.shadow.appendChild(this.domElement);
+      parent.appendChild(muiguiElement);
     }
     if (title) {
       this.title(title);
     }
     this.domElement.classList.add('muigui', 'muigui-colors');
   }
+  setStyle(css) {
+    this.#localStyleSheet.replace(css);
+  }
+  static setBaseStyles(css) {
+    updateBaseStyle(css);
+  }
+  static getBaseStyleSheet() {
+    return baseStyleSheet;
+  }
+  static setUserStyles(css) {
+    updateUserStyle(css);
+  }
+  static getUserStyleSheet() {
+    return userStyleSheet;
+  }
+  static setTheme(name) {
+    GUI.setBaseStyles(`${css.default}\n${css.themes[name] || ''}`);
+  }
 }
 
 export default GUI;

package/src/styles/muigui.css.js

@@ -1,7 +1,9 @@
-export default `
-.muigui-colors {
+export default {
+  default: `
+.muigui {
   --bg-color: #ddd;
   --color: #222;
+  --contrast-color: #eee;
   --value-color: #145 ;
   --value-bg-color: #eeee;
   --disabled-color: #999;
@@ -24,9 +26,10 @@ export default `
 }
 
 @media (prefers-color-scheme: dark) {
-  .muigui-colors {
+  .muigui {
     --bg-color: #222222;
     --color: #dddddd;
+    --contrast-color: #000;
     --value-color: #43e5f7;
     --value-bg-color: #444444;
     --disabled-color: #666666;
@@ -678,5 +681,65 @@ export default `
   z-index: 100001;
 }
 
-`;
+`,
+themes: {
+  default: '',
+  float: `
+  :root {
+    color-scheme: light dark,
+  }
+
+  .muigui {
+    --width: 400px;
+    --bg-color: initial;
+    --label-width: 25%;
+    --number-width: 20%;
+  }
+
+  input,
+  .muigui-label-controller>label {
+      text-shadow:
+       -1px -1px 0 var(--contrast-color),
+        1px -1px 0 var(--contrast-color),
+       -1px  1px 0 var(--contrast-color),
+        1px  1px 0 var(--contrast-color);
+  }
 
+  .muigui-controller > label:nth-child(1) {
+      place-content: center end;
+      margin-right: 1em;
+  }
+
+  .muigui-value > :nth-child(2) {
+      margin-left: 1em;
+  }
+
+  .muigui-root>*:nth-child(1) {
+      display: none;
+  }
+
+  .muigui-range input[type=range]::-webkit-slider-thumb {
+    border-radius: 1em;
+  }
+
+  .muigui-range input[type=range]::-webkit-slider-runnable-track {
+    -webkit-appearance: initial;
+    appearance: none;
+    border: 1px solid rgba(0, 0, 0, 0.25);
+    height: 2px;
+  }
+
+  .muigui-colors {
+    --value-color: var(--color  );
+    --value-bg-color: rgba(0, 0, 0, 0.1);
+    --disabled-color: #cccccc;
+    --menu-bg-color: rgba(0, 0, 0, 0.1);
+    --menu-sep-color: #bbbbbb;
+    --hover-bg-color: rgba(0, 0, 0, 0);
+    --invalid-color: #FF0000;
+    --selected-color: rgba(0, 0, 0, 0.3);
+    --range-color: rgba(0, 0, 0, 0.125);
+  }
+`,
+},
+};

package/src/views/CheckboxView.js

@@ -2,6 +2,7 @@ import { createElem } from '../libs/elem.js';
 import EditView from './EditView.js';
 
 export default class CheckboxView extends EditView {
+  #checkboxElem;
   constructor(setter, id) {
     const checkboxElem = createElem('input', {
       type: 'checkbox',
@@ -14,8 +15,9 @@ export default class CheckboxView extends EditView {
       },
     });
     super(createElem('label', {}, [checkboxElem]));
+    this.#checkboxElem = checkboxElem;
   }
   updateDisplay(v) {
-    this.domElement.checked = v;
+    this.#checkboxElem.checked = v;
   }
 }

package/src/views/ColorChooserView.js

@@ -3,14 +3,10 @@ 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 = `

package/src/views/RangeView.js

@@ -22,16 +22,22 @@ export default class RangeView extends EditView {
       type: 'range',
       onInput: () => {
         this.#skipUpdate = true;
-        const [valid, v] = this.#from(parseFloat(this.domElement.value));
+        const {min, max, step} = this.#options;
+        const v = parseFloat(this.domElement.value);
+        const newV = clamp(stepify(v, v => v, step), min, max);
+        const [valid, validV] = this.#from(newV);
         if (valid) {
-          setter.setValue(v);
+          setter.setValue(validV);
         }
       },
       onChange: () => {
         this.#skipUpdate = true;
-        const [valid, v] = this.#from(parseFloat(this.domElement.value));
+        const {min, max, step} = this.#options;
+        const v = parseFloat(this.domElement.value);
+        const newV = clamp(stepify(v, v => v, step), min, max);
+        const [valid, validV] = this.#from(newV);
         if (valid) {
-          setter.setFinalValue(v);
+          setter.setFinalValue(validV);
         }
       },
       onWheel: e => {