flexlayout-react 0.7.15 → 0.8.0

package/lib/view/Utils.js

@@ -1,69 +1,127 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isAuxMouseEvent = exports.hideElement = exports.getRenderStateEx = void 0;
-const React = require("react");
-/** @internal */
-function getRenderStateEx(layout, node, iconFactory, titleFactory, iconAngle) {
-    let leadingContent = iconFactory ? iconFactory(node) : undefined;
-    let titleContent = node.getName();
-    let name = node.getName();
-    if (iconAngle === undefined) {
-        iconAngle = 0;
-    }
-    function isTitleObject(obj) {
-        return obj.titleContent !== undefined;
-    }
-    if (titleFactory !== undefined) {
-        const titleObj = titleFactory(node);
-        if (titleObj !== undefined) {
-            if (typeof titleObj === "string") {
-                titleContent = titleObj;
-                name = titleObj;
-            }
-            else if (isTitleObject(titleObj)) {
-                titleContent = titleObj.titleContent;
-                name = titleObj.name;
-            }
-            else {
-                titleContent = titleObj;
-            }
-        }
-    }
-    if (leadingContent === undefined && node.getIcon() !== undefined) {
-        if (iconAngle !== 0) {
-            leadingContent = React.createElement("img", { style: { width: "1em", height: "1em", transform: "rotate(" + iconAngle + "deg)" }, src: node.getIcon(), alt: "leadingContent" });
-        }
-        else {
-            leadingContent = React.createElement("img", { style: { width: "1em", height: "1em" }, src: node.getIcon(), alt: "leadingContent" });
-        }
-    }
-    let buttons = [];
-    // allow customization of leading contents (icon) and contents
-    const renderState = { leading: leadingContent, content: titleContent, name, buttons };
-    layout.customizeTab(node, renderState);
-    node._setRenderedName(renderState.name);
-    return renderState;
-}
-exports.getRenderStateEx = getRenderStateEx;
-/** @internal */
-function hideElement(style, useVisibility) {
-    if (useVisibility) {
-        style.visibility = "hidden";
-    }
-    else {
-        style.display = "none";
-    }
-}
-exports.hideElement = hideElement;
-/** @internal */
-function isAuxMouseEvent(event) {
-    let auxEvent = false;
-    if (event.nativeEvent instanceof MouseEvent) {
-        if (event.nativeEvent.button !== 0 || event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) {
-            auxEvent = true;
-        }
-    }
-    return auxEvent;
-}
-exports.isAuxMouseEvent = isAuxMouseEvent;
+import * as React from "react";
+import { TabNode } from "../model/TabNode";
+import { TabSetNode } from "../model/TabSetNode";
+/** @internal */
+export function isDesktop() {
+    const desktop = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(hover: hover) and (pointer: fine)").matches;
+    return desktop;
+}
+/** @internal */
+export function getRenderStateEx(layout, node, iconAngle) {
+    let leadingContent = undefined;
+    let titleContent = node.getName();
+    let name = node.getName();
+    if (iconAngle === undefined) {
+        iconAngle = 0;
+    }
+    if (leadingContent === undefined && node.getIcon() !== undefined) {
+        if (iconAngle !== 0) {
+            leadingContent = React.createElement("img", { style: { width: "1em", height: "1em", transform: "rotate(" + iconAngle + "deg)" }, src: node.getIcon(), alt: "leadingContent" });
+        }
+        else {
+            leadingContent = React.createElement("img", { style: { width: "1em", height: "1em" }, src: node.getIcon(), alt: "leadingContent" });
+        }
+    }
+    let buttons = [];
+    // allow customization of leading contents (icon) and contents
+    const renderState = { leading: leadingContent, content: titleContent, name, buttons };
+    layout.customizeTab(node, renderState);
+    node.setRenderedName(renderState.name);
+    return renderState;
+}
+/** @internal */
+export function isAuxMouseEvent(event) {
+    let auxEvent = false;
+    if (event.nativeEvent instanceof MouseEvent) {
+        if (event.nativeEvent.button !== 0 || event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) {
+            auxEvent = true;
+        }
+    }
+    return auxEvent;
+}
+export function enablePointerOnIFrames(enable, currentDocument) {
+    const iframes = [
+        ...getElementsByTagName('iframe', currentDocument),
+        ...getElementsByTagName('webview', currentDocument),
+    ];
+    for (const iframe of iframes) {
+        iframe.style.pointerEvents = enable ? 'auto' : 'none';
+    }
+}
+;
+export function getElementsByTagName(tag, currentDocument) {
+    return [...currentDocument.getElementsByTagName(tag)];
+}
+export function startDrag(doc, event, drag, dragEnd, dragCancel) {
+    event.preventDefault();
+    const pointerMove = (ev) => {
+        ev.preventDefault();
+        drag(ev.clientX, ev.clientY);
+    };
+    const pointerCancel = (ev) => {
+        ev.preventDefault();
+        dragCancel();
+    };
+    const pointerUp = () => {
+        doc.removeEventListener("pointermove", pointerMove);
+        doc.removeEventListener("pointerup", pointerUp);
+        doc.removeEventListener("pointercancel", pointerCancel);
+        dragEnd();
+    };
+    doc.addEventListener("pointermove", pointerMove);
+    doc.addEventListener("pointerup", pointerUp);
+    doc.addEventListener('pointercancel', pointerCancel);
+}
+export function canDockToWindow(node) {
+    if (node instanceof TabNode) {
+        return node.isEnablePopout();
+    }
+    else if (node instanceof TabSetNode) {
+        for (const child of node.getChildren()) {
+            if (child.isEnablePopout() === false) {
+                return false;
+            }
+        }
+        return true;
+    }
+    return false;
+}
+export function keepOnScreen(rect) {
+    rect.snap(10);
+    const availableScreenWidth = window.screen.availWidth;
+    const availableScreenHeight = window.screen.availHeight;
+    if (rect.x + rect.width > availableScreenWidth || rect.y + rect.height > availableScreenHeight) {
+        // Adjust the rectangle to fit within the available screen space
+        rect.x = Math.max(0, Math.min(rect.x, availableScreenWidth - rect.width));
+        rect.y = Math.max(0, Math.min(rect.y, availableScreenHeight - rect.height));
+    }
+    return rect;
+}
+export function isOnScreen(rect) {
+    const availableScreenWidth = window.screen.availWidth;
+    const availableScreenHeight = window.screen.availHeight;
+    return (rect.x >= 0 && rect.getRight() <= availableScreenWidth &&
+        rect.y >= 0 || rect.getBottom() <= availableScreenHeight);
+}
+export function copyInlineStyles(source, target) {
+    // Get the inline style attribute from the source element
+    const sourceStyle = source.getAttribute('style');
+    const targetStyle = target.getAttribute('style');
+    if (sourceStyle === targetStyle)
+        return false;
+    // console.log("copyInlineStyles", sourceStyle);
+    if (sourceStyle) {
+        // Set the style attribute on the target element
+        target.setAttribute('style', sourceStyle);
+    }
+    else {
+        // If the source has no inline style, clear the target's style attribute
+        target.removeAttribute('style');
+    }
+    return true;
+}
+export function isSafari() {
+    const userAgent = navigator.userAgent;
+    return userAgent.includes("Safari") && !userAgent.includes("Chrome") && !userAgent.includes("Chromium");
+}
 //# sourceMappingURL=Utils.js.map

package/lib/view/Utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"Utils.js","sourceRoot":"","sources":["../../src/view/Utils.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Utils.js","sourceRoot":"","sources":["../../src/view/Utils.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flexlayout-react",
-    "version": "0.7.15",
+    "version": "0.8.0",
     "description": "A multi-tab docking layout manager",
     "main": "lib/index.js",
     "types": "./declarations/index.d.ts",
@@ -25,17 +25,14 @@
     ],
     "scripts": {
         "start": "webpack serve",
-        "build": "npm run css && npm run test && npm run doc && npm run build:demo && npm run build:commonjs && npm run build:umd && npm run build:umd:min",
-        "build:commonjs": "tsc -p tsconfig2.json",
+        "build": "npm run css && npm run doc && npm run build:demo && npm run build:esm && npm run build:umd && npm run build:umd:min",
+        "build:esm": "tsc -p tsconfig2.json",
         "build:umd": "webpack --mode=development --config webpack_build.config.js",
         "build:umd:min": "webpack --mode=production --config webpack_build_min.config.js",
         "build:demo": "webpack",
         "lint:eslint": "eslint src/*",
         "doc": "typedoc --out typedoc --exclude \"**/examples/**/*.tsx\" --excludeInternal --disableSources --excludePrivate --excludeProtected --readme none ./src",
-        "css": "sass style/underline.scss style/underline.css && sass style/gray.scss style/gray.css && sass style/light.scss style/light.css && sass style/light.scss test/style/light.css && sass style/dark.scss style/dark.css",
-        "cypress": "cypress open-ct",
-        "cypress-firefox": "cypress open-ct --browser firefox",
-        "test": "cypress run --component"
+        "css": "sass style/rounded.scss  style/rounded.css && sass style/underline.scss style/underline.css && sass style/gray.scss style/gray.css && sass style/light.scss style/light.css && sass style/light.scss test/style/light.css && sass style/dark.scss style/dark.css"
     },
     "author": "Caplin Systems Ltd",
     "repository": "https://github.com/caplin/FlexLayout",
@@ -48,29 +45,38 @@
         "extends": "react-app"
     },
     "devDependencies": {
-        "@cypress/react": "^7.0.3",
-        "@cypress/webpack-dev-server": "^3.4.1",
-        "@types/node": "^18.15.13",
-        "@types/prismjs": "^1.26.0",
-        "@types/react": "^18.0.5",
-        "@types/react-dom": "^18.0.1",
-        "css-loader": "^6.7.1",
-        "cypress": "^12.10.0",
-        "html-webpack-plugin": "^5.5.0",
-        "prettier": "^2.6.2",
-        "prismjs": "^1.28.0",
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0",
+        "@emotion/react": "^11.13.3",
+        "@emotion/styled": "^11.13.0",
+        "@fontsource/roboto": "^5.0.14",
+        "@mui/material": "^6.0.1",
+        "@types/node": "^22.5.0",
+        "@types/prismjs": "^1.26.4",
+        "@types/react": "^18.3.4",
+        "@types/react-dom": "^18.3.0",
+        "ag-grid-community": "^32.1.0",
+        "ag-grid-react": "^32.1.0",
+        "chart.js": "^4.4.4",
+        "css-loader": "^7.1.2",
+        "html-webpack-plugin": "^5.6.0",
+        "ol": "^10.1.0",
+        "prettier": "^3.3.3",
+        "prismjs": "^1.29.0",
+        "react": "^18.3.1",
+        "react-chartjs-2": "^5.2.0",
+        "react-dom": "^18.3.1",
         "react-scripts": "5.0.1",
-        "sass": "^1.50.0",
-        "source-map-loader": "^4.0.1",
-        "style-loader": "^3.3.1",
-        "ts-loader": "~9.2.8",
-        "typedoc": "^0.24.4",
-        "typescript": "^4.9.5",
-        "webpack": "^5.72.0",
-        "webpack-cli": "^5.0.1",
-        "webpack-dev-server": "^4.8.1"
+        "sass": "^1.77.8",
+        "source-map-loader": "^5.0.0",
+        "style-loader": "^4.0.0",
+        "styled-components": "^6.1.13",
+        "ts-loader": "~9.5.1",
+        "typedoc": "^0.26.6",
+        "typescript": "^5.5.4",
+        "webpack": "^5.94.0",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^5.0.4",
+        "@mui/x-data-grid": "^7.15.0"
     },
-    "dependencies": {}
+    "dependencies": {
+    }
 }

package/src/Attribute.ts

@@ -5,15 +5,20 @@ export class Attribute {
     static BOOLEAN = "boolean";
 
     name: string;
+    alias: string | undefined;
     modelName?: string;
+    pairedAttr?: Attribute;
+    pairedType?: string;
     defaultValue: any;
     alwaysWriteJson?: boolean;
     type?: string; 
     required: boolean;
     fixed: boolean;
+    description?: string;
 
     constructor(name: string, modelName: string | undefined, defaultValue: any, alwaysWriteJson?: boolean) {
         this.name = name;
+        this.alias = undefined;
         this.modelName = modelName;
         this.defaultValue = defaultValue;
         this.alwaysWriteJson = alwaysWriteJson;
@@ -28,6 +33,15 @@ export class Attribute {
         return this;
     }
 
+    setAlias(value: string) {
+        this.alias = value;
+        return this;
+    }
+
+    setDescription(value: string) {
+        this.description = value;
+    }
+
     setRequired() {
         this.required = true;
         return this;
@@ -38,4 +52,13 @@ export class Attribute {
         return this;
     }
 
+    // sets modelAttr for nodes, and nodeAttr for model
+    setpairedAttr(value: Attribute) {
+        this.pairedAttr = value;
+    }
+
+    setPairedType(value: string) {
+        this.pairedType = value;
+    }
+
 }

package/src/AttributeDefinitions.ts

@@ -3,17 +3,17 @@ import { Attribute } from "./Attribute";
 /** @internal */
 export class AttributeDefinitions {
     attributes: Attribute[];
-    nameToAttribute: Record<string, Attribute>;
+    nameToAttribute: Map<string, Attribute>;
 
     constructor() {
         this.attributes = [];
-        this.nameToAttribute = {};
+        this.nameToAttribute = new Map();
     }
 
     addWithAll(name: string, modelName: string | undefined, defaultValue: any, alwaysWriteJson?: boolean) {
         const attr = new Attribute(name, modelName, defaultValue, alwaysWriteJson);
         this.attributes.push(attr);
-        this.nameToAttribute[name] = attr;
+        this.nameToAttribute.set(name, attr);
         return attr;
     }
 
@@ -30,7 +30,7 @@ export class AttributeDefinitions {
     }
 
     getModelName(name: string) {
-        const conversion = this.nameToAttribute[name];
+        const conversion = this.nameToAttribute.get(name);
         if (conversion !== undefined) {
             return conversion.modelName;
         }
@@ -48,7 +48,10 @@ export class AttributeDefinitions {
 
     fromJson(jsonObj: any, obj: any) {
         for (const attr of this.attributes) {
-            const fromValue = jsonObj[attr.name];
+            let fromValue = jsonObj[attr.name];
+            if (fromValue === undefined && attr.alias) {
+                fromValue = jsonObj[attr.alias];
+            }
             if (fromValue === undefined) {
                 obj[attr.name] = attr.defaultValue;
             } else {
@@ -76,6 +79,17 @@ export class AttributeDefinitions {
         }
     }
 
+    pairAttributes(type: string, childAttributes: AttributeDefinitions) {
+        for (const attr of childAttributes.attributes) {
+            if (attr.modelName && this.nameToAttribute.has(attr.modelName)) {
+                const pairedAttr = this.nameToAttribute.get(attr.modelName)!;
+                pairedAttr.setpairedAttr(attr);
+                attr.setpairedAttr(pairedAttr);
+                pairedAttr.setPairedType(type);
+            }
+        }
+    }
+
     toTypescriptInterface(name: string, parentAttributes: AttributeDefinitions | undefined) {
         const lines = [];
         const sorted = this.attributes.sort((a, b) => a.name.localeCompare(b.name));
@@ -92,27 +106,36 @@ export class AttributeDefinitions {
                 defaultValue = attr.defaultValue;
             } else if (attr.modelName !== undefined
                 && parentAttributes !== undefined
-                && parentAttributes.nameToAttribute[attr.modelName] !== undefined) {
+                && parentAttributes.nameToAttribute.get(attr.modelName) !== undefined) {
                 inherited = attr.modelName;
-                attr = parentAttributes.nameToAttribute[attr.modelName];
+                attr = parentAttributes.nameToAttribute.get(inherited)!;
                 defaultValue = attr.defaultValue;
                 type = attr.type;
             }
 
             let defValue = JSON.stringify(defaultValue);
 
-            const required = attr.required || attr.fixed ? "" : "?";
+            const required = attr.required ? "" : "?";
 
+            let sb = "\t/**\n\t  ";
+            if (c.description) {
+                sb += c.description;
+            } else if (c.pairedType && c.pairedAttr?.description) {
+                sb += `Value for ${c.pairedType} attribute ${c.pairedAttr.name} if not overridden`
+                sb += "\n\n\t  ";
+                sb += c.pairedAttr?.description;
+            }
+            sb += "\n\n\t  ";
             if (c.fixed) {
-                lines.push("\t" + c.name + ": " + defValue + ";");
+                sb += `Fixed value: ${defValue}`;
+            } else if (inherited) {
+                sb += `Default: inherited from Global attribute ${c.modelName} (default ${defValue})`;
             } else {
-                const comment = (defaultValue !== undefined ? "default: " + defValue : "") +
-                    (inherited !== undefined ? " - inherited from global " + inherited : "");
-
-                lines.push("\t" + c.name + required + ": " + type + ";" +
-                    (comment.length > 0 ? " // " + comment : "")
-                );
+                sb += `Default: ${defValue}`;
             }
+            sb += "\n\t */";
+            lines.push(sb);
+            lines.push("\t" + c.name + required + ": " + type + ";\n");
         }
         lines.push("}");
 

package/src/DockLocation.ts

@@ -2,7 +2,7 @@ import { Orientation } from "./Orientation";
 import { Rect } from "./Rect";
 
 export class DockLocation {
-    static values: Record<string, DockLocation> = {};
+    static values = new Map<string, DockLocation>();
     static TOP = new DockLocation("top", Orientation.VERT, 0);
     static BOTTOM = new DockLocation("bottom", Orientation.VERT, 1);
     static LEFT = new DockLocation("left", Orientation.HORZ, 0);
@@ -11,7 +11,7 @@ export class DockLocation {
 
     /** @internal */
     static getByName(name: string): DockLocation {
-        return DockLocation.values[name];
+        return DockLocation.values.get(name)!;
     }
 
     /** @internal */
@@ -51,26 +51,26 @@ export class DockLocation {
     }
 
     /** @internal */
-    _name: string;
+    name: string;
     /** @internal */
-    _orientation: Orientation;
+    orientation: Orientation;
     /** @internal */
-    _indexPlus: number;
+    indexPlus: number;
 
     /** @internal */
-    constructor(name: string, orientation: Orientation, indexPlus: number) {
-        this._name = name;
-        this._orientation = orientation;
-        this._indexPlus = indexPlus;
-        DockLocation.values[this._name] = this;
+    constructor(_name: string, _orientation: Orientation, _indexPlus: number) {
+        this.name = _name;
+        this.orientation = _orientation;
+        this.indexPlus = _indexPlus;
+        DockLocation.values.set(this.name, this);
     }
 
     getName() {
-        return this._name;
+        return this.name;
     }
 
     getOrientation() {
-        return this._orientation;
+        return this.orientation;
     }
 
     /** @internal */
@@ -128,6 +128,6 @@ export class DockLocation {
     }
 
     toString() {
-        return "(DockLocation: name=" + this._name + ", orientation=" + this._orientation + ")";
+        return "(DockLocation: name=" + this.name + ", orientation=" + this.orientation + ")";
     }
 }

package/src/I18nLabel.ts

@@ -1,14 +1,12 @@
 export enum I18nLabel {
     Close_Tab = "Close",
-    Close_Tabset = "Close tabset",
-    Move_Tab = "Move: ", // no longer used
-    Move_Tabset = "Move tabset",
-    Maximize = "Maximize tabset",
-    Restore = "Restore tabset",
-    Float_Tab = "Show selected tab in floating window",
+    Close_Tabset = "Close tab set",
+    Active_Tabset = "Active tab set",
+    Move_Tabset = "Move tab set",
+    Move_Tabs = "Move tabs(?)",
+    Maximize = "Maximize tab set",
+    Restore = "Restore tab set",
+    Popout_Tab = "Popout selected tab",
     Overflow_Menu_Tooltip = "Hidden tabs",
-    Floating_Window_Message = "This panel is shown in a floating window",
-    Floating_Window_Show_Window = "Show window",
-    Floating_Window_Dock_Window = "Dock window",
     Error_rendering_component = "Error rendering component",
 }

package/src/Rect.ts

@@ -1,3 +1,4 @@
+import { IJsonRect } from "./model/IJsonModel";
 import { Orientation } from "./Orientation";
 
 export class Rect {
@@ -5,6 +6,10 @@ export class Rect {
         return new Rect(0, 0, 0, 0);
     }
 
+    static fromJson(json: IJsonRect): Rect {
+        return new Rect(json.x, json.y, json.width, json.height);
+    }
+
     x: number;
     y: number;
     width: number;
@@ -17,11 +22,54 @@ export class Rect {
         this.height = height;
     }
 
-    static fromElement(element: Element) {
+    toJson() {
+        return {x: this.x, y: this.y, width: this.width, height: this.height};
+    }
+
+    snap(round: number) {
+        this.x = Math.round(this.x / round) * round;
+        this.y = Math.round(this.y / round) * round;
+        this.width = Math.round(this.width / round) * round;
+        this.height= Math.round(this.height / round) * round;
+    }
+
+    static getBoundingClientRect(element: Element) {
         let { x, y, width, height } = element.getBoundingClientRect();
         return new Rect(x, y, width, height);
     }
 
+    static getContentRect(element: HTMLElement) {
+        const rect = element.getBoundingClientRect();
+        const style = window.getComputedStyle(element);
+
+        const paddingLeft = parseFloat(style.paddingLeft);
+        const paddingRight = parseFloat(style.paddingRight);
+        const paddingTop = parseFloat(style.paddingTop);
+        const paddingBottom = parseFloat(style.paddingBottom);
+        const borderLeftWidth = parseFloat(style.borderLeftWidth);
+        const borderRightWidth = parseFloat(style.borderRightWidth);
+        const borderTopWidth = parseFloat(style.borderTopWidth);
+        const borderBottomWidth = parseFloat(style.borderBottomWidth);
+
+        const contentWidth = rect.width - borderLeftWidth - paddingLeft - paddingRight - borderRightWidth;
+        const contentHeight = rect.height - borderTopWidth - paddingTop - paddingBottom - borderBottomWidth;
+
+        return new Rect(
+            rect.left + borderLeftWidth + paddingLeft,
+            rect.top + borderTopWidth + paddingTop,
+            contentWidth,
+            contentHeight,
+        );
+    }
+
+    static fromDomRect(domRect: DOMRect) {
+        return new Rect(domRect.x, domRect.y, domRect.width, domRect.height);
+    }
+
+    relativeTo(r: Rect | DOMRect) {
+        return new Rect(this.x - r.x, this.y - r.y, this.width, this.height);
+    }
+
     clone() {
         return new Rect(this.x, this.y, this.width, this.height);
     }
@@ -30,6 +78,10 @@ export class Rect {
         return this.x === rect?.x && this.y === rect?.y && this.width === rect?.width && this.height === rect?.height
     }
 
+    equalSize(rect: Rect | null | undefined) {
+        return this.width === rect?.width && this.height === rect?.height
+    }
+
     getBottom() {
         return this.y + this.height;
     }