floor-editor-ts 1.2.8 → 1.3.0

package/dist/floor-editor.es.js

@@ -6988,15 +6988,18 @@ var DEFAULT_CONFIG = {
 	showCameraCones: false,
 	showCameraLabels: true,
 	cameraHeatmapMatrix: [],
-	siteCameras: []
+	siteCameras: [],
+	cameraThumbnail: ""
 };
 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;
 	return {
 		...DEFAULT_CONFIG,
 		...value,
-		siteCameras
+		siteCameras,
+		cameraThumbnail: image
 	};
 }
 function normalizeFloorData(data) {
@@ -64714,7 +64717,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, () => []);
+	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 canvas;
 	let ctx;
 	let width = /* @__PURE__ */ state(800);
@@ -64741,29 +64744,13 @@ function FloorPlanCanvas($$anchor, $$props) {
 		};
 	}
 	user_effect(() => {
-		const unsubZoom = canvasZoom.subscribe((v) => {
-			if (v !== get(zoom)) set(zoom, v, true);
-		});
-		const unsubX = canvasCamX.subscribe((v) => {
-			if (v !== get(camX)) set(camX, v, true);
-		});
-		const unsubY = canvasCamY.subscribe((v) => {
-			if (v !== get(camY)) set(camY, v, true);
-		});
-		return () => {
-			unsubZoom();
-			unsubX();
-			unsubY();
-		};
-	});
-	user_effect(() => {
-		if (get$1(canvasZoom) !== get(zoom)) canvasZoom.set(get(zoom));
+		canvasZoom.set(get(zoom));
 	});
 	user_effect(() => {
-		if (get$1(canvasCamX) !== get(camX)) canvasCamX.set(get(camX));
+		canvasCamX.set(get(camX));
 	});
 	user_effect(() => {
-		if (get$1(canvasCamY) !== get(camY)) canvasCamY.set(get(camY));
+		canvasCamY.set(get(camY));
 	});
 	let wallStart = /* @__PURE__ */ state(null);
 	let wallSequenceFirst = /* @__PURE__ */ state(null);
@@ -64829,6 +64816,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 		showCameraCones();
 		showCameraLabels();
 		cameraHeatmapMatrix();
+		cameraThumbnail();
 		$$props.projectName;
 		$$props.heatmapEnabled;
 		$$props.heatmapMatrix;
@@ -64906,6 +64894,32 @@ function FloorPlanCanvas($$anchor, $$props) {
 	let isCalibrating = /* @__PURE__ */ state(false);
 	let calPoints = /* @__PURE__ */ state(proxy([]));
 	let bgImage = /* @__PURE__ */ state(null);
+	user_effect(() => {
+		var _$$get, _cameraThumbnail$trim, _cameraThumbnail;
+		const floorBgUrl = (_$$get = get(currentFloor)) === null || _$$get === void 0 || (_$$get = _$$get.backgroundImage) === null || _$$get === void 0 ? void 0 : _$$get.dataUrl;
+		const thumbnailUrl = (_cameraThumbnail$trim = (_cameraThumbnail = cameraThumbnail()) === null || _cameraThumbnail === void 0 ? void 0 : _cameraThumbnail.trim()) !== null && _cameraThumbnail$trim !== void 0 ? _cameraThumbnail$trim : "";
+		const url = floorBgUrl || thumbnailUrl;
+		if (!url) {
+			set(bgImage, null);
+			return;
+		}
+		let cancelled = false;
+		const img = new Image();
+		img.onload = () => {
+			if (cancelled) return;
+			set(bgImage, img, true);
+			markDirty();
+		};
+		img.onerror = () => {
+			if (cancelled) return;
+			set(bgImage, null);
+			markDirty();
+		};
+		img.src = url;
+		return () => {
+			cancelled = true;
+		};
+	});
 	let draggingRoomLabelId = /* @__PURE__ */ state(null);
 	let roomLabelDragStart = {
 		x: 0,
@@ -65465,9 +65479,9 @@ function FloorPlanCanvas($$anchor, $$props) {
 		}
 	}
 	function drawMeasurement() {
-		var _$$get;
+		var _$$get2;
 		if (!get(measureStart)) return;
-		const end = (_$$get = get(measureEnd)) !== null && _$$get !== void 0 ? _$$get : get(mousePos);
+		const end = (_$$get2 = get(measureEnd)) !== null && _$$get2 !== void 0 ? _$$get2 : get(mousePos);
 		const s = worldToScreen(get(measureStart).x, get(measureStart).y);
 		const e = worldToScreen(end.x, end.y);
 		ctx.strokeStyle = "#ef4444";
@@ -65635,17 +65649,28 @@ function FloorPlanCanvas($$anchor, $$props) {
 		drawColumn(getCS(), col, selected);
 	}
 	function drawBackgroundImage() {
-		var _$$get2;
-		if (!get(bgImage) || !((_$$get2 = get(currentFloor)) === null || _$$get2 === void 0 ? void 0 : _$$get2.backgroundImage)) return;
+		if (!get(bgImage) || !get(currentFloor)) return;
 		const bg = get(currentFloor).backgroundImage;
-		const s = worldToScreen(bg.position.x, bg.position.y);
 		ctx.save();
-		ctx.globalAlpha = bg.opacity;
-		ctx.translate(s.x, s.y);
-		ctx.rotate(bg.rotation * Math.PI / 180);
-		const sw = get(bgImage).width * bg.scale * get(zoom);
-		const sh = get(bgImage).height * bg.scale * get(zoom);
-		ctx.drawImage(get(bgImage), -sw / 2, -sh / 2, sw, sh);
+		if (bg) {
+			const s = worldToScreen(bg.position.x, bg.position.y);
+			ctx.globalAlpha = bg.opacity;
+			ctx.translate(s.x, s.y);
+			ctx.rotate(bg.rotation * Math.PI / 180);
+			const sw = get(bgImage).width * bg.scale * get(zoom);
+			const sh = get(bgImage).height * bg.scale * get(zoom);
+			ctx.drawImage(get(bgImage), -sw / 2, -sh / 2, sw, sh);
+		} else if (cameraThumbnail()) {
+			const bounds = getFloorBounds(get(currentFloor), { includeWallThickness: true });
+			if (!bounds) {
+				ctx.restore();
+				return;
+			}
+			ctx.globalAlpha = .85;
+			const topLeft = worldToScreen(bounds.minX, bounds.minY);
+			const bottomRight = worldToScreen(bounds.maxX, bounds.maxY);
+			ctx.drawImage(get(bgImage), topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y);
+		}
 		ctx.restore();
 	}
 	function getFloorWallBounds(floor = get(currentFloor)) {
@@ -66435,15 +66460,14 @@ function FloorPlanCanvas($$anchor, $$props) {
 			set(currentSelectedIds, ids, true);
 			markDirty();
 		});
-		const unsub14 = activeFloor.subscribe((f) => {
-			var _f$backgroundImage;
-			if ((f === null || f === void 0 || (_f$backgroundImage = f.backgroundImage) === null || _f$backgroundImage === void 0 ? void 0 : _f$backgroundImage.dataUrl) && (!get(bgImage) || get(bgImage).src !== f.backgroundImage.dataUrl)) {
-				const img = new Image();
-				img.onload = () => {
-					set(bgImage, img, true);
-				};
-				img.src = f.backgroundImage.dataUrl;
-			} else if (!(f === null || f === void 0 ? void 0 : f.backgroundImage)) set(bgImage, null);
+		const unsubZoom = canvasZoom.subscribe((v) => {
+			set(zoom, v, true);
+		});
+		const unsubCamX = canvasCamX.subscribe((v) => {
+			set(camX, v, true);
+		});
+		const unsubCamY = canvasCamY.subscribe((v) => {
+			set(camY, v, true);
 		});
 		function handlePaste(e) {
 			if (!e.clipboardData) return;
@@ -66486,7 +66510,9 @@ function FloorPlanCanvas($$anchor, $$props) {
 			unsub12();
 			unsub13();
 			unsub_multi();
-			unsub14();
+			unsubZoom();
+			unsubCamX();
+			unsubCamY();
 			unsub_col();
 			unsub_cols();
 			unsub_layers();
@@ -69788,6 +69814,10 @@ function App($$anchor, $$props) {
 				var _$$get11;
 				return (_$$get11 = get(config)) === null || _$$get11 === void 0 ? void 0 : _$$get11.cameraHeatmapMatrix;
 			});
+			let $10 = /* @__PURE__ */ user_derived(() => {
+				var _$$get12;
+				return ((_$$get12 = get(config)) === null || _$$get12 === void 0 ? void 0 : _$$get12.cameraThumbnail) || "";
+			});
 			FloorPlanCanvas(node_3, {
 				get viewOnly() {
 					return get($0);
@@ -69818,6 +69848,9 @@ function App($$anchor, $$props) {
 				},
 				get cameraHeatmapMatrix() {
 					return get($9);
+				},
+				get cameraThumbnail() {
+					return get($10);
 				}
 			});
 		}
@@ -69846,8 +69879,8 @@ function App($$anchor, $$props) {
 		{
 			let $0 = /* @__PURE__ */ user_derived(() => get(mode) === "3d");
 			let $1 = /* @__PURE__ */ user_derived(() => {
-				var _$$get$siteCameras, _$$get12;
-				return (_$$get$siteCameras = (_$$get12 = get(config)) === null || _$$get12 === void 0 ? void 0 : _$$get12.siteCameras) !== null && _$$get$siteCameras !== void 0 ? _$$get$siteCameras : [];
+				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 : [];
 			});
 			PropertiesPanel($$anchor, {
 				get is3D() {
@@ -70020,18 +70053,11 @@ function _ensureShadowRoot() {
 	}
 	const shadow = this.attachShadow({ mode: "open" });
 	const style = document.createElement("style");
-	style.textContent = app_default + `
-
-:host {
-
+	style.textContent = app_default + `:host {
   display: block;
-
   width: 100%;
-
   height: 100%;
-
 }
-
 `;
 	shadow.appendChild(style);
 	_classPrivateFieldSet2(_wrapper, this, document.createElement("div"));