flexlayout-react 0.8.10 → 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/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

@@ -1232,7 +1232,7 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
     // *************************** End Drag Drop *************************************
 }
 
-export const FlexLayoutVersion = "0.8.10";
+export const FlexLayoutVersion = "0.8.11";
 
 export type DragRectRenderCallback = (
     content: React.ReactNode | undefined,
@@ -1331,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/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,

package/tests-playwright/helpers.ts

@@ -0,0 +1,124 @@
+    import { test, expect, Page, Locator } from '@playwright/test';
+
+    export const findAllTabSets = (page: Page) => {
+        return page.locator('.flexlayout__tabset');
+    };
+    
+    export const findPath = (page: Page, path: string) => {
+        return page.locator(`[data-layout-path="${path}"]`);
+    };
+    
+    export const findTabButton = (page: Page, path: string, index: number) => {
+        return findPath(page, `${path}/tb${index}`);
+    };
+    
+    export const checkTab = async (page: Page, path: string, index: number, selected: boolean, text: string) => {
+        const tabButton = findTabButton(page, path, index);
+        const tabContent = findPath(page, `${path}/t${index}`);
+    
+        await expect(tabButton).toBeVisible();
+        await expect(tabButton).toHaveClass(new RegExp(selected ? 'flexlayout__tab_button--selected' : 'flexlayout__tab_button--unselected'));
+        await expect(tabButton.locator('.flexlayout__tab_button_content')).toContainText(text);
+    
+        await expect(tabContent).toBeVisible({ visible: selected });
+        await expect(tabContent).toContainText(text);
+    };
+    
+    export const checkBorderTab = async (page: Page, path: string, index: number, selected: boolean, text: string) => {
+        const tabButton = findTabButton(page, path, index);
+        const tabContent = findPath(page, `${path}/t${index}`);
+    
+        await expect(tabButton).toBeVisible();
+        await expect(tabButton).toHaveClass(new RegExp(selected ? 'flexlayout__border_button--selected' : 'flexlayout__border_button--unselected'));
+        await expect(tabButton.locator('.flexlayout__border_button_content')).toContainText(text);
+    
+        if (selected) {
+        await expect(tabContent).toBeVisible();
+        await expect(tabContent).toContainText(text);
+        }
+    };
+    
+    export enum Location {
+        CENTER,
+        TOP,
+        BOTTOM,
+        LEFT,
+        RIGHT,
+        LEFTEDGE
+    }
+    
+    function getLocation(rect: { x: number; y: number; width: number; height: number }, loc: Location) {
+        switch (loc) {
+        case Location.CENTER:
+            return { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
+        case Location.TOP:
+            return { x: rect.x + rect.width / 2, y: rect.y + 5 };
+        case Location.BOTTOM:
+            return { x: rect.x + rect.width / 2, y: rect.y + rect.height - 5 };
+        case Location.LEFT:
+            return { x: rect.x + 5, y: rect.y + rect.height / 2 };
+        case Location.RIGHT:
+            return { x: rect.x + rect.width - 5, y: rect.y + rect.height / 2 };
+        case Location.LEFTEDGE:
+            return { x: rect.x , y: rect.y + rect.height / 2 };
+        default:
+            throw new Error(`Unknown location: ${loc}`);
+        }
+    }
+    
+    export async function drag(page: Page, from: Locator, to: Locator, loc: Location) {
+        const fr = await from.boundingBox();
+        const tr = await to.boundingBox();
+    
+        if (!fr || !tr) throw new Error('Could not get bounding boxes');
+    
+        const cf = getLocation(fr, Location.CENTER);
+        const ct = getLocation(tr, loc);
+    
+        await page.mouse.move(cf.x, cf.y);
+        await page.mouse.down();
+        await page.mouse.move(ct.x, ct.y, { steps: 10 });
+        await page.mouse.up();
+    }
+    
+    export async function dragToEdge(page: Page, from: Locator, edgeIndex: number) {
+    
+    
+        const fr = await from.boundingBox();
+        if (!fr) throw new Error('Could not get bounding box for source');
+    
+        const cf = { x: fr.x + fr.width / 2, y: fr.y + fr.height / 2 };
+    
+        await page.mouse.move(cf.x, cf.y);
+        await page.mouse.down();
+        await page.mouse.move(cf.x + 10, cf.y + 10); // start move to make edges show
+        const edgeRects = page.locator('.flexlayout__edge_rect');
+        const edge = edgeRects.nth(edgeIndex);
+        const tr = await edge.boundingBox();
+        if (!tr) throw new Error('Could not get bounding box for edge');
+    
+        const ct = { x: tr.x + tr.width / 2, y: tr.y + tr.height / 2 };
+    
+        // await page.mouse.move((cf.x + ct.x) / 2, (cf.y + ct.y) / 2);
+        await page.mouse.move(ct.x, ct.y, { steps: 10 });
+        await page.mouse.up();
+    }
+    
+    export async function dragSplitter(page: Page, from: Locator, upDown: boolean, distance: number) {
+        const fr = await from.boundingBox();
+        if (!fr) throw new Error('Could not get bounding box for splitter');
+    
+        const cf = { x: fr.x + fr.width / 2, y: fr.y + fr.height / 2 };
+        const ct = { x: cf.x + (upDown ? 0 : distance), y: cf.y + (upDown ? distance : 0) };
+    
+        await page.mouse.move(cf.x, cf.y);
+        await page.mouse.down();
+        // await page.mouse.move(cf.x + 10, cf.y + 10);
+        // await page.mouse.move((cf.x + ct.x) / 2, (cf.y + ct.y) / 2);
+        await page.mouse.move(ct.x, ct.y, { steps: 10 });
+        await page.mouse.up();
+    }
+    
+    
+    
+