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