@arronqzy/vue-view 0.1.0

package/src/panel/utils/gridPlacement.ts

@@ -0,0 +1,189 @@
+import type { PanelElement } from "../types";
+
+export function getGridSlotLayout(grid: PanelElement) {
+  const rows = Math.max(1, Math.floor(grid.gridRows ?? 2));
+  const cols = Math.max(1, Math.floor(grid.gridCols ?? 3));
+  const gap = Math.max(0, grid.gridGap ?? 8);
+  const padding = Math.max(0, grid.gridPadding ?? 10);
+  const innerWidth = Math.max(1, grid.width - padding * 2);
+  const innerHeight = Math.max(1, grid.height - padding * 2);
+  const cellWidth = Math.max(1, (innerWidth - gap * (cols - 1)) / cols);
+  const cellHeight = Math.max(1, (innerHeight - gap * (rows - 1)) / rows);
+  const slots: Array<{ index: number; x: number; y: number; width: number; height: number }> = [];
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < cols; c++) {
+      const x = grid.x + padding + c * (cellWidth + gap);
+      const y = grid.y + padding + r * (cellHeight + gap);
+      slots.push({
+        index: r * cols + c,
+        x,
+        y,
+        width: cellWidth,
+        height: cellHeight,
+      });
+    }
+  }
+  return { slots, rows, cols, cellWidth, cellHeight, gap };
+}
+
+export function getGridChildSpanRect(grid: PanelElement, slotIndex: number, colSpan: number, rowSpan: number) {
+  const { rows, cols, cellWidth, cellHeight, gap, slots } = getGridSlotLayout(grid);
+  const total = rows * cols;
+  const safeIndex = Math.max(0, Math.min(total - 1, Math.floor(slotIndex || 0)));
+  const baseRow = Math.floor(safeIndex / cols);
+  const baseCol = safeIndex % cols;
+  const safeColSpan = Math.max(1, Math.min(cols - baseCol, Math.floor(colSpan || 1)));
+  const safeRowSpan = Math.max(1, Math.min(rows - baseRow, Math.floor(rowSpan || 1)));
+  const baseSlot = slots[safeIndex];
+  const width = safeColSpan * cellWidth + (safeColSpan - 1) * gap;
+  const height = safeRowSpan * cellHeight + (safeRowSpan - 1) * gap;
+  return {
+    index: safeIndex,
+    x: baseSlot?.x ?? grid.x,
+    y: baseSlot?.y ?? grid.y,
+    width: Math.max(1, width),
+    height: Math.max(1, height),
+    colSpan: safeColSpan,
+    rowSpan: safeRowSpan,
+  };
+}
+
+export function inferSpanBySize(size: number, cellSize: number, gap: number, maxSpan: number) {
+  const safeMax = Math.max(1, Math.floor(maxSpan));
+  const unit = Math.max(1, cellSize + gap);
+  const ratio = (Math.max(1, size) + gap) / unit;
+  const whole = Math.floor(ratio);
+  const fraction = ratio - whole;
+  const promoted = fraction >= 0.72 ? whole + 1 : Math.max(1, whole);
+  return Math.max(1, Math.min(safeMax, promoted));
+}
+
+export function getGridSpanCellsForSnap(
+  rows: number,
+  cols: number,
+  slotIndex: number,
+  colSpan: number,
+  rowSpan: number
+) {
+  const total = rows * cols;
+  const safeIndex = Math.max(0, Math.min(total - 1, Math.floor(slotIndex || 0)));
+  const startRow = Math.floor(safeIndex / cols);
+  const startCol = safeIndex % cols;
+  const safeColSpan = Math.max(1, Math.min(cols - startCol, Math.floor(colSpan || 1)));
+  const safeRowSpan = Math.max(1, Math.min(rows - startRow, Math.floor(rowSpan || 1)));
+  const indices: number[] = [];
+  for (let r = startRow; r < startRow + safeRowSpan; r++) {
+    for (let c = startCol; c < startCol + safeColSpan; c++) {
+      indices.push(r * cols + c);
+    }
+  }
+  return {
+    safeIndex,
+    startRow,
+    startCol,
+    colSpan: safeColSpan,
+    rowSpan: safeRowSpan,
+    indices,
+  };
+}
+
+export function getOccupiedSlotsForGrid(
+  elementsById: Map<string, PanelElement>,
+  gridId: string,
+  excludeId: string | undefined,
+  layerId: string
+) {
+  const occupied = new Set<number>();
+  const grid = elementsById.get(gridId);
+  if (!grid || grid.materialType !== "grid") return occupied;
+  const { rows, cols } = getGridSlotLayout(grid);
+  for (const el of elementsById.values()) {
+    if (excludeId && el.id === excludeId) continue;
+    if (el.layerId !== layerId) continue;
+    if (el.parentGridId !== gridId) continue;
+    if (el.gridSlotIndex === undefined) continue;
+    const span = getGridSpanCellsForSnap(rows, cols, el.gridSlotIndex, el.gridColSpan ?? 1, el.gridRowSpan ?? 1);
+    span.indices.forEach((idx) => occupied.add(idx));
+  }
+  return occupied;
+}
+
+/** 新建节点落点吸附到指定图层上的网格（与 Moveable 吸附规则对齐） */
+export function computeSnapPatchForNewElementOnLayer(
+  elementsById: Map<string, PanelElement>,
+  layerId: string,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  excludeElementId?: string
+): Partial<PanelElement> {
+  const centerX = x + width / 2;
+  const centerY = y + height / 2;
+  let nearest: {
+    gridId: string;
+    slotIndex: number;
+    slotX: number;
+    slotY: number;
+    width: number;
+    height: number;
+    colSpan: number;
+    rowSpan: number;
+    distance: number;
+  } | null = null;
+
+  for (const [, el] of elementsById.entries()) {
+    if (el.materialType !== "grid" || el.layerId !== layerId) continue;
+    const layout = getGridSlotLayout(el);
+    const { slots, cellWidth, cellHeight, rows, cols, gap } = layout;
+    const occupiedSlots = getOccupiedSlotsForGrid(elementsById, el.id, excludeElementId, layerId);
+    const threshold = Math.max(8, el.gridSnapThreshold ?? 36);
+    const inferredColSpan = inferSpanBySize(width, cellWidth, gap, cols);
+    const inferredRowSpan = inferSpanBySize(height, cellHeight, gap, rows);
+    const movingColSpan = Math.max(1, inferredColSpan);
+    const movingRowSpan = Math.max(1, inferredRowSpan);
+    const insideGridBounds =
+      centerX >= el.x &&
+      centerX <= el.x + Math.max(1, el.width) &&
+      centerY >= el.y &&
+      centerY <= el.y + Math.max(1, el.height);
+
+    for (const slot of slots) {
+      const spanCells = getGridSpanCellsForSnap(rows, cols, slot.index, movingColSpan, movingRowSpan);
+      if (spanCells.colSpan !== movingColSpan || spanCells.rowSpan !== movingRowSpan) continue;
+      const blocked = spanCells.indices.some((idx) => occupiedSlots.has(idx));
+      if (blocked) continue;
+      const slotCenterX = slot.x + cellWidth / 2;
+      const slotCenterY = slot.y + cellHeight / 2;
+      const distance = Math.hypot(slotCenterX - centerX, slotCenterY - centerY);
+      if (!insideGridBounds && distance > threshold) continue;
+      if (!nearest || distance < nearest.distance) {
+        const spanWidth = spanCells.colSpan * cellWidth + (spanCells.colSpan - 1) * gap;
+        const spanHeight = spanCells.rowSpan * cellHeight + (spanCells.rowSpan - 1) * gap;
+        nearest = {
+          gridId: el.id,
+          slotIndex: spanCells.safeIndex,
+          slotX: slot.x,
+          slotY: slot.y,
+          width: spanWidth,
+          height: spanHeight,
+          colSpan: spanCells.colSpan,
+          rowSpan: spanCells.rowSpan,
+          distance,
+        };
+      }
+    }
+  }
+
+  if (!nearest) return {};
+  return {
+    x: nearest.slotX,
+    y: nearest.slotY,
+    parentGridId: nearest.gridId,
+    gridSlotIndex: nearest.slotIndex,
+    gridColSpan: nearest.colSpan,
+    gridRowSpan: nearest.rowSpan,
+    width: nearest.width,
+    height: nearest.height,
+  };
+}

package/src/panel/utils/mappingLayerOps.ts

@@ -0,0 +1,142 @@
+import type { Node, State } from "@arronqzy/rx-store";
+import type { PanelElement, PanelLayer } from "../types";
+import { DEFAULT_LAYER_ID, DEFAULT_LAYER } from "./panelElementDefaults";
+import { isPanelElementNode } from "./panelElementNodes";
+
+/**
+ * 沿 mappingSourceNodeId 追溯到「源画布节点」id。
+ * 多层映射 / 中间克隆指向时仍与同源簇对齐；用于批量同步与节点树一致。
+ */
+export function canonicalMappingFamilyRootId(
+  elementById: Map<string, PanelElement>,
+  nodeId: string
+): string {
+  const visited = new Set<string>();
+  let cur = nodeId;
+  for (;;) {
+    if (visited.has(cur)) return cur;
+    visited.add(cur);
+    const el = elementById.get(cur);
+    const next = el?.mappingSourceNodeId;
+    if (!next || next === cur) return cur;
+    cur = next;
+  }
+}
+
+/** 映射图层克隆节点：基准图层上的节点 id → 该映射图层上与之源一致的节点 id */
+export function findCloneIdForSourceNodeOnMappingLayer(
+  sourceElementId: string,
+  mappingLayerId: string,
+  elementsById: Map<string, PanelElement>
+): string | undefined {
+  const root = canonicalMappingFamilyRootId(elementsById, sourceElementId);
+  for (const el of elementsById.values()) {
+    if (el.layerId !== mappingLayerId) continue;
+    if (!el.mappingSourceNodeId) continue;
+    if (canonicalMappingFamilyRootId(elementsById, el.mappingSourceNodeId) !== root) continue;
+    return el.id;
+  }
+  return undefined;
+}
+
+/** 克隆网格 id → 逻辑上的「源图层网格」同源 id（跨多层映射）；非法/缺失父节点时返回 undefined */
+export function logicalGridParentIdFromConcrete(
+  concreteParentGridId: string | undefined,
+  elementById: Map<string, PanelElement>
+): string | undefined {
+  if (!concreteParentGridId) return undefined;
+  const g = elementById.get(concreteParentGridId);
+  if (!g || g.materialType !== "grid") return undefined;
+  return canonicalMappingFamilyRootId(elementById, g.id);
+}
+
+/** 逻辑源网格同源 id → 在指定图层上的那张网格实例 id */
+export function concreteGridParentIdForLayer(
+  logicalSourceGridId: string | undefined,
+  targetLayerId: string,
+  elements: Iterable<PanelElement>
+): string | undefined {
+  if (!logicalSourceGridId) return undefined;
+  const byId = new Map<string, PanelElement>();
+  for (const el of elements) byId.set(el.id, el);
+  for (const el of elements) {
+    if (el.layerId !== targetLayerId || el.materialType !== "grid") continue;
+    if (canonicalMappingFamilyRootId(byId, el.id) === logicalSourceGridId) return el.id;
+  }
+  return undefined;
+}
+
+/** 打开映射图层时：把选中节点在同图层内的网格子树一并纳入，避免出现「父网格+兄弟节点已克隆、中间嵌套网格丢失」的断层结构 */
+export function expandMappingSeedsWithGridDescendants(nodeById: Map<string, PanelElement>, seedIds: string[]): string[] {
+  const expanded = new Set<string>();
+  const queue: string[] = [];
+  for (const id of seedIds) {
+    if (!id || !nodeById.has(id)) continue;
+    expanded.add(id);
+    queue.push(id);
+  }
+  while (queue.length > 0) {
+    const id = queue.shift()!;
+    const anchor = nodeById.get(id);
+    const layerId = anchor?.layerId;
+    for (const el of nodeById.values()) {
+      if (el.parentGridId !== id) continue;
+      if (layerId !== undefined && el.layerId !== layerId) continue;
+      if (expanded.has(el.id)) continue;
+      expanded.add(el.id);
+      queue.push(el.id);
+    }
+  }
+  return [...expanded];
+}
+
+export function removeMappingLayersBySourceIds(
+  draft: State,
+  sourceIds: Set<string>,
+  fallbackActiveLayerId: string = DEFAULT_LAYER_ID
+) {
+  if (sourceIds.size === 0) return;
+  const nodes = draft.root.children ?? [];
+  const mappingLayerIds = new Set<string>();
+  nodes.forEach((n) => {
+    if (!isPanelElementNode(n) || !n.props) return;
+    const props = n.props as PanelElement;
+    if (!props.mappingSourceNodeId) return;
+    if (!sourceIds.has(props.mappingSourceNodeId)) return;
+    mappingLayerIds.add(props.layerId);
+  });
+  if (mappingLayerIds.size === 0) return;
+  removeLayersByIds(draft, mappingLayerIds, fallbackActiveLayerId);
+}
+
+export function removeLayersByIds(draft: State, layerIds: Set<string>, fallbackActiveLayerId: string = DEFAULT_LAYER_ID) {
+  if (layerIds.size === 0) return;
+  const nodes = draft.root.children ?? [];
+
+  draft.root.children = nodes.filter((n) => {
+    if (!isPanelElementNode(n) || !n.props) return true;
+    const props = n.props as PanelElement;
+    return !layerIds.has(props.layerId);
+  });
+
+  draft.variables = draft.variables ?? {};
+  const layers = (draft.variables.layers as PanelLayer[] | undefined) ?? [DEFAULT_LAYER];
+  draft.variables.layers = layers.filter((layer) => !layerIds.has(layer.id));
+  const activeLayerId = (draft.variables.activeLayerId as string | undefined) ?? fallbackActiveLayerId;
+  if (layerIds.has(activeLayerId)) {
+    draft.variables.activeLayerId =
+      (draft.variables.layers[0] as PanelLayer | undefined)?.id ?? fallbackActiveLayerId;
+  }
+}
+
+export function getMaxZIndexByLayer(nodes: Node[], layerId: string): number {
+  let maxZ = 0;
+  nodes.forEach((n) => {
+    if (!isPanelElementNode(n) || !n.props) return;
+    const props = n.props as PanelElement;
+    if (props.layerId !== layerId) return;
+    const z = typeof props.zIndex === "number" ? props.zIndex : 1;
+    if (z > maxZ) maxZ = z;
+  });
+  return maxZ;
+}

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 "@arronqzy/rx-store";
+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 "@arronqzy/rx-store";
+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));
+}