@pisell/materials 1.8.23 → 1.8.25

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

@@ -0,0 +1,35 @@
+/**
+ * FloorMapToolbar - 编辑态左侧侧边栏：按分类添加图元、绑定数据源与行；保存可选（默认用顶栏）
+ */
+import React from 'react';
+import type { FloorMapViewConfig, FloorMapDataSources, FloorMapMergedItem, FloorMapSceneElement, FloorMapPlaceMode } from '../types';
+import { type FloorMapPaletteDragPayload } from '../utils/floorMapDropUtils';
+import './FloorMapToolbar.less';
+export type { FloorMapPlaceMode as PlaceMode };
+export interface FloorMapToolbarProps {
+    config: FloorMapViewConfig;
+    dataSources: FloorMapDataSources;
+    dataSourceLabels?: Record<string, string>;
+    canCreate: boolean;
+    placeMode: FloorMapPlaceMode;
+    onPlaceModeChange: (mode: FloorMapPlaceMode) => void;
+    renderPreviewItem?: (item: FloorMapMergedItem) => React.ReactNode;
+    placementPreviewSize?: {
+        width: number;
+        height: number;
+    };
+    decorationPreviewSize?: number;
+    sceneElements?: FloorMapSceneElement[];
+    onSave?: () => void;
+    saving?: boolean;
+    saveError?: Error | string;
+    /** 布局草稿已相对持久化配置变更，提示用户点击本栏「保存」 */
+    layoutDirty?: boolean;
+    className?: string;
+    /** 触摸/笔：Pointer 拖拽落点（mouse 仍用 HTML5 DnD） */
+    onPaletteCardPointerDown?: (payload: FloorMapPaletteDragPayload, e: React.PointerEvent<HTMLButtonElement>) => void;
+    /** 触摸拖放结束后吞掉按钮 click，避免误触切换落点模式 */
+    consumeToolbarClickIfTouchDrag?: () => boolean;
+}
+export declare function FloorMapToolbar(props: FloorMapToolbarProps): JSX.Element;
+export default FloorMapToolbar;

package/es/components/pisellFloorMapLayout/components/FloorMapToolbar.js

@@ -21,8 +21,11 @@ import { FLOOR_MAP_IMAGE_ELEMENT_KIND, FLOOR_MAP_STAGE_ELEMENT_KIND } from "../t
 import { resolveDataBindingPolicy } from "../utils/floorMapElementKindUtils";
 import { FLOOR_MAP_PALETTE_DRAG_MIME } from "../utils/floorMapDropUtils";
 import { formatDataRecordOptionLabel } from "../utils/floorMapDataRecordLabel";
+import { locales } from '@pisell/utils';
 import "./FloorMapToolbar.less";
 var PREFIX = 'pisell-floor-map-layout';
+var I18N_TB = 'pisell-floor-map-layout.toolbar';
+var I18N_EP_DS = 'pisell-floor-map-layout.edit-panel.ph-data-source';
 var DEFAULT_PLACEMENT_SIZE = {
   width: 180,
   height: 120
@@ -115,7 +118,7 @@ export function FloorMapToolbar(props) {
     });
     return sorted.length ? sorted : [{
       id: '_uncat',
-      label: '图元',
+      label: locales.getText("".concat(I18N_TB, ".category-fallback")),
       order: 0
     }];
   }, [config.elementKindCategories]);
@@ -233,7 +236,7 @@ export function FloorMapToolbar(props) {
         e.dataTransfer.setData(FLOOR_MAP_PALETTE_DRAG_MIME, JSON.stringify(paletteDragPayload));
         e.dataTransfer.effectAllowed = 'copy';
       },
-      title: "\u70B9\u51FB\u540E\u753B\u5E03\u843D\u70B9\uFF0C\u6216\u62D6\u62FD\u5230\u753B\u5E03\u751F\u6210\u300C".concat(k.label, "\u300D")
+      title: locales.getText("".concat(I18N_TB, ".palette-card-title")).replace(/\{name\}/g, k.label)
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(PREFIX, "-toolbar-preview-cell"),
       style: {
@@ -261,8 +264,8 @@ export function FloorMapToolbar(props) {
       className: "".concat(PREFIX, "-toolbar-record-pick")
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(PREFIX, "-toolbar-record-pick-label")
-    }, "\u6570\u636E\u7ED1\u5B9A\uFF08\u53EF\u9009\uFF09"), /*#__PURE__*/React.createElement(Select, {
-      placeholder: "\u9009\u62E9\u6570\u636E\u6E90",
+    }, locales.getText("".concat(I18N_TB, ".data-binding-optional"))), /*#__PURE__*/React.createElement(Select, {
+      placeholder: locales.getText(I18N_EP_DS),
       allowClear: true,
       value: placeMode.type === 'scene' ? placeMode.dataSourceKey : undefined,
       options: allowedKeys.map(function (key) {
@@ -285,18 +288,18 @@ export function FloorMapToolbar(props) {
       if (!key) {
         return /*#__PURE__*/React.createElement("div", {
           className: "".concat(PREFIX, "-toolbar-record-pick-hint")
-        }, "\u9009\u62E9\u6570\u636E\u6E90\u540E\u53EF\u9009\u7ED1\u5B9A\u6570\u636E\u884C\uFF0C\u6216\u76F4\u63A5\u843D\u70B9\u5360\u4F4D\u3002");
+        }, locales.getText("".concat(I18N_TB, ".hint-after-select-ds")));
       }
       var unplaced = getUnplacedRecordsForKey(key, dataSources, sceneElements);
       if (unplaced.length === 0) {
         return /*#__PURE__*/React.createElement("div", {
           className: "".concat(PREFIX, "-toolbar-record-pick-hint")
-        }, "\u5F53\u524D\u6570\u636E\u6E90\u65E0\u672A\u7ED1\u5B9A\u8BB0\u5F55\uFF0C\u6216\u5217\u8868\u4E3A\u7A7A\uFF1B\u53EF\u76F4\u63A5\u5728\u753B\u5E03\u843D\u70B9\u5360\u4F4D\u3002");
+        }, locales.getText("".concat(I18N_TB, ".hint-no-unplaced-rows")));
       }
       var recordValue = mode !== null && mode !== void 0 && mode.recordIds && mode.recordIds.length > 0 ? mode.recordIds : mode !== null && mode !== void 0 && mode.recordId ? [mode.recordId] : undefined;
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select, {
         mode: "multiple",
-        placeholder: "\u9009\u62E9\u8981\u5C55\u793A\u7684\u8BB0\u5F55\uFF08\u53EF\u9009\uFF0C\u53EF\u591A\u9009\uFF09",
+        placeholder: locales.getText("".concat(I18N_TB, ".ph-select-records")),
         allowClear: true,
         maxTagCount: "responsive",
         value: recordValue,
@@ -316,18 +319,18 @@ export function FloorMapToolbar(props) {
         }
       }), /*#__PURE__*/React.createElement("div", {
         className: "".concat(PREFIX, "-toolbar-record-pick-hint")
-      }, "\u53EF\u9009\u591A\u6761\uFF0C\u5728\u753B\u5E03\u70B9\u51FB\u4E00\u6B21\u5C06\u6309\u9636\u68AF\u504F\u79FB\u843D\u591A\u6761\uFF1B\u7559\u7A7A\u5219\u5148\u5360\u4F4D\uFF0C\u7A0D\u540E\u5728\u4FA7\u680F\u7ED1\u5B9A\u3002"));
+      }, locales.getText("".concat(I18N_TB, ".hint-multi-drop"))));
     }()), allowedKeys.length === 0 && /*#__PURE__*/React.createElement("div", {
       className: "".concat(PREFIX, "-toolbar-record-hint")
-    }, "\u65E0\u53EF\u7528\u6570\u636E\u6E90"), /*#__PURE__*/React.createElement("button", {
+    }, locales.getText("".concat(I18N_TB, ".no-data-sources"))), /*#__PURE__*/React.createElement("button", {
       type: "button",
       className: "".concat(PREFIX, "-toolbar-btn cancel-inline"),
       onClick: cancelPlaceMode
-    }, "\u53D6\u6D88\u65B0\u5EFA")), isActive && policy === 'none' && /*#__PURE__*/React.createElement("button", {
+    }, locales.getText("".concat(I18N_TB, ".cancel-place")))), isActive && policy === 'none' && /*#__PURE__*/React.createElement("button", {
       type: "button",
       className: "".concat(PREFIX, "-toolbar-btn cancel-inline"),
       onClick: cancelPlaceMode
-    }, "\u53D6\u6D88\u65B0\u5EFA"));
+    }, locales.getText("".concat(I18N_TB, ".cancel-place"))));
   };
   return /*#__PURE__*/React.createElement("div", {
     className: classNames("".concat(PREFIX, "-toolbar"), "".concat(PREFIX, "-toolbar-sidebar"), className)
@@ -354,13 +357,13 @@ export function FloorMapToolbar(props) {
   }, layoutDirty ? /*#__PURE__*/React.createElement("span", {
     className: "".concat(PREFIX, "-toolbar-dirty-hint"),
     role: "status"
-  }, "\u5E03\u5C40\u5DF2\u4FEE\u6539\uFF0C\u8BF7\u70B9\u51FB\u300C\u4FDD\u5B58\u300D\u6301\u4E45\u5316\u3002") : null, saveError && /*#__PURE__*/React.createElement("span", {
+  }, locales.getText("".concat(I18N_TB, ".layout-dirty-hint"))) : null, saveError && /*#__PURE__*/React.createElement("span", {
     className: "".concat(PREFIX, "-toolbar-error")
   }, typeof saveError === 'string' ? saveError : saveError === null || saveError === void 0 ? void 0 : saveError.message), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: classNames("".concat(PREFIX, "-toolbar-btn"), 'primary', _defineProperty({}, "".concat(PREFIX, "-toolbar-save-dirty"), layoutDirty)),
     disabled: saving,
     onClick: onSave
-  }, saving ? '保存中...' : '保存')));
+  }, saving ? locales.getText("".concat(I18N_TB, ".saving")) : locales.getText("".concat(I18N_TB, ".save")))));
 }
 export default FloorMapToolbar;

package/es/components/pisellFloorMapLayout/components/FloorMapToolbar.less

@@ -78,9 +78,11 @@
     }
 
     &.pisell-floor-map-layout-toolbar-preview-card-active {
-      background: #e6f4ff;
-      border-color: #1677ff;
-      box-shadow: 0 0 0 1px #1677ff;
+      background: color-mix(in srgb,
+      var(--fmap-primary, #1677ff) 12%,
+      #fff);
+      border-color: var(--fmap-primary, #1677ff);
+      box-shadow: 0 0 0 1px var(--fmap-primary, #1677ff);
     }
 
     &.pisell-floor-map-layout-toolbar-preview-card-deco {
@@ -141,9 +143,11 @@
     cursor: pointer;
 
     &:hover {
-      color: #1677ff;
-      border-color: #1677ff;
-      background: #e6f4ff;
+      color: var(--fmap-primary, #1677ff);
+      border-color: var(--fmap-primary, #1677ff);
+      background: color-mix(in srgb,
+      var(--fmap-primary, #1677ff) 12%,
+      #fff);
     }
 
     &.cancel {
@@ -161,12 +165,16 @@
 
     &.primary {
       color: #fff;
-      background: #1677ff;
-      border-color: #1677ff;
+      background: var(--fmap-primary, #1677ff);
+      border-color: var(--fmap-primary, #1677ff);
 
       &:hover:not(:disabled) {
-        background: #4096ff;
-        border-color: #4096ff;
+        background: color-mix(in srgb,
+        var(--fmap-primary, #1677ff) 88%,
+        #fff);
+        border-color: color-mix(in srgb,
+        var(--fmap-primary, #1677ff) 88%,
+        #fff);
       }
 
       &:disabled {

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

@@ -0,0 +1,53 @@
+/**
+ * ItemLayer - 楼层图展示层
+ * 按 items 的 (x, y) 与 cellSize 定位，用 renderItem 渲染每项内容
+ */
+import React from 'react';
+import type { FloorMapItemBase, FloorMapItemUnit } from '../types';
+import type { CSSProperties } from 'react';
+import './ItemLayer.less';
+export interface ItemLayerProps<T extends FloorMapItemBase> {
+    /** 资源列表 */
+    items: T[];
+    /** 每项渲染函数 */
+    renderItem: (item: T, index: number) => React.ReactNode;
+    /** 每项 key */
+    rowKey?: string | ((item: T, index: number) => string);
+    /** 每格像素尺寸（cell 单位时用；pixel 单位时作为缺省宽高） */
+    cellSize: number;
+    /** item 坐标与尺寸单位：cell 格子数，pixel 像素 */
+    itemUnit?: FloorMapItemUnit;
+    /** item 之间的间距（像素），仅 cell 单位时生效 */
+    itemGap?: number;
+    /** 内容区总宽度（像素），由 items 推导或外部传入 */
+    contentWidth: number;
+    /** 内容区总高度（像素） */
+    contentHeight: number;
+    /** 内容区 X 偏移（画布包围盒向左/上扩展时，图元层整体平移） */
+    contentOffsetX?: number;
+    /** 内容区 Y 偏移 */
+    contentOffsetY?: number;
+    /** 是否启用 hover 事件 */
+    enableHover?: boolean;
+    /**
+     * 是否在 hover 时显示外沿描边（选中感高亮）。默认 true。
+     * 平面图只读态可由布局关闭，仅去掉描边，不影响 onItemHover。
+     */
+    itemHoverOutline?: boolean;
+    /** 点击回调 */
+    onItemClick?: (item: T, index: number, e: React.MouseEvent<HTMLElement>) => void;
+    /** hover 进入 */
+    onItemHover?: (item: T, index: number, e: React.MouseEvent<HTMLElement>) => void;
+    /** hover 离开 */
+    onItemLeave?: (item: T, index: number, e: React.MouseEvent<HTMLElement>) => void;
+    /** 每项外层容器额外样式（与定位样式合并） */
+    getMergedItemWrapperStyle?: (item: T, index: number) => CSSProperties | undefined;
+    /**
+     * 与编辑态一致：在含 `data-pisell-floor-room-scroll-surface` 的区域内按下时置 true，
+     * 用于禁用 Transform 画布平移，避免图元内纵向滑动拖动画布。
+     */
+    onInteractionChange?: (active: boolean) => void;
+    className?: string;
+}
+export declare function ItemLayer<T extends FloorMapItemBase>(props: ItemLayerProps<T>): JSX.Element;
+export default ItemLayer;

package/es/components/pisellFloorMapLayout/components/ItemLayer.js

@@ -14,10 +14,13 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
  * ItemLayer - 楼层图展示层
  * 按 items 的 (x, y) 与 cellSize 定位，用 renderItem 渲染每项内容
  */
-import React, { useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import classNames from 'classnames';
 import "./ItemLayer.less";
 var PREFIX = 'pisell-floor-map-layout';
+
+/** 图元内可滚动区标记（如预约房间卡 body / multi-list），与 private-materials 约定一致 */
+var ROOM_SCROLL_SURFACE_SELECTOR = '[data-pisell-floor-room-scroll-surface]';
 function getItemKey(item, index, rowKey) {
   var _rowKey;
   if (!rowKey) return item.id;
@@ -63,11 +66,56 @@ export function ItemLayer(props) {
     contentOffsetY = _props$contentOffsetY === void 0 ? 0 : _props$contentOffsetY,
     _props$enableHover = props.enableHover,
     enableHover = _props$enableHover === void 0 ? true : _props$enableHover,
+    _props$itemHoverOutli = props.itemHoverOutline,
+    itemHoverOutline = _props$itemHoverOutli === void 0 ? true : _props$itemHoverOutli,
     onItemClick = props.onItemClick,
     onItemHover = props.onItemHover,
     onItemLeave = props.onItemLeave,
     getMergedItemWrapperStyle = props.getMergedItemWrapperStyle,
+    onInteractionChange = props.onInteractionChange,
     className = props.className;
+
+  /** 触控/指针在房间卡滚动区内按下时禁用画布 pan，松手恢复 */
+  var notifyRoomScrollSurfaceActive = useCallback(function () {
+    if (!onInteractionChange) return;
+    onInteractionChange(true);
+    var finish = function finish() {
+      onInteractionChange(false);
+    };
+    window.addEventListener('pointerup', finish, {
+      once: true
+    });
+    window.addEventListener('pointercancel', finish, {
+      once: true
+    });
+    window.addEventListener('touchend', finish, {
+      once: true,
+      passive: true
+    });
+    window.addEventListener('touchcancel', finish, {
+      once: true,
+      passive: true
+    });
+  }, [onInteractionChange]);
+  var handleItemPointerDownCapture = useCallback(function (e) {
+    var _el$closest;
+    if (!onInteractionChange || e.button !== 0) return;
+    var el = e.target;
+    if (!(el !== null && el !== void 0 && (_el$closest = el.closest) !== null && _el$closest !== void 0 && _el$closest.call(el, ROOM_SCROLL_SURFACE_SELECTOR))) return;
+    notifyRoomScrollSurfaceActive();
+  }, [onInteractionChange, notifyRoomScrollSurfaceActive]);
+  var handleItemTouchStartCapture = useCallback(function (e) {
+    var _el$closest2;
+    if (!onInteractionChange) return;
+    var el = e.target;
+    if (!(el !== null && el !== void 0 && (_el$closest2 = el.closest) !== null && _el$closest2 !== void 0 && _el$closest2.call(el, ROOM_SCROLL_SURFACE_SELECTOR))) return;
+    notifyRoomScrollSurfaceActive();
+  }, [onInteractionChange, notifyRoomScrollSurfaceActive]);
+  useEffect(function () {
+    return function () {
+      onInteractionChange === null || onInteractionChange === void 0 || onInteractionChange(false);
+    };
+  }, [onInteractionChange]);
   var itemNodes = useMemo(function () {
     var isPixel = itemUnit === 'pixel';
     var g = itemGap;
@@ -100,7 +148,7 @@ export function ItemLayer(props) {
       var shapeStyle = getShapeStyle(item.shape);
       return /*#__PURE__*/React.createElement("div", {
         key: key,
-        className: classNames("".concat(PREFIX, "-item"), _defineProperty({}, "".concat(PREFIX, "-item-hoverable"), enableHover)),
+        className: classNames("".concat(PREFIX, "-item"), _defineProperty(_defineProperty({}, "".concat(PREFIX, "-item-hoverable"), enableHover), "".concat(PREFIX, "-item-hover-outline"), enableHover && itemHoverOutline)),
         style: _objectSpread(_objectSpread({
           position: 'absolute',
           left: left,
@@ -118,10 +166,12 @@ export function ItemLayer(props) {
         },
         onMouseLeave: function onMouseLeave(e) {
           return onItemLeave === null || onItemLeave === void 0 ? void 0 : onItemLeave(item, index, e);
-        }
+        },
+        onPointerDownCapture: handleItemPointerDownCapture,
+        onTouchStartCapture: handleItemTouchStartCapture
       }, renderItem(item, index));
     });
-  }, [items, renderItem, rowKey, cellSize, itemUnit, itemGap, enableHover, onItemClick, onItemHover, onItemLeave, getMergedItemWrapperStyle]);
+  }, [items, renderItem, rowKey, cellSize, itemUnit, itemGap, enableHover, itemHoverOutline, onItemClick, onItemHover, onItemLeave, getMergedItemWrapperStyle, handleItemPointerDownCapture, handleItemTouchStartCapture]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames("".concat(PREFIX, "-item-layer"), className),
     style: {

package/es/components/pisellFloorMapLayout/components/ItemLayer.less

@@ -11,9 +11,12 @@
   cursor: pointer;
   z-index: 0;
 
-  &-hoverable:hover {
-    outline: 2px solid rgba(24, 144, 255, 0.5);
-    outline-offset: -2px;
+  /** hover 描边与编辑态选中一致（见 EditableItemLayer：`pisell-floor-map-layout-editable-item-selected`） */
+
+  &-hoverable&-hover-outline:hover {
+    outline: 3px solid var(--fmap-primary, #1677ff);
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px rgba(22, 119, 255, 0.25);
     z-index: 1;
   }
 }

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

@@ -0,0 +1,27 @@
+/**
+ * MapLayer - 楼层图底层
+ * 负责背景（无/纯色/图片/SVG）、网格线、padding、gap
+ */
+import React from 'react';
+import type { FloorMapLayerConfig } from '../types';
+import './MapLayer.less';
+export interface MapLayerProps {
+    /** 底层配置 */
+    config?: FloorMapLayerConfig;
+    /** 内容区域宽度（逻辑单位或像素，用于网格线计算） */
+    contentWidth?: number;
+    /** 内容区域高度 */
+    contentHeight?: number;
+    /** 每格像素尺寸（用于网格线间距） */
+    cellSize?: number;
+    /** 为 true 时不应用纯色背景，让画布底层网格透出 */
+    preferCanvasGrid?: boolean;
+    /** 为 true 时容器设置 pointer-events: none，空白处点击可透传到下层，供 react-zoom-pan-pinch 画布平移 */
+    pointerEventsNone?: boolean;
+    /** 子节点（展示层会叠在上方） */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+}
+export declare function MapLayer(props: MapLayerProps): JSX.Element;
+export default MapLayer;

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

@@ -0,0 +1,46 @@
+/**
+ * ViewControls - 内置视图控制：默认仅缩放；可选复位、区域定位、全屏等
+ * 平面图（dockChrome）：Dock 折叠入口 + 展开条（含业务插槽、空闲自动收起）
+ * 非平面图：单条横栏，缩放与工具始终同排（无 Menu 折叠）
+ */
+import React from 'react';
+import type { FloorMapControlsConfig } from '../types';
+import './ViewControls.less';
+/** 从 react-zoom-pan-pinch 拿到的控制 API（由主组件传入） */
+export interface ViewControlsApi {
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetTransform: () => void;
+    /** 区域定位，可能由主组件基于 items 计算后封装 */
+    fitBounds?: () => void;
+    /** 切换全屏（requestFullscreen / exitFullscreen） */
+    toggleFullscreen?: () => void;
+}
+export interface ViewControlsProps {
+    /** 控制 API */
+    api: ViewControlsApi;
+    /** 显隐配置 */
+    config?: FloorMapControlsConfig;
+    /** 当前缩放比例（1 = 100%），用于 Stepper 展示 */
+    scale?: number;
+    /** 当前是否处于全屏 */
+    isFullscreen?: boolean;
+    className?: string;
+    /** 与 config.showGridToggle 联用：当前画布是否显示网格 */
+    mapGridVisible?: boolean;
+    /** 切换当前画布 draft 的 mapLayer.showGrid */
+    onToggleMapGrid?: () => void;
+    /**
+     * 平面图 Dock：圆角浅底样式，默认折叠为单入口；展开后含缩放、工具、全屏与 dockExpandedTrailing
+     */
+    dockChrome?: boolean;
+    /** Dock 展开区最右侧业务插槽（如「编辑画布」） */
+    dockExpandedTrailing?: React.ReactNode;
+    /**
+     * Dock 展开后无操作自动收起（毫秒）；0 表示不自动收起
+     * @default 10000
+     */
+    autoCollapseDockMs?: number;
+}
+export declare function ViewControls(props: ViewControlsProps): JSX.Element | null;
+export default ViewControls;