architwin 1.15.5 → 1.15.6

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

@@ -1,5 +1,7 @@
-import { FORM_MODE, PartitionNode, PolygonData, WallPolyData, IObjectData } from "../../../../types";
+import { FORM_MODE, PartitionNode, PolygonData, WallPolyData, IObjectData, WindowPolyData } from "../../../../types";
 export declare let isEditWindow: boolean;
+export declare let currentEditWindowIndex: number;
+export declare let currentWindow: WindowPolyData;
 export declare function renderRoomFormPane(): HTMLDivElement;
 /**
  * Toggles the state of the partition drawing functionality.
@@ -105,6 +107,7 @@ export declare function getCurrentPolygonData(): PolygonData;
  */
 export declare function setCurrentPartitionData(): Promise<void>;
 export declare function removeWindow(index?: number): void;
+export declare function toggleUndoRedoButtons(undo: boolean, redo: boolean): void;
 export declare function getCurrentPartitionData(): PartitionNode;
 export declare function getNewlyAddedPartition(): Array<PartitionNode>;
 export declare function getDeletedSavedPartitionArray(): Array<PartitionNode>;
@@ -121,3 +124,4 @@ export declare function setPreviousPartitionData(payload: PartitionNode): void;
 export declare function handlePartitionWallEditBtn(wallUuid: string): Promise<void>;
 export declare function getTempCurrentRoomEditData(): Array<PartitionNode>;
 export declare function setTempCurrentRoomEditData(roomEditData: Array<PartitionNode>): void;
+export declare function getCurrentWall(): WallPolyData;

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, setMeshChildrenMaterialProperty, get3DXObjects, getChildrenOfModel, clearSelectedObject, renderPolygon, addUndoDrawActions, setWallBaseHeight, clearWallBaseHeight, setDrawingConfig, resetDrawingConfig, goToPosition, clearFloorBaseHeight, clearDrawActionHistory } from '../../../../architwin';
+import { startDraw, cancelDraw, disposeModel, _3DXObjects, getCurrentPolygon, dispatchSpaceEvent, enableVerticeControls, setCurrentPolygon, setMeshChildrenMaterialProperty, get3DXObjects, getChildrenOfModel, clearSelectedObject, renderPolygon, setWallBaseHeight, clearWallBaseHeight, setDrawingConfig, resetDrawingConfig, goToPosition, partitionHistory } from '../../../../architwin';
 import { generateUUID, extractUUID } from '../../../../utils';
 import { getCurrentEditRoomData } from './roomTreePane';
 import { toggleModal, setModalAction } from "../modal";
@@ -42,7 +42,8 @@ let floorMaterial = '';
 let inputWallMaterial;
 let wallMaterial = '';
 export let isEditWindow = false;
-let currentEditWindowIndex = null;
+export let currentEditWindowIndex = null;
+export let currentWindow = null;
 let tempCurrentEditRoom = null;
 export function renderRoomFormPane() {
     log.info("__@ renderRoomFormPane: ", roomFormMode);
@@ -211,10 +212,6 @@ export function toggleDrawPartitionButton() {
         const vertexList = document.getElementById('at-face-vertex-container');
         const partitionNameInput = document.getElementById('at-edit-partition-name-input');
         partitionNameInput.value = '';
-        const undoBtn = document.getElementById('at-draw-undo-btn');
-        const redoBtn = document.getElementById('at-draw-redo-btn');
-        undoBtn.classList.add('at_disabled');
-        redoBtn.classList.add('at_disabled');
         const formMode = getPartitionFormMode();
         if (formMode == "ADD" /* FORM_MODE.ADD */) {
             tempCurrentPolygon = getCurrentPolygon();
@@ -231,6 +228,7 @@ export function toggleDrawPartitionButton() {
         isEditPartition = false;
         previousPartitionData = null;
     }
+    // toggleUndoRedoButtons(false, false)
 }
 export function toggleDrawWindowButton() {
     var _a, _b;
@@ -251,7 +249,6 @@ export function toggleDrawWindowButton() {
         }
         const objectIndex = _3DXObjects.findIndex(obj => obj.object.id == currentObject.object.id);
         log.info("objectIndex", objectIndex);
-        clearFloorBaseHeight();
         drawingConfig = {
             lineTypeComponentConfig: {
                 renderPolygonOnAdd: false,
@@ -302,6 +299,7 @@ export function toggleDrawWindowButton() {
             }
         }
     }
+    // toggleUndoRedoButtons(false, false)
 }
 /**
  * Displays the partition form based on the current form mode.
@@ -339,12 +337,12 @@ function populatePartitionForm(partition) {
     const memo = document.getElementById('at-room-memo-input');
     if (partition.polygon_json != null) {
         memo.value = JSON.parse(partition.polygon_json).memo;
+        floorLevel.value = JSON.parse(partition.polygon_json).floor_level;
     }
     // Display Partitions
     currentPartitionDataArray = partition.children;
     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);
     }
@@ -699,14 +697,6 @@ function displayFaces(polygon) {
             console.log("renderPolygon:", payload, getCurrentPolygon());
             // Re-render polygon    
             renderPolygon(payload);
-            const undoPaylaod = {
-                action: "deleteWall",
-                wallId: wallId,
-                payload: payload
-            };
-            addUndoDrawActions(undoPaylaod);
-            const redoBtn = document.getElementById('at-draw-redo-btn');
-            redoBtn.classList.add('at_disabled');
             toggleModal(false);
             notify.success(`${i18n.t('SuccessWallDelete')}`);
         }));
@@ -929,6 +919,7 @@ function setupEditWindow(element, window) {
     const confirmBtn = element.querySelector(`#at-confirm-edit-window-${window.index}`);
     if (!editBtn || !editNameContainer || !inputName || !nameLabel || !editMaterialContainer || !inputMaterial)
         return;
+    currentWindow = window;
     // Show inputs when edit icon is clicked
     editBtn.addEventListener("click", () => {
         if (isDrawing) {
@@ -965,6 +956,17 @@ function setupEditWindow(element, window) {
         };
         enableVerticeControls(windowComponent);
         isDrawing = true;
+        let data;
+        if (currentPartitionData) {
+            data = {
+                polygon: {
+                    uuid: currentPartitionData.uuid,
+                    polygon_json: currentPolygonData
+                },
+                verticePath: window.path,
+            };
+        }
+        // partitionHistory.setCurrent(data)
     });
     // // Confirm edit name and material
     confirmBtn.addEventListener("click", () => {
@@ -998,6 +1000,8 @@ function setupEditWindow(element, window) {
         saveWallChanges();
         isDrawing = false;
         isEditWindow = false;
+        partitionHistory.clearHistory();
+        // toggleUndoRedoButtons(false, false)
     });
 }
 function saveWallChanges() {
@@ -1365,17 +1369,17 @@ export function getPartitionFormData() {
     const name = ((_a = document.getElementById('at-room-name-input')) === null || _a === void 0 ? void 0 : _a.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 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 = {
         space_uuid: spaceUUID,
         name: name,
         parent_uuid: null,
-        polygon_json: JSON.stringify({ memo: memo }),
+        polygon_json: JSON.stringify({ memo: memo, floor_level: Number(floorLevel) }),
         children: currentPartitionDataArray,
     };
-    if (!memo) {
+    if (!memo && !floorLevel) {
         payload.polygon_json = null;
     }
     currentPartitionDataArray.forEach(partition => {
@@ -1391,7 +1395,7 @@ export function getPartitionFormData() {
         currentEditRoomData.children = currentPartitionDataArray;
         payload = currentEditRoomData;
         payload.name = name;
-        payload.polygon_json = JSON.stringify({ memo: memo });
+        payload.polygon_json = JSON.stringify({ memo: memo, floor_level: Number(floorLevel) });
     }
     return payload;
 }
@@ -1655,6 +1659,25 @@ export function removeWindow(index = -1) {
     faceVertexContainer.innerHTML = '';
     faceVertexContainer.append(displayWall(currentWall));
 }
+export function toggleUndoRedoButtons(undo, redo) {
+    console.log("toggleUndoRedoButtons", undo, redo);
+    if (!undo) {
+        const undoBtn = document.getElementById('at-draw-undo-btn');
+        undoBtn.classList.add('at_disabled');
+    }
+    else {
+        const undoBtn = document.getElementById('at-draw-undo-btn');
+        undoBtn.classList.remove('at_disabled');
+    }
+    if (!redo) {
+        const redoBtn = document.getElementById('at-draw-redo-btn');
+        redoBtn.classList.add('at_disabled');
+    }
+    else {
+        const redoBtn = document.getElementById('at-draw-redo-btn');
+        redoBtn.classList.remove('at_disabled');
+    }
+}
 function setFloorMaterial(material) {
     console.log('setFloorMaterial()', material);
     floorMaterial = material;
@@ -1785,7 +1808,6 @@ export function handlePartitionWallEditBtn(wallUuid) {
         currentPolygonData = JSON.parse(currentPartitionData.polygon_json);
         setDrawingMode(false);
         cancelDrawing();
-        clearDrawActionHistory();
     });
 }
 export function getTempCurrentRoomEditData() {
@@ -1794,3 +1816,6 @@ export function getTempCurrentRoomEditData() {
 export function setTempCurrentRoomEditData(roomEditData) {
     tempCurrentEditRoom = roomEditData;
 }
+export function getCurrentWall() {
+    return currentWall;
+}

package/lib/atwinui/events.js

@@ -8,7 +8,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { actionBar, renderObjectCards, renderLibraryCards, renderTags, renderTagRow, getTagFormData, addClickEventToTagRow, setActiveCard, setActiveMenu, removeObjectCard, clearActiveMenu, setTagCategoriesOption, toggleDropdown, tagFormMode, selectedTag, renderRecepientOptions, renderTagMessages, createTagMessage, setTagLink, setTagMessagingDetails, renderCategoryDropdownOptions, clearTagFormDropdown, clearActiveActionBtn, clearActiveCard, toggleActionBarButtons, selectedCategoryFilterId, selectedSubCategoryFilterId, filterTagList, toggleModal, setModalAction, } from "./components/toolbar";
-import { getTargetPosition, addMediaScreen, _3DXObjects, selectedObject, setTransformControls, copyObject, revertTransform, clearSelectedObject, removeTransformControls, getLibrary, getMpTags, renderTag, captureSpaceScreenshot, moveTag, subscribeSpaceEvent, setModelVisibility, disposeModel, disposeTag, _tags, _tagCategories, dispatchSpaceEvent, editTagLabel, editTagDescription, setTagMessageRecepients, setTagMessages, setSelectedTagUuid, renderMeetingSidebar, setTagIcon, setObjectTransformation, getSelectedObject, _atwin, isCdnMapDataAvailable, captureScreenshotAndCameraDetails, _mpConfig, cancelModelPlacement, _modelDetails, actionHistory, get3DXObjects, transformHistory, goToModel, themeManager, _partitionNodes, setSpacePartitionNodes, getSpaceId, setFloorBaseHeight, toggleWallVisibility, getChildrenOfModel, toggleFloorVisibility, renderPolygon, getCurrentPolygon, getFloorBaseHeight, setSelectedObject, redoDrawAction, undoDrawAction, setWallBaseHeight, clearWallBaseHeight, clearFloorBaseHeight, isToolbarFeatureEnabled, captureCurrentView, getCurrentFloor, _spaceUsers, setPipeCategories, setPipes, detachTagMedia, getTagDataCollection, setVertexPath, _screenSharingHostUser, _tagIotCategoryTypes, getIoTDeviceTagIcons, toggleMeshChildrenVisibility, set3DXObjects } from "../architwin";
+import { getTargetPosition, addMediaScreen, _3DXObjects, selectedObject, setTransformControls, copyObject, revertTransform, clearSelectedObject, removeTransformControls, getLibrary, getMpTags, renderTag, captureSpaceScreenshot, moveTag, subscribeSpaceEvent, setModelVisibility, disposeModel, disposeTag, _tags, _tagCategories, dispatchSpaceEvent, editTagLabel, editTagDescription, setTagMessageRecepients, setTagMessages, setSelectedTagUuid, renderMeetingSidebar, setTagIcon, setObjectTransformation, getSelectedObject, _atwin, isCdnMapDataAvailable, captureScreenshotAndCameraDetails, _mpConfig, cancelModelPlacement, _modelDetails, actionHistory, get3DXObjects, transformHistory, goToModel, themeManager, _partitionNodes, setSpacePartitionNodes, getSpaceId, setFloorBaseHeight, toggleWallVisibility, getChildrenOfModel, toggleFloorVisibility, renderPolygon, getCurrentPolygon, getFloorBaseHeight, setSelectedObject, redoDrawAction, undoDrawAction, setWallBaseHeight, clearWallBaseHeight, clearFloorBaseHeight, isToolbarFeatureEnabled, captureCurrentView, getCurrentFloor, _spaceUsers, setPipeCategories, setPipes, detachTagMedia, getTagDataCollection, setVertexPath, _screenSharingHostUser, _tagIotCategoryTypes, getIoTDeviceTagIcons, toggleMeshChildrenVisibility, set3DXObjects, partitionHistory,
+// polygonHistory
+ } from "../architwin";
 import { Notyf } from 'notyf';
 import 'notyf/notyf.min.css';
 import { SPACE_EVENTS, COORDINATE_SYSTEM, UNITS, DEGREE, MAP_OPTIONS, sortTagOptions, sortObjectOptions, CUSTOM_MAP_MODE, TAG_TYPE } from "../types";
@@ -24,7 +26,7 @@ import log from 'loglevel';
 import * as minimap from '../minimap';
 import { clearActiveThemeCard, getSelectedTheme } from "./components/toolbar/themePane";
 import { getCurrentEditRoomData, displayRoomTree, updatePartitionVisibilityUI, getSelectedPartitionId, updatePolygonVisibilityData, toggleVisibilityState, setFilteredDisplay, updateRoomVisibilityUI, highlightSelectedPartitionChild, highlightSelectedWindow, getRoomData } from "./components/toolbar/spacePartition/roomTreePane";
-import { toggleDrawPartitionButton, displayPartitionFormMode, setPartitionFormMode, clearPartitionForm, setPolygonData, getPartitionFormData, getPartitionSavingMode, setPartitionSavingMode, getPartitionFormMode, getNewlyAddedPartition, setCurrentPartitionData, getCurrentPartitionData, getTempCurrentPolygon, clearTempCurrentPolygon, toggleDrawWindowButton, getIsDrawing, getDrawingMode, getCurrentPolygonData, setTempCurrentRoomEditData } from "./components/toolbar/spacePartition/roomFormPane";
+import { toggleDrawPartitionButton, displayPartitionFormMode, setPartitionFormMode, clearPartitionForm, setPolygonData, getPartitionFormData, getPartitionSavingMode, setPartitionSavingMode, getPartitionFormMode, getNewlyAddedPartition, setCurrentPartitionData, getCurrentPartitionData, getTempCurrentPolygon, clearTempCurrentPolygon, toggleDrawWindowButton, getIsDrawing, getDrawingMode, getCurrentPolygonData, setTempCurrentRoomEditData, toggleUndoRedoButtons, getCurrentWall, currentWindow } from "./components/toolbar/spacePartition/roomFormPane";
 import { actionSettingsSelectOption, getTempCoordinateSystem, getTempMeasurementUnit, getTempRotationUnit, setCoordinateSystem, setMeasurementUnit, setRotationUnit, initSettingsValues, setTempCoordinateSystem, setTempMeasurementUnit, setTempRotationUnit, toggleActionSettingsDropdown, toggleCalibrateBasepoint, setScaleFactor, getTempScaleFactor, setTempScaleFactor, setBasepoint, getTempBasepoint, setTempBasepoint, getBasepoint, toggleActionSettings, getBasepointObjectPayload, displayConvertedCoordinates, getCoordinateSystem, getScaleFactor, getMeasurementUnit, getRotationUnit, setBasepointObjectPayload } from "./components/toolbar/actionSettingsPane";
 import { getBasepointCalibrateBpCoordinateValues, getBasepointCalibrateMpCoordinateValues, initBsepointCalibratePane, toggleBasepointCalibratePane } from "./components/toolbar/basepointCalibratePane";
 import { toggleGeneralMapOptions, initGeneralSelectedMap, getSelectedMapOption } from './components/toolbar/generalSettingsMenuPane';
@@ -38,6 +40,7 @@ import { PipeForm } from "./components/toolbar/pipeFormPane";
 import { toggleIoTCategoryOptions, toggleIoTDevicesOptions, setSelectedIoTSystemRadio, clearIoTDropdowns, initIoTFormData, setIotCategoryOptions, getIotTagFormData, iotTagFormMode, selectedIotTag, clearIotFields, getIotCategoryOption } from './components/toolbar/tagIotFormPane';
 import { getTheseTagMessages, timedoutComment, unsendComment } from "./components/toolbar/tagMessagingPane";
 import { handleScreenShareResponsiveChanges, handleScreenShareAcceptRequest, handleScreenShareBackUserListPane, handleScreenShareEndSessionEvent, handleScreenShareUsersUpdated, renderScreenShareLeaveConfirmationModal } from "./components/toolbar/screenSharePane";
+import _ from "lodash";
 const pipeList = new PipeList();
 const pipeForm = new PipeForm();
 let activeToolbarItem, activeActionItem, activePane, activeActionPane, cancelTagPlacementPrompt, cancelModelPlacementPrompt;
@@ -1505,9 +1508,8 @@ function setupSpaceEventSubscriptions() {
     subscribeSpaceEvent(SPACE_EVENTS.TAGPLACER_CREATED, handleTagPlacerCreated);
     subscribeSpaceEvent(SPACE_EVENTS.UPDATE_ROOM_TREE, handleUpdateRoomTree);
     subscribeSpaceEvent(SPACE_EVENTS.PARTITION_CLICKED, handlePartitionSelected);
-    subscribeSpaceEvent(SPACE_EVENTS.VERTEX_DRAG_END, setCurrentPartitionData);
+    subscribeSpaceEvent(SPACE_EVENTS.VERTEX_DRAG_END, handleVertexDragEnd);
     subscribeSpaceEvent(SPACE_EVENTS.VERTEX_PLACED, handleVertexPlace);
-    subscribeSpaceEvent(SPACE_EVENTS.DRAW_HISTORY, handleDrawHistory);
     subscribeSpaceEvent(SPACE_EVENTS.FLOOR_IMAGE_UPLOADED, handleCustomMapFloorImageUploaded);
     subscribeSpaceEvent(SPACE_EVENTS.FLOOR_IMAGE_UPLOAD_FAILED, handleCustomMapFloorUploadFailed);
     subscribeSpaceEvent(SPACE_EVENTS.TAG_SANDBOX_REGISTERED, handleSandboxRegistered);
@@ -1518,6 +1520,31 @@ function setupSpaceEventSubscriptions() {
     subscribeSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_ACCEPT_REQUEST, handleScreenShareAcceptRequest);
     subscribeSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_BACK_USER_LIST_PANE, handleScreenShareBackUserListPane);
 }
+function handleVertexDragEnd(payload) {
+    log.info("handleVertexDragEnd()", payload);
+    setCurrentPartitionData();
+    if (isToolbarFeatureEnabled("roomCreation")) {
+        let data;
+        const currentPartitionData = _.cloneDeep(getCurrentPartitionData());
+        const currentPolygonData = _.cloneDeep(getCurrentPolygonData());
+        const currentWall = getCurrentWall();
+        const wallIndex = currentPolygonData.walls.findIndex(w => w.uuid == currentWall.uuid);
+        if (currentPartitionData) {
+            data = {
+                polygon: {
+                    uuid: currentPartitionData.uuid,
+                    polygon_json: currentPolygonData
+                },
+                verticePath: currentPolygonData.walls[wallIndex].windows[currentWindow.index].path
+            };
+            partitionHistory.addToHistory(JSON.parse(JSON.stringify(data)));
+        }
+        log.info("all history", partitionHistory.getAllHistory());
+    }
+    // partitionHistory.addToHistory(data)
+    // polygonHistory.addToHistory(payload)
+    // toggleUndoRedoButtons(polygonHistory.canUndo(), polygonHistory.canRedo())
+}
 function handlePartitionColiderClickSelected(payload) {
     return __awaiter(this, void 0, void 0, function* () {
         const polygonId = extractUUID(payload.collider.name);
@@ -1586,43 +1613,10 @@ function handleDragEnd(payload) {
     };
     setCurrentTransformationValues(transformValues);
 }
-function handleDrawHistory(payload) {
-    console.log("handleDrawHistory", payload);
-    const undoCount = (payload.undoDrawActions).length;
-    const redoCount = (payload.redoDrawActions).length;
-    if (undoCount == 0) {
-        const undoBtn = document.getElementById('at-draw-undo-btn');
-        undoBtn.classList.add('at_disabled');
-    }
-    else {
-        const undoBtn = document.getElementById('at-draw-undo-btn');
-        undoBtn.classList.remove('at_disabled');
-    }
-    if (redoCount == 0) {
-        const redoBtn = document.getElementById('at-draw-redo-btn');
-        redoBtn.classList.add('at_disabled');
-    }
-    else {
-        const redoBtn = document.getElementById('at-draw-redo-btn');
-        redoBtn.classList.remove('at_disabled');
-    }
-    console.log("undoCount", undoCount);
-    console.log("redoCount", redoCount);
-}
 function handleVertexPlace(payload) {
     console.log("handleVertexPlace ==>", payload);
     if (isToolbarFeatureEnabled('roomCreation')) {
-        log.info("getDrawingMode()", getDrawingMode());
-        if (getDrawingMode() === 'window') {
-            log.info("current polygon", getCurrentPolygon());
-        }
-        if (getDrawingMode() === 'partition') {
-            // setCurrentPartitionData()
-        }
-        const undoBtn = document.getElementById('at-draw-undo-btn');
-        undoBtn.classList.remove('at_disabled');
-        const redoBtn = document.getElementById('at-draw-redo-btn');
-        redoBtn.classList.add('at_disabled');
+        toggleUndoRedoButtons(partitionHistory.canUndo(), partitionHistory.canRedo());
     }
     if (isToolbarFeatureEnabled('pipe')) {
         pipeForm.setPipeVertices(payload.path);
@@ -2338,11 +2332,6 @@ function handleCancelPartition() {
         clearSelectedObject();
         clearFloorBaseHeight();
         toggleDisplayPane('at-cancel-room-form-btn');
-        const drawHistory = {
-            redoDrawActions: [],
-            undoDrawActions: [],
-        };
-        handleDrawHistory(drawHistory);
     }));
 }
 /**
@@ -3944,6 +3933,7 @@ function handlePreviewModalResize() {
         // Handle horizontal resizing
         if (direction === null || direction === void 0 ? void 0 : direction.includes('right')) {
             newWidth = Math.max(minWidth, Math.min(maxWidth, startWidth + deltaX));
+            // Don't change left position for right resize
         }
         else if (direction === null || direction === void 0 ? void 0 : direction.includes('left')) {
             const potentialWidth = startWidth - deltaX;

package/lib/loaders/polydrawerLoader.d.ts

@@ -76,6 +76,7 @@ export declare class Vertice {
     texture: THREE.CanvasTexture;
     pointerSub: MpSdk.ISubscription;
     pointerIntersection: MpSdk.Pointer.Intersection;
+    cachedWallNormal: THREE.Vector3 | null;
     constructor(mpSdk: MpSdk);
     inputs: {
         index: any;
@@ -98,6 +99,7 @@ export declare class Vertice {
         'INTERACTION.HOVER': boolean;
     };
     onInputsUpdated: (prevInputs: any) => void;
+    calculateWallNormalFromVertices(): THREE.Vector3 | null;
     onEvent(eventType: any, data: any): void;
     onInit: () => void;
     renderVertice: (hovered?: boolean) => void;

package/lib/loaders/polydrawerLoader.js

@@ -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,6 +371,7 @@ export const tubeLineFactory = function (mpSdk) {
 };
 export class Vertice {
     constructor(mpSdk) {
+        this.cachedWallNormal = null;
         this.inputs = {
             index: null,
             radius: 0.1,
@@ -418,6 +423,25 @@ 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') {
@@ -438,24 +462,30 @@ export class Vertice {
                 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 && this.pointerIntersection.normal) {
+                    if (this.inputs.index !== 0 && firstVertex) {
                         const THREE = this.context.three;
-                        // Get wall normal from pointer intersection
-                        const wallNormal = new THREE.Vector3(this.pointerIntersection.normal.x, this.pointerIntersection.normal.y, this.pointerIntersection.normal.z).normalize();
-                        // 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;
+                        // 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);
@@ -480,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,
@@ -493,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', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "architwin",
-  "version": "1.15.5",
+  "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 {