floor-editor-ts 1.0.8 → 1.0.10

package/dist/floor-editor.es.js

@@ -60868,19 +60868,6 @@ function LayersPanel($$anchor, $$props) {
 delegate(["click", "keydown"]);
 //#endregion
 //#region src/lib/utils/furnitureIcons.ts
-/**
-* Architectural top-down furniture renderers for 2D canvas.
-* Each function draws within a normalized rect: (-w/2, -d/2) to (w/2, d/2)
-* where w = width*zoom, d = depth*zoom. Context is already translated & rotated.
-*/
-function getHeatColor(value) {
-	switch (value) {
-		case 1: return "rgba(255, 220, 0, 0.25)";
-		case 2: return "rgba(255, 140, 0, 0.4)";
-		case 3: return "rgba(255, 60, 0, 0.6)";
-		default: return "rgba(0,0,0,0)";
-	}
-}
 function roundRect(ctx, x, y, w, h, r) {
 	r = Math.min(r, w / 2, h / 2);
 	ctx.beginPath();
@@ -61688,103 +61675,122 @@ var drawSymGasLine = (ctx, w, d, color) => {
 	ctx.fillText("G", 0, 0);
 };
 var persons = [];
-var personGlow = null;
 var lastSpawnTime = 0;
 var SPAWN_INTERVAL = 1e3;
 var MAX_PERSONS = 20;
-var drawCamera = (ctx, w, d, color, heatmapMatrix, hasPerson) => {
+var getHeatmapColor = (t, alpha = 1) => {
+	t = Math.max(0, Math.min(t, 1));
+	let r, g, b;
+	if (t < .35) {
+		const k = t / .35;
+		r = 0;
+		g = Math.round(120 + 135 * k);
+		b = Math.round(255 - 180 * k);
+	} else if (t < .7) {
+		const k = (t - .35) / .35;
+		r = Math.round(255 * k);
+		g = 255;
+		b = 0;
+	} else {
+		const k = (t - .7) / .3;
+		r = 255;
+		g = Math.round(255 - 255 * k);
+		b = 0;
+	}
+	return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+var drawCamera = (ctx, w, d, color, heatmapMatrix, hasPerson = false, showHeatmap = false) => {
 	const bodyRadius = 4;
 	const lensR = Math.min(w, d) * .25;
 	const range = Math.max(w, d) * 6;
 	const fov = Math.PI / 2;
-	ctx.save();
-	const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, range);
-	gradient.addColorStop(0, color + "66");
-	gradient.addColorStop(.5, color + "33");
-	gradient.addColorStop(1, color + "00");
-	ctx.fillStyle = gradient;
-	ctx.beginPath();
-	ctx.moveTo(0, 0);
-	ctx.arc(0, 0, range, -fov / 2, fov / 2);
-	ctx.closePath();
-	ctx.globalCompositeOperation = "lighter";
-	ctx.fill();
-	ctx.restore();
-	if (heatmapMatrix) {
-		const rows = heatmapMatrix.length;
-		const cols = heatmapMatrix[0].length;
-		const cellSize = Math.max(w, d) * .3;
+	if (showHeatmap) {
+		var _heatmapMatrix$;
 		ctx.save();
-		ctx.translate(0, 0);
+		const coneGradient = ctx.createRadialGradient(0, 0, 0, 0, 0, range);
+		coneGradient.addColorStop(0, color + "55");
+		coneGradient.addColorStop(.45, color + "22");
+		coneGradient.addColorStop(1, color + "00");
+		ctx.fillStyle = coneGradient;
 		ctx.globalCompositeOperation = "lighter";
-		ctx.filter = "blur(8px)";
-		const paths = {
-			1: new Path2D(),
-			2: new Path2D(),
-			3: new Path2D(),
-			4: new Path2D()
-		};
-		for (let y = 0; y < rows; y++) for (let x = 0; x < cols; x++) {
-			const value = heatmapMatrix[y][x];
-			if (value === 0) continue;
-			const angle = -fov / 2 + x / (cols - 1) * fov;
-			const r = y / rows * range;
-			const px = Math.cos(angle) * r;
-			const py = Math.sin(angle) * r;
-			paths[value].moveTo(px, py);
-			paths[value].arc(px, py, cellSize * .4, 0, Math.PI * 2);
-		}
-		Object.keys(paths).forEach((v) => {
-			ctx.fillStyle = getHeatColor(Number(v));
-			ctx.fill(paths[v]);
-		});
+		ctx.beginPath();
+		ctx.moveTo(0, 0);
+		ctx.arc(0, 0, range, -fov / 2, fov / 2);
+		ctx.closePath();
+		ctx.fill();
 		ctx.restore();
-	}
-	{
-		const now = Date.now();
-		const range = Math.max(w, d) * 6;
-		const fov = Math.PI / 2;
-		if (persons.length < MAX_PERSONS && now - lastSpawnTime > SPAWN_INTERVAL) {
-			lastSpawnTime = now;
-			persons.push({
-				startTime: now,
-				duration: 2e3 + Math.random() * 1e3,
-				direction: Math.random() > .5 ? "far-to-near" : "near-to-far",
-				angle: (Math.random() - .5) * fov * .8
-			});
+		if ((heatmapMatrix === null || heatmapMatrix === void 0 ? void 0 : heatmapMatrix.length) && ((_heatmapMatrix$ = heatmapMatrix[0]) === null || _heatmapMatrix$ === void 0 ? void 0 : _heatmapMatrix$.length)) {
+			const rows = heatmapMatrix.length;
+			const cols = heatmapMatrix[0].length;
+			const maxValue = Math.max(...heatmapMatrix.flat());
+			if (maxValue > 0) {
+				ctx.save();
+				ctx.globalCompositeOperation = "lighter";
+				ctx.filter = "blur(10px)";
+				const radius = range / rows * 1.8;
+				for (let y = 0; y < rows; y++) for (let x = 0; x < cols; x++) {
+					const value = heatmapMatrix[y][x];
+					if (!value || value <= 0) continue;
+					const intensity = Math.min(value / maxValue, 1);
+					const angle = -fov / 2 + (cols === 1 ? .5 : x / (cols - 1)) * fov;
+					const r = (y + .5) / rows * range;
+					const px = Math.cos(angle) * r;
+					const py = Math.sin(angle) * r;
+					const gradient = ctx.createRadialGradient(px, py, 0, px, py, radius);
+					const alpha = .12 + intensity * .75;
+					gradient.addColorStop(0, getHeatmapColor(intensity, alpha));
+					gradient.addColorStop(.45, getHeatmapColor(intensity, alpha * .45));
+					gradient.addColorStop(1, getHeatmapColor(intensity, 0));
+					ctx.fillStyle = gradient;
+					ctx.beginPath();
+					ctx.arc(px, py, radius, 0, Math.PI * 2);
+					ctx.fill();
+				}
+				ctx.restore();
+			}
 		}
-		persons = persons.filter((p) => {
-			let t = (now - p.startTime) / p.duration;
-			if (t >= 1) return false;
-			t = Math.max(0, Math.min(t, 1));
-			let r;
-			if (p.direction === "far-to-near") r = range * (.9 - t * .8);
-			else r = range * (.1 + t * .8);
-			const x = Math.cos(p.angle) * r;
-			const y = Math.sin(p.angle) * r;
-			ctx.save();
-			ctx.translate(x, y);
-			ctx.globalCompositeOperation = "lighter";
-			const scale = .5 + (1 - r / range);
-			ctx.scale(scale, scale);
-			ctx.globalAlpha = 1 - t;
-			if (!personGlow) {
-				personGlow = ctx.createRadialGradient(0, 0, 0, 0, 0, 20);
-				personGlow.addColorStop(0, "rgba(255,0,0,0.8)");
-				personGlow.addColorStop(1, "rgba(255,0,0,0)");
+		if (hasPerson) {
+			const now = Date.now();
+			if (persons.length < MAX_PERSONS && now - lastSpawnTime > SPAWN_INTERVAL) {
+				lastSpawnTime = now;
+				persons.push({
+					startTime: now,
+					duration: 2e3 + Math.random() * 1e3,
+					direction: Math.random() > .5 ? "far-to-near" : "near-to-far",
+					angle: (Math.random() - .5) * fov * .8
+				});
 			}
-			ctx.fillStyle = personGlow;
-			ctx.beginPath();
-			ctx.arc(0, 0, 20, 0, Math.PI * 2);
-			ctx.fill();
-			ctx.beginPath();
-			ctx.arc(0, 0, 6, 0, Math.PI * 2);
-			ctx.fillStyle = "red";
-			ctx.fill();
-			ctx.restore();
-			return true;
-		});
-	}
+			persons = persons.filter((p) => {
+				let t = (now - p.startTime) / p.duration;
+				if (t >= 1) return false;
+				t = Math.max(0, Math.min(t, 1));
+				let r;
+				if (p.direction === "far-to-near") r = range * (.9 - t * .8);
+				else r = range * (.1 + t * .8);
+				const x = Math.cos(p.angle) * r;
+				const y = Math.sin(p.angle) * r;
+				ctx.save();
+				ctx.translate(x, y);
+				ctx.globalCompositeOperation = "lighter";
+				const scale = .5 + (1 - r / range);
+				ctx.scale(scale, scale);
+				ctx.globalAlpha = 1 - t;
+				const glow = ctx.createRadialGradient(0, 0, 0, 0, 0, 20);
+				glow.addColorStop(0, "rgba(255,0,0,0.8)");
+				glow.addColorStop(1, "rgba(255,0,0,0)");
+				ctx.fillStyle = glow;
+				ctx.beginPath();
+				ctx.arc(0, 0, 20, 0, Math.PI * 2);
+				ctx.fill();
+				ctx.beginPath();
+				ctx.arc(0, 0, 6, 0, Math.PI * 2);
+				ctx.fillStyle = "red";
+				ctx.fill();
+				ctx.restore();
+				return true;
+			});
+		} else persons = [];
+	} else persons = [];
 	ctx.fillStyle = color + "40";
 	ctx.strokeStyle = color;
 	ctx.lineWidth = 1;
@@ -61879,12 +61885,12 @@ var iconDrawers = {
 * @param w - pixel width (catalogWidth * zoom)
 * @param d - pixel depth (catalogDepth * zoom)
 */
-function drawFurnitureIcon(ctx, catalogId, w, d, color, strokeColor, heatmapMatrix, hasPerson = false) {
+function drawFurnitureIcon(ctx, catalogId, w, d, color, strokeColor, heatmapMatrix, hasPerson = false, showHeatmap = false) {
 	ctx.fillStyle = color + "60";
 	ctx.strokeStyle = strokeColor;
 	ctx.lineWidth = 1;
 	const drawer = iconDrawers[catalogId];
-	if (drawer) drawer(ctx, w, d, color, heatmapMatrix, hasPerson);
+	if (drawer) drawer(ctx, w, d, color, heatmapMatrix, hasPerson, showHeatmap);
 	else {
 		roundRect(ctx, -w / 2, -d / 2, w, d, 2);
 		ctx.fill();
@@ -63276,7 +63282,7 @@ function drawFurnitureItem(cs, item, selected) {
 	const itemColor = (_item$color = item.color) !== null && _item$color !== void 0 ? _item$color : cat.color;
 	const strokeColor = selected ? "#3b82f6" : itemColor;
 	ctx.lineWidth = selected ? 2 : 1;
-	drawFurnitureIcon(ctx, item.catalogId, w, d, itemColor, strokeColor, item.heatmapMatrix);
+	drawFurnitureIcon(ctx, item.catalogId, w, d, itemColor, strokeColor, item.heatmapMatrix, item.hasPerson, item.showHeatmap);
 	const fontSize = Math.max(8, Math.min(12, Math.min(w, d) * .2));
 	if (Math.min(w, d) > 20) {
 		ctx.fillStyle = "#374151";
@@ -64371,7 +64377,7 @@ var root_20 = /* @__PURE__ */ from_html(`<div class="absolute top-2 left-1/2 -tr
 var root_21 = /* @__PURE__ */ from_html(`<div class="absolute top-2 left-1/2 -translate-x-1/2 bg-emerald-600 text-white px-3 py-1 rounded-full text-xs shadow">Click to place text label · Esc to cancel</div>`);
 var root_22 = /* @__PURE__ */ from_html(`<div class="absolute top-2 left-1/2 -translate-x-1/2 bg-indigo-600 text-white px-3 py-1 rounded-full text-xs shadow"> </div>`);
 var root_1$5 = /* @__PURE__ */ from_html(`<!> <!> <!> <!> <div class="absolute bottom-2 right-2 bg-white/80 rounded px-2 py-1 text-xs text-gray-500 flex gap-3"><!> <!> <!> <span> </span> <button class="hover:text-gray-700" title="Zoom to Fit (F)">⊞ Fit</button> <button class="hover:text-gray-700" title="Toggle Grid (G)"> </button> <button class="hover:text-gray-700" title="Toggle Snap to Grid (S)"> </button> <button class="hover:text-gray-700" title="Toggle Furniture"> </button> <button class="hover:text-gray-700" title="Layer Visibility">🗂 Layers</button> <button class="hover:text-gray-700" title="Toggle Rulers"> </button> <button class="hover:text-gray-700" title="Toggle Mini-map"> </button></div> <!> <!> <!> <!> <!> <!> <!> <div class="absolute bottom-3 left-3 z-20 flex items-center gap-1 bg-white rounded-lg shadow-lg border border-gray-200 px-1 py-0.5"><button class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-600 hover:text-gray-800 font-bold text-lg" title="Zoom Out (−)" aria-label="Zoom out">−</button> <button class="min-w-[3.5rem] h-7 flex items-center justify-center rounded hover:bg-gray-100 text-xs font-medium text-gray-600 hover:text-gray-800 tabular-nums" title="Reset to 100%" aria-label="Zoom to 100%"> </button> <button class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-600 hover:text-gray-800 font-bold text-lg" title="Zoom In (+)" aria-label="Zoom in">+</button> <div class="w-px h-5 bg-gray-200"></div> <button class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-500 hover:text-gray-700 text-sm" title="Zoom to Fit (F)" aria-label="Zoom to fit">⊞</button></div> <!>`, 1);
-var root = /* @__PURE__ */ from_html(`<div class="w-full h-full relative overflow-hidden" role="application"><canvas aria-label="Floor plan editor canvas"></canvas> <!></div>`);
+var root = /* @__PURE__ */ from_html(`<div class="w-full h-full relative overflow-hidden" role="application"><div><canvas aria-label="Floor plan editor canvas"></canvas></div> <!></div>`);
 function FloorPlanCanvas($$anchor, $$props) {
 	push($$props, true);
 	const $panMode = () => store_get(panMode, "$panMode", $$stores);
@@ -64384,22 +64390,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 	let camX = /* @__PURE__ */ state(0);
 	let camY = /* @__PURE__ */ state(0);
 	let zoom = /* @__PURE__ */ state(1);
-	function createRandomMatrix(size = 20, clusterCount = 1) {
-		const matrix = Array.from({ length: size }, () => Array(size).fill(0));
-		for (let c = 0; c < clusterCount; c++) {
-			const cx = Math.random() * size;
-			const cy = Math.random() * size;
-			const sigma = size * .15;
-			for (let y = 0; y < size; y++) for (let x = 0; x < size; x++) {
-				const dx = x - cx;
-				const dy = y - cy;
-				const value = Math.exp(-(dx * dx + dy * dy) / (2 * sigma * sigma));
-				const level = Math.floor(value * 4);
-				matrix[y][x] = Math.max(matrix[y][x], level);
-			}
-		}
-		return matrix;
-	}
+	let needsFitToCanvas = true;
 	let canvasDirty = true;
 	function markDirty() {
 		canvasDirty = true;
@@ -64822,9 +64813,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 			canvas.height = get(height);
 		}
 		markDirty();
-		if ($$props.viewOnly) requestAnimationFrame(() => {
-			zoomToFit();
-		});
+		needsFitToCanvas = true;
 	}
 	function drawGrid() {
 		if (!ctx || !get(showGrid)) return;
@@ -65250,195 +65239,6 @@ function FloorPlanCanvas($$anchor, $$props) {
 	function drawColumn$1(col, selected) {
 		drawColumn(getCS(), col, selected);
 	}
-	function rulerLabel(worldCm, tickStep, isImperial) {
-		if (isImperial) {
-			const inches = worldCm / 2.54;
-			const ft = inches / 12;
-			if (tickStep / 2.54 >= 12) return `${ft % 1 === 0 ? ft.toFixed(0) : ft.toFixed(1)}'`;
-			return `${Math.round(inches)}"`;
-		}
-		if (tickStep >= 100) {
-			const m = worldCm / 100;
-			return `${worldCm % 100 === 0 ? m.toFixed(0) : m.toFixed(1)}m`;
-		}
-		return `${Math.round(worldCm)}`;
-	}
-	function drawRulers() {
-		if (!ctx || !get(showRulers) || $$props.viewOnly) return;
-		const R = RULER_SIZE;
-		const fontSize = 9;
-		const isImperial = get(dimSettings).units === "imperial";
-		ctx.save();
-		let tickStep;
-		let minorDiv;
-		let minorStep;
-		if (isImperial) {
-			const inchCm = 2.54;
-			const niceStepsCm = [
-				1,
-				2,
-				6,
-				12,
-				24,
-				60,
-				120,
-				240,
-				600,
-				1200,
-				2400
-			].map((i) => i * inchCm);
-			tickStep = niceStepsCm[niceStepsCm.length - 1];
-			for (const s of niceStepsCm) if (s * get(zoom) >= 40) {
-				tickStep = s;
-				break;
-			}
-			const tickInches = tickStep / inchCm;
-			minorDiv = tickInches >= 12 ? 6 : tickInches >= 6 ? 3 : 2;
-			minorStep = tickStep / minorDiv;
-		} else {
-			const niceSteps = [
-				1,
-				2,
-				5,
-				10,
-				20,
-				50,
-				100,
-				200,
-				500,
-				1e3,
-				2e3,
-				5e3
-			];
-			tickStep = niceSteps[niceSteps.length - 1];
-			for (const s of niceSteps) if (s * get(zoom) >= 40) {
-				tickStep = s;
-				break;
-			}
-			minorDiv = tickStep >= 100 ? 5 : tickStep >= 10 ? 5 : 2;
-			minorStep = tickStep / minorDiv;
-		}
-		ctx.fillStyle = "#f1f3f5";
-		ctx.fillRect(R, 0, get(width) - R, R);
-		ctx.strokeStyle = "#d1d5db";
-		ctx.lineWidth = 1;
-		ctx.beginPath();
-		ctx.moveTo(R, R);
-		ctx.lineTo(get(width), R);
-		ctx.stroke();
-		const worldLeft = screenToWorld(R, 0).x;
-		const worldRight = screenToWorld(get(width), 0).x;
-		const startTick = Math.floor(worldLeft / minorStep) * minorStep;
-		ctx.fillStyle = "#6b7280";
-		ctx.font = `${fontSize}px sans-serif`;
-		ctx.textAlign = "center";
-		ctx.textBaseline = "top";
-		for (let wx = startTick; wx <= worldRight; wx += minorStep) {
-			const sx = worldToScreen(wx, 0).x;
-			if (sx < R) continue;
-			const isMajor = Math.abs(wx % tickStep) < .01;
-			const isMid = !isMajor && Math.abs(wx % (tickStep / 2)) < .01 && minorDiv >= 4;
-			const tickH = isMajor ? R * .7 : isMid ? R * .45 : R * .25;
-			const isOrigin = Math.abs(wx) < .01;
-			ctx.strokeStyle = isOrigin ? "#ef4444" : isMajor ? "#9ca3af" : "#d1d5db";
-			ctx.lineWidth = isOrigin ? 1.5 : isMajor ? 1 : .5;
-			ctx.beginPath();
-			ctx.moveTo(sx, R);
-			ctx.lineTo(sx, R - tickH);
-			ctx.stroke();
-			if (isMajor) {
-				ctx.fillStyle = isOrigin ? "#ef4444" : "#6b7280";
-				const label = isOrigin ? "0" : rulerLabel(wx, tickStep, isImperial);
-				ctx.fillText(label, sx, 2);
-				ctx.fillStyle = "#6b7280";
-			}
-		}
-		ctx.fillStyle = "#f1f3f5";
-		ctx.fillRect(0, R, R, get(height) - R);
-		ctx.strokeStyle = "#d1d5db";
-		ctx.lineWidth = 1;
-		ctx.beginPath();
-		ctx.moveTo(R, R);
-		ctx.lineTo(R, get(height));
-		ctx.stroke();
-		const worldTop = screenToWorld(0, R).y;
-		const worldBottom = screenToWorld(0, get(height)).y;
-		const startTickY = Math.floor(worldTop / minorStep) * minorStep;
-		ctx.textAlign = "right";
-		ctx.textBaseline = "middle";
-		for (let wy = startTickY; wy <= worldBottom; wy += minorStep) {
-			const sy = worldToScreen(0, wy).y;
-			if (sy < R) continue;
-			const isMajor = Math.abs(wy % tickStep) < .01;
-			const isMid = !isMajor && Math.abs(wy % (tickStep / 2)) < .01 && minorDiv >= 4;
-			const tickH = isMajor ? R * .7 : isMid ? R * .45 : R * .25;
-			const isOrigin = Math.abs(wy) < .01;
-			ctx.strokeStyle = isOrigin ? "#ef4444" : isMajor ? "#9ca3af" : "#d1d5db";
-			ctx.lineWidth = isOrigin ? 1.5 : isMajor ? 1 : .5;
-			ctx.beginPath();
-			ctx.moveTo(R, sy);
-			ctx.lineTo(R - tickH, sy);
-			ctx.stroke();
-			if (isMajor) {
-				const label = isOrigin ? "0" : rulerLabel(wy, tickStep, isImperial);
-				ctx.save();
-				ctx.translate(R - 3, sy);
-				ctx.rotate(-Math.PI / 2);
-				ctx.textAlign = "center";
-				ctx.textBaseline = "bottom";
-				ctx.fillStyle = isOrigin ? "#ef4444" : "#6b7280";
-				ctx.font = `${fontSize}px sans-serif`;
-				ctx.fillText(label, 0, 0);
-				ctx.restore();
-			}
-		}
-		ctx.fillStyle = "#e5e7eb";
-		ctx.fillRect(0, 0, R, R);
-		ctx.strokeStyle = "#d1d5db";
-		ctx.lineWidth = 1;
-		ctx.strokeRect(0, 0, R, R);
-		ctx.strokeStyle = "#ef4444";
-		ctx.lineWidth = 1;
-		const cx = R / 2, cy = R / 2;
-		ctx.beginPath();
-		ctx.moveTo(cx - 4, cy);
-		ctx.lineTo(cx + 4, cy);
-		ctx.moveTo(cx, cy - 4);
-		ctx.lineTo(cx, cy + 4);
-		ctx.stroke();
-		const mScreen = worldToScreen(get(mousePos).x, get(mousePos).y);
-		if (mScreen.x > R) {
-			ctx.strokeStyle = "rgba(59,130,246,0.5)";
-			ctx.lineWidth = 1;
-			ctx.beginPath();
-			ctx.moveTo(mScreen.x, 0);
-			ctx.lineTo(mScreen.x, R);
-			ctx.stroke();
-			ctx.fillStyle = "#3b82f6";
-			ctx.beginPath();
-			ctx.moveTo(mScreen.x, R);
-			ctx.lineTo(mScreen.x - 3, R - 6);
-			ctx.lineTo(mScreen.x + 3, R - 6);
-			ctx.closePath();
-			ctx.fill();
-		}
-		if (mScreen.y > R) {
-			ctx.strokeStyle = "rgba(59,130,246,0.5)";
-			ctx.lineWidth = 1;
-			ctx.beginPath();
-			ctx.moveTo(0, mScreen.y);
-			ctx.lineTo(R, mScreen.y);
-			ctx.stroke();
-			ctx.fillStyle = "#3b82f6";
-			ctx.beginPath();
-			ctx.moveTo(R, mScreen.y);
-			ctx.lineTo(R - 6, mScreen.y - 3);
-			ctx.lineTo(R - 6, mScreen.y + 3);
-			ctx.closePath();
-			ctx.fill();
-		}
-		ctx.restore();
-	}
 	function drawBackgroundImage() {
 		var _$$get2;
 		if (!get(bgImage) || !((_$$get2 = get(currentFloor)) === null || _$$get2 === void 0 ? void 0 : _$$get2.backgroundImage)) return;
@@ -65453,6 +65253,40 @@ function FloorPlanCanvas($$anchor, $$props) {
 		ctx.drawImage(get(bgImage), -sw / 2, -sh / 2, sw, sh);
 		ctx.restore();
 	}
+	function getFloorWallBounds(floor = get(currentFloor)) {
+		var _floor$walls;
+		if (!(floor === null || floor === void 0 || (_floor$walls = floor.walls) === null || _floor$walls === void 0 ? void 0 : _floor$walls.length)) return null;
+		let minX = Infinity;
+		let maxX = -Infinity;
+		let minY = Infinity;
+		let maxY = -Infinity;
+		for (const wall of floor.walls) {
+			minX = Math.min(minX, wall.start.x, wall.end.x);
+			maxX = Math.max(maxX, wall.start.x, wall.end.x);
+			minY = Math.min(minY, wall.start.y, wall.end.y);
+			maxY = Math.max(maxY, wall.start.y, wall.end.y);
+			if (wall.curvePoint) {
+				minX = Math.min(minX, wall.curvePoint.x);
+				maxX = Math.max(maxX, wall.curvePoint.x);
+				minY = Math.min(minY, wall.curvePoint.y);
+				maxY = Math.max(maxY, wall.curvePoint.y);
+			}
+		}
+		const width = maxX - minX;
+		const height = maxY - minY;
+		if (width <= 0 || height <= 0) return null;
+		return {
+			minX,
+			minY,
+			maxX,
+			maxY,
+			width,
+			height
+		};
+	}
+	function getCanvasFrameStyle() {
+		return "width: 100%; height: 100%";
+	}
 	function draw() {
 		if (!ctx) return;
 		if (!canvasDirty) {
@@ -65462,7 +65296,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 		canvasDirty = false;
 		ctx.clearRect(0, 0, get(width), get(height));
 		ctx.fillStyle = "#f8f9fa";
-		ctx.fillRect(0, 0, get(width), get(height));
+		ctx.fillRect(0, 0, $$props.floorMaxWidth, $$props.floorMaxHeight);
 		drawGrid();
 		if (!$$props.viewOnly && get(layerVis).guides) drawGuides$1();
 		drawBackgroundImage();
@@ -65471,6 +65305,10 @@ function FloorPlanCanvas($$anchor, $$props) {
 			requestAnimationFrame(draw);
 			return;
 		}
+		if (needsFitToCanvas) {
+			zoomToFit();
+			needsFitToCanvas = false;
+		}
 		if (get(wallStart) || get(draggingFurnitureId) || get(draggingDoorId) || get(draggingWindowId) || get(draggingStairId) || get(draggingColumnId) || get(draggingWallEndpoint) || get(draggingWallParallel) || get(draggingCurveHandle) || get(draggingHandle) || get(draggingMultiSelect) || get(draggingRoomId) || get(draggingRoomLabelId) || get(draggingTextAnnotationId) || get(draggingGuideId) || get(measuring) || get(annotating) || get(currentPlacingId) || get(isPlacingStair) || get(isPlacingColumn) || get(marqueeStart) || get(isPanning)) canvasDirty = true;
 		updateDetectedRooms();
 		const selId = get(currentSelectedId);
@@ -66101,7 +65939,6 @@ function FloorPlanCanvas($$anchor, $$props) {
 			ctx.setLineDash([]);
 			ctx.restore();
 		}
-		drawRulers();
 		drawMinimap$1();
 		requestAnimationFrame(draw);
 	}
@@ -66116,14 +65953,10 @@ function FloorPlanCanvas($$anchor, $$props) {
 		const unsub1 = activeFloor.subscribe((f) => {
 			set(currentFloor, f, true);
 			markDirty();
-			if ($$props.viewOnly && f) requestAnimationFrame(() => {
-				zoomToFit();
-			});
+			if ($$props.viewOnly && f) needsFitToCanvas = true;
 			if (!initialFitDone && f && f.walls.length > 0) {
 				initialFitDone = true;
-				requestAnimationFrame(() => {
-					zoomToFit();
-				});
+				needsFitToCanvas = true;
 			}
 		});
 		const unsub2 = selectedElementId.subscribe((id) => {
@@ -66257,151 +66090,1206 @@ function FloorPlanCanvas($$anchor, $$props) {
 		};
 	});
 	user_effect(() => {
+		if (!get(currentFloor)) return;
 		setInterval(() => {
 			markDirty();
-			const heatmapMatrix = createRandomMatrix(20);
-			set(currentFloor, {
-				...get(currentFloor),
-				furniture: get(currentFloor).furniture.map((item) => {
-					if (item.catalogId === "camera") return {
-						...item,
-						heatmapMatrix
-					};
-					return item;
-				})
-			}, true);
-			console.log("currentFloor", get(currentFloor));
-		}, 5e3);
-	});
-	/** Compute world bounding box of all elements */
-	function getWorldBBox() {
-		if (!get(currentFloor)) return null;
-		let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
-		let found = false;
-		function expand(x, y) {
-			if (x < minX) minX = x;
-			if (x > maxX) maxX = x;
-			if (y < minY) minY = y;
-			if (y > maxY) maxY = y;
-			found = true;
-		}
-		for (const w of get(currentFloor).walls) {
-			expand(w.start.x, w.start.y);
-			expand(w.end.x, w.end.y);
-			if (w.curvePoint) expand(w.curvePoint.x, w.curvePoint.y);
-		}
-		for (const fi of get(currentFloor).furniture) {
-			var _fi$width, _fi$depth;
-			const cat = getCatalogItem(fi.catalogId);
-			if (!cat) continue;
-			const r = Math.hypot(((_fi$width = fi.width) !== null && _fi$width !== void 0 ? _fi$width : cat.width) / 2, ((_fi$depth = fi.depth) !== null && _fi$depth !== void 0 ? _fi$depth : cat.depth) / 2);
-			expand(fi.position.x - r, fi.position.y - r);
-			expand(fi.position.x + r, fi.position.y + r);
-		}
-		if (get(currentFloor).stairs) for (const st of get(currentFloor).stairs) {
-			expand(st.position.x - st.width / 2, st.position.y - st.depth / 2);
-			expand(st.position.x + st.width / 2, st.position.y + st.depth / 2);
-		}
-		if (get(currentFloor).columns) for (const col of get(currentFloor).columns) {
-			const r = col.diameter / 2;
-			expand(col.position.x - r, col.position.y - r);
-			expand(col.position.x + r, col.position.y + r);
-		}
-		if (!found) return null;
-		const pad = 50;
-		return {
-			minX: minX - pad,
-			minY: minY - pad,
-			maxX: maxX + pad,
-			maxY: maxY + pad
-		};
-	}
-	function drawMinimap$1() {
-		if (!get(showMinimap) || !minimapCanvas || !get(currentFloor)) return;
-		drawMinimap(getCS(), minimapCanvas, get(currentFloor), getWorldBBox);
-	}
-	function onMinimapClick(e) {
-		if (!minimapCanvas || !get(currentFloor)) return;
-		const rect = minimapCanvas.getBoundingClientRect();
-		const mx = e.clientX - rect.left;
-		const my = e.clientY - rect.top;
-		const mw = minimapCanvas.width;
-		const mh = minimapCanvas.height;
-		const bbox = getWorldBBox();
-		if (!bbox) return;
-		const bw = bbox.maxX - bbox.minX;
-		const bh = bbox.maxY - bbox.minY;
-		if (bw < 1 || bh < 1) return;
-		const scale = Math.min((mw - 8) / bw, (mh - 8) / bh);
-		const ox = (mw - bw * scale) / 2;
-		const oy = (mh - bh * scale) / 2;
-		set(camX, bbox.minX + (mx - ox) / scale);
-		set(camY, bbox.minY + (my - oy) / scale);
-	}
-	function zoomToFit() {
-		if (!get(currentFloor) || get(currentFloor).walls.length === 0 && get(currentFloor).furniture.length === 0) {
-			set(camX, 0);
-			set(camY, 0);
-			set(zoom, 1);
-			return;
-		}
-		let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
-		function expand(x, y) {
-			if (x < minX) minX = x;
-			if (x > maxX) maxX = x;
-			if (y < minY) minY = y;
-			if (y > maxY) maxY = y;
-		}
-		for (const w of get(currentFloor).walls) {
-			expand(w.start.x, w.start.y);
-			expand(w.end.x, w.end.y);
-			if (w.curvePoint) expand(w.curvePoint.x, w.curvePoint.y);
-		}
-		for (const fi of get(currentFloor).furniture) {
-			var _fi$width2, _fi$depth2;
-			const cat = getCatalogItem(fi.catalogId);
-			if (!cat) continue;
-			const hw = ((_fi$width2 = fi.width) !== null && _fi$width2 !== void 0 ? _fi$width2 : cat.width) / 2;
-			const hd = ((_fi$depth2 = fi.depth) !== null && _fi$depth2 !== void 0 ? _fi$depth2 : cat.depth) / 2;
-			const r = Math.hypot(hw, hd);
-			expand(fi.position.x - r, fi.position.y - r);
-			expand(fi.position.x + r, fi.position.y + r);
-		}
-		for (const d of get(currentFloor).doors) {
-			const w = get(currentFloor).walls.find((wl) => wl.id === d.wallId);
-			if (w) {
-				const pt = wallPointAt(w, d.position);
-				expand(pt.x, pt.y);
-			}
-		}
-		for (const win of get(currentFloor).windows) {
-			const w = get(currentFloor).walls.find((wl) => wl.id === win.wallId);
-			if (w) {
-				const pt = wallPointAt(w, win.position);
-				expand(pt.x, pt.y);
-			}
-		}
-		if (get(currentFloor).stairs) for (const st of get(currentFloor).stairs) {
-			expand(st.position.x - st.width / 2, st.position.y - st.depth / 2);
-			expand(st.position.x + st.width / 2, st.position.y + st.depth / 2);
-		}
-		if (get(currentFloor).columns) for (const col of get(currentFloor).columns) {
-			const r = col.diameter / 2;
-			expand(col.position.x - r, col.position.y - r);
-			expand(col.position.x + r, col.position.y + r);
+			const heatmapMatrix = [
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					.3159328774204405,
+					1.4656853131421907,
+					2.2380465832282233,
+					1.4656853131421907,
+					.3159328774204405,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					1.7489495878144512,
+					7.010252524548629,
+					10.597011258282999,
+					7.010252524548629,
+					1.7489495878144512,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					3.3289241086779624,
+					13.46177725998435,
+					20.235236701064228,
+					13.590541779525635,
+					3.4380594435639265,
+					.00915612667564332,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					3.2148496888753932,
+					13.320879325153319,
+					21.57578250930066,
+					16.342286624307704,
+					5.569414220457003,
+					.6079740421039851,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					1.471089931923573,
+					8.2191207324426,
+					17.838951126796992,
+					19.032501579269645,
+					10.168729572784246,
+					2.183833478003975,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					.30224323366570666,
+					4.469359740497559,
+					14.670431219686673,
+					20.333387296969498,
+					13.054592947321611,
+					3.1902302512972374,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					.8712958885928778,
+					4.101109796621668,
+					7.049595450791787,
+					6.013717307819157,
+					2.4950259463993585,
+					.44436828921160365,
+					2.3964385376201838,
+					8.995383597734405,
+					13.185675552510842,
+					8.716708041551543,
+					2.1623510704265803,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					3.62130425013895,
+					16.246445581668944,
+					28.185625524032776,
+					24.0135529219635,
+					9.834207494427838,
+					1.5755845092412992,
+					.7273170478700652,
+					2.61589141718046,
+					3.749571783336128,
+					2.426392038976114,
+					.5824057586549773,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					.5421635625869271,
+					2.2065200861983407,
+					3.342547381956746,
+					2.2065200861983407,
+					.5421635625869271,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					5.549901318362378,
+					24.32853931235515,
+					42.36138150541803,
+					35.94102328030143,
+					14.818839539693103,
+					2.3194161353148814,
+					.05101033364693949,
+					.16491621404182252,
+					.1777607033571859,
+					.12032812505256472,
+					.017569266904996134,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					2.9576258950346093,
+					11.84562175292669,
+					17.787556061594508,
+					11.84562175292669,
+					2.9576258950346093,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					3.62130425013895,
+					16.246445581668944,
+					28.185625524032776,
+					24.0135529219635,
+					9.834207494427838,
+					1.5309964202520414,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					6.348491293238841,
+					25.309150516517526,
+					37.96250650263207,
+					25.309150516517526,
+					6.348491293238841,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					.32082320386030533,
+					1.2199857338206974,
+					1.8460462046420483,
+					2.1325554284523793,
+					4.379383234527166,
+					7.049595450791787,
+					6.013717307819157,
+					2.4950259463993585,
+					.3886331779750314,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					6.723278406098134,
+					26.889274492038524,
+					40.34693760289919,
+					26.889274492038524,
+					6.723278406098134,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					2.2804956914871695,
+					8.96059158937199,
+					13.408676109914708,
+					8.96059158937199,
+					2.2804956914871695,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					3.610311889272976,
+					14.18903058720386,
+					21.35656319734618,
+					15.52310871608614,
+					8.830853849884093,
+					7.821632516665724
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					5.861518314504249,
+					23.379493778146163,
+					35.09863018520233,
+					23.379493778146163,
+					5.861518314504249,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					.7400359281404749,
+					3.0082191313345596,
+					4.511243556428142,
+					8.25225708991524,
+					21.61113659978852,
+					31.371979438413785
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					7.243115248642567,
+					28.906850697487346,
+					43.39219038599119,
+					28.906850697487346,
+					7.243115248642567,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					7.821632516665724,
+					31.371979438413785,
+					46.96473075085739
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					4.32482477999109,
+					17.186780480887943,
+					25.8249366255257,
+					17.186780480887943,
+					4.32482477999109,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					5.226011941752098,
+					20.827286571029607,
+					31.371979438413785
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					1.0111655316014927,
+					3.9864631299897444,
+					5.981469083020068,
+					3.9864631299897444,
+					1.0111655316014927,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					1.386066255607005,
+					5.226011941752098,
+					7.821632516665724
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					.05458070912699062,
+					.15528137571229708,
+					.15187574183847025,
+					.06974200470241036,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					.05458070912699062,
+					.2755754209878876,
+					.5707063337010662,
+					.5838714443792508,
+					.31029220828859827,
+					.06974200470241036,
+					0,
+					0,
+					0,
+					0,
+					.02805561155784787,
+					.8189018232615914,
+					2.5324966794862513,
+					3.4377154290206784,
+					2.1308395665461624,
+					.4650594240098488,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					.08553937100988673,
+					.41228986725093814,
+					.8529789776313961,
+					.8882858218170526,
+					.46357739910366025,
+					.0972950327114796,
+					0,
+					0,
+					0,
+					0,
+					.3532485267308754,
+					3.499619222062779,
+					10.427637306724009,
+					13.795863309244472,
+					8.56406987933662,
+					2.084587966363261,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					.05458070912699062,
+					.2755754209878876,
+					.5707063337010662,
+					.5838714443792508,
+					.31029220828859827,
+					.06974200470241036,
+					0,
+					0,
+					0,
+					.049318035756509136,
+					1.0607933641418696,
+					6.758563725967109,
+					17.660755342385897,
+					21.973928874871856,
+					13.201476985075344,
+					3.101022144002237,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					.05458070912699062,
+					.15528137571229708,
+					.15187574183847025,
+					.06974200470241036,
+					0,
+					0,
+					0,
+					.08786109582645688,
+					.7046356886390628,
+					3.0107989977663894,
+					9.51274060076616,
+					17.749511390220455,
+					18.26171939391789,
+					9.630263523792657,
+					2.084587966363261,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					1.7382367811803743,
+					6.78625235876699,
+					10.215056932817292,
+					7.28439193353878,
+					3.243933616660711,
+					3.1636969367350174,
+					6.726890242944553,
+					11.793933219797037,
+					14.018480108478876,
+					9.836469200652415,
+					3.565238303086889,
+					.4650594240098488,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					6.6983617356443,
+					26.99436500222664,
+					41.353519873356255,
+					29.282163948524662,
+					11.3741195154941,
+					7.413346519620399,
+					10.283468040894338,
+					11.90128859290927,
+					9.570529949946668,
+					4.526681935693334,
+					.8914940911015187,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0
+				],
+				[
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					10.047028886051624,
+					40.69152763227778,
+					61.87097958316954,
+					44.034938408633856,
+					16.762310030892145,
+					9.760527430556891,
+					11.69769115898553,
+					11.007073791008297,
+					7.176097387403954,
+					2.7361326724525514,
+					.505476251361877,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0,
+					0
+				]
+			];
+			set(currentFloor, {
+				...get(currentFloor),
+				furniture: get(currentFloor).furniture.map((item) => {
+					if (item.catalogId === "camera") return {
+						...item,
+						heatmapMatrix
+					};
+					return item;
+				})
+			}, true);
+		}, 5e3);
+	});
+	/** Compute world bounding box of all elements */
+	function getWorldBBox() {
+		if (!get(currentFloor)) return null;
+		let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+		let found = false;
+		function expand(x, y) {
+			if (x < minX) minX = x;
+			if (x > maxX) maxX = x;
+			if (y < minY) minY = y;
+			if (y > maxY) maxY = y;
+			found = true;
+		}
+		for (const w of get(currentFloor).walls) {
+			expand(w.start.x, w.start.y);
+			expand(w.end.x, w.end.y);
+			if (w.curvePoint) expand(w.curvePoint.x, w.curvePoint.y);
+		}
+		for (const fi of get(currentFloor).furniture) {
+			var _fi$width, _fi$depth;
+			const cat = getCatalogItem(fi.catalogId);
+			if (!cat) continue;
+			const r = Math.hypot(((_fi$width = fi.width) !== null && _fi$width !== void 0 ? _fi$width : cat.width) / 2, ((_fi$depth = fi.depth) !== null && _fi$depth !== void 0 ? _fi$depth : cat.depth) / 2);
+			expand(fi.position.x - r, fi.position.y - r);
+			expand(fi.position.x + r, fi.position.y + r);
+		}
+		if (get(currentFloor).stairs) for (const st of get(currentFloor).stairs) {
+			expand(st.position.x - st.width / 2, st.position.y - st.depth / 2);
+			expand(st.position.x + st.width / 2, st.position.y + st.depth / 2);
+		}
+		if (get(currentFloor).columns) for (const col of get(currentFloor).columns) {
+			const r = col.diameter / 2;
+			expand(col.position.x - r, col.position.y - r);
+			expand(col.position.x + r, col.position.y + r);
+		}
+		if (!found) return null;
+		const pad = 50;
+		return {
+			minX: minX - pad,
+			minY: minY - pad,
+			maxX: maxX + pad,
+			maxY: maxY + pad
+		};
+	}
+	function drawMinimap$1() {
+		if (!get(showMinimap) || !minimapCanvas || !get(currentFloor)) return;
+		drawMinimap(getCS(), minimapCanvas, get(currentFloor), getWorldBBox);
+	}
+	function onMinimapClick(e) {
+		if (!minimapCanvas || !get(currentFloor)) return;
+		const rect = minimapCanvas.getBoundingClientRect();
+		const mx = e.clientX - rect.left;
+		const my = e.clientY - rect.top;
+		const mw = minimapCanvas.width;
+		const mh = minimapCanvas.height;
+		const bbox = getWorldBBox();
+		if (!bbox) return;
+		const bw = bbox.maxX - bbox.minX;
+		const bh = bbox.maxY - bbox.minY;
+		if (bw < 1 || bh < 1) return;
+		const scale = Math.min((mw - 8) / bw, (mh - 8) / bh);
+		const ox = (mw - bw * scale) / 2;
+		const oy = (mh - bh * scale) / 2;
+		set(camX, bbox.minX + (mx - ox) / scale);
+		set(camY, bbox.minY + (my - oy) / scale);
+	}
+	function zoomToFit() {
+		if (!get(currentFloor)) {
+			set(camX, 0);
+			set(camY, 0);
+			set(zoom, 1);
+			return;
 		}
-		if (minX === Infinity) {
+		const bounds = getFloorWallBounds(get(currentFloor));
+		if (!bounds) {
 			set(camX, 0);
 			set(camY, 0);
 			set(zoom, 1);
 			return;
 		}
-		const padding = 80;
-		const contentW = maxX - minX + padding * 2;
-		const contentH = maxY - minY + padding * 2;
-		set(camX, (minX + maxX) / 2);
-		set(camY, (minY + maxY) / 2);
-		set(zoom, Math.min(get(width) / contentW, get(height) / contentH, 3), true);
+		const domWidth = (canvas === null || canvas === void 0 ? void 0 : canvas.clientWidth) || get(width);
+		const domHeight = (canvas === null || canvas === void 0 ? void 0 : canvas.clientHeight) || get(height);
+		if (domWidth > 0 && domHeight > 0) {
+			set(width, domWidth, true);
+			set(height, domHeight, true);
+			if (canvas) {
+				canvas.width = get(width);
+				canvas.height = get(height);
+			}
+		}
+		const padding = 0;
+		const contentW = bounds.width + padding * 2;
+		const contentH = bounds.height + padding * 2;
+		set(camX, (bounds.minX + bounds.maxX) / 2);
+		set(camY, (bounds.minY + bounds.maxY) / 2);
+		set(zoom, Math.max(get(width) / contentW, get(height) / contentH), true);
 		set(zoom, Math.max(get(zoom), .1), true);
 		markDirty();
 	}
@@ -67925,10 +68813,12 @@ function FloorPlanCanvas($$anchor, $$props) {
 	var div = root();
 	event("keydown", $window, onKeyDown);
 	event("keyup", $window, onKeyUp);
-	var canvas_1 = child(div);
+	var div_1 = child(div);
+	var canvas_1 = child(div_1);
 	let classes;
 	bind_this(canvas_1, ($$value) => canvas = $$value, () => canvas);
-	var node = sibling(canvas_1, 2);
+	reset(div_1);
+	var node = sibling(div_1, 2);
 	var consequent_20 = ($$anchor) => {
 		var fragment = root_1$5();
 		var node_1 = first_child(fragment);
@@ -68038,8 +68928,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 		if_block(node_4, ($$render) => {
 			if (get(showMinimap) && get(currentFloor) && get(currentFloor).walls.length > 0) $$render(consequent_3);
 		});
-		var div_2 = sibling(node_4, 2);
-		var node_5 = child(div_2);
+		var div_3 = sibling(node_4, 2);
+		var node_5 = child(div_3);
 		var consequent_4 = ($$anchor) => {
 			var fragment_1 = root_6();
 			var span = first_child(fragment_1);
@@ -68154,11 +69044,11 @@ function FloorPlanCanvas($$anchor, $$props) {
 		var text_13 = child(button_6);
 		text_13.nodeValue = "🗺 Map";
 		reset(button_6);
-		reset(div_2);
-		var node_11 = sibling(div_2, 2);
+		reset(div_3);
+		var node_11 = sibling(div_3, 2);
 		var consequent_10 = ($$anchor) => {
-			var div_3 = root_12();
-			var node_12 = sibling(child(div_3), 2);
+			var div_4 = root_12();
+			var node_12 = sibling(child(div_4), 2);
 			each(node_12, 16, () => [
 				["walls", "Walls"],
 				["doors", "Doors"],
@@ -68199,10 +69089,10 @@ function FloorPlanCanvas($$anchor, $$props) {
 			remove_input_defaults(input_4);
 			next(2);
 			reset(label_3);
-			reset(div_3);
+			reset(div_4);
 			bind_checked(input_3, () => get(showRoomLabels), ($$value) => set(showRoomLabels, $$value));
 			bind_checked(input_4, () => get(showDimensions), ($$value) => set(showDimensions, $$value));
-			append($$anchor, div_3);
+			append($$anchor, div_4);
 		};
 		if_block(node_11, ($$render) => {
 			if (get(showLayerPanel)) $$render(consequent_10);
@@ -68243,8 +69133,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 			var fragment_4 = comment();
 			var node_14 = first_child(fragment_4);
 			var consequent_13 = ($$anchor) => {
-				var div_4 = root_15();
-				var button_7 = child(div_4);
+				var div_5 = root_15();
+				var button_7 = child(div_5);
 				var node_15 = sibling(button_7, 2);
 				var consequent_11 = ($$anchor) => {
 					var button_8 = root_16();
@@ -68270,10 +69160,10 @@ function FloorPlanCanvas($$anchor, $$props) {
 					if (get(el).type === "wall" && get(currentSelectedId) && get(currentSelectedIds).size === 0) $$render(consequent_12);
 				});
 				var button_10 = sibling(node_16, 4);
-				reset(div_4);
+				reset(div_5);
 				template_effect(() => {
 					var _$$get$pos$x;
-					return set_style(div_4, `left: ${(_$$get$pos$x = get(el).pos.x) !== null && _$$get$pos$x !== void 0 ? _$$get$pos$x : ""}px; top: ${get(el).pos.y - 44}px; transform: translateX(-50%);`);
+					return set_style(div_5, `left: ${(_$$get$pos$x = get(el).pos.x) !== null && _$$get$pos$x !== void 0 ? _$$get$pos$x : ""}px; top: ${get(el).pos.y - 44}px; transform: translateX(-50%);`);
 				});
 				delegated("click", button_7, () => {
 					if (!get(currentSelectedId) || !get(currentFloor)) return;
@@ -68296,7 +69186,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 						selectedElementId.set(null);
 					}
 				});
-				append($$anchor, div_4);
+				append($$anchor, div_5);
 			};
 			if_block(node_14, ($$render) => {
 				if (get(el)) $$render(consequent_13);
@@ -68315,15 +69205,15 @@ function FloorPlanCanvas($$anchor, $$props) {
 		});
 		var node_18 = sibling(node_17, 2);
 		var consequent_16 = ($$anchor) => {
-			var div_6 = root_19();
-			var text_15 = child(div_6);
-			reset(div_6);
+			var div_7 = root_19();
+			var text_15 = child(div_7);
+			reset(div_7);
 			template_effect(() => {
 				var _$$get13;
 				return set_text(text_15, `Click to place · Scroll or R to rotate (${(_$$get13 = get(currentPlacingRotation)) !== null && _$$get13 !== void 0 ? _$$get13 : ""}°) · Esc
         to cancel`);
 			});
-			append($$anchor, div_6);
+			append($$anchor, div_7);
 		};
 		if_block(node_18, ($$render) => {
 			if (get(currentPlacingId) && get(currentTool) === "furniture") $$render(consequent_16);
@@ -68344,24 +69234,24 @@ function FloorPlanCanvas($$anchor, $$props) {
 		});
 		var node_21 = sibling(node_20, 2);
 		var consequent_19 = ($$anchor) => {
-			var div_9 = root_22();
-			var text_16 = child(div_9);
-			reset(div_9);
+			var div_10 = root_22();
+			var text_16 = child(div_10);
+			reset(div_10);
 			template_effect(() => set_text(text_16, `${get(annotationStart) ? "Click second point to create annotation" : "Click first point"} · N to exit · Esc to cancel`));
-			append($$anchor, div_9);
+			append($$anchor, div_10);
 		};
 		if_block(node_21, ($$render) => {
 			if (get(annotating)) $$render(consequent_19);
 		});
-		var div_10 = sibling(node_21, 2);
-		var button_11 = child(div_10);
+		var div_11 = sibling(node_21, 2);
+		var button_11 = child(div_11);
 		var button_12 = sibling(button_11, 2);
 		var text_17 = child(button_12);
 		reset(button_12);
 		var button_13 = sibling(button_12, 2);
 		var button_14 = sibling(button_13, 4);
-		reset(div_10);
-		ContextMenu(sibling(div_10, 2), {
+		reset(div_11);
+		ContextMenu(sibling(div_11, 2), {
 			get x() {
 				return get(ctxMenuX);
 			},
@@ -68436,12 +69326,18 @@ function FloorPlanCanvas($$anchor, $$props) {
 		if (!$$props.viewOnly) $$render(consequent_20);
 	});
 	reset(div);
-	template_effect(() => {
-		var _$$get14;
+	template_effect(($0) => {
+		set_style(div_1, $0);
 		classes = set_class(canvas_1, 1, "block w-full h-full", null, classes, { "pointer-events-none": $$props.viewOnly });
 		set_attribute(canvas_1, "tabindex", $$props.viewOnly ? -1 : 0);
-		set_style(canvas_1, `cursor: ${(_$$get14 = get(cursorStyle)) !== null && _$$get14 !== void 0 ? _$$get14 : ""}`);
-	});
+		set_style(canvas_1, `
+        cursor: ${get(cursorStyle)};
+        max-width: ${$$props.viewOnly ? `${$$props.floorMaxWidth}px` : "unset"};
+        max-height: ${$$props.viewOnly ? `${$$props.floorMaxHeight}px` : "unset"};
+        min-width: ${$$props.viewOnly ? `${$$props.floorMaxWidth}px` : "unset"};
+        min-height: ${$$props.viewOnly ? `${$$props.floorMaxHeight}px` : "unset"};
+      `);
+	}, [() => getCanvasFrameStyle()]);
 	delegated("mousedown", canvas_1, onMouseDown);
 	delegated("mousemove", canvas_1, onMouseMove);
 	delegated("mouseup", canvas_1, onMouseUp);
@@ -69436,7 +70332,11 @@ function App($$anchor, $$props) {
 	push($$props, true);
 	let showLayers = /* @__PURE__ */ state(false);
 	let floorData = /* @__PURE__ */ state(null);
-	let config = /* @__PURE__ */ state(proxy({ viewOnly: false }));
+	let config = /* @__PURE__ */ state(proxy({
+		viewOnly: false,
+		floorMaxWidth: 600,
+		floorMaxHeight: 400
+	}));
 	(_$$props$stores = $$props.stores) === null || _$$props$stores === void 0 || _$$props$stores.floorData.subscribe((v) => set(floorData, v, true));
 	(_$$props$stores2 = $$props.stores) === null || _$$props$stores2 === void 0 || _$$props$stores2.config.subscribe((v) => set(config, v, true));
 	let commandPaletteOpen = /* @__PURE__ */ state(false);
@@ -69538,9 +70438,25 @@ function App($$anchor, $$props) {
 					var _$$get2;
 					return (_$$get2 = get(config)) === null || _$$get2 === void 0 ? void 0 : _$$get2.viewOnly;
 				});
-				FloorPlanCanvas(node_4, { get viewOnly() {
-					return get($0);
-				} });
+				let $1 = /* @__PURE__ */ user_derived(() => {
+					var _$$get3;
+					return (_$$get3 = get(config)) === null || _$$get3 === void 0 ? void 0 : _$$get3.floorMaxWidth;
+				});
+				let $2 = /* @__PURE__ */ user_derived(() => {
+					var _$$get4;
+					return (_$$get4 = get(config)) === null || _$$get4 === void 0 ? void 0 : _$$get4.floorMaxHeight;
+				});
+				FloorPlanCanvas(node_4, {
+					get viewOnly() {
+						return get($0);
+					},
+					get floorMaxWidth() {
+						return get($1);
+					},
+					get floorMaxHeight() {
+						return get($2);
+					}
+				});
 			}
 			var node_5 = sibling(node_4, 2);
 			var consequent_2 = ($$anchor) => {