Improve canvas performance for large rooms

dist/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>furniture-app</title>
-    <script type="module" crossorigin src="/assets/index-BIL7D6zM.js"></script>
+    <script type="module" crossorigin src="/assets/index-BP-dLhBi.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-9k24Ci9h.css">
   </head>
   <body>

src/components/RoomCanvas.tsx

@@ -90,16 +90,21 @@ export function RoomCanvas({ state, onStateChange, mode, selectedId, onSelect, s
     ctx.strokeStyle = 'rgba(255,255,255,0.035)';
     ctx.lineWidth = 1;
     const step = 25;
-    for (let x = 0; x <= state.room.width; x += step) {
+    const maxLines = 2000;
+    const xCount = Math.min(Math.floor(state.room.width / step) + 1, maxLines);
+    const yCount = Math.min(Math.floor(state.room.height / step) + 1, maxLines);
+    for (let i = 0; i < xCount; i++) {
+      const x = i * step;
       ctx.beginPath();
       ctx.moveTo(x, 0);
-      ctx.lineTo(x, state.room.height);
+      ctx.lineTo(x, Math.min(state.room.height, step * yCount));
       ctx.stroke();
     }
-    for (let y = 0; y <= state.room.height; y += step) {
+    for (let i = 0; i < yCount; i++) {
+      const y = i * step;
       ctx.beginPath();
       ctx.moveTo(0, y);
-      ctx.lineTo(state.room.width, y);
+      ctx.lineTo(Math.min(state.room.width, step * xCount), y);
       ctx.stroke();
     }
 

src/geometry/collision.ts

@@ -35,7 +35,8 @@ export function colliderCorners(c: Collider): Point[] {
 function project(points: Point[], axis: Point): [number, number] {
   let min = Infinity;
   let max = -Infinity;
-  for (const p of points) {
+  for (let i = 0; i < points.length; i++) {
+    const p = points[i];
     const d = p.x * axis.x + p.y * axis.y;
     if (d < min) min = d;
     if (d > max) max = d;