feat(Import): hide child elements in collapsed parents

Closes #49
This commit is contained in:
Nico Rehwaldt 2014-05-21 16:23:52 +02:00
parent b0e6020952
commit 19bf425efa
5 changed files with 193 additions and 2 deletions

View File

@ -1,3 +1,5 @@
'use strict';
var _ = require('lodash');
var BpmnTreeWalker = require('./BpmnTreeWalker'),
@ -14,6 +16,10 @@ function hasLabel(element) {
}
function isCollapsed(element, di) {
return di && !di.isExpanded;
}
function getWaypointsMid(waypoints) {
var mid = waypoints.length / 2 - 1;
@ -28,6 +34,10 @@ function getWaypointsMid(waypoints) {
}
/**
* Returns the bounds of an elements label, parsed from the elements DI or
* generated from its bounds.
*/
function getLabelBounds(di, data) {
var mid,
@ -106,10 +116,15 @@ function importBpmnDiagram(diagram, definitions, done) {
if (di.$type === 'bpmndi:BPMNShape') {
var bounds = di.bounds;
var collapsed = isCollapsed(element, di);
var hidden = parent && (parent.hidden || parent.collapsed);
shape = {
id: element.id, type: element.$type,
x: bounds.x, y: bounds.y,
width: bounds.width, height: bounds.height,
collapsed: collapsed,
hidden: hidden,
parent: parent
};

View File

@ -0,0 +1,65 @@
<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="_602NsOCpEeOMld_vAxsi8Q" targetNamespace="http://activiti.org/bpmn">
<bpmn2:process id="Process_1" isExecutable="false">
<bpmn2:subProcess id="SubProcess_1">
<bpmn2:intermediateCatchEvent id="IntermediateCatchEvent_1"/>
</bpmn2:subProcess>
<bpmn2:transaction id="Transaction_1">
<bpmn2:userTask id="UserTask_1"/>
</bpmn2:transaction>
<bpmn2:adHocSubProcess id="AdHocSubProcess_1">
<bpmn2:startEvent id="StartEvent_1"/>
</bpmn2:adHocSubProcess>
<bpmn2:subProcess id="SubProcess_3">
<bpmn2:task id="Task_2"/>
</bpmn2:subProcess>
<bpmn2:subProcess id="SubProcess_4">
<bpmn2:subProcess id="SubProcess_5">
<bpmn2:task id="Task_3"/>
</bpmn2:subProcess>
</bpmn2:subProcess>
</bpmn2:process>
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
<bpmndi:BPMNShape id="_BPMNShape_SubProcess_2" bpmnElement="SubProcess_1">
<dc:Bounds height="80.0" width="100.0" x="96.0" y="108.0"/>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="_BPMNShape_Transaction_2" bpmnElement="Transaction_1">
<dc:Bounds height="80.0" width="100.0" x="272.0" y="108.0"/>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="_BPMNShape_AdHocSubProcess_2" bpmnElement="AdHocSubProcess_1">
<dc:Bounds height="80.0" width="100.0" x="456.0" y="108.0"/>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="_BPMNShape_UserTask_2" bpmnElement="UserTask_1">
<dc:Bounds height="80.0" width="100.0" x="272.0" y="108.0"/>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="_BPMNShape_IntermediateCatchEvent_2" bpmnElement="IntermediateCatchEvent_1">
<dc:Bounds height="36.0" width="36.0" x="128.0" y="130.0"/>
<bpmndi:BPMNLabel>
<dc:Bounds height="0.0" width="0.0" x="146.0" y="171.0"/>
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="_BPMNShape_SubProcess_4" bpmnElement="SubProcess_3" isExpanded="true">
<dc:Bounds height="150.0" width="200.0" x="96.0" y="252.0"/>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="_BPMNShape_Task_7" bpmnElement="Task_2">
<dc:Bounds height="80.0" width="100.0" x="120.0" y="272.0"/>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
<dc:Bounds height="36.0" width="36.0" x="488.0" y="130.0"/>
<bpmndi:BPMNLabel>
<dc:Bounds height="0.0" width="0.0" x="506.0" y="171.0"/>
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="_BPMNShape_SubProcess_5" bpmnElement="SubProcess_4">
<dc:Bounds height="80.0" width="100.0" x="648.0" y="108.0"/>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="_BPMNShape_SubProcess_6" bpmnElement="SubProcess_5" isExpanded="true">
<dc:Bounds height="140.0" width="160.0" x="618.0" y="78.0"/>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="_BPMNShape_Task_8" bpmnElement="Task_3">
<dc:Bounds height="80.0" width="100.0" x="648.0" y="108.0"/>
</bpmndi:BPMNShape>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn2:definitions>

View File

@ -1,3 +1,5 @@
'use strict';
var fs = require('fs'),
Diagram = require('diagram-js/lib/Diagram');
@ -9,8 +11,10 @@ var bpmnModule = require('../../../../lib/di').defaultModule;
require('../../../../lib/core/BpmnRegistry');
require('../../../../lib/draw/BpmnRenderer');
var Matchers = require('../../Matchers');
describe('import/Importer', function() {
var bpmnModel = BpmnModel.instance();
@ -38,6 +42,7 @@ describe('import/Importer', function() {
});
}
it('should fire <bpmn.element.add> during import', function(done) {
// given
@ -52,6 +57,7 @@ describe('import/Importer', function() {
events.push({ type: 'add', semantic: e.semantic.id, di: e.di.id, diagramElement: e.diagramElement.id });
});
// when
BpmnModel.fromXML(xml, function(err, definitions) {
if (err) {
return done(err);

View File

@ -0,0 +1,105 @@
'use strict';
var fs = require('fs');
var Viewer = require('../../../../../lib/Viewer');
var Matchers = require('../../../Matchers');
describe('import - collapsed container', function() {
beforeEach(Matchers.add);
var container, renderer;
beforeEach(function(done) {
if (!container) {
// create container
var c = document.createElement('div');
document.getElementsByTagName('body')[0].appendChild(c);
// import XML
var xml = fs.readFileSync('test/fixtures/bpmn/import/collapsed-subprocess-children.bpmn', 'utf8');
renderer = new Viewer(c);
renderer.importXML(xml, function(err) {
if (err) {
done(err);
} else {
container = c;
done();
}
});
} else {
done();
}
});
it('should import collapsed subProcess', function() {
var elementRegistry = renderer.get('elementRegistry');
var collapsedShape = elementRegistry.getShapeById('SubProcess_1');
var childShape = elementRegistry.getShapeById('IntermediateCatchEvent_1');
expect(collapsedShape.collapsed).toBe(true);
expect(childShape.hidden).toBe(true);
});
it('should import collapsed transaction', function() {
var elementRegistry = renderer.get('elementRegistry');
var collapsedShape = elementRegistry.getShapeById('Transaction_1');
var childShape = elementRegistry.getShapeById('UserTask_1');
expect(collapsedShape.collapsed).toBe(true);
expect(childShape.hidden).toBe(true);
});
it('should import collapsed adhocSubProcess', function() {
var elementRegistry = renderer.get('elementRegistry');
var collapsedShape = elementRegistry.getShapeById('AdHocSubProcess_1');
var childShape = elementRegistry.getShapeById('StartEvent_1');
expect(collapsedShape.collapsed).toBe(true);
expect(childShape.hidden).toBe(true);
});
it('should import collapsed with nested elements', function() {
var elementRegistry = renderer.get('elementRegistry');
var collapsedShape = elementRegistry.getShapeById('SubProcess_4');
var childShape = elementRegistry.getShapeById('SubProcess_5');
var nestedChildShape = elementRegistry.getShapeById('Task_3');
expect(collapsedShape.collapsed).toBe(true);
expect(childShape.hidden).toBe(true);
expect(nestedChildShape.hidden).toBe(true);
});
it('should import expanded subProcess', function() {
var elementRegistry = renderer.get('elementRegistry');
var expandedShape = elementRegistry.getShapeById('SubProcess_3');
var childShape = elementRegistry.getShapeById('Task_2');
expect(expandedShape.collapsed).toBe(false);
expect(childShape.hidden).toBe(false);
});
});

View File

@ -2,9 +2,9 @@
var fs = require('fs');
var Viewer = require('../../../../lib/Viewer');
var Viewer = require('../../../../../lib/Viewer');
var Matchers = require('../../Matchers');
var Matchers = require('../../../Matchers');
describe('import - labels', function() {