@pisell/materials 1.0.1056 → 1.0.1058

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

package/lib/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;