muigui 0.0.6 → 0.0.12

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,12 +58,23 @@ const cssRGBToHex = v => {
   const m = cssRGBRegex.exec(v);
   return uint8RGBToHex([m[1], m[2], m[3]].map(v => parseInt(v)));
 };
+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 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 => {
@@ -47,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;
 
@@ -65,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);
@@ -88,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);
@@ -101,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]) {
@@ -118,16 +178,28 @@ 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');
 
 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 +214,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 +227,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';
+          }
         }
       }
   }
@@ -179,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] &&
@@ -214,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) {
@@ -224,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) {
@@ -234,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 => {
@@ -249,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));
@@ -260,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);
@@ -269,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
 //
@@ -308,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,
     },
   },
@@ -318,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,
     },
   },
@@ -328,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,
     },
   },
@@ -338,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,
     },
   },
@@ -352,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)],
@@ -362,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)],
@@ -373,6 +572,17 @@ 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(', '),
+    },
+  },
   'object-rgb': {
     color: {
       from: v => [true, hexToObjectRGB(v)],
@@ -383,6 +593,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)],
@@ -393,6 +613,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)],
@@ -403,4 +633,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/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/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,17 +25,17 @@ 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);
- 
+
     document.body.style.backgroundColor = '';
- 
+
     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/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/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;