You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+2-52Lines changed: 2 additions & 52 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -30,8 +30,6 @@ Features:
30
30
- maximize tab set (double click tab set header or use icon)
31
31
- tab overflow (show menu when tabs overflow, scroll tabs using mouse wheel)
32
32
- border tab sets
33
-
- popout tabs into new browser windows
34
-
- submodels, allow layouts inside layouts
35
33
- tab renaming (double click tab text to rename)
36
34
- theming - light, underline, gray, round and dark
37
35
- works on mobile devices (iPad, Android)
@@ -251,12 +249,11 @@ Use the standard `Layout` when:
251
249
252
250
## Model JSON Structure
253
251
254
-
The model json contains 4 top level elements:
252
+
The model json contains 3 top level elements:
255
253
256
254
- global - (optional) where global options are defined
257
255
- layout - where the main row/tabset/tabs layout hierarchy is defined
258
-
- borders - (optional) where up to 4 borders are defined ("top", "bottom", "left", "right").
259
-
- popouts - (optional) where the popout windows are defined
256
+
- borders - (optional) where up to 4 borders are defined ("top", "bottom", "left", "right")
260
257
261
258
The layout element is built up using 3 types of 'node':
262
259
@@ -380,53 +377,6 @@ Example:
380
377
| visibility | {visible} | called when the visibility of a tab changes |
381
378
| save | none | called before a tabnode is serialized to json, use to save node config by adding data to the object returned by node.getConfig() |
382
379
383
-
## Popout Windows
384
-
385
-
Tabs can be rendered into external browser windows (for use in multi-monitor setups)
386
-
by configuring them with the enablePopout attribute. When this attribute is present
387
-
an additional icon is shown in the tab header bar allowing the tab to be popped out
388
-
into an external window.
389
-
390
-
For popouts to work there needs to be an additional html page 'popout.html' hosted
391
-
at the same location as the main page (copy the one from examples/demo). The popout.html is the host page for the
392
-
popped out tab, the styles from the main page will be copied into it at runtime.
393
-
394
-
Because popouts are rendering into a different document to the main layout any code in the popped out
395
-
tab that uses the global document or window objects for event listeners will not work correctly (for example custom popup menus where the code uses document.addEventListener(...)),
396
-
they need to instead use the document/window of the popout. To get the document/window of the popout use the
397
-
following method on one of the elements rendered in the popout (for example a ref or target in an event handler):
In the above code selfRef is a React ref to the toplevel element in the tab being rendered.
405
-
406
-
Note: libraries may support popout windows by allowing you to specify the document to use,
407
-
for example see the getDocument() callback in agGrid at https://www.ag-grid.com/javascript-grid-callbacks/
408
-
409
-
### Limitations of Popouts
410
-
411
-
- FlexLayout uses React Portals to draw the popout window content,
412
-
this means all the code runs in the main Window's JS context, so effectively the popout windows are just extensions of the area on which the main window can render panels.
413
-
414
-
- Your code must use the popout window/document in popout windows when adding event listeners (e.g popoutDocument.addEventListener(...)).
415
-
416
-
- Timers throttle when main window is in the background
417
-
you could implement a webworker timer replacement if needed (which will not throttle)
418
-
- Many third party controls will use the global document for some event listeners,
419
-
these will not work correctly without modification
420
-
- Some third party controls will suspend when the global document is hidden
421
-
you can use the tab overlay attribute to 'gray out' these tabs when the main window is hidden
422
-
- Resize observers may be throttled (or stay attached to the main window), so you may need to use some other way to resize the component when in a popout (see aggrid component in demo).
423
-
- Popouts will not size and position correctly when the browser is zoomed (ie set to 50% zoom)
424
-
- Popouts cannot reload in maximized or minimized states
425
-
- by default flexlayout will maintain react state when moving tabs between windows, but you can use the
426
-
enableWindowReMount tab attribute to force the component to re-mount.
427
-
428
-
See this article about using React portals in this way: https://dev.to/noriste/the-challenges-of-rendering-an-openlayers-map-in-a-popup-through-react-2elh
0 commit comments