leaflet-rotate 0.5.0 → 0.5.1

package/test/steps/bearing.steps.js

@@ -575,3 +575,196 @@ Then('its drag callbacks match the marker and pointer coordinates', function ()
   assert.ok(Math.abs(this.markerPosition.marker.lat - lastCallback[0]) < 1e-7, JSON.stringify(this.markerPosition));
   assert.ok(Math.abs(this.markerPosition.marker.lng - lastCallback[1]) < 1e-7, JSON.stringify(this.markerPosition));
 });
+
+When('I animate a zoom from a low level on a rotated map', async function () {
+  this.lowZoomJump = await this.page.evaluate(async () => {
+    const style = document.createElement('style');
+    style.textContent = '*{transition:none!important}';
+    document.head.appendChild(style);
+    map.setView([50, 5], 1, { animate: false });
+    map.setBearing(30);
+    await new Promise(resolve => setTimeout(resolve, 300));
+    const element = circle.getElement(),
+      center = () => {
+        const bounds = element.getBoundingClientRect();
+        return [bounds.left + bounds.width / 2, bounds.top + bounds.height / 2];
+      };
+    map.setZoom(3);
+    await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+    const animated = center();
+    await new Promise(resolve => setTimeout(resolve, 500));
+    const settled = center();
+    style.remove();
+    return Math.hypot(animated[0] - settled[0], animated[1] - settled[1]);
+  });
+});
+
+Then('vector layers do not jump at the end of the zoom animation', function () {
+  assert.ok(this.lowZoomJump < 3, `Vector layer jumped ${this.lowZoomJump}px`);
+});
+
+When('I zoom around an off-center point on a pitched map', async function () {
+  this.zoomAroundDrift = await this.page.evaluate(async () => {
+    map.setView([50, 5], 6, { animate: false });
+    map.setBearing(30);
+    map.setPitch(60);
+    const size = map.getSize(),
+      point = new L.Point(size.x * 0.1, size.y * 0.9),
+      latlng = map.containerPointToLatLng(point);
+    map.setZoomAround(point, 7, { animate: false });
+    const drift = map.latLngToContainerPoint(latlng).distanceTo(point);
+    let animated = false;
+    map.once('zoomanim', () => animated = true);
+    map.setZoomAround(new L.Point(size.x * 0.85, size.y * 0.15), 8);
+    await new Promise(resolve => setTimeout(resolve, 400));
+    return { drift, animated };
+  });
+});
+
+Then('the point under the cursor stays in place', function () {
+  assert.ok(this.zoomAroundDrift.drift < 2, `Point under the cursor moved ${this.zoomAroundDrift.drift}px`);
+  assert.equal(this.zoomAroundDrift.animated, true, 'Zoom toward the horizon was not animated');
+});
+
+When('I right-drag horizontally below the map center', async function () {
+  await this.page.evaluate(() => {
+    map.setPitch(0);
+    map.setBearing(0);
+    window.__contextMenus = 0;
+    map.on('contextmenu', () => window.__contextMenus++);
+  });
+  const bounds = await this.page.locator('#map').boundingBox(),
+    start = { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 + 50 };
+  await this.page.mouse.move(start.x, start.y);
+  await this.page.mouse.down({ button: 'right' });
+  await this.page.mouse.move(start.x + 50, start.y, { steps: 5 });
+  await this.page.mouse.up({ button: 'right' });
+  await this.page.locator('#map').dispatchEvent('contextmenu', { button: 2, clientX: start.x + 50, clientY: start.y });
+  this.rightDrag = await this.page.evaluate(() => ({
+    bearing: map.getBearing(),
+    contextMenus: window.__contextMenus,
+  }));
+});
+
+Then('the map rotates counterclockwise without opening the context menu', function () {
+  assert.ok(Math.abs(this.rightDrag.bearing - 320) < 1e-6, JSON.stringify(this.rightDrag));
+  assert.equal(this.rightDrag.contextMenus, 0);
+});
+
+When('a context menu event fires immediately on right-button press', async function () {
+  this.earlyContextMenu = await this.page.evaluate(() => {
+    let contextMenus = 0;
+    map.on('contextmenu', () => contextMenus++);
+    const pointer = L.version.startsWith('2.');
+    const Event = pointer ? PointerEvent : MouseEvent;
+    map.getContainer().dispatchEvent(new Event(pointer ? 'pointerdown' : 'mousedown', {
+      button: 2, buttons: 2, bubbles: true, cancelable: true,
+    }));
+    const menu = new MouseEvent('contextmenu', { button: 2, bubbles: true, cancelable: true });
+    map.getContainer().dispatchEvent(menu);
+    document.dispatchEvent(new Event(pointer ? 'pointerup' : 'mouseup', { button: 2 }));
+    return { prevented: menu.defaultPrevented, contextMenus };
+  });
+});
+
+Then('the early context menu is suppressed', function () {
+  assert.deepEqual(this.earlyContextMenu, { prevented: true, contextMenus: 0 });
+});
+
+When('I look at a high zoom map with a high pitch', async function () {
+  this.highPitch = await this.page.evaluate(async () => {
+    const results = [];
+    for (const pitch of [70, 85]) {
+      map.setView([51.45, -0.26], 18, { animate: false });
+      map.setBearing(30);
+      map.setPitch(pitch);
+      await new Promise(resolve => setTimeout(resolve, 300));
+      const layer = Object.values(map._layers).find(l => l._tiles && l._map && l._tileZoom !== undefined),
+        tileSize = layer.getTileSize(),
+        size = map.getSize(),
+        farY = map._getPitchFarY();
+      let missing = 0;
+      for (let x = 0; x <= size.x; x += size.x / 8) {
+        for (let y = Math.max(0, farY + 2); y <= size.y; y += size.y / 8) {
+          const tile = map.project(map.containerPointToLatLng([x, y]), layer._tileZoom).unscaleBy(tileSize).floor();
+          if (!layer._tiles[`${tile.x}:${tile.y}:${layer._tileZoom}`]) missing++;
+        }
+      }
+      const bounds = map.getBounds(), center = map.getCenter(), canvas = path._renderer._container;
+      results.push({
+        pitch,
+        farY,
+        missing,
+        tiles: Object.keys(layer._tiles).length,
+        canvas: [canvas.width, canvas.height],
+        boundsContainCenter: bounds.contains(center),
+        sky: map._pitchSky && map._pitchSky.style.display !== 'none',
+      });
+    }
+    return results;
+  });
+});
+
+Then('tile loading stays bounded and covers the visible map', function () {
+  for (const result of this.highPitch) {
+    const details = JSON.stringify(result);
+    assert.equal(result.missing, 0, details);
+    assert.ok(result.tiles < 300, details);
+    assert.ok(Math.max(...result.canvas) < 5000, details);
+    assert.equal(result.boundsContainCenter, true, details);
+    assert.ok(result.farY > 0, details);
+    assert.equal(result.sky, true, details);
+  }
+});
+
+When('I pan, zoom and change the pitch of a rotated map', async function () {
+  const page = this.page;
+  const setup = ([bearing, pitch]) => {
+    window.__tileErr = () => {
+      const layer = Object.values(map._layers).find(l => l._tiles && l._map && l._level),
+        level = layer._level,
+        point = new L.Point(150, 200),
+        ref = document.createElement('div'),
+        origin = map.project(map.containerPointToLatLng(point), level.zoom).round().subtract(level.origin);
+      ref.style.cssText = `position:absolute;width:0;height:0;left:${origin.x}px;top:${origin.y}px`;
+      level.el.appendChild(ref);
+      const rect = ref.getBoundingClientRect(), container = map.getContainer().getBoundingClientRect();
+      ref.remove();
+      return Math.hypot(rect.left - container.left - point.x, rect.top - container.top - point.y);
+    };
+    map.setView([51.45, -0.26], 10, { animate: false });
+    map.setBearing(bearing);
+    map.setPitch(pitch);
+    map.panBy([60, 60], { animate: false });
+  };
+  const box = await page.locator('#map').boundingBox();
+  this.tileAlignment = [];
+  for (const view of [[30, 30], [30, 0]]) {
+    await page.evaluate(setup, view);
+    await page.mouse.move(box.x + box.width * 0.7, box.y + box.height * 0.6);
+    for (const delta of [-200, 200]) {
+      const zoomEnd = page.evaluate(() => new Promise(resolve => { map.once('zoomend', () => resolve()); setTimeout(resolve, 2000); }));
+      await page.mouse.wheel(0, delta);
+      await zoomEnd;
+      await page.waitForTimeout(500);
+      this.tileAlignment.push({ view, delta, error: await page.evaluate(() => window.__tileErr()) });
+    }
+  }
+  this.tileAlignment.push(await page.evaluate(async () => {
+    map.setView([51.45, -0.26], 10, { animate: false });
+    map.setPitch(85);
+    map.setView([51.45, -0.26], 10, { animate: false });
+    const centerError = map.project(map.getCenter()).distanceTo(map.project([51.45, -0.26]));
+    map.setPitch(0);
+    map.setBearing(30);
+    await new Promise(resolve => setTimeout(resolve, 300));
+    return { view: 'pitch 85 to 0', centerError, error: window.__tileErr() };
+  }));
+});
+
+Then('the map is centered and the tiles stay aligned with the map coordinates', function () {
+  for (const result of this.tileAlignment) {
+    assert.ok(result.error < 3, JSON.stringify(this.tileAlignment));
+    assert.ok(!(result.centerError > 2), JSON.stringify(this.tileAlignment));
+  }
+});

package/test/steps/example.steps.js

@@ -76,32 +76,62 @@ When('I rotate a map with the default rotate control', async function () {
     const displayWhenRotated = getComputedStyle(control).display;
     testMap.setBearing(0);
     const displayAfterReset = getComputedStyle(control).display;
+    testMap.setPitch(30);
+    const displayWhenPitched = getComputedStyle(control).display;
+    testMap.setPitch(0);
+    const displayAfterPitchReset = getComputedStyle(control).display;
     testMap.remove();
     container.remove();
-    return [displayAtZero, displayWhenRotated, displayAfterReset];
+    return [displayAtZero, displayWhenRotated, displayAfterReset, displayWhenPitched, displayAfterPitchReset];
   });
 });
 
 Then('the default rotate control visibility follows the bearing', function () {
-  assert.deepEqual(this.rotateControlVisibility, ['none', 'block', 'none']);
+  assert.deepEqual(this.rotateControlVisibility, ['none', 'block', 'none', 'block', 'none']);
 });
 
 When('I drag the rotate control', async function () {
-  this.controlBearing = await this.page.evaluate(() => {
-    map.setBearing(0);
-    const link = map.rotateControl._link;
-    link.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: 100, clientY: 100 }));
-    document.dispatchEvent(new MouseEvent('mousemove', { bubbles: true, clientX: 135, clientY: 100 }));
-    document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, clientX: 135, clientY: 100 }));
-    return map.getBearing();
-  });
+  await this.page.evaluate(() => { map.setPitch(0); map.setBearing(0); });
+  const box = await this.page.locator('.leaflet-control-rotate-toggle').boundingBox(),
+    x = box.x + box.width / 2,
+    y = box.y + box.height / 2;
+  await this.page.mouse.move(x, y);
+  await this.page.mouse.down();
+  await this.page.mouse.move(x + 50, y, { steps: 5 });
+  await this.page.mouse.move(x + 50, y + 200, { steps: 5 });
+  await this.page.mouse.move(x + 50, y + 160, { steps: 5 });
+  await this.page.mouse.up();
+  await this.page.waitForTimeout(700);
+  this.controlDrag = await this.page.evaluate(() => ({
+    bearing: map.getBearing(),
+    pitch: map.getPitch(),
+    arrow: map.rotateControl._arrow.style.transform,
+  }));
+});
+
+Then('the map bearing and pitch follow the control drag', function () {
+  // a drag must not be followed by the click reset
+  assert.ok(Math.abs(this.controlDrag.bearing - 40) < 1e-6, JSON.stringify(this.controlDrag));
+  assert.ok(Math.abs(this.controlDrag.pitch - 20) < 1e-6, JSON.stringify(this.controlDrag));
+  assert.match(this.controlDrag.arrow, /rotateX\((20|19\.9)[\d.]*deg\) rotate\((40|39\.9)[\d.]*deg\)/);
 });
 
-Then('the map bearing follows the control drag', function () {
-  assert.equal(this.controlBearing, 35);
+When('I click the rotate control on a rotated and pitched map', async function () {
+  await this.page.evaluate(() => { map.setBearing(120); map.setPitch(45); });
+  await this.page.locator('.leaflet-control-rotate-toggle').click();
+  this.controlReset = [await this.page.evaluate(() => ({ bearing: map.getBearing(), pitch: map.getPitch() }))];
+  await this.page.waitForTimeout(800);
+  this.controlReset.push(await this.page.evaluate(() => ({ bearing: map.getBearing(), pitch: map.getPitch() })));
 });
 
-When('I activate compass mode on a permission-based device', async function () {
+Then('the map animates back to north and zero pitch', function () {
+  const [start, end] = this.controlReset;
+  assert.ok(start.bearing > 0 || start.pitch > 0, JSON.stringify(this.controlReset));
+  assert.equal(end.bearing, 0);
+  assert.equal(end.pitch, 0);
+});
+
+When('I enable compass bearing on a permission-based device', async function () {
   this.permissionRequests = await this.page.evaluate(async () => {
     const descriptor = Object.getOwnPropertyDescriptor(window, 'DeviceOrientationEvent');
     window.permissionRequests = 0;
@@ -114,24 +144,21 @@ When('I activate compass mode on a permission-based device', async function () {
         }
       },
     });
-    const click = () => map.rotateControl._link.dispatchEvent(new MouseEvent('click', {
-      bubbles: true,
-      cancelable: true,
-    }));
-    click();
-    click();
-    await Promise.resolve();
+    map.compassBearing.disable();
+    map.compassBearing.enable();
+    await new Promise(resolve => setTimeout(resolve));
+    const enabled = map.compassBearing.enabled();
     if (descriptor) {
       Object.defineProperty(window, 'DeviceOrientationEvent', descriptor);
     } else {
       delete window.DeviceOrientationEvent;
     }
-    return window.permissionRequests;
+    return { requests: window.permissionRequests, enabled };
   });
 });
 
 Then('device-orientation permission is requested', function () {
-  assert.equal(this.permissionRequests, 1);
+  assert.deepEqual(this.permissionRequests, { requests: 1, enabled: false });
 });
 
 When('I apply compass heading readings', async function () {
@@ -327,8 +354,8 @@ When('I inspect debugger geometry after resizing and moving the map', async func
       return [point.x - targets[index][0], point.y - targets[index][1]];
     });
     const pixelBounds = map.getPixelBounds();
-    const debugMin = JSON.parse(document.getElementById('ogbx').textContent);
-    const debugMax = JSON.parse(document.getElementById('ogby').textContent);
+    const debugMin = document.getElementById('ogbx').textContent.split(',').map(Number);
+    const debugMax = document.getElementById('ogby').textContent.split(',').map(Number);
     return {
       size: [size.x, size.y],
       paneSizes: ['.panebounds.rotate', '.panebounds.main'].map(selector => {
@@ -343,10 +370,10 @@ When('I inspect debugger geometry after resizing and moving the map', async func
       ],
       pixelOrigin: [read('ogx') - map._pixelOrigin.x, read('ogy') - map._pixelOrigin.y],
       pixelBounds: [
-        debugMin.x - pixelBounds.min.x,
-        debugMin.y - pixelBounds.min.y,
-        debugMax.x - pixelBounds.max.x,
-        debugMax.y - pixelBounds.max.y,
+        debugMin[0] - pixelBounds.min.x,
+        debugMin[1] - pixelBounds.min.y,
+        debugMax[0] - pixelBounds.max.x,
+        debugMax[1] - pixelBounds.max.y,
       ],
       pointer: [
         read('llx') - window.debugMouseEvent.latlng[0],
@@ -392,7 +419,7 @@ When('I use the example zoom controls', async function () {
 
 When('I rotate the example markers from the debugger', async function () {
   this.markerRotationsBefore = await this.page.evaluate(() => markers.map(marker => marker.options.rotation));
-  await this.page.getByRole('button', { name: 'Rotate Markers' }).click();
+  await this.page.getByRole('button', { name: 'Rotate', exact: true }).click();
   await this.page.waitForTimeout(600);
   this.markerRotationsAfter = await this.page.evaluate(() => markers.map(marker => marker.options.rotation));
 });

package/test/steps/gestures.steps.js

@@ -53,6 +53,61 @@ When('I move a two-finger pinch gesture', async function () {
   });
 });
 
+When('I drag two fingers vertically and then pinch with touch pitch enabled', async function () {
+  this.touchPitch = await this.page.evaluate(() => {
+    map.setView([55, 10], 6, { animate: false });
+    map.setPitch(0);
+    map.setBearing(20);
+    map.touchPitch.enable();
+    const container = map.getContainer();
+    const rect = container.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const touches = (x1, y1, x2, y2) => [
+      new Touch({ identifier: 1, target: container, clientX: centerX + x1, clientY: centerY + y1 }),
+      new Touch({ identifier: 2, target: container, clientX: centerX + x2, clientY: centerY + y2 }),
+    ];
+    const dispatch = (target, type, activeTouches, changedTouches = activeTouches) => {
+      target.dispatchEvent(new TouchEvent(type, {
+        bubbles: true,
+        cancelable: true,
+        touches: activeTouches,
+        targetTouches: activeTouches,
+        changedTouches,
+      }));
+    };
+    const state = () => ({ pitch: map.getPitch(), bearing: map.getBearing(), zoom: map.getZoom() });
+
+    // both fingers up by 60px: pitch +30°
+    dispatch(container, 'touchstart', touches(-40, 0, 40, 0));
+    for (let dy = -10; dy >= -60; dy -= 10) {
+      dispatch(document, 'touchmove', touches(-40, dy, 40, dy));
+    }
+    dispatch(document, 'touchend', [], touches(-40, -60, 40, -60));
+    const afterPitch = state();
+
+    // fingers spreading apart vertically: pinch, pitch unchanged
+    dispatch(container, 'touchstart', touches(-40, 0, 40, 0));
+    for (let d = 10; d <= 40; d += 10) {
+      dispatch(document, 'touchmove', touches(-40 - d, -d, 40 + d, d));
+    }
+    dispatch(document, 'touchend', [], touches(-80, -40, 80, 40));
+    const afterPinch = state();
+
+    map.touchPitch.disable();
+    map.setPitch(0);
+    return { afterPitch, afterPinch };
+  });
+});
+
+Then('only the vertical two-finger drag changes the pitch', function () {
+  const { afterPitch, afterPinch } = this.touchPitch;
+  assert.ok(Math.abs(afterPitch.pitch - 30) < 1e-6, JSON.stringify(this.touchPitch));
+  assert.ok(Math.abs(afterPitch.bearing - 20) < 1e-6, JSON.stringify(this.touchPitch));
+  assert.equal(afterPitch.zoom, 6);
+  assert.ok(Math.abs(afterPinch.pitch - 30) < 1e-6, JSON.stringify(this.touchPitch));
+});
+
 When('I drag a constrained marker on a rotated map', async function () {
   await this.page.evaluate(() => {
     map.options.zoomAnimation = false;