@nocobase/client-v2 2.1.0-beta.33 → 2.1.0-beta.34

package/src/components/form/table/Table.tsx

@@ -0,0 +1,279 @@
+/**
+ * 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 { DragOverlay, type DragEndEvent, type DragStartEvent } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { cx } from '@emotion/css';
+import { DndProvider } from '@nocobase/flow-engine';
+import { useMemoizedFn } from 'ahooks';
+import { Table as AntdTable, type TableProps as AntdTableProps } from 'antd';
+import type { ColumnsType, ColumnType, GetRowKey } from 'antd/es/table/interface';
+import type { RenderedCell } from 'rc-table/lib/interface';
+import React, { useMemo, useState } from 'react';
+import { SortableRow, SortHandle } from './dnd/SortableRow';
+import { RowOverlayPreview } from './RowOverlayPreview';
+import { SelectionCell } from './SelectionCell';
+import { indexSwapClassName, selectionGutterClassName } from './styles';
+import { readRowKey, snapshotSourceRow, type RowKey, type RowSnapshot } from './utils';
+
+type RowSelectionRenderCellResult<RecordType> = React.ReactNode | RenderedCell<RecordType>;
+
+/**
+ * Default initial page size for `Table`. Exposed so consumers can seed their
+ * controlled `pageSize` state with the same value the component would use if
+ * they relied purely on the built-in pagination defaults.
+ */
+export const DEFAULT_PAGE_SIZE = 50;
+
+/**
+ * Default `pageSizeOptions` injected into the pagination config. Matches the
+ * v1 settings-page table so users see the same choices across versions.
+ * Consumers can override by passing their own `pageSizeOptions` in
+ * `pagination`.
+ */
+export const PAGE_SIZE_OPTIONS: readonly number[] = [5, 10, 20, 50, 100, 200];
+
+/**
+ * antd's `rowSelection.renderCell` can return either a `ReactNode` or a
+ * `RenderedCell` (the `{ children, props }` shape used to drive colSpan /
+ * rowSpan). `SelectionCell` only paints inside an existing selection cell —
+ * cell-spanning isn't supported here — so this guard unwraps to the inner
+ * children when a `RenderedCell` slips through.
+ */
+function isRenderedCell<RecordType>(value: unknown): value is RenderedCell<RecordType> {
+  return typeof value === 'object' && value !== null && !React.isValidElement(value) && 'children' in value;
+}
+
+export interface TableProps<RecordType extends object = any> extends AntdTableProps<RecordType> {
+  /**
+   * Required so drag-sort, hover-swap and row identity work. Accepts the same
+   * shape as antd `Table.rowKey`. When passed as a function it gets the
+   * record + index and must return a serializable id.
+   */
+  rowKey: RowKey<RecordType>;
+  /**
+   * Show row index (1, 2, 3, …) in the rowSelection column by default; hovering
+   * a row or selecting it reveals the checkbox in the same cell. Requires
+   * `rowSelection` — the index lives in the selection column. Defaults to
+   * `true`.
+   */
+  showIndex?: boolean;
+  /**
+   * Enable vertical drag-and-drop row reordering. When true, rows show a drag
+   * handle on the left and `onSortEnd` fires after each drop. Defaults to
+   * `false`; the rest of the table behaves like a plain antd Table.
+   */
+  isDraggable?: boolean;
+  /**
+   * Called after a row is dropped onto another. Only used when `isDraggable`
+   * is true. The caller persists the move (e.g. `resource.move(...)`) and
+   * refreshes `dataSource` — this component does NOT mutate the data array.
+   */
+  onSortEnd?: (from: RecordType, to: RecordType) => void | Promise<void>;
+  /**
+   * Hide the drag handle entirely while still keeping `isDraggable` on. Useful
+   * when the caller wants to embed `<SortHandle />` inside a custom column.
+   * Defaults to `true`.
+   */
+  showSortHandle?: boolean;
+  /**
+   * Override the width of the auto-inserted handle column when `rowSelection`
+   * is absent. When `rowSelection` is provided the handle is rendered inside
+   * the selection column instead, so this prop is ignored.
+   */
+  sortHandleColumnWidth?: number;
+}
+
+/**
+ * Generic v2 settings-page table primitive. Built on antd's `Table` and adds:
+ *
+ * - Row-index ↔ checkbox swap inside the selection column (`showIndex`,
+ *   on by default): index visible at rest, checkbox shows on hover or when
+ *   selected. Both elements are absolutely positioned inside the cell so
+ *   they share the same center anchor and never compete for layout space.
+ * - Optional vertical drag-and-drop reordering (`isDraggable`): handle is
+ *   absolute-positioned in a 32px left gutter so the checkbox column stays
+ *   visually centered. The drag overlay renders an `outerHTML` clone of the
+ *   source `<tr>`; the index is suppressed inside the clone so the row
+ *   being moved doesn't display a stale ordinal.
+ *
+ * Use this in place of antd `Table` for any settings-page list. When
+ * `isDraggable` is false the component is a thin pass-through to antd Table
+ * plus the index swap, so it is safe as the default table on any page.
+ */
+export function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
+  const {
+    rowKey,
+    showIndex = true,
+    isDraggable = false,
+    onSortEnd,
+    showSortHandle = true,
+    sortHandleColumnWidth = 40,
+    components,
+    columns,
+    dataSource,
+    rowSelection,
+    className,
+    pagination,
+    ...rest
+  } = props;
+
+  // Apply opinionated pagination defaults (showSizeChanger + a v1-aligned set
+  // of pageSizeOptions). `pagination === false` is preserved verbatim so
+  // callers can still disable pagination outright; for any other value (object
+  // or undefined) we spread caller-provided keys last so explicit overrides
+  // win.
+  const mergedPagination = useMemo<AntdTableProps<RecordType>['pagination']>(() => {
+    if (pagination === false) {
+      return false;
+    }
+    return {
+      showSizeChanger: true,
+      pageSizeOptions: [...PAGE_SIZE_OPTIONS],
+      ...(pagination ?? {}),
+    };
+  }, [pagination]);
+
+  const showHandleInSelection = isDraggable && showSortHandle && !!rowSelection;
+  const showStandaloneHandleColumn = isDraggable && showSortHandle && !rowSelection;
+
+  const itemKeys = useMemo<string[]>(() => {
+    if (!isDraggable || !dataSource) return [];
+    return dataSource
+      .map((record, index) => readRowKey(record, rowKey, index))
+      .filter((key): key is React.Key => key != null)
+      .map((key) => String(key));
+  }, [dataSource, isDraggable, rowKey]);
+
+  // Snapshot of the source `<tr>` at drag start. Cleared on drag end / cancel.
+  const [activeSnapshot, setActiveSnapshot] = useState<RowSnapshot | null>(null);
+
+  const handleDragStart = useMemoizedFn((event: DragStartEvent) => {
+    setActiveSnapshot(snapshotSourceRow(String(event.active.id)));
+  });
+
+  const handleDragCancel = useMemoizedFn(() => {
+    setActiveSnapshot(null);
+  });
+
+  const handleDragEnd = useMemoizedFn(async (event: DragEndEvent) => {
+    setActiveSnapshot(null);
+    const { active, over } = event;
+    if (!active || !over || !onSortEnd) return;
+    if (String(active.id) === String(over.id)) return;
+    if (!dataSource) return;
+    const fromIndex = dataSource.findIndex(
+      (record, index) => String(readRowKey(record, rowKey, index)) === String(active.id),
+    );
+    const toIndex = dataSource.findIndex(
+      (record, index) => String(readRowKey(record, rowKey, index)) === String(over.id),
+    );
+    if (fromIndex < 0 || toIndex < 0) return;
+    const from = dataSource[fromIndex];
+    const to = dataSource[toIndex];
+    if (!from || !to) return;
+    await onSortEnd(from, to);
+  });
+
+  const tableComponents = useMemo(() => {
+    if (!isDraggable) return components;
+    return { ...components, body: { ...components?.body, row: SortableRow } };
+  }, [components, isDraggable]);
+
+  // When dragging without rowSelection, prepend a standalone column for the
+  // handle. When rowSelection is present, the handle lives inside the
+  // selection cell — see `augmentedRowSelection` below.
+  const augmentedColumns = useMemo<ColumnsType<RecordType>>(() => {
+    const baseColumns: ColumnsType<RecordType> = columns ?? [];
+    if (!showStandaloneHandleColumn) return baseColumns;
+    const handleColumn: ColumnType<RecordType> = {
+      key: '__sort__',
+      width: sortHandleColumnWidth,
+      align: 'center',
+      render: () => <SortHandle />,
+    };
+    return [handleColumn, ...baseColumns];
+  }, [columns, showStandaloneHandleColumn, sortHandleColumnWidth]);
+
+  const augmentedRowSelection = useMemo(() => {
+    if (!rowSelection) return rowSelection;
+    if (!showHandleInSelection && !showIndex) return rowSelection;
+    const originalRenderCell = rowSelection.renderCell;
+    return {
+      ...rowSelection,
+      renderCell: (checked: boolean, record: RecordType, index: number, originalNode: React.ReactNode) => {
+        const result: RowSelectionRenderCellResult<RecordType> = originalRenderCell
+          ? originalRenderCell(checked, record, index, originalNode)
+          : originalNode;
+        const node: React.ReactNode = isRenderedCell<RecordType>(result) ? result.children ?? null : result;
+        return (
+          <SelectionCell
+            checked={checked}
+            index={index}
+            showHandle={showHandleInSelection}
+            showIndex={showIndex}
+            originalNode={node}
+          />
+        );
+      },
+    };
+  }, [rowSelection, showHandleInSelection, showIndex]);
+
+  const tableClassName = cx(
+    className,
+    showHandleInSelection && selectionGutterClassName,
+    showIndex && rowSelection && indexSwapClassName,
+  );
+
+  // antd's `rowKey` accepts `string | GetRowKey<RecordType>`. Our `RowKey`
+  // alias is narrower (keyof RecordType for string keys), but TS doesn't infer
+  // that `keyof T & string` is assignable to `string` without help — express
+  // the narrowing explicitly at the antd boundary.
+  const antdRowKey: string | GetRowKey<RecordType> = typeof rowKey === 'function' ? rowKey : String(rowKey);
+
+  const tableBody = (
+    <AntdTable<RecordType>
+      {...rest}
+      rowKey={antdRowKey}
+      dataSource={dataSource}
+      columns={augmentedColumns}
+      components={tableComponents}
+      rowSelection={augmentedRowSelection}
+      className={tableClassName}
+      pagination={mergedPagination}
+    />
+  );
+
+  if (!isDraggable || !onSortEnd || !itemKeys.length) {
+    return tableBody;
+  }
+
+  return (
+    <DndProvider
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      onDragCancel={handleDragCancel}
+      showDragOverlay={false}
+    >
+      <SortableContext items={itemKeys} strategy={verticalListSortingStrategy}>
+        {tableBody}
+      </SortableContext>
+      {/* dropAnimation={null}: skip the default tween that snaps the overlay
+          back to the source `<tr>` on drop. Our source row hasn't moved yet
+          (the server `move` + refetch is async) so the tween reads as the
+          row "bouncing back" to its original position, which contradicts the
+          successful drop the user just performed. */}
+      <DragOverlay dropAnimation={null}>
+        {activeSnapshot ? <RowOverlayPreview snapshot={activeSnapshot} /> : null}
+      </DragOverlay>
+    </DndProvider>
+  );
+}
+
+export default Table;

package/src/components/form/table/__tests__/Table.pagination.test.tsx

@@ -0,0 +1,80 @@
+/**
+ * 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 { render } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { DEFAULT_PAGE_SIZE, PAGE_SIZE_OPTIONS, Table } from '../Table';
+
+type Row = { id: number; name: string };
+
+const columns = [{ title: 'Name', dataIndex: 'name' as const }];
+
+function makeRows(count: number): Row[] {
+  return Array.from({ length: count }, (_, index) => ({ id: index + 1, name: `row-${index + 1}` }));
+}
+
+describe('Table pagination defaults', () => {
+  it('exports DEFAULT_PAGE_SIZE=50 and the v1-aligned PAGE_SIZE_OPTIONS list', () => {
+    expect(DEFAULT_PAGE_SIZE).toBe(50);
+    expect([...PAGE_SIZE_OPTIONS]).toEqual([5, 10, 20, 50, 100, 200]);
+  });
+
+  it('shows the page-size changer by default when pagination is enabled', () => {
+    const { container } = render(
+      <Table<Row>
+        rowKey="id"
+        columns={columns}
+        dataSource={makeRows(120)}
+        pagination={{ current: 1, pageSize: 50, total: 120 }}
+      />,
+    );
+    expect(container.querySelector('.ant-pagination-options-size-changer')).not.toBeNull();
+  });
+
+  it('shows the page-size changer when caller omits pagination entirely', () => {
+    const { container } = render(<Table<Row> rowKey="id" columns={columns} dataSource={makeRows(120)} />);
+    expect(container.querySelector('.ant-pagination-options-size-changer')).not.toBeNull();
+  });
+
+  it('renders no pagination at all when caller passes pagination={false}', () => {
+    const { container } = render(
+      <Table<Row> rowKey="id" columns={columns} dataSource={makeRows(120)} pagination={false} />,
+    );
+    expect(container.querySelector('.ant-pagination')).toBeNull();
+  });
+
+  it('lets caller-provided showSizeChanger=false override the default', () => {
+    const { container } = render(
+      <Table<Row>
+        rowKey="id"
+        columns={columns}
+        dataSource={makeRows(120)}
+        pagination={{ current: 1, pageSize: 50, total: 120, showSizeChanger: false }}
+      />,
+    );
+    expect(container.querySelector('.ant-pagination-options-size-changer')).toBeNull();
+  });
+
+  it('preserves caller-controlled current page when caller passes a pagination object', () => {
+    const { container } = render(
+      <Table<Row>
+        rowKey="id"
+        columns={columns}
+        dataSource={makeRows(120)}
+        pagination={{ current: 2, pageSize: 50, total: 120 }}
+      />,
+    );
+    // antd marks the active page with `.ant-pagination-item-active` and the
+    // page number lives inside an <a> child — checking the rendered text is
+    // the most stable assertion across antd versions.
+    const active = container.querySelector('.ant-pagination-item-active');
+    expect(active?.textContent).toBe('2');
+  });
+});

package/src/components/form/table/constants.ts

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ */
+
+/**
+ * Pixel reservation on the left side of the rowSelection column for the drag
+ * handle. Used by the runtime `selectionGutterClassName` (real table) and by
+ * the drag overlay `overlayCellStylesClassName` (floating clone) so both
+ * variants put the handle in the same gutter position.
+ */
+export const SORT_HANDLE_GUTTER = 32;

package/src/components/form/table/dnd/SortableRow.tsx

@@ -0,0 +1,106 @@
+/**
+ * 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 { MenuOutlined } from '@ant-design/icons';
+import { TinyColor } from '@ctrl/tinycolor';
+import { useSortable } from '@dnd-kit/sortable';
+import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
+import type { DraggableAttributes } from '@dnd-kit/core';
+import { css } from '@emotion/css';
+import { theme } from 'antd';
+import classNames from 'classnames';
+import React, { useMemo } from 'react';
+
+type DragSortRowContextValue = {
+  attributes?: DraggableAttributes;
+  listeners?: SyntheticListenerMap;
+  setActivatorNodeRef?: (node: HTMLElement | null) => void;
+};
+
+export const DragSortRowContext = React.createContext<DragSortRowContextValue | null>(null);
+
+const sortHandleClass = css`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+`;
+
+/**
+ * Activator handle that initiates a row drag. Reads `attributes` / `listeners`
+ * / `setActivatorNodeRef` from the surrounding `DragSortRowContext` provided
+ * by `SortableRow`, so the handle can sit anywhere within the row's cells
+ * (typically a dedicated first column).
+ */
+export const SortHandle: React.FC<{ id?: string | number; style?: React.CSSProperties }> = (props) => {
+  const { id: _id, ...otherProps } = props;
+  const dragSortContext = React.useContext(DragSortRowContext);
+  return (
+    <span
+      ref={dragSortContext?.setActivatorNodeRef}
+      {...dragSortContext?.attributes}
+      {...dragSortContext?.listeners}
+      {...otherProps}
+      className={classNames(sortHandleClass)}
+    >
+      <MenuOutlined />
+    </span>
+  );
+};
+
+/**
+ * Drop-in replacement for antd Table's `<tr>` body row that wires `useSortable`
+ * keyed by the `data-row-key` attribute antd injects. Pass via
+ * `Table.components.body.row` and wrap the `<tbody>` with `DndContext` +
+ * `SortableContext`. The `DragSortRowContext` it provides lets `SortHandle`
+ * be placed anywhere inside the row, not just on the row itself.
+ */
+export const SortableRow: React.FC<{
+  rowIndex?: number;
+  className?: string;
+  [key: string]: any;
+}> = (props) => {
+  const { token }: any = theme.useToken();
+  const id = props['data-row-key']?.toString();
+  const { setNodeRef, setActivatorNodeRef, attributes, listeners, active, over } = useSortable({
+    id,
+  });
+  const { rowIndex, ...others } = props;
+  const isOver = over?.id === id;
+  const classObj = useMemo(() => {
+    const borderColor = new TinyColor(token.colorPrimary).setAlpha(0.6).toHex8String();
+    return {
+      topActiveClass: css`
+        & > td {
+          border-top: 2px solid ${borderColor} !important;
+        }
+      `,
+      bottomActiveClass: css`
+        & > td {
+          border-bottom: 2px solid ${borderColor} !important;
+        }
+      `,
+    };
+  }, [token.colorPrimary]);
+
+  const className =
+    (active?.data.current?.sortable.index ?? -1) > rowIndex ? classObj.topActiveClass : classObj.bottomActiveClass;
+
+  return (
+    <DragSortRowContext.Provider value={{ listeners, attributes, setActivatorNodeRef }}>
+      <tr
+        ref={(node) => {
+          setNodeRef(node);
+        }}
+        {...others}
+        className={classNames(props.className, { [className]: active && isOver })}
+      />
+    </DragSortRowContext.Provider>
+  );
+};

package/src/components/form/table/dnd/index.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 * from './SortableRow';

package/src/components/form/table/index.tsx

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+
+// Public surface of the v2 table primitive. Internal helpers (utils, styles,
+// SelectionCell, RowOverlayPreview, etc.) stay unexported — they're
+// implementation details of `Table` and are not part of the package API.
+export * from './Table';

package/src/components/form/table/styles.ts

@@ -0,0 +1,110 @@
+/**
+ * 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 { css } from '@emotion/css';
+import { SORT_HANDLE_GUTTER } from './constants';
+
+/**
+ * Reserve a `SORT_HANDLE_GUTTER`-wide gap on the left of the rowSelection
+ * column so the handle's `left:0` lands inside a `position:relative` cell.
+ * Padding is mirrored on both the header `<th>` and body `<td>` so the
+ * "select all" checkbox stays vertically aligned with body checkboxes.
+ *
+ * The class is a module-level constant — emotion's hash is stable across
+ * re-renders, so the caller doesn't need a `useMemo` to keep referential
+ * equality.
+ */
+export const selectionGutterClassName = css`
+  .ant-table-thead > tr > th.ant-table-selection-column,
+  .ant-table-tbody > tr > td.ant-table-selection-column {
+    padding-left: ${SORT_HANDLE_GUTTER}px !important;
+    position: relative;
+  }
+`;
+
+/**
+ * Index ↔ checkbox hover swap CSS. Both `.nb-table-index` and the antd
+ * checkbox (wrapped in `.nb-origin-node`) are absolutely positioned and
+ * centered inside `.nb-row-selection-cell`, so they share the same anchor
+ * without one displacing the other. `display: none/flex` flips so they never
+ * overlap mid-transition.
+ */
+export const indexSwapClassName = css`
+  .ant-table-tbody > tr > td.ant-table-selection-column {
+    .nb-row-selection-cell {
+      position: relative;
+      display: inline-block;
+      min-width: 22px;
+      min-height: 22px;
+      vertical-align: middle;
+    }
+    .nb-row-selection-cell .nb-table-index,
+    .nb-row-selection-cell .nb-origin-node {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .nb-row-selection-cell .nb-origin-node {
+      display: none;
+    }
+    .nb-row-selection-cell.checked .nb-table-index {
+      display: none;
+    }
+    .nb-row-selection-cell.checked .nb-origin-node {
+      display: flex;
+    }
+  }
+  .ant-table-tbody > tr:hover > td.ant-table-selection-column {
+    .nb-row-selection-cell .nb-table-index {
+      display: none;
+    }
+    .nb-row-selection-cell .nb-origin-node {
+      display: flex;
+    }
+  }
+`;
+
+/**
+ * Self-contained styles for the drag-overlay clone. The runtime
+ * `selectionGutterClassName` + `indexSwapClassName` are scoped to AntdTable's
+ * emotion hash, so they don't reach the cloned `<tr>` injected via
+ * `dangerouslySetInnerHTML`. This class replays the minimal subset that the
+ * clone needs:
+ *   - selection column gutter + `position: relative` so the absolute handle
+ *     lands correctly
+ *   - hide the row index inside the overlay (drag preview shouldn't carry
+ *     a stale ordinal)
+ *   - force the checkbox (`.nb-origin-node`) absolute-centered and visible
+ *     regardless of hover/checked state, so the selection cell isn't empty
+ */
+export const overlayCellStylesClassName = css`
+  .ant-table-cell.ant-table-selection-column {
+    padding-left: ${SORT_HANDLE_GUTTER}px !important;
+    position: relative;
+  }
+  .nb-table-index {
+    display: none !important;
+  }
+  .nb-row-selection-cell {
+    position: relative;
+    display: inline-block;
+    min-width: 22px;
+    min-height: 22px;
+    vertical-align: middle;
+  }
+  .nb-row-selection-cell .nb-origin-node {
+    position: absolute;
+    inset: 0;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+  }
+`;