From 74b445d244d722cd32dfbb68c5243b0834a71cbc Mon Sep 17 00:00:00 2001
From: "Lu[ke] Wilson" <l2wilson94@gmail.com>
Date: Mon, 20 Nov 2023 13:00:29 +0000
Subject: [PATCH 1/4] fix rerender bug

---
 src/app/page.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index c6ff082..d2cbf70 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,6 +10,8 @@ fal.config({
   }),
 });
 
+const shapeUtils = [LiveImageShapeUtil];
+
 export default function Home() {
   const onEditorMount = (editor: Editor) => {
     editor.createShape({
@@ -22,7 +24,7 @@ export default function Home() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-between">
       <div className="fixed inset-0">
-        <Tldraw onMount={onEditorMount} shapeUtils={[LiveImageShapeUtil]} />
+        <Tldraw onMount={onEditorMount} shapeUtils={shapeUtils} />
       </div>
     </main>
   );

From 76d959cd35d0f6d14cb5d3bd4875d3c2cf078e8d Mon Sep 17 00:00:00 2001
From: "Lu[ke] Wilson" <l2wilson94@gmail.com>
Date: Mon, 20 Nov 2023 13:07:59 +0000
Subject: [PATCH 2/4] dont create duplicate shapes

---
 src/app/page.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index d2cbf70..7d873af 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -14,6 +14,15 @@ 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,

From 0a43ca26ed36bc79f80091e896b8d21b62050fba Mon Sep 17 00:00:00 2001
From: "Lu[ke] Wilson" <l2wilson94@gmail.com>
Date: Mon, 20 Nov 2023 13:14:55 +0000
Subject: [PATCH 3/4] allow children and prevent rerender issue

---
 src/app/page.tsx              |  5 +++--
 src/components/live-image.tsx | 10 +++++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7d873af..eebae9f 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({
@@ -13,7 +14,7 @@ fal.config({
 const shapeUtils = [LiveImageShapeUtil];
 
 export default function Home() {
-  const onEditorMount = (editor: Editor) => {
+  const onEditorMount = useCallback((editor: Editor) => {
     // If there isn't a live image shape, create one
     const liveImage = editor.getCurrentPageShapes().find((shape) => {
       return shape.type === "live-image";
@@ -28,7 +29,7 @@ export default function Home() {
       x: 120,
       y: 180,
     });
-  };
+  }, []);
 
   return (
     <main className="flex min-h-screen flex-col items-center justify-between">
diff --git a/src/components/live-image.tsx b/src/components/live-image.tsx
index d7dc0d0..48bbae4 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,13 @@ type LiveImageShape = TLBaseShape<"live-image", { w: number; h: number }>;
 export class LiveImageShapeUtil extends ShapeUtil<LiveImageShape> {
   static override type = "live-image" as const;
 
+  override canReceiveNewChildrenOfType = (
+    shape: LiveImageShape,
+    type: TLShape["type"]
+  ) => {
+    return true;
+  };
+
   getDefaultProps(): LiveImageShape["props"] {
     return {
       w: 1060,

From bc1726976e36b54b98bdb9c32e56ae6054ee34ef Mon Sep 17 00:00:00 2001
From: "Lu[ke] Wilson" <l2wilson94@gmail.com>
Date: Mon, 20 Nov 2023 15:33:40 +0000
Subject: [PATCH 4/4] disable resize

---
 src/app/page.tsx              | 4 ++--
 src/components/live-image.tsx | 7 +------
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index eebae9f..6579aa8 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -14,7 +14,7 @@ fal.config({
 const shapeUtils = [LiveImageShapeUtil];
 
 export default function Home() {
-  const onEditorMount = useCallback((editor: Editor) => {
+  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";
@@ -29,7 +29,7 @@ export default function Home() {
       x: 120,
       y: 180,
     });
-  }, []);
+  };
 
   return (
     <main className="flex min-h-screen flex-col items-center justify-between">
diff --git a/src/components/live-image.tsx b/src/components/live-image.tsx
index 48bbae4..bd81f45 100644
--- a/src/components/live-image.tsx
+++ b/src/components/live-image.tsx
@@ -156,12 +156,7 @@ type LiveImageShape = TLBaseShape<"live-image", { w: number; h: number }>;
 export class LiveImageShapeUtil extends ShapeUtil<LiveImageShape> {
   static override type = "live-image" as const;
 
-  override canReceiveNewChildrenOfType = (
-    shape: LiveImageShape,
-    type: TLShape["type"]
-  ) => {
-    return true;
-  };
+  override canResize = () => false;
 
   getDefaultProps(): LiveImageShape["props"] {
     return {