WorkingWithSelection

Working with Selection

In this chapter, we're going to learn how to get selected elements, enforce to select elements, and do something by listening to selection changed events.

Getting selected elements

Users can select elements in a diagram or in Explorer. Sometimes we may need to access only the selected elements. To get selected elements we need SelectionManager module.

var SelectionManager = app.getModule('engine/SelectionManager');

Before to get detail, we need to distinguish between selected views and selected models. If you select the Book class in a diagram, then there are a selected view (UMLClassView) and a selected model (UMLClass). If you select the Author class in Explorer, then there is a selected model (UMLClass) and no selected views.

We can access to selected elements using SelectionManager as following:

var selectedViews = SelectionManager.getSelectedViews();
var selectedModels = SelectionManager.getSelectedModels();
var selected = SelectionManager.getSelected(); // === selectedModels[0]

Enforcing to select particular elements

To select a model element in Explorer, use ModelExplorerView module. (Assume that Book.mdj used in Accessing Elements were loaded)

var Repository = app.getModule('core/Repository'),
    ModelExplorerView = app.getModule('explorer/ModelExplorerView');

var book = Repository.select("Model::Book")[0];

ModelExplorerView.select(book);

To scroll automatically so as to show the element, pass true value as the second parameter.

ModelExplorerView.select(book, true);

To select a view element in diagram, use DiagramManager module. You can find more functions about selection in API Docs.

var Repository = app.getModule('core/Repository'),
    DiagramManager = app.getModule('diagrams/DiagramManager');

var diagram = Repository.select("@Diagram")[0];
var view1 = diagram.ownedViews[0];

DiagramManager.selectInDiagram(view1);

Listening selection changed event

Now we will show how to listen and handle a selection change event. An array of selected model elements and an array of selected view elements are passed to the second and the third parameters respectively to the callback function.

var SelectionManager = app.getModule('engine/SelectionManager');

$(SelectionManager).on('selectionChanged', function (evt, models, views) {
    console.log("Selected number of model elements: ", models.length);
    console.log("Selected number of view elements: ", views.length);
});