@pisell/materials 1.0.1056 → 1.0.1058

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;
+}

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

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellFloorMapLayout } from './PisellFloorMapLayout';
+/**
+ * PisellFloorMapLayout 楼层图布局
+ *
+ * 空间布局视图：在二维平面按坐标渲染资源（桌台/房间/工位等），
+ * 支持缩放、平移、复位、区域定位，仅负责展示与交互。
+ */
+declare const meta: Meta<typeof PisellFloorMapLayout>;
+export default meta;
+declare type Story = StoryObj<typeof PisellFloorMapLayout>;
+/**
+ * 默认 - 纯色底 + 简单格子（格子单位，默认 item 间距 8px）
+ */
+export declare const Default: Story;
+/**
+ * 显示网格线（item 间距由 mapLayer.gap 控制）
+ */
+export declare const WithGrid: Story;
+/**
+ * 开启平移 - 可拖拽画布
+ */
+export declare const WithPan: Story;
+export declare const WithShapes: Story;
+export declare const WithVariableSizes: Story;
+export declare const PixelUnits: Story;
+/**
+ * 点击与 Hover 事件
+ */
+export declare const WithEvents: Story;
+/**
+ * Ref 调用 - 外部按钮控制缩放/复位/区域定位
+ */
+export declare const WithRefControls: Story;
+/**
+ * 自定义控制按钮显隐
+ */
+export declare const ControlsHidden: Story;
+/**
+ * Figma 设计稿效果 - 餐厅桌台状态图（顶部 Tab + 图例参考 node 14131:6266，内容区不变）
+ */
+export declare const FigmaDesign: Story;