all files / diagram-js/lib/features/selection/ SelectionVisuals.js

95.24% Statements 20/21
100% Branches 4/4
90% Functions 9/10
95.24% Lines 20/21
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73                                        1353×     338×       97×     1353×     1353×       1353×     97×       336×     1814× 1814×   1814× 99× 97×       1814× 338× 336×                    
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 <code>hover</code> and <code>selected</code> 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'
];