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' ];