Image history first approach

apps/web/src/components/canvasHost.tsx

@@ -1,6 +1,15 @@
+import {
+  ImageUncompressedBufferRect,
+  ImageUncompressedBuffer,
+} from "@/utils/imageData";
 import { Size } from "@/utils/common";
 import { useLayoutEffect, useRef } from "react";
 
+type CanvasHostProps = {
+  currentData: ImageUncompressedBuffer; //the whole image
+  draftDataDiffs: ImageUncompressedBufferRect[]; //image diffs that will override parts of currentData
+};
+
 export const CanvasHost = (props: { size: Size }) => {
   const { size } = props;
   const canvasRef = useRef<HTMLCanvasElement>(null);

apps/web/src/history/index.ts

@@ -0,0 +1,51 @@
+import {
+  ImageCompressedBuffer,
+  ImageUncompressedBuffer,
+  ImageUncompressedBufferRect,
+} from "@/utils/imageData";
+
+export type ImageChange =
+  | {
+      type: "chunk";
+      data: ImageUncompressedBufferRect;
+    }
+  | {
+      type: "full";
+      data: ImageUncompressedBuffer;
+    };
+
+export class ImageHistory {
+  private checkpoints: Record<number, ImageCompressedBuffer> = {};
+
+  init(data?: ImageUncompressedBuffer) {}
+
+  push(change: ImageChange) {
+    //resets stack
+    if (change.type === "chunk") {
+      //store original chunks
+    } else if (change.type === "full") {
+      //compress current and use as checkpoint
+    } else {
+      throw new Error("Invalid change type");
+    }
+  }
+
+  undo() {
+    //pop from stack
+    //apply to current
+  }
+
+  redo() {
+    //pop from stack
+    //apply to current
+  }
+
+  private compress(data: ImageUncompressedBuffer): ImageCompressedBuffer {
+    return {
+      width: data.width,
+      height: data.height,
+      data: data.data,
+    };
+  }
+}
+

apps/web/src/utils/imageData.ts

@@ -0,0 +1,53 @@
+export type ImageUncompressedBuffer = {
+  width: number;
+  height: number;
+  data: Uint8ClampedArray;
+};
+
+export type ImageCompressedBuffer = {
+  width: number;
+  height: number;
+  data: Uint8ClampedArray;
+};
+
+export const pickChunk = (
+  base: ImageUncompressedBuffer,
+  x: number,
+  y: number,
+  width: number,
+  height: number
+): ImageUncompressedBufferRect => {
+  const data = new Uint8ClampedArray(width * height * 4);
+  for (let i = 0; i < height; i++) {
+    const baseOffset = (y + i) * width * 4 + x * 4;
+    const rectOffset = i * width * 4;
+    data.set(
+      base.data.subarray(baseOffset, baseOffset + width * 4),
+      rectOffset
+    );
+  }
+  return { x, y, width, height, data };
+};
+
+export type ImageUncompressedBufferRect = ImageUncompressedBuffer & {
+  x: number;
+  y: number;
+};
+
+export const applyRects = (
+  base: ImageUncompressedBuffer,
+  diffs: ImageUncompressedBufferRect[]
+) => {
+  for (const diff of diffs) {
+    const { x, y, width, height, data } = diff;
+    for (let i = 0; i < height; i++) {
+      const baseOffset = (y + i) * width * 4 + x * 4;
+      const rectOffset = i * width * 4;
+      base.data.set(
+        data.subarray(rectOffset, rectOffset + width * 4),
+        baseOffset
+      );
+    }
+  }
+};
+