architwin 1.14.15 → 1.14.16

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

@@ -114,14 +114,20 @@ export function renderRoomFormPane() {
                 </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 style="font-size: 0.75rem !important;">
+                    <input class="at_edit_name_input at_text_xs" type="text" id="at-edit-wall-input" data-cy="at-edit-wall-material-input" placeholder="${i18n.t('EnterWallMaterial')}" disabled>
                     <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>
+                    <!-- <span class="mdi mdi-check" id="at-confirm-edit-wall-btn" style="display: none;"></span> -->
+                    <div class="at_save_button at_text_xs at_ghost" id="at-confirm-edit-wall-btn" data-cy="at-confirm-edit-wall-btn" style="display: none;">
+                        ${i18n.t('Save')}
+                    </div>
                 </div>
 
                 <div class="at_edit_name" id="at-edit-partition-name">
-                    <input class="at_edit_name_input" type="text" name="edit_partition_name" id="at-edit-partition-name-input" data-cy="at-edit-partition-name-input">
-                    <span class="mdi mdi-check" id="at-confirm-edit-partition-name"></span>
+                    <input class="at_edit_name_input at_text_xs" type="text" name="edit_partition_name" id="at-edit-partition-name-input" data-cy="at-edit-partition-name-input">
+                    <!-- <span class="mdi mdi-check" id="at-confirm-edit-partition-name"></span> -->
+                    <div class="at_save_button at_text_xs at_ghost" id="at-confirm-edit-partition-name" data-cy="at-confirm-edit-partition-name">
+                        ${i18n.t('Save')}
+                    </div>
                 </div>
 
                 <!-- Partition Add Mode -->
@@ -751,7 +757,7 @@ function displayFaces(polygon) {
         const floorMaterialField = document.getElementById('at-edit-floor-material-input');
         floorMaterialField.disabled = false;
         floorMaterialEdit.style.display = "none";
-        floorMaterialConfirm.style.display = "block";
+        floorMaterialConfirm.style.display = "inline-flex";
     }));
     addEventListenerById('at-confirm-edit-wall-btn', () => __awaiter(this, void 0, void 0, function* () {
         console.log('@caroline wall check', wallMaterial, currentWall.material, currentWall);
@@ -775,7 +781,7 @@ function displayFaces(polygon) {
         const wallMaterialInput = document.getElementById('at-edit-wall-input');
         wallMaterialInput.disabled = false;
         wallEditMaterial.style.display = "none";
-        wallConfirmMaterial.style.display = "block";
+        wallConfirmMaterial.style.display = "inline-flex";
     });
 }
 function displayWall(wall) {
@@ -1118,9 +1124,12 @@ 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')}" style="font-size: 0.75rem !important;">
+            <input class="at_edit_name_input at_ml_1 at_text_xs" type="text" id="at-edit-floor-material-input" data-cy="at-edit-floor-material-input" value="${floor.material ? floor.material : ''}" placeholder="${i18n.t('EnterFloorMaterial')}">
             <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>
+            <!-- <span class="mdi mdi-check at_mr-1" id="at-confirm-edit-floor-name" style="display: none;"></span> -->
+            <div class="at_save_button at_text_xs at_ghost" id="at-confirm-edit-floor-name" data-cy="at-confirm-edit-floor-name" style="display: none;">
+                ${i18n.t('Save')}
+            </div>
         </div>
 
         <div class="at_dropdown_item_container" id="at-vertex-list-${floor.uuid}" data-cy="at-vertex-list-${floor.uuid}" style="display: flex;"></div>
@@ -1564,10 +1573,10 @@ function onModeDetectFloorInput(event) {
     const floorConfirmMaterial = document.getElementById('at-confirm-edit-floor-name');
     if (floorMaterialValue) {
         floorEditMaterial.style.display = "none";
-        floorConfirmMaterial.style.display = "block";
+        floorConfirmMaterial.style.display = "inline-flex";
     }
     else {
-        floorEditMaterial.style.display = "block";
+        floorEditMaterial.style.display = "inline-flex";
         floorConfirmMaterial.style.display = "none";
     }
 }
@@ -1584,10 +1593,10 @@ function onModeDetectWallInput(event) {
     setWallMaterial(wallMaterialValue);
     if (wallMaterialValue) {
         wallEditMaterial.style.display = "none";
-        wallConfirmMaterial.style.display = "block";
+        wallConfirmMaterial.style.display = "inline-flex";
     }
     else {
-        wallEditMaterial.style.display = "block";
+        wallEditMaterial.style.display = "inline-flex";
         wallConfirmMaterial.style.display = "none";
     }
 }

package/lib/atwinui/components/toolbar/spacePartition/roomTreePane.d.ts

@@ -77,7 +77,6 @@ export declare function updateRoomVisibilityUI(parentId: string, isVisible: bool
 export declare function highlightSelectedPartitionChild(partitionId: string, name: string): void;
 export declare function toggeleExpandParitionWallChild(partitionId: string, name: string): void;
 export declare function highlightSelectedWallWindow(wallUuid: string, index: number | string): void;
-export declare function toggleHighlightedPartitionItem(): void;
 export declare function toggleHighlightedWindowItem(): void;
 export declare function calculateMidPoint(coords: Array<{
     start: Vector3;

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

@@ -351,14 +351,27 @@ function toggleSelectedPartition() {
         handlePartitionVisibility(target.id);
     }));
     batchAddEventListenerByClassName('at_child_visible_btn', (event) => __awaiter(this, void 0, void 0, function* () {
+        var _a;
         const target = event.target;
         const li = target.closest('li');
-        if (li === null || li === void 0 ? void 0 : li.getAttribute('id').toLowerCase().includes('window')) {
+        if ((_a = li === null || li === void 0 ? void 0 : li.getAttribute('id')) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes('window')) {
             event.stopPropagation();
-            handleWindowVisibility(target);
+            handleWindowVisibility(target, true);
         }
         else {
-            handlePolygonVisibility(target.id);
+            const parentVisibleState = yield handlePolygonVisibility(target.id);
+            yield new Promise(resolve => setTimeout(resolve, 0));
+            yield new Promise(resolve => requestAnimationFrame(resolve));
+            const wallId = target.getAttribute('polygon-item-id');
+            const windowItems = document.querySelectorAll(`li.at_wall_window_row_item[wall-id="${wallId}"]`);
+            if (windowItems && windowItems.length > 0) {
+                windowItems.forEach((windowLi) => {
+                    const visibilityBtn = windowLi.querySelector('.at_child_visible_btn');
+                    if (visibilityBtn) {
+                        handleWindowVisibility(visibilityBtn, false, parentVisibleState);
+                    }
+                });
+            }
         }
     }));
     batchAddEventListenerByClassName('at_partition_wall_row_item', (event) => __awaiter(this, void 0, void 0, function* () {
@@ -398,10 +411,10 @@ function toggleSelectedPartition() {
         }
     }));
     batchAddEventListenerByClassName('at_child_edit_btn', (event) => __awaiter(this, void 0, void 0, function* () {
-        var _a;
+        var _b;
         event.stopPropagation();
         const target = event.target;
-        const isWall = ((_a = target.getAttribute('is-wall')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'true';
+        const isWall = ((_b = target.getAttribute('is-wall')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'true';
         const partitionId = target.getAttribute('partition-id');
         const parentRoomUuid = target.getAttribute('partition-parent-uuid');
         const parentRoom = document.getElementById(`at-room-edit-${parentRoomUuid}-btn`);
@@ -600,6 +613,10 @@ export function updatePolygonVisibilityData(isVisible, currPartition, isFloor, p
                 log.info("WALL!");
                 // WALLS
                 targetItem = polygonJson.walls.find(item => item.uuid === polygonItemId) || null;
+                // <START_COMMENT> TODO: 16032 - uncomment when polygon loader window visibility update is implemented
+                // const windows = targetItem?.windows || null
+                // windows?.forEach(w => w.options.is_visible = isVisible)
+                // <END_COMMENT> TODO: 16032 - uncomment when polygon loader window visibility update is implemented
             }
             log.info("targetItem:", targetItem);
             if (targetItem) {
@@ -743,13 +760,13 @@ function displayWindows(wall, partitionId, parentId) {
                 const windowCoords = JSON.stringify(window.edges);
                 const windowCoordsEncoded = btoa(windowCoords);
                 itemsHTML += `
-                    <li window-coords="${windowCoordsEncoded}" id="window-${wall.uuid}-${window.index}" wall-id="${wall.uuid}" window-name="${window.name}" window-index="${window.index}" class="at_wall_window_row_item">
-                        <div>${window.name}</div>
-                        <div>
-                            <span window-coords="${windowCoordsEncoded}" partition-id="${partitionId}" partition-parent-uuid="${parentId}" polygon-item-id="${wall.uuid}" index="${window.index}"  class="mdi mdi-pencil at_window_edit_btn"></span>
-                            <span id="${window.name}" partition-id="${partitionId}" partition-parent-uuid="${parentId}" polygon-item-id="${wall.uuid}" class="mdi ${window.options.is_visible ? 'mdi-eye ' : 'mdi-eye-off'} at_child_visible_btn"></span>
-                        </div>
-                    </li>
+                <li window-coords="${windowCoordsEncoded}" id="window-${wall.uuid}-${window.index}" wall-id="${wall.uuid}" window-name="${window.name}" window-index="${window.index}" class="at_wall_window_row_item">
+                    <div>${window.name}</div>
+                    <div>
+                        <span window-coords="${windowCoordsEncoded}" partition-id="${partitionId}" partition-parent-uuid="${parentId}" polygon-item-id="${wall.uuid}" index="${window.index}"  class="mdi mdi-pencil at_window_edit_btn"></span>
+                        <span id="${window.name}" partition-id="${partitionId}" partition-parent-uuid="${parentId}" polygon-item-id="${wall.uuid}" class="mdi ${window.options.is_visible ? 'mdi-eye ' : 'mdi-eye-off'} at_child_visible_btn"></span>
+                    </div>
+                </li>
                 `;
             }
         });
@@ -810,15 +827,15 @@ export function highlightSelectedWallWindow(wallUuid, index) {
     const wallWindow = document.querySelectorAll(`li[wall-id="${wallUuid}"]`);
     const targetId = `window-${wallUuid}-${index}`;
     wallWindow.forEach((windowElement) => {
+        if (windowElement.id === targetId) {
+            const parentWallItem = windowElement.closest('li.at_partition_wall_row_item');
+            const partitionId = parentWallItem.getAttribute('partition-li-id');
+            const objectName = parentWallItem.getAttribute('object-name');
+            toggeleExpandParitionWallChild(partitionId, objectName);
+        }
         windowElement.classList.toggle('selected', windowElement.id === targetId);
     });
 }
-export function toggleHighlightedPartitionItem() {
-    const windowItems = document.querySelectorAll('li.at_wall_window_row_item.selected');
-    windowItems.forEach(el => {
-        el.classList.remove('selected');
-    });
-}
 export function toggleHighlightedWindowItem() {
     const windowItems = document.querySelectorAll('li.at_wall_window_row_item.selected');
     windowItems.forEach(el => {

package/lib/atwinui/events.d.ts

@@ -37,12 +37,12 @@ declare function handlePartitionVisibility(targetId: string): Promise<void>;
  * Toggles the visibility of the child partitions within a partition tree. (FLOOR and WALLS)
  * @param {string} targetId - ID of the target partition element.
  */
-declare function handlePolygonVisibility(targetId: string): Promise<void>;
+declare function handlePolygonVisibility(targetId: string): Promise<boolean>;
 declare function handleDeletePartition(targetId: string): void;
 /**
  * Handles the display logic for showing the custom minimap.
  */
 declare function handleShowCustomMinimap(): void;
-declare function handleWindowVisibility(visibilityBtn: HTMLElement): Promise<void>;
+declare function handleWindowVisibility(visibilityBtn: HTMLElement, updateStateDB: boolean, fromParentVisibilityState?: boolean): Promise<void>;
 declare function clearActivePane(): void;
 export { activeToolbarItem, activeActionItem, cancelModelPlacementPrompt, isCustomMapControlsVisible, pipeColor, batchAddEventListenerById, batchAddEventListenerByClassName, batchAddEventListenerByClassNames, batchAddEventListenerByDataAttribute, setActiveToolbarItem, toggleDisplayPane, toggleActionBar, setupIndividualEventListeners, setupSpaceEventSubscriptions, handleModelVisibility, handleDeleteModel, handleShowMinimap, handleScrollToView, handleRenderMeetingUI, handleShowCustomMinimap, handlePartitionVisibility, handlePolygonVisibility, handleDeletePartition, handleWindowVisibility, clearActivePane };

package/lib/atwinui/events.js

@@ -1934,9 +1934,11 @@ function handlePolygonVisibility(targetId) {
                 const parentId = thisPartition.parent_uuid;
                 updateRoomVisibilityUI(parentId, true);
             }
+            return isVisible;
         }
         catch (error) {
             console.error("Error partitionchild visibility: ", error);
+            return null;
         }
     });
 }
@@ -3295,21 +3297,51 @@ function handleClickEventInObjectSortOption() {
         });
     }
 }
-function handleWindowVisibility(visibilityBtn) {
+function handleWindowVisibility(visibilityBtn, updateStateDB, fromParentVisibilityState) {
     return __awaiter(this, void 0, void 0, function* () {
         try {
             const partitionId = visibilityBtn.getAttribute('partition-id');
             const windowIndex = visibilityBtn.closest('li').getAttribute('window-index');
             const wallId = visibilityBtn.closest('li').getAttribute('wall-id');
             const windowNameAsMeshChild = `${wallId}_window-${windowIndex}`;
-            const windowLabelNameAsMeshChild = `windowLabel-${windowIndex}`;
             const polygonObjs = get3DXObjects().filter(p => p.type === 'POLYGON');
             const targetObject = polygonObjs.find(obj => obj.object.object_data.uuid === partitionId);
             const { component } = targetObject;
-            const isVisible = visibilityBtn.classList.toggle('mdi-eye');
+            const isVisible = fromParentVisibilityState !== undefined ? fromParentVisibilityState : visibilityBtn.classList.toggle('mdi-eye');
             toggleVisibilityState(visibilityBtn, isVisible);
             toggleMeshChildrenVisibility(component, windowNameAsMeshChild, isVisible);
-            toggleMeshChildrenVisibility(component, windowLabelNameAsMeshChild, isVisible);
+            // <START_COMMENT> TODO: 16032 - uncomment when polygon loader window visibility update is implemented
+            // if(updateStateDB) {
+            //     const thisPartition : PartitionNode = _partitionNodes.flatMap(item => item.children || []).find(child => child.uuid === partitionId)
+            //     if(!thisPartition) {
+            //         log.warn('Partition not found')
+            //     } else {
+            //         const polygonJson = JSON.parse(thisPartition.polygon_json)
+            //         const wall = polygonJson.walls.find(item => item.uuid === wallId) || null
+            //         const windows = wall?.windows || null
+            //         windows?.forEach(w => w.options.is_visible = isVisible)
+            //         // const payload: PartitionPayload = {
+            //         //     uuid: thisPartition.uuid,
+            //         //     space_uuid: thisPartition.space_uuid,
+            //         //     name: thisPartition.name,
+            //         //     parent_uuid: thisPartition.parent_uuid,
+            //         //     polygon_json: polygonJson
+            //         // }
+            //         // renderPolygon(payload)
+            //         setTimeout(() => {
+            //             const updatedPolygonJson = getCurrentPolygonData()
+            //             if(updatedPolygonJson) {
+            //                 thisPartition.polygon_json = JSON.stringify(updatedPolygonJson);
+            //             }
+            //             // Dispatch event: PARTITION_EDITED
+            //             dispatchSpaceEvent(SPACE_EVENTS.PARTITION_EDITED, {
+            //                 data: thisPartition,
+            //                 isUpdateTree: false
+            //             });
+            //         }, 1000); // 1000ms = 1 second
+            //     }
+            // }
+            // <END_COMMENT> TODO: 16032 - uncomment when polygon loader window visibility update is implemented
         }
         catch (e) {
             console.error("Error window visibility: ", e);

package/package.json

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

package/static/atwinui.css

@@ -413,6 +413,19 @@
     text-align: center;
 }
 
+/* Smaller version for inline use */
+.at_button--small {
+    font-size: 0.8em;
+    padding: 2px 0.6em;
+    line-height: 1.2em;
+    max-height: 1.8em;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    
+}
+
 .at_button_icon {
     padding: 2px 8px;
     cursor: pointer;
@@ -2442,4 +2455,24 @@ li.at_partition_wall_row_item {
 
 .at_wall_window_row_item.selected {
     padding-left: 5px;
+}
+
+.at_save_button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    height: 20px; /* match input height */
+    padding: 0 6px; /* enough for 保存 */
+    font-size: 10px;
+    line-height: 1; /* prevent vertical text overflow */
+    white-space: nowrap; /* keep 保存 on one line */
+    color: white;
+    border: 1px solid white;
+    border-radius: 4px;
+    background: none;
+    font-family: Arial, sans-serif;
+    transition: all 0.2s ease;
+    margin-left: 4px;
+    box-sizing: border-box;
 }

package/static/utility.css

@@ -304,7 +304,7 @@
 }
 
 .at_text_xs {
-  font-size: 0.75rem;
+  font-size: 0.75rem !important;
 }
 
 .at_text_sm {