floor-editor-ts 1.3.1 → 1.3.2

package/dist/floor-editor.es.js

@@ -6995,21 +6995,33 @@ var DEFAULT_CONFIG = {
 	cameraHeatmapMatrix: [],
 	siteCameras: [],
 	cameraThumbnail: "",
-	cameraThumbnailOpacity: .65
+	cameraThumbnailOpacity: .65,
+	canvasBackground: "#f8f9fa",
+	floorPlateBackground: "#f8f9fa"
 };
 function normalizeConfig(value) {
 	if (!value || typeof value !== "object") return { ...DEFAULT_CONFIG };
 	const siteCameras = Array.isArray(value.siteCameras) ? value.siteCameras.filter((c) => !!c && typeof c === "object" && typeof c.serial === "string" && typeof c.name === "string") : DEFAULT_CONFIG.siteCameras;
 	const image = typeof value.cameraThumbnail === "string" ? value.cameraThumbnail ? value.cameraThumbnail : DEFAULT_CONFIG.cameraThumbnail : DEFAULT_CONFIG.cameraThumbnail;
 	const opacity = typeof value.cameraThumbnailOpacity === "number" && value.cameraThumbnailOpacity >= 0 && value.cameraThumbnailOpacity <= 1 ? value.cameraThumbnailOpacity : DEFAULT_CONFIG.cameraThumbnailOpacity;
+	const canvasBackground = normalizeColor$1(value.canvasBackground, DEFAULT_CONFIG.canvasBackground);
+	const floorPlateBackground = normalizeColor$1(value.floorPlateBackground, DEFAULT_CONFIG.floorPlateBackground);
 	return {
 		...DEFAULT_CONFIG,
 		...value,
 		siteCameras,
 		cameraThumbnail: image,
-		cameraThumbnailOpacity: opacity
+		cameraThumbnailOpacity: opacity,
+		canvasBackground,
+		floorPlateBackground
 	};
 }
+function normalizeColor$1(value, fallback) {
+	if (typeof value !== "string") return fallback;
+	const trimmed = value.trim();
+	if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(trimmed)) return trimmed;
+	return fallback;
+}
 function normalizeFloorData(data) {
 	if (!data || typeof data !== "object") return createDefaultProject();
 	if (!Array.isArray(data.floors) || data.floors.length === 0) return createDefaultProject();
@@ -64753,7 +64765,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 	const $panMode = () => store_get(panMode, "$panMode", $$stores);
 	const $projectSettings = () => store_get(projectSettings, "$projectSettings", $$stores);
 	const [$$stores, $$cleanup] = setup_stores();
-	let selectedCameraSerial = prop($$props, "selectedCameraSerial", 3, null), showCameraCones = prop($$props, "showCameraCones", 3, false), showCameraLabels = prop($$props, "showCameraLabels", 3, true), cameraHeatmapMatrix = prop($$props, "cameraHeatmapMatrix", 19, () => []), cameraThumbnail = prop($$props, "cameraThumbnail", 3, "");
+	let selectedCameraSerial = prop($$props, "selectedCameraSerial", 3, null), showCameraCones = prop($$props, "showCameraCones", 3, false), showCameraLabels = prop($$props, "showCameraLabels", 3, true), cameraHeatmapMatrix = prop($$props, "cameraHeatmapMatrix", 19, () => []), cameraThumbnail = prop($$props, "cameraThumbnail", 3, ""), canvasBackground = prop($$props, "canvasBackground", 3, "#2E353F"), floorPlateBackground = prop($$props, "floorPlateBackground", 3, "#ffffff");
 	let canvas;
 	let ctx;
 	let width = /* @__PURE__ */ state(800);
@@ -64853,6 +64865,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 		showCameraLabels();
 		cameraHeatmapMatrix();
 		cameraThumbnail();
+		canvasBackground();
+		floorPlateBackground();
 		$$props.projectName;
 		$$props.heatmapEnabled;
 		$$props.heatmapMatrix;
@@ -65689,13 +65703,23 @@ function FloorPlanCanvas($$anchor, $$props) {
 		if (!floor) return null;
 		return getFloorBounds(floor, { includeWallThickness: true });
 	}
+	function drawFloorPlateBackground() {
+		var _$$get3;
+		if (!((_$$get3 = get(currentFloor)) === null || _$$get3 === void 0 || (_$$get3 = _$$get3.walls) === null || _$$get3 === void 0 ? void 0 : _$$get3.length)) return;
+		const bounds = getCameraThumbnailBounds(get(currentFloor));
+		if (!bounds) return;
+		const topLeft = worldToScreen(bounds.minX, bounds.minY);
+		const bottomRight = worldToScreen(bounds.maxX, bounds.maxY);
+		ctx.fillStyle = floorPlateBackground();
+		ctx.fillRect(topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y);
+	}
 	function isCameraThumbnailOverlayActive() {
-		var _cameraThumbnail2, _$$get3;
-		return !!(((_cameraThumbnail2 = cameraThumbnail()) === null || _cameraThumbnail2 === void 0 ? void 0 : _cameraThumbnail2.trim()) && get(bgImage) && !((_$$get3 = get(currentFloor)) === null || _$$get3 === void 0 ? void 0 : _$$get3.backgroundImage));
+		var _cameraThumbnail2, _$$get4;
+		return !!(((_cameraThumbnail2 = cameraThumbnail()) === null || _cameraThumbnail2 === void 0 ? void 0 : _cameraThumbnail2.trim()) && get(bgImage) && !((_$$get4 = get(currentFloor)) === null || _$$get4 === void 0 ? void 0 : _$$get4.backgroundImage));
 	}
 	function drawBackgroundImage() {
-		var _$$get4;
-		if (!get(bgImage) || !((_$$get4 = get(currentFloor)) === null || _$$get4 === void 0 ? void 0 : _$$get4.backgroundImage)) return;
+		var _$$get5;
+		if (!get(bgImage) || !((_$$get5 = get(currentFloor)) === null || _$$get5 === void 0 ? void 0 : _$$get5.backgroundImage)) return;
 		const bg = get(currentFloor).backgroundImage;
 		ctx.save();
 		ctx.globalAlpha = bg.opacity;
@@ -65771,7 +65795,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 		}
 		canvasDirty = false;
 		ctx.clearRect(0, 0, get(width), get(height));
-		ctx.fillStyle = "#f8f9fa";
+		ctx.fillStyle = canvasBackground();
 		ctx.fillRect(0, 0, get(width), get(height));
 		if (!$$props.viewOnly) drawGrid();
 		if (!$$props.viewOnly && get(layerVis).guides) drawGuides$1();
@@ -65793,6 +65817,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 		function isSelected(id) {
 			return id === selId || multiIds.has(id);
 		}
+		drawFloorPlateBackground();
 		drawRooms$1();
 		if (!$$props.viewOnly) drawSnapPoints$1();
 		if (get(layerVis).walls) {
@@ -66737,7 +66762,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 		return findRoomAt(p, get(detectedRooms), get(currentFloor).walls);
 	}
 	function onMouseDown(e) {
-		var _$$get5;
+		var _$$get6;
 		if ($$props.viewOnly) return;
 		markDirty();
 		if (e.button === 1 || e.button === 0 && (get(spaceDown) || $panMode() || e.shiftKey && get(currentTool) === "select")) {
@@ -66818,7 +66843,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 			placingStair.set(false);
 			return;
 		}
-		if (tool === "select" && ((_$$get5 = get(currentFloor)) === null || _$$get5 === void 0 ? void 0 : _$$get5.guides)) {
+		if (tool === "select" && ((_$$get6 = get(currentFloor)) === null || _$$get6 === void 0 ? void 0 : _$$get6.guides)) {
 			const GUIDE_HIT = 6 / get(zoom);
 			for (const g of get(currentFloor).guides) {
 				if (g.orientation === "horizontal" && Math.abs(wp.y - g.position) < GUIDE_HIT) {
@@ -66887,9 +66912,9 @@ function FloorPlanCanvas($$anchor, $$props) {
 					const dist = Math.hypot(newPts[1].x - newPts[0].x, newPts[1].y - newPts[0].y);
 					const realDist = prompt("Enter the real-world distance between these two points (in cm):");
 					if (realDist && Number(realDist) > 0) {
-						var _$$get6;
+						var _$$get7;
 						const pixelsPerCm = dist / Number(realDist);
-						if ((_$$get6 = get(currentFloor)) === null || _$$get6 === void 0 ? void 0 : _$$get6.backgroundImage) updateBackgroundImage({ scale: get(currentFloor).backgroundImage.scale * (1 / pixelsPerCm) });
+						if ((_$$get7 = get(currentFloor)) === null || _$$get7 === void 0 ? void 0 : _$$get7.backgroundImage) updateBackgroundImage({ scale: get(currentFloor).backgroundImage.scale * (1 / pixelsPerCm) });
 					}
 					calibrationMode.set(false);
 					return [];
@@ -67259,7 +67284,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 		}
 	}
 	function onMouseMove(e) {
-		var _$$get7, _$$get8, _$$get9, _$$get10;
+		var _$$get8, _$$get9, _$$get10, _$$get11;
 		if ($$props.viewOnly) return;
 		markDirty();
 		const rect = canvas.getBoundingClientRect();
@@ -67277,7 +67302,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 			} : r));
 			return;
 		}
-		if (get(draggingGuideId) && ((_$$get7 = get(currentFloor)) === null || _$$get7 === void 0 ? void 0 : _$$get7.guides)) {
+		if (get(draggingGuideId) && ((_$$get8 = get(currentFloor)) === null || _$$get8 === void 0 ? void 0 : _$$get8.guides)) {
 			const g = get(currentFloor).guides.find((g) => g.id === get(draggingGuideId));
 			if (g) {
 				const newPos = g.orientation === "horizontal" ? get(mousePos).y : get(mousePos).x;
@@ -67433,7 +67458,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 				}
 			}
 		}
-		if (get(draggingTextAnnotationId) && ((_$$get8 = get(currentFloor)) === null || _$$get8 === void 0 ? void 0 : _$$get8.textAnnotations)) {
+		if (get(draggingTextAnnotationId) && ((_$$get9 = get(currentFloor)) === null || _$$get9 === void 0 ? void 0 : _$$get9.textAnnotations)) {
 			const basePos = {
 				x: get(mousePos).x - textAnnotationDragOffset.x,
 				y: get(mousePos).y - textAnnotationDragOffset.y
@@ -67450,7 +67475,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 				}, true);
 			}
 		}
-		if (get(draggingColumnId) && ((_$$get9 = get(currentFloor)) === null || _$$get9 === void 0 ? void 0 : _$$get9.columns)) {
+		if (get(draggingColumnId) && ((_$$get10 = get(currentFloor)) === null || _$$get10 === void 0 ? void 0 : _$$get10.columns)) {
 			const basePos = {
 				x: get(mousePos).x - columnDragOffset.x,
 				y: get(mousePos).y - columnDragOffset.y
@@ -67460,7 +67485,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 				y: snap(basePos.y)
 			});
 		}
-		if (get(draggingStairId) && ((_$$get10 = get(currentFloor)) === null || _$$get10 === void 0 ? void 0 : _$$get10.stairs)) {
+		if (get(draggingStairId) && ((_$$get11 = get(currentFloor)) === null || _$$get11 === void 0 ? void 0 : _$$get11.stairs)) {
 			const basePos = {
 				x: get(mousePos).x - stairDragOffset.x,
 				y: get(mousePos).y - stairDragOffset.y
@@ -67471,12 +67496,12 @@ function FloorPlanCanvas($$anchor, $$props) {
 			});
 		}
 		if (get(draggingFurnitureId)) {
-			var _$$get11;
+			var _$$get12;
 			const basePos = {
 				x: get(mousePos).x - dragOffset.x,
 				y: get(mousePos).y - dragOffset.y
 			};
-			const fi = (_$$get11 = get(currentFloor)) === null || _$$get11 === void 0 ? void 0 : _$$get11.furniture.find((f) => f.id === get(draggingFurnitureId));
+			const fi = (_$$get12 = get(currentFloor)) === null || _$$get12 === void 0 ? void 0 : _$$get12.furniture.find((f) => f.id === get(draggingFurnitureId));
 			if (fi) {
 				const wallSnap = snapFurnitureToWall(basePos, fi.catalogId, fi.rotation);
 				if (wallSnap) {
@@ -67489,13 +67514,13 @@ function FloorPlanCanvas($$anchor, $$props) {
 						wallAngle: wallSnap.wallAngle
 					}, true);
 				} else {
-					var _$$get12;
+					var _$$get13;
 					const snapped = {
 						x: snap(basePos.x),
 						y: snap(basePos.y)
 					};
 					const GUIDE_SNAP = 10;
-					if ((_$$get12 = get(currentFloor)) === null || _$$get12 === void 0 ? void 0 : _$$get12.guides) for (const g of get(currentFloor).guides) {
+					if ((_$$get13 = get(currentFloor)) === null || _$$get13 === void 0 ? void 0 : _$$get13.guides) for (const g of get(currentFloor).guides) {
 						if (g.orientation === "horizontal" && Math.abs(snapped.y - g.position) < GUIDE_SNAP) snapped.y = g.position;
 						if (g.orientation === "vertical" && Math.abs(snapped.x - g.position) < GUIDE_SNAP) snapped.x = g.position;
 					}
@@ -68191,8 +68216,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 		}
 	}
 	let cursorStyle = /* @__PURE__ */ user_derived(() => {
-		var _$$get13;
-		return get(spaceDown) || get(isPanning) || $panMode() || get(shiftDown) && get(currentTool) === "select" ? "grab" : get(draggingFurnitureId) ? "move" : get(draggingRoomId) ? "move" : get(draggingMultiSelect) ? "move" : get(draggingDoorId) ? "move" : get(draggingWindowId) ? "move" : get(draggingStairId) ? "move" : get(draggingColumnId) ? "move" : get(draggingTextAnnotationId) ? "move" : get(draggingWallParallel) ? "move" : get(draggingCurveHandle) ? "crosshair" : get(draggingWallEndpoint) ? "crosshair" : get(draggingHandle) === "rotate" ? "grabbing" : get(draggingHandle) === "resize-t" || get(draggingHandle) === "resize-b" ? "ns-resize" : get(draggingHandle) === "resize-l" || get(draggingHandle) === "resize-r" ? "ew-resize" : ((_$$get13 = get(draggingHandle)) === null || _$$get13 === void 0 ? void 0 : _$$get13.startsWith("resize")) ? "nwse-resize" : get(currentTool) === "text" ? "text" : get(currentTool) === "select" ? "default" : get(currentTool) === "furniture" ? "copy" : get(currentTool) === "door" || get(currentTool) === "window" ? get(placementPreview) ? "crosshair" : "not-allowed" : "crosshair";
+		var _$$get14;
+		return get(spaceDown) || get(isPanning) || $panMode() || get(shiftDown) && get(currentTool) === "select" ? "grab" : get(draggingFurnitureId) ? "move" : get(draggingRoomId) ? "move" : get(draggingMultiSelect) ? "move" : get(draggingDoorId) ? "move" : get(draggingWindowId) ? "move" : get(draggingStairId) ? "move" : get(draggingColumnId) ? "move" : get(draggingTextAnnotationId) ? "move" : get(draggingWallParallel) ? "move" : get(draggingCurveHandle) ? "crosshair" : get(draggingWallEndpoint) ? "crosshair" : get(draggingHandle) === "rotate" ? "grabbing" : get(draggingHandle) === "resize-t" || get(draggingHandle) === "resize-b" ? "ns-resize" : get(draggingHandle) === "resize-l" || get(draggingHandle) === "resize-r" ? "ew-resize" : ((_$$get14 = get(draggingHandle)) === null || _$$get14 === void 0 ? void 0 : _$$get14.startsWith("resize")) ? "nwse-resize" : get(currentTool) === "text" ? "text" : get(currentTool) === "select" ? "default" : get(currentTool) === "furniture" ? "copy" : get(currentTool) === "door" || get(currentTool) === "window" ? get(placementPreview) ? "crosshair" : "not-allowed" : "crosshair";
 	});
 	var div = root$1();
 	event("keydown", $window, onKeyDown);
@@ -68279,8 +68304,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 					}
 					set(editingTextAnnotationId, null);
 				} else if (e.key === "Escape") {
-					var _$$get14;
-					if ((_$$get14 = get(currentFloor)) === null || _$$get14 === void 0 ? void 0 : _$$get14.textAnnotations) {
+					var _$$get15;
+					if ((_$$get15 = get(currentFloor)) === null || _$$get15 === void 0 ? void 0 : _$$get15.textAnnotations) {
 						const ta = get(currentFloor).textAnnotations.find((t) => t.id === get(editingTextAnnotationId));
 						if (ta && ta.text === "Text" && !get(editingTextAnnotationValue).trim()) {
 							removeTextAnnotation(get(editingTextAnnotationId));
@@ -68632,8 +68657,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 			var text_16 = child(div_8);
 			reset(div_8);
 			template_effect(() => {
-				var _$$get15;
-				return set_text(text_16, `Click to place · Scroll or R to rotate (${(_$$get15 = get(currentPlacingRotation)) !== null && _$$get15 !== void 0 ? _$$get15 : ""}°) · Esc
+				var _$$get16;
+				return set_text(text_16, `Click to place · Scroll or R to rotate (${(_$$get16 = get(currentPlacingRotation)) !== null && _$$get16 !== void 0 ? _$$get16 : ""}°) · Esc
         to cancel`);
 			});
 			append($$anchor, div_8);
@@ -69875,6 +69900,14 @@ function App($$anchor, $$props) {
 				var _$$get12;
 				return ((_$$get12 = get(config)) === null || _$$get12 === void 0 ? void 0 : _$$get12.cameraThumbnail) || "";
 			});
+			let $11 = /* @__PURE__ */ user_derived(() => {
+				var _$$get13;
+				return (_$$get13 = get(config)) === null || _$$get13 === void 0 ? void 0 : _$$get13.canvasBackground;
+			});
+			let $12 = /* @__PURE__ */ user_derived(() => {
+				var _$$get14;
+				return (_$$get14 = get(config)) === null || _$$get14 === void 0 ? void 0 : _$$get14.floorPlateBackground;
+			});
 			FloorPlanCanvas(node_3, {
 				get viewOnly() {
 					return get($0);
@@ -69908,6 +69941,12 @@ function App($$anchor, $$props) {
 				},
 				get cameraThumbnail() {
 					return get($10);
+				},
+				get canvasBackground() {
+					return get($11);
+				},
+				get floorPlateBackground() {
+					return get($12);
 				}
 			});
 		}
@@ -69936,12 +69975,12 @@ function App($$anchor, $$props) {
 		{
 			let $0 = /* @__PURE__ */ user_derived(() => get(mode) === "3d");
 			let $1 = /* @__PURE__ */ user_derived(() => {
-				var _$$get$siteCameras, _$$get13;
-				return (_$$get$siteCameras = (_$$get13 = get(config)) === null || _$$get13 === void 0 ? void 0 : _$$get13.siteCameras) !== null && _$$get$siteCameras !== void 0 ? _$$get$siteCameras : [];
+				var _$$get$siteCameras, _$$get15;
+				return (_$$get$siteCameras = (_$$get15 = get(config)) === null || _$$get15 === void 0 ? void 0 : _$$get15.siteCameras) !== null && _$$get$siteCameras !== void 0 ? _$$get$siteCameras : [];
 			});
 			let $2 = /* @__PURE__ */ user_derived(() => {
-				var _$$get$cameraThumbnai, _$$get14;
-				return (_$$get$cameraThumbnai = (_$$get14 = get(config)) === null || _$$get14 === void 0 ? void 0 : _$$get14.cameraThumbnail) !== null && _$$get$cameraThumbnai !== void 0 ? _$$get$cameraThumbnai : "";
+				var _$$get$cameraThumbnai, _$$get16;
+				return (_$$get$cameraThumbnai = (_$$get16 = get(config)) === null || _$$get16 === void 0 ? void 0 : _$$get16.cameraThumbnail) !== null && _$$get$cameraThumbnai !== void 0 ? _$$get$cameraThumbnai : "";
 			});
 			PropertiesPanel($$anchor, {
 				get is3D() {