mermaid: Add drag functionality and support contious zooming

Author: qdaxb

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

@@ -22,6 +22,8 @@ export function MermaidButton({ containerRef, code, isLoading, svgToPng, childre
 	const [copyFeedback, setCopyFeedback] = useState(false)
 	const [isHovering, setIsHovering] = useState(false)
 	const [modalViewMode, setModalViewMode] = useState<"diagram" | "code">("diagram")
+	const [isDragging, setIsDragging] = useState(false)
+	const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 })
 	const { copyWithFeedback } = useCopyToClipboard()
 	const { t } = useAppTranslation()
 
@@ -82,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.1 : 0.1
+		const delta = e.deltaY > 0 ? -0.25 : 0.25
 		adjustZoom(delta)
 	}, [])
 
@@ -152,11 +154,25 @@ export function MermaidButton({ containerRef, code, isLoading, svgToPng, childre
 						<>
 							<div
 								style={{
-									transform: `scale(${zoomLevel})`,
+									transform: `scale(${zoomLevel}) translate(${dragPosition.x}px, ${dragPosition.y}px)`,
 									transformOrigin: "center center",
-									transition: "transform 0.2s ease",
-									cursor: "grab",
-								}}>
+									transition: isDragging ? "none" : "transform 0.1s ease",
+									cursor: isDragging ? "grabbing" : "grab",
+								}}
+								onMouseDown={(e) => {
+									setIsDragging(true)
+									e.preventDefault()
+								}}
+								onMouseMove={(e) => {
+									if (isDragging) {
+										setDragPosition((prev) => ({
+											x: prev.x + e.movementX / zoomLevel,
+											y: prev.y + e.movementY / zoomLevel,
+										}))
+									}
+								}}
+								onMouseUp={() => setIsDragging(false)}
+								onMouseLeave={() => setIsDragging(false)}>
 								{containerRef.current && containerRef.current.innerHTML && (
 									<div dangerouslySetInnerHTML={{ __html: containerRef.current.innerHTML }} />
 								)}
@@ -179,10 +195,12 @@ export function MermaidButton({ containerRef, code, isLoading, svgToPng, childre
 						<>
 							<ZoomControls
 								zoomLevel={zoomLevel}
-								onZoomIn={() => adjustZoom(0.1)}
-								onZoomOut={() => adjustZoom(-0.1)}
 								zoomInTitle={t("common:mermaid.buttons.zoomIn")}
 								zoomOutTitle={t("common:mermaid.buttons.zoomOut")}
+								useContinuousZoom={true}
+								adjustZoom={adjustZoom}
+								zoomInStep={0.2}
+								zoomOutStep={-0.2}
 							/>
 							<IconButton
 								icon={copyFeedback ? "check" : "copy"}

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

@@ -1,21 +1,105 @@
 import { IconButton } from "./IconButton"
+import { useRef, useEffect } from "react"
 
 interface ZoomControlsProps {
 	zoomLevel: number
-	onZoomIn: () => void
-	onZoomOut: () => void
 	zoomInTitle?: string
 	zoomOutTitle?: string
+	useContinuousZoom?: boolean
+	adjustZoom?: (amount: number) => void
+	zoomInStep?: number
+	zoomOutStep?: number
+	onZoomIn?: () => void
+	onZoomOut?: () => void
 }
 
-export function ZoomControls({ zoomLevel, onZoomIn, onZoomOut, zoomInTitle, zoomOutTitle }: ZoomControlsProps) {
+export function ZoomControls({
+	zoomLevel,
+	zoomInTitle,
+	zoomOutTitle,
+	useContinuousZoom = false,
+	adjustZoom,
+	zoomInStep = 0.1,
+	zoomOutStep = -0.1,
+	onZoomIn,
+	onZoomOut,
+}: ZoomControlsProps) {
+	const zoomIntervalRef = useRef<NodeJS.Timeout | null>(null)
+
+	/**
+	 * Start continuous zoom on mouse down
+	 */
+	const startContinuousZoom = (amount: number) => {
+		if (!useContinuousZoom || !adjustZoom) return
+
+		// Clear any existing interval first
+		if (zoomIntervalRef.current) {
+			clearInterval(zoomIntervalRef.current)
+		}
+
+		// Immediately apply first zoom adjustment
+		adjustZoom(amount)
+
+		// Set up interval for continuous zooming
+		zoomIntervalRef.current = setInterval(() => {
+			adjustZoom(amount)
+		}, 150) // Adjust every 150ms while button is held down
+	}
+
+	/**
+	 * Stop continuous zoom on mouse up or mouse leave
+	 */
+	const stopContinuousZoom = () => {
+		if (zoomIntervalRef.current) {
+			clearInterval(zoomIntervalRef.current)
+			zoomIntervalRef.current = null
+		}
+	}
+
+	// Clean up interval on unmount
+	useEffect(() => {
+		return () => {
+			if (zoomIntervalRef.current) {
+				clearInterval(zoomIntervalRef.current)
+			}
+		}
+	}, [])
+
+	// 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} title={zoomOutTitle} />
+			<IconButton icon="zoom-out" onClick={onZoomOut || (() => adjustZoom?.(zoomOutStep))} title={zoomOutTitle} />
 			<div className="text-sm text-vscode-editor-foreground min-w-[50px] text-center">
 				{Math.round(zoomLevel * 100)}%
 			</div>
-			<IconButton icon="zoom-in" onClick={onZoomIn} title={zoomInTitle} />
+			<IconButton icon="zoom-in" onClick={onZoomIn || (() => adjustZoom?.(zoomInStep))} title={zoomInTitle} />
 		</div>
 	)
 }