cvdlab / react-planner

:pencil2: A React Component for plans design. Draw a 2D floorplan and navigate it in 3D mode.
https://cvdlab.github.io/react-planner
MIT License
1.3k stars 460 forks source link

Saving project after modifying group attributes fails #188

Open nano-michael opened 5 years ago

nano-michael commented 5 years ago

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":{}}}

nano-michael commented 4 years ago

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;
  }*/
Magnuti commented 3 years ago

I also noticed this issue only when I refreshed the website the save did not work.

Steps to reproduce:

  1. New project
  2. Draw some walls
  3. Save project
  4. Load the project - all good!

Then:

  1. New project
  2. Draw some walls
  3. Refresh the website (F5)
  4. Save project
  5. 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.