flexlayout-react 0.7.15 → 0.8.0

package/src/view/TabButton.tsx

@@ -3,43 +3,49 @@ import { I18nLabel } from "../I18nLabel";
 import { Actions } from "../model/Actions";
 import { TabNode } from "../model/TabNode";
 import { TabSetNode } from "../model/TabSetNode";
-import { Rect } from "../Rect";
-import { IconFactory, IIcons, ILayoutCallbacks, TitleFactory } from "./Layout";
+import { LayoutInternal } from "./Layout";
 import { ICloseType } from "../model/ICloseType";
 import { CLASSES } from "../Types";
 import { getRenderStateEx, isAuxMouseEvent } from "./Utils";
 
 /** @internal */
 export interface ITabButtonProps {
-    layout: ILayoutCallbacks;
+    layout: LayoutInternal;
     node: TabNode;
     selected: boolean;
-    iconFactory?: IconFactory;
-    titleFactory?: TitleFactory;
-    icons: IIcons;
     path: string;
 }
 
 /** @internal */
 export const TabButton = (props: ITabButtonProps) => {
-    const { layout, node, selected, iconFactory, titleFactory, icons, path } = props;
+    const { layout, node, selected, path } = props;
     const selfRef = React.useRef<HTMLDivElement | null>(null);
     const contentRef = React.useRef<HTMLInputElement | null>(null);
+    const icons = layout.getIcons();
 
-    const onMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) => {
-
-        if (!isAuxMouseEvent(event) && !layout.getEditingTab()) {
-            layout.dragStart(event, undefined, node, node.isEnableDrag(), onClick, onDoubleClick);
+    React.useLayoutEffect(() => {
+        node.setTabRect(layout.getBoundingClientRect(selfRef.current!));
+        if (layout.getEditingTab() === node) {
+            (contentRef.current! as HTMLInputElement).select();
         }
+    });
+
+    const onDragStart = (event: React.DragEvent<HTMLElement>) => {
+        event.stopPropagation(); // prevent starting a tabset drag as well
+        layout.setDragNode(event.nativeEvent, node as TabNode);
+    };
+
+    const onDragEnd = (event: React.DragEvent<HTMLElement>) => {
+        layout.clearDragMain();
     };
 
-    const onAuxMouseClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    const onAuxMouseClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         if (isAuxMouseEvent(event)) {
             layout.auxMouseClick(node, event);
-        }
+        } 
     };
 
-    const onContextMenu = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    const onContextMenu = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         layout.showContextMenu(node, event);
     };
 
@@ -47,22 +53,21 @@ export const TabButton = (props: ITabButtonProps) => {
         layout.doAction(Actions.selectTab(node.getId()));
     };
 
-    const onDoubleClick = (event: Event) => {
+    const onDoubleClick = (event: React.MouseEvent<HTMLElement>) => {
         if (node.isEnableRename()) {
             onRename();
+            event.stopPropagation();
         }
     };
 
     const onRename = () => {
         layout.setEditingTab(node);
-        layout.getCurrentDocument()!.body.addEventListener("mousedown", onEndEdit);
-        layout.getCurrentDocument()!.body.addEventListener("touchstart", onEndEdit);
+        layout.getCurrentDocument()!.body.addEventListener("pointerdown", onEndEdit);
     };
 
     const onEndEdit = (event: Event) => {
         if (event.target !== contentRef.current!) {
-            layout.getCurrentDocument()!.body.removeEventListener("mousedown", onEndEdit);
-            layout.getCurrentDocument()!.body.removeEventListener("touchstart", onEndEdit);
+            layout.getCurrentDocument()!.body.removeEventListener("pointerdown", onEndEdit);
             layout.setEditingTab(undefined);
         }
     };
@@ -81,7 +86,7 @@ export const TabButton = (props: ITabButtonProps) => {
         return false;
     };
 
-    const onClose = (event: React.MouseEvent<HTMLDivElement>) => {
+    const onClose = (event: React.MouseEvent<HTMLElement>) => {
         if (isClosable()) {
             layout.doAction(Actions.deleteTab(node.getId()));
         } else {
@@ -89,35 +94,11 @@ export const TabButton = (props: ITabButtonProps) => {
         }
     };
 
-    const onCloseMouseDown = (event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {
+    const onClosePointerDown = (event: React.PointerEvent<HTMLElement>) => {
         event.stopPropagation();
     };
 
-    React.useLayoutEffect(() => {
-        updateRect();
-        if (layout.getEditingTab() === node) {
-            (contentRef.current! as HTMLInputElement).select();
-        }
-    });
-
-    const updateRect = () => {
-        // record position of tab in node
-        const layoutRect = layout.getDomRect();
-        const r = selfRef.current?.getBoundingClientRect();
-        if (r && layoutRect) {
-            node._setTabRect(
-                new Rect(
-                    r.left - layoutRect.left,
-                    r.top - layoutRect.top,
-                    r.width,
-                    r.height
-                )
-            );
-        }
-    };
-
-    const onTextBoxMouseDown = (event: React.MouseEvent<HTMLInputElement> | React.TouchEvent<HTMLInputElement>) => {
-        // console.log("onTextBoxMouseDown");
+    const onTextBoxPointerDown = (event: React.PointerEvent<HTMLInputElement>) => {
         event.stopPropagation();
     };
 
@@ -152,7 +133,7 @@ export const TabButton = (props: ITabButtonProps) => {
         classNames += " " + node.getClassName();
     }
 
-    const renderState = getRenderStateEx(layout, node, iconFactory, titleFactory);
+    const renderState = getRenderStateEx(layout, node);
 
     let content = renderState.content ? (
         <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_CONTENT)}>
@@ -174,8 +155,7 @@ export const TabButton = (props: ITabButtonProps) => {
                 autoFocus={true}
                 defaultValue={node.getName()}
                 onKeyDown={onTextBoxKeyPress}
-                onMouseDown={onTextBoxMouseDown}
-                onTouchStart={onTextBoxMouseDown}
+                onPointerDown={onTextBoxPointerDown}
             />
         );
     }
@@ -188,9 +168,8 @@ export const TabButton = (props: ITabButtonProps) => {
                 data-layout-path={path + "/button/close"}
                 title={closeTitle}
                 className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_TRAILING)}
-                onMouseDown={onCloseMouseDown}
-                onClick={onClose}
-                onTouchStart={onCloseMouseDown}>
+                onPointerDown={onClosePointerDown}
+                onClick={onClose}>
                 {(typeof icons.close === "function") ? icons.close(node) : icons.close}
             </div>
         );
@@ -201,12 +180,14 @@ export const TabButton = (props: ITabButtonProps) => {
             ref={selfRef}
             data-layout-path={path}
             className={classNames}
-            onMouseDown={onMouseDown}
-            onClick={onAuxMouseClick}
+            onClick={onClick}
             onAuxClick={onAuxMouseClick}
             onContextMenu={onContextMenu}
-            onTouchStart={onMouseDown}
             title={node.getHelpText()}
+            draggable={true}
+            onDragStart={onDragStart}
+            onDragEnd={onDragEnd}
+            onDoubleClick={onDoubleClick}
         >
             {leading}
             {content}

package/src/view/TabButtonStamp.tsx

@@ -1,33 +1,30 @@
 import * as React from "react";
 import { TabNode } from "../model/TabNode";
-import { IconFactory, ILayoutCallbacks, TitleFactory } from "./Layout";
+import { LayoutInternal } from "./Layout";
 import { CLASSES } from "../Types";
 import { getRenderStateEx } from "./Utils";
 
 /** @internal */
 export interface ITabButtonStampProps {
     node: TabNode;
-    layout: ILayoutCallbacks;
-    iconFactory?: IconFactory;
-    titleFactory?: TitleFactory;
+    layout: LayoutInternal;
 }
 
 /** @internal */
 export const TabButtonStamp = (props: ITabButtonStampProps) => {
-    const { layout, node, iconFactory, titleFactory } = props;
-    const selfRef = React.useRef<HTMLDivElement | null>(null);
+    const { layout, node } = props;
 
     const cm = layout.getClassName;
 
     let classNames = cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_STAMP);
 
-    const renderState = getRenderStateEx(layout, node, iconFactory, titleFactory);
+    const renderState = getRenderStateEx(layout, node);
 
     let content = renderState.content ? (
         <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_CONTENT)}>
             {renderState.content}
         </div>)
-        : node._getNameForOverflowMenu();
+        : node.getNameForOverflowMenu();
 
     const leading = renderState.leading ? (
         <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_LEADING)}>
@@ -36,7 +33,6 @@ export const TabButtonStamp = (props: ITabButtonStampProps) => {
 
     return (
         <div
-            ref={selfRef}
             className={classNames}
             title={node.getHelpText()}
         >

package/src/view/TabOverflowHook.tsx

@@ -9,12 +9,12 @@ import { Orientation } from "../Orientation";
 export const useTabOverflow = (
     node: TabSetNode | BorderNode,
     orientation: Orientation,
-    toolbarRef: React.MutableRefObject<HTMLDivElement | null>,
-    stickyButtonsRef: React.MutableRefObject<HTMLDivElement | null>
+    toolbarRef: React.MutableRefObject<HTMLElement | null>,
+    stickyButtonsRef: React.MutableRefObject<HTMLElement | null>
 ) => {
     const firstRender = React.useRef<boolean>(true);
     const tabsTruncated = React.useRef<boolean>(false);
-    const lastRect = React.useRef<Rect>(new Rect(0, 0, 0, 0));
+    const lastRect = React.useRef<Rect>(Rect.empty());
     const selfRef = React.useRef<HTMLDivElement | null>(null);
 
     const [position, setPosition] = React.useState<number>(0);
@@ -28,10 +28,13 @@ export const useTabOverflow = (
     }, [node.getSelectedNode(), node.getRect().width, node.getRect().height]);
 
     React.useLayoutEffect(() => {
-        updateVisibleTabs();
+        const nodeRect = node instanceof TabSetNode ? node.getRect() : (node as BorderNode).getTabHeaderRect()!;
+        if (nodeRect.width > 0 && nodeRect.height > 0) {
+            updateVisibleTabs();
+        }
     });
 
-    const instance = selfRef.current;
+    const instance = toolbarRef.current;
     React.useEffect(() => {
         if (!instance) {
             return;
@@ -109,10 +112,12 @@ export const useTabOverflow = (
                     // when selected tab is larger than available space then align left
                     if (getSize(selectedRect) + 2 * tabMargin >= endPos - getNear(nodeRect)) {
                         shiftPos = getNear(nodeRect) - selectedStart;
+                        // console.log("shiftPos1", shiftPos, getNear(nodeRect), selectedStart);
                     } else {
                         if (selectedEnd > endPos || selectedStart < getNear(nodeRect)) {
                             if (selectedStart < getNear(nodeRect)) {
                                 shiftPos = getNear(nodeRect) - selectedStart;
+                                // console.log("shiftPos2", shiftPos, getNear(nodeRect), selectedStart);
                             }
                             // use second if statement to prevent tab moving back then forwards if not enough space for single tab
                             if (selectedEnd + shiftPos > endPos) {
@@ -124,6 +129,7 @@ export const useTabOverflow = (
 
                 const extraSpace = Math.max(0, endPos - (getFar(lastChild.getTabRect()!) + tabMargin + shiftPos));
                 const newPosition = Math.min(0, position + shiftPos + extraSpace);
+                // console.log("newPosition", newPosition, position, shiftPos, extraSpace);
 
                 // find hidden tabs
                 const diff = newPosition - position;
@@ -135,12 +141,11 @@ export const useTabOverflow = (
                     }
                 }
 
-                if (hidden.length > 0) {
-                    tabsTruncated.current = true;
-                }
+                tabsTruncated.current = hidden.length > 0;
 
                 firstRender.current = false; // need to do a second render
                 setHiddenTabs(hidden);
+                // console.log(newPosition);
                 setPosition(newPosition);
             }
         } else {
@@ -148,7 +153,7 @@ export const useTabOverflow = (
         }
     };
 
-    const onMouseWheel = (event: React.WheelEvent<HTMLDivElement>) => {
+    const onMouseWheel = (event: React.WheelEvent<HTMLElement>) => {
         let delta = 0;
         if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
             delta = -event.deltaX;