floor-editor-ts 1.1.9 → 1.2.1

package/dist/floor-editor.es.js

@@ -4970,33 +4970,8 @@ 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]
@@ -5105,7 +5080,6 @@ function to_style(value, styles) {
 }
 var whitespace;
 var init_attributes$1 = __esmMin((() => {
-	init_clsx();
 	init_utils$3();
 	whitespace = [..." 	\n\r\f\xA0\v"];
 }));
@@ -64666,7 +64640,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 role="application"><div><canvas aria-label="Floor plan editor canvas"></canvas></div> <!> <!></div>`);
+var root$1 = /* @__PURE__ */ from_html(`<div class="w-full h-full relative overflow-hidden" role="application"><div class="w-full h-full"><canvas aria-label="Floor plan editor canvas"></canvas></div> <!> <!></div>`);
 function FloorPlanCanvas($$anchor, $$props) {
 	push($$props, true);
 	const $panMode = () => store_get(panMode, "$panMode", $$stores);
@@ -64763,6 +64737,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 	user_effect(() => {
 		if ($$props.viewOnly) set(showRulers, false);
 		if ($$props.viewOnly) set(showMinimap, false);
+		if ($$props.viewOnly) set(showDimensions, false);
 	});
 	user_effect(() => {
 		if ($$props.viewOnly) {
@@ -65127,36 +65102,25 @@ function FloorPlanCanvas($$anchor, $$props) {
 		markDirty();
 		needsFitToCanvas = true;
 	}
-	/** viewOnly: canvas pixel size = floor aspect ratio, drawing fills canvas exactly */
+	/** viewOnly: canvas fills parent 100%, floor zoomed to fit edge-to-edge */
 	function layoutViewOnlyViewport() {
-		const container = canvasFrame === null || canvasFrame === void 0 ? void 0 : canvasFrame.parentElement;
-		if (!container || !get(currentFloor)) return;
+		if (!canvasFrame || !get(currentFloor)) return;
 		const bounds = getViewOnlyFitBounds(get(currentFloor));
 		if (!bounds) return;
-		const maxW = container.clientWidth;
-		const maxH = container.clientHeight;
+		const maxW = canvasFrame.clientWidth;
+		const maxH = canvasFrame.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);
+		set(width, maxW, true);
+		set(height, maxH, true);
+		set(viewOnlyCanvasW, maxW, true);
+		set(viewOnlyCanvasH, maxH, true);
 		if (canvas) {
-			canvas.width = canvasW;
-			canvas.height = canvasH;
+			canvas.width = maxW;
+			canvas.height = maxH;
 		}
 		set(camX, (bounds.minX + bounds.maxX) / 2);
 		set(camY, (bounds.minY + bounds.maxY) / 2);
-		set(zoom, Math.min(canvasW / bounds.width, canvasH / bounds.height), true);
+		set(zoom, Math.min(maxW / bounds.width, maxH / bounds.height), true);
 		set(zoom, Math.max(get(zoom), .1), true);
 		markDirty();
 	}
@@ -65634,18 +65598,19 @@ function FloorPlanCanvas($$anchor, $$props) {
 			height
 		};
 	}
-	/** Bounds for viewOnly fit: wall rect + margin (stable aspect ratio) */
+	/** Bounds for viewOnly fit: wall rect incl. wall thickness */
 	function getViewOnlyFitBounds(floor = get(currentFloor)) {
-		const wallBounds = getFloorWallBounds(floor);
-		if (!wallBounds) return null;
-		const margin = 40;
+		var _floor$walls2;
+		const wb = getFloorWallBounds(floor);
+		if (!wb || !(floor === null || floor === void 0 || (_floor$walls2 = floor.walls) === null || _floor$walls2 === void 0 ? void 0 : _floor$walls2.length)) return wb;
+		const pad = Math.max(...floor.walls.map((w) => w.thickness / 2), 8);
 		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
+			minX: wb.minX - pad,
+			minY: wb.minY - pad,
+			maxX: wb.maxX + pad,
+			maxY: wb.maxY + pad,
+			width: wb.width + pad * 2,
+			height: wb.height + pad * 2
 		};
 	}
 	function getCanvasFrameStyle() {
@@ -65659,11 +65624,9 @@ function FloorPlanCanvas($$anchor, $$props) {
 		}
 		canvasDirty = false;
 		ctx.clearRect(0, 0, get(width), get(height));
-		if (!$$props.viewOnly) {
-			ctx.fillStyle = "#f8f9fa";
-			ctx.fillRect(0, 0, get(width), get(height));
-			drawGrid();
-		}
+		ctx.fillStyle = "#f8f9fa";
+		ctx.fillRect(0, 0, get(width), get(height));
+		if (!$$props.viewOnly) drawGrid();
 		if (!$$props.viewOnly && get(layerVis).guides) drawGuides$1();
 		drawBackgroundImage();
 		const floor = get(currentFloor);
@@ -66318,8 +66281,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 		resize();
 		setTextureLoadCallback(() => {});
 		const resizeObs = new ResizeObserver(resize);
-		const resizeTarget = $$props.viewOnly ? canvasFrame === null || canvasFrame === void 0 ? void 0 : canvasFrame.parentElement : canvasFrame;
-		if (resizeTarget) resizeObs.observe(resizeTarget);
+		if (canvasFrame) resizeObs.observe(canvasFrame);
 		requestAnimationFrame(draw);
 		let initialFitDone = false;
 		const unsub1 = activeFloor.subscribe((f) => {
@@ -69190,10 +69152,9 @@ 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_1;
+	let classes;
 	bind_this(canvas_1, ($$value) => canvas = $$value, () => canvas);
 	reset(div_1);
 	bind_this(div_1, ($$value) => canvasFrame = $$value, () => canvasFrame);
@@ -69724,17 +69685,11 @@ 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);
-		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 });
+		classes = set_class(canvas_1, 1, "block w-full h-full", null, classes, { "pointer-events-none": $$props.viewOnly });
 		set_attribute(canvas_1, "tabindex", $$props.viewOnly ? -1 : 0);
-		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()]);
+		set_style(canvas_1, `cursor: ${get(cursorStyle)};`);
+	}, [() => getCanvasFrameStyle()]);
 	delegated("mousedown", canvas_1, onMouseDown);
 	delegated("mousemove", canvas_1, onMouseMove);
 	delegated("mouseup", canvas_1, onMouseUp);