Minimap resize behavior

packages/tldraw/src/lib/ui.css

@@ -1159,20 +1159,59 @@ tldraw? probably.
 /* Minimap */
 
 .tlui-minimap {
-	width: 100%;
+	position: relative;
+	width: 140px;
 	height: 96px;
-	min-height: 96px;
+	min-width: 100px;
+	min-height: 80px;
+	max-width: 500px;
+	max-height: 400px;
 	overflow: hidden;
 	padding: var(--tl-space-3);
 	padding-top: 0px;
 }
 
+.tlui-minimap[data-resizing='true'] {
+	pointer-events: none;
+}
+
 .tlui-minimap__canvas {
 	position: relative;
 	width: 100%;
 	height: 100%;
 }
 
+/* Minimap resize handles - invisible like sidebar resizer */
+.tlui-minimap__resize-handle {
+	position: absolute;
+	z-index: 1;
+	pointer-events: all;
+}
+
+.tlui-minimap__resize-handle--n {
+	top: -3px;
+	left: 0;
+	right: 8px;
+	height: 6px;
+	cursor: ns-resize;
+}
+
+.tlui-minimap__resize-handle--e {
+	top: 6px;
+	right: -3px;
+	bottom: 0;
+	width: 6px;
+	cursor: ew-resize;
+}
+
+.tlui-minimap__resize-handle--ne {
+	top: -3px;
+	right: -3px;
+	width: 12px;
+	height: 12px;
+	cursor: nesw-resize;
+}
+
 /* --------------------- Toolbar -------------------- */
 
 /* Wide container */

packages/tldraw/src/lib/ui/components/Minimap/DefaultMinimap.tsx

@@ -2,6 +2,7 @@ import {
 	Box,
 	TLPointerEventInfo,
 	Vec,
+	clamp,
 	getPointerInfo,
 	isAccelKey,
 	normalizeWheel,
@@ -12,9 +13,37 @@ import {
 	useIsDarkMode,
 } from '@tldraw/editor'
 import * as React from 'react'
+import { useLocalStorageState } from '../../hooks/useLocalStorageState'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { MinimapManager } from './MinimapManager'
 
+const MIN_MINIMAP_WIDTH = 100
+const MIN_MINIMAP_HEIGHT = 80
+const MAX_MINIMAP_WIDTH = 500
+const MAX_MINIMAP_HEIGHT = 400
+const DEFAULT_MINIMAP_WIDTH = 140
+const DEFAULT_MINIMAP_HEIGHT = 96
+
+type ResizeEdge = 'n' | 'e' | 'ne'
+type ResizeState =
+	| { name: 'idle' }
+	| {
+			name: 'pointing'
+			edge: ResizeEdge
+			startX: number
+			startY: number
+			startWidth: number
+			startHeight: number
+	  }
+	| {
+			name: 'resizing'
+			edge: ResizeEdge
+			startX: number
+			startY: number
+			startWidth: number
+			startHeight: number
+	  }
+
 /** @public @react */
 export function DefaultMinimap() {
 	const editor = useEditor()
@@ -23,6 +52,13 @@ export function DefaultMinimap() {
 
 	const rCanvas = React.useRef<HTMLCanvasElement>(null!)
 	const rPointing = React.useRef(false)
+	const rMinimapContainer = React.useRef<HTMLDivElement>(null!)
+	const rResizeState = React.useRef<ResizeState>({ name: 'idle' })
+
+	const [minimapSize, setMinimapSize] = useLocalStorageState('tldraw_minimap_size', {
+		width: DEFAULT_MINIMAP_WIDTH,
+		height: DEFAULT_MINIMAP_HEIGHT,
+	})
 
 	const minimapRef = React.useRef<MinimapManager>()
 
@@ -199,8 +235,84 @@ export function DefaultMinimap() {
 		})
 	}, [isDarkMode, editor])
 
+	const handleResizePointerDown = React.useCallback(
+		(e: React.PointerEvent, edge: ResizeEdge) => {
+			e.currentTarget.setPointerCapture(e.pointerId)
+			e.stopPropagation()
+
+			rResizeState.current = {
+				name: 'pointing',
+				edge,
+				startX: e.clientX,
+				startY: e.clientY,
+				startWidth: minimapSize.width,
+				startHeight: minimapSize.height,
+			}
+		},
+		[minimapSize]
+	)
+
+	const handleResizePointerMove = React.useCallback(
+		(e: React.PointerEvent) => {
+			const state = rResizeState.current
+			if (state.name === 'idle') return
+
+			if (state.name === 'pointing') {
+				const dx = Math.abs(e.clientX - state.startX)
+				const dy = Math.abs(e.clientY - state.startY)
+				if (dx < 3 && dy < 3) return
+
+				rResizeState.current = { ...state, name: 'resizing' }
+				rMinimapContainer.current?.setAttribute('data-resizing', 'true')
+			}
+
+			if (rResizeState.current.name === 'resizing') {
+				const { edge, startX, startY, startWidth, startHeight } = rResizeState.current
+
+				let newWidth = startWidth
+				let newHeight = startHeight
+
+				if (edge === 'e' || edge === 'ne') {
+					newWidth = clamp(startWidth + (e.clientX - startX), MIN_MINIMAP_WIDTH, MAX_MINIMAP_WIDTH)
+				}
+
+				if (edge === 'n' || edge === 'ne') {
+					newHeight = clamp(
+						startHeight - (e.clientY - startY),
+						MIN_MINIMAP_HEIGHT,
+						MAX_MINIMAP_HEIGHT
+					)
+				}
+
+				setMinimapSize({ width: Math.floor(newWidth), height: Math.floor(newHeight) })
+			}
+		},
+		[setMinimapSize]
+	)
+
+	const handleResizePointerUp = React.useCallback((e: React.PointerEvent) => {
+		e.currentTarget.releasePointerCapture(e.pointerId)
+		rResizeState.current = { name: 'idle' }
+		rMinimapContainer.current?.removeAttribute('data-resizing')
+	}, [])
+
+	const handleResizeDoubleClick = React.useCallback(
+		(e: React.MouseEvent) => {
+			e.stopPropagation()
+			setMinimapSize({ width: DEFAULT_MINIMAP_WIDTH, height: DEFAULT_MINIMAP_HEIGHT })
+		},
+		[setMinimapSize]
+	)
+
 	return (
-		<div className="tlui-minimap">
+		<div
+			ref={rMinimapContainer}
+			className="tlui-minimap"
+			style={{
+				width: minimapSize.width,
+				height: minimapSize.height,
+			}}
+		>
 			<canvas
 				role="img"
 				aria-label={msg('navigation-zone.minimap')}
@@ -212,6 +324,28 @@ export function DefaultMinimap() {
 				onPointerDown={onPointerDown}
 				onWheelCapture={onWheel}
 			/>
+			{/* Resize handles - invisible, like sidebar resizer */}
+			<div
+				className="tlui-minimap__resize-handle tlui-minimap__resize-handle--n"
+				onPointerDown={(e) => handleResizePointerDown(e, 'n')}
+				onPointerMove={handleResizePointerMove}
+				onLostPointerCapture={handleResizePointerUp}
+				onDoubleClick={handleResizeDoubleClick}
+			/>
+			<div
+				className="tlui-minimap__resize-handle tlui-minimap__resize-handle--e"
+				onPointerDown={(e) => handleResizePointerDown(e, 'e')}
+				onPointerMove={handleResizePointerMove}
+				onLostPointerCapture={handleResizePointerUp}
+				onDoubleClick={handleResizeDoubleClick}
+			/>
+			<div
+				className="tlui-minimap__resize-handle tlui-minimap__resize-handle--ne"
+				onPointerDown={(e) => handleResizePointerDown(e, 'ne')}
+				onPointerMove={handleResizePointerMove}
+				onLostPointerCapture={handleResizePointerUp}
+				onDoubleClick={handleResizeDoubleClick}
+			/>
 		</div>
 	)
 }