@pisell/materials 1.0.1059 → 1.0.1062

package/es/components/pisellFloorMapLayout/components/FloorMapEditTopBar.js

@@ -0,0 +1,130 @@
+/**
+ * FloorMapEditTopBar - 编辑态顶栏
+ * - `mode="compact"`：画布 Tab + 全屏入口（非全屏时；保存等在侧栏）
+ * - `mode="full"`：画布 Tab + 保存 + 全屏退出 + 扩展操作（全屏时）
+ */
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
+import { locales } from '@pisell/utils';
+import useEngineContext from "../../../hooks/useEngineContext";
+import { initFloorMapLayoutLocales } from "../utils/floorMapCanvasDisplay";
+import { CanvasTabs } from "./CanvasTabs";
+import "./FloorMapEditTopBar.less";
+var PREFIX = 'pisell-floor-map-layout';
+var I18N_TB = 'pisell-floor-map-layout.edit-top-bar';
+export function FloorMapEditTopBar(props) {
+  var _engineCtx$engine;
+  var _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'full' : _props$mode,
+    config = props.config,
+    canvases = props.canvases,
+    currentCanvasId = props.currentCanvasId,
+    onTabChange = props.onTabChange,
+    _props$canEditTabs = props.canEditTabs,
+    canEditTabs = _props$canEditTabs === void 0 ? false : _props$canEditTabs,
+    onAddCanvas = props.onAddCanvas,
+    onRemoveCanvas = props.onRemoveCanvas,
+    onRenameCanvas = props.onRenameCanvas,
+    onSave = props.onSave,
+    saving = props.saving,
+    saveError = props.saveError,
+    layoutDirty = props.layoutDirty,
+    toggleFullscreen = props.toggleFullscreen,
+    _props$isFullscreen = props.isFullscreen,
+    isFullscreen = _props$isFullscreen === void 0 ? false : _props$isFullscreen,
+    _props$controls = props.controls,
+    controls = _props$controls === void 0 ? {} : _props$controls,
+    extraActions = props.extraActions,
+    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';
+  var topBarLabels = useMemo(function () {
+    initFloorMapLayoutLocales(engineLocale);
+    return {
+      aria: locales.getText("".concat(I18N_TB, ".aria")),
+      fsEnterAria: locales.getText("".concat(I18N_TB, ".fullscreen-enter-aria")),
+      fsEnterTitle: locales.getText("".concat(I18N_TB, ".fullscreen-enter-title")),
+      fsExitAria: locales.getText("".concat(I18N_TB, ".fullscreen-exit-aria")),
+      fsExitTitle: locales.getText("".concat(I18N_TB, ".fullscreen-exit-title")),
+      unsaved: locales.getText("".concat(I18N_TB, ".unsaved")),
+      save: locales.getText("".concat(I18N_TB, ".save")),
+      saving: locales.getText("".concat(I18N_TB, ".saving"))
+    };
+  }, [engineLocale]);
+  var showSave = Boolean(onSave && config.canvasUi.canEdit);
+  /** compact：右侧仅「进入全屏」 */
+  var showFullscreenEnter = mode === 'compact' && Boolean(toggleFullscreen);
+  /** full 模式在全屏态下展示「退出全屏」 */
+  var showFullscreenExit = mode === 'full' && isFullscreen && Boolean(toggleFullscreen);
+  var hasFullActions = showSave || showFullscreenExit || Boolean(saveError) || extraActions != null && extraActions !== false;
+  if (mode === 'compact') {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(PREFIX, "-edit-top-bar"), className),
+      role: "toolbar",
+      "aria-label": topBarLabels.aria
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(PREFIX, "-edit-top-bar-tabs")
+    }, /*#__PURE__*/React.createElement(CanvasTabs, {
+      canvases: canvases,
+      currentCanvasId: currentCanvasId,
+      onTabChange: onTabChange,
+      canEdit: canEditTabs,
+      onAddCanvas: onAddCanvas,
+      onRemoveCanvas: onRemoveCanvas,
+      onRenameCanvas: onRenameCanvas,
+      className: "".concat(PREFIX, "-edit-top-bar-canvas-tabs")
+    })), showFullscreenEnter ? /*#__PURE__*/React.createElement("div", {
+      className: "".concat(PREFIX, "-edit-top-bar-actions")
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: classNames("".concat(PREFIX, "-edit-top-bar-btn"), "".concat(PREFIX, "-edit-top-bar-btn-ghost")),
+      onClick: function onClick() {
+        return toggleFullscreen === null || toggleFullscreen === void 0 ? void 0 : toggleFullscreen();
+      },
+      "aria-label": topBarLabels.fsEnterAria,
+      title: topBarLabels.fsEnterTitle
+    }, /*#__PURE__*/React.createElement(FullscreenOutlined, null))) : null);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(PREFIX, "-edit-top-bar"), className),
+    role: "toolbar",
+    "aria-label": topBarLabels.aria
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-edit-top-bar-tabs")
+  }, /*#__PURE__*/React.createElement(CanvasTabs, {
+    canvases: canvases,
+    currentCanvasId: currentCanvasId,
+    onTabChange: onTabChange,
+    canEdit: canEditTabs,
+    onAddCanvas: onAddCanvas,
+    onRemoveCanvas: onRemoveCanvas,
+    onRenameCanvas: onRenameCanvas,
+    className: "".concat(PREFIX, "-edit-top-bar-canvas-tabs")
+  })), hasFullActions ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-edit-top-bar-actions")
+  }, saveError ? /*#__PURE__*/React.createElement("span", {
+    className: "".concat(PREFIX, "-edit-top-bar-error"),
+    title: typeof saveError === 'string' ? saveError : saveError === null || saveError === void 0 ? void 0 : saveError.message
+  }, typeof saveError === 'string' ? saveError : saveError === null || saveError === void 0 ? void 0 : saveError.message) : null, extraActions, showFullscreenExit ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: classNames("".concat(PREFIX, "-edit-top-bar-btn"), "".concat(PREFIX, "-edit-top-bar-btn-ghost")),
+    onClick: function onClick() {
+      return toggleFullscreen === null || toggleFullscreen === void 0 ? void 0 : toggleFullscreen();
+    },
+    "aria-label": topBarLabels.fsExitAria,
+    title: topBarLabels.fsExitTitle
+  }, /*#__PURE__*/React.createElement(FullscreenExitOutlined, null)) : null, showSave ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-edit-top-bar-save-group")
+  }, layoutDirty ? /*#__PURE__*/React.createElement("span", {
+    className: "".concat(PREFIX, "-edit-top-bar-dirty-badge"),
+    role: "status",
+    "aria-live": "polite"
+  }, topBarLabels.unsaved) : null, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: classNames("".concat(PREFIX, "-edit-top-bar-btn"), 'primary'),
+    disabled: saving,
+    onClick: onSave
+  }, saving ? topBarLabels.saving : topBarLabels.save)) : null) : null);
+}
+export default FloorMapEditTopBar;

package/es/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/es/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/es/components/pisellFloorMapLayout/components/FloorMapImageElement.js

@@ -0,0 +1,69 @@
+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; }
+/**
+ * 平面图「图片图元」内层展示：支持 URL、object-fit 铺满；无地址或加载失败时占位
+ */
+import React, { useEffect, useState } from 'react';
+var PREFIX = 'pisell-floor-map-layout';
+export function FloorMapImageElement(props) {
+  var imageUrl = props.imageUrl,
+    name = props.name;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    broken = _useState2[0],
+    setBroken = _useState2[1];
+  var trimmed = imageUrl != null ? String(imageUrl).trim() : '';
+  useEffect(function () {
+    setBroken(false);
+  }, [trimmed]);
+  var label = name != null && String(name).trim() ? String(name).trim() : '图片图元';
+  if (!trimmed || broken) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(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__*/React.createElement("span", {
+      style: {
+        fontWeight: 600,
+        color: '#595959',
+        marginBottom: 4
+      }
+    }, label), /*#__PURE__*/React.createElement("span", null, !trimmed ? '在侧栏填写图片地址；可调层级置于桌位下方作底图' : '图片加载失败，请检查地址'));
+  }
+  return /*#__PURE__*/React.createElement("img", {
+    src: trimmed,
+    alt: label,
+    draggable: false,
+    onError: function onError() {
+      return setBroken(true);
+    },
+    style: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+      display: 'block',
+      pointerEvents: 'none',
+      userSelect: 'none'
+    }
+  });
+}

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