0

I have been using this (https://github.com/oasis10702/konva-simple-example) code in a project of mine and everything works fine. However, updating react and react-konva to the latest version causes some to me unintended behavior. When resizing a rectangle with the transformer, it is scaling the border stroke, see image. scaleX and scaleY doesn't either seem to reset which make it perform the scaling every time i move the rectangle.

Rectangle

I'm new to both React and Konva and wonder if there is some logic that have changed during the new versions that I should consider to mitigate this.

Try to resize the rectangle in the below sandbox. https://codesandbox.io/embed/vyv106x295 If I update the dependencies to the latest, the behaviour becomes changed.

I've tried solving it with https://github.com/konvajs/konva/issues/401 but it doesn't seem to help in this version.

Anab
  • 99
  • 2
  • 8
  • 1
    How the previous version was working for you? And what is your main issue? Just stroke rendering? – lavrton May 02 '19 at 12:28
  • The version on the github example provided in the description works perfectly fine. (That is "react, react-dom": 16.4.2, "konva": "2.2.1", "react-konva": "1.7.12") When I have the newer versions, i seem to have problem with the scaling of the rectangles, scaleX and scaleY doesn't seem to go back to 1. I think the best way to reproduce what I'm trying to explain is to try out the github example and update everything to the latest versions. – Anab May 02 '19 at 12:33
  • https://codesandbox.io/embed/vyv106x295 – Anab May 02 '19 at 14:07

1 Answers1

3

The main change was the strict mode. You can just enable it back for all shapes, or just one rectangle:

<Rect {...someProps} scaleX={1} scaleY={1}  _useStrictMode />

For more info see: https://github.com/konvajs/react-konva#strict-mode

lavrton
  • 18,973
  • 4
  • 30
  • 63