@itwin/appui-react 3.0.0-dev.100

package/lib/cjs/appui-react/content/ContentGroup.js

@@ -0,0 +1,177 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentGroup = exports.ContentGroupProvider = void 0;
+const core_bentley_1 = require("@itwin/core-bentley");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const ConfigurableUiControl_1 = require("../configurableui/ConfigurableUiControl");
+const ConfigurableUiManager_1 = require("../configurableui/ConfigurableUiManager");
+const UiFramework_1 = require("../UiFramework");
+/** Abstract class that can be implemented and specified by frontstage to dynamically construct
+ * content group just prior to activating the frontstage.
+ * @public
+ */
+class ContentGroupProvider {
+    /** Allow provider to update any data stored in ContentGroupProps. Typically this may
+     * be to remove applicationData entries.
+     */
+    prepareToSaveProps(contentGroupProps) {
+        return contentGroupProps;
+    }
+    /** Allow provider to update any stored ContentGroupProps be it is to be used to create ContentGroup and layouts.
+     * Typically this may be to add applicationData to content entries.
+     */
+    applyUpdatesToSavedProps(contentGroupProps) {
+        return contentGroupProps;
+    }
+    /** Allow provider to save any content group data before the stage deactivated. */
+    async onFrontstageDeactivated() { }
+}
+exports.ContentGroupProvider = ContentGroupProvider;
+/** ContentGroup class. Content Groups define content displayed in content views that are laid out using a [[ContentLayout]].
+ * @public
+ */
+class ContentGroup {
+    constructor(contentGroupProps) {
+        this._contentControls = new Map();
+        this._contentSetMap = new Map();
+        this.layout = { ...contentGroupProps.layout };
+        this.propsId = contentGroupProps.id;
+        // ensure we have a unique groupId for each instance of a content group - this will be used to generate a key in the React controls
+        this.groupId = `[${contentGroupProps.id}-${ContentGroup._sId++}]`;
+        this.contentPropsList = contentGroupProps.contents;
+    }
+    get id() {
+        return this.groupId;
+    }
+    /** Gets a [[ContentControl]] from the Content Group based on its [[ContentProps]]. */
+    getContentControl(contentProps, _index) {
+        // ensure we have a unique control Id for each instance of a content control - this will be used as a key for the React control - see `ContentControl.getKeyedReactNode`
+        const id = `${contentProps.id}::${this.groupId}`;
+        let contentControl;
+        if (!this._contentControls.get(contentProps.id)) {
+            let usedClassId = "";
+            if (typeof contentProps.classId === "string") {
+                if (!this._contentControls.get(contentProps.id) && ConfigurableUiManager_1.ConfigurableUiManager.isControlRegistered(contentProps.classId)) {
+                    contentControl = ConfigurableUiManager_1.ConfigurableUiManager.createControl(contentProps.classId, id, contentProps.applicationData, contentProps.id);
+                    usedClassId = contentProps.classId;
+                }
+            }
+            else {
+                const info = new ConfigurableUiControl_1.ConfigurableCreateInfo(contentProps.classId.name, id, contentProps.id);
+                contentControl = new contentProps.classId(info, contentProps.applicationData);
+                usedClassId = contentProps.classId.name;
+            }
+            if (contentControl) {
+                if (contentControl.getType() !== ConfigurableUiControl_1.ConfigurableUiControlType.Content && contentControl.getType() !== ConfigurableUiControl_1.ConfigurableUiControlType.Viewport) {
+                    throw new appui_abstract_1.UiError(UiFramework_1.UiFramework.loggerCategory(this), `getContentControl error: '${usedClassId}' is NOT a ContentControl or ViewportContentControl`);
+                }
+                contentControl.initialize();
+                this._contentControls.set(contentProps.id, contentControl);
+            }
+        }
+        return this._contentControls.get(contentProps.id);
+    }
+    /** Gets a [[ContentControl]] from the Content Group with a given ID. */
+    getContentControlById(id) {
+        return this._contentControls.get(id);
+    }
+    /** Gets the React nodes representing the Content Views in this Content Group. */
+    getContentNodes() {
+        const contentNodes = new Array();
+        this._contentSetMap.clear();
+        this.contentPropsList.forEach((contentProps, index) => {
+            const control = this.getContentControl(contentProps, index);
+            if (control) {
+                contentNodes.push(control.reactNode);
+                this._contentSetMap.set(control.controlId, control);
+            }
+        });
+        return contentNodes;
+    }
+    /** Gets the [[ContentControl]] associated with a given React node representing a Content View. */
+    getControlFromElement(node) {
+        if (this._contentSetMap.size === 0)
+            this.getContentNodes();
+        if (node && node.key) {
+            const key = node.key;
+            // key has format `${contentProps.id}::${this.groupId}` which is stored as unique id
+            const controlId = key.split("::", 1)[0];
+            return this._contentSetMap.get(controlId);
+        }
+        core_bentley_1.Logger.logError(UiFramework_1.UiFramework.loggerCategory(this), `getControlFromElement: no control found for element`);
+        return undefined;
+    }
+    /** Refreshes the React nodes representing the Content Views in this Content Group.. */
+    refreshContentNodes() {
+        this._contentSetMap.clear();
+    }
+    /** Gets an array of the content controls representing the Content Views. */
+    getContentControls() {
+        const contentControls = new Array();
+        this.contentPropsList.forEach((contentProps, index) => {
+            const control = this.getContentControl(contentProps, index);
+            if (control) {
+                contentControls.push(control);
+            }
+        });
+        return contentControls;
+    }
+    /** Called when Frontstage is deactivated. */
+    onFrontstageDeactivated() {
+        this.clearContentControls();
+    }
+    /** Called when Frontstage is ready. */
+    onFrontstageReady() { }
+    /** Clears the map of content controls. */
+    clearContentControls() {
+        this._contentControls.clear();
+    }
+    /** Creates [[ContentGroupProps]] for JSON purposes
+     * @public
+     */
+    toJSON(contentCallback) {
+        const contentGroupProps = {
+            id: this.propsId,
+            layout: this.layout,
+            contents: this.contentPropsList,
+        };
+        contentGroupProps.contents.forEach((content, index) => {
+            if (typeof content.classId !== "string") {
+                const classId = ConfigurableUiManager_1.ConfigurableUiManager.getConstructorClassId(content.classId);
+                if (classId !== undefined)
+                    content.classId = classId;
+                else
+                    throw new appui_abstract_1.UiError(UiFramework_1.UiFramework.loggerCategory(this), `toJSON: ContentControl at index ${index} is NOT registered with a string id`);
+                if (contentCallback)
+                    contentCallback(content);
+            }
+        });
+        return contentGroupProps;
+    }
+    /** Gets Viewports from Viewport Content Controls
+     * @internal
+     */
+    getViewports() {
+        const contentControls = this.getContentControls();
+        const viewports = new Array();
+        contentControls.forEach((control) => {
+            if (control.isViewport && control.viewport) {
+                viewports.push(control.viewport);
+            }
+            else {
+                viewports.push(undefined);
+            }
+        });
+        return viewports;
+    }
+}
+exports.ContentGroup = ContentGroup;
+ContentGroup._sId = 0;
+//# sourceMappingURL=ContentGroup.js.map

package/lib/cjs/appui-react/content/ContentGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentGroup.js","sourceRoot":"","sources":["../../../../src/appui-react/content/ContentGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module ContentView\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { Logger } from \"@itwin/core-bentley\";\r\nimport { ScreenViewport } from \"@itwin/core-frontend\";\r\nimport { ContentLayoutProps, UiError } from \"@itwin/appui-abstract\";\r\nimport { ConfigurableCreateInfo, ConfigurableUiControlConstructor, ConfigurableUiControlType } from \"../configurableui/ConfigurableUiControl\";\r\nimport { ConfigurableUiManager } from \"../configurableui/ConfigurableUiManager\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { ContentControl } from \"./ContentControl\";\r\nimport { FrontstageProps } from \"../frontstage/Frontstage\";\r\n\r\n/** Properties for content displayed in a content view\r\n * @public\r\n */\r\nexport interface ContentProps {\r\n  /** A unique id for the Content View within the group */\r\n  id: string;\r\n  /** The class name or [[ConfigurableUiControlConstructor]] of the content control */\r\n  classId: string | ConfigurableUiControlConstructor;\r\n  /** Optional application data passed down to the Content View */\r\n  applicationData?: any;\r\n}\r\n\r\n/** Properties for a [[ContentGroup]]\r\n * @public\r\n */\r\nexport interface ContentGroupProps {\r\n  /** An optional id for the [[ContentGroup]] */\r\n  id: string;\r\n  /** Content Layout Id or complete set of [[ContentLayoutProps]]  */\r\n  layout: ContentLayoutProps;\r\n  /** A collection of [[ContentProps]], one for each content view */\r\n  contents: ContentProps[];\r\n}\r\n\r\n/** Abstract class that can be implemented and specified by frontstage to dynamically construct\r\n * content group just prior to activating the frontstage.\r\n * @public\r\n */\r\nexport abstract class ContentGroupProvider {\r\n  abstract provideContentGroup(props: FrontstageProps): Promise<ContentGroup>;\r\n\r\n  /** Allow provider to update any data stored in ContentGroupProps. Typically this may\r\n   * be to remove applicationData entries.\r\n   */\r\n  public prepareToSaveProps(contentGroupProps: ContentGroupProps) {\r\n    return contentGroupProps;\r\n  }\r\n\r\n  /** Allow provider to update any stored ContentGroupProps be it is to be used to create ContentGroup and layouts.\r\n   * Typically this may be to add applicationData to content entries.\r\n   */\r\n  public applyUpdatesToSavedProps(contentGroupProps: ContentGroupProps) {\r\n    return contentGroupProps;\r\n  }\r\n\r\n  /** Allow provider to save any content group data before the stage deactivated. */\r\n  public async onFrontstageDeactivated() { }\r\n}\r\n\r\n/** Callback to process content properties during toJSON method\r\n * @public\r\n */\r\nexport type ContentCallback = (content: ContentProps) => void;\r\n\r\n/** ContentGroup class. Content Groups define content displayed in content views that are laid out using a [[ContentLayout]].\r\n * @public\r\n */\r\nexport class ContentGroup {\r\n  private static _sId = 0;\r\n  public groupId: string;\r\n  public propsId: string;\r\n  public layout: ContentLayoutProps;\r\n  public contentPropsList: ContentProps[];\r\n  private _contentControls = new Map<string, ContentControl>();\r\n  private _contentSetMap = new Map<string, ContentControl>();\r\n\r\n  public get id() {\r\n    return this.groupId;\r\n  }\r\n\r\n  constructor(contentGroupProps: ContentGroupProps) {\r\n    this.layout = { ...contentGroupProps.layout };\r\n    this.propsId = contentGroupProps.id;\r\n    // ensure we have a unique groupId for each instance of a content group - this will be used to generate a key in the React controls\r\n    this.groupId = `[${contentGroupProps.id}-${ContentGroup._sId++}]`;\r\n    this.contentPropsList = contentGroupProps.contents;\r\n  }\r\n\r\n  /** Gets a [[ContentControl]] from the Content Group based on its [[ContentProps]]. */\r\n  public getContentControl(contentProps: ContentProps, _index: number): ContentControl | undefined {\r\n    // ensure we have a unique control Id for each instance of a content control - this will be used as a key for the React control - see `ContentControl.getKeyedReactNode`\r\n    const id = `${contentProps.id}::${this.groupId}`;\r\n    let contentControl: ContentControl | undefined;\r\n\r\n    if (!this._contentControls.get(contentProps.id)) {\r\n      let usedClassId: string = \"\";\r\n\r\n      if (typeof contentProps.classId === \"string\") {\r\n        if (!this._contentControls.get(contentProps.id) && ConfigurableUiManager.isControlRegistered(contentProps.classId)) {\r\n          contentControl = ConfigurableUiManager.createControl(contentProps.classId, id, contentProps.applicationData, contentProps.id) as ContentControl;\r\n          usedClassId = contentProps.classId;\r\n        }\r\n      } else {\r\n        const info = new ConfigurableCreateInfo(contentProps.classId.name, id, contentProps.id);\r\n        contentControl = new contentProps.classId(info, contentProps.applicationData) as ContentControl;\r\n        usedClassId = contentProps.classId.name;\r\n      }\r\n\r\n      if (contentControl) {\r\n        if (contentControl.getType() !== ConfigurableUiControlType.Content && contentControl.getType() !== ConfigurableUiControlType.Viewport) {\r\n          throw new UiError(UiFramework.loggerCategory(this), `getContentControl error: '${usedClassId}' is NOT a ContentControl or ViewportContentControl`);\r\n        }\r\n        contentControl.initialize();\r\n        this._contentControls.set(contentProps.id, contentControl);\r\n      }\r\n    }\r\n\r\n    return this._contentControls.get(contentProps.id);\r\n  }\r\n\r\n  /** Gets a [[ContentControl]] from the Content Group with a given ID. */\r\n  public getContentControlById(id: string): ContentControl | undefined {\r\n    return this._contentControls.get(id);\r\n  }\r\n\r\n  /** Gets the React nodes representing the Content Views in this Content Group. */\r\n  public getContentNodes(): React.ReactNode[] {\r\n    const contentNodes: React.ReactNode[] = new Array<React.ReactNode>();\r\n\r\n    this._contentSetMap.clear();\r\n\r\n    this.contentPropsList.forEach((contentProps: ContentProps, index: number) => {\r\n      const control = this.getContentControl(contentProps, index);\r\n      if (control) {\r\n        contentNodes.push(control.reactNode);\r\n        this._contentSetMap.set(control.controlId, control);\r\n      }\r\n    });\r\n\r\n    return contentNodes;\r\n  }\r\n\r\n  /** Gets the [[ContentControl]] associated with a given React node representing a Content View. */\r\n  public getControlFromElement(node: React.ReactNode): ContentControl | undefined {\r\n    if (this._contentSetMap.size === 0)\r\n      this.getContentNodes();\r\n\r\n    if (node && (node as React.ReactElement<any>).key) {\r\n      const key = ((node as React.ReactElement<any>).key as string);\r\n      // key has format `${contentProps.id}::${this.groupId}` which is stored as unique id\r\n      const controlId = key.split(\"::\", 1)[0];\r\n      return this._contentSetMap.get(controlId);\r\n    }\r\n\r\n    Logger.logError(UiFramework.loggerCategory(this), `getControlFromElement: no control found for element`);\r\n    return undefined;\r\n  }\r\n\r\n  /** Refreshes the React nodes representing the Content Views in this Content Group.. */\r\n  public refreshContentNodes() {\r\n    this._contentSetMap.clear();\r\n  }\r\n\r\n  /** Gets an array of the content controls representing the Content Views. */\r\n  public getContentControls(): ContentControl[] {\r\n    const contentControls: ContentControl[] = new Array<ContentControl>();\r\n\r\n    this.contentPropsList.forEach((contentProps: ContentProps, index: number) => {\r\n      const control = this.getContentControl(contentProps, index);\r\n      if (control) {\r\n        contentControls.push(control);\r\n      }\r\n    });\r\n\r\n    return contentControls;\r\n  }\r\n\r\n  /** Called when Frontstage is deactivated. */\r\n  public onFrontstageDeactivated(): void {\r\n    this.clearContentControls();\r\n  }\r\n\r\n  /** Called when Frontstage is ready. */\r\n  public onFrontstageReady(): void { }\r\n\r\n  /** Clears the map of content controls. */\r\n  public clearContentControls(): void {\r\n    this._contentControls.clear();\r\n  }\r\n\r\n  /** Creates [[ContentGroupProps]] for JSON purposes\r\n   * @public\r\n   */\r\n  public toJSON(contentCallback?: ContentCallback): ContentGroupProps {\r\n    const contentGroupProps: ContentGroupProps = {\r\n      id: this.propsId,\r\n      layout: this.layout,\r\n      contents: this.contentPropsList,\r\n    };\r\n\r\n    contentGroupProps.contents.forEach((content: ContentProps, index: number) => {\r\n      if (typeof content.classId !== \"string\") {\r\n        const classId = ConfigurableUiManager.getConstructorClassId(content.classId);\r\n        if (classId !== undefined)\r\n          content.classId = classId;\r\n        else\r\n          throw new UiError(UiFramework.loggerCategory(this), `toJSON: ContentControl at index ${index} is NOT registered with a string id`);\r\n\r\n        if (contentCallback)\r\n          contentCallback(content);\r\n      }\r\n    });\r\n\r\n    return contentGroupProps;\r\n  }\r\n\r\n  /** Gets Viewports from Viewport Content Controls\r\n   * @internal\r\n   */\r\n  public getViewports(): Array<ScreenViewport | undefined> {\r\n    const contentControls = this.getContentControls();\r\n    const viewports = new Array<ScreenViewport | undefined>();\r\n\r\n    contentControls.forEach((control: ContentControl) => {\r\n      if (control.isViewport && control.viewport) {\r\n        viewports.push(control.viewport);\r\n      } else {\r\n        viewports.push(undefined);\r\n      }\r\n    });\r\n\r\n    return viewports;\r\n  }\r\n}\r\n"]}

package/lib/cjs/appui-react/content/ContentLayout.d.ts

@@ -0,0 +1,84 @@
+/** @packageDocumentation
+ * @module ContentView
+ */
+import "./ContentLayout.scss";
+import * as React from "react";
+import { CommonProps, UiEvent } from "@itwin/core-react";
+import { ContentGroup } from "./ContentGroup";
+import { ContentLayoutProps, LayoutFragmentProps } from "@itwin/appui-abstract";
+/** Common interface for HorizontalSplit and VerticalSplit
+ */
+interface LayoutSplit {
+    createContentContainer(contentNodes: React.ReactNode[], resizable: boolean): React.ReactNode;
+    isLocked: boolean;
+}
+/** Content Layout Definition class.
+ * @public
+ */
+export declare class ContentLayoutDef {
+    private _layoutProps;
+    private _rootSplit?;
+    /** ID for this Content Layout */
+    id: string;
+    /** Description of the layout. */
+    description: string;
+    constructor(layoutProps: ContentLayoutProps);
+    get rootSplit(): LayoutSplit | undefined;
+    /** Creates [[ContentLayoutProps]] for JSON purposes
+     * @public
+     */
+    toJSON(): ContentLayoutProps;
+    /** Fill a layout container with React nodes for each content view
+     */
+    fillLayoutContainer(contentNodes: React.ReactNode[], resizable: boolean): React.ReactNode | undefined;
+    /** Gets the indexes of content views used in this Content Layout
+     */
+    getUsedContentIndexes(): number[];
+    private getHorizontalSplitContentIndexes;
+    private getVerticalSplitContentIndexes;
+    /** @internal */
+    static createSplit(fragmentDef: LayoutFragmentProps): LayoutSplit | undefined;
+}
+/** Content Layout Activated Event Args class.
+ * @public
+ */
+export interface ContentLayoutActivatedEventArgs {
+    contentLayout: ContentLayoutDef;
+    contentGroup: ContentGroup;
+}
+/** Content Layout Activated Event class.
+ * @public
+ */
+export declare class ContentLayoutActivatedEvent extends UiEvent<ContentLayoutActivatedEventArgs> {
+}
+/** State for the [[ContentLayout]].
+ */
+interface ContentLayoutState {
+    contentLayoutDef: ContentLayoutDef;
+    contentContainer?: React.ReactNode;
+    contentGroupId?: string;
+}
+/** Properties for the [[ContentLayout]] React component.
+ * @public
+ */
+export interface ContentLayoutComponentProps extends CommonProps {
+    contentLayout: ContentLayoutDef;
+    contentGroup: ContentGroup;
+    isInFooterMode: boolean;
+}
+/** Content Layout React component.
+ * @public
+ */
+export declare class ContentLayout extends React.Component<ContentLayoutComponentProps, ContentLayoutState> {
+    /** @internal */
+    readonly state: Readonly<ContentLayoutState>;
+    constructor(props: ContentLayoutComponentProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private _handleContentLayoutActivated;
+    render(): React.ReactNode;
+    private _onMouseDown;
+    private _onMouseUp;
+}
+export {};
+//# sourceMappingURL=ContentLayout.d.ts.map

package/lib/cjs/appui-react/content/ContentLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentLayout.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/content/ContentLayout.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAIH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAe,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAGtE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAA8E,MAAM,uBAAuB,CAAC;AAsK5J;GACG;AACH,UAAU,WAAW;IACnB,sBAAsB,CAAC,YAAY,EAAE,KAAK,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC;IAC7F,QAAQ,EAAE,OAAO,CAAC;CACnB;AA6JD;;GAEG;AACH,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,UAAU,CAAC,CAAc;IAEjC,iCAAiC;IAC1B,EAAE,EAAE,MAAM,CAAM;IACvB,iCAAiC;IAC1B,WAAW,EAAE,MAAM,CAAM;gBACpB,WAAW,EAAE,kBAAkB;IAO3C,IAAW,SAAS,IAAI,WAAW,GAAG,SAAS,CAA4B;IAE3E;;OAEG;IACI,MAAM,IAAI,kBAAkB;IAEnC;OACG;IACI,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,OAAO,GAAG,KAAK,CAAC,SAAS,GAAG,SAAS;IAa5G;OACG;IACI,qBAAqB,IAAI,MAAM,EAAE;IAexC,OAAO,CAAC,gCAAgC;IAuBxC,OAAO,CAAC,8BAA8B;IAuBtC,gBAAgB;WACF,WAAW,CAAC,WAAW,EAAE,mBAAmB,GAAG,WAAW,GAAG,SAAS;CAUrF;AAED;;GAEG;AACH,MAAM,WAAW,+BAA+B;IAC9C,aAAa,EAAE,gBAAgB,CAAC;IAChC,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED;;GAEG;AACH,qBAAa,2BAA4B,SAAQ,OAAO,CAAC,+BAA+B,CAAC;CAAI;AAE7F;GACG;AACH,UAAU,kBAAkB;IAC1B,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,2BAA4B,SAAQ,WAAW;IAC9D,aAAa,EAAE,gBAAgB,CAAC;IAChC,YAAY,EAAE,YAAY,CAAC;IAC3B,cAAc,EAAE,OAAO,CAAC;CACzB;AAED;;GAEG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,SAAS,CAAC,2BAA2B,EAAE,kBAAkB,CAAC;IAEjG,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAAC;gBAEjD,KAAK,EAAE,2BAA2B;IAgB9B,iBAAiB;IAIjB,oBAAoB;IAIpC,OAAO,CAAC,6BAA6B,CAYnC;IAEc,MAAM,IAAI,KAAK,CAAC,SAAS;IAezC,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,UAAU,CAEhB;CACH"}

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

@@ -0,0 +1,350 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentLayout = exports.ContentLayoutActivatedEvent = exports.ContentLayoutDef = void 0;
+// cSpell:ignore contentlayout
+require("./ContentLayout.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const react_split_pane_1 = require("react-split-pane");
+const core_react_1 = require("@itwin/core-react");
+const FrontstageManager_1 = require("../frontstage/FrontstageManager");
+const UiShowHideManager_1 = require("../utils/UiShowHideManager");
+const ContentViewManager_1 = require("./ContentViewManager");
+/** ContentWrapper React component.
+ */
+class ContentWrapper extends React.Component {
+    constructor(props) {
+        super(props);
+        this._handleMouseDown = (_event) => {
+            // event.preventDefault();
+            ContentViewManager_1.ContentViewManager.setActiveContent(this.state.content);
+        };
+        this._handleActiveContentChanged = (args) => {
+            const isActive = this.state.content === args.activeContent;
+            if (this.state.isActive !== isActive) {
+                this.setState({ isActive });
+            }
+        };
+        this.state = {
+            content: this.props.content,
+            isActive: this.props.content === ContentViewManager_1.ContentViewManager.getActiveContent(),
+        };
+    }
+    render() {
+        const overlayClassName = (0, classnames_1.default)("uifw-contentlayout-overlay-div", this.state.isActive ? "uifw-contentlayout-overlay-active" : "uifw-contentlayout-overlay-inactive");
+        return (React.createElement("div", { className: (0, classnames_1.default)("uifw-contentlayout-wrapper", this.props.className), style: this.props.style, onMouseDown: this._handleMouseDown, onMouseMove: UiShowHideManager_1.UiShowHideManager.handleContentMouseMove, role: "presentation" },
+            this.state.content,
+            React.createElement("div", { className: overlayClassName })));
+    }
+    componentDidMount() {
+        ContentViewManager_1.ContentViewManager.onActiveContentChangedEvent.addListener(this._handleActiveContentChanged);
+    }
+    componentWillUnmount() {
+        ContentViewManager_1.ContentViewManager.onActiveContentChangedEvent.removeListener(this._handleActiveContentChanged);
+    }
+    // istanbul ignore next
+    componentDidUpdate(prevProps, _prevState) {
+        if (this.props.content !== prevProps.content) {
+            this.setState((_, props) => ({ content: props.content, isActive: props.content === ContentViewManager_1.ContentViewManager.getActiveContent() }));
+        }
+    }
+}
+/** 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 === core_react_1.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 === core_react_1.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: (0, classnames_1.default)("uifw-contentlayout-full-size", this.props.className), style: this.props.style },
+            React.createElement(react_split_pane_1.default, { 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: (0, classnames_1.default)("uifw-contentlayout-full-size", this.props.className), style: this.props.style, "data-testid": "single-content-container", onMouseMove: UiShowHideManager_1.UiShowHideManager.handleContentMouseMove }, this.props.content));
+    }
+}
+/** 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: core_react_1.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: core_react_1.Orientation.Vertical, percentage: this.defaultPercentage, resizable: resizable, minSizeTopLeft: this._minSizeLeft, minSizeBottomRight: this._minSizeRight, splitterStateId: this.stateId, onSplitterChange: this._handleSplitterChange }));
+    }
+}
+/** Content Layout Definition class.
+ * @public
+ */
+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;
+    }
+}
+exports.ContentLayoutDef = ContentLayoutDef;
+/** Content Layout Activated Event class.
+ * @public
+ */
+class ContentLayoutActivatedEvent extends core_react_1.UiEvent {
+}
+exports.ContentLayoutActivatedEvent = ContentLayoutActivatedEvent;
+/** Content Layout React component.
+ * @public
+ */
+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_1.ContentViewManager.setMouseDown(true);
+        };
+        this._onMouseUp = (_event) => {
+            ContentViewManager_1.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_1.FrontstageManager.onContentLayoutActivatedEvent.addListener(this._handleContentLayoutActivated);
+    }
+    componentWillUnmount() {
+        FrontstageManager_1.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;
+    }
+}
+exports.ContentLayout = ContentLayout;
+//# sourceMappingURL=ContentLayout.js.map