@itwin/appui-react 4.0.0-dev.2 → 4.0.0-dev.3

package/lib/esm/appui-react/content/ContentLayout.js

@@ -1,351 +1,368 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module ContentView
- */
-// cSpell:ignore contentlayout
-import "./ContentLayout.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { SplitPane } from "./split-pane/SplitPane";
-import { Orientation } from "@itwin/core-react";
-import { FrontstageManager } from "../frontstage/FrontstageManager";
-import { UiShowHideManager } from "../utils/UiShowHideManager";
-import { UiEvent } from "@itwin/appui-abstract";
-import { ContentViewManager } from "./ContentViewManager";
-import { useActiveFrontstageDef } from "../frontstage/FrontstageDef";
-/** ContentWrapper React component.
- * @internal
- */
-export function ContentWrapper(props) {
-    const { content } = props;
-    const [isActive, setIsActive] = React.useState(content === ContentViewManager.getActiveContent());
-    const activeFrontstageDef = useActiveFrontstageDef();
-    // istanbul ignore next
-    const [hasMultipleContents, setHasMultipleContents] = React.useState(() => {
-        var _a, _b, _c;
-        return ((activeFrontstageDef && (!!((_a = activeFrontstageDef.floatingContentControls) === null || _a === void 0 ? void 0 : _a.length)) ||
-            ((_c = (_b = activeFrontstageDef === null || activeFrontstageDef === void 0 ? void 0 : activeFrontstageDef.contentGroup) === null || _b === void 0 ? void 0 : _b.getContentControls().length) !== null && _c !== void 0 ? _c : 0) > 1));
-    });
-    React.useEffect(() => {
-        setIsActive(content === ContentViewManager.getActiveContent());
-    }, [content]);
-    React.useEffect(() => {
-        const handleActiveContentChanged = (args) => {
-            var _a, _b, _c;
-            setIsActive(content === args.activeContent);
-            // istanbul ignore next
-            setHasMultipleContents((activeFrontstageDef && (!!((_a = activeFrontstageDef.floatingContentControls) === null || _a === void 0 ? void 0 : _a.length)) ||
-                ((_c = (_b = activeFrontstageDef === null || activeFrontstageDef === void 0 ? void 0 : activeFrontstageDef.contentGroup) === null || _b === void 0 ? void 0 : _b.getContentControls().length) !== null && _c !== void 0 ? _c : 0) > 1));
-        };
-        return ContentViewManager.onActiveContentChangedEvent.addListener(handleActiveContentChanged);
-    }, [activeFrontstageDef, content]);
-    const handleMouseDown = React.useCallback(() => {
-        ContentViewManager.setActiveContent(content);
-    }, [content]);
-    React.useEffect(() => {
-        const onAvailableContentChanged = () => {
-            var _a, _b, _c;
-            // istanbul ignore next
-            setHasMultipleContents((activeFrontstageDef && (!!((_a = activeFrontstageDef.floatingContentControls) === null || _a === void 0 ? void 0 : _a.length)) ||
-                ((_c = (_b = activeFrontstageDef === null || activeFrontstageDef === void 0 ? void 0 : activeFrontstageDef.contentGroup) === null || _b === void 0 ? void 0 : _b.getContentControls().length) !== null && _c !== void 0 ? _c : 0) > 1));
-        };
-        return ContentViewManager.onAvailableContentChangedEvent.addListener(onAvailableContentChanged);
-    }, [activeFrontstageDef]);
-    const overlayClassName = classnames("uifw-contentlayout-overlay-div", isActive && hasMultipleContents ? "uifw-contentlayout-overlay-active" : "uifw-contentlayout-overlay-inactive");
-    return (React.createElement("div", { className: classnames("uifw-contentlayout-wrapper", props.className), style: props.style, onMouseDown: handleMouseDown, onMouseMove: UiShowHideManager.handleContentMouseMove, role: "presentation" },
-        content,
-        React.createElement("div", { className: overlayClassName })));
-}
-/** Split Container class.
- */
-class SplitContainer extends React.Component {
-    constructor(props) {
-        super(props);
-        this._containerDiv = null;
-        this._onSplitterChange = (size) => {
-            let percentage = 0;
-            // istanbul ignore else
-            if (this._containerDiv && size > 0) {
-                if (this.props.orientation === Orientation.Horizontal) {
-                    const height = this._containerDiv.getBoundingClientRect().height;
-                    // istanbul ignore if
-                    if (height > 0)
-                        percentage = size / height;
-                }
-                else {
-                    const width = this._containerDiv.getBoundingClientRect().width;
-                    // istanbul ignore if
-                    if (width > 0)
-                        percentage = size / width;
-                }
-                // istanbul ignore else
-                if (this.props.onSplitterChange)
-                    this.props.onSplitterChange(size, percentage);
-            }
-        };
-    }
-    render() {
-        const orientation = (this.props.orientation === Orientation.Horizontal) ? "horizontal" : "vertical";
-        const defaultSize = `${(this.props.percentage * 100).toString()}%`;
-        const minSizeTopLeft = this.props.minSizeTopLeft;
-        const minSizeBottomRight = -(this.props.minSizeBottomRight);
-        return (React.createElement("div", { ref: (e) => { this._containerDiv = e; }, className: classnames("uifw-contentlayout-full-size", this.props.className), style: this.props.style },
-            React.createElement(SplitPane, { split: orientation, minSize: minSizeTopLeft, maxSize: minSizeBottomRight, defaultSize: defaultSize, onChange: this._onSplitterChange, allowResize: this.props.resizable },
-                this.props.contentA,
-                this.props.contentB)));
-    }
-}
-/** Single Content Container class.
- */
-class SingleContentContainer extends React.Component {
-    render() {
-        return (React.createElement("div", { className: classnames("uifw-contentlayout-full-size", this.props.className), style: this.props.style, "data-testid": "single-content-container", onMouseMove: UiShowHideManager.handleContentMouseMove },
-            React.createElement(ContentWrapper, { content: this.props.content, style: { height: "100%", position: "relative" } })));
-    }
-}
-/** Minimum split size  */
-const MIN_SPLIT_SIZE = 6;
-/** Base Split class.
- */
-class BaseSplit {
-    constructor(props) {
-        this.stateId = "";
-        this.isLocked = false;
-        this.defaultPercentage = props.percentage;
-        // istanbul ignore else
-        if (props.id)
-            this.stateId = props.id;
-        // istanbul ignore else
-        if (props.lock)
-            this.isLocked = props.lock;
-    }
-}
-/** Horizontal Split class.
- */
-class HorizontalSplit extends BaseSplit {
-    constructor(props) {
-        super(props);
-        this._topIndex = -1;
-        this._bottomIndex = -1;
-        this._minSizeTop = MIN_SPLIT_SIZE;
-        this._minSizeBottom = MIN_SPLIT_SIZE;
-        this._handleSplitterChange = (_size, percentage) => {
-            this._props.percentage = percentage;
-        };
-        this._props = props;
-        if (typeof props.top === "number") {
-            this._topIndex = props.top;
-        }
-        else {
-            this._topSplit = ContentLayoutDef.createSplit(props.top);
-        }
-        if (typeof props.bottom === "number") {
-            this._bottomIndex = props.bottom;
-        }
-        else {
-            this._bottomSplit = ContentLayoutDef.createSplit(props.bottom);
-        }
-        if (props.minSizeTop)
-            this._minSizeTop = Math.max(props.minSizeTop, MIN_SPLIT_SIZE);
-        if (props.minSizeBottom)
-            this._minSizeBottom = Math.max(props.minSizeBottom, MIN_SPLIT_SIZE);
-    }
-    createContentContainer(contentNodes, resizable) {
-        if (this.isLocked)
-            resizable = false;
-        const topContent = (!this._topSplit) ?
-            React.createElement(ContentWrapper, { content: contentNodes[this._topIndex] }) :
-            this._topSplit.createContentContainer(contentNodes, resizable);
-        const bottomContent = (!this._bottomSplit) ?
-            React.createElement(ContentWrapper, { content: contentNodes[this._bottomIndex] }) :
-            this._bottomSplit.createContentContainer(contentNodes, resizable);
-        return (React.createElement(SplitContainer, { contentA: topContent, contentB: bottomContent, orientation: Orientation.Horizontal, percentage: this.defaultPercentage, resizable: resizable, minSizeTopLeft: this._minSizeTop, minSizeBottomRight: this._minSizeBottom, splitterStateId: this.stateId, onSplitterChange: this._handleSplitterChange }));
-    }
-}
-/** Vertical Split class.
- */
-class VerticalSplit extends BaseSplit {
-    constructor(props) {
-        super(props);
-        this._leftIndex = -1;
-        this._rightIndex = -1;
-        this._minSizeLeft = MIN_SPLIT_SIZE;
-        this._minSizeRight = MIN_SPLIT_SIZE;
-        this._handleSplitterChange = (_size, percentage) => {
-            this._props.percentage = percentage;
-        };
-        this._props = props;
-        if (typeof props.left === "number") {
-            this._leftIndex = props.left;
-        }
-        else {
-            this._leftSplit = ContentLayoutDef.createSplit(props.left);
-        }
-        if (typeof props.right === "number") {
-            this._rightIndex = props.right;
-        }
-        else {
-            this._rightSplit = ContentLayoutDef.createSplit(props.right);
-        }
-        if (props.minSizeLeft)
-            this._minSizeLeft = Math.max(props.minSizeLeft, MIN_SPLIT_SIZE);
-        if (props.minSizeRight)
-            this._minSizeRight = Math.max(props.minSizeRight, MIN_SPLIT_SIZE);
-    }
-    createContentContainer(contentNodes, resizable) {
-        if (this.isLocked)
-            resizable = false;
-        const leftContent = (!this._leftSplit) ?
-            React.createElement(ContentWrapper, { content: contentNodes[this._leftIndex] }) :
-            this._leftSplit.createContentContainer(contentNodes, resizable);
-        const rightContent = (!this._rightSplit) ?
-            React.createElement(ContentWrapper, { content: contentNodes[this._rightIndex] }) :
-            this._rightSplit.createContentContainer(contentNodes, resizable);
-        return (React.createElement(SplitContainer, { contentA: leftContent, contentB: rightContent, orientation: Orientation.Vertical, percentage: this.defaultPercentage, resizable: resizable, minSizeTopLeft: this._minSizeLeft, minSizeBottomRight: this._minSizeRight, splitterStateId: this.stateId, onSplitterChange: this._handleSplitterChange }));
-    }
-}
-/** Content Layout Definition class.
- * @public
- */
-export class ContentLayoutDef {
-    constructor(layoutProps) {
-        /** ID for this Content Layout */
-        this.id = "";
-        /** Description of the layout. */
-        this.description = "";
-        this._layoutProps = layoutProps;
-        this.id = layoutProps.id;
-        if (layoutProps.description !== undefined)
-            this.description = layoutProps.description;
-    }
-    get rootSplit() { return this._rootSplit; }
-    /** Creates [[ContentLayoutProps]] for JSON purposes
-     * @public
-     */
-    toJSON() { return this._layoutProps; }
-    /** Fill a layout container with React nodes for each content view
-     */
-    fillLayoutContainer(contentNodes, resizable) {
-        this._rootSplit = ContentLayoutDef.createSplit(this._layoutProps);
-        if (this.rootSplit) {
-            return this.rootSplit.createContentContainer(contentNodes, resizable);
-        }
-        if (contentNodes.length > 0)
-            return React.createElement(SingleContentContainer, { content: contentNodes[0] });
-        return undefined;
-    }
-    /** Gets the indexes of content views used in this Content Layout
-     */
-    getUsedContentIndexes() {
-        let allContentIndexes = [];
-        if (!this._layoutProps.horizontalSplit && !this._layoutProps.verticalSplit)
-            allContentIndexes.push(0);
-        else {
-            allContentIndexes = allContentIndexes.concat(this.getHorizontalSplitContentIndexes(this._layoutProps.horizontalSplit));
-            allContentIndexes = allContentIndexes.concat(this.getVerticalSplitContentIndexes(this._layoutProps.verticalSplit));
-        }
-        const uniqueContentIndexes = [...new Set(allContentIndexes)];
-        return uniqueContentIndexes;
-    }
-    getHorizontalSplitContentIndexes(splitProps) {
-        let contentIndexes = [];
-        if (!splitProps)
-            return contentIndexes;
-        if (typeof splitProps.top === "number")
-            contentIndexes.push(splitProps.top);
-        else {
-            contentIndexes = contentIndexes.concat(this.getHorizontalSplitContentIndexes(splitProps.top.horizontalSplit));
-            contentIndexes = contentIndexes.concat(this.getVerticalSplitContentIndexes(splitProps.top.verticalSplit));
-        }
-        if (typeof splitProps.bottom === "number")
-            contentIndexes.push(splitProps.bottom);
-        else {
-            contentIndexes = contentIndexes.concat(this.getHorizontalSplitContentIndexes(splitProps.bottom.horizontalSplit));
-            contentIndexes = contentIndexes.concat(this.getVerticalSplitContentIndexes(splitProps.bottom.verticalSplit));
-        }
-        return contentIndexes;
-    }
-    getVerticalSplitContentIndexes(splitProps) {
-        let contentIndexes = [];
-        if (!splitProps)
-            return contentIndexes;
-        if (typeof splitProps.left === "number")
-            contentIndexes.push(splitProps.left);
-        else {
-            contentIndexes = contentIndexes.concat(this.getHorizontalSplitContentIndexes(splitProps.left.horizontalSplit));
-            contentIndexes = contentIndexes.concat(this.getVerticalSplitContentIndexes(splitProps.left.verticalSplit));
-        }
-        if (typeof splitProps.right === "number")
-            contentIndexes.push(splitProps.right);
-        else {
-            contentIndexes = contentIndexes.concat(this.getHorizontalSplitContentIndexes(splitProps.right.horizontalSplit));
-            contentIndexes = contentIndexes.concat(this.getVerticalSplitContentIndexes(splitProps.right.verticalSplit));
-        }
-        return contentIndexes;
-    }
-    /** @internal */
-    static createSplit(fragmentDef) {
-        if (fragmentDef.horizontalSplit) {
-            return new HorizontalSplit(fragmentDef.horizontalSplit);
-        }
-        else if (fragmentDef.verticalSplit) {
-            return new VerticalSplit(fragmentDef.verticalSplit);
-        }
-        return undefined;
-    }
-}
-/** Content Layout Activated Event class.
- * @public
- */
-export class ContentLayoutActivatedEvent extends UiEvent {
-}
-/** Content Layout React component.
- * @public
- */
-export class ContentLayout extends React.Component {
-    constructor(props) {
-        super(props);
-        this._handleContentLayoutActivated = (args) => {
-            const contentLayoutDef = args.contentLayout;
-            const contentGroup = args.contentGroup;
-            const contentNodes = contentGroup.getContentNodes();
-            const contentContainer = contentLayoutDef.fillLayoutContainer(contentNodes, true);
-            this.setState({
-                contentLayoutDef: args.contentLayout,
-                contentContainer,
-                contentGroupId: contentGroup.groupId,
-            });
-        };
-        this._onMouseDown = (_event) => {
-            ContentViewManager.setMouseDown(true);
-        };
-        this._onMouseUp = (_event) => {
-            ContentViewManager.setMouseDown(false);
-        };
-        const contentLayoutDef = this.props.contentLayout;
-        const contentGroup = this.props.contentGroup;
-        const contentNodes = contentGroup.getContentNodes();
-        const contentContainer = contentLayoutDef.fillLayoutContainer(contentNodes, true);
-        this.state = {
-            contentLayoutDef: this.props.contentLayout,
-            contentContainer,
-            contentGroupId: this.props.contentGroup.groupId,
-        };
-    }
-    componentDidMount() {
-        FrontstageManager.onContentLayoutActivatedEvent.addListener(this._handleContentLayoutActivated);
-    }
-    componentWillUnmount() {
-        FrontstageManager.onContentLayoutActivatedEvent.removeListener(this._handleContentLayoutActivated);
-    }
-    render() {
-        if (this.state.contentContainer) {
-            return (React.createElement("div", { id: "uifw-contentlayout-div", className: this.props.className, style: this.props.style, key: `${this.state.contentGroupId}-${this.state.contentLayoutDef.id}`, onMouseDown: this._onMouseDown, onMouseUp: this._onMouseUp, role: "presentation" }, this.state.contentContainer));
-        }
-        return null;
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module ContentView
+ */
+// cSpell:ignore contentlayout
+import "./ContentLayout.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { SplitPane } from "./split-pane/SplitPane";
+import { Orientation } from "@itwin/core-react";
+import { FrontstageManager } from "../frontstage/FrontstageManager";
+import { UiShowHideManager } from "../utils/UiShowHideManager";
+import { UiEvent } from "@itwin/appui-abstract";
+import { ContentViewManager } from "./ContentViewManager";
+import { useActiveFrontstageDef } from "../frontstage/FrontstageDef";
+/** ContentWrapper React component.
+ * @internal
+ */
+export function ContentWrapper(props) {
+    const { content } = props;
+    const [isActive, setIsActive] = React.useState(content === ContentViewManager.getActiveContent());
+    const activeFrontstageDef = useActiveFrontstageDef();
+    const contentControlKey = (contentControl) => {
+        let controlId;
+        if (contentControl && contentControl.key) {
+            const key = contentControl.key;
+            // key has format `${contentProps.id}::${this.groupId}` which is stored as unique id
+            controlId = key.split("::", 1)[0];
+        }
+        return controlId;
+    };
+    // istanbul ignore next
+    const [hasMultipleContents, setHasMultipleContents] = React.useState(() => {
+        var _a, _b, _c;
+        return (activeFrontstageDef && (!!((_a = activeFrontstageDef.floatingContentControls) === null || _a === void 0 ? void 0 : _a.length)) ||
+            ((_c = (_b = activeFrontstageDef === null || activeFrontstageDef === void 0 ? void 0 : activeFrontstageDef.contentGroup) === null || _b === void 0 ? void 0 : _b.getContentControls().length) !== null && _c !== void 0 ? _c : 0) > 1);
+    });
+    React.useEffect(() => {
+        setIsActive(content === ContentViewManager.getActiveContent());
+    }, [content]);
+    React.useEffect(() => {
+        const handleActiveContentChanged = (args) => {
+            var _a, _b, _c;
+            const contentIsIdentical = content === args.activeContent;
+            if (contentIsIdentical)
+                setIsActive(contentIsIdentical);
+            else {
+                const contentId = contentControlKey(content);
+                const activeContentId = contentControlKey(args.activeContent);
+                setIsActive(contentId === activeContentId);
+            }
+            // istanbul ignore next
+            setHasMultipleContents((activeFrontstageDef && (!!((_a = activeFrontstageDef.floatingContentControls) === null || _a === void 0 ? void 0 : _a.length)) ||
+                ((_c = (_b = activeFrontstageDef === null || activeFrontstageDef === void 0 ? void 0 : activeFrontstageDef.contentGroup) === null || _b === void 0 ? void 0 : _b.getContentControls().length) !== null && _c !== void 0 ? _c : 0) > 1));
+        };
+        return ContentViewManager.onActiveContentChangedEvent.addListener(handleActiveContentChanged);
+    }, [activeFrontstageDef, content]);
+    const handleMouseDown = React.useCallback(() => {
+        ContentViewManager.setActiveContent(content);
+        setIsActive(true);
+    }, [content]);
+    React.useEffect(() => {
+        const onAvailableContentChanged = () => {
+            var _a, _b, _c;
+            // istanbul ignore next
+            setHasMultipleContents((activeFrontstageDef && (!!((_a = activeFrontstageDef.floatingContentControls) === null || _a === void 0 ? void 0 : _a.length)) ||
+                ((_c = (_b = activeFrontstageDef === null || activeFrontstageDef === void 0 ? void 0 : activeFrontstageDef.contentGroup) === null || _b === void 0 ? void 0 : _b.getContentControls().length) !== null && _c !== void 0 ? _c : 0) > 1));
+        };
+        return ContentViewManager.onAvailableContentChangedEvent.addListener(onAvailableContentChanged);
+    }, [activeFrontstageDef]);
+    const overlayClassName = classnames("uifw-contentlayout-overlay-div", isActive && hasMultipleContents ? "uifw-contentlayout-overlay-active" : "uifw-contentlayout-overlay-inactive");
+    return (React.createElement("div", { className: classnames("uifw-contentlayout-wrapper", props.className), style: props.style, onMouseDown: handleMouseDown, onMouseMove: UiShowHideManager.handleContentMouseMove, role: "presentation" },
+        content,
+        React.createElement("div", { className: overlayClassName })));
+}
+/** Split Container class.
+ */
+class SplitContainer extends React.Component {
+    constructor(props) {
+        super(props);
+        this._containerDiv = null;
+        this._onSplitterChange = (size) => {
+            let percentage = 0;
+            // istanbul ignore else
+            if (this._containerDiv && size > 0) {
+                if (this.props.orientation === Orientation.Horizontal) {
+                    const height = this._containerDiv.getBoundingClientRect().height;
+                    // istanbul ignore if
+                    if (height > 0)
+                        percentage = size / height;
+                }
+                else {
+                    const width = this._containerDiv.getBoundingClientRect().width;
+                    // istanbul ignore if
+                    if (width > 0)
+                        percentage = size / width;
+                }
+                // istanbul ignore else
+                if (this.props.onSplitterChange)
+                    this.props.onSplitterChange(size, percentage);
+            }
+        };
+    }
+    render() {
+        const orientation = (this.props.orientation === Orientation.Horizontal) ? "horizontal" : "vertical";
+        const defaultSize = `${(this.props.percentage * 100).toString()}%`;
+        const minSizeTopLeft = this.props.minSizeTopLeft;
+        const minSizeBottomRight = -(this.props.minSizeBottomRight);
+        return (React.createElement("div", { ref: (e) => { this._containerDiv = e; }, className: classnames("uifw-contentlayout-full-size", this.props.className), style: this.props.style },
+            React.createElement(SplitPane, { split: orientation, minSize: minSizeTopLeft, maxSize: minSizeBottomRight, defaultSize: defaultSize, onChange: this._onSplitterChange, allowResize: this.props.resizable },
+                this.props.contentA,
+                this.props.contentB)));
+    }
+}
+/** Single Content Container class.
+ */
+class SingleContentContainer extends React.Component {
+    render() {
+        return (React.createElement("div", { className: classnames("uifw-contentlayout-full-size", this.props.className), style: this.props.style, "data-testid": "single-content-container", onMouseMove: UiShowHideManager.handleContentMouseMove },
+            React.createElement(ContentWrapper, { content: this.props.content, style: { height: "100%", position: "relative" } })));
+    }
+}
+/** Minimum split size  */
+const MIN_SPLIT_SIZE = 6;
+/** Base Split class.
+ */
+class BaseSplit {
+    constructor(props) {
+        this.stateId = "";
+        this.isLocked = false;
+        this.defaultPercentage = props.percentage;
+        // istanbul ignore else
+        if (props.id)
+            this.stateId = props.id;
+        // istanbul ignore else
+        if (props.lock)
+            this.isLocked = props.lock;
+    }
+}
+/** Horizontal Split class.
+ */
+class HorizontalSplit extends BaseSplit {
+    constructor(props) {
+        super(props);
+        this._topIndex = -1;
+        this._bottomIndex = -1;
+        this._minSizeTop = MIN_SPLIT_SIZE;
+        this._minSizeBottom = MIN_SPLIT_SIZE;
+        this._handleSplitterChange = (_size, percentage) => {
+            this._props.percentage = percentage;
+        };
+        this._props = props;
+        if (typeof props.top === "number") {
+            this._topIndex = props.top;
+        }
+        else {
+            this._topSplit = ContentLayoutDef.createSplit(props.top);
+        }
+        if (typeof props.bottom === "number") {
+            this._bottomIndex = props.bottom;
+        }
+        else {
+            this._bottomSplit = ContentLayoutDef.createSplit(props.bottom);
+        }
+        if (props.minSizeTop)
+            this._minSizeTop = Math.max(props.minSizeTop, MIN_SPLIT_SIZE);
+        if (props.minSizeBottom)
+            this._minSizeBottom = Math.max(props.minSizeBottom, MIN_SPLIT_SIZE);
+    }
+    createContentContainer(contentNodes, resizable) {
+        if (this.isLocked)
+            resizable = false;
+        const topContent = (!this._topSplit) ?
+            React.createElement(ContentWrapper, { content: contentNodes[this._topIndex] }) :
+            this._topSplit.createContentContainer(contentNodes, resizable);
+        const bottomContent = (!this._bottomSplit) ?
+            React.createElement(ContentWrapper, { content: contentNodes[this._bottomIndex] }) :
+            this._bottomSplit.createContentContainer(contentNodes, resizable);
+        return (React.createElement(SplitContainer, { contentA: topContent, contentB: bottomContent, orientation: Orientation.Horizontal, percentage: this.defaultPercentage, resizable: resizable, minSizeTopLeft: this._minSizeTop, minSizeBottomRight: this._minSizeBottom, splitterStateId: this.stateId, onSplitterChange: this._handleSplitterChange }));
+    }
+}
+/** Vertical Split class.
+ */
+class VerticalSplit extends BaseSplit {
+    constructor(props) {
+        super(props);
+        this._leftIndex = -1;
+        this._rightIndex = -1;
+        this._minSizeLeft = MIN_SPLIT_SIZE;
+        this._minSizeRight = MIN_SPLIT_SIZE;
+        this._handleSplitterChange = (_size, percentage) => {
+            this._props.percentage = percentage;
+        };
+        this._props = props;
+        if (typeof props.left === "number") {
+            this._leftIndex = props.left;
+        }
+        else {
+            this._leftSplit = ContentLayoutDef.createSplit(props.left);
+        }
+        if (typeof props.right === "number") {
+            this._rightIndex = props.right;
+        }
+        else {
+            this._rightSplit = ContentLayoutDef.createSplit(props.right);
+        }
+        if (props.minSizeLeft)
+            this._minSizeLeft = Math.max(props.minSizeLeft, MIN_SPLIT_SIZE);
+        if (props.minSizeRight)
+            this._minSizeRight = Math.max(props.minSizeRight, MIN_SPLIT_SIZE);
+    }
+    createContentContainer(contentNodes, resizable) {
+        if (this.isLocked)
+            resizable = false;
+        const leftContent = (!this._leftSplit) ?
+            React.createElement(ContentWrapper, { content: contentNodes[this._leftIndex] }) :
+            this._leftSplit.createContentContainer(contentNodes, resizable);
+        const rightContent = (!this._rightSplit) ?
+            React.createElement(ContentWrapper, { content: contentNodes[this._rightIndex] }) :
+            this._rightSplit.createContentContainer(contentNodes, resizable);
+        return (React.createElement(SplitContainer, { contentA: leftContent, contentB: rightContent, orientation: Orientation.Vertical, percentage: this.defaultPercentage, resizable: resizable, minSizeTopLeft: this._minSizeLeft, minSizeBottomRight: this._minSizeRight, splitterStateId: this.stateId, onSplitterChange: this._handleSplitterChange }));
+    }
+}
+/** Content Layout Definition class.
+ * @public
+ */
+export class ContentLayoutDef {
+    constructor(layoutProps) {
+        /** ID for this Content Layout */
+        this.id = "";
+        /** Description of the layout. */
+        this.description = "";
+        this._layoutProps = layoutProps;
+        this.id = layoutProps.id;
+        if (layoutProps.description !== undefined)
+            this.description = layoutProps.description;
+    }
+    get rootSplit() { return this._rootSplit; }
+    /** Creates [[ContentLayoutProps]] for JSON purposes
+     * @public
+     */
+    toJSON() { return this._layoutProps; }
+    /** Fill a layout container with React nodes for each content view
+     */
+    fillLayoutContainer(contentNodes, resizable) {
+        this._rootSplit = ContentLayoutDef.createSplit(this._layoutProps);
+        if (this.rootSplit) {
+            return this.rootSplit.createContentContainer(contentNodes, resizable);
+        }
+        if (contentNodes.length > 0)
+            return React.createElement(SingleContentContainer, { content: contentNodes[0] });
+        return undefined;
+    }
+    /** Gets the indexes of content views used in this Content Layout
+     */
+    getUsedContentIndexes() {
+        let allContentIndexes = [];
+        if (!this._layoutProps.horizontalSplit && !this._layoutProps.verticalSplit)
+            allContentIndexes.push(0);
+        else {
+            allContentIndexes = allContentIndexes.concat(this.getHorizontalSplitContentIndexes(this._layoutProps.horizontalSplit));
+            allContentIndexes = allContentIndexes.concat(this.getVerticalSplitContentIndexes(this._layoutProps.verticalSplit));
+        }
+        const uniqueContentIndexes = [...new Set(allContentIndexes)];
+        return uniqueContentIndexes;
+    }
+    getHorizontalSplitContentIndexes(splitProps) {
+        let contentIndexes = [];
+        if (!splitProps)
+            return contentIndexes;
+        if (typeof splitProps.top === "number")
+            contentIndexes.push(splitProps.top);
+        else {
+            contentIndexes = contentIndexes.concat(this.getHorizontalSplitContentIndexes(splitProps.top.horizontalSplit));
+            contentIndexes = contentIndexes.concat(this.getVerticalSplitContentIndexes(splitProps.top.verticalSplit));
+        }
+        if (typeof splitProps.bottom === "number")
+            contentIndexes.push(splitProps.bottom);
+        else {
+            contentIndexes = contentIndexes.concat(this.getHorizontalSplitContentIndexes(splitProps.bottom.horizontalSplit));
+            contentIndexes = contentIndexes.concat(this.getVerticalSplitContentIndexes(splitProps.bottom.verticalSplit));
+        }
+        return contentIndexes;
+    }
+    getVerticalSplitContentIndexes(splitProps) {
+        let contentIndexes = [];
+        if (!splitProps)
+            return contentIndexes;
+        if (typeof splitProps.left === "number")
+            contentIndexes.push(splitProps.left);
+        else {
+            contentIndexes = contentIndexes.concat(this.getHorizontalSplitContentIndexes(splitProps.left.horizontalSplit));
+            contentIndexes = contentIndexes.concat(this.getVerticalSplitContentIndexes(splitProps.left.verticalSplit));
+        }
+        if (typeof splitProps.right === "number")
+            contentIndexes.push(splitProps.right);
+        else {
+            contentIndexes = contentIndexes.concat(this.getHorizontalSplitContentIndexes(splitProps.right.horizontalSplit));
+            contentIndexes = contentIndexes.concat(this.getVerticalSplitContentIndexes(splitProps.right.verticalSplit));
+        }
+        return contentIndexes;
+    }
+    /** @internal */
+    static createSplit(fragmentDef) {
+        if (fragmentDef.horizontalSplit) {
+            return new HorizontalSplit(fragmentDef.horizontalSplit);
+        }
+        else if (fragmentDef.verticalSplit) {
+            return new VerticalSplit(fragmentDef.verticalSplit);
+        }
+        return undefined;
+    }
+}
+/** Content Layout Activated Event class.
+ * @public
+ */
+export class ContentLayoutActivatedEvent extends UiEvent {
+}
+/** Content Layout React component.
+ * @public
+ */
+export class ContentLayout extends React.Component {
+    constructor(props) {
+        super(props);
+        this._handleContentLayoutActivated = (args) => {
+            const contentLayoutDef = args.contentLayout;
+            const contentGroup = args.contentGroup;
+            const contentNodes = contentGroup.getContentNodes();
+            const contentContainer = contentLayoutDef.fillLayoutContainer(contentNodes, true);
+            this.setState({
+                contentLayoutDef: args.contentLayout,
+                contentContainer,
+                contentGroupId: contentGroup.groupId,
+            });
+        };
+        this._onMouseDown = (_event) => {
+            ContentViewManager.setMouseDown(true);
+        };
+        this._onMouseUp = (_event) => {
+            ContentViewManager.setMouseDown(false);
+        };
+        const contentLayoutDef = this.props.contentLayout;
+        const contentGroup = this.props.contentGroup;
+        const contentNodes = contentGroup.getContentNodes();
+        const contentContainer = contentLayoutDef.fillLayoutContainer(contentNodes, true);
+        this.state = {
+            contentLayoutDef: this.props.contentLayout,
+            contentContainer,
+            contentGroupId: this.props.contentGroup.groupId,
+        };
+    }
+    componentDidMount() {
+        FrontstageManager.onContentLayoutActivatedEvent.addListener(this._handleContentLayoutActivated);
+    }
+    componentWillUnmount() {
+        FrontstageManager.onContentLayoutActivatedEvent.removeListener(this._handleContentLayoutActivated);
+    }
+    render() {
+        if (this.state.contentContainer) {
+            return (React.createElement("div", { id: "uifw-contentlayout-div", className: this.props.className, style: this.props.style, key: `${this.state.contentGroupId}-${this.state.contentLayoutDef.id}`, onMouseDown: this._onMouseDown, onMouseUp: this._onMouseUp, role: "presentation" }, this.state.contentContainer));
+        }
+        return null;
+    }
+}
 //# sourceMappingURL=ContentLayout.js.map