@scoova/mgl 1.0.0

package/src/ui/control/logo_control.test.ts

@@ -0,0 +1,88 @@
+import {createMap as globalCreateMap, beforeMapTest} from '../../util/test/util';
+
+function createMap(logoPosition, maplibreLogo) {
+
+    const mapobj = {
+        logoPosition,
+        maplibreLogo,
+        style: {
+            version: 8,
+            sources: {},
+            layers: []
+        }
+    };
+
+    return globalCreateMap(mapobj, undefined);
+}
+
+beforeEach(() => {
+    beforeMapTest();
+});
+
+describe('LogoControl', () => {
+    test('does not appear by default', async () => {
+        const map = createMap(undefined, undefined);
+        await map.once('load');
+        expect(map.getContainer().querySelectorAll(
+            '.maplibregl-ctrl-logo'
+        )).toHaveLength(0);
+    });
+
+    test('is not displayed when the maplibreLogo property is false', () => new Promise<void>(done => {
+        const map = createMap(undefined, false);
+        map.on('load', () => {
+            expect(map.getContainer().querySelectorAll(
+                '.maplibregl-ctrl-logo'
+            )).toHaveLength(0);
+            done();
+        });
+    }));
+
+    test('appears in bottom-left when maplibreLogo is true and logoPosition is undefined', () => new Promise<void>(done => {
+        const map = createMap(undefined, true);
+        map.on('load', () => {
+            expect(map.getContainer().querySelectorAll(
+                '.maplibregl-ctrl-bottom-left .maplibregl-ctrl-logo'
+            )).toHaveLength(1);
+            done();
+        });
+    }));
+
+    test('appears in the position specified by the position option', () => new Promise<void>(done => {
+        const map = createMap('top-left', true);
+        map.on('load', () => {
+            expect(map.getContainer().querySelectorAll(
+                '.maplibregl-ctrl-top-left .maplibregl-ctrl-logo'
+            )).toHaveLength(1);
+            done();
+        });
+    }));
+
+    test('appears in compact mode if container is less then 640 pixel wide', () => {
+        const map = createMap(undefined, true);
+        const container = map.getContainer();
+
+        Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 645, configurable: true});
+        map.resize();
+        expect(
+            container.querySelectorAll('.maplibregl-ctrl-logo:not(.maplibregl-compact)')
+        ).toHaveLength(1);
+
+        Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 635, configurable: true});
+        map.resize();
+        expect(
+            container.querySelectorAll('.maplibregl-ctrl-logo.maplibregl-compact')
+        ).toHaveLength(1);
+    });
+
+    test('has `rel` noopener and nofollow', () => new Promise<void>(done => {
+        const map = createMap(undefined, true);
+
+        map.on('load', () => {
+            const container = map.getContainer();
+            const logo = container.querySelector('.maplibregl-ctrl-logo');
+            expect(logo).toHaveProperty('rel', 'noopener nofollow');
+            done();
+        });
+    }));
+});

package/src/ui/control/logo_control.ts

@@ -0,0 +1,86 @@
+import {DOM} from '../../util/dom';
+
+import type {Map} from '../map';
+import type {ControlPosition, IControl} from './control';
+
+/**
+ * The {@link LogoControl} options object
+ */
+type LogoControlOptions = {
+    /**
+     * If `true`, force a compact logo.
+     * If `false`, force the full logo. The default is a responsive logo that collapses when the map is less than 640 pixels wide.
+     */
+    compact?: boolean;
+};
+
+/**
+ * A `LogoControl` is a control that adds the watermark.
+ *
+ * @group Markers and Controls
+ *
+ * @example
+ * ```ts
+ * map.addControl(new LogoControl({compact: false}));
+ * ```
+ **/
+export class LogoControl implements IControl {
+    options: LogoControlOptions;
+    _map: Map;
+    _compact: boolean;
+    _container: HTMLElement;
+
+    /**
+     * @param options - the control's options
+     */
+    constructor(options: LogoControlOptions = {}) {
+        this.options = options;
+    }
+
+    getDefaultPosition(): ControlPosition {
+        return 'bottom-left';
+    }
+
+    /** {@inheritDoc IControl.onAdd} */
+    onAdd(map: Map) {
+        this._map = map;
+        this._compact = this.options && this.options.compact;
+        this._container = DOM.create('div', 'maplibregl-ctrl');
+        const anchor = DOM.create('a', 'maplibregl-ctrl-logo');
+        anchor.target = '_blank';
+        anchor.rel = 'noopener nofollow';
+        anchor.href = 'https://maplibre.org/';
+        anchor.setAttribute('aria-label', this._map._getUIString('LogoControl.Title'));
+        anchor.setAttribute('rel', 'noopener nofollow');
+        this._container.appendChild(anchor);
+        this._container.style.display = 'block';
+
+        this._map.on('resize', this._updateCompact);
+        this._updateCompact();
+
+        return this._container;
+    }
+
+    /** {@inheritDoc IControl.onRemove} */
+    onRemove() {
+        DOM.remove(this._container);
+        this._map.off('resize', this._updateCompact);
+        this._map = undefined;
+        this._compact = undefined;
+    }
+
+    _updateCompact = () => {
+        const containerChildren = this._container.children;
+        if (containerChildren.length) {
+            const anchor = containerChildren[0];
+            if (this._map.getCanvasContainer().offsetWidth <= 640 || this._compact) {
+                if (this._compact !== false) {
+                    anchor.classList.add('maplibregl-compact');
+                }
+            } else {
+                anchor.classList.remove('maplibregl-compact');
+            }
+        }
+    };
+
+}

package/src/ui/control/navigation_control.test.ts

@@ -0,0 +1,238 @@
+import simulate from '../../../test/unit/lib/simulate_interaction';
+import {createMap as globalCreateMap, beforeMapTest} from '../../util/test/util';
+import {NavigationControl} from './navigation_control';
+
+function createMap() {
+    return globalCreateMap({});
+}
+
+let map;
+
+beforeEach(() => {
+    beforeMapTest();
+    map = createMap();
+});
+
+afterEach(() => {
+    map.remove();
+});
+
+describe('NavigationControl', () => {
+    test('appears in the top-right', () => {
+        map.addControl(new NavigationControl());
+
+        expect(
+            map.getContainer().querySelectorAll('.maplibregl-ctrl-top-right > .maplibregl-ctrl')
+        ).toHaveLength(1);
+    });
+
+    test('contains zoom in button', () => {
+        map.addControl(new NavigationControl());
+
+        expect(
+            map.getContainer().querySelectorAll('.maplibregl-ctrl-zoom-in')
+        ).toHaveLength(1);
+    });
+
+    test('contains zoom out button', () => {
+        map.addControl(new NavigationControl());
+
+        expect(
+            map.getContainer().querySelectorAll('.maplibregl-ctrl-zoom-out')
+        ).toHaveLength(1);
+    });
+
+    test('contains compass button', () => {
+        map.addControl(new NavigationControl());
+
+        expect(
+            map.getContainer().querySelectorAll('.maplibregl-ctrl-compass')
+        ).toHaveLength(1);
+    });
+
+    test('compass button reset action', () => {
+        map.setPitch(10);
+        map.setBearing(10);
+
+        map.addControl(new NavigationControl({
+            visualizePitch: true,
+            showZoom: true,
+            showCompass: true
+        }));
+        const spyReset = jest.spyOn(map, 'resetNorthPitch');
+        const navButton = map.getContainer().querySelector('.maplibregl-ctrl-compass');
+
+        simulate.click(navButton);
+        map._renderTaskQueue.run();
+
+        expect(spyReset).toHaveBeenCalledTimes(1);
+    });
+
+    test('compass button drag horizontal', () => {
+        const navControl = new NavigationControl({
+            visualizePitch: true,
+            showZoom: true,
+            showCompass: true
+        });
+        map.addControl(navControl);
+
+        const spySetPitch = jest.spyOn(map, 'setPitch');
+        const spySetBearing = jest.spyOn(map, 'setBearing');
+
+        const navButton = map.getContainer().querySelector('.maplibregl-ctrl-compass');
+        const navRect = navButton.getClientRects();
+
+        const buttonX = (navRect.x ?? 0) + (navRect.width ?? 0) / 2;
+        const buttonY = (navRect.y ?? 0) + (navRect.height ?? 0) / 2;
+
+        simulate.mousedown(navButton, {buttons: 1, button: 0, clientX: buttonX, clientY: buttonY});
+        simulate.mousemove(window, {buttons: 1, button: 0, clientX: buttonX - 50, clientY: buttonY});
+        simulate.mousemove(window, {buttons: 1, button: 0, clientX: buttonX - 100, clientY: buttonY});
+        simulate.mouseup(window,   {button: 0, clientX: buttonX - 100, clientY: buttonY});
+
+        map._renderTaskQueue.run();
+
+        expect(spySetPitch).not.toHaveBeenCalled();
+        expect(spySetBearing).toHaveBeenCalled();
+    });
+
+    test('compass button drag vertical', () => {
+        const navControl = new NavigationControl({
+            visualizePitch: true,
+            showZoom: true,
+            showCompass: true
+        });
+        map.addControl(navControl);
+
+        const spySetPitch = jest.spyOn(map, 'setPitch');
+        const spySetBearing = jest.spyOn(map, 'setBearing');
+
+        const navButton = map.getContainer().querySelector('.maplibregl-ctrl-compass');
+        const navRect = navButton.getClientRects();
+
+        const buttonX = (navRect.x ?? 0) + (navRect.width ?? 0) / 2;
+        const buttonY = (navRect.y ?? 0) + (navRect.height ?? 0) / 2;
+
+        simulate.mousedown(navButton, {buttons: 1, button: 0, clientX: buttonX, clientY: buttonY});
+        simulate.mousemove(window, {buttons: 1, button: 0, clientX: buttonX, clientY: buttonY - 50});
+        simulate.mousemove(window, {buttons: 1, button: 0, clientX: buttonX, clientY: buttonY - 100});
+        simulate.mouseup(window,   {button: 0, clientX: buttonX, clientY: buttonY - 100});
+
+        map._renderTaskQueue.run();
+
+        expect(spySetPitch).toHaveBeenCalled();
+        expect(spySetBearing).not.toHaveBeenCalled();
+    });
+
+    test('compass button drag diagonal', () => {
+        const navControl = new NavigationControl({
+            visualizePitch: true,
+            showZoom: true,
+            showCompass: true
+        });
+        map.addControl(navControl);
+
+        const spySetPitch = jest.spyOn(map, 'setPitch');
+        const spySetBearing = jest.spyOn(map, 'setBearing');
+
+        const navButton = map.getContainer().querySelector('.maplibregl-ctrl-compass');
+        const navRect = navButton.getClientRects();
+
+        const buttonX = (navRect.x ?? 0) + (navRect.width ?? 0) / 2;
+        const buttonY = (navRect.y ?? 0) + (navRect.height ?? 0) / 2;
+
+        simulate.mousedown(navButton, {buttons: 1, button: 0, clientX: buttonX, clientY: buttonY});
+        simulate.mousemove(window, {buttons: 1, button: 0, clientX: buttonX - 50, clientY: buttonY - 50});
+        simulate.mousemove(window, {buttons: 1, button: 0, clientX: buttonX - 100, clientY: buttonY - 100});
+        simulate.mouseup(window,   {button: 0, clientX: buttonX - 100, clientY: buttonY - 100});
+
+        map._renderTaskQueue.run();
+
+        expect(spySetPitch).toHaveBeenCalled();
+        expect(spySetBearing).toHaveBeenCalled();
+    });
+
+    test('compass button touch drag horizontal', () => {
+        const navControl = new NavigationControl({
+            visualizePitch: true,
+            showZoom: true,
+            showCompass: true
+        });
+        map.addControl(navControl);
+
+        const spySetPitch = jest.spyOn(map, 'setPitch');
+        const spySetBearing = jest.spyOn(map, 'setBearing');
+
+        const navButton = map.getContainer().querySelector('.maplibregl-ctrl-compass');
+        const navRect = navButton.getClientRects();
+
+        const buttonX = (navRect.x ?? 0) + (navRect.width ?? 0) / 2;
+        const buttonY = (navRect.y ?? 0) + (navRect.height ?? 0) / 2;
+
+        simulate.touchstart(navButton, {touches: [{clientX: buttonX, clientY: buttonY}], targetTouches: [{clientX: buttonX, clientY: buttonY}]});
+        simulate.touchmove(window, {touches: [{clientX: buttonX - 50, clientY: buttonY}], targetTouches: [{clientX: buttonX - 50, clientY: buttonY}]});
+        simulate.touchmove(window, {touches: [{clientX: buttonX - 100, clientY: buttonY}], targetTouches: [{clientX: buttonX - 100, clientY: buttonY}]});
+        simulate.touchend(window);
+
+        map._renderTaskQueue.run();
+
+        expect(spySetPitch).not.toHaveBeenCalled();
+        expect(spySetBearing).toHaveBeenCalled();
+    });
+
+    test('compass button touch drag vertical', () => {
+        const navControl = new NavigationControl({
+            visualizePitch: true,
+            showZoom: true,
+            showCompass: true
+        });
+        map.addControl(navControl);
+
+        const spySetPitch = jest.spyOn(map, 'setPitch');
+        const spySetBearing = jest.spyOn(map, 'setBearing');
+
+        const navButton = map.getContainer().querySelector('.maplibregl-ctrl-compass');
+        const navRect = navButton.getClientRects();
+
+        const buttonX = (navRect.x ?? 0) + (navRect.width ?? 0) / 2;
+        const buttonY = (navRect.y ?? 0) + (navRect.height ?? 0) / 2;
+
+        simulate.touchstart(navButton, {touches: [{clientX: buttonX, clientY: buttonY}], targetTouches: [{clientX: buttonX, clientY: buttonY}]});
+        simulate.touchmove(window, {touches: [{clientX: buttonX, clientY: buttonY - 50}], targetTouches: [{clientX: buttonX, clientY: buttonY - 50}]});
+        simulate.touchmove(window, {touches: [{clientX: buttonX, clientY: buttonY - 100}], targetTouches: [{clientX: buttonX, clientY: buttonY - 100}]});
+        simulate.touchend(window);
+
+        map._renderTaskQueue.run();
+
+        expect(spySetPitch).toHaveBeenCalled();
+        expect(spySetBearing).not.toHaveBeenCalled();
+    });
+
+    test('compass button touch drag diagonal', () => {
+        const navControl = new NavigationControl({
+            visualizePitch: true,
+            showZoom: true,
+            showCompass: true
+        });
+        map.addControl(navControl);
+
+        const spySetPitch = jest.spyOn(map, 'setPitch');
+        const spySetBearing = jest.spyOn(map, 'setBearing');
+
+        const navButton = map.getContainer().querySelector('.maplibregl-ctrl-compass');
+        const navRect = navButton.getClientRects();
+
+        const buttonX = (navRect.x ?? 0) + (navRect.width ?? 0) / 2;
+        const buttonY = (navRect.y ?? 0) + (navRect.height ?? 0) / 2;
+
+        simulate.touchstart(navButton, {touches: [{clientX: buttonX, clientY: buttonY}], targetTouches: [{clientX: buttonX, clientY: buttonY}]});
+        simulate.touchmove(window, {touches: [{clientX: buttonX - 50, clientY: buttonY - 50}], targetTouches: [{clientX: buttonX - 50, clientY: buttonY - 50}]});
+        simulate.touchmove(window, {touches: [{clientX: buttonX - 100, clientY: buttonY - 100}], targetTouches: [{clientX: buttonX - 100, clientY: buttonY - 100}]});
+        simulate.touchend(window);
+
+        map._renderTaskQueue.run();
+
+        expect(spySetPitch).toHaveBeenCalled();
+        expect(spySetBearing).toHaveBeenCalled();
+    });
+});