@arronqzy/react-view 1.0.19 → 1.0.21

package/src/panel/library/preview-snapshot.ts

@@ -5,6 +5,7 @@ import {
   resolvePreviewLayerElements,
 } from "../utils/panelStateIO";
 import {
+  capturePreviewLayerSnapshot,
   capturePreviewSceneElement,
   scaleDataUrl,
   type CapturePreviewSceneOptions,
@@ -223,16 +224,29 @@ export async function getPreviewSnapshot(
 export async function captureEditorPreviewSnapshot(
   options: BuildEditorPreviewSnapshotSceneOptions & GetPreviewSnapshotOptions
 ): Promise<string | null> {
-  const built = await buildEditorPreviewSnapshotScene(options);
-  if (!built) return null;
-  try {
-    return await capturePreviewSceneElement(
-      built.scene,
-      built.width,
-      built.height,
-      options
-    );
-  } finally {
-    disposePreviewSnapshotScene(built.scene);
+  const retryCount = options.retryCount ?? 0;
+  const layerElements = resolvePreviewLayerElements(
+    options.allElements,
+    options.layers,
+    options.activeLayerId
+  );
+  if (!layerElements.length) return null;
+
+  const mountedCount = layerElements.filter((el) =>
+    Boolean(options.canvasRoot?.querySelector(`[data-element-id="${el.id}"]`))
+  ).length;
+  if (mountedCount < layerElements.length && retryCount < 20) {
+    await new Promise((resolve) => window.setTimeout(resolve, 80));
+    return captureEditorPreviewSnapshot({ ...options, retryCount: retryCount + 1 });
   }
+
+  return capturePreviewLayerSnapshot({
+    canvasRoot: options.canvasRoot,
+    elements: layerElements,
+    backgroundColor: options.backgroundColor,
+    maxWidth: options.maxWidth,
+    maxHeight: options.maxHeight,
+    mimeType: options.mimeType,
+    quality: options.quality,
+  });
 }

package/src/panel/types.ts

@@ -54,6 +54,8 @@ export type PanelElementStyle = {
 
 export type ReferenceCopyMode = "shallow" | "deep";
 
+export type ViewportOverflowMode = "scroll-x" | "scroll-y" | "scroll" | "clip";
+
 import type { PanelTableConfig } from "@arronqzy/view-table";
 import type { Scene3dConfig } from "@arronqzy/view-scene3d";
 
@@ -83,6 +85,8 @@ export type PanelElement = {
   gridPadding?: number;
   gridSnapThreshold?: number;
   parentGridId?: string;
+  /** 视窗节点：只显示自身尺寸内的引用图层内容，超出部分滚动或裁剪 */
+  viewportOverflow?: ViewportOverflowMode;
   gridSlotIndex?: number;
   gridColSpan?: number;
   gridRowSpan?: number;

package/src/panel/utils/panelElementDefaults.ts

@@ -17,6 +17,7 @@ const DEFAULT_NODE_NAME_KEYS: Record<string, string> = {
   funnel: "panel.defaults.funnel",
   text: "panel.defaults.text",
   grid: "panel.defaults.grid",
+  viewport: "panel.defaults.viewport",
   image: "panel.defaults.image",
   video: "panel.defaults.video",
   audio: "panel.defaults.audio",
@@ -70,6 +71,8 @@ export function getDefaultSizeByMaterial(materialType: string) {
       return { width: 180, height: 120 };
     case "grid":
       return { width: 320, height: 220 };
+    case "viewport":
+      return { width: 360, height: 240 };
     case "image":
       return { width: 220, height: 140 };
     case "video":
@@ -141,6 +144,13 @@ export function getDefaultGridConfig(materialType: string) {
   } as const;
 }
 
+export function getDefaultViewportConfig(materialType: string) {
+  if (materialType !== "viewport") return {};
+  return {
+    viewportOverflow: "clip" as const,
+  };
+}
+
 export function getDefaultChartConfig(
   materialType: string,
   t: TranslateFn = tFallback

package/src/panel/utils/panelElementNodes.ts

@@ -26,9 +26,11 @@ export function buildDeepReferenceSnapshot(
   const layerNodes = allElements.filter((el) => el.layerId === layerId);
   return layerNodes.map((el) => {
     const cloned = clonePanelElement(el);
-    if (cloned.materialType === "reference" && cloned.refLayerId) {
-      cloned.refCopyMode = "deep";
-      cloned.refSnapshot = buildDeepReferenceSnapshot(allElements, cloned.refLayerId, nextVisited);
+    if (cloned.materialType === "reference" || cloned.materialType === "viewport") {
+      if (cloned.refLayerId) {
+        cloned.refCopyMode = "deep";
+        cloned.refSnapshot = buildDeepReferenceSnapshot(allElements, cloned.refLayerId, nextVisited);
+      }
     }
     return cloned;
   });

package/src/panel/utils/viewportPlacement.ts

@@ -0,0 +1,73 @@
+export const VIEWPORT_OVERFLOW_MODES = [
+  "scroll-x",
+  "scroll-y",
+  "scroll",
+  "clip",
+] as const;
+
+export type ViewportOverflowMode = (typeof VIEWPORT_OVERFLOW_MODES)[number];
+
+export const DEFAULT_VIEWPORT_OVERFLOW: ViewportOverflowMode = "clip";
+
+export function isViewportOverflowMode(
+  value: unknown
+): value is ViewportOverflowMode {
+  return (
+    value === "scroll-x" ||
+    value === "scroll-y" ||
+    value === "scroll" ||
+    value === "clip"
+  );
+}
+
+export function normalizeViewportOverflow(
+  value: unknown
+): ViewportOverflowMode {
+  return isViewportOverflowMode(value) ? value : DEFAULT_VIEWPORT_OVERFLOW;
+}
+
+export function viewportOverflowStyle(mode: ViewportOverflowMode): {
+  overflowX: "hidden" | "auto";
+  overflowY: "hidden" | "auto";
+} {
+  switch (mode) {
+    case "scroll-x":
+      return { overflowX: "auto", overflowY: "hidden" };
+    case "scroll-y":
+      return { overflowX: "hidden", overflowY: "auto" };
+    case "scroll":
+      return { overflowX: "auto", overflowY: "auto" };
+    default:
+      return { overflowX: "hidden", overflowY: "hidden" };
+  }
+}
+
+export function isViewportNode(
+  el: { materialType?: string } | undefined
+): boolean {
+  return el?.materialType === "viewport";
+}
+
+/** 引用节点与视窗节点都通过选择图层来预览内容 */
+export function isLayerPreviewNode(
+  el: { materialType?: string } | undefined
+): boolean {
+  return el?.materialType === "reference" || el?.materialType === "viewport";
+}
+
+/**
+ * 视窗按自身宽高开窗；预览里节点会被整体拉满视口，
+ * 内部引用内容必须用同一套缩放，滚动比例才和编辑态一致。
+ */
+export function viewportWindowContentScale(
+  current: { id: string; width: number; height: number },
+  originals: ReadonlyArray<{ id: string; width: number; height: number }>
+): { scaleX: number; scaleY: number } {
+  const original = originals.find((n) => n.id === current.id);
+  const ow = Math.max(1, original?.width ?? current.width);
+  const oh = Math.max(1, original?.height ?? current.height);
+  return {
+    scaleX: Math.max(1, current.width) / ow,
+    scaleY: Math.max(1, current.height) / oh,
+  };
+}