feat: track images with git lfs

app/src/lib/helpers/EventEmitter.ts

@@ -0,0 +1,69 @@
+
+import throttle from './throttle';
+
+
+
+type EventMap = Record<string, unknown>;
+type EventKey<T extends EventMap> = string & keyof T;
+type EventReceiver<T> = (params: T, stuff?: Record<string, unknown>) => unknown;
+
+
+export default class EventEmitter<T extends EventMap = { [key: string]: unknown }> {
+  index = 0;
+  public eventMap: T = {} as T;
+  constructor() {
+  }
+
+  private cbs: { [key: string]: ((data?: unknown) => unknown)[] } = {};
+  private cbsOnce: { [key: string]: ((data?: unknown) => unknown)[] } = {};
+
+  /**
+   * Emit an event with optional data to all the listeners
+   * @param {string} event Name of the event to emit
+   * @param data Data to send along
+   */
+  public emit(event: string, data?: unknown) {
+    if (event in this.cbs) {
+      this.cbs[event].forEach((c) => c(data));
+    }
+    if (event in this.cbsOnce) {
+      this.cbsOnce[event].forEach((c) => c(data));
+      delete this.cbsOnce[event];
+    }
+  }
+
+  public on<K extends EventKey<T>>(event: K, cb: EventReceiver<T[K]>, throttleTimer = 0) {
+    if (throttleTimer > 0) cb = throttle(cb, throttleTimer);
+    const cbs = Object.assign(this.cbs, {
+      [event]: [...(this.cbs[event] || []), cb],
+    });
+    this.cbs = cbs;
+
+    // console.log('New EventEmitter ', this.constructor.name);
+    return () => {
+      cbs[event]?.splice(cbs[event].indexOf(cb), 1);
+    };
+  }
+
+  /**
+   * Register a special listener which only gets called once
+   * @param {string} event Name of the event to listen to
+   * @param {function} cb Listener, gets called everytime the event is emitted
+   * @returns {function} Returns a function which removes the listener when called
+   */
+  public once<K extends EventKey<T>>(event: K, cb: EventReceiver<T[K]>): () => void {
+    this.cbsOnce[event] = [...(this.cbsOnce[event] || []), cb];
+    return () => {
+      this.cbsOnce[event].splice(this.cbsOnce[event].indexOf(cb), 1);
+    };
+  }
+
+  public destroyEventEmitter() {
+    Object.keys(this.cbs).forEach((key) => {
+      delete this.cbs[key];
+    });
+    Object.keys(this.cbsOnce).forEach((key) => delete this.cbsOnce[key]);
+    this.cbs = {};
+    this.cbsOnce = {};
+  }
+}

app/src/lib/helpers/index.ts

@@ -0,0 +1,96 @@
+export function snapToGrid(value: number, gridSize: number = 10) {
+  return Math.round(value / gridSize) * gridSize;
+}
+
+export function lerp(a: number, b: number, t: number) {
+  return a + (b - a) * t;
+}
+
+export function animate(duration: number, callback: (progress: number) => void | false) {
+  const start = performance.now();
+  const loop = (time: number) => {
+    const progress = (time - start) / duration;
+    if (progress < 1) {
+      const res = callback(progress);
+      if (res !== false) {
+        requestAnimationFrame(loop);
+      }
+    } else {
+      callback(1);
+    }
+  }
+  requestAnimationFrame(loop);
+}
+
+export function createNodePath({
+  depth = 8,
+  height = 20,
+  y = 50,
+  cornerTop = 0,
+  cornerBottom = 0,
+  leftBump = false,
+  rightBump = false,
+  aspectRatio = 1,
+} = {}) {
+  return `M0,${cornerTop}
+      ${cornerTop
+      ? ` V${cornerTop}
+              Q0,0 ${cornerTop * aspectRatio},0
+              H${100 - cornerTop * aspectRatio}
+              Q100,0  100,${cornerTop}
+            `
+      : ` V0
+              H100
+            `
+    }
+      V${y - height / 2}
+      ${rightBump
+      ? ` C${100 - depth},${y - height / 2} ${100 - depth},${y + height / 2} 100,${y + height / 2}`
+      : ` H100`
+    }
+      ${cornerBottom
+      ? ` V${100 - cornerBottom}
+              Q100,100 ${100 - cornerBottom * aspectRatio},100
+              H${cornerBottom * aspectRatio}
+              Q0,100  0,${100 - cornerBottom}
+            `
+      : `${leftBump ? `V100 H0` : `V100`}`
+    }
+      ${leftBump
+      ? ` V${y + height / 2} C${depth},${y + height / 2} ${depth},${y - height / 2} 0,${y - height / 2}`
+      : ` H0`
+    }
+      Z`.replace(/\s+/g, " ");
+}
+
+export const debounce = (fn: Function, ms = 300) => {
+  let timeoutId: ReturnType<typeof setTimeout>;
+  return function (this: any, ...args: any[]) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn.apply(this, args), ms);
+  };
+};
+
+export const clone: <T>(v: T) => T = "structedClone" in globalThis ? globalThis.structuredClone : (obj) => JSON.parse(JSON.stringify(obj));
+
+export const createLogger = (() => {
+  let maxLength = 5;
+  return (scope: string) => {
+    maxLength = Math.max(maxLength, scope.length);
+    let muted = false;
+    return {
+      log: (...args: any[]) => !muted && console.log(`[%c${scope.padEnd(maxLength, " ")}]:`, "color: #888", ...args),
+      info: (...args: any[]) => !muted && console.info(`[%c${scope.padEnd(maxLength, " ")}]:`, "color: #888", ...args),
+      warn: (...args: any[]) => !muted && console.warn(`[%c${scope.padEnd(maxLength, " ")}]:`, "color: #888", ...args),
+      error: (...args: any[]) => console.error(`[%c${scope.padEnd(maxLength, " ")}]:`, "color: #f88", ...args),
+      mute() {
+        muted = true;
+      },
+      unmute() {
+        muted = false;
+      }
+
+    }
+  }
+})();
+

app/src/lib/helpers/throttle.ts

@@ -0,0 +1,20 @@
+export default <R, A extends any[]>(
+  fn: (...args: A) => R,
+  delay: number
+): ((...args: A) => R) => {
+  let wait = false;
+
+  return (...args: A) => {
+    if (wait) return undefined;
+
+    const val = fn(...args);
+
+    wait = true;
+
+    setTimeout(() => {
+      wait = false;
+    }, delay);
+
+    return val;
+  }
+};