const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
const require_floorMapBuiltinShapes = require("../utils/floorMapBuiltinShapes.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _pisell_utils = require("@pisell/utils");
//#region src/components/pisellFloorMapLayout/components/FloorMapBuiltinShapeElement.tsx
/**
* 平面图「内置图形图元」内层展示：根据 `builtinShapeKey` 渲染内置 SVG 图形；
* 未选 / key 已失效时给出与图片图元一致风格的虚线占位（可在侧栏 Select 中选择）。
*
* 与 {@link FloorMapImageElement} 对位：
* - 同样无数据源绑定；
* - 同样以「容器铺满」的方式渲染单一视觉；
* - 同样允许 `name` 作为占位时的标题。
*
* 方向自适应：def 标了 `orientationAware: true` 的图形（沙发 / 大门），
* wrapper 用 `ResizeObserver` 跟踪容器宽高；高 > 宽时把整张图形 rotate 90deg
* + swap dims，让横向设计的图形（沙发）或贴底墙的图形（大门）在瘦高槽位里
* 自然变成竖向 / 贴侧墙 —— 不需要额外的「-vertical」key 或持久化方向字段。
*/
const PREFIX = "pisell-floor-map-layout";
const I18N = "pisell-floor-map-layout.builtin-shape";
function FloorMapBuiltinShapeElement(props) {
	const { builtinShapeKey, name, fillColor, strokeColor } = props;
	const def = require_floorMapBuiltinShapes.getFloorMapBuiltinShapeDef(builtinShapeKey);
	const fallbackLabel = name != null && String(name).trim() ? String(name).trim() : _pisell_utils.locales.getText(`${I18N}.default-name`);
	/**
	* 测量容器宽高用于「方向自适应」。仅在 `def.orientationAware === true` 时
	* 真正订阅 ResizeObserver；其它图形不付任何 JS 成本（保持原有零开销）。
	* 初始用同步 `getBoundingClientRect()` 喂一帧，避免首次 paint 出现「先横后旋」
	* 的闪烁。
	*/
	const orientationAware = !!(def === null || def === void 0 ? void 0 : def.orientationAware);
	const wrapperRef = (0, react.useRef)(null);
	const [size, setSize] = (0, react.useState)(null);
	(0, react.useLayoutEffect)(() => {
		if (!orientationAware) return;
		const el = wrapperRef.current;
		if (!el) return;
		const measure = (w, h) => {
			setSize((prev) => prev && prev.w === w && prev.h === h ? prev : {
				w,
				h
			});
		};
		const rect = el.getBoundingClientRect();
		measure(rect.width, rect.height);
		const ro = new ResizeObserver((entries) => {
			const e = entries[0];
			if (!e) return;
			measure(e.contentRect.width, e.contentRect.height);
		});
		ro.observe(el);
		return () => ro.disconnect();
	}, [orientationAware]);
	if (!def) return /* @__PURE__ */ react.default.createElement("div", {
		className: `${PREFIX}-builtin-shape-placeholder`,
		style: {
			width: "100%",
			height: "100%",
			boxSizing: "border-box",
			display: "flex",
			flexDirection: "column",
			alignItems: "center",
			justifyContent: "center",
			padding: 8,
			background: "#fafafa",
			border: "2px dashed #bfbfbf",
			borderRadius: 4,
			fontSize: 11,
			color: "#8c8c8c",
			textAlign: "center",
			lineHeight: 1.4,
			overflow: "hidden"
		}
	}, /* @__PURE__ */ react.default.createElement("span", { style: {
		fontWeight: 600,
		color: "#595959",
		marginBottom: 4
	} }, fallbackLabel), /* @__PURE__ */ react.default.createElement("span", null, _pisell_utils.locales.getText(`${I18N}.hint-no-key`)));
	const isVertical = orientationAware && size != null && size.h > size.w;
	return /* @__PURE__ */ react.default.createElement("div", {
		ref: wrapperRef,
		className: `${PREFIX}-builtin-shape`,
		style: {
			width: "100%",
			height: "100%",
			display: "block",
			position: "relative",
			pointerEvents: "none",
			userSelect: "none",
			overflow: "hidden"
		},
		"aria-label": fallbackLabel,
		role: "img",
		"data-orientation": isVertical ? "vertical" : "horizontal"
	}, isVertical ? /* @__PURE__ */ react.default.createElement(
		"div",
		/**
		* 容器更高时，让内层方框 swap dims（h × w），再 `rotate(90deg)`：
		* - 旋转前框尺寸 = 父容器 height × width；
		* - 旋转后视觉占位 = 父容器 width × height（刚好填满）；
		* - SVG 在内层用 100% 宽高，最终图形按原始横向 viewBox 比例缩放并旋转，
		*   保持沙发坐垫 / 大门门扇等细节比例不被压扁。
		*/
		{ style: {
			position: "absolute",
			left: "50%",
			top: "50%",
			width: size.h,
			height: size.w,
			transform: "translate(-50%, -50%) rotate(90deg)",
			transformOrigin: "center center"
		} },
		def.render({
			fillColor,
			strokeColor
		})
	) : def.render({
		fillColor,
		strokeColor
	}));
}
//#endregion
exports.FloorMapBuiltinShapeElement = FloorMapBuiltinShapeElement;
