@pisell/materials 1.0.1059 → 1.0.1062

package/es/components/pisellFloorMapLayout/PisellFloorMapLayout.js

@@ -1,195 +1,291 @@
+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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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 _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; }
-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(_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 e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 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; }
+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); }
 /**
  * PisellFloorMapLayout - 空间布局视图
- * 在二维平面按坐标渲染资源，支持缩放/平移/复位，仅负责展示与交互
+ * 支持两种用法：1) 仅传入 items + renderItem（原有用法）；2) 传入 floorMapConfig + dataSources + mode 使用平面图视图（含多画布/编辑态）
  */
 import React, { useMemo, useRef, useImperativeHandle, useCallback, useState, useEffect } from 'react';
 import classNames from 'classnames';
 import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
 import MapLayer from "./components/MapLayer";
 import ItemLayer from "./components/ItemLayer";
-import ViewControls from "./components/ViewControls";
+import { EditableItemLayer } from "./components/EditableItemLayer";
+import { FloorMapToolbar } from "./components/FloorMapToolbar";
+import { FloorMapEditTopBar } from "./components/FloorMapEditTopBar";
+import { CanvasTabs } from "./components/CanvasTabs";
+import { FloorMapEditPanel } from "./components/FloorMapEditPanel";
+import { ViewControlsWithZoom } from "./components/ViewControlsWithZoom";
+import { useFloorMapEditState } from "./hooks/useFloorMapEditState";
+import { useFloorMapTransformMetrics } from "./hooks/useFloorMapTransformMetrics";
+import { DEFAULT_CELL_SIZE, gapToPx } from "./utils/layoutMeasurements";
+import { renderFloorMapFallbackPlaceholder, renderFloorMapRenderError } from "./utils/floorMapFallbackRender";
+import { getElementKindConfig, getSceneElementRenderIssue } from "./utils/floorMapElementKindUtils";
+import { isFloorMapPaletteDrag, parsePaletteDragPayload, sceneXYFromContentDropOffset } from "./utils/floorMapDropUtils";
+import { useFloorMapPaletteTouchDrag } from "./hooks/useFloorMapPaletteTouchDrag";
+import { mergeCanvasesForTabs } from "./utils/mergeCanvasesForTabs";
+import { useFloorMapLayoutContext } from "./context/FloorMapLayoutContext";
+import { mergeFloorMapLayoutPropsFromContext } from "./context/mergeFloorMapLayoutContext";
+import useEngineContext from "../../hooks/useEngineContext";
+import { locales } from '@pisell/utils';
+import { initFloorMapLayoutLocales } from "./utils/floorMapCanvasDisplay";
 import "./PisellFloorMapLayout.less";
 var PREFIX = 'pisell-floor-map-layout';
-
-/** 默认每格像素 */
-var DEFAULT_CELL_SIZE = 64;
-
-/** 默认 item 间距（像素） */
-var DEFAULT_ITEM_GAP = 8;
-
-/**
- * 将 mapLayer.gap 解析为像素数
- */
-function gapToPx(gap) {
-  if (gap === undefined) return DEFAULT_ITEM_GAP;
-  if (typeof gap === 'number') return gap;
-  var match = String(gap).match(/^(\d+(?:\.\d+)?)\s*px?$/i);
-  return match ? Number(match[1]) : DEFAULT_ITEM_GAP;
-}
-
-/**
- * 根据 items 计算内容区像素宽高
- * - cell：按格子数 + cellSize + itemGap 计算
- * - pixel：按 item 的 x/y/width/height 像素取边界
- */
-function getContentSize(items, cellSize, itemGap, itemUnit) {
-  if (!items.length) {
-    if (itemUnit === 'pixel') {
-      return {
-        contentWidth: cellSize * 4,
-        contentHeight: cellSize * 3
-      };
-    }
-    var _g = itemGap;
-    return {
-      contentWidth: 4 * (cellSize + _g) + _g,
-      contentHeight: 3 * (cellSize + _g) + _g
-    };
-  }
-  if (itemUnit === 'pixel') {
-    var maxRight = 0;
-    var maxBottom = 0;
-    var _iterator = _createForOfIteratorHelper(items),
-      _step;
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var _item$width, _item$height;
-        var item = _step.value;
-        var w = (_item$width = item.width) !== null && _item$width !== void 0 ? _item$width : cellSize;
-        var h = (_item$height = item.height) !== null && _item$height !== void 0 ? _item$height : cellSize;
-        maxRight = Math.max(maxRight, item.x + w);
-        maxBottom = Math.max(maxBottom, item.y + h);
-      }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
-    }
-    return {
-      contentWidth: maxRight,
-      contentHeight: maxBottom
-    };
-  }
-  var maxX = 0;
-  var maxY = 0;
-  var _iterator2 = _createForOfIteratorHelper(items),
-    _step2;
-  try {
-    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-      var _item$width2, _item$height2;
-      var _item = _step2.value;
-      var _w = (_item$width2 = _item.width) !== null && _item$width2 !== void 0 ? _item$width2 : 1;
-      var _h = (_item$height2 = _item.height) !== null && _item$height2 !== void 0 ? _item$height2 : 1;
-      maxX = Math.max(maxX, _item.x + _w);
-      maxY = Math.max(maxY, _item.y + _h);
-    }
-  } catch (err) {
-    _iterator2.e(err);
-  } finally {
-    _iterator2.f();
-  }
-  var g = itemGap;
-  return {
-    contentWidth: maxX * (cellSize + g) + g,
-    contentHeight: maxY * (cellSize + g) + g
-  };
-}
 function PisellFloorMapLayoutInner(props, ref) {
-  var className = props.className,
-    style = props.style,
-    items = props.items,
-    renderItem = props.renderItem,
-    rowKey = props.rowKey,
-    mapLayer = props.mapLayer,
-    cellSizeProp = props.cellSize,
-    _props$itemUnit = props.itemUnit,
-    itemUnit = _props$itemUnit === void 0 ? 'cell' : _props$itemUnit,
-    _props$layoutMode = props.layoutMode,
-    layoutMode = _props$layoutMode === void 0 ? 'free' : _props$layoutMode,
-    gridLayout = props.gridLayout,
-    _props$zoom = props.zoom,
-    zoom = _props$zoom === void 0 ? {} : _props$zoom,
-    _props$pan = props.pan,
-    pan = _props$pan === void 0 ? {} : _props$pan,
-    _props$controls = props.controls,
-    controls = _props$controls === void 0 ? {} : _props$controls,
-    _props$enableHover = props.enableHover,
-    enableHover = _props$enableHover === void 0 ? true : _props$enableHover,
-    onItemClick = props.onItemClick,
-    onItemHover = props.onItemHover,
-    onItemLeave = props.onItemLeave;
-
-  /** 缩放平移库暴露的 API，由 TransformWrapper 的 render 参数注入 */
+  var _engineCtx$engine, _config$sceneElements, _mapLayer$boundingPad;
+  var layoutCtx = useFloorMapLayoutContext();
+  var p = mergeFloorMapLayoutPropsFromContext(props, layoutCtx);
+  var className = p.className,
+    style = p.style,
+    itemsProp = p.items,
+    renderItem = p.renderItem,
+    rowKey = p.rowKey,
+    renderItemByKind = p.renderItemByKind,
+    getMergedItemWrapperStyle = p.getMergedItemWrapperStyle,
+    mapLayer = p.mapLayer,
+    cellSizeProp = p.cellSize,
+    _p$itemUnit = p.itemUnit,
+    itemUnit = _p$itemUnit === void 0 ? 'cell' : _p$itemUnit,
+    _p$zoom = p.zoom,
+    zoom = _p$zoom === void 0 ? {} : _p$zoom,
+    _p$pan = p.pan,
+    pan = _p$pan === void 0 ? {} : _p$pan,
+    _p$controls = p.controls,
+    controls = _p$controls === void 0 ? {} : _p$controls,
+    _p$enableHover = p.enableHover,
+    enableHover = _p$enableHover === void 0 ? true : _p$enableHover,
+    onItemClick = p.onItemClick,
+    onItemHover = p.onItemHover,
+    onItemLeave = p.onItemLeave,
+    _p$mode = p.mode,
+    mode = _p$mode === void 0 ? 'read' : _p$mode,
+    floorMapConfigProp = p.floorMapConfig,
+    dataSources = p.dataSources,
+    onSave = p.onSave,
+    onDataSourceRecordSave = p.onDataSourceRecordSave,
+    dataSourceLabels = p.dataSourceLabels,
+    dataSourceFormColumns = p.dataSourceFormColumns,
+    dataSourceRecordForm = p.dataSourceRecordForm,
+    loading = p.loading,
+    saveError = p.saveError,
+    onElementRenderError = p.onElementRenderError,
+    _p$toolbarShowSave = p.toolbarShowSave,
+    toolbarShowSave = _p$toolbarShowSave === void 0 ? true : _p$toolbarShowSave,
+    floorMapFullscreenMode = p.floorMapFullscreenMode,
+    showDataSourceRecordFormBlock = p.showDataSourceRecordFormBlock;
+  var isFloorMapView = Boolean(floorMapConfigProp);
+  var contentOffsetRef = useRef({
+    x: 0,
+    y: 0
+  });
+  var mapDropLayerRef = useRef(null);
   var transformRef = useRef(null);
-  var containerRef = useRef(null);
+  var edit = useFloorMapEditState({
+    floorMapConfigProp: floorMapConfigProp,
+    isFloorMapView: isFloorMapView,
+    itemsProp: itemsProp,
+    cellSizeProp: cellSizeProp,
+    dataSources: dataSources,
+    onSave: onSave,
+    onDataSourceRecordSave: onDataSourceRecordSave,
+    dataSourceFormColumns: dataSourceFormColumns,
+    dataSourceRecordForm: dataSourceRecordForm,
+    dataSourceLabels: dataSourceLabels,
+    layoutPrefix: PREFIX,
+    contentOffsetRef: contentOffsetRef,
+    showDataSourceRecordFormBlock: showDataSourceRecordFormBlock
+  });
+  var config = edit.config,
+    currentCanvasId = edit.currentCanvasId,
+    setCurrentCanvasId = edit.setCurrentCanvasId,
+    selectedId = edit.selectedId,
+    setSelectedId = edit.setSelectedId,
+    placeMode = edit.placeMode,
+    setPlaceMode = edit.setPlaceMode,
+    items = edit.items,
+    saving = edit.saving,
+    savingRecord = edit.savingRecord,
+    handleAddCanvas = edit.handleAddCanvas,
+    handleRemoveCanvas = edit.handleRemoveCanvas,
+    handleRenameCanvas = edit.handleRenameCanvas,
+    handleUpdateItem = edit.handleUpdateItem,
+    handleCanvasPlaceClick = edit.handleCanvasPlaceClick,
+    handleSave = edit.handleSave,
+    placeSceneElementFromPaletteDrop = edit.placeSceneElementFromPaletteDrop,
+    editPanelParams = edit.editPanelParams,
+    placeOverlayClass = edit.placeOverlayClass,
+    isLayoutDirty = edit.isLayoutDirty;
+  var canvasesForTabs = useMemo(function () {
+    return config ? mergeCanvasesForTabs(config) : [];
+  }, [config]);
+  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 showReadModeCanvasTabsBar = useMemo(function () {
+    if (!isFloorMapView || mode !== 'read' || !config) return false;
+    return canvasesForTabs.filter(function (c) {
+      return c.enabled;
+    }).length > 1;
+  }, [isFloorMapView, mode, config, canvasesForTabs]);
+  var readCanvasTabsAriaLabel = useMemo(function () {
+    initFloorMapLayoutLocales(engineLocale);
+    return locales.getText('pisell-floor-map-layout.read-canvas-tabs.aria');
+  }, [engineLocale]);
+  var loadingLabel = useMemo(function () {
+    initFloorMapLayoutLocales(engineLocale);
+    return locales.getText('pisell-floor-map-layout.loading');
+  }, [engineLocale]);
   var cellSize = cellSizeProp !== null && cellSizeProp !== void 0 ? cellSizeProp : DEFAULT_CELL_SIZE;
   var itemGap = useMemo(function () {
     return gapToPx(mapLayer === null || mapLayer === void 0 ? void 0 : mapLayer.gap);
   }, [mapLayer === null || mapLayer === void 0 ? void 0 : mapLayer.gap]);
-  var _useMemo = useMemo(function () {
-      return getContentSize(items, cellSize, itemGap, itemUnit);
-    }, [items, cellSize, itemGap, itemUnit]),
-    contentWidth = _useMemo.contentWidth,
-    contentHeight = _useMemo.contentHeight;
-  var zoomConfig = useMemo(function () {
-    var _zoom$defaultScale, _zoom$min, _zoom$max, _zoom$step;
-    return {
-      initialScale: (_zoom$defaultScale = zoom.defaultScale) !== null && _zoom$defaultScale !== void 0 ? _zoom$defaultScale : 1,
-      minScale: (_zoom$min = zoom.min) !== null && _zoom$min !== void 0 ? _zoom$min : 0.5,
-      maxScale: (_zoom$max = zoom.max) !== null && _zoom$max !== void 0 ? _zoom$max : 2,
-      step: (_zoom$step = zoom.step) !== null && _zoom$step !== void 0 ? _zoom$step : 0.1
-    };
-  }, [zoom.defaultScale, zoom.min, zoom.max, zoom.step]);
-  var _useState = useState(zoomConfig.initialScale),
+  var effectiveItemUnit = isFloorMapView ? 'pixel' : itemUnit;
+  var metrics = useFloorMapTransformMetrics({
+    items: items,
+    cellSize: cellSize,
+    itemGap: itemGap,
+    effectiveItemUnit: effectiveItemUnit,
+    isFloorMapView: isFloorMapView,
+    mode: mode,
+    zoom: zoom,
+    transformRef: transformRef,
+    contentOffsetRef: contentOffsetRef,
+    boundingPadding: mapLayer === null || mapLayer === void 0 ? void 0 : mapLayer.boundingPadding,
+    frameResetKey: isFloorMapView ? currentCanvasId !== null && currentCanvasId !== void 0 ? currentCanvasId : '' : undefined
+  });
+  var containerRef = metrics.containerRef,
+    mapAreaRef = metrics.mapAreaRef,
+    mapAreaSize = metrics.mapAreaSize,
+    contentWidth = metrics.contentWidth,
+    contentHeight = metrics.contentHeight,
+    contentOffsetX = metrics.contentOffsetX,
+    contentOffsetY = metrics.contentOffsetY,
+    initialPositionX = metrics.initialPositionX,
+    initialPositionY = metrics.initialPositionY,
+    zoomConfig = metrics.zoomConfig,
+    scale = metrics.scale,
+    setScale = metrics.setScale,
+    isFullscreen = metrics.isFullscreen,
+    toggleFullscreen = metrics.toggleFullscreen,
+    fitBounds = metrics.fitBounds,
+    lastTransformRef = metrics.lastTransformRef,
+    isInteractingWithElement = metrics.isInteractingWithElement,
+    setIsInteractingWithElement = metrics.setIsInteractingWithElement;
+
+  /** 编辑态全屏策略：toggle 可切换；locked 始终全屏顶栏且不可在组件内退出；disabled 无全屏按钮 */
+  var fsMode = floorMapFullscreenMode !== null && floorMapFullscreenMode !== void 0 ? floorMapFullscreenMode : 'toggle';
+  var useFullTopChrome = isFloorMapView && mode === 'edit' && (fsMode === 'locked' || fsMode === 'toggle' && isFullscreen);
+  /** 仅 toggle 时向顶栏/控件传入，避免 locked/disabled 误显全屏按钮 */
+  var editToggleFullscreen = fsMode === 'toggle' ? toggleFullscreen : undefined;
+  var viewControlsConfig = useMemo(function () {
+    if (!isFloorMapView || mode !== 'edit') return controls;
+    return _objectSpread(_objectSpread({}, controls), {}, {
+      showFullscreen: false,
+      showFitBounds: false
+    });
+  }, [isFloorMapView, mode, controls]);
+  var topBarExtraActions = useMemo(function () {
+    if (!isFloorMapView || mode !== 'edit') return null;
+    if (controls.showFitBounds !== true) return null;
+    return /*#__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 fitBounds();
+      },
+      "aria-label": "\u533A\u57DF\u5B9A\u4F4D",
+      title: "\u533A\u57DF\u5B9A\u4F4D"
+    }, "\u229E");
+  }, [isFloorMapView, mode, controls.showFitBounds, fitBounds]);
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    scale = _useState2[0],
-    setScale = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isFullscreen = _useState4[0],
-    setIsFullscreen = _useState4[1];
+    mapPaletteDragActive = _useState2[0],
+    setMapPaletteDragActive = _useState2[1];
   useEffect(function () {
-    var el = containerRef.current;
-    if (!el) return;
-    var onFullscreenChange = function onFullscreenChange() {
-      return setIsFullscreen(document.fullscreenElement === el);
+    var clear = function clear() {
+      return setMapPaletteDragActive(false);
     };
-    document.addEventListener('fullscreenchange', onFullscreenChange);
+    window.addEventListener('dragend', clear);
     return function () {
-      return document.removeEventListener('fullscreenchange', onFullscreenChange);
+      return window.removeEventListener('dragend', clear);
     };
   }, []);
-  var toggleFullscreen = useCallback(function () {
-    var el = containerRef.current;
-    if (!el) return;
-    if (document.fullscreenElement) {
-      var _document$exitFullscr, _document;
-      (_document$exitFullscr = (_document = document).exitFullscreen) === null || _document$exitFullscr === void 0 || _document$exitFullscr.call(_document);
-    } else {
-      var _el$requestFullscreen;
-      (_el$requestFullscreen = el.requestFullscreen) === null || _el$requestFullscreen === void 0 || _el$requestFullscreen.call(el);
-    }
+  var handlePaletteDropOnCanvas = useCallback(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setMapPaletteDragActive(false);
+    if (!isFloorMapView || mode !== 'edit') return;
+    var payload = parsePaletteDragPayload(e.dataTransfer);
+    if (!payload) return;
+    var _sceneXYFromContentDr = sceneXYFromContentDropOffset(e.nativeEvent.offsetX, e.nativeEvent.offsetY, contentOffsetRef.current),
+      cx = _sceneXYFromContentDr.x,
+      cy = _sceneXYFromContentDr.y;
+    placeSceneElementFromPaletteDrop(cx, cy, {
+      type: 'scene',
+      elementKind: payload.elementKind,
+      dataSourceKey: payload.dataSourceKey,
+      recordId: payload.recordId
+    });
+  }, [isFloorMapView, mode, placeSceneElementFromPaletteDrop]);
+  var applyPaletteTouchDropInScene = useCallback(function (payload, cx, cy) {
+    if (!isFloorMapView || mode !== 'edit') return;
+    placeSceneElementFromPaletteDrop(cx, cy, {
+      type: 'scene',
+      elementKind: payload.elementKind,
+      dataSourceKey: payload.dataSourceKey,
+      recordId: payload.recordId
+    });
+  }, [isFloorMapView, mode, placeSceneElementFromPaletteDrop]);
+  var paletteTouchDrag = useFloorMapPaletteTouchDrag({
+    enabled: Boolean(isFloorMapView && mode === 'edit' && (config === null || config === void 0 ? void 0 : config.canvasUi.canCreate)),
+    mapDropLayerRef: mapDropLayerRef,
+    contentWidth: contentWidth,
+    contentHeight: contentHeight,
+    contentOffsetRef: contentOffsetRef,
+    setMapPaletteDragActive: setMapPaletteDragActive,
+    onDropInScene: applyPaletteTouchDropInScene
+  });
+  var fallbackPlaceholderRender = useCallback(function (item) {
+    return renderFloorMapFallbackPlaceholder(item);
   }, []);
-  var fitBounds = useCallback(function () {
-    var _zoom$max2;
-    var ctx = transformRef.current;
-    var container = containerRef.current;
-    if (!ctx || !container) return;
-    var wrapper = container.querySelector('.react-transform-wrapper');
-    if (!wrapper) return;
-    var wrapperRect = wrapper.getBoundingClientRect();
-    var scale = Math.min(wrapperRect.width / contentWidth, wrapperRect.height / contentHeight, (_zoom$max2 = zoom.max) !== null && _zoom$max2 !== void 0 ? _zoom$max2 : 2);
-    var x = (wrapperRect.width - contentWidth * scale) / 2;
-    var y = (wrapperRect.height - contentHeight * scale) / 2;
-    ctx.setTransform(x, y, scale);
-  }, [contentWidth, contentHeight, zoom.max]);
+  var effectiveRenderItem = useCallback(function (item, index, options) {
+    var merged = item;
+    var kind = merged === null || merged === void 0 ? void 0 : merged.elementKind;
+    if (isFloorMapView && floorMapConfigProp && merged._sceneElement) {
+      var kc = getElementKindConfig(floorMapConfigProp, kind);
+      var issue = getSceneElementRenderIssue(merged._sceneElement, kc, dataSources);
+      if (issue) {
+        return renderFloorMapRenderError(issue);
+      }
+    }
+    if (isFloorMapView && kind && renderItemByKind !== null && renderItemByKind !== void 0 && renderItemByKind[kind]) {
+      try {
+        return renderItemByKind[kind](item, index, options);
+      } catch (err) {
+        if (merged._sceneElement) {
+          onElementRenderError === null || onElementRenderError === void 0 || onElementRenderError(merged._sceneElement, err);
+        }
+        return renderFloorMapRenderError(err instanceof Error ? err.message : String(err));
+      }
+    }
+    if (isFloorMapView && kind) {
+      return fallbackPlaceholderRender(merged);
+    }
+    return renderItem(item, index, options);
+  }, [isFloorMapView, floorMapConfigProp, dataSources, renderItemByKind, renderItem, fallbackPlaceholderRender, onElementRenderError]);
+  var handleItemClick = useCallback(function (item, index, e) {
+    if (isFloorMapView && mode === 'edit') setSelectedId(item.id);
+    onItemClick === null || onItemClick === void 0 || onItemClick(item, index, e);
+  }, [isFloorMapView, mode, onItemClick, setSelectedId]);
   useImperativeHandle(ref, function () {
     return {
       zoomIn: function zoomIn() {
@@ -204,46 +300,164 @@ function PisellFloorMapLayoutInner(props, ref) {
         var _transformRef$current3;
         return (_transformRef$current3 = transformRef.current) === null || _transformRef$current3 === void 0 ? void 0 : _transformRef$current3.resetTransform();
       },
-      fitBounds: fitBounds
-    };
-  }, [fitBounds]);
-  var controlsApi = useMemo(function () {
-    return {
-      zoomIn: function zoomIn() {
-        var _transformRef$current4;
-        return (_transformRef$current4 = transformRef.current) === null || _transformRef$current4 === void 0 ? void 0 : _transformRef$current4.zoomIn();
-      },
-      zoomOut: function zoomOut() {
-        var _transformRef$current5;
-        return (_transformRef$current5 = transformRef.current) === null || _transformRef$current5 === void 0 ? void 0 : _transformRef$current5.zoomOut();
-      },
-      resetTransform: function resetTransform() {
-        var _transformRef$current6;
-        return (_transformRef$current6 = transformRef.current) === null || _transformRef$current6 === void 0 ? void 0 : _transformRef$current6.resetTransform();
-      },
       fitBounds: fitBounds,
-      toggleFullscreen: toggleFullscreen
+      saveLayout: function saveLayout() {
+        return handleSave();
+      }
     };
-  }, [fitBounds, toggleFullscreen]);
+  }, [fitBounds, handleSave]);
+  var showSidebar = isFloorMapView && mode === 'edit' && config && dataSources;
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
-    className: classNames(PREFIX, className),
-    style: style
+    className: classNames(PREFIX, className, _defineProperty(_defineProperty({}, "".concat(PREFIX, "-floor-map-view"), isFloorMapView), "".concat(PREFIX, "-mode-edit"), isFloorMapView && mode === 'edit')),
+    style: _objectSpread(_objectSpread({
+      display: 'flex',
+      flexDirection: 'column'
+    }, isFloorMapView ? {
+      minHeight: 0
+    } : {}), style)
+  }, isFloorMapView && mode === 'edit' && config && !useFullTopChrome && /*#__PURE__*/React.createElement(FloorMapEditTopBar, {
+    mode: "compact",
+    config: config,
+    canvases: canvasesForTabs,
+    currentCanvasId: currentCanvasId,
+    onTabChange: function onTabChange(id) {
+      setCurrentCanvasId(id);
+      setSelectedId(null);
+    },
+    canEditTabs: config.canvasUi.canEdit,
+    onAddCanvas: handleAddCanvas,
+    onRemoveCanvas: handleRemoveCanvas,
+    onRenameCanvas: handleRenameCanvas,
+    toggleFullscreen: editToggleFullscreen,
+    isFullscreen: false,
+    controls: controls
+  }), isFloorMapView && mode === 'edit' && config && useFullTopChrome && /*#__PURE__*/React.createElement(FloorMapEditTopBar, {
+    mode: "full",
+    config: config,
+    canvases: canvasesForTabs,
+    currentCanvasId: currentCanvasId,
+    onTabChange: function onTabChange(id) {
+      setCurrentCanvasId(id);
+      setSelectedId(null);
+    },
+    canEditTabs: config.canvasUi.canEdit,
+    onAddCanvas: handleAddCanvas,
+    onRemoveCanvas: handleRemoveCanvas,
+    onRenameCanvas: handleRenameCanvas,
+    onSave: onSave ? handleSave : undefined,
+    saving: saving,
+    saveError: saveError,
+    layoutDirty: isLayoutDirty,
+    toggleFullscreen: editToggleFullscreen,
+    isFullscreen: isFullscreen,
+    controls: controls,
+    extraActions: topBarExtraActions
+  }), showReadModeCanvasTabsBar && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-edit-top-bar ").concat(PREFIX, "-read-canvas-tabs-bar"),
+    role: "toolbar",
+    "aria-label": readCanvasTabsAriaLabel
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-edit-top-bar-tabs")
+  }, /*#__PURE__*/React.createElement(CanvasTabs, {
+    canvases: canvasesForTabs,
+    currentCanvasId: currentCanvasId,
+    onTabChange: function onTabChange(id) {
+      setCurrentCanvasId(id);
+      setSelectedId(null);
+    },
+    canEdit: false,
+    className: "".concat(PREFIX, "-edit-top-bar-canvas-tabs")
+  }))), loading && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-loading")
+  }, /*#__PURE__*/React.createElement("span", null, loadingLabel)), saveError && !(isFloorMapView && mode === 'edit' && config) && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-save-error")
+  }, typeof saveError === 'string' ? saveError : saveError === null || saveError === void 0 ? void 0 : saveError.message), /*#__PURE__*/React.createElement("div", {
+    className: showSidebar ? "".concat(PREFIX, "-edit-layout") : undefined,
+    style: {
+      flex: 1,
+      display: 'flex',
+      minHeight: 0
+    }
+  }, showSidebar && /*#__PURE__*/React.createElement(FloorMapToolbar, {
+    config: config,
+    dataSources: dataSources,
+    dataSourceLabels: dataSourceLabels,
+    canCreate: config.canvasUi.canCreate,
+    placeMode: placeMode,
+    onPlaceModeChange: setPlaceMode,
+    sceneElements: (_config$sceneElements = config.sceneElements) !== null && _config$sceneElements !== void 0 ? _config$sceneElements : [],
+    renderPreviewItem: function renderPreviewItem(item) {
+      return effectiveRenderItem(item, 0);
+    },
+    placementPreviewSize: {
+      width: 180,
+      height: 120
+    },
+    decorationPreviewSize: 48,
+    onSave: !useFullTopChrome && toolbarShowSave !== false && onSave && config.canvasUi.canEdit ? handleSave : undefined,
+    saving: saving,
+    saveError: saveError,
+    layoutDirty: isLayoutDirty,
+    onPaletteCardPointerDown: paletteTouchDrag.handlePaletteCardPointerDown,
+    consumeToolbarClickIfTouchDrag: paletteTouchDrag.consumeToolbarClickIfTouchDrag
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: mapAreaRef,
+    className: showSidebar ? "".concat(PREFIX, "-map-area") : undefined,
+    style: {
+      flex: 1,
+      position: 'relative',
+      minWidth: 0,
+      overflow: 'hidden'
+    },
+    onDragEnter: function onDragEnter(e) {
+      if (!isFloorMapView || mode !== 'edit') return;
+      if (!isFloorMapPaletteDrag(e.dataTransfer)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setMapPaletteDragActive(true);
+    },
+    onDragOver: function onDragOver(e) {
+      if (!isFloorMapView || mode !== 'edit' || !mapPaletteDragActive) return;
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    onDragLeave: function onDragLeave(e) {
+      var _mapAreaRef$current;
+      if (!mapPaletteDragActive) return;
+      var related = e.relatedTarget;
+      if (!((_mapAreaRef$current = mapAreaRef.current) !== null && _mapAreaRef$current !== void 0 && _mapAreaRef$current.contains(related))) {
+        setMapPaletteDragActive(false);
+      }
+    }
   }, /*#__PURE__*/React.createElement(TransformWrapper, {
+    key: isFloorMapView ? "fmap-".concat(currentCanvasId !== null && currentCanvasId !== void 0 ? currentCanvasId : 'na', "-bp").concat((_mapLayer$boundingPad = mapLayer === null || mapLayer === void 0 ? void 0 : mapLayer.boundingPadding) !== null && _mapLayer$boundingPad !== void 0 ? _mapLayer$boundingPad : 'd', "-z").concat(zoomConfig.initialScale) : 'fmap-layout',
+    centerOnInit: false,
     initialScale: zoomConfig.initialScale,
+    initialPositionX: initialPositionX,
+    initialPositionY: initialPositionY,
     minScale: zoomConfig.minScale,
-    maxScale: zoomConfig.maxScale,
+    maxScale: zoomConfig.maxScale
+    // v3 类型定义未包含 step，库仍支持缩放步进时使用
+    ,
     step: zoomConfig.step,
     panning: {
-      disabled: !pan.enabled
+      disabled: pan.enabled === false || isInteractingWithElement,
+      velocityDisabled: true
     },
     doubleClick: {
       disabled: true
     },
     onTransformed: function onTransformed(_, state) {
-      return setScale(state.scale);
+      setScale(state.scale);
+      lastTransformRef.current = {
+        x: state.positionX,
+        y: state.positionY,
+        scale: state.scale
+      };
     }
   }, function (ctx) {
+    var _mapLayer$snapStep;
     transformRef.current = ctx;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TransformComponent, {
       wrapperStyle: {
@@ -259,33 +473,91 @@ function PisellFloorMapLayoutInner(props, ref) {
         minHeight: contentHeight,
         position: 'relative',
         overflow: 'visible',
-        backgroundColor: '#F2F4F7'
+        backgroundColor: '#F2F4F7',
+        backgroundImage: ['linear-gradient(to right, rgba(0,0,0,0.08) 1px, transparent 1px)', 'linear-gradient(to bottom, rgba(0,0,0,0.08) 1px, transparent 1px)'].join(', '),
+        backgroundSize: '50px 50px'
       }
     }, /*#__PURE__*/React.createElement(MapLayer, {
       config: mapLayer,
       contentWidth: contentWidth,
       contentHeight: contentHeight,
-      cellSize: cellSize
-    }), /*#__PURE__*/React.createElement(ItemLayer, {
+      cellSize: cellSize,
+      preferCanvasGrid: true,
+      pointerEventsNone: isFloorMapView && mode === 'edit'
+    }), isFloorMapView && mode === 'edit' ? /*#__PURE__*/React.createElement(EditableItemLayer, {
       items: items,
-      renderItem: renderItem,
+      renderItem: effectiveRenderItem,
       rowKey: rowKey,
       cellSize: cellSize,
-      itemUnit: itemUnit,
+      itemUnit: effectiveItemUnit,
       itemGap: itemGap,
       contentWidth: contentWidth,
       contentHeight: contentHeight,
+      contentOffsetX: contentOffsetX,
+      contentOffsetY: contentOffsetY,
+      selectedId: selectedId,
+      onSelect: setSelectedId,
+      onUpdateItem: handleUpdateItem,
+      snapStep: (_mapLayer$snapStep = mapLayer === null || mapLayer === void 0 ? void 0 : mapLayer.snapStep) !== null && _mapLayer$snapStep !== void 0 ? _mapLayer$snapStep : 0,
+      scale: scale,
+      onInteractionChange: setIsInteractingWithElement,
+      getMergedItemWrapperStyle: getMergedItemWrapperStyle
+    }) : /*#__PURE__*/React.createElement(ItemLayer, {
+      items: items,
+      renderItem: effectiveRenderItem,
+      rowKey: rowKey,
+      cellSize: cellSize,
+      itemUnit: effectiveItemUnit,
+      itemGap: itemGap,
+      contentWidth: contentWidth,
+      contentHeight: contentHeight,
+      contentOffsetX: contentOffsetX,
+      contentOffsetY: contentOffsetY,
       enableHover: enableHover,
-      onItemClick: onItemClick,
+      onItemClick: handleItemClick,
       onItemHover: onItemHover,
-      onItemLeave: onItemLeave
-    })), /*#__PURE__*/React.createElement(ViewControls, {
-      api: controlsApi,
-      config: controls,
+      onItemLeave: onItemLeave,
+      getMergedItemWrapperStyle: getMergedItemWrapperStyle
+    }), isFloorMapView && mode === 'edit' && (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === 'scene' && /*#__PURE__*/React.createElement("div", {
+      className: placeOverlayClass,
+      style: {
+        width: contentWidth,
+        height: contentHeight
+      },
+      onClick: handleCanvasPlaceClick
+    }), isFloorMapView && mode === 'edit' && /*#__PURE__*/React.createElement("div", {
+      ref: mapDropLayerRef,
+      className: classNames("".concat(PREFIX, "-map-drop-layer"), _defineProperty({}, "".concat(PREFIX, "-map-drop-layer-active"), mapPaletteDragActive)),
+      style: {
+        width: contentWidth,
+        height: contentHeight
+      },
+      onDragOver: function onDragOver(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+      },
+      onDrop: handlePaletteDropOnCanvas
+    })), /*#__PURE__*/React.createElement(ViewControlsWithZoom, {
+      config: viewControlsConfig,
       scale: scale,
-      isFullscreen: isFullscreen
-    }));
-  }));
+      isFullscreen: isFullscreen,
+      fitBounds: fitBounds,
+      toggleFullscreen: editToggleFullscreen
+    }), isFloorMapView && mode === 'edit' && editPanelParams && config && dataSources && /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(PREFIX, "-edit-panel-wrap"), mapAreaSize.height > 0 && "".concat(PREFIX, "-edit-panel-wrap-constrained")),
+      style: mapAreaSize.height > 0 ? {
+        height: mapAreaSize.height - 32,
+        maxHeight: mapAreaSize.height - 32,
+        overflow: 'hidden',
+        top: 16,
+        transform: 'none'
+      } : undefined
+    }, /*#__PURE__*/React.createElement(FloorMapEditPanel, _extends({}, editPanelParams, {
+      config: config,
+      dataSources: dataSources,
+      savingRecord: savingRecord
+    }))));
+  }))));
 }
 var PisellFloorMapLayout = /*#__PURE__*/React.forwardRef(PisellFloorMapLayoutInner);
 export { PisellFloorMapLayout };