I love the new lab feature “Windowed Panes”. It allows opening up even more references for the project I am working on.
The corresponding Feature Request is Arbitrary number of panes and the ability to arrange them freely, it has 20 upvotes.
In this topic I share a few more things I found out.
The JavaScript library used is react-mosaic
. Here is a Demo of it. You can it has a nice flat styling and the toolbar can have a title, many buttons and even dropdown menus. I think the document menu could be integrated there to always be visible.
Pane Management
- To split a pane use Shift + Click on a reference or Ctrl + Shift + P.
- The first split is horizontal.
- After that the split direction depends on the previous direction: If a pane is part of a horizontal pair, then it will split vertical and vice versa.
- To rearrage panes drag the title bar. This way you can also form a column layout which is not possible with the default splitting behavior.
- To resize panes drag the divider.
- To enlarge a pane click the left toolbar button.
URL Format - Saving and Restoring Workspaces
Previously we had this URL format: https://remnote.io/document/LEFT_REM_ID/RIGHT_REM_ID
specifying the opened rem id of the left and right pane.
The new pane layout also has an URL format! E.g. this is the URL for the screenshot above:
https://www.remnote.io/d/(REM_ID_1)_((REM_ID_2)-((REM_ID_3)_(REM_ID_4)_50)-50)_50
- A horizontal split has the form:
(LEFT)_(RIGHT)_LEFTWIDTH
whereLEFT
andRIGHT
are rem IDs andLEFTWIDTH
is the percentage of horizontal space the left pane occupies. - A vertical split has the form:
(TOP)-(BOTTOM)-TOPWIDTH
which is analogous to the horizontal form except it uses dashes instead of underscores.
These can be nested to specify arbitrary layouts.
Like previously the URLs are used to make the Forward/Backward navigation possible.
In the web app you can bookmark it to save a workspace! The link can also be pasted into RemNote and clicking it restores the workspace directly.
This does not work in the Desktop App yet.
Styling
Understandably the visuals of a lab feature are not polished yet. But on the demo above you can see how it can look in the end. All windowing buttons have CSS classes you can target.
Here some CSS for a flat style similar to the demo:
CSS
.mosaic-window-toolbar {}
.mosaic-window-toolbar .mosaic-window-title {}
.mosaic-window-toolbar .mosaic-window-controls {}
.mosaic-default-control {
color: #738694;
background: none;
display: -webkit-inline-box;
display: inline-flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-webkit-box-align: center;
align-items: center;
border: none;
cursor: pointer;
font-size: 14px;
-webkit-box-pack: center;
justify-content: center;
padding: 5px 10px;
text-align: left;
vertical-align: middle;
min-height: 30px;
min-width: 30px;
}
.mosaic-default-control:hover {
background: rgba(167,182,194,.3);
}
.mosaic-default-control:active {
background: rgba(115,134,148,.3);
}
TODO
A few things have to still be implemented for this to become the default:
- Polished Styling
- History handling: Resize operations should be skipped
- Ability to Maximize window and/or close others
- Shortcuts to move between panes, close panes, split panes (default, horizontal, vertical), swap panes
- Save and restore layouts (Pin Multiple Panes to Make Workspace, Desktop App: Copy URL and ability to open RemNote document URLs)
- Maybe include document menu into the title bar