architwin 1.0.87 → 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/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/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';
@@ -177,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>

package/lib/atwinui/events.js

@@ -752,6 +752,7 @@ function handleViewTagMessage(payload) {
             const eventId = "at-message-tag-" + payload;
             console.log("eventId: ", eventId);
             yield toggleDisplayPane('at-expand-btn');
+            setActiveMenu('at-expand-btn');
             yield toggleDisplayPane(eventId);
         }
         catch (error) {

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/types.d.ts

@@ -561,6 +561,7 @@ export interface ISharedScreen {
     width?: number;
     height?: number;
     otherData?: any;
+    showExpandButton?: boolean;
 }
 export interface SpaceAvatar {
     id?: number;
@@ -832,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "architwin",
-  "version": "1.0.87",
+  "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*/
@@ -386,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;
 }
@@ -739,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 */
@@ -805,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;
+    }
+
+  }