onTouchMove stops mid zoom

My demo (https://codesandbox.io/embed/react-konva-basic-demo-hh582) works but live.

But I get onTouchMove running several times then it stops for some reason. I’ve narrowed it down to something to do with my Group component. I think the state causes a rerender which seems to throw off the component but for scale up and down with button I need to use state. Any way around this?

 <Group
              rotation={this.state.rotation}
              x={x_pos}
              y={y_pos}
              draggable
              scaleX={this.state.scale}
              scaleY={this.state.scale}
              ref={node => {
                this.groupRef = node;
              }}
              dragBoundFunc={pos => {
                const rotDegrees = rotation % 360;
                const upright =
                  rotDegrees == 0 || rotDegrees == 180 ? true : false;

                const top = upright
                  ? this.state.imageHeight / 2
                  : this.state.imageWidth / 2;
                const left = upright
                  ? this.state.imageWidth / 2
                  : this.state.imageHeight / 2;
                const bottom = upright
                  ? window.innerHeight - 56 - this.state.imageHeight / 2
                  : window.innerHeight - 56 - this.state.imageWidth / 2; // here also we've subtract topbar height from canvas container
                const right = upright
                  ? this.state.width - this.state.imageWidth / 2
                  : this.state.width - this.state.imageHeight / 2;

                let x = pos.x;
                let y = pos.y;

                if (pos.y > bottom) {
                  y = bottom;
                } else if (pos.y < top) {
                  y = top;
                }

                if (pos.x > right) {
                  x = right;
                } else if (pos.x < left) {
                  x = left;
                }

                return {
                  x,
                  y
                };
              }}
              onTouchMove={res => {
                const stage = res.currentTarget;
                var touch1 = res.evt.touches[0];
                var touch2 = res.evt.touches[1];

                if (touch1 && touch2) {
                  var dist = this.getDistance(
                    {
                      x: touch1.clientX,
                      y: touch1.clientY
                    },
                    {
                      x: touch2.clientX,
                      y: touch2.clientY
                    }
                  );

                  if (!this.lastDist) {
                    this.lastDist = dist;
                  }

                  console.log("scale state:", this.state.scale);

                  var scale = (stage.scaleX() * dist) / this.lastDist;
                  this.setScale(scale);
                  console.log("calculated scale:", scale);

                  this.lastDist = dist;
                }
              }}
              onTouchEnd={() => {
                this.lastDist = 0;
              }}
            >

  handleScalePlus = () => {
    if (this.mounted) {
      let scale = this.state.scale + 0.1;
      this.setState({
        scale: scale > 3 ? 3 : scale
      });
    }
  };

  handleScaleMinus = () => {
    if (this.mounted) {
      let scale = this.state.scale - 0.1;
      this.setState({
        scale: scale < 1 ? 1 : scale
      });
    }
  };

  setScale = scale => {
    if (this.mounted) {
      if (scale < 3 && scale > 1) {
        this.setState({
          scale
        });
      }
    }
  };

[lavrton]

Or attach manually:

<Group
  onTouchStart={(e) => {
        e.target.setPointerCapture(e.pointerId);
  }}
/>

[lavrton]

On my device (ios safari) multitouch scale with zoom whole page (browser behavior). But I guess we need to prevent it. I created this demo: https://codesandbox.io/s/react-konva-multitouch-scale-demo-dtci9 res.evt.preventDefault();

It works ok for me.