architwin 1.15.5 → 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/spacePartition/roomFormPane.d.ts

@@ -1,5 +1,7 @@
-import { FORM_MODE, PartitionNode, PolygonData, WallPolyData, IObjectData } from "../../../../types";
+import { FORM_MODE, PartitionNode, PolygonData, WallPolyData, IObjectData, WindowPolyData } from "../../../../types";
 export declare let isEditWindow: boolean;
+export declare let currentEditWindowIndex: number;
+export declare let currentWindow: WindowPolyData;
 export declare function renderRoomFormPane(): HTMLDivElement;
 /**
  * Toggles the state of the partition drawing functionality.
@@ -105,6 +107,7 @@ export declare function getCurrentPolygonData(): PolygonData;
  */
 export declare function setCurrentPartitionData(): Promise<void>;
 export declare function removeWindow(index?: number): void;
+export declare function toggleUndoRedoButtons(undo: boolean, redo: boolean): void;
 export declare function getCurrentPartitionData(): PartitionNode;
 export declare function getNewlyAddedPartition(): Array<PartitionNode>;
 export declare function getDeletedSavedPartitionArray(): Array<PartitionNode>;
@@ -121,3 +124,4 @@ export declare function setPreviousPartitionData(payload: PartitionNode): void;
 export declare function handlePartitionWallEditBtn(wallUuid: string): Promise<void>;
 export declare function getTempCurrentRoomEditData(): Array<PartitionNode>;
 export declare function setTempCurrentRoomEditData(roomEditData: Array<PartitionNode>): void;
+export declare function getCurrentWall(): WallPolyData;

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

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import i18n from '../i18n';
 import { SPACE_EVENTS } from "../../../../types";
 import { batchAddEventListenerByClassName } from "../../../events";
-import { startDraw, cancelDraw, disposeModel, _3DXObjects, getCurrentPolygon, dispatchSpaceEvent, enableVerticeControls, setCurrentPolygon, setMeshChildrenMaterialProperty, get3DXObjects, getChildrenOfModel, clearSelectedObject, renderPolygon, addUndoDrawActions, setWallBaseHeight, clearWallBaseHeight, setDrawingConfig, resetDrawingConfig, goToPosition, clearFloorBaseHeight, clearDrawActionHistory } from '../../../../architwin';
+import { startDraw, cancelDraw, disposeModel, _3DXObjects, getCurrentPolygon, dispatchSpaceEvent, enableVerticeControls, setCurrentPolygon, setMeshChildrenMaterialProperty, get3DXObjects, getChildrenOfModel, clearSelectedObject, renderPolygon, setWallBaseHeight, clearWallBaseHeight, setDrawingConfig, resetDrawingConfig, goToPosition, partitionHistory } from '../../../../architwin';
 import { generateUUID, extractUUID } from '../../../../utils';
 import { getCurrentEditRoomData } from './roomTreePane';
 import { toggleModal, setModalAction } from "../modal";
@@ -42,7 +42,8 @@ let floorMaterial = '';
 let inputWallMaterial;
 let wallMaterial = '';
 export let isEditWindow = false;
-let currentEditWindowIndex = null;
+export let currentEditWindowIndex = null;
+export let currentWindow = null;
 let tempCurrentEditRoom = null;
 export function renderRoomFormPane() {
     log.info("__@ renderRoomFormPane: ", roomFormMode);
@@ -211,10 +212,6 @@ export function toggleDrawPartitionButton() {
         const vertexList = document.getElementById('at-face-vertex-container');
         const partitionNameInput = document.getElementById('at-edit-partition-name-input');
         partitionNameInput.value = '';
-        const undoBtn = document.getElementById('at-draw-undo-btn');
-        const redoBtn = document.getElementById('at-draw-redo-btn');
-        undoBtn.classList.add('at_disabled');
-        redoBtn.classList.add('at_disabled');
         const formMode = getPartitionFormMode();
         if (formMode == "ADD" /* FORM_MODE.ADD */) {
             tempCurrentPolygon = getCurrentPolygon();
@@ -231,6 +228,7 @@ export function toggleDrawPartitionButton() {
         isEditPartition = false;
         previousPartitionData = null;
     }
+    // toggleUndoRedoButtons(false, false)
 }
 export function toggleDrawWindowButton() {
     var _a, _b;
@@ -251,7 +249,6 @@ export function toggleDrawWindowButton() {
         }
         const objectIndex = _3DXObjects.findIndex(obj => obj.object.id == currentObject.object.id);
         log.info("objectIndex", objectIndex);
-        clearFloorBaseHeight();
         drawingConfig = {
             lineTypeComponentConfig: {
                 renderPolygonOnAdd: false,
@@ -302,6 +299,7 @@ export function toggleDrawWindowButton() {
             }
         }
     }
+    // toggleUndoRedoButtons(false, false)
 }
 /**
  * Displays the partition form based on the current form mode.
@@ -339,12 +337,12 @@ function populatePartitionForm(partition) {
     const memo = document.getElementById('at-room-memo-input');
     if (partition.polygon_json != null) {
         memo.value = JSON.parse(partition.polygon_json).memo;
+        floorLevel.value = JSON.parse(partition.polygon_json).floor_level;
     }
     // Display Partitions
     currentPartitionDataArray = partition.children;
     savedPartitionDataArray = partition.children;
     if (currentPartitionDataArray.length !== 0) {
-        floorLevel.value = JSON.parse(partition.children[0].polygon_json).floor.floor_level;
         wallheight.value = JSON.parse(partition.children[0].polygon_json).walls[0].wall_height;
         displayPartitions(currentPartitionDataArray);
     }
@@ -699,14 +697,6 @@ function displayFaces(polygon) {
             console.log("renderPolygon:", payload, getCurrentPolygon());
             // Re-render polygon    
             renderPolygon(payload);
-            const undoPaylaod = {
-                action: "deleteWall",
-                wallId: wallId,
-                payload: payload
-            };
-            addUndoDrawActions(undoPaylaod);
-            const redoBtn = document.getElementById('at-draw-redo-btn');
-            redoBtn.classList.add('at_disabled');
             toggleModal(false);
             notify.success(`${i18n.t('SuccessWallDelete')}`);
         }));
@@ -929,6 +919,7 @@ function setupEditWindow(element, window) {
     const confirmBtn = element.querySelector(`#at-confirm-edit-window-${window.index}`);
     if (!editBtn || !editNameContainer || !inputName || !nameLabel || !editMaterialContainer || !inputMaterial)
         return;
+    currentWindow = window;
     // Show inputs when edit icon is clicked
     editBtn.addEventListener("click", () => {
         if (isDrawing) {
@@ -965,6 +956,17 @@ function setupEditWindow(element, window) {
         };
         enableVerticeControls(windowComponent);
         isDrawing = true;
+        let data;
+        if (currentPartitionData) {
+            data = {
+                polygon: {
+                    uuid: currentPartitionData.uuid,
+                    polygon_json: currentPolygonData
+                },
+                verticePath: window.path,
+            };
+        }
+        // partitionHistory.setCurrent(data)
     });
     // // Confirm edit name and material
     confirmBtn.addEventListener("click", () => {
@@ -998,6 +1000,8 @@ function setupEditWindow(element, window) {
         saveWallChanges();
         isDrawing = false;
         isEditWindow = false;
+        partitionHistory.clearHistory();
+        // toggleUndoRedoButtons(false, false)
     });
 }
 function saveWallChanges() {
@@ -1365,17 +1369,17 @@ export function getPartitionFormData() {
     const name = ((_a = document.getElementById('at-room-name-input')) === null || _a === void 0 ? void 0 : _a.value) || null;
     const wallheight = ((_b = document.getElementById('at-room-wall-height-input')) === null || _b === void 0 ? void 0 : _b.value) || null;
     const floorLevel = ((_c = document.getElementById('at-room-floor-level-input')) === null || _c === void 0 ? void 0 : _c.value) || null;
-    let memo = ((_d = document.getElementById('at-room-memo-input')) === null || _d === void 0 ? void 0 : _d.value) || null;
+    const memo = ((_d = document.getElementById('at-room-memo-input')) === null || _d === void 0 ? void 0 : _d.value) || null;
     const currentUrl = window.location.href;
     const spaceUUID = extractUUID(currentUrl);
     let payload = {
         space_uuid: spaceUUID,
         name: name,
         parent_uuid: null,
-        polygon_json: JSON.stringify({ memo: memo }),
+        polygon_json: JSON.stringify({ memo: memo, floor_level: Number(floorLevel) }),
         children: currentPartitionDataArray,
     };
-    if (!memo) {
+    if (!memo && !floorLevel) {
         payload.polygon_json = null;
     }
     currentPartitionDataArray.forEach(partition => {
@@ -1391,7 +1395,7 @@ export function getPartitionFormData() {
         currentEditRoomData.children = currentPartitionDataArray;
         payload = currentEditRoomData;
         payload.name = name;
-        payload.polygon_json = JSON.stringify({ memo: memo });
+        payload.polygon_json = JSON.stringify({ memo: memo, floor_level: Number(floorLevel) });
     }
     return payload;
 }
@@ -1655,6 +1659,25 @@ export function removeWindow(index = -1) {
     faceVertexContainer.innerHTML = '';
     faceVertexContainer.append(displayWall(currentWall));
 }
+export function toggleUndoRedoButtons(undo, redo) {
+    console.log("toggleUndoRedoButtons", undo, redo);
+    if (!undo) {
+        const undoBtn = document.getElementById('at-draw-undo-btn');
+        undoBtn.classList.add('at_disabled');
+    }
+    else {
+        const undoBtn = document.getElementById('at-draw-undo-btn');
+        undoBtn.classList.remove('at_disabled');
+    }
+    if (!redo) {
+        const redoBtn = document.getElementById('at-draw-redo-btn');
+        redoBtn.classList.add('at_disabled');
+    }
+    else {
+        const redoBtn = document.getElementById('at-draw-redo-btn');
+        redoBtn.classList.remove('at_disabled');
+    }
+}
 function setFloorMaterial(material) {
     console.log('setFloorMaterial()', material);
     floorMaterial = material;
@@ -1785,7 +1808,6 @@ export function handlePartitionWallEditBtn(wallUuid) {
         currentPolygonData = JSON.parse(currentPartitionData.polygon_json);
         setDrawingMode(false);
         cancelDrawing();
-        clearDrawActionHistory();
     });
 }
 export function getTempCurrentRoomEditData() {
@@ -1794,3 +1816,6 @@ export function getTempCurrentRoomEditData() {
 export function setTempCurrentRoomEditData(roomEditData) {
     tempCurrentEditRoom = roomEditData;
 }
+export function getCurrentWall() {
+    return currentWall;
+}

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 };