web-vue2/packages/components/map/interactions/Drag.js

web ui for vue2

import PointerInteraction from "ol/interaction/Pointer";
import RightRotate from "./RightRotate";

class Drag extends PointerInteraction {
    constructor(opt_options) {
          /**
         * @param {import("../src/ol/MapBrowserEvent.js").default} evt Map browser event.
         * @return {boolean} `true` to start the drag sequence.
         */
          let handleDownEvent=(evt)=> {
            const map = evt.map;

            const feature = map.forEachFeatureAtPixel(evt.pixel,  (feature)=> {
                if(feature.data&&feature.data.draggable) {
                    const element = map.getTargetElement();
                    element.style.cursor = this.cursor_drag;
                    this.dragging=true;
                    return feature;
                }
            });

            if (feature) {
                this.coordinate_ = evt.coordinate;
                this.feature_ = feature;
            }

            return !!feature;
        }

        /**
         * @param {import("../src/ol/MapBrowserEvent.js").default} evt Map browser event.
         */
        let handleDragEvent=(evt)=> {
            const deltaX = evt.coordinate[0] - this.coordinate_[0];
            const deltaY = evt.coordinate[1] - this.coordinate_[1];

            const geometry = this.feature_.getGeometry();
            geometry.translate(deltaX, deltaY);

            this.coordinate_[0] = evt.coordinate[0];
            this.coordinate_[1] = evt.coordinate[1];
        }

        /**
         * @param {import("../src/ol/MapBrowserEvent.js").default} evt Event.
         */
        let handleMoveEvent=(evt)=> {
            if (this.cursor_) {
                const map = evt.map;
                const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
                    if(feature.data&&feature.data.draggable)
                        return feature;
                });
                if(!this.dragging) {
                    const element = evt.map.getTargetElement();
                    if (feature) {
                        if (element.style.cursor != this.cursor_) {
                            if (element.style.cursor != this.cursor_drag && element.style.cursor != this.cursor_hover)
                                this.previousCursor_ = element.style.cursor;
                            element.style.cursor = this.cursor_;
                        }
                    } else if (this.previousCursor_ !== undefined) {
                        element.style.cursor = this.previousCursor_;
                        this.previousCursor_ = undefined;
                    }
                }
            }
        }

        /**
         * @return {boolean} `false` to stop the drag sequence.
         */
        let handleUpEvent=(evt)=> {
            const element = evt.map.getTargetElement();
            element.style.cursor = this.cursor_hover;
            this.dragging=false;
            if(this.feature_&&this.feature_.data&&this.feature_.data.dragEnd){
                this.feature_.data.dragEnd(evt,this);
            }else if(this.dragEnd){
                this.dragEnd(evt,this);
            }

            this.coordinate_ = null;
            this.feature_ = null;
            return false;
        }

        let setting=Object.assign({
             handleDownEvent:  handleDownEvent,
             handleDragEvent:  handleDragEvent,
             handleMoveEvent:  handleMoveEvent,
             handleUpEvent:  handleUpEvent},opt_options);

        super(setting);

        /**
         * @type {import("../src/ol/coordinate.js").Coordinate}
         * @private
         */
        this.coordinate_ = null;

        this.dragEnd=setting.dragEnd;
        /**
         * @type {string|undefined}
         * @private
         */
        this.cursor_="grab";
        this.cursor_hover = 'grab';
        this.cursor_drag = 'grabbing';
        /**
         * @type {Feature}
         * @private
         */
        this.feature_ = null;
        this.dragging=false;
        /**
         * @type {string|undefined}
         * @private
         */
        this.previousCursor_ = undefined;
    }

}

export default Drag;