Skip to content

Commit

Permalink
feat(flows): allow fake elements for message and data flows
Browse files Browse the repository at this point in the history
  • Loading branch information
@marstamm
marstamm committed Oct 21, 2021
1 parent 358980f commit 1854b49
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 63 deletions.
145 changes: 87 additions & 58 deletions lib/draw/BpmnRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,23 @@ export default function BpmnRenderer(
return 'url(#' + id + ')';
}

function normalizeLength(fixedPoint, variablePoint, length) {
var dx = fixedPoint.x - variablePoint.x,
dy = fixedPoint.y - variablePoint.y,
totalDistance = Math.abs(dx) + Math.abs(dy);

dx = dx / totalDistance;
dy = dy / totalDistance;

dx *= length;
dy *= length;

return {
x: fixedPoint.x - dx,
y: fixedPoint.y - dy
};
}

function createMarker(id, type, fill, stroke) {

if (type === 'sequenceflow-end') {
Expand Down Expand Up @@ -378,39 +395,33 @@ export default function BpmnRenderer(
return path;
}

function drawFakeFlows(element, parentGfx, length) {
function drawFakeFlows(element, parentGfx) {
var primary = element.primaryShape;

var FLOW_LENGTH = length || 50;
var FLOW_LENGTH = 50;

var normalizeLength = function(fixedPoint, variablePoint, length) {
var dx = fixedPoint.x - variablePoint.x;
var dy = fixedPoint.y - variablePoint.y;
var totalDistance = Math.abs(dx) + Math.abs(dy);
var drawFakeConnection = function(connection, isOutgoing) {

dx = dx / totalDistance;
dy = dy / totalDistance;
var segment;
if (isOutgoing) {
segment = connection.waypoints.slice(0, 2);

dx *= length;
dy *= length;

return {
x: fixedPoint.x - dx,
y: fixedPoint.y - dy
};
};
// Reverse order for normalizing
segment = segment.reverse();
} else {
segment = connection.waypoints.slice(connection.waypoints.length - 2);
}

var drawFakeConnection = function(segment, drawEnd) {
var endpoint = segment[1];

var offset = {
var relativePosition = {
x: (endpoint.x - primary.x) / primary.width,
y: (endpoint.y - primary.y) / primary.height
};

var anchorPoint = {
x: endpoint.x - (element.width * offset.x),
y: endpoint.y - (element.height * offset.y)
x: endpoint.x - (element.width * relativePosition.x),
y: endpoint.y - (element.height * relativePosition.y)
};

var newWaypoints = segment.map(function(el) {
Expand All @@ -419,32 +430,33 @@ export default function BpmnRenderer(

newWaypoints[0] = normalizeLength(newWaypoints[1], newWaypoints[0], FLOW_LENGTH);

if (!drawEnd) {
newWaypoints = newWaypoints.reverse();
}
var attrs = {
stroke: '#dddddd'
};

var pathData = createPathFromConnection({ waypoints: newWaypoints });
if (isOutgoing) {

var fill = getFillColor(element, defaultFillColor),
stroke = '#dddddd';
// Reverse order again for correct end marker position
newWaypoints = newWaypoints.reverse();
} else {

var attrs = {
strokeLinejoin: 'round',
markerEnd: marker('sequenceflow-end', fill, stroke),
stroke: stroke
};
// Remove start marker for incomming flows
attrs.markerStart = undefined;
}

drawPath(parentGfx, pathData, attrs);
// Monkey-patch the waypoints for rendering
var oldWaypoints = connection.waypoints;
connection.waypoints = newWaypoints;
renderer(connection.type)(parentGfx, connection, attrs);
connection.waypoints = oldWaypoints;
};

primary.incoming && primary.incoming.forEach(function(connection) {
var lastSegment = connection.waypoints.slice(connection.waypoints.length - 2);
drawFakeConnection(lastSegment, true);
drawFakeConnection(connection, false);
});

primary.outgoing && primary.outgoing.forEach(function(connection) {
var firstSegment = connection.waypoints.slice(0, 2);
drawFakeConnection(firstSegment.reverse(), false);
drawFakeConnection(connection, true);
});
}

Expand Down Expand Up @@ -1429,17 +1441,19 @@ export default function BpmnRenderer(

return drawDiamond(parentGfx, element.width, element.height, attrs);
},
'bpmn:SequenceFlow': function(parentGfx, element) {
'bpmn:SequenceFlow': function(parentGfx, element, attrs) {
attrs = attrs || {};

var pathData = createPathFromConnection(element);

var fill = getFillColor(element, defaultFillColor),
stroke = getStrokeColor(element, defaultStrokeColor);
var fill = attrs.fill || getFillColor(element, defaultFillColor),
stroke = attrs.stroke || getStrokeColor(element, defaultStrokeColor);

var attrs = {
attrs = assign({
strokeLinejoin: 'round',
markerEnd: marker('sequenceflow-end', fill, stroke),
stroke: getStrokeColor(element, defaultStrokeColor)
};
}, attrs || {});

var path = drawPath(parentGfx, pathData, attrs);

Expand Down Expand Up @@ -1493,41 +1507,56 @@ export default function BpmnRenderer(

return drawLine(parentGfx, element.waypoints, attrs);
},
'bpmn:DataInputAssociation': function(parentGfx, element) {
var fill = getFillColor(element, defaultFillColor),
stroke = getStrokeColor(element, defaultStrokeColor);
'bpmn:DataInputAssociation': function(parentGfx, element, attrs) {
attrs = attrs || {};

return renderer('bpmn:Association')(parentGfx, element, {
var fill = attrs.fill || getFillColor(element, defaultFillColor),
stroke = attrs.stroke || getStrokeColor(element, defaultStrokeColor);

attrs = assign({
fill: fill,
stroke: stroke,
markerEnd: marker('association-end', fill, stroke)
});
}, attrs);

return renderer('bpmn:Association')(parentGfx, element, attrs);
},
'bpmn:DataOutputAssociation': function(parentGfx, element) {
var fill = getFillColor(element, defaultFillColor),
stroke = getStrokeColor(element, defaultStrokeColor);
'bpmn:DataOutputAssociation': function(parentGfx, element, attrs) {
attrs = attrs || {};

var fill = attrs.fill || getFillColor(element, defaultFillColor),
stroke = attrs.stroke || getStrokeColor(element, defaultStrokeColor);

return renderer('bpmn:Association')(parentGfx, element, {

attrs = assign({
fill: fill,
stroke: stroke,
markerEnd: marker('association-end', fill, stroke)
});
}, attrs);

return renderer('bpmn:Association')(parentGfx, element, attrs);
},
'bpmn:MessageFlow': function(parentGfx, element) {
'bpmn:MessageFlow': function(parentGfx, element, attrs) {
attrs = attrs || {};

var semantic = getSemantic(element),
di = getDi(element);

var fill = getFillColor(element, defaultFillColor),
stroke = getStrokeColor(element, defaultStrokeColor);
var fill = attrs.fill || getFillColor(element, defaultFillColor),
stroke = attrs.stroke || getStrokeColor(element, defaultStrokeColor);

var pathData = createPathFromConnection(element);

var attrs = {

attrs = assign({
markerEnd: marker('messageflow-end', fill, stroke),
markerStart: marker('messageflow-start', fill, stroke),
strokeDasharray: '10, 12',
strokeLinecap: 'round',
strokeLinejoin: 'round',
strokeWidth: '1.5px',
stroke: getStrokeColor(element, defaultStrokeColor)
};
stroke: stroke
}, attrs);

var path = drawPath(parentGfx, pathData, attrs);

Expand Down Expand Up @@ -1679,7 +1708,7 @@ export default function BpmnRenderer(
renderEventContent(element, parentGfx);

if (element.isSecondary && element.primaryShape) {
drawFakeFlows(element, parentGfx, 50);
drawFakeFlows(element, parentGfx);
}

return outer;
Expand Down
10 changes: 5 additions & 5 deletions lib/features/subprocess-navigation/CollapsedSubprocessElements.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@ export default function SubprocessElements(eventBus, elementRegistry, canvas, el

var primary = process.primaryShape;

var xOffset = (boundary.x + 15 - primary.x) / primary.width;
var yOffset = (boundary.y + 15 - primary.y) / primary.height;
var realtiveXPos = (boundary.x + 15 - primary.x) / primary.width;
var relativeYPos = (boundary.y + 15 - primary.y) / primary.height;

var dx = process.x + (process.width * xOffset) - 15;
var dy = process.y + (process.height * yOffset) - 15;
var dx = process.x + (process.width * realtiveXPos) - 15;
var dy = process.y + (process.height * relativeYPos) - 15;

var boundaryShape = elementFactory.createShape(elementData(bo, {
id: boundary.id,
Expand All @@ -44,7 +44,7 @@ export default function SubprocessElements(eventBus, elementRegistry, canvas, el
di: boundary.di
}));

boundaryShape.id = 'shadow-' + boundaryShape.id;
boundaryShape.id = boundaryShape.id + '_secondary';

canvas.addShape(boundaryShape, process.parent);

Expand Down

0 comments on commit 1854b49

Please sign in to comment.