architwin 1.9.7 → 1.9.9

package/lib/architwin.js

@@ -11,7 +11,7 @@ import axios from "axios";
 import { planeType, planeFactory, 
 // planeType2,
 planeImageFactory, planeVideoFactory, planePdfFactory, setHudState, gltfType, gltfFactory, boxType, boxFactory, textType, textFactory, css3DType, css3DFactory, planeTypeImage, planeTypeVideo, planeTypePdf, sweepPuckType, puckBackgroundFactory, viewpointType, viewpointFactory, tubeLineType, tubeLineFactory, verticeType, verticeFactory, bufferGeometryType, bufferGeometry } from "./loaders";
-import { meterToMillimeter, generateUUID, formatMatterportUrl, initBundleVersion, isEqual } from "./utils";
+import { meterToMillimeter, generateUUID, formatMatterportUrl, initBundleVersion, isEqual, useHexToRgb } from "./utils";
 import { initToolbarUI, themeManager, toggleActionBarButtons, setActiveActionBtn } from "./atwinui";
 import { SPACE_EVENTS, } from "./types";
 import * as JSZip from "jszip";
@@ -207,7 +207,7 @@ _vertexPathDeleteUndoHistory = new Array(); // history of deleted vertex (undo)
 // _thisVertexComponent:MpSdk.Scene.IComponent, // Current Vertex Component
 // _thisVerticeNode:MpSdk.Scene.INode, // Current VerticeNode
 // _thisVertexPath = new Array()
-let visualize = true, _activeVertex, editMode = false, drawMode = false, _thisVertexNode, _thisVertexComponent, _thisVerticesNode, _thisVertexPath = new Array(), _currentPolygon, _polygonShapePath, _polygonWallDataPath, _polygonDataPath, _verticeComponentsCollection = [], _vertexConnectiveComponentCollection = [], _vertexConnectiveNodeCollection = [], _highestYaxisPoint, _polygonFloorOffset = 0.1, _autoLevelFloorEnabled = true, _floorBaseHeight, _offsetedBaseHeight = _floorBaseHeight ? _floorBaseHeight + _polygonFloorOffset : undefined;
+let visualize = true, _activeVertex, editMode = false, drawMode = false, _thisVertexNode, _thisVertexComponent, _thisVerticesNode, _thisVertexPath = new Array(), _currentPolygon, _polygonShapePath, _polygonWallDataPath, _polygonDataPath, _polygonWallHeightPath, _verticeComponentsCollection = [], _vertexConnectiveComponentCollection = [], _vertexConnectiveNodeCollection = [], _highestYaxisPoint, _polygonFloorOffset = 0.1, _autoLevelFloorEnabled = true, _floorBaseHeight, _offsetedBaseHeight = _floorBaseHeight ? _floorBaseHeight + _polygonFloorOffset : undefined, _wallBaseHeight;
 let _intersectionData, _tubes, _verticeEmitPath, _verticeEditEmitPath;
 let _navigationInputNode;
 let _navigationComponent;
@@ -2061,6 +2061,9 @@ function get3DXObjects() {
  */
 function clearSelectedObject() {
     log.info('clearSelectedObject()');
+    if (selectedObject && selectedObject.type == 'POLYGON') {
+        _currentPolygon = undefined;
+    }
     selectedObject = undefined;
 }
 function setLighting() {
@@ -5179,6 +5182,7 @@ function renderPolygon(payload, options) {
                 _sceneObject.addInputPath(polyComponent, 'path', `path_${showcaseObj.id}`);
                 _sceneObject.addInputPath(polyComponent, 'visible', `visible_${showcaseObj.id}`);
                 _sceneObject.addInputPath(polyComponent, 'polygonData', `polygonData_${showcaseObj.id}`);
+                _sceneObject.addInputPath(polyComponent, 'wallHeight', `wallHeight_${showcaseObj.id}`);
                 const newObj = {
                     object: showcaseObj,
                     node: polyNode,
@@ -5208,13 +5212,14 @@ function renderPolygon(payload, options) {
             if (!_currentPolygon.object.object_data.uuid) {
                 _currentPolygon.object.object_data.uuid = generateUUID();
             }
-            _currentPolygon.object.object_data.json_data = {
-                path: payload
-            };
+            _currentPolygon.object.object_data.json_data.path = payload;
             _3DXObjects[index] = _currentPolygon;
             if (payload.length >= 3) {
                 console.log(" _3DXObjects[index] ", _3DXObjects[index]);
                 setPolygonPath(_3DXObjects[index].object.id, payload);
+                if (options.wallHeight) {
+                    setPolygonWalHeightPath(_3DXObjects[index].object.id, options.wallHeight);
+                }
             }
         }
     }
@@ -5224,6 +5229,7 @@ function renderPolygon(payload, options) {
         }
         const targetPolygon = _3DXObjects.find(obj => obj.object.object_data.uuid == payload.uuid);
         if (!targetPolygon) {
+            log.info("Creating new partition");
             options.path = payload.polygon_json.path;
             options.uuid = payload.uuid;
             options.polygonData = payload.polygon_json;
@@ -5243,6 +5249,7 @@ function renderPolygon(payload, options) {
             _sceneObject.addInputPath(polyComponent, 'path', `path_${showcaseObj.id}`);
             _sceneObject.addInputPath(polyComponent, 'wallData', `wallData_${showcaseObj.id}`);
             _sceneObject.addInputPath(polyComponent, 'polygonData', `polygonData_${showcaseObj.id}`);
+            _sceneObject.addInputPath(polyComponent, 'wallHeight', `wallHeight_${showcaseObj.id}`);
             const eventPath = _sceneObject.addEmitPath(polyComponent, 'polygonclicked');
             _sceneObject.spyOnEvent(new PolygonClickSpy(eventPath, showcaseObj, polyNode, polyComponent, dispatchSpaceEvent));
             const newObj = {
@@ -5258,6 +5265,7 @@ function renderPolygon(payload, options) {
             if (payload.polygon_json.path.length >= 3) {
                 console.log(" _3DXObjects[index] ", _3DXObjects[index]);
                 setPolygonDataPath(_3DXObjects[index].object.id, payload.polygon_json);
+                setPolygonWalHeightPath(_3DXObjects[index].object.id, payload.polygon_json.walls[0].wall_height);
             }
         }
     }
@@ -5350,6 +5358,35 @@ function setPolygonDataPath(id, payload) {
     _polygonDataPath.set(payload);
     return;
 }
+/**
+ * Updates the wall height by passing a new object.
+ * @param {number} id - id of the polygon object
+ * @param {number} wallHeight - height of the wall
+ * @returns {void}
+ */
+function setPolygonWalHeightPath(id, payload) {
+    log.info("setPolygonWalHeightPath()");
+    let polygonWallHeightPath;
+    if (!id || !payload) {
+        log.error("id or payload is empty or undefined");
+        return;
+    }
+    if (!_polygonWallHeightPath) {
+        for (const { desc, path } of _sceneObject.pathIterator()) {
+            if (desc.id === `wallHeight_${id}`) {
+                polygonWallHeightPath = path;
+                _polygonWallHeightPath = polygonWallHeightPath;
+            }
+        }
+        if (!_polygonWallHeightPath) {
+            log.error("No mathching input path with this id");
+            return;
+        }
+    }
+    log.info("_polygonDataPath ", _polygonWallHeightPath);
+    _polygonWallHeightPath.set(payload);
+    return;
+}
 function createVerticeClickPath() {
     //_verticeEmitPath = _sceneObject.addEmitPath(_navigationComponent, 'verticeClickSpy')
     _verticeEmitPath = _sceneObject.addPath({
@@ -5710,6 +5747,7 @@ function exitDraw() {
     _polygonShapePath = undefined;
     _polygonWallDataPath = undefined;
     _polygonDataPath = undefined;
+    _polygonWallHeightPath = undefined;
     _verticeComponentsCollection = [];
     _atwin.Pointer.resetTexture();
 }
@@ -5868,7 +5906,10 @@ function setMeshChildrenMaterialProperty(component, name, key, value) {
     component.mesh.children.forEach(child => {
         if (child.name == name) {
             if (child.material[key] !== undefined) {
-                child.material[key] = value;
+                const { r, g, b } = useHexToRgb(value);
+                child.material[key].r = r;
+                child.material[key].g = g;
+                child.material[key].b = b;
             }
         }
     });

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

@@ -118,7 +118,9 @@ i18n
                 "Saving": "Saving",
                 "DeletePartition": "Delete Partition",
                 "ModifyPartition": "Modify Partition",
-                "InvalidNaN": "Invalid input. Please enter a valid number"
+                "InvalidNaN": "Invalid input. Please enter a valid number",
+                "CannotPlaceInArea": "Cannot place point at selected area. Please try again",
+                "SuccessWallHeight": "Successfully updated wall height"
             }
         },
         ja: {
@@ -231,7 +233,9 @@ i18n
                 "Saving": "保存",
                 "DeletePartition": "パーティション削除",
                 "ModifyPartition": "パーティションの変更",
-                "InvalidNaN": "値が不正です。正しい数値を入力してくさい。"
+                "InvalidNaN": "値が不正です。正しい数値を入力してくさい。",
+                "CannotPlaceInArea": "ここには設定できません。位置を変えて試してください。",
+                "SuccessWallHeight": "壁の高さが正常に更新されました"
             }
         }
     },

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

@@ -79,3 +79,4 @@ export declare function getNewlyAddedPartition(): Array<PartitionNode>;
 export declare function getDeletedSavedPartitionArray(): Array<PartitionNode>;
 export declare function getDrawingMode(): boolean;
 export declare function setDrawingMode(state: boolean): void;
+export declare function getCurrentPartitionDataArray(): PartitionNode[];

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

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import i18n from '../i18n';
 import { SPACE_EVENTS } from "../../../../types";
 import { batchAddEventListenerByClassName } from "../../../events";
-import { startDraw, cancelDraw, disposeModel, _3DXObjects, getCurrentPolygon, dispatchSpaceEvent, enableVerticeControls, setCurrentPolygon } from '../../../../architwin';
+import { startDraw, cancelDraw, disposeModel, _3DXObjects, getCurrentPolygon, dispatchSpaceEvent, enableVerticeControls, setCurrentPolygon, setMeshChildrenMaterialProperty, get3DXObjects, getChildrenOfModel, clearSelectedObject } from '../../../../architwin';
 import { generateUUID, extractUUID } from '../../../../utils';
 import { getCurrentEditRoomData } from './roomTreePane';
 import { toggleModal, setModalAction } from "../modal";
@@ -29,6 +29,7 @@ let currentEditRoomData = null;
 let notify = new Notyf({ position: { x: 'left', y: 'bottom' } });
 let newlyAddedPartition = [];
 let deletedSavedPartitionArray = [];
+let currentHighlightedFace = null;
 export function renderRoomFormPane() {
     console.info("__@ renderRoomFormPane");
     const element = document.createElement('div');
@@ -114,7 +115,8 @@ export function renderRoomFormPane() {
                 </div>
                 <div class="at_partition_footer">
                     <!-- Add Partition Button -->
-                    <div class="at_button at_draw_partition_btn" id="at-draw-partition-form-btn" data-cy="at-draw-partition-form-btn">
+                    <div class="at_button at_draw_partition_btn ${i18n.language === 'ja' ? 'at_draw_partition_btn_jp_font_size' : ''}" 
+                        id="at-draw-partition-form-btn" data-cy="at-draw-partition-form-btn">
                         ${i18n.t('AddPartition')}
                         <span class="mdi mdi-draw"></span>
                     </div>
@@ -173,6 +175,7 @@ export function toggleDrawPartitionButton() {
         }
         currentPolygonData = null;
         currentPartitionData = null;
+        currentEditPartitionData = null;
     }
 }
 /**
@@ -189,6 +192,10 @@ export function displayPartitionFormMode() {
         currentEditRoomData = getCurrentEditRoomData();
         populatePartitionForm(currentEditRoomData);
     }
+    else {
+        clearPartitionForm();
+        clearSelectedObject();
+    }
 }
 /**
  * Populates the partition form with the given room node data.
@@ -202,6 +209,7 @@ function populatePartitionForm(partition) {
     const name = document.getElementById('at-room-name-input');
     name.value = partition.name;
     const floorLevel = document.getElementById('at-room-floor-level-input');
+    const wallheight = document.getElementById('at-room-wall-height-input');
     const memo = document.getElementById('at-room-memo-input');
     if (partition.polygon_json != null) {
         memo.value = JSON.parse(partition.polygon_json).memo;
@@ -211,6 +219,7 @@ function populatePartitionForm(partition) {
     savedPartitionDataArray = partition.children;
     if (currentPartitionDataArray.length !== 0) {
         floorLevel.value = JSON.parse(partition.children[0].polygon_json).floor.floor_level;
+        wallheight.value = JSON.parse(partition.children[0].polygon_json).walls[0].wall_height;
         displayPartitions(currentPartitionDataArray);
     }
     // const objects = get3DXObjects()
@@ -304,9 +313,8 @@ function displayPartitions(partitions) {
         currentEditPartitionData = partitions.find(partition => partition.uuid === partitionId);
         const targetObject = _3DXObjects.find(obj => obj.object.object_data.uuid === partitionId);
         if (currentEditPartitionData) {
+            displayFaces(JSON.parse(currentEditPartitionData.polygon_json));
             editPartitionNameInput.value = currentEditPartitionData.name;
-            const polygonData = JSON.parse(currentEditPartitionData.polygon_json);
-            displayFaces(polygonData);
             const currentPolygon = {
                 node: targetObject.node,
                 component: targetObject.component,
@@ -432,19 +440,32 @@ function displayFaces(polygon) {
     console.log("displayFaces()", polygon);
     const faceVertexContainer = document.getElementById('at-face-vertex-container');
     faceVertexContainer.innerHTML = '';
+    const objectData = get3DXObjects();
+    let object;
+    if (currentEditPartitionData) {
+        object = objectData.find(obj => obj.object.object_data.uuid === currentEditPartitionData.uuid);
+    }
+    if (currentPartitionData) {
+        object = objectData.find(obj => obj.object.object_data.uuid === currentPartitionData.uuid);
+    }
+    const modelChildren = getChildrenOfModel(object.component).filter((model) => model.name !== '' && !model.name.includes('wallLabel') && !model.name.includes('edgeLabel'));
+    console.log("modelChildren", modelChildren);
     // Display the floor details
     if (polygon.floor) {
-        faceVertexContainer.appendChild(displayFloor(polygon.floor));
+        const floorModel = modelChildren.find(model => model.name.includes(polygon.floor.name));
+        faceVertexContainer.appendChild(displayFloor(polygon.floor, floorModel));
     }
     // Display each wall's details
     polygon.walls.forEach((wall) => {
-        faceVertexContainer.appendChild(displayWalls(wall));
+        const wallModel = modelChildren.find(model => model.name.includes(wall.name));
+        faceVertexContainer.appendChild(displayWalls(wall, wallModel));
     });
     // Back button event listener for displaying partition list
     addEventListenerById('at-back-partition', goBackToPartitionList);
     // Toggle visibility of face details when clicked
     batchAddEventListenerByClassName('at_face_name', (event) => {
         const targetElement = event.target;
+        console.log("targetElement", targetElement);
         const faceId = extractUUID(targetElement.id);
         const vertexItem = document.getElementById(`at-vertex-list-${faceId}`);
         const isHidden = vertexItem.style.display === 'none' || vertexItem.style.display === '';
@@ -453,38 +474,56 @@ function displayFaces(polygon) {
         const chevronIcon = document.getElementById(`at-expand-btn-${faceId}`).querySelector(isHidden ? '.mdi-chevron-down' : '.mdi-chevron-up');
         chevronIcon.classList.toggle('mdi-chevron-down');
         chevronIcon.classList.toggle('mdi-chevron-up');
-    });
-    batchAddEventListenerByClassName('at_face_item', (event) => __awaiter(this, void 0, void 0, function* () {
-        // Include click event on its children elements
-        const targetElement = event.target.closest('.at_face_item');
-        if (!targetElement)
-            return;
-        // Remove 'selected' class from all items
-        document.querySelectorAll('.at_face_item').forEach(item => {
-            item.classList.remove('selected');
-        });
-        document.querySelectorAll('.at_vertex_item').forEach(item => {
-            item.classList.remove('selected');
-        });
-        // Add 'selected' class to the clicked item
-        targetElement.classList.add('selected');
-    }));
-    batchAddEventListenerByClassName('at_vertex_item', (event) => __awaiter(this, void 0, void 0, function* () {
-        console.log("event", event);
-        // Include when clicked its children elements
-        const targetElement = event.target.closest('.at_vertex_item');
-        if (!targetElement)
-            return;
+        // Highlight line in the toolarbar
         // Remove 'selected' class from all items
         document.querySelectorAll('.at_face_item').forEach(item => {
             item.classList.remove('selected');
         });
-        document.querySelectorAll('.at_vertex_item').forEach(item => {
-            item.classList.remove('selected');
-        });
         // Add 'selected' class to the clicked item
-        targetElement.classList.add('selected');
-    }));
+        const parentElement = targetElement.closest('.at_face_item');
+        parentElement.classList.add('selected');
+        if (currentHighlightedFace) {
+            const object = getCurrentPolygon();
+            const modelChildren = getChildrenOfModel(object.component).filter((model) => model.name !== '' && !model.name.includes('wallLabel') && !model.name.includes('edgeLabel'));
+            console.log("modelChildren", modelChildren);
+            modelChildren.forEach(model => {
+                if (model.name === currentHighlightedFace.name) {
+                    if (currentHighlightedFace.name.includes('floor')) {
+                        setMeshChildrenMaterialProperty(object.component, model.name, 'color', 0x0000ff);
+                    }
+                    else {
+                        setMeshChildrenMaterialProperty(object.component, model.name, 'color', 0xffd150);
+                    }
+                }
+            });
+        }
+        let targetObject;
+        if (currentEditPartitionData) {
+            targetObject = _3DXObjects.find(obj => obj.object.object_data.uuid === currentEditPartitionData.uuid);
+        }
+        if (currentPartitionData) {
+            targetObject = _3DXObjects.find(obj => obj.object.object_data.uuid === currentPartitionData.uuid);
+        }
+        const modelId = targetElement.getAttribute("model-id");
+        if (modelId.includes('floor')) {
+            setMeshChildrenMaterialProperty(targetObject.component, modelId, 'color', 0x0096FF);
+            currentHighlightedFace = {
+                component: targetObject.component,
+                name: modelId,
+                type: 'color',
+                value: 0x0096FF
+            };
+        }
+        else {
+            setMeshChildrenMaterialProperty(targetObject.component, modelId, 'color', 0xFFF700);
+            currentHighlightedFace = {
+                component: targetObject.component,
+                name: modelId,
+                type: 'color',
+                value: 0xFFF700
+            };
+        }
+    });
 }
 /**
  * Handles the transition back to the partition list view by updating the visibility of relevant UI elements.
@@ -502,6 +541,7 @@ function goBackToPartitionList() {
     displayPartitions(currentPartitionDataArray);
     // Clear the current edit partition data
     currentEditPartitionData = null;
+    currentPartitionData = null;
     cancelDrawing();
     setDrawingMode(false);
 }
@@ -510,8 +550,8 @@ function goBackToPartitionList() {
  * @param floor - The floor data to display.
  * @returns The created HTML element representing the floor and its associated data.
  */
-function displayFloor(floor) {
-    console.log('displayFloor()', floor);
+function displayFloor(floor, floorModel) {
+    const floorModelUUID = floorModel ? floorModel.name : null;
     const element = document.createElement('div');
     element.classList.add('at_face_vertex_item');
     element.innerHTML = `
@@ -519,9 +559,9 @@ function displayFloor(floor) {
             <div class="at_icon_left">
                 <span class="mdi mdi-perspective-less"></span>
             </div>
-            <div class="at_face_name" id="at-expand-btn-${floor.uuid}" data-cy="at-expand-btn-${floor.uuid}">
-                ${i18n.t(`${floor.name}`)}
-                <span class="mdi mdi-chevron-down" id="at-expand-btn-${floor.uuid}" data-cy="at-expand-btn-${floor.uuid}"></span>
+            <div class="at_face_name" id="at-expand-btn-${floor.uuid}" data-cy="at-expand-btn-${floor.uuid}" model-id="${floorModelUUID}">
+                ${i18n.t(`Floor`)}
+                <span class="mdi mdi-chevron-down" id="at-expand-btn-${floor.uuid}" data-cy="at-expand-btn-${floor.uuid}" model-id="${floorModelUUID}"></span>
             </div>
             <div class="at_icon_right">
                 <span class="mdi mdi-delete-outline"></span>
@@ -553,13 +593,14 @@ function displayFloor(floor) {
  * @param wall - The wall data to display.
  * @returns The created HTML element representing the wall and its associated data.
  */
-function displayWalls(wall) {
-    console.log('displayWalls()', wall);
+function displayWalls(wall, wallModel) {
+    const wallModelUUID = wallModel ? wallModel.name : null;
     // Extract the wall name from the format "_wall-{number}" using regex
-    const match = wall.name.match(/_wall-(\d+)$/);
+    const match = wall.name.match(/wall-(\d+)$/);
     let wallName = '';
     if (match) {
-        wallName = `${i18n.t('Wall')} ${match[1]}`;
+        const wallNumber = parseInt(match[1]) + 1;
+        wallName = `${i18n.t('Wall')} ${wallNumber}`;
     }
     const element = document.createElement('div');
     element.classList.add('at_face_vertex_item');
@@ -568,9 +609,9 @@ function displayWalls(wall) {
             <div class="at_icon_left">
                 <span class="mdi mdi-perspective-less at_face_icon_rotate_270"></span>
             </div>
-            <div class="at_face_name" id="at-expand-btn-${wall.uuid}" data-cy="at-expand-btn-${wall.uuid}">
+            <div class="at_face_name" id="at-expand-btn-${wall.uuid}" data-cy="at-expand-btn-${wall.uuid}" model-id="${wallModelUUID}">
                 ${wallName}
-                <span class="mdi mdi-chevron-down" id="at-expand-btn-${wall.uuid}" data-cy="at-expand-btn-${wall.uuid}"></span>
+                <span class="mdi mdi-chevron-down" id="at-expand-btn-${wall.uuid}" data-cy="at-expand-btn-${wall.uuid}" model-id="${wallModelUUID}"></span>
             </div>
             <div class="at_icon_right at_invisible">
                 <span class="mdi mdi-delete-outline"></span>
@@ -671,6 +712,7 @@ export function clearPartitionForm() {
     newlyAddedPartition = [];
     deletedSavedPartitionArray = [];
     savedPartitionDataArray = [];
+    currentHighlightedFace = null;
 }
 /**
  * Cancels the drawing action for a partition.
@@ -680,6 +722,22 @@ export function clearPartitionForm() {
  */
 function cancelDrawing() {
     console.log('cancelDrawing()');
+    if (currentHighlightedFace) {
+        const object = getCurrentPolygon();
+        const modelChildren = getChildrenOfModel(object.component).filter((model) => model.name !== '' && !model.name.includes('wallLabel') && !model.name.includes('edgeLabel'));
+        console.log("modelChildren", modelChildren);
+        modelChildren.forEach(model => {
+            if (model.name === currentHighlightedFace.name) {
+                if (currentHighlightedFace.name.includes('floor')) {
+                    setMeshChildrenMaterialProperty(object.component, model.name, 'color', 0x0000ff);
+                }
+                else {
+                    setMeshChildrenMaterialProperty(object.component, model.name, 'color', 0xffd150);
+                }
+            }
+        });
+        currentHighlightedFace = null;
+    }
     cancelDraw();
     isDrawing = false;
     const drawRoomBtn = document.getElementById('at-draw-partition-form-btn');
@@ -719,11 +777,12 @@ function startDrawing() {
  * @returns {PartitionNode} The room data object with partition and floor details.
  */
 export function getPartitionFormData() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     console.log('getPartitionFormData()');
     const name = ((_a = document.getElementById('at-room-name-input')) === null || _a === void 0 ? void 0 : _a.value) || null;
-    const floorLevel = ((_b = document.getElementById('at-room-floor-level-input')) === null || _b === void 0 ? void 0 : _b.value) || null;
-    let memo = ((_c = document.getElementById('at-room-memo-input')) === null || _c === void 0 ? void 0 : _c.value) || null;
+    const wallheight = ((_b = document.getElementById('at-room-wall-height-input')) === null || _b === void 0 ? void 0 : _b.value) || null;
+    const floorLevel = ((_c = document.getElementById('at-room-floor-level-input')) === null || _c === void 0 ? void 0 : _c.value) || null;
+    let memo = ((_d = document.getElementById('at-room-memo-input')) === null || _d === void 0 ? void 0 : _d.value) || null;
     const currentUrl = window.location.href;
     const spaceUUID = extractUUID(currentUrl);
     let payload = {
@@ -739,6 +798,9 @@ export function getPartitionFormData() {
     currentPartitionDataArray.forEach(partition => {
         const polygonJson = JSON.parse(partition.polygon_json);
         polygonJson.floor.floor_level = Number(floorLevel);
+        polygonJson.walls.forEach(wall => {
+            wall.wall_height = Number(wallheight);
+        });
         partition.polygon_json = JSON.stringify(polygonJson);
     });
     if (currentEditRoomData) {
@@ -820,15 +882,14 @@ export function setPolygonData(payload) {
     // Set floor UUID and name
     if (payload.floor) {
         payload.floor.uuid = payload.floor.uuid || generateUUID();
-        payload.floor.name = `Floor`;
+        payload.floor.name = `floor`;
     }
     // Iterate over walls to set UUID and names
     if (payload.walls && payload.walls.length > 0) {
-        payload.walls = payload.walls.map((wall, index) => (Object.assign(Object.assign({}, roundToTwoDecimals(wall)), { name: `_wall-${index + 1}`, uuid: wall.uuid || generateUUID() })));
+        payload.walls = payload.walls.map((wall, index) => (Object.assign(Object.assign({}, roundToTwoDecimals(wall)), { name: `wall-${index}`, uuid: wall.uuid || generateUUID() })));
     }
     currentPolygonData = payload;
     console.log("setPolygonData() currentPolygonData:", currentPolygonData);
-    displayFaces(currentPolygonData);
 }
 /**
  * Returns current polygon data
@@ -880,10 +941,17 @@ export function setCurrentPartitionData() {
             if (currentEditRoomData) {
                 newPayload.parent_uuid = currentEditRoomData.uuid; // Set the parent UUID if editing an existing room
             }
+            if (currentEditPartitionData) {
+                newPayload.name = currentEditPartitionData.name;
+                currentPartitionDataArray = currentPartitionDataArray.map(partition => partition.uuid === currentEditPartitionData.uuid
+                    ? Object.assign(Object.assign({}, partition), { uuid: newPayload.uuid }) : partition);
+            }
+            if (currentHighlightedFace) {
+                setMeshChildrenMaterialProperty(currentHighlightedFace.component, currentHighlightedFace.name, currentHighlightedFace.type, currentHighlightedFace.value);
+            }
             updatePartitionDataArray(newPayload, currentPartitionDataArray);
             console.log("currentPartitionDataArray", currentPartitionDataArray);
-            // displayPartitions(currentPartitionDataArray);
-            // goBackToPartitionList()
+            displayFaces(currentPolygonData);
         }
         else {
             const faceVertexContainer = document.getElementById('at-face-vertex-container');
@@ -904,12 +972,12 @@ function updatePartitionDataArray(payload, currentPartitionDataArray) {
         currentPartitionDataArray.splice(existingIndex, 1);
     }
     payload.name = `${i18n.t('Partition')} ${currentPartitionDataArray.length + 1}`;
-    if (payload) {
+    currentPartitionDataArray.push(payload);
+    currentPartitionData = payload;
+    if (existingIndex === -1) {
         // Add the new partition
-        currentPartitionDataArray.push(payload);
         newlyAddedPartition.push(payload);
         console.log("newlyAddedPartition", payload);
-        currentPartitionData = payload;
     }
     dispatchSpaceEvent(SPACE_EVENTS.PARTITION_EDITED, { data: currentPartitionData });
 }
@@ -932,3 +1000,6 @@ export function setDrawingMode(state) {
     }
     isDrawing = state;
 }
+export function getCurrentPartitionDataArray() {
+    return currentPartitionDataArray;
+}

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

@@ -12,7 +12,7 @@ import { batchAddEventListenerByClassName, handleDeletePartition, handlePartitio
 import i18n from "../i18n";
 import { getCurrentPolygonData, setPartitionFormMode } from "./roomFormPane";
 import { SPACE_EVENTS } from "../../../../types";
-import { _3DXObjects, dispatchSpaceEvent, getChildrenOfModel, goToModel, renderPolygon } from "../../../../architwin";
+import { _3DXObjects, dispatchSpaceEvent, getChildrenOfModel, goToModel, renderPolygon, setSelectedObject } from "../../../../architwin";
 let roomDataArray = [];
 let currentEditRoomData = null;
 let currentSelectedPartitionId = null;
@@ -209,10 +209,11 @@ export function displayPartitionItems(partitionItems, partitionId, object) {
             console.log("__@ partition item: ", item);
             if (!item.hide) {
                 // Split wall name to localize
-                const match = item.name.match(/_wall-(\d+)$/);
+                const match = item.name.match(/wall-(\d+)$/);
+                const wallNumber = parseInt(match[1]) + 1;
                 const isVisible = item.options.is_visible;
                 itemsHTML += `
-                    <li class="at_toggle">${i18n.t(`Wall`)} ${match[1]}
+                    <li class="at_toggle">${i18n.t(`Wall`)} ${wallNumber}
                         <span id="${object[index].name}" partition-id="${partitionId}"  polygon-item-id="${item.uuid}" class="mdi ${isVisible ? 'mdi-eye ' : 'mdi-eye-off'} at_child_visible_btn at_pull_right"></span>
                     </li>
                 `;
@@ -224,7 +225,7 @@ export function displayPartitionItems(partitionItems, partitionId, object) {
         const isVisible = partitionItems.options.is_visible;
         if (!partitionItems.hide) {
             itemsHTML += `
-            <li class="at_toggle"> ${i18n.t(`${partitionItems.name}`)}
+            <li class="at_toggle"> ${i18n.t(`Floor`)}
                 <span id="${object.name}" partition-id="${partitionId}"  polygon-item-id="${partitionItems.uuid}" class="mdi ${isVisible ? 'mdi-eye ' : 'mdi-eye-off'} at_child_visible_btn at_pull_right"></span>
             </li>
         `;
@@ -281,7 +282,11 @@ function toggleSelectedPartition() {
                     const targetObjId = targetElement.getAttribute('object-id');
                     console.log("toggleSelectedPartition targetObjId: ", targetObjId);
                     if (targetObjId) {
-                        console.log("__@ Going to model...");
+                        const target = _3DXObjects.find(obj => obj.object.id == Number.parseInt(targetObjId));
+                        console.log("__@ Going to model... ", target);
+                        if (target) {
+                            setSelectedObject(target.object, target.node, target.component, target.type);
+                        }
                         yield goToModel(Number.parseInt(targetObjId));
                     }
                 });

package/lib/atwinui/events.js

@@ -23,7 +23,7 @@ import { isValidUrl, debounce, isElementVisible, extractUUID } from "../utils";
 import log from 'loglevel';
 import * as minimap from '../minimap';
 import { clearActiveThemeCard, getSelectedTheme } from "./components/toolbar/themePane";
-import { displayRoomTree, updatePartitionVisibilityUI, getSelectedPartitionId, updatePolygonVisibilityData, toggleVisibilityState, setFilteredDisplay, updateRoomVisibilityUI } from "./components/toolbar/spacePartition/roomTreePane";
+import { getCurrentEditRoomData, displayRoomTree, updatePartitionVisibilityUI, getSelectedPartitionId, updatePolygonVisibilityData, toggleVisibilityState, setFilteredDisplay, updateRoomVisibilityUI } from "./components/toolbar/spacePartition/roomTreePane";
 import { toggleDrawPartitionButton, displayPartitionFormMode, setPartitionFormMode, clearPartitionForm, setPolygonData, getPartitionFormData, getPartitionSavingMode, setPartitionSavingMode, getPartitionFormMode, getNewlyAddedPartition, setCurrentPartitionData, getCurrentPartitionData } from "./components/toolbar/spacePartition/roomFormPane";
 let activeToolbarItem, activeActionItem, activePane, activeActionPane, cancelTagPlacementPrompt, cancelModelPlacementPrompt;
 let notyf = new Notyf({ position: { x: 'left', y: 'bottom' }, duration: 4500, types: [
@@ -261,6 +261,7 @@ function setupIndividualEventListeners() {
     handleCancelPartition();
     //handleToggleFloorLevelInput()
     handleFloorLevelInputChange();
+    handleWallHeightInputChange();
     handleMarkFloor();
     handleSpacePartitionReport();
     handleUndoDrawAction();
@@ -1592,6 +1593,7 @@ function handleSavePartition() {
                 dispatchSpaceEvent(SPACE_EVENTS.PARTITION_EDITED, { data: partitionEditPayload });
                 break;
         }
+        clearSelectedObject();
         notyf.success(`${i18n.t('SuccessRoomSaved')}`);
     });
 }
@@ -1610,10 +1612,11 @@ function handleDeletePartition(targetId) {
             buttonLabel: `${i18n.t('YesDelete')}`
         }, () => {
             var _a;
-            const roomId = partitionId;
-            if (roomId && roomId !== null) {
-                const partitionRow = document.getElementById(`at-div-room-${roomId}`);
-                partitionRow.remove();
+            if (partitionId) { // #15482: new changes to fix room list UI
+                const partitionRow = document.getElementById(`at-div-room-${partitionId}`);
+                // Get the closest parent element (li)
+                const liElement = partitionRow.closest('.at_room_tree_parent');
+                liElement.remove();
                 dispatchSpaceEvent(SPACE_EVENTS.PARTITION_DISPOSED, targetPartition);
                 (_a = targetPartition.children) === null || _a === void 0 ? void 0 : _a.map(partition => {
                     const target = _3DXObjects.find(obj => obj.object.object_data.uuid === partition.uuid);
@@ -1645,9 +1648,11 @@ function handleCancelPartition() {
             setSpacePartitionNodes(filteredRoomNodes);
         });
         const objects = get3DXObjects();
-        const currentPartitionData = getCurrentPartitionData();
+        const currentPartitionData = getCurrentEditRoomData();
         if (currentPartitionData) {
-            const target = objects.find(obj => obj.object.object_data.uuid == currentPartitionData.uuid);
+            let partitionsUUIDs = [];
+            partitionsUUIDs = currentPartitionData.children.map(child => child.uuid);
+            const target = objects.find(obj => partitionsUUIDs.includes(obj.object.object_data.uuid));
             log.info("handleCancelPartition", {
                 currentPartitionData,
                 target
@@ -1655,15 +1660,22 @@ function handleCancelPartition() {
             if (target) {
                 setSelectedObject(target.object, target.node, target.component, target.type);
                 if (currentPartitionData) {
-                    const polyJson = typeof currentPartitionData.polygon_json === 'string' ? JSON.parse(currentPartitionData.polygon_json) : currentPartitionData.polygon_json;
-                    const updatedPath = polyJson.path;
-                    renderPolygon(updatedPath);
+                    const currentPartition = currentPartitionData.children.find(child => child.uuid == target.object.object_data.uuid);
+                    const polyJson = typeof currentPartition.polygon_json === 'string' ? JSON.parse(currentPartition.polygon_json) : currentPartition.polygon_json;
+                    if (polyJson && polyJson.path) {
+                        const payload = {
+                            uuid: target.object.object_data.uuid,
+                            polygon_json: polyJson
+                        };
+                        renderPolygon(payload);
+                    }
                 }
             }
         }
         else {
             log.warn('currentPartitionData is undefined');
         }
+        clearSelectedObject();
         toggleDisplayPane('at-cancel-room-form-btn');
         const drawHistory = {
             redoDrawActions: [],
@@ -1740,20 +1752,92 @@ function handleSpacePartitionReport() {
         log.error("Error report: ", error);
     }
 }
+function handleWallHeightInputChange() {
+    const wallHeightInput = document.getElementById('at-room-wall-height-input');
+    const handleInputChange = debounce(() => {
+        const newWallHeight = Number.parseFloat(wallHeightInput.value);
+        if (!isNaN(newWallHeight) && Math.sign(newWallHeight) == 1) {
+            const objects = get3DXObjects();
+            const latestObj = objects[objects.length - 1];
+            const currentPartitionData = getCurrentEditRoomData();
+            const currentPolygon = getCurrentPolygon();
+            log.info("latestObj ", latestObj);
+            log.info("wallHeight currentPartitionData ", currentPartitionData);
+            log.info("wallHeight _3DXObjects ", _3DXObjects);
+            if (currentPartitionData) {
+                let partitionsUUIDs = [];
+                partitionsUUIDs = currentPartitionData.children.map(child => child.uuid);
+                const target = objects.find(obj => partitionsUUIDs.includes(obj.object.object_data.uuid));
+                log.info("target ", target);
+                if (target) {
+                    setSelectedObject(target.object, target.node, target.component, target.type);
+                    const polyJson = target.object.object_data.json_data;
+                    if (polyJson) {
+                        polyJson.walls[0].wall_height = newWallHeight;
+                        const payload = {
+                            uuid: target.object.object_data.uuid,
+                            polygon_json: polyJson
+                        };
+                        renderPolygon(payload);
+                    }
+                    else {
+                        renderPolygon(polyJson.path, {
+                            wallHeight: newWallHeight
+                        });
+                    }
+                    notyf.success("Updated the partition's floor level");
+                }
+                else {
+                    log.error("No matching uuid for the polygon");
+                }
+            }
+            else if (currentPolygon) {
+                setSelectedObject(currentPolygon.object, currentPolygon.node, currentPolygon.component, currentPolygon.type);
+                const polyJson = currentPolygon.object.object_data.json_data;
+                if (polyJson.walls && polyJson.walls.length > 0) {
+                    polyJson.walls[0].wall_height = newWallHeight;
+                    const payload = {
+                        uuid: latestObj.object.object_data.uuid,
+                        polygon_json: polyJson
+                    };
+                    renderPolygon(payload);
+                }
+                else {
+                    renderPolygon(polyJson.path, {
+                        wallHeight: newWallHeight
+                    });
+                }
+                notyf.success(`${i18n.t('SuccessWallHeight')}`);
+            }
+            else {
+                log.warn("currentPartitionData and latestObj value is undefined or its type is not valid");
+            }
+        }
+        else {
+            notyf.error(`${i18n.t('InvalidNaN')}`);
+        }
+    }, 900);
+    wallHeightInput.addEventListener('input', handleInputChange);
+}
 function handleFloorLevelInputChange() {
     const floorLevelInput = document.getElementById('at-room-floor-level-input');
     // Function to handle input change
     const handleInputChange = debounce(() => {
         const newFloorLevel = Number.parseFloat(floorLevelInput.value);
+        const formMode = getPartitionFormMode();
         if (!isNaN(newFloorLevel)) {
+            //clearSelectedObject()
             setFloorBaseHeight(newFloorLevel);
             notyf.success(`${i18n.t('SuccessBaseHeight')}`);
             const objects = get3DXObjects();
             const latestObj = objects[objects.length - 1];
-            const currentPartitionData = getCurrentPartitionData();
+            const currentPartitionData = getCurrentEditRoomData();
+            const currentPolygon = getCurrentPolygon();
             log.info("latestObj ", latestObj);
             if (currentPartitionData) {
-                const target = objects.find(obj => obj.object.object_data.uuid == currentPartitionData.uuid);
+                let partitionsUUIDs = [];
+                partitionsUUIDs = currentPartitionData.children.map(child => child.uuid);
+                const target = objects.find(obj => partitionsUUIDs.includes(obj.object.object_data.uuid));
                 if (target) {
                     setSelectedObject(target.object, target.node, target.component, target.type);
                     const adjustedFloorBaseHeight = getFloorBaseHeight();
@@ -1769,8 +1853,8 @@ function handleFloorLevelInputChange() {
                     log.error("No matching uuid for the polygon");
                 }
             }
-            else if (latestObj && latestObj.type == 'POLYGON') {
-                setSelectedObject(latestObj.object, latestObj.node, latestObj.component, latestObj.type);
+            else if (currentPolygon) {
+                setSelectedObject(currentPolygon.object, currentPolygon.node, currentPolygon.component, currentPolygon.type);
                 const adjustedFloorBaseHeight = getFloorBaseHeight();
                 const polyJson = latestObj.object.object_data.json_data;
                 const updatedPath = polyJson.path.map(path => {
@@ -1781,7 +1865,7 @@ function handleFloorLevelInputChange() {
                 notyf.success("Updated the partition's floor level");
             }
             else {
-                log.error("currentPartitionData and latestObj value is undefined or its type is not valid");
+                log.warn("currentPartitionData and latestObj value is undefined or its type is not valid");
             }
         }
         else {
@@ -1801,51 +1885,51 @@ function handleMarkFloor() {
             yield getTargetPosition((coord) => {
                 const objects = get3DXObjects();
                 const latestObj = objects[objects.length - 1];
-                const currentPartitionData = getCurrentPartitionData();
+                const currentPartitionData = getCurrentEditRoomData();
                 const currentPolygon = getCurrentPolygon();
-                setFloorBaseHeight(coord.y);
-                const adjustedHeight = getFloorBaseHeight();
-                log.info("latestObj ", latestObj);
-                if (currentPolygon) {
-                    const polyJson = currentPolygon.object.object_data.json_data;
-                    const updatedPath = polyJson.path.map(path => {
-                        path.y = adjustedHeight;
-                        return path;
-                    });
-                    renderPolygon(updatedPath);
-                    notyf.success("Updated the current partition's floor level");
-                    // const target = objects.find(obj => obj.object.id == currentPartitionData.uuid)
-                    // if (target) {            
-                    //     setSelectedObject(target.object,target.node,target.component,target.type)
-                    //     const polyJson:PolygonData = target.object.object_data.json_data
-                    //     const updatedPath = polyJson.path.map(path => {
-                    //         path.y = adjustedHeight
-                    //         return path
-                    //     })
-                    //     renderPolygon(updatedPath)
-                    //     notyf.success("Updated the current partition's floor level")
-                    // }else{
-                    //     log.error("No matching uuid for the polygon")
-                    // }
+                if (Math.sign(coord.y) == 1) {
+                    setFloorBaseHeight(coord.y);
+                    const adjustedHeight = getFloorBaseHeight();
+                    log.info("latestObj ", latestObj);
+                    if (currentPartitionData) {
+                        let partitionsUUIDs = [];
+                        partitionsUUIDs = currentPartitionData.children.map(child => child.uuid);
+                        const target = objects.find(obj => partitionsUUIDs.includes(obj.object.object_data.uuid));
+                        if (target) {
+                            const polyJson = target.object.object_data.json_data;
+                            const updatedPath = polyJson.path.map(path => {
+                                path.y = adjustedHeight;
+                                return path;
+                            });
+                            renderPolygon(updatedPath);
+                            notyf.success("Updated the current partition's floor level");
+                        }
+                        else {
+                            log.warn("No matching uuid for the polygon");
+                        }
+                    }
+                    else if (currentPolygon) {
+                        //setSelectedObject(currentPolygon.object,currentPolygon.node,currentPolygon.component,currentPolygon.type)
+                        const polyJson = latestObj.object.object_data.json_data;
+                        const updatedPath = polyJson.path.map(path => {
+                            path.y = adjustedHeight;
+                            return path;
+                        });
+                        renderPolygon(updatedPath);
+                        notyf.success("Updated the partition's floor level");
+                    }
+                    else {
+                        log.warn("currentPolygon is undefined");
+                    }
+                    const floorLevelInput = document.getElementById('at-room-floor-level-input');
+                    if (floorLevelInput) {
+                        floorLevelInput.value = adjustedHeight.toFixed(4);
+                    }
+                    notyf.success(`${i18n.t('SuccessBaseHeight')}`);
                 }
-                // else if(latestObj && latestObj.type == 'POLYGON'){
-                //     setSelectedObject(latestObj.object,latestObj.node,latestObj.component,latestObj.type)
-                //     const polyJson:PolygonData = latestObj.object.object_data.json_data
-                //     const updatedPath = polyJson.path.map(path => {
-                //         path.y = adjustedHeight
-                //         return path
-                //     })
-                //     renderPolygon(updatedPath)
-                //     notyf.success("Updated the partition's floor level")
-                // }
                 else {
-                    log.warn("currentPolygon is undefined");
-                }
-                const floorLevelInput = document.getElementById('at-room-floor-level-input');
-                if (floorLevelInput) {
-                    floorLevelInput.value = adjustedHeight.toFixed(4);
+                    notyf.error(`${i18n.t('CannotPlaceInArea')}`);
                 }
-                notyf.success(`${i18n.t('SuccessBaseHeight')}`);
             });
         }));
     }

package/lib/loaders/polydrawerLoader.d.ts

@@ -126,6 +126,7 @@ export declare class BufferGeometry {
         floorData: any;
         polygonData: any;
         excludeHiddenWallsFromCalculation: boolean;
+        wallHeight: number;
     };
     outputs: Record<string, unknown> & MpSdk.Scene.PredefinedOutputs;
     context: MpSdk.Scene.IComponentContext;

package/lib/loaders/polydrawerLoader.js

@@ -464,7 +464,8 @@ export class BufferGeometry {
             wallData: [],
             floorData: undefined,
             polygonData: undefined,
-            excludeHiddenWallsFromCalculation: true
+            excludeHiddenWallsFromCalculation: true,
+            wallHeight: 2
         };
         this.emits = {
             changed: true,
@@ -503,7 +504,9 @@ export class BufferGeometry {
         };
         this.renderPolygon = () => {
             const THREE = this.context.three;
-            const WALL_HEIGHT = 2;
+            const polyData = this.inputs.polygonData;
+            console.log("polyData ", polyData);
+            const WALL_HEIGHT = polyData && polyData.walls[0].wall_height ? polyData.walls[0].wall_height : this.inputs.wallHeight;
             this.groupedMesh = new THREE.Group();
             let floorDataArray = [];
             let wallDataArray = [];
@@ -517,7 +520,6 @@ export class BufferGeometry {
                 transparent: true
             }));
             floorMesh.name = this.inputs.uuid != '' ? `${this.inputs.uuid}_floor` : 'floor';
-            const polyData = this.inputs.polygonData;
             const floorConfig = polyData ? polyData.floor : this.inputs.floorData;
             const floorDimension = PolygonCalculator.calculatePolygonProperties(this.inputs.path);
             if (floorConfig && floorConfig.options) {
@@ -566,6 +568,7 @@ export class BufferGeometry {
                 floor_sequence: currentFloor,
                 floor: floorData,
                 walls: wallDataArray,
+                wall_height: WALL_HEIGHT,
                 totalWallArea,
                 totalWallPerimeter,
                 options: {
@@ -721,9 +724,9 @@ export class BufferGeometry {
             };
             const wallEdges = vertices.map((v, i) => {
                 const edge = {
-                    start: v[i],
-                    edge: v[(i + 1) % vertices.length],
-                    length: wallLength
+                    start: v,
+                    edge: vertices[(i + 1) % vertices.length],
+                    length: new THREE.Vector3().subVectors(vertices[(i + 1) % vertices.length], v).length()
                 };
                 return edge;
             });

package/lib/types.d.ts

@@ -432,6 +432,7 @@ export interface ComponentOptions {
     wallData?: WallPolyData[] | undefined;
     floorData?: FloorPolyData | undefined;
     polygonData?: PolygonData | undefined;
+    wallHeight?: number | undefined;
 }
 export interface VectorCoords {
     object_position: Vector3;
@@ -1026,6 +1027,7 @@ export interface PolygonData {
     floor_sequence: MpSdk.Floor.FloorData;
     floor: FloorPolyData;
     walls: Array<WallPolyData>;
+    wall_height: number;
     totalWallArea?: number;
     totalWallPerimeter?: number;
 }

package/lib/utils.d.ts

@@ -8,7 +8,7 @@ export declare function generateUUID(config?: {
     separator?: string;
 }): string;
 export declare function generateRandomUsername(): string;
-export declare function useHexToRgb(hexcode: string): {
+export declare function useHexToRgb(hexcode: string | number): {
     r: number;
     g: number;
     b: number;

package/lib/utils.js

@@ -72,12 +72,19 @@ export function generateRandomUsername() {
     return username;
 }
 export function useHexToRgb(hexcode) {
-    // Remove '#' symbol if it exists
-    hexcode = hexcode.replace("#", "");
+    let hex;
+    if (typeof hexcode === "number") {
+        // Convert numeric hex to string and pad with leading zeros if needed
+        hex = hexcode.toString(16).padStart(6, "0");
+    }
+    else {
+        // Remove '#' if present
+        hex = hexcode.replace("#", "");
+    }
     // Parse hex values for red, green, and blue
-    const r = parseInt(hexcode.substring(0, 2), 16) / 255;
-    const g = parseInt(hexcode.substring(2, 4), 16) / 255;
-    const b = parseInt(hexcode.substring(4, 6), 16) / 255;
+    const r = parseInt(hex.substring(0, 2), 16) / 255;
+    const g = parseInt(hex.substring(2, 4), 16) / 255;
+    const b = parseInt(hex.substring(4, 6), 16) / 255;
     return { r, g, b };
 }
 export function useRgbToHex(color) {

package/package.json

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

package/static/atwinui.css

@@ -1049,14 +1049,22 @@
     background-color: black;
     border: solid white 2px;
     font-size: smaller;
-    padding: 5px 0.8em 5px;
+    padding: 6px 0.8em 4px;
     border-radius: 8px;
+    min-height: 31.3px;
+    align-items: center;
+    justify-content: center;
 }
 
+
 .at_draw_partition_btn {
     flex-grow: 2;
 }
 
+.at_draw_partition_btn_jp_font_size {
+    font-size: x-small;
+}
+
 .at_draw_partition_btn_active {
     background-color: var(--bg-accent);
     border: solid white 2px;