@pisell/materials 1.8.54 → 1.8.55

package/lib/components/pisellFloorMapLayout/hooks/useFloorMapEditState.js

@@ -8,9 +8,12 @@ const require_floorMapElementKindUtils = require("../utils/floorMapElementKindUt
 const require_useEngineContext = require("../../../hooks/useEngineContext.js");
 const require_utils = require("../../translation/utils.js");
 const require_floorMapCanvasDisplay = require("../utils/floorMapCanvasDisplay.js");
+const require_layoutMeasurements = require("../utils/layoutMeasurements.js");
 const require_floorMapConfigMerge = require("../utils/floorMapConfigMerge.js");
 const require_useDraftConfigHistory = require("./useDraftConfigHistory.js");
 const require_floorMapViewConfigDiff = require("../utils/floorMapViewConfigDiff.js");
+const require_floorMapCanvasStage = require("../utils/floorMapCanvasStage.js");
+const require_batchScenePlacementLayout = require("../utils/batchScenePlacementLayout.js");
 let react = require("react");
 let _pisell_utils = require("@pisell/utils");
 let antd = require("antd");
@@ -35,6 +38,11 @@ const BUILTIN_SHAPE_PLACE_DEFAULT = {
 	height: 96
 };
 const I18N_PLACEMENT_FALLBACK_IMAGE = "pisell-floor-map-layout.placement.fallback-image-name";
+const I18N_PLACEMENT_ZONE_NAME = "pisell-floor-map-layout.zone.unnamed";
+const ZONE_PLACE_DEFAULT = {
+	width: 240,
+	height: 160
+};
 const GRID_VIS_STORAGE_PREFIX = "pisell-floor-map-layout.grid-visible";
 function getGridVisStorageKey(canvasId) {
 	return `${GRID_VIS_STORAGE_PREFIX}:${canvasId}`;
@@ -55,8 +63,18 @@ function writeStoredGridVisible(canvasId, visible) {
 		localStorage.setItem(getGridVisStorageKey(canvasId), visible ? "1" : "0");
 	} catch (_unused2) {}
 }
-/** 批量落位时每条相对上一条的偏移（内容坐标） */
-const BATCH_PLACE_OFFSET = 16;
+/** 与 props 同步 / dirty 基线一致：合并 localStorage 中的网格显隐偏好 */
+function normalizeFloorMapConfigWithStoredGrid(floorMapConfigProp) {
+	const baseConfig = require_floorMapViewConfigDiff.normalizeFloorMapViewConfigFromProp(floorMapConfigProp);
+	return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, baseConfig), {}, { canvases: baseConfig.canvases.map((canvas) => {
+		var _canvas$mapLayer;
+		const stored = readStoredGridVisible(canvas.id);
+		if (stored == null) return canvas;
+		return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, canvas), {}, { mapLayer: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, (_canvas$mapLayer = canvas.mapLayer) !== null && _canvas$mapLayer !== void 0 ? _canvas$mapLayer : {}), {}, { showGrid: stored }) });
+	}) });
+}
+/** 复制单个图元时的错位偏移（内容坐标） */
+const DUPLICATE_PLACE_OFFSET = 16;
 function newInstanceId() {
 	return `elm_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
 }
@@ -66,9 +84,61 @@ function duplicateBinding(elements, binding, exceptInstanceId) {
 		return e.instanceId !== exceptInstanceId && ((_e$dataBinding = e.dataBinding) === null || _e$dataBinding === void 0 ? void 0 : _e$dataBinding.dataSourceKey) === binding.dataSourceKey && ((_e$dataBinding2 = e.dataBinding) === null || _e$dataBinding2 === void 0 ? void 0 : _e$dataBinding2.recordId) === binding.recordId;
 	});
 }
+/** 解析落点图元的默认像素尺寸（与 applyScenePlacementAtCoords 一致） */
+function resolveScenePlacementDimensions(config, scene) {
+	var _scene$builtinShapeKe, _FLOOR_MAP_BUILTIN_SH, _builtinDef$defaultSi, _builtinDef$defaultSi2;
+	const defaultPlacementWidth = require_floorMapElementKindUtils.FLOOR_MAP_RESOURCE_PLACE_DEFAULT.width;
+	const defaultPlacementHeight = require_floorMapElementKindUtils.FLOOR_MAP_RESOURCE_PLACE_DEFAULT.height;
+	const defaultDecoSize = 48;
+	const kindConfig = require_floorMapElementKindUtils.getElementKindConfig(config, scene.elementKind);
+	const policy = require_floorMapElementKindUtils.resolveDataBindingPolicy(kindConfig);
+	const isStage = scene.elementKind === require_types.FLOOR_MAP_STAGE_ELEMENT_KIND;
+	const isZone = scene.elementKind === require_types.FLOOR_MAP_ZONE_ELEMENT_KIND;
+	const isImage = require_floorMapElementKindUtils.isFloorMapImageElementKind(scene.elementKind);
+	const isBuiltinShape = require_floorMapElementKindUtils.isFloorMapBuiltinShapeElementKind(scene.elementKind);
+	const initialBuiltinShapeKey = isBuiltinShape ? (_scene$builtinShapeKe = scene.builtinShapeKey) !== null && _scene$builtinShapeKe !== void 0 ? _scene$builtinShapeKe : (_FLOOR_MAP_BUILTIN_SH = require_floorMapBuiltinShapes.FLOOR_MAP_BUILTIN_SHAPES[0]) === null || _FLOOR_MAP_BUILTIN_SH === void 0 ? void 0 : _FLOOR_MAP_BUILTIN_SH.key : void 0;
+	const builtinDef = isBuiltinShape ? require_floorMapBuiltinShapes.getFloorMapBuiltinShapeDef(initialBuiltinShapeKey) : void 0;
+	const width = isImage ? IMAGE_PLACE_DEFAULT.width : isZone ? ZONE_PLACE_DEFAULT.width : isStage ? require_floorMapStageDefaults.STAGE_DECO_DEFAULT.width : isBuiltinShape ? (_builtinDef$defaultSi = builtinDef === null || builtinDef === void 0 ? void 0 : builtinDef.defaultSize.width) !== null && _builtinDef$defaultSi !== void 0 ? _builtinDef$defaultSi : BUILTIN_SHAPE_PLACE_DEFAULT.width : defaultPlacementWidth;
+	const height = isImage ? IMAGE_PLACE_DEFAULT.height : isZone ? ZONE_PLACE_DEFAULT.height : isStage ? require_floorMapStageDefaults.STAGE_DECO_DEFAULT.height : isBuiltinShape ? (_builtinDef$defaultSi2 = builtinDef === null || builtinDef === void 0 ? void 0 : builtinDef.defaultSize.height) !== null && _builtinDef$defaultSi2 !== void 0 ? _builtinDef$defaultSi2 : BUILTIN_SHAPE_PLACE_DEFAULT.height : defaultPlacementHeight;
+	const useDecoSize = policy === "none" && !isStage && !isZone && !isImage && !isBuiltinShape;
+	return {
+		width: useDecoSize ? defaultDecoSize : width,
+		height: useDecoSize ? defaultDecoSize : height,
+		useDecoSize,
+		isStage,
+		isZone,
+		isImage,
+		isBuiltinShape,
+		initialBuiltinShapeKey,
+		kindConfig
+	};
+}
+function buildPlacedSceneElement(params, dims) {
+	const { canvasId, scene, x, y, name, dataBinding } = params;
+	const { width, height, isStage, isZone, isImage, isBuiltinShape, initialBuiltinShapeKey, kindConfig } = dims;
+	return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({
+		instanceId: newInstanceId(),
+		canvasId,
+		x: Math.round(x),
+		y: Math.round(y),
+		name,
+		zIndex: isZone ? -100 : isImage || isBuiltinShape ? -5 : 0,
+		width: Math.round(width),
+		height: Math.round(height),
+		elementKind: scene.elementKind,
+		shape: isStage || isZone || isImage || isBuiltinShape ? "rect" : kindConfig === null || kindConfig === void 0 ? void 0 : kindConfig.defaultShape,
+		dataBinding
+	}, isZone ? { isZone: true } : {}), isImage ? { imageUrl: "" } : {}), isBuiltinShape ? { builtinShapeKey: initialBuiltinShapeKey } : {});
+}
 function useFloorMapEditState(params) {
 	var _engineCtx$engine, _selectedItem$_sceneE;
-	const { floorMapConfigProp, isFloorMapView, itemsProp, cellSizeProp, dataSources, onSave, onDataSourceRecordSave, dataSourceFormColumns, dataSourceRecordForm, dataSourceLabels, layoutPrefix, contentOffsetRef, showDataSourceRecordFormBlock } = params;
+	const { floorMapConfigProp, isFloorMapView, itemsProp, cellSizeProp, dataSources, onSave, onDataSourceRecordSave, dataSourceFormColumns, dataSourceRecordForm, dataSourceLabels, layoutPrefix, contentOffsetRef, showDataSourceRecordFormBlock, focusViewportOnBoundsRef } = params;
+	const scheduleFocusOnPlacements = (0, react.useCallback)((positions, sizes) => {
+		var _focusViewportOnBound;
+		const box = require_batchScenePlacementLayout.getPlacementBoundingBox(positions, sizes);
+		if (!box) return;
+		focusViewportOnBoundsRef === null || focusViewportOnBoundsRef === void 0 || (_focusViewportOnBound = focusViewportOnBoundsRef.current) === null || _focusViewportOnBound === void 0 || _focusViewportOnBound.call(focusViewportOnBoundsRef, box);
+	}, [focusViewportOnBoundsRef]);
 	const engineCtx = require_useEngineContext.default();
 	const engineLocale = (engineCtx === null || engineCtx === void 0 || (_engineCtx$engine = engineCtx.engine) === null || _engineCtx$engine === void 0 || (_engineCtx$engine = _engineCtx$engine.props) === null || _engineCtx$engine === void 0 ? void 0 : _engineCtx$engine.locale) || "zh-CN";
 	/**
@@ -97,21 +167,32 @@ function useFloorMapEditState(params) {
 	const config = isFloorMapView ? draftConfig !== null && draftConfig !== void 0 ? draftConfig : floorMapConfigProp : null;
 	const configRef = (0, react.useRef)(config);
 	configRef.current = config;
+	/** 上一次已从 props 写入草稿的配置；用于区分「接口刚下发」与「用户本地改过」 */
+	const lastSyncedPropConfigRef = (0, react.useRef)(null);
 	(0, react.useEffect)(() => {
-		if (!floorMapConfigProp) return;
-		const baseConfig = require_floorMapViewConfigDiff.normalizeFloorMapViewConfigFromProp(floorMapConfigProp);
-		const nextConfig = require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, baseConfig), {}, { canvases: baseConfig.canvases.map((canvas) => {
-			var _canvas$mapLayer;
-			const stored = readStoredGridVisible(canvas.id);
-			if (stored == null) return canvas;
-			return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, canvas), {}, { mapLayer: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, (_canvas$mapLayer = canvas.mapLayer) !== null && _canvas$mapLayer !== void 0 ? _canvas$mapLayer : {}), {}, { showGrid: stored }) });
-		}) });
+		if (!floorMapConfigProp) {
+			lastSyncedPropConfigRef.current = null;
+			return;
+		}
+		const nextConfig = normalizeFloorMapConfigWithStoredGrid(floorMapConfigProp);
+		const lastSynced = lastSyncedPropConfigRef.current;
+		/**
+		* 仅当「自上次 props 同步后用户又改过草稿」时拒绝覆盖：
+		* - 接口/订阅首次带回 layout：草稿仍等于上次 props → 必须 replace，否则会空白；
+		* - 编辑中落了新图元：草稿已与 lastSynced 不同 → 拒绝旧 props 覆盖。
+		*/
+		if (draftConfig && lastSynced != null) {
+			const propMatchesDraft = require_floorMapViewConfigDiff.floorMapViewConfigsEqual(draftConfig, nextConfig);
+			const draftMatchesLastSynced = require_floorMapViewConfigDiff.floorMapViewConfigsEqual(draftConfig, lastSynced);
+			if (!propMatchesDraft && !draftMatchesLastSynced) return;
+		}
 		/**
 		* 上游配置变更：直接 replace（不进入历史栈），并清空 undo/redo；
 		* 同时清空本地临时保存基线，让 dirty/未保存提示与上游对齐。
 		*/
 		replaceDraft(nextConfig);
-		setSavedBaselineConfig(null);
+		lastSyncedPropConfigRef.current = nextConfig;
+		setSavedBaselineConfig((prev) => prev != null && require_floorMapViewConfigDiff.floorMapViewConfigsEqual(prev, nextConfig) ? prev : null);
 		const enabled = nextConfig.canvases.filter((c) => c.enabled).sort((a, b) => a.order - b.order);
 		setCurrentCanvasId((prev) => {
 			var _enabled$0$id, _enabled$;
@@ -121,7 +202,7 @@ function useFloorMapEditState(params) {
 	/** 当前草稿与上游持久化 `floorMapConfig`（经同等规范化）是否不一致 */
 	const isLayoutDirty = (0, react.useMemo)(() => {
 		if (!isFloorMapView || !draftConfig || !floorMapConfigProp) return false;
-		return !require_floorMapViewConfigDiff.floorMapViewConfigsEqual(draftConfig, savedBaselineConfig !== null && savedBaselineConfig !== void 0 ? savedBaselineConfig : require_floorMapViewConfigDiff.normalizeFloorMapViewConfigFromProp(floorMapConfigProp));
+		return !require_floorMapViewConfigDiff.floorMapViewConfigsEqual(draftConfig, savedBaselineConfig !== null && savedBaselineConfig !== void 0 ? savedBaselineConfig : normalizeFloorMapConfigWithStoredGrid(floorMapConfigProp));
 	}, [
 		isFloorMapView,
 		draftConfig,
@@ -216,6 +297,40 @@ function useFloorMapEditState(params) {
 		cellSizeProp
 	]);
 	const items = isFloorMapView ? mergedItems : itemsProp;
+	const getBatchPlacementLayoutContext = (0, react.useCallback)(() => {
+		var _config$sceneElements, _config$mapLayer, _canvas$mapLayer2;
+		const existingElements = ((_config$sceneElements = config === null || config === void 0 ? void 0 : config.sceneElements) !== null && _config$sceneElements !== void 0 ? _config$sceneElements : []).filter((e) => e.canvasId === currentCanvasId).map((e) => {
+			var _e$x, _e$y, _e$width, _e$height;
+			return {
+				x: Math.round((_e$x = e.x) !== null && _e$x !== void 0 ? _e$x : 0),
+				y: Math.round((_e$y = e.y) !== null && _e$y !== void 0 ? _e$y : 0),
+				width: Math.round((_e$width = e.width) !== null && _e$width !== void 0 ? _e$width : require_floorMapElementKindUtils.FLOOR_MAP_RESOURCE_PLACE_DEFAULT.width),
+				height: Math.round((_e$height = e.height) !== null && _e$height !== void 0 ? _e$height : require_floorMapElementKindUtils.FLOOR_MAP_RESOURCE_PLACE_DEFAULT.height)
+			};
+		});
+		const canvas = config === null || config === void 0 ? void 0 : config.canvases.find((c) => c.id === currentCanvasId);
+		const mapLayer = require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, (_config$mapLayer = config === null || config === void 0 ? void 0 : config.mapLayer) !== null && _config$mapLayer !== void 0 ? _config$mapLayer : {}), (_canvas$mapLayer2 = canvas === null || canvas === void 0 ? void 0 : canvas.mapLayer) !== null && _canvas$mapLayer2 !== void 0 ? _canvas$mapLayer2 : {});
+		const padSingle = typeof mapLayer.boundingPadding === "number" ? mapLayer.boundingPadding : 56;
+		const stage = require_floorMapCanvasStage.computeFloorMapContentStage({
+			items: mergedItems,
+			cellSize: cellSizeProp !== null && cellSizeProp !== void 0 ? cellSizeProp : 64,
+			itemGap: require_layoutMeasurements.gapToPx(mapLayer.gap),
+			itemUnit: "pixel",
+			boundingPadding: padSingle,
+			preferPixelBoundingBox: true
+		});
+		return {
+			existingElements,
+			contentWidth: stage.contentWidth,
+			contentHeight: stage.contentHeight,
+			boundingPadding: padSingle
+		};
+	}, [
+		config,
+		currentCanvasId,
+		mergedItems,
+		cellSizeProp
+	]);
 	const updateDraftSceneElement = (0, react.useCallback)((instanceId, patch) => {
 		commitDraft((prev) => {
 			var _prev$sceneElements2, _prev$sceneElements3;
@@ -244,43 +359,15 @@ function useFloorMapEditState(params) {
 	* @returns 是否已成功写入草稿（校验失败时为 false）
 	*/
 	const applyScenePlacementAtCoords = (0, react.useCallback)((contentX, contentY, scene) => {
-		var _kindConfig$allowedDa, _ref, _scene$dataSourceKey, _scene$builtinShapeKe, _FLOOR_MAP_BUILTIN_SH, _builtinDef$defaultSi, _builtinDef$defaultSi2;
+		var _kindConfig$allowedDa, _ref, _scene$dataSourceKey;
 		if (!config || !currentCanvasId) return false;
-		const defaultPlacementWidth = 180;
-		const defaultPlacementHeight = 120;
-		const defaultDecoSize = 48;
-		const kindConfig = require_floorMapElementKindUtils.getElementKindConfig(config, scene.elementKind);
+		const dims = resolveScenePlacementDimensions(config, scene);
+		const kindConfig = dims.kindConfig;
 		const policy = require_floorMapElementKindUtils.resolveDataBindingPolicy(kindConfig);
 		const allKeys = Object.keys(dataSources !== null && dataSources !== void 0 ? dataSources : {});
 		const allowedKeys = (kindConfig === null || kindConfig === void 0 || (_kindConfig$allowedDa = kindConfig.allowedDataSourceKeys) === null || _kindConfig$allowedDa === void 0 ? void 0 : _kindConfig$allowedDa.length) ? kindConfig.allowedDataSourceKeys.filter((k) => allKeys.includes(k)) : allKeys;
 		const pickKey = (_ref = (_scene$dataSourceKey = scene.dataSourceKey) !== null && _scene$dataSourceKey !== void 0 ? _scene$dataSourceKey : allowedKeys[0]) !== null && _ref !== void 0 ? _ref : allKeys[0];
 		const recordIdsToPlace = scene.recordIds && scene.recordIds.length > 0 ? scene.recordIds : scene.recordId ? [scene.recordId] : [];
-		const isStage = scene.elementKind === require_types.FLOOR_MAP_STAGE_ELEMENT_KIND;
-		const isImage = require_floorMapElementKindUtils.isFloorMapImageElementKind(scene.elementKind);
-		const isBuiltinShape = require_floorMapElementKindUtils.isFloorMapBuiltinShapeElementKind(scene.elementKind);
-		/**
-		* 内置图形 kind 的初始 `builtinShapeKey`：优先用侧栏 Select 预选的 key
-		* （`scene.builtinShapeKey`，由 toolbar 写入 placeMode / drag payload 透传），
-		* 未预选时回退为枚举首项，避免空白占位。
-		*/
-		const initialBuiltinShapeKey = isBuiltinShape ? (_scene$builtinShapeKe = scene.builtinShapeKey) !== null && _scene$builtinShapeKe !== void 0 ? _scene$builtinShapeKe : (_FLOOR_MAP_BUILTIN_SH = require_floorMapBuiltinShapes.FLOOR_MAP_BUILTIN_SHAPES[0]) === null || _FLOOR_MAP_BUILTIN_SH === void 0 ? void 0 : _FLOOR_MAP_BUILTIN_SH.key : void 0;
-		const builtinDef = isBuiltinShape ? require_floorMapBuiltinShapes.getFloorMapBuiltinShapeDef(initialBuiltinShapeKey) : void 0;
-		const w = isImage ? IMAGE_PLACE_DEFAULT.width : isStage ? require_floorMapStageDefaults.STAGE_DECO_DEFAULT.width : isBuiltinShape ? (_builtinDef$defaultSi = builtinDef === null || builtinDef === void 0 ? void 0 : builtinDef.defaultSize.width) !== null && _builtinDef$defaultSi !== void 0 ? _builtinDef$defaultSi : BUILTIN_SHAPE_PLACE_DEFAULT.width : defaultPlacementWidth;
-		const h = isImage ? IMAGE_PLACE_DEFAULT.height : isStage ? require_floorMapStageDefaults.STAGE_DECO_DEFAULT.height : isBuiltinShape ? (_builtinDef$defaultSi2 = builtinDef === null || builtinDef === void 0 ? void 0 : builtinDef.defaultSize.height) !== null && _builtinDef$defaultSi2 !== void 0 ? _builtinDef$defaultSi2 : BUILTIN_SHAPE_PLACE_DEFAULT.height : defaultPlacementHeight;
-		const useDecoSize = policy === "none" && scene.elementKind !== "stage" && !isImage && !isBuiltinShape;
-		const buildOneElement = (dataBinding, x, y, name) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({
-			instanceId: newInstanceId(),
-			canvasId: currentCanvasId,
-			x,
-			y,
-			name,
-			zIndex: isImage || isBuiltinShape ? -5 : 0,
-			width: useDecoSize ? defaultDecoSize : w,
-			height: useDecoSize ? defaultDecoSize : h,
-			elementKind: scene.elementKind,
-			shape: isStage || isImage || isBuiltinShape ? "rect" : kindConfig === null || kindConfig === void 0 ? void 0 : kindConfig.defaultShape,
-			dataBinding
-		}, isImage ? { imageUrl: "" } : {}), isBuiltinShape ? { builtinShapeKey: initialBuiltinShapeKey } : {});
 		let dataBinding;
 		if (policy !== "none" && pickKey) {
 			var _dataSources$pickKey;
@@ -310,10 +397,9 @@ function useFloorMapEditState(params) {
 				}
 				dataBinding = cand;
 			} else {
-				const newEls = [];
+				const pending = [];
 				let skippedDup = 0;
 				let skippedMissing = 0;
-				let placeIndex = 0;
 				const seenInBatch = /* @__PURE__ */ new Set();
 				recordIdsToPlace.forEach((rid) => {
 					var _row$name;
@@ -332,46 +418,78 @@ function useFloorMapEditState(params) {
 					}
 					seenInBatch.add(rid);
 					const row = record;
-					const placementName = String((_row$name = row === null || row === void 0 ? void 0 : row.name) !== null && _row$name !== void 0 ? _row$name : rid);
-					newEls.push(buildOneElement(cand, contentX + placeIndex * BATCH_PLACE_OFFSET, contentY + placeIndex * BATCH_PLACE_OFFSET, placementName));
-					placeIndex += 1;
+					pending.push({
+						binding: cand,
+						name: String((_row$name = row === null || row === void 0 ? void 0 : row.name) !== null && _row$name !== void 0 ? _row$name : rid)
+					});
 				});
 				if (skippedDup > 0) antd.message.warning(`已跳过 ${skippedDup} 条已在平面图中绑定的记录`);
 				if (skippedMissing > 0) antd.message.warning(`有 ${skippedMissing} 条记录不存在，已跳过`);
-				if (newEls.length === 0) {
+				if (pending.length === 0) {
 					antd.message.warning("没有可落位的记录");
 					return false;
 				}
+				const sizes = pending.map(() => ({
+					width: dims.width,
+					height: dims.height
+				}));
+				const positions = require_batchScenePlacementLayout.computeBatchScenePlacementPositions(sizes, getBatchPlacementLayoutContext());
+				const newEls = pending.map((p, i) => buildPlacedSceneElement({
+					canvasId: currentCanvasId,
+					scene,
+					x: positions[i].x,
+					y: positions[i].y,
+					name: p.name,
+					dataBinding: p.binding
+				}, dims));
 				commitDraft((prev) => {
 					var _prev$sceneElements4;
 					return prev ? require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, { sceneElements: [...(_prev$sceneElements4 = prev.sceneElements) !== null && _prev$sceneElements4 !== void 0 ? _prev$sceneElements4 : [], ...newEls] }) : prev;
 				});
+				scheduleFocusOnPlacements(positions, sizes);
 				return true;
 			}
 		}
-		const placementName = (() => {
-			var _kindConfig$defaultPr, _kindConfig$defaultPr2;
-			if (isStage) return require_floorMapStageDefaults.STAGE_DECO_DEFAULT.name;
-			if (isImage) return _pisell_utils.locales.getText(I18N_PLACEMENT_FALLBACK_IMAGE);
-			const db = dataBinding;
-			const rid = recordIdsToPlace[0];
-			if (db && rid) {
-				var _dataSources$db$dataS, _row$name2;
-				const row = dataSources === null || dataSources === void 0 || (_dataSources$db$dataS = dataSources[db.dataSourceKey]) === null || _dataSources$db$dataS === void 0 ? void 0 : _dataSources$db$dataS.find((r) => r.id === rid);
-				return String((_row$name2 = row === null || row === void 0 ? void 0 : row.name) !== null && _row$name2 !== void 0 ? _row$name2 : rid);
-			}
-			return (_kindConfig$defaultPr = kindConfig === null || kindConfig === void 0 || (_kindConfig$defaultPr2 = kindConfig.defaultPresentation) === null || _kindConfig$defaultPr2 === void 0 ? void 0 : _kindConfig$defaultPr2.title) !== null && _kindConfig$defaultPr !== void 0 ? _kindConfig$defaultPr : "";
-		})();
-		const newEl = buildOneElement(dataBinding, contentX, contentY, placementName);
+		const newEl = buildPlacedSceneElement({
+			canvasId: currentCanvasId,
+			scene,
+			x: contentX,
+			y: contentY,
+			name: (() => {
+				var _kindConfig$defaultPr, _kindConfig$defaultPr2;
+				if (dims.isStage) return require_floorMapStageDefaults.STAGE_DECO_DEFAULT.name;
+				if (dims.isZone) return _pisell_utils.locales.getText(I18N_PLACEMENT_ZONE_NAME);
+				if (dims.isImage) return _pisell_utils.locales.getText(I18N_PLACEMENT_FALLBACK_IMAGE);
+				const db = dataBinding;
+				const rid = recordIdsToPlace[0];
+				if (db && rid) {
+					var _dataSources$db$dataS, _row$name2;
+					const row = dataSources === null || dataSources === void 0 || (_dataSources$db$dataS = dataSources[db.dataSourceKey]) === null || _dataSources$db$dataS === void 0 ? void 0 : _dataSources$db$dataS.find((r) => r.id === rid);
+					return String((_row$name2 = row === null || row === void 0 ? void 0 : row.name) !== null && _row$name2 !== void 0 ? _row$name2 : rid);
+				}
+				return (_kindConfig$defaultPr = kindConfig === null || kindConfig === void 0 || (_kindConfig$defaultPr2 = kindConfig.defaultPresentation) === null || _kindConfig$defaultPr2 === void 0 ? void 0 : _kindConfig$defaultPr2.title) !== null && _kindConfig$defaultPr !== void 0 ? _kindConfig$defaultPr : "";
+			})(),
+			dataBinding
+		}, dims);
 		commitDraft((prev) => {
 			var _prev$sceneElements5;
 			return prev ? require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, { sceneElements: [...(_prev$sceneElements5 = prev.sceneElements) !== null && _prev$sceneElements5 !== void 0 ? _prev$sceneElements5 : [], newEl] }) : prev;
 		});
+		scheduleFocusOnPlacements([{
+			x: contentX,
+			y: contentY
+		}], [{
+			width: dims.width,
+			height: dims.height
+		}]);
 		return true;
 	}, [
 		config,
 		currentCanvasId,
-		dataSources
+		dataSources,
+		getBatchPlacementLayoutContext,
+		commitDraft,
+		scheduleFocusOnPlacements
 	]);
 	const handleCanvasPlaceClick = (0, react.useCallback)((e) => {
 		if (!placeMode || placeMode.type !== "scene" || !config || !currentCanvasId) return;
@@ -387,8 +505,48 @@ function useFloorMapEditState(params) {
 	]);
 	/** 从左侧图元栏拖拽到画布落位（与点击落点规则一致） */
 	const placeSceneElementFromPaletteDrop = (0, react.useCallback)((contentX, contentY, scene) => {
-		if (applyScenePlacementAtCoords(contentX, contentY, scene)) setPlaceMode(null);
+		const ok = applyScenePlacementAtCoords(contentX, contentY, scene);
+		if (ok) setPlaceMode(null);
+		return ok;
 	}, [applyScenePlacementAtCoords]);
+	/**
+	* 批量落点（弹窗多选、侧栏多选数据行等）：在画布右侧空白区按近方阵网格排列。
+	*/
+	const bulkPlacePaletteItems = (0, react.useCallback)((items) => {
+		if (!items.length || !config || !currentCanvasId) return;
+		const scenes = items.map((item) => require_objectSpread2._objectSpread2({
+			type: "scene",
+			elementKind: item.elementKind
+		}, item.builtinShapeKey ? { builtinShapeKey: item.builtinShapeKey } : {}));
+		const dimsList = scenes.map((scene) => resolveScenePlacementDimensions(config, scene));
+		const sizes = dimsList.map((d) => ({
+			width: d.width,
+			height: d.height
+		}));
+		const positions = require_batchScenePlacementLayout.computeBatchScenePlacementPositions(sizes, getBatchPlacementLayoutContext());
+		const newEls = scenes.map((scene, i) => {
+			var _ref2, _dimsList$i$kindConfi, _dimsList$i$kindConfi2, _dimsList$i$kindConfi3;
+			return buildPlacedSceneElement({
+				canvasId: currentCanvasId,
+				scene,
+				x: positions[i].x,
+				y: positions[i].y,
+				name: (_ref2 = (_dimsList$i$kindConfi = (_dimsList$i$kindConfi2 = dimsList[i].kindConfig) === null || _dimsList$i$kindConfi2 === void 0 ? void 0 : _dimsList$i$kindConfi2.label) !== null && _dimsList$i$kindConfi !== void 0 ? _dimsList$i$kindConfi : (_dimsList$i$kindConfi3 = dimsList[i].kindConfig) === null || _dimsList$i$kindConfi3 === void 0 || (_dimsList$i$kindConfi3 = _dimsList$i$kindConfi3.defaultPresentation) === null || _dimsList$i$kindConfi3 === void 0 ? void 0 : _dimsList$i$kindConfi3.title) !== null && _ref2 !== void 0 ? _ref2 : scene.elementKind
+			}, dimsList[i]);
+		});
+		commitDraft((prev) => {
+			var _prev$sceneElements6;
+			return prev ? require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, { sceneElements: [...(_prev$sceneElements6 = prev.sceneElements) !== null && _prev$sceneElements6 !== void 0 ? _prev$sceneElements6 : [], ...newEls] }) : prev;
+		});
+		scheduleFocusOnPlacements(positions, sizes);
+		setPlaceMode(null);
+	}, [
+		config,
+		currentCanvasId,
+		getBatchPlacementLayoutContext,
+		commitDraft,
+		scheduleFocusOnPlacements
+	]);
 	const handleSave = (0, react.useCallback)(() => {
 		if (!draftConfig || !onSave) return;
 		setSaving(true);
@@ -415,16 +573,13 @@ function useFloorMapEditState(params) {
 	const discardDraft = (0, react.useCallback)(() => {
 		if (!floorMapConfigProp) {
 			replaceDraft(null);
+			lastSyncedPropConfigRef.current = null;
 			setSavedBaselineConfig(null);
 			return;
 		}
-		const baseConfig = require_floorMapViewConfigDiff.normalizeFloorMapViewConfigFromProp(floorMapConfigProp);
-		replaceDraft(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, baseConfig), {}, { canvases: baseConfig.canvases.map((canvas) => {
-			var _canvas$mapLayer2;
-			const stored = readStoredGridVisible(canvas.id);
-			if (stored == null) return canvas;
-			return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, canvas), {}, { mapLayer: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, (_canvas$mapLayer2 = canvas.mapLayer) !== null && _canvas$mapLayer2 !== void 0 ? _canvas$mapLayer2 : {}), {}, { showGrid: stored }) });
-		}) }));
+		const nextConfig = normalizeFloorMapConfigWithStoredGrid(floorMapConfigProp);
+		replaceDraft(nextConfig);
+		lastSyncedPropConfigRef.current = nextConfig;
 		setSavedBaselineConfig(null);
 	}, [floorMapConfigProp, replaceDraft]);
 	/** 切换当前画布草稿中的 mapLayer.showGrid（随布局保存持久化） */
@@ -461,12 +616,15 @@ function useFloorMapEditState(params) {
 	const handleEditPanelDelete = (0, react.useCallback)(() => {
 		if (!selectedId) return;
 		commitDraft((prev) => {
-			var _prev$sceneElements6;
+			var _prev$sceneElements7, _prev$edges;
 			if (!prev) return prev;
-			return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, { sceneElements: ((_prev$sceneElements6 = prev.sceneElements) !== null && _prev$sceneElements6 !== void 0 ? _prev$sceneElements6 : []).filter((e) => e.instanceId !== selectedId) });
+			return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, {
+				sceneElements: ((_prev$sceneElements7 = prev.sceneElements) !== null && _prev$sceneElements7 !== void 0 ? _prev$sceneElements7 : []).filter((e) => e.instanceId !== selectedId),
+				edges: ((_prev$edges = prev.edges) !== null && _prev$edges !== void 0 ? _prev$edges : []).filter((edge) => edge.sourceId !== selectedId && edge.targetId !== selectedId)
+			});
 		});
 		setSelectedId(null);
-	}, [selectedId]);
+	}, [selectedId, commitDraft]);
 	/** 与编辑侧栏锁定按钮同源：切换 `layoutTransformLocked` */
 	const toggleSelectedLayoutLock = (0, react.useCallback)(() => {
 		var _configRef$current2;
@@ -478,21 +636,21 @@ function useFloorMapEditState(params) {
 	* 复制选中图元：新实例 + 位移，**清除 dataBinding**（避免与侧栏一致的「同一记录不可重复绑定」冲突）。
 	*/
 	const duplicateSelectedElement = (0, react.useCallback)(() => {
-		var _prev$sceneElements7, _el$x, _el$y, _prev$sceneElements8;
+		var _prev$sceneElements8, _el$x, _el$y, _prev$sceneElements9;
 		if (!selectedId) return;
 		const prev = configRef.current;
 		if (!prev) return;
-		const el = ((_prev$sceneElements7 = prev.sceneElements) !== null && _prev$sceneElements7 !== void 0 ? _prev$sceneElements7 : []).find((e) => e.instanceId === selectedId);
+		const el = ((_prev$sceneElements8 = prev.sceneElements) !== null && _prev$sceneElements8 !== void 0 ? _prev$sceneElements8 : []).find((e) => e.instanceId === selectedId);
 		if (!el) return;
 		const newId = newInstanceId();
 		const copy = require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, el), {}, {
 			instanceId: newId,
-			x: Math.round(((_el$x = el.x) !== null && _el$x !== void 0 ? _el$x : 0) + BATCH_PLACE_OFFSET),
-			y: Math.round(((_el$y = el.y) !== null && _el$y !== void 0 ? _el$y : 0) + BATCH_PLACE_OFFSET),
+			x: Math.round(((_el$x = el.x) !== null && _el$x !== void 0 ? _el$x : 0) + DUPLICATE_PLACE_OFFSET),
+			y: Math.round(((_el$y = el.y) !== null && _el$y !== void 0 ? _el$y : 0) + DUPLICATE_PLACE_OFFSET),
 			dataBinding: void 0,
 			layoutTransformLocked: false
 		});
-		commitDraft(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, { sceneElements: [...(_prev$sceneElements8 = prev.sceneElements) !== null && _prev$sceneElements8 !== void 0 ? _prev$sceneElements8 : [], copy] }));
+		commitDraft(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, { sceneElements: [...(_prev$sceneElements9 = prev.sceneElements) !== null && _prev$sceneElements9 !== void 0 ? _prev$sceneElements9 : [], copy] }));
 		setSelectedId(newId);
 	}, [selectedId]);
 	const selectedItem = selectedId ? mergedItems.find((m) => m.id === selectedId) : null;
@@ -516,6 +674,7 @@ function useFloorMapEditState(params) {
 		handleSave,
 		discardDraft,
 		placeSceneElementFromPaletteDrop,
+		bulkPlacePaletteItems,
 		editPanelParams: selectedItem && config && selectedId && !((_selectedItem$_sceneE = selectedItem._sceneElement) === null || _selectedItem$_sceneE === void 0 ? void 0 : _selectedItem$_sceneE.layoutTransformLocked) ? {
 			itemId: selectedId,
 			sceneElement: selectedItem._sceneElement,
@@ -538,7 +697,8 @@ function useFloorMapEditState(params) {
 		undoDraft,
 		redoDraft,
 		canUndo,
-		canRedo
+		canRedo,
+		commitDraft
 	};
 }
 //#endregion

package/lib/components/pisellFloorMapLayout/hooks/useFloorMapTransformMetrics.js

@@ -347,6 +347,59 @@ function useFloorMapTransformMetrics(params) {
 	/** 让"进入伪全屏后自动 fit"的 effect 能拿到最新的 fitBounds 实现 */
 	fitBoundsRef.current = fitBounds;
 	/**
+	* 将视口平移/缩放至能看见指定内容区包围盒（场景坐标，与 sceneElement x/y 一致）。
+	* 批量落点后调用；视口锁定时跳过。
+	*/
+	const focusContentBounds = (0, react.useCallback)((bounds) => {
+		var _ref, _cur$scale;
+		if (viewportLockedRef.current || !bounds) return false;
+		const ctx = transformRef.current;
+		const container = containerRef.current;
+		if (!ctx || !container) return false;
+		const wrapper = container.querySelector(".react-transform-wrapper");
+		if (!wrapper) return false;
+		const wEl = wrapper;
+		const wrapperRect = wrapper.getBoundingClientRect();
+		const layoutW = wEl.clientWidth > 0 ? wEl.clientWidth : wrapperRect.width;
+		const layoutH = wEl.clientHeight > 0 ? wEl.clientHeight : wrapperRect.height;
+		if (layoutW <= 0 || layoutH <= 0) return false;
+		const ox = contentOffsetRef.current.x;
+		const oy = contentOffsetRef.current.y;
+		const visMinL = bounds.minLeft + ox;
+		const visMinT = bounds.minTop + oy;
+		const visMaxR = bounds.maxRight + ox;
+		const visMaxB = bounds.maxBottom + oy;
+		const bw = Math.max(1, visMaxR - visMinL);
+		const bh = Math.max(1, visMaxB - visMinT);
+		const edgePx = 48;
+		const availW = Math.max(1, layoutW - 2 * edgePx);
+		const availH = Math.max(1, layoutH - 2 * edgePx);
+		const clampFitScale = (raw) => {
+			var _zoom$min3, _zoom$max3;
+			return Math.max((_zoom$min3 = zoom.min) !== null && _zoom$min3 !== void 0 ? _zoom$min3 : .5, Math.min(raw, (_zoom$max3 = zoom.max) !== null && _zoom$max3 !== void 0 ? _zoom$max3 : 2));
+		};
+		const cur = lastTransformRef.current;
+		const curScale = (_ref = (_cur$scale = cur === null || cur === void 0 ? void 0 : cur.scale) !== null && _cur$scale !== void 0 ? _cur$scale : zoomConfig.initialScale) !== null && _ref !== void 0 ? _ref : 1;
+		const rawFit = Math.min(availW / bw, availH / bh);
+		let nextScale = curScale;
+		if (bw * curScale > availW || bh * curScale > availH) nextScale = clampFitScale(rawFit);
+		const bboxCx = visMinL + bw / 2;
+		const bboxCy = visMinT + bh / 2;
+		const x = layoutW / 2 - bboxCx * nextScale;
+		const y = layoutH / 2 - bboxCy * nextScale;
+		clearFitBoundsTweenHold();
+		lastFitSnapshotRef.current = null;
+		setIsAtFitBounds(false);
+		ctx.setTransform(x, y, nextScale);
+		return true;
+	}, [
+		clearFitBoundsTweenHold,
+		contentOffsetRef,
+		transformRef,
+		zoom,
+		zoomConfig.initialScale
+	]);
+	/**
 	* autoFitOnMount：每个画布在「有图元且 content 尺寸已按包围盒算好」后执行一次 fitBounds。
 	* 避免首帧 items 仍为空时用占位尺寸 fit 完并标记 done，导致异步图元加载后不再适配。
 	*/
@@ -694,6 +747,7 @@ function useFloorMapTransformMetrics(params) {
 		isFullscreen,
 		toggleFullscreen,
 		fitBounds,
+		focusContentBounds,
 		isAtFitBounds,
 		notifyTransformed,
 		persistCurrentViewport,

package/lib/components/pisellFloorMapLayout/hooks/useShopFloorPlanSubscription.js

@@ -12,11 +12,15 @@ function useShopFloorPlanSubscription(params) {
 	onDetailRef.current = onDetail;
 	const onLoadErrorRef = (0, react.useRef)(onLoadError);
 	onLoadErrorRef.current = onLoadError;
+	const ensureByCodeRef = (0, react.useRef)(ensureByCode);
+	ensureByCodeRef.current = ensureByCode;
+	const unsubscribeQueryRef = (0, react.useRef)(unsubscribeQuery);
+	unsubscribeQueryRef.current = unsubscribeQuery;
 	(0, react.useEffect)(() => {
 		if (!enabled) return;
 		let cancelled = false;
 		const subId = subscriberId;
-		ensureByCode(code, {
+		ensureByCodeRef.current(code, {
 			osServer,
 			subscriberId: subId,
 			callback: (res) => {
@@ -36,14 +40,13 @@ function useShopFloorPlanSubscription(params) {
 		});
 		return () => {
 			cancelled = true;
-			unsubscribeQuery(subId);
+			unsubscribeQueryRef.current(subId);
 		};
+		/** ensureByCode / unsubscribeQuery 走 ref，避免调用方内联函数导致反复退订再订阅 */
 	}, [
 		enabled,
 		code,
 		subscriberId,
-		ensureByCode,
-		unsubscribeQuery,
 		osServer
 	]);
 }

package/lib/components/pisellFloorMapLayout/index.d.ts

@@ -1,4 +1,5 @@
-import { DataSourceFormColumn, FLOOR_MAP_BUILTIN_SHAPE_ELEMENT_KIND, FLOOR_MAP_IMAGE_ELEMENT_KIND, FLOOR_MAP_STAGE_ELEMENT_KIND, FloorMapBackgroundType, FloorMapCanvas, FloorMapCanvasNameI18n, FloorMapCanvasUiConfig, FloorMapControlsConfig, FloorMapDataSourceRecordFormContent, FloorMapDataSources, FloorMapEdge, FloorMapElementDataBindingPolicy, FloorMapElementDefaultPresentation, FloorMapElementKindCategory, FloorMapElementKindConfig, FloorMapFullscreenMode, FloorMapGridLayoutConfig, FloorMapItemBase, FloorMapItemShape, FloorMapItemUnit, FloorMapLayerConfig, FloorMapLayoutContextValue, FloorMapLayoutMode, FloorMapMergedItem, FloorMapPanBoundary, FloorMapPanConfig, FloorMapRecordFormRenderContext, FloorMapRenderOptions, FloorMapSceneElement, FloorMapSceneElementDataBinding, FloorMapTextSlot, FloorMapViewConfig, FloorMapViewportOverlayRenderArgs, FloorMapZoomConfig, PisellFloorMapLayoutProps, PisellFloorMapLayoutRef } from "./types.js";
+import { FloorMapResourcePickerSlotProps, PisellCardPickerCardMeta, PisellCardPickerCategoryConfig, PisellCardPickerCategoryLevelConfig, PisellCardPickerCategoryMode, PisellCardPickerCategoryPath, PisellCardPickerItem, PisellCardPickerMode, parseNestedPathSegments } from "./utils/floorMapResourcePickerTypes.js";
+import { DataSourceFormColumn, FLOOR_MAP_BUILTIN_SHAPE_ELEMENT_KIND, FLOOR_MAP_IMAGE_ELEMENT_KIND, FLOOR_MAP_STAGE_ELEMENT_KIND, FLOOR_MAP_ZONE_ELEMENT_KIND, FloorMapBackgroundType, FloorMapCanvas, FloorMapCanvasNameI18n, FloorMapCanvasUiConfig, FloorMapControlsConfig, FloorMapDataSourceRecordFormContent, FloorMapDataSources, FloorMapEdge, FloorMapEdgeAnchor, FloorMapEdgeStatus, FloorMapElementDataBindingPolicy, FloorMapElementDefaultPresentation, FloorMapElementKindCategory, FloorMapElementKindConfig, FloorMapFullscreenMode, FloorMapGridLayoutConfig, FloorMapItemBase, FloorMapItemShape, FloorMapItemUnit, FloorMapLayerConfig, FloorMapLayoutContextValue, FloorMapLayoutMode, FloorMapMergedItem, FloorMapPanBoundary, FloorMapPanConfig, FloorMapRecordFormRenderContext, FloorMapRenderOptions, FloorMapSceneElement, FloorMapSceneElementDataBinding, FloorMapTextSlot, FloorMapViewConfig, FloorMapViewportOverlayRenderArgs, FloorMapZoomConfig, PisellFloorMapLayoutProps, PisellFloorMapLayoutRef } from "./types.js";
 import { PisellFloorMapLayout } from "./PisellFloorMapLayout.js";
 import { renderFloorMapFallbackPlaceholder } from "./utils/floorMapFallbackRender.js";
 import { isFloorMapBuiltinShapeElementKind, isFloorMapImageElementKind } from "./utils/floorMapElementKindUtils.js";
@@ -13,6 +14,9 @@ import { sceneElementsToShopLayout, shopLayoutToSceneElements } from "./shopFloo
 import { WrapFloorMapOnSaveWithRemotePersistParams, wrapFloorMapOnSaveWithRemotePersist } from "./utils/floorMapRemotePersist.js";
 import { EMPTY_FLOOR_MAP_LAYOUT_CONTEXT, FloorMapLayoutProvider, FloorMapLayoutProviderProps, useFloorMapLayoutContext } from "./context/FloorMapLayoutContext.js";
 import { mergeFloorMapLayoutPropsFromContext } from "./context/mergeFloorMapLayoutContext.js";
+import { FloorMapResourcePickerRecord, floorMapResourcePickerRecordSearchText, getFloorMapCardPickerCategoryConfig, getFloorMapResourcePickerCardMeta } from "./utils/floorMapResourcePickerDisplay.js";
+import { initFloorMapLayoutLocales } from "./utils/floorMapCanvasDisplay.js";
 import { FloorMapImageElement } from "./components/FloorMapImageElement.js";
 import { FloorMapBuiltinShapeElement } from "./components/FloorMapBuiltinShapeElement.js";
+import { FloorMapZoneElement } from "./components/FloorMapZoneElement.js";
 import { FigmaTableCardItem, FigmaTableStatus, getFigmaTableCardFromMerged, getRenderItemByKindRoundTable, getRenderItemByKindTable, renderFigmaStyleRoundTableCard, renderFigmaStyleTableCard } from "./components/FigmaTableCard.js";