bpmn-js/test/spec/features/modeling/LabelLayoutingSpec.js

'use strict';

require('../../../TestHelper');

/* global bootstrapModeler, inject */


var coreModule = require('lib/core'),
    bendpointsModule = require('diagram-js/lib/features/bendpoints'),
    modelingModule = require('lib/features/modeling'),
    labelEditingModule = require('lib/features/label-editing');

var canvasEvent = require('../../../util/MockEvents').createCanvasEvent;

var testModules = [
  coreModule,
  modelingModule,
  labelEditingModule,
  bendpointsModule
];


describe('modeling - label layouting', function() {

  describe('should create label', function() {

    var diagramXML = require('./LabelLayouting.initial.bpmn');

    beforeEach(bootstrapModeler(diagramXML, {
      modules: testModules
    }));


    it('horizontal', inject(function(modeling, elementRegistry) {

      // given
      var element1 = elementRegistry.get('StartEvent_1'),
          element2 = elementRegistry.get('ExclusiveGateway_2');

      // when
      var connection = modeling.connect(element1, element2);

      // then
      expect(connection.label.x).to.be.equal(427);
      expect(connection.label.y).to.be.equal(332);
    }));


    it('vertical', inject(function(modeling, elementRegistry) {

      // given
      var element1 = elementRegistry.get('StartEvent_1'),
          element2 = elementRegistry.get('ExclusiveGateway_1');

      // when
      var connection = modeling.connect(element1, element2);

      // then
      expect(connection.label.x).to.be.equal(292);
      expect(connection.label.y).to.be.equal(219.5);
    }));

  });


  describe('should move label', function() {

    var diagramXML = require('./LabelLayouting.move.bpmn');

    beforeEach(bootstrapModeler(diagramXML, {
      modules: testModules
    }));

    describe('on segment move', function() {

      it('left - no relayout', inject(function(elementRegistry, connectionSegmentMove, dragging) {

        // given
        var connection = elementRegistry.get('SequenceFlow_B'),
            labelPosition = getLabelPosition(connection);

        // when
        connectionSegmentMove.start(canvasEvent({ x: 0, y: 0 }), connection, 2);

        dragging.move(canvasEvent({ x: -30, y: 0 }));

        dragging.end();

        // then
        expectLabelMoved(connection, labelPosition, { x: -30, y: 0 });
      }));


      it('left - remove bendpoint', inject(function(elementRegistry, connectionSegmentMove, dragging) {

        // given
        var connection = elementRegistry.get('SequenceFlow_B'),
            labelPosition = getLabelPosition(connection);

        // when
        connectionSegmentMove.start(canvasEvent({ x: 0, y: 0 }), connection, 2);

        dragging.move(canvasEvent({ x: -70, y: 0 }));

        dragging.end();

        // then
        expectLabelMoved(connection, labelPosition, { x: -70, y: 23 });
      }));


      it('right - no relayout', inject(function(elementRegistry, connectionSegmentMove, dragging) {

        // given
        var connection = elementRegistry.get('SequenceFlow_B'),
            labelPosition = getLabelPosition(connection);

        // when
        connectionSegmentMove.start(canvasEvent({ x: 0, y: 0 }), connection, 2);

        dragging.move(canvasEvent({ x: 30, y: 0 }));

        dragging.end();

        // then
        expectLabelMoved(connection, labelPosition, { x: 30, y: 0 });
      }));


      it('right - remove bendpoint', inject(function(elementRegistry, connectionSegmentMove, dragging) {

        // given
        var connection = elementRegistry.get('SequenceFlow_B'),
            labelPosition = getLabelPosition(connection);

        // when
        connectionSegmentMove.start(canvasEvent({ x: 0, y: 0 }), connection, 2);

        dragging.move(canvasEvent({ x: 70, y: 0 }));

        dragging.end();

        // then
        expectLabelMoved(connection, labelPosition, { x: 70, y: -17 });
      }));


      it('down', inject(function(elementRegistry, connectionSegmentMove, dragging) {

        // given
        var connection = elementRegistry.get('SequenceFlow_C'),
            labelPosition = getLabelPosition(connection);

        // when
        connectionSegmentMove.start(canvasEvent({ x: 0, y: 0 }), connection, 2);

        dragging.move(canvasEvent({ x: 0, y: 70 }));

        dragging.end();

        // then
        expectLabelMoved(connection, labelPosition, { x: 0, y: 70 });

      }));


      it('up - remove two bendpoints', inject(function(elementRegistry, connectionSegmentMove, dragging) {

        // given
        var connection = elementRegistry.get('SequenceFlow_C'),
            labelPosition = getLabelPosition(connection);

        // when
        connectionSegmentMove.start(canvasEvent({ x: 0, y: 0 }), connection, 2);

        dragging.move(canvasEvent({ x: 0, y: -90 }));

        dragging.end();

        // then
        expectLabelMoved(connection, labelPosition, { x: -39, y: -85 });

      }));

      // TODO(@janstuemmel): solve by connectionSegmentMove refactoring
      it.skip('up - remove two bendpoints - redundant waypoints', inject(function(elementRegistry, connectionSegmentMove, dragging, bendpointMove) {

        // given
        var connection = elementRegistry.get('SequenceFlow_C');

        bendpointMove.start(canvasEvent({ x: 0, y: 0 }), connection, 1);
        dragging.move(canvasEvent({ x: 620, y: 435 }));
        dragging.end();

        bendpointMove.start(canvasEvent({ x: 0, y: 0 }), connection, 2);
        dragging.move(canvasEvent({ x: 300, y: 435 }));
        dragging.end();

        var labelPosition = getLabelPosition(connection);

        // when
        connectionSegmentMove.start(canvasEvent({ x: 0, y: 0 }), connection, 2);
        dragging.move(canvasEvent({ x: 0, y: -160 }));
        dragging.end();

        // then
        expect(getLabelPosition(connection)).to.not.eql(labelPosition);

      }));

    });

    describe('on reconnect', function() {

      it('start', inject(function(elementRegistry, modeling) {

        // given
        var connection = elementRegistry.get('SequenceFlow_D'),
            shape = elementRegistry.get('Task_1');

        // when
        modeling.reconnectStart(connection, shape, { x: 0, y: 0 });

        // then
        expect(Math.round(connection.label.x)).to.be.equal(528);
        expect(Math.round(connection.label.y)).to.be.equal(137);

      }));


      it('end', inject(function(elementRegistry, modeling) {

        // given
        var connection = elementRegistry.get('SequenceFlow_A'),
            shape = elementRegistry.get('Task_2');

        // when
        modeling.reconnectEnd(connection, shape, { x: 294, y: 270 });

        // then
        expect(Math.round(connection.label.x)).to.be.equal(215);
        expect(Math.round(connection.label.y)).to.be.equal(184);

      }));

    });

    describe('on shape move', function() {

      it('down', inject(function(elementRegistry, modeling) {

        // given
        var connection = elementRegistry.get('SequenceFlow_E'),
            shape = elementRegistry.get('Task_4'),
            labelPosition = getLabelPosition(connection);

        // when
        modeling.moveShape(shape, { x: 0, y: 100 });

        // then
        expectLabelMoved(connection, labelPosition, { x: 0, y: 100 });

      }));

    });

    describe('on bendpoint add/delete/moving', function() {


      it('move, label on segment', inject(function(elementRegistry, bendpointMove, dragging) {

        // given
        var connection = elementRegistry.get('SequenceFlow_B');

        // when
        bendpointMove.start(canvasEvent({ x: 0, y: 0 }), connection, 1);

        dragging.move(canvasEvent({ x: 455 + 50, y: 120 }));

        dragging.end();

        // then
        expect(Math.round(connection.label.x)).to.be.equal(425);
        expect(Math.round(connection.label.y)).to.be.equal(170);

      }));


      it('move, label on bendpoint', inject(function(elementRegistry, bendpointMove, dragging, modeling) {

        // given
        var connection = elementRegistry.get('SequenceFlow_C');

        // label out of segments, on a bendpoint (idx=1)
        modeling.moveShape(connection.label, { x: 40, y: 0 });

        // when
        bendpointMove.start(canvasEvent({ x: 0, y: 0 }), connection, 1);

        dragging.move(canvasEvent({ x: 455 + 50, y: 500 }));

        dragging.end();

        // then
        expect(Math.round(connection.label.x)).to.be.equal(477);
        expect(Math.round(connection.label.y)).to.be.equal(507);

      }));


      it('remove bendpoint when label on segment', inject(function(elementRegistry, bendpointMove, dragging) {

        // given
        var connection = elementRegistry.get('SequenceFlow_B');

        // when
        bendpointMove.start(canvasEvent({ x: 0, y: 0 }), connection, 1);

        dragging.move(canvasEvent({ x: 455, y: 120 + 160 }));

        dragging.end();

        // then
        expect(Math.round(connection.label.x)).to.be.equal(380);
        expect(Math.round(connection.label.y)).to.be.equal(190);

      }));


      it('add bendpoint, label on right segment', inject(function(elementRegistry, bendpointMove, dragging, canvas) {

        // given
        var connection = elementRegistry.get('SequenceFlow_A');

        // when
        bendpointMove.start(canvasEvent({ x: 0, y: 0 }), connection, 1, true);

        dragging.hover({
          element: connection,
          gfx: canvas.getGraphics(connection)
        });

        dragging.move(canvasEvent({ x: 220, y: 200 }));

        dragging.end();

        // then
        expect(Math.round(connection.label.x)).to.be.equal(211);
        expect(Math.round(connection.label.y)).to.be.equal(152);

      }));


      it('add bendpoint, label on left segment', inject(function(elementRegistry, bendpointMove, dragging, canvas) {

        // given
        var connection = elementRegistry.get('SequenceFlow_A');

        // when
        bendpointMove.start(canvasEvent({ x: 0, y: 0 }), connection, 1, true);

        dragging.hover({
          element: connection,
          gfx: canvas.getGraphics(connection)
        });

        dragging.move(canvasEvent({ x: 260, y: 200 }));

        dragging.end();

        // then
        expect(Math.round(connection.label.x)).to.be.equal(197);
        expect(Math.round(connection.label.y)).to.be.equal(147);


      }));


      it('remove bendpoint when label on bendpoint', inject(function(elementRegistry, bendpointMove, dragging, modeling) {

        // given
        var connection = elementRegistry.get('SequenceFlow_C');

        // label out of segments, on a bendpoint
        modeling.moveShape(connection.label, { x: 40, y: 0 });

        // when
        bendpointMove.start(canvasEvent({ x: 0, y: 0 }), connection, 1);

        dragging.move(canvasEvent({ x: 455, y: 320 }));

        dragging.end();

        // then
        expect(Math.round(connection.label.x)).to.be.equal(426);
        expect(Math.round(connection.label.y)).to.be.equal(287);

      }));


      it('add benpoint, label on segment, should not move', inject(function(elementRegistry, bendpointMove, canvas, dragging, modeling) {

        // given
        var connection = elementRegistry.get('SequenceFlow_C');

        // label out of segments, on a bendpoint
        modeling.moveShape(connection.label, { x: 40, y: -60 });
        var position = getLabelPosition(connection);

        // when
        bendpointMove.start(canvasEvent({ x: 0, y: 0 }), connection, 2, true);

        dragging.hover({
          element: connection,
          gfx: canvas.getGraphics(connection)
        });

        dragging.move(canvasEvent({ x: 400, y: 350 }));

        dragging.end();

        // then
        expectLabelMoved(connection, position, { x: 0, y: 0 });

      }));

    });

    describe('special cases', function() {

      it('should behave properly, right after importing', inject(function(elementRegistry, connectionSegmentMove, dragging, modeling) {

        // given
        var connection = elementRegistry.get('SequenceFlow_C'),
            labelPosition = getLabelPosition(connection),
            label = connection.label;

        // when
        connectionSegmentMove.start(canvasEvent({ x: 0, y: 0 }), connection, 2);

        dragging.move(canvasEvent({ x: 0, y: 70 }));

        dragging.end();

        // move label
        modeling.moveShape(label, { x: 40, y: -30 });

        // drag again
        connectionSegmentMove.start(canvasEvent({ x: 0, y: 0 }), connection, 1);

        dragging.move(canvasEvent({ x: -20, y: 0 }));

        dragging.end();

        // then
        expectLabelMoved(connection, labelPosition, { x: 20, y: 40 });

      }));


      it('should reposition on right segment', inject(function(elementRegistry, connectionSegmentMove, dragging) {

        // given
        var connection = elementRegistry.get('SequenceFlow_E'),
            labelPosition = getLabelPosition(connection);

        // when
        connectionSegmentMove.start(canvasEvent({ x: 0, y: 0 }), connection, 2);

        dragging.move(canvasEvent({ x: -100, y: 0 }));

        dragging.end();

        // then
        expectLabelMoved(connection, labelPosition, { x: -45, y: -70 });

      }));


      describe.skip('label out of bounds', function() {


        it('should not move label that is out of bounds', inject(function(elementRegistry, connectionSegmentMove, dragging, modeling) {

          // given
          var connection = elementRegistry.get('SequenceFlow_C');

          // move shape away
          modeling.moveShape(connection.label, { x: 0, y: 140 });

          var labelPosition = getLabelPosition(connection);

          // when
          connectionSegmentMove.start(canvasEvent({ x: 0, y: 0 }), connection, 2);

          dragging.move(canvasEvent({ x: 0, y: 30 }));

          dragging.end();

          // then
          expectLabelMoved(connection, labelPosition, { x: 0, y: 0 });
        }));


        it('should not move label that is out of bounds in corner', inject(function(elementRegistry, connectionSegmentMove, dragging, modeling) {

          // given
          var connection = elementRegistry.get('SequenceFlow_C');

          // move shape away
          modeling.moveShape(connection.label, { x: 50, y: 0 });

          var labelPosition = getLabelPosition(connection);

          // when
          connectionSegmentMove.start(canvasEvent({ x: 0, y: 0 }), connection, 2);

          dragging.move(canvasEvent({ x: 0, y: 30 }));

          dragging.end();

          // then
          expectLabelMoved(connection, labelPosition, { x: 0, y: 0 });
        }));

      });

    });

  });

});



function getLabelPosition(connection) {

  var label = connection.label;

  var mid = {
    x: label.x + (label.width / 2),
    y: label.y + (label.height / 2)
  };

  return mid;
}


function expectLabelMoved(connection, oldPosition, expectedDelta) {

  var newPosition = getLabelPosition(connection);

  var delta = {
    x: Math.round(newPosition.x - oldPosition.x),
    y: Math.round(newPosition.y - oldPosition.y)
  };

  expect(delta).to.eql(expectedDelta);
}