Skip to content

Commit e0107dc

Browse files
committed
refactor: remove Popout window feature
Signed-off-by: Christian Stewart <christian@aperture.us>
1 parent 3ce0b2f commit e0107dc

26 files changed

+428
-1634
lines changed

README.md

Lines changed: 2 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,6 @@ Features:
3030
- maximize tab set (double click tab set header or use icon)
3131
- tab overflow (show menu when tabs overflow, scroll tabs using mouse wheel)
3232
- border tab sets
33-
- popout tabs into new browser windows
34-
- submodels, allow layouts inside layouts
3533
- tab renaming (double click tab text to rename)
3634
- theming - light, underline, gray, round and dark
3735
- works on mobile devices (iPad, Android)
@@ -251,12 +249,11 @@ Use the standard `Layout` when:
251249

252250
## Model JSON Structure
253251

254-
The model json contains 4 top level elements:
252+
The model json contains 3 top level elements:
255253

256254
- global - (optional) where global options are defined
257255
- 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")
260257

261258
The layout element is built up using 3 types of 'node':
262259

@@ -380,53 +377,6 @@ Example:
380377
| visibility | {visible} | called when the visibility of a tab changes |
381378
| 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() |
382379

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):
398-
399-
```
400-
const currentDocument = selfRef.current.ownerDocument;
401-
const currentWindow = currentDocument.defaultView!;
402-
```
403-
404-
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
429-
430380
## Alternative Layout Managers
431381

432382
| Name | Repository |

0 commit comments

Comments
 (0)