architwin 1.8.2 → 1.8.4

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

@@ -0,0 +1,586 @@
+import i18n from '../i18n';
+import { batchAddEventListenerByClassName } from "../../../events";
+import { startDraw, cancelDraw } from '../../../../architwin';
+import { generateUUID, extractUUID } from '../../../../utils';
+import { getCurrentEditRoomData } from './roomLayerListPane';
+let isDrawing = false;
+let roomFormMode = "ADD" /* FORM_MODE.ADD */;
+let isSaving = false;
+let currentPolygonData = null;
+let currentPartitionDataArray = [];
+let currentEditPartitionData = null;
+let currentEditRoomData = null;
+export function renderRoomFormPane() {
+    console.info("__@ renderRoomFormPane");
+    const element = document.createElement('div');
+    element.classList.add('at_container');
+    element.classList.add('at_w-12');
+    element.classList.add('at_h-full');
+    element.setAttribute('id', 'at-room-form-pane');
+    element.setAttribute('data-cy', 'at-room-form-pane');
+    element.innerHTML = `
+        <div class="at_panel_header" id="at-room-form-title">
+        </div>
+        <form class="at_form_container at_scrollable_container at_h-min-70" id="at-room-form" data-cy="at-room-form">
+            <div class="at-field at_flex_row">
+                <label for="">${i18n.t('Name')}</label>
+                <input class="at_field_input at_w-full" type="text" name="room_name" id="at-room-name-input" data-cy="at-room-name-input" placeholder="Room 1">
+            </div>
+            <div class="at-field at_flex_column">
+                <label for="">${i18n.t('Memo')}</label>
+                <textarea name="memo" id="at-room-memo-input" data-cy="at-room-memo-input" class="at_textarea"></textarea>
+            </div>
+            <div class="at-field at_flex_row" id="at-room-wall-height" data-cy="at-room-wall-height">
+                <label for="">
+                    ${i18n.t('WallHeight')}
+                    <span class="mdi mdi-help-circle-outline"></span>
+                    <div class="at_icon_tooltip" data-cy="at-tooltip-room-wall-height">Sample Explanation on the definition of wall height</div>
+                </label>
+                <input class="at_field_input at_w-full" type="number" name="wall_height" id="at-room-wall-height-input" data-cy="at-room-wall-height-input" value="3">
+            </div>
+            <div class="at-field at_flex_row" id="at-room-floor-level" data-cy="at-room-floor-level">
+                <label for="">
+                    ${i18n.t('FloorLevel')}
+                    <span class="mdi mdi-help-circle-outline"></span>
+                    <div class="at_icon_tooltip" data-cy="at-tooltip-room-floor-level">Sample Explanation on the definition of wall height</div>
+                </label>
+                <input class="at_field_input at_w-full" type="number" name="floor_level" id="at-room-floor-level-input" data-cy="at-room-floor-level-input" value="0">
+            </div>
+            <div class="at_button at_draw_partition_btn at_w-full" id="at-draw-partition-form-btn" data-cy="at-draw-partition-form-btn">
+                ${i18n.t('DrawPartition')}
+                <span class="mdi mdi-cube-outline"></span>
+            </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>
+                    <label for="">
+                        <span class="mdi mdi-vector-polygon"></span>
+                        ${i18n.t('FloorsAndWalls')}
+                    </label>
+                    <div> </div>
+                </div>
+
+                <div class="at_partition_title" id="at-partition-title">
+                    <div> </div>
+                    <label for="">
+                        <span class="mdi mdi-cube-unfolded"></span>
+                        ${i18n.t('Partitions')}
+                    </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">
+                    <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">
+                    
+                    <!-- Insert Partition Items Here -->
+                    
+                </div>
+
+                <!-- Partition Edit Mode -->
+                
+                <div class="at_face_vertex_container at_scrollable_container" id="at-face-vertex-container" data-cy="at-face-vertex-container"> 
+                    
+                    <!-- Insert Face & Vertex Items Here -->
+
+                </div>
+
+                <!-- 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>
+                </div>
+            </div>
+            <div class="at_button at_delete_room_btn at_w-full" id="at-delete-room-btn" data-cy="at-delete-room-btn">
+                ${i18n.t('DeleteRoom')}
+            </div>
+        </form>
+        <div class="at_button_row at_justify_between">
+            <div class="at_button at_ghost" id="at-cancel-room-form-btn" data-cy="at-cancel-room-form-btn" target-pane="at-room-tree-pane">
+                ${i18n.t('Cancel')}
+                <span class="mdi mdi-close-circle-outline" id="at-cancel-room-form-btn"></span>
+            </div>
+            <div class="at_button at_ghost" id="at-save-room-btn" data-cy="at-save-room-btn" target-pane="at-room-tree-pane">
+                ${i18n.t('Save')}
+                <span class="mdi mdi-content-save" id="at-save-room-btn"></span>
+            </div>
+        </div>
+    `;
+    return element;
+}
+export function toggleDrawPartionButton() {
+    console.log("__@ toggleDrawRoomButton()");
+    if (!isDrawing) {
+        startDrawing();
+    }
+    else {
+        const partitionItem = document.getElementById('at-partition-item-container');
+        const partitionList = document.getElementById('at-partition-list-container');
+        const vertexList = document.getElementById('at-face-vertex-container');
+        cancelDrawing();
+        setPartitionData();
+        if (currentPartitionDataArray.length != 0) {
+            partitionItem.style.display = 'flex';
+            vertexList.style.display = 'none';
+            partitionList.style.justifyContent = 'start';
+            renderPartitions(currentPartitionDataArray);
+            hideNoPartitionDisplay();
+        }
+        currentPolygonData = undefined;
+    }
+}
+export function renderRoomFormMode() {
+    console.log("__@ renderRoomFormMode()");
+    renderFormTitle();
+    if (roomFormMode == "EDIT" /* FORM_MODE.EDIT */) {
+        currentEditRoomData = getCurrentEditRoomData();
+        populateRoomForm(currentEditRoomData);
+        renderDeleteButton();
+    }
+    else if (roomFormMode == "ADD" /* FORM_MODE.ADD */) {
+        renderNoPartitionDisplay();
+        renderWallHeightInput();
+    }
+    else {
+        console.error("Error occured");
+    }
+}
+function populateRoomForm(room) {
+    console.log("populateRoomForm()", room);
+    const name = document.getElementById('at-room-name-input');
+    name.value = room.name;
+    const floorLevel = document.getElementById('at-room-floor-level-input');
+    const memo = document.getElementById('at-room-memo-input');
+    if (room.polygon_json != null) {
+        memo.value = JSON.parse(room.polygon_json).memo;
+    }
+    currentPartitionDataArray = room.children;
+    if (currentPartitionDataArray.length != 0) {
+        floorLevel.value = JSON.parse(room.children[0].polygon_json).floor.floor_level;
+        renderPartitions(currentPartitionDataArray);
+        hideNoPartitionDisplay();
+    }
+    else {
+        renderNoPartitionDisplay();
+    }
+}
+function renderFormTitle() {
+    const title = document.getElementById('at-room-form-title');
+    title.innerHTML = '';
+    const span = document.createElement('span');
+    span.textContent = roomFormMode === 'ADD'
+        ? i18n.t('AddRoom')
+        : i18n.t('EditRoom');
+    title.appendChild(span);
+}
+function renderNoPartitionDisplay() {
+    const displayDiv = document.getElementById('at-no-partition-display');
+    displayDiv.style.display = "flex";
+}
+function hideNoPartitionDisplay() {
+    const displayDiv = document.getElementById('at-no-partition-display');
+    displayDiv.style.display = "none";
+}
+function renderWallHeightInput() {
+    const wallHeight = document.getElementById('at-room-wall-height');
+    wallHeight.style.display = "block";
+}
+function renderDeleteButton() {
+    const deleteBtn = document.getElementById('at-delete-room-btn');
+    deleteBtn.style.display = 'block';
+}
+function renderPartitions(partitions) {
+    console.log("renderPartitions()", partitions);
+    const partitionContainer = document.getElementById('at-partition-item-container');
+    partitionContainer.style.display = 'flex';
+    partitionContainer.innerHTML = ``;
+    partitions.forEach((partition, index) => {
+        const row = renderPartitionRow(partition, index);
+        partitionContainer.appendChild(row);
+    });
+    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');
+        partitionTitle.style.display = 'none';
+        faceTitle.style.display = 'flex';
+        partitionLists.style.display = 'none';
+        faceLists.style.display = 'flex';
+        editPartitionName.style.display = 'flex';
+        const targetElement = event.target;
+        const partitionId = extractUUID(targetElement.id);
+        const partition = partitions.find(partition => partition.uuid === partitionId);
+        editPartitionNameInput.value = partition.name;
+        currentEditPartitionData = partition;
+        renderFaces(partition);
+    });
+    addEventListenerById('at-confirm-edit-partition-name', (event) => {
+        console.log('Event', event);
+        const editPartitionNameInput = document.getElementById('at-edit-partition-name-input');
+        const newPartitionName = editPartitionNameInput === null || editPartitionNameInput === void 0 ? void 0 : editPartitionNameInput.value; // Get the new name
+        if (newPartitionName && currentEditPartitionData) {
+            // Find and update the partition in the currentPartitionDataArray
+            const partitionIndex = currentPartitionDataArray.findIndex(partition => partition.uuid === currentEditPartitionData.uuid);
+            if (partitionIndex !== -1) {
+                currentPartitionDataArray[partitionIndex].name = newPartitionName;
+            }
+        }
+        else {
+            console.warn("Partition name is invalid or no partition is selected for editing.");
+        }
+    });
+}
+function renderPartitionRow(partition, index) {
+    console.log("renderPartitionRow()");
+    const element = document.createElement('div');
+    element.classList.add('at_partition_item');
+    element.innerHTML = `
+        <div class="at_icon_left">
+            <span class="mdi mdi-cube-outline"></span>
+        </div>
+        <div class="at_partition_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>
+        </div>
+        <div class="at_icon_right">
+            <span class="mdi mdi-delete-outline at_delete_partition_btn" id="at-delete-partition-${partition.uuid}"></span>
+        </div>
+    `;
+    return element;
+}
+function renderFaces(partition) {
+    console.log("renderFaces()", partition);
+    const faceVertexContainer = document.getElementById('at-face-vertex-container');
+    faceVertexContainer.innerHTML = '';
+    const element = document.createElement('div');
+    element.classList.add('at_face_vertex_item');
+    const polygonJson = JSON.parse(partition.polygon_json);
+    console.log("polygonJson", polygonJson);
+    console.log("polygonJson", polygonJson.floor);
+    element.appendChild(renderFloor(polygonJson.floor));
+    polygonJson.walls.forEach((wall, index) => {
+        element.appendChild(renderWalls(wall, index));
+    });
+    // Append the element to the container
+    faceVertexContainer.appendChild(element);
+    // Back button event listener
+    addEventListenerById('at-back-partition', goBackToPartitionList);
+    // Toggle face details visibility
+    batchAddEventListenerByClassName('at_face_name', event => {
+        const targetElement = event.target;
+        const faceId = extractUUID(targetElement.id);
+        const vertexItem = document.getElementById(`at-vertex-list-${faceId}`);
+        const isHidden = vertexItem.style.display === 'none' || vertexItem.style.display === '';
+        vertexItem.style.display = isHidden ? 'flex' : 'none';
+        // Disregard for now for edting wall and floor names
+        // const editNameInput = document.getElementById(`at-edit-name-${faceId}`);
+        // editNameInput.style.display = isHidden ? 'flex' : 'none';
+        const chevronIcon = document.getElementById(`at-expand-btn-${faceId}`).querySelector(isHidden ? '.mdi-chevron-down' : '.mdi-chevron-up');
+        chevronIcon.classList.toggle('mdi-chevron-down');
+        chevronIcon.classList.toggle('mdi-chevron-up');
+    });
+    // Disregard for now for editing wall and floor names
+    // batchAddEventListenerByClassNames(['.at_edit_name_text', '.at_confirm_edit_name'], toggleEditName);
+}
+function goBackToPartitionList() {
+    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';
+    renderPartitions(currentPartitionDataArray);
+    currentEditPartitionData = null;
+}
+// Disregard for now for editing wall and floor names
+function toggleEditFaceName(event) {
+    console.log('toggleEditName()');
+    const targetElement = event.target;
+    const faceId = targetElement.id.split("-").pop();
+    const editNameText = document.getElementById(`at-edit-name-text-${faceId}`);
+    const editNameInput = document.getElementById(`at-edit-name-input-${faceId}`);
+    if (editNameText) {
+        editNameText.style.display = editNameText.style.display === 'flex' || editNameText.style.display === '' ? 'none' : 'flex';
+    }
+    if (editNameInput) {
+        editNameInput.style.display = editNameText.style.display === 'none' ? 'flex' : 'none';
+    }
+}
+function renderFloor(floor) {
+    console.log('renderFloor()', floor);
+    const element = document.createElement('div');
+    element.innerHTML =
+        `
+        <div class="at_face_item">
+            <div class="at_icon_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}">
+                ${i18n.t(`${floor.name}`)}
+                <span class="mdi mdi-chevron-down" id="at-expand-btn-${floor.uuid}" data-cy="at-expand-btn-${floor.uuid}"></span>
+            </div>
+            <div class="at_icon_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>
+        <div class="at_vertex_list" id="at-vertex-list-${floor.uuid}" data-cy="at-vertex-list-${floor.uuid}">
+        </div>
+    `;
+    // Get the at_vertex_list container for this floor
+    const vertexListContainer = element.querySelector(`#at-vertex-list-${floor.uuid}`);
+    // Append lines to the at_vertex_list container
+    floor.edges.forEach((vertex, index) => {
+        const row = renderLines(vertex, index + 1, 'floor');
+        vertexListContainer.appendChild(row); // Append to the correct container
+    });
+    return element;
+}
+function renderWalls(wall, index) {
+    console.log('renderWall()', wall);
+    const element = document.createElement('div');
+    const match = wall.name.match(/_wall-(\d+)$/);
+    let wallName = '';
+    if (match) {
+        console.log("HELLO");
+        wallName = `${i18n.t(`Wall`)} ${match[1]}`;
+    }
+    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}">
+                ${wallName}
+                <span class="mdi mdi-chevron-down" id="at-expand-btn-${wall.uuid}" data-cy="at-expand-btn-${wall.uuid}"></span>
+            </div>
+            <div class="at_icon_right">
+                <span class=""></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 floor
+    const vertexListContainer = element.querySelector(`#at-vertex-list-${wall.uuid}`);
+    // Append lines to the at_vertex_list container
+    wall.edges.forEach((vertex, index) => {
+        const row = renderLines(vertex, index + 1, 'wall');
+        vertexListContainer.appendChild(row); // Append to the correct container
+    });
+    return element;
+}
+function renderLines(vertex, index, faceType) {
+    const element = document.createElement('div');
+    element.classList.add('at_vertex_item');
+    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">
+                ${i18n.t('Line') + " " + index}
+            </div>
+            <div class="at_vertex_distance">
+                ${vertex.length + " m"}
+            </div>
+        </div>
+        ${faceType === 'floor' ?
+            `
+                <div class="at_vertex_icon_right">
+                    <span class="mdi mdi-delete-outline"></span>
+                </div>
+            ` :
+            `
+                <div class="at_vertex_icon_right at_invisible">
+                    <span class="mdi mdi-delete-outline"></span>
+                </div>
+            `}
+        
+    `;
+    return element;
+}
+function addEventListenerById(id, callback) {
+    if (id) {
+        const elements = document.getElementById(id);
+        elements.addEventListener('click', callback);
+    }
+}
+export function clearRoomForm() {
+    console.log("__@ clearRoomForm()");
+    goBackToPartitionList();
+    cancelDrawing();
+    const wallHeight = document.getElementById('at-room-wall-height');
+    const deleteBtn = document.getElementById('at-delete-room-btn');
+    const partitionContainer = document.getElementById('at-partition-item-container');
+    wallHeight.style.display = 'none';
+    deleteBtn.style.display = 'none';
+    partitionContainer.style.display = 'none';
+    document.getElementById('at-room-form').reset();
+    currentPartitionDataArray = [];
+    currentEditRoomData = null;
+    currentEditPartitionData = null;
+    currentPolygonData = null;
+}
+function cancelDrawing() {
+    cancelDraw();
+    isDrawing = false;
+    const drawRoomBtn = document.getElementById('at-draw-partition-form-btn');
+    drawRoomBtn.classList.remove('at_draw_partition_btn_active');
+    drawRoomBtn.classList.add('at_draw_partition_btn');
+    drawRoomBtn.innerHTML = `
+        ${i18n.t('DrawPartition')}
+        <span class="mdi mdi-cube-outline"></span>
+    `;
+}
+function startDrawing() {
+    startDraw();
+    isDrawing = true;
+    const drawRoomBtn = document.getElementById('at-draw-partition-form-btn');
+    drawRoomBtn.classList.remove('at_draw_partition_btn');
+    drawRoomBtn.classList.add('at_draw_partition_btn_active');
+    drawRoomBtn.innerHTML = `
+        ${i18n.t('CompleteDrawing')}
+        <span class="mdi mdi-check-bold"></span>
+    `;
+}
+export function getRoomFormData() {
+    var _a, _b;
+    const name = ((_a = document.getElementById('at-room-name-input')) === null || _a === void 0 ? void 0 : _a.value) || null;
+    let memo = ((_b = document.getElementById('at-room-memo-input')) === null || _b === void 0 ? void 0 : _b.value) || null;
+    const currentUrl = window.location.href;
+    const spaceUUID = extractUUID(currentUrl);
+    let payload = {
+        space_uuid: spaceUUID,
+        name: name,
+        parent_uuid: null,
+        polygon_json: JSON.stringify({ memo: memo }),
+        children: null,
+    };
+    if (!memo) {
+        payload.polygon_json = null;
+    }
+    if (currentEditRoomData) {
+        payload = currentEditRoomData;
+        payload.name = name;
+        payload.polygon_json = JSON.stringify({ memo: memo }),
+            payload.children = null;
+    }
+    return payload;
+}
+export function getPartitionFormData() {
+    var _a;
+    const floorLevel = ((_a = document.getElementById('at-room-floor-level-input')) === null || _a === void 0 ? void 0 : _a.value) || null;
+    console.log("getPartitionFormData() currentPartitionDataArray", currentPartitionDataArray);
+    currentPartitionDataArray.forEach(partition => {
+        const polygonJson = JSON.parse(partition.polygon_json);
+        polygonJson.floor.floor_level = Number(floorLevel);
+        partition.polygon_json = JSON.stringify(polygonJson);
+    });
+    return currentPartitionDataArray;
+}
+// ==== SETTERS AND GETTERS ==== //
+export function setPartitionSavingMode(mode) {
+    isSaving = mode;
+}
+export function getPartitionSavingMode() {
+    return isSaving;
+}
+export function setRoomFormMode(formType) {
+    roomFormMode = formType;
+}
+export function getRoomFormMode() {
+    return roomFormMode;
+}
+export function setPolygonData(payload) {
+    // Helper function to round numbers to 2 decimals
+    function roundToTwoDecimals(value) {
+        if (typeof value === "number") {
+            return Math.round(value * 100) / 100; // Round to 2 decimals
+        }
+        else if (Array.isArray(value)) {
+            return value.map(roundToTwoDecimals); // Recursively round each item in the array
+        }
+        else if (typeof value === "object" && value !== null) {
+            return Object.keys(value).reduce((acc, key) => {
+                acc[key] = roundToTwoDecimals(value[key]); // Recursively process each object property
+                return acc;
+            }, {});
+        }
+        return value; // Return as-is for non-numerical values
+    }
+    // Round numbers in the polygon JSON recursively
+    if (payload) {
+        payload = roundToTwoDecimals(payload);
+    }
+    // Set floor UUID and name
+    if (payload.floor) {
+        payload.floor.uuid = payload.floor.uuid || generateUUID();
+        payload.floor.name = `Floor`; // Always name the floor "Floor"
+    }
+    // Iterate over walls to set UUID and names like "Wall 1", "Wall 2", etc.
+    if (payload.walls && payload.walls.length > 0) {
+        payload.walls = payload.walls.map((wall, index) => {
+            var _a, _b, _c, _d;
+            return (Object.assign(Object.assign({}, roundToTwoDecimals(wall)), { name: `_wall-${index + 1}`, uuid: wall.uuid || generateUUID(), options: {
+                    color: (_b = (_a = wall.options) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : 0xffffff,
+                    opacity: (_d = (_c = wall.options) === null || _c === void 0 ? void 0 : _c.opacity) !== null && _d !== void 0 ? _d : 1.0 // Default opacity (fully opaque)
+                } }));
+        });
+    }
+    currentPolygonData = payload;
+}
+function setPartitionData() {
+    var _a;
+    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);
+    if (currentPolygonData) {
+        let polygonData = currentPolygonData;
+        polygonData.floor.floor_level = Number(floorLevel);
+        const payload = {
+            uuid: generateUUID(),
+            space_uuid: spaceUUID,
+            name: `${i18n.t('Partition')} ${currentPartitionDataArray.length + 1}`,
+            parent_uuid: null,
+            polygon_json: JSON.stringify(polygonData)
+        };
+        if (currentEditRoomData) {
+            payload.parent_uuid = currentEditRoomData.uuid;
+        }
+        currentPartitionDataArray.push(payload);
+    }
+}

package/lib/atwinui/components/toolbar/roomCreation/roomLayerListPane.d.ts

@@ -0,0 +1,33 @@
+import { RoomNode } from "../../../../types";
+/**
+ * Renders and returns the HTML element for the room layer list pane.
+ * @returns {HTMLElement} The HTML element representing the room layer list pane.
+ */
+export declare function renderRoomLayerListPane(): HTMLElement;
+/**
+ * Renders the UI for the Room tree structure.
+ * @param rooms - Details of the rooms to construct the tree.
+ */
+export declare function renderRoomTree(rooms: Array<RoomNode>): void;
+/**
+ * Renders the UI for the specified room.
+ * @param room - The details of the room to be rendered.
+ */
+export declare function renderRoom(room: RoomNode): HTMLUListElement;
+/**
+ * Renders the partitions for a specific room.
+ * @param roomPartitions - The details of the room partitions to be rendered.
+ * @param roomId - The identifier of the room to which the partitions belong.
+ */
+export declare function renderPartitions(roomPartitions: RoomNode[], roomId: string): void;
+/**
+ * Renders the items within a specific partition.
+ * @param partitionItems - The details of the partition items to be rendered.
+ */
+export declare function renderPartitionItems(partitionItems: any): string;
+export declare function updateParentVisibility(isPartition: boolean, currentBtn: HTMLElement): void;
+/**
+ * Retrieves the current room data being edited.
+ * @returns The current room node being edited.
+ */
+export declare function getCurrentEditRoomData(): RoomNode;