architwin 1.14.8 → 1.14.9

package/lib/atwinui/components/toolbar/spacePartition/roomFormPane.js

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import i18n from '../i18n';
 import { SPACE_EVENTS } from "../../../../types";
 import { batchAddEventListenerByClassName } from "../../../events";
-import { startDraw, cancelDraw, disposeModel, _3DXObjects, getCurrentPolygon, dispatchSpaceEvent, enableVerticeControls, setCurrentPolygon, setMeshChildrenMaterialProperty, get3DXObjects, getChildrenOfModel, clearSelectedObject, renderPolygon, addUndoDrawActions, setWallBaseHeight, clearWallBaseHeight } from '../../../../architwin';
+import { startDraw, cancelDraw, disposeModel, _3DXObjects, getCurrentPolygon, dispatchSpaceEvent, enableVerticeControls, setCurrentPolygon, setMeshChildrenMaterialProperty, get3DXObjects, getChildrenOfModel, clearSelectedObject, renderPolygon, addUndoDrawActions, setWallBaseHeight, clearWallBaseHeight, setDrawingConfig, resetDrawingConfig, goToPosition } from '../../../../architwin';
 import { generateUUID, extractUUID } from '../../../../utils';
 import { getCurrentEditRoomData } from './roomTreePane';
 import { toggleModal, setModalAction } from "../modal";
@@ -24,7 +24,7 @@ let currentPolygonData = null;
 let currentPartitionData = null;
 let currentPartitionDataArray = [];
 let savedPartitionDataArray = [];
-let currentEditPartitionData = null;
+let isEditPartition = false;
 let currentDeletePartitionData = null;
 let currentEditRoomData = null;
 let notify = new Notyf({ position: { x: 'left', y: 'bottom' } });
@@ -33,6 +33,14 @@ let deletedSavedPartitionArray = [];
 let currentHighlightedFace = null;
 let previousPartitionData = null;
 let tempCurrentPolygon = undefined;
+let drawingMode = null;
+let drawingConfig = null;
+let currentWall = null;
+let currentObject = null;
+let inputFloorMaterial;
+let floorMaterial = '';
+let inputWallMaterial;
+let wallMaterial = '';
 export function renderRoomFormPane() {
     log.info("__@ renderRoomFormPane: ", roomFormMode);
     const element = document.createElement('div');
@@ -70,32 +78,52 @@ export function renderRoomFormPane() {
                 </label>
                 <input class="at_field_input at_w-full" type="text" name="floor_level" id="at-room-floor-level-input" data-cy="at-room-floor-level-input">
             </div>
-            <div class="at_partition_list_container at_h-min-40" id="at-partition-list-container" data-cy="at-partition-list-container">
-                <div class="at_face_title" id="at-face-title" style="display: none;">
-                    <span class="mdi mdi-chevron-left" id="at-back-partition"></span>
+            <div class="at_section at_h-min-40" id="at-partition-list-container" data-cy="at-partition-list-container">
+
+                <!-- Partition Title-->
+                <div class="at_title" id="at-partition-title">
+                    <div> </div>
                     <label for="">
-                        <span class="mdi mdi-vector-polygon"></span>
-                        ${i18n.t('Floor')}
+                        <span class="mdi mdi-cube-unfolded"></span>
+                        ${i18n.t('Partitions')}
                     </label>
                     <div> </div>
                 </div>
 
-                <div class="at_partition_title" id="at-partition-title">
+                <!-- Floor Title-->
+                <div class="at_title" id="at-face-title" style="display: none;">
+                    <span class="mdi mdi-chevron-left at_back_btn" id="at-back-partition"></span>
+                    <label for="">
+                        <span class="mdi mdi-vector-polygon"></span>
+                        ${i18n.t('FloorsAndWalls')}
+                    </label>
                     <div> </div>
+                </div>
+
+                <!-- Windows and Doors Title-->
+                <div class="at_title" id="at-window-door-title" style="display: none;">
+                    <span class="mdi mdi-chevron-left at_back_btn" id="at-back-floors"></span>
                     <label for="">
-                        <span class="mdi mdi-cube-unfolded"></span>
-                        ${i18n.t('Partitions')}
+                        <span class="mdi mdi-vector-polygon"></span>
+                        ${i18n.t('WindowsDoors')}
                     </label>
                     <div> </div>
                 </div>
-                <div class="at_edit_name_input" id="at-edit-partition-name">
-                    <input class="at_edit_partition_name_input" type="text" name="edit_partition_name" id="at-edit-partition-name-input" data-cy="at-edit-partition-name-input">
+
+                <div class="at_edit_name" id="at-edit-wall-material" style="display: none;">
+                    <input class="at_edit_name_input" type="text" id="at-edit-wall-input" data-cy="at-edit-wall-material-input" placeholder="${i18n.t('EnterWallMaterial')}" disabled>
+                    <span class="mdi mdi-pencil" style="display: none; cursor: pointer;" id="at-wall-edit-material-btn"></span>            
+                    <span class="mdi mdi-check" id="at-confirm-edit-wall-btn" style="display: none;"></span>
+                </div>
+
+                <div class="at_edit_name" id="at-edit-partition-name">
+                    <input class="at_edit_name_input" type="text" name="edit_partition_name" id="at-edit-partition-name-input" data-cy="at-edit-partition-name-input">
                     <span class="mdi mdi-check" id="at-confirm-edit-partition-name"></span>
                 </div>
 
                 <!-- Partition Add Mode -->
 
-                <div class="at_partition_item_container at_scrollable_container" id="at-partition-item-container" data-cy="at-partition-item-container">
+                <div class="at_body at_scrollable_container" id="at-partition-item-container" data-cy="at-partition-item-container">
                     
                     <!-- Insert Partition Items Here -->
                     
@@ -103,7 +131,7 @@ export function renderRoomFormPane() {
 
                 <!-- Partition Edit Mode -->
                 
-                <div class="at_face_vertex_container at_scrollable_container" id="at-face-vertex-container" data-cy="at-face-vertex-container"> 
+                <div class="at_body at_scrollable_container" id="at-face-vertex-container" data-cy="at-face-vertex-container"> 
                     
                     <!-- Insert Face & Vertex Items Here -->
 
@@ -111,7 +139,7 @@ export function renderRoomFormPane() {
 
                 <!-- No Partition Display -->
 
-                <div class="at_empty-display" id="at-no-partition-display" data-cy="at-no-partition-display">
+                <div class="at_empty_display" id="at-no-partition-display" data-cy="at-no-partition-display">
                     <label for="">
                         ${i18n.t('NoPartitionDisplay')}
                     </label>
@@ -123,9 +151,16 @@ export function renderRoomFormPane() {
                         ${i18n.t('AddPartition')}
                         <span class="mdi mdi-draw"></span>
                     </div>
+
+                    <div class="at_button at_add_window_door_btn  at_draw_partition_btn_jp_font_size" 
+                        id="at-add-window-door-btn" data-cy="at-add-window-door-btn" style="display:none;">
+                        ${i18n.t('AddWindowDoor')}
+                        <span class="mdi mdi-window-closed-variant"></span>
+                    </div>
+
                     <div class="at_button at_draw_partition_btn at_w-full at_hidden" id="at-modify-partition-form-btn" data-cy="at-modify-partition-form-btn">
                         ${i18n.t('ModifyPartition')}
-                        <span class="mdi mdi-cube-outline"></span>
+                        <span class="mdi mdi-cube-outline" style="margine-left: 2px"></span>
                     </div>
                     <!-- Undo & Redo Buttons -->
                     <div class="at_button at_undo_btn at_disabled" id="at-draw-undo-btn" data-cy="at-draw-undo-btn">
@@ -184,10 +219,51 @@ export function toggleDrawPartitionButton() {
         }
         currentPolygonData = null;
         currentPartitionData = null;
-        currentEditPartitionData = null;
+        isEditPartition = false;
         previousPartitionData = null;
     }
 }
+export function toggleDrawWindowButton() {
+    var _a;
+    log.info("toggleDrawWindowButton()", getCurrentPolygon());
+    setCurrentPolygon(undefined);
+    const addDoorButton = document.getElementById('at-add-window-door-btn');
+    if (!isDrawing) {
+        isDrawing = true;
+        drawingMode = 'window';
+        // clearSelectedObject()
+        addDoorButton.classList.remove('at_add_window_door_btn');
+        addDoorButton.classList.add('at_add_window_door_btn_active');
+        addDoorButton.innerHTML = `
+            ${i18n.t('DoneDrawing')}
+            <span class="mdi mdi-check-bold"></span>
+        `;
+        drawingConfig = {
+            lineTypeComponentConfig: {
+                renderPolygonOnAdd: false,
+                drawingMode: drawingMode,
+                targetIndex: ((_a = currentWall.windows) === null || _a === void 0 ? void 0 : _a.length) || 0,
+                polygonData: currentPolygonData,
+                targetUUID: currentWall.uuid
+            }
+        };
+        setDrawingConfig(drawingConfig);
+        startDraw();
+    }
+    else {
+        isDrawing = false;
+        drawingMode = null;
+        currentPartitionData.polygon_json = JSON.stringify(currentPolygonData);
+        addDoorButton.classList.remove('at_add_window_door_btn_active');
+        addDoorButton.classList.add('at_add_window_door_btn');
+        addDoorButton.innerHTML = `
+            ${i18n.t('AddWindowDoor')}
+            <span class="mdi mdi-window-closed-variant"></span>
+        `;
+        cancelDraw();
+        resetDrawingConfig();
+    }
+}
 /**
  * Displays the partition form based on the current form mode.
  * Handles different UI behaviors for edit and add modes.
@@ -309,35 +385,7 @@ function displayPartitions(partitions) {
     // Set up event listener for the partition edit button
     batchAddEventListenerByClassName('at_edit_partition_btn', (event) => {
         console.log('Event', event);
-        const partitionTitle = document.getElementById('at-partition-title');
-        const faceTitle = document.getElementById('at-face-title');
-        const partitionLists = document.getElementById('at-partition-item-container');
-        const faceLists = document.getElementById('at-face-vertex-container');
-        const editPartitionName = document.getElementById('at-edit-partition-name');
-        const editPartitionNameInput = document.getElementById('at-edit-partition-name-input');
-        // Toggle visibility of relevant elements
-        partitionTitle.style.display = 'none';
-        faceTitle.style.display = 'flex';
-        partitionLists.style.display = 'none';
-        faceLists.style.display = 'flex';
-        editPartitionName.style.display = 'flex';
-        // Get the partition ID and load the corresponding partition data
-        const targetElement = event.target;
-        const partitionId = extractUUID(targetElement.id);
-        currentEditPartitionData = partitions.find(partition => partition.uuid === partitionId);
-        const targetObject = _3DXObjects.find(obj => obj.object.object_data.uuid === partitionId);
-        if (currentEditPartitionData) {
-            displayFaces(JSON.parse(currentEditPartitionData.polygon_json));
-            editPartitionNameInput.value = currentEditPartitionData.name;
-            const currentPolygon = {
-                node: targetObject.node,
-                component: targetObject.component,
-                object: targetObject.object,
-                type: 'POLYGON'
-            };
-            setCurrentPolygon(currentPolygon);
-            handleModifyPartition(targetObject);
-        }
+        handlePartitionRowEditBtnClickEvent(partitions, event.target);
     });
     // Set up event listener for confirming partition name change
     addEventListenerById('at-confirm-edit-partition-name', () => {
@@ -345,9 +393,9 @@ function displayPartitions(partitions) {
         const newPartitionName = editPartitionNameInput === null || editPartitionNameInput === void 0 ? void 0 : editPartitionNameInput.value;
         const confirmEditPartitionName = document.getElementById('at-confirm-edit-partition-name');
         confirmEditPartitionName.style.display = 'none';
-        if (newPartitionName && currentEditPartitionData) {
+        if (newPartitionName) {
             // Update the name of the partition in the array
-            const partitionIndex = currentPartitionDataArray.findIndex(partition => partition.uuid === currentEditPartitionData.uuid);
+            const partitionIndex = currentPartitionDataArray.findIndex(partition => partition.uuid === currentPartitionData.uuid);
             if (partitionIndex !== -1) {
                 currentPartitionDataArray[partitionIndex].name = newPartitionName;
             }
@@ -392,6 +440,51 @@ function displayPartitions(partitions) {
         }
     }));
 }
+/**
+ * Handles the click event for partition row edit buttons. Updates the UI to show
+ * face editing mode, loads the selected partition data, and sets up the partition
+ * for modification.
+ *
+ * This function:
+ * - Toggles UI visibility (hides partition list, shows face list and edit controls)
+ * - Extracts partition ID from the clicked element
+ * - Loads and displays the partition's face data
+ * - Sets up the partition name input field
+ * - Initializes the partition for modification mode
+ *
+ * @param partitions - The list of partitions to search through for the selected partition
+ * @param event - The click event from the edit button, used to identify which partition to edit
+ */
+export function handlePartitionRowEditBtnClickEvent(partitions, targetElement) {
+    isEditPartition = true;
+    const partitionTitle = document.getElementById('at-partition-title');
+    const faceTitle = document.getElementById('at-face-title');
+    const partitionLists = document.getElementById('at-partition-item-container');
+    const faceLists = document.getElementById('at-face-vertex-container');
+    const editPartitionName = document.getElementById('at-edit-partition-name');
+    const editPartitionNameInput = document.getElementById('at-edit-partition-name-input');
+    const editWallMaterialInput = document.getElementById('at-edit-wall-material');
+    // Toggle visibility of relevant elements
+    partitionTitle.style.display = 'none';
+    faceTitle.style.display = 'flex';
+    partitionLists.style.display = 'none';
+    faceLists.style.display = 'flex';
+    editPartitionName.style.display = 'flex';
+    editWallMaterialInput.style.display = 'none';
+    // Get the partition ID and load the corresponding partition data
+    const partitionId = extractUUID(targetElement.id);
+    currentPartitionData = partitions.find(partition => partition.uuid === partitionId);
+    currentObject = _3DXObjects.find(obj => obj.object.object_data.uuid === partitionId);
+    log.info("currentPartitionData", currentPartitionData);
+    log.info("polygonJson", JSON.parse(currentPartitionData.polygon_json));
+    log.info("targetObject", currentObject);
+    if (isEditPartition) {
+        displayFaces(JSON.parse(currentPartitionData.polygon_json));
+        editPartitionNameInput.value = currentPartitionData.name;
+        setCurrentPolygon(currentObject);
+        handleModifyPartition(currentObject);
+    }
+}
 function displayFaceLists() {
     displayElement('at-face-title');
     displayElement('at-face-vertex-container');
@@ -399,9 +492,10 @@ function displayFaceLists() {
     hideElement('at-partition-item-container');
     hideElement('at-partition-title');
     hideElement('at-no-partition-display');
+    hideElement('at-edit-wall-material');
 }
 function handleModifyPartition(object) {
-    const isDrawingEnabled = getDrawingMode();
+    const isDrawingEnabled = getIsDrawing();
     console.log("isDrawingEnabled", isDrawingEnabled);
     if (isDrawingEnabled) {
         toggleDrawPartitionButton();
@@ -425,20 +519,20 @@ function displayPartitionRow(partition) {
     console.log("displayPartitionRow()", partition);
     // Create the partition row element
     const element = document.createElement('div');
-    element.classList.add('at_partition_item');
+    element.classList.add('at_item');
     // Set the inner HTML of the partition row
     element.innerHTML = `
-        <div class="at_icon_left">
+        <div class="at_subitem_left">
             <span class="mdi mdi-cube-outline"></span>
         </div>
-        <div class="at_partition_name">
+        <div class="at_name">
             <div></div>
             <label for="">
                 ${i18n.t(`${partition.name}`)}
             </label>
-            <span class="mdi mdi-pencil at_icon_right at_edit_partition_btn" id="at-edit-partition-${partition.uuid}"></span>
+            <span class="mdi mdi-pencil at_subitem_right at_edit_partition_btn" id="at-edit-partition-${partition.uuid}"></span>
         </div>
-        <div class="at_icon_right">
+        <div class="at_subitem_right">
             <span class="mdi mdi-delete-outline at_delete_partition_btn" id="at-delete-partition-${partition.uuid}"></span>
         </div>
     `;
@@ -456,9 +550,6 @@ function displayFaces(polygon) {
     faceVertexContainer.innerHTML = '';
     const objectData = get3DXObjects();
     let object;
-    if (currentEditPartitionData) {
-        object = objectData.find(obj => obj.object.object_data.uuid === currentEditPartitionData.uuid);
-    }
     if (currentPartitionData) {
         object = objectData.find(obj => obj.object.object_data.uuid === currentPartitionData.uuid);
     }
@@ -478,6 +569,7 @@ function displayFaces(polygon) {
     */
     // Back button event listener for displaying partition list
     addEventListenerById('at-back-partition', goBackToPartitionList);
+    addEventListenerById('at-back-floors', goBackToFloorWallList);
     // Toggle visibility of face details when clicked
     batchAddEventListenerByClassName('at_face_name', (event) => {
         const targetElement = event.target;
@@ -514,9 +606,6 @@ function displayFaces(polygon) {
             });
         }
         let targetObject;
-        if (currentEditPartitionData) {
-            targetObject = _3DXObjects.find(obj => obj.object.object_data.uuid === currentEditPartitionData.uuid);
-        }
         if (currentPartitionData) {
             targetObject = _3DXObjects.find(obj => obj.object.object_data.uuid === currentPartitionData.uuid);
         }
@@ -558,16 +647,7 @@ function displayFaces(polygon) {
                 return wall;
             });
             let payload;
-            if (currentEditPartitionData) {
-                payload = {
-                    uuid: currentEditPartitionData.uuid,
-                    space_uuid: currentEditPartitionData.space_uuid,
-                    name: currentEditPartitionData.name,
-                    parent_uuid: currentEditPartitionData.parent_uuid,
-                    polygon_json: currentPolygonData
-                };
-            }
-            else if (currentPartitionData) {
+            if (currentPartitionData) {
                 payload = {
                     uuid: currentPartitionData.uuid,
                     space_uuid: currentPartitionData.space_uuid,
@@ -576,7 +656,7 @@ function displayFaces(polygon) {
                     polygon_json: currentPolygonData
                 };
             }
-            console.log("renderPolygon:", payload);
+            console.log("renderPolygon:", payload, getCurrentPolygon());
             // Re-render polygon    
             renderPolygon(payload);
             const undoPaylaod = {
@@ -591,27 +671,387 @@ function displayFaces(polygon) {
             notify.success(`${i18n.t('SuccessWallDelete')}`);
         }));
     });
+    batchAddEventListenerByClassName('at_edit_wall_btn', (event) => {
+        const targetElement = event.target;
+        const wallUuid = extractUUID(targetElement.getAttribute('id'));
+        handlePartitionWallEditBtn(wallUuid);
+    });
+    // input detect for floor material
+    inputFloorMaterial = document.getElementById('at-edit-floor-material-input');
+    inputFloorMaterial.addEventListener('input', onModeDetectFloorInput);
+    // input detect for wall material
+    inputWallMaterial = document.getElementById('at-edit-wall-input');
+    inputWallMaterial.addEventListener('input', onModeDetectWallInput);
+    //sets floor material value and icon
+    const floorJSON = JSON.parse(currentPartitionData.polygon_json);
+    setFloorMaterial(floorJSON.floor.material);
+    setFloorMaterialIcon(floorJSON.floor.material);
+    addEventListenerById('at-confirm-edit-floor-name', (event) => __awaiter(this, void 0, void 0, function* () {
+        console.log('@caroline this is clicked', currentPartitionData);
+        const targetEvent = event.target;
+        const floor = polygon.floor;
+        const floorMaterialConfirm = document.getElementById('at-confirm-edit-floor-name');
+        const floorMaterialEdit = document.getElementById('at-floor-edit-material-btn');
+        const floorMaterialField = document.getElementById('at-edit-floor-material-input');
+        const partitionData = JSON.parse(currentPartitionData.polygon_json);
+        const currentPartition = _3DXObjects.find(obj => obj.object.object_data.uuid === currentPartitionData.uuid);
+        if (partitionData) {
+            partitionData.floor.material = floorMaterial;
+            currentPartitionData.polygon_json = JSON.stringify(partitionData);
+        }
+        if (currentPartition) {
+            currentPartition.object.object_data.json_data.floor = {
+                material: floorMaterial
+            };
+            currentPolygonData.floor.material = floorMaterial;
+        }
+        const findPartition = currentPartitionDataArray.find(partition => {
+            const parsed = JSON.parse(partition.polygon_json);
+            return parsed.floor.uuid == floor.uuid;
+        });
+        if (findPartition != undefined) {
+            const parsePartition = JSON.parse(findPartition.polygon_json);
+            parsePartition.floor.material = floorMaterial;
+        }
+        //rerender to display material value in space
+        const polyData = {
+            uuid: currentPartition.object.object_data.uuid,
+            polygon_json: partitionData
+        };
+        renderPolygon(polyData);
+        dispatchSpaceEvent(SPACE_EVENTS.PARTITION_EDITED, { data: currentPartitionData });
+        // sets icon and input field back
+        floorMaterialField.disabled = true;
+        floorMaterialEdit.style.display = "block";
+        floorMaterialConfirm.style.display = "none";
+    }));
+    addEventListenerById('at-floor-edit-material-btn', (event) => __awaiter(this, void 0, void 0, function* () {
+        const floorMaterialConfirm = document.getElementById('at-confirm-edit-floor-name');
+        const floorMaterialEdit = document.getElementById('at-floor-edit-material-btn');
+        const floorMaterialField = document.getElementById('at-edit-floor-material-input');
+        floorMaterialField.disabled = false;
+        floorMaterialEdit.style.display = "none";
+        floorMaterialConfirm.style.display = "block";
+    }));
+    addEventListenerById('at-confirm-edit-wall-btn', (event) => __awaiter(this, void 0, void 0, function* () {
+        console.log('@caroline wall check', wallMaterial, currentWall.material, currentWall);
+        const wallEditMaterial = document.getElementById('at-wall-edit-material-btn');
+        const wallConfirmMaterial = document.getElementById('at-confirm-edit-wall-btn');
+        const wallMaterialInput = document.getElementById('at-edit-wall-input');
+        const partitionData = JSON.parse(currentPartitionData.polygon_json);
+        const currentPartition = _3DXObjects.find(obj => obj.object.object_data.uuid === currentPartitionData.uuid);
+        if (partitionData) {
+            const wallIndex = partitionData.walls.findIndex(wall => wall.uuid == currentWall.uuid);
+            if (wallIndex != undefined) {
+                partitionData.walls[wallIndex].material = wallMaterial;
+            }
+            currentPartitionData.polygon_json = JSON.stringify(partitionData);
+            console.log('@caroline partition data: ', currentPartitionData);
+        }
+        currentPartitionDataArray.some(partition => {
+            const parsed = JSON.parse(partition.polygon_json);
+            parsed.walls.find(wall => {
+                if (wall.uuid == currentWall.uuid) {
+                    wall.material = wallMaterial;
+                }
+            });
+        });
+        console.log('[wall] currentPartition: ', currentPartition);
+        if (currentPartition) {
+            const wall = currentPartition.object.object_data.json_data.walls.find(wall => wall.uuid == currentWall.uuid);
+            wall.material = wallMaterial;
+        }
+        currentWall.material = wallMaterial;
+        //rerender to display material value in space
+        const polyData = {
+            uuid: currentPartition.object.object_data.uuid,
+            polygon_json: partitionData
+        };
+        //  renderPolygon(polyData)
+        console.log('[wall] Partition to be saved: ', currentPartitionData, JSON.parse(currentPartitionData.polygon_json));
+        dispatchSpaceEvent(SPACE_EVENTS.PARTITION_EDITED, { data: currentPartitionData });
+        wallMaterialInput.disabled = true;
+        wallEditMaterial.style.display = "block";
+        wallConfirmMaterial.style.display = "none";
+    }));
+    addEventListenerById('at-wall-edit-material-btn', () => {
+        console.log('@caroline wall check in pencil', wallMaterial, currentWall.material);
+        const wallEditMaterial = document.getElementById('at-wall-edit-material-btn');
+        const wallConfirmMaterial = document.getElementById('at-confirm-edit-wall-btn');
+        const wallMaterialInput = document.getElementById('at-edit-wall-input');
+        wallMaterialInput.disabled = false;
+        wallEditMaterial.style.display = "none";
+        wallConfirmMaterial.style.display = "block";
+    });
+}
+function displayWall(wall) {
+    log.info("displayWall()", wall);
+    // Extract the wall name from the format "_wall-{number}" using regex
+    const match = wall.name.match(/wall-(\d+)$/);
+    let wallName = '';
+    if (match) {
+        const wallNumber = parseInt(match[1]) + 1;
+        wallName = `${i18n.t('Wall')} ${wallNumber}`;
+    }
+    const element = document.createElement('div');
+    element.classList.add('at_container');
+    const windowsHTML = wall.windows ?
+        `<div class="at_dropdown_item_container" id="at-window-list-${wall.uuid}" data-cy="at-vertex-list-${wall.uuid}" style="display: flex;"></div>` :
+        ``;
+    log.info("windowsHTML", wall.windows, windowsHTML);
+    element.innerHTML = `
+            <div class="at_item at_face_item selected">
+            <div class="at_subitem_left">
+                <span class="mdi mdi-vector-line"></span>
+            </div>
+            <div class="at_subitem_center" id="at-expand-btn-${wall.uuid}" data-cy="at-expand-btn-${wall.uuid}">
+                ${wallName}
+                <span class="mdi mdi-chevron-up" id="at-chevron-${wall.uuid}"></span>
+            </div>
+            <div class="at_subitem_right at_invisible">
+                <span class="mdi mdi-delete-outline"></span>
+            </div>
+        </div>
+        ${windowsHTML}
+    `;
+    if (windowsHTML) {
+        const windowItemsContainer = element.querySelector(`#at-window-list-${wall.uuid}`);
+        wall.windows.forEach((window) => {
+            const row = displayWindows(window);
+            windowItemsContainer.appendChild(row);
+        });
+    }
+    setupWallWindowToggle(element, wall);
+    return element;
+}
+function setupWallWindowToggle(element, wall) {
+    const wallNameBtn = element.querySelector(`#at-expand-btn-${wall.uuid}`);
+    const windowList = element.querySelector(`#at-window-list-${wall.uuid}`);
+    const chevronIcon = element.querySelector(`#at-chevron-${wall.uuid}`);
+    if (!wallNameBtn || !windowList || !chevronIcon)
+        return;
+    wallNameBtn.addEventListener("click", () => {
+        const isHidden = windowList.style.display === "none";
+        windowList.style.display = isHidden ? "flex" : "none";
+        // Toggle chevron direction
+        chevronIcon.classList.toggle("mdi-chevron-up", isHidden);
+        chevronIcon.classList.toggle("mdi-chevron-down", !isHidden);
+    });
+}
+function displayWindows(window) {
+    var _a;
+    log.info("displayWindows()", window);
+    const element = document.createElement('div');
+    element.classList.add('at_dropdown_item');
+    // Extract the wall name from the format "_wall-{number}" using regex
+    const match = window.name.match(/window-(\d+)$/);
+    let windowName = '';
+    if (match) {
+        const wallNumber = parseInt(match[1]);
+        windowName = `${i18n.t('Window')} ${wallNumber}`;
+    }
+    else {
+        windowName = window.name;
+    }
+    if (currentWall && currentWall.material) {
+        wallMaterial = currentWall.material;
+        inputWallMaterial.value = currentWall.material;
+    }
+    element.innerHTML = `
+        <div class="at_dropdown_subitem_container">
+            <div class="at_subitem_left">
+                <span class="mdi mdi-window-closed-variant"></span>
+            </div>
+            <div class="at_subitem_center">
+                <div class="at_name" id="at-window-name-${window.index}" data-index="${window.index}">${windowName}</div>
+                <div class="at_tooltip" id="at-window-name-tooltip-${window.index}">${windowName}</div>
+                <div class="at_distance">${window.area.toFixed(2)} m²</div>   
+            </div>
+            <div class="at_subitem_right">
+                <span class="mdi mdi-pencil" id="at-edit-window-btn-${window.index}"></span>        
+                <span class="mdi mdi-check" id="at-confirm-edit-window-${window.index}" data-cy="at-confirm-edit-window-${window.index}" style="display: none;"></span> 
+                <span class="mdi mdi-delete-outline" id="at-delete-window-btn-${window.index}"></span>
+            </div>
+        </div>
+        <div class="at_edit_name" id="at-edit-window-name-${window.index}" data-index="${window.index}" style="display: none;">
+            <input class="at_edit_name_input" type="text" id="at-edit-window-name-input-${window.index}" data-cy="at-edit-window-name-input-${window.index}" value="${windowName}" placeholder="${i18n.t('EnterNameHere')}">
+        </div>
+        <div class="at_edit_material" id="at-edit-window-material-${window.index}" data-index="${window.index}" style="display: none;">
+            <input class="at_edit_material_input" type="text" id="at-edit-window-material-input-${window.index}" data-cy="at-edit-window-material-input-${window.index}"   value="${(_a = window.material) !== null && _a !== void 0 ? _a : ''}"  placeholder="${i18n.t('EnterMaterialHere')}">
+        </div>
+    `;
+    const nameElement = element.querySelector(`#at-window-name-${window.index}`);
+    const tooltipElement = element.querySelector(".at_tooltip");
+    setupTooltip(nameElement, tooltipElement);
+    setupEditWindow(element, window);
+    setupDeleteWindow(element, window);
+    return element;
+}
+function setupTooltip(nameElement, tooltipElement) {
+    nameElement.addEventListener("mouseenter", () => {
+        const isEllipsis = nameElement.offsetWidth < nameElement.scrollWidth;
+        tooltipElement.style.display = isEllipsis ? "block" : "none";
+    });
+    nameElement.addEventListener("mouseleave", () => {
+        tooltipElement.style.display = "none";
+    });
+}
+function setupEditWindow(element, window) {
+    const editBtn = element.querySelector(`#at-edit-window-btn-${window.index}`);
+    // Edit name elements
+    const editNameContainer = element.querySelector(`.at_edit_name#at-edit-window-name-${window.index}`);
+    const inputName = element.querySelector(`#at-edit-window-name-input-${window.index}`);
+    const nameLabel = element.querySelector(`#at-window-name-${window.index}`);
+    // Edit material elements
+    const editMaterialContainer = element.querySelector(`.at_edit_material#at-edit-window-material-${window.index}`);
+    const inputMaterial = element.querySelector(`#at-edit-window-material-input-${window.index}`);
+    const confirmBtn = element.querySelector(`#at-confirm-edit-window-${window.index}`);
+    if (!editBtn || !editNameContainer || !inputName || !nameLabel || !editMaterialContainer || !inputMaterial)
+        return;
+    // Show inputs when edit icon is clicked
+    editBtn.addEventListener("click", () => {
+        editNameContainer.style.display = "flex";
+        editMaterialContainer.style.display = "flex";
+        editBtn.style.display = "none";
+        confirmBtn.style.display = "flex";
+        inputName.focus();
+        log.info("3DXOBJECT", get3DXObjects());
+        // enableVerticeControls(window.component)
+    });
+    // // Confirm edit name and material
+    confirmBtn.addEventListener("click", () => {
+        // Update window name
+        const newName = inputName.value.trim();
+        window.name = newName || window.name;
+        nameLabel.textContent = window.name;
+        editNameContainer.style.display = "none";
+        const newMaterial = inputMaterial.value.trim();
+        window.material = newMaterial || window.material;
+        editMaterialContainer.style.display = "none";
+        editBtn.style.display = "flex";
+        confirmBtn.style.display = "none";
+        const windowTooltip = document.getElementById(`at-window-name-tooltip-${window.index}`);
+        windowTooltip.innerText = `${window.name}`;
+        saveWindowChanges();
+    });
+}
+function saveWindowChanges() {
+    updateWallInPolygon(currentWall);
+    updatePartitionData();
+    setCurrentPolygon(currentObject);
+    renderCurrentPartition();
+    // dispatchSpaceEvent(SPACE_EVENTS.PARTITION_EDITED, { data: currentPartitionData });
+}
+// --- helpers ---
+function updateWallInPolygon(updatedWall) {
+    const wallIndex = currentPolygonData.walls.findIndex(w => w.uuid === updatedWall.uuid);
+    if (wallIndex !== -1)
+        currentPolygonData.walls[wallIndex] = updatedWall;
+}
+function updatePartitionData() {
+    const currentPartitionIndex = currentPartitionDataArray.findIndex(p => p.uuid === currentPartitionData.uuid);
+    if (currentPartitionIndex === -1)
+        return;
+    currentPartitionDataArray[currentPartitionIndex].polygon_json = JSON.stringify(currentPolygonData);
+    currentPartitionData = currentPartitionDataArray[currentPartitionIndex];
+}
+function renderCurrentPartition() {
+    if (!currentPartitionData)
+        return;
+    const payload = {
+        uuid: currentPartitionData.uuid,
+        space_uuid: currentPartitionData.space_uuid,
+        name: currentPartitionData.name,
+        parent_uuid: currentPartitionData.parent_uuid,
+        polygon_json: currentPolygonData
+    };
+    renderPolygon(payload);
+}
+function setupDeleteWindow(element, window) {
+    const deleteBtn = element.querySelector(`#at-delete-window-btn-${window.index}`);
+    if (!deleteBtn)
+        return;
+    deleteBtn.addEventListener("click", () => {
+        toggleModal();
+        setModalAction({
+            title: i18n.t("DeleteWindow"),
+            description: i18n.t("ConfirmDeleteWindow"),
+            buttonLabel: i18n.t("YesDelete"),
+        }, () => __awaiter(this, void 0, void 0, function* () {
+            element.remove();
+            log.info("Deleted window:", window.index);
+            toggleModal(false);
+            // Update wall windows
+            currentPolygonData.walls = currentPolygonData.walls.map(wall => {
+                if (wall.uuid !== currentWall.uuid)
+                    return wall;
+                if (wall.windows.length === 1) {
+                    const windowLists = document.getElementById(`at-window-list-${wall.uuid}`);
+                    if (windowLists)
+                        windowLists.style.display = "none";
+                }
+                currentWall = Object.assign(Object.assign({}, wall), { windows: wall.windows.filter((w) => w.index !== window.index) });
+                return currentWall;
+            });
+            // Save + rerender window
+            currentObject.object.object_data.json_data = currentPolygonData;
+            saveWindowChanges();
+            notify.success(`${i18n.t('SuccessWindowDelete')}`);
+            log.info("currentPartition polygonJson", JSON.parse(currentPartitionData.polygon_json));
+            log.info("currentObject", currentObject);
+            log.info("currentWall", currentWall);
+            log.info("currentPolygonData", currentPolygonData);
+        }));
+    });
 }
 /**
  * Handles the transition back to the partition list view by updating the visibility of relevant UI elements.
  * Resets the edit partition data and displays the current partitions.
  */
 function goBackToPartitionList() {
-    console.log('goBackToPartitionList()');
-    // Show the partition title and list, hide the face title and vertex container
-    document.getElementById('at-partition-title').style.display = 'flex';
-    document.getElementById('at-face-title').style.display = 'none';
-    document.getElementById('at-partition-item-container').style.display = 'flex';
-    document.getElementById('at-face-vertex-container').style.display = 'none';
-    document.getElementById('at-edit-partition-name').style.display = 'none';
-    // Display the list of partitions
+    log.info("goBackToPartitionList()");
+    const elements = {
+        'at-partition-title': 'flex',
+        'at-face-title': 'none',
+        'at-partition-item-container': 'flex',
+        'at-face-vertex-container': 'none',
+        'at-edit-partition-name': 'none'
+    };
+    Object.entries(elements).forEach(([id, value]) => {
+        const el = document.getElementById(id);
+        if (el)
+            el.style.display = value;
+    });
+    log.info("currentPartitionDataArray", currentPartitionDataArray);
     displayPartitions(currentPartitionDataArray);
-    // Clear the current edit partition data
-    currentEditPartitionData = null;
+    isEditPartition = false;
     currentPartitionData = null;
+    setCurrentPolygon(undefined);
     cancelDrawing();
     setDrawingMode(false);
 }
+function goBackToFloorWallList() {
+    log.info("goBackToFloorWallList()");
+    const elements = {
+        'at-face-title': 'flex',
+        'at-window-door-title': 'none',
+        'at-edit-partition-name': 'flex',
+        'at-add-window-door-btn': 'none',
+        'at-draw-partition-form-btn': 'block',
+        'at-edit-wall-material': 'none'
+    };
+    Object.entries(elements).forEach(([id, value]) => {
+        document.getElementById(id).style.display = value;
+    });
+    log.info("currentPartitionData", currentPartitionData);
+    if (currentPartitionData) {
+        displayFaces(JSON.parse(currentPartitionData.polygon_json));
+        if (currentObject) {
+            setCurrentPolygon(currentObject);
+            handleModifyPartition(currentObject);
+        }
+    }
+}
 /**
  * Displays the floor information in the UI, including the floor name, edit options, and associated vertices.
  * @param floor - The floor data to display.
@@ -620,102 +1060,40 @@ function goBackToPartitionList() {
 function displayFloor(floor, walls, floorModel) {
     const floorModelUUID = floorModel ? floorModel.name : null;
     const element = document.createElement('div');
-    element.classList.add('at_face_vertex_item');
+    element.classList.add('at_container');
     element.innerHTML = `
-        <div class="at_face_item">
-            <div class="at_icon_left">
+        <div class="at_item at_face_item selected">
+            <div class="at_subitem_left">
                 <span class="mdi mdi-perspective-less"></span>
             </div>
-            <div class="at_face_name" id="at-expand-btn-${floor.uuid}" data-cy="at-expand-btn-${floor.uuid}" model-id="${floorModelUUID}">
+            <div class="at_subitem_center at_face_name" id="at-expand-btn-${floor.uuid}" data-cy="at-expand-btn-${floor.uuid}" model-id="${floorModelUUID}">
                 ${i18n.t(`Floor`)}
-                <span class="mdi mdi-chevron-down" id="at-expand-btn-${floor.uuid}" data-cy="at-expand-btn-${floor.uuid}" model-id="${floorModelUUID}"></span>
+                <span class="mdi mdi-chevron-up" id="at-expand-btn-${floor.uuid}" data-cy="at-expand-btn-${floor.uuid}" model-id="${floorModelUUID}"></span>
             </div>
-            <div class="at_icon_right">
+            <div class="at_subitem_right">
                 <span class="mdi mdi-delete-outline"></span>
             </div>
         </div>
-        <div class="at_edit_name" id="at-edit-name-${floor.uuid}" data-cy="at-edit-name-${floor.uuid}">
-            <div class="at_edit_name_text" id="at-edit-name-text-${floor.uuid}" data-cy="at-edit-name-text-${floor.uuid}">
-                ${i18n.t('ClickEditName')}
-                <span class="mdi mdi-pencil at_icon_right" id="at-edit-name-text-${floor.uuid}"></span>
-            </div>
-            <div class="at_edit_name_input" id="at-edit-name-input-${floor.uuid}" data-cy="at-edit-name-input-${floor.uuid}">
-                <input class="at_edit_face_name_input" type="text" name="edit_face_name" id="at-edit-face-name-input" data-cy="at-edit-face-name-input" placeholder="Enter name here">
-                <span class="mdi mdi-check at_confirm_edit_name" id="at-confirm-edit-name-${floor.uuid}" data-cy="at-confirm-edit-name-${floor.uuid}"></span>
-            </div>
+    
+        <div class="at_edit_name" id="at-edit-floor-material">
+            <input class="at_edit_name_input at_ml_1" type="text" id="at-edit-floor-material-input" data-cy="at-edit-floor-material-input" value="${floor.material ? floor.material : ''}" placeholder="${i18n.t('EnterFloorMaterial')}">
+            <span class="mdi mdi-pencil at_mr-1" style="display: none; cursor: pointer;" id="at-floor-edit-material-btn"></span>            
+            <span class="mdi mdi-check at_mr-1" id="at-confirm-edit-floor-name" style="display: none;"></span>
         </div>
-        <div class="at_vertex_list" id="at-vertex-list-${floor.uuid}" data-cy="at-vertex-list-${floor.uuid}"></div>
+
+        <div class="at_dropdown_item_container" id="at-vertex-list-${floor.uuid}" data-cy="at-vertex-list-${floor.uuid}" style="display: flex;"></div>
     `;
-    // Get the at_vertex_list container for this floor
+    // Get the at_dropdown_item_container container for this floor
     const vertexListContainer = element.querySelector(`#at-vertex-list-${floor.uuid}`);
-    // Append lines to the at_vertex_list container
+    // Append lines to the at_dropdown_item_container container
     floor.edges.forEach((vertex, index) => {
         if (!walls[index].options.is_deleted) {
-            const row = displayWalls(vertex, walls[index], index + 1, 'floor');
+            const row = displayWalls(vertex, walls[index], index, 'floor');
             vertexListContainer.appendChild(row); // Append to the correct container
         }
     });
     return element;
 }
-/**
- * Displays the wall information in the UI, including the wall name, edit options, and associated vertices.
- * @param wall - The wall data to display.
- * @returns The created HTML element representing the wall and its associated data.
- *\/
-function displayWalls(wall: WallPolyData, wallModel): HTMLElement {
-    const wallModelUUID = wallModel ? wallModel.name : null;
-
-    // Extract the wall name from the format "_wall-{number}" using regex
-    const match = wall.name.match(/wall-(\d+)$/);
-    let wallName = '';
-
-    if (match) {
-        const wallNumber = parseInt(match[1]) + 1;
-        wallName = `${i18n.t('Wall')} ${wallNumber}`;
-    }
-
-    const element = document.createElement('div');
-    element.classList.add('at_face_vertex_item');
-
-    element.innerHTML = `
-        <div class="at_face_item">
-            <div class="at_icon_left">
-                <span class="mdi mdi-perspective-less at_face_icon_rotate_270"></span>
-            </div>
-            <div class="at_face_name" id="at-expand-btn-${wall.uuid}" data-cy="at-expand-btn-${wall.uuid}" model-id="${wallModelUUID}">
-                ${wallName}
-                <span class="mdi mdi-chevron-down" id="at-expand-btn-${wall.uuid}" data-cy="at-expand-btn-${wall.uuid}" model-id="${wallModelUUID}"></span>
-            </div>
-            <div class="at_icon_right at_invisible">
-                <span class="mdi mdi-delete-outline"></span>
-            </div>
-        </div>
-        <div class="at_edit_name" id="at-edit-name-${wall.uuid}" data-cy="at-edit-name-${wall.uuid}">
-            <div class="at_edit_name_text" id="at-edit-name-text-${wall.uuid}" data-cy="at-edit-name-text-${wall.uuid}">
-                ${i18n.t('ClickEditName')}
-                <span class="mdi mdi-pencil at_icon_right" id="at-edit-name-text-${wall.uuid}"></span>
-            </div>
-            <div class="at_edit_name_input" id="at-edit-name-input-${wall.uuid}" data-cy="at-edit-name-input-${wall.uuid}">
-                <input class="at_edit_face_name_input" type="text" name="edit_face_name" id="at-edit-face-name-input" data-cy="at-edit-face-name-input" placeholder="Enter name here">
-                <span class="mdi mdi-check at_confirm_edit_name" id="at-confirm-edit-name-${wall.uuid}" data-cy="at-confirm-edit-name-${wall.uuid}"></span>
-            </div>
-        </div>
-        <div class="at_vertex_list" id="at-vertex-list-${wall.uuid}" data-cy="at-vertex-list-${wall.uuid}">
-        </div>
-    `;
-
-    // Get the at_vertex_list container for this wall
-    const vertexListContainer = element.querySelector(`#at-vertex-list-${wall.uuid}`);
-
-    // Append lines to the at_vertex_list container
-    wall.edges.forEach((vertex, index) => {
-        const row = displayWalls(vertex, index + 1, 'wall');
-        vertexListContainer.appendChild(row); // Append to the correct container
-    });
-
-    return element;
-}
-*/
 /**
  * Displays the line information for a given vertex, including its name, distance, and delete icon.
  * The delete icon visibility depends on whether the face type is 'floor'.
@@ -734,28 +1112,28 @@ function displayWalls(vertex, wall, index, faceType) {
         wallName = `${i18n.t('Wall')} ${wallNumber}`;
     }
     const element = document.createElement('div');
-    element.classList.add('at_vertex_item');
+    element.classList.add('at_dropdown_item');
     // Determine whether to display the delete icon based on faceType ('floor' only)
     const deleteIconHtml = faceType === 'floor' ?
-        `<div class="at_vertex_icon_right at_delete_wall_btn" id="at-delete-wall-btn_${wall.uuid}">
-            <span class="mdi mdi-delete-outline" id="at-delete-wall-btn_${wall.uuid}"></span>
+        `<div class="at_subitem_right">
+            <span class="mdi mdi-pencil at_edit_wall_btn" id="at-edit-wall-btn-${wall.uuid}" index=${index}></span>
+            <span class="mdi mdi-delete-outline at_delete_wall_btn" id="at-delete-wall-btn-${wall.uuid}"></span>
         </div>` :
-        `<div class="at_vertex_icon_right at_invisible">
-            <span class="mdi mdi-delete-outline"></span>
+        `<div class="at_subitem_right">
+            <span class="mdi mdi-pencil at_edit_wall_btn" id="at-edit-wall-btn-${wall.uuid}" index=${index}></span>
+            <span class="mdi mdi-delete-outline at_invisible"></span>
         </div>`;
     element.innerHTML = `
-        <div class="at_vertex_icon_left">
-            <span class="mdi mdi-vector-line"></span>
-        </div>
-        <div class="at_vertex_center">
-            <div class="at_vertex_name">
-                ${wallName}
+        <div class="at_dropdown_subitem_container">
+            <div class="at_subitem_left">
+                <span class="mdi mdi-vector-line"></span>
             </div>
-            <div class="at_vertex_distance">
-                ${vertex.length + " m"}
+            <div class="at_subitem_center">
+                <div class="at_name">${wallName}</div>
+                <div class="at_distance">${wall.area.toFixed(2) + " m²"}</div>
             </div>
+            ${deleteIconHtml}
         </div>
-        ${deleteIconHtml}
     `;
     return element;
 }
@@ -783,13 +1161,25 @@ function addEventListenerById(id, callback) {
 export function clearPartitionForm() {
     console.log('clearPartitionForm()');
     goBackToPartitionList();
+    hideElement('at-window-door-title');
+    displayElement('at-draw-partition-form-btn', 'block');
+    hideElement('at-add-window-door-btn');
+    hideElement('at-edit-wall-material');
+    resetDrawingConfig();
     cancelDrawing();
     const partitionContainer = document.getElementById('at-partition-item-container');
     partitionContainer.style.display = 'none';
+    const addDoorButton = document.getElementById('at-add-window-door-btn');
+    addDoorButton.classList.remove('at_add_window_door_btn_active');
+    addDoorButton.classList.add('at_add_window_door_btn');
+    addDoorButton.innerHTML = `
+        ${i18n.t('AddWindowDoor')}
+        <span class="mdi mdi-window-closed-variant"></span>
+    `;
     document.getElementById('at-room-form').reset();
     currentPartitionDataArray = [];
     currentEditRoomData = null;
-    currentEditPartitionData = null;
+    isEditPartition = false;
     currentPolygonData = null;
     currentPartitionData = null;
     currentDeletePartitionData = null;
@@ -798,6 +1188,8 @@ export function clearPartitionForm() {
     savedPartitionDataArray = [];
     currentHighlightedFace = null;
     previousPartitionData = null;
+    isDrawing = false;
+    drawingMode = null;
 }
 /**
  * Cancels the drawing action for a partition.
@@ -826,6 +1218,7 @@ function cancelDrawing() {
     }
     cancelDraw();
     isDrawing = false;
+    drawingMode = null;
     const drawRoomBtn = document.getElementById('at-draw-partition-form-btn');
     drawRoomBtn.classList.remove('at_draw_partition_btn_active');
     drawRoomBtn.classList.add('at_draw_partition_btn');
@@ -851,6 +1244,7 @@ function startDrawing() {
     }
     startDraw();
     isDrawing = true;
+    drawingMode = 'partition';
     const drawRoomBtn = document.getElementById('at-draw-partition-form-btn');
     drawRoomBtn.classList.remove('at_draw_partition_btn');
     drawRoomBtn.classList.add('at_draw_partition_btn_active');
@@ -963,12 +1357,12 @@ export function clearTempCurrentPolygon() {
  */
 export function setPolygonData(payload) {
     console.log('setPolygonData()', payload);
-    // let currentPolygon = getCurrentPolygon()
-    // console.log('currentPolygon ', currentPolygon);
-    // if (currentPolygon) {
-    //     currentPolygon.object.object_data.json_data = payload
+    // let currentObjectData = getCurrentPolygon()
+    // console.log('currentObjectData ', currentObjectData);
+    // if (currentObjectData) {
+    //     currentObjectData.object.object_data.json_data = payload
     // }
-    // setCurrentPolygon(currentPolygon)
+    // setCurrentPolygon(currentObjectData)
     // Helper function to round numbers to 2 decimals
     function roundToFourDecimals(value) {
         if (typeof value === "number") {
@@ -1020,22 +1414,24 @@ export function setCurrentPartitionData() {
         const floorLevel = ((_a = document.getElementById('at-room-floor-level-input')) === null || _a === void 0 ? void 0 : _a.value) || null;
         const currentUrl = window.location.href;
         const spaceUUID = extractUUID(currentUrl);
-        let currentPolygon = null;
+        let currentObjectData = null;
         yield new Promise(resolve => {
             const interval = setInterval(() => {
                 var _a, _b;
-                currentPolygon = getCurrentPolygon();
-                console.log("currentPolygon", currentPolygon);
-                if (((_b = (_a = currentPolygon === null || currentPolygon === void 0 ? void 0 : currentPolygon.object) === null || _a === void 0 ? void 0 : _a.object_data) === null || _b === void 0 ? void 0 : _b.uuid) !== undefined) {
+                currentObjectData = getCurrentPolygon();
+                console.log("currentObjectData", currentObjectData);
+                if (((_b = (_a = currentObjectData === null || currentObjectData === void 0 ? void 0 : currentObjectData.object) === null || _a === void 0 ? void 0 : _a.object_data) === null || _b === void 0 ? void 0 : _b.uuid) !== undefined) {
                     clearInterval(interval);
                     resolve();
                 }
-                if (currentPolygon == undefined) {
+                if (currentObjectData == undefined) {
                     currentPolygonData = null;
                     clearInterval(interval);
                     resolve();
                 }
-                displayFaceLists();
+                if (drawingMode === 'partition') {
+                    displayFaceLists();
+                }
             }, 50); // Check every 50ms
         });
         if (currentPolygonData) {
@@ -1043,7 +1439,7 @@ export function setCurrentPartitionData() {
             polygonData.floor.floor_level = Number(floorLevel); // Set the floor level from the input
             // Create a new partition data payload
             const newPayload = {
-                uuid: currentPolygon.object.object_data.uuid,
+                uuid: currentObjectData.object.object_data.uuid,
                 space_uuid: spaceUUID,
                 name: null,
                 parent_uuid: null,
@@ -1052,24 +1448,25 @@ export function setCurrentPartitionData() {
             if (currentEditRoomData) {
                 newPayload.parent_uuid = currentEditRoomData.uuid; // Set the parent UUID if editing an existing room
             }
-            if (currentEditPartitionData) {
-                newPayload.name = currentEditPartitionData.name;
+            if (isEditPartition) {
+                newPayload.name = currentPartitionData.name;
                 console.log("newPayload.name", newPayload.name);
-                // currentPartitionDataArray = currentPartitionDataArray.map(partition => 
-                //     partition.uuid === currentEditPartitionData.uuid 
-                //         ? { ...partition, uuid: newPayload.uuid }
-                //         : partition
-                // );
-                // dispatchSpaceEvent(SPACE_EVENTS.PARTITION_DISPOSED, currentEditPartitionData);
-                // currentEditPartitionData.uuid = newPayload.uuid
             }
             if (currentHighlightedFace) {
                 setMeshChildrenMaterialProperty(currentHighlightedFace.component, currentHighlightedFace.name, currentHighlightedFace.type, currentHighlightedFace.value);
             }
-            //if (!currentEditPartitionData){
             updatePartitionDataArray(newPayload, currentPartitionDataArray);
-            //}
-            displayFaces(currentPolygonData);
+            if (drawingMode === 'partition') {
+                displayFaces(currentPolygonData);
+            }
+            else if (drawingMode === 'window') {
+                log.info("current wall", currentWall);
+                // Update current edit wall display
+                currentWall = currentPolygonData.walls.find(wall => wall.uuid == currentWall.uuid);
+                const faceVertexContainer = document.getElementById('at-face-vertex-container');
+                faceVertexContainer.innerHTML = '';
+                faceVertexContainer.append(displayWall(currentWall));
+            }
         }
         else {
             const faceVertexContainer = document.getElementById('at-face-vertex-container');
@@ -1085,22 +1482,124 @@ export function setCurrentPartitionData() {
     });
 }
 function updatePartitionDataArray(payload, currentPartitionDataArray) {
-    // Find the index of the partition with the same uuid
-    const existingIndex = currentPartitionDataArray.findIndex((partition) => partition.uuid === payload.uuid);
-    if (existingIndex !== -1) {
-        // Remove the existing partition
-        currentPartitionDataArray.splice(existingIndex, 1);
+    log.info("updatePartitionDataArray", payload, currentPartitionDataArray);
+    if (drawingMode === 'partition') {
+        // Find the index of the partition with the same uuid
+        const existingIndex = currentPartitionDataArray.findIndex((partition) => partition.uuid === payload.uuid);
+        const partitionName = document.getElementById('at-edit-partition-name-input');
+        if (existingIndex !== -1) {
+            if (payload.name == null)
+                payload.name = partitionName.value || `${i18n.t('Partition')} ${currentPartitionDataArray.length}`;
+            currentPartitionDataArray[existingIndex] = Object.assign(Object.assign({}, currentPartitionDataArray[existingIndex]), payload);
+        }
+        if (existingIndex === -1) {
+            if (payload.name == null)
+                payload.name = partitionName.value || `${i18n.t('Partition')} ${currentPartitionDataArray.length + 1}`;
+            log.info("@@ payload", payload.name);
+            // Add the new partition
+            currentPartitionDataArray.push(payload);
+            newlyAddedPartition.push(payload);
+            console.log("newlyAddedPartition", payload);
+        }
+        currentPartitionData = payload;
     }
-    payload.name = `${i18n.t('Partition')} ${currentPartitionDataArray.length + 1}`;
-    currentPartitionDataArray.push(payload);
-    currentPartitionData = payload;
-    if (existingIndex === -1) {
-        // Add the new partition
-        newlyAddedPartition.push(payload);
-        console.log("newlyAddedPartition", payload);
+    else if (drawingMode === 'window') {
+        // Update current partition data
+        currentPartitionData.polygon_json = JSON.stringify(currentPolygonData);
+        // Update current partition data array
+        const currentPartitionDataIndex = currentPartitionDataArray.findIndex(partitionData => partitionData.uuid = currentPartitionData.uuid);
+        currentPartitionDataArray[currentPartitionDataIndex] = currentPartitionData;
     }
     dispatchSpaceEvent(SPACE_EVENTS.PARTITION_EDITED, { data: currentPartitionData });
 }
+function onModeDetectFloorInput(event) {
+    //@ts-expect-error
+    console.log('@caroline onModeDetectFloorInput()', event.target.value);
+    const target = event.target;
+    const floorMaterialValue = target.value;
+    setFloorMaterial(floorMaterialValue);
+    //@ts-expect-error
+    const floorID = event.target.id.split("input-")[1];
+    console.log('@caroline User type material: ', floorMaterialValue, floorID);
+    const floorEditMaterial = document.getElementById('at-floor-edit-material-btn');
+    const floorConfirmMaterial = document.getElementById('at-confirm-edit-floor-name');
+    if (floorMaterialValue) {
+        floorEditMaterial.style.display = "none";
+        floorConfirmMaterial.style.display = "block";
+    }
+    else {
+        floorEditMaterial.style.display = "block";
+        floorConfirmMaterial.style.display = "none";
+    }
+}
+function setFloorMaterial(material) {
+    console.log('setFloorMaterial()', material);
+    floorMaterial = material;
+}
+function onModeDetectWallInput(event) {
+    console.log('onModeDetectWallInput()', event);
+    const target = event.target;
+    const wallMaterialValue = target.value;
+    const wallEditMaterial = document.getElementById('at-wall-edit-material-btn');
+    const wallConfirmMaterial = document.getElementById('at-confirm-edit-wall-btn');
+    setWallMaterial(wallMaterialValue);
+    if (wallMaterialValue) {
+        wallEditMaterial.style.display = "none";
+        wallConfirmMaterial.style.display = "block";
+    }
+    else {
+        wallEditMaterial.style.display = "block";
+        wallConfirmMaterial.style.display = "none";
+    }
+}
+function setWallMaterial(material) {
+    console.log('setWallMaterial()');
+    wallMaterial = material;
+}
+function setFloorMaterialIcon(material) {
+    console.log('setFloorMaterialIcon', material);
+    const floorEditMaterial = document.getElementById('at-floor-edit-material-btn');
+    const floorConfirmMaterial = document.getElementById('at-confirm-edit-floor-name');
+    const floorMaterialContainer = document.getElementById('at-edit-floor-material');
+    const floorMaterialInput = document.getElementById('at-edit-floor-material-input');
+    if (floorMaterialContainer && floorMaterialInput) {
+        console.log('setFloorMaterialIcon inside first if', material);
+        if (!material) {
+            console.log('setFloorMaterialIcon no material', material);
+            floorEditMaterial.style.display = 'none';
+            floorConfirmMaterial.style.display = 'none';
+            floorMaterialInput.disabled = false;
+        }
+        else {
+            console.log('setFloorMaterialIcon have material', material);
+            floorEditMaterial.style.display = 'block';
+            floorConfirmMaterial.style.display = 'none';
+            floorMaterialInput.disabled = true;
+        }
+    }
+}
+// sets the icon for wall material
+function setWallMaterialIcon(material) {
+    console.log('setFloorMaterialIcon()');
+    const wallEditMaterial = document.getElementById('at-wall-edit-material-btn');
+    const wallConfirmMaterial = document.getElementById('at-confirm-edit-wall-btn');
+    const wallInputValue = document.getElementById('at-edit-wall-input');
+    const wallContainer = document.getElementById('at-edit-wall-material');
+    if (wallContainer) {
+        if (!material) {
+            wallEditMaterial.style.display = 'none';
+            wallConfirmMaterial.style.display = 'none';
+            wallInputValue.disabled = false;
+            wallInputValue.value = '';
+        }
+        else {
+            wallConfirmMaterial.style.display = 'none';
+            wallEditMaterial.style.display = 'block';
+            wallInputValue.disabled = true;
+            wallInputValue.value = material;
+        }
+    }
+}
 export function getCurrentPartitionData() {
     return currentPartitionData;
 }
@@ -1110,9 +1609,12 @@ export function getNewlyAddedPartition() {
 export function getDeletedSavedPartitionArray() {
     return deletedSavedPartitionArray;
 }
-export function getDrawingMode() {
+export function getIsDrawing() {
     return isDrawing;
 }
+export function getDrawingMode() {
+    return drawingMode;
+}
 export function setDrawingMode(state) {
     if (typeof state !== 'boolean') {
         log.error("Invalid parameter value");
@@ -1129,3 +1631,44 @@ export function getPreviousPartitionData() {
 export function setPreviousPartitionData(payload) {
     previousPartitionData = payload;
 }
+/**
+ * Handles the partition wall edit button click by switching to wall editing mode and updating the UI.
+ * @param wallUuid - The unique identifier of the wall to edit
+ */
+export function handlePartitionWallEditBtn(wallUuid) {
+    return __awaiter(this, void 0, void 0, function* () {
+        log.info("currentPartitionData", currentPartitionData);
+        log.info("polygonJson", JSON.parse(currentPartitionData.polygon_json));
+        log.info("getCurrentPolygon()", getCurrentPolygon());
+        setDrawingMode(false);
+        const elements = {
+            'at-face-title': 'none',
+            'at-window-door-title': 'flex',
+            'at-edit-partition-name': 'none',
+            'at-add-window-door-btn': 'block',
+            'at-draw-partition-form-btn': 'none',
+            'at-edit-wall-material': 'flex'
+        };
+        Object.entries(elements).forEach(([id, value]) => {
+            document.getElementById(id).style.display = value;
+        });
+        const faceVertexContainer = document.getElementById('at-face-vertex-container');
+        faceVertexContainer.innerHTML = '';
+        currentWall = JSON.parse(currentPartitionData.polygon_json).walls.find((wall) => wall.uuid == wallUuid);
+        log.info("currenWall", currentWall);
+        const wallBottomMidPoint = {
+            // @ts-ignore
+            x: ((currentWall.edges[0].start.x + currentWall.edges[1].start.x + currentWall.edges[2].start.x + currentWall.edges[3].start.x) / 4),
+            // @ts-ignore
+            y: ((currentWall.edges[0].start.y + currentWall.edges[1].start.y + currentWall.edges[2].start.y + currentWall.edges[3].start.y) / 4),
+            // @ts-ignore
+            z: ((currentWall.edges[0].start.z + currentWall.edges[1].start.z + currentWall.edges[2].start.z + currentWall.edges[3].start.z) / 4),
+        };
+        yield goToPosition(wallBottomMidPoint);
+        faceVertexContainer.append(displayWall(currentWall));
+        //sets material and icon
+        setWallMaterial(currentWall.material);
+        setWallMaterialIcon(currentWall.material);
+        cancelDrawing();
+    });
+}