chore(auto-resize): migrate to diagram-js infrastucture

Closes #569
This commit is contained in:
pedesen 2016-06-08 10:49:33 +02:00 committed by Nico Rehwaldt
parent 4d7dfe1df5
commit e3144f8ad7
4 changed files with 89 additions and 157 deletions

View File

@ -1,155 +0,0 @@
'use strict';
var inherits = require('inherits');
var is = require('../../util/ModelUtil').is,
getBoundingBox = require('diagram-js/lib/util/Elements').getBBox;
var pick = require('lodash/object/pick'),
assign = require('lodash/object/assign'),
forEach = require('lodash/collection/forEach'),
values = require('lodash/object/values'),
flatten = require('lodash/array/flatten'),
groupBy = require('lodash/collection/groupBy');
var CommandInterceptor = require('diagram-js/lib/command/CommandInterceptor');
var OFFSET = { top: 60, bottom: 60, left: 100, right: 100 };
var PADDING = { top: 2, bottom: 2, left: 15, right: 15 };
/**
* An auto resize component that takes care of expanding parent participants
* and lanes if elements are modeled close to an edge of the parent element.
*/
function AutoResize(eventBus, canvas, modeling, elementRegistry) {
CommandInterceptor.call(this, eventBus);
this.postExecuted([ 'shape.create' ], function(event) {
var context = event.context,
hints = context.hints,
shape = context.shape,
parent = context.parent || context.newParent;
if (hints && hints.root === false) {
return;
}
expand([ shape ], parent);
});
this.postExecuted([ 'elements.move' ], function(event) {
var context = event.context,
elements = flatten(values(context.closure.topLevel));
var expandings = groupBy(elements, function(element) {
return element.parent.id;
});
forEach(expandings, function(elements, parentId) {
expand(elements, parentId);
});
});
/**
* Returns an object which indicates near which bounding edge(s)
* of a target a bounding box is located.
*
* @param {Object} bbox bounding box object with x, y, width and height properties
* @param {Shape} target
* @param {Number} padding
*
* @return {Object} {top, bottom, left, right}
*
* @example
*
* // If the bounding box is near the bottom left corner of a target the return object is:
* { top: false, bottom: true, left: true, right: false }
*
*/
function isInbounds(bbox, target, padding) {
return {
top: bbox.y < target.y + padding.top,
bottom: bbox.y + bbox.height > target.y + target.height - padding.bottom,
left: bbox.x < target.x + padding.left,
right: bbox.x + bbox.width > target.x + target.width - padding.right
};
}
/**
* Expand the target shape if the bounding box of the moved elements is near or on an edge,
* considering the position of the bounding box in relation to the parent's edge plus padding.
* The amount to expand can be defined for each edge in the OFFSET object.
*
* @param {Array<Shape>} elements
* @param {Shape|String} target|targetId
*/
function expand(elements, target) {
if (typeof target === 'string') {
target = elementRegistry.get(target);
}
var bbox = getBoundingBox(elements),
canExpand = true;
if (!is(target, 'bpmn:Participant') && !is(target, 'bpmn:Lane') && !(is(target, 'bpmn:SubProcess'))) {
return;
}
forEach(elements, function(element) {
if (is(element, 'bpmn:Lane') || element.labelTarget) {
canExpand = false;
return;
}
});
if (!canExpand) {
return;
}
var inbounds = isInbounds(bbox, target, PADDING);
var newBounds = pick(target, [ 'x', 'y', 'width', 'height' ]);
if (inbounds.top) {
var topPosition = bbox.y - OFFSET.top;
assign(newBounds, { y: topPosition, height: newBounds.height + newBounds.y - topPosition });
}
if (inbounds.bottom) {
assign(newBounds, { height: bbox.y + bbox.height + OFFSET.bottom - newBounds.y });
}
if (inbounds.left) {
var leftPosition = bbox.x - OFFSET.left;
assign(newBounds, { x: leftPosition, width: newBounds.width + newBounds.x - leftPosition });
}
if (inbounds.right) {
assign(newBounds, { width: bbox.x + bbox.width + OFFSET.right - newBounds.x });
}
if (is(target, 'bpmn:Participant')) {
modeling.resizeLane(target, newBounds);
} else {
modeling.resizeShape(target, newBounds);
}
var parent = target.parent;
// recursively expand parent elements
if (parent) {
expand([ target ], parent);
}
}
}
AutoResize.$inject = [ 'eventBus', 'canvas', 'modeling', 'elementRegistry' ];
inherits(AutoResize, CommandInterceptor);
module.exports = AutoResize;

View File

@ -0,0 +1,35 @@
var AutoResize = require('diagram-js/lib/features/auto-resize/AutoResize');
var inherits = require('inherits');
var is = require('../../util/ModelUtil').is;
/**
* Sub class of the AutoResize module which implements a BPMN
* specific resize function.
*/
function BpmnAutoResize(eventBus, elementRegistry, modeling, rules) {
AutoResize.call(this, eventBus, elementRegistry, modeling, rules);
}
BpmnAutoResize.$inject = [ 'eventBus', 'elementRegistry', 'modeling', 'rules' ];
inherits(BpmnAutoResize, AutoResize);
module.exports = BpmnAutoResize;
/**
* Resize shapes and lanes
*
* @param {djs.model.Shape} target
* @param {Object} newBounds
*/
BpmnAutoResize.prototype.resize = function(target, newBounds) {
if (is(target, 'bpmn:Participant')) {
this._modeling.resizeLane(target, newBounds);
} else {
this._modeling.resizeShape(target, newBounds);
}
};

View File

@ -0,0 +1,51 @@
'use strict';
var is = require('../../util/ModelUtil').is;
var inherits = require('inherits');
var forEach = require('lodash/collection/forEach');
var AutoResizeProvider = require('diagram-js/lib/features/auto-resize/AutoResizeProvider');
/**
* This module is a provider for automatically resizing parent BPMN elements
*/
function BpmnAutoResizeProvider(eventBus, modeling) {
AutoResizeProvider.call(this, eventBus);
this._modeling = modeling;
}
inherits(BpmnAutoResizeProvider, AutoResizeProvider);
BpmnAutoResizeProvider.$inject = [ 'eventBus', 'modeling' ];
module.exports = BpmnAutoResizeProvider;
/**
* Check if the given target can be expanded
*
* @param {djs.model.Shape} target
*
* @return {boolean}
*/
BpmnAutoResizeProvider.prototype.canResize = function(elements, target) {
if (!is(target, 'bpmn:Participant') && !is(target, 'bpmn:Lane') && !(is(target, 'bpmn:SubProcess'))) {
return false;
}
var canResize = true;
forEach(elements, function(element) {
if (is(element, 'bpmn:Lane') || element.labelTarget) {
canResize = false;
return;
}
});
return canResize;
};

View File

@ -1,4 +1,5 @@
module.exports = {
__init__: [ 'autoResize' ],
autoResize: [ 'type', require('./AutoResize') ]
__init__: [ 'bpmnAutoResize', 'bpmnAutoResizeProvider' ],
bpmnAutoResize: [ 'type', require('./BpmnAutoResize') ],
bpmnAutoResizeProvider: [ 'type', require('./BpmnAutoResizeProvider') ]
};