@pisell/materials 6.11.42 → 6.11.44

package/es/components/pisellFloorMapLayout/PisellFloorMapLayout.js

@@ -40,8 +40,8 @@ import { mergeFloorMapLayoutPropsFromContext } from "./context/mergeFloorMapLayo
 import useEngineContext from "../../hooks/useEngineContext";
 import { locales } from '@pisell/utils';
 import { initFloorMapLayoutLocales } from "./utils/floorMapCanvasDisplay";
+import { FLOOR_MAP_LAYOUT_CLASS_PREFIX as PREFIX } from "./floorMapLayoutConstants";
 import "./PisellFloorMapLayout.less";
-var PREFIX = 'pisell-floor-map-layout';
 
 /**
  * 布局根实现（由 {@link PisellFloorMapLayout} forwardRef 包裹）。
@@ -78,6 +78,7 @@ function PisellFloorMapLayoutInner(props, ref) {
     floorMapConfigProp = p.floorMapConfig,
     dataSources = p.dataSources,
     onSave = p.onSave,
+    onExitEdit = p.onExitEdit,
     onDataSourceRecordSave = p.onDataSourceRecordSave,
     dataSourceLabels = p.dataSourceLabels,
     dataSourceFormColumns = p.dataSourceFormColumns,
@@ -94,7 +95,10 @@ function PisellFloorMapLayoutInner(props, ref) {
     viewportOverlayPlacement = _p$viewportOverlayPla === void 0 ? 'top-start' : _p$viewportOverlayPla,
     viewportOverlayClassName = p.viewportOverlayClassName,
     canvasTabsBarTrailing = p.canvasTabsBarTrailing,
-    viewportDockTrailing = p.viewportDockTrailing;
+    viewportDockTrailing = p.viewportDockTrailing,
+    _p$viewportPersist = p.viewportPersist,
+    viewportPersist = _p$viewportPersist === void 0 ? true : _p$viewportPersist,
+    viewportPersistNamespace = p.viewportPersistNamespace;
   var _theme$useToken = theme.useToken(),
     token = _theme$useToken.token;
   var isFloorMapView = Boolean(floorMapConfigProp);
@@ -142,7 +146,25 @@ function PisellFloorMapLayoutInner(props, ref) {
     toggleDraftCanvasShowGrid = edit.toggleDraftCanvasShowGrid,
     toggleSelectedLayoutLock = edit.toggleSelectedLayoutLock,
     duplicateSelectedElement = edit.duplicateSelectedElement,
-    deleteSelectedElement = edit.deleteSelectedElement;
+    deleteSelectedElement = edit.deleteSelectedElement,
+    undoDraft = edit.undoDraft,
+    redoDraft = edit.redoDraft,
+    canUndo = edit.canUndo,
+    canRedo = edit.canRedo,
+    discardDraft = edit.discardDraft;
+
+  /**
+   * 「取消编辑」组合：先丢弃 draft（同步把 draftConfig replace 回上游 props 的值），
+   * 再调用业务侧 onExitEdit 退出编辑模式。
+   *
+   * 不在 onExitEdit 本身做 discard，是因为「完成」按钮链路也会调 onExitEdit，
+   * 完成时草稿应保留等 props 回写（参考 useFloorMapEditState.handleSave 的 baseline 处理），
+   * 一旦在 onExitEdit 里 discard 会把保存中的视觉态闪回旧值。
+   */
+  var handleCancelEdit = useCallback(function () {
+    discardDraft();
+    onExitEdit === null || onExitEdit === void 0 || onExitEdit();
+  }, [discardDraft, onExitEdit]);
 
   /** 当前画布下的 mapLayer：全局 `mapLayer` 与画布级配置合并，供 MapLayer / 吸附等读取 */
   var effectiveMapLayer = useMemo(function () {
@@ -235,6 +257,20 @@ function PisellFloorMapLayoutInner(props, ref) {
   }, [effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.gap]);
   /** 平面图坐标始终按像素；非平面图沿用 props `itemUnit` */
   var effectiveItemUnit = isFloorMapView ? 'pixel' : itemUnit;
+
+  /**
+   * 视口持久化 key：
+   *   - 仅平面图模式启用（其它模式没有「画布」概念）
+   *   - `viewportPersist === false` 或无 currentCanvasId 时关闭
+   *   - 有 namespace 时拼成 `${ns}:${canvasId}`，隔离不同业务场景（店铺 / 平面图）
+   *   - 未传 namespace 时 fallback 为仅 `${canvasId}`，小心跨场景可能共享视角
+   *   - 不感知 boundingPadding / defaultScale 等渲染参数变化，避免 padding 调整导致缓存失效
+   */
+  var viewportPersistKey = useMemo(function () {
+    if (viewportPersist === false) return undefined;
+    if (!isFloorMapView || !currentCanvasId) return undefined;
+    return viewportPersistNamespace ? "".concat(viewportPersistNamespace, ":").concat(currentCanvasId) : currentCanvasId;
+  }, [viewportPersist, viewportPersistNamespace, isFloorMapView, currentCanvasId]);
   var metrics = useFloorMapTransformMetrics({
     items: items,
     cellSize: cellSize,
@@ -246,7 +282,8 @@ function PisellFloorMapLayoutInner(props, ref) {
     transformRef: transformRef,
     contentOffsetRef: contentOffsetRef,
     boundingPadding: effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.boundingPadding,
-    frameResetKey: isFloorMapView ? transformWrapperKey : undefined
+    frameResetKey: isFloorMapView ? transformWrapperKey : undefined,
+    viewportPersistKey: viewportPersistKey
   });
   var containerRef = metrics.containerRef,
     mapAreaRef = metrics.mapAreaRef,
@@ -263,27 +300,58 @@ function PisellFloorMapLayoutInner(props, ref) {
     isFullscreen = metrics.isFullscreen,
     toggleFullscreen = metrics.toggleFullscreen,
     fitBounds = metrics.fitBounds,
-    lastTransformRef = metrics.lastTransformRef,
+    isAtFitBounds = metrics.isAtFitBounds,
+    notifyTransformed = metrics.notifyTransformed,
+    persistCurrentViewport = metrics.persistCurrentViewport,
+    attachTransformContext = metrics.attachTransformContext,
     isInteractingWithElement = metrics.isInteractingWithElement,
-    setIsInteractingWithElement = metrics.setIsInteractingWithElement;
+    setIsInteractingWithElement = metrics.setIsInteractingWithElement,
+    viewportLocked = metrics.viewportLocked,
+    toggleViewportLocked = metrics.toggleViewportLocked;
 
-  /** 编辑态全屏策略：toggle 可切换；locked 始终全屏顶栏且不可在组件内退出；disabled 无全屏按钮 */
+  /** 编辑态全屏策略：toggle 全屏与编辑态强绑定；locked 始终全屏顶栏；disabled 无全屏 */
   var fsMode = floorMapFullscreenMode !== null && floorMapFullscreenMode !== void 0 ? floorMapFullscreenMode : 'toggle';
   var useFullTopChrome = isFloorMapView && mode === 'edit' && (fsMode === 'locked' || fsMode === 'toggle' && isFullscreen);
-  /** toggle 时左下 Dock 展示全屏；locked/disabled 不传 API */
-  var dockToggleFullscreen = isFloorMapView && fsMode === 'toggle' ? toggleFullscreen : undefined;
+  /**
+   * 平面图编辑态：全屏与编辑模式强绑定（用户需求："编辑的时候就是全屏，非编辑模式就不是全屏"）。
+   * 因此 toggle 策略下不再展示左下角 Dock 的进出全屏按钮——
+   * 退出全屏 = 退出编辑，由顶栏「保存 / 退出编辑」入口承担。
+   * locked / disabled 行为保持原样：locked 也无按钮；disabled 不允许全屏。
+   */
+  var dockToggleFullscreen = undefined;
+
+  /**
+   * 平面图编辑态全屏与编辑模式双向同步：
+   *   - 进 edit → 自动进入伪全屏
+   *   - 退出 edit → 自动退出伪全屏
+   *   - 仅 toggle 策略下生效（locked 已由 useFullTopChrome 强制；disabled 不允许全屏）
+   * 强同步：依赖中包含 isFullscreen，万一被外部 / 副作用切到不一致状态会被纠正回来。
+   * ESC 退出全屏的监听已在 metrics hook 中移除，避免按 ESC 后被本 effect 强制拉回来导致闪烁。
+   */
+  useEffect(function () {
+    if (!isFloorMapView) return;
+    if (fsMode !== 'toggle') return;
+    var shouldBeFullscreen = mode === 'edit';
+    if (shouldBeFullscreen !== isFullscreen) {
+      toggleFullscreen();
+    }
+  }, [mode, isFloorMapView, fsMode, isFullscreen, toggleFullscreen]);
 
   /** 编辑态始终保留顶栏 Tab（单画布也要能「添加画布」）；仅阅读态在单画布时可隐藏 Tab 行 */
   var showEditCompactTopBar = isFloorMapView && mode === 'edit' && Boolean(config) && !useFullTopChrome;
 
-  /** 右下角视口控件：平面图下默认带出全屏按钮（若当前策略允许 toggle） */
+  /**
+   * 右下角视口控件：平面图下默认带出全屏按钮（若当前策略允许 toggle），
+   * 同时在视口持久化开启时默认带出「视口锁定」按钮（防误触改变缩放/位置）。
+   */
   var viewControlsConfig = useMemo(function () {
-    var _controls$showFullscr;
+    var _controls$showFullscr, _controls$showViewpor;
     if (!isFloorMapView) return controls;
     return _objectSpread(_objectSpread({}, controls), {}, {
-      showFullscreen: (_controls$showFullscr = controls.showFullscreen) !== null && _controls$showFullscr !== void 0 ? _controls$showFullscr : Boolean(dockToggleFullscreen)
+      showFullscreen: (_controls$showFullscr = controls.showFullscreen) !== null && _controls$showFullscr !== void 0 ? _controls$showFullscr : Boolean(dockToggleFullscreen),
+      showViewportLock: (_controls$showViewpor = controls.showViewportLock) !== null && _controls$showViewpor !== void 0 ? _controls$showViewpor : Boolean(viewportPersistKey)
     });
-  }, [isFloorMapView, controls, dockToggleFullscreen]);
+  }, [isFloorMapView, controls, dockToggleFullscreen, viewportPersistKey]);
   var topBarExtraActions = null;
 
   /** 从侧栏/调色板拖入画布时，地图区高亮态（用于 dragleave/over 判定） */
@@ -303,6 +371,50 @@ function PisellFloorMapLayoutInner(props, ref) {
     };
   }, []);
 
+  /**
+   * 编辑态下的撤销 / 重做键盘快捷键：
+   * - Ctrl/⌘ + Z → undo
+   * - Ctrl/⌘ + Shift + Z 或 Ctrl/⌘ + Y → redo
+   * 在 input/textarea/contenteditable 聚焦时跳过，避免抢走表单原生撤销。
+   * 仅在容器内或容器获得焦点时响应，避免页面其它编辑区被劫持。
+   */
+  useEffect(function () {
+    if (!isFloorMapView || mode !== 'edit' || !(config !== null && config !== void 0 && config.canvasUi.canEdit)) {
+      return;
+    }
+    var onKeyDown = function onKeyDown(e) {
+      var mod = e.ctrlKey || e.metaKey;
+      if (!mod) return;
+      var key = e.key.toLowerCase();
+      var isUndoCombo = key === 'z' && !e.shiftKey && !e.altKey;
+      var isRedoCombo = key === 'z' && e.shiftKey && !e.altKey || key === 'y' && !e.shiftKey && !e.altKey;
+      if (!isUndoCombo && !isRedoCombo) return;
+      var target = e.target;
+      if (target) {
+        var tag = target.tagName;
+        if (tag === 'INPUT' || tag === 'TEXTAREA') return;
+        if (target.isContentEditable) return;
+      }
+      var root = containerRef.current;
+      if (!root) return;
+      var active = document.activeElement;
+      var focusInside = active ? root.contains(active) : false;
+      var targetInside = target ? root.contains(target) : false;
+      if (!focusInside && !targetInside) return;
+      if (isUndoCombo && canUndo) {
+        e.preventDefault();
+        undoDraft();
+      } else if (isRedoCombo && canRedo) {
+        e.preventDefault();
+        redoDraft();
+      }
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return function () {
+      return window.removeEventListener('keydown', onKeyDown);
+    };
+  }, [isFloorMapView, mode, config === null || config === void 0 ? void 0 : config.canvasUi.canEdit, canUndo, canRedo, undoDraft, redoDraft, containerRef]);
+
   /**
    * 桌面端：在画布 drop 层释放拖拽时，解析 dataTransfer 并在场景坐标下落位图元。
    */
@@ -431,7 +543,7 @@ function PisellFloorMapLayoutInner(props, ref) {
   }, [isFloorMapView, mode, setSelectedId]);
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
-    className: classNames(PREFIX, className, _defineProperty(_defineProperty({}, "".concat(PREFIX, "-floor-map-view"), isFloorMapView), "".concat(PREFIX, "-mode-edit"), isFloorMapView && mode === 'edit')),
+    className: classNames(PREFIX, className, _defineProperty(_defineProperty(_defineProperty({}, "".concat(PREFIX, "-floor-map-view"), isFloorMapView), "".concat(PREFIX, "-mode-edit"), isFloorMapView && mode === 'edit'), "".concat(PREFIX, "--pseudo-fullscreen"), isFullscreen)),
     style: _objectSpread(_objectSpread(_objectSpread({
       display: 'flex',
       flexDirection: 'column'
@@ -452,7 +564,11 @@ function PisellFloorMapLayoutInner(props, ref) {
     onRemoveCanvas: handleRemoveCanvas,
     onRenameCanvas: handleRenameCanvas,
     controls: controls,
-    canvasTabsBarTrailing: canvasTabsBarTrailing
+    canvasTabsBarTrailing: canvasTabsBarTrailing,
+    onUndo: config.canvasUi.canEdit ? undoDraft : undefined,
+    onRedo: config.canvasUi.canEdit ? redoDraft : undefined,
+    canUndo: canUndo,
+    canRedo: canRedo
   }), isFloorMapView && mode === 'edit' && config && useFullTopChrome && /*#__PURE__*/React.createElement(FloorMapEditTopBar, {
     mode: "full",
     config: config,
@@ -473,7 +589,13 @@ function PisellFloorMapLayoutInner(props, ref) {
     isFullscreen: isFullscreen,
     controls: controls,
     extraActions: topBarExtraActions,
-    canvasTabsBarTrailing: canvasTabsBarTrailing
+    canvasTabsBarTrailing: canvasTabsBarTrailing,
+    onUndo: config.canvasUi.canEdit ? undoDraft : undefined,
+    onRedo: config.canvasUi.canEdit ? redoDraft : undefined,
+    canUndo: canUndo,
+    canRedo: canRedo,
+    onExitEdit: onExitEdit,
+    onCancelEdit: onExitEdit ? handleCancelEdit : undefined
   }), showReadModeCanvasTabsBar && /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-edit-top-bar ").concat(PREFIX, "-read-canvas-tabs-bar"),
     role: "toolbar",
@@ -572,24 +694,50 @@ function PisellFloorMapLayoutInner(props, ref) {
     // v3 类型定义未包含 step，库仍支持缩放步进时使用
     ,
     step: zoomConfig.step,
+    /**
+     * 视口锁定：把所有库内置交互写入 transform 的入口都关掉。
+     * - panning.disabled：拖拽
+     * - wheel.disabled：滚轮缩放
+     * - pinch.disabled：触摸双指缩放
+     * - doubleClick.disabled：本就为 true（业务自定义双击行为）
+     * 程序化 setTransform / 缓存恢复仍然有效，所以锁定时切换画布回来仍能贴回锁定时的视角。
+     */
     panning: {
-      disabled: pan.enabled === false || isInteractingWithElement,
+      disabled: pan.enabled === false || isInteractingWithElement || viewportLocked,
       velocityDisabled: true
     },
+    wheel: {
+      disabled: viewportLocked
+    },
+    pinch: {
+      disabled: viewportLocked
+    },
     doubleClick: {
       disabled: true
     },
     onTransformed: function onTransformed(_, state) {
       setScale(state.scale);
-      lastTransformRef.current = {
-        x: state.positionX,
-        y: state.positionY,
-        scale: state.scale
-      };
-    }
+      /**
+       * 由 hook 内部写 lastTransformRef、判定 fitBounds 激活态。
+       * 不在 onTransformed 持久化：挂载/重挂载会触发一次「初始 transform」回调，
+       * 写到 localStorage 会覆盖用户上次保存的视角；
+       * 持久化改由 onPanningStop / onZoomStop / onPinchingStop / onWheelStop 触发。
+       */
+      notifyTransformed(state.positionX, state.positionY, state.scale);
+    },
+    onPanningStop: persistCurrentViewport,
+    onZoomStop: persistCurrentViewport,
+    onPinchingStop: persistCurrentViewport,
+    onWheelStop: persistCurrentViewport
   }, function (ctx) {
     var _effectiveMapLayer$sn;
-    transformRef.current = ctx;
+    /**
+     * 不直接 transformRef.current = ctx：
+     * attachTransformContext 内部会比对 ctx 实例并在每次 wrapper 重挂载时
+     * 立即 schedule 一次 restore，避免「namespace 异步 → autoFit 抢跑 →
+     * restore 被 autoFit 动画吃掉」导致首屏不应用缓存的时序坑。
+     */
+    attachTransformContext(ctx);
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TransformComponent, {
       wrapperStyle: {
         width: '100%',
@@ -673,10 +821,13 @@ function PisellFloorMapLayoutInner(props, ref) {
       config: viewControlsConfig,
       scale: scale,
       isFullscreen: isFullscreen,
+      fitBoundsActive: isAtFitBounds,
       fitBounds: fitBounds,
       toggleFullscreen: dockToggleFullscreen,
       mapGridVisible: Boolean(effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.showGrid),
       onToggleMapGrid: isFloorMapView ? toggleDraftCanvasShowGrid : undefined,
+      viewportLocked: viewportLocked,
+      onToggleViewportLock: isFloorMapView && viewportPersistKey ? toggleViewportLocked : undefined,
       dockChrome: isFloorMapView,
       dockExpandedTrailing: viewportDockTrailing,
       autoCollapseDockMs: 10000

package/es/components/pisellFloorMapLayout/PisellFloorMapLayout.less

@@ -1,3 +1,8 @@
+/* 伪全屏宿主：锁定 body 滚动，避免双滚动条与触摸滑动穿透 */
+body.pisell-floor-map-layout-fullscreen-host {
+  overflow: hidden !important;
+}
+
 .pisell-floor-map-layout {
   position: relative;
   width: 100%;
@@ -5,6 +10,23 @@
   overflow: hidden;
   background: #fafafa;
 
+  /**
+   * 伪全屏：撑满视口，替代浏览器 Fullscreen API；与资源墙大屏（pisell-resource-wall-fixed-viewport）
+   * 一致体验。z-index 故意高于常见弹层但低于 antd Modal 默认 1000，必要时可在宿主侧覆盖。
+   */
+  &--pseudo-fullscreen {
+    position: fixed !important;
+    inset: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100% !important;
+    max-height: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    z-index: 2000;
+    background: #fff;
+  }
+
   &-loading,
   &-save-error {
     position: absolute;

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

@@ -29,9 +29,9 @@ export interface FigmaTableCardItem {
 }
 /** 从 merged item + dataSources 得到卡片数据 */
 export declare function getFigmaTableCardFromMerged(item: FloorMapMergedItem, dataSources: FloorMapDataSources): FigmaTableCardItem;
-/** 渲染 Figma 样式的方桌卡片（上下小条 + 白底卡片 + 状态边框） */
+/** 渲染 Figma 样式的方桌卡片（上下小条 + 资源信息标题栏 + 白底卡片 + 状态色边框） */
 export declare function renderFigmaStyleTableCard(cardItem: FigmaTableCardItem): JSX.Element;
-/** 渲染 Figma 样式的圆桌卡片（圆形轮廓，展示桌号/状态/人数/区域） */
+/** 渲染 Figma 样式的圆桌卡片（顶部资源信息 chip + 圆形主体，圆形主体只展示状态相关内容） */
 export declare function renderFigmaStyleRoundTableCard(cardItem: FigmaTableCardItem): JSX.Element;
 /** 返回用于 renderItemByKind.table 的渲染函数（方桌） */
 export declare function getRenderItemByKindTable(dataSources: FloorMapDataSources): (item: unknown) => JSX.Element;