@arronqzy/react-view 1.0.12 → 1.0.14

package/src/panel/utils/gridPlacement.ts

@@ -187,3 +187,32 @@ export function computeSnapPatchForNewElementOnLayer(
     height: nearest.height,
   };
 }
+
+function isGridAncestorOf(
+  ancestorId: string,
+  el: PanelElement,
+  byId: Map<string, PanelElement>
+): boolean {
+  let current: PanelElement | undefined = el;
+  const seen = new Set<string>();
+  while (current?.parentGridId && !seen.has(current.id)) {
+    if (current.parentGridId === ancestorId) return true;
+    seen.add(current.id);
+    current = byId.get(current.parentGridId);
+  }
+  return false;
+}
+
+/** 父网格先于格子内子节点绘制，避免网格占位层盖住内容 */
+export function comparePanelElementsPaintOrder(
+  a: PanelElement,
+  b: PanelElement,
+  byId: Map<string, PanelElement>
+): number {
+  if (isGridAncestorOf(a.id, b, byId)) return -1;
+  if (isGridAncestorOf(b.id, a, byId)) return 1;
+  const za = a.zIndex ?? 1;
+  const zb = b.zIndex ?? 1;
+  if (za !== zb) return za - zb;
+  return a.id.localeCompare(b.id);
+}

package/src/panel/utils/outputScale.ts

@@ -0,0 +1,69 @@
+/** 产物预览是否缩放内部内容（字体等）。默认 false：块仍按视口撑满，内容保持原尺寸以免失真。 */
+export const OUTPUT_SCALE_STORAGE_KEY = "panel:outputScale";
+
+export function readOutputScale(): boolean {
+  try {
+    return localStorage.getItem(OUTPUT_SCALE_STORAGE_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+
+export function writeOutputScale(enabled: boolean) {
+  try {
+    localStorage.setItem(OUTPUT_SCALE_STORAGE_KEY, enabled ? "1" : "0");
+  } catch {
+    // ignore storage errors
+  }
+}
+
+export type PreviewFillScale = {
+  vw: number;
+  vh: number;
+  scaleX: number;
+  scaleY: number;
+};
+
+export function getPreviewFillScale(
+  sceneWidth: number,
+  sceneHeight: number
+): PreviewFillScale {
+  const vw = window.innerWidth || 1;
+  const vh = window.innerHeight || 1;
+  const sw = Math.max(1, sceneWidth);
+  const sh = Math.max(1, sceneHeight);
+  return {
+    vw,
+    vh,
+    scaleX: vw / sw,
+    scaleY: vh / sh,
+  };
+}
+
+/**
+ * 预览始终按视口宽高比把场景块撑满。
+ * outputScale=true：CSS transform 缩放整棵内容（含字体）。
+ * outputScale=false：只把场景盒拉到视口大小，节点几何由调用方按 scale 映射，字体不跟着拉伸。
+ */
+export function applyPreviewSceneFill(
+  scene: HTMLElement | null,
+  sceneWidth: number,
+  sceneHeight: number,
+  outputScale: boolean
+): PreviewFillScale {
+  const fill = getPreviewFillScale(sceneWidth, sceneHeight);
+  if (!Number.isFinite(fill.scaleX) || !Number.isFinite(fill.scaleY)) return fill;
+  if (!scene) return fill;
+  const root = scene.parentElement;
+  if (root) root.style.overflow = "hidden";
+  if (outputScale) {
+    scene.style.width = `${Math.max(1, sceneWidth)}px`;
+    scene.style.height = `${Math.max(1, sceneHeight)}px`;
+    scene.style.transform = `translate(0px,0px) scale(${fill.scaleX},${fill.scaleY})`;
+  } else {
+    scene.style.width = `${fill.vw}px`;
+    scene.style.height = `${fill.vh}px`;
+    scene.style.transform = "none";
+  }
+  return fill;
+}

package/src/panel/utils/panelElementDefaults.ts

@@ -1,6 +1,7 @@
 import type { TranslateFn } from "@arronqzy/i18n";
 import { tForLocale } from "@arronqzy/i18n";
-import type { PanelChartConfig, PanelLayer } from "../types";
+import { createDefaultScene3dConfig } from "@arronqzy/view-scene3d";
+import type { PanelChartConfig, PanelLayer, PanelElement } from "../types";
 import { createDefaultTableConfig, type PanelTableConfig } from "@arronqzy/view-table";
 
 const tFallback = tForLocale("zh-CN");
@@ -21,6 +22,7 @@ const DEFAULT_NODE_NAME_KEYS: Record<string, string> = {
   audio: "panel.defaults.audio",
   reference: "panel.defaults.reference",
   geometry: "panel.defaults.geometry",
+  scene3d: "panel.defaults.scene3d",
   table: "panel.defaults.table",
 };
 
@@ -80,6 +82,8 @@ export function getDefaultSizeByMaterial(materialType: string) {
       return { width: 280, height: 180 };
     case "geometry":
       return { width: 220, height: 220 };
+    case "scene3d":
+      return { width: 480, height: 320 };
     case "table":
       return { width: 480, height: 280 };
     default:
@@ -87,6 +91,33 @@ export function getDefaultSizeByMaterial(materialType: string) {
   }
 }
 
+export function cssTextLineHeight(
+  value: number | "auto" | undefined
+): string | undefined {
+  if (value === "auto") return "normal";
+  if (typeof value === "number" && Number.isFinite(value) && value > 0) {
+    return String(value);
+  }
+  return undefined;
+}
+
+export function cssTextAlignStyle(align: PanelElement["textAlign"]): {
+  textAlign: "left" | "center" | "right" | "justify";
+  display?: "flex";
+  flexDirection?: "column";
+  justifyContent?: "center";
+} {
+  if (align === "middle") {
+    return {
+      textAlign: "center",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+    };
+  }
+  return { textAlign: align ?? "left" };
+}
+
 export function getDefaultTextContent(materialType: string, t: TranslateFn = tFallback) {
   if (materialType !== "text") return {};
   return {
@@ -126,7 +157,6 @@ export function getDefaultChartConfig(
     return {
       title: t("panel.defaults.bar"),
       ...common,
-      barWidth: 24,
     };
   }
   if (materialType === "line") {
@@ -189,3 +219,8 @@ export function getDefaultTableConfig(
   if (cfg.columns?.[2]) cfg.columns[2].title = t("panel.config.tableColScore");
   return cfg;
 }
+
+export function getDefaultScene3dConfigForMaterial(materialType: string) {
+  if (materialType !== "scene3d") return {};
+  return { scene3d: createDefaultScene3dConfig() };
+}

package/src/panel/utils/scope-autocomplete.ts

@@ -1,114 +0,0 @@
-export type ScopeAutocompleteState = {
-  templateStart: number;
-  cursor: number;
-  path: string[];
-  partialKey: string;
-};
-
-function getValueAtPath(scope: unknown, path: string[]): unknown {
-  let current: unknown = scope;
-  for (const part of path) {
-    if (current === null || typeof current !== "object") return undefined;
-    current = (current as Record<string, unknown>)[part];
-  }
-  return current;
-}
-
-function listObjectKeys(value: unknown): string[] {
-  if (value === null || typeof value !== "object" || Array.isArray(value)) {
-    return [];
-  }
-  return Object.keys(value as Record<string, unknown>);
-}
-
-/** 解析光标处未闭合的 scope 模版表达式 */
-export function parseScopeAutocomplete(
-  text: string,
-  cursor: number,
-  scope: unknown
-): ScopeAutocompleteState | null {
-  const before = text.slice(0, cursor);
-  const templateStart = before.lastIndexOf("{");
-  if (templateStart < 0) return null;
-
-  const inner = before.slice(templateStart + 1);
-  if (inner.includes("}")) return null;
-  if (!inner.startsWith("scope")) return null;
-
-  let body = inner.slice("scope".length);
-  if (body === "" || body === "?") {
-    return { templateStart, cursor, path: [], partialKey: "" };
-  }
-  if (!body.startsWith("?.")) return null;
-
-  body = body.slice(2);
-  if (body === "") {
-    return { templateStart, cursor, path: [], partialKey: "" };
-  }
-
-  const segments = body.split("?.");
-  const endsWithSeparator = inner.endsWith("?.");
-
-  if (endsWithSeparator) {
-    const path = segments.filter((segment) => segment.length > 0);
-    return { templateStart, cursor, path, partialKey: "" };
-  }
-
-  const lastSegment = segments[segments.length - 1] ?? "";
-  const prefixSegments = segments.slice(0, -1).filter((segment) => segment.length > 0);
-  const parent = getValueAtPath(scope, prefixSegments);
-  const keys = listObjectKeys(parent);
-
-  if (lastSegment.length === 0) {
-    return { templateStart, cursor, path: prefixSegments, partialKey: "" };
-  }
-
-  if (keys.includes(lastSegment)) {
-    return {
-      templateStart,
-      cursor,
-      path: [...prefixSegments, lastSegment],
-      partialKey: "",
-    };
-  }
-
-  return {
-    templateStart,
-    cursor,
-    path: prefixSegments,
-    partialKey: lastSegment,
-  };
-}
-
-export function getScopeAutocompleteSuggestions(
-  scope: unknown,
-  state: ScopeAutocompleteState
-): string[] {
-  const parent =
-    state.partialKey.length > 0
-      ? getValueAtPath(scope, state.path)
-      : state.path.length > 0
-        ? getValueAtPath(scope, state.path)
-        : scope;
-
-  const keys = listObjectKeys(parent);
-  if (state.partialKey.length === 0) return keys;
-  return keys.filter((key) => key.startsWith(state.partialKey));
-}
-
-export function buildScopeExpression(path: string[], selectedKey: string): string {
-  return `scope?.${[...path, selectedKey].join("?.")}`;
-}
-
-export function applyScopeAutocompleteSelection(
-  text: string,
-  state: ScopeAutocompleteState,
-  selectedKey: string
-): { value: string; cursor: number } {
-  const expr = buildScopeExpression(state.path, selectedKey);
-  const before = text.slice(0, state.templateStart + 1);
-  const after = text.slice(state.cursor);
-  const value = `${before}${expr}${after}`;
-  const cursor = before.length + expr.length;
-  return { value, cursor };
-}