muigui 0.0.10 → 0.0.13

package/src/libs/color-utils.js

@@ -9,6 +9,11 @@ const hexToUint32RGB = v => (parseInt(v.substring(1, 3), 16) << 16) |
                             (parseInt(v.substring(3, 5), 16) << 8 ) |
                             (parseInt(v.substring(5, 7), 16)      );
 const uint32RGBToHex = v => `#${(Math.round(v)).toString(16).padStart(6, '0')}`;
+const hexToUint32RGBA = v => (parseInt(v.substring(1, 3), 16) * 2 ** 24) +
+                             (parseInt(v.substring(3, 5), 16) * 2 ** 16) +
+                             (parseInt(v.substring(5, 7), 16) * 2 **  8) +
+                             (parseInt(v.substring(7, 9), 16)      );
+const uint32RGBAToHex = v => `#${(Math.round(v)).toString(16).padStart(8, '0')}`;
 
 export const hexToUint8RGB = v => [
     parseInt(v.substring(1, 3), 16),
@@ -17,16 +22,35 @@ export const hexToUint8RGB = v => [
 ];
 export const uint8RGBToHex = v => `#${Array.from(v).map(v => v.toString(16).padStart(2, '0')).join('')}`;
 
+export const hexToUint8RGBA = v => [
+    parseInt(v.substring(1, 3), 16),
+    parseInt(v.substring(3, 5), 16),
+    parseInt(v.substring(5, 7), 16),
+    parseInt(v.substring(7, 9), 16),
+];
+export const uint8RGBAToHex = v => `#${Array.from(v).map(v => v.toString(16).padStart(2, '0')).join('')}`;
+
 export const hexToFloatRGB = v => hexToUint8RGB(v).map(v => f3(v / 255));
 export const floatRGBToHex = v => uint8RGBToHex(Array.from(v).map(v => Math.round(clamp(v * 255, 0, 255))));
 
+export const hexToFloatRGBA = v => hexToUint8RGBA(v).map(v => f3(v / 255));
+export const floatRGBAToHex = v => uint8RGBAToHex(Array.from(v).map(v => Math.round(clamp(v * 255, 0, 255))));
+
+const scaleAndClamp = v => clamp(Math.round(v * 255), 0, 255).toString(16).padStart(2, '0');
+
 const hexToObjectRGB = v => ({
   r: parseInt(v.substring(1, 3), 16) / 255,
   g: parseInt(v.substring(3, 5), 16) / 255,
   b: parseInt(v.substring(5, 7), 16) / 255,
 });
-const scaleAndClamp = v => clamp(Math.round(v * 255), 0, 255).toString(16).padStart(2, '0');
 const objectRGBToHex = v => `#${scaleAndClamp(v.r)}${scaleAndClamp(v.g)}${scaleAndClamp(v.b)}`;
+const hexToObjectRGBA = v => ({
+  r: parseInt(v.substring(1, 3), 16) / 255,
+  g: parseInt(v.substring(3, 5), 16) / 255,
+  b: parseInt(v.substring(5, 7), 16) / 255,
+  a: parseInt(v.substring(7, 9), 16) / 255,
+});
+const objectRGBAToHex = v => `#${scaleAndClamp(v.r)}${scaleAndClamp(v.g)}${scaleAndClamp(v.b)}${scaleAndClamp(v.a)}`;
 
 const hexToCssRGB = v => `rgb(${hexToUint8RGB(v).join(', ')})`;
 const cssRGBRegex = /^\s*rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)\s*$/;
@@ -34,14 +58,23 @@ 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 hexToCssRGBA = v => `rgba(${hexToUint8RGBA(v).map((v, i) => i === 3 ? v / 255 : v).join(', ')})`;
+const cssRGBARegex = /^\s*rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+\.\d+|\d+)\s*\)\s*$/;
+const cssRGBAToHex = v => {
+  const m = cssRGBARegex.exec(v);
+  return uint8RGBAToHex([m[1], m[2], m[3], m[4]].map((v, i) => i === 3 ? (parseFloat(v) * 255 | 0) : parseInt(v)));
+};
 
 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 hexToCssHSLA = v => {
+  const hsla = rgbaUint8ToHsla(hexToUint8RGBA(v)).map((v, i) => i === 3 ? f3(v) : f0(v));
+  return `hsl(${hsla[0]} ${hsla[1]}% ${hsla[2]}% / ${hsla[3]})`;
+};
+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+\.\d+|\d+)\s*\)\s*$/;
 
 const hex3DigitTo6Digit = v => `${v[0]}${v[0]}${v[1]}${v[1]}${v[2]}${v[2]}`;
 const cssHSLToHex = v => {
@@ -49,6 +82,11 @@ const cssHSLToHex = v => {
   const rgb = hslToRgbUint8([m[1], m[2], m[3]].map(v => parseFloat(v)));
   return uint8RGBToHex(rgb);
 };
+const cssHSLAToHex = v => {
+  const m = cssHSLARegex.exec(v);
+  const rgba = hslaToRgbaUint8([m[1], m[2], m[3], m[4]].map(v => parseFloat(v)));
+  return uint8RGBAToHex(rgba);
+};
 
 const euclideanModulo = (v, n) => ((v % n) + n) % n;
 
@@ -67,6 +105,11 @@ export function hslToRgbUint8([h, s, l]) {
   return [f(0), f(8), f(4)].map(v => Math.round(v * 255));
 }
 
+export function hslaToRgbaUint8([h, s, l, a]) {
+  const rgb = hslToRgbUint8([h, s, l]);
+  return [...rgb, a * 255 | 0];
+}
+
 export function rgbFloatToHsl01([r, g, b]) {
   const max = Math.max(r, g, b);
   const min = Math.min(r, g, b);
@@ -90,11 +133,21 @@ export function rgbFloatToHsl01([r, g, b]) {
   return [h / 6, s, l];
 }
 
+export function rgbaFloatToHsla01([r, g, b, a]) {
+  const hsl = rgbFloatToHsl01([r, g, b]);
+ return [...hsl, a];
+}
+
 export const rgbUint8ToHsl = (rgb) => {
   const [h, s, l] = rgbFloatToHsl01(rgb.map(v => v / 255));
   return [h * 360, s * 100, l * 100];
 };
 
+export const rgbaUint8ToHsla = (rgba) => {
+  const [h, s, l, a] = rgbaFloatToHsla01(rgba.map(v => v / 255));
+  return [h * 360, s * 100, l * 100, a];
+};
+
 export function hsv01ToRGBFloat([hue, sat, val]) {
   sat = clamp(sat, 0, 1);
   val = clamp(val, 0, 1);
@@ -103,6 +156,11 @@ export function hsv01ToRGBFloat([hue, sat, val]) {
   );
 }
 
+export function hsva01ToRGBAFloat([hue, sat, val, alpha]) {
+  const rgb = hsv01ToRGBFloat([hue, sat, val]);
+  return [...rgb, alpha];
+}
+
 const round3 = v => Math.round(v * 1000) / 1000;
 
 export function rgbFloatToHSV01([r, g, b]) {
@@ -120,8 +178,13 @@ export function rgbFloatToHSV01([r, g, b]) {
   ].map(round3);
 }
 
-window.hsv01ToRGBFloat = hsv01ToRGBFloat;
-window.rgbFloatToHSV01 = rgbFloatToHSV01;
+export function rgbaFloatToHSVA01([r, g, b, a]) {
+  const hsv = rgbFloatToHSV01([r, g, b]);
+  return [...hsv, a];
+}
+
+// window.hsv01ToRGBFloat = hsv01ToRGBFloat;
+// window.rgbFloatToHSV01 = rgbFloatToHSV01;
 
 // Yea, meh!
 export const hasAlpha = format => format.endsWith('a') || format.startsWith('hex8');
@@ -199,6 +262,13 @@ function fixHex6(v) {
   //return fix(v.trim());
 }
 
+function fixHex8(v) {
+  return v.trim(v);
+  //const formatInfo = guessStringColorFormat(v.trim());
+  //const fix = formatInfo ? formatInfo.fix : v => v;
+  //return fix(v.trim());
+}
+
 function hex6ToHex3(hex6) {
   return (hex6[1] === hex6[2] &&
           hex6[3] === hex6[4] &&
@@ -234,6 +304,19 @@ const strToRGBObject = (s) => {
   }
 };
 
+const strToRGBAObject = (s) => {
+  try {
+    const json = s.replace(/([a-z])/g, '"$1"');
+    const rgba = JSON.parse(json);
+    if (Number.isNaN(rgba.r) || Number.isNaN(rgba.g) || Number.isNaN(rgba.b) || Number.isNaN(rgba.a)) {
+      throw new Error('not {r, g, b, a}');
+    }
+    return [true, rgba];
+  } catch (e) {
+    return [false];
+  }
+};
+
 const strToCssRGB = s => {
   const m = cssRGBRegex.exec(s);
   if (!m) {
@@ -244,6 +327,16 @@ const strToCssRGB = s => {
   return [!outOfRange, `rgb(${v.join(', ')})`];
 };
 
+const strToCssRGBA = s => {
+  const m = cssRGBARegex.exec(s);
+  if (!m) {
+    return [false];
+  }
+  const v = [m[1], m[2], m[3], m[4]].map((v, i) => i === 3 ? parseFloat(v) : parseInt(v));
+  const outOfRange = v.find(v => v > 255);
+  return [!outOfRange, `rgba(${v.join(', ')})`];
+};
+
 const strToCssHSL = s => {
   const m = cssHSLRegex.exec(s);
   if (!m) {
@@ -254,9 +347,22 @@ const strToCssHSL = s => {
   return [!outOfRange, `hsl(${v[0]}, ${v[1]}%, ${v[2]}%)`];
 };
 
+const strToCssHSLA = s => {
+  const m = cssHSLARegex.exec(s);
+  if (!m) {
+    return [false];
+  }
+  const v = [m[1], m[2], m[3], m[4]].map(v => parseFloat(v));
+  const outOfRange = v.find(v => Number.isNaN(v));
+  return [!outOfRange, `hsl(${v[0]} ${v[1]}% ${v[2]}% / ${v[3]})`];
+};
+
 const rgbObjectToStr = rgb => {
   return `{r:${f3(rgb.r)}, g:${f3(rgb.g)}, b:${f3(rgb.b)}}`;
 };
+const rgbaObjectToStr = rgba => {
+  return `{r:${f3(rgba.r)}, g:${f3(rgba.g)}, b:${f3(rgba.b)}}, a:${f3(rgba.a)}}`;
+};
 
 const strTo3IntsRE = /^\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*$/;
 const strTo3Ints = s => {
@@ -269,6 +375,17 @@ const strTo3Ints = s => {
   return [!outOfRange, v];
 };
 
+const strTo4IntsRE = /^\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*$/;
+const strTo4Ints = s => {
+  const m = strTo4IntsRE.exec(s);
+  if (!m) {
+    return [false];
+  }
+  const v = [m[1], m[2], m[3], m[4]].map(v => parseInt(v));
+  const outOfRange = v.find(v => v > 255);
+  return [!outOfRange, v];
+};
+
 const strTo3Floats = s => {
   const numbers = s.split(',').map(s => s.trim());
   const v = numbers.map(v => parseFloat(v));
@@ -280,6 +397,17 @@ const strTo3Floats = s => {
   return [badNdx < 0, v.map(v => f3(v))];
 };
 
+const strTo4Floats = s => {
+  const numbers = s.split(',').map(s => s.trim());
+  const v = numbers.map(v => parseFloat(v));
+  if (v.length !== 4) {
+    return [false];
+  }
+  // Note: using isNaN not Number.isNaN
+  const badNdx = numbers.findIndex(v => isNaN(v));
+  return [badNdx < 0, v.map(v => f3(v))];
+};
+
 const strToUint32RGBRegex = /^\s*(?:0x){0,1}([0-9a-z]{1,6})\s*$/i;
 const strToUint32RGB = s => {
   const m = strToUint32RGBRegex.exec(s);
@@ -289,8 +417,19 @@ const strToUint32RGB = s => {
   return [true, parseInt(m[1], 16)];
 };
 
-const hexRE = /^\s*#[a-f0-9]{6}\s*$|^\s*#[a-f0-9]{3}\s*$/i;
-const hexNoHashRE = /^\s*[a-f0-9]{6}\s*$/i;
+const strToUint32RGBARegex = /^\s*(?:0x){0,1}([0-9a-z]{1,8})\s*$/i;
+const strToUint32RGBA = s => {
+  const m = strToUint32RGBARegex.exec(s);
+  if (!m) {
+    return [false];
+  }
+  return [true, parseInt(m[1], 16)];
+};
+
+const hex6RE = /^\s*#[a-f0-9]{6}\s*$|^\s*#[a-f0-9]{3}\s*$/i;
+const hexNoHash6RE = /^\s*[a-f0-9]{6}\s*$/i;
+const hex8RE = /^\s*#[a-f0-9]{8}\s*$/i;
+const hexNoHash8RE = /^\s*[a-f0-9]{8}\s*$/i;
 
 // For each format converter
 //
@@ -328,7 +467,17 @@ export const colorFormatConverters = {
       to: fixHex6,
     },
     text: {
-      from: v => [hexRE.test(v), v.trim()],
+      from: v => [hex6RE.test(v), v.trim()],
+      to: v => v,
+    },
+  },
+  'hex8': {
+    color: {
+      from: v => [true, v],
+      to: fixHex8,
+    },
+    text: {
+      from: v => [hex8RE.test(v), v.trim()],
       to: v => v,
     },
   },
@@ -338,7 +487,7 @@ export const colorFormatConverters = {
       to: hex3ToHex6,
     },
     text: {
-      from: v => [hexRE.test(v), hex6ToHex3(v.trim())],
+      from: v => [hex6RE.test(v), hex6ToHex3(v.trim())],
       to: v => v,
     },
   },
@@ -348,7 +497,17 @@ export const colorFormatConverters = {
       to: v => `#${fixHex6(v)}`,
     },
     text: {
-      from: v => [hexNoHashRE.test(v), v.trim()],
+      from: v => [hexNoHash6RE.test(v), v.trim()],
+      to: v => v,
+    },
+  },
+  'hex8-no-hash': {
+    color: {
+      from: v => [true, v.substring(1)],
+      to: v => `#${fixHex8(v)}`,
+    },
+    text: {
+      from: v => [hexNoHash8RE.test(v), v.trim()],
       to: v => v,
     },
   },
@@ -358,7 +517,7 @@ export const colorFormatConverters = {
       to: hex3ToHex6,
     },
     text: {
-      from: v => [hexNoHashRE.test(v), hex6ToHex3(v.trim())],
+      from: v => [hexNoHash6RE.test(v), hex6ToHex3(v.trim())],
       to: v => v,
     },
   },
@@ -372,6 +531,16 @@ export const colorFormatConverters = {
       to: v => `0x${v.toString(16).padStart(6, '0')}`,
     },
   },
+  'uint32-rgba': {
+    color: {
+      from: v => [true, hexToUint32RGBA(v)],
+      to: uint32RGBAToHex,
+    },
+    text: {
+      from: v => strToUint32RGBA(v),
+      to: v => `0x${v.toString(16).padStart(8, '0')}`,
+    },
+  },
   'uint8-rgb': {
     color: {
       from: v => [true, hexToUint8RGB(v)],
@@ -382,6 +551,16 @@ export const colorFormatConverters = {
       to: v => v.join(', '),
     },
   },
+  'uint8-rgba': {
+    color: {
+      from: v => [true, hexToUint8RGBA(v)],
+      to: uint8RGBAToHex,
+    },
+    text: {
+      from: strTo4Ints,
+      to: v => v.join(', '),
+    },
+  },
   'float-rgb': {
     color: {
       from: v => [true, hexToFloatRGB(v)],
@@ -393,6 +572,61 @@ export const colorFormatConverters = {
       to: v => Array.from(v).map(v => f3(v)).join(', '),
     },
   },
+  'float-rgba': {
+    color: {
+      from: v => [true, hexToFloatRGBA(v)],
+      to: floatRGBAToHex,
+    },
+    text: {
+      from: strTo4Floats,
+      // need Array.from because map of Float32Array makes a Float32Array
+      to: v => Array.from(v).map(v => f3(v)).join(', '),
+    },
+  },
+  'float-hsv': {
+    color: {
+      from: v => [true, rgbFloatToHSV01(hexToFloatRGB(v))],
+      to: v => hsv01ToRGBFloat(floatRGBToHex(v)),
+    },
+    text: {
+      from: strTo3Floats,
+      // need Array.from because map of Float32Array makes a Float32Array
+      to: v => Array.from(v).map(v => f3(v)).join(', '),
+    },
+  },
+  'float-hsva': {
+    color: {
+      from: v => [true, rgbaFloatToHSVA01(hexToFloatRGB(v))],
+      to: v => hsva01ToRGBAFloat(floatRGBToHex(v)),
+    },
+    text: {
+      from: strTo4Floats,
+      // need Array.from because map of Float32Array makes a Float32Array
+      to: v => Array.from(v).map(v => f3(v)).join(', '),
+    },
+  },
+  //'float-hsl': {
+  //  color: {
+  //    from: v => [true, rgbFloatToHsl01(hexToFloatRGB(v))],
+  //    to: v => hsl01ToRGBFloat(floatRGBToHex(v)),
+  //  },
+  //  text: {
+  //    from: strTo3Floats,
+  //    // need Array.from because map of Float32Array makes a Float32Array
+  //    to: v => Array.from(v).map(v => f3(v)).join(', '),
+  //  },
+  //},
+  //'float-hsla': {
+  //  color: {
+  //    from: v => [true, hexToFloatRGBA(v)],
+  //    to: floatRGBAToHex,
+  //  },
+  //  text: {
+  //    from: strTo4Floats,
+  //    // need Array.from because map of Float32Array makes a Float32Array
+  //    to: v => Array.from(v).map(v => f3(v)).join(', '),
+  //  },
+  //},
   'object-rgb': {
     color: {
       from: v => [true, hexToObjectRGB(v)],
@@ -403,6 +637,16 @@ export const colorFormatConverters = {
       to: rgbObjectToStr,
     },
   },
+  'object-rgba': {
+    color: {
+      from: v => [true, hexToObjectRGBA(v)],
+      to: objectRGBAToHex,
+    },
+    text: {
+      from: strToRGBAObject,
+      to: rgbaObjectToStr,
+    },
+  },
   'css-rgb': {
     color: {
       from: v => [true, hexToCssRGB(v)],
@@ -413,6 +657,16 @@ export const colorFormatConverters = {
       to: v => strToCssRGB(v)[1],
     },
   },
+  'css-rgba': {
+    color: {
+      from: v => [true, hexToCssRGBA(v)],
+      to: cssRGBAToHex,
+    },
+    text: {
+      from: strToCssRGBA,
+      to: v => strToCssRGBA(v)[1],
+    },
+  },
   'css-hsl': {
     color: {
       from: v => [true, hexToCssHSL(v)],
@@ -423,4 +677,14 @@ export const colorFormatConverters = {
       to: v => strToCssHSL(v)[1],
     },
   },
+  'css-hsla': {
+    color: {
+      from: v => [true, hexToCssHSLA(v)],
+      to: cssHSLAToHex,
+    },
+    text: {
+      from: strToCssHSLA,
+      to: v => strToCssHSLA(v)[1],
+    },
+  },
 };

package/src/libs/elem.js

@@ -29,4 +29,9 @@ export function addElem(tag, parent, attrs = {}, children = []) {
   const elem = createElem(tag, attrs, children);
   parent.appendChild(elem);
   return elem;
-}
+}
+
+let nextId = 0;
+export function getNewId() {
+  return `muigui-id-${nextId++}`;
+}

package/src/libs/graph.js

@@ -0,0 +1,42 @@
+const darkColors = {
+  main: '#ddd',
+};
+const lightColors = {
+  main: '#333',
+};
+
+const darkMatcher = window.matchMedia('(prefers-color-scheme: dark)');
+
+let colors;
+let isDarkMode;
+
+function update() {
+  isDarkMode = darkMatcher.matches;
+  colors = isDarkMode ? darkColors : lightColors;
+}
+darkMatcher.addEventListener('change', update);
+update();
+
+export function graph(canvas, data, {
+    min = -1,
+    max = 1,
+    interval = 16,
+    color,
+  }) {
+  const ctx = canvas.getContext('2d');
+
+  function render() {
+    const {width, height} = canvas;
+    ctx.clearRect(0, 0, width, height);
+    ctx.beginPath();
+    const range = max - min;
+    for (let i = 0; i < data.length; ++i) {
+      const x = i * width / data.length;
+      const y = (data[i] - min) * height / range;
+      ctx.lineTo(x, y);
+    }
+    ctx.strokeStyle = color || colors.main;
+    ctx.stroke();
+  }
+  setInterval(render, interval);
+}

package/src/libs/keyboard.js

@@ -10,7 +10,7 @@ const keyDirections = {
 
 // This probably needs to be global
 export function addKeyboardEvents(elem, {onDown = noop, onUp = noop}) {
-  const keyDown = function(event) {
+  const keyDown = function (event) {
     const mult = event.shiftKey ? 10 : 1;
     const [dx, dy] = (keyDirections[event.key] || [0, 0]).map(v => v * mult);
     const fn = event.type === 'keydown' ? onDown : onUp;
@@ -25,7 +25,7 @@ export function addKeyboardEvents(elem, {onDown = noop, onUp = noop}) {
   elem.addEventListener('keydown', keyDown);
   elem.addEventListener('keyup', keyDown);
 
-  return function() {
+  return function () {
     elem.removeEventListener('keydown', keyDown);
     elem.removeEventListener('keyup', keyDown);
   };

package/src/libs/monitor.js

@@ -0,0 +1,5 @@
+export function monitor(label, object, property, {interval = 200} = {}) {
+  setInterval(() => {
+    label.text(JSON.stringify(object[property], null, 2));
+  }, interval);
+}

package/src/libs/touch.js

@@ -17,7 +17,7 @@ export function computeRelativePosition(elem, event, start) {
 
 export function addTouchEvents(elem, {onDown = noop, onMove = noop, onUp = noop}) {
   let start;
-  const pointerMove = function(event) {
+  const pointerMove = function (event) {
     const e = {
       type: 'move',
       ...computeRelativePosition(elem, event, start),
@@ -25,7 +25,7 @@ export function addTouchEvents(elem, {onDown = noop, onMove = noop, onUp = noop}
     onMove(e);
   };
 
-  const pointerUp = function(event) {
+  const pointerUp = function (event) {
     elem.releasePointerCapture(event.pointerId);
     elem.removeEventListener('pointermove', pointerMove);
     elem.removeEventListener('pointerup', pointerUp);
@@ -35,7 +35,7 @@ export function addTouchEvents(elem, {onDown = noop, onMove = noop, onUp = noop}
     onUp('up');
   };
 
-  const pointerDown = function(event) {
+  const pointerDown = function (event) {
     elem.addEventListener('pointermove', pointerMove);
     elem.addEventListener('pointerup', pointerUp);
     elem.setPointerCapture(event.pointerId);
@@ -50,7 +50,7 @@ export function addTouchEvents(elem, {onDown = noop, onMove = noop, onUp = noop}
 
   elem.addEventListener('pointerdown', pointerDown);
 
-  return function() {
+  return function () {
     elem.removeEventListener('pointerdown', pointerDown);
   };
 }

package/src/libs/wheel.js

@@ -1,6 +1,6 @@
 export function createWheelHelper() {
   let wheelAccum = 0;
-  return function(e, step, wheelScale = 5) {
+  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;

package/src/muigui.js

@@ -61,6 +61,10 @@ export class GUIFolder extends Folder {
   addLabel(text) {
     return this.addController(new Label(text));
   }
+  addButton(name, fn) {
+    const o = {fn};
+    return this.add(o, 'fn').name(name);
+  }
 }
 
 class MuiguiElement extends HTMLElement {
@@ -73,7 +77,7 @@ class MuiguiElement extends HTMLElement {
 customElements.define('muigui-element', MuiguiElement);
 
 const baseStyleSheet = new CSSStyleSheet();
-baseStyleSheet.replaceSync(css.default);
+//baseStyleSheet.replaceSync(css.default);
 const userStyleSheet = new CSSStyleSheet();
 
 function makeStyleSheetUpdater(styleSheet) {
@@ -100,6 +104,11 @@ function makeStyleSheetUpdater(styleSheet) {
 const updateBaseStyle = makeStyleSheetUpdater(baseStyleSheet);
 const updateUserStyle = makeStyleSheetUpdater(userStyleSheet);
 
+function getTheme(name) {
+  const { include, css: cssStr } = css.themes[name];
+  return `${include.map(m => css[m]).join('\n')} : css.default}\n${cssStr || ''}`;
+}
+
 export class GUI extends GUIFolder {
   static converters = converters;
   static mapRange = mapRange;
@@ -131,13 +140,14 @@ export class GUI extends GUIFolder {
     }
     if (parent) {
       const muiguiElement = createElem('muigui-element');
-      muiguiElement.shadowRoot.adoptedStyleSheets = [baseStyleSheet, userStyleSheet, this.#localStyleSheet];
+      muiguiElement.shadowRoot.adoptedStyleSheets = [this.#localStyleSheet, baseStyleSheet, userStyleSheet];
       muiguiElement.shadow.appendChild(this.domElement);
       parent.appendChild(muiguiElement);
     }
     if (title) {
       this.title(title);
     }
+    this.#localStyleSheet.replaceSync(css.default);
     this.domElement.classList.add('muigui', 'muigui-colors');
   }
   setStyle(css) {
@@ -155,8 +165,11 @@ export class GUI extends GUIFolder {
   static getUserStyleSheet() {
     return userStyleSheet;
   }
+  setTheme(name) {
+    this.setStyle(getTheme(name));
+  }
   static setTheme(name) {
-    GUI.setBaseStyles(`${css.default}\n${css.themes[name] || ''}`);
+    GUI.setBaseStyles(getTheme(name));
   }
 }