architwin 1.12.5 → 1.13.0

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

@@ -0,0 +1,273 @@
+import { _space, dispatchSpaceEvent } from '../../../architwin';
+import { SPACE_EVENTS } from '../../../types';
+import i18n from './i18n';
+let _currentUser;
+let _screenShareUsers = [];
+let _screenShareUser;
+let _screenShareSessionUsers;
+let _screenShareSessionUser;
+let _screenShareSession;
+let _screenShareUsersSortSettings = { onlineFirst: true };
+let _onDisplayComponent;
+export function renderUsersPane() {
+    const element = document.createElement('div');
+    element.setAttribute('id', 'at-users-pane');
+    element.style.setProperty('width', '400px');
+    element.classList.add('at_container');
+    element.innerHTML = `
+        <div id="at-users-pane" class="at_flex at_flex_column">
+            <div id="at-users-pane-content" class="at_form_container">
+                <div class="at_flex at_justify_start">
+                    <span class="at_bolder at_text_base">${i18n.t('Users')}</span>
+                </div>
+                <div class="at_disable_hover_users_list at_scrollable_container at_h-min-45">
+                    <table id="at-user-list-container">
+                    </table>
+                </div>
+            </div>
+        </div>
+    `;
+    return element;
+}
+export function renderUsersList(users) {
+    _onDisplayComponent = 'USER_LIST';
+    _screenShareUsers = users;
+    const usersContainer = document.getElementById("at-user-list-container");
+    if (!usersContainer) {
+        console.error("Tag container does not exist in DOM");
+        return;
+    }
+    if (users.length <= 0) {
+        console.log("No tags to load");
+        usersContainer.innerHTML = ``;
+        return;
+    }
+    usersContainer.innerHTML = '';
+    users.forEach(user => {
+        const row = user.onlineStatus !== 'offline' ? renderOnlineUserRow(user) : renderOfflineUserRow(user);
+        usersContainer.appendChild(row);
+    });
+    handleClickEventUserRow();
+    sortUsersRowByOnlineState(true);
+}
+export function renderOnlineUserRow(user) {
+    const element = document.createElement("tr");
+    element.setAttribute('id', `at-user-row-${user.id}`);
+    element.dataset.id = user.id;
+    element.classList.add(...['at_online_user_row', 'at_flex', 'at_items_center', 'at_justify_between']);
+    const iconOrSharingText = user.onlineStatus === 'in_session'
+        ? `
+        <div class="at_flex at_items_center at_justify_center">
+            <p>Now Sharing</p>
+        </div>    
+    `
+        : `
+        <div class="at_user_screen_sharing_state at_flex at_items_center at_justify_center">
+            <div class="mdi mdi-monitor-share"></div>
+        </div>
+    `;
+    element.innerHTML = `
+        <td id="at_user_row_${user.id}">
+            <div class="at_flex at_flex_row at_items_center">
+                <div class="at_users_online_indicator"></div>
+                <span class="at_no_hover_text_online_user at_text_base">${user.name}</span>
+            </div>
+        </td>
+        <td>
+            ${iconOrSharingText}
+        </td>
+    `;
+    return element;
+}
+export function renderOfflineUserRow(user) {
+    const element = document.createElement("tr");
+    element.setAttribute('id', `at-user-row-${user.id}`);
+    element.dataset.id = user.id;
+    element.classList.add(...['at_offline_user_row', 'at_flex', 'at_items_center', 'at_justify_between']);
+    element.innerHTML = `
+        <td id="at_user_row_${user.id}">
+            <div class="at_flex at_flex_row at_items_center">
+                <div class="at_users_ofline_indicator"></div>
+                <span class="at_no_hover_text_offline_user at_text_base at_offline_user_name_text">${user.name}</span>
+            </div>
+        </td>
+    `;
+    return element;
+}
+export function sortUsersRowByOnlineState(onlineFirst = _screenShareUsersSortSettings.onlineFirst || true) {
+    _screenShareUsersSortSettings = { onlineFirst };
+    const table = document.getElementById('at-user-list-container');
+    const rows = Array.from(table.querySelectorAll('tr'));
+    if (onlineFirst) {
+        rows.sort((a, b) => {
+            const aClass = a.classList.contains('at_online_user_row');
+            const bClass = b.classList.contains('at_online_user_row');
+            return Number(bClass) - Number(aClass);
+        });
+        table.append(...rows);
+    }
+}
+export function handleClickEventUserRow() {
+    const table = document.getElementById('at-user-list-container');
+    if (table) {
+        table.addEventListener('click', (event) => {
+            const target = event.target;
+            const row = target.closest('tr');
+            if (row && table.contains(row)) {
+                const id = row.dataset.id;
+                const user = _screenShareUsers.find(u => u.id === id);
+                _screenShareUser = user;
+                if (user.onlineStatus === 'offline')
+                    return;
+                if (user.onlineStatus === 'in_session') {
+                    const usersPaneContent = document.getElementById('at-users-pane-content');
+                    usersPaneContent.innerHTML = '';
+                    const sessionUser = {
+                        id: user.id,
+                        name: user.name,
+                        role: 'guest',
+                        session: _screenShareSession
+                    };
+                    renderSharingSpaceDetail(sessionUser);
+                }
+                else {
+                    const nowEpochSeconds = Math.floor(Date.now() / 1000);
+                    const screenShareInvitation = {
+                        user: user,
+                        requestBy: _currentUser,
+                        requestedAt: nowEpochSeconds,
+                        status: 'pending'
+                    };
+                    dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_REQUEST, screenShareInvitation);
+                    // renderScreenShareRequestModal(screenShareInvitation) // moved it to front end
+                }
+            }
+        });
+    }
+}
+export function renderSharingSpaceDetail(user) {
+    var _a;
+    _onDisplayComponent = 'SPACE_SHARING_DETAILS';
+    _screenShareSessionUser = user;
+    const usersPaneContent = document.getElementById('at-users-pane-content');
+    const element = document.createElement('div');
+    element.setAttribute('id', 'at-sharing-space-details');
+    element.classList.add('at_form_container');
+    element.innerHTML = `
+        <div class="at_flex at_justify_start">
+            <span class="at_bolder at_text_base at_capitalize">${i18n.t('Sharing Space')}</span>
+        </div>
+        <div class="at_flex at_flex_column at_gap_half_rem">
+            <div class="at_screen_share_guest_card at_flex at_flex_row at_justify_between at_items_center">
+                <div class="at_flex at_flex_column at_justify_start">
+                    <p class="at_bolder at_text_base">${user.name}</p>
+                    <span class="at_subtitle_text">Your are sharing ${(_a = _space === null || _space === void 0 ? void 0 : _space.name) !== null && _a !== void 0 ? _a : 'test'} to this person</span>
+                </div>
+                <div class="at_users_online_indicator"></div>
+            </div>
+            <div class="at_bolder at_text_base">Pointer</div>
+            <div class="at_flex at_flex_column at_justify_start">
+                <div class="at_screen_share_pointer_choices">
+                    <select id="at_select_screen_share_pointer" name="at_screen_share_pointer">
+                    <option>${i18n.t('Off')}</option>
+                    <option>${i18n.t('On')}</option>
+                    </select>
+                </div>
+            </div>
+            <div class="at_flex at_flex_column at_justify_center at_items_center">
+                <div id="at-back-user-list-link" class="at_back_user_list_link">
+                    <span class="mdi mdi-arrow-left"></span>
+                    <p> ${i18n.t('Back to user list')}</p>
+                </div>
+                <button type="button" id="at-screen-share-end-session-btn" class="at_screen_share_end_session_btn">
+                    ${i18n.t('End Session')}
+                </button>
+            </div>
+        </div>
+    `;
+    usersPaneContent.appendChild(element);
+    handleClickEventBackToUserListLink();
+    handleInputEventSelectPointerSettings();
+    handleClickEventEndSessionBtn();
+}
+export function handleClickEventBackToUserListLink() {
+    const link = document.getElementById('at-back-user-list-link');
+    if (link) {
+        link.addEventListener('click', () => {
+            const usersPaneContent = document.getElementById('at-users-pane-content');
+            usersPaneContent.innerHTML = '';
+            usersPaneContent.classList.add('at_form_container');
+            usersPaneContent.innerHTML = `
+                <div class="at_flex at_justify_start">
+                    <span class="at_bolder at_text_base">${i18n.t('Users')}</span>
+                </div>
+                <div class="at_disable_hover_users_list at_scrollable_container at_h-min-45">
+                    <table id="at-user-list-container">
+                    </table>
+                </div>
+            `;
+            renderUsersList(_screenShareUsers);
+        });
+    }
+}
+export function renderScreenShareRequestModal(request) {
+    var _a;
+    _onDisplayComponent = 'SCREEN_SHARE_REQUEST_MODAL';
+    const element = document.createElement('dialog');
+    element.setAttribute('id', 'at-screen-share-request-modal');
+    element.classList.add('at_screen_share_request_modal');
+    element.innerHTML = `
+        <div class="at_screen_share_request_modal_content at_flex at_flex_column at_justify_center at_items_center">
+            <div class="at_screen_share_icon mdi mdi-monitor-multiple"></div>
+            <h1 class="at_screen_share_request_message">${i18n.t('Waiting for remote screen share confirmation')}</h1>
+            <p class="at_screen_share_request_sub_message"> ${i18n.t('You are requesting to remotely share your space to')} <strong>${request.user.name}</strong></p>
+            <button type="button" id="at-screen-share-request-btn"  class="at_screen_share_cancel_request_btn">${i18n.t('Cancel Request')}</button>
+        </div>
+    `;
+    // disabled modal dismiss via Esc key
+    function blockEscapeKey(e) {
+        if (e.key === 'Escape' && element.open) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }
+    element.addEventListener('keydown', blockEscapeKey);
+    element.addEventListener('cancel', (event) => {
+        event.preventDefault();
+    });
+    (_a = element.querySelector('#at-screen-share-request-btn')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
+        const cancelRequest = Object.assign(Object.assign({}, request), { status: 'canceled' });
+        dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_CANCEL_REQUEST, cancelRequest);
+        element.close();
+        element.remove();
+        _onDisplayComponent = 'USER_LIST';
+    });
+    document.body.appendChild(element);
+    element.showModal();
+}
+export function handleInputEventSelectPointerSettings() {
+    const select = document.getElementById('at_select_screen_share_pointer');
+    if (select) {
+        select.addEventListener('input', (event) => {
+            const target = event.target;
+            _screenShareSession = Object.assign(Object.assign({}, _screenShareSession), { isPointerEnabled: target.value === 'On' });
+            dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_POINTER_UPDATE, _screenShareSession);
+        });
+    }
+}
+export function handleClickEventEndSessionBtn() {
+    const button = document.getElementById('at-screen-share-end-session-btn');
+    if (button) {
+        button.addEventListener('click', () => {
+            dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_END_SESSION, handleScreenShareEndSessionEvent);
+        });
+    }
+}
+export function handleScreenShareUsersUpdated(users) {
+    renderUsersList(users);
+}
+export function handleScreenShareEndSessionEvent() {
+    _screenShareSessionUsers = [];
+    _screenShareSession = {};
+    renderUsersList(_screenShareUsers);
+}

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

@@ -0,0 +1,7 @@
+import { ISpaceUser } from "../../../types";
+export declare function renderViewingRemoteSpace(): HTMLElement;
+/**
+ * Render the viewing remote space panel for the user sharing their screen.
+ * @param user The user who is currently sharing their screen
+ */
+export declare function renderRemoteSpaceViewing(user: ISpaceUser): void;

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

@@ -0,0 +1,77 @@
+import { _currentSpace } from "../../../architwin";
+import i18n from './i18n';
+export function renderViewingRemoteSpace() {
+    const element = document.createElement('div');
+    element.classList.add('at_container', 'at_w-14', 'at_h-full', 'at_p-5');
+    element.setAttribute('id', 'at-viewing-remote-space-pane');
+    element.setAttribute('data-cy', 'at-viewing-remote-space-pane');
+    element.innerHTML = `
+        <div class="at_panel_header">
+            <span>${i18n.t('Viewing Remote Space')}</span>
+        </div>
+
+        <div id="at-sharing-user-container" >
+        </div>
+
+        <div class="at_button_row at_justify_center">
+            <div 
+                class="at_button at_ghost at_bg_red_600 at_w-full" 
+                id="at-user-leave-session-btn" 
+                data-cy="at-user-leave-session-btn">
+                ${i18n.t('Leave Session')}
+            </div>
+        </div>
+    `;
+    return element;
+}
+/**
+ * Render the viewing remote space panel for the user sharing their screen.
+ * @param user The user who is currently sharing their screen
+ */
+export function renderRemoteSpaceViewing(user) {
+    var _a;
+    const container = document.getElementById('at-sharing-user-container');
+    const maincontainer = document.getElementById('at-viewing-remote-space-pane');
+    if (!container && !maincontainer)
+        return;
+    maincontainer.style.display = 'block';
+    container.innerHTML = '';
+    // === Main Card ===
+    const card = document.createElement('div');
+    card.className = 'at_card at_p-5 at_mb_5 at_mt_4 at_bg_black at_opacity_75 at_rounded';
+    const cardContent = document.createElement('div');
+    cardContent.className = 'at_flex at_items_center at_justify_between';
+    // Left: User info
+    const infoWrapper = document.createElement('div');
+    const userNameEl = document.createElement('strong');
+    userNameEl.textContent = ((_a = user.name) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || 'ADMIN';
+    userNameEl.className = 'at_text_white at_font_bold';
+    userNameEl.style.fontSize = '1.25rem';
+    const statusText = document.createElement('div');
+    statusText.className = 'at_text_sm at_text_white';
+    statusText.innerHTML = `
+        ${i18n.t('Is sharing their space')} &lt;${(_currentSpace === null || _currentSpace === void 0 ? void 0 : _currentSpace.name) || i18n.t('SPACE_NAME')}&gt; ${i18n.t('to you')}
+    `;
+    infoWrapper.appendChild(userNameEl);
+    infoWrapper.appendChild(statusText);
+    // Right: Green dot
+    const dot = document.createElement('div');
+    dot.className = 'at_circle at_w-2 at_h-2 at_bg_green_500';
+    const circle = document.createElement('span');
+    circle.style.width = '15px';
+    circle.style.height = '15px';
+    circle.style.borderRadius = '50%';
+    circle.style.backgroundColor = user.isActive ? '#22c55e' : '#ffffff';
+    circle.style.border = '1px solid #ccc';
+    circle.style.marginRight = '10px';
+    // Combine into card
+    cardContent.appendChild(infoWrapper);
+    cardContent.appendChild(circle);
+    card.appendChild(cardContent);
+    container.appendChild(card);
+    // === Instructional Text ===
+    const instruction = document.createElement('div');
+    instruction.className = 'at_text_xs at_text_center at_text_white at_opacity_80 at_mb_6';
+    instruction.textContent = i18n.t('During a remote space sharing session, you cannot navigate around the space, only your host has control during the session');
+    container.appendChild(instruction);
+}

package/lib/atwinui/events.d.ts

@@ -1,6 +1,9 @@
+import { Notyf } from 'notyf';
 import 'notyf/notyf.min.css';
 declare let activeToolbarItem: HTMLElement, activeActionItem: HTMLElement, cancelModelPlacementPrompt: HTMLDivElement;
+export declare let notyf: Notyf;
 declare let isCustomMapControlsVisible: boolean;
+declare let pipeColor: string;
 declare function batchAddEventListenerByClassName(className: string, callback: EventListener): void;
 /**
 * @param attrName - The name of the data attribute (without the "data-" prefix), e.g. 'toggle-pane'
@@ -39,4 +42,4 @@ declare function handleDeletePartition(targetId: string): void;
  * Handles the display logic for showing the custom minimap.
  */
 declare function handleShowCustomMinimap(): void;
-export { activeToolbarItem, activeActionItem, cancelModelPlacementPrompt, isCustomMapControlsVisible, batchAddEventListenerById, batchAddEventListenerByClassName, batchAddEventListenerByClassNames, batchAddEventListenerByDataAttribute, setActiveToolbarItem, toggleDisplayPane, toggleActionBar, setupIndividualEventListeners, setupSpaceEventSubscriptions, handleModelVisibility, handleDeleteModel, handleShowMinimap, handleScrollToView, handleRenderMeetingUI, handleShowCustomMinimap, handlePartitionVisibility, handlePolygonVisibility, handleDeletePartition, };
+export { activeToolbarItem, activeActionItem, cancelModelPlacementPrompt, isCustomMapControlsVisible, pipeColor, batchAddEventListenerById, batchAddEventListenerByClassName, batchAddEventListenerByClassNames, batchAddEventListenerByDataAttribute, setActiveToolbarItem, toggleDisplayPane, toggleActionBar, setupIndividualEventListeners, setupSpaceEventSubscriptions, handleModelVisibility, handleDeleteModel, handleShowMinimap, handleScrollToView, handleRenderMeetingUI, handleShowCustomMinimap, handlePartitionVisibility, handlePolygonVisibility, handleDeletePartition, };

package/lib/atwinui/events.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 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, detachTagMedia, getTagDataCollection } from "../architwin";
+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, setPipeCategories, setPipes, detachTagMedia, getTagDataCollection } from "../architwin";
 import { Notyf } from 'notyf';
 import 'notyf/notyf.min.css';
 import { SPACE_EVENTS, COORDINATE_SYSTEM, UNITS, DEGREE, MAP_OPTIONS } from "../types";
@@ -29,9 +29,15 @@ import { actionSettingsSelectOption, getTempCoordinateSystem, getTempMeasurement
 import { getBasepointCalibrateBpCoordinateValues, getBasepointCalibrateMpCoordinateValues, initBsepointCalibratePane, toggleBasepointCalibratePane } from "./components/toolbar/basepointCalibratePane";
 import { toggleGeneralMapOptions, initGeneralSelectedMap, getSelectedMapOption } from './components/toolbar/generalSettingsMenuPane';
 import { searchTagList, setSearchTagTerm, searchClearfield, getSearchTagTerm } from './components/toolbar/tagListPane';
+import { PipeList } from "./components/toolbar/pipeListPane";
+import { PipeForm } from "./components/toolbar/pipeFormPane";
+// import { EditPipeForm, initPipeFormPane, pipeFormData, setPipeFormMode } from "./components/toolbar/pipeFormPane";
+// import { initPipeData } from "./components/toolbar/addPipePane";
 import { unsendComment, timedoutComment, getTheseTagMessages } from './components/toolbar/tagMessagingPane';
+const pipeList = new PipeList();
+const pipeForm = new PipeForm();
 let activeToolbarItem, activeActionItem, activePane, activeActionPane, cancelTagPlacementPrompt, cancelModelPlacementPrompt;
-let notyf = new Notyf({ position: { x: 'left', y: 'bottom' }, duration: 4500, types: [
+export let notyf = new Notyf({ position: { x: 'left', y: 'bottom' }, duration: 4500, types: [
         {
             type: 'info',
             background: 'blue',
@@ -50,6 +56,7 @@ let _currentPaneId;
 let isPlacingTag = false;
 let isCustomMapControlsVisible = false;
 let isNotyfExecuted = false; // flag for notification
+let pipeColor = "";
 function batchAddEventListenerByClassName(className, callback) {
     if (className) {
         const elements = document.querySelectorAll(`.${className}`);
@@ -256,6 +263,15 @@ function toggleDisplayPane(targetId) {
                     initGeneralSelectedMap();
                     handleCloseActiveMinimap();
                 }
+                if (paneId === 'at-pipe-list-pane') {
+                    log.info("Pipe Pane");
+                    //setup pipe list pane initialization
+                    pipeList.init();
+                }
+                if (paneId === 'at-pipe-form-pane') {
+                    log.info("Pipe Pane");
+                }
+                console.log("paneId", paneId);
                 return;
             }
             else {
@@ -264,7 +280,7 @@ function toggleDisplayPane(targetId) {
                 return;
             }
         }
-        log.error('Could not get value of target-pane attribute');
+        log.error('Could not get value of target-pane attribute', targetId);
         return;
     });
 }
@@ -341,8 +357,44 @@ function setupIndividualEventListeners() {
     handleCloseCustomMinimap();
     handleCustomMapControls();
     handleCloseActiveMinimap();
+    handlePipeForm();
+    handlePipeList();
+}
+//================ OBJECT EVENT HANDLERS ===============//s
+// handle pipe undo drawing
+function handleUndoPipeDrawing() {
+}
+// handle pipe redo drawing
+function handleRedoDrawing() {
+}
+function handlePipeCategory(payload) {
+    return __awaiter(this, void 0, void 0, function* () {
+        console.log("HANDLE CATEGORY =>", payload);
+        // set categories latest value 
+        yield setPipeCategories(payload);
+    });
+}
+function handlePipe(payload) {
+    return __awaiter(this, void 0, void 0, function* () {
+        console.log("HANDLE PIPE =>", payload);
+        // set pipes latest value 
+        yield setPipes(payload);
+    });
+}
+//handler pipe form events
+function handlePipeForm() {
+    // setup events from pipe form
+    pipeForm.save();
+    pipeForm.cancel();
+    pipeForm.draw();
+    pipeForm.undo();
+    pipeForm.redo();
+}
+//handle pipe list event
+function handlePipeList() {
+    // setup event from pipe list
+    pipeList.add();
 }
-//================ OBJECT EVENT HANDLERS ===============//
 function handleTranslateObject() {
     const translateObjectbtn = document.getElementById('at-translate-action-btn');
     translateObjectbtn.addEventListener('click', () => {
@@ -382,7 +434,7 @@ function handleCopyObject() {
     function onCopyModel() {
         return __awaiter(this, void 0, void 0, function* () {
             //Clear transform controls otherwise the original object will move to the duplicated object position making it look
-            //like the original disappeared
+            //like the original disappeare
             const selectedObj = getSelectedObject().object;
             log.info("copyModel selectedObj ", selectedObj);
             const objectCards = document.getElementById('at-object-cards');
@@ -1277,6 +1329,9 @@ function setupSpaceEventSubscriptions() {
     subscribeSpaceEvent(SPACE_EVENTS.DRAW_HISTORY, handleDrawHistory);
     subscribeSpaceEvent(SPACE_EVENTS.FLOOR_IMAGE_UPLOADED, handleCustomMapFloorImageUploaded);
     subscribeSpaceEvent(SPACE_EVENTS.FLOOR_IMAGE_UPLOAD_FAILED, handleCustomMapFloorUploadFailed);
+    // subscribeSpaceEvent(SPACE_EVENTS.DRAW_PIPE, handleDrawPipe)
+    subscribeSpaceEvent(SPACE_EVENTS.PIPE_CATEGORY_ON_CHANGE, handlePipeCategory);
+    subscribeSpaceEvent(SPACE_EVENTS.PIPE_ON_CHANGE, handlePipe);
 }
 function handleDragEnd(payload) {
     console.log("handleDragEnd payload", payload);
@@ -1322,7 +1377,7 @@ function handleDragEnd(payload) {
     showCurrentCoordinateValue();
     const transformValues = {
         object_position: payload.object_position,
-        object_rotation: payload.object_rotation,
+        object_rotation: payload.object_rotationƒ,
         object_scale: payload.object_scale,
     };
     setCurrentTransformationValues(transformValues);
@@ -1347,13 +1402,21 @@ function handleDrawHistory(payload) {
         const redoBtn = document.getElementById('at-draw-redo-btn');
         redoBtn.classList.remove('at_disabled');
     }
+    console.log("undoCount", undoCount);
+    console.log("redoCount", redoCount);
 }
-function handleVertexPlace() {
-    const undoBtn = document.getElementById('at-draw-undo-btn');
-    undoBtn.classList.remove('at_disabled');
-    setCurrentPartitionData();
-    const redoBtn = document.getElementById('at-draw-redo-btn');
-    redoBtn.classList.add('at_disabled');
+function handleVertexPlace(payload) {
+    console.log("handleVertexPlace ==>", payload);
+    if (isToolbarFeatureEnabled('roomCreation')) {
+        const undoBtn = document.getElementById('at-draw-undo-btn');
+        undoBtn.classList.remove('at_disabled');
+        setCurrentPartitionData();
+        const redoBtn = document.getElementById('at-draw-redo-btn');
+        redoBtn.classList.add('at_disabled');
+    }
+    if (isToolbarFeatureEnabled('pipe')) {
+        pipeForm.setPipeVertices(payload.path);
+    }
 }
 function handleMouseClickObject(object) {
     var _a, _b, _c;
@@ -2989,7 +3052,7 @@ function handleCloseActiveMinimap() {
 }
 export { 
 //state
-activeToolbarItem, activeActionItem, cancelModelPlacementPrompt, isCustomMapControlsVisible, 
+activeToolbarItem, activeActionItem, cancelModelPlacementPrompt, isCustomMapControlsVisible, pipeColor, 
 //methods
 batchAddEventListenerById, batchAddEventListenerByClassName, batchAddEventListenerByClassNames, batchAddEventListenerByDataAttribute, setActiveToolbarItem, toggleDisplayPane, toggleActionBar, setupIndividualEventListeners, setupSpaceEventSubscriptions, handleModelVisibility, handleDeleteModel, handleShowMinimap, handleScrollToView, handleRenderMeetingUI, handleShowCustomMinimap, 
 // partition

package/lib/atwinui/helpers.d.ts

@@ -0,0 +1,15 @@
+export declare function waitForChange<T>(getter: () => T, options?: {
+    interval?: number;
+    timeout?: number;
+}): Promise<T>;
+export declare function waitForChange<T1, T2>(getter1: () => T1, getter2: () => T2, options?: {
+    interval?: number;
+    timeout?: number;
+}): Promise<[T1, T2]>;
+/**
+ * Binds an input element's value to a target object's property using input and mutation observers.
+ * @param input The input HTML element to observe
+ * @param getTarget A function returning the target object (like _selectedPipeCategory)
+ * @param key The key of the target object to update
+ */
+export declare function observeInputToUpdate(input: HTMLInputElement, getTarget: () => Record<string, any> | undefined, key: string): void;

package/lib/atwinui/helpers.js

@@ -0,0 +1,49 @@
+export function waitForChange(...args) {
+    const maybeOptions = args[args.length - 1];
+    const options = typeof maybeOptions === 'object' && ('interval' in maybeOptions || 'timeout' in maybeOptions)
+        ? maybeOptions
+        : {};
+    const getters = (maybeOptions === options ? args.slice(0, -1) : args);
+    const { interval = 100, timeout = 5000 } = options;
+    const initial = getters.map(fn => fn());
+    const start = Date.now();
+    return new Promise((resolve, reject) => {
+        const check = () => {
+            const current = getters.map(fn => fn());
+            const hasChanged = current.some((val, i) => val !== initial[i] && val != null);
+            if (hasChanged) {
+                resolve(getters.length === 1 ? current[0] : current);
+            }
+            else if (Date.now() - start >= timeout) {
+                reject(new Error('Timeout: Values did not change'));
+            }
+            else {
+                setTimeout(check, interval);
+            }
+        };
+        check();
+    });
+}
+/**
+ * Binds an input element's value to a target object's property using input and mutation observers.
+ * @param input The input HTML element to observe
+ * @param getTarget A function returning the target object (like _selectedPipeCategory)
+ * @param key The key of the target object to update
+ */
+export function observeInputToUpdate(input, getTarget, key) {
+    if (!input)
+        return;
+    const update = () => {
+        const target = getTarget();
+        if (target) {
+            target[key] = input.value;
+        }
+    };
+    const observer = new MutationObserver(update);
+    observer.observe(input, {
+        attributes: true,
+        attributeFilter: ['value'],
+    });
+    input.addEventListener('input', update);
+    console.log("observer ==>", input);
+}

package/lib/atwinui/index.js

@@ -37,6 +37,8 @@ const sidebarPaneBtnIds = [
     'at-cancel-theme-btn',
     'at-save-customization-btn',
     'at-draw-room-btn',
+    // 'at-cancel-pipe-btn',
+    // 'at-save-pipe-btn'
 ];
 //'at-cancel-add-object-form-btn',
 function initToolbarUI(payload) {

package/lib/loaders/curosrMarkerLoader.d.ts

@@ -0,0 +1,25 @@
+import { MpSdk } from "../../bundle/sdk";
+import * as THREE from "three";
+import { IMPConfig } from "../types";
+declare class CursorMarkerLoader {
+    inputs: {
+        pointerIntersection: MpSdk.Pointer.Intersection;
+        markerTexture: string;
+        visible: boolean;
+        offset: number;
+        scale: number;
+    };
+    outputs: Record<string, unknown> & MpSdk.Scene.PredefinedOutputs;
+    context: MpSdk.Scene.IComponentContext;
+    mesh: THREE.Mesh;
+    material: THREE.Material;
+    geometry: THREE.PlaneGeometry;
+    texture: THREE.Texture;
+    constructor(mpConfig: IMPConfig);
+    onInit: () => void;
+    onInputsUpdated: () => void;
+    onDestroy: () => void;
+}
+export declare const cursorMarkerType = "mp.cursorMarker";
+export declare const cursorMarkerFactory: () => CursorMarkerLoader;
+export {};