Ability to track moving target element?

[spencerjsmall]

Hi! First of all, thanks for building such a great package. I'm trying to build an onboarding tutorial in my app's VueFlow editor, however given that the user can pan and zoom within the editor, certain target elements pointed to by the tour may move around the screen. There unfortunately appears to be no way of updating a step's position (or have it reattach to the target). So, it was be awesome to have an update method exported by the useVOnboarding hook that I could repeatedly call on viewport change. If there are any existing workarounds to this, please let me know!

[spencerjsmall]

I was able to come up with a workaround for my specific usecase using the onMove VueFlow hook:

onMove((event) => {
  const stepElement = document.querySelectorAll('[data-popper-placement]')?.[0];
  const viewportTransform = event.flowTransform;
  const deltaX = viewportTransform.x - previousViewport.x;
  const deltaY = viewportTransform.y - previousViewport.y;

  if (stepElement) {
    const transform = stepElement.style.transform;
    const match = /translate3d\(([^,]+)px, ([^,]+)px, ([^,]+)px\)/.exec(
      transform,
    );
    if (match) {
      const currentX = parseFloat(match[1]);
      const currentY = parseFloat(match[2]);
      stepElement.style.transform = `translate3d(${currentX + deltaX}px, ${currentY + deltaY}px, 0px)`;
    }
  }

  previousViewport.x = viewportTransform.x;
  previousViewport.y = viewportTransform.y;
});

This feels like overkill though.