floor-editor-ts 1.1.0 → 1.1.2

package/dist/floor-editor.es.js

@@ -61678,27 +61678,32 @@ var persons = [];
 var lastSpawnTime = 0;
 var SPAWN_INTERVAL = 1e3;
 var MAX_PERSONS = 20;
-var getHeatmapColor = (t, alpha = 1) => {
+function getHeatmapColor(t, alpha = 1) {
 	t = Math.max(0, Math.min(t, 1));
 	let r, g, b;
-	if (t < .35) {
-		const k = t / .35;
+	if (t < .25) {
+		const k = t / .25;
 		r = 0;
-		g = Math.round(120 + 135 * k);
-		b = Math.round(255 - 180 * k);
-	} else if (t < .7) {
-		const k = (t - .35) / .35;
+		g = Math.round(100 * k);
+		b = 255;
+	} else if (t < .5) {
+		const k = (t - .25) / .25;
+		r = 0;
+		g = Math.round(100 + 155 * k);
+		b = Math.round(255 * (1 - k));
+	} else if (t < .75) {
+		const k = (t - .5) / .25;
 		r = Math.round(255 * k);
 		g = 255;
 		b = 0;
 	} else {
-		const k = (t - .7) / .3;
+		const k = (t - .75) / .25;
 		r = 255;
-		g = Math.round(255 - 255 * k);
+		g = Math.round(255 * (1 - 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;
@@ -63867,15 +63872,15 @@ function drawAnnotations(cs, floor, selectedAnnotationId, dimSettings) {
 }
 var ROOM_FILLS_BY_TYPE = {
 	"Living Room": "rgba(96, 165, 250, 0.08)",
-	"Bedroom": "rgba(167, 139, 250, 0.08)",
-	"Kitchen": "rgba(251, 191, 36, 0.08)",
-	"Bathroom": "rgba(45, 212, 191, 0.08)",
+	Bedroom: "rgba(167, 139, 250, 0.08)",
+	Kitchen: "rgba(251, 191, 36, 0.08)",
+	Bathroom: "rgba(45, 212, 191, 0.08)",
 	"Dining Room": "rgba(251, 146, 60, 0.08)",
-	"Office": "rgba(52, 211, 153, 0.08)",
-	"Hallway": "rgba(156, 163, 175, 0.06)",
-	"Closet": "rgba(244, 114, 182, 0.06)",
-	"Laundry": "rgba(129, 140, 248, 0.08)",
-	"Garage": "rgba(163, 163, 163, 0.08)"
+	Office: "rgba(52, 211, 153, 0.08)",
+	Hallway: "rgba(156, 163, 175, 0.06)",
+	Closet: "rgba(244, 114, 182, 0.06)",
+	Laundry: "rgba(129, 140, 248, 0.08)",
+	Garage: "rgba(163, 163, 163, 0.08)"
 };
 var ROOM_FILLS_DEFAULT = [
 	"rgba(167, 139, 250, 0.07)",
@@ -63897,15 +63902,15 @@ function getRoomFill(room, index) {
 }
 var ROOM_FLOOR_PATTERN = {
 	"Living Room": "wood",
-	"Bedroom": "wood",
-	"Office": "wood",
+	Bedroom: "wood",
+	Office: "wood",
 	"Dining Room": "wood",
-	"Hallway": "wood",
-	"Kitchen": "tile",
-	"Bathroom": "tile",
-	"Laundry": "tile",
-	"Garage": "stone",
-	"Closet": "none"
+	Hallway: "wood",
+	Kitchen: "tile",
+	Bathroom: "tile",
+	Laundry: "tile",
+	Garage: "stone",
+	Closet: "none"
 };
 function drawRoomFloorPattern(cs, room, screenPoly) {
 	var _ROOM_FLOOR_PATTERN$r;
@@ -64175,13 +64180,19 @@ function drawMinimap(cs, minimapCanvas, floor, getWorldBBox) {
 	mctx.lineWidth = 1;
 	mctx.strokeRect(0, 0, mw, mh);
 }
+var heatmapCache = null;
+function getMatrixKey(matrix) {
+	const flat = matrix.flat();
+	const step = Math.max(1, Math.floor(flat.length / 20));
+	return flat.filter((_, i) => i % step === 0).join(",");
+}
 function drawFloorHeatmap(cs, floor, heatmapMatrix, detectedRooms) {
 	var _heatmapMatrix$;
-	const { ctx, zoom } = cs;
+	const { ctx } = cs;
 	const rows = heatmapMatrix.length;
 	const cols = ((_heatmapMatrix$ = heatmapMatrix[0]) === null || _heatmapMatrix$ === void 0 ? void 0 : _heatmapMatrix$.length) || 0;
 	if (rows === 0 || cols === 0) return;
-	const maxValue = Math.max(...heatmapMatrix.flat());
+	const maxValue = heatmapMatrix.reduce((max, row) => row.reduce((m, v) => v > m ? v : m, max), 0);
 	if (maxValue <= 0) return;
 	const bounds = getFloorBounds(floor);
 	if (!bounds) return;
@@ -64189,14 +64200,73 @@ function drawFloorHeatmap(cs, floor, heatmapMatrix, detectedRooms) {
 	const boxW = bounds.width;
 	const boxH = bounds.height;
 	if (boxW <= 0 || boxH <= 0) return;
-	const cellW = boxW / cols;
-	const cellH = boxH / rows;
+	const matrixKey = getMatrixKey(heatmapMatrix);
+	const floorId = floor.id;
+	const needsRedraw = !heatmapCache || heatmapCache.matrixKey !== matrixKey || heatmapCache.floorId !== floorId;
+	const OFFSCREEN_W = 512;
+	const OFFSCREEN_H = 512;
+	if (needsRedraw) {
+		const offCellW = OFFSCREEN_W / cols;
+		const offCellH = OFFSCREEN_H / rows;
+		const radius = Math.max(offCellW, offCellH) * 1.3;
+		const blobCanvas = document.createElement("canvas");
+		blobCanvas.width = OFFSCREEN_W;
+		blobCanvas.height = OFFSCREEN_H;
+		const blobCtx = blobCanvas.getContext("2d");
+		blobCtx.filter = `blur(${Math.min(10, Math.max(2, radius * .2))}px)`;
+		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 px = (x + .5) * offCellW;
+			const py = (y + .5) * offCellH;
+			const alpha = .5 + intensity * .45;
+			const gradient = blobCtx.createRadialGradient(px, py, 0, px, py, radius);
+			gradient.addColorStop(0, getHeatmapColor(intensity, alpha));
+			gradient.addColorStop(.2, getHeatmapColor(intensity, alpha * .75));
+			gradient.addColorStop(.5, getHeatmapColor(intensity, alpha * .25));
+			gradient.addColorStop(1, getHeatmapColor(intensity, 0));
+			blobCtx.fillStyle = gradient;
+			blobCtx.beginPath();
+			blobCtx.arc(px, py, radius, 0, Math.PI * 2);
+			blobCtx.fill();
+		}
+		const finalCanvas = document.createElement("canvas");
+		finalCanvas.width = OFFSCREEN_W;
+		finalCanvas.height = OFFSCREEN_H;
+		const finalCtx = finalCanvas.getContext("2d");
+		finalCtx.drawImage(blobCanvas, 0, 0);
+		finalCtx.filter = "none";
+		finalCtx.strokeStyle = "rgba(255, 255, 255, 0.18)";
+		finalCtx.lineWidth = .5;
+		finalCtx.beginPath();
+		for (let x = 0; x <= cols; x++) {
+			const px = x * offCellW;
+			finalCtx.moveTo(px, 0);
+			finalCtx.lineTo(px, OFFSCREEN_H);
+		}
+		for (let y = 0; y <= rows; y++) {
+			const py = y * offCellH;
+			finalCtx.moveTo(0, py);
+			finalCtx.lineTo(OFFSCREEN_W, py);
+		}
+		finalCtx.stroke();
+		heatmapCache = {
+			canvas: finalCanvas,
+			matrixKey,
+			floorId
+		};
+	}
+	const p1 = wts(cs, minX, minY);
+	const p2 = wts(cs, maxX, maxY);
+	const destX = Math.min(p1.x, p2.x);
+	const destY = Math.min(p1.y, p2.y);
+	const destW = Math.abs(p2.x - p1.x);
+	const destH = Math.abs(p2.y - p1.y);
+	const canvasW = ctx.canvas.width;
+	const canvasH = ctx.canvas.height;
+	if (destX > canvasW || destY > canvasH || destX + destW < 0 || destY + destH < 0) return;
 	ctx.save();
-	const boundP1 = wts(cs, minX, minY);
-	const boundP2 = wts(cs, maxX, maxY);
-	ctx.beginPath();
-	ctx.rect(Math.min(boundP1.x, boundP2.x), Math.min(boundP1.y, boundP2.y), Math.abs(boundP2.x - boundP1.x), Math.abs(boundP2.y - boundP1.y));
-	ctx.clip();
 	let hasRoomClip = false;
 	ctx.beginPath();
 	for (const room of detectedRooms) {
@@ -64208,45 +64278,10 @@ function drawFloorHeatmap(cs, floor, heatmapMatrix, detectedRooms) {
 		ctx.closePath();
 		hasRoomClip = true;
 	}
-	if (hasRoomClip) ctx.clip();
-	ctx.globalCompositeOperation = "source-over";
-	ctx.filter = `blur(${Math.min(14, Math.max(3, 5 * zoom))}px)`;
-	const radius = Math.max(cellW, cellH) * zoom * 1.15;
-	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 s = wts(cs, minX + (x + .5) * cellW, minY + (y + .5) * cellH);
-		const gradient = ctx.createRadialGradient(s.x, s.y, 0, s.x, s.y, radius);
-		const alpha = .08 + intensity * .45;
-		gradient.addColorStop(0, getHeatmapColor(intensity, alpha));
-		gradient.addColorStop(.35, getHeatmapColor(intensity, alpha * .35));
-		gradient.addColorStop(1, getHeatmapColor(intensity, 0));
-		ctx.fillStyle = gradient;
-		ctx.beginPath();
-		ctx.arc(s.x, s.y, radius, 0, Math.PI * 2);
-		ctx.fill();
-	}
-	ctx.filter = "none";
-	ctx.globalCompositeOperation = "source-over";
-	ctx.strokeStyle = "rgba(255, 255, 255, 0.22)";
-	ctx.lineWidth = Math.max(.5, 1 / zoom);
-	ctx.beginPath();
-	for (let x = 0; x <= cols; x++) {
-		const wx = minX + x * cellW;
-		const p1 = wts(cs, wx, minY);
-		const p2 = wts(cs, wx, maxY);
-		ctx.moveTo(p1.x, p1.y);
-		ctx.lineTo(p2.x, p2.y);
-	}
-	for (let y = 0; y <= rows; y++) {
-		const wy = minY + y * cellH;
-		const p1 = wts(cs, minX, wy);
-		const p2 = wts(cs, maxX, wy);
-		ctx.moveTo(p1.x, p1.y);
-		ctx.lineTo(p2.x, p2.y);
-	}
-	ctx.stroke();
+	if (hasRoomClip) ctx.clip("evenodd");
+	ctx.globalAlpha = .92;
+	ctx.drawImage(heatmapCache.canvas, destX, destY, destW, destH);
+	ctx.globalAlpha = 1;
 	ctx.restore();
 }
 //#endregion
@@ -65412,7 +65447,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 		canvasDirty = false;
 		ctx.clearRect(0, 0, get(width), get(height));
 		ctx.fillStyle = "#f8f9fa";
-		ctx.fillRect(0, 0, $$props.floorMaxWidth, $$props.floorMaxHeight);
+		ctx.fillRect(0, 0, $$props.viewOnly ? $$props.floorMaxWidth : get(width), $$props.viewOnly ? $$props.floorMaxHeight : get(height));
 		drawGrid();
 		if (!$$props.viewOnly && get(layerVis).guides) drawGuides$1();
 		drawBackgroundImage();
@@ -65433,7 +65468,10 @@ function FloorPlanCanvas($$anchor, $$props) {
 			return id === selId || multiIds.has(id);
 		}
 		drawRooms$1();
-		if (floor && $$props.heatmapEnabled) drawFloorHeatmap(getCS(), floor, $$props.heatmapMatrix || [], get(detectedRooms));
+		if (floor && $$props.heatmapEnabled && $$props.heatmapMatrix && $$props.heatmapMatrix.length > 0) {
+			var _$$props$heatmapMatri;
+			drawFloorHeatmap(getCS(), floor, (_$$props$heatmapMatri = $$props.heatmapMatrix) !== null && _$$props$heatmapMatri !== void 0 ? _$$props$heatmapMatri : [], get(detectedRooms));
+		}
 		if (!$$props.viewOnly) drawSnapPoints$1();
 		if (get(layerVis).walls) {
 			for (const w of floor.walls) drawWall$1(w, isSelected(w.id));