@project-skymap/library 0.7.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;

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;

package/dist/index.js

@@ -827,7 +827,8 @@ function createEngine({
   onSelect,
   onHover,
   onArrangementChange,
-  onFovChange
+  onFovChange,
+  onLongPress
 }) {
   let hoveredBookId = null;
   let focusedBookId = null;
@@ -897,13 +898,20 @@ function createEngine({
     pinchStartDistance: 0,
     pinchStartFov: ENGINE_CONFIG.defaultFov,
     pinchCenterX: 0,
-    pinchCenterY: 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) {
@@ -2396,6 +2404,11 @@ function createEngine({
   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) {
@@ -2411,6 +2424,22 @@ function createEngine({
       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];
@@ -2437,6 +2466,10 @@ function createEngine({
       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)));
@@ -2471,11 +2504,21 @@ function createEngine({
   }
   function onTouchEnd(e) {
     e.preventDefault();
+    if (state.longPressTimer) {
+      clearTimeout(state.longPressTimer);
+      state.longPressTimer = null;
+    }
     const remainingTouches = e.touches.length;
     if (remainingTouches === 0) {
-      const duration = performance.now() - state.touchStartTime;
-      const wasTap = !state.touchMoved && duration < ENGINE_CONFIG.tapMaxDuration;
+      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;
@@ -2486,13 +2529,26 @@ function createEngine({
           clientY: state.touchStartY
         };
         const hit = pick(syntheticEvent);
-        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);
+        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 {
-          setFocusedBook(null);
+          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;
@@ -2511,6 +2567,10 @@ function createEngine({
   }
   function onTouchCancel(e) {
     e.preventDefault();
+    if (state.longPressTimer) {
+      clearTimeout(state.longPressTimer);
+      state.longPressTimer = null;
+    }
     state.isDragging = false;
     state.dragMode = "none";
     state.touchCount = 0;
@@ -2896,8 +2956,14 @@ var init_createEngine = __esm({
       // Snappier than mouse (0.92)
       tapMaxDuration: 300,
       // ms
-      tapMaxDistance: 10
+      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,
@@ -2908,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, () => ({
@@ -2931,7 +2997,8 @@ var StarMap = forwardRef(
           onSelect,
           onHover,
           onArrangementChange,
-          onFovChange
+          onFovChange,
+          onLongPress
         });
         engineRef.current.setConfig(config);
         engineRef.current.start();
@@ -2947,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%" } });
   }
 );