flexlayout-react 0.7.15 → 0.8.1

package/src/view/Overlay.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+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

@@ -0,0 +1,152 @@
+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/{PopupMenu.tsx → view/PopupMenu.tsx}

@@ -1,18 +1,15 @@
 import * as React from "react";
-import { DragDrop } from "./DragDrop";
-import { TabNode } from "./model/TabNode";
-import { CLASSES } from "./Types";
-import { IconFactory, ILayoutCallbacks, TitleFactory } from "./view/Layout";
-import { TabButtonStamp } from "./view/TabButtonStamp";
+import { TabNode } from "../model/TabNode";
+import { CLASSES } from "../Types";
+import { LayoutInternal } from "./Layout";
+import { TabButtonStamp } from "./TabButtonStamp";
 
 /** @internal */
 export function showPopup(
     triggerElement: Element,
     items: { index: number; node: TabNode }[],
     onSelect: (item: { index: number; node: TabNode }) => void,
-    layout: ILayoutCallbacks,
-    iconFactory?: IconFactory,
-    titleFactory?: TitleFactory,
+    layout: LayoutInternal,
 ) {
     const layoutDiv = layout.getRootDiv();
     const classNameMapper = layout.getClassName;
@@ -33,43 +30,41 @@ export function showPopup(
     } else {
         elm.style.bottom = layoutRect.bottom - triggerRect.bottom + "px";
     }
-    DragDrop.instance.addGlass(() => onHide());
-    DragDrop.instance.setGlassCursorOverride("default");
+
+    layout.showOverlay(true);
 
     if (layoutDiv) {
         layoutDiv.appendChild(elm);
     }
 
     const onHide = () => {
-        layout.hidePortal();
-        DragDrop.instance.hideGlass();
+        layout.hideControlInPortal();
+        layout.showOverlay(false);
         if (layoutDiv) {
             layoutDiv.removeChild(elm);
         }
-        elm.removeEventListener("mousedown", onElementMouseDown);
-        currentDocument.removeEventListener("mousedown", onDocMouseDown);
+        elm.removeEventListener("pointerdown", onElementPointerDown);
+        currentDocument.removeEventListener("pointerdown", onDocPointerDown);
     };
 
-    const onElementMouseDown = (event: Event) => {
+    const onElementPointerDown = (event: Event) => {
         event.stopPropagation();
     };
 
-    const onDocMouseDown = (_event: Event) => {
+    const onDocPointerDown = (_event: Event) => {
         onHide();
     };
 
-    elm.addEventListener("mousedown", onElementMouseDown);
-    currentDocument.addEventListener("mousedown", onDocMouseDown);
+    elm.addEventListener("pointerdown", onElementPointerDown);
+    currentDocument.addEventListener("pointerdown", onDocPointerDown);
 
-    layout.showPortal(<PopupMenu
+    layout.showControlInPortal(<PopupMenu
         currentDocument={currentDocument}
         onSelect={onSelect}
         onHide={onHide}
         items={items}
         classNameMapper={classNameMapper}
         layout={layout}
-        iconFactory={iconFactory}
-        titleFactory={titleFactory}
     />, elm);
 }
 
@@ -80,35 +75,45 @@ interface IPopupMenuProps {
     onHide: () => void;
     onSelect: (item: { index: number; node: TabNode }) => void;
     classNameMapper: (defaultClassName: string) => string;
-    layout: ILayoutCallbacks;
-    iconFactory?: IconFactory;
-    titleFactory?: TitleFactory;
+    layout: LayoutInternal;
 }
 
 /** @internal */
 const PopupMenu = (props: IPopupMenuProps) => {
-    const { items, onHide, onSelect, classNameMapper, layout, iconFactory, titleFactory} = props;
+    const { items, onHide, onSelect, classNameMapper, layout} = props;
 
-    const onItemClick = (item: { index: number; node: TabNode }, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    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 itemElements = items.map((item, i) => (
         <div key={item.index}
             className={classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU_ITEM)}
             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()} >
-            {item.node.getModel().isLegacyOverflowMenu() ? 
-            item.node._getNameForOverflowMenu() :
             <TabButtonStamp 
                 node={item.node}
                 layout={layout}
-                iconFactory={iconFactory}
-                titleFactory={titleFactory}
-            />}
+            />
         </div>
     ));
 

package/src/view/Row.tsx

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,20 @@
+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
+});
+