@itwin/tree-widget-react 0.10.0 → 1.0.0-dev.0

package/lib/esm/components/trees/models-tree/ModelsTree.js

@@ -1,23 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 import "../VisibilityTreeBase.scss";
-import * as React from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { ControlledTree, SelectionMode, useTreeModel } from "@itwin/components-react";
-import { useDisposable, useOptionalDisposable } from "@itwin/core-react";
-import { isPresentationTreeNodeItem, usePresentationTreeNodeLoader, } from "@itwin/presentation-components";
+import { useDisposable } from "@itwin/core-react";
+import { isPresentationTreeNodeItem, usePresentationTreeNodeLoader } from "@itwin/presentation-components";
 import { TreeWidget } from "../../../TreeWidget";
 import { ClassGroupingOption } from "../Common";
 import { VisibilityTreeEventHandler } from "../VisibilityTreeEventHandler";
-import { useVisibilityTreeFiltering, useVisibilityTreeRenderer, VisibilityTreeNoFilteredData } from "../VisibilityTreeRenderer";
+import { createVisibilityTreeRenderer, useVisibilityTreeFiltering, VisibilityTreeNoFilteredData } from "../VisibilityTreeRenderer";
 import { ModelsVisibilityHandler, SubjectModelIdsCache } from "./ModelsVisibilityHandler";
+import { createRuleset, createSearchRuleset } from "./Utils";
 const PAGING_SIZE = 20;
-/** @internal */
-export const RULESET_MODELS = require("./Hierarchy.json"); // eslint-disable-line @typescript-eslint/no-var-requires
-/** @internal */
-export const RULESET_MODELS_GROUPED_BY_CLASS = require("./Hierarchy.GroupedByClass.json"); // eslint-disable-line @typescript-eslint/no-var-requires
-const RULESET_MODELS_SEARCH = require("./ModelsTreeSearch.json"); // eslint-disable-line @typescript-eslint/no-var-requires
 /**
  * A tree component that shows a subject - model - category - element
  * hierarchy along with checkboxes that represent and allow changing
@@ -30,32 +27,34 @@ export function ModelsTree(props) {
     const filterApplied = filteredNodeLoader !== nodeLoader;
     const { activeView, modelsVisibilityHandler, selectionPredicate } = props;
     const visibilityHandler = useVisibilityHandler(nodeLoader.dataProvider.rulesetId, props.iModel, activeView, modelsVisibilityHandler, getFilteredDataProvider(filteredNodeLoader.dataProvider), props.enableHierarchyAutoUpdate);
-    const eventHandler = useDisposable(React.useCallback(() => new VisibilityTreeEventHandler({
+    const eventHandler = useDisposable(useCallback(() => new VisibilityTreeEventHandler({
         nodeLoader: filteredNodeLoader,
         visibilityHandler,
-        collapsedChildrenDisposalEnabled: true,
         selectionPredicate: (node) => !selectionPredicate || !isPresentationTreeNodeItem(node) ? true : selectionPredicate(node.key, ModelsVisibilityHandler.getNodeType(node)),
     }), [filteredNodeLoader, visibilityHandler, selectionPredicate]));
     const treeModel = useTreeModel(filteredNodeLoader.modelSource);
-    const treeRenderer = useVisibilityTreeRenderer(true, false);
-    const overlay = isFiltering ? React.createElement("div", { className: "filteredTreeOverlay" }) : undefined;
+    const treeRenderer = createVisibilityTreeRenderer({ iconsEnabled: true, descriptionEnabled: false, levelOffset: 10, disableRootNodeCollapse: true });
+    const overlay = isFiltering ? _jsx("div", { className: "filteredTreeOverlay" }) : undefined;
     // istanbul ignore next
-    const noFilteredDataRenderer = React.useCallback(() => {
-        return React.createElement(VisibilityTreeNoFilteredData, { title: TreeWidget.translate("modelTree.noModelFound"), message: TreeWidget.translate("modelTree.noMatchingModelNames") });
+    const noFilteredDataRenderer = useCallback(() => {
+        return _jsx(VisibilityTreeNoFilteredData, { title: TreeWidget.translate("modelTree.noModelFound"), message: TreeWidget.translate("modelTree.noMatchingModelNames") });
     }, []);
-    return (React.createElement("div", { className: "tree-widget-visibility-tree-base", ref: props.rootElementRef },
-        React.createElement(ControlledTree, { nodeLoader: filteredNodeLoader, model: treeModel, selectionMode: props.selectionMode || SelectionMode.None, eventsHandler: eventHandler, treeRenderer: treeRenderer, nodeHighlightingProps: nodeHighlightingProps, noDataRenderer: filterApplied ? noFilteredDataRenderer : undefined, onItemsRendered: onItemsRendered, width: props.width, height: props.height }),
-        overlay));
+    return (_jsxs("div", { className: "tree-widget-visibility-tree-base", ref: props.rootElementRef, children: [_jsx(ControlledTree, { nodeLoader: filteredNodeLoader, model: treeModel, selectionMode: props.selectionMode || SelectionMode.None, eventsHandler: eventHandler, treeRenderer: treeRenderer, nodeHighlightingProps: nodeHighlightingProps, noDataRenderer: filterApplied ? noFilteredDataRenderer : undefined, onItemsRendered: onItemsRendered, width: props.width, height: props.height }), overlay] }));
 }
 function useModelsTreeNodeLoader(props) {
     const rulesets = {
-        general: (!props.enableElementsClassGrouping) ? RULESET_MODELS : /* istanbul ignore next */ RULESET_MODELS_GROUPED_BY_CLASS,
-        search: RULESET_MODELS_SEARCH,
+        general: useMemo(() => createRuleset({
+            enableElementsClassGrouping: !!props.hierarchyConfig?.enableElementsClassGrouping,
+            elementClassSpecification: props.hierarchyConfig?.elementClassSpecification,
+        }), [props.hierarchyConfig?.enableElementsClassGrouping, props.hierarchyConfig?.elementClassSpecification]),
+        search: useMemo(() => createSearchRuleset({
+            elementClassSpecification: props.hierarchyConfig?.elementClassSpecification,
+        }), [props.hierarchyConfig?.elementClassSpecification]),
     };
     const { nodeLoader, onItemsRendered } = usePresentationTreeNodeLoader({
         imodel: props.iModel,
         ruleset: rulesets.general,
-        appendChildrenCountForGroupingNodes: (props.enableElementsClassGrouping === ClassGroupingOption.YesWithCounts),
+        appendChildrenCountForGroupingNodes: (props.hierarchyConfig?.enableElementsClassGrouping === ClassGroupingOption.YesWithCounts),
         pagingSize: PAGING_SIZE,
         enableHierarchyAutoUpdate: props.enableHierarchyAutoUpdate,
     });
@@ -73,22 +72,14 @@ function useModelsTreeNodeLoader(props) {
     };
 }
 function useVisibilityHandler(rulesetId, iModel, activeView, visibilityHandler, filteredDataProvider, hierarchyAutoUpdateEnabled) {
-    const subjectModelIdsCache = React.useMemo(() => new SubjectModelIdsCache(iModel), [iModel]);
-    const defaultVisibilityHandler = useOptionalDisposable(React.useCallback(() => {
-        if (activeView)
-            return createVisibilityHandler(rulesetId, activeView, subjectModelIdsCache, hierarchyAutoUpdateEnabled);
-        return undefined;
-    }, [rulesetId, activeView, subjectModelIdsCache, hierarchyAutoUpdateEnabled]));
+    const subjectModelIdsCache = useMemo(() => new SubjectModelIdsCache(iModel), [iModel]);
+    const defaultVisibilityHandler = useDisposable(useCallback(() => new ModelsVisibilityHandler({ rulesetId, viewport: activeView, hierarchyAutoUpdateEnabled, subjectModelIdsCache }), [rulesetId, activeView, subjectModelIdsCache, hierarchyAutoUpdateEnabled]));
     const handler = visibilityHandler ?? defaultVisibilityHandler;
-    React.useEffect(() => {
+    useEffect(() => {
         handler && handler.setFilteredDataProvider(filteredDataProvider);
     }, [handler, filteredDataProvider]);
     return handler;
 }
-const createVisibilityHandler = (rulesetId, activeView, subjectModelIdsCache, hierarchyAutoUpdateEnabled) => {
-    // istanbul ignore next
-    return new ModelsVisibilityHandler({ rulesetId, viewport: activeView, hierarchyAutoUpdateEnabled, subjectModelIdsCache });
-};
 const isFilteredDataProvider = (dataProvider) => {
     const filteredProvider = dataProvider;
     return filteredProvider.nodeMatchesFilter !== undefined && filteredProvider.getActiveMatch !== undefined && filteredProvider.countFilteringResults !== undefined;

package/lib/esm/components/trees/models-tree/ModelsTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModelsTree.js","sourceRoot":"","sources":["../../../../../src/components/trees/models-tree/ModelsTree.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n\nimport \"../VisibilityTreeBase.scss\";\nimport * as React from \"react\";\nimport { ControlledTree, SelectionMode, useTreeModel } from \"@itwin/components-react\";\nimport { IModelConnection, Viewport } from \"@itwin/core-frontend\";\nimport { useDisposable, useOptionalDisposable } from \"@itwin/core-react\";\nimport { Ruleset } from \"@itwin/presentation-common\";\nimport {\n  IFilteredPresentationTreeDataProvider, IPresentationTreeDataProvider, isPresentationTreeNodeItem, usePresentationTreeNodeLoader,\n} from \"@itwin/presentation-components\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { ClassGroupingOption, VisibilityTreeFilterInfo } from \"../Common\";\nimport { VisibilityTreeEventHandler } from \"../VisibilityTreeEventHandler\";\nimport { useVisibilityTreeFiltering, useVisibilityTreeRenderer, VisibilityTreeNoFilteredData } from \"../VisibilityTreeRenderer\";\nimport { ModelsTreeSelectionPredicate, ModelsVisibilityHandler, SubjectModelIdsCache } from \"./ModelsVisibilityHandler\";\n\nconst PAGING_SIZE = 20;\n\n/** @internal */\nexport const RULESET_MODELS: Ruleset = require(\"./Hierarchy.json\"); // eslint-disable-line @typescript-eslint/no-var-requires\n/** @internal */\nexport const RULESET_MODELS_GROUPED_BY_CLASS: Ruleset = require(\"./Hierarchy.GroupedByClass.json\"); // eslint-disable-line @typescript-eslint/no-var-requires\n\nconst RULESET_MODELS_SEARCH: Ruleset = require(\"./ModelsTreeSearch.json\"); // eslint-disable-line @typescript-eslint/no-var-requires\n\n/** Props for [[ModelsTree]] component\n * @public\n */\nexport interface ModelsTreeProps {\n  /**\n   * An IModel to pull data from\n   */\n  iModel: IModelConnection;\n  /** Width of the component */\n  width: number;\n  /** Height of the component */\n  height: number;\n  /**\n   * Selection mode in the tree\n   */\n  selectionMode?: SelectionMode;\n  /**\n   * Predicate which indicates whether node can be selected or no\n   * @alpha\n   */\n  selectionPredicate?: ModelsTreeSelectionPredicate;\n  /**\n   * Active view used to determine and control visibility\n   */\n  activeView?: Viewport;\n  /**\n   * Ref to the root HTML element used by this component\n   */\n  rootElementRef?: React.Ref<HTMLDivElement>;\n  /**\n   * Information for tree filtering.\n   * @alpha\n   */\n  filterInfo?: VisibilityTreeFilterInfo;\n  /**\n   * Callback invoked when tree is filtered.\n   */\n  onFilterApplied?: (filteredDataProvider: IPresentationTreeDataProvider, matchesCount: number) => void;\n  /**\n   * Should the tree group displayed element nodes by class.\n   * @beta\n   */\n  enableElementsClassGrouping?: ClassGroupingOption;\n  /**\n   * Auto-update the hierarchy when data in the iModel changes.\n   * @alpha\n   */\n  enableHierarchyAutoUpdate?: boolean;\n  /**\n   * Custom visibility handler.\n   * @alpha\n   */\n  modelsVisibilityHandler?: ModelsVisibilityHandler;\n}\n\n/**\n * A tree component that shows a subject - model - category - element\n * hierarchy along with checkboxes that represent and allow changing\n * the display of those instances.\n * @public\n */\nexport function ModelsTree(props: ModelsTreeProps) {\n  const { nodeLoader, onItemsRendered } = useModelsTreeNodeLoader(props);\n  const { filteredNodeLoader, isFiltering, nodeHighlightingProps } = useVisibilityTreeFiltering(nodeLoader, props.filterInfo, props.onFilterApplied);\n  const filterApplied = filteredNodeLoader !== nodeLoader;\n\n  const { activeView, modelsVisibilityHandler, selectionPredicate } = props;\n\n  const visibilityHandler = useVisibilityHandler(\n    nodeLoader.dataProvider.rulesetId,\n    props.iModel,\n    activeView,\n    modelsVisibilityHandler,\n    getFilteredDataProvider(filteredNodeLoader.dataProvider),\n    props.enableHierarchyAutoUpdate);\n  const eventHandler = useDisposable(React.useCallback(() => new VisibilityTreeEventHandler({\n    nodeLoader: filteredNodeLoader,\n    visibilityHandler,\n    collapsedChildrenDisposalEnabled: true,\n    selectionPredicate: (node) => !selectionPredicate || !isPresentationTreeNodeItem(node) ? true : selectionPredicate(node.key, ModelsVisibilityHandler.getNodeType(node)),\n  }), [filteredNodeLoader, visibilityHandler, selectionPredicate]));\n\n  const treeModel = useTreeModel(filteredNodeLoader.modelSource);\n  const treeRenderer = useVisibilityTreeRenderer(true, false);\n\n  const overlay = isFiltering ? <div className=\"filteredTreeOverlay\" /> : undefined;\n\n  // istanbul ignore next\n  const noFilteredDataRenderer = React.useCallback(() => {\n    return <VisibilityTreeNoFilteredData\n      title={TreeWidget.translate(\"modelTree.noModelFound\")}\n      message={TreeWidget.translate(\"modelTree.noMatchingModelNames\")}\n    />;\n  }, []);\n\n  return (\n    <div className=\"tree-widget-visibility-tree-base\" ref={props.rootElementRef}>\n      <ControlledTree\n        nodeLoader={filteredNodeLoader}\n        model={treeModel}\n        selectionMode={props.selectionMode || SelectionMode.None}\n        eventsHandler={eventHandler}\n        treeRenderer={treeRenderer}\n        nodeHighlightingProps={nodeHighlightingProps}\n        noDataRenderer={filterApplied ? noFilteredDataRenderer : undefined}\n        onItemsRendered={onItemsRendered}\n        width={props.width}\n        height={props.height}\n      />\n      {overlay}\n    </div>\n  );\n}\n\nfunction useModelsTreeNodeLoader(props: ModelsTreeProps) {\n  const rulesets = {\n    general: (!props.enableElementsClassGrouping) ? RULESET_MODELS : /* istanbul ignore next */ RULESET_MODELS_GROUPED_BY_CLASS,\n    search: RULESET_MODELS_SEARCH,\n  };\n\n  const { nodeLoader, onItemsRendered } = usePresentationTreeNodeLoader({\n    imodel: props.iModel,\n    ruleset: rulesets.general,\n    appendChildrenCountForGroupingNodes: (props.enableElementsClassGrouping === ClassGroupingOption.YesWithCounts),\n    pagingSize: PAGING_SIZE,\n    enableHierarchyAutoUpdate: props.enableHierarchyAutoUpdate,\n  });\n  const { nodeLoader: searchNodeLoader, onItemsRendered: onSearchItemsRendered } = usePresentationTreeNodeLoader({\n    imodel: props.iModel,\n    ruleset: rulesets.search,\n    pagingSize: PAGING_SIZE,\n    enableHierarchyAutoUpdate: props.enableHierarchyAutoUpdate,\n  });\n\n  const activeNodeLoader = props.filterInfo?.filter ? searchNodeLoader : nodeLoader;\n  const activeItemsRenderedCallback = props.filterInfo?.filter ? onSearchItemsRendered : onItemsRendered;\n\n  return {\n    nodeLoader: activeNodeLoader,\n    onItemsRendered: activeItemsRenderedCallback,\n  };\n}\n\nfunction useVisibilityHandler(\n  rulesetId: string,\n  iModel: IModelConnection,\n  activeView?: Viewport,\n  visibilityHandler?: ModelsVisibilityHandler,\n  filteredDataProvider?: IFilteredPresentationTreeDataProvider,\n  hierarchyAutoUpdateEnabled?: boolean,\n) {\n  const subjectModelIdsCache = React.useMemo(() => new SubjectModelIdsCache(iModel), [iModel]);\n  const defaultVisibilityHandler = useOptionalDisposable(React.useCallback(() => {\n    if (activeView)\n      return createVisibilityHandler(rulesetId, activeView, subjectModelIdsCache, hierarchyAutoUpdateEnabled);\n    return undefined;\n  }, [rulesetId, activeView, subjectModelIdsCache, hierarchyAutoUpdateEnabled]));\n\n  const handler = visibilityHandler ?? defaultVisibilityHandler;\n\n  React.useEffect(() => {\n    handler && handler.setFilteredDataProvider(filteredDataProvider);\n  }, [handler, filteredDataProvider]);\n\n  return handler;\n}\n\nconst createVisibilityHandler = (rulesetId: string, activeView: Viewport, subjectModelIdsCache: SubjectModelIdsCache, hierarchyAutoUpdateEnabled?: boolean): ModelsVisibilityHandler | undefined => {\n  // istanbul ignore next\n  return new ModelsVisibilityHandler({ rulesetId, viewport: activeView, hierarchyAutoUpdateEnabled, subjectModelIdsCache });\n};\n\nconst isFilteredDataProvider = (dataProvider: IPresentationTreeDataProvider | IFilteredPresentationTreeDataProvider): dataProvider is IFilteredPresentationTreeDataProvider => {\n  const filteredProvider = dataProvider as IFilteredPresentationTreeDataProvider;\n  return filteredProvider.nodeMatchesFilter !== undefined && filteredProvider.getActiveMatch !== undefined && filteredProvider.countFilteringResults !== undefined;\n};\n\nconst getFilteredDataProvider = (dataProvider: IPresentationTreeDataProvider | IFilteredPresentationTreeDataProvider): IFilteredPresentationTreeDataProvider | undefined => {\n  return isFilteredDataProvider(dataProvider) ? dataProvider : undefined;\n};\n"]}
+{"version":3,"file":"ModelsTree.js","sourceRoot":"","sources":["../../../../../src/components/trees/models-tree/ModelsTree.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n\nimport \"../VisibilityTreeBase.scss\";\nimport { useCallback, useEffect, useMemo } from \"react\";\nimport { ControlledTree, SelectionMode, useTreeModel } from \"@itwin/components-react\";\nimport { useDisposable } from \"@itwin/core-react\";\nimport { isPresentationTreeNodeItem, usePresentationTreeNodeLoader } from \"@itwin/presentation-components\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { ClassGroupingOption } from \"../Common\";\nimport { VisibilityTreeEventHandler } from \"../VisibilityTreeEventHandler\";\nimport { createVisibilityTreeRenderer, useVisibilityTreeFiltering, VisibilityTreeNoFilteredData } from \"../VisibilityTreeRenderer\";\nimport { ModelsVisibilityHandler, SubjectModelIdsCache } from \"./ModelsVisibilityHandler\";\nimport { createRuleset, createSearchRuleset } from \"./Utils\";\n\nimport type { IModelConnection, Viewport } from \"@itwin/core-frontend\";\nimport type { SingleSchemaClassSpecification } from \"@itwin/presentation-common\";\nimport type { IFilteredPresentationTreeDataProvider, IPresentationTreeDataProvider } from \"@itwin/presentation-components\";\nimport type { VisibilityTreeFilterInfo } from \"../Common\";\nimport type { ModelsTreeSelectionPredicate } from \"./ModelsVisibilityHandler\";\n\nconst PAGING_SIZE = 20;\n\n/**\n * Props for configuring the hierarchy in [[ModelsTree]].\n * @public\n */\nexport interface ModelsTreeHierarchyConfiguration {\n  /** Should the tree group displayed element nodes by class. Defaults to `ClassGroupingOption.No`. */\n  enableElementsClassGrouping?: ClassGroupingOption;\n  /**\n   * Defines the `bis.GeometricElement3d` sub-class that should be used to load element nodes.\n   * Defaults to `bis.GeometricElement3d`. It's expected for the given class to derive from it.\n   */\n  elementClassSpecification?: SingleSchemaClassSpecification;\n}\n\n/**\n * Props for [[ModelsTree]] component\n * @public\n */\nexport interface ModelsTreeProps {\n  /**\n   * An IModel to pull data from\n   */\n  iModel: IModelConnection;\n  /** Width of the component */\n  width: number;\n  /** Height of the component */\n  height: number;\n  /**\n   * Selection mode in the tree\n   */\n  selectionMode?: SelectionMode;\n  /**\n   * Predicate which indicates whether node can be selected or no\n   */\n  selectionPredicate?: ModelsTreeSelectionPredicate;\n  /**\n   * Active view used to determine and control visibility\n   */\n  activeView: Viewport;\n  /**\n   * Ref to the root HTML element used by this component\n   */\n  rootElementRef?: React.Ref<HTMLDivElement>;\n  /**\n   * Information for tree filtering.\n   */\n  filterInfo?: VisibilityTreeFilterInfo;\n  /**\n   * Callback invoked when tree is filtered.\n   */\n  onFilterApplied?: (filteredDataProvider: IPresentationTreeDataProvider, matchesCount: number) => void;\n  /**\n   * Configuration options for the hierarchy loaded in the component.\n   */\n  hierarchyConfig?: ModelsTreeHierarchyConfiguration;\n  /**\n   * Auto-update the hierarchy when data in the iModel changes.\n   * @alpha\n   */\n  enableHierarchyAutoUpdate?: boolean;\n  /**\n   * Custom visibility handler.\n   */\n  modelsVisibilityHandler?: ModelsVisibilityHandler;\n}\n\n/**\n * A tree component that shows a subject - model - category - element\n * hierarchy along with checkboxes that represent and allow changing\n * the display of those instances.\n * @public\n */\nexport function ModelsTree(props: ModelsTreeProps) {\n  const { nodeLoader, onItemsRendered } = useModelsTreeNodeLoader(props);\n  const { filteredNodeLoader, isFiltering, nodeHighlightingProps } = useVisibilityTreeFiltering(nodeLoader, props.filterInfo, props.onFilterApplied);\n  const filterApplied = filteredNodeLoader !== nodeLoader;\n\n  const { activeView, modelsVisibilityHandler, selectionPredicate } = props;\n\n  const visibilityHandler = useVisibilityHandler(\n    nodeLoader.dataProvider.rulesetId,\n    props.iModel,\n    activeView,\n    modelsVisibilityHandler,\n    getFilteredDataProvider(filteredNodeLoader.dataProvider),\n    props.enableHierarchyAutoUpdate);\n  const eventHandler = useDisposable(useCallback(() => new VisibilityTreeEventHandler({\n    nodeLoader: filteredNodeLoader,\n    visibilityHandler,\n    selectionPredicate: (node) => !selectionPredicate || !isPresentationTreeNodeItem(node) ? true : selectionPredicate(node.key, ModelsVisibilityHandler.getNodeType(node)),\n  }), [filteredNodeLoader, visibilityHandler, selectionPredicate]));\n\n  const treeModel = useTreeModel(filteredNodeLoader.modelSource);\n  const treeRenderer = createVisibilityTreeRenderer({ iconsEnabled: true, descriptionEnabled: false, levelOffset: 10, disableRootNodeCollapse: true });\n\n  const overlay = isFiltering ? <div className=\"filteredTreeOverlay\" /> : undefined;\n\n  // istanbul ignore next\n  const noFilteredDataRenderer = useCallback(() => {\n    return <VisibilityTreeNoFilteredData\n      title={TreeWidget.translate(\"modelTree.noModelFound\")}\n      message={TreeWidget.translate(\"modelTree.noMatchingModelNames\")}\n    />;\n  }, []);\n\n  return (\n    <div className=\"tree-widget-visibility-tree-base\" ref={props.rootElementRef}>\n      <ControlledTree\n        nodeLoader={filteredNodeLoader}\n        model={treeModel}\n        selectionMode={props.selectionMode || SelectionMode.None}\n        eventsHandler={eventHandler}\n        treeRenderer={treeRenderer}\n        nodeHighlightingProps={nodeHighlightingProps}\n        noDataRenderer={filterApplied ? noFilteredDataRenderer : undefined}\n        onItemsRendered={onItemsRendered}\n        width={props.width}\n        height={props.height}\n      />\n      {overlay}\n    </div>\n  );\n}\n\nfunction useModelsTreeNodeLoader(props: ModelsTreeProps) {\n  const rulesets = {\n    general: useMemo(() => createRuleset({\n      enableElementsClassGrouping: !!props.hierarchyConfig?.enableElementsClassGrouping,\n      elementClassSpecification: props.hierarchyConfig?.elementClassSpecification,\n    }), [props.hierarchyConfig?.enableElementsClassGrouping, props.hierarchyConfig?.elementClassSpecification]),\n    search: useMemo(() => createSearchRuleset({\n      elementClassSpecification: props.hierarchyConfig?.elementClassSpecification,\n    }), [props.hierarchyConfig?.elementClassSpecification]),\n  };\n\n  const { nodeLoader, onItemsRendered } = usePresentationTreeNodeLoader({\n    imodel: props.iModel,\n    ruleset: rulesets.general,\n    appendChildrenCountForGroupingNodes: (props.hierarchyConfig?.enableElementsClassGrouping === ClassGroupingOption.YesWithCounts),\n    pagingSize: PAGING_SIZE,\n    enableHierarchyAutoUpdate: props.enableHierarchyAutoUpdate,\n  });\n  const { nodeLoader: searchNodeLoader, onItemsRendered: onSearchItemsRendered } = usePresentationTreeNodeLoader({\n    imodel: props.iModel,\n    ruleset: rulesets.search,\n    pagingSize: PAGING_SIZE,\n    enableHierarchyAutoUpdate: props.enableHierarchyAutoUpdate,\n  });\n\n  const activeNodeLoader = props.filterInfo?.filter ? searchNodeLoader : nodeLoader;\n  const activeItemsRenderedCallback = props.filterInfo?.filter ? onSearchItemsRendered : onItemsRendered;\n\n  return {\n    nodeLoader: activeNodeLoader,\n    onItemsRendered: activeItemsRenderedCallback,\n  };\n}\n\nfunction useVisibilityHandler(\n  rulesetId: string,\n  iModel: IModelConnection,\n  activeView: Viewport,\n  visibilityHandler?: ModelsVisibilityHandler,\n  filteredDataProvider?: IFilteredPresentationTreeDataProvider,\n  hierarchyAutoUpdateEnabled?: boolean,\n) {\n  const subjectModelIdsCache = useMemo(() => new SubjectModelIdsCache(iModel), [iModel]);\n\n  const defaultVisibilityHandler = useDisposable(useCallback(\n    () =>\n      new ModelsVisibilityHandler({ rulesetId, viewport: activeView, hierarchyAutoUpdateEnabled, subjectModelIdsCache }),\n    [rulesetId, activeView, subjectModelIdsCache, hierarchyAutoUpdateEnabled])\n  );\n\n  const handler = visibilityHandler ?? defaultVisibilityHandler;\n\n  useEffect(() => {\n    handler && handler.setFilteredDataProvider(filteredDataProvider);\n  }, [handler, filteredDataProvider]);\n\n  return handler;\n}\n\nconst isFilteredDataProvider = (dataProvider: IPresentationTreeDataProvider | IFilteredPresentationTreeDataProvider): dataProvider is IFilteredPresentationTreeDataProvider => {\n  const filteredProvider = dataProvider as IFilteredPresentationTreeDataProvider;\n  return filteredProvider.nodeMatchesFilter !== undefined && filteredProvider.getActiveMatch !== undefined && filteredProvider.countFilteringResults !== undefined;\n};\n\nconst getFilteredDataProvider = (dataProvider: IPresentationTreeDataProvider | IFilteredPresentationTreeDataProvider): IFilteredPresentationTreeDataProvider | undefined => {\n  return isFilteredDataProvider(dataProvider) ? dataProvider : undefined;\n};\n"]}

package/lib/esm/components/trees/models-tree/ModelsTreeComponent.d.ts

@@ -1,17 +1,85 @@
 /// <reference types="react" />
 import "../VisibilityTreeBase.scss";
-import { ModelsTreeHeaderButtonProps, ModelTreeProps } from "../../../types";
+import type { TreeHeaderButtonProps } from "../../tree-header/TreeHeader";
+import type { ModelsTreeProps } from "./ModelsTree";
+/**
+ * Information about a single Model.
+ * @public
+ */
 export interface ModelInfo {
     id: string;
     isPlanProjection?: boolean;
 }
+/**
+ * Props that get passed to [[ModelsTreeComponent]] header button renderer.
+ * @see ModelTreeComponentProps.headerButtons
+ * @public
+ */
+export interface ModelsTreeHeaderButtonProps extends TreeHeaderButtonProps {
+    /** A list of models available in the iModel. */
+    models: ModelInfo[];
+}
+/**
+ * Props for [[ModelsTreeComponent]].
+ * @public
+ */
+export interface ModelTreeComponentProps extends Omit<ModelsTreeProps, "iModel" | "activeView" | "width" | "height" | "filterInfo" | "onFilterApplied"> {
+    /**
+     * Renderers of header buttons. Defaults to:
+     * ```ts
+     * [
+     *   ModelsTreeComponent.ShowAllButton,
+     *   ModelsTreeComponent.HideAllButton,
+     *   ModelsTreeComponent.InvertButton,
+     *   ModelsTreeComponent.View2DButton,
+     *   ModelsTreeComponent.View3DButton,
+     * ]
+     * ```
+     */
+    headerButtons?: Array<(props: ModelsTreeHeaderButtonProps) => React.ReactNode>;
+}
+/**
+ * A component that renders [[ModelsTree]] and a header with filtering capabilities
+ * and header buttons.
+ * @public
+ */
 export declare const ModelsTreeComponent: {
-    (props: ModelTreeProps): JSX.Element | null;
+    (props: ModelTreeComponentProps): JSX.Element | null;
+    /**
+     * Renders a "Show all" button that enables display of all models.
+     * @public
+     */
     ShowAllButton: typeof ShowAllButton;
+    /**
+     * Renders a "Hide all" button that disables display of all models.
+     * @public
+     */
     HideAllButton: typeof HideAllButton;
+    /**
+     * Renders an "Invert all" button that inverts display of all models.
+     * @public
+     */
     InvertButton: typeof InvertButton;
+    /**
+     * Renders a "View 2D" button that enables display of all plan projection models and disables all others.
+     * @public
+     */
     View2DButton: typeof View2DButton;
+    /**
+     * Renders a "View 3D" button that enables display of all non-plan projection models and disables all plan projection ones.
+     * @public
+     */
     View3DButton: typeof View3DButton;
+    /**
+     * Id of the component. May be used when a creating a [[TreeDefinition]] for [[TreeWidgetComponent]].
+     * @public
+     */
+    id: string;
+    /**
+     * Label of the component. May be used when a creating a [[TreeDefinition]] for [[TreeWidgetComponent]].
+     * @public
+     */
+    getLabel(): string;
 };
 declare function ShowAllButton(props: ModelsTreeHeaderButtonProps): JSX.Element;
 declare function HideAllButton(props: ModelsTreeHeaderButtonProps): JSX.Element;

package/lib/esm/components/trees/models-tree/ModelsTreeComponent.js

@@ -1,146 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 import "../VisibilityTreeBase.scss";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
 import { useActiveIModelConnection, useActiveViewport } from "@itwin/appui-react";
-import { IModelApp } from "@itwin/core-frontend";
 import { SvgVisibilityHalf, SvgVisibilityHide, SvgVisibilityShow } from "@itwin/itwinui-icons-react";
 import { Button, IconButton } from "@itwin/itwinui-react";
+import { TreeWidget } from "../../../TreeWidget";
+import { TreeHeader } from "../../tree-header/TreeHeader";
 import { useTreeFilteringState } from "../../TreeFilteringState";
 import { AutoSizer } from "../../utils/AutoSizer";
-import { toggleAllCategories } from "../CategoriesVisibilityUtils";
 import { ModelsTree } from "./ModelsTree";
-import { TreeWidget } from "../../../TreeWidget";
-import { SearchBar } from "../../search-bar/SearchBar";
+import { areAllModelsVisible, hideAllModels, invertAllModels, showAllModels, toggleModels } from "./ModelsVisibilityHandler";
+/**
+ * A component that renders [[ModelsTree]] and a header with filtering capabilities
+ * and header buttons.
+ * @public
+ */
 export const ModelsTreeComponent = (props) => {
     const iModel = useActiveIModelConnection();
     const viewport = useActiveViewport();
     if (!iModel || !viewport)
         return null;
-    return (React.createElement(ModelsTreeComponentImpl, { ...props, iModel: iModel, viewport: viewport }));
+    return (_jsx(ModelsTreeComponentImpl, { ...props, iModel: iModel, viewport: viewport }));
 };
+/**
+ * Renders a "Show all" button that enables display of all models.
+ * @public
+ */
 ModelsTreeComponent.ShowAllButton = ShowAllButton;
+/**
+ * Renders a "Hide all" button that disables display of all models.
+ * @public
+ */
 ModelsTreeComponent.HideAllButton = HideAllButton;
+/**
+ * Renders an "Invert all" button that inverts display of all models.
+ * @public
+ */
 ModelsTreeComponent.InvertButton = InvertButton;
+/**
+ * Renders a "View 2D" button that enables display of all plan projection models and disables all others.
+ * @public
+ */
 ModelsTreeComponent.View2DButton = View2DButton;
+/**
+ * Renders a "View 3D" button that enables display of all non-plan projection models and disables all plan projection ones.
+ * @public
+ */
 ModelsTreeComponent.View3DButton = View3DButton;
+/**
+ * Id of the component. May be used when a creating a [[TreeDefinition]] for [[TreeWidgetComponent]].
+ * @public
+ */
+ModelsTreeComponent.id = "models-tree";
+/**
+ * Label of the component. May be used when a creating a [[TreeDefinition]] for [[TreeWidgetComponent]].
+ * @public
+ */
+ModelsTreeComponent.getLabel = () => TreeWidget.translate("models");
 function ModelsTreeComponentImpl(props) {
     const [availableModels, setAvailableModels] = useState([]);
     const { viewport, iModel } = props;
-    const { searchOptions, filterString, activeMatchIndex, onFilterApplied } = useTreeFilteringState();
-    const queryModels = useCallback(async (vp) => {
-        if (vp === undefined)
-            return [];
+    const { searchOptions, filterString, onFilterApplied } = useTreeFilteringState();
+    const queryModels = useCallback(async () => {
         const queryParams = {
             from: "BisCore.GeometricModel3d",
             wantPrivate: false,
         };
-        const modelProps = await iModel.models.queryProps(queryParams) ?? [];
+        const modelProps = await iModel.models.queryProps(queryParams);
         return modelProps
             .map(({ id, isPlanProjection }) => ({ id, isPlanProjection }))
             .filter(({ id }) => id);
     }, [iModel]);
     useEffect(() => {
-        queryModels(viewport)
+        queryModels()
             .then((modelInfos) => {
             setAvailableModels(modelInfos);
         })
             .catch((_e) => {
             setAvailableModels([]);
         });
-    }, [queryModels, viewport]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(SearchBar, { value: "", valueChangedDelay: 500, placeholder: TreeWidget.translate("search"), title: TreeWidget.translate("searchForSomething"), filteringInProgress: searchOptions.isFiltering, onFilterClear: searchOptions.onFilterCancel, onFilterStart: searchOptions.onFilterStart, onSelectedChanged: searchOptions.onResultSelectedChanged, resultCount: searchOptions.matchedResultCount ?? 0 }, props.headerButtons
-            ? props.headerButtons.map((btn, index) => React.createElement(React.Fragment, { key: index }, btn({ viewport, models: availableModels })))
-            : [
-                React.createElement(ShowAllButton, { viewport: viewport, models: availableModels, key: "show-all-btn" }),
-                React.createElement(HideAllButton, { viewport: viewport, models: availableModels, key: "hide-all-btn" }),
-                React.createElement(InvertButton, { viewport: viewport, models: availableModels, key: "invert-all-btn" }),
-                React.createElement(View2DButton, { viewport: viewport, models: availableModels, key: "view-2d-btn" }),
-                React.createElement(View3DButton, { viewport: viewport, models: availableModels, key: "view-3d-btn" }),
-            ]),
-        React.createElement(AutoSizer, null, ({ width, height }) => (React.createElement(ModelsTree, { ...props, iModel: iModel, activeView: viewport, width: width, height: height, filterInfo: { filter: filterString, activeMatchIndex }, onFilterApplied: onFilterApplied })))));
+    }, [queryModels]);
+    return (_jsxs("div", { className: "tree-widget-tree-with-header", children: [_jsx(TreeHeader, { onFilterClear: searchOptions.onFilterCancel, onFilterStart: searchOptions.onFilterStart, onSelectedChanged: searchOptions.onResultSelectedChanged, resultCount: searchOptions.matchedResultCount, selectedIndex: searchOptions.activeMatchIndex, children: props.headerButtons
+                    ? props.headerButtons.map((btn, index) => _jsx(Fragment, { children: btn({ viewport, models: availableModels }) }, index))
+                    : [
+                        _jsx(ShowAllButton, { viewport: viewport, models: availableModels }, "show-all-btn"),
+                        _jsx(HideAllButton, { viewport: viewport, models: availableModels }, "hide-all-btn"),
+                        _jsx(InvertButton, { viewport: viewport, models: availableModels }, "invert-all-btn"),
+                        _jsx(View2DButton, { viewport: viewport, models: availableModels }, "view-2d-btn"),
+                        _jsx(View3DButton, { viewport: viewport, models: availableModels }, "view-3d-btn"),
+                    ] }), _jsx("div", { className: "tree-widget-tree-content", children: _jsx(AutoSizer, { children: ({ width, height }) => (_jsx(ModelsTree, { ...props, iModel: iModel, activeView: viewport, width: width, height: height, filterInfo: { filter: filterString, activeMatchIndex: searchOptions.activeMatchIndex }, onFilterApplied: onFilterApplied })) }) })] }));
 }
 function ShowAllButton(props) {
-    const showAll = async () => {
-        if (!props.viewport)
-            return;
-        await props.viewport.addViewedModels(props.models.map((model) => model.id));
-        props.viewport.clearNeverDrawn();
-        props.viewport.clearAlwaysDrawn();
-        if (props.viewport.iModel) {
-            await toggleAllCategories(IModelApp.viewManager, props.viewport.iModel, true, props.viewport, false);
-        }
-    };
-    return (React.createElement(IconButton, { className: "tree-widget-header-tree-toolbar-icon", size: "small", styleType: "borderless", title: TreeWidget.translate("showAll"), onClick: showAll },
-        React.createElement(SvgVisibilityShow, null)));
+    return (_jsx(IconButton, { size: "small", styleType: "borderless", title: TreeWidget.translate("showAll"), onClick: () => void showAllModels(props.models.map((model) => model.id), props.viewport), children: _jsx(SvgVisibilityShow, {}) }));
 }
 function HideAllButton(props) {
-    const hideAll = async () => {
-        props.viewport.changeModelDisplay(props.models.map((model) => model.id), false);
-    };
-    return (React.createElement(IconButton, { className: "tree-widget-header-tree-toolbar-icon", size: "small", styleType: "borderless", title: TreeWidget.translate("hideAll"), onClick: hideAll },
-        React.createElement(SvgVisibilityHide, null)));
+    return (_jsx(IconButton, { size: "small", styleType: "borderless", title: TreeWidget.translate("hideAll"), onClick: () => void hideAllModels(props.models.map((model) => model.id), props.viewport), children: _jsx(SvgVisibilityHide, {}) }));
 }
 function InvertButton(props) {
-    const invert = async () => {
-        const notViewedModels = [];
-        const models = [];
-        props.models.forEach((model) => {
-            if (props.viewport.viewsModel(model.id))
-                models.push(model.id);
-            else
-                notViewedModels.push(model.id);
-        });
-        await props.viewport.addViewedModels(notViewedModels);
-        props.viewport.changeModelDisplay(models, false);
-    };
-    return (React.createElement(IconButton, { className: "tree-widget-header-tree-toolbar-icon", size: "small", styleType: "borderless", title: TreeWidget.translate("invert"), onClick: invert },
-        React.createElement(SvgVisibilityHalf, null)));
+    return (_jsx(IconButton, { size: "small", styleType: "borderless", title: TreeWidget.translate("invert"), onClick: () => void invertAllModels(props.models.map((model) => model.id), props.viewport), children: _jsx(SvgVisibilityHalf, {}) }));
 }
 function View2DButton(props) {
     const models2d = useMemo(() => {
         return props.models.filter((model) => model.isPlanProjection).map((model) => model.id);
     }, [props.models]);
-    const [is2dToggleActive, setIs2dToggleActive] = useState(() => areAllModelsVisible(props.viewport, models2d));
+    const [is2dToggleActive, setIs2dToggleActive] = useState(false);
     useEffect(() => {
-        return props.viewport.onViewedModelsChanged.addListener(() => setIs2dToggleActive(areAllModelsVisible(props.viewport, models2d)));
+        setIs2dToggleActive(areAllModelsVisible(models2d, props.viewport));
+        return props.viewport.onViewedModelsChanged.addListener((vp) => setIs2dToggleActive(areAllModelsVisible(models2d, vp)));
     }, [models2d, props.viewport]);
-    const viewToggle2D = async () => {
-        if (!models2d)
-            return;
-        if (is2dToggleActive) {
-            props.viewport.changeModelDisplay(models2d, false);
-        }
-        else {
-            await props.viewport.addViewedModels(models2d);
-        }
-    };
-    return (React.createElement(Button, { className: "tree-widget-header-tree-toolbar-icon", size: "small", styleType: "borderless", title: TreeWidget.translate("toggle2DViews"), onClick: viewToggle2D, disabled: models2d.length === 0, endIcon: is2dToggleActive ? React.createElement(SvgVisibilityShow, null) : React.createElement(SvgVisibilityHide, null) }, TreeWidget.translate("label2D")));
+    return (_jsx(Button, { size: "small", styleType: "borderless", title: TreeWidget.translate("toggle2DViews"), onClick: () => void toggleModels(models2d, is2dToggleActive, props.viewport), disabled: models2d.length === 0, endIcon: is2dToggleActive ? _jsx(SvgVisibilityShow, {}) : _jsx(SvgVisibilityHide, {}), children: TreeWidget.translate("label2D") }));
 }
 function View3DButton(props) {
     const models3d = useMemo(() => {
         return props.models.filter((model) => !model.isPlanProjection).map((model) => model.id);
     }, [props.models]);
-    const [is3dToggleActive, setIs3dToggleActive] = useState(() => areAllModelsVisible(props.viewport, models3d));
+    const [is3dToggleActive, setIs3dToggleActive] = useState(false);
     useEffect(() => {
-        return props.viewport.onViewedModelsChanged.addListener(() => setIs3dToggleActive(areAllModelsVisible(props.viewport, models3d)));
+        setIs3dToggleActive(areAllModelsVisible(models3d, props.viewport));
+        return props.viewport.onViewedModelsChanged.addListener((vp) => setIs3dToggleActive(areAllModelsVisible(models3d, vp)));
     }, [models3d, props.viewport]);
-    const viewToggle3D = async () => {
-        if (!models3d)
-            return;
-        if (is3dToggleActive) {
-            props.viewport.changeModelDisplay(models3d, false);
-        }
-        else {
-            await props.viewport.addViewedModels(models3d);
-        }
-    };
-    return (React.createElement(Button, { className: "tree-widget-header-tree-toolbar-icon", size: "small", styleType: "borderless", title: TreeWidget.translate("toggle3DViews"), onClick: viewToggle3D, disabled: models3d.length === 0, endIcon: is3dToggleActive ? React.createElement(SvgVisibilityShow, null) : React.createElement(SvgVisibilityHide, null) }, TreeWidget.translate("label3D")));
-}
-function areAllModelsVisible(viewport, models) {
-    return models.length !== 0 ? models.every((id) => viewport.viewsModel(id)) : false;
+    return (_jsx(Button, { size: "small", styleType: "borderless", title: TreeWidget.translate("toggle3DViews"), onClick: () => void toggleModels(models3d, is3dToggleActive, props.viewport), disabled: models3d.length === 0, endIcon: is3dToggleActive ? _jsx(SvgVisibilityShow, {}) : _jsx(SvgVisibilityHide, {}), children: TreeWidget.translate("label3D") }));
 }
 //# sourceMappingURL=ModelsTreeComponent.js.map

package/lib/esm/components/trees/models-tree/ModelsTreeComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModelsTreeComponent.js","sourceRoot":"","sources":["../../../../../src/components/trees/models-tree/ModelsTreeComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n\nimport \"../VisibilityTreeBase.scss\";\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { useActiveIModelConnection, useActiveViewport } from \"@itwin/appui-react\";\nimport { GeometricModel3dProps, ModelQueryParams } from \"@itwin/core-common\";\nimport { IModelApp, IModelConnection, ScreenViewport, Viewport } from \"@itwin/core-frontend\";\nimport { SvgVisibilityHalf, SvgVisibilityHide, SvgVisibilityShow } from \"@itwin/itwinui-icons-react\";\nimport { Button, IconButton } from \"@itwin/itwinui-react\";\nimport { ModelsTreeHeaderButtonProps, ModelTreeProps } from \"../../../types\";\nimport { useTreeFilteringState } from \"../../TreeFilteringState\";\nimport { AutoSizer } from \"../../utils/AutoSizer\";\nimport { toggleAllCategories } from \"../CategoriesVisibilityUtils\";\nimport { ModelsTree } from \"./ModelsTree\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { SearchBar } from \"../../search-bar/SearchBar\";\n\nexport interface ModelInfo {\n  id: string;\n  isPlanProjection?: boolean;\n}\n\nexport const ModelsTreeComponent = (props: ModelTreeProps) => {\n  const iModel = useActiveIModelConnection();\n  const viewport = useActiveViewport();\n\n  if (!iModel || !viewport)\n    return null;\n\n  return (\n    <ModelsTreeComponentImpl {...props} iModel={iModel} viewport={viewport} />\n  );\n};\n\nModelsTreeComponent.ShowAllButton = ShowAllButton;\nModelsTreeComponent.HideAllButton = HideAllButton;\nModelsTreeComponent.InvertButton = InvertButton;\nModelsTreeComponent.View2DButton = View2DButton;\nModelsTreeComponent.View3DButton = View3DButton;\n\nfunction ModelsTreeComponentImpl(props: ModelTreeProps & { iModel: IModelConnection, viewport: ScreenViewport }) {\n  const [availableModels, setAvailableModels] = useState<ModelInfo[]>([]);\n\n  const { viewport, iModel } = props;\n\n  const { searchOptions, filterString, activeMatchIndex, onFilterApplied } =\n    useTreeFilteringState();\n\n  const queryModels = useCallback(async (\n    vp: Viewport | undefined\n  ): Promise<ModelInfo[]> => {\n    if (vp === undefined) return [];\n\n    const queryParams: ModelQueryParams = {\n      from: \"BisCore.GeometricModel3d\",\n      wantPrivate: false,\n    };\n    const modelProps = await iModel.models.queryProps(queryParams) ?? [];\n    return modelProps\n      .map(({ id, isPlanProjection }: GeometricModel3dProps) => ({ id, isPlanProjection }))\n      .filter(({ id }) => id) as ModelInfo[];\n  }, [iModel]);\n\n  useEffect(() => {\n    queryModels(viewport)\n      .then((modelInfos: ModelInfo[]) => {\n        setAvailableModels(modelInfos);\n      })\n      .catch((_e) => {\n        setAvailableModels([]);\n      });\n  }, [queryModels, viewport]);\n\n  return (\n    <>\n      <SearchBar\n        value=\"\"\n        valueChangedDelay={500}\n        placeholder={TreeWidget.translate(\"search\")}\n        title={TreeWidget.translate(\"searchForSomething\")}\n        filteringInProgress={searchOptions.isFiltering}\n        onFilterClear={searchOptions.onFilterCancel}\n        onFilterStart={searchOptions.onFilterStart}\n        onSelectedChanged={searchOptions.onResultSelectedChanged}\n        resultCount={searchOptions.matchedResultCount ?? 0}\n      >\n        {props.headerButtons\n          ? props.headerButtons.map((btn, index) =>\n            <React.Fragment key={index}>\n              {btn({ viewport, models: availableModels })}\n            </React.Fragment>)\n          : [\n            <ShowAllButton viewport={viewport} models={availableModels} key=\"show-all-btn\" />,\n            <HideAllButton viewport={viewport} models={availableModels} key=\"hide-all-btn\" />,\n            <InvertButton viewport={viewport} models={availableModels} key=\"invert-all-btn\" />,\n            <View2DButton viewport={viewport} models={availableModels} key=\"view-2d-btn\" />,\n            <View3DButton viewport={viewport} models={availableModels} key=\"view-3d-btn\" />,\n          ]\n        }\n      </SearchBar>\n      <AutoSizer>\n        {({ width, height }) => (\n          <ModelsTree\n            {...props}\n            iModel={iModel}\n            activeView={viewport}\n            width={width}\n            height={height}\n            filterInfo={{ filter: filterString, activeMatchIndex }}\n            onFilterApplied={onFilterApplied}\n          />\n        )}\n      </AutoSizer>\n    </>\n  );\n}\n\nfunction ShowAllButton(props: ModelsTreeHeaderButtonProps) {\n  const showAll = async () => {\n    if (!props.viewport)\n      return;\n\n    await props.viewport.addViewedModels(props.models.map((model) => model.id));\n    props.viewport.clearNeverDrawn();\n    props.viewport.clearAlwaysDrawn();\n    if (props.viewport.iModel) {\n      await toggleAllCategories(\n        IModelApp.viewManager,\n        props.viewport.iModel,\n        true,\n        props.viewport,\n        false\n      );\n    }\n  };\n\n  return (\n    <IconButton\n      className=\"tree-widget-header-tree-toolbar-icon\"\n      size=\"small\"\n      styleType=\"borderless\"\n      title={TreeWidget.translate(\"showAll\")}\n      onClick={showAll}\n    >\n      <SvgVisibilityShow />\n    </IconButton>\n  );\n}\n\nfunction HideAllButton(props: ModelsTreeHeaderButtonProps) {\n  const hideAll = async () => {\n    props.viewport.changeModelDisplay(props.models.map((model) => model.id), false);\n  };\n\n  return (\n    <IconButton\n      className=\"tree-widget-header-tree-toolbar-icon\"\n      size=\"small\"\n      styleType=\"borderless\"\n      title={TreeWidget.translate(\"hideAll\")}\n      onClick={hideAll}\n    >\n      <SvgVisibilityHide />\n    </IconButton>\n  );\n}\n\nfunction InvertButton(props: ModelsTreeHeaderButtonProps) {\n  const invert = async () => {\n    const notViewedModels: string[] = [];\n    const models: string[] = [];\n    props.models.forEach((model) => {\n      if (props.viewport.viewsModel(model.id)) models.push(model.id);\n      else notViewedModels.push(model.id);\n    });\n    await props.viewport.addViewedModels(notViewedModels);\n    props.viewport.changeModelDisplay(models, false);\n  };\n\n  return (\n    <IconButton\n      className=\"tree-widget-header-tree-toolbar-icon\"\n      size=\"small\"\n      styleType=\"borderless\"\n      title={TreeWidget.translate(\"invert\")}\n      onClick={invert}\n    >\n      <SvgVisibilityHalf />\n    </IconButton>\n  );\n}\n\nfunction View2DButton(props: ModelsTreeHeaderButtonProps) {\n  const models2d = useMemo(() => {\n    return props.models.filter((model) => model.isPlanProjection).map((model) => model.id);\n  }, [props.models]);\n\n  const [is2dToggleActive, setIs2dToggleActive] = useState(() => areAllModelsVisible(props.viewport, models2d));\n\n  useEffect(() => {\n    return props.viewport.onViewedModelsChanged.addListener(() => setIs2dToggleActive(areAllModelsVisible(props.viewport, models2d)));\n  }, [models2d, props.viewport]);\n  const viewToggle2D = async () => {\n    if (!models2d)\n      return;\n\n    if (is2dToggleActive) {\n      props.viewport.changeModelDisplay(models2d, false);\n    } else {\n      await props.viewport.addViewedModels(models2d);\n    }\n  };\n\n  return (\n    <Button\n      className=\"tree-widget-header-tree-toolbar-icon\"\n      size=\"small\"\n      styleType=\"borderless\"\n      title={TreeWidget.translate(\"toggle2DViews\")}\n      onClick={viewToggle2D}\n      disabled={models2d.length === 0}\n      endIcon={is2dToggleActive ? <SvgVisibilityShow /> : <SvgVisibilityHide />}\n    >\n      {TreeWidget.translate(\"label2D\")}\n    </Button>\n  );\n}\n\nfunction View3DButton(props: ModelsTreeHeaderButtonProps) {\n  const models3d = useMemo(() => {\n    return props.models.filter((model) => !model.isPlanProjection).map((model) => model.id);\n  }, [props.models]);\n\n  const [is3dToggleActive, setIs3dToggleActive] = useState(() => areAllModelsVisible(props.viewport, models3d));\n\n  useEffect(() => {\n    return props.viewport.onViewedModelsChanged.addListener(() => setIs3dToggleActive(areAllModelsVisible(props.viewport, models3d)));\n  }, [models3d, props.viewport]);\n\n  const viewToggle3D = async () => {\n    if (!models3d)\n      return;\n\n    if (is3dToggleActive) {\n      props.viewport.changeModelDisplay(models3d, false);\n    } else {\n      await props.viewport.addViewedModels(models3d);\n    }\n  };\n\n  return (\n    <Button\n      className=\"tree-widget-header-tree-toolbar-icon\"\n      size=\"small\"\n      styleType=\"borderless\"\n      title={TreeWidget.translate(\"toggle3DViews\")}\n      onClick={viewToggle3D}\n      disabled={models3d.length === 0}\n      endIcon={is3dToggleActive ? <SvgVisibilityShow /> : <SvgVisibilityHide />}\n    >\n      {TreeWidget.translate(\"label3D\")}\n    </Button>\n  );\n}\n\nfunction areAllModelsVisible(viewport: Viewport, models: string[]): boolean {\n  return models.length !== 0 ? models.every((id) => viewport.viewsModel(id)) : false;\n}\n"]}
+{"version":3,"file":"ModelsTreeComponent.js","sourceRoot":"","sources":["../../../../../src/components/trees/models-tree/ModelsTreeComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n\nimport \"../VisibilityTreeBase.scss\";\nimport { Fragment, useCallback, useEffect, useMemo, useState } from \"react\";\nimport { useActiveIModelConnection, useActiveViewport } from \"@itwin/appui-react\";\nimport { SvgVisibilityHalf, SvgVisibilityHide, SvgVisibilityShow } from \"@itwin/itwinui-icons-react\";\nimport { Button, IconButton } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { TreeHeader } from \"../../tree-header/TreeHeader\";\nimport { useTreeFilteringState } from \"../../TreeFilteringState\";\nimport { AutoSizer } from \"../../utils/AutoSizer\";\nimport { ModelsTree } from \"./ModelsTree\";\nimport { areAllModelsVisible, hideAllModels, invertAllModels, showAllModels, toggleModels } from \"./ModelsVisibilityHandler\";\n\nimport type { GeometricModel3dProps, ModelQueryParams } from \"@itwin/core-common\";\nimport type { IModelConnection, ScreenViewport, Viewport } from \"@itwin/core-frontend\";\nimport type { TreeHeaderButtonProps } from \"../../tree-header/TreeHeader\";\nimport type { ModelsTreeProps } from \"./ModelsTree\";\n\n/**\n * Information about a single Model.\n * @public\n */\nexport interface ModelInfo {\n  id: string;\n  isPlanProjection?: boolean;\n}\n\n/**\n * Props that get passed to [[ModelsTreeComponent]] header button renderer.\n * @see ModelTreeComponentProps.headerButtons\n * @public\n */\nexport interface ModelsTreeHeaderButtonProps extends TreeHeaderButtonProps {\n  /** A list of models available in the iModel. */\n  models: ModelInfo[];\n}\n\n/**\n * Props for [[ModelsTreeComponent]].\n * @public\n */\nexport interface ModelTreeComponentProps extends Omit<ModelsTreeProps,\n| \"iModel\"\n| \"activeView\"\n| \"width\"\n| \"height\"\n| \"filterInfo\"\n| \"onFilterApplied\"\n> {\n  /**\n   * Renderers of header buttons. Defaults to:\n   * ```ts\n   * [\n   *   ModelsTreeComponent.ShowAllButton,\n   *   ModelsTreeComponent.HideAllButton,\n   *   ModelsTreeComponent.InvertButton,\n   *   ModelsTreeComponent.View2DButton,\n   *   ModelsTreeComponent.View3DButton,\n   * ]\n   * ```\n   */\n  headerButtons?: Array<(props: ModelsTreeHeaderButtonProps) => React.ReactNode>;\n}\n\n/**\n * A component that renders [[ModelsTree]] and a header with filtering capabilities\n * and header buttons.\n * @public\n */\nexport const ModelsTreeComponent = (props: ModelTreeComponentProps) => {\n  const iModel = useActiveIModelConnection();\n  const viewport = useActiveViewport();\n\n  if (!iModel || !viewport)\n    return null;\n\n  return (\n    <ModelsTreeComponentImpl {...props} iModel={iModel} viewport={viewport} />\n  );\n};\n\n/**\n * Renders a \"Show all\" button that enables display of all models.\n * @public\n */\nModelsTreeComponent.ShowAllButton = ShowAllButton;\n\n/**\n * Renders a \"Hide all\" button that disables display of all models.\n * @public\n */\nModelsTreeComponent.HideAllButton = HideAllButton;\n\n/**\n * Renders an \"Invert all\" button that inverts display of all models.\n * @public\n */\nModelsTreeComponent.InvertButton = InvertButton;\n\n/**\n * Renders a \"View 2D\" button that enables display of all plan projection models and disables all others.\n * @public\n */\nModelsTreeComponent.View2DButton = View2DButton;\n\n/**\n * Renders a \"View 3D\" button that enables display of all non-plan projection models and disables all plan projection ones.\n * @public\n */\nModelsTreeComponent.View3DButton = View3DButton;\n\n/**\n * Id of the component. May be used when a creating a [[TreeDefinition]] for [[TreeWidgetComponent]].\n * @public\n */\nModelsTreeComponent.id = \"models-tree\";\n\n/**\n * Label of the component. May be used when a creating a [[TreeDefinition]] for [[TreeWidgetComponent]].\n * @public\n */\nModelsTreeComponent.getLabel = () => TreeWidget.translate(\"models\");\n\nfunction ModelsTreeComponentImpl(props: ModelTreeComponentProps & { iModel: IModelConnection, viewport: ScreenViewport }) {\n  const [availableModels, setAvailableModels] = useState<ModelInfo[]>([]);\n\n  const { viewport, iModel } = props;\n\n  const { searchOptions, filterString, onFilterApplied } = useTreeFilteringState();\n\n  const queryModels = useCallback(async (): Promise<ModelInfo[]> => {\n    const queryParams: ModelQueryParams = {\n      from: \"BisCore.GeometricModel3d\",\n      wantPrivate: false,\n    };\n    const modelProps = await iModel.models.queryProps(queryParams);\n    return modelProps\n      .map(({ id, isPlanProjection }: GeometricModel3dProps) => ({ id, isPlanProjection }))\n      .filter(({ id }) => id) as ModelInfo[];\n  }, [iModel]);\n\n  useEffect(() => {\n    queryModels()\n      .then((modelInfos: ModelInfo[]) => {\n        setAvailableModels(modelInfos);\n      })\n      .catch((_e) => {\n        setAvailableModels([]);\n      });\n  }, [queryModels]);\n\n  return (\n    <div className=\"tree-widget-tree-with-header\">\n      <TreeHeader\n        onFilterClear={searchOptions.onFilterCancel}\n        onFilterStart={searchOptions.onFilterStart}\n        onSelectedChanged={searchOptions.onResultSelectedChanged}\n        resultCount={searchOptions.matchedResultCount}\n        selectedIndex={searchOptions.activeMatchIndex}\n      >\n        {props.headerButtons\n          ? props.headerButtons.map(\n            (btn, index) =>\n              <Fragment key={index}>\n                {btn({ viewport, models: availableModels })}\n              </Fragment>\n          )\n          : [\n            <ShowAllButton viewport={viewport} models={availableModels} key=\"show-all-btn\" />,\n            <HideAllButton viewport={viewport} models={availableModels} key=\"hide-all-btn\" />,\n            <InvertButton viewport={viewport} models={availableModels} key=\"invert-all-btn\" />,\n            <View2DButton viewport={viewport} models={availableModels} key=\"view-2d-btn\" />,\n            <View3DButton viewport={viewport} models={availableModels} key=\"view-3d-btn\" />,\n          ]\n        }\n      </TreeHeader>\n      <div className=\"tree-widget-tree-content\">\n        <AutoSizer>\n          {({ width, height }) => (\n            <ModelsTree\n              {...props}\n              iModel={iModel}\n              activeView={viewport}\n              width={width}\n              height={height}\n              filterInfo={{ filter: filterString, activeMatchIndex: searchOptions.activeMatchIndex }}\n              onFilterApplied={onFilterApplied}\n            />\n          )}\n        </AutoSizer>\n      </div>\n    </div>\n  );\n}\n\nfunction ShowAllButton(props: ModelsTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      size=\"small\"\n      styleType=\"borderless\"\n      title={TreeWidget.translate(\"showAll\")}\n      onClick={() => void showAllModels(props.models.map((model) => model.id), props.viewport)}\n    >\n      <SvgVisibilityShow />\n    </IconButton>\n  );\n}\n\nfunction HideAllButton(props: ModelsTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      size=\"small\"\n      styleType=\"borderless\"\n      title={TreeWidget.translate(\"hideAll\")}\n      onClick={() => void hideAllModels(props.models.map((model) => model.id), props.viewport)}\n    >\n      <SvgVisibilityHide />\n    </IconButton>\n  );\n}\n\nfunction InvertButton(props: ModelsTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      size=\"small\"\n      styleType=\"borderless\"\n      title={TreeWidget.translate(\"invert\")}\n      onClick={() => void invertAllModels(props.models.map((model) => model.id), props.viewport)}\n    >\n      <SvgVisibilityHalf />\n    </IconButton>\n  );\n}\n\nfunction View2DButton(props: ModelsTreeHeaderButtonProps) {\n  const models2d = useMemo(() => {\n    return props.models.filter((model) => model.isPlanProjection).map((model) => model.id);\n  }, [props.models]);\n\n  const [is2dToggleActive, setIs2dToggleActive] = useState(false);\n\n  useEffect(() => {\n    setIs2dToggleActive(areAllModelsVisible(models2d, props.viewport));\n    return props.viewport.onViewedModelsChanged.addListener((vp: Viewport) => setIs2dToggleActive(areAllModelsVisible(models2d, vp)));\n  }, [models2d, props.viewport]);\n\n  return (\n    <Button\n      size=\"small\"\n      styleType=\"borderless\"\n      title={TreeWidget.translate(\"toggle2DViews\")}\n      onClick={() => void toggleModels(models2d, is2dToggleActive, props.viewport)}\n      disabled={models2d.length === 0}\n      endIcon={is2dToggleActive ? <SvgVisibilityShow /> : <SvgVisibilityHide />}\n    >\n      {TreeWidget.translate(\"label2D\")}\n    </Button>\n  );\n}\n\nfunction View3DButton(props: ModelsTreeHeaderButtonProps) {\n  const models3d = useMemo(() => {\n    return props.models.filter((model) => !model.isPlanProjection).map((model) => model.id);\n  }, [props.models]);\n\n  const [is3dToggleActive, setIs3dToggleActive] = useState(false);\n\n  useEffect(() => {\n    setIs3dToggleActive(areAllModelsVisible(models3d, props.viewport));\n    return props.viewport.onViewedModelsChanged.addListener((vp: Viewport) => setIs3dToggleActive(areAllModelsVisible(models3d, vp)));\n  }, [models3d, props.viewport]);\n\n  return (\n    <Button\n      size=\"small\"\n      styleType=\"borderless\"\n      title={TreeWidget.translate(\"toggle3DViews\")}\n      onClick={() => void toggleModels(models3d, is3dToggleActive, props.viewport)}\n      disabled={models3d.length === 0}\n      endIcon={is3dToggleActive ? <SvgVisibilityShow /> : <SvgVisibilityHide />}\n    >\n      {TreeWidget.translate(\"label3D\")}\n    </Button>\n  );\n}\n"]}