architwin 1.14.16 → 1.15.0

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

@@ -1,798 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import i18n from '../i18n';
-import { SPACE_EVENTS } from "../../../../types";
-import { batchAddEventListenerByClassName } from "../../../events";
-import { startDraw, cancelDraw, disposeModel, _3DXObjects, getCurrentPolygon, dispatchSpaceEvent, getPolygonFloorOffset } from '../../../../architwin';
-import { generateUUID, extractUUID } from '../../../../utils';
-import { getCurrentEditRoomData } from './roomLayerListPane';
-import { toggleModal, setModalAction } from "../modal";
-import { Notyf } from 'notyf';
-import log from 'loglevel';
-let isDrawing = false;
-let roomFormMode = "ADD" /* FORM_MODE.ADD */;
-let isSaving = false;
-let currentPolygonData = null;
-let currentPartitionDataArray = [];
-let savedPartitionDataArray = [];
-let currentEditPartitionData = null;
-let currentDeletePartitionData = null;
-let currentEditRoomData = null;
-let notify = new Notyf({ position: { x: 'left', y: 'bottom' } });
-let newlyAddedPartition = [];
-let deletedSavedPartitionArray = [];
-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-auto-level-floor" data-cy="at-auto-level-floor">
-                <input type="checkbox" id="at-floor-offset-checkbox" data-cy="at-floor-offset-checkbox" checked/>
-                ${i18n.t('AutoLevel')}
-                <span class="mdi mdi-help-circle-outline"></span>
-            </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-map-marker at_icon" id="at-mark-floor-btn" data-cy="at-mark-floor-btn"></span>
-                    <span class="mdi mdi-help-circle-outline"></span>
-                    <div class="at_icon_tooltip" data-cy="at-tooltip-room-floor-level">If enabled, will add an offset to the distance between the partition and floor of the space</div>
-                </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" 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">
-                ${i18n.t('Save')}
-                <span class="mdi mdi-content-save" id="at-save-room-btn"></span>
-            </div>
-        </div>
-    `;
-    return element;
-}
-/**
- * Toggles the state of the partition drawing functionality.
- * If drawing is not active, it starts the drawing process.
- * Otherwise, it cancels the current drawing, updates partition data,
- * and displays the relevant UI elements for partitions.
- */
-export function toggleDrawPartitionButton() {
-    console.log("toggleDrawPartitionButton()");
-    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');
-        setPartitionData();
-        cancelDrawing();
-        if (currentPartitionDataArray.length !== 0) {
-            partitionItem.style.display = 'flex';
-            vertexList.style.display = 'none';
-            partitionList.style.justifyContent = 'start';
-            displayPartitions(currentPartitionDataArray);
-            notify.success(`${i18n.t('SuccessPartitionAddSpace')}`);
-        }
-        currentPolygonData = undefined;
-    }
-}
-/**
- * Displays the partition form based on the current form mode.
- * Handles different UI behaviors for edit and add modes.
- */
-export function displayPartitionFormMode() {
-    console.log("displayPartitionFormMode()");
-    displayFormTitle();
-    if (roomFormMode === "EDIT" /* FORM_MODE.EDIT */) {
-        currentEditRoomData = getCurrentEditRoomData();
-        populatePartitionForm(currentEditRoomData);
-        displayElement('at-delete-room-btn', 'block');
-    }
-    else if (roomFormMode === "ADD" /* FORM_MODE.ADD */) {
-        const floorOffset = document.getElementById('at-room-floor-level-input');
-        const currentOffsetValue = getPolygonFloorOffset();
-        log.info("currentOffsetValue ", currentOffsetValue);
-        floorOffset.value = currentOffsetValue.toString();
-        displayElement('at-no-partition-display');
-        displayElement('at-room-wall-height', 'block');
-    }
-    else {
-        console.error("Error occurred");
-    }
-}
-/**
- * Populates the partition form with the given room node data.
- * Updates form fields and displays partitions based on the provided data.
- *
- * @param partition - The RoomNode object containing partition data.
- */
-function populatePartitionForm(partition) {
-    console.log("populatePartitionForm()", partition);
-    // Populate Room Form
-    const name = document.getElementById('at-room-name-input');
-    name.value = partition.name;
-    const floorLevel = document.getElementById('at-room-floor-level-input');
-    const memo = document.getElementById('at-room-memo-input');
-    const floorOffset = document.getElementById('at-room-floor-level-input');
-    if (partition.polygon_json != null) {
-        memo.value = JSON.parse(partition.polygon_json).memo;
-    }
-    // Display Partitions
-    currentPartitionDataArray = partition.children;
-    savedPartitionDataArray = partition.children;
-    if (currentPartitionDataArray.length !== 0) {
-        floorLevel.value = JSON.parse(partition.children[0].polygon_json).floor.floor_level;
-        displayPartitions(currentPartitionDataArray);
-    }
-}
-/**
- * Updates the form title based on the current form mode.
- * Displays "Add Room" or "Edit Room" accordingly.
- */
-function displayFormTitle() {
-    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);
-}
-/**
- * Sets the `display` style property of a DOM element.
- *
- * @param id - The ID of the element to update.
- * @param value - The value to set for the `display` property (default is "flex").
- */
-function displayElement(id, value = "flex") {
-    const element = document.getElementById(id);
-    if (!element) {
-        console.error(`Element with ID "${id}" not found.`);
-        return;
-    }
-    element.style.display = value;
-}
-/**
- * Hides a DOM element by setting its `display` style property to `none`.
- *
- * @param id - The ID of the element to hide.
- */
-function hideElement(id) {
-    const element = document.getElementById(id);
-    if (!element) {
-        console.error(`Element with ID "${id}" not found.`);
-        return;
-    }
-    element.style.display = 'none';
-}
-/**
- * Displays the given partitions by updating the UI with partition rows.
- * Also sets up event listeners for editing partition names and confirming changes.
- *
- * @param partitions - The list of partitions to be displayed.
- */
-function displayPartitions(partitions) {
-    console.log("displayPartitions()", partitions);
-    if (partitions.length == 0) {
-        displayElement('at-no-partition-display');
-    }
-    else {
-        hideElement('at-no-partition-display');
-    }
-    const partitionContainer = document.getElementById('at-partition-item-container');
-    partitionContainer.style.display = 'flex';
-    partitionContainer.innerHTML = ``;
-    // Display each partition row
-    partitions.forEach((partition) => {
-        const row = displayPartitionRow(partition);
-        partitionContainer.appendChild(row);
-    });
-    // 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);
-        if (currentEditPartitionData) {
-            editPartitionNameInput.value = currentEditPartitionData.name;
-            const polygonData = JSON.parse(currentEditPartitionData.polygon_json);
-            displayFaces(polygonData);
-        }
-    });
-    // Set up event listener for confirming partition name change
-    addEventListenerById('at-confirm-edit-partition-name', () => {
-        const editPartitionNameInput = document.getElementById('at-edit-partition-name-input');
-        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) {
-            // Update the name of the partition in the array
-            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.");
-        }
-        // Re-display the confirm button after 2 seconds
-        setTimeout(() => {
-            confirmEditPartitionName.style.display = 'flex';
-        }, 1000);
-    });
-    // Set up event listener for deleting partition
-    batchAddEventListenerByClassName('at_delete_partition_btn', (event) => __awaiter(this, void 0, void 0, function* () {
-        console.log('Event', event);
-        const targetElement = event.target;
-        const partitionId = extractUUID(targetElement.id);
-        const target = _3DXObjects.find(obj => obj.object.object_data.uuid === partitionId);
-        if (target) {
-            toggleModal();
-            setModalAction({
-                title: `${i18n.t('DeletePartition')}`,
-                description: `${i18n.t('ConfirmDeletePartition')}`,
-                buttonLabel: `${i18n.t('YesDelete')}`
-            }, () => __awaiter(this, void 0, void 0, function* () {
-                // Delete from space
-                disposeModel(target);
-                currentDeletePartitionData = partitions.find(partition => partition.uuid === partitionId);
-                // Delete from display in the toolbar
-                currentPartitionDataArray = partitions.filter(partition => partition.uuid !== partitionId);
-                if (currentEditRoomData)
-                    currentEditRoomData.children = currentPartitionDataArray;
-                displayPartitions(currentPartitionDataArray);
-                // Delete from db
-                if (!newlyAddedPartition.includes(currentDeletePartitionData)) {
-                    dispatchSpaceEvent(SPACE_EVENTS.PARTITION_DISPOSED, currentDeletePartitionData);
-                }
-                toggleModal(false);
-                notify.success(`${i18n.t('SuccessPartitionDelete')}`);
-            }));
-        }
-        else {
-            notify.error("NoPartitionDeleted");
-        }
-    }));
-}
-/**
- * Creates a row element to display partition information.
- * Each row contains the partition name, edit button, and delete button.
- *
- * @param partition - The partition object containing the data to display.
- * @returns A div element representing the partition row.
- */
-function displayPartitionRow(partition) {
-    console.log("displayPartitionRow()", partition);
-    // Create the partition row element
-    const element = document.createElement('div');
-    element.classList.add('at_partition_item');
-    // Set the inner HTML of the partition row
-    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;
-}
-/**
- * Displays the details of faces associated with a given polygon, including floor and wall information.
- * Also sets up event listeners for toggling visibility of face details and navigating back to the partition list.
- *
- * @param polygon - The polygon object containing the floor and walls data.
- */
-function displayFaces(polygon) {
-    console.log("displayFaces()", polygon);
-    const faceVertexContainer = document.getElementById('at-face-vertex-container');
-    faceVertexContainer.innerHTML = '';
-    const element = document.createElement('div');
-    element.classList.add('at_face_vertex_item');
-    // Display the floor details
-    element.appendChild(displayFloor(polygon.floor));
-    // Display each wall's details
-    polygon.walls.forEach((wall) => {
-        element.appendChild(displayWalls(wall));
-    });
-    faceVertexContainer.appendChild(element);
-    // Back button event listener for displaying partition list
-    addEventListenerById('at-back-partition', goBackToPartitionList);
-    // Toggle visibility of face details when clicked
-    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';
-        // Toggle the chevron icon to indicate expanded or collapsed state
-        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');
-    });
-}
-/**
- * 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
-    displayPartitions(currentPartitionDataArray);
-    // Clear the current edit partition data
-    currentEditPartitionData = null;
-}
-/**
- * Displays the floor information in the UI, including the floor name, edit options, and associated vertices.
- * @param floor - The floor data to display.
- * @returns The created HTML element representing the floor and its associated data.
- */
-function displayFloor(floor) {
-    console.log('displayFloor()', 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 = displayLines(vertex, index + 1, '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) {
-    console.log('displayWalls()', wall);
-    // Extract the wall name from the format "_wall-{number}" using regex
-    const match = wall.name.match(/_wall-(\d+)$/);
-    let wallName = '';
-    if (match) {
-        wallName = `${i18n.t('Wall')} ${match[1]}`;
-    }
-    const element = document.createElement('div');
-    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 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 = displayLines(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'.
- * @param vertex - The vertex (edge) data to display.
- * @param index - The index of the line to display.
- * @param faceType - The type of face ('floor' or 'wall').
- * @returns The created HTML element representing the line and its associated data.
- */
-function displayLines(vertex, index, faceType) {
-    console.log('displayLines()', vertex);
-    const element = document.createElement('div');
-    element.classList.add('at_vertex_item');
-    // Determine whether to display the delete icon based on faceType ('floor' only)
-    const deleteIconHtml = 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>`;
-    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>
-        ${deleteIconHtml}
-    `;
-    return element;
-}
-/**
- * Adds a click event listener to an element with the given ID.
- * @param id - The ID of the element to attach the event listener to.
- * @param callback - The function to be executed when the element is clicked.
- */
-function addEventListenerById(id, callback) {
-    const element = document.getElementById(id);
-    if (element) {
-        element.addEventListener('click', callback);
-    }
-    else {
-        console.warn(`Element with id "${id}" not found.`);
-    }
-}
-/**
- * Clears the partition form by resetting UI elements and internal data.
- * - Navigates back to the partition list view.
- * - Cancels any ongoing drawing actions.
- * - Hides relevant UI elements like wall height, delete button, and partition container.
- * - Resets the form and clears data related to the current partition, room, and polygon.
- */
-export function clearPartitionForm() {
-    console.log('clearPartitionForm()');
-    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;
-    currentDeletePartitionData = null;
-    newlyAddedPartition = [];
-    deletedSavedPartitionArray = [];
-    savedPartitionDataArray = [];
-}
-/**
- * Cancels the drawing action for a partition.
- * - Calls the cancelDraw function to stop any ongoing drawing action.
- * - Sets the drawing state to false.
- * - Updates the draw room button UI to indicate the drawing is canceled (removes active class, restores button text and icon).
- */
-function cancelDrawing() {
-    console.log('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>
-    `;
-}
-/**
- * Starts the drawing action for a partition.
- * - Calls the startDraw function to initiate the drawing action.
- * - Sets the drawing state to true.
- * - Updates the draw room button UI to indicate the drawing mode is active (removes inactive class, adds active class, and changes button text and icon).
- */
-function startDrawing() {
-    console.log('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>
-    `;
-}
-// ==== SETTERS AND GETTERS ==== //
-/**
- * Retrieves the form data for creating or editing a room partition.
- * - Collects values from form inputs (name, floor level, memo).
- * - Constructs a payload object containing the room data, including the space UUID and polygon data.
- * - Updates the polygon data for each partition in the currentPartitionDataArray to reflect the new floor level.
- * - If there is existing room data (currentEditRoomData), it returns that data with updated values.
- *
- * @returns {RoomNode} The room data object with partition and floor details.
- */
-export function getPartitionFormData() {
-    var _a, _b, _c;
-    console.log('getPartitionFormData()');
-    const name = ((_a = document.getElementById('at-room-name-input')) === null || _a === void 0 ? void 0 : _a.value) || null;
-    const floorLevel = ((_b = document.getElementById('at-room-floor-level-input')) === null || _b === void 0 ? void 0 : _b.value) || null;
-    let memo = ((_c = document.getElementById('at-room-memo-input')) === null || _c === void 0 ? void 0 : _c.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: currentPartitionDataArray,
-    };
-    if (!memo) {
-        payload.polygon_json = null;
-    }
-    currentPartitionDataArray.forEach(partition => {
-        const polygonJson = JSON.parse(partition.polygon_json);
-        polygonJson.floor.floor_level = Number(floorLevel);
-        partition.polygon_json = JSON.stringify(polygonJson);
-    });
-    if (currentEditRoomData) {
-        payload = currentEditRoomData;
-        payload.name = name;
-        payload.polygon_json = JSON.stringify({ memo: memo });
-    }
-    return payload;
-}
-/**
- * Sets the saving mode for the partition form.
- * - If saving is enabled, `isSaving` is set to true, indicating that the form is in saving mode.
- * - If saving is disabled, `isSaving` is set to false.
- *
- * @param {boolean} savingEnabled - True to enable saving mode, false to disable.
- */
-export function setPartitionSavingMode(savingEnabled) {
-    isSaving = savingEnabled;
-}
-/**
- * Gets the current saving mode for the partition form.
- *
- * @returns {boolean} - Returns true if saving mode is enabled, false otherwise.
- */
-export function getPartitionSavingMode() {
-    return isSaving;
-}
-/**
- * Sets the form mode for the partition form.
- * - The form mode can be one of the predefined FORM_MODE values (e.g., CREATE, EDIT, etc.).
- *
- * @param {FORM_MODE} formType - The type of form mode to set.
- */
-export function setPartitionFormMode(formType) {
-    roomFormMode = formType;
-}
-/**
- * Gets the current form mode for the partition form.
- *
- * @returns {FORM_MODE} - The current form mode.
- */
-export function getPartitionFormMode() {
-    return roomFormMode;
-}
-/**
- * Sets the polygon data for the current partition, including rounding numeric values
- * to two decimal places and assigning UUIDs to the floor and walls.
- *
- * @param {PolygonData} payload - The polygon data to set, including floor and walls.
- */
-export function setPolygonData(payload) {
-    console.log('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;
-    }
-    // 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`;
-    }
-    // Iterate over walls to set UUID and names
-    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
-                } }));
-        });
-    }
-    currentPolygonData = payload;
-}
-/**
- * Sets the partition data, including updating the floor level and generating a new
- * partition with its corresponding UUID, space UUID, and polygon data.
- */
-function setPartitionData() {
-    var _a;
-    console.log('setPartitionData()');
-    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);
-    const polygonObjectData = getCurrentPolygon();
-    if (currentPolygonData) {
-        let polygonData = currentPolygonData;
-        polygonData.floor.floor_level = Number(floorLevel); // Set the floor level from the input
-        // Create a new partition data payload
-        const payload = {
-            uuid: polygonObjectData.object.object_data.uuid,
-            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; // Set the parent UUID if editing an existing room
-        }
-        currentPartitionDataArray.push(payload);
-        newlyAddedPartition.push(payload);
-    }
-}
-export function getNewlyAddedPartition() {
-    return newlyAddedPartition;
-}
-export function getDeletedSavedPartitionArray() {
-    return deletedSavedPartitionArray;
-}