floor-editor-ts 1.1.7 → 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,42 +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: fit walls to fill the entire viewport — no gray margins */
+	/** 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 bounds = getFloorWallBounds(get(currentFloor));
+		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;
 		}
-		const padding = 12;
-		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.min(canvasW / bounds.width, canvasH / bounds.height), true);
 		set(zoom, Math.max(get(zoom), .1), true);
 		markDirty();
 	}
@@ -65596,6 +65634,20 @@ function FloorPlanCanvas($$anchor, $$props) {
 			height
 		};
 	}
+	/** Bounds for viewOnly fit: wall rect + margin (stable aspect ratio) */
+	function getViewOnlyFitBounds(floor = get(currentFloor)) {
+		const wallBounds = getFloorWallBounds(floor);
+		if (!wallBounds) return null;
+		const margin = 40;
+		return {
+			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() {
 		return "width: 100%; height: 100%";
 	}
@@ -66266,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) => {
@@ -69137,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();
@@ -69669,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);