# 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

    1×
    1×

    1353×

    338×

    97×

    1353×
    2×

    1353×

    1353×

    97×

    336×

    1814×
    1814×

    1814×
    99×
    97×

    1814×
    338×
    336×

    1×

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