fix scaling bug

Author: Raoul Straczowski

src/App.tsx

@@ -10,18 +10,18 @@ import { PreviewPanel } from "./components/Preview/PreviewPanel"
 import { VectorizedImage } from "./components/Preview/VectorizedImage"
 import { useDebouncedSettings } from "./hooks/use-debounced-settings"
 import { useVectorize } from "./hooks/use-vectorize"
-import { useImageData } from "./store/selectors"
+import { useScaledImageData } from "./store/selectors"
 
 export const App = () => {
-  const imageData = useImageData()
+  const scaledImageData = useScaledImageData()
   const debouncedSettings = useDebouncedSettings(250)
   const { vectorize } = useVectorize()
 
   useEffect(() => {
-    if (imageData) {
+    if (scaledImageData) {
       vectorize()
     }
-  }, [imageData, debouncedSettings, vectorize])
+  }, [scaledImageData, debouncedSettings, vectorize])
 
   return (
     <div className="min-h-screen bg-background font-sans text-text">

src/components/Export/ExportButtonGCode.tsx

@@ -1,25 +1,26 @@
 import { generateGcode } from "../../core/gcode/generate-gcode"
-import { useGcodeSettings, usePolylines, useProcessingStatus, useUploadedImage } from "../../store/selectors"
+import { useGcodeSettings, useOriginalImage, usePolylines, useScaledImageData, useProcessingStatus } from "../../store/selectors"
 import { downloadFile, extractFilenameWithoutExtension } from "./utils"
 
 export const ExportButtonGCode = () => {
   const polylines = usePolylines()
-  const uploadedImage = useUploadedImage()
+  const originalImage = useOriginalImage()
+  const scaledImageData = useScaledImageData()
   const processingStatus = useProcessingStatus()
   const gcodeSettings = useGcodeSettings()
 
   const isDisabled = !polylines || polylines.length === 0 || processingStatus === "processing"
 
   const handleExport = () => {
-    if (!polylines || !uploadedImage) return
+    if (!polylines || !originalImage || !scaledImageData) return
 
     const gcode = generateGcode({
       polylines,
-      dimensions: { width: uploadedImage.width, height: uploadedImage.height },
+      dimensions: { width: scaledImageData.width, height: scaledImageData.height },
       gcodeSettings,
     })
 
-    const filename = extractFilenameWithoutExtension(uploadedImage.file.name)
+    const filename = extractFilenameWithoutExtension(originalImage.file.name)
     downloadFile({ content: gcode, filename: `${filename}.gcode`, mimeType: "text/plain" })
   }
 

src/components/Export/ExportButtonSVG.tsx

@@ -1,17 +1,17 @@
-import { useProcessingStatus, useSvgOutput, useUploadedImage } from "../../store/selectors"
+import { useOriginalImage, useProcessingStatus, useSvgOutput } from "../../store/selectors"
 import { downloadFile, extractFilenameWithoutExtension } from "./utils"
 
 export const ExportButtonSVG = () => {
   const svgOutput = useSvgOutput()
-  const uploadedImage = useUploadedImage()
+  const originalImage = useOriginalImage()
   const processingStatus = useProcessingStatus()
 
   const isDisabled = svgOutput === null || processingStatus === "processing"
 
   const handleDownload = () => {
-    if (!svgOutput || !uploadedImage) return
+    if (!svgOutput || !originalImage) return
 
-    const filename = extractFilenameWithoutExtension(uploadedImage.file.name)
+    const filename = extractFilenameWithoutExtension(originalImage.file.name)
     downloadFile({ content: svgOutput, filename: `${filename}.svg`, mimeType: "image/svg+xml" })
   }
 

src/components/ImageUploader/ImageUploader.tsx

@@ -1,11 +1,11 @@
 import clsx from "clsx"
-import type { UploadedImage } from "../../core/types"
+import type { OriginalImageMetadata } from "../../core/types"
 import { useDropZone } from "../../hooks/use-drop-zone"
 import { useFileUpload } from "../../hooks/use-file-upload"
 import { LoadingIndicator } from "../LoadingIndicator/LoadingIndicator"
 
 export const ImageUploader = () => {
-  const { isLoading, error, uploadedImage, fileInputRef, processFile, openFilePicker, handleFileSelect } = useFileUpload()
+  const { isLoading, error, originalImage, fileInputRef, processFile, openFilePicker, handleFileSelect } = useFileUpload()
 
   const { isDragging, dropZoneProps } = useDropZone({
     onDrop: processFile,
@@ -21,8 +21,8 @@ export const ImageUploader = () => {
     if (isLoading) {
       return <LoadingIndicator message="Loading image..." size="sm" className="h-24 justify-center" />
     }
-    if (uploadedImage) {
-      return <ImagePreview image={uploadedImage} onChangeImage={handleChangeImage} />
+    if (originalImage) {
+      return <ImagePreview image={originalImage} onChangeImage={handleChangeImage} />
     }
     return <DropZone isDragging={isDragging} onClick={openFilePicker} />
   }
@@ -56,7 +56,7 @@ const DropZone = ({ isDragging, onClick }: { isDragging: boolean; onClick: () =>
   )
 }
 
-const ImagePreview = ({ image, onChangeImage }: { image: UploadedImage; onChangeImage: (event: React.MouseEvent) => void }) => {
+const ImagePreview = ({ image, onChangeImage }: { image: OriginalImageMetadata; onChangeImage: (event: React.MouseEvent) => void }) => {
   return (
     <div className="flex items-center gap-4 p-4">
       <img src={image.dataUrl} alt="Uploaded preview" className="h-24 w-24 rounded-lg object-cover" />

src/components/Preview/OriginalImage.tsx

@@ -1,13 +1,13 @@
-import { useUploadedImage } from "../../store/selectors"
+import { useOriginalImage } from "../../store/selectors"
 
 export const OriginalImage = () => {
-  const uploadedImage = useUploadedImage()
+  const originalImage = useOriginalImage()
 
-  if (!uploadedImage) {
+  if (!originalImage) {
     return <Placeholder />
   }
 
-  return <img src={uploadedImage.dataUrl} alt="Uploaded image preview" className="max-h-full max-w-full object-contain" />
+  return <img src={originalImage.dataUrl} alt="Uploaded image preview" className="max-h-full max-w-full object-contain" />
 }
 
 const Placeholder = () => {

src/core/image/extract-image-data.ts

@@ -1,17 +1,17 @@
-import type { UploadedImage } from "../types.ts"
+import type { OriginalImageMetadata } from "../types.ts"
 
-const MAX_DIMENSION = 2000
+const MAX_DIMENSION = 1024
 
-export const extractImageData = async (uploadedImage: UploadedImage): Promise<ImageData> => {
+export const scaleImage = async (originalImage: OriginalImageMetadata): Promise<ImageData> => {
   const { scaledWidth, scaledHeight } = calculateScaledDimensions({
-    width: uploadedImage.width,
-    height: uploadedImage.height,
+    width: originalImage.width,
+    height: originalImage.height,
   })
 
   const canvas = createOffscreenCanvas(scaledWidth, scaledHeight)
   const context = getCanvasContext(canvas)
 
-  await drawImageToCanvas({ context, dataUrl: uploadedImage.dataUrl, scaledWidth, scaledHeight })
+  await drawImageToCanvas({ context, dataUrl: originalImage.dataUrl, scaledWidth, scaledHeight })
 
   return context.getImageData(0, 0, scaledWidth, scaledHeight)
 }

src/core/image/load-image.test.ts

@@ -54,7 +54,7 @@ describe("loadImage", () => {
     globalThis.Image = originalImage
   })
 
-  it("should load PNG image and return UploadedImage", async () => {
+  it("should load PNG image and return OriginalImageMetadata", async () => {
     const mockDataUrl = "data:image/png;base64,abc123"
     globalThis.FileReader = createMockFileReader(mockDataUrl) as unknown as typeof FileReader
     globalThis.Image = createMockImage(100, 200) as unknown as typeof Image
@@ -69,7 +69,7 @@ describe("loadImage", () => {
     assert.strictEqual(result.height, 200)
   })
 
-  it("should load JPG image and return UploadedImage", async () => {
+  it("should load JPG image and return OriginalImageMetadata", async () => {
     const mockDataUrl = "data:image/jpeg;base64,xyz789"
     globalThis.FileReader = createMockFileReader(mockDataUrl) as unknown as typeof FileReader
     globalThis.Image = createMockImage(800, 600) as unknown as typeof Image

src/core/image/load-image.ts

@@ -1,6 +1,6 @@
-import type { UploadedImage } from "../types.ts"
+import type { OriginalImageMetadata } from "../types.ts"
 
-export const loadImage = (file: File): Promise<UploadedImage> => {
+export const loadImage = (file: File): Promise<OriginalImageMetadata> => {
   return readFileAsDataUrl(file).then((dataUrl) => loadImageElement({ file, dataUrl }))
 }
 
@@ -25,7 +25,7 @@ const readFileAsDataUrl = (file: File): Promise<string> => {
   })
 }
 
-const loadImageElement = ({ file, dataUrl }: { file: File; dataUrl: string }): Promise<UploadedImage> => {
+const loadImageElement = ({ file, dataUrl }: { file: File; dataUrl: string }): Promise<OriginalImageMetadata> => {
   return new Promise((resolve, reject) => {
     const image = new Image()
 

src/core/image/scale-image.ts

@@ -0,0 +1,62 @@
+import type { OriginalImageMetadata } from "../types.ts"
+
+const MAX_DIMENSION = 2000
+
+export const scaleImage = async (originalImage: OriginalImageMetadata): Promise<ImageData> => {
+  const { scaledWidth, scaledHeight } = calculateScaledDimensions({
+    width: originalImage.width,
+    height: originalImage.height,
+  })
+
+  const canvas = createOffscreenCanvas(scaledWidth, scaledHeight)
+  const context = getCanvasContext(canvas)
+
+  await drawImageToCanvas({ context, dataUrl: originalImage.dataUrl, scaledWidth, scaledHeight })
+
+  return context.getImageData(0, 0, scaledWidth, scaledHeight)
+}
+
+const calculateScaledDimensions = ({ width, height }: { width: number; height: number }): { scaledWidth: number; scaledHeight: number } => {
+  if (width <= MAX_DIMENSION && height <= MAX_DIMENSION) {
+    return { scaledWidth: width, scaledHeight: height }
+  }
+
+  const scale = Math.min(MAX_DIMENSION / width, MAX_DIMENSION / height)
+
+  return {
+    scaledWidth: Math.round(width * scale),
+    scaledHeight: Math.round(height * scale),
+  }
+}
+
+const createOffscreenCanvas = (width: number, height: number): HTMLCanvasElement => {
+  const canvas = document.createElement("canvas")
+  canvas.width = width
+  canvas.height = height
+  return canvas
+}
+
+const getCanvasContext = (canvas: HTMLCanvasElement): CanvasRenderingContext2D => {
+  const context = canvas.getContext("2d")
+  if (!context) {
+    throw new Error("Failed to get canvas 2D context")
+  }
+  return context
+}
+
+const drawImageToCanvas = ({ context, dataUrl, scaledWidth, scaledHeight }: { context: CanvasRenderingContext2D; dataUrl: string; scaledWidth: number; scaledHeight: number }): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    const image = new Image()
+
+    image.onload = () => {
+      context.drawImage(image, 0, 0, scaledWidth, scaledHeight)
+      resolve()
+    }
+
+    image.onerror = () => {
+      reject(new Error("Failed to load image for extraction"))
+    }
+
+    image.src = dataUrl
+  })
+}

src/core/types.ts

@@ -29,7 +29,7 @@ export type ImageData = {
   colorSpace: PredefinedColorSpace
 }
 
-export type UploadedImage = {
+export type OriginalImageMetadata = {
   file: File
   dataUrl: string
   width: number