architwin 1.6.0 → 1.6.2

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

@@ -1,4 +1,5 @@
 import log from 'loglevel';
+import i18n from './i18n';
 export let activeActionBtn;
 export function renderActionBar() {
     const element = document.createElement('div');
@@ -8,27 +9,35 @@ export function renderActionBar() {
     element.innerHTML = `
         <div class="at_sidebar_action_button_icon" style="border-bottom: dotted white 1px;">
             <span class="mdi mdi-chevron-double-right" id="at-close-action-bar-btn" data-cy="at-close-action-bar-btn" target-pane="at-object-list-pane"></span>
+            <div class="at_icon_tooltip">${i18n.t('Close')}</div>
         </div>
         <div class="at_sidebar_action_button_icon">
-            <span class="mdi mdi-axis-arrow" id="at-translate-action-btn" data-cy="at-translate-action-bar-btn"></span>
+            <span class="mdi mdi-axis-arrow " id="at-translate-action-btn" data-cy="at-translate-action-bar-btn"></span>
+            <div class="at_icon_tooltip">${i18n.t('Translate')}</div>
         </div>
         <div class="at_sidebar_action_button_icon">      
             <span class="mdi mdi-rotate-orbit" id="at-rotate-action-btn" data-cy="at-rotate-action-bar-btn"></span>
+            <div class="at_icon_tooltip">${i18n.t('Rotate')}</div>
         </div>
         <div class="at_sidebar_action_button_icon">
             <span class="mdi mdi-arrow-expand-all" id="at-scale-action-btn" data-cy="at-scale-action-bar-btn"></span>
+            <div class="at_icon_tooltip">${i18n.t('Scale')}</div>
         </div>
         <div class="at_sidebar_action_button_icon">      
             <span class="mdi mdi-content-copy" id="at-copy-action-btn" data-cy="at-copy-action-bar-btn"></span>
+            <div class="at_icon_tooltip">${i18n.t('Copy')}</div>
         </div>
         <div class="at_sidebar_action_button_icon">      
             <span class="mdi mdi-undo-variant" id="at-undo-action-btn" data-cy="at-undo-action-bar-btn"></span>
+            <div class="at_icon_tooltip">${i18n.t('Undo')}</div>
         </div>
         <div class="at_sidebar_action_button_icon">      
             <span class="mdi mdi-redo-variant" id="at-redo-action-btn" data-cy="at-redo-action-bar-btn"></span>
+            <div class="at_icon_tooltip">${i18n.t('Redo')}</div>
         </div>
         <div class="at_sidebar_action_button_icon">      
             <span class="mdi mdi-cancel" id="at-cancel-action-btn" data-cy="at-cancel-action-bar-btn"></span>
+            <div class="at_icon_tooltip">${i18n.t('Cancel')}</div>
         </div>
     `;
     return element;

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

@@ -1,7 +1,8 @@
 import { IShowcaseObject } from "../../../types";
 import { I3DObject } from "../../../types";
-export declare function renderObjectCard(payload: IShowcaseObject): HTMLDivElement;
-export declare function renderObjectRow(payload: IShowcaseObject): HTMLDivElement;
+import { Scene } from "../../../../bundle/sdk";
+export declare function renderObjectCard(payload: IShowcaseObject, objectComponent?: Scene.IComponent): HTMLDivElement;
+export declare function renderObjectRow(payload: IShowcaseObject, objectComponent?: Scene.IComponent): HTMLDivElement;
 export declare function setActiveCard(cardId: string): Promise<void>;
 export declare function clearActiveCard(): void;
 export declare function renderLibraryCard(payload: I3DObject): HTMLDivElement;

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

@@ -14,7 +14,7 @@ import { Notyf } from 'notyf';
 import i18n from './i18n';
 let activeCard, activeLibraryCard;
 let _basePath = '../../../../architwin/static';
-export function renderObjectCard(payload) {
+export function renderObjectCard(payload, objectComponent) {
     if (!payload) {
         console.error("Cannot render card without object payload data");
         return;
@@ -39,6 +39,11 @@ export function renderObjectCard(payload) {
         }
         thumbnail = `${_basePath}/defaulthumbnail.png`;
     }
+    let isObjectVisible = false;
+    if (objectComponent) {
+        // @ts-ignore
+        isObjectVisible = objectComponent.mesh.visible;
+    }
     element.innerHTML = `
         <img class="at_image at_object_image" src="${thumbnail}" alt="Property Image" id="at-card-image-${payload.id}" data-cy="at-card-image-${payload.id}" card-id="${payload.id}">
         <div class="at_card-body" id="at-object-card-body-${payload.id}" card-id="${payload.id}">
@@ -56,7 +61,7 @@ export function renderObjectCard(payload) {
             </div>
             <div>            
                 <div class="at_button_icon" style="display:inline-block">
-                    <span class="mdi mdi-eye-off at_model_visibility_btn" id="at-visibility-model-${payload.id}-btn" data-cy="at-visibility-model-${payload.id}-btn" card-id="${payload.id}"></span>
+                    <span class="mdi ${isObjectVisible ? 'mdi-eye-off' : 'mdi-eye'}  at_model_visibility_btn" id="at-visibility-model-${payload.id}-btn" data-cy="at-visibility-model-${payload.id}-btn" card-id="${payload.id}"></span>
                 </div>
                 <div class="at_button_icon" style="display:inline-block">
                     <span class="mdi mdi-delete-outline at_model_delete_btn" id="at-delete-model-${payload.id}-btn" data-cy="at-delete-model-${payload.id}-btn" card-id="${payload.id}"></span>
@@ -66,7 +71,7 @@ export function renderObjectCard(payload) {
     `;
     return element;
 }
-export function renderObjectRow(payload) {
+export function renderObjectRow(payload, objectComponent) {
     if (!payload) {
         console.error("Cannot render card without object payload data");
         return;
@@ -79,6 +84,11 @@ export function renderObjectRow(payload) {
     element.setAttribute('id', `at-card-${payload.id}`);
     let object_data = {};
     object_data = payload.object_data;
+    let isObjectVisible = false;
+    if (objectComponent) {
+        // @ts-ignore
+        isObjectVisible = objectComponent.mesh.visible;
+    }
     element.innerHTML = `
         <div class="at_card-body" id="at-card-row-body-${payload.id}" card-id="${payload.id}">
             ${payload.object_data.name ?
@@ -95,7 +105,7 @@ export function renderObjectRow(payload) {
             </div>
             <div>            
                 <div class="at_button_icon" style="display:inline-block">
-                    <span class="mdi mdi-eye-off at_model_visibility_btn" id="at-visibility-model-${payload.id}-btn" data-cy="at-visibility-model-${payload.id}-btn" card-id="${payload.id}"></span>
+                    <span class="mdi ${isObjectVisible ? 'mdi-eye-off' : 'mdi-eye'} at_model_visibility_btn" id="at-visibility-model-${payload.id}-btn" data-cy="at-visibility-model-${payload.id}-btn" card-id="${payload.id}"></span>
                 </div>
                 <div class="at_button_icon" style="display:inline-block">
                     <span class="mdi mdi-delete-outline at_model_delete_btn" id="at-delete-model-${payload.id}-btn" data-cy="at-delete-model-${payload.id}-btn" card-id="${payload.id}"></span>

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

@@ -64,7 +64,20 @@ i18n
                 "PressEsc": "Press the Esc key or cancel button to cancel placement",
                 "DeleteObject": "Delete Object",
                 "ConfirmDeleteObject": "Are you sure you want to delete this object? This action cannot be reversed",
-                "FloorMapNotAvailable": "The floor image for this floor is currently unavailable"
+                "FloorMapNotAvailable": "The floor image for this floor is currently unavailable",
+                "Tag": "Tag",
+                "Object": "Object",
+                "Minimap": "Minimap",
+                "Meeting": "Meeting",
+                "Screenshot": "Screenshot",
+                "Close": "Close",
+                "Translate": "Translate",
+                "Rotate": "Rotate",
+                "Scale": "Scale",
+                "Copy": "Copy",
+                "Undo": "Undo",
+                "Redo": "Redo",
+                "Confirm": "Confirm"
             }
         },
         ja: {
@@ -123,7 +136,20 @@ i18n
                 "PressEsc": "キャンセルするにはESCキーもしくはキャンセルボタンを押してください",
                 "DeleteObject": "オブジェクト削除",
                 "ConfirmDeleteObject": "本当に削除してもよろしいですか？（この操作は取り消せません）",
-                "FloorMapNotAvailable": "このフロアのフロア画像は現在利用できません"
+                "FloorMapNotAvailable": "このフロアのフロア画像は現在利用できません",
+                "Tag": "タグ",
+                "Object": "オブジェクト",
+                "Minimap": "ミニマップ",
+                "Meeting": "打ち合わせ",
+                "Screenshot": "スクリーンショット",
+                "Close": "閉じる",
+                "Translate": "変形",
+                "Rotate": "回転",
+                "Scale": "拡大",
+                "Copy": "複写",
+                "Undo": "やり直し",
+                "Redo": "もう一度",
+                "Confirm": "確認する"
             }
         }
     },

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

@@ -1,5 +1,7 @@
 import { _mpConfig } from "../../../architwin";
 import log from 'loglevel';
+import i18n from "./i18n";
+import { toggleActionBar } from "../../events";
 export let activeMenu;
 export let isObjectListEnabled = true;
 export function renderMenuBar(iFrame) {
@@ -23,21 +25,27 @@ export function renderMenuBar(iFrame) {
     menuBarElement.innerHTML = `
     <div class="at_sidebar_button_icon">
         <span class="mdi mdi-bullseye" id="at-expand-btn" data-cy="at-expand-btn" target-pane="at-tag-list-pane"></span>
+        <div class="at_icon_tooltip">${i18n.t('Tag')}</div>
     </div>
     <div class="at_sidebar_button_icon" style="display:${isObjectListEnabled ? 'block' : 'none'}">
         <span class="mdi mdi-cube-outline" id="at-object-list-btn" data-cy="at-object-list-btn" target-pane="at-object-list-pane"></span>
+        <div class="at_icon_tooltip">${i18n.t('Object')}</div>
     </div>
     <div class="at_sidebar_button_icon">
         <span class="mdi mdi-map"  id="at-minimap-btn" data-cy="at-minimap-btn" target-pane="at-map"></span>
+        <div class="at_icon_tooltip">${i18n.t('Minimap')}</div>
     </div>
     <div class="at_sidebar_button_icon" style="display:${isMeetingEnabled ? 'block' : 'none'}">
         <span class="mdi mdi-message-video" id="at-videocall-btn" data-cy="at-videocall-btn" target-pane="at-video-call-pane"></span>
+        div class="at_icon_tooltip">${i18n.t('Meeting')}</div>
     </div>
     <div class="at_sidebar_button_icon">
         <span class="mdi mdi-monitor-screenshot" id="at-screenshot-btn" data-cy="at-screenshot-btn"></span>
+        <div class="at_icon_tooltip">${i18n.t('Screenshot')}</div>
     </div>
     <div class="at_sidebar_button_icon">
         <span class="mdi mdi-palette" id="at-theme-picker-btn" data-cy="at-theme-picker-btn" target-pane="at-theme-pane"></span>
+        <div class="at_icon_tooltip">${i18n.t('Theme')}</div>
     </div>
     `;
     return menuBarElement;
@@ -61,6 +69,8 @@ export function setActiveMenu(id) {
                 // remove
                 log.info("removing active...");
                 parent.classList.remove('at_sidebar_button_icon_active');
+                // Close action bar
+                toggleActionBar('hide');
             }
             else {
                 // activate

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

@@ -2,6 +2,7 @@ import { degreesToRadians, radiansToDegrees, useCapitalizeFirstLetter } from "..
 import { getSelectedObject } from "../../../architwin";
 import { Notyf } from 'notyf';
 import log from 'loglevel';
+import i18n from "./i18n";
 let notyf = new Notyf({ position: { x: 'left', y: 'bottom' }, duration: 4500 });
 export let activeModelControlPane = false;
 export let modelControlPane;
@@ -20,7 +21,7 @@ export function renderModelControlPane(type = 'Translate') {
         <div class="at_flex at_flex_column">
             <div class="at_form_container">
                 <div class="at_flex at_space_between">
-                    <span class="at_bolder at_text_base" id="at-transform-type-title">${type}</span>
+                    <span class="at_bolder at_text_base" id="at-transform-type-title">${i18n.t(type)}</span>
                     <span class="mdi mdi-close at_text_base" style="cursor:pointer" id="at-close-model-controls"></span>
                 </div>
                 <div class="at_number_field">
@@ -38,7 +39,7 @@ export function renderModelControlPane(type = 'Translate') {
                     <input type="number" id="at-input-z" class="at_rounded_input"/>
                     <span class="at_bolder at_model_unit">m</span>
                 </div>
-                <button class="at_button at_primary_azusa" id="at-confirm-transform">Confirm</button>
+                <button class="at_button at_primary_azusa" id="at-confirm-transform">${i18n.t('Confirm')}</button>
             </div>
         </div>
     `;
@@ -65,7 +66,7 @@ export function setTransformType(type) {
         if (validTransformTypes.includes(type)) {
             const transformTypeTitle = document.getElementById('at-transform-type-title');
             if (transformTypeTitle) {
-                transformTypeTitle.textContent = useCapitalizeFirstLetter(type);
+                transformTypeTitle.textContent = i18n.t(useCapitalizeFirstLetter(type));
                 transformType = type.toLowerCase();
                 setModelInputUnit(type);
                 return;

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

@@ -1,7 +1,8 @@
 import { IShowcaseObject } from "../../../types";
+import { Scene } from "../../../../bundle/sdk";
 export declare function renderObjectListPane(cardList: Array<IShowcaseObject>): HTMLElement;
-export declare function renderObjectCards(cardList: Array<IShowcaseObject>): void;
+export declare function renderObjectCards(cardList: Array<IShowcaseObject>, objectComponents?: Array<Scene.IComponent>): void;
 export declare function addObjectCard(objectCards: HTMLElement, payload: IShowcaseObject): void;
 export declare function removeObjectCard(elementId: string): void;
 export declare function updateObjectCard(objectCards: HTMLElement, payload: IShowcaseObject): void;
-export declare function renderObjectList(cardList: Array<IShowcaseObject>): void;
+export declare function renderObjectList(cardList: Array<IShowcaseObject>, objectComponents?: Array<Scene.IComponent>): void;

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

@@ -52,14 +52,22 @@ export function renderObjectListPane(cardList) {
     `;
     return element;
 }
-export function renderObjectCards(cardList) {
-    console.log("renderObjectCards()");
+export function renderObjectCards(cardList, objectComponents) {
+    console.log("renderObjectCards(): ", objectComponents);
     const objectCards = document.getElementById('at-object-cards');
     if (cardList && cardList.length > 0) {
         objectCards.innerHTML = ``;
         cardList.forEach(list => {
-            const card = renderObjectCard(list);
-            objectCards.appendChild(card);
+            if (objectComponents && objectComponents.length > 0) {
+                objectComponents.forEach(comp => {
+                    const card = renderObjectCard(list, comp);
+                    objectCards.appendChild(card);
+                });
+            }
+            else {
+                const card = renderObjectCard(list);
+                objectCards.appendChild(card);
+            }
         });
         batchAddEventListenerByClassName('at_object_image', (event) => __awaiter(this, void 0, void 0, function* () {
             //@ts-ignore
@@ -146,14 +154,22 @@ export function updateObjectCard(objectCards, payload) {
         targetCard.textContent = payload.object_data.name;
     }
 }
-export function renderObjectList(cardList) {
-    console.log("renderObjectList()");
+export function renderObjectList(cardList, objectComponents) {
+    console.log("renderObjectList(): ", objectComponents);
     const objectList = document.getElementById('at-object-cards');
     if (cardList && cardList.length > 0) {
         objectList.innerHTML = ``;
         cardList.forEach(list => {
-            const card = renderObjectRow(list);
-            objectList.appendChild(card);
+            if (objectComponents && objectComponents.length > 0) {
+                objectComponents.forEach(comp => {
+                    const card = renderObjectRow(list, comp);
+                    objectList.appendChild(card);
+                });
+            }
+            else {
+                const card = renderObjectRow(list);
+                objectList.appendChild(card);
+            }
         });
         batchAddEventListenerByClassName('at_card-body', (event) => __awaiter(this, void 0, void 0, function* () {
             //@ts-ignore

package/lib/atwinui/events.js

@@ -33,6 +33,7 @@ let currentTag = undefined;
 let modelsView = 'card';
 let iTag = null;
 let _currentPaneId;
+let isPlacingTag = false;
 function batchAddEventListenerByClassName(className, callback) {
     if (className) {
         const elements = document.querySelectorAll(`.${className}`);
@@ -112,10 +113,10 @@ function toggleDisplayPane(targetId) {
                     }
                 }
                 if (paneId === 'at-object-list-pane') {
-                    log.info("Render objects in list");
                     const objectsInSpace = get3DXObjects();
+                    const objectComponents = objectsInSpace.map(obj => obj.component);
                     const spaceObjects = objectsInSpace.map(obj => obj.object);
-                    renderObjectCards(spaceObjects);
+                    renderObjectCards(spaceObjects, objectComponents);
                     if (targetId === 'at-cancel-library-btn') {
                         yield cancelModelPlacement();
                     }
@@ -363,6 +364,14 @@ function handlePlaceTag() {
     };
     moveTagBtn.addEventListener('click', () => __awaiter(this, void 0, void 0, function* () {
         var _a, _b;
+        if (isPlacingTag) {
+            notyf.open({
+                type: 'info',
+                message: 'Please wait for the current tag to be placed before placing a new one'
+            });
+            return;
+        }
+        isPlacingTag = true;
         const tag = Object.assign({}, initTagData);
         const payload = getTagFormData();
         if (!cancelTagPlacementPrompt) {
@@ -431,12 +440,14 @@ function handlePlaceTag() {
                             log.info('_tags', _tags);
                             log.info("Last Tag Pushed", currentTag);
                             cancelTagPlacementPrompt.style.display = 'none';
+                            isPlacingTag = false;
                             // clearTagFormDropdown()
                         });
                     }
                 }
                 else {
                     notyf.error(`${i18n.t('RequiredFieldsEmpty')}`);
+                    isPlacingTag = false;
                 }
             }
             else {
@@ -460,11 +471,13 @@ function handlePlaceTag() {
                             currentTag = tags[tags.length - 1];
                             log.info("Last Tag Pushed", tags[tags.length - 1]);
                             cancelTagPlacementPrompt.style.display = 'none';
+                            isPlacingTag = false;
                         });
                     }
                 }
                 else {
                     notyf.error(`${i18n.t('RequiredFieldsEmpty')}`);
+                    isPlacingTag = false;
                 }
             }
         }
@@ -514,11 +527,13 @@ function handlePlaceTag() {
                                 log.info("tag not found");
                             }
                             cancelTagPlacementPrompt.style.display = 'none';
+                            isPlacingTag = false;
                         });
                     }
                 }
                 else {
                     notyf.error(`${i18n.t('RequiredFieldsEmpty')}`);
+                    isPlacingTag = false;
                 }
             }
             else {
@@ -550,11 +565,13 @@ function handlePlaceTag() {
                                 log.info("tag not found");
                             }
                             cancelTagPlacementPrompt.style.display = 'none';
+                            isPlacingTag = false;
                         });
                     }
                 }
                 else {
                     notyf.error(`${i18n.t('RequiredFieldsEmpty')}`);
+                    isPlacingTag = false;
                 }
             }
         }
@@ -584,6 +601,7 @@ function onDisposeTag() {
             clearTagFormDropdown();
             iTag = null;
             cancelTagPlacementPrompt.style.display = 'none';
+            isPlacingTag = false;
             return;
         }
         cancelMoveTag();
@@ -594,6 +612,7 @@ function onDisposeTag() {
         if (cancelTagPlacementPrompt) {
             cancelTagPlacementPrompt.style.display = 'none';
         }
+        isPlacingTag = false;
     });
 }
 function handleDisposeTag() {
@@ -615,10 +634,12 @@ function handleDisposeTag() {
 function handleSaveTag() {
     log.info('handleSaveTag()');
     const saveTagBtn = document.getElementById('at-save-tag-btn');
-    saveTagBtn.addEventListener('click', () => __awaiter(this, void 0, void 0, function* () {
+    saveTagBtn.addEventListener('click', (event) => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
         log.info("save clicked");
         const tagFormPayload = getTagFormData();
         log.info('=== tagFormPayload ===', tagFormPayload);
+        saveTagBtn.classList.add('at_disabled');
         if (tagFormMode == "ADD" /* FORM_MODE.ADD */) {
             log.info("FORM MODE", "ADD" /* FORM_MODE.ADD */);
             if (_tagCategories) {
@@ -632,6 +653,7 @@ function handleSaveTag() {
                 }
                 else {
                     notyf.error(`${i18n.t('NoTagSave')}`);
+                    saveTagBtn.classList.remove('at_disabled');
                 }
             }
             else {
@@ -645,6 +667,7 @@ function handleSaveTag() {
                 }
                 else {
                     notyf.error(`${i18n.t('NoTagSave')}`);
+                    saveTagBtn.classList.remove('at_disabled');
                 }
             }
         }
@@ -656,12 +679,14 @@ function handleSaveTag() {
             if (tagFormPayload && tagFormPayload.tagEmbed && _tags[index].media_url !== tagFormPayload.tagEmbed) {
                 if ((yield isValidUrl(tagFormPayload.tagEmbed)) === false) {
                     notyf.error(`${i18n.t('InvalidURL')}`);
+                    saveTagBtn.classList.remove('at_disabled');
                     return;
                 }
             }
             if (_tagCategories) {
                 if (selectedTag && tagFormPayload && tagFormPayload.tagName && tagFormPayload.tagCategoryId && tagFormPayload.tagSubcategoryId) {
                     log.info('selectedTag', selectedTag);
+                    const targetCategory = _tagCategories.find(cat => cat.uuid === tagFormPayload.tagCategoryId);
                     if (index !== -1) {
                         // Replace the existing object with the current payload
                         editTagLabel({ tagId: selectedTag.json_data.id, label: tagFormPayload.tagName });
@@ -670,7 +695,23 @@ function handleSaveTag() {
                         _tags[index].json_data.label = tagFormPayload.tagName;
                         _tags[index].json_data.description = tagFormPayload.tagDescription;
                         _tags[index].uuid = _tags[index].id.toString();
+                        if (tagFormPayload.tagSubcategoryId !== _tags[index].category_uuid) {
+                            try {
+                                // set tag icon
+                                const targetSubCat = targetCategory.subcategories.find(subcat => subcat.uuid === tagFormPayload.tagSubcategoryId);
+                                log.info('__@ [onMoveTag] Icon URL: ', targetSubCat.json_data);
+                                if (targetSubCat.json_data && targetSubCat.json_data.iconUrl && targetSubCat.json_data.iconUrl !== '' && targetSubCat.json_data.iconUrl.includes('https')) {
+                                    yield setTagIcon({ tag: selectedTag.json_data, iconName: (_a = targetSubCat.json_data.icon) !== null && _a !== void 0 ? _a : '', iconUrl: (_b = targetSubCat.json_data.iconUrl) !== null && _b !== void 0 ? _b : '', color: targetCategory.json_data.color.rgb });
+                                    log.info('__@ [onSaveTag] Tag icon set!');
+                                }
+                            }
+                            catch (error) {
+                                log.error('__@ [onSaveTag] Error on setTagIcon: ', error);
+                                notyf.error("Error apply subcategory icon");
+                            }
+                        }
                         _tags[index].category_uuid = tagFormPayload.tagSubcategoryId;
+                        _tags[index].json_data.color = targetCategory.json_data.color.rgb;
                         if (tagFormPayload.tagEmbed !== _tags[index].media_url) {
                             const tagData = {
                                 id: _tags[index].json_data.id,
@@ -735,6 +776,7 @@ function handleSaveTag() {
         }
         clearTagFormDropdown();
         iTag = null;
+        saveTagBtn.classList.remove('at_disabled');
     }));
 }
 function handleScreenshot() {
@@ -987,7 +1029,8 @@ function handleSetModelsView() {
         modelsView = 'card';
         log.info("modelCardViewBtn", modelsView);
         const spaceObjects = _3DXObjects.map(obj => obj.object);
-        renderObjectCards(spaceObjects);
+        const objectComponents = _3DXObjects.map(obj => obj.component);
+        renderObjectCards(spaceObjects, objectComponents);
     });
     modelsListViewBtn.addEventListener('click', () => {
         modelsListViewBtn.classList.add('at_ghost_active');
@@ -995,7 +1038,8 @@ function handleSetModelsView() {
         modelsView = 'list';
         log.info("modelListViewBtn", modelsView);
         const spaceObjects = _3DXObjects.map(obj => obj.object);
-        renderObjectList(spaceObjects);
+        const objectComponents = _3DXObjects.map(obj => obj.component);
+        renderObjectList(spaceObjects, objectComponents);
     });
 }
 function handleSetLibraryModelsView() {

package/lib/minimap.js

@@ -217,6 +217,7 @@ function setMap(mpSdk, appKey, mapId, openOnLoad) {
                     minimap.style.position = 'absolute';
                     minimap.style.zIndex = '20';
                     minimap.setAttribute('id', _minimapId);
+                    minimap.setAttribute('data-cy', _minimapId);
                     _mapContainer.appendChild(minimap);
                 }
                 _mapContainer.setAttribute('class', 'floor' + currentFloor.sequence);
@@ -242,6 +243,7 @@ function setMap(mpSdk, appKey, mapId, openOnLoad) {
                     thisSweep.style.position = 'absolute';
                     thisSweep.style.zIndex = '30';
                     thisSweep.setAttribute('id', 'p' + index);
+                    thisSweep.setAttribute('data-cy', 'p' + index);
                     thisSweep.setAttribute('floor-level', `${item.floorInfo.sequence}`);
                     thisSweep.setAttribute('value', index);
                     thisSweep.setAttribute('class', 'floor' + item.floorInfo.sequence);
@@ -341,6 +343,7 @@ function locateAvatar() {
             // thisAvatar.style.background = p.color
             // thisAvatar.style.opacity = '1'
             thisAvatar.setAttribute('id', 'a' + p.id);
+            thisAvatar.setAttribute('data-cy', 'a' + p.id);
             thisAvatar.setAttribute('value', p.id);
             const pShape = getColorShape(p.color);
             log.info('===pShape', pShape);
@@ -425,6 +428,7 @@ function renderOverlaySweep(item, socketId, color) {
         _thisParticipant.style.bottom = py * 100 + '%';
         _thisParticipant.setAttribute('id', socketId);
         _thisParticipant.setAttribute('value', socketId);
+        _thisParticipant.setAttribute('data-cy', socketId);
         _thisParticipant.setAttribute('class', 'floor' + item.floorInfo.sequence);
         //_thisParticipant.addEventListener('click', onSweepMove);
         //thisSweep.textContent = sweepIds[index];
@@ -825,6 +829,7 @@ function setStandaloneMap(modelId, appKey, mapId) {
                     thisSweep.style.position = 'absolute';
                     thisSweep.style.zIndex = '30';
                     thisSweep.setAttribute('id', 'p' + swp.id);
+                    thisSweep.setAttribute('data-cy', 'p' + swp.id);
                     thisSweep.setAttribute('floor-level', `${swp.floor.sequence}`);
                     thisSweep.setAttribute('value', swp.id);
                     thisSweep.setAttribute('class', 'floor' + swp.floor.sequence);

package/lib/types.d.ts

@@ -131,7 +131,6 @@ export interface IMPConfig {
         embedlyKey: string;
         meetSdkKey?: string;
         meetSecretKey?: string;
-        avatartwinKey?: string;
         awsConfig?: AWSConfig;
     };
     debug?: {

package/package.json

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

package/static/atwinui.css

@@ -256,6 +256,49 @@
     color: var(--text-color-light);
 }
 
+/* CSS for tooltip text */
+.at_sidebar_button_icon:hover .at_icon_tooltip {
+    transition: opacity 0.3s ease;
+    visibility: visible;
+    opacity: 1; 
+    
+}
+
+.at_sidebar_action_button_icon:hover .at_icon_tooltip {
+    transition: opacity 0.3s ease;
+    visibility: visible;
+    opacity: 1; 
+    
+}
+
+.at_icon_tooltip {
+    position: absolute;
+    top: 50%;
+    right: calc(100% + 18px); 
+    color: #fff;
+    transform: translateY(-50%); 
+    font-size: 12px; 
+    padding: 4px 8px;
+    border-radius: 4px;
+    white-space: nowrap;
+    z-index: 1;
+    visibility: hidden;
+    background-color: #2A2B26;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+  
+.at_icon_tooltip::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 100%;
+    margin-top: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent transparent #2A2B26;
+}
+  
 .at_sidebar_button_icon_active {
     border-radius: var(--border-radius);
     background-color: var(--bg-accent);