From 4059f2c50141775f429a73157df14618d2c9cd90 Mon Sep 17 00:00:00 2001 From: Philipp Fromme Date: Wed, 23 Nov 2016 13:03:38 +0100 Subject: [PATCH] feat(draw): render colors Related to #629 --- lib/draw/BpmnRenderer.js | 292 ++++++++++++++++++++++++++++----------- 1 file changed, 214 insertions(+), 78 deletions(-) diff --git a/lib/draw/BpmnRenderer.js b/lib/draw/BpmnRenderer.js index 8b8b2e6d..03de4472 100644 --- a/lib/draw/BpmnRenderer.js +++ b/lib/draw/BpmnRenderer.js @@ -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'; +}