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

feat(draw): render colors 

Related to #629
This commit is contained in:
Philipp Fromme 2016-11-23 13:03:38 +01:00 committed by Nico Rehwaldt
parent eab9ac9bef
commit 4059f2c501
1 changed files with 214 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

292
lib/draw/BpmnRenderer.js
View File

@ -12,7 +12,8 @@ var BaseRenderer = require('diagram-js/lib/draw/BaseRenderer'),
TextUtil = require('diagram-js/lib/util/Text'),
DiUtil = require('../util/DiUtil');
var is = require('../util/ModelUtil').is;
var getBusinessObject = require('../util/ModelUtil').getBusinessObject,
is = require('../util/ModelUtil').is;
var RenderUtil = require('diagram-js/lib/util/RenderUtil');
@ -400,7 +401,15 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
function renderEmbeddedLabel(parentGfx, element, align) {
var semantic = getSemantic(element);
return renderLabel(parentGfx, semantic.name, { box: element, align: align, padding: 5 });
return renderLabel(parentGfx, semantic.name, {
box: element,
align: align,
padding: 5,
style: {
fill: getStrokeColor(element)
}
});
}
function renderExternalLabel(parentGfx, element) {
@ -418,7 +427,10 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
function renderLaneLabel(parentGfx, text, element) {
var textBox = renderLabel(parentGfx, text, {
box: { height: 30, width: element.height },
align: 'center-middle'
align: 'center-middle',
style: {
fill: getStrokeColor(element)
}
});
var top = -1 * element.height;
@ -438,10 +450,14 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
var handlers = this.handlers = {
'bpmn:Event': function(parentGfx, element, attrs) {
return drawCircle(parentGfx, element.width, element.height, attrs);
return drawCircle(parentGfx, element.width, element.height, attrs);
},
'bpmn:StartEvent': function(parentGfx, element) {
var attrs = {};
var attrs = {
fill: getFillColor(element),
stroke: getStrokeColor(element)
};
var semantic = getSemantic(element);
if (!semantic.isInterrupting) {
@ -469,8 +485,8 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
}
});
var fill = isThrowing ? 'black' : 'white';
var stroke = isThrowing ? 'white' : 'black';
var fill = isThrowing ? getStrokeColor(element) : getFillColor(element);
var stroke = isThrowing ? getFillColor(element) : getStrokeColor(element);
var messagePath = drawPath(parentGfx, pathData, {
strokeWidth: 1,
@ -481,9 +497,10 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
return messagePath;
},
'bpmn:TimerEventDefinition': function(parentGfx, element) {
var circle = drawCircle(parentGfx, element.width, element.height, 0.2 * element.height, {
strokeWidth: 2
strokeWidth: 2,
fill: getFillColor(element),
stroke: getStrokeColor(element)
});
var pathData = pathMap.getScaledPath('EVENT_TIMER_WH', {
@ -499,7 +516,8 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
drawPath(parentGfx, pathData, {
strokeWidth: 2,
strokeLinecap: 'square'
strokeLinecap: 'square',
stroke: getStrokeColor(element)
});
for (var i = 0;i < 12;i++) {
@ -521,7 +539,8 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
drawPath(parentGfx, linePathData, {
strokeWidth: 1,
strokeLinecap: 'square',
transform: 'rotate(' + (i * 30) + ',' + height + ',' + width + ')'
transform: 'rotate(' + (i * 30) + ',' + height + ',' + width + ')',
stroke: getStrokeColor(element)
});
}
@ -539,11 +558,12 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
}
});
var fill = isThrowing ? 'black' : 'none';
var fill = isThrowing ? getStrokeColor(event) : 'none';
return drawPath(parentGfx, pathData, {
strokeWidth: 1,
fill: fill
fill: fill,
stroke: getStrokeColor(event)
});
},
'bpmn:ConditionalEventDefinition': function(parentGfx, event) {
@ -559,7 +579,8 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
});
return drawPath(parentGfx, pathData, {
strokeWidth: 1
strokeWidth: 1,
stroke: getStrokeColor(event)
});
},
'bpmn:LinkEventDefinition': function(parentGfx, event, isThrowing) {
@ -574,11 +595,12 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
}
});
var fill = isThrowing ? 'black' : 'none';
var fill = isThrowing ? getStrokeColor(event) : 'none';
return drawPath(parentGfx, pathData, {
strokeWidth: 1,
fill: fill
fill: fill,
stroke: getStrokeColor(event)
});
},
'bpmn:ErrorEventDefinition': function(parentGfx, event, isThrowing) {
@ -593,11 +615,12 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
}
});
var fill = isThrowing ? 'black' : 'none';
var fill = isThrowing ? getStrokeColor(event) : 'none';
return drawPath(parentGfx, pathData, {
strokeWidth: 1,
fill: fill
fill: fill,
stroke: getStrokeColor(event)
});
},
'bpmn:CancelEventDefinition': function(parentGfx, event, isThrowing) {
@ -635,11 +658,12 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
}
});
var fill = isThrowing ? 'black' : 'none';
var fill = isThrowing ? getStrokeColor(event) : 'none';
return drawPath(parentGfx, pathData, {
strokeWidth: 1,
fill: fill
fill: fill,
stroke: getStrokeColor(event)
});
},
'bpmn:SignalEventDefinition': function(parentGfx, event, isThrowing) {
@ -654,11 +678,12 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
}
});
var fill = isThrowing ? 'black' : 'none';
var fill = isThrowing ? getStrokeColor(event) : 'none';
return drawPath(parentGfx, pathData, {
strokeWidth: 1,
fill: fill
fill: fill,
stroke: getStrokeColor(event)
});
},
'bpmn:MultipleEventDefinition': function(parentGfx, event, isThrowing) {
@ -693,12 +718,16 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
});
return drawPath(parentGfx, pathData, {
strokeWidth: 1
strokeWidth: 1,
fill: getStrokeColor(event),
stroke: getStrokeColor(event)
});
},
'bpmn:EndEvent': function(parentGfx, element) {
var circle = renderer('bpmn:Event')(parentGfx, element, {
strokeWidth: 4
strokeWidth: 4,
fill: getFillColor(element),
stroke: getStrokeColor(element)
});
renderEventContent(element, parentGfx, true);
@ -708,14 +737,24 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
'bpmn:TerminateEventDefinition': function(parentGfx, element) {
var circle = drawCircle(parentGfx, element.width, element.height, 8, {
strokeWidth: 4,
fill: 'black'
fill: getStrokeColor(element),
stroke: getStrokeColor(element)
});
return circle;
},
'bpmn:IntermediateEvent': function(parentGfx, element) {
var outer = renderer('bpmn:Event')(parentGfx, element, { strokeWidth: 1 });
/* inner */ drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, { strokeWidth: 1, fill: 'none' });
var outer = renderer('bpmn:Event')(parentGfx, element, {
strokeWidth: 1,
fill: getFillColor(element),
stroke: getStrokeColor(element)
});
/* inner */ drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, {
strokeWidth: 1,
fill: getFillColor(element, 'none'),
stroke: getStrokeColor(element)
});
renderEventContent(element, parentGfx);
@ -728,10 +767,17 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
return drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, attrs);
},
'bpmn:Task': function(parentGfx, element, attrs) {
'bpmn:Task': function(parentGfx, element) {
var attrs = {
fill: getFillColor(element),
stroke: getStrokeColor(element)
};
var rect = renderer('bpmn:Activity')(parentGfx, element, attrs);
renderEmbeddedLabel(parentGfx, element, 'center-middle');
attachTaskMarkers(parentGfx, element);
return rect;
},
'bpmn:ServiceTask': function(parentGfx, element) {
@ -746,7 +792,8 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
/* service bg */ drawPath(parentGfx, pathDataBG, {
strokeWidth: 1,
fill: 'none'
fill: getFillColor(element),
stroke: getStrokeColor(element)
});
var fillPathData = pathMap.getScaledPath('TASK_TYPE_SERVICE_FILL', {
@ -758,8 +805,7 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
/* service fill */ drawPath(parentGfx, fillPathData, {
strokeWidth: 0,
stroke: 'none',
fill: 'white'
fill: getFillColor(element)
});
var pathData = pathMap.getScaledPath('TASK_TYPE_SERVICE', {
@ -771,7 +817,8 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
/* service */ drawPath(parentGfx, pathData, {
strokeWidth: 1,
fill: 'white'
fill: getFillColor(element),
stroke: getStrokeColor(element)
});
return task;
@ -791,7 +838,8 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
/* user path */ drawPath(parentGfx, pathData, {
strokeWidth: 0.5,
fill: 'none'
fill: getFillColor(element),
stroke: getStrokeColor(element)
});
var pathData2 = pathMap.getScaledPath('TASK_TYPE_USER_2', {
@ -803,7 +851,8 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
/* user2 path */ drawPath(parentGfx, pathData2, {
strokeWidth: 0.5,
fill: 'none'
fill: getFillColor(element),
stroke: getStrokeColor(element)
});
var pathData3 = pathMap.getScaledPath('TASK_TYPE_USER_3', {
@ -815,7 +864,8 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
/* user3 path */ drawPath(parentGfx, pathData3, {
strokeWidth: 0.5,
fill: 'black'
fill: getStrokeColor(element),
stroke: getStrokeColor(element)
});
return task;
@ -831,9 +881,9 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
});
/* manual path */ drawPath(parentGfx, pathData, {
strokeWidth: 0.25,
fill: 'white',
stroke: 'black'
strokeWidth: 0.5, // 0.25,
fill: getFillColor(element),
stroke: getStrokeColor(element)
});
return task;
@ -890,7 +940,9 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
}
/* receive path */ drawPath(parentGfx, pathData, {
strokeWidth: 1
strokeWidth: 1,
fill: getFillColor(element),
stroke: getStrokeColor(element)
});
return task;
@ -906,7 +958,8 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
});
/* script path */ drawPath(parentGfx, pathData, {
strokeWidth: 1
strokeWidth: 1,
stroke: getStrokeColor(element)
});
return task;
@ -924,7 +977,8 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
var businessHeaderPath = drawPath(parentGfx, headerPathData);
svgAttr(businessHeaderPath, {
strokeWidth: 1,
fill: 'AAA'
fill: getFillColor(element, '#aaaaaa'),
stroke: getStrokeColor(element)
});
var headerData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_MAIN', {
@ -936,14 +990,18 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
var businessPath = drawPath(parentGfx, headerData);
svgAttr(businessPath, {
strokeWidth: 1
strokeWidth: 1,
stroke: getStrokeColor(element)
});
return task;
},
'bpmn:SubProcess': function(parentGfx, element, attrs) {
attrs = assign({ fillOpacity: 0.95 }, attrs);
attrs = assign({
fillOpacity: 0.95,
fill: getFillColor(element),
stroke: getStrokeColor(element)
}, attrs);
var rect = renderer('bpmn:Activity')(parentGfx, element, attrs);
@ -986,10 +1044,13 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
},
'bpmn:Participant': function(parentGfx, element) {
var lane = renderer('bpmn:Lane')(parentGfx, element, {
var attrs = {
fillOpacity: 0.95,
fill: 'White'
});
fill: getFillColor(element),
stroke: getStrokeColor(element)
};
var lane = renderer('bpmn:Lane')(parentGfx, element, attrs);
var expandedPool = DiUtil.isExpanded(element);
@ -997,13 +1058,20 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
drawLine(parentGfx, [
{ x: 30, y: 0 },
{ x: 30, y: element.height }
]);
], {
stroke: getStrokeColor(element)
});
var text = getSemantic(element).name;
renderLaneLabel(parentGfx, text, element);
} else {
// Collapsed pool draw text inline
var text2 = getSemantic(element).name;
renderLabel(parentGfx, text2, { box: element, align: 'center-middle' });
renderLabel(parentGfx, text2, {
box: element, align: 'center-middle',
style: {
fill: getStrokeColor(element)
}
});
}
var participantMultiplicity = !!(getSemantic(element).participantMultiplicity);
@ -1015,9 +1083,10 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
return lane;
},
'bpmn:Lane': function(parentGfx, element, attrs) {
var rect = drawRect(parentGfx, element.width, element.height, 0, attrs || {
fill: 'none'
});
var rect = drawRect(parentGfx, element.width, element.height, 0, assign({
fill: getFillColor(element),
stroke: getStrokeColor(element)
}, attrs));
var semantic = getSemantic(element);
@ -1029,18 +1098,29 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
return rect;
},
'bpmn:InclusiveGateway': function(parentGfx, element) {
var diamond = drawDiamond(parentGfx, element.width, element.height);
var attrs = {
fill: getFillColor(element),
stroke: getStrokeColor(element)
};
var diamond = drawDiamond(parentGfx, element.width, element.height, attrs);
/* circle path */
drawCircle(parentGfx, element.width, element.height, element.height * 0.24, {
strokeWidth: 2.5,
fill: 'none'
fill: getFillColor(element),
stroke: getStrokeColor(element)
});
return diamond;
},
'bpmn:ExclusiveGateway': function(parentGfx, element) {
var diamond = drawDiamond(parentGfx, element.width, element.height);
var attrs = {
fill: getFillColor(element),
stroke: getStrokeColor(element)
};
var diamond = drawDiamond(parentGfx, element.width, element.height, attrs);
var pathData = pathMap.getScaledPath('GATEWAY_EXCLUSIVE', {
xScaleFactor: 0.4,
@ -1056,14 +1136,20 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
if ((getDi(element).isMarkerVisible)) {
drawPath(parentGfx, pathData, {
strokeWidth: 1,
fill: 'black'
fill: getStrokeColor(element),
stroke: getStrokeColor(element)
});
}
return diamond;
},
'bpmn:ComplexGateway': function(parentGfx, element) {
var diamond = drawDiamond(parentGfx, element.width, element.height);
var attrs = {
fill: getFillColor(element),
stroke: getStrokeColor(element)
};
var diamond = drawDiamond(parentGfx, element.width, element.height, attrs);
var pathData = pathMap.getScaledPath('GATEWAY_COMPLEX', {
xScaleFactor: 0.5,
@ -1078,13 +1164,19 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
/* complex path */ drawPath(parentGfx, pathData, {
strokeWidth: 1,
fill: 'black'
fill: getStrokeColor(element),
stroke: getStrokeColor(element)
});
return diamond;
},
'bpmn:ParallelGateway': function(parentGfx, element) {
var diamond = drawDiamond(parentGfx, element.width, element.height);
var attrs = {
fill: getFillColor(element),
stroke: getStrokeColor(element)
};
var diamond = drawDiamond(parentGfx, element.width, element.height, attrs);
var pathData = pathMap.getScaledPath('GATEWAY_PARALLEL', {
xScaleFactor: 0.6,
@ -1099,7 +1191,8 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
/* parallel path */ drawPath(parentGfx, pathData, {
strokeWidth: 1,
fill: 'black'
fill: getStrokeColor(element),
stroke: getStrokeColor(element)
});
return diamond;
@ -1108,11 +1201,17 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
var semantic = getSemantic(element);
var diamond = drawDiamond(parentGfx, element.width, element.height);
var attrs = {
fill: getFillColor(element),
stroke: getStrokeColor(element)
};
var diamond = drawDiamond(parentGfx, element.width, element.height, attrs);
/* outer circle path */ drawCircle(parentGfx, element.width, element.height, element.height * 0.20, {
strokeWidth: 1,
fill: 'none'
fill: 'none',
stroke: getStrokeColor(element)
});
var type = semantic.eventGatewayType;
@ -1131,10 +1230,13 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
}
});
/* event path */ drawPath(parentGfx, pathData, {
var attrs = {
strokeWidth: 2,
fill: 'none'
});
fill: getFillColor(element, 'none'),
stroke: getStrokeColor(element)
};
/* event path */ drawPath(parentGfx, pathData, attrs);
}
if (type === 'Parallel') {
@ -1161,7 +1263,8 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
var innerCircle = drawCircle(parentGfx, element.width, element.height, element.height * 0.26);
svgAttr(innerCircle, {
strokeWidth: 1,
fill: 'none'
fill: 'none',
stroke: getStrokeColor(element)
});
}
@ -1176,10 +1279,14 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
},
'bpmn:SequenceFlow': function(parentGfx, element) {
var pathData = createPathFromConnection(element);
var path = drawPath(parentGfx, pathData, {
var attrs = {
strokeLinejoin: 'round',
markerEnd: marker('sequenceflow-end')
});
markerEnd: marker('sequenceflow-end'),
stroke: getStrokeColor(element)
};
var path = drawPath(parentGfx, pathData, attrs);
var sequenceFlow = getSemantic(element);
var source = element.source.businessObject;
@ -1238,14 +1345,18 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
di = getDi(element);
var pathData = createPathFromConnection(element);
var path = drawPath(parentGfx, pathData, {
var attrs = {
markerEnd: marker('messageflow-end'),
markerStart: marker('messageflow-start'),
strokeDasharray: '10, 12',
strokeLinecap: 'round',
strokeLinejoin: 'round',
strokeWidth: '1.5px'
});
strokeWidth: '1.5px',
stroke: getStrokeColor(element)
};
var path = drawPath(parentGfx, pathData, attrs);
if (semantic.messageRef) {
var midPoint = path.getPointAtLength(path.getTotalLength() / 2);
@ -1284,7 +1395,10 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
}
});
var elementObject = drawPath(parentGfx, pathData, { fill: 'white' });
var elementObject = drawPath(parentGfx, pathData, {
fill: getFillColor(element),
stroke: getStrokeColor(element)
});
var semantic = getSemantic(element);
@ -1333,7 +1447,8 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
var elementStore = drawPath(parentGfx, DATA_STORE_PATH, {
strokeWidth: 2,
fill: 'white'
fill: getFillColor(element),
stroke: getStrokeColor(element)
});
return elementStore;
@ -1344,7 +1459,9 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
cancel = semantic.cancelActivity;
var attrs = {
strokeWidth: 1
strokeWidth: 1,
fill: getFillColor(element),
stroke: getStrokeColor(element)
};
if (!cancel) {
@ -1414,7 +1531,9 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
my: 0.0
}
});
drawPath(parentGfx, textPathData);
drawPath(parentGfx, textPathData, {
stroke: getStrokeColor(element)
});
var text = getSemantic(element).text || '';
renderLabel(parentGfx, text, { box: element, align: 'left-middle', padding: 5 });
@ -1437,7 +1556,9 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
},
'SubProcessMarker': function(parentGfx, element) {
var markerRect = drawRect(parentGfx, 14, 14, 0, {
strokeWidth: 1
strokeWidth: 1,
fill: getFillColor(element),
stroke: getStrokeColor(element)
});
// Process marker is placed in the middle of the box
@ -1455,7 +1576,10 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
}
});
drawMarker('sub-process', parentGfx, markerPath);
drawMarker('sub-process', parentGfx, markerPath, {
fill: getFillColor(element),
stroke: getStrokeColor(element)
});
},
'ParallelMarker': function(parentGfx, element, position) {
var markerPath = pathMap.getScaledPath('MARKER_PARALLEL', {
@ -1786,3 +1910,15 @@ function getRectPath(shape) {
return componentsToPath(rectPath);
}
function getFillColor(element, defaultColor) {
var bo = getBusinessObject(element);
return bo.di.get('fill') || defaultColor || 'white';
}
function getStrokeColor(element, defaultColor) {
var bo = getBusinessObject(element);
return bo.di.get('stroke') || defaultColor || 'black';
}