feat/improved panel positioning

Author: revomanik

docs

@@ -131,11 +131,70 @@ test.describe('filtering', () => {
       };
     });
 
-    expect(panelLeft).toBeCloseTo(buttonLeft, 0);
-    expect(panelTop).toBeCloseTo(buttonBottom, 0);
+    expect(Math.abs(panelLeft - buttonLeft)).toBeLessThanOrEqual(2);
+    expect(Math.abs(panelTop - buttonBottom)).toBeLessThanOrEqual(2);
     expect(panelBottom).toBeGreaterThan(wrapperBottom);
   });
 
+  test('flips filter dialog above the button near the viewport bottom', async ({ page }) => {
+    await page.setViewportSize({ width: 900, height: 260 });
+
+    const source: SampleRow[] = [
+      { id: 501, name: 'Alice', role: 'Admin', city: 'Lisbon' },
+      { id: 502, name: 'Ben', role: 'Engineer', city: 'Porto' },
+    ];
+
+    const columns = buildColumns([
+      { prop: 'id', name: 'ID' },
+      { prop: 'name', name: 'Name' },
+      { prop: 'role', name: 'Role', filter: true, ...withHeaderTestId('bottom-filter-role') },
+      { prop: 'city', name: 'City' },
+    ]);
+
+    await mountGrid(page, { columns, source, filter: true, height: 160 });
+    await page.locator('revo-grid').evaluate(grid => {
+      const wrapper = grid.parentElement;
+      if (!wrapper) {
+        throw new Error('Grid wrapper was not found');
+      }
+      wrapper.style.marginTop = '160px';
+    });
+
+    await page
+      .getByTestId('bottom-filter-role')
+      .locator(SELECTORS.filterButton)
+      .click();
+
+    const filterPanel = page.locator(SELECTORS.filterPanel);
+    await expect(filterPanel).toBeVisible();
+
+    const { actionBottom, buttonTop, panelBottom, panelTop, viewportBottom } = await page.evaluate(() => {
+      const dialog = document.querySelector('revogr-filter-panel dialog');
+      const button = document
+        .querySelector('[data-testid="bottom-filter-role"]')
+        ?.querySelector('.rv-filter');
+      const actions = dialog?.querySelector('.filter-actions');
+      if (!button || !dialog || !actions) {
+        throw new Error('Filter button, dialog, or filter actions were not found');
+      }
+      const buttonRect = button.getBoundingClientRect();
+      const panelRect = dialog.getBoundingClientRect();
+      const actionRect = actions.getBoundingClientRect();
+      return {
+        actionBottom: actionRect.bottom,
+        buttonTop: buttonRect.top,
+        panelBottom: panelRect.bottom,
+        panelTop: panelRect.top,
+        viewportBottom: window.innerHeight,
+      };
+    });
+
+    expect(panelTop).toBeGreaterThanOrEqual(8);
+    expect(panelBottom).toBeLessThanOrEqual(buttonTop + 2);
+    expect(panelBottom).toBeLessThanOrEqual(viewportBottom - 8);
+    expect(Math.abs(actionBottom - panelBottom)).toBeLessThanOrEqual(2);
+  });
+
   test('renders filter condition actions outside select input on the same row', async ({ page }) => {
     const source: SampleRow[] = [
       { id: 501, name: 'Alice', role: 'Admin', city: 'Lisbon' },
@@ -223,8 +282,8 @@ test.describe('filtering', () => {
     await filterPanel.evaluate((panel) => {
       const rows = Array.from(panel.querySelectorAll('.multi-filter-list-row'));
       const sourceHandle = rows[1].querySelector('.reorder-button');
-      const targetHandle = rows[0].querySelector('.reorder-button');
-      if (!sourceHandle || !targetHandle) {
+      const targetRow = rows[0];
+      if (!sourceHandle || !targetRow) {
         throw new Error('Filter reorder controls were not found');
       }
       const dataTransfer = new DataTransfer();
@@ -233,12 +292,25 @@ test.describe('filtering', () => {
         cancelable: true,
         dataTransfer,
       }));
-      targetHandle.dispatchEvent(new DragEvent('dragover', {
+      targetRow.dispatchEvent(new DragEvent('dragover', {
         bubbles: true,
         cancelable: true,
         dataTransfer,
       }));
-      targetHandle.dispatchEvent(new DragEvent('drop', {
+    });
+
+    await expect(filterPanel.locator('.multi-filter-list-row').nth(0)).toHaveClass(/filter-row-drag-over/);
+
+    await filterPanel.evaluate((panel) => {
+      const rows = Array.from(panel.querySelectorAll('.multi-filter-list-row'));
+      const sourceHandle = rows[1].querySelector('.reorder-button');
+      const targetRow = rows[0];
+      if (!sourceHandle || !targetRow) {
+        throw new Error('Filter reorder controls were not found');
+      }
+      const dataTransfer = new DataTransfer();
+      dataTransfer.setData('text/plain', '2');
+      targetRow.dispatchEvent(new DragEvent('drop', {
         bubbles: true,
         cancelable: true,
         dataTransfer,
@@ -250,6 +322,7 @@ test.describe('filtering', () => {
       }));
     });
 
+    await expect(filterPanel.locator('.filter-row-drag-over')).toHaveCount(0);
     await expect(filterPanel.locator('.select-filter').nth(0)).toHaveValue('eq');
     await expect(filterPanel.locator('.select-filter').nth(1)).toHaveValue('contains');
     await expect(filterInputs.nth(0)).toHaveValue('Engineer');

e2e/filtering.spec.ts

@@ -0,0 +1,13 @@
+import { expect } from '@playwright/test';
+import { matchers, createConfig } from '@stencil/playwright';
+
+expect.extend(matchers);
+
+export default createConfig({
+  testDir: 'e2e',
+  testMatch: ['**/*.e2e.ts', '**/*.spec.ts'],
+  use: {
+    baseURL: 'http://localhost:3334',
+  },
+  reporter: [['list']],
+});

playwright.local-3334.config.ts

@@ -36,6 +36,7 @@ const defaultType: FilterType = 'none';
 const FILTER_LIST_CLASS = 'multi-filter-list';
 const FILTER_LIST_CLASS_ACTION = 'multi-filter-list-action';
 const FILTER_ID = 'add-filter';
+const VIEWPORT_PADDING = 8;
 
 /**
  * Filter panel for editing filters
@@ -170,19 +171,27 @@ export class FilterPanel {
           }
 
           const extra = this.renderExtra(prop, index);
+          const isDragging = this.draggedFilterId === filter.id;
+          const isDragOver = this.dragOverFilterId === filter.id && !isDragging;
 
           return (
             <div key={filter.id} class={FILTER_LIST_CLASS}>
-              <div ref={el => el?.classList.add('multi-filter-list-row')}>
+              <div
+                class={{
+                  'multi-filter-list-row': true,
+                  'filter-row-dragging': isDragging,
+                  'filter-row-drag-over': isDragOver,
+                }}
+                onDragOver={e => this.onFilterDragOver(e, filter.id)}
+                onDragLeave={() => this.onFilterDragLeave(filter.id)}
+                onDrop={e => this.onFilterDrop(e, prop, filter.id)}
+              >
                 {visibleFilterCount > 1 ? (
                   <ReorderButton
-                    dragging={this.draggedFilterId === filter.id}
-                    dragOver={this.dragOverFilterId === filter.id && this.draggedFilterId !== filter.id}
+                    dragging={isDragging}
+                    dragOver={isDragOver}
                     onDragStart={e => this.onFilterDragStart(e, filter.id)}
                     onDragEnd={() => this.onFilterDragEnd()}
-                    onDragOver={e => this.onFilterDragOver(e, filter.id)}
-                    onDragLeave={() => this.onFilterDragLeave(filter.id)}
-                    onDrop={e => this.onFilterDrop(e, prop, filter.id)}
                   />
                 ) : ''}
                 <div class={{ 'select-input': true }}>
@@ -234,26 +243,49 @@ export class FilterPanel {
     }
 
     if (this.changes.autoCorrect !== false) {
+      this.autoCorrect(this.dialog);
       requestAnimationFrame(() => this.autoCorrect(this.dialog));
     }
   }
 
   private autoCorrect(el?: HTMLElement | null) {
-    if (!el) {
+    if (!el || !this.changes) {
       return;
     }
 
+    el.style.maxHeight = '';
+    el.style.left = `${this.changes.x}px`;
+    el.style.top = `${this.changes.y}px`;
+
     const pos = el.getBoundingClientRect();
-    const maxLeft = Math.max(0, window.innerWidth - pos.width);
-    const maxTop = Math.max(0, window.innerHeight - pos.height);
+    const anchorTop = this.changes.anchorY ?? this.changes.y;
+    const anchorBottom = this.changes.y;
+    const spaceAbove = Math.max(0, anchorTop - VIEWPORT_PADDING);
+    const spaceBelow = Math.max(0, window.innerHeight - anchorBottom - VIEWPORT_PADDING);
+    const openAbove = pos.height > spaceBelow && spaceAbove > spaceBelow;
+    const availableHeight = Math.max(
+      VIEWPORT_PADDING,
+      openAbove ? spaceAbove : spaceBelow,
+    );
 
-    if (pos.left > maxLeft) {
-      el.style.left = `${maxLeft}px`;
-    }
+    el.style.maxHeight = `${availableHeight}px`;
 
-    if (pos.top > maxTop) {
-      el.style.top = `${maxTop}px`;
-    }
+    const adjustedPos = el.getBoundingClientRect();
+    const maxLeft = Math.max(
+      VIEWPORT_PADDING,
+      window.innerWidth - adjustedPos.width - VIEWPORT_PADDING,
+    );
+    const maxTop = Math.max(
+      VIEWPORT_PADDING,
+      window.innerHeight - adjustedPos.height - VIEWPORT_PADDING,
+    );
+    const left = Math.min(Math.max(VIEWPORT_PADDING, this.changes.x), maxLeft);
+    const top = openAbove
+      ? Math.min(Math.max(VIEWPORT_PADDING, anchorTop - adjustedPos.height), maxTop)
+      : Math.min(Math.max(VIEWPORT_PADDING, anchorBottom), maxTop);
+
+    el.style.left = `${left}px`;
+    el.style.top = `${top}px`;
   }
 
   private onDialogMouseDown(e: MouseEvent) {

src/plugins/filter/filter.panel.tsx

@@ -270,6 +270,7 @@ export class FilterPlugin extends BasePlugin {
       ...this.filterCollection[prop],
       x: buttonPos.x,
       y: buttonPos.y + buttonPos.height,
+      anchorY: buttonPos.y,
       autoCorrect: true,
       filterTypes: this.getColumnFilter(e.detail.filter),
       filterItems: this.multiFilterItems,

src/plugins/filter/filter.plugin.tsx

@@ -18,6 +18,7 @@ revogr-filter-panel .filter-panel-dialog {
   border: 1px solid var(--revo-grid-filter-panel-border, #cecece);
   transform-origin: 62px 0px;
   box-shadow: 0 5px 18px -2px var(--revo-grid-filter-panel-shadow, rgba(0, 0, 0, 0.15));
+  box-sizing: border-box;
   padding: 10px;
   border-radius: 8px;
   margin: 0;
@@ -56,8 +57,16 @@ revogr-filter-panel .filter-panel-dialog {
   }
 
   .filter-actions {
+    position: sticky;
+    right: 0;
+    bottom: -10px;
+    left: 0;
+    z-index: 1;
     text-align: right;
-    margin-right: -5px;
+    margin: 10px -10px -10px;
+    padding: 0 5px 10px 10px;
+    background: var(--revo-grid-filter-panel-bg, #fff);
+    border-top: 1px solid var(--revo-grid-filter-panel-divider, #d9d9d9);
 
     button {
       margin-top: 10px;
@@ -192,6 +201,23 @@ revogr-filter-panel .filter-panel-dialog {
     display: flex;
     align-items: center;
     gap: 6px;
+    position: relative;
+
+    &.filter-row-dragging {
+      opacity: 0.65;
+    }
+
+    &.filter-row-drag-over::before {
+      content: '';
+      position: absolute;
+      top: -4px;
+      right: 0;
+      left: 0;
+      height: 2px;
+      background: var(--revo-grid-filter-panel-reorder-accent, #007cb2);
+      border-radius: 999px;
+      box-shadow: 0 0 0 2px var(--revo-grid-filter-panel-bg, #fff);
+    }
   }
 
   .multi-filter-list-action {
@@ -234,10 +260,6 @@ revogr-filter-panel .filter-panel-dialog {
     transform: scaleX(0.8);
     width: 16px;
 
-    &.filter-row-dragging {
-      opacity: 0.55;
-    }
-
     &.filter-row-drag-over {
       color: var(--revo-grid-filter-panel-reorder-accent, #007cb2);
     }

src/plugins/filter/filter.style.scss

@@ -160,6 +160,10 @@ export interface MultiFilterItem {
 export interface ShowData extends FilterItem, Omit<ColumnRegular, 'filter'> {
   x: number;
   y: number;
+  /**
+   * Top viewport coordinate of the element the filter panel is anchored to.
+   */
+  anchorY?: number;
   /**
    * Auto correct position if it is out of document bounds
    */