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

fix(replace-preview): escape element ids in CSS selectors

This commit is contained in:
Nico Rehwaldt 2018-04-10 09:33:11 +02:00
parent fb2e3da882
commit e5a3973107
6 changed files with 114 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.wiredeps
View File

@ -29,6 +29,9 @@
"component-event": {
"version": "0.1.4"
},
"css.escape": {
"version": "1.5.1"
},
"delegate-events": {
"version": "1.1.1",
"requires": {

4
CHANGELOG.md
View File

@ -6,6 +6,10 @@ All notable changes to [bpmn-js](https://github.com/bpmn-io/bpmn-js) are documen
___Note:__ Yet to be released changes appear here._
## 1.1.1
* `FIX`: escape `data-element-id` in CSS selectors
## 1.1.0
* `FEAT`: show gateway icon on context pad without marker ([`15dfab6b`](https://github.com/bpmn-io/bpmn-js/commit/15dfab6b5b12dd184acf070f2ab3ad205d1b245c))

6
lib/features/replace-preview/BpmnReplacePreview.js
View File

@ -2,6 +2,8 @@ import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
import inherits from 'inherits';
import cssEscape from 'css.escape';
import {
assign,
forEach
@ -56,7 +58,7 @@ export default function BpmnReplacePreview(
canvas.addShape(tempShape, element.parent);
// select the original SVG element related to the element and hide it
var gfx = domQuery('[data-element-id=' + element.id + ']', context.dragGroup);
var gfx = domQuery('[data-element-id="' + cssEscape(element.id) + '"]', context.dragGroup);
if (gfx) {
svgAttr(gfx, { display: 'none' });
@ -82,7 +84,7 @@ export default function BpmnReplacePreview(
forEach(visualReplacements, function(dragger, id) {
var originalGfx = domQuery('[data-element-id=' + id + ']', context.dragGroup);
var originalGfx = domQuery('[data-element-id="' + cssEscape(id) + '"]', context.dragGroup);
if (originalGfx) {
svgAttr(originalGfx, { display: 'inline' });

3
package.json
View File

@ -81,7 +81,8 @@
"dependencies": {
"bpmn-font": "^0.8.0",
"bpmn-moddle": "^5.1.0",
"diagram-js": "^1.1.0",
"css.escape": "^1.5.1",
"diagram-js": "^1.2.2",
"diagram-js-direct-editing": "^1.2.0",
"ids": "^0.2.0",
"inherits": "^2.0.1",

47
test/spec/features/replace-preview/BpmnReplacePreview.bpmn Normal file
View File

@ -0,0 +1,47 @@
<?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" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn">
<bpmn:process id="Process_1" isExecutable="false">
<bpmn:subProcess id="SubProcess.1" triggeredByEvent="true">
<bpmn:startEvent id="StartEvent.1" isInterrupting="false">
<bpmn:messageEventDefinition />
</bpmn:startEvent>
<bpmn:startEvent id="StartEvent.2" />
<bpmn:startEvent id="StartEvent.3" isInterrupting="false">
<bpmn:timerEventDefinition />
</bpmn:startEvent>
</bpmn:subProcess>
<bpmn:subProcess id="SubProcess_2" triggeredByEvent="true" />
<bpmn:subProcess id="SubProcess_3" />
</bpmn:process>
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
<bpmndi:BPMNShape id="SubProcess.1_di" bpmnElement="SubProcess.1" isExpanded="true">
<dc:Bounds x="92" y="46" width="149" height="138" />
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="StartEvent.1_di" bpmnElement="StartEvent.1">
<dc:Bounds x="119" y="75" width="36" height="36" />
<bpmndi:BPMNLabel>
<dc:Bounds x="92" y="111" width="90" height="20" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="StartEvent.2_di" bpmnElement="StartEvent.2">
<dc:Bounds x="119" y="127" width="36" height="36" />
<bpmndi:BPMNLabel>
<dc:Bounds x="92" y="163" width="90" height="20" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="StartEvent.3_di" bpmnElement="StartEvent.3">
<dc:Bounds x="180" y="75" width="36" height="36" />
<bpmndi:BPMNLabel>
<dc:Bounds x="153" y="111" width="90" height="20" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="SubProcess_2_di" bpmnElement="SubProcess_2" isExpanded="true">
<dc:Bounds x="299" y="46" width="144" height="138" />
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="SubProcess_3_di" bpmnElement="SubProcess_3" isExpanded="true">
<dc:Bounds x="503" y="46" width="161" height="137" />
</bpmndi:BPMNShape>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions>

98
test/spec/features/replace-preview/BpmnReplacePreviewSpec.js
View File

@ -25,9 +25,9 @@ import {
describe('features/replace-preview', function() {
var diagramXML = require('../../../fixtures/bpmn/event-sub-processes.bpmn');
var diagramXML = require('./BpmnReplacePreview.bpmn');
var startEvent_1,
var startEvent1,
rootElement;
var getGfx,
@ -44,7 +44,7 @@ describe('features/replace-preview', function() {
beforeEach(inject(function(canvas, elementRegistry, elementFactory, move, dragging) {
startEvent_1 = elementRegistry.get('StartEvent_1');
startEvent1 = elementRegistry.get('StartEvent.1');
rootElement = canvas.getRootElement();
/**
@ -69,7 +69,10 @@ describe('features/replace-preview', function() {
};
moveShape = function(shape, target, position) {
var startPosition = { x: shape.x + 10 + (shape.width / 2), y: shape.y + 30 + (shape.height / 2) };
var startPosition = {
x: shape.x + 10 + (shape.width / 2),
y: shape.y + 30 + (shape.height / 2)
};
move.start(canvasEvent(startPosition), shape);
@ -84,10 +87,10 @@ describe('features/replace-preview', function() {
}));
it('should replace visuals at the same position as the replaced visual', inject(function(dragging) {
it('should draw replaced visuals at correct position', inject(function(dragging) {
// when
moveShape(startEvent_1, rootElement, { x: 280, y: 120 });
moveShape(startEvent1, rootElement, { x: 280, y: 120 });
// then
var dragGroup = dragging.context().data.context.dragGroup;
@ -101,40 +104,42 @@ describe('features/replace-preview', function() {
it('should add dragger to context.visualReplacements once', inject(function(dragging) {
// when
moveShape(startEvent_1, rootElement, { x: 275, y: 120 });
moveShape(startEvent_1, rootElement, { x: 280, y: 120 });
moveShape(startEvent_1, rootElement, { x: 285, y: 120 });
moveShape(startEvent1, rootElement, { x: 275, y: 120 });
moveShape(startEvent1, rootElement, { x: 280, y: 120 });
moveShape(startEvent1, rootElement, { x: 285, y: 120 });
// then
var visualReplacements = dragging.context().data.context.visualReplacements;
expect(visualReplacements[startEvent_1.id]).to.exist;
expect(visualReplacements[startEvent1.id]).to.exist;
expect(Object.keys(visualReplacements).length).to.equal(1);
}));
it('should remove dragger from context.visualReplacements', inject(function(elementRegistry, dragging) {
it('should remove dragger from context.visualReplacements', inject(
function(elementRegistry, dragging) {
// given
var subProcess_2 = elementRegistry.get('SubProcess_2');
// given
var subProcess2 = elementRegistry.get('SubProcess_2');
// when
moveShape(startEvent_1, rootElement, { x: 275, y: 120 });
moveShape(startEvent_1, rootElement, { x: 280, y: 120 });
moveShape(startEvent_1, subProcess_2, { x: 350, y: 120 });
// when
moveShape(startEvent1, rootElement, { x: 275, y: 120 });
moveShape(startEvent1, rootElement, { x: 280, y: 120 });
moveShape(startEvent1, subProcess2, { x: 350, y: 120 });
// then
var visualReplacements = dragging.context().data.context.visualReplacements;
// then
var visualReplacements = dragging.context().data.context.visualReplacements;
expect(visualReplacements).to.be.empty;
}));
expect(visualReplacements).to.be.empty;
}
));
it('should hide the replaced visual', inject(function(dragging) {
// when
moveShape(startEvent_1, rootElement, { x: 280, y: 120 });
moveShape(startEvent1, rootElement, { x: 280, y: 120 });
// then
var dragGroup = dragging.context().data.context.dragGroup;
@ -147,10 +152,10 @@ describe('features/replace-preview', function() {
inject(function(dragging, elementRegistry) {
// given
var subProcess_1 = elementRegistry.get('SubProcess_1');
var subProcess1 = elementRegistry.get('SubProcess.1');
// when
moveShape(startEvent_1, subProcess_1, { x: 210, y: 180 });
moveShape(startEvent1, subProcess1, { x: 210, y: 180 });
var context = dragging.context().data.context;
@ -171,7 +176,7 @@ describe('features/replace-preview', function() {
inject(function(dragging, elementRegistry) {
// when
moveShape(startEvent_1, rootElement, { x: 280, y: 120 });
moveShape(startEvent1, rootElement, { x: 280, y: 120 });
var context = dragging.context().data.context;
@ -188,10 +193,10 @@ describe('features/replace-preview', function() {
inject(function(dragging, elementRegistry) {
// given
var subProcess_2 = elementRegistry.get('SubProcess_2');
var subProcess2 = elementRegistry.get('SubProcess_2');
// when
moveShape(startEvent_1, subProcess_2, { x: 350, y: 120 });
moveShape(startEvent1, subProcess2, { x: 350, y: 120 });
var context = dragging.context().data.context;
@ -212,10 +217,10 @@ describe('features/replace-preview', function() {
inject(function(dragging, elementRegistry) {
// given
var subProcess_3 = elementRegistry.get('SubProcess_3');
var subProcess3 = elementRegistry.get('SubProcess_3');
// when
moveShape(startEvent_1, subProcess_3, { x: 600, y: 120 });
moveShape(startEvent1, subProcess3, { x: 600, y: 120 });
var context = dragging.context().data.context;
@ -232,13 +237,13 @@ describe('features/replace-preview', function() {
inject(function(move, dragging, elementRegistry, selection) {
// given
var startEvent_2 = elementRegistry.get('StartEvent_2'),
startEvent_3 = elementRegistry.get('StartEvent_3');
var startEvent2 = elementRegistry.get('StartEvent.2'),
startEvent3 = elementRegistry.get('StartEvent.3');
// when
selection.select([ startEvent_1, startEvent_2, startEvent_3 ]);
selection.select([ startEvent1, startEvent2, startEvent3 ]);
moveShape(startEvent_1, rootElement, { x: 150, y: 250 });
moveShape(startEvent1, rootElement, { x: 150, y: 250 });
var context = dragging.context().data.context;
@ -257,9 +262,9 @@ describe('features/replace-preview', function() {
inject(function(move, dragging, elementRegistry, selection) {
// given
var startEvent_2 = elementRegistry.get('StartEvent_2'),
startEvent_3 = elementRegistry.get('StartEvent_3'),
subProcess_2 = elementRegistry.get('SubProcess_2');
var startEvent2 = elementRegistry.get('StartEvent.2'),
startEvent3 = elementRegistry.get('StartEvent.3'),
subProcess2 = elementRegistry.get('SubProcess_2');
var messageStartEventGfx = getGfx({
type: 'bpmn:StartEvent',
@ -276,9 +281,9 @@ describe('features/replace-preview', function() {
var startEventGfx = getGfx({ type: 'bpmn:StartEvent' });
// when
selection.select([ startEvent_1, startEvent_2, startEvent_3 ]);
selection.select([ startEvent1, startEvent2, startEvent3 ]);
moveShape(startEvent_1, subProcess_2, { x: 350, y: 120 });
moveShape(startEvent1, subProcess2, { x: 350, y: 120 });
var context = dragging.context().data.context;
@ -294,18 +299,23 @@ describe('features/replace-preview', function() {
inject(function(move, dragging, elementRegistry, elementFactory, selection, modeling) {
// given
var startEvent_1 = elementRegistry.get('StartEvent_1'),
subProcess_3 = elementRegistry.get('SubProcess_3');
var startEvent1 = elementRegistry.get('StartEvent.1'),
subProcess3 = elementRegistry.get('SubProcess_3');
var intermediateEvent = elementFactory.createShape({ type: 'bpmn:IntermediateThrowEvent' });
var boundaryEvent = modeling.createShape(intermediateEvent, { x: 550, y: 180 }, subProcess_3, true);
var boundaryEvent = modeling.createShape(
intermediateEvent,
{ x: 550, y: 180 },
subProcess3,
true
);
// when
selection.select([ startEvent_1 ]);
selection.select([ startEvent1 ]);
moveShape(boundaryEvent, subProcess_3, { x: 580, y: 210 });
moveShape(boundaryEvent, subProcess_3, { x: 580, y: 180 });
moveShape(boundaryEvent, subProcess3, { x: 580, y: 210 });
moveShape(boundaryEvent, subProcess3, { x: 580, y: 180 });
// then
// expect not to throw TypeError: Cannot read property 'oldElementId' of undefined