From 27fec8bdf1c6236e7ca09b5721b74b1b45b45d39 Mon Sep 17 00:00:00 2001 From: Oguz Eroglu Date: Mon, 16 Dec 2019 16:15:26 +0100 Subject: [PATCH] fix(snapping): snap origins of docking points on create Related to: https://github.com/camunda/camunda-modeler/issues/1612 --- .../snapping/BpmnCreateMoveSnapping.js | 56 ++++--- ...reateMoveSnapping.docking-create-mode.bpmn | 24 +++ .../snapping/BpmnCreateMoveSnappingSpec.js | 142 +++++++++++------- 3 files changed, 149 insertions(+), 73 deletions(-) create mode 100644 test/spec/features/snapping/BpmnCreateMoveSnapping.docking-create-mode.bpmn diff --git a/lib/features/snapping/BpmnCreateMoveSnapping.js b/lib/features/snapping/BpmnCreateMoveSnapping.js index 186c593b..5319bcf1 100644 --- a/lib/features/snapping/BpmnCreateMoveSnapping.js +++ b/lib/features/snapping/BpmnCreateMoveSnapping.js @@ -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 + }; +} diff --git a/test/spec/features/snapping/BpmnCreateMoveSnapping.docking-create-mode.bpmn b/test/spec/features/snapping/BpmnCreateMoveSnapping.docking-create-mode.bpmn new file mode 100644 index 00000000..1c75afdf --- /dev/null +++ b/test/spec/features/snapping/BpmnCreateMoveSnapping.docking-create-mode.bpmn @@ -0,0 +1,24 @@ + + + + + SequenceFlow_1 + SequenceFlow_1 + + + + + + + + + + + + + + + + + + diff --git a/test/spec/features/snapping/BpmnCreateMoveSnappingSpec.js b/test/spec/features/snapping/BpmnCreateMoveSnappingSpec.js index fe8bcf02..07ac1629 100644 --- a/test/spec/features/snapping/BpmnCreateMoveSnappingSpec.js +++ b/test/spec/features/snapping/BpmnCreateMoveSnappingSpec.js @@ -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 - }); - } - )); - + }); });