feat(lasso-tool): add to selection through SHIFT

Related to bpmn-io/bpmn-js#2053

lib/features/lasso-tool/LassoTool.js

@@ -21,6 +21,8 @@ import {
  * @typedef {import('../mouse/Mouse').default} Mouse
  * @typedef {import('../selection/Selection').default} Selection
  * @typedef {import('../tool-manager/ToolManager').default} ToolManager
+ *
+ * @typedef {import('../../util/Types').Rect} Rect
  */
 
 var LASSO_TOOL_CURSOR = 'crosshair';
@@ -117,7 +119,9 @@ export default function LassoTool(
       return element;
     });
 
-    self.select(elements, bbox);
+    var add = hasSecondaryModifier(event);
+
+    self.select(elements, bbox, add);
   });
 
   eventBus.on('lasso.start', function(event) {
@@ -169,18 +173,30 @@ LassoTool.$inject = [
   'mouse'
 ];
 
-
+/**
+ * Activate lasso.
+ *
+ * @param {MouseEvent} event
+ * @param {boolean} [autoActivate=false]
+ */
 LassoTool.prototype.activateLasso = function(event, autoActivate) {
 
   this._dragging.init(event, 'lasso', {
     autoActivate: autoActivate,
     cursor: LASSO_TOOL_CURSOR,
     data: {
       context: {}
-    }
+    },
+    keepSelection: true
   });
 };
 
+/**
+ * Activate selection.
+ *
+ * @param {MouseEvent} event
+ * @param {boolean} [autoActivate=false]
+ */
 LassoTool.prototype.activateSelection = function(event, autoActivate) {
 
   this._dragging.init(event, 'lasso.selection', {
@@ -189,16 +205,27 @@ LassoTool.prototype.activateSelection = function(event, autoActivate) {
     cursor: LASSO_TOOL_CURSOR,
     data: {
       context: {}
-    }
+    },
+    keepSelection: true
   });
 };
 
-LassoTool.prototype.select = function(elements, bbox) {
+/**
+ * Select elements within the given bounds.
+ *
+ * @param {Element[]} elements
+ * @param {Rect} bbox
+ * @param {boolean} [add=false]
+ */
+LassoTool.prototype.select = function(elements, bbox, add) {
   var selectedElements = getEnclosedElements(elements, bbox);
 
-  this._selection.select(values(selectedElements));
+  this._selection.select(values(selectedElements), add);
 };
 
+/**
+ * Toggle the lasso tool.
+ */
 LassoTool.prototype.toggle = function() {
   if (this.isActive()) {
     return this._dragging.cancel();
@@ -209,14 +236,18 @@ LassoTool.prototype.toggle = function() {
   this.activateSelection(mouseEvent, !!mouseEvent);
 };
 
+/**
+ * Check if the lasso tool is active.
+ *
+ * @returns {boolean}
+ */
 LassoTool.prototype.isActive = function() {
   var context = this._dragging.context();
 
   return context && /^lasso/.test(context.prefix);
 };
 
 
-
 function toBBox(event) {
 
   var start = {

test/spec/features/lasso-tool/LassoToolSpec.js

@@ -102,7 +102,6 @@ describe('features/lasso-tool', function() {
         height: 220
       };
 
-
       // when
       lassoTool.select(elements, bbox);
 
@@ -113,6 +112,34 @@ describe('features/lasso-tool', function() {
       expect(selectedElements[0]).to.equal(childShape2);
       expect(selectedElements[1]).to.equal(childShape3);
     }));
+
+
+    it('shoud add elements in bbox to selected elements', inject(function(lassoTool, selection) {
+
+      // given
+      selection.select([ childShape ]);
+
+      var elements = [ childShape2, childShape3 ];
+
+      var bbox = {
+        x: 175,
+        y: 0,
+        width: 120,
+        height: 220
+      };
+
+      // when
+      lassoTool.select(elements, bbox, true);
+
+      // then
+      var selectedElements = selection.get();
+
+      expect(selectedElements.length).to.equal(3);
+      expect(selectedElements[0]).to.equal(childShape);
+      expect(selectedElements[1]).to.equal(childShape2);
+      expect(selectedElements[2]).to.equal(childShape3);
+    }));
+
   });