architwin 1.6.2 → 1.6.4

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

@@ -9,35 +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 class="at_icon_tooltip" data-cy="at-tooltip-close">${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>
-            <div class="at_icon_tooltip">${i18n.t('Translate')}</div>
+            <div class="at_icon_tooltip" data-cy="at-tooltip-translate">${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 class="at_icon_tooltip" data-cy="at-tooltip-rotate">${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 class="at_icon_tooltip" data-cy="at-tooltip-scale">${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 class="at_icon_tooltip" data-cy="at-tooltip-copy">${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 class="at_icon_tooltip" data-cy="at-tooltip-undo">${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 class="at_icon_tooltip" data-cy="at-tooltip-redo">${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 class="at_icon_tooltip" data-cy="at-tooltip-cancel">${i18n.t('Cancel')}</div>
         </div>
     `;
     return element;

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

@@ -25,6 +25,7 @@ export function renderObjectCard(payload, objectComponent) {
     element.classList.add('at_card');
     element.classList.add('at_mx-w-16');
     element.setAttribute('id', `at-card-${payload.id}`);
+    element.setAttribute('data-cy', `at-card-${payload.id}`);
     let object_data = {};
     object_data = payload.object_data;
     if (object_data.upload_file != null) {
@@ -39,10 +40,13 @@ export function renderObjectCard(payload, objectComponent) {
         }
         thumbnail = `${_basePath}/defaulthumbnail.png`;
     }
-    let isObjectVisible = false;
-    if (objectComponent) {
+    let isObjectVisible = true;
+    console.log("objectComponent: ", objectComponent);
+    // @ts-ignore
+    if (objectComponent && objectComponent.mesh) {
         // @ts-ignore
         isObjectVisible = objectComponent.mesh.visible;
+        console.log("isObjectVisible: ", isObjectVisible);
     }
     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}">
@@ -84,10 +88,12 @@ export function renderObjectRow(payload, objectComponent) {
     element.setAttribute('id', `at-card-${payload.id}`);
     let object_data = {};
     object_data = payload.object_data;
-    let isObjectVisible = false;
-    if (objectComponent) {
+    let isObjectVisible = true;
+    // @ts-ignore
+    if (objectComponent && objectComponent.mesh) {
         // @ts-ignore
         isObjectVisible = objectComponent.mesh.visible;
+        console.log("isObjectVisible: ", isObjectVisible);
     }
     element.innerHTML = `
         <div class="at_card-body" id="at-card-row-body-${payload.id}" card-id="${payload.id}">

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

@@ -37,14 +37,14 @@ export function renderLibraryPane() {
             </div>
         </div>
         <div class="at_scrollable_container" >
-            <div class="at_flex_tiles" id="at-library-cards"></div>
+            <div class="at_flex_tiles" id="at-library-cards" data-cy="at-library-cards"></div>
         </div>
         <div class="at_flex at_justify_between">
             <small id="at-cancel-model-placement-prompt" style="display:none">${i18n.t('PressEsc')}</small>
          </div>
         <div class="at_button_row at_justify_end">
             <div class="at_button at_ghost" style="margin-top: auto;" id="at-cancel-library-btn" data-cy="at-cancel-library-btn" target-pane="at-object-list-pane">
-                Cancel
+                ${i18n.t('Cancel')}
                 <span class="mdi mdi-close-circle-outline"></span>
             </div>
         </div>

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

@@ -25,27 +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 class="at_icon_tooltip" data-cy="at-tooltip-tag">${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 class="at_icon_tooltip" data-cy="at-tooltip-object">${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 class="at_icon_tooltip" data-cy="at-tooltip-minimap">${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 class="at_icon_tooltip" data-cy="at-tooltip-meeting">${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 class="at_icon_tooltip" data-cy="at-tooltip-screenshot">${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 class="at_icon_tooltip" data-cy="at-tooltip-theme">${i18n.t('Theme')}</div>
     </div>
     `;
     return menuBarElement;

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

@@ -18,12 +18,12 @@ export function renderModal() {
                 <div class="at_modal-close-button at_close-icon">&times;</div>
             </div>
             <div class="at_modal-content">
-                <h2 class="at_modal-content-heading" id="at-modal-content-heading"></h2>
-                <p class="at_modal-content-subheading" id="at-modal-content-subheading">
+                <h2 class="at_modal-content-heading" id="at-modal-content-heading" data-cy="at-modal-content-heading"></h2>
+                <p class="at_modal-content-subheading" id="at-modal-content-subheading" data-cy="at-modal-content-subheading">
                     
                 </p>
                 <div>
-                    <button class="at_close-button at_modal-accept-button"></button>
+                    <button class="at_close-button at_modal-accept-button" data-cy="at-modal-close-button"></button>
                 </div>
             </div>
         </div>

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

@@ -22,7 +22,7 @@ export function renderModelControlPane(type = 'Translate') {
             <div class="at_form_container">
                 <div class="at_flex at_space_between">
                     <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>
+                    <span class="mdi mdi-close at_text_base" style="cursor:pointer" id="at-close-model-controls" data-cy="at-close-model-controls"></span>
                 </div>
                 <div class="at_number_field">
                     <span class="at_bolder">X</span>
@@ -39,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">${i18n.t('Confirm')}</button>
+                <button class="at_button at_primary_azusa" id="at-confirm-transform" data-cy="at-confirm-transform">${i18n.t('Confirm')}</button>
             </div>
         </div>
     `;

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

@@ -46,7 +46,7 @@ export function renderObjectListPane(cardList) {
                 <span class="mdi mdi-plus-circle-outline"></span>
             </div>
         </div>
-        <div class="at_flex at_justify_center at_price">
+        <div class="at_flex at_justify_center at_price" id="at-bundle-version" data-cy="at-bundle-version">
             <small style="font-size: 0.65em; color: white; opacity: 50%;">${getBundleVersion()}</small>
         </div>
     `;
@@ -57,12 +57,10 @@ export function renderObjectCards(cardList, objectComponents) {
     const objectCards = document.getElementById('at-object-cards');
     if (cardList && cardList.length > 0) {
         objectCards.innerHTML = ``;
-        cardList.forEach(list => {
+        cardList.forEach((list, index) => {
             if (objectComponents && objectComponents.length > 0) {
-                objectComponents.forEach(comp => {
-                    const card = renderObjectCard(list, comp);
-                    objectCards.appendChild(card);
-                });
+                const card = renderObjectCard(list, objectComponents[index]);
+                objectCards.appendChild(card);
             }
             else {
                 const card = renderObjectCard(list);
@@ -109,6 +107,7 @@ export function renderObjectCards(cardList, objectComponents) {
                     //@ts-ignore
                     handleDeleteModel(event.target.id);
                     toggleModal(false);
+                    toggleActionBar('hide');
                 }));
             }
         }));
@@ -159,12 +158,10 @@ export function renderObjectList(cardList, objectComponents) {
     const objectList = document.getElementById('at-object-cards');
     if (cardList && cardList.length > 0) {
         objectList.innerHTML = ``;
-        cardList.forEach(list => {
+        cardList.forEach((list, index) => {
             if (objectComponents && objectComponents.length > 0) {
-                objectComponents.forEach(comp => {
-                    const card = renderObjectRow(list, comp);
-                    objectList.appendChild(card);
-                });
+                const card = renderObjectRow(list, objectComponents[index]);
+                objectList.appendChild(card);
             }
             else {
                 const card = renderObjectRow(list);
@@ -211,6 +208,7 @@ export function renderObjectList(cardList, objectComponents) {
                     //@ts-ignore
                     handleDeleteModel(event.target.id);
                     toggleModal(false);
+                    toggleActionBar('hide');
                 }));
             }
         }));

package/lib/atwinui/components/toolbar/static/addModelCard.js

@@ -13,7 +13,7 @@ export function renderAddModelCards(payload) {
             `).join('')}
         </div>
         <div style="padding: 8px;">
-        <div class="at_button at_accent_azusa at_w-full" id="${payload.id}" target-pane="${payload.targetPane}">
+        <div class="at_button at_accent_azusa at_w-full" id="${payload.id}" data-cy="${payload.id}" target-pane="${payload.targetPane}">
             <span class="mdi mdi-plus-circle-outline"></span>
             ${payload.btnLabel}
         </div>

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

@@ -75,7 +75,7 @@ export function renderTagListPane() {
                 <span class="mdi mdi-plus-circle-outline"></span>
             </div>
         </div>
-        <div class="at_flex at_justify_center at_price">
+        <div class="at_flex at_justify_center at_price" id="at-bundle-version" data-cy="at-bundle-version">
             <small style="font-size: 0.65em; color: white; opacity: 50%;">${getBundleVersion()}</small>
         </div>
     `;

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

@@ -54,7 +54,7 @@ export function renderThemePane() {
                 <span class="mdi mdi-content-save"></span>
             </div>
         </div>
-        <div class="at_flex at_justify_center at_price">
+        <div class="at_flex at_justify_center at_price" id="at-bundle-version" data-cy="at-bundle-version">
             <small style="font-size: 0.65em; color: white; opacity: 50%;">${getBundleVersion()}</small>
         </div>
     `;

package/lib/atwinui/events.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { actionBar, renderObjectCards, renderLibraryCards, renderTags, renderTagRow, getTagFormData, addClickEventToTagRow, setActiveCard, setActiveMenu, removeObjectCard, setTagCategoriesOption, toggleDropdown, tagFormMode, selectedTag, renderRecepientOptions, renderTagMessages, createTagMessage, setTagLink, setTagMessagingDetails, renderCategoryDropdownOptions, clearTagFormDropdown, clearActiveActionBtn, clearActiveCard, toggleActionBarButtons, selectedCategoryFilterId, selectedSubCategoryFilterId, filterTagList } from "./components/toolbar";
+import { actionBar, renderObjectCards, renderLibraryCards, renderTags, renderTagRow, getTagFormData, addClickEventToTagRow, setActiveCard, setActiveMenu, removeObjectCard, 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, actionHistory, get3DXObjects, transformHistory } from "../architwin";
 import { Notyf } from 'notyf';
 import 'notyf/notyf.min.css';
@@ -293,8 +293,17 @@ function handleCopyObject() {
             }
             if (cardDeleteButton) {
                 cardDeleteButton.addEventListener('click', (event) => {
-                    //@ts-expect-error
-                    handleDeleteModel(event.target.id);
+                    toggleModal();
+                    setModalAction({
+                        title: `${i18n.t('DeleteObject')}`,
+                        description: `${i18n.t('ConfirmDeleteObject')}`,
+                        buttonLabel: `${i18n.t('YesDelete')}`
+                    }, () => __awaiter(this, void 0, void 0, function* () {
+                        //@ts-expect-error
+                        handleDeleteModel(event.target.id);
+                        toggleModal(false);
+                        toggleActionBar('hide');
+                    }));
                 });
             }
             clearActiveActionBtn();

package/package.json

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