muigui 0.0.6 → 0.0.12

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;
@@ -667,6 +670,17 @@ export default `
 }
 */
 
+.muigui-checkered-background {
+  background-color: #404040;
+  background-image:
+     linear-gradient(45deg, #808080 25%, transparent 25%),
+     linear-gradient(-45deg, #808080 25%, transparent 25%),
+     linear-gradient(45deg, transparent 75%, #808080 75%),
+     linear-gradient(-45deg, transparent 75%, #808080 75%);
+  background-size: 16px 16px;
+  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
+}
+
 /* ---------------------------------------------------------- */
 
 /* needs to be at bottom to take precedence */
@@ -678,5 +692,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

@@ -1,36 +1,38 @@
-import { createElem } from '../libs/elem.js';
+import { createElem, getNewId } from '../libs/elem.js';
 import { addTouchEvents } from '../libs/touch.js';
+import { identity } from '../libs/conversions.js';
 import { clamp } from '../libs/utils.js';
 import EditView from './EditView.js';
 import {
-  hexToUint8RGB,
   hexToFloatRGB,
-  hslToRgbUint8,
+  hexToFloatRGBA,
   hsv01ToRGBFloat,
+  hsva01ToRGBAFloat,
   rgbFloatToHSV01,
-  rgbUint8ToHsl,
+  rgbaFloatToHSVA01,
   floatRGBToHex,
-  uint8RGBToHex,
+  floatRGBAToHex,
+  rgbaFloatToHsla01,
 } from '../libs/color-utils.js';
+import { copyExistingProperties } from '../libs/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">
+<svg class="muigui-checkered-background" 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 data-src="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 data-src="muigui-color-chooser-hue">
+      <stop stop-color="hsl(60 0% 100% / 1)" offset="0%"/>
+      <stop stop-color="hsl(60 100% 50% / 1)" 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)"/>
+    <rect width="64" height="48" data-target="muigui-color-chooser-hue"/>
+    <rect width="64" height="48" data-target="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">
+    <linearGradient data-src="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%"/>
@@ -39,48 +41,108 @@ const svg = `
       <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 y="1" width="64" height="4" data-target="muigui-color-chooser-hues"/>
+    <g class="muigui-color-chooser-hue-cursor">
+      <rect x="-3" width="6" height="6" />
+    </g>
+</svg>
+<svg class="muigui-checkered-background" 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 data-src="muigui-color-chooser-alpha" x1="0" x2="1" y1="0" y2="0">
+      <stop stop-color="hsla(0,100%,100%,0)" offset="0%"/>
+      <stop stop-color="hsla(0,100%,100%,1)" offset="100%"/>
+    </linearGradient>
+    <rect y="1" width="64" height="4" data-target="muigui-color-chooser-alpha"/>
+    <g class="muigui-color-chooser-alpha-cursor">
       <rect x="-3" width="6" height="6" />
     </g>
 </svg>
 `;
 
+function connectFillTargets(elem) {
+  elem.querySelectorAll('[data-src]').forEach(srcElem => {
+    const id = getNewId();
+    srcElem.id = id;
+    elem.querySelectorAll(`[data-target=${srcElem.dataset.src}]`).forEach(targetElem => {
+      targetElem.setAttribute('fill', `url(#${id})`);
+    });
+  });
+  return elem;
+}
+
+// Was originally going to make alpha an option. Issue is
+// hard coded conversions?
 export default class ColorChooserView extends EditView {
+  #to;
+  #from;
   #satLevelElem;
-  #hueUIElem;
   #circleElem;
+  #hueUIElem;
   #hueElem;
   #hueCursorElem;
-  #hsv;
+  #alphaUIElem;
+  #alphaElem;
+  #alphaCursorElem;
+  #hsva;
   #skipHueUpdate;
   #skipSatLevelUpdate;
+  #skipAlphaUpdate;
+  #options = {
+    converters: identity,
+    alpha: false,
+  };
+  #convertInternalToHex;
+  #convertHexToInternal;
 
-  constructor(setter) {
+  constructor(setter, options) {
     super(createElem('div', {
       innerHTML: svg,
       className: 'muigui-no-scroll',
     }));
     this.#satLevelElem = this.domElement.children[0];
     this.#hueUIElem = this.domElement.children[1];
+    this.#alphaUIElem = this.domElement.children[2];
+    connectFillTargets(this.#satLevelElem);
+    connectFillTargets(this.#hueUIElem);
+    connectFillTargets(this.#alphaUIElem);
     this.#circleElem = this.$('.muigui-color-chooser-circle');
-    this.#hueElem = this.$('#muigui-color-chooser-hue');
-    this.#hueCursorElem = this.$('.muigui-color-chooser-cursor');
+    this.#hueElem = this.$('[data-src=muigui-color-chooser-hue]');
+    this.#hueCursorElem = this.$('.muigui-color-chooser-hue-cursor');
+    this.#alphaElem = this.$('[data-src=muigui-color-chooser-alpha]');
+    this.#alphaCursorElem = this.$('.muigui-color-chooser-alpha-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.#hsva[1] = s;
+      this.#hsva[2] = (1 - v);
       this.#skipHueUpdate = true;
-      setter.setValue(floatRGBToHex(hsv01ToRGBFloat(this.#hsv)));
+      this.#skipAlphaUpdate = true;
+      const [valid, newV] = this.#from(this.#convertInternalToHex(this.#hsva));
+      if (valid) {
+        setter.setValue(newV);
+      }
     };
 
     const handleHueChange = (e) => {
       const h = clamp(e.nx, 0, 1);
-      this.#hsv[0] = h;
+      this.#hsva[0] = h;
       this.#skipSatLevelUpdate = true;
-      setter.setValue(floatRGBToHex(hsv01ToRGBFloat(this.#hsv)));
+      this.#skipAlphaUpdate = true;
+      const [valid, newV] = this.#from(this.#convertInternalToHex(this.#hsva));
+      if (valid) {
+        setter.setValue(newV);
+      }
+    };
+
+    const handleAlphaChange = (e) => {
+      const a = clamp(e.nx, 0, 1);
+      this.#hsva[3] = a;
+      this.#skipHueUpdate = true;
+      this.#skipSatLevelUpdate = true;
+      const [valid, newV] = this.#from(this.#convertInternalToHex(this.#hsva));
+      if (valid) {
+        setter.setValue(newV);
+      }
     };
 
     addTouchEvents(this.#satLevelElem, {
@@ -91,29 +153,45 @@ export default class ColorChooserView extends EditView {
       onDown: handleHueChange,
       onMove: handleHueChange,
     });
+    addTouchEvents(this.#alphaUIElem, {
+      onDown: handleAlphaChange,
+      onMove: handleAlphaChange,
+    });
+    this.setOptions(options);
   }
   updateDisplay(newV) {
-    if (!this.#hsv) {
-      this.#hsv = rgbFloatToHSV01(hexToFloatRGB(newV));
+    if (!this.#hsva) {
+      this.#hsva = this.#convertHexToInternal(this.#to(newV));
     }
     {
-      const [h, s, v] = rgbFloatToHSV01(hexToFloatRGB(newV));
+      const [h, s, v, a = 1] = this.#convertHexToInternal(this.#to(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];
+        this.#hsva[0] = s > 0.001 && v > 0.001 ? h : this.#hsva[0];
       }
       if (!this.#skipSatLevelUpdate) {
-        this.#hsv[1] = s;
-        this.#hsv[2] = v;
+        this.#hsva[1] = s;
+        this.#hsva[2] = v;
+      }
+      if (!this.#skipAlphaUpdate) {
+        this.#hsva[3] = a;
       }
     }
     {
-      const [h, s, v] = this.#hsv;
+      const [h, s, v, a] = this.#hsva;
+      const [hue, sat, lum] = rgbaFloatToHsla01(hsva01ToRGBAFloat(this.#hsva));
+
       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%)`);
       }
+      this.#hueElem.children[0].setAttribute('stop-color', `hsl(${hue * 360} 0% 100% / ${a})`);
+      this.#hueElem.children[1].setAttribute('stop-color', `hsl(${hue * 360} 100% 50% / ${a})`);
+      if (!this.#skipAlphaUpdate) {
+        this.#alphaCursorElem.setAttribute('transform', `translate(${a * 64}, 0)`);
+      }
+      this.#alphaElem.children[0].setAttribute('stop-color', `hsl(${hue * 360} ${sat * 100}% ${lum * 100}% / 0)`);
+      this.#alphaElem.children[1].setAttribute('stop-color', `hsl(${hue * 360} ${sat * 100}% ${lum * 100}% / 1)`);
+
       if (!this.#skipSatLevelUpdate) {
         this.#circleElem.setAttribute('cx', `${s * 64}`);
         this.#circleElem.setAttribute('cy', `${(1 - v) * 48}`);
@@ -121,5 +199,20 @@ export default class ColorChooserView extends EditView {
     }
     this.#skipHueUpdate = false;
     this.#skipSatLevelUpdate = false;
+    this.#skipAlphaUpdate = false;
+  }
+  setOptions(options) {
+    copyExistingProperties(this.#options, options);
+    const {converters: {to, from}, alpha} = this.#options;
+    this.#alphaUIElem.style.display = alpha ? '' : 'none';
+    this.#convertInternalToHex = alpha
+       ? v => floatRGBAToHex(hsva01ToRGBAFloat(v))
+       : v => floatRGBToHex(hsv01ToRGBFloat(v));
+    this.#convertHexToInternal = alpha
+       ? v => rgbaFloatToHSVA01(hexToFloatRGBA(v))
+       : v => rgbFloatToHSV01(hexToFloatRGB(v));
+    this.#to = to;
+    this.#from = from;
+    return this;
   }
 }

package/src/views/RadioGridView.js

@@ -15,7 +15,7 @@ export default class RadioGridView extends EditView {
           type: 'radio',
           name,
           value: ndx,
-          onChange: function() {
+          onChange: function () {
             if (this.checked) {
               setter.setFinalValue(that.#values[this.value]);
             }
@@ -24,12 +24,13 @@ export default class RadioGridView extends EditView {
         createElem('button', {
           type: 'button',
           textContent: key,
-          onClick: function() {
+          onClick: function () {
             this.previousElementSibling.click();
           },
         }),
       ]);
     })));
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const that = this;
     this.#values = values;
     this.cols(cols);

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 => {

package/src/views/{View.js → View.ts}

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