@pisell/materials 6.11.16 → 6.11.18

package/es/components/pisellFloorMapLayout/components/EditableItemLayer.js

@@ -0,0 +1,341 @@
+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); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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; }
+/**
+ * EditableItemLayer - 编辑态图元层：拖拽、缩放、选中、吸附
+ */
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
+function isSceneLayoutTransformLocked(item) {
+  var _item$_sceneElement;
+  return Boolean((_item$_sceneElement = item._sceneElement) === null || _item$_sceneElement === void 0 ? void 0 : _item$_sceneElement.layoutTransformLocked);
+}
+import { snapRect } from "../utils/snap";
+import "./EditableItemLayer.less";
+var PREFIX = 'pisell-floor-map-layout';
+var DRAG_THRESHOLD = 4;
+var RESIZE_HANDLE_SIZE = 8;
+function getItemKey(item, index, rowKey) {
+  var _rowKey;
+  if (!rowKey) return item.id;
+  if (typeof rowKey === 'string') return String((_rowKey = item[rowKey]) !== null && _rowKey !== void 0 ? _rowKey : item.id);
+  return rowKey(item, index);
+}
+function getShapeStyle() {
+  var shape = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'rect';
+  switch (shape) {
+    case 'circle':
+      return {
+        borderRadius: '50%'
+      };
+    case 'triangle':
+      return {
+        clipPath: 'polygon(50% 0%, 0% 100%, 100% 100%)'
+      };
+    default:
+      return {};
+  }
+}
+export function EditableItemLayer(props) {
+  var items = props.items,
+    renderItem = props.renderItem,
+    rowKey = props.rowKey,
+    cellSize = props.cellSize,
+    _props$itemUnit = props.itemUnit,
+    itemUnit = _props$itemUnit === void 0 ? 'pixel' : _props$itemUnit,
+    _props$itemGap = props.itemGap,
+    itemGap = _props$itemGap === void 0 ? 0 : _props$itemGap,
+    contentWidth = props.contentWidth,
+    contentHeight = props.contentHeight,
+    _props$contentOffsetX = props.contentOffsetX,
+    contentOffsetX = _props$contentOffsetX === void 0 ? 0 : _props$contentOffsetX,
+    _props$contentOffsetY = props.contentOffsetY,
+    contentOffsetY = _props$contentOffsetY === void 0 ? 0 : _props$contentOffsetY,
+    selectedId = props.selectedId,
+    onSelect = props.onSelect,
+    onUpdateItem = props.onUpdateItem,
+    _props$snapStep = props.snapStep,
+    snapStep = _props$snapStep === void 0 ? 0 : _props$snapStep,
+    _props$scale = props.scale,
+    scale = _props$scale === void 0 ? 1 : _props$scale,
+    onInteractionChange = props.onInteractionChange,
+    getMergedItemWrapperStyle = props.getMergedItemWrapperStyle,
+    className = props.className;
+  var contentRef = useRef(null);
+  var liveRectRef = useRef(null);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    interaction = _useState2[0],
+    setInteraction = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    liveRect = _useState4[0],
+    setLiveRect = _useState4[1];
+  var getItemStyle = useCallback(function (item, index) {
+    var merged = item;
+    var isPixel = itemUnit === 'pixel';
+    var g = itemGap !== null && itemGap !== void 0 ? itemGap : 0;
+    var left;
+    var top;
+    var width;
+    var height;
+    if (isPixel) {
+      var _item$width, _item$height;
+      width = (_item$width = item.width) !== null && _item$width !== void 0 ? _item$width : cellSize;
+      height = (_item$height = item.height) !== null && _item$height !== void 0 ? _item$height : cellSize;
+      left = item.x;
+      top = item.y;
+    } else {
+      var _item$width2, _item$height2;
+      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;
+      left = g > 0 ? item.x * (cellSize + g) + g : item.x * cellSize;
+      top = g > 0 ? item.y * (cellSize + g) + g : item.y * cellSize;
+      width = g > 0 ? w * cellSize + (w - 1) * g : w * cellSize;
+      height = g > 0 ? h * cellSize + (h - 1) * g : h * cellSize;
+    }
+    if (liveRect && liveRect.id === item.id) {
+      left = liveRect.x;
+      top = liveRect.y;
+      width = liveRect.width;
+      height = liveRect.height;
+    }
+    return {
+      left: left,
+      top: top,
+      width: width,
+      height: height
+    };
+  }, [itemUnit, cellSize, itemGap, liveRect]);
+
+  /** 使用 Pointer Events，触控/笔/鼠标均可拖拽；仅靠 mouse 事件在触控设备上无法连续触发 move/up */
+  var handlePointerDown = useCallback(function (e, item, index) {
+    if (e.button !== 0) return;
+    if (e.target.closest(".".concat(PREFIX, "-editable-resize-handle"))) return;
+    var merged = item;
+    if (isSceneLayoutTransformLocked(merged)) {
+      return;
+    }
+    e.stopPropagation();
+    e.preventDefault();
+    onInteractionChange === null || onInteractionChange === void 0 || onInteractionChange(true);
+    var style = getItemStyle(item, index);
+    setInteraction({
+      type: 'drag',
+      itemId: item.id,
+      startX: e.clientX,
+      startY: e.clientY,
+      itemX: style.left,
+      itemY: style.top,
+      itemW: style.width,
+      itemH: style.height
+    });
+  }, [getItemStyle, onInteractionChange]);
+  var handleResizePointerDown = useCallback(function (e, itemId, handle) {
+    if (e.button !== 0) return;
+    var item = items.find(function (i) {
+      return i.id === itemId;
+    });
+    if (!item) return;
+    if (isSceneLayoutTransformLocked(item)) {
+      return;
+    }
+    e.stopPropagation();
+    e.preventDefault();
+    onInteractionChange === null || onInteractionChange === void 0 || onInteractionChange(true);
+    var idx = items.indexOf(item);
+    var style = getItemStyle(item, idx);
+    setInteraction({
+      type: 'resize',
+      itemId: itemId,
+      handle: handle,
+      startX: e.clientX,
+      startY: e.clientY,
+      startW: style.width,
+      startH: style.height,
+      startItemX: style.left,
+      startItemY: style.top
+    });
+  }, [items, getItemStyle, onInteractionChange]);
+  var handleCanvasClick = useCallback(function (e) {
+    if (e.target === e.currentTarget) onSelect(null);
+  }, [onSelect]);
+  React.useEffect(function () {
+    if (!interaction) return;
+    var onMove = function onMove(e) {
+      if (interaction.type === 'drag') {
+        var dx = (e.clientX - interaction.startX) / scale;
+        var dy = (e.clientY - interaction.startY) / scale;
+        var next = {
+          x: interaction.itemX + dx,
+          y: interaction.itemY + dy,
+          width: interaction.itemW,
+          height: interaction.itemH
+        };
+        liveRectRef.current = next;
+        setLiveRect(_objectSpread({
+          id: interaction.itemId
+        }, next));
+      } else {
+        var _dx = (e.clientX - interaction.startX) / scale;
+        var _dy = (e.clientY - interaction.startY) / scale;
+        var handle = interaction.handle,
+          startW = interaction.startW,
+          startH = interaction.startH,
+          startItemX = interaction.startItemX,
+          startItemY = interaction.startItemY;
+        var w = startW;
+        var h = startH;
+        var x = startItemX;
+        var y = startItemY;
+        if (handle.includes('e')) w = Math.max(20, startW + _dx);
+        if (handle.includes('w')) {
+          w = Math.max(20, startW - _dx);
+          x = startItemX + _dx;
+        }
+        if (handle.includes('s')) h = Math.max(20, startH + _dy);
+        if (handle.includes('n')) {
+          h = Math.max(20, startH - _dy);
+          y = startItemY + _dy;
+        }
+        var _next = {
+          x: x,
+          y: y,
+          width: w,
+          height: h
+        };
+        liveRectRef.current = _next;
+        setLiveRect(_objectSpread({
+          id: interaction.itemId
+        }, _next));
+      }
+    };
+    var onUp = function onUp() {
+      var current = interaction;
+      if (!current) return;
+      var last = liveRectRef.current;
+      onInteractionChange === null || onInteractionChange === void 0 || onInteractionChange(false);
+      setLiveRect(null);
+      liveRectRef.current = null;
+      setInteraction(null);
+      if (current.type === 'drag') {
+        if (last && (Math.abs(last.x - current.itemX) > DRAG_THRESHOLD || Math.abs(last.y - current.itemY) > DRAG_THRESHOLD)) {
+          var snapped = snapRect(last.x, last.y, 0, 0, snapStep);
+          onUpdateItem(current.itemId, {
+            x: Math.round(snapped.x),
+            y: Math.round(snapped.y)
+          });
+        }
+      } else {
+        if (last) {
+          var _snapped = snapRect(last.x, last.y, last.width, last.height, snapStep);
+          onUpdateItem(current.itemId, {
+            x: Math.round(_snapped.x),
+            y: Math.round(_snapped.y),
+            width: Math.round(_snapped.width),
+            height: Math.round(_snapped.height)
+          });
+        }
+      }
+    };
+    var opts = {
+      capture: true
+    };
+    document.addEventListener('pointermove', onMove, opts);
+    document.addEventListener('pointerup', onUp, opts);
+    document.addEventListener('pointercancel', onUp, opts);
+    return function () {
+      document.removeEventListener('pointermove', onMove, opts);
+      document.removeEventListener('pointerup', onUp, opts);
+      document.removeEventListener('pointercancel', onUp, opts);
+    };
+  }, [interaction, scale, snapStep, onUpdateItem, onInteractionChange]);
+  var handleItemClick = useCallback(function (e, item) {
+    if (interaction) return;
+    onSelect(item.id);
+  }, [interaction, onSelect]);
+  var itemNodes = useMemo(function () {
+    var sorted = _toConsumableArray(items).sort(function (a, b) {
+      var _a$zIndex, _b$zIndex;
+      return ((_a$zIndex = a.zIndex) !== null && _a$zIndex !== void 0 ? _a$zIndex : 0) - ((_b$zIndex = b.zIndex) !== null && _b$zIndex !== void 0 ? _b$zIndex : 0);
+    });
+    return sorted.map(function (item, index) {
+      var _item$zIndex;
+      var key = getItemKey(item, index, rowKey);
+      var merged = item;
+      var style = getItemStyle(item, index);
+      var shapeStyle = getShapeStyle(item.shape);
+      var isSelected = selectedId === item.id;
+      return /*#__PURE__*/React.createElement("div", {
+        key: key,
+        className: classNames("".concat(PREFIX, "-editable-item"), _defineProperty({}, "".concat(PREFIX, "-editable-item-selected"), isSelected)),
+        style: _objectSpread(_objectSpread({
+          position: 'absolute',
+          left: style.left,
+          top: style.top,
+          width: style.width,
+          height: style.height,
+          boxSizing: 'border-box',
+          zIndex: (_item$zIndex = item.zIndex) !== null && _item$zIndex !== void 0 ? _item$zIndex : 0
+        }, shapeStyle), getMergedItemWrapperStyle === null || getMergedItemWrapperStyle === void 0 ? void 0 : getMergedItemWrapperStyle(item, index)),
+        onPointerDown: function onPointerDown(e) {
+          return handlePointerDown(e, item, index);
+        },
+        onClick: function onClick(e) {
+          return handleItemClick(e, item);
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(PREFIX, "-editable-item-inner")
+      }, renderItem(item, index)), isSelected && !isSceneLayoutTransformLocked(merged) && /*#__PURE__*/React.createElement(React.Fragment, null, ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'].map(function (h) {
+        return /*#__PURE__*/React.createElement("div", {
+          key: h,
+          className: classNames("".concat(PREFIX, "-editable-resize-handle"), "".concat(PREFIX, "-editable-resize-handle-").concat(h)),
+          onPointerDown: function onPointerDown(e) {
+            return handleResizePointerDown(e, item.id, h);
+          },
+          style: {
+            position: 'absolute'
+          }
+        });
+      })));
+    });
+  }, [items, renderItem, rowKey, getItemStyle, selectedId, handlePointerDown, handleItemClick, handleResizePointerDown, getMergedItemWrapperStyle]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: contentRef,
+    className: classNames("".concat(PREFIX, "-editable-item-layer"), className),
+    style: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      width: contentWidth,
+      height: contentHeight,
+      minWidth: contentWidth,
+      minHeight: contentHeight
+    },
+    onClick: handleCanvasClick
+  }, contentOffsetX !== 0 || contentOffsetY !== 0 ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      width: contentWidth,
+      height: contentHeight,
+      transform: "translate(".concat(contentOffsetX, "px, ").concat(contentOffsetY, "px)")
+    },
+    onClick: handleCanvasClick
+  }, itemNodes) : itemNodes);
+}
+export default EditableItemLayer;

package/es/components/pisellFloorMapLayout/components/EditableItemLayer.less

@@ -0,0 +1,89 @@
+/* 根节点不拦截事件，空白区域 mousedown 可透传到下层，让 react-zoom-pan-pinch 正常平移画布 */
+.pisell-floor-map-layout-editable-item-layer {
+  cursor: default;
+  pointer-events: none;
+}
+
+.pisell-floor-map-layout-editable-item {
+  cursor: move;
+  outline: none;
+  pointer-events: auto;
+  /* 避免触控时浏览器滚动/缩放抢走 gesture，保证可连续收到 pointermove */
+  touch-action: none;
+
+  &-selected {
+    box-shadow: 0 0 0 2px #1677ff;
+    z-index: 2;
+  }
+
+  &-inner {
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+}
+
+.pisell-floor-map-layout-editable-resize-handle {
+  width: 10px;
+  height: 10px;
+  margin: -5px;
+  background: #1677ff;
+  border: 1px solid #fff;
+  border-radius: 2px;
+  cursor: nwse-resize;
+  pointer-events: auto;
+  touch-action: none;
+  z-index: 3;
+
+  &-nw {
+    left: 0;
+    top: 0;
+    cursor: nwse-resize;
+  }
+
+  &-n {
+    left: 50%;
+    top: 0;
+    margin-left: -5px;
+    cursor: ns-resize;
+  }
+
+  &-ne {
+    right: 0;
+    top: 0;
+    cursor: nesw-resize;
+  }
+
+  &-e {
+    right: 0;
+    top: 50%;
+    margin-top: -5px;
+    cursor: ew-resize;
+  }
+
+  &-se {
+    right: 0;
+    bottom: 0;
+    cursor: nwse-resize;
+  }
+
+  &-s {
+    left: 50%;
+    bottom: 0;
+    margin-left: -5px;
+    cursor: ns-resize;
+  }
+
+  &-sw {
+    left: 0;
+    bottom: 0;
+    cursor: nesw-resize;
+  }
+
+  &-w {
+    left: 0;
+    top: 50%;
+    margin-top: -5px;
+    cursor: ew-resize;
+  }
+}

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

@@ -0,0 +1,43 @@
+/**
+ * Figma 样式餐桌/圆桌卡片：上下小条 + 白底卡片 + 状态色边框
+ * 供 Floor Map Story 与 Sales Grid 平面图复用
+ */
+import React from 'react';
+import type { FloorMapMergedItem, FloorMapDataSources } from '../types';
+export declare type FigmaTableStatus = 'available' | 'reserved' | 'waiting' | 'dining' | 'billed' | 'availableSoon';
+/** 方桌/圆桌卡片展示用数据结构（与 Figma 设计一致，支持桌号/状态/人数/区域等） */
+export interface FigmaTableCardItem {
+    id: string;
+    /**
+     * 无绑定或无可展示数据行时与蘸料摆台占位一致：浅灰底 + 虚线框 + 提示文案
+     * @see getRenderItemByKindCondimentStation（RecordBoard Story）
+     */
+    isNoDataPlaceholder?: boolean;
+    placeholderBorderColor?: string;
+    placeholderHint?: string;
+    /** 占位主标题：优先图元名称，否则「餐桌」/「圆桌」 */
+    placeholderTitle?: string;
+    /** 桌号/名称，空闲态居中显示 */
+    displayName?: string;
+    status?: FigmaTableStatus;
+    customerName?: string;
+    reserveTime?: string;
+    /** 当前用餐人数（与 Figma 设计一致） */
+    guests?: number;
+    /** 可坐人数（与表格列「可坐人数」绑定） */
+    capacity?: number;
+    dishes?: string;
+    duration?: string;
+    /** 区域（与表格列「区域」绑定，如大厅/包厢A） */
+    area?: string;
+}
+/** 从 merged item + dataSources 得到卡片数据 */
+export declare function getFigmaTableCardFromMerged(item: FloorMapMergedItem, dataSources: FloorMapDataSources): FigmaTableCardItem;
+/** 渲染 Figma 样式的方桌卡片（上下小条 + 白底卡片 + 状态边框） */
+export declare function renderFigmaStyleTableCard(cardItem: FigmaTableCardItem): React.JSX.Element;
+/** 渲染 Figma 样式的圆桌卡片（圆形轮廓，展示桌号/状态/人数/区域） */
+export declare function renderFigmaStyleRoundTableCard(cardItem: FigmaTableCardItem): React.JSX.Element;
+/** 返回用于 renderItemByKind.table 的渲染函数（方桌） */
+export declare function getRenderItemByKindTable(dataSources: FloorMapDataSources): (item: unknown) => React.JSX.Element;
+/** 返回用于 renderItemByKind.roundTable 的渲染函数（圆桌） */
+export declare function getRenderItemByKindRoundTable(dataSources: FloorMapDataSources): (item: unknown) => React.JSX.Element;