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,