@pisell/materials 1.8.41 → 1.8.42

package/es/components/pisellFloorMapLayout/types.js

@@ -8,5 +8,11 @@ const FLOOR_MAP_STAGE_ELEMENT_KIND = "stage";
 * 图片图元：无数据源绑定，通过 `imageUrl` 展示位图；适合铺底图或与业务图元叠放（调 `zIndex`）。
 */
 const FLOOR_MAP_IMAGE_ELEMENT_KIND = "floorMapImage";
+/**
+* 内置图形图元：无数据源绑定，通过 `builtinShapeKey` 在内置枚举（厕所 / 分隔 / 柱子 /
+* 沙发 / 大门）中选择预设图形。形状由 {@link FLOOR_MAP_BUILTIN_SHAPES} 驱动，
+* 与图片图元等同地铺底 / 标记场地结构。
+*/
+const FLOOR_MAP_BUILTIN_SHAPE_ELEMENT_KIND = "floorMapBuiltinShape";
 //#endregion
-export { FLOOR_MAP_IMAGE_ELEMENT_KIND, FLOOR_MAP_STAGE_ELEMENT_KIND };
+export { FLOOR_MAP_BUILTIN_SHAPE_ELEMENT_KIND, FLOOR_MAP_IMAGE_ELEMENT_KIND, FLOOR_MAP_STAGE_ELEMENT_KIND };

package/es/components/pisellFloorMapLayout/utils/floorMapBuiltinShapes.d.ts

@@ -0,0 +1,46 @@
+import React from "react";
+
+//#region src/components/pisellFloorMapLayout/utils/floorMapBuiltinShapes.d.ts
+/** 内置图形渲染函数共享 props（容器已限定 100% 宽高） */
+interface FloorMapBuiltinShapeRenderProps {
+  /** 主体填充色（壳层为浅灰），允许通过 sceneElement.fillColor 覆盖 */
+  fillColor?: string;
+  /** 描边色，允许通过 sceneElement.strokeColor 覆盖 */
+  strokeColor?: string;
+}
+interface FloorMapBuiltinShapeDef {
+  key: string;
+  /** i18n 文案 key（在 locales.ts 中维护中英繁日葡） */
+  labelKey: string;
+  /** 调色板落点时的默认像素尺寸；比例与 viewBox 对齐，避免落点后立刻变形 */
+  defaultSize: {
+    width: number;
+    height: number;
+  };
+  /** 内置 SVG 渲染（按 viewBox 比例缩放，容器变化时居中保比例） */
+  render: (props: FloorMapBuiltinShapeRenderProps) => React.ReactElement;
+  /**
+   * 是否随容器宽高自动切换横/竖方向。
+   * - `true`：容器高 > 宽时，wrapper 自动给整张图形 rotate 90deg，让图形在画
+   *   布上看起来始终「贴墙 / 贴边」。比追加一个 `*-vertical` key 更直观，
+   *   也不需要持久化方向，纯几何 fit。
+   * - 默认 `false`（厕所 / 柱子 / 分隔等无方向语义或自带 stretch 策略的图形）。
+   */
+  orientationAware?: boolean;
+}
+/**
+ * 内置图形预设清单（顺序即调色板 / 编辑面板下拉的展示顺序）。
+ * `defaultSize` 比例严格跟随对应 SVG 的 viewBox：
+ * - 厕所 / 柱子 / 大门：正方形（viewBox 100×100）
+ * - 分隔：viewBox 100×100，但渲染层用 `preserveAspectRatio="none"`，
+ *   `defaultSize` 给个常用的瘦高比例（32×160）作为「默认竖分隔」落点，
+ *   用户可直接拖宽变横分隔，不需要换 key。
+ * - 沙发：2:1 水平（viewBox 200×100）
+ *
+ * 新增预设：在此追加一项即可，编辑面板 / 调色板 / fallback 渲染会自动适配。
+ */
+declare const FLOOR_MAP_BUILTIN_SHAPES: FloorMapBuiltinShapeDef[];
+/** 通过 key 查找预设，未命中返回 undefined（让上层显示「未选择」占位） */
+declare function getFloorMapBuiltinShapeDef(key: string | undefined): FloorMapBuiltinShapeDef | undefined;
+//#endregion
+export { FLOOR_MAP_BUILTIN_SHAPES, FloorMapBuiltinShapeDef, FloorMapBuiltinShapeRenderProps, getFloorMapBuiltinShapeDef };

package/es/components/pisellFloorMapLayout/utils/floorMapBuiltinShapes.js

@@ -0,0 +1,533 @@
+import React from "react";
+//#region src/components/pisellFloorMapLayout/utils/floorMapBuiltinShapes.tsx
+/**
+* 内置图形图元（`floorMapBuiltinShape`）的预设清单。
+*
+* 每个预设：
+* - `key`：持久化在 `sceneElement.builtinShapeKey`，跨语言稳定；
+* - `labelKey`：展示名 i18n key（在 `locales.ts` / `-ja` / `-pt` 中维护）；
+* - `defaultSize`：调色板落点 / 切换 kind 时的初始像素尺寸，比例与下文 viewBox 一致；
+* - `render(props)`：内置 SVG 图形（统一 `preserveAspectRatio="xMidYMid meet"`，
+*   按 viewBox 自然比例缩放并居中，容器尺寸变化时不会被拉伸变形）。
+*
+* 不引入图片资源 / 字体图标，全部 inline SVG，避免额外构建依赖与请求。
+*/
+const I18N_PREFIX = "pisell-floor-map-layout.builtin-shape";
+/**
+* 通用 SVG 包装：所有内置图形默认 `xMidYMid meet`，按 viewBox 比例缩放并居中，
+* 容器尺寸变化时不会被拉伸变形（之前的 `none` 会让图形随容器宽高比扭曲，是
+* 5 种图形在矩形容器里全部失真的根本原因）。
+*
+* 个别图形（如「分隔」纯色填充条）显式传 `preserveAspectRatio="none"`，让图
+* 形随容器宽高自由伸展，从而支持「横向 / 纵向同一个 key 通过拖宽 / 拖高自然
+* 切换」的语义。
+*/
+function ShapeSvg(props) {
+	const { children, viewBox, preserveAspectRatio = "xMidYMid meet" } = props;
+	return /* @__PURE__ */ React.createElement("svg", {
+		width: "100%",
+		height: "100%",
+		viewBox,
+		preserveAspectRatio,
+		xmlns: "http://www.w3.org/2000/svg",
+		style: {
+			display: "block",
+			pointerEvents: "none",
+			overflow: "visible"
+		}
+	}, children);
+}
+/** 默认主色 / 描边色：偏中性灰，与地面其它图元（房间 / 桌位）调性一致 */
+const DEFAULT_FILL = "#f1f3f5";
+const DEFAULT_STROKE = "#6b7280";
+/**
+* 厕所：标准公共卫生间「男 / 女」标识牌——外圈圆角牌底，中间一道竖分隔，
+* 左侧男（圆头 + 直筒身 + 双腿），右侧女（圆头 + 梯形裙 + 双腿）。
+* 比 CAD 坐便器俯视图远观更容易识别为「厕所」，跟其它平面图元（沙发 / 大门
+* 等也用图标化剪影）保持同一语言。
+* 人形与分隔线统一使用 `stroke` 色，整体牌底用 `fill`，跟 `sceneElement` 的
+* `fillColor` / `strokeColor` 覆盖保持联动。
+*/
+function renderToilet(props) {
+	var _props$fillColor, _props$strokeColor;
+	const fill = (_props$fillColor = props.fillColor) !== null && _props$fillColor !== void 0 ? _props$fillColor : DEFAULT_FILL;
+	const stroke = (_props$strokeColor = props.strokeColor) !== null && _props$strokeColor !== void 0 ? _props$strokeColor : DEFAULT_STROKE;
+	return /* @__PURE__ */ React.createElement(ShapeSvg, { viewBox: "0 0 100 100" }, /* @__PURE__ */ React.createElement("rect", {
+		x: "3",
+		y: "3",
+		width: "94",
+		height: "94",
+		rx: "8",
+		ry: "8",
+		fill,
+		stroke,
+		strokeWidth: "2.5"
+	}), /* @__PURE__ */ React.createElement("line", {
+		x1: "50",
+		y1: "14",
+		x2: "50",
+		y2: "86",
+		stroke,
+		strokeOpacity: "0.45",
+		strokeWidth: "1.5"
+	}), /* @__PURE__ */ React.createElement("circle", {
+		cx: "28",
+		cy: "22",
+		r: "6.5",
+		fill: stroke
+	}), /* @__PURE__ */ React.createElement("rect", {
+		x: "22",
+		y: "31",
+		width: "12",
+		height: "20",
+		rx: "2",
+		fill: stroke
+	}), /* @__PURE__ */ React.createElement("rect", {
+		x: "22",
+		y: "48",
+		width: "4.5",
+		height: "28",
+		rx: "1.5",
+		fill: stroke
+	}), /* @__PURE__ */ React.createElement("rect", {
+		x: "29.5",
+		y: "48",
+		width: "4.5",
+		height: "28",
+		rx: "1.5",
+		fill: stroke
+	}), /* @__PURE__ */ React.createElement("circle", {
+		cx: "72",
+		cy: "22",
+		r: "6.5",
+		fill: stroke
+	}), /* @__PURE__ */ React.createElement("path", {
+		d: "M 65 31 L 79 31 L 86 60 L 58 60 Z",
+		fill: stroke
+	}), /* @__PURE__ */ React.createElement("rect", {
+		x: "66",
+		y: "58",
+		width: "4.5",
+		height: "18",
+		rx: "1.5",
+		fill: stroke
+	}), /* @__PURE__ */ React.createElement("rect", {
+		x: "73.5",
+		y: "58",
+		width: "4.5",
+		height: "18",
+		rx: "1.5",
+		fill: stroke
+	}));
+}
+/**
+* 分隔：纯色填充条。`preserveAspectRatio="none"` 让单一矩形随容器自然 stretch，
+* 因此「横分隔 / 竖分隔」用同一个 builtinShapeKey，只需拖宽或拖高即可切换：
+* - 拖成扁宽矩形 → 横向分隔条
+* - 拖成瘦高矩形 → 纵向分隔条
+* 不再画顶/底端帽 / 中分线等装饰元素，避免它们随 stretch 一起变形成奇怪的椭圆
+* / 斜条；内部就是 `fill` 实心矩形，`stroke` 若提供则作为外缘细描边，方便在
+* 同色画布上仍可见边界。
+*/
+function renderDivider(props) {
+	var _props$fillColor2, _props$strokeColor2;
+	const fill = (_props$fillColor2 = props.fillColor) !== null && _props$fillColor2 !== void 0 ? _props$fillColor2 : "#7a818c";
+	const stroke = (_props$strokeColor2 = props.strokeColor) !== null && _props$strokeColor2 !== void 0 ? _props$strokeColor2 : "#3f4651";
+	return /* @__PURE__ */ React.createElement(ShapeSvg, {
+		viewBox: "0 0 100 100",
+		preserveAspectRatio: "none"
+	}, /* @__PURE__ */ React.createElement("rect", {
+		x: "0",
+		y: "0",
+		width: "100",
+		height: "100",
+		fill,
+		stroke,
+		strokeWidth: "1",
+		vectorEffect: "non-scaling-stroke"
+	}));
+}
+/**
+* 柱子：建筑平面图常见的「实心圆 + 外细圈」结构柱标识；填充深灰，
+* 外圈细线让圆柱与场地装饰图层有视觉边界。
+*/
+function renderColumn(props) {
+	var _props$fillColor3, _props$strokeColor3;
+	const fill = (_props$fillColor3 = props.fillColor) !== null && _props$fillColor3 !== void 0 ? _props$fillColor3 : "#4b5563";
+	const stroke = (_props$strokeColor3 = props.strokeColor) !== null && _props$strokeColor3 !== void 0 ? _props$strokeColor3 : "#1f2937";
+	return /* @__PURE__ */ React.createElement(ShapeSvg, { viewBox: "0 0 100 100" }, /* @__PURE__ */ React.createElement("circle", {
+		cx: "50",
+		cy: "50",
+		r: "40",
+		fill: "none",
+		stroke,
+		strokeWidth: "1.5",
+		opacity: "0.5"
+	}), /* @__PURE__ */ React.createElement("circle", {
+		cx: "50",
+		cy: "50",
+		r: "34",
+		fill,
+		stroke,
+		strokeWidth: "2"
+	}), /* @__PURE__ */ React.createElement("circle", {
+		cx: "42",
+		cy: "42",
+		r: "6",
+		fill: "#ffffff",
+		opacity: "0.18"
+	}));
+}
+/**
+* 沙发：三人位正面 / 俯前视。结构「靠背 3 凸 + 主体框 + 两侧扶手 + 3 块坐垫 +
+* 2 只脚」，与常见 icon set（Lucide / Material couch）的剪影一致；远观易辨识。
+*/
+function renderSofa(props) {
+	var _props$fillColor4, _props$strokeColor4;
+	const fill = (_props$fillColor4 = props.fillColor) !== null && _props$fillColor4 !== void 0 ? _props$fillColor4 : "#cbd2dc";
+	const stroke = (_props$strokeColor4 = props.strokeColor) !== null && _props$strokeColor4 !== void 0 ? _props$strokeColor4 : "#4b5563";
+	const cushion = props.fillColor ? props.fillColor : "#eef1f6";
+	return /* @__PURE__ */ React.createElement(ShapeSvg, { viewBox: "0 0 200 100" }, /* @__PURE__ */ React.createElement("rect", {
+		x: "14",
+		y: "8",
+		width: "54",
+		height: "32",
+		rx: "14",
+		ry: "14",
+		fill,
+		stroke,
+		strokeWidth: "2"
+	}), /* @__PURE__ */ React.createElement("rect", {
+		x: "73",
+		y: "8",
+		width: "54",
+		height: "32",
+		rx: "14",
+		ry: "14",
+		fill,
+		stroke,
+		strokeWidth: "2"
+	}), /* @__PURE__ */ React.createElement("rect", {
+		x: "132",
+		y: "8",
+		width: "54",
+		height: "32",
+		rx: "14",
+		ry: "14",
+		fill,
+		stroke,
+		strokeWidth: "2"
+	}), /* @__PURE__ */ React.createElement("rect", {
+		x: "4",
+		y: "34",
+		width: "192",
+		height: "52",
+		rx: "12",
+		ry: "12",
+		fill,
+		stroke,
+		strokeWidth: "2.2"
+	}), /* @__PURE__ */ React.createElement("rect", {
+		x: "4",
+		y: "44",
+		width: "24",
+		height: "42",
+		rx: "8",
+		ry: "8",
+		fill: stroke,
+		opacity: "0.2"
+	}), /* @__PURE__ */ React.createElement("rect", {
+		x: "172",
+		y: "44",
+		width: "24",
+		height: "42",
+		rx: "8",
+		ry: "8",
+		fill: stroke,
+		opacity: "0.2"
+	}), /* @__PURE__ */ React.createElement("rect", {
+		x: "32",
+		y: "48",
+		width: "44",
+		height: "32",
+		rx: "6",
+		ry: "6",
+		fill: cushion,
+		stroke,
+		strokeOpacity: "0.4",
+		strokeWidth: "1"
+	}), /* @__PURE__ */ React.createElement("rect", {
+		x: "78",
+		y: "48",
+		width: "44",
+		height: "32",
+		rx: "6",
+		ry: "6",
+		fill: cushion,
+		stroke,
+		strokeOpacity: "0.4",
+		strokeWidth: "1"
+	}), /* @__PURE__ */ React.createElement("rect", {
+		x: "124",
+		y: "48",
+		width: "44",
+		height: "32",
+		rx: "6",
+		ry: "6",
+		fill: cushion,
+		stroke,
+		strokeOpacity: "0.4",
+		strokeWidth: "1"
+	}), /* @__PURE__ */ React.createElement("rect", {
+		x: "14",
+		y: "86",
+		width: "8",
+		height: "10",
+		rx: "2",
+		fill: stroke
+	}), /* @__PURE__ */ React.createElement("rect", {
+		x: "178",
+		y: "86",
+		width: "8",
+		height: "10",
+		rx: "2",
+		fill: stroke
+	}));
+}
+/**
+* 大门：标准 CAD 单开门符号。
+* - 底部一段实心粗墙体（左 / 右两段，中间留门洞）；
+* - 门扇从左侧合页位垂直立起（90° 开），用一根粗短矩形表示门扇厚度；
+* - 90° 虚线弧表示门扇旋转范围；
+* - 合页位有一个小圆点作为铰链标记，明确开门方向。
+*/
+/**
+* 俯视角五瓣花：`r` 为花冠半径，花瓣椭圆放射排列 + 花心圆。
+* 花盆顶部用 2～3 朵不同尺度的花 + 少量绿叶，避免只剩「几团圆叶像草」。
+*/
+function FlowerHead(props) {
+	const { cx, cy, r, petalFill, petalStroke, centerFill } = props;
+	return /* @__PURE__ */ React.createElement("g", { transform: `translate(${cx}, ${cy})` }, [
+		0,
+		72,
+		144,
+		216,
+		288
+	].map((deg) => /* @__PURE__ */ React.createElement("ellipse", {
+		key: deg,
+		cx: "0",
+		cy: -r * .52,
+		rx: r * .38,
+		ry: r * .58,
+		fill: petalFill,
+		stroke: petalStroke,
+		strokeWidth: "1",
+		transform: `rotate(${deg})`
+	})), /* @__PURE__ */ React.createElement("circle", {
+		r: r * .24,
+		fill: centerFill,
+		stroke: petalStroke,
+		strokeWidth: "0.9"
+	}));
+}
+/**
+* 花盆：梯形盆体 + 盆沿；顶部 3 朵五瓣花（大中小）+ 两片托叶。
+* 花色 / 叶色用固定装饰色，不跟 `fillColor` 绑定，避免整株变成单色块；
+* 盆体仍吃 `fillColor` / `strokeColor` 覆盖。
+*/
+function renderFlowerPot(props) {
+	var _props$fillColor5, _props$strokeColor5;
+	const fill = (_props$fillColor5 = props.fillColor) !== null && _props$fillColor5 !== void 0 ? _props$fillColor5 : "#e8ece4";
+	const stroke = (_props$strokeColor5 = props.strokeColor) !== null && _props$strokeColor5 !== void 0 ? _props$strokeColor5 : "#4b5563";
+	const petalFill = "#fce7f3";
+	const petalStroke = "#db2777";
+	const centerFill = "#fbbf24";
+	const leafFill = "#86efac";
+	const leafStroke = "#15803d";
+	return /* @__PURE__ */ React.createElement(ShapeSvg, { viewBox: "0 0 100 100" }, /* @__PURE__ */ React.createElement("path", {
+		d: "M 22 42 L 78 42 L 68 88 L 32 88 Z",
+		fill,
+		stroke,
+		strokeWidth: "2",
+		strokeLinejoin: "round"
+	}), /* @__PURE__ */ React.createElement("ellipse", {
+		cx: "50",
+		cy: "42",
+		rx: "30",
+		ry: "7",
+		fill,
+		stroke,
+		strokeWidth: "2"
+	}), /* @__PURE__ */ React.createElement("ellipse", {
+		cx: "50",
+		cy: "40",
+		rx: "26",
+		ry: "5",
+		fill: stroke,
+		opacity: "0.12"
+	}), /* @__PURE__ */ React.createElement("ellipse", {
+		cx: "38",
+		cy: "36",
+		rx: "10",
+		ry: "5",
+		fill: leafFill,
+		stroke: leafStroke,
+		strokeWidth: "1",
+		transform: "rotate(-18 38 36)"
+	}), /* @__PURE__ */ React.createElement("ellipse", {
+		cx: "62",
+		cy: "36",
+		rx: "10",
+		ry: "5",
+		fill: leafFill,
+		stroke: leafStroke,
+		strokeWidth: "1",
+		transform: "rotate(18 62 36)"
+	}), /* @__PURE__ */ React.createElement(FlowerHead, {
+		cx: 50,
+		cy: 22,
+		r: 13,
+		petalFill,
+		petalStroke,
+		centerFill
+	}), /* @__PURE__ */ React.createElement(FlowerHead, {
+		cx: 33,
+		cy: 30,
+		r: 9,
+		petalFill,
+		petalStroke,
+		centerFill
+	}), /* @__PURE__ */ React.createElement(FlowerHead, {
+		cx: 67,
+		cy: 30,
+		r: 9,
+		petalFill,
+		petalStroke,
+		centerFill
+	}));
+}
+function renderDoor(props) {
+	var _props$fillColor6, _props$strokeColor6;
+	const fill = (_props$fillColor6 = props.fillColor) !== null && _props$fillColor6 !== void 0 ? _props$fillColor6 : "#f8fafc";
+	const stroke = (_props$strokeColor6 = props.strokeColor) !== null && _props$strokeColor6 !== void 0 ? _props$strokeColor6 : "#1f2937";
+	return /* @__PURE__ */ React.createElement(ShapeSvg, { viewBox: "0 0 100 100" }, /* @__PURE__ */ React.createElement("rect", {
+		x: "0",
+		y: "0",
+		width: "100",
+		height: "100",
+		fill,
+		opacity: "0"
+	}), /* @__PURE__ */ React.createElement("rect", {
+		x: "0",
+		y: "80",
+		width: "22",
+		height: "12",
+		rx: "1",
+		fill: stroke
+	}), /* @__PURE__ */ React.createElement("rect", {
+		x: "80",
+		y: "80",
+		width: "20",
+		height: "12",
+		rx: "1",
+		fill: stroke
+	}), /* @__PURE__ */ React.createElement("rect", {
+		x: "18",
+		y: "14",
+		width: "6",
+		height: "72",
+		rx: "2",
+		ry: "2",
+		fill: stroke
+	}), /* @__PURE__ */ React.createElement("circle", {
+		cx: "21",
+		cy: "86",
+		r: "3.5",
+		fill: "#ffffff",
+		stroke,
+		strokeWidth: "1.5"
+	}), /* @__PURE__ */ React.createElement("path", {
+		d: "M 24 16 A 64 64 0 0 1 84 86",
+		fill: "none",
+		stroke,
+		strokeOpacity: "0.65",
+		strokeWidth: "1.6",
+		strokeDasharray: "5 4"
+	}));
+}
+/**
+* 内置图形预设清单（顺序即调色板 / 编辑面板下拉的展示顺序）。
+* `defaultSize` 比例严格跟随对应 SVG 的 viewBox：
+* - 厕所 / 柱子 / 大门：正方形（viewBox 100×100）
+* - 分隔：viewBox 100×100，但渲染层用 `preserveAspectRatio="none"`，
+*   `defaultSize` 给个常用的瘦高比例（32×160）作为「默认竖分隔」落点，
+*   用户可直接拖宽变横分隔，不需要换 key。
+* - 沙发：2:1 水平（viewBox 200×100）
+*
+* 新增预设：在此追加一项即可，编辑面板 / 调色板 / fallback 渲染会自动适配。
+*/
+const FLOOR_MAP_BUILTIN_SHAPES = [
+	{
+		key: "toilet",
+		labelKey: `${I18N_PREFIX}.toilet`,
+		defaultSize: {
+			width: 96,
+			height: 96
+		},
+		render: renderToilet
+	},
+	{
+		key: "divider",
+		labelKey: `${I18N_PREFIX}.divider`,
+		defaultSize: {
+			width: 32,
+			height: 160
+		},
+		render: renderDivider
+	},
+	{
+		key: "column",
+		labelKey: `${I18N_PREFIX}.column`,
+		defaultSize: {
+			width: 72,
+			height: 72
+		},
+		render: renderColumn
+	},
+	{
+		key: "sofa",
+		labelKey: `${I18N_PREFIX}.sofa`,
+		defaultSize: {
+			width: 220,
+			height: 110
+		},
+		render: renderSofa,
+		orientationAware: true
+	},
+	{
+		key: "door",
+		labelKey: `${I18N_PREFIX}.door`,
+		defaultSize: {
+			width: 96,
+			height: 96
+		},
+		render: renderDoor,
+		orientationAware: true
+	},
+	{
+		key: "flowerPot",
+		labelKey: `${I18N_PREFIX}.flower-pot`,
+		defaultSize: {
+			width: 80,
+			height: 96
+		},
+		render: renderFlowerPot
+	}
+];
+/** 通过 key 查找预设，未命中返回 undefined（让上层显示「未选择」占位） */
+function getFloorMapBuiltinShapeDef(key) {
+	if (!key) return void 0;
+	return FLOOR_MAP_BUILTIN_SHAPES.find((s) => s.key === key);
+}
+//#endregion
+export { FLOOR_MAP_BUILTIN_SHAPES, getFloorMapBuiltinShapeDef };