bpmn-js/lib/features/snapping/BpmnSnapping.js

482 lines
11 KiB
JavaScript
Raw Normal View History

import inherits from 'inherits';
import {
forEach,
isNumber
} from 'min-dash';
import {
getBBox as getBoundingBox
} from 'diagram-js/lib/util/Elements';
2015-10-09 23:41:32 +00:00
import { is } from '../../util/ModelUtil';
import { isAny } from '../modeling/util/ModelingUtil';
import {
isExpanded
} from '../../util/DiUtil';
import Snapping from 'diagram-js/lib/features/snapping/Snapping';
import {
mid,
topLeft,
bottomRight,
isSnapped,
setSnapped
} from 'diagram-js/lib/features/snapping/SnapUtil';
import {
asTRBL
} from 'diagram-js/lib/layout/LayoutUtil';
import {
getBoundaryAttachment,
getParticipantSizeConstraints
} from './BpmnSnappingUtil';
2015-10-09 23:41:32 +00:00
import {
getLanesRoot
} from '../modeling/util/LaneUtil';
var round = Math.round;
2015-10-09 23:41:32 +00:00
var HIGH_PRIORITY = 1500;
/**
* BPMN specific snapping functionality
*
* * snap on process elements if a pool is created inside a
* process diagram
*
* @param {EventBus} eventBus
* @param {Canvas} canvas
*/
export default function BpmnSnapping(eventBus, canvas, bpmnRules, elementRegistry) {
// instantiate super
Snapping.call(this, eventBus, canvas);
/**
* Drop participant on process <> process elements snapping
*/
eventBus.on('create.start', function(event) {
var context = event.context,
shape = context.shape,
rootElement = canvas.getRootElement();
// snap participant around existing elements (if any)
if (is(shape, 'bpmn:Participant') && is(rootElement, 'bpmn:Process')) {
initParticipantSnapping(context, shape, rootElement.children);
}
});
eventBus.on([ 'create.move', 'create.end' ], HIGH_PRIORITY, function(event) {
var context = event.context,
shape = context.shape,
participantSnapBox = context.participantSnapBox;
if (!isSnapped(event) && participantSnapBox) {
snapParticipant(participantSnapBox, shape, event);
}
});
eventBus.on('shape.move.start', function(event) {
var context = event.context,
shape = context.shape,
rootElement = canvas.getRootElement();
// snap participant around existing elements (if any)
if (is(shape, 'bpmn:Participant') && is(rootElement, 'bpmn:Process')) {
initParticipantSnapping(context, shape, rootElement.children);
}
});
function canAttach(shape, target, position) {
return bpmnRules.canAttach([ shape ], target, null, position) === 'attach';
}
function canConnect(source, target) {
return bpmnRules.canConnect(source, target);
}
/**
* Snap boundary events to elements border
*/
2015-10-09 23:41:32 +00:00
eventBus.on([
'create.move',
'create.end',
'shape.move.move',
'shape.move.end'
], HIGH_PRIORITY, function(event) {
var context = event.context,
target = context.target,
shape = context.shape;
if (target && !isSnapped(event) && canAttach(shape, target, event)) {
snapBoundaryEvent(event, shape, target);
}
});
2015-10-09 23:41:32 +00:00
/**
* Adjust parent for flowElements to the target participant
* when droping onto lanes.
*/
eventBus.on([
'shape.move.hover',
'shape.move.move',
'shape.move.end',
'create.hover',
'create.move',
'create.end'
], HIGH_PRIORITY, function(event) {
var context = event.context,
2015-10-09 23:41:32 +00:00
shape = context.shape,
hover = event.hover;
2015-10-09 23:41:32 +00:00
if (is(hover, 'bpmn:Lane') && !isAny(shape, [ 'bpmn:Lane', 'bpmn:Participant' ])) {
event.hover = getLanesRoot(hover);
event.hoverGfx = elementRegistry.getGraphics(event.hover);
}
});
/**
* Snap sequence flows.
*/
eventBus.on([
'connect.move',
'connect.hover',
'connect.end'
], HIGH_PRIORITY, function(event) {
var context = event.context,
source = context.source,
target = context.target;
var connection = canConnect(source, target) || {};
2015-10-09 23:41:32 +00:00
if (!context.initialSourcePosition) {
context.initialSourcePosition = context.sourcePosition;
}
if (
target && (
connection.type === 'bpmn:Association' ||
connection.type === 'bpmn:DataOutputAssociation' ||
connection.type === 'bpmn:DataInputAssociation' ||
connection.type === 'bpmn:SequenceFlow'
)
) {
// snap source
context.sourcePosition = mid(source);
// snap target
snapToPosition(event, mid(target));
} else
if (connection.type === 'bpmn:MessageFlow') {
if (is(source, 'bpmn:Event')) {
// snap source
context.sourcePosition = mid(source);
}
if (is(target, 'bpmn:Event')) {
// snap target
snapToPosition(event, mid(target));
}
}
else {
// otherwise reset source snap
context.sourcePosition = context.initialSourcePosition;
}
});
2015-10-09 23:41:32 +00:00
eventBus.on('resize.start', HIGH_PRIORITY, function(event) {
var context = event.context,
shape = context.shape;
if (is(shape, 'bpmn:SubProcess') && isExpanded(shape)) {
2015-10-09 23:41:32 +00:00
context.minDimensions = { width: 140, height: 120 };
}
if (is(shape, 'bpmn:Participant')) {
context.minDimensions = { width: 300, height: 150 };
}
2015-10-09 23:41:32 +00:00
if (is(shape, 'bpmn:Lane') || is(shape, 'bpmn:Participant')) {
context.resizeConstraints = getParticipantSizeConstraints(
shape,
context.direction,
context.balanced
);
}
if (is(shape, 'bpmn:TextAnnotation')) {
context.minDimensions = { width: 50, height: 30 };
}
});
}
inherits(BpmnSnapping, Snapping);
BpmnSnapping.$inject = [
'eventBus',
'canvas',
'bpmnRules',
'elementRegistry'
];
BpmnSnapping.prototype.initSnap = function(event) {
var context = event.context,
shape = event.shape,
shapeMid,
shapeBounds,
shapeTopLeft,
shapeBottomRight,
snapContext;
snapContext = Snapping.prototype.initSnap.call(this, event);
if (is(shape, 'bpmn:Participant')) {
// assign higher priority for outer snaps on participants
snapContext.setSnapLocations([ 'top-left', 'bottom-right', 'mid' ]);
}
if (shape) {
shapeMid = mid(shape, event);
shapeBounds = {
width: shape.width,
height: shape.height,
x: isNaN(shape.x) ? round(shapeMid.x - shape.width / 2) : shape.x,
y: isNaN(shape.y) ? round(shapeMid.y - shape.height / 2) : shape.y
};
shapeTopLeft = topLeft(shapeBounds);
shapeBottomRight = bottomRight(shapeBounds);
snapContext.setSnapOrigin('top-left', {
x: shapeTopLeft.x - event.x,
y: shapeTopLeft.y - event.y
});
snapContext.setSnapOrigin('bottom-right', {
x: shapeBottomRight.x - event.x,
y: shapeBottomRight.y - event.y
});
forEach(shape.outgoing, function(c) {
var docking = c.waypoints[0];
docking = docking.original || docking;
snapContext.setSnapOrigin(c.id + '-docking', {
x: docking.x - event.x,
y: docking.y - event.y
});
});
forEach(shape.incoming, function(c) {
var docking = c.waypoints[c.waypoints.length - 1];
docking = docking.original || docking;
snapContext.setSnapOrigin(c.id + '-docking', {
x: docking.x - event.x,
y: docking.y - event.y
});
});
}
var source = context.source;
if (source) {
snapContext.addDefaultSnap('mid', mid(source));
}
};
BpmnSnapping.prototype.addTargetSnaps = function(snapPoints, shape, target) {
// snap shape to itself
if (isNumber(shape.x) && isNumber(shape.y)) {
snapPoints.add('mid', mid(shape));
}
// use target parent as snap target
if (is(shape, 'bpmn:BoundaryEvent') && shape.type !== 'label') {
target = target.parent;
}
// add sequence flow parents as snap targets
if (is(target, 'bpmn:SequenceFlow')) {
this.addTargetSnaps(snapPoints, shape, target.parent);
}
var siblings = this.getSiblings(shape, target) || [];
forEach(siblings, function(sibling) {
2015-10-09 23:41:32 +00:00
// do not snap to lanes
if (is(sibling, 'bpmn:Lane')) {
2015-10-09 23:41:32 +00:00
return;
}
if (sibling.waypoints) {
forEach(sibling.waypoints.slice(1, -1), function(waypoint, i) {
var nextWaypoint = sibling.waypoints[i + 2],
previousWaypoint = sibling.waypoints[i];
if (!nextWaypoint || !previousWaypoint) {
throw new Error('waypoints must exist');
}
if (nextWaypoint.x === waypoint.x ||
nextWaypoint.y === waypoint.y ||
previousWaypoint.x === waypoint.x ||
previousWaypoint.y === waypoint.y) {
snapPoints.add('mid', waypoint);
}
});
return;
}
snapPoints.add('mid', mid(sibling));
if (is(sibling, 'bpmn:Participant')) {
snapPoints.add('top-left', topLeft(sibling));
snapPoints.add('bottom-right', bottomRight(sibling));
}
});
forEach(shape.incoming, function(c) {
if (siblings.indexOf(c.source) === -1) {
snapPoints.add('mid', mid(c.source));
}
var docking = c.waypoints[0];
snapPoints.add(c.id + '-docking', docking.original || docking);
});
forEach(shape.outgoing, function(c) {
if (siblings.indexOf(c.target) === -1) {
snapPoints.add('mid', mid(c.target));
}
var docking = c.waypoints[c.waypoints.length - 1];
snapPoints.add(c.id + '-docking', docking.original || docking);
});
};
// participant snapping //////////////////////
function initParticipantSnapping(context, shape, elements) {
if (!elements.length) {
return;
}
var snapBox = getBoundingBox(elements.filter(function(e) {
return !e.labelTarget && !e.waypoints;
}));
snapBox.x -= 50;
snapBox.y -= 20;
snapBox.width += 70;
snapBox.height += 40;
// adjust shape height to include bounding box
shape.width = Math.max(shape.width, snapBox.width);
shape.height = Math.max(shape.height, snapBox.height);
context.participantSnapBox = snapBox;
}
function snapParticipant(snapBox, shape, event, offset) {
offset = offset || 0;
var shapeHalfWidth = shape.width / 2 - offset,
shapeHalfHeight = shape.height / 2;
var currentTopLeft = {
x: event.x - shapeHalfWidth - offset,
y: event.y - shapeHalfHeight
};
var currentBottomRight = {
x: event.x + shapeHalfWidth + offset,
y: event.y + shapeHalfHeight
};
var snapTopLeft = snapBox,
snapBottomRight = bottomRight(snapBox);
if (currentTopLeft.x >= snapTopLeft.x) {
setSnapped(event, 'x', snapTopLeft.x + offset + shapeHalfWidth);
} else
if (currentBottomRight.x <= snapBottomRight.x) {
setSnapped(event, 'x', snapBottomRight.x - offset - shapeHalfWidth);
}
if (currentTopLeft.y >= snapTopLeft.y) {
setSnapped(event, 'y', snapTopLeft.y + shapeHalfHeight);
} else
if (currentBottomRight.y <= snapBottomRight.y) {
setSnapped(event, 'y', snapBottomRight.y - shapeHalfHeight);
}
}
// boundary event snapping //////////////////////
function snapBoundaryEvent(event, shape, target) {
2015-10-09 23:41:32 +00:00
var targetTRBL = asTRBL(target);
var direction = getBoundaryAttachment(event, target);
if (/top/.test(direction)) {
setSnapped(event, 'y', targetTRBL.top);
} else
if (/bottom/.test(direction)) {
setSnapped(event, 'y', targetTRBL.bottom);
}
if (/left/.test(direction)) {
setSnapped(event, 'x', targetTRBL.left);
} else
if (/right/.test(direction)) {
setSnapped(event, 'x', targetTRBL.right);
}
}
function snapToPosition(event, position) {
setSnapped(event, 'x', position.x);
setSnapped(event, 'y', position.y);
}