Necesito transformar una forma para transformar también la otra para que llene el espacio libre. ¿Cómo puedo hacerlo bien en reaccionar? Ahora lo que hice no está funcionando como debería en absoluto y no tengo idea de cómo hacerlo de manera diferente
Demostración: https://stackblitz.com/edit/vitejs-vite-q5jn1d?file=src/Template.jsx
No necesita hacer magia con los nodos de Konva y tocarlos manualmente. Solo trabaja con tu estado de reacción.
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
Además, puedes mejorar más tu estado, para tener menos confictos posibles. Por ejemplo, en lugar de definir "rectángulos" en su estado. Solo puede tener el ancho/alto del lienzo y la posición y del divisor. Los atributos de las formas se pueden calcular a partir del estado.