@ngroznykh/papirus 0.9.12 → 0.9.13

package/dist/papirus.js

@@ -3220,6 +3220,20 @@ function measureTextLines(ctx, lines) {
 	for (const line of lines) maxWidth = Math.max(maxWidth, ctx.measureText(line).width);
 	return maxWidth;
 }
+function readScale(ctx) {
+	if (typeof ctx.getTransform !== "function") return null;
+	const m = ctx.getTransform();
+	if (m === null || typeof m.a !== "number") return null;
+	return {
+		a: m.a,
+		b: typeof m.b === "number" ? m.b : 0
+	};
+}
+function isScreenFontReadable(ctx, fontSize) {
+	const m = readScale(ctx);
+	if (m === null) return true;
+	return fontSize * Math.hypot(m.a, m.b) >= 7;
+}
 //#endregion
 //#region src/elements/TextLabel.ts
 var DEFAULT_INSET = 8;
@@ -3477,10 +3491,10 @@ var TextLabel = class {
 			default: startY = innerBounds.y + (innerBounds.height - totalHeight) / 2 + lineHeight / 2;
 		}
 		ctx.fillStyle = this._style.color ?? "#000000";
+		if (!isScreenFontReadable(ctx, this._style.fontSize ?? 14)) return;
 		for (let i = 0; i < this._lines.length; i++) {
-			const line = this._lines[i];
 			const y = startY + i * lineHeight;
-			ctx.fillText(line, x, y);
+			ctx.fillText(this._lines[i], x, y);
 		}
 	}
 	/**
@@ -6411,6 +6425,7 @@ function drawLegacyArrowHead(ctx, from, to) {
 function renderEdgeLabel(ctx, options) {
 	const { label, path, background } = options;
 	if (!label || path.length < 2) return;
+	if (!isScreenFontReadable(ctx, label.style.fontSize ?? 14)) return;
 	const labelCenter = getEdgeLabelPosition(options);
 	if (!labelCenter) return;
 	const rotation = getEdgeLabelRotation(options);
@@ -7060,7 +7075,7 @@ var Edge = class extends Element {
 			}
 			return pts;
 		};
-		if (!(this._label !== void 0 && this._labelLineGap)) {
+		if (!(this._label !== void 0 && this._labelLineGap && isScreenFontReadable(ctx, this._label.style.fontSize ?? 14))) {
 			const start = path[0];
 			const startNext = path[1];
 			const startAngle = Math.atan2(startNext.y - start.y, startNext.x - start.x);
@@ -7547,6 +7562,7 @@ var InteractionManager = class {
 		this.handledScrollbarMouseDown = false;
 		this.overlayDragSession = null;
 		this.handledOverlayMouseDown = false;
+		this.editHoverSuspendedForPan = false;
 		this.renderer = options.renderer;
 		this.navigationOnly = options.navigationOnly ?? false;
 		this.inputHandler = new InputHandler({
@@ -7730,7 +7746,7 @@ var InteractionManager = class {
 	setupEvents() {
 		this.overlayCleanup = this.renderer.addOverlayRenderer((ctx) => {
 			this.selectionManager.renderSelectionRect(ctx);
-			if (!this.navigationOnly) {
+			if (!this.navigationOnly && !this.navigationManager.panning) {
 				this.dragManager.renderAlignmentGuides(ctx);
 				this.connectionManager.renderPreview(ctx);
 				this.connectionManager.renderHoverAnchors(ctx);
@@ -7901,7 +7917,7 @@ var InteractionManager = class {
 		if (event.button === 0) {
 			if (this.navigationOnly) {
 				this.selectionManager.clearSelection();
-				this.navigationManager.startPan(event);
+				this.beginBackgroundPan(event);
 				return;
 			}
 			if (hitElement === void 0) {
@@ -7910,11 +7926,14 @@ var InteractionManager = class {
 					return;
 				}
 				this.selectionManager.clearSelection();
-				this.navigationManager.startPan(event);
+				this.beginBackgroundPan(event);
 				return;
 			}
 		}
-		if (this.navigationManager.handleMouseDown(event)) return;
+		if (this.navigationManager.handleMouseDown(event)) {
+			this.suspendEditHover();
+			return;
+		}
 		if (this.navigationOnly) return;
 		if (this.dragManager.handleMouseDown(event)) return;
 	}
@@ -7928,7 +7947,11 @@ var InteractionManager = class {
 				this.renderer.setScrollbarActiveAxis(null);
 				this.scrollbarDragState = null;
 			}
-			if (this.navigationManager.panning) this.navigationManager.handleMouseUp(event);
+			if (this.navigationManager.panning) this.finishBackgroundPan(event);
+		}
+		if (this.navigationManager.panning) {
+			this.navigationManager.handleMouseMove(event);
+			return;
 		}
 		const overScrollbar = this.renderer.updateScrollbarHover(event.screenX, event.screenY);
 		const overOverlayPointerSink = this.renderer.blocksDiagramPointerAtScreen(event.screenX, event.screenY);
@@ -7990,7 +8013,7 @@ var InteractionManager = class {
 			this.selectionManager.endSelectionRect();
 			return;
 		}
-		this.navigationManager.handleMouseUp(event);
+		this.finishBackgroundPan(event);
 	}
 	handleClick(event) {
 		if (this.handledOverlayMouseDown) {
@@ -8094,6 +8117,24 @@ var InteractionManager = class {
 		}
 		return closestEdge;
 	}
+	suspendEditHover() {
+		if (this.navigationOnly || this.editHoverSuspendedForPan) return;
+		this.connectionManager.disableHover();
+		this.editHoverSuspendedForPan = true;
+	}
+	resumeEditHover() {
+		if (!this.editHoverSuspendedForPan) return;
+		this.connectionManager.enableHover();
+		this.editHoverSuspendedForPan = false;
+	}
+	beginBackgroundPan(event) {
+		this.suspendEditHover();
+		this.navigationManager.startPan(event);
+	}
+	finishBackgroundPan(event) {
+		this.navigationManager.handleMouseUp(event);
+		this.resumeEditHover();
+	}
 	handleWheel(event) {
 		if (this.renderer.blocksDiagramPointerAtScreen(event.screenX, event.screenY)) return;
 		this.navigationManager.handleWheel(event);
@@ -8132,6 +8173,7 @@ var InteractionManager = class {
 	}
 	handleKeyUp(event) {
 		this.navigationManager.handleKeyUp(event);
+		if (!this.navigationManager.panning) this.resumeEditHover();
 	}
 	handleViewportNavigationKey(event) {
 		switch (event.key) {
@@ -8316,6 +8358,66 @@ var InteractionManager = class {
 	}
 };
 //#endregion
+//#region src/utils/pathViewport.ts
+/**
+* True when the drawn edge path meets the viewport.
+* AABB-only cull keeps fat bezier control boxes on the walk even when the
+* curve never enters the view. Empty path stays visible for the first layout.
+*/
+function edgePathIntersectsViewport(input, viewport) {
+	const path = input.path;
+	if (path.length === 0) return true;
+	const aabb = boundsFromPoints(path);
+	if (aabb === null || !rectsIntersect(aabb, viewport)) return false;
+	if (input.type === "bezier" && path.length >= 4) return polylineIntersectsRect(sampleBezier(path), viewport);
+	return polylineIntersectsRect(path, viewport);
+}
+function boundsFromPoints(points) {
+	if (points.length === 0) return null;
+	let minX = Infinity;
+	let minY = Infinity;
+	let maxX = -Infinity;
+	let maxY = -Infinity;
+	for (const point of points) {
+		minX = Math.min(minX, point.x);
+		minY = Math.min(minY, point.y);
+		maxX = Math.max(maxX, point.x);
+		maxY = Math.max(maxY, point.y);
+	}
+	return {
+		x: minX,
+		y: minY,
+		width: maxX - minX,
+		height: maxY - minY
+	};
+}
+function polylineIntersectsRect(points, rect) {
+	if (points.length === 1) return pointInRect(points[0], rect);
+	for (let i = 0; i < points.length - 1; i++) {
+		const start = points[i];
+		const end = points[i + 1];
+		if (pointInRect(start, rect) || pointInRect(end, rect)) return true;
+		if (segmentRectIntersections(start, end, rect).length > 0) return true;
+	}
+	return false;
+}
+function sampleBezier(path) {
+	const samples = [];
+	const steps = 20;
+	for (let i = 1; i + 2 < path.length; i += 3) {
+		const p0 = path[i - 1];
+		const p1 = path[i];
+		const p2 = path[i + 1];
+		const p3 = path[i + 2];
+		for (let s = 0; s <= steps; s++) {
+			const t = s / steps;
+			if (samples.length > 0 && t === 0) continue;
+			samples.push(bezierPoint(p0, p1, p2, p3, t));
+		}
+	}
+	return samples;
+}
+//#endregion
 //#region src/core/AnimationManager.ts
 var DEFAULT_OPTIONS$3 = {
 	enabled: false,
@@ -9294,6 +9396,8 @@ var DiagramRenderer = class extends EventEmitter {
 		this._dirty = true;
 		this._styleDirty = true;
 		this._contentDirty = true;
+		this._contentRevision = 0;
+		this._contentBoundsCache = null;
 		this._destroyed = false;
 		this._contextLost = false;
 		this._canvasRect = null;
@@ -9730,7 +9834,7 @@ var DiagramRenderer = class extends EventEmitter {
 	addGroup(group) {
 		group.setDirtyListener(() => this.markDirty());
 		this._groups.set(group.id, group);
-		this.markDirty();
+		this.markContentDirty();
 	}
 	/**
 	* Remove a group from the diagram
@@ -9740,7 +9844,7 @@ var DiagramRenderer = class extends EventEmitter {
 		if (group === void 0) return false;
 		this._groups.delete(groupId);
 		group.setDirtyListener(void 0);
-		this.markDirty();
+		this.markContentDirty();
 		return true;
 	}
 	/**
@@ -9814,10 +9918,18 @@ var DiagramRenderer = class extends EventEmitter {
 	*/
 	markContentDirty() {
 		this._contentDirty = true;
+		this._contentRevision += 1;
 		this._nodeObstaclesCache = null;
 		this._dirty = true;
 	}
 	/**
+	* Monotonic counter bumped when nodes/edges/layout change (not on pan/zoom).
+	* Used by MiniMap to cache its content bake across viewport moves.
+	*/
+	getContentRevision() {
+		return this._contentRevision;
+	}
+	/**
 	* Visible world rectangle plus padding so labels and arrow markers are not culled early.
 	*/
 	getViewportWorldBounds() {
@@ -9835,10 +9947,13 @@ var DiagramRenderer = class extends EventEmitter {
 	}
 	/**
 	* Edges without a computed path stay drawable so the first layout pass can paint them.
+	* Bezier control-box AABB is not enough — walk the actual path.
 	*/
 	edgeIntersectsViewport(edge, viewport) {
-		if (edge.path.length === 0) return true;
-		return this.intersectsViewport(edge.getBounds(), viewport);
+		return edgePathIntersectsViewport({
+			path: edge.path,
+			type: edge.type
+		}, viewport);
 	}
 	/**
 	* Force an immediate render
@@ -9938,13 +10053,13 @@ var DiagramRenderer = class extends EventEmitter {
 			applyStyleManagerToElements(this.styleManager, this._groups.values(), this._edges.values(), this._nodes.values());
 			this._styleDirty = false;
 		}
-		for (const group of this._groups.values()) group.recalculateBounds();
 		const viewport = this.getViewportWorldBounds();
 		for (const group of this._groups.values()) if (group.visible && this.intersectsViewport(group.getBounds(), viewport)) {
 			this.renderElementWithAnimation(ctx, group, () => group.render(ctx));
 			group.clearDirty();
 		}
 		if (this._contentDirty) {
+			for (const group of this._groups.values()) group.recalculateBounds();
 			this.edgeEndpointUpdater.updateAll();
 			this._contentDirty = false;
 		}
@@ -10007,11 +10122,17 @@ var DiagramRenderer = class extends EventEmitter {
 		return this._nodeObstaclesCache;
 	}
 	getContentBounds() {
-		return getContentBounds({
+		if (this._contentBoundsCache?.revision === this._contentRevision) return this._contentBoundsCache.bounds;
+		const bounds = getContentBounds({
 			nodes: this._nodes.values(),
 			edges: this._edges.values(),
 			groups: this._groups.values()
 		});
+		this._contentBoundsCache = {
+			revision: this._contentRevision,
+			bounds
+		};
+		return bounds;
 	}
 	notifyScrollbarInteraction() {
 		this.scrollbarController.notifyInteraction();
@@ -11947,6 +12068,7 @@ var Group = class Group extends Element {
 	*/
 	recalculateBounds() {
 		if (this._children.length === 0) {
+			if (this._x === 0 && this._y === 0 && this._width === 0 && this._height === 0) return;
 			this._x = 0;
 			this._y = 0;
 			this._width = 0;
@@ -11965,10 +12087,15 @@ var Group = class Group extends Element {
 			maxX = Math.max(maxX, bounds.x + bounds.width);
 			maxY = Math.max(maxY, bounds.y + bounds.height);
 		}
-		this._x = minX - this._padding;
-		this._y = minY - this._padding;
-		this._width = maxX - minX + this._padding * 2;
-		this._height = maxY - minY + this._padding * 2;
+		const nextX = minX - this._padding;
+		const nextY = minY - this._padding;
+		const nextWidth = maxX - minX + this._padding * 2;
+		const nextHeight = maxY - minY + this._padding * 2;
+		if (this._x === nextX && this._y === nextY && this._width === nextWidth && this._height === nextHeight) return;
+		this._x = nextX;
+		this._y = nextY;
+		this._width = nextWidth;
+		this._height = nextHeight;
 		this.markDirty();
 	}
 	hitTest(point) {
@@ -12856,6 +12983,7 @@ var CText = class extends CompositeComponentBase {
 		if (this.style.visible === false) return;
 		const opacity = this.style.opacity ?? 1;
 		if (opacity <= 0) return;
+		if (!isScreenFontReadable(ctx, this._fontSize)) return;
 		ctx.save();
 		ctx.globalAlpha *= opacity;
 		ctx.font = this.getFont();
@@ -12908,8 +13036,14 @@ var CText = class extends CompositeComponentBase {
 			ctx.rotate(this._rotation * Math.PI / 180);
 			const offsetX = xBase - (textBounds.x + textBounds.width / 2);
 			const offsetY = yStart - (textBounds.y + textBounds.height / 2);
-			for (let i = 0; i < lines.length; i++) ctx.fillText(lines[i], offsetX, offsetY + i * lineHeightPx);
-		} else for (let i = 0; i < lines.length; i++) ctx.fillText(lines[i], xBase, yStart + i * lineHeightPx);
+			for (let i = 0; i < lines.length; i++) {
+				const y = offsetY + i * lineHeightPx;
+				ctx.fillText(lines[i], offsetX, y);
+			}
+		} else for (let i = 0; i < lines.length; i++) {
+			const y = yStart + i * lineHeightPx;
+			ctx.fillText(lines[i], xBase, y);
+		}
 		ctx.restore();
 	}
 	serialize() {
@@ -15546,6 +15680,24 @@ function distributeNodes(nodes, type) {
 		}
 	}
 }
+/**
+* World step that keeps the visible grid cell in a Miro-like range.
+* The base `gridSize` is doubled or halved so the screen size stays ~16–32 px.
+*/
+function adaptiveGridStep(gridSize, zoom) {
+	if (!Number.isFinite(gridSize) || !Number.isFinite(zoom) || gridSize <= 0 || zoom <= 0) return gridSize;
+	let step = gridSize;
+	let screen = step * zoom;
+	while (screen < 16) {
+		step *= 2;
+		screen *= 2;
+	}
+	while (screen > 32) {
+		step /= 2;
+		screen /= 2;
+	}
+	return step;
+}
 //#endregion
 //#region src/core/overlays/BaseOverlay.ts
 /**
@@ -15584,20 +15736,20 @@ var GridOverlay = class extends BaseOverlay {
 			if (!this.enabled) return;
 			const width = renderer.width;
 			const height = renderer.height;
-			const gridSize = this.gridSize;
-			const color = this.color;
-			const startX = Math.floor(-renderer.offsetX / renderer.zoom / gridSize) * gridSize;
-			const startY = Math.floor(-renderer.offsetY / renderer.zoom / gridSize) * gridSize;
-			const endX = Math.ceil((width - renderer.offsetX) / renderer.zoom / gridSize) * gridSize;
-			const endY = Math.ceil((height - renderer.offsetY) / renderer.zoom / gridSize) * gridSize;
-			ctx.strokeStyle = color;
-			ctx.lineWidth = 1 / renderer.zoom;
+			const zoom = renderer.zoom;
+			const step = adaptiveGridStep(this.gridSize, zoom);
+			const startX = Math.floor(-renderer.offsetX / zoom / step) * step;
+			const startY = Math.floor(-renderer.offsetY / zoom / step) * step;
+			const endX = Math.ceil((width - renderer.offsetX) / zoom / step) * step;
+			const endY = Math.ceil((height - renderer.offsetY) / zoom / step) * step;
+			ctx.strokeStyle = this.color;
+			ctx.lineWidth = 1 / zoom;
 			ctx.beginPath();
-			for (let x = startX; x <= endX; x += gridSize) {
+			for (let x = startX; x <= endX; x += step) {
 				ctx.moveTo(x, startY);
 				ctx.lineTo(x, endY);
 			}
-			for (let y = startY; y <= endY; y += gridSize) {
+			for (let y = startY; y <= endY; y += step) {
 				ctx.moveTo(startX, y);
 				ctx.lineTo(endX, y);
 			}
@@ -15610,51 +15762,114 @@ var GridOverlay = class extends BaseOverlay {
 var RulersOverlay = class extends BaseOverlay {
 	constructor(options = {}) {
 		super(options.enabled ?? true);
+		this.tickBake = null;
+		this.tickBakeGeneration = 0;
 		this.thickness = options.thickness ?? 20;
 		this.backgroundColor = options.backgroundColor ?? "#f4f4f5";
 		this.textColor = options.textColor ?? "#52525b";
 		this.tickColor = options.tickColor ?? "#a1a1aa";
 	}
+	getTickBakeGeneration() {
+		return this.tickBakeGeneration;
+	}
 	install(renderer) {
 		this.removeOverlay = renderer.addOverlayRenderer((ctx) => {
 			if (!this.enabled) return;
 			const thickness = this.thickness;
+			const zoom = renderer.zoom;
+			const worldLeft = -renderer.offsetX / zoom;
+			const worldTop = -renderer.offsetY / zoom;
 			ctx.save();
 			ctx.setTransform(renderer.pixelRatio, 0, 0, renderer.pixelRatio, 0, 0);
 			ctx.fillStyle = this.backgroundColor;
 			ctx.fillRect(0, 0, renderer.width, thickness);
 			ctx.fillRect(0, 0, thickness, renderer.height);
-			ctx.strokeStyle = this.tickColor;
-			ctx.fillStyle = this.textColor;
-			ctx.font = "10px sans-serif";
-			ctx.textAlign = "left";
-			ctx.textBaseline = "top";
-			const step = this.getTickStep(renderer.zoom);
-			const worldLeft = -renderer.offsetX / renderer.zoom;
-			const worldTop = -renderer.offsetY / renderer.zoom;
-			const worldRight = worldLeft + renderer.width / renderer.zoom;
-			const worldBottom = worldTop + renderer.height / renderer.zoom;
-			ctx.beginPath();
-			for (let x = Math.floor(worldLeft / step) * step; x <= worldRight; x += step) {
-				const screenX = x * renderer.zoom + renderer.offsetX;
-				ctx.moveTo(screenX, thickness);
-				ctx.lineTo(screenX, thickness - 6);
-				ctx.fillText(`${Math.round(x)}`, screenX + 2, 2);
-			}
-			for (let y = Math.floor(worldTop / step) * step; y <= worldBottom; y += step) {
-				const screenY = y * renderer.zoom + renderer.offsetY;
-				ctx.moveTo(thickness, screenY);
-				ctx.lineTo(thickness - 6, screenY);
-				ctx.save();
-				ctx.translate(2, screenY + 2);
-				ctx.rotate(-Math.PI / 2);
-				ctx.fillText(`${Math.round(y)}`, 0, 0);
-				ctx.restore();
-			}
-			ctx.stroke();
+			const bake = this.ensureTickBake(renderer);
+			const srcX = (worldLeft - bake.worldLeft) * zoom;
+			const srcY = (worldTop - bake.worldTop) * zoom;
+			const pr = renderer.pixelRatio;
+			ctx.drawImage(bake.horizontal, srcX * pr, 0, renderer.width * pr, thickness * pr, 0, 0, renderer.width, thickness);
+			ctx.drawImage(bake.vertical, 0, srcY * pr, thickness * pr, renderer.height * pr, 0, 0, thickness, renderer.height);
 			ctx.restore();
 		});
 	}
+	ensureTickBake(renderer) {
+		const zoom = renderer.zoom;
+		const worldLeft = -renderer.offsetX / zoom;
+		const worldTop = -renderer.offsetY / zoom;
+		const worldRight = worldLeft + renderer.width / zoom;
+		const worldBottom = worldTop + renderer.height / zoom;
+		if (this.tickBake !== null && this.tickBake.zoom === zoom && this.tickBake.pixelRatio === renderer.pixelRatio && worldLeft >= this.tickBake.worldLeft && worldRight <= this.tickBake.worldRight && worldTop >= this.tickBake.worldTop && worldBottom <= this.tickBake.worldBottom) return this.tickBake;
+		const extraX = renderer.width / zoom;
+		const extraY = renderer.height / zoom;
+		const bakeLeft = worldLeft - extraX;
+		const bakeTop = worldTop - extraY;
+		const bakeRight = worldRight + extraX;
+		const bakeBottom = worldBottom + extraY;
+		const pr = Math.max(1, renderer.pixelRatio);
+		const thickness = this.thickness;
+		const step = this.getTickStep(zoom);
+		const horizontal = this.tickBake?.horizontal ?? document.createElement("canvas");
+		const vertical = this.tickBake?.vertical ?? document.createElement("canvas");
+		const hWidth = Math.max(1, Math.ceil((bakeRight - bakeLeft) * zoom));
+		const vHeight = Math.max(1, Math.ceil((bakeBottom - bakeTop) * zoom));
+		horizontal.width = Math.max(1, Math.ceil(hWidth * pr));
+		horizontal.height = Math.max(1, Math.ceil(thickness * pr));
+		vertical.width = Math.max(1, Math.ceil(thickness * pr));
+		vertical.height = Math.max(1, Math.ceil(vHeight * pr));
+		const hCtx = horizontal.getContext("2d");
+		const vCtx = vertical.getContext("2d");
+		if (hCtx !== null) {
+			hCtx.setTransform(pr, 0, 0, pr, 0, 0);
+			hCtx.clearRect(0, 0, hWidth, thickness);
+			hCtx.strokeStyle = this.tickColor;
+			hCtx.fillStyle = this.textColor;
+			hCtx.font = "10px sans-serif";
+			hCtx.textAlign = "left";
+			hCtx.textBaseline = "top";
+			hCtx.beginPath();
+			for (let x = Math.floor(bakeLeft / step) * step; x <= bakeRight; x += step) {
+				const screenX = (x - bakeLeft) * zoom;
+				hCtx.moveTo(screenX, thickness);
+				hCtx.lineTo(screenX, thickness - 6);
+				hCtx.fillText(`${Math.round(x)}`, screenX + 2, 2);
+			}
+			hCtx.stroke();
+		}
+		if (vCtx !== null) {
+			vCtx.setTransform(pr, 0, 0, pr, 0, 0);
+			vCtx.clearRect(0, 0, thickness, vHeight);
+			vCtx.strokeStyle = this.tickColor;
+			vCtx.fillStyle = this.textColor;
+			vCtx.font = "10px sans-serif";
+			vCtx.textAlign = "left";
+			vCtx.textBaseline = "top";
+			vCtx.beginPath();
+			for (let y = Math.floor(bakeTop / step) * step; y <= bakeBottom; y += step) {
+				const screenY = (y - bakeTop) * zoom;
+				vCtx.moveTo(thickness, screenY);
+				vCtx.lineTo(thickness - 6, screenY);
+				vCtx.save();
+				vCtx.translate(2, screenY + 2);
+				vCtx.rotate(-Math.PI / 2);
+				vCtx.fillText(`${Math.round(y)}`, 0, 0);
+				vCtx.restore();
+			}
+			vCtx.stroke();
+		}
+		this.tickBakeGeneration += 1;
+		this.tickBake = {
+			zoom,
+			pixelRatio: renderer.pixelRatio,
+			worldLeft: bakeLeft,
+			worldTop: bakeTop,
+			worldRight: bakeRight,
+			worldBottom: bakeBottom,
+			horizontal,
+			vertical
+		};
+		return this.tickBake;
+	}
 	getTickStep(zoom) {
 		const rawStep = 80 / zoom;
 		const magnitude = Math.pow(10, Math.floor(Math.log10(rawStep)));
@@ -15710,6 +15925,7 @@ var GuidesOverlay = class extends BaseOverlay {
 var MiniMap = class extends BaseOverlay {
 	constructor(options = {}) {
 		super(options.enabled ?? true);
+		this.contentBake = null;
 		this.options = {
 			width: options.width ?? 180,
 			height: options.height ?? 120,
@@ -15721,12 +15937,16 @@ var MiniMap = class extends BaseOverlay {
 			anchor: options.anchor ?? "bottom-right"
 		};
 	}
+	/** Cached bake projection; stable across pan if only the viewport moved. */
+	getContentBakeProjectionKey() {
+		return this.contentBake?.projectionKey ?? null;
+	}
 	install(renderer) {
 		this.removeOverlay = renderer.addTopOverlayRenderer((ctx) => {
 			if (!this.enabled) return;
 			const layout = this.computeLayout(renderer);
 			if (!layout) return;
-			const { x, y, width, height, bounds, scale, mapOffsetX, mapOffsetY, viewRect } = layout;
+			const { x, y, width, height, viewRect } = layout;
 			ctx.save();
 			ctx.setTransform(renderer.pixelRatio, 0, 0, renderer.pixelRatio, 0, 0);
 			ctx.setLineDash([]);
@@ -15736,42 +15956,61 @@ var MiniMap = class extends BaseOverlay {
 			ctx.strokeStyle = this.options.borderColor;
 			ctx.lineWidth = 1;
 			ctx.strokeRect(x, y, width, height);
-			ctx.save();
-			ctx.translate(mapOffsetX, mapOffsetY);
-			ctx.scale(scale, scale);
-			ctx.translate(-bounds.x, -bounds.y);
-			ctx.setLineDash([]);
-			ctx.lineDashOffset = 0;
-			ctx.strokeStyle = "#94a3b8";
-			ctx.lineWidth = 1 / scale;
-			for (const edge of renderer.edges.values()) {
-				if (!edge.visible) continue;
-				const path = edge.path;
-				if (path.length < 2) continue;
-				ctx.beginPath();
-				ctx.moveTo(path[0].x, path[0].y);
-				for (let i = 1; i < path.length; i++) ctx.lineTo(path[i].x, path[i].y);
-				ctx.stroke();
-			}
-			for (const node of renderer.nodes.values()) {
-				if (!node.visible) continue;
-				const b = node.getBounds();
-				ctx.fillStyle = "#e2e8f0";
-				ctx.fillRect(b.x, b.y, b.width, b.height);
-			}
-			ctx.restore();
-			if (viewRect.width < 0 || viewRect.height < 0) {
-				ctx.restore();
-				return;
+			const bake = this.ensureContentBake(renderer, layout);
+			ctx.drawImage(bake, x, y, width, height);
+			if (viewRect.width >= 0 && viewRect.height >= 0) {
+				ctx.strokeStyle = this.options.viewportColor;
+				ctx.lineWidth = 1.5;
+				ctx.setLineDash([]);
+				ctx.lineDashOffset = 0;
+				ctx.strokeRect(viewRect.x, viewRect.y, viewRect.width, viewRect.height);
 			}
-			ctx.strokeStyle = this.options.viewportColor;
-			ctx.lineWidth = 1.5;
-			ctx.setLineDash([]);
-			ctx.lineDashOffset = 0;
-			ctx.strokeRect(viewRect.x, viewRect.y, viewRect.width, viewRect.height);
 			ctx.restore();
 		});
 	}
+	ensureContentBake(renderer, layout) {
+		const { x, y, width, height, bounds, scale, mapOffsetX, mapOffsetY } = layout;
+		const revision = renderer.getContentRevision();
+		const projectionKey = [
+			width,
+			height,
+			Math.round(bounds.x),
+			Math.round(bounds.y),
+			Math.round(bounds.width),
+			Math.round(bounds.height),
+			scale.toFixed(5),
+			Math.round(mapOffsetX),
+			Math.round(mapOffsetY)
+		].join("|");
+		if (this.contentBake !== null && this.contentBake.revision === revision && this.contentBake.projectionKey === projectionKey) return this.contentBake.canvas;
+		const canvas = this.contentBake?.canvas ?? document.createElement("canvas");
+		const pixelRatio = Math.max(1, Math.min(2, renderer.pixelRatio));
+		canvas.width = Math.max(1, Math.ceil(width * pixelRatio));
+		canvas.height = Math.max(1, Math.ceil(height * pixelRatio));
+		const ctx = canvas.getContext("2d");
+		if (ctx === null) return canvas;
+		ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+		ctx.clearRect(0, 0, width, height);
+		ctx.save();
+		ctx.translate(mapOffsetX - x, mapOffsetY - y);
+		ctx.scale(scale, scale);
+		ctx.translate(-bounds.x, -bounds.y);
+		ctx.setLineDash([]);
+		ctx.lineDashOffset = 0;
+		for (const node of renderer.nodes.values()) {
+			if (!node.visible) continue;
+			const b = node.getBounds();
+			ctx.fillStyle = "#e2e8f0";
+			ctx.fillRect(b.x, b.y, b.width, b.height);
+		}
+		ctx.restore();
+		this.contentBake = {
+			revision,
+			projectionKey,
+			canvas
+		};
+		return canvas;
+	}
 	beginOverlayDrag(renderer, screenX, screenY) {
 		const hit = this.hitTestMiniMap(renderer, screenX, screenY);
 		if (!hit) return null;
@@ -15833,12 +16072,11 @@ var MiniMap = class extends BaseOverlay {
 	computeLayout(renderer) {
 		const rawBounds = getContentBounds({
 			nodes: renderer.nodes.values(),
-			edges: renderer.edges.values(),
 			groups: renderer.groups.values()
 		});
 		if (!rawBounds) return null;
 		const margin = this.options.contentMargin;
-		const expandedContentBounds = {
+		const bounds = {
 			x: rawBounds.x - margin,
 			y: rawBounds.y - margin,
 			width: rawBounds.width + 2 * margin,
@@ -15848,17 +16086,7 @@ var MiniMap = class extends BaseOverlay {
 		const x = anchor === "bottom-left" || anchor === "top-left" ? padding : renderer.width - width - padding;
 		const y = anchor === "top-left" || anchor === "top-right" ? padding : renderer.height - height - padding;
 		const viewportBounds = this.getViewportBounds(renderer);
-		const unionMinX = Math.min(expandedContentBounds.x, viewportBounds.x);
-		const unionMinY = Math.min(expandedContentBounds.y, viewportBounds.y);
-		const unionMaxX = Math.max(expandedContentBounds.x + expandedContentBounds.width, viewportBounds.x + viewportBounds.width);
-		const unionMaxY = Math.max(expandedContentBounds.y + expandedContentBounds.height, viewportBounds.y + viewportBounds.height);
-		const bounds = {
-			x: unionMinX,
-			y: unionMinY,
-			width: unionMaxX - unionMinX,
-			height: unionMaxY - unionMinY
-		};
-		const scale = Math.min(width / bounds.width, height / bounds.height);
+		const scale = Math.min(width / Math.max(bounds.width, 1), height / Math.max(bounds.height, 1));
 		const mapOffsetX = x + (width - bounds.width * scale) / 2;
 		const mapOffsetY = y + (height - bounds.height * scale) / 2;
 		let viewX = mapOffsetX + (viewportBounds.x - bounds.x) * scale;