add theme

greggman · Oct 31, 2023 · 1ebacc8 · 1ebacc8
1 parent a1fbb31
commit 1ebacc8
Show file tree

Hide file tree

Showing 7 changed files with 444 additions and 106 deletions.
diff --git a/dist/0.x/muigui.js b/dist/0.x/muigui.js
@@ -1,14 +1,16 @@
-/* [email protected].6, license MIT */
+/* [email protected].7, license MIT */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.GUI = factory());
 })(this, (function () { 'use strict';
 
-  var css = `
-.muigui-colors {
+  var css = {
+    default: `
+.muigui {
   --bg-color: #ddd;
   --color: #222;
+  --contrast-color: #eee;
   --value-color: #145 ;
   --value-bg-color: #eeee;
   --disabled-color: #999;
@@ -31,9 +33,10 @@
 }
 
 @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;
@@ -685,7 +688,67 @@
   z-index: 100001;
 }
 
-`;
+`,
+  themes: {
+    default: '',
+    float: `
+  :root {
+    color-scheme: light dark,
+  }
+
+  .muigui {
+    --width: 400px;
+    --bg-color: initial;
+    --label-width: 25%;
+  }
+
+  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);
+  }
+`,
+  },
+  };
 
   function setElemProps(elem, attrs, children) {
     for (const [key, value] of Object.entries(attrs)) {
@@ -794,6 +857,42 @@
     };
   };
 
+  // TODO: remove an use one in conversions. Move makeRangeConverters there?
+  const identity$1 = {
+    to: v => v,
+    from: v => [true, v],
+  };
+  function makeMinMaxPair(gui, properties, minPropName, maxPropName, options) {
+    const { converters: { from } = identity$1 } = options;
+    const { min, max } = options;
+    const guiMinRange = options.minRange || 0;
+    const valueMinRange = from(guiMinRange)[1];
+    console.log('guiMinRange', guiMinRange);
+    console.log('valueMinRange', valueMinRange);
+    return [
+      gui
+          .add(properties, minPropName, {
+            ...options,
+            min,
+            max: max - guiMinRange,
+          })
+          .listen()
+          .onChange(v => {
+            properties[maxPropName] = Math.min(max, Math.max(v + valueMinRange, properties[maxPropName]));
+          }),
+      gui
+          .add(properties, maxPropName, {
+            ...options,
+            min: min + guiMinRange,
+            max,
+          })
+          .listen()
+          .onChange(v => {
+            properties[minPropName] = Math.max(min, Math.min(v - valueMinRange, properties[minPropName]));
+          }),
+    ];
+  }
+
   class View {
     #childDestElem;
     #views = [];
@@ -1521,16 +1620,22 @@
         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$1(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$1(stepify(v, v => v, step), min, max);
+          const [valid, validV] = this.#from(newV);
           if (valid) {
-            setter.setFinalValue(v);
+            setter.setFinalValue(validV);
           }
         },
         onWheel: e => {
@@ -2361,9 +2466,6 @@
     }
   }
 
-  let stylesInjected = false;
-  const styleElem = createElem('style');
-
   class GUIFolder extends Folder {
     add(object, property, ...args) {
       const controller = object instanceof Controller
@@ -2388,11 +2490,51 @@
     }
   }
 
+  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(() => {
+    console.log(s);
+          newCssPromise = undefined;
+          updateStyle();
+        });
+      }
+    }
+
+    return function updateStyleSheet(css) {
+      newCss = css;
+      updateStyle();
+    };
+  }
+
+  const updateBaseStyle = makeStyleSheetUpdater(baseStyleSheet);
+  const updateUserStyle = makeStyleSheetUpdater(userStyleSheet);
+
   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');
@@ -2403,16 +2545,11 @@
         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;
       }
@@ -2421,13 +2558,34 @@
         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] || ''}`);
+    }
   }
 
   function noop$1() {
@@ -2461,9 +2619,9 @@
       elem.releasePointerCapture(event.pointerId);
       elem.removeEventListener('pointermove', pointerMove);
       elem.removeEventListener('pointerup', pointerUp);
-   
+
       document.body.style.backgroundColor = '';
-   
+
       onUp('up');
     };
 
@@ -2622,17 +2780,6 @@
 
   */
 
-  function makeSetter(object, property) {
-    return {
-      setValue(v) {
-        object[property] = v;
-      },
-      setFinalValue(v) {
-        this.setValue(v);
-      },
-    };
-  }
-
   class PopDownController extends ValueController {
     #top;
     #valuesView;
@@ -3170,19 +3317,6 @@
     }
   }
 
-  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)`;
-    }
-  }
-
   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"/>

diff --git a/dist/0.x/muigui.min.js b/dist/0.x/muigui.min.js