architwin 1.15.6 → 1.16.0

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

@@ -270,6 +270,8 @@ i18n
                 "SuccessWindowDelete": "Succesfully deleted window",
                 "EnterFloorMaterial": "Enter floor material",
                 "EnterWallMaterial": "Enter wall material",
+                "ShowAll": "Show All",
+                "HideAll": "Hide All",
                 "PressEscCancelRelocation": "Press Esc key to cancel relocation.",
                 "MoveTagCancelled": "Move Tag Cancelled",
                 "Window": "Window",
@@ -539,6 +541,8 @@ i18n
                 "SuccessWindowDelete": "建具の削除が完了しました",
                 "EnterFloorMaterial": "仕上げ（床）を入力",
                 "EnterWallMaterial": "仕上げ（壁）を入力",
+                "ShowAll": "全て表示",
+                "HideAll": "全て非表示",
                 "MoveTagCancelled": "タグの移動がキャンセルされました",
                 "PressEscCancelRelocation": "再配置をキャンセルするには、Esc キーを押します。",
                 "Window": "建具",

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

@@ -1,5 +1,6 @@
 import { ITag, ITagCategory, SortConfig, TAG_TYPE } from "../../../types";
 import { MpSdk } from "../../../../bundle/sdk";
+export declare const tagVisibility: Record<TAG_TYPE, Record<string, boolean>>;
 export declare let selectedCategoryFilterId: any;
 export declare let selectedSubCategoryFilterId: any;
 export declare let isTagPaneActive: boolean;
@@ -26,3 +27,7 @@ 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;
+export declare function saveTagVisibilityToStorage(tagVisibility: Record<TAG_TYPE, Record<string, boolean>>): void;
+export declare function initializeTagVisibility(): void;
+export declare function updateShowAllButton(): void;
+export declare function clearTagVisibilityStorage(): void;

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

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 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, moveTag, getAtwinSdk } from "../../../architwin";
+import { gotoTag, disposeTag, dispatchSpaceEvent, _tags, getUserAssignedCategories, _mpConfig, moveTag, getAtwinSdk, toggleVisibilityTag } from "../../../architwin";
 import { initFormData, toggleDropdown } from "./tagFormPane";
 import { toggleModal, setModalAction } from "./modal";
 import { initIoTFormData, setIoTFormMode } from './tagIotFormPane';
@@ -35,6 +35,10 @@ let _tagLink;
 let isChevronEventAdded = false;
 let allSubcategories = [];
 let tagSearchTerm = '';
+export const tagVisibility = {
+    [TAG_TYPE.MP]: {},
+    [TAG_TYPE.IOT]: {}
+};
 let iotTags = [];
 export let selectedCategoryFilterId = undefined;
 export let selectedSubCategoryFilterId = undefined;
@@ -44,7 +48,7 @@ export let selectedTagSortOption = { by: 'label', order: 'asc' };
 export function renderTagListPane() {
     const element = document.createElement('div');
     element.classList.add('at_container');
-    element.classList.add('at_w-12');
+    element.classList.add('at_w-13');
     element.classList.add('at_h-full');
     element.setAttribute('id', 'at-tag-list-pane');
     element.setAttribute('data-cy', 'at-tag-list-pane');
@@ -52,25 +56,40 @@ export function renderTagListPane() {
         <div class="at_panel_header">
             <span id="at-tag-list-title">${i18n.t('Tags')}</span>
         </div>
-        <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">
+        <div class="at_form_container at_h-min-65 at_tag_list_pane">
+            <div class="at_button_row at_justify_end ${_mpConfig.restrictionConfig.isTagReadOnly ? 'at_disabled' : ''}">
+                <div class="at_button at_ghost">
+                    <span class="mdi mdi-sort at_icon_hover" id="at-tag-sort-icon"  data-cy="at-tag-sort-btn" >
                         <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>
+                    </span>
+                </div>
+                <div class="at_button at_ghost" id="at-visibility-tag-btn" data-cy="at-visibility-tag-btn" >
+                    <span class="mdi mdi-eye at_icon_hover" id="at-visibility-tag-btn">
+                        <span class="at_custom_tooltip">
+                            <p class="at_tag_sort_option">${i18n.t('HideAll')}</p>
+                        </span>
+                    </span>
                 </div>
+                <div class="at_button at_ghost" id="at-add-tag-btn" data-cy="at-add-tag-btn" target-pane="at-tag-form-pane">
+                    ${i18n.t('AddTag')}
+                    <span class="mdi mdi-plus-circle-outline" id="at-add-tag-btn"></span>
+                </div>
+            </div>
+
+            <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>
-            <div class="at_field at_flex_column" style="${_tagCategories ? '' : 'display: none;'}" id="at-custom-category-filter-dropdown-container">
+            <div class="at_field at_flex_column" style="${_tagCategories ? '' : 'display: none;'}">
                 <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">    
@@ -99,16 +118,11 @@ export function renderTagListPane() {
                 </div>
             </div>
         </div>
-        <div class="at_scrollable_container at_h-min-45" id="at-tag-list-scrollable-container">
+        <div class="at_form_container at_scrollable_container at_h-min-45" id="at-tag-list-scrollable-container">
             <table id="at-tag-list-container">
             </table>
         </div>
-        <div class="at_button_row at_justify_end ${_mpConfig.restrictionConfig.isTagReadOnly ? 'at_disabled' : ''}">
-            <div class="at_button at_ghost" id="at-add-tag-btn" data-cy="at-add-tag-btn" target-pane="at-tag-form-pane">
-                ${i18n.t('AddTag')}
-                <span class="mdi mdi-plus-circle-outline" id="at-add-tag-btn"></span>
-            </div>
-        </div>
+
         <div class="at_flex at_justify_center at_price" id="at-bundle-version" data-cy="at-bundle-version">
             <small class="at_text_xxs at_text_white at_opacity_5">${getBundleVersion()}</small>
         </div>
@@ -156,6 +170,9 @@ export function renderTags(tags, showOwnTagsOnly = false) {
         tagContainer.innerHTML = ``;
         return;
     }
+    const disabled = _mpConfig.restrictionConfig.isIoTtagReadonly;
+    const addTagButton = document.getElementById('at-add-tag-btn');
+    const visibilityTagButton = document.getElementById('at-visibility-tag-btn');
     tagContainer.innerHTML = ``;
     tags.forEach(tag => {
         console.log('@caroline render tag checking: ', tag);
@@ -163,12 +180,16 @@ export function renderTags(tags, showOwnTagsOnly = false) {
             if (isTagPartOfCategory(tag.category_uuid)) {
                 const row = renderTagRow(tag.json_data, tag.tag_icon_url, tag.tag_type);
                 tagContainer.appendChild(row);
+                addTagButton.classList.remove('at_disabled');
+                visibilityTagButton.classList.remove('at_disabled');
             }
         }
         else {
             console.log('@caroline render tag checking 2: ', tag);
             const row = renderTagRow(tag.json_data, tag.tag_icon_url, tag.tag_type);
             tagContainer.appendChild(row);
+            addTagButton.classList.toggle('at_disabled', disabled);
+            visibilityTagButton.classList.toggle('at_disabled', disabled);
         }
     });
     batchAddEventListenerByClassName('at_edit_tag_btn', (event) => __awaiter(this, void 0, void 0, function* () {
@@ -267,6 +288,28 @@ export function renderTags(tags, showOwnTagsOnly = false) {
             }
         }
     }));
+    // Toggle individual tag visibility
+    batchAddEventListenerByClassName('at_visibility_tag_btn', (event) => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        const btn = event.target;
+        const tagId = btn.getAttribute('tag-id');
+        if (!tagId)
+            return;
+        // Find the tag to determine its type
+        const tag = _tags.find(t => t.json_data.id == tagId);
+        if (!tag)
+            return;
+        const tagType = tag.tag_type || TAG_TYPE.MP;
+        const current = (_a = tagVisibility[tagType][tagId]) !== null && _a !== void 0 ? _a : true;
+        const newState = !current;
+        tagVisibility[tagType][tagId] = newState;
+        yield toggleVisibilityTag({ tagId, visibility: newState });
+        btn.classList.remove(newState ? "mdi-eye-off-outline" : "mdi-eye");
+        btn.classList.add(newState ? "mdi-eye" : "mdi-eye-off-outline");
+        // update main toggle button, not event
+        updateShowAllButton();
+        saveTagVisibilityToStorage(tagVisibility);
+    }));
     if (Number(window.innerWidth) <= 540) {
         batchAddEventListenerByDataAttribute('toggle-pane', (event) => __awaiter(this, void 0, void 0, function* () {
             toggleDisplayPane('at-cancel-tag-form-btn');
@@ -275,6 +318,7 @@ export function renderTags(tags, showOwnTagsOnly = false) {
                 activeElement.classList.remove('at_sidebar_button_icon_active');
         }), {
             ignoreSelectors: [
+                'at_visibility_tag_btn',
                 '.at_edit_tag_btn',
                 '.at_copy_tag_btn',
                 '.at_delete_tag_btn',
@@ -320,6 +364,16 @@ export function renderTags(tags, showOwnTagsOnly = false) {
         document.addEventListener('keydown', handleEscKey);
     }));
     initDropdownEventListeners();
+    Object.entries(tagVisibility).forEach(([tagType, visibilityMap]) => {
+        Object.entries(visibilityMap).forEach(([tagId, visible]) => {
+            console.log(tagType, tagId, visible);
+            const toggleBtn = document.getElementById(`at-visibility-tag-${tagId}`);
+            if (toggleBtn) {
+                toggleBtn.classList.remove(visible ? "mdi-eye-off-outline" : "mdi-eye");
+                toggleBtn.classList.add(visible ? "mdi-eye" : "mdi-eye-off-outline");
+            }
+        });
+    });
 }
 export function renderTagRow(tag, tagIconUrl, tag_type = null) {
     log.info('@caroline rendertagrow: ', tag);
@@ -332,7 +386,11 @@ export function renderTagRow(tag, tagIconUrl, tag_type = null) {
     // element.setAttribute('tag-id',tag.json_data.id) 
     // get read only value from mpconfig
     const isTagReadOnly = _mpConfig.restrictionConfig.isTagReadOnly;
+    const isIotTagReadOnly = _mpConfig.restrictionConfig.isIoTtagReadonly;
+    const isIoT = tag_type === TAG_TYPE.IOT;
+    const isGenerallyDisabled = isTagReadOnly || (isIoT && isIotTagReadOnly);
     console.log("_isTagReadOnly: ", isTagReadOnly);
+    console.log("@___isIotTagReadOnly: ", isIotTagReadOnly);
     // 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);
@@ -353,12 +411,15 @@ export function renderTagRow(tag, tagIconUrl, tag_type = null) {
                 <span title="${tag.label.length > 12 ? tag.label : ''}">${tag.label}</span>
             </div>
         </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=${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>
+            <div class="at_table_button_row">
+                <span class="mdi mdi-eye at_visibility_tag_btn ${isGenerallyDisabled ? 'at_disabled' : ''}" id="at-visibility-tag-${tag.id}" data-cy="at-visibility-tag-${tag.id}" tag-id="${tag.id}" tag-id="${tag.id}"></span>
+                <span class="mdi mdi-pencil at_edit_tag_btn ${isGenerallyDisabled ? '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 ${isIoT ? '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 ${!isIoT ? 'at_hidden' : ''} ${isIotTagReadOnly ? 'at_disabled' : ''}" 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 ${isGenerallyDisabled ? 'at_disabled' : ''}"  id="at-delete-tag-${tag.id}" data-cy="at-delete-tag-${tag.id}" tag-id="${tag.id}"></span>
+            </div>
         </td>
     `;
     return element;
@@ -379,6 +440,7 @@ export function addClickEventToTagRow(tag) {
     const editTagBtn = document.getElementById(`at-edit-tag-${tag.id}`);
     const copyTagBtn = document.getElementById(`at-copy-tag-${tag.id}`);
     const deleteTagBtn = document.getElementById(`at-delete-tag-${tag.id}`);
+    const visibilityTagBtn = document.getElementById(`at-visibility-tag-${tag.id}`);
     if (editTagBtn) {
         editTagBtn.addEventListener('click', (event) => __awaiter(this, void 0, void 0, function* () {
             console.log('Event', event);
@@ -424,6 +486,11 @@ export function addClickEventToTagRow(tag) {
             }
         }));
     }
+    if (visibilityTagBtn) {
+        visibilityTagBtn.addEventListener('click', (event) => __awaiter(this, void 0, void 0, function* () {
+            console.log("CLICK ==>");
+        }));
+    }
 }
 // Original Implementation
 // export function filterTagList(tags:Array<ITag>):Array<ITag>{
@@ -653,3 +720,108 @@ export function resetSelectedTagSortOption() {
         }
     }
 }
+// create local storage functions to save tag visibility states
+export function saveTagVisibilityToStorage(tagVisibility) {
+    try {
+        localStorage.setItem('tagVisibility', JSON.stringify(tagVisibility));
+        log.info('Saved tag visibility:', tagVisibility);
+    }
+    catch (error) {
+        log.error('Failed to save tag visibility to localStorage:', error);
+    }
+}
+// load tag visibility states from local storage
+function loadTagVisibilityFromStorage() {
+    var _a, _b;
+    try {
+        const parsed = JSON.parse(localStorage.getItem('tagVisibility') || '{}');
+        return {
+            [TAG_TYPE.MP]: (_a = parsed[TAG_TYPE.MP]) !== null && _a !== void 0 ? _a : {},
+            [TAG_TYPE.IOT]: (_b = parsed[TAG_TYPE.IOT]) !== null && _b !== void 0 ? _b : {}
+        };
+    }
+    catch (error) {
+        log.error('Failed to load tag visibility from localStorage:', error);
+        return { [TAG_TYPE.MP]: {}, [TAG_TYPE.IOT]: {} };
+    }
+}
+// initialize tag visibility states on app load
+export function initializeTagVisibility() {
+    var _a;
+    const savedVisibility = loadTagVisibilityFromStorage();
+    for (const tag of _tags) {
+        const tagId = tag.json_data.id;
+        const tagType = tag.tag_type || TAG_TYPE.MP;
+        // Initialize type object if it doesn't exist
+        if (!tagVisibility[tagType]) {
+            tagVisibility[tagType] = {};
+        }
+        // Use saved state if it exists, otherwise default to true
+        tagVisibility[tagType][tagId] = ((_a = savedVisibility[tagType]) === null || _a === void 0 ? void 0 : _a.hasOwnProperty(tagId))
+            ? savedVisibility[tagType][tagId]
+            : true;
+    }
+    setTagVisibilityStates();
+}
+// apply visibility states to tags
+function setTagVisibilityStates() {
+    return __awaiter(this, void 0, void 0, function* () {
+        for (const tag of _tags) {
+            const tagId = tag.json_data.id;
+            const tagType = tag.tag_type || TAG_TYPE.MP;
+            const isVisible = tagVisibility[tagType][tagId];
+            yield toggleVisibilityTag({ tagId: tagId, visibility: isVisible });
+            const btn = document.getElementById(`at-visibility-tag-${tagId}`);
+            if (btn) {
+                btn.classList.toggle("mdi-eye", isVisible);
+                btn.classList.toggle("mdi-eye-off-outline", !isVisible);
+            }
+        }
+        updateShowAllButton();
+    });
+}
+// update the main show/hide all button based on current tag visibility states
+export function updateShowAllButton() {
+    const toggleVisibilityBtn = document.getElementById('at-visibility-tag-btn');
+    if (!toggleVisibilityBtn)
+        return;
+    // Check visibility based on current tag pane mode
+    let allHidden = false;
+    if (currentTagPaneMode === TAG_TYPE.IOT) {
+        // Check only IOT tags
+        allHidden = Object.values(tagVisibility[TAG_TYPE.IOT]).every(v => v === false);
+    }
+    else if (currentTagPaneMode === TAG_TYPE.MP) {
+        // Check only MP tags
+        allHidden = Object.values(tagVisibility[TAG_TYPE.MP]).every(v => v === false);
+    }
+    else {
+        // Check all tags when no specific mode is set
+        const allValues = [
+            ...Object.values(tagVisibility[TAG_TYPE.MP]),
+            ...Object.values(tagVisibility[TAG_TYPE.IOT])
+        ];
+        allHidden = allValues.length > 0 && allValues.every(v => v === false);
+    }
+    toggleVisibilityBtn.innerHTML = allHidden
+        ? `<span class="mdi mdi-eye-off-outline at_icon_hover">
+        <span class="at_custom_tooltip">
+            <p class="at_tag_sort_option">${i18n.t('ShowAll')}</p>
+        </span>
+        </span>`
+        : `<span class="mdi mdi-eye at_icon_hover">
+        <span class="at_custom_tooltip">
+            <p class="at_tag_sort_option">${i18n.t('HideAll')}</p>
+        </span>
+        </span>`;
+}
+// clear tag visibility states from local storage
+export function clearTagVisibilityStorage() {
+    if (localStorage.getItem('tagVisibility')) {
+        localStorage.removeItem('tagVisibility');
+        log.info('Tag visibility storage cleared');
+    }
+    else {
+        log.info('No tag in storage found');
+    }
+}

package/lib/atwinui/events.d.ts

@@ -23,6 +23,7 @@ declare function renderTagPaneContent(): Promise<void>;
 declare function toggleActionBar(state: string): void;
 export declare function handleUserLeaveSessionClick(): void;
 declare function setupIndividualEventListeners(): void;
+declare function handleToggleVisibilityTags(): void;
 declare function handleModelVisibility(objId: string): Promise<void>;
 declare function handleDeleteModel(objId: string): Promise<void>;
 declare function handleShowMinimap(): void;
@@ -47,4 +48,4 @@ declare function handleShowCustomMinimap(): 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, renderTagPaneContent, handlePartitionVisibility, handlePolygonVisibility, handleDeletePartition, handleDisplayElements, 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, handleToggleVisibilityTags, handleDisplayElements, handleWindowVisibility, clearActivePane };

package/lib/atwinui/events.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { actionBar, renderObjectCards, renderLibraryCards, renderTags, renderTagRow, getTagFormData, addClickEventToTagRow, setActiveCard, setActiveMenu, removeObjectCard, clearActiveMenu, setTagCategoriesOption, toggleDropdown, tagFormMode, selectedTag, renderRecepientOptions, renderTagMessages, createTagMessage, setTagLink, setTagMessagingDetails, renderCategoryDropdownOptions, clearTagFormDropdown, clearActiveActionBtn, clearActiveCard, toggleActionBarButtons, selectedCategoryFilterId, selectedSubCategoryFilterId, filterTagList, toggleModal, setModalAction, } from "./components/toolbar";
-import { getTargetPosition, addMediaScreen, _3DXObjects, selectedObject, setTransformControls, copyObject, revertTransform, clearSelectedObject, removeTransformControls, getLibrary, getMpTags, renderTag, captureSpaceScreenshot, moveTag, subscribeSpaceEvent, setModelVisibility, disposeModel, disposeTag, _tags, _tagCategories, dispatchSpaceEvent, editTagLabel, editTagDescription, setTagMessageRecepients, setTagMessages, setSelectedTagUuid, renderMeetingSidebar, setTagIcon, setObjectTransformation, getSelectedObject, _atwin, isCdnMapDataAvailable, captureScreenshotAndCameraDetails, _mpConfig, cancelModelPlacement, _modelDetails, actionHistory, get3DXObjects, transformHistory, goToModel, themeManager, _partitionNodes, setSpacePartitionNodes, getSpaceId, setFloorBaseHeight, toggleWallVisibility, getChildrenOfModel, toggleFloorVisibility, renderPolygon, getCurrentPolygon, getFloorBaseHeight, setSelectedObject, redoDrawAction, undoDrawAction, setWallBaseHeight, clearWallBaseHeight, clearFloorBaseHeight, isToolbarFeatureEnabled, captureCurrentView, getCurrentFloor, _spaceUsers, setPipeCategories, setPipes, detachTagMedia, getTagDataCollection, setVertexPath, _screenSharingHostUser, _tagIotCategoryTypes, getIoTDeviceTagIcons, toggleMeshChildrenVisibility, set3DXObjects, partitionHistory,
+import { getTargetPosition, addMediaScreen, _3DXObjects, selectedObject, setTransformControls, copyObject, revertTransform, clearSelectedObject, removeTransformControls, getLibrary, getMpTags, renderTag, captureSpaceScreenshot, moveTag, subscribeSpaceEvent, setModelVisibility, disposeModel, disposeTag, _tags, _tagCategories, dispatchSpaceEvent, editTagLabel, editTagDescription, setTagMessageRecepients, setTagMessages, setSelectedTagUuid, renderMeetingSidebar, setTagIcon, setObjectTransformation, getSelectedObject, _atwin, isCdnMapDataAvailable, captureScreenshotAndCameraDetails, _mpConfig, cancelModelPlacement, _modelDetails, actionHistory, get3DXObjects, transformHistory, goToModel, themeManager, _partitionNodes, setSpacePartitionNodes, getSpaceId, setFloorBaseHeight, toggleWallVisibility, getChildrenOfModel, toggleFloorVisibility, renderPolygon, getCurrentPolygon, getFloorBaseHeight, setSelectedObject, redoDrawAction, undoDrawAction, setWallBaseHeight, clearWallBaseHeight, clearFloorBaseHeight, isToolbarFeatureEnabled, captureCurrentView, getCurrentFloor, _spaceUsers, setPipeCategories, setPipes, detachTagMedia, getTagDataCollection, setVertexPath, _screenSharingHostUser, toggleVisibilityTag, _tagIotCategoryTypes, getIoTDeviceTagIcons, toggleMeshChildrenVisibility, set3DXObjects, partitionHistory,
 // polygonHistory
  } from "../architwin";
 import { Notyf } from 'notyf';
@@ -30,7 +30,7 @@ import { toggleDrawPartitionButton, displayPartitionFormMode, setPartitionFormMo
 import { actionSettingsSelectOption, getTempCoordinateSystem, getTempMeasurementUnit, getTempRotationUnit, setCoordinateSystem, setMeasurementUnit, setRotationUnit, initSettingsValues, setTempCoordinateSystem, setTempMeasurementUnit, setTempRotationUnit, toggleActionSettingsDropdown, toggleCalibrateBasepoint, setScaleFactor, getTempScaleFactor, setTempScaleFactor, setBasepoint, getTempBasepoint, setTempBasepoint, getBasepoint, toggleActionSettings, getBasepointObjectPayload, displayConvertedCoordinates, getCoordinateSystem, getScaleFactor, getMeasurementUnit, getRotationUnit, setBasepointObjectPayload } from "./components/toolbar/actionSettingsPane";
 import { getBasepointCalibrateBpCoordinateValues, getBasepointCalibrateMpCoordinateValues, initBsepointCalibratePane, toggleBasepointCalibratePane } from "./components/toolbar/basepointCalibratePane";
 import { toggleGeneralMapOptions, initGeneralSelectedMap, getSelectedMapOption } from './components/toolbar/generalSettingsMenuPane';
-import { searchTagList, setSearchTagTerm, searchClearfield, getSearchTagTerm, sortTags, updateSelectedTagSortOption, resetSelectedTagSortOption, filterIotTagList, setTagPaneActive, isTagPaneActive, setCurrentTagPaneMode, currentTagPaneMode, selectedTagSortOption } from './components/toolbar/tagListPane';
+import { searchTagList, setSearchTagTerm, searchClearfield, getSearchTagTerm, sortTags, updateSelectedTagSortOption, resetSelectedTagSortOption, filterIotTagList, setTagPaneActive, isTagPaneActive, setCurrentTagPaneMode, currentTagPaneMode, selectedTagSortOption, tagVisibility, updateShowAllButton, saveTagVisibilityToStorage, initializeTagVisibility } from './components/toolbar/tagListPane';
 import { renderUserRows } from "./components/toolbar/spaceUserListPane";
 import { handleRemoteViewResponsiveChanges, renderRemoteSpaceViewing } from "./components/toolbar/viewingRemoteSpace";
 import { PipeList } from "./components/toolbar/pipeListPane";
@@ -65,6 +65,7 @@ let isCustomMapControlsVisible = false;
 let _currentSandboxId = undefined;
 let isNotyfExecuted = false; // flag for notification
 let pipeColor = "";
+let allTagsVisible = true;
 function batchAddEventListenerByClassName(className, callback) {
     if (className) {
         const elements = document.querySelectorAll(`.${className}`);
@@ -373,6 +374,7 @@ function renderTagPaneContent() {
         }
         if (tags.length > 0) {
             searchTagList(tags);
+            updateShowAllButton();
         }
     });
 }
@@ -533,6 +535,7 @@ function setupIndividualEventListeners() {
     handlePipeForm();
     handlePipeList();
     handleResponsiveChanges();
+    handleToggleVisibilityTags();
     handlePreviewModalResize();
 }
 //================ OBJECT EVENT HANDLERS ===============//s
@@ -1227,6 +1230,65 @@ function handleSaveTag() {
         setTagFormMode("NONE" /* FORM_MODE.NONE */);
     }));
 }
+// Toggle all tags visibility
+function handleToggleVisibilityTags() {
+    const toggleVisibilityBtn = document.getElementById('at-visibility-tag-btn');
+    if (!toggleVisibilityBtn)
+        return;
+    // Initialize tag visibility on load
+    initializeTagVisibility();
+    const updateAll = (visible) => __awaiter(this, void 0, void 0, function* () {
+        // Determine which tags to update based on current mode
+        const tagsToUpdate = currentTagPaneMode
+            ? _tags.filter(tag => tag.tag_type === currentTagPaneMode)
+            : _tags;
+        for (const tag of tagsToUpdate) {
+            const tagType = tag.tag_type || TAG_TYPE.MP;
+            const tagId = tag.json_data.id;
+            // Initialize type object if it doesn't exist
+            if (!tagVisibility[tagType]) {
+                tagVisibility[tagType] = {};
+            }
+            // Update visibility state
+            tagVisibility[tagType][tagId] = visible;
+            yield toggleVisibilityTag({ tagId: tagId, visibility: visible });
+            // Update button icon
+            const btn = document.getElementById(`at-visibility-tag-${tagId}`);
+            if (btn) {
+                btn.classList.toggle("mdi-eye", visible);
+                btn.classList.toggle("mdi-eye-off-outline", !visible);
+            }
+        }
+        // Update the main toggle button
+        updateShowAllButton();
+        // Save to localStorage
+        saveTagVisibilityToStorage(tagVisibility);
+    });
+    toggleVisibilityBtn.addEventListener('click', () => {
+        // Check if all visible tags in current mode are hidden
+        let allHidden = false;
+        if (currentTagPaneMode === TAG_TYPE.IOT) {
+            // Check only IOT tags
+            const iotVisibility = Object.values(tagVisibility[TAG_TYPE.IOT] || {});
+            allHidden = iotVisibility.length > 0 && iotVisibility.every(v => v === false);
+        }
+        else if (currentTagPaneMode === TAG_TYPE.MP) {
+            // Check only MP tags
+            const mpVisibility = Object.values(tagVisibility[TAG_TYPE.MP] || {});
+            allHidden = mpVisibility.length > 0 && mpVisibility.every(v => v === false);
+        }
+        else {
+            // Check all tags (both MP and IOT)
+            const allValues = [
+                ...Object.values(tagVisibility[TAG_TYPE.MP] || {}),
+                ...Object.values(tagVisibility[TAG_TYPE.IOT] || {})
+            ];
+            allHidden = allValues.length > 0 && allValues.every(v => v === false);
+        }
+        // Toggle: if all hidden, show all; if any visible, hide all
+        updateAll(allHidden);
+    });
+}
 function handleScreenshot() {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const screenshotBtn = document.getElementById('at-screenshot-btn');
@@ -3981,4 +4043,4 @@ activeToolbarItem, activeActionItem, cancelModelPlacementPrompt, isCustomMapCont
 //methods
 batchAddEventListenerById, batchAddEventListenerByClassName, batchAddEventListenerByClassNames, batchAddEventListenerByDataAttribute, setActiveToolbarItem, toggleDisplayPane, toggleActionBar, setupIndividualEventListeners, setupSpaceEventSubscriptions, handleModelVisibility, handleDeleteModel, handleShowMinimap, handleScrollToView, handleRenderMeetingUI, handleShowCustomMinimap, renderTagPaneContent, 
 // partition
-handlePartitionVisibility, handlePolygonVisibility, handleDeletePartition, handleDisplayElements, handleWindowVisibility, clearActivePane };
+handlePartitionVisibility, handlePolygonVisibility, handleDeletePartition, handleToggleVisibilityTags, handleDisplayElements, handleWindowVisibility, clearActivePane };

package/lib/tag.d.ts

@@ -95,4 +95,9 @@ declare function attachSandbox(payload: {
     sandboxId: string;
     messenger: MpSdk.Tag.IMessenger;
 }>;
-export { renderTag, disposeTag, moveTag, attachTagMedia, detachTagMedia, setTagIcon, editBillboard, editStem, editColor, saveTagDb, deleteTag, getTagColorCodeID, getEmbedlyData, cancelMoveTag, handleTagPlacerCreated, attachSandbox, registerSandbox };
+declare function toggleTagVisibility(payload: {
+    tagId: string;
+    sdk: MpSdk;
+    visibility: boolean;
+}): void;
+export { renderTag, disposeTag, moveTag, attachTagMedia, detachTagMedia, setTagIcon, editBillboard, editStem, editColor, saveTagDb, deleteTag, getTagColorCodeID, getEmbedlyData, cancelMoveTag, handleTagPlacerCreated, attachSandbox, registerSandbox, toggleTagVisibility };

package/lib/tag.js

@@ -432,7 +432,14 @@ function attachSandbox(payload) {
         }
     });
 }
-export { renderTag, disposeTag, moveTag, attachTagMedia, detachTagMedia, setTagIcon, editBillboard, editStem, editColor, saveTagDb, deleteTag, getTagColorCodeID, getEmbedlyData, cancelMoveTag, handleTagPlacerCreated, attachSandbox, registerSandbox };
+function toggleTagVisibility(payload) {
+    payload.sdk.Tag.editOpacity(payload.tagId, payload.visibility ? 1 : 0);
+    payload.sdk.Tag.allowAction(payload.tagId, {
+        opening: payload.visibility,
+        navigating: true
+    });
+}
+export { renderTag, disposeTag, moveTag, attachTagMedia, detachTagMedia, setTagIcon, editBillboard, editStem, editColor, saveTagDb, deleteTag, getTagColorCodeID, getEmbedlyData, cancelMoveTag, handleTagPlacerCreated, attachSandbox, registerSandbox, toggleTagVisibility };
 // # -------------------------------------------------------------------------
 // # tag
 // # -------------------------------------------------------------------------

package/lib/types.d.ts

@@ -154,6 +154,7 @@ export interface IMPConfig {
     };
     restrictionConfig?: {
         isTagReadOnly?: boolean;
+        isIoTtagReadonly?: boolean;
         isTagToggleSharing?: boolean;
     };
     sweepPuckConfig?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "architwin",
-  "version": "1.15.6",
+  "version": "1.16.0",
   "description": "ArchiTwin Library for Matterport",
   "main": "./lib/architwin.js",
   "types": "./lib/architwin.d.ts",

package/static/atwinui.css

@@ -676,12 +676,19 @@
 
 .at_table_button_row {
     display: flex;
-    flex-wrap: nowrap;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: auto;
-    align-content: start;
-    margin-right: 0.5em;
+    justify-content: end;
+    width: fit-content;
+}
+
+.at_table_label_row{
+    width: 130px;
+}
+
+.at_table_label_row span {
+    display: block; 
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 /*Form Classes*/
@@ -769,8 +776,8 @@
     margin-top: 1px;
     margin-left: 4px;
     height: 2.45rem;
-    /* width: 9rem; */
-    width: 13rem
+    width: 100%;
+    /* width: 11.75rem */
 }
 
 .at_field_search_input:focus {
@@ -1690,7 +1697,7 @@
 .at_tag_list_pane {
     margin: 6px 6px 0px 6px !important;
     gap: 0px !important;
-    padding: 10px 10px 5px 10px !important;
+    padding: 0px 5px 5px 10px !important;
 }
 
 /* Basic styling for the tree */
@@ -2383,11 +2390,6 @@ dialog#at-screen-share-request-modal::backdrop {
     margin-top: 1px;
 }
 
-#at-tag-sort-icon {
-    background-color: var(--bg-secondary);
-    margin-bottom: 15px;
-    margin-right: -15px;
-}
 
 #at-object-sort-icon {
     background-color: var(--bg-secondary);