From 2f2587f92cb1ea969a2401b3c65af3349f504934 Mon Sep 17 00:00:00 2001 From: Emir Karabeg Date: Mon, 3 Feb 2025 23:14:53 -0800 Subject: [PATCH] Prevent zoom everywhere (ReactFlow is zoomable by default) --- app/layout.tsx | 12 +++++++++++- app/zoom-prevention.tsx | 33 +++++++++++++++++++++++++++++++++ 2 files changed, 44 insertions(+), 1 deletion(-) create mode 100644 app/zoom-prevention.tsx diff --git a/app/layout.tsx b/app/layout.tsx index f40a72abb..1579049bf 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,5 +1,6 @@ import type { Metadata } from 'next' import './globals.css' +import { ZoomPrevention } from './zoom-prevention' export const metadata: Metadata = { title: 'Sim Studio', @@ -14,7 +15,16 @@ export default function RootLayout({ }) { return ( - {children} + + + + + + {children} + ) } diff --git a/app/zoom-prevention.tsx b/app/zoom-prevention.tsx new file mode 100644 index 000000000..66f0ceb74 --- /dev/null +++ b/app/zoom-prevention.tsx @@ -0,0 +1,33 @@ +'use client' + +import { useEffect } from 'react' + +export function ZoomPrevention() { + useEffect(() => { + const preventZoom = (e: KeyboardEvent | WheelEvent) => { + // Prevent zoom on ctrl/cmd + wheel + if (e instanceof WheelEvent && (e.ctrlKey || e.metaKey)) { + e.preventDefault() + } + + // Prevent zoom on ctrl/cmd + plus/minus/zero + if (e instanceof KeyboardEvent && (e.ctrlKey || e.metaKey)) { + if (e.key === '=' || e.key === '-' || e.key === '0') { + e.preventDefault() + } + } + } + + // Add event listeners + document.addEventListener('wheel', preventZoom, { passive: false }) + document.addEventListener('keydown', preventZoom) + + // Cleanup + return () => { + document.removeEventListener('wheel', preventZoom) + document.removeEventListener('keydown', preventZoom) + } + }, []) + + return null +}