基于PresentationRules个性化显示iModel的内容
iModel.js Presentation库
iModel.js Presentation库帮助从iModel中检索数据，并负责统一选择。从iModel中检索的数据是由使用者使用表示规则以声明方式定义的，这就是为什么该库通常很称为“表示规则引擎”。
要使用该库，需要在前后端执行一些步骤：
更多参考链接见官方文档https://www.imodeljs.org/learning/presentation/
使用
其实在使用的时候，用户更多的是只需要关注ruleset.json的内容，其中ruleset.json中定义的显示规则决定了控件（主要是树形控件，表格控件，属性框控件）所显示的imodel中的内容。其中ruleset定义了丰富的显示规则，用户只需要专注于编辑ruleset.json中的 显示规则，几乎不用修改任何代码，即可实现自己的个性化显示需求。
以下是一个tree形控件的ruleset.json内容示例：
{ "$schema": "../../node_modules/@bentley/presentation-common/Ruleset.schema.json", "id": "imodel-content-tree/Default", "supportedSchemas": { "schemaNames": ["BisCore"] }, "rules": [ { "ruleType": "RootNodes", "autoExpand": true, "specifications": [ { "specType": "InstanceNodesOfSpecificClasses", "classes": [ { "schemaName": "BisCore", "classNames": ["Subject"] } ], "instanceFilter": "this.Parent = NULL", "arePolymorphic": false, "groupByClass": true, "groupByLabel": false } ] }, { "ruleType": "ChildNodes", "condition": "ParentNode.IsOfClass(\"Subject\", \"BisCore\")", "specifications": [ { "specType": "RelatedInstanceNodes", "relationshipPaths": [ { "relationship": { "schemaName": "BisCore", "className": "SubjectOwnsSubjects" }, "direction": "Forward", "targetClass": { "schemaName": "BisCore", "className": "Subject" } } ], "instanceFilter": "json_extract(this.JsonProperties, \"$.Subject.Job.Bridge\") <> NULL OR ifnull(json_extract(this.JsonProperties, \"$.Subject.Model.Type\"), \"\") = \"Hierarchy\"", "hideNodesInHierarchy": true, "groupByClass": true, "groupByLabel": false }, { "specType": "RelatedInstanceNodes", "relationshipPaths": [ { "relationship": { "schemaName": "BisCore", "className": "SubjectOwnsSubjects" }, "direction": "Forward", "targetClass": { "schemaName": "BisCore", "className": "Subject" } } ], "instanceFilter": "json_extract(this.JsonProperties, \"$.Subject.Job.Bridge\") = NULL AND ifnull(json_extract(this.JsonProperties, \"$.Subject.Model.Type\"), \"\") <> \"Hierarchy\"", "groupByClass": true, "groupByLabel": false } ] }, { "ruleType": "ChildNodes", "condition": "ParentNode.IsOfClass(\"Subject\", \"BisCore\")", "specifications": [ { "specType": "InstanceNodesOfSpecificClasses", "classes": { "schemaName": "BisCore", "classNames": ["Model"] }, "arePolymorphic": true, "relatedInstances": [ { "relationshipPath": { "relationship": { "schemaName": "BisCore", "className": "ModelModelsElement" }, "direction": "Forward", "targetClass": { "schemaName": "BisCore", "className": "InformationPartitionElement" } }, "alias": "partition", "isRequired": true } ], "instanceFilter": "(parent.ECInstanceId = partition.Parent.Id OR json_extract(parent.JsonProperties, \"$.Subject.Model.TargetPartition\") = printf(\"0x%x\", partition.ECInstanceId)) AND NOT this.IsPrivate AND json_extract(partition.JsonProperties, \"$.PhysicalPartition.Model.Content\") = NULL", "groupByClass": true, "groupByLabel": false }, { "specType": "InstanceNodesOfSpecificClasses", "classes": { "schemaName": "BisCore", "classNames": ["Model"] }, "arePolymorphic": true, "relatedInstances": [ { "relationshipPath": { "relationship": { "schemaName": "BisCore", "className": "ModelModelsElement" }, "direction": "Forward", "targetClass": { "schemaName": "BisCore", "className": "InformationPartitionElement" } }, "alias": "partition", "isRequired": true } ], "instanceFilter": "(parent.ECInstanceId = partition.Parent.Id OR json_extract(parent.JsonProperties, \"$.Subject.Model.TargetPartition\") = printf(\"0x%x\", partition.ECInstanceId)) AND NOT this.IsPrivate AND json_extract(partition.JsonProperties, \"$.PhysicalPartition.Model.Content\") <> NULL", "hideNodesInHierarchy": true, "groupByClass": true, "groupByLabel": false } ] }, { "ruleType": "ChildNodes", "condition": "ParentNode.IsOfClass(\"ISubModeledElement\", \"BisCore\")", "specifications": [ { "specType": "RelatedInstanceNodes", "relationshipPaths": [ { "relationship": { "schemaName": "BisCore", "className": "ModelModelsElement" }, "direction": "Backward" } ], "instanceFilter": "NOT this.IsPrivate", "hideNodesInHierarchy": true, "groupByClass": true, "groupByLabel": false } ] }, { "ruleType": "ChildNodes", "condition": "ParentNode.IsOfClass(\"GeometricModel3d\", \"BisCore\")", "specifications": [ { "specType": "RelatedInstanceNodes", "relationshipPaths": [ [ { "relationship": { "schemaName": "BisCore", "className": "ModelContainsElements" }, "direction": "Forward" }, { "relationship": { "schemaName": "BisCore", "className": "GeometricElement3dIsInCategory" }, "direction": "Forward" } ] ], "suppressSimilarAncestorsCheck": true, "groupByClass": true, "groupByLabel": false } ] }, { "ruleType": "ChildNodes", "condition": "ParentNode.IsOfClass(\"GeometricModel2d\", \"BisCore\")", "specifications": [ { "specType": "RelatedInstanceNodes", "relationshipPaths": [ [ { "relationship": { "schemaName": "BisCore", "className": "ModelContainsElements" }, "direction": "Forward" }, { "relationship": { "schemaName": "BisCore", "className": "GeometricElement2dIsInCategory" }, "direction": "Forward" } ] ], "suppressSimilarAncestorsCheck": true, "groupByClass": true, "groupByLabel": false } ] }, { "ruleType": "ChildNodes", "condition": "ParentNode.IsOfClass(\"Model\", \"BisCore\")", "onlyIfNotHandled": true, "specifications": [ { "specType": "RelatedInstanceNodes", "relationshipPaths": [ [ { "relationship": { "schemaName": "BisCore", "className": "ModelContainsElements" }, "direction": "Forward" } ] ], "suppressSimilarAncestorsCheck": true, "groupByClass": true, "groupByLabel": false } ] }, { "ruleType": "ChildNodes", "condition": "ParentNode.IsOfClass(\"SpatialCategory\", \"BisCore\")", "specifications": [ { "specType": "RelatedInstanceNodes", "relationshipPaths": [ { "relationship": { "schemaName": "BisCore", "className": "GeometricElement3dIsInCategory" }, "direction": "Backward" } ], "instanceFilter": "this.Model.Id = parent.parent.ECInstanceId ANDALSO this.Parent = NULL", "groupByClass": true, "groupByLabel": false } ] }, { "ruleType": "ChildNodes", "condition": "ParentNode.IsOfClass(\"DrawingCategory\", \"BisCore\")", "specifications": [ { "specType": "RelatedInstanceNodes", "relationshipPaths": [ { "relationship": { "schemaName": "BisCore", "className": "GeometricElement2dIsInCategory" }, "direction": "Backward" } ], "instanceFilter": "this.Model.Id = parent.parent.ECInstanceId ANDALSO this.Parent = NULL", "groupByClass": true, "groupByLabel": false } ] }, { "ruleType": "ChildNodes", "condition": "ParentNode.IsOfClass(\"Element\", \"BisCore\")", "onlyIfNotHandled": true, "specifications": [ { "specType": "RelatedInstanceNodes", "relationshipPaths": [ { "relationship": { "schemaName": "BisCore", "className": "ElementOwnsChildElements" }, "direction": "Forward" } ], "groupByClass": true, "groupByLabel": false } ] }, { "ruleType": "ImageIdOverride", "condition": "ThisNode.IsInstanceNode ANDALSO ThisNode.IsOfClass(\"Subject\", \"BisCore\")", "imageIdExpression": "IIF(this.Parent.Id = NULL, \"icon-imodel-hollow-2\", \"icon-folder\")" }, { "ruleType": "ImageIdOverride", "condition": "ThisNode.IsInstanceNode ANDALSO ThisNode.IsOfClass(\"Model\", \"BisCore\")", "imageIdExpression": "\"icon-model\"" }, { "ruleType": "ImageIdOverride", "condition": "ThisNode.IsInstanceNode ANDALSO ThisNode.IsOfClass(\"Category\", \"BisCore\")", "imageIdExpression": "\"icon-layers\"" }, { "ruleType": "ImageIdOverride", "condition": "ThisNode.IsInstanceNode ANDALSO ThisNode.IsOfClass(\"Element\", \"BisCore\")", "imageIdExpression": "\"icon-item\"" }, { "ruleType": "ImageIdOverride", "condition": "ThisNode.IsClassGroupingNode", "imageIdExpression": "\"icon-ec-class\"" } ] }
通过将其导入到typescript中，示例代码如下：
/*--------------------------------------------------------------------------------------------- * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from "react"; import { useCallback } from "react"; // tslint:disable-line: no-duplicate-imports import { IModelApp, IModelConnection } from "@bentley/imodeljs-frontend"; import { useOptionalDisposable } from "@bentley/ui-core"; import { ControlledTree, SelectionMode, usePagedTreeNodeLoader, useTreeModelSource, useVisibleTreeNodes } from "@bentley/ui-components"; import { IPresentationTreeDataProvider, PresentationTreeDataProvider, useUnifiedSelectionTreeEventHandler } from "@bentley/presentation-components"; const RULESET_TREE = require("./Tree.ruleset.json"); // tslint:disable-line: no-var-requires /** React properties for the tree component, that accepts an iModel connection with ruleset id */ export interface IModelConnectionProps { /** iModel whose contents should be displayed in the tree */ imodel: IModelConnection; } /** React properties for the tree component, that accepts a data provider */ export interface DataProviderProps { /** Custom tree data provider. */ dataProvider: IPresentationTreeDataProvider; } /** React properties for the tree component */ export type Props = IModelConnectionProps | DataProviderProps; /** Tree component for the viewer app */ export default function SimpleTreeComponent(props: Props) { const imodel = (props as IModelConnectionProps).imodel; const imodelDataProvider = useOptionalDisposable(useCallback(() => { if (imodel) return new PresentationTreeDataProvider({ imodel, ruleset: RULESET_TREE }); return undefined; }, [imodel])); const dataProvider = imodelDataProvider ?? (props as DataProviderProps).dataProvider; const modelSource = useTreeModelSource(dataProvider); const nodeLoader = usePagedTreeNodeLoader(dataProvider, 20, modelSource); const eventsHandler = useUnifiedSelectionTreeEventHandler({ nodeLoader, collapsedChildrenDisposalEnabled: true }); return ( <> <h3 data-testid="tree-component-header">{IModelApp.i18n.translate("SimpleViewer:components.tree")}</h3> <div style={{ flex: "1" }}> <ControlledTree nodeLoader={nodeLoader} visibleNodes={useVisibleTreeNodes(modelSource)} treeEvents={eventsHandler} selectionMode={SelectionMode.Extended} iconsEnabled={true} /> </div> </> ); }
我们即可得到如下显示效果：
由于表格控件，属性框控件也是使用类似的规则，即可实现用户的个性化显示需求，在此不再赘述。若要了解更多相关统一选择内容请参见iModel.js前端统一选择一致性机制。