@aptre/flex-layout 0.3.4 → 0.4.0

package/README.md

@@ -38,6 +38,19 @@ Features:
 *   component state is preserved when tabs are moved
 *	typescript type declarations
 
+## Demo
+
+To demo and test this library, clone this repo, then:
+
+```
+npm i -g yarn
+yarn
+yarn test:browser
+```
+
+Your browser will open to show + all the tests with vitest Browser Mode.
+
+
 ## Installation
 
 FlexLayout is in the npm repository. install using:

package/dist/Layout.e2e.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";

package/dist/Layout.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/OptimizedLayout.e2e.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./view/Layout";
+export * from "./view/OptimizedLayout";
 export * from "./model/Action";
 export * from "./model/Actions";
 export * from "./model/BorderNode";

package/dist/index.mjs

@@ -1316,6 +1316,14 @@ var TabNode = class _TabNode extends Node {
   }
 };
 
+// src/model/ICloseType.ts
+var ICloseType = /* @__PURE__ */ ((ICloseType2) => {
+  ICloseType2[ICloseType2["Visible"] = 1] = "Visible";
+  ICloseType2[ICloseType2["Always"] = 2] = "Always";
+  ICloseType2[ICloseType2["Selected"] = 3] = "Selected";
+  return ICloseType2;
+})(ICloseType || {});
+
 // src/view/Utils.tsx
 function isDesktop() {
   const desktop = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(hover: hover) and (pointer: fine)").matches;
@@ -1422,6 +1430,18 @@ function isSafari() {
   const userAgent = navigator.userAgent;
   return userAgent.includes("Safari") && !userAgent.includes("Chrome") && !userAgent.includes("Chromium");
 }
+function isTabClosable(node, selected) {
+  const closeType = node.getCloseType();
+  if (selected || closeType === 2 /* Always */) {
+    return true;
+  }
+  if (closeType === 1 /* Visible */) {
+    if (window.matchMedia && window.matchMedia("(hover: hover) and (pointer: fine)").matches) {
+      return true;
+    }
+  }
+  return false;
+}
 
 // src/model/Utils.ts
 function adjustSelectedIndex(parent, removedIndex) {
@@ -3537,6 +3557,7 @@ var Splitter = (props) => {
 function BorderTab(props) {
   const { layout, border, show } = props;
   const selfRef = React3.useRef(null);
+  const isFirstRender = React3.useRef(true);
   React3.useLayoutEffect(() => {
     const outerRect = layout.getBoundingClientRect(selfRef.current);
     const contentRect = Rect.getContentRect(selfRef.current).relativeTo(layout.getDomRect());
@@ -3544,9 +3565,12 @@ function BorderTab(props) {
       border.setOuterRect(outerRect);
       if (!border.getContentRect().equals(contentRect)) {
         border.setContentRect(contentRect);
-        layout.redrawInternal("border content rect");
+        if (!isFirstRender.current) {
+          layout.redrawInternal("border content rect");
+        }
       }
     }
+    isFirstRender.current = false;
   });
   let horizontal = true;
   const style2 = {};
@@ -3574,16 +3598,6 @@ import * as React8 from "react";
 
 // src/view/BorderButton.tsx
 import * as React4 from "react";
-
-// src/model/ICloseType.ts
-var ICloseType = /* @__PURE__ */ ((ICloseType2) => {
-  ICloseType2[ICloseType2["Visible"] = 1] = "Visible";
-  ICloseType2[ICloseType2["Always"] = 2] = "Always";
-  ICloseType2[ICloseType2["Selected"] = 3] = "Selected";
-  return ICloseType2;
-})(ICloseType || {});
-
-// src/view/BorderButton.tsx
 var BorderButton = (props) => {
   const { layout, node, selected, border, icons, path } = props;
   const selfRef = React4.useRef(null);
@@ -3617,20 +3631,8 @@ var BorderButton = (props) => {
       layout.setEditingTab(void 0);
     }
   };
-  const isClosable = () => {
-    const closeType = node.getCloseType();
-    if (selected || closeType === 2 /* Always */) {
-      return true;
-    }
-    if (closeType === 1 /* Visible */) {
-      if (window.matchMedia && window.matchMedia("(hover: hover) and (pointer: fine)").matches) {
-        return true;
-      }
-    }
-    return false;
-  };
   const onClose = (event) => {
-    if (isClosable()) {
+    if (isTabClosable(node, selected)) {
       layout.doAction(Actions.deleteTab(node.getId()));
     } else {
       onClick();
@@ -3834,12 +3836,12 @@ var useTabOverflow = (node, orientation, toolbarRef, stickyButtonsRef) => {
   React7.useLayoutEffect(() => {
     userControlledLeft.current = false;
   }, [node.getSelectedNode(), node.getRect().width, node.getRect().height]);
+  const nodeRect = node instanceof TabSetNode ? node.getRect() : node.getTabHeaderRect();
   React7.useLayoutEffect(() => {
-    const nodeRect = node instanceof TabSetNode ? node.getRect() : node.getTabHeaderRect();
     if (nodeRect.width > 0 && nodeRect.height > 0) {
       updateVisibleTabs();
     }
-  });
+  }, [nodeRect.width, nodeRect.height]);
   const instance = toolbarRef.current;
   React7.useEffect(() => {
     if (!instance) {
@@ -3879,15 +3881,15 @@ var useTabOverflow = (node, orientation, toolbarRef, stickyButtonsRef) => {
     if (firstRender.current === true) {
       tabsTruncated.current = false;
     }
-    const nodeRect = node instanceof TabSetNode ? node.getRect() : node.getTabHeaderRect();
+    const nodeRect2 = node instanceof TabSetNode ? node.getRect() : node.getTabHeaderRect();
     const lastChild = node.getChildren()[node.getChildren().length - 1];
     const stickyButtonsSize = stickyButtonsRef.current === null ? 0 : getSize(stickyButtonsRef.current.getBoundingClientRect());
-    if (firstRender.current === true || lastHiddenCount.current === 0 && hiddenTabs.length !== 0 || nodeRect.width !== lastRect.current.width || // incase rect changed between first render and second
-    nodeRect.height !== lastRect.current.height) {
+    if (firstRender.current === true || lastHiddenCount.current === 0 && hiddenTabs.length !== 0 || nodeRect2.width !== lastRect.current.width || // incase rect changed between first render and second
+    nodeRect2.height !== lastRect.current.height) {
       lastHiddenCount.current = hiddenTabs.length;
-      lastRect.current = nodeRect;
+      lastRect.current = nodeRect2;
       const enabled = node instanceof TabSetNode ? node.isEnableTabStrip() === true : true;
-      let endPos = getFar(nodeRect) - stickyButtonsSize;
+      let endPos = getFar(nodeRect2) - stickyButtonsSize;
       if (toolbarRef.current !== null) {
         endPos -= getSize(toolbarRef.current.getBoundingClientRect());
       }
@@ -3901,12 +3903,12 @@ var useTabOverflow = (node, orientation, toolbarRef, stickyButtonsRef) => {
           const selectedRect = selectedTab.getTabRect();
           const selectedStart = getNear(selectedRect) - tabMargin;
           const selectedEnd = getFar(selectedRect) + tabMargin;
-          if (getSize(selectedRect) + 2 * tabMargin >= endPos - getNear(nodeRect)) {
-            shiftPos = getNear(nodeRect) - selectedStart;
+          if (getSize(selectedRect) + 2 * tabMargin >= endPos - getNear(nodeRect2)) {
+            shiftPos = getNear(nodeRect2) - selectedStart;
           } else {
-            if (selectedEnd > endPos || selectedStart < getNear(nodeRect)) {
-              if (selectedStart < getNear(nodeRect)) {
-                shiftPos = getNear(nodeRect) - selectedStart;
+            if (selectedEnd > endPos || selectedStart < getNear(nodeRect2)) {
+              if (selectedStart < getNear(nodeRect2)) {
+                shiftPos = getNear(nodeRect2) - selectedStart;
               }
               if (selectedEnd + shiftPos > endPos) {
                 shiftPos = endPos - selectedEnd;
@@ -3920,7 +3922,7 @@ var useTabOverflow = (node, orientation, toolbarRef, stickyButtonsRef) => {
         const hidden = [];
         for (let i = 0; i < node.getChildren().length; i++) {
           const child = node.getChildren()[i];
-          if (getNear(child.getTabRect()) + diff < getNear(nodeRect) || getFar(child.getTabRect()) + diff > endPos) {
+          if (getNear(child.getTabRect()) + diff < getNear(nodeRect2) || getFar(child.getTabRect()) + diff > endPos) {
             hidden.push({ node: child, index: i });
           }
         }
@@ -4371,21 +4373,9 @@ var TabButton = (props) => {
       layout.setEditingTab(void 0);
     }
   };
-  const isClosable = () => {
-    const closeType = node.getCloseType();
-    if (selected || closeType === 2 /* Always */) {
-      return true;
-    }
-    if (closeType === 1 /* Visible */) {
-      if (window.matchMedia && window.matchMedia("(hover: hover) and (pointer: fine)").matches) {
-        return true;
-      }
-    }
-    return false;
-  };
   const onClose = (event) => {
     event.preventDefault();
-    if (isClosable()) {
+    if (isTabClosable(node, selected)) {
       layout.doAction(Actions.deleteTab(node.getId()));
     } else {
       onClick();
@@ -4502,6 +4492,7 @@ var TabSet = (props) => {
   const overflowbuttonRef = React15.useRef(null);
   const stickyButtonsRef = React15.useRef(null);
   const icons = layout.getIcons();
+  const isFirstRender = React15.useRef(true);
   React15.useEffect(() => {
     node.setRect(layout.getBoundingClientRect(selfRef.current));
     if (tabStripRef.current) {
@@ -4510,8 +4501,11 @@ var TabSet = (props) => {
     const newContentRect = Rect.getContentRect(contentRef.current).relativeTo(layout.getDomRect());
     if (!node.getContentRect().equals(newContentRect)) {
       node.setContentRect(newContentRect);
-      layout.redrawInternal("tabset content rect " + newContentRect);
+      if (!isFirstRender.current) {
+        layout.redrawInternal("tabset content rect " + newContentRect);
+      }
     }
+    isFirstRender.current = false;
   });
   const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated } = useTabOverflow(node, Orientation.HORZ, buttonBarRef, stickyButtonsRef);
   const onOverflowClick = (event) => {
@@ -4924,7 +4918,7 @@ var Tab = (props) => {
         firstSelect.current = false;
       }
     }
-  });
+  }, [selected]);
   const onPointerDown = () => {
     const parent = node.getParent();
     if (parent instanceof TabSetNode) {
@@ -5764,6 +5758,7 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
     this.showOverlay(false);
     this.dragEnterCount = 0;
     this.dragging = false;
+    this.props.onDragStateChange?.(false);
     if (this.outlineDiv) {
       this.selfRef.current.removeChild(this.outlineDiv);
       this.outlineDiv = void 0;
@@ -5795,6 +5790,7 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
       rootdiv.appendChild(this.outlineDiv);
       this.dragging = true;
       this.showOverlay(true);
+      this.props.onDragStateChange?.(true);
       if (!this.isDraggingOverWindow && this.props.model.getMaximizedTabset(this.windowId) === void 0) {
         this.setState({ showEdges: this.props.model.isEnableEdgeDock() });
       }
@@ -5880,6 +5876,156 @@ var DragState = class {
   }
 };
 
+// src/view/OptimizedLayout.tsx
+import * as React20 from "react";
+import { useCallback, useEffect as useEffect6, useMemo, useRef as useRef12, useState as useState4 } from "react";
+function TabRef({ node, onRectChange, onVisibilityChange }) {
+  useEffect6(() => {
+    const handleResize = (params) => {
+      onRectChange(node.getId(), params.rect);
+    };
+    const handleVisibility = (params) => {
+      onVisibilityChange(node.getId(), params.visible);
+    };
+    node.setEventListener("resize", handleResize);
+    node.setEventListener("visibility", handleVisibility);
+    const parent = node.getParent();
+    if (parent) {
+      const contentRect = parent.getContentRect();
+      if (contentRect && contentRect.width > 0 && contentRect.height > 0) {
+        onRectChange(node.getId(), contentRect);
+      }
+    }
+    onVisibilityChange(node.getId(), node.isSelected());
+    return () => {
+      node.removeEventListener("resize");
+      node.removeEventListener("visibility");
+    };
+  }, [node, onRectChange, onVisibilityChange]);
+  return null;
+}
+function TabContainer({
+  tabs,
+  renderTab,
+  isDragging,
+  classNameMapper
+}) {
+  const getClassName = useCallback(
+    (defaultClassName) => {
+      return classNameMapper ? classNameMapper(defaultClassName) : defaultClassName;
+    },
+    [classNameMapper]
+  );
+  return /* @__PURE__ */ React20.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        // CRITICAL: Disable pointer events during drag to prevent drag overlay from disappearing
+        // When tabs are rendered outside FlexLayout's DOM, dragging over them triggers dragleave
+        // on the Layout element, causing dragEnterCount to drop to 0 and clearing the drag UI.
+        pointerEvents: isDragging ? "none" : "auto",
+        // Ensure tab container doesn't block FlexLayout's tab bar interactions when not dragging
+        zIndex: 0
+      },
+      "data-layout-path": "/tab-container"
+    },
+    Array.from(tabs.entries()).map(([nodeId, tabInfo]) => {
+      const { node, rect, visible } = tabInfo;
+      const contentClassName = node.getContentClassName();
+      return /* @__PURE__ */ React20.createElement(
+        "div",
+        {
+          key: nodeId,
+          role: "tabpanel",
+          "data-tab-id": nodeId,
+          className: getClassName("flexlayout__tab") + (contentClassName ? " " + contentClassName : ""),
+          style: {
+            position: "absolute",
+            display: visible ? "flex" : "none",
+            left: rect.x,
+            top: rect.y,
+            width: rect.width,
+            height: rect.height,
+            overflow: "auto"
+          }
+        },
+        renderTab(node)
+      );
+    })
+  );
+}
+function OptimizedLayout({ model, renderTab, classNameMapper, onDragStateChange, ...layoutProps }) {
+  const [isDragging, setIsDragging] = useState4(false);
+  const [tabs, setTabs] = useState4(() => /* @__PURE__ */ new Map());
+  const tabNodesRef = useRef12(/* @__PURE__ */ new Map());
+  useEffect6(() => {
+    const newTabNodes = /* @__PURE__ */ new Map();
+    model.visitNodes((node) => {
+      if (node instanceof TabNode) {
+        newTabNodes.set(node.getId(), node);
+      }
+    });
+    tabNodesRef.current = newTabNodes;
+    setTabs((prevTabs) => {
+      const nextTabs = /* @__PURE__ */ new Map();
+      for (const [nodeId, node] of newTabNodes) {
+        const existing = prevTabs.get(nodeId);
+        if (existing) {
+          nextTabs.set(nodeId, { ...existing, node });
+        } else {
+          const parent = node.getParent();
+          const contentRect = parent?.getContentRect() ?? Rect.empty();
+          nextTabs.set(nodeId, {
+            node,
+            rect: contentRect,
+            visible: node.isSelected()
+          });
+        }
+      }
+      return nextTabs;
+    });
+  }, [model]);
+  const handleRectChange = useCallback((nodeId, rect) => {
+    setTabs((prevTabs) => {
+      const existing = prevTabs.get(nodeId);
+      if (!existing || existing.rect.equals(rect)) {
+        return prevTabs;
+      }
+      const nextTabs = new Map(prevTabs);
+      nextTabs.set(nodeId, { ...existing, rect });
+      return nextTabs;
+    });
+  }, []);
+  const handleVisibilityChange = useCallback((nodeId, visible) => {
+    setTabs((prevTabs) => {
+      const existing = prevTabs.get(nodeId);
+      if (!existing || existing.visible === visible) {
+        return prevTabs;
+      }
+      const nextTabs = new Map(prevTabs);
+      nextTabs.set(nodeId, { ...existing, visible });
+      return nextTabs;
+    });
+  }, []);
+  const handleDragStateChange = useCallback(
+    (dragging) => {
+      setIsDragging(dragging);
+      onDragStateChange?.(dragging);
+    },
+    [onDragStateChange]
+  );
+  const factory = useCallback(
+    (node) => {
+      return /* @__PURE__ */ React20.createElement(TabRef, { key: node.getId(), node, onRectChange: handleRectChange, onVisibilityChange: handleVisibilityChange });
+    },
+    [handleRectChange, handleVisibilityChange]
+  );
+  const tabsForContainer = useMemo(() => tabs, [tabs]);
+  return /* @__PURE__ */ React20.createElement("div", { style: { position: "relative", width: "100%", height: "100%" } }, /* @__PURE__ */ React20.createElement(Layout, { model, factory, classNameMapper, onDragStateChange: handleDragStateChange, ...layoutProps }), /* @__PURE__ */ React20.createElement(TabContainer, { tabs: tabsForContainer, renderTab, isDragging, classNameMapper }));
+}
+
 // src/model/walk.ts
 function findJsonNodeById(model, id) {
   let result;
@@ -5939,6 +6085,7 @@ export {
   LayoutWindow,
   Model,
   Node,
+  OptimizedLayout,
   Orientation,
   Rect,
   RowNode,

package/dist/model/IJsonModel.d.ts

@@ -424,7 +424,7 @@ export interface IRowAttributes {
      */
     id?: string;
     /** The type of this node (always "row") */
-    type?: "row";
+    type: "row";
     /**
       relative weight for sizing of this row in parent row
 
@@ -560,7 +560,7 @@ export interface ITabSetAttributes {
      */
     tabLocation?: ITabLocation;
     /** The type of this node (always "tabset") */
-    type?: "tabset";
+    type: "tabset";
     /**
       relative weight for sizing of this tabset in parent row
 
@@ -721,7 +721,7 @@ export interface ITabAttributes {
      */
     tabsetClassName?: string;
     /** The type of this node (always "tab") */
-    type?: "tab";
+    type: "tab";
 }
 export interface IBorderAttributes {
     /**
@@ -791,5 +791,5 @@ export interface IBorderAttributes {
      */
     size?: number;
     /** The type of this node (always "border") */
-    type?: "border";
+    type: "border";
 }

package/dist/test/setup.d.ts

@@ -0,0 +1,8 @@
+declare const localStorageMock: {
+    getItem: (key: string) => string;
+    setItem: (key: string, value: string) => void;
+    removeItem: (key: string) => void;
+    clear: () => void;
+    readonly length: number;
+    key: (index: number) => string;
+};

package/dist/test/unit-setup.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";

package/dist/view/Layout.d.ts

@@ -49,6 +49,8 @@ export interface ILayoutProps {
     onTabSetPlaceHolder?: TabSetPlaceHolderCallback;
     /** Name given to popout windows, defaults to 'Popout Window' */
     popoutWindowName?: string;
+    /** callback for when drag state changes, useful for OptimizedLayout to set pointer-events: none on external tab container during drag */
+    onDragStateChange?: (isDragging: boolean) => void;
 }
 /**
  * A React component that hosts a multi-tabbed layout

package/dist/view/OptimizedLayout.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { TabNode } from "../model/TabNode";
+import { ILayoutProps } from "./Layout";
+/**
+ * Props for OptimizedLayout - similar to Layout but with `renderTab` instead of `factory`
+ */
+export interface IOptimizedLayoutProps extends Omit<ILayoutProps, "factory"> {
+    /** Function to render tab content - receives TabNode, returns React element */
+    renderTab: (node: TabNode) => React.ReactNode;
+}
+/**
+ * OptimizedLayout - A wrapper around FlexLayout that renders tab content outside of
+ * FlexLayout's DOM structure for better performance.
+ *
+ * Key benefits:
+ * 1. Tab components are NOT re-rendered when Model changes
+ * 2. Tab state (scroll position, form inputs, etc.) is preserved across layout mutations
+ * 3. Only CSS properties change when layout changes - no React re-renders
+ *
+ * The component works by:
+ * 1. Rendering FlexLayout with TabRef placeholders instead of actual tab content
+ * 2. TabRef components listen to resize/visibility events from TabNodes
+ * 3. A sibling TabContainer renders the actual tab content with absolute positioning
+ * 4. During drag operations, TabContainer uses pointer-events: none to prevent
+ *    interfering with FlexLayout's drag overlay
+ *
+ * @see https://github.com/caplin/FlexLayout/issues/456
+ */
+export declare function OptimizedLayout({ model, renderTab, classNameMapper, onDragStateChange, ...layoutProps }: IOptimizedLayoutProps): React.JSX.Element;