DragBoundFunc position incorrect on transformed stage

I implemented emulated screen scrolling of the canvas, using method 4 here: https://konvajs.org/docs/sandbox/Canvas_Scrolling.html#How-to-display-and-scroll-a-very-big-html5-canvas

Esentially the stage is re-positioned when we scroll like this:

      const PADDING = 500;
      function repositionStage() {
        var dx = scrollContainer.current.scrollLeft - padding;
        var dy = scrollContainer.current.scrollTop - padding;
        stage.current.container().style.transform = 'translate(' + dx + 'px, ' + dy + 'px)';
        stage.current.x(-dx);
        stage.current.y(-dy);
      }

Then I have a draggable rectangle with a dragBoundFunc like this:

<Rect
          height={32}
          width={120}
          fill={'red'}
          cornerRadius={8}
          draggable
          dragBoundFunc((pos) => { 
             console.log('position rectangle: ', pos) 
          }
/>

When the stage is initial (top: 0 , left: 0) the dragboundfunc returns the correct position. But as soon as I scroll the stage a bit , the position provided by the dragboundfunc is incorrect…

With the normal scrolling (not emulated) the dragBoundFunc position is always correct (even when the stage is scrolled)

[lavrton]

Just use dragmove event. Work with relative coordinates. They are much simpler to understand.

 onDragmove={(e) => {
                const pos = e.target.position();
                let newPosXgrid = Math.round(pos.x / 80) * 80;
                let newPosYgrid = Math.round(pos.y / 80) * 80;
                e.target.position({
                  x: newPosXgrid,
                  y: newPosYgrid
                });
}}

[jellohouse]

Ok that works great! Makes sense - I will start using onDragMove instead.

Thanks so much for everything @lavrton - you we’re super helpful!