Make Crime map points draggable

scripts/tests/browser_smoke.mjs

@@ -421,6 +421,54 @@ try {
   await page.locator('.analysis-history__empty').waitFor();
   assert.equal(await artifactCard(page, 'Renamed A-only').count(), 0);
 
+  const markerA = page.locator('.analysis-marker--a');
+  await markerA.waitFor();
+  assert.equal(
+    await markerA.getAttribute('title'),
+    'Map marker. Drag to adjust the location.',
+  );
+  const markerBounds = await markerA.boundingBox();
+  assert.ok(markerBounds, 'Draggable Point A marker must have visible bounds');
+  const pointRefreshRequestsBeforeDrag = networkControl.pointRefreshRequests;
+  const markerCenter = {
+    x: markerBounds.x + markerBounds.width / 2,
+    y: markerBounds.y + markerBounds.height / 2,
+  };
+  await page.mouse.move(
+    markerCenter.x,
+    markerCenter.y,
+  );
+  await page.mouse.down();
+  await page.mouse.move(
+    markerBounds.x + markerBounds.width / 2 + 36,
+    markerBounds.y + markerBounds.height / 2 + 18,
+    { steps: 6 },
+  );
+  await page.waitForTimeout(500);
+  assert.equal(
+    networkControl.pointRefreshRequests,
+    pointRefreshRequestsBeforeDrag,
+    'Holding a dragged marker still must not start Crime calculation',
+  );
+  await page.mouse.up();
+  await page.waitForTimeout(150);
+  assert.equal(
+    networkControl.pointRefreshRequests,
+    pointRefreshRequestsBeforeDrag,
+    'The marker settle delay must elapse before Crime calculation starts',
+  );
+  await page.waitForResponse((response) => {
+    const request = response.request();
+    return request.url().startsWith('https://phl.carto.com/')
+      && /format=GeoJSON/i.test(decodeURIComponent(request.postData() || ''));
+  });
+  assert.equal(
+    networkControl.pointRefreshRequests - pointRefreshRequestsBeforeDrag,
+    1,
+    'The final settled marker position must start exactly one Crime calculation',
+  );
+  assert.equal(await page.locator('#addrA').inputValue(), 'Map point A');
+
   const layout = await page.evaluate(() => {
     const side = document.getElementById('sidepanel');
     const compare = document.getElementById('compare-card');

scripts/tests/crime_async_contracts.mjs

@@ -51,6 +51,93 @@ test('each refresh reads one snapshot and superseding aborts the previous genera
   assert.deepEqual(await second, { applied: true });
 });
 
+test('manual cancellation aborts the active Crime refresh without starting another generation', async () => {
+  const gate = deferred();
+  let snapshotReads = 0;
+  let activeSignal = null;
+  const owner = createCrimeRefreshOwner({
+    readSnapshot: () => ({ sequence: ++snapshotReads }),
+    runRefresh: (_snapshot, context) => {
+      activeSignal = context.signal;
+      return gate.promise;
+    },
+  });
+
+  const refresh = owner.refresh();
+  assert.equal(typeof owner.cancel, 'function');
+  owner.cancel();
+
+  assert.equal(activeSignal.aborted, true);
+  assert.equal(snapshotReads, 1);
+  gate.resolve({ applied: true });
+  assert.deepEqual(await refresh, { applied: false });
+});
+
+test('marker dragging updates position immediately and refreshes once after the final settle delay', async () => {
+  const { wireSettledMarkerDrag } = await import('../../src/routes_crime/index.js');
+  assert.equal(typeof wireSettledMarkerDrag, 'function');
+
+  const listeners = new Map();
+  const marker = {
+    position: { lng: -75.16, lat: 39.95 },
+    on(event, listener) { listeners.set(event, listener); return this; },
+    off(event, listener) {
+      if (listeners.get(event) === listener) listeners.delete(event);
+      return this;
+    },
+    getLngLat() { return this.position; },
+  };
+  const timers = new Map();
+  const waits = [];
+  let nextTimerId = 1;
+  const scheduler = {
+    setTimeout(callback, wait) {
+      const id = nextTimerId++;
+      timers.set(id, callback);
+      waits.push(wait);
+      return id;
+    },
+    clearTimeout(id) { timers.delete(id); },
+  };
+  const dragStarts = [];
+  const moves = [];
+  const settled = [];
+  const dispose = wireSettledMarkerDrag(marker, {
+    scheduler,
+    onDragStart: () => dragStarts.push('start'),
+    onMove: (position) => moves.push(position),
+    onSettled: (position) => settled.push(position),
+  });
+
+  listeners.get('dragstart')();
+  marker.position = { lng: -75.17, lat: 39.96 };
+  listeners.get('drag')();
+  listeners.get('dragend')();
+  assert.deepEqual(dragStarts, ['start']);
+  assert.deepEqual(moves, [{ lng: -75.17, lat: 39.96 }]);
+  assert.deepEqual(settled, []);
+  assert.deepEqual(waits, [350]);
+  assert.equal(timers.size, 1);
+
+  listeners.get('dragstart')();
+  assert.equal(timers.size, 0);
+  marker.position = { lng: -75.18, lat: 39.97 };
+  listeners.get('drag')();
+  listeners.get('dragend')();
+  const [timerId, callback] = timers.entries().next().value;
+  timers.delete(timerId);
+  callback();
+
+  assert.deepEqual(moves, [
+    { lng: -75.17, lat: 39.96 },
+    { lng: -75.18, lat: 39.97 },
+  ]);
+  assert.deepEqual(settled, [{ lng: -75.18, lat: 39.97 }]);
+  dispose();
+  assert.equal(timers.size, 0);
+  assert.equal(listeners.size, 0);
+});
+
 test('deactivation invalidates work and reactivation uses a fresh signal', async () => {
   const runs = [];
   const owner = createCrimeRefreshOwner({

scripts/tests/i18n_contracts.mjs

@@ -49,6 +49,8 @@ test('localization runtime normalizes, persists, translates, and notifies', asyn
   assert.equal(controller.getLanguage(), 'zh-CN');
   assert.equal(controller.t('language.switch'), 'English');
   assert.equal(controller.t('crime.findingPoint', { target: 'A' }), '正在查找 A 点…');
+  assert.equal(messages.en['map.marker'], 'Map marker. Drag to adjust the location.');
+  assert.equal(messages['zh-CN']['map.marker'], '地图标记，可拖动调整位置。');
 
   const observed = [];
   const unsubscribe = controller.subscribe((language) => observed.push(language));

src/i18n/messages.js

@@ -125,7 +125,7 @@ const messagePairs = Object.freeze({
 
   'map.resetExtent': ['Reset map extent', '重置地图范围'],
   'map.canvas': ['Map', '地图'],
-  'map.marker': ['Map marker', '地图标记'],
+  'map.marker': ['Map marker. Drag to adjust the location.', '地图标记，可拖动调整位置。'],
   'map.zoomIn': ['Zoom in', '放大'],
   'map.zoomOut': ['Zoom out', '缩小'],
   'map.resetBearing': ['Reset bearing to north', '重置为正北方向'],

src/routes_crime/crime_refresh_owner.js

@@ -63,6 +63,9 @@ export function createCrimeRefreshOwner({ readSnapshot, runRefresh }) {
         if (generation === requestGeneration) controller = null;
       }
     },
+    cancel() {
+      invalidate();
+    },
     setActive(next) {
       const shouldActivate = Boolean(next);
       if (active === shouldActivate) return;

src/routes_crime/draggable_marker.js

@@ -0,0 +1,59 @@
+export const MARKER_DRAG_SETTLE_MS = 350;
+
+function readMarkerPosition(marker) {
+  const position = marker.getLngLat?.();
+  const lng = Number(position?.lng);
+  const lat = Number(position?.lat);
+  return Number.isFinite(lng) && Number.isFinite(lat) ? { lng, lat } : null;
+}
+
+export function wireSettledMarkerDrag(marker, {
+  scheduler = globalThis,
+  settleMs = MARKER_DRAG_SETTLE_MS,
+  isActive = () => true,
+  onDragStart = () => {},
+  onMove = () => {},
+  onSettled = () => {},
+} = {}) {
+  let disposed = false;
+  let settleTimer = null;
+
+  const cancelSettle = () => {
+    if (settleTimer == null) return;
+    scheduler.clearTimeout(settleTimer);
+    settleTimer = null;
+  };
+  const handleDragStart = () => {
+    cancelSettle();
+    if (!disposed && isActive()) onDragStart();
+  };
+  const handleDrag = () => {
+    cancelSettle();
+    if (disposed || !isActive()) return;
+    const position = readMarkerPosition(marker);
+    if (position) onMove(position);
+  };
+  const handleDragEnd = () => {
+    cancelSettle();
+    if (disposed || !isActive()) return;
+    settleTimer = scheduler.setTimeout(() => {
+      settleTimer = null;
+      if (disposed || !isActive()) return;
+      const position = readMarkerPosition(marker);
+      if (position) onSettled(position);
+    }, settleMs);
+  };
+
+  marker.on('dragstart', handleDragStart);
+  marker.on('drag', handleDrag);
+  marker.on('dragend', handleDragEnd);
+
+  return () => {
+    if (disposed) return;
+    disposed = true;
+    cancelSettle();
+    marker.off('dragstart', handleDragStart);
+    marker.off('drag', handleDrag);
+    marker.off('dragend', handleDragEnd);
+  };
+}

src/routes_crime/index.js

@@ -27,6 +27,9 @@ import {
   geometryBounds,
 } from '../map/camera_fit.js';
 import { describeCrimeDataScope } from '../ui/data_scope.js';
+import { wireSettledMarkerDrag } from './draggable_marker.js';
+
+export { wireSettledMarkerDrag };
 
 const CRIME_LAYER_IDS = [
   'districts-fill',
@@ -154,6 +157,8 @@ export async function initCrimeMode(map, {
   const mapReady = waitForMapReady(map);
   let markerA = null;
   let markerB = null;
+  let disposeMarkerADrag = null;
+  let disposeMarkerBDrag = null;
   let tractClickWired = false;
   let districtClickWired = false;
   let active = true;
@@ -403,26 +408,74 @@ export async function initCrimeMode(map, {
   }
 
   function syncComparisonOverlays({ centerLonLat, centerBLonLat, radiusM, queryMode }) {
-    if (queryMode !== 'buffer') {
-      removeBufferOverlay(map);
+    const removeMarkerA = () => {
+      disposeMarkerADrag?.();
+      disposeMarkerADrag = null;
       markerA?.remove();
-      markerB?.remove();
       markerA = null;
+    };
+    const removeMarkerB = () => {
+      disposeMarkerBDrag?.();
+      disposeMarkerBDrag = null;
+      markerB?.remove();
       markerB = null;
+    };
+    const updateDraggedPoint = (target, { lng, lat }) => {
+      store.setComparisonPoint(target, lng, lat, t('crime.mapPoint', { target }));
+      const center = target === 'B' ? store.centerBLonLat : store.centerLonLat;
+      if (target === 'B') upsertBufferB(map, { centerLonLat: center, radiusM: store.radius });
+      else upsertBufferA(map, { centerLonLat: center, radiusM: store.radius });
+    };
+    const wireMarkerDrag = (marker, target) => wireSettledMarkerDrag(marker, {
+      isActive: () => active && isActive() && store.queryMode === 'buffer',
+      onDragStart: () => {
+        refreshOwner.cancel();
+        publishCurrentSelection(undefined, { origin: 'map' });
+      },
+      onMove: (position) => {
+        updateDraggedPoint(target, position);
+        publishCurrentSelection(undefined, { origin: 'drag' });
+      },
+      onSettled: (position) => {
+        updateDraggedPoint(target, position);
+        publishCurrentSelection(undefined, { origin: 'map' });
+        onPointChange(target);
+        void requestRefresh();
+      },
+    });
+
+    if (queryMode !== 'buffer') {
+      removeBufferOverlay(map);
+      removeMarkerA();
+      removeMarkerB();
       return;
     }
     if (centerLonLat) {
-      markerA ||= createMapMarker({ color: '#c86b00', className: 'analysis-marker analysis-marker--a' });
+      if (!markerA) {
+        markerA = createMapMarker({
+          color: '#c86b00',
+          className: 'analysis-marker analysis-marker--a',
+          draggable: true,
+        });
+        disposeMarkerADrag = wireMarkerDrag(markerA, 'A');
+      }
       markerA.setLngLat(centerLonLat).addTo(map);
       localizeMapMarker(markerA);
       upsertBufferA(map, { centerLonLat, radiusM });
-    }
+    } else removeMarkerA();
     if (centerBLonLat) {
-      markerB ||= createMapMarker({ color: '#0a6c74', className: 'analysis-marker analysis-marker--b' });
+      if (!markerB) {
+        markerB = createMapMarker({
+          color: '#0a6c74',
+          className: 'analysis-marker analysis-marker--b',
+          draggable: true,
+        });
+        disposeMarkerBDrag = wireMarkerDrag(markerB, 'B');
+      }
       markerB.setLngLat(centerBLonLat).addTo(map);
       localizeMapMarker(markerB);
       upsertBufferB(map, { centerLonLat: centerBLonLat, radiusM });
-    }
+    } else removeMarkerB();
   }
 
   async function ensureTractOutline({ signal, isCurrent, onSourceResolved }) {
@@ -544,6 +597,10 @@ export async function initCrimeMode(map, {
       } else if (!active) {
         lastCameraSelectionKey = null;
         pointsController.clear();
+        disposeMarkerADrag?.();
+        disposeMarkerBDrag?.();
+        disposeMarkerADrag = null;
+        disposeMarkerBDrag = null;
         markerA?.remove();
         markerB?.remove();
         markerA = null;

src/style.css

@@ -1493,10 +1493,15 @@ summary {
 }
 
 .analysis-marker {
+  cursor: grab;
   filter: drop-shadow(0 0 0 rgba(200, 107, 0, 0.45)) drop-shadow(0 4px 8px rgba(16, 32, 51, 0.35));
   animation: analysis-marker-arrive 420ms ease-out 1;
 }
 
+.analysis-marker:active {
+  cursor: grabbing;
+}
+
 @keyframes analysis-marker-arrive {
   0% { opacity: 0.2; transform: scale(0.65); }
   70% { opacity: 1; transform: scale(1.12); }