feat: save and load state of the creator

integration-tests/index.ts

@@ -1,15 +1,30 @@
-
-import initCreator from "../src/index"
+import initCreator from '../src/index'
+// import SampleImg from './image-sample.png'
 
 let new_asset_id = 1000
 
 async function test() {
-  const canvas = document.querySelector<HTMLCanvasElement>("canvas")!
-  const creator = await initCreator(canvas)
+  const canvas = document.querySelector<HTMLCanvasElement>('canvas')!
+  const creator = await initCreator(
+    canvas,
+    [
+      // {
+      //   id: 1000,
+      //   points: [
+      //     { x: 84.5, y: 71.5, u: 0, v: 0 },
+      //     { x: 688.5, y: 71.5, u: 1, v: 0 },
+      //     { x: 688.5, y: 675.5, u: 1, v: 1 },
+      //     { x: 84.5, y: 675.5, u: 0, v: 1 },
+      //   ],
+      //   url: SampleImg,
+      // },
+    ],
+    console.log
+  )
 
   const fileInput = document.querySelector<HTMLInputElement>('input')!
   fileInput.addEventListener('change', (event) => {
-    const { files } = (event.target as HTMLInputElement)
+    const { files } = event.target as HTMLInputElement
     if (!files) return
 
     const img = new Image()

src/WebGPU/pointer.ts

@@ -1,23 +1,25 @@
-import { on_pointer_move, on_pointer_click, on_pointer_down, on_pointer_up } from "../logic/index.zig"
+import {
+  on_pointer_move,
+  on_pointer_click,
+  on_pointer_down,
+  on_pointer_up,
+} from '../logic/index.zig'
 
 export const pointer = { x: 0, y: 0 }
 
-
 export default function initMouseController(canvas: HTMLCanvasElement) {
   pointer.x = 0
   pointer.y = 0
 
+  function updatePointer(e: MouseEvent) {
+    const rect = canvas.getBoundingClientRect()
+    pointer.x = e.clientX - rect.left
+    pointer.y = e.clientY - rect.top
+  }
 
-function updatePointer(e: MouseEvent) {
-  const rect = canvas.getBoundingClientRect()
-  pointer.x = e.clientX - rect.left
-  pointer.y = e.clientY - rect.top
-}
+  canvas.addEventListener('mouseleave', () => {})
 
-  canvas.addEventListener('mouseleave', () => {
-  })
-
-  canvas.addEventListener('mousemove', e => {
+  canvas.addEventListener('mousemove', (e) => {
     updatePointer(e)
     on_pointer_move(pointer.x, pointer.y)
   })
@@ -34,7 +36,7 @@ function updatePointer(e: MouseEvent) {
     on_pointer_up()
   })
 
-  canvas.addEventListener("wheel", (event) => {
+  canvas.addEventListener('wheel', (event) => {
     console.log(event.deltaY)
   })
-}
+}

src/index.ts

@@ -3,16 +3,34 @@ import getDevice from 'WebGPU/getDevice'
 import initPrograms from 'WebGPU/programs/initPrograms'
 import runCreator from 'run'
 import { createTextureFromSource } from 'WebGPU/getTexture'
-import clamp from 'utils/clamp'
-import { init_state, add_texture, ASSET_ID_TRESHOLD } from './logic/index.zig'
+import {
+  init_state,
+  add_texture,
+  connectOnAssetUpdateCallback,
+  ASSET_ID_TRESHOLD,
+} from './logic/index.zig'
 import initMouseController from 'WebGPU/pointer'
+import getDefaultPoints from 'utils/getDefaultPoints'
+
+export type SerializedAsset = Omit<Texture, 'texture_id'> & {
+  url: string
+}
 
 export interface CreatorAPI {
-  addImage: (id: number, img: HTMLImageElement) => void
+  addImage: (id: number, img: HTMLImageElement, points?: PointUV[]) => void
   destroy: VoidFunction
 }
 
-export default async function initCreator(canvas: HTMLCanvasElement): Promise<CreatorAPI> {
+export interface TextureSource {
+  url: string
+  texture: GPUTexture
+}
+
+export default async function initCreator(
+  canvas: HTMLCanvasElement,
+  assets: SerializedAsset[],
+  onAssetsUpdate: (assets: SerializedAsset[]) => void
+): Promise<CreatorAPI> {
   /* setup WebGPU stuff */
   const device = await getDevice()
 
@@ -36,52 +54,48 @@ export default async function initCreator(canvas: HTMLCanvasElement): Promise<Cr
 
   initMouseController(canvas)
 
-  const textures: GPUTexture[] = []
+  const textures: TextureSource[] = []
   runCreator(canvas, context, device, presentationFormat, textures)
+  connectOnAssetUpdateCallback((serializedData: Texture[]) => {
+    const serializedAssetsTextureUrl = [...serializedData].map<SerializedAsset>((asset) => ({
+      id: asset.id,
+      points: [...asset.points].map((point) => ({
+        x: point.x,
+        y: point.y,
+        u: point.u,
+        v: point.v,
+      })),
+      url: textures[asset.texture_id].url,
+    }))
+    onAssetsUpdate(serializedAssetsTextureUrl)
+  })
 
-  return {
-    addImage: (id, img) => {
-      if (id < ASSET_ID_TRESHOLD) {
-        throw Error(`ID should be unique and not smaller than ${ASSET_ID_TRESHOLD}.`)
-      }
-      const newTextureIndex = textures.length
-      textures.push(createTextureFromSource(device, img))
-      const scale = getDefaultTextureScale(img, canvas)
-      const scaledWidth = img.width * scale
-      const scaledHeight = img.height * scale
-      const paddingX = (canvas.width - scaledWidth) * 0.5
-      const paddingY = (canvas.height - scaledHeight) * 0.5
+  function addImage(id: number, img: HTMLImageElement, points?: PointUV[]) {
+    if (id < ASSET_ID_TRESHOLD) {
+      throw Error(`ID should be unique and not smaller than ${ASSET_ID_TRESHOLD}.`)
+    }
+    const newTextureIndex = textures.length
+    textures.push({
+      url: img.src,
+      texture: createTextureFromSource(device, img),
+    })
 
-      add_texture(
-        id,
-        [
-          { x: paddingX, y: paddingY, u: 0, v: 0 },
-          { x: paddingX + scaledWidth, y: paddingY, u: 1, v: 0 },
-          { x: paddingX + scaledWidth, y: paddingY + scaledHeight, u: 1, v: 1 },
-          { x: paddingX, y: paddingY + scaledHeight, u: 0, v: 1 },
-        ],
-        newTextureIndex
-      )
-    },
+    add_texture(id, points || getDefaultPoints(img, canvas), newTextureIndex)
+  }
+
+  assets.forEach((asset) => {
+    const img = new Image()
+    img.src = asset.url
+    img.onload = () => {
+      addImage(asset.id, img, asset.points)
+    }
+  })
+
+  return {
+    addImage,
     destroy: () => {
       context.unconfigure()
       device.destroy()
     },
   }
 }
-
-/**
- * Returns visualy pleasant size of texture, to make sure it doesn't overflow canvas but also is not too small to manipulate
- */
-function getDefaultTextureScale(img: HTMLImageElement, canvas: HTMLCanvasElement) {
-  const heightDiff = canvas.height - img.height
-  const widthDiff = canvas.width - img.width
-
-  if (heightDiff < widthDiff) {
-    const height = clamp(img.height, canvas.height * 0.2, canvas.height * 0.8)
-    return height / img.height
-  }
-
-  const width = clamp(img.width, canvas.width * 0.2, canvas.width * 0.8)
-  return width / img.width
-}

src/logic/index.d.ts

@@ -6,8 +6,13 @@ interface PointUV {
 }
 
 type ZigF32Array = { typedArray: Float32Array }
+type Texture = {
+  id: number
+  points: PointUV[]
+  texture_id: number
+}
 
-declare module "*.zig" {
+declare module '*.zig' {
   export const ASSET_ID_TRESHOLD: number
   export const init_state: (width: number, height: number) => void
   export const add_texture: (id: number, points: PointUV[], textre_index: number) => void
@@ -24,6 +29,8 @@ declare module "*.zig" {
     draw_triangle: (vertexData: ZigF32Array) => void
     pick_texture: (vertexData: ZigF32Array, texture_id: number) => void
   }) => void
+  export const connectOnAssetUpdateCallback: (cb: (data: Texture[]) => void) => void
+
   export const canvas_render: VoidFunction
   export const picks_render: VoidFunction
-}
+}

src/logic/index.zig

@@ -18,6 +18,11 @@ pub fn connectWebGPUPrograms(programs: *const WebGpuPrograms) void {
     web_gpu_programs = programs; // orelse WebGpuPrograms{};
 }
 
+var on_asset_update_cb: *const fn ([]Texture) void = undefined;
+pub fn connectOnAssetUpdateCallback(cb: *const fn ([]Texture) void) void {
+    on_asset_update_cb = cb;
+}
+
 pub const ASSET_ID_TRESHOLD: u32 = 1000;
 
 const ActionType = enum {
@@ -78,6 +83,18 @@ pub fn on_pointer_down(x: f32, y: f32) void {
 
 pub fn on_pointer_up() void {
     state.ongoing_action = .none;
+
+    var result = std.heap.page_allocator.alloc(Texture, state.assets.count()) catch unreachable;
+    var iterator = state.assets.iterator();
+    var i: usize = 0;
+    while (iterator.next()) |entry| {
+        result[i] = entry.value_ptr.*;
+        i += 1;
+    }
+
+    if (result.len > 0) {
+        on_asset_update_cb(result);
+    }
 }
 
 pub fn on_pointer_move(x: f32, y: f32) void {

src/run.ts

@@ -3,6 +3,7 @@ import { drawTexture, drawTriangle, pickTexture } from 'WebGPU/programs/initProg
 import getCanvasMatrix from 'getCanvasMatrix'
 import PickManager from 'WebGPU/pick'
 import { canvas_render, picks_render, connectWebGPUPrograms } from 'logic/index.zig'
+import { TextureSource } from '.'
 
 export const transformMatrix = new Float32Array()
 export const MAP_BACKGROUND_SCALE = 1000
@@ -12,7 +13,7 @@ export default function runCreator(
   context: GPUCanvasContext,
   device: GPUDevice,
   presentationFormat: GPUTextureFormat,
-  textures: GPUTexture[]
+  textures: TextureSource[]
 ) {
   const canvasMatrix = getCanvasMatrix(canvas)
   let canvasPass: GPURenderPassEncoder
@@ -22,12 +23,11 @@ export default function runCreator(
   let pickPass: GPURenderPassEncoder
 
   connectWebGPUPrograms({
-    draw_texture: (vertex_data, texture_id) => {
-      drawTexture(canvasPass, canvasMatrix, vertex_data.typedArray, textures[texture_id])
-    },
+    draw_texture: (vertex_data, texture_id) =>
+      drawTexture(canvasPass, canvasMatrix, vertex_data.typedArray, textures[texture_id].texture),
     draw_triangle: (vertex_data) => drawTriangle(canvasPass, canvasMatrix, vertex_data.typedArray),
     pick_texture: (vertex_data, texture_id) =>
-      pickTexture(pickPass, pickMatrix, vertex_data.typedArray, textures[texture_id]),
+      pickTexture(pickPass, pickMatrix, vertex_data.typedArray, textures[texture_id].texture),
   })
 
   function draw(now: DOMHighResTimeStamp) {

src/utils/getDefaultPoints.ts

@@ -0,0 +1,35 @@
+import clamp from 'utils/clamp'
+
+export default function getDefaultPoints(
+  img: HTMLImageElement,
+  canvas: HTMLCanvasElement
+): PointUV[] {
+  const scale = getDefaultTextureScale(img, canvas)
+  const scaledWidth = img.width * scale
+  const scaledHeight = img.height * scale
+  const paddingX = (canvas.width - scaledWidth) * 0.5
+  const paddingY = (canvas.height - scaledHeight) * 0.5
+
+  return [
+    { x: paddingX, y: paddingY, u: 0, v: 0 },
+    { x: paddingX + scaledWidth, y: paddingY, u: 1, v: 0 },
+    { x: paddingX + scaledWidth, y: paddingY + scaledHeight, u: 1, v: 1 },
+    { x: paddingX, y: paddingY + scaledHeight, u: 0, v: 1 },
+  ]
+}
+
+/**
+ * Returns visualy pleasant size of texture, to make sure it doesn't overflow canvas but also is not too small to manipulate
+ */
+function getDefaultTextureScale(img: HTMLImageElement, canvas: HTMLCanvasElement) {
+  const heightDiff = canvas.height - img.height
+  const widthDiff = canvas.width - img.width
+
+  if (heightDiff < widthDiff) {
+    const height = clamp(img.height, canvas.height * 0.2, canvas.height * 0.8)
+    return height / img.height
+  }
+
+  const width = clamp(img.width, canvas.width * 0.2, canvas.width * 0.8)
+  return width / img.width
+}