architwin 1.18.5 → 1.19.0

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

@@ -271,19 +271,22 @@ export function setActiveLibraryCard(cardId) {
                 const payload = yield addObjectToSpace(selectedObject.amazon_uri, selectedObject.object_type, { position: coords });
                 payload.object_data = selectedObject;
                 if (isToolbarFeatureEnabled('bim')) {
-                    payload.coordinate_system = getCoordinateSystem();
-                    const thisObjBimPosition = convertYupToZup(payload.object_position, getMPBasepoint(), getBasepoint(), getMeasurementUnit(), parseInt(getScaleFactor()));
-                    console.log("====== caroline thisObjBimPosition: ", thisObjBimPosition);
-                    const thisObjBimScale = convertYupScaleToZupScale(payload.object_scale, UNITS.METER, parseInt(getScaleFactor()));
-                    console.log("====== caroline thisObjBimScale: ", thisObjBimScale);
-                    const coordPayload = {
-                        coord_system: getCoordinateSystem(),
-                        bim_coordinates: {
-                            position: thisObjBimPosition,
-                            scale: thisObjBimScale,
-                        }
-                    };
-                    payload.json_data = JSON.stringify({ coordSystemCalibration: coordPayload });
+                    const basepoint = get3DXObjects().find(obj => obj.type === "BASEPOINT");
+                    if (basepoint) {
+                        payload.coordinate_system = getCoordinateSystem();
+                        const thisObjBimPosition = convertYupToZup(payload.object_position, getMPBasepoint(), getBasepoint(), getMeasurementUnit(), parseInt(getScaleFactor()));
+                        console.log("====== caroline thisObjBimPosition: ", thisObjBimPosition);
+                        const thisObjBimScale = convertYupScaleToZupScale(payload.object_scale, UNITS.METER, parseInt(getScaleFactor()));
+                        console.log("====== caroline thisObjBimScale: ", thisObjBimScale);
+                        const coordPayload = {
+                            coord_system: getCoordinateSystem(),
+                            bim_coordinates: {
+                                position: thisObjBimPosition,
+                                scale: thisObjBimScale,
+                            }
+                        };
+                        payload.json_data = JSON.stringify({ coordSystemCalibration: coordPayload });
+                    }
                 }
                 console.log("======Payload:", payload);
                 dispatchSpaceEvent(SPACE_EVENTS.MODEL_RENDERED, { model: payload });

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

@@ -40,6 +40,20 @@ export function renderGeneralSettingsMenu() {
             <span class="at_text_xxs at_mx-w-16 mdi mdi-information-slab-circle" id="at-general-settings-note">
                 ${i18n.t("Due to restrictions, original minimap is unavailable in password protected spaces. Please select and setup a custom minimap instead.")}
             </span>
+
+            <div class="at_field at_flex_column">
+                <span class="at_text_base">${i18n.t("ImportMTagHeader")}</span>
+                <div id="at-import-mattertags" data-cy="at-import-mattertags">
+                    <div class="at_button at_import_matterport_btn at_ghost" id="at-import-mattertag-btn" data-cy="at-import-mattertag-btn">
+                        ${i18n.t('ImportMTButton')}
+                        <span class="mdi mdi-tray-arrow-down" id="at-import-mattertag-btn"></span>
+                    </div>
+                </div>
+            </div>
+            <span class="at_text_xxs at_mx-w-16 mdi mdi-information-slab-circle" id="at-import-mattertag-note">
+                ${i18n.t("ImportMTagInfo")}
+            </span>
+
             <div class="at_scrollable_container at_h-min-45"></div>
         </div>
     </div>

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

@@ -290,6 +290,13 @@ i18n
                 "SuccessUpdatedFloorLevel": "Updated the partition's floor level",
                 "DuplicatePartitionName": "This partition name is already used in this room. Please choose a different name.",
                 "PleaseOnPolygonVisibility": "Action cannot be done, please turn on room visibility.",
+                "ImportMTagHeader": "Import Mattertags",
+                "ImportMTButton": "Import",
+                "ImportMTagInfo": "Importing the same tags more than once from your Matterport Space will cause duplicates",
+                "ImportResultPartial": "Failed to import {{errorCount}} tag(s).",
+                "ImportResultNone": "Failed to import any tags.",
+                "ImportResultSuccess": "Successfully imported {{count}} tag(s).",
+                "NothingToImport": "Nothing to import.",
             }
         },
         ja: {
@@ -574,7 +581,14 @@ i18n
                 "IotCategoryRequired": "IoTカテゴリは必須です",
                 "SuccessUpdatedFloorLevel": "区画のフロアオフセット値が更新されました",
                 "DuplicatePartitionName": "このパーティション名は既にこの部屋で使用されています。別の名前を選択してください。",
-                "PleaseOnPolygonVisibility": "操作を行う前に、部屋の表示をオンにしてください。"
+                "PleaseOnPolygonVisibility": "操作を行う前に、部屋の表示をオンにしてください。",
+                "ImportMTagHeader": "Mattertagsをインポートする",
+                "ImportMTButton": "輸入",
+                "ImportMTagInfo": "Matterport Spaceから同じタグを複数回インポートすると、重複が発生します。",
+                "ImportResultPartial": "{{errorCount}}件のタグのインポートに失敗しました。",
+                "ImportResultNone": "タグのインポートに失敗しました。",
+                "ImportResultSuccess": "{{count}}件のタグをインポートしました。",
+                "NothingToImport": "インポートするものがありません。"
             }
         }
     },

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

@@ -1,7 +1,7 @@
 import { IToolbarData } from "../../../types";
 import { setActiveMenu, clearActiveMenu, getObjectListStatus } from "./menuBar";
 import { renderObjectCards, removeObjectCard } from "./objectListPane";
-import { getTagFormData, setTagCategoriesOption, tagFormMode, selectedTag, renderCategoryDropdownOptions, toggleDropdown } from "./tagFormPane";
+import { getTagFormData, setTagCategoriesOption, tagFormMode, selectedTag, renderCategoryDropdownOptions, toggleDropdown, originalTagBackup } from "./tagFormPane";
 import { renderTags, renderTagRow, addClickEventToTagRow, setTagLink, getTagLink, selectedCategoryFilterId, selectedSubCategoryFilterId, filterTagList } from "./tagListPane";
 import { renderPreviewModal, togglePreviewModal, closePreviewModal, setPreviewModalAction, activePreviewModal } from "./previewModal";
 import { setActiveActionBtn, clearActiveActionBtn, toggleActionBarButtons } from "./actionBar";
@@ -22,4 +22,4 @@ declare let actionBar: HTMLElement;
  */
 declare function setPreferredLanguage(): void;
 declare function renderToolbarUI(payload: IToolbarData): void;
-export { actionBar, tagFormMode, selectedTag, selectedCategoryFilterId, selectedSubCategoryFilterId, renderToolbarUI, renderObjectCards, setActiveMenu, clearActiveMenu, setActiveActionBtn, renderLibraryCards, renderTags, getTagFormData, renderTagRow, addClickEventToTagRow, setTagCategoriesOption, setActiveThemeCard, setActiveCard, setActiveLibraryCard, clearActiveCard, clearActiveLibraryCard, removeObjectCard, renderRecepientOptions, renderTagMessages, createTagMessage, renderCategoryDropdownOptions, toggleDropdown, setTagLink, getTagLink, setTagMessagingDetails, clearTagFormDropdown, clearTagFilterDropdown, getObjectListStatus, toggleModal, setModalAction, toggleModelControl, toggleActionSettings, clearActiveActionBtn, toggleActionBarButtons, filterTagList, setPreferredLanguage, renderPreviewModal, togglePreviewModal, closePreviewModal, setPreviewModalAction, activePreviewModal };
+export { actionBar, tagFormMode, selectedTag, originalTagBackup, selectedCategoryFilterId, selectedSubCategoryFilterId, renderToolbarUI, renderObjectCards, setActiveMenu, clearActiveMenu, setActiveActionBtn, renderLibraryCards, renderTags, getTagFormData, renderTagRow, addClickEventToTagRow, setTagCategoriesOption, setActiveThemeCard, setActiveCard, setActiveLibraryCard, clearActiveCard, clearActiveLibraryCard, removeObjectCard, renderRecepientOptions, renderTagMessages, createTagMessage, renderCategoryDropdownOptions, toggleDropdown, setTagLink, getTagLink, setTagMessagingDetails, clearTagFormDropdown, clearTagFilterDropdown, getObjectListStatus, toggleModal, setModalAction, toggleModelControl, toggleActionSettings, clearActiveActionBtn, toggleActionBarButtons, filterTagList, setPreferredLanguage, renderPreviewModal, togglePreviewModal, closePreviewModal, setPreviewModalAction, activePreviewModal };

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

@@ -5,7 +5,7 @@ import { renderObjectListPane, renderObjectCards, removeObjectCard } from "./obj
 import { renderSpaceUserListPane } from "./spaceUserListPane";
 import { renderViewingRemoteSpace } from "./viewingRemoteSpace";
 import { renderAddObjectPane } from "./addObjectPane";
-import { renderTagFormPane, getTagFormData, setTagCategoriesOption, tagFormMode, selectedTag, renderCategoryDropdownOptions, toggleDropdown } from "./tagFormPane";
+import { renderTagFormPane, getTagFormData, setTagCategoriesOption, tagFormMode, selectedTag, renderCategoryDropdownOptions, toggleDropdown, originalTagBackup } from "./tagFormPane";
 import { renderTagListPane, renderTags, renderTagRow, addClickEventToTagRow, setTagLink, getTagLink, selectedCategoryFilterId, selectedSubCategoryFilterId, filterTagList } from "./tagListPane";
 import { renderPreviewModal, togglePreviewModal, closePreviewModal, setPreviewModalAction, activePreviewModal } from "./previewModal";
 import { renderAddMediascreenFormPane } from "./addMediascreenFormPane";
@@ -167,4 +167,4 @@ function renderToolbarUI(payload) {
         themeManager(config);
     }
 }
-export { actionBar, tagFormMode, selectedTag, selectedCategoryFilterId, selectedSubCategoryFilterId, renderToolbarUI, renderObjectCards, setActiveMenu, clearActiveMenu, setActiveActionBtn, renderLibraryCards, renderTags, getTagFormData, renderTagRow, addClickEventToTagRow, setTagCategoriesOption, setActiveThemeCard, setActiveCard, setActiveLibraryCard, clearActiveCard, clearActiveLibraryCard, removeObjectCard, renderRecepientOptions, renderTagMessages, createTagMessage, renderCategoryDropdownOptions, toggleDropdown, setTagLink, getTagLink, setTagMessagingDetails, clearTagFormDropdown, clearTagFilterDropdown, getObjectListStatus, toggleModal, setModalAction, toggleModelControl, toggleActionSettings, clearActiveActionBtn, toggleActionBarButtons, filterTagList, setPreferredLanguage, renderPreviewModal, togglePreviewModal, closePreviewModal, setPreviewModalAction, activePreviewModal };
+export { actionBar, tagFormMode, selectedTag, originalTagBackup, selectedCategoryFilterId, selectedSubCategoryFilterId, renderToolbarUI, renderObjectCards, setActiveMenu, clearActiveMenu, setActiveActionBtn, renderLibraryCards, renderTags, getTagFormData, renderTagRow, addClickEventToTagRow, setTagCategoriesOption, setActiveThemeCard, setActiveCard, setActiveLibraryCard, clearActiveCard, clearActiveLibraryCard, removeObjectCard, renderRecepientOptions, renderTagMessages, createTagMessage, renderCategoryDropdownOptions, toggleDropdown, setTagLink, getTagLink, setTagMessagingDetails, clearTagFormDropdown, clearTagFilterDropdown, getObjectListStatus, toggleModal, setModalAction, toggleModelControl, toggleActionSettings, clearActiveActionBtn, toggleActionBarButtons, filterTagList, setPreferredLanguage, renderPreviewModal, togglePreviewModal, closePreviewModal, setPreviewModalAction, activePreviewModal };

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

@@ -1,6 +1,7 @@
 import { FORM_MODE, ITagCategory } from "../../../types";
 export declare let tagFormMode: FORM_MODE;
 export declare let selectedTag: any;
+export declare let originalTagBackup: any;
 export declare function renderTagFormPane(): HTMLDivElement;
 export declare function initFormData(tagId?: string): void;
 export declare function getTagFormData(): {
@@ -18,3 +19,5 @@ export declare function renderSubcategoryDropdownOptions(elementId: string, item
 export declare function clearTagFormDropdown(): void;
 export declare function clearTagFilterDropdown(): void;
 export declare function setTagFormMode(formMode: FORM_MODE): void;
+export declare function clearSelectedTag(): void;
+export declare function setSelectedTag(tag: any): void;

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

@@ -1,4 +1,13 @@
-import { _tagCategories, _tags, getMpTags } from "../../../architwin";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { _atwin, _tagCategories, _tags, editTagColor, getMpTags } from "../../../architwin";
 import { convertToCssRgb, stringContains } from "../../../utils";
 import { TAG_TYPE } from "../../../types";
 import { renderTags, setSelectedCategoryFilter, setSelectedSubcategoryFilter, filterTagList, getAllSubcategories, selectedCategoryFilterId, sortTags, selectedTagSortOption } from './tagListPane';
@@ -10,6 +19,7 @@ let selectedSubCategoryId = undefined;
 let isChevronEventAdded = false;
 export let tagFormMode = "NONE" /* FORM_MODE.NONE */;
 export let selectedTag = undefined;
+export let originalTagBackup = null;
 export function renderTagFormPane() {
     const element = document.createElement('div');
     element.classList.add('at_container');
@@ -92,15 +102,12 @@ export function initFormData(tagId) {
         const targetTag = _tags.find(tag => tag.json_data.id === tagId);
         console.log("targetTag", targetTag);
         selectedTag = targetTag;
+        // keep a deep copy of original tag data so we can revert on cancel
+        originalTagBackup = targetTag ? JSON.parse(JSON.stringify(targetTag.json_data)) : null;
         if (targetTag) {
             if (!tagNameInput) {
                 setInputElements();
             }
-            const tagCategory = _tagCategories.find((category) => {
-                const tagCategory = category.subcategories.find(subcategory => subcategory.uuid === targetTag.category_uuid);
-                return tagCategory;
-            });
-            console.log('tagCategoryId', tagCategory, tagCategory.uuid);
             tagNameInput.value = targetTag.json_data.label;
             tagDescriptionInput.value = targetTag.json_data.description;
             tagEmbedInput.value = targetTag.media_url && targetTag.media_url !== '' ? targetTag.media_url : '';
@@ -130,6 +137,8 @@ export function initFormData(tagId) {
         tagNameInput.value = '';
         tagDescriptionInput.value = '';
         tagEmbedInput.value = '';
+        // clear any previous edit backup when entering add mode
+        originalTagBackup = null;
     }
     const categoryChevron = document.getElementById('at-category-dropdown');
     const subcategoryChevron = document.getElementById('at-subcategory-dropdown');
@@ -260,109 +269,120 @@ export function clearInnerHTML(elementId) {
     targetElement.innerHTML = ``;
 }
 function selectOption(option, elementId, skipToggle = false) {
-    console.log("selectOption()");
-    //const dropdownToggle = document.querySelector('.at_dropdown_toggle');
-    if (!elementId || elementId === '' || elementId == null) {
-        console.error("ElementId is empty or undefined");
-        return;
-    }
-    const dropdownToggle = document.getElementById(elementId);
-    //dropdownToggle.textContent = option.textContent;
-    dropdownToggle.innerHTML = option.innerHTML;
-    //selectedText = option.textContent;
-    const isFilterDropdown = stringContains(elementId, 'filter');
-    const categoryUUID = option.getAttribute('category-uuid');
-    const categoryType = option.getAttribute('dropdown-type');
-    console.log("categoryUUID ", categoryUUID);
-    console.log("categoryType ", categoryType);
-    if (categoryUUID && categoryUUID !== null) {
-        if (categoryType == 'category' && isFilterDropdown == false) {
-            selectedCategoryId = categoryUUID;
-        }
-        else if (categoryType == 'category' && isFilterDropdown) {
-            setSelectedCategoryFilter(categoryUUID);
-            setSelectedSubcategoryFilter(undefined); //reset selected subcategory
-            const tags = getMpTags();
-            const filteredTags = filterTagList(tags);
-            const sortedTags = sortTags(filteredTags, { by: 'label', order: 'asc' });
-            renderTags(sortedTags);
-        }
-        else if (categoryType == 'subcategory' && isFilterDropdown == false) {
-            selectedSubCategoryId = categoryUUID;
-        }
-        else if (categoryType == 'subcategory' && isFilterDropdown) {
-            setSelectedSubcategoryFilter(categoryUUID);
-            const tags = getMpTags();
-            const filteredTags = filterTagList(tags);
-            const sortedTags = sortTags(filteredTags, { by: 'label', order: 'asc' });
-            renderTags(filteredTags);
-        }
-        //Populate subcategory dropdown
-        const targetCategory = _tagCategories.find(cat => cat.uuid === categoryUUID);
-        if (targetCategory && targetCategory.subcategories && targetCategory.subcategories.length > 0) {
-            console.log("Subcategories found", targetCategory.subcategories);
-            renderSubcategoryDropdownOptions(isFilterDropdown ? 'at-subcategory-filter-options' : 'at-subcategory-options', targetCategory.subcategories);
+    return __awaiter(this, void 0, void 0, function* () {
+        console.log("selectOption()");
+        //const dropdownToggle = document.querySelector('.at_dropdown_toggle');
+        if (!elementId || elementId === '' || elementId == null) {
+            console.error("ElementId is empty or undefined");
+            return;
         }
-        else {
-            if (categoryType == 'category') {
-                const elementId = isFilterDropdown ? 'at-subcategory-filter-options' : 'at-subcategory-options';
-                const subcatToggleId = isFilterDropdown ? 'at-subcategory-filter-dropdown-toggle' : 'at-subcategory-dropdown-toggle';
-                const subcategoryToggle = document.getElementById(elementId);
-                const subcatDropdownToggle = document.getElementById(subcatToggleId);
-                subcategoryToggle.innerHTML = `
+        const dropdownToggle = document.getElementById(elementId);
+        //dropdownToggle.textContent = option.textContent;
+        dropdownToggle.innerHTML = option.innerHTML;
+        //selectedText = option.textContent;
+        const isFilterDropdown = stringContains(elementId, 'filter');
+        const categoryUUID = option.getAttribute('category-uuid');
+        const categoryType = option.getAttribute('dropdown-type');
+        console.log("categoryUUID ", categoryUUID);
+        console.log("categoryType ", categoryType);
+        if (categoryUUID && categoryUUID !== null) {
+            if (categoryType == 'category' && isFilterDropdown == false) {
+                selectedCategoryId = categoryUUID;
+            }
+            else if (categoryType == 'category' && isFilterDropdown) {
+                setSelectedCategoryFilter(categoryUUID);
+                setSelectedSubcategoryFilter(undefined); //reset selected subcategory
+                const tags = getMpTags();
+                const filteredTags = filterTagList(tags);
+                const sortedTags = sortTags(filteredTags, { by: 'label', order: 'asc' });
+                renderTags(sortedTags);
+            }
+            else if (categoryType == 'subcategory' && isFilterDropdown == false) {
+                selectedSubCategoryId = categoryUUID;
+                // updates the tag icon color
+                const targetCategory = _tagCategories.find(cat => cat.uuid === selectedCategoryId);
+                if (targetCategory && selectedTag != undefined) {
+                    yield editTagColor({ tagId: selectedTag.json_data.id, color: targetCategory.json_data.color.rgb });
+                    _atwin.Tag.editPosition(selectedTag.json_data.id, {
+                        anchorPosition: selectedTag.json_data.anchorPosition,
+                        stemVector: Object.assign({}, selectedTag.json_data.stemVector),
+                    });
+                }
+            }
+            else if (categoryType == 'subcategory' && isFilterDropdown) {
+                setSelectedSubcategoryFilter(categoryUUID);
+                const tags = getMpTags();
+                const filteredTags = filterTagList(tags);
+                const sortedTags = sortTags(filteredTags, { by: 'label', order: 'asc' });
+                renderTags(filteredTags);
+            }
+            //Populate subcategory dropdown
+            const targetCategory = _tagCategories.find(cat => cat.uuid === categoryUUID);
+            if (targetCategory && targetCategory.subcategories && targetCategory.subcategories.length > 0) {
+                console.log("Subcategories found", targetCategory.subcategories);
+                renderSubcategoryDropdownOptions(isFilterDropdown ? 'at-subcategory-filter-options' : 'at-subcategory-options', targetCategory.subcategories);
+            }
+            else {
+                if (categoryType == 'category') {
+                    const elementId = isFilterDropdown ? 'at-subcategory-filter-options' : 'at-subcategory-options';
+                    const subcatToggleId = isFilterDropdown ? 'at-subcategory-filter-dropdown-toggle' : 'at-subcategory-dropdown-toggle';
+                    const subcategoryToggle = document.getElementById(elementId);
+                    const subcatDropdownToggle = document.getElementById(subcatToggleId);
+                    subcategoryToggle.innerHTML = `
                     <span class="mdi mdi-circle-slice-1"></span> ${i18n.t('NoSelection')}
                     `;
-                subcatDropdownToggle.innerHTML = `
+                    subcatDropdownToggle.innerHTML = `
                 <span class="mdi mdi-circle-slice-1"></span> ${i18n.t('NoSelection')}
                 `;
+                }
             }
         }
-    }
-    else {
-        console.log("categoryUUID is undefined");
-        if (categoryType == 'category' && isFilterDropdown) {
-            console.log("Clearing subcategory filter");
-            const subcategoryToggle = document.getElementById('at-subcategory-filter-dropdown-toggle');
-            subcategoryToggle.textContent = `${i18n.t('NoSelection')}`;
-            subcategoryToggle.innerHTML = `
+        else {
+            console.log("categoryUUID is undefined");
+            if (categoryType == 'category' && isFilterDropdown) {
+                console.log("Clearing subcategory filter");
+                const subcategoryToggle = document.getElementById('at-subcategory-filter-dropdown-toggle');
+                subcategoryToggle.textContent = `${i18n.t('NoSelection')}`;
+                subcategoryToggle.innerHTML = `
             <span class="mdi mdi-circle-slice-1"></span> ${i18n.t('NoSelection')}
             `;
-            setSelectedCategoryFilter(undefined);
+                setSelectedCategoryFilter(undefined);
+            }
+            if (isFilterDropdown) {
+                setSelectedSubcategoryFilter(undefined); //reset selected subcategory
+            }
+            //Populate subcategory dropdown
+            const targetCategory = _tagCategories.find(cat => cat.uuid === selectedCategoryFilterId);
+            if (targetCategory && targetCategory.subcategories && targetCategory.subcategories.length > 0) {
+                console.log("Subcategories found", targetCategory.subcategories);
+                renderSubcategoryDropdownOptions(isFilterDropdown ? 'at-subcategory-filter-options' : 'at-subcategory-options', targetCategory.subcategories);
+            }
+            else {
+                const elementId = isFilterDropdown ? 'at-subcategory-filter-options' : 'at-subcategory-options';
+                clearInnerHTML(elementId);
+            }
+            let tags = getMpTags().filter(tag => !tag.tag_type || tag.tag_type !== TAG_TYPE.IOT);
+            const filteredTags = filterTagList(tags);
+            const sortedTags = sortTags(filteredTags ? filteredTags : tags, selectedTagSortOption);
+            renderTags(sortedTags);
         }
-        if (isFilterDropdown) {
-            setSelectedSubcategoryFilter(undefined); //reset selected subcategory
+        let toggleId = '';
+        if (elementId === 'at-category-dropdown-toggle') {
+            toggleId = 'at-category-options';
         }
-        //Populate subcategory dropdown
-        const targetCategory = _tagCategories.find(cat => cat.uuid === selectedCategoryFilterId);
-        if (targetCategory && targetCategory.subcategories && targetCategory.subcategories.length > 0) {
-            console.log("Subcategories found", targetCategory.subcategories);
-            renderSubcategoryDropdownOptions(isFilterDropdown ? 'at-subcategory-filter-options' : 'at-subcategory-options', targetCategory.subcategories);
+        else if (elementId === 'at-subcategory-dropdown-toggle') {
+            toggleId = 'at-subcategory-options';
         }
-        else {
-            const elementId = isFilterDropdown ? 'at-subcategory-filter-options' : 'at-subcategory-options';
-            clearInnerHTML(elementId);
+        else if (elementId === 'at-category-filter-dropdown-toggle') {
+            toggleId = 'at-category-filter-options';
         }
-        let tags = getMpTags().filter(tag => !tag.tag_type || tag.tag_type !== TAG_TYPE.IOT);
-        const filteredTags = filterTagList(tags);
-        const sortedTags = sortTags(filteredTags ? filteredTags : tags, selectedTagSortOption);
-        renderTags(sortedTags);
-    }
-    let toggleId = '';
-    if (elementId === 'at-category-dropdown-toggle') {
-        toggleId = 'at-category-options';
-    }
-    else if (elementId === 'at-subcategory-dropdown-toggle') {
-        toggleId = 'at-subcategory-options';
-    }
-    else if (elementId === 'at-category-filter-dropdown-toggle') {
-        toggleId = 'at-category-filter-options';
-    }
-    else if (elementId === 'at-subcategory-filter-dropdown-toggle') {
-        toggleId = 'at-subcategory-filter-options';
-    }
-    if (skipToggle == false) {
-        toggleDropdown(toggleId);
-    }
+        else if (elementId === 'at-subcategory-filter-dropdown-toggle') {
+            toggleId = 'at-subcategory-filter-options';
+        }
+        if (skipToggle == false) {
+            toggleDropdown(toggleId);
+        }
+    });
 }
 function createOptionElement(item, dropdownType) {
     console.log("createOptionElement");
@@ -538,3 +558,9 @@ export function clearTagFilterDropdown() {
 export function setTagFormMode(formMode) {
     tagFormMode = formMode;
 }
+export function clearSelectedTag() {
+    selectedTag = undefined;
+}
+export function setSelectedTag(tag) {
+    selectedTag = tag;
+}

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

@@ -59,7 +59,7 @@ export function renderTagListPane() {
             <span id="at-tag-list-title">${i18n.t('Tags')}</span>
         </div>
         <div class="at_form_container at_h-min-65 at_tag_list_pane">
-            <div class="at_button_row at_justify_end ${_mpConfig.restrictionConfig.isTagReadOnly ? 'at_disabled' : ''}">
+            <div class="at_button_row at_justify_end">
                 <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">
@@ -70,14 +70,14 @@ export function renderTagListPane() {
                         </span>
                     </span>
                 </div>
-                <div class="at_button at_ghost" id="at-visibility-tag-btn" data-cy="at-visibility-tag-btn" >
+                <div class="at_button at_ghost ${_mpConfig.restrictionConfig.isTagReadOnly ? 'at_hidden' : ''}" 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">
+                <div class="at_button at_ghost ${_mpConfig.restrictionConfig.isTagReadOnly ? 'at_hidden' : ''}" 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>
@@ -174,8 +174,6 @@ export function renderTags(tags, showOwnTagsOnly = false) {
     console.log("renderTags", tags);
     iotTags = tags;
     const tagContainer = document.getElementById('at-tag-list-container');
-    // get value from mp config
-    const isReadOnly = _mpConfig.restrictionConfig.isTagReadOnly;
     if (!tagContainer) {
         console.error("Tag container does not exist in DOM");
         return;
@@ -192,12 +190,10 @@ export function renderTags(tags, showOwnTagsOnly = false) {
     tags.forEach(tag => {
         console.log('@caroline render tag checking: ', tag);
         if (showOwnTagsOnly) {
-            if (isTagPartOfCategory(tag.category_uuid)) {
-                const row = renderTagRow(tag.json_data, tag.tag_icon_url, tag.tag_type);
-                tagContainer.appendChild(row);
-                addTagButton.classList.remove('at_disabled');
-                visibilityTagButton.classList.remove('at_disabled');
-            }
+            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);

package/lib/atwinui/events.js

@@ -7,14 +7,14 @@ 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, 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, toggleVisibilityTag, _tagIotCategoryTypes, getIoTDeviceTagIcons, toggleMeshChildrenVisibility, set3DXObjects, partitionHistory, _thisVertexPath, setPolygonPath, editMode,
+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, originalTagBackup, 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, editTagColor, 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, _thisVertexPath, setPolygonPath, editMode, importMatterPortTag,
 // polygonHistory
  } from "../architwin";
 import { Notyf } from 'notyf';
 import 'notyf/notyf.min.css';
 import { SPACE_EVENTS, COORDINATE_SYSTEM, UNITS, DEGREE, MAP_OPTIONS, sortTagOptions, sortObjectOptions, CUSTOM_MAP_MODE, TAG_TYPE } from "../types";
-import { initFormData, setTagFormMode } from "./components/toolbar/tagFormPane";
+import { clearSelectedTag, initFormData, setSelectedTag, setTagFormMode } from "./components/toolbar/tagFormPane";
 import { renderObjectList, resetSelectedObjectSortOption, selectedObjectSortOption, sortShowcaseObjects, updateSelectedObjectSortOption } from "./components/toolbar/objectListPane";
 import { renderLibraryList } from "./components/toolbar/libraryPane";
 import { renderObjectCard } from "./components/toolbar/card";
@@ -526,6 +526,7 @@ function setupIndividualEventListeners() {
     handlePipeList();
     handleResponsiveChanges();
     handleToggleVisibilityTags();
+    handleImportMTagDisplay();
     handlePreviewModalResize();
 }
 //================ OBJECT EVENT HANDLERS ===============//s
@@ -821,7 +822,7 @@ function handlePlaceTag() {
                             log.info("Last Tag Pushed", currentTag);
                             cancelTagPlacementPrompt.style.display = 'none';
                             isPlacingTag = false;
-                            // clearTagFormDropdown()
+                            setSelectedTag(currentTag);
                         });
                     }
                     handleMobilePlaceTag(true);
@@ -987,11 +988,45 @@ function onDisposeTag() {
                 }
             }
             clearTagFormDropdown();
+            clearSelectedTag();
             iTag = null;
             cancelTagPlacementPrompt.style.display = 'none';
             isPlacingTag = false;
             return;
         }
+        // If we are editing an existing tag and user cancels, revert to original values
+        if (tagFormMode === "EDIT" /* FORM_MODE.EDIT */ && selectedTag && originalTagBackup) {
+            try {
+                yield editTagColor({ tagId: selectedTag.json_data.id, color: originalTagBackup.color });
+            }
+            catch (e) {
+                log.error('Failed to revert tag color on cancel', e);
+            }
+            try {
+                // revert position/stemVector
+                if (_atwin && _atwin.Tag && _atwin.Tag.editPosition) {
+                    _atwin.Tag.editPosition(selectedTag.json_data.id, {
+                        anchorPosition: originalTagBackup.anchorPosition,
+                        stemVector: Object.assign({}, originalTagBackup.stemVector),
+                    });
+                }
+            }
+            catch (e) {
+                log.error('Failed to revert tag position on cancel', e);
+            }
+            // revert category/subcategory and other metadata in local cache
+            const idx = _tags.findIndex(t => t.json_data.id === selectedTag.json_data.id);
+            if (idx !== -1) {
+                _tags[idx].json_data = Object.assign(Object.assign({}, _tags[idx].json_data), originalTagBackup);
+            }
+            clearTagFormDropdown();
+            clearSelectedTag();
+            setTagFormMode("NONE" /* FORM_MODE.NONE */);
+            if (cancelTagPlacementPrompt)
+                cancelTagPlacementPrompt.style.display = 'none';
+            isPlacingTag = false;
+            return;
+        }
         cancelMoveTag();
         if (iTag !== null) {
             yield disposeTag({ tagId: iTag.id });
@@ -1048,6 +1083,7 @@ function handleSaveTag() {
                             currentTag.tag_icon_url = targetSubCat.json_data.iconUrl;
                         }
                     }
+                    yield attachTagMedia({ sdk: _atwin, tag: currentTag.json_data, attachments: [currentTag.media_url] });
                     let payload = { tag: currentTag };
                     console.log("@__ handleSaveTag payload ", payload);
                     dispatchSpaceEvent(SPACE_EVENTS.TAG_SAVED, payload);
@@ -1139,6 +1175,13 @@ function handleSaveTag() {
                         _tags[index].category_uuid = tagFormPayload.tagSubcategoryId;
                         _tags[index].json_data.color = targetCategory.json_data.color.rgb;
                         if (tagFormPayload.tagEmbed && tagFormPayload.tagEmbed != '') { // this condition is added when Embed URL is removed by user and is Empty #15842
+                            _tags[index].media_url = undefined;
+                            const tagDataCollection = getTagDataCollection();
+                            _tags[index].json_data.attachments = tagDataCollection[_tags[index].json_data.id] ? tagDataCollection[_tags[index].json_data.id].attachments : _tags[index].json_data.attachments;
+                            if (_tags[index].json_data.attachments) {
+                                yield detachTagMedia({ tagId: _tags[index].json_data.id, attachmentIds: _tags[index].json_data.attachments });
+                                _tags[index].json_data.attachments = [];
+                            }
                             if (tagFormPayload.tagEmbed !== _tags[index].media_url) {
                                 const tagData = {
                                     id: _tags[index].json_data.id,
@@ -1215,6 +1258,7 @@ function handleSaveTag() {
             }
         }
         clearTagFormDropdown();
+        clearSelectedTag();
         iTag = null;
         saveTagBtn.classList.remove('at_disabled');
         setTagFormMode("NONE" /* FORM_MODE.NONE */);
@@ -1571,6 +1615,7 @@ function setupSpaceEventSubscriptions() {
     subscribeSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_HOST_END_SESSION, handleScreenShareEndSessionEvent);
     subscribeSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_ACCEPT_REQUEST, handleScreenShareAcceptRequest);
     subscribeSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_BACK_USER_LIST_PANE, handleScreenShareBackUserListPane);
+    subscribeSpaceEvent(SPACE_EVENTS.PROCEED_IMPORT_MTAGS, handleImportMTag);
 }
 function handleVertexDragEnd(payload) {
     log.info("handleVertexDragEnd()", payload);
@@ -4096,6 +4141,22 @@ function handleVisiblePartitions(mpSdk) {
         });
     }));
 }
+function handleImportMTagDisplay() {
+    log.info('handleImportMTagDisplay');
+    const importMTagBtn = document.getElementById('at-import-mattertag-btn');
+    if (importMTagBtn) {
+        importMTagBtn.addEventListener('click', () => __awaiter(this, void 0, void 0, function* () {
+            log.info('@caroline MTagButton is clicked');
+            yield dispatchSpaceEvent(SPACE_EVENTS.IMPORT_MTAGS, {
+                payload: true
+            });
+        }));
+    }
+}
+function handleImportMTag() {
+    log.info("handleImportMTag()");
+    importMatterPortTag();
+}
 export { 
 //state
 activeToolbarItem, activeActionItem, cancelModelPlacementPrompt, isCustomMapControlsVisible, pipeColor, 

package/lib/graphql.d.ts

@@ -0,0 +1,8 @@
+import { IMattertagsResponse } from "./types";
+/**
+ * Sends a GraphQL query to the Matterport API to retrieve all mattertags and their associated data for a given model ID and application key.
+ * @param modelId - Id of the model space
+ * @param appKey - Matterport app key
+ * @returns
+ */
+export declare function getTagAndTagData(modelId: string, appKey: string): Promise<IMattertagsResponse>;