@pisell/materials 1.0.1055 → 1.0.1057

package/es/components/PisellLayouts/index.d.ts

@@ -16,17 +16,21 @@
 declare const PisellLayouts: {
     BasicGrid: <T>(props: import("../PisellBasicGrid").PisellBasicGridProps<T>) => JSX.Element;
     ScrollView: import("react").ForwardRefExoticComponent<Omit<import("../PisellScrollView").PisellScrollViewProps, "ref"> & import("react").RefAttributes<import("../PisellScrollView").PisellScrollViewRef>>;
+    FloorMapLayout: <T_1 extends import("../pisellFloorMapLayout").FloorMapItemBase = import("../pisellFloorMapLayout").FloorMapItemBase>(props: import("../pisellFloorMapLayout").PisellFloorMapLayoutProps<T_1> & {
+        ref?: import("react").Ref<import("../pisellFloorMapLayout").PisellFloorMapLayoutRef> | undefined;
+    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     Layout: import("../pisellLayout").CompoundedComponent;
     Content: import("react").FC<import("../pisellLayout/content").PisellContentProps>;
     Footer: import("react").FC<import("../pisellLayout/footer").PisellFooterProps>;
     Header: import("react").FC<import("../pisellLayout/header").PisellHeaderProps>;
     Sider: import("react").FC<import("../pisellLayout/sider").PisellSiderProps>;
-    Container: <T_1 extends import("../pisellContainer").RenderType>(props: import("../pisellContainer").PisellContainerProps<T_1>) => any;
+    Container: <T_2 extends import("../pisellContainer").RenderType>(props: import("../pisellContainer").PisellContainerProps<T_2>) => any;
     Row: (props: import("../pisellRow").PisellRowProps) => JSX.Element;
     ViewGrid: import("react").FC<import("../pisellViewGrid").PisellViewGridProps>;
 };
 export default PisellLayouts;
-export type { PisellBasicGridProps, } from '../PisellBasicGrid';
-export type { PisellScrollViewProps, } from '../PisellScrollView';
-export type { PisellLayoutProps, CompoundedComponent, } from '../pisellLayout';
-export type { PisellRowProps, } from '../pisellRow';
+export type { PisellBasicGridProps } from '../PisellBasicGrid';
+export type { PisellScrollViewProps } from '../PisellScrollView';
+export type { PisellFloorMapLayoutProps, PisellFloorMapLayoutRef, } from '../pisellFloorMapLayout';
+export type { PisellLayoutProps, CompoundedComponent } from '../pisellLayout';
+export type { PisellRowProps } from '../pisellRow';

package/es/components/PisellLayouts/index.js

@@ -1,14 +1,14 @@
 /**
  * PisellLayouts 命名空间
  * 布局组件集合
- * 
+ *
  * @example
  * import { PisellLayouts } from '@pisell/materials';
- * 
+ *
  * <PisellLayouts.BasicGrid columns={3} gap={16}>
  *   {items.map(item => <Card key={item.id} {...item} />)}
  * </PisellLayouts.BasicGrid>
- * 
+ *
  * <PisellLayouts.ScrollView direction="horizontal">
  *   <Content />
  * </PisellLayouts.ScrollView>
@@ -16,6 +16,7 @@
 
 import PisellBasicGrid from "../PisellBasicGrid";
 import PisellScrollView from "../PisellScrollView";
+import { PisellFloorMapLayout } from "../pisellFloorMapLayout";
 import PisellLayout from "../pisellLayout";
 import PisellContent from "../pisellLayout/content";
 import PisellFooter from "../pisellLayout/footer";
@@ -29,6 +30,7 @@ import PisellViewGrid from "../pisellViewGrid";
 var PisellLayouts = {
   BasicGrid: PisellBasicGrid,
   ScrollView: PisellScrollView,
+  FloorMapLayout: PisellFloorMapLayout,
   Layout: PisellLayout,
   Content: PisellContent,
   Footer: PisellFooter,

package/es/components/dataSourceComponents/dataSourceSubForm/index.js

@@ -10,7 +10,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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 _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
 import { Form } from 'antd';
 import { useMemoizedFn } from 'ahooks';
 import classNames from 'classnames';
@@ -141,8 +141,9 @@ var normalizeRecordSchema = function normalizeRecordSchema(xRecordSchema) {
  *
  * 值结构: { field1: v1, field2: v2 }
  */
-var DataSourceSubForm = function DataSourceSubForm(props) {
-  var _props$value = props.value,
+var DataSourceSubForm = /*#__PURE__*/forwardRef(function (props, ref) {
+  var activeKey = props.activeKey,
+    _props$value = props.value,
     value = _props$value === void 0 ? {} : _props$value,
     onChange = props.onChange,
     children = props.children,
@@ -155,6 +156,7 @@ var DataSourceSubForm = function DataSourceSubForm(props) {
   var _Form$useForm = Form.useForm(),
     _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
     innerForm = _Form$useForm2[0];
+  var activeKeyRef = useRef(activeKey);
 
   /** 确保 value 是对象 */
   var safeValue = useMemo(function () {
@@ -163,11 +165,22 @@ var DataSourceSubForm = function DataSourceSubForm(props) {
     }
     return {};
   }, [value]);
+  useImperativeHandle(ref, function () {
+    return {
+      getFieldsValue: function getFieldsValue() {
+        return innerForm.getFieldsValue();
+      }
+    };
+  });
 
   /** 当外部 value 变化时，同步到内部 Form */
   useEffect(function () {
+    if (activeKeyRef.current !== activeKey) {
+      activeKeyRef.current = activeKey;
+      innerForm.resetFields();
+    }
     innerForm.setFieldsValue(safeValue);
-  }, [safeValue, innerForm]);
+  }, [safeValue, innerForm, activeKey]);
 
   /** 内部 Form 值变化 -> 通知外部 */
   var handleValuesChange = useMemoizedFn(function (_, allValues) {
@@ -257,5 +270,5 @@ var DataSourceSubForm = function DataSourceSubForm(props) {
     className: classNames('pisell-data-source-sub-form', className),
     style: style
   }, renderFormContent());
-};
+});
 export default DataSourceSubForm;

package/es/components/dataSourceComponents/dataSourceSubForm/schema-full-example.json

@@ -319,20 +319,23 @@
       "x-component-props": {
         "direction": "horizontal"
       },
-      "enum": [
-        {
-          "label": "上架",
-          "value": "active"
-        },
-        {
-          "label": "下架",
-          "value": "inactive"
-        },
-        {
-          "label": "待审核",
-          "value": "pending"
-        }
-      ]
+      "x-data-source": {
+        "type": "default",
+        "options": [
+          {
+            "label": "上架",
+            "value": "active"
+          },
+          {
+            "label": "下架",
+            "value": "inactive"
+          },
+          {
+            "label": "待审核",
+            "value": "pending"
+          }
+        ]
+      }
     }
   },
   {
@@ -344,24 +347,27 @@
       "x-component-props": {
         "direction": "vertical"
       },
-      "enum": [
-        {
-          "label": "支持退换",
-          "value": "returnable"
-        },
-        {
-          "label": "支持货到付款",
-          "value": "cod"
-        },
-        {
-          "label": "支持发票",
-          "value": "invoice"
-        },
-        {
-          "label": "支持分期",
-          "value": "installment"
-        }
-      ]
+      "x-data-source": {
+        "type": "default",
+        "options": [
+          {
+            "label": "支持退换",
+            "value": "returnable"
+          },
+          {
+            "label": "支持货到付款",
+            "value": "cod"
+          },
+          {
+            "label": "支持发票",
+            "value": "invoice"
+          },
+          {
+            "label": "支持分期",
+            "value": "installment"
+          }
+        ]
+      }
     }
   },
   {

package/es/components/dataSourceComponents/fields/RecordListWrapper/WithMode.js

@@ -10,7 +10,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState, useRef } from 'react';
 import { withMode } from "../../dataSourceForm/utils";
 import ReadPretty from "./ReadPretty";
 import Tabs from "../Tabs/Tabs";
@@ -39,6 +39,9 @@ var RecordListWrapperBase = function RecordListWrapperBase(props) {
     renderMode = props.renderMode,
     __designMode = props.__designMode,
     defaultValue = props.defaultValue;
+  var isMounted = useRef(false);
+  var dataSourceSubFormRef = useRef(null);
+
   /** value 是 Map: { optionValue: { field1: v1 } } */
   var safeValue = useMemo(function () {
     if (value && _typeof(value) === 'object' && !Array.isArray(value)) {
@@ -77,6 +80,29 @@ var RecordListWrapperBase = function RecordListWrapperBase(props) {
     }
   }, [options]);
 
+  /**
+   * 初始化所有 option 的值：
+   * 以字段 schema 中的 uiSchema.default 作为每个 option 的默认值模板，
+   * 已有值（safeValue）优先覆盖，确保已填写的数据不丢失。
+   * 仅执行一次（由 isMounted 守卫），避免重复触发 onChange。
+   */
+  useEffect(function () {
+    if (isMounted.current) {
+      return;
+    }
+    if ((options === null || options === void 0 ? void 0 : options.length) > 0 && dataSourceSubFormRef.current) {
+      var _dataSourceSubFormRef, _dataSourceSubFormRef2, _dataSourceSubFormRef3;
+      var defaultValues = (_dataSourceSubFormRef = (_dataSourceSubFormRef2 = (_dataSourceSubFormRef3 = dataSourceSubFormRef.current).getFieldsValue) === null || _dataSourceSubFormRef2 === void 0 ? void 0 : _dataSourceSubFormRef2.call(_dataSourceSubFormRef3)) !== null && _dataSourceSubFormRef !== void 0 ? _dataSourceSubFormRef : {};
+      var completeValue = options.reduce(function (acc, option) {
+        if (option.value === null || option.value === undefined) return acc;
+        acc[String(option.value)] = _objectSpread(_objectSpread({}, defaultValues), safeValue[String(option.value)] || {});
+        return acc;
+      }, {});
+      _onChange === null || _onChange === void 0 || _onChange(completeValue);
+      isMounted.current = true;
+    }
+  }, [options, safeValue]);
+
   // ---- 上部: 插槽区域 ----
   var renderTopSlot = function renderTopSlot() {
     var slotElement = topSlot || slot;
@@ -96,6 +122,14 @@ var RecordListWrapperBase = function RecordListWrapperBase(props) {
         label: (_o$label = o.label) !== null && _o$label !== void 0 ? _o$label : String(o.value)
       });
     });
+    if (!options.length) {
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          color: '#999',
+          fontSize: 16
+        }
+      }, "\u6682\u65E0\u9009\u9879\uFF0C\u8BF7\u914D\u7F6E\u6570\u636E\u6E90\u3002");
+    }
     return /*#__PURE__*/React.createElement(Tabs, {
       options: tabOptions,
       value: activeKey,
@@ -108,31 +142,29 @@ var RecordListWrapperBase = function RecordListWrapperBase(props) {
 
   // ---- 下部: 委托给 DataSourceSubForm ----
   var renderBottom = function renderBottom() {
-    if (!options.length) {
-      return /*#__PURE__*/React.createElement("div", {
-        style: {
-          color: '#999',
-          fontSize: 12
-        }
-      }, "No options available. Configure xDataSource options first.");
-    }
-    return (
-      /*#__PURE__*/
-      /**
-       * key={activeKey}：Tab 切换时强制重新挂载 DataSourceSubForm，
-       * 使其用新的 value 初始化内部 Form，避免手动 setFieldsValue。
-       */
-      React.createElement(DataSourceSubForm, {
-        key: activeKey,
-        value: safeValue[activeKey],
-        onChange: function onChange(recordValue) {
-          return _onChange === null || _onChange === void 0 ? void 0 : _onChange(_objectSpread(_objectSpread({}, safeValue), {}, _defineProperty({}, activeKey, recordValue)));
-        },
-        xRecordSchema: xRecordSchema,
-        renderMode: renderMode,
-        __designMode: __designMode
-      }, children)
-    );
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DataSourceSubForm, {
+      activeKey: activeKey,
+      value: safeValue[activeKey],
+      onChange: function onChange(recordValue) {
+        return _onChange === null || _onChange === void 0 ? void 0 : _onChange(_objectSpread(_objectSpread({}, safeValue || {}), {}, _defineProperty({}, activeKey, recordValue || {})));
+      },
+      xRecordSchema: xRecordSchema,
+      renderMode: renderMode,
+      __designMode: __designMode
+    }, children), /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '100%',
+        height: 0,
+        visibility: 'hidden',
+        overflow: 'hidden'
+      }
+    }, /*#__PURE__*/React.createElement(DataSourceSubForm, {
+      key: "record-list-wrapper-default-value-form",
+      ref: dataSourceSubFormRef,
+      xRecordSchema: xRecordSchema,
+      renderMode: renderMode,
+      __designMode: __designMode
+    }, children)));
   };
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     style: {

package/es/components/dataSourceComponents/fields/Tabs/Tabs.js

@@ -58,7 +58,7 @@ var Tabs = function Tabs(_ref) {
   };
   var tabItems = useMemo(function () {
     return options.map(function (option) {
-      var isActive = selectedValue === option.value;
+      var isActive = selectedValue != null && selectedValue !== undefined && String(selectedValue) === String(option.value);
       var isDisabled = disabled || option.disabled;
       return /*#__PURE__*/React.createElement("div", {
         key: option.value,

package/es/components/dataSourceComponents/fields/Tabs/Tabs.less

@@ -7,10 +7,11 @@
   border-radius: 8px;
   padding: 2px;
   gap: 2px;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   box-sizing: border-box;
   color: rgba(0, 0, 0, .65);
   background-color: rgba(0, 0, 0, .04);
+  overflow-x: auto;
 
   &-item {
     min-height: 36px;

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

@@ -0,0 +1,12 @@
+/**
+ * PisellFloorMapLayout - 空间布局视图
+ * 在二维平面按坐标渲染资源，支持缩放/平移/复位，仅负责展示与交互
+ */
+import React from 'react';
+import type { FloorMapItemBase, PisellFloorMapLayoutProps, PisellFloorMapLayoutRef } from './types';
+import './PisellFloorMapLayout.less';
+declare const PisellFloorMapLayout: <T extends FloorMapItemBase = FloorMapItemBase>(props: PisellFloorMapLayoutProps<T> & {
+    ref?: React.Ref<PisellFloorMapLayoutRef> | undefined;
+}) => React.ReactElement;
+export { PisellFloorMapLayout };
+export default PisellFloorMapLayout;

package/es/components/pisellFloorMapLayout/PisellFloorMapLayout.js

@@ -0,0 +1,264 @@
+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 _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; }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+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; }
+/**
+ * PisellFloorMapLayout - 空间布局视图
+ * 在二维平面按坐标渲染资源，支持缩放/平移/复位，仅负责展示与交互
+ */
+import React, { useMemo, useRef, useImperativeHandle, useCallback, useState } from 'react';
+import classNames from 'classnames';
+import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
+import MapLayer from "./components/MapLayer";
+import ItemLayer from "./components/ItemLayer";
+import ViewControls from "./components/ViewControls";
+import "./PisellFloorMapLayout.less";
+var PREFIX = 'pisell-floor-map-layout';
+
+/** 默认每格像素 */
+var DEFAULT_CELL_SIZE = 64;
+
+/** 默认 item 间距（像素） */
+var DEFAULT_ITEM_GAP = 8;
+
+/**
+ * 将 mapLayer.gap 解析为像素数
+ */
+function gapToPx(gap) {
+  if (gap === undefined) return DEFAULT_ITEM_GAP;
+  if (typeof gap === 'number') return gap;
+  var match = String(gap).match(/^(\d+(?:\.\d+)?)\s*px?$/i);
+  return match ? Number(match[1]) : DEFAULT_ITEM_GAP;
+}
+
+/**
+ * 根据 items 计算内容区像素宽高
+ * - cell：按格子数 + cellSize + itemGap 计算
+ * - pixel：按 item 的 x/y/width/height 像素取边界
+ */
+function getContentSize(items, cellSize, itemGap, itemUnit) {
+  if (!items.length) {
+    if (itemUnit === 'pixel') {
+      return {
+        contentWidth: cellSize * 4,
+        contentHeight: cellSize * 3
+      };
+    }
+    var _g = itemGap;
+    return {
+      contentWidth: 4 * (cellSize + _g) + _g,
+      contentHeight: 3 * (cellSize + _g) + _g
+    };
+  }
+  if (itemUnit === 'pixel') {
+    var maxRight = 0;
+    var maxBottom = 0;
+    var _iterator = _createForOfIteratorHelper(items),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var _item$width, _item$height;
+        var item = _step.value;
+        var w = (_item$width = item.width) !== null && _item$width !== void 0 ? _item$width : cellSize;
+        var h = (_item$height = item.height) !== null && _item$height !== void 0 ? _item$height : cellSize;
+        maxRight = Math.max(maxRight, item.x + w);
+        maxBottom = Math.max(maxBottom, item.y + h);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return {
+      contentWidth: maxRight,
+      contentHeight: maxBottom
+    };
+  }
+  var maxX = 0;
+  var maxY = 0;
+  var _iterator2 = _createForOfIteratorHelper(items),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var _item$width2, _item$height2;
+      var _item = _step2.value;
+      var _w = (_item$width2 = _item.width) !== null && _item$width2 !== void 0 ? _item$width2 : 1;
+      var _h = (_item$height2 = _item.height) !== null && _item$height2 !== void 0 ? _item$height2 : 1;
+      maxX = Math.max(maxX, _item.x + _w);
+      maxY = Math.max(maxY, _item.y + _h);
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  var g = itemGap;
+  return {
+    contentWidth: maxX * (cellSize + g) + g,
+    contentHeight: maxY * (cellSize + g) + g
+  };
+}
+function PisellFloorMapLayoutInner(props, ref) {
+  var className = props.className,
+    style = props.style,
+    items = props.items,
+    renderItem = props.renderItem,
+    rowKey = props.rowKey,
+    mapLayer = props.mapLayer,
+    cellSizeProp = props.cellSize,
+    _props$itemUnit = props.itemUnit,
+    itemUnit = _props$itemUnit === void 0 ? 'cell' : _props$itemUnit,
+    _props$layoutMode = props.layoutMode,
+    layoutMode = _props$layoutMode === void 0 ? 'free' : _props$layoutMode,
+    gridLayout = props.gridLayout,
+    _props$zoom = props.zoom,
+    zoom = _props$zoom === void 0 ? {} : _props$zoom,
+    _props$pan = props.pan,
+    pan = _props$pan === void 0 ? {} : _props$pan,
+    _props$controls = props.controls,
+    controls = _props$controls === void 0 ? {} : _props$controls,
+    _props$enableHover = props.enableHover,
+    enableHover = _props$enableHover === void 0 ? true : _props$enableHover,
+    onItemClick = props.onItemClick,
+    onItemHover = props.onItemHover,
+    onItemLeave = props.onItemLeave;
+
+  /** 缩放平移库暴露的 API，由 TransformWrapper 的 render 参数注入 */
+  var transformRef = useRef(null);
+  var containerRef = useRef(null);
+  var cellSize = cellSizeProp !== null && cellSizeProp !== void 0 ? cellSizeProp : DEFAULT_CELL_SIZE;
+  var itemGap = useMemo(function () {
+    return gapToPx(mapLayer === null || mapLayer === void 0 ? void 0 : mapLayer.gap);
+  }, [mapLayer === null || mapLayer === void 0 ? void 0 : mapLayer.gap]);
+  var _useMemo = useMemo(function () {
+      return getContentSize(items, cellSize, itemGap, itemUnit);
+    }, [items, cellSize, itemGap, itemUnit]),
+    contentWidth = _useMemo.contentWidth,
+    contentHeight = _useMemo.contentHeight;
+  var zoomConfig = useMemo(function () {
+    var _zoom$defaultScale, _zoom$min, _zoom$max, _zoom$step;
+    return {
+      initialScale: (_zoom$defaultScale = zoom.defaultScale) !== null && _zoom$defaultScale !== void 0 ? _zoom$defaultScale : 1,
+      minScale: (_zoom$min = zoom.min) !== null && _zoom$min !== void 0 ? _zoom$min : 0.5,
+      maxScale: (_zoom$max = zoom.max) !== null && _zoom$max !== void 0 ? _zoom$max : 2,
+      step: (_zoom$step = zoom.step) !== null && _zoom$step !== void 0 ? _zoom$step : 0.1
+    };
+  }, [zoom.defaultScale, zoom.min, zoom.max, zoom.step]);
+  var _useState = useState(zoomConfig.initialScale),
+    _useState2 = _slicedToArray(_useState, 2),
+    scale = _useState2[0],
+    setScale = _useState2[1];
+  var fitBounds = useCallback(function () {
+    var _zoom$max2;
+    var ctx = transformRef.current;
+    var container = containerRef.current;
+    if (!ctx || !container) return;
+    var wrapper = container.querySelector('.react-transform-wrapper');
+    if (!wrapper) return;
+    var wrapperRect = wrapper.getBoundingClientRect();
+    var scale = Math.min(wrapperRect.width / contentWidth, wrapperRect.height / contentHeight, (_zoom$max2 = zoom.max) !== null && _zoom$max2 !== void 0 ? _zoom$max2 : 2);
+    var x = (wrapperRect.width - contentWidth * scale) / 2;
+    var y = (wrapperRect.height - contentHeight * scale) / 2;
+    ctx.setTransform(x, y, scale);
+  }, [contentWidth, contentHeight, zoom.max]);
+  useImperativeHandle(ref, function () {
+    return {
+      zoomIn: function zoomIn() {
+        var _transformRef$current;
+        return (_transformRef$current = transformRef.current) === null || _transformRef$current === void 0 ? void 0 : _transformRef$current.zoomIn();
+      },
+      zoomOut: function zoomOut() {
+        var _transformRef$current2;
+        return (_transformRef$current2 = transformRef.current) === null || _transformRef$current2 === void 0 ? void 0 : _transformRef$current2.zoomOut();
+      },
+      reset: function reset() {
+        var _transformRef$current3;
+        return (_transformRef$current3 = transformRef.current) === null || _transformRef$current3 === void 0 ? void 0 : _transformRef$current3.resetTransform();
+      },
+      fitBounds: fitBounds
+    };
+  }, [fitBounds]);
+  var controlsApi = useMemo(function () {
+    return {
+      zoomIn: function zoomIn() {
+        var _transformRef$current4;
+        return (_transformRef$current4 = transformRef.current) === null || _transformRef$current4 === void 0 ? void 0 : _transformRef$current4.zoomIn();
+      },
+      zoomOut: function zoomOut() {
+        var _transformRef$current5;
+        return (_transformRef$current5 = transformRef.current) === null || _transformRef$current5 === void 0 ? void 0 : _transformRef$current5.zoomOut();
+      },
+      resetTransform: function resetTransform() {
+        var _transformRef$current6;
+        return (_transformRef$current6 = transformRef.current) === null || _transformRef$current6 === void 0 ? void 0 : _transformRef$current6.resetTransform();
+      },
+      fitBounds: fitBounds
+    };
+  }, [fitBounds]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: classNames(PREFIX, className),
+    style: style
+  }, /*#__PURE__*/React.createElement(TransformWrapper, {
+    initialScale: zoomConfig.initialScale,
+    minScale: zoomConfig.minScale,
+    maxScale: zoomConfig.maxScale,
+    step: zoomConfig.step,
+    panning: {
+      disabled: !pan.enabled
+    },
+    doubleClick: {
+      disabled: true
+    },
+    onTransformed: function onTransformed(_, state) {
+      return setScale(state.scale);
+    }
+  }, function (ctx) {
+    transformRef.current = ctx;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TransformComponent, {
+      wrapperStyle: {
+        width: '100%',
+        height: '100%',
+        backgroundColor: '#F2F4F7',
+        overflow: 'visible'
+      },
+      contentStyle: {
+        width: contentWidth,
+        height: contentHeight,
+        minWidth: contentWidth,
+        minHeight: contentHeight,
+        position: 'relative',
+        overflow: 'visible',
+        backgroundColor: '#F2F4F7'
+      }
+    }, /*#__PURE__*/React.createElement(MapLayer, {
+      config: mapLayer,
+      contentWidth: contentWidth,
+      contentHeight: contentHeight,
+      cellSize: cellSize
+    }), /*#__PURE__*/React.createElement(ItemLayer, {
+      items: items,
+      renderItem: renderItem,
+      rowKey: rowKey,
+      cellSize: cellSize,
+      itemUnit: itemUnit,
+      itemGap: itemGap,
+      contentWidth: contentWidth,
+      contentHeight: contentHeight,
+      enableHover: enableHover,
+      onItemClick: onItemClick,
+      onItemHover: onItemHover,
+      onItemLeave: onItemLeave
+    })), /*#__PURE__*/React.createElement(ViewControls, {
+      api: controlsApi,
+      config: controls,
+      scale: scale
+    }));
+  }));
+}
+var PisellFloorMapLayout = /*#__PURE__*/React.forwardRef(PisellFloorMapLayoutInner);
+export { PisellFloorMapLayout };
+export default PisellFloorMapLayout;

package/es/components/pisellFloorMapLayout/PisellFloorMapLayout.less

@@ -0,0 +1,7 @@
+.pisell-floor-map-layout {
+  position: relative;
+  width: 100%;
+  height: 400px;
+  overflow: hidden;
+  background: #fafafa;
+}