@pisell/materials 1.8.18 → 1.8.20

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import type { FloorMapCanvas, FloorMapCanvasNameI18n } from '../types';
+import './CanvasTabs.less';
+export interface CanvasTabsProps {
+    /** 画布列表 */
+    canvases: FloorMapCanvas[];
+    /** 当前画布 id */
+    currentCanvasId: string | null;
+    /** 切换画布 */
+    onTabChange: (canvasId: string) => void;
+    /** 是否允许添加/删除/重命名画布（编辑态） */
+    canEdit?: boolean;
+    /** 添加画布 */
+    onAddCanvas?: () => void;
+    /** 删除画布（至少保留一个画布时可调用） */
+    onRemoveCanvas?: (canvasId: string) => void;
+    /** 重命名画布（对象写入 `name`，并清除 `nameKey`） */
+    onRenameCanvas?: (canvasId: string, name: string | FloorMapCanvasNameI18n) => void;
+    className?: string;
+}
+export declare function CanvasTabs(props: CanvasTabsProps): JSX.Element;
+export default CanvasTabs;

package/es/components/pisellFloorMapLayout/components/CanvasTabs.js

@@ -0,0 +1,203 @@
+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 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; }
+/**
+ * CanvasTabs - 多画布 Tab，支持切换、动态添加、删除与重命名（编辑态）
+ * - 展示名：可选 `nameKey` + `locales.getText`，否则用 `name`（字符串或多语言对象）
+ * - 角标：可选 `tabBadge` 或由布局层注入合并后的数量
+ */
+import React, { useState, useMemo, useCallback } from 'react';
+import classNames from 'classnames';
+import { Modal, Form, Input } from 'antd';
+import { EditOutlined } from '@ant-design/icons';
+import { locales } from '@pisell/utils';
+import useEngineContext from "../../../hooks/useEngineContext";
+import { getFloorMapCanvasDisplayName, initFloorMapLayoutLocales, seedFloorMapCanvasNameI18n } from "../utils/floorMapCanvasDisplay";
+import "./CanvasTabs.less";
+var PREFIX = 'pisell-floor-map-layout';
+var I18N_EMPTY = 'pisell-floor-map-layout.canvas-tabs.empty';
+var I18N_ADD = 'pisell-floor-map-layout.canvas-tabs.add';
+var I18N_ADD_TITLE = 'pisell-floor-map-layout.canvas-tabs.add-title';
+var I18N_HINT = 'pisell-floor-map-layout.canvas-tabs.hint';
+var I18N_RENAME_ARIA = 'pisell-floor-map-layout.canvas-tabs.rename-aria';
+var I18N_REMOVE_ARIA = 'pisell-floor-map-layout.canvas-tabs.remove-aria';
+var I18N_RENAME_TITLE = 'pisell-floor-map-layout.canvas-tabs.rename-title';
+var I18N_RENAME_BTN_ARIA = 'pisell-floor-map-layout.canvas-tabs.rename-button-aria';
+var I18N_RENAME_BTN_TITLE = 'pisell-floor-map-layout.canvas-tabs.rename-button-title';
+var I18N_RENAME_MODAL_TITLE = 'pisell-floor-map-layout.canvas-tabs.rename-modal-title';
+var I18N_RENAME_MODAL_OK = 'pisell-floor-map-layout.canvas-tabs.rename-modal-ok';
+var I18N_RENAME_MODAL_CANCEL = 'pisell-floor-map-layout.canvas-tabs.rename-modal-cancel';
+
+/** 与 Translation 弹层语言列表兜底一致（无 store 时） */
+var FALLBACK_LANG_LIST = [{
+  code: 'zh-CN',
+  text: '简体中文'
+}, {
+  code: 'en',
+  text: 'English'
+}, {
+  code: 'zh-HK',
+  text: '繁體中文'
+}, {
+  code: 'ja',
+  text: '日本語'
+}, {
+  code: 'pt',
+  text: 'Português'
+}];
+export function CanvasTabs(props) {
+  var _engineCtx$engine, _engineCtx$appHelper$, _engineCtx$appHelper;
+  var canvases = props.canvases,
+    currentCanvasId = props.currentCanvasId,
+    onTabChange = props.onTabChange,
+    _props$canEdit = props.canEdit,
+    canEdit = _props$canEdit === void 0 ? false : _props$canEdit,
+    onAddCanvas = props.onAddCanvas,
+    onRemoveCanvas = props.onRemoveCanvas,
+    onRenameCanvas = props.onRenameCanvas,
+    className = props.className;
+  var engineCtx = useEngineContext();
+  var engineLocale = (engineCtx === null || engineCtx === void 0 || (_engineCtx$engine = engineCtx.engine) === null || _engineCtx$engine === void 0 || (_engineCtx$engine = _engineCtx$engine.props) === null || _engineCtx$engine === void 0 ? void 0 : _engineCtx$engine.locale) || 'zh-CN';
+  initFloorMapLayoutLocales(engineLocale);
+  var languageList = (_engineCtx$appHelper$ = engineCtx === null || engineCtx === void 0 || (_engineCtx$appHelper = engineCtx.appHelper) === null || _engineCtx$appHelper === void 0 || (_engineCtx$appHelper = _engineCtx$appHelper.store) === null || _engineCtx$appHelper === void 0 || (_engineCtx$appHelper = _engineCtx$appHelper.getState()) === null || _engineCtx$appHelper === void 0 || (_engineCtx$appHelper = _engineCtx$appHelper.global) === null || _engineCtx$appHelper === void 0 || (_engineCtx$appHelper = _engineCtx$appHelper.shopLanguages) === null || _engineCtx$appHelper === void 0 ? void 0 : _engineCtx$appHelper.list) !== null && _engineCtx$appHelper$ !== void 0 ? _engineCtx$appHelper$ : FALLBACK_LANG_LIST;
+  var enabledCanvases = canvases.filter(function (c) {
+    return c.enabled;
+  }).sort(function (a, b) {
+    return a.order - b.order;
+  });
+  var labelMap = useMemo(function () {
+    var m = new Map();
+    enabledCanvases.forEach(function (c) {
+      m.set(c.id, getFloorMapCanvasDisplayName(c, engineLocale));
+    });
+    return m;
+  }, [enabledCanvases, engineLocale]);
+  var canRemove = canEdit && enabledCanvases.length > 1 && Boolean(onRemoveCanvas);
+  var canRename = canEdit && Boolean(onRenameCanvas);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    renameModal = _useState2[0],
+    setRenameModal = _useState2[1];
+  var handleRemove = function handleRemove(e, canvasId) {
+    e.stopPropagation();
+    onRemoveCanvas === null || onRemoveCanvas === void 0 || onRemoveCanvas(canvasId);
+  };
+  var openRenameForCanvas = useCallback(function (c) {
+    var _labelMap$get;
+    if (!canRename) return;
+    var display = (_labelMap$get = labelMap.get(c.id)) !== null && _labelMap$get !== void 0 ? _labelMap$get : getFloorMapCanvasDisplayName(c, engineLocale);
+    setRenameModal({
+      canvas: c,
+      value: seedFloorMapCanvasNameI18n(c, display)
+    });
+  }, [canRename, labelMap, engineLocale]);
+  var openRenameModal = function openRenameModal(e, c) {
+    e.stopPropagation();
+    openRenameForCanvas(c);
+  };
+  var commitRenameModal = function commitRenameModal() {
+    if (!renameModal) return;
+    var v = renameModal.value;
+    var hasAny = Object.values(v).some(function (s) {
+      return typeof s === 'string' && s.trim();
+    });
+    if (hasAny) {
+      onRenameCanvas === null || onRenameCanvas === void 0 || onRenameCanvas(renameModal.canvas.id, v);
+    }
+    setRenameModal(null);
+  };
+  if (enabledCanvases.length === 0 && !canEdit) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(PREFIX, "-canvas-tabs"), "".concat(PREFIX, "-canvas-tabs-empty"), className)
+    }, locales.getText(I18N_EMPTY));
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(PREFIX, "-canvas-tabs"), className),
+    role: "tablist"
+  }, enabledCanvases.map(function (c) {
+    var _labelMap$get2;
+    var displayLabel = (_labelMap$get2 = labelMap.get(c.id)) !== null && _labelMap$get2 !== void 0 ? _labelMap$get2 : getFloorMapCanvasDisplayName(c, engineLocale);
+    var badge = c.tabBadge !== undefined && c.tabBadge !== null ? c.tabBadge : null;
+    return /*#__PURE__*/React.createElement("div", {
+      key: c.id,
+      role: "tab",
+      "aria-selected": currentCanvasId === c.id,
+      className: classNames("".concat(PREFIX, "-canvas-tabs-tab"), _defineProperty({}, "".concat(PREFIX, "-canvas-tabs-tab-active"), currentCanvasId === c.id)),
+      onClick: function onClick() {
+        return onTabChange(c.id);
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(PREFIX, "-canvas-tabs-tab-label"),
+      title: canRename ? locales.getText(I18N_RENAME_TITLE) : undefined,
+      onDoubleClick: canRename ? function (e) {
+        return openRenameModal(e, c);
+      } : undefined
+    }, displayLabel, badge != null ? /*#__PURE__*/React.createElement("span", {
+      className: "".concat(PREFIX, "-canvas-tabs-tab-badge")
+    }, ' ', "(", badge, ")") : null), canRename ? /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "".concat(PREFIX, "-canvas-tabs-tab-rename"),
+      "aria-label": "".concat(locales.getText(I18N_RENAME_BTN_ARIA), " \xB7 ").concat(displayLabel),
+      title: locales.getText(I18N_RENAME_BTN_TITLE),
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        openRenameForCanvas(c);
+      }
+    }, /*#__PURE__*/React.createElement(EditOutlined, null)) : null, canRemove && /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      "aria-label": "".concat(locales.getText(I18N_REMOVE_ARIA), " \xB7 ").concat(displayLabel),
+      className: "".concat(PREFIX, "-canvas-tabs-tab-remove"),
+      onClick: function onClick(e) {
+        return handleRemove(e, c.id);
+      }
+    }));
+  }), canEdit && onAddCanvas && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "".concat(PREFIX, "-canvas-tabs-add"),
+    onClick: onAddCanvas,
+    title: locales.getText(I18N_ADD_TITLE)
+  }, locales.getText(I18N_ADD)), enabledCanvases.length === 0 && canEdit && /*#__PURE__*/React.createElement("span", {
+    className: "".concat(PREFIX, "-canvas-tabs-empty-hint")
+  }, locales.getText(I18N_HINT))), /*#__PURE__*/React.createElement(Modal, {
+    title: locales.getText(I18N_RENAME_MODAL_TITLE),
+    open: renameModal != null,
+    onOk: commitRenameModal,
+    onCancel: function onCancel() {
+      return setRenameModal(null);
+    },
+    okText: locales.getText(I18N_RENAME_MODAL_OK),
+    cancelText: locales.getText(I18N_RENAME_MODAL_CANCEL),
+    destroyOnClose: true
+  }, renameModal ? /*#__PURE__*/React.createElement("div", {
+    className: "pisell-lowcode-translation-modal"
+  }, languageList.map(function (d) {
+    var _renameModal$value;
+    return /*#__PURE__*/React.createElement(Form.Item, {
+      label: d.text,
+      labelCol: {
+        span: 24
+      },
+      key: d.code
+    }, /*#__PURE__*/React.createElement(Input, {
+      value: (_renameModal$value = renameModal.value[d.code]) !== null && _renameModal$value !== void 0 ? _renameModal$value : '',
+      onChange: function onChange(e) {
+        return setRenameModal(function (prev) {
+          return prev ? _objectSpread(_objectSpread({}, prev), {}, {
+            value: _objectSpread(_objectSpread({}, prev.value), {}, _defineProperty({}, d.code, e.target.value))
+          }) : null;
+        });
+      },
+      "aria-label": "".concat(locales.getText(I18N_RENAME_ARIA), " \xB7 ").concat(d.text)
+    }));
+  })) : null));
+}
+export default CanvasTabs;

package/es/components/pisellFloorMapLayout/components/CanvasTabs.less

@@ -0,0 +1,189 @@
+.pisell-floor-map-layout-canvas-tabs {
+  position: relative;
+  z-index: 2;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 6px 8px;
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 10px;
+  box-sizing: border-box;
+  border-bottom: none;
+
+  &-tab {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 7px 14px;
+    font-size: 14px;
+    line-height: 1.25;
+    color: rgba(0, 0, 0, 0.55);
+    background: transparent;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: color 0.2s,
+    background 0.2s,
+    box-shadow 0.2s;
+
+    &:hover {
+      color: rgba(0, 0, 0, 0.85);
+      background: rgba(255, 255, 255, 0.55);
+    }
+
+    &-active {
+      color: #1677ff;
+      font-weight: 600;
+      background: #fff;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06),
+      0 0 0 1px rgba(0, 0, 0, 0.04);
+
+      &:hover {
+        color: #1677ff;
+        background: #fff;
+      }
+    }
+
+    &-label {
+      flex: 0 0 auto;
+    }
+
+    &-badge {
+      font-weight: 500;
+      color: rgba(0, 0, 0, 0.45);
+
+      .pisell-floor-map-layout-canvas-tabs-tab-active & {
+        color: rgba(22, 119, 255, 0.85);
+      }
+    }
+
+    &-input {
+      flex: 0 1 auto;
+      min-width: 72px;
+      max-width: 180px;
+      padding: 4px 8px;
+      font-size: 14px;
+      line-height: 1.4;
+      color: #262626;
+      background: #fff;
+      border: 1px solid #1677ff;
+      border-radius: 6px;
+      outline: none;
+      box-sizing: border-box;
+
+      &:focus {
+        border-color: #1677ff;
+        box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2);
+      }
+    }
+
+    /** 触屏友好：单击打开重命名（避免依赖双击） */
+
+    &-rename {
+      flex: 0 0 auto;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 32px;
+      min-height: 32px;
+      margin: -4px -6px -4px 0;
+      padding: 0 6px;
+      font-size: 14px;
+      line-height: 1;
+      color: rgba(0, 0, 0, 0.45);
+      background: transparent;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      -webkit-tap-highlight-color: transparent;
+
+      &:hover {
+        color: #1677ff;
+        background: rgba(22, 119, 255, 0.08);
+      }
+
+      &:active {
+        background: rgba(22, 119, 255, 0.14);
+      }
+
+      .pisell-floor-map-layout-canvas-tabs-tab-active & {
+        color: rgba(22, 119, 255, 0.85);
+
+        &:hover {
+          color: #1677ff;
+        }
+      }
+    }
+
+    &-remove {
+      flex: 0 0 auto;
+      width: 16px;
+      height: 16px;
+      padding: 0;
+      font-size: 12px;
+      line-height: 1;
+      color: #8c8c8c;
+      background: transparent;
+      border: none;
+      border-radius: 2px;
+      cursor: pointer;
+      position: relative;
+
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 10px;
+        height: 1px;
+        background: currentColor;
+      }
+
+      &::before {
+        transform: translate(-50%, -50%) rotate(45deg);
+      }
+
+      &::after {
+        transform: translate(-50%, -50%) rotate(-45deg);
+      }
+
+      &:hover {
+        color: #ff4d4f;
+        background: #fff2f0;
+      }
+    }
+  }
+
+  &-add {
+    padding: 7px 12px;
+    font-size: 13px;
+    font-weight: 500;
+    color: #1677ff;
+    background: rgba(255, 255, 255, 0.7);
+    border: 1px dashed rgba(22, 119, 255, 0.35);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: color 0.2s,
+    border-color 0.2s,
+    background 0.2s;
+
+    &:hover {
+      color: #4096ff;
+      border-color: #4096ff;
+      background: #fff;
+    }
+  }
+
+  &-empty {
+    color: #999;
+    font-size: 14px;
+  }
+
+  &-empty-hint {
+    font-size: 13px;
+    color: #8c8c8c;
+  }
+}

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

@@ -0,0 +1,37 @@
+/**
+ * EditableItemLayer - 编辑态图元层：拖拽、缩放、选中、吸附
+ */
+import React, { type CSSProperties } from 'react';
+import type { FloorMapItemBase, FloorMapMergedItem, FloorMapRenderOptions } from '../types';
+import './EditableItemLayer.less';
+export interface EditableItemLayerProps<T extends FloorMapItemBase = FloorMapMergedItem> {
+    items: T[];
+    renderItem: (item: T, index: number, options?: FloorMapRenderOptions) => React.ReactNode;
+    rowKey?: string | ((item: T, index: number) => string);
+    cellSize: number;
+    itemUnit?: 'cell' | 'pixel';
+    itemGap?: number;
+    contentWidth: number;
+    contentHeight: number;
+    /** 内容区 X/Y 偏移（画布包围盒向左/上扩展时，图元层整体平移） */
+    contentOffsetX?: number;
+    contentOffsetY?: number;
+    selectedId: string | null;
+    onSelect: (id: string | null) => void;
+    onUpdateItem: (itemId: string, patch: Partial<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }>) => void;
+    snapStep?: number;
+    /** 画布当前缩放，用于将屏幕位移转为内容位移 */
+    scale?: number;
+    /** 拖拽/缩放图元时通知父组件，用于禁用画布平移，避免松手时画布跟着动 */
+    onInteractionChange?: (active: boolean) => void;
+    /** 每项外层容器额外样式（与定位样式合并） */
+    getMergedItemWrapperStyle?: (item: T, index: number) => CSSProperties | undefined;
+    className?: string;
+}
+export declare function EditableItemLayer<T extends FloorMapItemBase>(props: EditableItemLayerProps<T>): JSX.Element;
+export default EditableItemLayer;