CODEWITHSUNDEEP
javascriptreactjskonvajsreact-konvakonvajs-reactjs
Anab
Anab

Reputation: 99

Rectangle does not re-render properly after transformation in react-konva

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.

Upvotes: 0

Views: 1744

Answers (1)

lavrton
lavrton

Reputation: 20373

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

Upvotes: 3

Related Questions