当前位置：首页 > news >正文

iTwin开源包系列(一) 树组件

news 2025/11/14 7:19:15

https://www.npmjs.com/package/@itwin/tree-widget-react

1 创建存储对象

import { IModelConnection } from "@itwin/core-frontend";
import { createStorage } from "@itwin/unified-selection";
import type { SelectionStorage } from "@itwin/unified-selection";let unifiedSelectionStorage: SelectionStorage | undefined;
function getUnifiedSelectionStorage(): SelectionStorage {if (!unifiedSelectionStorage) {unifiedSelectionStorage = createStorage();IModelConnection.onClose.addListener((imodel) => {unifiedSelectionStorage!.clearStorage({ imodelKey: imodel.key });});}return unifiedSelectionStorage;
}

2 创建schema context，访问iModel的metadata

import { SchemaContext } from "@itwin/ecschema-metadata";
import { ECSchemaRpcLocater } from "@itwin/ecschema-rpcinterface-common";
import type { IModelConnection } from "@itwin/core-frontend";const schemaContextCache = new Map<string, SchemaContext>();
function getSchemaContext(imodel: IModelConnection) {const key = imodel.getRpcProps().key;let schemaContext = schemaContextCache.get(key);if (!schemaContext) {const schemaLocater = new ECSchemaRpcLocater(imodel.getRpcProps());schemaContext = new SchemaContext();schemaContext.addLocater(schemaLocater);schemaContextCache.set(key, schemaContext);imodel.onClose.addOnce(() => schemaContextCache.delete(key));}return schemaContext;
}

3 初始化

import { TreeWidget } from "@itwin/tree-widget-react";
import { IModelApp } from "@itwin/core-frontend";await TreeWidget.initialize(IModelApp.localization);

4 使用

import { ModelsTreeComponent } from "@itwin/tree-widget-react";function MyWidget() {return (<ModelsTreeComponent// see "Creating schema context" section for example implementationgetSchemaContext={(iModel) => iModel.schemaContext}// see "Creating unified selection storage" section for example implementationselectionStorage={unifiedSelectionStorage}headerButtons={[(props) => <ModelsTreeComponent.ShowAllButton {...props} key={"ShowAllButton"} />,(props) => <ModelsTreeComponent.HideAllButton {...props} key={"HideAllButton"} />,]}/>);
}

效果

可用标题按钮

ModelsTreeComponent.ShowAllButton：显示 iModel 中的全部内容。
ModelsTreeComponent.HideAllButton：关闭所有模型，从而隐藏 iModel 中的全部内容。
ModelsTreeComponent.InvertButton：反转所有模型的显示状态。
ModelsTreeComponent.View2DButton：切换平面投影模型的显示。
ModelsTreeComponent.View3DButton：切换非平面投影模型的显示。
ModelsTreeComponent.ToggleInstancesFocusButton：启用/禁用实例聚焦模式。

5 自定义Model Tree（自定义如label）

import { useCallback } from "react";
import { TreeWithHeader, useModelsTree, useModelsTreeButtonProps, VisibilityTree, VisibilityTreeRenderer } from "@itwin/tree-widget-react";
import type { SelectionStorage } from "@itwin/unified-selection";
import type { IModelConnection, Viewport } from "@itwin/core-frontend";
import type { SchemaContext } from "@itwin/ecschema-metadata";
import type { ComponentPropsWithoutRef } from "react";type VisibilityTreeRendererProps = ComponentPropsWithoutRef<typeof VisibilityTreeRenderer>;
type CustomModelsTreeRendererProps = Parameters<ComponentPropsWithoutRef<typeof VisibilityTree>["treeRenderer"]>[0];
function CustomModelsTreeRenderer(props: CustomModelsTreeRendererProps) {const getLabel = props.getLabel;const getLabelCallback = useCallback<Required<VisibilityTreeRendererProps>["getLabel"]>((node) => {const originalLabel = getLabel(node);return <>Custom node - {originalLabel}</>;},[getLabel],);const getSublabelCallback = useCallback<Required<VisibilityTreeRendererProps>["getSublabel"]>((node) => <>Sublabel - {node.label}</>, []);return <VisibilityTreeRenderer {...props} getLabel={getLabelCallback} getSublabel={getSublabelCallback} />;
}interface CustomModelsTreeProps {imodel: IModelConnection;viewport: Viewport;getSchemaContext: (imodel: IModelConnection) => SchemaContext;selectionStorage: SelectionStorage;
}function CustomModelsTreeComponent({ imodel, viewport, getSchemaContext, selectionStorage }: CustomModelsTreeProps) {const { buttonProps } = useModelsTreeButtonProps({ imodel, viewport });const { modelsTreeProps, rendererProps } = useModelsTree({ activeView: viewport });return (<TreeWithHeaderbuttons={[<ModelsTreeComponent.ShowAllButton {...buttonProps} key={"ShowAllButton"} />,<ModelsTreeComponent.HideAllButton {...buttonProps} key={"HideAllButton"} />,]}><VisibilityTree{...modelsTreeProps}getSchemaContext={getSchemaContext}selectionStorage={selectionStorage}imodel={imodel}treeRenderer={(props) => <CustomModelsTreeRenderer {...props} {...rendererProps} />}/></TreeWithHeader>);
}

<CustomModelsTreeComponentimodel={UiFramework.getIModelConnection()!}viewport={useActiveViewport()!}getSchemaContext={(imodel) => imodel.schemaContext}selectionStorage={unifiedSelectionStorage}/>