@eeacms/volto-arcgis-block 0.1.393 → 0.1.395

package/CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [0.1.395](https://github.com/eea/volto-arcgis-block/compare/0.1.394...0.1.395) - 3 October 2025
+
+### [0.1.394](https://github.com/eea/volto-arcgis-block/compare/0.1.393...0.1.394) - 2 October 2025
+
+#### :hammer_and_wrench: Others
+
+- (task): local storage cleanup of bookmarks data in local storage. Persistence for authed users and isolation of bookmark data for all users. [Unai Bolivar - [`5af4c51`](https://github.com/eea/volto-arcgis-block/commit/5af4c5196cc2696b437d563513fb3b78c733a89e)]
+- (task): local storage cleanup of bookmarks data in local storage. [Unai Bolivar - [`ce9ad06`](https://github.com/eea/volto-arcgis-block/commit/ce9ad06db65c96f6fe1a985b3e4962b977bb30de)]
 ### [0.1.393](https://github.com/eea/volto-arcgis-block/compare/0.1.392...0.1.393) - 1 October 2025
 
 ### [0.1.392](https://github.com/eea/volto-arcgis-block/compare/0.1.391...0.1.392) - 25 September 2025

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.393",
+  "version": "0.1.395",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",

package/src/components/MapViewer/AreaWidget.jsx

@@ -1328,6 +1328,7 @@ class AreaWidget extends React.Component {
         '</div>';
       this.props.download && this.props.view.ui.add(popup, 'top-right');
     });
+    this.dragElement(document.querySelector('.coordinateWindow'));
   }
 
   async initFMI() {
@@ -1349,6 +1350,38 @@ class AreaWidget extends React.Component {
       //console.error('There was a problem with the fetch operation:', error);
     }
   }
+  dragElement(elmnt) {
+    var pos1 = 0,
+      pos2 = 0,
+      pos3 = 0,
+      pos4 = 0;
+    let header = document.querySelector('.coordinateHeader');
+    const dragMouseDown = (e) => {
+      e.preventDefault();
+      pos3 = e.clientX;
+      pos4 = e.clientY;
+      document.onmouseup = closeDragElement;
+      document.onmousemove = elementDrag;
+    };
+    const elementDrag = (e) => {
+      e.preventDefault();
+      pos1 = pos3 - e.clientX;
+      pos2 = pos4 - e.clientY;
+      pos3 = e.clientX;
+      pos4 = e.clientY;
+      elmnt.style.top = elmnt.offsetTop - pos2 + 'px';
+      elmnt.style.left = elmnt.offsetLeft - pos1 + 'px';
+    };
+    const closeDragElement = () => {
+      document.onmouseup = null;
+      document.onmousemove = null;
+    };
+    if (header) {
+      header.addEventListener('mousedown', dragMouseDown);
+    } else {
+      elmnt.addEventListener('mousedown', dragMouseDown);
+    }
+  }
   /**
    * This method renders the component
    * @returns jsx

package/src/components/MapViewer/BookmarkWidget.jsx

@@ -34,6 +34,7 @@ class BookmarkWidget extends React.Component {
     this.arcgisEventHandles = [];
     this.boundLimitMaxLenth = this.limitMaxLenth.bind(this);
     this._isMounted = false;
+    this._skipNextChangePersist = true;
   }
 
   loader() {
@@ -166,52 +167,54 @@ class BookmarkWidget extends React.Component {
       this.props.view.ui.add(this.container.current, 'top-right');
     });
     if (this.userID != null) {
-      this.sessionBookmarks =
-        JSON.parse(
-          localStorage.getItem(BOOKMARK_SESSION_KEY + '_' + this.userID),
-        ) || [];
-      this.sessionBookmarkLayers =
-        JSON.parse(
-          localStorage.getItem(
-            BOOKMARK_SESSION_KEY + '_' + this.userID + '_layers',
-          ),
-        ) || [];
-      while (this.sessionBookmarkLayers.length < this.sessionBookmarks.length) {
-        this.sessionBookmarkLayers.push([]);
-      }
-      this.sessionBookmarkOpacity =
-        JSON.parse(
-          localStorage.getItem(
-            BOOKMARK_SESSION_KEY + '_' + this.userID + '_opacity',
-          ),
-        ) || [];
-      while (
-        this.sessionBookmarkOpacity.length < this.sessionBookmarks.length
-      ) {
-        this.sessionBookmarkOpacity.push([]);
-      }
-      this.sessionBookmarkVisible =
-        JSON.parse(
-          localStorage.getItem(
-            BOOKMARK_SESSION_KEY + '_' + this.userID + '_visible',
-          ),
-        ) || [];
-      while (
-        this.sessionBookmarkVisible.length < this.sessionBookmarks.length
-      ) {
-        this.sessionBookmarkVisible.push([]);
-      }
-      this.sessionBookmarkHotspot =
-        JSON.parse(
-          localStorage.getItem(
-            BOOKMARK_SESSION_KEY + '_' + this.userID + '_hotspot',
-          ),
-        ) || [];
-      while (
-        this.sessionBookmarkHotspot.length < this.sessionBookmarks.length
-      ) {
-        this.sessionBookmarkHotspot.push([]);
-      }
+      this.migrateLegacyBookmarksToUserObject();
+      // this.sessionBookmarks =
+      //   JSON.parse(
+      //     localStorage.getItem(BOOKMARK_SESSION_KEY + '_' + this.userID),
+      //   ) || [];
+      // this.sessionBookmarkLayers =
+      //   JSON.parse(
+      //     localStorage.getItem(
+      //       BOOKMARK_SESSION_KEY + '_' + this.userID + '_layers',
+      //     ),
+      //   ) || [];
+      // while (this.sessionBookmarkLayers.length < this.sessionBookmarks.length) {
+      //   this.sessionBookmarkLayers.push([]);
+      // }
+      // this.sessionBookmarkOpacity =
+      //   JSON.parse(
+      //     localStorage.getItem(
+      //       BOOKMARK_SESSION_KEY + '_' + this.userID + '_opacity',
+      //     ),
+      //   ) || [];
+      // while (
+      //   this.sessionBookmarkOpacity.length < this.sessionBookmarks.length
+      // ) {
+      //   this.sessionBookmarkOpacity.push([]);
+      // }
+      // this.sessionBookmarkVisible =
+      //   JSON.parse(
+      //     localStorage.getItem(
+      //       BOOKMARK_SESSION_KEY + '_' + this.userID + '_visible',
+      //     ),
+      //   ) || [];
+      // while (
+      //   this.sessionBookmarkVisible.length < this.sessionBookmarks.length
+      // ) {
+      //   this.sessionBookmarkVisible.push([]);
+      // }
+      // this.sessionBookmarkHotspot =
+      //   JSON.parse(
+      //     localStorage.getItem(
+      //       BOOKMARK_SESSION_KEY + '_' + this.userID + '_hotspot',
+      //     ),
+      //   ) || [];
+      // while (
+      //   this.sessionBookmarkHotspot.length < this.sessionBookmarks.length
+      // ) {
+      //   this.sessionBookmarkHotspot.push([]);
+      // }
+      this.loadBookmarksToWidget();
     }
     this.Bookmarks = new Bookmarks({
       view: this.props.view,
@@ -392,26 +395,31 @@ class BookmarkWidget extends React.Component {
           // shouldUpdate = true;
           // }
           if (shouldUpdate && this.userID != null) {
-            localStorage.setItem(
-              BOOKMARK_SESSION_KEY + '_' + this.userID,
-              JSON.stringify(this.Bookmarks.bookmarks.items),
-            );
-            localStorage.setItem(
-              BOOKMARK_SESSION_KEY + '_' + this.userID + '_layers',
-              JSON.stringify(this.sessionBookmarkLayers),
-            );
-            localStorage.setItem(
-              BOOKMARK_SESSION_KEY + '_' + this.userID + '_opacity',
-              JSON.stringify(this.sessionBookmarkOpacity),
-            );
-            localStorage.setItem(
-              BOOKMARK_SESSION_KEY + '_' + this.userID + '_visible',
-              JSON.stringify(this.sessionBookmarkVisible),
-            );
-            localStorage.setItem(
-              BOOKMARK_SESSION_KEY + '_' + this.userID + '_hotspot',
-              JSON.stringify(this.sessionBookmarkHotspot),
-            );
+            // localStorage.setItem(
+            //   BOOKMARK_SESSION_KEY + '_' + this.userID,
+            //   JSON.stringify(this.Bookmarks.bookmarks.items),
+            // );
+            // localStorage.setItem(
+            //   BOOKMARK_SESSION_KEY + '_' + this.userID + '_layers',
+            //   JSON.stringify(this.sessionBookmarkLayers),
+            // );
+            // localStorage.setItem(
+            //   BOOKMARK_SESSION_KEY + '_' + this.userID + '_opacity',
+            //   JSON.stringify(this.sessionBookmarkOpacity),
+            // );
+            // localStorage.setItem(
+            //   BOOKMARK_SESSION_KEY + '_' + this.userID + '_visible',
+            //   JSON.stringify(this.sessionBookmarkVisible),
+            // );
+            // localStorage.setItem(
+            //   BOOKMARK_SESSION_KEY + '_' + this.userID + '_hotspot',
+            //   JSON.stringify(this.sessionBookmarkHotspot),
+            // );
+            if (this._skipNextChangePersist) {
+              this._skipNextChangePersist = false;
+            } else {
+              this.saveBookmarksToUserObject();
+            }
           }
           if (shouldUpdate) {
             let bookmarkData = {
@@ -481,26 +489,27 @@ class BookmarkWidget extends React.Component {
             }
           }
           if (this.userID != null) {
-            localStorage.setItem(
-              BOOKMARK_SESSION_KEY + '_' + this.userID,
-              JSON.stringify(this.Bookmarks.bookmarks.items),
-            );
-            localStorage.setItem(
-              BOOKMARK_SESSION_KEY + '_' + this.userID + '_layers',
-              JSON.stringify(this.sessionBookmarkLayers),
-            );
-            localStorage.setItem(
-              BOOKMARK_SESSION_KEY + '_' + this.userID + '_opacity',
-              JSON.stringify(this.sessionBookmarkOpacity),
-            );
-            localStorage.setItem(
-              BOOKMARK_SESSION_KEY + '_' + this.userID + '_visible',
-              JSON.stringify(this.sessionBookmarkVisible),
-            );
-            localStorage.setItem(
-              BOOKMARK_SESSION_KEY + '_' + this.userID + '_hotspot',
-              JSON.stringify(this.sessionBookmarkHotspot),
-            );
+            // localStorage.setItem(
+            //   BOOKMARK_SESSION_KEY + '_' + this.userID,
+            //   JSON.stringify(this.Bookmarks.bookmarks.items),
+            // );
+            // localStorage.setItem(
+            //   BOOKMARK_SESSION_KEY + '_' + this.userID + '_layers',
+            //   JSON.stringify(this.sessionBookmarkLayers),
+            // );
+            // localStorage.setItem(
+            //   BOOKMARK_SESSION_KEY + '_' + this.userID + '_opacity',
+            //   JSON.stringify(this.sessionBookmarkOpacity),
+            // );
+            // localStorage.setItem(
+            //   BOOKMARK_SESSION_KEY + '_' + this.userID + '_visible',
+            //   JSON.stringify(this.sessionBookmarkVisible),
+            // );
+            // localStorage.setItem(
+            //   BOOKMARK_SESSION_KEY + '_' + this.userID + '_hotspot',
+            //   JSON.stringify(this.sessionBookmarkHotspot),
+            // );
+            this.saveBookmarksToUserObject();
           }
 
           let bookmarkData = {
@@ -534,6 +543,7 @@ class BookmarkWidget extends React.Component {
                 'bookmarkHotspotFilter',
                 JSON.stringify(this.sessionBookmarkHotspot[index]),
               );
+              this.saveBookmarksToUserObject();
             }
           }
           if (
@@ -622,7 +632,142 @@ class BookmarkWidget extends React.Component {
       );
     });
   }
+  migrateLegacyBookmarksToUserObject() {
+    if (this.userID == null) return;
+    const storageKey = 'user_' + this.userID;
+    let userObj;
+    try {
+      userObj = JSON.parse(localStorage.getItem(storageKey)) || {};
+    } catch (e) {
+      userObj = {};
+    }
+    const hasUserBookmarks =
+      userObj &&
+      userObj.bookmarks &&
+      typeof userObj.bookmarks === 'object' &&
+      Array.isArray(userObj.bookmarks.items) &&
+      userObj.bookmarks.items.length > 0;
+    if (hasUserBookmarks) return;
+    let legacyItems;
+    let legacyLayers;
+    let legacyOpacity;
+    let legacyVisible;
+    let legacyHotspot;
+    try {
+      legacyItems =
+        JSON.parse(
+          localStorage.getItem(BOOKMARK_SESSION_KEY + '_' + this.userID),
+        ) || [];
+    } catch (e) {
+      legacyItems = [];
+    }
+    try {
+      legacyLayers =
+        JSON.parse(
+          localStorage.getItem(
+            BOOKMARK_SESSION_KEY + '_' + this.userID + '_layers',
+          ),
+        ) || [];
+    } catch (e) {
+      legacyLayers = [];
+    }
+    try {
+      legacyOpacity =
+        JSON.parse(
+          localStorage.getItem(
+            BOOKMARK_SESSION_KEY + '_' + this.userID + '_opacity',
+          ),
+        ) || [];
+    } catch (e) {
+      legacyOpacity = [];
+    }
+    try {
+      legacyVisible =
+        JSON.parse(
+          localStorage.getItem(
+            BOOKMARK_SESSION_KEY + '_' + this.userID + '_visible',
+          ),
+        ) || [];
+    } catch (e) {
+      legacyVisible = [];
+    }
+    try {
+      legacyHotspot =
+        JSON.parse(
+          localStorage.getItem(
+            BOOKMARK_SESSION_KEY + '_' + this.userID + '_hotspot',
+          ),
+        ) || [];
+    } catch (e) {
+      legacyHotspot = [];
+    }
+    const hasLegacyData =
+      (Array.isArray(legacyItems) && legacyItems.length > 0) ||
+      (Array.isArray(legacyLayers) && legacyLayers.length > 0) ||
+      (Array.isArray(legacyOpacity) && legacyOpacity.length > 0) ||
+      (Array.isArray(legacyVisible) && legacyVisible.length > 0) ||
+      (Array.isArray(legacyHotspot) && legacyHotspot.length > 0);
+    if (!hasLegacyData) return;
+    let selectedHotspotFilter = null;
+    try {
+      selectedHotspotFilter = JSON.parse(
+        localStorage.getItem('bookmarkHotspotFilter'),
+      );
+    } catch (e) {
+      selectedHotspotFilter = null;
+    }
+    if (!userObj.bookmarks || typeof userObj.bookmarks !== 'object') {
+      userObj.bookmarks = {};
+    }
+    userObj.bookmarks.items = legacyItems;
+    userObj.bookmarks.layers = legacyLayers;
+    userObj.bookmarks.opacity = legacyOpacity;
+    userObj.bookmarks.visible = legacyVisible;
+    userObj.bookmarks.hotspot = legacyHotspot;
+    userObj.bookmarks.selectedHotspotFilter = selectedHotspotFilter;
+    localStorage.setItem(storageKey, JSON.stringify(userObj));
+  }
   componentDidUpdate() {
+    if (this.userID !== this.props.userID) {
+      this.userID = this.props.userID;
+      this._skipNextChangePersist = true;
+      if (this.Bookmarks && this.Bookmarks.bookmarks) {
+        this.Bookmarks.bookmarks.removeAll();
+      }
+      this.sessionBookmarks = [];
+      this.sessionBookmarkLayers = [];
+      this.sessionBookmarkOpacity = [];
+      this.sessionBookmarkVisible = [];
+      this.sessionBookmarkHotspot = [];
+      try {
+        if (!this.userID) {
+          localStorage.removeItem('bookmarkHotspotFilter');
+        } else {
+          this.loadBookmarksToWidget();
+          if (this.Bookmarks && this.Bookmarks.bookmarks) {
+            const mapped = this.sessionBookmarks.map((bm) => {
+              if (bm && bm.extent) {
+                const { extent, ...rest } = bm;
+                let geometry;
+                if (extent && typeof extent === 'object') {
+                  geometry = extent.type ? extent : new Extent(extent);
+                }
+                return {
+                  ...rest,
+                  viewpoint: { targetGeometry: geometry },
+                };
+              }
+              return bm;
+            });
+            mapped.forEach((item) => this.Bookmarks.bookmarks.add(item));
+            this.sessionBookmarks = [];
+            this.Bookmarks.bookmarks.items.forEach((bookmark) => {
+              this.sessionBookmarks.push(bookmark);
+            });
+          }
+        }
+      } catch (e) {}
+    }
     this.props.view.when(() => {
       this.Bookmarks.when(() => {
         this.Bookmarks.container.addEventListener(
@@ -653,6 +798,95 @@ class BookmarkWidget extends React.Component {
       );
     }
   }
+  loadBookmarksToWidget() {
+    if (this.userID == null) return;
+    const storageKey = 'user_' + this.userID;
+    let userObj;
+    try {
+      userObj = JSON.parse(localStorage.getItem(storageKey)) || {};
+    } catch (e) {
+      userObj = {};
+    }
+    let bookmarks =
+      userObj && userObj.bookmarks && typeof userObj.bookmarks === 'object'
+        ? userObj.bookmarks
+        : null;
+    if (!bookmarks) return;
+    const items = Array.isArray(bookmarks.items) ? bookmarks.items : [];
+    const layers = Array.isArray(bookmarks.layers) ? bookmarks.layers : [];
+    const opacity = Array.isArray(bookmarks.opacity) ? bookmarks.opacity : [];
+    const visible = Array.isArray(bookmarks.visible) ? bookmarks.visible : [];
+    const hotspot = Array.isArray(bookmarks.hotspot) ? bookmarks.hotspot : [];
+    const selectedHotspotFilter =
+      bookmarks.selectedHotspotFilter != null
+        ? bookmarks.selectedHotspotFilter
+        : null;
+    this.sessionBookmarks = items;
+    this.sessionBookmarkLayers = layers;
+    while (this.sessionBookmarkLayers.length < this.sessionBookmarks.length) {
+      this.sessionBookmarkLayers.push([]);
+    }
+    this.sessionBookmarkOpacity = opacity;
+    while (this.sessionBookmarkOpacity.length < this.sessionBookmarks.length) {
+      this.sessionBookmarkOpacity.push([]);
+    }
+    this.sessionBookmarkVisible = visible;
+    while (this.sessionBookmarkVisible.length < this.sessionBookmarks.length) {
+      this.sessionBookmarkVisible.push([]);
+    }
+    this.sessionBookmarkHotspot = hotspot;
+    while (this.sessionBookmarkHotspot.length < this.sessionBookmarks.length) {
+      this.sessionBookmarkHotspot.push([]);
+    }
+    if (selectedHotspotFilter !== null) {
+      localStorage.setItem(
+        'bookmarkHotspotFilter',
+        JSON.stringify(selectedHotspotFilter),
+      );
+    }
+  }
+  saveBookmarksToUserObject() {
+    if (this.userID == null) return;
+    const storageKey = 'user_' + this.userID;
+    let userObj;
+    try {
+      userObj = JSON.parse(localStorage.getItem(storageKey)) || {};
+    } catch (e) {
+      userObj = {};
+    }
+    const items = this.Bookmarks?.bookmarks?.items
+      ? this.Bookmarks.bookmarks.items
+      : this.sessionBookmarks;
+    const layers = this.sessionBookmarkLayers;
+    const opacity = this.sessionBookmarkOpacity;
+    const visible = this.sessionBookmarkVisible;
+    const hotspot = this.sessionBookmarkHotspot;
+    let selectedHotspotFilter = null;
+    try {
+      selectedHotspotFilter = JSON.parse(
+        localStorage.getItem('bookmarkHotspotFilter'),
+      );
+    } catch (e) {
+      selectedHotspotFilter = null;
+    }
+    if (!userObj.bookmarks || typeof userObj.bookmarks !== 'object') {
+      userObj.bookmarks = {};
+    }
+    const existingItems =
+      userObj.bookmarks && Array.isArray(userObj.bookmarks.items)
+        ? userObj.bookmarks.items
+        : [];
+    if ((!items || items.length === 0) && existingItems.length > 0) {
+      return;
+    }
+    userObj.bookmarks.items = items;
+    userObj.bookmarks.layers = layers;
+    userObj.bookmarks.opacity = opacity;
+    userObj.bookmarks.visible = visible;
+    userObj.bookmarks.hotspot = hotspot;
+    userObj.bookmarks.selectedHotspotFilter = selectedHotspotFilter;
+    localStorage.setItem(storageKey, JSON.stringify(userObj));
+  }
   /**
    * This method renders the component
    * @returns jsx

package/src/components/MapViewer/css/ArcgisMap.css

@@ -471,8 +471,8 @@ label.ccl-form-radio-label span.nuts-menu-icon {
 
 .coordinateWindow {
   position: absolute;
-  right: 23rem;
-  bottom: 2rem;
+  top: 23rem;
+  left: 47rem;
   display: none;
   width: 23rem;
   height: 13rem;