@arronqzy/react-view 0.0.1

package/src/panel/utils/panelElementDefaults.ts

@@ -0,0 +1,161 @@
+import type { PanelChartConfig, PanelLayer } from "../types";
+
+const DEFAULT_NODE_NAME_MAP: Record<string, string> = {
+  bar: "柱状图",
+  line: "折线图",
+  pie: "饼图",
+  area: "面积图",
+  scatter: "散点图",
+  radar: "雷达图",
+  gauge: "仪表盘",
+  funnel: "漏斗图",
+  text: "文本",
+  grid: "网格布局",
+  image: "图片",
+  video: "视频",
+  audio: "音频",
+  reference: "引用组件",
+  geometry: "几何",
+};
+
+export const DEFAULT_LAYER_ID = "layer-1";
+
+export function getDefaultNodeName(materialType: string): string {
+  return DEFAULT_NODE_NAME_MAP[materialType] ?? materialType;
+}
+
+export const DEFAULT_LAYER: PanelLayer = {
+  id: DEFAULT_LAYER_ID,
+  name: "图层1",
+  locked: false,
+  editable: false,
+  isPrimary: true,
+  isMapping: false,
+  mappingBaseLayerId: undefined,
+};
+
+export function normalizePrimaryLayer(layers: PanelLayer[]): PanelLayer[] {
+  if (layers.length === 0) return [DEFAULT_LAYER];
+  const explicitPrimary = layers.find((layer) => layer.isPrimary);
+  const primaryId = explicitPrimary?.id ?? layers[0].id;
+  return layers.map((layer) => {
+    if (layer.id === primaryId) return { ...layer, isPrimary: true };
+    return { ...layer, isPrimary: false };
+  });
+}
+
+export function randomId(prefix: string) {
+  return `${prefix}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+export function getDefaultSizeByMaterial(materialType: string) {
+  switch (materialType) {
+    case "text":
+      return { width: 180, height: 56 };
+    case "rect":
+      return { width: 180, height: 120 };
+    case "grid":
+      return { width: 320, height: 220 };
+    case "image":
+      return { width: 220, height: 140 };
+    case "video":
+      return { width: 260, height: 150 };
+    case "audio":
+      return { width: 260, height: 90 };
+    case "gauge":
+      return { width: 260, height: 180 };
+    case "reference":
+      return { width: 280, height: 180 };
+    case "geometry":
+      return { width: 220, height: 220 };
+    default:
+      return { width: 220, height: 130 };
+  }
+}
+
+export function getDefaultTextContent(materialType: string) {
+  if (materialType !== "text") return {};
+  return {
+    textHtml: "<p>双击输入文本</p>",
+    textAllowInput: true,
+    textFontSize: 14,
+    textFontWeight: "400",
+    textLineHeight: 1.6,
+    textAlign: "left",
+  } as const;
+}
+
+export function getDefaultGridConfig(materialType: string) {
+  if (materialType !== "grid") return {};
+  return {
+    gridRows: 2,
+    gridCols: 3,
+    gridGap: 8,
+    gridPadding: 10,
+    gridSnapThreshold: 36,
+  } as const;
+}
+
+export function getDefaultChartConfig(materialType: string): PanelChartConfig | undefined {
+  if (!["bar", "line", "pie", "area", "scatter", "radar", "gauge", "funnel"].includes(materialType))
+    return undefined;
+  const common = {
+    color: "#3b82f6",
+    renderMode: "canvas" as const,
+    labels: ["A", "B", "C", "D"],
+    values: [12, 18, 9, 24],
+  };
+  if (materialType === "bar") {
+    return {
+      title: "柱状图",
+      ...common,
+      barWidth: 24,
+    };
+  }
+  if (materialType === "line") {
+    return {
+      title: "折线图",
+      ...common,
+      smooth: true,
+    };
+  }
+  if (materialType === "area") {
+    return {
+      title: "面积图",
+      ...common,
+      smooth: true,
+    };
+  }
+  if (materialType === "scatter") {
+    return {
+      title: "散点图",
+      ...common,
+    };
+  }
+  if (materialType === "radar") {
+    return {
+      title: "雷达图",
+      ...common,
+    };
+  }
+  if (materialType === "gauge") {
+    return {
+      title: "仪表盘",
+      color: "#3b82f6",
+      renderMode: "canvas",
+      values: [68],
+    };
+  }
+  if (materialType === "funnel") {
+    return {
+      title: "漏斗图",
+      ...common,
+    };
+  }
+  return {
+    title: "饼图",
+    ...common,
+    pieInnerRadius: 30,
+    pieOuterRadius: 65,
+  };
+}

package/src/panel/utils/panelElementNodes.ts

@@ -0,0 +1,35 @@
+import type { Node } from "../../../../rx-store/src/types";
+import type { PanelElement } from "../types";
+
+export function isPanelElementNode(node: Node): boolean {
+  const props = node.props as Partial<PanelElement> | undefined;
+  return !!props && typeof props.id === "string" && typeof props.layerId === "string";
+}
+
+export function clonePanelElement(el: PanelElement): PanelElement {
+  return {
+    ...el,
+    chart: el.chart ? { ...el.chart, option: el.chart.option ? { ...el.chart.option } : undefined } : undefined,
+    style: el.style ? { ...el.style } : undefined,
+    refSnapshot: el.refSnapshot ? el.refSnapshot.map(clonePanelElement) : undefined,
+  };
+}
+
+export function buildDeepReferenceSnapshot(
+  allElements: PanelElement[],
+  layerId: string,
+  visitedLayers = new Set<string>()
+): PanelElement[] {
+  if (visitedLayers.has(layerId)) return [];
+  const nextVisited = new Set(visitedLayers);
+  nextVisited.add(layerId);
+  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);
+    }
+    return cloned;
+  });
+}

package/src/panel/utils/panelStateIO.ts

@@ -0,0 +1,124 @@
+import type { State } from "../../../../rx-store/src/types";
+import type { PanelElement, PanelLayer } from "../types";
+import {
+  DEFAULT_LAYER,
+  DEFAULT_LAYER_ID,
+  normalizePrimaryLayer,
+} from "./panelElementDefaults";
+
+export function normalizeImportedPanelState(state: unknown): State | null {
+  if (!state || typeof state !== "object") return null;
+  const raw = state as State;
+  if (!raw.root || typeof raw.root !== "object") return null;
+  if (!raw.root.id || !raw.root.type) return null;
+
+  const next = JSON.parse(JSON.stringify(raw)) as State;
+  next.root.children = Array.isArray(next.root.children) ? next.root.children : [];
+  next.variables = next.variables ?? {};
+  if (!Array.isArray(next.variables.layers)) {
+    next.variables.layers = [DEFAULT_LAYER];
+  }
+  next.variables.layers = normalizePrimaryLayer(next.variables.layers as PanelLayer[]);
+  if (typeof next.variables.activeLayerId !== "string") {
+    next.variables.activeLayerId =
+      (next.variables.layers[0] as PanelLayer | undefined)?.id ?? DEFAULT_LAYER_ID;
+  }
+  return next;
+}
+
+export function parseAllPanelElements(state: State): PanelElement[] {
+  return (state.root.children ?? [])
+    .filter((node) => {
+      const props = node.props as Partial<PanelElement> | undefined;
+      if (!props || typeof props.layerId !== "string") return false;
+      const id = props.id ?? node.id;
+      return typeof id === "string" && id.length > 0;
+    })
+    .map((node) => {
+      const props = node.props as PanelElement;
+      return {
+        ...props,
+        id: props.id ?? node.id,
+        zIndex: typeof props.zIndex === "number" ? props.zIndex : 1,
+      };
+    });
+}
+
+export function parsePanelLayers(state: State): PanelLayer[] {
+  const raw = (state.variables?.layers as PanelLayer[] | undefined) ?? [DEFAULT_LAYER];
+  return normalizePrimaryLayer(raw);
+}
+
+export function getActiveLayerId(state: State): string {
+  return (state.variables?.activeLayerId as string | undefined) ?? DEFAULT_LAYER_ID;
+}
+
+export function resolvePreviewLayerElements(
+  allElements: PanelElement[],
+  layers: PanelLayer[],
+  activeLayerId: string
+): PanelElement[] {
+  const primary = layers.find((layer) => layer.isPrimary) ?? layers[0];
+  if (primary) {
+    const onPrimary = allElements.filter((el) => el.layerId === primary.id);
+    if (onPrimary.length > 0) return onPrimary;
+  }
+  const onActive = allElements.filter((el) => el.layerId === activeLayerId);
+  if (onActive.length > 0) return onActive;
+  const mappingLayerIds = new Set(
+    layers.filter((layer) => layer.isMapping).map((layer) => layer.id)
+  );
+  const nonMapping = allElements.filter((el) => !mappingLayerIds.has(el.layerId));
+  return nonMapping.length > 0 ? nonMapping : allElements;
+}
+
+export type PanelSceneBounds = {
+  minX: number;
+  minY: number;
+  width: number;
+  height: number;
+};
+
+export function computePanelSceneBounds(elements: PanelElement[]): PanelSceneBounds {
+  if (!elements.length) {
+    return { minX: 0, minY: 0, width: 1, height: 1 };
+  }
+
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+
+  for (const el of elements) {
+    const w = Math.max(1, el.width);
+    const h = Math.max(1, el.height);
+    const rad = ((el.rotate ?? 0) * Math.PI) / 180;
+    const absCos = Math.abs(Math.cos(rad));
+    const absSin = Math.abs(Math.sin(rad));
+    const bw = w * absCos + h * absSin;
+    const bh = w * absSin + h * absCos;
+    const cx = el.x + w / 2;
+    const cy = el.y + h / 2;
+    const left = cx - bw / 2;
+    const top = cy - bh / 2;
+    const right = cx + bw / 2;
+    const bottom = cy + bh / 2;
+    minX = Math.min(minX, left);
+    minY = Math.min(minY, top);
+    maxX = Math.max(maxX, right);
+    maxY = Math.max(maxY, bottom);
+  }
+
+  return {
+    minX,
+    minY,
+    width: Math.max(1, maxX - minX),
+    height: Math.max(1, maxY - minY),
+  };
+}
+
+export const PREVIEW_LAYOUT_EVENT = "arronqzy-preview-layout";
+
+export function notifyPreviewLayoutChanged() {
+  window.dispatchEvent(new Event(PREVIEW_LAYOUT_EVENT));
+}

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

@@ -0,0 +1,114 @@
+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 };
+}

package/src/panel/utils/scope-field-labels.ts

@@ -0,0 +1,45 @@
+const LABELS: Record<string, string> = {
+  name: "节点名称",
+  textHtml: "文本内容",
+  textFontFamily: "文本字体",
+  textFontWeight: "文本字重",
+  textColor: "文本颜色",
+  "chart.title": "图表标题",
+  "chart.color": "图表颜色",
+  "chart.gradientFrom": "渐变起始色",
+  "chart.gradientTo": "渐变结束色",
+  "chart.xAxisName": "X 轴名称",
+  "chart.yAxisName": "Y 轴名称",
+  "chart.xAxisTickColor": "X 轴刻度颜色",
+  "chart.yAxisTickColor": "Y 轴刻度颜色",
+  "chart.xAxisSplitLineColor": "X 轴分割线颜色",
+  "chart.yAxisSplitLineColor": "Y 轴分割线颜色",
+  "chart.xAxisLabelColor": "X 轴标签颜色",
+  "chart.yAxisLabelColor": "Y 轴标签颜色",
+  "chart.tooltipBackgroundColor": "Tooltip 背景色",
+  "chart.tooltipTextColor": "Tooltip 文字色",
+  "chart.tooltipFormatter": "Tooltip 格式化",
+  "chart.valuesText": "图表数值",
+  "style.backgroundColor": "背景色",
+  "style.backgroundImage": "背景图",
+  "style.backgroundImageRemoteUrl": "背景图远程地址",
+  "style.backgroundSize": "背景尺寸",
+  "style.backgroundPosition": "背景位置",
+  "style.borderColor": "边框颜色",
+  audioSrc: "音频地址",
+  audioRemoteUrl: "音频远程地址",
+  videoSrc: "视频地址",
+  videoRemoteUrl: "视频远程地址",
+  geometryColor: "几何颜色",
+  geometryScript: "几何脚本",
+};
+
+export function resolveScopeFieldLabel(fieldId: string): string {
+  if (LABELS[fieldId]) return LABELS[fieldId];
+  const leaf = fieldId.split(".").pop() ?? fieldId;
+  return LABELS[fieldId] ?? leaf;
+}
+
+export function scopeFieldDomId(fieldId: string): string {
+  return `scope-field-${fieldId.replace(/\./g, "--")}`;
+}

package/src/panel/utils/scope-template-warnings.ts

@@ -0,0 +1,135 @@
+import type { PanelElement } from "../types";
+import { hasScopeTemplate } from "./scope-template";
+import { resolveScopeFieldLabel } from "./scope-field-labels";
+
+export type ScopeTemplateWarning = {
+  fieldId: string;
+  fieldLabel: string;
+  template: string;
+  expression: string;
+  missingPath: string;
+  message: string;
+};
+
+const SCOPE_PATH_RE = /scope(?:\?\.|\.)(\w+(?:\?\.\w+)*)/g;
+
+const SKIP_FIELD_PREFIXES = new Set(["refSnapshot", "geometrySketchDataUrl"]);
+
+function extractScopePropertyPaths(expression: string): string[] {
+  const paths = new Set<string>();
+  let match: RegExpExecArray | null;
+  const re = new RegExp(SCOPE_PATH_RE.source, "g");
+  while ((match = re.exec(expression)) !== null) {
+    paths.add(match[1].replace(/\?\./g, "."));
+  }
+  return [...paths];
+}
+
+function pathExistsInScope(scope: unknown, path: string): boolean {
+  if (scope === null || scope === undefined) return false;
+  const parts = path.split(".").filter(Boolean);
+  let current: unknown = scope;
+  for (const part of parts) {
+    if (current === null || typeof current !== "object" || Array.isArray(current)) {
+      return false;
+    }
+    if (!Object.prototype.hasOwnProperty.call(current, part)) {
+      return false;
+    }
+    current = (current as Record<string, unknown>)[part];
+  }
+  return true;
+}
+
+function analyzeTemplateValue(
+  fieldId: string,
+  value: string,
+  scope: unknown
+): ScopeTemplateWarning[] {
+  if (!hasScopeTemplate(value)) return [];
+
+  const warnings: ScopeTemplateWarning[] = [];
+  const fieldLabel = resolveScopeFieldLabel(fieldId);
+  const expressionRe = /\{([^}]+)\}/g;
+  let match: RegExpExecArray | null;
+
+  while ((match = expressionRe.exec(value)) !== null) {
+    const expression = match[1].trim();
+    const paths = extractScopePropertyPaths(expression);
+    for (const path of paths) {
+      if (pathExistsInScope(scope, path)) continue;
+      warnings.push({
+        fieldId,
+        fieldLabel,
+        template: value,
+        expression,
+        missingPath: path,
+        message: `「${fieldLabel}」引用了 scope.${path}，但当前 scope 数据中并没有「${path}」字段，建议检查一下。`,
+      });
+    }
+  }
+
+  return warnings;
+}
+
+function shouldSkipField(fieldId: string): boolean {
+  return [...SKIP_FIELD_PREFIXES].some((prefix) => fieldId.startsWith(prefix));
+}
+
+function walkElementStrings(
+  value: unknown,
+  fieldId: string,
+  scope: unknown,
+  warnings: ScopeTemplateWarning[]
+) {
+  if (shouldSkipField(fieldId)) return;
+
+  if (typeof value === "string") {
+    warnings.push(...analyzeTemplateValue(fieldId, value, scope));
+    return;
+  }
+
+  if (Array.isArray(value)) {
+    value.forEach((item, index) => {
+      walkElementStrings(item, `${fieldId}.${index}`, scope, warnings);
+    });
+    return;
+  }
+
+  if (value && typeof value === "object") {
+    for (const [key, nested] of Object.entries(value)) {
+      const nextId = fieldId ? `${fieldId}.${key}` : key;
+      walkElementStrings(nested, nextId, scope, warnings);
+    }
+  }
+}
+
+export function collectElementScopeWarnings(
+  element: PanelElement,
+  scope: unknown
+): ScopeTemplateWarning[] {
+  if (scope === undefined) return [];
+
+  const warnings: ScopeTemplateWarning[] = [];
+  walkElementStrings(element, "", scope, warnings);
+
+  const seen = new Set<string>();
+  return warnings.filter((warning) => {
+    const key = `${warning.fieldId}|${warning.missingPath}|${warning.expression}`;
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}
+
+export function groupScopeWarningsByField(
+  warnings: ScopeTemplateWarning[]
+): Map<string, ScopeTemplateWarning[]> {
+  const map = new Map<string, ScopeTemplateWarning[]>();
+  for (const warning of warnings) {
+    const list = map.get(warning.fieldId) ?? [];
+    list.push(warning);
+    map.set(warning.fieldId, list);
+  }
+  return map;
+}

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

@@ -0,0 +1,75 @@
+import type { PanelElement } from "../types";
+
+const SCOPE_TEMPLATE_RE = /\{[^}]+\}/;
+
+export function hasScopeTemplate(value: string): boolean {
+  return SCOPE_TEMPLATE_RE.test(value);
+}
+
+export function evaluateScopeExpression(
+  expression: string,
+  scope: unknown
+): unknown {
+  const trimmed = expression.trim();
+  if (!trimmed) return undefined;
+  try {
+    const fn = new Function("scope", `"use strict"; return (${trimmed});`);
+    return fn(scope);
+  } catch {
+    return undefined;
+  }
+}
+
+export function evaluateScopeTemplate(
+  template: string,
+  scope: unknown
+): string {
+  if (!hasScopeTemplate(template)) return template;
+  return template.replace(/\{([^}]+)\}/g, (_, rawExpr: string) => {
+    const value = evaluateScopeExpression(rawExpr, scope);
+    if (value === null || value === undefined) return "";
+    if (typeof value === "string") return value;
+    if (typeof value === "number" || typeof value === "boolean") {
+      return String(value);
+    }
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return String(value);
+    }
+  });
+}
+
+function resolveScopedValue<T>(value: T, scope: unknown): T {
+  if (typeof value === "string" && hasScopeTemplate(value)) {
+    return evaluateScopeTemplate(value, scope) as T;
+  }
+  if (Array.isArray(value)) {
+    return value.map((item) => resolveScopedValue(item, scope)) as T;
+  }
+  if (value && typeof value === "object") {
+    const out: Record<string, unknown> = {};
+    for (const [key, nested] of Object.entries(value)) {
+      out[key] = resolveScopedValue(nested, scope);
+    }
+    return out as T;
+  }
+  return value;
+}
+
+export function resolvePanelElementScope(
+  element: PanelElement,
+  scope: unknown | undefined
+): PanelElement {
+  if (scope === undefined) return element;
+  return resolveScopedValue(structuredClone(element), scope);
+}
+
+export function formatViewElementScope(scope: unknown): string {
+  if (scope === undefined) return "";
+  try {
+    return JSON.stringify(scope, null, 2);
+  } catch {
+    return String(scope);
+  }
+}