architwin 1.14.13 → 1.14.15

package/lib/atwinui/components/toolbar/i18n.js

@@ -233,7 +233,9 @@ i18n
                 "ConfirmDeleteWindow": "Are you sure you want to delete this window?",
                 "SuccessWindowDelete": "Succesfully deleted window",
                 "EnterFloorMaterial": "Enter floor material",
-                "EnterWallMaterial": "Enter wall material"
+                "EnterWallMaterial": "Enter wall material",
+                "Window": "Window",
+                "CannotBackDrawingMode": "Cannot go back while drawing mode is active."
             }
         },
         ja: {
@@ -466,7 +468,9 @@ i18n
                 "ConfirmDeleteWindow": "本当にこの建具を削除しますか？",
                 "SuccessWindowDelete": "建具の削除が完了しました",
                 "EnterFloorMaterial": "仕上げ（床）を入力",
-                "EnterWallMaterial": "仕上げ（壁）を入力"
+                "EnterWallMaterial": "仕上げ（壁）を入力",
+                "Window": "建具",
+                "CannotBackDrawingMode": "描画モードがアクティブな間は戻ることができません。"
             }
         }
     },

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

@@ -41,6 +41,9 @@ let inputFloorMaterial;
 let floorMaterial = '';
 let inputWallMaterial;
 let wallMaterial = '';
+let isEditWindow = false;
+let currentEditWindowIndex = null;
+let newlyAddedWindow = null;
 export function renderRoomFormPane() {
     log.info("__@ renderRoomFormPane: ", roomFormMode);
     const element = document.createElement('div');
@@ -224,8 +227,8 @@ export function toggleDrawPartitionButton() {
     }
 }
 export function toggleDrawWindowButton() {
-    var _a;
-    log.info("toggleDrawWindowButton()", getCurrentPolygon());
+    var _a, _b;
+    log.info("toggleDrawWindowButton()", getCurrentPolygon(), _3DXObjects);
     setCurrentPolygon(undefined);
     const addDoorButton = document.getElementById('at-add-window-door-btn');
     if (!isDrawing) {
@@ -238,13 +241,16 @@ export function toggleDrawWindowButton() {
             ${i18n.t('DoneDrawing')}
             <span class="mdi mdi-check-bold"></span>
         `;
+        const objectIndex = _3DXObjects.findIndex(obj => obj.object.id == currentObject.object.id);
+        log.info("objectIndex", objectIndex);
         drawingConfig = {
             lineTypeComponentConfig: {
                 renderPolygonOnAdd: false,
                 drawingMode: drawingMode,
-                targetIndex: ((_a = currentWall.windows) === null || _a === void 0 ? void 0 : _a.length) || 0,
+                targetIndex: (_b = currentEditWindowIndex !== null && currentEditWindowIndex !== void 0 ? currentEditWindowIndex : (_a = currentWall.windows) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0,
                 polygonData: currentPolygonData,
-                targetUUID: currentWall.uuid
+                targetUUID: currentWall.uuid,
+                objectIndex: objectIndex
             }
         };
         log.info("drawingConfig", drawingConfig);
@@ -263,6 +269,19 @@ export function toggleDrawWindowButton() {
         `;
         cancelDraw();
         resetDrawingConfig();
+        setCurrentPolygon(currentObject);
+        let payload;
+        if (currentPartitionData) {
+            payload = {
+                uuid: currentPartitionData.uuid,
+                space_uuid: currentPartitionData.space_uuid,
+                name: currentPartitionData.name,
+                parent_uuid: currentPartitionData.parent_uuid,
+                polygon_json: currentPolygonData
+            };
+        }
+        // Re-render polygon    
+        renderPolygon(payload);
     }
 }
 /**
@@ -832,6 +851,9 @@ function displayWindows(window) {
         wallMaterial = currentWall.material;
         inputWallMaterial.value = currentWall.material;
     }
+    const isEditing = currentEditWindowIndex === window.index;
+    const editDisplay = isEditing ? 'none' : 'flex';
+    const confirmDisplay = isEditing ? 'flex' : 'none';
     element.innerHTML = `
         <div class="at_dropdown_subitem_container">
             <div class="at_subitem_left">
@@ -843,16 +865,16 @@ function displayWindows(window) {
                 <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-pencil" id="at-edit-window-btn-${window.index}" style="display: ${editDisplay};"></span>        
+                <span class="mdi mdi-check" id="at-confirm-edit-window-${window.index}" data-cy="at-confirm-edit-window-${window.index}" style="display: ${confirmDisplay};"></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;">
+        <div class="at_edit_name" id="at-edit-window-name-${window.index}" data-index="${window.index}" style="display: ${confirmDisplay};">
             <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 class="at_edit_material" id="at-edit-window-material-${window.index}" data-index="${window.index}" style="display: ${confirmDisplay};">
+            <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}`);
@@ -885,16 +907,28 @@ function setupEditWindow(element, window) {
         return;
     // Show inputs when edit icon is clicked
     editBtn.addEventListener("click", () => {
+        log.info("window", window);
         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)
+        isEditWindow = true;
+        currentEditWindowIndex = window.index;
+        // toggleDrawWindowButton()
+        // @ts-ignore
+        const windowComponent = {
+            inputs: {
+                path: window.path
+            }
+        };
+        log.info("currentObject ", currentObject);
+        // setCurrentPolygon(currentObject)
+        // enableVerticeControls(windowComponent)
     });
     // // Confirm edit name and material
     confirmBtn.addEventListener("click", () => {
+        log.info("3dxobject", _3DXObjects);
         // Update window name
         const newName = inputName.value.trim();
         window.name = newName || window.name;
@@ -907,12 +941,28 @@ function setupEditWindow(element, window) {
         confirmBtn.style.display = "none";
         const windowTooltip = document.getElementById(`at-window-name-tooltip-${window.index}`);
         windowTooltip.innerText = `${window.name}`;
+        isEditWindow = false;
+        currentEditWindowIndex = null;
+        currentWall.windows[window.index] = window;
+        const objectIndex = _3DXObjects.findIndex(obj => obj.object.object_id == currentObject.object.object_id);
+        if (_3DXObjects[objectIndex].children) {
+            _3DXObjects[objectIndex].children.map((win) => __awaiter(this, void 0, void 0, function* () {
+                log.info("WIND", win);
+                if (win.index == window.index && win.wallUUID == currentWall.uuid) {
+                    yield disposeModel(win);
+                }
+            }));
+        }
+        // toggleDrawWindowButton()
         saveWallChanges();
     });
 }
 function saveWallChanges() {
+    log.info("currentWall", currentWall);
     updateWallInPolygon(currentWall);
     updatePartitionData();
+    // 
+    log.info("currentObject", currentObject);
     setCurrentPolygon(currentObject);
     renderCurrentPartition();
     // dispatchSpaceEvent(SPACE_EVENTS.PARTITION_EDITED, { data: currentPartitionData });
@@ -940,6 +990,7 @@ function renderCurrentPartition() {
         parent_uuid: currentPartitionData.parent_uuid,
         polygon_json: currentPolygonData
     };
+    log.info("render paylaod", payload);
     renderPolygon(payload);
 }
 function setupDeleteWindow(element, window) {
@@ -968,6 +1019,18 @@ function setupDeleteWindow(element, window) {
                 currentWall = Object.assign(Object.assign({}, wall), { windows: wall.windows.filter((w) => w.index !== window.index) });
                 return currentWall;
             });
+            const objectIndex = _3DXObjects.findIndex(obj => obj.object.object_id == currentObject.object.object_id);
+            if (objectIndex != null) {
+                log.info("objectIndex", objectIndex);
+                if (_3DXObjects[objectIndex].children) {
+                    _3DXObjects[objectIndex].children.map((win) => __awaiter(this, void 0, void 0, function* () {
+                        log.info("WIND", win);
+                        if (win.index == window.index && win.wallUUID == currentWall.uuid) {
+                            yield disposeModel(win);
+                        }
+                    }));
+                }
+            }
             // Save + rerender window
             currentObject.object.object_data.json_data = currentPolygonData;
             saveWallChanges();
@@ -1007,6 +1070,10 @@ function goBackToPartitionList() {
 }
 function goBackToFloorWallList() {
     log.info("goBackToFloorWallList()");
+    if (isDrawing) {
+        notify.error(`${i18n.t('CannotBackDrawingMode')}`);
+        return;
+    }
     const elements = {
         'at-face-title': 'flex',
         'at-window-door-title': 'none',
@@ -1140,8 +1207,8 @@ export function clearPartitionForm() {
     displayElement('at-draw-partition-form-btn', 'block');
     hideElement('at-add-window-door-btn');
     hideElement('at-edit-wall-material');
-    resetDrawingConfig();
     cancelDrawing();
+    resetDrawingConfig();
     const partitionContainer = document.getElementById('at-partition-item-container');
     partitionContainer.style.display = 'none';
     const addDoorButton = document.getElementById('at-add-window-door-btn');
@@ -1165,6 +1232,8 @@ export function clearPartitionForm() {
     previousPartitionData = null;
     isDrawing = false;
     drawingMode = null;
+    currentEditWindowIndex = null;
+    isEditWindow = false;
 }
 /**
  * Cancels the drawing action for a partition.
@@ -1332,12 +1401,6 @@ export function clearTempCurrentPolygon() {
  */
 export function setPolygonData(payload) {
     console.log('setPolygonData()', payload);
-    // let currentObjectData = getCurrentPolygon()
-    // console.log('currentObjectData ', currentObjectData);
-    // if (currentObjectData) {
-    //     currentObjectData.object.object_data.json_data = payload
-    // }
-    // setCurrentPolygon(currentObjectData)
     // Helper function to round numbers to 2 decimals
     function roundToFourDecimals(value) {
         if (typeof value === "number") {
@@ -1436,9 +1499,9 @@ export function setCurrentPartitionData() {
                 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);
+                log.info("current wall", currentWall, currentPolygonData);
                 const faceVertexContainer = document.getElementById('at-face-vertex-container');
                 faceVertexContainer.innerHTML = '';
                 faceVertexContainer.append(displayWall(currentWall));
@@ -1481,7 +1544,7 @@ function updatePartitionDataArray(payload, currentPartitionDataArray) {
     }
     else if (drawingMode === 'window') {
         // Update current partition data
-        currentPartitionData.polygon_json = JSON.stringify(currentPolygonData);
+        currentPartitionData.polygon_json = JSON.stringify(payload.polygon_json);
         // Update current partition data array
         const currentPartitionDataIndex = currentPartitionDataArray.findIndex(partitionData => partitionData.uuid = currentPartitionData.uuid);
         currentPartitionDataArray[currentPartitionDataIndex] = currentPartitionData;

package/lib/atwinui/components/toolbar/spacePartition/roomTreePane.d.ts

@@ -1,4 +1,5 @@
 import { IObjectData, PartitionNode } from "../../../../types";
+import { Vector3 } from "../../../../../bundle/sdk";
 /**
  * Renders and returns the HTML element for the room tree pane.
  * @returns {HTMLElement} The HTML element representing the room tree pane.
@@ -69,8 +70,15 @@ export declare function setFilteredDisplay(type: String): void;
  */
 export declare function updateRoomVisibilityUI(parentId: string, isVisible: boolean): void;
 /**
- * Highlights the selected child element within a partition by toggling CSS classes.
+ * Highlights the selected child element and toggle expand indicator within a partition by toggling CSS classes.
  * @param partitionId - The unique identifier of the partition containing the child elements
  * @param name - The specific name/identifier of the child element to highlight
  */
 export declare function highlightSelectedPartitionChild(partitionId: string, name: string): void;
+export declare function toggeleExpandParitionWallChild(partitionId: string, name: string): void;
+export declare function highlightSelectedWallWindow(wallUuid: string, index: number | string): void;
+export declare function toggleHighlightedPartitionItem(): void;
+export declare function toggleHighlightedWindowItem(): void;
+export declare function calculateMidPoint(coords: Array<{
+    start: Vector3;
+}>): Vector3;

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

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { getBundleVersion, extractUUID } from "../../../../utils";
-import { batchAddEventListenerByClassName, handleDeletePartition, handlePartitionVisibility, handlePolygonVisibility, toggleDisplayPane } from "../../../events";
+import { batchAddEventListenerByClassName, handleDeletePartition, handlePartitionVisibility, handlePolygonVisibility, handleWindowVisibility, toggleDisplayPane } from "../../../events";
 import i18n from "../i18n";
 import { getCurrentPolygonData, handlePartitionRowEditBtnClickEvent, handlePartitionWallEditBtn, setPartitionFormMode } from "./roomFormPane";
 import { SPACE_EVENTS } from "../../../../types";
@@ -209,23 +209,33 @@ export function displayPartitionItems(partitionItems, partitionId, object, paren
     // Check if item is an array, e.g.: walls
     if (Array.isArray(partitionItems)) {
         // This is for the walls
-        partitionItems.forEach((item, index) => {
-            log.info("__@ partition item: ", item);
-            if (!item.options.is_deleted) {
-                if (!item.hide) {
+        partitionItems.forEach((wall, index) => {
+            log.info("__@ partition item: ", wall);
+            if (!wall.options.is_deleted) {
+                if (!wall.hide) {
                     // Split wall name to localize
-                    const match = item.name.match(/wall-(\d+)$/);
+                    const match = wall.name.match(/wall-(\d+)$/);
                     const wallNumber = parseInt(match[1]) + 1;
-                    const isVisible = item.options.is_visible;
+                    const isVisible = wall.options.is_visible;
                     const objName = object[index].name.includes('_') ? object[index].name : `${partitionId}_${object[index].name}`;
                     log.info("__@ objName: ", objName);
-                    const wallCoords = JSON.stringify(item.edges);
+                    const wallCoords = JSON.stringify(wall.edges);
                     const wallCoordsEncoded = btoa(wallCoords);
+                    const childHTML = displayWindows(wall, partitionId, parentUuid);
+                    const haveWindows = Array.isArray(wall === null || wall === void 0 ? void 0 : wall.windows) && (wall === null || wall === void 0 ? void 0 : wall.windows.length) > 0;
                     itemsHTML += `
-                        <li wall-coords="${wallCoordsEncoded}" object-name="${objName}" partition-li-id="${partitionId}" id="partition-child-${objName}" class="at_toggle at_partition_wall_row_item">${i18n.t(`Wall`)} ${wallNumber}
-                            <div>
-                                <span id="${objName}" partition-id="${partitionId}" partition-parent-uuid="${parentUuid}" polygon-item-id="${item.uuid}" is-wall="true" class="mdi mdi-pencil at_child_edit_btn"></span>
-                                <span id="${objName}" partition-id="${partitionId}" polygon-item-id="${item.uuid}" class="mdi ${isVisible ? 'mdi-eye ' : 'mdi-eye-off'} at_child_visible_btn"></span>
+                        <li wall-coords="${wallCoordsEncoded}" object-id="${wall.uuid}" object-name="${objName}" partition-li-id="${partitionId}" id="partition-child-${objName}" class="at_partition_wall_row_item">
+                            <div class="at_partition_child_header">
+                                <div class="at_partition_child_title">
+                                    <span class="at_partition_child_expand_icon">${haveWindows ? '▶' : ''} </span> ${i18n.t(`Wall`)} ${wallNumber}
+                                </div>
+                                <div>
+                                    <span partition-id="${partitionId}" partition-parent-uuid="${parentUuid}" polygon-item-id="${wall.uuid}" is-wall="true" class="mdi mdi-pencil at_child_edit_btn"></span>
+                                    <span id="${objName}" partition-parent-uuid  partition-id="${partitionId}" polygon-item-id="${wall.uuid}" class="mdi ${isVisible ? 'mdi-eye ' : 'mdi-eye-off'} at_child_visible_btn"></span>
+                                </div>
+                            </div>
+                            <div class="at_wall_children_container at_hidden">
+                                ${childHTML}
                             </div>
                         </li>
                     `;
@@ -240,10 +250,13 @@ export function displayPartitionItems(partitionItems, partitionId, object, paren
         const floorCoordsEncoded = btoa(floorCoords);
         if (!partitionItems.hide) {
             itemsHTML += `
-            <li floor-coords="${floorCoordsEncoded}" id="partition-child-${object.name}" object-name="${object.name}" partition-li-id="${partitionId}" class="at_toggle at_partition_floor_row_item"> ${i18n.t(`Floor`)}
-                <div>
-                    <span id="${object}" partition-id="${partitionId}" partition-parent-uuid="${parentUuid}" polygon-item-id="${partitionItems.uuid}" class="mdi mdi-pencil at_child_edit_btn"></span>
-                    <span id="${object.name}" partition-id="${partitionId}"  polygon-item-id="${partitionItems.uuid}" class="mdi ${isVisible ? 'mdi-eye ' : 'mdi-eye-off'} at_child_visible_btn"></span>
+            <li floor-coords="${floorCoordsEncoded}" id="partition-child-${object.name}" object-name="${object.name}" partition-li-id="${partitionId}" class="at_toggle at_partition_floor_row_item">
+                <div class="at_partition_child_header">
+                    <div>${i18n.t(`Floor`)}</div>
+                    <div>
+                        <span partition-id="${partitionId}" partition-parent-uuid="${parentUuid}" polygon-item-id="${partitionItems.uuid}" class="mdi mdi-pencil at_child_edit_btn"></span>
+                        <span id="${object.name}" partition-id="${partitionId}" polygon-item-id="${partitionItems.uuid}" class="mdi ${isVisible ? 'mdi-eye ' : 'mdi-eye-off'} at_child_visible_btn"></span>
+                    </div>
                 </div>
             </li>
         `;
@@ -339,24 +352,29 @@ function toggleSelectedPartition() {
     }));
     batchAddEventListenerByClassName('at_child_visible_btn', (event) => __awaiter(this, void 0, void 0, function* () {
         const target = event.target;
-        handlePolygonVisibility(target.id);
+        const li = target.closest('li');
+        if (li === null || li === void 0 ? void 0 : li.getAttribute('id').toLowerCase().includes('window')) {
+            event.stopPropagation();
+            handleWindowVisibility(target);
+        }
+        else {
+            handlePolygonVisibility(target.id);
+        }
     }));
     batchAddEventListenerByClassName('at_partition_wall_row_item', (event) => __awaiter(this, void 0, void 0, function* () {
         event.stopPropagation();
-        const target = event.target;
+        const target = event.currentTarget;
         const partitionId = target.getAttribute('partition-li-id');
         const objectName = target.getAttribute('object-name');
         const wallCoordsEncoded = target.getAttribute('wall-coords');
         const wallCoordsJSON = atob(wallCoordsEncoded);
         const wallCoords = JSON.parse(wallCoordsJSON);
-        const wallBottomMidPoint = {
-            x: ((wallCoords[0].start.x + wallCoords[1].start.x + wallCoords[2].start.x + wallCoords[3].start.x) / 4),
-            y: ((wallCoords[0].start.y + wallCoords[1].start.y + wallCoords[2].start.y + wallCoords[3].start.y) / 4),
-            z: ((wallCoords[0].start.z + wallCoords[1].start.z + wallCoords[2].start.z + wallCoords[3].start.z) / 4),
-        };
         try {
+            const wallBottomMidPoint = calculateMidPoint(wallCoords);
             yield goToPosition(wallBottomMidPoint);
             highlightSelectedPartitionChild(partitionId, objectName);
+            toggleHighlightedWindowItem();
+            toggeleExpandParitionWallChild(partitionId, objectName);
         }
         catch (e) {
             log.info('goToPosition failed: ', e);
@@ -364,19 +382,15 @@ function toggleSelectedPartition() {
     }));
     batchAddEventListenerByClassName('at_partition_floor_row_item', (event) => __awaiter(this, void 0, void 0, function* () {
         event.stopPropagation();
-        const target = event.target;
+        const target = event.currentTarget;
         const partitionId = target.getAttribute('partition-li-id');
         const objectName = target.getAttribute('object-name');
         const floorCoordsEncoded = target.getAttribute('floor-coords');
         const floorCoordsJSON = atob(floorCoordsEncoded);
         const floorCoords = JSON.parse(floorCoordsJSON);
-        const wallBottomMidPoint = {
-            x: ((floorCoords[0].start.x + floorCoords[1].start.x + floorCoords[2].start.x) / 3),
-            y: ((floorCoords[0].start.y + floorCoords[1].start.y + floorCoords[2].start.y) / 3),
-            z: ((floorCoords[0].start.z + floorCoords[1].start.z + floorCoords[2].start.z) / 3),
-        };
         try {
-            yield goToPosition(wallBottomMidPoint);
+            const floorMidPoint = calculateMidPoint(floorCoords);
+            yield goToPosition(floorMidPoint);
             highlightSelectedPartitionChild(partitionId, objectName);
         }
         catch (e) {
@@ -385,40 +399,53 @@ function toggleSelectedPartition() {
     }));
     batchAddEventListenerByClassName('at_child_edit_btn', (event) => __awaiter(this, void 0, void 0, function* () {
         var _a;
+        event.stopPropagation();
         const target = event.target;
         const isWall = ((_a = target.getAttribute('is-wall')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'true';
         const partitionId = target.getAttribute('partition-id');
         const parentRoomUuid = target.getAttribute('partition-parent-uuid');
         const parentRoom = document.getElementById(`at-room-edit-${parentRoomUuid}-btn`);
-        function openRoomEdit() {
-            highlightSelectedItem({ target: parentRoom });
-            setPartitionFormMode("EDIT" /* FORM_MODE.EDIT */);
-            setCurrentEditRoomData(`at-room-edit-${parentRoomUuid}-btn`);
-            toggleDisplayPane(`at-room-edit-${parentRoomUuid}-btn`);
-        }
-        if (parentRoom) {
-            openRoomEdit();
-            const partitionRowEdit = document.getElementById(`at-edit-partition-${partitionId}`);
-            if (partitionRowEdit) {
-                const currentEditRoomData = getCurrentEditRoomData();
-                handlePartitionRowEditBtnClickEvent(currentEditRoomData.children, partitionRowEdit);
-                if (isWall) {
-                    const polygonId = target.getAttribute('polygon-item-id');
-                    yield handlePartitionWallEditBtn(polygonId);
-                }
-            }
-            else {
-                log.warn('Partition row edit element not found');
-            }
-        }
-        else {
-            log.warn('Partition room element not found');
-        }
+        yield openPartitionChildEdit(target, parentRoom, parentRoomUuid, partitionId, isWall);
     }));
     batchAddEventListenerByClassName('at_room_delete_btn', (event) => __awaiter(this, void 0, void 0, function* () {
         const target = event.target;
         handleDeletePartition(target.id);
     }));
+    batchAddEventListenerByClassName('at_window_edit_btn', (event) => __awaiter(this, void 0, void 0, function* () {
+        event.stopPropagation();
+        const targetElement = event.target;
+        const partitionId = targetElement.getAttribute('partition-id');
+        const parentRoomUuid = targetElement.getAttribute('partition-parent-uuid');
+        const parentRoom = document.getElementById(`at-room-edit-${parentRoomUuid}-btn`);
+        const windowCoordsEncoded = targetElement.getAttribute('window-coords');
+        const windowCoordsJSON = atob(windowCoordsEncoded);
+        const windowCoords = JSON.parse(windowCoordsJSON);
+        try {
+            const windowBottomMidPoint = calculateMidPoint(windowCoords);
+            yield goToPosition(windowBottomMidPoint);
+            yield openWindowEdit(targetElement, parentRoom, parentRoomUuid, partitionId);
+        }
+        catch (e) {
+            log.info('goToPosition failed: ', e);
+        }
+    }));
+    batchAddEventListenerByClassName('at_wall_window_row_item', (event) => __awaiter(this, void 0, void 0, function* () {
+        event.stopPropagation();
+        const targetElement = event.currentTarget;
+        const wallUuid = targetElement.getAttribute('wall-id');
+        const windowIndex = targetElement.getAttribute('window-index');
+        const windowCoordsEncoded = targetElement.getAttribute('window-coords');
+        const windowCoordsJSON = atob(windowCoordsEncoded);
+        const windowCoords = JSON.parse(windowCoordsJSON);
+        try {
+            const windowBottomMidPoint = calculateMidPoint(windowCoords);
+            yield goToPosition(windowBottomMidPoint);
+            highlightSelectedWallWindow(wallUuid, windowIndex);
+        }
+        catch (e) {
+            log.info('goToPosition failed: ', e);
+        }
+    }));
 }
 /**
  * Highlights the selected item based on the triggered event.
@@ -666,13 +693,148 @@ export function updateRoomVisibilityUI(parentId, isVisible) {
     }
 }
 /**
- * Highlights the selected child element within a partition by toggling CSS classes.
+ * Highlights the selected child element and toggle expand indicator within a partition by toggling CSS classes.
  * @param partitionId - The unique identifier of the partition containing the child elements
  * @param name - The specific name/identifier of the child element to highlight
  */
 export function highlightSelectedPartitionChild(partitionId, name) {
     const partitionChildren = document.querySelectorAll(`li[partition-li-id="${partitionId}"]`);
-    partitionChildren.forEach(el => {
-        el.classList.toggle('selected', el.id === `partition-child-${name}`);
+    const targetId = `partition-child-${name}`;
+    partitionChildren.forEach((partitionChild) => {
+        const isSelected = partitionChild.id === targetId;
+        const header = partitionChild.querySelector('.at_partition_child_header');
+        if (header) {
+            header.classList.toggle('selected', isSelected);
+            const arrow = header.querySelector('.at_partition_child_expand_icon');
+            if (arrow && arrow.textContent) {
+                // Use replace to only affect elements that have arrows
+                if (isSelected) {
+                    arrow.textContent = arrow.textContent.replace('▶', '▼');
+                }
+                else {
+                    arrow.textContent = arrow.textContent.replace('▼', '▶');
+                }
+            }
+        }
     });
 }
+export function toggeleExpandParitionWallChild(partitionId, name) {
+    const partitionChildren = document.querySelectorAll(`li[partition-li-id="${partitionId}"]`);
+    const targetId = `partition-child-${name}`;
+    partitionChildren.forEach((partitionChild) => {
+        const isSelected = partitionChild.id === targetId;
+        const listContainer = partitionChild.querySelector('.at_wall_children_container');
+        if (listContainer) {
+            if (isSelected) {
+                listContainer.classList.toggle('at_hidden');
+            }
+            else {
+                listContainer.classList.add('at_hidden');
+            }
+        }
+    });
+}
+function displayWindows(wall, partitionId, parentId) {
+    const windows = wall.windows;
+    let itemsHTML = '';
+    if (Array.isArray(windows)) {
+        windows.forEach((window) => {
+            if (!window.options.is_deleted) {
+                const windowCoords = JSON.stringify(window.edges);
+                const windowCoordsEncoded = btoa(windowCoords);
+                itemsHTML += `
+                    <li window-coords="${windowCoordsEncoded}" id="window-${wall.uuid}-${window.index}" wall-id="${wall.uuid}" window-name="${window.name}" window-index="${window.index}" class="at_wall_window_row_item">
+                        <div>${window.name}</div>
+                        <div>
+                            <span window-coords="${windowCoordsEncoded}" partition-id="${partitionId}" partition-parent-uuid="${parentId}" polygon-item-id="${wall.uuid}" index="${window.index}"  class="mdi mdi-pencil at_window_edit_btn"></span>
+                            <span id="${window.name}" partition-id="${partitionId}" partition-parent-uuid="${parentId}" polygon-item-id="${wall.uuid}" class="mdi ${window.options.is_visible ? 'mdi-eye ' : 'mdi-eye-off'} at_child_visible_btn"></span>
+                        </div>
+                    </li>
+                `;
+            }
+        });
+    }
+    return itemsHTML;
+}
+function openRoomEdit(parentRoomElement, parentRoomUuid) {
+    highlightSelectedItem({ target: parentRoomElement });
+    setPartitionFormMode("EDIT" /* FORM_MODE.EDIT */);
+    setCurrentEditRoomData(`at-room-edit-${parentRoomUuid}-btn`);
+    toggleDisplayPane(`at-room-edit-${parentRoomUuid}-btn`);
+}
+function openPartitionChildEdit(targetElement, parentRoomElement, parentRoomUuid, partitionId, isWall) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (parentRoomElement) {
+            openRoomEdit(parentRoomElement, parentRoomUuid);
+            const partitionRowEdit = document.getElementById(`at-edit-partition-${partitionId}`);
+            if (partitionRowEdit) {
+                const currentEditRoomData = getCurrentEditRoomData();
+                handlePartitionRowEditBtnClickEvent(currentEditRoomData.children, partitionRowEdit);
+                if (isWall) {
+                    const polygonId = targetElement.getAttribute('polygon-item-id');
+                    yield handlePartitionWallEditBtn(polygonId);
+                }
+            }
+            else {
+                log.warn('Partition row edit element not found');
+            }
+        }
+        else {
+            log.warn('Partition room element not found');
+        }
+    });
+}
+function openWindowEdit(targetElement, parentRoomElement, parentRoomUuid, partitionId) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const index = targetElement.getAttribute('index');
+        yield openPartitionChildEdit(targetElement, parentRoomElement, parentRoomUuid, partitionId, true);
+        yield new Promise(resolve => requestAnimationFrame(resolve));
+        const editBtn = document.querySelector(`#at-edit-window-btn-${index}`);
+        const editNameContainer = document.querySelector(`.at_edit_name#at-edit-window-name-${index}`);
+        const inputName = document.querySelector(`#at-edit-window-name-input-${index}`);
+        const editMaterialContainer = document.querySelector(`.at_edit_material#at-edit-window-material-${index}`);
+        const confirmBtn = document.querySelector(`#at-confirm-edit-window-${index}`);
+        if (!editBtn || !editNameContainer || !inputName || !editMaterialContainer) {
+            log.warn('Elements for Window edit not found');
+        }
+        else {
+            editNameContainer.style.display = "flex";
+            editMaterialContainer.style.display = "flex";
+            editBtn.style.display = "none";
+            confirmBtn.style.display = "flex";
+            inputName.focus();
+        }
+    });
+}
+export function highlightSelectedWallWindow(wallUuid, index) {
+    const wallWindow = document.querySelectorAll(`li[wall-id="${wallUuid}"]`);
+    const targetId = `window-${wallUuid}-${index}`;
+    wallWindow.forEach((windowElement) => {
+        windowElement.classList.toggle('selected', windowElement.id === targetId);
+    });
+}
+export function toggleHighlightedPartitionItem() {
+    const windowItems = document.querySelectorAll('li.at_wall_window_row_item.selected');
+    windowItems.forEach(el => {
+        el.classList.remove('selected');
+    });
+}
+export function toggleHighlightedWindowItem() {
+    const windowItems = document.querySelectorAll('li.at_wall_window_row_item.selected');
+    windowItems.forEach(el => {
+        el.classList.remove('selected');
+    });
+}
+export function calculateMidPoint(coords) {
+    const count = coords.length;
+    const sum = coords.reduce((acc, coord) => ({
+        x: acc.x + coord.start.x,
+        y: acc.y + coord.start.y,
+        z: acc.z + coord.start.z
+    }), { x: 0, y: 0, z: 0 });
+    return {
+        x: sum.x / count,
+        y: sum.y / count,
+        z: sum.z / count
+    };
+}