react-planner
react-planner copied to clipboard
Saving project after modifying group attributes fails
While modifying groups, for example changing the rotation and then saving the project will deliver a JSON without any elements or without the last changes.
Initial JSON:
{"unit":"cm","layers":{"layer-1":{"id":"layer-1","altitude":0,"order":0,"opacity":1,"name":"default","visible":true,"vertices":{"a-C5pn0gq2":{"id":"a-C5pn0gq2","type":"","prototype":"vertices","name":"Vertex","misc":{},"selected":false,"properties":{},"visible":true,"x":992.9375379370956,"y":1563.0698829353446,"lines":["uHbTJC-Ru"],"areas":[]},"pUDRmYzOg6":{"id":"pUDRmYzOg6","type":"","prototype":"vertices","name":"Vertex","misc":{},"selected":false,"properties":{},"visible":true,"x":1062.432548013639,"y":1829.0937924756606,"lines":["uHbTJC-Ru"],"areas":[]}},"lines":{"uHbTJC-Ru":{"id":"uHbTJC-Ru","type":"wall","prototype":"lines","name":"Wall","misc":{},"selected":false,"properties":{"height":{"length":300},"thickness":{"length":20},"textureA":"bricks","textureB":"bricks"},"visible":true,"vertices":["a-C5pn0gq2","pUDRmYzOg6"],"holes":[]}},"holes":{},"areas":{},"items":{"NVGrtlGzp":{"id":"NVGrtlGzp","type":"armchairs","prototype":"items","name":"Armchairs","misc":{},"selected":false,"properties":{"altitude":{"length":0,"unit":"cm"},"seat":1,"flip":false},"visible":true,"x":1228.8628567926958,"y":1646.493785354111,"rotation":-60}},"selected":{"vertices":[],"lines":[],"holes":[],"areas":[],"items":[]}}},"grids":{"h1":{"id":"h1","type":"horizontal-streak","properties":{"step":20,"colors":["#808080","#ddd","#ddd","#ddd","#ddd"]}},"v1":{"id":"v1","type":"vertical-streak","properties":{"step":20,"colors":["#808080","#ddd","#ddd","#ddd","#ddd"]}}},"selectedLayer":"layer-1","groups":{"Q-mdPw74Y":{"id":"Q-mdPw74Y","type":"","prototype":"groups","name":"Test","misc":{},"selected":false,"properties":{},"visible":true,"x":1003.9253731676763,"y":1523.297299098249,"rotation":90,"elements":{"layer-1":{"lines":["uHbTJC-Ru"],"items":["NVGrtlGzp"]}}}},"width":3000,"height":2000,"meta":{},"guides":{"horizontal":{},"vertical":{},"circular":{}}}
I had 2 objects, after selecting the group, changing the rotation and then clicking on save I got the following JSON file:
{"unit":"cm","layers":{"layer-1":{"id":"layer-1","altitude":0,"order":0,"opacity":1,"name":"default","visible":true,"vertices":{},"lines":{},"holes":{},"areas":{},"items":{},"selected":{"vertices":[],"lines":[],"holes":[],"areas":[],"items":[]}}},"grids":{"h1":{"id":"h1","type":"horizontal-streak","properties":{"step":20,"colors":["#808080","#ddd","#ddd","#ddd","#ddd"]}},"v1":{"id":"v1","type":"vertical-streak","properties":{"step":20,"colors":["#808080","#ddd","#ddd","#ddd","#ddd"]}}},"selectedLayer":"layer-1","groups":{},"width":3000,"height":2000,"meta":{},"guides":{"horizontal":{},"vertical":{},"circular":{}}}
The problem is caused by toolbar.jsx "shouldComponentUpdate". Commenting the code fixes this problem.
/*
shouldComponentUpdate(nextProps, nextState) {
return this.props.state.mode !== nextProps.state.mode ||
this.props.height !== nextProps.height ||
this.props.width !== nextProps.width ||
this.props.state.alterate !== nextProps.state.alterate;
}*/
I also noticed this issue only when I refreshed the website the save did not work.
Steps to reproduce:
- New project
- Draw some walls
- Save project
- Load the project - all good!
Then:
- New project
- Draw some walls
- Refresh the website (F5)
- Save project
- Load the project - nothing appears!
The Redux state is the same for both cases before we save. What happened was that the state in Toolbar
in toolbar.jsx
did not get updated due to misuse of shouldComponentUpdate
. The easiest solution was to remove it as @nano-michael mentioned.