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-renderer): support displaying bpmn-in-color

This commit is contained in:
Maciej Barelkowski 2021-05-25 16:07:59 +02:00 committed by fake-join[bot]
parent fceeb0bc56
commit 4251e31af2
5 changed files with 50 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
lib/draw/BpmnRenderUtil.js
View File

@ -54,13 +54,24 @@ export function getSemantic(element) {
// color access ////////////////////// // color access //////////////////////
export function getFillColor(element, defaultColor) { export function getFillColor(element, defaultColor) {
return getDi(element).get('bioc:fill') || defaultColor || 'white'; var di = getDi(element);
return di.get('color:background-color') || di.get('bioc:fill') || defaultColor || 'white';
} }
export function getStrokeColor(element, defaultColor) { export function getStrokeColor(element, defaultColor) {
return getDi(element).get('bioc:stroke') || defaultColor || 'black'; var di = getDi(element);
return di.get('color:border-color') || di.get('bioc:stroke') || defaultColor || 'black';
} }
export function getLabelColor(element, defaultColor, defaultStrokeColor) {
var di = getDi(element),
label = di.get('label');
return label && label.get('color:color') || defaultColor ||
getStrokeColor(element, defaultStrokeColor);
}
// cropping path customizations ////////////////////// // cropping path customizations //////////////////////

18
lib/draw/BpmnRenderer.js
View File

@ -34,7 +34,8 @@ import {
getDiamondPath, getDiamondPath,
getRectPath, getRectPath,
getFillColor, getFillColor,
getStrokeColor getStrokeColor,
getLabelColor
} from './BpmnRenderUtil'; } from './BpmnRenderUtil';
import { import {
@ -73,7 +74,8 @@ export default function BpmnRenderer(
BaseRenderer.call(this, eventBus, priority); BaseRenderer.call(this, eventBus, priority);
var defaultFillColor = config && config.defaultFillColor, var defaultFillColor = config && config.defaultFillColor,
defaultStrokeColor = config && config.defaultStrokeColor; defaultStrokeColor = config && config.defaultStrokeColor,
defaultLabelColor = config && config.defaultLabelColor;
var rendererId = RENDERER_IDS.next(); var rendererId = RENDERER_IDS.next();
@ -472,7 +474,7 @@ export default function BpmnRenderer(
align: align, align: align,
padding: 5, padding: 5,
style: { style: {
fill: getStrokeColor(element, defaultStrokeColor) fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
} }
}); });
} }
@ -493,7 +495,7 @@ export default function BpmnRenderer(
{}, {},
textRenderer.getExternalStyle(), textRenderer.getExternalStyle(),
{ {
fill: getStrokeColor(element, defaultStrokeColor) fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
} }
) )
}); });
@ -507,7 +509,7 @@ export default function BpmnRenderer(
}, },
align: 'center-middle', align: 'center-middle',
style: { style: {
fill: getStrokeColor(element, defaultStrokeColor) fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
} }
}); });
@ -1163,7 +1165,7 @@ export default function BpmnRenderer(
renderLabel(parentGfx, text2, { renderLabel(parentGfx, text2, {
box: element, align: 'center-middle', box: element, align: 'center-middle',
style: { style: {
fill: getStrokeColor(element, defaultStrokeColor) fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
} }
}); });
} }
@ -1482,7 +1484,7 @@ export default function BpmnRenderer(
align: 'center-top', align: 'center-top',
fitBox: true, fitBox: true,
style: { style: {
fill: getStrokeColor(element, defaultStrokeColor) fill: getStrokeColor(element, defaultLabelColor, defaultStrokeColor)
} }
}); });
@ -1648,7 +1650,7 @@ export default function BpmnRenderer(
align: 'left-top', align: 'left-top',
padding: 5, padding: 5,
style: { style: {
fill: getStrokeColor(element, defaultStrokeColor) fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
} }
}); });

9
test/spec/draw/BpmnRenderUtilSpec.js
View File

@ -9,7 +9,8 @@ import {
getDiamondPath, getDiamondPath,
getRectPath, getRectPath,
getFillColor, getFillColor,
getStrokeColor getStrokeColor,
getLabelColor
} from 'lib/draw/BpmnRenderUtil'; } from 'lib/draw/BpmnRenderUtil';
@ -83,4 +84,10 @@ describe('BpmnRenderUtil', function() {
}); });
it('should expose getLabelColor', function() {
expect(getLabelColor).to.be.a('function');
});
}); });

10
test/spec/draw/BpmnRenderer.colors.bpmn
View File

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?> <?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:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="2.2.4"> <bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:color="http://www.omg.org/spec/BPMN/non-normative/color/1.0" xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="2.2.4">
<bpmn:collaboration id="Collaboration_12gf8gk"> <bpmn:collaboration id="Collaboration_12gf8gk">
<bpmn:participant id="Participant_11xqomt" name="Regressnahme &#10;Sachbearbeiter" processRef="Process_1" /> <bpmn:participant id="Participant_11xqomt" name="Regressnahme &#10;Sachbearbeiter" processRef="Process_1" />
<bpmn:participant id="Participant_0igvg0r" /> <bpmn:participant id="Participant_0igvg0r" />
@ -84,14 +84,14 @@
<bpmndi:BPMNShape id="Task_02fdytg_di" bpmnElement="Task_02fdytg"> <bpmndi:BPMNShape id="Task_02fdytg_di" bpmnElement="Task_02fdytg">
<dc:Bounds x="430" y="189" width="100" height="80" /> <dc:Bounds x="430" y="189" width="100" height="80" />
</bpmndi:BPMNShape> </bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="SequenceFlow_0pqo7zt_di" bpmnElement="SequenceFlow_0pqo7zt" bioc:stroke="#3399aa"> <bpmndi:BPMNEdge id="SequenceFlow_0pqo7zt_di" bpmnElement="SequenceFlow_0pqo7zt" color:border-color="#FB8C00" bioc:stroke="#3399aa">
<di:waypoint x="368" y="229" /> <di:waypoint x="368" y="229" />
<di:waypoint x="430" y="229" /> <di:waypoint x="430" y="229" />
<bpmndi:BPMNLabel> <bpmndi:BPMNLabel color:color="#FB8C00">
<dc:Bounds x="392" y="210" width="13" height="12" /> <dc:Bounds x="392" y="210" width="13" height="12" />
</bpmndi:BPMNLabel> </bpmndi:BPMNLabel>
</bpmndi:BPMNEdge> </bpmndi:BPMNEdge>
<bpmndi:BPMNShape id="Task_04aofbe_di" bpmnElement="Task_04aofbe"> <bpmndi:BPMNShape id="Task_04aofbe_di" bpmnElement="Task_04aofbe" color:border-color="#FB8C00">
<dc:Bounds x="430" y="311" width="100" height="80" /> <dc:Bounds x="430" y="311" width="100" height="80" />
</bpmndi:BPMNShape> </bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="SequenceFlow_1qt82pt_di" bpmnElement="SequenceFlow_1qt82pt" bioc:stroke="blue" bioc:fill="yellow"> <bpmndi:BPMNEdge id="SequenceFlow_1qt82pt_di" bpmnElement="SequenceFlow_1qt82pt" bioc:stroke="blue" bioc:fill="yellow">
@ -132,7 +132,7 @@
<dc:Bounds x="471" y="470" width="90" height="0" /> <dc:Bounds x="471" y="470" width="90" height="0" />
</bpmndi:BPMNLabel> </bpmndi:BPMNLabel>
</bpmndi:BPMNEdge> </bpmndi:BPMNEdge>
<bpmndi:BPMNShape id="DataStoreReference_1clvrcw_di" bpmnElement="DataStoreReference_1clvrcw"> <bpmndi:BPMNShape id="DataStoreReference_1clvrcw_di" bpmnElement="DataStoreReference_1clvrcw" color:background-color="#FFE0B2">
<dc:Bounds x="143" y="364" width="50" height="50" /> <dc:Bounds x="143" y="364" width="50" height="50" />
<bpmndi:BPMNLabel> <bpmndi:BPMNLabel>
<dc:Bounds x="154" y="414" width="29" height="12" /> <dc:Bounds x="154" y="414" width="29" height="12" />

28
test/spec/draw/BpmnRendererSpec.js
View File

@ -355,7 +355,7 @@ describe('draw - bpmn renderer', function() {
expect(markers).to.have.length(7); expect(markers).to.have.length(7);
expect(markers[0].id).to.match(/^sequenceflow-end-rgb_255_224_178_-rgb_251_140_0_-[A-Za-z0-9]{25}$/); expect(markers[0].id).to.match(/^sequenceflow-end-rgb_255_224_178_-rgb_251_140_0_-[A-Za-z0-9]{25}$/);
expect(markers[1].id).to.match(/^sequenceflow-end-yellow-blue-[A-Za-z0-9]{25}$/); expect(markers[1].id).to.match(/^sequenceflow-end-yellow-blue-[A-Za-z0-9]{25}$/);
expect(markers[2].id).to.match(/^sequenceflow-end-white-_3399aa-[A-Za-z0-9]{25}$/); expect(markers[2].id).to.match(/^sequenceflow-end-white-_FB8C00-[A-Za-z0-9]{25}$/);
expect(markers[3].id).to.match(/^sequenceflow-end-white-rgba_255_0_0_0_9_-[A-Za-z0-9]{25}$/); expect(markers[3].id).to.match(/^sequenceflow-end-white-rgba_255_0_0_0_9_-[A-Za-z0-9]{25}$/);
expect(markers[4].id).to.match(/^association-end-_FFE0B2-_FB8C00-[A-Za-z0-9]{25}$/); expect(markers[4].id).to.match(/^association-end-_FFE0B2-_FB8C00-[A-Za-z0-9]{25}$/);
expect(markers[5].id).to.match(/^messageflow-end-_FFE0B2-_FB8C00-[A-Za-z0-9]{25}$/); expect(markers[5].id).to.match(/^messageflow-end-_FFE0B2-_FB8C00-[A-Za-z0-9]{25}$/);
@ -450,7 +450,8 @@ describe('draw - bpmn renderer', function() {
describe('default colors', function() { describe('default colors', function() {
var defaultFillColor = 'red', var defaultFillColor = 'red',
defaultStrokeColor = 'lime'; defaultStrokeColor = 'lime',
defaultLabelColor = 'blue';
// TODO(philippfromme): remove once we drop PhantomJS // TODO(philippfromme): remove once we drop PhantomJS
function expectedColors(color) { function expectedColors(color) {
@ -478,7 +479,8 @@ describe('draw - bpmn renderer', function() {
beforeEach(bootstrapViewer(xml,{ beforeEach(bootstrapViewer(xml,{
bpmnRenderer: { bpmnRenderer: {
defaultFillColor: defaultFillColor, defaultFillColor: defaultFillColor,
defaultStrokeColor: defaultStrokeColor defaultStrokeColor: defaultStrokeColor,
defaultLabelColor: defaultLabelColor
} }
})); }));
@ -528,7 +530,7 @@ describe('draw - bpmn renderer', function() {
* @param {string} fillColor - Fill color to expect. * @param {string} fillColor - Fill color to expect.
* @param {string} strokeColor - Stroke color to expect. * @param {string} strokeColor - Stroke color to expect.
*/ */
function expectColors(element, gfx, fillColor, strokeColor) { function expectColors(element, gfx, fillColor, strokeColor, labelColor) {
var djsVisual = domQuery('.djs-visual', gfx); var djsVisual = domQuery('.djs-visual', gfx);
var circle, path, polygon, polyline, rect, text; var circle, path, polygon, polyline, rect, text;
@ -536,7 +538,7 @@ describe('draw - bpmn renderer', function() {
if (element.labelTarget) { if (element.labelTarget) {
text = domQuery('text', djsVisual); text = domQuery('text', djsVisual);
expectFillColor(text, strokeColor); expectFillColor(text, labelColor);
} else if (element.waypoints) { } else if (element.waypoints) {
path = domQuery('path', djsVisual); path = domQuery('path', djsVisual);
polyline = domQuery('polyline', djsVisual); polyline = domQuery('polyline', djsVisual);
@ -547,13 +549,13 @@ describe('draw - bpmn renderer', function() {
expectFillColor(circle, fillColor); expectFillColor(circle, fillColor);
expectStrokeColor(circle, strokeColor); expectStrokeColor(circle, strokeColor);
} else if (isAny(element, [ 'bpmn:Task', 'bpmn:SubProcess', 'bpmn:Particpant' ])) { } else if (isAny(element, [ 'bpmn:Task', 'bpmn:SubProcess', 'bpmn:Participant' ])) {
rect = domQuery('rect', djsVisual); rect = domQuery('rect', djsVisual);
text = domQuery('text', djsVisual); text = domQuery('text', djsVisual);
expectFillColor(rect, fillColor); expectFillColor(rect, fillColor);
expectStrokeColor(rect, strokeColor); expectStrokeColor(rect, strokeColor);
expectFillColor(text, strokeColor); expectFillColor(text, labelColor);
} else if (isAny(element, [ 'bpmn:Gateway' ])) { } else if (isAny(element, [ 'bpmn:Gateway' ])) {
polygon = domQuery('polygon', djsVisual); polygon = domQuery('polygon', djsVisual);
@ -573,14 +575,12 @@ describe('draw - bpmn renderer', function() {
var gfx = elementRegistry.getGraphics(element), var gfx = elementRegistry.getGraphics(element),
di = getDi(element), di = getDi(element),
fillColor = di.get('bioc:fill'), fillColor = di.get('color:background-color') || di.get('bioc:fill') || defaultFillColor,
strokeColor = di.get('bioc:stroke'); strokeColor = di.get('color:border-color') || di.get('bioc:stroke') || defaultStrokeColor,
labelDi = di.get('label'),
labelColor = labelDi && labelDi.get('color:color') || defaultLabelColor;
if (fillColor || strokeColor) { expectColors(element, gfx, fillColor, strokeColor, labelColor);
expectColors(element, gfx, fillColor, strokeColor);
} else {
expectColors(element, gfx, defaultFillColor, defaultStrokeColor);
}
}); });
})); }));