mirror of
https://github.com/sartography/bpmn-js.git
synced 2025-02-02 20:24:22 +00:00
ae96f3714d
Elements will automatically be created at appropriate positions when context menu create entries are being clicked (rather than dragged). This marks a major step forward for mobile modeling, too as dragging, especially dragging out from very small controls is very cumbersome to do. Things we take into account: * for bpmn:FlowNodes, we try to compute the current distance between elements on the flow based on connections going in and out of the flow nodes source element * for bpmn:TextAnnotation we assume placement of the element top right of the source shape * for bpmn:DataObject and friends we assume a placement bottom right of the source shape * for all elements, we try not to place elements on top of each other; i.e. new elements will be pushed up or down accordingly, if an element at a chosen position does already exist Integration into other services: * context pad provider works with autoPlace, if available and defaults to drag start without * auto placed elements are selected and direct editing may conditionally be activated based on element type (LabelEditingProvider knows the rules) Users can out out of autoPlace by specifying the configuration property `config.contextPad.autoPlace = false`. Closes #563 BREAKING CHANGE: * This breaks the default interaction from the context pad; if you rely on clicking to start the drag you can opt out of autoPlace: ``` new BpmnJS({ contextPad: { autoPlace: false } }); ```
92 lines
2.1 KiB
JavaScript
92 lines
2.1 KiB
JavaScript
'use strict';
|
|
|
|
var is = require('../../util/ModelUtil').is;
|
|
var isAny = require('../modeling/util/ModelingUtil').isAny;
|
|
|
|
var getTextAnnotationPosition = require('./AutoPlaceUtil').getTextAnnotationPosition,
|
|
getDataElementPosition = require('./AutoPlaceUtil').getDataElementPosition,
|
|
getFlowNodePosition = require('./AutoPlaceUtil').getFlowNodePosition,
|
|
getDefaultPosition = require('./AutoPlaceUtil').getDefaultPosition;
|
|
|
|
/**
|
|
* A service that places elements connected to existing ones
|
|
* to an appropriate position in an _automated_ fashion.
|
|
*
|
|
* @param {EventBus} eventBus
|
|
* @param {Modeling} modeling
|
|
*/
|
|
function AutoPlace(eventBus, modeling) {
|
|
|
|
function emit(event, payload) {
|
|
return eventBus.fire(event, payload);
|
|
}
|
|
|
|
|
|
/**
|
|
* Append shape to source at appropriate position.
|
|
*
|
|
* @param {djs.model.Shape} source
|
|
* @param {djs.model.Shape} shape
|
|
*
|
|
* @return {djs.model.Shape} appended shape
|
|
*/
|
|
this.append = function(source, shape) {
|
|
|
|
// allow others to provide the position
|
|
var position = emit('autoPlace', {
|
|
source: source,
|
|
shape: shape
|
|
});
|
|
|
|
if (!position) {
|
|
position = getNewShapePosition(source, shape);
|
|
}
|
|
|
|
var newShape = modeling.appendShape(source, shape, position, source.parent);
|
|
|
|
// notify interested parties on new shape placed
|
|
emit('autoPlace.end', {
|
|
shape: newShape
|
|
});
|
|
|
|
return newShape;
|
|
};
|
|
|
|
}
|
|
|
|
AutoPlace.$inject = [
|
|
'eventBus',
|
|
'modeling'
|
|
];
|
|
|
|
module.exports = AutoPlace;
|
|
|
|
|
|
/////////// helpers /////////////////////////////////////
|
|
|
|
/**
|
|
* Find the new position for the target element to
|
|
* connect to source.
|
|
*
|
|
* @param {djs.model.Shape} source
|
|
* @param {djs.model.Shape} element
|
|
*
|
|
* @return {Point}
|
|
*/
|
|
function getNewShapePosition(source, element) {
|
|
|
|
if (is(element, 'bpmn:TextAnnotation')) {
|
|
return getTextAnnotationPosition(source, element);
|
|
}
|
|
|
|
if (isAny(element, [ 'bpmn:DataObjectReference', 'bpmn:DataStoreReference' ])) {
|
|
return getDataElementPosition(source, element);
|
|
}
|
|
|
|
if (is(element, 'bpmn:FlowNode')) {
|
|
return getFlowNodePosition(source, element);
|
|
}
|
|
|
|
return getDefaultPosition(source, element);
|
|
}
|