toosoon-utils 1.1.0 → 1.3.0

package/src/classes/color-scale.ts

@@ -0,0 +1,181 @@
+import { lerp, triLerp } from '../maths';
+import { hclToRgb, hsbToRgb, hslToRgb, normalizeColor, rgbToHcl, rgbToHsb, rgbToHsl } from '../colors';
+import { ColorRepresentation } from '../types';
+
+export type ColorScaleSettings =
+  | {
+      colorSpace: 'rgb' | 'hsl' | 'hsb';
+    }
+  | {
+      colorSpace: 'hcl';
+      mode?: 'qualitative' | 'sequential' | 'diverging';
+      triangular?: number;
+      powerStrength?: number;
+      hueOffset?: number;
+      chromaOffset?: number;
+      luminanceOffset?: number;
+    };
+
+export const defaultSettings: Required<ColorScaleSettings> = {
+  colorSpace: 'rgb'
+};
+
+/**
+ * Utility class for generating color scales and interpolating between colors
+ *
+ * @exports
+ * @class ColorScale
+ */
+export default class ColorScale {
+  /**
+   * Array of colors composing the color scale
+   */
+  public colors: Array<[number, number, number]> = [];
+
+  /**
+   * @param {ColorRepresentation} input     Input color representation
+   * @param {ColorRepresentation} target    Target color representation
+   * @param {number} [length=5]             Amount of colors composing the color scale
+   * @param {ColorScaleSettings} [settings] Color scale generation settings
+   */
+  constructor(
+    input: ColorRepresentation,
+    target: ColorRepresentation,
+    length: number = 5,
+    settings: ColorScaleSettings = { ...defaultSettings }
+  ) {
+    this.colors = ColorScale.generate(input, target, length, settings);
+  }
+
+  /**
+   * Static method for generating a color scale
+   *
+   * @param {ColorRepresentation} input     Input color representation
+   * @param {ColorRepresentation} target    Target color representation
+   * @param {number} length                 Amount of colors composing the color scale
+   * @param {ColorScaleSettings} [settings] Color scale generation settings
+   * @returns {Array<[number, number, number]>} Color scale colors
+   */
+  static generate(
+    input: ColorRepresentation,
+    target: ColorRepresentation,
+    length: number,
+    settings: ColorScaleSettings = { ...defaultSettings }
+  ): Array<[number, number, number]> {
+    const colors: Array<[number, number, number]> = [];
+
+    const inputColor = normalizeColor(input);
+    const targetColor = normalizeColor(target);
+
+    for (let i = 0; i < length; i++) {
+      const value = i / Math.floor(length);
+      colors.push(ColorScale.interpolate(inputColor, targetColor, value, settings));
+    }
+
+    return colors;
+  }
+
+  /**
+   * Static method for interpolating between colors
+   *
+   * @param {[number,number,number]} inputColor  Input color
+   * @param {[number,number,number]} targetColor Target color
+   * @param {number} value                       Interpolation normalized value
+   * @param {ColorScaleSettings} [settings]      Color scale settings
+   * @returns {[number,number,number]} Interpolated color
+   */
+  static interpolate(
+    inputColor: [number, number, number],
+    targetColor: [number, number, number],
+    value: number,
+    settings: ColorScaleSettings = { ...defaultSettings }
+  ): [number, number, number] {
+    switch (settings.colorSpace) {
+      case 'rgb': {
+        const r = lerp(value, inputColor[0], targetColor[0]);
+        const g = lerp(value, inputColor[1], targetColor[1]);
+        const b = lerp(value, inputColor[2], targetColor[2]);
+        return [r, g, b];
+      }
+      case 'hsl': {
+        const inputHsl = rgbToHsl(inputColor);
+        const targetHsl = rgbToHsl(targetColor);
+        const h = lerp(value, inputHsl[0], targetHsl[0]);
+        const s = lerp(value, inputHsl[1], targetHsl[1]);
+        const l = lerp(value, inputHsl[2], targetHsl[2]);
+        return hslToRgb([h, s, l]);
+      }
+      case 'hsb': {
+        const inputHsb = rgbToHsb(inputColor);
+        const targetHsb = rgbToHsb(targetColor);
+        const h = lerp(value, inputHsb[0], targetHsb[0]);
+        const s = lerp(value, inputHsb[1], targetHsb[1]);
+        const b = lerp(value, inputHsb[2], targetHsb[2]);
+        return hsbToRgb([h, s, b]);
+      }
+      case 'hcl':
+        const inputHcl = rgbToHcl(inputColor);
+        const targetHcl = rgbToHcl(targetColor);
+        const powerValue = Math.pow(value, settings.powerStrength ?? 1);
+
+        const h1 = inputHcl[0];
+        const c1 = inputHcl[1];
+        const l1 = inputHcl[2];
+        const h2 = targetHcl[0] + (settings.hueOffset ?? 0);
+        const c2 = targetHcl[1] + (settings.chromaOffset ?? 0);
+        const l2 = targetHcl[2] + (settings.luminanceOffset ?? 0);
+
+        let h, c, l;
+
+        // HCL color palettes
+        // -> https://colorspace.r-forge.r-project.org/articles/hcl_palettes.html
+        if (settings.mode === 'qualitative') {
+          /**
+           * Qualitative
+           *    Designed for coding categorical information,
+           *    where no particular ordering of categories is available
+           *    and every color should receive the same perceptual weight.
+           *
+           * - Hue:       Linear
+           * - Chroma:    Constant
+           * - Luminance: Constant
+           */
+          h = lerp(value, h1, h2);
+          c = c1;
+          l = l1;
+        } else if (settings.mode === 'sequential') {
+          /**
+           * Sequential
+           *    Designed for coding ordered/numeric information,
+           *    going from high to low (or vice versa).
+           *
+           * - Hue:       Constant | Linear
+           * - Chroma:    Linear (+power) | Triangular (+power)
+           * - Luminance: Linear (+power)
+           */
+          h = lerp(value, h1, h2);
+          c = settings.triangular ? triLerp(powerValue, c1, c2, settings.triangular) : lerp(powerValue, c1, c2);
+          l = lerp(powerValue, l1, l2);
+        } else if (settings.mode === 'diverging') {
+          /**
+           * Diverging
+           *    Designed for coding ordered/numeric information around a central neutral value,
+           *    where colors diverge from neutral to two extremes.
+           *
+           * - Hue:       Constants (x2)
+           * - Chroma:    Linear (+power) | Triangular (+power)
+           * - Luminance: Linear (+power)
+           */
+          h = value < 0.5 ? h1 : value > 0.5 ? h2 : lerp(0.5, h1, h2);
+          c = settings.triangular ? triLerp(powerValue, c1, c2, settings.triangular) : lerp(powerValue, c1, c2);
+          l = lerp(powerValue, l1, l2);
+        } else {
+          h = lerp(value, h1, h2);
+          c = lerp(value, c1, c2);
+          l = lerp(value, l1, l2);
+        }
+
+        return hclToRgb([h, c, l]);
+    }
+  }
+}

package/src/classes/frame-rate.ts

@@ -0,0 +1,49 @@
+import { now } from '../functions';
+
+/**
+ * Utility class for controlling FPS calls
+ *
+ * @exports
+ * @class FrameRate
+ */
+export default class FrameRate {
+  private _fps: number;
+  private interval = 0;
+  private time = 0;
+  private elapsedTime = 0;
+  private lastUpdate = 0;
+
+  /**
+   * @param {number} [fps=30] Frame per second limit
+   */
+  constructor(fps: number = 30) {
+    this._fps = fps;
+    this.fps = fps;
+  }
+
+  /**
+   * Return true if elapsed time since last update is higher than current FPS
+   *
+   * @returns {boolean}
+   */
+  update(): boolean {
+    this.time = now();
+    this.elapsedTime = this.time - this.lastUpdate;
+
+    if (this.elapsedTime < this.interval) {
+      return false;
+    }
+
+    this.lastUpdate = this.time - (this.elapsedTime % this.interval);
+    return true;
+  }
+
+  get fps(): number {
+    return this._fps;
+  }
+
+  set fps(fps: number) {
+    this._fps = fps;
+    this.interval = 1000 / fps;
+  }
+}

package/src/colors.ts

@@ -1,5 +1,23 @@
+import { W3CX11 } from './constants';
 import { toDegrees, toRadians } from './geometry';
 import { clamp } from './maths';
+import { ColorName, ColorRepresentation } from './types';
+
+/**
+ * Normalize a color representation into RGB
+ *
+ * @param {ColorRepresentation} color Color representation
+ * @returns {[number,number,number]} Normalized RGB color
+ */
+export function normalizeColor(color: ColorRepresentation): [number, number, number] {
+  if (typeof color === 'string') {
+    return hexToRgb(W3CX11[color as ColorName] ?? color);
+  } else if (typeof color === 'number') {
+    return hexToRgb(color);
+  } else {
+    return color;
+  }
+}
 
 // ******************************************
 // RGB & Hexadecimal color spaces
@@ -8,7 +26,7 @@ import { clamp } from './maths';
 /**
  * Normalize an hexadecimal string
  *
- * @param  {string} hex Hexadecimal string
+ * @param {string} hex Hexadecimal string
  * @returns {string} Normalized hexadecimal string
  */
 export function normalizeHexString(hex: string): string {
@@ -49,11 +67,11 @@ export function rgbToHex([r, g, b]: [number, number, number]): number {
  * @returns {string} Hexadecimal string
  */
 export function rgbToHexString([r, g, b]: [number, number, number]): string {
-  const red = clamp(Math.round(r * 255), 0, 255);
-  const green = clamp(Math.round(g * 255), 0, 255);
-  const blue = clamp(Math.round(b * 255), 0, 255);
+  r = clamp(Math.round(r * 255), 0, 255);
+  g = clamp(Math.round(g * 255), 0, 255);
+  b = clamp(Math.round(b * 255), 0, 255);
 
-  const result = (blue | (green << 8) | (red << 16) | (1 << 24)).toString(16).slice(1);
+  const result = (b | (g << 8) | (r << 16) | (1 << 24)).toString(16).slice(1);
   return `#${result}`;
 }
 
@@ -72,11 +90,11 @@ export function hexToRgb(hex: number | string): [number, number, number] {
     hex = parseInt(hex, 16);
   }
 
-  const red = ((hex >> 16) & 255) / 255;
-  const green = ((hex >> 8) & 255) / 255;
-  const blue = (hex & 255) / 255;
+  const r = ((hex >> 16) & 255) / 255;
+  const g = ((hex >> 8) & 255) / 255;
+  const b = (hex & 255) / 255;
 
-  return [red, green, blue];
+  return [r, g, b];
 }
 
 /**
@@ -96,14 +114,9 @@ export function lighten(hex: string, amount: number = 0): string {
 
   const value = parseInt(hex, 16);
 
-  let r = (value >> 16) + amount;
-  r = clamp(r, 0, 255);
-
-  let b = ((value >> 8) & 0x00ff) + amount;
-  b = clamp(b, 0, 255);
-
-  let g = (value & 0x0000ff) + amount;
-  g = clamp(g, 0, 255);
+  const r = clamp((value >> 16) + amount, 0, 255);
+  const b = clamp(((value >> 8) & 0x00ff) + amount, 0, 255);
+  const g = clamp((value & 0x0000ff) + amount, 0, 255);
 
   let result: number | string = g | (b << 8) | (r << 16);
   if (r === 0 && g === 0 && b === 0 && amount !== 0) {
@@ -136,8 +149,8 @@ export function darken(hex: string, amount: number = 0): string {
  * @returns {[number, number, number]} Normalized HSL color
  */
 export function normalizeHslString(hsl: string): [number, number, number] {
-  const [hue, saturation, lightness] = hsl.match(/\d+/g)?.map(Number) ?? [0, 0, 0];
-  return [hue, saturation / 100, lightness / 100];
+  const [h, s, l] = hsl.match(/\d+/g)?.map(Number) ?? [0, 0, 0];
+  return [h, s / 100, l / 100];
 }
 
 /**

package/src/constants.ts

@@ -14,159 +14,159 @@ export const QUARTER_PI = Math.PI / 4;
 // X11 colors
 // -> https://www.w3.org/TR/css-color-3/#svg-color
 export const W3CX11 = {
-  aliceblue: '#f0f8ff',
-  antiquewhite: '#faebd7',
-  aqua: '#00ffff',
-  aquamarine: '#7fffd4',
-  azure: '#f0ffff',
-  beige: '#f5f5dc',
-  bisque: '#ffe4c4',
-  black: '#000000',
-  blanchedalmond: '#ffebcd',
-  blue: '#0000ff',
-  blueviolet: '#8a2be2',
-  brown: '#a52a2a',
-  burlywood: '#deb887',
-  cadetblue: '#5f9ea0',
-  chartreuse: '#7fff00',
-  chocolate: '#d2691e',
-  coral: '#ff7f50',
-  cornflower: '#6495ed',
-  cornflowerblue: '#6495ed',
-  cornsilk: '#fff8dc',
-  crimson: '#dc143c',
-  cyan: '#00ffff',
-  darkblue: '#00008b',
-  darkcyan: '#008b8b',
-  darkgoldenrod: '#b8860b',
-  darkgray: '#a9a9a9',
-  darkgreen: '#006400',
-  darkgrey: '#a9a9a9',
-  darkkhaki: '#bdb76b',
-  darkmagenta: '#8b008b',
-  darkolivegreen: '#556b2f',
-  darkorange: '#ff8c00',
-  darkorchid: '#9932cc',
-  darkred: '#8b0000',
-  darksalmon: '#e9967a',
-  darkseagreen: '#8fbc8f',
-  darkslateblue: '#483d8b',
-  darkslategray: '#2f4f4f',
-  darkslategrey: '#2f4f4f',
-  darkturquoise: '#00ced1',
-  darkviolet: '#9400d3',
-  deeppink: '#ff1493',
-  deepskyblue: '#00bfff',
-  dimgray: '#696969',
-  dimgrey: '#696969',
-  dodgerblue: '#1e90ff',
-  firebrick: '#b22222',
-  floralwhite: '#fffaf0',
-  forestgreen: '#228b22',
-  fuchsia: '#ff00ff',
-  gainsboro: '#dcdcdc',
-  ghostwhite: '#f8f8ff',
-  gold: '#ffd700',
-  goldenrod: '#daa520',
-  gray: '#808080',
-  green: '#008000',
-  greenyellow: '#adff2f',
-  grey: '#808080',
-  honeydew: '#f0fff0',
-  hotpink: '#ff69b4',
-  indianred: '#cd5c5c',
-  indigo: '#4b0082',
-  ivory: '#fffff0',
-  khaki: '#f0e68c',
-  laserlemon: '#ffff54',
-  lavender: '#e6e6fa',
-  lavenderblush: '#fff0f5',
-  lawngreen: '#7cfc00',
-  lemonchiffon: '#fffacd',
-  lightblue: '#add8e6',
-  lightcoral: '#f08080',
-  lightcyan: '#e0ffff',
-  lightgoldenrod: '#fafad2',
-  lightgoldenrodyellow: '#fafad2',
-  lightgray: '#d3d3d3',
-  lightgreen: '#90ee90',
-  lightgrey: '#d3d3d3',
-  lightpink: '#ffb6c1',
-  lightsalmon: '#ffa07a',
-  lightseagreen: '#20b2aa',
-  lightskyblue: '#87cefa',
-  lightslategray: '#778899',
-  lightslategrey: '#778899',
-  lightsteelblue: '#b0c4de',
-  lightyellow: '#ffffe0',
-  lime: '#00ff00',
-  limegreen: '#32cd32',
-  linen: '#faf0e6',
-  magenta: '#ff00ff',
-  maroon: '#800000',
-  maroon2: '#7f0000',
-  maroon3: '#b03060',
-  mediumaquamarine: '#66cdaa',
-  mediumblue: '#0000cd',
-  mediumorchid: '#ba55d3',
-  mediumpurple: '#9370db',
-  mediumseagreen: '#3cb371',
-  mediumslateblue: '#7b68ee',
-  mediumspringgreen: '#00fa9a',
-  mediumturquoise: '#48d1cc',
-  mediumvioletred: '#c71585',
-  midnightblue: '#191970',
-  mintcream: '#f5fffa',
-  mistyrose: '#ffe4e1',
-  moccasin: '#ffe4b5',
-  navajowhite: '#ffdead',
-  navy: '#000080',
-  oldlace: '#fdf5e6',
-  olive: '#808000',
-  olivedrab: '#6b8e23',
-  orange: '#ffa500',
-  orangered: '#ff4500',
-  orchid: '#da70d6',
-  palegoldenrod: '#eee8aa',
-  palegreen: '#98fb98',
-  paleturquoise: '#afeeee',
-  palevioletred: '#db7093',
-  papayawhip: '#ffefd5',
-  peachpuff: '#ffdab9',
-  peru: '#cd853f',
-  pink: '#ffc0cb',
-  plum: '#dda0dd',
-  powderblue: '#b0e0e6',
-  purple: '#800080',
-  purple2: '#7f007f',
-  purple3: '#a020f0',
-  rebeccapurple: '#663399',
-  red: '#ff0000',
-  rosybrown: '#bc8f8f',
-  royalblue: '#4169e1',
-  saddlebrown: '#8b4513',
-  salmon: '#fa8072',
-  sandybrown: '#f4a460',
-  seagreen: '#2e8b57',
-  seashell: '#fff5ee',
-  sienna: '#a0522d',
-  silver: '#c0c0c0',
-  skyblue: '#87ceeb',
-  slateblue: '#6a5acd',
-  slategray: '#708090',
-  slategrey: '#708090',
-  snow: '#fffafa',
-  springgreen: '#00ff7f',
-  steelblue: '#4682b4',
-  tan: '#d2b48c',
-  teal: '#008080',
-  thistle: '#d8bfd8',
-  tomato: '#ff6347',
-  turquoise: '#40e0d0',
-  violet: '#ee82ee',
-  wheat: '#f5deb3',
-  white: '#ffffff',
-  whitesmoke: '#f5f5f5',
-  yellow: '#ffff00',
-  yellowgreen: '#9acd32'
+  aliceblue: 0xf0f8ff,
+  antiquewhite: 0xfaebd7,
+  aqua: 0x00ffff,
+  aquamarine: 0x7fffd4,
+  azure: 0xf0ffff,
+  beige: 0xf5f5dc,
+  bisque: 0xffe4c4,
+  black: 0x000000,
+  blanchedalmond: 0xffebcd,
+  blue: 0x0000ff,
+  blueviolet: 0x8a2be2,
+  brown: 0xa52a2a,
+  burlywood: 0xdeb887,
+  cadetblue: 0x5f9ea0,
+  chartreuse: 0x7fff00,
+  chocolate: 0xd2691e,
+  coral: 0xff7f50,
+  cornflower: 0x6495ed,
+  cornflowerblue: 0x6495ed,
+  cornsilk: 0xfff8dc,
+  crimson: 0xdc143c,
+  cyan: 0x00ffff,
+  darkblue: 0x00008b,
+  darkcyan: 0x008b8b,
+  darkgoldenrod: 0xb8860b,
+  darkgray: 0xa9a9a9,
+  darkgreen: 0x006400,
+  darkgrey: 0xa9a9a9,
+  darkkhaki: 0xbdb76b,
+  darkmagenta: 0x8b008b,
+  darkolivegreen: 0x556b2f,
+  darkorange: 0xff8c00,
+  darkorchid: 0x9932cc,
+  darkred: 0x8b0000,
+  darksalmon: 0xe9967a,
+  darkseagreen: 0x8fbc8f,
+  darkslateblue: 0x483d8b,
+  darkslategray: 0x2f4f4f,
+  darkslategrey: 0x2f4f4f,
+  darkturquoise: 0x00ced1,
+  darkviolet: 0x9400d3,
+  deeppink: 0xff1493,
+  deepskyblue: 0x00bfff,
+  dimgray: 0x696969,
+  dimgrey: 0x696969,
+  dodgerblue: 0x1e90ff,
+  firebrick: 0xb22222,
+  floralwhite: 0xfffaf0,
+  forestgreen: 0x228b22,
+  fuchsia: 0xff00ff,
+  gainsboro: 0xdcdcdc,
+  ghostwhite: 0xf8f8ff,
+  gold: 0xffd700,
+  goldenrod: 0xdaa520,
+  gray: 0x808080,
+  green: 0x008000,
+  greenyellow: 0xadff2f,
+  grey: 0x808080,
+  honeydew: 0xf0fff0,
+  hotpink: 0xff69b4,
+  indianred: 0xcd5c5c,
+  indigo: 0x4b0082,
+  ivory: 0xfffff0,
+  khaki: 0xf0e68c,
+  laserlemon: 0xffff54,
+  lavender: 0xe6e6fa,
+  lavenderblush: 0xfff0f5,
+  lawngreen: 0x7cfc00,
+  lemonchiffon: 0xfffacd,
+  lightblue: 0xadd8e6,
+  lightcoral: 0xf08080,
+  lightcyan: 0xe0ffff,
+  lightgoldenrod: 0xfafad2,
+  lightgoldenrodyellow: 0xfafad2,
+  lightgray: 0xd3d3d3,
+  lightgreen: 0x90ee90,
+  lightgrey: 0xd3d3d3,
+  lightpink: 0xffb6c1,
+  lightsalmon: 0xffa07a,
+  lightseagreen: 0x20b2aa,
+  lightskyblue: 0x87cefa,
+  lightslategray: 0x778899,
+  lightslategrey: 0x778899,
+  lightsteelblue: 0xb0c4de,
+  lightyellow: 0xffffe0,
+  lime: 0x00ff00,
+  limegreen: 0x32cd32,
+  linen: 0xfaf0e6,
+  magenta: 0xff00ff,
+  maroon: 0x800000,
+  maroon2: 0x7f0000,
+  maroon3: 0xb03060,
+  mediumaquamarine: 0x66cdaa,
+  mediumblue: 0x0000cd,
+  mediumorchid: 0xba55d3,
+  mediumpurple: 0x9370db,
+  mediumseagreen: 0x3cb371,
+  mediumslateblue: 0x7b68ee,
+  mediumspringgreen: 0x00fa9a,
+  mediumturquoise: 0x48d1cc,
+  mediumvioletred: 0xc71585,
+  midnightblue: 0x191970,
+  mintcream: 0xf5fffa,
+  mistyrose: 0xffe4e1,
+  moccasin: 0xffe4b5,
+  navajowhite: 0xffdead,
+  navy: 0x000080,
+  oldlace: 0xfdf5e6,
+  olive: 0x808000,
+  olivedrab: 0x6b8e23,
+  orange: 0xffa500,
+  orangered: 0xff4500,
+  orchid: 0xda70d6,
+  palegoldenrod: 0xeee8aa,
+  palegreen: 0x98fb98,
+  paleturquoise: 0xafeeee,
+  palevioletred: 0xdb7093,
+  papayawhip: 0xffefd5,
+  peachpuff: 0xffdab9,
+  peru: 0xcd853f,
+  pink: 0xffc0cb,
+  plum: 0xdda0dd,
+  powderblue: 0xb0e0e6,
+  purple: 0x800080,
+  purple2: 0x7f007f,
+  purple3: 0xa020f0,
+  rebeccapurple: 0x663399,
+  red: 0xff0000,
+  rosybrown: 0xbc8f8f,
+  royalblue: 0x4169e1,
+  saddlebrown: 0x8b4513,
+  salmon: 0xfa8072,
+  sandybrown: 0xf4a460,
+  seagreen: 0x2e8b57,
+  seashell: 0xfff5ee,
+  sienna: 0xa0522d,
+  silver: 0xc0c0c0,
+  skyblue: 0x87ceeb,
+  slateblue: 0x6a5acd,
+  slategray: 0x708090,
+  slategrey: 0x708090,
+  snow: 0xfffafa,
+  springgreen: 0x00ff7f,
+  steelblue: 0x4682b4,
+  tan: 0xd2b48c,
+  teal: 0x008080,
+  thistle: 0xd8bfd8,
+  tomato: 0xff6347,
+  turquoise: 0x40e0d0,
+  violet: 0xee82ee,
+  wheat: 0xf5deb3,
+  white: 0xffffff,
+  whitesmoke: 0xf5f5f5,
+  yellow: 0xffff00,
+  yellowgreen: 0x9acd32
 };

package/src/dom.ts

@@ -39,11 +39,11 @@ export function createCanvas(
 /**
  * Inject CSS styles in `document.head`
  *
- * @param {string} cssContent CSS style to inject
+ * @param {string} styles CSS styles to inject
  */
-export function injectStyles(cssContent: string): void {
+export function injectStyles(styles: string): void {
   const $style = document.createElement('style');
-  $style.innerHTML = cssContent;
+  $style.innerHTML = styles;
   const $before = document.querySelector('head link[rel=stylesheet], head style');
   if ($before) document.head.insertBefore($style, $before);
   else document.head.appendChild($style);

package/src/files.ts

@@ -20,7 +20,7 @@ export function download(blob: Blob, filename: string): void {
  * Upload a file from user files
  *
  * @param {Function} onLoad    Callback called once the file is loaded
- * @param {string} [accept=''] Types the file input should accept
+ * @param {string} [accept=''] MIME type the file input should accept
  */
 export function upload(onLoad: (dataUrl: string) => void, accept: string = ''): void {
   const input = document.createElement('input');