@pisell/materials 6.11.48 → 6.11.50

package/es/components/pisellFloorMapLayout/hooks/useFloorMapTransformMetrics.d.ts

@@ -0,0 +1,89 @@
+import type { MutableRefObject } from 'react';
+import type { FloorMapItemBase, FloorMapItemUnit, FloorMapZoomConfig } from '../types';
+/** react-zoom-pan-pinch TransformWrapper render 注入的上下文 */
+export declare type FloorMapTransformContext = {
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetTransform: () => void;
+    /**
+     * react-zoom-pan-pinch v3 实际签名：(x, y, scale, animationTime?, animationType?)
+     * 默认 animationTime≈200ms；传 0 立即落点，避免被前一次动画吃掉或与之冲突
+     * （restore / 缓存恢复路径应使用 0 立即覆盖已在缓动中的 fit 动画）。
+     * 这里只暴露我们用到的前 4 参；库 animationType 是 `keyof typeof animations` 联合，
+     * 暴露过来反而限制传入对象的兼容性，我们也确实不传它。
+     */
+    setTransform: (x: number, y: number, scale: number, animationTime?: number) => void;
+} | null;
+export interface UseFloorMapTransformMetricsParams<T extends FloorMapItemBase> {
+    items: T[];
+    cellSize: number;
+    itemGap: number;
+    effectiveItemUnit: FloorMapItemUnit;
+    isFloorMapView: boolean;
+    mode: 'read' | 'edit';
+    zoom: FloorMapZoomConfig;
+    transformRef: MutableRefObject<FloorMapTransformContext>;
+    /** 由父组件创建并传入 useFloorMapEditState，本 hook 每帧写入内容区偏移 */
+    contentOffsetRef: MutableRefObject<{
+        x: number;
+        y: number;
+    }>;
+    /** 与 mapLayer.boundingPadding 一致；未传用 DEFAULT_BOUNDING_PADDING */
+    boundingPadding?: number;
+    /**
+     * 平面图：当前画布 id（或其它在切换画布时应重置平移/对齐会话的 key）。
+     * 不传则不跑「异步加载图元后的首次左上对齐」逻辑。
+     */
+    frameResetKey?: string;
+    /**
+     * 视口持久化标识（通常拼自 canvasId）。传入后：
+     *   - 切换 / 挂载时若 localStorage 中有缓存，自动恢复 transform 并跳过本帧 autoFit；
+     *   - 用户拖动 / 缩放时（节流 300ms）写回缓存；
+     *   - 主动 fitBounds / 进入伪全屏后由 fitBounds 触发的写入也会同步保存。
+     * 不传则完全不读不写 localStorage。
+     */
+    viewportPersistKey?: string;
+}
+export declare function useFloorMapTransformMetrics<T extends FloorMapItemBase>(params: UseFloorMapTransformMetricsParams<T>): {
+    containerRef: import("react").RefObject<HTMLDivElement>;
+    mapAreaRef: import("react").RefObject<HTMLDivElement>;
+    viewportSize: {
+        width: number;
+        height: number;
+    };
+    mapAreaSize: {
+        width: number;
+        height: number;
+    };
+    contentWidth: number;
+    contentHeight: number;
+    contentOffsetX: number;
+    contentOffsetY: number;
+    initialPositionX: number;
+    initialPositionY: number;
+    zoomConfig: {
+        initialScale: number;
+        minScale: number;
+        maxScale: number;
+        step: number;
+    };
+    scale: number;
+    setScale: import("react").Dispatch<import("react").SetStateAction<number>>;
+    isFullscreen: boolean;
+    toggleFullscreen: () => void;
+    fitBounds: () => boolean;
+    isAtFitBounds: boolean;
+    notifyTransformed: (x: number, y: number, nextScale: number) => void;
+    persistCurrentViewport: () => void;
+    attachTransformContext: (ctx: NonNullable<FloorMapTransformContext>) => void;
+    lastTransformRef: MutableRefObject<{
+        x: number;
+        y: number;
+        scale: number;
+    }>;
+    isInteractingWithElement: boolean;
+    setIsInteractingWithElement: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    viewportLocked: boolean;
+    setViewportLocked: (next: boolean) => void;
+    toggleViewportLocked: () => void;
+};

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

@@ -17,6 +17,12 @@ import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } fr
 import { getContentSize, getPixelBoundingBox } from "../utils/layoutMeasurements";
 import { DEFAULT_BOUNDING_PADDING, FIT_BOUNDS_MATCH_POS_EPSILON, FIT_BOUNDS_MATCH_SCALE_EPSILON, VIEWPORT_PERSIST_DEBOUNCE_MS, VIEWPORT_TOP_LEFT_MARGIN, readPersistedViewport, readPersistedViewportLock, writePersistedViewport, writePersistedViewportLock } from "./floorMapViewportPersistence";
 
+/**
+ * react-zoom-pan-pinch：`setTransform` 未显式传 `animationTime` 时默认约 200ms 缓动；
+ * 兜底清除「全览激活保持」略大于该值，避免极少数帧未到容差时限位不解除。
+ */
+var FIT_BOUNDS_PROGRAMMATIC_TWEEN_GUARD_MS = 400;
+
 /** react-zoom-pan-pinch TransformWrapper render 注入的上下文 */
 
 export function useFloorMapTransformMetrics(params) {
@@ -116,6 +122,20 @@ export function useFloorMapTransformMetrics(params) {
     isAtFitBounds = _useState10[0],
     setIsAtFitBounds = _useState10[1];
 
+  /**
+   * 程序化 fitBounds 使用库默认缓动时，`onTransformed` 中间帧与快照不等会关掉「全览」激活态。
+   * 缓动持有期内不按中间帧降级，仅在到达快照（容差内）或兜底超时后再按真实 transform 对齐。
+   */
+  var fitBoundsTweenHoldRef = useRef(false);
+  var fitBoundsTweenHoldClearTimerRef = useRef(null);
+  var clearFitBoundsTweenHold = useCallback(function () {
+    if (fitBoundsTweenHoldClearTimerRef.current != null) {
+      clearTimeout(fitBoundsTweenHoldClearTimerRef.current);
+      fitBoundsTweenHoldClearTimerRef.current = null;
+    }
+    fitBoundsTweenHoldRef.current = false;
+  }, []);
+
   /**
    * 视口锁定态：按 viewportPersistKey 维度持久化到 localStorage。
    * - 切 / 挂载时按 key 读初始值；
@@ -302,7 +322,37 @@ export function useFloorMapTransformMetrics(params) {
     var wrapper = container.querySelector('.react-transform-wrapper');
     if (!wrapper) return false;
     var wrapperRect = wrapper.getBoundingClientRect();
-    if (wrapperRect.width <= 0 || wrapperRect.height <= 0) return false;
+    var wEl = wrapper;
+    /**
+     * 祖先链上若有 transform: scale / zoom，getBoundingClientRect 为「视觉」尺寸，
+     * clientWidth/Height 为布局盒尺寸。react-zoom-pan-pinch 的平移/缩放工作在布局坐标系，
+     * 若全览仅用 rect 算 avail 与 position，会与库内部不一致（日志：visual/layout≈0.864）。
+     */
+    var layoutW = wEl.clientWidth > 0 ? wEl.clientWidth : wrapperRect.width;
+    var layoutH = wEl.clientHeight > 0 ? wEl.clientHeight : wrapperRect.height;
+    if (layoutW <= 0 || layoutH <= 0) return false;
+
+    /** 程序化 setTransform 默认带缓动：写入快照后立即保持「全览激活」，缓动结束前不因中间帧关掉 */
+    var applyProgrammaticFit = function applyProgrammaticFit(fx, fy, fScale) {
+      clearFitBoundsTweenHold();
+      lastFitSnapshotRef.current = {
+        x: fx,
+        y: fy,
+        scale: fScale
+      };
+      setIsAtFitBounds(true);
+      fitBoundsTweenHoldRef.current = true;
+      fitBoundsTweenHoldClearTimerRef.current = setTimeout(function () {
+        fitBoundsTweenHoldClearTimerRef.current = null;
+        fitBoundsTweenHoldRef.current = false;
+        var cur = lastTransformRef.current;
+        var s = lastFitSnapshotRef.current;
+        if (!s) return;
+        var same = Math.abs(s.x - cur.x) < FIT_BOUNDS_MATCH_POS_EPSILON && Math.abs(s.y - cur.y) < FIT_BOUNDS_MATCH_POS_EPSILON && Math.abs(s.scale - cur.scale) < FIT_BOUNDS_MATCH_SCALE_EPSILON;
+        setIsAtFitBounds(same);
+      }, FIT_BOUNDS_PROGRAMMATIC_TWEEN_GUARD_MS);
+      ctx.setTransform(fx, fy, fScale);
+    };
 
     /**
      * 平面图像素模式：按「图元轴对齐包围盒」缩放并居中，不按整块 content（含编辑态撑满视口的空白）适配。
@@ -314,40 +364,28 @@ export function useFloorMapTransformMetrics(params) {
       var bw = Math.max(1, pixelBox.maxRight - pixelBox.minLeft);
       var bh = Math.max(1, pixelBox.maxBottom - pixelBox.minTop);
       var edgePx = 0;
-      var availW = Math.max(1, wrapperRect.width - 2 * edgePx);
-      var availH = Math.max(1, wrapperRect.height - 2 * edgePx);
+      var availW = Math.max(1, layoutW - 2 * edgePx);
+      var availH = Math.max(1, layoutH - 2 * edgePx);
       var _raw = Math.min(availW / bw, availH / bh);
       var _nextScale = Math.min(_raw, (_zoom$max2 = zoom.max) !== null && _zoom$max2 !== void 0 ? _zoom$max2 : 2);
       var ap = alignPadSingle !== null && alignPadSingle !== void 0 ? alignPadSingle : padSingle;
       var bboxCx = ap + bw / 2;
       var bboxCy = ap + bh / 2;
-      var _x = wrapperRect.width / 2 - bboxCx * _nextScale;
-      var _y = wrapperRect.height / 2 - bboxCy * _nextScale;
-      ctx.setTransform(_x, _y, _nextScale);
-      lastFitSnapshotRef.current = {
-        x: _x,
-        y: _y,
-        scale: _nextScale
-      };
-      setIsAtFitBounds(true);
+      var _x = layoutW / 2 - bboxCx * _nextScale;
+      var _y = layoutH / 2 - bboxCy * _nextScale;
+      applyProgrammaticFit(_x, _y, _nextScale);
       return true;
     }
     if (contentWidth <= 0 || contentHeight <= 0) return false;
     /** 非平面图或无图元：仍按整块 content 适配 */
-    var raw = Math.min(wrapperRect.width / contentWidth, wrapperRect.height / contentHeight);
+    var raw = Math.min(layoutW / contentWidth, layoutH / contentHeight);
     var nextScale = Math.min(raw, (_zoom$max3 = zoom.max) !== null && _zoom$max3 !== void 0 ? _zoom$max3 : 2);
     var padA = alignPadSingle !== null && alignPadSingle !== void 0 ? alignPadSingle : 0;
     var x = VIEWPORT_TOP_LEFT_MARGIN - padA * nextScale;
     var y = VIEWPORT_TOP_LEFT_MARGIN - padA * nextScale;
-    ctx.setTransform(x, y, nextScale);
-    lastFitSnapshotRef.current = {
-      x: x,
-      y: y,
-      scale: nextScale
-    };
-    setIsAtFitBounds(true);
+    applyProgrammaticFit(x, y, nextScale);
     return true;
-  }, [contentWidth, contentHeight, zoom.max, transformRef, alignPadSingle, isFloorMapView, effectiveItemUnit, items, cellSize, padSingle]);
+  }, [clearFitBoundsTweenHold, contentWidth, contentHeight, zoom, transformRef, alignPadSingle, isFloorMapView, effectiveItemUnit, items, cellSize, padSingle]);
 
   /** 让"进入伪全屏后自动 fit"的 effect 能拿到最新的 fitBounds 实现 */
   fitBoundsRef.current = fitBounds;
@@ -528,6 +566,14 @@ export function useFloorMapTransformMetrics(params) {
     var snap = lastFitSnapshotRef.current;
     if (snap) {
       var same = Math.abs(snap.x - x) < FIT_BOUNDS_MATCH_POS_EPSILON && Math.abs(snap.y - y) < FIT_BOUNDS_MATCH_POS_EPSILON && Math.abs(snap.scale - nextScale) < FIT_BOUNDS_MATCH_SCALE_EPSILON;
+      if (fitBoundsTweenHoldRef.current) {
+        if (same) {
+          clearFitBoundsTweenHold();
+          setIsAtFitBounds(true);
+        }
+        /** 缓动中间帧：保持已设的「全览激活」，不因尚未对齐快照而关掉 */
+        return;
+      }
       setIsAtFitBounds(function (prev) {
         return prev === same ? prev : same;
       });
@@ -536,7 +582,7 @@ export function useFloorMapTransformMetrics(params) {
         return prev ? false : prev;
       });
     }
-  }, []);
+  }, [clearFitBoundsTweenHold]);
 
   /**
    * 用户交互结束时（pan / zoom / pinch / wheel stop）调用：
@@ -572,6 +618,7 @@ export function useFloorMapTransformMetrics(params) {
    *    防止后续 effect 反向覆盖缓存值。
    */
   var applyPersistedViewport = useCallback(function (cached) {
+    clearFitBoundsTweenHold();
     var ctx = transformRef.current;
     if (!ctx) return false;
     ctx.setTransform(cached.x, cached.y, cached.scale, 0);
@@ -585,7 +632,7 @@ export function useFloorMapTransformMetrics(params) {
       cachedRestoredFrameRef.current = String(currentFrame);
     }
     return true;
-  }, [transformRef]);
+  }, [clearFitBoundsTweenHold, transformRef]);
 
   /**
    * 切换 viewportPersistKey 或 frameResetKey 时（含挂载、wrapper 重挂载）：
@@ -683,6 +730,10 @@ export function useFloorMapTransformMetrics(params) {
       }
       (_flushPersistRef$curr = flushPersistRef.current) === null || _flushPersistRef$curr === void 0 || _flushPersistRef$curr.call(flushPersistRef);
       flushPersistRef.current = null;
+      if (fitBoundsTweenHoldClearTimerRef.current != null) {
+        clearTimeout(fitBoundsTweenHoldClearTimerRef.current);
+        fitBoundsTweenHoldClearTimerRef.current = null;
+      }
     };
   }, [viewportPersistKey]);
   return {

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

@@ -0,0 +1,26 @@
+/**
+ * PisellFloorMapLayout 组件入口
+ * 空间布局视图：在二维平面按坐标渲染资源，支持缩放/平移/复位；支持 floorMapConfig + mode 平面图视图
+ */
+export { PisellFloorMapLayout } from './PisellFloorMapLayout';
+export type { PisellFloorMapLayoutProps, PisellFloorMapLayoutRef, FloorMapItemBase, FloorMapItemUnit, FloorMapLayerConfig, FloorMapZoomConfig, FloorMapPanConfig, FloorMapControlsConfig, FloorMapItemShape, FloorMapBackgroundType, FloorMapPanBoundary, FloorMapLayoutMode, FloorMapGridLayoutConfig, FloorMapCanvas, FloorMapCanvasNameI18n, FloorMapElement, FloorMapData, FloorMapViewConfig, FloorMapCanvasUiConfig, FloorMapSceneElement, FloorMapSceneElementDataBinding, FloorMapPlaceMode, FloorMapElementKindCategory, FloorMapElementDataBindingPolicy, FloorMapElementDefaultPresentation, FloorMapEdge, FloorMapElementKindConfig, FloorMapElementType, FloorMapTextSlot, FloorMapDataSources, FloorMapRenderOptions, FloorMapEditPanelParams, DataSourceFormColumn, FloorMapMergedItem, FloorMapRecordFormRenderContext, FloorMapDataSourceRecordFormContent, FloorMapFullscreenMode, FloorMapLayoutContextValue, FloorMapViewportOverlayRenderArgs, } from './types';
+export { FLOOR_MAP_STAGE_ELEMENT_KIND, FLOOR_MAP_IMAGE_ELEMENT_KIND, } from './types';
+export { renderFloorMapFallbackPlaceholder } from './utils/floorMapFallbackRender';
+export { isFloorMapImageElementKind } from './utils/floorMapElementKindUtils';
+export { NAME_AS_TITLE_EXT_KEY, isElementNameAsTitleEnabled, buildNameAsTitleExtensionsPatch, resolveSceneElementDisplayTitle, } from './utils/floorMapElementNameAsTitle';
+export { findFloorMapRowByDataBinding, getFloorMapBindingPlaceholderReason, } from './utils/floorMapDataBindingUtils';
+export type { FloorMapDataSourceRow, FloorMapBindingPlaceholderReason, } from './utils/floorMapDataBindingUtils';
+export { createShopFloorPlanClient, SHOP_FLOOR_PLAN_DUPLICATE_CODE, } from './shopFloorPlan/shopFloorPlanClient';
+export type { ShopFloorPlanDetail, ShopFloorPlanLayoutItem, PostShopFloorPlanBody, PutShopFloorPlanBody, ShopFloorPlanByCodeRequestOptions, ShopFloorPlanHttpAdapter, CreateShopFloorPlanClientOptions, EnsureShopFloorPlanByCodeOptions, } from './shopFloorPlan/shopFloorPlanTypes';
+export type { UseShopFloorPlanSubscriptionParams } from './hooks/useShopFloorPlanSubscription';
+export { pickFloorPlanDetail, parseLayoutFieldToViewConfigPatch, mergeFloorPlanViewRemote, floorMapSavedConfigToRemotePatch, viewConfigToLayoutPayload, inferCanvasSizeFromScene, buildFloorPlanPutBody, isShopFloorPlanNotFoundResponse, isHttpNotFoundError, isFloorPlanDuplicateCodeError, } from './shopFloorPlan/shopFloorPlanPure';
+export { sceneElementsToShopLayout, shopLayoutToSceneElements, } from './shopFloorPlan/shopFloorPlanMapping';
+export { useShopFloorPlanSubscription } from './hooks/useShopFloorPlanSubscription';
+export { wrapFloorMapOnSaveWithRemotePersist, } from './utils/floorMapRemotePersist';
+export type { WrapFloorMapOnSaveWithRemotePersistParams } from './utils/floorMapRemotePersist';
+export { FloorMapLayoutProvider, useFloorMapLayoutContext, EMPTY_FLOOR_MAP_LAYOUT_CONTEXT, } from './context/FloorMapLayoutContext';
+export type { FloorMapLayoutProviderProps } from './context/FloorMapLayoutContext';
+export { mergeFloorMapLayoutPropsFromContext } from './context/mergeFloorMapLayoutContext';
+export { FloorMapImageElement } from './components/FloorMapImageElement';
+export { getFigmaTableCardFromMerged, renderFigmaStyleTableCard, renderFigmaStyleRoundTableCard, getRenderItemByKindTable, getRenderItemByKindRoundTable, } from './components/FigmaTableCard';
+export type { FigmaTableCardItem, FigmaTableStatus, } from './components/FigmaTableCard';