architwin 1.15.4 → 1.15.6

package/lib/loaders/polydrawerLoader.js

@@ -1,5 +1,5 @@
 import { Pane } from 'tweakpane';
-import { dispatchSpaceEvent, renderPolygon, getPolygonFloorOffset, getCurrentFloor, getWallBaseHeight, getFloorBaseHeight, isToolbarFeatureEnabled } from "../architwin";
+import { dispatchSpaceEvent, renderPolygon, getPolygonFloorOffset, getCurrentFloor, getWallBaseHeight, getFloorBaseHeight, isToolbarFeatureEnabled, getDrawingConfig, getVertexPath } from "../architwin";
 import { SPACE_EVENTS } from "../types";
 import { getPolygonArea } from "../utils";
 import { PolygonCalculator, WallCalculator } from "../math";
@@ -184,6 +184,10 @@ export class TubeLine {
             if (this.panel) {
                 this.panel.refresh();
             }
+            dispatchSpaceEvent(SPACE_EVENTS.PATH_UPDATED, {
+                path: this.inputs.path,
+                textColor: this.inputs.textColor
+            });
         };
         this.setBillboard = (value) => {
             this.billboard = value;
@@ -367,13 +371,14 @@ export const tubeLineFactory = function (mpSdk) {
 };
 export class Vertice {
     constructor(mpSdk) {
+        this.cachedWallNormal = null;
         this.inputs = {
             index: null,
             radius: 0.1,
             position: null,
             fillColor: 'rgb(0,255,0)',
             hoverColor: 'rgb(255,0,0)',
-            ringVisibility: false
+            ringVisibility: false,
         };
         this.emits = {
             active: true,
@@ -418,18 +423,70 @@ export class Vertice {
         };
         this.mpSdk = mpSdk;
     }
+    calculateWallNormalFromVertices() {
+        const vertexPath = getVertexPath();
+        if (!vertexPath || vertexPath.length < 3) {
+            return null;
+        }
+        const THREE = this.context.three;
+        const p0 = new THREE.Vector3(vertexPath[0].x, vertexPath[0].y, vertexPath[0].z);
+        const p1 = new THREE.Vector3(vertexPath[1].x, vertexPath[1].y, vertexPath[1].z);
+        const p2 = new THREE.Vector3(vertexPath[2].x, vertexPath[2].y, vertexPath[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) {
+            // Vertices are collinear, can't determine plane
+            return null;
+        }
+        return normal.normalize();
+    }
     onEvent(eventType, data) {
         var _a;
         if (eventType === 'INTERACTION.DRAG') {
             //this.pointerIntersection.object  === 'intersectedobject.model'
             if (this.pointerIntersection.object) {
                 let e = Object.assign({}, this.pointerIntersection.position);
-                const floorLevel = getFloorBaseHeight();
-                if (floorLevel != undefined) {
-                    e.y = floorLevel;
+                const drawingConfig = getDrawingConfig();
+                // Apply floor level constraint only for non-window modes
+                if (!drawingConfig || drawingConfig.lineTypeComponentConfig.drawingMode !== 'window') {
+                    const floorLevel = getFloorBaseHeight();
+                    if (floorLevel != undefined) {
+                        e.y = floorLevel;
+                    }
+                    else {
+                        e.y = this.mesh.position.y;
+                    }
                 }
-                else {
-                    e.y = this.mesh.position.y;
+                if (drawingConfig && drawingConfig.lineTypeComponentConfig.drawingMode == 'window') {
+                    const firstVertex = getVertexPath()[0];
+                    // Skip constraint for first vertex (index 0) - it defines the wall plane
+                    if (this.inputs.index !== 0 && firstVertex) {
+                        const THREE = this.context.three;
+                        // Use cached normal if available, otherwise fall back to pointer normal
+                        let wallNormal = this.cachedWallNormal;
+                        if (!wallNormal && this.pointerIntersection.normal) {
+                            // Fallback for when we don't have 3 vertices yet
+                            wallNormal = new THREE.Vector3(this.pointerIntersection.normal.x, this.pointerIntersection.normal.y, this.pointerIntersection.normal.z).normalize();
+                        }
+                        if (wallNormal) {
+                            // First vertex position defines a point on the wall plane
+                            const planePoint = new THREE.Vector3(firstVertex.x, firstVertex.y, firstVertex.z);
+                            // Current drag position
+                            const dragPosition = new THREE.Vector3(e.x, e.y, e.z);
+                            // Vector from plane point to drag position
+                            const vecToPoint = new THREE.Vector3().subVectors(dragPosition, planePoint);
+                            // Calculate distance from point to plane along normal
+                            const distanceToPlane = vecToPoint.dot(wallNormal);
+                            // Project point onto plane by removing the perpendicular component
+                            const projectedPosition = new THREE.Vector3().subVectors(dragPosition, wallNormal.clone().multiplyScalar(distanceToPlane));
+                            // Update e with constrained position (stays on wall plane)
+                            e.x = projectedPosition.x;
+                            e.y = projectedPosition.y;
+                            e.z = projectedPosition.z;
+                        }
+                    }
                 }
                 this.mesh.position.set(e.x, e.y, e.z);
                 //this.mesh.children[0].position.set(e.x, e.y, e.z)
@@ -453,6 +510,11 @@ export class Vertice {
                     this.pointerIntersection = data;
                 });
             }
+            // Cache wall normal for window mode
+            const drawingConfig = getDrawingConfig();
+            if (drawingConfig && drawingConfig.lineTypeComponentConfig.drawingMode === 'window') {
+                this.cachedWallNormal = this.calculateWallNormalFromVertices();
+            }
             //@ts-expect-error
             this.notify('changed', {
                 index: this.inputs.index,
@@ -466,6 +528,8 @@ export class Vertice {
             this.mesh.scale.set(1, 1, 1);
             this.mpSdk.Pointer.setVisible(true);
             (_a = this.pointerSub) === null || _a === void 0 ? void 0 : _a.cancel();
+            // Clear cached wall normal
+            this.cachedWallNormal = null;
             //renderPolygonFromPath()
             //@ts-expect-error
             this.notify('changed', {
@@ -1209,9 +1273,11 @@ export class BufferGeometry {
                         }
                         // Calculate window area using the projected 2D coordinates
                         const windowDimension = this.calculateWindowDimensions(windows[i].path);
-                        let windowLabelText = windows[i].name ? `${windows[i].name}` : windowMesh.name;
+                        const windowLabel = windows[i].name.split(" ");
+                        const windowName = windowLabel[0] == 'Window' ? i18n.t('Window') + ' ' + windowLabel[1] : windows[i].name;
+                        let windowLabelText = windows[i].name ? `${windowName}` : windowMesh.name;
                         windowLabelText = windows[i].material ? `${windowLabelText}_${windows[i].material}: ${windowDimension.area.toFixed(2)}m²` : `${windowLabelText}: ${windowDimension.area.toFixed(2)}m²`;
-                        log.info("windowLabelText ", windowLabelText);
+                        log.info("windowLabelText ", windowLabelText, windows[i].name, windowMesh.name, i18n.t('Window'));
                         const windowCanvas = this.createLabelCanvas(windowLabelText);
                         const windowArea = Math.abs(twiceSignedArea * 0.5);
                         const labelWidth = Math.max(0.5, Math.min(2, Math.sqrt(Math.max(0.0001, windowArea))));

package/package.json

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

package/static/atwinui.css

@@ -1262,7 +1262,7 @@
     height: 100%;
     background: rgba(0, 0, 0, 0.8);
     z-index: 1000;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
     animation: at_fade-in 0.3s ease;
 }
@@ -1285,15 +1285,16 @@
     color: var(--text-color-light);
     border-radius: var(--border-radius);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-    width: 95vw;
+    width: 66.5vw;
     height: 95vh;
-    max-width: 95vw;
+    max-width: 66.5vw;
     max-height: 95vh;
     overflow: hidden;
     position: relative;
     animation: at_slide-up 0.4s cubic-bezier(.39, .575, .565, 1.000) both;
     display: flex;
     flex-direction: column;
+    margin-left: 0.5vw;
 }
 
 @keyframes at_slide-up {
@@ -1386,6 +1387,76 @@
     flex-shrink: 0;
 }
 
+/* Resize handles for preview modal */
+.at_preview_modal-resize-handle {
+    position: absolute;
+    z-index: 10;
+}
+
+.at_preview_modal-resize-handle--top,
+.at_preview_modal-resize-handle--bottom {
+    left: 8px;
+    right: 8px;
+    height: 8px;
+    cursor: ns-resize;
+}
+
+.at_preview_modal-resize-handle--left,
+.at_preview_modal-resize-handle--right {
+    top: 8px;
+    bottom: 8px;
+    width: 8px;
+    cursor: ew-resize;
+}
+
+.at_preview_modal-resize-handle--top {
+    top: 0;
+}
+
+.at_preview_modal-resize-handle--right {
+    right: 0;
+}
+
+.at_preview_modal-resize-handle--bottom {
+    bottom: 0;
+}
+
+.at_preview_modal-resize-handle--left {
+    left: 0;
+}
+
+.at_preview_modal-resize-handle--top-left,
+.at_preview_modal-resize-handle--top-right,
+.at_preview_modal-resize-handle--bottom-left,
+.at_preview_modal-resize-handle--bottom-right {
+    width: 16px;
+    height: 16px;
+}
+
+.at_preview_modal-resize-handle--top-left {
+    top: 0;
+    left: 0;
+    cursor: nwse-resize;
+}
+
+.at_preview_modal-resize-handle--top-right {
+    top: 0;
+    right: 0;
+    cursor: nesw-resize;
+}
+
+.at_preview_modal-resize-handle--bottom-left {
+    bottom: 0;
+    left: 0;
+    cursor: nesw-resize;
+}
+
+.at_preview_modal-resize-handle--bottom-right {
+    bottom: 0;
+    right: 0;
+    cursor: nwse-resize;
+}
+
 @keyframes slide-down {
     from {
         transform: translateY(-100%);