architwin 1.14.15 → 1.15.0

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

@@ -27,7 +27,7 @@ export function renderRoomTreePane() {
     log.info("__@ renderRoomTreePane");
     const element = document.createElement('div');
     element.classList.add('at_container');
-    element.classList.add('at_w-12');
+    element.classList.add('at_w-15');
     element.classList.add('at_h-full');
     element.setAttribute('id', 'at-room-tree-pane');
     element.setAttribute('data-cy', 'at-room-tree-pane');
@@ -351,14 +351,27 @@ function toggleSelectedPartition() {
         handlePartitionVisibility(target.id);
     }));
     batchAddEventListenerByClassName('at_child_visible_btn', (event) => __awaiter(this, void 0, void 0, function* () {
+        var _a;
         const target = event.target;
         const li = target.closest('li');
-        if (li === null || li === void 0 ? void 0 : li.getAttribute('id').toLowerCase().includes('window')) {
+        if ((_a = li === null || li === void 0 ? void 0 : li.getAttribute('id')) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes('window')) {
             event.stopPropagation();
-            handleWindowVisibility(target);
+            handleWindowVisibility(target, true);
         }
         else {
-            handlePolygonVisibility(target.id);
+            const parentVisibleState = yield handlePolygonVisibility(target.id);
+            yield new Promise(resolve => setTimeout(resolve, 0));
+            yield new Promise(resolve => requestAnimationFrame(resolve));
+            const wallId = target.getAttribute('polygon-item-id');
+            const windowItems = document.querySelectorAll(`li.at_wall_window_row_item[wall-id="${wallId}"]`);
+            if (windowItems && windowItems.length > 0) {
+                windowItems.forEach((windowLi) => {
+                    const visibilityBtn = windowLi.querySelector('.at_child_visible_btn');
+                    if (visibilityBtn) {
+                        handleWindowVisibility(visibilityBtn, false, parentVisibleState);
+                    }
+                });
+            }
         }
     }));
     batchAddEventListenerByClassName('at_partition_wall_row_item', (event) => __awaiter(this, void 0, void 0, function* () {
@@ -374,7 +387,6 @@ function toggleSelectedPartition() {
             yield goToPosition(wallBottomMidPoint);
             highlightSelectedPartitionChild(partitionId, objectName);
             toggleHighlightedWindowItem();
-            toggeleExpandParitionWallChild(partitionId, objectName);
         }
         catch (e) {
             log.info('goToPosition failed: ', e);
@@ -398,10 +410,10 @@ function toggleSelectedPartition() {
         }
     }));
     batchAddEventListenerByClassName('at_child_edit_btn', (event) => __awaiter(this, void 0, void 0, function* () {
-        var _a;
+        var _b;
         event.stopPropagation();
         const target = event.target;
-        const isWall = ((_a = target.getAttribute('is-wall')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'true';
+        const isWall = ((_b = target.getAttribute('is-wall')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'true';
         const partitionId = target.getAttribute('partition-id');
         const parentRoomUuid = target.getAttribute('partition-parent-uuid');
         const parentRoom = document.getElementById(`at-room-edit-${parentRoomUuid}-btn`);
@@ -440,7 +452,7 @@ function toggleSelectedPartition() {
         try {
             const windowBottomMidPoint = calculateMidPoint(windowCoords);
             yield goToPosition(windowBottomMidPoint);
-            highlightSelectedWallWindow(wallUuid, windowIndex);
+            highlightSelectedWindow(wallUuid, windowIndex);
         }
         catch (e) {
             log.info('goToPosition failed: ', e);
@@ -600,6 +612,8 @@ export function updatePolygonVisibilityData(isVisible, currPartition, isFloor, p
                 log.info("WALL!");
                 // WALLS
                 targetItem = polygonJson.walls.find(item => item.uuid === polygonItemId) || null;
+                const windows = (targetItem === null || targetItem === void 0 ? void 0 : targetItem.windows) || null;
+                windows === null || windows === void 0 ? void 0 : windows.forEach(w => w.options.is_visible = isVisible);
             }
             log.info("targetItem:", targetItem);
             if (targetItem) {
@@ -652,6 +666,9 @@ function updatePolygonData(currPartition, isVisible, isUpdateAllChildren) {
                 polygonJson.floor.options.is_visible = isVisible;
                 polygonJson.walls.forEach(wall => {
                     wall.options.is_visible = isVisible;
+                    if (wall === null || wall === void 0 ? void 0 : wall.windows) {
+                        wall === null || wall === void 0 ? void 0 : wall.windows.forEach(window => window.options.is_visible = isVisible);
+                    }
                 });
             }
         }
@@ -707,18 +724,25 @@ export function highlightSelectedPartitionChild(partitionId, name) {
             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('▶', '▼');
+                    toggleExpandParitionWallChild(partitionId, name, false);
                 }
                 else {
                     arrow.textContent = arrow.textContent.replace('▼', '▶');
+                    toggleExpandParitionWallChild(partitionId, name, true);
                 }
             }
         }
     });
 }
-export function toggeleExpandParitionWallChild(partitionId, name) {
+/**
+ * Toggles the visibility of child elements within a partition wall by managing CSS classes.
+ * @param partitionId - The unique identifier of the partition containing the child elements
+ * @param name - The specific name/identifier of the child element whose container to toggle
+ * @param expand - Optional boolean to explicitly set expansion state (true = show, false = hide). If undefined, toggles current state
+ */
+export function toggleExpandParitionWallChild(partitionId, name, expand) {
     const partitionChildren = document.querySelectorAll(`li[partition-li-id="${partitionId}"]`);
     const targetId = `partition-child-${name}`;
     partitionChildren.forEach((partitionChild) => {
@@ -726,7 +750,7 @@ export function toggeleExpandParitionWallChild(partitionId, name) {
         const listContainer = partitionChild.querySelector('.at_wall_children_container');
         if (listContainer) {
             if (isSelected) {
-                listContainer.classList.toggle('at_hidden');
+                listContainer.classList.toggle('at_hidden', expand !== undefined ? !expand : undefined);
             }
             else {
                 listContainer.classList.add('at_hidden');
@@ -743,13 +767,13 @@ function displayWindows(wall, partitionId, parentId) {
                 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>
+                <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>
                 `;
             }
         });
@@ -806,25 +830,38 @@ function openWindowEdit(targetElement, parentRoomElement, parentRoomUuid, partit
         }
     });
 }
-export function highlightSelectedWallWindow(wallUuid, index) {
+/**
+ * Highlights the selected window element by toggling CSS classes and ensures its parent partition is expanded.
+ * @param wallUuid - The unique identifier of the wall containing the window elements
+ * @param index - The index or identifier of the specific window element to highlight
+ */
+export function highlightSelectedWindow(wallUuid, index) {
     const wallWindow = document.querySelectorAll(`li[wall-id="${wallUuid}"]`);
     const targetId = `window-${wallUuid}-${index}`;
     wallWindow.forEach((windowElement) => {
+        if (windowElement.id === targetId) {
+            const parentWallItem = windowElement.closest('li.at_partition_wall_row_item');
+            const partitionId = parentWallItem.getAttribute('partition-li-id');
+            const objectName = parentWallItem.getAttribute('object-name');
+            toggleExpandParitionWallChild(partitionId, objectName, true);
+        }
         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');
-    });
-}
+/**
+ * Removes the highlight from all selected window items by removing the 'selected' CSS class.
+ */
 export function toggleHighlightedWindowItem() {
     const windowItems = document.querySelectorAll('li.at_wall_window_row_item.selected');
     windowItems.forEach(el => {
         el.classList.remove('selected');
     });
 }
+/**
+ * Calculates the midpoint (centroid) of multiple 3D coordinates by averaging their x, y, and z values.
+ * @param coords - An array of objects containing start Vector3 coordinates
+ * @returns A Vector3 representing the calculated midpoint of all input coordinates
+ */
 export function calculateMidPoint(coords) {
     const count = coords.length;
     const sum = coords.reduce((acc, coord) => ({

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

@@ -1,5 +1,6 @@
 import { _tagCategories, _tags, getMpTags } from "../../../architwin";
 import { convertToCssRgb, stringContains } from "../../../utils";
+import { TAG_TYPE } from "../../../types";
 import { renderTags, setSelectedCategoryFilter, setSelectedSubcategoryFilter, filterTagList, getAllSubcategories, selectedCategoryFilterId, sortTags, selectedTagSortOption } from './tagListPane';
 import i18n from './i18n';
 let mode = 'adding';
@@ -341,7 +342,7 @@ function selectOption(option, elementId, skipToggle = false) {
             const elementId = isFilterDropdown ? 'at-subcategory-filter-options' : 'at-subcategory-options';
             clearInnerHTML(elementId);
         }
-        const tags = getMpTags();
+        let tags = getMpTags().filter(tag => !tag.tag_type || tag.tag_type !== TAG_TYPE.IOT);
         const filteredTags = filterTagList(tags);
         const sortedTags = sortTags(filteredTags ? filteredTags : tags, selectedTagSortOption);
         renderTags(sortedTags);

package/lib/atwinui/components/toolbar/tagListPane.d.ts

@@ -1,12 +1,14 @@
-import { ITag, ITagCategory, SortConfig } from "../../../types";
+import { ITag, ITagCategory, SortConfig, TAG_TYPE } from "../../../types";
 import { MpSdk } from "../../../../bundle/sdk";
 export declare let selectedCategoryFilterId: any;
 export declare let selectedSubCategoryFilterId: any;
+export declare let isTagPaneActive: boolean;
+export declare let currentTagPaneMode: TAG_TYPE | null;
 export declare let selectedTagSortOption: SortConfig;
 export declare function renderTagListPane(): HTMLElement;
 export declare function isTagPartOfCategory(categoryUUID: string): boolean;
 export declare function renderTags(tags: Array<ITag>, showOwnTagsOnly?: boolean): void;
-export declare function renderTagRow(tag: MpSdk.Tag.TagData, tagIconUrl: string): HTMLElement;
+export declare function renderTagRow(tag: MpSdk.Tag.TagData, tagIconUrl: string, tag_type?: string): HTMLElement;
 export declare function setTagLink(link: string): void;
 export declare function getTagLink(): void;
 export declare function addClickEventToTagRow(tag: MpSdk.Tag.TagData): void;
@@ -18,6 +20,9 @@ export declare function getSearchTagTerm(): string;
 export declare function searchTagList(tags: Array<ITag>): Array<ITag>;
 export declare function setSearchTagTerm(searchTagName: string): void;
 export declare function searchClearfield(): void;
+export declare function filterIotTagList(tags: Array<ITag>): Array<ITag>;
+export declare function setTagPaneActive(value: boolean): void;
+export declare function setCurrentTagPaneMode(value: TAG_TYPE | null): void;
 export declare const sortTags: (items: ITag[], options: SortConfig) => ITag[];
 export declare function updateSelectedTagSortOption(sortOption: string): void;
 export declare function resetSelectedTagSortOption(): void;

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

@@ -7,24 +7,39 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { SPACE_EVENTS, sortTagOptions } from "../../../types";
+import { SPACE_EVENTS, sortTagOptions, TAG_TYPE } from "../../../types";
 import { batchAddEventListenerByClassName, toggleDisplayPane, batchAddEventListenerByDataAttribute } from "../../events";
 import { convertToCssRgb, getBundleVersion } from "../../../utils";
-import { gotoTag, disposeTag, dispatchSpaceEvent, _tags, getUserAssignedCategories, _mpConfig } from "../../../architwin";
+import { gotoTag, disposeTag, dispatchSpaceEvent, _tags, getUserAssignedCategories, _mpConfig, moveTag, getAtwinSdk } from "../../../architwin";
 import { initFormData, toggleDropdown } from "./tagFormPane";
 import { toggleModal, setModalAction } from "./modal";
+import { initIoTFormData, setIoTFormMode } from './tagIotFormPane';
 import { Notyf } from 'notyf';
 import { _tagCategories } from "../../../architwin";
 import i18n from './i18n';
 import log from 'loglevel';
-// import { e } from "mathjs";
-let notify = new Notyf({ position: { x: 'left', y: 'bottom' } });
+import { cancelMoveTag } from "../../../tag";
+const notify = new Notyf({
+    position: { x: 'left', y: 'bottom' },
+    types: [
+        {
+            type: 'info',
+            background: '#3b82f6',
+            message: 'white',
+            icon: false,
+            duration: 3000,
+        },
+    ],
+});
 let _tagLink;
 let isChevronEventAdded = false;
 let allSubcategories = [];
 let tagSearchTerm = '';
+let iotTags = [];
 export let selectedCategoryFilterId = undefined;
 export let selectedSubCategoryFilterId = undefined;
+export let isTagPaneActive = true;
+export let currentTagPaneMode = null;
 export let selectedTagSortOption = { by: 'label', order: 'asc' };
 export function renderTagListPane() {
     const element = document.createElement('div');
@@ -35,27 +50,27 @@ export function renderTagListPane() {
     element.setAttribute('data-cy', 'at-tag-list-pane');
     element.innerHTML = `
         <div class="at_panel_header">
-            <span>${i18n.t('Tags')}</span>
+            <span id="at-tag-list-title">${i18n.t('Tags')}</span>
         </div>
-        <div class="at_form_container at_h-min-65 at_tag_list_pane">
-<div class="at_tags_filter_section">
-    <input class="at_field_search_input" type="text" name="search_name" id="at-tag-name-search" data-cy="at-tag-name-search" placeholder=${i18n.t('Search...')}>
-    <span class="mdi mdi-close at_button_search_tag" id="at-clear-search-tag-name" style="display:none"></span>
-    <button class="at_search_button" id="at-search-tag-button">
-        <span class="mdi mdi-magnify"></span>
-    </button>
-    <div class="at_sort_btn_container">
-        <div id="at-tag-sort-icon" class="mdi mdi-filter mdi-24px at_icon_hover">
-            <span id="at-tag-sort-options-tooltip" class="at_custom_tooltip">
-                <p class="at_tag_sort_option at_sort_option_selected" data-sort="Ascending">${i18n.t('Ascending')}</p>
-                <p class="at_tag_sort_option" data-sort="Descending">${i18n.t('Descending')}</p>
-                <p class="at_tag_sort_option" data-sort="Newest">${i18n.t('Newest')}</p>
-                <p class="at_tag_sort_option" data-sort="Oldest">${i18n.t('Oldest')}</p>
-            </span>
-        </div>
-    </div>
-</div>
-            <div class="at_field at_flex_column" style="${_tagCategories ? '' : 'display: none;'}">
+        <div class="at_form_container at_tag_list_pane">
+            <div class="at_tags_filter_section">
+                <input class="at_field_search_input" type="text" name="search_name" id="at-tag-name-search" data-cy="at-tag-name-search" placeholder=${i18n.t('Search...')}>
+                <span class="mdi mdi-close at_button_search_tag" id="at-clear-search-tag-name" style="display:none"></span>
+                <button class="at_search_button" id="at-search-tag-button">
+                    <span class="mdi mdi-magnify"></span>
+                </button>
+                <div class="at_sort_btn_container">
+                    <div id="at-tag-sort-icon" class="mdi mdi-filter mdi-24px at_icon_hover">
+                        <span id="at-tag-sort-options-tooltip" class="at_custom_tooltip">
+                            <p class="at_tag_sort_option at_sort_option_selected" data-sort="Ascending">${i18n.t('Ascending')}</p>
+                            <p class="at_tag_sort_option" data-sort="Descending">${i18n.t('Descending')}</p>
+                            <p class="at_tag_sort_option" data-sort="Newest">${i18n.t('Newest')}</p>
+                            <p class="at_tag_sort_option" data-sort="Oldest">${i18n.t('Oldest')}</p>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="at_field at_flex_column" style="${_tagCategories ? '' : 'display: none;'}" id="at-custom-category-filter-dropdown-container">
                 <label for="">${i18n.t('Category')}</label>
                 <div id="at-custom-category-filter-dropdown" data-cy="at-custom-category-filter-dropdown">
                     <div id="at-category-filter-dropdown" class="at_dropdown at_flex at_flex_row at_space_between">    
@@ -69,7 +84,7 @@ export function renderTagListPane() {
                     </div>
                 </div>
             </div>
-            <div class="at_field at_flex_column" style="${_tagCategories ? '' : 'display: none;'}">
+            <div class="at_field at_flex_column" style="${_tagCategories ? '' : 'display: none;'}" id="at-custom-subcategory-filter-dropdown-container">
                 <label for="">${i18n.t('Subcategory')}</label>
                 <div id="at-custom-subcategory-filter-dropdown" data-cy="at-custom-subcategory-filter-dropdown">
                     <div id="at-subcategory-filter-dropdown" class="at_dropdown at_flex at_flex_row at_space_between">    
@@ -84,7 +99,7 @@ export function renderTagListPane() {
                 </div>
             </div>
         </div>
-        <div class="at_scrollable_container at_h-min-45">
+        <div class="at_scrollable_container at_h-min-45" id="at-tag-list-scrollable-container">
             <table id="at-tag-list-container">
             </table>
         </div>
@@ -128,6 +143,7 @@ export function isTagPartOfCategory(categoryUUID) {
 }
 export function renderTags(tags, showOwnTagsOnly = false) {
     console.log("renderTags", tags);
+    iotTags = tags;
     const tagContainer = document.getElementById('at-tag-list-container');
     // get value from mp config
     const isReadOnly = _mpConfig.restrictionConfig.isTagReadOnly;
@@ -142,14 +158,16 @@ export function renderTags(tags, showOwnTagsOnly = false) {
     }
     tagContainer.innerHTML = ``;
     tags.forEach(tag => {
+        console.log('@caroline render tag checking: ', tag);
         if (showOwnTagsOnly) {
             if (isTagPartOfCategory(tag.category_uuid)) {
-                const row = renderTagRow(tag.json_data, tag.tag_icon_url);
+                const row = renderTagRow(tag.json_data, tag.tag_icon_url, tag.tag_type);
                 tagContainer.appendChild(row);
             }
         }
         else {
-            const row = renderTagRow(tag.json_data, tag.tag_icon_url);
+            console.log('@caroline render tag checking 2: ', tag);
+            const row = renderTagRow(tag.json_data, tag.tag_icon_url, tag.tag_type);
             tagContainer.appendChild(row);
         }
     });
@@ -161,9 +179,17 @@ export function renderTags(tags, showOwnTagsOnly = false) {
         const tag = document.getElementById(event.target.id);
         if (tag) {
             const tagId = tag.getAttribute('tag-id');
+            const el = document.getElementById(`at-edit-tag-${tagId}`);
+            const targetPane = el.getAttribute('target-pane');
             if (tagId && tagId != null) {
-                initFormData(tagId);
-                // setTagCategoriesOption()
+                if (targetPane == 'at-tag-iot-form-pane') {
+                    setIoTFormMode("EDIT" /* FORM_MODE.EDIT */);
+                    initIoTFormData(tagId);
+                }
+                else {
+                    initFormData(tagId);
+                    // setTagCategoriesOption()
+                }
             }
         }
     }));
@@ -230,9 +256,11 @@ export function renderTags(tags, showOwnTagsOnly = false) {
     }));
     batchAddEventListenerByClassName('at_tag_row', (event) => __awaiter(this, void 0, void 0, function* () {
         console.log('Event', event);
-        //@ts-ignore
-        const tagRow = event.target.closest('.at_tag_row');
-        if (tagRow) {
+        const target = event.target;
+        const tagRow = target.closest('.at_tag_row');
+        const targetElementId = target.id;
+        const isTargetRelocateBtn = targetElementId.startsWith('at-relocate-tag') ? true : false;
+        if (tagRow && !isTargetRelocateBtn) {
             const tagId = tagRow.children[1].getAttribute('tag-id');
             if (tagId && tagId != null) {
                 yield gotoTag(tagId);
@@ -254,22 +282,69 @@ export function renderTags(tags, showOwnTagsOnly = false) {
             ]
         });
     }
+    batchAddEventListenerByClassName('at_locate_tag_btn ', (event) => __awaiter(this, void 0, void 0, function* () {
+        log.info("event: IoT Relocate", event);
+        const relocateTagBtn = event.target;
+        const tagId = relocateTagBtn.getAttribute('tag-id');
+        const index = _tags.findIndex(tag => tag.json_data.id == tagId);
+        _tags[index].uuid = _tags[index].id.toString();
+        // Move tag
+        moveTag(tagId, () => {
+            // save edited tag location
+            let payload = { tag: _tags[index] };
+            dispatchSpaceEvent(SPACE_EVENTS.IOT_TAG_SAVED, payload);
+            notify.success(i18n.t("SuccessUpdateTag"));
+            // remove lister right after clicking 'Escape'
+            document.removeEventListener('keydown', handleEscKey);
+        });
+        // notification info to inform the user clicking 'Escape' stops tag relocation
+        notify.open({ type: 'info', message: i18n.t('PressEscCancelRelocation') });
+        // Escape event listener
+        const handleEscKey = (event) => {
+            log.info("event: handleEscKey", event);
+            // remove lister right after clicking 'Escape'
+            document.removeEventListener('keydown', handleEscKey);
+            if (event.key === "Escape") {
+                cancelMoveTag();
+                const sdk = getAtwinSdk();
+                if (sdk !== null) {
+                    sdk.Tag.editPosition(_tags[index].json_data.id, {
+                        anchorPosition: _tags[index].json_data.anchorPosition,
+                        stemVector: Object.assign({}, _tags[index].json_data.stemVector),
+                    });
+                }
+                notify.open({ type: 'info', message: i18n.t('MoveTagCancelled') });
+            }
+        };
+        // Attach it once
+        document.addEventListener('keydown', handleEscKey);
+    }));
     initDropdownEventListeners();
 }
-export function renderTagRow(tag, tagIconUrl) {
+export function renderTagRow(tag, tagIconUrl, tag_type = null) {
+    log.info('@caroline rendertagrow: ', tag);
     const element = document.createElement('tr');
     element.classList.add('at_tag_row'); //this class is not defined and I only use it as an identifier for attaching events
     element.setAttribute('id', `at-tag-row-${tag.id}`);
     element.setAttribute('data-toggle-pane', '');
+    log.info("tag_type", tag_type);
+    log.info("tagIconUrl", tagIconUrl);
     // element.setAttribute('tag-id',tag.json_data.id) 
     // get read only value from mpconfig
     const isTagReadOnly = _mpConfig.restrictionConfig.isTagReadOnly;
     console.log("_isTagReadOnly: ", isTagReadOnly);
     // Displays tag icon with tag color indicator 
     const thisTagIconURL = tagIconUrl === 'button.png' || tagIconUrl === '' || tagIconUrl === undefined ? "https://cdn.jsdelivr.net/npm/architwin@latest/static/images/button.png" : tagIconUrl;
+    let tagIconIndicatorBg = convertToCssRgb(tag.color);
+    let alert_iot_indicator = '';
+    if (tag_type === TAG_TYPE.IOT && tagIconUrl.includes('alert.png')) {
+        element.classList.add('at_bg_red_850');
+        tagIconIndicatorBg = 'hsl(337.56deg 85.62% 30%)';
+        alert_iot_indicator = 'at_border_red_800';
+    }
     element.innerHTML = `
         <td style="padding-top: 5px;">
-            <div class="at_colored-indicator" style="background-color:${convertToCssRgb(tag.color)}">
+            <div class="at_colored-indicator ${alert_iot_indicator}" style="background-color:${tagIconIndicatorBg}">
                 <div class="at_colored-indicator-img" style="background-image: url(${thisTagIconURL});"></div>
             </div>
         </td>
@@ -277,9 +352,10 @@ export function renderTagRow(tag, tagIconUrl) {
             <span>${tag.label}</span>
         </td>
         <td class="at_table_button_row">
-            <span class="mdi mdi-pencil at_edit_tag_btn ${isTagReadOnly ? 'at_disabled' : ''}" id="at-edit-tag-${tag.id}" data-cy="at-edit-tag-${tag.id}" tag-id="${tag.id}" target-pane="at-tag-form-pane"></span>
-            <span class="mdi mdi-content-copy at_copy_tag_btn ${isTagReadOnly ? 'at_disabled' : ''} id="at-edit-tag-${tag.id}""  id="at-copy-tag-${tag.id}" data-cy="at-copy-tag-${tag.id}" tag-id="${tag.id}"></span>
-            <span class="mdi mdi-message at_message_tag_btn" id="at-message-tag-${tag.id}" data-cy="at-message-tag-${tag.id}" tag-id="${tag.id}" target-pane="at-tag-messaging-pane"></span>
+            <span class="mdi mdi-pencil at_edit_tag_btn ${isTagReadOnly ? 'at_disabled' : ''}" id="at-edit-tag-${tag.id}" data-cy="at-edit-tag-${tag.id}" tag-id="${tag.id}" target-pane=${tag_type === TAG_TYPE.IOT ? "at-tag-iot-form-pane" : "at-tag-form-pane"}></span>
+            <span class="mdi mdi-content-copy at_copy_tag_btn ${isTagReadOnly ? 'at_disabled' : ''} id="at-edit-tag-${tag.id}" id="at-copy-tag-${tag.id}" data-cy="at-copy-tag-${tag.id}" tag-id="${tag.id}"></span>
+            <span class="mdi mdi-message at_message_tag_btn ${tag_type === TAG_TYPE.IOT ? 'at_hidden' : ''}" id="at-message-tag-${tag.id}"  data-cy="at-message-tag-${tag.id}" tag-id="${tag.id}" target-pane="at-tag-messaging-pane"></span>
+            <span class="mdi mdi-map-marker at_locate_tag_btn ${tag_type === TAG_TYPE.IOT ? '' : 'at_hidden'}" id="at-relocate-tag-${tag.id}"  data-cy="at-relocate-tag-${tag.id}" tag-id="${tag.id}"></span>
             <span class="mdi mdi-trash-can-outline at_delete_tag_btn ${isTagReadOnly ? 'at_disabled' : ''}"  id="at-delete-tag-${tag.id}" data-cy="at-delete-tag-${tag.id}" tag-id="${tag.id}"></span>
         </td>
     `;
@@ -499,6 +575,18 @@ export function searchClearfield() {
         tagSearchTerm = '';
     }
 }
+export function filterIotTagList(tags) {
+    log.info("filterIotTagList", tags);
+    const iotTags = tags.filter((tag) => tag.tag_type === TAG_TYPE.IOT);
+    log.info("iotTags", iotTags);
+    return iotTags;
+}
+export function setTagPaneActive(value) {
+    isTagPaneActive = value;
+}
+export function setCurrentTagPaneMode(value) {
+    currentTagPaneMode = value;
+}
 export const sortTags = (items, options) => {
     if (!(items === null || items === void 0 ? void 0 : items.length))
         return [];

package/lib/atwinui/events.d.ts

@@ -19,6 +19,7 @@ declare function batchAddEventListenerByClassNames(classNames: Array<string>, ca
 declare function batchAddEventListenerById(ids: Array<string>, callback: EventListener): void;
 declare function setActiveToolbarItem(itemId: string): void;
 declare function toggleDisplayPane(targetId: string): Promise<void>;
+declare function renderTagPaneContent(): Promise<void>;
 declare function toggleActionBar(state: string): void;
 export declare function handleUserLeaveSessionClick(): void;
 declare function setupIndividualEventListeners(): void;
@@ -37,12 +38,13 @@ 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>;
+declare function handlePolygonVisibility(targetId: string): Promise<boolean>;
 declare function handleDeletePartition(targetId: string): void;
 /**
  * Handles the display logic for showing the custom minimap.
  */
 declare function handleShowCustomMinimap(): void;
-declare function handleWindowVisibility(visibilityBtn: HTMLElement): Promise<void>;
+declare function handleDisplayElements(id: string): void;
+declare function handleWindowVisibility(visibilityBtn: HTMLElement, updateStateDB: boolean, fromParentVisibilityState?: boolean): Promise<void>;
 declare function clearActivePane(): void;
-export { activeToolbarItem, activeActionItem, cancelModelPlacementPrompt, isCustomMapControlsVisible, pipeColor, batchAddEventListenerById, batchAddEventListenerByClassName, batchAddEventListenerByClassNames, batchAddEventListenerByDataAttribute, setActiveToolbarItem, toggleDisplayPane, toggleActionBar, setupIndividualEventListeners, setupSpaceEventSubscriptions, handleModelVisibility, handleDeleteModel, handleShowMinimap, handleScrollToView, handleRenderMeetingUI, handleShowCustomMinimap, handlePartitionVisibility, handlePolygonVisibility, handleDeletePartition, handleWindowVisibility, clearActivePane };
+export { activeToolbarItem, activeActionItem, cancelModelPlacementPrompt, isCustomMapControlsVisible, pipeColor, batchAddEventListenerById, batchAddEventListenerByClassName, batchAddEventListenerByClassNames, batchAddEventListenerByDataAttribute, setActiveToolbarItem, toggleDisplayPane, toggleActionBar, setupIndividualEventListeners, setupSpaceEventSubscriptions, handleModelVisibility, handleDeleteModel, handleShowMinimap, handleScrollToView, handleRenderMeetingUI, handleShowCustomMinimap, renderTagPaneContent, handlePartitionVisibility, handlePolygonVisibility, handleDeletePartition, handleDisplayElements, handleWindowVisibility, clearActivePane };