@project-skymap/library 0.6.0 → 0.7.1

package/dist/index.cjs

@@ -746,10 +746,14 @@ var init_projections = __esm({
       maxFov = 165;
       glslProjectionType = 2;
       /** FOV thresholds for blend transition (degrees) */
-      blendStart = 40;
-      blendEnd = 100;
+      blendStart;
+      blendEnd;
       /** Current blend factor, updated via setFov() */
       blend = 0;
+      constructor(blendStart = 40, blendEnd = 100) {
+        this.blendStart = blendStart;
+        this.blendEnd = blendEnd;
+      }
       /** Call this each frame / when FOV changes so forward/inverse stay in sync */
       setFov(fovDeg) {
         if (fovDeg <= this.blendStart) {
@@ -802,8 +806,7 @@ var init_projections = __esm({
     };
     exports.PROJECTIONS = {
       perspective: () => new PerspectiveProjection(),
-      stereographic: () => new StereographicProjection(),
-      blended: () => new BlendedProjection()
+      stereographic: () => new StereographicProjection()
     };
   }
 });
@@ -846,7 +849,8 @@ function createEngine({
   onSelect,
   onHover,
   onArrangementChange,
-  onFovChange
+  onFovChange,
+  onLongPress
 }) {
   let hoveredBookId = null;
   let focusedBookId = null;
@@ -906,18 +910,36 @@ function createEngine({
     draggedStarIndex: -1,
     draggedDist: 2e3,
     draggedGroup: null,
-    tempArrangement: {}
+    tempArrangement: {},
+    // Touch state
+    touchCount: 0,
+    touchStartTime: 0,
+    touchStartX: 0,
+    touchStartY: 0,
+    touchMoved: false,
+    pinchStartDistance: 0,
+    pinchStartFov: ENGINE_CONFIG.defaultFov,
+    pinchCenterX: 0,
+    pinchCenterY: 0,
+    // Double-tap detection
+    lastTapTime: 0,
+    lastTapX: 0,
+    lastTapY: 0,
+    // Long-press detection
+    longPressTimer: null,
+    longPressTriggered: false
   };
   const mouseNDC = new THREE5__namespace.Vector2();
   let isMouseInWindow = false;
+  let isTouchDevice = false;
   let edgeHoverStart = 0;
-  let handlers = { onSelect, onHover, onArrangementChange, onFovChange };
+  let handlers = { onSelect, onHover, onArrangementChange, onFovChange, onLongPress };
   let currentConfig;
   const constellationLayer = new ConstellationArtworkLayer(scene);
   function mix(a, b, t) {
     return a * (1 - t) + b * t;
   }
-  let currentProjection = exports.PROJECTIONS.blended();
+  let currentProjection = new BlendedProjection(ENGINE_CONFIG.blendStart, ENGINE_CONFIG.blendEnd);
   function syncProjectionState() {
     if (currentProjection instanceof BlendedProjection) {
       currentProjection.setFov(state.fov);
@@ -1955,9 +1977,13 @@ function createEngine({
   let lastAppliedLat = void 0;
   let lastBackdropCount = void 0;
   function setProjection(id) {
-    const factory = exports.PROJECTIONS[id];
-    if (!factory) return;
-    currentProjection = factory();
+    if (id === "blended") {
+      currentProjection = new BlendedProjection(ENGINE_CONFIG.blendStart, ENGINE_CONFIG.blendEnd);
+    } else {
+      const factory = exports.PROJECTIONS[id];
+      if (!factory) return;
+      currentProjection = factory();
+    }
     updateUniforms();
   }
   function setConfig(cfg) {
@@ -2072,7 +2098,8 @@ function createEngine({
     const w = rect.width;
     const h = rect.height;
     let closestLabel = null;
-    let minLabelDist = 40;
+    const LABEL_THRESHOLD = isTouchDevice ? 48 : 40;
+    let minLabelDist = LABEL_THRESHOLD;
     for (const item of dynamicLabels) {
       if (!item.obj.visible) continue;
       if (isNodeFiltered(item.node)) continue;
@@ -2385,6 +2412,196 @@ function createEngine({
     state.targetLat = state.lat;
     state.targetLon = state.lon;
   }
+  function getTouchDistance(t1, t2) {
+    const dx = t1.clientX - t2.clientX;
+    const dy = t1.clientY - t2.clientY;
+    return Math.sqrt(dx * dx + dy * dy);
+  }
+  function getTouchCenter(t1, t2) {
+    return {
+      x: (t1.clientX + t2.clientX) / 2,
+      y: (t1.clientY + t2.clientY) / 2
+    };
+  }
+  function onTouchStart(e) {
+    e.preventDefault();
+    isTouchDevice = true;
+    if (state.longPressTimer) {
+      clearTimeout(state.longPressTimer);
+      state.longPressTimer = null;
+    }
+    state.longPressTriggered = false;
+    const touches = e.touches;
+    state.touchCount = touches.length;
+    if (touches.length === 1) {
+      const touch = touches[0];
+      state.touchStartTime = performance.now();
+      state.touchStartX = touch.clientX;
+      state.touchStartY = touch.clientY;
+      state.touchMoved = false;
+      state.lastMouseX = touch.clientX;
+      state.lastMouseY = touch.clientY;
+      flyToActive = false;
+      state.dragMode = "camera";
+      state.isDragging = true;
+      state.velocityX = 0;
+      state.velocityY = 0;
+      state.longPressTimer = setTimeout(() => {
+        if (!state.touchMoved && state.touchCount === 1) {
+          state.longPressTriggered = true;
+          const rect = renderer.domElement.getBoundingClientRect();
+          const mX = state.touchStartX - rect.left;
+          const mY = state.touchStartY - rect.top;
+          mouseNDC.x = mX / rect.width * 2 - 1;
+          mouseNDC.y = -(mY / rect.height) * 2 + 1;
+          const syntheticEvent = {
+            clientX: state.touchStartX,
+            clientY: state.touchStartY
+          };
+          const hit = pick(syntheticEvent);
+          handlers.onLongPress?.(hit?.node ?? null, state.touchStartX, state.touchStartY);
+        }
+      }, ENGINE_CONFIG.longPressDelay);
+    } else if (touches.length === 2) {
+      const t0 = touches[0];
+      const t1 = touches[1];
+      state.pinchStartDistance = getTouchDistance(t0, t1);
+      state.pinchStartFov = state.fov;
+      const center = getTouchCenter(t0, t1);
+      state.pinchCenterX = center.x;
+      state.pinchCenterY = center.y;
+      state.lastMouseX = center.x;
+      state.lastMouseY = center.y;
+      state.touchMoved = true;
+    }
+  }
+  function onTouchMove(e) {
+    e.preventDefault();
+    const touches = e.touches;
+    if (touches.length === 1 && state.dragMode === "camera") {
+      const touch = touches[0];
+      const deltaX = touch.clientX - state.lastMouseX;
+      const deltaY = touch.clientY - state.lastMouseY;
+      state.lastMouseX = touch.clientX;
+      state.lastMouseY = touch.clientY;
+      const totalDx = touch.clientX - state.touchStartX;
+      const totalDy = touch.clientY - state.touchStartY;
+      if (Math.sqrt(totalDx * totalDx + totalDy * totalDy) > ENGINE_CONFIG.tapMaxDistance) {
+        state.touchMoved = true;
+        if (state.longPressTimer) {
+          clearTimeout(state.longPressTimer);
+          state.longPressTimer = null;
+        }
+      }
+      const speedScale = state.fov / ENGINE_CONFIG.defaultFov;
+      const rotLock = Math.max(0, Math.min(1, (state.fov - 100) / (ENGINE_CONFIG.maxFov - 100)));
+      const latFactor = 1 - rotLock * rotLock;
+      state.targetLon += deltaX * ENGINE_CONFIG.dragSpeed * speedScale;
+      state.targetLat += deltaY * ENGINE_CONFIG.dragSpeed * speedScale * latFactor;
+      state.targetLat = Math.max(-Math.PI / 2 + 0.01, Math.min(Math.PI / 2 - 0.01, state.targetLat));
+      state.velocityX = deltaX * ENGINE_CONFIG.dragSpeed * speedScale;
+      state.velocityY = deltaY * ENGINE_CONFIG.dragSpeed * speedScale * latFactor;
+      state.lon = state.targetLon;
+      state.lat = state.targetLat;
+    } else if (touches.length === 2) {
+      const t0 = touches[0];
+      const t1 = touches[1];
+      const newDistance = getTouchDistance(t0, t1);
+      const scale = newDistance / state.pinchStartDistance;
+      state.fov = state.pinchStartFov / scale;
+      state.fov = Math.max(ENGINE_CONFIG.minFov, Math.min(ENGINE_CONFIG.maxFov, state.fov));
+      handlers.onFovChange?.(state.fov);
+      const center = getTouchCenter(t0, t1);
+      const deltaX = center.x - state.lastMouseX;
+      const deltaY = center.y - state.lastMouseY;
+      state.lastMouseX = center.x;
+      state.lastMouseY = center.y;
+      const speedScale = state.fov / ENGINE_CONFIG.defaultFov;
+      state.targetLon += deltaX * ENGINE_CONFIG.dragSpeed * speedScale * 0.5;
+      state.targetLat += deltaY * ENGINE_CONFIG.dragSpeed * speedScale * 0.5;
+      state.targetLat = Math.max(-Math.PI / 2 + 0.01, Math.min(Math.PI / 2 - 0.01, state.targetLat));
+      state.lon = state.targetLon;
+      state.lat = state.targetLat;
+    }
+  }
+  function onTouchEnd(e) {
+    e.preventDefault();
+    if (state.longPressTimer) {
+      clearTimeout(state.longPressTimer);
+      state.longPressTimer = null;
+    }
+    const remainingTouches = e.touches.length;
+    if (remainingTouches === 0) {
+      const now = performance.now();
+      const duration = now - state.touchStartTime;
+      const wasTap = !state.touchMoved && duration < ENGINE_CONFIG.tapMaxDuration && !state.longPressTriggered;
+      if (wasTap) {
+        const timeSinceLastTap = now - state.lastTapTime;
+        const distFromLastTap = Math.sqrt(
+          Math.pow(state.touchStartX - state.lastTapX, 2) + Math.pow(state.touchStartY - state.lastTapY, 2)
+        );
+        const isDoubleTap = timeSinceLastTap < ENGINE_CONFIG.doubleTapMaxDelay && distFromLastTap < ENGINE_CONFIG.doubleTapMaxDistance;
+        const rect = renderer.domElement.getBoundingClientRect();
+        const mX = state.touchStartX - rect.left;
+        const mY = state.touchStartY - rect.top;
+        mouseNDC.x = mX / rect.width * 2 - 1;
+        mouseNDC.y = -(mY / rect.height) * 2 + 1;
+        const syntheticEvent = {
+          clientX: state.touchStartX,
+          clientY: state.touchStartY
+        };
+        const hit = pick(syntheticEvent);
+        if (isDoubleTap) {
+          if (hit) {
+            flyTo(hit.node.id, ENGINE_CONFIG.minFov);
+            handlers.onSelect?.(hit.node);
+          }
+          state.lastTapTime = 0;
+          state.lastTapX = 0;
+          state.lastTapY = 0;
+        } else {
+          if (hit) {
+            handlers.onSelect?.(hit.node);
+            constellationLayer.setFocused(hit.node.id);
+            if (hit.node.level === 2) setFocusedBook(hit.node.id);
+            else if (hit.node.level === 3 && hit.node.parent) setFocusedBook(hit.node.parent);
+          } else {
+            setFocusedBook(null);
+          }
+          state.lastTapTime = now;
+          state.lastTapX = state.touchStartX;
+          state.lastTapY = state.touchStartY;
+        }
+      }
+      state.isDragging = false;
+      state.dragMode = "none";
+      state.touchCount = 0;
+    } else if (remainingTouches === 1) {
+      const touch = e.touches[0];
+      state.lastMouseX = touch.clientX;
+      state.lastMouseY = touch.clientY;
+      state.touchCount = 1;
+      state.dragMode = "camera";
+      state.isDragging = true;
+      state.velocityX = 0;
+      state.velocityY = 0;
+    }
+  }
+  function onTouchCancel(e) {
+    e.preventDefault();
+    if (state.longPressTimer) {
+      clearTimeout(state.longPressTimer);
+      state.longPressTimer = null;
+    }
+    state.isDragging = false;
+    state.dragMode = "none";
+    state.touchCount = 0;
+    state.velocityX = 0;
+    state.velocityY = 0;
+  }
+  function onGesturePrevent(e) {
+    e.preventDefault();
+  }
   function resize() {
     const w = container.clientWidth || 1;
     const h = container.clientHeight || 1;
@@ -2407,6 +2624,13 @@ function createEngine({
     });
     el.addEventListener("mouseleave", onWindowBlur);
     window.addEventListener("blur", onWindowBlur);
+    el.addEventListener("touchstart", onTouchStart, { passive: false });
+    el.addEventListener("touchmove", onTouchMove, { passive: false });
+    el.addEventListener("touchend", onTouchEnd, { passive: false });
+    el.addEventListener("touchcancel", onTouchCancel, { passive: false });
+    el.addEventListener("gesturestart", onGesturePrevent, { passive: false });
+    el.addEventListener("gesturechange", onGesturePrevent, { passive: false });
+    el.addEventListener("gestureend", onGesturePrevent, { passive: false });
     raf = requestAnimationFrame(tick);
   }
   function tick() {
@@ -2448,7 +2672,7 @@ function createEngine({
     }
     let panX = 0;
     let panY = 0;
-    if (!state.isDragging && isMouseInWindow && !currentConfig?.editable) {
+    if (!state.isDragging && isMouseInWindow && !currentConfig?.editable && !isTouchDevice) {
       const t = ENGINE_CONFIG.edgePanThreshold;
       const inZoneX = mouseNDC.x < -1 + t || mouseNDC.x > 1 - t;
       const inZoneY = mouseNDC.y < -1 + t || mouseNDC.y > 1 - t;
@@ -2501,8 +2725,9 @@ function createEngine({
     } else if (!state.isDragging && !flyToActive) {
       state.lon += state.velocityX;
       state.lat += state.velocityY;
-      state.velocityX *= ENGINE_CONFIG.inertiaDamping;
-      state.velocityY *= ENGINE_CONFIG.inertiaDamping;
+      const damping = isTouchDevice ? ENGINE_CONFIG.touchInertiaDamping : ENGINE_CONFIG.inertiaDamping;
+      state.velocityX *= damping;
+      state.velocityY *= damping;
       if (Math.abs(state.velocityX) < 1e-6) state.velocityX = 0;
       if (Math.abs(state.velocityY) < 1e-6) state.velocityY = 0;
     }
@@ -2674,6 +2899,13 @@ function createEngine({
     el.removeEventListener("wheel", onWheel);
     el.removeEventListener("mouseleave", onWindowBlur);
     window.removeEventListener("blur", onWindowBlur);
+    el.removeEventListener("touchstart", onTouchStart);
+    el.removeEventListener("touchmove", onTouchMove);
+    el.removeEventListener("touchend", onTouchEnd);
+    el.removeEventListener("touchcancel", onTouchCancel);
+    el.removeEventListener("gesturestart", onGesturePrevent);
+    el.removeEventListener("gesturechange", onGesturePrevent);
+    el.removeEventListener("gestureend", onGesturePrevent);
   }
   function dispose() {
     stop();
@@ -2728,7 +2960,7 @@ var init_createEngine = __esm({
     init_projections();
     init_fader();
     ENGINE_CONFIG = {
-      minFov: 10,
+      minFov: 1,
       maxFov: 135,
       defaultFov: 50,
       dragSpeed: 125e-5,
@@ -2740,7 +2972,20 @@ var init_createEngine = __esm({
       horizonLockStrength: 0.05,
       edgePanThreshold: 0.15,
       edgePanMaxSpeed: 0.02,
-      edgePanDelay: 250
+      edgePanDelay: 250,
+      // Touch-specific
+      touchInertiaDamping: 0.85,
+      // Snappier than mouse (0.92)
+      tapMaxDuration: 300,
+      // ms
+      tapMaxDistance: 10,
+      // px
+      doubleTapMaxDelay: 300,
+      // ms between taps
+      doubleTapMaxDistance: 30,
+      // px between tap locations
+      longPressDelay: 500
+      // ms to trigger long-press
     };
     ORDER_REVEAL_CONFIG = {
       globalDim: 0.85,
@@ -2751,7 +2996,7 @@ var init_createEngine = __esm({
   }
 });
 var StarMap = react.forwardRef(
-  ({ config, className, onSelect, onHover, onArrangementChange, onFovChange }, ref) => {
+  ({ config, className, onSelect, onHover, onArrangementChange, onFovChange, onLongPress }, ref) => {
     const containerRef = react.useRef(null);
     const engineRef = react.useRef(null);
     react.useImperativeHandle(ref, () => ({
@@ -2774,7 +3019,8 @@ var StarMap = react.forwardRef(
           onSelect,
           onHover,
           onArrangementChange,
-          onFovChange
+          onFovChange,
+          onLongPress
         });
         engineRef.current.setConfig(config);
         engineRef.current.start();
@@ -2790,8 +3036,8 @@ var StarMap = react.forwardRef(
       engineRef.current?.setConfig?.(config);
     }, [config]);
     react.useEffect(() => {
-      engineRef.current?.setHandlers?.({ onSelect, onHover, onArrangementChange, onFovChange });
-    }, [onSelect, onHover, onArrangementChange, onFovChange]);
+      engineRef.current?.setHandlers?.({ onSelect, onHover, onArrangementChange, onFovChange, onLongPress });
+    }, [onSelect, onHover, onArrangementChange, onFovChange, onLongPress]);
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className, style: { width: "100%", height: "100%" } });
   }
 );