@pisell/materials 6.11.16 → 6.11.18

package/es/components/pisellFloorMapLayout/components/FloorMapToolbar.js

@@ -0,0 +1,366 @@
+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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function (_e) { function e(_x) { return _e.apply(this, arguments); } e.toString = function () { return _e.toString(); }; return e; }(function (e) { throw e; }), f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function (_e2) { function e(_x2) { return _e2.apply(this, arguments); } e.toString = function () { return _e2.toString(); }; return e; }(function (e) { didErr = true; err = e; }), f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+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 _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 _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 _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 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); }
+/**
+ * FloorMapToolbar - 编辑态左侧侧边栏：按分类添加图元、绑定数据源与行；保存可选（默认用顶栏）
+ */
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { Select } from 'antd';
+import { FLOOR_MAP_IMAGE_ELEMENT_KIND, FLOOR_MAP_STAGE_ELEMENT_KIND } from "../types";
+import { resolveDataBindingPolicy } from "../utils/floorMapElementKindUtils";
+import { FLOOR_MAP_PALETTE_DRAG_MIME } from "../utils/floorMapDropUtils";
+import { formatDataRecordOptionLabel } from "../utils/floorMapDataRecordLabel";
+import "./FloorMapToolbar.less";
+var PREFIX = 'pisell-floor-map-layout';
+var DEFAULT_PLACEMENT_SIZE = {
+  width: 180,
+  height: 120
+};
+var DEFAULT_DECORATION_SIZE = 48;
+function getUnplacedRecordsForKey(dataSourceKey, dataSources, elements) {
+  var _dataSources$dataSour;
+  var used = new Set(elements.filter(function (e) {
+    var _e$dataBinding;
+    return ((_e$dataBinding = e.dataBinding) === null || _e$dataBinding === void 0 ? void 0 : _e$dataBinding.dataSourceKey) === dataSourceKey;
+  }).map(function (e) {
+    return e.dataBinding.recordId;
+  }));
+  var list = (_dataSources$dataSour = dataSources[dataSourceKey]) !== null && _dataSources$dataSour !== void 0 ? _dataSources$dataSour : [];
+  return list.filter(function (r) {
+    return r && typeof r.id === 'string' && !used.has(r.id);
+  });
+}
+function buildScenePreviewMergedItem(kind, dataSourceKey, size) {
+  var el = _objectSpread({
+    instanceId: "preview_".concat(kind.value),
+    canvasId: '',
+    x: 0,
+    y: 0,
+    width: size.width,
+    height: size.height,
+    elementKind: kind.value,
+    shape: kind.defaultShape,
+    dataBinding: dataSourceKey && resolveDataBindingPolicy(kind) !== 'none' ? {
+      dataSourceKey: dataSourceKey,
+      recordId: ''
+    } : undefined
+  }, kind.value === FLOOR_MAP_IMAGE_ELEMENT_KIND ? {
+    imageUrl: ''
+  } : {});
+  return {
+    id: el.instanceId,
+    instanceId: el.instanceId,
+    x: 0,
+    y: 0,
+    width: size.width,
+    height: size.height,
+    shape: kind.defaultShape,
+    elementKind: kind.value,
+    _sceneElement: el
+  };
+}
+var STAGE_PREVIEW_SIZE = {
+  width: 160,
+  height: 64
+};
+var IMAGE_PREVIEW_SIZE = {
+  width: 140,
+  height: 80
+};
+export function FloorMapToolbar(props) {
+  var config = props.config,
+    dataSources = props.dataSources,
+    _props$dataSourceLabe = props.dataSourceLabels,
+    dataSourceLabels = _props$dataSourceLabe === void 0 ? {} : _props$dataSourceLabe,
+    canCreate = props.canCreate,
+    placeMode = props.placeMode,
+    onPlaceModeChange = props.onPlaceModeChange,
+    renderPreviewItem = props.renderPreviewItem,
+    _props$placementPrevi = props.placementPreviewSize,
+    placementPreviewSize = _props$placementPrevi === void 0 ? DEFAULT_PLACEMENT_SIZE : _props$placementPrevi,
+    _props$decorationPrev = props.decorationPreviewSize,
+    decorationPreviewSize = _props$decorationPrev === void 0 ? DEFAULT_DECORATION_SIZE : _props$decorationPrev,
+    _props$sceneElements = props.sceneElements,
+    sceneElements = _props$sceneElements === void 0 ? [] : _props$sceneElements,
+    onSave = props.onSave,
+    saving = props.saving,
+    saveError = props.saveError,
+    layoutDirty = props.layoutDirty,
+    className = props.className,
+    onPaletteCardPointerDown = props.onPaletteCardPointerDown,
+    consumeToolbarClickIfTouchDrag = props.consumeToolbarClickIfTouchDrag;
+  var paletteKinds = useMemo(function () {
+    var _config$elementKinds;
+    return ((_config$elementKinds = config.elementKinds) !== null && _config$elementKinds !== void 0 ? _config$elementKinds : []).filter(function (k) {
+      return k.showInPalette !== false;
+    });
+  }, [config.elementKinds]);
+  var categories = useMemo(function () {
+    var _config$elementKindCa;
+    var raw = (_config$elementKindCa = config.elementKindCategories) !== null && _config$elementKindCa !== void 0 ? _config$elementKindCa : [];
+    var sorted = _toConsumableArray(raw).sort(function (a, b) {
+      var _a$order, _b$order;
+      return ((_a$order = a.order) !== null && _a$order !== void 0 ? _a$order : 0) - ((_b$order = b.order) !== null && _b$order !== void 0 ? _b$order : 0);
+    });
+    return sorted.length ? sorted : [{
+      id: '_uncat',
+      label: '图元',
+      order: 0
+    }];
+  }, [config.elementKindCategories]);
+  var kindsByCategory = useMemo(function () {
+    var _categories$0$id, _categories$;
+    var map = new Map();
+    var _iterator = _createForOfIteratorHelper(categories),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var c = _step.value;
+        map.set(c.id, []);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    var fallbackId = (_categories$0$id = (_categories$ = categories[0]) === null || _categories$ === void 0 ? void 0 : _categories$.id) !== null && _categories$0$id !== void 0 ? _categories$0$id : '_uncat';
+    var _iterator2 = _createForOfIteratorHelper(paletteKinds),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var _k$categoryId;
+        var _k = _step2.value;
+        var cid = (_k$categoryId = _k.categoryId) !== null && _k$categoryId !== void 0 ? _k$categoryId : fallbackId;
+        if (!map.has(cid)) map.set(cid, []);
+        map.get(cid).push(_k);
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+    return map;
+  }, [categories, paletteKinds]);
+  var handleSelectKind = function handleSelectKind(kind) {
+    var policy = resolveDataBindingPolicy(kind);
+    var next = {
+      type: 'scene',
+      elementKind: kind.value,
+      /** 不预锁单一数据源，由用户在工具栏「数据源」中选择；落点时用 allowedKeys[0] 作兜底 */
+      dataSourceKey: undefined,
+      recordId: undefined
+    };
+    var isSame = (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === 'scene' && placeMode.elementKind === kind.value;
+    onPlaceModeChange(isSame ? null : next);
+    void policy;
+  };
+  var handleDsChange = function handleDsChange(mode, key) {
+    onPlaceModeChange(_objectSpread(_objectSpread({}, mode), {}, {
+      dataSourceKey: key,
+      recordId: undefined,
+      recordIds: undefined
+    }));
+  };
+  var handleRecordsChange = function handleRecordsChange(mode, ids) {
+    var _ids$filter;
+    var list = (_ids$filter = ids === null || ids === void 0 ? void 0 : ids.filter(Boolean)) !== null && _ids$filter !== void 0 ? _ids$filter : [];
+    onPlaceModeChange(_objectSpread(_objectSpread({}, mode), {}, {
+      recordIds: list.length > 0 ? list : undefined,
+      recordId: undefined
+    }));
+  };
+  var cancelPlaceMode = function cancelPlaceMode() {
+    return onPlaceModeChange(null);
+  };
+  var renderKindCard = function renderKindCard(k) {
+    var _k$allowedDataSourceK;
+    var policy = resolveDataBindingPolicy(k);
+    var isStage = k.value === FLOOR_MAP_STAGE_ELEMENT_KIND;
+    var isImageKind = k.value === FLOOR_MAP_IMAGE_ELEMENT_KIND;
+    var placementLike = policy !== 'none' && !isStage || isImageKind;
+    var size = isStage ? STAGE_PREVIEW_SIZE : placementLike ? isImageKind ? IMAGE_PREVIEW_SIZE : placementPreviewSize : {
+      width: decorationPreviewSize,
+      height: decorationPreviewSize
+    };
+    var activeDs = (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === 'scene' && placeMode.elementKind === k.value ? placeMode.dataSourceKey : undefined;
+    var item = buildScenePreviewMergedItem(k, activeDs, size);
+    var isActive = (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === 'scene' && placeMode.elementKind === k.value;
+    var cellW = isStage ? 92 : placementLike ? 80 : decorationPreviewSize;
+    var cellH = isStage ? 40 : placementLike ? 54 : decorationPreviewSize;
+    var previewW = isImageKind ? IMAGE_PREVIEW_SIZE.width : placementPreviewSize.width;
+    var previewH = isImageKind ? IMAGE_PREVIEW_SIZE.height : placementPreviewSize.height;
+    var placeScale = placementLike ? Math.min(cellW / previewW, cellH / previewH) : 1;
+    var stageScale = isStage ? Math.min(cellW / item.width, cellH / item.height, 1) : 1;
+    var allKeys = Object.keys(dataSources);
+    var allowedKeys = (_k$allowedDataSourceK = k.allowedDataSourceKeys) !== null && _k$allowedDataSourceK !== void 0 && _k$allowedDataSourceK.length ? k.allowedDataSourceKeys.filter(function (x) {
+      return allKeys.includes(x);
+    }) : allKeys;
+    var paletteDragPayload = _objectSpread({
+      elementKind: k.value
+    }, (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === 'scene' && placeMode.elementKind === k.value ? _objectSpread({
+      dataSourceKey: placeMode.dataSourceKey
+    }, placeMode.recordIds && placeMode.recordIds.length > 0 ? {
+      recordIds: placeMode.recordIds
+    } : placeMode.recordId ? {
+      recordId: placeMode.recordId
+    } : {}) : {});
+    return /*#__PURE__*/React.createElement("div", {
+      key: k.value,
+      className: "".concat(PREFIX, "-toolbar-preview-card-wrap")
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      draggable: true,
+      className: classNames("".concat(PREFIX, "-toolbar-preview-card"), !placementLike ? "".concat(PREFIX, "-toolbar-preview-card-deco") : undefined, _defineProperty({}, "".concat(PREFIX, "-toolbar-preview-card-active"), isActive)),
+      onClick: function onClick() {
+        if (consumeToolbarClickIfTouchDrag !== null && consumeToolbarClickIfTouchDrag !== void 0 && consumeToolbarClickIfTouchDrag()) return;
+        handleSelectKind(k);
+      },
+      onPointerDown: function onPointerDown(e) {
+        return onPaletteCardPointerDown === null || onPaletteCardPointerDown === void 0 ? void 0 : onPaletteCardPointerDown(paletteDragPayload, e);
+      },
+      onDragStart: function onDragStart(e) {
+        e.dataTransfer.setData(FLOOR_MAP_PALETTE_DRAG_MIME, JSON.stringify(paletteDragPayload));
+        e.dataTransfer.effectAllowed = 'copy';
+      },
+      title: "\u70B9\u51FB\u540E\u753B\u5E03\u843D\u70B9\uFF0C\u6216\u62D6\u62FD\u5230\u753B\u5E03\u751F\u6210\u300C".concat(k.label, "\u300D")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(PREFIX, "-toolbar-preview-cell"),
+      style: {
+        width: cellW,
+        height: cellH
+      }
+    }, renderPreviewItem ? /*#__PURE__*/React.createElement("div", {
+      className: "".concat(PREFIX, "-toolbar-preview-content"),
+      style: placementLike ? {
+        width: previewW,
+        height: previewH,
+        transform: "scale(".concat(placeScale, ")"),
+        transformOrigin: 'top left'
+      } : isStage ? {
+        width: item.width,
+        height: item.height,
+        transform: "scale(".concat(stageScale, ")"),
+        transformOrigin: 'top left'
+      } : undefined
+    }, renderPreviewItem(item)) : /*#__PURE__*/React.createElement("span", {
+      className: "".concat(PREFIX, "-toolbar-preview-fallback")
+    }, k.label)), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(PREFIX, "-toolbar-preview-card-label")
+    }, k.label)), isActive && policy !== 'none' && /*#__PURE__*/React.createElement(React.Fragment, null, allowedKeys.length >= 1 && /*#__PURE__*/React.createElement("div", {
+      className: "".concat(PREFIX, "-toolbar-record-pick")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(PREFIX, "-toolbar-record-pick-label")
+    }, "\u6570\u636E\u7ED1\u5B9A\uFF08\u53EF\u9009\uFF09"), /*#__PURE__*/React.createElement(Select, {
+      placeholder: "\u9009\u62E9\u6570\u636E\u6E90",
+      allowClear: true,
+      value: placeMode.type === 'scene' ? placeMode.dataSourceKey : undefined,
+      options: allowedKeys.map(function (key) {
+        var _dataSourceLabels$key;
+        return {
+          value: key,
+          label: (_dataSourceLabels$key = dataSourceLabels[key]) !== null && _dataSourceLabels$key !== void 0 ? _dataSourceLabels$key : key
+        };
+      }),
+      onChange: function onChange(v) {
+        if ((placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === 'scene') handleDsChange(placeMode, v);
+      },
+      size: "large",
+      style: {
+        width: '100%'
+      }
+    }), function () {
+      var mode = (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === 'scene' ? placeMode : null;
+      var key = mode === null || mode === void 0 ? void 0 : mode.dataSourceKey;
+      if (!key) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "".concat(PREFIX, "-toolbar-record-pick-hint")
+        }, "\u9009\u62E9\u6570\u636E\u6E90\u540E\u53EF\u9009\u7ED1\u5B9A\u6570\u636E\u884C\uFF0C\u6216\u76F4\u63A5\u843D\u70B9\u5360\u4F4D\u3002");
+      }
+      var unplaced = getUnplacedRecordsForKey(key, dataSources, sceneElements);
+      if (unplaced.length === 0) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "".concat(PREFIX, "-toolbar-record-pick-hint")
+        }, "\u5F53\u524D\u6570\u636E\u6E90\u65E0\u672A\u7ED1\u5B9A\u8BB0\u5F55\uFF0C\u6216\u5217\u8868\u4E3A\u7A7A\uFF1B\u53EF\u76F4\u63A5\u5728\u753B\u5E03\u843D\u70B9\u5360\u4F4D\u3002");
+      }
+      var recordValue = mode !== null && mode !== void 0 && mode.recordIds && mode.recordIds.length > 0 ? mode.recordIds : mode !== null && mode !== void 0 && mode.recordId ? [mode.recordId] : undefined;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select, {
+        mode: "multiple",
+        placeholder: "\u9009\u62E9\u8981\u5C55\u793A\u7684\u8BB0\u5F55\uFF08\u53EF\u9009\uFF0C\u53EF\u591A\u9009\uFF09",
+        allowClear: true,
+        maxTagCount: "responsive",
+        value: recordValue,
+        options: unplaced.map(function (r) {
+          return {
+            value: r.id,
+            label: formatDataRecordOptionLabel(r)
+          };
+        }),
+        onChange: function onChange(v) {
+          if (mode) handleRecordsChange(mode, v);
+        },
+        size: "large",
+        style: {
+          width: '100%',
+          marginTop: 4
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(PREFIX, "-toolbar-record-pick-hint")
+      }, "\u53EF\u9009\u591A\u6761\uFF0C\u5728\u753B\u5E03\u70B9\u51FB\u4E00\u6B21\u5C06\u6309\u9636\u68AF\u504F\u79FB\u843D\u591A\u6761\uFF1B\u7559\u7A7A\u5219\u5148\u5360\u4F4D\uFF0C\u7A0D\u540E\u5728\u4FA7\u680F\u7ED1\u5B9A\u3002"));
+    }()), allowedKeys.length === 0 && /*#__PURE__*/React.createElement("div", {
+      className: "".concat(PREFIX, "-toolbar-record-hint")
+    }, "\u65E0\u53EF\u7528\u6570\u636E\u6E90"), /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "".concat(PREFIX, "-toolbar-btn cancel-inline"),
+      onClick: cancelPlaceMode
+    }, "\u53D6\u6D88\u65B0\u5EFA")), isActive && policy === 'none' && /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "".concat(PREFIX, "-toolbar-btn cancel-inline"),
+      onClick: cancelPlaceMode
+    }, "\u53D6\u6D88\u65B0\u5EFA"));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(PREFIX, "-toolbar"), "".concat(PREFIX, "-toolbar-sidebar"), className)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-toolbar-body")
+  }, canCreate && /*#__PURE__*/React.createElement(React.Fragment, null, categories.map(function (cat) {
+    var _kindsByCategory$get;
+    var kinds = (_kindsByCategory$get = kindsByCategory.get(cat.id)) !== null && _kindsByCategory$get !== void 0 ? _kindsByCategory$get : [];
+    if (!kinds.length) return null;
+    return /*#__PURE__*/React.createElement("section", {
+      key: cat.id,
+      className: "".concat(PREFIX, "-toolbar-section")
+    }, /*#__PURE__*/React.createElement("h3", {
+      className: "".concat(PREFIX, "-toolbar-section-title")
+    }, cat.label), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(PREFIX, "-toolbar-preview-list")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(PREFIX, "-toolbar-preview-group")
+    }, kinds.map(function (k) {
+      return renderKindCard(k);
+    }))));
+  }))), onSave && config.canvasUi.canEdit && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-toolbar-footer")
+  }, layoutDirty ? /*#__PURE__*/React.createElement("span", {
+    className: "".concat(PREFIX, "-toolbar-dirty-hint"),
+    role: "status"
+  }, "\u5E03\u5C40\u5DF2\u4FEE\u6539\uFF0C\u8BF7\u70B9\u51FB\u300C\u4FDD\u5B58\u300D\u6301\u4E45\u5316\u3002") : null, saveError && /*#__PURE__*/React.createElement("span", {
+    className: "".concat(PREFIX, "-toolbar-error")
+  }, typeof saveError === 'string' ? saveError : saveError === null || saveError === void 0 ? void 0 : saveError.message), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: classNames("".concat(PREFIX, "-toolbar-btn"), 'primary', _defineProperty({}, "".concat(PREFIX, "-toolbar-save-dirty"), layoutDirty)),
+    disabled: saving,
+    onClick: onSave
+  }, saving ? '保存中...' : '保存')));
+}
+export default FloorMapToolbar;

package/es/components/pisellFloorMapLayout/components/FloorMapToolbar.less

@@ -0,0 +1,239 @@
+/* 左侧侧边栏：添加数据图元 / 添加装饰（图元预览）+ 保存 */
+.pisell-floor-map-layout-toolbar {
+  &.pisell-floor-map-layout-toolbar-sidebar {
+    position: relative;
+    width: 248px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    background: #fff;
+    border-right: 1px solid #e8e8e8;
+    z-index: 10;
+  }
+
+  &-body {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 12px 10px;
+  }
+
+  &-section {
+    margin-bottom: 16px;
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+
+  &-section-title {
+    margin: 0 0 8px 0;
+    padding: 0 4px;
+    font-size: 13px;
+    font-weight: 600;
+    color: #262626;
+    line-height: 20px;
+  }
+
+  &-preview-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &-preview-group {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  &-preview-group-label {
+    padding: 0 4px;
+    font-size: 12px;
+    color: #8c8c8c;
+    line-height: 18px;
+  }
+
+  &-preview-card-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    align-items: stretch;
+  }
+
+  &-preview-card {
+    display: block;
+    width: 100%;
+    padding: 6px;
+    text-align: center;
+    background: #fafafa;
+    border: 1px solid #e8e8e8;
+    border-radius: 6px;
+    cursor: grab;
+    transition: border-color 0.2s, background 0.2s;
+
+    &:hover {
+      background: #f0f7ff;
+      border-color: #91caff;
+    }
+
+    &.pisell-floor-map-layout-toolbar-preview-card-active {
+      background: #e6f4ff;
+      border-color: #1677ff;
+      box-shadow: 0 0 0 1px #1677ff;
+    }
+
+    &.pisell-floor-map-layout-toolbar-preview-card-deco {
+      .pisell-floor-map-layout-toolbar-preview-cell {
+        margin: 0 auto;
+      }
+    }
+  }
+
+  &-preview-card-label {
+    display: block;
+    margin-top: 4px;
+    font-size: 12px;
+    color: #262626;
+    line-height: 18px;
+  }
+
+  &-preview-cell {
+    position: relative;
+    margin: 0 auto;
+    overflow: hidden;
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
+
+  &-preview-content {
+    pointer-events: none;
+  }
+
+  &-preview-cell {
+    .pisell-floor-map-layout-toolbar-preview-content {
+      overflow: hidden;
+    }
+  }
+
+  &-preview-fallback {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    min-height: 40px;
+    font-size: 12px;
+    color: #8c8c8c;
+  }
+
+  &-btn {
+    display: block;
+    width: 100%;
+    margin-top: 8px;
+    padding: 10px 16px;
+    font-size: 15px;
+    min-height: 40px;
+    color: #333;
+    background: #f5f5f5;
+    border: 1px solid #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+
+    &:hover {
+      color: #1677ff;
+      border-color: #1677ff;
+      background: #e6f4ff;
+    }
+
+    &.cancel {
+      color: #8c8c8c;
+      margin-top: 12px;
+    }
+
+    &.cancel-inline {
+      margin-top: 0;
+      padding: 8px 12px;
+      font-size: 14px;
+      min-height: 40px;
+      color: #8c8c8c;
+    }
+
+    &.primary {
+      color: #fff;
+      background: #1677ff;
+      border-color: #1677ff;
+
+      &:hover:not(:disabled) {
+        background: #4096ff;
+        border-color: #4096ff;
+      }
+
+      &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  &-footer {
+    flex-shrink: 0;
+    padding: 12px 10px;
+    border-top: 1px solid #f0f0f0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &-dirty-hint {
+    font-size: 12px;
+    line-height: 1.45;
+    color: #d48806;
+    padding: 6px 8px;
+    background: #fffbe6;
+    border: 1px solid #ffe58f;
+    border-radius: 6px;
+  }
+
+  &-save-dirty {
+    box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.35);
+  }
+
+  &-error {
+    font-size: 12px;
+    color: #ff4d4f;
+  }
+
+  &-record-pick {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 8px;
+    margin-top: 4px;
+    background: #f5f5f5;
+    border-radius: 6px;
+    border: 1px solid #e8e8e8;
+  }
+
+  &-record-pick-label {
+    font-size: 12px;
+    font-weight: 600;
+    color: #434343;
+  }
+
+  &-record-pick-hint {
+    font-size: 11px;
+    color: #8c8c8c;
+    line-height: 1.45;
+  }
+
+  &-record-hint {
+    font-size: 11px;
+    color: #8c8c8c;
+    padding: 6px 8px;
+    margin-top: 4px;
+    line-height: 1.45;
+    background: #fafafa;
+    border-radius: 4px;
+  }
+}

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

@@ -0,0 +1,48 @@
+/**
+ * ItemLayer - 楼层图展示层
+ * 按 items 的 (x, y) 与 cellSize 定位，用 renderItem 渲染每项内容
+ */
+import React from 'react';
+import type { FloorMapItemBase, FloorMapItemUnit } from '../types';
+import type { CSSProperties } from 'react';
+import './ItemLayer.less';
+export interface ItemLayerProps<T extends FloorMapItemBase> {
+    /** 资源列表 */
+    items: T[];
+    /** 每项渲染函数 */
+    renderItem: (item: T, index: number) => React.ReactNode;
+    /** 每项 key */
+    rowKey?: string | ((item: T, index: number) => string);
+    /** 每格像素尺寸（cell 单位时用；pixel 单位时作为缺省宽高） */
+    cellSize: number;
+    /** item 坐标与尺寸单位：cell 格子数，pixel 像素 */
+    itemUnit?: FloorMapItemUnit;
+    /** item 之间的间距（像素），仅 cell 单位时生效 */
+    itemGap?: number;
+    /** 内容区总宽度（像素），由 items 推导或外部传入 */
+    contentWidth: number;
+    /** 内容区总高度（像素） */
+    contentHeight: number;
+    /** 内容区 X 偏移（画布包围盒向左/上扩展时，图元层整体平移） */
+    contentOffsetX?: number;
+    /** 内容区 Y 偏移 */
+    contentOffsetY?: number;
+    /** 是否启用 hover 事件 */
+    enableHover?: boolean;
+    /** 点击回调 */
+    onItemClick?: (item: T, index: number, e: React.MouseEvent<HTMLElement>) => void;
+    /** hover 进入 */
+    onItemHover?: (item: T, index: number, e: React.MouseEvent<HTMLElement>) => void;
+    /** hover 离开 */
+    onItemLeave?: (item: T, index: number, e: React.MouseEvent<HTMLElement>) => void;
+    /** 每项外层容器额外样式（与定位样式合并） */
+    getMergedItemWrapperStyle?: (item: T, index: number) => CSSProperties | undefined;
+    /**
+     * 与编辑态一致：在含 `data-pisell-floor-room-scroll-surface` 的区域内按下时置 true，
+     * 用于禁用 Transform 画布平移，避免图元内纵向滑动拖动画布。
+     */
+    onInteractionChange?: (active: boolean) => void;
+    className?: string;
+}
+export declare function ItemLayer<T extends FloorMapItemBase>(props: ItemLayerProps<T>): React.JSX.Element;
+export default ItemLayer;