@pisell/materials 1.8.24 → 1.8.26

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

@@ -31,5 +31,5 @@ export interface FloorMapToolbarProps {
     /** 触摸拖放结束后吞掉按钮 click，避免误触切换落点模式 */
     consumeToolbarClickIfTouchDrag?: () => boolean;
 }
-export declare function FloorMapToolbar(props: FloorMapToolbarProps): JSX.Element;
+export declare function FloorMapToolbar(props: FloorMapToolbarProps): React.JSX.Element;
 export default FloorMapToolbar;

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 进入 */
@@ -44,5 +49,5 @@ export interface ItemLayerProps<T extends FloorMapItemBase> {
     onInteractionChange?: (active: boolean) => void;
     className?: string;
 }
-export declare function ItemLayer<T extends FloorMapItemBase>(props: ItemLayerProps<T>): JSX.Element;
+export declare function ItemLayer<T extends FloorMapItemBase>(props: ItemLayerProps<T>): React.JSX.Element;
 export default ItemLayer;

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): React.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): React.JSX.Element | null;
 export default ViewControls;

package/lib/components/pisellFloorMapLayout/components/ViewControls.js

@@ -48,7 +48,10 @@ function ViewControls(props) {
     isFullscreen = false,
     className,
     mapGridVisible = false,
-    onToggleMapGrid
+    onToggleMapGrid,
+    dockChrome = false,
+    dockExpandedTrailing,
+    autoCollapseDockMs = 1e4
   } = props;
   const showZoom = config.showZoom !== false;
   const showReset = config.showReset === true;
@@ -56,26 +59,74 @@ function ViewControls(props) {
   const showFullscreen = config.showFullscreen === true;
   const showGridToggle = config.showGridToggle === true && typeof onToggleMapGrid === "function";
   const scalePercent = Math.round(scale * 100);
-  const showToolsCapsule = showReset || showFitBounds || showFullscreen || showGridToggle;
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${PREFIX}-view-controls`, className) }, showZoom && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-view-controls-zoom-stepper` }, /* @__PURE__ */ import_react.default.createElement(
-    "button",
-    {
-      type: "button",
-      className: `${PREFIX}-view-controls-zoom-stepper-btn`,
-      onClick: () => api.zoomOut(),
-      "aria-label": import_utils.locales.getText(`${I18N_VC}.zoom-out-aria`)
+  const showTools = showReset || showFitBounds || showFullscreen || showGridToggle;
+  const hasTrailingSlot = dockExpandedTrailing != null && dockExpandedTrailing !== false;
+  const dockHasExpandable = dockChrome && (showTools || hasTrailingSlot);
+  const showBar = showZoom || showTools || dockChrome && hasTrailingSlot;
+  const [dockExpanded, setDockExpanded] = (0, import_react.useState)(false);
+  const [dockPanelMounted, setDockPanelMounted] = (0, import_react.useState)(false);
+  const dockExpandedRef = (0, import_react.useRef)(dockExpanded);
+  dockExpandedRef.current = dockExpanded;
+  const idleTimerRef = (0, import_react.useRef)(null);
+  const clearIdleTimer = (0, import_react.useCallback)(() => {
+    if (idleTimerRef.current != null) {
+      clearTimeout(idleTimerRef.current);
+      idleTimerRef.current = null;
+    }
+  }, []);
+  const scheduleDockCollapse = (0, import_react.useCallback)(() => {
+    clearIdleTimer();
+    if (!dockChrome || !dockHasExpandable || !dockExpanded || autoCollapseDockMs <= 0) {
+      return;
+    }
+    idleTimerRef.current = setTimeout(() => {
+      setDockExpanded(false);
+      idleTimerRef.current = null;
+    }, autoCollapseDockMs);
+  }, [
+    dockChrome,
+    dockHasExpandable,
+    dockExpanded,
+    autoCollapseDockMs,
+    clearIdleTimer
+  ]);
+  (0, import_react.useEffect)(() => {
+    return () => clearIdleTimer();
+  }, [clearIdleTimer]);
+  (0, import_react.useEffect)(() => {
+    if (dockExpanded && dockHasExpandable) {
+      scheduleDockCollapse();
+    }
+  }, [dockExpanded, dockHasExpandable, scheduleDockCollapse]);
+  const handleDockSlideTransitionEnd = (0, import_react.useCallback)(
+    (e) => {
+      if (e.propertyName !== "max-width" || e.target !== e.currentTarget) {
+        return;
+      }
+      if (!dockExpandedRef.current) {
+        setDockPanelMounted(false);
+      }
     },
-    /* @__PURE__ */ import_react.default.createElement(import_icons.MinusOutlined, null)
-  ), /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-view-controls-zoom-stepper-value` }, scalePercent, "%"), /* @__PURE__ */ import_react.default.createElement(
-    "button",
-    {
-      type: "button",
-      className: `${PREFIX}-view-controls-zoom-stepper-btn`,
-      onClick: () => api.zoomIn(),
-      "aria-label": import_utils.locales.getText(`${I18N_VC}.zoom-in-aria`)
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null)
-  )), showToolsCapsule && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-view-controls-tools-capsule` }, showReset && /* @__PURE__ */ import_react.default.createElement(
+    []
+  );
+  const handleDockExpand = (0, import_react.useCallback)(() => {
+    setDockPanelMounted(true);
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        setDockExpanded(true);
+      });
+    });
+  }, []);
+  const handleDockCollapseClick = (0, import_react.useCallback)(() => {
+    clearIdleTimer();
+    setDockExpanded(false);
+  }, [clearIdleTimer]);
+  const handleDockBarPointerDown = (0, import_react.useCallback)(() => {
+    if (dockExpanded && autoCollapseDockMs > 0) {
+      scheduleDockCollapse();
+    }
+  }, [dockExpanded, autoCollapseDockMs, scheduleDockCollapse]);
+  const renderToolButtons = () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, showReset ? /* @__PURE__ */ import_react.default.createElement(
     "button",
     {
       type: "button",
@@ -83,8 +134,8 @@ function ViewControls(props) {
       onClick: () => api.resetTransform(),
       "aria-label": import_utils.locales.getText(`${I18N_VC}.reset-aria`)
     },
-    "⟲"
-  ), showFitBounds && api.fitBounds && /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement(import_icons.ReloadOutlined, null)
+  ) : null, showFitBounds && api.fitBounds ? /* @__PURE__ */ import_react.default.createElement(
     "button",
     {
       type: "button",
@@ -92,8 +143,8 @@ function ViewControls(props) {
       onClick: () => api.fitBounds(),
       "aria-label": import_utils.locales.getText(`${I18N_VC}.fit-bounds-aria`)
     },
-    "⊞"
-  ), showGridToggle && /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement(import_icons.ExpandOutlined, null)
+  ) : null, showGridToggle ? /* @__PURE__ */ import_react.default.createElement(
     "button",
     {
       type: "button",
@@ -107,7 +158,7 @@ function ViewControls(props) {
       )
     },
     /* @__PURE__ */ import_react.default.createElement(import_icons.BorderInnerOutlined, null)
-  ), showFullscreen && api.toggleFullscreen && /* @__PURE__ */ import_react.default.createElement(
+  ) : null, showFullscreen && api.toggleFullscreen ? /* @__PURE__ */ import_react.default.createElement(
     "button",
     {
       type: "button",
@@ -118,7 +169,131 @@ function ViewControls(props) {
       )
     },
     isFullscreen ? /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenExitOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenOutlined, null)
-  )));
+  ) : null);
+  const renderDockExpandableBarContents = () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, showZoom ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: `${PREFIX}-view-controls-tool-btn`,
+      onClick: () => api.zoomOut(),
+      "aria-label": import_utils.locales.getText(`${I18N_VC}.zoom-out-aria`)
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_icons.MinusOutlined, null)
+  ), /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-view-controls-zoom-value` }, scalePercent, "%"), /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: `${PREFIX}-view-controls-tool-btn`,
+      onClick: () => api.zoomIn(),
+      "aria-label": import_utils.locales.getText(`${I18N_VC}.zoom-in-aria`)
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null)
+  )) : null, showZoom && (showTools || hasTrailingSlot) ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-view-controls-bar-divider`, "aria-hidden": true }) : null, showTools ? renderToolButtons() : null, hasTrailingSlot ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-view-controls-dock-trailing` }, dockExpandedTrailing) : null, /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: `${PREFIX}-view-controls-tool-btn`,
+      onClick: handleDockCollapseClick,
+      "aria-expanded": dockExpanded,
+      "aria-label": import_utils.locales.getText(`${I18N_VC}.collapse-tools-aria`)
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_icons.LeftOutlined, null)
+  ));
+  if (!showBar) {
+    return null;
+  }
+  if (dockChrome && dockHasExpandable) {
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: (0, import_classnames.default)(
+          `${PREFIX}-view-controls`,
+          `${PREFIX}-view-controls--dock`,
+          className
+        )
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-view-controls-dock-row` }, /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          className: (0, import_classnames.default)(`${PREFIX}-view-controls-dock-expand-btn`, {
+            [`${PREFIX}-view-controls-dock-expand-btn--panel-open`]: dockExpanded
+          }),
+          onClick: handleDockExpand,
+          "aria-expanded": dockExpanded,
+          "aria-hidden": dockExpanded,
+          tabIndex: dockExpanded ? -1 : 0,
+          "aria-label": import_utils.locales.getText(`${I18N_VC}.expand-tools-aria`)
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_icons.RightOutlined, null)
+      ), dockPanelMounted ? /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: (0, import_classnames.default)(`${PREFIX}-view-controls-dock-slide`, {
+            [`${PREFIX}-view-controls-dock-slide--open`]: dockExpanded
+          }),
+          onTransitionEnd: handleDockSlideTransitionEnd
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: (0, import_classnames.default)(
+              `${PREFIX}-view-controls-bar`,
+              `${PREFIX}-view-controls-bar--dock`
+            ),
+            role: "group",
+            onPointerDown: handleDockBarPointerDown
+          },
+          renderDockExpandableBarContents()
+        )
+      ) : null)
+    );
+  }
+  const barClass = (0, import_classnames.default)(`${PREFIX}-view-controls-bar`, {
+    [`${PREFIX}-view-controls-bar--dock`]: dockChrome
+  });
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)(`${PREFIX}-view-controls`, className, {
+        [`${PREFIX}-view-controls--dock`]: dockChrome
+      })
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: barClass,
+        role: "group",
+        onPointerDown: dockChrome ? handleDockBarPointerDown : void 0
+      },
+      showZoom ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          className: `${PREFIX}-view-controls-tool-btn`,
+          onClick: () => api.zoomOut(),
+          "aria-label": import_utils.locales.getText(`${I18N_VC}.zoom-out-aria`)
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_icons.MinusOutlined, null)
+      ), /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-view-controls-zoom-value` }, scalePercent, "%"), /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          className: `${PREFIX}-view-controls-tool-btn`,
+          onClick: () => api.zoomIn(),
+          "aria-label": import_utils.locales.getText(`${I18N_VC}.zoom-in-aria`)
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null)
+      )) : null,
+      !dockChrome && showTools ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, showZoom ? /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: `${PREFIX}-view-controls-bar-divider`,
+          "aria-hidden": true
+        }
+      ) : null, renderToolButtons()) : null
+    )
+  );
 }
 var ViewControls_default = ViewControls;
 // Annotate the CommonJS export names for ESM import in node: