@arronqzy/vue-view 0.1.0

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

@@ -0,0 +1,243 @@
+import type { PanelElement } from "../types";
+import { hasScopeTemplate } from "./scope-template";
+import { resolveScopeFieldLabel } from "./scope-field-labels";
+import {
+  SCOPE_SPREAD_TEMPLATE_RE,
+  buildSpreadInvalidExpressionWarningMessage,
+  buildSpreadNotArrayWarningMessage,
+  formatScopePathSegments,
+  isSpreadTemplateBrace,
+  parseScopePathSegments,
+  resolveSpreadScopePath,
+} from "./scope-template-spread";
+
+export type ScopeTemplateWarningKind =
+  | "missing-path"
+  | "spread-not-array"
+  | "spread-invalid-expression";
+
+export type ScopeTemplateWarning = {
+  fieldId: string;
+  fieldLabel: string;
+  template: string;
+  expression: string;
+  missingPath: string;
+  message: string;
+  kind: ScopeTemplateWarningKind;
+};
+
+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 analyzeSpreadTemplateValue(
+  fieldId: string,
+  value: string,
+  scope: unknown
+): ScopeTemplateWarning[] {
+  const warnings: ScopeTemplateWarning[] = [];
+  const fieldLabel = resolveScopeFieldLabel(fieldId);
+  const spreadRe = new RegExp(SCOPE_SPREAD_TEMPLATE_RE.source, "g");
+  let match: RegExpExecArray | null;
+
+  while ((match = spreadRe.exec(value)) !== null) {
+    const spreadTemplate = match[0];
+    const expression = match[1].trim();
+    const segments = parseScopePathSegments(expression);
+
+    if (segments === null || segments.length === 0) {
+      warnings.push({
+        fieldId,
+        fieldLabel,
+        template: value,
+        expression,
+        missingPath: "",
+        kind: "spread-invalid-expression",
+        message: buildSpreadInvalidExpressionWarningMessage(
+          fieldLabel,
+          spreadTemplate
+        ),
+      });
+      continue;
+    }
+
+    const resolved = resolveSpreadScopePath(expression, scope);
+    if (resolved.ok) continue;
+
+    if (resolved.issue === "invalid-expression") {
+      warnings.push({
+        fieldId,
+        fieldLabel,
+        template: value,
+        expression,
+        missingPath: "",
+        kind: "spread-invalid-expression",
+        message: buildSpreadInvalidExpressionWarningMessage(
+          fieldLabel,
+          spreadTemplate
+        ),
+      });
+      continue;
+    }
+
+    const arrayPath =
+      resolved.arrayPath ?? formatScopePathSegments(segments.slice(0, -1));
+
+    if (resolved.issue === "path-missing") {
+      if (!pathExistsInScope(scope, arrayPath)) {
+        warnings.push({
+          fieldId,
+          fieldLabel,
+          template: value,
+          expression,
+          missingPath: arrayPath,
+          kind: "missing-path",
+          message: `「${fieldLabel}」引用了 scope.${arrayPath}，但当前 scope 数据中并没有「${arrayPath}」字段，建议检查一下。`,
+        });
+      }
+      continue;
+    }
+
+    if (resolved.issue === "not-array") {
+      warnings.push({
+        fieldId,
+        fieldLabel,
+        template: value,
+        expression,
+        missingPath: arrayPath,
+        kind: "spread-not-array",
+        message: buildSpreadNotArrayWarningMessage(
+          fieldLabel,
+          spreadTemplate,
+          expression,
+          arrayPath
+        ),
+      });
+    }
+  }
+
+  return warnings;
+}
+
+function analyzeTemplateValue(
+  fieldId: string,
+  value: string,
+  scope: unknown
+): ScopeTemplateWarning[] {
+  if (!hasScopeTemplate(value)) return [];
+
+  const warnings: ScopeTemplateWarning[] = [
+    ...analyzeSpreadTemplateValue(fieldId, value, scope),
+  ];
+  const fieldLabel = resolveScopeFieldLabel(fieldId);
+  const expressionRe = /\{([^}]+)\}/g;
+  let match: RegExpExecArray | null;
+
+  while ((match = expressionRe.exec(value)) !== null) {
+    if (isSpreadTemplateBrace(value, match.index)) continue;
+    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,
+        kind: "missing-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.kind}|${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,97 @@
+import type { PanelElement } from "../types";
+import { materializeChartLabelsFromScope } from "./scope-template-chart";
+import {
+  SCOPE_SPREAD_TEMPLATE_RE,
+  evaluateSpreadScopeExpression,
+} from "./scope-template-spread";
+
+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;
+
+  const withSpread = template.replace(
+    SCOPE_SPREAD_TEMPLATE_RE,
+    (_, rawExpr: string) => {
+      const result = evaluateSpreadScopeExpression(rawExpr, scope);
+      return result.ok ? result.value : "";
+    }
+  );
+
+  return withSpread.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;
+  const resolved = resolveScopedValue(structuredClone(element), scope);
+  if (resolved.chart) {
+    const labels = materializeChartLabelsFromScope(element.chart, scope);
+    if (labels !== undefined) {
+      resolved.chart.labels = labels;
+      delete resolved.chart.labelsText;
+    }
+  }
+  return resolved;
+}
+
+export function formatViewElementScope(scope: unknown): string {
+  if (scope === undefined) return "";
+  try {
+    return JSON.stringify(scope, null, 2);
+  } catch {
+    return String(scope);
+  }
+}

package/src/panel/utils/updateElementDraft.ts

@@ -0,0 +1,221 @@
+import type { Node, State } from "@arronqzy/rx-store";
+import type { PanelElement } from "../types";
+import { getGridChildSpanRect, getGridSlotLayout } from "./gridPlacement";
+import {
+  canonicalMappingFamilyRootId,
+  concreteGridParentIdForLayer,
+  logicalGridParentIdFromConcrete,
+} from "./mappingLayerOps";
+import { isPanelElementNode } from "./panelElementNodes";
+
+/** 防止同源合并把「映射层上的网格 id」泄露到其它图层，保证节点树 parentGridId 只指向本图层网格 */
+function fixCrossLayerParentGrid(
+  merged: PanelElement,
+  propsBefore: PanelElement,
+  byId: Map<string, PanelElement>,
+  allFlat: PanelElement[]
+): void {
+  const layerId = propsBefore.layerId;
+  const pg = merged.parentGridId;
+  if (!pg) return;
+
+  const parentNode = byId.get(pg);
+  const validHere =
+    !!parentNode &&
+    parentNode.materialType === "grid" &&
+    parentNode.layerId === layerId;
+
+  if (validHere) return;
+
+  const logical =
+    logicalGridParentIdFromConcrete(pg, byId) ??
+    (propsBefore.parentGridId !== undefined
+      ? logicalGridParentIdFromConcrete(propsBefore.parentGridId, byId)
+      : undefined);
+
+  if (logical !== undefined) {
+    const cp = concreteGridParentIdForLayer(logical, layerId, allFlat);
+    const gridEl = cp ? byId.get(cp) : undefined;
+    if (gridEl?.materialType === "grid") {
+      merged.parentGridId = cp;
+      const spanRect = getGridChildSpanRect(
+        gridEl,
+        merged.gridSlotIndex ?? 0,
+        merged.gridColSpan ?? 1,
+        merged.gridRowSpan ?? 1
+      );
+      merged.gridSlotIndex = spanRect.index;
+      merged.gridColSpan = spanRect.colSpan;
+      merged.gridRowSpan = spanRect.rowSpan;
+      merged.x = spanRect.x;
+      merged.y = spanRect.y;
+      merged.width = spanRect.width;
+      merged.height = spanRect.height;
+      return;
+    }
+  }
+
+  merged.parentGridId = propsBefore.parentGridId;
+  merged.gridSlotIndex = propsBefore.gridSlotIndex;
+  merged.gridColSpan = propsBefore.gridColSpan;
+  merged.gridRowSpan = propsBefore.gridRowSpan;
+  merged.x = propsBefore.x;
+  merged.y = propsBefore.y;
+  merged.width = propsBefore.width;
+  merged.height = propsBefore.height;
+}
+
+/** 同源映射：外层网格布局改动时，同源簇内每张网格实例一并 reflow 其子节点几何 */
+export function applyGridLayoutPatchAcrossMappingFamily(
+  draft: State,
+  logicalGridSourceId: string,
+  patch: Partial<PanelElement>
+): void {
+  const nodes = draft.root.children ?? [];
+  const byIdPre = new Map<string, PanelElement>();
+  nodes.forEach((n) => {
+    if (!isPanelElementNode(n) || !n.props) return;
+    const p = n.props as PanelElement;
+    byIdPre.set(p.id, p);
+  });
+  const gridTargets = nodes.filter((n) => {
+    if (!isPanelElementNode(n) || !n.props) return false;
+    const p = n.props as PanelElement;
+    if (p.materialType !== "grid") return false;
+    return canonicalMappingFamilyRootId(byIdPre, p.id) === logicalGridSourceId;
+  });
+  if (gridTargets.length === 0) return;
+  const byParent = new Map<string, PanelElement[]>();
+  nodes.forEach((n) => {
+    if (!isPanelElementNode(n) || !n.props) return;
+    const p = n.props as PanelElement;
+    if (!p.parentGridId) return;
+    const list = byParent.get(p.parentGridId) ?? [];
+    list.push(p);
+    byParent.set(p.parentGridId, list);
+  });
+  const byIdNode = new Map<string, Node>();
+  nodes.forEach((n) => {
+    if (!isPanelElementNode(n) || !n.props) return;
+    byIdNode.set((n.props as PanelElement).id, n);
+  });
+  const reflowGridDescendants = (grid: PanelElement) => {
+    const { slots } = getGridSlotLayout(grid);
+    if (slots.length === 0) return;
+    const directChildren = byParent.get(grid.id) ?? [];
+    directChildren.forEach((child) => {
+      const slotIndex =
+        child.gridSlotIndex !== undefined ? Math.max(0, Math.floor(child.gridSlotIndex)) : 0;
+      const spanRect = getGridChildSpanRect(
+        grid,
+        slotIndex % slots.length,
+        child.gridColSpan ?? 1,
+        child.gridRowSpan ?? 1
+      );
+      child.gridSlotIndex = spanRect.index;
+      child.gridColSpan = spanRect.colSpan;
+      child.gridRowSpan = spanRect.rowSpan;
+      child.x = spanRect.x;
+      child.y = spanRect.y;
+      child.width = spanRect.width;
+      child.height = spanRect.height;
+      const childNode = byIdNode.get(child.id);
+      if (childNode) childNode.props = child;
+      if (child.materialType === "grid") {
+        reflowGridDescendants(child);
+      }
+    });
+  };
+  gridTargets.forEach((targetNode) => {
+    if (!targetNode.props) return;
+    const nextGrid = {
+      ...(targetNode.props as PanelElement),
+      ...patch,
+    } as PanelElement;
+    targetNode.props = nextGrid;
+    reflowGridDescendants(nextGrid);
+  });
+}
+
+/** 同源节点簇在非网格独占分支下的批量合并（含跨图层 parentGridId remap） */
+export function applyMappingFamilySyncPatch(
+  draft: State,
+  syncSourceId: string,
+  syncPatch: Partial<PanelElement>,
+  patch: Partial<PanelElement>
+): void {
+  const nodes = draft.root.children ?? [];
+  const byId = new Map<string, PanelElement>();
+  nodes.forEach((n) => {
+    if (!isPanelElementNode(n) || !n.props) return;
+    const p = n.props as PanelElement;
+    byId.set(p.id, p);
+  });
+  const allFlat = [...byId.values()];
+  nodes.forEach((n) => {
+    if (!isPanelElementNode(n) || !n.props) return;
+    const props = n.props as PanelElement;
+    const sameFamily = canonicalMappingFamilyRootId(byId, props.id) === syncSourceId;
+    if (!sameFamily) return;
+
+    const merged = { ...props, ...syncPatch } as PanelElement;
+
+    if ("parentGridId" in patch && patch.parentGridId === undefined) {
+      merged.parentGridId = undefined;
+      merged.gridSlotIndex = undefined;
+      n.props = merged;
+      byId.set(merged.id, merged);
+      return;
+    }
+
+    const logicalParent =
+      patch.parentGridId !== undefined
+        ? logicalGridParentIdFromConcrete(patch.parentGridId, byId)
+        : props.parentGridId !== undefined
+          ? logicalGridParentIdFromConcrete(props.parentGridId, byId)
+          : undefined;
+
+    const touchesGridPlacement =
+      ("parentGridId" in patch && patch.parentGridId !== undefined) ||
+      "gridSlotIndex" in patch ||
+      "gridColSpan" in patch ||
+      "gridRowSpan" in patch;
+
+    if (touchesGridPlacement && logicalParent !== undefined) {
+      const concreteParent = concreteGridParentIdForLayer(logicalParent, props.layerId, allFlat);
+      if (concreteParent) {
+        const parentEl = byId.get(concreteParent);
+        if (parentEl?.materialType === "grid") {
+          merged.parentGridId = concreteParent;
+          const spanRect = getGridChildSpanRect(
+            parentEl,
+            merged.gridSlotIndex ?? 0,
+            merged.gridColSpan ?? 1,
+            merged.gridRowSpan ?? 1
+          );
+          merged.gridSlotIndex = spanRect.index;
+          merged.gridColSpan = spanRect.colSpan;
+          merged.gridRowSpan = spanRect.rowSpan;
+          merged.x = spanRect.x;
+          merged.y = spanRect.y;
+          merged.width = spanRect.width;
+          merged.height = spanRect.height;
+        }
+      } else {
+        merged.parentGridId = props.parentGridId;
+        merged.gridSlotIndex = props.gridSlotIndex;
+        merged.gridColSpan = props.gridColSpan;
+        merged.gridRowSpan = props.gridRowSpan;
+        merged.x = props.x;
+        merged.y = props.y;
+        merged.width = props.width;
+        merged.height = props.height;
+      }
+    }
+
+    fixCrossLayerParentGrid(merged, props, byId, allFlat);
+
+    n.props = merged;
+    byId.set(merged.id, merged);
+  });
+}

package/src/panel/viewportZoom.ts

@@ -0,0 +1,26 @@
+export type ViewportZoom = {
+  x: number;
+  y: number;
+};
+
+export function uniformViewportZoom(zoom: ViewportZoom): number {
+  return Math.min(zoom.x, zoom.y);
+}
+
+export function clampViewportZoom(value: number): number {
+  return Math.min(4, Math.max(0.25, value));
+}
+
+export function clampViewportZoomXY(zoom: ViewportZoom): ViewportZoom {
+  return { x: clampViewportZoom(zoom.x), y: clampViewportZoom(zoom.y) };
+}
+
+export function scaleViewportZoom(
+  zoom: ViewportZoom,
+  factor: number
+): ViewportZoom {
+  return clampViewportZoomXY({
+    x: zoom.x * factor,
+    y: zoom.y * factor,
+  });
+}

package/src/tailwind.css

@@ -0,0 +1,43 @@
+/* Moveable：仅角点控制柄固定屏幕像素；勿作用于 moveable-direction 边线 */
+.rv-moveable-layer {
+  --moveable-color: #1990ff;
+  z-index: 9999 !important;
+}
+
+.rv-moveable-layer.moveable-group,
+.rv-moveable-layer .moveable-group,
+.rv-moveable-layer.moveable-control-box,
+.rv-moveable-layer .moveable-control-box {
+  z-index: 1 !important;
+}
+
+.rv-moveable-layer .moveable-line {
+  --moveable-color: #1990ff;
+  background: var(--moveable-color) !important;
+}
+
+/* 组选/单边控制线：厚度由 moveable zoom 补偿，保持屏幕 1px */
+.rv-moveable-layer .moveable-line.moveable-direction {
+  background: var(--moveable-color) !important;
+}
+
+.rv-moveable-layer .moveable-group .moveable-control-box,
+.rv-moveable-layer.moveable-group .moveable-control-box {
+  z-index: 2 !important;
+}
+
+.rv-moveable-layer .moveable-around-control {
+  background: transparent !important;
+}
+
+.rv-moveable-layer .moveable-control {
+  width: 14px !important;
+  height: 14px !important;
+  margin-top: -7px !important;
+  margin-left: -7px !important;
+  border-radius: 50% !important;
+  box-sizing: border-box !important;
+  border: 2px solid hsl(var(--background)) !important;
+  background: #1990ff !important;
+  background: var(--moveable-color) !important;
+}