From d4baf61e1f8eeaaaa347c0cea26180ac0472aacf Mon Sep 17 00:00:00 2001 From: Your Name Date: Sun, 8 Feb 2026 22:07:36 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96Windows=E7=94=BB=E5=B8=83?= =?UTF-8?q?=E6=BB=9A=E8=BD=AE=E7=BC=A9=E6=94=BE=E8=A1=8C=E4=B8=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/canvas/CanvasWorkspace.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) 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) => {