only create floor when physics is activated and account for viewport position/scaling

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]);
 

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
+		}
+	});
+}
+

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;
 }