diff --git a/frontend/src/components/ui/ComposeCanvas.tsx b/frontend/src/components/ui/ComposeCanvas.tsx index c680b1f..386d363 100644 --- a/frontend/src/components/ui/ComposeCanvas.tsx +++ b/frontend/src/components/ui/ComposeCanvas.tsx @@ -3,9 +3,11 @@ import { forwardRef, useEffect, useImperativeHandle, useRef } from "react"; const PAD = 36; +type CanvasJSON = ReturnType; + export type CanvasTools = { addImage: (url: string, file: File) => void; - getData: () => { objects: any[] }; + getData: () => { objects: CanvasJSON["objects"] }; // no-any hack :/ getJsonData: () => string; getImages: () => { src: string; file: File }[]; }; diff --git a/frontend/src/pages/Editor.tsx b/frontend/src/pages/Editor.tsx index 44deb6b..b5387ca 100644 --- a/frontend/src/pages/Editor.tsx +++ b/frontend/src/pages/Editor.tsx @@ -4,7 +4,6 @@ import { LockIcon, TrayIcon, } from "@phosphor-icons/react"; -import type { FabricObject } from "fabric"; import { useRef, useState } from "react"; import { useNavigate, useParams } from "react-router-dom"; import { api } from "../api/apiClient"; @@ -73,10 +72,14 @@ export default function Editor() { } // replace image src with encrypted image filename - const canvasData = canvasRef.current?.getData() ?? { objects: [] }; + const canvasData = canvasRef.current?.getData(); canvasData.objects = canvasData.objects?.map( - (obj: FabricObject & { src: string }) => - obj.type === "Image" ? { ...obj, src: imageEncMap.get(obj.src) } : obj, + ( + obj: Record, // fabric is too quirky for any other type + ) => + obj.type === "Image" + ? { ...obj, src: imageEncMap.get(obj.src as string) } + : obj, ); const encrypted_letter = await cryptoUtils.encryptLetter(