@aptre/flex-layout 0.5.12 → 0.6.0

package/README.md

@@ -3,6 +3,7 @@
 [![npm](https://img.shields.io/npm/v/@aptre/flex-layout?style=flat-square)](https://www.npmjs.com/package/@aptre/flex-layout)
 [![Build status](https://img.shields.io/github/actions/workflow/status/aperturerobotics/flex-layout/tests.yml?style=flat-square&branch=master)](https://github.com/aperturerobotics/flex-layout/actions)
 [![GitHub](https://img.shields.io/github/license/Caplin/FlexLayout)](https://github.com/caplin/FlexLayout/blob/master/LICENSE)
+[![Website](https://img.shields.io/badge/demo-flexlayout.spacewave.app-blue?style=flat-square)](https://flexlayout.spacewave.app)
 
 FlexLayout is a layout manager supporting multiple TabSets with draggable+resizable tabs.
 
@@ -29,8 +30,6 @@ Features:
 - maximize tab set (double click tab set header or use icon)
 - tab overflow (show menu when tabs overflow, scroll tabs using mouse wheel)
 - border tab sets
-- popout tabs into new browser windows
-- submodels, allow layouts inside layouts
 - tab renaming (double click tab text to rename)
 - theming - light, underline, gray, round and dark
 - works on mobile devices (iPad, Android)
@@ -43,16 +42,17 @@ Features:
 
 ## Demo
 
-To demo and test this library, clone this repo, then:
+Try the interactive demo at [flexlayout.spacewave.app](https://flexlayout.spacewave.app).
+
+API documentation is available at [flexlayout.spacewave.app/typedoc/](https://flexlayout.spacewave.app/typedoc/).
+
+To run the tests locally, clone this repo, then:
 
 ```
-npm i -g yarn
-yarn
-yarn test:browser
+bun install
+bun run test:browser
 ```
 
-Your browser will open to show + all the tests with vitest Browser Mode.
-
 ## Installation
 
 FlexLayout is in the npm repository. install using:
@@ -249,12 +249,11 @@ Use the standard `Layout` when:
 
 ## Model JSON Structure
 
-The model json contains 4 top level elements:
+The model json contains 3 top level elements:
 
 - global - (optional) where global options are defined
 - layout - where the main row/tabset/tabs layout hierarchy is defined
-- borders - (optional) where up to 4 borders are defined ("top", "bottom", "left", "right").
-- popouts - (optional) where the popout windows are defined
+- borders - (optional) where up to 4 borders are defined ("top", "bottom", "left", "right")
 
 The layout element is built up using 3 types of 'node':
 
@@ -349,7 +348,7 @@ Example:
 layoutRef.current.addTabToTabSet("NAVIGATION", {type:"tab", component:"grid", name:"a grid"});
 ```
 
-This would add a new grid component to the tab set with id "NAVIGATION" (where layoutRef is a ref to the Layout element, see https://reactjs.org/docs/refs-and-the-dom.html ).
+This would add a new grid component to the tab set with id "NAVIGATION" (where layoutRef is a ref to the Layout element, see https://react.dev/learn/referencing-values-with-refs ).
 
 ## Tab Node Events
 
@@ -378,53 +377,6 @@ Example:
 | visibility | {visible}  | called when the visibility of a tab changes                                                                                      |
 | 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() |
 
-## Popout Windows
-
-Tabs can be rendered into external browser windows (for use in multi-monitor setups)
-by configuring them with the enablePopout attribute. When this attribute is present
-an additional icon is shown in the tab header bar allowing the tab to be popped out
-into an external window.
-
-For popouts to work there needs to be an additional html page 'popout.html' hosted
-at the same location as the main page (copy the one from examples/demo). The popout.html is the host page for the
-popped out tab, the styles from the main page will be copied into it at runtime.
-
-Because popouts are rendering into a different document to the main layout any code in the popped out
-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(...)),
-they need to instead use the document/window of the popout. To get the document/window of the popout use the
-following method on one of the elements rendered in the popout (for example a ref or target in an event handler):
-
-```
-    const currentDocument = selfRef.current.ownerDocument;
-    const currentWindow = currentDocument.defaultView!;
-```
-
-In the above code selfRef is a React ref to the toplevel element in the tab being rendered.
-
-Note: libraries may support popout windows by allowing you to specify the document to use,
-for example see the getDocument() callback in agGrid at https://www.ag-grid.com/javascript-grid-callbacks/
-
-### Limitations of Popouts
-
-- FlexLayout uses React Portals to draw the popout window content,
-  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.
-
-- Your code must use the popout window/document in popout windows when adding event listeners (e.g popoutDocument.addEventListener(...)).
-
-- Timers throttle when main window is in the background
-  you could implement a webworker timer replacement if needed (which will not throttle)
-- Many third party controls will use the global document for some event listeners,
-  these will not work correctly without modification
-- Some third party controls will suspend when the global document is hidden
-  you can use the tab overlay attribute to 'gray out' these tabs when the main window is hidden
-- 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).
-- Popouts will not size and position correctly when the browser is zoomed (ie set to 50% zoom)
-- Popouts cannot reload in maximized or minimized states
-- by default flexlayout will maintain react state when moving tabs between windows, but you can use the
-  enableWindowReMount tab attribute to force the component to re-mount.
-
-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
-
 ## Alternative Layout Managers
 
 | Name          | Repository                                     |

package/dist/I18nLabel.d.ts

@@ -6,7 +6,6 @@ export declare enum I18nLabel {
     Move_Tabs = "Move tabs(?)",
     Maximize = "Maximize tab set",
     Restore = "Restore tab set",
-    Popout_Tab = "Popout selected tab",
     Overflow_Menu_Tooltip = "Hidden tabs",
     Error_rendering_component = "Error rendering component"
 }

package/dist/Types.d.ts

@@ -20,7 +20,6 @@ export declare enum CLASSES {
     FLEXLAYOUT__BORDER_TOOLBAR = "flexlayout__border_toolbar",
     FLEXLAYOUT__BORDER_TOOLBAR_ = "flexlayout__border_toolbar_",
     FLEXLAYOUT__BORDER_TOOLBAR_BUTTON = "flexlayout__border_toolbar_button",
-    FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT = "flexlayout__border_toolbar_button-float",
     FLEXLAYOUT__DRAG_RECT = "flexlayout__drag_rect",
     FLEXLAYOUT__EDGE_RECT = "flexlayout__edge_rect",
     FLEXLAYOUT__EDGE_RECT_TOP = "flexlayout__edge_rect_top",
@@ -29,8 +28,6 @@ export declare enum CLASSES {
     FLEXLAYOUT__EDGE_RECT_RIGHT = "flexlayout__edge_rect_right",
     FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER = "flexlayout__error_boundary_container",
     FLEXLAYOUT__ERROR_BOUNDARY_CONTENT = "flexlayout__error_boundary_content",
-    FLEXLAYOUT__FLOATING_WINDOW_CONTENT = "flexlayout__floating_window_content",
-    FLEXLAYOUT__FLOATING_WINDOW_TAB = "flexlayout__floating_window_tab",
     FLEXLAYOUT__LAYOUT = "flexlayout__layout",
     FLEXLAYOUT__LAYOUT_MOVEABLES = "flexlayout__layout_moveables",
     FLEXLAYOUT__LAYOUT_OVERLAY = "flexlayout__layout_overlay",
@@ -52,7 +49,6 @@ export declare enum CLASSES {
     FLEXLAYOUT__TAB = "flexlayout__tab",
     FLEXLAYOUT__TAB_POSITION = "flexlayout__tab_position",
     FLEXLAYOUT__TAB_MOVEABLE = "flexlayout__tab_moveable",
-    FLEXLAYOUT__TAB_OVERLAY = "flexlayout__tab_overlay",
     FLEXLAYOUT__TABSET = "flexlayout__tabset",
     FLEXLAYOUT__TABSET_CONTAINER = "flexlayout__tabset_container",
     FLEXLAYOUT__TABSET_HEADER = "flexlayout__tabset_header",
@@ -80,13 +76,10 @@ export declare enum CLASSES {
     FLEXLAYOUT__TAB_BUTTON_TEXTBOX = "flexlayout__tab_button_textbox",
     FLEXLAYOUT__TAB_BUTTON_TRAILING = "flexlayout__tab_button_trailing",
     FLEXLAYOUT__TAB_BUTTON_STAMP = "flexlayout__tab_button_stamp",
-    FLEXLAYOUT__TAB_FLOATING = "flexlayout__tab_floating",
-    FLEXLAYOUT__TAB_FLOATING_INNER = "flexlayout__tab_floating_inner",
     FLEXLAYOUT__TAB_TOOLBAR = "flexlayout__tab_toolbar",
     FLEXLAYOUT__TAB_TOOLBAR_BUTTON = "flexlayout__tab_toolbar_button",
     FLEXLAYOUT__TAB_TOOLBAR_ICON = "flexlayout__tab_toolbar_icon",
     FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ = "flexlayout__tab_toolbar_button-",
-    FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT = "flexlayout__tab_toolbar_button-float",
     FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER = "flexlayout__tab_toolbar_sticky_buttons_container",
     FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE = "flexlayout__tab_toolbar_button-close",
     FLEXLAYOUT__POPUP_MENU_CONTAINER = "flexlayout__popup_menu_container",

package/dist/index.d.ts

@@ -13,7 +13,6 @@ export * from "./model/Node";
 export * from "./model/RowNode";
 export * from "./model/TabNode";
 export * from "./model/TabSetNode";
-export * from "./model/LayoutWindow";
 export * from "./model/walk";
 export * from "./DockLocation";
 export * from "./DropInfo";