refactor zoom controls

Author: qdaxb

webview-ui/src/components/common/IconButton.tsx

@@ -1,12 +1,24 @@
 interface IconButtonProps {
 	icon: string
-	onClick: (e: React.MouseEvent) => void
+	onClick?: (e: React.MouseEvent) => void
+	onMouseDown?: (e: React.MouseEvent) => void
+	onMouseUp?: (e: React.MouseEvent) => void
+	onMouseLeave?: (e: React.MouseEvent) => void
 	title?: string
 	size?: "small" | "medium"
 	variant?: "default" | "transparent"
 }
 
-export function IconButton({ icon, onClick, title, size = "medium", variant = "default" }: IconButtonProps) {
+export function IconButton({
+	icon,
+	onClick,
+	onMouseDown,
+	onMouseUp,
+	onMouseLeave,
+	title,
+	size = "medium",
+	variant = "default",
+}: IconButtonProps) {
 	const sizeClasses = {
 		small: "w-6 h-6",
 		medium: "w-7 h-7",
@@ -17,10 +29,15 @@ export function IconButton({ icon, onClick, title, size = "medium", variant = "d
 		transparent: "bg-transparent hover:bg-vscode-toolbar-hoverBackground",
 	}
 
+	const handleClick = onClick || ((_event: React.MouseEvent) => {})
+
 	return (
 		<button
 			className={`${sizeClasses[size]} flex items-center justify-center border-none text-vscode-editor-foreground cursor-pointer rounded-[3px] ${variantClasses[variant]}`}
-			onClick={onClick}
+			onClick={handleClick}
+			onMouseDown={onMouseDown}
+			onMouseUp={onMouseUp}
+			onMouseLeave={onMouseLeave}
 			title={title}>
 			<span className={`codicon codicon-${icon}`}></span>
 		</button>

webview-ui/src/components/common/MermaidButton.tsx

@@ -84,7 +84,7 @@ export function MermaidButton({ containerRef, code, isLoading, svgToPng, childre
 
 		// Determine zoom direction and amount
 		// Negative deltaY means scrolling up (zoom in), positive means scrolling down (zoom out)
-		const delta = e.deltaY > 0 ? -0.25 : 0.25
+		const delta = e.deltaY > 0 ? -0.2 : 0.2
 		adjustZoom(delta)
 	}, [])
 

webview-ui/src/components/common/ZoomControls.tsx

@@ -65,41 +65,27 @@ export function ZoomControls({
 		}
 	}, [])
 
-	// If using continuous zoom, render buttons with mouse down/up handlers
-	if (useContinuousZoom && adjustZoom) {
-		return (
-			<div className="flex items-center gap-2">
-				<button
-					className="w-7 h-7 flex items-center justify-center border-none text-vscode-editor-foreground cursor-pointer rounded-[3px] bg-transparent hover:bg-vscode-toolbar-hoverBackground"
-					onMouseDown={() => startContinuousZoom(zoomOutStep)}
-					onMouseUp={stopContinuousZoom}
-					onMouseLeave={stopContinuousZoom}
-					title={zoomOutTitle}>
-					<span className="codicon codicon-zoom-out"></span>
-				</button>
-				<div className="text-sm text-vscode-editor-foreground min-w-[50px] text-center">
-					{Math.round(zoomLevel * 100)}%
-				</div>
-				<button
-					className="w-7 h-7 flex items-center justify-center border-none text-vscode-editor-foreground cursor-pointer rounded-[3px] bg-transparent hover:bg-vscode-toolbar-hoverBackground"
-					onMouseDown={() => startContinuousZoom(zoomInStep)}
-					onMouseUp={stopContinuousZoom}
-					onMouseLeave={stopContinuousZoom}
-					title={zoomInTitle}>
-					<span className="codicon codicon-zoom-in"></span>
-				</button>
-			</div>
-		)
-	}
-
-	// Default rendering with simple click handlers
 	return (
 		<div className="flex items-center gap-2">
-			<IconButton icon="zoom-out" onClick={onZoomOut || (() => adjustZoom?.(zoomOutStep))} title={zoomOutTitle} />
+			<IconButton
+				icon="zoom-out"
+				title={zoomOutTitle}
+				onClick={!useContinuousZoom ? onZoomOut || (() => adjustZoom?.(zoomOutStep)) : undefined}
+				onMouseDown={useContinuousZoom && adjustZoom ? () => startContinuousZoom(zoomOutStep) : undefined}
+				onMouseUp={useContinuousZoom && adjustZoom ? stopContinuousZoom : undefined}
+				onMouseLeave={useContinuousZoom && adjustZoom ? stopContinuousZoom : undefined}
+			/>
 			<div className="text-sm text-vscode-editor-foreground min-w-[50px] text-center">
 				{Math.round(zoomLevel * 100)}%
 			</div>
-			<IconButton icon="zoom-in" onClick={onZoomIn || (() => adjustZoom?.(zoomInStep))} title={zoomInTitle} />
+			<IconButton
+				icon="zoom-in"
+				title={zoomInTitle}
+				onClick={!useContinuousZoom ? onZoomIn || (() => adjustZoom?.(zoomInStep)) : undefined}
+				onMouseDown={useContinuousZoom && adjustZoom ? () => startContinuousZoom(zoomInStep) : undefined}
+				onMouseUp={useContinuousZoom && adjustZoom ? stopContinuousZoom : undefined}
+				onMouseLeave={useContinuousZoom && adjustZoom ? stopContinuousZoom : undefined}
+			/>
 		</div>
 	)
 }