how to do it correctly so that when transform one shape, transform another shape in react-konva?

Question

I need to transform one shape to also transform the other so that it fills the free space. How can I do it right in react? Now what I did is not working as it should at all and I have no ideas how to do it differently

Demo: https://stackblitz.com/edit/vitejs-vite-q5jn1d?file=src/Template.jsx

Answer 1

You don't need to do any magic with Konva nodes and manually touch them. Just work with your react state.

onChange={(newAttrs) => {
  setTemplates((currTemplates) =>
    currTemplates.map((t) => {
      if (t.name === newAttrs.name) {
        return { anchors: t.anchors, ...newAttrs };
      } else if (t.name === 'vertical-p1') {
        return {
          ...t,
          height: newAttrs.y - 10,
        };
      } else if (t.name === 'vertical-p2') {
        return {
          ...t,
          y: newAttrs.height + 10,
          height: 600 - (newAttrs.height + 10),
        };
      }
    })
  );
}}

https://stackblitz.com/edit/vitejs-vite-ynemv6?file=src%2FApp.jsx

Also, you can improve your state more, to have less possible conficts. E.g. instead of defining "rectangles" in your state. You can just have width/height of canvas and y position of divider. The attributes for the shapes can be calculated from the state.