@pisell/materials 6.11.19 → 6.11.21

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

@@ -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

@@ -23,5 +23,5 @@ export interface MapLayerProps {
     /** 自定义类名 */
     className?: string;
 }
-export declare function MapLayer(props: MapLayerProps): React.JSX.Element;
+export declare function MapLayer(props: MapLayerProps): JSX.Element;
 export default MapLayer;

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

@@ -1,5 +1,7 @@
 /**
- * ViewControls - 内置视图控制按钮：缩放（Stepper）、复位、区域定位
+ * ViewControls - 内置视图控制：默认仅缩放；可选复位、区域定位、全屏等
+ * 平面图（dockChrome）：Dock 折叠入口 + 展开条（含业务插槽、空闲自动收起）
+ * 非平面图：单条横栏，缩放与工具始终同排（无 Menu 折叠）
  */
 import React from 'react';
 import type { FloorMapControlsConfig } from '../types';
@@ -28,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): React.JSX.Element;
+export declare function ViewControls(props: ViewControlsProps): JSX.Element | null;
 export default ViewControls;

package/es/components/pisellFloorMapLayout/components/ViewControls.js

@@ -2,12 +2,20 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 /**
- * ViewControls - 内置视图控制按钮：缩放（Stepper）、复位、区域定位
+ * ViewControls - 内置视图控制：默认仅缩放；可选复位、区域定位、全屏等
+ * 平面图（dockChrome）：Dock 折叠入口 + 展开条（含业务插槽、空闲自动收起）
+ * 非平面图：单条横栏，缩放与工具始终同排（无 Menu 折叠）
  */
-import React from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import classNames from 'classnames';
-import { MinusOutlined, PlusOutlined, FullscreenOutlined, FullscreenExitOutlined, BorderInnerOutlined } from '@ant-design/icons';
+import { MinusOutlined, PlusOutlined, FullscreenOutlined, FullscreenExitOutlined, BorderInnerOutlined, LeftOutlined, RightOutlined, ReloadOutlined, ExpandOutlined } from '@ant-design/icons';
 import { locales } from '@pisell/utils';
 import "./ViewControls.less";
 var PREFIX = 'pisell-floor-map-layout';
@@ -26,65 +34,200 @@ export function ViewControls(props) {
     className = props.className,
     _props$mapGridVisible = props.mapGridVisible,
     mapGridVisible = _props$mapGridVisible === void 0 ? false : _props$mapGridVisible,
-    onToggleMapGrid = props.onToggleMapGrid;
+    onToggleMapGrid = props.onToggleMapGrid,
+    _props$dockChrome = props.dockChrome,
+    dockChrome = _props$dockChrome === void 0 ? false : _props$dockChrome,
+    dockExpandedTrailing = props.dockExpandedTrailing,
+    _props$autoCollapseDo = props.autoCollapseDockMs,
+    autoCollapseDockMs = _props$autoCollapseDo === void 0 ? 10000 : _props$autoCollapseDo;
   var showZoom = config.showZoom !== false;
   var showReset = config.showReset === true;
   var showFitBounds = config.showFitBounds === true;
   var showFullscreen = config.showFullscreen === true;
   var showGridToggle = config.showGridToggle === true && typeof onToggleMapGrid === 'function';
   var scalePercent = Math.round(scale * 100);
-  var showToolsCapsule = showReset || showFitBounds || showFullscreen || showGridToggle;
+  var showTools = showReset || showFitBounds || showFullscreen || showGridToggle;
+  var hasTrailingSlot = dockExpandedTrailing != null && dockExpandedTrailing !== false;
+  var dockHasExpandable = dockChrome && (showTools || hasTrailingSlot);
+  var showBar = showZoom || showTools || dockChrome && hasTrailingSlot;
+
+  /** Dock：展开条是否拉宽（与 CSS max-width 过渡联动） */
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    dockExpanded = _useState2[0],
+    setDockExpanded = _useState2[1];
+  /** 收起动画结束后再卸载展开条，保证 max-width 能从宽缩回 0 */
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dockPanelMounted = _useState4[0],
+    setDockPanelMounted = _useState4[1];
+  var dockExpandedRef = useRef(dockExpanded);
+  dockExpandedRef.current = dockExpanded;
+  var idleTimerRef = useRef(null);
+  var clearIdleTimer = useCallback(function () {
+    if (idleTimerRef.current != null) {
+      clearTimeout(idleTimerRef.current);
+      idleTimerRef.current = null;
+    }
+  }, []);
+  var scheduleDockCollapse = useCallback(function () {
+    clearIdleTimer();
+    if (!dockChrome || !dockHasExpandable || !dockExpanded || autoCollapseDockMs <= 0) {
+      return;
+    }
+    idleTimerRef.current = setTimeout(function () {
+      setDockExpanded(false);
+      idleTimerRef.current = null;
+    }, autoCollapseDockMs);
+  }, [dockChrome, dockHasExpandable, dockExpanded, autoCollapseDockMs, clearIdleTimer]);
+  useEffect(function () {
+    return function () {
+      return clearIdleTimer();
+    };
+  }, [clearIdleTimer]);
+  useEffect(function () {
+    if (dockExpanded && dockHasExpandable) {
+      scheduleDockCollapse();
+    }
+  }, [dockExpanded, dockHasExpandable, scheduleDockCollapse]);
+  var handleDockSlideTransitionEnd = useCallback(function (e) {
+    if (e.propertyName !== 'max-width' || e.target !== e.currentTarget) {
+      return;
+    }
+    if (!dockExpandedRef.current) {
+      setDockPanelMounted(false);
+    }
+  }, []);
+  var handleDockExpand = useCallback(function () {
+    setDockPanelMounted(true);
+    requestAnimationFrame(function () {
+      requestAnimationFrame(function () {
+        setDockExpanded(true);
+      });
+    });
+  }, []);
+  var handleDockCollapseClick = useCallback(function () {
+    clearIdleTimer();
+    setDockExpanded(false);
+  }, [clearIdleTimer]);
+  var handleDockBarPointerDown = useCallback(function () {
+    if (dockExpanded && autoCollapseDockMs > 0) {
+      scheduleDockCollapse();
+    }
+  }, [dockExpanded, autoCollapseDockMs, scheduleDockCollapse]);
+  var renderToolButtons = function renderToolButtons() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, showReset ? /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "".concat(PREFIX, "-view-controls-tool-btn"),
+      onClick: function onClick() {
+        return api.resetTransform();
+      },
+      "aria-label": locales.getText("".concat(I18N_VC, ".reset-aria"))
+    }, /*#__PURE__*/React.createElement(ReloadOutlined, null)) : null, showFitBounds && api.fitBounds ? /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "".concat(PREFIX, "-view-controls-tool-btn"),
+      onClick: function onClick() {
+        return api.fitBounds();
+      },
+      "aria-label": locales.getText("".concat(I18N_VC, ".fit-bounds-aria"))
+    }, /*#__PURE__*/React.createElement(ExpandOutlined, null)) : null, showGridToggle ? /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: classNames("".concat(PREFIX, "-view-controls-tool-btn"), _defineProperty({}, "".concat(PREFIX, "-view-controls-tool-btn--active"), mapGridVisible)),
+      onClick: function onClick() {
+        return onToggleMapGrid();
+      },
+      "aria-pressed": mapGridVisible,
+      "aria-label": locales.getText(mapGridVisible ? "".concat(I18N_VC, ".grid-hide-aria") : "".concat(I18N_VC, ".grid-show-aria"))
+    }, /*#__PURE__*/React.createElement(BorderInnerOutlined, null)) : null, showFullscreen && api.toggleFullscreen ? /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "".concat(PREFIX, "-view-controls-tool-btn"),
+      onClick: function onClick() {
+        return api.toggleFullscreen();
+      },
+      "aria-label": locales.getText(isFullscreen ? "".concat(I18N_VC, ".fullscreen-exit-aria") : "".concat(I18N_VC, ".fullscreen-aria"))
+    }, isFullscreen ? /*#__PURE__*/React.createElement(FullscreenExitOutlined, null) : /*#__PURE__*/React.createElement(FullscreenOutlined, null)) : null);
+  };
+  var renderDockExpandableBarContents = function renderDockExpandableBarContents() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, showZoom ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "".concat(PREFIX, "-view-controls-tool-btn"),
+      onClick: function onClick() {
+        return api.zoomOut();
+      },
+      "aria-label": locales.getText("".concat(I18N_VC, ".zoom-out-aria"))
+    }, /*#__PURE__*/React.createElement(MinusOutlined, null)), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(PREFIX, "-view-controls-zoom-value")
+    }, scalePercent, "%"), /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "".concat(PREFIX, "-view-controls-tool-btn"),
+      onClick: function onClick() {
+        return api.zoomIn();
+      },
+      "aria-label": locales.getText("".concat(I18N_VC, ".zoom-in-aria"))
+    }, /*#__PURE__*/React.createElement(PlusOutlined, null))) : null, showZoom && (showTools || hasTrailingSlot) ? /*#__PURE__*/React.createElement("div", {
+      className: "".concat(PREFIX, "-view-controls-bar-divider"),
+      "aria-hidden": true
+    }) : null, showTools ? renderToolButtons() : null, hasTrailingSlot ? /*#__PURE__*/React.createElement("div", {
+      className: "".concat(PREFIX, "-view-controls-dock-trailing")
+    }, dockExpandedTrailing) : null, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "".concat(PREFIX, "-view-controls-tool-btn"),
+      onClick: handleDockCollapseClick,
+      "aria-expanded": dockExpanded,
+      "aria-label": locales.getText("".concat(I18N_VC, ".collapse-tools-aria"))
+    }, /*#__PURE__*/React.createElement(LeftOutlined, null)));
+  };
+  if (!showBar) {
+    return null;
+  }
+  if (dockChrome && dockHasExpandable) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(PREFIX, "-view-controls"), "".concat(PREFIX, "-view-controls--dock"), className)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(PREFIX, "-view-controls-dock-row")
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: classNames("".concat(PREFIX, "-view-controls-dock-expand-btn"), _defineProperty({}, "".concat(PREFIX, "-view-controls-dock-expand-btn--panel-open"), dockExpanded)),
+      onClick: handleDockExpand,
+      "aria-expanded": dockExpanded,
+      "aria-hidden": dockExpanded,
+      tabIndex: dockExpanded ? -1 : 0,
+      "aria-label": locales.getText("".concat(I18N_VC, ".expand-tools-aria"))
+    }, /*#__PURE__*/React.createElement(RightOutlined, null)), dockPanelMounted ? /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(PREFIX, "-view-controls-dock-slide"), _defineProperty({}, "".concat(PREFIX, "-view-controls-dock-slide--open"), dockExpanded)),
+      onTransitionEnd: handleDockSlideTransitionEnd
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(PREFIX, "-view-controls-bar"), "".concat(PREFIX, "-view-controls-bar--dock")),
+      role: "group",
+      onPointerDown: handleDockBarPointerDown
+    }, renderDockExpandableBarContents())) : null));
+  }
+  var barClass = classNames("".concat(PREFIX, "-view-controls-bar"), _defineProperty({}, "".concat(PREFIX, "-view-controls-bar--dock"), dockChrome));
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(PREFIX, "-view-controls"), className)
-  }, showZoom && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(PREFIX, "-view-controls-zoom-stepper")
-  }, /*#__PURE__*/React.createElement("button", {
+    className: classNames("".concat(PREFIX, "-view-controls"), className, _defineProperty({}, "".concat(PREFIX, "-view-controls--dock"), dockChrome))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: barClass,
+    role: "group",
+    onPointerDown: dockChrome ? handleDockBarPointerDown : undefined
+  }, showZoom ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "".concat(PREFIX, "-view-controls-zoom-stepper-btn"),
+    className: "".concat(PREFIX, "-view-controls-tool-btn"),
     onClick: function onClick() {
       return api.zoomOut();
     },
     "aria-label": locales.getText("".concat(I18N_VC, ".zoom-out-aria"))
   }, /*#__PURE__*/React.createElement(MinusOutlined, null)), /*#__PURE__*/React.createElement("span", {
-    className: "".concat(PREFIX, "-view-controls-zoom-stepper-value")
+    className: "".concat(PREFIX, "-view-controls-zoom-value")
   }, scalePercent, "%"), /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "".concat(PREFIX, "-view-controls-zoom-stepper-btn"),
+    className: "".concat(PREFIX, "-view-controls-tool-btn"),
     onClick: function onClick() {
       return api.zoomIn();
     },
     "aria-label": locales.getText("".concat(I18N_VC, ".zoom-in-aria"))
-  }, /*#__PURE__*/React.createElement(PlusOutlined, null))), showToolsCapsule && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(PREFIX, "-view-controls-tools-capsule")
-  }, showReset && /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "".concat(PREFIX, "-view-controls-tool-btn"),
-    onClick: function onClick() {
-      return api.resetTransform();
-    },
-    "aria-label": locales.getText("".concat(I18N_VC, ".reset-aria"))
-  }, "\u27F2"), showFitBounds && api.fitBounds && /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "".concat(PREFIX, "-view-controls-tool-btn"),
-    onClick: function onClick() {
-      return api.fitBounds();
-    },
-    "aria-label": locales.getText("".concat(I18N_VC, ".fit-bounds-aria"))
-  }, "\u229E"), showGridToggle && /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: classNames("".concat(PREFIX, "-view-controls-tool-btn"), _defineProperty({}, "".concat(PREFIX, "-view-controls-tool-btn--active"), mapGridVisible)),
-    onClick: function onClick() {
-      return onToggleMapGrid();
-    },
-    "aria-pressed": mapGridVisible,
-    "aria-label": locales.getText(mapGridVisible ? "".concat(I18N_VC, ".grid-hide-aria") : "".concat(I18N_VC, ".grid-show-aria"))
-  }, /*#__PURE__*/React.createElement(BorderInnerOutlined, null)), showFullscreen && api.toggleFullscreen && /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "".concat(PREFIX, "-view-controls-tool-btn"),
-    onClick: function onClick() {
-      return api.toggleFullscreen();
-    },
-    "aria-label": locales.getText(isFullscreen ? "".concat(I18N_VC, ".fullscreen-exit-aria") : "".concat(I18N_VC, ".fullscreen-aria"))
-  }, isFullscreen ? /*#__PURE__*/React.createElement(FullscreenExitOutlined, null) : /*#__PURE__*/React.createElement(FullscreenOutlined, null))));
+  }, /*#__PURE__*/React.createElement(PlusOutlined, null))) : null, !dockChrome && showTools ? /*#__PURE__*/React.createElement(React.Fragment, null, showZoom ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-view-controls-bar-divider"),
+    "aria-hidden": true
+  }) : null, renderToolButtons()) : null));
 }
 export default ViewControls;