migrate to maplibre-gl for maps

source/UI/js/Map/MapRectangle.js

@@ -1,5 +1,172 @@
 'use strict';
 
+
+class MapLibreRectangle {
+    constructor(options = {}) {
+        this.id = options.id || 'rectangle-' + Ox.uid();
+        this.bounds = options.bounds;
+        this.draggable = options.draggable || false;
+        this.onclick = options.onclick || null
+    }
+
+    _createRectangle() {
+        const coords = this._getPolygonCoordinates();
+
+        const rectangleGeoJSON = {
+            type: 'Feature',
+            geometry: {
+                type: 'Polygon',
+                coordinates: [coords]
+            },
+            properties: {
+                id: this.id
+            }
+        };
+        this.source = this.map.getSource('rectangles')
+        if (!this.source) {
+            this.map.addSource('rectangles', {
+                type: 'geojson',
+                data: {
+                    type: 'FeatureCollection',
+                    features: []
+                }
+            });
+            this.source = this.map.getSource('rectangles')
+
+            // Add fill layer
+            if (!this.map.getLayer('rectangles-fill')) {
+                this.map.addLayer({
+                    id: 'rectangles-fill',
+                    type: 'fill',
+                    source: 'rectangles',
+                    paint: {
+                        'fill-color': '#088',
+                        'fill-opacity': 0.3
+                    }
+                });
+            }
+
+            // Add outline layer
+            if (!this.map.getLayer('rectangles-outline')) {
+                this.map.addLayer({
+                    id: 'rectangles-outline',
+                    type: 'line',
+                    source: 'rectangles',
+                    paint: {
+                        'line-color': '#000',
+                        'line-width': 2
+                    }
+                });
+            }
+        }
+        /*
+        this.source._data.features.push(rectangleGeoJSON)
+        this.source.setData(this.source._data)
+        */
+    }
+
+    _getPolygonCoordinates() {
+        const sw = this.bounds._sw;
+        const ne = this.bounds._ne;
+
+        return [
+            [sw.lng, ne.lat], // NW
+            [ne.lng, ne.lat], // NE
+            [ne.lng, sw.lat], // SE
+            [sw.lng, sw.lat], // SW
+            [sw.lng, ne.lat]  // Close polygon
+        ];
+    }
+
+    setBounds(bounds) {
+        this.bounds = bounds;
+        const coords = this._getPolygonCoordinates();
+        const updatedData = {
+            type: 'Feature',
+            geometry: {
+                type: 'Polygon',
+                coordinates: [coords]
+            },
+            properties: {
+                id: this.id
+            }
+        };
+        var updated = false;
+        this.source._data.features.forEach(feature => {
+            if (feature.properties.id == this.id) {
+                feature.geometry = updatedData.geometry
+                updated = true
+            }
+        })
+        if (!updated) {
+            this.source._data.features.push(updatedData)
+        }
+        this.source.setData(this.source._data)
+    }
+
+    getBounds() {
+        return this.bounds;
+    }
+
+    _enableDragging() {
+        let isDragging = false;
+        let startPos;
+
+        this.map.on('mousedown', `${this.id}-fill`, (e) => {
+            e.preventDefault();
+            isDragging = true;
+            startPos = e.lngLat;
+            this.map.getCanvas().style.cursor = 'grabbing';
+        });
+
+        this.map.on('mousemove', (e) => {
+            if (!isDragging) return;
+
+            const dx = e.lngLat.lng - startPos.lng;
+            const dy = e.lngLat.lat - startPos.lat;
+
+            const sw = [this.bounds[0][0] + dx, this.bounds[0][1] + dy];
+            const ne = [this.bounds[1][0] + dx, this.bounds[1][1] + dy];
+
+            this.setBounds([sw, ne]);
+            startPos = e.lngLat;
+        });
+
+        this.map.on('mouseup', () => {
+            if (isDragging) {
+                isDragging = false;
+                this.map.getCanvas().style.cursor = '';
+            }
+        });
+    }
+    _enableClicking() {
+        this.map.on('click', `${this.id}-fill`, e => {
+            if (this.onclick) {
+                this.onclick(e)
+            }
+        })
+    }
+
+    remove() {
+        this.source._data.features = this.source._data.features.filter(feature => {
+            return feature.properties.id != this.id
+        })
+        this.source.setData(this.source._data)
+    }
+
+    add() {
+        this.setBounds(this.bounds)
+    }
+
+    addTo(map) {
+        this.map = map;
+        this._createRectangle();
+        if (this.draggable) this._enableDragging();
+        this._enableClicking();
+    }
+}
+
+
 /*@
 Ox.MapRectangle <f> MapRectangle Object
     (options) -> <o> MapRectangle Object
@@ -25,10 +192,18 @@ Ox.MapRectangle = function(options) {
     /*@
     rectangle <f> google.maps.Rectangle
     @*/
+    /*
     that.rectangle = new google.maps.Rectangle({
         clickable: true,
         bounds: that.place.bounds
     });
+    */
+    that.rectangle = new MapLibreRectangle({
+        bounds: that.place.bounds,
+    });
+    that.rectangle.addTo(that.map.map);
+    that.rectangle.onclick = click
+
     /*@
     markers <a> array of markers
     @*/
@@ -42,7 +217,9 @@ Ox.MapRectangle = function(options) {
 
     setOptions();
 
-    function click() {
+    function click(e) {
+        console.log('rectangle click', e)
+        return
         if (
             that.map.options('editable')
             && that.place.editable
@@ -64,6 +241,7 @@ Ox.MapRectangle = function(options) {
             ? 'mapPlaceEditingBorder'
             : 'mapPlaceSelectedBorder'
         ]);
+        /*
         that.rectangle.setOptions({
             bounds: that.place.bounds,
             fillColor: color,
@@ -72,14 +250,24 @@ Ox.MapRectangle = function(options) {
             strokeOpacity: that.place.id[0] == '_' ? 0.5 : 1,
             strokeWeight: 2
         });
+        */
+        /*
+        console.log("fixme", {
+            bounds: that.place.bounds,
+            fillColor: color,
+            fillOpacity: that.place.editing ? 0.1 : 0,
+            strokeColor: color,
+            strokeOpacity: that.place.id[0] == '_' ? 0.5 : 1,
+            strokeWeight: 2
+        });
+        */
     }
 
     /*@
     add <f> add
     @*/
     that.add = function() {
-        that.rectangle.setMap(that.map.map);
-        google.maps.event.addListener(that.rectangle, 'click', click);
+        that.rectangle.add()
         return that;
     };
 
@@ -99,8 +287,7 @@ Ox.MapRectangle = function(options) {
     remove <f> remove
     @*/
     that.remove = function() {
-        that.rectangle.setMap(null);
-        google.maps.event.clearListeners(that.rectangle);
+        that.rectangle.remove();
         return that;
     }