@pisell/materials 1.0.1059 → 1.0.1062

package/lib/components/pisellFloorMapLayout/components/FloorMapEditTopBar.js

@@ -0,0 +1,188 @@
+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/FloorMapEditTopBar.tsx
+var FloorMapEditTopBar_exports = {};
+__export(FloorMapEditTopBar_exports, {
+  FloorMapEditTopBar: () => FloorMapEditTopBar,
+  default: () => FloorMapEditTopBar_default
+});
+module.exports = __toCommonJS(FloorMapEditTopBar_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+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");
+var import_FloorMapEditTopBar = require("./FloorMapEditTopBar.less");
+var PREFIX = "pisell-floor-map-layout";
+var I18N_TB = "pisell-floor-map-layout.edit-top-bar";
+function FloorMapEditTopBar(props) {
+  var _a, _b;
+  const {
+    mode = "full",
+    config,
+    canvases,
+    currentCanvasId,
+    onTabChange,
+    canEditTabs = false,
+    onAddCanvas,
+    onRemoveCanvas,
+    onRenameCanvas,
+    onSave,
+    saving,
+    saveError,
+    layoutDirty,
+    toggleFullscreen,
+    isFullscreen = false,
+    controls = {},
+    extraActions,
+    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";
+  const topBarLabels = (0, import_react.useMemo)(() => {
+    (0, import_floorMapCanvasDisplay.initFloorMapLayoutLocales)(engineLocale);
+    return {
+      aria: import_utils.locales.getText(`${I18N_TB}.aria`),
+      fsEnterAria: import_utils.locales.getText(`${I18N_TB}.fullscreen-enter-aria`),
+      fsEnterTitle: import_utils.locales.getText(`${I18N_TB}.fullscreen-enter-title`),
+      fsExitAria: import_utils.locales.getText(`${I18N_TB}.fullscreen-exit-aria`),
+      fsExitTitle: import_utils.locales.getText(`${I18N_TB}.fullscreen-exit-title`),
+      unsaved: import_utils.locales.getText(`${I18N_TB}.unsaved`),
+      save: import_utils.locales.getText(`${I18N_TB}.save`),
+      saving: import_utils.locales.getText(`${I18N_TB}.saving`)
+    };
+  }, [engineLocale]);
+  const showSave = Boolean(onSave && config.canvasUi.canEdit);
+  const showFullscreenEnter = mode === "compact" && Boolean(toggleFullscreen);
+  const showFullscreenExit = mode === "full" && isFullscreen && Boolean(toggleFullscreen);
+  const hasFullActions = showSave || showFullscreenExit || Boolean(saveError) || extraActions != null && extraActions !== false;
+  if (mode === "compact") {
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: (0, import_classnames.default)(`${PREFIX}-edit-top-bar`, className),
+        role: "toolbar",
+        "aria-label": topBarLabels.aria
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-top-bar-tabs` }, /* @__PURE__ */ import_react.default.createElement(
+        import_CanvasTabs.CanvasTabs,
+        {
+          canvases,
+          currentCanvasId,
+          onTabChange,
+          canEdit: canEditTabs,
+          onAddCanvas,
+          onRemoveCanvas,
+          onRenameCanvas,
+          className: `${PREFIX}-edit-top-bar-canvas-tabs`
+        }
+      )),
+      showFullscreenEnter ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-top-bar-actions` }, /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          className: (0, import_classnames.default)(
+            `${PREFIX}-edit-top-bar-btn`,
+            `${PREFIX}-edit-top-bar-btn-ghost`
+          ),
+          onClick: () => toggleFullscreen == null ? void 0 : toggleFullscreen(),
+          "aria-label": topBarLabels.fsEnterAria,
+          title: topBarLabels.fsEnterTitle
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenOutlined, null)
+      )) : null
+    );
+  }
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)(`${PREFIX}-edit-top-bar`, className),
+      role: "toolbar",
+      "aria-label": topBarLabels.aria
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-top-bar-tabs` }, /* @__PURE__ */ import_react.default.createElement(
+      import_CanvasTabs.CanvasTabs,
+      {
+        canvases,
+        currentCanvasId,
+        onTabChange,
+        canEdit: canEditTabs,
+        onAddCanvas,
+        onRemoveCanvas,
+        onRenameCanvas,
+        className: `${PREFIX}-edit-top-bar-canvas-tabs`
+      }
+    )),
+    hasFullActions ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-top-bar-actions` }, saveError ? /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        className: `${PREFIX}-edit-top-bar-error`,
+        title: typeof saveError === "string" ? saveError : saveError == null ? void 0 : saveError.message
+      },
+      typeof saveError === "string" ? saveError : saveError == null ? void 0 : saveError.message
+    ) : null, extraActions, showFullscreenExit ? /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        type: "button",
+        className: (0, import_classnames.default)(
+          `${PREFIX}-edit-top-bar-btn`,
+          `${PREFIX}-edit-top-bar-btn-ghost`
+        ),
+        onClick: () => toggleFullscreen == null ? void 0 : toggleFullscreen(),
+        "aria-label": topBarLabels.fsExitAria,
+        title: topBarLabels.fsExitTitle
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenExitOutlined, null)
+    ) : null, showSave ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-top-bar-save-group` }, layoutDirty ? /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        className: `${PREFIX}-edit-top-bar-dirty-badge`,
+        role: "status",
+        "aria-live": "polite"
+      },
+      topBarLabels.unsaved
+    ) : null, /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        type: "button",
+        className: (0, import_classnames.default)(`${PREFIX}-edit-top-bar-btn`, "primary"),
+        disabled: saving,
+        onClick: onSave
+      },
+      saving ? topBarLabels.saving : topBarLabels.save
+    )) : null) : null
+  );
+}
+var FloorMapEditTopBar_default = FloorMapEditTopBar;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FloorMapEditTopBar
+});

package/lib/components/pisellFloorMapLayout/components/FloorMapEditTopBar.less

@@ -0,0 +1,131 @@
+/* 编辑态单行顶栏：画布 Tab + 保存 / 全屏 */
+.pisell-floor-map-layout-edit-top-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  flex-shrink: 0;
+  min-height: 48px;
+  background: #fff;
+  border-bottom: 1px solid #f0f0f0;
+  z-index: 3;
+
+  &-tabs {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: stretch;
+    overflow: hidden;
+  }
+
+  /* 嵌入顶栏时去掉 CanvasTabs 自身底边，避免双线 */
+
+  &-canvas-tabs.pisell-floor-map-layout-canvas-tabs {
+    flex: 1;
+    min-width: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    border-bottom: none;
+    flex-wrap: nowrap;
+    align-items: center;
+  }
+
+  &-actions {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    padding: 0 12px;
+    border-left: 1px solid #f0f0f0;
+  }
+
+  &-error {
+    max-width: 160px;
+    font-size: 12px;
+    color: #ff4d4f;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* 全屏顶栏：未保存标签在保存按钮左侧，单行对齐 */
+
+  &-save-group {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+  }
+
+  &-dirty-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px 4px 8px;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1;
+    color: #ad6800;
+    white-space: nowrap;
+    background: linear-gradient(180deg, #fffef7 0%, #fff7e6 100%);
+    border: 1px solid #ffe7a3;
+    border-radius: 999px;
+    box-shadow: 0 1px 2px rgba(173, 104, 0, 0.06);
+
+    &::before {
+      content: '';
+      width: 6px;
+      height: 6px;
+      flex-shrink: 0;
+      border-radius: 50%;
+      background: #faad14;
+      box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.25);
+    }
+  }
+
+  &-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 36px;
+    height: 32px;
+    padding: 0 14px;
+    font-size: 14px;
+    line-height: 1;
+    border-radius: 6px;
+    cursor: pointer;
+    border: 1px solid #d9d9d9;
+    background: #fff;
+    color: rgba(0, 0, 0, 0.88);
+    transition: border-color 0.2s, background 0.2s;
+
+    &:hover:not(:disabled) {
+      border-color: #1677ff;
+      color: #1677ff;
+    }
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    &.primary {
+      color: #fff;
+      background: #1677ff;
+      border-color: #1677ff;
+
+      &:hover:not(:disabled) {
+        background: #4096ff;
+        border-color: #4096ff;
+        color: #fff;
+      }
+    }
+  }
+
+  &-btn-ghost {
+    min-width: 32px;
+    padding: 0 8px;
+    font-size: 16px;
+  }
+
+}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface FloorMapImageElementProps {
+    imageUrl?: string;
+    name?: string;
+}
+export declare function FloorMapImageElement(props: FloorMapImageElementProps): JSX.Element;

package/lib/components/pisellFloorMapLayout/components/FloorMapImageElement.js

@@ -0,0 +1,94 @@
+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/FloorMapImageElement.tsx
+var FloorMapImageElement_exports = {};
+__export(FloorMapImageElement_exports, {
+  FloorMapImageElement: () => FloorMapImageElement
+});
+module.exports = __toCommonJS(FloorMapImageElement_exports);
+var import_react = __toESM(require("react"));
+var PREFIX = "pisell-floor-map-layout";
+function FloorMapImageElement(props) {
+  const { imageUrl, name } = props;
+  const [broken, setBroken] = (0, import_react.useState)(false);
+  const trimmed = imageUrl != null ? String(imageUrl).trim() : "";
+  (0, import_react.useEffect)(() => {
+    setBroken(false);
+  }, [trimmed]);
+  const label = name != null && String(name).trim() ? String(name).trim() : "图片图元";
+  if (!trimmed || broken) {
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `${PREFIX}-image-element-placeholder`,
+        style: {
+          width: "100%",
+          height: "100%",
+          boxSizing: "border-box",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: 8,
+          background: "#fafafa",
+          border: "2px dashed #bfbfbf",
+          borderRadius: 4,
+          fontSize: 11,
+          color: "#8c8c8c",
+          textAlign: "center",
+          lineHeight: 1.4,
+          overflow: "hidden"
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement("span", { style: { fontWeight: 600, color: "#595959", marginBottom: 4 } }, label),
+      /* @__PURE__ */ import_react.default.createElement("span", null, !trimmed ? "在侧栏填写图片地址；可调层级置于桌位下方作底图" : "图片加载失败，请检查地址")
+    );
+  }
+  return /* @__PURE__ */ import_react.default.createElement(
+    "img",
+    {
+      src: trimmed,
+      alt: label,
+      draggable: false,
+      onError: () => setBroken(true),
+      style: {
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+        display: "block",
+        pointerEvents: "none",
+        userSelect: "none"
+      }
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FloorMapImageElement
+});

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

@@ -0,0 +1,35 @@
+/**
+ * FloorMapToolbar - 编辑态左侧侧边栏：按分类添加图元、绑定数据源与行；保存可选（默认用顶栏）
+ */
+import React from 'react';
+import type { FloorMapViewConfig, FloorMapDataSources, FloorMapMergedItem, FloorMapSceneElement, FloorMapPlaceMode } from '../types';
+import { type FloorMapPaletteDragPayload } from '../utils/floorMapDropUtils';
+import './FloorMapToolbar.less';
+export type { FloorMapPlaceMode as PlaceMode };
+export interface FloorMapToolbarProps {
+    config: FloorMapViewConfig;
+    dataSources: FloorMapDataSources;
+    dataSourceLabels?: Record<string, string>;
+    canCreate: boolean;
+    placeMode: FloorMapPlaceMode;
+    onPlaceModeChange: (mode: FloorMapPlaceMode) => void;
+    renderPreviewItem?: (item: FloorMapMergedItem) => React.ReactNode;
+    placementPreviewSize?: {
+        width: number;
+        height: number;
+    };
+    decorationPreviewSize?: number;
+    sceneElements?: FloorMapSceneElement[];
+    onSave?: () => void;
+    saving?: boolean;
+    saveError?: Error | string;
+    /** 布局草稿已相对持久化配置变更，提示用户点击本栏「保存」 */
+    layoutDirty?: boolean;
+    className?: string;
+    /** 触摸/笔：Pointer 拖拽落点（mouse 仍用 HTML5 DnD） */
+    onPaletteCardPointerDown?: (payload: FloorMapPaletteDragPayload, e: React.PointerEvent<HTMLButtonElement>) => void;
+    /** 触摸拖放结束后吞掉按钮 click，避免误触切换落点模式 */
+    consumeToolbarClickIfTouchDrag?: () => boolean;
+}
+export declare function FloorMapToolbar(props: FloorMapToolbarProps): JSX.Element;
+export default FloorMapToolbar;