From cb02547248bbf8dd8a2e0c13c4f10e084735bf22 Mon Sep 17 00:00:00 2001
From: Orion Reed <orionreedt@gmail.com>
Date: Fri, 29 Mar 2024 18:39:08 -0700
Subject: [PATCH] only create floor when physics is activated and account for
 viewport position/scaling

---
 src/hooks/useCanvas.ts          | 11 ++---------
 src/physics/PhysicsControls.tsx | 32 +++++++++++++++++++++++++-------
 src/utils.tsx                   | 19 -------------------
 3 files changed, 27 insertions(+), 35 deletions(-)

diff --git a/src/hooks/useCanvas.ts b/src/hooks/useCanvas.ts
index f68b1ec..6807c3e 100644
--- a/src/hooks/useCanvas.ts
+++ b/src/hooks/useCanvas.ts
@@ -19,25 +19,18 @@ export function useCanvas() {
         const info = await gatherElementsInfo();
         setElementsInfo(info);
         setIsCanvasEnabled(true);
-        document.getElementById('toggle-physics')?.classList.remove('hidden');
+        document.body.classList.add('canvas-mode');
       } else {
         setElementsInfo([]);
         setIsCanvasEnabled(false);
-        document.getElementById('toggle-physics')?.classList.add('hidden');
+        document.body.classList.remove('canvas-mode');
       }
     };
-    // const enableCanvas = async () => {
-    //   const info = await gatherElementsInfo();
-    //   setElementsInfo(info);
-    //   setIsCanvasEnabled(true);
-    // };
 
     window.addEventListener('toggleCanvasEvent', toggleCanvas);
-    // window.addEventListener('togglePhysicsEvent', enableCanvas);
 
     return () => {
       window.removeEventListener('toggleCanvasEvent', toggleCanvas);
-      // window.removeEventListener('togglePhysicsEvent', enableCanvas);
     };
   }, [isCanvasEnabled]);
 
diff --git a/src/physics/PhysicsControls.tsx b/src/physics/PhysicsControls.tsx
index 590cd76..6aeba5f 100644
--- a/src/physics/PhysicsControls.tsx
+++ b/src/physics/PhysicsControls.tsx
@@ -1,4 +1,4 @@
-import { TLUnknownShape, useEditor } from "@tldraw/tldraw";
+import { Editor, TLUnknownShape, createShapeId, useEditor } from "@tldraw/tldraw";
 import { useEffect, useState } from "react";
 import { usePhysicsSimulation } from "./simulation";
 
@@ -16,13 +16,11 @@ export const SimController = ({ shapes }: { shapes: TLUnknownShape[] }) => {
 		const togglePhysics = () => {
 			setIsPhysicsActive((currentIsPhysicsActive) => {
 				if (currentIsPhysicsActive) {
-					console.log('destroy');
 					destroy();
 					return false;
-				} else {
-					console.log('activate');
-					return true;
 				}
+				createFloor(editor);
+				return true;
 			});
 		};
 
@@ -36,8 +34,6 @@ export const SimController = ({ shapes }: { shapes: TLUnknownShape[] }) => {
 
 	useEffect(() => {
 		if (isPhysicsActive) {
-			console.log('adding shapes');
-
 			addShapes(editor.getCurrentPageShapes()); // Activate physics simulation
 		} else {
 			destroy(); // Deactivate physics simulation
@@ -46,3 +42,25 @@ export const SimController = ({ shapes }: { shapes: TLUnknownShape[] }) => {
 
 	return (<></>);
 };
+
+function createFloor(editor: Editor) {
+
+	const viewBounds = editor.getViewportPageBounds();
+
+	editor.createShape({
+		id: createShapeId(),
+		type: 'geo',
+		x: viewBounds.minX,
+		y: viewBounds.maxY,
+		props: {
+			w: viewBounds.width,
+			h: 50,
+			color: 'grey',
+			fill: 'solid'
+		},
+		meta: {
+			fixed: true
+		}
+	});
+}
+
diff --git a/src/utils.tsx b/src/utils.tsx
index 04e80dc..fe4c44f 100644
--- a/src/utils.tsx
+++ b/src/utils.tsx
@@ -12,24 +12,5 @@ export function createShapes(elementsInfo: any) {
       html: element.html,
     }
   }));
-
-  const extend = 150;
-
-  shapes.push({
-    id: createShapeId(),
-    type: 'geo',
-    x: -extend,
-    y: window.innerHeight,
-    props: {
-      w: window.innerWidth + (extend * 2),
-      h: 50,
-      color: 'grey',
-      fill: 'solid'
-    },
-    meta: {
-      fixed: true
-    }
-  });
-
   return shapes;
 }
\ No newline at end of file