fix: enable touch panning and prevent page scroll on mobile
- Add touch-action: none on canvas to prevent browser scroll hijack - Single-finger touch on empty canvas now triggers pan (pointerType check) - Fix page bounce on mobile with position: fixed and 100dvh height Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -91,10 +91,17 @@ export default function App({ onSwitchToGame }) {
|
||||
state.panStart = { x: e.clientX - state.camX, y: e.clientY - state.camY };
|
||||
e.preventDefault();
|
||||
} else if (e.button === 0 && !connectingRef.current) {
|
||||
// On mobile (touch), single finger on empty canvas = pan
|
||||
if (isMobile && e.pointerType === 'touch') {
|
||||
state.panning = true;
|
||||
state.panStart = { x: e.clientX - state.camX, y: e.clientY - state.camY };
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
state.selectedModuleId = null;
|
||||
emit();
|
||||
}
|
||||
}, []);
|
||||
}, [isMobile]);
|
||||
|
||||
const handlePointerMove = useCallback((e) => {
|
||||
if (state.panning && state.panStart) {
|
||||
|
||||
@@ -131,10 +131,17 @@ export default function PuzzleView({ level, levelIndex, worldLevels, onBack, onN
|
||||
state.panStart = { x: e.clientX - state.camX, y: e.clientY - state.camY };
|
||||
e.preventDefault();
|
||||
} else if (e.button === 0 && !connectingRef.current) {
|
||||
// On mobile (touch), single finger on empty canvas = pan
|
||||
if (isMobile && e.pointerType === 'touch') {
|
||||
state.panning = true;
|
||||
state.panStart = { x: e.clientX - state.camX, y: e.clientY - state.camY };
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
state.selectedModuleId = null;
|
||||
emit();
|
||||
}
|
||||
}, []);
|
||||
}, [isMobile]);
|
||||
|
||||
const handlePointerMove = useCallback((e) => {
|
||||
if (state.panning && state.panStart) {
|
||||
|
||||
@@ -802,6 +802,10 @@ html, body, #root {
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
/* --- Prevent page scroll/bounce --- */
|
||||
html, body, #root { overflow: hidden; position: fixed; width: 100%; height: 100%; }
|
||||
.app, .gm-puzzle { overflow: hidden; height: 100dvh; }
|
||||
|
||||
/* --- Sandbox Toolbar --- */
|
||||
.toolbar { height: 44px; padding: 0 12px; gap: 6px; }
|
||||
.toolbar-title { font-size: 13px; letter-spacing: 0.8px; }
|
||||
@@ -924,7 +928,7 @@ html, body, #root {
|
||||
}
|
||||
|
||||
/* --- Canvas adjustments --- */
|
||||
.node-canvas { cursor: default; }
|
||||
.node-canvas { cursor: default; touch-action: none; }
|
||||
.zoom-controls { right: 8px; top: 8px; }
|
||||
.zoom-btn { width: 40px; height: 36px; min-height: 44px; }
|
||||
.port-dot { width: 18px; height: 18px; }
|
||||
|
||||
Reference in New Issue
Block a user