sartography/bpmn-js
1
0
Fork 0
mirror of https://github.com/sartography/bpmn-js.git synced 2025-02-18 11:56:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(auto-resize): adjust vertical resizing behavior

Browse Source 
The parent participant/lane now expands vertically only if the edge of
an element intersects the collaboration edge, or if the element is
is placed beyond the edge.

Closes #347
This commit is contained in:
pedesen 2015-09-02 10:37:51 +02:00 committed by Nico Rehwaldt
parent ccf21e2f0c
commit 0b8f0465f0
2 changed files with 54 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
lib/features/auto-resize/AutoResize.js
View File

@ -9,11 +9,8 @@ var pick = require('lodash/object/pick'),
var CommandInterceptor = require('diagram-js/lib/command/CommandInterceptor'); var CommandInterceptor = require('diagram-js/lib/command/CommandInterceptor');
var PADDING = 15, var OFFSET = { top: 60, bottom: 60, left: 100, right: 100 };
OFFSET_TOP = 80, var PADDING = { top: 2, bottom: 2, left: 15, right: 15 };
OFFSET_BOTTOM = 80,
OFFSET_LEFT = 100,
OFFSET_RIGHT = 100;
/** /**
* An auto resize component that takes care of expanding parent participants * An auto resize component that takes care of expanding parent participants
@ -49,10 +46,12 @@ function AutoResize(eventBus, canvas, modeling){
*/ */
function isInbounds(element, target, padding) { function isInbounds(element, target, padding) {
return { return {
top: element.y < target.y + padding && element.y + element.height > target.y, top: element.y < target.y + padding.top && element.y + element.height > target.y,
bottom: element.y < target.y + target.height && element.y + element.height > target.y + target.height - padding, bottom: element.y < target.y + target.height &&
left: element.x < target.x + padding && element.x + element.width > target.x, element.y + element.height > target.y + target.height - padding.bottom,
right: element.x < target.x + target.width && element.x + element.width > target.x + target.width - padding, left: element.x < target.x + padding.left && element.x + element.width > target.x,
right: element.x < target.x + target.width &&
element.x + element.width > target.x + target.width - padding.right,
}; };
} }
@ -87,21 +86,21 @@ function AutoResize(eventBus, canvas, modeling){
var newBounds = pick(target, [ 'x', 'y', 'width', 'height' ]); var newBounds = pick(target, [ 'x', 'y', 'width', 'height' ]);
if (inbounds.top) { if (inbounds.top) {
var topPosition = shape.y - OFFSET_TOP; var topPosition = shape.y - OFFSET.top;
assign(newBounds, { y: topPosition, height: target.height + target.y - topPosition }); assign(newBounds, { y: topPosition, height: target.height + target.y - topPosition });
} }
if (inbounds.bottom) { if (inbounds.bottom) {
assign(newBounds, { height: shape.y + shape.height + OFFSET_BOTTOM - target.y }); assign(newBounds, { height: shape.y + shape.height + OFFSET.bottom - target.y });
} }
if (inbounds.left) { if (inbounds.left) {
var leftPosition = shape.x - OFFSET_LEFT; var leftPosition = shape.x - OFFSET.left;
assign(newBounds, { x: leftPosition, width: target.width + target.x - leftPosition }); assign(newBounds, { x: leftPosition, width: target.width + target.x - leftPosition });
} }
if (inbounds.right) { if (inbounds.right) {
assign(newBounds, { width: shape.x + shape.width + OFFSET_RIGHT - target.x }); assign(newBounds, { width: shape.x + shape.width + OFFSET.right - target.x });
} }
modeling.resizeShape(target, newBounds); modeling.resizeShape(target, newBounds);

64
test/spec/features/auto-resize/AutoResizeSpec.js
View File

@ -48,7 +48,7 @@ describe('features/auto-resize', function() {
describe('after moving', function() { describe('after moving', function() {
it('should expand the right edge of the parent collaboration', it('should expand the right edge',
inject(function(modeling) { inject(function(modeling) {
// when // when
@ -62,36 +62,33 @@ describe('features/auto-resize', function() {
})); }));
it('should expand the top edge of the parent collaboration', it('should expand the top edge', inject(function(modeling) {
inject(function(modeling) {
// when // when
modeling.moveElements([task], { x: 0, y: -50 }, participant); modeling.moveElements([task], { x: 0, y: -50 }, participant);
// then // then
assign(expectedBounds, { y: 79, height: 259 }); assign(expectedBounds, { y: 99, height: 239 });
expect(getBounds(participant)).to.eql(expectedBounds); expect(getBounds(participant)).to.eql(expectedBounds);
})); }));
it('should expand the bottom edge of the parent collaboration', it('should expand the bottom edge', inject(function(modeling) {
inject(function(modeling) {
// when // when
modeling.moveElements([task], { x: 0, y: 50 }, participant); modeling.moveElements([task], { x: 0, y: 50 }, participant);
// then // then
assign(expectedBounds, { height: 259 }); assign(expectedBounds, { height: 239 });
expect(getBounds(participant)).to.eql(expectedBounds); expect(getBounds(participant)).to.eql(expectedBounds);
})); }));
it('should expand the left edge of the parent collaboration', it('should expand the left edge', inject(function(modeling) {
inject(function(modeling) {
// when // when
modeling.moveElements([startEvent], { x: -100, y: 0 }, participant); modeling.moveElements([startEvent], { x: -100, y: 0 }, participant);
@ -104,33 +101,31 @@ describe('features/auto-resize', function() {
})); }));
it('should expand the bottom right edges of the parent collaboration', it('should expand the bottom right edges', inject(function(modeling) {
inject(function(modeling) {
// when // when
modeling.moveElements([task], { x: 50, y: 50 }, participant); modeling.moveElements([task], { x: 50, y: 50 }, participant);
// then // then
assign(expectedBounds, { width: 475, height: 259 }); assign(expectedBounds, { width: 475, height: 239 });
expect(getBounds(participant)).to.eql(expectedBounds); expect(getBounds(participant)).to.eql(expectedBounds);
})); }));
it('should expand the top left edges of the parent collaboration', it('should expand the top left edges', inject(function(modeling) {
inject(function(modeling) {
// when // when
modeling.moveElements([startEvent], { x: -100, y: -100 }, participant); modeling.moveElements([startEvent], { x: -100, y: -100 }, participant);
// then // then
expect(getBounds(participant)).to.eql({ x: 122, y: 51, width: 496, height: 287 }); expect(getBounds(participant)).to.eql({ x: 122, y: 71, width: 496, height: 267 });
})); }));
it('should not resize the parent collaboration if element is placed too far outside', it('should not resize the parent if element is placed too far outside',
inject(function(modeling) { inject(function(modeling) {
// when // when
@ -142,6 +137,32 @@ describe('features/auto-resize', function() {
})); }));
it('should resize the parent if element and parent edge intersect',
inject(function(modeling) {
// when
modeling.moveElements([task], { x: 0, y: 49 }, participant);
// then
assign(expectedBounds, { height: 238 });
expect(getBounds(participant)).to.eql(expectedBounds);
}));
it('should not resize the parent if element is placed near the bottom',
inject(function(modeling) {
// when
modeling.moveElements([task], { x: 0, y: 47 }, participant);
// then
expect(getBounds(participant)).to.eql(expectedBounds);
}));
it('should undo resizing', inject(function(modeling, commandStack) { it('should undo resizing', inject(function(modeling, commandStack) {
// when // when
@ -162,7 +183,7 @@ describe('features/auto-resize', function() {
commandStack.redo(); commandStack.redo();
// then // then
expect(getBounds(participant)).to.eql({ x: 122, y: 51, width: 496, height: 287 }); expect(getBounds(participant)).to.eql({ x: 122, y: 71, width: 496, height: 267 });
})); }));
@ -172,14 +193,13 @@ describe('features/auto-resize', function() {
describe('after appending', function(){ describe('after appending', function(){
it('should expand the bottom right edges of the parent collaboration', it('should expand the bottom right edges', inject(function(modeling) {
inject(function(modeling) {
// when // when
modeling.appendShape(task, { type: 'bpmn:Task' }, { x: 660, y: 350 }, participant); modeling.appendShape(task, { type: 'bpmn:Task' }, { x: 660, y: 350 }, participant);
// then // then
assign(expectedBounds, { width: 563, height: 310 }); assign(expectedBounds, { width: 563, height: 290 });
expect(getBounds(participant)).to.eql(expectedBounds); expect(getBounds(participant)).to.eql(expectedBounds);
@ -187,6 +207,7 @@ describe('features/auto-resize', function() {
it('should undo resizing', inject(function(modeling, commandStack) { it('should undo resizing', inject(function(modeling, commandStack) {
// given // given
modeling.appendShape(task, { type: 'bpmn:Task' }, { x: 660, y: 250 }, participant); modeling.appendShape(task, { type: 'bpmn:Task' }, { x: 660, y: 250 }, participant);
@ -195,7 +216,6 @@ describe('features/auto-resize', function() {
// then // then
expect(getBounds(participant)).to.eql(expectedBounds); expect(getBounds(participant)).to.eql(expectedBounds);
})); }));
@ -258,7 +278,7 @@ describe('features/auto-resize', function() {
modeling.createShape({ type: 'bpmn:Task' }, { x: 600, y: 320 }, laneShape); modeling.createShape({ type: 'bpmn:Task' }, { x: 600, y: 320 }, laneShape);
// then // then
expect(getBounds(laneShape)).to.eql({ x: 307, y: 160, width: 443, height: 280}); expect(getBounds(laneShape)).to.eql({ x: 307, y: 160, width: 443, height: 260});
})); }));
}); });