@nocobase/client-v2 2.1.0-alpha.3 → 2.1.0-alpha.31

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

@@ -0,0 +1,384 @@
+/**
+ * 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 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 }) => {
+  return {
+    top,
+    left,
+    width,
+    height,
+    right: left + width,
+    bottom: top + height,
+    x: left,
+    y: top,
+    toJSON: () => ({}),
+  } as DOMRect;
+};
+
+const mockRect = (
+  element: Element,
+  rect: {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+  },
+) => {
+  Object.defineProperty(element, 'getBoundingClientRect', {
+    configurable: true,
+    value: () => createMockRect(rect),
+  });
+};
+
+const createGridContainer = () => {
+  const container = document.createElement('div');
+  const row = document.createElement('div');
+  row.setAttribute('data-grid-row-id', 'row-1');
+  container.appendChild(row);
+
+  const col = document.createElement('div');
+  col.setAttribute('data-grid-column-row-id', 'row-1');
+  col.setAttribute('data-grid-column-index', '0');
+  row.appendChild(col);
+
+  const item = document.createElement('div');
+  item.setAttribute('data-grid-item-row-id', 'row-1');
+  item.setAttribute('data-grid-column-index', '0');
+  item.setAttribute('data-grid-item-index', '0');
+  item.setAttribute('data-grid-item-uid', 'item-1');
+  col.appendChild(item);
+
+  mockRect(container, { top: 0, left: 0, width: 480, height: 280 });
+  mockRect(row, { top: 20, left: 20, width: 440, height: 120 });
+  mockRect(col, { top: 20, left: 20, width: 440, height: 120 });
+  mockRect(item, { top: 30, left: 30, width: 420, height: 100 });
+  return container;
+};
+
+describe('GridModel drag snapshot container', () => {
+  let engine: FlowEngine;
+
+  beforeEach(() => {
+    engine = new FlowEngine();
+    engine.registerModels({ GridModel });
+  });
+
+  it('keeps snapshot slots available when gridContainerRef object is replaced during dragging', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-drag-ref',
+      props: {
+        rows: {
+          'row-1': [['item-1']],
+        },
+        sizes: {
+          'row-1': [24],
+        },
+      },
+      structure: {} as any,
+    });
+
+    const container = createGridContainer();
+    (model.gridContainerRef as any).current = container;
+
+    model.handleDragStart({
+      active: { id: 'item-1' },
+      activatorEvent: { clientX: 80, clientY: 80 },
+    } as any);
+
+    expect((model as any).dragState?.slots?.length).toBeGreaterThan(0);
+
+    model.gridContainerRef = React.createRef<HTMLDivElement>();
+    (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',
+    });
+  });
+
+  it('clears persisted drag overlay on init', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-hidden-stale-overlay',
+      props: {
+        dragOverlayRect: {
+          top: 10,
+          left: 20,
+          width: 100,
+          height: 40,
+          type: 'column',
+        },
+      },
+      structure: {} as any,
+    });
+
+    expect(model.props.dragOverlayRect).toBeNull();
+  });
+
+  it('omits drag overlay rect from serialized props', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-serialize-overlay',
+      props: {
+        rowGap: 24,
+        dragOverlayRect: {
+          top: 10,
+          left: 20,
+          width: 100,
+          height: 40,
+          type: 'column',
+        },
+      },
+      structure: {} as any,
+    });
+
+    const serialized = model.serialize();
+
+    expect(serialized.props).toMatchObject({ rowGap: 24 });
+    expect(serialized.props).not.toHaveProperty('dragOverlayRect');
+  });
+
+  it('recomputes the final slot from drag end position before saving layout', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-drag-final-slot',
+      props: {},
+      structure: {} as any,
+    });
+    const applyPreview = vi.fn((slot) => {
+      (model as any).dragState.previewLayout = slot
+        ? {
+            rows: { 'row-final': [['item-1']] },
+            sizes: { 'row-final': [24] },
+          }
+        : undefined;
+    });
+    const resolveDragSlot = vi.fn(() => ({
+      type: 'row-gap',
+      targetRowId: 'row-final',
+      position: 'below',
+      rect: { top: 200, left: 20, width: 440, height: 32 },
+    }));
+    const saveGridLayout = vi.fn();
+    const syncLayoutProps = vi.fn();
+    const finishDrag = vi.fn();
+
+    (model as any).applyPreview = applyPreview;
+    (model as any).resolveDragSlot = resolveDragSlot;
+    (model as any).saveGridLayout = saveGridLayout;
+    (model as any).syncLayoutProps = syncLayoutProps;
+    (model as any).finishDrag = finishDrag;
+    (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 },
+      activeSlotKey: null,
+      previewLayout: undefined,
+      refreshTimer: null,
+      generatedIds: new Map(),
+    };
+
+    model.handleDragEnd({
+      delta: { x: 30, y: 220 },
+    } as any);
+
+    expect(resolveDragSlot).toHaveBeenCalledWith({ x: 130, y: 320 });
+    expect(applyPreview).toHaveBeenCalledOnce();
+    expect(saveGridLayout).toHaveBeenCalledWith({
+      rows: { 'row-final': [['item-1']] },
+      sizes: { 'row-final': [24] },
+    });
+    expect(finishDrag).toHaveBeenCalledOnce();
+  });
+});

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

@@ -0,0 +1,107 @@
+/**
+ * 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, it, expect, beforeEach } from 'vitest';
+import { FlowEngine } from '@nocobase/flow-engine';
+import { GridModel } from '../GridModel';
+
+describe('GridModel.mergeRowsWithItems', () => {
+  let engine: FlowEngine;
+
+  beforeEach(() => {
+    engine = new FlowEngine();
+    engine.registerModels({ GridModel });
+  });
+
+  it('generates rows in item order when rows is empty', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-1',
+      props: {},
+      structure: {} as any,
+    });
+
+    const items = [
+      engine.createModel({ use: 'FlowModel', uid: 'a' }),
+      engine.createModel({ use: 'FlowModel', uid: 'b' }),
+      engine.createModel({ use: 'FlowModel', uid: 'c' }),
+      engine.createModel({ use: 'FlowModel', uid: 'd' }),
+      engine.createModel({ use: 'FlowModel', uid: 'e' }),
+      engine.createModel({ use: 'FlowModel', uid: 'f' }),
+    ];
+    (model as any).subModels = { items };
+
+    const merged = model.mergeRowsWithItems({});
+
+    const rowsValues = Object.values(merged);
+
+    expect(rowsValues.length).toBe(6);
+    expect(rowsValues[0]).toEqual([['a']]);
+    expect(rowsValues[1]).toEqual([['b']]);
+    expect(rowsValues[2]).toEqual([['c']]);
+    expect(rowsValues[3]).toEqual([['d']]);
+    expect(rowsValues[4]).toEqual([['e']]);
+    expect(rowsValues[5]).toEqual([['f']]);
+  });
+
+  it('correctly filters non-existent items from existing rows', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-2',
+      props: {},
+      structure: {} as any,
+    });
+
+    const items = [engine.createModel({ use: 'FlowModel', uid: 'a' })];
+    (model as any).subModels = { items };
+
+    const existingRows = {
+      r1: [['a'], ['b']],
+      r2: [['c']],
+    };
+
+    const merged = model.mergeRowsWithItems(existingRows);
+
+    const keys = Object.keys(merged);
+    expect(keys).toContain('r1');
+    expect(keys).not.toContain('r2');
+
+    expect(merged['r1']).toEqual([['a']]);
+    expect(merged['r2']).toBeUndefined();
+  });
+
+  it('reorders rows based on items order when rows exist but are in different order', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-reorder',
+      props: {},
+      structure: {} as any,
+    });
+
+    const items = [
+      engine.createModel({ use: 'FlowModel', uid: 'b' }),
+      engine.createModel({ use: 'FlowModel', uid: 'a' }),
+    ];
+    (model as any).subModels = { items };
+
+    // 现有 rows 是 a 在前，b 在后
+    const existingRows = {
+      r1: [['a']],
+      r2: [['b']],
+    };
+
+    const merged = model.mergeRowsWithItems(existingRows);
+    const rowsValues = Object.values(merged);
+
+    // 我们期望 merged 后的顺序应该跟随 existingRows (a, b)
+    // 即便 items 顺序是 (b, a)
+    expect(rowsValues[0]).toEqual([['a']]);
+    expect(rowsValues[1]).toEqual([['b']]);
+  });
+});

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

@@ -0,0 +1,67 @@
+/**
+ * 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, it, expect } from 'vitest';
+import { recalculateGridSizes } from '../GridModel';
+import { EMPTY_COLUMN_UID } from '@nocobase/flow-engine';
+
+const basePosition = { rowId: 'row1', itemIndex: 0 } as const;
+
+describe('recalculateGridSizes', () => {
+  it('caps edge expansion so row width never exceeds columnCount', () => {
+    const { newSizes, moveDistance } = recalculateGridSizes({
+      position: { ...basePosition, columnIndex: 1 },
+      direction: 'right',
+      resizeDistance: 60,
+      prevMoveDistance: 0,
+      oldSizes: { row1: [10, 10] },
+      oldRows: { row1: [['a'], ['b']] },
+      gridContainerWidth: 240,
+      gutter: 0,
+      columnCount: 24,
+    });
+
+    expect(moveDistance).toBe(4);
+    expect(newSizes.row1).toEqual([10, 14]);
+  });
+
+  it('stops expanding when there is no remaining width', () => {
+    const { newSizes, moveDistance } = recalculateGridSizes({
+      position: { ...basePosition, columnIndex: 0 },
+      direction: 'left',
+      resizeDistance: 30,
+      prevMoveDistance: 0,
+      oldSizes: { row1: [24] },
+      oldRows: { row1: [['a']] },
+      gridContainerWidth: 240,
+      gutter: 0,
+      columnCount: 24,
+    });
+
+    expect(moveDistance).toBe(0);
+    expect(newSizes.row1).toEqual([24]);
+  });
+
+  it('should not remove empty left column when shrunk to zero', () => {
+    const { newSizes, newRows } = recalculateGridSizes({
+      position: { ...basePosition, columnIndex: 1 },
+      direction: 'left',
+      resizeDistance: -120,
+      prevMoveDistance: 0,
+      oldSizes: { row1: [12, 12] },
+      oldRows: { row1: [['a'], ['b']] },
+      gridContainerWidth: 240,
+      gutter: 0,
+      columnCount: 24,
+    });
+
+    expect(newRows.row1.length).toBe(2);
+    expect(newSizes.row1.length).toBe(2);
+  });
+});

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]);
+  });
+});