fix(replace-preview): escape element ids in CSS selectors
This commit is contained in:
parent
fb2e3da882
commit
e5a3973107
|
@ -29,6 +29,9 @@
|
|||
"component-event": {
|
||||
"version": "0.1.4"
|
||||
},
|
||||
"css.escape": {
|
||||
"version": "1.5.1"
|
||||
},
|
||||
"delegate-events": {
|
||||
"version": "1.1.1",
|
||||
"requires": {
|
||||
|
|
|
@ -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))
|
||||
|
|
|
@ -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' });
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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>
|
|
@ -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');
|
||||
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 });
|
||||
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;
|
||||
|
||||
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
|
||||
|
|
Loading…
Reference in New Issue