@pisell/materials 1.8.20 → 1.8.22

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

@@ -13,7 +13,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 /**
  * 视口 / 地图区尺寸、内容区宽高与偏移、缩放与全屏、fitBounds、拖拽图元后恢复 transform
  */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { getContentSize, getPixelBoundingBox } from "../utils/layoutMeasurements";
 
 /** 平面图包围盒单侧默认外扩（像素）；过大会导致首屏大量空白 */
@@ -89,6 +89,9 @@ export function useFloorMapTransformMetrics(params) {
       return ro.disconnect();
     };
   }, []);
+
+  /** 默认开启：有空图元时首屏 fit 全图；仅 `autoFitOnMount: false` 关闭 */
+  var autoFitOnMount = zoom.autoFitOnMount !== false;
   var zoomConfig = useMemo(function () {
     var _zoom$defaultScale, _zoom$min, _zoom$max, _zoom$step;
     return {
@@ -172,6 +175,10 @@ export function useFloorMapTransformMetrics(params) {
         done: false
       };
     }
+    if (autoFitOnMount) {
+      initialAlignRef.current.done = true;
+      return;
+    }
     if (alignPadSingle == null) {
       initialAlignRef.current.done = false;
       return;
@@ -194,7 +201,7 @@ export function useFloorMapTransformMetrics(params) {
       cancelled = true;
       cancelAnimationFrame(raf);
     };
-  }, [isFloorMapView, frameResetKey, alignPadSingle, initialPositionX, initialPositionY, zoomConfig.initialScale, transformRef]);
+  }, [isFloorMapView, frameResetKey, alignPadSingle, initialPositionX, initialPositionY, zoomConfig.initialScale, transformRef, autoFitOnMount]);
   useEffect(function () {
     var el = containerRef.current;
     if (!el) return;
@@ -217,20 +224,131 @@ export function useFloorMapTransformMetrics(params) {
       (_el$requestFullscreen = el.requestFullscreen) === null || _el$requestFullscreen === void 0 || _el$requestFullscreen.call(el);
     }
   }, []);
+
+  /** @returns 是否已调用 setTransform（用于首屏 autoFit：避免空跑仍标记 done） */
   var fitBounds = useCallback(function () {
-    var _zoom$max2;
+    var _zoom$max3;
     var ctx = transformRef.current;
     var container = containerRef.current;
-    if (!ctx || !container) return;
+    if (!ctx || !container) return false;
     var wrapper = container.querySelector('.react-transform-wrapper');
-    if (!wrapper) return;
+    if (!wrapper) return false;
     var wrapperRect = wrapper.getBoundingClientRect();
-    var nextScale = Math.min(wrapperRect.width / contentWidth, wrapperRect.height / contentHeight, (_zoom$max2 = zoom.max) !== null && _zoom$max2 !== void 0 ? _zoom$max2 : 2);
+    if (wrapperRect.width <= 0 || wrapperRect.height <= 0) return false;
+
+    /**
+     * 平面图像素模式：按「图元轴对齐包围盒」缩放并居中，不按整块 content（含编辑态撑满视口的空白）适配。
+     * 画布 DOM 尺寸与网格空白不变，仅改变视口 transform；视口边可贴边（edgePx=0）。
+     */
+    var pixelBox = isFloorMapView && effectiveItemUnit === 'pixel' && items.length > 0 ? getPixelBoundingBox(items, cellSize) : null;
+    if (pixelBox) {
+      var _zoom$max2;
+      var bw = Math.max(1, pixelBox.maxRight - pixelBox.minLeft);
+      var bh = Math.max(1, pixelBox.maxBottom - pixelBox.minTop);
+      var edgePx = 0;
+      var availW = Math.max(1, wrapperRect.width - 2 * edgePx);
+      var availH = Math.max(1, wrapperRect.height - 2 * edgePx);
+      var _raw = Math.min(availW / bw, availH / bh);
+      var _nextScale = Math.min(_raw, (_zoom$max2 = zoom.max) !== null && _zoom$max2 !== void 0 ? _zoom$max2 : 2);
+      var ap = alignPadSingle !== null && alignPadSingle !== void 0 ? alignPadSingle : padSingle;
+      var bboxCx = ap + bw / 2;
+      var bboxCy = ap + bh / 2;
+      var _x = wrapperRect.width / 2 - bboxCx * _nextScale;
+      var _y = wrapperRect.height / 2 - bboxCy * _nextScale;
+      ctx.setTransform(_x, _y, _nextScale);
+      return true;
+    }
+    if (contentWidth <= 0 || contentHeight <= 0) return false;
+    /** 非平面图或无图元：仍按整块 content 适配 */
+    var raw = Math.min(wrapperRect.width / contentWidth, wrapperRect.height / contentHeight);
+    var nextScale = Math.min(raw, (_zoom$max3 = zoom.max) !== null && _zoom$max3 !== void 0 ? _zoom$max3 : 2);
     var padA = alignPadSingle !== null && alignPadSingle !== void 0 ? alignPadSingle : 0;
     var x = VIEWPORT_TOP_LEFT_MARGIN - padA * nextScale;
     var 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]);
+
+  /**
+   * autoFitOnMount：每个画布在「有图元且 content 尺寸已按包围盒算好」后执行一次 fitBounds。
+   * 避免首帧 items 仍为空时用占位尺寸 fit 完并标记 done，导致异步图元加载后不再适配。
+   */
+  var autoFitOnceRef = useRef({
+    frame: '',
+    done: false
+  });
+  var prevItemsCountForAutoFitRef = useRef(null);
+  /**
+   * 首屏 auto fit：时序上易出现「Transform 未挂载 / wrapper 尺寸为 0 / 内容区尚未提交」，
+   * 用 layoutEffect + 双 rAF 贴近浏览器布局完成时刻；仅 fitBounds 真正 setTransform 后才记 done；
+   * viewportSize 纳入依赖以便父级 flex 迟到的尺寸更新后重试（超次不伪造 done）。
+   */
+  useLayoutEffect(function () {
+    if (!isFloorMapView || !autoFitOnMount || frameResetKey === undefined) return;
+    var frame = String(frameResetKey);
+    if (autoFitOnceRef.current.frame !== frame) {
+      autoFitOnceRef.current = {
+        frame: frame,
+        done: false
+      };
+      prevItemsCountForAutoFitRef.current = null;
+    }
+    var itemCount = items.length;
+    var 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;
+    var cancelled = false;
+    var raf = 0;
+    var attempts = 0;
+    var MAX_AUTO_FIT_ATTEMPTS = 160;
+    var tick = function tick() {
+      if (cancelled) return;
+      if (attempts >= MAX_AUTO_FIT_ATTEMPTS) return;
+      var ctx = transformRef.current;
+      var container = containerRef.current;
+      var wrapper = container === null || container === void 0 ? void 0 : container.querySelector('.react-transform-wrapper');
+      if (!ctx || !wrapper) {
+        attempts += 1;
+        raf = requestAnimationFrame(tick);
+        return;
+      }
+      var rect = wrapper.getBoundingClientRect();
+      if (rect.width <= 0 || rect.height <= 0) {
+        attempts += 1;
+        raf = requestAnimationFrame(tick);
+        return;
+      }
+
+      /** 再等两帧：react-zoom-pan-pinch 与 TransformComponent 常在本帧之后才把可测布局写稳 */
+      raf = requestAnimationFrame(function () {
+        if (cancelled) return;
+        raf = requestAnimationFrame(function () {
+          if (cancelled) return;
+          var ok = fitBounds();
+          if (ok) {
+            autoFitOnceRef.current.done = true;
+            return;
+          }
+          attempts += 1;
+          if (attempts < MAX_AUTO_FIT_ATTEMPTS) {
+            raf = requestAnimationFrame(tick);
+          }
+        });
+      });
+    };
+    raf = requestAnimationFrame(tick);
+    return function () {
+      cancelled = true;
+      cancelAnimationFrame(raf);
+    };
+  }, [isFloorMapView, autoFitOnMount, frameResetKey, effectiveItemUnit, items.length, contentWidth, contentHeight, viewportSize.width, viewportSize.height, mapAreaSize.width, mapAreaSize.height, fitBounds, transformRef]);
   var lastTransformRef = useRef({
     x: 0,
     y: 0,

package/es/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/es/components/pisellFloorMapLayout/index.js

@@ -4,6 +4,8 @@
  */
 export { PisellFloorMapLayout } from "./PisellFloorMapLayout";
 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 { mergeFloorMapLayoutPropsFromContext } from "./context/mergeFloorMapLayoutContext";
 export { FloorMapImageElement } from "./components/FloorMapImageElement";

package/es/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/es/components/pisellFloorMapLayout/locales.js

@@ -29,7 +29,7 @@ export 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',
@@ -46,6 +46,8 @@ export 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.',
@@ -89,7 +91,7 @@ export 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': '锁定后画布不可拖拽与改尺寸',
@@ -106,6 +108,8 @@ export 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': '修改数据源或绑定行会立即写入布局草稿；持久化请点击顶部「保存」。',
@@ -149,7 +153,7 @@ export 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': '鎖定後畫布不可拖曳與改尺寸',
@@ -166,6 +170,8 @@ export 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/es/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/es/components/pisellFloorMapLayout/types.js

@@ -142,6 +142,10 @@ export var FLOOR_MAP_IMAGE_ELEMENT_KIND = 'floorMapImage';
  * @template T - 资源项类型，需继承 FloorMapItemBase 或兼容 id/x/y
  */
 
+/**
+ * {@link PisellFloorMapLayoutProps.floorMapViewportOverlay} 函数形态时的参数
+ */
+
 /**
  * PisellFloorMapLayout Ref 方法
  * @description 供外部调用缩放、复位、区域定位等

package/es/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/es/components/pisellFloorMapLayout/utils/floorMapDataRecordLabel.js

@@ -0,0 +1,24 @@
+/**
+ * 平面图数据行在下拉选项中的展示文案（侧栏「选择数据行」、工具栏绑定行）
+ * 展示顺序：名称侧（main_field / code / name）→ 可选（status）→ 「 · 」后缀 id、form_code。
+ * form_code 可读 `form_code` 或预约行里的 `area`。
+ */
+export function formatDataRecordOptionLabel(record) {
+  var _rawMain$split$, _record$id;
+  var rawMain = record.main_field != null ? String(record.main_field) : '';
+  var mainField = rawMain ? ((_rawMain$split$ = rawMain.split(' ## ')[0]) !== null && _rawMain$split$ !== void 0 ? _rawMain$split$ : rawMain).trim() : '';
+  var code = record.code != null && String(record.code).trim() ? String(record.code).trim() : '';
+  var name = record.name != null ? String(record.name).trim() : '';
+  var status = record.status != null ? String(record.status) : '';
+  var idStr = String((_record$id = record.id) !== null && _record$id !== void 0 ? _record$id : '').trim();
+  var 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() : '';
+  var primary = mainField || code || name;
+  var tailParts = [idStr, formCodeRaw].filter(function (s) {
+    return s.length > 0;
+  });
+  var tail = tailParts.length ? " \xB7 ".concat(tailParts.join(' · ')) : '';
+  if (primary && status) return "".concat(primary, "\uFF08").concat(status, "\uFF09").concat(tail);
+  if (primary) return "".concat(primary).concat(tail);
+  if (tailParts.length) return tailParts.join(' · ');
+  return idStr || '—';
+}

package/es/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/es/components/pisellFloorMapLayout/utils/floorMapDropUtils.js

@@ -36,10 +36,19 @@ export function parsePaletteDragPayload(dt) {
     if (typeof elementKind !== 'string' || !elementKind) return null;
     var dataSourceKey = typeof rec.dataSourceKey === 'string' ? rec.dataSourceKey : undefined;
     var recordId = typeof rec.recordId === 'string' ? rec.recordId : undefined;
+    var recordIds;
+    var rawIds = rec.recordIds;
+    if (Array.isArray(rawIds)) {
+      recordIds = rawIds.filter(function (x) {
+        return typeof x === 'string' && x;
+      });
+      if (recordIds.length === 0) recordIds = undefined;
+    }
     return {
       elementKind: elementKind,
       dataSourceKey: dataSourceKey,
-      recordId: recordId
+      recordId: recordId,
+      recordIds: recordIds
     };
   } catch (_unused) {
     return null;

package/es/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/es/components/pisellFloorMapLayout/utils/floorMapElementKindUtils.js

@@ -1,10 +1,22 @@
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 /**
  * 图元种类解析与绑定展示前校验（供合并项渲染、工具栏逻辑复用）
  */
 
+import { FLOOR_MAP_IMAGE_ELEMENT_KIND, FLOOR_MAP_STAGE_ELEMENT_KIND } from "../types";
+import { STAGE_DECO_DEFAULT } from "./floorMapStageDefaults";
+
+/** 与 RecordBoard Story 一致：`floorMapImage` */
+export function isFloorMapImageElementKind(kind) {
+  return kind === FLOOR_MAP_IMAGE_ELEMENT_KIND;
+}
+
 /** dataBindingPolicy 缺省视为 none */
 export function resolveDataBindingPolicy(kind) {
   var _kind$dataBindingPoli;
@@ -18,6 +30,80 @@ export function getElementKindConfig(config, elementKind) {
   });
 }
 
+/**
+ * 与调色板分组一致：取与当前图元 **同一 categoryId**（含未填 categoryId 时落到首个分类）下的可切换种类，
+ * 排除舞台、底图。若仅有一种则编辑面板可不展示切换器。
+ */
+export function getSwappableElementKindsInSameCategory(config, elementKind) {
+  var _config$elementKinds2, _config$elementKindCa, _sorted$0$id, _sorted$, _self$categoryId;
+  if (!elementKind || !((_config$elementKinds2 = config.elementKinds) !== null && _config$elementKinds2 !== void 0 && _config$elementKinds2.length)) return [];
+  var rawCats = (_config$elementKindCa = config.elementKindCategories) !== null && _config$elementKindCa !== void 0 ? _config$elementKindCa : [];
+  var sorted = _toConsumableArray(rawCats).sort(function (a, b) {
+    var _a$order, _b$order;
+    return ((_a$order = a.order) !== null && _a$order !== void 0 ? _a$order : 0) - ((_b$order = b.order) !== null && _b$order !== void 0 ? _b$order : 0);
+  });
+  var fallbackId = (_sorted$0$id = (_sorted$ = sorted[0]) === null || _sorted$ === void 0 ? void 0 : _sorted$.id) !== null && _sorted$0$id !== void 0 ? _sorted$0$id : '_uncat';
+  var self = config.elementKinds.find(function (k) {
+    return k.value === elementKind;
+  });
+  if (!self) return [];
+  var cid = (_self$categoryId = self.categoryId) !== null && _self$categoryId !== void 0 ? _self$categoryId : fallbackId;
+  return config.elementKinds.filter(function (k) {
+    var _k$categoryId;
+    if (k.showInPalette === false) return false;
+    if (k.value === FLOOR_MAP_STAGE_ELEMENT_KIND) return false;
+    if (k.value === FLOOR_MAP_IMAGE_ELEMENT_KIND) return false;
+    return ((_k$categoryId = k.categoryId) !== null && _k$categoryId !== void 0 ? _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;
+
+/**
+ * 在右侧编辑面板将图元改为同分类下的另一种 kind 时的草稿 patch（绑定不兼容则清空）
+ */
+export function patchSceneElementForKindSwitch(config, element, nextKindValue) {
+  var _nextCfg$allowedDataS, _element$width, _element$width2, _element$height, _element$height2, _nextCfg$defaultPrese;
+  var nextCfg = getElementKindConfig(config, nextKindValue);
+  var nextPol = resolveDataBindingPolicy(nextCfg);
+  var binding = element.dataBinding;
+  var isNextImage = isFloorMapImageElementKind(nextKindValue);
+  var isNextStage = nextKindValue === FLOOR_MAP_STAGE_ELEMENT_KIND;
+  var clearBinding = false;
+  if (nextPol === 'none') {
+    clearBinding = true;
+  } else if (binding && nextCfg !== null && nextCfg !== void 0 && (_nextCfg$allowedDataS = nextCfg.allowedDataSourceKeys) !== null && _nextCfg$allowedDataS !== void 0 && _nextCfg$allowedDataS.length) {
+    if (!nextCfg.allowedDataSourceKeys.includes(binding.dataSourceKey)) {
+      clearBinding = true;
+    }
+  }
+  var nextW = isNextImage ? IMAGE_PLACE_W : isNextStage ? STAGE_DECO_DEFAULT.width : DEFAULT_PLACE_W;
+  var nextH = isNextImage ? IMAGE_PLACE_H : isNextStage ? STAGE_DECO_DEFAULT.height : DEFAULT_PLACE_H;
+  var useDecoSize = nextPol === 'none' && nextKindValue !== FLOOR_MAP_STAGE_ELEMENT_KIND && !isNextImage;
+  var width = useDecoSize ? Math.max((_element$width = element.width) !== null && _element$width !== void 0 ? _element$width : DECO_SIZE, DECO_SIZE) : Math.max((_element$width2 = element.width) !== null && _element$width2 !== void 0 ? _element$width2 : nextW, nextW);
+  var height = useDecoSize ? Math.max((_element$height = element.height) !== null && _element$height !== void 0 ? _element$height : DECO_SIZE, DECO_SIZE) : Math.max((_element$height2 = element.height) !== null && _element$height2 !== void 0 ? _element$height2 : nextH, nextH);
+  var patch = {
+    elementKind: nextKindValue,
+    shape: isNextStage || isNextImage ? 'rect' : nextCfg === null || nextCfg === void 0 ? void 0 : nextCfg.defaultShape,
+    width: width,
+    height: height,
+    name: (nextCfg === null || nextCfg === void 0 || (_nextCfg$defaultPrese = nextCfg.defaultPresentation) === null || _nextCfg$defaultPrese === void 0 ? void 0 : _nextCfg$defaultPrese.title) != null && String(nextCfg.defaultPresentation.title).trim() !== '' ? String(nextCfg.defaultPresentation.title) : element.name
+  };
+  if (clearBinding) {
+    patch.dataBinding = undefined;
+  }
+  if (isNextImage) {
+    var _element$imageUrl;
+    patch.imageUrl = (_element$imageUrl = element.imageUrl) !== null && _element$imageUrl !== void 0 ? _element$imageUrl : '';
+  } else {
+    patch.imageUrl = undefined;
+  }
+  return patch;
+}
+
 /**
  * @returns 人类可读错误文案；无问题时返回 null
  */

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

@@ -2,7 +2,8 @@
  * 无 renderItemByKind 时的占位渲染（装饰、舞台等），避免画布上不显示
  */
 import React from 'react';
-import { FLOOR_MAP_IMAGE_ELEMENT_KIND, FLOOR_MAP_STAGE_ELEMENT_KIND } from "../types";
+import { FLOOR_MAP_STAGE_ELEMENT_KIND } from "../types";
+import { isFloorMapImageElementKind } from "./floorMapElementKindUtils";
 import { FloorMapImageElement } from "../components/FloorMapImageElement";
 import { STAGE_DECO_DEFAULT } from "./floorMapStageDefaults";
 
@@ -35,7 +36,7 @@ export function renderFloorMapFallbackPlaceholder(item) {
   var isStage = kind === FLOOR_MAP_STAGE_ELEMENT_KIND;
   var nameText = (item === null || item === void 0 ? void 0 : item.name) != null ? String(item.name).trim() : '';
   var fallbackLabel = nameText || kind;
-  if (kind === FLOOR_MAP_IMAGE_ELEMENT_KIND) {
+  if (isFloorMapImageElementKind(kind)) {
     var _item$_sceneElement, _item$name, _item$_sceneElement2;
     var url = (_item$_sceneElement = item._sceneElement) === null || _item$_sceneElement === void 0 ? void 0 : _item$_sceneElement.imageUrl;
     return /*#__PURE__*/React.createElement(FloorMapImageElement, {

package/es/components/pisellGoodPassCard/index.d.ts

@@ -46,5 +46,5 @@ export interface PisellGoodPassCardProps {
     mixedSort?: (val: Discount[]) => Discount[];
     isInModal: boolean;
 }
-declare const index: (props: PisellGoodPassCardProps) => JSX.Element;
+declare const index: (props: PisellGoodPassCardProps) => React.JSX.Element;
 export default index;

package/es/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) => React.JSX.Element;
+export default PisellGridPro;

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

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

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

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

package/es/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;