@pisell/materials 6.11.17 → 6.11.19

package/lib/components/pisellFloorMapLayout/PisellFloorMapLayout.js

@@ -0,0 +1,709 @@
+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_icons = require("@ant-design/icons");
+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,
+    canvasTabsBarTrailing
+  } = 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 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
+  } = 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 showReadModeCanvasTabsBar = (0, import_react.useMemo)(() => {
+    if (!isFloorMapView || mode !== "read" || !config) return false;
+    if (hasCanvasTabsBarTrailing) return true;
+    return canvasesForTabs.filter((c) => c.enabled).length > 1;
+  }, [isFloorMapView, mode, config, canvasesForTabs, hasCanvasTabsBarTrailing]);
+  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 readCanvasTabsFsLabels = (0, import_react.useMemo)(() => {
+    (0, import_floorMapCanvasDisplay.initFloorMapLayoutLocales)(engineLocale);
+    return {
+      fsEnterAria: import_utils.locales.getText(
+        "pisell-floor-map-layout.edit-top-bar.fullscreen-enter-aria"
+      ),
+      fsEnterTitle: import_utils.locales.getText(
+        "pisell-floor-map-layout.edit-top-bar.fullscreen-enter-title"
+      ),
+      fsExitAria: import_utils.locales.getText(
+        "pisell-floor-map-layout.edit-top-bar.fullscreen-exit-aria"
+      ),
+      fsExitTitle: import_utils.locales.getText(
+        "pisell-floor-map-layout.edit-top-bar.fullscreen-exit-title"
+      )
+    };
+  }, [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)(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 editToggleFullscreen = fsMode === "toggle" ? toggleFullscreen : void 0;
+  const readToggleFullscreen = isFloorMapView && mode === "read" && fsMode === "toggle" ? toggleFullscreen : void 0;
+  const viewControlsConfig = (0, import_react.useMemo)(() => {
+    if (!isFloorMapView || mode !== "edit") return controls;
+    return {
+      ...controls,
+      showFullscreen: false
+    };
+  }, [isFloorMapView, mode, controls]);
+  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;
+  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 } : {},
+        ...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,
+        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,
+        toggleFullscreen: editToggleFullscreen,
+        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 || readToggleFullscreen ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-top-bar-actions` }, canvasTabsBarTrailing, readToggleFullscreen ? /* @__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: () => readToggleFullscreen(),
+          "aria-label": isFullscreen ? readCanvasTabsFsLabels.fsExitAria : readCanvasTabsFsLabels.fsEnterAria,
+          title: isFullscreen ? readCanvasTabsFsLabels.fsExitTitle : readCanvasTabsFsLabels.fsEnterTitle
+        },
+        isFullscreen ? /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenExitOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenOutlined, null)
+      ) : null) : 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 || useFullTopChrome && isFullscreen) ? 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,
+          {
+            key: transformWrapperKey,
+            centerOnInit: false,
+            initialScale: zoomConfig.initialScale,
+            initialPositionX,
+            initialPositionY,
+            minScale: zoomConfig.minScale,
+            maxScale: zoomConfig.maxScale,
+            ...{ 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
+                }
+              ) : /* @__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,
+                  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: editToggleFullscreen,
+                mapGridVisible: Boolean(effectiveMapLayer == null ? void 0 : effectiveMapLayer.showGrid),
+                onToggleMapGrid: isFloorMapView ? toggleDraftCanvasShowGrid : void 0
+              }
+            ), isFloorMapView && floorMapViewportOverlay != null ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-viewport-overlay` }, 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
+});