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

fix(draw): render hex and rgb encoded color markers 

Until now we did not properly sanitize the IDs we create for colored
markers. This would make the marker retrival fail with fill and
stroke colors encoded in hex and rgb(a, b, c) form.

This commit improves the situation by removing forbidden chars from
the marker ID.

Closes #981
Related to camunda/camunda-modeler#1342
This commit is contained in:
Nico Rehwaldt 2019-04-10 21:59:25 +02:00 committed by merge-me[bot]
parent cfe0da7315
commit 13e3752f94
3 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
lib/draw/BpmnRenderer.js
View File

@ -123,18 +123,21 @@ export default function BpmnRenderer(
markers[id] = marker; markers[id] = marker;
} }
function colorEscape(str) {
return str.replace(/[()\s,#]+/g, '_');
}
function marker(type, fill, stroke) { function marker(type, fill, stroke) {
var id = type + '-' + fill + '-' + stroke + '-' + rendererId; var id = type + '-' + colorEscape(fill) + '-' + colorEscape(stroke) + '-' + rendererId;
if (!markers[id]) { if (!markers[id]) {
createMarker(type, fill, stroke); createMarker(id, type, fill, stroke);
} }
return 'url(#' + id + ')'; return 'url(#' + id + ')';
} }
function createMarker(type, fill, stroke) { function createMarker(id, type, fill, stroke) {
var id = type + '-' + fill + '-' + stroke + '-' + rendererId;
if (type === 'sequenceflow-end') { if (type === 'sequenceflow-end') {
var sequenceflowEnd = svgCreate('path'); var sequenceflowEnd = svgCreate('path');

4
test/fixtures/bpmn/draw/colors.bpmn vendored
View File

@ -163,7 +163,7 @@ can be added, too</bpmn:text>
<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"> <bpmndi:BPMNEdge id="SequenceFlow_0pqo7zt_di" bpmnElement="SequenceFlow_0pqo7zt" 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>
@ -187,7 +187,7 @@ can be added, too</bpmn:text>
<dc:Bounds x="561" y="369" width="62" height="24" /> <dc:Bounds x="561" y="369" width="62" height="24" />
</bpmndi:BPMNLabel> </bpmndi:BPMNLabel>
</bpmndi:BPMNShape> </bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="SequenceFlow_17ohrlh_di" bpmnElement="SequenceFlow_17ohrlh"> <bpmndi:BPMNEdge id="SequenceFlow_17ohrlh_di" bpmnElement="SequenceFlow_17ohrlh" bioc:stroke="rgb(251, 140, 0)" bioc:fill="rgb(255, 224, 178)">
<di:waypoint x="530" y="351" /> <di:waypoint x="530" y="351" />
<di:waypoint x="574" y="351" /> <di:waypoint x="574" y="351" />
<bpmndi:BPMNLabel> <bpmndi:BPMNLabel>

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

@ -270,12 +270,14 @@ describe('draw - bpmn renderer', function() {
var svg = canvas._svg; var svg = canvas._svg;
var markers = svg.querySelectorAll('marker'); var markers = svg.querySelectorAll('marker');
expect(markers).to.have.length(5); expect(markers).to.have.length(7);
expect(markers[0].id).to.match(/^sequenceflow-end-white-black-[A-Za-z0-9]{25}$/); expect(markers[0].id).to.match(/^sequenceflow-end-white-black-[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-rgb_255_224_178_-rgb_251_140_0_-[A-Za-z0-9]{25}$/);
expect(markers[2].id).to.match(/^association-end-white-black-[A-Za-z0-9]{25}$/); expect(markers[2].id).to.match(/^sequenceflow-end-yellow-blue-[A-Za-z0-9]{25}$/);
expect(markers[3].id).to.match(/^messageflow-end-white-black-[A-Za-z0-9]{25}$/); expect(markers[3].id).to.match(/^sequenceflow-end-white-_3399aa-[A-Za-z0-9]{25}$/);
expect(markers[4].id).to.match(/^messageflow-start-white-black-[A-Za-z0-9]{25}$/); expect(markers[4].id).to.match(/^association-end-white-black-[A-Za-z0-9]{25}$/);
expect(markers[5].id).to.match(/^messageflow-end-white-black-[A-Za-z0-9]{25}$/);
expect(markers[6].id).to.match(/^messageflow-start-white-black-[A-Za-z0-9]{25}$/);
})(); })();
done(err); done(err);
@ -334,11 +336,13 @@ describe('draw - bpmn renderer', function() {
defaultStrokeColor = 'lime'; defaultStrokeColor = 'lime';
// TODO(philippfromme): remove once PhantomJS is not used anymore // TODO(philippfromme): remove once PhantomJS is not used anymore
var hexValues = { var conversionValues = {
blue: '#0000ff', blue: '#0000ff',
lime: '#00ff00', lime: '#00ff00',
red: '#ff0000', red: '#ff0000',
yellow: '#ffff00' yellow: '#ffff00',
'rgb(251, 140, 0)': '#fb8c00',
'#3399aa': 'rgb(51, 153, 170)'
}; };
beforeEach(bootstrapViewer(xml,{ beforeEach(bootstrapViewer(xml,{
@ -349,11 +353,11 @@ describe('draw - bpmn renderer', function() {
})); }));
function expectFillColor(element, color) { function expectFillColor(element, color) {
expect([ color, hexValues[ color ]]).to.include(element.style.fill); expect([ color, conversionValues[ color ]]).to.include(element.style.fill);
} }
function expectStrokeColor(element, color) { function expectStrokeColor(element, color) {
expect([ color, hexValues[ color ]]).to.include(element.style.stroke); expect([ color, conversionValues[ color ]]).to.include(element.style.stroke);
} }
/** /**