@scoova/mgl 1.0.0

package/src/ui/handler/box_zoom.test.ts

@@ -0,0 +1,163 @@
+import {Map} from '../map';
+import {DOM} from '../../util/dom';
+import simulate from '../../../test/unit/lib/simulate_interaction';
+import {beforeMapTest} from '../../util/test/util';
+
+function createMap(clickTolerance) {
+    return new Map({style: '', container: DOM.create('div', '', window.document.body), clickTolerance});
+}
+
+beforeEach(() => {
+    beforeMapTest();
+});
+
+describe('BoxZoomHandler', () => {
+    test('fires boxzoomstart and boxzoomend events at appropriate times', () => {
+        const map = createMap(undefined);
+
+        const boxzoomstart = jest.fn();
+        const boxzoomend   = jest.fn();
+
+        map.on('boxzoomstart', boxzoomstart);
+        map.on('boxzoomend',   boxzoomend);
+
+        simulate.mousedown(map.getCanvas(), {shiftKey: true, clientX: 0, clientY: 0});
+        map._renderTaskQueue.run();
+        expect(boxzoomstart).not.toHaveBeenCalled();
+        expect(boxzoomend).not.toHaveBeenCalled();
+
+        simulate.mousemove(map.getCanvas(), {shiftKey: true, clientX: 5, clientY: 5});
+        map._renderTaskQueue.run();
+        expect(boxzoomstart).toHaveBeenCalledTimes(1);
+        expect(boxzoomend).not.toHaveBeenCalled();
+
+        simulate.mouseup(map.getCanvas(), {shiftKey: true, clientX: 5, clientY: 5});
+        map._renderTaskQueue.run();
+        expect(boxzoomstart).toHaveBeenCalledTimes(1);
+        expect(boxzoomend).toHaveBeenCalledTimes(1);
+
+        map.remove();
+    });
+
+    test('avoids conflicts with DragPanHandler when disabled and reenabled (#2237)', () => {
+        const map = createMap(undefined);
+
+        map.boxZoom.disable();
+        map.boxZoom.enable();
+
+        const boxzoomstart = jest.fn();
+        const boxzoomend   = jest.fn();
+
+        map.on('boxzoomstart', boxzoomstart);
+        map.on('boxzoomend',   boxzoomend);
+
+        const dragstart = jest.fn();
+        const drag      = jest.fn();
+        const dragend   = jest.fn();
+
+        map.on('dragstart', dragstart);
+        map.on('drag',      drag);
+        map.on('dragend',   dragend);
+
+        simulate.mousedown(map.getCanvas(), {shiftKey: true, clientX: 0, clientY: 0});
+        map._renderTaskQueue.run();
+        expect(boxzoomstart).not.toHaveBeenCalled();
+        expect(boxzoomend).not.toHaveBeenCalled();
+
+        simulate.mousemove(map.getCanvas(), {shiftKey: true, clientX: 5, clientY: 5});
+        map._renderTaskQueue.run();
+        expect(boxzoomstart).toHaveBeenCalledTimes(1);
+        expect(boxzoomend).not.toHaveBeenCalled();
+
+        simulate.mouseup(map.getCanvas(), {shiftKey: true, clientX: 5, clientY: 5});
+        map._renderTaskQueue.run();
+        expect(boxzoomstart).toHaveBeenCalledTimes(1);
+        expect(boxzoomend).toHaveBeenCalledTimes(1);
+
+        expect(dragstart).not.toHaveBeenCalled();
+        expect(drag).not.toHaveBeenCalled();
+        expect(dragend).not.toHaveBeenCalled();
+
+        map.remove();
+    });
+
+    test('does not begin a box zoom if preventDefault is called on the mousedown event', () => {
+        const map = createMap(undefined);
+
+        map.on('mousedown', e => e.preventDefault());
+
+        const boxzoomstart = jest.fn();
+        const boxzoomend   = jest.fn();
+
+        map.on('boxzoomstart', boxzoomstart);
+        map.on('boxzoomend',   boxzoomend);
+
+        simulate.mousedown(map.getCanvas(), {shiftKey: true, clientX: 0, clientY: 0});
+        map._renderTaskQueue.run();
+
+        simulate.mousemove(map.getCanvas(), {shiftKey: true, clientX: 5, clientY: 5});
+        map._renderTaskQueue.run();
+
+        simulate.mouseup(map.getCanvas(), {shiftKey: true, clientX: 5, clientY: 5});
+        map._renderTaskQueue.run();
+
+        expect(boxzoomstart).not.toHaveBeenCalled();
+        expect(boxzoomend).not.toHaveBeenCalled();
+
+        map.remove();
+    });
+
+    test('does not begin a box zoom on spurious mousemove events', () => {
+        const map = createMap(undefined);
+
+        const boxzoomstart = jest.fn();
+        const boxzoomend   = jest.fn();
+
+        map.on('boxzoomstart', boxzoomstart);
+        map.on('boxzoomend',   boxzoomend);
+
+        simulate.mousedown(map.getCanvas(), {shiftKey: true, clientX: 0, clientY: 0});
+        map._renderTaskQueue.run();
+        expect(boxzoomstart).not.toHaveBeenCalled();
+        expect(boxzoomend).not.toHaveBeenCalled();
+
+        simulate.mousemove(map.getCanvas(), {shiftKey: true, clientX: 0, clientY: 0});
+        map._renderTaskQueue.run();
+        expect(boxzoomstart).not.toHaveBeenCalled();
+        expect(boxzoomend).not.toHaveBeenCalled();
+
+        simulate.mouseup(map.getCanvas(), {shiftKey: true, clientX: 0, clientY: 0});
+        map._renderTaskQueue.run();
+        expect(boxzoomstart).not.toHaveBeenCalled();
+        expect(boxzoomend).not.toHaveBeenCalled();
+
+        map.remove();
+    });
+
+    test('does not begin a box zoom until mouse move is larger than click tolerance', () => {
+        const map = createMap(4);
+
+        const boxzoomstart = jest.fn();
+        const boxzoomend   = jest.fn();
+
+        map.on('boxzoomstart', boxzoomstart);
+        map.on('boxzoomend',   boxzoomend);
+
+        simulate.mousedown(map.getCanvas(), {shiftKey: true, clientX: 0, clientY: 0});
+        map._renderTaskQueue.run();
+        expect(boxzoomstart).not.toHaveBeenCalled();
+        expect(boxzoomend).not.toHaveBeenCalled();
+
+        simulate.mousemove(map.getCanvas(), {shiftKey: true, clientX: 3, clientY: 0});
+        map._renderTaskQueue.run();
+        expect(boxzoomstart).not.toHaveBeenCalled();
+        expect(boxzoomend).not.toHaveBeenCalled();
+
+        simulate.mousemove(map.getCanvas(), {shiftKey: true, clientX: 0, clientY: 4});
+        map._renderTaskQueue.run();
+        expect(boxzoomstart).toHaveBeenCalledTimes(1);
+        expect(boxzoomend).not.toHaveBeenCalled();
+
+        map.remove();
+    });
+});

package/src/ui/handler/box_zoom.ts

@@ -0,0 +1,171 @@
+import {DOM} from '../../util/dom';
+
+import {Event} from '../../util/evented';
+import {TransformProvider} from './transform-provider';
+
+import type {Map} from '../map';
+import type Point from '@mapbox/point-geometry';
+import {Handler} from '../handler_manager';
+
+/**
+ * The `BoxZoomHandler` allows the user to zoom the map to fit within a bounding box.
+ * The bounding box is defined by clicking and holding `shift` while dragging the cursor.
+ *
+ * @group Handlers
+ */
+export class BoxZoomHandler implements Handler {
+    _map: Map;
+    _tr: TransformProvider;
+    _el: HTMLElement;
+    _container: HTMLElement;
+    _enabled: boolean;
+    _active: boolean;
+    _startPos: Point;
+    _lastPos: Point;
+    _box: HTMLElement;
+    _clickTolerance: number;
+
+    /** @internal */
+    constructor(map: Map, options: {
+        clickTolerance: number;
+    }) {
+        this._map = map;
+        this._tr = new TransformProvider(map);
+        this._el = map.getCanvasContainer();
+        this._container = map.getContainer();
+        this._clickTolerance = options.clickTolerance || 1;
+    }
+
+    /**
+     * Returns a Boolean indicating whether the "box zoom" interaction is enabled.
+     *
+     * @returns `true` if the "box zoom" interaction is enabled.
+     */
+    isEnabled() {
+        return !!this._enabled;
+    }
+
+    /**
+     * Returns a Boolean indicating whether the "box zoom" interaction is active, i.e. currently being used.
+     *
+     * @returns `true` if the "box zoom" interaction is active.
+     */
+    isActive() {
+        return !!this._active;
+    }
+
+    /**
+     * Enables the "box zoom" interaction.
+     *
+     * @example
+     * ```ts
+     * map.boxZoom.enable();
+     * ```
+     */
+    enable() {
+        if (this.isEnabled()) return;
+        this._enabled = true;
+    }
+
+    /**
+     * Disables the "box zoom" interaction.
+     *
+     * @example
+     * ```ts
+     * map.boxZoom.disable();
+     * ```
+     */
+    disable() {
+        if (!this.isEnabled()) return;
+        this._enabled = false;
+    }
+
+    mousedown(e: MouseEvent, point: Point) {
+        if (!this.isEnabled()) return;
+        if (!(e.shiftKey && e.button === 0)) return;
+
+        DOM.disableDrag();
+        this._startPos = this._lastPos = point;
+        this._active = true;
+    }
+
+    mousemoveWindow(e: MouseEvent, point: Point) {
+        if (!this._active) return;
+
+        const pos = point;
+
+        if (this._lastPos.equals(pos) || (!this._box && pos.dist(this._startPos) < this._clickTolerance)) {
+            return;
+        }
+
+        const p0 = this._startPos;
+        this._lastPos = pos;
+
+        if (!this._box) {
+            this._box = DOM.create('div', 'maplibregl-boxzoom', this._container);
+            this._container.classList.add('maplibregl-crosshair');
+            this._fireEvent('boxzoomstart', e);
+        }
+
+        const minX = Math.min(p0.x, pos.x),
+            maxX = Math.max(p0.x, pos.x),
+            minY = Math.min(p0.y, pos.y),
+            maxY = Math.max(p0.y, pos.y);
+
+        DOM.setTransform(this._box, `translate(${minX}px,${minY}px)`);
+
+        this._box.style.width = `${maxX - minX}px`;
+        this._box.style.height = `${maxY - minY}px`;
+    }
+
+    mouseupWindow(e: MouseEvent, point: Point) {
+        if (!this._active) return;
+
+        if (e.button !== 0) return;
+
+        const p0 = this._startPos,
+            p1 = point;
+
+        this.reset();
+
+        DOM.suppressClick();
+
+        if (p0.x === p1.x && p0.y === p1.y) {
+            this._fireEvent('boxzoomcancel', e);
+        } else {
+            this._map.fire(new Event('boxzoomend', {originalEvent: e}));
+            return {
+                cameraAnimation: map => map.fitScreenCoordinates(p0, p1, this._tr.bearing, {linear: true})
+            };
+        }
+    }
+
+    keydown(e: KeyboardEvent) {
+        if (!this._active) return;
+
+        if (e.keyCode === 27) {
+            this.reset();
+            this._fireEvent('boxzoomcancel', e);
+        }
+    }
+
+    reset() {
+        this._active = false;
+
+        this._container.classList.remove('maplibregl-crosshair');
+
+        if (this._box) {
+            DOM.remove(this._box);
+            this._box = null;
+        }
+
+        DOM.enableDrag();
+
+        delete this._startPos;
+        delete this._lastPos;
+    }
+
+    _fireEvent(type: string, e: any) {
+        return this._map.fire(new Event(type, {originalEvent: e}));
+    }
+}

package/src/ui/handler/click_zoom.ts

@@ -0,0 +1,55 @@
+import type Point from '@mapbox/point-geometry';
+import type {Map} from '../map';
+import {TransformProvider} from './transform-provider';
+import {Handler} from '../handler_manager';
+
+/**
+ * The `ClickZoomHandler` allows the user to zoom the map at a point by double clicking
+ * It is used by other handlers
+ */
+export class ClickZoomHandler implements Handler {
+
+    _tr: TransformProvider;
+    _enabled: boolean;
+    _active: boolean;
+
+    /** @internal */
+    constructor(map: Map) {
+        this._tr = new TransformProvider(map);
+        this.reset();
+    }
+
+    reset() {
+        this._active = false;
+    }
+
+    dblclick(e: MouseEvent, point: Point) {
+        e.preventDefault();
+        return {
+            cameraAnimation: (map: Map) => {
+                map.easeTo({
+                    duration: 300,
+                    zoom: this._tr.zoom + (e.shiftKey ? -1 : 1),
+                    around: this._tr.unproject(point)
+                }, {originalEvent: e});
+            }
+        };
+    }
+
+    enable() {
+        this._enabled = true;
+    }
+
+    disable() {
+        this._enabled = false;
+        this.reset();
+    }
+
+    isEnabled() {
+        return this._enabled;
+    }
+
+    isActive() {
+        return this._active;
+    }
+}