@arronqzy/react-view 0.0.1

package/src/panel/utils/chartOptionBuilder.ts

@@ -0,0 +1,316 @@
+import type { EChartsOption } from "echarts";
+import type { PanelChartConfig, PanelElement } from "../types";
+
+const DEFAULT_CHART_VALUES = [12, 18, 9, 24];
+
+export function getChartValuesDisplayText(chart?: PanelChartConfig): string {
+  if (chart?.valuesText !== undefined) return chart.valuesText;
+  return (chart?.values ?? []).join(",");
+}
+
+export function parseChartValuesFromText(
+  text: string | undefined,
+  fallback: number[] = DEFAULT_CHART_VALUES
+): number[] {
+  if (text === undefined) return fallback;
+  const trimmed = text.trim();
+  if (!trimmed) return fallback;
+  const parts = trimmed.split(",").map((s) => s.trim()).filter(Boolean);
+  if (!parts.length) return fallback;
+  return parts.map((s) => {
+    const n = Number(s);
+    return Number.isFinite(n) ? n : 0;
+  });
+}
+
+export function resolveChartValues(element: PanelElement): number[] {
+  const chart = element.chart;
+  if (chart?.valuesText !== undefined) {
+    const parsed = parseChartValuesFromText(chart.valuesText, []);
+    return parsed.length ? parsed : DEFAULT_CHART_VALUES;
+  }
+  return chart?.values?.length ? chart.values : DEFAULT_CHART_VALUES;
+}
+
+export const CHART_TYPES = new Set([
+  "bar",
+  "line",
+  "pie",
+  "area",
+  "scatter",
+  "radar",
+  "gauge",
+  "funnel",
+]);
+
+type ChartType =
+  | "bar"
+  | "line"
+  | "pie"
+  | "area"
+  | "scatter"
+  | "radar"
+  | "gauge"
+  | "funnel";
+
+function deepMerge<T extends Record<string, any>>(base: T, patch?: Record<string, unknown>): T {
+  if (!patch) return base;
+  const next: Record<string, any> = { ...base };
+  for (const [key, value] of Object.entries(patch)) {
+    if (
+      value &&
+      typeof value === "object" &&
+      !Array.isArray(value) &&
+      next[key] &&
+      typeof next[key] === "object" &&
+      !Array.isArray(next[key])
+    ) {
+      next[key] = deepMerge(next[key], value as Record<string, unknown>);
+    } else {
+      next[key] = value;
+    }
+  }
+  return next as T;
+}
+
+export function buildChartOption(element: PanelElement): EChartsOption {
+  const chartType = (element.materialType ?? "") as ChartType;
+  const labels = element.chart?.labels?.length ? element.chart.labels : ["A", "B", "C", "D"];
+  const values = resolveChartValues(element);
+  const color = element.chart?.color || "#3b82f6";
+  const gradientFrom = element.chart?.gradientFrom || color;
+  const gradientTo = element.chart?.gradientTo || "#22d3ee";
+  const gradientDirection = element.chart?.gradientDirection ?? "to-right";
+  const useGradient = element.chart?.colorMode === "gradient";
+  const gradientMeta =
+    gradientDirection === "to-bottom"
+      ? { x: 0, y: 0, x2: 0, y2: 1 }
+      : gradientDirection === "to-bottom-right"
+        ? { x: 0, y: 0, x2: 1, y2: 1 }
+        : gradientDirection === "to-top-right"
+          ? { x: 0, y: 1, x2: 1, y2: 0 }
+          : { x: 0, y: 0, x2: 1, y2: 0 };
+  const chartColor = useGradient
+    ? ({
+        type: "linear",
+        ...gradientMeta,
+        colorStops: [
+          { offset: 0, color: gradientFrom },
+          { offset: 1, color: gradientTo },
+        ],
+      } as const)
+    : color;
+  const title = element.chart?.title ?? "";
+  const xAxisName = element.chart?.xAxisName ?? "";
+  const yAxisName = element.chart?.yAxisName ?? "";
+  const xAxisTickShow = element.chart?.xAxisTickShow ?? true;
+  const yAxisTickShow = element.chart?.yAxisTickShow ?? true;
+  const xAxisTickColor = element.chart?.xAxisTickColor ?? "#94a3b8";
+  const yAxisTickColor = element.chart?.yAxisTickColor ?? "#94a3b8";
+  const xAxisSplitLineShow = element.chart?.xAxisSplitLineShow ?? false;
+  const yAxisSplitLineShow = element.chart?.yAxisSplitLineShow ?? true;
+  const xAxisSplitLineColor = element.chart?.xAxisSplitLineColor ?? "#e2e8f0";
+  const yAxisSplitLineColor = element.chart?.yAxisSplitLineColor ?? "#e2e8f0";
+  const xAxisLabelColor = element.chart?.xAxisLabelColor ?? "#64748b";
+  const yAxisLabelColor = element.chart?.yAxisLabelColor ?? "#64748b";
+  const xAxisLabelFontSize = element.chart?.xAxisLabelFontSize ?? 10;
+  const yAxisLabelFontSize = element.chart?.yAxisLabelFontSize ?? 10;
+  const xAxisLabelAutoEllipsis = element.chart?.xAxisLabelAutoEllipsis ?? false;
+  const yAxisLabelAutoEllipsis = element.chart?.yAxisLabelAutoEllipsis ?? false;
+  const tooltipShow = element.chart?.tooltipShow ?? true;
+  const tooltipTrigger = element.chart?.tooltipTrigger ?? (chartType === "pie" || chartType === "funnel" || chartType === "scatter" ? "item" : "axis");
+  const tooltipBackgroundColor = element.chart?.tooltipBackgroundColor ?? "#0f172a";
+  const tooltipTextColor = element.chart?.tooltipTextColor ?? "#f8fafc";
+  const tooltipFormatter = element.chart?.tooltipFormatter;
+  const tooltipOption = {
+    show: tooltipShow,
+    trigger: tooltipTrigger,
+    backgroundColor: tooltipBackgroundColor,
+    textStyle: { color: tooltipTextColor },
+    formatter: tooltipFormatter || undefined,
+  };
+
+  if (chartType === "pie") {
+    const inner = element.chart?.pieInnerRadius ?? 30;
+    const outer = element.chart?.pieOuterRadius ?? 65;
+    const baseOption: EChartsOption = {
+      animation: false,
+      title: { text: title, left: "center", top: 6, textStyle: { fontSize: 12 } },
+      color: [chartColor as any],
+      tooltip: tooltipOption,
+      series: [
+        {
+          type: "pie",
+          radius: [`${inner}%`, `${outer}%`],
+          center: ["50%", "58%"],
+          label: { fontSize: 10 },
+          data: labels.map((name, i) => ({ name, value: values[i] ?? 0 })),
+        },
+      ],
+    };
+    return deepMerge(baseOption as Record<string, any>, element.chart?.option) as EChartsOption;
+  }
+
+  if (chartType === "gauge") {
+    const gaugeValue = values[0] ?? 0;
+    const baseOption: EChartsOption = {
+      animation: false,
+      title: { text: title, left: "center", top: 6, textStyle: { fontSize: 12 } },
+      tooltip: tooltipOption,
+      series: [
+        {
+          type: "gauge",
+          min: 0,
+          max: 100,
+          progress: { show: true, width: 10 },
+          axisLine: { lineStyle: { width: 10 } },
+          detail: { valueAnimation: false, formatter: "{value}%" },
+          data: [{ value: gaugeValue, name: title }],
+          itemStyle: { color: chartColor as any },
+        },
+      ],
+    };
+    return deepMerge(baseOption as Record<string, any>, element.chart?.option) as EChartsOption;
+  }
+
+  if (chartType === "radar") {
+    const indicator = labels.map((name) => ({ name, max: 100 }));
+    const baseOption: EChartsOption = {
+      animation: false,
+      title: { text: title, left: "center", top: 6, textStyle: { fontSize: 12 } },
+      tooltip: tooltipOption,
+      radar: { indicator, radius: "60%", center: ["50%", "58%"] },
+      series: [
+        {
+          type: "radar",
+          data: [{ value: values, name: title }],
+          areaStyle: { opacity: 0.25 },
+          lineStyle: { color: chartColor as any },
+          itemStyle: { color: chartColor as any },
+        },
+      ],
+    };
+    return deepMerge(baseOption as Record<string, any>, element.chart?.option) as EChartsOption;
+  }
+
+  if (chartType === "funnel") {
+    const baseOption: EChartsOption = {
+      animation: false,
+      title: { text: title, left: "center", top: 6, textStyle: { fontSize: 12 } },
+      tooltip: tooltipOption,
+      series: [
+        {
+          type: "funnel",
+          top: 28,
+          left: "10%",
+          width: "80%",
+          height: "65%",
+          sort: "descending",
+          data: labels.map((name, i) => ({ name, value: values[i] ?? 0 })),
+          label: { fontSize: 10 },
+          itemStyle: { color: chartColor as any },
+        },
+      ],
+    };
+    return deepMerge(baseOption as Record<string, any>, element.chart?.option) as EChartsOption;
+  }
+
+  if (chartType === "scatter") {
+    const baseOption: EChartsOption = {
+      animation: false,
+      title: { text: title, left: 8, top: 6, textStyle: { fontSize: 12 } },
+      grid: { left: 28, right: 10, top: 30, bottom: 20 },
+      xAxis: {
+        type: "value",
+        name: xAxisName,
+        nameTextStyle: { fontSize: 10 },
+        axisLabel: {
+          fontSize: xAxisLabelFontSize,
+          color: xAxisLabelColor,
+          overflow: xAxisLabelAutoEllipsis ? "truncate" : undefined,
+          hideOverlap: xAxisLabelAutoEllipsis,
+          width: xAxisLabelAutoEllipsis ? 80 : undefined,
+        },
+        axisTick: { show: xAxisTickShow, lineStyle: { color: xAxisTickColor } },
+        splitLine: { show: xAxisSplitLineShow, lineStyle: { color: xAxisSplitLineColor } },
+      },
+      yAxis: {
+        type: "value",
+        name: yAxisName,
+        nameTextStyle: { fontSize: 10 },
+        axisLabel: {
+          fontSize: yAxisLabelFontSize,
+          color: yAxisLabelColor,
+          overflow: yAxisLabelAutoEllipsis ? "truncate" : undefined,
+          hideOverlap: yAxisLabelAutoEllipsis,
+          width: yAxisLabelAutoEllipsis ? 80 : undefined,
+        },
+        axisTick: { show: yAxisTickShow, lineStyle: { color: yAxisTickColor } },
+        splitLine: { show: yAxisSplitLineShow, lineStyle: { color: yAxisSplitLineColor } },
+      },
+      tooltip: tooltipOption,
+      series: [
+        {
+          type: "scatter",
+          data: values.map((v, i) => [i + 1, v]),
+          itemStyle: { color: chartColor as any },
+          symbolSize: 10,
+        },
+      ],
+    };
+    return deepMerge(baseOption as Record<string, any>, element.chart?.option) as EChartsOption;
+  }
+
+  const seriesType = chartType === "area" ? "line" : chartType;
+  const baseOption: EChartsOption = {
+    animation: false,
+    title: { text: title, left: 8, top: 6, textStyle: { fontSize: 12 } },
+    grid: { left: 28, right: 10, top: 30, bottom: 20 },
+    xAxis: {
+      type: "category",
+      name: xAxisName,
+      nameTextStyle: { fontSize: 10 },
+      data: labels,
+      axisLabel: {
+        fontSize: xAxisLabelFontSize,
+        color: xAxisLabelColor,
+        overflow: xAxisLabelAutoEllipsis ? "truncate" : undefined,
+        hideOverlap: xAxisLabelAutoEllipsis,
+        width: xAxisLabelAutoEllipsis ? 80 : undefined,
+      },
+      axisTick: { show: xAxisTickShow, lineStyle: { color: xAxisTickColor } },
+      splitLine: { show: xAxisSplitLineShow, lineStyle: { color: xAxisSplitLineColor } },
+    },
+    yAxis: {
+      type: "value",
+      name: yAxisName,
+      nameTextStyle: { fontSize: 10 },
+      axisLabel: {
+        fontSize: yAxisLabelFontSize,
+        color: yAxisLabelColor,
+        overflow: yAxisLabelAutoEllipsis ? "truncate" : undefined,
+        hideOverlap: yAxisLabelAutoEllipsis,
+        width: yAxisLabelAutoEllipsis ? 80 : undefined,
+      },
+      axisTick: { show: yAxisTickShow, lineStyle: { color: yAxisTickColor } },
+      splitLine: { show: yAxisSplitLineShow, lineStyle: { color: yAxisSplitLineColor } },
+    },
+    tooltip: tooltipOption,
+    series: [
+      {
+        type: seriesType,
+        data: values,
+        smooth:
+          chartType === "line" || chartType === "area"
+            ? (element.chart?.smooth ?? true)
+            : undefined,
+        barWidth: chartType === "bar" ? (element.chart?.barWidth ?? 24) : undefined,
+        areaStyle: chartType === "area" ? { opacity: 0.25 } : undefined,
+        itemStyle: { color: chartColor as any },
+        lineStyle: { color: chartColor as any },
+      },
+    ],
+  };
+  return deepMerge(baseOption as Record<string, any>, element.chart?.option) as EChartsOption;
+}
+

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 "../../../../rx-store/src/types";
+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;
+}