architwin 1.14.8 → 1.14.10

package/lib/loaders/polydrawerLoader.d.ts

@@ -1,6 +1,6 @@
 import { MpSdk } from "../../bundle/sdk";
 import { Pane } from 'tweakpane';
-import { EdgePolyData, WallPolyData } from "../types";
+import { EdgePolyData, PolygonData, WallPolyData, WindowPolyData } from "../types";
 export declare class TubeLine {
     mpSdk: MpSdk;
     mesh: THREE.Mesh;
@@ -39,7 +39,11 @@ export declare class TubeLine {
         scrollSpeed: number;
         collider: boolean;
         visible: boolean;
+        drawingMode: string;
+        targetIndex: any;
+        polygonData: any;
         renderPolygonOnAdd: boolean;
+        targetUUID: any;
     };
     outputs: Record<string, unknown> & MpSdk.Scene.PredefinedOutputs;
     context: MpSdk.Scene.IComponentContext;
@@ -119,6 +123,7 @@ export declare class BufferGeometry {
         floorName: string;
         floorColor: number;
         wallColor: number;
+        windowColor: number;
         floorOpacity: number;
         wallOpacity: number;
         visible: boolean;
@@ -128,6 +133,10 @@ export declare class BufferGeometry {
         excludeHiddenWallsFromCalculation: boolean;
         wallHeight: number;
         floorLevel: any;
+        drawingMode: string;
+        windowData: any;
+        targetIndex: any;
+        targetUUID: any;
     };
     outputs: Record<string, unknown> & MpSdk.Scene.PredefinedOutputs;
     context: MpSdk.Scene.IComponentContext;
@@ -147,9 +156,10 @@ export declare class BufferGeometry {
     onInit: () => void;
     onTick: (delta: any) => void;
     onDestroy(): void;
-    renderWall(): void;
     createLabelCanvas(text: string): HTMLCanvasElement;
-    renderWalls(WALL_HEIGHT: number): (WallPolyData[] | EdgePolyData[])[];
+    renderWindow(WALL_HEIGHT: number): void;
+    renderWalls(WALL_HEIGHT: number, metadata?: PolygonData): (WallPolyData[] | EdgePolyData[])[];
+    renderWindows(windows: WindowPolyData[]): void;
     renderPolygon: () => void;
 }
 export declare const bufferGeometryType = "bufferGeometry";

package/lib/loaders/polydrawerLoader.js

@@ -4,6 +4,7 @@ import { SPACE_EVENTS } from "../types";
 import { getPolygonArea } from "../utils";
 import { PolygonCalculator, WallCalculator } from "../math";
 import i18n from "../atwinui/components/toolbar/i18n";
+import log from "loglevel";
 export class TubeLine {
     constructor(mpSdk) {
         this.time = 0;
@@ -34,7 +35,11 @@ export class TubeLine {
             scrollSpeed: 1.35,
             collider: true,
             visible: false,
-            renderPolygonOnAdd: true
+            drawingMode: 'floor',
+            targetIndex: undefined,
+            polygonData: undefined,
+            renderPolygonOnAdd: true,
+            targetUUID: undefined,
         };
         //@ts-expect-error
         this.outputs = {
@@ -77,11 +82,21 @@ export class TubeLine {
                 if (this.inputs.path.length > 1) {
                     this.renderTubeLine();
                     console.log("paths ", this.inputs.path);
-                    if (isToolbarFeatureEnabled('roomCreation') && this.inputs.path.length >= 3 && this.inputs.renderPolygonOnAdd) {
+                    if (isToolbarFeatureEnabled('roomCreation') && this.inputs.path.length >= 3 && this.inputs.drawingMode == 'window') {
+                        const options = {
+                            drawingMode: this.inputs.drawingMode,
+                            targetIndex: this.inputs.targetIndex,
+                            polygonData: this.inputs.polygonData,
+                            targetUUID: this.inputs.targetUUID
+                        };
+                        renderPolygon(this.inputs.path, options);
+                    }
+                    else if (isToolbarFeatureEnabled('roomCreation') && this.inputs.path.length >= 3 && this.inputs.renderPolygonOnAdd) {
                         const wallHeight = getWallBaseHeight();
                         if (wallHeight) {
                             const options = {
-                                wallHeight: wallHeight
+                                wallHeight: wallHeight,
+                                drawingMode: this.inputs.drawingMode
                             };
                             renderPolygon(this.inputs.path, options);
                         }
@@ -481,6 +496,8 @@ export class BufferGeometry {
             floorName: '',
             floorColor: 0x0000ff,
             wallColor: 0xffd150,
+            // windowColor : 0xEAF2EF,
+            windowColor: 0xC09672,
             floorOpacity: 0.3,
             wallOpacity: 0.6,
             visible: true,
@@ -489,7 +506,11 @@ export class BufferGeometry {
             polygonData: undefined,
             excludeHiddenWallsFromCalculation: true,
             wallHeight: 2,
-            floorLevel: undefined
+            floorLevel: undefined,
+            drawingMode: 'floor',
+            windowData: undefined,
+            targetIndex: undefined,
+            targetUUID: undefined,
         };
         this.emits = {
             changed: true,
@@ -557,13 +578,13 @@ export class BufferGeometry {
             const polyGeometry = new THREE.ShapeGeometry(polyShape);
             polyGeometry.rotateX(Math.PI / 2);
             const floorMesh = new THREE.Mesh(polyGeometry, new THREE.MeshBasicMaterial({
-                color: this.inputs.floorColor,
+                color: this.inputs.drawingMode == 'floor' ? this.inputs.floorColor : this.inputs.windowColor,
                 side: THREE.DoubleSide,
                 opacity: this.inputs.floorOpacity,
                 transparent: true
             }));
             floorMesh.translateY(floorLevel);
-            floorMesh.name = this.inputs.uuid != '' ? `${this.inputs.uuid}_floor` : 'floor';
+            floorMesh.name = this.inputs.uuid != '' ? `${this.inputs.uuid}_${this.inputs.drawingMode}` : `${this.inputs.drawingMode}`;
             const floorConfig = polyData ? polyData.floor : this.inputs.floorData;
             const floorDimension = PolygonCalculator.calculatePolygonProperties(this.inputs.path);
             if (floorConfig && floorConfig.options) {
@@ -574,54 +595,185 @@ export class BufferGeometry {
                 // }
             }
             this.groupedMesh.add(floorMesh);
-            const floorArea = getPolygonArea(this.inputs.path);
-            let [floors, walls] = this.renderWalls(WALL_HEIGHT);
-            floorDataArray = floors;
-            wallDataArray = walls;
-            //end of wall loop
-            const floorData = {
-                options: {
-                    color: this.inputs.floorColor,
-                    opacity: this.inputs.floorOpacity,
-                    is_visible: floorMesh.visible
-                },
-                area: floorDimension.area,
-                perimeter: floorDimension.perimeter,
-                floor_level: floorLevel,
-                edges: floorDataArray
-            };
-            if (polyData && polyData.floor.uuid) {
-                floorData.uuid = polyData.floor.uuid;
+            try {
+                let twiceSignedArea = 0;
+                let centroidX = 0;
+                let centroidZ = 0;
+                for (let i = 0; i < shapeCoords.length; i++) {
+                    const p1 = shapeCoords[i];
+                    const p2 = shapeCoords[(i + 1) % shapeCoords.length];
+                    const cross = p1.x * p2.y - p2.x * p1.y;
+                    twiceSignedArea += cross;
+                    centroidX += (p1.x + p2.x) * cross;
+                    centroidZ += (p1.y + p2.y) * cross;
+                }
+                let centerX;
+                let centerZ;
+                if (Math.abs(twiceSignedArea) > 1e-8) {
+                    const polygonArea = twiceSignedArea * 0.5;
+                    centerX = centroidX / (6 * polygonArea);
+                    centerZ = centroidZ / (6 * polygonArea);
+                }
+                else {
+                    // Fallback: average of vertices
+                    const sum = shapeCoords.reduce((acc, p) => ({ x: acc.x + p.x, z: acc.z + p.y }), { x: 0, z: 0 });
+                    centerX = sum.x / shapeCoords.length;
+                    centerZ = sum.z / shapeCoords.length;
+                }
+                const floorMaterial = polyData && polyData.floor.material ? polyData.floor.material : undefined;
+                // const floorLabelText = `Floor_Cement: ${floorDimension.area.toFixed(2)}m²`;
+                const floorLabelText = `Floor ${floorMaterial ? '_' + floorMaterial : ' (' + i18n.t('Area') + ')'} : ${floorDimension.area.toFixed(2)}m²`;
+                // const floorLabelText = `${floorMaterial ? floorMaterial : i18n.t('Area')}: ${floorDimension.area.toFixed(2)}m²`;
+                const floorCanvas = this.createLabelCanvas(floorLabelText);
+                const labelWidth = Math.max(1, Math.min(5, Math.sqrt(Math.max(0.0001, floorDimension.area))));
+                const labelHeight = labelWidth / 4;
+                const floorLabelGeometry = new THREE.PlaneGeometry(labelWidth, labelHeight);
+                const floorLabelMaterial = new THREE.MeshBasicMaterial({
+                    map: new THREE.CanvasTexture(floorCanvas),
+                    transparent: true,
+                    side: THREE.DoubleSide,
+                });
+                const floorCenterLabel = new THREE.Mesh(floorLabelGeometry, floorLabelMaterial);
+                // Lay flat on the floor (XZ plane) and slightly offset in Y to avoid z-fighting
+                floorCenterLabel.rotation.x = -Math.PI / 2;
+                floorCenterLabel.position.set(centerX, floorLevel + 0.02, centerZ);
+                floorCenterLabel.name = this.inputs.uuid != '' ? `${this.inputs.uuid}_floorCenterLabel` : `floorCenterLabel`;
+                if (floorConfig && floorConfig.options) {
+                    floorCenterLabel.visible = floorConfig.options.is_visible;
+                }
+                this.floorLabels.push(floorCenterLabel);
+                this.groupedMesh.add(floorCenterLabel);
             }
-            let totalWallArea = 0;
-            let totalWallLength = 0;
-            for (let index = 0; index < wallDataArray.length; index++) {
-                if (wallDataArray[index].options && wallDataArray[index].options.is_deleted) {
-                    continue;
+            catch (e) {
+                log.error('Error creating floor center label', e);
+            }
+            const floorArea = getPolygonArea(this.inputs.path);
+            let partitionData = undefined;
+            if (this.inputs.drawingMode == 'floor') {
+                let [floors, walls] = this.renderWalls(WALL_HEIGHT, polyData);
+                floorDataArray = floors;
+                wallDataArray = walls;
+                //end of wall loop
+                const floorData = {
+                    options: {
+                        color: this.inputs.floorColor,
+                        opacity: this.inputs.floorOpacity,
+                        is_visible: floorMesh.visible
+                    },
+                    area: floorDimension.area,
+                    perimeter: floorDimension.perimeter,
+                    floor_level: floorLevel,
+                    edges: floorDataArray,
+                    material: polyData && polyData.floor.material ? polyData.floor.material : undefined
+                };
+                if (polyData && polyData.floor.uuid) {
+                    if (polyData.floor.uuid)
+                        floorData.uuid = polyData.floor.uuid;
+                    if (polyData.floor.material)
+                        floorData.material = polyData.floor.material;
                 }
-                if (this.inputs.excludeHiddenWallsFromCalculation && wallDataArray[index].options && wallDataArray[index].options.is_visible == false) {
-                    continue;
+                let totalWallArea = 0;
+                let totalWallLength = 0;
+                for (let index = 0; index < wallDataArray.length; index++) {
+                    if (wallDataArray[index].options && wallDataArray[index].options.is_deleted) {
+                        continue;
+                    }
+                    if (this.inputs.excludeHiddenWallsFromCalculation && wallDataArray[index].options && wallDataArray[index].options.is_visible == false) {
+                        continue;
+                    }
+                    totalWallArea += wallDataArray[index].area;
+                    totalWallLength += wallDataArray[index].width;
+                }
+                const totalWallPerimeter = totalWallLength + (WALL_HEIGHT * 2);
+                //WINDOW RENDERING
+                try {
+                    if (polyData && polyData.walls && polyData.walls.length) {
+                        log.info("polyData.walls ", polyData.walls);
+                        const windowsPolyData = polyData.walls.reduce((acc, wall, index) => {
+                            if (wall.windows && wall.windows.length > 0) {
+                                acc = [...acc, ...wall.windows];
+                                wallDataArray[index].windows = wall.windows;
+                            }
+                            return acc;
+                        }, []);
+                        this.renderWindows(windowsPolyData);
+                    }
                 }
-                totalWallArea += wallDataArray[index].area;
-                totalWallLength += wallDataArray[index].width;
+                catch (error) {
+                    log.error("Error rendering windows ", error);
+                }
+                //this.mesh = this.groupedMesh;
+                const currentOffsetValue = getPolygonFloorOffset();
+                const currentFloor = getCurrentFloor();
+                partitionData = {
+                    path: this.inputs.path,
+                    floor_offset: currentOffsetValue,
+                    floor_sequence: currentFloor,
+                    floor: floorData,
+                    walls: wallDataArray,
+                    wall_height: WALL_HEIGHT,
+                    totalWallArea,
+                    totalWallPerimeter,
+                    options: {
+                        is_visible: this.inputs.visible
+                    }
+                };
+                console.log("floor mode partitionData ", partitionData);
             }
-            const totalWallPerimeter = totalWallLength + (WALL_HEIGHT * 2);
-            //this.mesh = this.groupedMesh;
-            const currentOffsetValue = getPolygonFloorOffset();
-            const currentFloor = getCurrentFloor();
-            const partitionData = {
-                path: this.inputs.path,
-                floor_offset: currentOffsetValue,
-                floor_sequence: currentFloor,
-                floor: floorData,
-                walls: wallDataArray,
-                wall_height: WALL_HEIGHT,
-                totalWallArea,
-                totalWallPerimeter,
-                options: {
-                    is_visible: this.inputs.visible
+            //IF DRAWING WINDOWS
+            else if (this.inputs.drawingMode == 'window' && this.inputs.polygonData && this.inputs.targetIndex != undefined) {
+                const polyData = this.inputs.polygonData;
+                const targetWallIndex = polyData.walls.findIndex(wall => wall.uuid == this.inputs.targetUUID);
+                if (targetWallIndex != undefined) {
+                    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);
+                    let windowDataArray = [];
+                    for (let i = 0; i < this.inputs.path.length; i++) {
+                        const startPoint = this.inputs.path[i];
+                        const endPoint = this.inputs.path[(i + 1) % this.inputs.path.length];
+                        const windowLength = new THREE.Vector3(endPoint.x - startPoint.x, endPoint.y - startPoint.y, endPoint.z - startPoint.z).length();
+                        const windowEdges = {
+                            start: startPoint,
+                            end: endPoint,
+                            length: windowLength
+                        };
+                        windowDataArray.push(windowEdges);
+                    }
+                    let windowName = `${this.inputs.uuid}_window-${this.inputs.targetIndex + 1}`;
+                    let windowMaterial = undefined;
+                    if (polyData.walls[targetWallIndex] && polyData.walls[targetWallIndex].windows[this.inputs.targetIndex]) {
+                        const currWindow = polyData.walls[targetWallIndex].windows[this.inputs.targetIndex];
+                        if (currWindow.name)
+                            windowName = currWindow.name;
+                        if (currWindow.material)
+                            windowMaterial = currWindow.material;
+                    }
+                    const windowData = {
+                        path: this.inputs.path,
+                        name: windowName,
+                        index: this.inputs.targetIndex,
+                        options: {
+                            color: this.inputs.windowColor,
+                            is_visible: true,
+                            is_deleted: false
+                        },
+                        area: windowDimension.area,
+                        edges: windowDataArray,
+                        material: windowMaterial
+                    };
+                    try {
+                        const window = [windowData];
+                        this.renderWindows(window);
+                    }
+                    catch (error) {
+                        log.error("Error rendering windows ", error);
+                    }
+                    polyData.walls[targetWallIndex].windows[this.inputs.targetIndex] = (windowData);
+                    partitionData = polyData;
                 }
-            };
+            }
             dispatchSpaceEvent(SPACE_EVENTS.PARTITION_UPDATED, partitionData);
             console.log("Polygon mesh ", this.groupedMesh, partitionData);
             console.log("partitionData ", partitionData);
@@ -652,9 +804,6 @@ export class BufferGeometry {
         this.mesh.geometry.dispose();
     }
     ;
-    renderWall() {
-    }
-    ;
     createLabelCanvas(text) {
         const canvas = document.createElement('canvas');
         const wallContext = canvas.getContext('2d');
@@ -668,7 +817,16 @@ export class BufferGeometry {
         return canvas;
     }
     ;
-    renderWalls(WALL_HEIGHT) {
+    renderWindow(WALL_HEIGHT) {
+        // const THREE = this.context.three
+        // const windowData:WindowPolyData = this.inputs.windowData
+        // const windowGeometry = new THREE.BoxGeometry(windowData.width, windowData.height, windowData.depth)
+        // const windowMesh = new THREE.Mesh(windowGeometry, new THREE.MeshBasicMaterial({color: windowData.color}))
+        // windowMesh.position.set(windowData.position.x, windowData.position.y, windowData.position.z)
+        // windowMesh.name = windowData.uuid != '' ? `${windowData.uuid}_window` : 'window'
+        // this.groupedMesh.add(windowMesh)
+    }
+    renderWalls(WALL_HEIGHT, metadata) {
         const THREE = this.context.three;
         let floorDataArray = [];
         let wallDataArray = [];
@@ -708,7 +866,11 @@ export class BufferGeometry {
             const wallLength = new THREE.Vector3(endPoint.x - startPoint.x, endPoint.y - startPoint.y, endPoint.z - startPoint.z).length();
             const wallArea = wallLength * WALL_HEIGHT;
             // Create wall label
-            const wallCanvas = this.createLabelCanvas(`${i18n.t('Wall')} ${i + 1} (${i18n.t('Area')}): ${wallArea.toFixed(2)}m²`);
+            let wallMaterial;
+            if (metadata && metadata.walls[i] && metadata.walls[i].material)
+                wallMaterial = metadata.walls[i].material;
+            const wallCanvas = this.createLabelCanvas(`${i18n.t('Wall')} ${i + 1}${wallMaterial ? '_' + wallMaterial : ' (' + i18n.t('Area') + ')'}: ${wallArea.toFixed(2)}m²`);
+            // const wallCanvas = this.createLabelCanvas(`${i18n.t('Wall')} ${i+1}_Wood: ${wallArea.toFixed(2)}m²`)
             // Create floor edge label
             const floorCanvas = this.createLabelCanvas(`${i18n.t('Wall')} ${i + 1} (${i18n.t('Edge')}): ${wallLength.toFixed(2)}m`);
             const midPoint = {
@@ -817,7 +979,8 @@ export class BufferGeometry {
                 width: wallDimensions.width,
                 perimeter: wallDimensions.perimeter,
                 wall_height: WALL_HEIGHT,
-                edges: wallEdges
+                edges: wallEdges,
+                material: wallMaterial ? wallMaterial : undefined
             };
             if (polyData && polyData.walls[i].uuid) {
                 wallData.uuid = polyData.walls[i].uuid;
@@ -828,6 +991,117 @@ export class BufferGeometry {
         return [floorDataArray, wallDataArray];
     }
     ;
+    renderWindows(windows) {
+        const THREE = this.context.three;
+        log.info("renderWindows ", windows);
+        if (windows && windows.length > 0) {
+            for (let i = 0; i < windows.length; i++) {
+                const path3D = windows[i].path;
+                if (!path3D || path3D.length < 3) {
+                    continue;
+                }
+                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) {
+                    continue;
+                }
+                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));
+                }
+                const windowShape = new THREE.Shape();
+                windowShape.moveTo(shapePoints2D[0].x, shapePoints2D[0].y);
+                for (let j = 1; j < shapePoints2D.length; j++) {
+                    windowShape.lineTo(shapePoints2D[j].x, shapePoints2D[j].y);
+                }
+                windowShape.lineTo(shapePoints2D[0].x, shapePoints2D[0].y);
+                const windowGeometry = new THREE.ShapeGeometry(windowShape);
+                const basisMatrix = new THREE.Matrix4().makeBasis(uAxis, vAxis, normal);
+                const translation = new THREE.Matrix4().makeTranslation(p0.x, p0.y, p0.z);
+                const worldMatrix = new THREE.Matrix4().multiplyMatrices(translation, basisMatrix);
+                // Apply a small offset along the wall normal to avoid z-fighting with coplanar planes
+                const offset = -0.05;
+                const offsetMatrix = new THREE.Matrix4().makeTranslation(normal.x * offset, normal.y * offset, normal.z * offset);
+                const finalMatrix = new THREE.Matrix4().multiplyMatrices(offsetMatrix, worldMatrix);
+                windowGeometry.applyMatrix4(finalMatrix);
+                windowGeometry.computeVertexNormals();
+                const windowMesh = new THREE.Mesh(windowGeometry, new THREE.MeshBasicMaterial({
+                    color: this.inputs.windowColor,
+                    side: THREE.DoubleSide,
+                    opacity: 1,
+                    transparent: true,
+                    depthWrite: false
+                }));
+                windowMesh.name = windows[i].uuid ? `${windows[i].uuid}_window` : `window-${i}`;
+                // Add window center label if material is defined
+                if (windows[i].material) {
+                    try {
+                        let twiceSignedArea = 0;
+                        let centroidU = 0;
+                        let centroidV = 0;
+                        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;
+                            centroidU += (p1.x + p2.x) * cross;
+                            centroidV += (p1.y + p2.y) * cross;
+                        }
+                        let centerU;
+                        let centerV;
+                        if (Math.abs(twiceSignedArea) > 1e-8) {
+                            const polygonArea = twiceSignedArea * 0.5;
+                            centerU = centroidU / (6 * polygonArea);
+                            centerV = centroidV / (6 * polygonArea);
+                        }
+                        else {
+                            const sum = shapePoints2D.reduce((acc, p) => ({ x: acc.x + p.x, y: acc.y + p.y }), { x: 0, y: 0 });
+                            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);
+                        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;
+                        const windowLabelGeometry = new THREE.PlaneGeometry(labelWidth, labelHeight);
+                        const windowLabelMaterial = new THREE.MeshBasicMaterial({
+                            map: new THREE.CanvasTexture(windowCanvas),
+                            transparent: true,
+                            side: THREE.DoubleSide,
+                        });
+                        const windowCenterLabel = new THREE.Mesh(windowLabelGeometry, windowLabelMaterial);
+                        const center3D = new THREE.Vector3()
+                            .addScaledVector(uAxis, centerU)
+                            .addScaledVector(vAxis, centerV)
+                            .add(p0);
+                        const labelOffset = 0.01;
+                        windowCenterLabel.position.copy(center3D).addScaledVector(normal.clone().negate(), labelOffset);
+                        windowCenterLabel.lookAt(windowCenterLabel.position.clone().add(normal.clone().negate()));
+                        windowCenterLabel.name = windows[i].uuid ? `${windows[i].uuid}_windowLabel` : `windowLabel-${i}`;
+                        this.groupedMesh.add(windowCenterLabel);
+                    }
+                    catch (e) {
+                        log.error('Error creating window center label', e);
+                    }
+                }
+                this.groupedMesh.add(windowMesh);
+            }
+        }
+    }
 }
 export const bufferGeometryType = 'bufferGeometry';
 export const bufferGeometry = function (mpSdk) {

package/lib/math/geometry.d.ts

@@ -1,10 +1,11 @@
 export declare class PolygonCalculator {
     /**
-     * Calculates both area and perimeter of a polygon floor from 3D coordinates
+     * Calculates both area and perimeter of a polygon from 3D coordinates
      * @param {Array<{x: number, y: number, z: number}>} coordinates - Array of 3D points
+     * @param {boolean} useVerticalPlane - If true, uses XY plane for vertical polygons. If false, uses XZ plane for horizontal polygons
      * @returns {{area: number, perimeter: number}} Object containing area and perimeter
      */
-    static calculatePolygonProperties(coordinates: any): {
+    static calculatePolygonProperties(coordinates: any, useVerticalPlane?: boolean): {
         area: number;
         perimeter: number;
     };

package/lib/math/geometry.js

@@ -49,11 +49,12 @@
 // }
 export class PolygonCalculator {
     /**
-     * Calculates both area and perimeter of a polygon floor from 3D coordinates
+     * Calculates both area and perimeter of a polygon from 3D coordinates
      * @param {Array<{x: number, y: number, z: number}>} coordinates - Array of 3D points
+     * @param {boolean} useVerticalPlane - If true, uses XY plane for vertical polygons. If false, uses XZ plane for horizontal polygons
      * @returns {{area: number, perimeter: number}} Object containing area and perimeter
      */
-    static calculatePolygonProperties(coordinates) {
+    static calculatePolygonProperties(coordinates, useVerticalPlane = false) {
         if (!Array.isArray(coordinates) || coordinates.length < 3) {
             throw new Error('At least 3 coordinates are required to form a polygon');
         }
@@ -62,19 +63,32 @@ export class PolygonCalculator {
         for (let i = 0; i < coordinates.length; i++) {
             const point1 = coordinates[i];
             const point2 = coordinates[(i + 1) % coordinates.length];
-            // Calculate distance between two points in XZ plane (floor plane)
-            const distance = Math.sqrt(Math.pow(point2.x - point1.x, 2) +
-                Math.pow(point2.z - point1.z, 2) // Using Z instead of Y for floor plane
-            );
+            let distance;
+            if (useVerticalPlane) {
+                // Calculate distance between two points in XY plane (vertical plane for windows)
+                distance = Math.sqrt(Math.pow(point2.x - point1.x, 2) +
+                    Math.pow(point2.y - point1.y, 2));
+            }
+            else {
+                // Calculate distance between two points in XZ plane (floor plane)
+                distance = Math.sqrt(Math.pow(point2.x - point1.x, 2) +
+                    Math.pow(point2.z - point1.z, 2));
+            }
             perimeter += distance;
         }
-        // Calculate area using the Shoelace formula on XZ plane
+        // Calculate area using the Shoelace formula
         let area = 0;
         for (let i = 0; i < coordinates.length; i++) {
             const point1 = coordinates[i];
             const point2 = coordinates[(i + 1) % coordinates.length];
-            // Use X and Z coordinates for area calculation since it's a floor
-            area += (point1.x * point2.z - point2.x * point1.z);
+            if (useVerticalPlane) {
+                // Use X and Y coordinates for area calculation (vertical plane for windows)
+                area += (point1.x * point2.y - point2.x * point1.y);
+            }
+            else {
+                // Use X and Z coordinates for area calculation (horizontal plane for floors)
+                area += (point1.x * point2.z - point2.x * point1.z);
+            }
         }
         area = Math.abs(area) / 2;
         return {