@pisell/materials 1.8.20 → 1.8.21

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

@@ -65,6 +65,7 @@ function useFloorMapTransformMetrics(params) {
     setMapAreaSize({ width: el.clientWidth, height: el.clientHeight });
     return () => ro.disconnect();
   }, []);
+  const autoFitOnMount = zoom.autoFitOnMount !== false;
   const zoomConfig = (0, import_react.useMemo)(
     () => ({
       initialScale: zoom.defaultScale ?? 1,
@@ -149,6 +150,10 @@ function useFloorMapTransformMetrics(params) {
     if (initialAlignRef.current.frame !== frameResetKey) {
       initialAlignRef.current = { frame: frameResetKey, done: false };
     }
+    if (autoFitOnMount) {
+      initialAlignRef.current.done = true;
+      return;
+    }
     if (alignPadSingle == null) {
       initialAlignRef.current.done = false;
       return;
@@ -182,7 +187,8 @@ function useFloorMapTransformMetrics(params) {
     initialPositionX,
     initialPositionY,
     zoomConfig.initialScale,
-    transformRef
+    transformRef,
+    autoFitOnMount
   ]);
   (0, import_react.useEffect)(() => {
     const el = containerRef.current;
@@ -204,20 +210,133 @@ function useFloorMapTransformMetrics(params) {
   const fitBounds = (0, import_react.useCallback)(() => {
     const ctx = transformRef.current;
     const container = containerRef.current;
-    if (!ctx || !container) return;
+    if (!ctx || !container) return false;
     const wrapper = container.querySelector(".react-transform-wrapper");
-    if (!wrapper) return;
+    if (!wrapper) return false;
     const wrapperRect = wrapper.getBoundingClientRect();
-    const nextScale = Math.min(
+    if (wrapperRect.width <= 0 || wrapperRect.height <= 0) return false;
+    const pixelBox = isFloorMapView && effectiveItemUnit === "pixel" && items.length > 0 ? (0, import_layoutMeasurements.getPixelBoundingBox)(items, cellSize) : null;
+    if (pixelBox) {
+      const bw = Math.max(1, pixelBox.maxRight - pixelBox.minLeft);
+      const bh = Math.max(1, pixelBox.maxBottom - pixelBox.minTop);
+      const edgePx = 0;
+      const availW = Math.max(1, wrapperRect.width - 2 * edgePx);
+      const availH = Math.max(1, wrapperRect.height - 2 * edgePx);
+      const raw2 = Math.min(availW / bw, availH / bh);
+      const nextScale2 = Math.min(raw2, zoom.max ?? 2);
+      const ap = alignPadSingle ?? padSingle;
+      const bboxCx = ap + bw / 2;
+      const bboxCy = ap + bh / 2;
+      const x2 = wrapperRect.width / 2 - bboxCx * nextScale2;
+      const y2 = wrapperRect.height / 2 - bboxCy * nextScale2;
+      ctx.setTransform(x2, y2, nextScale2);
+      return true;
+    }
+    if (contentWidth <= 0 || contentHeight <= 0) return false;
+    const raw = Math.min(
       wrapperRect.width / contentWidth,
-      wrapperRect.height / contentHeight,
-      zoom.max ?? 2
+      wrapperRect.height / contentHeight
     );
+    const nextScale = Math.min(raw, zoom.max ?? 2);
     const padA = alignPadSingle ?? 0;
     const x = VIEWPORT_TOP_LEFT_MARGIN - padA * nextScale;
     const y = VIEWPORT_TOP_LEFT_MARGIN - padA * nextScale;
     ctx.setTransform(x, y, nextScale);
-  }, [contentWidth, contentHeight, zoom.max, transformRef, alignPadSingle]);
+    return true;
+  }, [
+    contentWidth,
+    contentHeight,
+    zoom.max,
+    transformRef,
+    alignPadSingle,
+    isFloorMapView,
+    effectiveItemUnit,
+    items,
+    cellSize,
+    padSingle
+  ]);
+  const autoFitOnceRef = (0, import_react.useRef)({
+    frame: "",
+    done: false
+  });
+  const prevItemsCountForAutoFitRef = (0, import_react.useRef)(null);
+  (0, import_react.useLayoutEffect)(() => {
+    if (!isFloorMapView || !autoFitOnMount || frameResetKey === void 0) return;
+    const frame = String(frameResetKey);
+    if (autoFitOnceRef.current.frame !== frame) {
+      autoFitOnceRef.current = { frame, done: false };
+      prevItemsCountForAutoFitRef.current = null;
+    }
+    const itemCount = items.length;
+    const prevN = prevItemsCountForAutoFitRef.current;
+    if (prevN !== null && prevN === 0 && itemCount > 0) {
+      autoFitOnceRef.current.done = false;
+    }
+    prevItemsCountForAutoFitRef.current = itemCount;
+    if (autoFitOnceRef.current.done) return;
+    if (effectiveItemUnit === "pixel" && itemCount === 0) {
+      return;
+    }
+    if (contentWidth <= 0 || contentHeight <= 0) return;
+    let cancelled = false;
+    let raf = 0;
+    let attempts = 0;
+    const MAX_AUTO_FIT_ATTEMPTS = 160;
+    const tick = () => {
+      if (cancelled) return;
+      if (attempts >= MAX_AUTO_FIT_ATTEMPTS) return;
+      const ctx = transformRef.current;
+      const container = containerRef.current;
+      const wrapper = container == null ? void 0 : container.querySelector(
+        ".react-transform-wrapper"
+      );
+      if (!ctx || !wrapper) {
+        attempts += 1;
+        raf = requestAnimationFrame(tick);
+        return;
+      }
+      const rect = wrapper.getBoundingClientRect();
+      if (rect.width <= 0 || rect.height <= 0) {
+        attempts += 1;
+        raf = requestAnimationFrame(tick);
+        return;
+      }
+      raf = requestAnimationFrame(() => {
+        if (cancelled) return;
+        raf = requestAnimationFrame(() => {
+          if (cancelled) return;
+          const ok = fitBounds();
+          if (ok) {
+            autoFitOnceRef.current.done = true;
+            return;
+          }
+          attempts += 1;
+          if (attempts < MAX_AUTO_FIT_ATTEMPTS) {
+            raf = requestAnimationFrame(tick);
+          }
+        });
+      });
+    };
+    raf = requestAnimationFrame(tick);
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(raf);
+    };
+  }, [
+    isFloorMapView,
+    autoFitOnMount,
+    frameResetKey,
+    effectiveItemUnit,
+    items.length,
+    contentWidth,
+    contentHeight,
+    viewportSize.width,
+    viewportSize.height,
+    mapAreaSize.width,
+    mapAreaSize.height,
+    fitBounds,
+    transformRef
+  ]);
   const lastTransformRef = (0, import_react.useRef)({ x: 0, y: 0, scale: 1 });
   const [isInteractingWithElement, setIsInteractingWithElement] = (0, import_react.useState)(false);
   const prevInteractingRef = (0, import_react.useRef)(false);

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

@@ -3,8 +3,10 @@
  * 空间布局视图：在二维平面按坐标渲染资源，支持缩放/平移/复位；支持 floorMapConfig + mode 平面图视图
  */
 export { PisellFloorMapLayout } from './PisellFloorMapLayout';
-export type { PisellFloorMapLayoutProps, PisellFloorMapLayoutRef, FloorMapItemBase, FloorMapItemUnit, FloorMapLayerConfig, FloorMapZoomConfig, FloorMapPanConfig, FloorMapControlsConfig, FloorMapItemShape, FloorMapBackgroundType, FloorMapPanBoundary, FloorMapLayoutMode, FloorMapGridLayoutConfig, FloorMapCanvas, FloorMapElement, FloorMapData, FloorMapViewConfig, FloorMapCanvasUiConfig, FloorMapSceneElement, FloorMapSceneElementDataBinding, FloorMapPlaceMode, FloorMapElementKindCategory, FloorMapElementDataBindingPolicy, FloorMapElementDefaultPresentation, FloorMapEdge, FloorMapElementKindConfig, FloorMapElementType, FloorMapTextSlot, FloorMapDataSources, FloorMapRenderOptions, FloorMapEditPanelParams, DataSourceFormColumn, FloorMapMergedItem, FloorMapRecordFormRenderContext, FloorMapDataSourceRecordFormContent, FloorMapFullscreenMode, FloorMapLayoutContextValue, } from './types';
+export type { PisellFloorMapLayoutProps, PisellFloorMapLayoutRef, FloorMapItemBase, FloorMapItemUnit, FloorMapLayerConfig, FloorMapZoomConfig, FloorMapPanConfig, FloorMapControlsConfig, FloorMapItemShape, FloorMapBackgroundType, FloorMapPanBoundary, FloorMapLayoutMode, FloorMapGridLayoutConfig, FloorMapCanvas, FloorMapCanvasNameI18n, FloorMapElement, FloorMapData, FloorMapViewConfig, FloorMapCanvasUiConfig, FloorMapSceneElement, FloorMapSceneElementDataBinding, FloorMapPlaceMode, FloorMapElementKindCategory, FloorMapElementDataBindingPolicy, FloorMapElementDefaultPresentation, FloorMapEdge, FloorMapElementKindConfig, FloorMapElementType, FloorMapTextSlot, FloorMapDataSources, FloorMapRenderOptions, FloorMapEditPanelParams, DataSourceFormColumn, FloorMapMergedItem, FloorMapRecordFormRenderContext, FloorMapDataSourceRecordFormContent, FloorMapFullscreenMode, FloorMapLayoutContextValue, FloorMapViewportOverlayRenderArgs, } from './types';
 export { FLOOR_MAP_STAGE_ELEMENT_KIND, FLOOR_MAP_IMAGE_ELEMENT_KIND, } from './types';
+export { renderFloorMapFallbackPlaceholder } from './utils/floorMapFallbackRender';
+export { isFloorMapImageElementKind } from './utils/floorMapElementKindUtils';
 export { FloorMapLayoutProvider, useFloorMapLayoutContext, EMPTY_FLOOR_MAP_LAYOUT_CONTEXT, } from './context/FloorMapLayoutContext';
 export type { FloorMapLayoutProviderProps } from './context/FloorMapLayoutContext';
 export { mergeFloorMapLayoutPropsFromContext } from './context/mergeFloorMapLayoutContext';

package/lib/components/pisellFloorMapLayout/index.js

@@ -28,14 +28,18 @@ __export(pisellFloorMapLayout_exports, {
   getFigmaTableCardFromMerged: () => import_FigmaTableCard.getFigmaTableCardFromMerged,
   getRenderItemByKindRoundTable: () => import_FigmaTableCard.getRenderItemByKindRoundTable,
   getRenderItemByKindTable: () => import_FigmaTableCard.getRenderItemByKindTable,
+  isFloorMapImageElementKind: () => import_floorMapElementKindUtils.isFloorMapImageElementKind,
   mergeFloorMapLayoutPropsFromContext: () => import_mergeFloorMapLayoutContext.mergeFloorMapLayoutPropsFromContext,
   renderFigmaStyleRoundTableCard: () => import_FigmaTableCard.renderFigmaStyleRoundTableCard,
   renderFigmaStyleTableCard: () => import_FigmaTableCard.renderFigmaStyleTableCard,
+  renderFloorMapFallbackPlaceholder: () => import_floorMapFallbackRender.renderFloorMapFallbackPlaceholder,
   useFloorMapLayoutContext: () => import_FloorMapLayoutContext.useFloorMapLayoutContext
 });
 module.exports = __toCommonJS(pisellFloorMapLayout_exports);
 var import_PisellFloorMapLayout = require("./PisellFloorMapLayout");
 var import_types = require("./types");
+var import_floorMapFallbackRender = require("./utils/floorMapFallbackRender");
+var import_floorMapElementKindUtils = require("./utils/floorMapElementKindUtils");
 var import_FloorMapLayoutContext = require("./context/FloorMapLayoutContext");
 var import_mergeFloorMapLayoutContext = require("./context/mergeFloorMapLayoutContext");
 var import_FloorMapImageElement = require("./components/FloorMapImageElement");
@@ -51,8 +55,10 @@ var import_FigmaTableCard = require("./components/FigmaTableCard");
   getFigmaTableCardFromMerged,
   getRenderItemByKindRoundTable,
   getRenderItemByKindTable,
+  isFloorMapImageElementKind,
   mergeFloorMapLayoutPropsFromContext,
   renderFigmaStyleRoundTableCard,
   renderFigmaStyleTableCard,
+  renderFloorMapFallbackPlaceholder,
   useFloorMapLayoutContext
 });

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

@@ -46,6 +46,8 @@ declare const _default: {
         'pisell-floor-map-layout.edit-panel.extra-image-url': string;
         'pisell-floor-map-layout.edit-panel.ph-https': string;
         'pisell-floor-map-layout.edit-panel.label-canvas': string;
+        'pisell-floor-map-layout.edit-panel.label-element-kind': string;
+        'pisell-floor-map-layout.edit-panel.hint-kind-binding-cleared': string;
         'pisell-floor-map-layout.edit-panel.apply': string;
         'pisell-floor-map-layout.edit-panel.data-binding': string;
         'pisell-floor-map-layout.edit-panel.data-binding-note': string;
@@ -106,6 +108,8 @@ declare const _default: {
         'pisell-floor-map-layout.edit-panel.extra-image-url': string;
         'pisell-floor-map-layout.edit-panel.ph-https': string;
         'pisell-floor-map-layout.edit-panel.label-canvas': string;
+        'pisell-floor-map-layout.edit-panel.label-element-kind': string;
+        'pisell-floor-map-layout.edit-panel.hint-kind-binding-cleared': string;
         'pisell-floor-map-layout.edit-panel.apply': string;
         'pisell-floor-map-layout.edit-panel.data-binding': string;
         'pisell-floor-map-layout.edit-panel.data-binding-note': string;
@@ -166,6 +170,8 @@ declare const _default: {
         'pisell-floor-map-layout.edit-panel.extra-image-url': string;
         'pisell-floor-map-layout.edit-panel.ph-https': string;
         'pisell-floor-map-layout.edit-panel.label-canvas': string;
+        'pisell-floor-map-layout.edit-panel.label-element-kind': string;
+        'pisell-floor-map-layout.edit-panel.hint-kind-binding-cleared': string;
         'pisell-floor-map-layout.edit-panel.apply': string;
         'pisell-floor-map-layout.edit-panel.data-binding': string;
         'pisell-floor-map-layout.edit-panel.data-binding-note': string;

package/lib/components/pisellFloorMapLayout/locales.js

@@ -50,7 +50,7 @@ var locales_default = {
     "pisell-floor-map-layout.edit-panel.element-props": "Element",
     "pisell-floor-map-layout.edit-panel.close-aria": "Close",
     "pisell-floor-map-layout.edit-panel.hint-apply": "Position or size changed — click Apply to update the canvas.",
-    "pisell-floor-map-layout.edit-panel.hint-save": "Layout draft is not saved — click Save at the top.",
+    "pisell-floor-map-layout.edit-panel.hint-save": "Layout draft is not saved — click Done editing to save.",
     "pisell-floor-map-layout.edit-panel.section-layout": "Position · Layer · Size",
     "pisell-floor-map-layout.edit-panel.lock-on": "Locked: drag/resize disabled on canvas; click to unlock",
     "pisell-floor-map-layout.edit-panel.lock-off": "Lock to disable drag and resize on canvas",
@@ -67,6 +67,8 @@ var locales_default = {
     "pisell-floor-map-layout.edit-panel.extra-image-url": "Use a network image URL; lower layer to place under tables.",
     "pisell-floor-map-layout.edit-panel.ph-https": "https://...",
     "pisell-floor-map-layout.edit-panel.label-canvas": "Canvas",
+    "pisell-floor-map-layout.edit-panel.label-element-kind": "Element type",
+    "pisell-floor-map-layout.edit-panel.hint-kind-binding-cleared": "Data binding was cleared because it does not apply to the new type.",
     "pisell-floor-map-layout.edit-panel.apply": "Apply",
     "pisell-floor-map-layout.edit-panel.data-binding": "Data binding",
     "pisell-floor-map-layout.edit-panel.data-binding-note": "Changing data source or row writes to the layout draft; click Save at the top to persist.",
@@ -110,7 +112,7 @@ var locales_default = {
     "pisell-floor-map-layout.edit-panel.element-props": "图元属性",
     "pisell-floor-map-layout.edit-panel.close-aria": "关闭",
     "pisell-floor-map-layout.edit-panel.hint-apply": "位置、尺寸等已修改，请点击「应用」同步到画布。",
-    "pisell-floor-map-layout.edit-panel.hint-save": "布局草稿未持久化，请点击顶部「保存」。",
+    "pisell-floor-map-layout.edit-panel.hint-save": "布局草稿未持久化，请点击「完成编辑」保存。",
     "pisell-floor-map-layout.edit-panel.section-layout": "位置 · 层级 · 尺寸",
     "pisell-floor-map-layout.edit-panel.lock-on": "已锁定：画布不可拖拽/缩放；点击解锁",
     "pisell-floor-map-layout.edit-panel.lock-off": "锁定后画布不可拖拽与改尺寸",
@@ -127,6 +129,8 @@ var locales_default = {
     "pisell-floor-map-layout.edit-panel.extra-image-url": "可填网络图片地址；将层级调低可铺在桌位下方作底图。",
     "pisell-floor-map-layout.edit-panel.ph-https": "https://...",
     "pisell-floor-map-layout.edit-panel.label-canvas": "所属画布",
+    "pisell-floor-map-layout.edit-panel.label-element-kind": "图元类型",
+    "pisell-floor-map-layout.edit-panel.hint-kind-binding-cleared": "新类型与原先绑定不兼容，已清除数据绑定。",
     "pisell-floor-map-layout.edit-panel.apply": "应用",
     "pisell-floor-map-layout.edit-panel.data-binding": "数据绑定",
     "pisell-floor-map-layout.edit-panel.data-binding-note": "修改数据源或绑定行会立即写入布局草稿；持久化请点击顶部「保存」。",
@@ -170,7 +174,7 @@ var locales_default = {
     "pisell-floor-map-layout.edit-panel.element-props": "圖元屬性",
     "pisell-floor-map-layout.edit-panel.close-aria": "關閉",
     "pisell-floor-map-layout.edit-panel.hint-apply": "位置、尺寸等已修改，請點擊「套用」同步到畫布。",
-    "pisell-floor-map-layout.edit-panel.hint-save": "佈局草稿未持久化，請點擊頂部「儲存」。",
+    "pisell-floor-map-layout.edit-panel.hint-save": "佈局草稿未持久化，請點擊「完成編輯」儲存。",
     "pisell-floor-map-layout.edit-panel.section-layout": "位置 · 層級 · 尺寸",
     "pisell-floor-map-layout.edit-panel.lock-on": "已鎖定：畫布不可拖曳/縮放；點擊解鎖",
     "pisell-floor-map-layout.edit-panel.lock-off": "鎖定後畫布不可拖曳與改尺寸",
@@ -187,6 +191,8 @@ var locales_default = {
     "pisell-floor-map-layout.edit-panel.extra-image-url": "可填網絡圖片地址；將層級調低可鋪在桌位下方作底圖。",
     "pisell-floor-map-layout.edit-panel.ph-https": "https://...",
     "pisell-floor-map-layout.edit-panel.label-canvas": "所屬畫布",
+    "pisell-floor-map-layout.edit-panel.label-element-kind": "圖元類型",
+    "pisell-floor-map-layout.edit-panel.hint-kind-binding-cleared": "新類型與原先綁定不相容，已清除數據綁定。",
     "pisell-floor-map-layout.edit-panel.apply": "套用",
     "pisell-floor-map-layout.edit-panel.data-binding": "數據綁定",
     "pisell-floor-map-layout.edit-panel.data-binding-note": "修改數據源或綁定行會立即寫入佈局草稿；持久化請點擊頂部「儲存」。",

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

@@ -81,6 +81,11 @@ export interface FloorMapZoomConfig {
     max?: number;
     /** 缩放步进，默认 0.1 (10%) */
     step?: number;
+    /**
+     * 为 false 时关闭；未传或其它值时默认开启（平面图像素模式且当前画布有图元时，每画布自动 fitBounds 一次，可视区域刚好容纳全部图元）。
+     * 开启时跳过「首帧 defaultScale 左上对齐」，避免与 fit 闪动叠加。
+     */
+    autoFitOnMount?: boolean;
 }
 /**
  * 平移配置
@@ -103,6 +108,10 @@ export interface FloorMapControlsConfig {
     showFitBounds?: boolean;
     /** 是否显示全屏按钮，默认 false */
     showFullscreen?: boolean;
+    /**
+     * 是否显示网格开关（写入当前画布 draft 的 mapLayer.showGrid），默认 false
+     */
+    showGridToggle?: boolean;
 }
 /**
  * 布局模式（规则网格 vs 完全自由坐标）
@@ -312,7 +321,10 @@ export declare type FloorMapPlaceMode = null | {
     type: 'scene';
     elementKind: string;
     dataSourceKey?: string;
+    /** 单选落一条；与 {@link recordIds} 二选一，多选时优先 {@link recordIds} */
     recordId?: string;
+    /** 多选后在画布一次落多条，按锚点阶梯偏移 */
+    recordIds?: string[];
 };
 /** 阅读态 renderItem 可选第三参数 */
 export interface FloorMapRenderOptions {
@@ -377,6 +389,11 @@ export interface FloorMapEditPanelParams {
      * 用于提示用户点击顶部「保存」持久化布局草稿。
      */
     layoutDraftDirty?: boolean;
+    /**
+     * 为 false 时不渲染「数据绑定」下方的数据源记录编辑表单（FloorMapDataForm / 自定义 record 表单）；
+     * 数据绑定选数据源与选行仍可展示。
+     */
+    showDataSourceRecordFormBlock?: boolean;
 }
 /**
  * 合并当前画布的 sceneElements 为 items（用于 Layout 渲染）
@@ -400,7 +417,7 @@ export declare type FloorMapFullscreenMode = 'toggle' | 'locked' | 'disabled';
  * 平面图 Layout 注入上下文：数据、保存、侧栏表单与状态等（不包含 renderItem/mapLayer 等展示向 props）。
  * 由 `FloorMapLayoutProvider` / RecordBoard `floorMapLayoutContext` 提供，与 `PisellFloorMapLayout` props 按 `??` 合并，props 优先。
  */
-export declare type FloorMapLayoutContextValue = Partial<Pick<PisellFloorMapLayoutProps<FloorMapItemBase>, 'floorMapConfig' | 'dataSources' | 'onSave' | 'onDataSourceRecordSave' | 'dataSourceLabels' | 'dataSourceFormColumns' | 'dataSourceRecordForm' | 'loading' | 'saveError' | 'onElementRenderError' | 'toolbarShowSave' | 'floorMapFullscreenMode'>>;
+export declare type FloorMapLayoutContextValue = Partial<Pick<PisellFloorMapLayoutProps<FloorMapItemBase>, 'floorMapConfig' | 'dataSources' | 'onSave' | 'onDataSourceRecordSave' | 'dataSourceLabels' | 'dataSourceFormColumns' | 'dataSourceRecordForm' | 'loading' | 'saveError' | 'onElementRenderError' | 'toolbarShowSave' | 'floorMapFullscreenMode' | 'showDataSourceRecordFormBlock'>>;
 /**
  * PisellFloorMapLayout 组件 Props
  * @template T - 资源项类型，需继承 FloorMapItemBase 或兼容 id/x/y
@@ -527,7 +544,30 @@ export interface PisellFloorMapLayoutProps<T extends FloorMapItemBase = FloorMap
      * 是否在左侧工具栏底部显示「保存」（默认 true；非全屏时顶栏为 Tab+全屏，保存多在侧栏；全屏时保存仅在顶栏）
      */
     toolbarShowSave?: boolean;
+    /**
+     * 为 false 时隐藏侧栏「数据源记录」表单区（保留数据绑定选源/选行）。
+     */
+    showDataSourceRecordFormBlock?: boolean;
+    /**
+     * 画布 Tab 行右侧扩展（阅读态顶栏、编辑态 compact/full 顶栏），如业务「编辑平面图 / 完成编辑」。
+     * 传入且阅读态仅单画布时仍会显示顶栏以便放置该插槽；全屏入口由布局内建，可与本插槽同排展示。
+     */
+    canvasTabsBarTrailing?: ReactNode;
+    /**
+     * 平面图模式：在地图视口内悬浮层（不随画布缩放平移），如状态统计。
+     * 传入函数时可拿到当前画布合并后的 items 与数据源。
+     */
+    floorMapViewportOverlay?: ReactNode | ((args: FloorMapViewportOverlayRenderArgs<T>) => ReactNode);
 }
+/**
+ * {@link PisellFloorMapLayoutProps.floorMapViewportOverlay} 函数形态时的参数
+ */
+export declare type FloorMapViewportOverlayRenderArgs<T extends FloorMapItemBase = FloorMapItemBase> = {
+    items: T[];
+    dataSources: FloorMapDataSources | undefined;
+    currentCanvasId: string | null;
+    mode: 'read' | 'edit';
+};
 /**
  * PisellFloorMapLayout Ref 方法
  * @description 供外部调用缩放、复位、区域定位等
@@ -541,4 +581,6 @@ export interface PisellFloorMapLayoutRef {
     reset: () => void;
     /** 区域定位：使所有 items 落在视口内 */
     fitBounds: () => void;
+    /** 提交当前布局草稿（与顶栏/侧栏「保存」一致） */
+    saveLayout: () => void;
 }

package/lib/components/pisellFloorMapLayout/utils/floorMapDataRecordLabel.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 平面图数据行在下拉选项中的展示文案（侧栏「选择数据行」、工具栏绑定行）
+ * 展示顺序：名称侧（main_field / code / name）→ 可选（status）→ 「 · 」后缀 id、form_code。
+ * form_code 可读 `form_code` 或预约行里的 `area`。
+ */
+export declare function formatDataRecordOptionLabel(record: {
+    id: string;
+    [k: string]: unknown;
+}): string;

package/lib/components/pisellFloorMapLayout/utils/floorMapDataRecordLabel.js

@@ -0,0 +1,44 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellFloorMapLayout/utils/floorMapDataRecordLabel.ts
+var floorMapDataRecordLabel_exports = {};
+__export(floorMapDataRecordLabel_exports, {
+  formatDataRecordOptionLabel: () => formatDataRecordOptionLabel
+});
+module.exports = __toCommonJS(floorMapDataRecordLabel_exports);
+function formatDataRecordOptionLabel(record) {
+  const rawMain = record.main_field != null ? String(record.main_field) : "";
+  const mainField = rawMain ? (rawMain.split(" ## ")[0] ?? rawMain).trim() : "";
+  const code = record.code != null && String(record.code).trim() ? String(record.code).trim() : "";
+  const name = record.name != null ? String(record.name).trim() : "";
+  const status = record.status != null ? String(record.status) : "";
+  const idStr = String(record.id ?? "").trim();
+  const formCodeRaw = record.form_code != null && String(record.form_code).trim() ? String(record.form_code).trim() : record.area != null && String(record.area).trim() ? String(record.area).trim() : "";
+  const primary = mainField || code || name;
+  const tailParts = [idStr, formCodeRaw].filter((s) => s.length > 0);
+  const tail = tailParts.length ? ` · ${tailParts.join(" · ")}` : "";
+  if (primary && status) return `${primary}（${status}）${tail}`;
+  if (primary) return `${primary}${tail}`;
+  if (tailParts.length) return tailParts.join(" · ");
+  return idStr || "—";
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  formatDataRecordOptionLabel
+});

package/lib/components/pisellFloorMapLayout/utils/floorMapDropUtils.d.ts

@@ -7,6 +7,7 @@ export interface FloorMapPaletteDragPayload {
     elementKind: string;
     dataSourceKey?: string;
     recordId?: string;
+    recordIds?: string[];
 }
 /**
  * 与 {@link useFloorMapEditState} 落点一致：内容区 drop 的 offset 减去内容区 padding 偏移

package/lib/components/pisellFloorMapLayout/utils/floorMapDropUtils.js

@@ -47,7 +47,13 @@ function parsePaletteDragPayload(dt) {
     if (typeof elementKind !== "string" || !elementKind) return null;
     const dataSourceKey = typeof rec.dataSourceKey === "string" ? rec.dataSourceKey : void 0;
     const recordId = typeof rec.recordId === "string" ? rec.recordId : void 0;
-    return { elementKind, dataSourceKey, recordId };
+    let recordIds;
+    const rawIds = rec.recordIds;
+    if (Array.isArray(rawIds)) {
+      recordIds = rawIds.filter((x) => typeof x === "string" && x);
+      if (recordIds.length === 0) recordIds = void 0;
+    }
+    return { elementKind, dataSourceKey, recordId, recordIds };
   } catch {
     return null;
   }

package/lib/components/pisellFloorMapLayout/utils/floorMapElementKindUtils.d.ts

@@ -2,9 +2,20 @@
  * 图元种类解析与绑定展示前校验（供合并项渲染、工具栏逻辑复用）
  */
 import type { FloorMapElementKindConfig, FloorMapViewConfig, FloorMapSceneElement, FloorMapDataSources, FloorMapElementDataBindingPolicy } from '../types';
+/** 与 RecordBoard Story 一致：`floorMapImage` */
+export declare function isFloorMapImageElementKind(kind: string | undefined): boolean;
 /** dataBindingPolicy 缺省视为 none */
 export declare function resolveDataBindingPolicy(kind: FloorMapElementKindConfig | undefined): FloorMapElementDataBindingPolicy;
 export declare function getElementKindConfig(config: Pick<FloorMapViewConfig, 'elementKinds'> | undefined, elementKind: string | undefined): FloorMapElementKindConfig | undefined;
+/**
+ * 与调色板分组一致：取与当前图元 **同一 categoryId**（含未填 categoryId 时落到首个分类）下的可切换种类，
+ * 排除舞台、底图。若仅有一种则编辑面板可不展示切换器。
+ */
+export declare function getSwappableElementKindsInSameCategory(config: FloorMapViewConfig, elementKind: string | undefined): FloorMapElementKindConfig[];
+/**
+ * 在右侧编辑面板将图元改为同分类下的另一种 kind 时的草稿 patch（绑定不兼容则清空）
+ */
+export declare function patchSceneElementForKindSwitch(config: FloorMapViewConfig, element: FloorMapSceneElement, nextKindValue: string): Partial<FloorMapSceneElement>;
 /**
  * @returns 人类可读错误文案；无问题时返回 null
  */

package/lib/components/pisellFloorMapLayout/utils/floorMapElementKindUtils.js

@@ -21,9 +21,17 @@ var floorMapElementKindUtils_exports = {};
 __export(floorMapElementKindUtils_exports, {
   getElementKindConfig: () => getElementKindConfig,
   getSceneElementRenderIssue: () => getSceneElementRenderIssue,
+  getSwappableElementKindsInSameCategory: () => getSwappableElementKindsInSameCategory,
+  isFloorMapImageElementKind: () => isFloorMapImageElementKind,
+  patchSceneElementForKindSwitch: () => patchSceneElementForKindSwitch,
   resolveDataBindingPolicy: () => resolveDataBindingPolicy
 });
 module.exports = __toCommonJS(floorMapElementKindUtils_exports);
+var import_types = require("../types");
+var import_floorMapStageDefaults = require("./floorMapStageDefaults");
+function isFloorMapImageElementKind(kind) {
+  return kind === import_types.FLOOR_MAP_IMAGE_ELEMENT_KIND;
+}
 function resolveDataBindingPolicy(kind) {
   return (kind == null ? void 0 : kind.dataBindingPolicy) ?? "none";
 }
@@ -32,6 +40,64 @@ function getElementKindConfig(config, elementKind) {
   if (!elementKind || !((_a = config == null ? void 0 : config.elementKinds) == null ? void 0 : _a.length)) return void 0;
   return config.elementKinds.find((k) => k.value === elementKind);
 }
+function getSwappableElementKindsInSameCategory(config, elementKind) {
+  var _a, _b;
+  if (!elementKind || !((_a = config.elementKinds) == null ? void 0 : _a.length)) return [];
+  const rawCats = config.elementKindCategories ?? [];
+  const sorted = [...rawCats].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  const fallbackId = ((_b = sorted[0]) == null ? void 0 : _b.id) ?? "_uncat";
+  const self = config.elementKinds.find((k) => k.value === elementKind);
+  if (!self) return [];
+  const cid = self.categoryId ?? fallbackId;
+  return config.elementKinds.filter((k) => {
+    if (k.showInPalette === false) return false;
+    if (k.value === import_types.FLOOR_MAP_STAGE_ELEMENT_KIND) return false;
+    if (k.value === import_types.FLOOR_MAP_IMAGE_ELEMENT_KIND) return false;
+    return (k.categoryId ?? fallbackId) === cid;
+  });
+}
+var DEFAULT_PLACE_W = 180;
+var DEFAULT_PLACE_H = 120;
+var IMAGE_PLACE_W = 400;
+var IMAGE_PLACE_H = 240;
+var DECO_SIZE = 48;
+function patchSceneElementForKindSwitch(config, element, nextKindValue) {
+  var _a, _b;
+  const nextCfg = getElementKindConfig(config, nextKindValue);
+  const nextPol = resolveDataBindingPolicy(nextCfg);
+  const binding = element.dataBinding;
+  const isNextImage = isFloorMapImageElementKind(nextKindValue);
+  const isNextStage = nextKindValue === import_types.FLOOR_MAP_STAGE_ELEMENT_KIND;
+  let clearBinding = false;
+  if (nextPol === "none") {
+    clearBinding = true;
+  } else if (binding && ((_a = nextCfg == null ? void 0 : nextCfg.allowedDataSourceKeys) == null ? void 0 : _a.length)) {
+    if (!nextCfg.allowedDataSourceKeys.includes(binding.dataSourceKey)) {
+      clearBinding = true;
+    }
+  }
+  const nextW = isNextImage ? IMAGE_PLACE_W : isNextStage ? import_floorMapStageDefaults.STAGE_DECO_DEFAULT.width : DEFAULT_PLACE_W;
+  const nextH = isNextImage ? IMAGE_PLACE_H : isNextStage ? import_floorMapStageDefaults.STAGE_DECO_DEFAULT.height : DEFAULT_PLACE_H;
+  const useDecoSize = nextPol === "none" && nextKindValue !== import_types.FLOOR_MAP_STAGE_ELEMENT_KIND && !isNextImage;
+  const width = useDecoSize ? Math.max(element.width ?? DECO_SIZE, DECO_SIZE) : Math.max(element.width ?? nextW, nextW);
+  const height = useDecoSize ? Math.max(element.height ?? DECO_SIZE, DECO_SIZE) : Math.max(element.height ?? nextH, nextH);
+  const patch = {
+    elementKind: nextKindValue,
+    shape: isNextStage || isNextImage ? "rect" : nextCfg == null ? void 0 : nextCfg.defaultShape,
+    width,
+    height,
+    name: ((_b = nextCfg == null ? void 0 : nextCfg.defaultPresentation) == null ? void 0 : _b.title) != null && String(nextCfg.defaultPresentation.title).trim() !== "" ? String(nextCfg.defaultPresentation.title) : element.name
+  };
+  if (clearBinding) {
+    patch.dataBinding = void 0;
+  }
+  if (isNextImage) {
+    patch.imageUrl = element.imageUrl ?? "";
+  } else {
+    patch.imageUrl = void 0;
+  }
+  return patch;
+}
 function getSceneElementRenderIssue(element, kind, dataSources) {
   const policy = resolveDataBindingPolicy(kind);
   const binding = element.dataBinding;
@@ -66,5 +132,8 @@ function getSceneElementRenderIssue(element, kind, dataSources) {
 0 && (module.exports = {
   getElementKindConfig,
   getSceneElementRenderIssue,
+  getSwappableElementKindsInSameCategory,
+  isFloorMapImageElementKind,
+  patchSceneElementForKindSwitch,
   resolveDataBindingPolicy
 });

package/lib/components/pisellFloorMapLayout/utils/floorMapFallbackRender.js

@@ -35,6 +35,7 @@ __export(floorMapFallbackRender_exports, {
 module.exports = __toCommonJS(floorMapFallbackRender_exports);
 var import_react = __toESM(require("react"));
 var import_types = require("../types");
+var import_floorMapElementKindUtils = require("./floorMapElementKindUtils");
 var import_FloorMapImageElement = require("../components/FloorMapImageElement");
 var import_floorMapStageDefaults = require("./floorMapStageDefaults");
 function renderFloorMapRenderError(message) {
@@ -67,7 +68,7 @@ function renderFloorMapFallbackPlaceholder(item) {
   const isStage = kind === import_types.FLOOR_MAP_STAGE_ELEMENT_KIND;
   const nameText = (item == null ? void 0 : item.name) != null ? String(item.name).trim() : "";
   const fallbackLabel = nameText || kind;
-  if (kind === import_types.FLOOR_MAP_IMAGE_ELEMENT_KIND) {
+  if ((0, import_floorMapElementKindUtils.isFloorMapImageElementKind)(kind)) {
     const url = (_a = item._sceneElement) == null ? void 0 : _a.imageUrl;
     return /* @__PURE__ */ import_react.default.createElement(
       import_FloorMapImageElement.FloorMapImageElement,

package/lib/components/pisellGridPro/GridPro.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './index.less';
+export interface GridProProps {
+    className?: string;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+}
+declare const PisellGridPro: (props: GridProProps) => JSX.Element;
+export default PisellGridPro;

package/lib/components/pisellGridPro/GridView/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import './index.less';
+import { GridViewProps } from './type';
+export type { GridViewProps };
+declare const GridView: (props: GridViewProps) => JSX.Element;
+export default GridView;

package/lib/components/pisellGridPro/GridView/type.d.ts

@@ -0,0 +1,3 @@
+import { PisellScrollViewProps } from '../../PisellScrollView/types';
+export interface GridViewProps extends PisellScrollViewProps {
+}

package/lib/components/pisellGridPro/ToolBar/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import './index.less';
+import { ToolBarProps } from './type';
+export type { ToolBarProps };
+declare const Toolbar: React.FC<ToolBarProps>;
+export default Toolbar;

package/lib/components/pisellGridPro/ToolBar/type.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface ToolBarProps {
+    className?: string;
+    style?: React.CSSProperties;
+    tabs?: React.ReactNode;
+    topLeft?: React.ReactNode;
+    topRight?: React.ReactNode;
+    bottomLeft?: React.ReactNode;
+    bottomRight?: React.ReactNode;
+}