h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

added react-mosaic-component to IdeContainer.js #230

Merged
franknoirot merged 2 commits from franknoirot/218 into main 2021-03-09 09:44:40 +01:00
Conversation 2 Commits 2 Files Changed 5 +150 -15
franknoirot commented 2021-03-09 08:01:38 +01:00 (Migrated from github.com)
Copy Link

I prefer this react-mosaic-component layout manager package to react-grid-layout, because it feels lighter weight and the drag-and-drop functionality behaves as I would expect it to intuitively, where the layout reflows resizing the other elements to fill the available space given the moved item's new dimensions.

One cool feature of this package is that it allows for each pane to have a custom toolbar defined in a react component, so we could potentially incorporate the global toolbar buttons into the different panes if you preferred (save to editor, render to viewer, etc) or add a configuration gear icon button that allows the user to set preferences for each pane (like theme for the editor). And theming by CAD package seems very straightforward.

I had to add the layout state to useIdeState, otherwise the layout will reset on any rerender of the component.

I prefer this [`react-mosaic-component`](https://www.npmjs.com/package/react-mosaic-component) layout manager package to `react-grid-layout`, because it feels lighter weight and the drag-and-drop functionality behaves as I would expect it to intuitively, where the layout reflows resizing the other elements to fill the available space given the moved item's new dimensions. One cool feature of this package is that it allows for each pane to have a custom toolbar defined in a react component, so we could potentially incorporate the global toolbar buttons into the different panes if you preferred (save to editor, render to viewer, etc) or add a configuration gear icon button that allows the user to set preferences for each pane (like theme for the editor). And theming by CAD package seems very straightforward. I had to add the layout state to `useIdeState`, otherwise the layout will reset on any rerender of the component.
Irev-Dev (Migrated from github.com) approved these changes 2021-03-09 09:41:48 +01:00
Irev-Dev (Migrated from github.com) left a comment
Copy Link

Nice!

I've had a bit of a play and it looks good. I can already see it coming together. So good.

Nice! I've had a bit of a play and it looks good. I can already see it coming together. So good.
Irev-Dev commented 2021-03-09 09:44:30 +01:00 (Migrated from github.com)
Copy Link

I prefer this react-mosaic-component layout manager package to react-grid-layout, because it feels lighter weight and the drag-and-drop functionality behaves as I would expect it to intuitively, where the layout reflows resizing the other elements to fill the available space given the moved item's new dimensions.

Happy with this call.

> I prefer this [`react-mosaic-component`](https://www.npmjs.com/package/react-mosaic-component) layout manager package to `react-grid-layout`, because it feels lighter weight and the drag-and-drop functionality behaves as I would expect it to intuitively, where the layout reflows resizing the other elements to fill the available space given the moved item's new dimensions. Happy with this call.
Sign in to join this conversation.
Reviewers
No Reviewers
Irev-Dev
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
h3n3
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: h3n3/cadhub#230
Delete Branch "franknoirot/218"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?