@3dsource/utils 0.0.1

package/src/lib/helpers/BatchLoader.ts

@@ -0,0 +1,243 @@
+import type { LoadArgs, LoadArgsTmp } from '../interfaces';
+import { loadImage } from '../image';
+
+export class BatchLoader {
+  private maximumSlotsNumber = 1;
+  private queue: LoadArgsTmp[] = [];
+  private slots: LoadArgsTmp[] = [];
+  private _whenDone!: () => any;
+
+  clear() {
+    this.queue.forEach((item) => {
+      try {
+        if (item.img) {
+          item.img.src = '';
+        }
+      } catch (e) {
+        console.warn(e);
+      }
+
+      try {
+        item.xhr?.abort();
+      } catch (e) {
+        console.warn(e);
+      }
+    });
+
+    this.slots.forEach((item) => {
+      try {
+        if (item.img) {
+          item.img.src = '';
+        }
+      } catch (e) {
+        console.warn(e);
+      }
+
+      try {
+        item.xhr?.abort();
+      } catch (e) {
+        console.warn(e);
+      }
+    });
+    this.slots.length = 0;
+    this.queue.length = 0;
+  }
+
+  /**
+   * new settings
+   * you must pass new settings
+   * @param sett
+   */
+  setSettings(sett: any) {
+    this.maximumSlotsNumber =
+      sett.maximumSlotsNumber !== undefined
+        ? sett.maximumSlotsNumber
+        : this.maximumSlotsNumber;
+  }
+
+  /**
+   * execute with a chosen file
+   * @param id
+   * @param func
+   */
+  withItem(id: string, func: (item: LoadArgs) => any): boolean {
+    let item = this.getById(id);
+    if (!item) {
+      return false;
+    }
+    item = func(item);
+    this.queue.sort(this.sortByOrder);
+    return true;
+  }
+
+  remove(id: string): LoadArgs[] {
+    this.queue = this.queue.filter((arg) => arg.id !== id);
+    return this.queue;
+  }
+
+  /**
+   * executes when all files are downloaded
+   * @param cb
+   */
+  whenDone(cb: any) {
+    this._whenDone = cb;
+  }
+
+  // order {number} lower will execute first, default *100*
+  load(args: LoadArgs[]) {
+    const out: { path: string; self?: any; id: string }[] = args
+      .filter((arg) => !!arg.path)
+      .map((arg) => ({
+        path: arg.path,
+        id: this.add(arg),
+      }));
+
+    this.queue.sort(this.sortByOrder);
+    this.checkSlots();
+
+    return out;
+  }
+
+  /**
+   * operates with one file
+   * @param item
+   * @private
+   */
+  private add(item: LoadArgs): string {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const that = this;
+    const temp: LoadArgsTmp = {
+      id: item.id,
+      resolutionId: null,
+      useXhr: item.useXhr,
+      order: item.order !== undefined ? item.order : 100,
+      fallBack: item.fallBack,
+      path: item.path,
+      onLoadEnd: item.onLoadEnd,
+      onProgress: item.onProgress,
+      onLoadStart: item.onLoadStart,
+      extra: item.extra,
+    };
+
+    let retryCount = 1;
+    if (temp.useXhr) {
+      temp.xhr = this.getXmlHttp();
+      temp.xhr.onloadstart = (data: ProgressEvent) => item.onLoadStart(data);
+      temp.xhr.onprogress = (data: ProgressEvent) => item.onProgress(data);
+      temp.xhr.onreadystatechange = async function (data: any) {
+        if (this.readyState === 1 && this.status === 0) {
+          return;
+        }
+        if (
+          this.readyState === 4 &&
+          (this.status === 404 || this.status === 0)
+        ) {
+          temp.error = true;
+          that.loadEnd(temp);
+          return;
+        }
+        if (this.readyState === 4 && this.status === 200) {
+          const urlCreator = window.URL;
+          const imageUrl = urlCreator.createObjectURL(data.target.response);
+          temp.img = await loadImage(imageUrl);
+          that.loadEnd(temp);
+          return;
+        }
+      };
+    } else {
+      temp.img = new Image();
+      temp.img.crossOrigin = 'anonymous';
+      temp.img.onload = () => {
+        that.loadEnd(temp);
+      };
+      temp.img.onerror = () => {
+        if (temp.fallBack && retryCount-- > 0) {
+          console.warn('Fallback used =>', temp.path, '=>', temp.fallBack);
+          if (temp.img) {
+            temp.img.onload = null;
+            temp.img.src = temp.fallBack;
+          }
+
+          that.loadEnd(temp);
+        } else {
+          temp.error = true;
+          that.loadEnd(temp);
+        }
+      };
+    }
+    this.queue.push(temp);
+    return temp.id as string;
+  }
+
+  private sortByOrder(a: LoadArgs, b: LoadArgs): number {
+    return a.order > b.order ? 1 : a.order < b.order ? -1 : 0;
+  }
+
+  private loadEnd(item: LoadArgs) {
+    if (item.onLoadEnd !== undefined) {
+      for (let i = 0, len = this.slots.length; i < len; i += 1) {
+        if (this.slots[i].id === item.id) {
+          this.slots.splice(i, 1);
+          break;
+        }
+      }
+      item.onLoadEnd(item);
+    }
+    this.checkSlots();
+  }
+
+  private checkSlots() {
+    while (
+      (this.slots.length < this.maximumSlotsNumber ||
+        this.maximumSlotsNumber === -1) &&
+      this.queue.length
+    ) {
+      this.slots.push(this.queue.shift() as LoadArgsTmp);
+      const slot: LoadArgsTmp = this.slots[
+        this.slots.length - 1
+      ] as LoadArgsTmp;
+      if (slot.useXhr) {
+        slot.xhr?.open('GET', slot.path, true);
+        slot.xhr?.send(null);
+      } else {
+        if (slot.img) {
+          slot.img.src = slot.path;
+        }
+      }
+    }
+
+    if (
+      this.slots.length === 0 &&
+      this.queue.length === 0 &&
+      this._whenDone !== undefined
+    ) {
+      this._whenDone();
+    }
+  }
+
+  /**
+   * get Item By id for interaction with files in this.queue
+   * @param id
+   * @private
+   */
+  private getById(id: string): LoadArgs | null {
+    for (let i = 0, len = this.queue.length; i < len; i += 1) {
+      if (this.queue[i].id === id) {
+        return this.queue[i];
+      }
+    }
+    return null;
+  }
+
+  private getXmlHttp(): XMLHttpRequest {
+    let xhr = null;
+    try {
+      xhr = new XMLHttpRequest();
+      xhr.responseType = 'blob';
+    } catch (e) {
+      console.warn(e);
+    }
+
+    return xhr as any;
+  }
+}

package/src/lib/helpers/KeyboardNumericCode.ts

@@ -0,0 +1,118 @@
+const KeyboardNumericCode = {
+  Backspace: 8,
+  Tab: 9,
+  Numpad5: 12,
+  NumpadEnter: 13,
+  ShiftRight: 16,
+  ControlRight: 17,
+  ControlLeft: 17,
+  AltRight: 18,
+  Escape: 27,
+  Space: 32,
+  Numpad9: 33,
+  Numpad3: 34,
+  Numpad1: 35,
+  Numpad7: 36,
+  Numpad4: 37,
+  Numpad8: 38,
+  Numpad6: 39,
+  Numpad2: 40,
+  Numpad0: 45,
+  NumpadDecimal: 46,
+  Digit0: 48,
+  Digit1: 49,
+  Digit2: 50,
+  Digit3: 51,
+  Digit4: 52,
+  Digit5: 53,
+  Digit6: 54,
+  Digit7: 55,
+  Digit8: 56,
+  Digit9: 57,
+  KeyA: 65,
+  KeyB: 66,
+  KeyC: 67,
+  KeyD: 68,
+  KeyE: 69,
+  KeyF: 70,
+  KeyG: 71,
+  KeyH: 72,
+  KeyI: 73,
+  KeyJ: 74,
+  KeyK: 75,
+  KeyL: 76,
+  KeyM: 77,
+  KeyN: 78,
+  KeyO: 79,
+  KeyP: 80,
+  KeyQ: 81,
+  KeyR: 82,
+  KeyS: 83,
+  KeyT: 84,
+  KeyU: 85,
+  KeyV: 86,
+  KeyW: 87,
+  KeyX: 88,
+  KeyY: 89,
+  KeyZ: 90,
+  MetaLeft: 91,
+  ContextMenu: 93,
+  NumpadMultiply: 106,
+  NumpadAdd: 107,
+  NumpadSubtract: 109,
+  NumpadDivide: 111,
+  F1: 112,
+  F2: 113,
+  F3: 114,
+  F4: 115,
+  F5: 116,
+  F6: 117,
+  F7: 118,
+  F8: 119,
+  F9: 120,
+  F10: 121,
+  F11: 122,
+  F12: 123,
+  NumLock: 144,
+  ScrollLock: 145,
+  Semicolon: 186,
+  Equal: 187,
+  Comma: 188,
+  Minus: 189,
+  Period: 190,
+  Slash: 191,
+  Backquote: 192,
+  BracketLeft: 219,
+  Backslash: 220,
+  BracketRight: 221,
+  Quote: 222,
+  IntlBackslash: 226,
+  ArrowUp: 38,
+  ArrowDown: 40,
+  ArrowLeft: 37,
+  ArrowRight: 39,
+} as const;
+
+type IKeyName = keyof typeof KeyboardNumericCode;
+type IKeyCode = (typeof KeyboardNumericCode)[IKeyName];
+
+type InvertedKeyMapType = {
+  [K in IKeyName as (typeof KeyboardNumericCode)[K]]: K;
+};
+const InvertedKeyMapValues = {} as { [K in IKeyCode]: IKeyName[K] };
+
+//For use for InvertedKeyMap[32] will return 'Space' and so on
+const InvertedKeyMap = InvertedKeyMapValues as InvertedKeyMapType;
+
+const KeyboardStringCode = {} as { [K in IKeyName]: K };
+
+Object.entries(KeyboardNumericCode).forEach(
+  // @ts-expect-error @typescript-eslint/ban-ts-comment
+  ([key, value]: [IKeyName, IKeyCode]) => {
+    InvertedKeyMapValues[value] = key;
+    // @ts-expect-error @typescript-eslint/ban-ts-comment
+    KeyboardStringCode[key] = key;
+  },
+);
+export type { IKeyName, IKeyCode };
+export { KeyboardStringCode, InvertedKeyMap, KeyboardNumericCode };

package/src/lib/helpers/index.ts

@@ -0,0 +1,6 @@
+export * from './interfaces';
+export * from './BatchLoader';
+export * from './KeyboardNumericCode';
+export * from './serialize';
+export * from './sleep';
+export * from './trimLastSlashFromUrl';

package/src/lib/helpers/serialize.ts

@@ -0,0 +1,11 @@
+export function serialize(obj: any): string {
+  const str = [];
+
+  for (const p in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, p)) {
+      str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p]));
+    }
+  }
+
+  return str.join('&');
+}

package/src/lib/helpers/sleep.ts

@@ -0,0 +1,3 @@
+export function sleep(time: number) {
+  return new Promise((r) => setTimeout(r, time));
+}

package/src/lib/helpers/test/sleep.spec.ts

@@ -0,0 +1,11 @@
+import { sleep } from '@shared/utils/helpers/sleep';
+
+describe('sleep', () => {
+  it('should wait 100 msec', async () => {
+    const time = new Date().getTime();
+    await sleep(100);
+    const diff = (new Date().getTime() - time) / 100;
+
+    expect(diff).toBeCloseTo(1.01, 1);
+  });
+});

package/src/lib/helpers/trimLastSlashFromUrl.ts

@@ -0,0 +1,9 @@
+export function trimLastSlashFromUrl(baseUrl: string) {
+  if (!baseUrl) {
+    return null;
+  } else if (baseUrl[baseUrl.length - 1] === '/') {
+    return baseUrl.substring(0, baseUrl.length - 1);
+  }
+
+  return;
+}

package/src/lib/image/SaveImage.ts

@@ -0,0 +1,65 @@
+import { getSnapshot } from './getSnapshot';
+import type { ImageOutputValues } from '../helpers';
+
+/**
+ * USE DownloadImage instead!
+ * @deprecated use DownloadImage instead!
+ * @param imageSource
+ * @param name
+ * @param width
+ * @param format
+ */
+function SaveImage(
+  imageSource:
+    | HTMLImageElement
+    | HTMLCanvasElement
+    | HTMLVideoElement
+    | ImageBitmap
+    | string,
+  name: string,
+  width?: number,
+  format?: string | ImageOutputValues,
+): any {
+  let out;
+  const image: any = imageSource;
+
+  if (typeof image !== 'string') {
+    out = getSnapshot(image, width, format as ImageOutputValues);
+  } else {
+    out = image;
+  }
+
+  if ((navigator as any).msSaveBlob) {
+    // IE10+
+    try {
+      const blob = image.msToBlob();
+      return (navigator as any).msSaveBlob(blob, name);
+    } catch (e) {
+      console.warn(e);
+    }
+  } else {
+    const uri = out;
+    const link = document.createElement('a');
+    link.download = name;
+    link.href = uri as string;
+
+    document.body.appendChild(link);
+    if (link.click) {
+      link.click();
+    } else {
+      const event = document.createEvent('MouseEvents');
+      (event as any).initMouseEvent('click', true, true, window);
+      link.dispatchEvent(event);
+    }
+    document.body.removeChild(link);
+  }
+}
+
+/**
+ * @param imageSource
+ * @param string name
+ * @param number width
+ * @param string format
+ */
+const DownloadImage = SaveImage;
+export { SaveImage, DownloadImage };

package/src/lib/image/getCanvasCached.ts

@@ -0,0 +1,16 @@
+const canvasCacheObj: any = {};
+
+export function getCanvasCached(id: string): {
+  canvas: HTMLCanvasElement;
+  ctx: CanvasRenderingContext2D;
+} {
+  if (!canvasCacheObj[id]) {
+    const canvas = document.createElement('canvas');
+    canvasCacheObj[id] = {
+      canvas,
+      ctx: canvas.getContext('2d'),
+    };
+  }
+
+  return canvasCacheObj[id];
+}

package/src/lib/image/getSnapshot.ts

@@ -0,0 +1,99 @@
+import { fitIntoRectangle } from '../geom';
+import type { ImageOutputValues } from '../helpers';
+
+function getSnapshot2(
+  imageElement:
+    | HTMLImageElement
+    | HTMLCanvasElement
+    | HTMLVideoElement
+    | ImageBitmap,
+  maxWidth = 1024,
+  output: ImageOutputValues = 'image/png',
+  quality = 0.9,
+): HTMLCanvasElement | string {
+  const drawableImage = imageElement as any;
+  const canvasHelper: HTMLCanvasElement = document.createElement('canvas');
+  const drawCTX: CanvasRenderingContext2D = canvasHelper.getContext(
+    '2d',
+  ) as CanvasRenderingContext2D;
+
+  const prop = fitIntoRectangle(
+    {
+      x: 0,
+      y: 0,
+      w: drawableImage.naturalWidth || drawableImage.width,
+      h: drawableImage.naturalHeight || drawableImage.height,
+    },
+    {
+      x: 0,
+      y: 0,
+      w: maxWidth,
+      h: drawableImage.naturalHeight || drawableImage.height,
+    },
+  );
+
+  const width = prop.w;
+  const height = prop.h;
+  canvasHelper.width = width;
+  canvasHelper.height = height;
+
+  drawCTX.save();
+  drawCTX.clearRect(0, 0, width, height);
+  drawCTX.drawImage(drawableImage, 0, 0, width, height);
+  drawCTX.restore();
+
+  if (output === 'canvas') {
+    return canvasHelper;
+  }
+
+  return canvasHelper.toDataURL(output, quality);
+}
+
+export function getSnapshot(
+  imageElement:
+    | HTMLImageElement
+    | HTMLCanvasElement
+    | HTMLVideoElement
+    | ImageBitmap,
+  maxWidth = 1024,
+  output: ImageOutputValues = 'image/png',
+  quality = 0.9,
+): HTMLCanvasElement | string {
+  const drawableImage = imageElement as any;
+  const canvasHelper: HTMLCanvasElement = document.createElement('canvas');
+  const drawCTX: CanvasRenderingContext2D = canvasHelper.getContext(
+    '2d',
+  ) as CanvasRenderingContext2D;
+
+  const prop = fitIntoRectangle(
+    {
+      x: 0,
+      y: 0,
+      w: drawableImage.naturalWidth || drawableImage.width,
+      h: drawableImage.naturalHeight || drawableImage.height,
+    },
+    {
+      x: 0,
+      y: 0,
+      w: (drawableImage.naturalWidth || drawableImage.width) / 2,
+      h: drawableImage.naturalHeight || drawableImage.height,
+    },
+  );
+
+  const width = prop.w;
+  const height = prop.h;
+  canvasHelper.width = width;
+  canvasHelper.height = height;
+
+  drawCTX.save();
+  drawCTX.clearRect(0, 0, width, height);
+  drawCTX.drawImage(drawableImage, 0, 0, width, height);
+
+  drawCTX.restore();
+
+  if (width > maxWidth * 2) {
+    return getSnapshot(canvasHelper, maxWidth, output, quality);
+  }
+
+  return getSnapshot2(drawableImage, maxWidth, output, quality);
+}

package/src/lib/image/index.ts

@@ -0,0 +1,4 @@
+export * from './getCanvasCached';
+export * from './getSnapshot';
+export * from './loadImage';
+export * from './SaveImage';

package/src/lib/image/loadImage.ts

@@ -0,0 +1,13 @@
+export function loadImage(url: string): Promise<HTMLImageElement> {
+  return new Promise((resolve: any, reject) => {
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = () => {
+      setTimeout(() => resolve(img), 1);
+    };
+    img.onerror = () => {
+      setTimeout(() => reject(null), 1);
+    };
+    img.src = url;
+  });
+}

package/src/lib/interfaces/image-output.ts

@@ -0,0 +1,8 @@
+export const ImageOutput = {
+  CANVAS: 'canvas',
+  PNG: 'image/png',
+  WEBP: 'image/webp',
+  JPG: 'image/jpeg',
+} as const;
+
+export type ImageOutputValues = (typeof ImageOutput)[keyof typeof ImageOutput];

package/src/lib/interfaces/index.ts

@@ -0,0 +1,3 @@
+export * from './load-args.interface';
+export * from './load-args-tmp.interface';
+export * from './image-output';

package/src/lib/interfaces/load-args-tmp.interface.ts

@@ -0,0 +1,5 @@
+import type { LoadArgs } from './load-args.interface';
+
+export interface LoadArgsTmp extends LoadArgs {
+  xhr?: XMLHttpRequest;
+}

package/src/lib/interfaces/load-args.interface.ts

@@ -0,0 +1,15 @@
+export interface LoadArgs {
+  order: number;
+  extra: any;
+  item?: HTMLImageElement;
+  useXhr?: boolean;
+  path: string;
+  onLoadEnd: (data: LoadArgs) => void;
+  onLoadStart: (data: ProgressEvent) => void;
+  onProgress: (data: ProgressEvent) => void;
+  id?: string;
+  img?: HTMLImageElement;
+  error?: boolean;
+  fallBack?: string;
+  resolutionId: number | string | null;
+}

package/src/lib/math/baseSortedIndex.ts

@@ -0,0 +1,43 @@
+/**
+ * Calculates the index at which the `value` should be inserted into the `array` to maintain its
+ * sorted order. This function performs a binary search with a complexity of O(log n), making it
+ * efficient for large datasets. It assumes that the input array is sorted in ascending order and
+ * contains comparable elements.
+ *
+ * Note: The function is designed to handle arrays with lengths up to a maximum of `HALF_MAX_ARRAY_LENGTH`
+ * to ensure the search operation remains within JavaScript's maximum array index limit.
+ *
+ * @param {any[]} array The sorted array into which the value should be inserted. The array elements
+ *                      should be comparable with the `value` using less-than and greater-than operations.
+ * @param {number} value The value to insert into the array. This function assumes that `array` is sorted
+ *                       in ascending order and will find the correct position for `value` accordingly.
+ * @returns {number} The index at which the `value` should be inserted into `array` to maintain its sorted order.
+ *                   If the `array` is empty or if `value` is less than or equal to all elements in `array`,
+ *                   returns 0. If `value` is greater than all elements in `array`, returns the length of `array`.
+ * @example
+ * // returns 2
+ * baseSortedIndex([1, 3, 4], 3);
+ *
+ * @example
+ * // returns 1
+ * baseSortedIndex([1, 2, 3], 2);
+ */
+export function baseSortedIndex(array: number[], value: number): number {
+  const MAX_ARRAY_LENGTH = 4294967295;
+  const HALF_MAX_ARRAY_LENGTH = MAX_ARRAY_LENGTH >>> 1;
+  let low = 0;
+  let high = array?.length || low;
+
+  if (high <= HALF_MAX_ARRAY_LENGTH) {
+    while (low < high) {
+      const mid = (low + high) >>> 1;
+      const computed = array[mid];
+      if (computed !== null && computed < value) {
+        low = mid + 1;
+      } else {
+        high = mid;
+      }
+    }
+  }
+  return high;
+}