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
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.