Decouple imageIsCorrectRatio from ImageContext

src/lib/contexts/image.svelte.ts

@@ -41,7 +41,7 @@ export function createImageContext(filesCtx: FilesContext): Readonly<ImageContex
   return setContext(ImageContextToken, ctx)
 }
 
-export function imageIsCorrectRatio(imageCtx: ImageContext): boolean {
-  if (imageCtx.image === null) return true
-  return imageCtx.image.height * DEVICE_WIDTH === imageCtx.image.width * DEVICE_HEIGHT
+export function imageIsCorrectRatio(image: ImageBitmap | null): boolean {
+  if (image === null) return true
+  return image.height * DEVICE_WIDTH === image.width * DEVICE_HEIGHT
 }

src/lib/layouts/edit/controls/ControlsSection.svelte

@@ -20,7 +20,7 @@
   const config = getConversionConfig()
 
   const transformDisabled = $derived(imageCtx.image === null)
-  const imageNonSquare = $derived(!imageIsCorrectRatio(imageCtx))
+  const imageNonSquare = $derived(!imageIsCorrectRatio(imageCtx.image))
 
   function restoreDefaultImageSettings() {
     config.scaleMode = 'fit'

src/lib/layouts/edit/preview/common.svelte.ts

@@ -16,7 +16,7 @@ export function makeAltText(filesCtx: FilesContext, imageCtx: ImageContext, conf
 
   const output = [`${DEVICE_WIDTH}-by-${DEVICE_HEIGHT}-pixels e-paper preview of "${file.name}"`]
 
-  if (!imageIsCorrectRatio(imageCtx)) {
+  if (!imageIsCorrectRatio(imageCtx.image)) {
     if (config.scaleMode === 'fit') output.push('letterboxed')
     else if (config.scaleMode === 'crop') output.push('cropped to fit')
     else if (config.scaleMode === 'distort') output.push('stretched to fit')