fix: avoid shape.bounds non-invetrable matrix, fix too early preview generation (#356)

Author: mateuszJS

src/WebGPU/generatePreview.ts src/WebGPU/captureCanvas.tssrc/WebGPU/generatePreview.ts renamed to src/WebGPU/captureCanvas.ts

@@ -2,7 +2,7 @@ import setCamera from 'utils/setCamera'
 import { camera } from '../pointer'
 import Logic from 'logic/index.zig'
 
-export default async function generatePreview(
+export async function captureCanvas(
   device: GPUDevice,
   presentationFormat: GPUTextureFormat,
   creatorCanvas: HTMLCanvasElement,

src/customPrograms.ts

@@ -4,6 +4,7 @@ import { device, presentationFormat } from 'WebGPU/setupDevice'
 import { CustomProgramError } from 'types'
 import drawShapeShaderBase from 'WebGPU/programs/drawShape/base.wgsl'
 import * as Logic from './logic/index.zig'
+import * as PreviewTrigger from './previewTrigger'
 
 interface CustomProgram {
   code: string
@@ -84,6 +85,8 @@ function createProgram(code: string, newId: number): CustomProgram {
     execute: null,
   }
 
+  PreviewTrigger.updateResourcesFlag('program-load-start')
+
   const executeCallback = getDrawShape(
     device,
     presentationFormat,
@@ -105,6 +108,8 @@ function createProgram(code: string, newId: number): CustomProgram {
       } else {
         program.execute = executeCallback
       }
+
+      PreviewTrigger.updateResourcesFlag('program-load-end')
     }
   )
 

src/fonts.ts

@@ -7,6 +7,7 @@ import { Point } from 'types'
 import decompressWoff2 from 'utils/decompressWoff2.mjs'
 import { isStraightHandle } from 'svgToShapes/utils'
 import { STRAIGHT_LINE_HANDLE } from 'svgToShapes/const'
+import * as PreviewTrigger from './previewTrigger'
 
 const DEFAULT_SPACE = 250 // expressed in font units
 const ENTER = 10
@@ -28,6 +29,7 @@ export async function loadFont(fontId: number) {
   fonts.set(fontId, null)
   let fontBuffer: ArrayBuffer | null = null
   try {
+    PreviewTrigger.updateResourcesFlag('font-load-start')
     const url = getFontUrl(fontId)
     const res = await fetch(url)
     fontBuffer = await res.arrayBuffer()
@@ -52,6 +54,8 @@ export async function loadFont(fontId: number) {
     } else {
       console.error('Failed to load font', err)
     }
+  } finally {
+    PreviewTrigger.updateResourcesFlag('font-load-end')
   }
 }
 

src/index.ts

@@ -6,8 +6,7 @@ import * as Logic from './logic/index.zig'
 import initMouseController, { camera } from 'pointer'
 import getDefaultPoints from 'utils/getDefaultPoints'
 import * as Textures from 'textures'
-import throttle from 'utils/throttle'
-import generatePreview from 'WebGPU/generatePreview'
+import { captureCanvas } from 'WebGPU/captureCanvas'
 import * as Typing from 'typing'
 import * as Fonts from 'fonts'
 import { Asset, CreatorAPI, CreatorProps, Id, ZigAsset, ZigProjectSnapshot } from './types'
@@ -19,19 +18,19 @@ import * as Snapshots from 'snapshots/snapshots'
 import toZigAsset from 'snapshots/toZigAsset'
 import { NO_ASSET_ID } from 'consts'
 import { downloadCanvas } from 'utils/downloadCanvas'
+import * as PreviewTrigger from './previewTrigger'
 
 export default async function initCreator({ canvas, ...props }: CreatorProps): Promise<CreatorAPI> {
   const fakeMaxTexSize = 40
 
-  let texturesLoading = 0
   let isMouseEventProcessing = false
   const abortController = new AbortController()
 
   function updateIsProcessingFlag() {
-    props.onIsProcessingFlagUpdate(texturesLoading > 0 || isMouseEventProcessing)
+    // TODO: add back resources loading status and trigger each time reosurces are loaded
+    props.onIsProcessingFlagUpdate(isMouseEventProcessing)
   }
 
-  let isDestroyed = false
   await setupDevice(props.captureError)
   Snapshots.init(props.initialProjectWidth, props.initialProjectHeight)
 
@@ -43,11 +42,7 @@ export default async function initCreator({ canvas, ...props }: CreatorProps): P
     props.isTest
   )
 
-  Textures.init((texLoadings) => {
-    texturesLoading = texLoadings
-    updateIsProcessingFlag()
-    triggerGeneratePreview()
-  })
+  Textures.init()
 
   CustomPrograms.init()
   Fonts.init(props.getFontUrl)
@@ -88,33 +83,11 @@ export default async function initCreator({ canvas, ...props }: CreatorProps): P
     abortController.signal
   )
 
-  const throttledPreviewGenerator = throttle(() => {
-    if (isDestroyed || texturesLoading > 0 || props.isTest || props.disableMinaitures) return
-
-    generatePreview(
-      device,
-      presentationFormat,
-      canvas,
-      Snapshots.lastSnapshot.width,
-      Snapshots.lastSnapshot.height,
-      400,
-      400,
-      capturePreview,
-      props.onPreviewUpdate
-    )
-  }, 1000 * 5)
-
-  const triggerGeneratePreview = () => {
-    if (texturesLoading === 0) {
-      throttledPreviewGenerator()
-    }
-  }
-
   const onAssetUpdate = (snapshot: ZigProjectSnapshot, commit: boolean) => {
     Snapshots.saveSnapshot(snapshot)
     props.onSnapshotUpdate(Snapshots.lastSnapshot, commit)
     if (commit) {
-      triggerGeneratePreview()
+      PreviewTrigger.safeGeneratePreview()
     }
   }
 
@@ -221,6 +194,15 @@ export default async function initCreator({ canvas, ...props }: CreatorProps): P
     props.captureError
   )
 
+  if (!props.isTest && !props.disableMinaitures) {
+    PreviewTrigger.init({
+      canvas,
+      capturePreview,
+      onPreviewUpdate: props.onPreviewUpdate,
+      onResourcesLoad: updateIsProcessingFlag,
+    })
+  }
+
   Fonts.loadFont(0)
 
   const setSnapshot: CreatorAPI['setSnapshot'] = async (
@@ -230,7 +212,7 @@ export default async function initCreator({ canvas, ...props }: CreatorProps): P
     try {
       const assets = snapshot.assets.map<ZigAsset>((asset) => toZigAsset(asset, props.captureError))
       Logic.setSnapshot({ ...snapshot, assets }, produceSnapshot, addHistoryEntry)
-      triggerGeneratePreview()
+      PreviewTrigger.safeGeneratePreview()
     } catch (err) {
       props.captureError(err)
     }
@@ -242,7 +224,7 @@ export default async function initCreator({ canvas, ...props }: CreatorProps): P
     removeAsset: Logic.removeAsset,
     setSnapshot,
     destroy: () => {
-      isDestroyed = true
+      PreviewTrigger.markDeviceDestroyed()
       abortController.abort()
       stopRAF()
       Logic.deinitState()
@@ -266,7 +248,7 @@ export default async function initCreator({ canvas, ...props }: CreatorProps): P
       Logic.setSelectedAssetTypoProps(typoProps, commit)
     },
     download: () => {
-      generatePreview(
+      captureCanvas(
         device,
         presentationFormat,
         canvas,

src/logic/matrix.zig

@@ -94,7 +94,7 @@ pub const Matrix3x3 = struct {
         const H = -(a * f - c * d);
         const I = a * e - b * d;
         const det = a * A + b * B + c * C;
-        if (@abs(det) < 1e-6) @panic("Matrix not invertible");
+        if (@abs(det) < 1e-6) @panic("Matrix not invertable");
         // for example when scale is set to zero, we are unable to "invert" it to know previous value
         const inv_det = 1.0 / det;
         return Matrix3x3{

src/logic/shapes/shapes.zig

@@ -199,8 +199,8 @@ pub const Shape = struct {
         const new_width = box.max_x - box.min_x;
         const new_height = box.max_y - box.min_y;
 
-        if (utils.equalF32(new_width, 0) or utils.equalF32(new_height, 0)) {
-            return; // No valid bounding box
+        if (new_width < 1e-6 or new_height < 1e-6) {
+            return; // No valid bounding box, we gonna get not invertable matrix out of it
         }
 
         // Normalize points to [0,1] range

src/previewTrigger.ts

@@ -0,0 +1,85 @@
+import throttle from 'utils/throttle'
+import { captureCanvas } from 'WebGPU/captureCanvas'
+import * as Snapshots from 'snapshots/snapshots'
+import { device, presentationFormat } from 'WebGPU/setupDevice'
+
+let isDeviceDestroyed = false
+export function markDeviceDestroyed() {
+  isDeviceDestroyed = true
+}
+
+let textures = 0
+let fonts = 0
+let programs = 0
+
+export function updateResourcesFlag(
+  type:
+    | 'font-load-start'
+    | 'font-load-end'
+    | 'texture-load-start'
+    | 'texture-load-end'
+    | 'program-load-start'
+    | 'program-load-end'
+) {
+  switch (type) {
+    case 'font-load-start': {
+      fonts++
+      break
+    }
+    case 'font-load-end': {
+      fonts--
+      break
+    }
+    case 'texture-load-start': {
+      textures++
+      break
+    }
+    case 'texture-load-end': {
+      textures--
+      break
+    }
+    case 'program-load-start': {
+      programs++
+      break
+    }
+    case 'program-load-end': {
+      programs--
+      break
+    }
+  }
+
+  safeGeneratePreview()
+}
+
+let generatePreview: VoidFunction | null = null
+
+export function safeGeneratePreview() {
+  if (textures === 0 && fonts === 0 && programs === 0) {
+    generatePreview?.()
+  }
+}
+
+type Params = {
+  canvas: HTMLCanvasElement
+  capturePreview: (previewCtx: GPUCanvasContext, collectAndCleanup: VoidFunction) => void
+  onPreviewUpdate: (canvas: HTMLCanvasElement) => void
+  onResourcesLoad: VoidFunction
+}
+
+export function init({ canvas, capturePreview, onPreviewUpdate }: Params) {
+  generatePreview = throttle(() => {
+    if (isDeviceDestroyed) return
+
+    captureCanvas(
+      device,
+      presentationFormat,
+      canvas,
+      Snapshots.lastSnapshot.width,
+      Snapshots.lastSnapshot.height,
+      400,
+      400,
+      capturePreview,
+      onPreviewUpdate
+    )
+  }, 1000 * 5)
+}

src/textures.ts

@@ -10,6 +10,7 @@ import { Asset } from 'types'
 import getShapesAssets from 'svgToShapes/getShapesAssets'
 import { device, storageFormat } from 'WebGPU/setupDevice'
 import { delayedDestroy, destroyGpuObjects } from 'WebGPU/programs/initPrograms'
+import * as PreviewTrigger from './previewTrigger'
 
 function getSvgSize(svgRoot: ElementNode, img?: HTMLImageElement) {
   const props = svgRoot.properties
@@ -34,15 +35,11 @@ function extractSizeFromSvgViewbox(viewbox: string) {
 let textures: TextureSource[]
 let textureLoadingPlaceholder: GPUTexture
 let textureErrorPlaceholder: GPUTexture
-let updateProcessing: () => void
-let texturesLoading: number
 
-export function init(_updateProcessing: (loadingTextures: number) => void): void {
+export function init(): void {
   textures = []
   textureLoadingPlaceholder = getLoadingTexture()
   textureErrorPlaceholder = getErrorTexture()
-  texturesLoading = 0
-  updateProcessing = () => _updateProcessing(texturesLoading)
 
   addIcon(0, RotateIcon)
 }
@@ -85,8 +82,7 @@ export function add(
     return textures.indexOf(sameUrl)
   }
 
-  texturesLoading++
-  updateProcessing()
+  PreviewTrigger.updateResourcesFlag('texture-load-start')
 
   const textureId = textures.length
   // we allow duplicates in textures array
@@ -148,8 +144,7 @@ async function resolveTexture(
     // onLoad has to be called, otherwise the Promise(waiting for onLoad)
     // will not resolve and the caller will keep waiting
   } finally {
-    texturesLoading--
-    updateProcessing()
+    PreviewTrigger.updateResourcesFlag('texture-load-end')
   }
 }