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

604 lines
16 KiB
JavaScript
Raw Normal View History

'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'),
spaceTool = require('diagram-js/lib/features/space-tool');
var canvasEvent = require('../../../util/MockEvents').createCanvasEvent;
var testModules = [
coreModule,
modelingModule,
labelEditingModule,
bendpointsModule,
spaceTool
];
describe('modeling - label layouting', function() {
describe('should position created 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(472);
expect(connection.label.y).to.be.within(335, 336);
}));
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(337);
expect(connection.label.y).to.be.within(222, 224);
}));
});
describe('should move label', function() {
var diagramXML = require('./LabelLayouting.move.bpmn');
beforeEach(bootstrapModeler(diagramXML, {
modules: testModules
}));
describe('on segment move', function() {
2017-03-21 08:01:42 +00:00
it('label name not set -> move label to waypoints mid', inject(
function(modeling, elementRegistry, connectionSegmentMove, dragging) {
2017-03-21 08:01:42 +00:00
// given
var connection = elementRegistry.get('SequenceFlow_C'),
labelPosition = getLabelPosition(connection);
2017-03-21 08:01:42 +00:00
connection.label.businessObject.name = false;
connection.label.hidden = true;
2017-03-21 08:01:42 +00:00
// when
connectionSegmentMove.start(canvasEvent({ x: 0, y: 0 }), connection, 2);
2017-03-21 08:01:42 +00:00
dragging.move(canvasEvent({ x: 0, y: 50 }));
2017-03-21 08:01:42 +00:00
dragging.end();
2017-03-21 08:01:42 +00:00
// then
expect(connection.label.y - labelPosition.y).to.be.within(13, 16);
expect(connection.label.x - labelPosition.x).to.be.within(-87, -85);
}
));
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 });
}));
2017-03-21 08:01:42 +00:00
it('left - remove bendpoint', inject(
function(elementRegistry, connectionSegmentMove, dragging) {
2017-03-21 08:01:42 +00:00
// given
var connection = elementRegistry.get('SequenceFlow_B'),
labelPosition = getLabelPosition(connection);
2017-03-21 08:01:42 +00:00
// when
connectionSegmentMove.start(canvasEvent({ x: 0, y: 0 }), connection, 2);
2017-03-21 08:01:42 +00:00
dragging.move(canvasEvent({ x: -70, y: 0 }));
2017-03-21 08:01:42 +00:00
dragging.end();
2017-03-21 08:01:42 +00:00
// then
expectLabelMoved(connection, labelPosition, { x: -70, y: 24 });
}
));
2017-03-21 08:01:42 +00:00
it('right - no relayout', inject(
function(elementRegistry, connectionSegmentMove, dragging) {
2017-03-21 08:01:42 +00:00
// given
var connection = elementRegistry.get('SequenceFlow_B'),
labelPosition = getLabelPosition(connection);
2017-03-21 08:01:42 +00:00
// when
connectionSegmentMove.start(canvasEvent({ x: 0, y: 0 }), connection, 2);
2017-03-21 08:01:42 +00:00
dragging.move(canvasEvent({ x: 30, y: 0 }));
2017-03-21 08:01:42 +00:00
dragging.end();
2017-03-21 08:01:42 +00:00
// then
expectLabelMoved(connection, labelPosition, { x: 30, y: 0 });
}
));
2017-03-21 08:01:42 +00:00
it('right - remove bendpoint', inject(
function(elementRegistry, connectionSegmentMove, dragging) {
2017-03-21 08:01:42 +00:00
// given
var connection = elementRegistry.get('SequenceFlow_B'),
labelPosition = getLabelPosition(connection);
2017-03-21 08:01:42 +00:00
// when
connectionSegmentMove.start(canvasEvent({ x: 0, y: 0 }), connection, 2);
2017-03-21 08:01:42 +00:00
dragging.move(canvasEvent({ x: 70, y: 0 }));
2017-03-21 08:01:42 +00:00
dragging.end();
2017-03-21 08:01:42 +00:00
// then
expectLabelMoved(connection, labelPosition, { x: 70, y: -16 });
}
));
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 });
}));
2017-03-21 08:01:42 +00:00
it('up - remove two bendpoints', inject(
function(elementRegistry, connectionSegmentMove, dragging) {
2017-03-21 08:01:42 +00:00
// given
var connection = elementRegistry.get('SequenceFlow_C'),
labelPosition = getLabelPosition(connection);
2017-03-21 08:01:42 +00:00
// when
connectionSegmentMove.start(canvasEvent({ x: 0, y: 0 }), connection, 2);
2017-03-21 08:01:42 +00:00
dragging.move(canvasEvent({ x: 0, y: -90 }));
2017-03-21 08:01:42 +00:00
dragging.end();
2017-03-21 08:01:42 +00:00
// then
expectLabelMoved(connection, labelPosition, { x: -39, y: -85 });
2017-03-21 08:01:42 +00:00
}
));
// TODO(@janstuemmel): solve by connectionSegmentMove refactoring
2017-03-21 08:01:42 +00:00
it('up - remove two bendpoints - redundant waypoints', inject(
function(elementRegistry, connectionSegmentMove, dragging, bendpointMove) {
2017-03-21 08:01:42 +00:00
// given
var connection = elementRegistry.get('SequenceFlow_C');
2017-03-21 08:01:42 +00:00
bendpointMove.start(canvasEvent({ x: 0, y: 0 }), connection, 1);
dragging.move(canvasEvent({ x: 620, y: 435 }));
dragging.end();
2017-03-21 08:01:42 +00:00
bendpointMove.start(canvasEvent({ x: 0, y: 0 }), connection, 2);
dragging.move(canvasEvent({ x: 300, y: 435 }));
dragging.end();
2017-03-21 08:01:42 +00:00
var labelPosition = getLabelPosition(connection);
2017-03-21 08:01:42 +00:00
// when
connectionSegmentMove.start(canvasEvent({ x: 0, y: 0 }), connection, 2);
dragging.move(canvasEvent({ x: 0, y: -160 }));
dragging.end();
2017-03-21 08:01:42 +00:00
// then
expect(getLabelPosition(connection)).to.not.eql(labelPosition);
2017-03-21 08:01:42 +00:00
}
));
});
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.within(570, 575);
expect(Math.round(connection.label.y)).to.be.within(138, 139);
}));
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.within(257, 260);
expect(Math.round(connection.label.y)).to.be.within(185, 186);
}));
});
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.within(466, 468);
expect(Math.round(connection.label.y)).to.be.within(170, 171);
}));
2017-03-21 08:01:42 +00:00
it('move, label on bendpoint', inject(
function(elementRegistry, bendpointMove, dragging, modeling) {
2017-03-21 08:01:42 +00:00
// given
var connection = elementRegistry.get('SequenceFlow_C');
2017-03-21 08:01:42 +00:00
// label out of segments, on a bendpoint (idx=1)
modeling.moveShape(connection.label, { x: 40, y: 0 });
2017-03-21 08:01:42 +00:00
// when
bendpointMove.start(canvasEvent({ x: 0, y: 0 }), connection, 1);
2017-03-21 08:01:42 +00:00
dragging.move(canvasEvent({ x: 455 + 50, y: 500 }));
2017-03-21 08:01:42 +00:00
dragging.end();
2017-03-21 08:01:42 +00:00
// then
expect(Math.round(connection.label.x)).to.be.within(517, 519);
expect(Math.round(connection.label.y)).to.be.equal(507);
2017-03-21 08:01:42 +00:00
}
));
2017-03-21 08:01:42 +00:00
it('remove bendpoint when label on segment', inject(
function(elementRegistry, bendpointMove, dragging) {
2017-03-21 08:01:42 +00:00
// given
var connection = elementRegistry.get('SequenceFlow_B');
2017-03-21 08:01:42 +00:00
// when
bendpointMove.start(canvasEvent({ x: 0, y: 0 }), connection, 1);
2017-03-21 08:01:42 +00:00
dragging.move(canvasEvent({ x: 455, y: 120 + 160 }));
2017-03-21 08:01:42 +00:00
dragging.end();
2017-03-21 08:01:42 +00:00
// then
expect(Math.round(connection.label.x)).to.be.within(418, 421);
expect(Math.round(connection.label.y)).to.be.equal(191);
2017-03-21 08:01:42 +00:00
}
));
2017-03-21 08:01:42 +00:00
it('add bendpoint, label on right segment', inject(
function(elementRegistry, bendpointMove, dragging, canvas) {
2017-03-21 08:01:42 +00:00
// given
var connection = elementRegistry.get('SequenceFlow_A');
2017-03-21 08:01:42 +00:00
// when
bendpointMove.start(canvasEvent({ x: 0, y: 0 }), connection, 1, true);
2017-03-21 08:01:42 +00:00
dragging.hover({
element: connection,
gfx: canvas.getGraphics(connection)
});
2017-03-21 08:01:42 +00:00
dragging.move(canvasEvent({ x: 220, y: 200 }));
2017-03-21 08:01:42 +00:00
dragging.end();
2017-03-21 08:01:42 +00:00
// then
expect(Math.round(connection.label.x)).to.be.within(248, 251);
expect(Math.round(connection.label.y)).to.be.equal(152);
2017-03-21 08:01:42 +00:00
}
));
2017-03-21 08:01:42 +00:00
it('add bendpoint, label on left segment', inject(
function(elementRegistry, bendpointMove, dragging, canvas) {
2017-03-21 08:01:42 +00:00
// given
var connection = elementRegistry.get('SequenceFlow_A');
2017-03-21 08:01:42 +00:00
// when
bendpointMove.start(canvasEvent({ x: 0, y: 0 }), connection, 1, true);
2017-03-21 08:01:42 +00:00
dragging.hover({
element: connection,
gfx: canvas.getGraphics(connection)
});
2017-03-21 08:01:42 +00:00
dragging.move(canvasEvent({ x: 260, y: 200 }));
2017-03-21 08:01:42 +00:00
dragging.end();
2017-03-21 08:01:42 +00:00
// then
expect(connection.label.x).to.be.within(240, 242);
expect(connection.label.y).to.be.within(148, 149);
2017-03-21 08:01:42 +00:00
}
));
2017-03-21 08:01:42 +00:00
it('remove bendpoint when label on bendpoint', inject(
function(elementRegistry, bendpointMove, dragging, modeling) {
2017-03-21 08:01:42 +00:00
// given
var connection = elementRegistry.get('SequenceFlow_C');
2017-03-21 08:01:42 +00:00
// label out of segments, on a bendpoint
modeling.moveShape(connection.label, { x: 40, y: 0 });
2017-03-21 08:01:42 +00:00
// when
bendpointMove.start(canvasEvent({ x: 0, y: 0 }), connection, 1);
2017-03-21 08:01:42 +00:00
dragging.move(canvasEvent({ x: 455, y: 320 }));
2017-03-21 08:01:42 +00:00
dragging.end();
2017-03-21 08:01:42 +00:00
// then
expect(Math.round(connection.label.x)).to.be.within(462, 465);
expect(Math.round(connection.label.y)).to.be.within(290, 293);
2017-03-21 08:01:42 +00:00
}
));
2017-03-21 08:01:42 +00:00
it('add benpoint, label on segment, should not move', inject(
function(elementRegistry, bendpointMove, canvas, dragging, modeling) {
2017-03-21 08:01:42 +00:00
// given
var connection = elementRegistry.get('SequenceFlow_C');
2017-03-21 08:01:42 +00:00
// label out of segments, on a bendpoint
modeling.moveShape(connection.label, { x: 40, y: -60 });
var position = getLabelPosition(connection);
2017-03-21 08:01:42 +00:00
// when
bendpointMove.start(canvasEvent({ x: 0, y: 0 }), connection, 2, true);
2017-03-21 08:01:42 +00:00
dragging.hover({
element: connection,
gfx: canvas.getGraphics(connection)
});
2017-03-21 08:01:42 +00:00
dragging.move(canvasEvent({ x: 400, y: 350 }));
2017-03-21 08:01:42 +00:00
dragging.end();
2017-03-21 08:01:42 +00:00
// then
expectLabelMoved(connection, position, { x: 0, y: 0 });
2017-03-21 08:01:42 +00:00
}
));
});
describe('special cases', function() {
2017-03-21 08:01:42 +00:00
it('should behave properly, right after importing', inject(
function(elementRegistry, connectionSegmentMove, dragging, modeling) {
2017-03-21 08:01:42 +00:00
// given
var connection = elementRegistry.get('SequenceFlow_C'),
labelPosition = getLabelPosition(connection),
label = connection.label;
2017-03-21 08:01:42 +00:00
// when
connectionSegmentMove.start(canvasEvent({ x: 0, y: 0 }), connection, 2);
2017-03-21 08:01:42 +00:00
dragging.move(canvasEvent({ x: 0, y: 70 }));
2017-03-21 08:01:42 +00:00
dragging.end();
2017-03-21 08:01:42 +00:00
// move label
modeling.moveShape(label, { x: 40, y: -30 });
2017-03-21 08:01:42 +00:00
// drag again
connectionSegmentMove.start(canvasEvent({ x: 0, y: 0 }), connection, 1);
2017-03-21 08:01:42 +00:00
dragging.move(canvasEvent({ x: -20, y: 0 }));
dragging.end();
// then
2017-03-21 08:01:42 +00:00
expectLabelMoved(connection, labelPosition, { x: 20, y: 40 });
2017-03-21 08:01:42 +00:00
}
));
2017-03-21 08:01:42 +00:00
it('should reposition on right segment', inject(
function(elementRegistry, connectionSegmentMove, dragging) {
2017-03-21 08:01:42 +00:00
// given
var connection = elementRegistry.get('SequenceFlow_E'),
labelPosition = getLabelPosition(connection);
// when
connectionSegmentMove.start(canvasEvent({ x: 0, y: 0 }), connection, 2);
2017-03-21 08:01:42 +00:00
dragging.move(canvasEvent({ x: -100, y: 0 }));
dragging.end();
// then
2017-03-21 08:01:42 +00:00
expect(connection.label.y - labelPosition.y).to.be.within(-76, -70);
expect(connection.label.x - labelPosition.x).to.be.within(-54, -51);
2017-03-21 08:01:42 +00:00
}
));
});
});
describe('integration', function() {
describe('space tool', function() {
var diagramXML = require('./LabelLayouting.special.bpmn');
beforeEach(bootstrapModeler(diagramXML, {
modules: testModules
}));
beforeEach(inject(function(dragging) {
dragging.setOptions({ manual: true });
}));
it('should move with a skewed line', inject(function(elementRegistry, spaceTool, dragging) {
// given
var connection = elementRegistry.get('SequenceFlow_1'),
labelPosition = getLabelPosition(connection);
// when
spaceTool.activateMakeSpace(canvasEvent({ x: 500, y: 225 }));
dragging.move(canvasEvent({ x: 550, y: 225 }));
dragging.end();
// then
expectLabelMoved(connection, labelPosition, { x: 25, 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);
}