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_FloorMapOverview = require("./components/FloorMapOverview");
var import_FloorMapEditPanel = require("./components/FloorMapEditPanel");
var import_FloorMapEdgeEditPanel = require("./components/FloorMapEdgeEditPanel");
var import_EdgeLayer = require("./components/EdgeLayer");
var import_NodePortMarkers = require("./components/NodePortMarkers");
var import_useFloorMapEdgeEditing = require("./hooks/useFloorMapEdgeEditing");
var import_useFloorMapEdgeViewModel = require("./hooks/useFloorMapEdgeViewModel");
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_floorMapAppearance = require("./appearance/floorMapAppearance");
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_floorMapOverviewLayout = require("./utils/floorMapOverviewLayout");
var import_floorMapViewportPersistence = require("./hooks/floorMapViewportPersistence");
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_floorMapLayoutConstants = require("./floorMapLayoutConstants");
var import_PisellFloorMapLayout = require("./PisellFloorMapLayout.less");
function PisellFloorMapLayoutInner(props, ref) {
  var _a;
  const layoutCtx = (0, import_FloorMapLayoutContext.useFloorMapLayoutContext)();
  const p = (0, import_mergeFloorMapLayoutContext.mergeFloorMapLayoutPropsFromContext)(props, layoutCtx);
  const {
    className,
    style,
    items: itemsProp,
    renderItem,
    rowKey,
    renderItemByKind,
    getMergedItemWrapperStyle,
    enableEdges = false,
    mapLayer,
    cellSize: cellSizeProp,
    itemUnit = "cell",
    zoom = {},
    pan = {},
    controls = {},
    enableHover = true,
    readModeSelectedItemId,
    onItemClick,
    onItemHover,
    onItemLeave,
    mode = "read",
    floorMapConfig: floorMapConfigProp,
    dataSources,
    onSave,
    onExitEdit,
    onDataSourceRecordSave,
    dataSourceLabels,
    dataSourceFormColumns,
    dataSourceRecordForm,
    loading,
    saveError,
    onElementRenderError,
    toolbarShowSave = true,
    renderResourcePickerModal,
    renderPaletteViewAllModal,
    paletteSidebarVisibleLimit,
    floorMapFullscreenMode,
    appearanceMode = "light",
    showDataSourceRecordFormBlock,
    floorMapViewportOverlay,
    viewportOverlayPlacement = "top-start",
    viewportOverlayClassName,
    editTopBarPhoneLayout = false,
    canvasTabsBarTrailing,
    viewportDockToolButtons,
    viewportDockTrailing,
    viewportPersist = true,
    viewportPersistNamespace
  } = 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 focusViewportOnBoundsRef = (0, import_react.useRef)(null);
  const edit = (0, import_useFloorMapEditState.useFloorMapEditState)({
    floorMapConfigProp,
    isFloorMapView,
    itemsProp,
    cellSizeProp,
    dataSources,
    onSave,
    onDataSourceRecordSave,
    dataSourceFormColumns,
    dataSourceRecordForm,
    dataSourceLabels,
    layoutPrefix: import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX,
    contentOffsetRef,
    showDataSourceRecordFormBlock,
    focusViewportOnBoundsRef,
    /**
     * 网格显隐缓存与视口持久化共用同一命名空间，按业务/门店/平面图隔离；
     * 与视口 `viewportPersistKey` 同源，避免换门店/平面图读到别家的网格偏好。
     */
    gridPersistNamespace: viewportPersistNamespace
  });
  const {
    config,
    currentCanvasId,
    setCurrentCanvasId,
    selectedId,
    setSelectedId,
    placeMode,
    setPlaceMode,
    items,
    saving,
    savingRecord,
    handleAddCanvas,
    handleRemoveCanvas,
    handleRenameCanvas,
    handleUpdateItem,
    handleUpdateItemsBatch,
    handleCanvasPlaceClick,
    handleSave,
    placeSceneElementFromPaletteDrop,
    bulkPlacePaletteItems,
    editPanelParams,
    placeOverlayClass,
    isLayoutDirty,
    toggleDraftCanvasShowGrid,
    toggleSelectedLayoutLock,
    duplicateSelectedElement,
    deleteSelectedElement,
    undoDraft,
    redoDraft,
    canUndo,
    canRedo,
    discardDraft,
    commitDraft
  } = edit;
  const mapContentRef = (0, import_react.useRef)(null);
  const currentCanvas = (0, import_react.useMemo)(() => {
    if (!isFloorMapView || !config || !currentCanvasId) {
      return null;
    }
    return config.canvases.find((canvas) => canvas.id === currentCanvasId) ?? null;
  }, [isFloorMapView, config, currentCanvasId]);
  const handleCancelEdit = (0, import_react.useCallback)(() => {
    discardDraft();
    onExitEdit == null ? void 0 : onExitEdit();
  }, [discardDraft, onExitEdit]);
  const effectiveMapLayer = (0, import_react.useMemo)(() => {
    if (!isFloorMapView || !currentCanvas) {
      return mapLayer;
    }
    return { ...mapLayer ?? {}, ...currentCanvas.mapLayer ?? {} };
  }, [isFloorMapView, currentCanvas, mapLayer]);
  const appearanceTokens = (0, import_react.useMemo)(
    () => (0, import_floorMapAppearance.getFloorMapAppearanceTokens)(appearanceMode),
    [appearanceMode]
  );
  const canvasBackgroundColor = ((_a = currentCanvas == null ? void 0 : currentCanvas.mapLayer) == null ? void 0 : _a.backgroundColor) ?? (mapLayer == null ? void 0 : mapLayer.backgroundColor) ?? appearanceTokens.fallbackCanvasBackgroundColor;
  const overviewBackgroundColor = (mapLayer == null ? void 0 : mapLayer.backgroundColor) ?? appearanceTokens.fallbackCanvasBackgroundColor;
  const [isOverview, setIsOverview] = (0, import_react.useState)(false);
  const transformWrapperKey = (0, import_react.useMemo)(() => {
    if (!isFloorMapView) return "fmap-layout";
    const bp = (isOverview ? mapLayer == null ? void 0 : mapLayer.boundingPadding : effectiveMapLayer == null ? void 0 : effectiveMapLayer.boundingPadding) ?? "d";
    const z = zoom.defaultScale ?? 1;
    if (isOverview) return `fmap-overview-bp${bp}-z${z}`;
    return `fmap-${currentCanvasId ?? "na"}-bp${bp}-z${z}`;
  }, [
    isFloorMapView,
    isOverview,
    currentCanvasId,
    effectiveMapLayer == null ? void 0 : effectiveMapLayer.boundingPadding,
    mapLayer == null ? void 0 : mapLayer.boundingPadding,
    zoom.defaultScale
  ]);
  const canvasesForTabsBase = (0, import_react.useMemo)(
    () => config ? (0, import_mergeCanvasesForTabs.mergeCanvasesForTabs)(config) : [],
    [config]
  );
  const engineCtx = (0, import_useEngineContext.default)();
  const engineLocale = (0, import_floorMapCanvasDisplay.getFloorMapDisplayLocale)(engineCtx);
  const hasCanvasTabsBarTrailing = canvasTabsBarTrailing != null && canvasTabsBarTrailing !== false;
  const enabledCanvasCount = (0, import_react.useMemo)(
    () => canvasesForTabsBase.filter((c) => c.enabled).length,
    [canvasesForTabsBase]
  );
  const showOverviewTab = isFloorMapView && mode === "read" && enabledCanvasCount > 1;
  const overviewTabLabel = (0, import_react.useMemo)(() => {
    (0, import_floorMapCanvasDisplay.initFloorMapLayoutLocales)(engineLocale);
    return import_utils.locales.getText("pisell-floor-map-layout.canvas-tabs.overview");
  }, [engineLocale]);
  const canvasesForTabs = (0, import_react.useMemo)(() => {
    if (!showOverviewTab) return canvasesForTabsBase;
    const maxOrder = canvasesForTabsBase.reduce(
      (max, c) => c.order > max ? c.order : max,
      Number.NEGATIVE_INFINITY
    );
    const overviewTab = {
      id: import_floorMapLayoutConstants.FLOOR_MAP_OVERVIEW_TAB_ID,
      name: overviewTabLabel,
      order: Number.isFinite(maxOrder) ? maxOrder + 1 : 0,
      enabled: true
    };
    return [...canvasesForTabsBase, overviewTab];
  }, [canvasesForTabsBase, showOverviewTab, overviewTabLabel]);
  (0, import_react.useEffect)(() => {
    if (mode !== "read") {
      if (isOverview) setIsOverview(false);
      return;
    }
    if (isOverview && enabledCanvasCount <= 1) {
      setIsOverview(false);
    }
  }, [mode, isOverview, enabledCanvasCount]);
  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 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 overviewLayout = (0, import_react.useMemo)(() => {
    if (!isFloorMapView || !isOverview || !config) return null;
    return (0, import_floorMapOverviewLayout.buildFloorMapOverviewLayout)({
      config,
      globalMapLayer: mapLayer,
      cellSize,
      itemUnit: effectiveItemUnit,
      areaGap: import_floorMapLayoutConstants.FLOOR_MAP_OVERVIEW_AREA_GAP
    });
  }, [
    isFloorMapView,
    isOverview,
    config,
    mapLayer,
    cellSize,
    effectiveItemUnit
  ]);
  const viewportPersistKey = (0, import_react.useMemo)(() => {
    if (viewportPersist === false) return void 0;
    if (!isFloorMapView) return void 0;
    if (isOverview) {
      return viewportPersistNamespace ? `${viewportPersistNamespace}:__overview__` : "__overview__";
    }
    if (!currentCanvasId) return void 0;
    return viewportPersistNamespace ? `${viewportPersistNamespace}:${currentCanvasId}` : currentCanvasId;
  }, [
    viewportPersist,
    viewportPersistNamespace,
    isFloorMapView,
    isOverview,
    currentCanvasId
  ]);
  const overviewMetricsItems = (0, import_react.useMemo)(() => {
    if (!overviewLayout) return [];
    return [
      {
        id: "__pisell_floor_map_overview_stage__",
        x: 0,
        y: 0,
        width: overviewLayout.totalWidth,
        height: overviewLayout.totalHeight,
        shape: "rect"
      }
    ];
  }, [overviewLayout]);
  const metrics = (0, import_useFloorMapTransformMetrics.useFloorMapTransformMetrics)({
    items: isOverview && overviewLayout ? overviewMetricsItems : items,
    cellSize,
    itemGap: isOverview ? 0 : itemGap,
    effectiveItemUnit,
    isFloorMapView,
    mode,
    zoom,
    transformRef,
    contentOffsetRef,
    boundingPadding: isOverview ? (mapLayer == null ? void 0 : mapLayer.boundingPadding) ?? import_floorMapViewportPersistence.DEFAULT_BOUNDING_PADDING : effectiveMapLayer == null ? void 0 : effectiveMapLayer.boundingPadding,
    frameResetKey: isFloorMapView ? transformWrapperKey : void 0,
    viewportPersistKey
  });
  const {
    containerRef,
    mapAreaRef,
    mapAreaSize,
    contentWidth,
    contentHeight,
    contentOffsetX,
    contentOffsetY,
    initialPositionX,
    initialPositionY,
    zoomConfig,
    scale,
    setScale,
    isFullscreen,
    toggleFullscreen,
    fitBounds,
    focusContentBounds,
    isAtFitBounds,
    notifyTransformed,
    persistCurrentViewport,
    attachTransformContext,
    isInteractingWithElement,
    setIsInteractingWithElement,
    viewportLocked,
    toggleViewportLocked
  } = metrics;
  (0, import_react.useEffect)(() => {
    focusViewportOnBoundsRef.current = (bounds) => {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          focusContentBounds(bounds);
        });
      });
    };
    return () => {
      focusViewportOnBoundsRef.current = null;
    };
  }, [focusContentBounds]);
  const showEdgeLayer = enableEdges && isFloorMapView && !isOverview && config != null;
  const [edgesLayerVisible, setEdgesLayerVisible] = (0, import_react.useState)(true);
  const showEdgesOnCanvas = showEdgeLayer && edgesLayerVisible;
  const toggleEdgesLayerVisible = (0, import_react.useCallback)(() => {
    setEdgesLayerVisible((v) => !v);
  }, []);
  const readEdgeVm = (0, import_useFloorMapEdgeViewModel.useFloorMapEdgeViewModel)({
    edges: showEdgeLayer && mode === "read" ? (config == null ? void 0 : config.edges) ?? [] : [],
    items: showEdgeLayer ? items : [],
    cellSize,
    itemUnit: effectiveItemUnit,
    itemGap
  });
  const edgeEdit = (0, import_useFloorMapEdgeEditing.useFloorMapEdgeEditing)({
    enabled: showEdgeLayer && mode === "edit",
    config,
    items,
    mergedItems: items,
    cellSize,
    itemUnit: effectiveItemUnit,
    itemGap,
    contentOffsetRef,
    selectedId,
    setSelectedId,
    commitDraft,
    mapContentRef,
    scale
  });
  const edgeRoutes = mode === "edit" && showEdgeLayer ? edgeEdit.routes : readEdgeVm.routes;
  const edgeRectsById = mode === "edit" && showEdgeLayer ? edgeEdit.rectsById : readEdgeVm.rectsById;
  const displayEdges = mode === "edit" && showEdgeLayer ? edgeEdit.edges : (config == null ? void 0 : config.edges) ?? [];
  const getViewportCenterContentCoords = (0, import_react.useCallback)(() => {
    const w = mapAreaSize.width;
    const h = mapAreaSize.height;
    if (w <= 0 || h <= 0) return null;
    const { x: ox, y: oy } = contentOffsetRef.current;
    return {
      x: Math.round(w / 2 - ox),
      y: Math.round(h / 2 - oy)
    };
  }, [mapAreaSize.width, mapAreaSize.height]);
  const handlePlaceActiveAtViewportCenter = (0, import_react.useCallback)(() => {
    if (!placeMode || placeMode.type !== "scene") return;
    const center = getViewportCenterContentCoords();
    if (!center) return;
    placeSceneElementFromPaletteDrop(center.x, center.y, placeMode);
  }, [placeMode, getViewportCenterContentCoords, placeSceneElementFromPaletteDrop]);
  const handleBulkAddPaletteToCanvas = (0, import_react.useCallback)(
    (items2) => {
      if (!items2.length) return;
      bulkPlacePaletteItems(items2);
    },
    [bulkPlacePaletteItems]
  );
  const fsMode = floorMapFullscreenMode ?? "toggle";
  const useFullTopChrome = isFloorMapView && mode === "edit" && (fsMode === "locked" || fsMode === "toggle" && isFullscreen);
  const dockToggleFullscreen = void 0;
  (0, import_react.useEffect)(() => {
    if (!isFloorMapView) return;
    if (fsMode !== "toggle") return;
    const shouldBeFullscreen = mode === "edit";
    if (shouldBeFullscreen !== isFullscreen) {
      toggleFullscreen();
    }
  }, [mode, isFloorMapView, fsMode, isFullscreen, toggleFullscreen]);
  const showEditCompactTopBar = isFloorMapView && mode === "edit" && Boolean(config) && !useFullTopChrome;
  const viewControlsConfig = (0, import_react.useMemo)(() => {
    if (!isFloorMapView) return controls;
    return {
      ...controls,
      showFullscreen: controls.showFullscreen ?? Boolean(dockToggleFullscreen),
      showViewportLock: controls.showViewportLock ?? true,
      showEdgesToggle: showEdgeLayer ? controls.showEdgesToggle ?? true : controls.showEdgesToggle
    };
  }, [isFloorMapView, controls, dockToggleFullscreen, showEdgeLayer]);
  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);
  }, []);
  (0, import_react.useEffect)(() => {
    if (!isFloorMapView || mode !== "edit" || !(config == null ? void 0 : config.canvasUi.canEdit)) {
      return;
    }
    const onKeyDown = (e) => {
      const mod = e.ctrlKey || e.metaKey;
      if (!mod) return;
      const key = e.key.toLowerCase();
      const isUndoCombo = key === "z" && !e.shiftKey && !e.altKey;
      const isRedoCombo = key === "z" && e.shiftKey && !e.altKey || key === "y" && !e.shiftKey && !e.altKey;
      if (!isUndoCombo && !isRedoCombo) return;
      const target = e.target;
      if (target) {
        const tag = target.tagName;
        if (tag === "INPUT" || tag === "TEXTAREA") return;
        if (target.isContentEditable) return;
      }
      const root = containerRef.current;
      if (!root) return;
      const active = document.activeElement;
      const focusInside = active ? root.contains(active) : false;
      const targetInside = target ? root.contains(target) : false;
      if (!focusInside && !targetInside) return;
      if (isUndoCombo && canUndo) {
        e.preventDefault();
        undoDraft();
      } else if (isRedoCombo && canRedo) {
        e.preventDefault();
        redoDraft();
      }
    };
    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  }, [
    isFloorMapView,
    mode,
    config == null ? void 0 : config.canvasUi.canEdit,
    canUndo,
    canRedo,
    undoDraft,
    redoDraft,
    containerRef
  ]);
  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,
        builtinShapeKey: payload.builtinShapeKey
      });
    },
    [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,
        builtinShapeKey: payload.builtinShapeKey
      });
    },
    [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(),
      /**
       * 业务侧把整张 config 灌入草稿（进 undo 栈，可撤销）。
       * 仅在编辑态生效，非编辑态忽略避免污染阅读视图。
       */
      applySceneSnapshot: (next) => {
        if (mode !== "edit") return;
        commitDraft(() => next);
      }
    }),
    [fitBounds, handleSave, mode, commitDraft]
  );
  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(`.${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-editable-item`)) return;
      if (t.closest(`.${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-edit-panel-wrap`)) return;
      if (t.closest(`.${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-view-controls`)) return;
      if (t.closest(`.${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-viewport-overlay`)) return;
      if (t.closest(`.${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-place-overlay`)) return;
      if (t.closest(`.${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-map-drop-layer`)) return;
      setSelectedId(null);
    },
    [isFloorMapView, mode, setSelectedId]
  );
  const [phoneEditDrawerOpen, setPhoneEditDrawerOpen] = (0, import_react.useState)(false);
  (0, import_react.useLayoutEffect)(() => {
    if (editTopBarPhoneLayout && (editPanelParams == null ? void 0 : editPanelParams.itemId)) {
      setPhoneEditDrawerOpen(true);
    }
  }, [editTopBarPhoneLayout, editPanelParams == null ? void 0 : editPanelParams.itemId]);
  (0, import_react.useEffect)(() => {
    if (!editTopBarPhoneLayout || !editPanelParams) {
      setPhoneEditDrawerOpen(false);
    }
  }, [editTopBarPhoneLayout, editPanelParams]);
  const handlePhoneEditDrawerClose = (0, import_react.useCallback)(() => {
    setPhoneEditDrawerOpen(false);
  }, []);
  const handlePhoneEditDrawerAfterOpenChange = (0, import_react.useCallback)(
    (open) => {
      if (!open) {
        setSelectedId(null);
      }
    },
    [setSelectedId]
  );
  const handleCanvasTabChange = (0, import_react.useCallback)(
    (id) => {
      if (id === import_floorMapLayoutConstants.FLOOR_MAP_OVERVIEW_TAB_ID) {
        setIsOverview(true);
        setSelectedId(null);
        return;
      }
      setIsOverview(false);
      setCurrentCanvasId(id);
      setSelectedId(null);
    },
    [setCurrentCanvasId, setSelectedId]
  );
  const tabsCurrentCanvasId = isOverview ? import_floorMapLayoutConstants.FLOOR_MAP_OVERVIEW_TAB_ID : currentCanvasId;
  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      ref: containerRef,
      "data-appearance-mode": appearanceMode,
      className: (0, import_classnames.default)(import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX, className, {
        [`${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-floor-map-view`]: isFloorMapView,
        [`${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-mode-edit`]: isFloorMapView && mode === "edit",
        /** 伪全屏：让根容器 fixed 撑满视口，替代浏览器原生 Fullscreen API */
        [`${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}--pseudo-fullscreen`]: isFullscreen
      }),
      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: handleCanvasTabChange,
        canEditTabs: config.canvasUi.canEdit,
        onAddCanvas: handleAddCanvas,
        onRemoveCanvas: handleRemoveCanvas,
        onRenameCanvas: handleRenameCanvas,
        controls,
        canvasTabsBarTrailing,
        phoneLayout: editTopBarPhoneLayout,
        onUndo: config.canvasUi.canEdit ? undoDraft : void 0,
        onRedo: config.canvasUi.canEdit ? redoDraft : void 0,
        canUndo,
        canRedo
      }
    ),
    isFloorMapView && mode === "edit" && config && useFullTopChrome && /* @__PURE__ */ import_react.default.createElement(
      import_FloorMapEditTopBar.FloorMapEditTopBar,
      {
        mode: "full",
        config,
        canvases: canvasesForTabs,
        currentCanvasId,
        onTabChange: handleCanvasTabChange,
        canEditTabs: config.canvasUi.canEdit,
        onAddCanvas: handleAddCanvas,
        onRemoveCanvas: handleRemoveCanvas,
        onRenameCanvas: handleRenameCanvas,
        onSave: onSave ? handleSave : void 0,
        saving,
        saveError,
        layoutDirty: isLayoutDirty,
        isFullscreen,
        controls,
        extraActions: topBarExtraActions,
        canvasTabsBarTrailing,
        onUndo: config.canvasUi.canEdit ? undoDraft : void 0,
        onRedo: config.canvasUi.canEdit ? redoDraft : void 0,
        canUndo,
        canRedo,
        onExitEdit,
        onCancelEdit: onExitEdit ? handleCancelEdit : void 0,
        phoneLayout: editTopBarPhoneLayout
      }
    ),
    showReadModeCanvasTabsBar && /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: `${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-edit-top-bar ${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-read-canvas-tabs-bar`,
        role: "toolbar",
        "aria-label": readCanvasTabsAriaLabel
      },
      /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-edit-top-bar-tabs` }, /* @__PURE__ */ import_react.default.createElement(
        import_CanvasTabs.CanvasTabs,
        {
          canvases: canvasesForTabs,
          currentCanvasId: tabsCurrentCanvasId,
          onTabChange: handleCanvasTabChange,
          canEdit: false,
          className: `${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-edit-top-bar-canvas-tabs`
        }
      )),
      hasCanvasTabsBarTrailing ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-edit-top-bar-actions` }, canvasTabsBarTrailing) : null
    ),
    loading && /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-loading` }, /* @__PURE__ */ import_react.default.createElement("span", null, loadingLabel)),
    saveError && !(isFloorMapView && mode === "edit" && config) && /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-save-error` }, typeof saveError === "string" ? saveError : saveError == null ? void 0 : saveError.message),
    /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: (0, import_classnames.default)(
          showSidebar && `${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-edit-layout`,
          showSidebar && editTopBarPhoneLayout && `${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-edit-layout--phone-toolbar`
        ),
        style: {
          flex: 1,
          display: showSidebar && editTopBarPhoneLayout ? "block" : "flex",
          flexDirection: showSidebar && !editTopBarPhoneLayout ? "row" : void 0,
          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: import_floorMapElementKindUtils.FLOOR_MAP_RESOURCE_PLACE_DEFAULT.width,
            height: import_floorMapElementKindUtils.FLOOR_MAP_RESOURCE_PLACE_DEFAULT.height
          },
          decorationPreviewSize: 48,
          onSave: onSave && config.canvasUi.canEdit && !useFullTopChrome && toolbarShowSave !== false ? handleSave : void 0,
          saving,
          saveError,
          layoutDirty: isLayoutDirty,
          onPaletteCardPointerDown: paletteTouchDrag.handlePaletteCardPointerDown,
          consumeToolbarClickIfTouchDrag: paletteTouchDrag.consumeToolbarClickIfTouchDrag,
          phoneLayout: editTopBarPhoneLayout,
          defaultCollapsed: editTopBarPhoneLayout,
          paletteSidebarVisibleLimit,
          renderPaletteViewAllModal,
          onRequestPlaceAtCanvasCenter: editTopBarPhoneLayout ? handlePlaceActiveAtViewportCenter : void 0,
          onBulkAddPaletteToCanvas: handleBulkAddPaletteToCanvas,
          onDirectPlacePaletteItem: (item) => bulkPlacePaletteItems([item]),
          onResourcePickerConfirmPlace: (scene) => {
            const center = getViewportCenterContentCoords();
            if (!center) return false;
            return placeSceneElementFromPaletteDrop(
              center.x,
              center.y,
              scene
            );
          },
          renderResourcePickerModal
        }
      ),
      /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          ref: mapAreaRef,
          className: (0, import_classnames.default)(
            showSidebar && `${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-map-area`,
            editTopBarPhoneLayout && showSidebar && `${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-map-area--phone-fill`,
            editPanelVisible && !editTopBarPhoneLayout && `${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-map-area--edit-panel-inset`
          ),
          style: {
            ...editTopBarPhoneLayout && showSidebar ? {
              position: "absolute",
              left: 0,
              right: 0,
              top: 0,
              bottom: 0
            } : {
              flex: 1,
              position: "relative"
            },
            minWidth: 0,
            overflow: "hidden",
            /**
             * 右侧编辑面板占位（padding-right）不在 Transform 内，须与画布背景同色，
             * 避免面板背后露出白底。
             */
            ...isFloorMapView ? {
              backgroundColor: isOverview ? overviewBackgroundColor : canvasBackgroundColor
            } : {}
          },
          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 (related && related instanceof Element && (related.closest(`.${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar`) || related.closest(`.${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-edit-panel-wrap`) || related.closest(`.${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-phone-drawer-root`) || related.closest(`.${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-edit-panel-phone-drawer-root`) || related.closest(".ant-drawer") || related.closest(".pisell-lowcode-drawer"))) {
              return;
            }
            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 || viewportLocked,
              velocityDisabled: true
            },
            wheel: { disabled: viewportLocked },
            pinch: { disabled: viewportLocked },
            doubleClick: { disabled: true },
            onTransformed: (_, state) => {
              setScale(state.scale);
              notifyTransformed(state.positionX, state.positionY, state.scale);
            },
            onPanningStop: persistCurrentViewport,
            onZoomStop: persistCurrentViewport,
            onPinchingStop: persistCurrentViewport,
            onWheelStop: persistCurrentViewport
          },
          (ctx) => {
            var _a2;
            attachTransformContext(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: isOverview ? overviewBackgroundColor : canvasBackgroundColor,
                  overflow: "visible"
                },
                contentStyle: {
                  width: contentWidth,
                  height: contentHeight,
                  minWidth: contentWidth,
                  minHeight: contentHeight,
                  position: "relative",
                  overflow: "visible",
                  backgroundColor: isOverview ? overviewBackgroundColor : canvasBackgroundColor
                }
              },
              isOverview && overviewLayout && config ? (
                /**
                 * 全览模式：不渲染 MapLayer 背景 / 网格 / placeOverlay / dropLayer；
                 * 每个画布的图元由 FloorMapOverview 在 contentOffset 的内部绝对定位渲染，
                 * 缩放/平移/锁定/全屏/fitBounds 由外层 TransformWrapper + ViewControls 接管。
                 */
                /* @__PURE__ */ import_react.default.createElement(
                  "div",
                  {
                    style: {
                      position: "absolute",
                      left: contentOffsetX,
                      top: contentOffsetY,
                      width: overviewLayout.totalWidth,
                      height: overviewLayout.totalHeight
                    }
                  },
                  /* @__PURE__ */ import_react.default.createElement(
                    import_FloorMapOverview.FloorMapOverview,
                    {
                      overviewLayout,
                      config,
                      itemUnit: effectiveItemUnit,
                      renderItem: effectiveRenderItem,
                      viewportScale: scale,
                      enableHover,
                      onItemClick: handleItemClick,
                      onItemHover,
                      onItemLeave,
                      getMergedItemWrapperStyle,
                      readModeSelectedItemId,
                      onSelectCanvas: handleCanvasTabChange
                    }
                  )
                )
              ) : /* @__PURE__ */ import_react.default.createElement(
                "div",
                {
                  ref: mapContentRef,
                  className: `${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-map-content`,
                  style: {
                    position: "relative",
                    width: contentWidth,
                    height: contentHeight
                  }
                },
                /* @__PURE__ */ import_react.default.createElement(
                  import_MapLayer.default,
                  {
                    config: effectiveMapLayer,
                    contentWidth,
                    contentHeight,
                    cellSize,
                    preferCanvasGrid: true,
                    pointerEventsNone: isFloorMapView && mode === "edit"
                  }
                ),
                showEdgesOnCanvas ? /* @__PURE__ */ import_react.default.createElement(
                  import_EdgeLayer.EdgeLayer,
                  {
                    width: contentWidth,
                    height: contentHeight,
                    contentOffsetX,
                    contentOffsetY,
                    edges: displayEdges,
                    routes: edgeRoutes,
                    rectsById: edgeRectsById,
                    appearance: appearanceTokens,
                    mode,
                    selectedEdgeId: mode === "edit" ? edgeEdit.selectedEdgeId : null,
                    ghostPathD: mode === "edit" ? edgeEdit.ghostPathD : null,
                    onEdgeClick: mode === "edit" ? (edgeId) => edgeEdit.handleEdgeClick(edgeId) : void 0,
                    viewportScale: scale,
                    onSegmentDragStart: mode === "edit" ? edgeEdit.startDraggingSegment : void 0
                  }
                ) : null,
                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: edgeEdit.selectNode,
                    onUpdateItem: handleUpdateItem,
                    onUpdateItemsBatch: handleUpdateItemsBatch,
                    snapStep: (effectiveMapLayer == null ? void 0 : effectiveMapLayer.snapStep) ?? 0,
                    scale,
                    onInteractionChange: setIsInteractingWithElement,
                    onLiveRectChange: (itemId, rect) => {
                      if (!itemId || !rect) {
                        edgeEdit.setPendingRectsById({});
                        return;
                      }
                      edgeEdit.setPendingRectsById({
                        [itemId]: {
                          left: rect.left,
                          top: rect.top,
                          width: rect.width,
                          height: rect.height
                        }
                      });
                    },
                    onLiveRectsChange: (rects) => {
                      edgeEdit.setPendingRectsById(rects ?? {});
                    },
                    alignGuideStroke: appearanceTokens.alignGuideStroke,
                    getMergedItemWrapperStyle,
                    editQuickBar
                  }
                ) : /* @__PURE__ */ import_react.default.createElement(
                  import_ItemLayer.default,
                  {
                    items,
                    renderItem: effectiveRenderItem,
                    viewportScale: scale,
                    rowKey,
                    cellSize,
                    itemUnit: effectiveItemUnit,
                    itemGap,
                    contentWidth,
                    contentHeight,
                    contentOffsetX,
                    contentOffsetY,
                    enableHover,
                    itemHoverOutline: true,
                    onItemClick: handleItemClick,
                    onItemHover,
                    onItemLeave,
                    getMergedItemWrapperStyle,
                    onInteractionChange: setIsInteractingWithElement,
                    readModeSelectedItemId
                  }
                ),
                isFloorMapView && mode === "edit" && showEdgeLayer && selectedId && edgeEdit.selectedNodeRect ? /* @__PURE__ */ import_react.default.createElement(
                  import_NodePortMarkers.NodePortMarkers,
                  {
                    rect: edgeEdit.selectedNodeRect,
                    contentOffsetX,
                    contentOffsetY,
                    viewportScale: scale,
                    highlightAnchors: ((_a2 = edgeEdit.drawing) == null ? void 0 : _a2.fromInstanceId) === selectedId ? [edgeEdit.drawing.fromAnchor] : [],
                    onAnchorPointerDown: (anchor) => {
                      if (selectedId) {
                        edgeEdit.startDrawingFromAnchor(
                          selectedId,
                          anchor
                        );
                      }
                    }
                  }
                ) : null,
                isFloorMapView && mode === "edit" && showEdgeLayer && edgeEdit.drawing && edgeEdit.drawingTargetPreview ? /* @__PURE__ */ import_react.default.createElement(
                  import_NodePortMarkers.NodePortMarkers,
                  {
                    className: `${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-port-markers--draw-target`,
                    rect: edgeEdit.drawingTargetPreview.rect,
                    contentOffsetX,
                    contentOffsetY,
                    viewportScale: scale,
                    previewOnly: true,
                    highlightAnchors: [
                      edgeEdit.drawingTargetPreview.anchor
                    ]
                  }
                ) : null,
                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)(`${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-map-drop-layer`, {
                      [`${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-map-drop-layer-active`]: mapPaletteDragActive
                    }),
                    style: {
                      width: contentWidth,
                      height: contentHeight
                    },
                    onDragOver: (ev) => {
                      ev.preventDefault();
                      ev.stopPropagation();
                    },
                    onDrop: handlePaletteDropOnCanvas,
                    onClick: () => {
                      if ((placeMode == null ? void 0 : placeMode.type) === "scene") return;
                      edgeEdit.handleMapBackgroundClick();
                    }
                  }
                )
              )
            ), /* @__PURE__ */ import_react.default.createElement(
              import_ViewControlsWithZoom.ViewControlsWithZoom,
              {
                config: viewControlsConfig,
                scale,
                isFullscreen,
                fitBoundsActive: isAtFitBounds,
                fitBounds,
                toggleFullscreen: dockToggleFullscreen,
                mapGridVisible: isOverview ? false : Boolean(effectiveMapLayer == null ? void 0 : effectiveMapLayer.showGrid),
                onToggleMapGrid: isFloorMapView && !isOverview ? toggleDraftCanvasShowGrid : void 0,
                edgesLayerVisible,
                onToggleEdgesLayer: showEdgeLayer ? toggleEdgesLayerVisible : void 0,
                viewportLocked,
                onToggleViewportLock: isFloorMapView ? toggleViewportLocked : void 0,
                dockChrome: isFloorMapView,
                dockExpandedToolButtons: viewportDockToolButtons,
                dockExpandedTrailing: viewportDockTrailing,
                autoCollapseDockMs: 1e4
              }
            ), isFloorMapView && floorMapViewportOverlay != null ? /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                className: (0, import_classnames.default)(
                  `${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-viewport-overlay`,
                  {
                    [`${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-viewport-overlay--bottom-start`]: viewportOverlayPlacement === "bottom-start"
                  },
                  viewportOverlayClassName
                )
              },
              typeof floorMapViewportOverlay === "function" ? floorMapViewportOverlay({
                items,
                dataSources,
                currentCanvasId,
                mode
              }) : floorMapViewportOverlay
            ) : null, isFloorMapView && mode === "edit" && config && dataSources && !editTopBarPhoneLayout && (edgeEdit.selectedEdge || editPanelParams) && /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                className: (0, import_classnames.default)(
                  `${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-edit-panel-wrap`,
                  mapAreaSize.height > 0 && `${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-edit-panel-wrap-constrained`
                ),
                style: mapAreaSize.height > 0 ? { overflow: "hidden" } : void 0
              },
              edgeEdit.selectedEdge ? /* @__PURE__ */ import_react.default.createElement(
                import_FloorMapEdgeEditPanel.FloorMapEdgeEditPanel,
                {
                  edge: edgeEdit.selectedEdge,
                  config,
                  onUpdate: (patch) => edgeEdit.updateEdge(
                    edgeEdit.selectedEdge.id,
                    patch
                  ),
                  onClose: () => edgeEdit.selectEdge(null),
                  onDelete: config.canvasUi.canEdit ? () => edgeEdit.deleteEdge(
                    edgeEdit.selectedEdge.id
                  ) : void 0,
                  layoutDraftDirty: isLayoutDirty
                }
              ) : editPanelParams ? /* @__PURE__ */ import_react.default.createElement(
                import_FloorMapEditPanel.FloorMapEditPanel,
                {
                  ...editPanelParams,
                  config,
                  dataSources,
                  savingRecord
                }
              ) : null
            ));
          }
        )
      )
    )
  ), editTopBarPhoneLayout && config && dataSources && (edgeEdit.selectedEdge || editPanelParams) && /* @__PURE__ */ import_react.default.createElement(
    import_antd.Drawer,
    {
      placement: "right",
      open: phoneEditDrawerOpen,
      onClose: handlePhoneEditDrawerClose,
      afterOpenChange: handlePhoneEditDrawerAfterOpenChange,
      width: "min(320px, 88vw)",
      zIndex: import_floorMapLayoutConstants.FLOOR_MAP_PHONE_EDIT_DRAWER_Z_INDEX,
      maskClosable: true,
      destroyOnClose: false,
      closable: false,
      rootClassName: `${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-edit-panel-phone-drawer-root`,
      classNames: {
        body: `${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-edit-panel-phone-drawer-body`
      },
      styles: {
        body: {
          padding: 0,
          overflow: "auto",
          height: "100%"
        }
      },
      getContainer: typeof document !== "undefined" ? () => document.body : void 0
    },
    /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: (0, import_classnames.default)(
          `${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-edit-panel-wrap`,
          `${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-edit-panel-wrap--phone-drawer`
        )
      },
      edgeEdit.selectedEdge ? /* @__PURE__ */ import_react.default.createElement(
        import_FloorMapEdgeEditPanel.FloorMapEdgeEditPanel,
        {
          edge: edgeEdit.selectedEdge,
          config,
          onUpdate: (patch) => edgeEdit.updateEdge(edgeEdit.selectedEdge.id, patch),
          onClose: () => edgeEdit.selectEdge(null),
          onDelete: config.canvasUi.canEdit ? () => edgeEdit.deleteEdge(edgeEdit.selectedEdge.id) : void 0,
          layoutDraftDirty: isLayoutDirty,
          className: `${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-edit-panel--phone-drawer`
        }
      ) : editPanelParams ? /* @__PURE__ */ import_react.default.createElement(
        import_FloorMapEditPanel.FloorMapEditPanel,
        {
          ...editPanelParams,
          config,
          dataSources,
          savingRecord,
          className: `${import_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-edit-panel--phone-drawer`
        }
      ) : null
    )
  ));
}
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
});
