@arronqzy/react-view 1.0.20 → 1.0.22

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/outputScale.ts

@@ -1,17 +1,22 @@
 /** 产物预览是否缩放内部内容（字体等）。默认 false：块仍按视口撑满，内容保持原尺寸以免失真。 */
+import { appStorageKey } from "@arronqzy/blueprint-dsl";
+
 export const OUTPUT_SCALE_STORAGE_KEY = "panel:outputScale";
 
-export function readOutputScale(): boolean {
+export function readOutputScale(nameSpace?: string | null): boolean {
   try {
-    return localStorage.getItem(OUTPUT_SCALE_STORAGE_KEY) === "1";
+    return localStorage.getItem(appStorageKey(OUTPUT_SCALE_STORAGE_KEY, nameSpace)) === "1";
   } catch {
     return false;
   }
 }
 
-export function writeOutputScale(enabled: boolean) {
+export function writeOutputScale(enabled: boolean, nameSpace?: string | null) {
   try {
-    localStorage.setItem(OUTPUT_SCALE_STORAGE_KEY, enabled ? "1" : "0");
+    localStorage.setItem(
+      appStorageKey(OUTPUT_SCALE_STORAGE_KEY, nameSpace),
+      enabled ? "1" : "0"
+    );
   } catch {
     // ignore storage errors
   }

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/panelStateIO.ts

@@ -26,6 +26,24 @@ export function normalizeImportedPanelState(state: unknown): State | null {
   return next;
 }
 
+export function createEmptyPanelState(): State {
+  return {
+    root: {
+      id: "root",
+      type: "root",
+      props: {},
+      children: [],
+    },
+    selectedIds: [],
+    variables: {
+      counter: 0,
+      isOpen: false,
+      layers: [DEFAULT_LAYER],
+      activeLayerId: DEFAULT_LAYER_ID,
+    },
+  };
+}
+
 export function parseAllPanelElements(state: State): PanelElement[] {
   return (state.root.children ?? [])
     .filter((node) => {

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,
+  };
+}