import {
forEach
} from 'min-dash';
var MARKER_HOVER = 'hover',
MARKER_SELECTED = 'selected';
/**
* A plugin that adds a visible selection UI to shapes and connections
* by appending the hover
and selected
classes to them.
*
* @class
*
* Makes elements selectable, too.
*
* @param {EventBus} events
* @param {SelectionService} selection
* @param {Canvas} canvas
*/
export default function SelectionVisuals(events, canvas, selection, styles) {
this._multiSelectionBox = null;
function addMarker(e, cls) {
canvas.addMarker(e, cls);
}
function removeMarker(e, cls) {
canvas.removeMarker(e, cls);
}
events.on('element.hover', function(event) {
addMarker(event.element, MARKER_HOVER);
});
events.on('element.out', function(event) {
removeMarker(event.element, MARKER_HOVER);
});
events.on('selection.changed', function(event) {
function deselect(s) {
removeMarker(s, MARKER_SELECTED);
}
function select(s) {
addMarker(s, MARKER_SELECTED);
}
var oldSelection = event.oldSelection,
newSelection = event.newSelection;
forEach(oldSelection, function(e) {
if (newSelection.indexOf(e) === -1) {
deselect(e);
}
});
forEach(newSelection, function(e) {
if (oldSelection.indexOf(e) === -1) {
select(e);
}
});
});
}
SelectionVisuals.$inject = [
'eventBus',
'canvas',
'selection',
'styles'
];