test(selectionVisuals): verify box for multi-element selection

lib/features/selection/SelectionVisuals.js

@@ -30,7 +30,7 @@ var SELECTION_OUTLINE_PADDING = 6;
  * @param {Canvas} canvas
  * @param {EventBus} eventBus
  */
-export default function SelectionVisuals(canvas, eventBus) {
+export default function SelectionVisuals(canvas, eventBus, selection) {
   this._canvas = canvas;
 
   var self = this;
@@ -80,11 +80,19 @@ export default function SelectionVisuals(canvas, eventBus) {
 
     self._updateSelectionOutline(newSelection);
   });
+
+
+  eventBus.on('element.changed', function(event) {
+    if (selection.isSelected(event.element)) {
+      self._updateSelectionOutline(selection.get());
+    }
+  });
 }
 
 SelectionVisuals.$inject = [
   'canvas',
-  'eventBus'
+  'eventBus',
+  'selection'
 ];
 
 SelectionVisuals.prototype._updateSelectionOutline = function(selection) {

test/spec/features/selection/SelectionVisualsSpec.js

@@ -4,15 +4,22 @@ import {
 } from 'test/TestHelper';
 
 import selectionModule from 'lib/features/selection';
+import modelingModule from 'lib/features/modeling';
 
 import {
   query as domQuery
 } from 'min-dom';
 
+import { getBBox } from 'lib/util/Elements';
+
+import {
+  resizeBounds
+} from 'lib/features/resize/ResizeUtil';
+
 
 describe('features/selection/SelectionVisuals', function() {
 
-  beforeEach(bootstrapDiagram({ modules: [ selectionModule ] }));
+  beforeEach(bootstrapDiagram({ modules: [ selectionModule, modelingModule ] }));
 
   describe('bootstrap', function() {
 
@@ -55,19 +62,132 @@ describe('features/selection/SelectionVisuals', function() {
       canvas.addConnection(connection);
     }));
 
+    describe('single element', function() {
 
-    it('should show box on select', inject(function(selection, canvas) {
+      it('should show box on select', inject(function(selection, canvas) {
 
-      // when
-      selection.select(connection);
+        // when
+        selection.select(connection);
 
-      // then
-      var gfx = canvas.getGraphics(connection),
-          outline = domQuery('.djs-outline', gfx);
+        // then
+        var gfx = canvas.getGraphics(connection),
+            outline = domQuery('.djs-outline', gfx);
 
-      expect(outline).to.exist;
-    }));
+        expect(outline).to.exist;
+      }));
+
+    });
+
+
+    describe('multi element', function() {
+
+      var selectedShapes, outline, bounds;
+
+      beforeEach(inject(function(selection) {
+
+        selectedShapes = [ connection, shape2 ];
+        selection.select(selectedShapes);
+
+        outline = domQuery('.djs-selection-outline');
+
+        bounds = getBounds(outline);
+      }));
+
+
+      it('should show box', inject(function(selection) {
+        expect(outline).to.exist;
+      }));
+
+
+      it('selection box should contain all selected elements', inject(function(selection) {
+
+        // then
+        selectedShapes.forEach(function(shape) {
+          var bbox = getBBox(shape);
+
+          expect(bbox.x).to.be.at.least(bounds.x);
+          expect(bbox.y).to.be.at.least(bounds.y);
+          expect(bbox.x + bbox.width).to.be.at.most(bounds.x + bounds.width);
+          expect(bbox.y + bbox.height).to.be.at.most(bounds.y + bounds.height);
+        });
+
+      }));
+
+
+      it('selection box should react to element changes', inject(function(selection, modeling) {
+
+        // when
+        modeling.resizeShape(shape2, resizeBounds(bounds, 'nw', { x: 10, y: 20 }));
+
+        outline = domQuery('.djs-selection-outline');
+
+        var newBounds = getBounds(outline);
+
+        // then
+        expect(newBounds).to.not.eql(bounds);
+
+        // then
+        selectedShapes.forEach(function(shape) {
+          var bbox = getBBox(shape);
+
+          expect(bbox.x).to.be.at.least(newBounds.x);
+          expect(bbox.y).to.be.at.least(newBounds.y);
+          expect(bbox.x + bbox.width).to.be.at.most(newBounds.x + newBounds.width);
+          expect(bbox.y + bbox.height).to.be.at.most(newBounds.y + newBounds.height);
+        });
+
+      }));
+
+
+      it('selection box should react to undo/redo', inject(function(selection, modeling, commandStack) {
+
+        // given
+        modeling.resizeShape(shape2, resizeBounds(shape, 'nw', { x: 10, y: 20 }));
+
+        var outline = domQuery('.djs-selection-outline');
+
+        var bounds = getBounds(outline);
+
+        // when
+        commandStack.undo();
+
+        outline = domQuery('.djs-selection-outline');
+
+        var newBounds = getBounds(outline);
+
+        // then
+        expect(bounds).to.not.eql(newBounds);
+
+        // then
+        selectedShapes.forEach(function(shape) {
+          expectShapeToBeWithinLimits(shape, newBounds);
+        });
+
+      }));
+
+    });
 
   });
 
 });
+
+
+// helpers /////
+
+function getBounds(outline) {
+  return {
+    width: parseInt(outline.getAttribute('width')),
+    height: parseInt(outline.getAttribute('height')),
+    x: parseInt(outline.getAttribute('x')),
+    y: parseInt(outline.getAttribute('y'))
+  };
+}
+
+function expectShapeToBeWithinLimits(shape, limits) {
+  var bbox = getBBox(shape);
+
+  expect(bbox.x).to.be.at.least(limits.x);
+  expect(bbox.y).to.be.at.least(limits.y);
+  expect(bbox.x + bbox.width).to.be.at.most(limits.x + limits.width);
+  expect(bbox.y + bbox.height).to.be.at.most(limits.y + limits.height);
+}