@itwin/map-layers 4.0.0-dev.8 → 5.0.0-dev.2

package/lib/esm/ui/widget/SubLayersTree.js

@@ -1,415 +1,404 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-import { PropertyValueFormat } from "@itwin/appui-abstract";
-import { ControlledTree, SelectionMode, TreeEventHandler, TreeImageLoader, TreeModelSource, TreeNodeLoader, TreeNodeRenderer, TreeRenderer, useTreeModel, } from "@itwin/components-react";
-import { ImageMapLayerSettings } from "@itwin/core-common";
-import { IModelApp } from "@itwin/core-frontend";
-import { CheckBoxState, ImageCheckBox, useDisposable, WebFontIcon } from "@itwin/core-react";
-import { Button, Input } from "@itwin/itwinui-react";
-import * as React from "react";
-import { SubLayersDataProvider } from "./SubLayersDataProvider";
-import "./SubLayersTree.scss";
-import { MapLayersUI } from "../../mapLayers";
-const getWindow = () => {
-    return typeof window === "undefined" ? undefined : window;
-};
-const useResizeObserver = (onResize) => {
-    const resizeObserver = React.useRef();
-    const elementRef = React.useCallback((element) => {
-        var _a, _b, _c;
-        if (!((_a = getWindow()) === null || _a === void 0 ? void 0 : _a.ResizeObserver)) {
-            return;
-        }
-        (_b = resizeObserver.current) === null || _b === void 0 ? void 0 : _b.disconnect();
-        if (element) {
-            resizeObserver.current = new ResizeObserver(([{ contentRect }]) => onResize(contentRect));
-            (_c = resizeObserver.current) === null || _c === void 0 ? void 0 : _c.observe(element);
-        }
-    }, [onResize]);
-    return [elementRef, resizeObserver.current];
-};
-/**
- Mimic processing of `react-resize-detector` to return width and height.
-* @internal
- */
-function useResizeDetector() {
-    const [width, setWidth] = React.useState();
-    const [height, setHeight] = React.useState();
-    const [ref] = useResizeObserver(React.useCallback((size) => {
-        setWidth(size.width);
-        setHeight(size.height);
-    }, []));
-    return { width, height, ref };
-}
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function Toolbar(props) {
-    return (React.createElement("div", { className: "map-manager-sublayer-tree-toolbar" },
-        React.createElement("div", { className: "tree-toolbar-action-buttons" }, props.children),
-        props.searchField && React.createElement("div", { className: "tree-toolbar-searchbox" }, props.searchField)));
-}
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function SubLayersPanel({ mapLayer, viewport }) {
-    const [noneAvailableLabel] = React.useState(MapLayersUI.localization.getLocalizedString("mapLayers:SubLayers.NoSubLayers"));
-    if (!viewport || (undefined === mapLayer.subLayers || 0 === mapLayer.subLayers.length)) {
-        return React.createElement("div", { className: "map-manager-sublayer-panel" },
-            React.createElement("div", null, noneAvailableLabel));
-    }
-    return (React.createElement(SubLayersTree, { mapLayer: mapLayer }));
-}
-function getSubLayerProps(subLayerSettings) {
-    return subLayerSettings.map((subLayer) => subLayer.toJSON());
-}
-function getStyleMapLayerSettings(settings, isOverlay, layerIndex, treeVisibility) {
-    return {
-        visible: settings.visible,
-        name: settings.name,
-        source: settings.source,
-        transparency: settings.transparency,
-        transparentBackground: settings.transparentBackground,
-        subLayers: settings.subLayers ? getSubLayerProps(settings.subLayers) : undefined,
-        showSubLayers: true,
-        isOverlay,
-        layerIndex,
-        provider: IModelApp.mapLayerFormatRegistry.createImageryProvider(settings),
-        treeVisibility,
-    };
-}
-/**
- * Tree Control that displays sub-layer hierarchy
- * @internal
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function SubLayersTree(props) {
-    var _a;
-    const [placeholderLabel] = React.useState(MapLayersUI.localization.getLocalizedString("mapLayers:SubLayers.SearchPlaceholder"));
-    const [allOnLabel] = React.useState(MapLayersUI.localization.getLocalizedString("mapLayers:SubLayers.AllOn"));
-    const [allOffLabel] = React.useState(MapLayersUI.localization.getLocalizedString("mapLayers:SubLayers.AllOff"));
-    const [mapLayer, setMapLayer] = React.useState(props.mapLayer);
-    const [layerFilterString, setLayerFilterString] = React.useState("");
-    // create data provider to get some nodes to show in tree
-    // `React.useMemo' is used avoid creating new object on each render cycle
-    const dataProvider = React.useMemo(() => new SubLayersDataProvider(mapLayer), [mapLayer]);
-    const { modelSource, nodeLoader, nodeHighlightingProps, } = useTreeFiltering(dataProvider, layerFilterString);
-    // create custom event handler. It handles all tree event same as `TreeEventHandler` but additionally
-    // it selects/deselects node when checkbox is checked/unchecked and vice versa.
-    // `useDisposable` takes care of disposing old event handler when new is created in case 'nodeLoader' has changed
-    // `React.useCallback` is used to avoid creating new callback that creates handler on each render
-    const eventHandler = useDisposable(React.useCallback(() => new SubLayerCheckboxHandler(mapLayer, nodeLoader), [nodeLoader, mapLayer]));
-    // Get an immutable tree model from the model source. The model is regenerated every time the model source
-    // emits the `onModelChanged` event.
-    const treeModel = useTreeModel(modelSource);
-    const showAll = React.useCallback(async () => {
-        const vp = IModelApp.viewManager.selectedView;
-        const displayStyle = vp === null || vp === void 0 ? void 0 : vp.displayStyle;
-        if (displayStyle && vp) {
-            const indexInDisplayStyle = displayStyle ? displayStyle.findMapLayerIndexByNameAndSource(mapLayer.name, mapLayer.source, mapLayer.isOverlay) : -1;
-            displayStyle.changeMapSubLayerProps({ visible: true }, -1, indexInDisplayStyle, mapLayer.isOverlay);
-            vp.invalidateRenderPlan();
-            const updatedMapLayer = displayStyle.mapLayerAtIndex(indexInDisplayStyle, mapLayer.isOverlay);
-            if (updatedMapLayer) {
-                if (updatedMapLayer instanceof ImageMapLayerSettings) {
-                    const treeVisibility = vp.getMapLayerScaleRangeVisibility(indexInDisplayStyle, mapLayer.isOverlay);
-                    setMapLayer(getStyleMapLayerSettings(updatedMapLayer, mapLayer.isOverlay, indexInDisplayStyle, treeVisibility));
-                }
-            }
-        }
-    }, [mapLayer]);
-    const hideAll = React.useCallback(async () => {
-        const vp = IModelApp.viewManager.selectedView;
-        const displayStyle = vp === null || vp === void 0 ? void 0 : vp.displayStyle;
-        if (displayStyle && vp) {
-            const indexInDisplayStyle = displayStyle ? displayStyle.findMapLayerIndexByNameAndSource(mapLayer.name, mapLayer.source, mapLayer.isOverlay) : -1;
-            displayStyle.changeMapSubLayerProps({ visible: false }, -1, indexInDisplayStyle, mapLayer.isOverlay);
-            const updatedMapLayer = displayStyle.mapLayerAtIndex(indexInDisplayStyle, mapLayer.isOverlay);
-            if (updatedMapLayer && updatedMapLayer instanceof ImageMapLayerSettings) {
-                const treeVisibility = vp.getMapLayerScaleRangeVisibility(indexInDisplayStyle, mapLayer.isOverlay);
-                setMapLayer(getStyleMapLayerSettings(updatedMapLayer, mapLayer.isOverlay, indexInDisplayStyle, treeVisibility));
-            }
-            vp.invalidateRenderPlan();
-        }
-    }, [mapLayer]);
-    const handleFilterTextChanged = React.useCallback((event) => {
-        setLayerFilterString(event.target.value);
-    }, []);
-    const { width, height, ref: containerRef } = useResizeDetector();
-    return React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "map-manager-sublayer-tree" },
-            React.createElement(Toolbar, { searchField: React.createElement(Input, { type: "text", className: "map-manager-source-list-filter", placeholder: placeholderLabel, value: layerFilterString, onChange: handleFilterTextChanged, size: "small" }) }, ((_a = mapLayer.provider) === null || _a === void 0 ? void 0 : _a.mutualExclusiveSubLayer) ? undefined : [
-                React.createElement(Button, { size: "small", styleType: "borderless", key: "show-all-btn", title: allOnLabel, onClick: showAll },
-                    React.createElement(WebFontIcon, { iconName: "icon-visibility" })),
-                React.createElement(Button, { size: "small", styleType: "borderless", key: "hide-all-btn", title: allOffLabel, onClick: hideAll },
-                    React.createElement(WebFontIcon, { iconName: "icon-visibility-hide-2" })),
-            ]),
-            React.createElement("div", { ref: containerRef, className: "map-manager-sublayer-tree-content" }, width !== undefined && height !== undefined && React.createElement(ControlledTree, { nodeLoader: nodeLoader, selectionMode: SelectionMode.None, eventsHandler: eventHandler, model: treeModel, treeRenderer: nodeWithEyeCheckboxTreeRenderer, nodeHighlightingProps: nodeHighlightingProps, width: width, height: height }))));
-}
-/** TreeEventHandler derived class that handler processing changes to subLayer visibility */
-class SubLayerCheckboxHandler extends TreeEventHandler {
-    constructor(_mapLayer, nodeLoader) {
-        super({ modelSource: nodeLoader.modelSource, nodeLoader, collapsedChildrenDisposalEnabled: true });
-        this._mapLayer = _mapLayer;
-        //-----------------------------------------------------------------------
-        // Listen to model changes
-        //------------------------------------------------------------------------
-        // This is required because nodes are delay loaded in the model until
-        // they are made visible (i.e. parent node is expanded).  So even though
-        // you might have created nodes in the data provided with a proper
-        // initial state, by the time it gets loaded, their state might have became
-        // out of date in the TreeView's active model.  So whenever a node
-        // is added, when must confirm its state matches the current model
-        // (i.e. state of their parent.)
-        this.onModelChanged = (args) => {
-            this.modelSource.modifyModel((model) => {
-                const addedNodes = args[1].addedNodeIds.map((id) => model.getNode(id));
-                addedNodes.forEach((node) => {
-                    if (!node)
-                        return;
-                    this.syncNodeStateWithParent(model, node);
-                });
-            });
-        };
-        this._removeModelChangedListener = this.modelSource.onModelChanged.addListener(this.onModelChanged);
-    }
-    dispose() {
-        this._removeModelChangedListener();
-        super.dispose();
-    }
-    // Cascade state
-    // Children on unnamed groups must get disabled in the tree view, because
-    // they get rendered anyway.
-    cascadeStateToAllChildren(model, parentId) {
-        const children = model.getChildren(parentId);
-        if (children === undefined)
-            return;
-        for (const childID of children) {
-            const childNode = childID ? model.getNode(childID) : undefined;
-            if (childNode)
-                this.syncNodeStateWithParent(model, childNode);
-            // Drill down the tree.
-            this.cascadeStateToAllChildren(model, childID);
-        }
-    }
-    applyMutualExclusiveState(model, nodeId) {
-        const changedNode = model.getNode(nodeId);
-        if ((changedNode === null || changedNode === void 0 ? void 0 : changedNode.checkbox.state) === CheckBoxState.Off)
-            return;
-        for (const node of model.iterateTreeModelNodes()) {
-            if (node.id === (changedNode === null || changedNode === void 0 ? void 0 : changedNode.id))
-                continue;
-            if (node && node.checkbox.state === CheckBoxState.On)
-                node.checkbox.state = CheckBoxState.Off;
-        }
-    }
-    static isUnnamedGroup(subLayer) {
-        if (!subLayer)
-            return false;
-        return (!subLayer.name || subLayer.name.length === 0) && (subLayer.children !== undefined && subLayer.children.length > 0);
-    }
-    // Ensure the state of changed node matches the state of its parent.
-    syncNodeStateWithParent(model, changedNode) {
-        var _a, _b, _c, _d, _e, _f;
-        // Lookup node parent. If non exists, I assume thats the root node,
-        // and it must have a proper initial state.
-        const parentNode = changedNode.parentId ? model.getNode(changedNode.parentId) : undefined;
-        if (!parentNode)
-            return;
-        if (!changedNode.checkbox)
-            return; // don't see why this would happen, but if there is no checkbox, we cant do much here.
-        const parentLayerId = undefined !== ((_a = parentNode.item.extendedData) === null || _a === void 0 ? void 0 : _a.subLayerId) ? (_b = parentNode.item.extendedData) === null || _b === void 0 ? void 0 : _b.subLayerId : parentNode.item.id;
-        const parentSubLayer = (_c = this._mapLayer.subLayers) === null || _c === void 0 ? void 0 : _c.find((subLayer) => subLayer.id === parentLayerId);
-        // If parent is disabled, then children must be too.
-        // Also, Non-visible unnamed group must have their children disabled (unamed groups have visibility inherence)
-        if (parentNode.checkbox.isDisabled || (SubLayerCheckboxHandler.isUnnamedGroup(parentSubLayer) && parentNode.checkbox.state === CheckBoxState.Off)) {
-            changedNode.checkbox.isDisabled = true;
-            changedNode.checkbox.state = CheckBoxState.Off;
-        }
-        else {
-            // Visibility state from StyleMapLayerSettings applies
-            const subLayerId = undefined !== ((_d = changedNode.item.extendedData) === null || _d === void 0 ? void 0 : _d.subLayerId) ? (_e = changedNode.item.extendedData) === null || _e === void 0 ? void 0 : _e.subLayerId : changedNode.item.id;
-            const foundSubLayer = (_f = this._mapLayer.subLayers) === null || _f === void 0 ? void 0 : _f.find((subLayer) => subLayer.id === subLayerId);
-            changedNode.checkbox.isDisabled = false;
-            changedNode.checkbox.state = (foundSubLayer === null || foundSubLayer === void 0 ? void 0 : foundSubLayer.visible) ? CheckBoxState.On : CheckBoxState.Off;
-        }
-    }
-    /** Changes nodes checkboxes states until event is handled or handler is disposed */
-    onCheckboxStateChanged({ stateChanges }) {
-        // call base checkbox handling
-        const baseHandling = super.onCheckboxStateChanged({ stateChanges });
-        // subscribe to checkbox state changes to new checkbox states and do some additional work with them
-        const selectionHandling = stateChanges.subscribe({
-            next: (changes) => {
-                const vp = IModelApp.viewManager.selectedView;
-                const displayStyle = vp === null || vp === void 0 ? void 0 : vp.displayStyle;
-                const indexInDisplayStyle = displayStyle ? displayStyle.findMapLayerIndexByNameAndSource(this._mapLayer.name, this._mapLayer.source, this._mapLayer.isOverlay) : -1;
-                changes.forEach((change) => {
-                    var _a, _b, _c, _d, _e;
-                    const isSelected = (change.newState === CheckBoxState.On);
-                    const subLayerId = undefined !== ((_a = change.nodeItem.extendedData) === null || _a === void 0 ? void 0 : _a.subLayerId) ? (_b = change.nodeItem.extendedData) === null || _b === void 0 ? void 0 : _b.subLayerId : change.nodeItem.id;
-                    // Get the previously visible node if any
-                    let prevVisibleLayer;
-                    if ((_c = this._mapLayer.provider) === null || _c === void 0 ? void 0 : _c.mutualExclusiveSubLayer) {
-                        prevVisibleLayer = (_d = this._mapLayer.subLayers) === null || _d === void 0 ? void 0 : _d.find((subLayer) => subLayer.visible && subLayer.id !== subLayerId);
-                    }
-                    // Update sublayer object, otherwise state would get out of sync with DisplayStyle each time the TreeView is re-rendered
-                    const foundSubLayer = (_e = this._mapLayer.subLayers) === null || _e === void 0 ? void 0 : _e.find((subLayer) => subLayer.id === subLayerId);
-                    if (foundSubLayer)
-                        foundSubLayer.visible = isSelected;
-                    if (prevVisibleLayer === null || prevVisibleLayer === void 0 ? void 0 : prevVisibleLayer.visible)
-                        prevVisibleLayer.visible = false;
-                    // Update displaystyle state
-                    if (-1 !== indexInDisplayStyle && displayStyle) {
-                        if (prevVisibleLayer && prevVisibleLayer.id !== undefined)
-                            displayStyle.changeMapSubLayerProps({ visible: false }, prevVisibleLayer.id, indexInDisplayStyle, this._mapLayer.isOverlay);
-                        displayStyle.changeMapSubLayerProps({ visible: isSelected }, subLayerId, indexInDisplayStyle, this._mapLayer.isOverlay);
-                    }
-                    // Cascade state
-                    this.modelSource.modifyModel((model) => {
-                        var _a;
-                        if ((_a = this._mapLayer.provider) === null || _a === void 0 ? void 0 : _a.mutualExclusiveSubLayer)
-                            this.applyMutualExclusiveState(model, change.nodeItem.id);
-                        this.cascadeStateToAllChildren(model, change.nodeItem.id);
-                    });
-                });
-                if (vp)
-                    vp.invalidateRenderPlan();
-            },
-        });
-        // stop handling selection when checkboxes handling is stopped
-        baseHandling === null || baseHandling === void 0 ? void 0 : baseHandling.add(selectionHandling);
-        return baseHandling;
-    }
-}
-/** Custom checkbox renderer that renders checkbox as an eye */
-const eyeCheckboxRenderer = (props) => (React.createElement(ImageCheckBox, { checked: props.checked, disabled: props.disabled, imageOn: "icon-visibility", imageOff: "icon-visibility-hide-2", onClick: props.onChange, tooltip: props.title }));
-/** Custom node renderer. It uses default 'TreeNodeRenderer' but overrides default checkbox renderer to render checkbox as an eye */
-const imageLoader = new TreeImageLoader();
-const nodeWithEyeCheckboxRenderer = (props) => (React.createElement(TreeNodeRenderer, { ...props, checkboxRenderer: eyeCheckboxRenderer, imageLoader: imageLoader }));
-/** Custom tree renderer. It uses default `TreeRenderer` but overrides default node renderer to render node with custom checkbox */
-const nodeWithEyeCheckboxTreeRenderer = (props) => (React.createElement(TreeRenderer, { ...props, nodeRenderer: nodeWithEyeCheckboxRenderer }));
-function useTreeFiltering(dataProvider, filter) {
-    const nodeLoader = useFilteredProvider(dataProvider, filter);
-    const nodeHighlightingProps = useNodeHighlightingProps(filter);
-    return {
-        nodeLoader,
-        modelSource: nodeLoader.modelSource,
-        nodeHighlightingProps,
-    };
-}
-function useFilteredProvider(dataProvider, filter) {
-    const filteredProvider = React.useMemo(() => {
-        return new FilteredTreeDataProvider(dataProvider, filter);
-    }, [dataProvider, filter]);
-    const nodeLoader = React.useMemo(() => {
-        return new TreeNodeLoader(filteredProvider, new TreeModelSource());
-    }, [filteredProvider]);
-    return nodeLoader;
-}
-function useNodeHighlightingProps(filter) {
-    const [nodeHighlightingProps, setNodeHighlightingProps] = React.useState();
-    React.useEffect(() => {
-        if (filter === "") {
-            setNodeHighlightingProps(undefined);
-            return;
-        }
-        setNodeHighlightingProps({
-            searchText: filter,
-            activeMatch: undefined,
-        });
-    }, [filter]);
-    return nodeHighlightingProps;
-}
-class FullTreeHierarchy {
-    constructor(dataProvider) {
-        this._hierarchy = new Map();
-        this._dataProvider = dataProvider;
-        this._init = (async () => {
-            await this.initNode();
-        })();
-    }
-    async initNode(parent) {
-        const nodes = await this._dataProvider.getNodes(parent);
-        this._hierarchy.set(parent === null || parent === void 0 ? void 0 : parent.id, nodes);
-        for (const node of nodes) {
-            await this.initNode(node);
-        }
-    }
-    async getHierarchy() {
-        await this._init;
-        return this._hierarchy;
-    }
-}
-class FilteredTreeHierarchy {
-    constructor(dataProvider, filter) {
-        this._filtered = new Map();
-        this._fullHierarchy = new FullTreeHierarchy(dataProvider);
-        this._filter = filter;
-        this._init = (async () => {
-            await this.init();
-        })();
-    }
-    async init() {
-        const hierarchy = await this._fullHierarchy.getHierarchy();
-        if (this._filter === "") {
-            this._filtered = hierarchy;
-            return;
-        }
-        this.filterNodes(hierarchy);
-    }
-    /** Initializes `this._filtered` field. Returns a node if it matches a filter. */
-    filterNodes(hierarchy, current) {
-        const matches = current ? this.matchesFilter(current) : false;
-        const children = hierarchy.get(current === null || current === void 0 ? void 0 : current.id);
-        if (!children)
-            return matches ? current : undefined;
-        const matchedChildren = new Array();
-        for (const child of children) {
-            const matchedChild = this.filterNodes(hierarchy, child);
-            matchedChild && matchedChildren.push(matchedChild);
-        }
-        const hasChildren = matchedChildren.length > 0;
-        const included = matches || hasChildren;
-        let filtered;
-        if (included) {
-            this._filtered.set(current === null || current === void 0 ? void 0 : current.id, matchedChildren);
-            // Return a modified copy of current node (to persist initial hierarchy when filter is cleared).
-            if (current) {
-                filtered = {
-                    ...current,
-                    hasChildren,
-                    autoExpand: hasChildren ? true : current.autoExpand,
-                };
-            }
-        }
-        return filtered;
-    }
-    matchesFilter(node) {
-        var _a;
-        if (node.label.value.valueFormat !== PropertyValueFormat.Primitive)
-            return false;
-        const value = (_a = node.label.value.displayValue) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-        if (!value)
-            return false;
-        return value.includes(this._filter.toLowerCase());
-    }
-    async getHierarchy() {
-        await this._init;
-        return this._filtered;
-    }
-}
-class FilteredTreeDataProvider {
-    constructor(parentDataProvider, filter) {
-        this._hierarchy = new FilteredTreeHierarchy(parentDataProvider, filter);
-    }
-    async getNodes(parent) {
-        const hierarchy = await this._hierarchy.getHierarchy();
-        const nodes = hierarchy.get(parent === null || parent === void 0 ? void 0 : parent.id);
-        return nodes || [];
-    }
-    async getNodesCount(parent) {
-        const hierarchy = await this._hierarchy.getHierarchy();
-        const nodes = hierarchy.get(parent === null || parent === void 0 ? void 0 : parent.id);
-        return (nodes === null || nodes === void 0 ? void 0 : nodes.length) || 0;
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import { PropertyValueFormat } from "@itwin/appui-abstract";
+import { ControlledTree, SelectionMode, TreeEventHandler, TreeImageLoader, TreeModelSource, TreeNodeLoader, TreeNodeRenderer, TreeRenderer, useTreeModel, } from "@itwin/components-react";
+import { ImageMapLayerSettings } from "@itwin/core-common";
+import { IModelApp } from "@itwin/core-frontend";
+import { CheckBoxState, ImageCheckBox, useDisposable, WebFontIcon } from "@itwin/core-react";
+import { Button, Input } from "@itwin/itwinui-react";
+import * as React from "react";
+import { SubLayersDataProvider } from "./SubLayersDataProvider";
+import "./SubLayersTree.scss";
+import { MapLayersUI } from "../../mapLayers";
+const getWindow = () => {
+    return typeof window === "undefined" ? undefined : window;
+};
+const useResizeObserver = (onResize) => {
+    const resizeObserver = React.useRef();
+    const elementRef = React.useCallback((element) => {
+        if (!getWindow()?.ResizeObserver) {
+            return;
+        }
+        resizeObserver.current?.disconnect();
+        if (element) {
+            resizeObserver.current = new ResizeObserver(([{ contentRect }]) => onResize(contentRect));
+            resizeObserver.current?.observe(element);
+        }
+    }, [onResize]);
+    return [elementRef, resizeObserver.current];
+};
+/** Mimic processing of `react-resize-detector` to return width and height.
+ * @internal
+ */
+function useResizeDetector() {
+    const [width, setWidth] = React.useState();
+    const [height, setHeight] = React.useState();
+    const [ref] = useResizeObserver(React.useCallback((size) => {
+        setWidth(size.width);
+        setHeight(size.height);
+    }, []));
+    return { width, height, ref };
+}
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function Toolbar(props) {
+    return (React.createElement("div", { className: "map-manager-sublayer-tree-toolbar" },
+        React.createElement("div", { className: "tree-toolbar-action-buttons" }, props.children),
+        props.searchField && React.createElement("div", { className: "tree-toolbar-searchbox" }, props.searchField)));
+}
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function SubLayersPanel({ mapLayer, viewport }) {
+    const [noneAvailableLabel] = React.useState(MapLayersUI.localization.getLocalizedString("mapLayers:SubLayers.NoSubLayers"));
+    if (!viewport || (undefined === mapLayer.subLayers || 0 === mapLayer.subLayers.length)) {
+        return React.createElement("div", { className: "map-manager-sublayer-panel" },
+            React.createElement("div", null, noneAvailableLabel));
+    }
+    return (React.createElement(SubLayersTree, { mapLayer: mapLayer }));
+}
+function getSubLayerProps(subLayerSettings) {
+    return subLayerSettings.map((subLayer) => subLayer.toJSON());
+}
+function getStyleMapLayerSettings(settings, isOverlay, layerIndex, treeVisibility) {
+    return {
+        visible: settings.visible,
+        name: settings.name,
+        source: settings.source,
+        transparency: settings.transparency,
+        transparentBackground: settings.transparentBackground,
+        subLayers: settings.subLayers ? getSubLayerProps(settings.subLayers) : undefined,
+        showSubLayers: true,
+        isOverlay,
+        layerIndex,
+        provider: IModelApp.viewManager.selectedView?.getMapLayerImageryProvider({ index: layerIndex, isOverlay }),
+        treeVisibility,
+    };
+}
+/**
+ * Tree Control that displays sub-layer hierarchy
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function SubLayersTree(props) {
+    const [placeholderLabel] = React.useState(MapLayersUI.localization.getLocalizedString("mapLayers:SubLayers.SearchPlaceholder"));
+    const [allOnLabel] = React.useState(MapLayersUI.localization.getLocalizedString("mapLayers:SubLayers.AllOn"));
+    const [allOffLabel] = React.useState(MapLayersUI.localization.getLocalizedString("mapLayers:SubLayers.AllOff"));
+    const [mapLayer, setMapLayer] = React.useState(props.mapLayer);
+    const [layerFilterString, setLayerFilterString] = React.useState("");
+    // create data provider to get some nodes to show in tree
+    // `React.useMemo' is used avoid creating new object on each render cycle
+    const dataProvider = React.useMemo(() => new SubLayersDataProvider(mapLayer), [mapLayer]);
+    const { modelSource, nodeLoader, nodeHighlightingProps, } = useTreeFiltering(dataProvider, layerFilterString);
+    // create custom event handler. It handles all tree event same as `TreeEventHandler` but additionally
+    // it selects/deselects node when checkbox is checked/unchecked and vice versa.
+    // `useDisposable` takes care of disposing old event handler when new is created in case 'nodeLoader' has changed
+    // `React.useCallback` is used to avoid creating new callback that creates handler on each render
+    const eventHandler = useDisposable(React.useCallback(() => new SubLayerCheckboxHandler(mapLayer, nodeLoader), [nodeLoader, mapLayer]));
+    // Get an immutable tree model from the model source. The model is regenerated every time the model source
+    // emits the `onModelChanged` event.
+    const treeModel = useTreeModel(modelSource);
+    const showAll = React.useCallback(async () => {
+        const vp = IModelApp.viewManager.selectedView;
+        const displayStyle = vp?.displayStyle;
+        if (displayStyle && vp) {
+            const indexInDisplayStyle = displayStyle ? displayStyle.findMapLayerIndexByNameAndSource(mapLayer.name, mapLayer.source, mapLayer.isOverlay) : -1;
+            displayStyle.changeMapSubLayerProps({ visible: true }, -1, { index: indexInDisplayStyle, isOverlay: mapLayer.isOverlay });
+            const updatedMapLayer = displayStyle.mapLayerAtIndex({ index: indexInDisplayStyle, isOverlay: mapLayer.isOverlay });
+            if (updatedMapLayer) {
+                if (updatedMapLayer instanceof ImageMapLayerSettings) {
+                    const treeVisibility = vp.getMapLayerScaleRangeVisibility({ index: indexInDisplayStyle, isOverlay: mapLayer.isOverlay });
+                    setMapLayer(getStyleMapLayerSettings(updatedMapLayer, mapLayer.isOverlay, indexInDisplayStyle, treeVisibility));
+                }
+            }
+        }
+    }, [mapLayer]);
+    const hideAll = React.useCallback(async () => {
+        const vp = IModelApp.viewManager.selectedView;
+        const displayStyle = vp?.displayStyle;
+        if (displayStyle && vp) {
+            const indexInDisplayStyle = displayStyle ? displayStyle.findMapLayerIndexByNameAndSource(mapLayer.name, mapLayer.source, mapLayer.isOverlay) : -1;
+            displayStyle.changeMapSubLayerProps({ visible: false }, -1, { index: indexInDisplayStyle, isOverlay: mapLayer.isOverlay });
+            const updatedMapLayer = displayStyle.mapLayerAtIndex({ index: indexInDisplayStyle, isOverlay: mapLayer.isOverlay });
+            if (updatedMapLayer && updatedMapLayer instanceof ImageMapLayerSettings) {
+                const treeVisibility = vp.getMapLayerScaleRangeVisibility({ index: indexInDisplayStyle, isOverlay: mapLayer.isOverlay });
+                setMapLayer(getStyleMapLayerSettings(updatedMapLayer, mapLayer.isOverlay, indexInDisplayStyle, treeVisibility));
+            }
+        }
+    }, [mapLayer]);
+    const handleFilterTextChanged = React.useCallback((event) => {
+        setLayerFilterString(event.target.value);
+    }, []);
+    const { width, height, ref: containerRef } = useResizeDetector();
+    return React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "map-manager-sublayer-tree" },
+            React.createElement(Toolbar, { searchField: React.createElement(Input, { type: "text", className: "map-manager-source-list-filter", placeholder: placeholderLabel, value: layerFilterString, onChange: handleFilterTextChanged, size: "small" }) }, mapLayer.provider?.mutualExclusiveSubLayer ? undefined : [
+                React.createElement(Button, { size: "small", styleType: "borderless", key: "show-all-btn", title: allOnLabel, onClick: showAll },
+                    React.createElement(WebFontIcon, { iconName: "icon-visibility" })),
+                React.createElement(Button, { size: "small", styleType: "borderless", key: "hide-all-btn", title: allOffLabel, onClick: hideAll },
+                    React.createElement(WebFontIcon, { iconName: "icon-visibility-hide-2" })),
+            ]),
+            React.createElement("div", { ref: containerRef, className: "map-manager-sublayer-tree-content" }, width !== undefined && height !== undefined && React.createElement(ControlledTree, { nodeLoader: nodeLoader, selectionMode: SelectionMode.None, eventsHandler: eventHandler, model: treeModel, treeRenderer: nodeWithEyeCheckboxTreeRenderer, nodeHighlightingProps: nodeHighlightingProps, width: width, height: height }))));
+}
+/** TreeEventHandler derived class that handler processing changes to subLayer visibility */
+class SubLayerCheckboxHandler extends TreeEventHandler {
+    constructor(_mapLayer, nodeLoader) {
+        super({ modelSource: nodeLoader.modelSource, nodeLoader, collapsedChildrenDisposalEnabled: true });
+        this._mapLayer = _mapLayer;
+        //-----------------------------------------------------------------------
+        // Listen to model changes
+        //------------------------------------------------------------------------
+        // This is required because nodes are delay loaded in the model until
+        // they are made visible (i.e. parent node is expanded).  So even though
+        // you might have created nodes in the data provided with a proper
+        // initial state, by the time it gets loaded, their state might have became
+        // out of date in the TreeView's active model.  So whenever a node
+        // is added, when must confirm its state matches the current model
+        // (i.e. state of their parent.)
+        this.onModelChanged = (args) => {
+            this.modelSource.modifyModel((model) => {
+                const addedNodes = args[1].addedNodeIds.map((id) => model.getNode(id));
+                addedNodes.forEach((node) => {
+                    if (!node)
+                        return;
+                    this.syncNodeStateWithParent(model, node);
+                });
+            });
+        };
+        this._removeModelChangedListener = this.modelSource.onModelChanged.addListener(this.onModelChanged);
+    }
+    dispose() {
+        this._removeModelChangedListener();
+        super.dispose();
+    }
+    // Cascade state
+    // Children on unnamed groups must get disabled in the tree view, because
+    // they get rendered anyway.
+    cascadeStateToAllChildren(model, parentId) {
+        const children = model.getChildren(parentId);
+        if (children === undefined)
+            return;
+        for (const childID of children) {
+            const childNode = childID ? model.getNode(childID) : undefined;
+            if (childNode)
+                this.syncNodeStateWithParent(model, childNode);
+            // Drill down the tree.
+            this.cascadeStateToAllChildren(model, childID);
+        }
+    }
+    applyMutualExclusiveState(model, nodeId) {
+        const changedNode = model.getNode(nodeId);
+        if (changedNode?.checkbox.state === CheckBoxState.Off)
+            return;
+        for (const node of model.iterateTreeModelNodes()) {
+            if (node.id === changedNode?.id)
+                continue;
+            if (node && node.checkbox.state === CheckBoxState.On)
+                node.checkbox.state = CheckBoxState.Off;
+        }
+    }
+    static isUnnamedGroup(subLayer) {
+        if (!subLayer)
+            return false;
+        return (!subLayer.name || subLayer.name.length === 0) && (subLayer.children !== undefined && subLayer.children.length > 0);
+    }
+    // Ensure the state of changed node matches the state of its parent.
+    syncNodeStateWithParent(model, changedNode) {
+        // Lookup node parent. If non exists, I assume thats the root node,
+        // and it must have a proper initial state.
+        const parentNode = changedNode.parentId ? model.getNode(changedNode.parentId) : undefined;
+        if (!parentNode)
+            return;
+        if (!changedNode.checkbox)
+            return; // don't see why this would happen, but if there is no checkbox, we cant do much here.
+        const parentLayerId = undefined !== parentNode.item.extendedData?.subLayerId ? parentNode.item.extendedData?.subLayerId : parentNode.item.id;
+        const parentSubLayer = this._mapLayer.subLayers?.find((subLayer) => subLayer.id === parentLayerId);
+        // If parent is disabled, then children must be too.
+        // Also, Non-visible unnamed group must have their children disabled (unamed groups have visibility inherence)
+        if (parentNode.checkbox.isDisabled || (SubLayerCheckboxHandler.isUnnamedGroup(parentSubLayer) && parentNode.checkbox.state === CheckBoxState.Off)) {
+            changedNode.checkbox.isDisabled = true;
+            changedNode.checkbox.state = CheckBoxState.Off;
+        }
+        else {
+            // Visibility state from StyleMapLayerSettings applies
+            const subLayerId = undefined !== changedNode.item.extendedData?.subLayerId ? changedNode.item.extendedData?.subLayerId : changedNode.item.id;
+            const foundSubLayer = this._mapLayer.subLayers?.find((subLayer) => subLayer.id === subLayerId);
+            changedNode.checkbox.isDisabled = false;
+            changedNode.checkbox.state = foundSubLayer?.visible ? CheckBoxState.On : CheckBoxState.Off;
+        }
+    }
+    /** Changes nodes checkboxes states until event is handled or handler is disposed */
+    onCheckboxStateChanged({ stateChanges }) {
+        // call base checkbox handling
+        const baseHandling = super.onCheckboxStateChanged({ stateChanges });
+        // subscribe to checkbox state changes to new checkbox states and do some additional work with them
+        const selectionHandling = stateChanges.subscribe({
+            next: (changes) => {
+                const vp = IModelApp.viewManager.selectedView;
+                const displayStyle = vp?.displayStyle;
+                const indexInDisplayStyle = displayStyle ? displayStyle.findMapLayerIndexByNameAndSource(this._mapLayer.name, this._mapLayer.source, this._mapLayer.isOverlay) : -1;
+                changes.forEach((change) => {
+                    const isSelected = (change.newState === CheckBoxState.On);
+                    const subLayerId = undefined !== change.nodeItem.extendedData?.subLayerId ? change.nodeItem.extendedData?.subLayerId : change.nodeItem.id;
+                    // Get the previously visible node if any
+                    let prevVisibleLayer;
+                    if (this._mapLayer.provider?.mutualExclusiveSubLayer) {
+                        prevVisibleLayer = this._mapLayer.subLayers?.find((subLayer) => subLayer.visible && subLayer.id !== subLayerId);
+                    }
+                    // Update sublayer object, otherwise state would get out of sync with DisplayStyle each time the TreeView is re-rendered
+                    const foundSubLayer = this._mapLayer.subLayers?.find((subLayer) => subLayer.id === subLayerId);
+                    if (foundSubLayer)
+                        foundSubLayer.visible = isSelected;
+                    if (prevVisibleLayer?.visible)
+                        prevVisibleLayer.visible = false;
+                    // Update displaystyle state
+                    if (-1 !== indexInDisplayStyle && displayStyle) {
+                        if (prevVisibleLayer && prevVisibleLayer.id !== undefined)
+                            displayStyle.changeMapSubLayerProps({ visible: false }, prevVisibleLayer.id, { index: indexInDisplayStyle, isOverlay: this._mapLayer.isOverlay });
+                        displayStyle.changeMapSubLayerProps({ visible: isSelected }, subLayerId, { index: indexInDisplayStyle, isOverlay: this._mapLayer.isOverlay });
+                    }
+                    // Cascade state
+                    this.modelSource.modifyModel((model) => {
+                        if (this._mapLayer.provider?.mutualExclusiveSubLayer)
+                            this.applyMutualExclusiveState(model, change.nodeItem.id);
+                        this.cascadeStateToAllChildren(model, change.nodeItem.id);
+                    });
+                });
+            },
+        });
+        // stop handling selection when checkboxes handling is stopped
+        baseHandling?.add(selectionHandling);
+        return baseHandling;
+    }
+}
+/** Custom checkbox renderer that renders checkbox as an eye */
+const eyeCheckboxRenderer = (props) => (React.createElement(ImageCheckBox, { checked: props.checked, disabled: props.disabled, imageOn: "icon-visibility", imageOff: "icon-visibility-hide-2", onClick: props.onChange, tooltip: props.title }));
+/** Custom node renderer. It uses default 'TreeNodeRenderer' but overrides default checkbox renderer to render checkbox as an eye */
+const imageLoader = new TreeImageLoader();
+const nodeWithEyeCheckboxRenderer = (props) => (React.createElement(TreeNodeRenderer, { ...props, checkboxRenderer: eyeCheckboxRenderer, imageLoader: imageLoader }));
+/** Custom tree renderer. It uses default `TreeRenderer` but overrides default node renderer to render node with custom checkbox */
+const nodeWithEyeCheckboxTreeRenderer = (props) => (React.createElement(TreeRenderer, { ...props, nodeRenderer: nodeWithEyeCheckboxRenderer }));
+function useTreeFiltering(dataProvider, filter) {
+    const nodeLoader = useFilteredProvider(dataProvider, filter);
+    const nodeHighlightingProps = useNodeHighlightingProps(filter);
+    return {
+        nodeLoader,
+        modelSource: nodeLoader.modelSource,
+        nodeHighlightingProps,
+    };
+}
+function useFilteredProvider(dataProvider, filter) {
+    const filteredProvider = React.useMemo(() => {
+        return new FilteredTreeDataProvider(dataProvider, filter);
+    }, [dataProvider, filter]);
+    const nodeLoader = React.useMemo(() => {
+        return new TreeNodeLoader(filteredProvider, new TreeModelSource());
+    }, [filteredProvider]);
+    return nodeLoader;
+}
+function useNodeHighlightingProps(filter) {
+    const [nodeHighlightingProps, setNodeHighlightingProps] = React.useState();
+    React.useEffect(() => {
+        if (filter === "") {
+            setNodeHighlightingProps(undefined);
+            return;
+        }
+        setNodeHighlightingProps({
+            searchText: filter,
+            activeMatch: undefined,
+        });
+    }, [filter]);
+    return nodeHighlightingProps;
+}
+class FullTreeHierarchy {
+    constructor(dataProvider) {
+        this._hierarchy = new Map();
+        this._dataProvider = dataProvider;
+        this._init = (async () => {
+            await this.initNode();
+        })();
+    }
+    async initNode(parent) {
+        const nodes = await this._dataProvider.getNodes(parent);
+        this._hierarchy.set(parent?.id, nodes);
+        for (const node of nodes) {
+            await this.initNode(node);
+        }
+    }
+    async getHierarchy() {
+        await this._init;
+        return this._hierarchy;
+    }
+}
+class FilteredTreeHierarchy {
+    constructor(dataProvider, filter) {
+        this._filtered = new Map();
+        this._fullHierarchy = new FullTreeHierarchy(dataProvider);
+        this._filter = filter;
+        this._init = (async () => {
+            await this.init();
+        })();
+    }
+    async init() {
+        const hierarchy = await this._fullHierarchy.getHierarchy();
+        if (this._filter === "") {
+            this._filtered = hierarchy;
+            return;
+        }
+        this.filterNodes(hierarchy);
+    }
+    /** Initializes `this._filtered` field. Returns a node if it matches a filter. */
+    filterNodes(hierarchy, current) {
+        const matches = current ? this.matchesFilter(current) : false;
+        const children = hierarchy.get(current?.id);
+        if (!children)
+            return matches ? current : undefined;
+        const matchedChildren = new Array();
+        for (const child of children) {
+            const matchedChild = this.filterNodes(hierarchy, child);
+            matchedChild && matchedChildren.push(matchedChild);
+        }
+        const hasChildren = matchedChildren.length > 0;
+        const included = matches || hasChildren;
+        let filtered;
+        if (included) {
+            this._filtered.set(current?.id, matchedChildren);
+            // Return a modified copy of current node (to persist initial hierarchy when filter is cleared).
+            if (current) {
+                filtered = {
+                    ...current,
+                    hasChildren,
+                    autoExpand: hasChildren ? true : current.autoExpand,
+                };
+            }
+        }
+        return filtered;
+    }
+    matchesFilter(node) {
+        if (node.label.value.valueFormat !== PropertyValueFormat.Primitive)
+            return false;
+        const value = node.label.value.displayValue?.toLowerCase();
+        if (!value)
+            return false;
+        return value.includes(this._filter.toLowerCase());
+    }
+    async getHierarchy() {
+        await this._init;
+        return this._filtered;
+    }
+}
+class FilteredTreeDataProvider {
+    constructor(parentDataProvider, filter) {
+        this._hierarchy = new FilteredTreeHierarchy(parentDataProvider, filter);
+    }
+    async getNodes(parent) {
+        const hierarchy = await this._hierarchy.getHierarchy();
+        const nodes = hierarchy.get(parent?.id);
+        return nodes || [];
+    }
+    async getNodesCount(parent) {
+        const hierarchy = await this._hierarchy.getHierarchy();
+        const nodes = hierarchy.get(parent?.id);
+        return nodes?.length || 0;
+    }
+}
 //# sourceMappingURL=SubLayersTree.js.map