@pisell/materials 1.0.1059 → 1.0.1062

package/lib/components/pisellFloorMapLayout/components/MapLayer.js

@@ -47,6 +47,8 @@ function MapLayer(props) {
     contentWidth = 0,
     contentHeight = 0,
     cellSize = 64,
+    preferCanvasGrid = false,
+    pointerEventsNone = false,
     children,
     className
   } = props;
@@ -62,7 +64,9 @@ function MapLayer(props) {
   const paddingCss = toCssSize(padding);
   const gapCss = toCssSize(gap);
   const backgroundStyle = {};
-  if (backgroundType === "color" && backgroundColor) {
+  if (preferCanvasGrid) {
+    backgroundStyle.backgroundColor = "transparent";
+  } else if (backgroundType === "color" && backgroundColor) {
     backgroundStyle.backgroundColor = backgroundColor;
   }
   if (backgroundType === "image" && backgroundImage) {
@@ -78,7 +82,8 @@ function MapLayer(props) {
   }
   const containerStyle = {
     padding: paddingCss,
-    gap: gapCss
+    gap: gapCss,
+    ...pointerEventsNone ? { pointerEvents: "none" } : {}
   };
   const gridStyle = showGrid ? {
     backgroundImage: `

package/lib/components/pisellFloorMapLayout/components/ViewControls.less

@@ -1,9 +1,10 @@
-/* Figma 14131:6265：缩放在左下角；Figma 14004:1149 Stepper 样式 */
+/* Figma 14131:6265：缩放在左下角；Figma 14004:1149 Stepper 样式；z-index 保证在画布之上可点击 */
 .pisell-floor-map-layout-view-controls {
   position: absolute;
   left: 12px;
   bottom: 12px;
-  z-index: 10;
+  z-index: 20;
+  pointer-events: auto;
   display: flex;
   flex-direction: column;
   gap: 6px;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { FloorMapControlsConfig } from '../types';
+export interface ViewControlsWithZoomProps {
+    config?: FloorMapControlsConfig;
+    scale?: number;
+    isFullscreen?: boolean;
+    fitBounds: () => void;
+    /** 未传时不展示全屏按钮（如编辑态 floorMapFullscreenMode 为 disabled） */
+    toggleFullscreen?: () => void;
+}
+export declare function ViewControlsWithZoom(props: ViewControlsWithZoomProps): JSX.Element;

package/lib/components/pisellFloorMapLayout/components/ViewControlsWithZoom.js

@@ -0,0 +1,63 @@
+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/ViewControlsWithZoom.tsx
+var ViewControlsWithZoom_exports = {};
+__export(ViewControlsWithZoom_exports, {
+  ViewControlsWithZoom: () => ViewControlsWithZoom
+});
+module.exports = __toCommonJS(ViewControlsWithZoom_exports);
+var import_react = __toESM(require("react"));
+var import_react_zoom_pan_pinch = require("react-zoom-pan-pinch");
+var import_ViewControls = __toESM(require("./ViewControls"));
+function ViewControlsWithZoom(props) {
+  const { zoomIn, zoomOut, resetTransform } = (0, import_react_zoom_pan_pinch.useControls)();
+  const api = (0, import_react.useMemo)(
+    () => ({
+      zoomIn,
+      zoomOut,
+      resetTransform,
+      fitBounds: props.fitBounds,
+      toggleFullscreen: props.toggleFullscreen
+    }),
+    [zoomIn, zoomOut, resetTransform, props.fitBounds, props.toggleFullscreen]
+  );
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_ViewControls.default,
+    {
+      api,
+      config: props.config,
+      scale: props.scale,
+      isFullscreen: props.isFullscreen
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ViewControlsWithZoom
+});

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

@@ -4,4 +4,18 @@
 export { MapLayer } from './MapLayer';
 export { ItemLayer } from './ItemLayer';
 export { ViewControls } from './ViewControls';
+export { ViewControlsWithZoom } from './ViewControlsWithZoom';
+export { CanvasTabs } from './CanvasTabs';
+export { EditableItemLayer } from './EditableItemLayer';
+export { FloorMapToolbar } from './FloorMapToolbar';
+export { FloorMapEditTopBar } from './FloorMapEditTopBar';
+export { FloorMapEditPanel } from './FloorMapEditPanel';
+export { FloorMapDataForm } from './FloorMapDataForm';
 export type { ViewControlsApi } from './ViewControls';
+export type { ViewControlsWithZoomProps } from './ViewControlsWithZoom';
+export type { CanvasTabsProps } from './CanvasTabs';
+export type { EditableItemLayerProps } from './EditableItemLayer';
+export type { FloorMapToolbarProps, PlaceMode } from './FloorMapToolbar';
+export type { FloorMapEditTopBarProps, FloorMapEditTopBarMode, } from './FloorMapEditTopBar';
+export type { FloorMapEditPanelProps } from './FloorMapEditPanel';
+export type { FloorMapDataFormProps } from './FloorMapDataForm';

package/lib/components/pisellFloorMapLayout/components/index.js

@@ -19,17 +19,38 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/pisellFloorMapLayout/components/index.tsx
 var components_exports = {};
 __export(components_exports, {
+  CanvasTabs: () => import_CanvasTabs.CanvasTabs,
+  EditableItemLayer: () => import_EditableItemLayer.EditableItemLayer,
+  FloorMapDataForm: () => import_FloorMapDataForm.FloorMapDataForm,
+  FloorMapEditPanel: () => import_FloorMapEditPanel.FloorMapEditPanel,
+  FloorMapEditTopBar: () => import_FloorMapEditTopBar.FloorMapEditTopBar,
+  FloorMapToolbar: () => import_FloorMapToolbar.FloorMapToolbar,
   ItemLayer: () => import_ItemLayer.ItemLayer,
   MapLayer: () => import_MapLayer.MapLayer,
-  ViewControls: () => import_ViewControls.ViewControls
+  ViewControls: () => import_ViewControls.ViewControls,
+  ViewControlsWithZoom: () => import_ViewControlsWithZoom.ViewControlsWithZoom
 });
 module.exports = __toCommonJS(components_exports);
 var import_MapLayer = require("./MapLayer");
 var import_ItemLayer = require("./ItemLayer");
 var import_ViewControls = require("./ViewControls");
+var import_ViewControlsWithZoom = require("./ViewControlsWithZoom");
+var import_CanvasTabs = require("./CanvasTabs");
+var import_EditableItemLayer = require("./EditableItemLayer");
+var import_FloorMapToolbar = require("./FloorMapToolbar");
+var import_FloorMapEditTopBar = require("./FloorMapEditTopBar");
+var import_FloorMapEditPanel = require("./FloorMapEditPanel");
+var import_FloorMapDataForm = require("./FloorMapDataForm");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CanvasTabs,
+  EditableItemLayer,
+  FloorMapDataForm,
+  FloorMapEditPanel,
+  FloorMapEditTopBar,
+  FloorMapToolbar,
   ItemLayer,
   MapLayer,
-  ViewControls
+  ViewControls,
+  ViewControlsWithZoom
 });

package/lib/components/pisellFloorMapLayout/context/FloorMapLayoutContext.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 平面图数据/保存等注入上下文；单独页面包 `FloorMapLayoutProvider`，RecordBoard 由 Shell 内置 Provider。
+ */
+import React from 'react';
+import type { FloorMapLayoutContextValue } from '../types';
+/**
+ * 未传 `floorMapLayoutContext` 时 Shell 使用该稳定引用，避免无意义变更引用。
+ */
+export declare const EMPTY_FLOOR_MAP_LAYOUT_CONTEXT: FloorMapLayoutContextValue;
+export declare function useFloorMapLayoutContext(): FloorMapLayoutContextValue | undefined;
+export interface FloorMapLayoutProviderProps {
+    value: FloorMapLayoutContextValue;
+    children: React.ReactNode;
+}
+/** 注入 `FloorMapLayoutContextValue`；`value` 建议由调用方 `useMemo` 稳定化 */
+export declare function FloorMapLayoutProvider({ value, children, }: FloorMapLayoutProviderProps): JSX.Element;

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

@@ -0,0 +1,54 @@
+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/context/FloorMapLayoutContext.tsx
+var FloorMapLayoutContext_exports = {};
+__export(FloorMapLayoutContext_exports, {
+  EMPTY_FLOOR_MAP_LAYOUT_CONTEXT: () => EMPTY_FLOOR_MAP_LAYOUT_CONTEXT,
+  FloorMapLayoutProvider: () => FloorMapLayoutProvider,
+  useFloorMapLayoutContext: () => useFloorMapLayoutContext
+});
+module.exports = __toCommonJS(FloorMapLayoutContext_exports);
+var import_react = __toESM(require("react"));
+var FloorMapLayoutContext = (0, import_react.createContext)(void 0);
+var EMPTY_FLOOR_MAP_LAYOUT_CONTEXT = {};
+function useFloorMapLayoutContext() {
+  return (0, import_react.useContext)(FloorMapLayoutContext);
+}
+function FloorMapLayoutProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ import_react.default.createElement(FloorMapLayoutContext.Provider, { value }, children);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EMPTY_FLOOR_MAP_LAYOUT_CONTEXT,
+  FloorMapLayoutProvider,
+  useFloorMapLayoutContext
+});

package/lib/components/pisellFloorMapLayout/context/mergeFloorMapLayoutContext.d.ts

@@ -0,0 +1,5 @@
+import type { FloorMapItemBase, FloorMapLayoutContextValue, PisellFloorMapLayoutProps } from '../types';
+/**
+ * 将 `FloorMapLayoutContext` 与 Layout props 合并：各字段 props ?? ctx，props 显式值优先。
+ */
+export declare function mergeFloorMapLayoutPropsFromContext<T extends FloorMapItemBase>(props: PisellFloorMapLayoutProps<T>, ctx: FloorMapLayoutContextValue | undefined): PisellFloorMapLayoutProps<T>;

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

@@ -0,0 +1,47 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellFloorMapLayout/context/mergeFloorMapLayoutContext.ts
+var mergeFloorMapLayoutContext_exports = {};
+__export(mergeFloorMapLayoutContext_exports, {
+  mergeFloorMapLayoutPropsFromContext: () => mergeFloorMapLayoutPropsFromContext
+});
+module.exports = __toCommonJS(mergeFloorMapLayoutContext_exports);
+function mergeFloorMapLayoutPropsFromContext(props, ctx) {
+  if (ctx == null) return props;
+  return {
+    ...props,
+    floorMapConfig: props.floorMapConfig ?? ctx.floorMapConfig,
+    dataSources: props.dataSources ?? ctx.dataSources,
+    onSave: props.onSave ?? ctx.onSave,
+    onDataSourceRecordSave: props.onDataSourceRecordSave ?? ctx.onDataSourceRecordSave,
+    dataSourceLabels: props.dataSourceLabels ?? ctx.dataSourceLabels,
+    dataSourceFormColumns: props.dataSourceFormColumns ?? ctx.dataSourceFormColumns,
+    dataSourceRecordForm: props.dataSourceRecordForm ?? ctx.dataSourceRecordForm,
+    loading: props.loading ?? ctx.loading,
+    saveError: props.saveError ?? ctx.saveError,
+    onElementRenderError: props.onElementRenderError ?? ctx.onElementRenderError,
+    toolbarShowSave: props.toolbarShowSave ?? ctx.toolbarShowSave,
+    floorMapFullscreenMode: props.floorMapFullscreenMode ?? ctx.floorMapFullscreenMode,
+    showDataSourceRecordFormBlock: props.showDataSourceRecordFormBlock ?? ctx.showDataSourceRecordFormBlock
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  mergeFloorMapLayoutPropsFromContext
+});

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

@@ -0,0 +1,62 @@
+import type { MouseEvent, MutableRefObject } from 'react';
+import type { DataSourceFormColumn, FloorMapCanvasNameI18n, FloorMapDataSourceRecordFormContent, FloorMapDataSources, FloorMapItemBase, FloorMapMergedItem, FloorMapPlaceMode, FloorMapSceneElement, FloorMapViewConfig } from '../types';
+export interface UseFloorMapEditStateParams<T extends FloorMapItemBase> {
+    floorMapConfigProp: FloorMapViewConfig | undefined;
+    isFloorMapView: boolean;
+    itemsProp: T[];
+    cellSizeProp?: number;
+    dataSources: FloorMapDataSources | undefined;
+    onSave: ((config: FloorMapViewConfig) => void) | undefined;
+    onDataSourceRecordSave: ((dataSourceKey: string, id: string, newData: Record<string, unknown>) => void) | undefined;
+    dataSourceFormColumns: Record<string, DataSourceFormColumn[]> | undefined;
+    dataSourceRecordForm: Record<string, FloorMapDataSourceRecordFormContent> | undefined;
+    dataSourceLabels?: Record<string, string>;
+    layoutPrefix: string;
+    contentOffsetRef: MutableRefObject<{
+        x: number;
+        y: number;
+    }>;
+    showDataSourceRecordFormBlock?: boolean;
+}
+export declare function useFloorMapEditState<T extends FloorMapItemBase>(params: UseFloorMapEditStateParams<T>): {
+    config: FloorMapViewConfig | null;
+    currentCanvasId: string | null;
+    setCurrentCanvasId: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    selectedId: string | null;
+    setSelectedId: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    placeMode: FloorMapPlaceMode;
+    setPlaceMode: import("react").Dispatch<import("react").SetStateAction<FloorMapPlaceMode>>;
+    mergedItems: FloorMapMergedItem[];
+    items: T[];
+    saving: boolean;
+    savingRecord: boolean;
+    handleAddCanvas: () => void;
+    handleRemoveCanvas: (canvasId: string) => void;
+    handleRenameCanvas: (canvasId: string, name: string | FloorMapCanvasNameI18n) => void;
+    handleUpdateItem: (itemId: string, patch: Partial<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }>) => void;
+    handleCanvasPlaceClick: (e: MouseEvent<HTMLDivElement>) => void;
+    handleSave: () => void;
+    placeSceneElementFromPaletteDrop: (contentX: number, contentY: number, scene: Extract<FloorMapPlaceMode, {
+        type: 'scene';
+    }>) => void;
+    editPanelParams: {
+        itemId: string;
+        sceneElement: FloorMapSceneElement;
+        onUpdate: (patch: Partial<FloorMapSceneElement>) => void;
+        onSaveRecord: ((dataSourceKey: string, id: string, newData: Record<string, unknown>) => void) | undefined;
+        onClose: () => void;
+        onDelete: (() => void) | undefined;
+        recordFormColumns: Record<string, DataSourceFormColumn[]> | undefined;
+        dataSourceRecordForm: Record<string, FloorMapDataSourceRecordFormContent> | undefined;
+        dataSourceLabels: Record<string, string> | undefined;
+        layoutDraftDirty: boolean;
+        showDataSourceRecordFormBlock: boolean | undefined;
+    } | null;
+    placeOverlayClass: string;
+    isLayoutDirty: boolean;
+};