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

<template>
    <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"
            type="button" :class="[_enabled ? 'cursor-not-allowed bg-cyan-200' : 'bg-teal-50 is-active']"
            @click.prevent="toggleDraw">
            <BaseIcon v-if="mdiDrawPen" :path="mdiDrawPen" />
        </button>
    </div>
</template>

<script lang="ts">
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/src/map/index';
// import { LayerGroup } from 'leaflet/src/layer/LayerGroup';
// import { LatLngBounds, Rectangle } from 'leaflet';
import { on, off, preventDefault } from 'leaflet/src/dom/DomEvent';
import { Rectangle } from 'leaflet/src/layer/vector/Rectangle';
import { LatLngBounds } from 'leaflet/src/geo/LatLngBounds';
import { LatLng } from 'leaflet';
import { LeafletMouseEvent } from 'leaflet';

@Component({
    name: 'draw-control',
    components: {
        BaseIcon,
    },
})
export default class DrawControlComponent extends Vue {
    public TYPE = 'rectangle';
    mdiDrawPen = mdiDrawPen;
    // private featuresLayer;

    options = {
        shapeOptions: {
            stroke: true,
            color: '#22C55E',
            weight: 4,
            opacity: 0.5,
            fill: true,
            fillColor: '#22C55E', //same as color by default
            fillOpacity: 0.2,
            clickable: true,
        },
        repeatMode: true,
        showArea: true, //Whether to show the area in the tooltip
        metric: true, // Whether to use the metric measurement system or imperial
    };

    @Prop() public mapId: string;
    // @Prop() public map: Map;
    @Prop public southWest: LatLng;
    @Prop public northEast: LatLng;
    @Prop({
        default: true,
    })
    public preserve: boolean;

    mapService = MapService();
    public _enabled: boolean;
    private _map: Map;
    private _isDrawing: boolean = false;
    private _startLatLng: LatLng;
    private _mapDraggable: boolean;
    private _shape: Rectangle | undefined;

    enable() {
        if (this._enabled) {
            return this;
        }

        this._enabled = true;
        this.addHooks();
        this._map.control = this;
        return this;
    }

    disable() {
        if (!this._enabled) {
            return this;
        }

        this._enabled = false;
        this.removeHooks();
        return this;
    }

    enabled() {
        return !!this._enabled;
    }

    // @Ref('inputDraw') private _inputDraw: HTMLElement;

    private addHooks() {
        // L.Draw.Feature.prototype.addHooks.call(this);
        this._map = this.mapService.getMap(this.mapId);
        if (this._map) {
            this._mapDraggable = this._map.dragging.enabled();
            if (this._mapDraggable) {
                this._map.dragging.disable();
            }
            //TODO refactor: move cursor to styles
            // this._map.domElement.style.cursor = 'crosshair';
            this._map._container.style.cursor = 'crosshair';
            // this._tooltip.updateContent({text: this._initialLabelText});

            this._map
                .on('mousedown', this._onMouseDown, this)
                .on('mousemove', this._onMouseMove, this)
                .on('touchstart', this._onMouseDown, this)
                .on('touchmove', this._onMouseMove, this);
            // we should prevent default, otherwise default behavior (scrolling) will fire,
            // and that will cause document.touchend to fire and will stop the drawing
            // (circle, rectangle) in touch mode.
            // (update): we have to send passive now to prevent scroll, because by default it is {passive: true} now, which means,
            // handler can't event.preventDefault
            // check the news https://developers.google.com/web/updates/2016/06/passive-event-listeners
            // document.addEventListener('touchstart', preventDefault, { passive: false });
        }
    }

    private removeHooks() {
        // L.Draw.Feature.prototype.removeHooks.call(this);
        if (this._map) {
            if (this._mapDraggable) {
                this._map.dragging.enable();
            }

            //TODO refactor: move cursor to styles
            this._map._container.style.cursor = '';

            this._map
                .off('mousedown', this._onMouseDown, this)
                .off('mousemove', this._onMouseMove, this)
                .off('touchstart', this._onMouseDown, this)
                .off('touchmove', this._onMouseMove, this);

            off(document, 'mouseup', this._onMouseUp, this);
            off(document, 'touchend', this._onMouseUp, this);

            // document.removeEventListener('touchstart', preventDefault);

            // If the box element doesn't exist they must not have moved the mouse, so don't need to destroy/return
            if (this._shape && this.preserve == false) {
                this._map.removeLayer(this._shape);
                // delete this._shape;
                this._shape = undefined;
            }
        }
        this._isDrawing = false;
    }

    private _onMouseDown(e: LeafletMouseEvent) {
        this._isDrawing = true;
        this._startLatLng = e.latlng;

        // DomEvent.on(document, 'mouseup', this._onMouseUp, this)
        //     .on(document, 'touchend', this._onMouseUp, this)
        //     .preventDefault(e.originalEvent);
        on(document, 'mouseup', this._onMouseUp, this);
        on(document, 'touchend', this._onMouseUp, this);
        preventDefault(e.originalEvent);
    }

    private _onMouseMove(e: LeafletMouseEvent) {
        var latlng = e.latlng;

        // this._tooltip.updatePosition(latlng);
        if (this._isDrawing) {
            // this._tooltip.updateContent(this._getTooltipText());
            this._drawShape(latlng);
        }
    }

    private _onMouseUp() {
        if (this._shape) {
            this._fireCreatedEvent(this._shape);
        }

        // this.removeHooks();
        this.disable();
        if (this.options.repeatMode) {
            this.enable();
        }
    }

    private _fireCreatedEvent(shape: Rectangle) {
        var rectangle = new Rectangle(shape.getBounds(), this.options.shapeOptions);
        // L.Draw.SimpleShape.prototype._fireCreatedEvent.call(this, rectangle);
        this._map.fire('Draw.Event.CREATED', { layer: rectangle, type: this.TYPE });
    }

    public removeShape() {
        if (this._shape) {
            this._map.removeLayer(this._shape);
            // delete this._shape;
            this._shape = undefined;
        }
    }

    public drawShape(southWest: LatLng, northEast: LatLng) {
        if (!this._shape) {
            const bounds = new LatLngBounds(southWest, northEast);
            this._shape = new Rectangle(bounds, this.options.shapeOptions);
            // this._map.addLayer(this._shape);
            this._map = this.mapService.getMap(this.mapId);
            this._shape.addTo(this._map);
        } else {
            this._shape.setBounds(new LatLngBounds(southWest, northEast));
        }
    }

    // from Draw Rectangle
    private _drawShape(latlng: LatLng) {
        if (!this._shape) {
            const bounds = new LatLngBounds(this._startLatLng, latlng);
            this._shape = new Rectangle(bounds, this.options.shapeOptions);
            // this._map.addLayer(this._shape);
            this._shape.addTo(this._map);
        } else {
            this._shape.setBounds(new LatLngBounds(this._startLatLng, latlng));
        }
    }

    public toggleDraw() {
        if (this._enabled == true) {
            this.disable();
        } else {
            this.enable();
        }
    }

    // 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();
    //     // }
    // }
}
</script>

<style lang="css">
.gba-control-draw {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    border-radius: 4px;
    position: absolute;
    left: 10px;
    top: 100px;
    z-index: 999;
}

.btn-group-vertical button {
    display: block;

    margin-left: 0;
    margin-top: 0.5em;
}
</style>