diff --git a/components/canvas/CanvasWorkspace.tsx b/components/canvas/CanvasWorkspace.tsx index f6063a9..dfa31a8 100644 --- a/components/canvas/CanvasWorkspace.tsx +++ b/components/canvas/CanvasWorkspace.tsx @@ -137,6 +137,10 @@ export function CanvasWorkspace() { const updateNode = useCanvasStore((state) => state.updateNode); const clearLastAddedNodeId = useCanvasStore((state) => state.clearLastAddedNodeId); const centerTimeoutRef = useRef(null); + const isMacPlatform = React.useMemo(() => { + if (typeof navigator === "undefined") return false; + return /Mac|iPhone|iPad|iPod/i.test(navigator.platform); + }, []); const toCanvasPosition = useCallback((clientX: number, clientY: number): Position => { const rect = containerRef.current?.getBoundingClientRect(); @@ -266,11 +270,11 @@ export function CanvasWorkspace() { // 处理滚轮缩放 const handleWheel = useCallback((e: React.WheelEvent) => { e.preventDefault(); + e.stopPropagation(); - // mac 触控板优化: - // 1) 双指滚动默认平移画布 - // 2) pinch(通常会触发 ctrlKey) 或 Cmd/Ctrl + 滚轮时缩放 - const shouldZoom = e.ctrlKey || e.metaKey; + // mac: 双指滚动默认平移,Cmd/Ctrl+滚轮才缩放(保留触控板体验) + // windows/linux: 鼠标滚轮默认缩放画布,不触发整页缩放 + const shouldZoom = isMacPlatform ? (e.ctrlKey || e.metaKey) : !e.shiftKey; if (!shouldZoom) { setViewport({ x: viewport.x - e.deltaX, @@ -289,7 +293,7 @@ export function CanvasWorkspace() { const newX = mouseX - (mouseX - viewport.x) * scaleChange; const newY = mouseY - (mouseY - viewport.y) * scaleChange; setViewport({ x: newX, y: newY, zoom: newZoom }); - }, [setViewport, viewport.x, viewport.y, viewport.zoom]); + }, [isMacPlatform, setViewport, viewport.x, viewport.y, viewport.zoom]); const getImageDimensionsFromFile = useCallback((file: File): Promise<{ width: number; height: number }> => { return new Promise((resolve) => {