@pisell/materials 1.8.20 → 1.8.22

package/lib/components/pisellFloorMapLayout/PisellFloorMapLayout.js

@@ -35,6 +35,7 @@ __export(PisellFloorMapLayout_exports, {
 module.exports = __toCommonJS(PisellFloorMapLayout_exports);
 var import_react = __toESM(require("react"));
 var import_classnames = __toESM(require("classnames"));
+var import_icons = require("@ant-design/icons");
 var import_react_zoom_pan_pinch = require("react-zoom-pan-pinch");
 var import_MapLayer = __toESM(require("./components/MapLayer"));
 var import_ItemLayer = __toESM(require("./components/ItemLayer"));
@@ -93,7 +94,10 @@ function PisellFloorMapLayoutInner(props, ref) {
     saveError,
     onElementRenderError,
     toolbarShowSave = true,
-    floorMapFullscreenMode
+    floorMapFullscreenMode,
+    showDataSourceRecordFormBlock,
+    floorMapViewportOverlay,
+    canvasTabsBarTrailing
   } = p;
   const isFloorMapView = Boolean(floorMapConfigProp);
   const contentOffsetRef = (0, import_react.useRef)({ x: 0, y: 0 });
@@ -111,7 +115,8 @@ function PisellFloorMapLayoutInner(props, ref) {
     dataSourceRecordForm,
     dataSourceLabels,
     layoutPrefix: PREFIX,
-    contentOffsetRef
+    contentOffsetRef,
+    showDataSourceRecordFormBlock
   });
   const {
     config,
@@ -133,28 +138,69 @@ function PisellFloorMapLayoutInner(props, ref) {
     placeSceneElementFromPaletteDrop,
     editPanelParams,
     placeOverlayClass,
-    isLayoutDirty
+    isLayoutDirty,
+    toggleDraftCanvasShowGrid
   } = edit;
+  const effectiveMapLayer = (0, import_react.useMemo)(() => {
+    if (!isFloorMapView || !config || !currentCanvasId) {
+      return mapLayer;
+    }
+    const canvas = config.canvases.find((c) => c.id === currentCanvasId);
+    return { ...mapLayer ?? {}, ...(canvas == null ? void 0 : canvas.mapLayer) ?? {} };
+  }, [isFloorMapView, config, currentCanvasId, mapLayer]);
+  const transformWrapperKey = (0, import_react.useMemo)(() => {
+    if (!isFloorMapView) return "fmap-layout";
+    const bp = (effectiveMapLayer == null ? void 0 : effectiveMapLayer.boundingPadding) ?? "d";
+    const z = zoom.defaultScale ?? 1;
+    return `fmap-${currentCanvasId ?? "na"}-bp${bp}-z${z}`;
+  }, [
+    isFloorMapView,
+    currentCanvasId,
+    effectiveMapLayer == null ? void 0 : effectiveMapLayer.boundingPadding,
+    zoom.defaultScale
+  ]);
   const canvasesForTabs = (0, import_react.useMemo)(
     () => config ? (0, import_mergeCanvasesForTabs.mergeCanvasesForTabs)(config) : [],
     [config]
   );
   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";
+  const hasCanvasTabsBarTrailing = canvasTabsBarTrailing != null && canvasTabsBarTrailing !== false;
   const showReadModeCanvasTabsBar = (0, import_react.useMemo)(() => {
     if (!isFloorMapView || mode !== "read" || !config) return false;
+    if (hasCanvasTabsBarTrailing) return true;
     return canvasesForTabs.filter((c) => c.enabled).length > 1;
-  }, [isFloorMapView, mode, config, canvasesForTabs]);
+  }, [isFloorMapView, mode, config, canvasesForTabs, hasCanvasTabsBarTrailing]);
   const readCanvasTabsAriaLabel = (0, import_react.useMemo)(() => {
     (0, import_floorMapCanvasDisplay.initFloorMapLayoutLocales)(engineLocale);
     return import_utils.locales.getText("pisell-floor-map-layout.read-canvas-tabs.aria");
   }, [engineLocale]);
+  const readCanvasTabsFsLabels = (0, import_react.useMemo)(() => {
+    (0, import_floorMapCanvasDisplay.initFloorMapLayoutLocales)(engineLocale);
+    return {
+      fsEnterAria: import_utils.locales.getText(
+        "pisell-floor-map-layout.edit-top-bar.fullscreen-enter-aria"
+      ),
+      fsEnterTitle: import_utils.locales.getText(
+        "pisell-floor-map-layout.edit-top-bar.fullscreen-enter-title"
+      ),
+      fsExitAria: import_utils.locales.getText(
+        "pisell-floor-map-layout.edit-top-bar.fullscreen-exit-aria"
+      ),
+      fsExitTitle: import_utils.locales.getText(
+        "pisell-floor-map-layout.edit-top-bar.fullscreen-exit-title"
+      )
+    };
+  }, [engineLocale]);
   const loadingLabel = (0, import_react.useMemo)(() => {
     (0, import_floorMapCanvasDisplay.initFloorMapLayoutLocales)(engineLocale);
     return import_utils.locales.getText("pisell-floor-map-layout.loading");
   }, [engineLocale]);
   const cellSize = cellSizeProp ?? import_layoutMeasurements.DEFAULT_CELL_SIZE;
-  const itemGap = (0, import_react.useMemo)(() => (0, import_layoutMeasurements.gapToPx)(mapLayer == null ? void 0 : mapLayer.gap), [mapLayer == null ? void 0 : mapLayer.gap]);
+  const itemGap = (0, import_react.useMemo)(
+    () => (0, import_layoutMeasurements.gapToPx)(effectiveMapLayer == null ? void 0 : effectiveMapLayer.gap),
+    [effectiveMapLayer == null ? void 0 : effectiveMapLayer.gap]
+  );
   const effectiveItemUnit = isFloorMapView ? "pixel" : itemUnit;
   const metrics = (0, import_useFloorMapTransformMetrics.useFloorMapTransformMetrics)({
     items,
@@ -166,8 +212,8 @@ function PisellFloorMapLayoutInner(props, ref) {
     zoom,
     transformRef,
     contentOffsetRef,
-    boundingPadding: mapLayer == null ? void 0 : mapLayer.boundingPadding,
-    frameResetKey: isFloorMapView ? currentCanvasId ?? "" : void 0
+    boundingPadding: effectiveMapLayer == null ? void 0 : effectiveMapLayer.boundingPadding,
+    frameResetKey: isFloorMapView ? transformWrapperKey : void 0
   });
   const {
     containerRef,
@@ -192,32 +238,15 @@ function PisellFloorMapLayoutInner(props, ref) {
   const fsMode = floorMapFullscreenMode ?? "toggle";
   const useFullTopChrome = isFloorMapView && mode === "edit" && (fsMode === "locked" || fsMode === "toggle" && isFullscreen);
   const editToggleFullscreen = fsMode === "toggle" ? toggleFullscreen : void 0;
+  const readToggleFullscreen = isFloorMapView && mode === "read" && fsMode === "toggle" ? toggleFullscreen : void 0;
   const viewControlsConfig = (0, import_react.useMemo)(() => {
     if (!isFloorMapView || mode !== "edit") return controls;
     return {
       ...controls,
-      showFullscreen: false,
-      showFitBounds: false
+      showFullscreen: false
     };
   }, [isFloorMapView, mode, controls]);
-  const topBarExtraActions = (0, import_react.useMemo)(() => {
-    if (!isFloorMapView || mode !== "edit") return null;
-    if (controls.showFitBounds !== true) return null;
-    return /* @__PURE__ */ import_react.default.createElement(
-      "button",
-      {
-        type: "button",
-        className: (0, import_classnames.default)(
-          `${PREFIX}-edit-top-bar-btn`,
-          `${PREFIX}-edit-top-bar-btn-ghost`
-        ),
-        onClick: () => fitBounds(),
-        "aria-label": "区域定位",
-        title: "区域定位"
-      },
-      "⊞"
-    );
-  }, [isFloorMapView, mode, controls.showFitBounds, fitBounds]);
+  const topBarExtraActions = null;
   const [mapPaletteDragActive, setMapPaletteDragActive] = (0, import_react.useState)(false);
   (0, import_react.useEffect)(() => {
     const clear = () => setMapPaletteDragActive(false);
@@ -241,7 +270,8 @@ function PisellFloorMapLayoutInner(props, ref) {
         type: "scene",
         elementKind: payload.elementKind,
         dataSourceKey: payload.dataSourceKey,
-        recordId: payload.recordId
+        recordId: payload.recordId,
+        recordIds: payload.recordIds
       });
     },
     [isFloorMapView, mode, placeSceneElementFromPaletteDrop]
@@ -253,7 +283,8 @@ function PisellFloorMapLayoutInner(props, ref) {
         type: "scene",
         elementKind: payload.elementKind,
         dataSourceKey: payload.dataSourceKey,
-        recordId: payload.recordId
+        recordId: payload.recordId,
+        recordIds: payload.recordIds
       });
     },
     [isFloorMapView, mode, placeSceneElementFromPaletteDrop]
@@ -336,9 +367,10 @@ function PisellFloorMapLayoutInner(props, ref) {
         var _a2;
         return (_a2 = transformRef.current) == null ? void 0 : _a2.resetTransform();
       },
-      fitBounds
+      fitBounds,
+      saveLayout: () => handleSave()
     }),
-    [fitBounds]
+    [fitBounds, handleSave]
   );
   const showSidebar = isFloorMapView && mode === "edit" && config && dataSources;
   return /* @__PURE__ */ import_react.default.createElement(
@@ -373,7 +405,8 @@ function PisellFloorMapLayoutInner(props, ref) {
         onRenameCanvas: handleRenameCanvas,
         toggleFullscreen: editToggleFullscreen,
         isFullscreen: false,
-        controls
+        controls,
+        canvasTabsBarTrailing
       }
     ),
     isFloorMapView && mode === "edit" && config && useFullTopChrome && /* @__PURE__ */ import_react.default.createElement(
@@ -398,7 +431,8 @@ function PisellFloorMapLayoutInner(props, ref) {
         toggleFullscreen: editToggleFullscreen,
         isFullscreen,
         controls,
-        extraActions: topBarExtraActions
+        extraActions: topBarExtraActions,
+        canvasTabsBarTrailing
       }
     ),
     showReadModeCanvasTabsBar && /* @__PURE__ */ import_react.default.createElement(
@@ -420,7 +454,21 @@ function PisellFloorMapLayoutInner(props, ref) {
           canEdit: false,
           className: `${PREFIX}-edit-top-bar-canvas-tabs`
         }
-      ))
+      )),
+      hasCanvasTabsBarTrailing || readToggleFullscreen ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-top-bar-actions` }, canvasTabsBarTrailing, readToggleFullscreen ? /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          className: (0, import_classnames.default)(
+            `${PREFIX}-edit-top-bar-btn`,
+            `${PREFIX}-edit-top-bar-btn-ghost`
+          ),
+          onClick: () => readToggleFullscreen(),
+          "aria-label": isFullscreen ? readCanvasTabsFsLabels.fsExitAria : readCanvasTabsFsLabels.fsEnterAria,
+          title: isFullscreen ? readCanvasTabsFsLabels.fsExitTitle : readCanvasTabsFsLabels.fsEnterTitle
+        },
+        isFullscreen ? /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenExitOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenOutlined, null)
+      ) : null) : null
     ),
     loading && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-loading` }, /* @__PURE__ */ import_react.default.createElement("span", null, loadingLabel)),
     saveError && !(isFloorMapView && mode === "edit" && config) && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-save-error` }, typeof saveError === "string" ? saveError : saveError == null ? void 0 : saveError.message),
@@ -443,7 +491,7 @@ function PisellFloorMapLayoutInner(props, ref) {
           renderPreviewItem: (item) => effectiveRenderItem(item, 0),
           placementPreviewSize: { width: 180, height: 120 },
           decorationPreviewSize: 48,
-          onSave: !useFullTopChrome && toolbarShowSave !== false && onSave && config.canvasUi.canEdit ? handleSave : void 0,
+          onSave: onSave && config.canvasUi.canEdit && (!useFullTopChrome && toolbarShowSave !== false || useFullTopChrome && isFullscreen) ? handleSave : void 0,
           saving,
           saveError,
           layoutDirty: isLayoutDirty,
@@ -487,7 +535,7 @@ function PisellFloorMapLayoutInner(props, ref) {
         /* @__PURE__ */ import_react.default.createElement(
           import_react_zoom_pan_pinch.TransformWrapper,
           {
-            key: isFloorMapView ? `fmap-${currentCanvasId ?? "na"}-bp${(mapLayer == null ? void 0 : mapLayer.boundingPadding) ?? "d"}-z${zoomConfig.initialScale}` : "fmap-layout",
+            key: transformWrapperKey,
             centerOnInit: false,
             initialScale: zoomConfig.initialScale,
             initialPositionX,
@@ -527,18 +575,13 @@ function PisellFloorMapLayoutInner(props, ref) {
                   minHeight: contentHeight,
                   position: "relative",
                   overflow: "visible",
-                  backgroundColor: "#F2F4F7",
-                  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)"
-                  ].join(", "),
-                  backgroundSize: "50px 50px"
+                  backgroundColor: "#F2F4F7"
                 }
               },
               /* @__PURE__ */ import_react.default.createElement(
                 import_MapLayer.default,
                 {
-                  config: mapLayer,
+                  config: effectiveMapLayer,
                   contentWidth,
                   contentHeight,
                   cellSize,
@@ -562,7 +605,7 @@ function PisellFloorMapLayoutInner(props, ref) {
                   selectedId,
                   onSelect: setSelectedId,
                   onUpdateItem: handleUpdateItem,
-                  snapStep: (mapLayer == null ? void 0 : mapLayer.snapStep) ?? 0,
+                  snapStep: (effectiveMapLayer == null ? void 0 : effectiveMapLayer.snapStep) ?? 0,
                   scale,
                   onInteractionChange: setIsInteractingWithElement,
                   getMergedItemWrapperStyle
@@ -617,9 +660,16 @@ function PisellFloorMapLayoutInner(props, ref) {
                 scale,
                 isFullscreen,
                 fitBounds,
-                toggleFullscreen: editToggleFullscreen
+                toggleFullscreen: editToggleFullscreen,
+                mapGridVisible: Boolean(effectiveMapLayer == null ? void 0 : effectiveMapLayer.showGrid),
+                onToggleMapGrid: isFloorMapView ? toggleDraftCanvasShowGrid : void 0
               }
-            ), isFloorMapView && mode === "edit" && editPanelParams && config && dataSources && /* @__PURE__ */ import_react.default.createElement(
+            ), isFloorMapView && floorMapViewportOverlay != null ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-viewport-overlay` }, typeof floorMapViewportOverlay === "function" ? floorMapViewportOverlay({
+              items,
+              dataSources,
+              currentCanvasId,
+              mode
+            }) : floorMapViewportOverlay) : null, isFloorMapView && mode === "edit" && editPanelParams && config && dataSources && /* @__PURE__ */ import_react.default.createElement(
               "div",
               {
                 className: (0, import_classnames.default)(

package/lib/components/pisellFloorMapLayout/PisellFloorMapLayout.less

@@ -74,4 +74,19 @@
       background: rgba(22, 119, 255, 0.06);
     }
   }
+
+  /** 视口内悬浮层：不随 Transform 缩放平移，与 ViewControls 同级 */
+
+  &-viewport-overlay {
+    position: absolute;
+    left: 12px;
+    top: 12px;
+    z-index: 19;
+    pointer-events: none;
+    max-width: min(280px, 46vw);
+
+    > * {
+      pointer-events: auto;
+    }
+  }
 }

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

@@ -1,4 +1,9 @@
-/// <reference types="react" />
+/**
+ * CanvasTabs - 多画布 Tab，支持切换、动态添加、删除与重命名（编辑态）
+ * - 展示名：可选 `nameKey` + `locales.getText`，否则用 `name`（字符串或多语言对象）
+ * - 角标：可选 `tabBadge` 或由布局层注入合并后的数量
+ */
+import React from 'react';
 import type { FloorMapCanvas, FloorMapCanvasNameI18n } from '../types';
 import './CanvasTabs.less';
 export interface CanvasTabsProps {
@@ -18,5 +23,5 @@ export interface CanvasTabsProps {
     onRenameCanvas?: (canvasId: string, name: string | FloorMapCanvasNameI18n) => void;
     className?: string;
 }
-export declare function CanvasTabs(props: CanvasTabsProps): JSX.Element;
+export declare function CanvasTabs(props: CanvasTabsProps): React.JSX.Element;
 export default CanvasTabs;

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

@@ -33,5 +33,5 @@ export interface EditableItemLayerProps<T extends FloorMapItemBase = FloorMapMer
     getMergedItemWrapperStyle?: (item: T, index: number) => CSSProperties | undefined;
     className?: string;
 }
-export declare function EditableItemLayer<T extends FloorMapItemBase>(props: EditableItemLayerProps<T>): JSX.Element;
+export declare function EditableItemLayer<T extends FloorMapItemBase>(props: EditableItemLayerProps<T>): React.JSX.Element;
 export default EditableItemLayer;

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

@@ -1,4 +1,8 @@
-/// <reference types="react" />
+/**
+ * Figma 样式餐桌/圆桌卡片：上下小条 + 白底卡片 + 状态色边框
+ * 供 Floor Map Story 与 Sales Grid 平面图复用
+ */
+import React from 'react';
 import type { FloorMapMergedItem, FloorMapDataSources } from '../types';
 export declare type FigmaTableStatus = 'available' | 'reserved' | 'waiting' | 'dining' | 'billed' | 'availableSoon';
 /** 方桌/圆桌卡片展示用数据结构（与 Figma 设计一致，支持桌号/状态/人数/区域等） */
@@ -30,10 +34,10 @@ export interface FigmaTableCardItem {
 /** 从 merged item + dataSources 得到卡片数据 */
 export declare function getFigmaTableCardFromMerged(item: FloorMapMergedItem, dataSources: FloorMapDataSources): FigmaTableCardItem;
 /** 渲染 Figma 样式的方桌卡片（上下小条 + 白底卡片 + 状态边框） */
-export declare function renderFigmaStyleTableCard(cardItem: FigmaTableCardItem): JSX.Element;
+export declare function renderFigmaStyleTableCard(cardItem: FigmaTableCardItem): React.JSX.Element;
 /** 渲染 Figma 样式的圆桌卡片（圆形轮廓，展示桌号/状态/人数/区域） */
-export declare function renderFigmaStyleRoundTableCard(cardItem: FigmaTableCardItem): JSX.Element;
+export declare function renderFigmaStyleRoundTableCard(cardItem: FigmaTableCardItem): React.JSX.Element;
 /** 返回用于 renderItemByKind.table 的渲染函数（方桌） */
-export declare function getRenderItemByKindTable(dataSources: FloorMapDataSources): (item: unknown) => JSX.Element;
+export declare function getRenderItemByKindTable(dataSources: FloorMapDataSources): (item: unknown) => React.JSX.Element;
 /** 返回用于 renderItemByKind.roundTable 的渲染函数（圆桌） */
-export declare function getRenderItemByKindRoundTable(dataSources: FloorMapDataSources): (item: unknown) => JSX.Element;
+export declare function getRenderItemByKindRoundTable(dataSources: FloorMapDataSources): (item: unknown) => React.JSX.Element;

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

@@ -1,4 +1,8 @@
-/// <reference types="react" />
+/**
+ * FloorMapDataForm - 数据源落位的数据表单，调用 onDataSourceRecordSave
+ * 支持通过 columns 配置列标签与控件类型（string/number/select），与表格列一致
+ */
+import React from 'react';
 import type { FloorMapDataSources, DataSourceFormColumn } from '../types';
 import './FloorMapDataForm.less';
 export interface FloorMapDataFormProps {
@@ -13,5 +17,5 @@ export interface FloorMapDataFormProps {
     className?: string;
 }
 /** 简单通用表单：可编辑记录中的字段；支持 columns 配置标签与控件类型 */
-export declare function FloorMapDataForm(props: FloorMapDataFormProps): JSX.Element;
+export declare function FloorMapDataForm(props: FloorMapDataFormProps): React.JSX.Element;
 export default FloorMapDataForm;

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

@@ -1,4 +1,7 @@
-/// <reference types="react" />
+/**
+ * FloorMapEditPanel - 选中图元后的编辑面板：画布属性 + 可选数据绑定 + 数据源记录表单
+ */
+import React from 'react';
 import type { FloorMapEditPanelParams, FloorMapViewConfig, FloorMapDataSources } from '../types';
 import './FloorMapEditPanel.less';
 export interface FloorMapEditPanelProps extends FloorMapEditPanelParams {
@@ -7,5 +10,5 @@ export interface FloorMapEditPanelProps extends FloorMapEditPanelParams {
     savingRecord?: boolean;
     className?: string;
 }
-export declare function FloorMapEditPanel(props: FloorMapEditPanelProps): JSX.Element;
+export declare function FloorMapEditPanel(props: FloorMapEditPanelProps): React.JSX.Element;
 export default FloorMapEditPanel;