flexlayout-react 0.7.14 → 0.8.0

package/src/view/Splitter.tsx

@@ -1,133 +1,167 @@
 import * as React from "react";
-import { DragDrop } from "../DragDrop";
 import { Actions } from "../model/Actions";
 import { BorderNode } from "../model/BorderNode";
-import { Node } from "../model/Node";
 import { RowNode } from "../model/RowNode";
-import { SplitterNode } from "../model/SplitterNode";
 import { Orientation } from "../Orientation";
 import { CLASSES } from "../Types";
-import { ILayoutCallbacks } from "./Layout";
+import { LayoutInternal } from "./Layout";
+import { enablePointerOnIFrames, isDesktop, startDrag } from "./Utils";
+import { Rect } from "../Rect";
 
 /** @internal */
 export interface ISplitterProps {
-    layout: ILayoutCallbacks;
-    node: SplitterNode;
-    path: string;
+    layout: LayoutInternal;
+    node: RowNode | BorderNode;
+    index: number;
+    horizontal: boolean;
 }
 
 /** @internal */
 export const Splitter = (props: ISplitterProps) => {
-    const { layout, node, path } = props;
+    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 parentNode = node.getParent() as RowNode | BorderNode;
-
-    const onMouseDown = (
-        event:
-            | Event
-            | React.MouseEvent<HTMLDivElement, MouseEvent>
-            | React.TouchEvent<HTMLDivElement>
-    ) => {
-        DragDrop.instance.setGlassCursorOverride(
-            node.getOrientation() === Orientation.HORZ
-                ? "ns-resize"
-                : "ew-resize"
-        );
-        DragDrop.instance.startDrag(
-            event,
-            onDragStart,
-            onDragMove,
-            onDragEnd,
-            onDragCancel,
-            undefined,
-            undefined,
-            layout.getCurrentDocument(),
-            layout.getRootDiv() ?? undefined
-        );
-        pBounds.current = parentNode._getSplitterBounds(node, true);
+    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 30px
+        extra = Math.max(30, 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.position = "absolute";
+        outlineDiv.current.style.flexDirection = horizontal ? "row" : "column";
         outlineDiv.current.className = layout.getClassName(CLASSES.FLEXLAYOUT__SPLITTER_DRAG);
-        outlineDiv.current.style.cursor = node.getOrientation() === Orientation.HORZ ? "ns-resize" : "ew-resize";
-        const r = node.getRect();
-        if (node.getOrientation() === Orientation.VERT && r.width < 2) {
-            r.width = 2;
-        } else if (node.getOrientation() === Orientation.HORZ && r.height < 2) {
-            r.height = 2;
+        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);
         }
 
-        r.positionElement(outlineDiv.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);
     };
 
-    const onDragCancel = (_wasDragging: boolean) => {
+    const onDragCancel = () => {
         const rootdiv = layout.getRootDiv();
-        if (rootdiv) {
+        if (rootdiv && outlineDiv.current) {
             rootdiv.removeChild(outlineDiv.current as Element);
         }
+        outlineDiv.current = undefined;
+        setDragging(false);
     };
 
-    const onDragStart = () => {
-        return true;
-    };
+    const onDragMove = (x: number, y: number) => {
 
-    const onDragMove = (event: React.MouseEvent<Element, MouseEvent>) => {
-        const clientRect = layout.getDomRect();
-        if (!clientRect) {
-            return;
-        }
-
-        const pos = {
-            x: event.clientX - clientRect.left,
-            y: event.clientY - clientRect.top,
-        };
-
-        if (outlineDiv) {
-            if (node.getOrientation() === Orientation.HORZ) {
-                outlineDiv.current!.style.top = getBoundPosition(pos.y - 4) + "px";
+        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(pos.x - 4) + "px";
+                outlineDiv.current!.style.left = getBoundPosition(x - clientRect.x - dragStartX.current) + "px";
             }
-        }
 
-        if (layout.isRealtimeResize()) {
-            updateLayout();
+            if (layout.isRealtimeResize()) {
+                updateLayout(true);
+            }
         }
     };
 
-    const updateLayout = () => {
-        let value = 0;
-        if (outlineDiv) {
-            if (node.getOrientation() === Orientation.HORZ) {
-                value = outlineDiv.current!.offsetTop;
-            } else {
-                value = outlineDiv.current!.offsetLeft;
-            }
-        }
+    const onDragEnd = () => {
+        if (outlineDiv.current) {
+            updateLayout(false);
 
-        if (parentNode instanceof BorderNode) {
-            const pos = (parentNode as BorderNode)._calculateSplit(node, value);
-            layout.doAction(Actions.adjustBorderSplit((node.getParent() as Node).getId(), pos));
-        } else {
-            const splitSpec = parentNode._calculateSplit(node, value);
-            if (splitSpec !== undefined) {
-                layout.doAction(Actions.adjustSplit(splitSpec));
+            const rootdiv = layout.getRootDiv();
+            if (rootdiv && outlineDiv.current) {
+                rootdiv.removeChild(outlineDiv.current as HTMLElement);
             }
+            outlineDiv.current = undefined;
         }
+        enablePointerOnIFrames(true, layout.getCurrentDocument()!);
+        setDragging(false);
     };
 
-    const onDragEnd = () => {
-        updateLayout();
+    const updateLayout = (realtime: boolean) => {
 
-        const rootdiv = layout.getRootDiv();
-        if (rootdiv) {
-            rootdiv.removeChild(outlineDiv.current as HTMLDivElement);
-        }
+        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) => {
@@ -144,58 +178,79 @@ export const Splitter = (props: ISplitterProps) => {
     };
 
     const cm = layout.getClassName;
-    let r = node.getRect();
-    const style = r.styleWithPosition({
-        cursor: node.getOrientation() === Orientation.HORZ ? "ns-resize" : "ew-resize",
-    });
+    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 (parentNode instanceof BorderNode) {
+    if (node instanceof BorderNode) {
         className += " " + cm(CLASSES.FLEXLAYOUT__SPLITTER_BORDER);
     } else {
-        if (node.getModel().getMaximizedTabset() !== undefined) {
+        if (node.getModel().getMaximizedTabset(layout.getWindowId()) !== undefined) {
             style.display = "none";
         }
     }
 
-    const extra = node.getModel().getSplitterExtra();
+    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
-            style={style}
-            data-layout-path={path}
             className={className}
-            onTouchStart={onMouseDown}
-            onMouseDown={onMouseDown}>
+            style={style}
+            ref={selfRef}
+            data-layout-path={node.getPath() + "/s" + (index - 1)}
+            onPointerDown={onPointerDown}>
+            {handle}
         </div>);
     } else {
         // add extended transparent div for hit testing
-        // extends forward only, so as not to interfere with scrollbars
-        let r2 = r.clone();
-        r2.x = 0;
-        r2.y = 0;
-        if (node.getOrientation() === Orientation.VERT) {
-            r2.width += extra;
+
+        const style2: Record<string, any> = {};
+        if (node.getOrientation() === Orientation.HORZ) {
+            style2.height = "100%";
+            style2.width = size + extra + "px";
+            style2.cursor = "ew-resize";
         } else {
-            r2.height += extra;
+            style2.height = size + extra + "px";
+            style2.width = "100%";
+            style2.cursor = "ns-resize";
         }
-        const style2 = r2.styleWithPosition({
-            cursor: node.getOrientation() === Orientation.HORZ ? "ns-resize" : "ew-resize"
-        });
 
         const className2 = cm(CLASSES.FLEXLAYOUT__SPLITTER_EXTRA);
 
         return (
             <div
+                className={className}
                 style={style}
-                data-layout-path={path}
-                className={className}>
+                ref={selfRef}
+                data-layout-path={node.getPath() + "/s" + (index - 1)}
+                onPointerDown={onPointerDown}
+            >
                 <div
                     style={style2}
+                    ref={extendedRef}
                     className={className2}
-                    onTouchStart={onMouseDown}
-                    onMouseDown={onMouseDown}>
+                    onPointerDown={onPointerDown}>
                 </div>
             </div>);
     }
-
 };
+

package/src/view/Tab.tsx

@@ -1,64 +1,98 @@
 import * as React from "react";
-import { Fragment } from "react";
-import { Actions } from "../model/Actions";
 import { TabNode } from "../model/TabNode";
 import { TabSetNode } from "../model/TabSetNode";
 import { CLASSES } from "../Types";
-import { ILayoutCallbacks } from "./Layout";
-import { ErrorBoundary } from "./ErrorBoundary";
-import { I18nLabel } from "../I18nLabel";
+import { LayoutInternal } from "./Layout";
 import { BorderNode } from "../model/BorderNode";
-import { hideElement } from "./Utils";
+import { Actions } from "../model/Actions";
 
 /** @internal */
 export interface ITabProps {
-    layout: ILayoutCallbacks;
-    selected: boolean;
+    layout: LayoutInternal;
     node: TabNode;
-    factory: (node: TabNode) => React.ReactNode;
+    selected: boolean;
     path: string;
 }
 
 /** @internal */
 export const Tab = (props: ITabProps) => {
-    const { layout, selected, node, factory, path } = props;
-    const [renderComponent, setRenderComponent] = React.useState<boolean>(!props.node.isEnableRenderOnDemand() || props.selected);
+    const { layout, selected, node, path } = props;
+    const selfRef = React.useRef<HTMLDivElement | null>(null);
+    const firstSelect = React.useRef<boolean>(true);
+
+    const parentNode = node.getParent() as TabSetNode | BorderNode;
+    const rect = parentNode.getContentRect()!;
 
     React.useLayoutEffect(() => {
-        if (!renderComponent && selected) {
-            // load on demand
-            // console.log("load on demand: " + node.getName());
-            setRenderComponent(true);
+        const element = node.getMoveableElement()!;
+        selfRef.current!.appendChild(element);
+        node.setMoveableElement(element);
+
+        const handleScroll = () => {
+            node.saveScrollPosition();
+        };
+
+        // keep scroll position
+        element.addEventListener('scroll', handleScroll);
+
+        // listen for clicks to change active tabset
+        selfRef.current!.addEventListener("pointerdown", onPointerDown);
+
+        return () => {
+            element.removeEventListener('scroll', handleScroll);
+            if (selfRef.current) {
+                selfRef.current.removeEventListener("pointerdown", onPointerDown);
+            }
+            node.setVisible(false);
+        }
+    }, []);
+
+    React.useEffect(() => {
+        if (node.isSelected()) {
+            if (firstSelect.current) {
+                node.restoreScrollPosition(); // if window docked back in
+                firstSelect.current = false;
+            }
         }
     });
 
-    const onMouseDown = () => {
-        const parent = node.getParent() as TabSetNode;
-        if (parent.getType() === TabSetNode.TYPE) {
+    const onPointerDown = () => {
+        const parent = node.getParent()!; // cannot use parentNode here since will be out of date
+        if (parent instanceof TabSetNode) {
             if (!parent.isActive()) {
-                layout.doAction(Actions.setActiveTabset(parent.getId()));
+                layout.doAction(Actions.setActiveTabset(parent.getId(), layout.getWindowId()));
             }
         }
     };
 
+    node.setRect(rect); // needed for resize event
     const cm = layout.getClassName;
-    const useVisibility = node.getModel().isUseVisibility();
+    const style: Record<string, any> = {};
 
-    const parentNode = node.getParent() as TabSetNode | BorderNode;
-    const style: Record<string, any> = node._styleWithPosition();
-    if (!selected) {
-        hideElement(style, useVisibility);
-    }
+    rect.styleWithPosition(style);
 
-    if (parentNode instanceof TabSetNode) {
-        if (node.getModel().getMaximizedTabset() !== undefined && !parentNode.isMaximized()) {
-            hideElement(style, useVisibility);
+    let overlay = null;
+
+    if (selected) {
+        node.setVisible(true);
+        if (document.hidden && node.isEnablePopoutOverlay()) {
+            const overlayStyle: Record<string, any> = {};
+            rect.styleWithPosition(overlayStyle);
+            overlay = (<div style={overlayStyle} className={cm(CLASSES.FLEXLAYOUT__TAB_OVERLAY)}></div>)
         }
+    } else {
+        style.display = "none";
+        node.setVisible(false);
     }
 
-    let child;
-    if (renderComponent) {
-        child = factory(node);
+    if (parentNode instanceof TabSetNode) {
+        if (node.getModel().getMaximizedTabset(layout.getWindowId()) !== undefined) {
+            if (parentNode.isMaximized()) {
+                style.zIndex = 10;
+            } else {
+                style.display = "none";
+            }
+        }
     }
 
     let className = cm(CLASSES.FLEXLAYOUT__TAB);
@@ -66,22 +100,22 @@ export const Tab = (props: ITabProps) => {
         className += " " + cm(CLASSES.FLEXLAYOUT__TAB_BORDER);
         className += " " + cm(CLASSES.FLEXLAYOUT__TAB_BORDER_ + parentNode.getLocation().getName());
     }
-    
+
     if (node.getContentClassName() !== undefined) {
         className += " " + node.getContentClassName();
     }
 
     return (
-        <div
-            className={className}
-            data-layout-path={path}
-            onMouseDown={onMouseDown}
-            onTouchStart={onMouseDown}
-            style={style}>
-            <ErrorBoundary message={props.layout.i18nName(I18nLabel.Error_rendering_component)}>
-                <Fragment>{child}</Fragment>
-            </ErrorBoundary>
-        </div>
+        <>
+            {overlay}
+
+            <div
+                ref={selfRef}
+                style={style}
+                className={className}
+                data-layout-path={path}
+            />
+        </>
     );
 };