@pisell/materials 1.0.1055 → 1.0.1057

package/es/components/pisellMultipleSelect/components/EditView.js

@@ -8,9 +8,9 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-/**
- * PisellMultipleSelect - EditView (编辑态视图)
- * 正常可编辑状态下的渲染
+/**
+ * PisellMultipleSelect - EditView (编辑态视图)
+ * 正常可编辑状态下的渲染
  */
 
 import React, { forwardRef, useMemo, useCallback, useState, useRef } from 'react';

package/es/index.d.ts

@@ -14,7 +14,7 @@ export type { PisellSingleLineTextProps, PisellLongTextProps, PisellNumberProps,
  * <PisellMetrics.MetricCard title="Total Sales" value={1580} />
  */
 export { default as PisellMetrics } from './components/PisellMetrics';
-export type { PisellMetricCardProps, PisellStatisticProps } from './components/PisellMetrics';
+export type { PisellMetricCardProps, PisellStatisticProps, } from './components/PisellMetrics';
 /**
  * PisellLayouts - 布局组件命名空间
  * @example
@@ -22,7 +22,7 @@ export type { PisellMetricCardProps, PisellStatisticProps } from './components/P
  * <PisellLayouts.BasicGrid columns={3}>{children}</PisellLayouts.BasicGrid>
  */
 export { default as PisellLayouts } from './components/PisellLayouts';
-export type { PisellBasicGridProps, PisellScrollViewProps, PisellLayoutProps, CompoundedComponent, PisellRowProps, } from './components/PisellLayouts';
+export type { PisellBasicGridProps, PisellScrollViewProps, PisellFloorMapLayoutProps, PisellFloorMapLayoutRef, PisellLayoutProps, CompoundedComponent, PisellRowProps, } from './components/PisellLayouts';
 export { Affix, Alert, Anchor, Avatar, Breadcrumb, Card, Carousel, Col, ColorPicker, Descriptions, Divider, Empty, Grid, InputNumber, Mentions, Menu, Pagination, Popconfirm, Popover, Progress, Rate, Result, Row, Space, Spin, Statistic, Steps, Switch, Tag, Timeline, Tooltip, Transfer, Tree, message, notification, version, } from 'antd';
 export { default as AutoComplete } from './components/auto-complete';
 export { default as AutoCompleteNumber } from './components/auto-complete-number';
@@ -114,6 +114,7 @@ export { default as PisellRow } from './components/pisellRow';
 export { default as Div } from './components/div';
 export { default as PisellBasicGrid } from './components/PisellBasicGrid';
 export { default as PisellScrollView } from './components/PisellScrollView';
+export { PisellFloorMapLayout } from './components/pisellFloorMapLayout';
 export { default as PisellViewGrid } from './components/pisellViewGrid';
 export { default as Table } from './components/table';
 export { default as PisellGridView } from './components/pisellGridPro/GridView';
@@ -143,7 +144,7 @@ export { default as CropPhoto } from './components/cropPhoto';
 export { default as PisellUpload } from './components/pisellUpload';
 export { default as Translation } from './components/translation';
 export { PisellLookup } from './components/pisellLookup';
-export type { PisellLookupProps, PisellLookupRef } from './components/pisellLookup';
+export type { PisellLookupProps, PisellLookupRef, } from './components/pisellLookup';
 export { PisellFind } from './components/pisellFind';
 export type { PisellFindProps, PisellFindRef } from './components/pisellFind';
 export { default as DataSourceForm } from './components/dataSourceComponents/dataSourceForm';

package/es/index.js

@@ -127,6 +127,7 @@ export { default as Div } from "./components/div";
 export { default as PisellBasicGrid } from "./components/PisellBasicGrid";
 // 类型已在 PisellLayouts 命名空间中导出
 export { default as PisellScrollView } from "./components/PisellScrollView";
+export { PisellFloorMapLayout } from "./components/pisellFloorMapLayout";
 // 类型已在 PisellLayouts 命名空间中导出
 export { default as PisellViewGrid } from "./components/pisellViewGrid";
 

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

@@ -17,17 +17,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/lib/components/PisellLayouts/index.js

@@ -34,6 +34,7 @@ __export(PisellLayouts_exports, {
 module.exports = __toCommonJS(PisellLayouts_exports);
 var import_PisellBasicGrid = __toESM(require("../PisellBasicGrid"));
 var import_PisellScrollView = __toESM(require("../PisellScrollView"));
+var import_pisellFloorMapLayout = require("../pisellFloorMapLayout");
 var import_pisellLayout = __toESM(require("../pisellLayout"));
 var import_content = __toESM(require("../pisellLayout/content"));
 var import_footer = __toESM(require("../pisellLayout/footer"));
@@ -45,6 +46,7 @@ var import_pisellViewGrid = __toESM(require("../pisellViewGrid"));
 var PisellLayouts = {
   BasicGrid: import_PisellBasicGrid.default,
   ScrollView: import_PisellScrollView.default,
+  FloorMapLayout: import_pisellFloorMapLayout.PisellFloorMapLayout,
   Layout: import_pisellLayout.default,
   Content: import_content.default,
   Footer: import_footer.default,

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

@@ -115,8 +115,9 @@ var normalizeRecordSchema = (xRecordSchema) => {
   }
   return [];
 };
-var DataSourceSubForm = (props) => {
+var DataSourceSubForm = (0, import_react.forwardRef)((props, ref) => {
   const {
+    activeKey,
     value = {},
     onChange,
     children,
@@ -127,15 +128,27 @@ var DataSourceSubForm = (props) => {
     style
   } = props;
   const [innerForm] = import_antd.Form.useForm();
+  const activeKeyRef = (0, import_react.useRef)(activeKey);
   const safeValue = (0, import_react.useMemo)(() => {
     if (value && typeof value === "object" && !Array.isArray(value)) {
       return value;
     }
     return {};
   }, [value]);
+  (0, import_react.useImperativeHandle)(ref, () => {
+    return {
+      getFieldsValue: () => {
+        return innerForm.getFieldsValue();
+      }
+    };
+  });
   (0, import_react.useEffect)(() => {
+    if (activeKeyRef.current !== activeKey) {
+      activeKeyRef.current = activeKey;
+      innerForm.resetFields();
+    }
     innerForm.setFieldsValue(safeValue);
-  }, [safeValue, innerForm]);
+  }, [safeValue, innerForm, activeKey]);
   const handleValuesChange = (0, import_ahooks.useMemoizedFn)(
     (_, allValues) => {
       onChange == null ? void 0 : onChange({ ...safeValue, ...allValues });
@@ -212,5 +225,5 @@ var DataSourceSubForm = (props) => {
     },
     renderFormContent()
   );
-};
+});
 var dataSourceSubForm_default = DataSourceSubForm;

package/lib/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/lib/components/dataSourceComponents/fields/RecordListWrapper/WithMode.js

@@ -50,6 +50,8 @@ var RecordListWrapperBase = (props) => {
     __designMode,
     defaultValue
   } = props;
+  const isMounted = (0, import_react.useRef)(false);
+  const dataSourceSubFormRef = (0, import_react.useRef)(null);
   const safeValue = (0, import_react.useMemo)(() => {
     if (value && typeof value === "object" && !Array.isArray(value)) {
       return value;
@@ -74,6 +76,28 @@ var RecordListWrapperBase = (props) => {
       );
     }
   }, [options]);
+  (0, import_react.useEffect)(() => {
+    var _a, _b;
+    if (isMounted.current) {
+      return;
+    }
+    if ((options == null ? void 0 : options.length) > 0 && dataSourceSubFormRef.current) {
+      const defaultValues = ((_b = (_a = dataSourceSubFormRef.current).getFieldsValue) == null ? void 0 : _b.call(_a)) ?? {};
+      const completeValue = options.reduce(
+        (acc, option) => {
+          if (option.value === null || option.value === void 0) return acc;
+          acc[String(option.value)] = {
+            ...defaultValues,
+            ...safeValue[String(option.value)] || {}
+          };
+          return acc;
+        },
+        {}
+      );
+      onChange == null ? void 0 : onChange(completeValue);
+      isMounted.current = true;
+    }
+  }, [options, safeValue]);
   const renderTopSlot = () => {
     const slotElement = topSlot || slot;
     if (slotElement && import_react.default.isValidElement(slotElement)) {
@@ -87,6 +111,9 @@ var RecordListWrapperBase = (props) => {
       ...o,
       label: o.label ?? String(o.value)
     }));
+    if (!options.length) {
+      return /* @__PURE__ */ import_react.default.createElement("div", { style: { color: "#999", fontSize: 16 } }, "暂无选项，请配置数据源。");
+    }
     return /* @__PURE__ */ import_react.default.createElement(
       import_Tabs.default,
       {
@@ -98,27 +125,28 @@ var RecordListWrapperBase = (props) => {
     );
   };
   const renderBottom = () => {
-    if (!options.length) {
-      return /* @__PURE__ */ import_react.default.createElement("div", { style: { color: "#999", fontSize: 12 } }, "No options available. Configure xDataSource options first.");
-    }
-    return (
-      /**
-       * key={activeKey}：Tab 切换时强制重新挂载 DataSourceSubForm，
-       * 使其用新的 value 初始化内部 Form，避免手动 setFieldsValue。
-       */
-      /* @__PURE__ */ import_react.default.createElement(
-        import_dataSourceSubForm.default,
-        {
-          key: activeKey,
-          value: safeValue[activeKey],
-          onChange: (recordValue) => onChange == null ? void 0 : onChange({ ...safeValue, [activeKey]: recordValue }),
-          xRecordSchema,
-          renderMode,
-          __designMode
-        },
-        children
-      )
-    );
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+      import_dataSourceSubForm.default,
+      {
+        activeKey,
+        value: safeValue[activeKey],
+        onChange: (recordValue) => onChange == null ? void 0 : onChange({ ...safeValue || {}, [activeKey]: recordValue || {} }),
+        xRecordSchema,
+        renderMode,
+        __designMode
+      },
+      children
+    ), /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "100%", height: 0, visibility: "hidden", overflow: "hidden" } }, /* @__PURE__ */ import_react.default.createElement(
+      import_dataSourceSubForm.default,
+      {
+        key: "record-list-wrapper-default-value-form",
+        ref: dataSourceSubFormRef,
+        xRecordSchema,
+        renderMode,
+        __designMode
+      },
+      children
+    )));
   };
   return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 12 } }, renderTopSlot()), renderBottom());
 };

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

@@ -56,7 +56,7 @@ var Tabs = ({
   };
   const tabItems = (0, import_react.useMemo)(() => {
     return options.map((option) => {
-      const isActive = selectedValue === option.value;
+      const isActive = selectedValue != null && selectedValue !== void 0 && String(selectedValue) === String(option.value);
       const isDisabled = disabled || option.disabled;
       return /* @__PURE__ */ import_react.default.createElement(
         "div",

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

@@ -0,0 +1,257 @@
+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/PisellFloorMapLayout.tsx
+var PisellFloorMapLayout_exports = {};
+__export(PisellFloorMapLayout_exports, {
+  PisellFloorMapLayout: () => PisellFloorMapLayout,
+  default: () => PisellFloorMapLayout_default
+});
+module.exports = __toCommonJS(PisellFloorMapLayout_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_react_zoom_pan_pinch = require("react-zoom-pan-pinch");
+var import_MapLayer = __toESM(require("./components/MapLayer"));
+var import_ItemLayer = __toESM(require("./components/ItemLayer"));
+var import_ViewControls = __toESM(require("./components/ViewControls"));
+var import_PisellFloorMapLayout = require("./PisellFloorMapLayout.less");
+var PREFIX = "pisell-floor-map-layout";
+var DEFAULT_CELL_SIZE = 64;
+var DEFAULT_ITEM_GAP = 8;
+function gapToPx(gap) {
+  if (gap === void 0) return DEFAULT_ITEM_GAP;
+  if (typeof gap === "number") return gap;
+  const match = String(gap).match(/^(\d+(?:\.\d+)?)\s*px?$/i);
+  return match ? Number(match[1]) : DEFAULT_ITEM_GAP;
+}
+function getContentSize(items, cellSize, itemGap, itemUnit) {
+  if (!items.length) {
+    if (itemUnit === "pixel") {
+      return { contentWidth: cellSize * 4, contentHeight: cellSize * 3 };
+    }
+    const g2 = itemGap;
+    return {
+      contentWidth: 4 * (cellSize + g2) + g2,
+      contentHeight: 3 * (cellSize + g2) + g2
+    };
+  }
+  if (itemUnit === "pixel") {
+    let maxRight = 0;
+    let maxBottom = 0;
+    for (const item of items) {
+      const w = item.width ?? cellSize;
+      const h = item.height ?? cellSize;
+      maxRight = Math.max(maxRight, item.x + w);
+      maxBottom = Math.max(maxBottom, item.y + h);
+    }
+    return { contentWidth: maxRight, contentHeight: maxBottom };
+  }
+  let maxX = 0;
+  let maxY = 0;
+  for (const item of items) {
+    const w = item.width ?? 1;
+    const h = item.height ?? 1;
+    maxX = Math.max(maxX, item.x + w);
+    maxY = Math.max(maxY, item.y + h);
+  }
+  const g = itemGap;
+  return {
+    contentWidth: maxX * (cellSize + g) + g,
+    contentHeight: maxY * (cellSize + g) + g
+  };
+}
+function PisellFloorMapLayoutInner(props, ref) {
+  const {
+    className,
+    style,
+    items,
+    renderItem,
+    rowKey,
+    mapLayer,
+    cellSize: cellSizeProp,
+    itemUnit = "cell",
+    layoutMode = "free",
+    gridLayout,
+    zoom = {},
+    pan = {},
+    controls = {},
+    enableHover = true,
+    onItemClick,
+    onItemHover,
+    onItemLeave
+  } = props;
+  const transformRef = (0, import_react.useRef)(null);
+  const containerRef = (0, import_react.useRef)(null);
+  const cellSize = cellSizeProp ?? DEFAULT_CELL_SIZE;
+  const itemGap = (0, import_react.useMemo)(
+    () => gapToPx(mapLayer == null ? void 0 : mapLayer.gap),
+    [mapLayer == null ? void 0 : mapLayer.gap]
+  );
+  const { contentWidth, contentHeight } = (0, import_react.useMemo)(
+    () => getContentSize(items, cellSize, itemGap, itemUnit),
+    [items, cellSize, itemGap, itemUnit]
+  );
+  const zoomConfig = (0, import_react.useMemo)(
+    () => ({
+      initialScale: zoom.defaultScale ?? 1,
+      minScale: zoom.min ?? 0.5,
+      maxScale: zoom.max ?? 2,
+      step: zoom.step ?? 0.1
+    }),
+    [zoom.defaultScale, zoom.min, zoom.max, zoom.step]
+  );
+  const [scale, setScale] = (0, import_react.useState)(zoomConfig.initialScale);
+  const fitBounds = (0, import_react.useCallback)(() => {
+    const ctx = transformRef.current;
+    const container = containerRef.current;
+    if (!ctx || !container) return;
+    const wrapper = container.querySelector(".react-transform-wrapper");
+    if (!wrapper) return;
+    const wrapperRect = wrapper.getBoundingClientRect();
+    const scale2 = Math.min(
+      wrapperRect.width / contentWidth,
+      wrapperRect.height / contentHeight,
+      zoom.max ?? 2
+    );
+    const x = (wrapperRect.width - contentWidth * scale2) / 2;
+    const y = (wrapperRect.height - contentHeight * scale2) / 2;
+    ctx.setTransform(x, y, scale2);
+  }, [contentWidth, contentHeight, zoom.max]);
+  (0, import_react.useImperativeHandle)(
+    ref,
+    () => ({
+      zoomIn: () => {
+        var _a;
+        return (_a = transformRef.current) == null ? void 0 : _a.zoomIn();
+      },
+      zoomOut: () => {
+        var _a;
+        return (_a = transformRef.current) == null ? void 0 : _a.zoomOut();
+      },
+      reset: () => {
+        var _a;
+        return (_a = transformRef.current) == null ? void 0 : _a.resetTransform();
+      },
+      fitBounds
+    }),
+    [fitBounds]
+  );
+  const controlsApi = (0, import_react.useMemo)(
+    () => ({
+      zoomIn: () => {
+        var _a;
+        return (_a = transformRef.current) == null ? void 0 : _a.zoomIn();
+      },
+      zoomOut: () => {
+        var _a;
+        return (_a = transformRef.current) == null ? void 0 : _a.zoomOut();
+      },
+      resetTransform: () => {
+        var _a;
+        return (_a = transformRef.current) == null ? void 0 : _a.resetTransform();
+      },
+      fitBounds
+    }),
+    [fitBounds]
+  );
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: containerRef,
+      className: (0, import_classnames.default)(PREFIX, className),
+      style
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_react_zoom_pan_pinch.TransformWrapper,
+      {
+        initialScale: zoomConfig.initialScale,
+        minScale: zoomConfig.minScale,
+        maxScale: zoomConfig.maxScale,
+        step: zoomConfig.step,
+        panning: { disabled: !pan.enabled },
+        doubleClick: { disabled: true },
+        onTransformed: (_, state) => setScale(state.scale)
+      },
+      (ctx) => {
+        transformRef.current = ctx;
+        return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+          import_react_zoom_pan_pinch.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__ */ import_react.default.createElement(
+            import_MapLayer.default,
+            {
+              config: mapLayer,
+              contentWidth,
+              contentHeight,
+              cellSize
+            }
+          ),
+          /* @__PURE__ */ import_react.default.createElement(
+            import_ItemLayer.default,
+            {
+              items,
+              renderItem,
+              rowKey,
+              cellSize,
+              itemUnit,
+              itemGap,
+              contentWidth,
+              contentHeight,
+              enableHover,
+              onItemClick,
+              onItemHover,
+              onItemLeave
+            }
+          )
+        ), /* @__PURE__ */ import_react.default.createElement(import_ViewControls.default, { api: controlsApi, config: controls, scale }));
+      }
+    )
+  );
+}
+var PisellFloorMapLayout = import_react.default.forwardRef(PisellFloorMapLayoutInner);
+var PisellFloorMapLayout_default = PisellFloorMapLayout;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellFloorMapLayout
+});

package/lib/components/pisellFloorMapLayout/PisellFloorMapLayout.less

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