set project size (#130)

* set project size

* improve comment, remove console log

* take correct size from images

* use valtio snapshot data

* increase screenshot threshold

* refactor way to veryfing requests, disable sw log version while running test

* improve opacity check, typo

* update cf tests, typos

Author: mateuszJS

apiTypes.ts

@@ -1,4 +1,9 @@
-export type ApiAsset = Record<string, string | number | null | boolean | ApiAsset[]>
+import type { SerializedAsset } from '@mateuszjs/magic-render'
+
+export type ApiAsset = Omit<
+  SerializedAsset,
+  'id' | 'texture_id' | 'cache_texture_id' | 'sdf_texture_id'
+>
 
 export type ApiProjectMetaData = {
   id: string
@@ -7,10 +12,12 @@ export type ApiProjectMetaData = {
   updatedAt: string
 }
 
-export type ApiProjectAssetsData = {
+export type ApiProjectContent = {
   id: string
   assets: ApiAsset[]
   updatedAt: string
+  width: number
+  height: number
 }
 
 export type ApiUserBasic = {

functions/api/projects/[id]/index.test.ts

@@ -14,6 +14,8 @@ describe('GET /api/projects/[id]', () => {
     expect(await response.json()).toEqual({
       id: '1',
       assets: [],
+      height: 200,
+      width: 100,
       updatedAt: expect.any(String),
     })
   })

functions/api/projects/[id]/index.ts

@@ -7,14 +7,14 @@ export const onRequestGet: Handler<'id'> = withSession(async (ctx, session) => {
   const [project, err] = await withError(async () => {
     const project = await ctx.env.db
       .prepare(
-        `SELECT id, assets, updated_at
+        `SELECT id, assets, updated_at, width, height
           FROM projects
           WHERE id = ? AND owner_id = ?`
       )
       .bind(ctx.params.id, session.userId)
-      .first<Pick<Project.DB, 'id' | 'assets' | 'updated_at'>>()
+      .first<Pick<Project.DB, 'id' | 'assets' | 'updated_at' | 'width' | 'height'>>()
 
-    return Project.sanitizeAssetsData(project)
+    return Project.sanitizeContent(project)
   })
 
   if (err) {

functions/api/projects/index.test.ts

@@ -20,10 +20,11 @@ describe('POST /api/projects', () => {
     expect(response.status).toBe(201)
     const json = await response.json()
     expect(json).toEqual({
-      createdAt: expect.any(String),
       id: '2',
       updatedAt: expect.any(String),
-      name: null,
+      width: 600,
+      height: 400,
+      assets: [],
     })
   })
 

functions/api/projects/index.ts

@@ -23,17 +23,17 @@ export const onRequestPost = withSession(async (ctx, session) => {
       .prepare(
         `INSERT INTO projects (width, height, assets, owner_id)
          VALUES (?, ?, ?, ?)
-         RETURNING id, name, created_at, updated_at`
+         RETURNING id, width, height, assets, updated_at`
       )
       .bind(
         sanitizedChanges.width,
         sanitizedChanges.height,
         sanitizedChanges.assets,
         session.userId
       )
-      .first<Pick<Project.DB, 'id' | 'name' | 'created_at' | 'updated_at'>>()
+      .first<Pick<Project.DB, 'id' | 'width' | 'height' | 'assets' | 'updated_at'>>()
 
-    return Project.sanitizeMetaData(project)
+    return Project.sanitizeContent(project)
   })
 
   if (err) {

functions/types/project.ts

@@ -1,4 +1,4 @@
-import { ApiAsset, ApiProjectAssetsData, ApiProjectMetaData } from '../../apiTypes'
+import { ApiAsset, ApiProjectContent, ApiProjectMetaData } from '../../apiTypes'
 
 export type DB = {
   id: number
@@ -12,29 +12,26 @@ export type DB = {
   assets: string
 }
 
-export function sanitizeAssetsData(
-  data: Pick<DB, 'id' | 'assets' | 'updated_at'> | null
-): ApiProjectAssetsData {
+export function sanitizeContent(
+  data: Pick<DB, 'id' | 'assets' | 'updated_at' | 'width' | 'height'> | null
+): ApiProjectContent {
   if (!data) {
     throw new Error('No data was found.')
   }
 
-  const assets = (() => {
-    try {
-      return JSON.parse(data.assets) as ApiAsset[]
-    } catch (err) {
-      // console.error(err) capture this log in the future
-    }
-  })()
-
-  if (!assets || !Array.isArray(assets)) {
+  let assets: ApiAsset[]
+  try {
+    assets = JSON.parse(data.assets) as ApiAsset[]
+  } catch (err) {
     throw Error('An issue with assets has occurred.')
   }
 
   return {
     id: data.id.toString(),
     assets,
     updatedAt: data.updated_at,
+    width: data.width,
+    height: data.height,
   }
 }
 

global.d.ts

@@ -5,3 +5,12 @@ declare global {
     creatorCanvas: HTMLCanvasElement
   }
 }
+
+declare module 'valtio' {
+  export function useSnapshot<T>(proxyObject: T): T
+  // valtio/useSnapshot returns Readonly types
+  // it's annoying to always pass "Readonly" types around
+  // so we override the type here to return writeable types
+  // but in this project there should never be an object obtained from useSnapshot
+  // that excepts to be mudated
+}

package-lock.json

@@ -19,7 +19,7 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.913.0",
     "@aws-sdk/s3-request-presigner": "^3.913.0",
-    "@mateuszjs/magic-render": "^0.1.0-next.32",
+    "@mateuszjs/magic-render": "^0.1.0-next.37",
     "@supabase/supabase-js": "^2.49.4",
     "@vercel/functions": "^2.0.0",
     "classnames": "^2.5.1",

package.json

@@ -1,15 +1,16 @@
-import type { SerializedOutputAsset, CreatorAPI } from '@mateuszjs/magic-render'
+import type { CreatorAPI, ProjectSnapshot } from '@mateuszjs/magic-render'
 
 let onSelectAssetCallback: (assetId: [number, number, number, number]) => void
-let onUpdateAssetsCallback: (assets: SerializedOutputAsset[]) => void
 let onPreviewUpdateCallback: (canvas: HTMLCanvasElement) => void
 
 /** this mock is created since currently github actions do not support GPU.
  * For WebGPU physical GPU is required, so far there is no way to simulate with CPU */
 export default function initMagicRenderMock(
+  width: number,
+  height: number,
   canvas: HTMLCanvasElement,
   uploadTexture: (url: string, onNewUrl: (newUrl: string) => void) => void,
-  onAssetsUpdate: (assets: SerializedOutputAsset[]) => void,
+  onSnapshotUpdate: (snapshot: ProjectSnapshot) => void,
   onAssetSelect: (assetId: [number, number, number, number]) => void,
   onProcessingUpdate: (inProgress: boolean) => void,
   onPreviewUpdate: (canvas: HTMLCanvasElement) => void,
@@ -24,13 +25,16 @@ export default function initMagicRenderMock(
 
   canvas.setAttribute('data-magic-render-linked', 'true')
   onSelectAssetCallback = onAssetSelect
-  onUpdateAssetsCallback = onAssetsUpdate
   onPreviewUpdateCallback = onPreviewUpdate
 
   return Promise.resolve({
     addImage: jest.fn(),
     removeAsset: jest.fn(),
-    resetAssets: jest.fn(),
+    setSnapshot: jest.fn((snapshot, withSnapshot) => {
+      if (withSnapshot) {
+        onSnapshotUpdate(snapshot)
+      }
+    }),
     setTool: jest.fn((tool) => {
       onUpdateTool(tool)
     }),
@@ -47,10 +51,6 @@ export function __triggerSelectAsset(assetId: [number, number, number, number])
   onSelectAssetCallback(assetId)
 }
 
-export function __triggerUpdateAssets(assets: SerializedOutputAsset[]) {
-  onUpdateAssetsCallback(assets)
-}
-
 export function __triggerPreviewUpdate(canvas: HTMLCanvasElement) {
   onPreviewUpdateCallback(canvas)
 }