@pisell/materials 1.8.19 → 1.8.21

package/lib/components/pisellFloorMapLayout/components/FloorMapToolbar.js

@@ -39,16 +39,11 @@ var import_antd = require("antd");
 var import_types = require("../types");
 var import_floorMapElementKindUtils = require("../utils/floorMapElementKindUtils");
 var import_floorMapDropUtils = require("../utils/floorMapDropUtils");
+var import_floorMapDataRecordLabel = require("../utils/floorMapDataRecordLabel");
 var import_FloorMapToolbar = require("./FloorMapToolbar.less");
 var PREFIX = "pisell-floor-map-layout";
 var DEFAULT_PLACEMENT_SIZE = { width: 180, height: 120 };
 var DEFAULT_DECORATION_SIZE = 48;
-function formatDataRecordOptionLabel(record) {
-  const name = record.name != null ? String(record.name) : "";
-  const status = record.status != null ? String(record.status) : "";
-  if (name && status) return `${name}（${status}）`;
-  return name || String(record.id);
-}
 function getUnplacedRecordsForKey(dataSourceKey, dataSources, elements) {
   const used = new Set(
     elements.filter((e) => {
@@ -147,11 +142,17 @@ function FloorMapToolbar(props) {
     onPlaceModeChange({
       ...mode,
       dataSourceKey: key,
-      recordId: void 0
+      recordId: void 0,
+      recordIds: void 0
     });
   };
-  const handleRecordChange = (mode, recordId) => {
-    onPlaceModeChange({ ...mode, recordId: recordId || void 0 });
+  const handleRecordsChange = (mode, ids) => {
+    const list = (ids == null ? void 0 : ids.filter(Boolean)) ?? [];
+    onPlaceModeChange({
+      ...mode,
+      recordIds: list.length > 0 ? list : void 0,
+      recordId: void 0
+    });
   };
   const cancelPlaceMode = () => onPlaceModeChange(null);
   const renderKindCard = (k) => {
@@ -179,7 +180,7 @@ function FloorMapToolbar(props) {
       elementKind: k.value,
       ...(placeMode == null ? void 0 : placeMode.type) === "scene" && placeMode.elementKind === k.value ? {
         dataSourceKey: placeMode.dataSourceKey,
-        recordId: placeMode.recordId
+        ...placeMode.recordIds && placeMode.recordIds.length > 0 ? { recordIds: placeMode.recordIds } : placeMode.recordId ? { recordId: placeMode.recordId } : {}
       } : {}
     };
     return /* @__PURE__ */ import_react.default.createElement("div", { key: k.value, className: `${PREFIX}-toolbar-preview-card-wrap` }, /* @__PURE__ */ import_react.default.createElement(
@@ -246,7 +247,7 @@ function FloorMapToolbar(props) {
           if ((placeMode == null ? void 0 : placeMode.type) === "scene")
             handleDsChange(placeMode, v);
         },
-        size: "small",
+        size: "large",
         style: { width: "100%" }
       }
     ), (() => {
@@ -263,23 +264,26 @@ function FloorMapToolbar(props) {
       if (unplaced.length === 0) {
         return /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-pick-hint` }, "当前数据源无未绑定记录，或列表为空；可直接在画布落点占位。");
       }
+      const recordValue = (mode == null ? void 0 : mode.recordIds) && mode.recordIds.length > 0 ? mode.recordIds : (mode == null ? void 0 : mode.recordId) ? [mode.recordId] : void 0;
       return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
         import_antd.Select,
         {
-          placeholder: "选择要展示的记录（可选）",
+          mode: "multiple",
+          placeholder: "选择要展示的记录（可选，可多选）",
           allowClear: true,
-          value: mode == null ? void 0 : mode.recordId,
+          maxTagCount: "responsive",
+          value: recordValue,
           options: unplaced.map((r) => ({
             value: r.id,
-            label: formatDataRecordOptionLabel(r)
+            label: (0, import_floorMapDataRecordLabel.formatDataRecordOptionLabel)(r)
           })),
           onChange: (v) => {
-            if (mode) handleRecordChange(mode, v);
+            if (mode) handleRecordsChange(mode, v);
           },
-          size: "small",
+          size: "large",
           style: { width: "100%", marginTop: 4 }
         }
-      ), /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-pick-hint` }, "选中后在画布点击完成落位；留空则先占位，稍后在侧栏绑定。"));
+      ), /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-pick-hint` }, "可选多条，在画布点击一次将按阶梯偏移落多条；留空则先占位，稍后在侧栏绑定。"));
     })()), allowedKeys.length === 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-hint` }, "无可用数据源"), /* @__PURE__ */ import_react.default.createElement(
       "button",
       {

package/lib/components/pisellFloorMapLayout/components/FloorMapToolbar.less

@@ -2,7 +2,7 @@
 .pisell-floor-map-layout-toolbar {
   &.pisell-floor-map-layout-toolbar-sidebar {
     position: relative;
-    width: 220px;
+    width: 248px;
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
@@ -131,8 +131,9 @@
     display: block;
     width: 100%;
     margin-top: 8px;
-    padding: 8px 12px;
-    font-size: 13px;
+    padding: 10px 16px;
+    font-size: 15px;
+    min-height: 40px;
     color: #333;
     background: #f5f5f5;
     border: 1px solid #d9d9d9;
@@ -152,8 +153,9 @@
 
     &.cancel-inline {
       margin-top: 0;
-      padding: 4px 8px;
-      font-size: 12px;
+      padding: 8px 12px;
+      font-size: 14px;
+      min-height: 40px;
       color: #8c8c8c;
     }
 

package/lib/components/pisellFloorMapLayout/components/MapLayer.js

@@ -85,12 +85,14 @@ function MapLayer(props) {
     gap: gapCss,
     ...pointerEventsNone ? { pointerEvents: "none" } : {}
   };
+  const snapStep = Math.max(1, Number(config.snapStep ?? 1) || 1);
+  const gridSize = Math.max(50, Math.round(cellSize * snapStep));
   const gridStyle = showGrid ? {
     backgroundImage: `
           linear-gradient(to right, rgba(0,0,0,0.08) 1px, transparent 1px),
           linear-gradient(to bottom, rgba(0,0,0,0.08) 1px, transparent 1px)
         `,
-    backgroundSize: `${cellSize}px ${cellSize}px`
+    backgroundSize: `${gridSize}px ${gridSize}px`
   } : {};
   return /* @__PURE__ */ import_react.default.createElement(
     "div",

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

@@ -21,6 +21,10 @@ export interface ViewControlsProps {
     /** 当前是否处于全屏 */
     isFullscreen?: boolean;
     className?: string;
+    /** 与 config.showGridToggle 联用：当前画布是否显示网格 */
+    mapGridVisible?: boolean;
+    /** 切换当前画布 draft 的 mapLayer.showGrid */
+    onToggleMapGrid?: () => void;
 }
 export declare function ViewControls(props: ViewControlsProps): JSX.Element;
 export default ViewControls;

package/lib/components/pisellFloorMapLayout/components/ViewControls.js

@@ -39,12 +39,22 @@ var import_icons = require("@ant-design/icons");
 var import_ViewControls = require("./ViewControls.less");
 var PREFIX = "pisell-floor-map-layout";
 function ViewControls(props) {
-  const { api, config = {}, scale = 1, isFullscreen = false, className } = props;
+  const {
+    api,
+    config = {},
+    scale = 1,
+    isFullscreen = false,
+    className,
+    mapGridVisible = false,
+    onToggleMapGrid
+  } = props;
   const showZoom = config.showZoom !== false;
   const showReset = config.showReset === true;
   const showFitBounds = config.showFitBounds === true;
   const showFullscreen = config.showFullscreen === true;
+  const showGridToggle = config.showGridToggle === true && typeof onToggleMapGrid === "function";
   const scalePercent = Math.round(scale * 100);
+  const showToolsCapsule = showReset || showFitBounds || showFullscreen || showGridToggle;
   return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${PREFIX}-view-controls`, className) }, showZoom && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-view-controls-zoom-stepper` }, /* @__PURE__ */ import_react.default.createElement(
     "button",
     {
@@ -63,11 +73,11 @@ function ViewControls(props) {
       "aria-label": "放大"
     },
     /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null)
-  )), showReset && /* @__PURE__ */ import_react.default.createElement(
+  )), showToolsCapsule && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-view-controls-tools-capsule` }, showReset && /* @__PURE__ */ import_react.default.createElement(
     "button",
     {
       type: "button",
-      className: `${PREFIX}-view-controls-btn`,
+      className: `${PREFIX}-view-controls-tool-btn`,
       onClick: () => api.resetTransform(),
       "aria-label": "复位"
     },
@@ -76,21 +86,33 @@ function ViewControls(props) {
     "button",
     {
       type: "button",
-      className: `${PREFIX}-view-controls-btn`,
+      className: `${PREFIX}-view-controls-tool-btn`,
       onClick: () => api.fitBounds(),
       "aria-label": "区域定位"
     },
     "⊞"
+  ), showGridToggle && /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: (0, import_classnames.default)(`${PREFIX}-view-controls-tool-btn`, {
+        [`${PREFIX}-view-controls-tool-btn--active`]: mapGridVisible
+      }),
+      onClick: () => onToggleMapGrid(),
+      "aria-pressed": mapGridVisible,
+      "aria-label": mapGridVisible ? "隐藏网格" : "显示网格"
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_icons.BorderInnerOutlined, null)
   ), showFullscreen && api.toggleFullscreen && /* @__PURE__ */ import_react.default.createElement(
     "button",
     {
       type: "button",
-      className: `${PREFIX}-view-controls-btn`,
+      className: `${PREFIX}-view-controls-tool-btn`,
       onClick: () => api.toggleFullscreen(),
       "aria-label": isFullscreen ? "退出全屏" : "全屏"
     },
     isFullscreen ? /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenExitOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenOutlined, null)
-  ));
+  )));
 }
 var ViewControls_default = ViewControls;
 // Annotate the CommonJS export names for ESM import in node:

package/lib/components/pisellFloorMapLayout/components/ViewControls.less

@@ -10,6 +10,7 @@
   gap: 6px;
 
   /* Stepper：胶囊形 [减] 数值% [加] */
+
   &-zoom-stepper {
     display: flex;
     align-items: center;
@@ -52,26 +53,49 @@
     color: #101828;
   }
 
-  &-btn {
-    width: 32px;
-    height: 32px;
+  /* 复位 / 区域定位 / 全屏 / 网格：与 Stepper 同系胶囊条 */
+
+  &-tools-capsule {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 4px;
+    min-height: 56px;
+    padding: 2px 6px;
+    background: #fff;
+    border: 1px solid #98a2b3;
+    border-radius: 100px;
+    box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
+  }
+
+  &-tool-btn {
+    width: 52px;
+    height: 52px;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 4px;
-    background: #fff;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
     cursor: pointer;
-    font-size: 18px;
+    color: #101828;
+    font-size: 20px;
     line-height: 1;
-    color: rgba(0, 0, 0, 0.65);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 
     &:hover {
-      color: #1890ff;
-      border-color: #1890ff;
-      background: #e6f7ff;
+      background: #f2f4f7;
+      color: #101828;
+    }
+  }
+
+  &-tool-btn--active {
+    background: #fff4ed;
+    color: #ff692e;
+
+    &:hover {
+      background: #ffe8d9;
+      color: #ff692e;
     }
   }
 }

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

@@ -7,5 +7,7 @@ export interface ViewControlsWithZoomProps {
     fitBounds: () => void;
     /** 未传时不展示全屏按钮（如编辑态 floorMapFullscreenMode 为 disabled） */
     toggleFullscreen?: () => void;
+    mapGridVisible?: boolean;
+    onToggleMapGrid?: () => void;
 }
 export declare function ViewControlsWithZoom(props: ViewControlsWithZoomProps): JSX.Element;

package/lib/components/pisellFloorMapLayout/components/ViewControlsWithZoom.js

@@ -53,7 +53,9 @@ function ViewControlsWithZoom(props) {
       api,
       config: props.config,
       scale: props.scale,
-      isFullscreen: props.isFullscreen
+      isFullscreen: props.isFullscreen,
+      mapGridVisible: props.mapGridVisible,
+      onToggleMapGrid: props.onToggleMapGrid
     }
   );
 }

package/lib/components/pisellFloorMapLayout/context/mergeFloorMapLayoutContext.js

@@ -37,7 +37,8 @@ function mergeFloorMapLayoutPropsFromContext(props, ctx) {
     saveError: props.saveError ?? ctx.saveError,
     onElementRenderError: props.onElementRenderError ?? ctx.onElementRenderError,
     toolbarShowSave: props.toolbarShowSave ?? ctx.toolbarShowSave,
-    floorMapFullscreenMode: props.floorMapFullscreenMode ?? ctx.floorMapFullscreenMode
+    floorMapFullscreenMode: props.floorMapFullscreenMode ?? ctx.floorMapFullscreenMode,
+    showDataSourceRecordFormBlock: props.showDataSourceRecordFormBlock ?? ctx.showDataSourceRecordFormBlock
   };
 }
 // Annotate the CommonJS export names for ESM import in node:

package/lib/components/pisellFloorMapLayout/hooks/useFloorMapEditState.d.ts

@@ -16,6 +16,7 @@ export interface UseFloorMapEditStateParams<T extends FloorMapItemBase> {
         x: number;
         y: number;
     }>;
+    showDataSourceRecordFormBlock?: boolean;
 }
 export declare function useFloorMapEditState<T extends FloorMapItemBase>(params: UseFloorMapEditStateParams<T>): {
     config: FloorMapViewConfig | null;
@@ -54,7 +55,9 @@ export declare function useFloorMapEditState<T extends FloorMapItemBase>(params:
         dataSourceRecordForm: Record<string, FloorMapDataSourceRecordFormContent> | undefined;
         dataSourceLabels: Record<string, string> | undefined;
         layoutDraftDirty: boolean;
+        showDataSourceRecordFormBlock: boolean | undefined;
     } | null;
     placeOverlayClass: string;
     isLayoutDirty: boolean;
+    toggleDraftCanvasShowGrid: () => void;
 };

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

@@ -45,6 +45,28 @@ var import_layoutMeasurements = require("../utils/layoutMeasurements");
 var import_floorMapCanvasDisplay = require("../utils/floorMapCanvasDisplay");
 var import_types = require("../types");
 var IMAGE_PLACE_DEFAULT = { width: 400, height: 240 };
+var GRID_VIS_STORAGE_PREFIX = "pisell-floor-map-layout.grid-visible";
+function getGridVisStorageKey(canvasId) {
+  return `${GRID_VIS_STORAGE_PREFIX}:${canvasId}`;
+}
+function readStoredGridVisible(canvasId) {
+  try {
+    const raw = localStorage.getItem(getGridVisStorageKey(canvasId));
+    if (raw == null) return null;
+    if (raw === "1") return true;
+    if (raw === "0") return false;
+    return null;
+  } catch {
+    return null;
+  }
+}
+function writeStoredGridVisible(canvasId, visible) {
+  try {
+    localStorage.setItem(getGridVisStorageKey(canvasId), visible ? "1" : "0");
+  } catch {
+  }
+}
+var BATCH_PLACE_OFFSET = 16;
 function newInstanceId() {
   return `elm_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
 }
@@ -70,7 +92,8 @@ function useFloorMapEditState(params) {
     dataSourceRecordForm,
     dataSourceLabels,
     layoutPrefix,
-    contentOffsetRef
+    contentOffsetRef,
+    showDataSourceRecordFormBlock
   } = params;
   const engineCtx = (0, import_useEngineContext.default)();
   const engineLocale = ((_b = (_a = engineCtx == null ? void 0 : engineCtx.engine) == null ? void 0 : _a.props) == null ? void 0 : _b.locale) || "zh-CN";
@@ -82,13 +105,26 @@ function useFloorMapEditState(params) {
   const [placeMode, setPlaceMode] = (0, import_react.useState)(null);
   const [saving, setSaving] = (0, import_react.useState)(false);
   const [savingRecord, setSavingRecord] = (0, import_react.useState)(false);
+  const [savedBaselineConfig, setSavedBaselineConfig] = (0, import_react.useState)(null);
   const config = isFloorMapView ? draftConfig ?? floorMapConfigProp : null;
   const configRef = (0, import_react.useRef)(config);
   configRef.current = config;
   (0, import_react.useEffect)(() => {
     if (!floorMapConfigProp) return;
-    const nextConfig = (0, import_floorMapViewConfigDiff.normalizeFloorMapViewConfigFromProp)(floorMapConfigProp);
+    const baseConfig = (0, import_floorMapViewConfigDiff.normalizeFloorMapViewConfigFromProp)(floorMapConfigProp);
+    const nextConfig = {
+      ...baseConfig,
+      canvases: baseConfig.canvases.map((canvas) => {
+        const stored = readStoredGridVisible(canvas.id);
+        if (stored == null) return canvas;
+        return {
+          ...canvas,
+          mapLayer: { ...canvas.mapLayer ?? {}, showGrid: stored }
+        };
+      })
+    };
     setDraftConfig(nextConfig);
+    setSavedBaselineConfig(null);
     const enabled = nextConfig.canvases.filter((c) => c.enabled).sort((a, b) => a.order - b.order);
     setCurrentCanvasId(
       (prev) => {
@@ -99,9 +135,9 @@ function useFloorMapEditState(params) {
   }, [floorMapConfigProp]);
   const isLayoutDirty = (0, import_react.useMemo)(() => {
     if (!isFloorMapView || !draftConfig || !floorMapConfigProp) return false;
-    const baseline = (0, import_floorMapViewConfigDiff.normalizeFloorMapViewConfigFromProp)(floorMapConfigProp);
+    const baseline = savedBaselineConfig ?? (0, import_floorMapViewConfigDiff.normalizeFloorMapViewConfigFromProp)(floorMapConfigProp);
     return !(0, import_floorMapViewConfigDiff.floorMapViewConfigsEqual)(draftConfig, baseline);
-  }, [isFloorMapView, draftConfig, floorMapConfigProp]);
+  }, [isFloorMapView, draftConfig, floorMapConfigProp, savedBaselineConfig]);
   const handleAddCanvas = (0, import_react.useCallback)(() => {
     (0, import_floorMapCanvasDisplay.initFloorMapLayoutLocales)(engineLocale);
     const label = import_utils.locales.getText(
@@ -242,6 +278,26 @@ function useFloorMapEditState(params) {
       const allKeys = Object.keys(dataSources ?? {});
       const allowedKeys = ((_a2 = kindConfig == null ? void 0 : kindConfig.allowedDataSourceKeys) == null ? void 0 : _a2.length) ? kindConfig.allowedDataSourceKeys.filter((k) => allKeys.includes(k)) : allKeys;
       const pickKey = scene.dataSourceKey ?? allowedKeys[0] ?? allKeys[0];
+      const recordIdsToPlace = scene.recordIds && scene.recordIds.length > 0 ? scene.recordIds : scene.recordId ? [scene.recordId] : [];
+      const isStage = scene.elementKind === import_types.FLOOR_MAP_STAGE_ELEMENT_KIND;
+      const isImage = (0, import_floorMapElementKindUtils.isFloorMapImageElementKind)(scene.elementKind);
+      const w = isImage ? IMAGE_PLACE_DEFAULT.width : isStage ? import_floorMapStageDefaults.STAGE_DECO_DEFAULT.width : defaultPlacementWidth;
+      const h = isImage ? IMAGE_PLACE_DEFAULT.height : isStage ? import_floorMapStageDefaults.STAGE_DECO_DEFAULT.height : defaultPlacementHeight;
+      const useDecoSize = policy === "none" && scene.elementKind !== import_types.FLOOR_MAP_STAGE_ELEMENT_KIND && !isImage;
+      const buildOneElement = (dataBinding2, x, y, name) => ({
+        instanceId: newInstanceId(),
+        canvasId: currentCanvasId,
+        x,
+        y,
+        name,
+        zIndex: isImage ? -5 : 0,
+        width: useDecoSize ? defaultDecoSize : w,
+        height: useDecoSize ? defaultDecoSize : h,
+        elementKind: scene.elementKind,
+        shape: isStage || isImage ? "rect" : kindConfig == null ? void 0 : kindConfig.defaultShape,
+        dataBinding: dataBinding2,
+        ...isImage ? { imageUrl: "" } : {}
+      });
       let dataBinding;
       if (policy !== "none" && pickKey) {
         const dsList = (dataSources == null ? void 0 : dataSources[pickKey]) ?? [];
@@ -250,60 +306,99 @@ function useFloorMapEditState(params) {
             dataSourceKey: pickKey,
             recordId: `new_${Date.now()}`
           };
-        } else if (!scene.recordId) {
+        } else if (recordIdsToPlace.length === 0) {
           if (policy === "required") {
             import_antd.message.warning("请先在侧栏选择数据源与数据行，再落位");
             return false;
           }
-        } else {
-          const record = dsList.find((r) => r.id === scene.recordId);
+        } else if (recordIdsToPlace.length === 1) {
+          const rid = recordIdsToPlace[0];
+          const record = dsList.find((r) => r.id === rid);
           if (!record) {
             import_antd.message.error("所选记录不存在，请重新选择数据行");
             return false;
           }
           const cand = {
             dataSourceKey: pickKey,
-            recordId: scene.recordId
+            recordId: rid
           };
           if (duplicateBinding(config.sceneElements, cand)) {
             import_antd.message.warning("该数据记录已在平面图中绑定，请勿重复添加");
             return false;
           }
           dataBinding = cand;
+        } else {
+          const newEls = [];
+          let skippedDup = 0;
+          let skippedMissing = 0;
+          let placeIndex = 0;
+          const seenInBatch = /* @__PURE__ */ new Set();
+          recordIdsToPlace.forEach((rid) => {
+            const record = dsList.find((r) => r.id === rid);
+            if (!record) {
+              skippedMissing += 1;
+              return;
+            }
+            const cand = {
+              dataSourceKey: pickKey,
+              recordId: rid
+            };
+            if (seenInBatch.has(rid) || duplicateBinding(config.sceneElements, cand)) {
+              skippedDup += 1;
+              return;
+            }
+            seenInBatch.add(rid);
+            const row = record;
+            const placementName2 = String((row == null ? void 0 : row.name) ?? rid);
+            newEls.push(
+              buildOneElement(
+                cand,
+                contentX + placeIndex * BATCH_PLACE_OFFSET,
+                contentY + placeIndex * BATCH_PLACE_OFFSET,
+                placementName2
+              )
+            );
+            placeIndex += 1;
+          });
+          if (skippedDup > 0) {
+            import_antd.message.warning(`已跳过 ${skippedDup} 条已在平面图中绑定的记录`);
+          }
+          if (skippedMissing > 0) {
+            import_antd.message.warning(`有 ${skippedMissing} 条记录不存在，已跳过`);
+          }
+          if (newEls.length === 0) {
+            import_antd.message.warning("没有可落位的记录");
+            return false;
+          }
+          setDraftConfig(
+            (prev) => prev ? {
+              ...prev,
+              sceneElements: [...prev.sceneElements ?? [], ...newEls]
+            } : prev
+          );
+          return true;
         }
       }
-      const isStage = scene.elementKind === import_types.FLOOR_MAP_STAGE_ELEMENT_KIND;
-      const isImage = scene.elementKind === import_types.FLOOR_MAP_IMAGE_ELEMENT_KIND;
-      const w = isImage ? IMAGE_PLACE_DEFAULT.width : isStage ? import_floorMapStageDefaults.STAGE_DECO_DEFAULT.width : defaultPlacementWidth;
-      const h = isImage ? IMAGE_PLACE_DEFAULT.height : isStage ? import_floorMapStageDefaults.STAGE_DECO_DEFAULT.height : defaultPlacementHeight;
-      const useDecoSize = policy === "none" && scene.elementKind !== import_types.FLOOR_MAP_STAGE_ELEMENT_KIND && !isImage;
       const placementName = (() => {
         var _a3, _b2;
         if (isStage) return import_floorMapStageDefaults.STAGE_DECO_DEFAULT.name;
         if (isImage) return "底图";
         const db = dataBinding;
-        if (db && scene.recordId) {
+        const rid = recordIdsToPlace[0];
+        if (db && rid) {
           const row = (_a3 = dataSources == null ? void 0 : dataSources[db.dataSourceKey]) == null ? void 0 : _a3.find(
-            (r) => r.id === db.recordId
+            (r) => r.id === rid
           );
-          return String((row == null ? void 0 : row.name) ?? db.recordId);
+          return String((row == null ? void 0 : row.name) ?? rid);
         }
         return ((_b2 = kindConfig == null ? void 0 : kindConfig.defaultPresentation) == null ? void 0 : _b2.title) ?? "";
       })();
-      const newEl = {
-        instanceId: newInstanceId(),
-        canvasId: currentCanvasId,
-        x: contentX,
-        y: contentY,
-        name: placementName,
-        zIndex: isImage ? -5 : 0,
-        width: useDecoSize ? defaultDecoSize : w,
-        height: useDecoSize ? defaultDecoSize : h,
-        elementKind: scene.elementKind,
-        shape: isStage || isImage ? "rect" : kindConfig == null ? void 0 : kindConfig.defaultShape,
+      const newEl = buildOneElement(
         dataBinding,
-        ...isImage ? { imageUrl: "" } : {}
-      };
+        contentX,
+        contentY,
+        placementName
+      );
       setDraftConfig(
         (prev) => prev ? { ...prev, sceneElements: [...prev.sceneElements ?? [], newEl] } : prev
       );
@@ -345,10 +440,29 @@ function useFloorMapEditState(params) {
     setSaving(true);
     try {
       onSave(draftConfig);
+      setSavedBaselineConfig(draftConfig);
     } finally {
       setSaving(false);
     }
   }, [draftConfig, onSave]);
+  const toggleDraftCanvasShowGrid = (0, import_react.useCallback)(() => {
+    setDraftConfig((prev) => {
+      if (!prev || !currentCanvasId) return prev;
+      return {
+        ...prev,
+        canvases: prev.canvases.map((c) => {
+          var _a2;
+          if (c.id !== currentCanvasId) return c;
+          const nextShow = !Boolean((_a2 = c.mapLayer) == null ? void 0 : _a2.showGrid);
+          writeStoredGridVisible(currentCanvasId, nextShow);
+          return {
+            ...c,
+            mapLayer: { ...c.mapLayer, showGrid: nextShow }
+          };
+        })
+      };
+    });
+  }, [currentCanvasId]);
   const handleEditPanelUpdate = (0, import_react.useCallback)(
     (patch) => {
       var _a2;
@@ -397,7 +511,8 @@ function useFloorMapEditState(params) {
     recordFormColumns: dataSourceFormColumns,
     dataSourceRecordForm,
     dataSourceLabels,
-    layoutDraftDirty: isLayoutDirty
+    layoutDraftDirty: isLayoutDirty,
+    showDataSourceRecordFormBlock
   } : null;
   return {
     config,
@@ -420,7 +535,8 @@ function useFloorMapEditState(params) {
     placeSceneElementFromPaletteDrop,
     editPanelParams,
     placeOverlayClass,
-    isLayoutDirty
+    isLayoutDirty,
+    toggleDraftCanvasShowGrid
   };
 }
 // Annotate the CommonJS export names for ESM import in node:

package/lib/components/pisellFloorMapLayout/hooks/useFloorMapTransformMetrics.d.ts

@@ -56,7 +56,7 @@ export declare function useFloorMapTransformMetrics<T extends FloorMapItemBase>(
     setScale: import("react").Dispatch<import("react").SetStateAction<number>>;
     isFullscreen: boolean;
     toggleFullscreen: () => void;
-    fitBounds: () => void;
+    fitBounds: () => boolean;
     lastTransformRef: MutableRefObject<{
         x: number;
         y: number;