architwin 1.10.23 → 1.11.1

package/lib/minimap.js

@@ -19,6 +19,7 @@ import i18n from './atwinui/components/toolbar/i18n';
 import 'notyf/notyf.min.css';
 import { getAssetUrl } from "./utils";
 import { isCustomMapControlsVisible } from "./atwinui/events";
+import { getSelectedMapOption } from "./atwinui/components/toolbar/generalSettingsMenuPane";
 let _miniMapData;
 let _mapContainer;
 let _mapBox;
@@ -42,6 +43,7 @@ let _customMapYOffset = 0;
 let minX = 0, minY = 0, maxX = 0, maxY = 0;
 let _customMapContainer;
 let _customMapFloorData = [];
+let _minimapPosition = "bottomRight";
 let notyf = new Notyf({ position: { x: 'left', y: 'bottom' }, duration: 4500, types: [
         {
             type: 'info',
@@ -489,17 +491,16 @@ function setImg(minimap, floorSequence, isStandAlone = false) {
         _mapContainer.appendChild(isCurrentFloorOnlyEnabled ? _mapImgEl : map);
     });
 }
-function showDirection(mapType = MAP_OPTIONS.CUSTOM_MAP) {
+function showDirection() {
     // log.info('showDirection')
     let btnX = 0;
     let btnY = 0;
     const thisSweep = getCurrentSweep();
     const thisCameraPose = getCurrentCameraPose();
-    // Check current minimap type from general settings
-    // FOR NOW USE CUSTOM MAP; BUT SHOULD CHECK BASED ON ACTUAL SETTINGS STATE
-    if (mapType === MAP_OPTIONS.DEFAULT_MAP) {
-        if (!thisSweep && !thisCameraPose)
-            return;
+    const selectedMapOption = getSelectedMapOption();
+    if (!thisSweep && !thisCameraPose)
+        return;
+    if (selectedMapOption === MAP_OPTIONS.DEFAULT_MAP) {
         if (!thisCameraPose.rotation || !thisCameraPose.rotation.y)
             return;
         const angle = thisCameraPose.rotation.y;
@@ -524,15 +525,14 @@ function showDirection(mapType = MAP_OPTIONS.CUSTOM_MAP) {
         }
     }
     else {
-        if (!thisSweep && !thisCameraPose)
-            return;
         const angle = thisCameraPose.rotation.y;
-        const sweepBtn = document.getElementById('p' + thisSweep.id);
+        const sweepBtn = document.getElementById('sp' + thisSweep.id);
         const canvas = document.getElementById("at-custom-map-canvas");
         if (!sweepBtn || !canvas)
             return;
         const ctx = canvas.getContext("2d");
         if (ctx && sweepBtn) {
+            log.info("[Minimap custom] HAS CANVAS AND SWEEP BTNS..");
             ctx.globalAlpha = 0.7;
             btnX = (sweepBtn.getBoundingClientRect().x - canvas.getBoundingClientRect().x) + (sweepBtn.offsetWidth / 2);
             btnY = (sweepBtn.getBoundingClientRect().y - canvas.getBoundingClientRect().y) + (sweepBtn.offsetHeight / 2);
@@ -952,7 +952,8 @@ function mapPositionHandler(mapPositions) {
     mapTopRight.addEventListener('click', () => {
         console.log("__@ Map Position: Top Right!");
         mapPositions.forEach(position => _mapBox.classList.remove(position));
-        setMinimapPosition('topRight');
+        _minimapPosition = 'topRight';
+        setMinimapPosition(_mapBox, 'topRight');
         if (options.classList.contains('open')) {
             options.classList.remove('open');
         }
@@ -960,7 +961,8 @@ function mapPositionHandler(mapPositions) {
     mapTopLeft.addEventListener('click', () => {
         console.log("__@ Map Position: Top Left!");
         mapPositions.forEach(position => _mapBox.classList.remove(position));
-        setMinimapPosition('topLeft');
+        _minimapPosition = 'topLeft';
+        setMinimapPosition(_mapBox, 'topLeft');
         if (options.classList.contains('open')) {
             options.classList.remove('open');
         }
@@ -968,7 +970,8 @@ function mapPositionHandler(mapPositions) {
     mapBottomLeft.addEventListener('click', () => {
         console.log("__@ Map Position: Bottom Left!");
         mapPositions.forEach(position => _mapBox.classList.remove(position));
-        setMinimapPosition('bottomLeft');
+        _minimapPosition = 'bottomLeft';
+        setMinimapPosition(_mapBox, 'bottomLeft');
         if (options.classList.contains('open')) {
             options.classList.remove('open');
         }
@@ -976,7 +979,8 @@ function mapPositionHandler(mapPositions) {
     mapBottomRight.addEventListener('click', () => {
         console.log("__@ Map Position: Bottom Right!");
         mapPositions.forEach(position => _mapBox.classList.remove(position));
-        setMinimapPosition('bottomRight');
+        _minimapPosition = 'bottomRight';
+        setMinimapPosition(_mapBox, 'bottomRight');
         if (options.classList.contains('open')) {
             options.classList.remove('open');
         }
@@ -986,24 +990,24 @@ function mapPositionHandler(mapPositions) {
  * Sets Minimap Position anywhere inside Space as selected by User
  * @param position Accepts a string (bottomLeft/bottomRight/topRight/topLeft)
  * */
-function setMinimapPosition(position) {
+function setMinimapPosition(mapContainer, position) {
     return __awaiter(this, void 0, void 0, function* () {
         log.info('Selected Minimap Position: ', position);
         if (position) {
             log.info("Setting map position to ", position);
-            _mapBox.classList.add(position);
+            mapContainer.classList.add(position);
             log.info("This is log from minimap.ts, first if");
         }
         else {
             if (_mpConfig.mapConfig.position) {
                 //Set map to top right if no custom position is set
                 log.warn("Empty or invalid map position passed, defaulting to mapConfig");
-                _mapBox.classList.add(_mpConfig.mapConfig.position);
+                mapContainer.classList.add(_mpConfig.mapConfig.position);
                 log.info("This is log from minimap.ts, inside else");
             }
             else {
                 log.warn("Empty or invalid map position passed, defaulting to mapConfig");
-                _mapBox.classList.add('bottomRight');
+                mapContainer.classList.add('bottomRight');
                 log.info("This is log from minimap.ts, inside else");
             }
         }
@@ -1041,8 +1045,9 @@ function handleMapResize() {
  */
 function setupCustomMinimapPane() {
     log.info('setupCustomMinimap');
+    log.info("_minimapPosition: ", _minimapPosition);
     return `
-        <div id="at-custom-minimap-pane" class="at_overlay_left_minimap">
+        <div id="at-custom-minimap-pane" class="at_overlay_left_minimap ${_minimapPosition}" style="display:none">
             <div id="at-custom-map-close-btn" class="at_close_minimap">
                 <span class="mdi mdi-window-close" id="at-close-minimap-btn" data-cy="at-close-minimap-btn"></span>
             </div>
@@ -1067,14 +1072,25 @@ function setupCustomMinimapPane() {
  */
 function setupCustomMinimapSettingUI() {
     return `
-        <div id="at-custom-minimap-settings" class="at_custom_minimap_settings ${isCustomMapControlsVisible ? 'show' : ''}">
+        <!--- <div id="at-custom-minimap-settings" class="at_custom_minimap_settings ${isCustomMapControlsVisible ? 'show' : ''}"> -->
+        <div id="at-custom-minimap-settings" class="at_custom_minimap_settings">
+            <!-- Upload Image Button -->
+            <div class="at_custom_button_row" style="display: flex; justify-content: center;">
+                <div id="at-custom-upload-image-btn" class="at_custom_button_settings">
+                    <span class="mdi mdi-upload"></span>
+                    <span>${i18n.t('UploadImage')}</span>
+                </div>    
+                <div v-show="false" id="at-custom-upload-image-btn" class="at_custom_button_settings" style="display:none">
+                    <input type="file" id="at-custom-image-input" accept="image/*" />
+                </div>    
+            </div>   
             <!-- Buttons Row -->
             <div class="at_custom_button_row">
-                <div id="at-custom-screenshot-btn" class="at_custom_button_settings">
+                <div id="at-custom-screenshot-btn" class="at_custom_button_settings" style="width: 100%;">
                     <span class="mdi mdi-camera-outline"></span>
                     <span>${i18n.t('Screenshot')}</span>
                 </div>
-                <div id="at-custom-rotate-btn" class="at_custom_button_settings">
+                <div id="at-custom-rotate-btn" class="at_custom_button_settings" style="width: 100%;">
                     <span class="mdi mdi-rotate-right"></span>
                     <span>${i18n.t('RotateMinimap')}</span>
                 </div>
@@ -1119,7 +1135,7 @@ function setCustomMap(mpSdk) {
     const showcase = document.getElementById('showcase-container');
     const mapContainer = document.createElement('div');
     mapContainer.innerHTML = minimapElement;
-    showcase.prepend(mapContainer);
+    showcase.append(mapContainer);
     console.log("Successfully rendered.");
     subscribeToFloorChanges(mpSdk);
 }
@@ -1220,9 +1236,9 @@ function displaySweepToCustomMap(sweepItem, mpSdk) {
     const scaleY = (_customMapScale * 21 / 9) / _customMapTranslate;
     const scaledX = scaleToContainer(posX, minX, maxX, scaleX, 0);
     const scaledY = scaleToContainer(posY, minY, maxY, scaleY, 0);
-    thisSweep.setAttribute('id', 'p' + sweepItem.id);
+    thisSweep.setAttribute('id', 'sp' + sweepItem.id);
     thisSweep.setAttribute('value', sweepItem.id);
-    thisSweep.setAttribute('data-cy', 'p' + sweepItem.id);
+    thisSweep.setAttribute('data-cy', 'sp' + sweepItem.id);
     thisSweep.style.left = (scaledX + parseInt(_customMapXOffset.toString())) + '%';
     thisSweep.style.top = (scaledY + parseInt(_customMapYOffset.toString())) + '%';
     thisSweep.style.position = 'absolute';
@@ -1337,6 +1353,10 @@ function setCustomMapYOffset(yOffset) {
 function getCustomMapYOffset() {
     return _customMapYOffset;
 }
+// GET: CURRENT MINIMAP POSITION
+function getMinimapPosition() {
+    return _minimapPosition;
+}
 /**
  * Sets an individual or entire floor data array of custom minimap
  * @param payload
@@ -1459,6 +1479,6 @@ function resetCustomMapSettingValues() {
 }
 export { 
 // _miniMapData as minimapData,
-isMinimapNavigation, setMap, showMinimap, hideMinimap, locateAvatar, resetSweepMarkerColors, renderOverlaySweep, showDirection, toggleMinimapVisibility, setSweepMarkerColor, setStandaloneMap, toggleMinimapFloor, getFloorsInSpace, createDropdown, setMinimapPosition, 
+isMinimapNavigation, mapPositions, setMap, showMinimap, hideMinimap, locateAvatar, resetSweepMarkerColors, renderOverlaySweep, showDirection, toggleMinimapVisibility, setSweepMarkerColor, setStandaloneMap, toggleMinimapFloor, getFloorsInSpace, createDropdown, setMinimapPosition, 
 // custom minimap
-setCustomMap, setupCustomMinimapPane, setCustomMinimapRotation, getCustomMinimapRotation, generateCustomMinimap, setCustomMapScale, setCustomMapTranslate, setCustomMapXOffset, setCustomMapYOffset, getCustomMapScale, getCustomMapTranslate, getCustomMapXOffset, getCustomMapYOffset, setMinAndMax, setCustomMapFloorData, getCustomMapFloorData, resetCustomMapSettingValues };
+setCustomMap, setupCustomMinimapPane, setCustomMinimapRotation, getCustomMinimapRotation, generateCustomMinimap, setCustomMapScale, setCustomMapTranslate, setCustomMapXOffset, setCustomMapYOffset, getCustomMapScale, getCustomMapTranslate, getCustomMapXOffset, getCustomMapYOffset, setMinAndMax, setCustomMapFloorData, getCustomMapFloorData, resetCustomMapSettingValues, getMinimapPosition, };

package/lib/types.d.ts

@@ -196,6 +196,7 @@ export interface I3DObject {
     thumbnail_type?: string;
     created_on?: string;
     object_file?: string;
+    object_uuid?: string;
     object_filename?: string;
     json_data?: any;
 }
@@ -712,6 +713,7 @@ export declare enum SPACE_EVENTS {
     PARTITION_RENDERED = "PARTITION_RENDERED",
     DRAW_HISTORY = "DRAW_HISTORY",
     BASEPOINT_UPDATED = "BASEPOINT_UPDATED",
+    MINIMAP_CHANGED = "MINIMAP_CHANGED",
     FLOOR_IMAGE_SELECTED = "FLOOR_IMAGE_SELECTED",
     FLOOR_IMAGE_UPLOADED = "FLOOR_IMAGE_UPLOADED",
     FLOOR_IMAGE_UPLOAD_FAILED = "FLOOR_IMAGE_UPLOAD_FAILED",
@@ -1193,6 +1195,74 @@ export interface SpaceMetadata {
         };
     };
 }
+export interface CustomMapFloorData {
+    floor_sequence: number;
+    name?: string;
+    floor_image: string;
+    scale: number;
+    translate: number;
+    rotate: number;
+    offset_x: number;
+    offset_y: number;
+}
+export interface SpaceMetadata {
+    coordSystemCalibration?: {
+        bim: {
+            coord_system: string;
+            scale_factor: string;
+            measurement_unit: string;
+            rotation_unit: string;
+            true_origin: {
+                x: number;
+                y: number;
+                z: number;
+            };
+            project_base: {
+                x: number;
+                y: number;
+                z: number;
+            };
+            mp_project_base: {
+                id: number;
+                player_id: string;
+                showcase_id: null | number;
+                media_viewer_id: number;
+                object_position: {
+                    x: number;
+                    y: number;
+                    z: number;
+                };
+                object_rotation: {
+                    x: number;
+                    y: number;
+                    z: number;
+                };
+                object_scale: {
+                    x: number;
+                    y: number;
+                    z: number;
+                };
+                offset_position: number;
+                offset_rotation: number;
+                position_unit: string;
+                object_data: {
+                    amazon_uri: string;
+                    object_type: string;
+                    uuid: string;
+                    id: null | number;
+                };
+                coordinate_system: string;
+                json_data: string;
+            };
+        };
+    };
+    general_settings?: {
+        minimap?: {
+            type?: string;
+            custom_floor_data?: CustomMapFloorData[] | null;
+        };
+    };
+}
 export declare enum COORDINATE_SYSTEM {
     MATTERPORT = "YUP",
     BIM = "ZUP"
@@ -1214,6 +1284,6 @@ export declare enum DEGREE {
     DEG_270 = 270
 }
 export declare enum MAP_OPTIONS {
-    DEFAULT_MAP = "DEFAULT MINIMAP",
-    CUSTOM_MAP = "CUSTOM MINIMAP"
+    DEFAULT_MAP = "Default Minimap",
+    CUSTOM_MAP = "Custom Minimap"
 }

package/lib/types.js

@@ -96,6 +96,7 @@ export var SPACE_EVENTS;
     SPACE_EVENTS["PARTITION_RENDERED"] = "PARTITION_RENDERED";
     SPACE_EVENTS["DRAW_HISTORY"] = "DRAW_HISTORY";
     SPACE_EVENTS["BASEPOINT_UPDATED"] = "BASEPOINT_UPDATED";
+    SPACE_EVENTS["MINIMAP_CHANGED"] = "MINIMAP_CHANGED";
     SPACE_EVENTS["FLOOR_IMAGE_SELECTED"] = "FLOOR_IMAGE_SELECTED";
     SPACE_EVENTS["FLOOR_IMAGE_UPLOADED"] = "FLOOR_IMAGE_UPLOADED";
     SPACE_EVENTS["FLOOR_IMAGE_UPLOAD_FAILED"] = "FLOOR_IMAGE_UPLOAD_FAILED";
@@ -146,6 +147,6 @@ export var DEGREE;
 })(DEGREE || (DEGREE = {}));
 export var MAP_OPTIONS;
 (function (MAP_OPTIONS) {
-    MAP_OPTIONS["DEFAULT_MAP"] = "DEFAULT MINIMAP";
-    MAP_OPTIONS["CUSTOM_MAP"] = "CUSTOM MINIMAP";
+    MAP_OPTIONS["DEFAULT_MAP"] = "Default Minimap";
+    MAP_OPTIONS["CUSTOM_MAP"] = "Custom Minimap";
 })(MAP_OPTIONS || (MAP_OPTIONS = {}));

package/package.json

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

package/static/map.css

@@ -152,15 +152,47 @@ display: inline-block;
 /*CUSTOM MINIMAP CSS*/
 .at_overlay_left_minimap{
     position: absolute;
-    left: 0px;
-    top: 100px;
     width: 379px;
     height: 379px;
     max-width: 856px;
     max-height: 379px;
-    z-index: 1;
+    z-index: 99;
     display: block;
     background: rgb(31, 32, 35);
+    line-height: 0;
+}
+
+.at_overlay_left_minimap.topLeft {
+    top: calc(var(--position-top) + 0.5rem);
+    left: 0;
+}
+
+.at_overlay_left_minimap.topRight {
+    top: calc(var(--position-top) + 0.5rem);
+    right: 0;
+}
+
+.at_overlay_left_minimap.bottomLeft {
+    bottom: 10px;
+    left: 0;
+    transition: bottom .4s ease-out; 
+}
+
+.at_overlay_left_minimap.bottomRight {
+    bottom: 10px;
+    right: 0;
+    transition: bottom .4s ease-out; 
+}
+
+/* Adjust position when settings are visible */
+.at_overlay_left_minimap.bottomRight.show-settings {
+    bottom: calc(var(--position-bottom) + 20.5rem);
+    transition: bottom .4s ease-in; 
+}
+
+.at_overlay_left_minimap.bottomLeft.show-settings {
+    bottom: calc(var(--position-bottom) + 20.5rem);
+    transition: bottom .4s ease-in; 
 }
 
 .at_custom_map_canvas {
@@ -188,7 +220,7 @@ display: inline-block;
     z-index: -1;
     top: 0;
     width: 100%;
-    transition: all .4s ease-in-out;
+    transition: all .4s ease-out;
     height: auto;
     background: rgb(51, 51, 51);
     border: 1px solid rgb(51, 51, 51);
@@ -200,11 +232,15 @@ display: inline-block;
 
 .at_custom_minimap_settings.show{
   top: 379px;
-  transition: all .4s ease-in-out; 
+  transition: all .4s ease-in; 
   visibility: visible;
   
 }
 
+.at_custom_minimap_settings.no-transition {
+  transition: none;
+}
+
 
 .at_overlay_left_minimap .at_close_minimap,
 .at_overlay_left_minimap .at_setting_icon {
@@ -232,6 +268,7 @@ display: inline-block;
     display: flex;
     justify-content: space-between;
     margin-bottom: 10px;
+    gap: 8px;
 }
   
 .at_custom_minimap_settings  .at_custom_setting_button {
@@ -359,4 +396,6 @@ display: inline-block;
 
 .at_custom_sweep:hover {
 	background-color: rgba(255, 255, 0, 0.79);
-}
+}
+
+

package/static/utility.css

@@ -288,6 +288,18 @@ width: 100vw;
     margin-left: 1rem !important;
   }
   
+  .at_mb_0 {
+    margin-bottom: 0 !important;
+  }
+
+  .at_mb_1 {
+    margin-bottom: 0.25rem !important;
+  }
+
+  .at_mb_2 {
+    margin-bottom: 0.5rem !important;
+  }
+  
   .at_gap_1 {
     gap: 0.25rem;
   }

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

@@ -1,68 +0,0 @@
-import { FORM_MODE, RoomNode, PolygonData } from "../../../../types";
-export declare function renderRoomFormPane(): HTMLDivElement;
-/**
- * Toggles the state of the partition drawing functionality.
- * If drawing is not active, it starts the drawing process.
- * Otherwise, it cancels the current drawing, updates partition data,
- * and displays the relevant UI elements for partitions.
- */
-export declare function toggleDrawPartitionButton(): void;
-/**
- * Displays the partition form based on the current form mode.
- * Handles different UI behaviors for edit and add modes.
- */
-export declare function displayPartitionFormMode(): void;
-/**
- * Clears the partition form by resetting UI elements and internal data.
- * - Navigates back to the partition list view.
- * - Cancels any ongoing drawing actions.
- * - Hides relevant UI elements like wall height, delete button, and partition container.
- * - Resets the form and clears data related to the current partition, room, and polygon.
- */
-export declare function clearPartitionForm(): void;
-/**
- * Retrieves the form data for creating or editing a room partition.
- * - Collects values from form inputs (name, floor level, memo).
- * - Constructs a payload object containing the room data, including the space UUID and polygon data.
- * - Updates the polygon data for each partition in the currentPartitionDataArray to reflect the new floor level.
- * - If there is existing room data (currentEditRoomData), it returns that data with updated values.
- *
- * @returns {RoomNode} The room data object with partition and floor details.
- */
-export declare function getPartitionFormData(): RoomNode;
-/**
- * Sets the saving mode for the partition form.
- * - If saving is enabled, `isSaving` is set to true, indicating that the form is in saving mode.
- * - If saving is disabled, `isSaving` is set to false.
- *
- * @param {boolean} savingEnabled - True to enable saving mode, false to disable.
- */
-export declare function setPartitionSavingMode(savingEnabled: boolean): void;
-/**
- * Gets the current saving mode for the partition form.
- *
- * @returns {boolean} - Returns true if saving mode is enabled, false otherwise.
- */
-export declare function getPartitionSavingMode(): boolean;
-/**
- * Sets the form mode for the partition form.
- * - The form mode can be one of the predefined FORM_MODE values (e.g., CREATE, EDIT, etc.).
- *
- * @param {FORM_MODE} formType - The type of form mode to set.
- */
-export declare function setPartitionFormMode(formType: FORM_MODE): void;
-/**
- * Gets the current form mode for the partition form.
- *
- * @returns {FORM_MODE} - The current form mode.
- */
-export declare function getPartitionFormMode(): FORM_MODE;
-/**
- * Sets the polygon data for the current partition, including rounding numeric values
- * to two decimal places and assigning UUIDs to the floor and walls.
- *
- * @param {PolygonData} payload - The polygon data to set, including floor and walls.
- */
-export declare function setPolygonData(payload: PolygonData): void;
-export declare function getNewlyAddedPartition(): Array<RoomNode>;
-export declare function getDeletedSavedPartitionArray(): Array<RoomNode>;