flexlayout-react 0.8.11 → 0.8.13

package/src/model/TabSetNode.ts

@@ -1,592 +0,0 @@
-import { Attribute } from "../Attribute";
-import { AttributeDefinitions } from "../AttributeDefinitions";
-import { DockLocation } from "../DockLocation";
-import { DropInfo } from "../DropInfo";
-import { Orientation } from "../Orientation";
-import { Rect } from "../Rect";
-import { CLASSES } from "../Types";
-import { canDockToWindow } from "../view/Utils";
-import { BorderNode } from "./BorderNode";
-import { IDraggable } from "./IDraggable";
-import { IDropTarget } from "./IDropTarget";
-import { IJsonTabSetNode } from "./IJsonModel";
-import { LayoutWindow } from "./LayoutWindow";
-import { Model } from "./Model";
-import { Node } from "./Node";
-import { RowNode } from "./RowNode";
-import { TabNode } from "./TabNode";
-import { adjustSelectedIndex } from "./Utils";
-
-export class TabSetNode extends Node implements IDraggable, IDropTarget {
-    static readonly TYPE = "tabset";
-
-    /** @internal */
-    static fromJson(json: any, model: Model, layoutWindow: LayoutWindow) {
-        const newLayoutNode = new TabSetNode(model, json);
-
-        if (json.children != null) {
-            for (const jsonChild of json.children) {
-                const child = TabNode.fromJson(jsonChild, model);
-                newLayoutNode.addChild(child);
-            }
-        }
-        if (newLayoutNode.children.length === 0) {
-            newLayoutNode.setSelected(-1);
-        }
-
-        if (json.maximized && json.maximized === true) {
-            layoutWindow.maximizedTabSet = newLayoutNode;
-        }
-
-        if (json.active && json.active === true) {
-            layoutWindow.activeTabSet = newLayoutNode;
-        }
-
-        return newLayoutNode;
-    }
-    /** @internal */
-    private static attributeDefinitions: AttributeDefinitions = TabSetNode.createAttributeDefinitions();
-
-    /** @internal */
-    private tabStripRect: Rect = Rect.empty();
-    /** @internal */
-    private contentRect: Rect = Rect.empty();
-    /** @internal */
-    private calculatedMinHeight: number;
-    /** @internal */
-    private calculatedMinWidth: number;
-    /** @internal */
-    private calculatedMaxHeight: number;
-    /** @internal */
-    private calculatedMaxWidth: number;
-
-    /** @internal */
-    constructor(model: Model, json: any) {
-        super(model);
-        this.calculatedMinHeight = 0;
-        this.calculatedMinWidth = 0;
-        this.calculatedMaxHeight = 0;
-        this.calculatedMaxWidth = 0;
-
-        TabSetNode.attributeDefinitions.fromJson(json, this.attributes);
-        model.addNode(this);
-    }
-
-    getName() {
-        return this.getAttr("name") as string | undefined;
-    }
-
-    isEnableActiveIcon() {
-        return this.getAttr("enableActiveIcon") as boolean;
-    }
-
-    getSelected() {
-        const selected = this.attributes.selected;
-        if (selected !== undefined) {
-            return selected as number;
-        }
-        return -1;
-    }
-
-    getSelectedNode() {
-        const selected = this.getSelected();
-        if (selected !== -1) {
-            return this.children[selected];
-        }
-        return undefined;
-    }
-
-    getWeight(): number {
-        return this.getAttr("weight") as number;
-    }
-
-    getAttrMinWidth() {
-        return (this.getAttr("minWidth") as number);
-    }
-
-    getAttrMinHeight() {
-        return this.getAttr("minHeight") as number;
-    }
-
-    getMinWidth() {
-        return this.calculatedMinWidth;
-    }
-
-    getMinHeight() {
-        return this.calculatedMinHeight;
-    }
-
-    /** @internal */
-    getMinSize(orientation: Orientation) {
-        if (orientation === Orientation.HORZ) {
-            return this.getMinWidth();
-        } else {
-            return this.getMinHeight();
-        }
-    }
-    getAttrMaxWidth() {
-        return (this.getAttr("maxWidth") as number);
-    }
-
-    getAttrMaxHeight() {
-        return this.getAttr("maxHeight") as number;
-    }
-
-    getMaxWidth() {
-        return this.calculatedMaxWidth;
-    }
-
-    getMaxHeight() {
-        return this.calculatedMaxHeight;
-    }
-
-    /** @internal */
-    getMaxSize(orientation: Orientation) {
-        if (orientation === Orientation.HORZ) {
-            return this.getMaxWidth();
-        } else {
-            return this.getMaxHeight();
-        }
-    }
-
-
-    /**
-     * Returns the config attribute that can be used to store node specific data that
-     * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather
-     * than directly, for example:
-     * this.state.model.doAction(
-     *   FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));
-     */
-    getConfig() {
-        return this.attributes.config;
-    }
-
-    isMaximized() {
-        return this.model.getMaximizedTabset(this.getWindowId()) === this;
-    }
-
-    isActive() {
-        return this.model.getActiveTabset(this.getWindowId()) === this;
-    }
-
-    isEnableDeleteWhenEmpty() {
-        return this.getAttr("enableDeleteWhenEmpty") as boolean;
-    }
-
-    isEnableDrop() {
-        return this.getAttr("enableDrop") as boolean;
-    }
-
-    isEnableTabWrap() {
-        return this.getAttr("enableTabWrap") as boolean;
-    }
-
-    isEnableDrag() {
-        return this.getAttr("enableDrag") as boolean;
-    }
-
-    isEnableDivide() {
-        return this.getAttr("enableDivide") as boolean;
-    }
-
-    isEnableMaximize() {
-        return this.getAttr("enableMaximize") as boolean;
-    }
-
-    isEnableClose() {
-        return this.getAttr("enableClose") as boolean;
-    }
-
-    isEnableSingleTabStretch() {
-        return this.getAttr("enableSingleTabStretch") as boolean;
-    }
-
-    isEnableTabStrip() {
-        return this.getAttr("enableTabStrip") as boolean;
-    }
-
-    isAutoSelectTab() {
-        return this.getAttr("autoSelectTab") as boolean;
-    }
-
-    isEnableTabScrollbar() {
-        return this.getAttr("enableTabScrollbar") as boolean;
-    }
-
-    getClassNameTabStrip() {
-        return this.getAttr("classNameTabStrip") as string | undefined;
-    }
-
-    getTabLocation() {
-        return this.getAttr("tabLocation") as string;
-    }
-
-
-
-    toJson(): IJsonTabSetNode {
-        const json: any = {};
-        TabSetNode.attributeDefinitions.toJson(json, this.attributes);
-        json.children = this.children.map((child) => child.toJson());
-
-        if (this.isActive()) {
-            json.active = true;
-        }
-
-        if (this.isMaximized()) {
-            json.maximized = true;
-        }
-
-        return json;
-    }
-
-    /** @internal */
-    calcMinMaxSize() {
-        this.calculatedMinHeight = this.getAttrMinHeight();
-        this.calculatedMinWidth = this.getAttrMinWidth();
-        this.calculatedMaxHeight = this.getAttrMaxHeight();
-        this.calculatedMaxWidth = this.getAttrMaxWidth();
-        for (const child of this.children) {
-            const c = child as TabNode;
-            this.calculatedMinWidth = Math.max(this.calculatedMinWidth, c.getMinWidth());
-            this.calculatedMinHeight = Math.max(this.calculatedMinHeight, c.getMinHeight());
-            this.calculatedMaxWidth = Math.min(this.calculatedMaxWidth, c.getMaxWidth());
-            this.calculatedMaxHeight = Math.min(this.calculatedMaxHeight, c.getMaxHeight());
-        }
-
-        this.calculatedMinHeight += this.tabStripRect.height;
-        this.calculatedMaxHeight += this.tabStripRect.height;
-    }
-
-    /** @internal */
-    canMaximize() {
-        if (this.isEnableMaximize()) {
-            // always allow maximize toggle if already maximized
-            if (this.getModel().getMaximizedTabset(this.getWindowId()) === this) {
-                return true;
-            }
-            // only one tabset, so disable
-            if (this.getParent() === this.getModel().getRoot(this.getWindowId()) && this.getModel().getRoot(this.getWindowId()).getChildren().length === 1) {
-                return false;
-            }
-            return true;
-        }
-        return false;
-    }
-
-    /** @internal */
-    setContentRect(rect: Rect) {
-        this.contentRect = rect;
-    }
-
-    /** @internal */
-    getContentRect() {
-        return this.contentRect;
-    }
-
-    /** @internal */
-    setTabStripRect(rect: Rect) {
-        this.tabStripRect = rect;
-    }
-    /** @internal */
-    setWeight(weight: number) {
-        this.attributes.weight = weight;
-    }
-
-    /** @internal */
-    setSelected(index: number) {
-        this.attributes.selected = index;
-    }
-
-    getWindowId() {
-        return (this.parent as RowNode).getWindowId();
-    }
-
-    /** @internal */
-    canDrop(dragNode: Node & IDraggable, x: number, y: number): DropInfo | undefined {
-        let dropInfo;
-
-        if (dragNode === this) {
-            const dockLocation = DockLocation.CENTER;
-            const outlineRect = this.tabStripRect;
-            dropInfo = new DropInfo(this, outlineRect!, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
-        } else if (this.getWindowId() !== Model.MAIN_WINDOW_ID && !canDockToWindow(dragNode)) {
-            return undefined;
-        } else if (this.contentRect!.contains(x, y)) {
-            let dockLocation = DockLocation.CENTER;
-            if (this.model.getMaximizedTabset((this.parent as RowNode).getWindowId()) === undefined) {
-                dockLocation = DockLocation.getLocation(this.contentRect!, x, y);
-            }
-            const outlineRect = dockLocation.getDockRect(this.rect);
-            dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
-        } else if (this.tabStripRect != null && this.tabStripRect.contains(x, y)) {
-            let r: Rect;
-            let yy: number;
-            let h: number;
-            if (this.children.length === 0) {
-                r = this.tabStripRect.clone();
-                yy = r.y + 3;
-                h = r.height - 4;
-                r.width = 2;
-            } else {
-                let child = this.children[0] as TabNode;
-                r = child.getTabRect()!;
-                yy = r.y;
-                h = r.height;
-                let p = this.tabStripRect.x;
-                let childCenter = 0;
-                for (let i = 0; i < this.children.length; i++) {
-                    child = this.children[i] as TabNode;
-                    r = child.getTabRect()!;
-                    if (r.y !== yy) {
-                        yy = r.y
-                        p = this.tabStripRect.x;
-                    }
-                    childCenter = r.x + r.width / 2;
-                    if (p <= x && x < childCenter && r.y < y && y < r.getBottom()) {
-                        const dockLocation = DockLocation.CENTER;
-                        const outlineRect = new Rect(r.x - 2, r.y, 3, r.height);
-                        if (this.rect.x < r.x && r.x < this.rect.getRight()) {
-                            dropInfo = new DropInfo(this, outlineRect, dockLocation, i, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
-                            break;
-                        } else {
-                            return undefined;
-                        }
-                    }
-                    p = childCenter;
-                }
-            }
-            if (dropInfo == null && r.getRight() < this.rect!.getRight()) {
-                const dockLocation = DockLocation.CENTER;
-                const outlineRect = new Rect(r.getRight() - 2, yy, 3, h);
-                dropInfo = new DropInfo(this, outlineRect, dockLocation, this.children.length, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
-            }
-        }
-
-        if (!dragNode.canDockInto(dragNode, dropInfo)) {
-            return undefined;
-        }
-
-        return dropInfo;
-    }
-
-    /** @internal */
-    delete() {
-        (this.parent as RowNode).removeChild(this);
-    }
-
-    /** @internal */
-    remove(node: TabNode) {
-        const removedIndex = this.removeChild(node);
-        this.model.tidy();
-
-        adjustSelectedIndex(this, removedIndex);
-    }
-
-    /** @internal */
-    drop(dragNode: Node, location: DockLocation, index: number, select?: boolean) {
-        const dockLocation = location;
-
-        if (this === dragNode) {
-            // tabset drop into itself
-            return; // dock back to itself
-        }
-
-        let dragParent = dragNode.getParent() as BorderNode | TabSetNode | RowNode;
-        let fromIndex = 0;
-        if (dragParent !== undefined) {
-            fromIndex = dragParent.removeChild(dragNode);
-            // if selected node in border is being docked into tabset then deselect border tabs
-            if (dragParent instanceof BorderNode && dragParent.getSelected() === fromIndex) {
-                dragParent.setSelected(-1);
-            } else {
-                adjustSelectedIndex(dragParent, fromIndex);
-            }
-        }
-
-        // if dropping a tab back to same tabset and moving to forward position then reduce insertion index
-        if (dragNode instanceof TabNode && dragParent === this && fromIndex < index && index > 0) {
-            index--;
-        }
-
-        // simple_bundled dock to existing tabset
-        if (dockLocation === DockLocation.CENTER) {
-            let insertPos = index;
-            if (insertPos === -1) {
-                insertPos = this.children.length;
-            }
-
-            if (dragNode instanceof TabNode) {
-                this.addChild(dragNode, insertPos);
-                if (select || (select !== false && this.isAutoSelectTab())) {
-                    this.setSelected(insertPos);
-                }
-                // console.log("added child at : " + insertPos);
-            } else if (dragNode instanceof RowNode) {
-                (dragNode as RowNode).forEachNode((child, level) => {
-                    if (child instanceof TabNode) {
-                        this.addChild(child, insertPos);
-                        // console.log("added child at : " + insertPos);
-                        insertPos++;
-                    }
-                }, 0);
-            } else {
-                for (let i = 0; i < dragNode.getChildren().length; i++) {
-                    const child = dragNode.getChildren()[i];
-                    this.addChild(child, insertPos);
-                    // console.log("added child at : " + insertPos);
-                    insertPos++;
-                }
-                if (this.getSelected() === -1 && this.children.length > 0) {
-                    this.setSelected(0);
-                }
-            }
-            this.model.setActiveTabset(this, (this.parent as RowNode).getWindowId());
-        } else {
-            let moveNode = dragNode as TabSetNode | RowNode | TabNode;
-            if (dragNode instanceof TabNode) {
-                // create new tabset parent
-                // console.log("create a new tabset");
-                const callback = this.model.getOnCreateTabSet();
-                moveNode = new TabSetNode(this.model, callback ? callback(dragNode as TabNode) : {});
-                moveNode.addChild(dragNode);
-                // console.log("added child at end");
-                dragParent = moveNode;
-            } else if (dragNode instanceof RowNode) {
-                const parent = (this.getParent()! as RowNode);
-                // need to turn round if same orientation unless docking oposite direction
-                if (dragNode.getOrientation() === parent.getOrientation() &&
-                    (location.getOrientation() === parent.getOrientation() || location === DockLocation.CENTER)) {
-                    const node = new RowNode(this.model, this.getWindowId(), {});
-                    node.addChild(dragNode);
-                    moveNode = node;
-                }
-            } else {
-                moveNode = dragNode as TabSetNode;
-            }
-
-            const parentRow = this.parent as Node;
-            const pos = parentRow.getChildren().indexOf(this);
-
-            if (parentRow.getOrientation() === dockLocation.orientation) {
-                moveNode.setWeight(this.getWeight() / 2);
-                this.setWeight(this.getWeight() / 2);
-                // console.log("added child 50% size at: " +  pos + dockLocation.indexPlus);
-                parentRow.addChild(moveNode, pos + dockLocation.indexPlus);
-            } else {
-                // create a new row to host the new tabset (it will go in the opposite direction)
-                // console.log("create a new row");
-                const newRow = new RowNode(this.model, this.getWindowId(), {});
-                newRow.setWeight(this.getWeight());
-                newRow.addChild(this);
-                this.setWeight(50);
-                moveNode.setWeight(50);
-                // console.log("added child 50% size at: " +  dockLocation.indexPlus);
-                newRow.addChild(moveNode, dockLocation.indexPlus);
-
-                parentRow.removeChild(this);
-                parentRow.addChild(newRow, pos);
-            }
-            if (moveNode instanceof TabSetNode) {
-                this.model.setActiveTabset(moveNode, this.getWindowId());
-            }
-        }
-        this.model.tidy();
-    }
-
-    /** @internal */
-    updateAttrs(json: any) {
-        TabSetNode.attributeDefinitions.update(json, this.attributes);
-    }
-
-    /** @internal */
-    getAttributeDefinitions() {
-        return TabSetNode.attributeDefinitions;
-    }
-
-    /** @internal */
-    static getAttributeDefinitions() {
-        return TabSetNode.attributeDefinitions;
-    }
-
-    /** @internal */
-    private static createAttributeDefinitions(): AttributeDefinitions {
-        const attributeDefinitions = new AttributeDefinitions();
-        attributeDefinitions.add("type", TabSetNode.TYPE, true).setType(Attribute.STRING).setFixed();
-        attributeDefinitions.add("id", undefined).setType(Attribute.STRING).setDescription(
-            `the unique id of the tab set, if left undefined a uuid will be assigned`
-        );
-        attributeDefinitions.add("weight", 100).setType(Attribute.NUMBER).setDescription(
-            `relative weight for sizing of this tabset in parent row`
-        );
-        attributeDefinitions.add("selected", 0).setType(Attribute.NUMBER).setDescription(
-            `index of selected/visible tab in tabset`
-        );
-        attributeDefinitions.add("name", undefined).setType(Attribute.STRING);
-        attributeDefinitions.add("config", undefined).setType("any").setDescription(
-            `a place to hold json config used in your own code`
-        );
-
-        attributeDefinitions.addInherited("enableDeleteWhenEmpty", "tabSetEnableDeleteWhenEmpty").setDescription(
-            `whether to delete this tabset when is has no tabs`
-        );
-        attributeDefinitions.addInherited("enableDrop", "tabSetEnableDrop").setDescription(
-            `allow user to drag tabs into this tabset`
-        );
-        attributeDefinitions.addInherited("enableDrag", "tabSetEnableDrag").setDescription(
-            `allow user to drag tabs out this tabset`
-        );
-        attributeDefinitions.addInherited("enableDivide", "tabSetEnableDivide").setDescription(
-            `allow user to drag tabs to region of this tabset, splitting into new tabset`
-        );
-        attributeDefinitions.addInherited("enableMaximize", "tabSetEnableMaximize").setDescription(
-            `allow user to maximize tabset to fill view via maximize button`
-        );
-        attributeDefinitions.addInherited("enableClose", "tabSetEnableClose").setDescription(
-            `allow user to close tabset via a close button`
-        );
-        attributeDefinitions.addInherited("enableSingleTabStretch", "tabSetEnableSingleTabStretch").setDescription(
-            `if the tabset has only a single tab then stretch the single tab to fill area and display in a header style`
-        );
-
-        attributeDefinitions.addInherited("classNameTabStrip", "tabSetClassNameTabStrip").setDescription(
-            `a class name to apply to the tab strip`
-        );
-        attributeDefinitions.addInherited("enableTabStrip", "tabSetEnableTabStrip").setDescription(
-            `enable tab strip and allow multiple tabs in this tabset`
-        );
-        attributeDefinitions.addInherited("minWidth", "tabSetMinWidth").setDescription(
-            `minimum width (in px) for this tabset`
-        );
-        attributeDefinitions.addInherited("minHeight", "tabSetMinHeight").setDescription(
-            `minimum height (in px) for this tabset`
-        );
-        attributeDefinitions.addInherited("maxWidth", "tabSetMaxWidth").setDescription(
-            `maximum width (in px) for this tabset`
-        );
-        attributeDefinitions.addInherited("maxHeight", "tabSetMaxHeight").setDescription(
-            `maximum height (in px) for this tabset`
-        );
-
-        attributeDefinitions.addInherited("enableTabWrap", "tabSetEnableTabWrap").setDescription(
-            `wrap tabs onto multiple lines`
-        );
-        attributeDefinitions.addInherited("tabLocation", "tabSetTabLocation").setDescription(
-            `the location of the tabs either top or bottom`
-        );
-        attributeDefinitions.addInherited("autoSelectTab", "tabSetAutoSelectTab").setType(Attribute.BOOLEAN).setDescription(
-            `whether to select new/moved tabs in tabset`
-        );
-        attributeDefinitions.addInherited("enableActiveIcon", "tabSetEnableActiveIcon").setType(Attribute.BOOLEAN).setDescription(
-            `whether the active icon (*) should be displayed when the tabset is active`
-        );
-
-        attributeDefinitions.addInherited("enableTabScrollbar", "tabSetEnableTabScrollbar").setType(Attribute.BOOLEAN).setDescription(
-            `whether to show a mini scrollbar for the tabs`
-        );
-
-        return attributeDefinitions;
-    }
-
-}
-
-

package/src/model/Utils.ts

@@ -1,52 +0,0 @@
-import { TabSetNode } from "./TabSetNode";
-import { BorderNode } from "./BorderNode";
-import { RowNode } from "./RowNode";
-import { TabNode } from "./TabNode";
-
-/** @internal */
-export function adjustSelectedIndexAfterDock(node: TabNode) {
-    const parent = node.getParent();
-    if (parent !== null && (parent instanceof TabSetNode || parent instanceof BorderNode)) {
-        const children = parent.getChildren();
-        for (let i = 0; i < children.length; i++) {
-            const child = children[i] as TabNode;
-            if (child === node) {
-                parent.setSelected(i);
-                return;
-            }
-        }
-    }
-}
-
-/** @internal */
-export function adjustSelectedIndex(parent: TabSetNode | BorderNode | RowNode, removedIndex: number) {
-    // for the tabset/border being removed from set the selected index
-    if (parent !== undefined && (parent instanceof TabSetNode || parent instanceof BorderNode)) {
-        const selectedIndex = (parent as TabSetNode | BorderNode).getSelected();
-        if (selectedIndex !== -1) {
-            if (removedIndex === selectedIndex && parent.getChildren().length > 0) {
-                if (removedIndex >= parent.getChildren().length) {
-                    // removed last tab; select new last tab
-                    parent.setSelected(parent.getChildren().length - 1);
-                } else {
-                    // leave selected index as is, selecting next tab after this one
-                }
-            } else if (removedIndex < selectedIndex) {
-                parent.setSelected(selectedIndex - 1);
-            } else if (removedIndex > selectedIndex) {
-                // leave selected index as is
-            } else {
-                parent.setSelected(-1);
-            }
-        }
-    }
-}
-
-export function randomUUID(): string {
-    // @ts-ignore
-    return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
-      (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
-    );
-  }
-
-