flexlayout-react 0.8.12 → 0.8.13

package/src/view/Tab.tsx

@@ -1,128 +0,0 @@
-import * as React from "react";
-import { TabNode } from "../model/TabNode";
-import { TabSetNode } from "../model/TabSetNode";
-import { CLASSES } from "../Types";
-import { LayoutInternal } from "./Layout";
-import { BorderNode } from "../model/BorderNode";
-import { Actions } from "../model/Actions";
-
-/** @internal */
-export interface ITabProps {
-    layout: LayoutInternal;
-    node: TabNode;
-    selected: boolean;
-    path: string;
-}
-
-/** @internal */
-export const Tab = (props: ITabProps) => {
-    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(() => {
-        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 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.getWindowId()));
-            }
-        }
-    };
-
-    node.setRect(rect); // needed for resize event
-    const cm = layout.getClassName;
-    const style: Record<string, any> = {};
-
-    rect.styleWithPosition(style);
-
-    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);
-    }
-
-    if (parentNode instanceof TabSetNode) {
-        if (node.getModel().getMaximizedTabset(layout.getWindowId()) !== undefined) {
-            if (parentNode.isMaximized()) {
-                style.zIndex = 10;
-            } else {
-                style.display = "none";
-            }
-        }
-    }
-
-    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);
-        className += " " + cm(CLASSES.FLEXLAYOUT__TAB_BORDER_ + parentNode.getLocation().getName());
-    }
-
-    if (node.getContentClassName() !== undefined) {
-        className += " " + node.getContentClassName();
-    }
-
-    return (
-        <>
-            {overlay}
-
-            <div
-                ref={selfRef}
-                style={style}
-                className={className}
-                data-layout-path={path}
-            />
-        </>
-    );
-};
-
-

package/src/view/TabButton.tsx

@@ -1,200 +0,0 @@
-import * as React from "react";
-import { I18nLabel } from "../I18nLabel";
-import { Actions } from "../model/Actions";
-import { TabNode } from "../model/TabNode";
-import { TabSetNode } from "../model/TabSetNode";
-import { LayoutInternal } from "./Layout";
-import { ICloseType } from "../model/ICloseType";
-import { CLASSES } from "../Types";
-import { getRenderStateEx, isAuxMouseEvent } from "./Utils";
-
-/** @internal */
-export interface ITabButtonProps {
-    layout: LayoutInternal;
-    node: TabNode;
-    selected: boolean;
-    path: string;
-}
-
-/** @internal */
-export const TabButton = (props: ITabButtonProps) => {
-    const { layout, node, selected, path } = props;
-    const selfRef = React.useRef<HTMLDivElement | null>(null);
-    const contentRef = React.useRef<HTMLInputElement | null>(null);
-    const icons = layout.getIcons();
-
-    React.useLayoutEffect(() => {
-        node.setTabRect(layout.getBoundingClientRect(selfRef.current!));
-        if (layout.getEditingTab() === node) {
-            (contentRef.current! as HTMLInputElement).select();
-        }
-    });
-
-    const onDragStart = (event: React.DragEvent<HTMLElement>) => {
-        if (node.isEnableDrag()) {
-            event.stopPropagation(); // prevent starting a tabset drag as well
-            layout.setDragNode(event.nativeEvent, node as TabNode);
-        } else {
-            event.preventDefault();
-        }
-    };
-
-    const onDragEnd = (event: React.DragEvent<HTMLElement>) => {
-        layout.clearDragMain();
-    };
-
-    const onAuxMouseClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-        if (isAuxMouseEvent(event)) {
-            layout.auxMouseClick(node, event);
-        } 
-    };
-
-    const onContextMenu = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-        layout.showContextMenu(node, event);
-    };
-
-    const onClick = () => {
-        layout.doAction(Actions.selectTab(node.getId()));
-    };
-
-    const onDoubleClick = (event: React.MouseEvent<HTMLElement>) => {
-        if (node.isEnableRename()) {
-            onRename();
-            event.stopPropagation();
-        }
-    };
-
-    const onRename = () => {
-        layout.setEditingTab(node);
-        layout.getCurrentDocument()!.body.addEventListener("pointerdown", onEndEdit);
-    };
-
-    const onEndEdit = (event: Event) => {
-        if (event.target !== contentRef.current!) {
-            layout.getCurrentDocument()!.body.removeEventListener("pointerdown", onEndEdit);
-            layout.setEditingTab(undefined);
-        }
-    };
-
-    const isClosable = () => {
-        const closeType = node.getCloseType();
-        if (selected || closeType === ICloseType.Always) {
-            return true;
-        }
-        if (closeType === ICloseType.Visible) {
-            // not selected but x should be visible due to hover
-            if (window.matchMedia && window.matchMedia("(hover: hover) and (pointer: fine)").matches) {
-                return true;
-            }
-        }
-        return false;
-    };
-
-    const onClose = (event: React.MouseEvent<HTMLElement>) => {
-        if (isClosable()) {
-            layout.doAction(Actions.deleteTab(node.getId()));
-            event.stopPropagation();
-        }
-    };
-
-    const onClosePointerDown = (event: React.PointerEvent<HTMLElement>) => {
-        event.stopPropagation();
-    };
-
-    const onTextBoxPointerDown = (event: React.PointerEvent<HTMLInputElement>) => {
-        event.stopPropagation();
-    };
-
-    const onTextBoxKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
-        if (event.code === 'Escape') {
-            // esc
-            layout.setEditingTab(undefined);
-        } else if (event.code === 'Enter' || event.code === 'NumpadEnter') {
-            // enter
-            layout.setEditingTab(undefined);
-            layout.doAction(Actions.renameTab(node.getId(), (event.target as HTMLInputElement).value));
-        }
-    };
-
-    const cm = layout.getClassName;
-    const parentNode = node.getParent() as TabSetNode;
-
-    const isStretch = parentNode.isEnableSingleTabStretch() && parentNode.getChildren().length === 1;
-    let baseClassName = isStretch ? CLASSES.FLEXLAYOUT__TAB_BUTTON_STRETCH : CLASSES.FLEXLAYOUT__TAB_BUTTON;
-    let classNames = cm(baseClassName);
-    classNames += " " + cm(baseClassName + "_" + parentNode.getTabLocation());
-
-    if (!isStretch) {
-        if (selected) {
-            classNames += " " + cm(baseClassName + "--selected");
-        } else {
-            classNames += " " + cm(baseClassName + "--unselected");
-        }
-    }
-
-    if (node.getClassName() !== undefined) {
-        classNames += " " + node.getClassName();
-    }
-
-    const renderState = getRenderStateEx(layout, node);
-
-    let content = renderState.content ? (
-        <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_CONTENT)}>
-            {renderState.content}
-        </div>) : null;
-
-    const leading = renderState.leading ? (
-        <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_LEADING)}>
-            {renderState.leading}
-        </div>) : null;
-
-    if (layout.getEditingTab() === node) {
-        content = (
-            <input
-                ref={contentRef}
-                className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX)}
-                data-layout-path={path + "/textbox"}
-                type="text"
-                autoFocus={true}
-                defaultValue={node.getName()}
-                onKeyDown={onTextBoxKeyPress}
-                onPointerDown={onTextBoxPointerDown}
-            />
-        );
-    }
-
-    if (node.isEnableClose() && !isStretch) {
-        const closeTitle = layout.i18nName(I18nLabel.Close_Tab);
-        renderState.buttons.push(
-            <div
-                key="close"
-                data-layout-path={path + "/button/close"}
-                title={closeTitle}
-                className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_TRAILING)}
-                onPointerDown={onClosePointerDown}
-                onClick={onClose}>
-                {(typeof icons.close === "function") ? icons.close(node) : icons.close}
-            </div>
-        );
-    }
-
-    return (
-        <div
-            ref={selfRef}
-            data-layout-path={path}
-            className={classNames}
-            onClick={onClick}
-            onAuxClick={onAuxMouseClick}
-            onContextMenu={onContextMenu}
-            title={node.getHelpText()}
-            draggable={true}
-            onDragStart={onDragStart}
-            onDragEnd={onDragEnd}
-            onDoubleClick={onDoubleClick}
-        >
-            {leading}
-            {content}
-            {renderState.buttons}
-        </div>
-    );
-};

package/src/view/TabButtonStamp.tsx

@@ -1,42 +0,0 @@
-import { TabNode } from "../model/TabNode";
-import { LayoutInternal } from "./Layout";
-import { CLASSES } from "../Types";
-import { getRenderStateEx } from "./Utils";
-
-/** @internal */
-export interface ITabButtonStampProps {
-    node: TabNode;
-    layout: LayoutInternal;
-}
-
-/** @internal */
-export const TabButtonStamp = (props: ITabButtonStampProps) => {
-    const { layout, node } = props;
-
-    const cm = layout.getClassName;
-
-    let classNames = cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_STAMP);
-
-    const renderState = getRenderStateEx(layout, node);
-
-    let content = renderState.content ? (
-        <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_CONTENT)}>
-            {renderState.content}
-        </div>)
-        : node.getNameForOverflowMenu();
-
-    const leading = renderState.leading ? (
-        <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_LEADING)}>
-            {renderState.leading}
-        </div>) : null;
-
-    return (
-        <div
-            className={classNames}
-            title={node.getHelpText()}
-        >
-            {leading}
-            {content}
-        </div>
-    );
-};

package/src/view/TabOverflowHook.tsx

@@ -1,305 +0,0 @@
-import * as React from "react";
-import { TabSetNode } from "../model/TabSetNode";
-import { BorderNode } from "../model/BorderNode";
-import { Orientation } from "../Orientation";
-import { LayoutInternal } from "./Layout";
-import { TabNode } from "../model/TabNode";
-import { startDrag } from "./Utils";
-import { Rect } from "../Rect";
-
-/** @internal */
-export const useTabOverflow = (
-    layout: LayoutInternal,
-    node: TabSetNode | BorderNode,
-    orientation: Orientation,
-    tabStripRef: React.RefObject<HTMLElement | null>,
-    miniScrollRef: React.RefObject<HTMLElement | null>,
-    tabClassName: string
-) => {
-    const [hiddenTabs, setHiddenTabs] = React.useState<number[]>([]);
-    const [isShowHiddenTabs, setShowHiddenTabs] = React.useState<boolean>(false);
-    const [isDockStickyButtons, setDockStickyButtons] = React.useState<boolean>(false);
-
-    const selfRef = React.useRef<HTMLDivElement | null>(null);
-    const userControlledPositionRef = React.useRef<boolean>(false);
-    const updateHiddenTabsTimerRef = React.useRef<NodeJS.Timeout | undefined>(undefined);
-    const hiddenTabsRef = React.useRef<number[]>([]);
-    const thumbInternalPos = React.useRef<number>(0);
-    const repositioningRef = React.useRef<boolean>(false);
-    hiddenTabsRef.current = hiddenTabs;
-
-    // if node id changes (new model) then reset scroll to 0
-    React.useLayoutEffect(() => {
-        if (tabStripRef.current) {
-            setScrollPosition(0);
-        }
-    }, [node.getId()]);
-
-    // if selected node or tabset/border rectangle change then unset usercontrolled (so selected tab will be kept in view)
-    React.useLayoutEffect(() => {
-        userControlledPositionRef.current = false;
-    }, [node.getSelectedNode(), node.getRect().width, node.getRect().height]);
-
-    React.useLayoutEffect(() => {
-        checkForOverflow(); // if tabs + sticky buttons length > scroll area => move sticky buttons to right buttons
-
-        if (userControlledPositionRef.current === false) {
-            scrollIntoView();
-        }
-
-        updateScrollMetrics();
-        updateHiddenTabs();
-    });
-
-    function scrollIntoView() {
-        const selectedTabNode = node.getSelectedNode() as TabNode;
-        if (selectedTabNode && tabStripRef.current) {
-            const stripRect = layout.getBoundingClientRect(tabStripRef.current);
-            const selectedRect = selectedTabNode.getTabRect()!;
-
-            let shift = getNear(stripRect) - getNear(selectedRect);
-            if (shift > 0 || getSize(selectedRect) > getSize(stripRect)) { 
-                setScrollPosition(getScrollPosition(tabStripRef.current) - shift);
-                repositioningRef.current = true; // prevent onScroll setting userControlledPosition
-            } else {
-                shift = getFar(selectedRect) - getFar(stripRect);
-                if (shift > 0) {
-                    setScrollPosition(getScrollPosition(tabStripRef.current) + shift);
-                    repositioningRef.current = true;
-                }
-            }
-        }
-    }
-
-    const updateScrollMetrics = () => {
-        if (tabStripRef.current && miniScrollRef.current) {
-            const t = tabStripRef.current;
-            const s = miniScrollRef.current;
-
-            const size = getElementSize(t);
-            const scrollSize = getScrollSize(t);
-            const position = getScrollPosition(t);
-
-            if (scrollSize > size && scrollSize > 0) {
-                let thumbSize = size * size / scrollSize;
-                let adjust = 0;
-                if (thumbSize < 20) {
-                    adjust = 20 - thumbSize;
-                    thumbSize = 20;
-                }
-                const thumbPos = position * (size - adjust) / scrollSize;
-                if (orientation === Orientation.HORZ) {
-                    s.style.width = thumbSize + "px";
-                    s.style.left = thumbPos + "px";
-                } else {
-                    s.style.height = thumbSize + "px";
-                    s.style.top = thumbPos + "px";
-                }
-                s.style.display = "block";
-            } else {
-                s.style.display = "none";
-            }
-
-            if (orientation === Orientation.HORZ) {
-                s.style.bottom = "0px";
-            } else {
-                s.style.right = "0px";
-            }
-        }
-    }
-
-    const updateHiddenTabs = () => {
-        const newHiddenTabs = findHiddenTabs();
-        const showHidden = newHiddenTabs.length > 0;
-
-        if (showHidden !== isShowHiddenTabs) {
-            setShowHiddenTabs(showHidden);
-        }
-
-        if (updateHiddenTabsTimerRef.current === undefined) {
-            // throttle updates to prevent Maximum update depth exceeded error
-            updateHiddenTabsTimerRef.current = setTimeout(() => {
-                const newHiddenTabs = findHiddenTabs();
-                if (!arraysEqual(newHiddenTabs, hiddenTabsRef.current)) {
-                    setHiddenTabs(newHiddenTabs);
-                }
-
-                updateHiddenTabsTimerRef.current = undefined;
-            }, 100);
-        }
-    }
-
-    const onScroll = () => {
-        if (!repositioningRef.current){
-            userControlledPositionRef.current=true;
-        }
-        repositioningRef.current = false;
-        updateScrollMetrics()
-        updateHiddenTabs();
-    };
-
-    const onScrollPointerDown = (event: React.PointerEvent<HTMLElement>) => {
-        event.stopPropagation();
-        miniScrollRef.current!.setPointerCapture(event.pointerId)
-        const r = miniScrollRef.current?.getBoundingClientRect()!;
-        if (orientation === Orientation.HORZ) {
-            thumbInternalPos.current = event.clientX - r.x;
-        } else {
-            thumbInternalPos.current = event.clientY - r.y;
-        }
-        startDrag(event.currentTarget.ownerDocument, event, onDragMove, onDragEnd, onDragCancel);
-    }
-
-    const onDragMove = (x: number, y: number) => {
-        if (tabStripRef.current && miniScrollRef.current) {
-            const t = tabStripRef.current;
-            const s = miniScrollRef.current;
-            const size = getElementSize(t);
-            const scrollSize = getScrollSize(t);
-            const thumbSize = getElementSize(s);
-
-            const r = t.getBoundingClientRect()!;
-            let thumb = 0;
-            if (orientation === Orientation.HORZ) {
-                thumb = x - r.x - thumbInternalPos.current;
-            } else {
-                thumb = y - r.y - thumbInternalPos.current
-            }
-
-            thumb = Math.max(0, Math.min(scrollSize - thumbSize, thumb));
-            if (size > 0) {
-                const scrollPos = thumb * scrollSize / size;
-                setScrollPosition(scrollPos);
-            }
-        }
-    }
-
-    const onDragEnd = () => {
-    }
-
-    const onDragCancel = () => {
-    }
-
-    const checkForOverflow = () => {
-        if (tabStripRef.current) {
-            const strip = tabStripRef.current;
-            const tabContainer = strip.firstElementChild!;
-
-            const offset = isDockStickyButtons ? 10 : 0; // prevents flashing, after sticky buttons docked set, must be 10 pixels smaller before unsetting
-            const dock = (getElementSize(tabContainer) + offset) > getElementSize(tabStripRef.current);
-            if (dock !== isDockStickyButtons) {
-                setDockStickyButtons(dock);
-            }
-        }
-    }
-
-    const findHiddenTabs: () => number[] = () => {
-        const hidden: number[] = [];
-        if (tabStripRef.current) {
-            const strip = tabStripRef.current;
-            const stripRect = strip.getBoundingClientRect();
-            const visibleNear = getNear(stripRect) - 1;
-            const visibleFar = getFar(stripRect) + 1;
-
-            const tabContainer = strip.firstElementChild!;
-
-            let i = 0;
-            Array.from(tabContainer.children).forEach((child) => {
-                const tabRect = child.getBoundingClientRect();
-
-                if (child.classList.contains(tabClassName)) {
-                    if (getNear(tabRect) < visibleNear || getFar(tabRect) > visibleFar) {
-                        hidden.push(i);
-                    }
-                    i++;
-                }
-            });
-        }
-
-        return hidden;
-    };
-
-    const onMouseWheel = (event: React.WheelEvent<HTMLElement>) => {
-        if (tabStripRef.current) {
-            if (node.getChildren().length === 0) return;
-
-            let delta = 0;
-            if (Math.abs(event.deltaY) > 0) {
-                delta = -event.deltaY;
-                if (event.deltaMode === 1) {
-                    // DOM_DELTA_LINE	0x01	The delta values are specified in lines.
-                    delta *= 40;
-                }
-                const newPos = getScrollPosition(tabStripRef.current) - delta;
-                const maxScroll = getScrollSize(tabStripRef.current) - getElementSize(tabStripRef.current);
-                const p = Math.max(0, Math.min(maxScroll, newPos));
-                setScrollPosition(p);
-                event.stopPropagation();
-            }
-        }
-    };
-
-    // orientation helpers:
-
-    const getNear = (rect: DOMRect | Rect) => {
-        if (orientation === Orientation.HORZ) {
-            return rect.x;
-        } else {
-            return rect.y;
-        }
-    };
-
-    const getFar = (rect: DOMRect | Rect) => {
-        if (orientation === Orientation.HORZ) {
-            return rect.right;
-        } else {
-            return rect.bottom;
-        }
-    };
-
-    const getElementSize = (elm: Element) => {
-        if (orientation === Orientation.HORZ) {
-            return elm.clientWidth;
-        } else {
-            return elm.clientHeight;
-        }
-    }
-
-    const getSize = (rect: DOMRect | Rect) => {
-        if (orientation === Orientation.HORZ) {
-            return rect.width;
-        } else {
-            return rect.height;
-        }
-    }
-
-    const getScrollSize = (elm: Element) => {
-        if (orientation === Orientation.HORZ) {
-            return elm.scrollWidth;
-        } else {
-            return elm.scrollHeight;
-        }
-    }
-
-    const setScrollPosition = (p: number) => {
-        if (orientation === Orientation.HORZ) {
-            tabStripRef.current!.scrollLeft = p;
-        } else {
-            tabStripRef.current!.scrollTop = p;
-        }
-    }
-
-    const getScrollPosition = (elm: Element) => {
-        if (orientation === Orientation.HORZ) {
-            return elm.scrollLeft;
-        } else {
-            return elm.scrollTop;
-        }
-    }
-
-    return { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isDockStickyButtons, isShowHiddenTabs };
-};
-
-function arraysEqual(arr1: number[], arr2: number[]) {
-    return arr1.length === arr2.length && arr1.every((val, index) => val === arr2[index]);
-}