var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/pisellFloorMapLayout/PisellFloorMapLayout.tsx
var PisellFloorMapLayout_exports = {};
__export(PisellFloorMapLayout_exports, {
  PisellFloorMapLayout: () => PisellFloorMapLayout,
  default: () => PisellFloorMapLayout_default
});
module.exports = __toCommonJS(PisellFloorMapLayout_exports);
var import_react = __toESM(require("react"));
var import_classnames = __toESM(require("classnames"));
var import_antd = require("antd");
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_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";
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: itemsProp,
    renderItem,
    rowKey,
    renderItemByKind,
    getMergedItemWrapperStyle,
    mapLayer,
    cellSize: cellSizeProp,
    itemUnit = "cell",
    zoom = {},
    pan = {},
    controls = {},
    enableHover = true,
    onItemClick,
    onItemHover,
    onItemLeave,
    mode = "read",
    floorMapConfig: floorMapConfigProp,
    dataSources,
    onSave,
    onDataSourceRecordSave,
    dataSourceLabels,
    dataSourceFormColumns,
    dataSourceRecordForm,
    loading,
    saveError,
    onElementRenderError,
    toolbarShowSave = true,
    floorMapFullscreenMode,
    showDataSourceRecordFormBlock,
    floorMapViewportOverlay,
    viewportOverlayPlacement = "top-start",
    viewportOverlayClassName,
    canvasTabsBarTrailing,
    viewportDockTrailing
  } = p;
  const { token } = import_antd.theme.useToken();
  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 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,
    toggleDraftCanvasShowGrid,
    toggleSelectedLayoutLock,
    duplicateSelectedElement,
    deleteSelectedElement
  } = edit;
  const effectiveMapLayer = (0, import_react.useMemo)(() => {
    if (!isFloorMapView || !config || !currentCanvasId) {
      return mapLayer;
    }
    const canvas = config.canvases.find((c) => c.id === currentCanvasId);
    return { ...mapLayer ?? {}, ...(canvas == null ? void 0 : canvas.mapLayer) ?? {} };
  }, [isFloorMapView, config, currentCanvasId, mapLayer]);
  const transformWrapperKey = (0, import_react.useMemo)(() => {
    if (!isFloorMapView) return "fmap-layout";
    const bp = (effectiveMapLayer == null ? void 0 : effectiveMapLayer.boundingPadding) ?? "d";
    const z = zoom.defaultScale ?? 1;
    return `fmap-${currentCanvasId ?? "na"}-bp${bp}-z${z}`;
  }, [
    isFloorMapView,
    currentCanvasId,
    effectiveMapLayer == null ? void 0 : effectiveMapLayer.boundingPadding,
    zoom.defaultScale
  ]);
  const canvasesForTabs = (0, import_react.useMemo)(
    () => config ? (0, import_mergeCanvasesForTabs.mergeCanvasesForTabs)(config) : [],
    [config]
  );
  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 hasCanvasTabsBarTrailing = canvasTabsBarTrailing != null && canvasTabsBarTrailing !== false;
  const enabledCanvasCount = (0, import_react.useMemo)(
    () => canvasesForTabs.filter((c) => c.enabled).length,
    [canvasesForTabs]
  );
  const showReadModeCanvasTabsBar = (0, import_react.useMemo)(() => {
    if (!isFloorMapView || mode !== "read" || !config) return false;
    if (hasCanvasTabsBarTrailing) return true;
    return enabledCanvasCount > 1;
  }, [
    isFloorMapView,
    mode,
    config,
    hasCanvasTabsBarTrailing,
    enabledCanvasCount
  ]);
  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 showEditCompactTopBar = isFloorMapView && mode === "edit" && Boolean(config) && !useFullTopChrome;
  const loadingLabel = (0, import_react.useMemo)(() => {
    (0, import_floorMapCanvasDisplay.initFloorMapLayoutLocales)(engineLocale);
    return import_utils.locales.getText("pisell-floor-map-layout.loading");
  }, [engineLocale]);
  const editQuickBar = (0, import_react.useMemo)(() => {
    if (!isFloorMapView || mode !== "edit" || !(config == null ? void 0 : config.canvasUi.canEdit) || !selectedId) {
      return null;
    }
    (0, import_floorMapCanvasDisplay.initFloorMapLayoutLocales)(engineLocale);
    const row = items.find((i) => i.id === selectedId);
    if (!(row == null ? void 0 : row._sceneElement)) return null;
    return {
      labels: {
        lock: import_utils.locales.getText("pisell-floor-map-layout.edit-quick.lock"),
        unlock: import_utils.locales.getText("pisell-floor-map-layout.edit-quick.unlock"),
        duplicate: import_utils.locales.getText(
          "pisell-floor-map-layout.edit-quick.duplicate"
        ),
        delete: import_utils.locales.getText("pisell-floor-map-layout.edit-quick.delete"),
        popTitle: import_utils.locales.getText(
          "pisell-floor-map-layout.edit-panel.pop-title"
        ),
        popDesc: import_utils.locales.getText("pisell-floor-map-layout.edit-panel.pop-desc"),
        cancel: import_utils.locales.getText(
          "pisell-floor-map-layout.edit-panel.btn-cancel"
        ),
        okDelete: import_utils.locales.getText(
          "pisell-floor-map-layout.edit-panel.btn-ok-delete"
        ),
        ariaToolbar: import_utils.locales.getText(
          "pisell-floor-map-layout.edit-quick.aria-toolbar"
        )
      },
      isLocked: Boolean(row._sceneElement.layoutTransformLocked),
      onToggleLock: toggleSelectedLayoutLock,
      onDuplicate: duplicateSelectedElement,
      onDelete: deleteSelectedElement
    };
  }, [
    isFloorMapView,
    mode,
    config == null ? void 0 : config.canvasUi.canEdit,
    selectedId,
    items,
    engineLocale,
    toggleSelectedLayoutLock,
    duplicateSelectedElement,
    deleteSelectedElement
  ]);
  const cellSize = cellSizeProp ?? import_layoutMeasurements.DEFAULT_CELL_SIZE;
  const itemGap = (0, import_react.useMemo)(
    () => (0, import_layoutMeasurements.gapToPx)(effectiveMapLayer == null ? void 0 : effectiveMapLayer.gap),
    [effectiveMapLayer == null ? void 0 : effectiveMapLayer.gap]
  );
  const effectiveItemUnit = isFloorMapView ? "pixel" : itemUnit;
  const metrics = (0, import_useFloorMapTransformMetrics.useFloorMapTransformMetrics)({
    items,
    cellSize,
    itemGap,
    effectiveItemUnit,
    isFloorMapView,
    mode,
    zoom,
    transformRef,
    contentOffsetRef,
    boundingPadding: effectiveMapLayer == null ? void 0 : effectiveMapLayer.boundingPadding,
    frameResetKey: isFloorMapView ? transformWrapperKey : 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 dockToggleFullscreen = isFloorMapView && fsMode === "toggle" ? toggleFullscreen : void 0;
  const viewControlsConfig = (0, import_react.useMemo)(() => {
    if (!isFloorMapView) return controls;
    return {
      ...controls,
      showFullscreen: controls.showFullscreen ?? Boolean(dockToggleFullscreen)
    };
  }, [isFloorMapView, controls, dockToggleFullscreen]);
  const topBarExtraActions = null;
  const [mapPaletteDragActive, setMapPaletteDragActive] = (0, import_react.useState)(false);
  (0, import_react.useEffect)(() => {
    const clear = () => setMapPaletteDragActive(false);
    window.addEventListener("dragend", clear);
    return () => window.removeEventListener("dragend", clear);
  }, []);
  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,
        recordIds: payload.recordIds
      });
    },
    [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,
        recordIds: payload.recordIds
      });
    },
    [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 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 _a2;
        return (_a2 = transformRef.current) == null ? void 0 : _a2.zoomIn();
      },
      zoomOut: () => {
        var _a2;
        return (_a2 = transformRef.current) == null ? void 0 : _a2.zoomOut();
      },
      reset: () => {
        var _a2;
        return (_a2 = transformRef.current) == null ? void 0 : _a2.resetTransform();
      },
      fitBounds,
      saveLayout: () => handleSave()
    }),
    [fitBounds, handleSave]
  );
  const showSidebar = isFloorMapView && mode === "edit" && config && dataSources;
  const editPanelVisible = isFloorMapView && mode === "edit" && Boolean(editPanelParams) && Boolean(config) && Boolean(dataSources);
  const handleMapAreaBackgroundClick = (0, import_react.useCallback)(
    (e) => {
      if (!isFloorMapView || mode !== "edit") return;
      const t = e.target;
      if (t.closest(`.${PREFIX}-editable-item`)) return;
      if (t.closest(`.${PREFIX}-edit-panel-wrap`)) return;
      if (t.closest(`.${PREFIX}-view-controls`)) return;
      if (t.closest(`.${PREFIX}-viewport-overlay`)) return;
      if (t.closest(`.${PREFIX}-place-overlay`)) return;
      if (t.closest(`.${PREFIX}-map-drop-layer`)) return;
      setSelectedId(null);
    },
    [isFloorMapView, mode, setSelectedId]
  );
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      ref: containerRef,
      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 } : {},
        ...isFloorMapView ? {
          ["--fmap-primary"]: token.colorPrimary
        } : {},
        ...style
      }
    },
    showEditCompactTopBar && !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,
        controls,
        canvasTabsBarTrailing
      }
    ),
    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,
        isFullscreen,
        controls,
        extraActions: topBarExtraActions,
        canvasTabsBarTrailing
      }
    ),
    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`
        }
      )),
      hasCanvasTabsBarTrailing ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-top-bar-actions` }, canvasTabsBarTrailing) : null
    ),
    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(
      "div",
      {
        className: showSidebar ? `${PREFIX}-edit-layout` : void 0,
        style: { flex: 1, display: "flex", minHeight: 0 }
      },
      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: onSave && config.canvasUi.canEdit && !useFullTopChrome && toolbarShowSave !== false ? handleSave : void 0,
          saving,
          saveError,
          layoutDirty: isLayoutDirty,
          onPaletteCardPointerDown: paletteTouchDrag.handlePaletteCardPointerDown,
          consumeToolbarClickIfTouchDrag: paletteTouchDrag.consumeToolbarClickIfTouchDrag
        }
      ),
      /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          ref: mapAreaRef,
          className: (0, import_classnames.default)(
            showSidebar && `${PREFIX}-map-area`,
            editPanelVisible && `${PREFIX}-map-area--edit-panel-inset`
          ),
          style: {
            flex: 1,
            position: "relative",
            minWidth: 0,
            overflow: "hidden"
          },
          onClick: handleMapAreaBackgroundClick,
          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,
          {
            key: transformWrapperKey,
            centerOnInit: false,
            initialScale: zoomConfig.initialScale,
            initialPositionX,
            initialPositionY,
            minScale: zoomConfig.minScale,
            maxScale: zoomConfig.maxScale,
            limitToBounds: pan.boundary !== "none",
            ...{ step: zoomConfig.step },
            panning: {
              disabled: pan.enabled === false || isInteractingWithElement,
              velocityDisabled: true
            },
            doubleClick: { disabled: true },
            onTransformed: (_, state) => {
              setScale(state.scale);
              lastTransformRef.current = {
                x: state.positionX,
                y: state.positionY,
                scale: state.scale
              };
            }
          },
          (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"
                }
              },
              /* @__PURE__ */ import_react.default.createElement(
                import_MapLayer.default,
                {
                  config: effectiveMapLayer,
                  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: (effectiveMapLayer == null ? void 0 : effectiveMapLayer.snapStep) ?? 0,
                  scale,
                  onInteractionChange: setIsInteractingWithElement,
                  getMergedItemWrapperStyle,
                  editQuickBar
                }
              ) : /* @__PURE__ */ import_react.default.createElement(
                import_ItemLayer.default,
                {
                  items,
                  renderItem: effectiveRenderItem,
                  rowKey,
                  cellSize,
                  itemUnit: effectiveItemUnit,
                  itemGap,
                  contentWidth,
                  contentHeight,
                  contentOffsetX,
                  contentOffsetY,
                  enableHover,
                  itemHoverOutline: true,
                  onItemClick: handleItemClick,
                  onItemHover,
                  onItemLeave,
                  getMergedItemWrapperStyle,
                  onInteractionChange: setIsInteractingWithElement
                }
              ),
              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: dockToggleFullscreen,
                mapGridVisible: Boolean(effectiveMapLayer == null ? void 0 : effectiveMapLayer.showGrid),
                onToggleMapGrid: isFloorMapView ? toggleDraftCanvasShowGrid : void 0,
                dockChrome: isFloorMapView,
                dockExpandedTrailing: viewportDockTrailing,
                autoCollapseDockMs: 1e4
              }
            ), isFloorMapView && floorMapViewportOverlay != null ? /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                className: (0, import_classnames.default)(
                  `${PREFIX}-viewport-overlay`,
                  {
                    [`${PREFIX}-viewport-overlay--bottom-start`]: viewportOverlayPlacement === "bottom-start"
                  },
                  viewportOverlayClassName
                )
              },
              typeof floorMapViewportOverlay === "function" ? floorMapViewportOverlay({
                items,
                dataSources,
                currentCanvasId,
                mode
              }) : floorMapViewportOverlay
            ) : null, 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
                }
              )
            ));
          }
        )
      )
    )
  );
}
var PisellFloorMapLayout = import_react.default.forwardRef(PisellFloorMapLayoutInner);
var PisellFloorMapLayout_default = PisellFloorMapLayout;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  PisellFloorMapLayout
});
