Research if and how we can export react grid layout matrix #200

New issue

Closed

opened 2026-04-09 09:21:36 +00:00 by a24vinla · 4 comments

a24vinla commented

2026-04-09 09:21:36 +00:00

Collaborator

If we can export/save the active positions and sizes of grid elements it would be help us when saving each users personal screen.
This has examples of the matrices

Parent Issue: #173

If we can export/save the active positions and sizes of grid elements it would be help us when saving each users personal screen. [This](https://react-grid-layout.github.io/react-grid-layout/examples/00-showcase.html) has examples of the matrices Parent Issue: #173

a24vinla added the

frontEnd

research

labels

2026-04-09 09:21:36 +00:00

b24idalu was assigned by c24elipe

2026-04-09 09:28:27 +00:00

b24idalu commented

2026-04-09 10:02:54 +00:00

Collaborator

This link has a function that listens to layout changes and then uses the "stringifyLayout()" to print the positions of all cards. May need to modify it a bit to fit the code we have, but should be a good start.

It needs a class to work, the class should be the grid system. In the bottom of the grid system it uses the following line that leads to the file i linked:

if (process.env.STATIC_EXAMPLES === true) {
  import("../test-hook.jsx").then(fn => fn.default(BasicLayout));
}

This [link](https://github.com/react-grid-layout/react-grid-layout/blob/master/test/test-hook.jsx) has a function that listens to layout changes and then uses the "stringifyLayout()" to print the positions of all cards. May need to modify it a bit to fit the code we have, but should be a good start. It needs a class to work, the class should be the grid system. In the bottom of the grid system it uses the following line that leads to the file i linked: ``` if (process.env.STATIC_EXAMPLES === true) { import("../test-hook.jsx").then(fn => fn.default(BasicLayout)); } ```

a24vinla self-assigned this

2026-04-09 10:17:57 +00:00

a24vinla commented

2026-04-09 10:19:48 +00:00

Author

Collaborator

This link also shows how you can load a preexisting layout from local storage. We should be able to emulate this.

This [link](https://github.com/react-grid-layout/react-grid-layout/blob/master/test/examples/07-localstorage.jsx) also shows how you can load a preexisting layout from local storage. We should be able to emulate this.

a24vinla commented

2026-04-09 10:23:57 +00:00

Author

Collaborator

This has the source code for the layout class which has a CloneLayout function and a validate function, both of which could be valuable.

[This](https://github.com/react-grid-layout/react-grid-layout/blob/master/src/core/layout.ts) has the source code for the layout class which has a CloneLayout function and a validate function, both of which could be valuable.

a24vinla commented

2026-04-09 11:33:56 +00:00

Author

Collaborator

The difficult part will not be to get positions of objects and general grid settings, but rather storing positions and which view is used. Will close this issue as it is confirmed to be possible.

a24vinla closed this issue

2026-04-09 11:34:00 +00:00

a24vinla referenced this issue

2026-04-10 07:24:57 +00:00

Card layout config #217