@pisell/materials 1.8.54 → 1.8.56

package/es/components/pisellFloorMapLayout/components/FloorMapToolbar.js

@@ -1,13 +1,14 @@
 import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
 import { FLOOR_MAP_BUILTIN_SHAPE_ELEMENT_KIND, FLOOR_MAP_IMAGE_ELEMENT_KIND, FLOOR_MAP_STAGE_ELEMENT_KIND } from "../types.js";
 import { FLOOR_MAP_BUILTIN_SHAPES } from "../utils/floorMapBuiltinShapes.js";
-import { resolveDataBindingPolicy } from "../utils/floorMapElementKindUtils.js";
+import { FLOOR_MAP_RESOURCE_PLACE_DEFAULT, isDirectPlacePaletteKind, resolveDataBindingPolicy } from "../utils/floorMapElementKindUtils.js";
 import { FLOOR_MAP_PALETTE_DRAG_MIME } from "../utils/floorMapDropUtils.js";
-import { formatDataRecordOptionLabel } from "../utils/floorMapDataRecordLabel.js";
 import { FLOOR_MAP_LAYOUT_CLASS_PREFIX, FLOOR_MAP_PHONE_TOOLBAR_DRAWER_Z_INDEX } from "../floorMapLayoutConstants.js";
-import React, { useCallback, useMemo, useState } from "react";
+import { buildToolbarPaletteEntries, getPaletteSidebarVisibleEntries, shouldShowPaletteViewAll } from "../utils/floorMapToolbarPalette.js";
+import FloorMapToolbarViewAllModal from "./FloorMapToolbarViewAllModal.js";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { locales } from "@pisell/utils";
-import { Drawer, Select } from "antd";
+import { Drawer, message } from "antd";
 import { LeftOutlined, RightOutlined } from "@ant-design/icons";
 import classNames from "classnames";
 import "./FloorMapToolbar.less";
@@ -16,12 +17,26 @@ import "./FloorMapToolbar.less";
 * FloorMapToolbar - 编辑态左侧侧边栏：按分类添加图元、绑定数据源与行；保存可选（默认用顶栏）
 */
 const I18N_TB = "pisell-floor-map-layout.toolbar";
-const I18N_EP_DS = "pisell-floor-map-layout.edit-panel.ph-data-source";
-const DEFAULT_PLACEMENT_SIZE = {
-	width: 180,
-	height: 120
-};
+/** 绑定类图元：解析默认数据源 key（allowedDataSourceKeys 与 dataSources 交集的首项） */
+function resolveBindingDataSourceKey(kind, dataSources) {
+	var _kind$allowedDataSour;
+	const allKeys = Object.keys(dataSources !== null && dataSources !== void 0 ? dataSources : {});
+	return (((_kind$allowedDataSour = kind.allowedDataSourceKeys) === null || _kind$allowedDataSour === void 0 ? void 0 : _kind$allowedDataSour.length) ? kind.allowedDataSourceKeys.filter((x) => allKeys.includes(x)) : allKeys)[0];
+}
+const DEFAULT_PLACEMENT_SIZE = FLOOR_MAP_RESOURCE_PLACE_DEFAULT;
 const DEFAULT_DECORATION_SIZE = 48;
+/**
+* 侧栏 palette 预览：按 cell 尺寸 contain 缩放，并在 cell 内水平/垂直居中。
+* 避免瘦高图形（分隔 / 门）因 `transform-origin: top left` 贴左显示。
+*/
+function getToolbarPreviewScaledStyle(cellW, cellH, contentW, contentH) {
+	return {
+		width: contentW,
+		height: contentH,
+		transform: `translate(-50%, -50%) scale(${Math.min(cellW / contentW, cellH / contentH)})`,
+		transformOrigin: "center center"
+	};
+}
 function getUnplacedRecordsForKey(dataSourceKey, dataSources, elements) {
 	var _dataSources$dataSour;
 	const used = new Set(elements.filter((e) => {
@@ -71,13 +86,50 @@ const BUILTIN_SHAPE_PREVIEW_SIZE = {
 	width: 96,
 	height: 96
 };
+/** 侧栏 palette 预览 cell 基准尺寸（再乘 {@link SIDEBAR_PALETTE_PREVIEW_SCALE}） */
+const PALETTE_PREVIEW_CELL_BASE = {
+	stage: {
+		w: 92,
+		h: 40
+	},
+	placement: {
+		w: 80,
+		h: 54
+	}
+};
+/** 侧栏缩略图相对历史尺寸：现为原先一半（stage 46×20、placement 40×27、装饰 24×24） */
+const SIDEBAR_PALETTE_PREVIEW_SCALE = .5;
+/** 「查看全部」弹窗内预览与侧栏同尺寸（相对历史全尺寸仍为 0.5） */
+const MODAL_PALETTE_PREVIEW_SCALE_RELATIVE_TO_SIDEBAR = 1;
+function resolvePalettePreviewScale(modal) {
+	return modal ? SIDEBAR_PALETTE_PREVIEW_SCALE * MODAL_PALETTE_PREVIEW_SCALE_RELATIVE_TO_SIDEBAR : SIDEBAR_PALETTE_PREVIEW_SCALE;
+}
+function scalePalettePreviewCell(n, modal) {
+	return Math.max(8, Math.round(n * resolvePalettePreviewScale(modal)));
+}
+/** 侧栏 / 弹窗 palette 预览区外框尺寸 */
+function getPalettePreviewCellSize(options) {
+	const { isStage, placementLike, decorationPreviewSize, modal = false } = options;
+	const baseW = isStage ? PALETTE_PREVIEW_CELL_BASE.stage.w : placementLike ? PALETTE_PREVIEW_CELL_BASE.placement.w : decorationPreviewSize;
+	const baseH = isStage ? PALETTE_PREVIEW_CELL_BASE.stage.h : placementLike ? PALETTE_PREVIEW_CELL_BASE.placement.h : decorationPreviewSize;
+	return {
+		cellW: scalePalettePreviewCell(baseW, modal),
+		cellH: scalePalettePreviewCell(baseH, modal)
+	};
+}
 function FloorMapToolbar(props) {
-	const { config, dataSources, dataSourceLabels = {}, canCreate, placeMode, onPlaceModeChange, renderPreviewItem, placementPreviewSize = DEFAULT_PLACEMENT_SIZE, decorationPreviewSize = DEFAULT_DECORATION_SIZE, sceneElements = [], onSave, saving, saveError, layoutDirty, className, onPaletteCardPointerDown, consumeToolbarClickIfTouchDrag, phoneLayout = false, defaultCollapsed = false, onRequestPlaceAtCanvasCenter } = props;
+	var _resourcePickerCtx$mo;
+	const { config, dataSources, dataSourceLabels = {}, canCreate, placeMode, onPlaceModeChange, renderPreviewItem, placementPreviewSize = DEFAULT_PLACEMENT_SIZE, decorationPreviewSize = DEFAULT_DECORATION_SIZE, sceneElements = [], onSave, saving, saveError, layoutDirty, className, onPaletteCardPointerDown, consumeToolbarClickIfTouchDrag, phoneLayout = false, defaultCollapsed = false, onRequestPlaceAtCanvasCenter, paletteSidebarVisibleLimit, onBulkAddPaletteToCanvas, onDirectPlacePaletteItem, onResourcePickerConfirmPlace, renderResourcePickerModal } = props;
 	/**
 	* 侧栏收起 / 展开：仅会话内状态，**不写入 localStorage**。
 	* 桌面默认展开；手机编辑态可由 `defaultCollapsed` 默认收起。
 	*/
 	const [collapsed, setCollapsed] = useState(() => defaultCollapsed === true);
+	/** 当前打开的「查看全部」弹窗所属分类（任意分类超过展示上限时触发） */
+	const [viewAllModal, setViewAllModal] = useState(null);
+	/** 新建绑定类图元：在弹窗内选择数据行（替代侧栏 Select 多选） */
+	const [resourcePickerOpen, setResourcePickerOpen] = useState(false);
+	const [resourcePickerCtx, setResourcePickerCtx] = useState(null);
 	const handleToggleCollapsed = useCallback(() => {
 		setCollapsed((prev) => !prev);
 	}, []);
@@ -110,40 +162,212 @@ function FloorMapToolbar(props) {
 		}
 		return map;
 	}, [categories, paletteKinds]);
-	const handleSelectKind = (kind) => {
-		const next = {
+	const paletteEntriesByCategory = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const c of categories) {
+			var _kindsByCategory$get;
+			const kinds = (_kindsByCategory$get = kindsByCategory.get(c.id)) !== null && _kindsByCategory$get !== void 0 ? _kindsByCategory$get : [];
+			map.set(c.id, buildToolbarPaletteEntries(kinds, (shapeDef) => locales.getText(shapeDef.labelKey)));
+		}
+		return map;
+	}, [categories, kindsByCategory]);
+	const directPlacePaletteItem = (item) => {
+		onDirectPlacePaletteItem === null || onDirectPlacePaletteItem === void 0 || onDirectPlacePaletteItem(item);
+		onPlaceModeChange(null);
+	};
+	const cancelPlaceMode = () => {
+		onPlaceModeChange(null);
+		setResourcePickerOpen(false);
+		setResourcePickerCtx(null);
+	};
+	/**
+	* 绑定类图元：自动选定数据源并打开资源筛选弹窗（不再在侧栏先选单选项数据源）。
+	*/
+	const openResourcePickerForBindingKind = useCallback((kind, carryMode) => {
+		const key = resolveBindingDataSourceKey(kind, dataSources);
+		if (!key) {
+			message.warning(locales.getText(`${I18N_TB}.no-data-sources`));
+			setResourcePickerOpen(false);
+			setResourcePickerCtx(null);
+			return;
+		}
+		const unplaced = getUnplacedRecordsForKey(key, dataSources, sceneElements);
+		const sameKind = (carryMode === null || carryMode === void 0 ? void 0 : carryMode.elementKind) === kind.value ? carryMode : void 0;
+		const mode = {
 			type: "scene",
 			elementKind: kind.value,
-			dataSourceKey: void 0,
-			recordId: void 0
+			dataSourceKey: key,
+			recordId: sameKind === null || sameKind === void 0 ? void 0 : sameKind.recordId,
+			recordIds: sameKind === null || sameKind === void 0 ? void 0 : sameKind.recordIds
 		};
-		onPlaceModeChange((placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === "scene" && placeMode.elementKind === kind.value ? null : next);
-	};
-	const handleDsChange = (mode, key) => {
-		onPlaceModeChange(_objectSpread2(_objectSpread2({}, mode), {}, {
+		onPlaceModeChange(mode);
+		setResourcePickerCtx({
+			mode,
 			dataSourceKey: key,
-			recordId: void 0,
-			recordIds: void 0
-		}));
+			records: unplaced
+		});
+		setResourcePickerOpen(true);
+	}, [
+		dataSources,
+		sceneElements,
+		onPlaceModeChange
+	]);
+	const handleSelectKind = (kind) => {
+		/** 装饰分类下无绑定项（如底图图片）：点击即落画布 */
+		if (isDirectPlacePaletteKind(kind)) {
+			setResourcePickerOpen(false);
+			setResourcePickerCtx(null);
+			directPlacePaletteItem({ elementKind: kind.value });
+			return;
+		}
+		if ((placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === "scene" && placeMode.elementKind === kind.value) {
+			cancelPlaceMode();
+			return;
+		}
+		openResourcePickerForBindingKind(kind, (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === "scene" ? placeMode : void 0);
 	};
-	const handleRecordsChange = (mode, ids) => {
-		var _ids$filter;
-		const list = (_ids$filter = ids === null || ids === void 0 ? void 0 : ids.filter(Boolean)) !== null && _ids$filter !== void 0 ? _ids$filter : [];
-		onPlaceModeChange(_objectSpread2(_objectSpread2({}, mode), {}, {
-			recordIds: list.length > 0 ? list : void 0,
-			recordId: void 0
-		}));
+	/** 内置图形（厕所/分隔/柱子等）：点击即落画布，无需再点画布 */
+	const handleSelectBuiltinShape = (kind, shapeKey) => {
+		directPlacePaletteItem({
+			elementKind: kind.value,
+			builtinShapeKey: shapeKey
+		});
 	};
+	const resourcePickerModalProps = resourcePickerOpen && resourcePickerCtx ? {
+		open: true,
+		records: resourcePickerCtx.records,
+		mode: "multiple",
+		value: ((_resourcePickerCtx$mo = resourcePickerCtx.mode.recordIds) === null || _resourcePickerCtx$mo === void 0 ? void 0 : _resourcePickerCtx$mo.length) ? resourcePickerCtx.mode.recordIds : resourcePickerCtx.mode.recordId ? [resourcePickerCtx.mode.recordId] : [],
+		title: dataSourceLabels[resourcePickerCtx.dataSourceKey] ? `${locales.getText(`${I18N_TB}.open-resource-picker`)} — ${dataSourceLabels[resourcePickerCtx.dataSourceKey]}` : locales.getText(`${I18N_TB}.open-resource-picker`),
+		onClose: cancelPlaceMode,
+		onConfirm: (ids) => {
+			var _ids$filter, _onResourcePickerConf;
+			const list = (_ids$filter = ids === null || ids === void 0 ? void 0 : ids.filter(Boolean)) !== null && _ids$filter !== void 0 ? _ids$filter : [];
+			if (list.length === 0) {
+				message.warning(locales.getText(`${I18N_TB}.resource-picker-none-selected`));
+				return;
+			}
+			const scene = _objectSpread2(_objectSpread2({}, resourcePickerCtx.mode), {}, {
+				recordIds: list,
+				recordId: void 0
+			});
+			setResourcePickerOpen(false);
+			setResourcePickerCtx(null);
+			if (!((_onResourcePickerConf = onResourcePickerConfirmPlace === null || onResourcePickerConfirmPlace === void 0 ? void 0 : onResourcePickerConfirmPlace(scene)) !== null && _onResourcePickerConf !== void 0 ? _onResourcePickerConf : false)) onPlaceModeChange(scene);
+		}
+	} : null;
+	const resourcePickerModal = resourcePickerModalProps && renderResourcePickerModal ? renderResourcePickerModal(resourcePickerModalProps) : null;
+	const warnedMissingResourcePickerRef = useRef(false);
+	useEffect(() => {
+		if (!resourcePickerModalProps || renderResourcePickerModal) return;
+		if (warnedMissingResourcePickerRef.current) return;
+		warnedMissingResourcePickerRef.current = true;
+		/**
+		* 通用基础 modal 已下线；业务侧需通过 `renderResourcePickerModal` 注入实现。
+		*/
+		if (typeof console !== "undefined") console.warn("[PisellFloorMapLayout] renderResourcePickerModal 未注入，资源选择弹窗不会渲染。");
+	}, [resourcePickerModalProps, renderResourcePickerModal]);
 	/**
-	* 内置图形 kind：用户在侧栏 Select 切换形状（与资源类切换 dataSource 同款 UX）。
-	* 不清掉 placeMode 本身，仅替换 `builtinShapeKey`；落点 / 拖拽时透传。
+	* 弹窗 / 侧栏缩略图：仅渲染预览 cell，不含落点控件。
+	* @param modal 为 true 时用于「查看全部」弹窗（尺寸与侧栏预览一致）
 	*/
-	const handleBuiltinShapeKeyChange = (mode, key) => {
-		onPlaceModeChange(_objectSpread2(_objectSpread2({}, mode), {}, { builtinShapeKey: key }));
+	const renderPaletteEntryPreview = (entry, modal = false) => {
+		var _item$width, _item$height;
+		const k = entry.kind;
+		const policy = resolveDataBindingPolicy(k);
+		const isStage = k.value === FLOOR_MAP_STAGE_ELEMENT_KIND;
+		const isImageKind = k.value === FLOOR_MAP_IMAGE_ELEMENT_KIND;
+		const isBuiltinShapeKind = k.value === FLOOR_MAP_BUILTIN_SHAPE_ELEMENT_KIND;
+		const placementLike = policy !== "none" && !isStage || isImageKind || isBuiltinShapeKind;
+		const size = entry.shapeDef ? entry.shapeDef.defaultSize : isStage ? STAGE_PREVIEW_SIZE : placementLike ? isImageKind ? IMAGE_PREVIEW_SIZE : isBuiltinShapeKind ? BUILTIN_SHAPE_PREVIEW_SIZE : placementPreviewSize : {
+			width: decorationPreviewSize,
+			height: decorationPreviewSize
+		};
+		const item = buildScenePreviewMergedItem(k, void 0, {
+			width: size.width,
+			height: size.height
+		}, entry.builtinShapeKey);
+		const { cellW, cellH } = getPalettePreviewCellSize({
+			isStage,
+			placementLike,
+			decorationPreviewSize,
+			modal
+		});
+		const previewW = entry.shapeDef ? entry.shapeDef.defaultSize.width : isImageKind ? IMAGE_PREVIEW_SIZE.width : isBuiltinShapeKind ? BUILTIN_SHAPE_PREVIEW_SIZE.width : placementPreviewSize.width;
+		const previewH = entry.shapeDef ? entry.shapeDef.defaultSize.height : isImageKind ? IMAGE_PREVIEW_SIZE.height : isBuiltinShapeKind ? BUILTIN_SHAPE_PREVIEW_SIZE.height : placementPreviewSize.height;
+		const stageW = (_item$width = item.width) !== null && _item$width !== void 0 ? _item$width : cellW;
+		const stageH = (_item$height = item.height) !== null && _item$height !== void 0 ? _item$height : cellH;
+		const contentW = entry.shapeDef ? entry.shapeDef.defaultSize.width : isStage ? stageW : placementLike ? previewW : decorationPreviewSize;
+		const contentH = entry.shapeDef ? entry.shapeDef.defaultSize.height : isStage ? stageH : placementLike ? previewH : decorationPreviewSize;
+		return /* @__PURE__ */ React.createElement("div", {
+			className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-preview-cell`,
+			style: {
+				width: cellW,
+				height: cellH
+			}
+		}, renderPreviewItem ? /* @__PURE__ */ React.createElement("div", {
+			className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-preview-content`,
+			style: getToolbarPreviewScaledStyle(cellW, cellH, contentW, contentH)
+		}, renderPreviewItem(item)) : /* @__PURE__ */ React.createElement("span", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-preview-fallback` }, entry.label));
+	};
+	const paletteViewAllModal = viewAllModal ? /* @__PURE__ */ React.createElement(FloorMapToolbarViewAllModal, {
+		open: true,
+		categoryLabel: viewAllModal.categoryLabel,
+		entries: viewAllModal.entries,
+		onClose: () => setViewAllModal(null),
+		onConfirm: (items) => {
+			onBulkAddPaletteToCanvas === null || onBulkAddPaletteToCanvas === void 0 || onBulkAddPaletteToCanvas(items);
+		},
+		renderEntryPreview: (entry) => renderPaletteEntryPreview(entry, true)
+	}) : null;
+	/** 内置图形：每种预设单独一张 palette 卡，图标与名称直接展开 */
+	const renderBuiltinShapePaletteCard = (kind, shapeDef) => {
+		const shapeLabel = locales.getText(shapeDef.labelKey);
+		const previewW = shapeDef.defaultSize.width;
+		const previewH = shapeDef.defaultSize.height;
+		const { cellW, cellH } = getPalettePreviewCellSize({
+			isStage: false,
+			placementLike: true,
+			decorationPreviewSize
+		});
+		const item = buildScenePreviewMergedItem(kind, void 0, {
+			width: previewW,
+			height: previewH
+		}, shapeDef.key);
+		const paletteDragPayload = {
+			elementKind: kind.value,
+			builtinShapeKey: shapeDef.key
+		};
+		return /* @__PURE__ */ React.createElement("div", {
+			key: `${kind.value}-${shapeDef.key}`,
+			className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-preview-card-wrap`
+		}, /* @__PURE__ */ React.createElement("button", {
+			type: "button",
+			draggable: true,
+			className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-preview-card`,
+			onClick: () => {
+				if (consumeToolbarClickIfTouchDrag === null || consumeToolbarClickIfTouchDrag === void 0 ? void 0 : consumeToolbarClickIfTouchDrag()) return;
+				handleSelectBuiltinShape(kind, shapeDef.key);
+			},
+			onPointerDown: (e) => onPaletteCardPointerDown === null || onPaletteCardPointerDown === void 0 ? void 0 : onPaletteCardPointerDown(paletteDragPayload, e),
+			onDragStart: (e) => {
+				e.dataTransfer.setData(FLOOR_MAP_PALETTE_DRAG_MIME, JSON.stringify(paletteDragPayload));
+				e.dataTransfer.effectAllowed = "copy";
+			},
+			title: locales.getText(`${I18N_TB}.palette-card-title`).replace(/\{name\}/g, shapeLabel)
+		}, /* @__PURE__ */ React.createElement("div", {
+			className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-preview-cell`,
+			style: {
+				width: cellW,
+				height: cellH
+			}
+		}, renderPreviewItem ? /* @__PURE__ */ React.createElement("div", {
+			className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-preview-content`,
+			style: getToolbarPreviewScaledStyle(cellW, cellH, previewW, previewH)
+		}, renderPreviewItem(item)) : /* @__PURE__ */ React.createElement("span", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-preview-fallback` }, shapeLabel)), /* @__PURE__ */ React.createElement("span", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-preview-card-label` }, shapeLabel)));
 	};
-	const cancelPlaceMode = () => onPlaceModeChange(null);
 	const renderKindCard = (k) => {
-		var _placeMode$builtinSha, _FLOOR_MAP_BUILTIN_SH2, _FLOOR_MAP_BUILTIN_SH3, _k$allowedDataSourceK, _FLOOR_MAP_BUILTIN_SH4, _placeMode$builtinSha2, _FLOOR_MAP_BUILTIN_SH5;
+		var _placeMode$builtinSha, _FLOOR_MAP_BUILTIN_SH2, _FLOOR_MAP_BUILTIN_SH3, _item$width2, _item$height2, _k$allowedDataSourceK, _FLOOR_MAP_BUILTIN_SH4;
 		const policy = resolveDataBindingPolicy(k);
 		const isStage = k.value === FLOOR_MAP_STAGE_ELEMENT_KIND;
 		const isImageKind = k.value === FLOOR_MAP_IMAGE_ELEMENT_KIND;
@@ -163,18 +387,20 @@ function FloorMapToolbar(props) {
 		const item = buildScenePreviewMergedItem(k, activeDs, size, activeBuiltinShapeKey);
 		const isActive = (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === "scene" && placeMode.elementKind === k.value;
 		/**
-		* 预览缩略图尺寸：配合 sidebar 124px 抽屉宽度。
-		* stage 92×40、placement-like 80×54、装饰类按 props.decorationPreviewSize（默认 48）。
-		* placeScale / stageScale 都基于 cellW/cellH 推导，改尺寸时缩放因子自动适配。
+		* 预览缩略图尺寸：配合 sidebar 124px 抽屉；相对历史尺寸为一半。
+		* stage 46×20、placement-like 40×27、装饰类 decorationPreviewSize×0.5（默认 24）。
 		*/
-		const cellW = isStage ? 92 : placementLike ? 80 : decorationPreviewSize;
-		const cellH = isStage ? 40 : placementLike ? 54 : decorationPreviewSize;
+		const { cellW, cellH } = getPalettePreviewCellSize({
+			isStage,
+			placementLike,
+			decorationPreviewSize
+		});
 		const previewW = isImageKind ? IMAGE_PREVIEW_SIZE.width : isBuiltinShapeKind ? BUILTIN_SHAPE_PREVIEW_SIZE.width : placementPreviewSize.width;
 		const previewH = isImageKind ? IMAGE_PREVIEW_SIZE.height : isBuiltinShapeKind ? BUILTIN_SHAPE_PREVIEW_SIZE.height : placementPreviewSize.height;
-		const placeScale = placementLike ? Math.min(cellW / previewW, cellH / previewH) : 1;
-		const stageScale = isStage ? Math.min(cellW / item.width, cellH / item.height, 1) : 1;
+		const stageW = (_item$width2 = item.width) !== null && _item$width2 !== void 0 ? _item$width2 : cellW;
+		const stageH = (_item$height2 = item.height) !== null && _item$height2 !== void 0 ? _item$height2 : cellH;
 		const allKeys = Object.keys(dataSources);
-		const allowedKeys = ((_k$allowedDataSourceK = k.allowedDataSourceKeys) === null || _k$allowedDataSourceK === void 0 ? void 0 : _k$allowedDataSourceK.length) ? k.allowedDataSourceKeys.filter((x) => allKeys.includes(x)) : allKeys;
+		!((_k$allowedDataSourceK = k.allowedDataSourceKeys) === null || _k$allowedDataSourceK === void 0) && _k$allowedDataSourceK.length && k.allowedDataSourceKeys.filter((x) => allKeys.includes(x));
 		const paletteDragPayload = _objectSpread2(_objectSpread2({ elementKind: k.value }, (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === "scene" && placeMode.elementKind === k.value ? _objectSpread2({ dataSourceKey: placeMode.dataSourceKey }, placeMode.recordIds && placeMode.recordIds.length > 0 ? { recordIds: placeMode.recordIds } : placeMode.recordId ? { recordId: placeMode.recordId } : {}) : {}), isBuiltinShapeKind ? { builtinShapeKey: activeBuiltinShapeKey !== null && activeBuiltinShapeKey !== void 0 ? activeBuiltinShapeKey : (_FLOOR_MAP_BUILTIN_SH4 = FLOOR_MAP_BUILTIN_SHAPES[0]) === null || _FLOOR_MAP_BUILTIN_SH4 === void 0 ? void 0 : _FLOOR_MAP_BUILTIN_SH4.key } : {});
 		return /* @__PURE__ */ React.createElement("div", {
 			key: k.value,
@@ -201,104 +427,8 @@ function FloorMapToolbar(props) {
 			}
 		}, renderPreviewItem ? /* @__PURE__ */ React.createElement("div", {
 			className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-preview-content`,
-			style: placementLike ? {
-				width: previewW,
-				height: previewH,
-				transform: `scale(${placeScale})`,
-				transformOrigin: "top left"
-			} : isStage ? {
-				width: item.width,
-				height: item.height,
-				transform: `scale(${stageScale})`,
-				transformOrigin: "top left"
-			} : void 0
-		}, renderPreviewItem(item)) : /* @__PURE__ */ React.createElement("span", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-preview-fallback` }, k.label)), /* @__PURE__ */ React.createElement("span", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-preview-card-label` }, k.label)), isActive && policy !== "none" && /* @__PURE__ */ React.createElement(React.Fragment, null, allowedKeys.length >= 1 && /* @__PURE__ */ React.createElement("div", { className: `pisell-floor-map-layout-toolbar-record-pick` }, /* @__PURE__ */ React.createElement("div", { className: `pisell-floor-map-layout-toolbar-record-pick-label` }, locales.getText(`${I18N_TB}.data-binding-optional`)), /* @__PURE__ */ React.createElement(Select, {
-			placeholder: locales.getText(I18N_EP_DS),
-			allowClear: true,
-			value: placeMode.type === "scene" ? placeMode.dataSourceKey : void 0,
-			options: allowedKeys.map((key) => {
-				var _dataSourceLabels$key;
-				return {
-					value: key,
-					label: (_dataSourceLabels$key = dataSourceLabels[key]) !== null && _dataSourceLabels$key !== void 0 ? _dataSourceLabels$key : key
-				};
-			}),
-			onChange: (v) => {
-				if ((placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === "scene") handleDsChange(placeMode, v);
-			},
-			size: "large",
-			style: { width: "100%" },
-			popupMatchSelectWidth: false
-		}), (() => {
-			const mode = (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === "scene" ? placeMode : null;
-			const key = mode === null || mode === void 0 ? void 0 : mode.dataSourceKey;
-			if (!key) return /* @__PURE__ */ React.createElement("div", { className: `pisell-floor-map-layout-toolbar-record-pick-hint` }, locales.getText(`${I18N_TB}.hint-after-select-ds`));
-			const unplaced = getUnplacedRecordsForKey(key, dataSources, sceneElements);
-			if (unplaced.length === 0) return /* @__PURE__ */ React.createElement("div", { className: `pisell-floor-map-layout-toolbar-record-pick-hint` }, locales.getText(`${I18N_TB}.hint-no-unplaced-rows`));
-			const recordValue = (mode === null || mode === void 0 ? void 0 : mode.recordIds) && mode.recordIds.length > 0 ? mode.recordIds : (mode === null || mode === void 0 ? void 0 : mode.recordId) ? [mode.recordId] : void 0;
-			return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Select, {
-				mode: "multiple",
-				placeholder: locales.getText(`${I18N_TB}.ph-select-records`),
-				allowClear: true,
-				maxTagCount: "responsive",
-				value: recordValue,
-				options: unplaced.map((r) => ({
-					value: r.id,
-					label: formatDataRecordOptionLabel(r)
-				})),
-				onChange: (v) => {
-					if (mode) handleRecordsChange(mode, v);
-				},
-				size: "large",
-				style: {
-					width: "100%",
-					marginTop: 4
-				},
-				popupMatchSelectWidth: false
-			}), /* @__PURE__ */ React.createElement("div", { className: `pisell-floor-map-layout-toolbar-record-pick-hint` }, locales.getText(`${I18N_TB}.hint-multi-drop`)));
-		})()), allowedKeys.length === 0 && /* @__PURE__ */ React.createElement("div", { className: `pisell-floor-map-layout-toolbar-record-hint` }, locales.getText(`${I18N_TB}.no-data-sources`)), phoneLayout && onRequestPlaceAtCanvasCenter ? /* @__PURE__ */ React.createElement("button", {
-			type: "button",
-			className: classNames(`pisell-floor-map-layout-toolbar-btn`, "primary"),
-			onClick: onRequestPlaceAtCanvasCenter
-		}, locales.getText(`${I18N_TB}.add-to-canvas`)) : null, /* @__PURE__ */ React.createElement("button", {
-			type: "button",
-			className: `pisell-floor-map-layout-toolbar-btn cancel-inline`,
-			onClick: cancelPlaceMode
-		}, locales.getText(`${I18N_TB}.cancel-place`))), isActive && policy === "none" && /* @__PURE__ */ React.createElement(React.Fragment, null, isBuiltinShapeKind && /* @__PURE__ */ React.createElement(
-			"div",
-			/**
-			* 内置图形 kind：在「点击 / 拖拽落点」之前，先在这里选好要落的图形
-			* （厕所 / 分隔 / 柱子 / 沙发 / 大门 等）。落点的初始 builtinShapeKey
-			* 即取自当前 Select 值；落点后仍可在右侧编辑面板再切换。
-			*
-			* 与资源类 kind 的「dataSource + records」预选 UX 同款，避免必须先落
-			* 一个默认图形再到编辑面板里改。
-			*/
-			{ className: `pisell-floor-map-layout-toolbar-record-pick` },
-			/* @__PURE__ */ React.createElement("div", { className: `pisell-floor-map-layout-toolbar-record-pick-label` }, locales.getText("pisell-floor-map-layout.builtin-shape.palette-pick-label")),
-			/* @__PURE__ */ React.createElement(Select, {
-				placeholder: locales.getText("pisell-floor-map-layout.edit-panel.ph-builtin-shape"),
-				value: (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === "scene" ? (_placeMode$builtinSha2 = placeMode.builtinShapeKey) !== null && _placeMode$builtinSha2 !== void 0 ? _placeMode$builtinSha2 : (_FLOOR_MAP_BUILTIN_SH5 = FLOOR_MAP_BUILTIN_SHAPES[0]) === null || _FLOOR_MAP_BUILTIN_SH5 === void 0 ? void 0 : _FLOOR_MAP_BUILTIN_SH5.key : void 0,
-				options: FLOOR_MAP_BUILTIN_SHAPES.map((s) => ({
-					value: s.key,
-					label: locales.getText(s.labelKey)
-				})),
-				onChange: (v) => {
-					if ((placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === "scene") handleBuiltinShapeKeyChange(placeMode, v);
-				},
-				size: "large",
-				style: { width: "100%" },
-				popupMatchSelectWidth: false
-			})
-		), phoneLayout && onRequestPlaceAtCanvasCenter ? /* @__PURE__ */ React.createElement("button", {
-			type: "button",
-			className: classNames(`pisell-floor-map-layout-toolbar-btn`, "primary"),
-			onClick: onRequestPlaceAtCanvasCenter
-		}, locales.getText(`${I18N_TB}.add-to-canvas`)) : null, /* @__PURE__ */ React.createElement("button", {
-			type: "button",
-			className: `pisell-floor-map-layout-toolbar-btn cancel-inline`,
-			onClick: cancelPlaceMode
-		}, locales.getText(`${I18N_TB}.cancel-place`))));
+			style: getToolbarPreviewScaledStyle(cellW, cellH, isStage ? stageW : placementLike ? previewW : decorationPreviewSize, isStage ? stageH : placementLike ? previewH : decorationPreviewSize)
+		}, renderPreviewItem(item)) : /* @__PURE__ */ React.createElement("span", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-preview-fallback` }, k.label)), /* @__PURE__ */ React.createElement("span", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-preview-card-label` }, k.label)));
 	};
 	const collapseBtn = /* @__PURE__ */ React.createElement("button", {
 		type: "button",
@@ -312,14 +442,27 @@ function FloorMapToolbar(props) {
 	* 桌面：宽度跟随 sidebar（100%）伸缩；手机：antd Drawer 承载内容 + 边缘折叠柄。
 	*/
 	const toolbarInner = /* @__PURE__ */ React.createElement("div", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-inner` }, /* @__PURE__ */ React.createElement("div", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-body` }, canCreate && /* @__PURE__ */ React.createElement(React.Fragment, null, categories.map((cat) => {
-		var _kindsByCategory$get;
-		const kinds = (_kindsByCategory$get = kindsByCategory.get(cat.id)) !== null && _kindsByCategory$get !== void 0 ? _kindsByCategory$get : [];
-		if (!kinds.length) return null;
+		var _paletteEntriesByCate;
+		const entries = (_paletteEntriesByCate = paletteEntriesByCategory.get(cat.id)) !== null && _paletteEntriesByCate !== void 0 ? _paletteEntriesByCate : [];
+		if (!entries.length) return null;
+		const visibleEntries = getPaletteSidebarVisibleEntries(entries, paletteSidebarVisibleLimit);
+		const showViewAll = shouldShowPaletteViewAll(entries.length, paletteSidebarVisibleLimit);
 		return /* @__PURE__ */ React.createElement("section", {
 			key: cat.id,
 			className: `pisell-floor-map-layout-toolbar-section`
-		}, /* @__PURE__ */ React.createElement("h3", { className: `pisell-floor-map-layout-toolbar-section-title` }, cat.label), /* @__PURE__ */ React.createElement("div", { className: `pisell-floor-map-layout-toolbar-preview-list` }, /* @__PURE__ */ React.createElement("div", { className: `pisell-floor-map-layout-toolbar-preview-group` }, kinds.map((k) => renderKindCard(k)))));
-	}))), onSave && config.canvasUi.canEdit && /* @__PURE__ */ React.createElement("div", { className: `pisell-floor-map-layout-toolbar-footer` }, layoutDirty ? /* @__PURE__ */ React.createElement("span", {
+		}, /* @__PURE__ */ React.createElement("h3", { className: `pisell-floor-map-layout-toolbar-section-title` }, cat.label), /* @__PURE__ */ React.createElement("div", { className: `pisell-floor-map-layout-toolbar-preview-list` }, /* @__PURE__ */ React.createElement("div", { className: `pisell-floor-map-layout-toolbar-preview-group` }, visibleEntries.map((entry) => entry.builtinShapeKey && entry.shapeDef ? renderBuiltinShapePaletteCard(entry.kind, entry.shapeDef) : renderKindCard(entry.kind)), showViewAll ? /* @__PURE__ */ React.createElement("button", {
+			type: "button",
+			className: `pisell-floor-map-layout-toolbar-view-all`,
+			onClick: () => setViewAllModal({
+				categoryLabel: cat.label,
+				entries
+			})
+		}, locales.getText(`${I18N_TB}.view-all`)) : null)));
+	})), phoneLayout && onRequestPlaceAtCanvasCenter && (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === "scene" ? /* @__PURE__ */ React.createElement("div", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-section` }, /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		className: classNames(`${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-btn`, "primary"),
+		onClick: onRequestPlaceAtCanvasCenter
+	}, locales.getText(`${I18N_TB}.add-to-canvas`))) : null), onSave && config.canvasUi.canEdit && /* @__PURE__ */ React.createElement("div", { className: `pisell-floor-map-layout-toolbar-footer` }, layoutDirty ? /* @__PURE__ */ React.createElement("span", {
 		className: `pisell-floor-map-layout-toolbar-dirty-hint`,
 		role: "status"
 	}, locales.getText(`${I18N_TB}.layout-dirty-hint`)) : null, saveError && /* @__PURE__ */ React.createElement("span", { className: `pisell-floor-map-layout-toolbar-error` }, typeof saveError === "string" ? saveError : saveError === null || saveError === void 0 ? void 0 : saveError.message), /* @__PURE__ */ React.createElement("button", {
@@ -333,7 +476,7 @@ function FloorMapToolbar(props) {
 	* 必须包在 `${PREFIX}-toolbar` 根下，否则 Less 里 `.pisell-floor-map-layout-toolbar &-collapse-handle`
 	* 等选择器无法命中，展开态右侧折叠柄会失去定位与样式。
 	*/
-	return /* @__PURE__ */ React.createElement("div", { className: classNames(`${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar`, className) }, /* @__PURE__ */ React.createElement(Drawer, {
+	return /* @__PURE__ */ React.createElement("div", { className: classNames(`${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar`, className) }, paletteViewAllModal, resourcePickerModal, /* @__PURE__ */ React.createElement(Drawer, {
 		placement: "left",
 		open: !collapsed,
 		onClose: () => setCollapsed(true),
@@ -360,7 +503,7 @@ function FloorMapToolbar(props) {
 		"aria-label": locales.getText(`${I18N_TB}.expand`),
 		title: locales.getText(`${I18N_TB}.expand`)
 	}, /* @__PURE__ */ React.createElement(RightOutlined, null)) : null);
-	return /* @__PURE__ */ React.createElement("div", { className: classNames(`${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar`, `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-sidebar`, collapsed && `pisell-floor-map-layout-toolbar-sidebar--collapsed`, className) }, collapseBtn, toolbarInner);
+	return /* @__PURE__ */ React.createElement("div", { className: classNames(`${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar`, `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-sidebar`, collapsed && `pisell-floor-map-layout-toolbar-sidebar--collapsed`, className) }, paletteViewAllModal, resourcePickerModal, collapseBtn, toolbarInner);
 }
 //#endregion
 export { FloorMapToolbar as default };