fix(snapping): snap origins of docking points on create
Related to: https://github.com/camunda/camunda-modeler/issues/1612
This commit is contained in:
Oguz Eroglu
fake-join[bot]
parent
000d2e28a2
commit
27fec8bdf1
|
|
@ -68,16 +68,15 @@ BpmnCreateMoveSnapping.prototype.initSnap = function(event) {
|
|||
|
||||
var shape = event.shape;
|
||||
|
||||
var isMove = !!this._elementRegistry.get(shape.id);
|
||||
|
||||
// snap to docking points
|
||||
forEach(shape.outgoing, function(connection) {
|
||||
var docking = connection.waypoints[0];
|
||||
|
||||
docking = docking.original || docking;
|
||||
|
||||
snapContext.setSnapOrigin(connection.id + '-docking', {
|
||||
x: docking.x - event.x,
|
||||
y: docking.y - event.y
|
||||
});
|
||||
snapContext.setSnapOrigin(connection.id + '-docking', getDockingSnapOrigin(docking, isMove, event));
|
||||
});
|
||||
|
||||
forEach(shape.incoming, function(connection) {
|
||||
|
|
@ -85,10 +84,7 @@ BpmnCreateMoveSnapping.prototype.initSnap = function(event) {
|
|||
|
||||
docking = docking.original || docking;
|
||||
|
||||
snapContext.setSnapOrigin(connection.id + '-docking', {
|
||||
x: docking.x - event.x,
|
||||
y: docking.y - event.y
|
||||
});
|
||||
snapContext.setSnapOrigin(connection.id + '-docking', getDockingSnapOrigin(docking, isMove, event));
|
||||
});
|
||||
|
||||
if (is(shape, 'bpmn:Participant')) {
|
||||
|
|
@ -117,28 +113,32 @@ BpmnCreateMoveSnapping.prototype.addSnapTargetPoints = function(snapPoints, shap
|
|||
}
|
||||
});
|
||||
|
||||
// snap to docking points
|
||||
var elementRegistry = this._elementRegistry;
|
||||
|
||||
// snap to docking points if not create mode
|
||||
forEach(shape.incoming, function(connection) {
|
||||
if (elementRegistry.get(shape.id)) {
|
||||
|
||||
if (!includes(snapTargets, connection.source)) {
|
||||
snapPoints.add('mid', getMid(connection.source));
|
||||
if (!includes(snapTargets, connection.source)) {
|
||||
snapPoints.add('mid', getMid(connection.source));
|
||||
}
|
||||
|
||||
var docking = connection.waypoints[0];
|
||||
snapPoints.add(connection.id + '-docking', docking.original || docking);
|
||||
}
|
||||
|
||||
var docking = connection.waypoints[0];
|
||||
|
||||
snapPoints.add(connection.id + '-docking', docking.original || docking);
|
||||
});
|
||||
|
||||
|
||||
forEach(shape.outgoing, function(connection) {
|
||||
if (elementRegistry.get(shape.id)) {
|
||||
|
||||
if (!includes(snapTargets, connection.target)) {
|
||||
snapPoints.add('mid', getMid(connection.target));
|
||||
if (!includes(snapTargets, connection.target)) {
|
||||
snapPoints.add('mid', getMid(connection.target));
|
||||
}
|
||||
|
||||
var docking = connection.waypoints[ connection.waypoints.length - 1 ];
|
||||
|
||||
snapPoints.add(connection.id + '-docking', docking.original || docking);
|
||||
}
|
||||
|
||||
var docking = connection.waypoints[ connection.waypoints.length - 1 ];
|
||||
|
||||
snapPoints.add(connection.id + '-docking', docking.original || docking);
|
||||
});
|
||||
|
||||
// add sequence flow parents as snap targets
|
||||
|
|
@ -229,3 +229,15 @@ function setSnappedIfConstrained(event) {
|
|||
function includes(array, value) {
|
||||
return array.indexOf(value) !== -1;
|
||||
}
|
||||
|
||||
function getDockingSnapOrigin(docking, isMove, event) {
|
||||
return isMove ? (
|
||||
{
|
||||
x: docking.x - event.x,
|
||||
y: docking.y - event.y
|
||||
}
|
||||
) : {
|
||||
x: docking.x,
|
||||
y: docking.y
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_0hu8z4u" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="3.5.0">
|
||||
<bpmn:process id="Process_1t22f8o" isExecutable="true">
|
||||
<bpmn:task id="Task_1">
|
||||
<bpmn:incoming>SequenceFlow_1</bpmn:incoming>
|
||||
<bpmn:outgoing>SequenceFlow_1</bpmn:outgoing>
|
||||
</bpmn:task>
|
||||
<bpmn:sequenceFlow id="SequenceFlow_1" sourceRef="Task_1" targetRef="Task_1" />
|
||||
</bpmn:process>
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1t22f8o">
|
||||
<bpmndi:BPMNShape id="Task_1_di" bpmnElement="Task_1">
|
||||
<dc:Bounds x="200" y="77" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNEdge id="SequenceFlow_1_di" bpmnElement="SequenceFlow_1">
|
||||
<di:waypoint x="250" y="157" />
|
||||
<di:waypoint x="250" y="177" />
|
||||
<di:waypoint x="160" y="177" />
|
||||
<di:waypoint x="160" y="117" />
|
||||
<di:waypoint x="200" y="117" />
|
||||
</bpmndi:BPMNEdge>
|
||||
</bpmndi:BPMNPlane>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</bpmn:definitions>
|
||||
|
|
@ -486,72 +486,112 @@ describe('features/snapping - BpmnCreateMoveSnapping', function() {
|
|||
|
||||
describe('docking points', function() {
|
||||
|
||||
var diagramXML = require('./BpmnCreateMoveSnapping.docking-points.bpmn');
|
||||
describe('move mode', function() {
|
||||
|
||||
beforeEach(bootstrapModeler(diagramXML, {
|
||||
modules: testModules
|
||||
}));
|
||||
var diagramXML = require('./BpmnCreateMoveSnapping.docking-points.bpmn');
|
||||
|
||||
var participant,
|
||||
participantGfx;
|
||||
beforeEach(bootstrapModeler(diagramXML, {
|
||||
modules: testModules
|
||||
}));
|
||||
|
||||
beforeEach(inject(function(dragging, elementRegistry, move) {
|
||||
participant = elementRegistry.get('Participant_2');
|
||||
participantGfx = elementRegistry.getGraphics(participant);
|
||||
}));
|
||||
var participant,
|
||||
participantGfx;
|
||||
|
||||
beforeEach(inject(function(dragging, elementRegistry, move) {
|
||||
participant = elementRegistry.get('Participant_2');
|
||||
participantGfx = elementRegistry.getGraphics(participant);
|
||||
}));
|
||||
|
||||
it('should snap to docking point (incoming connections)', inject(
|
||||
function(dragging, elementRegistry, move) {
|
||||
|
||||
// given
|
||||
var task = elementRegistry.get('Task_2');
|
||||
|
||||
move.start(canvasEvent({ x: 400, y: 540 }), task);
|
||||
|
||||
dragging.hover({ element: participant, gfx: participantGfx });
|
||||
|
||||
dragging.move(canvasEvent({ x: 0, y: 0 }));
|
||||
|
||||
// when
|
||||
dragging.move(canvasEvent({ x: 270, y: 540 }));
|
||||
|
||||
dragging.end();
|
||||
|
||||
// then
|
||||
expect(mid(task)).to.eql({
|
||||
x: 275,
|
||||
y: 540
|
||||
});
|
||||
}
|
||||
));
|
||||
|
||||
|
||||
it('should snap to docking point (incoming connections)', inject(
|
||||
function(dragging, elementRegistry, move) {
|
||||
it('should snap to docking point (outgoing connections)', inject(
|
||||
function(dragging, elementRegistry, move) {
|
||||
|
||||
// given
|
||||
var task = elementRegistry.get('Task_2');
|
||||
// given
|
||||
var task = elementRegistry.get('Task_4');
|
||||
|
||||
move.start(canvasEvent({ x: 400, y: 540 }), task);
|
||||
move.start(canvasEvent({ x: 600, y: 540 }), task);
|
||||
|
||||
dragging.hover({ element: participant, gfx: participantGfx });
|
||||
dragging.hover({ element: participant, gfx: participantGfx });
|
||||
|
||||
dragging.move(canvasEvent({ x: 0, y: 0 }));
|
||||
dragging.move(canvasEvent({ x: 0, y: 0 }));
|
||||
|
||||
// when
|
||||
dragging.move(canvasEvent({ x: 270, y: 540 }));
|
||||
// when
|
||||
dragging.move(canvasEvent({ x: 475, y: 540 }));
|
||||
|
||||
dragging.end();
|
||||
dragging.end();
|
||||
|
||||
// then
|
||||
expect(mid(task)).to.eql({
|
||||
x: 275,
|
||||
y: 540
|
||||
// then
|
||||
expect(mid(task)).to.eql({
|
||||
x: 480,
|
||||
y: 540
|
||||
});
|
||||
}
|
||||
));
|
||||
});
|
||||
|
||||
|
||||
describe('create mode', function() {
|
||||
|
||||
var diagramXML = require('./BpmnCreateMoveSnapping.docking-create-mode.bpmn');
|
||||
|
||||
it('should correctly set snap origins', function(done) {
|
||||
|
||||
bootstrapModeler(diagramXML, {
|
||||
container: TestContainer.get(this),
|
||||
modules: testModules
|
||||
})(function() {
|
||||
inject(function(elementRegistry, copyPaste, eventBus) {
|
||||
|
||||
// given
|
||||
var task1 = elementRegistry.get('Task_1');
|
||||
eventBus.on('create.start', function(event) {
|
||||
|
||||
var snapContext = event.context.snapContext;
|
||||
var snapLocations = snapContext.getSnapLocations();
|
||||
var sequenceFlowSnapOrigin = snapContext.getSnapOrigin(snapLocations[3]);
|
||||
|
||||
// then
|
||||
expect(sequenceFlowSnapOrigin.x).to.be.eql(-30);
|
||||
expect(sequenceFlowSnapOrigin.y).to.be.eql(-10);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
// when
|
||||
copyPaste.copy(task1);
|
||||
copyPaste.paste();
|
||||
|
||||
})();
|
||||
});
|
||||
}
|
||||
));
|
||||
|
||||
});
|
||||
|
||||
it('should snap to docking point (outgoing connections)', inject(
|
||||
function(dragging, elementRegistry, move) {
|
||||
|
||||
// given
|
||||
var task = elementRegistry.get('Task_4');
|
||||
|
||||
move.start(canvasEvent({ x: 600, y: 540 }), task);
|
||||
|
||||
dragging.hover({ element: participant, gfx: participantGfx });
|
||||
|
||||
dragging.move(canvasEvent({ x: 0, y: 0 }));
|
||||
|
||||
// when
|
||||
dragging.move(canvasEvent({ x: 475, y: 540 }));
|
||||
|
||||
dragging.end();
|
||||
|
||||
// then
|
||||
expect(mid(task)).to.eql({
|
||||
x: 480,
|
||||
y: 540
|
||||
});
|
||||
}
|
||||
));
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue