architwin 1.9.2 → 1.9.4

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

@@ -8,12 +8,15 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { getBundleVersion, extractUUID } from "../../../../utils";
-import { batchAddEventListenerByClassName, handleRoomVisibility, toggleDisplayPane } from "../../../events";
+import { batchAddEventListenerByClassName, handlePartitionVisibility, handlePolygonVisibility, toggleDisplayPane } from "../../../events";
 import i18n from "../i18n";
 import { setPartitionFormMode } from "./roomFormPane";
-import { _3DXObjects } from "../../../../architwin";
+import { SPACE_EVENTS } from "../../../../types";
+import { _3DXObjects, dispatchSpaceEvent, getChildrenOfModel } from "../../../../architwin";
 let roomDataArray = [];
 let currentEditRoomData = null;
+let currentSelectedPartitionId = null;
+let currentFilteredDisplay = "All";
 /**
  * Renders and returns the HTML element for the room tree pane.
  * @returns {HTMLElement} The HTML element representing the room tree pane.
@@ -67,9 +70,11 @@ export function renderRoomTreePane() {
  * Displays the UI for the Room tree structure.
  * @param partitions - Details of the partitions to construct the tree.
  */
-export function displayRoomTree(partitions) {
-    console.log("__@ displayRoomTree");
+export function displayRoomTree(partitions, objectData) {
+    console.log("__@ displayRoomTree partitions ", partitions);
     console.info("__@ Room tree _3DXObjects: ", _3DXObjects);
+    console.info("__@ Room tree objectData: ", objectData);
+    const filteredDisplay = filteredData(partitions);
     try {
         // Target the at-room-tree container
         const roomTreeContainer = document.getElementById('at-room-tree');
@@ -79,12 +84,12 @@ export function displayRoomTree(partitions) {
         const rootUl = document.createElement('ul');
         rootUl.classList.add('at_room_tree');
         // Iterate over each room
-        partitions.forEach(item => {
-            const partitionItem = displayPartition(item);
+        filteredDisplay.forEach((item) => {
+            const partitionItem = displayRoomPartition(item, objectData);
             roomTreeContainer.appendChild(partitionItem);
             if (item.children.length > 0) {
-                // Render room partitions
-                displayPartitions(item.children, item.uuid);
+                // Render child partitions
+                displayChildPartitions(item.children, item.uuid, objectData);
             }
         });
         // Append the root <ul> to the #at-room-tree container
@@ -101,16 +106,20 @@ export function displayRoomTree(partitions) {
  * @param {PartitionNode} partition - The details of the room to be rendered.
  * @returns {HTMLElement}
  */
-export function displayPartition(partition) {
+export function displayRoomPartition(partition, objectData) {
+    console.log("__@ displayPartition partition ", objectData);
     const element = document.createElement('ul');
     element.classList.add('at_room_tree');
+    // @ts-ignore
+    const isVisible = objectData ? objectData.some(obj => obj.component.mesh.children.some(child => child.visible)) : false;
+    console.log("__@ isVisible", isVisible);
     element.innerHTML = `
         <li class="at_room_tree_parent">
             <div class="at_flex at_space_between at_toggle">
-                <span class="toggle selectable" >▶ ${partition.name}</span> 
+                <span class="toggle selectable" id="at-room-${partition.uuid}">▶ ${partition.name}</span> 
                 <div>
                     <span id="at-room-edit-${partition.uuid}-btn" class="mdi mdi-pencil at_room_edit_btn" target-pane="at-room-form-pane"></span>
-                    <span id="at-room-visibility-${partition.uuid}-btn" class="mdi mdi-eye at_room_visible_btn"></span>
+                    <span id="at-room-visibility-btn-${partition.uuid}" class="mdi ${isVisible ? 'mdi-eye ' : 'mdi-eye-off'} at_room_visible_btn"></span>
                 </div>
             </div>
             <ul id="at-partition-container-${partition.uuid}" class="hidden">
@@ -125,69 +134,100 @@ export function displayPartition(partition) {
  * @param partitionId - The identifier of the room to which the partitions belong.
  * @returns {HTMLElement}
  */
-export function displayPartitions(partitions, partitionId) {
-    console.log("__@ displayPartitions: ", partitions);
-    const partitionContainer = document.getElementById(`at-partition-container-${partitionId}`);
-    if (partitionContainer) {
-        partitionContainer.innerHTML = '';
-        partitions.forEach(partition => {
-            console.log("__@ room partition: ", partition);
-            const partitionItem = partition.name.split(' ');
-            // Append HTML to the container
-            let partitionHTML = `
-                <li class="at_room_tree_child">
-                    <div class="at_flex at_space_between at_toggle">
-                        <span class="toggle selectable">▶ ${i18n.t(`${partitionItem[0]}`)} ${partitionItem[1]}</span> 
-                        <div>
-                            <span id="at-partition-visibility-${partition.uuid}-btn" class="mdi mdi-eye at_room_visible_btn"></span>
-                        </div>
-                    </div>
-                    <ul id="at-partition-items-container-${partition.uuid}" class="hidden">
-            `;
-            const polygonJson = JSON.parse(partition.polygon_json);
-            console.log("artition polygon data: ", polygonJson);
-            if (polygonJson && polygonJson.floor && polygonJson.walls) {
-                // Render floor
-                partitionHTML += displayPartitionItems(polygonJson.floor);
-                // Render walls 
-                if (polygonJson.walls.length > 0) {
-                    partitionHTML += displayPartitionItems(polygonJson.walls);
-                }
+export function displayChildPartitions(partitions, parentPartitionId, objectData) {
+    console.log("__@ displayChildPartitions objectData: ", objectData);
+    const partitionContainer = document.getElementById(`at-partition-container-${parentPartitionId}`);
+    if (!partitionContainer)
+        return;
+    // Clear existing content
+    partitionContainer.innerHTML = '';
+    const partitionHTML = partitions.map((partition, index) => {
+        let objectId = 0;
+        let modelChildren = [];
+        let polygonObj;
+        // Find object data
+        if (objectData) {
+            polygonObj = objectData.find((obj) => obj.object.object_data.uuid === partition.uuid);
+            if (polygonObj) {
+                objectId = polygonObj.object.id;
+                modelChildren = getChildrenOfModel(polygonObj.component).filter((model) => model.name !== '' && !model.name.includes('wallLabel') && !model.name.includes('edgeLabel'));
             }
-            partitionHTML += `</ul></li>`;
-            partitionContainer.innerHTML += partitionHTML;
-        });
-    }
+        }
+        // Parse polygon_json data
+        const polygonJson = partition.polygon_json ? JSON.parse(partition.polygon_json) : null;
+        console.log("Partition polygon data: ", polygonJson);
+        let childHTML = '';
+        console.log("modelChildren: ", modelChildren);
+        if (polygonJson && polygonJson.floor && polygonJson.walls) {
+            // Render floor
+            const floorObj = modelChildren.find(item => item.name.includes('floor'));
+            console.log("modelChildren floorObj: ", floorObj);
+            childHTML += displayPartitionItems(polygonJson.floor, partition.uuid, floorObj);
+            // Render walls
+            if (polygonJson.walls.length > 0) {
+                // modelChildren.splice(index, 1); // Remove processed child
+                const wallObjs = modelChildren.filter(item => !item.name.includes("floor"));
+                console.log("modelChildren wallObjs: ", wallObjs);
+                childHTML += displayPartitionItems(polygonJson.walls, partition.uuid, wallObjs);
+            }
+        }
+        // @ts-ignore
+        const isVisible = polygonObj ? polygonObj.component.mesh.children.find(child => child.visible === true) : false;
+        console.log("__@ child isVisible ", isVisible);
+        return `
+                
+            <li class="at_room_tree_child">
+                <div id="at-child-partition-${partition.uuid.split('-')[0]}" class="at_flex at_space_between at_toggle">
+                    <span class="toggle selectable" id="at-partition-${partition.uuid}" parentId="at-partition-${parentPartitionId}">▶ ${i18n.t(`${partition.name}`)}</span> 
+                    <div>
+                        <span id="at-partition-visibility-btn-${objectId}" parent-id="${parentPartitionId}" 
+                              class="mdi ${isVisible ? 'mdi-eye ' : 'mdi-eye-off'} at_room_visible_btn"></span>
+                    </div>
+                </div>
+                <ul id="at-partition-items-container-${objectId}" class="hidden">
+                    ${childHTML}
+                </ul>
+            </li>
+        `;
+    }).join(''); // Combine all partition HTML strings into one
+    // Append the built HTML string to the container
+    partitionContainer.innerHTML = partitionHTML;
 }
 /**s
  * Displays the items within a specific partition.
  * @param partitionItems - The details of the partition items to be rendered.
  * @returns {HTMLElement}
  */
-export function displayPartitionItems(partitionItems) {
-    console.log("__@ displayPartitionItems: ", partitionItems);
+export function displayPartitionItems(partitionItems, partitionId, object) {
+    console.log("__@ displayPartitionItems: ", object === null || object === void 0 ? void 0 : object.name);
     let itemsHTML = '';
     // Check if item is an array, e.g.: walls
     if (Array.isArray(partitionItems)) {
         // This is for the walls
-        partitionItems.forEach(item => {
+        partitionItems.forEach((item, index) => {
             console.log("__@ partition item: ", item);
-            // Split wall name to localize
-            const match = item.name.match(/_wall-(\d+)$/);
-            itemsHTML += `
-                <li class="at_toggle">${i18n.t(`Wall`)} ${match[1]}
-                    <span id="at-partition-item-${item.uuid.substring(0, 6)}" class="mdi mdi-eye at_room_visible_btn at_pull_right"></span>
-                </li>
-            `;
+            if (!item.hide) {
+                // Split wall name to localize
+                const match = item.name.match(/_wall-(\d+)$/);
+                const isVisible = item.options.is_visible;
+                itemsHTML += `
+                    <li class="at_toggle">${i18n.t(`Wall`)} ${match[1]}
+                        <span id="${object[index].name}" partition-id="${partitionId}"  polygon-item-id="${item.uuid}" class="mdi ${isVisible ? 'mdi-eye ' : 'mdi-eye-off'} at_child_visible_btn at_pull_right"></span>
+                    </li>
+                `;
+            }
         });
     }
     else {
         // This is for the floor
-        itemsHTML += `
+        const isVisible = partitionItems.options.is_visible;
+        if (!partitionItems.hide) {
+            itemsHTML += `
             <li class="at_toggle"> ${i18n.t(`${partitionItems.name}`)}
-                <span id="at-partition-item-${partitionItems.uuid.substring(0, 6)}" class="mdi mdi-eye at_room_visible_btn at_pull_right"></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 at_pull_right"></span>
             </li>
         `;
+        }
     }
     return itemsHTML;
 }
@@ -199,6 +239,13 @@ function toggleSelectedPartition() {
     try {
         document.querySelectorAll('.at_room_tree .toggle, .at_room_tree .selectable').forEach(function (item) {
             item.addEventListener('click', function (event) {
+                const targetElement = event.target;
+                const partitionId = extractUUID(targetElement.id);
+                setSelectedPartitionId(partitionId);
+                if (item.getAttribute('parentId')) {
+                    const parentId = extractUUID(item.getAttribute('parentId'));
+                    setSelectedPartitionId(parentId);
+                }
                 // Prevent event from propagating to parent elements
                 event.stopPropagation();
                 // Find the parent div of the clicked toggle
@@ -254,7 +301,11 @@ function toggleSelectedPartition() {
         // Highlight selected item
         highlightSelectedItem(event);
         // Handle visibility logic
-        handleRoomVisibility(target.id);
+        handlePartitionVisibility(target.id);
+    }));
+    batchAddEventListenerByClassName('at_child_visible_btn', (event) => __awaiter(this, void 0, void 0, function* () {
+        const target = event.target;
+        handlePolygonVisibility(target.id);
     }));
 }
 /**
@@ -299,6 +350,32 @@ export function updateParentVisibility(isPartition, currentBtn) {
         }
     }
 }
+function filteredData(data) {
+    const displayFilter = getFilteredDisplay();
+    let filtredData;
+    if (displayFilter === "All") {
+        filtredData = data;
+    }
+    else if (["Floor", "Wall"].includes(displayFilter)) {
+        const keyToHide = displayFilter === "Floor" ? "walls" : "floor";
+        filtredData = data.map(node => (Object.assign(Object.assign({}, node), { children: node.children.map(partition => {
+                if (!partition.polygon_json)
+                    return partition;
+                const polygonData = JSON.parse(partition.polygon_json);
+                if (keyToHide === "walls" && Array.isArray(polygonData.walls)) {
+                    polygonData.walls.forEach(wall => wall.hide = true);
+                }
+                else if (keyToHide === "floor" && polygonData.floor) {
+                    polygonData.floor.hide = true;
+                }
+                return Object.assign(Object.assign({}, partition), { polygon_json: JSON.stringify(polygonData) });
+            }) })));
+    }
+    else {
+        throw new Error("Invalid filter value");
+    }
+    return filtredData;
+}
 /**
  * Sets the room data for the application.
  * @param rooms - An array of room nodes to be stored.
@@ -310,7 +387,7 @@ function setRoomData(rooms) {
  * Retrieves the stored room data.
  * @returns An array of room nodes.
  */
-function getRoomData() {
+export function getRoomData() {
     return roomDataArray;
 }
 /**
@@ -328,3 +405,132 @@ function setCurrentEditRoomData(id) {
 export function getCurrentEditRoomData() {
     return currentEditRoomData;
 }
+function setSelectedPartitionId(partitionId) {
+    currentSelectedPartitionId = partitionId;
+}
+export function getSelectedPartitionId() {
+    return currentSelectedPartitionId;
+}
+/**
+ * Updates the visibility of a partition and its children if it's a parent partition.
+ * @param isVisible - The visibility state to set (true/false).
+ * @param currPartition - The current partition node to update.
+ * @param isParentPartition - Indicates if the current partition is a parent (true) or a child (false).
+ */
+export function updatePartitionVisibilityUI(isVisible, currPartition, isParentPartition, isUpdateAllChildren) {
+    return __awaiter(this, void 0, void 0, function* () {
+        console.log("updatePartitionVisibilityUI currPartition: ", currPartition);
+        if (!currPartition) {
+            console.error("Invalid partition");
+            return;
+        }
+        if (isParentPartition) {
+            // Auto update visibility of all children
+            currPartition.children.forEach((child) => __awaiter(this, void 0, void 0, function* () {
+                yield updatePolygonData(child, isVisible, isUpdateAllChildren);
+            }));
+        }
+        else {
+            // Children: Ex: Partition 1
+            yield updatePolygonData(currPartition, isVisible, isUpdateAllChildren);
+        }
+    });
+}
+/**
+ * Updates the visibility of a specific polygon (floor or wall) within a partition.
+ * @param isVisible - The visibility state to set (true/false).
+ * @param currPartition - The current partition node containing the polygon data.
+ * @param isFloor - Indicates if the target is a floor (true) or a wall (false).
+ * @param polygonItemId - The ID of the specific polygon (floor or wall) to update.
+ */
+export function updatePolygonVisibilityData(isVisible, currPartition, isFloor, polygonItemId) {
+    return __awaiter(this, void 0, void 0, function* () {
+        console.log("updatePolygonVisibility:", currPartition, isFloor, polygonItemId);
+        if (currPartition) {
+            let targetItem = null;
+            // Parse polygon_json data
+            const polygonJson = JSON.parse(currPartition.polygon_json);
+            // Check if floor or walls
+            if (isFloor) {
+                console.log("FLOOR!");
+                // FLOOR
+                targetItem = polygonJson.floor.uuid === polygonItemId ? polygonJson.floor : null;
+            }
+            else {
+                console.log("WALL!");
+                // WALLS
+                targetItem = polygonJson.walls.find(item => item.uuid === polygonItemId) || null;
+            }
+            if (targetItem) {
+                targetItem.options.is_visible = isVisible;
+                // Update and dispatch event
+                currPartition.polygon_json = JSON.stringify(polygonJson);
+                console.log("Updated currPartition:", currPartition);
+                // Dispatch event: PARTITION_EDITED
+                dispatchSpaceEvent(SPACE_EVENTS.PARTITION_EDITED, { data: currPartition, isUpdateTree: false });
+            }
+            else {
+                console.warn("Target not found.");
+            }
+        }
+    });
+}
+/**
+ * Helper function to update the visibility and dispatch PARTITION_EDITED event.
+ * @param currPartition - The partition node to update.
+ * @param isVisible - The visibility state to set (true/false).
+ */
+function updatePolygonData(currPartition, isVisible, isUpdateAllChildren) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const polygonJson = currPartition.polygon_json ? JSON.parse(currPartition.polygon_json) : {};
+        // Update visibility in polygon_json
+        if (!isUpdateAllChildren) {
+            polygonJson.options.is_visible = isVisible;
+        }
+        else {
+            console.log("polygonJson: ", polygonJson, isVisible);
+            if (isUpdateAllChildren) {
+                // Update floor and walls same with Partition visibility
+                polygonJson.floor.options.is_visible = isVisible;
+                polygonJson.walls.forEach(wall => {
+                    wall.options.is_visible = isVisible;
+                });
+            }
+        }
+        currPartition.polygon_json = JSON.stringify(polygonJson);
+        console.log("updatePolygonData: ", JSON.parse(currPartition.polygon_json));
+        // Dispatch event: PARTITION_EDITED
+        dispatchSpaceEvent(SPACE_EVENTS.PARTITION_EDITED, { data: currPartition, isUpdateTree: false });
+    });
+}
+/**
+ * Toggles the target element visibility state.
+ * @param element - Target HTML element.
+ * @param isVisible - Visibility state of the element.
+ */
+export function toggleVisibilityState(element, isVisible) {
+    element.classList.toggle('mdi-eye', isVisible);
+    element.classList.toggle('mdi-eye-off', !isVisible);
+}
+export function setFilteredDisplay(type) {
+    // Types - 'All', 'Floor', 'Wall'
+    // All : display all
+    // Floor : display floors only
+    // Wall : display walls only
+    currentFilteredDisplay = type;
+}
+function getFilteredDisplay() {
+    return currentFilteredDisplay;
+}
+/**
+ * Toggles the visibility button state of the target room.
+ * @param parentId - ID of the room
+ * @param isVisible - Visibility value
+ */
+export function updateRoomVisibilityUI(parentId, isVisible) {
+    const roomElement = document.getElementById(`at-room-visibility-btn-${parentId}`);
+    console.log("roomElement: ", roomElement);
+    if (isVisible && roomElement.classList.contains('mdi-eye-off')) {
+        toggleVisibilityState(roomElement, true);
+    }
+}

package/lib/atwinui/events.d.ts

@@ -13,5 +13,14 @@ declare function handleShowMinimap(): void;
 declare function handleScrollToView(scrollContainerId: string, targetId: string): void;
 declare function handleRenderMeetingUI(): void;
 declare function setupSpaceEventSubscriptions(): void;
-declare function handleRoomVisibility(targetId: string): Promise<void>;
-export { activeToolbarItem, activeActionItem, cancelModelPlacementPrompt, batchAddEventListenerById, batchAddEventListenerByClassName, batchAddEventListenerByClassNames, setActiveToolbarItem, toggleDisplayPane, toggleActionBar, setupIndividualEventListeners, setupSpaceEventSubscriptions, handleModelVisibility, handleDeleteModel, handleShowMinimap, handleScrollToView, handleRenderMeetingUI, handleRoomVisibility, };
+/**
+ * Toggles the visibility of the partitions within a room tree.
+ * @param {string} targetId - ID of the target partition element.
+ */
+declare function handlePartitionVisibility(targetId: string): Promise<void>;
+/**
+ * Toggles the visibility of the child partitions within a partition tree. (FLOOR and WALLS)
+ * @param {string} targetId - ID of the target partition element.
+ */
+declare function handlePolygonVisibility(targetId: string): Promise<void>;
+export { activeToolbarItem, activeActionItem, cancelModelPlacementPrompt, batchAddEventListenerById, batchAddEventListenerByClassName, batchAddEventListenerByClassNames, setActiveToolbarItem, toggleDisplayPane, toggleActionBar, setupIndividualEventListeners, setupSpaceEventSubscriptions, handleModelVisibility, handleDeleteModel, handleShowMinimap, handleScrollToView, handleRenderMeetingUI, handlePartitionVisibility, handlePolygonVisibility, };