fix(virtualizer): layout measure override, patch scale w/ offsetHeight (#30)

Author: damyanpetev

src/components/virtualizer.ts

@@ -1,12 +1,17 @@
 import { LitVirtualizer } from '@lit-labs/virtualizer/LitVirtualizer.js';
 import { registerComponent } from '../internal/register.js';
 import { GRID_BODY } from '../internal/tags.js';
+import { IgcFlowLayout } from '../internal/virt-flow-layout.js';
 
 export default class IgcVirtualizer extends LitVirtualizer {
   public static get tagName() {
     return GRID_BODY;
   }
 
+  public override layout: LitVirtualizer['layout'] = {
+    type: IgcFlowLayout,
+  };
+
   public static register(): void {
     registerComponent(IgcVirtualizer);
   }

src/internal/virt-flow-layout.ts

@@ -0,0 +1,25 @@
+import { FlowLayout } from '@lit-labs/virtualizer/layouts/flow.js';
+
+/**
+ * Override for the [built-in item measure function](https://github.com/lit/lit/blob/f243134b226735320b61466cebdaf0c1e574bfa7/packages/labs/virtualizer/src/Virtualizer.ts#L519-L524)
+ * @see {@link https://github.com/IgniteUI/igniteui-grid-lite/issues/20 #20} for more.
+ * @remarks
+ * Note: Unlike the built-in, this does _not_ measure margins and will not work with such.
+ */
+function measureItemWithScaleAdjust(element: HTMLElement) {
+  let { width, height } = element.getBoundingClientRect();
+  const offsetHeight = element.offsetHeight;
+  if (Math.abs(offsetHeight - height) > 1) {
+    // likely scaling, prefer the offsetHeight
+    // should check if its on rows vs virtualizer, but oh well
+    height = offsetHeight;
+  }
+  return { width, height };
+}
+
+export class IgcFlowLayout extends FlowLayout {
+  public override get measureChildren(): boolean {
+    // @ts-expect-error - Base class types this as boolean, but runtime accepts a function override
+    return measureItemWithScaleAdjust;
+  }
+}

test/virtualization.test.ts

@@ -0,0 +1,26 @@
+import { expect } from '@open-wc/testing';
+import GridTestFixture from './utils/grid-fixture.js';
+import data from './utils/test-data.js';
+
+const TDD = new GridTestFixture(data, { transform: 'scale(0.5, 0.5)' });
+
+describe('Grid scaled initial render', () => {
+  beforeEach(async () => await TDD.setUp());
+  afterEach(() => TDD.tearDown());
+
+  it('should position items correctly in virtualizer', async () => {
+    function checkRowTopTranslate(index: number) {
+      const row = TDD.rows.get(index).element;
+      const { height } = row.getBoundingClientRect();
+      const offsetHeight = row.offsetHeight;
+      const { transform } = row.style;
+
+      expect(offsetHeight / height).to.equal(2);
+      expect(transform).to.equal(`translate(0px, ${offsetHeight * index}px)`);
+    }
+
+    for (let i = 0; i < data.length; i++) {
+      checkRowTopTranslate(i);
+    }
+  });
+});