release: bump version to 0.35.0

frontend/public/earth/js/main.js

@@ -137,6 +137,7 @@ import {
   applyImmediateView,
   focusEarthView,
   getZoomLevel,
+  setZoomLevel,
   teardownControls,
 } from "./controls.js";
 import {
@@ -206,6 +207,11 @@ let cruisePollTimerId = null;
 let cruiseConnector = null;
 let cruiseBGPAdapter = null;
 let cruiseSequencer = null;
+let activeDragPointerId = null;
+let activeTouchPoints = new Map();
+let pinchGesture = null;
+let pointerDragDistance = 0;
+let suppressNextClick = false;
 
 const clock = new THREE.Clock();
 const interactionRaycaster = new THREE.Raycaster();
@@ -226,6 +232,7 @@ const ACTIVE_BGP_TOOLTIP_TEXT = "隐藏BGP观测";
 const TOOLTIP_CURSOR_OFFSET = 14;   // px offset from cursor for hover tooltips
 const TOOLTIP_COORDS_OFFSET = 10;   // px offset for earth-coordinate tooltip
 const RELATED_SATELLITE_HIGHLIGHT_COLOR = "#7dd3fc";
+const DRAG_POINTER_THRESHOLD_PX = 8;
 const HUD_INTERACTIVE_SELECTORS = [
   ".earth-left-column",
   ".earth-left-column *",
@@ -239,6 +246,8 @@ const HUD_INTERACTIVE_SELECTORS = [
   "#earth-stats *",
   "#media-panel",
   "#media-panel *",
+  "#mobile-drawer-shell",
+  "#mobile-drawer-shell *",
 ];
 
 function bindListener(target, eventName, handler, options) {
@@ -276,6 +285,13 @@ function getDragRotationFactor() {
   return CONFIG.dragRotationFactorBase * scale;
 }
 
+function getTouchDistance(firstPoint, secondPoint) {
+  return Math.hypot(
+    secondPoint.clientX - firstPoint.clientX,
+    secondPoint.clientY - firstPoint.clientY,
+  );
+}
+
 function disposeMaterial(material) {
   if (!material) return;
   if (Array.isArray(material)) {
@@ -1026,10 +1042,12 @@ function updateBGPHud(bgpResult) {
     bgpCollectorEl.textContent = `${bgpResult.collectorCount} 个`;
   }
 
-  const bgpStatusEl = document.getElementById("bgp-status-summary");
-  if (bgpStatusEl) {
-    bgpStatusEl.textContent = getBGPStatusText(bgpResult);
-  }
+  ["bgp-status-summary", "mobile-bgp-status-summary"].forEach((id) => {
+    const bgpStatusEl = document.getElementById(id);
+    if (bgpStatusEl) {
+      bgpStatusEl.textContent = getBGPStatusText(bgpResult);
+    }
+  });
 }
 
 function ensureCruiseConnector() {
@@ -1392,10 +1410,12 @@ function updateSatelliteToggleUi(enabled, satelliteCount = getSatelliteCount())
     });
   }
 
-  const satelliteCountEl = document.getElementById("satellite-count");
-  if (satelliteCountEl) {
-    satelliteCountEl.textContent = `${satelliteCount} 颗`;
-  }
+  ["satellite-count", "mobile-satellite-count"].forEach((id) => {
+    const satelliteCountEl = document.getElementById(id);
+    if (satelliteCountEl) {
+      satelliteCountEl.textContent = `${satelliteCount} 颗`;
+    }
+  });
 }
 
 function updateCableToggleUi(enabled) {
@@ -1974,9 +1994,9 @@ export async function setSatellitesEnabled(
 
 function setupEventListeners() {
   const handleResize = () => onWindowResize();
-  const handleMouseMove = (event) => onMouseMove(event);
-  const handleMouseDown = (event) => onMouseDown(event);
-  const handleMouseUp = () => onMouseUp();
+  const handlePointerMove = (event) => onPointerMove(event);
+  const handlePointerDown = (event) => onPointerDown(event);
+  const handlePointerUp = (event) => onPointerUp(event);
   const handleMouseLeave = () => onMouseLeave();
   const handleClick = (event) => onClick(event);
   const handlePageHide = () => destroy();
@@ -1986,11 +2006,15 @@ function setupEventListeners() {
   bindListener(window, "pagehide", handlePageHide);
   bindListener(window, "beforeunload", handlePageHide);
   bindListener(window, "earth:rotation-mode-change", handleRotationMode);
-  bindListener(window, "mousemove", handleMouseMove);
-  bindListener(renderer.domElement, "mousedown", handleMouseDown);
-  bindListener(window, "mouseup", handleMouseUp);
+  bindListener(renderer.domElement, "pointerdown", handlePointerDown);
+  bindListener(window, "pointermove", handlePointerMove);
+  bindListener(window, "pointerup", handlePointerUp);
+  bindListener(window, "pointercancel", handlePointerUp);
   bindListener(renderer.domElement, "mouseleave", handleMouseLeave);
   bindListener(renderer.domElement, "click", handleClick);
+  if (renderer?.domElement) {
+    renderer.domElement.style.touchAction = "none";
+  }
 }
 
 function updateHudScale() {
@@ -2078,6 +2102,9 @@ function onMouseMove(event) {
     if (Date.now() - dragStartTime > 500) {
       isLongDrag = true;
     }
+    if (pointerDragDistance > DRAG_POINTER_THRESHOLD_PX) {
+      isLongDrag = true;
+    }
 
     const deltaX = event.clientX - previousMousePosition.x;
     const deltaY = event.clientY - previousMousePosition.y;
@@ -2254,6 +2281,100 @@ function onMouseUp() {
   document.getElementById("container")?.classList.remove("dragging");
 }
 
+function onPointerDown(event) {
+  if (isEventOnHud(event)) return;
+  if (event.pointerType !== "touch" && event.button !== 0) return;
+
+  if (event.pointerType === "touch") {
+    activeTouchPoints.set(event.pointerId, {
+      clientX: event.clientX,
+      clientY: event.clientY,
+    });
+    renderer?.domElement?.setPointerCapture?.(event.pointerId);
+
+    if (activeTouchPoints.size === 2) {
+      const [firstPoint, secondPoint] = Array.from(activeTouchPoints.values());
+      pinchGesture = {
+        distance: getTouchDistance(firstPoint, secondPoint),
+        startZoom: getZoomLevel(),
+      };
+      activeDragPointerId = null;
+      onMouseUp();
+      return;
+    }
+  }
+
+  activeDragPointerId = event.pointerId;
+  pointerDragDistance = 0;
+  suppressNextClick = false;
+  onMouseDown(event);
+}
+
+function onPointerMove(event) {
+  if (event.pointerType === "touch") {
+    if (activeTouchPoints.has(event.pointerId)) {
+      activeTouchPoints.set(event.pointerId, {
+        clientX: event.clientX,
+        clientY: event.clientY,
+      });
+    }
+
+    if (pinchGesture && activeTouchPoints.size >= 2) {
+      const [firstPoint, secondPoint] = Array.from(activeTouchPoints.values());
+      const nextDistance = getTouchDistance(firstPoint, secondPoint);
+      if (pinchGesture.distance > 0) {
+        const scale = nextDistance / pinchGesture.distance;
+        setZoomLevel(pinchGesture.startZoom * scale, camera);
+        suppressNextClick = true;
+        hideTooltip();
+      }
+      return;
+    }
+
+    if (activeDragPointerId === event.pointerId && isDragging) {
+      const deltaX = event.clientX - previousMousePosition.x;
+      const deltaY = event.clientY - previousMousePosition.y;
+      pointerDragDistance = Math.max(
+        pointerDragDistance,
+        Math.hypot(deltaX, deltaY),
+      );
+      onMouseMove(event);
+      return;
+    }
+
+    return;
+  }
+
+  if (activeDragPointerId === event.pointerId && isDragging) {
+    const deltaX = event.clientX - previousMousePosition.x;
+    const deltaY = event.clientY - previousMousePosition.y;
+    pointerDragDistance = Math.max(
+      pointerDragDistance,
+      Math.hypot(deltaX, deltaY),
+    );
+  }
+  onMouseMove(event);
+}
+
+function onPointerUp(event) {
+  if (event.pointerType === "touch") {
+    activeTouchPoints.delete(event.pointerId);
+    if (activeTouchPoints.size < 2) {
+      pinchGesture = null;
+    }
+  }
+
+  if (activeDragPointerId === event.pointerId) {
+    if (pointerDragDistance > DRAG_POINTER_THRESHOLD_PX) {
+      suppressNextClick = true;
+      isLongDrag = true;
+    }
+    activeDragPointerId = null;
+    pointerDragDistance = 0;
+    onMouseUp();
+  }
+}
+
 function onMouseLeave() {
   hideTooltip();
 }
@@ -2262,6 +2383,10 @@ function onClick(event) {
   const earth = getEarth();
   if (!earth) return;
   if (isEventOnHud(event)) return;
+  if (suppressNextClick) {
+    suppressNextClick = false;
+    return;
+  }
 
   updatePointerFromEvent(event);