@nocobase/flow-engine 2.0.0-alpha.3 → 2.0.0-alpha.4

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/flowContext.js

@@ -1043,10 +1043,11 @@ const _FlowModelContext = class _FlowModelContext extends BaseFlowModelContext {
     this.defineProperty("model", {
       value: model
     });
+    const stableRef = (0, import_react.createRef)();
     this.defineProperty("ref", {
       get: /* @__PURE__ */ __name(() => {
         this.model["_refCreated"] = true;
-        return (0, import_react.createRef)();
+        return stableRef;
       }, "get")
     });
     this.defineMethod("openView", async function(uid, options) {
@@ -1156,10 +1157,11 @@ const _FlowForkModelContext = class _FlowForkModelContext extends BaseFlowModelC
     this.defineProperty("model", {
       get: /* @__PURE__ */ __name(() => this.fork, "get")
     });
+    const stableRef = (0, import_react.createRef)();
     this.defineProperty("ref", {
       get: /* @__PURE__ */ __name(() => {
         this.fork["_refCreated"] = true;
-        return (0, import_react.createRef)();
+        return stableRef;
       }, "get")
     });
     this.defineMethod("runjs", async (code, variables, options) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/flow-engine",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "private": false,
   "description": "A standalone flow engine for NocoBase, managing workflows, models, and actions.",
   "main": "lib/index.js",
@@ -33,5 +33,5 @@
   ],
   "author": "NocoBase Team",
   "license": "AGPL-3.0",
-  "gitHead": "8efc23aa78058d871e98a91419f3c4a61762cc15"
+  "gitHead": "54f3cab47e7efbdc73377014d05f5fc66a4affbb"
 }

package/src/components/__tests__/gridDragPlanner.test.ts

@@ -0,0 +1,494 @@
+/**
+ * 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.
+ */
+
+import { describe, expect, it } from 'vitest';
+import {
+  GridLayoutData,
+  LayoutSlot,
+  simulateLayoutForSlot,
+  getSlotKey,
+  resolveDropIntent,
+  Point,
+} from '../dnd/gridDragPlanner';
+
+const rect = { top: 0, left: 0, width: 100, height: 100 };
+
+const createLayout = (rows: Record<string, string[][]>, sizes: Record<string, number[]>): GridLayoutData => ({
+  rows,
+  sizes,
+});
+
+describe('getSlotKey', () => {
+  it('should generate unique key for column slot', () => {
+    const slot: LayoutSlot = {
+      type: 'column',
+      rowId: 'row1',
+      columnIndex: 0,
+      insertIndex: 1,
+      position: 'before',
+      rect,
+    };
+
+    const key = getSlotKey(slot);
+    expect(key).toBe('column:row1:0:1:before');
+  });
+
+  it('should generate unique key for column-edge slot', () => {
+    const slot: LayoutSlot = {
+      type: 'column-edge',
+      rowId: 'row1',
+      columnIndex: 2,
+      direction: 'left',
+      rect,
+    };
+
+    const key = getSlotKey(slot);
+    expect(key).toBe('column-edge:row1:2:left');
+  });
+
+  it('should generate unique key for row-gap slot', () => {
+    const slot: LayoutSlot = {
+      type: 'row-gap',
+      targetRowId: 'row2',
+      position: 'above',
+      rect,
+    };
+
+    const key = getSlotKey(slot);
+    expect(key).toBe('row-gap:row2:above');
+  });
+
+  it('should generate unique key for empty-row slot', () => {
+    const slot: LayoutSlot = {
+      type: 'empty-row',
+      rect,
+    };
+
+    const key = getSlotKey(slot);
+    expect(key).toBe('empty-row');
+  });
+
+  it('should generate unique key for empty-column slot', () => {
+    const slot: LayoutSlot = {
+      type: 'empty-column',
+      rowId: 'row1',
+      columnIndex: 0,
+      rect,
+    };
+
+    const key = getSlotKey(slot);
+    expect(key).toBe('empty-column:row1:0');
+  });
+});
+
+describe('resolveDropIntent', () => {
+  it('should return closest slot when point is outside all slots', () => {
+    const slots: LayoutSlot[] = [
+      {
+        type: 'column',
+        rowId: 'row1',
+        columnIndex: 0,
+        insertIndex: 0,
+        position: 'before',
+        rect: { top: 100, left: 100, width: 50, height: 50 },
+      },
+    ];
+
+    const point: Point = { x: 0, y: 0 };
+    const result = resolveDropIntent(point, slots);
+    // Should return the closest slot, not null
+    expect(result).toEqual(slots[0]);
+  });
+
+  it('should return the slot that contains the point', () => {
+    const targetSlot: LayoutSlot = {
+      type: 'column',
+      rowId: 'row1',
+      columnIndex: 0,
+      insertIndex: 0,
+      position: 'before',
+      rect: { top: 100, left: 100, width: 50, height: 50 },
+    };
+
+    const slots: LayoutSlot[] = [
+      {
+        type: 'row-gap',
+        targetRowId: 'row0',
+        position: 'above',
+        rect: { top: 50, left: 100, width: 50, height: 20 },
+      },
+      targetSlot,
+      {
+        type: 'column-edge',
+        rowId: 'row1',
+        columnIndex: 1,
+        direction: 'right',
+        rect: { top: 100, left: 200, width: 20, height: 50 },
+      },
+    ];
+
+    const point: Point = { x: 125, y: 125 };
+    const result = resolveDropIntent(point, slots);
+    expect(result).toEqual(targetSlot);
+  });
+
+  it('should return first matching slot when multiple slots contain the point', () => {
+    const firstSlot: LayoutSlot = {
+      type: 'empty-row',
+      rect: { top: 0, left: 0, width: 500, height: 500 },
+    };
+
+    const secondSlot: LayoutSlot = {
+      type: 'column',
+      rowId: 'row1',
+      columnIndex: 0,
+      insertIndex: 0,
+      position: 'before',
+      rect: { top: 100, left: 100, width: 50, height: 30 },
+    };
+
+    const slots: LayoutSlot[] = [firstSlot, secondSlot];
+
+    const point: Point = { x: 125, y: 110 };
+    const result = resolveDropIntent(point, slots);
+    // Returns first slot that contains the point
+    expect(result).toEqual(firstSlot);
+  });
+
+  it('should handle empty-column slot correctly', () => {
+    const emptyColumnSlot: LayoutSlot = {
+      type: 'empty-column',
+      rowId: 'row1',
+      columnIndex: 0,
+      rect: { top: 100, left: 100, width: 100, height: 200 },
+    };
+
+    const slots: LayoutSlot[] = [emptyColumnSlot];
+
+    const point: Point = { x: 150, y: 150 };
+    const result = resolveDropIntent(point, slots);
+    expect(result).toEqual(emptyColumnSlot);
+  });
+
+  it('should return null when slots array is empty', () => {
+    const slots: LayoutSlot[] = [];
+    const point: Point = { x: 100, y: 100 };
+    const result = resolveDropIntent(point, slots);
+    expect(result).toBeNull();
+  });
+
+  it('should find closest slot when point is outside', () => {
+    const slot1: LayoutSlot = {
+      type: 'column',
+      rowId: 'row1',
+      columnIndex: 0,
+      insertIndex: 0,
+      position: 'before',
+      rect: { top: 100, left: 100, width: 50, height: 50 },
+    };
+
+    const slot2: LayoutSlot = {
+      type: 'column',
+      rowId: 'row2',
+      columnIndex: 0,
+      insertIndex: 0,
+      position: 'before',
+      rect: { top: 200, left: 200, width: 50, height: 50 },
+    };
+
+    const slots: LayoutSlot[] = [slot1, slot2];
+
+    // Point closer to slot1
+    const point: Point = { x: 90, y: 90 };
+    const result = resolveDropIntent(point, slots);
+    expect(result).toEqual(slot1);
+  });
+});
+
+describe('simulateLayoutForSlot', () => {
+  it('removes source from original position before inserting into column slot', () => {
+    const layout = createLayout(
+      {
+        rowA: [['block-1', 'block-2']],
+      },
+      {
+        rowA: [24],
+      },
+    );
+
+    const slot: LayoutSlot = {
+      type: 'column',
+      rowId: 'rowA',
+      columnIndex: 0,
+      insertIndex: 0,
+      position: 'before',
+      rect,
+    };
+
+    const result = simulateLayoutForSlot({ slot, sourceUid: 'block-2', layout });
+
+    expect(result.rows.rowA).toEqual([['block-2', 'block-1']]);
+    expect(layout.rows.rowA).toEqual([['block-1', 'block-2']]);
+  });
+
+  it('inserts new column when dropping on column edge and redistributes sizes', () => {
+    const layout = createLayout(
+      {
+        rowA: [['a'], ['b']],
+      },
+      {
+        rowA: [12, 12],
+      },
+    );
+
+    const slot: LayoutSlot = {
+      type: 'column-edge',
+      rowId: 'rowA',
+      columnIndex: 0,
+      direction: 'left',
+      rect,
+    };
+
+    const result = simulateLayoutForSlot({ slot, sourceUid: 'c', layout });
+
+    expect(result.rows.rowA.length).toBe(3);
+    expect(result.rows.rowA[0]).toEqual(['c']);
+    expect(result.rows.rowA[1]).toEqual(['a']);
+    expect(result.rows.rowA[2]).toEqual(['b']);
+    expect(result.sizes.rowA.length).toBe(3);
+    expect(result.sizes.rowA.reduce((sum, value) => sum + value, 0)).toBe(24);
+  });
+
+  it('creates a new row above target row when dropping on row-gap slot', () => {
+    const layout = createLayout(
+      {
+        rowA: [['a']],
+        rowB: [['b']],
+      },
+      {
+        rowA: [24],
+        rowB: [24],
+      },
+    );
+
+    const slot: LayoutSlot = {
+      type: 'row-gap',
+      targetRowId: 'rowB',
+      position: 'above',
+      rect,
+    };
+
+    const result = simulateLayoutForSlot({
+      slot,
+      sourceUid: 'c',
+      layout,
+      generateRowId: () => 'row-inserted',
+    });
+
+    expect(Object.keys(result.rows)).toEqual(['rowA', 'row-inserted', 'rowB']);
+    expect(result.rows['row-inserted']).toEqual([['c']]);
+    expect(result.sizes['row-inserted']).toEqual([24]);
+  });
+
+  it('creates a new row when dropping into empty container slot', () => {
+    const layout = createLayout({}, {});
+
+    const slot: LayoutSlot = {
+      type: 'empty-row',
+      rect,
+    };
+
+    const result = simulateLayoutForSlot({
+      slot,
+      sourceUid: 'block-x',
+      layout,
+      generateRowId: () => 'row-new',
+    });
+
+    expect(result.rows['row-new']).toEqual([['block-x']]);
+    expect(result.sizes['row-new']).toEqual([24]);
+  });
+
+  it('handles column slot with after position', () => {
+    const layout = createLayout(
+      {
+        rowA: [['block-1', 'block-2']],
+      },
+      {
+        rowA: [24],
+      },
+    );
+
+    const slot: LayoutSlot = {
+      type: 'column',
+      rowId: 'rowA',
+      columnIndex: 0,
+      insertIndex: 1,
+      position: 'after',
+      rect,
+    };
+
+    const result = simulateLayoutForSlot({ slot, sourceUid: 'block-3', layout });
+
+    expect(result.rows.rowA).toEqual([['block-1', 'block-3', 'block-2']]);
+  });
+
+  it('handles column-edge slot on the right', () => {
+    const layout = createLayout(
+      {
+        rowA: [['a'], ['b']],
+      },
+      {
+        rowA: [12, 12],
+      },
+    );
+
+    const slot: LayoutSlot = {
+      type: 'column-edge',
+      rowId: 'rowA',
+      columnIndex: 1,
+      direction: 'right',
+      rect,
+    };
+
+    const result = simulateLayoutForSlot({ slot, sourceUid: 'c', layout });
+
+    expect(result.rows.rowA.length).toBe(3);
+    expect(result.rows.rowA[2]).toEqual(['c']);
+  });
+
+  it('handles row-gap slot below position', () => {
+    const layout = createLayout(
+      {
+        rowA: [['a']],
+        rowB: [['b']],
+      },
+      {
+        rowA: [24],
+        rowB: [24],
+      },
+    );
+
+    const slot: LayoutSlot = {
+      type: 'row-gap',
+      targetRowId: 'rowA',
+      position: 'below',
+      rect,
+    };
+
+    const result = simulateLayoutForSlot({
+      slot,
+      sourceUid: 'c',
+      layout,
+      generateRowId: () => 'row-inserted',
+    });
+
+    expect(Object.keys(result.rows)).toEqual(['rowA', 'row-inserted', 'rowB']);
+  });
+
+  it('handles empty-column slot by replacing empty column', () => {
+    const layout = createLayout(
+      {
+        rowA: [['EMPTY_COLUMN'], ['block-b']],
+      },
+      {
+        rowA: [12, 12],
+      },
+    );
+
+    const slot: LayoutSlot = {
+      type: 'empty-column',
+      rowId: 'rowA',
+      columnIndex: 0,
+      rect,
+    };
+
+    const result = simulateLayoutForSlot({ slot, sourceUid: 'new-block', layout });
+
+    expect(result.rows.rowA[0]).toEqual(['new-block']);
+    expect(result.rows.rowA[1]).toEqual(['block-b']);
+  });
+
+  it('removes source from multiple locations', () => {
+    const layout = createLayout(
+      {
+        rowA: [['block-1', 'block-2']],
+        rowB: [['block-3', 'block-4']],
+      },
+      {
+        rowA: [24],
+        rowB: [24],
+      },
+    );
+
+    const slot: LayoutSlot = {
+      type: 'column',
+      rowId: 'rowA',
+      columnIndex: 0,
+      insertIndex: 0,
+      position: 'before',
+      rect,
+    };
+
+    const result = simulateLayoutForSlot({ slot, sourceUid: 'block-3', layout });
+
+    expect(result.rows.rowA[0]).toContain('block-3');
+    expect(result.rows.rowB[0]).not.toContain('block-3');
+  });
+
+  it('preserves column sizes when inserting into existing column', () => {
+    const layout = createLayout(
+      {
+        rowA: [['a'], ['b'], ['c']],
+      },
+      {
+        rowA: [8, 8, 8],
+      },
+    );
+
+    const slot: LayoutSlot = {
+      type: 'column',
+      rowId: 'rowA',
+      columnIndex: 1,
+      insertIndex: 0,
+      position: 'before',
+      rect,
+    };
+
+    const result = simulateLayoutForSlot({ slot, sourceUid: 'd', layout });
+
+    expect(result.sizes.rowA).toEqual([8, 8, 8]);
+  });
+
+  it('redistributes sizes proportionally when adding new column via edge', () => {
+    const layout = createLayout(
+      {
+        rowA: [['a'], ['b'], ['c']],
+      },
+      {
+        rowA: [6, 12, 6],
+      },
+    );
+
+    const slot: LayoutSlot = {
+      type: 'column-edge',
+      rowId: 'rowA',
+      columnIndex: 1,
+      direction: 'right',
+      rect,
+    };
+
+    const result = simulateLayoutForSlot({ slot, sourceUid: 'd', layout });
+
+    expect(result.rows.rowA.length).toBe(4);
+    expect(result.sizes.rowA.length).toBe(4);
+    const total = result.sizes.rowA.reduce((sum, size) => sum + size, 0);
+    expect(total).toBe(24);
+  });
+});