architwin 1.10.21 → 1.10.23

package/lib/minimap.js

@@ -8,8 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import * as superviz from './superviz';
-import { _mpConfig, getCurrentCameraPose, getCurrentSweep, getMapConfig, dispatchSpaceEvent, isCdnMapDataAvailable } from "./architwin";
-import { SPACE_EVENTS } from "./types";
+import { _mpConfig, getCurrentCameraPose, getCurrentSweep, getMapConfig, dispatchSpaceEvent, isCdnMapDataAvailable, getCurrentFloor } from "./architwin";
+import { SPACE_EVENTS, DEGREE, MAP_OPTIONS } from "./types";
 import { isValidCSSColor } from "./color";
 import { _participants } from "./participant";
 import { getAtwinSdk } from "./architwin";
@@ -17,6 +17,8 @@ import log from 'loglevel';
 import { Notyf } from 'notyf';
 import i18n from './atwinui/components/toolbar/i18n';
 import 'notyf/notyf.min.css';
+import { getAssetUrl } from "./utils";
+import { isCustomMapControlsVisible } from "./atwinui/events";
 let _miniMapData;
 let _mapContainer;
 let _mapBox;
@@ -32,6 +34,14 @@ let _currentFloor;
 let _mapImgEl;
 let _floorsInSpace;
 const _minimapId = 'minimapCanvas';
+let _minimapRotation = DEGREE.DEG_0;
+let _customMapScale = 30;
+let _customMapTranslate = 1;
+let _customMapXOffset = 0;
+let _customMapYOffset = 0;
+let minX = 0, minY = 0, maxX = 0, maxY = 0;
+let _customMapContainer;
+let _customMapFloorData = [];
 let notyf = new Notyf({ position: { x: 'left', y: 'bottom' }, duration: 4500, types: [
         {
             type: 'info',
@@ -269,7 +279,7 @@ function setMap(mpSdk, appKey, mapId, openOnLoad) {
                 }
             },
             onCollectionUpdated: function (collection) {
-                log.info('the entire up-to-date collection', collection);
+                log.info('JOCHE default the entire up-to-date collection', collection);
                 _minimapSweepCollection = collection;
                 if (_currentFloor) {
                     toggleSweepMarkerFloors(_currentFloor);
@@ -479,36 +489,63 @@ function setImg(minimap, floorSequence, isStandAlone = false) {
         _mapContainer.appendChild(isCurrentFloorOnlyEnabled ? _mapImgEl : map);
     });
 }
-function showDirection() {
-    //log.info('showDirection')
+function showDirection(mapType = MAP_OPTIONS.CUSTOM_MAP) {
+    // log.info('showDirection')
     let btnX = 0;
     let btnY = 0;
     const thisSweep = getCurrentSweep();
     const thisCameraPose = getCurrentCameraPose();
-    if (!thisSweep && !thisCameraPose)
-        return;
-    //log.info('thisCameraPose', thisCameraPose)
-    if (!thisCameraPose.rotation || !thisCameraPose.rotation.y)
-        return;
-    const angle = thisCameraPose.rotation.y;
-    const sweepBtn = document.getElementById('p' + thisSweep.id);
-    const canvas = document.getElementById(_minimapId);
-    if (!sweepBtn || !canvas)
-        return;
-    const ctx = canvas.getContext("2d");
-    if (ctx && sweepBtn && angle) {
-        ctx.globalAlpha = 0.7;
-        btnX = (sweepBtn.getBoundingClientRect().x - canvas.getBoundingClientRect().x) + (sweepBtn.offsetWidth / 2);
-        btnY = (sweepBtn.getBoundingClientRect().y - canvas.getBoundingClientRect().y) + (sweepBtn.offsetHeight / 2);
-        const startA = (Math.sign(angle) == -1 || Math.sign(angle) == 1) ? 230 - angle : angle;
-        const sA = ((startA + 20.5) * (Math.PI * 2)) / 360;
-        const eA = sA + (Math.PI / 4);
-        ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
-        ctx.beginPath();
-        ctx.moveTo(btnX, btnY);
-        ctx.arc(btnX, btnY, 40, sA, eA);
-        ctx.fillStyle = '#00a2e8';
-        ctx.fill();
+    // 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;
+        if (!thisCameraPose.rotation || !thisCameraPose.rotation.y)
+            return;
+        const angle = thisCameraPose.rotation.y;
+        const sweepBtn = document.getElementById('p' + thisSweep.id);
+        const canvas = document.getElementById(_minimapId);
+        if (!sweepBtn || !canvas)
+            return;
+        const ctx = canvas.getContext("2d");
+        if (ctx && sweepBtn && angle) {
+            ctx.globalAlpha = 0.7;
+            btnX = (sweepBtn.getBoundingClientRect().x - canvas.getBoundingClientRect().x) + (sweepBtn.offsetWidth / 2);
+            btnY = (sweepBtn.getBoundingClientRect().y - canvas.getBoundingClientRect().y) + (sweepBtn.offsetHeight / 2);
+            const startA = (Math.sign(angle) == -1 || Math.sign(angle) == 1) ? 230 - angle : angle;
+            const sA = ((startA + 20.5) * (Math.PI * 2)) / 360;
+            const eA = sA + (Math.PI / 4);
+            ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
+            ctx.beginPath();
+            ctx.moveTo(btnX, btnY);
+            ctx.arc(btnX, btnY, 40, sA, eA);
+            ctx.fillStyle = '#00a2e8';
+            ctx.fill();
+        }
+    }
+    else {
+        if (!thisSweep && !thisCameraPose)
+            return;
+        const angle = thisCameraPose.rotation.y;
+        const sweepBtn = document.getElementById('p' + thisSweep.id);
+        const canvas = document.getElementById("at-custom-map-canvas");
+        if (!sweepBtn || !canvas)
+            return;
+        const ctx = canvas.getContext("2d");
+        if (ctx && sweepBtn) {
+            ctx.globalAlpha = 0.7;
+            btnX = (sweepBtn.getBoundingClientRect().x - canvas.getBoundingClientRect().x) + (sweepBtn.offsetWidth / 2);
+            btnY = (sweepBtn.getBoundingClientRect().y - canvas.getBoundingClientRect().y) + (sweepBtn.offsetHeight / 2);
+            const startA = (Math.sign(angle) == -1 || Math.sign(angle) == 1) ? 230 - angle : angle;
+            const sA = ((startA + 20.5) * (Math.PI * 2)) / 360;
+            const eA = sA + (Math.PI / 4);
+            ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
+            ctx.beginPath();
+            ctx.moveTo(btnX, btnY);
+            ctx.arc(btnX, btnY, 40, sA, eA);
+            ctx.fillStyle = '#00a2e8';
+            ctx.fill();
+        }
     }
 }
 /**
@@ -866,29 +903,6 @@ function setStandaloneMap(modelId, appKey, mapId) {
         toggleSweepMarkerFloors(0);
     });
 }
-// async function createDropdown(options: string[]) {
-//     const element = document.createElement('div')
-//     element.classList.add('at_flex', 'at_justify_end')
-//     log.info('createDropdown')
-//     const dropdown = document.createElement('select');
-//     dropdown.classList.add('at_dropdown')
-//     dropdown.setAttribute('id', 'at-map-dropdown')
-//     options.forEach(optionText => {
-//         const option = document.createElement('option');
-//         option.value = optionText;
-//         option.textContent = optionText.replace(/([A-Z])/g, ' $1').trim().toUpperCase()
-//         dropdown.appendChild(option);
-//     });
-//     dropdown.value = _mpConfig.mapConfig.position ?? 'bottomRight'
-//     dropdown.addEventListener('change', () => {
-//         const selectedValue = dropdown.value;
-//         log.info('addEvent: ', selectedValue)
-//         mapPositions.forEach(position => _mapBox.classList.remove(position));
-//         setMinimapPosition(selectedValue)
-//     });
-//     element.appendChild(dropdown)
-//     return element;
-// }
 /**
  * This function creates the dropdown (HTLMElement) for available positions that Minimap can be set
  * @param mapPositions An array of strings representing the minimap positions (e.g., 'topLeft','bottomRight').
@@ -899,13 +913,6 @@ function createDropdown(mapPositions) {
         log.info('createDropdown');
         const element = document.createElement('div');
         element.setAttribute('id', 'at-map-dropdown');
-        // const formattedPositions = mapPositions.map(position => {
-        //     return position
-        //         .replace('top', 'Upper ')
-        //         .replace('bottom', 'Bottom ')
-        //         .replace('Left', 'left')
-        //         .replace('Right', 'right');
-        // });
         element.innerHTML = `
         <div style="height: 20px; padding-left: 3px" class="at_flex at_items_center">    
             <span class="mdi mdi-overscan" style="color: white; cursor: pointer;" id="at-map-position-dropdown" data-cy="at-map-position-dropdown"></span>
@@ -1028,6 +1035,430 @@ function handleMapResize() {
         marker.style.borderWidth = `${parseFloat(markerSize) * 0.125}rem`;
     });
 }
+/**
+ * Creates and returns a custom minimap DOM element containing a canvas.
+ * @returns {HTMLDivElement} The custom minimap element.
+ */
+function setupCustomMinimapPane() {
+    log.info('setupCustomMinimap');
+    return `
+        <div id="at-custom-minimap-pane" class="at_overlay_left_minimap">
+            <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>
+            <div id="at-custom-map-settings-btn" class="at_setting_icon">
+                <span class="mdi mdi-cog"  id="at-map-setting-btn" data-cy="at-map-setting-btn"></span>
+            </div>
+            
+            <div id="at-spinner" class="at_spinner"></div>
+            <canvas id="at-custom-map-canvas" class="at_custom_map_canvas" width="379" height="379"></canvas>
+            <div id="at-custom-map" class="at_custom_map">
+                <img id="at-custom-map-img" src="${getAssetUrl('images/377.png')}" alt="Minimap">
+            </div>
+
+            ${setupCustomMinimapSettingUI()}
+        </div>
+        
+    `;
+}
+/**
+ * Sets up and returns the HTML for the custom minimap settings panel.
+ * @returns {HTMLElement} The minimap controls element.
+ */
+function setupCustomMinimapSettingUI() {
+    return `
+        <div id="at-custom-minimap-settings" class="at_custom_minimap_settings ${isCustomMapControlsVisible ? 'show' : ''}">
+            <!-- Buttons Row -->
+            <div class="at_custom_button_row">
+                <div id="at-custom-screenshot-btn" class="at_custom_button_settings">
+                    <span class="mdi mdi-camera-outline"></span>
+                    <span>${i18n.t('Screenshot')}</span>
+                </div>
+                <div id="at-custom-rotate-btn" class="at_custom_button_settings">
+                    <span class="mdi mdi-rotate-right"></span>
+                    <span>${i18n.t('RotateMinimap')}</span>
+                </div>
+            </div>
+
+            <!-- Sliders -->
+            <div class="at_custom_slider_group">
+                <div class="at_custom_slider_row">
+                    <div class="at_svg_icon_container">
+                        <img src="${getAssetUrl('icons/mapscalewidthicon.svg')}" alt="map_scale_width">
+                    </div>
+                    <input id="at-slider-scale" type="range" id="slider-scale" min="0" max="100" step="1" />
+                </div>
+                <div class="at_custom_slider_row">
+                    <div class="at_svg_icon_container">
+                        <img src="${getAssetUrl('icons/mapscaleheighticon.svg')}" alt="map_scale_height">
+                    </div>
+                    <input id="at-slider-translate" type="range" id="slider-translate" min="0.1" max="20" step="0.1" />
+                </div>
+                <div class="at_custom_slider_row">
+                    <div class="at_svg_icon_container">
+                        <img  src="${getAssetUrl('icons/mapleftrighticon.svg')}" alt="map_left_right">
+                    </div>
+                    <input id="at-slider-xOffset" type="range" id="slider-xoffset" min="-50" max="100" step="1" />
+                </div>
+                <div class="at_custom_slider_row">
+                    <div class="at_svg_icon_container">
+                        <img src="${getAssetUrl('icons/mapupdownicon.svg')}" alt="map_up_down">
+                    </div>
+                    <input id="at-slider-yOffset" type="range" id="slider-yoffset" min="-15" max="100" step="1" />
+                </div>
+            </div>
+        </div>    
+    `;
+}
+/**
+ *  Initializes and renders the custom minimap UI.
+ * @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.prepend(mapContainer);
+    console.log("Successfully rendered.");
+    subscribeToFloorChanges(mpSdk);
+}
+/**
+ * Sets the current rotation value of the custom minimap.
+ * @param {DEGREE} rotation
+ */
+function setCustomMinimapRotation(rotation) {
+    _minimapRotation = rotation;
+}
+/**
+ * Gets the current rotation value of the custom minimap.
+ * @returns {_minimapRotation} Minimap rotation in degrees.
+ */
+function getCustomMinimapRotation() {
+    return _minimapRotation;
+}
+/**
+ * Subscribes to floor change events in the Matterport model.
+ * @param mpSdk
+ */
+function subscribeToFloorChanges(mpSdk) {
+    return __awaiter(this, void 0, void 0, function* () {
+        mpSdk.Floor.current.subscribe(function (currentFloor) {
+            return __awaiter(this, void 0, void 0, function* () {
+                if (currentFloor.sequence !== undefined && currentFloor.sequence !== -1) {
+                    log.info("handleModelFloorChange: ", currentFloor.sequence);
+                    const mapConfig = getMapConfig();
+                    if (mapConfig === null || mapConfig === void 0 ? void 0 : mapConfig.enableCustomMap) {
+                        populateCurrentCustomFloor(currentFloor.sequence);
+                        yield generateCustomMinimap(mpSdk);
+                    }
+                }
+            });
+        });
+    });
+}
+/**
+ * Generates a custom minimap and transformation parameters.
+ * @param mpSdk  - The Matterport SDK instance used to access and manipulate the space data.
+ * @param scaling - Scale factor to resize the minimap (default is 10)
+ * @param translate - Translation factor applied to the minimap (default is 1)
+ * @param xOffset - Horizontal offset applied to shift the minimap along the X-axis (default is 0).
+ * @param yOffset - Vertical offset applied to shift the minimap along the Y-axis (default is 0).
+ */
+function generateCustomMinimap(mpSdk) {
+    return __awaiter(this, void 0, void 0, function* () {
+        log.info("generateCustomMinimap()");
+        try {
+            // Clean up custom map container
+            resetCustomMapContainer();
+            // Get current floor data
+            const currentFloor = getCurrentFloor();
+            minX = maxX = minY = maxY = 0;
+            // Render Sweeps
+            mpSdk.Sweep.data.subscribe({
+                onCollectionUpdated: function (collection) {
+                    log.info('the entire up-to-date collection', collection);
+                    // Convert object to array
+                    const sweeps = Object.values(collection);
+                    const alignedSweeps = sweeps.filter(item => item.alignmentType === 'aligned' &&
+                        item.position &&
+                        item.floorInfo.sequence === currentFloor.sequence);
+                    const sweepPoints = alignedSweeps.map(item => {
+                        const x = item.position.x;
+                        const y = item.position.z; // Z is treated as Y (2D)
+                        // Update min/max
+                        setMinAndMax(x, y);
+                        return {
+                            id: item.id,
+                            x: x,
+                            y: y,
+                            floorIndex: item.floorInfo.sequence
+                        };
+                    });
+                    // Display sweeps to custom map
+                    sweepPoints.map(item => displaySweepToCustomMap(item, mpSdk));
+                }
+            });
+        }
+        catch (error) {
+            log.error("Error generate custom minimap.");
+        }
+    });
+}
+/**
+ * Renders a sweep button on the custom minimap based on the given sweep item.
+ * @param sweepItem
+ * @param mpSdk - The Matterport SDK instance
+ */
+function displaySweepToCustomMap(sweepItem, mpSdk) {
+    log.info("displaySweepToMap");
+    const posX = sweepItem.x;
+    const posY = sweepItem.y;
+    let thisSweep = document.createElement('button');
+    const cList = getCurrentSweep().id === sweepItem.id ? 'at_custom_sweep active' : 'at_custom_sweep';
+    const scaleX = _customMapScale;
+    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('value', sweepItem.id);
+    thisSweep.setAttribute('data-cy', 'p' + sweepItem.id);
+    thisSweep.style.left = (scaledX + parseInt(_customMapXOffset.toString())) + '%';
+    thisSweep.style.top = (scaledY + parseInt(_customMapYOffset.toString())) + '%';
+    thisSweep.style.position = 'absolute';
+    thisSweep.style.zIndex = '2';
+    thisSweep.setAttribute('class', cList);
+    thisSweep.setAttribute('title', 'x:' + scaledX + _customMapXOffset +
+        ' y:' + scaledY + _customMapYOffset +
+        ' f:' + sweepItem.floorIndex);
+    thisSweep.setAttribute('floor-level', `${sweepItem.floorIndex}`);
+    thisSweep.addEventListener('click', (event) => onSweepMoveCustomMap(event, mpSdk));
+    _customMapContainer.appendChild(thisSweep);
+    showDirection();
+}
+/**
+ * Handles custom minimap sweep navigation when a sweep button is clicked.
+ * @param event - The DOM event triggered by clicking the sweep button
+ * @param mpSdk - The Matterport SDK instance
+ * @returns A promise that will return the destination sweep.
+ */
+function onSweepMoveCustomMap(event, mpSdk) {
+    return __awaiter(this, void 0, void 0, function* () {
+        isMinimapNavigation = true;
+        return mpSdk.Sweep.moveTo(event.target.value, {
+            transition: mpSdk.Sweep.Transition.FADEOUT
+        })
+            .then(function (handleMessage) {
+            return __awaiter(this, void 0, void 0, function* () {
+                log.info(handleMessage);
+                isMinimapNavigation = false;
+                showDirection();
+                if (superviz.isMeetingInitialized) {
+                    yield locateAvatar();
+                }
+                let clickedSweep;
+                clickedSweep = _minimapSweepCollection[event.target.value];
+                dispatchSpaceEvent(SPACE_EVENTS.MINIMAP_SWEEP_CLICK, clickedSweep);
+            });
+        })
+            .catch(function (handleError) {
+            log.info("Sweep move error", handleError);
+        });
+    });
+}
+/**
+ * Resets the custom map container by clearing its contents and re-adding the custom map image.
+ */
+function resetCustomMapContainer() {
+    log.info("resetCustomMapContainer()");
+    // Set custom map container
+    _customMapContainer = document.getElementById('at-custom-map');
+    const customMapImage = document.getElementById('at-custom-map-img');
+    if (customMapImage) {
+        _customMapContainer.innerHTML = '';
+        _customMapContainer.appendChild(customMapImage);
+    }
+}
+/**
+ * Scales a number within a range (min to max) to a normalized percentage-based value.
+ * @param num - The value to scale (e.g., position.x or position.z)
+ * @param min - The minimum value in the original coordinate range
+ * @param max - The maximum value in the original coordinate range
+ * @param scale - The scale factor to apply to the normalized result
+ * @param offset - An optional offset to shift the scaled value
+ * @returns  - A scaled and offset percentage-based value
+ */
+function scaleToContainer(num, min, max, scale, offset) {
+    if (max === min)
+        return 0; // avoid divide-by-zero
+    // calculate position as percentage with left and top offset    
+    return (((num - min) / (max - min)) * scale) + offset;
+}
+/**
+ * Updates the global minimum and maximum X and Y values
+ * based on the given coordinates. Used for determining
+ * bounding box extents of all sweep positions.
+ * @param x  - The X coordinate (typically item.position.x)
+ * @param y  - The Y coordinate (typically item.position.z mapped to Y)
+ */
+function setMinAndMax(x, y) {
+    // Compare a set of coordinates to update min and max
+    minX = Math.min(minX, x);
+    maxX = Math.max(maxX, x);
+    minY = Math.min(minY, y);
+    maxY = Math.max(maxY, y);
+}
+// SETTERS AND GETTERS (Scaling, Translate, xOffset, yOffset)
+// SET GET: Scale value
+function setCustomMapScale(scale) {
+    _customMapScale = scale;
+}
+function getCustomMapScale() {
+    return _customMapScale;
+}
+// SET GET: Translate value
+function setCustomMapTranslate(translate) {
+    _customMapTranslate = translate;
+}
+function getCustomMapTranslate() {
+    return _customMapTranslate;
+}
+// SET GET: X Offset value
+function setCustomMapXOffset(xOffset) {
+    _customMapXOffset = xOffset;
+}
+function getCustomMapXOffset() {
+    return _customMapXOffset;
+}
+// SET GET: Y Offset value
+function setCustomMapYOffset(yOffset) {
+    _customMapYOffset = yOffset;
+}
+function getCustomMapYOffset() {
+    return _customMapYOffset;
+}
+/**
+ * Sets an individual or entire floor data array of custom minimap
+ * @param payload
+ */
+function setCustomMapFloorData(payload) {
+    log.info("setCustomMapFloorData() ", payload);
+    if (!payload) {
+        log.error("Payload is undefined");
+        return;
+    }
+    if (Array.isArray(payload)) {
+        _customMapFloorData = payload;
+    }
+    else {
+        _customMapFloorData[payload.floor_sequence] = payload;
+    }
+}
+/**
+ * Gets the floor data of custom map. If index is provided will return floor data of that floor. If no parameter is passed will return the entire array
+ * @param index - index of floor data
+ * @returns
+ */
+function getCustomMapFloorData(index) {
+    log.info("getCustomMapFloorData() ", index);
+    if (index != undefined) {
+        return _customMapFloorData[index];
+    }
+    return _customMapFloorData;
+}
+function populateCurrentCustomFloor(floor_sequence) {
+    log.info("populateCurrentCustomFloor() ", floor_sequence);
+    if (floor_sequence == undefined) {
+        log.error("sequence is undefined");
+        return;
+    }
+    if (!_customMapFloorData[floor_sequence]) {
+        resetCustomMapSettingValues();
+        const scale = getCustomMapScale();
+        const translate = getCustomMapTranslate();
+        const rotate = getCustomMinimapRotation();
+        const offset_x = getCustomMapXOffset();
+        const offset_y = getCustomMapYOffset();
+        const floorData = {
+            floor_sequence,
+            scale,
+            translate,
+            rotate,
+            offset_x,
+            offset_y
+        };
+        _customMapFloorData[floor_sequence] = floorData;
+    }
+    log.info(" _customMapFloorData[floor_sequence] ", _customMapFloorData[floor_sequence]);
+    setCustomMapScale(_customMapFloorData[floor_sequence].scale);
+    setCustomMapTranslate(_customMapFloorData[floor_sequence].translate);
+    setCustomMinimapRotation(_customMapFloorData[floor_sequence].rotate);
+    setCustomMapXOffset(_customMapFloorData[floor_sequence].offset_x);
+    setCustomMapYOffset(_customMapFloorData[floor_sequence].offset_y);
+    showCurrentCustomFloorData(floor_sequence);
+}
+/**
+ * Shows the custom minimap floor data to the custom minimap UI
+ * @param floor_sequence
+ * @returns
+ */
+function showCurrentCustomFloorData(floor_sequence) {
+    log.info("showCurrentCustomFloorData() ", floor_sequence);
+    if (floor_sequence == undefined) {
+        log.error("floor_sequence is undefined");
+        return;
+    }
+    if (!_customMapFloorData[floor_sequence]) {
+        log.error("Map data for this floor does not exist");
+        return;
+    }
+    log.info("_customMapFloorData[floor_sequence]  ", _customMapFloorData[floor_sequence]);
+    // Scaling Slider
+    const scaleSlider = document.getElementById('at-slider-scale');
+    // Translate Slider
+    const translateSlider = document.getElementById('at-slider-translate');
+    // xOffset Slider
+    const xOffsetSlider = document.getElementById('at-slider-xOffset');
+    // yOffset Slider
+    const yOffsetSlider = document.getElementById('at-slider-yOffset');
+    // image image
+    const customMapImage = document.getElementById('at-custom-map-img');
+    // Set initial slider values
+    if (scaleSlider)
+        scaleSlider.value = getCustomMapScale().toString();
+    if (translateSlider)
+        translateSlider.value = getCustomMapTranslate().toString();
+    if (xOffsetSlider)
+        xOffsetSlider.value = getCustomMapXOffset().toString();
+    if (yOffsetSlider)
+        yOffsetSlider.value = getCustomMapYOffset().toString();
+    if (customMapImage) {
+        const newRotation = getCustomMinimapRotation();
+        log.info("__@ newRotation: ", newRotation);
+        setCustomMinimapRotation(newRotation);
+        // Remove the previous rotation class (if any)
+        customMapImage.classList.remove('at_rotate-90', 'at_rotate-180', 'at_rotate-270', 'at_rotate-360');
+        // Add the new rotation class based on newRotation value
+        customMapImage.classList.add(`at_rotate-${newRotation === 0 ? 360 : newRotation}`);
+        customMapImage.src = _customMapFloorData[floor_sequence].floor_image ? _customMapFloorData[floor_sequence].floor_image : 'https://i.ibb.co/043hGg9/377.png';
+    }
+}
+/**
+ * Resets the custom map setting to its defaults values
+ */
+function resetCustomMapSettingValues() {
+    log.info("resetCustomMapSettingValues()");
+    setCustomMapScale(30);
+    setCustomMapTranslate(1);
+    setCustomMinimapRotation(DEGREE.DEG_0);
+    setCustomMapXOffset(0);
+    setCustomMapYOffset(0);
+    const customMapImage = document.getElementById('at-custom-map-img');
+    if (customMapImage)
+        customMapImage.src = 'https://i.ibb.co/043hGg9/377.png';
+}
 export { 
 // _miniMapData as minimapData,
-isMinimapNavigation, setMap, showMinimap, hideMinimap, locateAvatar, resetSweepMarkerColors, renderOverlaySweep, showDirection, toggleMinimapVisibility, setSweepMarkerColor, setStandaloneMap, toggleMinimapFloor, getFloorsInSpace, createDropdown, setMinimapPosition };
+isMinimapNavigation, 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 };