architwin 1.10.4 → 1.10.5

package/lib/architwin.js

@@ -3414,8 +3414,9 @@ function getTargetPosition(callback = undefined) {
  */
 function cancelModelPlacement() {
     return __awaiter(this, void 0, void 0, function* () {
-        log.info("cancelModelPlacement()");
-        _pointerSubscription.cancel();
+        log.info("cancelModelPlacement()", _pointerSubscription);
+        if (_pointerSubscription)
+            _pointerSubscription.cancel();
         setElementVisibility(_objectMarker, false);
         yield _atwin.Pointer.resetTexture();
         if (_onMouseClickInstance !== undefined) {
@@ -3843,6 +3844,7 @@ function createIShowcaseObjectData(object_data, position = undefined, scale = un
     showcase_object.position_unit = "m";
     showcase_object.object_data = object_data;
     showcase_object.showcase_object_name = object_data.name;
+    showcase_object.coordinate_system = 'yup';
     if (showcase_object.object_data) {
         showcase_object.object_data = newObj;
     }

package/lib/atwinui/components/toolbar/actionSettingsPane.d.ts

@@ -0,0 +1,27 @@
+import { Vector3 } from "three";
+export declare function renderActionSettingsPane(): HTMLDivElement;
+export declare function toggleActionSettings(visible?: boolean): void;
+export declare function toggleActionSettingsDropdown(id: string): void;
+export declare function actionSettingsSelectOption(element: HTMLElement, id: string): void;
+export declare function initSettingsValues(): void;
+export declare function toggleCalibrateBasepoint(): Promise<void>;
+export declare function getCoordinateSystem(): string;
+export declare function setCoordinateSystem(value: string): void;
+export declare function getScaleFactor(): string;
+export declare function setScaleFactor(value: string): void;
+export declare function getMeasurementUnit(): string;
+export declare function setMeasurementUnit(value: string): void;
+export declare function getRotationUnit(): string;
+export declare function setRotationUnit(value: string): void;
+export declare function setTempCoordinateSystem(value: string): void;
+export declare function getTempCoordinateSystem(): string;
+export declare function setTempScaleFactor(value: string): void;
+export declare function getTempScaleFactor(): string;
+export declare function setTempMeasurementUnit(value: string): void;
+export declare function getTempMeasurementUnit(): string;
+export declare function setTempRotationUnit(value: string): void;
+export declare function getTempRotationUnit(): string;
+export declare function setBasepoint(value: Vector3): void;
+export declare function getBasepoint(): Vector3;
+export declare function setTempBasepoint(value: Vector3): void;
+export declare function getTempBasepoint(): Vector3;

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

@@ -0,0 +1,424 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { _3DXObjects, addObjectToSpace, cancelModelPlacement, clearSelectedObject, disposeModel, getTargetPosition, removeTransformControls, setSelectedObject, setTransformControls } from "../../../architwin";
+import { batchAddEventListenerByClassName } from "../../events";
+import i18n from "./i18n";
+import { toggleModelControl } from "./modelControlsPane";
+import { convertYupToZup } from "../../../worldConversion";
+import { getAssetUrl } from "../../../utils";
+let actionSettingsPane;
+let coordinateSystem = "matterport";
+let scaleFactor = "1";
+let measurementUnit = "meter";
+let rotationUnit = "radian";
+let tempCoordinateSystem = "matterport";
+let tempScaleFactor = "1";
+let tempMeasurementUnit = "meter";
+let tempRotationUnit = "radian";
+let tempBasepoint = undefined;
+let basepoint = undefined;
+let isSettingsSaved = false;
+export function renderActionSettingsPane() {
+    const element = document.createElement('div');
+    element.classList.add('at_container');
+    element.classList.add('at_h-full');
+    element.classList.add('at_w-12');
+    element.setAttribute('id', 'at-settings-pane');
+    element.setAttribute('data-cy', 'at-settings-pane');
+    element.innerHTML = `
+            <div class="at_form_container at_scrollable_container settings">
+                <div class="at_flex at_space_between">
+                    <span class="at_bolder at_text_base" id="at-settings-title">${i18n.t("Settings")}</span>
+                </div>
+                <div class="at_flex at_flex_column at_gap_2" id="at-settings-coordinate-system">
+                    <label class="at_text_xs">${i18n.t("CoordinateSystem")}</label>
+                    <div class="at_flex at_justify_center at_gap_4">
+                        <label class="at_flex at_align_center at_text_xxs at_gap_1">
+                            <input type="radio" id="at-settings-radio-matterport" name="coordinate-system" value="matterport" checked />
+                            ${i18n.t("Matterport")}
+                        </label>
+                        <label class="at_flex at_align_center at_text_xxs at_gap_1">
+                            <input type="radio" id="at-settings-radio-bim" name="coordinate-system" value="bim" />
+                            ${i18n.t("Bim")}
+                        </label>
+                    </div>
+                </div>
+
+                <div class="at_flex at_flex_column at_gap_2" id="at-settings-coordinate-system">
+                    <label class="at_text_xs">${i18n.t("ScaleFactor")}</label>
+                    <div class="at_flex at_gap_1">
+                        <input class="at_field_input at_w-4 at_disabled" type="text" id="" data-cy="" value="1" disabled>
+                        <span>:<span>
+                        <input class="at_field_input at_w-4" type="text" id="at-settings-scale-factor-input" data-cy="at-settings-scale-factor-input" value="1">
+                    </div>
+                </div>
+
+                <div class="at_flex at_flex_column at_gap_2" id="at-settings-measurement-unit">
+                    <label class="at_text_xs">${i18n.t("MeasurementUnit")}</label>   
+                    <div id="" data-cy=""> 
+                        <div class="at_dropdown at_flex at_flex_row at_space_between" id="at-selected-measurement-unit">
+                            <div class="at_dropdown_toggle" id="at-selected-measurement-unit-text">${i18n.t('Meter')}</div>
+                            <span class="mdi mdi-triangle-down at_chevron"></span>
+                        </div>
+                        <div class="at_options_container">
+                            <div class="at_dropdown_options" id="at-measurement-unit-options" data-cy="at-measurement-unit-options">
+                                <div class="at_option" data-value="meter">${i18n.t("Meter")}</div>
+                                <div class="at_option" data-value="foot">${i18n.t("Foot")}</div>
+                                <div class="at_option" data-value="inch">${i18n.t("Inch")}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="at_flex at_flex_column at_gap_2" id="at-settings-rotation-unit">
+                    <label class="at_text_xs">${i18n.t("RotationUnit")}</label>
+                    <div id="" data-cy="">
+                        <div class="at_dropdown at_flex at_flex_row at_space_between" id="at-selected-rotation-unit">
+                            <div class="at_dropdown_toggle" id="at-selected-rotation-unit-text">${i18n.t('Radian')}</div>
+                            <span class="mdi mdi-triangle-down at_chevron"></span>
+                        </div>
+                        <div class="at_options_container">
+                            <div class="at_dropdown_options" id="at-rotation-unit-options" data-cy="at-rotation-unit-options">
+                                <div class="at_option" data-value="radian">${i18n.t("Radian")}</div>
+                                <div class="at_option" data-value="degree">${i18n.t("Degree")}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="at_button at_calibrate_basepoint_btn" id="at-calibrate-basepoint-btn" data-cy="at-calibrate-basepoint-btn" data-state="calibrate">
+                    <span class="mdi mdi-map-marker-radius"></span>${i18n.t('CalibrateBasepoint')}
+                </div>
+
+                <div class="at_converted_coordinates_list_container" style="display: none"id="at-converted-coordiantes-container" data-cy="at-converted-coordiantes-container">
+                    
+                    <!-- insert at_converted_coordinates_title here -->
+
+                    <!-- insert at_coordinate_list_container here -->
+
+                </div>
+            </div>
+
+            <div class="at_button at_ghost" id="at-save-settings" data-cy="at-save-settings">
+                ${i18n.t('Save')}
+                <span class="mdi mdi-content-save"></span>
+            </div>
+    `;
+    return element;
+}
+export function toggleActionSettings(visible = true) {
+    console.log("toggleActionSettings()");
+    if (!actionSettingsPane) {
+        actionSettingsPane = document.getElementById('at-settings-pane');
+    }
+    if (visible) {
+        actionSettingsPane.style.display = 'block';
+        return;
+    }
+    actionSettingsPane.style.display = 'none';
+    return;
+}
+export function toggleActionSettingsDropdown(id) {
+    const optionsContainer = document.getElementById(`${id}`);
+    optionsContainer === null || optionsContainer === void 0 ? void 0 : optionsContainer.classList.toggle("open");
+}
+export function actionSettingsSelectOption(element, id) {
+    const selectedText = document.getElementById(`at-selected-${id}-text`);
+    selectedText.innerText = i18n.t(element.innerText);
+    element.parentElement.classList.toggle("open");
+}
+export function initSettingsValues() {
+    // set coordinate saystem
+    const coordinateSystemvalue = coordinateSystem;
+    const radioButton = document.querySelector(`input[name="coordinate-system"][value="${coordinateSystemvalue}"]`);
+    if (radioButton) {
+        radioButton.checked = true;
+    }
+    // set scale factor
+    const scaleFactorValue = scaleFactor;
+    const scaleFactorInput = document.getElementById('at-settings-scale-factor-input');
+    if (scaleFactorInput) {
+        scaleFactorInput.value = scaleFactorValue;
+    }
+    // set measurement unit
+    const measurementUnitElement = document.getElementById(`at-selected-measurement-unit-text`);
+    const measurementUnitValue = measurementUnit.charAt(0).toUpperCase() + measurementUnit.substring(1).toLowerCase();
+    measurementUnitElement.innerText = i18n.t(measurementUnitValue);
+    // set rotation unit
+    const rotationUnitElement = document.getElementById(`at-selected-rotation-unit-text`);
+    const rotationUnitValue = rotationUnit.charAt(0).toUpperCase() + rotationUnit.substring(1).toLowerCase();
+    rotationUnitElement.innerText = i18n.t(rotationUnitValue);
+    if (basepoint) {
+        const element = document.getElementById(`at-calibrate-basepoint-btn`);
+        element.dataset.state = basepoint ? "adjust" : "calibrate";
+        element.innerText = basepoint ? i18n.t("AdjustBasepoint") : i18n.t("CalibrateBasepoint");
+        displayConvertedCoordinates(basepoint);
+    }
+    else {
+        const convertedCoordinatesContainer = document.getElementById('at-converted-coordiantes-container');
+        convertedCoordinatesContainer.style.display = 'none';
+        const element = document.getElementById(`at-calibrate-basepoint-btn`);
+        element.classList.remove('active');
+        element.dataset.state = basepoint ? "adjust" : "calibrate";
+        element.innerText = basepoint ? i18n.t("AdjustBasepoint") : i18n.t("CalibrateBasepoint");
+    }
+}
+export function toggleCalibrateBasepoint() {
+    return __awaiter(this, void 0, void 0, function* () {
+        const element = document.getElementById(`at-calibrate-basepoint-btn`);
+        const currentState = element.dataset.state;
+        console.log("toggleCalibrateBasepoint()", element.innerText);
+        console.log(element.innerText === i18n.t("CalibrateBasepoint"));
+        console.log(typeof element.innerText, typeof i18n.t("CalibrateBasepoint"));
+        switch (currentState) {
+            case "cancel":
+                element.dataset.state = tempBasepoint || basepoint ? "adjust" : "calibrate";
+                element.innerText = tempBasepoint || basepoint ? i18n.t("AdjustBasepoint") : i18n.t("CalibrateBasepoint");
+                if (basepoint || tempBasepoint) {
+                    toggleModelControl(false, 'translate');
+                    removeTransformControls();
+                    clearSelectedObject();
+                }
+                else {
+                    const target = _3DXObjects.find(obj => obj.type === 'BASEPOINT');
+                    if (target)
+                        disposeModel(target);
+                    cancelModelPlacement();
+                }
+                break;
+            case "calibrate":
+                element.dataset.state = "cancel";
+                element.innerText = i18n.t("Cancel");
+                yield getTargetPosition((coords) => __awaiter(this, void 0, void 0, function* () {
+                    console.log("coord", coords);
+                    coords.y = coords.y + 0.01;
+                    setTempBasepoint(coords);
+                    const mediaUrl = getAssetUrl('images/basepointmarker.png');
+                    const objectType = '';
+                    yield addObjectToSpace(mediaUrl, objectType, {
+                        position: coords,
+                        rotation: { x: 1.57079633, y: 0, z: 0 }
+                    });
+                    _3DXObjects[_3DXObjects.length - 1].type = 'BASEPOINT';
+                    displayConvertedCoordinates(coords);
+                    element.dataset.state = "adjust";
+                    element.innerText = i18n.t("AdjustBasepoint");
+                    element.classList.remove("active");
+                }));
+                break;
+            case "adjust":
+                element.dataset.state = "cancel";
+                element.innerText = i18n.t("Cancel");
+                const object = _3DXObjects.find(obj => obj.type == "BASEPOINT");
+                console.log("object", object);
+                setSelectedObject(object.object, object.node, object.component, object.type);
+                const selectedObj = {
+                    object: object.object,
+                    node: object.node,
+                    component: object.component
+                };
+                setTransformControls(selectedObj);
+                toggleModelControl(true, 'translate');
+                break;
+            default:
+                console.error("Something went wrong!");
+        }
+        element.classList.toggle("active");
+    });
+}
+function displayConvertedCoordinates(payload) {
+    const convertedCoordinatesContainer = document.getElementById('at-converted-coordiantes-container');
+    convertedCoordinatesContainer.style.display = 'flex';
+    convertedCoordinatesContainer.innerHTML = ``;
+    const title = displayConvertedCoordinatesTitle();
+    const coordinateList = displayConvertedCoordinateListContainer(payload);
+    convertedCoordinatesContainer.appendChild(title);
+    convertedCoordinatesContainer.appendChild(coordinateList);
+    batchAddEventListenerByClassName('at_coordinate_title', (event) => {
+        console.log("I have been clicked");
+        const targetElement = event.target;
+        console.log("targetElement", targetElement);
+        const idName = targetElement.getAttribute('id').split('-').pop();
+        const element = document.getElementById(`at-xyz-coordinate-${idName}`);
+        const isHidden = element.style.display === 'block' || element.style.display === '';
+        element.style.display = isHidden ? 'none' : 'block';
+        // 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');
+    });
+    // displayCoordinateList()
+}
+function displayConvertedCoordinatesTitle() {
+    const element = document.createElement('div');
+    element.classList.add('at_converted_coordinates_title');
+    element.innerHTML = `
+        <div> </div>    
+        <label for="">
+            <span class="mdi mdi-axis-arrow"></span>
+            ${i18n.t('ConvertedCoordinates')}
+        </label>
+        <div> </div>
+    `;
+    return element;
+}
+function displayConvertedCoordinateListContainer(payload) {
+    const element = document.createElement('div');
+    element.classList.add('at_coordinate_list_container');
+    element.classList.add('at_scrollable_container');
+    const origin = displayOrigin();
+    element.appendChild(origin);
+    const items = ['Bim', 'Matterport'];
+    items.forEach(item => {
+        const el = displayCoordinatesItem(payload, item);
+        element.appendChild(el);
+    });
+    return element;
+}
+function displayOrigin() {
+    const element = document.createElement('div');
+    element.classList.add('at_origin_value_container');
+    element.classList.add('at_text_xs');
+    element.innerHTML = `
+        <div>
+            ${i18n.t('Origin')}: 
+        </div>
+        <div class="at_flex at_align_center at_gap_1">      
+            x: 
+            <div class="at_origin_value">0</div> 
+            y: 
+            <div class="at_origin_value">0</div> 
+            z: 
+            <div class="at_origin_value">0</div>
+        </div>
+    `;
+    return element;
+}
+function displayCoordinatesItem(payload, item) {
+    const element = document.createElement('div');
+    element.classList.add('at_coordinates_container');
+    const title = displayCoordinatesItemTitle(item);
+    element.appendChild(title);
+    let xyzCoordinates;
+    let temp;
+    if (item == "Bim") {
+        temp = convertYupToZup(payload);
+        console.log("Temp BIM", temp);
+        xyzCoordinates = displayXyzCoordinates(temp, item);
+        element.appendChild(xyzCoordinates);
+        return element;
+    }
+    console.log("Temp Matterport", payload);
+    xyzCoordinates = displayXyzCoordinates(payload, item);
+    element.appendChild(xyzCoordinates);
+    return element;
+}
+function displayCoordinatesItemTitle(title) {
+    const element = document.createElement('div');
+    element.classList.add('at_coordinate_title_container');
+    const idName = title.toLowerCase();
+    element.innerHTML = `
+        <div class="at_coordinate_title" id="at-coordinate-title-${idName}" data-cy="">
+            ${i18n.t(title)}
+            <span class="mdi mdi-chevron-down" id="" data-cy=""></span>
+        </div>
+    `;
+    return element;
+}
+function displayXyzCoordinates(payload, item) {
+    const element = document.createElement('div');
+    element.classList.add('at_xyz_coordinate_container');
+    const idName = item.toLowerCase();
+    element.setAttribute('id', `at-xyz-coordinate-${idName}`);
+    element.innerHTML = `
+        <div class="at_xyz_coordinate">
+            <div class="at_bim_icon_left">x</div>
+            <div class="at_coordinate_value">${payload.x}</div>
+            <div class="at_bim_icon_right">m</div>
+        </div>
+        <div class="at_xyz_coordinate">
+            <div class="at_bim_icon_left">y</div>
+            <div class="at_coordinate_value">${payload.y}</div>
+            <div class="at_bim_icon_right">m</div>
+        </div>
+        <div class="at_xyz_coordinate">
+            <div class="at_bim_icon_left">z</div>
+            <div class="at_coordinate_value">${payload.z}</div>
+            <div class="at_bim_icon_right">m</div>
+        </div>
+    `;
+    return element;
+}
+/* SETTERS AND GETTERS */
+export function getCoordinateSystem() {
+    return coordinateSystem;
+}
+export function setCoordinateSystem(value) {
+    coordinateSystem = value;
+    let text = value;
+    text = text.charAt(0).toUpperCase() + text.substring(1).toLowerCase();
+    document.getElementById('at-coordinate-system-text').innerText = `${i18n.t("CoordinateSystem")}: ${i18n.t(text)}`;
+    console.log("Coordinate System set to:", value);
+}
+export function getScaleFactor() {
+    return scaleFactor;
+}
+export function setScaleFactor(value) {
+    scaleFactor = value;
+    console.log("Scale Factor set to:", value);
+}
+export function getMeasurementUnit() {
+    return measurementUnit;
+}
+export function setMeasurementUnit(value) {
+    measurementUnit = value;
+    console.log("Measurement Unit set to:", value);
+}
+export function getRotationUnit() {
+    return rotationUnit;
+}
+export function setRotationUnit(value) {
+    rotationUnit = value;
+    console.log("Rotation Unit set to:", value);
+}
+export function setTempCoordinateSystem(value) {
+    tempCoordinateSystem = value;
+}
+export function getTempCoordinateSystem() {
+    return tempCoordinateSystem;
+}
+export function setTempScaleFactor(value) {
+    tempScaleFactor = value;
+}
+export function getTempScaleFactor() {
+    return tempScaleFactor;
+}
+export function setTempMeasurementUnit(value) {
+    tempMeasurementUnit = value;
+}
+export function getTempMeasurementUnit() {
+    return tempMeasurementUnit;
+}
+export function setTempRotationUnit(value) {
+    tempRotationUnit = value;
+}
+export function getTempRotationUnit() {
+    return tempRotationUnit;
+}
+export function setBasepoint(value) {
+    basepoint = value;
+}
+export function getBasepoint() {
+    return basepoint;
+}
+export function setTempBasepoint(value) {
+    tempBasepoint = value;
+}
+export function getTempBasepoint() {
+    return tempBasepoint;
+}

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

@@ -126,7 +126,21 @@ i18n
                 "Area": "Area",
                 "DeleteWall": "Delete Wall",
                 "SuccessWallDelete": "Successfully deleted wall",
-                "WarnLowFloor": "The marked area may be lower than the floor of the space"
+                "WarnLowFloor": "The marked area may be lower than the floor of the space",
+                "Settings": "Settings",
+                "CoordinateSystem": "Coordinate System",
+                "Matterport": "Matterport (Y-up)",
+                "Bim": "BIM/CAD (Z-up)",
+                "MeasurementUnit": "Measurement Unit",
+                "Meter": "Meter",
+                "Foot": "Foot",
+                "Inch": "Inch",
+                "RotationUnit": "Rotation Unit",
+                "Radian": "Radian",
+                "Degree": "Degree",
+                "CoordinateNote": "The coordinate from your CAD or either BIM tools shall be internally converted to the appropriate coordinate used by the Matterport space.",
+                "CalibrateBasepoint": "Calibrate Basepoint",
+                "AdjustBasepoint": "Adjust Basepoint",
             }
         },
         ja: {
@@ -247,7 +261,19 @@ i18n
                 "Area": "面積",
                 "DeleteWall": "ウォール削除",
                 "SuccessWallDelete": "削除しました",
-                "WarnLowFloor": "Tマークされたエリアは、スペースの床よりも低い場合があります"
+                "WarnLowFloor": "Tマークされたエリアは、スペースの床よりも低い場合があります",
+                "Settings": "BIM/CAD設定",
+                "CoordinateSystem": "設定システム選択",
+                "Matterport": "Matterport (Y-up)",
+                "Bim": "BIM/CAD (Z-up)",
+                "MeasurementUnit": "長さ単位",
+                "Meter": "メートル",
+                "Foot": "フィート",
+                "Inch": "インチ",
+                "RotationUnit": "回転単位",
+                "Radian": "ラジアン",
+                "Degree": "度",
+                "CoordinateNote": "CAD または BIM ツールからの座標は、Matterport スペースで使用される適切な座標に内部的に変換される必要があります。",
             }
         }
     },

package/lib/atwinui/components/toolbar/index.d.ts

@@ -11,6 +11,7 @@ import { renderRecepientOptions, renderTagMessages, createTagMessage, setTagMess
 import { clearTagFormDropdown, clearTagFilterDropdown } from "./tagFormPane";
 import { toggleModal, setModalAction } from "./modal";
 import { toggleModelControl } from "./modelControlsPane";
+import { toggleActionSettings } from "./actionSettingsPane";
 import './i18n';
 declare let actionBar: HTMLElement;
 /**
@@ -20,4 +21,4 @@ declare let actionBar: HTMLElement;
  */
 declare function setPreferredLanguage(): void;
 declare function renderToolbarUI(payload: IToolbarData): void;
-export { actionBar, tagFormMode, selectedTag, selectedCategoryFilterId, selectedSubCategoryFilterId, renderToolbarUI, renderObjectCards, setActiveMenu, clearActiveMenu, setActiveActionBtn, renderLibraryCards, renderTags, getTagFormData, renderTagRow, addClickEventToTagRow, setTagCategoriesOption, setActiveThemeCard, setActiveCard, setActiveLibraryCard, clearActiveCard, clearActiveLibraryCard, removeObjectCard, renderRecepientOptions, renderTagMessages, createTagMessage, renderCategoryDropdownOptions, toggleDropdown, setTagLink, getTagLink, setTagMessagingDetails, clearTagFormDropdown, clearTagFilterDropdown, getObjectListStatus, toggleModal, setModalAction, toggleModelControl, clearActiveActionBtn, toggleActionBarButtons, filterTagList, setPreferredLanguage };
+export { actionBar, tagFormMode, selectedTag, selectedCategoryFilterId, selectedSubCategoryFilterId, renderToolbarUI, renderObjectCards, setActiveMenu, clearActiveMenu, setActiveActionBtn, renderLibraryCards, renderTags, getTagFormData, renderTagRow, addClickEventToTagRow, setTagCategoriesOption, setActiveThemeCard, setActiveCard, setActiveLibraryCard, clearActiveCard, clearActiveLibraryCard, removeObjectCard, renderRecepientOptions, renderTagMessages, createTagMessage, renderCategoryDropdownOptions, toggleDropdown, setTagLink, getTagLink, setTagMessagingDetails, clearTagFormDropdown, clearTagFilterDropdown, getObjectListStatus, toggleModal, setModalAction, toggleModelControl, toggleActionSettings, clearActiveActionBtn, toggleActionBarButtons, filterTagList, setPreferredLanguage };

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

@@ -15,13 +15,14 @@ import { renderRecepientOptions, renderTagMessages, createTagMessage, setTagMess
 import { clearTagFormDropdown, clearTagFilterDropdown } from "./tagFormPane";
 import { renderModal, toggleModal, setModalAction } from "./modal";
 import { renderModelControlPane, toggleModelControl } from "./modelControlsPane";
+import { renderActionSettingsPane, toggleActionSettings } from "./actionSettingsPane";
 import { getURLParams } from "../../../utils";
 import './i18n';
 import i18n from './i18n';
 import { renderRoomTreePane } from "./spacePartition/roomTreePane";
 import { renderRoomFormPane } from "./spacePartition/roomFormPane";
 let iFrame, sidebarContainer;
-let menuBar, actionBar, objectListPane, addObjectPane, tagListPane, tagFormPane, addMediaScreenForm, libraryPane, tagMessagingPane, themePane, modelControlPane, roomTreePane, roomFormPane;
+let menuBar, actionBar, objectListPane, addObjectPane, tagListPane, tagFormPane, addMediaScreenForm, libraryPane, tagMessagingPane, themePane, modelControlPane, actionSettingsPane, roomTreePane, roomFormPane;
 function getIframeElement(iframeId) {
     if (!iframeId || iframeId === '') {
         console.error("IframeId is empty or undefined");
@@ -87,9 +88,11 @@ function renderToolbarUI(payload) {
     modelControlPane = renderModelControlPane();
     roomTreePane = renderRoomTreePane();
     roomFormPane = renderRoomFormPane();
+    actionSettingsPane = renderActionSettingsPane();
     renderModal();
     sidebarContainer.appendChild(modelControlPane);
     sidebarContainer.appendChild(actionBar);
+    sidebarContainer.appendChild(actionSettingsPane);
     sidebarContainer.appendChild(roomTreePane);
     sidebarContainer.appendChild(roomFormPane);
     sidebarContainer.appendChild(themePane);
@@ -117,6 +120,7 @@ function renderToolbarUI(payload) {
     themePane.style.display = 'none';
     roomTreePane.style.display = 'none';
     roomFormPane.style.display = 'none';
+    actionSettingsPane.style.display = 'none';
     const customTheme = window.localStorage.getItem('customizedTheme');
     if (customTheme && customTheme !== '') {
         console.log("customTheme: ", customTheme);
@@ -127,4 +131,4 @@ function renderToolbarUI(payload) {
         themeManager(config);
     }
 }
-export { actionBar, tagFormMode, selectedTag, selectedCategoryFilterId, selectedSubCategoryFilterId, renderToolbarUI, renderObjectCards, setActiveMenu, clearActiveMenu, setActiveActionBtn, renderLibraryCards, renderTags, getTagFormData, renderTagRow, addClickEventToTagRow, setTagCategoriesOption, setActiveThemeCard, setActiveCard, setActiveLibraryCard, clearActiveCard, clearActiveLibraryCard, removeObjectCard, renderRecepientOptions, renderTagMessages, createTagMessage, renderCategoryDropdownOptions, toggleDropdown, setTagLink, getTagLink, setTagMessagingDetails, clearTagFormDropdown, clearTagFilterDropdown, getObjectListStatus, toggleModal, setModalAction, toggleModelControl, clearActiveActionBtn, toggleActionBarButtons, filterTagList, setPreferredLanguage };
+export { actionBar, tagFormMode, selectedTag, selectedCategoryFilterId, selectedSubCategoryFilterId, renderToolbarUI, renderObjectCards, setActiveMenu, clearActiveMenu, setActiveActionBtn, renderLibraryCards, renderTags, getTagFormData, renderTagRow, addClickEventToTagRow, setTagCategoriesOption, setActiveThemeCard, setActiveCard, setActiveLibraryCard, clearActiveCard, clearActiveLibraryCard, removeObjectCard, renderRecepientOptions, renderTagMessages, createTagMessage, renderCategoryDropdownOptions, toggleDropdown, setTagLink, getTagLink, setTagMessagingDetails, clearTagFormDropdown, clearTagFilterDropdown, getObjectListStatus, toggleModal, setModalAction, toggleModelControl, toggleActionSettings, clearActiveActionBtn, toggleActionBarButtons, filterTagList, setPreferredLanguage };

package/lib/atwinui/components/toolbar/menuBar.d.ts

@@ -3,6 +3,7 @@ export declare let isObjectListEnabled: boolean;
 export declare let isMeetingEnabled: boolean;
 export declare let isThemeEnabled: boolean;
 export declare let isRoomCreationEnabled: boolean;
+export declare let isBIMEnabled: boolean;
 export declare function renderMenuBar(iFrame: HTMLIFrameElement): HTMLDivElement;
 export declare function setActiveMenu(id: string): void;
 export declare function clearActiveMenu(id: string): void;

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

@@ -7,7 +7,7 @@ export let isObjectListEnabled = true;
 export let isMeetingEnabled = false;
 export let isThemeEnabled = true;
 export let isRoomCreationEnabled = true;
-let isBIMEnabled = true;
+export let isBIMEnabled = true;
 export function renderMenuBar(iFrame) {
     if (!iFrame) {
         log.error(`Could not find target iFrame`);
@@ -48,6 +48,10 @@ export function renderMenuBar(iFrame) {
         <span class="mdi mdi-ruler-square-compass" id="at-room-creation-btn" data-cy="at-room-creation-btn" target-pane="at-room-tree-pane"></span>
         <div class="at_icon_tooltip" data-cy="at-tooltip-theme">${i18n.t('RoomCreation')}</div>
     </div>
+    <div class="at_sidebar_button_icon" style="display:${isBIMEnabled ? 'block' : 'none'}">
+        <img class="at_bim_settings_img" src="../../node_modules/architwin/static/bim.png" alt="bim" id="at-settings-btn" data-cy="at-settings-btn" target-pane="at-settings-pane"/>
+        <div class="at_icon_tooltip" data-cy="at-tooltip-settings">${i18n.t('Settings')}</div>
+    </div>
     `;
     return menuBarElement;
 }
@@ -58,6 +62,7 @@ export function renderMenuBar(iFrame) {
 function setMenuItemsStatus() {
     const toolbarConfig = _mpConfig.toolbarConfig;
     const menuItems = _mpConfig.toolbarConfig.menuItems;
+    console.log("menuItems", menuItems);
     if (toolbarConfig && menuItems) {
         // MEETING
         if (menuItems.meeting !== undefined) {
@@ -102,6 +107,7 @@ export function setActiveMenu(id) {
         case 'at-minimap-btn':
         case 'at-theme-picker-btn':
         case 'at-room-creation-btn':
+        case 'at-settings-btn':
             if (parent.classList.contains('at_sidebar_button_icon_active')) {
                 // remove
                 log.info("removing active...");
@@ -136,7 +142,10 @@ export function clearActiveMenu(id) {
     log.info("clearActiveMenu: ", id);
     if (id != 'at-minimap-btn' && activeMenu) {
         // get child id
-        const activeChildId = (_b = (_a = activeMenu.querySelector('.mdi')) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : undefined;
+        let activeChildId = (_b = (_a = activeMenu.querySelector('.mdi')) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : undefined;
+        if (id == 'at-settings-btn') {
+            activeChildId = "at-settings-btn";
+        }
         log.info("activeChildId: ", activeChildId);
         // check if active menu and target menu id are the same
         // if true do not set inactive otherwise, remove

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

@@ -1,5 +1,6 @@
 import { degreesToRadians, radiansToDegrees, useCapitalizeFirstLetter } from "../../../utils";
 import { getSelectedObject } from "../../../architwin";
+import { convertYupToZup } from "../../../worldConversion";
 import { Notyf } from 'notyf';
 import log from 'loglevel';
 import i18n from "./i18n";
@@ -11,10 +12,11 @@ let inputX;
 let inputY;
 let inputZ;
 let isInputEventListenerSet = false;
+// let coordX:string = ""
 export function renderModelControlPane(type = 'Translate') {
     const element = document.createElement('div');
     element.classList.add('at_container');
-    element.classList.add('at_h-18');
+    element.classList.add('at_h-full');
     element.setAttribute('id', 'at-model-control-pane');
     element.setAttribute('data-cy', 'at-model-control-pane');
     element.innerHTML = `
@@ -24,6 +26,7 @@ export function renderModelControlPane(type = 'Translate') {
                     <span class="at_bolder at_text_base" id="at-transform-type-title">${i18n.t(type)}</span>
                     <span class="mdi mdi-close at_text_base" style="cursor:pointer" id="at-close-model-controls" data-cy="at-close-model-controls"></span>
                 </div>
+                <span id="at-coordinate-system-text" class="at_text_xs">${i18n.t("CoordinateSystem")}: ${i18n.t("Matterport")}</span>
                 <div class="at_number_field">
                     <span class="at_bolder">X</span>
                     <input type="number" id="at-input-x" class="at_rounded_input"/>
@@ -39,7 +42,19 @@ export function renderModelControlPane(type = 'Translate') {
                     <input type="number" id="at-input-z" class="at_rounded_input"/>
                     <span class="at_bolder at_model_unit">m</span>
                 </div>
-                <button class="at_button at_primary_azusa" id="at-confirm-transform" data-cy="at-confirm-transform">${i18n.t('Confirm')}</button>
+                <div class="at_mt_static_text at_mt_static_text_container at_inline_block at_rounded">
+                    <span class="at_text_xxs at_mx-w-16" id="at-transform-note">Matterport</span>
+                    <span class="at_text_xxs">x:</span>
+                    <span class="at_text_xxs at_mt_cal_text" id="at-mt-coordx"></span>         
+                    <span class="at_text_xxs">y:</span>
+                    <span class="at_text_xxs at_mt_cal_text" id="at-mt-coordy"></span>
+                    <span class="at_text_xxs">z:</span>
+                    <span class="at_text_xxs at_mt_cal_text" id="at-mt-coordz"></span>
+                </div>
+                <span class="at_text_xxs at_mx-w-16" id="at-transform-note">
+                    ${i18n.t("CoordinateNote")}
+                </span>
+                <button class="at_button at_cat_confirm_btn" id="at-confirm-transform" data-cy="at-confirm-transform">${i18n.t('Confirm')}</button>
             </div>
         </div>
     `;
@@ -54,6 +69,7 @@ export function toggleModelControl(visible = true, type = 'translate') {
         modelControlPane.style.display = 'block';
         setTransformType(type);
         showCurrentCoordinateValue();
+        log.info("=====test toggle: ", type);
         return;
     }
     modelControlPane.style.display = 'none';
@@ -159,6 +175,7 @@ export function showCurrentCoordinateValue(payload) {
         inputX.value = currentPos.x.toFixed(3).toString();
         inputY.value = currentPos.y.toFixed(3).toString();
         inputZ.value = currentPos.z.toFixed(3).toString();
+        updateDisplayedCoordinates();
     }
     else if (transformType == 'rotate') {
         //@ts-expect-error
@@ -176,12 +193,14 @@ export function showCurrentCoordinateValue(payload) {
         inputX.setAttribute('radian-value', rotationDegreeFormat.x.toString());
         inputY.setAttribute('radian-value', rotationDegreeFormat.y.toString());
         inputZ.setAttribute('radian-value', rotationDegreeFormat.z.toString());
+        updateDisplayedCoordinates();
     }
     else if (transformType == 'scale') {
         const currentScale = selectedObject.node.scale;
         inputX.value = currentScale.x.toFixed(3).toString();
         inputY.value = currentScale.y.toFixed(3).toString();
         inputZ.value = currentScale.z.toFixed(3).toString();
+        updateDisplayedCoordinates();
     }
 }
 function setModelInputUnit(type) {
@@ -241,4 +260,70 @@ export function handleModelControlInputs() {
     inputX.addEventListener('input', onModelControlInput);
     inputY.addEventListener('input', onModelControlInput);
     inputZ.addEventListener('input', onModelControlInput);
+    updateDisplayedCoordinates();
+}
+function updateDisplayedCoordinates() {
+    log.info("=====updating coordinates: ");
+    const selectedObject = getSelectedObject();
+    // const scaleFactor = getScaleFactor()
+    // const measurementUnit = getMeasurementUnit()
+    // const basePoint = getBasepoint()
+    // let coordX: string = inputX.value
+    // let coordY: string = inputY.value
+    // let coordZ: string = inputZ.value
+    // if (coordX) {
+    //     document.getElementById("at-mt-coordx").textContent = coordX;
+    // }
+    // if (coordY) {
+    //     document.getElementById("at-mt-coordy").textContent = coordY;
+    // }
+    // if (coordZ) {
+    //     document.getElementById("at-mt-coordz").textContent = coordZ;
+    // }
+    // if (coordX && coordY && coordZ) {
+    //     const object = {
+    //         x: Number(inputX.value),
+    //         y: Number(inputY.value),
+    //         z: Number(inputZ.value)
+    //     } as Vector3
+    //     log.info("=====test Object to update: ", object)
+    //     const convert = convertYupToZup(object)
+    //     if (convert) {
+    //         log.info("=====test Convert Text: ", convert)
+    //     }
+    // }
+    if (inputX && inputY && inputZ && selectedObject) {
+        const transform = getCoordinateValues();
+        // log.info("======Testing from: ", scaleFactor, measurementUnit, basePoint)
+        log.info("=====text Selected Object: ", selectedObject);
+        const object = {
+            x: Number(inputX.value),
+            y: Number(inputY.value),
+            z: Number(inputZ.value)
+        };
+        log.info("=====test Object to update: ", object);
+        const convert = convertYupToZup(object);
+        // when converted value exists
+        if (convert) {
+            log.info("=====test Convert Text: ", convert);
+            document.getElementById("at-mt-coordx").textContent = convert.x.toString();
+            document.getElementById("at-mt-coordy").textContent = convert.y.toString();
+            document.getElementById("at-mt-coordz").textContent = convert.z.toString();
+            // if (selectedObject) {
+            //     if (transformType == 'translate') {
+            //         log.info("=====test Translate: ", transform, convert)
+            //         transform.object_position = convert
+            //         setObjectTransformation(selectedObject.node, transform)
+            //     } else if (transformType == 'rotate') {
+            //         log.info("=====test Rotate: ", transform, convert)
+            //         transform.object_rotation = convert
+            //         setObjectTransformation(selectedObject.node, transform)
+            //     } else if (transformType == 'scale') {
+            //         log.info("=====test Scale: ", transform, convert)
+            //         transform.object_scale = convert
+            //         setObjectTransformation(selectedObject.node, transform)
+            //     }
+            // }
+        }
+    }
 }

package/lib/atwinui/events.js

@@ -25,6 +25,7 @@ import * as minimap from '../minimap';
 import { clearActiveThemeCard, getSelectedTheme } from "./components/toolbar/themePane";
 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, getTempCurrentPolygon, clearTempCurrentPolygon } 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 } from "./components/toolbar/actionSettingsPane";
 let activeToolbarItem, activeActionItem, activePane, activeActionPane, cancelTagPlacementPrompt, cancelModelPlacementPrompt;
 let notyf = new Notyf({ position: { x: 'left', y: 'bottom' }, duration: 4500, types: [
         {
@@ -99,7 +100,9 @@ function toggleDisplayPane(targetId) {
             return;
         }
         const clickedElement = document.getElementById(targetId);
+        console.log("Testing: ", clickedElement);
         const paneId = clickedElement.getAttribute('target-pane');
+        console.log("Testing: ", paneId);
         if (paneId != null && paneId != '') {
             log.info("paneElement", paneId);
             _currentPaneId = paneId;
@@ -136,7 +139,7 @@ function toggleDisplayPane(targetId) {
                 if (paneId === 'at-object-list-pane') {
                     const objectsInSpace = get3DXObjects();
                     const objectComponents = objectsInSpace.map(obj => obj.component);
-                    const spaceObjects = objectsInSpace.filter(obj => obj.type !== 'POLYGON').map(obj => obj.object);
+                    const spaceObjects = objectsInSpace.filter(obj => obj.type !== 'POLYGON' && obj.type !== 'BASEPOINT').map(obj => obj.object);
                     renderObjectCards(spaceObjects, objectComponents);
                     if (targetId === 'at-cancel-library-btn') {
                         yield cancelModelPlacement();
@@ -206,15 +209,34 @@ function toggleDisplayPane(targetId) {
                     log.info("Room Form Pane");
                     displayPartitionFormMode();
                 }
+                if (paneId === 'at-settings-pane') {
+                    log.info("at-settings-pane");
+                    setTempBasepoint(undefined);
+                    initSettingsValues();
+                }
+                if (!getBasepoint()) {
+                    const target = _3DXObjects.find(obj => obj.type === 'BASEPOINT');
+                    if (target)
+                        disposeModel(target);
+                }
                 return;
             }
             else {
                 activePane = null;
                 paneElement.style.display = 'none';
+                if (!getBasepoint()) {
+                    const target = _3DXObjects.find(obj => obj.type === 'BASEPOINT');
+                    if (target)
+                        disposeModel(target);
+                    setTempBasepoint(undefined);
+                    removeTransformControls();
+                    clearSelectedObject();
+                    cancelModelPlacement();
+                }
                 return;
             }
         }
-        log.error('Could not get value of target-plane attribute');
+        log.error('Could not get value of target-pane attribute');
         return;
     });
 }
@@ -271,6 +293,12 @@ function setupIndividualEventListeners() {
     handleSpacePartitionReport();
     handleUndoDrawAction();
     handleRedoDrawAction();
+    handleMeasurementUnitDropdown();
+    handleRotationUnitDropdown();
+    handleCoordinateSystem();
+    handleScaleFactorSettings();
+    handleSaveActionSettings();
+    handleCalibrateBasepoint();
 }
 //================ OBJECT EVENT HANDLERS ===============//
 function handleTranslateObject() {
@@ -1088,6 +1116,8 @@ function handleConfirmTransform() {
                 dispatchSpaceEvent(SPACE_EVENTS.DRAG_END, payload);
                 removeTransformControls();
             }
+            const adjustBasepointBtn = document.getElementById('at-calibrate-basepoint-btn');
+            adjustBasepointBtn.innerText = i18n.t('Close');
         });
     }
 }
@@ -2005,6 +2035,67 @@ function handleRedoDrawAction() {
         redoDrawAction();
     }));
 }
+function handleMeasurementUnitDropdown() {
+    const dropdownBtn = document.getElementById('at-selected-measurement-unit');
+    const optionsContainer = document.getElementById('at-measurement-unit-options');
+    dropdownBtn === null || dropdownBtn === void 0 ? void 0 : dropdownBtn.addEventListener('click', () => {
+        toggleActionSettingsDropdown('at-measurement-unit-options');
+    });
+    optionsContainer === null || optionsContainer === void 0 ? void 0 : optionsContainer.addEventListener('click', (event) => {
+        const target = event.target;
+        if (target.classList.contains('at_option')) {
+            actionSettingsSelectOption(target, 'measurement-unit');
+            setTempMeasurementUnit(target.dataset.value);
+        }
+    });
+}
+function handleRotationUnitDropdown() {
+    const dropdownBtn = document.getElementById('at-selected-rotation-unit');
+    const optionsContainer = document.getElementById('at-rotation-unit-options');
+    dropdownBtn === null || dropdownBtn === void 0 ? void 0 : dropdownBtn.addEventListener('click', () => {
+        toggleActionSettingsDropdown('at-rotation-unit-options');
+    });
+    optionsContainer === null || optionsContainer === void 0 ? void 0 : optionsContainer.addEventListener('click', (event) => {
+        const target = event.target;
+        if (target.classList.contains('at_option')) {
+            actionSettingsSelectOption(target, 'rotation-unit');
+            setTempRotationUnit(target.dataset.value);
+        }
+    });
+}
+function handleCoordinateSystem() {
+    document.querySelectorAll('input[name="coordinate-system"]').forEach(input => {
+        input.addEventListener('change', (event) => {
+            const target = event.target;
+            setTempCoordinateSystem(target.value);
+        });
+    });
+}
+function handleScaleFactorSettings() {
+    const scaleFactor = document.getElementById('at-settings-scale-factor-input');
+    scaleFactor.addEventListener('change', (event) => {
+        const target = event.target;
+        setTempScaleFactor(target.value);
+    });
+}
+function handleSaveActionSettings() {
+    const saveActionSettingsBtn = document.getElementById('at-save-settings');
+    saveActionSettingsBtn.addEventListener('click', () => {
+        setCoordinateSystem(getTempCoordinateSystem());
+        setScaleFactor(getTempScaleFactor());
+        setMeasurementUnit(getTempMeasurementUnit());
+        setRotationUnit(getTempRotationUnit());
+        setBasepoint(getTempBasepoint());
+        setTempBasepoint(undefined);
+    });
+}
+function handleCalibrateBasepoint() {
+    const calibrateBasepointBtn = document.getElementById('at-calibrate-basepoint-btn');
+    calibrateBasepointBtn.addEventListener('click', () => {
+        console.log("Calibrate button clicked!");
+        toggleCalibrateBasepoint();
+    });
+}
 export { 
 //state
 activeToolbarItem, activeActionItem, cancelModelPlacementPrompt, 

package/lib/types.d.ts

@@ -232,6 +232,7 @@ export interface IShowcaseObject {
     is_read: boolean;
     is_new: boolean;
     object_data: I3DObject;
+    coordinate_system?: string;
 }
 export interface IVideoObject {
     data: IShowcaseObject;

package/lib/utils.js

@@ -369,5 +369,5 @@ export function getAssetUrl(filename) {
     if ('bundlePath' in _mpConfig) {
         _staticAssetPath = 'https://cdn.jsdelivr.net/npm/architwin@latest/';
     }
-    return `${_staticAssetPath}/static/${filename}`;
+    return `${_staticAssetPath}static/${filename}`;
 }

package/package.json

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

package/static/atwinui.css

@@ -524,6 +524,10 @@
     background-color: var(--bg-secondary);
 }
 
+.at_options_container{
+    position: absolute;
+}
+
 .at_option {
     cursor: pointer;
     padding: 4px 8px;
@@ -1094,7 +1098,8 @@
 }
 
 .at_face_title,
-.at_partition_title {
+.at_partition_title,
+.at_converted_coordinates_title {
     display: var(--container-display);
     background-color: hsla(0,0%,19%,1);
     border-radius: 4px;
@@ -1150,7 +1155,8 @@
     cursor: pointer;
 }
 
-.at_face_vertex_container {
+.at_face_vertex_container,
+.at_coordinaes_container {
     display: flex;
     flex-direction: column;
     gap: 4px;
@@ -1498,3 +1504,166 @@
 .at_toggle {
     padding-right: 5px;
 }
+
+/* BIM */
+.at_mt_static_text_container {
+    text-align: center;
+    background: var(--bg-secondary-azusa);
+    padding-bottom: 5px;
+    margin-right: 25px;
+    margin-left: 25px;
+}
+.at_mt_cal_text{
+    background: var(--text-color-light);
+    color: var(--bg-secondary-azusa);
+    padding-left: 3px;
+    padding-right: 3px;
+    position: relative;
+}
+
+.at_mt_cal_text::after{
+    position: absolute;
+}
+
+.at_cat_confirm_btn{
+    background-color: var(--bg-highlight) !important;
+    color: var(--text-color-light) !important;
+}
+
+.at_cat_confirm_btn:hover {
+    background-color: var(--bg-accent-azusa) !important;
+    color: var(--text-color-light) !important;
+}
+
+.at_calibrate_basepoint_btn{
+    background-color: var(--bg-accent-azusa);
+    color: var(--text-color-light);
+    border-radius: 6px;
+    border: 1px solid white;
+    margin-bottom: 10px;
+}   
+
+.at_calibrate_basepoint_btn.active {
+    background-color: var(--bg-highlight-azusa);
+    color: var(--text-color-light);
+}
+
+.at_converted_coordinates_title {
+    font-size: 14px;
+}
+
+.at_scrollable_container.settings {
+    max-height: 80vh;
+    gap: 4px;
+    overflow-y: scroll;
+    padding: 2px 2px;
+    scroll-behavior: smooth;
+}
+
+.at_coordinates_container {
+    margin-bottom: 4px;
+    display: var(--container-display);
+    background-color: hsla(0,0%,19%,1);
+    flex-direction: column;
+    border-radius: 4px;
+    margin: 4px 8px 4px 8px;
+}
+
+.at_coordinate_title_container {
+    display: var(--container-display);    
+    border-radius: 4px;
+    justify-content: center;
+    align-items: center;
+    padding: 2px 5px 2px 5px; 
+    margin: 2px;
+}
+
+.at_xyz_coordinate {
+    display: var(--container-display);
+    background-color: hsla(0, 3%, 6%, 0.8);
+    border-radius: 4px;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px 4px 4px 4px; 
+    margin: 0px 6px 2px 6px;
+}
+
+.at_coordinate_title {
+    background-color: hsla(0, 3%, 6%, 0.8);
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    font-family: Arial, sans-serif;
+    text-align: center;
+    width: 135px;
+}
+
+.at_coordinate_value {
+    border-radius: 4px;
+    color: white;
+    font-size: 12px;
+    font-family: Arial, sans-serif;
+    white-space: nowrap;
+    text-align: center;
+    width: auto;
+}
+
+.at_bim_icon_left {
+    width: 20px;
+    height: 20px;
+    line-height: 1;
+    background-color: hsla(71,96%,62%,1);
+    color: black;
+    border-radius: 4px;
+    padding: 2px;
+    cursor: default;
+    text-align: center;
+}
+
+.at_bim_icon_right {
+    width: 20px;
+    height: 20px;
+    line-height: 1;
+    background-color:hsla(0,0%,100%,0.8) ;
+    color: black;
+    border-radius: 4px;
+    padding: 2px;
+    cursor: default;
+    text-align: center;
+}
+
+.at_bim_settings_img {
+    width: 24px; /* Image size */
+    height: 24px;
+    object-fit: contain; /* Prevents distortion */
+    filter: brightness(0) invert(1); /* Makes the image white */
+    position: relative;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%); /* Centers the image perfectly */
+}
+
+.at_origin_value {
+    background-color:hsla(0,0%,100%,0.8);
+    width: 30px;
+    border-radius: 4px;
+    text-align: center;
+    color: black;
+}
+
+.at_origin_value_container {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 15px;
+    gap: 1rem;
+}
+
+.at_converted_coordinates_list_container {
+    display: var(--container-display);
+    border-radius: var(--border-radius);
+    background-color: black;
+    flex-direction: column;
+    padding: 8px 6px 8px 6px;
+    max-height: 22rem;
+}

package/static/utility.css

@@ -182,6 +182,10 @@ width: 100vw;
     max-height: 77vh;
   }
 
+  .at_h-max-92 {
+    max-height: 92vh;
+  }
+
   .at_h-max-95 {
     max-height: 95vh;
   }
@@ -256,3 +260,27 @@ width: 100vw;
   .at_mx-auto {
     margin: auto;
   }
+
+  .at_gap_1 {
+    gap: 0.25rem;
+  }
+
+  .at_gap_2{
+    gap: 0.5rem;
+  }
+
+  .at_gap_3 {
+    gap: 0.75rem;
+  }
+
+  .at_gap_4 {
+    gap: 1rem;
+  }
+
+  .at_absolute {
+    position: absolute;
+  }
+
+  .at_inline_block{
+    display: inline-block
+  }