@nocobase/client-v2 2.1.0-alpha.25 → 2.1.0-alpha.27

package/src/flow/models/base/__tests__/BlockGridModel.dragOverlayConfig.test.ts

@@ -0,0 +1,44 @@
+/**
+ * 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 { FlowEngine, LayoutSlot } from '@nocobase/flow-engine';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { BlockGridModel } from '../BlockGridModel';
+
+describe('BlockGridModel dragOverlayConfig', () => {
+  let model: BlockGridModel;
+
+  beforeEach(() => {
+    const engine = new FlowEngine();
+    engine.registerModels({ BlockGridModel });
+    model = engine.createModel<BlockGridModel>({ use: 'BlockGridModel' });
+  });
+
+  it('applies block insert overlay offsets from dragOverlayConfig', () => {
+    const beforeSlot: LayoutSlot = {
+      type: 'column',
+      rowId: 'row1',
+      columnIndex: 0,
+      insertIndex: 0,
+      position: 'before',
+      rect: { top: 100, left: 50, width: 200, height: 48 },
+    };
+    const afterSlot: LayoutSlot = {
+      type: 'column',
+      rowId: 'row1',
+      columnIndex: 0,
+      insertIndex: 1,
+      position: 'after',
+      rect: { top: 300, left: 50, width: 200, height: 48 },
+    };
+
+    expect((model as any).computeOverlayRect(beforeSlot).top).toBe(88);
+    expect((model as any).computeOverlayRect(afterSlot).top).toBe(312);
+  });
+});

package/src/flow/models/base/__tests__/GridModel.computeOverlayRect.test.ts

@@ -203,6 +203,35 @@ describe('GridModel computeOverlayRect', () => {
     });
   });
 
+  describe('Item-edge slot', () => {
+    it('should apply column-edge config to item-edge overlay', () => {
+      model.dragOverlayConfig = {
+        columnEdge: {
+          right: { width: 24, offsetLeft: 8 },
+        },
+      };
+
+      const slot: LayoutSlot = {
+        type: 'item-edge',
+        rowId: 'row1',
+        columnIndex: 0,
+        itemIndex: 0,
+        itemUid: 'item-1',
+        direction: 'right',
+        rect: { top: 100, left: 250, width: 16, height: 120 },
+      };
+
+      const result = (model as any).computeOverlayRect(slot);
+
+      expect(result).toEqual({
+        top: 100,
+        left: 258,
+        width: 24,
+        height: 120,
+      });
+    });
+  });
+
   describe('Row-gap slot', () => {
     it('should use default rect when no config provided', () => {
       const slot: LayoutSlot = {

package/src/flow/models/base/__tests__/GridModel.dragSnapshotContainer.test.ts

@@ -7,9 +7,9 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import React from 'react';
-import { beforeEach, describe, expect, it } from 'vitest';
 import { FlowEngine } from '@nocobase/flow-engine';
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { GridModel } from '../GridModel';
 
 const createMockRect = ({ top, left, width, height }: { top: number; left: number; width: number; height: number }) => {
@@ -103,5 +103,184 @@ describe('GridModel drag snapshot container', () => {
     (model as any).updateLayoutSnapshot();
 
     expect((model as any).dragState?.slots?.length).toBeGreaterThan(0);
+    model.handleDragCancel({} as any);
+  });
+
+  it('uses native pointer position instead of scroll-adjusted drag delta', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-drag-pointer-position',
+      props: {},
+      structure: {} as any,
+    });
+
+    (model as any).dragState = {
+      sourceUid: 'item-1',
+      snapshot: { rows: {}, sizes: {} },
+      slots: [],
+      containerEl: null,
+      containerRect: { top: 0, left: 0, width: 0, height: 0 },
+      pointerOrigin: { x: 100, y: 100 },
+      pointerPosition: { x: 120, y: 180 },
+      activeSlotKey: null,
+      previewLayout: undefined,
+      refreshTimer: null,
+    };
+
+    const point = (model as any).computePointerPosition({
+      delta: { x: 0, y: 600 },
+      over: null,
+    });
+
+    expect(point).toEqual({ x: 120, y: 180 });
+  });
+
+  it('removes drag document listeners when dragging finishes', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-drag-cleanup',
+      props: {},
+      structure: {} as any,
+    });
+    const cleanupListeners = vi.fn();
+
+    (model as any).dragState = {
+      sourceUid: 'item-1',
+      snapshot: { rows: {}, sizes: {} },
+      slots: [],
+      containerEl: null,
+      containerRect: { top: 0, left: 0, width: 0, height: 0 },
+      activeSlotKey: null,
+      previewLayout: undefined,
+      refreshTimer: null,
+      cleanupListeners,
+    };
+
+    model.handleDragCancel({} as any);
+
+    expect(cleanupListeners).toHaveBeenCalledOnce();
+  });
+
+  it('refreshes drag snapshot after the page scrolls during dragging', () => {
+    vi.useFakeTimers();
+    try {
+      const model = engine.createModel<GridModel>({
+        use: 'GridModel',
+        uid: 'grid-drag-scroll-refresh',
+        props: {},
+        structure: {} as any,
+      });
+      const updateLayoutSnapshot = vi.fn();
+      const refreshPreviewFromPointer = vi.fn();
+
+      (model as any).dragState = {
+        sourceUid: 'item-1',
+        snapshot: { rows: {}, sizes: {} },
+        slots: [],
+        containerEl: null,
+        containerRect: { top: 0, left: 0, width: 0, height: 0 },
+        pointerPosition: { x: 120, y: 180 },
+        activeSlotKey: null,
+        previewLayout: undefined,
+        refreshTimer: null,
+      };
+      (model as any).updateLayoutSnapshot = updateLayoutSnapshot;
+      (model as any).refreshPreviewFromPointer = refreshPreviewFromPointer;
+
+      (model as any).handleDragScroll();
+      vi.advanceTimersByTime(16);
+
+      expect(updateLayoutSnapshot).toHaveBeenCalledOnce();
+      expect(refreshPreviewFromPointer).toHaveBeenCalledOnce();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('uses overlay-sized hit area when resolving drag slot', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-drag-hit-area',
+      props: {},
+      structure: {} as any,
+    });
+
+    model.dragOverlayConfig = {
+      columnEdge: {
+        right: { width: 24, offsetLeft: 8 },
+      },
+    } as any;
+
+    (model as any).dragState = {
+      sourceUid: 'item-1',
+      snapshot: { rows: {}, sizes: {} },
+      slots: [
+        {
+          type: 'column-edge',
+          rowId: 'row-1',
+          columnIndex: 0,
+          direction: 'right',
+          rect: { top: 100, left: 200, width: 16, height: 120 },
+        },
+      ],
+      containerEl: null,
+      containerRect: { top: 0, left: 0, width: 0, height: 0 },
+      activeSlotKey: null,
+      previewLayout: undefined,
+      refreshTimer: null,
+    };
+
+    const resolved = (model as any).resolveDragSlot({ x: 225, y: 140 });
+
+    expect(resolved).toMatchObject({
+      type: 'column-edge',
+      rowId: 'row-1',
+      columnIndex: 0,
+      direction: 'right',
+    });
+  });
+
+  it('keeps overlay coordinates relative to grid root when outer container is scrolled', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-drag-overlay-scroll',
+      props: {},
+      structure: {} as any,
+    });
+    const container = document.createElement('div');
+    container.scrollTop = 40;
+    container.scrollLeft = 12;
+    (model.gridContainerRef as any).current = container;
+
+    (model as any).dragState = {
+      sourceUid: 'item-1',
+      snapshot: {
+        rows: { 'row-1': [['item-1', 'item-2']] },
+        sizes: { 'row-1': [24] },
+      },
+      slots: [],
+      containerEl: container,
+      containerRect: { top: 100, left: 50, width: 480, height: 280 },
+      activeSlotKey: null,
+      previewLayout: undefined,
+      refreshTimer: null,
+    };
+
+    (model as any).applyPreview({
+      type: 'column',
+      rowId: 'row-1',
+      columnIndex: 0,
+      insertIndex: 1,
+      position: 'after',
+      rect: { top: 130, left: 90, width: 220, height: 60 },
+    });
+
+    expect(model.props.dragOverlayRect).toMatchObject({
+      top: 30,
+      left: 40,
+      width: 220,
+      height: 60,
+      type: 'column',
+    });
   });
 });

package/src/flow/models/base/__tests__/GridModel.resizeLayout.test.ts

@@ -0,0 +1,124 @@
+/**
+ * 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 { FlowEngine } from '@nocobase/flow-engine';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { GridModel } from '../GridModel';
+
+describe('GridModel resize layout', () => {
+  let engine: FlowEngine;
+
+  beforeEach(() => {
+    engine = new FlowEngine();
+    engine.registerModels({ GridModel });
+  });
+
+  it('updates v2 layout sizes during resize so the saved layout keeps the new width', () => {
+    const itemA = engine.createModel({ use: 'FlowModel', uid: 'a' });
+    const itemB = engine.createModel({ use: 'FlowModel', uid: 'b' });
+    const model = engine.createModel<GridModel>({
+      uid: 'grid-resize-layout',
+      use: 'GridModel',
+      props: {
+        layout: {
+          version: 2,
+          rows: [
+            {
+              id: 'rowA',
+              cells: [
+                { id: 'cellA', items: ['a'] },
+                { id: 'cellB', items: ['b'] },
+              ],
+              sizes: [12, 12],
+            },
+          ],
+        },
+      },
+      structure: {} as any,
+    });
+    (model as any).subModels = { items: [itemA, itemB] };
+    model.syncLayoutProps(model.getGridLayout());
+
+    const container = document.createElement('div');
+    Object.defineProperty(container, 'clientWidth', {
+      configurable: true,
+      value: 240,
+    });
+    (model.gridContainerRef as any).current = container;
+    model.onMount();
+
+    model.emitter.emit('onResizeRight', { resizeDistance: 60, model: itemA });
+    model.emitter.emit('onResizeEnd');
+
+    expect(model.props.layout.rows[0].sizes).toEqual([18, 6]);
+    expect(model.getStepParams('gridSettings', 'grid').layout.rows[0].sizes).toEqual([18, 6]);
+  });
+
+  it('uses the nested row container width when resizing v2 nested layouts', () => {
+    const itemA = engine.createModel({ use: 'FlowModel', uid: 'a' });
+    const itemB = engine.createModel({ use: 'FlowModel', uid: 'b' });
+    const model = engine.createModel<GridModel>({
+      uid: 'grid-resize-nested-layout',
+      use: 'GridModel',
+      props: {
+        layout: {
+          version: 2,
+          rows: [
+            {
+              id: 'outer',
+              cells: [
+                {
+                  id: 'outer-cell',
+                  rows: [
+                    {
+                      id: 'nested',
+                      cells: [
+                        { id: 'nested-a', items: ['a'] },
+                        { id: 'nested-b', items: ['b'] },
+                      ],
+                      sizes: [12, 12],
+                    },
+                  ],
+                },
+              ],
+              sizes: [24],
+            },
+          ],
+        },
+      },
+      structure: {} as any,
+    });
+    (model as any).subModels = { items: [itemA, itemB] };
+    model.syncLayoutProps(model.getGridLayout());
+
+    const container = document.createElement('div');
+    Object.defineProperty(container, 'clientWidth', {
+      configurable: true,
+      value: 240,
+    });
+    const nestedRowParent = document.createElement('div');
+    Object.defineProperty(nestedRowParent, 'clientWidth', {
+      configurable: true,
+      value: 120,
+    });
+    const nestedRowElement = document.createElement('div');
+    nestedRowElement.dataset.gridRowId = 'nested';
+    nestedRowElement.dataset.gridPath = JSON.stringify([{ rowId: 'outer', cellId: 'outer-cell' }, { rowId: 'nested' }]);
+    nestedRowParent.appendChild(nestedRowElement);
+    container.appendChild(nestedRowParent);
+    (model.gridContainerRef as any).current = container;
+    model.onMount();
+
+    model.emitter.emit('onResizeRight', { resizeDistance: 30, model: itemA });
+    model.emitter.emit('onResizeEnd');
+
+    const nestedRow = model.props.layout.rows[0].cells[0].rows![0];
+    expect(nestedRow.sizes).toEqual([18, 6]);
+  });
+});

package/src/flow/models/base/__tests__/GridModel.visibleLayout.test.ts

@@ -7,8 +7,8 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { describe, it, expect, beforeEach } from 'vitest';
 import { EMPTY_COLUMN_UID, FlowEngine } from '@nocobase/flow-engine';
+import { beforeEach, describe, expect, it } from 'vitest';
 import { GridModel } from '../GridModel';
 
 describe('GridModel.getVisibleLayout (hidden items filtering)', () => {
@@ -74,7 +74,7 @@ describe('GridModel.getVisibleLayout (hidden items filtering)', () => {
     // 第一列只有 hidden，应该被过滤掉，只保留包含 v 的那一列
     expect(Object.keys(rows)).toEqual(['row1']);
     expect(rows.row1).toEqual([['v']]);
-    expect(sizes.row1).toEqual([16]);
+    expect(sizes.row1).toEqual([24]);
   });
 
   it('removes entire row when all columns are hidden-only', async () => {
@@ -109,13 +109,14 @@ describe('GridModel.getVisibleLayout (hidden items filtering)', () => {
   it('uses rowOrder when provided to keep row sequence', async () => {
     await engine.flowSettings.disable();
 
-    const visible = engine.createModel({ use: 'FlowModel', uid: 'v1' });
+    const visible1 = engine.createModel({ use: 'FlowModel', uid: 'v1' });
+    const visible2 = engine.createModel({ use: 'FlowModel', uid: 'v2' });
     const model = engine.createModel<GridModel>({
       use: 'GridModel',
       uid: 'grid-4',
       props: {
         rows: {
-          second: [['v1']],
+          second: [['v2']],
           first: [['v1']],
         },
         sizes: {
@@ -127,7 +128,7 @@ describe('GridModel.getVisibleLayout (hidden items filtering)', () => {
       structure: {} as any,
     });
 
-    (model as any).subModels = { items: [visible] };
+    (model as any).subModels = { items: [visible1, visible2] };
 
     const { rows } = (model as any).getVisibleLayout();
     expect(Object.keys(rows)).toEqual(['first', 'second']);
@@ -136,13 +137,14 @@ describe('GridModel.getVisibleLayout (hidden items filtering)', () => {
   it('falls back to rows key order when rowOrder is missing', async () => {
     await engine.flowSettings.disable();
 
-    const visible = engine.createModel({ use: 'FlowModel', uid: 'v1' });
+    const visible1 = engine.createModel({ use: 'FlowModel', uid: 'v1' });
+    const visible2 = engine.createModel({ use: 'FlowModel', uid: 'v2' });
     const model = engine.createModel<GridModel>({
       use: 'GridModel',
       uid: 'grid-5',
       props: {
         rows: {
-          second: [['v1']],
+          second: [['v2']],
           first: [['v1']],
         },
         sizes: {
@@ -153,7 +155,7 @@ describe('GridModel.getVisibleLayout (hidden items filtering)', () => {
       structure: {} as any,
     });
 
-    (model as any).subModels = { items: [visible] };
+    (model as any).subModels = { items: [visible1, visible2] };
 
     const { rows } = (model as any).getVisibleLayout();
     expect(Object.keys(rows)).toEqual(['second', 'first']);
@@ -163,6 +165,7 @@ describe('GridModel.getVisibleLayout (hidden items filtering)', () => {
     await engine.flowSettings.disable();
 
     const visible = engine.createModel({ use: 'FlowModel', uid: 'v' });
+    const visible2 = engine.createModel({ use: 'FlowModel', uid: 'v2' });
     const hidden = engine.createModel({ use: 'FlowModel', uid: 'h' }) as any;
     hidden.hidden = true;
 
@@ -171,7 +174,7 @@ describe('GridModel.getVisibleLayout (hidden items filtering)', () => {
       uid: 'grid-6',
       props: {
         rows: {
-          row1: [['h', 'v'], ['v']],
+          row1: [['h', 'v'], ['v2']],
         },
         sizes: {
           row1: [8, 16],
@@ -180,14 +183,51 @@ describe('GridModel.getVisibleLayout (hidden items filtering)', () => {
       structure: {} as any,
     });
 
-    (model as any).subModels = { items: [hidden, visible] };
+    (model as any).subModels = { items: [hidden, visible, visible2] };
 
     const { rows, sizes } = (model as any).getVisibleLayout();
     // 第一个单元格中的 h 应被剔除，只剩 v；列宽保持不变
-    expect(rows.row1).toEqual([['v'], ['v']]);
+    expect(rows.row1).toEqual([['v'], ['v2']]);
     expect(sizes.row1).toEqual([8, 16]);
   });
 
+  it('preserves remaining column size ratios when filtering v2 layout columns', () => {
+    engine.flowSettings.disable();
+
+    const visible1 = engine.createModel({ use: 'FlowModel', uid: 'v1' });
+    const visible2 = engine.createModel({ use: 'FlowModel', uid: 'v2' });
+    const hidden = engine.createModel({ use: 'FlowModel', uid: 'h' }) as any;
+    hidden.hidden = true;
+
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-7',
+      props: {
+        layout: {
+          version: 2,
+          rows: [
+            {
+              id: 'row1',
+              cells: [
+                { id: 'cell1', items: ['h'] },
+                { id: 'cell2', items: ['v1'] },
+                { id: 'cell3', items: ['v2'] },
+              ],
+              sizes: [4, 8, 12],
+            },
+          ],
+        },
+      },
+      structure: {} as any,
+    });
+
+    (model as any).subModels = { items: [hidden, visible1, visible2] };
+
+    const { rows, sizes } = (model as any).getVisibleLayout();
+    expect(rows.row1).toEqual([['v1'], ['v2']]);
+    expect(sizes.row1).toEqual([10, 14]);
+  });
+
   it('ignores EMPTY_COLUMN uid in runtime mode without crashing', async () => {
     await engine.flowSettings.disable();
 
@@ -195,7 +235,7 @@ describe('GridModel.getVisibleLayout (hidden items filtering)', () => {
 
     const model = engine.createModel<GridModel>({
       use: 'GridModel',
-      uid: 'grid-7',
+      uid: 'grid-8',
       props: {
         rows: {
           row1: [[EMPTY_COLUMN_UID, 'ghost', 'v'], ['ghost-2']],
@@ -210,8 +250,8 @@ describe('GridModel.getVisibleLayout (hidden items filtering)', () => {
     (model as any).subModels = { items: [visible] };
 
     const { rows, sizes } = (model as any).getVisibleLayout();
-    // unknown uid 视为可见（避免误删），但 EMPTY_COLUMN_UID 必须被剔除
-    expect(rows.row1).toEqual([['ghost', 'v'], ['ghost-2']]);
-    expect(sizes.row1).toEqual([8, 16]);
+    // 新布局归一化会移除不在 subModels.items 中的 uid，EMPTY_COLUMN_UID 也不会在运行态显示
+    expect(rows.row1).toEqual([['v']]);
+    expect(sizes.row1).toEqual([24]);
   });
 });

package/src/flow/models/blocks/details/DetailsGridModel.tsx

@@ -8,11 +8,11 @@
  */
 
 import { SettingOutlined } from '@ant-design/icons';
-import { AddSubModelButton, FlowSettingsButton, DragOverlayConfig } from '@nocobase/flow-engine';
+import { AddSubModelButton, DragOverlayConfig, FlowSettingsButton } from '@nocobase/flow-engine';
+import { Skeleton } from 'antd';
 import React from 'react';
 import { FieldModel, GridModel } from '../../base';
 import { DetailsBlockModel } from './DetailsBlockModel';
-import { Skeleton } from 'antd';
 
 export class DetailsGridModel extends GridModel<{
   parent: DetailsBlockModel;
@@ -32,8 +32,8 @@ export class DetailsGridModel extends GridModel<{
   dragOverlayConfig: DragOverlayConfig = {
     // 列内插入
     columnInsert: {
-      before: { offsetTop: -12, height: 24 },
-      after: { offsetTop: 7, height: 24 },
+      before: { offsetTop: -6, height: 24 },
+      after: { offsetTop: 3, height: 24 },
     },
     // 列边缘
     columnEdge: {
@@ -42,8 +42,8 @@ export class DetailsGridModel extends GridModel<{
     },
     // 行间隙
     rowGap: {
-      above: { offsetTop: 0, height: 24 },
-      below: { offsetTop: -14, height: 24 },
+      above: { offsetTop: -2, height: 24 },
+      below: { offsetTop: -12, height: 24 },
     },
   };
 

package/src/flow/models/blocks/filter-form/FilterFormBlockModel.tsx

@@ -102,15 +102,19 @@ export class FilterFormBlockModel extends FilterBlockModel<{
     // 首次进入页面：等待子模型 beforeRender 完成（例如 name 初始化），再应用表单级默认值并触发筛选
     void this.applyDefaultsAndInitialFilter();
 
-    // 监听页面区块删除，自动清理已失效的筛选字段
+    // 监听页面区块删除，自动清理已失效的筛选字段。
+    // 这里使用 onSubModelDestroyed 而不是 onSubModelRemoved，避免弹窗关闭时
+    // 的临时模型卸载被误判成“用户删除了目标区块”。
     const blockGridModel = this.context.blockGridModel;
     if (blockGridModel?.emitter) {
-      const handleTargetRemoved = (model) => {
+      const handleTargetDestroyed = (model) => {
         if (!model?.uid || model.uid === this.uid) return;
-        this.handleTargetBlockRemoved(model.uid);
+        void this.handleTargetBlockRemoved(model.uid).catch((error) => {
+          console.error('Failed to handle destroyed target block in FilterFormBlockModel:', error);
+        });
       };
-      blockGridModel.emitter.on('onSubModelRemoved', handleTargetRemoved);
-      this.removeTargetBlockListener = () => blockGridModel.emitter.off('onSubModelRemoved', handleTargetRemoved);
+      blockGridModel.emitter.on('onSubModelDestroyed', handleTargetDestroyed);
+      this.removeTargetBlockListener = () => blockGridModel.emitter.off('onSubModelDestroyed', handleTargetDestroyed);
     }
   }