@pisell/materials 6.11.17 → 6.11.18

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

@@ -0,0 +1,27 @@
+/**
+ * CanvasTabs - 多画布 Tab，支持切换、动态添加、删除与重命名（编辑态）
+ * - 展示名：可选 `nameKey` + `locales.getText`，否则用 `name`（字符串或多语言对象）
+ * - 角标：可选 `tabBadge` 或由布局层注入合并后的数量
+ */
+import React from '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): React.JSX.Element;
+export default CanvasTabs;

package/lib/components/pisellFloorMapLayout/components/CanvasTabs.js

@@ -0,0 +1,237 @@
+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/components/CanvasTabs.tsx
+var CanvasTabs_exports = {};
+__export(CanvasTabs_exports, {
+  CanvasTabs: () => CanvasTabs,
+  default: () => CanvasTabs_default
+});
+module.exports = __toCommonJS(CanvasTabs_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_utils = require("@pisell/utils");
+var import_useEngineContext = __toESM(require("../../../hooks/useEngineContext"));
+var import_floorMapCanvasDisplay = require("../utils/floorMapCanvasDisplay");
+var import_CanvasTabs = require("./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";
+var FALLBACK_LANG_LIST = [
+  { code: "zh-CN", text: "简体中文" },
+  { code: "en", text: "English" },
+  { code: "zh-HK", text: "繁體中文" },
+  { code: "ja", text: "日本語" },
+  { code: "pt", text: "Português" }
+];
+function CanvasTabs(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const {
+    canvases,
+    currentCanvasId,
+    onTabChange,
+    canEdit = false,
+    onAddCanvas,
+    onRemoveCanvas,
+    onRenameCanvas,
+    className
+  } = props;
+  const engineCtx = (0, import_useEngineContext.default)();
+  const engineLocale = ((_b = (_a = engineCtx == null ? void 0 : engineCtx.engine) == null ? void 0 : _a.props) == null ? void 0 : _b.locale) || "zh-CN";
+  (0, import_floorMapCanvasDisplay.initFloorMapLayoutLocales)(engineLocale);
+  const languageList = ((_g = (_f = (_e = (_d = (_c = engineCtx == null ? void 0 : engineCtx.appHelper) == null ? void 0 : _c.store) == null ? void 0 : _d.getState()) == null ? void 0 : _e.global) == null ? void 0 : _f.shopLanguages) == null ? void 0 : _g.list) ?? FALLBACK_LANG_LIST;
+  const enabledCanvases = canvases.filter((c) => c.enabled).sort((a, b) => a.order - b.order);
+  const labelMap = (0, import_react.useMemo)(() => {
+    const m = /* @__PURE__ */ new Map();
+    enabledCanvases.forEach((c) => {
+      m.set(c.id, (0, import_floorMapCanvasDisplay.getFloorMapCanvasDisplayName)(c, engineLocale));
+    });
+    return m;
+  }, [enabledCanvases, engineLocale]);
+  const canRemove = canEdit && enabledCanvases.length > 1 && Boolean(onRemoveCanvas);
+  const canRename = canEdit && Boolean(onRenameCanvas);
+  const [renameModal, setRenameModal] = (0, import_react.useState)(null);
+  const handleRemove = (e, canvasId) => {
+    e.stopPropagation();
+    onRemoveCanvas == null ? void 0 : onRemoveCanvas(canvasId);
+  };
+  const openRenameForCanvas = (0, import_react.useCallback)(
+    (c) => {
+      if (!canRename) return;
+      const display = labelMap.get(c.id) ?? (0, import_floorMapCanvasDisplay.getFloorMapCanvasDisplayName)(c, engineLocale);
+      setRenameModal({
+        canvas: c,
+        value: (0, import_floorMapCanvasDisplay.seedFloorMapCanvasNameI18n)(c, display)
+      });
+    },
+    [canRename, labelMap, engineLocale]
+  );
+  const openRenameModal = (e, c) => {
+    e.stopPropagation();
+    openRenameForCanvas(c);
+  };
+  const commitRenameModal = () => {
+    if (!renameModal) return;
+    const v = renameModal.value;
+    const hasAny = Object.values(v).some(
+      (s) => typeof s === "string" && s.trim()
+    );
+    if (hasAny) {
+      onRenameCanvas == null ? void 0 : onRenameCanvas(renameModal.canvas.id, v);
+    }
+    setRenameModal(null);
+  };
+  if (enabledCanvases.length === 0 && !canEdit) {
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: (0, import_classnames.default)(
+          `${PREFIX}-canvas-tabs`,
+          `${PREFIX}-canvas-tabs-empty`,
+          className
+        )
+      },
+      import_utils.locales.getText(I18N_EMPTY)
+    );
+  }
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)(`${PREFIX}-canvas-tabs`, className),
+      role: "tablist"
+    },
+    enabledCanvases.map((c) => {
+      const displayLabel = labelMap.get(c.id) ?? (0, import_floorMapCanvasDisplay.getFloorMapCanvasDisplayName)(c, engineLocale);
+      const badge = c.tabBadge !== void 0 && c.tabBadge !== null ? c.tabBadge : null;
+      return /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          key: c.id,
+          role: "tab",
+          "aria-selected": currentCanvasId === c.id,
+          className: (0, import_classnames.default)(`${PREFIX}-canvas-tabs-tab`, {
+            [`${PREFIX}-canvas-tabs-tab-active`]: currentCanvasId === c.id
+          }),
+          onClick: () => onTabChange(c.id)
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          "span",
+          {
+            className: `${PREFIX}-canvas-tabs-tab-label`,
+            title: canRename ? import_utils.locales.getText(I18N_RENAME_TITLE) : void 0,
+            onDoubleClick: canRename ? (e) => openRenameModal(e, c) : void 0
+          },
+          displayLabel,
+          badge != null ? /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-canvas-tabs-tab-badge` }, " ", "(", badge, ")") : null
+        ),
+        canRename ? /* @__PURE__ */ import_react.default.createElement(
+          "button",
+          {
+            type: "button",
+            className: `${PREFIX}-canvas-tabs-tab-rename`,
+            "aria-label": `${import_utils.locales.getText(
+              I18N_RENAME_BTN_ARIA
+            )} · ${displayLabel}`,
+            title: import_utils.locales.getText(I18N_RENAME_BTN_TITLE),
+            onClick: (e) => {
+              e.stopPropagation();
+              openRenameForCanvas(c);
+            }
+          },
+          /* @__PURE__ */ import_react.default.createElement(import_icons.EditOutlined, null)
+        ) : null,
+        canRemove && /* @__PURE__ */ import_react.default.createElement(
+          "button",
+          {
+            type: "button",
+            "aria-label": `${import_utils.locales.getText(
+              I18N_REMOVE_ARIA
+            )} · ${displayLabel}`,
+            className: `${PREFIX}-canvas-tabs-tab-remove`,
+            onClick: (e) => handleRemove(e, c.id)
+          }
+        )
+      );
+    }),
+    canEdit && onAddCanvas && /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        type: "button",
+        className: `${PREFIX}-canvas-tabs-add`,
+        onClick: onAddCanvas,
+        title: import_utils.locales.getText(I18N_ADD_TITLE)
+      },
+      import_utils.locales.getText(I18N_ADD)
+    ),
+    enabledCanvases.length === 0 && canEdit && /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-canvas-tabs-empty-hint` }, import_utils.locales.getText(I18N_HINT))
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Modal,
+    {
+      title: import_utils.locales.getText(I18N_RENAME_MODAL_TITLE),
+      open: renameModal != null,
+      onOk: commitRenameModal,
+      onCancel: () => setRenameModal(null),
+      okText: import_utils.locales.getText(I18N_RENAME_MODAL_OK),
+      cancelText: import_utils.locales.getText(I18N_RENAME_MODAL_CANCEL),
+      destroyOnClose: true
+    },
+    renameModal ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-translation-modal" }, languageList.map((d) => /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { label: d.text, labelCol: { span: 24 }, key: d.code }, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Input,
+      {
+        value: renameModal.value[d.code] ?? "",
+        onChange: (e) => setRenameModal(
+          (prev) => prev ? {
+            ...prev,
+            value: {
+              ...prev.value,
+              [d.code]: e.target.value
+            }
+          } : null
+        ),
+        "aria-label": `${import_utils.locales.getText(I18N_RENAME_ARIA)} · ${d.text}`
+      }
+    )))) : null
+  ));
+}
+var CanvasTabs_default = CanvasTabs;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CanvasTabs
+});

package/lib/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/lib/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>): React.JSX.Element;
+export default EditableItemLayer;