How to get correct coordinates for InfiniteViewer?

[ronny-lark]

Environments

• Framework name: React
• Framework version: 18
• Component name: Selecto + InfiniteViewer
• Component version: 1.26.3 + 0.28.1

Description

I am trying to "reacreate" the Moveable demo where you draw new moveables using Selecto. However, I am unable to get the correct Selecto size and position after InviniteViewer is zoomed in. I have this function being called in onSelectEnd:

const onFinishDrawing = (event: OnSelectEnd) => {
    const { rect } = event;
    const { width: w, height: h, left, top } = rect;
    annotate(image?.id, left, top, w, h);
  };

But it returns incorrect left and top, even when fully zoomed out; they are relative to the screen, even though there is a dragContainer.

      <InfiniteViewer
        ref={viewerRef}
        className='w-full h-full border border-solid'
        displayVerticalScroll={false}
        displayHorizontalScroll={false}
        margin={0}
        threshold={0}
        useMouseDrag={!dragging && !drawing}
        zoomRange={[1, 5]}
        zoom={zoom}
        onPinch={(e) => setZoom(e.zoom)}
      >
        <Box ref={boxRef} className='relative' h={height} w={width} data-testid={testIds.viewport}>
          <Image src={files[fileIndex]?.url} data-testid={testIds.image} />
          {annotations.map((annotation) => (
            <AnnotationBox
              key={annotation.id}
              annotation={annotation}
              zoom={zoom}
              onDragToggle={onDragToggle}
              onUpdateAnnotation={(coords) => reposition(annotation.id, coords)}
            />
          ))}
        </Box>
      </InfiniteViewer>
        <Selecto
          boundContainer
          dragContainer={boxRef.current as HTMLElement | null}
          preventDefault
          onSelectEnd={onFinishDrawing}
        />

How can I get the correct measurements, relative to this image? As you can see from my snippet, I have a Box wrapper around the image and I do have the real image width and height.