maplair/dist/esm/map/handler/BoxZoomHandler.js

JavaScript library for mobile-friendly interactive maps

import { off, on, stop } from "../../dom/DomEvent.js";
import { create, disableImageDrag, disableTextSelection, enableImageDrag, enableTextSelection, setPosition } from "../../dom/DomUtil.js";
import { Handler } from "../../core/Handler.js";
import { Bounds } from "../../geometry/Bounds.js";
import { LatLngBounds } from "../../geo/LatLngBounds.js";
//#region src/map/handler/BoxZoomHandler.js
var BoxZoomHandler = class BoxZoomHandler extends Handler {
	constructor(map) {
		super(map);
		this._container = map._container;
		this._pane = map._panes.overlayPane;
		this._resetStateTimeout = 0;
		map.on("unload", this._destroy, this);
		this.callInitHooks(BoxZoomHandler);
	}
	addHooks() {
		on(this._container, "pointerdown", this._onPointerDown, this);
	}
	removeHooks() {
		off(this._container, "pointerdown", this._onPointerDown, this);
	}
	moved() {
		return this._moved;
	}
	_destroy() {
		this._pane.remove();
		delete this._pane;
	}
	_resetState() {
		this._resetStateTimeout = 0;
		this._moved = false;
	}
	_clearDeferredResetState() {
		if (this._resetStateTimeout !== 0) {
			clearTimeout(this._resetStateTimeout);
			this._resetStateTimeout = 0;
		}
	}
	_onPointerDown(e) {
		if (!e.shiftKey || e.button !== 0) return false;
		this._clearDeferredResetState();
		this._resetState();
		disableTextSelection();
		disableImageDrag();
		this._startPoint = this._map.pointerEventToContainerPoint(e);
		on(this._container, {
			contextmenu: stop,
			pointermove: this._onPointerMove,
			pointerup: this._onPointerUp,
			keydown: this._onKeyDown
		}, this);
		on(document, "keydown", this._onKeyDown, this);
	}
	_onPointerMove(e) {
		if (!this._moved) {
			this._moved = true;
			this._box = create("div", "maplair-zoom-box", this._container);
			this._container.classList.add("maplair-crosshair");
			this._map.fire("boxzoomstart");
		}
		this._point = this._map.pointerEventToContainerPoint(e);
		const bounds = new Bounds(this._point, this._startPoint), size = bounds.getSize();
		setPosition(this._box, bounds.min);
		this._box.style.width = `${size.x}px`;
		this._box.style.height = `${size.y}px`;
	}
	_finish() {
		if (this._moved) {
			this._box.remove();
			this._container.classList.remove("maplair-crosshair");
		}
		enableTextSelection();
		enableImageDrag();
		off(this._container, {
			contextmenu: stop,
			pointermove: this._onPointerMove,
			pointerup: this._onPointerUp
		}, this);
		off(document, "keydown", this._onKeyDown, this);
	}
	_onPointerUp(e) {
		if (e.button !== 0) return;
		this._finish();
		if (!this._moved) return;
		this._clearDeferredResetState();
		this._resetStateTimeout = setTimeout(this._resetState.bind(this), 0);
		const bounds = new LatLngBounds(this._map.containerPointToLatLng(this._startPoint), this._map.containerPointToLatLng(this._point));
		this._map.fitBounds(bounds).fire("boxzoomend", { boxZoomBounds: bounds });
	}
	_onKeyDown(e) {
		if (e.code === "Escape") {
			this._finish();
			this._clearDeferredResetState();
			this._resetState();
		}
	}
	static register(MaplairMap) {
		MaplairMap.mergeOptions({ boxZoom: true });
		MaplairMap.addInitHook("addHandler", "boxZoom", BoxZoomHandler);
	}
};
//#endregion
export { BoxZoomHandler };

//# sourceMappingURL=BoxZoomHandler.js.map