flexlayout-react 0.8.9 → 0.8.11

package/playwright.config.ts

@@ -0,0 +1,79 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests-playwright',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

package/src/AttributeDefinitions.ts

@@ -62,7 +62,7 @@ export class AttributeDefinitions {
 
     update(jsonObj: any, obj: any) {
         for (const attr of this.attributes) {
-            if (jsonObj.hasOwnProperty(attr.name)) {
+            if (Object.prototype.hasOwnProperty.call(jsonObj, attr.name)) {
                 const fromValue = jsonObj[attr.name];
                 if (fromValue === undefined) {
                     delete obj[attr.name];
@@ -113,7 +113,7 @@ export class AttributeDefinitions {
                 type = attr.type;
             }
 
-            let defValue = JSON.stringify(defaultValue);
+            const defValue = JSON.stringify(defaultValue);
 
             const required = attr.required ? "" : "?";
 

package/src/Rect.ts

@@ -34,7 +34,7 @@ export class Rect {
     }
 
     static getBoundingClientRect(element: Element) {
-        let { x, y, width, height } = element.getBoundingClientRect();
+        const { x, y, width, height } = element.getBoundingClientRect();
         return new Rect(x, y, width, height);
     }
 

package/src/view/BorderButton.tsx

@@ -109,7 +109,7 @@ export const BorderButton = (props: IBorderButtonProps) => {
         if (event.code === 'Escape') {
             // esc
             layout.setEditingTab(undefined);
-        } else if (event.code === 'Enter') {
+        } else if (event.code === 'Enter' || event.code === 'NumpadEnter') {
             // enter
             layout.setEditingTab(undefined);
             layout.doAction(Actions.renameTab(node.getId(), (event.target as HTMLInputElement).value));

package/src/view/BorderTab.tsx

@@ -3,7 +3,7 @@ import { Orientation } from "../Orientation";
 import { LayoutInternal } from "./Layout";
 import { BorderNode } from "../model/BorderNode";
 import { Rect } from "../Rect";
-import { Splitter } from "./Splitter";
+import { Splitter, splitterDragging } from "./Splitter";
 import { DockLocation } from "../DockLocation";
 import { CLASSES } from "../Types";
 
@@ -17,15 +17,26 @@ export interface IBorderTabProps {
 export function BorderTab(props: IBorderTabProps) {
     const { layout, border, show } = props;
     const selfRef = React.useRef<HTMLDivElement | null>(null);
+    const timer = React.useRef<NodeJS.Timeout | undefined>(undefined);
 
     React.useLayoutEffect(() => {
         const outerRect = layout.getBoundingClientRect(selfRef.current!);
         const contentRect = Rect.getContentRect(selfRef.current!).relativeTo(layout.getDomRect()!);
         if (outerRect.width > 0) {
             border.setOuterRect(outerRect);
-            if (!border.getContentRect().equals(contentRect)) {
+            if (!border.getContentRect().equals(contentRect) && !isNaN(contentRect.x)) {
                 border.setContentRect(contentRect);
-                layout.redrawInternal("border content rect");
+                if (splitterDragging) { // next movement will draw tabs again, only redraw after pause/end
+                    if (timer.current) {
+                        clearTimeout(timer.current);
+                    }
+                    timer.current = setTimeout(() => {
+                        layout.redrawInternal("border content rect " + contentRect);
+                        timer.current = undefined;
+                    }, 50);
+                } else {
+                    layout.redrawInternal("border content rect " + contentRect);
+                }
             }
         }
 
@@ -45,7 +56,7 @@ export function BorderTab(props: IBorderTabProps) {
         horizontal = false;
     }
 
-    style.display = show ? "flex":"none";
+    style.display = show ? "flex" : "none";
 
     const className = layout.getClassName(CLASSES.FLEXLAYOUT__BORDER_TAB_CONTENTS);
 
@@ -54,14 +65,14 @@ export function BorderTab(props: IBorderTabProps) {
             <>
                 <div ref={selfRef} style={style} className={className}>
                 </div>
-                {show && <Splitter layout={layout} node={border} index={0}  horizontal={horizontal} />}
+                {show && <Splitter layout={layout} node={border} index={0} horizontal={horizontal} />}
             </>
         );
     } else {
         return (
             <>
-                {show && <Splitter layout={layout} node={border} index={0}  horizontal={horizontal} />}
-                <div ref={selfRef} style={style}  className={className}>
+                {show && <Splitter layout={layout} node={border} index={0} horizontal={horizontal} />}
+                <div ref={selfRef} style={style} className={className}>
                 </div>
             </>
         );

package/src/view/Icons.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 const style = { width: "1em", height: "1em", display: "flex", alignItems: "center" };
 
 export const CloseIcon = () => {

package/src/view/Layout.tsx

@@ -197,7 +197,8 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
     private findBorderBarSizeRef: React.RefObject<HTMLDivElement | null>;
     private mainRef: React.RefObject<HTMLDivElement | null>;
     private previousModel?: Model;
-    private orderedIds: string[];
+    private orderedTabIds: string[];
+    private orderedTabMoveableIds: string[];
     private moveableElementMap = new Map<string, HTMLElement>();
     private dropInfo: DropInfo | undefined;
     private outlineDiv?: HTMLElement;
@@ -222,7 +223,8 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
     constructor(props: ILayoutInternalProps) {
         super(props);
 
-        this.orderedIds = [];
+        this.orderedTabIds = [];
+        this.orderedTabMoveableIds = [];
         this.selfRef = React.createRef<HTMLDivElement>();
         this.moveablesRef = React.createRef<HTMLDivElement>();
         this.mainRef = React.createRef<HTMLDivElement>();
@@ -356,17 +358,18 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
         const outer = this.renderBorders(inner);
 
         const tabs = this.renderTabs();
-        const reorderedTabs = this.reorderComponents(tabs, this.orderedIds);
+        const reorderedTabs = this.reorderComponents(tabs, this.orderedTabIds);
 
         let floatingWindows = null;
-        let tabMoveables = null;
+        let reorderedTabMoveables = null;
         let tabStamps = null;
         let metricElements = null;
 
         if (this.isMainWindow) {
             floatingWindows = this.renderWindows();
             metricElements = this.renderMetricsElements();
-            tabMoveables = this.renderTabMoveables();
+            const tabMoveables = this.renderTabMoveables();
+            reorderedTabMoveables = this.reorderComponents(tabMoveables, this.orderedTabMoveableIds);
             tabStamps = <div key="__tabStamps__" className={this.getClassName(CLASSES.FLEXLAYOUT__LAYOUT_TAB_STAMPS)}>
                 {this.renderTabStamps()}
             </div>;
@@ -386,7 +389,7 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
                 <Overlay key="__overlay__" layout={this} show={this.state.showOverlay} />
                 {outer}
                 {reorderedTabs}
-                {tabMoveables}
+                {reorderedTabMoveables}
                 {tabStamps}
                 {this.state.portal}
                 {floatingWindows}
@@ -553,7 +556,8 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
     }
 
     renderTabMoveables() {
-        const tabMoveables: React.ReactNode[] = [];
+        // const tabMoveables: React.ReactNode[] = [];
+        const tabMoveables = new Map<string, React.ReactNode>();
 
         this.props.model.visitNodes((node) => {
             if (node instanceof TabNode) {
@@ -570,7 +574,7 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
                 if (renderTab) {
                     //  console.log("rendertab", child.getName(), this.props.renderRevision);
                     const key = child.getId() + (child.isEnableWindowReMount() ? child.getWindowId() : "");
-                    tabMoveables.push(createPortal(
+                    tabMoveables.set(node.getId(), createPortal(
                         <SizeTracker rect={rect} selected={child.isSelected()} forceRevision={this.state.forceRevision} tabsRevision={this.props.renderRevision} key={key}>
                             <ErrorBoundary message={this.i18nName(I18nLabel.Error_rendering_component)}>
                                 {this.props.factory(child)}
@@ -1228,7 +1232,7 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
     // *************************** End Drag Drop *************************************
 }
 
-export const FlexLayoutVersion = "0.8.9";
+export const FlexLayoutVersion = "0.8.11";
 
 export type DragRectRenderCallback = (
     content: React.ReactNode | undefined,
@@ -1327,4 +1331,4 @@ class DragState {
         this.dragJson = dragJson;
         this.fnNewNodeDropped = fnNewNodeDropped;
     }
-}
+}

package/src/view/Overlay.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { LayoutInternal } from "./Layout";
 import { CLASSES } from "../Types";
 

package/src/view/Splitter.tsx

@@ -16,6 +16,9 @@ export interface ISplitterProps {
     horizontal: boolean;
 }
 
+/** @internal */
+export let splitterDragging:boolean = false; // used in tabset & borderTab
+
 /** @internal */
 export const Splitter = (props: ISplitterProps) => {
     const { layout, node, index, horizontal } = props;
@@ -94,6 +97,7 @@ export const Splitter = (props: ISplitterProps) => {
         }
 
         setDragging(true);
+        splitterDragging = true;
     };
 
     const onDragCancel = () => {
@@ -103,6 +107,7 @@ export const Splitter = (props: ISplitterProps) => {
         }
         outlineDiv.current = undefined;
         setDragging(false);
+        splitterDragging = false;
     };
 
     const onDragMove = (x: number, y: number) => {
@@ -136,6 +141,7 @@ export const Splitter = (props: ISplitterProps) => {
         }
         enablePointerOnIFrames(true, layout.getCurrentDocument()!);
         setDragging(false);
+        splitterDragging = false;
     };
 
     const updateLayout = (realtime: boolean) => {

package/src/view/TabButton.tsx

@@ -109,7 +109,7 @@ export const TabButton = (props: ITabButtonProps) => {
         if (event.code === 'Escape') {
             // esc
             layout.setEditingTab(undefined);
-        } else if (event.code === 'Enter') {
+        } else if (event.code === 'Enter' || event.code === 'NumpadEnter') {
             // enter
             layout.setEditingTab(undefined);
             layout.doAction(Actions.renameTab(node.getId(), (event.target as HTMLInputElement).value));

package/src/view/TabButtonStamp.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { TabNode } from "../model/TabNode";
 import { LayoutInternal } from "./Layout";
 import { CLASSES } from "../Types";

package/src/view/TabSet.tsx

@@ -12,6 +12,7 @@ import { CLASSES } from "../Types";
 import { isAuxMouseEvent } from "./Utils";
 import { createPortal } from "react-dom";
 import { Rect } from "../Rect";
+import { splitterDragging } from "./Splitter";
 
 /** @internal */
 export interface ITabSetProps {
@@ -30,11 +31,11 @@ export const TabSet = (props: ITabSetProps) => {
     const buttonBarRef = React.useRef<HTMLDivElement | null>(null);
     const overflowbuttonRef = React.useRef<HTMLButtonElement | null>(null);
     const stickyButtonsRef = React.useRef<HTMLDivElement | null>(null);
+    const timer = React.useRef<NodeJS.Timeout | undefined>(undefined);
 
     const icons = layout.getIcons();
 
-    // must use useEffect (rather than useLayoutEffect) otherwise contentrect not set correctly (has height 0 when changing theme in demo)
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
         node.setRect(layout.getBoundingClientRect(selfRef.current!));
 
         if (tabStripRef.current) {
@@ -42,11 +43,19 @@ export const TabSet = (props: ITabSetProps) => {
         }
 
         const newContentRect = Rect.getContentRect(contentRef.current!).relativeTo(layout.getDomRect()!);
-        if (!node.getContentRect().equals(newContentRect)) {
+        if (!node.getContentRect().equals(newContentRect) && !isNaN(newContentRect.x)) {
             node.setContentRect(newContentRect);
-            setTimeout(() => { //prevent Maximum update depth exceeded error
-                layout.redrawInternal("tabset content rect " + newContentRect);
-            }, 0);
+            if (splitterDragging) { // next movement will draw tabs again, only redraw after pause/end
+                if (timer.current) {
+                    clearTimeout(timer.current);
+                }
+                timer.current = setTimeout(() => {
+                    layout.redrawInternal("border content rect " + newContentRect);
+                    timer.current = undefined;
+                }, 50);
+            } else {
+                layout.redrawInternal("border content rect " + newContentRect);
+            }
         }
     });
 
@@ -211,7 +220,7 @@ export const TabSet = (props: ITabSetProps) => {
             } else {
                 overflowContent = (<>
                     {icons.more}
-                    <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT)}>{hiddenTabs.length>0?hiddenTabs.length: ""}</div>
+                    <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT)}>{hiddenTabs.length > 0 ? hiddenTabs.length : ""}</div>
                 </>);
             }
             buttons.splice(Math.min(renderState.overflowPosition, buttons.length), 0,