lunanting/lovart3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化Windows画布滚轮缩放行为

Browse Source
This commit is contained in:
Your Name 2026-02-08 22:07:36 +08:00
parent 1241c60b23
commit d4baf61e1f
1 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/canvas/CanvasWorkspace.tsx
View File

@ -137,6 +137,10 @@ export function CanvasWorkspace() {
const updateNode = useCanvasStore((state) => state.updateNode); const updateNode = useCanvasStore((state) => state.updateNode);
const clearLastAddedNodeId = useCanvasStore((state) => state.clearLastAddedNodeId); const clearLastAddedNodeId = useCanvasStore((state) => state.clearLastAddedNodeId);
const centerTimeoutRef = useRef<number | null>(null); const centerTimeoutRef = useRef<number | null>(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 toCanvasPosition = useCallback((clientX: number, clientY: number): Position => {
const rect = containerRef.current?.getBoundingClientRect(); const rect = containerRef.current?.getBoundingClientRect();
@ -266,11 +270,11 @@ export function CanvasWorkspace() {
// 处理滚轮缩放 // 处理滚轮缩放
const handleWheel = useCallback((e: React.WheelEvent) => { const handleWheel = useCallback((e: React.WheelEvent) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation();
// mac 触控板优化： // mac: 双指滚动默认平移，Cmd/Ctrl+滚轮才缩放（保留触控板体验）
// 1) 双指滚动默认平移画布 // windows/linux: 鼠标滚轮默认缩放画布，不触发整页缩放
// 2) pinch(通常会触发 ctrlKey) 或 Cmd/Ctrl + 滚轮时缩放 const shouldZoom = isMacPlatform ? (e.ctrlKey || e.metaKey) : !e.shiftKey;
const shouldZoom = e.ctrlKey || e.metaKey;
if (!shouldZoom) { if (!shouldZoom) {
setViewport({ setViewport({
x: viewport.x - e.deltaX, x: viewport.x - e.deltaX,
@ -289,7 +293,7 @@ export function CanvasWorkspace() {
const newX = mouseX - (mouseX - viewport.x) * scaleChange; const newX = mouseX - (mouseX - viewport.x) * scaleChange;
const newY = mouseY - (mouseY - viewport.y) * scaleChange; const newY = mouseY - (mouseY - viewport.y) * scaleChange;
setViewport({ x: newX, y: newY, zoom: newZoom }); 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 }> => { const getImageDimensionsFromFile = useCallback((file: File): Promise<{ width: number; height: number }> => {
return new Promise((resolve) => { return new Promise((resolve) => {