diff --git a/src/app/page.tsx b/src/app/page.tsx index c6ff082..6579aa8 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -3,6 +3,7 @@ import { LiveImageShapeUtil } from "@/components/live-image"; import * as fal from "@fal-ai/serverless-client"; import { Editor, Tldraw } from "@tldraw/tldraw"; +import { useCallback } from "react"; fal.config({ requestMiddleware: fal.withProxy({ @@ -10,8 +11,19 @@ fal.config({ }), }); +const shapeUtils = [LiveImageShapeUtil]; + export default function Home() { const onEditorMount = (editor: Editor) => { + // If there isn't a live image shape, create one + const liveImage = editor.getCurrentPageShapes().find((shape) => { + return shape.type === "live-image"; + }); + + if (liveImage) { + return; + } + editor.createShape({ type: "live-image", x: 120, @@ -22,7 +34,7 @@ export default function Home() { return (
- +
); diff --git a/src/components/live-image.tsx b/src/components/live-image.tsx index d7dc0d0..bd81f45 100644 --- a/src/components/live-image.tsx +++ b/src/components/live-image.tsx @@ -5,6 +5,7 @@ import { ShapeUtil, TLBaseShape, TLEventMapHandler, + TLShape, useEditor, } from "@tldraw/tldraw"; @@ -96,7 +97,7 @@ export function LiveImage() { setImage(result.images[0].url); } }, 16), - [], + [] ); useEffect(() => { @@ -155,6 +156,8 @@ type LiveImageShape = TLBaseShape<"live-image", { w: number; h: number }>; export class LiveImageShapeUtil extends ShapeUtil { static override type = "live-image" as const; + override canResize = () => false; + getDefaultProps(): LiveImageShape["props"] { return { w: 1060,