- add '.gitea/workflows/build.yaml'

- npm updates
- add map tool for drawing rectangles

resources/js/Components/Map/Control.ts

@@ -0,0 +1,70 @@
+// import * as util from '../core/utilities';
+import { EventEmitter } from './EventEmitter';
+import type { Map } from 'leaflet/src/map/index';
+
+export abstract class Control<T> extends EventEmitter<T> {
+
+    // @section
+    // @aka Control options
+    options = {
+        position: 'topright',
+    };
+    protected _map;
+    protected _container;
+
+    // constructor(defaults?) {
+    //     super();
+    //     if (!(this instanceof Control)) {
+    //         throw new TypeError("Control constructor cannot be called as a function.");
+    //     }        
+    //     // properties     
+    //     // util.setOptions(this, defaults);
+    // }
+
+    getPosition() {
+        return this.options.position;
+    }
+
+    getContainer() {
+        return this._container;
+    }
+
+    abstract onRemove(map): void;
+    
+    abstract onAdd(map: any) : HTMLElement;
+
+    addTo(map: Map): Control<T> {
+        this._map = map;
+
+        let container = this._container = this.onAdd(map);
+        let pos = this.getPosition();//"topright"
+        let corner = map.controlCorners[pos];
+        if (container) {
+            // $(container).addClass('gba-control');
+            container.classList.add("gba-control");
+
+            if (pos.indexOf('bottom') !== -1) {
+                corner.insertBefore(container, corner.firstChild);
+            }
+            else {
+                corner.appendChild(container);
+            }
+        }
+        return this;
+    }
+
+    removeFrom(map) {
+        let pos = this.getPosition(),
+            corner = map._controlCorners[pos];
+
+        corner.removeChild(this._container);
+        this._map = null;
+
+        if (this.onRemove) {
+            this.onRemove(map);
+        }
+        return this;
+    }
+
+}
+

resources/js/Components/Map/draw.component.vue

@@ -1,9 +1,9 @@
 <template>
-    <div class="gba-control-draw btn-group-vertical map-control">
+    <div ref="drawControl" class="gba-control-draw btn-group-vertical map-control">
         <!-- <button type="button" class="button is-light is-small" (click)="locateUser()" [ngClass]="isToggled ? 'is-primary': 'is-active'">
       <fa-icon [icon]="faSearchLocation"></fa-icon>
     </button> -->
-    <!--  -->
+        <!--  -->
         <button
             ref="inputDraw"
             class="inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 text-black border-teal-50 hover:bg-gray-200 text-sm p-1"
@@ -21,30 +21,111 @@ import { Component, Vue, Prop } from 'vue-facing-decorator';
 
 import BaseIcon from '@/Components/BaseIcon.vue';
 import { mdiDrawPen } from '@mdi/js';
+import { MapService } from '@/Stores/map.service';
+// import { Map } from 'leaflet';
+// import { LatLngBoundsExpression, toLatLngBounds } from 'leaflet/src/geo/LatLngBounds';
+// import { LayerGroup } from 'leaflet/src/layer/LayerGroup';
+import { Marker } from 'leaflet';
 
 @Component({
-    name: 'zoom-control',
+    name: 'draw-control',
     components: {
         BaseIcon,
     },
 })
 export default class DrawControlComponent extends Vue {
+    /**
+     * class properties.
+     */
     mdiDrawPen = mdiDrawPen;
-
-
+    featuresLayer;
+    options = {
+        zIndex: 1000,
+        markerClass: Marker, // CylinderGeometry,
+        drawingCSSClass: 'gba-editable-drawing',
+        drawingCursor: 'crosshair',
+    };
 
     /**
      * Connect map id.
      */
     @Prop() public mapId: string;
+    // @Prop() public map: Map;
+    @Prop public southWest;
+    @Prop public northEast;
+
+   
+    
 
     public isToggled = false;
+    mapService = MapService();
 
     // @Ref('inputDraw') private _inputDraw: HTMLElement;
 
     public draw() {
+        // let map: Map = this.mapService.getMap(this.mapId);
+        // const bounds: LatLngBoundsExpression = toLatLngBounds(this.southWest, this.northEast);
+        // map.fitBounds(bounds);
+
+        if (this.isToggled == true) {
+            this.disable();
+        } else {
+            this.enable();
+        }
         this.isToggled = !this.isToggled;
     }
+
+    private enable() {
+        //if (this.map.mapTool) this.map.mapTool.on('editable:drawing:start', this.disable.bind(this));
+        // dom.addClass(this.map.container, 'measure-enabled');
+        //this.fireAndForward('showmeasure');
+        this._startMarker(this.southWest, this.options);
+    }
+
+    private disable() {
+        //if (this.map.mapTool) this.map.mapTool.off('editable:drawing:start', this.disable.bind(this));
+        // dom.removeClass(this.map.container, 'measure-enabled');
+        // this.featuresLayer.clearLayers();
+        // //this.fireAndForward('hidemeasure');
+        // if (this._drawingEditor) {
+        //     this._drawingEditor.cancelDrawing();
+        // }
+    }
+
+    // created(): void {
+    //     this.featuresLayer = this._createFeaturesLayer();
+    // }
+
+    // private _createFeaturesLayer() {
+    //     let map: Map = (this.map = this.mapService.getMap(this.mapId));
+    //     let layerGroup: LayerGroup = new LayerGroup();
+    //     map.addLayer(layerGroup);
+    //     return layerGroup;
+    // }
+
+    private _startMarker(latlng, options) {
+        let map = this.mapService.getMap(this.mapId);
+        latlng = map.getCenter().clone();
+        let markerLayer: Marker = this._createMarker(latlng, options); //.addTo(this.map);
+        // map.addLayer(markerLayer);
+        //this.map.addLayer(marker);
+        //marker.enableEdit(this.map).startDrawing(); //editor.startDrawing() -> registerForDrawing
+        // let baseEditor = markerLayer.en.enableEdit(this.map);
+        // baseEditor.startDrawing();
+        return markerLayer;
+    }
+
+    private _createMarker(latlng, options): Marker {
+        // return this._createLayer((options && options.markerClass) || this.options.markerClass, latlng, options);
+        return new Marker(latlng, options);
+    }
+
+    // private _createLayer(klass, latlngs, options) {
+    //     options = util.extend({ editOptions: { mapTool: this } }, options);
+    //     let layer = new klass(latlngs, options);
+    //     //this.fireAndForward('editable:created', { layer: layer });
+    //     return layer;
+    // }
 }
 </script>
 

resources/js/Components/Map/map.component.vue

@@ -3,7 +3,7 @@
         <!-- <Map className="h-36" :center="state.center" :zoom="state.zoom"> // map component content </Map> -->
         <div :id="mapId" class="map-container mapDesktop rounded">
             <ZoomControlComponent :mapId="mapId"></ZoomControlComponent>
-            <DrawControlComponent :mapId="mapId"></DrawControlComponent>
+            <DrawControlComponent :mapId="mapId" :southWest="southWest" :northEast="northEast"></DrawControlComponent>
         </div>
     </div>
 </template>
@@ -71,12 +71,16 @@ export default class MapComponent extends Vue {
 
     mapService = MapService();
 
+    southWest;
+    northEast;
+
+
     /**
      * Informs when initialization is done with map id.
      */
     public onMapInitializedEvent: EventEmitter<string> = new EventEmitter<string>();
 
-    protected map!: Map;
+    public map!: Map;
     // protected drawnItems!: FeatureGroup<any>;
 
     // @Prop({ type: Object })
@@ -104,9 +108,9 @@ export default class MapComponent extends Vue {
         // if (this.fitBounds) {
         //     this.map.fitBounds(this.fitBounds);
         // }
-        const southWest = toLatLng(46.5, 9.9);
-        const northEast = toLatLng(48.9, 16.9);
-        const bounds = toLatLngBounds(southWest, northEast);
+        this.southWest = toLatLng(46.5, 9.9);
+        this.northEast = toLatLng(48.9, 16.9);
+        const bounds = toLatLngBounds(this.southWest, this.northEast);
         map.fitBounds(bounds);
 
         const attributionControl = new Attribution().addTo(this.map);

resources/js/Components/Map/utilities.ts

@@ -0,0 +1,12 @@
+// extend an object with properties of one or more other objects
+export function extend(dest) {
+	var i, j, len, src;
+
+	for (j = 1, len = arguments.length; j < len; j++) {
+		src = arguments[j];
+		for (i in src) {
+			dest[i] = src[i];
+		}
+	}
+	return dest;
+}