flexlayout-react 0.8.2 → 0.8.3

package/src/model/LayoutWindow.ts

@@ -4,7 +4,6 @@ import { Model } from "./Model";
 import { RowNode } from "./RowNode";
 import { Node } from "./Node";
 import { TabSetNode } from "./TabSetNode";
-import { keepOnScreen } from "../view/Utils";
 import { LayoutInternal } from "../view/Layout";
 
 export class LayoutWindow {
@@ -112,8 +111,7 @@ export class LayoutWindow {
     static fromJson(windowJson: IJsonPopout, model: Model, windowId: string): LayoutWindow {
         const count = model.getwindowsMap().size;
         let rect = windowJson.rect ? Rect.fromJson(windowJson.rect) : new Rect(50 + 50 * count, 50 + 50 * count, 600, 400);
-        rect = keepOnScreen(rect); // snaps to grid of 10x10 and then moves into visible area
-        // snapping prevents issue where window moves 1 pixel per save/restore on Chrome
+        rect.snap(10); // snapping prevents issue where window moves 1 pixel per save/restore on Chrome
         const layoutWindow = new LayoutWindow(windowId, rect);
         layoutWindow.root = RowNode.fromJson(windowJson.layout, model, layoutWindow);
         return layoutWindow;

package/src/model/Model.ts

@@ -16,7 +16,6 @@ import { TabNode } from "./TabNode";
 import { TabSetNode } from "./TabSetNode";
 import { randomUUID } from "./Utils";
 import { LayoutWindow } from "./LayoutWindow";
-import { isOnScreen } from "../view/Utils";
 
 /** @internal */
 export const DefaultMin = 0;
@@ -406,18 +405,10 @@ export class Model {
             model.borders = BorderSet.fromJson(json.borders, model);
         }
         if (json.popouts) {
-            let i= 0;
-            let top = 100;
-            let left = 100;
             for (const windowId in json.popouts) {
                 const windowJson = json.popouts[windowId];
                 const layoutWindow = LayoutWindow.fromJson(windowJson, model, windowId);
                 model.windows.set(windowId, layoutWindow);
-                // offscreen windows will reload cascaded (since cannot reposition)
-                if (!isOnScreen(layoutWindow.rect)) {
-                    layoutWindow.rect = new Rect(top + i*50, left+ i*50, 600, 400);
-                    i++;
-                }
             }
         }
 

package/src/model/TabSetNode.ts

@@ -560,7 +560,7 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
         );
 
         attributeDefinitions.addInherited("enableTabWrap", "tabSetEnableTabWrap").setDescription(
-            `show tabs in location top or bottom`
+            `wrap tabs onto multiple lines`
         );
         attributeDefinitions.addInherited("tabLocation", "tabSetTabLocation").setDescription(
             `the location of the tabs either top or bottom`

package/src/view/Layout.tsx

@@ -406,7 +406,7 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
             const borderSetContentComponents = new Map<DockLocation, React.ReactNode>();
             for (const [_, location] of DockLocation.values) {
                 const border = borders.get(location);
-                const showBorder = border && (
+                const showBorder = border && border.isShowing() && (
                     !border.isAutoHide() ||
                     (border.isAutoHide() && (border.getChildren().length > 0 || this.state.showHiddenBorder === location)));
                 if (showBorder) {

package/src/view/Tab.tsx

@@ -95,6 +95,12 @@ export const Tab = (props: ITabProps) => {
         }
     }
 
+    if (parentNode instanceof BorderNode) {
+        if (!parentNode.isShowing()) {
+            style.display = "none";
+        }
+    }
+
     let className = cm(CLASSES.FLEXLAYOUT__TAB);
     if (parentNode instanceof BorderNode) {
         className += " " + cm(CLASSES.FLEXLAYOUT__TAB_BORDER);

package/src/view/TabOverflowHook.tsx

@@ -154,6 +154,7 @@ export const useTabOverflow = (
     };
 
     const onMouseWheel = (event: React.WheelEvent<HTMLElement>) => {
+        if (node.getChildren().length===0) return;
         let delta = 0;
         if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
             delta = -event.deltaX;

package/src/view/Utils.tsx

@@ -3,7 +3,6 @@ import { Node } from "../model/Node";
 import { TabNode } from "../model/TabNode";
 import { LayoutInternal } from "./Layout";
 import { TabSetNode } from "../model/TabSetNode";
-import { Rect } from "../Rect";
 
 /** @internal */
 export function isDesktop() {
@@ -112,29 +111,6 @@ export function canDockToWindow(node: Node) {
     return false;
 }
 
-export function keepOnScreen(rect: Rect) {
-    rect.snap(10);
-
-    const availableScreenWidth = window.screen.availWidth;
-    const availableScreenHeight = window.screen.availHeight;
-
-    if (rect.x + rect.width > availableScreenWidth || rect.y + rect.height > availableScreenHeight) {
-        // Adjust the rectangle to fit within the available screen space
-        rect.x = Math.max(0, Math.min(rect.x, availableScreenWidth - rect.width));
-        rect.y = Math.max(0, Math.min(rect.y, availableScreenHeight - rect.height));
-    }
-
-    return rect;
-}
-
-export function isOnScreen(rect: Rect) {
-    const availableScreenWidth = window.screen.availWidth;
-    const availableScreenHeight = window.screen.availHeight;
-
-    return (rect.x >= 0 && rect.getRight() <= availableScreenWidth &&
-        rect.y >= 0 || rect.getBottom() <= availableScreenHeight);
-}
-
 export function copyInlineStyles(source: HTMLElement, target: HTMLElement): boolean {
     // Get the inline style attribute from the source element
     const sourceStyle = source.getAttribute('style');