sartography
/
bpmn-js
mirror of https://github.com/sartography/bpmn-js.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(bpmn-snapping): snap inside the target instead of target center

This commit is contained in:
Maciej Barelkowski 2019-06-07 10:45:58 +02:00 committed by Nico Rehwaldt
parent eadc1fb159
commit d80076a034
3 changed files with 52 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
lib/features/snapping/BpmnConnectSnapping.js
View File

@ -11,6 +11,10 @@ import { some } from 'min-dash';
var HIGHER_PRIORITY = 1250;
var TARGET_BOUNDS_PADDING = 20;
var AXES = [ 'x', 'y' ];
/**
* Snap during connect.
@ -41,6 +45,10 @@ export default function BpmnConnectSnapping(eventBus, rules) {
target: target
});
if (target && connectionAttrs) {
snapInsideTarget(event, target);
}
if (target && isAnyType(connectionAttrs, [
'bpmn:Association',
'bpmn:DataInputAssociation',
@ -51,8 +59,6 @@ export default function BpmnConnectSnapping(eventBus, rules) {
// snap source
context.sourcePosition = mid(source);
// snap target
snapToPosition(event, mid(target));
} else if (isType(connectionAttrs, 'bpmn:MessageFlow')) {
if (is(source, 'bpmn:Event')) {
@ -80,6 +86,23 @@ BpmnConnectSnapping.$inject = [
'rules'
];
function snapInsideTarget(event, target) {
AXES.forEach(function(axis) {
var matchingTargetDimension = getDimensionForAxis(axis, target),
newCoordinate;
if (event[axis] < target[axis] + TARGET_BOUNDS_PADDING) {
newCoordinate = target[axis] + TARGET_BOUNDS_PADDING;
} else if (event[axis] > target[axis] + matchingTargetDimension - TARGET_BOUNDS_PADDING) {
newCoordinate = target[axis] + matchingTargetDimension - TARGET_BOUNDS_PADDING;
}
if (newCoordinate) {
setSnapped(event, axis, newCoordinate);
}
});
}
// helpers //////////
function snapToPosition(event, position) {
@ -95,4 +118,8 @@ function isAnyType(attrs, types) {
return some(types, function(type) {
return isType(attrs, type);
});
}
}
function getDimensionForAxis(axis, element) {
return axis === 'x' ? element.width : element.height;
}

12
test/spec/features/snapping/BpmnConnectSnapping.bpmn
View File

@ -1,5 +1,5 @@
<?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" id="Definitions_1xakeh4" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="3.1.0">
<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" id="Definitions_1xakeh4" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="3.1.1">
<bpmn:collaboration id="Collaboration_1">
<bpmn:participant id="Participant_1" processRef="Process_1" />
<bpmn:participant id="Participant_2" processRef="Process_2" />
@ -10,6 +10,8 @@
<bpmn:task id="Task_1" />
<bpmn:dataObjectReference id="DataObjectReference_1" dataObjectRef="DataObject_16xfc7e" />
<bpmn:dataObject id="DataObject_16xfc7e" />
<bpmn:subProcess id="SubProcess" />
<bpmn:boundaryEvent id="BoundaryEvent" attachedToRef="SubProcess" />
</bpmn:process>
<bpmn:process id="Process_2" isExecutable="false">
<bpmn:task id="Task_2" />
@ -23,7 +25,7 @@
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Collaboration_1">
<bpmndi:BPMNShape id="Participant_03743bx_di" bpmnElement="Participant_1" isHorizontal="true">
<dc:Bounds x="32" y="61.5" width="600" height="383" />
<dc:Bounds x="32" y="61.5" width="800" height="383" />
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
<dc:Bounds x="82" y="82" width="36" height="36" />
@ -49,6 +51,12 @@
<bpmndi:BPMNShape id="IntermediateThrowEvent_1jsmhky_di" bpmnElement="IntermediateThrowEvent_1">
<dc:Bounds x="82" y="582" width="36" height="36" />
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="SubProcess_di" bpmnElement="SubProcess" isExpanded="true">
<dc:Bounds x="411" y="100" width="350" height="200" />
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="BoundaryEvent_di" bpmnElement="BoundaryEvent">
<dc:Bounds x="582" y="282" width="36" height="36" />
</bpmndi:BPMNShape>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions>

86
test/spec/features/snapping/BpmnConnectSnappingSpec.js
View File

@ -34,96 +34,34 @@ describe('features/snapping - BpmnConnectSnapping', function() {
dragging.setOptions({ manual: true });
}));
describe('association', function() {
describe('connect', function() {
it('should snap target', inject(function(connect, dragging, elementRegistry) {
// given
var task = elementRegistry.get('Task_1'),
dataObjectReference = elementRegistry.get('DataObjectReference_1'),
dataObjectReferenceGfx = elementRegistry.getGraphics(dataObjectReference);
// when
connect.start(canvasEvent({ x: 300, y: 300 }), task);
dragging.hover({ element: dataObjectReference, gfx: dataObjectReferenceGfx });
dragging.move(canvasEvent({ x: 410, y: 410 }));
dragging.end();
// then
var waypoints = task.outgoing[0].waypoints;
expect(waypoints[1].original).to.eql({ x: 400, y: 400 });
}));
});
});
describe('sequence flow', function() {
describe('connect', function() {
it('should snap target', inject(function(connect, dragging, elementRegistry) {
// given
var startEvent = elementRegistry.get('StartEvent_1'),
endEvent = elementRegistry.get('EndEvent_1'),
endEventGfx = elementRegistry.getGraphics(endEvent);
// when
connect.start(canvasEvent({ x: 100, y: 100 }), startEvent);
dragging.hover({ element: endEvent, gfx: endEventGfx });
dragging.move(canvasEvent({ x: 210, y: 210 }));
dragging.end();
// then
var waypoints = startEvent.outgoing[0].waypoints;
expect(waypoints[3].original).to.eql({ x: 200, y: 200 });
}));
});
describe('global connect', function() {
it('should snap target', inject(
function(connect, dragging, elementRegistry, eventBus) {
it('should snap event if close to target bounds',
inject(function(connect, dragging, elementRegistry) {
// given
var startEvent = elementRegistry.get('StartEvent_1'),
endEvent = elementRegistry.get('EndEvent_1'),
endEventGfx = elementRegistry.getGraphics(endEvent);
var boundaryEvent = elementRegistry.get('BoundaryEvent'),
subProcess = elementRegistry.get('SubProcess'),
subProcessGfx = elementRegistry.getGraphics(subProcess);
// when
connect.start(null, startEvent, { x: 110, y: 110 });
connect.start(canvasEvent({ x: 600, y: 300 }), boundaryEvent);
dragging.hover({ element: endEvent, gfx: endEventGfx });
dragging.hover({ element: subProcess, gfx: subProcessGfx });
dragging.move(canvasEvent({ x: 210, y: 210 }));
dragging.move(canvasEvent({ x: 400, y: 305 }));
dragging.end();
// then
var waypoints = startEvent.outgoing[0].waypoints;
expect(waypoints[0].original).to.eql({ x: 100, y: 100 });
expect(waypoints[3].original).to.eql({ x: 200, y: 200 });
}
));
var waypoints = boundaryEvent.outgoing[0].waypoints;
expect(waypoints[3].y).to.eql(280);
})
);
});
});