architwin 1.12.1 → 1.12.2

package/lib/minimap.js

@@ -30,6 +30,7 @@ let _mapImg = null;
 let _mapWidth;
 let isMinimapNavigation = false;
 let _minimapSweepCollection = {};
+let _customMapSweepCollection = {};
 let _minimapSweepMarkerElements = [];
 let _currentFloor;
 let _mapImgEl;
@@ -44,6 +45,7 @@ let minX = 0, minY = 0, maxX = 0, maxY = 0;
 let _customMapContainer;
 let _customMapFloorData = [];
 let _minimapPosition = "bottomRight";
+let _mpSdk;
 let notyf = new Notyf({ position: { x: 'left', y: 'bottom' }, duration: 4500, types: [
         {
             type: 'info',
@@ -139,9 +141,9 @@ function setMap(mpSdk, appKey, mapId, openOnLoad) {
         _mapBox = _mapContainer.parentNode;
         window.addEventListener('resize', handleMapResize);
         // Setup minimap position dropdown   
-        const dropDownElement = yield createDropdown(mapPositions);
+        const dropDownElement = yield createDropdown();
         _mapBox.insertBefore(dropDownElement, _mapBox.firstChild);
-        mapPositionHandler(mapPositions);
+        mapPositionHandler();
         // Apply custom values from mapConfig
         if (_mpConfig.mapConfig) {
             if (_mpConfig.mapConfig.position && mapPositions.includes(_mpConfig.mapConfig.position)) {
@@ -281,7 +283,7 @@ function setMap(mpSdk, appKey, mapId, openOnLoad) {
                 }
             },
             onCollectionUpdated: function (collection) {
-                log.info('JOCHE default the entire up-to-date collection', collection);
+                log.info('default the entire up-to-date collection', collection);
                 _minimapSweepCollection = collection;
                 if (_currentFloor) {
                     toggleSweepMarkerFloors(_currentFloor);
@@ -908,7 +910,7 @@ function setStandaloneMap(modelId, appKey, mapId) {
  * @param mapPositions An array of strings representing the minimap positions (e.g., 'topLeft','bottomRight').
 * @returns HTLMElement with the specified position options.
  */
-function createDropdown(mapPositions) {
+function createDropdown() {
     return __awaiter(this, void 0, void 0, function* () {
         log.info('createDropdown');
         const element = document.createElement('div');
@@ -938,52 +940,62 @@ function createDropdown(mapPositions) {
         return element;
     });
 }
-function mapPositionHandler(mapPositions) {
+function mapPositionHandler() {
+    log.info("mapPositionHandler()");
     const dropdown = document.getElementById('at-map-position-dropdown');
-    const mapTopRight = document.getElementById('at_map_top_right');
-    const mapTopLeft = document.getElementById('at_map_top_left');
-    const mapBottomRight = document.getElementById('at_map_bottom_right');
-    const mapBottomLeft = document.getElementById('at_map_bottom_left');
     const options = document.getElementById('at-map-position-options');
+    if (!dropdown || !options)
+        return;
     dropdown.addEventListener('click', () => {
         console.log("__@ Dropdown Clicked!");
         options.classList.toggle('open');
     });
-    mapTopRight.addEventListener('click', () => {
-        console.log("__@ Map Position: Top Right!");
-        mapPositions.forEach(position => _mapBox.classList.remove(position));
-        _minimapPosition = 'topRight';
-        setMinimapPosition(_mapBox, 'topRight');
-        if (options.classList.contains('open')) {
-            options.classList.remove('open');
-        }
-    });
-    mapTopLeft.addEventListener('click', () => {
-        console.log("__@ Map Position: Top Left!");
-        mapPositions.forEach(position => _mapBox.classList.remove(position));
-        _minimapPosition = 'topLeft';
-        setMinimapPosition(_mapBox, 'topLeft');
-        if (options.classList.contains('open')) {
+    const positionMap = {
+        'at_map_top_right': 'topRight',
+        'at_map_top_left': 'topLeft',
+        'at_map_bottom_right': 'bottomRight',
+        'at_map_bottom_left': 'bottomLeft'
+    };
+    Object.entries(positionMap).forEach(([elementId, position]) => {
+        const element = document.getElementById(elementId);
+        if (!element)
+            return;
+        element.addEventListener('click', () => {
+            console.log(`__@ Map Position: ${position}!`);
+            mapPositions.forEach(pos => _mapBox.classList.remove(pos));
+            _minimapPosition = position;
+            setMinimapPosition(_mapBox, position);
             options.classList.remove('open');
-        }
+        });
     });
-    mapBottomLeft.addEventListener('click', () => {
-        console.log("__@ Map Position: Bottom Left!");
-        mapPositions.forEach(position => _mapBox.classList.remove(position));
-        _minimapPosition = 'bottomLeft';
-        setMinimapPosition(_mapBox, 'bottomLeft');
-        if (options.classList.contains('open')) {
-            options.classList.remove('open');
-        }
+}
+function customMapPositionHandler(mapContainer) {
+    log.info("customMapPositionHandler()");
+    const dropdown = document.getElementById('at-cmap-position-dropdown');
+    const options = document.getElementById('at-cmap-position-options');
+    if (!dropdown || !options)
+        return;
+    dropdown.addEventListener('click', () => {
+        console.log("__@ [CMap] Position Dropdown Clicked!");
+        options.classList.toggle('open');
     });
-    mapBottomRight.addEventListener('click', () => {
-        console.log("__@ Map Position: Bottom Right!");
-        mapPositions.forEach(position => _mapBox.classList.remove(position));
-        _minimapPosition = 'bottomRight';
-        setMinimapPosition(_mapBox, 'bottomRight');
-        if (options.classList.contains('open')) {
+    const positionMap = {
+        'at-cmap-top-right': 'topRight',
+        'at-cmap-top-left': 'topLeft',
+        'at-cmap-bottom-right': 'bottomRight',
+        'at-cmap-bottom-left': 'bottomLeft',
+    };
+    Object.entries(positionMap).forEach(([elementId, position]) => {
+        const element = document.getElementById(elementId);
+        if (!element)
+            return;
+        element.addEventListener('click', () => {
+            console.log(`__@ [CMap] Map Position: ${position}!`);
+            mapPositions.forEach(pos => mapContainer.classList.remove(pos));
+            _minimapPosition = position;
+            setMinimapPosition(mapContainer, position);
             options.classList.remove('open');
-        }
+        });
     });
 }
 /**
@@ -1044,10 +1056,14 @@ function handleMapResize() {
  * @returns {HTMLDivElement} The custom minimap element.
  */
 function setupCustomMinimapPane() {
-    log.info('setupCustomMinimap');
-    log.info("_minimapPosition: ", _minimapPosition);
-    return `
+    return __awaiter(this, void 0, void 0, function* () {
+        log.info('setupCustomMinimap');
+        log.info("_minimapPosition: ", _minimapPosition);
+        return `
         <div id="at-custom-minimap-pane" class="at_overlay_left_minimap ${_minimapPosition}" style="display:none">
+            <div>
+                ${setMapPositionDropdown()}
+            </div>
             <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>
@@ -1065,6 +1081,31 @@ function setupCustomMinimapPane() {
         </div>
         
     `;
+    });
+}
+function setMapPositionDropdown() {
+    return `
+        <div id="at-cmap-position-dropdown" class="at_map_positions">
+            <span class="mdi mdi-overscan" style="color: white; cursor: pointer;"></span>
+        </div>
+
+        <div style="position:absolute;">
+            <div class="at_dropdown_options" style="z-index: 999 !important; width: 150px !important;" id="at-cmap-position-options" data-cy="at-cmap-position-options">
+                <div id="at-cmap-bottom-right" class="at_dropdown at_flex at_items_center at_option at_custom_dropdown_option">
+                    <span class="mdi mdi-pan-bottom-right">${i18n.t('BottomRight')}</span>
+                </div>
+                <div id="at-cmap-top-left" class="at_dropdown at_flex at_items_center at_option at_custom_dropdown_option">
+                    <span class="mdi mdi-pan-top-left">${i18n.t('UpperLeft')}</span>
+                </div>
+                <div id="at-cmap-bottom-left" class="at_dropdown at_flex at_items_center at_option at_custom_dropdown_option">
+                    <span class="mdi mdi-pan-bottom-left">${i18n.t('BottomLeft')}</span>
+                </div>
+                <div id="at-cmap-top-right" class="at_dropdown at_flex at_items_center at_option at_custom_dropdown_option">
+                    <span class="mdi mdi-pan-top-right">${i18n.t('UpperRight')}</span>
+                </div>
+            </div>
+        </div>
+    `;
 }
 /**
  * Sets up and returns the HTML for the custom minimap settings panel.
@@ -1131,13 +1172,21 @@ function setupCustomMinimapSettingUI() {
  * @param mpSdk - The Matterport SDK instance
  */
 function setCustomMap(mpSdk) {
-    const minimapElement = setupCustomMinimapPane();
-    const showcase = document.getElementById('showcase-container');
-    const mapContainer = document.createElement('div');
-    mapContainer.innerHTML = minimapElement;
-    showcase.append(mapContainer);
-    console.log("Successfully rendered.");
-    subscribeToFloorChanges(mpSdk);
+    return __awaiter(this, void 0, void 0, function* () {
+        const minimapElement = yield setupCustomMinimapPane();
+        const showcase = document.getElementById('showcase-container');
+        const mapContainer = document.createElement('div');
+        mapContainer.innerHTML = minimapElement;
+        // Inject to DOM
+        showcase.append(mapContainer);
+        const customMapPane = document.getElementById('at-custom-minimap-pane');
+        setTimeout(() => {
+            customMapPositionHandler(customMapPane);
+        }, 0);
+        // Subscriber floor changes
+        subscribeToFloorChanges(mpSdk);
+        console.log("Successfully rendered.");
+    });
 }
 /**
  * Sets the current rotation value of the custom minimap.
@@ -1190,10 +1239,51 @@ function generateCustomMinimap(mpSdk) {
             // Get current floor data
             const currentFloor = getCurrentFloor();
             minX = maxX = minY = maxY = 0;
+            //If there are sweep marker configurations set, apply them
+            if (_mpConfig.mapConfig && _mpConfig.mapConfig.sweepMarker) {
+                log.info("Apply map sweep marker config");
+                // if (_mpConfig.mapConfig.sweepMarker.showOnHover == false) {
+                //     log.info("You are enabling to show sweep markers by default. You should probably increase the fixedSize to avoid the sweep markers overcrowding the map")
+                //     document.documentElement.style.setProperty("--map-sweep-display",`inline-block`)
+                // }
+                // if (_mpConfig.mapConfig.sweepMarker.backgroundColor) {
+                //     if (isValidCSSColor(_mpConfig.mapConfig.sweepMarker.backgroundColor)) {
+                //         document.documentElement.style.setProperty("--map-sweep-color",`${_mpConfig.mapConfig.sweepMarker.backgroundColor}`)
+                //     }else{
+                //         log.error("Invalid custom color value for sweep marker backgroundColor")
+                //     }
+                // }
+                // if (_mpConfig.mapConfig.sweepMarker.activeColor) {
+                //     if (isValidCSSColor(_mpConfig.mapConfig.sweepMarker.activeColor)) {
+                //         document.documentElement.style.setProperty("--map-sweep-active-color",`${_mpConfig.mapConfig.sweepMarker.activeColor}`)
+                //     }else{
+                //         log.error("Invalid custom color value for sweep marker activeColor")
+                //     }
+                // }
+                // if (_mpConfig.mapConfig.sweepMarker.hoverColor) {
+                //     if (isValidCSSColor(_mpConfig.mapConfig.sweepMarker.hoverColor)) {
+                //         document.documentElement.style.setProperty("--map-sweep-hover-color",`${_mpConfig.mapConfig.sweepMarker.hoverColor}`)
+                //     }else{
+                //         log.error("Invalid custom color value for sweep marker hoverColor")
+                //     }
+                // }
+                if (_mpConfig.mapConfig.sweepMarker.opacity) {
+                    if (Number.isInteger(_mpConfig.mapConfig.sweepMarker.opacity)) {
+                        document.documentElement.style.setProperty("--map-sweep-opacity", `${_mpConfig.mapConfig.sweepMarker.opacity}`);
+                    }
+                }
+            }
             // Render Sweeps
             mpSdk.Sweep.data.subscribe({
+                onAdded: function (index, item) {
+                    log.info("onAdded Sweep");
+                },
                 onCollectionUpdated: function (collection) {
-                    log.info('the entire up-to-date collection', collection);
+                    log.info('custom map: the entire up-to-date collection', collection);
+                    _minimapSweepCollection = collection;
+                    if (_currentFloor) {
+                        toggleSweepMarkerFloors(_currentFloor);
+                    }
                     // Convert object to array
                     const sweeps = Object.values(collection);
                     const alignedSweeps = sweeps.filter(item => item.alignmentType === 'aligned' &&
@@ -1211,7 +1301,7 @@ function generateCustomMinimap(mpSdk) {
                             floorIndex: item.floorInfo.sequence
                         };
                     });
-                    // Display sweeps to custom map
+                    // // Display sweeps to custom map
                     sweepPoints.map(item => displaySweepToCustomMap(item, mpSdk));
                 }
             });
@@ -1227,10 +1317,11 @@ function generateCustomMinimap(mpSdk) {
  * @param mpSdk - The Matterport SDK instance
  */
 function displaySweepToCustomMap(sweepItem, mpSdk) {
-    log.info("displaySweepToMap");
+    log.info("displaySweepToMap: sweepItem ==> ", sweepItem.id);
     const posX = sweepItem.x;
     const posY = sweepItem.y;
     let thisSweep = document.createElement('button');
+    log.info("getCurrentSweep().id ==> ", getCurrentSweep().id);
     const cList = getCurrentSweep().id === sweepItem.id ? 'at_custom_sweep active' : 'at_custom_sweep';
     const scaleX = _customMapScale;
     const scaleY = (_customMapScale * 21 / 9) / _customMapTranslate;
@@ -1260,6 +1351,7 @@ function displaySweepToCustomMap(sweepItem, mpSdk) {
  */
 function onSweepMoveCustomMap(event, mpSdk) {
     return __awaiter(this, void 0, void 0, function* () {
+        log.info("onSweepMoveCustomMap(): ", event.target.value);
         isMinimapNavigation = true;
         return mpSdk.Sweep.moveTo(event.target.value, {
             transition: mpSdk.Sweep.Transition.FADEOUT
@@ -1268,7 +1360,11 @@ function onSweepMoveCustomMap(event, mpSdk) {
             return __awaiter(this, void 0, void 0, function* () {
                 log.info(handleMessage);
                 isMinimapNavigation = false;
-                showDirection();
+                const mapConfig = getMapConfig();
+                if (mapConfig && mapConfig.enableCustomMap) {
+                    showDirection();
+                    updateActiveSweepButton(event.target.value);
+                }
                 if (superviz.isMeetingInitialized) {
                     yield locateAvatar();
                 }
@@ -1282,6 +1378,21 @@ function onSweepMoveCustomMap(event, mpSdk) {
         });
     });
 }
+/**
+ * Updates the UI to highlight the active sweep button by its ID.
+ * @param sweepId - The ID of the sweep to activate.
+ */
+function updateActiveSweepButton(sweepId) {
+    log.info("updateActiveSweepButton(): ", sweepId);
+    const buttons = _customMapContainer.querySelectorAll('button.at_custom_sweep');
+    buttons.forEach(btn => {
+        const button = btn;
+        button.classList.remove('active');
+        if (button.value === sweepId) {
+            button.classList.add('active');
+        }
+    });
+}
 /**
  * Resets the custom map container by clearing its contents and re-adding the custom map image.
  */
@@ -1353,7 +1464,10 @@ function setCustomMapYOffset(yOffset) {
 function getCustomMapYOffset() {
     return _customMapYOffset;
 }
-// GET: CURRENT MINIMAP POSITION
+// SET & GET: CURRENT MINIMAP POSITION.
+function setCurrentMinimapPosition(position) {
+    _minimapPosition = position;
+}
 function getMinimapPosition() {
     return _minimapPosition;
 }
@@ -1477,8 +1591,14 @@ function resetCustomMapSettingValues() {
     if (customMapImage)
         customMapImage.src = 'https://i.ibb.co/043hGg9/377.png';
 }
+function setMpSDK(mpSdk) {
+    _mpSdk = mpSdk;
+}
+function getMpSdk() {
+    return _mpSdk;
+}
 export { 
 // _miniMapData as minimapData,
-isMinimapNavigation, mapPositions, 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, setCurrentMinimapPosition, 
 // custom minimap
-setCustomMap, setupCustomMinimapPane, setCustomMinimapRotation, getCustomMinimapRotation, generateCustomMinimap, setCustomMapScale, setCustomMapTranslate, setCustomMapXOffset, setCustomMapYOffset, getCustomMapScale, getCustomMapTranslate, getCustomMapXOffset, getCustomMapYOffset, setMinAndMax, setCustomMapFloorData, getCustomMapFloorData, resetCustomMapSettingValues, getMinimapPosition, };
+setCustomMap, setupCustomMinimapPane, setCustomMinimapRotation, getCustomMinimapRotation, generateCustomMinimap, setCustomMapScale, setCustomMapTranslate, setCustomMapXOffset, setCustomMapYOffset, getCustomMapScale, getCustomMapTranslate, getCustomMapXOffset, getCustomMapYOffset, setMinAndMax, setCustomMapFloorData, getCustomMapFloorData, resetCustomMapSettingValues, getMinimapPosition, subscribeToFloorChanges, setMpSDK, getMpSdk };

package/package.json

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

package/static/map.css

@@ -163,12 +163,14 @@ display: inline-block;
 }
 
 .at_overlay_left_minimap.topLeft {
-    top: calc(var(--position-top) + 0.5rem);
+    bottom: calc(var(--position-top) + 27rem);
+    /* top: calc(var(--position-top) + 0.5rem); */
     left: 0;
 }
 
 .at_overlay_left_minimap.topRight {
-    top: calc(var(--position-top) + 0.5rem);
+    /* top: calc(var(--position-top) + 0.5rem); */
+    bottom: calc(var(--position-top) + 27rem);
     right: 0;
 }
 
@@ -243,6 +245,7 @@ display: inline-block;
 
 
 .at_overlay_left_minimap .at_close_minimap,
+.at_overlay_left_minimap .at_map_positions,
 .at_overlay_left_minimap .at_setting_icon {
   width: 2em;
   height: 2em;
@@ -264,6 +267,15 @@ display: inline-block;
     top: 0;
 }
 
+.at_overlay_left_minimap .at_map_positions {
+  top: 0;
+  left: 0;
+  right: unset;
+  bottom: unset;
+
+}
+
+
 .at_custom_minimap_settings .at_custom_button_row {
     display: flex;
     justify-content: space-between;
@@ -381,6 +393,7 @@ display: inline-block;
 	margin: 0;
 	height: 0.5rem;
 	width: 0.5rem;
+    opacity: var(--map-sweep-opacity);
 	border: 0.20rem solid rgba(255, 255, 0, 0.79);
 	border-radius: 50%;
 	box-sizing: content-box;
@@ -391,6 +404,7 @@ display: inline-block;
 
 .at_custom_sweep.active {
 	background-color: orangered;
+    opacity: var(--map-sweep-opacity);
 	border: 0.23rem solid rgba(255, 255, 0, 0.79);
 }