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

- npm updates
- add map tool for drawing rectangles

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>