flexlayout-react 0.7.14 → 0.8.0

package/src/view/Utils.tsx

@@ -1,46 +1,33 @@
 import * as React from "react";
+import { Node } from "../model/Node";
 import { TabNode } from "../model/TabNode";
-import { IconFactory, ILayoutCallbacks, ITitleObject, TitleFactory } from "./Layout";
+import { LayoutInternal } from "./Layout";
+import { TabSetNode } from "../model/TabSetNode";
+import { Rect } from "../Rect";
 
+/** @internal */
+export function isDesktop() {
+    const desktop = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(hover: hover) and (pointer: fine)").matches;
+    return desktop;
+}
 /** @internal */
 export function getRenderStateEx(
-    layout: ILayoutCallbacks,
+    layout: LayoutInternal,
     node: TabNode,
-    iconFactory?: IconFactory,
-    titleFactory?: TitleFactory,
     iconAngle?: number
 ) {
-    let leadingContent = iconFactory ? iconFactory(node) : undefined;
+    let leadingContent = undefined;
     let titleContent: React.ReactNode = node.getName();
     let name = node.getName();
     if (iconAngle === undefined) {
         iconAngle = 0;
     }
 
-    function isTitleObject(obj: any): obj is ITitleObject {
-        return obj.titleContent !== undefined
-    }
-
-    if (titleFactory !== undefined) {
-        const titleObj = titleFactory(node);
-        if (titleObj !== undefined) {
-            if (typeof titleObj === "string") {
-                titleContent = titleObj as string;
-                name = titleObj as string;
-            } else if (isTitleObject(titleObj)) {
-                titleContent = titleObj.titleContent;
-                name = titleObj.name;
-            } else {
-                titleContent = titleObj;
-            }
-        }
-    }
-
     if (leadingContent === undefined && node.getIcon() !== undefined) {
         if (iconAngle !== 0) {
-             leadingContent = <img style={{ width: "1em", height: "1em", transform: "rotate(" + iconAngle + "deg)" }} src={node.getIcon()} alt="leadingContent" />;
+            leadingContent = <img style={{ width: "1em", height: "1em", transform: "rotate(" + iconAngle + "deg)" }} src={node.getIcon()} alt="leadingContent" />;
         } else {
-            leadingContent = <img style={{ width: "1em", height: "1em" }} src={node.getIcon()} alt="leadingContent" />;  
+            leadingContent = <img style={{ width: "1em", height: "1em" }} src={node.getIcon()} alt="leadingContent" />;
         }
     }
 
@@ -50,24 +37,13 @@ export function getRenderStateEx(
     const renderState = { leading: leadingContent, content: titleContent, name, buttons };
     layout.customizeTab(node, renderState);
 
-    node._setRenderedName(renderState.name);
+    node.setRenderedName(renderState.name);
 
     return renderState;
-
 }
 
 /** @internal */
-export function hideElement(style: Record<string, any>, useVisibility: ConstrainBoolean) {
-    if (useVisibility) {
-        style.visibility = "hidden";
-    } else {
-        style.display = "none";
-    }
-}
-
-
-/** @internal */
-export function isAuxMouseEvent(event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) {
+export function isAuxMouseEvent(event: React.MouseEvent<HTMLElement, MouseEvent> | React.TouchEvent<HTMLElement>) {
     let auxEvent = false;
     if (event.nativeEvent instanceof MouseEvent) {
         if (event.nativeEvent.button !== 0 || event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) {
@@ -77,3 +53,107 @@ export function isAuxMouseEvent(event: React.MouseEvent<HTMLDivElement, MouseEve
     return auxEvent;
 }
 
+export function enablePointerOnIFrames(enable: boolean, currentDocument: Document) {
+    const iframes = [
+        ...getElementsByTagName('iframe', currentDocument),
+        ...getElementsByTagName('webview', currentDocument),
+    ];
+
+    for (const iframe of iframes) {
+        (iframe as HTMLElement).style.pointerEvents = enable ? 'auto' : 'none';
+    }
+};
+
+export function getElementsByTagName(tag: string, currentDocument: Document): Element[] {
+    return [...currentDocument.getElementsByTagName(tag)];
+}
+
+export function startDrag(
+    doc: Document,
+    event: React.PointerEvent<HTMLElement>,
+    drag: (x: number, y: number) => void,
+    dragEnd: () => void,
+    dragCancel: () => void) {
+
+    event.preventDefault();
+
+    const pointerMove = (ev: PointerEvent) => {
+        ev.preventDefault();
+        drag(ev.clientX, ev.clientY);
+    };
+
+    const pointerCancel = (ev: PointerEvent) => {
+        ev.preventDefault();
+        dragCancel();
+    };
+    const pointerUp = () => {
+        doc.removeEventListener("pointermove", pointerMove);
+        doc.removeEventListener("pointerup", pointerUp);
+        doc.removeEventListener("pointercancel", pointerCancel);
+        dragEnd();
+    };
+
+    doc.addEventListener("pointermove", pointerMove);
+    doc.addEventListener("pointerup", pointerUp);
+    doc.addEventListener('pointercancel', pointerCancel);
+}
+
+export function canDockToWindow(node: Node) {
+    if (node instanceof TabNode) {
+        return node.isEnablePopout();
+    } else if (node instanceof TabSetNode) {
+        for (const child of node.getChildren()) {
+            if ((child as TabNode).isEnablePopout() === false) {
+                return false;
+            }
+        }
+        return true;
+    }
+    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');
+    const targetStyle = target.getAttribute('style');
+    if (sourceStyle === targetStyle) return false;
+
+    // console.log("copyInlineStyles", sourceStyle);
+    
+    if (sourceStyle) {
+        // Set the style attribute on the target element
+        target.setAttribute('style', sourceStyle);
+    } else {
+        // If the source has no inline style, clear the target's style attribute
+        target.removeAttribute('style');
+    }
+    return true;
+}
+
+export function isSafari() {
+    const userAgent = navigator.userAgent;
+    return userAgent.includes("Safari") && !userAgent.includes("Chrome") && !userAgent.includes("Chromium");
+  }

package/style/_base.scss

@@ -6,14 +6,64 @@
     position: absolute;
 }
 
+@mixin flexFix {
+    display: flex;
+    flex-basis: 0px;
+    min-width: 0;
+    min-height: 0;
+}
+
 .flexlayout {
     &__layout {
         @include absoluteFill;
-        overflow: hidden;
+        display:flex;
+
+        &_overlay {
+            @include absoluteFill;
+            z-index: 1000;
+        }
+
+        &_tab_stamps {
+            position:absolute; 
+            top:-10000px; // offscreen
+            z-index:100;
+            display: flex;
+            flex-direction: column;
+            align-items: start;
+        }
+
+        &_moveables {
+            visibility: hidden;
+            position:absolute; 
+            width: 100px; // size is needed to tabs have something to draw into
+            height: 100px;
+            top:-20000px; // offscreen
+        }
+
+        &_main {
+            @include flexFix;
+            flex-grow:1;
+            position:relative;
+        }
+    }
+
+    &__layout_border_container {
+        @include flexFix;
+        flex-grow:1;
+    }
+
+    &__layout_border_container_inner {
+        @include flexFix;
+        flex-grow: 1;
     }
 
     &__splitter {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         background-color: var(--color-splitter);
+        touch-action: none;
+        z-index: 10;
         @include splitter_mixin;
 
         @media (hover: hover) {
@@ -25,15 +75,33 @@
             }
         }
         &_border {
-            z-index: 10;
             @include splitter_border_mixin;
         }
         &_drag {
+            position:absolute;
+            display:flex;
+            align-items: center;
+            justify-content: center;
             z-index: 1000;
             background-color: var(--color-splitter-drag);
             @include splitter_drag_mixin;
         }
+        &_handle {
+            background-color:#ccc; 
+            border-radius:3px;
+
+            &_horz {
+                width: 3px; 
+                height:30px;
+            }
+            &_vert {
+                width: 30px; 
+                height:3px;
+            }
+        }
+
         &_extra {
+            touch-action: none;
             background-color: transparent;
         }
     }
@@ -60,54 +128,66 @@
     &__edge_rect {
         position: absolute;
         z-index: 1000;
-        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
         background-color: var(--color-edge-marker);
         pointer-events: none;
+        display:flex;
+        align-items: center;
+        justify-content: center;
     }
 
     &__drag_rect {
-        position: absolute;
-        cursor: move;
         color: var(--color-drag-rect);
         background-color: var(--color-drag-rect-background);
         border: 2px solid var(--color-drag-rect-border);
-        // box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3);
         border-radius: 5px;
-        z-index: 1000;
         box-sizing: border-box;
-        opacity: 0.9;
-        text-align: center;
+        // text-align: center;
 
         display: flex;
         justify-content: center;
         flex-direction: column;
         overflow: hidden;
-        padding: 0.3em 1em;
+        padding: 0.3em .8em;
         word-wrap: break-word;
         font-size: var(--font-size);
         font-family: var(--font-family);
     }
 
+    &__row {
+        @include flexFix;
+        position: relative;
+        box-sizing: border-box;
+        overflow: hidden;
+    }
+
     &__tabset {
-        display: flex;
+        display:flex;
         flex-direction: column;
-        overflow: hidden;
+        position: relative;
         background-color: var(--color-tabset-background);
         box-sizing: border-box;
-        font-size: var(--font-size);
         font-family: var(--font-family);
+        overflow: hidden;
+        flex-grow:1;
         @include tabset_mixin;
 
+        &_container {
+            @include flexFix;
+            flex-direction: column;
+            overflow: hidden;
+            flex-grow:1;
+        }
+
         &_tab_divider {
             width: 4px;
             @include tabset_tab_divider_mixin;
         }
 
         &_content {
-            display: flex;
+            @include flexFix;
             flex-grow: 1;
-            align-items: center;
-            justify-content: center;
+            box-sizing: border-box;
+            position: relative;
         }
 
         &_header {
@@ -119,6 +199,7 @@
             border-bottom: 1px solid var(--color-tabset-divider-line);
             color: var(--color-tabset-header);
             background-color: var(--color-tabset-header-background);
+            font-size: var(--font-size);
             @include tabset_header_mixin;
 
             &_content {
@@ -133,14 +214,17 @@
                 background-color: var(--color-tabset-background);
                 overflow: hidden;
                 display: flex;
+                font-size: var(--font-size);
                 @include tabset_tabbar_mixin;
             }
 
             &_outer_top {
+                padding:0px 2px 0px 2px;
                 border-bottom: 1px solid var(--color-tabset-divider-line);
             }
 
             &_outer_bottom {
+                padding: 0px 2px 0px 2px;
                 border-top: 1px solid var(--color-tabset-divider-line);
             }
 
@@ -153,15 +237,13 @@
                 overflow: hidden;
 
                 &_tab_container {
+                    position: relative;
                     display: flex;
                     padding-left: 4px;
                     padding-right: 4px;
                     box-sizing: border-box;
-                    position: absolute;
-                    top: 0;
-                    bottom: 0;
-                    width: 10000px;
-
+                    white-space: nowrap;
+                  
                     &_top {
                         border-top: 2px solid transparent; // if you change this, update the _sizer above
                     }
@@ -192,11 +274,30 @@
     }
 
     &__tab {
-        overflow: auto;
-        position: absolute;
+        overflow: hidden;
         box-sizing: border-box;
-        background-color: var(--color-background);
+        background-color: var(--color-tab-content);
         color: var(--color-text);
+        position: relative;
+
+        &_moveable {
+            position:relative;
+            height:100%; 
+            min-width:1px;
+            min-height:1px;
+            overflow:auto;
+            box-sizing: border-box;
+        }
+
+        &_overlay {
+            z-index: 20;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #0000003d;
+        }
 
         &_button {
             display: flex;
@@ -262,6 +363,7 @@
 
             &_content {
                 display: flex;
+                text-wrap: nowrap;
             }
 
             &_textbox {
@@ -318,6 +420,15 @@
             padding-left: .5em;
             padding-right: .3em;
 
+            &_icon {
+                border: none;
+                outline: none;
+                font-size: inherit;
+                margin: 0px;
+                background-color: transparent;
+                padding: 1px;
+            }
+
             &_button {
                 border: none;
                 outline: none;
@@ -392,6 +503,12 @@
         background-color: var(--color-border-background);
         @include border_mixin;
 
+        &_tab_contents {
+            box-sizing: border-box;
+            overflow:hidden;
+            background-color: var(--color-border-tab-content);
+        }
+
         &_top {
             border-bottom: 1px solid var(--color-border-divider-line);
             align-items: center;
@@ -428,8 +545,6 @@
                 padding-right: 2px;
                 box-sizing: border-box;
                 position: absolute;
-                top: 0;
-                bottom: 0;
                 width: 10000px;
 
                 &_right {
@@ -604,15 +719,6 @@
         &_content {
             @include absoluteFill;
         }
-
-        &_tab {
-            overflow: auto;
-            @include absoluteFill;
-
-            box-sizing: border-box;
-            background-color: var(--color-background);
-            color: var(--color-text);
-        }
     }
 
     &__error_boundary_container {
@@ -644,6 +750,8 @@
     }
 
     &__border_sizer {
+        position:absolute;
+        top:-30000px; // offscreen
         padding-top: 6px;
         padding-bottom: 5px;
         font-size: var(--font-size);