0

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

Roman
  • 3
  • 1
  • How exactly do you need to fill free space? Why do you need it? – lavrton Mar 02 '22 at 17:13
  • @lavrton I need to do something like [fotor collage maker](https://www.fotor.com/features/collage). There are some templates and these templates have areas that can be resized, and when you change one area, the free space that appears must be filled with the neighboring area. I hope now it is clear what I want to do? – Roman Mar 02 '22 at 17:27
  • You would need to calculate the remaining space and adjust the other picture frames to fit. It is not specifically a technical question about Konva, react or javascript. You must develop a model of each page layout and handle the positioning and sizing yourself. You can then realise this visually via konva or any other canvas lib. – Vanquished Wombat Mar 03 '22 at 11:20
  • @VanquishedWombat I understand that. I don't understand how to do it right, because as I did now, I just calculate the new width and height for the template and update it, but it will not work as it should. if you can make a working demo i will be very grateful – Roman Mar 03 '22 at 12:57

1 Answers1

0

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.

lavrton
  • 18,973
  • 4
  • 30
  • 63
  • Thanks for the answer. did not quite understand the idea with `y` position of divider, if you do not bother to explain in more detail, I will be very grateful :) – Roman Mar 04 '22 at 17:17