Render Virtual Items with transform instead of top property

[CarusoX]

Hi! Is there a way to modify the virtualized story on the storybook to render the items without the top style property that react-tiny-virtual-list provides? I am trying to replace top: ${start}px with transform: translateY(${start}px) or something similar, since I've read that using transform is actually more performance-friendly than using top.

I've been trying to do it without any luck, could you point me in the right direction?

[clauderic]

I've worked a lot with virtualized lists, and in my experience the performance is actually worse when using transform instead of top to position virtualized elements, because the elements first need to be painted on screen at top: 0 and then translated to their new position using transform.

That said, you could easily fork react-tiny-virtual-list (or some other virtualization library) and apply transforms instead of top if you'd like to measure the performance difference yourself.

[lukesmurray]

For other people interested in doing this it is possible. You can follow the pattern from css.ts to build your transform and then you need to set the measuring prop on DndContext to measure rects including the transform (source for measure code)

import {getClientRect} from "@dnd-kit/core"

<DndContext measuring={{
        droppable: {
          measure: getClientRect,
        },
        draggable: {
          measure: getClientRect,
        },
        dragOverlay: {
          measure: getClientRect,
        },
      }}>

The library defaults to transform agnostic rects which is why out of the box manipulating the transform on your own does not work. Once you set measure correctly, as long as your transform is also set correctly, everything should work.

One last gotcha, in the dragOverlay you do not want to apply the offset from your virtualized list.

Hopefully that helps other people who had this issue.

[lukesmurray]

solution I posted is close but doesn't quite work.

[lukesmurray]

Ok so I found a workaround that does work but its a bit more complicated. You need to set data-virtual-top as an attribute in your list, then write your own custom measure function

  function getTransformAgnosticVirtualAwareClientRect(element: HTMLElement) {
    return getVirtualAwareClientRect(element, { ignoreTransform: true });
  }

  function getVirtualAwareClientRect(
    element: HTMLElement,
    options: { ignoreTransform?: boolean } = { ignoreTransform: false }
  ) {
    const rect = getClientRect(element, options);
    const topRaw = element.getAttribute("data-virtual-top");
    invariant(
      isDefined(topRaw),
      "data-virtual-top is not defined on virtual row"
    );
    const top = parseInt(topRaw, 10);
    return {
      ...rect,
      top: rect.top + top,
      bottom: rect.bottom + top,
    };
  }

then pass that as the measure value for droppable and draggable

<DndContext measuring={{
        droppable: {
          measure: getTransformAgnosticVirtualAwareClientRect,
        },
        draggable: {
          measure: getTransformAgnosticVirtualAwareClientRect,
        }
      }}>