SelectionVisuals.js 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. import {
  2. forEach
  3. } from 'min-dash';
  4. var MARKER_HOVER = 'hover',
  5. MARKER_SELECTED = 'selected';
  6. /**
  7. * A plugin that adds a visible selection UI to shapes and connections
  8. * by appending the <code>hover</code> and <code>selected</code> classes to them.
  9. *
  10. * @class
  11. *
  12. * Makes elements selectable, too.
  13. *
  14. * @param {EventBus} events
  15. * @param {SelectionService} selection
  16. * @param {Canvas} canvas
  17. */
  18. export default function SelectionVisuals(events, canvas, selection, styles) {
  19. this._multiSelectionBox = null;
  20. function addMarker(e, cls) {
  21. canvas.addMarker(e, cls);
  22. }
  23. function removeMarker(e, cls) {
  24. canvas.removeMarker(e, cls);
  25. }
  26. events.on('element.hover', function(event) {
  27. addMarker(event.element, MARKER_HOVER);
  28. });
  29. events.on('element.out', function(event) {
  30. removeMarker(event.element, MARKER_HOVER);
  31. });
  32. events.on('selection.changed', function(event) {
  33. function deselect(s) {
  34. removeMarker(s, MARKER_SELECTED);
  35. }
  36. function select(s) {
  37. addMarker(s, MARKER_SELECTED);
  38. }
  39. var oldSelection = event.oldSelection,
  40. newSelection = event.newSelection;
  41. forEach(oldSelection, function(e) {
  42. if (newSelection.indexOf(e) === -1) {
  43. deselect(e);
  44. }
  45. });
  46. forEach(newSelection, function(e) {
  47. if (oldSelection.indexOf(e) === -1) {
  48. select(e);
  49. }
  50. });
  51. });
  52. }
  53. SelectionVisuals.$inject = [
  54. 'eventBus',
  55. 'canvas',
  56. 'selection',
  57. 'styles'
  58. ];