From 67d658901b3f7b6eb1782df26a14fd7575632e1a Mon Sep 17 00:00:00 2001
From: amer <muhammedamer7810@gmail.com>
Date: Sun, 12 Oct 2025 00:48:33 +0300
Subject: [PATCH] feat: visualize objects in 2d grid

---
 src/js/2d/floor2d.js   | 70 ++++++++++++++++++++++++++++++++++++++++++
 src/js/3d/pathsTo3d.js |  4 +++
 src/js/3d/scene3d.js   |  3 +-
 src/js/main.js         |  2 ++
 4 files changed, 78 insertions(+), 1 deletion(-)

diff --git a/src/js/2d/floor2d.js b/src/js/2d/floor2d.js
index 27a7292..c12c09b 100644
--- a/src/js/2d/floor2d.js
+++ b/src/js/2d/floor2d.js
@@ -1,4 +1,5 @@
 import paper from 'paper'
+import { exportSceneToJson } from '../3d/scene3d.js'
 
 const canvas2D = document.getElementById('canvas2D')
 export { canvas2D }
@@ -437,6 +438,75 @@ function undo() {
   }
 }
 
+function clearObjectRectangles() {
+  const itemsToRemove = []
+
+  paper.project.activeLayer.children.forEach((item) => {
+    if (item.data && item.data.isObjectRectangle) {
+      itemsToRemove.push(item)
+    }
+  })
+
+  itemsToRemove.forEach((item) => item.remove())
+
+  console.log(`Cleared ${itemsToRemove.length} object rectangles`)
+}
+
+export const drawObjectRectangle = () => {
+  clearObjectRectangles()
+
+  const data = exportSceneToJson()
+  if (!data || Object.keys(data).length === 0) {
+    console.log('No objects found in scene data')
+    return
+  }
+  const WORLD_TO_PX = 50
+  Object.entries(data).forEach(([key, objData]) => {
+    if (!objData.coords || !objData.dimensions) {
+      console.log(`Missing coords or dimensions for: ${key}`)
+      return
+    }
+    const { x, z } = objData.coords
+    const canvas2DX = x * WORLD_TO_PX + paper.view.bounds.width / 2
+    const canvas2DY = z * WORLD_TO_PX + paper.view.bounds.height / 2
+    const center = new paper.Point(canvas2DX, canvas2DY)
+    const rect = new paper.Path.Rectangle({
+      point: new paper.Point(center.x - 50 / 2, center.y - 50 / 2),
+      size: [50, 50],
+      fillColor: getColorForObject(key),
+      opacity: 0.5,
+      strokeColor: 'black',
+      strokeWidth: 2,
+    })
+    rect.data = {
+      type: 'object',
+      objectKey: key,
+      isObjectRectangle: true,
+    }
+    const label = new paper.PointText({
+      point: center,
+      content: key.split('_')[0],
+      fillColor: 'white',
+      fontSize: 12,
+      justification: 'center',
+    })
+    label.data = {
+      type: 'objectLabel',
+      parentKey: key,
+      isObjectRectangle: true,
+    }
+  })
+  paper.view.draw()
+}
+
+function getColorForObject(key) {
+  if (key.startsWith('table')) return 'brown'
+  if (key.startsWith('chair')) return 'blue'
+  if (key.startsWith('cooler')) return 'cyan'
+  if (key.startsWith('rack')) return 'gray'
+  return 'black'
+}
+
 document.addEventListener('keydown', function (event) {
   if (
     (event.ctrlKey || event.metaKey) &&
diff --git a/src/js/3d/pathsTo3d.js b/src/js/3d/pathsTo3d.js
index 9a5964c..91063d3 100644
--- a/src/js/3d/pathsTo3d.js
+++ b/src/js/3d/pathsTo3d.js
@@ -27,6 +27,10 @@ function convertPathsTo3D() {
 
   // Convert 2D paths to 3D walls
   paper.project.activeLayer.children.forEach((item) => {
+     if (item.data && item.data.isObjectRectangle) {
+       return // Skip this item - it's an object, not a wall
+     }
+
     if (
       item instanceof paper.Path &&
       item.segments.length >= 2 &&
diff --git a/src/js/3d/scene3d.js b/src/js/3d/scene3d.js
index 31fd5a6..31f9aef 100644
--- a/src/js/3d/scene3d.js
+++ b/src/js/3d/scene3d.js
@@ -147,7 +147,7 @@ function onMouseClick(event) {
   }
 }
 
-function exportSceneToJson() {
+export function exportSceneToJson() {
   let localPosition = new THREE.Vector3(0, 0, 0)
   let box = new THREE.Box3()
   let size = new THREE.Vector3(0, 0, 0)
@@ -175,6 +175,7 @@ function exportSceneToJson() {
   })
 
   console.log(JSON.stringify(sceneData, null, 2)) // Pretty print JSON with 2-space indent
+  return sceneData
 }
 
 // Add event listener for keypress
diff --git a/src/js/main.js b/src/js/main.js
index 416c2a2..e390048 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -4,6 +4,7 @@ import { createGrid } from './2d/floor2d.js'
 import { setupDxfUpload } from './2d/dxfLoader.js'
 import { init3D, camera, renderer } from './3d/scene3d.js'
 import { convertPathsTo3D } from './3d/pathsTo3d.js'
+import { drawObjectRectangle } from './2d/floor2d.js'
 // import parseDXF from 'dxf-parser'
 
 createGrid()
@@ -23,6 +24,7 @@ switchButton.addEventListener('click', () => {
   } else {
     container2D.style.display = 'block'
     container3D.style.display = 'none'
+    drawObjectRectangle()
     switchButton.textContent = 'Switch to 3D'
   }
 })