Changeset 3866994 in Klonkt for test

Timestamp:

08/12/2026 10:00:38 PM (3 months ago)

Author:

Robin <roboburr@…>

Parents:

5b6f93b

Message:

Ward-PWA: echte pinch-to-zoom op de avatarhemel

De hemel deed zoom met het muiswiel, maar de belofte 'knijpen op een
telefoon' in de comment was nog niet waar: er stond alleen wielcode en
een ongebruikte pinch-variabele. Nu echt twee-vinger pinch.

Pointers in een Map: één vinger pant of tikt, twee vingers knijpen. De
schaal volgt de verhouding van de vingerafstand, en we zoomen ROND het
midden tussen de vingers, niet rond het canvas-midden. Dat is het
verschil tussen een kaart en beeld dat onder je weg schuift: het
wereldpunt onder je vingers blijft staan. Het wiel op desktop gebruikt
nu dezelfde weg, om de muis.

Zorgvuldig met de tik: pas een tik als er NOOIT twee vingers lagen en de
ene vinger nauwelijks bewoog. Anders opent het einde van een knijp per
ongeluk een gesprek. En bij het loslaten van de tweede vinger wordt de
afstand opnieuw geijkt, zodat de overgebleven vinger niet met een sprong
verder pant. touch-action:none stond al aan in berichtenstand, dus de
browser laat de pinch aan ons.

Changed files:
src/assets/js/ward-sky.js

• _zoomAround(px,py,factor): zoom om een schermpunt
• _clampScale: de grenzen op één plek
• _wire herschreven: multi-pointer pan/pinch/tik

test/ward-sky.test.js

• zoomen houdt het punt onder je vingers op zijn plek; de zoom blijft binnen zijn grenzen

remarks: 908 tests groen. De rekenkant is getest; het gebaar zelf met
twee echte vingers is aan Robin op dev.

-robo
Co-Authored-By: Claude Opus 4.8 <noreply@…>

File:

• test/ward-sky.test.js (modified) (2 diffs)

test/ward-sky.test.js

@@ -9 +9 @@
 import assert from 'node:assert/strict';
 
-const { orbitPlacement, nearestFace } = await import('../src/assets/js/ward-sky.js');
+const { orbitPlacement, nearestFace, SkyRenderer } = await import('../src/assets/js/ward-sky.js');
 
 const r = (s) => Math.hypot(s.x, s.y);
@@ -68 +68 @@
   assert.equal(at(1.5), 1);
 });
+
+test('zoomen houdt het punt onder je vingers op zijn plek', () => {
+  // De kern van pinch-to-zoom: de wereld onder het midden tussen je vingers
+  // mag NIET wegschuiven. We rekenen _zoomAround na zonder een echt canvas,
+  // door de renderer een minimale staat te geven.
+  // We hebben geen DOM, dus bouwen een kaal object met alleen wat _zoomAround
+  // aanraakt en lenen de methode.
+  const fake = { w: 400, h: 400, scale: 1, panX: 0, panY: 0,
+    _clampScale: SkyRenderer.prototype._clampScale };
+  const zoom = SkyRenderer.prototype._zoomAround;
+
+  // Welk wereldpunt ligt nu onder (px,py)?
+  const worldUnder = (o, px, py) => ({
+    x: (px - o.w / 2 - o.panX) / o.scale,
+    y: (py - o.h / 2 - o.panY) / o.scale,
+  });
+  const px = 300, py = 120;
+  const before = worldUnder(fake, px, py);
+  zoom.call(fake, px, py, 1.6);   // inzoomen om dat punt
+  const after = worldUnder(fake, px, py);
+
+  assert.ok(Math.abs(before.x - after.x) < 1e-6, 'x schoof weg onder de vingers');
+  assert.ok(Math.abs(before.y - after.y) < 1e-6, 'y schoof weg onder de vingers');
+  assert.ok(fake.scale > 1, 'er is niet ingezoomd');
+});
+
+test('de zoom blijft binnen zijn grenzen', () => {
+  const clamp = SkyRenderer.prototype._clampScale;
+  assert.equal(clamp(10), 2.5);    // niet eindeloos in
+  assert.equal(clamp(0.01), 0.2);  // niet eindeloos uit
+});