@pisell/materials 1.0.1060 → 1.0.1062

package/lib/components/pisellFloorMapLayout/components/FloorMapEditPanel.js

@@ -76,6 +76,7 @@ function FloorMapEditPanel(props) {
     savingRecord,
     dataSourceLabels = {},
     layoutDraftDirty,
+    showDataSourceRecordFormBlock: showRecordFormProp,
     className
   } = props;
   const [form] = import_antd.Form.useForm();
@@ -220,6 +221,7 @@ function FloorMapEditPanel(props) {
   const hasCustomRecordForm = recordFormSlotRaw !== void 0 && recordFormSlotRaw !== null && recordFormSlotRaw !== false;
   const showDataBindingSection = bindingPolicy !== "none";
   const showDataSourceRecordBlock = hasBoundDataRecord && Boolean(binding) && (onSaveRecord != null || hasCustomRecordForm);
+  const showDataRecordEditorSection = showRecordFormProp !== false && showDataSourceRecordBlock && Boolean(binding);
   const recordFormContext = (0, import_react.useMemo)(() => {
     if (!binding) return null;
     return {
@@ -247,185 +249,257 @@ function FloorMapEditPanel(props) {
       layoutTransformLocked: !sceneElement.layoutTransformLocked
     });
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${PREFIX}-edit-panel`, className) }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-header` }, /* @__PURE__ */ import_react.default.createElement("span", null, ep.elementProps), /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Button,
-    {
-      type: "text",
-      size: "small",
-      className: `${PREFIX}-edit-panel-close`,
-      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, null),
-      "aria-label": ep.closeAria,
-      onClick: onClose
-    }
-  )), (formHasUnappliedChanges || layoutDraftDirty) && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-hints`, role: "status" }, formHasUnappliedChanges ? /* @__PURE__ */ import_react.default.createElement("p", { className: `${PREFIX}-edit-panel-hint warn` }, ep.hintApply) : null, layoutDraftDirty ? /* @__PURE__ */ import_react.default.createElement("p", { className: `${PREFIX}-edit-panel-hint muted` }, ep.hintSave) : null), /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Form,
-    {
-      form,
-      layout: "vertical",
-      size: "small",
-      onFinish: handleFinish,
-      initialValues,
-      onValuesChange: () => {
-        if (skipFormValuesChangeRef.current) return;
-        setFormHasUnappliedChanges(true);
+  const panelScrollRef = (0, import_react.useRef)(null);
+  const dragScrollRef = (0, import_react.useRef)({
+    active: false,
+    pointerId: -1,
+    startY: 0,
+    startScrollTop: 0
+  });
+  const isDragScrollSurface = (0, import_react.useCallback)((target) => {
+    if (!(target instanceof Element)) return false;
+    return !target.closest(
+      'input,textarea,button,select,.ant-select,.ant-input,[contenteditable="true"]'
+    );
+  }, []);
+  const handlePanelPointerDown = (0, import_react.useCallback)(
+    (e) => {
+      if (!isDragScrollSurface(e.target)) return;
+      const el = panelScrollRef.current;
+      if (!el || el.scrollHeight <= el.clientHeight) return;
+      el.setPointerCapture(e.pointerId);
+      dragScrollRef.current = {
+        active: true,
+        pointerId: e.pointerId,
+        startY: e.clientY,
+        startScrollTop: el.scrollTop
+      };
+    },
+    [isDragScrollSurface]
+  );
+  const handlePanelPointerMove = (0, import_react.useCallback)(
+    (e) => {
+      const d = dragScrollRef.current;
+      if (!d.active || e.pointerId !== d.pointerId) return;
+      const el = panelScrollRef.current;
+      if (!el) return;
+      el.scrollTop = d.startScrollTop + (d.startY - e.clientY);
+    },
+    []
+  );
+  const endPanelDragScroll = (0, import_react.useCallback)(
+    (e) => {
+      var _a2;
+      const d = dragScrollRef.current;
+      if (!d.active || e.pointerId !== d.pointerId) return;
+      dragScrollRef.current = {
+        active: false,
+        pointerId: -1,
+        startY: 0,
+        startScrollTop: 0
+      };
+      try {
+        (_a2 = panelScrollRef.current) == null ? void 0 : _a2.releasePointerCapture(e.pointerId);
+      } catch {
       }
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-layout-lock-header` }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-edit-panel-layout-lock-title` }, ep.sectionLayout), /* @__PURE__ */ import_react.default.createElement(
+    []
+  );
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: panelScrollRef,
+      className: (0, import_classnames.default)(`${PREFIX}-edit-panel`, className),
+      onPointerDown: handlePanelPointerDown,
+      onPointerMove: handlePanelPointerMove,
+      onPointerUp: endPanelDragScroll,
+      onPointerCancel: endPanelDragScroll
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-header` }, /* @__PURE__ */ import_react.default.createElement("span", null, ep.elementProps), /* @__PURE__ */ import_react.default.createElement(
       import_antd.Button,
       {
         type: "text",
         size: "small",
-        className: `${PREFIX}-edit-panel-layout-lock-btn`,
-        icon: layoutLocked ? /* @__PURE__ */ import_react.default.createElement(import_icons.LockOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.UnlockOutlined, null),
-        "aria-pressed": layoutLocked,
-        onClick: toggleLayoutLock,
-        title: layoutLocked ? ep.lockOn : ep.lockOff
+        className: `${PREFIX}-edit-panel-close`,
+        icon: /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, null),
+        "aria-label": ep.closeAria,
+        onClick: onClose
       }
     )),
-    /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-xy-row` }, /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "x", label: ep.labelX }, /* @__PURE__ */ import_react.default.createElement(
-      import_antd.InputNumber,
-      {
-        style: { width: "100%" },
-        min: 0,
-        disabled: layoutLocked
-      }
-    )), /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "y", label: ep.labelY }, /* @__PURE__ */ import_react.default.createElement(
-      import_antd.InputNumber,
-      {
-        style: { width: "100%" },
-        min: 0,
-        disabled: layoutLocked
-      }
-    )), /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "zIndex", label: ep.labelZ }, /* @__PURE__ */ import_react.default.createElement(import_antd.InputNumber, { style: { width: "100%" }, disabled: layoutLocked }))),
-    /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-size-row` }, /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "width", label: ep.labelWidth }, /* @__PURE__ */ import_react.default.createElement(
-      import_antd.InputNumber,
-      {
-        style: { width: "100%" },
-        min: 20,
-        disabled: layoutLocked
-      }
-    )), /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "height", label: ep.labelHeight }, /* @__PURE__ */ import_react.default.createElement(
-      import_antd.InputNumber,
-      {
-        style: { width: "100%" },
-        min: 20,
-        disabled: layoutLocked
-      }
-    ))),
+    (formHasUnappliedChanges || layoutDraftDirty) && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-hints`, role: "status" }, formHasUnappliedChanges ? /* @__PURE__ */ import_react.default.createElement("p", { className: `${PREFIX}-edit-panel-hint warn` }, ep.hintApply) : null, layoutDraftDirty ? /* @__PURE__ */ import_react.default.createElement("p", { className: `${PREFIX}-edit-panel-hint muted` }, ep.hintSave) : null),
     /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Form.Item,
+      import_antd.Form,
       {
-        name: "name",
-        label: isStageLike ? ep.labelNameStage : ep.labelName
+        form,
+        layout: "vertical",
+        size: "small",
+        onFinish: handleFinish,
+        initialValues,
+        onValuesChange: () => {
+          if (skipFormValuesChangeRef.current) return;
+          setFormHasUnappliedChanges(true);
+        }
       },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-layout-lock-header` }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-edit-panel-layout-lock-title` }, ep.sectionLayout), /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Button,
+        {
+          type: "text",
+          size: "small",
+          className: `${PREFIX}-edit-panel-layout-lock-btn`,
+          icon: layoutLocked ? /* @__PURE__ */ import_react.default.createElement(import_icons.LockOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.UnlockOutlined, null),
+          "aria-pressed": layoutLocked,
+          onClick: toggleLayoutLock,
+          title: layoutLocked ? ep.lockOn : ep.lockOff
+        }
+      )),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-xy-row` }, /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "x", label: ep.labelX }, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.InputNumber,
+        {
+          style: { width: "100%" },
+          min: 0,
+          disabled: layoutLocked
+        }
+      )), /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "y", label: ep.labelY }, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.InputNumber,
+        {
+          style: { width: "100%" },
+          min: 0,
+          disabled: layoutLocked
+        }
+      )), /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "zIndex", label: ep.labelZ }, /* @__PURE__ */ import_react.default.createElement(import_antd.InputNumber, { style: { width: "100%" }, disabled: layoutLocked }))),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-size-row` }, /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "width", label: ep.labelWidth }, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.InputNumber,
+        {
+          style: { width: "100%" },
+          min: 20,
+          disabled: layoutLocked
+        }
+      )), /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "height", label: ep.labelHeight }, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.InputNumber,
+        {
+          style: { width: "100%" },
+          min: 20,
+          disabled: layoutLocked
+        }
+      ))),
       /* @__PURE__ */ import_react.default.createElement(
-        import_antd.Input,
+        import_antd.Form.Item,
+        {
+          name: "name",
+          label: isStageLike ? ep.labelNameStage : ep.labelName
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_antd.Input,
+          {
+            placeholder: isStageLike ? ep.phNameStage : ep.phName,
+            allowClear: true
+          }
+        )
+      ),
+      isImageKind ? /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Form.Item,
+        {
+          name: "imageUrl",
+          label: ep.labelImageUrl,
+          extra: ep.extraImageUrl
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_antd.Input, { allowClear: true, placeholder: ep.phHttps })
+      ) : null,
+      /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "canvasId", label: ep.labelCanvas }, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Select,
         {
-          placeholder: isStageLike ? ep.phNameStage : ep.phName,
-          allowClear: true
+          options: canvasOptions.map((c) => ({
+            value: c.id,
+            label: (0, import_floorMapCanvasDisplay.getFloorMapCanvasDisplayName)(c, engineLocale)
+          })),
+          allowClear: false
         }
-      )
+      )),
+      /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, null, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: "primary", htmlType: "submit", size: "small" }, ep.apply))
     ),
-    isImageKind ? /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Form.Item,
-      {
-        name: "imageUrl",
-        label: ep.labelImageUrl,
-        extra: ep.extraImageUrl
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_antd.Input, { allowClear: true, placeholder: ep.phHttps })
-    ) : null,
-    /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "canvasId", label: ep.labelCanvas }, /* @__PURE__ */ import_react.default.createElement(
+    showDataBindingSection && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-title` }, ep.dataBinding), /* @__PURE__ */ import_react.default.createElement("p", { className: `${PREFIX}-edit-panel-record-draft-note` }, ep.dataBindingNote), allowedKeys.length >= 1 ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-bind` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-bind-label` }, ep.labelDataSource), /* @__PURE__ */ import_react.default.createElement(
       import_antd.Select,
       {
-        options: canvasOptions.map((c) => ({
-          value: c.id,
-          label: (0, import_floorMapCanvasDisplay.getFloorMapCanvasDisplayName)(c, engineLocale)
+        size: "small",
+        style: { width: "100%" },
+        placeholder: ep.phDataSource,
+        value: binding == null ? void 0 : binding.dataSourceKey,
+        options: allowedKeys.map((k) => ({
+          value: k,
+          label: dataSourceLabels[k] ?? k
         })),
-        allowClear: false
+        onChange: (key) => {
+          if (!key && bindingPolicy === "optional") {
+            onUpdate({ dataBinding: void 0 });
+            return;
+          }
+          if (!key) return;
+          onUpdate({
+            dataBinding: {
+              dataSourceKey: key,
+              recordId: (binding == null ? void 0 : binding.dataSourceKey) === key ? binding.recordId : ""
+            }
+          });
+        },
+        allowClear: bindingPolicy === "optional"
       }
-    )),
-    /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, null, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: "primary", htmlType: "submit", size: "small" }, ep.apply))
-  ), showDataBindingSection && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-title` }, ep.dataBinding), /* @__PURE__ */ import_react.default.createElement("p", { className: `${PREFIX}-edit-panel-record-draft-note` }, ep.dataBindingNote), allowedKeys.length >= 1 ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-bind` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-bind-label` }, ep.labelDataSource), /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Select,
-    {
-      size: "small",
-      style: { width: "100%" },
-      placeholder: ep.phDataSource,
-      value: binding == null ? void 0 : binding.dataSourceKey,
-      options: allowedKeys.map((k) => ({
-        value: k,
-        label: dataSourceLabels[k] ?? k
-      })),
-      onChange: (key) => {
-        if (!key && bindingPolicy === "optional") {
-          onUpdate({ dataBinding: void 0 });
-          return;
-        }
-        if (!key) return;
-        onUpdate({
-          dataBinding: {
-            dataSourceKey: key,
-            recordId: (binding == null ? void 0 : binding.dataSourceKey) === key ? binding.recordId : ""
+    )) : null, allowedKeys.length >= 1 && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-bind` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-bind-label` }, ep.labelPickRow), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Select,
+      {
+        size: "small",
+        placeholder: dataRecordBindOptions.length ? ep.phPickRow : ep.phNoRows,
+        style: { width: "100%" },
+        value: hasBoundDataRecord ? binding == null ? void 0 : binding.recordId : void 0,
+        allowClear: bindingPolicy === "optional",
+        options: dataRecordBindOptions,
+        onChange: (newId) => {
+          const key = (binding == null ? void 0 : binding.dataSourceKey) ?? allowedKeys[0];
+          if (!key) return;
+          if (!newId) {
+            onUpdate({ dataBinding: void 0 });
+            return;
           }
-        });
-      },
-      allowClear: bindingPolicy === "optional"
-    }
-  )) : null, allowedKeys.length >= 1 && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-bind` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-bind-label` }, ep.labelPickRow), /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Select,
-    {
-      size: "small",
-      placeholder: dataRecordBindOptions.length ? ep.phPickRow : ep.phNoRows,
-      style: { width: "100%" },
-      value: hasBoundDataRecord ? binding == null ? void 0 : binding.recordId : void 0,
-      allowClear: bindingPolicy === "optional",
-      options: dataRecordBindOptions,
-      onChange: (newId) => {
-        const key = (binding == null ? void 0 : binding.dataSourceKey) ?? allowedKeys[0];
-        if (!key) return;
-        if (!newId) {
-          onUpdate({ dataBinding: void 0 });
-          return;
+          const row = (dataSources[key] ?? []).find(
+            (r) => r.id === newId
+          );
+          onUpdate({
+            dataBinding: {
+              dataSourceKey: key,
+              recordId: newId
+            },
+            name: row ? String(row.name ?? newId) : void 0
+          });
         }
-        const row = (dataSources[key] ?? []).find(
-          (r) => r.id === newId
-        );
-        onUpdate({
-          dataBinding: {
-            dataSourceKey: key,
-            recordId: newId
-          },
-          name: row ? String(row.name ?? newId) : void 0
-        });
       }
-    }
-  ), !hasBoundDataRecord && /* @__PURE__ */ import_react.default.createElement("p", { className: `${PREFIX}-edit-panel-record-bind-hint` }, ep.hintUnbound))), showDataSourceRecordBlock && binding && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-title` }, ep.recordTitle), hasCustomRecordForm && recordFormContext && recordFormSlotRaw != null ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-custom` }, resolveDataSourceRecordForm(
-    recordFormSlotRaw,
-    recordFormContext
-  )) : null, !hasCustomRecordForm && onSaveRecord ? /* @__PURE__ */ import_react.default.createElement(
-    import_FloorMapDataForm.FloorMapDataForm,
-    {
-      dataSourceKey: binding.dataSourceKey,
-      recordId: binding.recordId,
-      record,
-      dataSources,
-      onSave: onSaveRecord,
-      saving: savingRecord,
-      columns: recordFormColumns == null ? void 0 : recordFormColumns[binding.dataSourceKey]
-    }
-  ) : null), config.canvasUi.canEdit && onDelete ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-footer` }, /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Popconfirm,
-    {
-      title: ep.popTitle,
-      description: ep.popDesc,
-      onConfirm: onDelete,
-      okText: ep.btnOkDelete,
-      cancelText: ep.btnCancel,
-      okButtonProps: { danger: true }
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: "default", danger: true, block: true, size: "small" }, ep.btnDelete)
-  )) : null);
+    ), !hasBoundDataRecord && /* @__PURE__ */ import_react.default.createElement("p", { className: `${PREFIX}-edit-panel-record-bind-hint` }, ep.hintUnbound))),
+    showDataRecordEditorSection && binding && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-title` }, ep.recordTitle), hasCustomRecordForm && recordFormContext && recordFormSlotRaw != null ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-custom` }, resolveDataSourceRecordForm(
+      recordFormSlotRaw,
+      recordFormContext
+    )) : null, !hasCustomRecordForm && onSaveRecord ? /* @__PURE__ */ import_react.default.createElement(
+      import_FloorMapDataForm.FloorMapDataForm,
+      {
+        dataSourceKey: binding.dataSourceKey,
+        recordId: binding.recordId,
+        record,
+        dataSources,
+        onSave: onSaveRecord,
+        saving: savingRecord,
+        columns: recordFormColumns == null ? void 0 : recordFormColumns[binding.dataSourceKey]
+      }
+    ) : null),
+    config.canvasUi.canEdit && onDelete ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-footer` }, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Popconfirm,
+      {
+        title: ep.popTitle,
+        description: ep.popDesc,
+        onConfirm: onDelete,
+        okText: ep.btnOkDelete,
+        cancelText: ep.btnCancel,
+        okButtonProps: { danger: true }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: "default", danger: true, block: true, size: "small" }, ep.btnDelete)
+    )) : null
+  );
 }
 var FloorMapEditPanel_default = FloorMapEditPanel;
 // Annotate the CommonJS export names for ESM import in node:

package/lib/components/pisellFloorMapLayout/components/FloorMapEditPanel.less

@@ -7,6 +7,7 @@
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   max-height: 80vh;
   overflow-y: auto;
+  touch-action: pan-y;
 
   &-header {
     display: flex;

package/lib/components/pisellFloorMapLayout/context/mergeFloorMapLayoutContext.js

@@ -37,7 +37,8 @@ function mergeFloorMapLayoutPropsFromContext(props, ctx) {
     saveError: props.saveError ?? ctx.saveError,
     onElementRenderError: props.onElementRenderError ?? ctx.onElementRenderError,
     toolbarShowSave: props.toolbarShowSave ?? ctx.toolbarShowSave,
-    floorMapFullscreenMode: props.floorMapFullscreenMode ?? ctx.floorMapFullscreenMode
+    floorMapFullscreenMode: props.floorMapFullscreenMode ?? ctx.floorMapFullscreenMode,
+    showDataSourceRecordFormBlock: props.showDataSourceRecordFormBlock ?? ctx.showDataSourceRecordFormBlock
   };
 }
 // Annotate the CommonJS export names for ESM import in node:

package/lib/components/pisellFloorMapLayout/hooks/useFloorMapEditState.d.ts

@@ -16,6 +16,7 @@ export interface UseFloorMapEditStateParams<T extends FloorMapItemBase> {
         x: number;
         y: number;
     }>;
+    showDataSourceRecordFormBlock?: boolean;
 }
 export declare function useFloorMapEditState<T extends FloorMapItemBase>(params: UseFloorMapEditStateParams<T>): {
     config: FloorMapViewConfig | null;
@@ -54,6 +55,7 @@ export declare function useFloorMapEditState<T extends FloorMapItemBase>(params:
         dataSourceRecordForm: Record<string, FloorMapDataSourceRecordFormContent> | undefined;
         dataSourceLabels: Record<string, string> | undefined;
         layoutDraftDirty: boolean;
+        showDataSourceRecordFormBlock: boolean | undefined;
     } | null;
     placeOverlayClass: string;
     isLayoutDirty: boolean;

package/lib/components/pisellFloorMapLayout/hooks/useFloorMapEditState.js

@@ -70,7 +70,8 @@ function useFloorMapEditState(params) {
     dataSourceRecordForm,
     dataSourceLabels,
     layoutPrefix,
-    contentOffsetRef
+    contentOffsetRef,
+    showDataSourceRecordFormBlock
   } = params;
   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";
@@ -397,7 +398,8 @@ function useFloorMapEditState(params) {
     recordFormColumns: dataSourceFormColumns,
     dataSourceRecordForm,
     dataSourceLabels,
-    layoutDraftDirty: isLayoutDirty
+    layoutDraftDirty: isLayoutDirty,
+    showDataSourceRecordFormBlock
   } : null;
   return {
     config,

package/lib/components/pisellFloorMapLayout/hooks/useFloorMapTransformMetrics.js

@@ -65,6 +65,7 @@ function useFloorMapTransformMetrics(params) {
     setMapAreaSize({ width: el.clientWidth, height: el.clientHeight });
     return () => ro.disconnect();
   }, []);
+  const autoFitOnMount = zoom.autoFitOnMount === true;
   const zoomConfig = (0, import_react.useMemo)(
     () => ({
       initialScale: zoom.defaultScale ?? 1,
@@ -149,6 +150,10 @@ function useFloorMapTransformMetrics(params) {
     if (initialAlignRef.current.frame !== frameResetKey) {
       initialAlignRef.current = { frame: frameResetKey, done: false };
     }
+    if (autoFitOnMount) {
+      initialAlignRef.current.done = true;
+      return;
+    }
     if (alignPadSingle == null) {
       initialAlignRef.current.done = false;
       return;
@@ -182,7 +187,8 @@ function useFloorMapTransformMetrics(params) {
     initialPositionX,
     initialPositionY,
     zoomConfig.initialScale,
-    transformRef
+    transformRef,
+    autoFitOnMount
   ]);
   (0, import_react.useEffect)(() => {
     const el = containerRef.current;
@@ -218,6 +224,46 @@ function useFloorMapTransformMetrics(params) {
     const y = VIEWPORT_TOP_LEFT_MARGIN - padA * nextScale;
     ctx.setTransform(x, y, nextScale);
   }, [contentWidth, contentHeight, zoom.max, transformRef, alignPadSingle]);
+  const autoFitOnceRef = (0, import_react.useRef)({
+    frame: "",
+    done: false
+  });
+  (0, import_react.useEffect)(() => {
+    if (!isFloorMapView || !autoFitOnMount || frameResetKey === void 0)
+      return;
+    const frame = String(frameResetKey);
+    if (autoFitOnceRef.current.frame !== frame) {
+      autoFitOnceRef.current = { frame, done: false };
+    }
+    if (autoFitOnceRef.current.done) return;
+    if (contentWidth <= 0 || contentHeight <= 0) return;
+    let cancelled = false;
+    let raf = 0;
+    const tick = () => {
+      if (cancelled) return;
+      const ctx = transformRef.current;
+      const container = containerRef.current;
+      if (!ctx || !(container == null ? void 0 : container.querySelector(".react-transform-wrapper"))) {
+        raf = requestAnimationFrame(tick);
+        return;
+      }
+      fitBounds();
+      autoFitOnceRef.current.done = true;
+    };
+    raf = requestAnimationFrame(tick);
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(raf);
+    };
+  }, [
+    isFloorMapView,
+    autoFitOnMount,
+    frameResetKey,
+    contentWidth,
+    contentHeight,
+    fitBounds,
+    transformRef
+  ]);
   const lastTransformRef = (0, import_react.useRef)({ x: 0, y: 0, scale: 1 });
   const [isInteractingWithElement, setIsInteractingWithElement] = (0, import_react.useState)(false);
   const prevInteractingRef = (0, import_react.useRef)(false);

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

@@ -81,6 +81,11 @@ export interface FloorMapZoomConfig {
     max?: number;
     /** 缩放步进，默认 0.1 (10%) */
     step?: number;
+    /**
+     * 为 true 时：挂载后每个画布（frameResetKey）自动执行一次 fitBounds，使图元落在视口内。
+     * 为 true 时跳过「首帧 defaultScale 左上对齐」，避免与 fit 闪动叠加。
+     */
+    autoFitOnMount?: boolean;
 }
 /**
  * 平移配置
@@ -377,6 +382,11 @@ export interface FloorMapEditPanelParams {
      * 用于提示用户点击顶部「保存」持久化布局草稿。
      */
     layoutDraftDirty?: boolean;
+    /**
+     * 为 false 时不渲染「数据绑定」下方的数据源记录编辑表单（FloorMapDataForm / 自定义 record 表单）；
+     * 数据绑定选数据源与选行仍可展示。
+     */
+    showDataSourceRecordFormBlock?: boolean;
 }
 /**
  * 合并当前画布的 sceneElements 为 items（用于 Layout 渲染）
@@ -400,7 +410,7 @@ export declare type FloorMapFullscreenMode = 'toggle' | 'locked' | 'disabled';
  * 平面图 Layout 注入上下文：数据、保存、侧栏表单与状态等（不包含 renderItem/mapLayer 等展示向 props）。
  * 由 `FloorMapLayoutProvider` / RecordBoard `floorMapLayoutContext` 提供，与 `PisellFloorMapLayout` props 按 `??` 合并，props 优先。
  */
-export declare type FloorMapLayoutContextValue = Partial<Pick<PisellFloorMapLayoutProps<FloorMapItemBase>, 'floorMapConfig' | 'dataSources' | 'onSave' | 'onDataSourceRecordSave' | 'dataSourceLabels' | 'dataSourceFormColumns' | 'dataSourceRecordForm' | 'loading' | 'saveError' | 'onElementRenderError' | 'toolbarShowSave' | 'floorMapFullscreenMode'>>;
+export declare type FloorMapLayoutContextValue = Partial<Pick<PisellFloorMapLayoutProps<FloorMapItemBase>, 'floorMapConfig' | 'dataSources' | 'onSave' | 'onDataSourceRecordSave' | 'dataSourceLabels' | 'dataSourceFormColumns' | 'dataSourceRecordForm' | 'loading' | 'saveError' | 'onElementRenderError' | 'toolbarShowSave' | 'floorMapFullscreenMode' | 'showDataSourceRecordFormBlock'>>;
 /**
  * PisellFloorMapLayout 组件 Props
  * @template T - 资源项类型，需继承 FloorMapItemBase 或兼容 id/x/y
@@ -527,6 +537,10 @@ export interface PisellFloorMapLayoutProps<T extends FloorMapItemBase = FloorMap
      * 是否在左侧工具栏底部显示「保存」（默认 true；非全屏时顶栏为 Tab+全屏，保存多在侧栏；全屏时保存仅在顶栏）
      */
     toolbarShowSave?: boolean;
+    /**
+     * 为 false 时隐藏侧栏「数据源记录」表单区（保留数据绑定选源/选行）。
+     */
+    showDataSourceRecordFormBlock?: boolean;
 }
 /**
  * PisellFloorMapLayout Ref 方法
@@ -541,4 +555,6 @@ export interface PisellFloorMapLayoutRef {
     reset: () => void;
     /** 区域定位：使所有 items 落在视口内 */
     fitBounds: () => void;
+    /** 提交当前布局草稿（与顶栏/侧栏「保存」一致） */
+    saveLayout: () => void;
 }