bpmn-js/test/spec/features/modeling/layout/LayoutConnectionSpec.js

import {
  bootstrapModeler,
  inject
} from 'test/TestHelper';

import modelingModule from 'lib/features/modeling';
import coreModule from 'lib/core';

import bendpointsModule from 'diagram-js/lib/features/bendpoints';
import connectionPreviewModule from 'diagram-js/lib/features/connection-preview';
import connectModule from 'diagram-js/lib/features/connect';
import createModule from 'diagram-js/lib/features/create';

import {
  createCanvasEvent as canvasEvent
} from '../../../../util/MockEvents';


var testModules = [
  bendpointsModule,
  connectionPreviewModule,
  connectModule,
  coreModule,
  createModule,
  modelingModule
];


describe('features/modeling - layout connection', function() {

  var diagramXML = require('../../../../fixtures/bpmn/sequence-flows.bpmn');

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


  describe('should not touch already layouted', function() {

    it('execute', inject(function(elementRegistry, modeling, bpmnFactory) {

      // given
      var sequenceFlowConnection = elementRegistry.get('SequenceFlow_1'),
          sequenceFlow = sequenceFlowConnection.businessObject;

      var expectedWaypoints = sequenceFlowConnection.waypoints;

      // when
      modeling.layoutConnection(sequenceFlowConnection);

      // then

      // expect cropped, repaired connection
      // that was not actually modified

      expect(sequenceFlowConnection.waypoints).to.eql(expectedWaypoints);

      // expect cropped waypoints in di
      var diWaypoints = bpmnFactory.createDiWaypoints(expectedWaypoints);

      expect(sequenceFlow.di.waypoint).eql(diWaypoints);
    }));


    it('undo', inject(function(elementRegistry, commandStack, modeling) {

      // given
      var sequenceFlowConnection = elementRegistry.get('SequenceFlow_1'),
          sequenceFlow = sequenceFlowConnection.businessObject;

      var oldWaypoints = sequenceFlowConnection.waypoints,
          oldDiWaypoints = sequenceFlow.di.waypoint;

      modeling.layoutConnection(sequenceFlowConnection);

      // when
      commandStack.undo();

      // then
      expect(sequenceFlowConnection.waypoints).eql(oldWaypoints);
      expect(sequenceFlow.di.waypoint).eql(oldDiWaypoints);
    }));


    it('redo', inject(function(elementRegistry, commandStack, modeling) {

      // given
      var sequenceFlowConnection = elementRegistry.get('SequenceFlow_1'),
          sequenceFlow = sequenceFlowConnection.businessObject;

      modeling.layoutConnection(sequenceFlowConnection);

      var newWaypoints = sequenceFlowConnection.waypoints,
          newDiWaypoints = sequenceFlow.di.waypoint;

      // when
      commandStack.undo();
      commandStack.redo();

      // then
      expect(sequenceFlowConnection.waypoints).eql(newWaypoints);
      expect(sequenceFlow.di.waypoint).eql(newDiWaypoints);
    }));

  });


  it('should remove un-needed waypoints', inject(function(elementRegistry, modeling) {

    // given
    var taskShape = elementRegistry.get('Task_2'),
        sequenceFlowConnection = elementRegistry.get('SequenceFlow_1');

    // when
    // moving task
    modeling.moveElements([ taskShape ], { x: 250, y: -95 });

    // then
    var newWaypoints = sequenceFlowConnection.waypoints;

    expect(newWaypoints.map(toPoint)).to.eql([
      { x: 578, y: 341 },
      { x: 982, y: 341 }
    ]);
  }));


  describe('integration', function() {

    describe('re-connection', function() {

      it('should correctly layout after start re-connection', inject(function(elementRegistry, modeling) {

        // given
        var task1 = elementRegistry.get('Task_1'),
            connection = elementRegistry.get('SequenceFlow_1'),
            docking = { x: 292, y: 376 };

        // when
        modeling.reconnectStart(connection, task1, docking);

        // then
        var waypoints = connection.waypoints,
            i,
            first,
            second;

        for (i = 0; i < waypoints.length - 1; i++) {
          first = waypoints[i];
          second = waypoints[i + 1];

          expect(areOnSameAxis(first, second), 'points are on different axes').to.be.true;
        }

      }));


      it('should correctly layout after end re-connection', inject(function(elementRegistry, modeling) {

        // given
        var task1 = elementRegistry.get('Task_1'),
            connection = elementRegistry.get('SequenceFlow_1'),
            docking = { x: 292, y: 376 };

        // when
        modeling.reconnectEnd(connection, task1, docking);

        // then
        var waypoints = connection.waypoints,
            i,
            first,
            second;

        for (i = 0; i < waypoints.length - 1; i++) {
          first = waypoints[i];
          second = waypoints[i + 1];

          expect(areOnSameAxis(first, second), 'points are on different axes').to.be.true;
        }

      }));

    });


    describe('connection preview', function() {

      var task;

      beforeEach(inject(function(elementFactory, dragging) {
        task = elementFactory.createShape({
          type: 'bpmn:Task'
        });

        dragging.setOptions({ manual: true });
      }));

      afterEach(inject(function(dragging) {
        dragging.setOptions({ manual: false });
      }));


      it.skip('should correctly lay out connection preview on create',
        inject(function(canvas, create, dragging, elementRegistry) {

          // given
          var rootShape = canvas.getRootElement(),
              rootShapeGfx = canvas.getGraphics(rootShape),
              task1 = elementRegistry.get('Task_1');

          // when
          create.start(canvasEvent({ x: 0, y: 0 }), task, task1);

          dragging.move(canvasEvent({ x: 175, y: 175 }));
          dragging.hover({ element: rootShape, gfx: rootShapeGfx });
          dragging.move(canvasEvent({ x: 200, y: 200 }));

          var ctx = dragging.context();
          var context = ctx.data.context;

          var connectionPreview = context.getConnection(
            context.canExecute.connect,
            context.source,
            context.shape
          );

          var waypointsPreview = connectionPreview.waypoints.slice();

          dragging.end();

          // then
          expect(task1.outgoing[0]).to.exist;
          expect(task1.outgoing[0].waypoints).to.deep.eql(waypointsPreview);
        })
      );


      it('should correctly lay out new connection preview',
        inject(function(connect, dragging, elementRegistry) {

          // given
          var task1 = elementRegistry.get('Task_1'),
              task2 = elementRegistry.get('Task_2');

          // when
          connect.start(canvasEvent({ x: 0, y: 0 }), task1);

          dragging.move(canvasEvent({ x: 760, y: 420 }));
          dragging.hover({ element: task2 });
          dragging.move(canvasEvent({ x: 782, y: 436 }));

          var ctx = dragging.context();
          var context = ctx.data.context;

          var connectionPreview = context.getConnection(
            context.canExecute,
            context.source,
            context.target
          );

          var waypointsPreview = connectionPreview.waypoints.slice();

          dragging.end();

          // then
          expect(task1.outgoing[0]).to.exist;
          expect(task1.outgoing[0].waypoints).to.deep.eql(waypointsPreview);
        })
      );


      it('should correctly lay out connection preview on reconnect start',
        inject(function(canvas, bendpointMove, dragging, elementRegistry) {

          // given
          var task1 = elementRegistry.get('Task_1'),
              task1Gfx = canvas.getGraphics(task1),
              sequenceFlow2 = elementRegistry.get('SequenceFlow_2');

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

          dragging.move(canvasEvent({ x: 230, y: 360 }));
          dragging.hover({ element: task1, gfx: task1Gfx });
          dragging.move(canvasEvent({ x: 248, y: 382 }));

          var ctx = dragging.context();
          var context = ctx.data.context;

          var connectionPreview = context.getConnection(
            context.allowed,
            context.source,
            context.target
          );

          var waypointsPreview = connectionPreview.waypoints.slice();

          dragging.end();

          // then
          expect(task1.outgoing[0]).to.exist;
          expect(task1.outgoing[0].waypoints).to.deep.eql(waypointsPreview);
        })
      );


      it('should correctly lay out connection preview on reconnect end',
        inject(function(canvas, bendpointMove, dragging, elementRegistry) {

          // given
          var task1 = elementRegistry.get('Task_1'),
              task1Gfx = canvas.getGraphics(task1),
              sequenceFlow2 = elementRegistry.get('SequenceFlow_2');

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

          dragging.move(canvasEvent({ x: 230, y: 360 }));
          dragging.hover({ element: task1, gfx: task1Gfx });
          dragging.move(canvasEvent({ x: 248, y: 382 }));

          var ctx = dragging.context();
          var context = ctx.data.context;

          var connectionPreview = context.getConnection(
            context.allowed,
            context.source,
            context.target
          );

          var waypointsPreview = connectionPreview.waypoints.slice();

          dragging.end();

          // then
          expect(task1.incoming[0]).to.exist;
          expect(task1.incoming[0].waypoints).to.deep.eql(waypointsPreview);
        })
      );


      it('should correctly lay out connection preview on inserted bendpoint move',
        inject(function(bendpointMove, dragging, elementRegistry) {

          // given
          var task2 = elementRegistry.get('Task_2'),
              sequenceFlow1 = elementRegistry.get('SequenceFlow_1');

          // when
          bendpointMove.start(canvasEvent({ x: 700, y: 341 }), sequenceFlow1, 1, true);

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

          var ctx = dragging.context();
          var context = ctx.data.context;

          var connectionPreview = context.getConnection(context.allowed);

          var waypointsPreview = connectionPreview.waypoints.slice();

          dragging.end();

          // then
          expect(task2.incoming[0]).to.exist;
          expect(task2.incoming[0].waypoints).to.deep.eql(waypointsPreview);
        })
      );


      it('should correctly lay out connection preview on existing bendpoint move',
        inject(function(bendpointMove, dragging, elementRegistry) {

          // given
          var task2 = elementRegistry.get('Task_2'),
              sequenceFlow1 = elementRegistry.get('SequenceFlow_1');

          // when
          bendpointMove.start(canvasEvent({ x: 934, y: 341 }), sequenceFlow1, 1);

          dragging.move(canvasEvent({ x: 960, y: 340 }));

          var ctx = dragging.context();
          var context = ctx.data.context;

          var connectionPreview = context.getConnection(context.allowed);

          var waypointsPreview = connectionPreview.waypoints.slice();

          dragging.end();

          // then
          expect(task2.incoming[0]).to.exist;
          expect(task2.incoming[0].waypoints).to.deep.eql(waypointsPreview);
        })
      );
    });


    describe('connection preview with connection type replacement', function() {

      var diagramXML = require('test/spec/features/modeling/behavior/ReplaceConnectionBehavior.message-sequence-flow.bpmn');

      beforeEach(inject(function(dragging) {
        dragging.setOptions({ manual: true });
      }));

      afterEach(inject(function(dragging) {
        dragging.setOptions({ manual: false });
      }));

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


      it('should correctly lay out connection preview when reconnecting with replacement',
        inject(function(canvas, bendpointMove, dragging, elementRegistry) {

          // given
          var participant2 = elementRegistry.get('Participant_2'),
              participant2Gfx = canvas.getGraphics(participant2),
              sequenceFlow1 = elementRegistry.get('SequenceFlow_1');

          // when
          bendpointMove.start(canvasEvent(sequenceFlow1.waypoints[1]), sequenceFlow1, 1);

          dragging.move(canvasEvent({ x: participant2.x + 100, y: participant2.y + 10 }));
          dragging.hover({ element: participant2, gfx: participant2Gfx });
          dragging.move(canvasEvent({ x: participant2.x + 105, y: participant2.y + 10 }));


          var ctx = dragging.context();
          var context = ctx.data.context;

          var connectionPreview = context.getConnection(context.allowed);

          var waypointsPreview = connectionPreview.waypoints.slice();

          dragging.end();

          var newWaypoints = participant2.incoming.slice(-1)[0].waypoints;

          // then
          expect(newWaypoints).to.exist;
          expect(newWaypoints).to.deep.eql(waypointsPreview);
        })
      );
    });


    describe('attaching event', function() {

      var diagramXML = require('test/spec/features/rules/BpmnRules.attaching.bpmn');

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


      it('should correctly lay out connection after replacement',
        inject(function(elementRegistry, modeling) {

          // given
          var event = elementRegistry.get('IntermediateThrowEventWithConnections'),
              parent = elementRegistry.get('SubProcess_1');

          // when
          modeling.moveElements([ event ], { x: 0, y: -90 }, parent, { attach: true });

          // then
          var boundaryEvent = elementRegistry.get('IntermediateThrowEventWithConnections');

          expect(boundaryEvent.outgoing[0]).to.have.waypoints([
            { x: 769, y: 297 },
            { x: 769, y: 369 },
            { x: 837, y: 369 }
          ]);
        })
      );

    });
  });

});



// helpers //////////////////////

function toPoint(p) {
  return {
    x: p.x,
    y: p.y
  };
}

function areOnSameAxis(a, b) {
  return a.x === b.x || a.y === b.y;
}