architwin 1.0.86 → 1.0.88

package/README.md

@@ -311,6 +311,8 @@ Or programmatically using methods defined in this library.
 
 ## Executing methods on specific App Phases
 
+**WARNING:** This feature is deprecated, subscribe using [Space Events](#subscribing-to-space-events) instead
+
 Your application may need to execute certain methods during the initialization of your 3D space. For example, you may want to use`addObjectToSpace()` method to render a model to your 3D space the moment the 3D space becomes interactive. While you can always just invoke the function after the `connectSpace()` method there may be times where this will cause an error as the `connectSpace()` method which is an async method, may have not finished initializing the necessary internal variables that allow other methods to work properly. When you invoke the `connectSpace()` method, the library does some internal validation and then goes to several phases to render your 3D space and make it interactive. These phases are the following:
 
 **ARCHTWIN APP PHASES**
@@ -323,7 +325,7 @@ You can also view the technical diagram of how this work below:
 
 <img src="https://drive.google.com/uc?id=1I_NuuI_PWkRzB0DueCmBCBH-1V_upiOB" width="400" height="300" />
 
-To invoke a function from your application during one of the phases. Simple pass the function name as a parameter in the `connectSpace()` method. Make sure to not add a parenthesis to your function name when you pass it as a parameter to avoid invoking the function prematurely.
+To invoke a function from your application during one of the phases. Simply pass the function name as a parameter in the `connectSpace()` method. Make sure to not add a parenthesis to your function name when you pass it as a parameter to avoid invoking the function prematurely.
 
 *Example:*
 
@@ -1875,6 +1877,20 @@ atwin.setVideoPlayback('play', randomMediaScreen.component.planeElement)
 
 You can use the [transform controls](#transforming-objects) to change the position, scale, and rotation of the media screen using the mouse cursor.
 
+#### Hiding expand/dock buttons of Media Screens
+
+Media screens by default will display a dock button on each corner of the displayed media that allows you to dock the media screen in the 4 corners of your FOV inside a space. To hide these buttons, you may add the following in your config object.
+
+```typescript
+const config = {
+  //other configs
+  mediaScreenConfig: {
+    showExpandButton: false
+  }
+}
+
+```
+
 ### Setting Video Playback in the Space
 
 Setting video playback refers to the act of adjusting various controls associated with the playback of a video in the space. It involves manipulating controls such as pause, play, mute, and unmute to modify the playback behavior according to user's preferences.

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

@@ -45,7 +45,10 @@ i18n
                 "ScreenshotSaved": "Screenshot saved to downloads folder",
                 "SuccessCopyTagLink": "Successfully copied tag link to clipboard",
                 "NoMessages": "No messages",
-                "AddObject": "Add Object"
+                "AddObject": "Add Object",
+                "ConfirmDeleteTag": "Are you sure you want to delete this tag? This action cannot be reversed",
+                "DeleteTag": "Delete Tag",
+                "YesDelete": "Yes, delete"
             }
         },
         ja: {
@@ -85,7 +88,10 @@ i18n
                 "ScreenshotSaved": "スクショをダウンロードフォルダに保存しました",
                 "SuccessCopyTagLink": "タグURLをクリップボードに保存しました",
                 "NoMessages": "メッセージがありません",
-                "AddObject": "追加"
+                "AddObject": "追加",
+                "ConfirmDeleteTag": "この操作は取り消すことができません。このタグを削除しますか？",
+                "DeleteTag": "タグ削除",
+                "YesDelete": "削除"
             }
         }
     },

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

@@ -9,7 +9,8 @@ import { setActiveThemeCard } from "./themePane";
 import { setActiveCard, setActiveLibraryCard, clearActiveCard, clearActiveLibraryCard } from "./card";
 import { renderRecepientOptions, renderTagMessages, createTagMessage, setTagMessagingDetails } from "./tagMessagingPane";
 import { clearTagFormDropdown } from "./tagFormPane";
+import { toggleModal } from "./modal";
 import './i18n';
 declare let actionBar: HTMLElement;
 declare function renderToolbarUI(payload: IToolbarData): void;
-export { actionBar, tagFormMode, selectedTag, 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, getObjectListStatus };
+export { actionBar, tagFormMode, selectedTag, 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, getObjectListStatus, toggleModal };

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

@@ -13,6 +13,7 @@ import { renderThemePane, setActiveThemeCard } from "./themePane";
 import { setActiveCard, setActiveLibraryCard, clearActiveCard, clearActiveLibraryCard } from "./card";
 import { renderRecepientOptions, renderTagMessages, createTagMessage, setTagMessagingDetails } from "./tagMessagingPane";
 import { clearTagFormDropdown } from "./tagFormPane";
+import { renderModal, toggleModal } from "./modal";
 import { getURLParams } from "../../../utils";
 import './i18n';
 import i18n from './i18n';
@@ -71,6 +72,7 @@ function renderToolbarUI(payload) {
     libraryPane = renderLibraryPane();
     tagMessagingPane = renderTagMessagingPane();
     themePane = renderThemePane();
+    renderModal();
     sidebarContainer.appendChild(actionBar);
     sidebarContainer.appendChild(themePane);
     sidebarContainer.appendChild(tagMessagingPane);
@@ -93,4 +95,4 @@ function renderToolbarUI(payload) {
     tagMessagingPane.style.display = 'none';
     themePane.style.display = 'none';
 }
-export { actionBar, tagFormMode, selectedTag, 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, getObjectListStatus };
+export { actionBar, tagFormMode, selectedTag, 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, getObjectListStatus, toggleModal };

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

@@ -2,5 +2,5 @@ export declare let activeMenu: HTMLElement;
 export declare let isObjectListEnabled: boolean;
 export declare function renderMenuBar(iFrame: HTMLIFrameElement): HTMLDivElement;
 export declare function setActiveMenu(id: string): void;
-export declare function clearActiveMenu(): void;
+export declare function clearActiveMenu(id: string): void;
 export declare function getObjectListStatus(): boolean;

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

@@ -42,23 +42,67 @@ export function renderMenuBar(iFrame) {
     return menuBarElement;
 }
 export function setActiveMenu(id) {
+    console.log("setActiveMenu id: ", id);
     const target = document.getElementById(id);
     if (!target) {
         console.error("Target card does not exist in DOM");
         return;
     }
-    if (activeMenu) {
-        activeMenu.classList.remove('at_sidebar_button_icon_active');
-    }
     const parent = target.parentElement;
-    activeMenu = parent;
-    parent.classList.add('at_sidebar_button_icon_active');
+    // clear active menu
+    clearActiveMenu(id);
+    switch (id) {
+        case 'at-expand-btn':
+        case 'at-object-list-btn':
+        case 'at-minimap-btn':
+        case 'at-theme-picker-btn':
+            if (parent.classList.contains('at_sidebar_button_icon_active')) {
+                // remove
+                console.log("removing active...");
+                parent.classList.remove('at_sidebar_button_icon_active');
+            }
+            else {
+                // activate
+                console.log("setting active...");
+                parent.classList.add('at_sidebar_button_icon_active');
+            }
+            break;
+        default:
+            parent.classList.remove('at_sidebar_button_icon_active');
+            break;
+    }
+    // set active menu except for minimap
+    if (id != 'at-minimap-btn') {
+        activeMenu = parent;
+    }
+    // old code
+    // if (activeMenu) {
+    //     activeMenu.classList.remove('at_sidebar_button_icon_active')
+    // }
+    // const parent = target.parentElement
+    // activeMenu = parent
+    // parent.classList.add('at_sidebar_button_icon_active')
 }
-export function clearActiveMenu() {
-    if (activeMenu) {
-        activeMenu.classList.remove('at_sidebar_button_icon_active');
-        activeMenu = undefined;
+export function clearActiveMenu(id) {
+    var _a, _b;
+    console.log("clearActiveMenu: ", id);
+    if (id != 'at-minimap-btn' && activeMenu) {
+        // get child id
+        const activeChildId = (_b = (_a = activeMenu.querySelector('.mdi')) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : undefined;
+        console.log("activeChildId: ", activeChildId);
+        // check if active menu and target menu id are the same
+        // if true do not set inactive otherwise, remove
+        if (id != activeChildId) {
+            console.log("clearActiveMenu removing active...");
+            activeMenu.classList.remove('at_sidebar_button_icon_active');
+            activeMenu = undefined;
+        }
     }
+    // old code
+    // if (activeMenu) {
+    //     activeMenu.classList.remove('at_sidebar_button_icon_active')
+    //     activeMenu = undefined
+    // }
 }
 export function getObjectListStatus() {
     return isObjectListEnabled;

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

@@ -0,0 +1,4 @@
+export declare let activeModal: boolean;
+export declare function renderModal(): void;
+export declare function toggleModal(visible?: boolean): void;
+export declare function setModalAction(label: string, callback: Function): Promise<void>;

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

@@ -0,0 +1,68 @@
+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 i18n from './i18n';
+export let activeModal = false;
+export function renderModal() {
+    const element = document.createElement('div');
+    element.setAttribute('id', 'at-modal-overlay');
+    element.setAttribute('data-cy', 'at-modal-overlay');
+    element.innerHTML = `
+        <div class="at_modal">
+            <div>
+                <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">${i18n.t('DeleteTag')}</h2>
+                <p class="at_modal-content-subheading" id="at-modal-content-subheading">
+                    ${i18n.t('ConfirmDeleteTag')}
+                </p>
+                <div>
+                    <button class="at_close-button at_modal-accept-button">${i18n.t('YesDelete')}</button>
+                </div>
+            </div>
+        </div>
+    `;
+    document.body.appendChild(element);
+    const modalOverlay = document.getElementById('at-modal-overlay');
+    const modalClose = document.querySelector('.at_modal-close-button');
+    if (modalClose) {
+        modalClose.addEventListener('click', (event) => {
+            modalOverlay.style.display = 'none';
+        });
+    }
+}
+export function toggleModal(visible = true) {
+    const modalOverlay = document.getElementById('at-modal-overlay');
+    if (!modalOverlay) {
+        console.error("Modal overly is undefined");
+        return;
+    }
+    if (visible) {
+        modalOverlay.style.display = 'block';
+        return;
+    }
+    modalOverlay.style.display = 'none';
+    return;
+}
+export function setModalAction(label, callback) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const modalAcceptBtn = document.querySelector('.at_modal-accept-button');
+        if (modalAcceptBtn) {
+            if (label) {
+                modalAcceptBtn.textContent = label;
+            }
+            if (callback) {
+                modalAcceptBtn.onclick = () => __awaiter(this, void 0, void 0, function* () {
+                    yield callback();
+                });
+            }
+        }
+    });
+}

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

@@ -0,0 +1,2 @@
+export declare let activeModelControlPane: boolean;
+export declare function renderModelControlPane(transformType?: string): void;

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

@@ -0,0 +1,22 @@
+export let activeModelControlPane = false;
+export function renderModelControlPane(transformType = 'Translate') {
+    const element = document.createElement('div');
+    element.classList.add('at_container');
+    element.setAttribute('id', 'at-model-control-pane');
+    element.setAttribute('data-cy', 'at-model-control-pane');
+    element.innerHTML = `
+        <div class="at_flex at_flex_column">
+            <div class="at_flex at_space_between">
+                <span>${transformType}</span>
+                <span class="mdi mdi-close"></span>
+            </div>
+            <div class="at_form_container">
+                <div class="at_number_field">
+                    <span class="at_bolder">X</span>
+                    <input type="number" class="at_rounded_input"/>
+                    <span class="at_bolder">m</span>
+                </div>
+            </div>
+        </div>
+    `;
+}

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

@@ -12,6 +12,7 @@ import { batchAddEventListenerByClassName, toggleDisplayPane } from "../../event
 import { convertToCssRgb } from "../../../utils";
 import { gotoTag, disposeTag, dispatchSpaceEvent, _tags, getUserAssignedCategories } from "../../../architwin";
 import { initFormData, toggleDropdown } from "./tagFormPane";
+import { toggleModal, setModalAction } from "./modal";
 import { Notyf } from 'notyf';
 import { _tagCategories } from "../../../architwin";
 import i18n from './i18n';
@@ -164,9 +165,12 @@ export function renderTags(tags, showOwnTagsOnly = false) {
         //@ts-ignore
         const tag = document.getElementById(event.target.id);
         const tagId = tag.getAttribute('tag-id');
+        console.log("tagId:: ", tagId);
         //@ts-ignore
         dispatchSpaceEvent(SPACE_EVENTS.TAG_MESSAGE_OPENED, tagId);
         //@ts-ignore
+        console.log("event.target.id: ", event.target.id);
+        //@ts-ignore
         yield toggleDisplayPane(event.target.id);
     }));
     batchAddEventListenerByClassName('at_delete_tag_btn', (event) => __awaiter(this, void 0, void 0, function* () {
@@ -174,20 +178,25 @@ export function renderTags(tags, showOwnTagsOnly = false) {
         //@ts-ignore
         const tag = document.getElementById(event.target.id);
         if (tag) {
-            const tagId = tag.getAttribute('tag-id');
-            if (tagId && tagId !== null) {
-                console.log("TAG DELETE", tagId, _tags);
-                const targetTag = _tags.find(tag => tag.json_data.id.toString() == tagId);
-                yield disposeTag({ tagId: tagId });
-                const tagRow = document.getElementById(`at-tag-row-${tagId}`);
-                tagRow.remove();
-                const payload = { tag: targetTag };
-                dispatchSpaceEvent(SPACE_EVENTS.TAG_DISPOSED, payload);
-                notify.success("Successfully deleted tag");
-            }
-            else {
-                notify.error("Tag id not found!");
-            }
+            toggleModal();
+            setModalAction('Yes, delete', () => __awaiter(this, void 0, void 0, function* () {
+                const tagId = tag.getAttribute('tag-id');
+                if (tagId && tagId !== null) {
+                    console.log("TAG DELETE", tagId, _tags);
+                    const targetTag = _tags.find(tag => tag.json_data.id.toString() == tagId);
+                    yield disposeTag({ tagId: tagId });
+                    const tagRow = document.getElementById(`at-tag-row-${tagId}`);
+                    tagRow.remove();
+                    const payload = { tag: targetTag };
+                    dispatchSpaceEvent(SPACE_EVENTS.TAG_DISPOSED, payload);
+                    toggleModal(false);
+                    notify.success("Successfully deleted tag");
+                }
+                else {
+                    toggleModal(false);
+                    notify.error("Tag id not found!");
+                }
+            }));
         }
     }));
     batchAddEventListenerByClassName('at_tag_row', (event) => __awaiter(this, void 0, void 0, function* () {

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

@@ -20,7 +20,7 @@ export function renderTagMessagingPane() {
     element.innerHTML = `
         <div class="at_panel_header">
             <div class="at_button_row at_justify_between">
-                <div>
+                <div class="at_grouped_center">
                     <div class="at_colored-indicator" id="at-tag-color-messaging" style="background-color:rgb(0,0,0)"></div>
                     <span id='at-tag-name-messaging'>${i18n.t('TagName')}</span>
                 </div>
@@ -261,7 +261,7 @@ export function setTagMessagingDetails(tagId) {
             console.error("g does not exist in DOM");
             return;
         }
-        if (tagTitle.textContent === 'Tag Name') {
+        if (tagTitle.textContent === i18n.t('TagName')) {
             //@ts-ignore
             const targetTag = _tags.find(tag => tag.id === tagId);
             if (!targetTag) {

package/lib/atwinui/events.js

@@ -637,9 +637,11 @@ function handleToggleDropdown() {
     }
 }
 function setupSpaceEventSubscriptions() {
+    console.log("setupSpaceEventSubscriptions");
     subscribeSpaceEvent(SPACE_EVENTS.CLICK, handleMouseClickObject);
     subscribeSpaceEvent(SPACE_EVENTS.TAG_MESSAGE_RETRIEVED, handleRetrieveTagMessage);
     subscribeSpaceEvent(SPACE_EVENTS.TAG_LINK_GENERATED, handleCopyTagLink);
+    subscribeSpaceEvent(SPACE_EVENTS.VIEW_TAG_MESSAGE, handleViewTagMessage);
 }
 function handleMouseClickObject(object) {
     if (object) {
@@ -741,6 +743,23 @@ function handleCopyTagLink(link) {
     navigator.clipboard.writeText(link);
     notyf.success(`${i18n.t('SuccessCopyTagLink')}`);
 }
+function handleViewTagMessage(payload) {
+    return __awaiter(this, void 0, void 0, function* () {
+        console.log("handleViewTagMessage()", payload);
+        try {
+            dispatchSpaceEvent(SPACE_EVENTS.TAG_MESSAGE_OPENED, payload);
+            //@ts-ignore
+            const eventId = "at-message-tag-" + payload;
+            console.log("eventId: ", eventId);
+            yield toggleDisplayPane('at-expand-btn');
+            setActiveMenu('at-expand-btn');
+            yield toggleDisplayPane(eventId);
+        }
+        catch (error) {
+            console.error("Error handleViewTagMessage: ", error);
+        }
+    });
+}
 export { 
 //state
 activeToolbarItem, activeActionItem, 

package/lib/atwinui/index.js

@@ -10,6 +10,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { batchAddEventListenerByClassName, batchAddEventListenerById, setActiveToolbarItem, toggleDisplayPane, toggleActionBar, setupIndividualEventListeners, setupSpaceEventSubscriptions, handleShowMinimap, handleRenderMeetingUI } from './events';
 import '../../static/atwinui.css';
 import { renderToolbarUI, setActiveMenu, setActiveActionBtn, setActiveThemeCard } from './components/toolbar';
+import { SPACE_EVENTS } from '../types';
+import { dispatchSpaceEvent } from '../architwin';
 // let menuBar:HTMLElement,
 //     actionBar:HTMLElement,
 //     objectListPane:HTMLElement,
@@ -37,12 +39,16 @@ function initToolbarUI(payload) {
     renderToolbarUI({ objects: payload.objects });
     setupIndividualEventListeners();
     setupSpaceEventSubscriptions();
+    dispatchSpaceEvent(SPACE_EVENTS.TOOLBAR_LOADED);
+    // hide minimap as default
     batchAddEventListenerByClassName('at_sidebar_button_icon', (event) => __awaiter(this, void 0, void 0, function* () {
         console.log('Event', event);
         //@ts-ignore
         if (event.target.id === 'at-minimap-btn') {
             handleShowMinimap();
             //@ts-ignore
+            setActiveMenu(event.target.id);
+            //@ts-ignore
         }
         else if (event.target.id === 'at-videocall-btn') {
             handleRenderMeetingUI();

package/lib/loaders/planeGeometry2.js

@@ -26,7 +26,7 @@ class PlaneImage {
             type: '',
             url: null,
             visible: true,
-            isFirstLoad: true,
+            isFirstLoad: true
         };
         this.events = {
             'INTERACTION.CLICK': true,
@@ -83,7 +83,16 @@ class PlaneImage {
             side: THREE.DoubleSide,
         });
         this.mesh = new THREE.Mesh(geometry, material);
-        _screenPositions.forEach(i => createExpandModel(this.context, this.mesh, i, this.expandBtnPositions));
+        if (_mpConfig && _mpConfig.mediaScreenConfig && _mpConfig.mediaScreenConfig.showExpandButton !== undefined) {
+            if (_mpConfig.mediaScreenConfig.showExpandButton) {
+                console.log("Mediascreen expand button is enabled");
+                _screenPositions.forEach(i => createExpandModel(this.context, this.mesh, i, this.expandBtnPositions));
+            }
+        }
+        else {
+            console.log("Mediascreen expand button is enabled");
+            _screenPositions.forEach(i => createExpandModel(this.context, this.mesh, i, this.expandBtnPositions));
+        }
         createDismissExpandModel(this.context, this.mesh, this.dismissExpandBtnPosition);
         this.renderFitScreenModel();
         this.mesh.name = this.inputs.name;
@@ -272,8 +281,16 @@ class PlaneVideo {
             this.playButtonModel.visible = true;
             this.pauseButtonModel.visible = false;
         });
-        _screenPositions.forEach(i => createExpandModel(this.context, this.mesh, i, this.expandBtnPositions));
-        createDismissExpandModel(this.context, this.mesh, this.dismissExpandBtnPosition);
+        if (_mpConfig && _mpConfig.mediaScreenConfig && _mpConfig.mediaScreenConfig.showExpandButton !== undefined) {
+            if (_mpConfig.mediaScreenConfig.showExpandButton) {
+                _screenPositions.forEach(i => createExpandModel(this.context, this.mesh, i, this.expandBtnPositions));
+                createDismissExpandModel(this.context, this.mesh, this.dismissExpandBtnPosition);
+            }
+        }
+        else {
+            _screenPositions.forEach(i => createExpandModel(this.context, this.mesh, i, this.expandBtnPositions));
+            createDismissExpandModel(this.context, this.mesh, this.dismissExpandBtnPosition);
+        }
         this.mesh.name = this.inputs.name;
         // add mesh to scene
         this.outputs.objectRoot = this.mesh;

package/lib/minimap.js

@@ -130,6 +130,15 @@ function setMap(mpSdk, appKey, mapId) {
             console.warn("Empty or invalid map position passed, defaulting to topRight");
             _mapBox.classList.add('topRight');
         }
+        // show map config
+        if (_mpConfig.mapConfig.isShow) {
+            console.log("Showing minimap at default..");
+            _mapContainer.style.display = 'block';
+        }
+        else {
+            console.log("Hiding minimap at default..");
+            _mapContainer.style.display = 'none';
+        }
         //If there is a fixed width of the map and we do not want the hover to expand effect. We update the CSS variable
         if (_mpConfig.mapConfig.fixedSized && _mpConfig.mapConfig.fixedSized.width) {
             document.documentElement.style.setProperty("--map-hover-width", `${_mpConfig.mapConfig.fixedSized.width}px`);

package/lib/types.d.ts

@@ -133,6 +133,7 @@ export interface IMapConfig {
         opacity: number;
     };
     zIndex?: number;
+    isShow?: boolean;
 }
 export interface ISweep {
     alignmentType: MpSdk.Sweep.Alignment;
@@ -560,6 +561,7 @@ export interface ISharedScreen {
     width?: number;
     height?: number;
     otherData?: any;
+    showExpandButton?: boolean;
 }
 export interface SpaceAvatar {
     id?: number;
@@ -602,7 +604,9 @@ export declare enum SPACE_EVENTS {
     TAG_RECEPIENT_CHANGED = "TAG_RECEPIENT_CHANGED",
     TAG_LINK_COPIED = "TAG_LINK_COPIED",
     TAG_LINK_GENERATED = "TAG_LINK_GENERATED",
-    SET_TAG_ICON = "SET_TAG_ICON"
+    SET_TAG_ICON = "SET_TAG_ICON",
+    VIEW_TAG_MESSAGE = "VIEW_TAG_MESSAGE",
+    TOOLBAR_LOADED = "TOOLBAR_LOADED"
 }
 export declare const enum TAG_COLOR {
     MAROON = "MAROON",
@@ -829,6 +833,12 @@ export interface TagMessage {
     created_on?: any;
     modified_on?: any;
 }
+export interface ModalContent {
+    title: string;
+    subtitle: string | undefined;
+    content: HTMLElement | undefined;
+    action: HTMLElement | undefined;
+}
 export declare const enum IO_PARTICIPANT_COLORS {
     GREEN = "GREEN",
     BLUE = "BLUE",

package/lib/types.js

@@ -39,6 +39,8 @@ export var SPACE_EVENTS;
     SPACE_EVENTS["TAG_LINK_COPIED"] = "TAG_LINK_COPIED";
     SPACE_EVENTS["TAG_LINK_GENERATED"] = "TAG_LINK_GENERATED";
     SPACE_EVENTS["SET_TAG_ICON"] = "SET_TAG_ICON";
+    SPACE_EVENTS["VIEW_TAG_MESSAGE"] = "VIEW_TAG_MESSAGE";
+    SPACE_EVENTS["TOOLBAR_LOADED"] = "TOOLBAR_LOADED";
 })(SPACE_EVENTS || (SPACE_EVENTS = {}));
 export var MEETING_SIDEBAR;
 (function (MEETING_SIDEBAR) {

package/package.json

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

package/static/atwinui.css

@@ -257,14 +257,20 @@
 .at_panel_header {
     text-align: right;
     font-size: larger;
-    width: 100%;
+    /* width: 100%; */
     color: var(--text-color-light);
-    padding: .4em .2em;
+    padding: .0em .2em;
     border-bottom: solid 1px white;
     margin: .2em;
     max-height: 2.5em;
 }
 
+.at_grouped_center {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
 .at_scrollable_container table {
     width: 100%;
 }
@@ -296,6 +302,7 @@
     border-radius: 50%;
     border: solid black 1px;
     display: inline-block;
+    margin-right: 0.5em;
 }
 
 .at_table_button_row {
@@ -305,6 +312,7 @@
     justify-content: space-between;
     align-items: auto;
     align-content: start;
+    margin-right: 0.5em;
 }
 
 /*Form Classes*/
@@ -326,6 +334,21 @@
     gap: 6px;
 }
 
+.at_number_field {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 6em;
+    max-width: 8em;
+}
+
+.at_rounded_input {
+    border-radius: var(--container-border-radius);
+    padding: 16px 8px;
+    background-color: var(--bg-accent);
+    color:  var(--text-color-light);
+}
+
 .at_flex {
     display: flex;
 }
@@ -371,8 +394,9 @@
     border: 0;
     font-weight: bolder;
     color: white;
-    padding: 8px 6px;
-    margin-top: 4px;
+    padding: /*8px*/ 0px 6px;
+    /* margin-top: 4px; */
+    margin-bottom: 2px;
     border-radius: var(--border-radius);
     border-bottom: solid white 2px;
 }
@@ -724,7 +748,7 @@
   .at_chat_bubble {
     display: flex;
     max-width: 70%; 
-    margin: 10px;
+    margin: 2px 10px 10px 10px;
     padding: 10px;
     border-radius: 15px;
     word-wrap: break-word; /* Wrap long words */
@@ -790,4 +814,108 @@
   .at_send_chat_button:hover {
     background-color: var(--bg-accent);
     color: var(--text-color-light);
-  }
+  }
+
+  /* MODAL CLASSES */
+
+  #at-modal-overlay {
+    display: none; 
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.8);
+    animation: slide-down 0.3s ease;
+    animation-fill-mode: forwards;
+    transform: translateY(-100%);
+  }
+
+    @keyframes slide-down {
+    from {
+        transform: translateY(-100%);
+    }
+    to {
+        transform: translateY(0);
+    }
+    }
+
+  .at_modal { 
+    max-width: 480px;
+    height: 260px;
+    max-height: 300px;
+    margin: 200px auto;
+    background-color: #ffff;
+    border-radius: 5px;
+    padding: 0rem 1rem;
+    animation:scale-up-center .4s cubic-bezier(.39,.575,.565,1.000) both
+  }
+
+  @keyframes scale-up-center {
+    0% {
+      transform: scale(.5)
+    }
+    100% {
+      transform: scale(1)
+    }
+  } 
+
+  .at_close-icon {
+   font-size: 2rem;
+   text-align: right;
+   cursor: pointer;
+}
+
+.at_modal-content {
+   text-align: center;
+   padding-top: 10px;
+}
+
+.at_modal-content-heading {
+    font-size: 2rem;
+    font-weight: bolder;
+    margin-top: 0;
+}
+
+.at_modal-content-subheading {
+    font-size: 1.2rem;
+    line-height: 1.5;
+    padding: 8px;
+}
+
+.at_close-button,
+.at_open-modal-btn {
+    background-color: #d51a4c;
+    color: #ffff;
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 1.2rem;
+    padding: 8px 1rem;
+    margin-top: 1rem;
+    outline: none;
+    border: none;
+    text-transform: uppercase;
+    font-weight: 600;
+  }
+
+  .at_close-button:hover {
+    background-color: #c73259;
+    outline: #fff;
+  }
+
+  .at_open-modal-btn:hover,
+  .at_open-modal-btn:focus{
+    background-color: #ffff;
+    color: #4E56EE;
+    border: 1px solid #4E56EE;
+  }
+
+  @media screen and (max-width: 540px) { 
+
+    .at_modal { 
+      max-width: 300px;
+      height: 320px;
+      padding: 0rem 1rem;
+    }
+
+  } 

package/static/utility.css

@@ -169,4 +169,8 @@ width: 100vw;
   .at_disabled {
     pointer-events: none;
     opacity: 0.6;
+  }
+
+  .at_bolder {
+    font-weight: bolder;
   }