floor-editor-ts 1.1.8 → 1.1.9

package/dist/floor-editor.es.js

@@ -4970,8 +4970,33 @@ var init_attachments = __esmMin((() => {
 	init_effects();
 }));
 //#endregion
+//#region node_modules/clsx/dist/clsx.mjs
+function r$1(e) {
+	var t, f, n = "";
+	if ("string" == typeof e || "number" == typeof e) n += e;
+	else if ("object" == typeof e) if (Array.isArray(e)) {
+		var o = e.length;
+		for (t = 0; t < o; t++) e[t] && (f = r$1(e[t])) && (n && (n += " "), n += f);
+	} else for (f in e) e[f] && (n && (n += " "), n += f);
+	return n;
+}
+function clsx$1() {
+	for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r$1(e)) && (n && (n += " "), n += t);
+	return n;
+}
+var init_clsx = __esmMin((() => {}));
+//#endregion
 //#region node_modules/svelte/src/internal/shared/attributes.js
 /**
+* Small wrapper around clsx to preserve Svelte's (weird) handling of falsy values.
+* TODO Svelte 6 revisit this, and likely turn all falsy values into the empty string (what clsx also does)
+* @param  {any} value
+*/
+function clsx(value) {
+	if (typeof value === "object") return clsx$1(value);
+	else return value !== null && value !== void 0 ? value : "";
+}
+/**
 * @param {any} value
 * @param {string | null} [hash]
 * @param {Record<string, boolean>} [directives]
@@ -5080,6 +5105,7 @@ function to_style(value, styles) {
 }
 var whitespace;
 var init_attributes$1 = __esmMin((() => {
+	init_clsx();
 	init_utils$3();
 	whitespace = [..." 	\n\r\f\xA0\v"];
 }));
@@ -64640,7 +64666,7 @@ var root_22 = /* @__PURE__ */ from_html(`<div class="absolute top-2 left-1/2 -tr
 var root_23 = /* @__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_24 = /* @__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_2$3 = /* @__PURE__ */ from_html(`<!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <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$1 = /* @__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>`);
+var root$1 = /* @__PURE__ */ from_html(`<div 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);
@@ -64651,6 +64677,9 @@ function FloorPlanCanvas($$anchor, $$props) {
 	let ctx;
 	let width = /* @__PURE__ */ state(800);
 	let height = /* @__PURE__ */ state(600);
+	let viewOnlyCanvasW = /* @__PURE__ */ state(0);
+	let viewOnlyCanvasH = /* @__PURE__ */ state(0);
+	let canvasFrame;
 	let camX = /* @__PURE__ */ state(0);
 	let camY = /* @__PURE__ */ state(0);
 	let zoom = /* @__PURE__ */ state(1);
@@ -65083,39 +65112,51 @@ function FloorPlanCanvas($$anchor, $$props) {
 		return end;
 	}
 	function resize() {
+		if ($$props.viewOnly) {
+			layoutViewOnlyViewport();
+			return;
+		}
 		const parent = canvas === null || canvas === void 0 ? void 0 : canvas.parentElement;
 		if (!parent) return;
-		if (!$$props.viewOnly) {
-			set(width, parent.clientWidth, true);
-			set(height, parent.clientHeight, true);
-			if (canvas) {
-				canvas.width = get(width);
-				canvas.height = get(height);
-			}
-			markDirty();
-			needsFitToCanvas = true;
-			return;
+		set(width, parent.clientWidth, true);
+		set(height, parent.clientHeight, true);
+		if (canvas) {
+			canvas.width = get(width);
+			canvas.height = get(height);
 		}
-		layoutViewOnlyViewport();
+		markDirty();
+		needsFitToCanvas = true;
 	}
-	/** viewOnly: show full floor — contain fit, nothing clipped */
+	/** viewOnly: canvas pixel size = floor aspect ratio, drawing fills canvas exactly */
 	function layoutViewOnlyViewport() {
-		const parent = canvas === null || canvas === void 0 ? void 0 : canvas.parentElement;
-		if (!parent || !get(currentFloor)) return;
+		const container = canvasFrame === null || canvasFrame === void 0 ? void 0 : canvasFrame.parentElement;
+		if (!container || !get(currentFloor)) return;
 		const bounds = getViewOnlyFitBounds(get(currentFloor));
 		if (!bounds) return;
-		const domWidth = parent.clientWidth;
-		const domHeight = parent.clientHeight;
-		if (domWidth <= 0 || domHeight <= 0) return;
-		set(width, domWidth, true);
-		set(height, domHeight, true);
+		const maxW = container.clientWidth;
+		const maxH = container.clientHeight;
+		if (maxW <= 0 || maxH <= 0) return;
+		const contentAspect = bounds.width / bounds.height;
+		let canvasW;
+		let canvasH;
+		if (maxW / maxH > contentAspect) {
+			canvasH = maxH;
+			canvasW = Math.floor(maxH * contentAspect);
+		} else {
+			canvasW = maxW;
+			canvasH = Math.floor(maxW / contentAspect);
+		}
+		set(viewOnlyCanvasW, canvasW, true);
+		set(viewOnlyCanvasH, canvasH, true);
+		set(width, canvasW, true);
+		set(height, canvasH, true);
 		if (canvas) {
-			canvas.width = get(width);
-			canvas.height = get(height);
+			canvas.width = canvasW;
+			canvas.height = canvasH;
 		}
 		set(camX, (bounds.minX + bounds.maxX) / 2);
 		set(camY, (bounds.minY + bounds.maxY) / 2);
-		set(zoom, Math.min(get(width) / bounds.width, get(height) / bounds.height), true);
+		set(zoom, Math.min(canvasW / bounds.width, canvasH / bounds.height), true);
 		set(zoom, Math.max(get(zoom), .1), true);
 		markDirty();
 	}
@@ -65593,65 +65634,18 @@ function FloorPlanCanvas($$anchor, $$props) {
 			height
 		};
 	}
-	function getFloorContentBounds(floor = get(currentFloor)) {
-		if (!floor) return null;
-		let minX = Infinity;
-		let maxX = -Infinity;
-		let minY = Infinity;
-		let maxY = -Infinity;
-		let found = false;
-		const expand = (x, y, pad = 0) => {
-			minX = Math.min(minX, x - pad);
-			maxX = Math.max(maxX, x + pad);
-			minY = Math.min(minY, y - pad);
-			maxY = Math.max(maxY, y + pad);
-			found = true;
-		};
-		for (const wall of floor.walls) {
-			expand(wall.start.x, wall.start.y, wall.thickness / 2);
-			expand(wall.end.x, wall.end.y, wall.thickness / 2);
-			if (wall.curvePoint) expand(wall.curvePoint.x, wall.curvePoint.y, wall.thickness / 2);
-		}
-		for (const item of floor.furniture) {
-			var _item$scale$x, _item$scale, _item$scale$y, _item$scale2, _ref, _item$width, _ref2, _item$depth;
-			const cat = getCatalogItem(item.catalogId);
-			const sx = Math.abs((_item$scale$x = (_item$scale = item.scale) === null || _item$scale === void 0 ? void 0 : _item$scale.x) !== null && _item$scale$x !== void 0 ? _item$scale$x : 1);
-			const sy = Math.abs((_item$scale$y = (_item$scale2 = item.scale) === null || _item$scale2 === void 0 ? void 0 : _item$scale2.y) !== null && _item$scale$y !== void 0 ? _item$scale$y : 1);
-			const w = ((_ref = (_item$width = item.width) !== null && _item$width !== void 0 ? _item$width : cat === null || cat === void 0 ? void 0 : cat.width) !== null && _ref !== void 0 ? _ref : 50) * sx;
-			const d = ((_ref2 = (_item$depth = item.depth) !== null && _item$depth !== void 0 ? _item$depth : cat === null || cat === void 0 ? void 0 : cat.depth) !== null && _ref2 !== void 0 ? _ref2 : 50) * sy;
-			const half = Math.max(w, d) / 2;
-			expand(item.position.x, item.position.y, half);
-			if (item.catalogId === "camera" && showCameraCones()) {
-				const angle = item.rotation * Math.PI / 180;
-				const range = Math.max(w, d) * 6;
-				expand(item.position.x + Math.cos(angle) * range, item.position.y + Math.sin(angle) * range, half);
-			}
-		}
-		if (!found) return getFloorWallBounds(floor);
-		const width = maxX - minX;
-		const height = maxY - minY;
-		if (width <= 0 || height <= 0) return null;
-		return {
-			minX,
-			minY,
-			maxX,
-			maxY,
-			width,
-			height
-		};
-	}
-	/** Bounds for viewOnly fit: walls + furniture bodies + margin, never crops content */
+	/** Bounds for viewOnly fit: wall rect + margin (stable aspect ratio) */
 	function getViewOnlyFitBounds(floor = get(currentFloor)) {
-		const bounds = getFloorContentBounds(floor);
-		if (!bounds) return null;
+		const wallBounds = getFloorWallBounds(floor);
+		if (!wallBounds) return null;
 		const margin = 40;
 		return {
-			minX: bounds.minX - margin,
-			minY: bounds.minY - margin,
-			maxX: bounds.maxX + margin,
-			maxY: bounds.maxY + margin,
-			width: bounds.width + margin * 2,
-			height: bounds.height + margin * 2
+			minX: wallBounds.minX - margin,
+			minY: wallBounds.minY - margin,
+			maxX: wallBounds.maxX + margin,
+			maxY: wallBounds.maxY + margin,
+			width: wallBounds.width + margin * 2,
+			height: wallBounds.height + margin * 2
 		};
 	}
 	function getCanvasFrameStyle() {
@@ -66324,7 +66318,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 		resize();
 		setTextureLoadCallback(() => {});
 		const resizeObs = new ResizeObserver(resize);
-		resizeObs.observe(canvas.parentElement);
+		const resizeTarget = $$props.viewOnly ? canvasFrame === null || canvasFrame === void 0 ? void 0 : canvasFrame.parentElement : canvasFrame;
+		if (resizeTarget) resizeObs.observe(resizeTarget);
 		requestAnimationFrame(draw);
 		let initialFitDone = false;
 		const unsub1 = activeFloor.subscribe((f) => {
@@ -69195,11 +69190,13 @@ function FloorPlanCanvas($$anchor, $$props) {
 	var div = root$1();
 	event("keydown", $window, onKeyDown);
 	event("keyup", $window, onKeyUp);
+	let classes;
 	var div_1 = child(div);
 	var canvas_1 = child(div_1);
-	let classes;
+	let classes_1;
 	bind_this(canvas_1, ($$value) => canvas = $$value, () => canvas);
 	reset(div_1);
+	bind_this(div_1, ($$value) => canvasFrame = $$value, () => canvasFrame);
 	var node = sibling(div_1, 2);
 	var consequent = ($$anchor) => {
 		var div_2 = root_1$4();
@@ -69727,11 +69724,17 @@ function FloorPlanCanvas($$anchor, $$props) {
 	});
 	reset(div);
 	template_effect(($0) => {
+		classes = set_class(div, 1, "w-full h-full relative overflow-hidden", null, classes, {
+			flex: $$props.viewOnly,
+			"items-center": $$props.viewOnly,
+			"justify-center": $$props.viewOnly
+		});
 		set_style(div_1, $0);
-		classes = set_class(canvas_1, 1, "block w-full h-full", null, classes, { "pointer-events-none": $$props.viewOnly });
+		set_class(div_1, 1, clsx($$props.viewOnly ? "" : "w-full h-full"));
+		classes_1 = set_class(canvas_1, 1, clsx($$props.viewOnly ? "block" : "block w-full h-full"), null, classes_1, { "pointer-events-none": $$props.viewOnly });
 		set_attribute(canvas_1, "tabindex", $$props.viewOnly ? -1 : 0);
-		set_style(canvas_1, `cursor: ${get(cursorStyle)};`);
-	}, [() => getCanvasFrameStyle()]);
+		set_style(canvas_1, $$props.viewOnly ? `width:${get(viewOnlyCanvasW)}px;height:${get(viewOnlyCanvasH)}px;cursor:${get(cursorStyle)};` : `cursor: ${get(cursorStyle)};`);
+	}, [() => $$props.viewOnly ? `width:${get(viewOnlyCanvasW)}px;height:${get(viewOnlyCanvasH)}px;flex-shrink:0;line-height:0;` : getCanvasFrameStyle()]);
 	delegated("mousedown", canvas_1, onMouseDown);
 	delegated("mousemove", canvas_1, onMouseMove);
 	delegated("mouseup", canvas_1, onMouseUp);