architwin 1.18.10 → 1.19.1

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, hideTagsFromSpace, renderTagsInSpace, 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";
@@ -347,7 +347,8 @@ function renderTagPaneContent() {
             setTagPaneActive(true);
             setCurrentTagPaneMode(TAG_TYPE.MP);
             resetSelectedTagSortOption();
-            const sortedTagsToDisplay = sortTags(tags, selectedTagSortOption);
+            const mpTags = tags.filter(tag => !tag.tag_type || tag.tag_type === TAG_TYPE.MP);
+            const sortedTagsToDisplay = sortTags(mpTags, selectedTagSortOption);
             renderTags(sortedTagsToDisplay, true);
         }
         else if (!isTagPaneActive) {
@@ -526,6 +527,7 @@ function setupIndividualEventListeners() {
     handlePipeList();
     handleResponsiveChanges();
     handleToggleVisibilityTags();
+    handleImportMTagDisplay();
     handlePreviewModalResize();
 }
 //================ OBJECT EVENT HANDLERS ===============//s
@@ -821,7 +823,7 @@ function handlePlaceTag() {
                             log.info("Last Tag Pushed", currentTag);
                             cancelTagPlacementPrompt.style.display = 'none';
                             isPlacingTag = false;
-                            // clearTagFormDropdown()
+                            setSelectedTag(currentTag);
                         });
                     }
                     handleMobilePlaceTag(true);
@@ -845,7 +847,9 @@ function handlePlaceTag() {
                             const row = renderTagRow(iTag, '');
                             tagContainer.appendChild(row);
                             addClickEventToTagRow(iTag);
-                            yield attachTagMedia({ sdk: _atwin, tag: iTag, attachments: iTag.attachments });
+                            if (iTag.attachments && iTag.attachments.length > 0) {
+                                yield attachTagMedia({ sdk: _atwin, tag: iTag, attachments: iTag.attachments });
+                            }
                             // toggleDisplayPane('at-cancel-tag-form-btn')
                             notyf.success(`${i18n.t('SuccessAddTagToSpace')}`);
                             const tags = getMpTags();
@@ -987,11 +991,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 +1086,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 +1178,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 +1261,7 @@ function handleSaveTag() {
             }
         }
         clearTagFormDropdown();
+        clearSelectedTag();
         iTag = null;
         saveTagBtn.classList.remove('at_disabled');
         setTagFormMode("NONE" /* FORM_MODE.NONE */);
@@ -1571,6 +1618,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);
@@ -3281,37 +3329,35 @@ function handleClearSearchTagName() {
     log.info('handleClearSearchTagName()');
     const searchTagName = document.getElementById('at-clear-search-tag-name');
     if (searchTagName) {
-        searchTagName.addEventListener('click', () => {
+        searchTagName.addEventListener('click', () => __awaiter(this, void 0, void 0, function* () {
             searchClearfield();
             // commented out due to iot Dummy Data
             // const tags = getMpTags()
             const tags = [..._tags];
-            const filteredTags = filterTagList(tags);
             if (selectedCategoryFilterId || selectedSubCategoryFilterId && isTagPaneActive) {
-                const filteredTags = filterTagList(tags);
+                const filteredTags = filterTagList(tags).filter(tag => tag.tag_type === TAG_TYPE.MP);
+                // show filtered tags only
+                yield renderTagsInSpace(filteredTags, true);
                 renderTags(filteredTags);
             }
             else if (tags.length > 0 && isTagPaneActive) {
-                renderTags(tags, true);
+                const filteredMPTags = tags.filter(tag => tag.tag_type === TAG_TYPE.MP);
+                yield renderTagsInSpace(filteredMPTags, true);
+                renderTags(filteredMPTags, true);
             }
             else if (!isTagPaneActive) {
                 const filteredIotTags = filterIotTagList(tags);
+                yield renderTagsInSpace(filteredIotTags, true);
                 renderTags(filteredIotTags);
-                // if (selectedCategoryFilterId || selectedSubCategoryFilterId) {
-                //     const sortedTags = sortTags(filteredTags, {by: 'label', order: 'asc'})
-                //     renderTags(sortedTags)                
-                // } else if (tags.length > 0) {
-                //     const sortedTags = sortTags(tags, {by: 'label', order: 'asc'})
-                //     renderTags(sortedTags,true)
             }
-        });
+        }));
     }
 }
 function handleSearchFromTagListButton() {
     log.info('handleSearchFromTagListButton()');
     const searchTagNameButton = document.getElementById('at-search-tag-button');
     if (searchTagNameButton) {
-        searchTagNameButton.addEventListener('click', () => {
+        searchTagNameButton.addEventListener('click', () => __awaiter(this, void 0, void 0, function* () {
             const tags = getMpTags();
             const tagSearch = getSearchTagTerm();
             if (tagSearch) {
@@ -3321,18 +3367,36 @@ function handleSearchFromTagListButton() {
                 if (foundTag) {
                     if (selectedCategoryFilterId || selectedSubCategoryFilterId && isTagPaneActive) {
                         const filteredTags = filterTagList(foundTag);
+                        const removeTags = tags.filter(tag => !filteredTags.some(ft => ft.id === tag.id) && tag.tag_type === TAG_TYPE.MP);
+                        log.info("removeTags", removeTags);
+                        // remove tags that is not part in the sorted Tags
+                        yield hideTagsFromSpace(removeTags);
+                        // show filtered tags only
+                        yield renderTagsInSpace(filteredTags, true);
                         renderTags(filteredTags);
                     }
                     else if (foundTag.length > 0 && isTagPaneActive) {
+                        const removeTags = tags.filter(tag => !foundTag.some(ft => ft.id === tag.id) && tag.tag_type === TAG_TYPE.MP);
+                        log.info("removeTags", removeTags);
+                        // remove tags that is not part in the sorted Tags
+                        yield hideTagsFromSpace(removeTags);
+                        // show filtered tags only
+                        yield renderTagsInSpace(foundTag, true);
                         renderTags(foundTag, true);
                     }
                     else if (!isTagPaneActive) {
                         const filteredIotTags = filterIotTagList(foundTag);
+                        const removeTags = tags.filter(tag => !filteredIotTags.some(ft => ft.id === tag.id) && tag.tag_type === TAG_TYPE.IOT);
+                        log.info("removeTags", removeTags);
+                        // remove tags that is not part in the sorted Tags
+                        yield hideTagsFromSpace(removeTags);
+                        // show filtered tags only
+                        yield renderTagsInSpace(filteredIotTags, true);
                         renderTags(filteredIotTags);
                     }
                 }
             }
-        });
+        }));
     }
 }
 function handleCustomMapFloorImageUploaded(payload) {
@@ -4096,6 +4160,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/tag.d.ts

@@ -24,6 +24,11 @@ declare function setTagIcon(payload: {
     iconUrl: string;
     color: MpSdk.Color | string;
 }): Promise<void>;
+declare function attachTagMediaById(payload: {
+    sdk: MpSdk;
+    tagId: string;
+    attachmentId: string[];
+}): Promise<void>;
 declare function attachTagMedia(payload: {
     sdk: MpSdk;
     tag: MpSdk.Tag.TagData;
@@ -100,4 +105,4 @@ declare function toggleTagVisibility(payload: {
     sdk: MpSdk;
     visibility: boolean;
 }): void;
-export { renderTag, disposeTag, moveTag, attachTagMedia, detachTagMedia, setTagIcon, editBillboard, editStem, editColor, saveTagDb, deleteTag, getTagColorCodeID, getEmbedlyData, cancelMoveTag, handleTagPlacerCreated, attachSandbox, registerSandbox, toggleTagVisibility };
+export { renderTag, disposeTag, moveTag, attachTagMediaById, attachTagMedia, detachTagMedia, setTagIcon, editBillboard, editStem, editColor, saveTagDb, deleteTag, getTagColorCodeID, getEmbedlyData, cancelMoveTag, handleTagPlacerCreated, attachSandbox, registerSandbox, toggleTagVisibility };

package/lib/tag.js

@@ -125,17 +125,27 @@ function setTagIcon(payload) {
         }
     });
 }
+function attachTagMediaById(payload) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (!payload.attachmentId || payload.attachmentId.length === 0) {
+            log.error('__@ No Attachments IDs');
+            return;
+        }
+        yield payload.sdk.Tag.attach(payload.tagId, ...payload.attachmentId);
+    });
+}
 function attachTagMedia(payload) {
     return __awaiter(this, void 0, void 0, function* () {
         log.info('__@ attachTagContent()', payload);
         // log.info('attachTagContent()', payload)
-        if (!payload.attachments || payload.attachments.length === 0) {
+        const validAttachments = (payload.attachments || []).filter(url => !!url);
+        if (validAttachments.length === 0) {
             log.error('__@ No Attachments');
             return;
         }
         payload.tag.attachments = [];
-        for (let i in payload.attachments) {
-            const [attachmentId] = yield payload.sdk.Tag.registerAttachment(payload.attachments[i]);
+        for (let i in validAttachments) {
+            const [attachmentId] = yield payload.sdk.Tag.registerAttachment(validAttachments[i]);
             log.info("media attachmentId ", attachmentId);
             payload.tag.attachments.push(attachmentId);
         }
@@ -440,7 +450,7 @@ function toggleTagVisibility(payload) {
         docking: payload.visibility,
     });
 }
-export { renderTag, disposeTag, moveTag, attachTagMedia, detachTagMedia, setTagIcon, editBillboard, editStem, editColor, saveTagDb, deleteTag, getTagColorCodeID, getEmbedlyData, cancelMoveTag, handleTagPlacerCreated, attachSandbox, registerSandbox, toggleTagVisibility };
+export { renderTag, disposeTag, moveTag, attachTagMediaById, attachTagMedia, detachTagMedia, setTagIcon, editBillboard, editStem, editColor, saveTagDb, deleteTag, getTagColorCodeID, getEmbedlyData, cancelMoveTag, handleTagPlacerCreated, attachSandbox, registerSandbox, toggleTagVisibility };
 // # -------------------------------------------------------------------------
 // # tag
 // # -------------------------------------------------------------------------

package/lib/types.d.ts

@@ -34,6 +34,8 @@ export interface ITag {
     iot_tag?: IoTTagDetails;
     created_on?: string;
     notion_page_url: string;
+    iconId?: string;
+    fontId?: string;
 }
 export interface IoTTagDetails {
     linked_system?: string;
@@ -71,6 +73,42 @@ export interface IotCategoryType {
         iconBase64: string;
     };
 }
+export interface IMattertagVector3 {
+    x: number;
+    y: number;
+    z: number;
+}
+export interface IMattertagFloor {
+    id: string;
+}
+export interface IMattertag {
+    id: string;
+    floor: IMattertagFloor;
+    created: string;
+    modified: string;
+    enabled: boolean;
+    color: string;
+    icon?: string;
+    keywords: string[];
+    label: string;
+    description: string;
+    media?: string | string[];
+    mediaType?: string;
+    position: IMattertagVector3;
+    anchorPosition: IMattertagVector3;
+    discPosition: IMattertagVector3;
+    stemNormal: IMattertagVector3;
+    stemLength: number;
+    stemEnabled: boolean;
+    stemDirection: IMattertagVector3;
+}
+export interface IMattertagsResponse {
+    data: {
+        model: {
+            mattertags: IMattertag[];
+        };
+    };
+}
 export interface ITagColor {
     name: COLOR;
     rgb: {
@@ -815,7 +853,9 @@ export declare enum SPACE_EVENTS {
     DRAW_PIPE_UNDO = "DRAW_PIPE_UNDO",
     DRAW_PIPE_REDO = "DRAW_PIPE_REDO",
     PIPE_VERTEX_REMOVED = "PIPE_VERTEX_REMOVED",
-    PATH_UPDATED = "PATH_UPDATED"
+    PATH_UPDATED = "PATH_UPDATED",
+    IMPORT_MTAGS = "IMPORT_MTAGS",
+    PROCEED_IMPORT_MTAGS = "PROCEED_IMPORT_MTAGS"
 }
 export declare const enum TAG_COLOR {
     MAROON = "MAROON",

package/lib/types.js

@@ -151,6 +151,8 @@ export var SPACE_EVENTS;
     SPACE_EVENTS["DRAW_PIPE_REDO"] = "DRAW_PIPE_REDO";
     SPACE_EVENTS["PIPE_VERTEX_REMOVED"] = "PIPE_VERTEX_REMOVED";
     SPACE_EVENTS["PATH_UPDATED"] = "PATH_UPDATED";
+    SPACE_EVENTS["IMPORT_MTAGS"] = "IMPORT_MTAGS";
+    SPACE_EVENTS["PROCEED_IMPORT_MTAGS"] = "PROCEED_IMPORT_MTAGS";
 })(SPACE_EVENTS || (SPACE_EVENTS = {}));
 export var MEETING_SIDEBAR;
 (function (MEETING_SIDEBAR) {

package/package.json

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

package/static/utility.css

@@ -720,3 +720,6 @@
   background-color: #222222 !important;
 }
 
+.at_import_matterport_btn{
+  width: calc(100% - 8px);
+}