@itwin/unified-selection
Version:
Package for managing unified selection in iTwin.js applications.
85 lines (66 loc) • 4.38 kB
Markdown
# /unified-selection
Copyright © Bentley Systems, Incorporated. All rights reserved. See LICENSE.md for license terms and full copyright notice.
The purpose of the `/unified-selection` package and unified selection in general is to act as a single source of truth of what is selected in an [iTwin.js](https://www.itwinjs.org/) application.
## Concepts
The API consists of a few very basic concepts:
- A `Selectable` is something that can be selected and is associated with an [EC](https://www.itwinjs.org/bis/ec/) instance. There are 2 types of selectables:
- `SelectableInstanceKey` uniquely identifies a single EC instance through a full class name and [ECInstanceId](https://www.itwinjs.org/learning/ecsql/#ecinstanceid-and-ecclassid).
- `CustomSelectable` is identified by an arbitrary `identifier` string and knows how to get any number of `SelectableInstanceKey` associated with it.
- `Selectables` is a container for multiple `Selectable` instances. The container is structured in a way that allows to quickly find specific selectables by their identifier.
- `SelectionStorage` is an interface that manages `Selectables` for different [iModels](https://www.itwinjs.org/learning/imodels/). It allows:
- Changing the selection (add, remove, replace, clear).
- Get active selection.
- Listen to selection changes.
The package delivers the `createStorage()` function to create an instance of `SelectionStorage`. Consumers are also expected to call `SelectionStorage.clearStorage` whenever an iModel is closed to free up memory.
## Usage example
```ts
// Create a global selection store (generally, somewhere in main.ts or similar). This store
// must be shared across all the application's components to ensure unified selection experience.
import { createStorage } from "@itwin/unified-selection";
const unifiedSelection = createStorage();
// The store should to be cleaned up when iModels are closed to free up memory, e.g.:
import { IModelConnection } from "@itwin/core-frontend";
import { createIModelKey } from "@itwin/presentation-core-interop";
IModelConnection.onClose.addListener((imodel) => {
unifiedSelection.clearStorage({ imodelKey: createIModelKey(imodel) });
});
// A demo selection listener logs selection changes to the console:
import { Selectables } from "@itwin/unified-selection";
unifiedSelection.selectionChangeEvent.addListener(({ imodelKey, source, changeType, selectables }) => {
const suffix = `in ${imodelKey} iModel from ${source} component`;
const numSelectables = Selectables.size(selectables);
switch (changeType) {
case "add":
console.log(`Added ${numSelectables} items to selection ${suffix}.`);
break;
case "remove":
console.log(`Removed ${numSelectables} items from selection ${suffix}.`);
break;
case "replace":
console.log(`Replaced selection with ${numSelectables} items ${suffix}.`);
break;
case "clear":
console.log(`Cleared selection ${suffix}.`);
break;
}
});
// An interactive component that allows selecting elements, representing something in an iModel, may want to
// add that something to unified selection:
MyComponent.onECInstanceSelected((imodel: IModelConnection, key: { className: string; id: Id64String }) => {
unifiedSelection.addToSelection({ imodelKey: createIModelKey(imodel), source: "MyComponent", selectables: [key] });
});
```
## Learning
Are you migrating from `SelectionManager` in `/presentation-frontend`? Check out our [Migrating from `SelectionManager`](./learning/MigrationGuide.md) learning page!
Below is a list of learning material related integrating unified selection into your components:
- General topics:
- [Selection levels](./learning/SelectionLevels.md)
- [Selection scopes](./learning/SelectionScopes.md)
- [Hilite sets](./learning/HiliteSets.md)
- [Caveats](./learning/Caveats.md)
- Integrating with iTwin.js components:
- [Viewport / iModel](./learning/SyncWithIModelConnection.md)
- [Tree](./learning/SyncWithTree.md)
- [Property grid](./learning/SyncWithPropertyGrid.md)
- [Table](./learning/SyncWithTable.md)
Do you think something is missing in the above list? Let us know by [creating an issue](https://github.com/iTwin/presentation/issues/new?assignees=&labels=documentation%2C+presentation&projects=&template=learning-material-request.md&title=)!