toosoon-utils 1.0.0

package/src/constants.ts

@@ -0,0 +1,172 @@
+// *********************
+// Maths
+// *********************
+export const EPSILON = 1e-10;
+export const PI = Math.PI;
+export const TWO_PI = Math.PI * 2;
+export const HALF_PI = Math.PI / 2;
+export const QUARTER_PI = Math.PI / 4;
+
+// *********************
+// Color
+// *********************
+
+// 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'
+};

package/src/dom.ts

@@ -0,0 +1,50 @@
+const DOCUMENT_NODE_TYPE = 9;
+
+/**
+ * Find the closest parent that matches a selector
+ *
+ * @param {Element}          element  Target element
+ * @param {(Element|string)} selector Selector or parent to match
+ * @returns {Element|null}
+ */
+export function closest(element: Element, selector: Element | string): Element | null {
+  let current: Element | null = element;
+  while (current && current.nodeType !== DOCUMENT_NODE_TYPE) {
+    if ((typeof selector === 'string' && current.matches(selector)) || current === selector) {
+      return current;
+    }
+    current = element.parentNode as Element | null;
+  }
+  return current;
+}
+
+/**
+ * Create a canvas and 2d context
+ *
+ * @param {Number} width  Width of the canvas
+ * @param {Number} height Height of the canvas
+ * @returns {{ canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D }}
+ */
+export function createCanvas(
+  width: number,
+  height: number
+): { canvas: HTMLCanvasElement; ctx: CanvasRenderingContext2D } {
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext('2d') ?? new CanvasRenderingContext2D();
+  return { canvas, ctx };
+}
+
+/**
+ * Inject CSS style in `document.head`
+ *
+ * @param {string} cssContent CSS style to inject
+ */
+export function injectStyles(cssContent: string) {
+  const $style = document.createElement('style');
+  $style.innerHTML = cssContent;
+  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

@@ -0,0 +1,42 @@
+type InputChangeEvent = Event & { target: (EventTarget & { files?: FileList }) | null };
+
+/**
+ * Download a Blob object into user files
+ *
+ * @param {Blob} blob       Blob object to download
+ * @param {string} filename Downloaded file name
+ */
+export function download(blob: Blob, filename: string): void {
+  const link = document.createElement('a');
+  link.setAttribute('href', URL.createObjectURL(blob));
+  link.setAttribute('download', filename);
+
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+/**
+ * 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
+ */
+export function upload(onLoad: (dataUrl: string) => void, accept: string = ''): void {
+  const input = document.createElement('input');
+  input.setAttribute('type', 'file');
+  input.setAttribute('accept', accept);
+
+  input.addEventListener('change', (event: InputChangeEvent) => {
+    const file = event.target?.files?.[0];
+    if (file) {
+      const fileReader = new FileReader();
+      fileReader.addEventListener('load', () => onLoad(URL.createObjectURL(file)));
+      fileReader.readAsDataURL(file);
+    }
+  });
+
+  document.body.appendChild(input);
+  input.click();
+  document.body.removeChild(input);
+}

package/src/functions.ts

@@ -0,0 +1,31 @@
+import { Deferred } from './types';
+
+/**
+ * No-op function
+ */
+export const noop: () => void = () => {};
+
+/**
+ * Promise wrapped setTimeout
+ *
+ * @param {number} timeout Time in ms
+ * @returns {Promise}
+ */
+export function wait(timeout: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, timeout));
+}
+
+/**
+ * Deferred promise implementation
+ *
+ * @returns {Deferred}
+ */
+export function defer<T = void>(): Deferred<T> {
+  let resolve!: (value: T | PromiseLike<T>) => void;
+  let reject!: (reason?: unknown) => void;
+  const promise = new Promise<T>((_resolve, _reject) => {
+    resolve = _resolve;
+    reject = _reject;
+  });
+  return { promise, resolve, reject };
+}

package/src/geometry.ts

@@ -0,0 +1,160 @@
+import { PI } from './constants';
+import { Vector3 } from './types';
+
+/**
+ * Convert a radians value into degrees
+ *
+ * @param {number} radians Angle in radians
+ * @returns {number} Angle in degrees
+ */
+export function toDegrees(radians: number): number {
+  return (radians * 180) / PI;
+}
+
+/**
+ * Convert a degrees value into radians
+ *
+ * @param {number} degrees Angle in degrees
+ * @returns {number} Angle in radians
+ */
+export function toRadians(degrees: number): number {
+  return (degrees * PI) / 180;
+}
+
+/**
+ * Calculate the angle from a point to another
+ *
+ * @param  {number} x1 X value of the first point
+ * @param  {number} y1 Y value of the first point
+ * @param  {number} x2 X value of the second point
+ * @param  {number} y2 Y value of the second point
+ * @returns {number} Angle
+ */
+export function angle(x1: number, y1: number, x2: number, y2: number): number {
+  return Math.atan2(y2 - y1, x2 - x1);
+}
+
+/**
+ * Find the closest angle betwween to angles
+ *
+ * @param {number} source Source angle in radians
+ * @param {number} target Target angle in radians
+ * @returns {number} Closest angle
+ */
+export function closestAngle(source: number, target: number): number {
+  const delta = target - source;
+  return delta > PI ? target - 2 * PI : target < -PI ? delta + 2 * PI : target;
+}
+
+/**
+ * Calculate the distance between two points
+ *
+ * @param {number} x1 X coord of the first point
+ * @param {number} y1 Y coord of the first point
+ * @param {number} x2 X coord of the second point
+ * @param {number} y2 Y coord of the second point
+ * @returns {number} Computed distance
+ */
+export function distance(x1: number, y1: number, x2: number, y2: number): number {
+  const dx = x1 - x2;
+  const dy = y1 - y2;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+/**
+ * Calculate the length of the diagonal of a rectangle
+ *
+ * @param {number} width  Width of the rectangle
+ * @param {number} height Height of the rectangle
+ * @returns {number} Diagonal length
+ */
+export function diagonal(width: number, height: number): number {
+  return Math.sqrt(width * width + height * height);
+}
+
+/**
+ * Convert radians to a 3D point on the surface of a unit sphere
+ *
+ * @param  {number} radius  Radius of the sphere
+ * @param  {number} phi     Polar angle from the y (up) axis     : 0 to PI
+ * @param  {number} theta   Equator angle around the y (up) axis : 0 to 2 PI
+ * @param  {Vector3} target Target vector
+ * @returns {Vector3}
+ */
+export function radToSphere(
+  radius: number,
+  phi: number,
+  theta: number,
+  target: Vector3 = { x: 0, y: 0, z: 0 }
+): Vector3 {
+  target.x = radius * Math.sin(phi) * Math.sin(theta);
+  target.y = radius * Math.cos(phi);
+  target.z = radius * Math.sin(phi) * Math.cos(theta);
+  return target;
+}
+
+// *********************
+// Fit
+// *********************
+interface FitInput {
+  width: number;
+  height: number;
+}
+
+interface FitOutput {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  scale: number;
+}
+
+/**
+ * Make a target fit a container
+ *
+ * @param {FitInput} target    Dimension of the target
+ * @param {FitInput} container Dimension of the container
+ * @param {string} mode        Can be 'contain' | 'cover'
+ * @returns {FitOutput}
+ */
+function fit(target: FitInput, container: FitInput, mode: 'contain' | 'cover'): FitOutput {
+  const ratioWidth = container.width / target.width;
+  const ratioHeight = container.height / target.height;
+
+  let scale: number;
+  if (mode === 'contain') {
+    scale = ratioWidth < ratioHeight ? ratioWidth : ratioHeight;
+  } else {
+    scale = ratioWidth > ratioHeight ? ratioWidth : ratioHeight;
+  }
+
+  return {
+    left: (container.width - target.width * scale) >> 1,
+    top: (container.height - target.height * scale) >> 1,
+    width: target.width * scale,
+    height: target.height * scale,
+    scale
+  };
+}
+
+/**
+ * Make a target fit a container (cover mode)
+ *
+ * @param {FitInput} target    Dimension of the target
+ * @param {FitInput} container Dimension of the container
+ * @returns {FitOutput}
+ */
+export function cover(target: FitInput, container: FitInput): FitOutput {
+  return fit(target, container, 'cover');
+}
+
+/**
+ * Make a target fit a container (contain mode)
+ *
+ * @param {FitInput} target    Dimension of the target
+ * @param {FitInput} container Dimension of the container
+ * @returns {FitOutput}
+ */
+export function contain(target: FitInput, container: FitInput): FitOutput {
+  return fit(target, container, 'contain');
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+export * from './colors';
+export * from './dom';
+export * from './files';
+export * from './functions';
+export * from './geometry';
+export * from './maths';
+export * from './now';
+export * from './random';
+export * from './strings';
+
+export * from './constants';
+export * from './types';

package/src/maths.ts

@@ -0,0 +1,230 @@
+/**
+ * Check if a number is even
+ *
+ * @param {number} value Value to check
+ * @returns {boolean} True if the given number is even, false otherwise
+ */
+export function isEven(value: number): boolean {
+  return !(value & 1);
+}
+
+/**
+ * Check if a number is odd
+ *
+ * @param {number} value Value to check
+ * @returns {boolean} True if the given number is odd, false otherwise
+ */
+export function isOdd(value: number): boolean {
+  return !!(value & 1);
+}
+
+/**
+ * Check if a number is a power of 2
+ *
+ * @param {number} value Value to check
+ * @returns {boolean} True if the given number is a power of 2, false otherwise
+ */
+export function isPowerOf2(value: number): boolean {
+  return (value & (value - 1)) === 0;
+}
+
+/**
+ * Find smallest/closest power of 2 that fits a number
+ *
+ * @param {number} value         Incoming value
+ * @param {string} [mode='ceil'] Can be 'floor' | 'ceil' | 'round'
+ * @returns {number} Power of 2
+ */
+export function toPowerOf2(value: number, mode: 'floor' | 'ceil' | 'round' = 'ceil'): number {
+  return Math.pow(2, Math[mode](Math.log(value) / Math.log(2)));
+}
+
+/**
+ * Return the sign (positive or negative) of a number
+ *
+ * @param {number} number Value to check
+ * @returns {number} 1 if the given number is positive, -1 if it is negative, otherwise 0
+ */
+export function sign(number: number): number {
+  if (number > 0) return 1;
+  else if (number < 0) return -1;
+  return 0;
+}
+
+/**
+ * Clamp a value between two bounds
+ *
+ * @param {number} value   Value to clamp
+ * @param {number} [min=0] Minimum boundary
+ * @param {number} [max=1] Maximum boundary
+ * @returns {number} Clamped value
+ */
+export function clamp(value: number, min: number = 0, max: number = 1): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+/**
+ * Linear interpolation between two values (lerping)
+ *
+ * @param {number} value Normalized value to interpolate
+ * @param {number} min   Minimum value
+ * @param {number} max   Maximum value
+ * @returns {number} Lerped value
+ */
+export function lerp(value: number, min: number, max: number): number {
+  return min + (max - min) * value;
+}
+
+/**
+ * Triangular interpolation between two values
+ *
+ * @param {number} value  Normalized value to interpolate
+ * @param {number} min    Minimum value
+ * @param {number} max    Maximum value
+ * @param {number} target Triangle target value
+ * @returns {number} Interpolated value
+ */
+export function triLerp(value: number, min: number, max: number, target: number): number {
+  const x = Math.pow(1 + Math.abs(target - max) / Math.abs(target - min), -1);
+  return value <= x ? min - (min - target) * (value / x) : target - (target - max) * ((value - x) / (1 - x));
+}
+
+/**
+ * Exponential interpolation between two values
+ *
+ * @param {number} value Normalized value to interpolate
+ * @param {number} min   Minimum value
+ * @param {number} max   Maximum value
+ * @returns {number} Interpolated value
+ */
+export function expLerp(value: number, min: number, max: number): number {
+  return Math.pow(min, 1 - value) * Math.pow(max, value);
+}
+
+/**
+ * Normalize a value between two bounds
+ *
+ * @param {number} value Value to normalize
+ * @param {number} min   Minimum boundary
+ * @param {number} max   Maximum boundary
+ * @returns {number} Normalized value
+ */
+export function normalize(value: number, min: number, max: number): number {
+  return (value - min) / (max - min);
+}
+
+/**
+ * Re-map a number from one range to another
+ *
+ * @param {number} value      Value to re-map
+ * @param {number} currentMin Lower bound of the value's current range
+ * @param {number} currentMax Upper bound of the value's current range
+ * @param {number} targetMin  Lower bound of the value's target range
+ * @param {number} targetMax  Upper bound of the value's target range
+ * @returns {number} Re-mapped value
+ */
+export function map(
+  value: number,
+  currentMin: number,
+  currentMax: number,
+  targetMin: number,
+  targetMax: number
+): number {
+  return ((value - currentMin) / (currentMax - currentMin)) * (targetMax - targetMin) + targetMin;
+}
+
+/**
+ * Round a number up to a nearest multiple
+ *
+ * @param {number} value        Value to round
+ * @param {number} [multiple=1] Multiple
+ * @returns {number} Closest multiple
+ */
+export function roundTo(value: number, multiple: number = 1): number {
+  if (multiple === 0) return value;
+  return Math.round(value / multiple) * multiple;
+}
+
+/**
+ * Modulo absolute a value based on a length
+ *
+ * @param {number} value  Value to modulate
+ * @param {number} length Total length
+ * @returns {number} Modulated value
+ */
+export function modAbs(value: number, length: number): number {
+  if (value < 0) {
+    return length + (value % length);
+  }
+  return value % length;
+}
+
+/**
+ * Move back and forth a value between 0 and length, so that it is never larger than length and never smaller than 0
+ *
+ * @param {number} value  Value to modulate
+ * @param {number} length Total length
+ * @returns {number} PingPonged value
+ */
+export function pingPong(value: number, length: number): number {
+  value = modAbs(value, length * 2);
+  return length - Math.abs(value - length);
+}
+
+/**
+ * Smooth a value using cubic Hermite interpolation
+ *
+ * @param {number} value   Value to smooth
+ * @param {number} [min=0] Minimum boundary
+ * @param {number} [max=1] Maximum boundary
+ * @returns {number} Normalized smoothed value
+ */
+export function smoothstep(value: number, min: number = 0, max: number = 1): number {
+  const x = clamp(normalize(value, min, max));
+  return x * x * (3 - 2 * x);
+}
+
+/**
+ * Re-map the [0, 1] interval into [0, 1] parabola, such that corners are remaped to 0 and the center to 1
+ * -> parabola(0) = parabola(1) = 0, and parabola(0.5) = 1
+ *
+ * @param {number} x         Normalized coordinate on X axis
+ * @param {number} [power=1] Parabola power
+ * @returns {number} Normalized re-mapped value
+ */
+export function parabola(x: number, power: number = 1): number {
+  return Math.pow(4 * x * (1 - x), power);
+}
+
+/**
+ * Return the sum of numbers
+ *
+ * @param {number[]} array Array of number
+ * @returns {number} Total sum
+ */
+export function sum(array: number[]): number {
+  return array.reduce((previous, current) => previous + current);
+}
+
+/**
+ * Return the average of numbers
+ *
+ * @param {number[]} array Array of number
+ * @returns {number} Total average
+ */
+export function average(array: number[]): number {
+  return sum(array) / array.length;
+}
+
+/**
+ * Smoothly interpolate a number toward another
+ *
+ * @param {number} value   Value to interpolate
+ * @param {number} target  Destination of the interpolation
+ * @param {number} damping A higher value will make the movement more sudden, and a lower value will make the movement more gradual
+ * @param {number} delta   Delta time (in seconds)
+ * @returns {number} Interpolated number
+ */
+export function damp(value: number, target: number, damping: number, delta: number): number {
+  return lerp(1 - Math.exp(-damping * delta), value, target);
+}