architwin 1.14.9 → 1.14.11

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

@@ -219,7 +219,7 @@ i18n
                 "ViewingInstructions": "During a remote space sharing session, you cannot navigate around the space, only your host has control during the session",
                 "Pending": "Pending",
                 "NowSharing": "Now Sharing",
-                "ConfirmLeaveSession": "画面共有を終了しますか？",
+                "ConfirmLeaveSession": "Do you want to leave sharing session?",
                 "ConfirmLeaveSessionReminder": "",
                 "InSession": "In Session",
                 "Leave": "Leave",

package/lib/atwinui/components/toolbar/spacePartition/roomFormPane.js

@@ -54,7 +54,7 @@ export function renderRoomFormPane() {
         </div>
         <form class="at_form_container at_scrollable_container at_h-min-70" id="at-room-form" data-cy="at-room-form">
             <div class="at-field at_flex_row">
-                <label for="">${i18n.t('Name')}</label>
+                <label for="" style="font-size: 0.95rem;">${i18n.t('Name')}</label>
                 <input class="at_field_input at_w-full" type="text" name="room_name" id="at-room-name-input" data-cy="at-room-name-input" placeholder="Room 1">
             </div>
             <div class="at-field at_flex_column">
@@ -105,13 +105,13 @@ export function renderRoomFormPane() {
                     <span class="mdi mdi-chevron-left at_back_btn" id="at-back-floors"></span>
                     <label for="">
                         <span class="mdi mdi-vector-polygon"></span>
-                        ${i18n.t('WindowsDoors')}
+                        <span id="at-wall-name"></span>
                     </label>
                     <div> </div>
                 </div>
 
                 <div class="at_edit_name" id="at-edit-wall-material" style="display: none;">
-                    <input class="at_edit_name_input" type="text" id="at-edit-wall-input" data-cy="at-edit-wall-material-input" placeholder="${i18n.t('EnterWallMaterial')}" disabled>
+                    <input class="at_edit_name_input" type="text" id="at-edit-wall-input" data-cy="at-edit-wall-material-input" placeholder="${i18n.t('EnterWallMaterial')}" disabled style="font-size: 0.75rem !important;">
                     <span class="mdi mdi-pencil" style="display: none; cursor: pointer;" id="at-wall-edit-material-btn"></span>            
                     <span class="mdi mdi-check" id="at-confirm-edit-wall-btn" style="display: none;"></span>
                 </div>
@@ -247,6 +247,7 @@ export function toggleDrawWindowButton() {
                 targetUUID: currentWall.uuid
             }
         };
+        log.info("drawingConfig", drawingConfig);
         setDrawingConfig(drawingConfig);
         startDraw();
     }
@@ -733,43 +734,17 @@ function displayFaces(polygon) {
         floorMaterialEdit.style.display = "none";
         floorMaterialConfirm.style.display = "block";
     }));
-    addEventListenerById('at-confirm-edit-wall-btn', (event) => __awaiter(this, void 0, void 0, function* () {
+    addEventListenerById('at-confirm-edit-wall-btn', () => __awaiter(this, void 0, void 0, function* () {
         console.log('@caroline wall check', wallMaterial, currentWall.material, currentWall);
         const wallEditMaterial = document.getElementById('at-wall-edit-material-btn');
         const wallConfirmMaterial = document.getElementById('at-confirm-edit-wall-btn');
         const wallMaterialInput = document.getElementById('at-edit-wall-input');
-        const partitionData = JSON.parse(currentPartitionData.polygon_json);
-        const currentPartition = _3DXObjects.find(obj => obj.object.object_data.uuid === currentPartitionData.uuid);
-        if (partitionData) {
-            const wallIndex = partitionData.walls.findIndex(wall => wall.uuid == currentWall.uuid);
-            if (wallIndex != undefined) {
-                partitionData.walls[wallIndex].material = wallMaterial;
-            }
-            currentPartitionData.polygon_json = JSON.stringify(partitionData);
-            console.log('@caroline partition data: ', currentPartitionData);
-        }
-        currentPartitionDataArray.some(partition => {
-            const parsed = JSON.parse(partition.polygon_json);
-            parsed.walls.find(wall => {
-                if (wall.uuid == currentWall.uuid) {
-                    wall.material = wallMaterial;
-                }
-            });
-        });
-        console.log('[wall] currentPartition: ', currentPartition);
-        if (currentPartition) {
-            const wall = currentPartition.object.object_data.json_data.walls.find(wall => wall.uuid == currentWall.uuid);
-            wall.material = wallMaterial;
-        }
-        currentWall.material = wallMaterial;
-        //rerender to display material value in space
-        const polyData = {
-            uuid: currentPartition.object.object_data.uuid,
-            polygon_json: partitionData
-        };
-        //  renderPolygon(polyData)
-        console.log('[wall] Partition to be saved: ', currentPartitionData, JSON.parse(currentPartitionData.polygon_json));
-        dispatchSpaceEvent(SPACE_EVENTS.PARTITION_EDITED, { data: currentPartitionData });
+        const newMaterial = wallMaterialInput.value.trim();
+        log.info("newMaterial", newMaterial);
+        currentWall.material = newMaterial;
+        log.info("currentWall", currentWall);
+        log.info("currentObject", currentObject);
+        saveWallChanges();
         wallMaterialInput.disabled = true;
         wallEditMaterial.style.display = "block";
         wallConfirmMaterial.style.display = "none";
@@ -804,8 +779,8 @@ function displayWall(wall) {
             <div class="at_subitem_left">
                 <span class="mdi mdi-vector-line"></span>
             </div>
-            <div class="at_subitem_center" id="at-expand-btn-${wall.uuid}" data-cy="at-expand-btn-${wall.uuid}">
-                ${wallName}
+            <div class="at_subitem_center" id="at-expand-btn-${wall.uuid}" data-cy="at-expand-btn-${wall.uuid}" style="width: 150px !important;">
+                ${i18n.t('WindowsDoors')}
                 <span class="mdi mdi-chevron-up" id="at-chevron-${wall.uuid}"></span>
             </div>
             <div class="at_subitem_right at_invisible">
@@ -932,10 +907,10 @@ function setupEditWindow(element, window) {
         confirmBtn.style.display = "none";
         const windowTooltip = document.getElementById(`at-window-name-tooltip-${window.index}`);
         windowTooltip.innerText = `${window.name}`;
-        saveWindowChanges();
+        saveWallChanges();
     });
 }
-function saveWindowChanges() {
+function saveWallChanges() {
     updateWallInPolygon(currentWall);
     updatePartitionData();
     setCurrentPolygon(currentObject);
@@ -995,7 +970,7 @@ function setupDeleteWindow(element, window) {
             });
             // Save + rerender window
             currentObject.object.object_data.json_data = currentPolygonData;
-            saveWindowChanges();
+            saveWallChanges();
             notify.success(`${i18n.t('SuccessWindowDelete')}`);
             log.info("currentPartition polygonJson", JSON.parse(currentPartitionData.polygon_json));
             log.info("currentObject", currentObject);
@@ -1076,7 +1051,7 @@ function displayFloor(floor, walls, floorModel) {
         </div>
     
         <div class="at_edit_name" id="at-edit-floor-material">
-            <input class="at_edit_name_input at_ml_1" type="text" id="at-edit-floor-material-input" data-cy="at-edit-floor-material-input" value="${floor.material ? floor.material : ''}" placeholder="${i18n.t('EnterFloorMaterial')}">
+            <input class="at_edit_name_input at_ml_1" type="text" id="at-edit-floor-material-input" data-cy="at-edit-floor-material-input" value="${floor.material ? floor.material : ''}" placeholder="${i18n.t('EnterFloorMaterial')}" style="font-size: 0.75rem !important;">
             <span class="mdi mdi-pencil at_mr-1" style="display: none; cursor: pointer;" id="at-floor-edit-material-btn"></span>            
             <span class="mdi mdi-check at_mr-1" id="at-confirm-edit-floor-name" style="display: none;"></span>
         </div>
@@ -1431,6 +1406,7 @@ export function setCurrentPartitionData() {
                 }
                 if (drawingMode === 'partition') {
                     displayFaceLists();
+                    currentObject = currentObjectData;
                 }
             }, 50); // Check every 50ms
         });
@@ -1495,7 +1471,7 @@ function updatePartitionDataArray(payload, currentPartitionDataArray) {
         if (existingIndex === -1) {
             if (payload.name == null)
                 payload.name = partitionName.value || `${i18n.t('Partition')} ${currentPartitionDataArray.length + 1}`;
-            log.info("@@ payload", payload.name);
+            log.info("payload", payload.name);
             // Add the new partition
             currentPartitionDataArray.push(payload);
             newlyAddedPartition.push(payload);
@@ -1640,7 +1616,6 @@ export function handlePartitionWallEditBtn(wallUuid) {
         log.info("currentPartitionData", currentPartitionData);
         log.info("polygonJson", JSON.parse(currentPartitionData.polygon_json));
         log.info("getCurrentPolygon()", getCurrentPolygon());
-        setDrawingMode(false);
         const elements = {
             'at-face-title': 'none',
             'at-window-door-title': 'flex',
@@ -1654,6 +1629,7 @@ export function handlePartitionWallEditBtn(wallUuid) {
         });
         const faceVertexContainer = document.getElementById('at-face-vertex-container');
         faceVertexContainer.innerHTML = '';
+        const wallName = document.getElementById('at-wall-name');
         currentWall = JSON.parse(currentPartitionData.polygon_json).walls.find((wall) => wall.uuid == wallUuid);
         log.info("currenWall", currentWall);
         const wallBottomMidPoint = {
@@ -1665,10 +1641,18 @@ export function handlePartitionWallEditBtn(wallUuid) {
             z: ((currentWall.edges[0].start.z + currentWall.edges[1].start.z + currentWall.edges[2].start.z + currentWall.edges[3].start.z) / 4),
         };
         yield goToPosition(wallBottomMidPoint);
+        const match = currentWall.name.match(/wall-(\d+)$/);
+        if (match) {
+            console.log('@caroline wall test display: ', match);
+            const wallNumber = parseInt(match[1]) + 1;
+            wallName.innerText = `${i18n.t('Wall')} ${wallNumber}`;
+        }
         faceVertexContainer.append(displayWall(currentWall));
         //sets material and icon
         setWallMaterial(currentWall.material);
         setWallMaterialIcon(currentWall.material);
+        currentPolygonData = JSON.parse(currentPartitionData.polygon_json);
+        setDrawingMode(false);
         cancelDrawing();
     });
 }

package/lib/atwinui/components/toolbar/spacePartition/roomTreePane.js

@@ -404,7 +404,7 @@ function toggleSelectedPartition() {
                 handlePartitionRowEditBtnClickEvent(currentEditRoomData.children, partitionRowEdit);
                 if (isWall) {
                     const polygonId = target.getAttribute('polygon-item-id');
-                    handlePartitionWallEditBtn(polygonId);
+                    yield handlePartitionWallEditBtn(polygonId);
                 }
             }
             else {

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

@@ -4,6 +4,7 @@ export declare let selectedIoTSystem: string;
 export declare let selectedIotTag: any;
 export declare function renderTagIOTFormPane(): HTMLDivElement;
 export declare function setIotCategoryOptions(): void;
+export declare function getIotCategoryOption(): ITagIOTCategory;
 export declare function toggleIoTCategoryOptions(): void;
 export declare function toggleIoTDevicesOptions(): void;
 /**

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

@@ -11,17 +11,20 @@ import { IOT_LINKED_SYSTEMS, SPACE_EVENTS, TAG_TYPE } from '../../../types';
 import log from 'loglevel';
 import i18n from './i18n';
 import { dispatchSpaceEvent, _tagIotCategoryTypes, _tagIotDevices, _tags } from '../../../architwin';
-import { stringContains } from "../../../utils";
+import { stringContains, generateUUID } from "../../../utils";
 import { batchAddEventListenerByClassName } from '../../events';
+import { toggleModal, setModalAction } from "./modal";
+import { Notyf } from 'notyf';
 let selectedIoTCatOption;
 let selectedIoTDeviceOption;
 export let iotTagFormMode = "ADD" /* FORM_MODE.ADD */;
 export let selectedIoTSystem = '';
 export let selectedIotTag = undefined;
 let tagIotName, iotModelName, iotSerialNumber, iotMfrName, iotSystemLink;
-let selectedIoTCatId;
+let selectedIoTCat;
 let linkedDevicesArray = [];
 let iotCategoryIconList = ['mdi-power', 'mdi-thermometer', 'mdi-water-percent', 'mdi-gauge', 'mdi-leak', 'mdi-water', 'mdi-lightbulb-on', 'mdi-gas-cylinder', 'mdi-flask', 'mdi-meter-electric', 'mdi-information-symbol', 'mdi-sine-wave'];
+let notify = new Notyf({ position: { x: 'left', y: 'bottom' } });
 export function renderTagIOTFormPane() {
     const element = document.createElement('div');
     element.classList.add('at_container');
@@ -34,7 +37,7 @@ export function renderTagIOTFormPane() {
     </div>
 
     <div class="at_form_container at_scrollable_container at_h-min-70">
-      <label for="">${i18n.t('Linked Systems')}</label>
+      <label for="">${i18n.t('LinkedSystems')}</label>
         <div class="at_gap_2" style="display: inline-flex">
           <label class="at_flex at_align_center at_text_xs at_gap_1">
             <input type="radio" id="at-linked-radio-bemac" name="iot-link-system" checked value=${IOT_LINKED_SYSTEMS.BEMAC} selected />
@@ -46,7 +49,7 @@ export function renderTagIOTFormPane() {
           </label>
           <label class="at_flex at_align_center at_text_xs at_gap_1">
             <input type="radio" id="at-linked-radio-link" name="iot-link-system" value=${IOT_LINKED_SYSTEMS.URL_LINK} />
-              ${i18n.t("URL Link")}
+              ${i18n.t("URLLink")}
           </label>
         </div>
 
@@ -73,22 +76,22 @@ export function renderTagIOTFormPane() {
         </div>
 
         <div class="at-field at_flex_row at_justify_between">
-            <label for="">${i18n.t('Model Name')}</label>
+            <label for="">${i18n.t('ModelName')}</label>
             <input class="at_field_input at_w-full" type="text" name="model_name" id="at-iot-model-input" data-cy="at-iot-model-input" />
         </div>
 
         <div class="at-field at_flex_row at_justify_between">
-            <label for="">${i18n.t('Serial Number')}</label>
+            <label for="">${i18n.t('SerialNumber')}</label>
             <input class="at_field_input at_w-full" type="text" name="serial_name" id="at-iot-serial-input" data-cy="at-iot-serial-input" />
         </div>
 
         <div class="at-field at_flex_row at_justify_between">
-            <label for="">${i18n.t('Manufacturer Site')}</label>
+            <label for="">${i18n.t('ManufacturerSite')}</label>
             <input class="at_field_input at_w-full" type="text" name="manufacturer_site" id="at-iot-manufacturer-input" data-cy="at-iot-manufacturer-input" />
         </div>
 
         <div class="at-field at_flex_row at_justify_between" id="at-iot-system-link-container" style="display: none">
-            <label for="">${i18n.t('System Link')}</label>
+            <label for="">${i18n.t('SystemLink')}</label>
             <input class="at_field_input at_w-full" type="text" name="system_link" id="at-iot-system-link-input" data-cy="at-iot-system-link-input" />
         </div>
 
@@ -98,9 +101,9 @@ export function renderTagIOTFormPane() {
         </div>
 
         <div class="at_field at_flex_column" id="at-iot-device-main-container">
-         <label for="">${i18n.t('IOT Devices')}</label>
-          <div id="at-iot-devices-dropdown" data-cy="at-iot-devices-dropdown">
-            <div id="at-setting-map-filter-dropdown" class="at_dropdown at_flex at_flex_row at_space_between">    
+         <label for="">${i18n.t('IoTDevices')}</label>
+          <div id="at-iot-devices-dropdown" data-cy="at-iot-devices-dropdown" class="at-device-dropdown">
+            <div id="at-iot-devices-filter-dropdown" class="at_dropdown at_flex at_flex_row at_space_between">    
               <div class="at_dropdown_toggle" id="at-iot-selected-device" data-cy="at-iot-selected-device">${i18n.t(selectedIoTDeviceOption)}</div>
                 <span class="mdi mdi-chevron-down at_chevron" id="at-iot-cat-filter-chevron" data-cy="at-iot-cat-filter-chevron"></span>
               </div>
@@ -112,17 +115,19 @@ export function renderTagIOTFormPane() {
           </div>
         </div>
 
-        <div class="at_partition_list_container at_h-min-40" id="at-iot-device-list-container" data-cy="at-iot-device-list-container">
+        <div class="at_iot_list_container at_h-min-40" id="at-iot-device-list-container" data-cy="at-iot-device-list-container">
 
-            <div class="at_partition_item_container at_scrollable_container" id="at-linked-device-container" data-cy="at-linked-device-container">
+            <div class="at_section at_iot_item_container at_scrollable_container" id="at-linked-device-container" data-cy="at-linked-device-container">
             
-              <div class="at_partition_title" style="padding-left: 20px !important;">
+              <div class="at_title" style="padding-left: 20px !important;">
                 <div> </div>
-                <label for="">${i18n.t('Linked IOT Devices')}</label>
+                <label for="">${i18n.t('LinkedIoTDevices')}</label>
                 <div> </div>
               </div>
 
-              <div class="at_linked_device_container" id="at-linked-device-row">
+              <div>
+                <div class="at_body at_linked_device_container" id="at-device-item-container">
+                </div>
               </div>
 
             </div>
@@ -155,19 +160,24 @@ function displayFormTitle() {
     title.innerHTML = '';
     const span = document.createElement('span');
     span.textContent = iotTagFormMode === "ADD" /* FORM_MODE.ADD */
-        ? i18n.t('Add IOT Tag')
-        : i18n.t('Edit IOT Tag');
+        ? i18n.t('AddIoTTag')
+        : i18n.t('EditIoTTag');
     title.appendChild(span);
 }
+// displays selected Category in the dropdown
 function setSelectedIoTCat(payload) {
     log.info('setSelectedIoTCat()', payload);
     const selectedOption = document.getElementById('at-iot-selected-cat');
-    selectedOption.innerText = payload;
+    selectedOption.innerText = i18n.t(payload.name);
 }
+// displays selected Device in the dropdown
 function setSelectedIoTDevice(payload) {
     log.info('setSelectedIoTDevice()', payload);
     const selectedDevice = document.getElementById('at-iot-selected-device');
-    selectedDevice.innerText = payload;
+    selectedDevice.innerText = '';
+    if (payload) {
+        selectedDevice.innerText = payload;
+    }
 }
 function setInputFields() {
     log.info('setInputFields()');
@@ -180,17 +190,37 @@ function setInputFields() {
 export function setIotCategoryOptions() {
     log.info('setIotCategoryOptions()');
     dispatchSpaceEvent(SPACE_EVENTS.GET_IOT_CATEGORIES, { payload: 'hello from library' });
-    renderIotCategoryDropdownOptions('at-iot-category-options', _tagIotCategoryTypes);
-    batchAddEventListenerByClassName('at_iot_cat_option', (event) => {
-        //@ts-ignore
-        const selectedCat = event.target;
-        const dataCy = selectedCat.getAttribute('data-cy');
-        const match = dataCy.match(/^at-iot-category-option-(.+)$/);
-        const selectedId = match ? match[1] : null;
-        selectedIoTCatId = selectedCat.innerText; // this is set to inner text as uuid for category changes due to dummy data
-        setSelectedIoTCat(selectedCat.innerText);
-        log.info('cat id: ', selectedIoTCatId);
-    });
+    if (_tagIotCategoryTypes) {
+        renderIotCategoryDropdownOptions('at-iot-category-options', _tagIotCategoryTypes);
+        batchAddEventListenerByClassName('at_iot_cat_option', (event) => {
+            //@ts-ignore
+            const selectedCat = event.target;
+            const catUUID = selectedCat.getAttribute('iot-category-uuid');
+            const getCatName = _tagIotCategoryTypes.find(cat => cat.uuid === catUUID);
+            if (getCatName) {
+                selectedIoTCat = { uuid: catUUID, name: getCatName.name };
+                setSelectedIoTCat(selectedIoTCat);
+                log.info('cat id: ', selectedIoTCat);
+            }
+        });
+    }
+}
+// gets selected Category and returns the object
+export function getIotCategoryOption() {
+    log.info('getIotCategoryOption()');
+    let foundCat = {};
+    if (linkedDevicesArray.length > 1) {
+        foundCat = _tagIotCategoryTypes.find((cat) => {
+            return i18n.t(cat.name) === 'Multiple';
+        });
+    }
+    else {
+        foundCat = _tagIotCategoryTypes.find((cat) => {
+            return i18n.t(cat.uuid) === selectedIoTCat.uuid;
+        });
+    }
+    log.info('foundCat: ', foundCat);
+    return foundCat;
 }
 export function toggleIoTCategoryOptions() {
     log.info('toggleIoTCategoryOptions');
@@ -250,7 +280,7 @@ export function clearIoTDropdowns() {
     const catDropdown = document.getElementById('at-iot-selected-cat');
     const devicesDropdown = document.getElementById('at-iot-selected-device');
     catDropdown.innerText = i18n.t('NoSelection');
-    devicesDropdown.innerText = i18n.t('Select Device');
+    devicesDropdown.innerText = i18n.t('SelectDevice');
 }
 /**
  * Initializes Form Data
@@ -260,12 +290,14 @@ export function clearIoTDropdowns() {
 export function initIoTFormData(tagId) {
     log.info('initIoTFormData()');
     displayFormTitle();
+    const iotSave = document.getElementById('at-save-iot-btn');
+    iotSave.classList.remove('at_disabled');
     // Add Mode
     if (!tagId) {
-        log.info('initIoTFormData() tagId not Exist: ', iotTagFormMode);
+        clearIoTDropdowns();
+        clearIotFields();
         if (iotTagFormMode == "ADD" /* FORM_MODE.ADD */) {
             if (tagIotName === null || tagIotName == undefined) {
-                log.info('initIoTFormData() tagname check', tagIotName);
                 setInputFields();
             }
             tagIotName.value = '';
@@ -273,11 +305,12 @@ export function initIoTFormData(tagId) {
             iotSerialNumber.value = '';
             iotMfrName.value = '';
             iotSystemLink.value = '';
+            linkedDevicesArray = [];
+            setIotDeviceOptions();
         }
     }
     else {
         const foundTag = _tags.find(tag => tag.json_data.id === tagId);
-        log.info('initIoTFormData() foundTag: ', foundTag, _tags);
         if (foundTag) {
             selectedIotTag = foundTag;
             if (tagIotName === null || tagIotName == undefined) {
@@ -299,23 +332,25 @@ export function initIoTFormData(tagId) {
                     setSelectedIoTSystemRadio(IOT_LINKED_SYSTEMS.BEMAC);
                 }
                 if (iotData.iot_category) {
-                    const cat = _tagIotCategoryTypes.find(cat => cat.name === iotData.iot_category);
+                    log.info('found cat 1: ', i18n.t(iotData.iot_category), iotData.iot_category, _tagIotCategoryTypes);
+                    const cat = _tagIotCategoryTypes.find(cat => i18n.t(cat.name.toLocaleLowerCase()) === iotData.iot_category.toLocaleLowerCase());
                     if (cat) {
-                        setSelectedIoTCat(cat.name);
-                        selectedIoTCatId = cat.name;
+                        log.info('found cat: ', cat);
+                        setSelectedIoTCat({ uuid: cat.uuid, name: cat.name });
+                        selectedIoTCat = { uuid: cat.uuid, name: cat.name };
                     }
                     else {
                         // for the Dummy data from App Side
-                        setSelectedIoTCat(i18n.t('NoSelection'));
+                        setSelectedIoTCat({ uuid: generateUUID(), name: i18n.t('NoSelection') });
                         renderIotCategoryDropdownOptions('at-iot-category-options', _tagIotCategoryTypes);
                     }
                 }
                 log.info("iotData.linked_devices: ", iotData.linked_devices);
                 if (iotData.linked_devices && iotData.linked_devices.length > 0) {
+                    setIotDeviceOptions();
                     // renderIotDeviceDropdownOptions('at-iot-device-options', _tagIotDevices)
                     setSelectedIoTDevice(iotData.linked_devices[0].name);
                     linkedDevicesArray = iotData.linked_devices;
-                    log.info("EDIT linkedDevicesArray: ", linkedDevicesArray);
                     renderLinkedDevices(linkedDevicesArray);
                 }
                 else {
@@ -328,7 +363,7 @@ export function initIoTFormData(tagId) {
                 // this is due to selecting the tags created from James
                 log.info('initIoTFormData()', iotData);
                 setSelectedIoTSystemRadio(IOT_LINKED_SYSTEMS.BEMAC);
-                setSelectedIoTCat('No Selection');
+                setSelectedIoTCat({ uuid: generateUUID(), name: i18n.t('NoSelection') });
                 renderIotCategoryDropdownOptions('at-iot-category-options', _tagIotCategoryTypes);
                 renderIotDeviceDropdownOptions('at-iot-device-options', _tagIotDevices);
             }
@@ -370,8 +405,10 @@ export function renderIotCategoryDropdownOptions(elementId, items) {
         return;
     }
     items.forEach((item, index) => {
-        const option = createCatOptionElement(item, 'iotcategory', index);
-        element.appendChild(option);
+        if (item.name != 'Multiple') {
+            const option = createCatOptionElement(item, 'iotcategory', index);
+            element.appendChild(option);
+        }
     });
 }
 function createCatOptionElement(item, dropdownType, index) {
@@ -394,28 +431,33 @@ function createCatOptionElement(item, dropdownType, index) {
     return option;
 }
 function selectCatOption(option, elementId) {
-    log.info('selectCatOption()', option, elementId);
+    dispatchSpaceEvent(SPACE_EVENTS.GET_IOT_CAT_ICON, { payload: option });
 }
+// selects Devices from Arrayat-device-item-container
 export function setIotDeviceOptions() {
     log.info('setIotDeviceOptions()');
     dispatchSpaceEvent(SPACE_EVENTS.GET_IOT_DEVICES, { payload: 'hello from library' });
     renderIotDeviceDropdownOptions('at-iot-device-options', _tagIotDevices);
-    batchAddEventListenerByClassName('at_iot_dev_option', (event) => {
+    batchAddEventListenerByClassName('at_option', (event) => {
         //@ts-ignore
-        const selectedDev = event.target;
-        const parent = selectedDev.parentElement;
-        log.info('@caroline parent: ', parent);
+        const selectedDev = document.getElementById(event.target.id);
+        const parent = selectedDev.closest('div');
         const deviceId = parent.getAttribute('iot-device-uuid');
-        log.info('@caroline deviceId: ', deviceId);
-        const device = _tagIotDevices.find(device => device.id == deviceId);
-        log.info("device", device);
-        setSelectedIoTDevice(selectedDev.innerText);
-        linkedDevicesArray.push(device);
-        renderLinkedDevices(linkedDevicesArray);
+        // adds selected device to array
+        const devFound = _tagIotDevices.find(device => device.id === deviceId);
+        if (devFound) {
+            selectedDev.setAttribute('disabled', 'true');
+            setSelectedIoTDevice(selectedDev.innerText);
+            linkedDevicesArray.push(devFound);
+            //hides the selected device in dropdown
+            parent.style.display = 'none'; //hides
+            renderDeviceRow(devFound);
+            selectedDev.setAttribute('disabled', 'false');
+        }
     });
 }
 export function renderIotDeviceDropdownOptions(elementId, items) {
-    log.info("renderIotDeviceDropdownOptions: ", items);
+    log.info("renderIotDeviceDropdownOptions: ");
     const element = document.getElementById(elementId);
     if (!element) {
         console.error("Parameter element is undefined");
@@ -430,19 +472,19 @@ export function renderIotDeviceDropdownOptions(elementId, items) {
     element.innerHTML = ``;
     const selectedIotDeviceOption = document.getElementById(isFilterDropdown ? 'at-iot-device-filter-dropdown-toggle' : 'at-iot-device-dropdown-toggle');
     if (selectedIotDeviceOption) {
-        selectedIotDeviceOption.textContent = `${i18n.t('Select Device')}`;
+        selectedIotDeviceOption.textContent = `${i18n.t('SelectDevice')}`;
         selectedIoTDeviceOption = undefined;
     }
     //Add the no selection option
     const selectDevice = document.createElement('div');
-    selectDevice.classList.add('at_iot_dev_option');
+    selectDevice.classList.add('at_option');
     selectDevice.setAttribute('iot-device-uuid', '');
     selectDevice.setAttribute('dropdown-type', 'iotdevice');
     selectDevice.innerHTML = `
-        <span></span> ${i18n.t('Select Device')}
+        <span></span> ${i18n.t('SelectDevice')}
     `;
     selectDevice.onclick = () => {
-        log.info('@caroline onClick');
+        log.info('item selected: ', selectDevice, linkedDevicesArray);
         selectDeviceOption(selectDevice, isFilterDropdown ? 'at-iot-device-filter-dropdown-toggle' : 'at-iot-device-filter-dropdown-toggle');
     };
     element.appendChild(selectDevice);
@@ -466,21 +508,23 @@ function createDeviceOptionElement(item, dropdownType) {
     option.style.justifyContent = 'left';
     option.style.alignItems = 'center';
     option.style.gap = '2px';
+    // option.classList.add('at_option')
     option.classList.add('at_option');
-    option.classList.add('at_iot_dev_option');
     option.setAttribute('iot-device-uuid', item.id);
     option.setAttribute('dropdown-type', dropdownType);
     option.setAttribute('data-cy', `at-iot-category-option-${item.id}`);
-    if (dropdownType == 'category') {
-        option.innerHTML = `
-            <span class="at_colored-indicator"></span>
-            ${item.name}
-        `;
-        return option;
-    }
     option.innerHTML = `
-    <span>${item.name}</span>
+    <span style="width: 100%; display: block; padding: 4px 8px; cursor: pointer" id="${item.id}">${item.name}</span>
       `;
+    if (selectedIotTag) {
+        const iotTag = selectedIotTag.iot_tag;
+        const hideOption = iotTag.linked_devices.find((dev) => {
+            return dev.id === item.id;
+        });
+        if (hideOption != undefined) {
+            option.style.setProperty('display', 'none', 'important');
+        }
+    }
     return option;
 }
 /**
@@ -499,7 +543,8 @@ export function getIotTagFormData() {
         modelName: iotModelName.value,
         serialNumber: iotSerialNumber.value,
         tagMf: iotMfrName.value,
-        tagCategoryId: selectedIoTCatId,
+        // tagCategoryId: selectedIoTCat.uuid,
+        tagCategoryId: selectedIoTCat.name,
         systemLink: iotSystemLink.value,
         linkedDevices: linkedDevicesArray,
         iotSystem: selectedIoTSystem,
@@ -508,55 +553,78 @@ export function getIotTagFormData() {
     return formData;
 }
 function renderLinkedDevices(linkedDevices) {
-    log.info('renderLinkedDevices()', linkedDevices);
+    log.info('renderLinkedDevices()');
     if (linkedDevices) {
-        const devicesContainer = document.getElementById('at-linked-device-row');
+        // const devicesContainer = document.getElementById('at-device-item-container')
         if (linkedDevices.length > 0) {
-            devicesContainer.innerHTML = ``;
             linkedDevices.forEach(device => {
-                log.info("@caroline device: ", device);
                 renderDeviceRow(device);
             });
         }
     }
 }
 function renderDeviceRow(payload) {
-    log.info('renderDeviceRow()', payload);
-    const devicesContainer = document.getElementById('at-linked-device-row');
+    log.info('renderDeviceRow()');
+    const devicesContainer = document.getElementById('at-device-item-container');
     if (payload) {
         const deviceRow = document.createElement('div');
         deviceRow.classList.add('at_flex_row');
-        deviceRow.classList.add('at_partition_item');
+        deviceRow.classList.add('at_item');
         deviceRow.innerHTML = `
-      <div class="at_icon_left">
+      <div class="at_subitem_left">
         <span class="mdi mdi-cube-outline"></span>
       </div>
 
-      <div class="at_partition_name">
+      <div class="at_name">
         <div></div>
         <label for="">${payload.name}</label>
         <div></div>
       </div>
-      <div class="at_icon_right">
-        <span class="mdi mdi-delete-outline at_delete_device_btn" id="at-delete-device-${payload.uuid}"></span>
+      <div class="at_subitem_right">
+        <span class="mdi mdi-delete-outline at_delete_device_btn" id="at-delete-device-${payload.id}"></span>
       </div>
     `;
         devicesContainer.appendChild(deviceRow);
         batchAddEventListenerByClassName('at_delete_device_btn', (event) => __awaiter(this, void 0, void 0, function* () {
-            log.info('deleteSelectedLinkedDevice is clicked', event);
             //@ts-ignore
-            const selectedDevice = document.getElementById(event.target.id);
+            const selectedDevice = event.target;
             if (selectedDevice) {
-                log.info('deleteSelectedLinkedDevice', selectedDevice);
-                // will be tested when using live data
-                // const devId = extractUUID(selectedDevice.id)
-                const devId = selectedDevice.id.split('at-delete-partition-')[1];
-                const findDevice = linkedDevicesArray.findIndex(dev => dev.id == devId);
-                log.info('deleteSelectedLinkedDevice found device', findDevice, devId);
-                linkedDevicesArray.splice(findDevice, 1);
-                const parent = selectedDevice.closest('.at_partition_item');
-                parent.style.display = 'none';
-                log.info('deleteSelectedLinkedDevice parent', parent);
+                toggleModal();
+                setModalAction({
+                    title: `${i18n.t('DeleteDevice')}`,
+                    description: `${i18n.t('ConfirmDeleteDevice')}`,
+                    buttonLabel: `${i18n.t('YesDelete')}`
+                }, () => __awaiter(this, void 0, void 0, function* () {
+                    // gets the device id
+                    const devId = selectedDevice.id.split('at-delete-device-')[1];
+                    // finds the index of the selected device
+                    const findDevice = linkedDevicesArray.findIndex(dev => dev.id === devId);
+                    if (findDevice > -1) {
+                        selectedDevice.setAttribute('disabled', 'true');
+                        const parent = selectedDevice.closest('.at_partition_item');
+                        if (parent) {
+                            // displays delete Device back in Dropdown List
+                            const findHideDev = document.querySelector(`div[iot-device-uuid="${devId}"]`);
+                            const devicesDropdown = document.getElementById('at-iot-selected-device');
+                            if (findHideDev) {
+                                findHideDev.style.display = "block";
+                                parent.style.display = 'none';
+                                linkedDevicesArray.splice(findDevice, 1);
+                            }
+                            if (linkedDevicesArray.length === 0) {
+                                devicesDropdown.innerText = i18n.t('SelectDevice');
+                                setIotDeviceOptions();
+                            }
+                        }
+                        toggleModal(false);
+                        notify.success(`${i18n.t('SuccessDeleteDevice')}`);
+                        selectedDevice.setAttribute('disabled', 'false');
+                    }
+                    else {
+                        toggleModal(false);
+                        notify.error("Tag id not found!");
+                    }
+                }));
             }
         }));
         return;
@@ -573,7 +641,7 @@ export function clearIotFields() {
     iotSerialNumber = document.getElementById('at-iot-serial-input');
     iotMfrName = document.getElementById('at-iot-manufacturer-input');
     iotSystemLink = document.getElementById('at-iot-system-link-input');
-    const deviceContainer = document.getElementById("linked-devices-container");
+    const deviceContainer = document.getElementById('at-device-item-container');
     tagIotName.innerText = '';
     iotModelName.innerText = '';
     iotSerialNumber.innerText = '';
@@ -582,10 +650,9 @@ export function clearIotFields() {
     linkedDevicesArray = [];
     selectedIoTSystem = '';
     setSelectedIoTSystemRadio(IOT_LINKED_SYSTEMS.BEMAC);
-    if (deviceContainer !== null) {
-        deviceContainer.innerHTML = '';
-    }
+    deviceContainer.innerHTML = '';
     iotTagFormMode = "ADD" /* FORM_MODE.ADD */;
+    selectedIotTag = undefined;
 }
 /**
  * Sets the form mode for the IOT form.

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

@@ -6,3 +6,4 @@ export declare function renderViewingRemoteSpace(): HTMLElement;
  */
 export declare function renderRemoteSpaceViewing(user: ScreenShareUser): void;
 export declare function handleRemoteViewResponsiveChanges(): void;
+export declare function handleScreenShareRemoteEndSessionEvent(): void;

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

@@ -100,3 +100,9 @@ export function handleRemoteViewResponsiveChanges() {
         container.classList.toggle("at_display_flex_end", isMobile);
     }
 }
+export function handleScreenShareRemoteEndSessionEvent() {
+    const element = document.getElementById("at-viewing-remote-space-pane");
+    if (element) {
+        element.style.display = 'none';
+    }
+}

package/lib/atwinui/events.js

@@ -30,7 +30,7 @@ import { getBasepointCalibrateBpCoordinateValues, getBasepointCalibrateMpCoordin
 import { toggleGeneralMapOptions, initGeneralSelectedMap, getSelectedMapOption } from './components/toolbar/generalSettingsMenuPane';
 import { searchTagList, setSearchTagTerm, searchClearfield, getSearchTagTerm, sortTags, updateSelectedTagSortOption, resetSelectedTagSortOption } from './components/toolbar/tagListPane';
 import { renderUserRows } from "./components/toolbar/spaceUserListPane";
-import { handleRemoteViewResponsiveChanges, renderRemoteSpaceViewing } from "./components/toolbar/viewingRemoteSpace";
+import { handleRemoteViewResponsiveChanges, handleScreenShareRemoteEndSessionEvent, renderRemoteSpaceViewing } from "./components/toolbar/viewingRemoteSpace";
 import { PipeList } from "./components/toolbar/pipeListPane";
 import { PipeForm } from "./components/toolbar/pipeFormPane";
 import { unsendComment, timedoutComment, getTheseTagMessages } from './components/toolbar/tagMessagingPane';
@@ -1439,6 +1439,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.SCREEN_SHARE_TERMINATED, handleScreenShareRemoteEndSessionEvent);
 }
 function handlePartitionColiderClickSelected(payload) {
     return __awaiter(this, void 0, void 0, function* () {
@@ -1529,6 +1530,7 @@ function handleVertexPlace(payload) {
     if (isToolbarFeatureEnabled('roomCreation')) {
         log.info("getDrawingMode()", getDrawingMode());
         if (getDrawingMode() === 'window') {
+            log.info("current polygon", getCurrentPolygon());
         }
         if (getDrawingMode() === 'partition') {
             // setCurrentPartitionData()

package/lib/loaders/polydrawerLoader.d.ts

@@ -137,6 +137,8 @@ export declare class BufferGeometry {
         windowData: any;
         targetIndex: any;
         targetUUID: any;
+        deductWindowFromWallArea: boolean;
+        windowOutlineColor: number;
     };
     outputs: Record<string, unknown> & MpSdk.Scene.PredefinedOutputs;
     context: MpSdk.Scene.IComponentContext;
@@ -157,6 +159,20 @@ export declare class BufferGeometry {
     onTick: (delta: any) => void;
     onDestroy(): void;
     createLabelCanvas(text: string): HTMLCanvasElement;
+    /**
+     * Projects 3D window coordinates to 2D for accurate area calculation
+     * @param path3D Array of 3D coordinates
+     * @returns Object with area and perimeter calculated from projected 2D coordinates
+     */
+    calculateWindowDimensions(path3D: Array<{
+        x: number;
+        y: number;
+        z: number;
+    }>): {
+        area: number;
+        perimeter: number;
+    };
+    calculateWallNormal(wallIndex: number, startPoint: any, endPoint: any): THREE.Vector3;
     renderWindow(WALL_HEIGHT: number): void;
     renderWalls(WALL_HEIGHT: number, metadata?: PolygonData): (WallPolyData[] | EdgePolyData[])[];
     renderWindows(windows: WindowPolyData[]): void;

package/lib/loaders/polydrawerLoader.js

@@ -511,6 +511,8 @@ export class BufferGeometry {
             windowData: undefined,
             targetIndex: undefined,
             targetUUID: undefined,
+            deductWindowFromWallArea: true,
+            windowOutlineColor: 0x253D5B
         };
         this.emits = {
             changed: true,
@@ -693,6 +695,17 @@ export class BufferGeometry {
                             if (wall.windows && wall.windows.length > 0) {
                                 acc = [...acc, ...wall.windows];
                                 wallDataArray[index].windows = wall.windows;
+                                // if (this.inputs.deductWindowFromWallArea) {
+                                //   // Calculate total window area for this wall
+                                //   let totalWindowArea = 0;
+                                //   if (wall.windows && wall.windows.length > 0) {
+                                //     totalWindowArea = wall.windows.reduce((sum, window) => {
+                                //       return sum + (window.area || 0);
+                                //     }, 0);
+                                //   }
+                                //   // Subtract window area from wall area
+                                //   wallDataArray[index].area = Math.max(0, wallDataArray[index].area - totalWindowArea);
+                                // }
                             }
                             return acc;
                         }, []);
@@ -728,7 +741,8 @@ export class BufferGeometry {
                     if (!polyData.walls[targetWallIndex].windows)
                         polyData.walls[targetWallIndex].windows = [];
                     const currentWindowCount = polyData.walls[targetWallIndex].windows ? polyData.walls[targetWallIndex].windows.length + 1 : 0;
-                    const windowDimension = PolygonCalculator.calculatePolygonProperties(this.inputs.path, true);
+                    // Calculate window dimensions using proper 3D to 2D projection
+                    const windowDimension = this.calculateWindowDimensions(this.inputs.path);
                     let windowDataArray = [];
                     for (let i = 0; i < this.inputs.path.length; i++) {
                         const startPoint = this.inputs.path[i];
@@ -771,6 +785,15 @@ export class BufferGeometry {
                         log.error("Error rendering windows ", error);
                     }
                     polyData.walls[targetWallIndex].windows[this.inputs.targetIndex] = (windowData);
+                    if (this.inputs.deductWindowFromWallArea) {
+                        let totalWindowArea = 0;
+                        if (polyData.walls[targetWallIndex].windows && polyData.walls[targetWallIndex].windows.length > 0) {
+                            totalWindowArea = polyData.walls[targetWallIndex].windows.reduce((sum, window) => {
+                                return sum + (window.area || 0);
+                            }, 0);
+                        }
+                        polyData.walls[targetWallIndex].area = Math.max(0, polyData.walls[targetWallIndex].area - totalWindowArea);
+                    }
                     partitionData = polyData;
                 }
             }
@@ -817,6 +840,83 @@ export class BufferGeometry {
         return canvas;
     }
     ;
+    /**
+     * Projects 3D window coordinates to 2D for accurate area calculation
+     * @param path3D Array of 3D coordinates
+     * @returns Object with area and perimeter calculated from projected 2D coordinates
+     */
+    calculateWindowDimensions(path3D) {
+        const THREE = this.context.three;
+        if (!path3D || path3D.length < 3) {
+            return PolygonCalculator.calculatePolygonProperties(path3D, true);
+        }
+        const p0 = new THREE.Vector3(path3D[0].x, path3D[0].y, path3D[0].z);
+        const p1 = new THREE.Vector3(path3D[1].x, path3D[1].y, path3D[1].z);
+        const p2 = new THREE.Vector3(path3D[2].x, path3D[2].y, path3D[2].z);
+        const v1 = new THREE.Vector3().subVectors(p1, p0);
+        const v2 = new THREE.Vector3().subVectors(p2, p0);
+        const normal = new THREE.Vector3().crossVectors(v1, v2);
+        const normalLen = normal.length();
+        if (normalLen > 0) {
+            normal.divideScalar(normalLen);
+            const uAxis = v1.clone().normalize();
+            const vAxis = new THREE.Vector3().crossVectors(normal, uAxis).normalize();
+            const shapePoints2D = [];
+            for (let j = 0; j < path3D.length; j++) {
+                const pj = new THREE.Vector3(path3D[j].x, path3D[j].y, path3D[j].z);
+                const rel = new THREE.Vector3().subVectors(pj, p0);
+                const x = rel.dot(uAxis);
+                const y = rel.dot(vAxis);
+                shapePoints2D.push(new THREE.Vector2(x, y));
+            }
+            let twiceSignedArea = 0;
+            let perimeter = 0;
+            console.log('Window projection debug:');
+            console.log('Original 3D points:', path3D);
+            console.log('Projected 2D points:', shapePoints2D);
+            for (let j = 0; j < shapePoints2D.length; j++) {
+                const p1 = shapePoints2D[j];
+                const p2 = shapePoints2D[(j + 1) % shapePoints2D.length];
+                const cross = p1.x * p2.y - p2.x * p1.y;
+                twiceSignedArea += cross;
+                const distance = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+                perimeter += distance;
+                console.log(`Edge ${j}: p1(${p1.x.toFixed(3)}, ${p1.y.toFixed(3)}) -> p2(${p2.x.toFixed(3)}, ${p2.y.toFixed(3)}), cross=${cross.toFixed(3)}, distance=${distance.toFixed(3)}`);
+            }
+            const area = Math.abs(twiceSignedArea * 0.5);
+            console.log(`Final calculation: twiceSignedArea=${twiceSignedArea.toFixed(3)}, area=${area.toFixed(3)}, perimeter=${perimeter.toFixed(3)}`);
+            return { area, perimeter };
+        }
+        else {
+            return PolygonCalculator.calculatePolygonProperties(path3D, true);
+        }
+    }
+    calculateWallNormal(wallIndex, startPoint, endPoint) {
+        const THREE = this.context.three;
+        const wallDirection = new THREE.Vector3(endPoint.x - startPoint.x, endPoint.y - startPoint.y, endPoint.z - startPoint.z).normalize();
+        if (this.inputs.path.length >= 3) {
+            const p0 = new THREE.Vector3(this.inputs.path[0].x, this.inputs.path[0].y, this.inputs.path[0].z);
+            const p1 = new THREE.Vector3(this.inputs.path[1].x, this.inputs.path[1].y, this.inputs.path[1].z);
+            const p2 = new THREE.Vector3(this.inputs.path[2].x, this.inputs.path[2].y, this.inputs.path[2].z);
+            const v1 = new THREE.Vector3().subVectors(p1, p0);
+            const v2 = new THREE.Vector3().subVectors(p2, p0);
+            const polygonNormal = new THREE.Vector3().crossVectors(v1, v2).normalize();
+            const wallNormal = new THREE.Vector3().crossVectors(wallDirection, polygonNormal).normalize();
+            // If the normal is too small (wall is parallel to polygon normal), use a fallback
+            if (wallNormal.lengthSq() < 0.001) {
+                // Use the wall direction rotated 90 degrees around the Y axis
+                wallNormal.set(-wallDirection.z, 0, wallDirection.x).normalize();
+            }
+            return wallNormal;
+        }
+        // Fallback: use the original method if we don't have enough points
+        const up = new THREE.Vector3(0, 1, 0);
+        const wallNormal = new THREE.Vector3().crossVectors(wallDirection, up).normalize();
+        if (wallNormal.lengthSq() < 0.001) {
+            wallNormal.set(1, 0, 0);
+        }
+        return wallNormal;
+    }
     renderWindow(WALL_HEIGHT) {
         // const THREE = this.context.three
         // const windowData:WindowPolyData = this.inputs.windowData
@@ -864,7 +964,19 @@ export class BufferGeometry {
             wallMesh.add(outlineMesh);
             wallMesh.name = this.inputs.uuid != '' ? `${this.inputs.uuid}_wall-${i}` : `wall-${i}`;
             const wallLength = new THREE.Vector3(endPoint.x - startPoint.x, endPoint.y - startPoint.y, endPoint.z - startPoint.z).length();
-            const wallArea = wallLength * WALL_HEIGHT;
+            let wallArea = wallLength * WALL_HEIGHT;
+            if (this.inputs.deductWindowFromWallArea && metadata) {
+                const currentWallIndex = wallDataArray.length == 0 ? wallDataArray.length : wallDataArray.length - 1;
+                let totalWindowArea = 0;
+                if (metadata.walls[currentWallIndex].windows && metadata.walls[currentWallIndex].windows.length > 0) {
+                    totalWindowArea = metadata.walls[currentWallIndex].windows.reduce((sum, window) => {
+                        const dimension = this.calculateWindowDimensions(window.path);
+                        return sum + (dimension.area || 0);
+                    }, 0);
+                }
+                // Subtract window area from wall area
+                wallArea = Math.max(0, wallArea - totalWindowArea);
+            }
             // Create wall label
             let wallMaterial;
             if (metadata && metadata.walls[i] && metadata.walls[i].material)
@@ -879,14 +991,9 @@ export class BufferGeometry {
                 z: (startPoint.z + endPoint.z) / 2
             };
             const direction = new THREE.Vector3(endPoint.x - startPoint.x, endPoint.y - startPoint.y, endPoint.z - startPoint.z).normalize();
-            // Calculate the normal vector to the wall
-            const up = new THREE.Vector3(0, 1, 0);
-            const wallNormal = new THREE.Vector3().crossVectors(direction, up).normalize();
-            // For flat walls, if the normal is close to zero (wall is vertical along Y),
-            if (wallNormal.lengthSq() < 0.001) {
-                // Wall is perfectly vertical, use a default normal
-                wallNormal.set(1, 0, 0);
-            }
+            // Calculate the normal vector to the wall based on polygon winding order
+            // Negate to keep labels inside, remove the negate to render all labels outside
+            const wallNormal = this.calculateWallNormal(i, startPoint, endPoint).negate();
             // Negation to position labels on the original side of the wall
             // wallNormal.negate();
             const edgeLength = direction.length();
@@ -975,7 +1082,7 @@ export class BufferGeometry {
                     is_deleted: wallDeleted
                 },
                 index: i,
-                area: wallDimensions.area,
+                area: wallArea,
                 width: wallDimensions.width,
                 perimeter: wallDimensions.perimeter,
                 wall_height: WALL_HEIGHT,
@@ -1045,8 +1152,12 @@ export class BufferGeometry {
                     depthWrite: false
                 }));
                 windowMesh.name = windows[i].uuid ? `${windows[i].uuid}_window` : `window-${i}`;
+                const outlineGeometry = new THREE.EdgesGeometry(windowGeometry);
+                const outlineMaterial = new THREE.LineBasicMaterial({ color: this.inputs.windowOutlineColor, linewidth: 3 });
+                const outlineMesh = new THREE.LineSegments(outlineGeometry, outlineMaterial);
+                windowMesh.add(outlineMesh);
                 // Add window center label if material is defined
-                if (windows[i].material) {
+                if (windows[i].material || windows[i].name) {
                     try {
                         let twiceSignedArea = 0;
                         let centroidU = 0;
@@ -1071,9 +1182,13 @@ export class BufferGeometry {
                             centerU = sum.x / shapePoints2D.length;
                             centerV = sum.y / shapePoints2D.length;
                         }
-                        // Create window label canvas
-                        const windowLabel = windows[i].name ? `${windows[i].name}_${windows[i].material}` : `Window ${i}_${windows[i].material}`;
-                        const windowCanvas = this.createLabelCanvas(windowLabel);
+                        // Calculate window area using the projected 2D coordinates
+                        const windowDimension = this.calculateWindowDimensions(windows[i].path);
+                        let windowLabelText = windows[i].name ? `${windows[i].name}` : windowMesh.name;
+                        windowLabelText = windows[i].material ? `${windowLabelText}_${windows[i].material}: ${windowDimension.area.toFixed(2)}m²` : `${windowLabelText}: ${windowDimension.area.toFixed(2)}m²`;
+                        log.info("windowLabelText ", windowLabelText);
+                        //const windowLabel = windows[i].name ? `${windows[i].name}_${windows[i].material}` : `Window ${i}_${windows[i].material}`
+                        const windowCanvas = this.createLabelCanvas(windowLabelText);
                         const windowArea = Math.abs(twiceSignedArea * 0.5);
                         const labelWidth = Math.max(0.5, Math.min(2, Math.sqrt(Math.max(0.0001, windowArea))));
                         const labelHeight = labelWidth / 4;

package/lib/types.d.ts

@@ -461,6 +461,7 @@ export interface ComponentOptions {
     drawingMode?: string | undefined;
     targetIndex?: number | undefined;
     targetUUID?: string | undefined;
+    deductWindowFromWallArea?: boolean | undefined;
 }
 export interface VectorCoords {
     object_position: Vector3;
@@ -762,6 +763,7 @@ export declare enum SPACE_EVENTS {
     SCREEN_SHARE_HOST_END_SESSION = "SCREEN_SHARE_HOST_END_SESSION",
     SCREEN_SHARE_GUEST_LEAVE_SESSION = "SCREEN_SHARE_GUEST_LEAVE_SESSION",
     SCREEN_SHARE_BACK_USER_LIST_PANE = "SCREEN_SHARE_BACK_USER_LIST_PANE",
+    SCREEN_SHARE_TERMINATED = "SCREEN_SHARE_TERMINATED",
     PIPE_INIT = "PIPE_INIT",
     PIPE_CATEGORY_REMOVED = "PIPE_CATEGORY_REMOVED",
     PIPE_CATEGORY_SAVED = "PIPE_CATEGORY_SAVED",

package/lib/types.js

@@ -124,6 +124,7 @@ export var SPACE_EVENTS;
     SPACE_EVENTS["SCREEN_SHARE_HOST_END_SESSION"] = "SCREEN_SHARE_HOST_END_SESSION";
     SPACE_EVENTS["SCREEN_SHARE_GUEST_LEAVE_SESSION"] = "SCREEN_SHARE_GUEST_LEAVE_SESSION";
     SPACE_EVENTS["SCREEN_SHARE_BACK_USER_LIST_PANE"] = "SCREEN_SHARE_BACK_USER_LIST_PANE";
+    SPACE_EVENTS["SCREEN_SHARE_TERMINATED"] = "SCREEN_SHARE_TERMINATED";
     // PIPE
     SPACE_EVENTS["PIPE_INIT"] = "PIPE_INIT";
     SPACE_EVENTS["PIPE_CATEGORY_REMOVED"] = "PIPE_CATEGORY_REMOVED";

package/package.json

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

package/static/atwinui.css

@@ -2054,7 +2054,8 @@ dialog#at-screen-share-request-modal::backdrop {
 
 .at_screen_share_request_message {
     font-size: 24px;
-    font-weight: bold;
+    font-weight: 700;
+    color: #263646ef !important;
     padding: none !important;
     margin: none !important;
 }