@pisell/materials 1.0.1059 → 1.0.1062

package/lib/components/pisellFloorMapLayout/PisellFloorMapLayout.js

@@ -38,233 +38,618 @@ var import_classnames = __toESM(require("classnames"));
 var import_react_zoom_pan_pinch = require("react-zoom-pan-pinch");
 var import_MapLayer = __toESM(require("./components/MapLayer"));
 var import_ItemLayer = __toESM(require("./components/ItemLayer"));
-var import_ViewControls = __toESM(require("./components/ViewControls"));
+var import_EditableItemLayer = require("./components/EditableItemLayer");
+var import_FloorMapToolbar = require("./components/FloorMapToolbar");
+var import_FloorMapEditTopBar = require("./components/FloorMapEditTopBar");
+var import_CanvasTabs = require("./components/CanvasTabs");
+var import_FloorMapEditPanel = require("./components/FloorMapEditPanel");
+var import_ViewControlsWithZoom = require("./components/ViewControlsWithZoom");
+var import_useFloorMapEditState = require("./hooks/useFloorMapEditState");
+var import_useFloorMapTransformMetrics = require("./hooks/useFloorMapTransformMetrics");
+var import_layoutMeasurements = require("./utils/layoutMeasurements");
+var import_floorMapFallbackRender = require("./utils/floorMapFallbackRender");
+var import_floorMapElementKindUtils = require("./utils/floorMapElementKindUtils");
+var import_floorMapDropUtils = require("./utils/floorMapDropUtils");
+var import_useFloorMapPaletteTouchDrag = require("./hooks/useFloorMapPaletteTouchDrag");
+var import_mergeCanvasesForTabs = require("./utils/mergeCanvasesForTabs");
+var import_FloorMapLayoutContext = require("./context/FloorMapLayoutContext");
+var import_mergeFloorMapLayoutContext = require("./context/mergeFloorMapLayoutContext");
+var import_useEngineContext = __toESM(require("../../hooks/useEngineContext"));
+var import_utils = require("@pisell/utils");
+var import_floorMapCanvasDisplay = require("./utils/floorMapCanvasDisplay");
 var import_PisellFloorMapLayout = require("./PisellFloorMapLayout.less");
 var PREFIX = "pisell-floor-map-layout";
-var DEFAULT_CELL_SIZE = 64;
-var DEFAULT_ITEM_GAP = 8;
-function gapToPx(gap) {
-  if (gap === void 0) return DEFAULT_ITEM_GAP;
-  if (typeof gap === "number") return gap;
-  const match = String(gap).match(/^(\d+(?:\.\d+)?)\s*px?$/i);
-  return match ? Number(match[1]) : DEFAULT_ITEM_GAP;
-}
-function getContentSize(items, cellSize, itemGap, itemUnit) {
-  if (!items.length) {
-    if (itemUnit === "pixel") {
-      return { contentWidth: cellSize * 4, contentHeight: cellSize * 3 };
-    }
-    const g2 = itemGap;
-    return {
-      contentWidth: 4 * (cellSize + g2) + g2,
-      contentHeight: 3 * (cellSize + g2) + g2
-    };
-  }
-  if (itemUnit === "pixel") {
-    let maxRight = 0;
-    let maxBottom = 0;
-    for (const item of items) {
-      const w = item.width ?? cellSize;
-      const h = item.height ?? cellSize;
-      maxRight = Math.max(maxRight, item.x + w);
-      maxBottom = Math.max(maxBottom, item.y + h);
-    }
-    return { contentWidth: maxRight, contentHeight: maxBottom };
-  }
-  let maxX = 0;
-  let maxY = 0;
-  for (const item of items) {
-    const w = item.width ?? 1;
-    const h = item.height ?? 1;
-    maxX = Math.max(maxX, item.x + w);
-    maxY = Math.max(maxY, item.y + h);
-  }
-  const g = itemGap;
-  return {
-    contentWidth: maxX * (cellSize + g) + g,
-    contentHeight: maxY * (cellSize + g) + g
-  };
-}
 function PisellFloorMapLayoutInner(props, ref) {
+  var _a, _b;
+  const layoutCtx = (0, import_FloorMapLayoutContext.useFloorMapLayoutContext)();
+  const p = (0, import_mergeFloorMapLayoutContext.mergeFloorMapLayoutPropsFromContext)(props, layoutCtx);
   const {
     className,
     style,
-    items,
+    items: itemsProp,
     renderItem,
     rowKey,
+    renderItemByKind,
+    getMergedItemWrapperStyle,
     mapLayer,
     cellSize: cellSizeProp,
     itemUnit = "cell",
-    layoutMode = "free",
-    gridLayout,
     zoom = {},
     pan = {},
     controls = {},
     enableHover = true,
     onItemClick,
     onItemHover,
-    onItemLeave
-  } = props;
+    onItemLeave,
+    mode = "read",
+    floorMapConfig: floorMapConfigProp,
+    dataSources,
+    onSave,
+    onDataSourceRecordSave,
+    dataSourceLabels,
+    dataSourceFormColumns,
+    dataSourceRecordForm,
+    loading,
+    saveError,
+    onElementRenderError,
+    toolbarShowSave = true,
+    floorMapFullscreenMode,
+    showDataSourceRecordFormBlock
+  } = p;
+  const isFloorMapView = Boolean(floorMapConfigProp);
+  const contentOffsetRef = (0, import_react.useRef)({ x: 0, y: 0 });
+  const mapDropLayerRef = (0, import_react.useRef)(null);
   const transformRef = (0, import_react.useRef)(null);
-  const containerRef = (0, import_react.useRef)(null);
-  const cellSize = cellSizeProp ?? DEFAULT_CELL_SIZE;
-  const itemGap = (0, import_react.useMemo)(
-    () => gapToPx(mapLayer == null ? void 0 : mapLayer.gap),
-    [mapLayer == null ? void 0 : mapLayer.gap]
-  );
-  const { contentWidth, contentHeight } = (0, import_react.useMemo)(
-    () => getContentSize(items, cellSize, itemGap, itemUnit),
-    [items, cellSize, itemGap, itemUnit]
-  );
-  const zoomConfig = (0, import_react.useMemo)(
-    () => ({
-      initialScale: zoom.defaultScale ?? 1,
-      minScale: zoom.min ?? 0.5,
-      maxScale: zoom.max ?? 2,
-      step: zoom.step ?? 0.1
-    }),
-    [zoom.defaultScale, zoom.min, zoom.max, zoom.step]
+  const edit = (0, import_useFloorMapEditState.useFloorMapEditState)({
+    floorMapConfigProp,
+    isFloorMapView,
+    itemsProp,
+    cellSizeProp,
+    dataSources,
+    onSave,
+    onDataSourceRecordSave,
+    dataSourceFormColumns,
+    dataSourceRecordForm,
+    dataSourceLabels,
+    layoutPrefix: PREFIX,
+    contentOffsetRef,
+    showDataSourceRecordFormBlock
+  });
+  const {
+    config,
+    currentCanvasId,
+    setCurrentCanvasId,
+    selectedId,
+    setSelectedId,
+    placeMode,
+    setPlaceMode,
+    items,
+    saving,
+    savingRecord,
+    handleAddCanvas,
+    handleRemoveCanvas,
+    handleRenameCanvas,
+    handleUpdateItem,
+    handleCanvasPlaceClick,
+    handleSave,
+    placeSceneElementFromPaletteDrop,
+    editPanelParams,
+    placeOverlayClass,
+    isLayoutDirty
+  } = edit;
+  const canvasesForTabs = (0, import_react.useMemo)(
+    () => config ? (0, import_mergeCanvasesForTabs.mergeCanvasesForTabs)(config) : [],
+    [config]
   );
-  const [scale, setScale] = (0, import_react.useState)(zoomConfig.initialScale);
-  const [isFullscreen, setIsFullscreen] = (0, import_react.useState)(false);
+  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 showReadModeCanvasTabsBar = (0, import_react.useMemo)(() => {
+    if (!isFloorMapView || mode !== "read" || !config) return false;
+    return canvasesForTabs.filter((c) => c.enabled).length > 1;
+  }, [isFloorMapView, mode, config, canvasesForTabs]);
+  const readCanvasTabsAriaLabel = (0, import_react.useMemo)(() => {
+    (0, import_floorMapCanvasDisplay.initFloorMapLayoutLocales)(engineLocale);
+    return import_utils.locales.getText("pisell-floor-map-layout.read-canvas-tabs.aria");
+  }, [engineLocale]);
+  const loadingLabel = (0, import_react.useMemo)(() => {
+    (0, import_floorMapCanvasDisplay.initFloorMapLayoutLocales)(engineLocale);
+    return import_utils.locales.getText("pisell-floor-map-layout.loading");
+  }, [engineLocale]);
+  const cellSize = cellSizeProp ?? import_layoutMeasurements.DEFAULT_CELL_SIZE;
+  const itemGap = (0, import_react.useMemo)(() => (0, import_layoutMeasurements.gapToPx)(mapLayer == null ? void 0 : mapLayer.gap), [mapLayer == null ? void 0 : mapLayer.gap]);
+  const effectiveItemUnit = isFloorMapView ? "pixel" : itemUnit;
+  const metrics = (0, import_useFloorMapTransformMetrics.useFloorMapTransformMetrics)({
+    items,
+    cellSize,
+    itemGap,
+    effectiveItemUnit,
+    isFloorMapView,
+    mode,
+    zoom,
+    transformRef,
+    contentOffsetRef,
+    boundingPadding: mapLayer == null ? void 0 : mapLayer.boundingPadding,
+    frameResetKey: isFloorMapView ? currentCanvasId ?? "" : void 0
+  });
+  const {
+    containerRef,
+    mapAreaRef,
+    mapAreaSize,
+    contentWidth,
+    contentHeight,
+    contentOffsetX,
+    contentOffsetY,
+    initialPositionX,
+    initialPositionY,
+    zoomConfig,
+    scale,
+    setScale,
+    isFullscreen,
+    toggleFullscreen,
+    fitBounds,
+    lastTransformRef,
+    isInteractingWithElement,
+    setIsInteractingWithElement
+  } = metrics;
+  const fsMode = floorMapFullscreenMode ?? "toggle";
+  const useFullTopChrome = isFloorMapView && mode === "edit" && (fsMode === "locked" || fsMode === "toggle" && isFullscreen);
+  const editToggleFullscreen = fsMode === "toggle" ? toggleFullscreen : void 0;
+  const viewControlsConfig = (0, import_react.useMemo)(() => {
+    if (!isFloorMapView || mode !== "edit") return controls;
+    return {
+      ...controls,
+      showFullscreen: false,
+      showFitBounds: false
+    };
+  }, [isFloorMapView, mode, controls]);
+  const topBarExtraActions = (0, import_react.useMemo)(() => {
+    if (!isFloorMapView || mode !== "edit") return null;
+    if (controls.showFitBounds !== true) return null;
+    return /* @__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: () => fitBounds(),
+        "aria-label": "区域定位",
+        title: "区域定位"
+      },
+      "⊞"
+    );
+  }, [isFloorMapView, mode, controls.showFitBounds, fitBounds]);
+  const [mapPaletteDragActive, setMapPaletteDragActive] = (0, import_react.useState)(false);
   (0, import_react.useEffect)(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const onFullscreenChange = () => setIsFullscreen(document.fullscreenElement === el);
-    document.addEventListener("fullscreenchange", onFullscreenChange);
-    return () => document.removeEventListener("fullscreenchange", onFullscreenChange);
+    const clear = () => setMapPaletteDragActive(false);
+    window.addEventListener("dragend", clear);
+    return () => window.removeEventListener("dragend", clear);
   }, []);
-  const toggleFullscreen = (0, import_react.useCallback)(() => {
-    var _a, _b;
-    const el = containerRef.current;
-    if (!el) return;
-    if (document.fullscreenElement) {
-      (_a = document.exitFullscreen) == null ? void 0 : _a.call(document);
-    } else {
-      (_b = el.requestFullscreen) == null ? void 0 : _b.call(el);
-    }
+  const handlePaletteDropOnCanvas = (0, import_react.useCallback)(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setMapPaletteDragActive(false);
+      if (!isFloorMapView || mode !== "edit") return;
+      const payload = (0, import_floorMapDropUtils.parsePaletteDragPayload)(e.dataTransfer);
+      if (!payload) return;
+      const { x: cx, y: cy } = (0, import_floorMapDropUtils.sceneXYFromContentDropOffset)(
+        e.nativeEvent.offsetX,
+        e.nativeEvent.offsetY,
+        contentOffsetRef.current
+      );
+      placeSceneElementFromPaletteDrop(cx, cy, {
+        type: "scene",
+        elementKind: payload.elementKind,
+        dataSourceKey: payload.dataSourceKey,
+        recordId: payload.recordId
+      });
+    },
+    [isFloorMapView, mode, placeSceneElementFromPaletteDrop]
+  );
+  const applyPaletteTouchDropInScene = (0, import_react.useCallback)(
+    (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]
+  );
+  const paletteTouchDrag = (0, import_useFloorMapPaletteTouchDrag.useFloorMapPaletteTouchDrag)({
+    enabled: Boolean(
+      isFloorMapView && mode === "edit" && (config == null ? void 0 : config.canvasUi.canCreate)
+    ),
+    mapDropLayerRef,
+    contentWidth,
+    contentHeight,
+    contentOffsetRef,
+    setMapPaletteDragActive,
+    onDropInScene: applyPaletteTouchDropInScene
+  });
+  const fallbackPlaceholderRender = (0, import_react.useCallback)((item) => {
+    return (0, import_floorMapFallbackRender.renderFloorMapFallbackPlaceholder)(item);
   }, []);
-  const fitBounds = (0, import_react.useCallback)(() => {
-    const ctx = transformRef.current;
-    const container = containerRef.current;
-    if (!ctx || !container) return;
-    const wrapper = container.querySelector(".react-transform-wrapper");
-    if (!wrapper) return;
-    const wrapperRect = wrapper.getBoundingClientRect();
-    const scale2 = Math.min(
-      wrapperRect.width / contentWidth,
-      wrapperRect.height / contentHeight,
-      zoom.max ?? 2
-    );
-    const x = (wrapperRect.width - contentWidth * scale2) / 2;
-    const y = (wrapperRect.height - contentHeight * scale2) / 2;
-    ctx.setTransform(x, y, scale2);
-  }, [contentWidth, contentHeight, zoom.max]);
+  const effectiveRenderItem = (0, import_react.useCallback)(
+    (item, index, options) => {
+      const merged = item;
+      const kind = merged == null ? void 0 : merged.elementKind;
+      if (isFloorMapView && floorMapConfigProp && merged._sceneElement) {
+        const kc = (0, import_floorMapElementKindUtils.getElementKindConfig)(floorMapConfigProp, kind);
+        const issue = (0, import_floorMapElementKindUtils.getSceneElementRenderIssue)(
+          merged._sceneElement,
+          kc,
+          dataSources
+        );
+        if (issue) {
+          return (0, import_floorMapFallbackRender.renderFloorMapRenderError)(issue);
+        }
+      }
+      if (isFloorMapView && kind && (renderItemByKind == null ? void 0 : renderItemByKind[kind])) {
+        try {
+          return renderItemByKind[kind](item, index, options);
+        } catch (err) {
+          if (merged._sceneElement) {
+            onElementRenderError == null ? void 0 : onElementRenderError(merged._sceneElement, err);
+          }
+          return (0, import_floorMapFallbackRender.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
+    ]
+  );
+  const handleItemClick = (0, import_react.useCallback)(
+    (item, index, e) => {
+      if (isFloorMapView && mode === "edit") setSelectedId(item.id);
+      onItemClick == null ? void 0 : onItemClick(item, index, e);
+    },
+    [isFloorMapView, mode, onItemClick, setSelectedId]
+  );
   (0, import_react.useImperativeHandle)(
     ref,
     () => ({
       zoomIn: () => {
-        var _a;
-        return (_a = transformRef.current) == null ? void 0 : _a.zoomIn();
+        var _a2;
+        return (_a2 = transformRef.current) == null ? void 0 : _a2.zoomIn();
       },
       zoomOut: () => {
-        var _a;
-        return (_a = transformRef.current) == null ? void 0 : _a.zoomOut();
+        var _a2;
+        return (_a2 = transformRef.current) == null ? void 0 : _a2.zoomOut();
       },
       reset: () => {
-        var _a;
-        return (_a = transformRef.current) == null ? void 0 : _a.resetTransform();
-      },
-      fitBounds
-    }),
-    [fitBounds]
-  );
-  const controlsApi = (0, import_react.useMemo)(
-    () => ({
-      zoomIn: () => {
-        var _a;
-        return (_a = transformRef.current) == null ? void 0 : _a.zoomIn();
-      },
-      zoomOut: () => {
-        var _a;
-        return (_a = transformRef.current) == null ? void 0 : _a.zoomOut();
-      },
-      resetTransform: () => {
-        var _a;
-        return (_a = transformRef.current) == null ? void 0 : _a.resetTransform();
+        var _a2;
+        return (_a2 = transformRef.current) == null ? void 0 : _a2.resetTransform();
       },
       fitBounds,
-      toggleFullscreen
+      saveLayout: () => handleSave()
     }),
-    [fitBounds, toggleFullscreen]
+    [fitBounds, handleSave]
   );
+  const showSidebar = isFloorMapView && mode === "edit" && config && dataSources;
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
       ref: containerRef,
-      className: (0, import_classnames.default)(PREFIX, className),
-      style
+      className: (0, import_classnames.default)(PREFIX, className, {
+        [`${PREFIX}-floor-map-view`]: isFloorMapView,
+        [`${PREFIX}-mode-edit`]: isFloorMapView && mode === "edit"
+      }),
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        ...isFloorMapView ? { minHeight: 0 } : {},
+        ...style
+      }
     },
+    isFloorMapView && mode === "edit" && config && !useFullTopChrome && /* @__PURE__ */ import_react.default.createElement(
+      import_FloorMapEditTopBar.FloorMapEditTopBar,
+      {
+        mode: "compact",
+        config,
+        canvases: canvasesForTabs,
+        currentCanvasId,
+        onTabChange: (id) => {
+          setCurrentCanvasId(id);
+          setSelectedId(null);
+        },
+        canEditTabs: config.canvasUi.canEdit,
+        onAddCanvas: handleAddCanvas,
+        onRemoveCanvas: handleRemoveCanvas,
+        onRenameCanvas: handleRenameCanvas,
+        toggleFullscreen: editToggleFullscreen,
+        isFullscreen: false,
+        controls
+      }
+    ),
+    isFloorMapView && mode === "edit" && config && useFullTopChrome && /* @__PURE__ */ import_react.default.createElement(
+      import_FloorMapEditTopBar.FloorMapEditTopBar,
+      {
+        mode: "full",
+        config,
+        canvases: canvasesForTabs,
+        currentCanvasId,
+        onTabChange: (id) => {
+          setCurrentCanvasId(id);
+          setSelectedId(null);
+        },
+        canEditTabs: config.canvasUi.canEdit,
+        onAddCanvas: handleAddCanvas,
+        onRemoveCanvas: handleRemoveCanvas,
+        onRenameCanvas: handleRenameCanvas,
+        onSave: onSave ? handleSave : void 0,
+        saving,
+        saveError,
+        layoutDirty: isLayoutDirty,
+        toggleFullscreen: editToggleFullscreen,
+        isFullscreen,
+        controls,
+        extraActions: topBarExtraActions
+      }
+    ),
+    showReadModeCanvasTabsBar && /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `${PREFIX}-edit-top-bar ${PREFIX}-read-canvas-tabs-bar`,
+        role: "toolbar",
+        "aria-label": readCanvasTabsAriaLabel
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-top-bar-tabs` }, /* @__PURE__ */ import_react.default.createElement(
+        import_CanvasTabs.CanvasTabs,
+        {
+          canvases: canvasesForTabs,
+          currentCanvasId,
+          onTabChange: (id) => {
+            setCurrentCanvasId(id);
+            setSelectedId(null);
+          },
+          canEdit: false,
+          className: `${PREFIX}-edit-top-bar-canvas-tabs`
+        }
+      ))
+    ),
+    loading && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-loading` }, /* @__PURE__ */ import_react.default.createElement("span", null, loadingLabel)),
+    saveError && !(isFloorMapView && mode === "edit" && config) && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-save-error` }, typeof saveError === "string" ? saveError : saveError == null ? void 0 : saveError.message),
     /* @__PURE__ */ import_react.default.createElement(
-      import_react_zoom_pan_pinch.TransformWrapper,
+      "div",
       {
-        initialScale: zoomConfig.initialScale,
-        minScale: zoomConfig.minScale,
-        maxScale: zoomConfig.maxScale,
-        step: zoomConfig.step,
-        panning: { disabled: !pan.enabled },
-        doubleClick: { disabled: true },
-        onTransformed: (_, state) => setScale(state.scale)
+        className: showSidebar ? `${PREFIX}-edit-layout` : void 0,
+        style: { flex: 1, display: "flex", minHeight: 0 }
       },
-      (ctx) => {
-        transformRef.current = ctx;
-        return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-          import_react_zoom_pan_pinch.TransformComponent,
+      showSidebar && /* @__PURE__ */ import_react.default.createElement(
+        import_FloorMapToolbar.FloorMapToolbar,
+        {
+          config,
+          dataSources,
+          dataSourceLabels,
+          canCreate: config.canvasUi.canCreate,
+          placeMode,
+          onPlaceModeChange: setPlaceMode,
+          sceneElements: config.sceneElements ?? [],
+          renderPreviewItem: (item) => effectiveRenderItem(item, 0),
+          placementPreviewSize: { width: 180, height: 120 },
+          decorationPreviewSize: 48,
+          onSave: !useFullTopChrome && toolbarShowSave !== false && onSave && config.canvasUi.canEdit ? handleSave : void 0,
+          saving,
+          saveError,
+          layoutDirty: isLayoutDirty,
+          onPaletteCardPointerDown: paletteTouchDrag.handlePaletteCardPointerDown,
+          consumeToolbarClickIfTouchDrag: paletteTouchDrag.consumeToolbarClickIfTouchDrag
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          ref: mapAreaRef,
+          className: showSidebar ? `${PREFIX}-map-area` : void 0,
+          style: {
+            flex: 1,
+            position: "relative",
+            minWidth: 0,
+            overflow: "hidden"
+          },
+          onDragEnter: (e) => {
+            if (!isFloorMapView || mode !== "edit") return;
+            if (!(0, import_floorMapDropUtils.isFloorMapPaletteDrag)(e.dataTransfer)) return;
+            e.preventDefault();
+            e.stopPropagation();
+            setMapPaletteDragActive(true);
+          },
+          onDragOver: (e) => {
+            if (!isFloorMapView || mode !== "edit" || !mapPaletteDragActive)
+              return;
+            e.preventDefault();
+            e.stopPropagation();
+          },
+          onDragLeave: (e) => {
+            var _a2;
+            if (!mapPaletteDragActive) return;
+            const related = e.relatedTarget;
+            if (!((_a2 = mapAreaRef.current) == null ? void 0 : _a2.contains(related))) {
+              setMapPaletteDragActive(false);
+            }
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_react_zoom_pan_pinch.TransformWrapper,
           {
-            wrapperStyle: {
-              width: "100%",
-              height: "100%",
-              backgroundColor: "#F2F4F7",
-              overflow: "visible"
+            key: isFloorMapView ? `fmap-${currentCanvasId ?? "na"}-bp${(mapLayer == null ? void 0 : mapLayer.boundingPadding) ?? "d"}-z${zoomConfig.initialScale}` : "fmap-layout",
+            centerOnInit: false,
+            initialScale: zoomConfig.initialScale,
+            initialPositionX,
+            initialPositionY,
+            minScale: zoomConfig.minScale,
+            maxScale: zoomConfig.maxScale,
+            ...{ step: zoomConfig.step },
+            panning: {
+              disabled: pan.enabled === false || isInteractingWithElement,
+              velocityDisabled: true
             },
-            contentStyle: {
-              width: contentWidth,
-              height: contentHeight,
-              minWidth: contentWidth,
-              minHeight: contentHeight,
-              position: "relative",
-              overflow: "visible",
-              backgroundColor: "#F2F4F7"
+            doubleClick: { disabled: true },
+            onTransformed: (_, state) => {
+              setScale(state.scale);
+              lastTransformRef.current = {
+                x: state.positionX,
+                y: state.positionY,
+                scale: state.scale
+              };
             }
           },
-          /* @__PURE__ */ import_react.default.createElement(
-            import_MapLayer.default,
-            {
-              config: mapLayer,
-              contentWidth,
-              contentHeight,
-              cellSize
-            }
-          ),
-          /* @__PURE__ */ import_react.default.createElement(
-            import_ItemLayer.default,
-            {
-              items,
-              renderItem,
-              rowKey,
-              cellSize,
-              itemUnit,
-              itemGap,
-              contentWidth,
-              contentHeight,
-              enableHover,
-              onItemClick,
-              onItemHover,
-              onItemLeave
-            }
-          )
-        ), /* @__PURE__ */ import_react.default.createElement(import_ViewControls.default, { api: controlsApi, config: controls, scale, isFullscreen }));
-      }
+          (ctx) => {
+            transformRef.current = ctx;
+            return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+              import_react_zoom_pan_pinch.TransformComponent,
+              {
+                wrapperStyle: {
+                  width: "100%",
+                  height: "100%",
+                  backgroundColor: "#F2F4F7",
+                  overflow: "visible"
+                },
+                contentStyle: {
+                  width: contentWidth,
+                  height: contentHeight,
+                  minWidth: contentWidth,
+                  minHeight: contentHeight,
+                  position: "relative",
+                  overflow: "visible",
+                  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__ */ import_react.default.createElement(
+                import_MapLayer.default,
+                {
+                  config: mapLayer,
+                  contentWidth,
+                  contentHeight,
+                  cellSize,
+                  preferCanvasGrid: true,
+                  pointerEventsNone: isFloorMapView && mode === "edit"
+                }
+              ),
+              isFloorMapView && mode === "edit" ? /* @__PURE__ */ import_react.default.createElement(
+                import_EditableItemLayer.EditableItemLayer,
+                {
+                  items,
+                  renderItem: effectiveRenderItem,
+                  rowKey,
+                  cellSize,
+                  itemUnit: effectiveItemUnit,
+                  itemGap,
+                  contentWidth,
+                  contentHeight,
+                  contentOffsetX,
+                  contentOffsetY,
+                  selectedId,
+                  onSelect: setSelectedId,
+                  onUpdateItem: handleUpdateItem,
+                  snapStep: (mapLayer == null ? void 0 : mapLayer.snapStep) ?? 0,
+                  scale,
+                  onInteractionChange: setIsInteractingWithElement,
+                  getMergedItemWrapperStyle
+                }
+              ) : /* @__PURE__ */ import_react.default.createElement(
+                import_ItemLayer.default,
+                {
+                  items,
+                  renderItem: effectiveRenderItem,
+                  rowKey,
+                  cellSize,
+                  itemUnit: effectiveItemUnit,
+                  itemGap,
+                  contentWidth,
+                  contentHeight,
+                  contentOffsetX,
+                  contentOffsetY,
+                  enableHover,
+                  onItemClick: handleItemClick,
+                  onItemHover,
+                  onItemLeave,
+                  getMergedItemWrapperStyle
+                }
+              ),
+              isFloorMapView && mode === "edit" && (placeMode == null ? void 0 : placeMode.type) === "scene" && /* @__PURE__ */ import_react.default.createElement(
+                "div",
+                {
+                  className: placeOverlayClass,
+                  style: { width: contentWidth, height: contentHeight },
+                  onClick: handleCanvasPlaceClick
+                }
+              ),
+              isFloorMapView && mode === "edit" && /* @__PURE__ */ import_react.default.createElement(
+                "div",
+                {
+                  ref: mapDropLayerRef,
+                  className: (0, import_classnames.default)(`${PREFIX}-map-drop-layer`, {
+                    [`${PREFIX}-map-drop-layer-active`]: mapPaletteDragActive
+                  }),
+                  style: { width: contentWidth, height: contentHeight },
+                  onDragOver: (ev) => {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                  },
+                  onDrop: handlePaletteDropOnCanvas
+                }
+              )
+            ), /* @__PURE__ */ import_react.default.createElement(
+              import_ViewControlsWithZoom.ViewControlsWithZoom,
+              {
+                config: viewControlsConfig,
+                scale,
+                isFullscreen,
+                fitBounds,
+                toggleFullscreen: editToggleFullscreen
+              }
+            ), isFloorMapView && mode === "edit" && editPanelParams && config && dataSources && /* @__PURE__ */ import_react.default.createElement(
+              "div",
+              {
+                className: (0, import_classnames.default)(
+                  `${PREFIX}-edit-panel-wrap`,
+                  mapAreaSize.height > 0 && `${PREFIX}-edit-panel-wrap-constrained`
+                ),
+                style: mapAreaSize.height > 0 ? {
+                  height: mapAreaSize.height - 32,
+                  maxHeight: mapAreaSize.height - 32,
+                  overflow: "hidden",
+                  top: 16,
+                  transform: "none"
+                } : void 0
+              },
+              /* @__PURE__ */ import_react.default.createElement(
+                import_FloorMapEditPanel.FloorMapEditPanel,
+                {
+                  ...editPanelParams,
+                  config,
+                  dataSources,
+                  savingRecord
+                }
+              )
+            ));
+          }
+        )
+      )
     )
   );
 }