flexlayout-react 0.8.11 → 0.8.13

package/src/view/Overlay.tsx

@@ -1,21 +0,0 @@
-import { LayoutInternal } from "./Layout";
-import { CLASSES } from "../Types";
-
-/** @internal */
-export interface IOverlayProps {
-    layout: LayoutInternal;
-    show: boolean;
-}
-
-/** @internal */
-export const Overlay = (props: IOverlayProps) => {
-    const {layout, show} = props;
-
-    return (
-        <div 
-            className={layout.getClassName(CLASSES.FLEXLAYOUT__LAYOUT_OVERLAY)}
-            style={{display: (show ? "flex" : "none")
-        }}
-        />
-    );
-}

package/src/view/PopoutWindow.tsx

@@ -1,152 +0,0 @@
-import * as React from "react";
-import { createPortal } from "react-dom";
-import { CLASSES } from "../Types";
-import { LayoutInternal } from "./Layout";
-import { LayoutWindow } from "../model/LayoutWindow";
-
-/** @internal */
-export interface IPopoutWindowProps {
-    title: string;
-    layout: LayoutInternal;
-    layoutWindow: LayoutWindow;
-    url: string;
-    onCloseWindow: (layoutWindow: LayoutWindow) => void;
-    onSetWindow: (layoutWindow: LayoutWindow, window: Window) => void;
-}
-
-/** @internal */
-export const PopoutWindow = (props: React.PropsWithChildren<IPopoutWindowProps>) => {
-    const { title, layout, layoutWindow, url, onCloseWindow, onSetWindow, children } = props; const popoutWindow = React.useRef<Window | null>(null);
-    const [content, setContent] = React.useState<HTMLElement | undefined>(undefined);
-    // map from main docs style -> this docs equivalent style
-    const styleMap = new Map<HTMLElement, HTMLElement>();       
-
-    React.useLayoutEffect(() => {
-        if (!popoutWindow.current) { // only create window once, even in strict mode
-            const windowId = layoutWindow.windowId;
-            const rect = layoutWindow.rect;
-            
-            popoutWindow.current = window.open(url, windowId, `left=${rect.x},top=${rect.y},width=${rect.width},height=${rect.height}`);
-
-            if (popoutWindow.current) {
-                layoutWindow.window = popoutWindow.current;
-                onSetWindow(layoutWindow, popoutWindow.current);
-
-                // listen for parent unloading to remove all popouts
-                window.addEventListener("beforeunload", () => {
-                    if (popoutWindow.current) {
-                        const closedWindow = popoutWindow.current;
-                        popoutWindow.current = null; // need to set to null before close, since this will trigger popup window before unload...
-                        closedWindow.close();
-                    }
-                });
-
-                popoutWindow.current.addEventListener("load", () => {
-                    if (popoutWindow.current) {
-                        popoutWindow.current.focus();
-
-                        // note: resizeto must be before moveto in chrome otherwise the window will end up at 0,0
-                        popoutWindow.current.resizeTo(rect.width, rect.height);
-                        popoutWindow.current.moveTo(rect.x, rect.y);
-
-                        const popoutDocument = popoutWindow.current.document;
-                        popoutDocument.title = title;
-                        const popoutContent = popoutDocument.createElement("div");
-                        popoutContent.className = CLASSES.FLEXLAYOUT__FLOATING_WINDOW_CONTENT;
-                        popoutDocument.body.appendChild(popoutContent);
-                        copyStyles(popoutDocument, styleMap).then(() => {
-                            setContent(popoutContent); // re-render once link styles loaded
-                        });
-
-                        // listen for style mutations
-                        const observer = new MutationObserver((mutationsList: any) => handleStyleMutations(mutationsList, popoutDocument, styleMap));
-                        observer.observe(document.head, { childList: true });
-
-                        // listen for popout unloading (needs to be after load for safari)
-                        popoutWindow.current.addEventListener("beforeunload", () => {
-                            if (popoutWindow.current) {
-                                onCloseWindow(layoutWindow); // remove the layoutWindow in the model
-                                popoutWindow.current = null;
-                                observer.disconnect();
-                            }
-                        });
-                    }
-                });
-            } else {
-                console.warn(`Unable to open window ${url}`);
-                onCloseWindow(layoutWindow); // remove the layoutWindow in the model
-            }
-        }
-        return () => {
-            // only close popoutWindow if windowId has been removed from the model (ie this was due to model change)
-            if (!layout.getModel().getwindowsMap().has(layoutWindow.windowId)) {
-                popoutWindow.current?.close();
-                popoutWindow.current = null;
-            }
-        }
-    }, []);
-
-    if (content !== undefined) {
-        return createPortal(children, content!);
-    } else {
-        return null;
-    }
-};
-
-function handleStyleMutations(mutationsList: any, popoutDocument: Document, styleMap: Map<HTMLElement, HTMLElement>) {
-    for (const mutation of mutationsList) {
-        if (mutation.type === 'childList') {
-            for (const addition of mutation.addedNodes) {
-                if (addition instanceof HTMLLinkElement || addition instanceof HTMLStyleElement) {
-                    copyStyle(popoutDocument, addition, styleMap);
-                }
-            }
-            for (const removal of mutation.removedNodes) {
-                if (removal instanceof HTMLLinkElement || removal instanceof HTMLStyleElement) {
-                    const popoutStyle = styleMap.get(removal);
-                    if (popoutStyle) {
-                        popoutDocument.head.removeChild(popoutStyle);
-                    }
-                }
-            }
-        }
-    }
-};
-
-
-
-/** @internal */
-function copyStyles(popoutDoc: Document, styleMap: Map<HTMLElement, HTMLElement>): Promise<boolean[]> {
-    const promises: Promise<boolean>[] = [];
-    const styleElements = document.querySelectorAll('style, link[rel="stylesheet"]') as NodeListOf<HTMLElement>
-    for (const element of styleElements) {
-        copyStyle(popoutDoc, element, styleMap, promises);
-    }
-    return Promise.all(promises);
-}
-
-/** @internal */
-function copyStyle(popoutDoc: Document, element: HTMLElement, styleMap: Map<HTMLElement, HTMLElement>, promises?: Promise<boolean>[]) {
-    if (element instanceof HTMLLinkElement) {
-        // prefer links since they will keep paths to images etc
-        const linkElement = element.cloneNode(true) as HTMLLinkElement;
-        popoutDoc.head.appendChild(linkElement);
-        styleMap.set(element, linkElement);
-
-        if (promises) {
-            promises.push(new Promise((resolve) => {
-                linkElement.onload = () => resolve(true);
-            }));
-        }
-    } else if (element instanceof HTMLStyleElement) {
-        try {
-            const styleElement = element.cloneNode(true) as HTMLStyleElement;
-            popoutDoc.head.appendChild(styleElement);
-            styleMap.set(element, styleElement);
-        } catch (e) {
-            // can throw an exception
-        }
-    }
-}
-
-

package/src/view/PopupMenu.tsx

@@ -1,156 +0,0 @@
-import * as React from "react";
-import { TabNode } from "../model/TabNode";
-import { CLASSES } from "../Types";
-import { LayoutInternal } from "./Layout";
-import { TabButtonStamp } from "./TabButtonStamp";
-import { TabSetNode } from "../model/TabSetNode";
-import { BorderNode } from "../model/BorderNode";
-import { useEffect, useRef } from "react";
-
-/** @internal */
-export function showPopup(
-    triggerElement: Element,
-    parentNode: TabSetNode | BorderNode,
-    items: { index: number; node: TabNode }[],
-    onSelect: (item: { index: number; node: TabNode }) => void,
-    layout: LayoutInternal,
-) {
-    const layoutDiv = layout.getRootDiv();
-    const classNameMapper = layout.getClassName;
-    const currentDocument = triggerElement.ownerDocument;
-    const triggerRect = triggerElement.getBoundingClientRect();
-    const layoutRect = layoutDiv?.getBoundingClientRect() ?? new DOMRect(0, 0, 100, 100);
-
-    const elm = currentDocument.createElement("div");
-    elm.className = classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU_CONTAINER);
-    if (triggerRect.left < layoutRect.left + layoutRect.width / 2) {
-        elm.style.left = triggerRect.left - layoutRect.left + "px";
-    } else {
-        elm.style.right = layoutRect.right - triggerRect.right + "px";
-    }
-
-    if (triggerRect.top < layoutRect.top + layoutRect.height / 2) {
-        elm.style.top = triggerRect.top - layoutRect.top + "px";
-    } else {
-        elm.style.bottom = layoutRect.bottom - triggerRect.bottom + "px";
-    }
-
-    layout.showOverlay(true);
-
-    if (layoutDiv) {
-        layoutDiv.appendChild(elm);
-    }
-
-    const onHide = () => {
-        layout.hideControlInPortal();
-        layout.showOverlay(false);
-        if (layoutDiv) {
-            layoutDiv.removeChild(elm);
-        }
-        elm.removeEventListener("pointerdown", onElementPointerDown);
-        currentDocument.removeEventListener("pointerdown", onDocPointerDown);
-    };
-
-    const onElementPointerDown = (event: Event) => {
-        event.stopPropagation();
-    };
-
-    const onDocPointerDown = (_event: Event) => {
-        onHide();
-    };
-
-    elm.addEventListener("pointerdown", onElementPointerDown);
-    currentDocument.addEventListener("pointerdown", onDocPointerDown);
-
-    layout.showControlInPortal(<PopupMenu
-        currentDocument={currentDocument}
-        parentNode={parentNode}
-        onSelect={onSelect}
-        onHide={onHide}
-        items={items}
-        classNameMapper={classNameMapper}
-        layout={layout}
-    />, elm);
-}
-
-/** @internal */
-interface IPopupMenuProps {
-    parentNode: TabSetNode | BorderNode;
-    items: { index: number; node: TabNode }[];
-    currentDocument: Document;
-    onHide: () => void;
-    onSelect: (item: { index: number; node: TabNode }) => void;
-    classNameMapper: (defaultClassName: string) => string;
-    layout: LayoutInternal;
-}
-
-/** @internal */
-const PopupMenu = (props: IPopupMenuProps) => {
-    const { parentNode, items, onHide, onSelect, classNameMapper, layout } = props;
-    const divRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        // Set focus when the component mounts
-        if (divRef.current) {
-            divRef.current.focus();
-        }
-    }, []);
-
-    const onItemClick = (item: { index: number; node: TabNode }, event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-        onSelect(item);
-        onHide();
-        event.stopPropagation();
-    };
-
-    const onDragStart = (event: React.DragEvent<HTMLElement>, node: TabNode) => {
-        event.stopPropagation(); // prevent starting a tabset drag as well
-        layout.setDragNode(event.nativeEvent, node as TabNode);
-        setTimeout(() => {
-            onHide();
-        }, 0);
-
-    };
-
-    const onDragEnd = (event: React.DragEvent<HTMLElement>) => {
-        layout.clearDragMain();
-    };
-
-    const handleKeyDown = (event: React.KeyboardEvent) => {
-        if (event.key === "Escape") {
-            onHide();
-        }
-    };
-
-    const itemElements = items.map((item, i) => {
-        let classes = classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU_ITEM);
-        if (parentNode.getSelected() === item.index) {
-            classes += " " + classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU_ITEM__SELECTED);
-        }
-        return (
-            <div key={item.index}
-                className={classes}
-                data-layout-path={"/popup-menu/tb" + i}
-                onClick={(event) => onItemClick(item, event)}
-                draggable={true}
-                onDragStart={(e) => onDragStart(e, item.node)}
-                onDragEnd={onDragEnd}
-                title={item.node.getHelpText()} >
-                <TabButtonStamp
-                    node={item.node}
-                    layout={layout}
-                />
-            </div>
-        )
-    }
-    );
-
-    return (
-        <div className={classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU)}
-            ref={divRef}
-            tabIndex={0}  // Make div focusable
-            onKeyDown={handleKeyDown}
-            data-layout-path="/popup-menu"
-        >
-            {itemElements}
-        </div>);
-};

package/src/view/Row.tsx

@@ -1,68 +0,0 @@
-import * as React from "react";
-import { RowNode } from "../model/RowNode";
-import { TabSetNode } from "../model/TabSetNode";
-import { CLASSES } from "../Types";
-import { LayoutInternal } from "./Layout";
-import { TabSet } from "./TabSet";
-import { Splitter } from "./Splitter";
-import { Orientation } from "../Orientation";
-
-/** @internal */
-export interface IRowProps {
-    layout: LayoutInternal;
-    node: RowNode;
-}
-
-/** @internal */
-export const Row = (props: IRowProps) => {
-    const { layout, node } = props;
-    const selfRef = React.useRef<HTMLDivElement | null>(null);
-
-    const horizontal = node.getOrientation() === Orientation.HORZ;
-
-    React.useLayoutEffect(() => {
-        node.setRect(layout.getBoundingClientRect(selfRef.current!));
-    });
-
-    const items: React.ReactNode[] = [];
-
-    let i = 0;
-
-    for (const child of node.getChildren()) {
-        if (i > 0) {
-            items.push(<Splitter key={"splitter" + i} layout={layout} node={node} index={i} horizontal={horizontal} />)
-        }
-        if (child instanceof RowNode) {
-            items.push(<Row key={child.getId()} layout={layout} node={child} />);
-        } else if (child instanceof TabSetNode) {
-            items.push(<TabSet key={child.getId()} layout={layout} node={child} />);
-        }
-        i++;
-    }
-
-    const style: Record<string, any> = {
-        flexGrow: Math.max(1, node.getWeight()*1000), // NOTE:  flex-grow cannot have values < 1 otherwise will not fill parent, need to normalize 
-        minWidth: node.getMinWidth(),
-        minHeight: node.getMinHeight(),
-        maxWidth: node.getMaxWidth(),
-        maxHeight: node.getMaxHeight(),
-    };
-
-    if (horizontal) {
-        style.flexDirection = "row";
-    } else {
-        style.flexDirection = "column";
-    }
-
-     return (
-        <div
-            ref={selfRef}
-            className={layout.getClassName(CLASSES.FLEXLAYOUT__ROW)}
-            style={style}
-            >
-            {items}
-        </div>
-    );
-};
-
-

package/src/view/SizeTracker.tsx

@@ -1,20 +0,0 @@
-import * as React from "react";
-import { Rect } from "../Rect";
-
-export interface ISizeTrackerProps {
-    rect: Rect;
-    selected: boolean;
-    forceRevision: number;
-    tabsRevision: number;
-    children: React.ReactNode;
-}
-// only render if size changed or forceRevision changed or tabsRevision changed
-export const SizeTracker = React.memo(({ children }: ISizeTrackerProps) => {
-    return <>{children}</>
-}, (prevProps, nextProps) => {
-    return prevProps.rect.equalSize(nextProps.rect) && 
-    prevProps.selected === nextProps.selected &&
-    prevProps.forceRevision === nextProps.forceRevision &&
-    prevProps.tabsRevision === nextProps.tabsRevision
-});
-

package/src/view/Splitter.tsx

@@ -1,262 +0,0 @@
-import * as React from "react";
-import { Actions } from "../model/Actions";
-import { BorderNode } from "../model/BorderNode";
-import { RowNode } from "../model/RowNode";
-import { Orientation } from "../Orientation";
-import { CLASSES } from "../Types";
-import { LayoutInternal } from "./Layout";
-import { enablePointerOnIFrames, isDesktop, startDrag } from "./Utils";
-import { Rect } from "../Rect";
-
-/** @internal */
-export interface ISplitterProps {
-    layout: LayoutInternal;
-    node: RowNode | BorderNode;
-    index: number;
-    horizontal: boolean;
-}
-
-/** @internal */
-export let splitterDragging:boolean = false; // used in tabset & borderTab
-
-/** @internal */
-export const Splitter = (props: ISplitterProps) => {
-    const { layout, node, index, horizontal } = props;
-
-    const [dragging, setDragging] = React.useState<boolean>(false);
-    const selfRef = React.useRef<HTMLDivElement | null>(null);
-    const extendedRef = React.useRef<HTMLDivElement | null>(null);
-    const pBounds = React.useRef<number[]>([]);
-    const outlineDiv = React.useRef<HTMLDivElement | undefined>(undefined);
-    const handleDiv = React.useRef<HTMLDivElement | undefined>(undefined);
-    const dragStartX = React.useRef<number>(0);
-    const dragStartY = React.useRef<number>(0);
-    const initalSizes = React.useRef<{ initialSizes: number[], sum: number, startPosition: number }>({ initialSizes: [], sum: 0, startPosition: 0 })
-    // const throttleTimer = React.useRef<NodeJS.Timeout | undefined>(undefined);
-
-    const size = node.getModel().getSplitterSize();
-    let extra = node.getModel().getSplitterExtra();
-
-    if (!isDesktop()) {
-        // make hit test area on mobile at least 20px
-        extra = Math.max(20, extra + size) - size;
-    }
-
-    React.useEffect(() => {
-        // Android fix: must have passive touchstart handler to prevent default handling
-        selfRef.current?.addEventListener("touchstart", onTouchStart, { passive: false });
-        extendedRef.current?.addEventListener("touchstart", onTouchStart, { passive: false });
-        return () => {
-            selfRef.current?.removeEventListener("touchstart", onTouchStart);
-            extendedRef.current?.removeEventListener("touchstart", onTouchStart);
-        }
-    }, []);
-
-    const onTouchStart = (event: TouchEvent) => {
-        event.preventDefault();
-        event.stopImmediatePropagation();
-    }
-
-    const onPointerDown = (event: React.PointerEvent<HTMLElement>) => {
-        event.stopPropagation();
-        if (node instanceof RowNode) {
-            initalSizes.current = node.getSplitterInitials(index);
-        }
-
-        enablePointerOnIFrames(false, layout.getCurrentDocument()!);
-        startDrag(event.currentTarget.ownerDocument, event, onDragMove, onDragEnd, onDragCancel);
-
-        pBounds.current = node.getSplitterBounds(index, true);
-        const rootdiv = layout.getRootDiv();
-        outlineDiv.current = layout.getCurrentDocument()!.createElement("div");
-        outlineDiv.current.style.flexDirection = horizontal ? "row" : "column";
-        outlineDiv.current.className = layout.getClassName(CLASSES.FLEXLAYOUT__SPLITTER_DRAG);
-        outlineDiv.current.style.cursor = node.getOrientation() === Orientation.VERT ? "ns-resize" : "ew-resize";
-
-        if (node.getModel().isSplitterEnableHandle()) {
-            handleDiv.current = layout.getCurrentDocument()!.createElement("div");
-            handleDiv.current.className = cm(CLASSES.FLEXLAYOUT__SPLITTER_HANDLE) + " " +
-                (horizontal ? cm(CLASSES.FLEXLAYOUT__SPLITTER_HANDLE_HORZ) : cm(CLASSES.FLEXLAYOUT__SPLITTER_HANDLE_VERT));
-            outlineDiv.current.appendChild(handleDiv.current);
-        }
-
-        const r = selfRef.current?.getBoundingClientRect()!;
-        const rect = new Rect(
-            r.x - layout.getDomRect()!.x,
-            r.y - layout.getDomRect()!.y,
-            r.width,
-            r.height
-        );
-
-        dragStartX.current = event.clientX - r.x;
-        dragStartY.current = event.clientY - r.y;
-
-        rect.positionElement(outlineDiv.current);
-        if (rootdiv) {
-            rootdiv.appendChild(outlineDiv.current);
-        }
-
-        setDragging(true);
-        splitterDragging = true;
-    };
-
-    const onDragCancel = () => {
-        const rootdiv = layout.getRootDiv();
-        if (rootdiv && outlineDiv.current) {
-            rootdiv.removeChild(outlineDiv.current as Element);
-        }
-        outlineDiv.current = undefined;
-        setDragging(false);
-        splitterDragging = false;
-    };
-
-    const onDragMove = (x: number, y: number) => {
-
-        if (outlineDiv.current) {
-            const clientRect = layout.getDomRect();
-            if (!clientRect) {
-                return;
-            }
-            if (node.getOrientation() === Orientation.VERT) {
-                outlineDiv.current!.style.top = getBoundPosition(y - clientRect.y - dragStartY.current) + "px";
-            } else {
-                outlineDiv.current!.style.left = getBoundPosition(x - clientRect.x - dragStartX.current) + "px";
-            }
-
-            if (layout.isRealtimeResize()) {
-                updateLayout(true);
-            }
-        }
-    };
-
-    const onDragEnd = () => {
-        if (outlineDiv.current) {
-            updateLayout(false);
-
-            const rootdiv = layout.getRootDiv();
-            if (rootdiv && outlineDiv.current) {
-                rootdiv.removeChild(outlineDiv.current as HTMLElement);
-            }
-            outlineDiv.current = undefined;
-        }
-        enablePointerOnIFrames(true, layout.getCurrentDocument()!);
-        setDragging(false);
-        splitterDragging = false;
-    };
-
-    const updateLayout = (realtime: boolean) => {
-
-        const redraw = () => {
-            if (outlineDiv.current) {
-                let value = 0;
-                if (node.getOrientation() === Orientation.VERT) {
-                    value = outlineDiv.current!.offsetTop;
-                } else {
-                    value = outlineDiv.current!.offsetLeft;
-                }
-
-
-                if (node instanceof BorderNode) {
-                    const pos = (node as BorderNode).calculateSplit(node, value);
-                    layout.doAction(Actions.adjustBorderSplit(node.getId(), pos));
-                } else {
-                    const init = initalSizes.current;
-                    const weights = node.calculateSplit(index, value, init.initialSizes, init.sum, init.startPosition);
-                    layout.doAction(Actions.adjustWeights(node.getId(), weights));
-                }
-            }
-        };
-
-        redraw();
-    };
-
-    const getBoundPosition = (p: number) => {
-        const bounds = pBounds.current as number[];
-        let rtn = p;
-        if (p < bounds[0]) {
-            rtn = bounds[0];
-        }
-        if (p > bounds[1]) {
-            rtn = bounds[1];
-        }
-
-        return rtn;
-    };
-
-    const cm = layout.getClassName;
-    const style: Record<string, any> = {
-        cursor: horizontal ? "ew-resize" : "ns-resize",
-        flexDirection: horizontal ? "column" : "row"
-    };
-    let className = cm(CLASSES.FLEXLAYOUT__SPLITTER) + " " + cm(CLASSES.FLEXLAYOUT__SPLITTER_ + node.getOrientation().getName());
-
-    if (node instanceof BorderNode) {
-        className += " " + cm(CLASSES.FLEXLAYOUT__SPLITTER_BORDER);
-    } else {
-        if (node.getModel().getMaximizedTabset(layout.getWindowId()) !== undefined) {
-            style.display = "none";
-        }
-    }
-
-    if (horizontal) {
-        style.width = size + "px";
-        style.minWidth = size + "px";
-    } else {
-        style.height = size + "px";
-        style.minHeight = size + "px";
-    }
-
-    let handle;
-    if (!dragging && node.getModel().isSplitterEnableHandle()) {
-        handle = (
-            <div
-                className={cm(CLASSES.FLEXLAYOUT__SPLITTER_HANDLE) + " " +
-                    (horizontal ? cm(CLASSES.FLEXLAYOUT__SPLITTER_HANDLE_HORZ) : cm(CLASSES.FLEXLAYOUT__SPLITTER_HANDLE_VERT))
-                }>
-            </div>
-        );
-    }
-
-    if (extra === 0) {
-        return (<div
-            className={className}
-            style={style}
-            ref={selfRef}
-            data-layout-path={node.getPath() + "/s" + (index - 1)}
-            onPointerDown={onPointerDown}>
-            {handle}
-        </div>);
-    } else {
-        // add extended transparent div for hit testing
-
-        const style2: Record<string, any> = {};
-        if (node.getOrientation() === Orientation.HORZ) {
-            style2.height = "100%";
-            style2.width = size + extra + "px";
-            style2.cursor = "ew-resize";
-        } else {
-            style2.height = size + extra + "px";
-            style2.width = "100%";
-            style2.cursor = "ns-resize";
-        }
-
-        const className2 = cm(CLASSES.FLEXLAYOUT__SPLITTER_EXTRA);
-
-        return (
-            <div
-                className={className}
-                style={style}
-                ref={selfRef}
-                data-layout-path={node.getPath() + "/s" + (index - 1)}
-                onPointerDown={onPointerDown}
-            >
-                <div
-                    style={style2}
-                    ref={extendedRef}
-                    className={className2}
-                    onPointerDown={onPointerDown}>
-                </div>
-            </div>);
-    }
-};
-