@project-skymap/library 0.6.0 → 0.7.1

package/dist/index.d.cts

@@ -103,6 +103,7 @@ type StarMapProps = {
     onHover?: (node?: SceneNode) => void;
     onArrangementChange?: (arrangement: StarArrangement) => void;
     onFovChange?: (fov: number) => void;
+    onLongPress?: (node: SceneNode | null, x: number, y: number) => void;
 };
 type StarMapHandle = {
     getFullArrangement: () => StarArrangement | undefined;
@@ -29243,7 +29244,7 @@ interface Projection {
      */
     isClipped(dirZ: number): boolean;
 }
-type ProjectionId = "perspective" | "stereographic" | "blended";
+type ProjectionId = "perspective" | "stereographic";
 declare const PROJECTIONS: Record<ProjectionId, () => Projection>;
 
 export { type BibleJSON, type ConstellationConfig, type GenerateOptions, type HierarchyFilter, PROJECTIONS, type Projection, type ProjectionId, type SceneLink, type SceneModel, type SceneNode, type StarArrangement, StarMap, type StarMapConfig, type StarMapHandle, type StarMapProps, bibleToSceneModel, defaultGenerateOptions, defaultStars, generateArrangement };

package/dist/index.d.ts

@@ -103,6 +103,7 @@ type StarMapProps = {
     onHover?: (node?: SceneNode) => void;
     onArrangementChange?: (arrangement: StarArrangement) => void;
     onFovChange?: (fov: number) => void;
+    onLongPress?: (node: SceneNode | null, x: number, y: number) => void;
 };
 type StarMapHandle = {
     getFullArrangement: () => StarArrangement | undefined;
@@ -29243,7 +29244,7 @@ interface Projection {
      */
     isClipped(dirZ: number): boolean;
 }
-type ProjectionId = "perspective" | "stereographic" | "blended";
+type ProjectionId = "perspective" | "stereographic";
 declare const PROJECTIONS: Record<ProjectionId, () => Projection>;
 
 export { type BibleJSON, type ConstellationConfig, type GenerateOptions, type HierarchyFilter, PROJECTIONS, type Projection, type ProjectionId, type SceneLink, type SceneModel, type SceneNode, type StarArrangement, StarMap, type StarMapConfig, type StarMapHandle, type StarMapProps, bibleToSceneModel, defaultGenerateOptions, defaultStars, generateArrangement };

package/dist/index.js

@@ -724,10 +724,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) {
@@ -780,8 +784,7 @@ var init_projections = __esm({
     };
     PROJECTIONS = {
       perspective: () => new PerspectiveProjection(),
-      stereographic: () => new StereographicProjection(),
-      blended: () => new BlendedProjection()
+      stereographic: () => new StereographicProjection()
     };
   }
 });
@@ -824,7 +827,8 @@ function createEngine({
   onSelect,
   onHover,
   onArrangementChange,
-  onFovChange
+  onFovChange,
+  onLongPress
 }) {
   let hoveredBookId = null;
   let focusedBookId = null;
@@ -884,18 +888,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.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 = PROJECTIONS.blended();
+  let currentProjection = new BlendedProjection(ENGINE_CONFIG.blendStart, ENGINE_CONFIG.blendEnd);
   function syncProjectionState() {
     if (currentProjection instanceof BlendedProjection) {
       currentProjection.setFov(state.fov);
@@ -1933,9 +1955,13 @@ function createEngine({
   let lastAppliedLat = void 0;
   let lastBackdropCount = void 0;
   function setProjection(id) {
-    const factory = PROJECTIONS[id];
-    if (!factory) return;
-    currentProjection = factory();
+    if (id === "blended") {
+      currentProjection = new BlendedProjection(ENGINE_CONFIG.blendStart, ENGINE_CONFIG.blendEnd);
+    } else {
+      const factory = PROJECTIONS[id];
+      if (!factory) return;
+      currentProjection = factory();
+    }
     updateUniforms();
   }
   function setConfig(cfg) {
@@ -2050,7 +2076,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;
@@ -2363,6 +2390,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;
@@ -2385,6 +2602,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() {
@@ -2426,7 +2650,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;
@@ -2479,8 +2703,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;
     }
@@ -2652,6 +2877,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();
@@ -2706,7 +2938,7 @@ var init_createEngine = __esm({
     init_projections();
     init_fader();
     ENGINE_CONFIG = {
-      minFov: 10,
+      minFov: 1,
       maxFov: 135,
       defaultFov: 50,
       dragSpeed: 125e-5,
@@ -2718,7 +2950,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,
@@ -2729,7 +2974,7 @@ var init_createEngine = __esm({
   }
 });
 var StarMap = forwardRef(
-  ({ config, className, onSelect, onHover, onArrangementChange, onFovChange }, ref) => {
+  ({ config, className, onSelect, onHover, onArrangementChange, onFovChange, onLongPress }, ref) => {
     const containerRef = useRef(null);
     const engineRef = useRef(null);
     useImperativeHandle(ref, () => ({
@@ -2752,7 +2997,8 @@ var StarMap = forwardRef(
           onSelect,
           onHover,
           onArrangementChange,
-          onFovChange
+          onFovChange,
+          onLongPress
         });
         engineRef.current.setConfig(config);
         engineRef.current.start();
@@ -2768,8 +3014,8 @@ var StarMap = forwardRef(
       engineRef.current?.setConfig?.(config);
     }, [config]);
     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__ */ jsx("div", { ref: containerRef, className, style: { width: "100%", height: "100%" } });
   }
 );