@pisell/materials 1.8.24 → 1.8.25

package/lib/components/pisellFloorMapLayout/components/FloorMapEditQuickActions.js

@@ -0,0 +1,108 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellFloorMapLayout/components/FloorMapEditQuickActions.tsx
+var FloorMapEditQuickActions_exports = {};
+__export(FloorMapEditQuickActions_exports, {
+  FloorMapEditQuickActions: () => FloorMapEditQuickActions
+});
+module.exports = __toCommonJS(FloorMapEditQuickActions_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var PREFIX = "pisell-floor-map-layout";
+function FloorMapEditQuickActions(props) {
+  const { className, labels, isLocked, onToggleLock, onDuplicate, onDelete } = props;
+  const stopBubble = (0, import_react.useCallback)((e) => {
+    e.stopPropagation();
+  }, []);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      role: "toolbar",
+      "aria-label": labels.ariaToolbar,
+      className: (0, import_classnames.default)(
+        `${PREFIX}-edit-quick-actions`,
+        isLocked && `${PREFIX}-edit-quick-actions--locked`,
+        className
+      ),
+      onPointerDown: (e) => e.stopPropagation()
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { title: isLocked ? labels.unlock : labels.lock }, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        type: "text",
+        size: "large",
+        icon: isLocked ? /* @__PURE__ */ import_react.default.createElement(import_icons.LockOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.UnlockOutlined, null),
+        onClick: (e) => {
+          stopBubble(e);
+          onToggleLock();
+        },
+        "aria-pressed": isLocked
+      }
+    )),
+    /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { title: labels.duplicate }, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        type: "text",
+        size: "large",
+        icon: /* @__PURE__ */ import_react.default.createElement(import_icons.CopyOutlined, null),
+        onClick: (e) => {
+          stopBubble(e);
+          onDuplicate();
+        }
+      }
+    )),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Popconfirm,
+      {
+        title: labels.popTitle,
+        description: labels.popDesc,
+        onConfirm: () => onDelete(),
+        okText: labels.okDelete,
+        cancelText: labels.cancel,
+        okButtonProps: { danger: true }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { title: labels.delete }, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Button,
+        {
+          type: "text",
+          danger: true,
+          size: "large",
+          icon: /* @__PURE__ */ import_react.default.createElement(import_icons.DeleteOutlined, null),
+          onClick: stopBubble
+        }
+      ))
+    )
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FloorMapEditQuickActions
+});

package/lib/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/lib/components/pisellFloorMapLayout/components/FloorMapEditTopBar.js

@@ -35,7 +35,6 @@ __export(FloorMapEditTopBar_exports, {
 module.exports = __toCommonJS(FloorMapEditTopBar_exports);
 var import_react = __toESM(require("react"));
 var import_classnames = __toESM(require("classnames"));
-var import_icons = require("@ant-design/icons");
 var import_utils = require("@pisell/utils");
 var import_useEngineContext = __toESM(require("../../../hooks/useEngineContext"));
 var import_floorMapCanvasDisplay = require("../utils/floorMapCanvasDisplay");
@@ -59,11 +58,10 @@ function FloorMapEditTopBar(props) {
     saving,
     saveError,
     layoutDirty,
-    toggleFullscreen,
     isFullscreen = false,
-    controls = {},
     extraActions,
     canvasTabsBarTrailing,
+    hideCanvasTabs = false,
     className
   } = props;
   const engineCtx = (0, import_useEngineContext.default)();
@@ -72,34 +70,30 @@ function FloorMapEditTopBar(props) {
     (0, import_floorMapCanvasDisplay.initFloorMapLayoutLocales)(engineLocale);
     return {
       aria: import_utils.locales.getText(`${I18N_TB}.aria`),
-      fsEnterAria: import_utils.locales.getText(`${I18N_TB}.fullscreen-enter-aria`),
-      fsEnterTitle: import_utils.locales.getText(`${I18N_TB}.fullscreen-enter-title`),
-      fsExitAria: import_utils.locales.getText(`${I18N_TB}.fullscreen-exit-aria`),
-      fsExitTitle: import_utils.locales.getText(`${I18N_TB}.fullscreen-exit-title`),
       unsaved: import_utils.locales.getText(`${I18N_TB}.unsaved`),
       save: import_utils.locales.getText(`${I18N_TB}.save`),
       saving: import_utils.locales.getText(`${I18N_TB}.saving`)
     };
   }, [engineLocale]);
   const showSave = Boolean(onSave && config.canvasUi.canEdit) && !isFullscreen;
-  const showFullscreenEnter = Boolean(toggleFullscreen);
-  const showFullscreenExit = mode === "full" && isFullscreen && Boolean(toggleFullscreen);
   const hasTrailing = canvasTabsBarTrailing != null && canvasTabsBarTrailing !== false;
-  const hasFullActions = showSave || showFullscreenExit || Boolean(saveError) || extraActions != null && extraActions !== false || hasTrailing;
+  const hasFullActions = showSave || Boolean(saveError) || extraActions != null && extraActions !== false || hasTrailing;
+  const tabsHiddenClass = hideCanvasTabs ? `${PREFIX}-edit-top-bar--tabs-hidden` : void 0;
   if (mode === "compact") {
-    const showCompactActions = hasTrailing || showFullscreenEnter;
+    const showCompactActions = hasTrailing;
     return /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
         className: (0, import_classnames.default)(
           `${PREFIX}-edit-top-bar`,
           `${PREFIX}-edit-top-bar--compact`,
+          tabsHiddenClass,
           className
         ),
         role: "toolbar",
         "aria-label": topBarLabels.aria
       },
-      /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-top-bar-tabs` }, /* @__PURE__ */ import_react.default.createElement(
+      !hideCanvasTabs ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-top-bar-tabs` }, /* @__PURE__ */ import_react.default.createElement(
         import_CanvasTabs.CanvasTabs,
         {
           canvases,
@@ -111,35 +105,26 @@ function FloorMapEditTopBar(props) {
           onRenameCanvas,
           className: `${PREFIX}-edit-top-bar-canvas-tabs`
         }
-      )),
-      showCompactActions ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-top-bar-actions` }, canvasTabsBarTrailing, showFullscreenEnter ? /* @__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: () => toggleFullscreen == null ? void 0 : toggleFullscreen(),
-          "aria-label": topBarLabels.fsEnterAria,
-          title: topBarLabels.fsEnterTitle
-        },
-        /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenOutlined, null)
-      ) : null) : null
+      )) : null,
+      showCompactActions ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-top-bar-actions` }, canvasTabsBarTrailing) : null
     );
   }
+  if (hideCanvasTabs && !hasFullActions) {
+    return null;
+  }
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
       className: (0, import_classnames.default)(
         `${PREFIX}-edit-top-bar`,
         `${PREFIX}-edit-top-bar--full-chrome`,
+        tabsHiddenClass,
         className
       ),
       role: "toolbar",
       "aria-label": topBarLabels.aria
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-top-bar-tabs` }, /* @__PURE__ */ import_react.default.createElement(
+    !hideCanvasTabs ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-top-bar-tabs` }, /* @__PURE__ */ import_react.default.createElement(
       import_CanvasTabs.CanvasTabs,
       {
         canvases,
@@ -151,7 +136,7 @@ function FloorMapEditTopBar(props) {
         onRenameCanvas,
         className: `${PREFIX}-edit-top-bar-canvas-tabs`
       }
-    )),
+    )) : null,
     hasFullActions ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-top-bar-actions` }, saveError ? /* @__PURE__ */ import_react.default.createElement(
       "span",
       {
@@ -159,20 +144,7 @@ function FloorMapEditTopBar(props) {
         title: typeof saveError === "string" ? saveError : saveError == null ? void 0 : saveError.message
       },
       typeof saveError === "string" ? saveError : saveError == null ? void 0 : saveError.message
-    ) : null, canvasTabsBarTrailing, extraActions, showFullscreenExit ? /* @__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: () => toggleFullscreen == null ? void 0 : toggleFullscreen(),
-        "aria-label": topBarLabels.fsExitAria,
-        title: topBarLabels.fsExitTitle
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenExitOutlined, null)
-    ) : null, showSave ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-top-bar-save-group` }, layoutDirty ? /* @__PURE__ */ import_react.default.createElement(
+    ) : null, canvasTabsBarTrailing, extraActions, showSave ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-top-bar-save-group` }, layoutDirty ? /* @__PURE__ */ import_react.default.createElement(
       "span",
       {
         className: `${PREFIX}-edit-top-bar-dirty-badge`,

package/lib/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/lib/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/lib/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/lib/components/pisellFloorMapLayout/components/ItemLayer.js

@@ -70,6 +70,7 @@ function ItemLayer(props) {
     contentOffsetX = 0,
     contentOffsetY = 0,
     enableHover = true,
+    itemHoverOutline = true,
     onItemClick,
     onItemHover,
     onItemLeave,
@@ -145,7 +146,8 @@ function ItemLayer(props) {
         {
           key,
           className: (0, import_classnames.default)(`${PREFIX}-item`, {
-            [`${PREFIX}-item-hoverable`]: enableHover
+            [`${PREFIX}-item-hoverable`]: enableHover,
+            [`${PREFIX}-item-hover-outline`]: enableHover && itemHoverOutline
           }),
           style: {
             position: "absolute",
@@ -175,6 +177,7 @@ function ItemLayer(props) {
     itemUnit,
     itemGap,
     enableHover,
+    itemHoverOutline,
     onItemClick,
     onItemHover,
     onItemLeave,

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