@pisell/materials 1.0.1059 → 1.0.1062

package/lib/components/pisellFloorMapLayout/components/FloorMapToolbar.js

@@ -0,0 +1,333 @@
+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/components/FloorMapToolbar.tsx
+var FloorMapToolbar_exports = {};
+__export(FloorMapToolbar_exports, {
+  FloorMapToolbar: () => FloorMapToolbar,
+  default: () => FloorMapToolbar_default
+});
+module.exports = __toCommonJS(FloorMapToolbar_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_antd = require("antd");
+var import_types = require("../types");
+var import_floorMapElementKindUtils = require("../utils/floorMapElementKindUtils");
+var import_floorMapDropUtils = require("../utils/floorMapDropUtils");
+var import_FloorMapToolbar = require("./FloorMapToolbar.less");
+var PREFIX = "pisell-floor-map-layout";
+var DEFAULT_PLACEMENT_SIZE = { width: 180, height: 120 };
+var DEFAULT_DECORATION_SIZE = 48;
+function formatDataRecordOptionLabel(record) {
+  const name = record.name != null ? String(record.name) : "";
+  const status = record.status != null ? String(record.status) : "";
+  if (name && status) return `${name}（${status}）`;
+  return name || String(record.id);
+}
+function getUnplacedRecordsForKey(dataSourceKey, dataSources, elements) {
+  const used = new Set(
+    elements.filter((e) => {
+      var _a;
+      return ((_a = e.dataBinding) == null ? void 0 : _a.dataSourceKey) === dataSourceKey;
+    }).map((e) => e.dataBinding.recordId)
+  );
+  const list = dataSources[dataSourceKey] ?? [];
+  return list.filter(
+    (r) => r && typeof r.id === "string" && !used.has(r.id)
+  );
+}
+function buildScenePreviewMergedItem(kind, dataSourceKey, size) {
+  const el = {
+    instanceId: `preview_${kind.value}`,
+    canvasId: "",
+    x: 0,
+    y: 0,
+    width: size.width,
+    height: size.height,
+    elementKind: kind.value,
+    shape: kind.defaultShape,
+    dataBinding: dataSourceKey && (0, import_floorMapElementKindUtils.resolveDataBindingPolicy)(kind) !== "none" ? { dataSourceKey, recordId: "" } : void 0,
+    ...kind.value === import_types.FLOOR_MAP_IMAGE_ELEMENT_KIND ? { imageUrl: "" } : {}
+  };
+  return {
+    id: el.instanceId,
+    instanceId: el.instanceId,
+    x: 0,
+    y: 0,
+    width: size.width,
+    height: size.height,
+    shape: kind.defaultShape,
+    elementKind: kind.value,
+    _sceneElement: el
+  };
+}
+var STAGE_PREVIEW_SIZE = { width: 160, height: 64 };
+var IMAGE_PREVIEW_SIZE = { width: 140, height: 80 };
+function FloorMapToolbar(props) {
+  const {
+    config,
+    dataSources,
+    dataSourceLabels = {},
+    canCreate,
+    placeMode,
+    onPlaceModeChange,
+    renderPreviewItem,
+    placementPreviewSize = DEFAULT_PLACEMENT_SIZE,
+    decorationPreviewSize = DEFAULT_DECORATION_SIZE,
+    sceneElements = [],
+    onSave,
+    saving,
+    saveError,
+    layoutDirty,
+    className,
+    onPaletteCardPointerDown,
+    consumeToolbarClickIfTouchDrag
+  } = props;
+  const paletteKinds = (0, import_react.useMemo)(
+    () => (config.elementKinds ?? []).filter((k) => k.showInPalette !== false),
+    [config.elementKinds]
+  );
+  const categories = (0, import_react.useMemo)(() => {
+    const raw = config.elementKindCategories ?? [];
+    const sorted = [...raw].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    return sorted.length ? sorted : [{ id: "_uncat", label: "图元", order: 0 }];
+  }, [config.elementKindCategories]);
+  const kindsByCategory = (0, import_react.useMemo)(() => {
+    var _a;
+    const map = /* @__PURE__ */ new Map();
+    for (const c of categories) {
+      map.set(c.id, []);
+    }
+    const fallbackId = ((_a = categories[0]) == null ? void 0 : _a.id) ?? "_uncat";
+    for (const k of paletteKinds) {
+      const cid = k.categoryId ?? fallbackId;
+      if (!map.has(cid)) map.set(cid, []);
+      map.get(cid).push(k);
+    }
+    return map;
+  }, [categories, paletteKinds]);
+  const handleSelectKind = (kind) => {
+    const policy = (0, import_floorMapElementKindUtils.resolveDataBindingPolicy)(kind);
+    const next = {
+      type: "scene",
+      elementKind: kind.value,
+      /** 不预锁单一数据源，由用户在工具栏「数据源」中选择；落点时用 allowedKeys[0] 作兜底 */
+      dataSourceKey: void 0,
+      recordId: void 0
+    };
+    const isSame = (placeMode == null ? void 0 : placeMode.type) === "scene" && placeMode.elementKind === kind.value;
+    onPlaceModeChange(isSame ? null : next);
+  };
+  const handleDsChange = (mode, key) => {
+    onPlaceModeChange({
+      ...mode,
+      dataSourceKey: key,
+      recordId: void 0
+    });
+  };
+  const handleRecordChange = (mode, recordId) => {
+    onPlaceModeChange({ ...mode, recordId: recordId || void 0 });
+  };
+  const cancelPlaceMode = () => onPlaceModeChange(null);
+  const renderKindCard = (k) => {
+    var _a;
+    const policy = (0, import_floorMapElementKindUtils.resolveDataBindingPolicy)(k);
+    const isStage = k.value === import_types.FLOOR_MAP_STAGE_ELEMENT_KIND;
+    const isImageKind = k.value === import_types.FLOOR_MAP_IMAGE_ELEMENT_KIND;
+    const placementLike = policy !== "none" && !isStage || isImageKind;
+    const size = isStage ? STAGE_PREVIEW_SIZE : placementLike ? isImageKind ? IMAGE_PREVIEW_SIZE : placementPreviewSize : {
+      width: decorationPreviewSize,
+      height: decorationPreviewSize
+    };
+    const activeDs = (placeMode == null ? void 0 : placeMode.type) === "scene" && placeMode.elementKind === k.value ? placeMode.dataSourceKey : void 0;
+    const item = buildScenePreviewMergedItem(k, activeDs, size);
+    const isActive = (placeMode == null ? void 0 : placeMode.type) === "scene" && placeMode.elementKind === k.value;
+    const cellW = isStage ? 92 : placementLike ? 80 : decorationPreviewSize;
+    const cellH = isStage ? 40 : placementLike ? 54 : decorationPreviewSize;
+    const previewW = isImageKind ? IMAGE_PREVIEW_SIZE.width : placementPreviewSize.width;
+    const previewH = isImageKind ? IMAGE_PREVIEW_SIZE.height : placementPreviewSize.height;
+    const placeScale = placementLike ? Math.min(cellW / previewW, cellH / previewH) : 1;
+    const stageScale = isStage ? Math.min(cellW / item.width, cellH / item.height, 1) : 1;
+    const allKeys = Object.keys(dataSources);
+    const allowedKeys = ((_a = k.allowedDataSourceKeys) == null ? void 0 : _a.length) ? k.allowedDataSourceKeys.filter((x) => allKeys.includes(x)) : allKeys;
+    const paletteDragPayload = {
+      elementKind: k.value,
+      ...(placeMode == null ? void 0 : placeMode.type) === "scene" && placeMode.elementKind === k.value ? {
+        dataSourceKey: placeMode.dataSourceKey,
+        recordId: placeMode.recordId
+      } : {}
+    };
+    return /* @__PURE__ */ import_react.default.createElement("div", { key: k.value, className: `${PREFIX}-toolbar-preview-card-wrap` }, /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        type: "button",
+        draggable: true,
+        className: (0, import_classnames.default)(
+          `${PREFIX}-toolbar-preview-card`,
+          !placementLike ? `${PREFIX}-toolbar-preview-card-deco` : void 0,
+          { [`${PREFIX}-toolbar-preview-card-active`]: isActive }
+        ),
+        onClick: () => {
+          if (consumeToolbarClickIfTouchDrag == null ? void 0 : consumeToolbarClickIfTouchDrag()) return;
+          handleSelectKind(k);
+        },
+        onPointerDown: (e) => onPaletteCardPointerDown == null ? void 0 : onPaletteCardPointerDown(paletteDragPayload, e),
+        onDragStart: (e) => {
+          e.dataTransfer.setData(
+            import_floorMapDropUtils.FLOOR_MAP_PALETTE_DRAG_MIME,
+            JSON.stringify(paletteDragPayload)
+          );
+          e.dataTransfer.effectAllowed = "copy";
+        },
+        title: `点击后画布落点，或拖拽到画布生成「${k.label}」`
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: `${PREFIX}-toolbar-preview-cell`,
+          style: { width: cellW, height: cellH }
+        },
+        renderPreviewItem ? /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: `${PREFIX}-toolbar-preview-content`,
+            style: placementLike ? {
+              width: previewW,
+              height: previewH,
+              transform: `scale(${placeScale})`,
+              transformOrigin: "top left"
+            } : isStage ? {
+              width: item.width,
+              height: item.height,
+              transform: `scale(${stageScale})`,
+              transformOrigin: "top left"
+            } : void 0
+          },
+          renderPreviewItem(item)
+        ) : /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-toolbar-preview-fallback` }, k.label)
+      ),
+      /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-toolbar-preview-card-label` }, k.label)
+    ), isActive && policy !== "none" && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, allowedKeys.length >= 1 && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-pick` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-pick-label` }, "数据绑定（可选）"), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Select,
+      {
+        placeholder: "选择数据源",
+        allowClear: true,
+        value: placeMode.type === "scene" ? placeMode.dataSourceKey : void 0,
+        options: allowedKeys.map((key) => ({
+          value: key,
+          label: dataSourceLabels[key] ?? key
+        })),
+        onChange: (v) => {
+          if ((placeMode == null ? void 0 : placeMode.type) === "scene")
+            handleDsChange(placeMode, v);
+        },
+        size: "small",
+        style: { width: "100%" }
+      }
+    ), (() => {
+      const mode = (placeMode == null ? void 0 : placeMode.type) === "scene" ? placeMode : null;
+      const key = mode == null ? void 0 : mode.dataSourceKey;
+      if (!key) {
+        return /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-pick-hint` }, "选择数据源后可选绑定数据行，或直接落点占位。");
+      }
+      const unplaced = getUnplacedRecordsForKey(
+        key,
+        dataSources,
+        sceneElements
+      );
+      if (unplaced.length === 0) {
+        return /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-pick-hint` }, "当前数据源无未绑定记录，或列表为空；可直接在画布落点占位。");
+      }
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Select,
+        {
+          placeholder: "选择要展示的记录（可选）",
+          allowClear: true,
+          value: mode == null ? void 0 : mode.recordId,
+          options: unplaced.map((r) => ({
+            value: r.id,
+            label: formatDataRecordOptionLabel(r)
+          })),
+          onChange: (v) => {
+            if (mode) handleRecordChange(mode, v);
+          },
+          size: "small",
+          style: { width: "100%", marginTop: 4 }
+        }
+      ), /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-pick-hint` }, "选中后在画布点击完成落位；留空则先占位，稍后在侧栏绑定。"));
+    })()), allowedKeys.length === 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-hint` }, "无可用数据源"), /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        type: "button",
+        className: `${PREFIX}-toolbar-btn cancel-inline`,
+        onClick: cancelPlaceMode
+      },
+      "取消新建"
+    )), isActive && policy === "none" && /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        type: "button",
+        className: `${PREFIX}-toolbar-btn cancel-inline`,
+        onClick: cancelPlaceMode
+      },
+      "取消新建"
+    ));
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)(
+        `${PREFIX}-toolbar`,
+        `${PREFIX}-toolbar-sidebar`,
+        className
+      )
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-body` }, canCreate && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, categories.map((cat) => {
+      const kinds = kindsByCategory.get(cat.id) ?? [];
+      if (!kinds.length) return null;
+      return /* @__PURE__ */ import_react.default.createElement("section", { key: cat.id, className: `${PREFIX}-toolbar-section` }, /* @__PURE__ */ import_react.default.createElement("h3", { className: `${PREFIX}-toolbar-section-title` }, cat.label), /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-preview-list` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-preview-group` }, kinds.map((k) => renderKindCard(k)))));
+    }))),
+    onSave && config.canvasUi.canEdit && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-footer` }, layoutDirty ? /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-toolbar-dirty-hint`, role: "status" }, "布局已修改，请点击「保存」持久化。") : null, saveError && /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-toolbar-error` }, typeof saveError === "string" ? saveError : saveError == null ? void 0 : saveError.message), /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        type: "button",
+        className: (0, import_classnames.default)(`${PREFIX}-toolbar-btn`, "primary", {
+          [`${PREFIX}-toolbar-save-dirty`]: layoutDirty
+        }),
+        disabled: saving,
+        onClick: onSave
+      },
+      saving ? "保存中..." : "保存"
+    ))
+  );
+}
+var FloorMapToolbar_default = FloorMapToolbar;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FloorMapToolbar
+});

package/lib/components/pisellFloorMapLayout/components/FloorMapToolbar.less

@@ -0,0 +1,237 @@
+/* 左侧侧边栏：添加数据图元 / 添加装饰（图元预览）+ 保存 */
+.pisell-floor-map-layout-toolbar {
+  &.pisell-floor-map-layout-toolbar-sidebar {
+    position: relative;
+    width: 220px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    background: #fff;
+    border-right: 1px solid #e8e8e8;
+    z-index: 10;
+  }
+
+  &-body {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 12px 10px;
+  }
+
+  &-section {
+    margin-bottom: 16px;
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+
+  &-section-title {
+    margin: 0 0 8px 0;
+    padding: 0 4px;
+    font-size: 13px;
+    font-weight: 600;
+    color: #262626;
+    line-height: 20px;
+  }
+
+  &-preview-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &-preview-group {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  &-preview-group-label {
+    padding: 0 4px;
+    font-size: 12px;
+    color: #8c8c8c;
+    line-height: 18px;
+  }
+
+  &-preview-card-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    align-items: stretch;
+  }
+
+  &-preview-card {
+    display: block;
+    width: 100%;
+    padding: 6px;
+    text-align: center;
+    background: #fafafa;
+    border: 1px solid #e8e8e8;
+    border-radius: 6px;
+    cursor: grab;
+    transition: border-color 0.2s, background 0.2s;
+
+    &:hover {
+      background: #f0f7ff;
+      border-color: #91caff;
+    }
+
+    &.pisell-floor-map-layout-toolbar-preview-card-active {
+      background: #e6f4ff;
+      border-color: #1677ff;
+      box-shadow: 0 0 0 1px #1677ff;
+    }
+
+    &.pisell-floor-map-layout-toolbar-preview-card-deco {
+      .pisell-floor-map-layout-toolbar-preview-cell {
+        margin: 0 auto;
+      }
+    }
+  }
+
+  &-preview-card-label {
+    display: block;
+    margin-top: 4px;
+    font-size: 12px;
+    color: #262626;
+    line-height: 18px;
+  }
+
+  &-preview-cell {
+    position: relative;
+    margin: 0 auto;
+    overflow: hidden;
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
+
+  &-preview-content {
+    pointer-events: none;
+  }
+
+  &-preview-cell {
+    .pisell-floor-map-layout-toolbar-preview-content {
+      overflow: hidden;
+    }
+  }
+
+  &-preview-fallback {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    min-height: 40px;
+    font-size: 12px;
+    color: #8c8c8c;
+  }
+
+  &-btn {
+    display: block;
+    width: 100%;
+    margin-top: 8px;
+    padding: 8px 12px;
+    font-size: 13px;
+    color: #333;
+    background: #f5f5f5;
+    border: 1px solid #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+
+    &:hover {
+      color: #1677ff;
+      border-color: #1677ff;
+      background: #e6f4ff;
+    }
+
+    &.cancel {
+      color: #8c8c8c;
+      margin-top: 12px;
+    }
+
+    &.cancel-inline {
+      margin-top: 0;
+      padding: 4px 8px;
+      font-size: 12px;
+      color: #8c8c8c;
+    }
+
+    &.primary {
+      color: #fff;
+      background: #1677ff;
+      border-color: #1677ff;
+
+      &:hover:not(:disabled) {
+        background: #4096ff;
+        border-color: #4096ff;
+      }
+
+      &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  &-footer {
+    flex-shrink: 0;
+    padding: 12px 10px;
+    border-top: 1px solid #f0f0f0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &-dirty-hint {
+    font-size: 12px;
+    line-height: 1.45;
+    color: #d48806;
+    padding: 6px 8px;
+    background: #fffbe6;
+    border: 1px solid #ffe58f;
+    border-radius: 6px;
+  }
+
+  &-save-dirty {
+    box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.35);
+  }
+
+  &-error {
+    font-size: 12px;
+    color: #ff4d4f;
+  }
+
+  &-record-pick {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 8px;
+    margin-top: 4px;
+    background: #f5f5f5;
+    border-radius: 6px;
+    border: 1px solid #e8e8e8;
+  }
+
+  &-record-pick-label {
+    font-size: 12px;
+    font-weight: 600;
+    color: #434343;
+  }
+
+  &-record-pick-hint {
+    font-size: 11px;
+    color: #8c8c8c;
+    line-height: 1.45;
+  }
+
+  &-record-hint {
+    font-size: 11px;
+    color: #8c8c8c;
+    padding: 6px 8px;
+    margin-top: 4px;
+    line-height: 1.45;
+    background: #fafafa;
+    border-radius: 4px;
+  }
+}

package/lib/components/pisellFloorMapLayout/components/ItemLayer.d.ts

@@ -4,6 +4,7 @@
  */
 import React from 'react';
 import type { FloorMapItemBase, FloorMapItemUnit } from '../types';
+import type { CSSProperties } from 'react';
 import './ItemLayer.less';
 export interface ItemLayerProps<T extends FloorMapItemBase> {
     /** 资源列表 */
@@ -22,6 +23,10 @@ export interface ItemLayerProps<T extends FloorMapItemBase> {
     contentWidth: number;
     /** 内容区总高度（像素） */
     contentHeight: number;
+    /** 内容区 X 偏移（画布包围盒向左/上扩展时，图元层整体平移） */
+    contentOffsetX?: number;
+    /** 内容区 Y 偏移 */
+    contentOffsetY?: number;
     /** 是否启用 hover 事件 */
     enableHover?: boolean;
     /** 点击回调 */
@@ -30,6 +35,8 @@ export interface ItemLayerProps<T extends FloorMapItemBase> {
     onItemHover?: (item: T, index: number, e: React.MouseEvent<HTMLElement>) => void;
     /** hover 离开 */
     onItemLeave?: (item: T, index: number, e: React.MouseEvent<HTMLElement>) => void;
+    /** 每项外层容器额外样式（与定位样式合并） */
+    getMergedItemWrapperStyle?: (item: T, index: number) => CSSProperties | undefined;
     className?: string;
 }
 export declare function ItemLayer<T extends FloorMapItemBase>(props: ItemLayerProps<T>): JSX.Element;

package/lib/components/pisellFloorMapLayout/components/ItemLayer.js

@@ -39,7 +39,8 @@ var import_ItemLayer = require("./ItemLayer.less");
 var PREFIX = "pisell-floor-map-layout";
 function getItemKey(item, index, rowKey) {
   if (!rowKey) return item.id;
-  if (typeof rowKey === "string") return String(item[rowKey] ?? item.id);
+  if (typeof rowKey === "string")
+    return String(item[rowKey] ?? item.id);
   return rowKey(item, index);
 }
 function getShapeStyle(shape = "rect") {
@@ -65,16 +66,20 @@ function ItemLayer(props) {
     itemGap = 0,
     contentWidth,
     contentHeight,
+    contentOffsetX = 0,
+    contentOffsetY = 0,
     enableHover = true,
     onItemClick,
     onItemHover,
     onItemLeave,
+    getMergedItemWrapperStyle,
     className
   } = props;
   const itemNodes = (0, import_react.useMemo)(() => {
     const isPixel = itemUnit === "pixel";
     const g = itemGap;
-    return items.map((item, index) => {
+    const sorted = [...items].sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
+    return sorted.map((item, index) => {
       let left;
       let top;
       let width;
@@ -108,7 +113,9 @@ function ItemLayer(props) {
             width,
             height,
             boxSizing: "border-box",
-            ...shapeStyle
+            zIndex: item.zIndex ?? 0,
+            ...shapeStyle,
+            ...getMergedItemWrapperStyle == null ? void 0 : getMergedItemWrapperStyle(item, index)
           },
           onClick: (e) => onItemClick == null ? void 0 : onItemClick(item, index, e),
           onMouseEnter: (e) => onItemHover == null ? void 0 : onItemHover(item, index, e),
@@ -127,7 +134,8 @@ function ItemLayer(props) {
     enableHover,
     onItemClick,
     onItemHover,
-    onItemLeave
+    onItemLeave,
+    getMergedItemWrapperStyle
   ]);
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
@@ -143,7 +151,20 @@ function ItemLayer(props) {
         minHeight: contentHeight
       }
     },
-    itemNodes
+    contentOffsetX !== 0 || contentOffsetY !== 0 ? /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: 0,
+          top: 0,
+          width: contentWidth,
+          height: contentHeight,
+          transform: `translate(${contentOffsetX}px, ${contentOffsetY}px)`
+        }
+      },
+      itemNodes
+    ) : itemNodes
   );
 }
 var ItemLayer_default = ItemLayer;

package/lib/components/pisellFloorMapLayout/components/MapLayer.d.ts

@@ -14,6 +14,10 @@ export interface MapLayerProps {
     contentHeight?: number;
     /** 每格像素尺寸（用于网格线间距） */
     cellSize?: number;
+    /** 为 true 时不应用纯色背景，让画布底层网格透出 */
+    preferCanvasGrid?: boolean;
+    /** 为 true 时容器设置 pointer-events: none，空白处点击可透传到下层，供 react-zoom-pan-pinch 画布平移 */
+    pointerEventsNone?: boolean;
     /** 子节点（展示层会叠在上方） */
     children?: React.ReactNode;
     /** 自定义类名 */