@nocobase/flow-engine 2.0.0-alpha.2 → 2.0.0-alpha.20

package/lib/components/dnd/gridDragPlanner.d.ts

@@ -0,0 +1,130 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+/** 栅格系统常量 */
+export declare const DEFAULT_GRID_COLUMNS = 24;
+/** 最小 slot 厚度 */
+export declare const MIN_SLOT_THICKNESS = 16;
+/** 最大 slot 厚度 */
+export declare const MAX_SLOT_THICKNESS = 48;
+/** 列边缘最小宽度 */
+export declare const COLUMN_EDGE_MIN_WIDTH = 12;
+/** 列边缘最大宽度 */
+export declare const COLUMN_EDGE_MAX_WIDTH = 28;
+/** 列边缘宽度占列宽的比例（原来是 1/5） */
+export declare const COLUMN_EDGE_WIDTH_RATIO = 0.2;
+export interface Rect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface GridLayoutData {
+    rows: Record<string, string[][]>;
+    sizes: Record<string, number[]>;
+}
+export interface ColumnSlot {
+    type: 'column';
+    rowId: string;
+    columnIndex: number;
+    insertIndex: number;
+    position: 'before' | 'after';
+    rect: Rect;
+}
+export interface ColumnEdgeSlot {
+    type: 'column-edge';
+    rowId: string;
+    columnIndex: number;
+    direction: 'left' | 'right';
+    rect: Rect;
+}
+export interface RowGapSlot {
+    type: 'row-gap';
+    targetRowId: string;
+    position: 'above' | 'below';
+    rect: Rect;
+}
+export interface EmptyRowSlot {
+    type: 'empty-row';
+    rect: Rect;
+}
+export interface EmptyColumnSlot {
+    type: 'empty-column';
+    rowId: string;
+    columnIndex: number;
+    rect: Rect;
+}
+export type LayoutSlot = ColumnSlot | ColumnEdgeSlot | RowGapSlot | EmptyRowSlot | EmptyColumnSlot;
+/**
+ * 列内插入的配置
+ */
+export interface ColumnInsertConfig {
+    /** 高亮区域的高度（像素） */
+    height?: number;
+    /** 垂直偏移（像素），正数向下，负数向上 */
+    offsetTop?: number;
+}
+/**
+ * 列边缘的配置
+ */
+export interface ColumnEdgeConfig {
+    /** 高亮区域的宽度（像素） */
+    width?: number;
+    /** 水平偏移（像素），正数向右，负数向左 */
+    offsetLeft?: number;
+}
+/**
+ * 行间隙的配置
+ */
+export interface RowGapConfig {
+    /** 高亮区域的高度（像素） */
+    height?: number;
+    /** 垂直偏移（像素），正数向下，负数向上 */
+    offsetTop?: number;
+}
+/**
+ * 拖拽高亮区域的全局配置
+ */
+export interface DragOverlayConfig {
+    /** 列内插入（before 表示在区块上方插入，after 表示在区块下方插入） */
+    columnInsert?: {
+        before?: ColumnInsertConfig;
+        after?: ColumnInsertConfig;
+    };
+    /** 列边缘（left 表示在左侧新建列，right 表示在右侧新建列） */
+    columnEdge?: {
+        left?: ColumnEdgeConfig;
+        right?: ColumnEdgeConfig;
+    };
+    /** 行间隙（above 表示在行上方插入，below 表示在行下方插入） */
+    rowGap?: {
+        above?: RowGapConfig;
+        below?: RowGapConfig;
+    };
+}
+export interface LayoutSnapshot {
+    slots: LayoutSlot[];
+    containerRect: Rect;
+}
+export interface BuildLayoutSnapshotOptions {
+    container: HTMLElement | null;
+}
+export declare const buildLayoutSnapshot: ({ container }: BuildLayoutSnapshotOptions) => LayoutSnapshot;
+export declare const getSlotKey: (slot: LayoutSlot) => string;
+export declare const resolveDropIntent: (point: Point, slots: LayoutSlot[]) => LayoutSlot | null;
+export interface SimulateLayoutOptions {
+    slot: LayoutSlot;
+    sourceUid: string;
+    layout: GridLayoutData;
+    generateRowId?: () => string;
+}
+export declare const simulateLayoutForSlot: ({ slot, sourceUid, layout, generateRowId, }: SimulateLayoutOptions) => GridLayoutData;

package/lib/components/dnd/gridDragPlanner.js

@@ -0,0 +1,497 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var gridDragPlanner_exports = {};
+__export(gridDragPlanner_exports, {
+  COLUMN_EDGE_MAX_WIDTH: () => COLUMN_EDGE_MAX_WIDTH,
+  COLUMN_EDGE_MIN_WIDTH: () => COLUMN_EDGE_MIN_WIDTH,
+  COLUMN_EDGE_WIDTH_RATIO: () => COLUMN_EDGE_WIDTH_RATIO,
+  DEFAULT_GRID_COLUMNS: () => DEFAULT_GRID_COLUMNS,
+  MAX_SLOT_THICKNESS: () => MAX_SLOT_THICKNESS,
+  MIN_SLOT_THICKNESS: () => MIN_SLOT_THICKNESS,
+  buildLayoutSnapshot: () => buildLayoutSnapshot,
+  getSlotKey: () => getSlotKey,
+  resolveDropIntent: () => resolveDropIntent,
+  simulateLayoutForSlot: () => simulateLayoutForSlot
+});
+module.exports = __toCommonJS(gridDragPlanner_exports);
+var import_shared = require("@formily/shared");
+var import_lodash = __toESM(require("lodash"));
+const DEFAULT_GRID_COLUMNS = 24;
+const MIN_SLOT_THICKNESS = 16;
+const MAX_SLOT_THICKNESS = 48;
+const COLUMN_EDGE_MIN_WIDTH = 12;
+const COLUMN_EDGE_MAX_WIDTH = 28;
+const COLUMN_EDGE_WIDTH_RATIO = 0.2;
+const COLUMN_INSERT_THICKNESS_RATIO = 0.5;
+const ROW_GAP_HEIGHT_RATIO = 0.33;
+const toRect = /* @__PURE__ */ __name((domRect) => ({
+  top: domRect.top,
+  left: domRect.left,
+  width: domRect.width,
+  height: domRect.height
+}), "toRect");
+const clampSlotHeight = /* @__PURE__ */ __name((value) => Math.max(MIN_SLOT_THICKNESS, Math.min(MAX_SLOT_THICKNESS, value)), "clampSlotHeight");
+const createRect = /* @__PURE__ */ __name(({ top, left, width, height }) => ({
+  top,
+  left,
+  width,
+  height
+}), "createRect");
+const offsetRect = /* @__PURE__ */ __name((rect, offsets) => ({
+  top: offsets.top ?? rect.top,
+  left: offsets.left ?? rect.left,
+  width: offsets.width ?? rect.width,
+  height: offsets.height ?? rect.height
+}), "offsetRect");
+const createRowGapRect = /* @__PURE__ */ __name((source, position, containerRect) => {
+  const baseHeight = clampSlotHeight(source.height * ROW_GAP_HEIGHT_RATIO);
+  if (position === "above") {
+    const available2 = source.top - containerRect.top;
+    const height2 = clampSlotHeight(Math.max(baseHeight, available2));
+    return createRect({
+      top: source.top - height2,
+      left: containerRect.left,
+      width: containerRect.width,
+      height: height2
+    });
+  }
+  const available = containerRect.top + containerRect.height - (source.top + source.height);
+  const height = clampSlotHeight(Math.max(baseHeight, available));
+  return createRect({
+    top: source.top + source.height,
+    left: containerRect.left,
+    width: containerRect.width,
+    height
+  });
+}, "createRowGapRect");
+const createColumnEdgeRect = /* @__PURE__ */ __name((source, side) => {
+  const width = Math.min(
+    Math.max(COLUMN_EDGE_MIN_WIDTH, source.width * COLUMN_EDGE_WIDTH_RATIO),
+    COLUMN_EDGE_MAX_WIDTH
+  );
+  return createRect({
+    top: source.top,
+    left: side === "left" ? source.left : source.left + source.width - width,
+    width,
+    height: source.height
+  });
+}, "createColumnEdgeRect");
+const createColumnInsertRect = /* @__PURE__ */ __name((itemRect, position) => {
+  const thickness = clampSlotHeight(itemRect.height * COLUMN_INSERT_THICKNESS_RATIO);
+  if (position === "before") {
+    return createRect({
+      top: itemRect.top,
+      left: itemRect.left,
+      width: itemRect.width,
+      height: thickness
+    });
+  }
+  return createRect({
+    top: itemRect.top + itemRect.height - thickness,
+    left: itemRect.left,
+    width: itemRect.width,
+    height: thickness
+  });
+}, "createColumnInsertRect");
+const expandColumnRect = /* @__PURE__ */ __name((columnRect) => ({
+  top: columnRect.top,
+  left: columnRect.left,
+  width: columnRect.width,
+  height: Math.max(columnRect.height, MIN_SLOT_THICKNESS)
+}), "expandColumnRect");
+const buildLayoutSnapshot = /* @__PURE__ */ __name(({ container }) => {
+  if (!container) {
+    return {
+      slots: [],
+      containerRect: { top: 0, left: 0, width: 0, height: 0 }
+    };
+  }
+  const containerRect = toRect(container.getBoundingClientRect());
+  const slots = [];
+  const allRowElements = Array.from(container.querySelectorAll("[data-grid-row-id]"));
+  const rowElements = allRowElements.filter((el) => {
+    const htmlEl = el;
+    let parent = htmlEl.parentElement;
+    while (parent && parent !== container) {
+      if (parent.hasAttribute("data-grid-row-id")) {
+        return false;
+      }
+      parent = parent.parentElement;
+    }
+    return true;
+  });
+  if (rowElements.length === 0) {
+    slots.push({
+      type: "empty-row",
+      rect: createRect({
+        top: containerRect.top,
+        left: containerRect.left,
+        width: containerRect.width,
+        height: Math.max(containerRect.height, MIN_SLOT_THICKNESS)
+      })
+    });
+    return { slots, containerRect };
+  }
+  rowElements.forEach((rowElement, rowIndex) => {
+    const rowId = rowElement.dataset.gridRowId;
+    if (!rowId) {
+      return;
+    }
+    const rowRect = toRect(rowElement.getBoundingClientRect());
+    if (rowIndex === 0) {
+      slots.push({
+        type: "row-gap",
+        targetRowId: rowId,
+        position: "above",
+        rect: createRowGapRect(rowRect, "above", containerRect)
+      });
+    }
+    const columnElements = Array.from(
+      container.querySelectorAll(`[data-grid-column-row-id="${rowId}"][data-grid-column-index]`)
+    );
+    const sortedColumns = columnElements.sort((a, b) => {
+      const indexA = Number(a.dataset.gridColumnIndex || 0);
+      const indexB = Number(b.dataset.gridColumnIndex || 0);
+      return indexA - indexB;
+    });
+    sortedColumns.forEach((columnElement) => {
+      const columnIndex = Number(columnElement.dataset.gridColumnIndex || 0);
+      const columnRect = toRect(columnElement.getBoundingClientRect());
+      slots.push({
+        type: "column-edge",
+        rowId,
+        columnIndex,
+        direction: "left",
+        rect: createColumnEdgeRect(columnRect, "left")
+      });
+      slots.push({
+        type: "column-edge",
+        rowId,
+        columnIndex,
+        direction: "right",
+        rect: createColumnEdgeRect(columnRect, "right")
+      });
+      const itemElements = Array.from(
+        columnElement.querySelectorAll(`[data-grid-item-row-id="${rowId}"][data-grid-column-index="${columnIndex}"]`)
+      );
+      const sortedItems = itemElements.sort((a, b) => {
+        const indexA = Number(a.dataset.gridItemIndex || 0);
+        const indexB = Number(b.dataset.gridItemIndex || 0);
+        return indexA - indexB;
+      });
+      if (sortedItems.length === 0) {
+        slots.push({
+          type: "empty-column",
+          rowId,
+          columnIndex,
+          rect: expandColumnRect(columnRect)
+        });
+        return;
+      }
+      const firstItemRect = toRect(sortedItems[0].getBoundingClientRect());
+      slots.push({
+        type: "column",
+        rowId,
+        columnIndex,
+        insertIndex: 0,
+        position: "before",
+        rect: createColumnInsertRect(firstItemRect, "before")
+      });
+      sortedItems.forEach((itemElement, itemIndex) => {
+        const itemRect = toRect(itemElement.getBoundingClientRect());
+        slots.push({
+          type: "column",
+          rowId,
+          columnIndex,
+          insertIndex: itemIndex + 1,
+          position: "after",
+          rect: createColumnInsertRect(itemRect, "after")
+        });
+      });
+    });
+    slots.push({
+      type: "row-gap",
+      targetRowId: rowId,
+      position: "below",
+      rect: createRowGapRect(rowRect, "below", containerRect)
+    });
+  });
+  return {
+    slots,
+    containerRect
+  };
+}, "buildLayoutSnapshot");
+const getSlotKey = /* @__PURE__ */ __name((slot) => {
+  switch (slot.type) {
+    case "column":
+      return `${slot.type}:${slot.rowId}:${slot.columnIndex}:${slot.insertIndex}:${slot.position}`;
+    case "column-edge":
+      return `${slot.type}:${slot.rowId}:${slot.columnIndex}:${slot.direction}`;
+    case "row-gap":
+      return `${slot.type}:${slot.targetRowId}:${slot.position}`;
+    case "empty-row":
+      return `${slot.type}`;
+    case "empty-column":
+      return `${slot.type}:${slot.rowId}:${slot.columnIndex}`;
+  }
+}, "getSlotKey");
+const isPointInsideRect = /* @__PURE__ */ __name((point, rect) => {
+  return point.x >= rect.left && point.x <= rect.left + rect.width && point.y >= rect.top && point.y <= rect.top + rect.height;
+}, "isPointInsideRect");
+const distanceToRect = /* @__PURE__ */ __name((point, rect) => {
+  const dx = Math.max(rect.left - point.x, 0, point.x - (rect.left + rect.width));
+  const dy = Math.max(rect.top - point.y, 0, point.y - (rect.top + rect.height));
+  return Math.sqrt(dx * dx + dy * dy);
+}, "distanceToRect");
+const resolveDropIntent = /* @__PURE__ */ __name((point, slots) => {
+  if (!slots.length) {
+    return null;
+  }
+  const insideSlot = slots.find((slot) => isPointInsideRect(point, slot.rect));
+  if (insideSlot) {
+    return insideSlot;
+  }
+  let closest = null;
+  let minDistance = Number.POSITIVE_INFINITY;
+  slots.forEach((slot) => {
+    const distance = distanceToRect(point, slot.rect);
+    if (distance < minDistance) {
+      minDistance = distance;
+      closest = slot;
+    }
+  });
+  return closest;
+}, "resolveDropIntent");
+const findUidPosition = /* @__PURE__ */ __name((rows, uidValue) => {
+  for (const [rowId, columns] of Object.entries(rows)) {
+    for (let columnIndex = 0; columnIndex < columns.length; columnIndex += 1) {
+      const column = columns[columnIndex];
+      const itemIndex = column.indexOf(uidValue);
+      if (itemIndex !== -1) {
+        return { rowId, columnIndex, itemIndex };
+      }
+    }
+  }
+  return null;
+}, "findUidPosition");
+const removeItemFromLayout = /* @__PURE__ */ __name((layout, uidValue) => {
+  const position = findUidPosition(layout.rows, uidValue);
+  if (!position) {
+    return;
+  }
+  const { rowId, columnIndex, itemIndex } = position;
+  const columns = layout.rows[rowId];
+  const column = columns == null ? void 0 : columns[columnIndex];
+  if (!column) {
+    return;
+  }
+  column.splice(itemIndex, 1);
+  if (column.length === 0) {
+    columns.splice(columnIndex, 1);
+    if (layout.sizes[rowId]) {
+      layout.sizes[rowId].splice(columnIndex, 1);
+    }
+  }
+  if (columns.length === 0) {
+    delete layout.rows[rowId];
+    delete layout.sizes[rowId];
+    return;
+  }
+  normalizeRowSizes(rowId, layout);
+}, "removeItemFromLayout");
+const toIntSizes = /* @__PURE__ */ __name((weights, count) => {
+  if (count === 0) {
+    return [];
+  }
+  const normalizedWeights = weights.map((weight) => Number.isFinite(weight) && weight > 0 ? weight : 1);
+  const total = normalizedWeights.reduce((sum, weight) => sum + weight, 0) || count;
+  const ratios = normalizedWeights.map((weight) => weight / total);
+  const raw = ratios.map((ratio) => ratio * DEFAULT_GRID_COLUMNS);
+  const floors = raw.map((value) => Math.max(1, Math.floor(value)));
+  let remainder = DEFAULT_GRID_COLUMNS - floors.reduce((sum, value) => sum + value, 0);
+  if (remainder > 0) {
+    const decimals = raw.map((value, index) => ({ index, decimal: value - Math.floor(value) })).sort((a, b) => b.decimal - a.decimal);
+    let pointer = 0;
+    while (remainder > 0 && decimals.length) {
+      const target = decimals[pointer % decimals.length].index;
+      floors[target] += 1;
+      remainder -= 1;
+      pointer += 1;
+    }
+  } else if (remainder < 0) {
+    const decimals = raw.map((value, index) => ({ index, decimal: value - Math.floor(value) })).sort((a, b) => a.decimal - b.decimal);
+    let pointer = 0;
+    while (remainder < 0 && decimals.length) {
+      const target = decimals[pointer % decimals.length].index;
+      if (floors[target] > 1) {
+        floors[target] -= 1;
+        remainder += 1;
+      }
+      pointer += 1;
+    }
+  }
+  const diff = DEFAULT_GRID_COLUMNS - floors.reduce((sum, value) => sum + value, 0);
+  if (diff !== 0 && floors.length) {
+    floors[floors.length - 1] += diff;
+  }
+  return floors;
+}, "toIntSizes");
+const normalizeRowSizes = /* @__PURE__ */ __name((rowId, layout) => {
+  const columns = layout.rows[rowId];
+  if (!columns || columns.length === 0) {
+    delete layout.sizes[rowId];
+    return;
+  }
+  const current = layout.sizes[rowId] || new Array(columns.length).fill(DEFAULT_GRID_COLUMNS / columns.length);
+  const weights = current.length === columns.length ? current : new Array(columns.length).fill(DEFAULT_GRID_COLUMNS / columns.length);
+  layout.sizes[rowId] = toIntSizes(weights, columns.length);
+}, "normalizeRowSizes");
+const insertRow = /* @__PURE__ */ __name((rows, referenceRowId, newRowId, position, value) => {
+  const entries = Object.entries(rows);
+  const result = {};
+  let inserted = false;
+  entries.forEach(([rowId, rowValue]) => {
+    if (!inserted && position === "before" && rowId === referenceRowId) {
+      result[newRowId] = value;
+      inserted = true;
+    }
+    result[rowId] = rowValue;
+    if (!inserted && position === "after" && rowId === referenceRowId) {
+      result[newRowId] = value;
+      inserted = true;
+    }
+  });
+  if (!inserted) {
+    result[newRowId] = value;
+  }
+  return result;
+}, "insertRow");
+const distributeSizesWithNewColumn = /* @__PURE__ */ __name((sizes, insertIndex, columnCount) => {
+  if (!sizes || sizes.length === 0) {
+    return toIntSizes(new Array(columnCount).fill(1), columnCount);
+  }
+  const normalized = sizes.map((size) => Number.isFinite(size) && size > 0 ? size : 1);
+  const referenceIndex = Math.max(0, Math.min(insertIndex, normalized.length - 1));
+  const reference = normalized[referenceIndex] ?? 1;
+  const weights = [...normalized];
+  weights.splice(insertIndex, 0, reference);
+  return toIntSizes(weights, columnCount);
+}, "distributeSizesWithNewColumn");
+const simulateLayoutForSlot = /* @__PURE__ */ __name(({
+  slot,
+  sourceUid,
+  layout,
+  generateRowId
+}) => {
+  const cloned = {
+    rows: import_lodash.default.cloneDeep(layout.rows),
+    sizes: import_lodash.default.cloneDeep(layout.sizes)
+  };
+  removeItemFromLayout(cloned, sourceUid);
+  const createRowId = generateRowId ?? import_shared.uid;
+  switch (slot.type) {
+    case "column": {
+      const columns = cloned.rows[slot.rowId] || [];
+      if (!cloned.rows[slot.rowId]) {
+        cloned.rows[slot.rowId] = columns;
+      }
+      if (!columns[slot.columnIndex]) {
+        columns[slot.columnIndex] = [];
+      }
+      const targetColumn = columns[slot.columnIndex];
+      targetColumn.splice(slot.insertIndex, 0, sourceUid);
+      normalizeRowSizes(slot.rowId, cloned);
+      break;
+    }
+    case "empty-column": {
+      const columns = cloned.rows[slot.rowId] || [];
+      if (!cloned.rows[slot.rowId]) {
+        cloned.rows[slot.rowId] = columns;
+      }
+      if (!columns[slot.columnIndex]) {
+        columns[slot.columnIndex] = [];
+      }
+      columns[slot.columnIndex] = [sourceUid];
+      normalizeRowSizes(slot.rowId, cloned);
+      break;
+    }
+    case "column-edge": {
+      const columns = cloned.rows[slot.rowId] || [];
+      if (!cloned.rows[slot.rowId]) {
+        cloned.rows[slot.rowId] = columns;
+      }
+      const insertIndex = slot.direction === "left" ? slot.columnIndex : slot.columnIndex + 1;
+      columns.splice(insertIndex, 0, [sourceUid]);
+      cloned.sizes[slot.rowId] = distributeSizesWithNewColumn(cloned.sizes[slot.rowId], insertIndex, columns.length);
+      normalizeRowSizes(slot.rowId, cloned);
+      break;
+    }
+    case "row-gap": {
+      const newRowId = createRowId();
+      const rowPosition = slot.position === "above" ? "before" : "after";
+      cloned.rows = insertRow(cloned.rows, slot.targetRowId, newRowId, rowPosition, [[sourceUid]]);
+      cloned.sizes[newRowId] = [DEFAULT_GRID_COLUMNS];
+      break;
+    }
+    case "empty-row": {
+      const newRowId = createRowId();
+      cloned.rows = {
+        ...cloned.rows,
+        [newRowId]: [[sourceUid]]
+      };
+      cloned.sizes[newRowId] = [DEFAULT_GRID_COLUMNS];
+      break;
+    }
+    default:
+      break;
+  }
+  return cloned;
+}, "simulateLayoutForSlot");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  COLUMN_EDGE_MAX_WIDTH,
+  COLUMN_EDGE_MIN_WIDTH,
+  COLUMN_EDGE_WIDTH_RATIO,
+  DEFAULT_GRID_COLUMNS,
+  MAX_SLOT_THICKNESS,
+  MIN_SLOT_THICKNESS,
+  buildLayoutSnapshot,
+  getSlotKey,
+  resolveDropIntent,
+  simulateLayoutForSlot
+});

package/lib/components/dnd/index.d.ts

@@ -10,8 +10,8 @@ import { DndContextProps } from '@dnd-kit/core';
 import React, { FC } from 'react';
 import { FlowModel } from '../../models';
 import { PersistOptions } from '../../types';
-export * from './getMousePositionOnElement';
-export * from './moveBlock';
+export * from './findModelUidPosition';
+export * from './gridDragPlanner';
 export declare const EMPTY_COLUMN_UID = "EMPTY_COLUMN";
 export declare const DragHandler: FC<{
     model: FlowModel;

package/lib/components/dnd/index.js

@@ -49,14 +49,14 @@ var import_core = require("@dnd-kit/core");
 var import_react = __toESM(require("react"));
 var import_react_dom = require("react-dom");
 var import_provider = require("../../provider");
-__reExport(dnd_exports, require("./getMousePositionOnElement"), module.exports);
-__reExport(dnd_exports, require("./moveBlock"), module.exports);
+__reExport(dnd_exports, require("./findModelUidPosition"), module.exports);
+__reExport(dnd_exports, require("./gridDragPlanner"), module.exports);
 const EMPTY_COLUMN_UID = "EMPTY_COLUMN";
 const DragHandler = /* @__PURE__ */ __name(({
   model,
   children = /* @__PURE__ */ import_react.default.createElement(import_icons.DragOutlined, null)
 }) => {
-  const { attributes, listeners, setNodeRef, isDragging } = (0, import_core.useDraggable)({ id: model.uid });
+  const { attributes, listeners, setNodeRef } = (0, import_core.useDraggable)({ id: model.uid });
   return /* @__PURE__ */ import_react.default.createElement(
     "span",
     {
@@ -159,6 +159,6 @@ const DndProvider = /* @__PURE__ */ __name(({
   DragHandler,
   Droppable,
   EMPTY_COLUMN_UID,
-  ...require("./getMousePositionOnElement"),
-  ...require("./moveBlock")
+  ...require("./findModelUidPosition"),
+  ...require("./gridDragPlanner")
 });

package/lib/components/settings/wrappers/contextual/StepSettingsDialog.js

@@ -59,7 +59,7 @@ const openStepSettingsDialog = /* @__PURE__ */ __name(async ({
   uiModeProps,
   cleanup
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f;
   const t = (0, import_utils.getT)(model);
   const message = model.context.message;
   if (!model) {
@@ -132,6 +132,12 @@ const openStepSettingsDialog = /* @__PURE__ */ __name(async ({
     width: dialogWidth,
     destroyOnClose: true,
     ...(0, import_reactive.toJS)(uiModeProps),
+    // 透传 navigation，便于变量元信息根据真实视图栈推断父级弹窗
+    inputArgs: (0, import_utils.buildSettingsViewInputArgs)(
+      model,
+      { ...((_e = (0, import_reactive.toJS)(uiModeProps)) == null ? void 0 : _e.inputArgs) || {}, __isSettingsPopup: true },
+      { navigationOverride: (_f = ctx == null ? void 0 : ctx.view) == null ? void 0 : _f.navigation }
+    ),
     onClose: /* @__PURE__ */ __name(() => {
       if (cleanup) {
         cleanup();