floor-editor-ts 1.1.8 → 1.2.1

package/dist/floor-editor.es.js

@@ -64640,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 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 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);
@@ -64651,6 +64651,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);
@@ -64734,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) {
@@ -65083,39 +65087,40 @@ 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 fills parent 100%, floor zoomed to fit edge-to-edge */
 	function layoutViewOnlyViewport() {
-		const parent = canvas === null || canvas === void 0 ? void 0 : canvas.parentElement;
-		if (!parent || !get(currentFloor)) return;
+		if (!canvasFrame || !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 = canvasFrame.clientWidth;
+		const maxH = canvasFrame.clientHeight;
+		if (maxW <= 0 || maxH <= 0) return;
+		set(width, maxW, true);
+		set(height, maxH, true);
+		set(viewOnlyCanvasW, maxW, true);
+		set(viewOnlyCanvasH, maxH, true);
 		if (canvas) {
-			canvas.width = get(width);
-			canvas.height = get(height);
+			canvas.width = maxW;
+			canvas.height = maxH;
 		}
 		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(maxW / bounds.width, maxH / bounds.height), true);
 		set(zoom, Math.max(get(zoom), .1), true);
 		markDirty();
 	}
@@ -65593,65 +65598,19 @@ 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 incl. wall thickness */
 	function getViewOnlyFitBounds(floor = get(currentFloor)) {
-		const bounds = getFloorContentBounds(floor);
-		if (!bounds) 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: 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: 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() {
@@ -65665,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);
@@ -66324,7 +66281,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 		resize();
 		setTextureLoadCallback(() => {});
 		const resizeObs = new ResizeObserver(resize);
-		resizeObs.observe(canvas.parentElement);
+		if (canvasFrame) resizeObs.observe(canvasFrame);
 		requestAnimationFrame(draw);
 		let initialFitDone = false;
 		const unsub1 = activeFloor.subscribe((f) => {
@@ -69200,6 +69157,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 	let classes;
 	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();