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 //////////////////////
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) {
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 //////////////////////

18
lib/draw/BpmnRenderer.js
View File

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

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

@ -9,7 +9,8 @@ import {
getDiamondPath,
getRectPath,
getFillColor,
getStrokeColor
getStrokeColor,
getLabelColor
} 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"?>
<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:participant id="Participant_11xqomt" name="Regressnahme &#10;Sachbearbeiter" processRef="Process_1" />
<bpmn:participant id="Participant_0igvg0r" />
@ -84,14 +84,14 @@
<bpmndi:BPMNShape id="Task_02fdytg_di" bpmnElement="Task_02fdytg">
<dc:Bounds x="430" y="189" width="100" height="80" />
</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="430" y="229" />
<bpmndi:BPMNLabel>
<bpmndi:BPMNLabel color:color="#FB8C00">
<dc:Bounds x="392" y="210" width="13" height="12" />
</bpmndi:BPMNLabel>
</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" />
</bpmndi:BPMNShape>
<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" />
</bpmndi:BPMNLabel>
</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" />
<bpmndi:BPMNLabel>
<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[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[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[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}$/);
@ -450,7 +450,8 @@ describe('draw - bpmn renderer', function() {
describe('default colors', function() {
var defaultFillColor = 'red',
defaultStrokeColor = 'lime';
defaultStrokeColor = 'lime',
defaultLabelColor = 'blue';
// TODO(philippfromme): remove once we drop PhantomJS
function expectedColors(color) {
@ -478,7 +479,8 @@ describe('draw - bpmn renderer', function() {
beforeEach(bootstrapViewer(xml,{
bpmnRenderer: {
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} 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 circle, path, polygon, polyline, rect, text;
@ -536,7 +538,7 @@ describe('draw - bpmn renderer', function() {
if (element.labelTarget) {
text = domQuery('text', djsVisual);
expectFillColor(text, strokeColor);
expectFillColor(text, labelColor);
} else if (element.waypoints) {
path = domQuery('path', djsVisual);
polyline = domQuery('polyline', djsVisual);
@ -547,13 +549,13 @@ describe('draw - bpmn renderer', function() {
expectFillColor(circle, fillColor);
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);
text = domQuery('text', djsVisual);
expectFillColor(rect, fillColor);
expectStrokeColor(rect, strokeColor);
expectFillColor(text, strokeColor);
expectFillColor(text, labelColor);
} else if (isAny(element, [ 'bpmn:Gateway' ])) {
polygon = domQuery('polygon', djsVisual);
@ -573,14 +575,12 @@ describe('draw - bpmn renderer', function() {
var gfx = elementRegistry.getGraphics(element),
di = getDi(element),
fillColor = di.get('bioc:fill'),
strokeColor = di.get('bioc:stroke');
fillColor = di.get('color:background-color') || di.get('bioc:fill') || defaultFillColor,
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);
} else {
expectColors(element, gfx, defaultFillColor, defaultStrokeColor);
}
expectColors(element, gfx, fillColor, strokeColor, labelColor);
});
}));