From 17c8a3a82fab5094202b3d56440497e7e3f519cf Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Thu, 27 Jun 2024 16:56:05 +0200
Subject: [PATCH 01/27] Migrate canvas source and polygon brush from @biigle/ol
 to core

---
 package-lock.json                             | 360 +++++++++---------
 package.json                                  |   7 +-
 .../components/annotationCanvas.vue           |  67 ++--
 .../annotationCanvas/drawInteractions.vue     |   4 +-
 .../annotationCanvas/measureInteraction.vue   |   6 +-
 .../polygonBrushInteraction.vue               |   8 +-
 .../components/annotationCanvas/sampling.vue  |  14 +-
 .../annotations/components/measureTooltip.vue |   6 +-
 .../js/annotations/components/minimap.vue     |  12 +-
 resources/assets/js/annotations/main.js       |   2 +-
 .../annotations/mixins/annotationTooltip.vue  |   2 +-
 .../annotations/ol/AttachLabelInteraction.js  |   2 +-
 .../assets/js/annotations/ol/CancelableMap.js |   2 +-
 .../js/annotations/ol/MagicWandInteraction.js |  18 +-
 .../js/annotations/ol/PolygonValidator.js     |  16 +-
 .../js/annotations/ol/TranslateInteraction.js |   2 +-
 .../js/annotations/ol/ZoomToNativeControl.js  |   2 +-
 .../js/annotations/ol/geom/flat/difference.js |  32 ++
 .../js/annotations/ol/geom/flat/simplify.js   |  18 +
 .../js/annotations/ol/geom/flat/union.js      |  19 +
 .../ol/interaction/ModifyPolygonBrush.js      | 264 +++++++++++++
 .../ol/interaction/PolygonBrush.js            | 295 ++++++++++++++
 .../assets/js/annotations/ol/source/Canvas.js |  52 +++
 .../assets/js/annotations/snapInteraction.vue |  10 +-
 .../assets/js/annotations/stores/styles.js    |  10 +-
 .../js/videos/components/videoScreen.vue      |  18 +-
 .../videoScreen/annotationPlayback.vue        |  14 +-
 .../videoScreen/drawInteractions.vue          |   6 +-
 .../videoScreen/modifyInteractions.vue        |   6 +-
 .../videoScreen/polygonBrushInteractions.vue  |  16 +-
 .../components/videoScreen/videoPlayback.vue  |  10 +-
 31 files changed, 985 insertions(+), 315 deletions(-)
 create mode 100644 resources/assets/js/annotations/ol/geom/flat/difference.js
 create mode 100644 resources/assets/js/annotations/ol/geom/flat/simplify.js
 create mode 100644 resources/assets/js/annotations/ol/geom/flat/union.js
 create mode 100644 resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js
 create mode 100644 resources/assets/js/annotations/ol/interaction/PolygonBrush.js
 create mode 100644 resources/assets/js/annotations/ol/source/Canvas.js

diff --git a/package-lock.json b/package-lock.json
index 17ee5e34d..ea04cb730 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,12 +6,17 @@
     "": {
       "license": "GPL-3.0-only",
       "dependencies": {
-        "@biigle/ol": "^5.3.0",
         "@fortawesome/fontawesome-free": "^5.2.0",
+        "@turf/boolean-contains": "^6.5.0",
+        "@turf/boolean-overlap": "^6.5.0",
+        "@turf/difference": "^6.5.0",
+        "@turf/helpers": "^6.5.0",
+        "@turf/union": "^6.5.0",
         "bootstrap-sass": "^3.3.7",
         "echarts": "^5.3.2",
         "jsts": "^2.11.0",
         "magic-wand-tool": "^1.1.4",
+        "ol": "^5.3.3",
         "polymorph-js": "^0.2.4",
         "uiv": "^1.2.4",
         "vue": "^2.0.5",
@@ -2097,22 +2102,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@biigle/ol": {
-      "version": "5.3.4",
-      "resolved": "https://npm.pkg.github.com/download/@biigle/ol/5.3.4/dfd8c69f0b9e233c0505336d1b98b235a8d428f4",
-      "integrity": "sha512-WEPbCRlfb3vhXmjY/LFB1K3PdadZnj5s1TkSZRaO9sKU5Uw3FaIi+ElWUgJRvIAGAo8zExELGvaRmtSJ4M2Xdg==",
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "@turf/boolean-contains": "^6.0.1",
-        "@turf/boolean-overlap": "^6.0.1",
-        "@turf/difference": "6.0.1",
-        "@turf/helpers": "^6.1.4",
-        "@turf/union": "^6.0.3",
-        "pbf": "3.1.0",
-        "pixelworks": "1.1.0",
-        "rbush": "2.0.2"
-      }
-    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz",
@@ -2301,18 +2290,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/@turf/area": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@turf/area/-/area-6.5.0.tgz",
-      "integrity": "sha512-xCZdiuojokLbQ+29qR6qoMD89hv+JAgWjLrwSEWL+3JV8IXKeNFl6XkEJz9HGkVpnXvQKJoRz4/liT+8ZZ5Jyg==",
-      "dependencies": {
-        "@turf/helpers": "^6.5.0",
-        "@turf/meta": "^6.5.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/turf"
-      }
-    },
     "node_modules/@turf/bbox": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/bbox/-/bbox-6.5.0.tgz",
@@ -2405,15 +2382,16 @@
       }
     },
     "node_modules/@turf/difference": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@turf/difference/-/difference-6.0.1.tgz",
-      "integrity": "sha512-lkhJjNfPeLARQm232A851vVhrUvX3gdvTft5QlqkUlr7AzLpiT8PW14yEkU9xABxRh6PGv7T1UUVAeRgC7JxuA==",
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/difference/-/difference-6.5.0.tgz",
+      "integrity": "sha512-l8iR5uJqvI+5Fs6leNbhPY5t/a3vipUF/3AeVLpwPQcgmedNXyheYuy07PcMGH5Jdpi5gItOiTqwiU/bUH4b3A==",
       "dependencies": {
-        "@turf/area": "6.x",
-        "@turf/helpers": "6.x",
-        "@turf/invariant": "6.x",
-        "@turf/meta": "6.x",
-        "martinez-polygon-clipping": "*"
+        "@turf/helpers": "^6.5.0",
+        "@turf/invariant": "^6.5.0",
+        "polygon-clipping": "^0.15.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
       }
     },
     "node_modules/@turf/distance": {
@@ -4712,16 +4690,19 @@
       }
     },
     "node_modules/deep-equal": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
-      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
+      "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==",
       "dependencies": {
-        "is-arguments": "^1.0.4",
-        "is-date-object": "^1.0.1",
-        "is-regex": "^1.0.4",
-        "object-is": "^1.0.1",
+        "is-arguments": "^1.1.1",
+        "is-date-object": "^1.0.5",
+        "is-regex": "^1.1.4",
+        "object-is": "^1.1.5",
         "object-keys": "^1.1.1",
-        "regexp.prototype.flags": "^1.2.0"
+        "regexp.prototype.flags": "^1.5.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -4779,14 +4760,19 @@
       }
     },
     "node_modules/define-properties": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
       "dependencies": {
-        "object-keys": "^1.0.12"
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
       },
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/depd": {
@@ -5921,6 +5907,14 @@
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -5933,7 +5927,7 @@
     "node_modules/geojson-equality": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/geojson-equality/-/geojson-equality-0.1.6.tgz",
-      "integrity": "sha1-oXE3TvBD5dR5eZWEC65GSOB1LXI=",
+      "integrity": "sha512-TqG8YbqizP3EfwP5Uw4aLu6pKkg6JQK9uq/XZ1lXQntvTHD1BBKJWhNpJ2M0ax6TuWMP3oyx6Oq7FCIfznrgpQ==",
       "dependencies": {
         "deep-equal": "^1.0.0"
       }
@@ -6193,11 +6187,11 @@
       }
     },
     "node_modules/has-tostringtag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
-      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
       "dependencies": {
-        "has-symbols": "^1.0.2"
+        "has-symbols": "^1.0.3"
       },
       "engines": {
         "node": ">= 0.4"
@@ -7427,16 +7421,6 @@
         "semver": "bin/semver.js"
       }
     },
-    "node_modules/martinez-polygon-clipping": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/martinez-polygon-clipping/-/martinez-polygon-clipping-0.7.1.tgz",
-      "integrity": "sha512-Xt5hOjAVkRoGN7kUb/0VmkxcG07Ja+OA3qU+7YcY2pAlJ78V1G181VTozHCXpzlj0paNBbcLno77mcGeGStI0A==",
-      "dependencies": {
-        "robust-predicates": "^2.0.4",
-        "splaytree": "^0.1.4",
-        "tinyqueue": "^1.2.0"
-      }
-    },
     "node_modules/md5": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
@@ -7899,12 +7883,12 @@
       }
     },
     "node_modules/object-is": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
-      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
+      "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -7927,6 +7911,16 @@
       "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
       "dev": true
     },
+    "node_modules/ol": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-5.3.3.tgz",
+      "integrity": "sha512-7eU4x8YMduNcED1D5wI+AMWDRe7/1HmGfsbV+kFFROI9RNABU/6n4osj6Q3trZbxxKnK2DSRIjIRGwRHT/Z+Ww==",
+      "dependencies": {
+        "pbf": "3.1.0",
+        "pixelworks": "1.1.0",
+        "rbush": "2.0.2"
+      }
+    },
     "node_modules/on-finished": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
@@ -8261,7 +8255,7 @@
     "node_modules/pixelworks": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/pixelworks/-/pixelworks-1.1.0.tgz",
-      "integrity": "sha1-Hwla1I3Ki/ihyCWOAJIDGkTyLKU="
+      "integrity": "sha512-nDqeyp0pvOvCihLsyc9GHWKP4THUtcfQ+qs61uiVaZdlNv0j7y6PWNyPfnTtuxMJ+MTAqff2QbbM/1DyCcRdOQ=="
     },
     "node_modules/pkg-dir": {
       "version": "4.2.0",
@@ -8276,17 +8270,23 @@
       }
     },
     "node_modules/polygon-clipping": {
-      "version": "0.15.3",
-      "resolved": "https://registry.npmjs.org/polygon-clipping/-/polygon-clipping-0.15.3.tgz",
-      "integrity": "sha512-ho0Xx5DLkgxRx/+n4O74XyJ67DcyN3Tu9bGYKsnTukGAW6ssnuak6Mwcyb1wHy9MZc9xsUWqIoiazkZB5weECg==",
+      "version": "0.15.7",
+      "resolved": "https://registry.npmjs.org/polygon-clipping/-/polygon-clipping-0.15.7.tgz",
+      "integrity": "sha512-nhfdr83ECBg6xtqOAJab1tbksbBAOMUltN60bU+llHVOL0e5Onm1WpAXXWXVB39L8AJFssoIhEVuy/S90MmotA==",
       "dependencies": {
+        "robust-predicates": "^3.0.2",
         "splaytree": "^3.1.0"
       }
     },
+    "node_modules/polygon-clipping/node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
+    },
     "node_modules/polygon-clipping/node_modules/splaytree": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/splaytree/-/splaytree-3.1.0.tgz",
-      "integrity": "sha512-gvUGR7xnOy0fLKTCxDeUZYgU/I1Tdf8M/lM1Qrf8L2TIOR5ipZjGk02uYcdv0o2x7WjVRgpm3iS2clLyuVAt0Q=="
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/splaytree/-/splaytree-3.1.2.tgz",
+      "integrity": "sha512-4OM2BJgC5UzrhVnnJA4BkHKGtjXNzzUfpQjCO8I05xYPsfS/VuQDwjCGGMi8rYQilHEV4j8NBqTFbls/PZEE7A=="
     },
     "node_modules/polymorph-js": {
       "version": "0.2.4",
@@ -9215,12 +9215,14 @@
       "dev": true
     },
     "node_modules/regexp.prototype.flags": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.1.tgz",
-      "integrity": "sha512-pMR7hBVUUGI7PMA37m2ofIdQCsomVnas+Jn5UPGAHQ+/LlwKm/aTLJHdasmHRzlfeZwHiAOaRSo2rbBDm3nNUQ==",
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
+      "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
+        "call-bind": "^1.0.6",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "set-function-name": "^2.0.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -9477,11 +9479,6 @@
         "inherits": "^2.0.1"
       }
     },
-    "node_modules/robust-predicates": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-2.0.4.tgz",
-      "integrity": "sha512-l4NwboJM74Ilm4VKfbAtFeGq7aEjWL+5kVFcmgFA2MrdnQWx9iE/tUGvxY5HyMI7o/WpSIUFLbC5fbeaHgSCYg=="
-    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -9793,6 +9790,20 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
@@ -10005,11 +10016,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/splaytree": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/splaytree/-/splaytree-0.1.4.tgz",
-      "integrity": "sha512-D50hKrjZgBzqD3FT2Ek53f2dcDLAQT8SSGrzj3vidNH5ISRgceeGVJ2dQIthKOuayqFXfFjXheHNo4bbt9LhRQ=="
-    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -10455,11 +10461,6 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
-    "node_modules/tinyqueue": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-1.2.3.tgz",
-      "integrity": "sha512-Qz9RgWuO9l8lT+Y9xvbzhPT2efIUIFd69N7eF7tJ9lnQl0iLj1M7peK7IoUGZL9DJHw9XftqLreccfxcQgYLxA=="
-    },
     "node_modules/to-arraybuffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
@@ -12982,21 +12983,6 @@
         "to-fast-properties": "^2.0.0"
       }
     },
-    "@biigle/ol": {
-      "version": "5.3.4",
-      "resolved": "https://npm.pkg.github.com/download/@biigle/ol/5.3.4/dfd8c69f0b9e233c0505336d1b98b235a8d428f4",
-      "integrity": "sha512-WEPbCRlfb3vhXmjY/LFB1K3PdadZnj5s1TkSZRaO9sKU5Uw3FaIi+ElWUgJRvIAGAo8zExELGvaRmtSJ4M2Xdg==",
-      "requires": {
-        "@turf/boolean-contains": "^6.0.1",
-        "@turf/boolean-overlap": "^6.0.1",
-        "@turf/difference": "6.0.1",
-        "@turf/helpers": "^6.1.4",
-        "@turf/union": "^6.0.3",
-        "pbf": "3.1.0",
-        "pixelworks": "1.1.0",
-        "rbush": "2.0.2"
-      }
-    },
     "@discoveryjs/json-ext": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz",
@@ -13142,15 +13128,6 @@
       "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
       "dev": true
     },
-    "@turf/area": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@turf/area/-/area-6.5.0.tgz",
-      "integrity": "sha512-xCZdiuojokLbQ+29qR6qoMD89hv+JAgWjLrwSEWL+3JV8IXKeNFl6XkEJz9HGkVpnXvQKJoRz4/liT+8ZZ5Jyg==",
-      "requires": {
-        "@turf/helpers": "^6.5.0",
-        "@turf/meta": "^6.5.0"
-      }
-    },
     "@turf/bbox": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/bbox/-/bbox-6.5.0.tgz",
@@ -13222,15 +13199,13 @@
       }
     },
     "@turf/difference": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@turf/difference/-/difference-6.0.1.tgz",
-      "integrity": "sha512-lkhJjNfPeLARQm232A851vVhrUvX3gdvTft5QlqkUlr7AzLpiT8PW14yEkU9xABxRh6PGv7T1UUVAeRgC7JxuA==",
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/difference/-/difference-6.5.0.tgz",
+      "integrity": "sha512-l8iR5uJqvI+5Fs6leNbhPY5t/a3vipUF/3AeVLpwPQcgmedNXyheYuy07PcMGH5Jdpi5gItOiTqwiU/bUH4b3A==",
       "requires": {
-        "@turf/area": "6.x",
-        "@turf/helpers": "6.x",
-        "@turf/invariant": "6.x",
-        "@turf/meta": "6.x",
-        "martinez-polygon-clipping": "*"
+        "@turf/helpers": "^6.5.0",
+        "@turf/invariant": "^6.5.0",
+        "polygon-clipping": "^0.15.3"
       }
     },
     "@turf/distance": {
@@ -15116,16 +15091,16 @@
       }
     },
     "deep-equal": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
-      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
+      "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==",
       "requires": {
-        "is-arguments": "^1.0.4",
-        "is-date-object": "^1.0.1",
-        "is-regex": "^1.0.4",
-        "object-is": "^1.0.1",
+        "is-arguments": "^1.1.1",
+        "is-date-object": "^1.0.5",
+        "is-regex": "^1.1.4",
+        "object-is": "^1.1.5",
         "object-keys": "^1.1.1",
-        "regexp.prototype.flags": "^1.2.0"
+        "regexp.prototype.flags": "^1.5.1"
       }
     },
     "deep-is": {
@@ -15165,11 +15140,13 @@
       "dev": true
     },
     "define-properties": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
       "requires": {
-        "object-keys": "^1.0.12"
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
       }
     },
     "depd": {
@@ -16045,6 +16022,11 @@
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
+    "functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
+    },
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -16054,7 +16036,7 @@
     "geojson-equality": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/geojson-equality/-/geojson-equality-0.1.6.tgz",
-      "integrity": "sha1-oXE3TvBD5dR5eZWEC65GSOB1LXI=",
+      "integrity": "sha512-TqG8YbqizP3EfwP5Uw4aLu6pKkg6JQK9uq/XZ1lXQntvTHD1BBKJWhNpJ2M0ax6TuWMP3oyx6Oq7FCIfznrgpQ==",
       "requires": {
         "deep-equal": "^1.0.0"
       }
@@ -16252,11 +16234,11 @@
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
     },
     "has-tostringtag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
-      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
       "requires": {
-        "has-symbols": "^1.0.2"
+        "has-symbols": "^1.0.3"
       }
     },
     "hash-base": {
@@ -17161,16 +17143,6 @@
         }
       }
     },
-    "martinez-polygon-clipping": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/martinez-polygon-clipping/-/martinez-polygon-clipping-0.7.1.tgz",
-      "integrity": "sha512-Xt5hOjAVkRoGN7kUb/0VmkxcG07Ja+OA3qU+7YcY2pAlJ78V1G181VTozHCXpzlj0paNBbcLno77mcGeGStI0A==",
-      "requires": {
-        "robust-predicates": "^2.0.4",
-        "splaytree": "^0.1.4",
-        "tinyqueue": "^1.2.0"
-      }
-    },
     "md5": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
@@ -17532,12 +17504,12 @@
       "dev": true
     },
     "object-is": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
-      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
+      "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
       "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1"
       }
     },
     "object-keys": {
@@ -17551,6 +17523,16 @@
       "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
       "dev": true
     },
+    "ol": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-5.3.3.tgz",
+      "integrity": "sha512-7eU4x8YMduNcED1D5wI+AMWDRe7/1HmGfsbV+kFFROI9RNABU/6n4osj6Q3trZbxxKnK2DSRIjIRGwRHT/Z+Ww==",
+      "requires": {
+        "pbf": "3.1.0",
+        "pixelworks": "1.1.0",
+        "rbush": "2.0.2"
+      }
+    },
     "on-finished": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
@@ -17804,7 +17786,7 @@
     "pixelworks": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/pixelworks/-/pixelworks-1.1.0.tgz",
-      "integrity": "sha1-Hwla1I3Ki/ihyCWOAJIDGkTyLKU="
+      "integrity": "sha512-nDqeyp0pvOvCihLsyc9GHWKP4THUtcfQ+qs61uiVaZdlNv0j7y6PWNyPfnTtuxMJ+MTAqff2QbbM/1DyCcRdOQ=="
     },
     "pkg-dir": {
       "version": "4.2.0",
@@ -17816,17 +17798,23 @@
       }
     },
     "polygon-clipping": {
-      "version": "0.15.3",
-      "resolved": "https://registry.npmjs.org/polygon-clipping/-/polygon-clipping-0.15.3.tgz",
-      "integrity": "sha512-ho0Xx5DLkgxRx/+n4O74XyJ67DcyN3Tu9bGYKsnTukGAW6ssnuak6Mwcyb1wHy9MZc9xsUWqIoiazkZB5weECg==",
+      "version": "0.15.7",
+      "resolved": "https://registry.npmjs.org/polygon-clipping/-/polygon-clipping-0.15.7.tgz",
+      "integrity": "sha512-nhfdr83ECBg6xtqOAJab1tbksbBAOMUltN60bU+llHVOL0e5Onm1WpAXXWXVB39L8AJFssoIhEVuy/S90MmotA==",
       "requires": {
+        "robust-predicates": "^3.0.2",
         "splaytree": "^3.1.0"
       },
       "dependencies": {
+        "robust-predicates": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+          "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
+        },
         "splaytree": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/splaytree/-/splaytree-3.1.0.tgz",
-          "integrity": "sha512-gvUGR7xnOy0fLKTCxDeUZYgU/I1Tdf8M/lM1Qrf8L2TIOR5ipZjGk02uYcdv0o2x7WjVRgpm3iS2clLyuVAt0Q=="
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/splaytree/-/splaytree-3.1.2.tgz",
+          "integrity": "sha512-4OM2BJgC5UzrhVnnJA4BkHKGtjXNzzUfpQjCO8I05xYPsfS/VuQDwjCGGMi8rYQilHEV4j8NBqTFbls/PZEE7A=="
         }
       }
     },
@@ -18467,12 +18455,14 @@
       "dev": true
     },
     "regexp.prototype.flags": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.1.tgz",
-      "integrity": "sha512-pMR7hBVUUGI7PMA37m2ofIdQCsomVnas+Jn5UPGAHQ+/LlwKm/aTLJHdasmHRzlfeZwHiAOaRSo2rbBDm3nNUQ==",
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
+      "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==",
       "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
+        "call-bind": "^1.0.6",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "set-function-name": "^2.0.1"
       }
     },
     "regexpp": {
@@ -18665,11 +18655,6 @@
         "inherits": "^2.0.1"
       }
     },
-    "robust-predicates": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-2.0.4.tgz",
-      "integrity": "sha512-l4NwboJM74Ilm4VKfbAtFeGq7aEjWL+5kVFcmgFA2MrdnQWx9iE/tUGvxY5HyMI7o/WpSIUFLbC5fbeaHgSCYg=="
-    },
     "run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -18905,6 +18890,17 @@
         "has-property-descriptors": "^1.0.2"
       }
     },
+    "set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "requires": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      }
+    },
     "setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
@@ -19079,11 +19075,6 @@
         }
       }
     },
-    "splaytree": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/splaytree/-/splaytree-0.1.4.tgz",
-      "integrity": "sha512-D50hKrjZgBzqD3FT2Ek53f2dcDLAQT8SSGrzj3vidNH5ISRgceeGVJ2dQIthKOuayqFXfFjXheHNo4bbt9LhRQ=="
-    },
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -19401,11 +19392,6 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
-    "tinyqueue": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-1.2.3.tgz",
-      "integrity": "sha512-Qz9RgWuO9l8lT+Y9xvbzhPT2efIUIFd69N7eF7tJ9lnQl0iLj1M7peK7IoUGZL9DJHw9XftqLreccfxcQgYLxA=="
-    },
     "to-arraybuffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
diff --git a/package.json b/package.json
index c9dfe61c3..ae7b82648 100644
--- a/package.json
+++ b/package.json
@@ -23,12 +23,17 @@
     "vue-template-compiler": "^2.6.11"
   },
   "dependencies": {
-    "@biigle/ol": "^5.3.0",
     "@fortawesome/fontawesome-free": "^5.2.0",
+    "@turf/boolean-contains": "^6.5.0",
+    "@turf/boolean-overlap": "^6.5.0",
+    "@turf/difference": "^6.5.0",
+    "@turf/helpers": "^6.5.0",
+    "@turf/union": "^6.5.0",
     "bootstrap-sass": "^3.3.7",
     "echarts": "^5.3.2",
     "jsts": "^2.11.0",
     "magic-wand-tool": "^1.1.4",
+    "ol": "^5.3.3",
     "polymorph-js": "^0.2.4",
     "uiv": "^1.2.4",
     "vue": "^2.0.5",
diff --git a/resources/assets/js/annotations/components/annotationCanvas.vue b/resources/assets/js/annotations/components/annotationCanvas.vue
index f0854373c..68d7a07a1 100644
--- a/resources/assets/js/annotations/components/annotationCanvas.vue
+++ b/resources/assets/js/annotations/components/annotationCanvas.vue
@@ -2,53 +2,52 @@
 import * as PolygonValidator from '../ol/PolygonValidator';
 import AnnotationTooltip from './annotationCanvas/annotationTooltip';
 import AttachLabelInteraction from './annotationCanvas/attachLabelInteraction';
-import CanvasSource from '@biigle/ol/source/Canvas';
-import Circle from '@biigle/ol/geom/Circle';
-import Collection from '@biigle/ol/Collection';
+import CanvasSource from '../ol/source/Canvas';
+import Circle from 'ol/geom/Circle';
+import Collection from 'ol/Collection';
 import ControlButton from './controlButton';
 import DrawInteractions from './annotationCanvas/drawInteractions';
-import Ellipse from '@biigle/ol/geom/Ellipse';
+// import Ellipse from 'ol/geom/Ellipse';
 import Events from '../../core/events';
-import Feature from '@biigle/ol/Feature';
-import ImageLayer from '@biigle/ol/layer/Image';
+import Feature from 'ol/Feature';
+import ImageLayer from 'ol/layer/Image';
 import Keyboard from '../../core/keyboard';
 import LabelIndicator from './labelIndicator';
 import Lawnmower from './annotationCanvas/lawnmower';
-import LineString from '@biigle/ol/geom/LineString';
+import LineString from 'ol/geom/LineString';
 import MagicWandInteraction from './annotationCanvas/magicWandInteraction';
-import Map from '@biigle/ol/Map';
+import Map from 'ol/Map';
 import MeasureInteraction from './annotationCanvas/measureInteraction';
 import Minimap from './minimap';
-import ModifyInteraction from '@biigle/ol/interaction/Modify';
+import ModifyInteraction from 'ol/interaction/Modify';
 import MousePosition from './annotationCanvas/mousePosition';
-import MouseWheelZoom from '@biigle/ol/interaction/MouseWheelZoom';
-import Point from '@biigle/ol/geom/Point';
-import Polygon from '@biigle/ol/geom/Polygon';
+import MouseWheelZoom from 'ol/interaction/MouseWheelZoom';
+import Point from 'ol/geom/Point';
+import Polygon from 'ol/geom/Polygon';
 import PolygonBrushInteraction from './annotationCanvas/polygonBrushInteraction';
-import Projection from '@biigle/ol/proj/Projection';
-import Rectangle from '@biigle/ol/geom/Rectangle';
+import Projection from 'ol/proj/Projection';
+// import Rectangle from 'ol/geom/Rectangle';
 import Sampling from './annotationCanvas/sampling';
 import ScaleLine from './annotationCanvas/scaleLine';
-import SelectInteraction from '@biigle/ol/interaction/Select';
+import SelectInteraction from 'ol/interaction/Select';
 import Styles from '../stores/styles';
-import TileLayer from '@biigle/ol/layer/Tile';
+import TileLayer from 'ol/layer/Tile';
 import TranslateInteraction from './annotationCanvas/translateInteraction';
-import VectorLayer from '@biigle/ol/layer/Vector';
-import VectorSource from '@biigle/ol/source/Vector';
-import View from '@biigle/ol/View';
-import ZoomControl from '@biigle/ol/control/Zoom';
-import ZoomifySource from '@biigle/ol/source/Zoomify';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import View from 'ol/View';
+import ZoomControl from 'ol/control/Zoom';
+import ZoomifySource from 'ol/source/Zoomify';
 import ZoomLevel from './annotationCanvas/zoomLevel';
-import ZoomToExtentControl from '@biigle/ol/control/ZoomToExtent';
+import ZoomToExtentControl from 'ol/control/ZoomToExtent';
 import ZoomToNativeControl from '../ol/ZoomToNativeControl';
-import {click as clickCondition} from '@biigle/ol/events/condition';
-import {defaults as defaultInteractions} from '@biigle/ol/interaction'
-import {getCenter} from '@biigle/ol/extent';
-import {shiftKeyOnly as shiftKeyOnlyCondition} from '@biigle/ol/events/condition';
-import {singleClick as singleClickCondition} from '@biigle/ol/events/condition';
+import {click as clickCondition} from 'ol/events/condition';
+import {defaults as defaultInteractions} from 'ol/interaction'
+import {getCenter} from 'ol/extent';
+import {shiftKeyOnly as shiftKeyOnlyCondition} from 'ol/events/condition';
+import {singleClick as singleClickCondition} from 'ol/events/condition';
 import { isInvalidShape } from '../utils';
 
-
 /**
  * The annotator canvas
  *
@@ -371,8 +370,8 @@ export default {
             switch (annotation.shape) {
                 case 'Point':
                     return new Point(points[0]);
-                case 'Rectangle':
-                    return new Rectangle([points]);
+                // case 'Rectangle':
+                //     return new Rectangle([points]);
                 case 'Polygon':
                     return new Polygon([points]);
                 case 'LineString':
@@ -380,8 +379,8 @@ export default {
                 case 'Circle':
                     // radius is the x value of the second point of the circle
                     return new Circle(points[0], points[1][0]);
-                case 'Ellipse':
-                    return new Ellipse([points]);
+                // case 'Ellipse':
+                //     return new Ellipse([points]);
                 default:
                     // unsupported shapes are ignored
                     console.error('Unknown annotation shape: ' + annotation.shape);
@@ -502,8 +501,8 @@ export default {
                     points = [geometry.getCenter(), [geometry.getRadius()]];
                     break;
                 case 'Polygon':
-                case 'Rectangle':
-                case 'Ellipse':
+                // case 'Rectangle':
+                // case 'Ellipse':
                     points = geometry.getCoordinates()[0];
                     break;
                 case 'Point':
diff --git a/resources/assets/js/annotations/components/annotationCanvas/drawInteractions.vue b/resources/assets/js/annotations/components/annotationCanvas/drawInteractions.vue
index a0c94fb5f..c51d5a22c 100644
--- a/resources/assets/js/annotations/components/annotationCanvas/drawInteractions.vue
+++ b/resources/assets/js/annotations/components/annotationCanvas/drawInteractions.vue
@@ -1,8 +1,8 @@
 <script>
-import DrawInteraction from '@biigle/ol/interaction/Draw';
+import DrawInteraction from 'ol/interaction/Draw';
 import Keyboard from '../../../core/keyboard';
 import Styles from '../../stores/styles';
-import { shiftKeyOnly } from '@biigle/ol/events/condition';
+import { shiftKeyOnly } from 'ol/events/condition';
 import snapInteraction from '../../snapInteraction.vue';
 
 /**
diff --git a/resources/assets/js/annotations/components/annotationCanvas/measureInteraction.vue b/resources/assets/js/annotations/components/annotationCanvas/measureInteraction.vue
index c97dc4c42..7654e0b58 100644
--- a/resources/assets/js/annotations/components/annotationCanvas/measureInteraction.vue
+++ b/resources/assets/js/annotations/components/annotationCanvas/measureInteraction.vue
@@ -1,9 +1,9 @@
 <script>
-import DrawInteraction from '@biigle/ol/interaction/Draw';
+import DrawInteraction from 'ol/interaction/Draw';
 import Keyboard from '../../../core/keyboard';
 import Styles from '../../stores/styles';
-import VectorLayer from '@biigle/ol/layer/Vector';
-import VectorSource from '@biigle/ol/source/Vector';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
 
 /**
  * Mixin for the annotationCanvas component that contains logic for the measure interaction.
diff --git a/resources/assets/js/annotations/components/annotationCanvas/polygonBrushInteraction.vue b/resources/assets/js/annotations/components/annotationCanvas/polygonBrushInteraction.vue
index c642e1100..cbe0c404c 100644
--- a/resources/assets/js/annotations/components/annotationCanvas/polygonBrushInteraction.vue
+++ b/resources/assets/js/annotations/components/annotationCanvas/polygonBrushInteraction.vue
@@ -1,10 +1,10 @@
 <script>
 import Keyboard from '../../../core/keyboard';
-import ModifyPolygonBrushInteraction from '@biigle/ol/interaction/ModifyPolygonBrush';
-import PolygonBrushInteraction from '@biigle/ol/interaction/PolygonBrush';
-import SelectInteraction from '@biigle/ol/interaction/Select';
+import ModifyPolygonBrushInteraction from '../../ol/interaction/ModifyPolygonBrush';
+import PolygonBrushInteraction from '../../ol/interaction/PolygonBrush';
+import SelectInteraction from 'ol/interaction/Select';
 import Styles from '../../stores/styles';
-import { never, noModifierKeys, click, shiftKeyOnly, altKeyOnly } from '@biigle/ol/events/condition';
+import { never, noModifierKeys, click, shiftKeyOnly, altKeyOnly } from 'ol/events/condition';
 
 /**
  * Mixin for the annotationCanvas component that contains logic for the polygon brush interaction.
diff --git a/resources/assets/js/annotations/components/annotationCanvas/sampling.vue b/resources/assets/js/annotations/components/annotationCanvas/sampling.vue
index ac944a0d1..15adb9d66 100644
--- a/resources/assets/js/annotations/components/annotationCanvas/sampling.vue
+++ b/resources/assets/js/annotations/components/annotationCanvas/sampling.vue
@@ -1,11 +1,11 @@
 <script>
-import Circle from '@biigle/ol/style/Circle';
-import Feature from '@biigle/ol/Feature';
-import Point from '@biigle/ol/geom/Point';
-import Stroke from '@biigle/ol/style/Stroke';
-import Style from '@biigle/ol/style/Style';
-import VectorLayer from '@biigle/ol/layer/Vector';
-import VectorSource from '@biigle/ol/source/Vector';
+import Circle from 'ol/style/Circle';
+import Feature from 'ol/Feature';
+import Point from 'ol/geom/Point';
+import Stroke from 'ol/style/Stroke';
+import Style from 'ol/style/Style';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
 
 let crosshairLayer;
 let crosshairFeature;
diff --git a/resources/assets/js/annotations/components/measureTooltip.vue b/resources/assets/js/annotations/components/measureTooltip.vue
index 6368978ae..674f2da65 100644
--- a/resources/assets/js/annotations/components/measureTooltip.vue
+++ b/resources/assets/js/annotations/components/measureTooltip.vue
@@ -9,9 +9,9 @@
 <script>
 import AnnotationTooltip from '../mixins/annotationTooltip';
 import MeasureComponent from '../mixins/measureComponent';
-import Polygon from '@biigle/ol/geom/Polygon';
-import Circle from '@biigle/ol/geom/Circle';
-import LineString from '@biigle/ol/geom/LineString';
+import Polygon from 'ol/geom/Polygon';
+import Circle from 'ol/geom/Circle';
+import LineString from 'ol/geom/LineString';
 
 /**
  * Tooltip showing length/area of the hovered annotations.
diff --git a/resources/assets/js/annotations/components/minimap.vue b/resources/assets/js/annotations/components/minimap.vue
index d16607e2a..fd8282eff 100644
--- a/resources/assets/js/annotations/components/minimap.vue
+++ b/resources/assets/js/annotations/components/minimap.vue
@@ -3,14 +3,14 @@
 </template>
 
 <script>
-import Feature from '@biigle/ol/Feature';
+import Feature from 'ol/Feature';
 import {CancelableMap as Map} from '../ol/CancelableMap';
 import Styles from '../stores/styles';
-import VectorLayer from '@biigle/ol/layer/Vector';
-import VectorSource from '@biigle/ol/source/Vector';
-import View from '@biigle/ol/View';
-import {fromExtent} from '@biigle/ol/geom/Polygon';
-import {getCenter} from '@biigle/ol/extent';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import View from 'ol/View';
+import {fromExtent} from 'ol/geom/Polygon';
+import {getCenter} from 'ol/extent';
 
 /**
  * The minimap of the canvas element
diff --git a/resources/assets/js/annotations/main.js b/resources/assets/js/annotations/main.js
index c577fdd40..5e3288075 100644
--- a/resources/assets/js/annotations/main.js
+++ b/resources/assets/js/annotations/main.js
@@ -1,5 +1,5 @@
 import './export';
-import '@biigle/ol/ol.css';
+import 'ol/ol.css';
 import Container from './annotatorContainer';
 import Navbar from './annotationsNavbar';
 
diff --git a/resources/assets/js/annotations/mixins/annotationTooltip.vue b/resources/assets/js/annotations/mixins/annotationTooltip.vue
index 7de18f9c8..39e2d9367 100644
--- a/resources/assets/js/annotations/mixins/annotationTooltip.vue
+++ b/resources/assets/js/annotations/mixins/annotationTooltip.vue
@@ -1,5 +1,5 @@
 <script>
-import Overlay from '@biigle/ol/Overlay';
+import Overlay from 'ol/Overlay';
 
 /**
  * Tooltip showing information on the hovered annotations.
diff --git a/resources/assets/js/annotations/ol/AttachLabelInteraction.js b/resources/assets/js/annotations/ol/AttachLabelInteraction.js
index 6fbd210e5..543803875 100644
--- a/resources/assets/js/annotations/ol/AttachLabelInteraction.js
+++ b/resources/assets/js/annotations/ol/AttachLabelInteraction.js
@@ -1,4 +1,4 @@
-import PointerInteraction from '@biigle/ol/interaction/Pointer';
+import PointerInteraction from 'ol/interaction/Pointer';
 
 /**
  * Control for attaching labels to existing annotations
diff --git a/resources/assets/js/annotations/ol/CancelableMap.js b/resources/assets/js/annotations/ol/CancelableMap.js
index 588cdd859..be48a1337 100644
--- a/resources/assets/js/annotations/ol/CancelableMap.js
+++ b/resources/assets/js/annotations/ol/CancelableMap.js
@@ -1,4 +1,4 @@
-import Map from '@biigle/ol/Map';
+import Map from 'ol/Map';
 
 // OL Map that allows explicit canceling of the next animation frame for rendering.
 export class CancelableMap extends Map {
diff --git a/resources/assets/js/annotations/ol/MagicWandInteraction.js b/resources/assets/js/annotations/ol/MagicWandInteraction.js
index 78c4784b5..443ab096e 100644
--- a/resources/assets/js/annotations/ol/MagicWandInteraction.js
+++ b/resources/assets/js/annotations/ol/MagicWandInteraction.js
@@ -1,13 +1,13 @@
-import Feature from '@biigle/ol/Feature';
+import Feature from 'ol/Feature';
 import MagicWand from 'magic-wand-tool';
-import Point from '@biigle/ol/geom/Point';
-import PointerInteraction from '@biigle/ol/interaction/Pointer';
-import Polygon from '@biigle/ol/geom/Polygon';
-import RegularShape from '@biigle/ol/style/RegularShape';
-import Stroke from '@biigle/ol/style/Stroke';
-import Style from '@biigle/ol/style/Style';
-import VectorLayer from '@biigle/ol/layer/Vector';
-import VectorSource from '@biigle/ol/source/Vector';
+import Point from 'ol/geom/Point';
+import PointerInteraction from 'ol/interaction/Pointer';
+import Polygon from 'ol/geom/Polygon';
+import RegularShape from 'ol/style/RegularShape';
+import Stroke from 'ol/style/Stroke';
+import Style from 'ol/style/Style';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
 
 /**
  * Control for drawing polygons using fuzzy matching of colors.
diff --git a/resources/assets/js/annotations/ol/PolygonValidator.js b/resources/assets/js/annotations/ol/PolygonValidator.js
index 6ca104d9a..035fac7ce 100644
--- a/resources/assets/js/annotations/ol/PolygonValidator.js
+++ b/resources/assets/js/annotations/ol/PolygonValidator.js
@@ -1,14 +1,14 @@
 import 'jsts/org/locationtech/jts/monkey'; // This monkey patches jsts prototypes.
-import GeometryCollection from '@biigle/ol/geom/GeometryCollection';
+import GeometryCollection from 'ol/geom/GeometryCollection';
 import JstsLinearRing from 'jsts/org/locationtech/jts/geom/LinearRing';
-import LinearRing from '@biigle/ol/geom/LinearRing';
-import LineString from '@biigle/ol/geom/LineString';
-import MultiLineString from '@biigle/ol/geom/MultiLineString';
-import MultiPoint from '@biigle/ol/geom/MultiPoint';
-import MultiPolygon from '@biigle/ol/geom/MultiPolygon';
+import LinearRing from 'ol/geom/LinearRing';
+import LineString from 'ol/geom/LineString';
+import MultiLineString from 'ol/geom/MultiLineString';
+import MultiPoint from 'ol/geom/MultiPoint';
+import MultiPolygon from 'ol/geom/MultiPolygon';
 import OL3Parser from 'jsts/org/locationtech/jts/io/OL3Parser';
-import Point from '@biigle/ol/geom/Point';
-import Polygon from '@biigle/ol/geom/Polygon';
+import Point from 'ol/geom/Point';
+import Polygon from 'ol/geom/Polygon';
 import Polygonizer from 'jsts/org/locationtech/jts/operation/polygonize/Polygonizer';
 
 /**
diff --git a/resources/assets/js/annotations/ol/TranslateInteraction.js b/resources/assets/js/annotations/ol/TranslateInteraction.js
index d495accc1..c74da2d35 100644
--- a/resources/assets/js/annotations/ol/TranslateInteraction.js
+++ b/resources/assets/js/annotations/ol/TranslateInteraction.js
@@ -1,4 +1,4 @@
-import BaseTranslate from '@biigle/ol/interaction/Translate';
+import BaseTranslate from 'ol/interaction/Translate';
 import Keyboard from '../../core/keyboard';
 import {debounce} from '../../core/utils';
 
diff --git a/resources/assets/js/annotations/ol/ZoomToNativeControl.js b/resources/assets/js/annotations/ol/ZoomToNativeControl.js
index cad4a4794..a90de9e65 100644
--- a/resources/assets/js/annotations/ol/ZoomToNativeControl.js
+++ b/resources/assets/js/annotations/ol/ZoomToNativeControl.js
@@ -1,4 +1,4 @@
-import Control from '@biigle/ol/control/Control';
+import Control from 'ol/control/Control';
 
 /**
  * Control for zooming the map image to the original resolution
diff --git a/resources/assets/js/annotations/ol/geom/flat/difference.js b/resources/assets/js/annotations/ol/geom/flat/difference.js
new file mode 100644
index 000000000..83d68897c
--- /dev/null
+++ b/resources/assets/js/annotations/ol/geom/flat/difference.js
@@ -0,0 +1,32 @@
+import turfDifference from '@turf/difference';
+import {polygon as turfPolygon} from '@turf/helpers';
+import Polygon from 'ol/geom/Polygon.js';
+import {reducePrecision} from './simplify.js';
+
+export function difference(first, second) {
+  // Reduce the precision of the coordinates to avoid artifacts from the difference
+  // operation. If the full precision is used, some coordinates that should be equal are
+  // not considered equal and the difference operation returns a multipolygon where it
+  // shouldn't.
+  first.geometry.coordinates = reducePrecision(first.geometry.coordinates);
+  second.geometry.coordinates = reducePrecision(second.geometry.coordinates);
+
+  var differencePolygon = turfDifference(first, second);
+
+  // Return the larger part if a polygon has been split by the difference operation.
+  if (differencePolygon.geometry.type === 'MultiPolygon') {
+      var maxArea = 0;
+      var maxCoords;
+      for (var i = 0; i < differencePolygon.geometry.coordinates.length; i++) {
+          var area = (new Polygon(differencePolygon.geometry.coordinates[i])).getArea();
+          if (area > maxArea) {
+              maxArea = area;
+              maxCoords = differencePolygon.geometry.coordinates[i];
+          }
+      }
+
+      return maxCoords;
+  }
+
+  return differencePolygon.geometry.coordinates;
+}
diff --git a/resources/assets/js/annotations/ol/geom/flat/simplify.js b/resources/assets/js/annotations/ol/geom/flat/simplify.js
new file mode 100644
index 000000000..7b273fc51
--- /dev/null
+++ b/resources/assets/js/annotations/ol/geom/flat/simplify.js
@@ -0,0 +1,18 @@
+/**
+ * Reduce the coordinate precision with rounding.
+ *
+ * @param {Array} coordinates Polygon coordinates.
+ *
+ * @return {Array}
+ */
+export function reducePrecision(coordinates, decimals) {
+  decimals = decimals ? Math.pow(10, decimals) : 1000;
+
+  return coordinates.map(function (ring) {
+    return ring.map(function (coordinate) {
+      return coordinate.map(function (value) {
+        return Math.round(value * decimals) / decimals;
+      });
+    });
+  });
+}
diff --git a/resources/assets/js/annotations/ol/geom/flat/union.js b/resources/assets/js/annotations/ol/geom/flat/union.js
new file mode 100644
index 000000000..023eda5f4
--- /dev/null
+++ b/resources/assets/js/annotations/ol/geom/flat/union.js
@@ -0,0 +1,19 @@
+import turfUnion from '@turf/union';
+import {polygon as turfPolygon} from '@turf/helpers';
+import {reducePrecision} from './simplify.js';
+
+export function union(first, second) {
+  // Reduce the precision of the coordinates to avoid artifacts from the union operation.
+  // If the full precision is used, some coordinates that should be equal are not
+  // considered equal and the union operation returns a multipolygon where it shouldn't.
+  first.geometry.coordinates = reducePrecision(first.geometry.coordinates);
+  second.geometry.coordinates = reducePrecision(second.geometry.coordinates);
+  var unionPolygon = turfUnion(first, second);
+  if (unionPolygon.geometry.type === 'MultiPolygon') {
+    // Fill any holes in the polygon that may appear after union, i.e. take only the
+    // outline.
+    return unionPolygon.geometry.coordinates[0];
+  }
+
+  return unionPolygon.geometry.coordinates;
+}
diff --git a/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js b/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js
new file mode 100644
index 000000000..187a1bc15
--- /dev/null
+++ b/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js
@@ -0,0 +1,264 @@
+import {polygon as turfPolygon} from '@turf/helpers';
+import booleanContains from '@turf/boolean-contains';
+import booleanOverlap from '@turf/boolean-overlap';
+import Feature from 'ol/Feature';
+import EventType from 'ol/events/EventType';
+import GeometryType from 'ol/geom/GeometryType';
+import Circle from 'ol/geom/Circle';
+import Polygon from 'ol/geom/Polygon';
+import {createEditingStyle} from 'ol/style/Style';
+import Modify from 'ol/interaction/Modify';
+import {ModifyEvent} from 'ol/interaction/Modify';
+import {shiftKeyOnly} from 'ol/events/condition';
+import {fromCircle} from 'ol/geom/Polygon';
+import {union} from '../geom/flat/union';
+import {difference} from '../geom/flat/difference';
+import {always} from 'ol/events/condition';
+import Collection from 'ol/Collection';
+import {getNewSketchPointRadius, getNewSketchPointRadiusByPressure} from './PolygonBrush';
+
+export const ModifyEventType = {
+  MODIFYSTART: 'modifystart',
+  MODIFYREMOVE: 'modifyremove',
+  MODIFYEND: 'modifyend',
+};
+
+/**
+ * @classdesc
+ * Interaction for modifying polygons with a brush.
+ *
+ * @fires ModifyEvent
+ * @api
+ */
+class ModifyPolygonBrush extends Modify {
+  constructor(options) {
+
+    super(options);
+
+    this.overlay_.setStyle(options.style ? options.style : getDefaultStyleFunction());
+
+    this.sketchPoint_ = null;
+    this.sketchPointRadius_ = options.brushRadius !== undefined ?
+      options.brushRadius : 100;
+    this.addCondition_ = options.addCondition !== undefined ?
+      options.addCondition : always;
+    this.subtractCondition_ = options.subtractCondition !== undefined ?
+      options.subtractCondition : always;
+    this.resizeCondition_ = options.resizeCondition !== undefined ?
+      options.resizeCondition : shiftKeyOnly;
+    this.allowRemove_ = options.allowRemove !== undefined ?
+      options.allowRemove : true;
+
+    this.isAdding_ = false;
+    this.isSubtracting_ = false;
+
+    this.sketchCircle_ = null;
+
+  }
+
+  setMap(map) {
+    super.setMap(map);
+    if (map) {
+      let view = map.getView();
+      if (view) {
+        this.watchViewForChangedResolution(view);
+      }
+
+      map.on('change:view', (function (e) {
+        this.watchViewForChangedResolution(e.target.getView());
+      }).bind(this));
+    }
+  }
+
+  watchViewForChangedResolution(view) {
+    view.on('change:resolution', this.updateRelativeSketchPointRadius_.bind(this));
+  }
+
+  createOrUpdateSketchPoint_(event) {
+    const coordinates = event.coordinate.slice();
+    if (!this.sketchPoint_) {
+      let relativeRadius = event.map.getView().getResolution() * this.sketchPointRadius_;
+      this.sketchPoint_ = new Feature(new Circle(coordinates, relativeRadius));
+      this.overlay_.getSource().addFeature(this.sketchPoint_)
+    } else {
+      const sketchPointGeom = this.sketchPoint_.getGeometry();
+      sketchPointGeom.setCenter(coordinates);
+    }
+  }
+
+  createOrUpdateSketchCircle_(event) {
+    const coordinates = event.coordinate.slice();
+    if (!this.sketchCircle_) {
+      this.sketchCircle_ = new Circle(coordinates, this.sketchPoint_.getGeometry().getRadius());
+    } else {
+      this.sketchCircle_.setCenter(coordinates);
+      this.sketchCircle_.setRadius(this.sketchPoint_.getGeometry().getRadius())
+    }
+
+    if (event.originalEvent.pointerType === 'pen') {
+      this.sketchCircle_.setRadius(
+        getNewSketchPointRadiusByPressure(event, this.sketchPointRadius_)
+      );
+    }
+  }
+
+  updateRelativeSketchPointRadius_(event) {
+    if (this.sketchPoint_) {
+      this.sketchPoint_.getGeometry().setRadius(
+        this.sketchPointRadius_ * event.target.getResolution()
+      );
+    }
+  }
+
+  updateAbsoluteSketchPointRadius_(event) {
+    if (this.sketchPoint_) {
+      this.sketchPointRadius_ = getNewSketchPointRadius(event, this.sketchPointRadius_);
+      this.sketchPoint_.getGeometry().setRadius(
+        this.sketchPointRadius_ * event.map.getView().getResolution()
+      );
+    }
+  }
+
+  handleEvent(event) {
+    const type = event.type;
+    let pass = true;
+    if (this.resizeCondition_(event) &&
+      (type === EventType.WHEEL || EventType.MOUSEWHEEL)) {
+      event.originalEvent.preventDefault();
+      this.updateAbsoluteSketchPointRadius_(event);
+      pass = false;
+    }
+
+    return super.handleEvent(event) && pass;
+  }
+
+  handlePointerMove_(event) {
+    this.createOrUpdateSketchPoint_(event);
+    this.createOrUpdateSketchCircle_(event);
+  }
+
+  handleDownEvent(event) {
+    if (!this.handlingDownUpSequence) {
+      this.createOrUpdateSketchPoint_(event);
+      this.createOrUpdateSketchCircle_(event);
+
+      if (this.subtractCondition_(event)) {
+        this.startSubtracting_(event);
+
+        return true;
+      } else if (this.addCondition_(event)) {
+        this.startAdding_(event);
+
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  handleUpEvent(event) {
+    if (this.handlingDownUpSequence && (this.isSubtracting_ || this.isAdding_)) {
+      this.finishModifying_(event);
+
+      return true;
+    }
+
+    return false;
+  }
+
+  startSubtracting_(event) {
+    this.isSubtracting_ = true;
+    this.willModifyFeatures_(event);
+    this.subtractCurrentFeatures_(event);
+  }
+
+  startAdding_(event) {
+    this.isAdding_ = true;
+    this.willModifyFeatures_(event);
+    this.addCurrentFeatures_(event);
+  }
+
+  handleDragEvent(event) {
+    this.createOrUpdateSketchPoint_(event);
+    this.createOrUpdateSketchCircle_(event);
+    if (this.isSubtracting_) {
+      this.subtractCurrentFeatures_(event);
+    } else if (this.isAdding_) {
+      this.addCurrentFeatures_(event);
+    }
+  }
+
+  subtractCurrentFeatures_(event) {
+    const sketchPointGeom = fromCircle(this.sketchCircle_);
+    let sketchPointPolygon = turfPolygon(sketchPointGeom.getCoordinates());
+    let sketchPointArea = sketchPointGeom.getArea();
+    this.features_.getArray().forEach(function (feature) {
+      let featureGeom = feature.getGeometry();
+      try {
+        var featurePolygon = turfPolygon(featureGeom.getCoordinates());
+      } catch (e) {
+        // Skip features that can't be represented as polygon.
+        return;
+      }
+      if (booleanOverlap(sketchPointPolygon, featurePolygon)) {
+        var coords = difference(featurePolygon, sketchPointPolygon);
+        if (!this.allowRemove_ && sketchPointArea > (new Polygon(coords)).getArea()) {
+          // If allowRemove_ is false, the modified polygon may not become smaller than
+          // the sketchPointPolygon.
+          return;
+        }
+        featureGeom.setCoordinates(coords);
+      } else if (booleanContains(sketchPointPolygon, featurePolygon)) {
+        if (this.allowRemove_) {
+          this.features_.remove(feature);
+          if (this.source_) {
+            this.source_.removeFeature(feature);
+          }
+          this.dispatchEvent(
+            new ModifyEvent(ModifyPolygonBrushEventType.MODIFYREMOVE, new Collection([feature]), event)
+          );
+        }
+      }
+    }, this);
+  }
+
+  addCurrentFeatures_(event) {
+    const sketchPointGeom = fromCircle(this.sketchCircle_);
+    let sketchPointPolygon = turfPolygon(sketchPointGeom.getCoordinates());
+    this.features_.getArray().forEach(function (feature) {
+      let featureGeom = feature.getGeometry();
+      try {
+        var featurePolygon = turfPolygon(featureGeom.getCoordinates());
+      } catch (e) {
+        // Skip features that can't be represented as polygon.
+        return;
+      }
+      if (booleanOverlap(sketchPointPolygon, featurePolygon)) {
+        featureGeom.setCoordinates(union(sketchPointPolygon, featurePolygon));
+      } else if (booleanContains(sketchPointPolygon, featurePolygon)) {
+        featureGeom.setCoordinates(sketchPointGeom.getCoordinates());
+      }
+    }, this);
+  }
+
+  finishModifying_(event) {
+    this.isSubtracting_ = false;
+    this.isAdding_ = false;
+    this.dispatchEvent(new ModifyEvent(ModifyEventType.MODIFYEND, this.features_, event));
+  }
+
+  getBrushRadius() {
+    return this.sketchPointRadius_;
+  }
+}
+
+function getDefaultStyleFunction() {
+  const style = createEditingStyle();
+
+  return function(feature, resolution) {
+    return style[GeometryType.CIRCLE];
+  }
+}
+
+
+export default ModifyPolygonBrush;
diff --git a/resources/assets/js/annotations/ol/interaction/PolygonBrush.js b/resources/assets/js/annotations/ol/interaction/PolygonBrush.js
new file mode 100644
index 000000000..ea4a67c61
--- /dev/null
+++ b/resources/assets/js/annotations/ol/interaction/PolygonBrush.js
@@ -0,0 +1,295 @@
+import booleanContains from '@turf/boolean-contains';
+import booleanOverlap from '@turf/boolean-overlap';
+import Circle from 'ol/geom/Circle';
+import Draw from 'ol/interaction/Draw';
+import Event from 'ol/events/Event.js';
+import EventType from 'ol/events/EventType';
+import Feature from 'ol/Feature';
+import GeometryType from 'ol/geom/GeometryType';
+import MapBrowserEventType from 'ol/MapBrowserEventType';
+import VectorLayer from 'ol/layer/Vector';
+import {always} from 'ol/events/condition';
+import {createEditingStyle} from 'ol/style/Style';
+import {fromCircle} from 'ol/geom/Polygon';
+import {polygon as turfPolygon} from '@turf/helpers';
+import {shiftKeyOnly} from 'ol/events/condition';
+import {union} from '../geom/flat/union';
+
+const MIN_BRUSH_SIZE = 5;
+const BRUSH_RESIZE_STEP = 5;
+
+const DrawEventType = {
+  DRAWSTART: 'drawstart',
+  DRAWEND: 'drawend',
+  DRAWABORT: 'drawabort'
+};
+
+class DrawEvent extends Event {
+  constructor(type, feature) {
+    super(type);
+    this.feature = feature;
+  }
+}
+
+/**
+ * Return `true` if the event originates from a digital pen.
+ *
+ * In contrast to the condition from ../events/condition.js this function does not assert
+ * that the event is a pointer event.
+ *
+ * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event.
+ * @return {boolean} True if the event originates from a digital pen.
+ * @api
+ */
+const penOnly = function(mapBrowserEvent) {
+  const pointerEvt = mapBrowserEvent.pointerEvent;
+  // see http://www.w3.org/TR/pointerevents/#widl-PointerEvent-pointerType
+  return pointerEvt && pointerEvt.pointerType === 'pen';
+};
+
+export function getNewSketchPointRadius(event, radius) {
+  let delta = event.originalEvent.deltaY;
+  // Take the delta from deltaX if deltyY is 0 because some systems toggle the scroll
+  // direction with certain keys pressed (e.g. Mac with Shift+Scroll).
+  if (event.type == EventType.MOUSEWHEEL) {
+    delta = -event.originalEvent.wheelDeltaY;
+    if (delta === 0) {
+      delta = -event.originalEvent.wheelDeltaX;
+    }
+  } else if (delta === 0) {
+    delta = event.originalEvent.deltaX;
+  }
+
+  let step = BRUSH_RESIZE_STEP;
+  if (radius <= (BRUSH_RESIZE_STEP * 5)) {
+    step = 1;
+  }
+
+  if (delta > 0) {
+    return radius + step;
+  }
+
+  if (delta < 0) {
+    return Math.max(radius - step, MIN_BRUSH_SIZE);
+  }
+
+  return radius;
+}
+
+export function getNewSketchPointRadiusByPressure(event, radius) {
+  if (event.pointerEvent.pressure != 0) {
+    radius = getNewSketchPointRadius(event, radius);
+
+    return Math.max(radius * event.pointerEvent.pressure, MIN_BRUSH_SIZE) *
+      event.map.getView().getResolution();
+  }
+
+  return radius;
+}
+
+/**
+ * @classdesc
+ * Interaction for drawing polygons with a brush.
+ *
+ * @fires DrawEvent
+ * @api
+ */
+class PolygonBrush extends Draw {
+
+  constructor(options) {
+
+    options.freehandCondition = options.freehandCondition ?
+      options.freehandCondition : penOnly;
+
+    super(options);
+
+    // Override the default overlay to set updateWhileAnimating.
+    this.overlay_ = new VectorLayer({
+      source: this.overlay_.getSource(),
+      style: options.style ? options.style : getDefaultStyleFunction(),
+      updateWhileAnimating: true,
+      updateWhileInteracting: true
+    });
+
+    this.sketchPointRadius_ = options.brushRadius !== undefined ?
+      options.brushRadius : 100;
+    this.condition_ = options.condition !== undefined ?
+      options.condition : always;
+    this.resizeCondition_ = options.resizeCondition !== undefined ?
+      options.resizeCondition : shiftKeyOnly;
+
+    this.isDrawing_ = false;
+    this.sketchCircle_ = null;
+  }
+
+  setMap(map) {
+    super.setMap(map);
+    if (map) {
+      let view = map.getView();
+      if (view) {
+        this.watchViewForChangedResolution(view);
+      }
+
+      map.on('change:view', (function (e) {
+        this.watchViewForChangedResolution(e.target.getView());
+      }).bind(this));
+    }
+  }
+
+  watchViewForChangedResolution(view) {
+    view.on('change:resolution', this.updateRelativeSketchPointRadius_.bind(this));
+  }
+
+  handleEvent(event) {
+    const type = event.type;
+    let pass = true;
+    if (this.resizeCondition_(event) &&
+      (type === EventType.WHEEL || EventType.MOUSEWHEEL)) {
+      event.originalEvent.preventDefault();
+      this.updateAbsoluteSketchPointRadius_(event);
+      pass = false;
+    }
+
+    if (event.type === MapBrowserEventType.POINTERDRAG && this.handlingDownUpSequence) {
+      pass = false;
+    }
+
+    return super.handleEvent(event) && pass;
+  }
+
+  handleDownEvent(event) {
+    if (!this.handlingDownUpSequence) {
+      if (this.condition_(event)) {
+        this.startDrawing_(event);
+
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  handleUpEvent(event) {
+    if (this.handlingDownUpSequence && this.isDrawing_) {
+      this.finishDrawing();
+
+      return true;
+    }
+
+    return false;
+  }
+
+  createOrUpdateSketchPoint_(event) {
+    const coordinates = event.coordinate.slice();
+    if (!this.sketchPoint_) {
+      let relativeRadius = event.map.getView().getResolution() * this.sketchPointRadius_;
+      this.sketchPoint_ = new Feature(new Circle(coordinates, relativeRadius));
+      this.updateSketchFeatures_();
+    } else {
+      const sketchPointGeom = this.sketchPoint_.getGeometry();
+      sketchPointGeom.setCenter(coordinates);
+    }
+  }
+
+  updateRelativeSketchPointRadius_(event) {
+    if (this.sketchPoint_) {
+      this.sketchPoint_.getGeometry().setRadius(
+        this.sketchPointRadius_ * event.target.getResolution()
+      );
+    }
+  }
+
+  updateAbsoluteSketchPointRadius_(event) {
+    if (this.sketchPoint_) {
+      this.sketchPointRadius_ = getNewSketchPointRadius(event, this.sketchPointRadius_);
+      this.sketchPoint_.getGeometry().setRadius(
+        this.sketchPointRadius_ * event.map.getView().getResolution()
+      );
+    }
+  }
+
+  createOrUpdateSketchCircle_(event) {
+    const coordinates = event.coordinate.slice();
+    if (!this.sketchCircle_) {
+      this.sketchCircle_ = new Circle(coordinates, this.sketchPoint_.getGeometry().getRadius());
+    } else {
+      this.sketchCircle_.setCenter(coordinates);
+      this.sketchCircle_.setRadius(this.sketchPoint_.getGeometry().getRadius())
+    }
+
+    if (event.originalEvent.pointerType === 'pen') {
+      this.sketchCircle_.setRadius(
+        getNewSketchPointRadiusByPressure(event, this.sketchPointRadius_)
+      );
+    }
+  }
+
+  startDrawing_(event) {
+    this.isDrawing_ = true;
+    this.createOrUpdateSketchPoint_(event);
+    this.createOrUpdateSketchCircle_(event);
+    const start = event.coordinate;
+    this.finishCoordinate_ = start;
+    this.sketchFeature_ = new Feature(fromCircle(this.sketchCircle_));
+    this.updateSketchFeatures_();
+    this.dispatchEvent(new DrawEvent(DrawEventType.DRAWSTART, this.sketchFeature_));
+  }
+
+  handlePointerMove_(event) {
+    this.createOrUpdateSketchPoint_(event);
+    this.createOrUpdateSketchCircle_(event);
+
+    if (this.isDrawing_ && this.sketchFeature_) {
+      const sketchCircleGeometry = fromCircle(this.sketchCircle_);
+      const sketchCirclePolygon = turfPolygon(sketchCircleGeometry.getCoordinates());
+      const sketchFeatureGeometry = this.sketchFeature_.getGeometry();
+      const sketchFeaturePolygon = turfPolygon(sketchFeatureGeometry.getCoordinates());
+      if (booleanOverlap(sketchCirclePolygon, sketchFeaturePolygon)
+           || booleanContains(sketchCirclePolygon, sketchFeaturePolygon)) {
+          sketchFeatureGeometry.setCoordinates(
+            union(sketchCirclePolygon, sketchFeaturePolygon)
+          );
+      }
+    }
+  }
+
+  finishDrawing() {
+    this.isDrawing_ = false;
+    const sketchFeature = this.abortDrawing_();
+    if (!sketchFeature) {
+      return;
+    }
+
+    this.dispatchEvent(new DrawEvent(DrawEventType.DRAWEND, sketchFeature));
+    if (this.features_) {
+      this.features_.push(sketchFeature);
+    }
+    if (this.source_) {
+      this.source_.addFeature(sketchFeature);
+    }
+  }
+
+  getBrushRadius() {
+    return this.sketchPointRadius_;
+  }
+
+  abortDrawing_() {
+    this.sketchCircle_ = null;
+
+    return super.abortDrawing_();
+  }
+}
+
+function getDefaultStyleFunction() {
+  let styles = createEditingStyle();
+  styles[GeometryType.POLYGON] =
+      styles[GeometryType.POLYGON].concat(
+        styles[GeometryType.LINE_STRING]
+      );
+
+  return function(feature, resolution) {
+    return styles[feature.getGeometry().getType()];
+  };
+}
+
+export default PolygonBrush;
diff --git a/resources/assets/js/annotations/ol/source/Canvas.js b/resources/assets/js/annotations/ol/source/Canvas.js
new file mode 100644
index 000000000..03ec86f56
--- /dev/null
+++ b/resources/assets/js/annotations/ol/source/Canvas.js
@@ -0,0 +1,52 @@
+import Image from 'ol/source/Image';
+import ImageCanvas from 'ol/ImageCanvas';
+import {listen} from 'ol/events';
+import EventType from 'ol/events/EventType';
+import {intersects, getHeight} from 'ol/extent';
+
+/**
+ * @classdesc
+ * Base class for canvas sources where a canvas element is the canvas.
+ * @api
+ */
+class Canvas extends Image {
+  /**
+   * @param {Options} options Single image source options.
+   */
+  constructor(options) {
+    super({
+      attributions: options.attributions,
+      projection: options.projection,
+      resolutions: options.resolutions,
+      state: options.state
+    })
+
+    let resolution = getHeight(options.canvasExtent) / options.canvas.height;
+
+    /**
+     * @private
+     * @type {import("../ImageCanvas.js").ImageCanvas}
+     */
+    this.canvas_ = new ImageCanvas(options.canvasExtent, resolution, 1, options.canvas);
+
+    /**
+     * @private
+     * @type {import("../size.js").Size}
+     */
+    this.canvasSize_ = options.canvasSize ? options.canvasSize : null;
+
+    listen(this.canvas_, EventType.CHANGE, this.handleImageChange, this);
+  }
+
+  /**
+   * @inheritDoc
+   */
+  getImageInternal(extent, resolution, pixelRatio, projection) {
+    if (intersects(extent, this.canvas_.getExtent())) {
+      return this.canvas_;
+    }
+    return null;
+  };
+}
+
+export default Canvas;
diff --git a/resources/assets/js/annotations/snapInteraction.vue b/resources/assets/js/annotations/snapInteraction.vue
index 97d9ad4e9..794bd6898 100644
--- a/resources/assets/js/annotations/snapInteraction.vue
+++ b/resources/assets/js/annotations/snapInteraction.vue
@@ -1,8 +1,8 @@
 <script>
-import { Feature } from '@biigle/ol';
-import LineString from '@biigle/ol/geom/LineString';
-import { Snap } from '@biigle/ol/interaction';
-import Collection from '@biigle/ol/Collection';
+import { Feature } from 'ol';
+import LineString from 'ol/geom/LineString';
+import { Snap } from 'ol/interaction';
+import Collection from 'ol/Collection';
 
 export default {
     data() {
@@ -140,4 +140,4 @@ export default {
         })
     }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/assets/js/annotations/stores/styles.js b/resources/assets/js/annotations/stores/styles.js
index 71e726f8c..dc5057407 100644
--- a/resources/assets/js/annotations/stores/styles.js
+++ b/resources/assets/js/annotations/stores/styles.js
@@ -1,8 +1,8 @@
-import Circle from '@biigle/ol/style/Circle';
-import Fill from '@biigle/ol/style/Fill';
-import RegularShape from '@biigle/ol/style/RegularShape';
-import Stroke from '@biigle/ol/style/Stroke';
-import Style from '@biigle/ol/style/Style';
+import Circle from 'ol/style/Circle';
+import Fill from 'ol/style/Fill';
+import RegularShape from 'ol/style/RegularShape';
+import Stroke from 'ol/style/Stroke';
+import Style from 'ol/style/Style';
 
 /**
  * Store for the styles of OpenLayers features (annotations)
diff --git a/resources/assets/js/videos/components/videoScreen.vue b/resources/assets/js/videos/components/videoScreen.vue
index ca856b794..99004f7df 100644
--- a/resources/assets/js/videos/components/videoScreen.vue
+++ b/resources/assets/js/videos/components/videoScreen.vue
@@ -263,7 +263,7 @@
 
 <script>
 import AnnotationPlayback from './videoScreen/annotationPlayback';
-import Collection from '@biigle/ol/Collection';
+import Collection from 'ol/Collection';
 import ControlButton from '../../annotations/components/controlButton';
 import DrawInteractions from './videoScreen/drawInteractions';
 import Indicators from './videoScreen/indicators';
@@ -272,18 +272,18 @@ import {CancelableMap as Map} from '../../annotations/ol/CancelableMap';
 import Minimap from '../../annotations/components/minimap';
 import ModifyInteractions from './videoScreen/modifyInteractions';
 import PolygonBrushInteractions from './videoScreen/polygonBrushInteractions';
-import SelectInteraction from '@biigle/ol/interaction/Select';
+import SelectInteraction from 'ol/interaction/Select';
 import Styles from '../../annotations/stores/styles';
 import Tooltips from './videoScreen/tooltips';
-import VectorLayer from '@biigle/ol/layer/Vector';
-import VectorSource from '@biigle/ol/source/Vector';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
 import VideoPlayback from './videoScreen/videoPlayback';
-import ZoomControl from '@biigle/ol/control/Zoom';
-import ZoomToExtentControl from '@biigle/ol/control/ZoomToExtent';
+import ZoomControl from 'ol/control/Zoom';
+import ZoomToExtentControl from 'ol/control/ZoomToExtent';
 import ZoomToNativeControl from '../../annotations/ol/ZoomToNativeControl';
-import {click as clickCondition} from '@biigle/ol/events/condition';
-import {containsCoordinate} from '@biigle/ol/extent';
-import {defaults as defaultInteractions} from '@biigle/ol/interaction';
+import {click as clickCondition} from 'ol/events/condition';
+import {containsCoordinate} from 'ol/extent';
+import {defaults as defaultInteractions} from 'ol/interaction';
 
 export default {
     mixins: [
diff --git a/resources/assets/js/videos/components/videoScreen/annotationPlayback.vue b/resources/assets/js/videos/components/videoScreen/annotationPlayback.vue
index fa0f65cc2..8860d60bc 100644
--- a/resources/assets/js/videos/components/videoScreen/annotationPlayback.vue
+++ b/resources/assets/js/videos/components/videoScreen/annotationPlayback.vue
@@ -1,11 +1,11 @@
 <script>
-import Circle from '@biigle/ol/geom/Circle';
-import Ellipse from '@biigle/ol/geom/Ellipse';
-import Feature from '@biigle/ol/Feature';
-import LineString from '@biigle/ol/geom/LineString';
-import Point from '@biigle/ol/geom/Point';
-import Polygon from '@biigle/ol/geom/Polygon';
-import Rectangle from '@biigle/ol/geom/Rectangle';
+import Circle from 'ol/geom/Circle';
+// import Ellipse from 'ol/geom/Ellipse';
+import Feature from 'ol/Feature';
+import LineString from 'ol/geom/LineString';
+import Point from 'ol/geom/Point';
+import Polygon from 'ol/geom/Polygon';
+// import Rectangle from 'ol/geom/Rectangle';
 import {getRoundToPrecision} from '../../utils';
 
 /**
diff --git a/resources/assets/js/videos/components/videoScreen/drawInteractions.vue b/resources/assets/js/videos/components/videoScreen/drawInteractions.vue
index ebc9d1ede..c45325ea9 100644
--- a/resources/assets/js/videos/components/videoScreen/drawInteractions.vue
+++ b/resources/assets/js/videos/components/videoScreen/drawInteractions.vue
@@ -1,10 +1,10 @@
 <script>
 import {simplifyPolygon} from "../../../annotations/ol/PolygonValidator";
-import DrawInteraction from '@biigle/ol/interaction/Draw';
+import DrawInteraction from 'ol/interaction/Draw';
 import Keyboard from '../../../core/keyboard';
 import Styles from '../../../annotations/stores/styles';
-import VectorLayer from '@biigle/ol/layer/Vector';
-import VectorSource from '@biigle/ol/source/Vector';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
 import snapInteraction from "./snapInteraction.vue";
 import { isInvalidShape } from '../../../annotations/utils';
 
diff --git a/resources/assets/js/videos/components/videoScreen/modifyInteractions.vue b/resources/assets/js/videos/components/videoScreen/modifyInteractions.vue
index 4f7388c5e..97feff7c4 100644
--- a/resources/assets/js/videos/components/videoScreen/modifyInteractions.vue
+++ b/resources/assets/js/videos/components/videoScreen/modifyInteractions.vue
@@ -1,10 +1,10 @@
 <script>
 import AttachLabelInteraction from '../../../annotations/ol/AttachLabelInteraction';
 import Keyboard from '../../../core/keyboard';
-import ModifyInteraction from '@biigle/ol/interaction/Modify';
+import ModifyInteraction from 'ol/interaction/Modify';
 import TranslateInteraction from '../../../annotations/ol/TranslateInteraction';
-import {shiftKeyOnly as shiftKeyOnlyCondition} from '@biigle/ol/events/condition';
-import {singleClick as singleClickCondition} from '@biigle/ol/events/condition';
+import {shiftKeyOnly as shiftKeyOnlyCondition} from 'ol/events/condition';
+import {singleClick as singleClickCondition} from 'ol/events/condition';
 import {simplifyPolygon} from "../../../annotations/ol/PolygonValidator";
 import {isInvalidShape} from '../../../annotations/utils';
 
diff --git a/resources/assets/js/videos/components/videoScreen/polygonBrushInteractions.vue b/resources/assets/js/videos/components/videoScreen/polygonBrushInteractions.vue
index 5eedb72d9..1811ae427 100644
--- a/resources/assets/js/videos/components/videoScreen/polygonBrushInteractions.vue
+++ b/resources/assets/js/videos/components/videoScreen/polygonBrushInteractions.vue
@@ -1,14 +1,14 @@
 <script>
 import Keyboard from '../../../core/keyboard';
-import ModifyPolygonBrushInteraction from '@biigle/ol/interaction/ModifyPolygonBrush';
-import PolygonBrushInteraction from '@biigle/ol/interaction/PolygonBrush';
-import SelectInteraction from '@biigle/ol/interaction/Select';
+import ModifyPolygonBrushInteraction from '../../../annotations/ol/interaction/ModifyPolygonBrush';
+import PolygonBrushInteraction from '../../../annotations/ol/interaction/PolygonBrush';
+import SelectInteraction from 'ol/interaction/Select';
 import Styles from '../../../annotations/stores/styles';
-import {altKeyOnly as altKeyOnlyCondition} from '@biigle/ol/events/condition';
-import {click as clickCondition} from '@biigle/ol/events/condition';
-import {never as neverCondition} from '@biigle/ol/events/condition';
-import {noModifierKeys as noModifierKeysCondition} from '@biigle/ol/events/condition';
-import {shiftKeyOnly as shiftKeyOnlyCondition} from '@biigle/ol/events/condition';
+import {altKeyOnly as altKeyOnlyCondition} from 'ol/events/condition';
+import {click as clickCondition} from 'ol/events/condition';
+import {never as neverCondition} from 'ol/events/condition';
+import {noModifierKeys as noModifierKeysCondition} from 'ol/events/condition';
+import {shiftKeyOnly as shiftKeyOnlyCondition} from 'ol/events/condition';
 
 /**
  * Mixin for the videoScreen component that contains logic for the polygon brush
diff --git a/resources/assets/js/videos/components/videoScreen/videoPlayback.vue b/resources/assets/js/videos/components/videoScreen/videoPlayback.vue
index 9cf5babc1..cc514df96 100644
--- a/resources/assets/js/videos/components/videoScreen/videoPlayback.vue
+++ b/resources/assets/js/videos/components/videoScreen/videoPlayback.vue
@@ -1,10 +1,10 @@
 <script>
-import CanvasSource from '@biigle/ol/source/Canvas';
-import ImageLayer from '@biigle/ol/layer/Image';
+import CanvasSource from '../../../annotations/ol/source/Canvas';
+import ImageLayer from 'ol/layer/Image';
 import Keyboard from '../../../core/keyboard';
-import Projection from '@biigle/ol/proj/Projection';
-import View from '@biigle/ol/View';
-import {apply as applyTransform} from '@biigle/ol/transform';
+import Projection from 'ol/proj/Projection';
+import View from 'ol/View';
+import {apply as applyTransform} from 'ol/transform';
 
 /**
  * Mixin for the videoScreen component that contains logic for the video playback.

From f2853bf3f728eddbd4544bbd61fc5aa678fbb961 Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Fri, 28 Jun 2024 14:05:53 +0200
Subject: [PATCH 02/27] WIP Upgrade to OpenLayers v6

---
 package-lock.json                             | 392 ++++++++++++++----
 package.json                                  |   2 +-
 .../components/annotationCanvas.vue           |   6 +-
 .../js/annotations/components/minimap.vue     |  41 +-
 .../components/screenshotButton.vue           |  49 ++-
 .../js/annotations/ol/MagicWandInteraction.js |   2 +-
 .../ol/interaction/ModifyPolygonBrush.js      |   7 +-
 .../ol/interaction/PolygonBrush.js            |   9 +-
 .../assets/js/annotations/ol/source/Canvas.js |   7 +-
 .../components/videoScreen/videoPlayback.vue  |  32 +-
 10 files changed, 412 insertions(+), 135 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ea04cb730..e85580a16 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
         "echarts": "^5.3.2",
         "jsts": "^2.11.0",
         "magic-wand-tool": "^1.1.4",
-        "ol": "^5.3.3",
+        "ol": "^6.15.1",
         "polymorph-js": "^0.2.4",
         "uiv": "^1.2.4",
         "vue": "^2.0.5",
@@ -2224,6 +2224,45 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
       "dev": true
     },
+    "node_modules/@mapbox/jsonlint-lines-primitives": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@mapbox/mapbox-gl-style-spec": {
+      "version": "13.28.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.28.0.tgz",
+      "integrity": "sha512-B8xM7Fp1nh5kejfIl4SWeY0gtIeewbuRencqO3cJDrCHZpaPg7uY+V8abuR+esMeuOjRl5cLhVTP40v+1ywxbg==",
+      "dependencies": {
+        "@mapbox/jsonlint-lines-primitives": "~2.0.2",
+        "@mapbox/point-geometry": "^0.1.0",
+        "@mapbox/unitbezier": "^0.0.0",
+        "csscolorparser": "~1.0.2",
+        "json-stringify-pretty-compact": "^2.0.0",
+        "minimist": "^1.2.6",
+        "rw": "^1.3.3",
+        "sort-object": "^0.3.2"
+      },
+      "bin": {
+        "gl-style-composite": "bin/gl-style-composite.js",
+        "gl-style-format": "bin/gl-style-format.js",
+        "gl-style-migrate": "bin/gl-style-migrate.js",
+        "gl-style-validate": "bin/gl-style-validate.js"
+      }
+    },
+    "node_modules/@mapbox/point-geometry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
+    },
+    "node_modules/@mapbox/unitbezier": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
+      "integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA=="
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2259,6 +2298,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@petamoriken/float16": {
+      "version": "3.8.7",
+      "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.8.7.tgz",
+      "integrity": "sha512-/Ri4xDDpe12NT6Ex/DRgHzLlobiQXEW/hmG08w1wj/YU7hLemk97c+zHQFp0iZQ9r7YqgLEXZR2sls4HxBf9NA=="
+    },
     "node_modules/@sindresorhus/is": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.4.0.tgz",
@@ -4541,6 +4585,11 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/csscolorparser": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+      "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w=="
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -5944,19 +5993,29 @@
         "rbush": "^3.0.1"
       }
     },
-    "node_modules/geojson-rbush/node_modules/quickselect": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
-      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
-    },
-    "node_modules/geojson-rbush/node_modules/rbush": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
-      "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
+    "node_modules/geotiff": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.0.4.tgz",
+      "integrity": "sha512-aG8h9bJccGusioPsEWsEqx8qdXpZN71A20WCvRKGxcnHSOWLKmC5ZmsAmodfxb9TRQvs+89KikGuPzxchhA+Uw==",
       "dependencies": {
-        "quickselect": "^2.0.0"
+        "@petamoriken/float16": "^3.4.7",
+        "lerc": "^3.0.0",
+        "lru-cache": "^6.0.0",
+        "pako": "^2.0.4",
+        "parse-headers": "^2.0.2",
+        "web-worker": "^1.2.0",
+        "xml-utils": "^1.0.2"
+      },
+      "engines": {
+        "browsers": "defaults",
+        "node": ">=10.19"
       }
     },
+    "node_modules/geotiff/node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -6995,6 +7054,11 @@
       "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
       "dev": true
     },
+    "node_modules/json-stringify-pretty-compact": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
+      "integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ=="
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -7252,6 +7316,11 @@
         "shell-quote": "^1.8.1"
       }
     },
+    "node_modules/lerc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz",
+      "integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww=="
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -7384,7 +7453,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -7421,6 +7489,11 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/mapbox-to-css-font": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-2.4.4.tgz",
+      "integrity": "sha512-X1dtuTuH2D1MRMuductMZCLV/fy9EoIgqW/lmu8vQSAhEatx/tdFebkYT3TVhdTwqFDHbLEgQBD3IKA4KI7aoQ=="
+    },
     "node_modules/md5": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
@@ -7680,8 +7753,7 @@
     "node_modules/minimist": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
-      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
-      "dev": true
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
     },
     "node_modules/ms": {
       "version": "2.1.2",
@@ -7912,13 +7984,27 @@
       "dev": true
     },
     "node_modules/ol": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/ol/-/ol-5.3.3.tgz",
-      "integrity": "sha512-7eU4x8YMduNcED1D5wI+AMWDRe7/1HmGfsbV+kFFROI9RNABU/6n4osj6Q3trZbxxKnK2DSRIjIRGwRHT/Z+Ww==",
+      "version": "6.15.1",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-6.15.1.tgz",
+      "integrity": "sha512-ZG2CKTpJ8Q+tPywYysVwPk+yevwJzlbwjRKhoCvd7kLVWMbfBl1O/+Kg/yrZZrhG9FNXbFH4GeOZ5yVRqo3P4w==",
+      "dependencies": {
+        "geotiff": "2.0.4",
+        "ol-mapbox-style": "^8.0.5",
+        "pbf": "3.2.1",
+        "rbush": "^3.0.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/openlayers"
+      }
+    },
+    "node_modules/ol-mapbox-style": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-8.2.1.tgz",
+      "integrity": "sha512-3kBBuZC627vDL8vnUdfVbCbfkhkcZj2kXPHQcuLhC4JJEA+XkEVEtEde8x8+AZctRbHwBkSiubTPaRukgLxIRw==",
       "dependencies": {
-        "pbf": "3.1.0",
-        "pixelworks": "1.1.0",
-        "rbush": "2.0.2"
+        "@mapbox/mapbox-gl-style-spec": "^13.23.1",
+        "mapbox-to-css-font": "^2.4.1"
       }
     },
     "node_modules/on-finished": {
@@ -8115,6 +8201,11 @@
         "safe-buffer": "^5.1.1"
       }
     },
+    "node_modules/parse-headers": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.5.tgz",
+      "integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA=="
+    },
     "node_modules/parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -8207,12 +8298,12 @@
       }
     },
     "node_modules/pbf": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.1.0.tgz",
-      "integrity": "sha512-/hYJmIsTmh7fMkHAWWXJ5b8IKLWdjdlAFb3IHkRBn1XUhIYBChVGfVwmHEAV3UfXTxsP/AKfYTXTS/dCPxJd5w==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+      "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
       "dependencies": {
-        "ieee754": "^1.1.6",
-        "resolve-protobuf-schema": "^2.0.0"
+        "ieee754": "^1.1.12",
+        "resolve-protobuf-schema": "^2.1.0"
       },
       "bin": {
         "pbf": "bin/pbf"
@@ -8252,11 +8343,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/pixelworks": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/pixelworks/-/pixelworks-1.1.0.tgz",
-      "integrity": "sha512-nDqeyp0pvOvCihLsyc9GHWKP4THUtcfQ+qs61uiVaZdlNv0j7y6PWNyPfnTtuxMJ+MTAqff2QbbM/1DyCcRdOQ=="
-    },
     "node_modules/pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -9063,9 +9149,9 @@
       }
     },
     "node_modules/quickselect": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-1.1.1.tgz",
-      "integrity": "sha512-qN0Gqdw4c4KGPsBOQafj6yj/PA6c/L63f6CaZ/DCF/xF4Esu3jVmKLUDYxghFx8Kb/O7y9tI7x2RjTSXwdK1iQ=="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
     },
     "node_modules/randombytes": {
       "version": "2.1.0",
@@ -9120,11 +9206,11 @@
       }
     },
     "node_modules/rbush": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/rbush/-/rbush-2.0.2.tgz",
-      "integrity": "sha512-XBOuALcTm+O/H8G90b6pzu6nX6v2zCKiFG4BJho8a+bY6AER6t8uQUZdi5bomQc0AprCWhEGa7ncAbbRap0bRA==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
+      "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
       "dependencies": {
-        "quickselect": "^1.0.1"
+        "quickselect": "^2.0.0"
       }
     },
     "node_modules/readable-stream": {
@@ -9502,6 +9588,11 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
     "node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -9938,6 +10029,34 @@
         "websocket-driver": "^0.7.4"
       }
     },
+    "node_modules/sort-asc": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.1.0.tgz",
+      "integrity": "sha512-jBgdDd+rQ+HkZF2/OHCmace5dvpos/aWQpcxuyRs9QUbPRnkEJmYVo81PIGpjIdpOcsnJ4rGjStfDHsbn+UVyw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sort-desc": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.1.1.tgz",
+      "integrity": "sha512-jfZacW5SKOP97BF5rX5kQfJmRVZP5/adDUTY8fCSPvNcXDVpUEe2pr/iKGlcyZzchRJZrswnp68fgk3qBXgkJw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sort-object": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-0.3.2.tgz",
+      "integrity": "sha512-aAQiEdqFTTdsvUFxXm3umdo04J7MRljoVGbBlkH7BgNsMvVNAJyGj7C/wV1A8wHWAJj/YikeZbfuCKqhggNWGA==",
+      "dependencies": {
+        "sort-asc": "^0.1.0",
+        "sort-desc": "^0.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -10948,6 +11067,11 @@
         "minimalistic-assert": "^1.0.0"
       }
     },
+    "node_modules/web-worker": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.3.0.tgz",
+      "integrity": "sha512-BSR9wyRsy/KOValMgd5kMyr3JzpdeoR9KVId8u5GVlTTAtNChlsE4yTxeY7zMdNSyOmoKBv8NH2qeRY9Tg+IaA=="
+    },
     "node_modules/webpack": {
       "version": "5.76.1",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.76.1.tgz",
@@ -11429,6 +11553,11 @@
         }
       }
     },
+    "node_modules/xml-utils": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.10.1.tgz",
+      "integrity": "sha512-Dn6vJ1Z9v1tepSjvnCpwk5QqwIPcEFKdgnjqfYOABv1ngSofuAhtlugcUC3ehS1OHdgDWSG6C5mvj+Qm15udTQ=="
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -11450,8 +11579,7 @@
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "node_modules/yaml": {
       "version": "1.10.2",
@@ -13083,6 +13211,36 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
       "dev": true
     },
+    "@mapbox/jsonlint-lines-primitives": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ=="
+    },
+    "@mapbox/mapbox-gl-style-spec": {
+      "version": "13.28.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.28.0.tgz",
+      "integrity": "sha512-B8xM7Fp1nh5kejfIl4SWeY0gtIeewbuRencqO3cJDrCHZpaPg7uY+V8abuR+esMeuOjRl5cLhVTP40v+1ywxbg==",
+      "requires": {
+        "@mapbox/jsonlint-lines-primitives": "~2.0.2",
+        "@mapbox/point-geometry": "^0.1.0",
+        "@mapbox/unitbezier": "^0.0.0",
+        "csscolorparser": "~1.0.2",
+        "json-stringify-pretty-compact": "^2.0.0",
+        "minimist": "^1.2.6",
+        "rw": "^1.3.3",
+        "sort-object": "^0.3.2"
+      }
+    },
+    "@mapbox/point-geometry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
+    },
+    "@mapbox/unitbezier": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
+      "integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA=="
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -13109,6 +13267,11 @@
         "fastq": "^1.6.0"
       }
     },
+    "@petamoriken/float16": {
+      "version": "3.8.7",
+      "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.8.7.tgz",
+      "integrity": "sha512-/Ri4xDDpe12NT6Ex/DRgHzLlobiQXEW/hmG08w1wj/YU7hLemk97c+zHQFp0iZQ9r7YqgLEXZR2sls4HxBf9NA=="
+    },
     "@sindresorhus/is": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.4.0.tgz",
@@ -14990,6 +15153,11 @@
       "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==",
       "dev": true
     },
+    "csscolorparser": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+      "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w=="
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -16051,20 +16219,26 @@
         "@turf/meta": "6.x",
         "@types/geojson": "7946.0.8",
         "rbush": "^3.0.1"
-      },
-      "dependencies": {
-        "quickselect": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
-          "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
-        },
-        "rbush": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
-          "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
-          "requires": {
-            "quickselect": "^2.0.0"
-          }
+      }
+    },
+    "geotiff": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.0.4.tgz",
+      "integrity": "sha512-aG8h9bJccGusioPsEWsEqx8qdXpZN71A20WCvRKGxcnHSOWLKmC5ZmsAmodfxb9TRQvs+89KikGuPzxchhA+Uw==",
+      "requires": {
+        "@petamoriken/float16": "^3.4.7",
+        "lerc": "^3.0.0",
+        "lru-cache": "^6.0.0",
+        "pako": "^2.0.4",
+        "parse-headers": "^2.0.2",
+        "web-worker": "^1.2.0",
+        "xml-utils": "^1.0.2"
+      },
+      "dependencies": {
+        "pako": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+          "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
         }
       }
     },
@@ -16814,6 +16988,11 @@
       "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
       "dev": true
     },
+    "json-stringify-pretty-compact": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
+      "integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ=="
+    },
     "json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -17003,6 +17182,11 @@
         "shell-quote": "^1.8.1"
       }
     },
+    "lerc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz",
+      "integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww=="
+    },
     "levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -17116,7 +17300,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
       "requires": {
         "yallist": "^4.0.0"
       }
@@ -17143,6 +17326,11 @@
         }
       }
     },
+    "mapbox-to-css-font": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-2.4.4.tgz",
+      "integrity": "sha512-X1dtuTuH2D1MRMuductMZCLV/fy9EoIgqW/lmu8vQSAhEatx/tdFebkYT3TVhdTwqFDHbLEgQBD3IKA4KI7aoQ=="
+    },
     "md5": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
@@ -17346,8 +17534,7 @@
     "minimist": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
-      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
-      "dev": true
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
     },
     "ms": {
       "version": "2.1.2",
@@ -17524,13 +17711,23 @@
       "dev": true
     },
     "ol": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/ol/-/ol-5.3.3.tgz",
-      "integrity": "sha512-7eU4x8YMduNcED1D5wI+AMWDRe7/1HmGfsbV+kFFROI9RNABU/6n4osj6Q3trZbxxKnK2DSRIjIRGwRHT/Z+Ww==",
+      "version": "6.15.1",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-6.15.1.tgz",
+      "integrity": "sha512-ZG2CKTpJ8Q+tPywYysVwPk+yevwJzlbwjRKhoCvd7kLVWMbfBl1O/+Kg/yrZZrhG9FNXbFH4GeOZ5yVRqo3P4w==",
+      "requires": {
+        "geotiff": "2.0.4",
+        "ol-mapbox-style": "^8.0.5",
+        "pbf": "3.2.1",
+        "rbush": "^3.0.1"
+      }
+    },
+    "ol-mapbox-style": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-8.2.1.tgz",
+      "integrity": "sha512-3kBBuZC627vDL8vnUdfVbCbfkhkcZj2kXPHQcuLhC4JJEA+XkEVEtEde8x8+AZctRbHwBkSiubTPaRukgLxIRw==",
       "requires": {
-        "pbf": "3.1.0",
-        "pixelworks": "1.1.0",
-        "rbush": "2.0.2"
+        "@mapbox/mapbox-gl-style-spec": "^13.23.1",
+        "mapbox-to-css-font": "^2.4.1"
       }
     },
     "on-finished": {
@@ -17679,6 +17876,11 @@
         "safe-buffer": "^5.1.1"
       }
     },
+    "parse-headers": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.5.tgz",
+      "integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA=="
+    },
     "parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -17750,12 +17952,12 @@
       "dev": true
     },
     "pbf": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.1.0.tgz",
-      "integrity": "sha512-/hYJmIsTmh7fMkHAWWXJ5b8IKLWdjdlAFb3IHkRBn1XUhIYBChVGfVwmHEAV3UfXTxsP/AKfYTXTS/dCPxJd5w==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+      "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
       "requires": {
-        "ieee754": "^1.1.6",
-        "resolve-protobuf-schema": "^2.0.0"
+        "ieee754": "^1.1.12",
+        "resolve-protobuf-schema": "^2.1.0"
       }
     },
     "pbkdf2": {
@@ -17783,11 +17985,6 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
-    "pixelworks": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/pixelworks/-/pixelworks-1.1.0.tgz",
-      "integrity": "sha512-nDqeyp0pvOvCihLsyc9GHWKP4THUtcfQ+qs61uiVaZdlNv0j7y6PWNyPfnTtuxMJ+MTAqff2QbbM/1DyCcRdOQ=="
-    },
     "pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -18317,9 +18514,9 @@
       "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA=="
     },
     "quickselect": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-1.1.1.tgz",
-      "integrity": "sha512-qN0Gqdw4c4KGPsBOQafj6yj/PA6c/L63f6CaZ/DCF/xF4Esu3jVmKLUDYxghFx8Kb/O7y9tI7x2RjTSXwdK1iQ=="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
     },
     "randombytes": {
       "version": "2.1.0",
@@ -18367,11 +18564,11 @@
       }
     },
     "rbush": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/rbush/-/rbush-2.0.2.tgz",
-      "integrity": "sha512-XBOuALcTm+O/H8G90b6pzu6nX6v2zCKiFG4BJho8a+bY6AER6t8uQUZdi5bomQc0AprCWhEGa7ncAbbRap0bRA==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
+      "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
       "requires": {
-        "quickselect": "^1.0.1"
+        "quickselect": "^2.0.0"
       }
     },
     "readable-stream": {
@@ -18664,6 +18861,11 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -19005,6 +19207,25 @@
         "websocket-driver": "^0.7.4"
       }
     },
+    "sort-asc": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.1.0.tgz",
+      "integrity": "sha512-jBgdDd+rQ+HkZF2/OHCmace5dvpos/aWQpcxuyRs9QUbPRnkEJmYVo81PIGpjIdpOcsnJ4rGjStfDHsbn+UVyw=="
+    },
+    "sort-desc": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.1.1.tgz",
+      "integrity": "sha512-jfZacW5SKOP97BF5rX5kQfJmRVZP5/adDUTY8fCSPvNcXDVpUEe2pr/iKGlcyZzchRJZrswnp68fgk3qBXgkJw=="
+    },
+    "sort-object": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-0.3.2.tgz",
+      "integrity": "sha512-aAQiEdqFTTdsvUFxXm3umdo04J7MRljoVGbBlkH7BgNsMvVNAJyGj7C/wV1A8wHWAJj/YikeZbfuCKqhggNWGA==",
+      "requires": {
+        "sort-asc": "^0.1.0",
+        "sort-desc": "^0.1.1"
+      }
+    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -19746,6 +19967,11 @@
         "minimalistic-assert": "^1.0.0"
       }
     },
+    "web-worker": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.3.0.tgz",
+      "integrity": "sha512-BSR9wyRsy/KOValMgd5kMyr3JzpdeoR9KVId8u5GVlTTAtNChlsE4yTxeY7zMdNSyOmoKBv8NH2qeRY9Tg+IaA=="
+    },
     "webpack": {
       "version": "5.76.1",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.76.1.tgz",
@@ -20068,6 +20294,11 @@
       "dev": true,
       "requires": {}
     },
+    "xml-utils": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.10.1.tgz",
+      "integrity": "sha512-Dn6vJ1Z9v1tepSjvnCpwk5QqwIPcEFKdgnjqfYOABv1ngSofuAhtlugcUC3ehS1OHdgDWSG6C5mvj+Qm15udTQ=="
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -20083,8 +20314,7 @@
     "yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "yaml": {
       "version": "1.10.2",
diff --git a/package.json b/package.json
index ae7b82648..0395a7055 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "echarts": "^5.3.2",
     "jsts": "^2.11.0",
     "magic-wand-tool": "^1.1.4",
-    "ol": "^5.3.3",
+    "ol": "^6.15.1",
     "polymorph-js": "^0.2.4",
     "uiv": "^1.2.4",
     "vue": "^2.0.5",
diff --git a/resources/assets/js/annotations/components/annotationCanvas.vue b/resources/assets/js/annotations/components/annotationCanvas.vue
index 68d7a07a1..3acb55354 100644
--- a/resources/assets/js/annotations/components/annotationCanvas.vue
+++ b/resources/assets/js/annotations/components/annotationCanvas.vue
@@ -327,8 +327,6 @@ export default {
                 center: view.getCenter(),
                 resolution: view.getResolution(),
             });
-
-
         },
         invertPointsYAxis(points) {
             // Expects a points array like [x1, y1, x2, y2]. Inverts the y axis of
@@ -519,7 +517,7 @@ export default {
                 this.annotationSource.removeFeature(e.feature);
                 return;
             }
-            
+
             if (isInvalidShape(e.feature)) {
                 // This must be done in the change event handler.
                 // Not exactly sure why.
@@ -741,6 +739,8 @@ export default {
                 minResolution: 0.01,
                 // Restrict movement.
                 extent: extent,
+                showFullExtent: true,
+                constrainOnlyCenter: true,
             }));
 
             if (this.resolution === undefined) {
diff --git a/resources/assets/js/annotations/components/minimap.vue b/resources/assets/js/annotations/components/minimap.vue
index fd8282eff..8d12e0a35 100644
--- a/resources/assets/js/annotations/components/minimap.vue
+++ b/resources/assets/js/annotations/components/minimap.vue
@@ -4,11 +4,13 @@
 
 <script>
 import Feature from 'ol/Feature';
-import {CancelableMap as Map} from '../ol/CancelableMap';
+import ImageLayer from 'ol/layer/Image';
 import Styles from '../stores/styles';
+import TileLayer from 'ol/layer/Tile';
 import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
 import View from 'ol/View';
+import {CancelableMap as Map} from '../ol/CancelableMap';
 import {fromExtent} from 'ol/geom/Polygon';
 import {getCenter} from 'ol/extent';
 
@@ -38,7 +40,8 @@ export default {
     },
     data() {
         return {
-            //
+            originalLayer: null,
+            currentLayer: null,
         };
     },
     computed: {
@@ -48,7 +51,7 @@ export default {
         updateViewport() {
             // The map size and center might be undefined if the minimap is created
             // initially. This function will be called again once the map is ready.
-            if (this.mapSize && this.mapView.getCenter()) {
+            if (this.mapSize && this.mapView.getCenter() && this.mapView.getResolution()) {
                 this.viewport.setGeometry(fromExtent(this.mapView.calculateExtent(this.mapSize)));
             }
         },
@@ -57,6 +60,7 @@ export default {
         },
         updateMapSize(e) {
             this.mapSize = e.target.getSize();
+            this.updateViewport();
         },
         updateMapView(e) {
             if (this.mapView) {
@@ -66,6 +70,7 @@ export default {
             this.mapView = e.target.getView();
             this.mapView.on('change:center', this.updateViewport);
             this.mapView.on('change:resolution', this.updateViewport);
+            this.updateViewport();
         },
         updateElementSize() {
             let imageWidth = this.extent[2];
@@ -95,14 +100,34 @@ export default {
             // to update the layer here, too.
             let name = e.element.get('name');
             if (name && name.startsWith('image')) {
+                if (this.originalLayer) {
+                    this.originalLayer.un('change:source', this.handleChangeSource);
+                }
+                this.originalLayer = e.element;
+                if (this.originalLayer instanceof TileLayer) {
+                    this.currentLayer = new TileLayer({
+                        source: this.originalLayer.getSource()
+                    });
+                } else {
+                    this.currentLayer = new ImageLayer({
+                        source: this.originalLayer.getSource()
+                    });
+                }
+                this.originalLayer.on('change:source', this.handleChangeSource);
+
                 let layers = this.minimap.getLayers();
                 if (layers.getLength() > 1) {
-                    layers.setAt(0, e.element);
+                    layers.setAt(0, this.currentLayer);
                 } else {
-                    layers.insertAt(0, e.element);
+                    layers.insertAt(0, this.currentLayer);
                 }
             }
         },
+        handleChangeSource(e) {
+            if (this.currentLayer) {
+                this.currentLayer.setSource(e.target.getSource());
+            }
+        },
         initImageLayer(layers) {
             layers.getArray().forEach((layer) => {
                 this.refreshImageLayer({element: layer});
@@ -145,8 +170,6 @@ export default {
         this.updateMapView({target: map});
         map.on('change:size', this.updateMapSize);
         map.on('change:view', this.updateMapView);
-        // Initialize the viewport once.
-        map.once('postcompose', this.updateViewport);
 
         // Add the viewport layer now. Add the image layer later when it was
         // added to the map.
@@ -159,7 +182,7 @@ export default {
         this.minimap.on('click', this.dragViewport);
         this.initImageLayer(map.getLayers());
 
-        this.$parent.$on('render', this.render);
+        map.on('postrender', this.render);
     },
     mounted() {
         this.updateElementSize();
@@ -175,7 +198,7 @@ export default {
         map.un('change:size', this.updateMapSize);
         map.un('change:view', this.updateMapView);
         map.getLayers().un('add', this.refreshImageLayer);
-        this.$parent.$off('render', this.render);
+        map.un('postrender', this.render);
     },
 };
 </script>
diff --git a/resources/assets/js/annotations/components/screenshotButton.vue b/resources/assets/js/annotations/components/screenshotButton.vue
index d3b75f5bd..29509a674 100644
--- a/resources/assets/js/annotations/components/screenshotButton.vue
+++ b/resources/assets/js/annotations/components/screenshotButton.vue
@@ -124,14 +124,53 @@ export default {
         },
         capture() {
             if (this.map) {
-                this.map.once('postcompose', (e) => {
-                    this.makeBlob(e.context.canvas)
-                        .then(this.download)
-                        .catch(this.handleError);
-                });
+                this.map.once('rendercomplete', this.handleRenderComplete);
                 this.map.renderSync();
             }
         },
+        handleRenderComplete(e) {
+            // See: https://openlayers.org/en/v6.15.1/examples/export-map.html
+            const mapCanvas = document.createElement('canvas');
+            const size = e.target.getSize();
+            mapCanvas.width = size[0];
+            mapCanvas.height = size[1];
+            const mapContext = mapCanvas.getContext('2d');
+            Array.prototype.forEach.call(
+                e.target.getViewport().querySelectorAll('.ol-layer canvas, canvas.ol-layer'),
+                function (canvas) {
+                    if (canvas.width <= 0) {
+                        return;
+                    }
+
+                    let matrix;
+                    const transform = canvas.style.transform;
+                    if (transform) {
+                        // Get the transform parameters from the style's transform matrix
+                        matrix = transform
+                            .match(/^matrix\(([^\(]*)\)$/)[1]
+                            .split(',')
+                            .map(Number);
+                    } else {
+                        matrix = [
+                            parseFloat(canvas.style.width) / canvas.width,
+                            0,
+                            0,
+                            parseFloat(canvas.style.height) / canvas.height,
+                            0,
+                            0,
+                        ];
+                    }
+                    // Apply the transform to the export map context
+                    CanvasRenderingContext2D.prototype.setTransform.apply(
+                        mapContext,
+                        matrix
+                    );
+                    mapContext.drawImage(canvas, 0, 0);
+                }
+            );
+
+            this.makeBlob(mapCanvas).then(this.download).catch(this.handleError);
+        },
         handleError(message) {
             Messages.danger(message);
         },
diff --git a/resources/assets/js/annotations/ol/MagicWandInteraction.js b/resources/assets/js/annotations/ol/MagicWandInteraction.js
index 443ab096e..9a4473eeb 100644
--- a/resources/assets/js/annotations/ol/MagicWandInteraction.js
+++ b/resources/assets/js/annotations/ol/MagicWandInteraction.js
@@ -302,7 +302,7 @@ class MagicWandInteraction extends PointerInteraction {
      */
     updateSnapshot() {
         if (!this.updatingSnapshot && this.layer) {
-            this.layer.once('postcompose', this.updateSnapshotCanvas.bind(this));
+            this.layer.once('postrender', this.updateSnapshotCanvas.bind(this));
             // Set flag to avoid infinite recursion since renderSync will trigger the
             // moveend event again!
             this.updatingSnapshot = true;
diff --git a/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js b/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js
index 187a1bc15..c061958d8 100644
--- a/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js
+++ b/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js
@@ -3,7 +3,6 @@ import booleanContains from '@turf/boolean-contains';
 import booleanOverlap from '@turf/boolean-overlap';
 import Feature from 'ol/Feature';
 import EventType from 'ol/events/EventType';
-import GeometryType from 'ol/geom/GeometryType';
 import Circle from 'ol/geom/Circle';
 import Polygon from 'ol/geom/Polygon';
 import {createEditingStyle} from 'ol/style/Style';
@@ -168,13 +167,13 @@ class ModifyPolygonBrush extends Modify {
 
   startSubtracting_(event) {
     this.isSubtracting_ = true;
-    this.willModifyFeatures_(event);
+    // this.willModifyFeatures_(event, []);
     this.subtractCurrentFeatures_(event);
   }
 
   startAdding_(event) {
     this.isAdding_ = true;
-    this.willModifyFeatures_(event);
+    // this.willModifyFeatures_(event, []);
     this.addCurrentFeatures_(event);
   }
 
@@ -256,7 +255,7 @@ function getDefaultStyleFunction() {
   const style = createEditingStyle();
 
   return function(feature, resolution) {
-    return style[GeometryType.CIRCLE];
+    return style['Circle'];
   }
 }
 
diff --git a/resources/assets/js/annotations/ol/interaction/PolygonBrush.js b/resources/assets/js/annotations/ol/interaction/PolygonBrush.js
index ea4a67c61..83f989fc7 100644
--- a/resources/assets/js/annotations/ol/interaction/PolygonBrush.js
+++ b/resources/assets/js/annotations/ol/interaction/PolygonBrush.js
@@ -5,7 +5,6 @@ import Draw from 'ol/interaction/Draw';
 import Event from 'ol/events/Event.js';
 import EventType from 'ol/events/EventType';
 import Feature from 'ol/Feature';
-import GeometryType from 'ol/geom/GeometryType';
 import MapBrowserEventType from 'ol/MapBrowserEventType';
 import VectorLayer from 'ol/layer/Vector';
 import {always} from 'ol/events/condition';
@@ -101,6 +100,8 @@ class PolygonBrush extends Draw {
     options.freehandCondition = options.freehandCondition ?
       options.freehandCondition : penOnly;
 
+    options.type = 'Polygon';
+
     super(options);
 
     // Override the default overlay to set updateWhileAnimating.
@@ -282,9 +283,9 @@ class PolygonBrush extends Draw {
 
 function getDefaultStyleFunction() {
   let styles = createEditingStyle();
-  styles[GeometryType.POLYGON] =
-      styles[GeometryType.POLYGON].concat(
-        styles[GeometryType.LINE_STRING]
+  styles['Polygon'] =
+      styles['Polygon'].concat(
+        styles['LineString']
       );
 
   return function(feature, resolution) {
diff --git a/resources/assets/js/annotations/ol/source/Canvas.js b/resources/assets/js/annotations/ol/source/Canvas.js
index 03ec86f56..d1d0882fa 100644
--- a/resources/assets/js/annotations/ol/source/Canvas.js
+++ b/resources/assets/js/annotations/ol/source/Canvas.js
@@ -42,10 +42,9 @@ class Canvas extends Image {
    * @inheritDoc
    */
   getImageInternal(extent, resolution, pixelRatio, projection) {
-    if (intersects(extent, this.canvas_.getExtent())) {
-      return this.canvas_;
-    }
-    return null;
+    // No need to check if extent intersects canvas. The canvas is always visible
+    // in our apllication.
+    return this.canvas_;
   };
 }
 
diff --git a/resources/assets/js/videos/components/videoScreen/videoPlayback.vue b/resources/assets/js/videos/components/videoScreen/videoPlayback.vue
index cc514df96..7bb370e5a 100644
--- a/resources/assets/js/videos/components/videoScreen/videoPlayback.vue
+++ b/resources/assets/js/videos/components/videoScreen/videoPlayback.vue
@@ -41,35 +41,19 @@ export default {
                 this.map.removeLayer(this.videoLayer);
             }
 
+            this.videoCanvas.width = this.extent[2];
+            this.videoCanvas.height = this.extent[3];
+
             this.videoLayer = new ImageLayer({
                 name: 'image', // required by the minimap component
                 source: new CanvasSource({
-                    canvas: this.dummyCanvas,
+                    canvas: this.videoCanvas,
                     projection: projection,
                     canvasExtent: this.extent,
                     canvasSize: [this.extent[2], this.extent[3]],
                 }),
             });
 
-            // Based on this: https://stackoverflow.com/a/42902773/1796523
-            this.videoLayer.on('postcompose', (event) => {
-                let frameState = event.frameState;
-                let resolution = frameState.viewState.resolution;
-                // Custom implementation of "map.getPixelFromCoordinate" because this
-                // layer is rendered both on the map of the main view and on the map of
-                // the minimap component (i.e. the map changes).
-                let origin = applyTransform(
-                    frameState.coordinateToPixelTransform,
-                    [0, this.extent[3]]
-                );
-                let context = event.context;
-                context.save();
-                context.scale(frameState.pixelRatio, frameState.pixelRatio);
-                context.translate(origin[0], origin[1]);
-                context.drawImage(this.video, 0, 0, this.extent[2] / resolution, this.extent[3] / resolution);
-                context.restore();
-            });
-
             // The video layer should always be the first layer, otherwise it will be
             // rendered e.g. above the annotations.
             this.map.getLayers().insertAt(0, this.videoLayer);
@@ -81,6 +65,8 @@ export default {
                 // zoomFactor: 2,
                 minResolution: this.minResolution,
                 extent: this.extent,
+                showFullExtent: true,
+                constrainOnlyCenter: true,
             }));
 
             this.map.getView().fit(this.extent);
@@ -89,6 +75,7 @@ export default {
             // Drop animation frame if the time has not changed.
             if (force || this.renderCurrentTime !== this.video.currentTime) {
                 this.renderCurrentTime = this.video.currentTime;
+                this.videoContext.drawImage(this.video, 0, 0, this.videoCanvas.width, this.videoCanvas.height);
                 this.videoLayer.changed();
 
                 let now = Date.now();
@@ -250,9 +237,8 @@ export default {
         },
     },
     created() {
-        this.dummyCanvas = document.createElement('canvas');
-        this.dummyCanvas.width = 1;
-        this.dummyCanvas.height = 1;
+        this.videoCanvas = document.createElement('canvas');
+        this.videoContext = this.videoCanvas.getContext('2d');
         this.video.addEventListener('play', this.setPlaying);
         this.video.addEventListener('pause', this.setPaused);
         this.video.addEventListener('seeked', this.handleSeeked);

From 7dda9c0a3f6359ce179440f5381ffddae7135614 Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Tue, 2 Jul 2024 13:26:43 +0200
Subject: [PATCH 03/27] Improve video (minimap) rendering

---
 .../js/annotations/components/minimap.vue       | 17 -----------------
 .../assets/js/videos/components/videoScreen.vue |  1 -
 .../components/videoScreen/videoPlayback.vue    | 16 +++++++++-------
 3 files changed, 9 insertions(+), 25 deletions(-)

diff --git a/resources/assets/js/annotations/components/minimap.vue b/resources/assets/js/annotations/components/minimap.vue
index 8d12e0a35..30b35323c 100644
--- a/resources/assets/js/annotations/components/minimap.vue
+++ b/resources/assets/js/annotations/components/minimap.vue
@@ -33,10 +33,6 @@ export default {
             type: Number,
             default: 200,
         },
-        renderActive: {
-            type: Boolean,
-            default: true,
-        },
     },
     data() {
         return {
@@ -133,22 +129,12 @@ export default {
                 this.refreshImageLayer({element: layer});
             });
         },
-        render() {
-            this.minimap.render();
-        },
     },
     watch: {
         // Refresh the view if the extent (i.e. image size) changed.
         extent() {
             this.updateElementSize();
         },
-        renderActive(render) {
-            if (render) {
-                this.minimap.render();
-            } else {
-                this.minimap.cancelRender();
-            }
-        },
     },
     created() {
         this.minimap = new Map({
@@ -181,8 +167,6 @@ export default {
         this.minimap.on('pointerdrag', this.dragViewport);
         this.minimap.on('click', this.dragViewport);
         this.initImageLayer(map.getLayers());
-
-        map.on('postrender', this.render);
     },
     mounted() {
         this.updateElementSize();
@@ -198,7 +182,6 @@ export default {
         map.un('change:size', this.updateMapSize);
         map.un('change:view', this.updateMapView);
         map.getLayers().un('add', this.refreshImageLayer);
-        map.un('postrender', this.render);
     },
 };
 </script>
diff --git a/resources/assets/js/videos/components/videoScreen.vue b/resources/assets/js/videos/components/videoScreen.vue
index 99004f7df..4aa849285 100644
--- a/resources/assets/js/videos/components/videoScreen.vue
+++ b/resources/assets/js/videos/components/videoScreen.vue
@@ -3,7 +3,6 @@
         <minimap
             v-if="showMinimap && !hasError"
             :extent="extent"
-            :render-active="!seeking"
             ></minimap>
         <label-tooltip
             watch="hoverFeatures"
diff --git a/resources/assets/js/videos/components/videoScreen/videoPlayback.vue b/resources/assets/js/videos/components/videoScreen/videoPlayback.vue
index 7bb370e5a..28b5b44f3 100644
--- a/resources/assets/js/videos/components/videoScreen/videoPlayback.vue
+++ b/resources/assets/js/videos/components/videoScreen/videoPlayback.vue
@@ -44,14 +44,16 @@ export default {
             this.videoCanvas.width = this.extent[2];
             this.videoCanvas.height = this.extent[3];
 
+            this.videoSource = new CanvasSource({
+                canvas: this.videoCanvas,
+                projection: projection,
+                canvasExtent: this.extent,
+                canvasSize: [this.extent[2], this.extent[3]],
+            });
+
             this.videoLayer = new ImageLayer({
                 name: 'image', // required by the minimap component
-                source: new CanvasSource({
-                    canvas: this.videoCanvas,
-                    projection: projection,
-                    canvasExtent: this.extent,
-                    canvasSize: [this.extent[2], this.extent[3]],
-                }),
+                source: this.videoSource,
             });
 
             // The video layer should always be the first layer, otherwise it will be
@@ -76,7 +78,7 @@ export default {
             if (force || this.renderCurrentTime !== this.video.currentTime) {
                 this.renderCurrentTime = this.video.currentTime;
                 this.videoContext.drawImage(this.video, 0, 0, this.videoCanvas.width, this.videoCanvas.height);
-                this.videoLayer.changed();
+                this.videoSource.changed();
 
                 let now = Date.now();
                 if (force || (now - this.refreshLastTime) >= this.refreshRate) {

From 57db566f7ca1ebe5674573d29a55b0b7757686d2 Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Tue, 2 Jul 2024 13:53:09 +0200
Subject: [PATCH 04/27] Fix size of OpenLayers controls

---
 resources/assets/sass/annotations/_ol.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/resources/assets/sass/annotations/_ol.scss b/resources/assets/sass/annotations/_ol.scss
index 783a30402..5498b450a 100644
--- a/resources/assets/sass/annotations/_ol.scss
+++ b/resources/assets/sass/annotations/_ol.scss
@@ -17,3 +17,8 @@
         @extend %custom-icon;
     }
 }
+
+.ol-control button {
+    // Keep same size than of OL5.
+    font-size: 1.14em !important;
+}

From 04bbea8e12585aa4c6302b29963235f6f5558105 Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Tue, 2 Jul 2024 15:42:50 +0200
Subject: [PATCH 05/27] Fix magic wand snapshot update behavior

---
 resources/assets/js/annotations/ol/MagicWandInteraction.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/resources/assets/js/annotations/ol/MagicWandInteraction.js b/resources/assets/js/annotations/ol/MagicWandInteraction.js
index 9a4473eeb..8743ce00b 100644
--- a/resources/assets/js/annotations/ol/MagicWandInteraction.js
+++ b/resources/assets/js/annotations/ol/MagicWandInteraction.js
@@ -118,6 +118,8 @@ class MagicWandInteraction extends PointerInteraction {
             zIndex: 200,
         }));
 
+        this.snapshotListener = this.updateSnapshot.bind(this);
+
         // Update the snapshot and set event listeners if the interaction is active.
         this.toggleActive();
     }
@@ -283,10 +285,10 @@ class MagicWandInteraction extends PointerInteraction {
      */
     toggleActive() {
         if (this.getActive()) {
-            this.map.on(['moveend', 'change:size'], this.updateSnapshot.bind(this));
+            this.map.on(['moveend', 'change:size'], this.snapshotListener);
             this.updateSnapshot();
         } else {
-            this.map.un(['moveend', 'change:size'], this.updateSnapshot.bind(this));
+            this.map.un(['moveend', 'change:size'], this.snapshotListener);
             this.indicatorSource.clear();
             this.isShowingPoint = false;
             this.isShowingCross = false;

From c5bb3d5a5ac3bb945ef9c19d25ca42e5c206d5b4 Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Tue, 2 Jul 2024 16:33:55 +0200
Subject: [PATCH 06/27] Remove unnecessary fallback

---
 .../components/annotationCanvas/annotationTooltip.vue           | 2 +-
 resources/assets/js/videos/components/videoScreen/tooltips.vue  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/assets/js/annotations/components/annotationCanvas/annotationTooltip.vue b/resources/assets/js/annotations/components/annotationCanvas/annotationTooltip.vue
index ccee4344b..f06fec913 100644
--- a/resources/assets/js/annotations/components/annotationCanvas/annotationTooltip.vue
+++ b/resources/assets/js/annotations/components/annotationCanvas/annotationTooltip.vue
@@ -38,7 +38,7 @@ export default {
             return layer.get('name') === 'annotations';
         },
         updateHoveredAnnotations(e) {
-            let features = this.map.getFeaturesAtPixel(e.pixel, {layerFilter: this.annotationLayerFilter}) || [];
+            let features = this.map.getFeaturesAtPixel(e.pixel, {layerFilter: this.annotationLayerFilter});
             let hash = features.map((f) => f.getId()).join('-');
 
             if (this.hoveredFeaturesHash !== hash) {
diff --git a/resources/assets/js/videos/components/videoScreen/tooltips.vue b/resources/assets/js/videos/components/videoScreen/tooltips.vue
index 732757573..2a7650c46 100644
--- a/resources/assets/js/videos/components/videoScreen/tooltips.vue
+++ b/resources/assets/js/videos/components/videoScreen/tooltips.vue
@@ -26,7 +26,7 @@ export default {
             return layer.get('name') === 'annotations';
         },
         updateHoveredAnnotations(e) {
-            let features = this.map.getFeaturesAtPixel(e.pixel, {layerFilter: this.annotationLayerFilter}) || [];
+            let features = this.map.getFeaturesAtPixel(e.pixel, {layerFilter: this.annotationLayerFilter});
             let hash = features.map((f) => f.getId()).join('-');
 
             if (this.hoveredFeaturesHash !== hash) {

From 5724449aaef623d34df7b17a9acac37825e37ac7 Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Wed, 3 Jul 2024 15:18:25 +0200
Subject: [PATCH 07/27] Upgrade to OpenLayers v7

---
 package-lock.json | 109 ++++++++++++++++++++++++++++++++--------------
 package.json      |   2 +-
 2 files changed, 78 insertions(+), 33 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e85580a16..b3f464704 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
         "echarts": "^5.3.2",
         "jsts": "^2.11.0",
         "magic-wand-tool": "^1.1.4",
-        "ol": "^6.15.1",
+        "ol": "^7.5.2",
         "polymorph-js": "^0.2.4",
         "uiv": "^1.2.4",
         "vue": "^2.0.5",
@@ -5032,6 +5032,11 @@
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
       "dev": true
     },
+    "node_modules/earcut": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
+    },
     "node_modules/echarts": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.2.tgz",
@@ -5994,20 +5999,20 @@
       }
     },
     "node_modules/geotiff": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.0.4.tgz",
-      "integrity": "sha512-aG8h9bJccGusioPsEWsEqx8qdXpZN71A20WCvRKGxcnHSOWLKmC5ZmsAmodfxb9TRQvs+89KikGuPzxchhA+Uw==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.1.3.tgz",
+      "integrity": "sha512-PT6uoF5a1+kbC3tHmZSUsLHBp2QJlHasxxxxPW47QIY1VBKpFB+FcDvX+MxER6UzgLQZ0xDzJ9s48B9JbOCTqA==",
       "dependencies": {
         "@petamoriken/float16": "^3.4.7",
         "lerc": "^3.0.0",
-        "lru-cache": "^6.0.0",
         "pako": "^2.0.4",
         "parse-headers": "^2.0.2",
+        "quick-lru": "^6.1.1",
         "web-worker": "^1.2.0",
-        "xml-utils": "^1.0.2"
+        "xml-utils": "^1.0.2",
+        "zstddec": "^0.1.0"
       },
       "engines": {
-        "browsers": "defaults",
         "node": ">=10.19"
       }
     },
@@ -6016,6 +6021,17 @@
       "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
       "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
     },
+    "node_modules/geotiff/node_modules/quick-lru": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-6.1.2.tgz",
+      "integrity": "sha512-AAFUA5O1d83pIHEhJwWCq/RQcRukCkn/NSm2QsTEMle5f2hP0ChI2+3Xb051PZCkLryI/Ir1MVKviT2FIloaTQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -7453,6 +7469,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -7984,12 +8001,13 @@
       "dev": true
     },
     "node_modules/ol": {
-      "version": "6.15.1",
-      "resolved": "https://registry.npmjs.org/ol/-/ol-6.15.1.tgz",
-      "integrity": "sha512-ZG2CKTpJ8Q+tPywYysVwPk+yevwJzlbwjRKhoCvd7kLVWMbfBl1O/+Kg/yrZZrhG9FNXbFH4GeOZ5yVRqo3P4w==",
+      "version": "7.5.2",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-7.5.2.tgz",
+      "integrity": "sha512-HJbb3CxXrksM6ct367LsP3N+uh+iBBMdP3DeGGipdV9YAYTP0vTJzqGnoqQ6C2IW4qf8krw9yuyQbc9fjOIaOQ==",
       "dependencies": {
-        "geotiff": "2.0.4",
-        "ol-mapbox-style": "^8.0.5",
+        "earcut": "^2.2.3",
+        "geotiff": "^2.0.7",
+        "ol-mapbox-style": "^10.1.0",
         "pbf": "3.2.1",
         "rbush": "^3.0.1"
       },
@@ -7999,12 +8017,13 @@
       }
     },
     "node_modules/ol-mapbox-style": {
-      "version": "8.2.1",
-      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-8.2.1.tgz",
-      "integrity": "sha512-3kBBuZC627vDL8vnUdfVbCbfkhkcZj2kXPHQcuLhC4JJEA+XkEVEtEde8x8+AZctRbHwBkSiubTPaRukgLxIRw==",
+      "version": "10.7.0",
+      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-10.7.0.tgz",
+      "integrity": "sha512-S/UdYBuOjrotcR95Iq9AejGYbifKeZE85D9VtH11ryJLQPTZXZSW1J5bIXcr4AlAH6tyjPPHTK34AdkwB32Myw==",
       "dependencies": {
         "@mapbox/mapbox-gl-style-spec": "^13.23.1",
-        "mapbox-to-css-font": "^2.4.1"
+        "mapbox-to-css-font": "^2.4.1",
+        "ol": "^7.3.0"
       }
     },
     "node_modules/on-finished": {
@@ -11579,7 +11598,8 @@
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
     },
     "node_modules/yaml": {
       "version": "1.10.2",
@@ -11629,6 +11649,11 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
       "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
+    "node_modules/zstddec": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/zstddec/-/zstddec-0.1.0.tgz",
+      "integrity": "sha512-w2NTI8+3l3eeltKAdK8QpiLo/flRAr2p8AGeakfMZOXBxOg9HIu4LVDxBi81sYgVhFhdJjv1OrB5ssI8uFPoLg=="
     }
   },
   "dependencies": {
@@ -15478,6 +15503,11 @@
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
       "dev": true
     },
+    "earcut": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
+    },
     "echarts": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.2.tgz",
@@ -16222,23 +16252,29 @@
       }
     },
     "geotiff": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.0.4.tgz",
-      "integrity": "sha512-aG8h9bJccGusioPsEWsEqx8qdXpZN71A20WCvRKGxcnHSOWLKmC5ZmsAmodfxb9TRQvs+89KikGuPzxchhA+Uw==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.1.3.tgz",
+      "integrity": "sha512-PT6uoF5a1+kbC3tHmZSUsLHBp2QJlHasxxxxPW47QIY1VBKpFB+FcDvX+MxER6UzgLQZ0xDzJ9s48B9JbOCTqA==",
       "requires": {
         "@petamoriken/float16": "^3.4.7",
         "lerc": "^3.0.0",
-        "lru-cache": "^6.0.0",
         "pako": "^2.0.4",
         "parse-headers": "^2.0.2",
+        "quick-lru": "^6.1.1",
         "web-worker": "^1.2.0",
-        "xml-utils": "^1.0.2"
+        "xml-utils": "^1.0.2",
+        "zstddec": "^0.1.0"
       },
       "dependencies": {
         "pako": {
           "version": "2.1.0",
           "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
           "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
+        },
+        "quick-lru": {
+          "version": "6.1.2",
+          "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-6.1.2.tgz",
+          "integrity": "sha512-AAFUA5O1d83pIHEhJwWCq/RQcRukCkn/NSm2QsTEMle5f2hP0ChI2+3Xb051PZCkLryI/Ir1MVKviT2FIloaTQ=="
         }
       }
     },
@@ -17300,6 +17336,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
       "requires": {
         "yallist": "^4.0.0"
       }
@@ -17711,23 +17748,25 @@
       "dev": true
     },
     "ol": {
-      "version": "6.15.1",
-      "resolved": "https://registry.npmjs.org/ol/-/ol-6.15.1.tgz",
-      "integrity": "sha512-ZG2CKTpJ8Q+tPywYysVwPk+yevwJzlbwjRKhoCvd7kLVWMbfBl1O/+Kg/yrZZrhG9FNXbFH4GeOZ5yVRqo3P4w==",
+      "version": "7.5.2",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-7.5.2.tgz",
+      "integrity": "sha512-HJbb3CxXrksM6ct367LsP3N+uh+iBBMdP3DeGGipdV9YAYTP0vTJzqGnoqQ6C2IW4qf8krw9yuyQbc9fjOIaOQ==",
       "requires": {
-        "geotiff": "2.0.4",
-        "ol-mapbox-style": "^8.0.5",
+        "earcut": "^2.2.3",
+        "geotiff": "^2.0.7",
+        "ol-mapbox-style": "^10.1.0",
         "pbf": "3.2.1",
         "rbush": "^3.0.1"
       }
     },
     "ol-mapbox-style": {
-      "version": "8.2.1",
-      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-8.2.1.tgz",
-      "integrity": "sha512-3kBBuZC627vDL8vnUdfVbCbfkhkcZj2kXPHQcuLhC4JJEA+XkEVEtEde8x8+AZctRbHwBkSiubTPaRukgLxIRw==",
+      "version": "10.7.0",
+      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-10.7.0.tgz",
+      "integrity": "sha512-S/UdYBuOjrotcR95Iq9AejGYbifKeZE85D9VtH11ryJLQPTZXZSW1J5bIXcr4AlAH6tyjPPHTK34AdkwB32Myw==",
       "requires": {
         "@mapbox/mapbox-gl-style-spec": "^13.23.1",
-        "mapbox-to-css-font": "^2.4.1"
+        "mapbox-to-css-font": "^2.4.1",
+        "ol": "^7.3.0"
       }
     },
     "on-finished": {
@@ -20314,7 +20353,8 @@
     "yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
     },
     "yaml": {
       "version": "1.10.2",
@@ -20357,6 +20397,11 @@
           "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
         }
       }
+    },
+    "zstddec": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/zstddec/-/zstddec-0.1.0.tgz",
+      "integrity": "sha512-w2NTI8+3l3eeltKAdK8QpiLo/flRAr2p8AGeakfMZOXBxOg9HIu4LVDxBi81sYgVhFhdJjv1OrB5ssI8uFPoLg=="
     }
   }
 }
diff --git a/package.json b/package.json
index 0395a7055..087b30e17 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "echarts": "^5.3.2",
     "jsts": "^2.11.0",
     "magic-wand-tool": "^1.1.4",
-    "ol": "^6.15.1",
+    "ol": "^7.5.2",
     "polymorph-js": "^0.2.4",
     "uiv": "^1.2.4",
     "vue": "^2.0.5",

From a1b024231347cb958fc6acb0228b448f54c7aaba Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Wed, 3 Jul 2024 15:18:40 +0200
Subject: [PATCH 08/27] Fix OpenLayers control style

---
 resources/assets/sass/annotations/_ol.scss    | 26 ++++++++++++++++---
 .../components/_annotation-canvas.scss        |  2 --
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/resources/assets/sass/annotations/_ol.scss b/resources/assets/sass/annotations/_ol.scss
index 5498b450a..dcd7c199a 100644
--- a/resources/assets/sass/annotations/_ol.scss
+++ b/resources/assets/sass/annotations/_ol.scss
@@ -1,3 +1,5 @@
+$ol-control-color: rgb(0, 60, 136);
+
 %custom-icon {
     color: white;
     display: block;
@@ -18,7 +20,25 @@
     }
 }
 
-.ol-control button {
-    // Keep same size than of OL5.
-    font-size: 1.14em !important;
+.ol-control {
+    --ol-subtle-background-color: rgba(255, 255, 255, 0.4);
+    padding: 2px;
+
+    &:hover {
+        --ol-subtle-background-color: rgba(255, 255, 255, 0.6);
+    }
+
+    button {
+        // Keep same size and style than of OL5.
+        font-size: 1.14em !important;
+        --ol-background-color: #{fade-out($ol-control-color, 0.5)};
+        --ol-subtle-foreground-color: white;
+        transition: background-color 0.25s ease;
+
+        &:hover, &:focus, &.active {
+            --ol-foreground-color: white;
+            --ol-background-color: #{fade-out($ol-control-color, 0.3)};
+            --ol-subtle-foreground-color: transparent;
+        }
+    }
 }
diff --git a/resources/assets/sass/annotations/components/_annotation-canvas.scss b/resources/assets/sass/annotations/components/_annotation-canvas.scss
index 7e6a982a6..e55ac2c42 100644
--- a/resources/assets/sass/annotations/components/_annotation-canvas.scss
+++ b/resources/assets/sass/annotations/components/_annotation-canvas.scss
@@ -1,5 +1,3 @@
-$ol-control-color: rgb(0, 60, 136);
-
 %ol-control {
     // on top of the map canvas
     z-index: 1;

From b6f765632315def4efd785c022372319bc3f3059 Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Wed, 3 Jul 2024 15:28:04 +0200
Subject: [PATCH 09/27] Upgrade to OpenLayers v9

---
 package-lock.json | 261 +++++++++++++---------------------------------
 package.json      |   2 +-
 2 files changed, 75 insertions(+), 188 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b3f464704..1e7f61900 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
         "echarts": "^5.3.2",
         "jsts": "^2.11.0",
         "magic-wand-tool": "^1.1.4",
-        "ol": "^7.5.2",
+        "ol": "^8.2.0",
         "polymorph-js": "^0.2.4",
         "uiv": "^1.2.4",
         "vue": "^2.0.5",
@@ -2224,45 +2224,6 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
       "dev": true
     },
-    "node_modules/@mapbox/jsonlint-lines-primitives": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
-      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/@mapbox/mapbox-gl-style-spec": {
-      "version": "13.28.0",
-      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.28.0.tgz",
-      "integrity": "sha512-B8xM7Fp1nh5kejfIl4SWeY0gtIeewbuRencqO3cJDrCHZpaPg7uY+V8abuR+esMeuOjRl5cLhVTP40v+1ywxbg==",
-      "dependencies": {
-        "@mapbox/jsonlint-lines-primitives": "~2.0.2",
-        "@mapbox/point-geometry": "^0.1.0",
-        "@mapbox/unitbezier": "^0.0.0",
-        "csscolorparser": "~1.0.2",
-        "json-stringify-pretty-compact": "^2.0.0",
-        "minimist": "^1.2.6",
-        "rw": "^1.3.3",
-        "sort-object": "^0.3.2"
-      },
-      "bin": {
-        "gl-style-composite": "bin/gl-style-composite.js",
-        "gl-style-format": "bin/gl-style-format.js",
-        "gl-style-migrate": "bin/gl-style-migrate.js",
-        "gl-style-validate": "bin/gl-style-validate.js"
-      }
-    },
-    "node_modules/@mapbox/point-geometry": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
-      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
-    },
-    "node_modules/@mapbox/unitbezier": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
-      "integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA=="
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -4142,6 +4103,36 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/color-parse": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/color-parse/-/color-parse-2.0.2.tgz",
+      "integrity": "sha512-eCtOz5w5ttWIUcaKLiktF+DxZO1R9KLNY/xhbV6CkhM7sR3GhVghmt6X6yOnzeaM24po+Z9/S1apbXMwA3Iepw==",
+      "dependencies": {
+        "color-name": "^2.0.0"
+      }
+    },
+    "node_modules/color-parse/node_modules/color-name": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-2.0.0.tgz",
+      "integrity": "sha512-SbtvAMWvASO5TE2QP07jHBMXKafgdZz8Vrsrn96fiL+O92/FN/PLARzUW5sKt013fjAprK2d2iCn2hk2Xb5oow==",
+      "engines": {
+        "node": ">=12.20"
+      }
+    },
+    "node_modules/color-rgba": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/color-rgba/-/color-rgba-3.0.0.tgz",
+      "integrity": "sha512-PPwZYkEY3M2THEHHV6Y95sGUie77S7X8v+h1r6LSAPF3/LL2xJ8duUXSrkic31Nzc4odPwHgUbiX/XuTYzQHQg==",
+      "dependencies": {
+        "color-parse": "^2.0.0",
+        "color-space": "^2.0.0"
+      }
+    },
+    "node_modules/color-space": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-space/-/color-space-2.0.1.tgz",
+      "integrity": "sha512-nKqUYlo0vZATVOFHY810BSYjmCARrG7e5R3UE3CQlyjJTvv5kSSmPG1kzm/oDyyqjehM+lW1RnEt9It9GNa5JA=="
+    },
     "node_modules/colord": {
       "version": "2.9.2",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz",
@@ -4585,11 +4576,6 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
-    "node_modules/csscolorparser": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
-      "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w=="
-    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -7070,11 +7056,6 @@
       "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
       "dev": true
     },
-    "node_modules/json-stringify-pretty-compact": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
-      "integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ=="
-    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -7506,11 +7487,6 @@
         "semver": "bin/semver.js"
       }
     },
-    "node_modules/mapbox-to-css-font": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-2.4.4.tgz",
-      "integrity": "sha512-X1dtuTuH2D1MRMuductMZCLV/fy9EoIgqW/lmu8vQSAhEatx/tdFebkYT3TVhdTwqFDHbLEgQBD3IKA4KI7aoQ=="
-    },
     "node_modules/md5": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
@@ -7770,7 +7746,8 @@
     "node_modules/minimist": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
-      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
+      "dev": true
     },
     "node_modules/ms": {
       "version": "2.1.2",
@@ -8001,13 +7978,14 @@
       "dev": true
     },
     "node_modules/ol": {
-      "version": "7.5.2",
-      "resolved": "https://registry.npmjs.org/ol/-/ol-7.5.2.tgz",
-      "integrity": "sha512-HJbb3CxXrksM6ct367LsP3N+uh+iBBMdP3DeGGipdV9YAYTP0vTJzqGnoqQ6C2IW4qf8krw9yuyQbc9fjOIaOQ==",
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-8.2.0.tgz",
+      "integrity": "sha512-/m1ddd7Jsp4Kbg+l7+ozR5aKHAZNQOBAoNZ5pM9Jvh4Etkf0WGkXr9qXd7PnhmwiC1Hnc2Toz9XjCzBBvexfXw==",
       "dependencies": {
+        "color-rgba": "^3.0.0",
+        "color-space": "^2.0.1",
         "earcut": "^2.2.3",
         "geotiff": "^2.0.7",
-        "ol-mapbox-style": "^10.1.0",
         "pbf": "3.2.1",
         "rbush": "^3.0.1"
       },
@@ -8016,16 +7994,6 @@
         "url": "https://opencollective.com/openlayers"
       }
     },
-    "node_modules/ol-mapbox-style": {
-      "version": "10.7.0",
-      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-10.7.0.tgz",
-      "integrity": "sha512-S/UdYBuOjrotcR95Iq9AejGYbifKeZE85D9VtH11ryJLQPTZXZSW1J5bIXcr4AlAH6tyjPPHTK34AdkwB32Myw==",
-      "dependencies": {
-        "@mapbox/mapbox-gl-style-spec": "^13.23.1",
-        "mapbox-to-css-font": "^2.4.1",
-        "ol": "^7.3.0"
-      }
-    },
     "node_modules/on-finished": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
@@ -9607,11 +9575,6 @@
         "queue-microtask": "^1.2.2"
       }
     },
-    "node_modules/rw": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
-      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
-    },
     "node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -10048,34 +10011,6 @@
         "websocket-driver": "^0.7.4"
       }
     },
-    "node_modules/sort-asc": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.1.0.tgz",
-      "integrity": "sha512-jBgdDd+rQ+HkZF2/OHCmace5dvpos/aWQpcxuyRs9QUbPRnkEJmYVo81PIGpjIdpOcsnJ4rGjStfDHsbn+UVyw==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/sort-desc": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.1.1.tgz",
-      "integrity": "sha512-jfZacW5SKOP97BF5rX5kQfJmRVZP5/adDUTY8fCSPvNcXDVpUEe2pr/iKGlcyZzchRJZrswnp68fgk3qBXgkJw==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/sort-object": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-0.3.2.tgz",
-      "integrity": "sha512-aAQiEdqFTTdsvUFxXm3umdo04J7MRljoVGbBlkH7BgNsMvVNAJyGj7C/wV1A8wHWAJj/YikeZbfuCKqhggNWGA==",
-      "dependencies": {
-        "sort-asc": "^0.1.0",
-        "sort-desc": "^0.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -13236,36 +13171,6 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
       "dev": true
     },
-    "@mapbox/jsonlint-lines-primitives": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
-      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ=="
-    },
-    "@mapbox/mapbox-gl-style-spec": {
-      "version": "13.28.0",
-      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.28.0.tgz",
-      "integrity": "sha512-B8xM7Fp1nh5kejfIl4SWeY0gtIeewbuRencqO3cJDrCHZpaPg7uY+V8abuR+esMeuOjRl5cLhVTP40v+1ywxbg==",
-      "requires": {
-        "@mapbox/jsonlint-lines-primitives": "~2.0.2",
-        "@mapbox/point-geometry": "^0.1.0",
-        "@mapbox/unitbezier": "^0.0.0",
-        "csscolorparser": "~1.0.2",
-        "json-stringify-pretty-compact": "^2.0.0",
-        "minimist": "^1.2.6",
-        "rw": "^1.3.3",
-        "sort-object": "^0.3.2"
-      }
-    },
-    "@mapbox/point-geometry": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
-      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
-    },
-    "@mapbox/unitbezier": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
-      "integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA=="
-    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -14823,6 +14728,35 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "color-parse": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/color-parse/-/color-parse-2.0.2.tgz",
+      "integrity": "sha512-eCtOz5w5ttWIUcaKLiktF+DxZO1R9KLNY/xhbV6CkhM7sR3GhVghmt6X6yOnzeaM24po+Z9/S1apbXMwA3Iepw==",
+      "requires": {
+        "color-name": "^2.0.0"
+      },
+      "dependencies": {
+        "color-name": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-2.0.0.tgz",
+          "integrity": "sha512-SbtvAMWvASO5TE2QP07jHBMXKafgdZz8Vrsrn96fiL+O92/FN/PLARzUW5sKt013fjAprK2d2iCn2hk2Xb5oow=="
+        }
+      }
+    },
+    "color-rgba": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/color-rgba/-/color-rgba-3.0.0.tgz",
+      "integrity": "sha512-PPwZYkEY3M2THEHHV6Y95sGUie77S7X8v+h1r6LSAPF3/LL2xJ8duUXSrkic31Nzc4odPwHgUbiX/XuTYzQHQg==",
+      "requires": {
+        "color-parse": "^2.0.0",
+        "color-space": "^2.0.0"
+      }
+    },
+    "color-space": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-space/-/color-space-2.0.1.tgz",
+      "integrity": "sha512-nKqUYlo0vZATVOFHY810BSYjmCARrG7e5R3UE3CQlyjJTvv5kSSmPG1kzm/oDyyqjehM+lW1RnEt9It9GNa5JA=="
+    },
     "colord": {
       "version": "2.9.2",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz",
@@ -15178,11 +15112,6 @@
       "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==",
       "dev": true
     },
-    "csscolorparser": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
-      "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w=="
-    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -17024,11 +16953,6 @@
       "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
       "dev": true
     },
-    "json-stringify-pretty-compact": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
-      "integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ=="
-    },
     "json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -17363,11 +17287,6 @@
         }
       }
     },
-    "mapbox-to-css-font": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-2.4.4.tgz",
-      "integrity": "sha512-X1dtuTuH2D1MRMuductMZCLV/fy9EoIgqW/lmu8vQSAhEatx/tdFebkYT3TVhdTwqFDHbLEgQBD3IKA4KI7aoQ=="
-    },
     "md5": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
@@ -17571,7 +17490,8 @@
     "minimist": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
-      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
+      "dev": true
     },
     "ms": {
       "version": "2.1.2",
@@ -17748,27 +17668,18 @@
       "dev": true
     },
     "ol": {
-      "version": "7.5.2",
-      "resolved": "https://registry.npmjs.org/ol/-/ol-7.5.2.tgz",
-      "integrity": "sha512-HJbb3CxXrksM6ct367LsP3N+uh+iBBMdP3DeGGipdV9YAYTP0vTJzqGnoqQ6C2IW4qf8krw9yuyQbc9fjOIaOQ==",
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-8.2.0.tgz",
+      "integrity": "sha512-/m1ddd7Jsp4Kbg+l7+ozR5aKHAZNQOBAoNZ5pM9Jvh4Etkf0WGkXr9qXd7PnhmwiC1Hnc2Toz9XjCzBBvexfXw==",
       "requires": {
+        "color-rgba": "^3.0.0",
+        "color-space": "^2.0.1",
         "earcut": "^2.2.3",
         "geotiff": "^2.0.7",
-        "ol-mapbox-style": "^10.1.0",
         "pbf": "3.2.1",
         "rbush": "^3.0.1"
       }
     },
-    "ol-mapbox-style": {
-      "version": "10.7.0",
-      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-10.7.0.tgz",
-      "integrity": "sha512-S/UdYBuOjrotcR95Iq9AejGYbifKeZE85D9VtH11ryJLQPTZXZSW1J5bIXcr4AlAH6tyjPPHTK34AdkwB32Myw==",
-      "requires": {
-        "@mapbox/mapbox-gl-style-spec": "^13.23.1",
-        "mapbox-to-css-font": "^2.4.1",
-        "ol": "^7.3.0"
-      }
-    },
     "on-finished": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
@@ -18900,11 +18811,6 @@
         "queue-microtask": "^1.2.2"
       }
     },
-    "rw": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
-      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
-    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -19246,25 +19152,6 @@
         "websocket-driver": "^0.7.4"
       }
     },
-    "sort-asc": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.1.0.tgz",
-      "integrity": "sha512-jBgdDd+rQ+HkZF2/OHCmace5dvpos/aWQpcxuyRs9QUbPRnkEJmYVo81PIGpjIdpOcsnJ4rGjStfDHsbn+UVyw=="
-    },
-    "sort-desc": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.1.1.tgz",
-      "integrity": "sha512-jfZacW5SKOP97BF5rX5kQfJmRVZP5/adDUTY8fCSPvNcXDVpUEe2pr/iKGlcyZzchRJZrswnp68fgk3qBXgkJw=="
-    },
-    "sort-object": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-0.3.2.tgz",
-      "integrity": "sha512-aAQiEdqFTTdsvUFxXm3umdo04J7MRljoVGbBlkH7BgNsMvVNAJyGj7C/wV1A8wHWAJj/YikeZbfuCKqhggNWGA==",
-      "requires": {
-        "sort-asc": "^0.1.0",
-        "sort-desc": "^0.1.1"
-      }
-    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
diff --git a/package.json b/package.json
index 087b30e17..7e0fe5b89 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "echarts": "^5.3.2",
     "jsts": "^2.11.0",
     "magic-wand-tool": "^1.1.4",
-    "ol": "^7.5.2",
+    "ol": "^8.2.0",
     "polymorph-js": "^0.2.4",
     "uiv": "^1.2.4",
     "vue": "^2.0.5",

From f190f7101a19c512a4148dc172f31aac663f4515 Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Wed, 3 Jul 2024 16:01:46 +0200
Subject: [PATCH 10/27] Fix issues because minimap made OpenLayers map reactive

---
 resources/assets/js/annotations/components/minimap.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/resources/assets/js/annotations/components/minimap.vue b/resources/assets/js/annotations/components/minimap.vue
index 30b35323c..c83ea6e7d 100644
--- a/resources/assets/js/annotations/components/minimap.vue
+++ b/resources/assets/js/annotations/components/minimap.vue
@@ -36,8 +36,7 @@ export default {
     },
     data() {
         return {
-            originalLayer: null,
-            currentLayer: null,
+            //
         };
     },
     computed: {
@@ -137,6 +136,10 @@ export default {
         },
     },
     created() {
+        // Must not be reactive.
+        this.originalLayer = null;
+        this.currentLayer = null;
+
         this.minimap = new Map({
             // remove controls
             controls: [],

From 24991675948f626001369036b2386129214b9cd6 Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Wed, 3 Jul 2024 16:41:52 +0200
Subject: [PATCH 11/27] Improve performance of polygon brush and modify brush
 interactions

---
 package-lock.json                             | 542 +-----------------
 package.json                                  |   1 -
 .../ol/interaction/ModifyPolygonBrush.js      |  27 +-
 .../ol/interaction/PolygonBrush.js            |  10 +-
 4 files changed, 40 insertions(+), 540 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1e7f61900..b80e1a2b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,6 @@
       "dependencies": {
         "@fortawesome/fontawesome-free": "^5.2.0",
         "@turf/boolean-contains": "^6.5.0",
-        "@turf/boolean-overlap": "^6.5.0",
         "@turf/difference": "^6.5.0",
         "@turf/helpers": "^6.5.0",
         "@turf/union": "^6.5.0",
@@ -2307,18 +2306,6 @@
         "url": "https://opencollective.com/turf"
       }
     },
-    "node_modules/@turf/bearing": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@turf/bearing/-/bearing-6.5.0.tgz",
-      "integrity": "sha512-dxINYhIEMzgDOztyMZc20I7ssYVNEpSv04VbMo5YPQsqa80KO3TFvbuCahMsCAW5z8Tncc8dwBlEFrmRjJG33A==",
-      "dependencies": {
-        "@turf/helpers": "^6.5.0",
-        "@turf/invariant": "^6.5.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/turf"
-      }
-    },
     "node_modules/@turf/boolean-contains": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/boolean-contains/-/boolean-contains-6.5.0.tgz",
@@ -2334,22 +2321,6 @@
         "url": "https://opencollective.com/turf"
       }
     },
-    "node_modules/@turf/boolean-overlap": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@turf/boolean-overlap/-/boolean-overlap-6.5.0.tgz",
-      "integrity": "sha512-8btMIdnbXVWUa1M7D4shyaSGxLRw6NjMcqKBcsTXcZdnaixl22k7ar7BvIzkaRYN3SFECk9VGXfLncNS3ckQUw==",
-      "dependencies": {
-        "@turf/helpers": "^6.5.0",
-        "@turf/invariant": "^6.5.0",
-        "@turf/line-intersect": "^6.5.0",
-        "@turf/line-overlap": "^6.5.0",
-        "@turf/meta": "^6.5.0",
-        "geojson-equality": "0.1.6"
-      },
-      "funding": {
-        "url": "https://opencollective.com/turf"
-      }
-    },
     "node_modules/@turf/boolean-point-in-polygon": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/boolean-point-in-polygon/-/boolean-point-in-polygon-6.5.0.tgz",
@@ -2374,18 +2345,6 @@
         "url": "https://opencollective.com/turf"
       }
     },
-    "node_modules/@turf/destination": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@turf/destination/-/destination-6.5.0.tgz",
-      "integrity": "sha512-4cnWQlNC8d1tItOz9B4pmJdWpXqS0vEvv65bI/Pj/genJnsL7evI0/Xw42RvEGROS481MPiU80xzvwxEvhQiMQ==",
-      "dependencies": {
-        "@turf/helpers": "^6.5.0",
-        "@turf/invariant": "^6.5.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/turf"
-      }
-    },
     "node_modules/@turf/difference": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/difference/-/difference-6.5.0.tgz",
@@ -2399,18 +2358,6 @@
         "url": "https://opencollective.com/turf"
       }
     },
-    "node_modules/@turf/distance": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@turf/distance/-/distance-6.5.0.tgz",
-      "integrity": "sha512-xzykSLfoURec5qvQJcfifw/1mJa+5UwByZZ5TZ8iaqjGYN0vomhV9aiSLeYdUGtYRESZ+DYC/OzY+4RclZYgMg==",
-      "dependencies": {
-        "@turf/helpers": "^6.5.0",
-        "@turf/invariant": "^6.5.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/turf"
-      }
-    },
     "node_modules/@turf/helpers": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-6.5.0.tgz",
@@ -2430,52 +2377,6 @@
         "url": "https://opencollective.com/turf"
       }
     },
-    "node_modules/@turf/line-intersect": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@turf/line-intersect/-/line-intersect-6.5.0.tgz",
-      "integrity": "sha512-CS6R1tZvVQD390G9Ea4pmpM6mJGPWoL82jD46y0q1KSor9s6HupMIo1kY4Ny+AEYQl9jd21V3Scz20eldpbTVA==",
-      "dependencies": {
-        "@turf/helpers": "^6.5.0",
-        "@turf/invariant": "^6.5.0",
-        "@turf/line-segment": "^6.5.0",
-        "@turf/meta": "^6.5.0",
-        "geojson-rbush": "3.x"
-      },
-      "funding": {
-        "url": "https://opencollective.com/turf"
-      }
-    },
-    "node_modules/@turf/line-overlap": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@turf/line-overlap/-/line-overlap-6.5.0.tgz",
-      "integrity": "sha512-xHOaWLd0hkaC/1OLcStCpfq55lPHpPNadZySDXYiYjEz5HXr1oKmtMYpn0wGizsLwrOixRdEp+j7bL8dPt4ojQ==",
-      "dependencies": {
-        "@turf/boolean-point-on-line": "^6.5.0",
-        "@turf/helpers": "^6.5.0",
-        "@turf/invariant": "^6.5.0",
-        "@turf/line-segment": "^6.5.0",
-        "@turf/meta": "^6.5.0",
-        "@turf/nearest-point-on-line": "^6.5.0",
-        "deep-equal": "1.x",
-        "geojson-rbush": "3.x"
-      },
-      "funding": {
-        "url": "https://opencollective.com/turf"
-      }
-    },
-    "node_modules/@turf/line-segment": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@turf/line-segment/-/line-segment-6.5.0.tgz",
-      "integrity": "sha512-jI625Ho4jSuJESNq66Mmi290ZJ5pPZiQZruPVpmHkUw257Pew0alMmb6YrqYNnLUuiVVONxAAKXUVeeUGtycfw==",
-      "dependencies": {
-        "@turf/helpers": "^6.5.0",
-        "@turf/invariant": "^6.5.0",
-        "@turf/meta": "^6.5.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/turf"
-      }
-    },
     "node_modules/@turf/meta": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-6.5.0.tgz",
@@ -2487,23 +2388,6 @@
         "url": "https://opencollective.com/turf"
       }
     },
-    "node_modules/@turf/nearest-point-on-line": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@turf/nearest-point-on-line/-/nearest-point-on-line-6.5.0.tgz",
-      "integrity": "sha512-WthrvddddvmymnC+Vf7BrkHGbDOUu6Z3/6bFYUGv1kxw8tiZ6n83/VG6kHz4poHOfS0RaNflzXSkmCi64fLBlg==",
-      "dependencies": {
-        "@turf/bearing": "^6.5.0",
-        "@turf/destination": "^6.5.0",
-        "@turf/distance": "^6.5.0",
-        "@turf/helpers": "^6.5.0",
-        "@turf/invariant": "^6.5.0",
-        "@turf/line-intersect": "^6.5.0",
-        "@turf/meta": "^6.5.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/turf"
-      }
-    },
     "node_modules/@turf/union": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/union/-/union-6.5.0.tgz",
@@ -2675,11 +2559,6 @@
         "@types/range-parser": "*"
       }
     },
-    "node_modules/@types/geojson": {
-      "version": "7946.0.8",
-      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
-      "integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA=="
-    },
     "node_modules/@types/glob": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz",
@@ -3874,6 +3753,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
       "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
@@ -4724,25 +4604,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/deep-equal": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
-      "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==",
-      "dependencies": {
-        "is-arguments": "^1.1.1",
-        "is-date-object": "^1.0.5",
-        "is-regex": "^1.1.4",
-        "object-is": "^1.1.5",
-        "object-keys": "^1.1.1",
-        "regexp.prototype.flags": "^1.5.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -4773,6 +4634,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
       "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
@@ -4794,22 +4656,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/define-properties": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
-      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
-      "dependencies": {
-        "define-data-property": "^1.0.1",
-        "has-property-descriptors": "^1.0.0",
-        "object-keys": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -5161,6 +5007,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
       "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.2.4"
       },
@@ -5172,6 +5019,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -5937,6 +5785,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -5947,14 +5796,6 @@
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
-    "node_modules/functions-have-names": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -5964,26 +5805,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/geojson-equality": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/geojson-equality/-/geojson-equality-0.1.6.tgz",
-      "integrity": "sha512-TqG8YbqizP3EfwP5Uw4aLu6pKkg6JQK9uq/XZ1lXQntvTHD1BBKJWhNpJ2M0ax6TuWMP3oyx6Oq7FCIfznrgpQ==",
-      "dependencies": {
-        "deep-equal": "^1.0.0"
-      }
-    },
-    "node_modules/geojson-rbush": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/geojson-rbush/-/geojson-rbush-3.2.0.tgz",
-      "integrity": "sha512-oVltQTXolxvsz1sZnutlSuLDEcQAKYC/uXt9zDzJJ6bu0W+baTI8LZBaTup5afzibEH4N3jlq2p+a152wlBJ7w==",
-      "dependencies": {
-        "@turf/bbox": "*",
-        "@turf/helpers": "6.x",
-        "@turf/meta": "6.x",
-        "@types/geojson": "7946.0.8",
-        "rbush": "^3.0.1"
-      }
-    },
     "node_modules/geotiff": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.1.3.tgz",
@@ -6031,6 +5852,7 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
       "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+      "dev": true,
       "dependencies": {
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
@@ -6144,6 +5966,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
       "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.3"
       },
@@ -6218,6 +6041,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
       "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0"
       },
@@ -6229,6 +6053,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
       "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -6240,20 +6065,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-tostringtag": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
-      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "dependencies": {
-        "has-symbols": "^1.0.3"
-      },
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -6329,6 +6141,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -6770,21 +6583,6 @@
         "node": ">= 10"
       }
     },
-    "node_modules/is-arguments": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
-      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -6821,20 +6619,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-date-object": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
-      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
-      "dependencies": {
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-docker": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
@@ -6913,21 +6697,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-regex": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-stream": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -7948,29 +7717,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/object-is": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
-      "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
-      "dependencies": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/object-keys": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/obuf": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
@@ -9287,23 +9033,6 @@
       "integrity": "sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q==",
       "dev": true
     },
-    "node_modules/regexp.prototype.flags": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
-      "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==",
-      "dependencies": {
-        "call-bind": "^1.0.6",
-        "define-properties": "^1.2.1",
-        "es-errors": "^1.3.0",
-        "set-function-name": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/regexpp": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
@@ -9851,6 +9580,7 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
       "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
       "dependencies": {
         "define-data-property": "^1.1.4",
         "es-errors": "^1.3.0",
@@ -9863,20 +9593,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/set-function-name": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
-      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
-      "dependencies": {
-        "define-data-property": "^1.1.4",
-        "es-errors": "^1.3.0",
-        "functions-have-names": "^1.2.3",
-        "has-property-descriptors": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
@@ -13230,15 +12946,6 @@
         "@turf/meta": "^6.5.0"
       }
     },
-    "@turf/bearing": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@turf/bearing/-/bearing-6.5.0.tgz",
-      "integrity": "sha512-dxINYhIEMzgDOztyMZc20I7ssYVNEpSv04VbMo5YPQsqa80KO3TFvbuCahMsCAW5z8Tncc8dwBlEFrmRjJG33A==",
-      "requires": {
-        "@turf/helpers": "^6.5.0",
-        "@turf/invariant": "^6.5.0"
-      }
-    },
     "@turf/boolean-contains": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/boolean-contains/-/boolean-contains-6.5.0.tgz",
@@ -13251,19 +12958,6 @@
         "@turf/invariant": "^6.5.0"
       }
     },
-    "@turf/boolean-overlap": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@turf/boolean-overlap/-/boolean-overlap-6.5.0.tgz",
-      "integrity": "sha512-8btMIdnbXVWUa1M7D4shyaSGxLRw6NjMcqKBcsTXcZdnaixl22k7ar7BvIzkaRYN3SFECk9VGXfLncNS3ckQUw==",
-      "requires": {
-        "@turf/helpers": "^6.5.0",
-        "@turf/invariant": "^6.5.0",
-        "@turf/line-intersect": "^6.5.0",
-        "@turf/line-overlap": "^6.5.0",
-        "@turf/meta": "^6.5.0",
-        "geojson-equality": "0.1.6"
-      }
-    },
     "@turf/boolean-point-in-polygon": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/boolean-point-in-polygon/-/boolean-point-in-polygon-6.5.0.tgz",
@@ -13282,15 +12976,6 @@
         "@turf/invariant": "^6.5.0"
       }
     },
-    "@turf/destination": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@turf/destination/-/destination-6.5.0.tgz",
-      "integrity": "sha512-4cnWQlNC8d1tItOz9B4pmJdWpXqS0vEvv65bI/Pj/genJnsL7evI0/Xw42RvEGROS481MPiU80xzvwxEvhQiMQ==",
-      "requires": {
-        "@turf/helpers": "^6.5.0",
-        "@turf/invariant": "^6.5.0"
-      }
-    },
     "@turf/difference": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/difference/-/difference-6.5.0.tgz",
@@ -13301,15 +12986,6 @@
         "polygon-clipping": "^0.15.3"
       }
     },
-    "@turf/distance": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@turf/distance/-/distance-6.5.0.tgz",
-      "integrity": "sha512-xzykSLfoURec5qvQJcfifw/1mJa+5UwByZZ5TZ8iaqjGYN0vomhV9aiSLeYdUGtYRESZ+DYC/OzY+4RclZYgMg==",
-      "requires": {
-        "@turf/helpers": "^6.5.0",
-        "@turf/invariant": "^6.5.0"
-      }
-    },
     "@turf/helpers": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-6.5.0.tgz",
@@ -13323,43 +12999,6 @@
         "@turf/helpers": "^6.5.0"
       }
     },
-    "@turf/line-intersect": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@turf/line-intersect/-/line-intersect-6.5.0.tgz",
-      "integrity": "sha512-CS6R1tZvVQD390G9Ea4pmpM6mJGPWoL82jD46y0q1KSor9s6HupMIo1kY4Ny+AEYQl9jd21V3Scz20eldpbTVA==",
-      "requires": {
-        "@turf/helpers": "^6.5.0",
-        "@turf/invariant": "^6.5.0",
-        "@turf/line-segment": "^6.5.0",
-        "@turf/meta": "^6.5.0",
-        "geojson-rbush": "3.x"
-      }
-    },
-    "@turf/line-overlap": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@turf/line-overlap/-/line-overlap-6.5.0.tgz",
-      "integrity": "sha512-xHOaWLd0hkaC/1OLcStCpfq55lPHpPNadZySDXYiYjEz5HXr1oKmtMYpn0wGizsLwrOixRdEp+j7bL8dPt4ojQ==",
-      "requires": {
-        "@turf/boolean-point-on-line": "^6.5.0",
-        "@turf/helpers": "^6.5.0",
-        "@turf/invariant": "^6.5.0",
-        "@turf/line-segment": "^6.5.0",
-        "@turf/meta": "^6.5.0",
-        "@turf/nearest-point-on-line": "^6.5.0",
-        "deep-equal": "1.x",
-        "geojson-rbush": "3.x"
-      }
-    },
-    "@turf/line-segment": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@turf/line-segment/-/line-segment-6.5.0.tgz",
-      "integrity": "sha512-jI625Ho4jSuJESNq66Mmi290ZJ5pPZiQZruPVpmHkUw257Pew0alMmb6YrqYNnLUuiVVONxAAKXUVeeUGtycfw==",
-      "requires": {
-        "@turf/helpers": "^6.5.0",
-        "@turf/invariant": "^6.5.0",
-        "@turf/meta": "^6.5.0"
-      }
-    },
     "@turf/meta": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-6.5.0.tgz",
@@ -13368,20 +13007,6 @@
         "@turf/helpers": "^6.5.0"
       }
     },
-    "@turf/nearest-point-on-line": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@turf/nearest-point-on-line/-/nearest-point-on-line-6.5.0.tgz",
-      "integrity": "sha512-WthrvddddvmymnC+Vf7BrkHGbDOUu6Z3/6bFYUGv1kxw8tiZ6n83/VG6kHz4poHOfS0RaNflzXSkmCi64fLBlg==",
-      "requires": {
-        "@turf/bearing": "^6.5.0",
-        "@turf/destination": "^6.5.0",
-        "@turf/distance": "^6.5.0",
-        "@turf/helpers": "^6.5.0",
-        "@turf/invariant": "^6.5.0",
-        "@turf/line-intersect": "^6.5.0",
-        "@turf/meta": "^6.5.0"
-      }
-    },
     "@turf/union": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/union/-/union-6.5.0.tgz",
@@ -13549,11 +13174,6 @@
         "@types/range-parser": "*"
       }
     },
-    "@types/geojson": {
-      "version": "7946.0.8",
-      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
-      "integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA=="
-    },
     "@types/glob": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz",
@@ -14560,6 +14180,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
       "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+      "dev": true,
       "requires": {
         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
@@ -15212,19 +14833,6 @@
         }
       }
     },
-    "deep-equal": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
-      "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==",
-      "requires": {
-        "is-arguments": "^1.1.1",
-        "is-date-object": "^1.0.5",
-        "is-regex": "^1.1.4",
-        "object-is": "^1.1.5",
-        "object-keys": "^1.1.1",
-        "regexp.prototype.flags": "^1.5.1"
-      }
-    },
     "deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -15249,6 +14857,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
       "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
       "requires": {
         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
@@ -15261,16 +14870,6 @@
       "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
       "dev": true
     },
-    "define-properties": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
-      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
-      "requires": {
-        "define-data-property": "^1.0.1",
-        "has-property-descriptors": "^1.0.0",
-        "object-keys": "^1.1.1"
-      }
-    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -15558,6 +15157,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
       "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dev": true,
       "requires": {
         "get-intrinsic": "^1.2.4"
       }
@@ -15565,7 +15165,8 @@
     "es-errors": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw=="
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true
     },
     "es-module-lexer": {
       "version": "0.9.3",
@@ -16141,7 +15742,8 @@
     "function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true
     },
     "functional-red-black-tree": {
       "version": "1.0.1",
@@ -16149,37 +15751,12 @@
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
-    "functions-have-names": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
-    },
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
       "dev": true
     },
-    "geojson-equality": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/geojson-equality/-/geojson-equality-0.1.6.tgz",
-      "integrity": "sha512-TqG8YbqizP3EfwP5Uw4aLu6pKkg6JQK9uq/XZ1lXQntvTHD1BBKJWhNpJ2M0ax6TuWMP3oyx6Oq7FCIfznrgpQ==",
-      "requires": {
-        "deep-equal": "^1.0.0"
-      }
-    },
-    "geojson-rbush": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/geojson-rbush/-/geojson-rbush-3.2.0.tgz",
-      "integrity": "sha512-oVltQTXolxvsz1sZnutlSuLDEcQAKYC/uXt9zDzJJ6bu0W+baTI8LZBaTup5afzibEH4N3jlq2p+a152wlBJ7w==",
-      "requires": {
-        "@turf/bbox": "*",
-        "@turf/helpers": "6.x",
-        "@turf/meta": "6.x",
-        "@types/geojson": "7946.0.8",
-        "rbush": "^3.0.1"
-      }
-    },
     "geotiff": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.1.3.tgz",
@@ -16217,6 +15794,7 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
       "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+      "dev": true,
       "requires": {
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
@@ -16299,6 +15877,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
       "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dev": true,
       "requires": {
         "get-intrinsic": "^1.1.3"
       }
@@ -16358,6 +15937,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
       "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
       "requires": {
         "es-define-property": "^1.0.0"
       }
@@ -16365,20 +15945,14 @@
     "has-proto": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
-      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q=="
+      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
+      "dev": true
     },
     "has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
-    },
-    "has-tostringtag": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
-      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "requires": {
-        "has-symbols": "^1.0.3"
-      }
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true
     },
     "hash-base": {
       "version": "3.1.0",
@@ -16430,6 +16004,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
       "requires": {
         "function-bind": "^1.1.2"
       }
@@ -16749,15 +16324,6 @@
       "integrity": "sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==",
       "dev": true
     },
-    "is-arguments": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
-      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
-      "requires": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      }
-    },
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -16788,14 +16354,6 @@
         "has": "^1.0.3"
       }
     },
-    "is-date-object": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
-      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
-      "requires": {
-        "has-tostringtag": "^1.0.0"
-      }
-    },
     "is-docker": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
@@ -16844,15 +16402,6 @@
         "isobject": "^3.0.1"
       }
     },
-    "is-regex": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-      "requires": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      }
-    },
     "is-stream": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -17647,20 +17196,6 @@
       "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
       "dev": true
     },
-    "object-is": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
-      "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
-      "requires": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1"
-      }
-    },
-    "object-keys": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
-    },
     "obuf": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
@@ -18601,17 +18136,6 @@
       "integrity": "sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q==",
       "dev": true
     },
-    "regexp.prototype.flags": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
-      "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==",
-      "requires": {
-        "call-bind": "^1.0.6",
-        "define-properties": "^1.2.1",
-        "es-errors": "^1.3.0",
-        "set-function-name": "^2.0.1"
-      }
-    },
     "regexpp": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
@@ -19028,6 +18552,7 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
       "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
       "requires": {
         "define-data-property": "^1.1.4",
         "es-errors": "^1.3.0",
@@ -19037,17 +18562,6 @@
         "has-property-descriptors": "^1.0.2"
       }
     },
-    "set-function-name": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
-      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
-      "requires": {
-        "define-data-property": "^1.1.4",
-        "es-errors": "^1.3.0",
-        "functions-have-names": "^1.2.3",
-        "has-property-descriptors": "^1.0.2"
-      }
-    },
     "setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
diff --git a/package.json b/package.json
index 7e0fe5b89..f7473fff0 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,6 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.2.0",
     "@turf/boolean-contains": "^6.5.0",
-    "@turf/boolean-overlap": "^6.5.0",
     "@turf/difference": "^6.5.0",
     "@turf/helpers": "^6.5.0",
     "@turf/union": "^6.5.0",
diff --git a/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js b/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js
index c061958d8..e16ce8be5 100644
--- a/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js
+++ b/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js
@@ -1,6 +1,5 @@
 import {polygon as turfPolygon} from '@turf/helpers';
 import booleanContains from '@turf/boolean-contains';
-import booleanOverlap from '@turf/boolean-overlap';
 import Feature from 'ol/Feature';
 import EventType from 'ol/events/EventType';
 import Circle from 'ol/geom/Circle';
@@ -199,16 +198,7 @@ class ModifyPolygonBrush extends Modify {
         // Skip features that can't be represented as polygon.
         return;
       }
-      if (booleanOverlap(sketchPointPolygon, featurePolygon)) {
-        var coords = difference(featurePolygon, sketchPointPolygon);
-        if (!this.allowRemove_ && sketchPointArea > (new Polygon(coords)).getArea()) {
-          // If allowRemove_ is false, the modified polygon may not become smaller than
-          // the sketchPointPolygon.
-          return;
-        }
-        featureGeom.setCoordinates(coords);
-      } else if (booleanContains(sketchPointPolygon, featurePolygon)) {
-        if (this.allowRemove_) {
+      if (this.allowRemove_ && booleanContains(sketchPointPolygon, featurePolygon)) {
           this.features_.remove(feature);
           if (this.source_) {
             this.source_.removeFeature(feature);
@@ -216,8 +206,15 @@ class ModifyPolygonBrush extends Modify {
           this.dispatchEvent(
             new ModifyEvent(ModifyPolygonBrushEventType.MODIFYREMOVE, new Collection([feature]), event)
           );
+      } else {
+        var coords = difference(featurePolygon, sketchPointPolygon);
+        if (!this.allowRemove_ && sketchPointArea > (new Polygon(coords)).getArea()) {
+          // If allowRemove_ is false, the modified polygon may not become smaller than
+          // the sketchPointPolygon.
+          return;
         }
-      }
+        featureGeom.setCoordinates(coords);
+    }
     }, this);
   }
 
@@ -232,11 +229,7 @@ class ModifyPolygonBrush extends Modify {
         // Skip features that can't be represented as polygon.
         return;
       }
-      if (booleanOverlap(sketchPointPolygon, featurePolygon)) {
-        featureGeom.setCoordinates(union(sketchPointPolygon, featurePolygon));
-      } else if (booleanContains(sketchPointPolygon, featurePolygon)) {
-        featureGeom.setCoordinates(sketchPointGeom.getCoordinates());
-      }
+      featureGeom.setCoordinates(union(sketchPointPolygon, featurePolygon));
     }, this);
   }
 
diff --git a/resources/assets/js/annotations/ol/interaction/PolygonBrush.js b/resources/assets/js/annotations/ol/interaction/PolygonBrush.js
index 83f989fc7..04346cb83 100644
--- a/resources/assets/js/annotations/ol/interaction/PolygonBrush.js
+++ b/resources/assets/js/annotations/ol/interaction/PolygonBrush.js
@@ -1,5 +1,3 @@
-import booleanContains from '@turf/boolean-contains';
-import booleanOverlap from '@turf/boolean-overlap';
 import Circle from 'ol/geom/Circle';
 import Draw from 'ol/interaction/Draw';
 import Event from 'ol/events/Event.js';
@@ -245,12 +243,8 @@ class PolygonBrush extends Draw {
       const sketchCirclePolygon = turfPolygon(sketchCircleGeometry.getCoordinates());
       const sketchFeatureGeometry = this.sketchFeature_.getGeometry();
       const sketchFeaturePolygon = turfPolygon(sketchFeatureGeometry.getCoordinates());
-      if (booleanOverlap(sketchCirclePolygon, sketchFeaturePolygon)
-           || booleanContains(sketchCirclePolygon, sketchFeaturePolygon)) {
-          sketchFeatureGeometry.setCoordinates(
-            union(sketchCirclePolygon, sketchFeaturePolygon)
-          );
-      }
+
+      sketchFeatureGeometry.setCoordinates(union(sketchCirclePolygon, sketchFeaturePolygon));
     }
   }
 

From 9a4cdddaea28c937630370f3210edb564d16e90a Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Wed, 3 Jul 2024 16:58:06 +0200
Subject: [PATCH 12/27] Remove unnecessary option

---
 resources/assets/js/annotations/ol/source/Canvas.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/resources/assets/js/annotations/ol/source/Canvas.js b/resources/assets/js/annotations/ol/source/Canvas.js
index d1d0882fa..aefa0d14c 100644
--- a/resources/assets/js/annotations/ol/source/Canvas.js
+++ b/resources/assets/js/annotations/ol/source/Canvas.js
@@ -29,12 +29,6 @@ class Canvas extends Image {
      */
     this.canvas_ = new ImageCanvas(options.canvasExtent, resolution, 1, options.canvas);
 
-    /**
-     * @private
-     * @type {import("../size.js").Size}
-     */
-    this.canvasSize_ = options.canvasSize ? options.canvasSize : null;
-
     listen(this.canvas_, EventType.CHANGE, this.handleImageChange, this);
   }
 

From f47de14220b90e3689d3af2338c44d48e3381720 Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Wed, 3 Jul 2024 16:58:17 +0200
Subject: [PATCH 13/27] Upgrade to OpenLayers v9 (for real)

The last commit only upgraded to v8.
---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b80e1a2b8..d2ff933c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
         "echarts": "^5.3.2",
         "jsts": "^2.11.0",
         "magic-wand-tool": "^1.1.4",
-        "ol": "^8.2.0",
+        "ol": "^9.2.4",
         "polymorph-js": "^0.2.4",
         "uiv": "^1.2.4",
         "vue": "^2.0.5",
@@ -7724,9 +7724,9 @@
       "dev": true
     },
     "node_modules/ol": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/ol/-/ol-8.2.0.tgz",
-      "integrity": "sha512-/m1ddd7Jsp4Kbg+l7+ozR5aKHAZNQOBAoNZ5pM9Jvh4Etkf0WGkXr9qXd7PnhmwiC1Hnc2Toz9XjCzBBvexfXw==",
+      "version": "9.2.4",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-9.2.4.tgz",
+      "integrity": "sha512-bsbu4ObaAlbELMIZWnYEvX4Z9jO+OyCBshtODhDKmqYTPEfnKOX3RieCr97tpJkqWTZvyV4tS9UQDvHoCdxS+A==",
       "dependencies": {
         "color-rgba": "^3.0.0",
         "color-space": "^2.0.1",
@@ -17203,9 +17203,9 @@
       "dev": true
     },
     "ol": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/ol/-/ol-8.2.0.tgz",
-      "integrity": "sha512-/m1ddd7Jsp4Kbg+l7+ozR5aKHAZNQOBAoNZ5pM9Jvh4Etkf0WGkXr9qXd7PnhmwiC1Hnc2Toz9XjCzBBvexfXw==",
+      "version": "9.2.4",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-9.2.4.tgz",
+      "integrity": "sha512-bsbu4ObaAlbELMIZWnYEvX4Z9jO+OyCBshtODhDKmqYTPEfnKOX3RieCr97tpJkqWTZvyV4tS9UQDvHoCdxS+A==",
       "requires": {
         "color-rgba": "^3.0.0",
         "color-space": "^2.0.1",
diff --git a/package.json b/package.json
index f7473fff0..92fa9fae0 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "echarts": "^5.3.2",
     "jsts": "^2.11.0",
     "magic-wand-tool": "^1.1.4",
-    "ol": "^8.2.0",
+    "ol": "^9.2.4",
     "polymorph-js": "^0.2.4",
     "uiv": "^1.2.4",
     "vue": "^2.0.5",

From 1f3f0946bfb38e368d1a971a33c2e6fd9bd71955 Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Thu, 4 Jul 2024 13:40:45 +0200
Subject: [PATCH 14/27] Fix screenshot button behavior

---
 .../components/screenshotButton.vue           | 45 +++----------------
 1 file changed, 6 insertions(+), 39 deletions(-)

diff --git a/resources/assets/js/annotations/components/screenshotButton.vue b/resources/assets/js/annotations/components/screenshotButton.vue
index 29509a674..c1b766279 100644
--- a/resources/assets/js/annotations/components/screenshotButton.vue
+++ b/resources/assets/js/annotations/components/screenshotButton.vue
@@ -130,46 +130,13 @@ export default {
         },
         handleRenderComplete(e) {
             // See: https://openlayers.org/en/v6.15.1/examples/export-map.html
-            const mapCanvas = document.createElement('canvas');
-            const size = e.target.getSize();
-            mapCanvas.width = size[0];
-            mapCanvas.height = size[1];
-            const mapContext = mapCanvas.getContext('2d');
-            Array.prototype.forEach.call(
-                e.target.getViewport().querySelectorAll('.ol-layer canvas, canvas.ol-layer'),
-                function (canvas) {
-                    if (canvas.width <= 0) {
-                        return;
-                    }
-
-                    let matrix;
-                    const transform = canvas.style.transform;
-                    if (transform) {
-                        // Get the transform parameters from the style's transform matrix
-                        matrix = transform
-                            .match(/^matrix\(([^\(]*)\)$/)[1]
-                            .split(',')
-                            .map(Number);
-                    } else {
-                        matrix = [
-                            parseFloat(canvas.style.width) / canvas.width,
-                            0,
-                            0,
-                            parseFloat(canvas.style.height) / canvas.height,
-                            0,
-                            0,
-                        ];
-                    }
-                    // Apply the transform to the export map context
-                    CanvasRenderingContext2D.prototype.setTransform.apply(
-                        mapContext,
-                        matrix
-                    );
-                    mapContext.drawImage(canvas, 0, 0);
-                }
-            );
+            // This version is modified/simplified because we want the screenshot
+            // in the actual device pixel ratio and not at the original size.
+            const canvas = e.target
+                .getViewport()
+                .querySelector('.ol-layer canvas, canvas.ol-layer');
 
-            this.makeBlob(mapCanvas).then(this.download).catch(this.handleError);
+            this.makeBlob(canvas).then(this.download).catch(this.handleError);
         },
         handleError(message) {
             Messages.danger(message);

From f4737002ab855405ba706947b5a3f5fa35742101 Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Thu, 4 Jul 2024 13:58:06 +0200
Subject: [PATCH 15/27] Fix minimap update on color adjustment

---
 resources/assets/js/annotations/annotatorContainer.vue    | 5 ++---
 .../assets/js/annotations/components/annotationCanvas.vue | 8 ++++----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/resources/assets/js/annotations/annotatorContainer.vue b/resources/assets/js/annotations/annotatorContainer.vue
index 84f295869..a19df869b 100644
--- a/resources/assets/js/annotations/annotatorContainer.vue
+++ b/resources/assets/js/annotations/annotatorContainer.vue
@@ -501,10 +501,9 @@ export default {
             }, 10000);
         },
         updateColorAdjustment(params) {
-            let canvas = this.$refs.canvas;
-            debounce(function () {
+            debounce(() => {
                 ImagesStore.updateColorAdjustment(params);
-                canvas.render();
+                this.$refs.canvas.fireImageSourceChanged();
             }, 100, 'annotations.color-adjustment.update');
         },
         handleSettingsChange(key, value) {
diff --git a/resources/assets/js/annotations/components/annotationCanvas.vue b/resources/assets/js/annotations/components/annotationCanvas.vue
index 3acb55354..14158820d 100644
--- a/resources/assets/js/annotations/components/annotationCanvas.vue
+++ b/resources/assets/js/annotations/components/annotationCanvas.vue
@@ -583,10 +583,10 @@ export default {
                 this.resetInteractionMode();
             }
         },
-        render() {
-            if (this.map) {
-                this.map.render();
-                this.$emit('render');
+        fireImageSourceChanged() {
+            const source = this.imageLayer?.getSource();
+            if (source) {
+                source.changed();
             }
         },
         handleRegularImage(image) {

From 708fd0d2846c5c3f88a6099b720c8ad773dedc24 Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Thu, 4 Jul 2024 14:21:23 +0200
Subject: [PATCH 16/27] Fix padding of zoom to whole image interaction

---
 resources/assets/js/annotations/components/annotationCanvas.vue | 2 +-
 .../assets/js/videos/components/videoScreen/videoPlayback.vue   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/assets/js/annotations/components/annotationCanvas.vue b/resources/assets/js/annotations/components/annotationCanvas.vue
index 14158820d..f0ccc912a 100644
--- a/resources/assets/js/annotations/components/annotationCanvas.vue
+++ b/resources/assets/js/annotations/components/annotationCanvas.vue
@@ -733,7 +733,6 @@ export default {
                 projection: this.projection,
                 center: center,
                 resolution: this.resolution,
-                zoomFactor: 2,
                 // Allow a maximum of 100x magnification for non-tiled images. More
                 // cannot be represented in the URL parameters.
                 minResolution: 0.01,
@@ -741,6 +740,7 @@ export default {
                 extent: extent,
                 showFullExtent: true,
                 constrainOnlyCenter: true,
+                padding: [10, 10, 10, 10],
             }));
 
             if (this.resolution === undefined) {
diff --git a/resources/assets/js/videos/components/videoScreen/videoPlayback.vue b/resources/assets/js/videos/components/videoScreen/videoPlayback.vue
index 28b5b44f3..85015a0e1 100644
--- a/resources/assets/js/videos/components/videoScreen/videoPlayback.vue
+++ b/resources/assets/js/videos/components/videoScreen/videoPlayback.vue
@@ -64,11 +64,11 @@ export default {
                 // Center is required but will be updated immediately with fit().
                 center: [0, 0],
                 projection: projection,
-                // zoomFactor: 2,
                 minResolution: this.minResolution,
                 extent: this.extent,
                 showFullExtent: true,
                 constrainOnlyCenter: true,
+                padding: [10, 10, 10, 10],
             }));
 
             this.map.getView().fit(this.extent);

From 03ee712a335911b12b97754781c4636f4d15335a Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Fri, 5 Jul 2024 12:10:45 +0200
Subject: [PATCH 17/27] Fix select interaction behavior

---
 resources/assets/js/annotations/stores/styles.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/resources/assets/js/annotations/stores/styles.js b/resources/assets/js/annotations/stores/styles.js
index dc5057407..6f3ffc7d0 100644
--- a/resources/assets/js/annotations/stores/styles.js
+++ b/resources/assets/js/annotations/stores/styles.js
@@ -50,6 +50,10 @@ let selectedCircleFill = new Fill({
     color: colors.orange,
 });
 
+let transparentFill =  new Fill({
+    color: 'transparent',
+});
+
 let defaultCircleStroke = new Stroke({
     color: colors.white,
     width: 2
@@ -92,9 +96,7 @@ export default {
                     // Add transparent fill for hit detection inside of circles and
                     // polygons.
                     // See https://github.com/openlayers/openlayers/pull/7750
-                    fill: new Fill({
-                        color: 'transparent',
-                    }),
+                    fill: transparentFill,
                 }),
                 new Style({
                     stroke: new Stroke({
@@ -115,6 +117,10 @@ export default {
                 fill: selectedCircleFill,
                 stroke: selectedCircleStroke,
             }),
+            // Add transparent fill for hit detection inside of circles and
+            // polygons.
+            // See https://github.com/openlayers/openlayers/pull/7750
+            fill: transparentFill,
             zIndex: 200,
         }),
         new Style({

From 6b45674e231735f7c81135838f67b2da538ded7d Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Fri, 5 Jul 2024 14:42:19 +0200
Subject: [PATCH 18/27] Fix flickering minimap with tiled image

---
 .../js/annotations/components/minimap.vue       | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/resources/assets/js/annotations/components/minimap.vue b/resources/assets/js/annotations/components/minimap.vue
index c83ea6e7d..09cb943aa 100644
--- a/resources/assets/js/annotations/components/minimap.vue
+++ b/resources/assets/js/annotations/components/minimap.vue
@@ -10,6 +10,7 @@ import TileLayer from 'ol/layer/Tile';
 import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
 import View from 'ol/View';
+import ZoomifySource from 'ol/source/Zoomify';
 import {CancelableMap as Map} from '../ol/CancelableMap';
 import {fromExtent} from 'ol/geom/Polygon';
 import {getCenter} from 'ol/extent';
@@ -120,7 +121,21 @@ export default {
         },
         handleChangeSource(e) {
             if (this.currentLayer) {
-                this.currentLayer.setSource(e.target.getSource());
+                let source = e.target.getSource();
+
+                // Create a new tile source instead of sharing it because otherwise the
+                // minimap would flicker on zoom/pan sometimes.
+                if (this.currentLayer instanceof TileLayer) {
+                    let image = this.$parent.image
+                    source = new ZoomifySource({
+                        url: image.url,
+                        size: [image.width, image.height],
+                        extent: [0, 0, image.width, image.height],
+                        transition: 0,
+                    });
+                }
+
+                this.currentLayer.setSource(source);
             }
         },
         initImageLayer(layers) {

From 61c6bcda622e3272e6203be20f76fb02d312ecfd Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Fri, 5 Jul 2024 15:05:49 +0200
Subject: [PATCH 19/27] Fix ESLint errors

---
 .../assets/js/annotations/ol/geom/flat/difference.js      | 1 -
 resources/assets/js/annotations/ol/geom/flat/union.js     | 1 -
 .../js/annotations/ol/interaction/ModifyPolygonBrush.js   | 6 +++---
 .../assets/js/annotations/ol/interaction/PolygonBrush.js  | 4 ++--
 resources/assets/js/annotations/ol/source/Canvas.js       | 6 +++---
 .../videos/components/videoScreen/annotationPlayback.vue  | 8 ++++----
 .../js/videos/components/videoScreen/videoPlayback.vue    | 1 -
 7 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/resources/assets/js/annotations/ol/geom/flat/difference.js b/resources/assets/js/annotations/ol/geom/flat/difference.js
index 83d68897c..3c4e2776c 100644
--- a/resources/assets/js/annotations/ol/geom/flat/difference.js
+++ b/resources/assets/js/annotations/ol/geom/flat/difference.js
@@ -1,5 +1,4 @@
 import turfDifference from '@turf/difference';
-import {polygon as turfPolygon} from '@turf/helpers';
 import Polygon from 'ol/geom/Polygon.js';
 import {reducePrecision} from './simplify.js';
 
diff --git a/resources/assets/js/annotations/ol/geom/flat/union.js b/resources/assets/js/annotations/ol/geom/flat/union.js
index 023eda5f4..59ce4e09c 100644
--- a/resources/assets/js/annotations/ol/geom/flat/union.js
+++ b/resources/assets/js/annotations/ol/geom/flat/union.js
@@ -1,5 +1,4 @@
 import turfUnion from '@turf/union';
-import {polygon as turfPolygon} from '@turf/helpers';
 import {reducePrecision} from './simplify.js';
 
 export function union(first, second) {
diff --git a/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js b/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js
index e16ce8be5..ba972debf 100644
--- a/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js
+++ b/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js
@@ -204,7 +204,7 @@ class ModifyPolygonBrush extends Modify {
             this.source_.removeFeature(feature);
           }
           this.dispatchEvent(
-            new ModifyEvent(ModifyPolygonBrushEventType.MODIFYREMOVE, new Collection([feature]), event)
+            new ModifyEvent(ModifyEventType.MODIFYREMOVE, new Collection([feature]), event)
           );
       } else {
         var coords = difference(featurePolygon, sketchPointPolygon);
@@ -218,7 +218,7 @@ class ModifyPolygonBrush extends Modify {
     }, this);
   }
 
-  addCurrentFeatures_(event) {
+  addCurrentFeatures_() {
     const sketchPointGeom = fromCircle(this.sketchCircle_);
     let sketchPointPolygon = turfPolygon(sketchPointGeom.getCoordinates());
     this.features_.getArray().forEach(function (feature) {
@@ -247,7 +247,7 @@ class ModifyPolygonBrush extends Modify {
 function getDefaultStyleFunction() {
   const style = createEditingStyle();
 
-  return function(feature, resolution) {
+  return function() {
     return style['Circle'];
   }
 }
diff --git a/resources/assets/js/annotations/ol/interaction/PolygonBrush.js b/resources/assets/js/annotations/ol/interaction/PolygonBrush.js
index 04346cb83..912481537 100644
--- a/resources/assets/js/annotations/ol/interaction/PolygonBrush.js
+++ b/resources/assets/js/annotations/ol/interaction/PolygonBrush.js
@@ -168,7 +168,7 @@ class PolygonBrush extends Draw {
     return false;
   }
 
-  handleUpEvent(event) {
+  handleUpEvent() {
     if (this.handlingDownUpSequence && this.isDrawing_) {
       this.finishDrawing();
 
@@ -282,7 +282,7 @@ function getDefaultStyleFunction() {
         styles['LineString']
       );
 
-  return function(feature, resolution) {
+  return function(feature) {
     return styles[feature.getGeometry().getType()];
   };
 }
diff --git a/resources/assets/js/annotations/ol/source/Canvas.js b/resources/assets/js/annotations/ol/source/Canvas.js
index aefa0d14c..730a932b0 100644
--- a/resources/assets/js/annotations/ol/source/Canvas.js
+++ b/resources/assets/js/annotations/ol/source/Canvas.js
@@ -2,7 +2,7 @@ import Image from 'ol/source/Image';
 import ImageCanvas from 'ol/ImageCanvas';
 import {listen} from 'ol/events';
 import EventType from 'ol/events/EventType';
-import {intersects, getHeight} from 'ol/extent';
+import {getHeight} from 'ol/extent';
 
 /**
  * @classdesc
@@ -35,11 +35,11 @@ class Canvas extends Image {
   /**
    * @inheritDoc
    */
-  getImageInternal(extent, resolution, pixelRatio, projection) {
+  getImageInternal() {
     // No need to check if extent intersects canvas. The canvas is always visible
     // in our apllication.
     return this.canvas_;
-  };
+  }
 }
 
 export default Canvas;
diff --git a/resources/assets/js/videos/components/videoScreen/annotationPlayback.vue b/resources/assets/js/videos/components/videoScreen/annotationPlayback.vue
index 8860d60bc..e9897176e 100644
--- a/resources/assets/js/videos/components/videoScreen/annotationPlayback.vue
+++ b/resources/assets/js/videos/components/videoScreen/annotationPlayback.vue
@@ -154,8 +154,8 @@ export default {
             switch (shape) {
                 case 'Point':
                     return new Point(points[0]);
-                case 'Rectangle':
-                    return new Rectangle([points]);
+                // case 'Rectangle':
+                //     return new Rectangle([points]);
                 case 'Polygon':
                     return new Polygon([points]);
                 case 'LineString':
@@ -163,8 +163,8 @@ export default {
                 case 'Circle':
                     // radius is the x value of the second point of the circle
                     return new Circle(points[0], points[1][0]);
-                case 'Ellipse':
-                    return new Ellipse([points]);
+                // case 'Ellipse':
+                //     return new Ellipse([points]);
                 default:
                     // unsupported shapes are ignored
                     console.error('Unknown annotation shape: ' + shape);
diff --git a/resources/assets/js/videos/components/videoScreen/videoPlayback.vue b/resources/assets/js/videos/components/videoScreen/videoPlayback.vue
index 85015a0e1..0d5777a68 100644
--- a/resources/assets/js/videos/components/videoScreen/videoPlayback.vue
+++ b/resources/assets/js/videos/components/videoScreen/videoPlayback.vue
@@ -4,7 +4,6 @@ import ImageLayer from 'ol/layer/Image';
 import Keyboard from '../../../core/keyboard';
 import Projection from 'ol/proj/Projection';
 import View from 'ol/View';
-import {apply as applyTransform} from 'ol/transform';
 
 /**
  * Mixin for the videoScreen component that contains logic for the video playback.

From 19d96f8643bf9f0ab555a888ac6df8a9a62bcc38 Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Fri, 5 Jul 2024 16:52:04 +0200
Subject: [PATCH 20/27] Make video annotation rendering more efficient

---
 .../videoScreen/annotationPlayback.vue        | 33 ++++++++++++-------
 .../components/videoScreen/videoPlayback.vue  |  9 -----
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/resources/assets/js/videos/components/videoScreen/annotationPlayback.vue b/resources/assets/js/videos/components/videoScreen/annotationPlayback.vue
index e9897176e..9519f737e 100644
--- a/resources/assets/js/videos/components/videoScreen/annotationPlayback.vue
+++ b/resources/assets/js/videos/components/videoScreen/annotationPlayback.vue
@@ -48,7 +48,8 @@ export default {
         },
     },
     methods: {
-        refreshAllAnnotations(time) {
+        refreshAllAnnotations() {
+            let time = this.video.currentTime;
             let source = this.annotationSource;
             let selected = this.selectedFeatures;
             let annotations = this.annotationsPreparedToRender;
@@ -122,7 +123,10 @@ export default {
             }
 
             Object.values(newRendered).forEach((feature) => {
-                this.updateGeometry(feature, time);
+                let annotation = feature.get('annotation');
+                let points = annotation.interpolatePoints(time);
+                let geometry = feature.getGeometry();
+                this.updateGeometry(geometry, points);
             });
         },
         refreshSingleAnnotation(annotation) {
@@ -143,11 +147,6 @@ export default {
 
             return feature;
         },
-        updateGeometry(feature, time) {
-            let annotation = feature.get('annotation');
-            let points = annotation.interpolatePoints(time);
-            feature.setGeometry(this.getGeometryFromPoints(annotation.shape, points));
-        },
         getGeometryFromPoints(shape, points) {
             points = this.convertPointsFromDbToOl(points);
 
@@ -171,6 +170,20 @@ export default {
                     return;
             }
         },
+        updateGeometry(geometry, points) {
+            points = this.convertPointsFromDbToOl(points);
+
+            if (geometry instanceof Point) {
+                geometry.setCoordinates(points[0]);
+            } else if (geometry instanceof LineString) {
+                geometry.setCoordinates(points);
+            } else if (geometry instanceof Circle) {
+                geometry.setCenter(points[0]);
+                geometry.setRadius(points[1][0]);
+            } else {
+                geometry.setCoordinates([points]);
+            }
+        },
         getPointsFromGeometry(geometry) {
             let points;
             switch (geometry.getType()) {
@@ -233,11 +246,9 @@ export default {
         },
     },
     created() {
-        this.$on('refresh', this.refreshAllAnnotations);
         this.$once('map-ready', () => {
-            this.$watch('annotationsRevision', () => {
-                this.refreshAllAnnotations(this.video.currentTime);
-            });
+            this.$watch('annotationsRevision', this.refreshAllAnnotations);
+            this.videoSource.on('change', this.refreshAllAnnotations);
         });
     },
 };
diff --git a/resources/assets/js/videos/components/videoScreen/videoPlayback.vue b/resources/assets/js/videos/components/videoScreen/videoPlayback.vue
index 0d5777a68..33a0ca56d 100644
--- a/resources/assets/js/videos/components/videoScreen/videoPlayback.vue
+++ b/resources/assets/js/videos/components/videoScreen/videoPlayback.vue
@@ -15,10 +15,7 @@ export default {
         return {
             playing: false,
             animationFrameId: null,
-            // Refresh the annotations only every x ms.
-            refreshRate: 30,
             renderCurrentTime: -1,
-            refreshLastTime: Date.now(),
             extent: [0, 0, 0, 0],
             // Allow a maximum of 100x magnification. More cannot be represented in the
             // URL parameters.
@@ -78,12 +75,6 @@ export default {
                 this.renderCurrentTime = this.video.currentTime;
                 this.videoContext.drawImage(this.video, 0, 0, this.videoCanvas.width, this.videoCanvas.height);
                 this.videoSource.changed();
-
-                let now = Date.now();
-                if (force || (now - this.refreshLastTime) >= this.refreshRate) {
-                    this.$emit('refresh', this.video.currentTime);
-                    this.refreshLastTime = now;
-                }
             }
         },
         startRenderLoop() {

From 01b4b83c1b334545379623bd6b0fefc31f5c2858 Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Mon, 8 Jul 2024 16:07:04 +0200
Subject: [PATCH 21/27] Make annotation selection more efficient

The old code removed and added all annotations again at all times.
A change is only required if annotations are de-/selected in the
sidebar.
---
 .../components/annotationCanvas.vue           | 30 +++++++++++++--
 .../js/videos/components/videoScreen.vue      | 38 +++++++++++++++----
 2 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/resources/assets/js/annotations/components/annotationCanvas.vue b/resources/assets/js/annotations/components/annotationCanvas.vue
index f0ccc912a..3fbae40d4 100644
--- a/resources/assets/js/annotations/components/annotationCanvas.vue
+++ b/resources/assets/js/annotations/components/annotationCanvas.vue
@@ -707,12 +707,34 @@ export default {
             this.resetHoveredAnnotations();
         },
         selectedAnnotations(annotations) {
-            let source = this.annotationSource;
+            // This allows selection of annotations outside OpenLayers and forwards
+            // the state to the SelectInteraction.
             let features = this.selectedFeatures;
-            features.clear();
-            annotations.forEach(function (annotation) {
-                features.push(source.getFeatureById(annotation.id));
+            let featureIdMap = {};
+            let annotationIdMap = {};
+            annotations.forEach(a => annotationIdMap[a.id] = true);
+            let toRemove = [];
+
+            features.forEach(f => {
+                const id = f.getId();
+                if (annotationIdMap[id]) {
+                    featureIdMap[id] = true;
+                } else {
+                    toRemove.push(f);
+                }
             });
+
+            if (toRemove.length === features.getLength()) {
+                features.clear();
+            } else {
+                toRemove.forEach(f => features.remove(f));
+            }
+
+            annotations
+                .filter(a => !featureIdMap[a.id])
+                .forEach(
+                    a => features.push(this.annotationSource.getFeatureById(a.id))
+                );
         },
         extent(extent, oldExtent) {
             // The extent only truly changes if the width and height changed.
diff --git a/resources/assets/js/videos/components/videoScreen.vue b/resources/assets/js/videos/components/videoScreen.vue
index 4aa849285..c19ac4069 100644
--- a/resources/assets/js/videos/components/videoScreen.vue
+++ b/resources/assets/js/videos/components/videoScreen.vue
@@ -575,18 +575,40 @@ export default {
     },
     watch: {
         selectedAnnotations(annotations) {
+            // This allows selection of annotations outside OpenLayers and forwards
+            // the state to the SelectInteraction.
             let source = this.annotationSource;
             let features = this.selectedFeatures;
-            if (source && features) {
-                let feature;
+            if (!source || !features) {
+                return;
+            }
+
+            let featureIdMap = {};
+            let annotationIdMap = {};
+            annotations.forEach(a => annotationIdMap[a.id] = true);
+            let toRemove = [];
+
+            features.forEach(f => {
+                const id = f.getId();
+                if (annotationIdMap[id]) {
+                    featureIdMap[id] = true;
+                } else {
+                    toRemove.push(f);
+                }
+            });
+
+            if (toRemove.length === features.getLength()) {
                 features.clear();
-                annotations.forEach(function (annotation) {
-                    feature = source.getFeatureById(annotation.id);
-                    if (feature) {
-                        features.push(feature);
-                    }
-                });
+            } else {
+                toRemove.forEach(f => features.remove(f));
             }
+
+            annotations
+                .filter(a => !featureIdMap[a.id])
+                .map(a => source.getFeatureById(a.id))
+                // Ignore a==null because the selected annotation may not exist in the
+                // current video frame.
+                .forEach(a => a && features.push(a));
         },
         isDefaultInteractionMode(isDefault) {
             this.selectInteraction.setActive(isDefault);

From ed1707117c89e8f133cbe3f645dd931bd2cc0357 Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Wed, 10 Jul 2024 15:43:40 +0200
Subject: [PATCH 22/27] Enable Ellipse and Rectangle tools again with
 @biigle/ol:9.2.4

---
 package-lock.json                             | 59 ++++++++---------
 package.json                                  |  2 +-
 .../components/annotationCanvas.vue           | 64 +++++++++----------
 .../annotationCanvas/drawInteractions.vue     |  4 +-
 .../annotationCanvas/measureInteraction.vue   |  6 +-
 .../polygonBrushInteraction.vue               |  4 +-
 .../components/annotationCanvas/sampling.vue  | 14 ++--
 .../annotations/components/measureTooltip.vue |  6 +-
 .../js/annotations/components/minimap.vue     | 20 +++---
 resources/assets/js/annotations/main.js       |  2 +-
 .../annotations/mixins/annotationTooltip.vue  |  2 +-
 .../annotations/ol/AttachLabelInteraction.js  |  2 +-
 .../js/annotations/ol/MagicWandInteraction.js | 22 +++----
 .../js/annotations/ol/PolygonValidator.js     | 16 ++---
 .../js/annotations/ol/TranslateInteraction.js |  2 +-
 .../js/annotations/ol/ZoomToNativeControl.js  |  2 +-
 .../js/annotations/ol/geom/flat/difference.js |  2 +-
 .../ol/interaction/ModifyPolygonBrush.js      | 22 +++----
 .../ol/interaction/PolygonBrush.js            | 22 +++----
 .../assets/js/annotations/ol/source/Canvas.js | 10 +--
 .../assets/js/annotations/snapInteraction.vue |  8 +--
 .../assets/js/annotations/stores/styles.js    | 14 ++--
 .../js/videos/components/videoScreen.vue      | 18 +++---
 .../videoScreen/annotationPlayback.vue        | 22 +++----
 .../videoScreen/drawInteractions.vue          |  6 +-
 .../videoScreen/modifyInteractions.vue        |  6 +-
 .../videoScreen/polygonBrushInteractions.vue  | 12 ++--
 .../components/videoScreen/videoPlayback.vue  |  6 +-
 28 files changed, 186 insertions(+), 189 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d2ff933c8..7ecb7ab2a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,6 +6,7 @@
     "": {
       "license": "GPL-3.0-only",
       "dependencies": {
+        "@biigle/ol": "^9.2.4",
         "@fortawesome/fontawesome-free": "^5.2.0",
         "@turf/boolean-contains": "^6.5.0",
         "@turf/difference": "^6.5.0",
@@ -15,7 +16,6 @@
         "echarts": "^5.3.2",
         "jsts": "^2.11.0",
         "magic-wand-tool": "^1.1.4",
-        "ol": "^9.2.4",
         "polymorph-js": "^0.2.4",
         "uiv": "^1.2.4",
         "vue": "^2.0.5",
@@ -2101,6 +2101,20 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@biigle/ol": {
+      "version": "9.2.4",
+      "resolved": "https://npm.pkg.github.com/download/@biigle/ol/9.2.4/1c025faf01d9f35d5cc036d4c6bc48538a3ba7d1",
+      "integrity": "sha512-scfuI2HDw6p666koJv7vGSzihCWZY+Ld6zGsLKTBddMufIeKE6XbUrQXxLWmPWiNYUQ11OJoVUo3NIXsQnxo0w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "color-rgba": "^3.0.0",
+        "color-space": "^2.0.1",
+        "earcut": "^2.2.3",
+        "geotiff": "^2.0.7",
+        "pbf": "3.2.1",
+        "rbush": "^3.0.1"
+      }
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz",
@@ -7723,23 +7737,6 @@
       "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
       "dev": true
     },
-    "node_modules/ol": {
-      "version": "9.2.4",
-      "resolved": "https://registry.npmjs.org/ol/-/ol-9.2.4.tgz",
-      "integrity": "sha512-bsbu4ObaAlbELMIZWnYEvX4Z9jO+OyCBshtODhDKmqYTPEfnKOX3RieCr97tpJkqWTZvyV4tS9UQDvHoCdxS+A==",
-      "dependencies": {
-        "color-rgba": "^3.0.0",
-        "color-space": "^2.0.1",
-        "earcut": "^2.2.3",
-        "geotiff": "^2.0.7",
-        "pbf": "3.2.1",
-        "rbush": "^3.0.1"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/openlayers"
-      }
-    },
     "node_modules/on-finished": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
@@ -12787,6 +12784,19 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@biigle/ol": {
+      "version": "9.2.4",
+      "resolved": "https://npm.pkg.github.com/download/@biigle/ol/9.2.4/1c025faf01d9f35d5cc036d4c6bc48538a3ba7d1",
+      "integrity": "sha512-scfuI2HDw6p666koJv7vGSzihCWZY+Ld6zGsLKTBddMufIeKE6XbUrQXxLWmPWiNYUQ11OJoVUo3NIXsQnxo0w==",
+      "requires": {
+        "color-rgba": "^3.0.0",
+        "color-space": "^2.0.1",
+        "earcut": "^2.2.3",
+        "geotiff": "^2.0.7",
+        "pbf": "3.2.1",
+        "rbush": "^3.0.1"
+      }
+    },
     "@discoveryjs/json-ext": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz",
@@ -17202,19 +17212,6 @@
       "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
       "dev": true
     },
-    "ol": {
-      "version": "9.2.4",
-      "resolved": "https://registry.npmjs.org/ol/-/ol-9.2.4.tgz",
-      "integrity": "sha512-bsbu4ObaAlbELMIZWnYEvX4Z9jO+OyCBshtODhDKmqYTPEfnKOX3RieCr97tpJkqWTZvyV4tS9UQDvHoCdxS+A==",
-      "requires": {
-        "color-rgba": "^3.0.0",
-        "color-space": "^2.0.1",
-        "earcut": "^2.2.3",
-        "geotiff": "^2.0.7",
-        "pbf": "3.2.1",
-        "rbush": "^3.0.1"
-      }
-    },
     "on-finished": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
diff --git a/package.json b/package.json
index 92fa9fae0..88408ea23 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "vue-template-compiler": "^2.6.11"
   },
   "dependencies": {
+    "@biigle/ol": "^9.2.4",
     "@fortawesome/fontawesome-free": "^5.2.0",
     "@turf/boolean-contains": "^6.5.0",
     "@turf/difference": "^6.5.0",
@@ -32,7 +33,6 @@
     "echarts": "^5.3.2",
     "jsts": "^2.11.0",
     "magic-wand-tool": "^1.1.4",
-    "ol": "^9.2.4",
     "polymorph-js": "^0.2.4",
     "uiv": "^1.2.4",
     "vue": "^2.0.5",
diff --git a/resources/assets/js/annotations/components/annotationCanvas.vue b/resources/assets/js/annotations/components/annotationCanvas.vue
index 3fbae40d4..4484b7d98 100644
--- a/resources/assets/js/annotations/components/annotationCanvas.vue
+++ b/resources/assets/js/annotations/components/annotationCanvas.vue
@@ -3,49 +3,49 @@ import * as PolygonValidator from '../ol/PolygonValidator';
 import AnnotationTooltip from './annotationCanvas/annotationTooltip';
 import AttachLabelInteraction from './annotationCanvas/attachLabelInteraction';
 import CanvasSource from '../ol/source/Canvas';
-import Circle from 'ol/geom/Circle';
-import Collection from 'ol/Collection';
+import Circle from '@biigle/ol/geom/Circle';
+import Collection from '@biigle/ol/Collection';
 import ControlButton from './controlButton';
 import DrawInteractions from './annotationCanvas/drawInteractions';
-// import Ellipse from 'ol/geom/Ellipse';
+import Ellipse from '@biigle/ol/geom/Ellipse';
 import Events from '../../core/events';
-import Feature from 'ol/Feature';
-import ImageLayer from 'ol/layer/Image';
+import Feature from '@biigle/ol/Feature';
+import ImageLayer from '@biigle/ol/layer/Image';
 import Keyboard from '../../core/keyboard';
 import LabelIndicator from './labelIndicator';
 import Lawnmower from './annotationCanvas/lawnmower';
-import LineString from 'ol/geom/LineString';
+import LineString from '@biigle/ol/geom/LineString';
 import MagicWandInteraction from './annotationCanvas/magicWandInteraction';
-import Map from 'ol/Map';
+import Map from '@biigle/ol/Map';
 import MeasureInteraction from './annotationCanvas/measureInteraction';
 import Minimap from './minimap';
-import ModifyInteraction from 'ol/interaction/Modify';
+import ModifyInteraction from '@biigle/ol/interaction/Modify';
 import MousePosition from './annotationCanvas/mousePosition';
-import MouseWheelZoom from 'ol/interaction/MouseWheelZoom';
-import Point from 'ol/geom/Point';
-import Polygon from 'ol/geom/Polygon';
+import MouseWheelZoom from '@biigle/ol/interaction/MouseWheelZoom';
+import Point from '@biigle/ol/geom/Point';
+import Polygon from '@biigle/ol/geom/Polygon';
 import PolygonBrushInteraction from './annotationCanvas/polygonBrushInteraction';
-import Projection from 'ol/proj/Projection';
-// import Rectangle from 'ol/geom/Rectangle';
+import Projection from '@biigle/ol/proj/Projection';
+import Rectangle from '@biigle/ol/geom/Rectangle';
 import Sampling from './annotationCanvas/sampling';
 import ScaleLine from './annotationCanvas/scaleLine';
-import SelectInteraction from 'ol/interaction/Select';
+import SelectInteraction from '@biigle/ol/interaction/Select';
 import Styles from '../stores/styles';
-import TileLayer from 'ol/layer/Tile';
+import TileLayer from '@biigle/ol/layer/Tile';
 import TranslateInteraction from './annotationCanvas/translateInteraction';
-import VectorLayer from 'ol/layer/Vector';
-import VectorSource from 'ol/source/Vector';
-import View from 'ol/View';
-import ZoomControl from 'ol/control/Zoom';
-import ZoomifySource from 'ol/source/Zoomify';
+import VectorLayer from '@biigle/ol/layer/Vector';
+import VectorSource from '@biigle/ol/source/Vector';
+import View from '@biigle/ol/View';
+import ZoomControl from '@biigle/ol/control/Zoom';
+import ZoomifySource from '@biigle/ol/source/Zoomify';
 import ZoomLevel from './annotationCanvas/zoomLevel';
-import ZoomToExtentControl from 'ol/control/ZoomToExtent';
+import ZoomToExtentControl from '@biigle/ol/control/ZoomToExtent';
 import ZoomToNativeControl from '../ol/ZoomToNativeControl';
-import {click as clickCondition} from 'ol/events/condition';
-import {defaults as defaultInteractions} from 'ol/interaction'
-import {getCenter} from 'ol/extent';
-import {shiftKeyOnly as shiftKeyOnlyCondition} from 'ol/events/condition';
-import {singleClick as singleClickCondition} from 'ol/events/condition';
+import {click as clickCondition} from '@biigle/ol/events/condition';
+import {defaults as defaultInteractions} from '@biigle/ol/interaction'
+import {getCenter} from '@biigle/ol/extent';
+import {shiftKeyOnly as shiftKeyOnlyCondition} from '@biigle/ol/events/condition';
+import {singleClick as singleClickCondition} from '@biigle/ol/events/condition';
 import { isInvalidShape } from '../utils';
 
 /**
@@ -368,8 +368,8 @@ export default {
             switch (annotation.shape) {
                 case 'Point':
                     return new Point(points[0]);
-                // case 'Rectangle':
-                //     return new Rectangle([points]);
+                case 'Rectangle':
+                    return new Rectangle([points]);
                 case 'Polygon':
                     return new Polygon([points]);
                 case 'LineString':
@@ -377,8 +377,8 @@ export default {
                 case 'Circle':
                     // radius is the x value of the second point of the circle
                     return new Circle(points[0], points[1][0]);
-                // case 'Ellipse':
-                //     return new Ellipse([points]);
+                case 'Ellipse':
+                    return new Ellipse([points]);
                 default:
                     // unsupported shapes are ignored
                     console.error('Unknown annotation shape: ' + annotation.shape);
@@ -499,8 +499,8 @@ export default {
                     points = [geometry.getCenter(), [geometry.getRadius()]];
                     break;
                 case 'Polygon':
-                // case 'Rectangle':
-                // case 'Ellipse':
+                case 'Rectangle':
+                case 'Ellipse':
                     points = geometry.getCoordinates()[0];
                     break;
                 case 'Point':
diff --git a/resources/assets/js/annotations/components/annotationCanvas/drawInteractions.vue b/resources/assets/js/annotations/components/annotationCanvas/drawInteractions.vue
index c51d5a22c..a0c94fb5f 100644
--- a/resources/assets/js/annotations/components/annotationCanvas/drawInteractions.vue
+++ b/resources/assets/js/annotations/components/annotationCanvas/drawInteractions.vue
@@ -1,8 +1,8 @@
 <script>
-import DrawInteraction from 'ol/interaction/Draw';
+import DrawInteraction from '@biigle/ol/interaction/Draw';
 import Keyboard from '../../../core/keyboard';
 import Styles from '../../stores/styles';
-import { shiftKeyOnly } from 'ol/events/condition';
+import { shiftKeyOnly } from '@biigle/ol/events/condition';
 import snapInteraction from '../../snapInteraction.vue';
 
 /**
diff --git a/resources/assets/js/annotations/components/annotationCanvas/measureInteraction.vue b/resources/assets/js/annotations/components/annotationCanvas/measureInteraction.vue
index 7654e0b58..c97dc4c42 100644
--- a/resources/assets/js/annotations/components/annotationCanvas/measureInteraction.vue
+++ b/resources/assets/js/annotations/components/annotationCanvas/measureInteraction.vue
@@ -1,9 +1,9 @@
 <script>
-import DrawInteraction from 'ol/interaction/Draw';
+import DrawInteraction from '@biigle/ol/interaction/Draw';
 import Keyboard from '../../../core/keyboard';
 import Styles from '../../stores/styles';
-import VectorLayer from 'ol/layer/Vector';
-import VectorSource from 'ol/source/Vector';
+import VectorLayer from '@biigle/ol/layer/Vector';
+import VectorSource from '@biigle/ol/source/Vector';
 
 /**
  * Mixin for the annotationCanvas component that contains logic for the measure interaction.
diff --git a/resources/assets/js/annotations/components/annotationCanvas/polygonBrushInteraction.vue b/resources/assets/js/annotations/components/annotationCanvas/polygonBrushInteraction.vue
index cbe0c404c..144a29c1d 100644
--- a/resources/assets/js/annotations/components/annotationCanvas/polygonBrushInteraction.vue
+++ b/resources/assets/js/annotations/components/annotationCanvas/polygonBrushInteraction.vue
@@ -2,9 +2,9 @@
 import Keyboard from '../../../core/keyboard';
 import ModifyPolygonBrushInteraction from '../../ol/interaction/ModifyPolygonBrush';
 import PolygonBrushInteraction from '../../ol/interaction/PolygonBrush';
-import SelectInteraction from 'ol/interaction/Select';
+import SelectInteraction from '@biigle/ol/interaction/Select';
 import Styles from '../../stores/styles';
-import { never, noModifierKeys, click, shiftKeyOnly, altKeyOnly } from 'ol/events/condition';
+import { never, noModifierKeys, click, shiftKeyOnly, altKeyOnly } from '@biigle/ol/events/condition';
 
 /**
  * Mixin for the annotationCanvas component that contains logic for the polygon brush interaction.
diff --git a/resources/assets/js/annotations/components/annotationCanvas/sampling.vue b/resources/assets/js/annotations/components/annotationCanvas/sampling.vue
index 15adb9d66..ac944a0d1 100644
--- a/resources/assets/js/annotations/components/annotationCanvas/sampling.vue
+++ b/resources/assets/js/annotations/components/annotationCanvas/sampling.vue
@@ -1,11 +1,11 @@
 <script>
-import Circle from 'ol/style/Circle';
-import Feature from 'ol/Feature';
-import Point from 'ol/geom/Point';
-import Stroke from 'ol/style/Stroke';
-import Style from 'ol/style/Style';
-import VectorLayer from 'ol/layer/Vector';
-import VectorSource from 'ol/source/Vector';
+import Circle from '@biigle/ol/style/Circle';
+import Feature from '@biigle/ol/Feature';
+import Point from '@biigle/ol/geom/Point';
+import Stroke from '@biigle/ol/style/Stroke';
+import Style from '@biigle/ol/style/Style';
+import VectorLayer from '@biigle/ol/layer/Vector';
+import VectorSource from '@biigle/ol/source/Vector';
 
 let crosshairLayer;
 let crosshairFeature;
diff --git a/resources/assets/js/annotations/components/measureTooltip.vue b/resources/assets/js/annotations/components/measureTooltip.vue
index 674f2da65..6368978ae 100644
--- a/resources/assets/js/annotations/components/measureTooltip.vue
+++ b/resources/assets/js/annotations/components/measureTooltip.vue
@@ -9,9 +9,9 @@
 <script>
 import AnnotationTooltip from '../mixins/annotationTooltip';
 import MeasureComponent from '../mixins/measureComponent';
-import Polygon from 'ol/geom/Polygon';
-import Circle from 'ol/geom/Circle';
-import LineString from 'ol/geom/LineString';
+import Polygon from '@biigle/ol/geom/Polygon';
+import Circle from '@biigle/ol/geom/Circle';
+import LineString from '@biigle/ol/geom/LineString';
 
 /**
  * Tooltip showing length/area of the hovered annotations.
diff --git a/resources/assets/js/annotations/components/minimap.vue b/resources/assets/js/annotations/components/minimap.vue
index 09cb943aa..864f2ff30 100644
--- a/resources/assets/js/annotations/components/minimap.vue
+++ b/resources/assets/js/annotations/components/minimap.vue
@@ -3,17 +3,17 @@
 </template>
 
 <script>
-import Feature from 'ol/Feature';
-import ImageLayer from 'ol/layer/Image';
+import Feature from '@biigle/ol/Feature';
+import ImageLayer from '@biigle/ol/layer/Image';
+import Map from '@biigle/ol/Map';
 import Styles from '../stores/styles';
-import TileLayer from 'ol/layer/Tile';
-import VectorLayer from 'ol/layer/Vector';
-import VectorSource from 'ol/source/Vector';
-import View from 'ol/View';
-import ZoomifySource from 'ol/source/Zoomify';
-import {CancelableMap as Map} from '../ol/CancelableMap';
-import {fromExtent} from 'ol/geom/Polygon';
-import {getCenter} from 'ol/extent';
+import TileLayer from '@biigle/ol/layer/Tile';
+import VectorLayer from '@biigle/ol/layer/Vector';
+import VectorSource from '@biigle/ol/source/Vector';
+import View from '@biigle/ol/View';
+import ZoomifySource from '@biigle/ol/source/Zoomify';
+import {fromExtent} from '@biigle/ol/geom/Polygon';
+import {getCenter} from '@biigle/ol/extent';
 
 /**
  * The minimap of the canvas element
diff --git a/resources/assets/js/annotations/main.js b/resources/assets/js/annotations/main.js
index 5e3288075..c577fdd40 100644
--- a/resources/assets/js/annotations/main.js
+++ b/resources/assets/js/annotations/main.js
@@ -1,5 +1,5 @@
 import './export';
-import 'ol/ol.css';
+import '@biigle/ol/ol.css';
 import Container from './annotatorContainer';
 import Navbar from './annotationsNavbar';
 
diff --git a/resources/assets/js/annotations/mixins/annotationTooltip.vue b/resources/assets/js/annotations/mixins/annotationTooltip.vue
index 39e2d9367..7de18f9c8 100644
--- a/resources/assets/js/annotations/mixins/annotationTooltip.vue
+++ b/resources/assets/js/annotations/mixins/annotationTooltip.vue
@@ -1,5 +1,5 @@
 <script>
-import Overlay from 'ol/Overlay';
+import Overlay from '@biigle/ol/Overlay';
 
 /**
  * Tooltip showing information on the hovered annotations.
diff --git a/resources/assets/js/annotations/ol/AttachLabelInteraction.js b/resources/assets/js/annotations/ol/AttachLabelInteraction.js
index 543803875..6fbd210e5 100644
--- a/resources/assets/js/annotations/ol/AttachLabelInteraction.js
+++ b/resources/assets/js/annotations/ol/AttachLabelInteraction.js
@@ -1,4 +1,4 @@
-import PointerInteraction from 'ol/interaction/Pointer';
+import PointerInteraction from '@biigle/ol/interaction/Pointer';
 
 /**
  * Control for attaching labels to existing annotations
diff --git a/resources/assets/js/annotations/ol/MagicWandInteraction.js b/resources/assets/js/annotations/ol/MagicWandInteraction.js
index 8743ce00b..a07aa61e3 100644
--- a/resources/assets/js/annotations/ol/MagicWandInteraction.js
+++ b/resources/assets/js/annotations/ol/MagicWandInteraction.js
@@ -1,13 +1,13 @@
-import Feature from 'ol/Feature';
+import Feature from '@biigle/ol/Feature';
 import MagicWand from 'magic-wand-tool';
-import Point from 'ol/geom/Point';
-import PointerInteraction from 'ol/interaction/Pointer';
-import Polygon from 'ol/geom/Polygon';
-import RegularShape from 'ol/style/RegularShape';
-import Stroke from 'ol/style/Stroke';
-import Style from 'ol/style/Style';
-import VectorLayer from 'ol/layer/Vector';
-import VectorSource from 'ol/source/Vector';
+import Point from '@biigle/ol/geom/Point';
+import PointerInteraction from '@biigle/ol/interaction/Pointer';
+import Polygon from '@biigle/ol/geom/Polygon';
+import RegularShape from '@biigle/ol/style/RegularShape';
+import Stroke from '@biigle/ol/style/Stroke';
+import Style from '@biigle/ol/style/Style';
+import VectorLayer from '@biigle/ol/layer/Vector';
+import VectorSource from '@biigle/ol/source/Vector';
 
 /**
  * Control for drawing polygons using fuzzy matching of colors.
@@ -93,7 +93,7 @@ class MagicWandInteraction extends PointerInteraction {
                             width: 3,
                         }),
                         points: 4,
-                        radius1: 6,
+                        radius: 6,
                         radius2: 0,
                         angle: Math.PI / 4
                     })
@@ -105,7 +105,7 @@ class MagicWandInteraction extends PointerInteraction {
                             width: 1.5,
                         }),
                         points: 4,
-                        radius1: 6,
+                        radius: 6,
                         radius2: 0,
                         angle: Math.PI / 4
                     })
diff --git a/resources/assets/js/annotations/ol/PolygonValidator.js b/resources/assets/js/annotations/ol/PolygonValidator.js
index 035fac7ce..6ca104d9a 100644
--- a/resources/assets/js/annotations/ol/PolygonValidator.js
+++ b/resources/assets/js/annotations/ol/PolygonValidator.js
@@ -1,14 +1,14 @@
 import 'jsts/org/locationtech/jts/monkey'; // This monkey patches jsts prototypes.
-import GeometryCollection from 'ol/geom/GeometryCollection';
+import GeometryCollection from '@biigle/ol/geom/GeometryCollection';
 import JstsLinearRing from 'jsts/org/locationtech/jts/geom/LinearRing';
-import LinearRing from 'ol/geom/LinearRing';
-import LineString from 'ol/geom/LineString';
-import MultiLineString from 'ol/geom/MultiLineString';
-import MultiPoint from 'ol/geom/MultiPoint';
-import MultiPolygon from 'ol/geom/MultiPolygon';
+import LinearRing from '@biigle/ol/geom/LinearRing';
+import LineString from '@biigle/ol/geom/LineString';
+import MultiLineString from '@biigle/ol/geom/MultiLineString';
+import MultiPoint from '@biigle/ol/geom/MultiPoint';
+import MultiPolygon from '@biigle/ol/geom/MultiPolygon';
 import OL3Parser from 'jsts/org/locationtech/jts/io/OL3Parser';
-import Point from 'ol/geom/Point';
-import Polygon from 'ol/geom/Polygon';
+import Point from '@biigle/ol/geom/Point';
+import Polygon from '@biigle/ol/geom/Polygon';
 import Polygonizer from 'jsts/org/locationtech/jts/operation/polygonize/Polygonizer';
 
 /**
diff --git a/resources/assets/js/annotations/ol/TranslateInteraction.js b/resources/assets/js/annotations/ol/TranslateInteraction.js
index c74da2d35..d495accc1 100644
--- a/resources/assets/js/annotations/ol/TranslateInteraction.js
+++ b/resources/assets/js/annotations/ol/TranslateInteraction.js
@@ -1,4 +1,4 @@
-import BaseTranslate from 'ol/interaction/Translate';
+import BaseTranslate from '@biigle/ol/interaction/Translate';
 import Keyboard from '../../core/keyboard';
 import {debounce} from '../../core/utils';
 
diff --git a/resources/assets/js/annotations/ol/ZoomToNativeControl.js b/resources/assets/js/annotations/ol/ZoomToNativeControl.js
index a90de9e65..cad4a4794 100644
--- a/resources/assets/js/annotations/ol/ZoomToNativeControl.js
+++ b/resources/assets/js/annotations/ol/ZoomToNativeControl.js
@@ -1,4 +1,4 @@
-import Control from 'ol/control/Control';
+import Control from '@biigle/ol/control/Control';
 
 /**
  * Control for zooming the map image to the original resolution
diff --git a/resources/assets/js/annotations/ol/geom/flat/difference.js b/resources/assets/js/annotations/ol/geom/flat/difference.js
index 3c4e2776c..e89532ca9 100644
--- a/resources/assets/js/annotations/ol/geom/flat/difference.js
+++ b/resources/assets/js/annotations/ol/geom/flat/difference.js
@@ -1,5 +1,5 @@
 import turfDifference from '@turf/difference';
-import Polygon from 'ol/geom/Polygon.js';
+import Polygon from '@biigle/ol/geom/Polygon.js';
 import {reducePrecision} from './simplify.js';
 
 export function difference(first, second) {
diff --git a/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js b/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js
index ba972debf..e12e39f97 100644
--- a/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js
+++ b/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js
@@ -1,18 +1,18 @@
 import {polygon as turfPolygon} from '@turf/helpers';
 import booleanContains from '@turf/boolean-contains';
-import Feature from 'ol/Feature';
-import EventType from 'ol/events/EventType';
-import Circle from 'ol/geom/Circle';
-import Polygon from 'ol/geom/Polygon';
-import {createEditingStyle} from 'ol/style/Style';
-import Modify from 'ol/interaction/Modify';
-import {ModifyEvent} from 'ol/interaction/Modify';
-import {shiftKeyOnly} from 'ol/events/condition';
-import {fromCircle} from 'ol/geom/Polygon';
+import Feature from '@biigle/ol/Feature';
+import EventType from '@biigle/ol/events/EventType';
+import Circle from '@biigle/ol/geom/Circle';
+import Polygon from '@biigle/ol/geom/Polygon';
+import {createEditingStyle} from '@biigle/ol/style/Style';
+import Modify from '@biigle/ol/interaction/Modify';
+import {ModifyEvent} from '@biigle/ol/interaction/Modify';
+import {shiftKeyOnly} from '@biigle/ol/events/condition';
+import {fromCircle} from '@biigle/ol/geom/Polygon';
 import {union} from '../geom/flat/union';
 import {difference} from '../geom/flat/difference';
-import {always} from 'ol/events/condition';
-import Collection from 'ol/Collection';
+import {always} from '@biigle/ol/events/condition';
+import Collection from '@biigle/ol/Collection';
 import {getNewSketchPointRadius, getNewSketchPointRadiusByPressure} from './PolygonBrush';
 
 export const ModifyEventType = {
diff --git a/resources/assets/js/annotations/ol/interaction/PolygonBrush.js b/resources/assets/js/annotations/ol/interaction/PolygonBrush.js
index 912481537..3241167ba 100644
--- a/resources/assets/js/annotations/ol/interaction/PolygonBrush.js
+++ b/resources/assets/js/annotations/ol/interaction/PolygonBrush.js
@@ -1,15 +1,15 @@
-import Circle from 'ol/geom/Circle';
-import Draw from 'ol/interaction/Draw';
-import Event from 'ol/events/Event.js';
-import EventType from 'ol/events/EventType';
-import Feature from 'ol/Feature';
-import MapBrowserEventType from 'ol/MapBrowserEventType';
-import VectorLayer from 'ol/layer/Vector';
-import {always} from 'ol/events/condition';
-import {createEditingStyle} from 'ol/style/Style';
-import {fromCircle} from 'ol/geom/Polygon';
+import Circle from '@biigle/ol/geom/Circle';
+import Draw from '@biigle/ol/interaction/Draw';
+import Event from '@biigle/ol/events/Event.js';
+import EventType from '@biigle/ol/events/EventType';
+import Feature from '@biigle/ol/Feature';
+import MapBrowserEventType from '@biigle/ol/MapBrowserEventType';
+import VectorLayer from '@biigle/ol/layer/Vector';
+import {always} from '@biigle/ol/events/condition';
+import {createEditingStyle} from '@biigle/ol/style/Style';
+import {fromCircle} from '@biigle/ol/geom/Polygon';
 import {polygon as turfPolygon} from '@turf/helpers';
-import {shiftKeyOnly} from 'ol/events/condition';
+import {shiftKeyOnly} from '@biigle/ol/events/condition';
 import {union} from '../geom/flat/union';
 
 const MIN_BRUSH_SIZE = 5;
diff --git a/resources/assets/js/annotations/ol/source/Canvas.js b/resources/assets/js/annotations/ol/source/Canvas.js
index 730a932b0..a6a71bb9f 100644
--- a/resources/assets/js/annotations/ol/source/Canvas.js
+++ b/resources/assets/js/annotations/ol/source/Canvas.js
@@ -1,8 +1,8 @@
-import Image from 'ol/source/Image';
-import ImageCanvas from 'ol/ImageCanvas';
-import {listen} from 'ol/events';
-import EventType from 'ol/events/EventType';
-import {getHeight} from 'ol/extent';
+import Image from '@biigle/ol/source/Image';
+import ImageCanvas from '@biigle/ol/ImageCanvas';
+import {listen} from '@biigle/ol/events';
+import EventType from '@biigle/ol/events/EventType';
+import {getHeight} from '@biigle/ol/extent';
 
 /**
  * @classdesc
diff --git a/resources/assets/js/annotations/snapInteraction.vue b/resources/assets/js/annotations/snapInteraction.vue
index 794bd6898..24008f332 100644
--- a/resources/assets/js/annotations/snapInteraction.vue
+++ b/resources/assets/js/annotations/snapInteraction.vue
@@ -1,8 +1,8 @@
 <script>
-import { Feature } from 'ol';
-import LineString from 'ol/geom/LineString';
-import { Snap } from 'ol/interaction';
-import Collection from 'ol/Collection';
+import { Feature } from '@biigle/ol';
+import LineString from '@biigle/ol/geom/LineString';
+import { Snap } from '@biigle/ol/interaction';
+import Collection from '@biigle/ol/Collection';
 
 export default {
     data() {
diff --git a/resources/assets/js/annotations/stores/styles.js b/resources/assets/js/annotations/stores/styles.js
index 6f3ffc7d0..5a208e3c3 100644
--- a/resources/assets/js/annotations/stores/styles.js
+++ b/resources/assets/js/annotations/stores/styles.js
@@ -1,8 +1,8 @@
-import Circle from 'ol/style/Circle';
-import Fill from 'ol/style/Fill';
-import RegularShape from 'ol/style/RegularShape';
-import Stroke from 'ol/style/Stroke';
-import Style from 'ol/style/Style';
+import Circle from '@biigle/ol/style/Circle';
+import Fill from '@biigle/ol/style/Fill';
+import RegularShape from '@biigle/ol/style/RegularShape';
+import Stroke from '@biigle/ol/style/Stroke';
+import Style from '@biigle/ol/style/Style';
 
 /**
  * Store for the styles of OpenLayers features (annotations)
@@ -157,7 +157,7 @@ export default {
             image: new RegularShape({
                 stroke: selectedStrokeOutline,
                 points: 4,
-                radius1: 6,
+                radius: 6,
                 radius2: 0,
                 angle: Math.PI / 4,
             }),
@@ -166,7 +166,7 @@ export default {
             image: new RegularShape({
                 stroke: selectedStroke,
                 points: 4,
-                radius1: 6,
+                radius: 6,
                 radius2: 0,
                 angle: Math.PI / 4,
             }),
diff --git a/resources/assets/js/videos/components/videoScreen.vue b/resources/assets/js/videos/components/videoScreen.vue
index f6c992cb4..9695ccc8b 100644
--- a/resources/assets/js/videos/components/videoScreen.vue
+++ b/resources/assets/js/videos/components/videoScreen.vue
@@ -262,7 +262,7 @@
 
 <script>
 import AnnotationPlayback from './videoScreen/annotationPlayback';
-import Collection from 'ol/Collection';
+import Collection from '@biigle/ol/Collection';
 import ControlButton from '../../annotations/components/controlButton';
 import DrawInteractions from './videoScreen/drawInteractions';
 import Indicators from './videoScreen/indicators';
@@ -271,18 +271,18 @@ import {CancelableMap as Map} from '../../annotations/ol/CancelableMap';
 import Minimap from '../../annotations/components/minimap';
 import ModifyInteractions from './videoScreen/modifyInteractions';
 import PolygonBrushInteractions from './videoScreen/polygonBrushInteractions';
-import SelectInteraction from 'ol/interaction/Select';
+import SelectInteraction from '@biigle/ol/interaction/Select';
 import Styles from '../../annotations/stores/styles';
 import Tooltips from './videoScreen/tooltips';
-import VectorLayer from 'ol/layer/Vector';
-import VectorSource from 'ol/source/Vector';
+import VectorLayer from '@biigle/ol/layer/Vector';
+import VectorSource from '@biigle/ol/source/Vector';
 import VideoPlayback from './videoScreen/videoPlayback';
-import ZoomControl from 'ol/control/Zoom';
-import ZoomToExtentControl from 'ol/control/ZoomToExtent';
+import ZoomControl from '@biigle/ol/control/Zoom';
+import ZoomToExtentControl from '@biigle/ol/control/ZoomToExtent';
 import ZoomToNativeControl from '../../annotations/ol/ZoomToNativeControl';
-import {click as clickCondition} from 'ol/events/condition';
-import {containsCoordinate} from 'ol/extent';
-import {defaults as defaultInteractions} from 'ol/interaction';
+import {click as clickCondition} from '@biigle/ol/events/condition';
+import {containsCoordinate} from '@biigle/ol/extent';
+import {defaults as defaultInteractions} from '@biigle/ol/interaction';
 
 export default {
     mixins: [
diff --git a/resources/assets/js/videos/components/videoScreen/annotationPlayback.vue b/resources/assets/js/videos/components/videoScreen/annotationPlayback.vue
index 9519f737e..579a99953 100644
--- a/resources/assets/js/videos/components/videoScreen/annotationPlayback.vue
+++ b/resources/assets/js/videos/components/videoScreen/annotationPlayback.vue
@@ -1,11 +1,11 @@
 <script>
-import Circle from 'ol/geom/Circle';
-// import Ellipse from 'ol/geom/Ellipse';
-import Feature from 'ol/Feature';
-import LineString from 'ol/geom/LineString';
-import Point from 'ol/geom/Point';
-import Polygon from 'ol/geom/Polygon';
-// import Rectangle from 'ol/geom/Rectangle';
+import Circle from '@biigle/ol/geom/Circle';
+import Ellipse from '@biigle/ol/geom/Ellipse';
+import Feature from '@biigle/ol/Feature';
+import LineString from '@biigle/ol/geom/LineString';
+import Point from '@biigle/ol/geom/Point';
+import Polygon from '@biigle/ol/geom/Polygon';
+import Rectangle from '@biigle/ol/geom/Rectangle';
 import {getRoundToPrecision} from '../../utils';
 
 /**
@@ -153,8 +153,8 @@ export default {
             switch (shape) {
                 case 'Point':
                     return new Point(points[0]);
-                // case 'Rectangle':
-                //     return new Rectangle([points]);
+                case 'Rectangle':
+                    return new Rectangle([points]);
                 case 'Polygon':
                     return new Polygon([points]);
                 case 'LineString':
@@ -162,8 +162,8 @@ export default {
                 case 'Circle':
                     // radius is the x value of the second point of the circle
                     return new Circle(points[0], points[1][0]);
-                // case 'Ellipse':
-                //     return new Ellipse([points]);
+                case 'Ellipse':
+                    return new Ellipse([points]);
                 default:
                     // unsupported shapes are ignored
                     console.error('Unknown annotation shape: ' + shape);
diff --git a/resources/assets/js/videos/components/videoScreen/drawInteractions.vue b/resources/assets/js/videos/components/videoScreen/drawInteractions.vue
index c45325ea9..ebc9d1ede 100644
--- a/resources/assets/js/videos/components/videoScreen/drawInteractions.vue
+++ b/resources/assets/js/videos/components/videoScreen/drawInteractions.vue
@@ -1,10 +1,10 @@
 <script>
 import {simplifyPolygon} from "../../../annotations/ol/PolygonValidator";
-import DrawInteraction from 'ol/interaction/Draw';
+import DrawInteraction from '@biigle/ol/interaction/Draw';
 import Keyboard from '../../../core/keyboard';
 import Styles from '../../../annotations/stores/styles';
-import VectorLayer from 'ol/layer/Vector';
-import VectorSource from 'ol/source/Vector';
+import VectorLayer from '@biigle/ol/layer/Vector';
+import VectorSource from '@biigle/ol/source/Vector';
 import snapInteraction from "./snapInteraction.vue";
 import { isInvalidShape } from '../../../annotations/utils';
 
diff --git a/resources/assets/js/videos/components/videoScreen/modifyInteractions.vue b/resources/assets/js/videos/components/videoScreen/modifyInteractions.vue
index 97feff7c4..4f7388c5e 100644
--- a/resources/assets/js/videos/components/videoScreen/modifyInteractions.vue
+++ b/resources/assets/js/videos/components/videoScreen/modifyInteractions.vue
@@ -1,10 +1,10 @@
 <script>
 import AttachLabelInteraction from '../../../annotations/ol/AttachLabelInteraction';
 import Keyboard from '../../../core/keyboard';
-import ModifyInteraction from 'ol/interaction/Modify';
+import ModifyInteraction from '@biigle/ol/interaction/Modify';
 import TranslateInteraction from '../../../annotations/ol/TranslateInteraction';
-import {shiftKeyOnly as shiftKeyOnlyCondition} from 'ol/events/condition';
-import {singleClick as singleClickCondition} from 'ol/events/condition';
+import {shiftKeyOnly as shiftKeyOnlyCondition} from '@biigle/ol/events/condition';
+import {singleClick as singleClickCondition} from '@biigle/ol/events/condition';
 import {simplifyPolygon} from "../../../annotations/ol/PolygonValidator";
 import {isInvalidShape} from '../../../annotations/utils';
 
diff --git a/resources/assets/js/videos/components/videoScreen/polygonBrushInteractions.vue b/resources/assets/js/videos/components/videoScreen/polygonBrushInteractions.vue
index 1811ae427..a58bb14ff 100644
--- a/resources/assets/js/videos/components/videoScreen/polygonBrushInteractions.vue
+++ b/resources/assets/js/videos/components/videoScreen/polygonBrushInteractions.vue
@@ -2,13 +2,13 @@
 import Keyboard from '../../../core/keyboard';
 import ModifyPolygonBrushInteraction from '../../../annotations/ol/interaction/ModifyPolygonBrush';
 import PolygonBrushInteraction from '../../../annotations/ol/interaction/PolygonBrush';
-import SelectInteraction from 'ol/interaction/Select';
+import SelectInteraction from '@biigle/ol/interaction/Select';
 import Styles from '../../../annotations/stores/styles';
-import {altKeyOnly as altKeyOnlyCondition} from 'ol/events/condition';
-import {click as clickCondition} from 'ol/events/condition';
-import {never as neverCondition} from 'ol/events/condition';
-import {noModifierKeys as noModifierKeysCondition} from 'ol/events/condition';
-import {shiftKeyOnly as shiftKeyOnlyCondition} from 'ol/events/condition';
+import {altKeyOnly as altKeyOnlyCondition} from '@biigle/ol/events/condition';
+import {click as clickCondition} from '@biigle/ol/events/condition';
+import {never as neverCondition} from '@biigle/ol/events/condition';
+import {noModifierKeys as noModifierKeysCondition} from '@biigle/ol/events/condition';
+import {shiftKeyOnly as shiftKeyOnlyCondition} from '@biigle/ol/events/condition';
 
 /**
  * Mixin for the videoScreen component that contains logic for the polygon brush
diff --git a/resources/assets/js/videos/components/videoScreen/videoPlayback.vue b/resources/assets/js/videos/components/videoScreen/videoPlayback.vue
index 7a8d24b84..17713d17b 100644
--- a/resources/assets/js/videos/components/videoScreen/videoPlayback.vue
+++ b/resources/assets/js/videos/components/videoScreen/videoPlayback.vue
@@ -1,9 +1,9 @@
 <script>
 import CanvasSource from '../../../annotations/ol/source/Canvas';
-import ImageLayer from 'ol/layer/Image';
+import ImageLayer from '@biigle/ol/layer/Image';
 import Keyboard from '../../../core/keyboard';
-import Projection from 'ol/proj/Projection';
-import View from 'ol/View';
+import Projection from '@biigle/ol/proj/Projection';
+import View from '@biigle/ol/View';
 
 /**
  * Mixin for the videoScreen component that contains logic for the video playback.

From aa347d51a9caceb12562dde73e1346b15da21b7a Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Wed, 10 Jul 2024 15:44:21 +0200
Subject: [PATCH 23/27] Remove CancelableMap

This is no longer required with the new method of video rendering.
---
 resources/assets/js/annotations/ol/CancelableMap.js | 13 -------------
 .../assets/js/videos/components/videoScreen.vue     |  2 +-
 .../videos/components/videoScreen/videoPlayback.vue |  4 ----
 3 files changed, 1 insertion(+), 18 deletions(-)
 delete mode 100644 resources/assets/js/annotations/ol/CancelableMap.js

diff --git a/resources/assets/js/annotations/ol/CancelableMap.js b/resources/assets/js/annotations/ol/CancelableMap.js
deleted file mode 100644
index be48a1337..000000000
--- a/resources/assets/js/annotations/ol/CancelableMap.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import Map from 'ol/Map';
-
-// OL Map that allows explicit canceling of the next animation frame for rendering.
-export class CancelableMap extends Map {
-    cancelRender() {
-        if (this.animationDelayKey_) {
-          cancelAnimationFrame(this.animationDelayKey_);
-          this.animationDelayKey_ = undefined;
-        }
-    }
-}
-
-export default CancelableMap;
diff --git a/resources/assets/js/videos/components/videoScreen.vue b/resources/assets/js/videos/components/videoScreen.vue
index 9695ccc8b..fb287ecbe 100644
--- a/resources/assets/js/videos/components/videoScreen.vue
+++ b/resources/assets/js/videos/components/videoScreen.vue
@@ -267,7 +267,7 @@ import ControlButton from '../../annotations/components/controlButton';
 import DrawInteractions from './videoScreen/drawInteractions';
 import Indicators from './videoScreen/indicators';
 import Keyboard from '../../core/keyboard';
-import {CancelableMap as Map} from '../../annotations/ol/CancelableMap';
+import Map from '@biigle/ol/Map';
 import Minimap from '../../annotations/components/minimap';
 import ModifyInteractions from './videoScreen/modifyInteractions';
 import PolygonBrushInteractions from './videoScreen/polygonBrushInteractions';
diff --git a/resources/assets/js/videos/components/videoScreen/videoPlayback.vue b/resources/assets/js/videos/components/videoScreen/videoPlayback.vue
index 17713d17b..630c6de8e 100644
--- a/resources/assets/js/videos/components/videoScreen/videoPlayback.vue
+++ b/resources/assets/js/videos/components/videoScreen/videoPlayback.vue
@@ -86,10 +86,6 @@ export default {
             this.map.render();
         },
         stopRenderLoop() {
-            // Explicitly cancel rendering of the map because there could be one
-            // animation frame left that would be executed while the video already began
-            // seeking and thus render an empty video.
-            this.map.cancelRender();
             window.cancelAnimationFrame(this.animationFrameId);
             this.animationFrameId = null;
         },

From a4d47e31fe8ffd941f6c74db8541e6b2b9be4300 Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Wed, 10 Jul 2024 15:44:49 +0200
Subject: [PATCH 24/27] Refactor MagicWandInteraction

---
 .../js/annotations/ol/MagicWandInteraction.js | 44 ++++++++-----------
 1 file changed, 18 insertions(+), 26 deletions(-)

diff --git a/resources/assets/js/annotations/ol/MagicWandInteraction.js b/resources/assets/js/annotations/ol/MagicWandInteraction.js
index a07aa61e3..6422a4be1 100644
--- a/resources/assets/js/annotations/ol/MagicWandInteraction.js
+++ b/resources/assets/js/annotations/ol/MagicWandInteraction.js
@@ -120,6 +120,10 @@ class MagicWandInteraction extends PointerInteraction {
 
         this.snapshotListener = this.updateSnapshot.bind(this);
 
+        this.mapExtent_ = null;
+        this.snapshotHeight_ = 0;
+        this.scaleFactor_ = 0;
+
         // Update the snapshot and set event listeners if the interaction is active.
         this.toggleActive();
     }
@@ -143,16 +147,10 @@ class MagicWandInteraction extends PointerInteraction {
      * @return {Array}
      */
     toSnapshotCoordinates(points) {
-        let extent = this.map.getView().calculateExtent(this.map.getSize());
-        let height = this.snapshot.height;
-        let factor = this.getHighDpiScaling() / this.map.getView().getResolution();
-
-        return points.map(function (point) {
-            return [
-                Math.round((point[0] - extent[0]) * factor),
-                height - Math.round((point[1] - extent[1]) * factor),
-            ];
-        });
+        return points.map(point => [
+            Math.round((point[0] - this.mapExtent_[0]) * this.scaleFactor_),
+            this.snapshotHeight_ - Math.round((point[1] - this.mapExtent_[1]) * this.scaleFactor_),
+        ]);
     }
 
     /**
@@ -163,16 +161,10 @@ class MagicWandInteraction extends PointerInteraction {
      * @return {Array}
      */
     fromSnapshotCoordinates(points) {
-        let extent = this.map.getView().calculateExtent(this.map.getSize());
-        let height = this.snapshot.height;
-        let factor = this.map.getView().getResolution() / this.getHighDpiScaling();
-
-        return points.map(function (point) {
-            return [
-                Math.round((point[0] * factor) + extent[0]),
-                Math.round(((height - point[1]) * factor) + extent[1]),
-            ];
-        });
+        return points.map(point => [
+            Math.round((point[0] / this.scaleFactor_) + this.mapExtent_[0]),
+            Math.round(((this.snapshotHeight_ - point[1]) / this.scaleFactor_) + this.mapExtent_[1]),
+        ]);
     }
 
     /**
@@ -183,9 +175,7 @@ class MagicWandInteraction extends PointerInteraction {
      * @return {Array}
      */
     fromMagicWandCoordinates(points) {
-        return points.map(function (point) {
-            return [point.x, point.y];
-        });
+        return points.map(point => [point.x, point.y]);
     }
 
     /**
@@ -310,6 +300,10 @@ class MagicWandInteraction extends PointerInteraction {
             this.updatingSnapshot = true;
             this.map.renderSync();
             this.updatingSnapshot = false;
+
+            this.mapExtent_ = this.map.getView().calculateExtent(this.map.getSize());
+            this.snapshotHeight_ = this.snapshot.height;
+            this.scaleFactor_ = this.getHighDpiScaling() / this.map.getView().getResolution();
         }
     }
 
@@ -354,9 +348,7 @@ class MagicWandInteraction extends PointerInteraction {
 
         // Take only the outer contour.
         let contour = MagicWand.traceContours(sketch)
-            .filter(function (c) {
-                return !c.innner;
-            })
+            .filter(c => !c.innner)
             .shift();
 
         if (contour) {

From b93db499cadf97178e208d1f6a4fab4e7211b134 Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Thu, 11 Jul 2024 15:26:52 +0200
Subject: [PATCH 25/27] Fix behavior of polygon brush and modify tools

Fixes https://github.com/biigle/core/issues/873
---
 package-lock.json                             | 12 +++++-----
 .../js/annotations/ol/geom/flat/union.js      | 16 +++++++++----
 .../ol/interaction/ModifyPolygonBrush.js      | 23 +++++++++++--------
 .../ol/interaction/PolygonBrush.js            |  4 +++-
 4 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7ecb7ab2a..5b178d200 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10284,9 +10284,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
       "dev": true
     },
     "node_modules/tty-browserify": {
@@ -19078,9 +19078,9 @@
       "dev": true
     },
     "tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
       "dev": true
     },
     "tty-browserify": {
diff --git a/resources/assets/js/annotations/ol/geom/flat/union.js b/resources/assets/js/annotations/ol/geom/flat/union.js
index 59ce4e09c..635d2a167 100644
--- a/resources/assets/js/annotations/ol/geom/flat/union.js
+++ b/resources/assets/js/annotations/ol/geom/flat/union.js
@@ -7,12 +7,18 @@ export function union(first, second) {
   // considered equal and the union operation returns a multipolygon where it shouldn't.
   first.geometry.coordinates = reducePrecision(first.geometry.coordinates);
   second.geometry.coordinates = reducePrecision(second.geometry.coordinates);
-  var unionPolygon = turfUnion(first, second);
+  const unionPolygon = turfUnion(first, second);
+
+  // This can hapen if first and second are disjoint. Take first in this case.
   if (unionPolygon.geometry.type === 'MultiPolygon') {
-    // Fill any holes in the polygon that may appear after union, i.e. take only the
-    // outline.
-    return unionPolygon.geometry.coordinates[0];
+    return first.geometry.coordinates;
+  }
+
+  let coords = unionPolygon.geometry.coordinates;
+  // This can happen if the polygon has holes. Take the outer ring in this case.
+  if (coords.length > 1) {
+    coords = [coords[0]];
   }
 
-  return unionPolygon.geometry.coordinates;
+  return coords;
 }
diff --git a/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js b/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js
index e12e39f97..0cd641775 100644
--- a/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js
+++ b/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js
@@ -1,19 +1,19 @@
-import {polygon as turfPolygon} from '@turf/helpers';
 import booleanContains from '@turf/boolean-contains';
-import Feature from '@biigle/ol/Feature';
-import EventType from '@biigle/ol/events/EventType';
 import Circle from '@biigle/ol/geom/Circle';
+import Collection from '@biigle/ol/Collection';
+import EventType from '@biigle/ol/events/EventType';
+import Feature from '@biigle/ol/Feature';
+import Modify from '@biigle/ol/interaction/Modify';
 import Polygon from '@biigle/ol/geom/Polygon';
+import {always} from '@biigle/ol/events/condition';
 import {createEditingStyle} from '@biigle/ol/style/Style';
-import Modify from '@biigle/ol/interaction/Modify';
+import {difference} from '../geom/flat/difference';
+import {fromCircle} from '@biigle/ol/geom/Polygon';
+import {getNewSketchPointRadius, getNewSketchPointRadiusByPressure} from './PolygonBrush';
 import {ModifyEvent} from '@biigle/ol/interaction/Modify';
+import {polygon as turfPolygon} from '@turf/helpers';
 import {shiftKeyOnly} from '@biigle/ol/events/condition';
-import {fromCircle} from '@biigle/ol/geom/Polygon';
 import {union} from '../geom/flat/union';
-import {difference} from '../geom/flat/difference';
-import {always} from '@biigle/ol/events/condition';
-import Collection from '@biigle/ol/Collection';
-import {getNewSketchPointRadius, getNewSketchPointRadiusByPressure} from './PolygonBrush';
 
 export const ModifyEventType = {
   MODIFYSTART: 'modifystart',
@@ -229,7 +229,10 @@ class ModifyPolygonBrush extends Modify {
         // Skip features that can't be represented as polygon.
         return;
       }
-      featureGeom.setCoordinates(union(sketchPointPolygon, featurePolygon));
+
+      // The order of the union() arguments matters! The feature polygon will be kept if
+      // there is no intersection with the sketch.
+      featureGeom.setCoordinates(union(featurePolygon, sketchPointPolygon));
     }, this);
   }
 
diff --git a/resources/assets/js/annotations/ol/interaction/PolygonBrush.js b/resources/assets/js/annotations/ol/interaction/PolygonBrush.js
index 3241167ba..f36568fed 100644
--- a/resources/assets/js/annotations/ol/interaction/PolygonBrush.js
+++ b/resources/assets/js/annotations/ol/interaction/PolygonBrush.js
@@ -244,7 +244,9 @@ class PolygonBrush extends Draw {
       const sketchFeatureGeometry = this.sketchFeature_.getGeometry();
       const sketchFeaturePolygon = turfPolygon(sketchFeatureGeometry.getCoordinates());
 
-      sketchFeatureGeometry.setCoordinates(union(sketchCirclePolygon, sketchFeaturePolygon));
+      // The order of the union() arguments matters! The feature polygon will be kept if
+      // there is no intersection with the circle.
+      sketchFeatureGeometry.setCoordinates(union(sketchFeaturePolygon, sketchCirclePolygon));
     }
   }
 

From 1a7a8cebfbc29f7f0c6b7f0e011b198384552b59 Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Thu, 11 Jul 2024 15:55:12 +0200
Subject: [PATCH 26/27] Fix issues with polygon brush eraser tool

---
 .../js/annotations/ol/geom/flat/difference.js | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/resources/assets/js/annotations/ol/geom/flat/difference.js b/resources/assets/js/annotations/ol/geom/flat/difference.js
index e89532ca9..f78241ddf 100644
--- a/resources/assets/js/annotations/ol/geom/flat/difference.js
+++ b/resources/assets/js/annotations/ol/geom/flat/difference.js
@@ -10,14 +10,20 @@ export function difference(first, second) {
   first.geometry.coordinates = reducePrecision(first.geometry.coordinates);
   second.geometry.coordinates = reducePrecision(second.geometry.coordinates);
 
-  var differencePolygon = turfDifference(first, second);
+  const differencePolygon = turfDifference(first, second);
+
+  // This can happen if second entirely contains first, resulting in an empty polygon.
+  if (differencePolygon === null) {
+    return [];
+  }
 
   // Return the larger part if a polygon has been split by the difference operation.
   if (differencePolygon.geometry.type === 'MultiPolygon') {
-      var maxArea = 0;
-      var maxCoords;
-      for (var i = 0; i < differencePolygon.geometry.coordinates.length; i++) {
-          var area = (new Polygon(differencePolygon.geometry.coordinates[i])).getArea();
+      let maxArea = 0;
+      let maxCoords;
+      let area;
+      for (let i = 0; i < differencePolygon.geometry.coordinates.length; i++) {
+          area = (new Polygon(differencePolygon.geometry.coordinates[i])).getArea();
           if (area > maxArea) {
               maxArea = area;
               maxCoords = differencePolygon.geometry.coordinates[i];
@@ -27,5 +33,10 @@ export function difference(first, second) {
       return maxCoords;
   }
 
+  // This can happen if second made a hole in first. We keep first in this case.
+  if (differencePolygon.geometry.coordinates.length > 1) {
+    return first.geometry.coordinates;
+  }
+
   return differencePolygon.geometry.coordinates;
 }

From 5f237677edc3a0dc563fe4aa304130288a0d73c8 Mon Sep 17 00:00:00 2001
From: Martin Zurowietz <martin@zurowietz.de>
Date: Thu, 11 Jul 2024 15:55:27 +0200
Subject: [PATCH 27/27] Refactor polygon brush and modify interactions

---
 .../ol/interaction/ModifyPolygonBrush.js      | 14 +++++-------
 .../ol/interaction/PolygonBrush.js            | 22 ++-----------------
 2 files changed, 8 insertions(+), 28 deletions(-)

diff --git a/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js b/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js
index 0cd641775..dd25a2860 100644
--- a/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js
+++ b/resources/assets/js/annotations/ol/interaction/ModifyPolygonBrush.js
@@ -62,9 +62,7 @@ class ModifyPolygonBrush extends Modify {
         this.watchViewForChangedResolution(view);
       }
 
-      map.on('change:view', (function (e) {
-        this.watchViewForChangedResolution(e.target.getView());
-      }).bind(this));
+      map.on('change:view', e => this.watchViewForChangedResolution(e.target.getView()));
     }
   }
 
@@ -190,7 +188,7 @@ class ModifyPolygonBrush extends Modify {
     const sketchPointGeom = fromCircle(this.sketchCircle_);
     let sketchPointPolygon = turfPolygon(sketchPointGeom.getCoordinates());
     let sketchPointArea = sketchPointGeom.getArea();
-    this.features_.getArray().forEach(function (feature) {
+    this.features_.getArray().forEach((feature) => {
       let featureGeom = feature.getGeometry();
       try {
         var featurePolygon = turfPolygon(featureGeom.getCoordinates());
@@ -207,7 +205,7 @@ class ModifyPolygonBrush extends Modify {
             new ModifyEvent(ModifyEventType.MODIFYREMOVE, new Collection([feature]), event)
           );
       } else {
-        var coords = difference(featurePolygon, sketchPointPolygon);
+        const coords = difference(featurePolygon, sketchPointPolygon);
         if (!this.allowRemove_ && sketchPointArea > (new Polygon(coords)).getArea()) {
           // If allowRemove_ is false, the modified polygon may not become smaller than
           // the sketchPointPolygon.
@@ -215,13 +213,13 @@ class ModifyPolygonBrush extends Modify {
         }
         featureGeom.setCoordinates(coords);
     }
-    }, this);
+    });
   }
 
   addCurrentFeatures_() {
     const sketchPointGeom = fromCircle(this.sketchCircle_);
     let sketchPointPolygon = turfPolygon(sketchPointGeom.getCoordinates());
-    this.features_.getArray().forEach(function (feature) {
+    this.features_.getArray().forEach((feature) => {
       let featureGeom = feature.getGeometry();
       try {
         var featurePolygon = turfPolygon(featureGeom.getCoordinates());
@@ -233,7 +231,7 @@ class ModifyPolygonBrush extends Modify {
       // The order of the union() arguments matters! The feature polygon will be kept if
       // there is no intersection with the sketch.
       featureGeom.setCoordinates(union(featurePolygon, sketchPointPolygon));
-    }, this);
+    });
   }
 
   finishModifying_(event) {
diff --git a/resources/assets/js/annotations/ol/interaction/PolygonBrush.js b/resources/assets/js/annotations/ol/interaction/PolygonBrush.js
index f36568fed..beb9ca495 100644
--- a/resources/assets/js/annotations/ol/interaction/PolygonBrush.js
+++ b/resources/assets/js/annotations/ol/interaction/PolygonBrush.js
@@ -9,7 +9,7 @@ import {always} from '@biigle/ol/events/condition';
 import {createEditingStyle} from '@biigle/ol/style/Style';
 import {fromCircle} from '@biigle/ol/geom/Polygon';
 import {polygon as turfPolygon} from '@turf/helpers';
-import {shiftKeyOnly} from '@biigle/ol/events/condition';
+import {shiftKeyOnly, penOnly} from '@biigle/ol/events/condition';
 import {union} from '../geom/flat/union';
 
 const MIN_BRUSH_SIZE = 5;
@@ -28,22 +28,6 @@ class DrawEvent extends Event {
   }
 }
 
-/**
- * Return `true` if the event originates from a digital pen.
- *
- * In contrast to the condition from ../events/condition.js this function does not assert
- * that the event is a pointer event.
- *
- * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event.
- * @return {boolean} True if the event originates from a digital pen.
- * @api
- */
-const penOnly = function(mapBrowserEvent) {
-  const pointerEvt = mapBrowserEvent.pointerEvent;
-  // see http://www.w3.org/TR/pointerevents/#widl-PointerEvent-pointerType
-  return pointerEvt && pointerEvt.pointerType === 'pen';
-};
-
 export function getNewSketchPointRadius(event, radius) {
   let delta = event.originalEvent.deltaY;
   // Take the delta from deltaX if deltyY is 0 because some systems toggle the scroll
@@ -129,9 +113,7 @@ class PolygonBrush extends Draw {
         this.watchViewForChangedResolution(view);
       }
 
-      map.on('change:view', (function (e) {
-        this.watchViewForChangedResolution(e.target.getView());
-      }).bind(this));
+      map.on('change:view', e => this.watchViewForChangedResolution(e.target.getView()));
     }
   }