@pisell/materials 1.8.24 → 1.8.25

package/es/components/pisellFloorMapLayout/components/FloorMapEditQuickActions.js

@@ -0,0 +1,67 @@
+/**
+ * 编辑态选中图元旁的快捷操作：锁定 / 复制 / 删除（与侧栏同源逻辑）
+ */
+import React, { useCallback } from 'react';
+import classNames from 'classnames';
+import { Button, Popconfirm, Tooltip } from 'antd';
+import { CopyOutlined, DeleteOutlined, LockOutlined, UnlockOutlined } from '@ant-design/icons';
+var PREFIX = 'pisell-floor-map-layout';
+export function FloorMapEditQuickActions(props) {
+  var className = props.className,
+    labels = props.labels,
+    isLocked = props.isLocked,
+    onToggleLock = props.onToggleLock,
+    onDuplicate = props.onDuplicate,
+    onDelete = props.onDelete;
+  var stopBubble = useCallback(function (e) {
+    e.stopPropagation();
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    role: "toolbar",
+    "aria-label": labels.ariaToolbar,
+    className: classNames("".concat(PREFIX, "-edit-quick-actions"), isLocked && "".concat(PREFIX, "-edit-quick-actions--locked"), className),
+    onPointerDown: function onPointerDown(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: isLocked ? labels.unlock : labels.lock
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "text",
+    size: "large",
+    icon: isLocked ? /*#__PURE__*/React.createElement(LockOutlined, null) : /*#__PURE__*/React.createElement(UnlockOutlined, null),
+    onClick: function onClick(e) {
+      stopBubble(e);
+      onToggleLock();
+    },
+    "aria-pressed": isLocked
+  })), /*#__PURE__*/React.createElement(Tooltip, {
+    title: labels.duplicate
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "text",
+    size: "large",
+    icon: /*#__PURE__*/React.createElement(CopyOutlined, null),
+    onClick: function onClick(e) {
+      stopBubble(e);
+      onDuplicate();
+    }
+  })), /*#__PURE__*/React.createElement(Popconfirm, {
+    title: labels.popTitle,
+    description: labels.popDesc,
+    onConfirm: function onConfirm() {
+      return onDelete();
+    },
+    okText: labels.okDelete,
+    cancelText: labels.cancel,
+    okButtonProps: {
+      danger: true
+    }
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: labels.delete
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "text",
+    danger: true,
+    size: "large",
+    icon: /*#__PURE__*/React.createElement(DeleteOutlined, null),
+    onClick: stopBubble
+  }))));
+}

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

@@ -1,7 +1,7 @@
 /**
  * FloorMapEditTopBar - 编辑态顶栏
- * - `mode="compact"`：画布 Tab + 可选 `canvasTabsBarTrailing` + 全屏入口（非全屏；保存多在侧栏）
- * - `mode="full"`：画布 Tab + `canvasTabsBarTrailing` + 保存（仅非浏览器全屏时）+ 全屏退出 + 扩展操作
+ * - `mode="compact"`：画布 Tab + 可选 `canvasTabsBarTrailing`（全屏入口在左下 Dock）
+ * - `mode="full"`：画布 Tab + `canvasTabsBarTrailing` + 保存（仅非浏览器全屏时）+ 扩展操作
  */
 import React from 'react';
 import type { CanvasTabsProps } from './CanvasTabs';
@@ -9,7 +9,7 @@ import type { FloorMapControlsConfig, FloorMapViewConfig } from '../types';
 import './FloorMapEditTopBar.less';
 export declare type FloorMapEditTopBarMode = 'full' | 'compact';
 export interface FloorMapEditTopBarProps {
-    /** full：全屏时的完整顶栏；compact：非全屏时 Tab + 全屏入口 */
+    /** full：全屏时的完整顶栏；compact：非全屏时 Tab + 扩展区 */
     mode?: FloorMapEditTopBarMode;
     config: FloorMapViewConfig;
     canvases: CanvasTabsProps['canvases'];
@@ -23,14 +23,16 @@ export interface FloorMapEditTopBarProps {
     saving?: boolean;
     saveError?: Error | string;
     layoutDirty?: boolean;
-    toggleFullscreen?: () => void;
+    /** full 模式：浏览器全屏时为 true，顶栏不展示保存（改由侧栏） */
     isFullscreen?: boolean;
     controls?: FloorMapControlsConfig;
     /** 顶栏右侧扩展（如「区域定位」等），仅 full 模式 */
     extraActions?: React.ReactNode;
-    /** 画布 Tab 同排最右侧业务区（在「进入全屏」/「退出全屏」与保存等之前） */
+    /** 画布 Tab 同排最右侧业务区 */
     canvasTabsBarTrailing?: React.ReactNode;
+    /** 启用画布仅 1 个时隐藏 Tab 行，仅保留右侧操作区（全屏顶栏保存等） */
+    hideCanvasTabs?: boolean;
     className?: string;
 }
-export declare function FloorMapEditTopBar(props: FloorMapEditTopBarProps): JSX.Element;
+export declare function FloorMapEditTopBar(props: FloorMapEditTopBarProps): JSX.Element | null;
 export default FloorMapEditTopBar;

package/es/components/pisellFloorMapLayout/components/FloorMapEditTopBar.js

@@ -1,11 +1,10 @@
 /**
  * FloorMapEditTopBar - 编辑态顶栏
- * - `mode="compact"`：画布 Tab + 可选 `canvasTabsBarTrailing` + 全屏入口（非全屏；保存多在侧栏）
- * - `mode="full"`：画布 Tab + `canvasTabsBarTrailing` + 保存（仅非浏览器全屏时）+ 全屏退出 + 扩展操作
+ * - `mode="compact"`：画布 Tab + 可选 `canvasTabsBarTrailing`（全屏入口在左下 Dock）
+ * - `mode="full"`：画布 Tab + `canvasTabsBarTrailing` + 保存（仅非浏览器全屏时）+ 扩展操作
  */
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
-import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
 import { locales } from '@pisell/utils';
 import useEngineContext from "../../../hooks/useEngineContext";
 import { initFloorMapLayoutLocales } from "../utils/floorMapCanvasDisplay";
@@ -30,13 +29,12 @@ export function FloorMapEditTopBar(props) {
     saving = props.saving,
     saveError = props.saveError,
     layoutDirty = props.layoutDirty,
-    toggleFullscreen = props.toggleFullscreen,
     _props$isFullscreen = props.isFullscreen,
     isFullscreen = _props$isFullscreen === void 0 ? false : _props$isFullscreen,
-    _props$controls = props.controls,
-    controls = _props$controls === void 0 ? {} : _props$controls,
     extraActions = props.extraActions,
     canvasTabsBarTrailing = props.canvasTabsBarTrailing,
+    _props$hideCanvasTabs = props.hideCanvasTabs,
+    hideCanvasTabs = _props$hideCanvasTabs === void 0 ? false : _props$hideCanvasTabs,
     className = props.className;
   var engineCtx = useEngineContext();
   var engineLocale = (engineCtx === null || engineCtx === void 0 || (_engineCtx$engine = engineCtx.engine) === null || _engineCtx$engine === void 0 || (_engineCtx$engine = _engineCtx$engine.props) === null || _engineCtx$engine === void 0 ? void 0 : _engineCtx$engine.locale) || 'zh-CN';
@@ -44,10 +42,6 @@ export function FloorMapEditTopBar(props) {
     initFloorMapLayoutLocales(engineLocale);
     return {
       aria: locales.getText("".concat(I18N_TB, ".aria")),
-      fsEnterAria: locales.getText("".concat(I18N_TB, ".fullscreen-enter-aria")),
-      fsEnterTitle: locales.getText("".concat(I18N_TB, ".fullscreen-enter-title")),
-      fsExitAria: locales.getText("".concat(I18N_TB, ".fullscreen-exit-aria")),
-      fsExitTitle: locales.getText("".concat(I18N_TB, ".fullscreen-exit-title")),
       unsaved: locales.getText("".concat(I18N_TB, ".unsaved")),
       save: locales.getText("".concat(I18N_TB, ".save")),
       saving: locales.getText("".concat(I18N_TB, ".saving"))
@@ -56,19 +50,16 @@ export function FloorMapEditTopBar(props) {
 
   /** 浏览器全屏时顶栏不展示保存，改由侧栏承担（见 PisellFloorMapLayout 对 Toolbar onSave 的互斥逻辑） */
   var showSave = Boolean(onSave && config.canvasUi.canEdit) && !isFullscreen;
-  /** compact：有 toggle 时展示「进入全屏」 */
-  var showFullscreenEnter = Boolean(toggleFullscreen);
-  /** full 模式在全屏态下展示「退出全屏」 */
-  var showFullscreenExit = mode === 'full' && isFullscreen && Boolean(toggleFullscreen);
   var hasTrailing = canvasTabsBarTrailing != null && canvasTabsBarTrailing !== false;
-  var hasFullActions = showSave || showFullscreenExit || Boolean(saveError) || extraActions != null && extraActions !== false || hasTrailing;
+  var hasFullActions = showSave || Boolean(saveError) || extraActions != null && extraActions !== false || hasTrailing;
+  var tabsHiddenClass = hideCanvasTabs ? "".concat(PREFIX, "-edit-top-bar--tabs-hidden") : undefined;
   if (mode === 'compact') {
-    var showCompactActions = hasTrailing || showFullscreenEnter;
+    var showCompactActions = hasTrailing;
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames("".concat(PREFIX, "-edit-top-bar"), "".concat(PREFIX, "-edit-top-bar--compact"), className),
+      className: classNames("".concat(PREFIX, "-edit-top-bar"), "".concat(PREFIX, "-edit-top-bar--compact"), tabsHiddenClass, className),
       role: "toolbar",
       "aria-label": topBarLabels.aria
-    }, /*#__PURE__*/React.createElement("div", {
+    }, !hideCanvasTabs ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(PREFIX, "-edit-top-bar-tabs")
     }, /*#__PURE__*/React.createElement(CanvasTabs, {
       canvases: canvases,
@@ -79,23 +70,18 @@ export function FloorMapEditTopBar(props) {
       onRemoveCanvas: onRemoveCanvas,
       onRenameCanvas: onRenameCanvas,
       className: "".concat(PREFIX, "-edit-top-bar-canvas-tabs")
-    })), showCompactActions ? /*#__PURE__*/React.createElement("div", {
+    })) : null, showCompactActions ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(PREFIX, "-edit-top-bar-actions")
-    }, canvasTabsBarTrailing, showFullscreenEnter ? /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: classNames("".concat(PREFIX, "-edit-top-bar-btn"), "".concat(PREFIX, "-edit-top-bar-btn-ghost")),
-      onClick: function onClick() {
-        return toggleFullscreen === null || toggleFullscreen === void 0 ? void 0 : toggleFullscreen();
-      },
-      "aria-label": topBarLabels.fsEnterAria,
-      title: topBarLabels.fsEnterTitle
-    }, /*#__PURE__*/React.createElement(FullscreenOutlined, null)) : null) : null);
+    }, canvasTabsBarTrailing) : null);
+  }
+  if (hideCanvasTabs && !hasFullActions) {
+    return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(PREFIX, "-edit-top-bar"), "".concat(PREFIX, "-edit-top-bar--full-chrome"), className),
+    className: classNames("".concat(PREFIX, "-edit-top-bar"), "".concat(PREFIX, "-edit-top-bar--full-chrome"), tabsHiddenClass, className),
     role: "toolbar",
     "aria-label": topBarLabels.aria
-  }, /*#__PURE__*/React.createElement("div", {
+  }, !hideCanvasTabs ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-edit-top-bar-tabs")
   }, /*#__PURE__*/React.createElement(CanvasTabs, {
     canvases: canvases,
@@ -106,20 +92,12 @@ export function FloorMapEditTopBar(props) {
     onRemoveCanvas: onRemoveCanvas,
     onRenameCanvas: onRenameCanvas,
     className: "".concat(PREFIX, "-edit-top-bar-canvas-tabs")
-  })), hasFullActions ? /*#__PURE__*/React.createElement("div", {
+  })) : null, hasFullActions ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-edit-top-bar-actions")
   }, saveError ? /*#__PURE__*/React.createElement("span", {
     className: "".concat(PREFIX, "-edit-top-bar-error"),
     title: typeof saveError === 'string' ? saveError : saveError === null || saveError === void 0 ? void 0 : saveError.message
-  }, typeof saveError === 'string' ? saveError : saveError === null || saveError === void 0 ? void 0 : saveError.message) : null, canvasTabsBarTrailing, extraActions, showFullscreenExit ? /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: classNames("".concat(PREFIX, "-edit-top-bar-btn"), "".concat(PREFIX, "-edit-top-bar-btn-ghost")),
-    onClick: function onClick() {
-      return toggleFullscreen === null || toggleFullscreen === void 0 ? void 0 : toggleFullscreen();
-    },
-    "aria-label": topBarLabels.fsExitAria,
-    title: topBarLabels.fsExitTitle
-  }, /*#__PURE__*/React.createElement(FullscreenExitOutlined, null)) : null, showSave ? /*#__PURE__*/React.createElement("div", {
+  }, typeof saveError === 'string' ? saveError : saveError === null || saveError === void 0 ? void 0 : saveError.message) : null, canvasTabsBarTrailing, extraActions, showSave ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-edit-top-bar-save-group")
   }, layoutDirty ? /*#__PURE__*/React.createElement("span", {
     className: "".concat(PREFIX, "-edit-top-bar-dirty-badge"),

package/es/components/pisellFloorMapLayout/components/FloorMapEditTopBar.less

@@ -1,4 +1,4 @@
-/* 编辑态单行顶栏：画布 Tab + 保存 / 全屏 */
+/* 编辑态单行顶栏：画布 Tab + 保存 / 扩展操作 */
 .pisell-floor-map-layout-edit-top-bar {
   display: flex;
   flex-direction: row;
@@ -9,6 +9,16 @@
   border-bottom: 1px solid #f0f0f0;
   z-index: 3;
 
+  /** 单画布：无 Tab 区时操作区靠右，去掉左侧竖线 */
+
+  &--tabs-hidden {
+    justify-content: flex-end;
+
+    .pisell-floor-map-layout-edit-top-bar-actions {
+      border-left: none;
+    }
+  }
+
   &-tabs {
     flex: 1;
     min-width: 0;
@@ -100,8 +110,8 @@
     transition: border-color 0.2s, background 0.2s;
 
     &:hover:not(:disabled) {
-      border-color: #1677ff;
-      color: #1677ff;
+      border-color: var(--fmap-primary, #1677ff);
+      color: var(--fmap-primary, #1677ff);
     }
 
     &:disabled {
@@ -111,12 +121,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);
         color: #fff;
       }
     }

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

@@ -29,6 +29,11 @@ export interface ItemLayerProps<T extends FloorMapItemBase> {
     contentOffsetY?: number;
     /** 是否启用 hover 事件 */
     enableHover?: boolean;
+    /**
+     * 是否在 hover 时显示外沿描边（选中感高亮）。默认 true。
+     * 平面图只读态可由布局关闭，仅去掉描边，不影响 onItemHover。
+     */
+    itemHoverOutline?: boolean;
     /** 点击回调 */
     onItemClick?: (item: T, index: number, e: React.MouseEvent<HTMLElement>) => void;
     /** hover 进入 */

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

@@ -66,6 +66,8 @@ 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,
@@ -146,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,
@@ -169,7 +171,7 @@ export function ItemLayer(props) {
         onTouchStartCapture: handleItemTouchStartCapture
       }, renderItem(item, index));
     });
-  }, [items, renderItem, rowKey, cellSize, itemUnit, itemGap, enableHover, onItemClick, onItemHover, onItemLeave, getMergedItemWrapperStyle, handleItemPointerDownCapture, handleItemTouchStartCapture]);
+  }, [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

@@ -1,4 +1,9 @@
-/// <reference types="react" />
+/**
+ * ViewControls - 内置视图控制：默认仅缩放；可选复位、区域定位、全屏等
+ * 平面图（dockChrome）：Dock 折叠入口 + 展开条（含业务插槽、空闲自动收起）
+ * 非平面图：单条横栏，缩放与工具始终同排（无 Menu 折叠）
+ */
+import React from 'react';
 import type { FloorMapControlsConfig } from '../types';
 import './ViewControls.less';
 /** 从 react-zoom-pan-pinch 拿到的控制 API（由主组件传入） */
@@ -25,6 +30,17 @@ export interface ViewControlsProps {
     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;
+export declare function ViewControls(props: ViewControlsProps): JSX.Element | null;
 export default ViewControls;