React Grid Layout

Team 1 - Erik Karlsson

Implementation of React Grid Layout, supported by earlier research and their library’s Github documentation.

​

Gridlayout (issue#189/pull-request#210).

• Initial version used to experiment with the library and available features.
• Gridlayout with hardcoded starting positions.
• Grid items stored in an array containing coordinate, ID and size attributes.
• Views rendered by specifying grid item ID and the view component inside div elements.

Add & Remove views

Team 1 - Erik Karlsson

Natural step after implementation of gridlayout to improve useability, add and remove view methods.

​

Add view (issue#215/pull-request#282).

• Grid now use “useState”.
• Used to update view positions as well as new views added to grid.
• Triggers react to re-render when layout change.
• Takes the view component as parameter and adds it to the array.
• Updates the layout by setting the layout state.
• The array is iterated inside React Grid layout component, which renders the views.

​

Remove the view (issue#285/pull-request#359).

• Applied to every view added.
• Only works/displayed in “edit-mode”.
• Easy to use, natural placement of closing function.
• Removed by filtering out the view by id.