update
This commit is contained in:
243
ebpm-process-modeler/public/js/bpmn-js/lib/Modeler.js
Normal file
243
ebpm-process-modeler/public/js/bpmn-js/lib/Modeler.js
Normal file
@@ -0,0 +1,243 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import Ids from 'ids';
|
||||
|
||||
import Viewer from './Viewer';
|
||||
|
||||
import NavigatedViewer from './NavigatedViewer';
|
||||
|
||||
import KeyboardMoveModule from 'diagram-js/lib/navigation/keyboard-move';
|
||||
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
|
||||
import TouchModule from 'diagram-js/lib/navigation/touch';
|
||||
import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
|
||||
|
||||
import AlignElementsModule from 'diagram-js/lib/features/align-elements';
|
||||
import AutoPlaceModule from './features/auto-place';
|
||||
import AutoResizeModule from './features/auto-resize';
|
||||
import AutoScrollModule from 'diagram-js/lib/features/auto-scroll';
|
||||
import BendpointsModule from 'diagram-js/lib/features/bendpoints';
|
||||
import ConnectModule from 'diagram-js/lib/features/connect';
|
||||
import ConnectionPreviewModule from 'diagram-js/lib/features/connection-preview';
|
||||
import ContextPadModule from './features/context-pad';
|
||||
import CopyPasteModule from './features/copy-paste';
|
||||
import CreateModule from 'diagram-js/lib/features/create';
|
||||
import DistributeElementsModule from './features/distribute-elements';
|
||||
import EditorActionsModule from './features/editor-actions';
|
||||
import GridSnappingModule from './features/grid-snapping';
|
||||
import KeyboardModule from './features/keyboard';
|
||||
import KeyboardMoveSelectionModule from 'diagram-js/lib/features/keyboard-move-selection';
|
||||
import LabelEditingModule from './features/label-editing';
|
||||
import ModelingModule from './features/modeling';
|
||||
import MoveModule from 'diagram-js/lib/features/move';
|
||||
import PaletteModule from './features/palette';
|
||||
import ReplacePreviewModule from './features/replace-preview';
|
||||
import ResizeModule from 'diagram-js/lib/features/resize';
|
||||
import SnappingModule from './features/snapping';
|
||||
import SearchModule from './features/search';
|
||||
|
||||
|
||||
var initialDiagram =
|
||||
'<?xml version="1.0" encoding="UTF-8"?>' +
|
||||
'<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ' +
|
||||
'xmlns:bpmn="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" ' +
|
||||
'targetNamespace="http://bpmn.io/schema/bpmn" ' +
|
||||
'id="Definitions_1">' +
|
||||
'<bpmn:process id="Process_1" isExecutable="false">' +
|
||||
'<bpmn:startEvent id="StartEvent_1"/>' +
|
||||
'</bpmn:process>' +
|
||||
'<bpmndi:BPMNDiagram id="BPMNDiagram_1">' +
|
||||
'<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">' +
|
||||
'<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">' +
|
||||
'<dc:Bounds height="36.0" width="36.0" x="173.0" y="102.0"/>' +
|
||||
'</bpmndi:BPMNShape>' +
|
||||
'</bpmndi:BPMNPlane>' +
|
||||
'</bpmndi:BPMNDiagram>' +
|
||||
'</bpmn:definitions>';
|
||||
|
||||
|
||||
/**
|
||||
* A modeler for BPMN 2.0 diagrams.
|
||||
*
|
||||
*
|
||||
* ## Extending the Modeler
|
||||
*
|
||||
* In order to extend the viewer pass extension modules to bootstrap via the
|
||||
* `additionalModules` option. An extension module is an object that exposes
|
||||
* named services.
|
||||
*
|
||||
* The following example depicts the integration of a simple
|
||||
* logging component that integrates with interaction events:
|
||||
*
|
||||
*
|
||||
* ```javascript
|
||||
*
|
||||
* // logging component
|
||||
* function InteractionLogger(eventBus) {
|
||||
* eventBus.on('element.hover', function(event) {
|
||||
* console.log()
|
||||
* })
|
||||
* }
|
||||
*
|
||||
* InteractionLogger.$inject = [ 'eventBus' ]; // minification save
|
||||
*
|
||||
* // extension module
|
||||
* var extensionModule = {
|
||||
* __init__: [ 'interactionLogger' ],
|
||||
* interactionLogger: [ 'type', InteractionLogger ]
|
||||
* };
|
||||
*
|
||||
* // extend the viewer
|
||||
* var bpmnModeler = new Modeler({ additionalModules: [ extensionModule ] });
|
||||
* bpmnModeler.importXML(...);
|
||||
* ```
|
||||
*
|
||||
*
|
||||
* ## Customizing / Replacing Components
|
||||
*
|
||||
* You can replace individual diagram components by redefining them in override modules.
|
||||
* This works for all components, including those defined in the core.
|
||||
*
|
||||
* Pass in override modules via the `options.additionalModules` flag like this:
|
||||
*
|
||||
* ```javascript
|
||||
* function CustomContextPadProvider(contextPad) {
|
||||
*
|
||||
* contextPad.registerProvider(this);
|
||||
*
|
||||
* this.getContextPadEntries = function(element) {
|
||||
* // no entries, effectively disable the context pad
|
||||
* return {};
|
||||
* };
|
||||
* }
|
||||
*
|
||||
* CustomContextPadProvider.$inject = [ 'contextPad' ];
|
||||
*
|
||||
* var overrideModule = {
|
||||
* contextPadProvider: [ 'type', CustomContextPadProvider ]
|
||||
* };
|
||||
*
|
||||
* var bpmnModeler = new Modeler({ additionalModules: [ overrideModule ]});
|
||||
* ```
|
||||
*
|
||||
* @param {Object} [options] configuration options to pass to the viewer
|
||||
* @param {DOMElement} [options.container] the container to render the viewer in, defaults to body.
|
||||
* @param {String|Number} [options.width] the width of the viewer
|
||||
* @param {String|Number} [options.height] the height of the viewer
|
||||
* @param {Object} [options.moddleExtensions] extension packages to provide
|
||||
* @param {Array<didi.Module>} [options.modules] a list of modules to override the default modules
|
||||
* @param {Array<didi.Module>} [options.additionalModules] a list of modules to use with the default modules
|
||||
*/
|
||||
export default function Modeler(options) {
|
||||
Viewer.call(this, options);
|
||||
|
||||
// hook ID collection into the modeler
|
||||
this.on('import.parse.complete', function(event) {
|
||||
if (!event.error) {
|
||||
this._collectIds(event.definitions, event.context);
|
||||
}
|
||||
}, this);
|
||||
|
||||
this.on('diagram.destroy', function() {
|
||||
this.get('moddle').ids.clear();
|
||||
}, this);
|
||||
}
|
||||
|
||||
inherits(Modeler, Viewer);
|
||||
|
||||
Modeler.Viewer = Viewer;
|
||||
Modeler.NavigatedViewer = NavigatedViewer;
|
||||
|
||||
/**
|
||||
* Create a new diagram to start modeling.
|
||||
*
|
||||
* @param {Function} [done]
|
||||
*/
|
||||
Modeler.prototype.createDiagram = function(done) {
|
||||
return this.importXML(initialDiagram, done);
|
||||
};
|
||||
|
||||
/**
|
||||
* Create a moddle instance, attaching ids to it.
|
||||
*
|
||||
* @param {Object} options
|
||||
*/
|
||||
Modeler.prototype._createModdle = function(options) {
|
||||
var moddle = Viewer.prototype._createModdle.call(this, options);
|
||||
|
||||
// attach ids to moddle to be able to track
|
||||
// and validated ids in the BPMN 2.0 XML document
|
||||
// tree
|
||||
moddle.ids = new Ids([ 32, 36, 1 ]);
|
||||
|
||||
return moddle;
|
||||
};
|
||||
|
||||
/**
|
||||
* Collect ids processed during parsing of the
|
||||
* definitions object.
|
||||
*
|
||||
* @param {ModdleElement} definitions
|
||||
* @param {Context} context
|
||||
*/
|
||||
Modeler.prototype._collectIds = function(definitions, context) {
|
||||
|
||||
var moddle = definitions.$model,
|
||||
ids = moddle.ids,
|
||||
id;
|
||||
|
||||
// remove references from previous import
|
||||
ids.clear();
|
||||
|
||||
for (id in context.elementsById) {
|
||||
ids.claim(id, context.elementsById[id]);
|
||||
}
|
||||
};
|
||||
|
||||
Modeler.prototype._interactionModules = [
|
||||
// non-modeling components
|
||||
KeyboardMoveModule,
|
||||
MoveCanvasModule,
|
||||
TouchModule,
|
||||
ZoomScrollModule
|
||||
];
|
||||
|
||||
Modeler.prototype._modelingModules = [
|
||||
// modeling components
|
||||
AlignElementsModule,
|
||||
AutoPlaceModule,
|
||||
AutoScrollModule,
|
||||
AutoResizeModule,
|
||||
BendpointsModule,
|
||||
ConnectModule,
|
||||
ConnectionPreviewModule,
|
||||
ContextPadModule,
|
||||
CopyPasteModule,
|
||||
CreateModule,
|
||||
DistributeElementsModule,
|
||||
EditorActionsModule,
|
||||
GridSnappingModule,
|
||||
KeyboardModule,
|
||||
KeyboardMoveSelectionModule,
|
||||
LabelEditingModule,
|
||||
ModelingModule,
|
||||
MoveModule,
|
||||
PaletteModule,
|
||||
ReplacePreviewModule,
|
||||
ResizeModule,
|
||||
SnappingModule,
|
||||
SearchModule
|
||||
];
|
||||
|
||||
|
||||
// modules the modeler is composed of
|
||||
//
|
||||
// - viewer modules
|
||||
// - interaction modules
|
||||
// - modeling modules
|
||||
|
||||
Modeler.prototype._modules = [].concat(
|
||||
Modeler.prototype._modules,
|
||||
Modeler.prototype._interactionModules,
|
||||
Modeler.prototype._modelingModules);
|
||||
@@ -0,0 +1,28 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import Viewer from './Viewer';
|
||||
|
||||
import KeyboardMoveModule from 'diagram-js/lib/navigation/keyboard-move';
|
||||
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
|
||||
import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
|
||||
|
||||
/**
|
||||
* A viewer that includes mouse navigation facilities
|
||||
*
|
||||
* @param {Object} options
|
||||
*/
|
||||
export default function NavigatedViewer(options) {
|
||||
Viewer.call(this, options);
|
||||
}
|
||||
|
||||
inherits(NavigatedViewer, Viewer);
|
||||
|
||||
NavigatedViewer.prototype._navigationModules = [
|
||||
KeyboardMoveModule,
|
||||
MoveCanvasModule,
|
||||
ZoomScrollModule
|
||||
];
|
||||
|
||||
NavigatedViewer.prototype._modules = [].concat(
|
||||
NavigatedViewer.prototype._modules,
|
||||
NavigatedViewer.prototype._navigationModules);
|
||||
685
ebpm-process-modeler/public/js/bpmn-js/lib/Viewer.js
Normal file
685
ebpm-process-modeler/public/js/bpmn-js/lib/Viewer.js
Normal file
@@ -0,0 +1,685 @@
|
||||
/**
|
||||
* The code in the <project-logo></project-logo> area
|
||||
* must not be changed.
|
||||
*
|
||||
* @see http://bpmn.io/license for more information.
|
||||
*/
|
||||
import {
|
||||
assign,
|
||||
find,
|
||||
isFunction,
|
||||
isNumber,
|
||||
omit
|
||||
} from 'min-dash';
|
||||
|
||||
import {
|
||||
domify,
|
||||
query as domQuery,
|
||||
remove as domRemove
|
||||
} from 'min-dom';
|
||||
|
||||
import {
|
||||
innerSVG
|
||||
} from 'tiny-svg';
|
||||
|
||||
import Diagram from 'diagram-js';
|
||||
import BpmnModdle from 'bpmn-moddle';
|
||||
|
||||
import inherits from 'inherits';
|
||||
|
||||
import {
|
||||
importBpmnDiagram
|
||||
} from './import/Importer';
|
||||
|
||||
import CoreModule from './core';
|
||||
import TranslateModule from 'diagram-js/lib/i18n/translate';
|
||||
import SelectionModule from 'diagram-js/lib/features/selection';
|
||||
import OverlaysModule from 'diagram-js/lib/features/overlays';
|
||||
|
||||
|
||||
function checkValidationError(err) {
|
||||
|
||||
// check if we can help the user by indicating wrong BPMN 2.0 xml
|
||||
// (in case he or the exporting tool did not get that right)
|
||||
|
||||
var pattern = /unparsable content <([^>]+)> detected([\s\S]*)$/;
|
||||
var match = pattern.exec(err.message);
|
||||
|
||||
if (match) {
|
||||
err.message =
|
||||
'unparsable content <' + match[1] + '> detected; ' +
|
||||
'this may indicate an invalid BPMN 2.0 diagram file' + match[2];
|
||||
}
|
||||
|
||||
return err;
|
||||
}
|
||||
|
||||
var DEFAULT_OPTIONS = {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
position: 'relative'
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Ensure the passed argument is a proper unit (defaulting to px)
|
||||
*/
|
||||
function ensureUnit(val) {
|
||||
return val + (isNumber(val) ? 'px' : '');
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Find BPMNDiagram in definitions by ID
|
||||
*
|
||||
* @param {ModdleElement<Definitions>} definitions
|
||||
* @param {String} diagramId
|
||||
*
|
||||
* @return {ModdleElement<BPMNDiagram>|null}
|
||||
*/
|
||||
function findBPMNDiagram(definitions, diagramId) {
|
||||
if (!diagramId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return find(definitions.diagrams, function(element) {
|
||||
return element.id === diagramId;
|
||||
}) || null;
|
||||
}
|
||||
|
||||
/**
|
||||
* A viewer for BPMN 2.0 diagrams.
|
||||
*
|
||||
* Have a look at {@link NavigatedViewer} or {@link Modeler} for bundles that include
|
||||
* additional features.
|
||||
*
|
||||
*
|
||||
* ## Extending the Viewer
|
||||
*
|
||||
* In order to extend the viewer pass extension modules to bootstrap via the
|
||||
* `additionalModules` option. An extension module is an object that exposes
|
||||
* named services.
|
||||
*
|
||||
* The following example depicts the integration of a simple
|
||||
* logging component that integrates with interaction events:
|
||||
*
|
||||
*
|
||||
* ```javascript
|
||||
*
|
||||
* // logging component
|
||||
* function InteractionLogger(eventBus) {
|
||||
* eventBus.on('element.hover', function(event) {
|
||||
* console.log()
|
||||
* })
|
||||
* }
|
||||
*
|
||||
* InteractionLogger.$inject = [ 'eventBus' ]; // minification save
|
||||
*
|
||||
* // extension module
|
||||
* var extensionModule = {
|
||||
* __init__: [ 'interactionLogger' ],
|
||||
* interactionLogger: [ 'type', InteractionLogger ]
|
||||
* };
|
||||
*
|
||||
* // extend the viewer
|
||||
* var bpmnViewer = new Viewer({ additionalModules: [ extensionModule ] });
|
||||
* bpmnViewer.importXML(...);
|
||||
* ```
|
||||
*
|
||||
* @param {Object} [options] configuration options to pass to the viewer
|
||||
* @param {DOMElement} [options.container] the container to render the viewer in, defaults to body.
|
||||
* @param {String|Number} [options.width] the width of the viewer
|
||||
* @param {String|Number} [options.height] the height of the viewer
|
||||
* @param {Object} [options.moddleExtensions] extension packages to provide
|
||||
* @param {Array<didi.Module>} [options.modules] a list of modules to override the default modules
|
||||
* @param {Array<didi.Module>} [options.additionalModules] a list of modules to use with the default modules
|
||||
*/
|
||||
export default function Viewer(options) {
|
||||
|
||||
options = assign({}, DEFAULT_OPTIONS, options);
|
||||
|
||||
this._moddle = this._createModdle(options);
|
||||
|
||||
this._container = this._createContainer(options);
|
||||
|
||||
/* <project-logo> */
|
||||
|
||||
addProjectLogo(this._container);
|
||||
|
||||
/* </project-logo> */
|
||||
|
||||
this._init(this._container, this._moddle, options);
|
||||
}
|
||||
|
||||
inherits(Viewer, Diagram);
|
||||
|
||||
|
||||
/**
|
||||
* Parse and render a BPMN 2.0 diagram.
|
||||
*
|
||||
* Once finished the viewer reports back the result to the
|
||||
* provided callback function with (err, warnings).
|
||||
*
|
||||
* ## Life-Cycle Events
|
||||
*
|
||||
* During import the viewer will fire life-cycle events:
|
||||
*
|
||||
* * import.parse.start (about to read model from xml)
|
||||
* * import.parse.complete (model read; may have worked or not)
|
||||
* * import.render.start (graphical import start)
|
||||
* * import.render.complete (graphical import finished)
|
||||
* * import.done (everything done)
|
||||
*
|
||||
* You can use these events to hook into the life-cycle.
|
||||
*
|
||||
* @param {String} xml the BPMN 2.0 xml
|
||||
* @param {ModdleElement<BPMNDiagram>|String} [bpmnDiagram] BPMN diagram or id of diagram to render (if not provided, the first one will be rendered)
|
||||
* @param {Function} [done] invoked with (err, warnings=[])
|
||||
*/
|
||||
Viewer.prototype.importXML = function(xml, bpmnDiagram, done) {
|
||||
|
||||
if (isFunction(bpmnDiagram)) {
|
||||
done = bpmnDiagram;
|
||||
bpmnDiagram = null;
|
||||
}
|
||||
|
||||
// done is optional
|
||||
done = done || function() {};
|
||||
|
||||
var self = this;
|
||||
|
||||
// hook in pre-parse listeners +
|
||||
// allow xml manipulation
|
||||
xml = this._emit('import.parse.start', { xml: xml }) || xml;
|
||||
|
||||
this._moddle.fromXML(xml, 'bpmn:Definitions', function(err, definitions, context) {
|
||||
|
||||
// hook in post parse listeners +
|
||||
// allow definitions manipulation
|
||||
definitions = self._emit('import.parse.complete', {
|
||||
error: err,
|
||||
definitions: definitions,
|
||||
context: context
|
||||
}) || definitions;
|
||||
|
||||
var parseWarnings = context.warnings;
|
||||
|
||||
if (err) {
|
||||
err = checkValidationError(err);
|
||||
|
||||
self._emit('import.done', { error: err, warnings: parseWarnings });
|
||||
|
||||
return done(err, parseWarnings);
|
||||
}
|
||||
|
||||
self.importDefinitions(definitions, bpmnDiagram, function(err, importWarnings) {
|
||||
var allWarnings = [].concat(parseWarnings, importWarnings || []);
|
||||
|
||||
self._emit('import.done', { error: err, warnings: allWarnings });
|
||||
|
||||
done(err, allWarnings);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Import parsed definitions and render a BPMN 2.0 diagram.
|
||||
*
|
||||
* Once finished the viewer reports back the result to the
|
||||
* provided callback function with (err, warnings).
|
||||
*
|
||||
* ## Life-Cycle Events
|
||||
*
|
||||
* During import the viewer will fire life-cycle events:
|
||||
*
|
||||
* * import.render.start (graphical import start)
|
||||
* * import.render.complete (graphical import finished)
|
||||
*
|
||||
* You can use these events to hook into the life-cycle.
|
||||
*
|
||||
* @param {ModdleElement<Definitions>} definitions parsed BPMN 2.0 definitions
|
||||
* @param {ModdleElement<BPMNDiagram>|String} [bpmnDiagram] BPMN diagram or id of diagram to render (if not provided, the first one will be rendered)
|
||||
* @param {Function} [done] invoked with (err, warnings=[])
|
||||
*/
|
||||
Viewer.prototype.importDefinitions = function(definitions, bpmnDiagram, done) {
|
||||
|
||||
if (isFunction(bpmnDiagram)) {
|
||||
done = bpmnDiagram;
|
||||
bpmnDiagram = null;
|
||||
}
|
||||
|
||||
// done is optional
|
||||
done = done || function() {};
|
||||
|
||||
this._setDefinitions(definitions);
|
||||
|
||||
return this.open(bpmnDiagram, done);
|
||||
};
|
||||
|
||||
/**
|
||||
* Open diagram of previously imported XML.
|
||||
*
|
||||
* Once finished the viewer reports back the result to the
|
||||
* provided callback function with (err, warnings).
|
||||
*
|
||||
* ## Life-Cycle Events
|
||||
*
|
||||
* During switch the viewer will fire life-cycle events:
|
||||
*
|
||||
* * import.render.start (graphical import start)
|
||||
* * import.render.complete (graphical import finished)
|
||||
*
|
||||
* You can use these events to hook into the life-cycle.
|
||||
*
|
||||
* @param {String|ModdleElement<BPMNDiagram>} [bpmnDiagramOrId] id or the diagram to open
|
||||
* @param {Function} [done] invoked with (err, warnings=[])
|
||||
*/
|
||||
Viewer.prototype.open = function(bpmnDiagramOrId, done) {
|
||||
|
||||
if (isFunction(bpmnDiagramOrId)) {
|
||||
done = bpmnDiagramOrId;
|
||||
bpmnDiagramOrId = null;
|
||||
}
|
||||
|
||||
var definitions = this._definitions;
|
||||
var bpmnDiagram = bpmnDiagramOrId;
|
||||
|
||||
// done is optional
|
||||
done = done || function() {};
|
||||
|
||||
if (!definitions) {
|
||||
return done(new Error('no XML imported'));
|
||||
}
|
||||
|
||||
if (typeof bpmnDiagramOrId === 'string') {
|
||||
bpmnDiagram = findBPMNDiagram(definitions, bpmnDiagramOrId);
|
||||
|
||||
if (!bpmnDiagram) {
|
||||
return done(new Error('BPMNDiagram <' + bpmnDiagramOrId + '> not found'));
|
||||
}
|
||||
}
|
||||
|
||||
// clear existing rendered diagram
|
||||
// catch synchronous exceptions during #clear()
|
||||
try {
|
||||
this.clear();
|
||||
} catch (error) {
|
||||
return done(error);
|
||||
}
|
||||
|
||||
// perform graphical import
|
||||
return importBpmnDiagram(this, definitions, bpmnDiagram, done);
|
||||
};
|
||||
|
||||
/**
|
||||
* Export the currently displayed BPMN 2.0 diagram as
|
||||
* a BPMN 2.0 XML document.
|
||||
*
|
||||
* ## Life-Cycle Events
|
||||
*
|
||||
* During XML saving the viewer will fire life-cycle events:
|
||||
*
|
||||
* * saveXML.start (before serialization)
|
||||
* * saveXML.serialized (after xml generation)
|
||||
* * saveXML.done (everything done)
|
||||
*
|
||||
* You can use these events to hook into the life-cycle.
|
||||
*
|
||||
* @param {Object} [options] export options
|
||||
* @param {Boolean} [options.format=false] output formated XML
|
||||
* @param {Boolean} [options.preamble=true] output preamble
|
||||
*
|
||||
* @param {Function} done invoked with (err, xml)
|
||||
*/
|
||||
Viewer.prototype.saveXML = function(options, done) {
|
||||
|
||||
if (!done) {
|
||||
done = options;
|
||||
options = {};
|
||||
}
|
||||
|
||||
var self = this;
|
||||
|
||||
var definitions = this._definitions;
|
||||
|
||||
if (!definitions) {
|
||||
return done(new Error('no definitions loaded'));
|
||||
}
|
||||
|
||||
// allow to fiddle around with definitions
|
||||
definitions = this._emit('saveXML.start', {
|
||||
definitions: definitions
|
||||
}) || definitions;
|
||||
|
||||
this._moddle.toXML(definitions, options, function(err, xml) {
|
||||
|
||||
try {
|
||||
xml = self._emit('saveXML.serialized', {
|
||||
error: err,
|
||||
xml: xml
|
||||
}) || xml;
|
||||
|
||||
self._emit('saveXML.done', {
|
||||
error: err,
|
||||
xml: xml
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('error in saveXML life-cycle listener', e);
|
||||
}
|
||||
|
||||
done(err, xml);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Export the currently displayed BPMN 2.0 diagram as
|
||||
* an SVG image.
|
||||
*
|
||||
* ## Life-Cycle Events
|
||||
*
|
||||
* During SVG saving the viewer will fire life-cycle events:
|
||||
*
|
||||
* * saveSVG.start (before serialization)
|
||||
* * saveSVG.done (everything done)
|
||||
*
|
||||
* You can use these events to hook into the life-cycle.
|
||||
*
|
||||
* @param {Object} [options]
|
||||
* @param {Function} done invoked with (err, svgStr)
|
||||
*/
|
||||
Viewer.prototype.saveSVG = function(options, done) {
|
||||
|
||||
if (!done) {
|
||||
done = options;
|
||||
options = {};
|
||||
}
|
||||
|
||||
this._emit('saveSVG.start');
|
||||
|
||||
var svg, err;
|
||||
|
||||
try {
|
||||
var canvas = this.get('canvas');
|
||||
|
||||
var contentNode = canvas.getDefaultLayer(),
|
||||
defsNode = domQuery('defs', canvas._svg);
|
||||
|
||||
var contents = innerSVG(contentNode),
|
||||
defs = defsNode ? '<defs>' + innerSVG(defsNode) + '</defs>' : '';
|
||||
|
||||
var bbox = contentNode.getBBox();
|
||||
|
||||
svg =
|
||||
'<?xml version="1.0" encoding="utf-8"?>\n' +
|
||||
'<!-- created with bpmn-js / http://bpmn.io -->\n' +
|
||||
'<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n' +
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ' +
|
||||
'width="' + bbox.width + '" height="' + bbox.height + '" ' +
|
||||
'viewBox="' + bbox.x + ' ' + bbox.y + ' ' + bbox.width + ' ' + bbox.height + '" version="1.1">' +
|
||||
defs + contents +
|
||||
'</svg>';
|
||||
} catch (e) {
|
||||
err = e;
|
||||
}
|
||||
|
||||
this._emit('saveSVG.done', {
|
||||
error: err,
|
||||
svg: svg
|
||||
});
|
||||
|
||||
done(err, svg);
|
||||
};
|
||||
|
||||
/**
|
||||
* Get a named diagram service.
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* var elementRegistry = viewer.get('elementRegistry');
|
||||
* var startEventShape = elementRegistry.get('StartEvent_1');
|
||||
*
|
||||
* @param {String} name
|
||||
*
|
||||
* @return {Object} diagram service instance
|
||||
*
|
||||
* @method Viewer#get
|
||||
*/
|
||||
|
||||
/**
|
||||
* Invoke a function in the context of this viewer.
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* viewer.invoke(function(elementRegistry) {
|
||||
* var startEventShape = elementRegistry.get('StartEvent_1');
|
||||
* });
|
||||
*
|
||||
* @param {Function} fn to be invoked
|
||||
*
|
||||
* @return {Object} the functions return value
|
||||
*
|
||||
* @method Viewer#invoke
|
||||
*/
|
||||
|
||||
|
||||
Viewer.prototype._setDefinitions = function(definitions) {
|
||||
this._definitions = definitions;
|
||||
};
|
||||
|
||||
Viewer.prototype.getModules = function() {
|
||||
return this._modules;
|
||||
};
|
||||
|
||||
/**
|
||||
* Remove all drawn elements from the viewer.
|
||||
*
|
||||
* After calling this method the viewer can still
|
||||
* be reused for opening another diagram.
|
||||
*
|
||||
* @method Viewer#clear
|
||||
*/
|
||||
Viewer.prototype.clear = function() {
|
||||
|
||||
// remove businessObject#di binding
|
||||
//
|
||||
// this is necessary, as we establish the bindings
|
||||
// in the BpmnTreeWalker (and assume none are given
|
||||
// on reimport)
|
||||
this.get('elementRegistry').forEach(function(element) {
|
||||
var bo = element.businessObject;
|
||||
|
||||
if (bo && bo.di) {
|
||||
delete bo.di;
|
||||
}
|
||||
});
|
||||
|
||||
// remove drawn elements
|
||||
Diagram.prototype.clear.call(this);
|
||||
};
|
||||
|
||||
/**
|
||||
* Destroy the viewer instance and remove all its
|
||||
* remainders from the document tree.
|
||||
*/
|
||||
Viewer.prototype.destroy = function() {
|
||||
|
||||
// diagram destroy
|
||||
Diagram.prototype.destroy.call(this);
|
||||
|
||||
// dom detach
|
||||
domRemove(this._container);
|
||||
};
|
||||
|
||||
/**
|
||||
* Register an event listener
|
||||
*
|
||||
* Remove a previously added listener via {@link #off(event, callback)}.
|
||||
*
|
||||
* @param {String} event
|
||||
* @param {Number} [priority]
|
||||
* @param {Function} callback
|
||||
* @param {Object} [that]
|
||||
*/
|
||||
Viewer.prototype.on = function(event, priority, callback, target) {
|
||||
return this.get('eventBus').on(event, priority, callback, target);
|
||||
};
|
||||
|
||||
/**
|
||||
* De-register an event listener
|
||||
*
|
||||
* @param {String} event
|
||||
* @param {Function} callback
|
||||
*/
|
||||
Viewer.prototype.off = function(event, callback) {
|
||||
this.get('eventBus').off(event, callback);
|
||||
};
|
||||
|
||||
Viewer.prototype.attachTo = function(parentNode) {
|
||||
|
||||
if (!parentNode) {
|
||||
throw new Error('parentNode required');
|
||||
}
|
||||
|
||||
// ensure we detach from the
|
||||
// previous, old parent
|
||||
this.detach();
|
||||
|
||||
// unwrap jQuery if provided
|
||||
if (parentNode.get && parentNode.constructor.prototype.jquery) {
|
||||
parentNode = parentNode.get(0);
|
||||
}
|
||||
|
||||
if (typeof parentNode === 'string') {
|
||||
parentNode = domQuery(parentNode);
|
||||
}
|
||||
|
||||
parentNode.appendChild(this._container);
|
||||
|
||||
this._emit('attach', {});
|
||||
|
||||
this.get('canvas').resized();
|
||||
};
|
||||
|
||||
Viewer.prototype.getDefinitions = function() {
|
||||
return this._definitions;
|
||||
};
|
||||
|
||||
Viewer.prototype.detach = function() {
|
||||
|
||||
var container = this._container,
|
||||
parentNode = container.parentNode;
|
||||
|
||||
if (!parentNode) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._emit('detach', {});
|
||||
|
||||
parentNode.removeChild(container);
|
||||
};
|
||||
|
||||
Viewer.prototype._init = function(container, moddle, options) {
|
||||
|
||||
var baseModules = options.modules || this.getModules(),
|
||||
additionalModules = options.additionalModules || [],
|
||||
staticModules = [
|
||||
{
|
||||
bpmnjs: [ 'value', this ],
|
||||
moddle: [ 'value', moddle ]
|
||||
}
|
||||
];
|
||||
|
||||
var diagramModules = [].concat(staticModules, baseModules, additionalModules);
|
||||
|
||||
var diagramOptions = assign(omit(options, [ 'additionalModules' ]), {
|
||||
canvas: assign({}, options.canvas, { container: container }),
|
||||
modules: diagramModules
|
||||
});
|
||||
|
||||
// invoke diagram constructor
|
||||
Diagram.call(this, diagramOptions);
|
||||
|
||||
if (options && options.container) {
|
||||
this.attachTo(options.container);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Emit an event on the underlying {@link EventBus}
|
||||
*
|
||||
* @param {String} type
|
||||
* @param {Object} event
|
||||
*
|
||||
* @return {Object} event processing result (if any)
|
||||
*/
|
||||
Viewer.prototype._emit = function(type, event) {
|
||||
return this.get('eventBus').fire(type, event);
|
||||
};
|
||||
|
||||
Viewer.prototype._createContainer = function(options) {
|
||||
|
||||
var container = domify('<div class="bjs-container"></div>');
|
||||
|
||||
assign(container.style, {
|
||||
width: ensureUnit(options.width),
|
||||
height: ensureUnit(options.height),
|
||||
position: options.position
|
||||
});
|
||||
|
||||
return container;
|
||||
};
|
||||
|
||||
Viewer.prototype._createModdle = function(options) {
|
||||
var moddleOptions = assign({}, this._moddleExtensions, options.moddleExtensions);
|
||||
|
||||
return new BpmnModdle(moddleOptions);
|
||||
};
|
||||
|
||||
// modules the viewer is composed of
|
||||
Viewer.prototype._modules = [
|
||||
CoreModule,
|
||||
TranslateModule,
|
||||
SelectionModule,
|
||||
OverlaysModule
|
||||
];
|
||||
|
||||
// default moddle extensions the viewer is composed of
|
||||
Viewer.prototype._moddleExtensions = {};
|
||||
|
||||
/* <project-logo> */
|
||||
|
||||
import {
|
||||
open as openPoweredBy,
|
||||
BPMNIO_IMG
|
||||
} from './util/PoweredByUtil';
|
||||
|
||||
import {
|
||||
event as domEvent
|
||||
} from 'min-dom';
|
||||
|
||||
/**
|
||||
* Adds the project logo to the diagram container as
|
||||
* required by the bpmn.io license.
|
||||
*
|
||||
* @see http://bpmn.io/license
|
||||
*
|
||||
* @param {Element} container
|
||||
*/
|
||||
function addProjectLogo(container) {
|
||||
var img = BPMNIO_IMG;
|
||||
|
||||
var linkMarkup =
|
||||
'';
|
||||
|
||||
var linkElement = domify(linkMarkup);
|
||||
|
||||
container.appendChild(linkElement);
|
||||
|
||||
domEvent.bind(linkElement, 'click', function(event) {
|
||||
openPoweredBy();
|
||||
|
||||
event.preventDefault();
|
||||
});
|
||||
}
|
||||
|
||||
/* </project-logo> */
|
||||
9
ebpm-process-modeler/public/js/bpmn-js/lib/core/index.js
Normal file
9
ebpm-process-modeler/public/js/bpmn-js/lib/core/index.js
Normal file
@@ -0,0 +1,9 @@
|
||||
import DrawModule from '../draw';
|
||||
import ImportModule from '../import';
|
||||
|
||||
export default {
|
||||
__depends__: [
|
||||
DrawModule,
|
||||
ImportModule
|
||||
]
|
||||
};
|
||||
@@ -0,0 +1,142 @@
|
||||
import {
|
||||
every,
|
||||
some
|
||||
} from 'min-dash';
|
||||
|
||||
import {
|
||||
componentsToPath
|
||||
} from 'diagram-js/lib/util/RenderUtil';
|
||||
|
||||
|
||||
// element utils //////////////////////
|
||||
|
||||
/**
|
||||
* Checks if eventDefinition of the given element matches with semantic type.
|
||||
*
|
||||
* @return {boolean} true if element is of the given semantic type
|
||||
*/
|
||||
export function isTypedEvent(event, eventDefinitionType, filter) {
|
||||
|
||||
function matches(definition, filter) {
|
||||
return every(filter, function(val, key) {
|
||||
|
||||
// we want a == conversion here, to be able to catch
|
||||
// undefined == false and friends
|
||||
/* jshint -W116 */
|
||||
return definition[key] == val;
|
||||
});
|
||||
}
|
||||
|
||||
return some(event.eventDefinitions, function(definition) {
|
||||
return definition.$type === eventDefinitionType && matches(event, filter);
|
||||
});
|
||||
}
|
||||
|
||||
export function isThrowEvent(event) {
|
||||
return (event.$type === 'bpmn:IntermediateThrowEvent') || (event.$type === 'bpmn:EndEvent');
|
||||
}
|
||||
|
||||
export function isCollection(element) {
|
||||
var dataObject = element.dataObjectRef;
|
||||
|
||||
return element.isCollection || (dataObject && dataObject.isCollection);
|
||||
}
|
||||
|
||||
export function getDi(element) {
|
||||
return element.businessObject.di;
|
||||
}
|
||||
|
||||
export function getSemantic(element) {
|
||||
return element.businessObject;
|
||||
}
|
||||
|
||||
|
||||
// color access //////////////////////
|
||||
|
||||
export function getFillColor(element, defaultColor) {
|
||||
return getDi(element).get('bioc:fill') || defaultColor || 'white';
|
||||
}
|
||||
|
||||
export function getStrokeColor(element, defaultColor) {
|
||||
return getDi(element).get('bioc:stroke') || defaultColor || 'black';
|
||||
}
|
||||
|
||||
|
||||
// cropping path customizations //////////////////////
|
||||
|
||||
export function getCirclePath(shape) {
|
||||
|
||||
var cx = shape.x + shape.width / 2,
|
||||
cy = shape.y + shape.height / 2,
|
||||
radius = shape.width / 2;
|
||||
|
||||
var circlePath = [
|
||||
['M', cx, cy],
|
||||
['m', 0, -radius],
|
||||
['a', radius, radius, 0, 1, 1, 0, 2 * radius],
|
||||
['a', radius, radius, 0, 1, 1, 0, -2 * radius],
|
||||
['z']
|
||||
];
|
||||
|
||||
return componentsToPath(circlePath);
|
||||
}
|
||||
|
||||
export function getRoundRectPath(shape, borderRadius) {
|
||||
|
||||
var x = shape.x,
|
||||
y = shape.y,
|
||||
width = shape.width,
|
||||
height = shape.height;
|
||||
|
||||
var roundRectPath = [
|
||||
['M', x + borderRadius, y],
|
||||
['l', width - borderRadius * 2, 0],
|
||||
['a', borderRadius, borderRadius, 0, 0, 1, borderRadius, borderRadius],
|
||||
['l', 0, height - borderRadius * 2],
|
||||
['a', borderRadius, borderRadius, 0, 0, 1, -borderRadius, borderRadius],
|
||||
['l', borderRadius * 2 - width, 0],
|
||||
['a', borderRadius, borderRadius, 0, 0, 1, -borderRadius, -borderRadius],
|
||||
['l', 0, borderRadius * 2 - height],
|
||||
['a', borderRadius, borderRadius, 0, 0, 1, borderRadius, -borderRadius],
|
||||
['z']
|
||||
];
|
||||
|
||||
return componentsToPath(roundRectPath);
|
||||
}
|
||||
|
||||
export function getDiamondPath(shape) {
|
||||
|
||||
var width = shape.width,
|
||||
height = shape.height,
|
||||
x = shape.x,
|
||||
y = shape.y,
|
||||
halfWidth = width / 2,
|
||||
halfHeight = height / 2;
|
||||
|
||||
var diamondPath = [
|
||||
['M', x + halfWidth, y],
|
||||
['l', halfWidth, halfHeight],
|
||||
['l', -halfWidth, halfHeight],
|
||||
['l', -halfWidth, -halfHeight],
|
||||
['z']
|
||||
];
|
||||
|
||||
return componentsToPath(diamondPath);
|
||||
}
|
||||
|
||||
export function getRectPath(shape) {
|
||||
var x = shape.x,
|
||||
y = shape.y,
|
||||
width = shape.width,
|
||||
height = shape.height;
|
||||
|
||||
var rectPath = [
|
||||
['M', x, y],
|
||||
['l', width, 0],
|
||||
['l', 0, height],
|
||||
['l', -width, 0],
|
||||
['z']
|
||||
];
|
||||
|
||||
return componentsToPath(rectPath);
|
||||
}
|
||||
1900
ebpm-process-modeler/public/js/bpmn-js/lib/draw/BpmnRenderer.js
Normal file
1900
ebpm-process-modeler/public/js/bpmn-js/lib/draw/BpmnRenderer.js
Normal file
File diff suppressed because it is too large
Load Diff
474
ebpm-process-modeler/public/js/bpmn-js/lib/draw/PathMap.js
Normal file
474
ebpm-process-modeler/public/js/bpmn-js/lib/draw/PathMap.js
Normal file
@@ -0,0 +1,474 @@
|
||||
/**
|
||||
* Map containing SVG paths needed by BpmnRenderer.
|
||||
*/
|
||||
|
||||
export default function PathMap() {
|
||||
|
||||
/**
|
||||
* Contains a map of path elements
|
||||
*
|
||||
* <h1>Path definition</h1>
|
||||
* A parameterized path is defined like this:
|
||||
* <pre>
|
||||
* 'GATEWAY_PARALLEL': {
|
||||
* d: 'm {mx},{my} {e.x0},0 0,{e.x1} {e.x1},0 0,{e.y0} -{e.x1},0 0,{e.y1} ' +
|
||||
'-{e.x0},0 0,-{e.y1} -{e.x1},0 0,-{e.y0} {e.x1},0 z',
|
||||
* height: 17.5,
|
||||
* width: 17.5,
|
||||
* heightElements: [2.5, 7.5],
|
||||
* widthElements: [2.5, 7.5]
|
||||
* }
|
||||
* </pre>
|
||||
* <p>It's important to specify a correct <b>height and width</b> for the path as the scaling
|
||||
* is based on the ratio between the specified height and width in this object and the
|
||||
* height and width that is set as scale target (Note x,y coordinates will be scaled with
|
||||
* individual ratios).</p>
|
||||
* <p>The '<b>heightElements</b>' and '<b>widthElements</b>' array must contain the values that will be scaled.
|
||||
* The scaling is based on the computed ratios.
|
||||
* Coordinates on the y axis should be in the <b>heightElement</b>'s array, they will be scaled using
|
||||
* the computed ratio coefficient.
|
||||
* In the parameterized path the scaled values can be accessed through the 'e' object in {} brackets.
|
||||
* <ul>
|
||||
* <li>The values for the y axis can be accessed in the path string using {e.y0}, {e.y1}, ....</li>
|
||||
* <li>The values for the x axis can be accessed in the path string using {e.x0}, {e.x1}, ....</li>
|
||||
* </ul>
|
||||
* The numbers x0, x1 respectively y0, y1, ... map to the corresponding array index.
|
||||
* </p>
|
||||
*/
|
||||
this.pathMap = {
|
||||
'EVENT_MESSAGE': {
|
||||
d: 'm {mx},{my} l 0,{e.y1} l {e.x1},0 l 0,-{e.y1} z l {e.x0},{e.y0} l {e.x0},-{e.y0}',
|
||||
height: 36,
|
||||
width: 36,
|
||||
heightElements: [6, 14],
|
||||
widthElements: [10.5, 21]
|
||||
},
|
||||
'EVENT_SIGNAL': {
|
||||
d: 'M {mx},{my} l {e.x0},{e.y0} l -{e.x1},0 Z',
|
||||
height: 36,
|
||||
width: 36,
|
||||
heightElements: [18],
|
||||
widthElements: [10, 20]
|
||||
},
|
||||
'EVENT_ESCALATION': {
|
||||
d: 'M {mx},{my} l {e.x0},{e.y0} l -{e.x0},-{e.y1} l -{e.x0},{e.y1} Z',
|
||||
height: 36,
|
||||
width: 36,
|
||||
heightElements: [20, 7],
|
||||
widthElements: [8]
|
||||
},
|
||||
'EVENT_CONDITIONAL': {
|
||||
d: 'M {e.x0},{e.y0} l {e.x1},0 l 0,{e.y2} l -{e.x1},0 Z ' +
|
||||
'M {e.x2},{e.y3} l {e.x0},0 ' +
|
||||
'M {e.x2},{e.y4} l {e.x0},0 ' +
|
||||
'M {e.x2},{e.y5} l {e.x0},0 ' +
|
||||
'M {e.x2},{e.y6} l {e.x0},0 ' +
|
||||
'M {e.x2},{e.y7} l {e.x0},0 ' +
|
||||
'M {e.x2},{e.y8} l {e.x0},0 ',
|
||||
height: 36,
|
||||
width: 36,
|
||||
heightElements: [8.5, 14.5, 18, 11.5, 14.5, 17.5, 20.5, 23.5, 26.5],
|
||||
widthElements: [10.5, 14.5, 12.5]
|
||||
},
|
||||
'EVENT_LINK': {
|
||||
d: 'm {mx},{my} 0,{e.y0} -{e.x1},0 0,{e.y1} {e.x1},0 0,{e.y0} {e.x0},-{e.y2} -{e.x0},-{e.y2} z',
|
||||
height: 36,
|
||||
width: 36,
|
||||
heightElements: [4.4375, 6.75, 7.8125],
|
||||
widthElements: [9.84375, 13.5]
|
||||
},
|
||||
'EVENT_ERROR': {
|
||||
d: 'm {mx},{my} {e.x0},-{e.y0} {e.x1},-{e.y1} {e.x2},{e.y2} {e.x3},-{e.y3} -{e.x4},{e.y4} -{e.x5},-{e.y5} z',
|
||||
height: 36,
|
||||
width: 36,
|
||||
heightElements: [0.023, 8.737, 8.151, 16.564, 10.591, 8.714],
|
||||
widthElements: [0.085, 6.672, 6.97, 4.273, 5.337, 6.636]
|
||||
},
|
||||
'EVENT_CANCEL_45': {
|
||||
d: 'm {mx},{my} -{e.x1},0 0,{e.x0} {e.x1},0 0,{e.y1} {e.x0},0 ' +
|
||||
'0,-{e.y1} {e.x1},0 0,-{e.y0} -{e.x1},0 0,-{e.y1} -{e.x0},0 z',
|
||||
height: 36,
|
||||
width: 36,
|
||||
heightElements: [4.75, 8.5],
|
||||
widthElements: [4.75, 8.5]
|
||||
},
|
||||
'EVENT_COMPENSATION': {
|
||||
d: 'm {mx},{my} {e.x0},-{e.y0} 0,{e.y1} z m {e.x1},-{e.y2} {e.x2},-{e.y3} 0,{e.y1} -{e.x2},-{e.y3} z',
|
||||
height: 36,
|
||||
width: 36,
|
||||
heightElements: [6.5, 13, 0.4, 6.1],
|
||||
widthElements: [9, 9.3, 8.7]
|
||||
},
|
||||
'EVENT_TIMER_WH': {
|
||||
d: 'M {mx},{my} l {e.x0},-{e.y0} m -{e.x0},{e.y0} l {e.x1},{e.y1} ',
|
||||
height: 36,
|
||||
width: 36,
|
||||
heightElements: [10, 2],
|
||||
widthElements: [3, 7]
|
||||
},
|
||||
'EVENT_TIMER_LINE': {
|
||||
d: 'M {mx},{my} ' +
|
||||
'm {e.x0},{e.y0} l -{e.x1},{e.y1} ',
|
||||
height: 36,
|
||||
width: 36,
|
||||
heightElements: [10, 3],
|
||||
widthElements: [0, 0]
|
||||
},
|
||||
'EVENT_MULTIPLE': {
|
||||
d:'m {mx},{my} {e.x1},-{e.y0} {e.x1},{e.y0} -{e.x0},{e.y1} -{e.x2},0 z',
|
||||
height: 36,
|
||||
width: 36,
|
||||
heightElements: [6.28099, 12.56199],
|
||||
widthElements: [3.1405, 9.42149, 12.56198]
|
||||
},
|
||||
'EVENT_PARALLEL_MULTIPLE': {
|
||||
d:'m {mx},{my} {e.x0},0 0,{e.y1} {e.x1},0 0,{e.y0} -{e.x1},0 0,{e.y1} ' +
|
||||
'-{e.x0},0 0,-{e.y1} -{e.x1},0 0,-{e.y0} {e.x1},0 z',
|
||||
height: 36,
|
||||
width: 36,
|
||||
heightElements: [2.56228, 7.68683],
|
||||
widthElements: [2.56228, 7.68683]
|
||||
},
|
||||
'GATEWAY_EXCLUSIVE': {
|
||||
d:'m {mx},{my} {e.x0},{e.y0} {e.x1},{e.y0} {e.x2},0 {e.x4},{e.y2} ' +
|
||||
'{e.x4},{e.y1} {e.x2},0 {e.x1},{e.y3} {e.x0},{e.y3} ' +
|
||||
'{e.x3},0 {e.x5},{e.y1} {e.x5},{e.y2} {e.x3},0 z',
|
||||
height: 17.5,
|
||||
width: 17.5,
|
||||
heightElements: [8.5, 6.5312, -6.5312, -8.5],
|
||||
widthElements: [6.5, -6.5, 3, -3, 5, -5]
|
||||
},
|
||||
'GATEWAY_PARALLEL': {
|
||||
d:'m {mx},{my} 0,{e.y1} -{e.x1},0 0,{e.y0} {e.x1},0 0,{e.y1} {e.x0},0 ' +
|
||||
'0,-{e.y1} {e.x1},0 0,-{e.y0} -{e.x1},0 0,-{e.y1} -{e.x0},0 z',
|
||||
height: 30,
|
||||
width: 30,
|
||||
heightElements: [5, 12.5],
|
||||
widthElements: [5, 12.5]
|
||||
},
|
||||
'GATEWAY_EVENT_BASED': {
|
||||
d:'m {mx},{my} {e.x0},{e.y0} {e.x0},{e.y1} {e.x1},{e.y2} {e.x2},0 z',
|
||||
height: 11,
|
||||
width: 11,
|
||||
heightElements: [-6, 6, 12, -12],
|
||||
widthElements: [9, -3, -12]
|
||||
},
|
||||
'GATEWAY_COMPLEX': {
|
||||
d:'m {mx},{my} 0,{e.y0} -{e.x0},-{e.y1} -{e.x1},{e.y2} {e.x0},{e.y1} -{e.x2},0 0,{e.y3} ' +
|
||||
'{e.x2},0 -{e.x0},{e.y1} l {e.x1},{e.y2} {e.x0},-{e.y1} 0,{e.y0} {e.x3},0 0,-{e.y0} {e.x0},{e.y1} ' +
|
||||
'{e.x1},-{e.y2} -{e.x0},-{e.y1} {e.x2},0 0,-{e.y3} -{e.x2},0 {e.x0},-{e.y1} -{e.x1},-{e.y2} ' +
|
||||
'-{e.x0},{e.y1} 0,-{e.y0} -{e.x3},0 z',
|
||||
height: 17.125,
|
||||
width: 17.125,
|
||||
heightElements: [4.875, 3.4375, 2.125, 3],
|
||||
widthElements: [3.4375, 2.125, 4.875, 3]
|
||||
},
|
||||
'DATA_OBJECT_PATH': {
|
||||
d:'m 0,0 {e.x1},0 {e.x0},{e.y0} 0,{e.y1} -{e.x2},0 0,-{e.y2} {e.x1},0 0,{e.y0} {e.x0},0',
|
||||
height: 61,
|
||||
width: 51,
|
||||
heightElements: [10, 50, 60],
|
||||
widthElements: [10, 40, 50, 60]
|
||||
},
|
||||
'DATA_OBJECT_COLLECTION_PATH': {
|
||||
d:'m {mx}, {my} ' +
|
||||
'm 0 15 l 0 -15 ' +
|
||||
'm 4 15 l 0 -15 ' +
|
||||
'm 4 15 l 0 -15 ',
|
||||
height: 61,
|
||||
width: 51,
|
||||
heightElements: [12],
|
||||
widthElements: [1, 6, 12, 15]
|
||||
},
|
||||
'DATA_ARROW': {
|
||||
d:'m 5,9 9,0 0,-3 5,5 -5,5 0,-3 -9,0 z',
|
||||
height: 61,
|
||||
width: 51,
|
||||
heightElements: [],
|
||||
widthElements: []
|
||||
},
|
||||
'DATA_STORE': {
|
||||
d:'m {mx},{my} ' +
|
||||
'l 0,{e.y2} ' +
|
||||
'c {e.x0},{e.y1} {e.x1},{e.y1} {e.x2},0 ' +
|
||||
'l 0,-{e.y2} ' +
|
||||
'c -{e.x0},-{e.y1} -{e.x1},-{e.y1} -{e.x2},0' +
|
||||
'c {e.x0},{e.y1} {e.x1},{e.y1} {e.x2},0 ' +
|
||||
'm -{e.x2},{e.y0}' +
|
||||
'c {e.x0},{e.y1} {e.x1},{e.y1} {e.x2},0' +
|
||||
'm -{e.x2},{e.y0}' +
|
||||
'c {e.x0},{e.y1} {e.x1},{e.y1} {e.x2},0',
|
||||
height: 61,
|
||||
width: 61,
|
||||
heightElements: [7, 10, 45],
|
||||
widthElements: [2, 58, 60]
|
||||
},
|
||||
'TEXT_ANNOTATION': {
|
||||
d: 'm {mx}, {my} m 10,0 l -10,0 l 0,{e.y0} l 10,0',
|
||||
height: 30,
|
||||
width: 10,
|
||||
heightElements: [30],
|
||||
widthElements: [10]
|
||||
},
|
||||
'MARKER_SUB_PROCESS': {
|
||||
d: 'm{mx},{my} m 7,2 l 0,10 m -5,-5 l 10,0',
|
||||
height: 10,
|
||||
width: 10,
|
||||
heightElements: [],
|
||||
widthElements: []
|
||||
},
|
||||
'MARKER_PARALLEL': {
|
||||
d: 'm{mx},{my} m 3,2 l 0,10 m 3,-10 l 0,10 m 3,-10 l 0,10',
|
||||
height: 10,
|
||||
width: 10,
|
||||
heightElements: [],
|
||||
widthElements: []
|
||||
},
|
||||
'MARKER_SEQUENTIAL': {
|
||||
d: 'm{mx},{my} m 0,3 l 10,0 m -10,3 l 10,0 m -10,3 l 10,0',
|
||||
height: 10,
|
||||
width: 10,
|
||||
heightElements: [],
|
||||
widthElements: []
|
||||
},
|
||||
'MARKER_COMPENSATION': {
|
||||
d: 'm {mx},{my} 7,-5 0,10 z m 7.1,-0.3 6.9,-4.7 0,10 -6.9,-4.7 z',
|
||||
height: 10,
|
||||
width: 21,
|
||||
heightElements: [],
|
||||
widthElements: []
|
||||
},
|
||||
'MARKER_LOOP': {
|
||||
d: 'm {mx},{my} c 3.526979,0 6.386161,-2.829858 6.386161,-6.320661 0,-3.490806 -2.859182,-6.320661 ' +
|
||||
'-6.386161,-6.320661 -3.526978,0 -6.38616,2.829855 -6.38616,6.320661 0,1.745402 ' +
|
||||
'0.714797,3.325567 1.870463,4.469381 0.577834,0.571908 1.265885,1.034728 2.029916,1.35457 ' +
|
||||
'l -0.718163,-3.909793 m 0.718163,3.909793 -3.885211,0.802902',
|
||||
height: 13.9,
|
||||
width: 13.7,
|
||||
heightElements: [],
|
||||
widthElements: []
|
||||
},
|
||||
'MARKER_ADHOC': {
|
||||
d: 'm {mx},{my} m 0.84461,2.64411 c 1.05533,-1.23780996 2.64337,-2.07882 4.29653,-1.97997996 2.05163,0.0805 ' +
|
||||
'3.85579,1.15803 5.76082,1.79107 1.06385,0.34139996 2.24454,0.1438 3.18759,-0.43767 0.61743,-0.33642 ' +
|
||||
'1.2775,-0.64078 1.7542,-1.17511 0,0.56023 0,1.12046 0,1.6807 -0.98706,0.96237996 -2.29792,1.62393996 ' +
|
||||
'-3.6918,1.66181996 -1.24459,0.0927 -2.46671,-0.2491 -3.59505,-0.74812 -1.35789,-0.55965 ' +
|
||||
'-2.75133,-1.33436996 -4.27027,-1.18121996 -1.37741,0.14601 -2.41842,1.13685996 -3.44288,1.96782996 z',
|
||||
height: 4,
|
||||
width: 15,
|
||||
heightElements: [],
|
||||
widthElements: []
|
||||
},
|
||||
'TASK_TYPE_SEND': {
|
||||
d: 'm {mx},{my} l 0,{e.y1} l {e.x1},0 l 0,-{e.y1} z l {e.x0},{e.y0} l {e.x0},-{e.y0}',
|
||||
height: 14,
|
||||
width: 21,
|
||||
heightElements: [6, 14],
|
||||
widthElements: [10.5, 21]
|
||||
},
|
||||
'TASK_TYPE_SCRIPT': {
|
||||
d: 'm {mx},{my} c 9.966553,-6.27276 -8.000926,-7.91932 2.968968,-14.938 l -8.802728,0 ' +
|
||||
'c -10.969894,7.01868 6.997585,8.66524 -2.968967,14.938 z ' +
|
||||
'm -7,-12 l 5,0 ' +
|
||||
'm -4.5,3 l 4.5,0 ' +
|
||||
'm -3,3 l 5,0' +
|
||||
'm -4,3 l 5,0',
|
||||
height: 15,
|
||||
width: 12.6,
|
||||
heightElements: [6, 14],
|
||||
widthElements: [10.5, 21]
|
||||
},
|
||||
'TASK_TYPE_USER_1': {
|
||||
d: 'm {mx},{my} c 0.909,-0.845 1.594,-2.049 1.594,-3.385 0,-2.554 -1.805,-4.62199999 ' +
|
||||
'-4.357,-4.62199999 -2.55199998,0 -4.28799998,2.06799999 -4.28799998,4.62199999 0,1.348 ' +
|
||||
'0.974,2.562 1.89599998,3.405 -0.52899998,0.187 -5.669,2.097 -5.794,4.7560005 v 6.718 ' +
|
||||
'h 17 v -6.718 c 0,-2.2980005 -5.5279996,-4.5950005 -6.0509996,-4.7760005 z' +
|
||||
'm -8,6 l 0,5.5 m 11,0 l 0,-5'
|
||||
},
|
||||
'TASK_TYPE_USER_2': {
|
||||
d: 'm {mx},{my} m 2.162,1.009 c 0,2.4470005 -2.158,4.4310005 -4.821,4.4310005 ' +
|
||||
'-2.66499998,0 -4.822,-1.981 -4.822,-4.4310005 '
|
||||
},
|
||||
'TASK_TYPE_USER_3': {
|
||||
d: 'm {mx},{my} m -6.9,-3.80 c 0,0 2.25099998,-2.358 4.27399998,-1.177 2.024,1.181 4.221,1.537 ' +
|
||||
'4.124,0.965 -0.098,-0.57 -0.117,-3.79099999 -4.191,-4.13599999 -3.57499998,0.001 ' +
|
||||
'-4.20799998,3.36699999 -4.20699998,4.34799999 z'
|
||||
},
|
||||
'TASK_TYPE_MANUAL': {
|
||||
d: 'm {mx},{my} c 0.234,-0.01 5.604,0.008 8.029,0.004 0.808,0 1.271,-0.172 1.417,-0.752 0.227,-0.898 ' +
|
||||
'-0.334,-1.314 -1.338,-1.316 -2.467,-0.01 -7.886,-0.004 -8.108,-0.004 -0.014,-0.079 0.016,-0.533 0,-0.61 ' +
|
||||
'0.195,-0.042 8.507,0.006 9.616,0.002 0.877,-0.007 1.35,-0.438 1.353,-1.208 0.003,-0.768 -0.479,-1.09 ' +
|
||||
'-1.35,-1.091 -2.968,-0.002 -9.619,-0.013 -9.619,-0.013 v -0.591 c 0,0 5.052,-0.016 7.225,-0.016 ' +
|
||||
'0.888,-0.002 1.354,-0.416 1.351,-1.193 -0.006,-0.761 -0.492,-1.196 -1.361,-1.196 -3.473,-0.005 ' +
|
||||
'-10.86,-0.003 -11.0829995,-0.003 -0.022,-0.047 -0.045,-0.094 -0.069,-0.139 0.3939995,-0.319 ' +
|
||||
'2.0409995,-1.626 2.4149995,-2.017 0.469,-0.4870005 0.519,-1.1650005 0.162,-1.6040005 -0.414,-0.511 ' +
|
||||
'-0.973,-0.5 -1.48,-0.236 -1.4609995,0.764 -6.5999995,3.6430005 -7.7329995,4.2710005 -0.9,0.499 ' +
|
||||
'-1.516,1.253 -1.882,2.19 -0.37000002,0.95 -0.17,2.01 -0.166,2.979 0.004,0.718 -0.27300002,1.345 ' +
|
||||
'-0.055,2.063 0.629,2.087 2.425,3.312 4.859,3.318 4.6179995,0.014 9.2379995,-0.139 13.8569995,-0.158 ' +
|
||||
'0.755,-0.004 1.171,-0.301 1.182,-1.033 0.012,-0.754 -0.423,-0.969 -1.183,-0.973 -1.778,-0.01 ' +
|
||||
'-5.824,-0.004 -6.04,-0.004 10e-4,-0.084 0.003,-0.586 10e-4,-0.67 z'
|
||||
},
|
||||
'TASK_TYPE_INSTANTIATING_SEND': {
|
||||
d: 'm {mx},{my} l 0,8.4 l 12.6,0 l 0,-8.4 z l 6.3,3.6 l 6.3,-3.6'
|
||||
},
|
||||
'TASK_TYPE_SERVICE': {
|
||||
d: 'm {mx},{my} v -1.71335 c 0.352326,-0.0705 0.703932,-0.17838 1.047628,-0.32133 ' +
|
||||
'0.344416,-0.14465 0.665822,-0.32133 0.966377,-0.52145 l 1.19431,1.18005 1.567487,-1.57688 ' +
|
||||
'-1.195028,-1.18014 c 0.403376,-0.61394 0.683079,-1.29908 0.825447,-2.01824 l 1.622133,-0.01 ' +
|
||||
'v -2.2196 l -1.636514,0.01 c -0.07333,-0.35153 -0.178319,-0.70024 -0.323564,-1.04372 ' +
|
||||
'-0.145244,-0.34406 -0.321407,-0.6644 -0.522735,-0.96217 l 1.131035,-1.13631 -1.583305,-1.56293 ' +
|
||||
'-1.129598,1.13589 c -0.614052,-0.40108 -1.302883,-0.68093 -2.022633,-0.82247 l 0.0093,-1.61852 ' +
|
||||
'h -2.241173 l 0.0042,1.63124 c -0.353763,0.0736 -0.705369,0.17977 -1.049785,0.32371 -0.344415,0.14437 ' +
|
||||
'-0.665102,0.32092 -0.9635006,0.52046 l -1.1698628,-1.15823 -1.5667691,1.5792 1.1684265,1.15669 ' +
|
||||
'c -0.4026573,0.61283 -0.68308,1.29797 -0.8247287,2.01713 l -1.6588041,0.003 v 2.22174 ' +
|
||||
'l 1.6724648,-0.006 c 0.073327,0.35077 0.1797598,0.70243 0.3242851,1.04472 0.1452428,0.34448 ' +
|
||||
'0.3214064,0.6644 0.5227339,0.96066 l -1.1993431,1.19723 1.5840256,1.56011 1.1964668,-1.19348 ' +
|
||||
'c 0.6140517,0.40346 1.3028827,0.68232 2.0233517,0.82331 l 7.19e-4,1.69892 h 2.226848 z ' +
|
||||
'm 0.221462,-3.9957 c -1.788948,0.7502 -3.8576,-0.0928 -4.6097055,-1.87438 -0.7521065,-1.78321 ' +
|
||||
'0.090598,-3.84627 1.8802645,-4.59604 1.78823,-0.74936 3.856881,0.0929 4.608987,1.87437 ' +
|
||||
'0.752106,1.78165 -0.0906,3.84612 -1.879546,4.59605 z'
|
||||
},
|
||||
'TASK_TYPE_SERVICE_FILL': {
|
||||
d: 'm {mx},{my} c -1.788948,0.7502 -3.8576,-0.0928 -4.6097055,-1.87438 -0.7521065,-1.78321 ' +
|
||||
'0.090598,-3.84627 1.8802645,-4.59604 1.78823,-0.74936 3.856881,0.0929 4.608987,1.87437 ' +
|
||||
'0.752106,1.78165 -0.0906,3.84612 -1.879546,4.59605 z'
|
||||
},
|
||||
'TASK_TYPE_BUSINESS_RULE_HEADER': {
|
||||
d: 'm {mx},{my} 0,4 20,0 0,-4 z'
|
||||
},
|
||||
'TASK_TYPE_BUSINESS_RULE_MAIN': {
|
||||
d: 'm {mx},{my} 0,12 20,0 0,-12 z' +
|
||||
'm 0,8 l 20,0 ' +
|
||||
'm -13,-4 l 0,8'
|
||||
},
|
||||
'MESSAGE_FLOW_MARKER': {
|
||||
d: 'm {mx},{my} m -10.5 ,-7 l 0,14 l 21,0 l 0,-14 z l 10.5,6 l 10.5,-6'
|
||||
}
|
||||
};
|
||||
|
||||
this.getRawPath = function getRawPath(pathId) {
|
||||
return this.pathMap[pathId].d;
|
||||
};
|
||||
|
||||
/**
|
||||
* Scales the path to the given height and width.
|
||||
* <h1>Use case</h1>
|
||||
* <p>Use case is to scale the content of elements (event, gateways) based
|
||||
* on the element bounding box's size.
|
||||
* </p>
|
||||
* <h1>Why not transform</h1>
|
||||
* <p>Scaling a path with transform() will also scale the stroke and IE does not support
|
||||
* the option 'non-scaling-stroke' to prevent this.
|
||||
* Also there are use cases where only some parts of a path should be
|
||||
* scaled.</p>
|
||||
*
|
||||
* @param {String} pathId The ID of the path.
|
||||
* @param {Object} param <p>
|
||||
* Example param object scales the path to 60% size of the container (data.width, data.height).
|
||||
* <pre>
|
||||
* {
|
||||
* xScaleFactor: 0.6,
|
||||
* yScaleFactor:0.6,
|
||||
* containerWidth: data.width,
|
||||
* containerHeight: data.height,
|
||||
* position: {
|
||||
* mx: 0.46,
|
||||
* my: 0.2,
|
||||
* }
|
||||
* }
|
||||
* </pre>
|
||||
* <ul>
|
||||
* <li>targetpathwidth = xScaleFactor * containerWidth</li>
|
||||
* <li>targetpathheight = yScaleFactor * containerHeight</li>
|
||||
* <li>Position is used to set the starting coordinate of the path. M is computed:
|
||||
* <ul>
|
||||
* <li>position.x * containerWidth</li>
|
||||
* <li>position.y * containerHeight</li>
|
||||
* </ul>
|
||||
* Center of the container <pre> position: {
|
||||
* mx: 0.5,
|
||||
* my: 0.5,
|
||||
* }</pre>
|
||||
* Upper left corner of the container
|
||||
* <pre> position: {
|
||||
* mx: 0.0,
|
||||
* my: 0.0,
|
||||
* }</pre>
|
||||
* </li>
|
||||
* </ul>
|
||||
* </p>
|
||||
*
|
||||
*/
|
||||
this.getScaledPath = function getScaledPath(pathId, param) {
|
||||
var rawPath = this.pathMap[pathId];
|
||||
|
||||
// positioning
|
||||
// compute the start point of the path
|
||||
var mx, my;
|
||||
|
||||
if (param.abspos) {
|
||||
mx = param.abspos.x;
|
||||
my = param.abspos.y;
|
||||
} else {
|
||||
mx = param.containerWidth * param.position.mx;
|
||||
my = param.containerHeight * param.position.my;
|
||||
}
|
||||
|
||||
var coordinates = {}; // map for the scaled coordinates
|
||||
if (param.position) {
|
||||
|
||||
// path
|
||||
var heightRatio = (param.containerHeight / rawPath.height) * param.yScaleFactor;
|
||||
var widthRatio = (param.containerWidth / rawPath.width) * param.xScaleFactor;
|
||||
|
||||
|
||||
// Apply height ratio
|
||||
for (var heightIndex = 0; heightIndex < rawPath.heightElements.length; heightIndex++) {
|
||||
coordinates['y' + heightIndex] = rawPath.heightElements[heightIndex] * heightRatio;
|
||||
}
|
||||
|
||||
// Apply width ratio
|
||||
for (var widthIndex = 0; widthIndex < rawPath.widthElements.length; widthIndex++) {
|
||||
coordinates['x' + widthIndex] = rawPath.widthElements[widthIndex] * widthRatio;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply value to raw path
|
||||
var path = format(
|
||||
rawPath.d, {
|
||||
mx: mx,
|
||||
my: my,
|
||||
e: coordinates
|
||||
}
|
||||
);
|
||||
return path;
|
||||
};
|
||||
}
|
||||
|
||||
// helpers //////////////////////
|
||||
|
||||
// copied from https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js
|
||||
var tokenRegex = /\{([^}]+)\}/g,
|
||||
objNotationRegex = /(?:(?:^|\.)(.+?)(?=\[|\.|$|\()|\[('|")(.+?)\2\])(\(\))?/g; // matches .xxxxx or ["xxxxx"] to run over object properties
|
||||
|
||||
function replacer(all, key, obj) {
|
||||
var res = obj;
|
||||
key.replace(objNotationRegex, function(all, name, quote, quotedName, isFunc) {
|
||||
name = name || quotedName;
|
||||
if (res) {
|
||||
if (name in res) {
|
||||
res = res[name];
|
||||
}
|
||||
typeof res == 'function' && isFunc && (res = res());
|
||||
}
|
||||
});
|
||||
res = (res == null || res == obj ? all : res) + '';
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
function format(str, obj) {
|
||||
return String(str).replace(tokenRegex, function(all, key) {
|
||||
return replacer(all, key, obj);
|
||||
});
|
||||
}
|
||||
115
ebpm-process-modeler/public/js/bpmn-js/lib/draw/TextRenderer.js
Normal file
115
ebpm-process-modeler/public/js/bpmn-js/lib/draw/TextRenderer.js
Normal file
@@ -0,0 +1,115 @@
|
||||
import { assign } from 'min-dash';
|
||||
|
||||
import TextUtil from 'diagram-js/lib/util/Text';
|
||||
|
||||
var DEFAULT_FONT_SIZE = 12;
|
||||
var LINE_HEIGHT_RATIO = 1.2;
|
||||
|
||||
var MIN_TEXT_ANNOTATION_HEIGHT = 30;
|
||||
|
||||
|
||||
export default function TextRenderer(config) {
|
||||
var defaultStyle = assign({
|
||||
fontFamily: 'Arial, sans-serif',
|
||||
fontSize: DEFAULT_FONT_SIZE,
|
||||
fontWeight: 'normal',
|
||||
lineHeight: LINE_HEIGHT_RATIO
|
||||
}, config && config.defaultStyle || {});
|
||||
|
||||
var fontSize = parseInt(defaultStyle.fontSize, 10) - 1;
|
||||
|
||||
var externalStyle = assign({}, defaultStyle, {
|
||||
fontSize: fontSize
|
||||
}, config && config.externalStyle || {});
|
||||
|
||||
var textUtil = new TextUtil({
|
||||
style: defaultStyle
|
||||
});
|
||||
|
||||
/**
|
||||
* Get the new bounds of an externally rendered,
|
||||
* layouted label.
|
||||
*
|
||||
* @param {Bounds} bounds
|
||||
* @param {String} text
|
||||
*
|
||||
* @return {Bounds}
|
||||
*/
|
||||
this.getExternalLabelBounds = function(bounds, text) {
|
||||
|
||||
var layoutedDimensions = textUtil.getDimensions(text, {
|
||||
box: {
|
||||
width: 90,
|
||||
height: 30,
|
||||
x: bounds.width / 2 + bounds.x,
|
||||
y: bounds.height / 2 + bounds.y
|
||||
},
|
||||
style: externalStyle
|
||||
});
|
||||
|
||||
// resize label shape to fit label text
|
||||
return {
|
||||
x: Math.round(bounds.x + bounds.width / 2 - layoutedDimensions.width / 2),
|
||||
y: Math.round(bounds.y),
|
||||
width: Math.ceil(layoutedDimensions.width),
|
||||
height: Math.ceil(layoutedDimensions.height)
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the new bounds of text annotation.
|
||||
*
|
||||
* @param {Bounds} bounds
|
||||
* @param {String} text
|
||||
*
|
||||
* @return {Bounds}
|
||||
*/
|
||||
this.getTextAnnotationBounds = function(bounds, text) {
|
||||
|
||||
var layoutedDimensions = textUtil.getDimensions(text, {
|
||||
box: bounds,
|
||||
style: defaultStyle,
|
||||
align: 'left-top',
|
||||
padding: 5
|
||||
});
|
||||
|
||||
return {
|
||||
x: bounds.x,
|
||||
y: bounds.y,
|
||||
width: bounds.width,
|
||||
height: Math.max(MIN_TEXT_ANNOTATION_HEIGHT, Math.round(layoutedDimensions.height))
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Create a layouted text element.
|
||||
*
|
||||
* @param {String} text
|
||||
* @param {Object} [options]
|
||||
*
|
||||
* @return {SVGElement} rendered text
|
||||
*/
|
||||
this.createText = function(text, options) {
|
||||
return textUtil.createText(text, options || {});
|
||||
};
|
||||
|
||||
/**
|
||||
* Get default text style.
|
||||
*/
|
||||
this.getDefaultStyle = function() {
|
||||
return defaultStyle;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the external text style.
|
||||
*/
|
||||
this.getExternalStyle = function() {
|
||||
return externalStyle;
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
TextRenderer.$inject = [
|
||||
'config.textRenderer'
|
||||
];
|
||||
11
ebpm-process-modeler/public/js/bpmn-js/lib/draw/index.js
Normal file
11
ebpm-process-modeler/public/js/bpmn-js/lib/draw/index.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import BpmnRenderer from './BpmnRenderer';
|
||||
import TextRenderer from './TextRenderer';
|
||||
|
||||
import PathMap from './PathMap';
|
||||
|
||||
export default {
|
||||
__init__: [ 'bpmnRenderer' ],
|
||||
bpmnRenderer: [ 'type', BpmnRenderer ],
|
||||
textRenderer: [ 'type', TextRenderer ],
|
||||
pathMap: [ 'type', PathMap ]
|
||||
};
|
||||
@@ -0,0 +1,53 @@
|
||||
import { getNewShapePosition } from './AutoPlaceUtil';
|
||||
|
||||
|
||||
/**
|
||||
* A service that places elements connected to existing ones
|
||||
* to an appropriate position in an _automated_ fashion.
|
||||
*
|
||||
* @param {EventBus} eventBus
|
||||
* @param {Modeling} modeling
|
||||
*/
|
||||
export default 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'
|
||||
];
|
||||
@@ -0,0 +1,18 @@
|
||||
/**
|
||||
* Select element after auto placement.
|
||||
*
|
||||
* @param {EventBus} eventBus
|
||||
* @param {Selection} selection
|
||||
*/
|
||||
export default function AutoPlaceSelectionBehavior(eventBus, selection) {
|
||||
|
||||
eventBus.on('autoPlace.end', 500, function(e) {
|
||||
selection.select(e.shape);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
AutoPlaceSelectionBehavior.$inject = [
|
||||
'eventBus',
|
||||
'selection'
|
||||
];
|
||||
@@ -0,0 +1,429 @@
|
||||
import { is } from '../../util/ModelUtil';
|
||||
import { isAny } from '../modeling/util/ModelingUtil';
|
||||
|
||||
import {
|
||||
getMid,
|
||||
asTRBL,
|
||||
getOrientation
|
||||
} from 'diagram-js/lib/layout/LayoutUtil';
|
||||
|
||||
import {
|
||||
find,
|
||||
reduce
|
||||
} from 'min-dash';
|
||||
|
||||
var DEFAULT_HORIZONTAL_DISTANCE = 50;
|
||||
|
||||
var MAX_HORIZONTAL_DISTANCE = 250;
|
||||
|
||||
// padding to detect element placement
|
||||
var PLACEMENT_DETECTION_PAD = 10;
|
||||
|
||||
/**
|
||||
* Find the new position for the target element to
|
||||
* connect to source.
|
||||
*
|
||||
* @param {djs.model.Shape} source
|
||||
* @param {djs.model.Shape} element
|
||||
*
|
||||
* @return {Point}
|
||||
*/
|
||||
export 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);
|
||||
}
|
||||
|
||||
/**
|
||||
* Always try to place element right of source;
|
||||
* compute actual distance from previous nodes in flow.
|
||||
*/
|
||||
export function getFlowNodePosition(source, element) {
|
||||
|
||||
var sourceTrbl = asTRBL(source);
|
||||
var sourceMid = getMid(source);
|
||||
|
||||
var horizontalDistance = getFlowNodeDistance(source, element);
|
||||
|
||||
var orientation = 'left',
|
||||
rowSize = 80,
|
||||
margin = 30;
|
||||
|
||||
if (is(source, 'bpmn:BoundaryEvent')) {
|
||||
orientation = getOrientation(source, source.host, -25);
|
||||
|
||||
if (orientation.indexOf('top') !== -1) {
|
||||
margin *= -1;
|
||||
}
|
||||
}
|
||||
|
||||
function getVerticalDistance(orient) {
|
||||
if (orient.indexOf('top') != -1) {
|
||||
return -1 * rowSize;
|
||||
} else if (orient.indexOf('bottom') != -1) {
|
||||
return rowSize;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
var position = {
|
||||
x: sourceTrbl.right + horizontalDistance + element.width / 2,
|
||||
y: sourceMid.y + getVerticalDistance(orientation)
|
||||
};
|
||||
|
||||
var escapeDirection = {
|
||||
y: {
|
||||
margin: margin,
|
||||
rowSize: rowSize
|
||||
}
|
||||
};
|
||||
|
||||
return deconflictPosition(source, element, position, escapeDirection);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Compute best distance between source and target,
|
||||
* based on existing connections to and from source.
|
||||
*
|
||||
* @param {djs.model.Shape} source
|
||||
* @param {djs.model.Shape} element
|
||||
*
|
||||
* @return {Number} distance
|
||||
*/
|
||||
export function getFlowNodeDistance(source, element) {
|
||||
|
||||
var sourceTrbl = asTRBL(source);
|
||||
|
||||
// is connection a reference to consider?
|
||||
function isReference(c) {
|
||||
return is(c, 'bpmn:SequenceFlow');
|
||||
}
|
||||
|
||||
function toTargetNode(weight) {
|
||||
|
||||
return function(shape) {
|
||||
return {
|
||||
shape: shape,
|
||||
weight: weight,
|
||||
distanceTo: function(shape) {
|
||||
var shapeTrbl = asTRBL(shape);
|
||||
|
||||
return shapeTrbl.left - sourceTrbl.right;
|
||||
}
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
function toSourceNode(weight) {
|
||||
return function(shape) {
|
||||
return {
|
||||
shape: shape,
|
||||
weight: weight,
|
||||
distanceTo: function(shape) {
|
||||
var shapeTrbl = asTRBL(shape);
|
||||
|
||||
return sourceTrbl.left - shapeTrbl.right;
|
||||
}
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
// we create a list of nodes to take into consideration
|
||||
// for calculating the optimal flow node distance
|
||||
//
|
||||
// * weight existing target nodes higher than source nodes
|
||||
// * only take into account individual nodes once
|
||||
//
|
||||
var nodes = reduce([].concat(
|
||||
getTargets(source, isReference).map(toTargetNode(5)),
|
||||
getSources(source, isReference).map(toSourceNode(1))
|
||||
), function(nodes, node) {
|
||||
// filter out shapes connected twice via source or target
|
||||
nodes[node.shape.id + '__weight_' + node.weight] = node;
|
||||
|
||||
return nodes;
|
||||
}, {});
|
||||
|
||||
// compute distances between source and incoming nodes;
|
||||
// group at the same time by distance and expose the
|
||||
// favourite distance as { fav: { count, value } }.
|
||||
var distancesGrouped = reduce(nodes, function(result, node) {
|
||||
|
||||
var shape = node.shape,
|
||||
weight = node.weight,
|
||||
distanceTo = node.distanceTo;
|
||||
|
||||
var fav = result.fav,
|
||||
currentDistance,
|
||||
currentDistanceCount,
|
||||
currentDistanceEntry;
|
||||
|
||||
currentDistance = distanceTo(shape);
|
||||
|
||||
// ignore too far away peers
|
||||
// or non-left to right modeled nodes
|
||||
if (currentDistance < 0 || currentDistance > MAX_HORIZONTAL_DISTANCE) {
|
||||
return result;
|
||||
}
|
||||
|
||||
currentDistanceEntry = result[String(currentDistance)] =
|
||||
result[String(currentDistance)] || {
|
||||
value: currentDistance,
|
||||
count: 0
|
||||
};
|
||||
|
||||
// inc diff count
|
||||
currentDistanceCount = currentDistanceEntry.count += 1 * weight;
|
||||
|
||||
if (!fav || fav.count < currentDistanceCount) {
|
||||
result.fav = currentDistanceEntry;
|
||||
}
|
||||
|
||||
return result;
|
||||
}, { });
|
||||
|
||||
|
||||
if (distancesGrouped.fav) {
|
||||
return distancesGrouped.fav.value;
|
||||
} else {
|
||||
return DEFAULT_HORIZONTAL_DISTANCE;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Always try to place text annotations top right of source.
|
||||
*/
|
||||
export function getTextAnnotationPosition(source, element) {
|
||||
|
||||
var sourceTrbl = asTRBL(source);
|
||||
|
||||
var position = {
|
||||
x: sourceTrbl.right + element.width / 2,
|
||||
y: sourceTrbl.top - 50 - element.height / 2
|
||||
};
|
||||
|
||||
var escapeDirection = {
|
||||
y: {
|
||||
margin: -30,
|
||||
rowSize: 20
|
||||
}
|
||||
};
|
||||
|
||||
return deconflictPosition(source, element, position, escapeDirection);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Always put element bottom right of source.
|
||||
*/
|
||||
export function getDataElementPosition(source, element) {
|
||||
|
||||
var sourceTrbl = asTRBL(source);
|
||||
|
||||
var position = {
|
||||
x: sourceTrbl.right - 10 + element.width / 2,
|
||||
y: sourceTrbl.bottom + 40 + element.width / 2
|
||||
};
|
||||
|
||||
var escapeDirection = {
|
||||
x: {
|
||||
margin: 30,
|
||||
rowSize: 30
|
||||
}
|
||||
};
|
||||
|
||||
return deconflictPosition(source, element, position, escapeDirection);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Always put element right of source per default.
|
||||
*/
|
||||
export function getDefaultPosition(source, element) {
|
||||
|
||||
var sourceTrbl = asTRBL(source);
|
||||
|
||||
var sourceMid = getMid(source);
|
||||
|
||||
// simply put element right next to source
|
||||
return {
|
||||
x: sourceTrbl.right + DEFAULT_HORIZONTAL_DISTANCE + element.width / 2,
|
||||
y: sourceMid.y
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Returns all connected elements around the given source.
|
||||
*
|
||||
* This includes:
|
||||
*
|
||||
* - connected elements
|
||||
* - host connected elements
|
||||
* - attachers connected elements
|
||||
*
|
||||
* @param {djs.model.Shape} source
|
||||
* @param {djs.model.Shape} element
|
||||
*
|
||||
* @return {Array<djs.model.Shape>}
|
||||
*/
|
||||
function getAutoPlaceClosure(source, element) {
|
||||
|
||||
var allConnected = getConnected(source);
|
||||
|
||||
if (source.host) {
|
||||
allConnected = allConnected.concat(getConnected(source.host));
|
||||
}
|
||||
|
||||
if (source.attachers) {
|
||||
allConnected = allConnected.concat(source.attachers.reduce(function(shapes, attacher) {
|
||||
return shapes.concat(getConnected(attacher));
|
||||
}, []));
|
||||
}
|
||||
|
||||
return allConnected;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return target at given position, if defined.
|
||||
*
|
||||
* This takes connected elements from host and attachers
|
||||
* into account, too.
|
||||
*/
|
||||
export function getConnectedAtPosition(source, position, element) {
|
||||
|
||||
var bounds = {
|
||||
x: position.x - (element.width / 2),
|
||||
y: position.y - (element.height / 2),
|
||||
width: element.width,
|
||||
height: element.height
|
||||
};
|
||||
|
||||
var closure = getAutoPlaceClosure(source, element);
|
||||
|
||||
return find(closure, function(target) {
|
||||
|
||||
if (target === element) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var orientation = getOrientation(target, bounds, PLACEMENT_DETECTION_PAD);
|
||||
|
||||
return orientation === 'intersect';
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Returns a new, position for the given element
|
||||
* based on the given element that is not occupied
|
||||
* by some element connected to source.
|
||||
*
|
||||
* Take into account the escapeDirection (where to move
|
||||
* on positining clashes) in the computation.
|
||||
*
|
||||
* @param {djs.model.Shape} source
|
||||
* @param {djs.model.Shape} element
|
||||
* @param {Point} position
|
||||
* @param {Object} escapeDelta
|
||||
*
|
||||
* @return {Point}
|
||||
*/
|
||||
export function deconflictPosition(source, element, position, escapeDelta) {
|
||||
|
||||
function nextPosition(existingElement) {
|
||||
|
||||
var newPosition = {
|
||||
x: position.x,
|
||||
y: position.y
|
||||
};
|
||||
|
||||
[ 'x', 'y' ].forEach(function(axis) {
|
||||
|
||||
var axisDelta = escapeDelta[axis];
|
||||
|
||||
if (!axisDelta) {
|
||||
return;
|
||||
}
|
||||
|
||||
var dimension = axis === 'x' ? 'width' : 'height';
|
||||
|
||||
var margin = axisDelta.margin,
|
||||
rowSize = axisDelta.rowSize;
|
||||
|
||||
if (margin < 0) {
|
||||
newPosition[axis] = Math.min(
|
||||
existingElement[axis] + margin - element[dimension] / 2,
|
||||
position[axis] - rowSize + margin
|
||||
);
|
||||
} else {
|
||||
newPosition[axis] = Math.max(
|
||||
existingTarget[axis] + existingTarget[dimension] + margin + element[dimension] / 2,
|
||||
position[axis] + rowSize + margin
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
return newPosition;
|
||||
}
|
||||
|
||||
var existingTarget;
|
||||
|
||||
// deconflict position until free slot is found
|
||||
while ((existingTarget = getConnectedAtPosition(source, position, element))) {
|
||||
position = nextPosition(existingTarget);
|
||||
}
|
||||
|
||||
return position;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// helpers //////////////////////
|
||||
|
||||
function noneFilter() {
|
||||
return true;
|
||||
}
|
||||
|
||||
function getConnected(element, connectionFilter) {
|
||||
return [].concat(
|
||||
getTargets(element, connectionFilter),
|
||||
getSources(element, connectionFilter)
|
||||
);
|
||||
}
|
||||
|
||||
function getSources(shape, connectionFilter) {
|
||||
|
||||
if (!connectionFilter) {
|
||||
connectionFilter = noneFilter;
|
||||
}
|
||||
|
||||
return shape.incoming.filter(connectionFilter).map(function(c) {
|
||||
return c.source;
|
||||
});
|
||||
}
|
||||
|
||||
function getTargets(shape, connectionFilter) {
|
||||
|
||||
if (!connectionFilter) {
|
||||
connectionFilter = noneFilter;
|
||||
}
|
||||
|
||||
return shape.outgoing.filter(connectionFilter).map(function(c) {
|
||||
return c.target;
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import AutoPlace from './AutoPlace';
|
||||
import AutoPlaceSelectionBehavior from './AutoPlaceSelectionBehavior';
|
||||
|
||||
export default {
|
||||
__init__: [ 'autoPlaceSelectionBehavior' ],
|
||||
autoPlace: [ 'type', AutoPlace ],
|
||||
autoPlaceSelectionBehavior: [ 'type', AutoPlaceSelectionBehavior ]
|
||||
};
|
||||
@@ -0,0 +1,38 @@
|
||||
import AutoResize from 'diagram-js/lib/features/auto-resize/AutoResize';
|
||||
|
||||
import inherits from 'inherits';
|
||||
|
||||
import { is } from '../../util/ModelUtil';
|
||||
|
||||
|
||||
/**
|
||||
* Sub class of the AutoResize module which implements a BPMN
|
||||
* specific resize function.
|
||||
*/
|
||||
export default function BpmnAutoResize(injector) {
|
||||
|
||||
injector.invoke(AutoResize, this);
|
||||
}
|
||||
|
||||
BpmnAutoResize.$inject = [
|
||||
'injector'
|
||||
];
|
||||
|
||||
inherits(BpmnAutoResize, AutoResize);
|
||||
|
||||
|
||||
/**
|
||||
* Resize shapes and lanes.
|
||||
*
|
||||
* @param {djs.model.Shape} target
|
||||
* @param {Bounds} newBounds
|
||||
* @param {Object} hints
|
||||
*/
|
||||
BpmnAutoResize.prototype.resize = function(target, newBounds, hints) {
|
||||
|
||||
if (is(target, 'bpmn:Participant')) {
|
||||
this._modeling.resizeLane(target, newBounds, null, hints);
|
||||
} else {
|
||||
this._modeling.resizeShape(target, newBounds, null, hints);
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,51 @@
|
||||
import { is } from '../../util/ModelUtil';
|
||||
|
||||
import inherits from 'inherits';
|
||||
|
||||
import { forEach } from 'min-dash';
|
||||
|
||||
import AutoResizeProvider from 'diagram-js/lib/features/auto-resize/AutoResizeProvider';
|
||||
|
||||
|
||||
/**
|
||||
* This module is a provider for automatically resizing parent BPMN elements
|
||||
*/
|
||||
export default function BpmnAutoResizeProvider(eventBus, modeling) {
|
||||
AutoResizeProvider.call(this, eventBus);
|
||||
|
||||
this._modeling = modeling;
|
||||
}
|
||||
|
||||
inherits(BpmnAutoResizeProvider, AutoResizeProvider);
|
||||
|
||||
BpmnAutoResizeProvider.$inject = [
|
||||
'eventBus',
|
||||
'modeling'
|
||||
];
|
||||
|
||||
|
||||
/**
|
||||
* 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;
|
||||
};
|
||||
@@ -0,0 +1,12 @@
|
||||
import BpmnAutoResize from './BpmnAutoResize';
|
||||
import BpmnAutoResizeProvider from './BpmnAutoResizeProvider';
|
||||
|
||||
|
||||
export default {
|
||||
__init__: [
|
||||
'bpmnAutoResize',
|
||||
'bpmnAutoResizeProvider'
|
||||
],
|
||||
bpmnAutoResize: [ 'type', BpmnAutoResize ],
|
||||
bpmnAutoResizeProvider: [ 'type', BpmnAutoResizeProvider ]
|
||||
};
|
||||
@@ -0,0 +1,434 @@
|
||||
import {
|
||||
assign,
|
||||
forEach,
|
||||
isArray
|
||||
} from 'min-dash';
|
||||
|
||||
import {
|
||||
is
|
||||
} from '../../util/ModelUtil';
|
||||
|
||||
import {
|
||||
isExpanded,
|
||||
isEventSubProcess
|
||||
} from '../../util/DiUtil';
|
||||
|
||||
import {
|
||||
isAny
|
||||
} from '../modeling/util/ModelingUtil';
|
||||
|
||||
import {
|
||||
getChildLanes
|
||||
} from '../modeling/util/LaneUtil';
|
||||
|
||||
import {
|
||||
hasPrimaryModifier
|
||||
} from 'diagram-js/lib/util/Mouse';
|
||||
|
||||
|
||||
/**
|
||||
* A provider for BPMN 2.0 elements context pad
|
||||
*/
|
||||
export default function ContextPadProvider(
|
||||
config, injector, eventBus,
|
||||
contextPad, modeling, elementFactory,
|
||||
connect, create, popupMenu,
|
||||
canvas, rules, translate) {
|
||||
|
||||
config = config || {};
|
||||
|
||||
contextPad.registerProvider(this);
|
||||
|
||||
this._contextPad = contextPad;
|
||||
|
||||
this._modeling = modeling;
|
||||
|
||||
this._elementFactory = elementFactory;
|
||||
this._connect = connect;
|
||||
this._create = create;
|
||||
this._popupMenu = popupMenu;
|
||||
this._canvas = canvas;
|
||||
this._rules = rules;
|
||||
this._translate = translate;
|
||||
|
||||
if (config.autoPlace !== false) {
|
||||
this._autoPlace = injector.get('autoPlace', false);
|
||||
}
|
||||
|
||||
eventBus.on('create.end', 250, function(event) {
|
||||
var shape = event.context.shape;
|
||||
|
||||
if (!hasPrimaryModifier(event)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var entries = contextPad.getEntries(shape);
|
||||
|
||||
if (entries.replace) {
|
||||
entries.replace.action.click(event, shape);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ContextPadProvider.$inject = [
|
||||
'config.contextPad',
|
||||
'injector',
|
||||
'eventBus',
|
||||
'contextPad',
|
||||
'modeling',
|
||||
'elementFactory',
|
||||
'connect',
|
||||
'create',
|
||||
'popupMenu',
|
||||
'canvas',
|
||||
'rules',
|
||||
'translate'
|
||||
];
|
||||
|
||||
|
||||
ContextPadProvider.prototype.getContextPadEntries = function(element) {
|
||||
|
||||
var contextPad = this._contextPad,
|
||||
modeling = this._modeling,
|
||||
|
||||
elementFactory = this._elementFactory,
|
||||
connect = this._connect,
|
||||
create = this._create,
|
||||
popupMenu = this._popupMenu,
|
||||
canvas = this._canvas,
|
||||
rules = this._rules,
|
||||
autoPlace = this._autoPlace,
|
||||
translate = this._translate;
|
||||
|
||||
var actions = {};
|
||||
|
||||
if (element.type === 'label') {
|
||||
return actions;
|
||||
}
|
||||
|
||||
var businessObject = element.businessObject;
|
||||
|
||||
function startConnect(event, element) {
|
||||
connect.start(event, element);
|
||||
}
|
||||
|
||||
function removeElement(e) {
|
||||
modeling.removeElements([ element ]);
|
||||
}
|
||||
|
||||
function getReplaceMenuPosition(element) {
|
||||
|
||||
var Y_OFFSET = 5;
|
||||
|
||||
var diagramContainer = canvas.getContainer(),
|
||||
pad = contextPad.getPad(element).html;
|
||||
|
||||
var diagramRect = diagramContainer.getBoundingClientRect(),
|
||||
padRect = pad.getBoundingClientRect();
|
||||
|
||||
var top = padRect.top - diagramRect.top;
|
||||
var left = padRect.left - diagramRect.left;
|
||||
|
||||
var pos = {
|
||||
x: left,
|
||||
y: top + padRect.height + Y_OFFSET
|
||||
};
|
||||
|
||||
return pos;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Create an append action
|
||||
*
|
||||
* @param {String} type
|
||||
* @param {String} className
|
||||
* @param {String} [title]
|
||||
* @param {Object} [options]
|
||||
*
|
||||
* @return {Object} descriptor
|
||||
*/
|
||||
function appendAction(type, className, title, options) {
|
||||
|
||||
if (typeof title !== 'string') {
|
||||
options = title;
|
||||
title = translate('Append {type}', { type: type.replace(/^bpmn:/, '') });
|
||||
}
|
||||
|
||||
function appendStart(event, element) {
|
||||
|
||||
var shape = elementFactory.createShape(assign({ type: type }, options));
|
||||
create.start(event, shape, element);
|
||||
}
|
||||
|
||||
|
||||
var append = autoPlace ? function(event, element) {
|
||||
var shape = elementFactory.createShape(assign({ type: type }, options));
|
||||
|
||||
autoPlace.append(element, shape);
|
||||
} : appendStart;
|
||||
|
||||
|
||||
return {
|
||||
group: 'model',
|
||||
className: className,
|
||||
title: title,
|
||||
action: {
|
||||
dragstart: appendStart,
|
||||
click: append
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function splitLaneHandler(count) {
|
||||
|
||||
return function(event, element) {
|
||||
// actual split
|
||||
modeling.splitLane(element, count);
|
||||
|
||||
// refresh context pad after split to
|
||||
// get rid of split icons
|
||||
contextPad.open(element, true);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
if (isAny(businessObject, [ 'bpmn:Lane', 'bpmn:Participant' ]) && isExpanded(businessObject)) {
|
||||
|
||||
var childLanes = getChildLanes(element);
|
||||
|
||||
assign(actions, {
|
||||
'lane-insert-above': {
|
||||
group: 'lane-insert-above',
|
||||
className: 'bpmn-icon-lane-insert-above',
|
||||
title: translate('Add Lane above'),
|
||||
action: {
|
||||
click: function(event, element) {
|
||||
modeling.addLane(element, 'top');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (childLanes.length < 2) {
|
||||
|
||||
if (element.height >= 120) {
|
||||
assign(actions, {
|
||||
'lane-divide-two': {
|
||||
group: 'lane-divide',
|
||||
className: 'bpmn-icon-lane-divide-two',
|
||||
title: translate('Divide into two Lanes'),
|
||||
action: {
|
||||
click: splitLaneHandler(2)
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (element.height >= 180) {
|
||||
assign(actions, {
|
||||
'lane-divide-three': {
|
||||
group: 'lane-divide',
|
||||
className: 'bpmn-icon-lane-divide-three',
|
||||
title: translate('Divide into three Lanes'),
|
||||
action: {
|
||||
click: splitLaneHandler(3)
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
assign(actions, {
|
||||
'lane-insert-below': {
|
||||
group: 'lane-insert-below',
|
||||
className: 'bpmn-icon-lane-insert-below',
|
||||
title: translate('Add Lane below'),
|
||||
action: {
|
||||
click: function(event, element) {
|
||||
modeling.addLane(element, 'bottom');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
if (is(businessObject, 'bpmn:FlowNode')) {
|
||||
|
||||
if (is(businessObject, 'bpmn:EventBasedGateway')) {
|
||||
|
||||
assign(actions, {
|
||||
'append.receive-task': appendAction(
|
||||
'bpmn:ReceiveTask',
|
||||
'bpmn-icon-receive-task'
|
||||
),
|
||||
'append.message-intermediate-event': appendAction(
|
||||
'bpmn:IntermediateCatchEvent',
|
||||
'bpmn-icon-intermediate-event-catch-message',
|
||||
translate('Append MessageIntermediateCatchEvent'),
|
||||
{ eventDefinitionType: 'bpmn:MessageEventDefinition' }
|
||||
),
|
||||
'append.timer-intermediate-event': appendAction(
|
||||
'bpmn:IntermediateCatchEvent',
|
||||
'bpmn-icon-intermediate-event-catch-timer',
|
||||
translate('Append TimerIntermediateCatchEvent'),
|
||||
{ eventDefinitionType: 'bpmn:TimerEventDefinition' }
|
||||
),
|
||||
'append.condtion-intermediate-event': appendAction(
|
||||
'bpmn:IntermediateCatchEvent',
|
||||
'bpmn-icon-intermediate-event-catch-condition',
|
||||
translate('Append ConditionIntermediateCatchEvent'),
|
||||
{ eventDefinitionType: 'bpmn:ConditionalEventDefinition' }
|
||||
),
|
||||
'append.signal-intermediate-event': appendAction(
|
||||
'bpmn:IntermediateCatchEvent',
|
||||
'bpmn-icon-intermediate-event-catch-signal',
|
||||
translate('Append SignalIntermediateCatchEvent'),
|
||||
{ eventDefinitionType: 'bpmn:SignalEventDefinition' }
|
||||
)
|
||||
});
|
||||
} else
|
||||
|
||||
if (isEventType(businessObject, 'bpmn:BoundaryEvent', 'bpmn:CompensateEventDefinition')) {
|
||||
|
||||
assign(actions, {
|
||||
'append.compensation-activity':
|
||||
appendAction(
|
||||
'bpmn:Task',
|
||||
'bpmn-icon-task',
|
||||
translate('Append compensation activity'),
|
||||
{
|
||||
isForCompensation: true
|
||||
}
|
||||
)
|
||||
});
|
||||
} else
|
||||
|
||||
if (!is(businessObject, 'bpmn:EndEvent') &&
|
||||
!businessObject.isForCompensation &&
|
||||
!isEventType(businessObject, 'bpmn:IntermediateThrowEvent', 'bpmn:LinkEventDefinition') &&
|
||||
!isEventSubProcess(businessObject)) {
|
||||
|
||||
assign(actions, {
|
||||
'append.end-event': appendAction(
|
||||
'bpmn:EndEvent',
|
||||
'bpmn-icon-end-event-none',
|
||||
translate('Append EndEvent')
|
||||
),
|
||||
'append.gateway': appendAction(
|
||||
'bpmn:ExclusiveGateway',
|
||||
'bpmn-icon-gateway-none',
|
||||
translate('Append Gateway')
|
||||
),
|
||||
'append.append-task': appendAction(
|
||||
'bpmn:Task',
|
||||
'bpmn-icon-task',
|
||||
translate('Append Task')
|
||||
),
|
||||
'append.intermediate-event': appendAction(
|
||||
'bpmn:IntermediateThrowEvent',
|
||||
'bpmn-icon-intermediate-event-none',
|
||||
translate('Append Intermediate/Boundary Event')
|
||||
)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (!popupMenu.isEmpty(element, 'bpmn-replace')) {
|
||||
// Replace menu entry
|
||||
assign(actions, {
|
||||
'replace': {
|
||||
group: 'edit',
|
||||
className: 'bpmn-icon-screw-wrench',
|
||||
title: translate('Change type'),
|
||||
action: {
|
||||
click: function(event, element) {
|
||||
|
||||
var position = assign(getReplaceMenuPosition(element), {
|
||||
cursor: { x: event.x, y: event.y }
|
||||
});
|
||||
|
||||
popupMenu.open(element, 'bpmn-replace', position);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (isAny(businessObject, [
|
||||
'bpmn:FlowNode',
|
||||
'bpmn:InteractionNode',
|
||||
'bpmn:DataObjectReference',
|
||||
'bpmn:DataStoreReference'
|
||||
])) {
|
||||
|
||||
assign(actions, {
|
||||
'append.text-annotation': appendAction('bpmn:TextAnnotation', 'bpmn-icon-text-annotation'),
|
||||
|
||||
'connect': {
|
||||
group: 'connect',
|
||||
className: 'bpmn-icon-connection-multi',
|
||||
title: translate('Connect using ' +
|
||||
(businessObject.isForCompensation ? '' : 'Sequence/MessageFlow or ') +
|
||||
'Association'),
|
||||
action: {
|
||||
click: startConnect,
|
||||
dragstart: startConnect
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (isAny(businessObject, [ 'bpmn:DataObjectReference', 'bpmn:DataStoreReference' ])) {
|
||||
assign(actions, {
|
||||
'connect': {
|
||||
group: 'connect',
|
||||
className: 'bpmn-icon-connection-multi',
|
||||
title: translate('Connect using DataInputAssociation'),
|
||||
action: {
|
||||
click: startConnect,
|
||||
dragstart: startConnect
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// delete element entry, only show if allowed by rules
|
||||
var deleteAllowed = rules.allowed('elements.delete', { elements: [ element ] });
|
||||
|
||||
if (isArray(deleteAllowed)) {
|
||||
// was the element returned as a deletion candidate?
|
||||
deleteAllowed = deleteAllowed[0] === element;
|
||||
}
|
||||
|
||||
if (deleteAllowed) {
|
||||
assign(actions, {
|
||||
'delete': {
|
||||
group: 'edit',
|
||||
className: 'bpmn-icon-trash',
|
||||
title: translate('Remove'),
|
||||
action: {
|
||||
click: removeElement
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return actions;
|
||||
};
|
||||
|
||||
function isEventType(eventBo, type, definition) {
|
||||
|
||||
var isType = eventBo.$instanceOf(type);
|
||||
var isDefinition = false;
|
||||
|
||||
var definitions = eventBo.eventDefinitions || [];
|
||||
forEach(definitions, function(def) {
|
||||
if (def.$type === definition) {
|
||||
isDefinition = true;
|
||||
}
|
||||
});
|
||||
|
||||
return isType && isDefinition;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import DirectEditingModule from 'diagram-js-direct-editing';
|
||||
import ContextPadModule from 'diagram-js/lib/features/context-pad';
|
||||
import SelectionModule from 'diagram-js/lib/features/selection';
|
||||
import ConnectModule from 'diagram-js/lib/features/connect';
|
||||
import CreateModule from 'diagram-js/lib/features/create';
|
||||
import PopupMenuModule from '../popup-menu';
|
||||
|
||||
import ContextPadProvider from './ContextPadProvider';
|
||||
|
||||
export default {
|
||||
__depends__: [
|
||||
DirectEditingModule,
|
||||
ContextPadModule,
|
||||
SelectionModule,
|
||||
ConnectModule,
|
||||
CreateModule,
|
||||
PopupMenuModule
|
||||
],
|
||||
__init__: [ 'contextPadProvider' ],
|
||||
contextPadProvider: [ 'type', ContextPadProvider ]
|
||||
};
|
||||
@@ -0,0 +1,155 @@
|
||||
import {
|
||||
getBusinessObject,
|
||||
is
|
||||
} from '../../util/ModelUtil';
|
||||
|
||||
import ModelCloneHelper from '../../util/model/ModelCloneHelper';
|
||||
|
||||
import {
|
||||
getProperties,
|
||||
IGNORED_PROPERTIES
|
||||
} from '../../util/model/ModelCloneUtils';
|
||||
|
||||
import {
|
||||
filter,
|
||||
forEach
|
||||
} from 'min-dash';
|
||||
|
||||
function setProperties(descriptor, data, properties) {
|
||||
forEach(properties, function(property) {
|
||||
if (data[property] !== undefined) {
|
||||
descriptor[property] = data[property];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function removeProperties(element, properties) {
|
||||
forEach(properties, function(prop) {
|
||||
if (element[prop]) {
|
||||
delete element[prop];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export default function BpmnCopyPaste(
|
||||
bpmnFactory, eventBus, copyPaste,
|
||||
clipboard, canvas, bpmnRules) {
|
||||
|
||||
var helper = new ModelCloneHelper(eventBus, bpmnFactory);
|
||||
|
||||
copyPaste.registerDescriptor(function(element, descriptor) {
|
||||
var businessObject = descriptor.oldBusinessObject = getBusinessObject(element);
|
||||
|
||||
var colors = {};
|
||||
|
||||
descriptor.type = element.type;
|
||||
|
||||
setProperties(descriptor, businessObject.di, [ 'isExpanded' ]);
|
||||
|
||||
setProperties(colors, businessObject.di, [ 'fill', 'stroke' ]);
|
||||
|
||||
descriptor.colors = colors;
|
||||
|
||||
if (element.type === 'label') {
|
||||
return descriptor;
|
||||
}
|
||||
|
||||
setProperties(descriptor, businessObject, [
|
||||
'processRef',
|
||||
'triggeredByEvent'
|
||||
]);
|
||||
|
||||
if (businessObject.default) {
|
||||
descriptor.default = businessObject.default.id;
|
||||
}
|
||||
|
||||
return descriptor;
|
||||
});
|
||||
|
||||
eventBus.on('element.paste', function(context) {
|
||||
var descriptor = context.descriptor,
|
||||
createdElements = context.createdElements,
|
||||
parent = descriptor.parent,
|
||||
rootElement = canvas.getRootElement(),
|
||||
oldBusinessObject = descriptor.oldBusinessObject,
|
||||
newBusinessObject,
|
||||
source,
|
||||
target,
|
||||
canConnect;
|
||||
|
||||
newBusinessObject = bpmnFactory.create(oldBusinessObject.$type);
|
||||
|
||||
var properties = getProperties(oldBusinessObject.$descriptor);
|
||||
|
||||
properties = filter(properties, function(property) {
|
||||
return IGNORED_PROPERTIES.indexOf(property.replace(/bpmn:/, '')) === -1;
|
||||
});
|
||||
|
||||
descriptor.businessObject = helper.clone(oldBusinessObject, newBusinessObject, properties);
|
||||
|
||||
if (descriptor.type === 'label') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (is(parent, 'bpmn:Process')) {
|
||||
descriptor.parent = is(rootElement, 'bpmn:Collaboration') ? rootElement : parent;
|
||||
}
|
||||
|
||||
if (descriptor.type === 'bpmn:DataOutputAssociation' ||
|
||||
descriptor.type === 'bpmn:DataInputAssociation' ||
|
||||
descriptor.type === 'bpmn:MessageFlow') {
|
||||
descriptor.parent = rootElement;
|
||||
}
|
||||
|
||||
if (is(parent, 'bpmn:Lane')) {
|
||||
descriptor.parent = parent.parent;
|
||||
}
|
||||
|
||||
// make sure that the correct type of connection is created
|
||||
if (descriptor.waypoints) {
|
||||
source = createdElements[descriptor.source];
|
||||
target = createdElements[descriptor.target];
|
||||
|
||||
if (source && target) {
|
||||
source = source.element;
|
||||
target = target.element;
|
||||
}
|
||||
|
||||
canConnect = bpmnRules.canConnect(source, target);
|
||||
|
||||
if (canConnect) {
|
||||
descriptor.type = canConnect.type;
|
||||
}
|
||||
}
|
||||
|
||||
// remove the id or else we cannot paste multiple times
|
||||
delete newBusinessObject.id;
|
||||
|
||||
// assign an ID
|
||||
bpmnFactory._ensureId(newBusinessObject);
|
||||
|
||||
if (descriptor.type === 'bpmn:Participant' && descriptor.processRef) {
|
||||
descriptor.processRef = newBusinessObject.processRef = bpmnFactory.create('bpmn:Process');
|
||||
}
|
||||
|
||||
setProperties(newBusinessObject, descriptor, [
|
||||
'isExpanded',
|
||||
'triggeredByEvent'
|
||||
]);
|
||||
|
||||
removeProperties(descriptor, [
|
||||
'triggeredByEvent'
|
||||
]);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
BpmnCopyPaste.$inject = [
|
||||
'bpmnFactory',
|
||||
'eventBus',
|
||||
'copyPaste',
|
||||
'clipboard',
|
||||
'canvas',
|
||||
'bpmnRules'
|
||||
];
|
||||
@@ -0,0 +1,11 @@
|
||||
import CopyPasteModule from 'diagram-js/lib/features/copy-paste';
|
||||
|
||||
import BpmnCopyPaste from './BpmnCopyPaste';
|
||||
|
||||
export default {
|
||||
__depends__: [
|
||||
CopyPasteModule
|
||||
],
|
||||
__init__: [ 'bpmnCopyPaste' ],
|
||||
bpmnCopyPaste: [ 'type', BpmnCopyPaste ]
|
||||
};
|
||||
@@ -0,0 +1,35 @@
|
||||
import {
|
||||
filter
|
||||
} from 'min-dash';
|
||||
|
||||
import {
|
||||
isAny
|
||||
} from '../modeling/util/ModelingUtil';
|
||||
|
||||
|
||||
/**
|
||||
* Registers element exclude filters for elements that
|
||||
* currently do not support distribution.
|
||||
*/
|
||||
export default function BpmnDistributeElements(distributeElements) {
|
||||
|
||||
distributeElements.registerFilter(function(elements) {
|
||||
return filter(elements, function(element) {
|
||||
var cannotDistribute = isAny(element, [
|
||||
'bpmn:Association',
|
||||
'bpmn:BoundaryEvent',
|
||||
'bpmn:DataInputAssociation',
|
||||
'bpmn:DataOutputAssociation',
|
||||
'bpmn:Lane',
|
||||
'bpmn:MessageFlow',
|
||||
'bpmn:Participant',
|
||||
'bpmn:SequenceFlow',
|
||||
'bpmn:TextAnnotation'
|
||||
]);
|
||||
|
||||
return !(element.labelTarget || cannotDistribute);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
BpmnDistributeElements.$inject = [ 'distributeElements' ];
|
||||
@@ -0,0 +1,12 @@
|
||||
import DistributeElementsModule from 'diagram-js/lib/features/distribute-elements';
|
||||
|
||||
import BpmnDistributeElements from './BpmnDistributeElements';
|
||||
|
||||
|
||||
export default {
|
||||
__depends__: [
|
||||
DistributeElementsModule
|
||||
],
|
||||
__init__: [ 'bpmnDistributeElements' ],
|
||||
bpmnDistributeElements: [ 'type', BpmnDistributeElements ]
|
||||
};
|
||||
@@ -0,0 +1,176 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import EditorActions from 'diagram-js/lib/features/editor-actions/EditorActions';
|
||||
|
||||
import { filter } from 'min-dash';
|
||||
|
||||
import { is } from '../../util/ModelUtil';
|
||||
|
||||
import {
|
||||
getBBox
|
||||
} from 'diagram-js/lib/util/Elements';
|
||||
|
||||
|
||||
/**
|
||||
* Registers and executes BPMN specific editor actions.
|
||||
*
|
||||
* @param {Injector} injector
|
||||
*/
|
||||
export default function BpmnEditorActions(injector) {
|
||||
injector.invoke(EditorActions, this);
|
||||
}
|
||||
|
||||
inherits(BpmnEditorActions, EditorActions);
|
||||
|
||||
BpmnEditorActions.$inject = [
|
||||
'injector'
|
||||
];
|
||||
|
||||
/**
|
||||
* Register default actions.
|
||||
*
|
||||
* @param {Injector} injector
|
||||
*/
|
||||
BpmnEditorActions.prototype._registerDefaultActions = function(injector) {
|
||||
|
||||
// (0) invoke super method
|
||||
|
||||
EditorActions.prototype._registerDefaultActions.call(this, injector);
|
||||
|
||||
// (1) retrieve optional components to integrate with
|
||||
|
||||
var canvas = injector.get('canvas', false);
|
||||
var elementRegistry = injector.get('elementRegistry', false);
|
||||
var selection = injector.get('selection', false);
|
||||
var spaceTool = injector.get('spaceTool', false);
|
||||
var lassoTool = injector.get('lassoTool', false);
|
||||
var handTool = injector.get('handTool', false);
|
||||
var globalConnect = injector.get('globalConnect', false);
|
||||
var distributeElements = injector.get('distributeElements', false);
|
||||
var alignElements = injector.get('alignElements', false);
|
||||
var directEditing = injector.get('directEditing', false);
|
||||
var searchPad = injector.get('searchPad', false);
|
||||
var modeling = injector.get('modeling', false);
|
||||
|
||||
// (2) check components and register actions
|
||||
|
||||
if (canvas && elementRegistry && selection) {
|
||||
this._registerAction('selectElements', function() {
|
||||
// select all elements except for the invisible
|
||||
// root element
|
||||
var rootElement = canvas.getRootElement();
|
||||
|
||||
var elements = elementRegistry.filter(function(element) {
|
||||
return element !== rootElement;
|
||||
});
|
||||
|
||||
selection.select(elements);
|
||||
|
||||
return elements;
|
||||
});
|
||||
}
|
||||
|
||||
if (spaceTool) {
|
||||
this._registerAction('spaceTool', function() {
|
||||
spaceTool.toggle();
|
||||
});
|
||||
}
|
||||
|
||||
if (lassoTool) {
|
||||
this._registerAction('lassoTool', function() {
|
||||
lassoTool.toggle();
|
||||
});
|
||||
}
|
||||
|
||||
if (handTool) {
|
||||
this._registerAction('handTool', function() {
|
||||
handTool.toggle();
|
||||
});
|
||||
}
|
||||
|
||||
if (globalConnect) {
|
||||
this._registerAction('globalConnectTool', function() {
|
||||
globalConnect.toggle();
|
||||
});
|
||||
}
|
||||
|
||||
if (selection && distributeElements) {
|
||||
this._registerAction('distributeElements', function(opts) {
|
||||
var currentSelection = selection.get(),
|
||||
type = opts.type;
|
||||
|
||||
if (currentSelection.length) {
|
||||
distributeElements.trigger(currentSelection, type);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (selection && alignElements) {
|
||||
this._registerAction('alignElements', function(opts) {
|
||||
var currentSelection = selection.get(),
|
||||
aligneableElements = [],
|
||||
type = opts.type;
|
||||
|
||||
if (currentSelection.length) {
|
||||
aligneableElements = filter(currentSelection, function(element) {
|
||||
return !is(element, 'bpmn:Lane');
|
||||
});
|
||||
|
||||
alignElements.trigger(aligneableElements, type);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (selection && modeling) {
|
||||
this._registerAction('setColor', function(opts) {
|
||||
var currentSelection = selection.get();
|
||||
|
||||
if (currentSelection.length) {
|
||||
modeling.setColor(currentSelection, opts);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (selection && directEditing) {
|
||||
this._registerAction('directEditing', function() {
|
||||
var currentSelection = selection.get();
|
||||
|
||||
if (currentSelection.length) {
|
||||
directEditing.activate(currentSelection[0]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (searchPad) {
|
||||
this._registerAction('find', function() {
|
||||
searchPad.toggle();
|
||||
});
|
||||
}
|
||||
|
||||
if (canvas && modeling) {
|
||||
this._registerAction('moveToOrigin', function() {
|
||||
var rootElement = canvas.getRootElement(),
|
||||
boundingBox,
|
||||
elements;
|
||||
|
||||
if (is(rootElement, 'bpmn:Collaboration')) {
|
||||
elements = elementRegistry.filter(function(element) {
|
||||
return is(element.parent, 'bpmn:Collaboration');
|
||||
});
|
||||
} else {
|
||||
elements = elementRegistry.filter(function(element) {
|
||||
return element !== rootElement && !is(element.parent, 'bpmn:SubProcess');
|
||||
});
|
||||
}
|
||||
|
||||
boundingBox = getBBox(elements);
|
||||
|
||||
modeling.moveElements(
|
||||
elements,
|
||||
{ x: -boundingBox.x, y: -boundingBox.y },
|
||||
rootElement
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
@@ -0,0 +1,10 @@
|
||||
import EditorActionsModule from 'diagram-js/lib/features/editor-actions';
|
||||
|
||||
import BpmnEditorActions from './BpmnEditorActions';
|
||||
|
||||
export default {
|
||||
__depends__: [
|
||||
EditorActionsModule
|
||||
],
|
||||
editorActions: [ 'type', BpmnEditorActions ]
|
||||
};
|
||||
@@ -0,0 +1,25 @@
|
||||
import { isAny } from '../modeling/util/ModelingUtil';
|
||||
|
||||
export default function BpmnGridSnapping(eventBus) {
|
||||
eventBus.on([
|
||||
'create.init',
|
||||
'shape.move.init'
|
||||
], function(event) {
|
||||
var context = event.context,
|
||||
shape = event.shape;
|
||||
|
||||
if (isAny(shape, [
|
||||
'bpmn:Participant',
|
||||
'bpmn:SubProcess',
|
||||
'bpmn:TextAnnotation'
|
||||
])) {
|
||||
if (!context.gridSnappingContext) {
|
||||
context.gridSnappingContext = {};
|
||||
}
|
||||
|
||||
context.gridSnappingContext.snapLocation = 'top-left';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
BpmnGridSnapping.$inject = [ 'eventBus' ];
|
||||
@@ -0,0 +1,57 @@
|
||||
import { getNewShapePosition } from '../../auto-place/AutoPlaceUtil';
|
||||
|
||||
import { getMid } from 'diagram-js/lib/layout/LayoutUtil';
|
||||
import { is } from '../../../util/ModelUtil';
|
||||
|
||||
|
||||
export default function AutoPlaceBehavior(eventBus, gridSnapping) {
|
||||
eventBus.on('autoPlace', function(context) {
|
||||
var source = context.source,
|
||||
sourceMid = getMid(source),
|
||||
shape = context.shape;
|
||||
|
||||
var position = getNewShapePosition(source, shape);
|
||||
|
||||
[ 'x', 'y' ].forEach(function(axis) {
|
||||
var options = {};
|
||||
|
||||
// do not snap if x/y equal
|
||||
if (position[ axis ] === sourceMid[ axis ]) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (position[ axis ] > sourceMid[ axis ]) {
|
||||
options.min = position[ axis ];
|
||||
} else {
|
||||
options.max = position[ axis ];
|
||||
}
|
||||
|
||||
if (is(shape, 'bpmn:TextAnnotation')) {
|
||||
|
||||
if (isHorizontal(axis)) {
|
||||
options.offset = -shape.width / 2;
|
||||
} else {
|
||||
options.offset = -shape.height / 2;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
position[ axis ] = gridSnapping.snapValue(position[ axis ], options);
|
||||
|
||||
});
|
||||
|
||||
// must be returned to be considered by auto place
|
||||
return position;
|
||||
});
|
||||
}
|
||||
|
||||
AutoPlaceBehavior.$inject = [
|
||||
'eventBus',
|
||||
'gridSnapping'
|
||||
];
|
||||
|
||||
// helpers //////////
|
||||
|
||||
function isHorizontal(axis) {
|
||||
return axis === 'x';
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import { is } from '../../../util/ModelUtil';
|
||||
|
||||
var HIGHER_PRIORITY = 1750;
|
||||
|
||||
|
||||
export default function CreateParticipantBehavior(canvas, eventBus, gridSnapping) {
|
||||
eventBus.on([
|
||||
'create.start',
|
||||
'shape.move.start'
|
||||
], HIGHER_PRIORITY, function(event) {
|
||||
var context = event.context,
|
||||
shape = context.shape,
|
||||
rootElement = canvas.getRootElement();
|
||||
|
||||
if (!is(shape, 'bpmn:Participant') ||
|
||||
!is(rootElement, 'bpmn:Process') ||
|
||||
!rootElement.children.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
var createConstraints = context.createConstraints;
|
||||
|
||||
if (!createConstraints) {
|
||||
return;
|
||||
}
|
||||
|
||||
shape.width = gridSnapping.snapValue(shape.width, { min: shape.width });
|
||||
shape.height = gridSnapping.snapValue(shape.height, { min: shape.height });
|
||||
});
|
||||
}
|
||||
|
||||
CreateParticipantBehavior.$inject = [
|
||||
'canvas',
|
||||
'eventBus',
|
||||
'gridSnapping'
|
||||
];
|
||||
@@ -0,0 +1,144 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
import { pointsAligned } from 'diagram-js/lib/util/Geometry';
|
||||
|
||||
import {
|
||||
assign
|
||||
} from 'min-dash';
|
||||
|
||||
var HIGH_PRIORITY = 3000;
|
||||
|
||||
|
||||
/**
|
||||
* Snaps connections with Manhattan layout.
|
||||
*/
|
||||
export default function LayoutConnectionBehavior(eventBus, gridSnapping, modeling) {
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
this._gridSnapping = gridSnapping;
|
||||
|
||||
var self = this;
|
||||
|
||||
this.postExecuted([
|
||||
'connection.create',
|
||||
'connection.layout'
|
||||
], HIGH_PRIORITY, function(event) {
|
||||
var context = event.context,
|
||||
connection = context.connection,
|
||||
hints = context.hints || {},
|
||||
waypoints = connection.waypoints;
|
||||
|
||||
if (hints.connectionStart || hints.connectionEnd) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!hasMiddleSegments(waypoints)) {
|
||||
return;
|
||||
}
|
||||
|
||||
modeling.updateWaypoints(connection, self.snapMiddleSegments(waypoints));
|
||||
});
|
||||
}
|
||||
|
||||
LayoutConnectionBehavior.$inject = [
|
||||
'eventBus',
|
||||
'gridSnapping',
|
||||
'modeling'
|
||||
];
|
||||
|
||||
inherits(LayoutConnectionBehavior, CommandInterceptor);
|
||||
|
||||
/**
|
||||
* Snap middle segments of a given connection.
|
||||
*
|
||||
* @param {Array<Point>} waypoints
|
||||
*
|
||||
* @returns {Array<Point>}
|
||||
*/
|
||||
LayoutConnectionBehavior.prototype.snapMiddleSegments = function(waypoints) {
|
||||
var gridSnapping = this._gridSnapping,
|
||||
snapped;
|
||||
|
||||
waypoints = waypoints.slice();
|
||||
|
||||
for (var i = 1; i < waypoints.length - 2; i++) {
|
||||
|
||||
snapped = snapSegment(gridSnapping, waypoints[i], waypoints[i + 1]);
|
||||
|
||||
waypoints[i] = snapped[0];
|
||||
waypoints[i + 1] = snapped[1];
|
||||
}
|
||||
|
||||
return waypoints;
|
||||
};
|
||||
|
||||
|
||||
// helpers //////////
|
||||
|
||||
/**
|
||||
* Check wether a connection has a middle segments.
|
||||
*
|
||||
* @param {Array} waypoints
|
||||
*
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function hasMiddleSegments(waypoints) {
|
||||
return waypoints.length > 3;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check wether an alignment is horizontal.
|
||||
*
|
||||
* @param {string} aligned
|
||||
*
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function horizontallyAligned(aligned) {
|
||||
return aligned === 'h';
|
||||
}
|
||||
|
||||
/**
|
||||
* Check wether an alignment is vertical.
|
||||
*
|
||||
* @param {string} aligned
|
||||
*
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function verticallyAligned(aligned) {
|
||||
return aligned === 'v';
|
||||
}
|
||||
|
||||
/**
|
||||
* Get middle segments from a given connection.
|
||||
*
|
||||
* @param {Array} waypoints
|
||||
*
|
||||
* @returns {Array}
|
||||
*/
|
||||
function snapSegment(gridSnapping, segmentStart, segmentEnd) {
|
||||
|
||||
var aligned = pointsAligned(segmentStart, segmentEnd);
|
||||
|
||||
var snapped = {};
|
||||
|
||||
if (horizontallyAligned(aligned)) {
|
||||
|
||||
// snap horizontally
|
||||
snapped.y = gridSnapping.snapValue(segmentStart.y);
|
||||
}
|
||||
|
||||
if (verticallyAligned(aligned)) {
|
||||
|
||||
// snap vertically
|
||||
snapped.x = gridSnapping.snapValue(segmentStart.x);
|
||||
}
|
||||
|
||||
if ('x' in snapped || 'y' in snapped) {
|
||||
segmentStart = assign({}, segmentStart, snapped);
|
||||
segmentEnd = assign({}, segmentEnd, snapped);
|
||||
}
|
||||
|
||||
return [ segmentStart, segmentEnd ];
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import AutoPlaceBehavior from './AutoPlaceBehavior';
|
||||
import CreateParticipantBehavior from './CreateParticipantBehavior';
|
||||
import LayoutConnectionBehavior from './LayoutConnectionBehavior';
|
||||
|
||||
export default {
|
||||
__init__: [
|
||||
'gridSnappingAutoPlaceBehavior',
|
||||
'gridSnappingCreateParticipantBehavior',
|
||||
'gridSnappingLayoutConnectionBehavior',
|
||||
],
|
||||
gridSnappingAutoPlaceBehavior: [ 'type', AutoPlaceBehavior ],
|
||||
gridSnappingCreateParticipantBehavior: [ 'type', CreateParticipantBehavior ],
|
||||
gridSnappingLayoutConnectionBehavior: [ 'type', LayoutConnectionBehavior ]
|
||||
};
|
||||
@@ -0,0 +1,13 @@
|
||||
import BpmnGridSnapping from './BpmnGridSnapping';
|
||||
import GridSnappingModule from 'diagram-js/lib/features/grid-snapping';
|
||||
|
||||
import GridSnappingBehaviorModule from './behavior';
|
||||
|
||||
export default {
|
||||
__depends__: [
|
||||
GridSnappingModule,
|
||||
GridSnappingBehaviorModule
|
||||
],
|
||||
__init__: [ 'bpmnGridSnapping' ],
|
||||
bpmnGridSnapping: [ 'type', BpmnGridSnapping ]
|
||||
};
|
||||
@@ -0,0 +1,158 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import KeyboardBindings from 'diagram-js/lib/features/keyboard/KeyboardBindings';
|
||||
|
||||
|
||||
/**
|
||||
* BPMN 2.0 specific keyboard bindings.
|
||||
*
|
||||
* @param {Injector} injector
|
||||
*/
|
||||
export default function BpmnKeyboardBindings(injector) {
|
||||
injector.invoke(KeyboardBindings, this);
|
||||
}
|
||||
|
||||
inherits(BpmnKeyboardBindings, KeyboardBindings);
|
||||
|
||||
BpmnKeyboardBindings.$inject = [
|
||||
'injector'
|
||||
];
|
||||
|
||||
|
||||
/**
|
||||
* Register available keyboard bindings.
|
||||
*
|
||||
* @param {Keyboard} keyboard
|
||||
* @param {EditorActions} editorActions
|
||||
*/
|
||||
BpmnKeyboardBindings.prototype.registerBindings = function(keyboard, editorActions) {
|
||||
|
||||
// inherit default bindings
|
||||
KeyboardBindings.prototype.registerBindings.call(this, keyboard, editorActions);
|
||||
|
||||
/**
|
||||
* Add keyboard binding if respective editor action
|
||||
* is registered.
|
||||
*
|
||||
* @param {String} action name
|
||||
* @param {Function} fn that implements the key binding
|
||||
*/
|
||||
function addListener(action, fn) {
|
||||
|
||||
if (editorActions.isRegistered(action)) {
|
||||
keyboard.addListener(fn);
|
||||
}
|
||||
}
|
||||
|
||||
// select all elements
|
||||
// CTRL + A
|
||||
addListener('selectElements', function(context) {
|
||||
|
||||
var event = context.keyEvent;
|
||||
|
||||
if (keyboard.isKey(['a', 'A'], event) && keyboard.isCmd(event)) {
|
||||
editorActions.trigger('selectElements');
|
||||
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
// search labels
|
||||
// CTRL + F
|
||||
addListener('find', function(context) {
|
||||
|
||||
var event = context.keyEvent;
|
||||
|
||||
if (keyboard.isKey(['f', 'F'], event) && keyboard.isCmd(event)) {
|
||||
editorActions.trigger('find');
|
||||
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
// activate space tool
|
||||
// S
|
||||
addListener('spaceTool', function(context) {
|
||||
|
||||
var event = context.keyEvent;
|
||||
|
||||
if (keyboard.hasModifier(event)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (keyboard.isKey(['s', 'S'], event)) {
|
||||
editorActions.trigger('spaceTool');
|
||||
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
// activate lasso tool
|
||||
// L
|
||||
addListener('lassoTool', function(context) {
|
||||
|
||||
var event = context.keyEvent;
|
||||
|
||||
if (keyboard.hasModifier(event)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (keyboard.isKey(['l', 'L'], event)) {
|
||||
editorActions.trigger('lassoTool');
|
||||
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
// activate hand tool
|
||||
// H
|
||||
addListener('handTool', function(context) {
|
||||
|
||||
var event = context.keyEvent;
|
||||
|
||||
if (keyboard.hasModifier(event)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (keyboard.isKey(['h', 'H'], event)) {
|
||||
editorActions.trigger('handTool');
|
||||
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
// activate global connect tool
|
||||
// C
|
||||
addListener('globalConnectTool', function(context) {
|
||||
|
||||
var event = context.keyEvent;
|
||||
|
||||
if (keyboard.hasModifier(event)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (keyboard.isKey(['c', 'C'], event)) {
|
||||
editorActions.trigger('globalConnectTool');
|
||||
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
// activate direct editing
|
||||
// E
|
||||
addListener('directEditing', function(context) {
|
||||
|
||||
var event = context.keyEvent;
|
||||
|
||||
if (keyboard.hasModifier(event)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (keyboard.isKey(['e', 'E'], event)) {
|
||||
editorActions.trigger('directEditing');
|
||||
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
import KeyboardModule from 'diagram-js/lib/features/keyboard';
|
||||
|
||||
import BpmnKeyboardBindings from './BpmnKeyboardBindings';
|
||||
|
||||
export default {
|
||||
__depends__: [
|
||||
KeyboardModule
|
||||
],
|
||||
__init__: [ 'keyboardBindings' ],
|
||||
keyboardBindings: [ 'type', BpmnKeyboardBindings ]
|
||||
};
|
||||
@@ -0,0 +1,138 @@
|
||||
import {
|
||||
append as svgAppend,
|
||||
attr as svgAttr,
|
||||
create as svgCreate,
|
||||
remove as svgRemove
|
||||
} from 'tiny-svg';
|
||||
|
||||
import {
|
||||
getBusinessObject,
|
||||
is
|
||||
} from '../../util/ModelUtil';
|
||||
|
||||
import {
|
||||
translate
|
||||
} from 'diagram-js/lib/util/SvgTransformUtil';
|
||||
|
||||
var MARKER_HIDDEN = 'djs-element-hidden',
|
||||
MARKER_LABEL_HIDDEN = 'djs-label-hidden';
|
||||
|
||||
|
||||
export default function LabelEditingPreview(
|
||||
eventBus, canvas, elementRegistry,
|
||||
pathMap) {
|
||||
|
||||
var self = this;
|
||||
|
||||
var defaultLayer = canvas.getDefaultLayer();
|
||||
|
||||
var element, absoluteElementBBox, gfx;
|
||||
|
||||
eventBus.on('directEditing.activate', function(context) {
|
||||
var activeProvider = context.active;
|
||||
|
||||
element = activeProvider.element.label || activeProvider.element;
|
||||
|
||||
// text annotation
|
||||
if (is(element, 'bpmn:TextAnnotation')) {
|
||||
absoluteElementBBox = canvas.getAbsoluteBBox(element);
|
||||
|
||||
gfx = svgCreate('g');
|
||||
|
||||
var textPathData = pathMap.getScaledPath('TEXT_ANNOTATION', {
|
||||
xScaleFactor: 1,
|
||||
yScaleFactor: 1,
|
||||
containerWidth: element.width,
|
||||
containerHeight: element.height,
|
||||
position: {
|
||||
mx: 0.0,
|
||||
my: 0.0
|
||||
}
|
||||
});
|
||||
|
||||
var path = self.path = svgCreate('path');
|
||||
|
||||
svgAttr(path, {
|
||||
d: textPathData,
|
||||
strokeWidth: 2,
|
||||
stroke: getStrokeColor(element)
|
||||
});
|
||||
|
||||
svgAppend(gfx, path);
|
||||
|
||||
svgAppend(defaultLayer, gfx);
|
||||
|
||||
translate(gfx, element.x, element.y);
|
||||
}
|
||||
|
||||
if (is(element, 'bpmn:TextAnnotation') ||
|
||||
element.labelTarget) {
|
||||
canvas.addMarker(element, MARKER_HIDDEN);
|
||||
} else if (is(element, 'bpmn:Task') ||
|
||||
is(element, 'bpmn:CallActivity') ||
|
||||
is(element, 'bpmn:SubProcess') ||
|
||||
is(element, 'bpmn:Participant')) {
|
||||
canvas.addMarker(element, MARKER_LABEL_HIDDEN);
|
||||
}
|
||||
});
|
||||
|
||||
eventBus.on('directEditing.resize', function(context) {
|
||||
|
||||
// text annotation
|
||||
if (is(element, 'bpmn:TextAnnotation')) {
|
||||
var height = context.height,
|
||||
dy = context.dy;
|
||||
|
||||
var newElementHeight = Math.max(element.height / absoluteElementBBox.height * (height + dy), 0);
|
||||
|
||||
var textPathData = pathMap.getScaledPath('TEXT_ANNOTATION', {
|
||||
xScaleFactor: 1,
|
||||
yScaleFactor: 1,
|
||||
containerWidth: element.width,
|
||||
containerHeight: newElementHeight,
|
||||
position: {
|
||||
mx: 0.0,
|
||||
my: 0.0
|
||||
}
|
||||
});
|
||||
|
||||
svgAttr(self.path, {
|
||||
d: textPathData
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
eventBus.on([ 'directEditing.complete', 'directEditing.cancel' ], function(context) {
|
||||
var activeProvider = context.active;
|
||||
|
||||
if (activeProvider) {
|
||||
canvas.removeMarker(activeProvider.element.label || activeProvider.element, MARKER_HIDDEN);
|
||||
canvas.removeMarker(element, MARKER_LABEL_HIDDEN);
|
||||
}
|
||||
|
||||
element = undefined;
|
||||
absoluteElementBBox = undefined;
|
||||
|
||||
if (gfx) {
|
||||
svgRemove(gfx);
|
||||
|
||||
gfx = undefined;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
LabelEditingPreview.$inject = [
|
||||
'eventBus',
|
||||
'canvas',
|
||||
'elementRegistry',
|
||||
'pathMap'
|
||||
];
|
||||
|
||||
|
||||
// helpers ///////////////////
|
||||
|
||||
function getStrokeColor(element, defaultColor) {
|
||||
var bo = getBusinessObject(element);
|
||||
|
||||
return bo.di.get('stroke') || defaultColor || 'black';
|
||||
}
|
||||
@@ -0,0 +1,429 @@
|
||||
import {
|
||||
assign
|
||||
} from 'min-dash';
|
||||
|
||||
import {
|
||||
getLabel
|
||||
} from './LabelUtil';
|
||||
|
||||
import {
|
||||
getBusinessObject,
|
||||
is
|
||||
} from '../../util/ModelUtil';
|
||||
|
||||
import {
|
||||
createCategoryValue
|
||||
} from '../modeling/behavior/util/CategoryUtil';
|
||||
|
||||
import { isAny } from '../modeling/util/ModelingUtil';
|
||||
import { isExpanded } from '../../util/DiUtil';
|
||||
|
||||
import {
|
||||
getExternalLabelMid,
|
||||
isLabelExternal,
|
||||
hasExternalLabel,
|
||||
isLabel
|
||||
} from '../../util/LabelUtil';
|
||||
|
||||
|
||||
export default function LabelEditingProvider(
|
||||
eventBus, bpmnFactory, canvas, directEditing,
|
||||
modeling, resizeHandles, textRenderer) {
|
||||
|
||||
this._bpmnFactory = bpmnFactory;
|
||||
this._canvas = canvas;
|
||||
this._modeling = modeling;
|
||||
this._textRenderer = textRenderer;
|
||||
|
||||
directEditing.registerProvider(this);
|
||||
|
||||
// listen to dblclick on non-root elements
|
||||
eventBus.on('element.dblclick', function(event) {
|
||||
activateDirectEdit(event.element, true);
|
||||
});
|
||||
|
||||
// complete on followup canvas operation
|
||||
eventBus.on([
|
||||
'element.mousedown',
|
||||
'drag.init',
|
||||
'canvas.viewbox.changing',
|
||||
'autoPlace',
|
||||
'popupMenu.open'
|
||||
], function(event) {
|
||||
|
||||
if (directEditing.isActive()) {
|
||||
directEditing.complete();
|
||||
}
|
||||
});
|
||||
|
||||
// cancel on command stack changes
|
||||
eventBus.on([ 'commandStack.changed' ], function(e) {
|
||||
if (directEditing.isActive()) {
|
||||
directEditing.cancel();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
eventBus.on('directEditing.activate', function(event) {
|
||||
resizeHandles.removeResizers();
|
||||
});
|
||||
|
||||
eventBus.on('create.end', 500, function(event) {
|
||||
|
||||
var element = event.shape,
|
||||
canExecute = event.context.canExecute,
|
||||
isTouch = event.isTouch;
|
||||
|
||||
// TODO(nikku): we need to find a way to support the
|
||||
// direct editing on mobile devices; right now this will
|
||||
// break for desworkflowediting on mobile devices
|
||||
// as it breaks the user interaction workflow
|
||||
|
||||
// TODO(nre): we should temporarily focus the edited element
|
||||
// here and release the focused viewport after the direct edit
|
||||
// operation is finished
|
||||
if (isTouch) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!canExecute) {
|
||||
return;
|
||||
}
|
||||
|
||||
activateDirectEdit(element);
|
||||
});
|
||||
|
||||
eventBus.on('autoPlace.end', 500, function(event) {
|
||||
activateDirectEdit(event.shape);
|
||||
});
|
||||
|
||||
|
||||
function activateDirectEdit(element, force) {
|
||||
if (force ||
|
||||
isAny(element, [ 'bpmn:Task', 'bpmn:TextAnnotation', 'bpmn:Group' ]) ||
|
||||
isCollapsedSubProcess(element)) {
|
||||
|
||||
directEditing.activate(element);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
LabelEditingProvider.$inject = [
|
||||
'eventBus',
|
||||
'bpmnFactory',
|
||||
'canvas',
|
||||
'directEditing',
|
||||
'modeling',
|
||||
'resizeHandles',
|
||||
'textRenderer'
|
||||
];
|
||||
|
||||
|
||||
/**
|
||||
* Activate direct editing for activities and text annotations.
|
||||
*
|
||||
* @param {djs.model.Base} element
|
||||
*
|
||||
* @return {Object} an object with properties bounds (position and size), text and options
|
||||
*/
|
||||
LabelEditingProvider.prototype.activate = function(element) {
|
||||
|
||||
// text
|
||||
var text = getLabel(element);
|
||||
|
||||
if (text === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
var context = {
|
||||
text: text
|
||||
};
|
||||
|
||||
// bounds
|
||||
var bounds = this.getEditingBBox(element);
|
||||
|
||||
assign(context, bounds);
|
||||
|
||||
var options = {};
|
||||
|
||||
// tasks
|
||||
if (
|
||||
isAny(element, [
|
||||
'bpmn:Task',
|
||||
'bpmn:Participant',
|
||||
'bpmn:Lane',
|
||||
'bpmn:CallActivity'
|
||||
]) ||
|
||||
isCollapsedSubProcess(element)
|
||||
) {
|
||||
assign(options, {
|
||||
centerVertically: true
|
||||
});
|
||||
}
|
||||
|
||||
// external labels
|
||||
if (isLabelExternal(element)) {
|
||||
assign(options, {
|
||||
autoResize: true
|
||||
});
|
||||
}
|
||||
|
||||
// text annotations
|
||||
if (is(element, 'bpmn:TextAnnotation')) {
|
||||
assign(options, {
|
||||
resizable: true,
|
||||
autoResize: true
|
||||
});
|
||||
}
|
||||
|
||||
assign(context, {
|
||||
options: options
|
||||
});
|
||||
|
||||
return context;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the editing bounding box based on the element's size and position
|
||||
*
|
||||
* @param {djs.model.Base} element
|
||||
*
|
||||
* @return {Object} an object containing information about position
|
||||
* and size (fixed or minimum and/or maximum)
|
||||
*/
|
||||
LabelEditingProvider.prototype.getEditingBBox = function(element) {
|
||||
var canvas = this._canvas;
|
||||
|
||||
var target = element.label || element;
|
||||
|
||||
var bbox = canvas.getAbsoluteBBox(target);
|
||||
|
||||
var mid = {
|
||||
x: bbox.x + bbox.width / 2,
|
||||
y: bbox.y + bbox.height / 2
|
||||
};
|
||||
|
||||
// default position
|
||||
var bounds = { x: bbox.x, y: bbox.y };
|
||||
|
||||
var zoom = canvas.zoom();
|
||||
|
||||
var defaultStyle = this._textRenderer.getDefaultStyle(),
|
||||
externalStyle = this._textRenderer.getExternalStyle();
|
||||
|
||||
// take zoom into account
|
||||
var externalFontSize = externalStyle.fontSize * zoom,
|
||||
externalLineHeight = externalStyle.lineHeight,
|
||||
defaultFontSize = defaultStyle.fontSize * zoom,
|
||||
defaultLineHeight = defaultStyle.lineHeight;
|
||||
|
||||
var style = {
|
||||
fontFamily: this._textRenderer.getDefaultStyle().fontFamily,
|
||||
fontWeight: this._textRenderer.getDefaultStyle().fontWeight
|
||||
};
|
||||
|
||||
// adjust for expanded pools AND lanes
|
||||
if (is(element, 'bpmn:Lane') || isExpandedPool(element)) {
|
||||
|
||||
assign(bounds, {
|
||||
width: bbox.height,
|
||||
height: 30 * zoom,
|
||||
x: bbox.x - bbox.height / 2 + (15 * zoom),
|
||||
y: mid.y - (30 * zoom) / 2
|
||||
});
|
||||
|
||||
assign(style, {
|
||||
fontSize: defaultFontSize + 'px',
|
||||
lineHeight: defaultLineHeight,
|
||||
paddingTop: (7 * zoom) + 'px',
|
||||
paddingBottom: (7 * zoom) + 'px',
|
||||
paddingLeft: (5 * zoom) + 'px',
|
||||
paddingRight: (5 * zoom) + 'px',
|
||||
transform: 'rotate(-90deg)'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// internal labels for tasks and collapsed call activities,
|
||||
// sub processes and participants
|
||||
if (isAny(element, [ 'bpmn:Task', 'bpmn:CallActivity']) ||
|
||||
isCollapsedPool(element) ||
|
||||
isCollapsedSubProcess(element)) {
|
||||
|
||||
assign(bounds, {
|
||||
width: bbox.width,
|
||||
height: bbox.height
|
||||
});
|
||||
|
||||
assign(style, {
|
||||
fontSize: defaultFontSize + 'px',
|
||||
lineHeight: defaultLineHeight,
|
||||
paddingTop: (7 * zoom) + 'px',
|
||||
paddingBottom: (7 * zoom) + 'px',
|
||||
paddingLeft: (5 * zoom) + 'px',
|
||||
paddingRight: (5 * zoom) + 'px'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// internal labels for expanded sub processes
|
||||
if (isExpandedSubProcess(element)) {
|
||||
assign(bounds, {
|
||||
width: bbox.width,
|
||||
x: bbox.x
|
||||
});
|
||||
|
||||
assign(style, {
|
||||
fontSize: defaultFontSize + 'px',
|
||||
lineHeight: defaultLineHeight,
|
||||
paddingTop: (7 * zoom) + 'px',
|
||||
paddingBottom: (7 * zoom) + 'px',
|
||||
paddingLeft: (5 * zoom) + 'px',
|
||||
paddingRight: (5 * zoom) + 'px'
|
||||
});
|
||||
}
|
||||
|
||||
var width = 90 * zoom,
|
||||
paddingTop = 7 * zoom,
|
||||
paddingBottom = 4 * zoom;
|
||||
|
||||
// external labels for events, data elements, gateways, groups and connections
|
||||
if (target.labelTarget) {
|
||||
assign(bounds, {
|
||||
width: width,
|
||||
height: bbox.height + paddingTop + paddingBottom,
|
||||
x: mid.x - width / 2,
|
||||
y: bbox.y - paddingTop
|
||||
});
|
||||
|
||||
assign(style, {
|
||||
fontSize: externalFontSize + 'px',
|
||||
lineHeight: externalLineHeight,
|
||||
paddingTop: paddingTop + 'px',
|
||||
paddingBottom: paddingBottom + 'px'
|
||||
});
|
||||
}
|
||||
|
||||
// external label not yet created
|
||||
if (isLabelExternal(target)
|
||||
&& !hasExternalLabel(target)
|
||||
&& !isLabel(target)) {
|
||||
|
||||
var externalLabelMid = getExternalLabelMid(element);
|
||||
|
||||
var absoluteBBox = canvas.getAbsoluteBBox({
|
||||
x: externalLabelMid.x,
|
||||
y: externalLabelMid.y,
|
||||
width: 0,
|
||||
height: 0
|
||||
});
|
||||
|
||||
var height = externalFontSize + paddingTop + paddingBottom;
|
||||
|
||||
assign(bounds, {
|
||||
width: width,
|
||||
height: height,
|
||||
x: absoluteBBox.x - width / 2,
|
||||
y: absoluteBBox.y - height / 2
|
||||
});
|
||||
|
||||
assign(style, {
|
||||
fontSize: externalFontSize + 'px',
|
||||
lineHeight: externalLineHeight,
|
||||
paddingTop: paddingTop + 'px',
|
||||
paddingBottom: paddingBottom + 'px'
|
||||
});
|
||||
}
|
||||
|
||||
// text annotations
|
||||
if (is(element, 'bpmn:TextAnnotation')) {
|
||||
assign(bounds, {
|
||||
width: bbox.width,
|
||||
height: bbox.height,
|
||||
minWidth: 30 * zoom,
|
||||
minHeight: 10 * zoom
|
||||
});
|
||||
|
||||
assign(style, {
|
||||
textAlign: 'left',
|
||||
paddingTop: (5 * zoom) + 'px',
|
||||
paddingBottom: (7 * zoom) + 'px',
|
||||
paddingLeft: (7 * zoom) + 'px',
|
||||
paddingRight: (5 * zoom) + 'px',
|
||||
fontSize: defaultFontSize + 'px',
|
||||
lineHeight: defaultLineHeight
|
||||
});
|
||||
}
|
||||
|
||||
return { bounds: bounds, style: style };
|
||||
};
|
||||
|
||||
|
||||
LabelEditingProvider.prototype.update = function(
|
||||
element, newLabel,
|
||||
activeContextText, bounds) {
|
||||
|
||||
var newBounds,
|
||||
bbox;
|
||||
|
||||
if (is(element, 'bpmn:TextAnnotation')) {
|
||||
|
||||
bbox = this._canvas.getAbsoluteBBox(element);
|
||||
|
||||
newBounds = {
|
||||
x: element.x,
|
||||
y: element.y,
|
||||
width: element.width / bbox.width * bounds.width,
|
||||
height: element.height / bbox.height * bounds.height
|
||||
};
|
||||
}
|
||||
|
||||
if (is(element, 'bpmn:Group')) {
|
||||
|
||||
var businessObject = getBusinessObject(element);
|
||||
|
||||
// initialize categoryValue if not existing
|
||||
if (!businessObject.categoryValueRef) {
|
||||
|
||||
var rootElement = this._canvas.getRootElement(),
|
||||
definitions = getBusinessObject(rootElement).$parent;
|
||||
|
||||
var categoryValue = createCategoryValue(definitions, this._bpmnFactory);
|
||||
|
||||
getBusinessObject(element).categoryValueRef = categoryValue;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (isEmptyText(newLabel)) {
|
||||
newLabel = null;
|
||||
}
|
||||
|
||||
this._modeling.updateLabel(element, newLabel, newBounds);
|
||||
};
|
||||
|
||||
|
||||
|
||||
// helpers //////////////////////
|
||||
|
||||
function isCollapsedSubProcess(element) {
|
||||
return is(element, 'bpmn:SubProcess') && !isExpanded(element);
|
||||
}
|
||||
|
||||
function isExpandedSubProcess(element) {
|
||||
return is(element, 'bpmn:SubProcess') && isExpanded(element);
|
||||
}
|
||||
|
||||
function isCollapsedPool(element) {
|
||||
return is(element, 'bpmn:Participant') && !isExpanded(element);
|
||||
}
|
||||
|
||||
function isExpandedPool(element) {
|
||||
return is(element, 'bpmn:Participant') && isExpanded(element);
|
||||
}
|
||||
|
||||
function isEmptyText(label) {
|
||||
return !label || !label.trim();
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import { is } from '../../util/ModelUtil';
|
||||
|
||||
function getLabelAttr(semantic) {
|
||||
if (
|
||||
is(semantic, 'bpmn:FlowElement') ||
|
||||
is(semantic, 'bpmn:Participant') ||
|
||||
is(semantic, 'bpmn:Lane') ||
|
||||
is(semantic, 'bpmn:SequenceFlow') ||
|
||||
is(semantic, 'bpmn:MessageFlow') ||
|
||||
is(semantic, 'bpmn:DataInput') ||
|
||||
is(semantic, 'bpmn:DataOutput')
|
||||
) {
|
||||
return 'name';
|
||||
}
|
||||
|
||||
if (is(semantic, 'bpmn:TextAnnotation')) {
|
||||
return 'text';
|
||||
}
|
||||
|
||||
if (is(semantic, 'bpmn:Group')) {
|
||||
return 'categoryValueRef';
|
||||
}
|
||||
}
|
||||
|
||||
function getCategoryValue(semantic) {
|
||||
var categoryValueRef = semantic['categoryValueRef'];
|
||||
|
||||
if (!categoryValueRef) {
|
||||
return '';
|
||||
}
|
||||
|
||||
|
||||
return categoryValueRef.value || '';
|
||||
}
|
||||
|
||||
export function getLabel(element) {
|
||||
var semantic = element.businessObject,
|
||||
attr = getLabelAttr(semantic);
|
||||
|
||||
if (attr) {
|
||||
|
||||
if (attr === 'categoryValueRef') {
|
||||
|
||||
return getCategoryValue(semantic);
|
||||
}
|
||||
|
||||
return semantic[attr] || '';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export function setLabel(element, text, isExternal) {
|
||||
var semantic = element.businessObject,
|
||||
attr = getLabelAttr(semantic);
|
||||
|
||||
if (attr) {
|
||||
|
||||
if (attr === 'categoryValueRef') {
|
||||
semantic['categoryValueRef'].value = text;
|
||||
} else {
|
||||
semantic[attr] = text;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return element;
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
import {
|
||||
setLabel,
|
||||
getLabel
|
||||
} from '../LabelUtil';
|
||||
|
||||
import {
|
||||
getExternalLabelMid,
|
||||
isLabelExternal,
|
||||
hasExternalLabel,
|
||||
isLabel
|
||||
} from '../../../util/LabelUtil';
|
||||
|
||||
import {
|
||||
is
|
||||
} from '../../../util/ModelUtil';
|
||||
|
||||
var NULL_DIMENSIONS = {
|
||||
width: 0,
|
||||
height: 0
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* A handler that updates the text of a BPMN element.
|
||||
*/
|
||||
export default function UpdateLabelHandler(modeling, textRenderer) {
|
||||
|
||||
/**
|
||||
* Set the label and return the changed elements.
|
||||
*
|
||||
* Element parameter can be label itself or connection (i.e. sequence flow).
|
||||
*
|
||||
* @param {djs.model.Base} element
|
||||
* @param {String} text
|
||||
*/
|
||||
function setText(element, text) {
|
||||
|
||||
// external label if present
|
||||
var label = element.label || element;
|
||||
|
||||
var labelTarget = element.labelTarget || element;
|
||||
|
||||
setLabel(label, text, labelTarget !== label);
|
||||
|
||||
return [ label, labelTarget ];
|
||||
}
|
||||
|
||||
function preExecute(ctx) {
|
||||
var element = ctx.element,
|
||||
businessObject = element.businessObject,
|
||||
newLabel = ctx.newLabel;
|
||||
|
||||
if (!isLabel(element)
|
||||
&& isLabelExternal(element)
|
||||
&& !hasExternalLabel(element)
|
||||
&& !isEmptyText(newLabel)) {
|
||||
|
||||
// create label
|
||||
var paddingTop = 7;
|
||||
|
||||
var labelCenter = getExternalLabelMid(element);
|
||||
|
||||
labelCenter = {
|
||||
x: labelCenter.x,
|
||||
y: labelCenter.y + paddingTop
|
||||
};
|
||||
|
||||
modeling.createLabel(element, labelCenter, {
|
||||
id: businessObject.id + '_label',
|
||||
businessObject: businessObject
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function execute(ctx) {
|
||||
ctx.oldLabel = getLabel(ctx.element);
|
||||
return setText(ctx.element, ctx.newLabel);
|
||||
}
|
||||
|
||||
function revert(ctx) {
|
||||
return setText(ctx.element, ctx.oldLabel);
|
||||
}
|
||||
|
||||
function postExecute(ctx) {
|
||||
var element = ctx.element,
|
||||
label = element.label || element,
|
||||
newLabel = ctx.newLabel,
|
||||
newBounds = ctx.newBounds,
|
||||
hints = ctx.hints || {};
|
||||
|
||||
if (isLabel(label) && isEmptyText(newLabel)) {
|
||||
|
||||
if (hints.removeShape !== false) {
|
||||
modeling.removeShape(label, { unsetLabel: false });
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// ignore internal labels for elements except text annotations
|
||||
if (!isLabelExternal(element) && !is(element, 'bpmn:TextAnnotation')) {
|
||||
return;
|
||||
}
|
||||
|
||||
var text = getLabel(label);
|
||||
|
||||
// don't resize without text
|
||||
if (!text) {
|
||||
return;
|
||||
}
|
||||
|
||||
// resize element based on label _or_ pre-defined bounds
|
||||
if (typeof newBounds === 'undefined') {
|
||||
newBounds = textRenderer.getExternalLabelBounds(label, text);
|
||||
}
|
||||
|
||||
// setting newBounds to false or _null_ will
|
||||
// disable the postExecute resize operation
|
||||
if (newBounds) {
|
||||
modeling.resizeShape(label, newBounds, NULL_DIMENSIONS);
|
||||
}
|
||||
}
|
||||
|
||||
// API
|
||||
|
||||
this.preExecute = preExecute;
|
||||
this.execute = execute;
|
||||
this.revert = revert;
|
||||
this.postExecute = postExecute;
|
||||
}
|
||||
|
||||
UpdateLabelHandler.$inject = [
|
||||
'modeling',
|
||||
'textRenderer'
|
||||
];
|
||||
|
||||
|
||||
// helpers ///////////////////////
|
||||
|
||||
function isEmptyText(label) {
|
||||
return !label || !label.trim();
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import ChangeSupportModule from 'diagram-js/lib/features/change-support';
|
||||
import ResizeModule from 'diagram-js/lib/features/resize';
|
||||
import DirectEditingModule from 'diagram-js-direct-editing';
|
||||
|
||||
import LabelEditingProvider from './LabelEditingProvider';
|
||||
import LabelEditingPreview from './LabelEditingPreview';
|
||||
|
||||
|
||||
export default {
|
||||
__depends__: [
|
||||
ChangeSupportModule,
|
||||
ResizeModule,
|
||||
DirectEditingModule
|
||||
],
|
||||
__init__: [
|
||||
'labelEditingProvider',
|
||||
'labelEditingPreview'
|
||||
],
|
||||
labelEditingProvider: [ 'type', LabelEditingProvider ],
|
||||
labelEditingPreview: [ 'type', LabelEditingPreview ]
|
||||
};
|
||||
@@ -0,0 +1,105 @@
|
||||
import {
|
||||
map,
|
||||
assign,
|
||||
pick
|
||||
} from 'min-dash';
|
||||
|
||||
import {
|
||||
isAny
|
||||
} from './util/ModelingUtil';
|
||||
|
||||
|
||||
export default function BpmnFactory(moddle) {
|
||||
this._model = moddle;
|
||||
}
|
||||
|
||||
BpmnFactory.$inject = [ 'moddle' ];
|
||||
|
||||
|
||||
BpmnFactory.prototype._needsId = function(element) {
|
||||
return isAny(element, [
|
||||
'bpmn:RootElement',
|
||||
'bpmn:FlowElement',
|
||||
'bpmn:MessageFlow',
|
||||
'bpmn:DataAssociation',
|
||||
'bpmn:Artifact',
|
||||
'bpmn:Participant',
|
||||
'bpmn:Lane',
|
||||
'bpmn:LaneSet',
|
||||
'bpmn:Process',
|
||||
'bpmn:Collaboration',
|
||||
'bpmndi:BPMNShape',
|
||||
'bpmndi:BPMNEdge',
|
||||
'bpmndi:BPMNDiagram',
|
||||
'bpmndi:BPMNPlane',
|
||||
'bpmn:Property',
|
||||
'bpmn:CategoryValue'
|
||||
]);
|
||||
};
|
||||
|
||||
BpmnFactory.prototype._ensureId = function(element) {
|
||||
|
||||
// generate semantic ids for elements
|
||||
// bpmn:SequenceFlow -> SequenceFlow_ID
|
||||
var prefix = (element.$type || '').replace(/^[^:]*:/g, '') + '_';
|
||||
|
||||
if (!element.id && this._needsId(element)) {
|
||||
element.id = this._model.ids.nextPrefixed(prefix, element);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
BpmnFactory.prototype.create = function(type, attrs) {
|
||||
var element = this._model.create(type, attrs || {});
|
||||
|
||||
this._ensureId(element);
|
||||
|
||||
return element;
|
||||
};
|
||||
|
||||
|
||||
BpmnFactory.prototype.createDiLabel = function() {
|
||||
return this.create('bpmndi:BPMNLabel', {
|
||||
bounds: this.createDiBounds()
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
BpmnFactory.prototype.createDiShape = function(semantic, bounds, attrs) {
|
||||
|
||||
return this.create('bpmndi:BPMNShape', assign({
|
||||
bpmnElement: semantic,
|
||||
bounds: this.createDiBounds(bounds)
|
||||
}, attrs));
|
||||
};
|
||||
|
||||
|
||||
BpmnFactory.prototype.createDiBounds = function(bounds) {
|
||||
return this.create('dc:Bounds', bounds);
|
||||
};
|
||||
|
||||
|
||||
BpmnFactory.prototype.createDiWaypoints = function(waypoints) {
|
||||
var self = this;
|
||||
|
||||
return map(waypoints, function(pos) {
|
||||
return self.createDiWaypoint(pos);
|
||||
});
|
||||
};
|
||||
|
||||
BpmnFactory.prototype.createDiWaypoint = function(point) {
|
||||
return this.create('dc:Point', pick(point, [ 'x', 'y' ]));
|
||||
};
|
||||
|
||||
|
||||
BpmnFactory.prototype.createDiEdge = function(semantic, waypoints, attrs) {
|
||||
return this.create('bpmndi:BPMNEdge', assign({
|
||||
bpmnElement: semantic
|
||||
}, attrs));
|
||||
};
|
||||
|
||||
BpmnFactory.prototype.createDiPlane = function(semantic) {
|
||||
return this.create('bpmndi:BPMNPlane', {
|
||||
bpmnElement: semantic
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,393 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import {
|
||||
assign
|
||||
} from 'min-dash';
|
||||
|
||||
import BaseLayouter from 'diagram-js/lib/layout/BaseLayouter';
|
||||
|
||||
import {
|
||||
repairConnection,
|
||||
withoutRedundantPoints
|
||||
} from 'diagram-js/lib/layout/ManhattanLayout';
|
||||
|
||||
import {
|
||||
getMid,
|
||||
getOrientation
|
||||
} from 'diagram-js/lib/layout/LayoutUtil';
|
||||
|
||||
import {
|
||||
isExpanded
|
||||
} from '../../util/DiUtil';
|
||||
|
||||
import { is } from '../../util/ModelUtil';
|
||||
|
||||
|
||||
var BOUNDARY_TO_HOST_THRESHOLD = 40;
|
||||
|
||||
export default function BpmnLayouter() {}
|
||||
|
||||
inherits(BpmnLayouter, BaseLayouter);
|
||||
|
||||
|
||||
BpmnLayouter.prototype.layoutConnection = function(connection, hints) {
|
||||
hints = hints || {};
|
||||
|
||||
var source = hints.source || connection.source,
|
||||
target = hints.target || connection.target,
|
||||
waypoints = connection.waypoints,
|
||||
start = hints.connectionStart,
|
||||
end = hints.connectionEnd;
|
||||
|
||||
var manhattanOptions,
|
||||
updatedWaypoints;
|
||||
|
||||
if (!start) {
|
||||
start = getConnectionDocking(waypoints && waypoints[0], source);
|
||||
}
|
||||
|
||||
if (!end) {
|
||||
end = getConnectionDocking(waypoints && waypoints[waypoints.length - 1], target);
|
||||
}
|
||||
|
||||
// TODO(nikku): support vertical modeling
|
||||
// and invert preferredLayouts accordingly
|
||||
|
||||
if (is(connection, 'bpmn:Association') ||
|
||||
is(connection, 'bpmn:DataAssociation')) {
|
||||
|
||||
if (waypoints && !isCompensationAssociation(source, target)) {
|
||||
return [].concat([ start ], waypoints.slice(1, -1), [ end ]);
|
||||
}
|
||||
}
|
||||
|
||||
// manhattan layout sequence / message flows
|
||||
if (is(connection, 'bpmn:MessageFlow')) {
|
||||
manhattanOptions = getMessageFlowManhattanOptions(source, target);
|
||||
|
||||
} else
|
||||
|
||||
|
||||
// layout all connection between flow elements h:h,
|
||||
//
|
||||
// except for
|
||||
//
|
||||
// (1) outgoing of BoundaryEvents -> layout based on attach orientation and target orientation
|
||||
// (2) incoming / outgoing of Gateway -> v:h (outgoing), h:v (incoming)
|
||||
// (3) loops from / to the same element
|
||||
//
|
||||
if (is(connection, 'bpmn:SequenceFlow') ||
|
||||
isCompensationAssociation(source, target)) {
|
||||
|
||||
if (source === target) {
|
||||
manhattanOptions = {
|
||||
preferredLayouts: [ 'b:l' ]
|
||||
};
|
||||
} else
|
||||
|
||||
if (is(source, 'bpmn:BoundaryEvent')) {
|
||||
|
||||
manhattanOptions = {
|
||||
preferredLayouts: getBoundaryEventPreferredLayouts(source, target, end)
|
||||
};
|
||||
|
||||
} else
|
||||
|
||||
if (is(source, 'bpmn:Gateway')) {
|
||||
|
||||
manhattanOptions = {
|
||||
preferredLayouts: [ 'v:h' ]
|
||||
};
|
||||
} else
|
||||
|
||||
if (is(target, 'bpmn:Gateway')) {
|
||||
|
||||
manhattanOptions = {
|
||||
preferredLayouts: [ 'h:v' ]
|
||||
};
|
||||
}
|
||||
|
||||
else {
|
||||
manhattanOptions = {
|
||||
preferredLayouts: [ 'h:h' ]
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (manhattanOptions) {
|
||||
|
||||
manhattanOptions = assign(manhattanOptions, hints);
|
||||
|
||||
updatedWaypoints =
|
||||
withoutRedundantPoints(
|
||||
repairConnection(
|
||||
source, target,
|
||||
start, end,
|
||||
waypoints,
|
||||
manhattanOptions
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return updatedWaypoints || [ start, end ];
|
||||
};
|
||||
|
||||
|
||||
function getAttachOrientation(attachedElement) {
|
||||
|
||||
var hostElement = attachedElement.host,
|
||||
padding = -10;
|
||||
|
||||
return getOrientation(getMid(attachedElement), hostElement, padding);
|
||||
}
|
||||
|
||||
|
||||
function getMessageFlowManhattanOptions(source, target) {
|
||||
return {
|
||||
preferredLayouts: [ 'straight', 'v:v' ],
|
||||
preserveDocking: getMessageFlowPreserveDocking(source, target)
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
function getMessageFlowPreserveDocking(source, target) {
|
||||
|
||||
// (1) docking element connected to participant has precedence
|
||||
|
||||
if (is(target, 'bpmn:Participant')) {
|
||||
return 'source';
|
||||
}
|
||||
|
||||
if (is(source, 'bpmn:Participant')) {
|
||||
return 'target';
|
||||
}
|
||||
|
||||
// (2) docking element connected to expanded sub-process has precedence
|
||||
|
||||
if (isExpandedSubProcess(target)) {
|
||||
return 'source';
|
||||
}
|
||||
|
||||
if (isExpandedSubProcess(source)) {
|
||||
return 'target';
|
||||
}
|
||||
|
||||
// (3) docking event has precedence
|
||||
|
||||
if (is(target, 'bpmn:Event')) {
|
||||
return 'target';
|
||||
}
|
||||
|
||||
if (is(source, 'bpmn:Event')) {
|
||||
return 'source';
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
function getConnectionDocking(point, shape) {
|
||||
return point ? (point.original || point) : getMid(shape);
|
||||
}
|
||||
|
||||
function isCompensationAssociation(source, target) {
|
||||
return is(target, 'bpmn:Activity') &&
|
||||
is(source, 'bpmn:BoundaryEvent') &&
|
||||
target.businessObject.isForCompensation;
|
||||
}
|
||||
|
||||
|
||||
function isExpandedSubProcess(element) {
|
||||
return is(element, 'bpmn:SubProcess') && isExpanded(element);
|
||||
}
|
||||
|
||||
function isSame(a, b) {
|
||||
return a === b;
|
||||
}
|
||||
|
||||
function isAnyOrientation(orientation, orientations) {
|
||||
return orientations.indexOf(orientation) !== -1;
|
||||
}
|
||||
|
||||
var oppositeOrientationMapping = {
|
||||
'top': 'bottom',
|
||||
'top-right': 'bottom-left',
|
||||
'top-left': 'bottom-right',
|
||||
'right': 'left',
|
||||
'bottom': 'top',
|
||||
'bottom-right': 'top-left',
|
||||
'bottom-left': 'top-right',
|
||||
'left': 'right'
|
||||
};
|
||||
|
||||
var orientationDirectionMapping = {
|
||||
top: 't',
|
||||
right: 'r',
|
||||
bottom: 'b',
|
||||
left: 'l'
|
||||
};
|
||||
|
||||
function getHorizontalOrientation(orientation) {
|
||||
var matches = /right|left/.exec(orientation);
|
||||
|
||||
return matches && matches[0];
|
||||
}
|
||||
|
||||
function getVerticalOrientation(orientation) {
|
||||
var matches = /top|bottom/.exec(orientation);
|
||||
|
||||
return matches && matches[0];
|
||||
}
|
||||
|
||||
function isOppositeOrientation(a, b) {
|
||||
return oppositeOrientationMapping[a] === b;
|
||||
}
|
||||
|
||||
function isOppositeHorizontalOrientation(a, b) {
|
||||
var horizontalOrientation = getHorizontalOrientation(a);
|
||||
|
||||
var oppositeHorizontalOrientation = oppositeOrientationMapping[horizontalOrientation];
|
||||
|
||||
return b.indexOf(oppositeHorizontalOrientation) !== -1;
|
||||
}
|
||||
|
||||
function isOppositeVerticalOrientation(a, b) {
|
||||
var verticalOrientation = getVerticalOrientation(a);
|
||||
|
||||
var oppositeVerticalOrientation = oppositeOrientationMapping[verticalOrientation];
|
||||
|
||||
return b.indexOf(oppositeVerticalOrientation) !== -1;
|
||||
}
|
||||
|
||||
function isHorizontalOrientation(orientation) {
|
||||
return orientation === 'right' || orientation === 'left';
|
||||
}
|
||||
|
||||
function getBoundaryEventPreferredLayouts(source, target, end) {
|
||||
var sourceMid = getMid(source),
|
||||
targetMid = getMid(target),
|
||||
attachOrientation = getAttachOrientation(source),
|
||||
sourceLayout,
|
||||
targetLayout;
|
||||
|
||||
var isLoop = isSame(source.host, target);
|
||||
|
||||
var attachedToSide = isAnyOrientation(attachOrientation, [ 'top', 'right', 'bottom', 'left' ]);
|
||||
|
||||
var targetOrientation = getOrientation(targetMid, sourceMid, {
|
||||
x: source.width / 2 + target.width / 2,
|
||||
y: source.height / 2 + target.height / 2
|
||||
});
|
||||
|
||||
if (isLoop) {
|
||||
return getBoundaryEventLoopLayout(attachOrientation, attachedToSide, source, target, end);
|
||||
}
|
||||
|
||||
// source layout
|
||||
sourceLayout = getBoundaryEventSourceLayout(attachOrientation, targetOrientation, attachedToSide);
|
||||
|
||||
// target layout
|
||||
targetLayout = getBoundaryEventTargetLayout(attachOrientation, targetOrientation, attachedToSide);
|
||||
|
||||
return [ sourceLayout + ':' + targetLayout ];
|
||||
}
|
||||
|
||||
function getBoundaryEventLoopLayout(attachOrientation, attachedToSide, source, target, end) {
|
||||
|
||||
var sourceLayout = orientationDirectionMapping[attachedToSide ? attachOrientation : getVerticalOrientation(attachOrientation)],
|
||||
targetLayout;
|
||||
|
||||
if (attachedToSide) {
|
||||
if (isHorizontalOrientation(attachOrientation)) {
|
||||
targetLayout = shouldConnectToSameSide('y', source, target, end) ? 'h' : 'b';
|
||||
} else {
|
||||
targetLayout = shouldConnectToSameSide('x', source, target, end) ? 'v' : 'l';
|
||||
}
|
||||
} else {
|
||||
targetLayout = 'v';
|
||||
}
|
||||
|
||||
return [ sourceLayout + ':' + targetLayout ];
|
||||
}
|
||||
|
||||
function shouldConnectToSameSide(axis, source, target, end) {
|
||||
var threshold = BOUNDARY_TO_HOST_THRESHOLD;
|
||||
|
||||
return !(
|
||||
areCloseOnAxis(axis, end, target, threshold) ||
|
||||
areCloseOnAxis(axis, end, { x: target.x + target.width, y: target.y + target.height }, threshold) ||
|
||||
areCloseOnAxis(axis, end, getMid(source), threshold)
|
||||
);
|
||||
}
|
||||
|
||||
function areCloseOnAxis(axis, a, b, threshold) {
|
||||
return Math.abs(a[axis] - b[axis]) < threshold;
|
||||
}
|
||||
|
||||
function getBoundaryEventSourceLayout(attachOrientation, targetOrientation, attachedToSide) {
|
||||
|
||||
// attached to either top, right, bottom or left side
|
||||
if (attachedToSide) {
|
||||
return orientationDirectionMapping[attachOrientation];
|
||||
}
|
||||
|
||||
// attached to either top-right, top-left, bottom-right or bottom-left corner
|
||||
|
||||
// same vertical or opposite horizontal orientation
|
||||
if (isSame(
|
||||
getVerticalOrientation(attachOrientation), getVerticalOrientation(targetOrientation)
|
||||
) || isOppositeOrientation(
|
||||
getHorizontalOrientation(attachOrientation), getHorizontalOrientation(targetOrientation)
|
||||
)) {
|
||||
return orientationDirectionMapping[getVerticalOrientation(attachOrientation)];
|
||||
}
|
||||
|
||||
// fallback
|
||||
return orientationDirectionMapping[getHorizontalOrientation(attachOrientation)];
|
||||
}
|
||||
|
||||
function getBoundaryEventTargetLayout(attachOrientation, targetOrientation, attachedToSide) {
|
||||
|
||||
// attached to either top, right, bottom or left side
|
||||
if (attachedToSide) {
|
||||
if (isHorizontalOrientation(attachOrientation)) {
|
||||
// orientation is 'right' or 'left'
|
||||
|
||||
// opposite horizontal orientation or same orientation
|
||||
if (
|
||||
isOppositeHorizontalOrientation(attachOrientation, targetOrientation) ||
|
||||
isSame(attachOrientation, targetOrientation)
|
||||
) {
|
||||
return 'h';
|
||||
}
|
||||
|
||||
// fallback
|
||||
return 'v';
|
||||
} else {
|
||||
// orientation is 'top' or 'bottom'
|
||||
|
||||
// opposite vertical orientation or same orientation
|
||||
if (
|
||||
isOppositeVerticalOrientation(attachOrientation, targetOrientation) ||
|
||||
isSame(attachOrientation, targetOrientation)
|
||||
) {
|
||||
return 'v';
|
||||
}
|
||||
|
||||
// fallback
|
||||
return 'h';
|
||||
}
|
||||
}
|
||||
// attached to either top-right, top-left, bottom-right or bottom-left corner
|
||||
|
||||
// orientation is 'right', 'left'
|
||||
// or same vertical orientation but also 'right' or 'left'
|
||||
if (isHorizontalOrientation(targetOrientation) ||
|
||||
(isSame(getVerticalOrientation(attachOrientation), getVerticalOrientation(targetOrientation)) &&
|
||||
getHorizontalOrientation(targetOrientation))) {
|
||||
return 'h';
|
||||
} else {
|
||||
return 'v';
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,726 @@
|
||||
import {
|
||||
assign,
|
||||
forEach
|
||||
} from 'min-dash';
|
||||
|
||||
import inherits from 'inherits';
|
||||
|
||||
import {
|
||||
remove as collectionRemove,
|
||||
add as collectionAdd
|
||||
} from 'diagram-js/lib/util/Collections';
|
||||
|
||||
import {
|
||||
Label
|
||||
} from 'diagram-js/lib/model';
|
||||
|
||||
import {
|
||||
getBusinessObject,
|
||||
is
|
||||
} from '../../util/ModelUtil';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
/**
|
||||
* A handler responsible for updating the underlying BPMN 2.0 XML + DI
|
||||
* once changes on the diagram happen
|
||||
*/
|
||||
export default function BpmnUpdater(
|
||||
eventBus, bpmnFactory, connectionDocking,
|
||||
translate) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
this._bpmnFactory = bpmnFactory;
|
||||
this._translate = translate;
|
||||
|
||||
var self = this;
|
||||
|
||||
|
||||
|
||||
// connection cropping //////////////////////
|
||||
|
||||
// crop connection ends during create/update
|
||||
function cropConnection(e) {
|
||||
var context = e.context,
|
||||
connection;
|
||||
|
||||
if (!context.cropped) {
|
||||
connection = context.connection;
|
||||
connection.waypoints = connectionDocking.getCroppedWaypoints(connection);
|
||||
context.cropped = true;
|
||||
}
|
||||
}
|
||||
|
||||
this.executed([
|
||||
'connection.layout',
|
||||
'connection.create'
|
||||
], cropConnection);
|
||||
|
||||
this.reverted([ 'connection.layout' ], function(e) {
|
||||
delete e.context.cropped;
|
||||
});
|
||||
|
||||
|
||||
|
||||
// BPMN + DI update //////////////////////
|
||||
|
||||
|
||||
// update parent
|
||||
function updateParent(e) {
|
||||
var context = e.context;
|
||||
|
||||
self.updateParent(context.shape || context.connection, context.oldParent);
|
||||
}
|
||||
|
||||
function reverseUpdateParent(e) {
|
||||
var context = e.context;
|
||||
|
||||
var element = context.shape || context.connection,
|
||||
// oldParent is the (old) new parent, because we are undoing
|
||||
oldParent = context.parent || context.newParent;
|
||||
|
||||
self.updateParent(element, oldParent);
|
||||
}
|
||||
|
||||
this.executed([
|
||||
'shape.move',
|
||||
'shape.create',
|
||||
'shape.delete',
|
||||
'connection.create',
|
||||
'connection.move',
|
||||
'connection.delete'
|
||||
], ifBpmn(updateParent));
|
||||
|
||||
this.reverted([
|
||||
'shape.move',
|
||||
'shape.create',
|
||||
'shape.delete',
|
||||
'connection.create',
|
||||
'connection.move',
|
||||
'connection.delete'
|
||||
], ifBpmn(reverseUpdateParent));
|
||||
|
||||
/*
|
||||
* ## Updating Parent
|
||||
*
|
||||
* When morphing a Process into a Collaboration or vice-versa,
|
||||
* make sure that both the *semantic* and *di* parent of each element
|
||||
* is updated.
|
||||
*
|
||||
*/
|
||||
function updateRoot(event) {
|
||||
var context = event.context,
|
||||
oldRoot = context.oldRoot,
|
||||
children = oldRoot.children;
|
||||
|
||||
forEach(children, function(child) {
|
||||
if (is(child, 'bpmn:BaseElement')) {
|
||||
self.updateParent(child);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.executed([ 'canvas.updateRoot' ], updateRoot);
|
||||
this.reverted([ 'canvas.updateRoot' ], updateRoot);
|
||||
|
||||
|
||||
// update bounds
|
||||
function updateBounds(e) {
|
||||
var shape = e.context.shape;
|
||||
|
||||
if (!is(shape, 'bpmn:BaseElement')) {
|
||||
return;
|
||||
}
|
||||
|
||||
self.updateBounds(shape);
|
||||
}
|
||||
|
||||
this.executed([ 'shape.move', 'shape.create', 'shape.resize' ], ifBpmn(function(event) {
|
||||
|
||||
// exclude labels because they're handled separately during shape.changed
|
||||
if (event.context.shape.type === 'label') {
|
||||
return;
|
||||
}
|
||||
|
||||
updateBounds(event);
|
||||
}));
|
||||
|
||||
this.reverted([ 'shape.move', 'shape.create', 'shape.resize' ], ifBpmn(function(event) {
|
||||
|
||||
// exclude labels because they're handled separately during shape.changed
|
||||
if (event.context.shape.type === 'label') {
|
||||
return;
|
||||
}
|
||||
|
||||
updateBounds(event);
|
||||
}));
|
||||
|
||||
// Handle labels separately. This is necessary, because the label bounds have to be updated
|
||||
// every time its shape changes, not only on move, create and resize.
|
||||
eventBus.on('shape.changed', function(event) {
|
||||
if (event.element.type === 'label') {
|
||||
updateBounds({ context: { shape: event.element } });
|
||||
}
|
||||
});
|
||||
|
||||
// attach / detach connection
|
||||
function updateConnection(e) {
|
||||
self.updateConnection(e.context);
|
||||
}
|
||||
|
||||
this.executed([
|
||||
'connection.create',
|
||||
'connection.move',
|
||||
'connection.delete',
|
||||
'connection.reconnectEnd',
|
||||
'connection.reconnectStart'
|
||||
], ifBpmn(updateConnection));
|
||||
|
||||
this.reverted([
|
||||
'connection.create',
|
||||
'connection.move',
|
||||
'connection.delete',
|
||||
'connection.reconnectEnd',
|
||||
'connection.reconnectStart'
|
||||
], ifBpmn(updateConnection));
|
||||
|
||||
|
||||
// update waypoints
|
||||
function updateConnectionWaypoints(e) {
|
||||
self.updateConnectionWaypoints(e.context.connection);
|
||||
}
|
||||
|
||||
this.executed([
|
||||
'connection.layout',
|
||||
'connection.move',
|
||||
'connection.updateWaypoints',
|
||||
], ifBpmn(updateConnectionWaypoints));
|
||||
|
||||
this.reverted([
|
||||
'connection.layout',
|
||||
'connection.move',
|
||||
'connection.updateWaypoints',
|
||||
], ifBpmn(updateConnectionWaypoints));
|
||||
|
||||
|
||||
// update Default & Conditional flows
|
||||
this.executed([
|
||||
'connection.reconnectEnd',
|
||||
'connection.reconnectStart'
|
||||
], ifBpmn(function(e) {
|
||||
var context = e.context,
|
||||
connection = context.connection,
|
||||
businessObject = getBusinessObject(connection),
|
||||
oldSource = getBusinessObject(context.oldSource),
|
||||
oldTarget = getBusinessObject(context.oldTarget),
|
||||
newSource = getBusinessObject(connection.source),
|
||||
newTarget = getBusinessObject(connection.target);
|
||||
|
||||
if (oldSource === newSource || oldTarget === newTarget) {
|
||||
return;
|
||||
}
|
||||
|
||||
// on reconnectStart -> default flow
|
||||
if (oldSource && oldSource.default === businessObject) {
|
||||
context.default = oldSource.default;
|
||||
oldSource.default = undefined;
|
||||
}
|
||||
|
||||
// on reconnectEnd -> default flow
|
||||
if ((businessObject.sourceRef && businessObject.sourceRef.default) &&
|
||||
!(is(newTarget, 'bpmn:Activity') ||
|
||||
is(newTarget, 'bpmn:EndEvent') ||
|
||||
is(newTarget, 'bpmn:Gateway') ||
|
||||
is(newTarget, 'bpmn:IntermediateThrowEvent'))) {
|
||||
context.default = businessObject.sourceRef.default;
|
||||
businessObject.sourceRef.default = undefined;
|
||||
}
|
||||
|
||||
// on reconnectStart -> conditional flow
|
||||
if (oldSource && (businessObject.conditionExpression) &&
|
||||
!(is(newSource, 'bpmn:Activity') ||
|
||||
is(newSource, 'bpmn:Gateway'))) {
|
||||
context.conditionExpression = businessObject.conditionExpression;
|
||||
businessObject.conditionExpression = undefined;
|
||||
}
|
||||
|
||||
// on reconnectEnd -> conditional flow
|
||||
if (oldTarget && (businessObject.conditionExpression) &&
|
||||
!(is(newTarget, 'bpmn:Activity') ||
|
||||
is(newTarget, 'bpmn:EndEvent') ||
|
||||
is(newTarget, 'bpmn:Gateway') ||
|
||||
is(newTarget, 'bpmn:IntermediateThrowEvent'))) {
|
||||
context.conditionExpression = businessObject.conditionExpression;
|
||||
businessObject.conditionExpression = undefined;
|
||||
}
|
||||
}));
|
||||
|
||||
this.reverted([
|
||||
'connection.reconnectEnd',
|
||||
'connection.reconnectStart'
|
||||
], ifBpmn(function(e) {
|
||||
var context = e.context,
|
||||
connection = context.connection,
|
||||
businessObject = getBusinessObject(connection),
|
||||
newSource = getBusinessObject(connection.source);
|
||||
|
||||
// default flow
|
||||
if (context.default) {
|
||||
if (is(newSource, 'bpmn:ExclusiveGateway') || is(newSource, 'bpmn:InclusiveGateway') ||
|
||||
is(newSource, 'bpmn:Activity')) {
|
||||
newSource.default = context.default;
|
||||
}
|
||||
}
|
||||
|
||||
// conditional flow
|
||||
if (context.conditionExpression && is(newSource, 'bpmn:Activity')) {
|
||||
businessObject.conditionExpression = context.conditionExpression;
|
||||
}
|
||||
}));
|
||||
|
||||
// update attachments
|
||||
function updateAttachment(e) {
|
||||
self.updateAttachment(e.context);
|
||||
}
|
||||
|
||||
this.executed([ 'element.updateAttachment' ], ifBpmn(updateAttachment));
|
||||
this.reverted([ 'element.updateAttachment' ], ifBpmn(updateAttachment));
|
||||
}
|
||||
|
||||
inherits(BpmnUpdater, CommandInterceptor);
|
||||
|
||||
BpmnUpdater.$inject = [
|
||||
'eventBus',
|
||||
'bpmnFactory',
|
||||
'connectionDocking',
|
||||
'translate'
|
||||
];
|
||||
|
||||
|
||||
// implementation //////////////////////
|
||||
|
||||
BpmnUpdater.prototype.updateAttachment = function(context) {
|
||||
|
||||
var shape = context.shape,
|
||||
businessObject = shape.businessObject,
|
||||
host = shape.host;
|
||||
|
||||
businessObject.attachedToRef = host && host.businessObject;
|
||||
};
|
||||
|
||||
BpmnUpdater.prototype.updateParent = function(element, oldParent) {
|
||||
// do not update BPMN 2.0 label parent
|
||||
if (element instanceof Label) {
|
||||
return;
|
||||
}
|
||||
|
||||
// data stores in collaborations are handled seperately by DataStoreBehavior
|
||||
if (is(element, 'bpmn:DataStoreReference') &&
|
||||
element.parent &&
|
||||
is(element.parent, 'bpmn:Collaboration')) {
|
||||
return;
|
||||
}
|
||||
|
||||
var parentShape = element.parent;
|
||||
|
||||
var businessObject = element.businessObject,
|
||||
parentBusinessObject = parentShape && parentShape.businessObject,
|
||||
parentDi = parentBusinessObject && parentBusinessObject.di;
|
||||
|
||||
if (is(element, 'bpmn:FlowNode')) {
|
||||
this.updateFlowNodeRefs(businessObject, parentBusinessObject, oldParent && oldParent.businessObject);
|
||||
}
|
||||
|
||||
if (is(element, 'bpmn:DataOutputAssociation')) {
|
||||
if (element.source) {
|
||||
parentBusinessObject = element.source.businessObject;
|
||||
} else {
|
||||
parentBusinessObject = null;
|
||||
}
|
||||
}
|
||||
|
||||
if (is(element, 'bpmn:DataInputAssociation')) {
|
||||
if (element.target) {
|
||||
parentBusinessObject = element.target.businessObject;
|
||||
} else {
|
||||
parentBusinessObject = null;
|
||||
}
|
||||
}
|
||||
|
||||
this.updateSemanticParent(businessObject, parentBusinessObject);
|
||||
|
||||
if (is(element, 'bpmn:DataObjectReference') && businessObject.dataObjectRef) {
|
||||
this.updateSemanticParent(businessObject.dataObjectRef, parentBusinessObject);
|
||||
}
|
||||
|
||||
this.updateDiParent(businessObject.di, parentDi);
|
||||
};
|
||||
|
||||
|
||||
BpmnUpdater.prototype.updateBounds = function(shape) {
|
||||
|
||||
var di = shape.businessObject.di;
|
||||
|
||||
var target = (shape instanceof Label) ? this._getLabel(di) : di;
|
||||
|
||||
var bounds = target.bounds;
|
||||
|
||||
if (!bounds) {
|
||||
bounds = this._bpmnFactory.createDiBounds();
|
||||
target.set('bounds', bounds);
|
||||
}
|
||||
|
||||
assign(bounds, {
|
||||
x: shape.x,
|
||||
y: shape.y,
|
||||
width: shape.width,
|
||||
height: shape.height
|
||||
});
|
||||
};
|
||||
|
||||
BpmnUpdater.prototype.updateFlowNodeRefs = function(businessObject, newContainment, oldContainment) {
|
||||
|
||||
if (oldContainment === newContainment) {
|
||||
return;
|
||||
}
|
||||
|
||||
var oldRefs, newRefs;
|
||||
|
||||
if (is (oldContainment, 'bpmn:Lane')) {
|
||||
oldRefs = oldContainment.get('flowNodeRef');
|
||||
collectionRemove(oldRefs, businessObject);
|
||||
}
|
||||
|
||||
if (is(newContainment, 'bpmn:Lane')) {
|
||||
newRefs = newContainment.get('flowNodeRef');
|
||||
collectionAdd(newRefs, businessObject);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// update existing sourceElement and targetElement di information
|
||||
BpmnUpdater.prototype.updateDiConnection = function(di, newSource, newTarget) {
|
||||
|
||||
if (di.sourceElement && di.sourceElement.bpmnElement !== newSource) {
|
||||
di.sourceElement = newSource && newSource.di;
|
||||
}
|
||||
|
||||
if (di.targetElement && di.targetElement.bpmnElement !== newTarget) {
|
||||
di.targetElement = newTarget && newTarget.di;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
BpmnUpdater.prototype.updateDiParent = function(di, parentDi) {
|
||||
|
||||
if (parentDi && !is(parentDi, 'bpmndi:BPMNPlane')) {
|
||||
parentDi = parentDi.$parent;
|
||||
}
|
||||
|
||||
if (di.$parent === parentDi) {
|
||||
return;
|
||||
}
|
||||
|
||||
var planeElements = (parentDi || di.$parent).get('planeElement');
|
||||
|
||||
if (parentDi) {
|
||||
planeElements.push(di);
|
||||
di.$parent = parentDi;
|
||||
} else {
|
||||
collectionRemove(planeElements, di);
|
||||
di.$parent = null;
|
||||
}
|
||||
};
|
||||
|
||||
function getDefinitions(element) {
|
||||
while (element && !is(element, 'bpmn:Definitions')) {
|
||||
element = element.$parent;
|
||||
}
|
||||
|
||||
return element;
|
||||
}
|
||||
|
||||
BpmnUpdater.prototype.getLaneSet = function(container) {
|
||||
|
||||
var laneSet, laneSets;
|
||||
|
||||
// bpmn:Lane
|
||||
if (is(container, 'bpmn:Lane')) {
|
||||
laneSet = container.childLaneSet;
|
||||
|
||||
if (!laneSet) {
|
||||
laneSet = this._bpmnFactory.create('bpmn:LaneSet');
|
||||
container.childLaneSet = laneSet;
|
||||
laneSet.$parent = container;
|
||||
}
|
||||
|
||||
return laneSet;
|
||||
}
|
||||
|
||||
// bpmn:Participant
|
||||
if (is(container, 'bpmn:Participant')) {
|
||||
container = container.processRef;
|
||||
}
|
||||
|
||||
// bpmn:FlowElementsContainer
|
||||
laneSets = container.get('laneSets');
|
||||
laneSet = laneSets[0];
|
||||
|
||||
if (!laneSet) {
|
||||
laneSet = this._bpmnFactory.create('bpmn:LaneSet');
|
||||
laneSet.$parent = container;
|
||||
laneSets.push(laneSet);
|
||||
}
|
||||
|
||||
return laneSet;
|
||||
};
|
||||
|
||||
BpmnUpdater.prototype.updateSemanticParent = function(businessObject, newParent, visualParent) {
|
||||
|
||||
var containment,
|
||||
translate = this._translate;
|
||||
|
||||
if (businessObject.$parent === newParent) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (is(businessObject, 'bpmn:DataInput') || is(businessObject, 'bpmn:DataOutput')) {
|
||||
|
||||
if (is(newParent, 'bpmn:Participant') && 'processRef' in newParent) {
|
||||
newParent = newParent.processRef;
|
||||
}
|
||||
|
||||
// already in correct ioSpecification
|
||||
if ('ioSpecification' in newParent && newParent.ioSpecification === businessObject.$parent) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (is(businessObject, 'bpmn:Lane')) {
|
||||
|
||||
if (newParent) {
|
||||
newParent = this.getLaneSet(newParent);
|
||||
}
|
||||
|
||||
containment = 'lanes';
|
||||
} else
|
||||
|
||||
if (is(businessObject, 'bpmn:FlowElement')) {
|
||||
|
||||
if (newParent) {
|
||||
|
||||
if (is(newParent, 'bpmn:Participant')) {
|
||||
newParent = newParent.processRef;
|
||||
} else
|
||||
|
||||
if (is(newParent, 'bpmn:Lane')) {
|
||||
do {
|
||||
// unwrap Lane -> LaneSet -> (Lane | FlowElementsContainer)
|
||||
newParent = newParent.$parent.$parent;
|
||||
} while (is(newParent, 'bpmn:Lane'));
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
containment = 'flowElements';
|
||||
|
||||
} else
|
||||
|
||||
if (is(businessObject, 'bpmn:Artifact')) {
|
||||
|
||||
while (newParent &&
|
||||
!is(newParent, 'bpmn:Process') &&
|
||||
!is(newParent, 'bpmn:SubProcess') &&
|
||||
!is(newParent, 'bpmn:Collaboration')) {
|
||||
|
||||
if (is(newParent, 'bpmn:Participant')) {
|
||||
newParent = newParent.processRef;
|
||||
break;
|
||||
} else {
|
||||
newParent = newParent.$parent;
|
||||
}
|
||||
}
|
||||
|
||||
containment = 'artifacts';
|
||||
} else
|
||||
|
||||
if (is(businessObject, 'bpmn:MessageFlow')) {
|
||||
containment = 'messageFlows';
|
||||
|
||||
} else
|
||||
|
||||
if (is(businessObject, 'bpmn:Participant')) {
|
||||
containment = 'participants';
|
||||
|
||||
// make sure the participants process is properly attached / detached
|
||||
// from the XML document
|
||||
|
||||
var process = businessObject.processRef,
|
||||
definitions;
|
||||
|
||||
if (process) {
|
||||
definitions = getDefinitions(businessObject.$parent || newParent);
|
||||
|
||||
if (businessObject.$parent) {
|
||||
collectionRemove(definitions.get('rootElements'), process);
|
||||
process.$parent = null;
|
||||
}
|
||||
|
||||
if (newParent) {
|
||||
collectionAdd(definitions.get('rootElements'), process);
|
||||
process.$parent = definitions;
|
||||
}
|
||||
}
|
||||
} else
|
||||
|
||||
if (is(businessObject, 'bpmn:DataOutputAssociation')) {
|
||||
containment = 'dataOutputAssociations';
|
||||
} else
|
||||
|
||||
if (is(businessObject, 'bpmn:DataInputAssociation')) {
|
||||
containment = 'dataInputAssociations';
|
||||
}
|
||||
|
||||
if (!containment) {
|
||||
throw new Error(translate(
|
||||
'no parent for {element} in {parent}',
|
||||
{
|
||||
element: businessObject.id,
|
||||
parent: newParent.id
|
||||
}
|
||||
));
|
||||
}
|
||||
|
||||
var children;
|
||||
|
||||
if (businessObject.$parent) {
|
||||
// remove from old parent
|
||||
children = businessObject.$parent.get(containment);
|
||||
collectionRemove(children, businessObject);
|
||||
}
|
||||
|
||||
if (!newParent) {
|
||||
businessObject.$parent = null;
|
||||
} else {
|
||||
// add to new parent
|
||||
children = newParent.get(containment);
|
||||
children.push(businessObject);
|
||||
businessObject.$parent = newParent;
|
||||
}
|
||||
|
||||
if (visualParent) {
|
||||
var diChildren = visualParent.get(containment);
|
||||
|
||||
collectionRemove(children, businessObject);
|
||||
|
||||
if (newParent) {
|
||||
|
||||
if (!diChildren) {
|
||||
diChildren = [];
|
||||
newParent.set(containment, diChildren);
|
||||
}
|
||||
|
||||
diChildren.push(businessObject);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
BpmnUpdater.prototype.updateConnectionWaypoints = function(connection) {
|
||||
connection.businessObject.di.set('waypoint', this._bpmnFactory.createDiWaypoints(connection.waypoints));
|
||||
};
|
||||
|
||||
|
||||
BpmnUpdater.prototype.updateConnection = function(context) {
|
||||
|
||||
var connection = context.connection,
|
||||
businessObject = getBusinessObject(connection),
|
||||
newSource = getBusinessObject(connection.source),
|
||||
newTarget = getBusinessObject(connection.target),
|
||||
visualParent;
|
||||
|
||||
if (!is(businessObject, 'bpmn:DataAssociation')) {
|
||||
|
||||
var inverseSet = is(businessObject, 'bpmn:SequenceFlow');
|
||||
|
||||
if (businessObject.sourceRef !== newSource) {
|
||||
if (inverseSet) {
|
||||
collectionRemove(businessObject.sourceRef && businessObject.sourceRef.get('outgoing'), businessObject);
|
||||
|
||||
if (newSource && newSource.get('outgoing')) {
|
||||
newSource.get('outgoing').push(businessObject);
|
||||
}
|
||||
}
|
||||
|
||||
businessObject.sourceRef = newSource;
|
||||
}
|
||||
|
||||
if (businessObject.targetRef !== newTarget) {
|
||||
if (inverseSet) {
|
||||
collectionRemove(businessObject.targetRef && businessObject.targetRef.get('incoming'), businessObject);
|
||||
|
||||
if (newTarget && newTarget.get('incoming')) {
|
||||
newTarget.get('incoming').push(businessObject);
|
||||
}
|
||||
}
|
||||
|
||||
businessObject.targetRef = newTarget;
|
||||
}
|
||||
} else
|
||||
|
||||
if (is(businessObject, 'bpmn:DataInputAssociation')) {
|
||||
// handle obnoxious isMsome sourceRef
|
||||
businessObject.get('sourceRef')[0] = newSource;
|
||||
|
||||
visualParent = context.parent || context.newParent || newTarget;
|
||||
|
||||
this.updateSemanticParent(businessObject, newTarget, visualParent);
|
||||
} else
|
||||
|
||||
if (is(businessObject, 'bpmn:DataOutputAssociation')) {
|
||||
visualParent = context.parent || context.newParent || newSource;
|
||||
|
||||
this.updateSemanticParent(businessObject, newSource, visualParent);
|
||||
|
||||
// targetRef = new target
|
||||
businessObject.targetRef = newTarget;
|
||||
}
|
||||
|
||||
this.updateConnectionWaypoints(connection);
|
||||
|
||||
this.updateDiConnection(businessObject.di, newSource, newTarget);
|
||||
};
|
||||
|
||||
|
||||
// helpers //////////////////////
|
||||
|
||||
BpmnUpdater.prototype._getLabel = function(di) {
|
||||
if (!di.label) {
|
||||
di.label = this._bpmnFactory.createDiLabel();
|
||||
}
|
||||
|
||||
return di.label;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Make sure the event listener is only called
|
||||
* if the touched element is a BPMN element.
|
||||
*
|
||||
* @param {Function} fn
|
||||
* @return {Function} guarded function
|
||||
*/
|
||||
function ifBpmn(fn) {
|
||||
|
||||
return function(event) {
|
||||
|
||||
var context = event.context,
|
||||
element = context.shape || context.connection;
|
||||
|
||||
if (is(element, 'bpmn:BaseElement')) {
|
||||
fn(event);
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,241 @@
|
||||
import {
|
||||
assign,
|
||||
forEach
|
||||
} from 'min-dash';
|
||||
|
||||
import inherits from 'inherits';
|
||||
|
||||
import { is } from '../../util/ModelUtil';
|
||||
|
||||
import {
|
||||
isExpanded
|
||||
} from '../../util/DiUtil';
|
||||
|
||||
import BaseElementFactory from 'diagram-js/lib/core/ElementFactory';
|
||||
|
||||
import {
|
||||
DEFAULT_LABEL_SIZE
|
||||
} from '../../util/LabelUtil';
|
||||
|
||||
|
||||
/**
|
||||
* A bpmn-aware factory for diagram-js shapes
|
||||
*/
|
||||
export default function ElementFactory(bpmnFactory, moddle, translate) {
|
||||
BaseElementFactory.call(this);
|
||||
|
||||
this._bpmnFactory = bpmnFactory;
|
||||
this._moddle = moddle;
|
||||
this._translate = translate;
|
||||
}
|
||||
|
||||
inherits(ElementFactory, BaseElementFactory);
|
||||
|
||||
ElementFactory.$inject = [
|
||||
'bpmnFactory',
|
||||
'moddle',
|
||||
'translate'
|
||||
];
|
||||
|
||||
ElementFactory.prototype.baseCreate = BaseElementFactory.prototype.create;
|
||||
|
||||
ElementFactory.prototype.create = function(elementType, attrs) {
|
||||
// no special magic for labels,
|
||||
// we assume their businessObjects have already been created
|
||||
// and wired via attrs
|
||||
if (elementType === 'label') {
|
||||
return this.baseCreate(elementType, assign({ type: 'label' }, DEFAULT_LABEL_SIZE, attrs));
|
||||
}
|
||||
|
||||
return this.createBpmnElement(elementType, attrs);
|
||||
};
|
||||
|
||||
ElementFactory.prototype.createBpmnElement = function(elementType, attrs) {
|
||||
var size,
|
||||
translate = this._translate;
|
||||
|
||||
attrs = attrs || {};
|
||||
|
||||
var businessObject = attrs.businessObject;
|
||||
|
||||
if (!businessObject) {
|
||||
if (!attrs.type) {
|
||||
throw new Error(translate('no shape type specified'));
|
||||
}
|
||||
|
||||
businessObject = this._bpmnFactory.create(attrs.type);
|
||||
}
|
||||
|
||||
if (!businessObject.di) {
|
||||
if (elementType === 'root') {
|
||||
businessObject.di = this._bpmnFactory.createDiPlane(businessObject, [], {
|
||||
id: businessObject.id + '_di'
|
||||
});
|
||||
} else
|
||||
if (elementType === 'connection') {
|
||||
businessObject.di = this._bpmnFactory.createDiEdge(businessObject, [], {
|
||||
id: businessObject.id + '_di'
|
||||
});
|
||||
} else {
|
||||
businessObject.di = this._bpmnFactory.createDiShape(businessObject, {}, {
|
||||
id: businessObject.id + '_di'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (is(businessObject, 'bpmn:Group')) {
|
||||
attrs = assign({
|
||||
isFrame: true
|
||||
}, attrs);
|
||||
}
|
||||
|
||||
if (attrs.colors) {
|
||||
assign(businessObject.di, attrs.colors);
|
||||
|
||||
delete attrs.colors;
|
||||
}
|
||||
|
||||
applyAttributes(businessObject, attrs, [
|
||||
'processRef',
|
||||
'isInterrupting',
|
||||
'associationDirection',
|
||||
'isForCompensation'
|
||||
]);
|
||||
|
||||
if (attrs.isExpanded) {
|
||||
applyAttribute(businessObject.di, attrs, 'isExpanded');
|
||||
}
|
||||
|
||||
if (is(businessObject, 'bpmn:ExclusiveGateway')) {
|
||||
businessObject.di.isMarkerVisible = true;
|
||||
}
|
||||
|
||||
var eventDefinitions,
|
||||
newEventDefinition;
|
||||
|
||||
if (attrs.eventDefinitionType) {
|
||||
eventDefinitions = businessObject.get('eventDefinitions') || [];
|
||||
newEventDefinition = this._moddle.create(attrs.eventDefinitionType);
|
||||
|
||||
if (attrs.eventDefinitionType === 'bpmn:ConditionalEventDefinition') {
|
||||
newEventDefinition.condition = this._moddle.create('bpmn:FormalExpression');
|
||||
}
|
||||
|
||||
eventDefinitions.push(newEventDefinition);
|
||||
|
||||
newEventDefinition.$parent = businessObject;
|
||||
businessObject.eventDefinitions = eventDefinitions;
|
||||
|
||||
delete attrs.eventDefinitionType;
|
||||
}
|
||||
|
||||
size = this._getDefaultSize(businessObject);
|
||||
|
||||
attrs = assign({
|
||||
businessObject: businessObject,
|
||||
id: businessObject.id
|
||||
}, size, attrs);
|
||||
|
||||
return this.baseCreate(elementType, attrs);
|
||||
};
|
||||
|
||||
|
||||
ElementFactory.prototype._getDefaultSize = function(semantic) {
|
||||
|
||||
if (is(semantic, 'bpmn:SubProcess')) {
|
||||
|
||||
if (isExpanded(semantic)) {
|
||||
return { width: 350, height: 200 };
|
||||
} else {
|
||||
return { width: 100, height: 80 };
|
||||
}
|
||||
}
|
||||
|
||||
if (is(semantic, 'bpmn:Task')) {
|
||||
return { width: 100, height: 80 };
|
||||
}
|
||||
|
||||
if (is(semantic, 'bpmn:Gateway')) {
|
||||
return { width: 50, height: 50 };
|
||||
}
|
||||
|
||||
if (is(semantic, 'bpmn:Event')) {
|
||||
return { width: 36, height: 36 };
|
||||
}
|
||||
|
||||
if (is(semantic, 'bpmn:Participant')) {
|
||||
if (!isExpanded(semantic)) {
|
||||
return { width: 400, height: 60 };
|
||||
} else {
|
||||
return { width: 600, height: 250 };
|
||||
}
|
||||
}
|
||||
|
||||
if (is(semantic, 'bpmn:Lane')) {
|
||||
return { width: 400, height: 100 };
|
||||
}
|
||||
|
||||
if (is(semantic, 'bpmn:DataObjectReference')) {
|
||||
return { width: 36, height: 50 };
|
||||
}
|
||||
|
||||
if (is(semantic, 'bpmn:DataStoreReference')) {
|
||||
return { width: 50, height: 50 };
|
||||
}
|
||||
|
||||
if (is(semantic, 'bpmn:TextAnnotation')) {
|
||||
return { width: 100, height: 30 };
|
||||
}
|
||||
|
||||
if (is(semantic, 'bpmn:Group')) {
|
||||
return { width: 300, height: 300 };
|
||||
}
|
||||
|
||||
return { width: 100, height: 80 };
|
||||
};
|
||||
|
||||
|
||||
ElementFactory.prototype.createParticipantShape = function(collapsed) {
|
||||
|
||||
var attrs = { type: 'bpmn:Participant' };
|
||||
|
||||
if (!collapsed) {
|
||||
attrs.processRef = this._bpmnFactory.create('bpmn:Process');
|
||||
}
|
||||
|
||||
return this.createShape(attrs);
|
||||
};
|
||||
|
||||
|
||||
// helpers //////////////////////
|
||||
|
||||
/**
|
||||
* Apply attributes from a map to the given element,
|
||||
* remove attribute from the map on application.
|
||||
*
|
||||
* @param {Base} element
|
||||
* @param {Object} attrs (in/out map of attributes)
|
||||
* @param {Array<String>} attributeNames name of attributes to apply
|
||||
*/
|
||||
function applyAttributes(element, attrs, attributeNames) {
|
||||
|
||||
forEach(attributeNames, function(property) {
|
||||
if (attrs[property] !== undefined) {
|
||||
applyAttribute(element, attrs, property);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply named property to element and drain it from the attrs
|
||||
* collection.
|
||||
*
|
||||
* @param {Base} element
|
||||
* @param {Object} attrs (in/out map of attributes)
|
||||
* @param {String} attributeName to apply
|
||||
*/
|
||||
function applyAttribute(element, attrs, attributeName) {
|
||||
element[attributeName] = attrs[attributeName];
|
||||
|
||||
delete attrs[attributeName];
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import BaseModeling from 'diagram-js/lib/features/modeling/Modeling';
|
||||
|
||||
import UpdatePropertiesHandler from './cmd/UpdatePropertiesHandler';
|
||||
import UpdateCanvasRootHandler from './cmd/UpdateCanvasRootHandler';
|
||||
import AddLaneHandler from './cmd/AddLaneHandler';
|
||||
import SplitLaneHandler from './cmd/SplitLaneHandler';
|
||||
import ResizeLaneHandler from './cmd/ResizeLaneHandler';
|
||||
import UpdateFlowNodeRefsHandler from './cmd/UpdateFlowNodeRefsHandler';
|
||||
import IdClaimHandler from './cmd/IdClaimHandler';
|
||||
import SetColorHandler from './cmd/SetColorHandler';
|
||||
|
||||
import UpdateLabelHandler from '../label-editing/cmd/UpdateLabelHandler';
|
||||
|
||||
|
||||
/**
|
||||
* BPMN 2.0 modeling features activator
|
||||
*
|
||||
* @param {EventBus} eventBus
|
||||
* @param {ElementFactory} elementFactory
|
||||
* @param {CommandStack} commandStack
|
||||
* @param {BpmnRules} bpmnRules
|
||||
*/
|
||||
export default function Modeling(
|
||||
eventBus, elementFactory, commandStack,
|
||||
bpmnRules) {
|
||||
|
||||
BaseModeling.call(this, eventBus, elementFactory, commandStack);
|
||||
|
||||
this._bpmnRules = bpmnRules;
|
||||
}
|
||||
|
||||
inherits(Modeling, BaseModeling);
|
||||
|
||||
Modeling.$inject = [
|
||||
'eventBus',
|
||||
'elementFactory',
|
||||
'commandStack',
|
||||
'bpmnRules'
|
||||
];
|
||||
|
||||
|
||||
Modeling.prototype.getHandlers = function() {
|
||||
var handlers = BaseModeling.prototype.getHandlers.call(this);
|
||||
|
||||
handlers['element.updateProperties'] = UpdatePropertiesHandler;
|
||||
handlers['canvas.updateRoot'] = UpdateCanvasRootHandler;
|
||||
handlers['lane.add'] = AddLaneHandler;
|
||||
handlers['lane.resize'] = ResizeLaneHandler;
|
||||
handlers['lane.split'] = SplitLaneHandler;
|
||||
handlers['lane.updateRefs'] = UpdateFlowNodeRefsHandler;
|
||||
handlers['id.updateClaim'] = IdClaimHandler;
|
||||
handlers['element.setColor'] = SetColorHandler;
|
||||
handlers['element.updateLabel'] = UpdateLabelHandler;
|
||||
|
||||
return handlers;
|
||||
};
|
||||
|
||||
|
||||
Modeling.prototype.updateLabel = function(element, newLabel, newBounds, hints) {
|
||||
this._commandStack.execute('element.updateLabel', {
|
||||
element: element,
|
||||
newLabel: newLabel,
|
||||
newBounds: newBounds,
|
||||
hints: hints || {}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
Modeling.prototype.connect = function(source, target, attrs, hints) {
|
||||
|
||||
var bpmnRules = this._bpmnRules;
|
||||
|
||||
if (!attrs) {
|
||||
attrs = bpmnRules.canConnect(source, target);
|
||||
}
|
||||
|
||||
if (!attrs) {
|
||||
return;
|
||||
}
|
||||
|
||||
return this.createConnection(source, target, attrs, source.parent, hints);
|
||||
};
|
||||
|
||||
|
||||
Modeling.prototype.updateProperties = function(element, properties) {
|
||||
this._commandStack.execute('element.updateProperties', {
|
||||
element: element,
|
||||
properties: properties
|
||||
});
|
||||
};
|
||||
|
||||
Modeling.prototype.resizeLane = function(laneShape, newBounds, balanced) {
|
||||
this._commandStack.execute('lane.resize', {
|
||||
shape: laneShape,
|
||||
newBounds: newBounds,
|
||||
balanced: balanced
|
||||
});
|
||||
};
|
||||
|
||||
Modeling.prototype.addLane = function(targetLaneShape, location) {
|
||||
var context = {
|
||||
shape: targetLaneShape,
|
||||
location: location
|
||||
};
|
||||
|
||||
this._commandStack.execute('lane.add', context);
|
||||
|
||||
return context.newLane;
|
||||
};
|
||||
|
||||
Modeling.prototype.splitLane = function(targetLane, count) {
|
||||
this._commandStack.execute('lane.split', {
|
||||
shape: targetLane,
|
||||
count: count
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Transform the current diagram into a collaboration.
|
||||
*
|
||||
* @return {djs.model.Root} the new root element
|
||||
*/
|
||||
Modeling.prototype.makeCollaboration = function() {
|
||||
|
||||
var collaborationElement = this._create('root', {
|
||||
type: 'bpmn:Collaboration'
|
||||
});
|
||||
|
||||
var context = {
|
||||
newRoot: collaborationElement
|
||||
};
|
||||
|
||||
this._commandStack.execute('canvas.updateRoot', context);
|
||||
|
||||
return collaborationElement;
|
||||
};
|
||||
|
||||
Modeling.prototype.updateLaneRefs = function(flowNodeShapes, laneShapes) {
|
||||
|
||||
this._commandStack.execute('lane.updateRefs', {
|
||||
flowNodeShapes: flowNodeShapes,
|
||||
laneShapes: laneShapes
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Transform the current diagram into a process.
|
||||
*
|
||||
* @return {djs.model.Root} the new root element
|
||||
*/
|
||||
Modeling.prototype.makeProcess = function() {
|
||||
|
||||
var processElement = this._create('root', {
|
||||
type: 'bpmn:Process'
|
||||
});
|
||||
|
||||
var context = {
|
||||
newRoot: processElement
|
||||
};
|
||||
|
||||
this._commandStack.execute('canvas.updateRoot', context);
|
||||
};
|
||||
|
||||
|
||||
Modeling.prototype.claimId = function(id, moddleElement) {
|
||||
this._commandStack.execute('id.updateClaim', {
|
||||
id: id,
|
||||
element: moddleElement,
|
||||
claiming: true
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
Modeling.prototype.unclaimId = function(id, moddleElement) {
|
||||
this._commandStack.execute('id.updateClaim', {
|
||||
id: id,
|
||||
element: moddleElement
|
||||
});
|
||||
};
|
||||
|
||||
Modeling.prototype.setColor = function(elements, colors) {
|
||||
if (!elements.length) {
|
||||
elements = [ elements ];
|
||||
}
|
||||
|
||||
this._commandStack.execute('element.setColor', {
|
||||
elements: elements,
|
||||
colors: colors
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,249 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import {
|
||||
getOrientation,
|
||||
getMid,
|
||||
asTRBL
|
||||
} from 'diagram-js/lib/layout/LayoutUtil';
|
||||
|
||||
import {
|
||||
substract
|
||||
} from 'diagram-js/lib/util/Math';
|
||||
|
||||
import {
|
||||
hasExternalLabel
|
||||
} from '../../../util/LabelUtil';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
var ALIGNMENTS = [
|
||||
'top',
|
||||
'bottom',
|
||||
'left',
|
||||
'right'
|
||||
];
|
||||
|
||||
var ELEMENT_LABEL_DISTANCE = 10;
|
||||
|
||||
/**
|
||||
* A component that makes sure that external labels are added
|
||||
* together with respective elements and properly updated (DI wise)
|
||||
* during move.
|
||||
*
|
||||
* @param {EventBus} eventBus
|
||||
* @param {Modeling} modeling
|
||||
*/
|
||||
export default function AdaptiveLabelPositioningBehavior(eventBus, modeling) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
this.postExecuted([
|
||||
'connection.create',
|
||||
'connection.layout',
|
||||
'connection.updateWaypoints'
|
||||
], function(event) {
|
||||
|
||||
var context = event.context,
|
||||
connection = context.connection;
|
||||
|
||||
var source = connection.source,
|
||||
target = connection.target;
|
||||
|
||||
checkLabelAdjustment(source);
|
||||
checkLabelAdjustment(target);
|
||||
});
|
||||
|
||||
|
||||
this.postExecuted([
|
||||
'label.create'
|
||||
], function(event) {
|
||||
checkLabelAdjustment(event.context.shape.labelTarget);
|
||||
});
|
||||
|
||||
|
||||
function checkLabelAdjustment(element) {
|
||||
|
||||
// skip non-existing labels
|
||||
if (!hasExternalLabel(element)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var optimalPosition = getOptimalPosition(element);
|
||||
|
||||
// no optimal position found
|
||||
if (!optimalPosition) {
|
||||
return;
|
||||
}
|
||||
|
||||
adjustLabelPosition(element, optimalPosition);
|
||||
}
|
||||
|
||||
function adjustLabelPosition(element, orientation) {
|
||||
|
||||
var elementMid = getMid(element),
|
||||
label = element.label,
|
||||
labelMid = getMid(label);
|
||||
|
||||
var elementTrbl = asTRBL(element);
|
||||
|
||||
var newLabelMid;
|
||||
|
||||
switch (orientation) {
|
||||
case 'top':
|
||||
newLabelMid = {
|
||||
x: elementMid.x,
|
||||
y: elementTrbl.top - ELEMENT_LABEL_DISTANCE - label.height / 2
|
||||
};
|
||||
|
||||
break;
|
||||
|
||||
case 'left':
|
||||
|
||||
newLabelMid = {
|
||||
x: elementTrbl.left - ELEMENT_LABEL_DISTANCE - label.width / 2,
|
||||
y: elementMid.y
|
||||
};
|
||||
|
||||
break;
|
||||
|
||||
case 'bottom':
|
||||
|
||||
newLabelMid = {
|
||||
x: elementMid.x,
|
||||
y: elementTrbl.bottom + ELEMENT_LABEL_DISTANCE + label.height / 2
|
||||
};
|
||||
|
||||
break;
|
||||
|
||||
case 'right':
|
||||
|
||||
newLabelMid = {
|
||||
x: elementTrbl.right + ELEMENT_LABEL_DISTANCE + label.width / 2,
|
||||
y: elementMid.y
|
||||
};
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
var delta = substract(newLabelMid, labelMid);
|
||||
|
||||
modeling.moveShape(label, delta);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
inherits(AdaptiveLabelPositioningBehavior, CommandInterceptor);
|
||||
|
||||
AdaptiveLabelPositioningBehavior.$inject = [
|
||||
'eventBus',
|
||||
'modeling'
|
||||
];
|
||||
|
||||
|
||||
// helpers //////////////////////
|
||||
|
||||
/**
|
||||
* Return alignments which are taken by a boundary's host element
|
||||
*
|
||||
* @param {Shape} element
|
||||
*
|
||||
* @return {Array<String>}
|
||||
*/
|
||||
function getTakenHostAlignments(element) {
|
||||
|
||||
var hostElement = element.host,
|
||||
elementMid = getMid(element),
|
||||
hostOrientation = getOrientation(elementMid, hostElement);
|
||||
|
||||
var freeAlignments;
|
||||
|
||||
// check whether there is a multi-orientation, e.g. 'top-left'
|
||||
if (hostOrientation.indexOf('-') >= 0) {
|
||||
freeAlignments = hostOrientation.split('-');
|
||||
} else {
|
||||
freeAlignments = [ hostOrientation ];
|
||||
}
|
||||
|
||||
var takenAlignments = ALIGNMENTS.filter(function(alignment) {
|
||||
|
||||
return freeAlignments.indexOf(alignment) === -1;
|
||||
});
|
||||
|
||||
return takenAlignments;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Return alignments which are taken by related connections
|
||||
*
|
||||
* @param {Shape} element
|
||||
*
|
||||
* @return {Array<String>}
|
||||
*/
|
||||
function getTakenConnectionAlignments(element) {
|
||||
|
||||
var elementMid = getMid(element);
|
||||
|
||||
var takenAlignments = [].concat(
|
||||
element.incoming.map(function(c) {
|
||||
return c.waypoints[c.waypoints.length - 2 ];
|
||||
}),
|
||||
element.outgoing.map(function(c) {
|
||||
return c.waypoints[1];
|
||||
})
|
||||
).map(function(point) {
|
||||
return getApproximateOrientation(elementMid, point);
|
||||
});
|
||||
|
||||
return takenAlignments;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the optimal label position around an element
|
||||
* or _undefined_, if none was found.
|
||||
*
|
||||
* @param {Shape} element
|
||||
*
|
||||
* @return {String} positioning identifier
|
||||
*/
|
||||
function getOptimalPosition(element) {
|
||||
|
||||
var labelMid = getMid(element.label);
|
||||
|
||||
var elementMid = getMid(element);
|
||||
|
||||
var labelOrientation = getApproximateOrientation(elementMid, labelMid);
|
||||
|
||||
if (!isAligned(labelOrientation)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var takenAlignments = getTakenConnectionAlignments(element);
|
||||
|
||||
if (element.host) {
|
||||
var takenHostAlignments = getTakenHostAlignments(element);
|
||||
|
||||
takenAlignments = takenAlignments.concat(takenHostAlignments);
|
||||
}
|
||||
|
||||
var freeAlignments = ALIGNMENTS.filter(function(alignment) {
|
||||
|
||||
return takenAlignments.indexOf(alignment) === -1;
|
||||
});
|
||||
|
||||
// NOTHING TO DO; label already aligned a.O.K.
|
||||
if (freeAlignments.indexOf(labelOrientation) !== -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
return freeAlignments[0];
|
||||
}
|
||||
|
||||
function getApproximateOrientation(p0, p1) {
|
||||
return getOrientation(p1, p0, 5);
|
||||
}
|
||||
|
||||
function isAligned(orientation) {
|
||||
return ALIGNMENTS.indexOf(orientation) !== -1;
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import { is } from '../../../util/ModelUtil';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
|
||||
export default function AppendBehavior(eventBus, elementFactory, bpmnRules) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
// assign correct shape position unless already set
|
||||
|
||||
this.preExecute('shape.append', function(context) {
|
||||
|
||||
var source = context.source,
|
||||
shape = context.shape;
|
||||
|
||||
if (!context.position) {
|
||||
|
||||
if (is(shape, 'bpmn:TextAnnotation')) {
|
||||
context.position = {
|
||||
x: source.x + source.width / 2 + 75,
|
||||
y: source.y - (50) - shape.height / 2
|
||||
};
|
||||
} else {
|
||||
context.position = {
|
||||
x: source.x + source.width + 80 + shape.width / 2,
|
||||
y: source.y + source.height / 2
|
||||
};
|
||||
}
|
||||
}
|
||||
}, true);
|
||||
}
|
||||
|
||||
inherits(AppendBehavior, CommandInterceptor);
|
||||
|
||||
AppendBehavior.$inject = [
|
||||
'eventBus',
|
||||
'elementFactory',
|
||||
'bpmnRules'
|
||||
];
|
||||
@@ -0,0 +1,69 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
import { isAny } from '../util/ModelingUtil';
|
||||
import { getBusinessObject } from '../../../util/ModelUtil';
|
||||
|
||||
|
||||
/**
|
||||
* BPMN specific attach event behavior
|
||||
*/
|
||||
export default function AttachEventBehavior(eventBus, bpmnReplace) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
/**
|
||||
* replace intermediate event with boundary event when
|
||||
* attaching it to a shape
|
||||
*/
|
||||
|
||||
this.preExecute('elements.move', function(context) {
|
||||
var shapes = context.shapes,
|
||||
host = context.newHost,
|
||||
shape,
|
||||
eventDefinition,
|
||||
boundaryEvent,
|
||||
newShape;
|
||||
|
||||
if (shapes.length !== 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
shape = shapes[0];
|
||||
|
||||
if (host && isAny(shape, [ 'bpmn:IntermediateThrowEvent', 'bpmn:IntermediateCatchEvent' ])) {
|
||||
|
||||
eventDefinition = getEventDefinition(shape);
|
||||
|
||||
boundaryEvent = {
|
||||
type: 'bpmn:BoundaryEvent',
|
||||
host: host
|
||||
};
|
||||
|
||||
if (eventDefinition) {
|
||||
boundaryEvent.eventDefinitionType = eventDefinition.$type;
|
||||
}
|
||||
|
||||
newShape = bpmnReplace.replaceElement(shape, boundaryEvent, { layoutConnection: false });
|
||||
|
||||
context.shapes = [ newShape ];
|
||||
}
|
||||
}, true);
|
||||
}
|
||||
|
||||
AttachEventBehavior.$inject = [
|
||||
'eventBus',
|
||||
'bpmnReplace'
|
||||
];
|
||||
|
||||
inherits(AttachEventBehavior, CommandInterceptor);
|
||||
|
||||
|
||||
|
||||
// helper /////
|
||||
function getEventDefinition(element) {
|
||||
var bo = getBusinessObject(element);
|
||||
|
||||
return bo && bo.eventDefinitions && bo.eventDefinitions[0];
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
import { is } from '../../../util/ModelUtil';
|
||||
|
||||
import {
|
||||
filter,
|
||||
forEach
|
||||
} from 'min-dash';
|
||||
|
||||
|
||||
/**
|
||||
* BPMN specific boundary event behavior
|
||||
*/
|
||||
export default function BoundaryEventBehavior(eventBus, modeling) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
function getBoundaryEvents(element) {
|
||||
return filter(element.attachers, function(attacher) {
|
||||
return is(attacher, 'bpmn:BoundaryEvent');
|
||||
});
|
||||
}
|
||||
|
||||
// remove after connecting to event-based gateway
|
||||
this.postExecute('connection.create', function(event) {
|
||||
var source = event.context.source,
|
||||
target = event.context.target,
|
||||
boundaryEvents = getBoundaryEvents(target);
|
||||
|
||||
if (
|
||||
is(source, 'bpmn:EventBasedGateway') &&
|
||||
is(target, 'bpmn:ReceiveTask') &&
|
||||
boundaryEvents.length > 0
|
||||
) {
|
||||
modeling.removeElements(boundaryEvents);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// remove after replacing connected gateway with event-based gateway
|
||||
this.postExecute('connection.reconnectStart', function(event) {
|
||||
var oldSource = event.context.oldSource,
|
||||
newSource = event.context.newSource;
|
||||
|
||||
if (is(oldSource, 'bpmn:Gateway') &&
|
||||
is(newSource, 'bpmn:EventBasedGateway')) {
|
||||
forEach(newSource.outgoing, function(connection) {
|
||||
var target = connection.target,
|
||||
attachedboundaryEvents = getBoundaryEvents(target);
|
||||
|
||||
if (is(target, 'bpmn:ReceiveTask') &&
|
||||
attachedboundaryEvents.length > 0) {
|
||||
modeling.removeElements(attachedboundaryEvents);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
BoundaryEventBehavior.$inject = [
|
||||
'eventBus',
|
||||
'modeling'
|
||||
];
|
||||
|
||||
inherits(BoundaryEventBehavior, CommandInterceptor);
|
||||
@@ -0,0 +1,71 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import {
|
||||
forEach
|
||||
} from 'min-dash';
|
||||
|
||||
import { is } from '../../../util/ModelUtil';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
|
||||
export default function CopyPasteBehavior(eventBus, modeling, canvas) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
this.preExecute('elements.paste', 1500, function(context) {
|
||||
var topParent = context.topParent;
|
||||
|
||||
// always grab the latest root
|
||||
if (!topParent.parent) {
|
||||
context.topParent = canvas.getRootElement();
|
||||
}
|
||||
|
||||
if (is(topParent, 'bpmn:Lane')) {
|
||||
do {
|
||||
// unwrap Lane -> LaneSet -> (Lane | FlowElementsContainer)
|
||||
topParent = context.topParent = topParent.parent;
|
||||
|
||||
} while (is(topParent, 'bpmn:Lane') || !is(topParent, 'bpmn:Participant'));
|
||||
}
|
||||
}, true);
|
||||
|
||||
this.postExecute('elements.paste', function(context) {
|
||||
|
||||
var tree = context.tree,
|
||||
createdElements = tree.createdElements;
|
||||
|
||||
forEach(createdElements, function(data) {
|
||||
var element = data.element,
|
||||
businessObject = element.businessObject,
|
||||
descriptor = data.descriptor,
|
||||
defaultFlow;
|
||||
|
||||
if ((is(businessObject, 'bpmn:ExclusiveGateway') || is(businessObject, 'bpmn:InclusiveGateway') ||
|
||||
is(businessObject, 'bpmn:Activity')) && descriptor.default) {
|
||||
|
||||
defaultFlow = createdElements[descriptor.default];
|
||||
|
||||
// if the default flow wasn't created, means that it wasn't copied
|
||||
if (defaultFlow) {
|
||||
defaultFlow = defaultFlow.element;
|
||||
} else {
|
||||
defaultFlow = undefined;
|
||||
}
|
||||
|
||||
delete element.default;
|
||||
|
||||
modeling.updateProperties(element, { default: defaultFlow });
|
||||
}
|
||||
});
|
||||
}, true);
|
||||
}
|
||||
|
||||
|
||||
CopyPasteBehavior.$inject = [
|
||||
'eventBus',
|
||||
'modeling',
|
||||
'canvas'
|
||||
];
|
||||
|
||||
inherits(CopyPasteBehavior, CommandInterceptor);
|
||||
@@ -0,0 +1,54 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
import { is } from '../../../util/ModelUtil';
|
||||
|
||||
|
||||
/**
|
||||
* BPMN specific create boundary event behavior
|
||||
*/
|
||||
export default function CreateBoundaryEventBehavior(
|
||||
eventBus, modeling, elementFactory,
|
||||
bpmnFactory) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
/**
|
||||
* replace intermediate event with boundary event when
|
||||
* attaching it to a shape
|
||||
*/
|
||||
|
||||
this.preExecute('shape.create', function(context) {
|
||||
var shape = context.shape,
|
||||
host = context.host,
|
||||
businessObject,
|
||||
boundaryEvent;
|
||||
|
||||
var attrs = {
|
||||
cancelActivity: true
|
||||
};
|
||||
|
||||
if (host && is(shape, 'bpmn:IntermediateThrowEvent')) {
|
||||
attrs.attachedToRef = host.businessObject;
|
||||
|
||||
businessObject = bpmnFactory.create('bpmn:BoundaryEvent', attrs);
|
||||
|
||||
boundaryEvent = {
|
||||
type: 'bpmn:BoundaryEvent',
|
||||
businessObject: businessObject
|
||||
};
|
||||
|
||||
context.shape = elementFactory.createShape(boundaryEvent);
|
||||
}
|
||||
}, true);
|
||||
}
|
||||
|
||||
CreateBoundaryEventBehavior.$inject = [
|
||||
'eventBus',
|
||||
'modeling',
|
||||
'elementFactory',
|
||||
'bpmnFactory'
|
||||
];
|
||||
|
||||
inherits(CreateBoundaryEventBehavior, CommandInterceptor);
|
||||
@@ -0,0 +1,38 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
import { is } from '../../../util/ModelUtil';
|
||||
|
||||
|
||||
/**
|
||||
* BPMN specific create data object behavior
|
||||
*/
|
||||
export default function CreateDataObjectBehavior(eventBus, bpmnFactory, moddle) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
this.preExecute('shape.create', function(event) {
|
||||
|
||||
var context = event.context,
|
||||
shape = context.shape;
|
||||
|
||||
if (is(shape, 'bpmn:DataObjectReference') && shape.type !== 'label') {
|
||||
|
||||
// create a DataObject every time a DataObjectReference is created
|
||||
var dataObject = bpmnFactory.create('bpmn:DataObject');
|
||||
|
||||
// set the reference to the DataObject
|
||||
shape.businessObject.dataObjectRef = dataObject;
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
CreateDataObjectBehavior.$inject = [
|
||||
'eventBus',
|
||||
'bpmnFactory',
|
||||
'moddle'
|
||||
];
|
||||
|
||||
inherits(CreateDataObjectBehavior, CommandInterceptor);
|
||||
@@ -0,0 +1,190 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
import { is } from '../../../util/ModelUtil';
|
||||
|
||||
import { isLabel } from '../../../util/LabelUtil';
|
||||
|
||||
import { getBBox } from 'diagram-js/lib/util/Elements';
|
||||
|
||||
import { assign } from 'min-dash';
|
||||
|
||||
import { asTRBL } from 'diagram-js/lib/layout/LayoutUtil';
|
||||
|
||||
var HORIZONTAL_PARTICIPANT_PADDING = 20,
|
||||
VERTICAL_PARTICIPANT_PADDING = 20;
|
||||
|
||||
export var PARTICIPANT_BORDER_WIDTH = 30;
|
||||
|
||||
var HIGH_PRIORITY = 2000;
|
||||
|
||||
|
||||
/**
|
||||
* BPMN-specific behavior for creating participants.
|
||||
*/
|
||||
export default function CreateParticipantBehavior(canvas, eventBus, modeling) {
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
// fit participant
|
||||
eventBus.on([
|
||||
'create.start',
|
||||
'shape.move.start'
|
||||
], HIGH_PRIORITY, function(event) {
|
||||
var context = event.context,
|
||||
shape = context.shape,
|
||||
rootElement = canvas.getRootElement();
|
||||
|
||||
if (!is(shape, 'bpmn:Participant') ||
|
||||
!is(rootElement, 'bpmn:Process') ||
|
||||
!rootElement.children.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
// ignore connections, groups and labels
|
||||
var children = rootElement.children.filter(function(element) {
|
||||
return !is(element, 'bpmn:Group') &&
|
||||
!isLabel(element) &&
|
||||
!isConnection(element);
|
||||
});
|
||||
|
||||
// ensure for available children to calculate bounds
|
||||
if (!children.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
var childrenBBox = getBBox(children);
|
||||
|
||||
var participantBounds = getParticipantBounds(shape, childrenBBox);
|
||||
|
||||
// assign width and height
|
||||
assign(shape, participantBounds);
|
||||
|
||||
// assign create constraints
|
||||
context.createConstraints = getParticipantCreateConstraints(shape, childrenBBox);
|
||||
});
|
||||
|
||||
// force hovering process when creating first participant
|
||||
eventBus.on('create.start', HIGH_PRIORITY, function(event) {
|
||||
var context = event.context,
|
||||
shape = context.shape,
|
||||
rootElement = canvas.getRootElement(),
|
||||
rootElementGfx = canvas.getGraphics(rootElement);
|
||||
|
||||
function ensureHoveringProcess(event) {
|
||||
event.element = rootElement;
|
||||
event.gfx = rootElementGfx;
|
||||
}
|
||||
|
||||
if (is(shape, 'bpmn:Participant') && is(rootElement, 'bpmn:Process')) {
|
||||
eventBus.on('element.hover', HIGH_PRIORITY, ensureHoveringProcess);
|
||||
|
||||
eventBus.once('create.cleanup', function() {
|
||||
eventBus.off('element.hover', ensureHoveringProcess);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// turn process into collaboration before adding participant
|
||||
this.preExecute('shape.create', function(context) {
|
||||
var parent = context.parent,
|
||||
shape = context.shape,
|
||||
position = context.position;
|
||||
|
||||
var rootElement = canvas.getRootElement();
|
||||
|
||||
if (
|
||||
is(parent, 'bpmn:Process') &&
|
||||
is(shape, 'bpmn:Participant') &&
|
||||
!is(rootElement, 'bpmn:Collaboration')
|
||||
) {
|
||||
|
||||
// this is going to detach the process root
|
||||
// and set the returned collaboration element
|
||||
// as the new root element
|
||||
var collaborationElement = modeling.makeCollaboration();
|
||||
|
||||
// monkey patch the create context
|
||||
// so that the participant is being dropped
|
||||
// onto the new collaboration root instead
|
||||
context.position = position;
|
||||
context.parent = collaborationElement;
|
||||
|
||||
context.processRoot = parent;
|
||||
}
|
||||
}, true);
|
||||
|
||||
this.execute('shape.create', function(context) {
|
||||
var processRoot = context.processRoot,
|
||||
shape = context.shape;
|
||||
|
||||
if (processRoot) {
|
||||
context.oldProcessRef = shape.businessObject.processRef;
|
||||
|
||||
// assign the participant processRef
|
||||
shape.businessObject.processRef = processRoot.businessObject;
|
||||
}
|
||||
}, true);
|
||||
|
||||
this.revert('shape.create', function(context) {
|
||||
var processRoot = context.processRoot,
|
||||
shape = context.shape;
|
||||
|
||||
if (processRoot) {
|
||||
|
||||
// assign the participant processRef
|
||||
shape.businessObject.processRef = context.oldProcessRef;
|
||||
}
|
||||
}, true);
|
||||
|
||||
this.postExecute('shape.create', function(context) {
|
||||
var processRoot = context.processRoot,
|
||||
shape = context.shape;
|
||||
|
||||
if (processRoot) {
|
||||
|
||||
// process root is already detached at this point
|
||||
var processChildren = processRoot.children.slice();
|
||||
|
||||
modeling.moveElements(processChildren, { x: 0, y: 0 }, shape);
|
||||
}
|
||||
|
||||
}, true);
|
||||
}
|
||||
|
||||
CreateParticipantBehavior.$inject = [
|
||||
'canvas',
|
||||
'eventBus',
|
||||
'modeling'
|
||||
];
|
||||
|
||||
inherits(CreateParticipantBehavior, CommandInterceptor);
|
||||
|
||||
// helpers //////////
|
||||
|
||||
function getParticipantBounds(shape, childrenBBox) {
|
||||
childrenBBox = {
|
||||
width: childrenBBox.width + HORIZONTAL_PARTICIPANT_PADDING * 2 + PARTICIPANT_BORDER_WIDTH,
|
||||
height: childrenBBox.height + VERTICAL_PARTICIPANT_PADDING * 2
|
||||
};
|
||||
|
||||
return {
|
||||
width: Math.max(shape.width, childrenBBox.width),
|
||||
height: Math.max(shape.height, childrenBBox.height)
|
||||
};
|
||||
}
|
||||
|
||||
function getParticipantCreateConstraints(shape, childrenBBox) {
|
||||
childrenBBox = asTRBL(childrenBBox);
|
||||
|
||||
return {
|
||||
bottom: childrenBBox.top + shape.height / 2 - VERTICAL_PARTICIPANT_PADDING,
|
||||
left: childrenBBox.right - shape.width / 2 + HORIZONTAL_PARTICIPANT_PADDING,
|
||||
top: childrenBBox.bottom - shape.height / 2 + VERTICAL_PARTICIPANT_PADDING,
|
||||
right: childrenBBox.left + shape.width / 2 - HORIZONTAL_PARTICIPANT_PADDING - PARTICIPANT_BORDER_WIDTH
|
||||
};
|
||||
}
|
||||
|
||||
function isConnection(element) {
|
||||
return !!element.waypoints;
|
||||
}
|
||||
@@ -0,0 +1,158 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
import {
|
||||
add as collectionAdd,
|
||||
remove as collectionRemove
|
||||
} from 'diagram-js/lib/util/Collections';
|
||||
|
||||
import {
|
||||
find
|
||||
} from 'min-dash';
|
||||
|
||||
import {
|
||||
is
|
||||
} from '../../../util/ModelUtil';
|
||||
|
||||
var TARGET_REF_PLACEHOLDER_NAME = '__targetRef_placeholder';
|
||||
|
||||
|
||||
/**
|
||||
* This behavior makes sure we always set a fake
|
||||
* DataInputAssociation#targetRef as demanded by the BPMN 2.0
|
||||
* XSD schema.
|
||||
*
|
||||
* The reference is set to a bpmn:Property{ name: '__targetRef_placeholder' }
|
||||
* which is created on the fly and cleaned up afterwards if not needed
|
||||
* anymore.
|
||||
*
|
||||
* @param {EventBus} eventBus
|
||||
* @param {BpmnFactory} bpmnFactory
|
||||
*/
|
||||
export default function DataInputAssociationBehavior(eventBus, bpmnFactory) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
|
||||
this.executed([
|
||||
'connection.create',
|
||||
'connection.delete',
|
||||
'connection.move',
|
||||
'connection.reconnectEnd'
|
||||
], ifDataInputAssociation(fixTargetRef));
|
||||
|
||||
this.reverted([
|
||||
'connection.create',
|
||||
'connection.delete',
|
||||
'connection.move',
|
||||
'connection.reconnectEnd'
|
||||
], ifDataInputAssociation(fixTargetRef));
|
||||
|
||||
|
||||
function usesTargetRef(element, targetRef, removedConnection) {
|
||||
|
||||
var inputAssociations = element.get('dataInputAssociations');
|
||||
|
||||
return find(inputAssociations, function(association) {
|
||||
return association !== removedConnection &&
|
||||
association.targetRef === targetRef;
|
||||
});
|
||||
}
|
||||
|
||||
function getTargetRef(element, create) {
|
||||
|
||||
var properties = element.get('properties');
|
||||
|
||||
var targetRefProp = find(properties, function(p) {
|
||||
return p.name === TARGET_REF_PLACEHOLDER_NAME;
|
||||
});
|
||||
|
||||
if (!targetRefProp && create) {
|
||||
targetRefProp = bpmnFactory.create('bpmn:Property', {
|
||||
name: TARGET_REF_PLACEHOLDER_NAME
|
||||
});
|
||||
|
||||
collectionAdd(properties, targetRefProp);
|
||||
}
|
||||
|
||||
return targetRefProp;
|
||||
}
|
||||
|
||||
function cleanupTargetRef(element, connection) {
|
||||
|
||||
var targetRefProp = getTargetRef(element);
|
||||
|
||||
if (!targetRefProp) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!usesTargetRef(element, targetRefProp, connection)) {
|
||||
collectionRemove(element.get('properties'), targetRefProp);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Make sure targetRef is set to a valid property or
|
||||
* `null` if the connection is detached.
|
||||
*
|
||||
* @param {Event} event
|
||||
*/
|
||||
function fixTargetRef(event) {
|
||||
|
||||
var context = event.context,
|
||||
connection = context.connection,
|
||||
connectionBo = connection.businessObject,
|
||||
target = connection.target,
|
||||
targetBo = target && target.businessObject,
|
||||
newTarget = context.newTarget,
|
||||
newTargetBo = newTarget && newTarget.businessObject,
|
||||
oldTarget = context.oldTarget || context.target,
|
||||
oldTargetBo = oldTarget && oldTarget.businessObject;
|
||||
|
||||
var dataAssociation = connection.businessObject,
|
||||
targetRefProp;
|
||||
|
||||
if (oldTargetBo && oldTargetBo !== targetBo) {
|
||||
cleanupTargetRef(oldTargetBo, connectionBo);
|
||||
}
|
||||
|
||||
if (newTargetBo && newTargetBo !== targetBo) {
|
||||
cleanupTargetRef(newTargetBo, connectionBo);
|
||||
}
|
||||
|
||||
if (targetBo) {
|
||||
targetRefProp = getTargetRef(targetBo, true);
|
||||
dataAssociation.targetRef = targetRefProp;
|
||||
} else {
|
||||
dataAssociation.targetRef = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
DataInputAssociationBehavior.$inject = [
|
||||
'eventBus',
|
||||
'bpmnFactory'
|
||||
];
|
||||
|
||||
inherits(DataInputAssociationBehavior, CommandInterceptor);
|
||||
|
||||
|
||||
/**
|
||||
* Only call the given function when the event
|
||||
* touches a bpmn:DataInputAssociation.
|
||||
*
|
||||
* @param {Function} fn
|
||||
* @return {Function}
|
||||
*/
|
||||
function ifDataInputAssociation(fn) {
|
||||
|
||||
return function(event) {
|
||||
var context = event.context,
|
||||
connection = context.connection;
|
||||
|
||||
if (is(connection, 'bpmn:DataInputAssociation')) {
|
||||
return fn(event);
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
import { is } from '../../../util/ModelUtil';
|
||||
|
||||
import { isAny } from '../util/ModelingUtil';
|
||||
|
||||
import UpdateSemanticParentHandler from '../cmd/UpdateSemanticParentHandler';
|
||||
|
||||
|
||||
/**
|
||||
* BPMN specific data store behavior
|
||||
*/
|
||||
export default function DataStoreBehavior(
|
||||
canvas, commandStack, elementRegistry,
|
||||
eventBus) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
commandStack.registerHandler('dataStore.updateContainment', UpdateSemanticParentHandler);
|
||||
|
||||
function getFirstParticipant() {
|
||||
return elementRegistry.filter(function(element) {
|
||||
return is(element, 'bpmn:Participant');
|
||||
})[0];
|
||||
}
|
||||
|
||||
function getDataStores(element) {
|
||||
return element.children.filter(function(child) {
|
||||
return is(child, 'bpmn:DataStoreReference') && !child.labelTarget;
|
||||
});
|
||||
}
|
||||
|
||||
function updateDataStoreParent(dataStore, newDataStoreParent) {
|
||||
var dataStoreBo = dataStore.businessObject || dataStore;
|
||||
|
||||
newDataStoreParent = newDataStoreParent || getFirstParticipant();
|
||||
|
||||
if (newDataStoreParent) {
|
||||
var newDataStoreParentBo = newDataStoreParent.businessObject || newDataStoreParent;
|
||||
|
||||
commandStack.execute('dataStore.updateContainment', {
|
||||
dataStoreBo: dataStoreBo,
|
||||
newSemanticParent: newDataStoreParentBo.processRef || newDataStoreParentBo,
|
||||
newDiParent: newDataStoreParentBo.di
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// disable auto-resize for data stores
|
||||
this.preExecute('shape.create', function(event) {
|
||||
|
||||
var context = event.context,
|
||||
shape = context.shape;
|
||||
|
||||
if (is(shape, 'bpmn:DataStoreReference') &&
|
||||
shape.type !== 'label') {
|
||||
|
||||
if (!context.hints) {
|
||||
context.hints = {};
|
||||
}
|
||||
|
||||
// prevent auto resizing
|
||||
context.hints.autoResize = false;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// disable auto-resize for data stores
|
||||
this.preExecute('elements.move', function(event) {
|
||||
var context = event.context,
|
||||
shapes = context.shapes;
|
||||
|
||||
var dataStoreReferences = shapes.filter(function(shape) {
|
||||
return is(shape, 'bpmn:DataStoreReference');
|
||||
});
|
||||
|
||||
if (dataStoreReferences.length) {
|
||||
if (!context.hints) {
|
||||
context.hints = {};
|
||||
}
|
||||
|
||||
// prevent auto resizing for data store references
|
||||
context.hints.autoResize = shapes.filter(function(shape) {
|
||||
return !is(shape, 'bpmn:DataStoreReference');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// update parent on data store created
|
||||
this.postExecute('shape.create', function(event) {
|
||||
var context = event.context,
|
||||
shape = context.shape,
|
||||
parent = shape.parent;
|
||||
|
||||
|
||||
if (is(shape, 'bpmn:DataStoreReference') &&
|
||||
shape.type !== 'label' &&
|
||||
is(parent, 'bpmn:Collaboration')) {
|
||||
|
||||
updateDataStoreParent(shape);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// update parent on data store moved
|
||||
this.postExecute('shape.move', function(event) {
|
||||
var context = event.context,
|
||||
shape = context.shape,
|
||||
oldParent = context.oldParent,
|
||||
parent = shape.parent;
|
||||
|
||||
if (is(oldParent, 'bpmn:Collaboration')) {
|
||||
|
||||
// do nothing if not necessary
|
||||
return;
|
||||
}
|
||||
|
||||
if (is(shape, 'bpmn:DataStoreReference') &&
|
||||
shape.type !== 'label' &&
|
||||
is(parent, 'bpmn:Collaboration')) {
|
||||
|
||||
var participant = is(oldParent, 'bpmn:Participant') ?
|
||||
oldParent :
|
||||
getAncestor(oldParent, 'bpmn:Participant');
|
||||
|
||||
updateDataStoreParent(shape, participant);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// update data store parents on participant or subprocess deleted
|
||||
this.postExecute('shape.delete', function(event) {
|
||||
var context = event.context,
|
||||
shape = context.shape,
|
||||
rootElement = canvas.getRootElement();
|
||||
|
||||
if (isAny(shape, [ 'bpmn:Participant', 'bpmn:SubProcess' ])
|
||||
&& is(rootElement, 'bpmn:Collaboration')) {
|
||||
getDataStores(rootElement)
|
||||
.filter(function(dataStore) {
|
||||
return isDescendant(dataStore, shape);
|
||||
})
|
||||
.forEach(function(dataStore) {
|
||||
updateDataStoreParent(dataStore);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// update data store parents on collaboration -> process
|
||||
this.postExecute('canvas.updateRoot', function(event) {
|
||||
var context = event.context,
|
||||
oldRoot = context.oldRoot,
|
||||
newRoot = context.newRoot;
|
||||
|
||||
var dataStores = getDataStores(oldRoot);
|
||||
|
||||
dataStores.forEach(function(dataStore) {
|
||||
|
||||
if (is(newRoot, 'bpmn:Process')) {
|
||||
updateDataStoreParent(dataStore, newRoot);
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
DataStoreBehavior.$inject = [
|
||||
'canvas',
|
||||
'commandStack',
|
||||
'elementRegistry',
|
||||
'eventBus',
|
||||
];
|
||||
|
||||
inherits(DataStoreBehavior, CommandInterceptor);
|
||||
|
||||
|
||||
// helpers //////////
|
||||
|
||||
function isDescendant(descendant, ancestor) {
|
||||
var descendantBo = descendant.businessObject || descendant,
|
||||
ancestorBo = ancestor.businessObject || ancestor;
|
||||
|
||||
while (descendantBo.$parent) {
|
||||
if (descendantBo.$parent === ancestorBo.processRef || ancestorBo) {
|
||||
return true;
|
||||
}
|
||||
|
||||
descendantBo = descendantBo.$parent;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function getAncestor(element, type) {
|
||||
|
||||
while (element.parent) {
|
||||
if (is(element.parent, type)) {
|
||||
return element.parent;
|
||||
}
|
||||
|
||||
element = element.parent;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
import { is } from '../../../util/ModelUtil';
|
||||
|
||||
import {
|
||||
getChildLanes
|
||||
} from '../util/LaneUtil';
|
||||
|
||||
import {
|
||||
eachElement
|
||||
} from 'diagram-js/lib/util/Elements';
|
||||
|
||||
|
||||
var LOW_PRIORITY = 500;
|
||||
|
||||
|
||||
/**
|
||||
* BPMN specific delete lane behavior
|
||||
*/
|
||||
export default function DeleteLaneBehavior(eventBus, modeling, spaceTool) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
|
||||
function compensateLaneDelete(shape, oldParent) {
|
||||
|
||||
var siblings = getChildLanes(oldParent);
|
||||
|
||||
var topAffected = [];
|
||||
var bottomAffected = [];
|
||||
|
||||
eachElement(siblings, function(element) {
|
||||
|
||||
if (element.y > shape.y) {
|
||||
bottomAffected.push(element);
|
||||
} else {
|
||||
topAffected.push(element);
|
||||
}
|
||||
|
||||
return element.children;
|
||||
});
|
||||
|
||||
if (!siblings.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
var offset;
|
||||
|
||||
if (bottomAffected.length && topAffected.length) {
|
||||
offset = shape.height / 2;
|
||||
} else {
|
||||
offset = shape.height;
|
||||
}
|
||||
|
||||
var topAdjustments,
|
||||
bottomAdjustments;
|
||||
|
||||
if (topAffected.length) {
|
||||
topAdjustments = spaceTool.calculateAdjustments(
|
||||
topAffected, 'y', offset, shape.y - 10);
|
||||
|
||||
spaceTool.makeSpace(
|
||||
topAdjustments.movingShapes,
|
||||
topAdjustments.resizingShapes,
|
||||
{ x: 0, y: offset }, 's');
|
||||
}
|
||||
|
||||
if (bottomAffected.length) {
|
||||
bottomAdjustments = spaceTool.calculateAdjustments(
|
||||
bottomAffected, 'y', -offset, shape.y + shape.height + 10);
|
||||
|
||||
spaceTool.makeSpace(
|
||||
bottomAdjustments.movingShapes,
|
||||
bottomAdjustments.resizingShapes,
|
||||
{ x: 0, y: -offset }, 'n');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Adjust sizes of other lanes after lane deletion
|
||||
*/
|
||||
this.postExecuted('shape.delete', LOW_PRIORITY, function(event) {
|
||||
|
||||
var context = event.context,
|
||||
hints = context.hints,
|
||||
shape = context.shape,
|
||||
oldParent = context.oldParent;
|
||||
|
||||
// only compensate lane deletes
|
||||
if (!is(shape, 'bpmn:Lane')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// compensate root deletes only
|
||||
if (hints && hints.nested) {
|
||||
return;
|
||||
}
|
||||
|
||||
compensateLaneDelete(shape, oldParent);
|
||||
});
|
||||
}
|
||||
|
||||
DeleteLaneBehavior.$inject = [
|
||||
'eventBus',
|
||||
'modeling',
|
||||
'spaceTool'
|
||||
];
|
||||
|
||||
inherits(DeleteLaneBehavior, CommandInterceptor);
|
||||
@@ -0,0 +1,75 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
import {
|
||||
getBusinessObject,
|
||||
is
|
||||
} from '../../../util/ModelUtil';
|
||||
|
||||
import { isLabel } from '../../../util/LabelUtil';
|
||||
|
||||
|
||||
/**
|
||||
* BPMN specific detach event behavior
|
||||
*/
|
||||
export default function DetachEventBehavior(eventBus, bpmnReplace) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
/**
|
||||
* replace boundary event with intermediate event when
|
||||
* detaching from a shape
|
||||
*/
|
||||
|
||||
this.preExecute('elements.move', function(context) {
|
||||
var shapes = context.shapes,
|
||||
host = context.newHost,
|
||||
shape,
|
||||
eventDefinition,
|
||||
intermediateEvent,
|
||||
newShape;
|
||||
|
||||
if (shapes.length !== 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
shape = shapes[0];
|
||||
|
||||
if (!isLabel(shape) && !host && is(shape, 'bpmn:BoundaryEvent')) {
|
||||
|
||||
eventDefinition = getEventDefinition(shape);
|
||||
|
||||
if (eventDefinition) {
|
||||
intermediateEvent = {
|
||||
type: 'bpmn:IntermediateCatchEvent',
|
||||
eventDefinitionType: eventDefinition.$type
|
||||
};
|
||||
} else {
|
||||
intermediateEvent = {
|
||||
type: 'bpmn:IntermediateThrowEvent'
|
||||
};
|
||||
}
|
||||
|
||||
newShape = bpmnReplace.replaceElement(shape, intermediateEvent, { layoutConnection: false });
|
||||
|
||||
context.shapes = [ newShape ];
|
||||
}
|
||||
}, true);
|
||||
}
|
||||
|
||||
DetachEventBehavior.$inject = [
|
||||
'eventBus',
|
||||
'bpmnReplace'
|
||||
];
|
||||
|
||||
inherits(DetachEventBehavior, CommandInterceptor);
|
||||
|
||||
|
||||
|
||||
// helper /////
|
||||
function getEventDefinition(element) {
|
||||
var bo = getBusinessObject(element);
|
||||
|
||||
return bo && bo.eventDefinitions && bo.eventDefinitions[0];
|
||||
}
|
||||
@@ -0,0 +1,206 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import {
|
||||
assign,
|
||||
find,
|
||||
filter
|
||||
} from 'min-dash';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
import {
|
||||
getApproxIntersection
|
||||
} from 'diagram-js/lib/util/LineIntersection';
|
||||
|
||||
|
||||
export default function DropOnFlowBehavior(eventBus, bpmnRules, modeling) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
/**
|
||||
* Reconnect start / end of a connection after
|
||||
* dropping an element on a flow.
|
||||
*/
|
||||
|
||||
function insertShape(shape, targetFlow, position) {
|
||||
var waypoints = targetFlow.waypoints,
|
||||
waypointsBefore,
|
||||
waypointsAfter,
|
||||
dockingPoint,
|
||||
source,
|
||||
target,
|
||||
incomingConnection,
|
||||
outgoingConnection,
|
||||
oldOutgoing = shape.outgoing.slice(),
|
||||
oldIncoming = shape.incoming.slice();
|
||||
|
||||
var intersection = getApproxIntersection(waypoints, position);
|
||||
|
||||
if (intersection) {
|
||||
waypointsBefore = waypoints.slice(0, intersection.index);
|
||||
waypointsAfter = waypoints.slice(intersection.index + (intersection.bendpoint ? 1 : 0));
|
||||
|
||||
// due to inaccuracy intersection might have been found
|
||||
if (!waypointsBefore.length || !waypointsAfter.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
dockingPoint = intersection.bendpoint ? waypoints[intersection.index] : position;
|
||||
|
||||
// if last waypointBefore is inside shape's bounds, ignore docking point
|
||||
if (!isPointInsideBBox(shape, waypointsBefore[waypointsBefore.length-1])) {
|
||||
waypointsBefore.push(copy(dockingPoint));
|
||||
}
|
||||
|
||||
// if first waypointAfter is inside shape's bounds, ignore docking point
|
||||
if (!isPointInsideBBox(shape, waypointsAfter[0])) {
|
||||
waypointsAfter.unshift(copy(dockingPoint));
|
||||
}
|
||||
}
|
||||
|
||||
source = targetFlow.source;
|
||||
target = targetFlow.target;
|
||||
|
||||
if (bpmnRules.canConnect(source, shape, targetFlow)) {
|
||||
// reconnect source -> inserted shape
|
||||
modeling.reconnectEnd(targetFlow, shape, waypointsBefore || position);
|
||||
|
||||
incomingConnection = targetFlow;
|
||||
}
|
||||
|
||||
if (bpmnRules.canConnect(shape, target, targetFlow)) {
|
||||
|
||||
if (!incomingConnection) {
|
||||
// reconnect inserted shape -> end
|
||||
modeling.reconnectStart(targetFlow, shape, waypointsAfter || position);
|
||||
|
||||
outgoingConnection = targetFlow;
|
||||
} else {
|
||||
outgoingConnection = modeling.connect(
|
||||
shape, target, { type: targetFlow.type, waypoints: waypointsAfter }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
var duplicateConnections = [].concat(
|
||||
|
||||
incomingConnection && filter(oldIncoming, function(connection) {
|
||||
return connection.source === incomingConnection.source;
|
||||
}) || [],
|
||||
|
||||
outgoingConnection && filter(oldOutgoing, function(connection) {
|
||||
return connection.source === outgoingConnection.source;
|
||||
}) || []
|
||||
);
|
||||
|
||||
if (duplicateConnections.length) {
|
||||
modeling.removeElements(duplicateConnections);
|
||||
}
|
||||
}
|
||||
|
||||
this.preExecute('elements.move', function(context) {
|
||||
|
||||
var newParent = context.newParent,
|
||||
shapes = context.shapes,
|
||||
delta = context.delta,
|
||||
shape = shapes[0];
|
||||
|
||||
if (!shape || !newParent) {
|
||||
return;
|
||||
}
|
||||
|
||||
// if the new parent is a connection,
|
||||
// change it to the new parent's parent
|
||||
if (newParent && newParent.waypoints) {
|
||||
context.newParent = newParent = newParent.parent;
|
||||
}
|
||||
|
||||
var shapeMid = getMid(shape);
|
||||
var newShapeMid = {
|
||||
x: shapeMid.x + delta.x,
|
||||
y: shapeMid.y + delta.y
|
||||
};
|
||||
|
||||
// find a connection which intersects with the
|
||||
// element's mid point
|
||||
var connection = find(newParent.children, function(element) {
|
||||
var canInsert = bpmnRules.canInsert(shapes, element);
|
||||
|
||||
return canInsert && getApproxIntersection(element.waypoints, newShapeMid);
|
||||
});
|
||||
|
||||
if (connection) {
|
||||
context.targetFlow = connection;
|
||||
context.position = newShapeMid;
|
||||
}
|
||||
|
||||
}, true);
|
||||
|
||||
this.postExecuted('elements.move', function(context) {
|
||||
|
||||
var shapes = context.shapes,
|
||||
targetFlow = context.targetFlow,
|
||||
position = context.position;
|
||||
|
||||
if (targetFlow) {
|
||||
insertShape(shapes[0], targetFlow, position);
|
||||
}
|
||||
|
||||
}, true);
|
||||
|
||||
this.preExecute('shape.create', function(context) {
|
||||
|
||||
var parent = context.parent,
|
||||
shape = context.shape;
|
||||
|
||||
if (bpmnRules.canInsert(shape, parent)) {
|
||||
context.targetFlow = parent;
|
||||
context.parent = parent.parent;
|
||||
}
|
||||
}, true);
|
||||
|
||||
this.postExecuted('shape.create', function(context) {
|
||||
|
||||
var shape = context.shape,
|
||||
targetFlow = context.targetFlow,
|
||||
position = context.position;
|
||||
|
||||
if (targetFlow) {
|
||||
insertShape(shape, targetFlow, position);
|
||||
}
|
||||
}, true);
|
||||
}
|
||||
|
||||
inherits(DropOnFlowBehavior, CommandInterceptor);
|
||||
|
||||
DropOnFlowBehavior.$inject = [
|
||||
'eventBus',
|
||||
'bpmnRules',
|
||||
'modeling'
|
||||
];
|
||||
|
||||
|
||||
// helpers /////////////////////
|
||||
|
||||
function isPointInsideBBox(bbox, point) {
|
||||
var x = point.x,
|
||||
y = point.y;
|
||||
|
||||
return x >= bbox.x &&
|
||||
x <= bbox.x + bbox.width &&
|
||||
y >= bbox.y &&
|
||||
y <= bbox.y + bbox.height;
|
||||
}
|
||||
|
||||
function copy(obj) {
|
||||
return assign({}, obj);
|
||||
}
|
||||
|
||||
function getMid(bounds) {
|
||||
|
||||
return {
|
||||
x: Math.round(bounds.x + bounds.width / 2),
|
||||
y: Math.round(bounds.y + bounds.height / 2)
|
||||
};
|
||||
}
|
||||
|
||||
@@ -0,0 +1,80 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
import { is } from '../../../util/ModelUtil';
|
||||
|
||||
export default function EventBasedGatewayBehavior(eventBus, modeling) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
/**
|
||||
* Remove existing sequence flows of event-based target before connecting
|
||||
* from event-based gateway.
|
||||
*/
|
||||
this.preExecuted('connection.create', function(event) {
|
||||
|
||||
var source = event.context.source,
|
||||
target = event.context.target,
|
||||
existingIncomingConnections = target.incoming.slice();
|
||||
|
||||
if (
|
||||
is(source, 'bpmn:EventBasedGateway') &&
|
||||
target.incoming.length
|
||||
) {
|
||||
|
||||
existingIncomingConnections.filter(isSequenceFlow)
|
||||
.forEach(function(sequenceFlow) {
|
||||
modeling.removeConnection(sequenceFlow);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* After replacing shape with event-based gateway, remove incoming sequence
|
||||
* flows of event-based targets which do not belong to event-based gateway
|
||||
* source.
|
||||
*/
|
||||
this.preExecuted('shape.replace', function(event) {
|
||||
|
||||
var newShape = event.context.newShape,
|
||||
newShapeTargets,
|
||||
newShapeTargetsIncomingSequenceFlows;
|
||||
|
||||
if (!is(newShape, 'bpmn:EventBasedGateway')) {
|
||||
return;
|
||||
}
|
||||
|
||||
newShapeTargets = newShape.outgoing.filter(isSequenceFlow)
|
||||
.map(function(sequenceFlow) {
|
||||
return sequenceFlow.target;
|
||||
});
|
||||
|
||||
newShapeTargetsIncomingSequenceFlows = newShapeTargets.reduce(function(sequenceFlows, target) {
|
||||
var incomingSequenceFlows = target.incoming.filter(isSequenceFlow);
|
||||
|
||||
return sequenceFlows.concat(incomingSequenceFlows);
|
||||
}, []);
|
||||
|
||||
newShapeTargetsIncomingSequenceFlows.forEach(function(sequenceFlow) {
|
||||
if (sequenceFlow.source !== newShape) {
|
||||
modeling.removeConnection(sequenceFlow);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
EventBasedGatewayBehavior.$inject = [
|
||||
'eventBus',
|
||||
'modeling'
|
||||
];
|
||||
|
||||
inherits(EventBasedGatewayBehavior, CommandInterceptor);
|
||||
|
||||
|
||||
|
||||
// helpers //////////////////////
|
||||
|
||||
function isSequenceFlow(connection) {
|
||||
return is(connection, 'bpmn:SequenceFlow');
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
import { getLanesRoot } from '../util/LaneUtil';
|
||||
|
||||
import { is } from '../../../util/ModelUtil';
|
||||
|
||||
import { isAny } from '../util/ModelingUtil';
|
||||
|
||||
var HIGH_PRIORITY = 1500;
|
||||
var HIGHEST_PRIORITY = 2000;
|
||||
|
||||
|
||||
/**
|
||||
* Correct hover targets in certain situations to improve diagram interaction.
|
||||
*
|
||||
* @param {ElementRegistry} elementRegistry
|
||||
* @param {EventBus} eventBus
|
||||
* @param {Canvas} canvas
|
||||
*/
|
||||
export default function FixHoverBehavior(elementRegistry, eventBus, canvas) {
|
||||
|
||||
eventBus.on([
|
||||
'create.hover',
|
||||
'create.move',
|
||||
'create.end',
|
||||
'shape.move.hover',
|
||||
'shape.move.move',
|
||||
'shape.move.end'
|
||||
], HIGH_PRIORITY, function(event) {
|
||||
var context = event.context,
|
||||
shape = context.shape || event.shape,
|
||||
hover = event.hover;
|
||||
|
||||
// ensure elements are not dropped onto a bpmn:Lane but onto
|
||||
// the underlying bpmn:Participant
|
||||
if (is(hover, 'bpmn:Lane') && !isAny(shape, [ 'bpmn:Lane', 'bpmn:Participant' ])) {
|
||||
event.hover = getLanesRoot(hover);
|
||||
event.hoverGfx = elementRegistry.getGraphics(event.hover);
|
||||
}
|
||||
|
||||
var rootElement = canvas.getRootElement();
|
||||
|
||||
// ensure bpmn:Group and label elements are dropped
|
||||
// always onto the root
|
||||
if (hover !== rootElement && (shape.labelTarget || is(shape, 'bpmn:Group'))) {
|
||||
event.hover = rootElement;
|
||||
event.hoverGfx = elementRegistry.getGraphics(event.hover);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
eventBus.on([
|
||||
'connect.hover',
|
||||
'global-connect.hover'
|
||||
], HIGH_PRIORITY, function(event) {
|
||||
var hover = event.hover;
|
||||
|
||||
// ensure connections start/end on bpmn:Participant,
|
||||
// not the underlying bpmn:Lane
|
||||
if (is(hover, 'bpmn:Lane')) {
|
||||
event.hover = getLanesRoot(hover) || hover;
|
||||
event.hoverGfx = elementRegistry.getGraphics(event.hover);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
eventBus.on([
|
||||
'bendpoint.move.hover'
|
||||
], HIGH_PRIORITY, function(event) {
|
||||
var context = event.context,
|
||||
type = context.type,
|
||||
hover = event.hover;
|
||||
|
||||
// ensure reconnect start/end on bpmn:Participant,
|
||||
// not the underlying bpmn:Lane
|
||||
if (is(hover, 'bpmn:Lane') && /reconnect/.test(type)) {
|
||||
event.hover = getLanesRoot(hover) || hover;
|
||||
event.hoverGfx = elementRegistry.getGraphics(event.hover);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
eventBus.on([
|
||||
'connect.start'
|
||||
], HIGH_PRIORITY, function(event) {
|
||||
|
||||
var context = event.context,
|
||||
source = context.source;
|
||||
|
||||
// ensure connect start on bpmn:Participant,
|
||||
// not the underlying bpmn:Lane
|
||||
if (is(source, 'bpmn:Lane')) {
|
||||
context.source = getLanesRoot(source) || source;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// allow movement of participants from lanes
|
||||
eventBus.on('shape.move.start', HIGHEST_PRIORITY, function(event) {
|
||||
var shape = event.shape;
|
||||
|
||||
if (is(shape, 'bpmn:Lane')) {
|
||||
event.shape = getLanesRoot(shape) || shape;
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
FixHoverBehavior.$inject = [
|
||||
'elementRegistry',
|
||||
'eventBus',
|
||||
'canvas'
|
||||
];
|
||||
@@ -0,0 +1,192 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
import {
|
||||
add as collectionAdd,
|
||||
remove as collectionRemove
|
||||
} from 'diagram-js/lib/util/Collections';
|
||||
|
||||
import {
|
||||
getBusinessObject,
|
||||
is
|
||||
} from '../../../util/ModelUtil';
|
||||
|
||||
import {
|
||||
createCategoryValue
|
||||
} from './util/CategoryUtil';
|
||||
|
||||
/**
|
||||
* BPMN specific Group behavior
|
||||
*/
|
||||
export default function GroupBehavior(eventBus, bpmnFactory, canvas, elementRegistry) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
/**
|
||||
* Gets process definitions
|
||||
*
|
||||
* @return {ModdleElement} definitions
|
||||
*/
|
||||
function getDefinitions() {
|
||||
var rootElement = canvas.getRootElement(),
|
||||
businessObject = getBusinessObject(rootElement);
|
||||
|
||||
return businessObject.$parent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes a referenced category value for a given group shape
|
||||
*
|
||||
* @param {djs.model.Shape} shape
|
||||
*/
|
||||
function removeReferencedCategoryValue(shape) {
|
||||
|
||||
var businessObject = getBusinessObject(shape),
|
||||
categoryValue = businessObject.categoryValueRef,
|
||||
category = categoryValue.$parent;
|
||||
|
||||
if (!categoryValue) {
|
||||
return;
|
||||
}
|
||||
|
||||
collectionRemove(category.categoryValue, categoryValue);
|
||||
|
||||
// cleanup category if it is empty
|
||||
if (category && !category.categoryValue.length) {
|
||||
removeCategory(category);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes a given category from the definitions
|
||||
*
|
||||
* @param {ModdleElement} category
|
||||
*/
|
||||
function removeCategory(category) {
|
||||
|
||||
var definitions = getDefinitions();
|
||||
|
||||
collectionRemove(definitions.get('rootElements'), category);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns all group element in the current registry
|
||||
*
|
||||
* @return {Array<djs.model.shape>} a list of group shapes
|
||||
*/
|
||||
function getGroupElements() {
|
||||
return elementRegistry.filter(function(e) {
|
||||
return is(e, 'bpmn:Group');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if given categoryValue is referenced in one of the given elements
|
||||
*
|
||||
* @param {Array<djs.model.shape>} elements
|
||||
* @param {ModdleElement} categoryValue
|
||||
* @return {Boolean}
|
||||
*/
|
||||
function isReferenced(elements, categoryValue) {
|
||||
return elements.some(function(e) {
|
||||
|
||||
var businessObject = getBusinessObject(e);
|
||||
|
||||
return businessObject.categoryValueRef
|
||||
&& businessObject.categoryValueRef === categoryValue;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* remove referenced category + value when group was deleted
|
||||
*/
|
||||
this.executed('shape.delete', function(event) {
|
||||
|
||||
var context = event.context,
|
||||
shape = context.shape;
|
||||
|
||||
if (is(shape, 'bpmn:Group')) {
|
||||
|
||||
var businessObject = getBusinessObject(shape),
|
||||
categoryValueRef = businessObject.categoryValueRef,
|
||||
groupElements = getGroupElements();
|
||||
|
||||
if (!isReferenced(groupElements, categoryValueRef)) {
|
||||
removeReferencedCategoryValue(shape);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* re-attach removed category
|
||||
*/
|
||||
this.reverted('shape.delete', function(event) {
|
||||
|
||||
var context = event.context,
|
||||
shape = context.shape;
|
||||
|
||||
if (is(shape, 'bpmn:Group')) {
|
||||
|
||||
var businessObject = getBusinessObject(shape),
|
||||
categoryValueRef = businessObject.categoryValueRef,
|
||||
definitions = getDefinitions(),
|
||||
category = categoryValueRef ? categoryValueRef.$parent : null;
|
||||
|
||||
collectionAdd(category.get('categoryValue'), categoryValueRef);
|
||||
collectionAdd(definitions.get('rootElements'), category);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* create new category + value when group was created
|
||||
*/
|
||||
this.execute('shape.create', function(event) {
|
||||
|
||||
var context = event.context,
|
||||
shape = context.shape,
|
||||
businessObject = getBusinessObject(shape),
|
||||
oldBusinessObject = shape.oldBusinessObject;
|
||||
|
||||
if (is(businessObject, 'bpmn:Group') && !businessObject.categoryValueRef) {
|
||||
|
||||
var definitions = getDefinitions(),
|
||||
categoryValue = createCategoryValue(definitions, bpmnFactory);
|
||||
|
||||
// set name from copied group if existing
|
||||
if (oldBusinessObject && oldBusinessObject.categoryValueRef) {
|
||||
categoryValue.value = oldBusinessObject.categoryValueRef.value;
|
||||
}
|
||||
|
||||
// link the reference to the Group
|
||||
businessObject.categoryValueRef = categoryValue;
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
this.revert('shape.create', function(event) {
|
||||
|
||||
var context = event.context,
|
||||
shape = context.shape;
|
||||
|
||||
if (is(shape, 'bpmn:Group')) {
|
||||
|
||||
removeReferencedCategoryValue(shape);
|
||||
|
||||
delete getBusinessObject(shape).categoryValueRef;
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
GroupBehavior.$inject = [
|
||||
'eventBus',
|
||||
'bpmnFactory',
|
||||
'canvas',
|
||||
'elementRegistry'
|
||||
];
|
||||
|
||||
inherits(GroupBehavior, CommandInterceptor);
|
||||
@@ -0,0 +1,81 @@
|
||||
import {
|
||||
getMid
|
||||
} from 'diagram-js/lib/layout/LayoutUtil';
|
||||
|
||||
import lineIntersect from './util/LineIntersect';
|
||||
|
||||
|
||||
/**
|
||||
* Fix broken dockings after DI imports.
|
||||
*
|
||||
* @param {EventBus} eventBus
|
||||
*/
|
||||
export default function ImportDockingFix(eventBus) {
|
||||
|
||||
function adjustDocking(startPoint, nextPoint, elementMid) {
|
||||
|
||||
var elementTop = {
|
||||
x: elementMid.x,
|
||||
y: elementMid.y - 50
|
||||
};
|
||||
|
||||
var elementLeft = {
|
||||
x: elementMid.x - 50,
|
||||
y: elementMid.y
|
||||
};
|
||||
|
||||
var verticalIntersect = lineIntersect(startPoint, nextPoint, elementMid, elementTop),
|
||||
horizontalIntersect = lineIntersect(startPoint, nextPoint, elementMid, elementLeft);
|
||||
|
||||
// original is horizontal or vertical center cross intersection
|
||||
var centerIntersect;
|
||||
|
||||
if (verticalIntersect && horizontalIntersect) {
|
||||
if (getDistance(verticalIntersect, elementMid) > getDistance(horizontalIntersect, elementMid)) {
|
||||
centerIntersect = horizontalIntersect;
|
||||
} else {
|
||||
centerIntersect = verticalIntersect;
|
||||
}
|
||||
} else {
|
||||
centerIntersect = verticalIntersect || horizontalIntersect;
|
||||
}
|
||||
|
||||
startPoint.original = centerIntersect;
|
||||
}
|
||||
|
||||
function fixDockings(connection) {
|
||||
var waypoints = connection.waypoints;
|
||||
|
||||
adjustDocking(
|
||||
waypoints[0],
|
||||
waypoints[1],
|
||||
getMid(connection.source)
|
||||
);
|
||||
|
||||
adjustDocking(
|
||||
waypoints[waypoints.length - 1],
|
||||
waypoints[waypoints.length - 2],
|
||||
getMid(connection.target)
|
||||
);
|
||||
}
|
||||
|
||||
eventBus.on('bpmnElement.added', function(e) {
|
||||
|
||||
var element = e.element;
|
||||
|
||||
if (element.waypoints) {
|
||||
fixDockings(element);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ImportDockingFix.$inject = [
|
||||
'eventBus'
|
||||
];
|
||||
|
||||
|
||||
// helpers //////////////////////
|
||||
|
||||
function getDistance(p1, p2) {
|
||||
return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
import {
|
||||
getBusinessObject
|
||||
} from '../../../util/ModelUtil';
|
||||
|
||||
import {
|
||||
isAny
|
||||
} from '../util/ModelingUtil';
|
||||
|
||||
/**
|
||||
* A component that makes sure that each created or updated
|
||||
* Pool and Lane is assigned an isHorizontal property set to true.
|
||||
*
|
||||
* @param {EventBus} eventBus
|
||||
*/
|
||||
export default function IsHorizontalFix(eventBus) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
var elementTypesToUpdate = [
|
||||
'bpmn:Participant',
|
||||
'bpmn:Lane'
|
||||
];
|
||||
|
||||
this.executed([ 'shape.move', 'shape.create', 'shape.resize' ], function(event) {
|
||||
var bo = getBusinessObject(event.context.shape);
|
||||
|
||||
if (isAny(bo, elementTypesToUpdate) && !bo.di.get('isHorizontal')) {
|
||||
// set attribute directly to avoid modeling#updateProperty side effects
|
||||
bo.di.set('isHorizontal', true);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
IsHorizontalFix.$inject = [ 'eventBus' ];
|
||||
|
||||
inherits(IsHorizontalFix, CommandInterceptor);
|
||||
@@ -0,0 +1,381 @@
|
||||
import {
|
||||
assign
|
||||
} from 'min-dash';
|
||||
|
||||
import inherits from 'inherits';
|
||||
|
||||
import {
|
||||
is,
|
||||
getBusinessObject
|
||||
} from '../../../util/ModelUtil';
|
||||
|
||||
import {
|
||||
isLabelExternal,
|
||||
getExternalLabelMid,
|
||||
hasExternalLabel
|
||||
} from '../../../util/LabelUtil';
|
||||
|
||||
import {
|
||||
getLabel
|
||||
} from '../../label-editing/LabelUtil';
|
||||
|
||||
import {
|
||||
getLabelAdjustment
|
||||
} from './util/LabelLayoutUtil';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
import {
|
||||
getNewAttachPoint
|
||||
} from 'diagram-js/lib/util/AttachUtil';
|
||||
|
||||
import {
|
||||
getMid,
|
||||
roundPoint
|
||||
} from 'diagram-js/lib/layout/LayoutUtil';
|
||||
|
||||
import {
|
||||
delta
|
||||
} from 'diagram-js/lib/util/PositionUtil';
|
||||
|
||||
import {
|
||||
sortBy
|
||||
} from 'min-dash';
|
||||
|
||||
import {
|
||||
getDistancePointLine,
|
||||
perpendicularFoot
|
||||
} from './util/GeometricUtil';
|
||||
|
||||
var DEFAULT_LABEL_DIMENSIONS = {
|
||||
width: 90,
|
||||
height: 20
|
||||
};
|
||||
|
||||
var NAME_PROPERTY = 'name';
|
||||
var TEXT_PROPERTY = 'text';
|
||||
|
||||
/**
|
||||
* A component that makes sure that external labels are added
|
||||
* together with respective elements and properly updated (DI wise)
|
||||
* during move.
|
||||
*
|
||||
* @param {EventBus} eventBus
|
||||
* @param {Modeling} modeling
|
||||
* @param {BpmnFactory} bpmnFactory
|
||||
* @param {TextRenderer} textRenderer
|
||||
*/
|
||||
export default function LabelBehavior(
|
||||
eventBus, modeling, bpmnFactory,
|
||||
textRenderer) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
// update label if name property was updated
|
||||
this.postExecute('element.updateProperties', function(e) {
|
||||
var context = e.context,
|
||||
element = context.element,
|
||||
properties = context.properties;
|
||||
|
||||
if (NAME_PROPERTY in properties) {
|
||||
modeling.updateLabel(element, properties[NAME_PROPERTY]);
|
||||
}
|
||||
|
||||
if (TEXT_PROPERTY in properties
|
||||
&& is(element, 'bpmn:TextAnnotation')) {
|
||||
|
||||
var newBounds = textRenderer.getTextAnnotationBounds(
|
||||
{
|
||||
x: element.x,
|
||||
y: element.y,
|
||||
width: element.width,
|
||||
height: element.height
|
||||
},
|
||||
properties[TEXT_PROPERTY] || ''
|
||||
);
|
||||
|
||||
modeling.updateLabel(element, properties.text, newBounds);
|
||||
}
|
||||
});
|
||||
|
||||
// create label shape after shape/connection was created
|
||||
this.postExecute([ 'shape.create', 'connection.create' ], function(e) {
|
||||
var context = e.context;
|
||||
|
||||
var element = context.shape || context.connection,
|
||||
businessObject = element.businessObject;
|
||||
|
||||
if (!isLabelExternal(element)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// only create label if attribute available
|
||||
if (!getLabel(element)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var labelCenter = getExternalLabelMid(element);
|
||||
// we don't care about x and y
|
||||
var labelDimensions = textRenderer.getExternalLabelBounds(
|
||||
DEFAULT_LABEL_DIMENSIONS,
|
||||
getLabel(element)
|
||||
);
|
||||
|
||||
modeling.createLabel(element, labelCenter, {
|
||||
id: businessObject.id + '_label',
|
||||
businessObject: businessObject,
|
||||
width: labelDimensions.width,
|
||||
height: labelDimensions.height
|
||||
});
|
||||
});
|
||||
|
||||
// update label after label shape was deleted
|
||||
this.postExecute('shape.delete', function(event) {
|
||||
var context = event.context,
|
||||
labelTarget = context.labelTarget,
|
||||
hints = context.hints || {};
|
||||
|
||||
// check if label
|
||||
if (labelTarget && hints.unsetLabel !== false) {
|
||||
modeling.updateLabel(labelTarget, null, null, { removeShape: false });
|
||||
}
|
||||
});
|
||||
|
||||
// update di information on label creation
|
||||
this.postExecute([ 'label.create' ], function(event) {
|
||||
var context = event.context,
|
||||
element = context.shape,
|
||||
businessObject,
|
||||
di;
|
||||
|
||||
// we want to trigger on real labels only
|
||||
if (!element.labelTarget) {
|
||||
return;
|
||||
}
|
||||
|
||||
// we want to trigger on BPMN elements only
|
||||
if (!is(element.labelTarget || element, 'bpmn:BaseElement')) {
|
||||
return;
|
||||
}
|
||||
|
||||
businessObject = element.businessObject,
|
||||
di = businessObject.di;
|
||||
|
||||
if (!di.label) {
|
||||
|
||||
di.label = bpmnFactory.create('bpmndi:BPMNLabel', {
|
||||
bounds: bpmnFactory.create('dc:Bounds')
|
||||
});
|
||||
}
|
||||
|
||||
assign(di.label.bounds, {
|
||||
x: element.x,
|
||||
y: element.y,
|
||||
width: element.width,
|
||||
height: element.height
|
||||
});
|
||||
});
|
||||
|
||||
function getVisibleLabelAdjustment(event) {
|
||||
|
||||
var context = event.context,
|
||||
connection = context.connection,
|
||||
label = connection.label,
|
||||
hints = assign({}, context.hints),
|
||||
newWaypoints = context.newWaypoints || connection.waypoints,
|
||||
oldWaypoints = context.oldWaypoints;
|
||||
|
||||
|
||||
if (typeof hints.startChanged === 'undefined') {
|
||||
hints.startChanged = !!hints.connectionStart;
|
||||
}
|
||||
|
||||
if (typeof hints.endChanged === 'undefined') {
|
||||
hints.endChanged = !!hints.connectionEnd;
|
||||
}
|
||||
|
||||
return getLabelAdjustment(label, newWaypoints, oldWaypoints, hints);
|
||||
}
|
||||
|
||||
this.postExecute([
|
||||
'connection.layout',
|
||||
'connection.updateWaypoints'
|
||||
], function(event) {
|
||||
|
||||
var label = event.context.connection.label,
|
||||
labelAdjustment;
|
||||
|
||||
if (!label) {
|
||||
return;
|
||||
}
|
||||
|
||||
labelAdjustment = getVisibleLabelAdjustment(event);
|
||||
|
||||
modeling.moveShape(label, labelAdjustment);
|
||||
});
|
||||
|
||||
|
||||
// keep label position on shape replace
|
||||
this.postExecute([ 'shape.replace' ], function(event) {
|
||||
var context = event.context,
|
||||
newShape = context.newShape,
|
||||
oldShape = context.oldShape;
|
||||
|
||||
var businessObject = getBusinessObject(newShape);
|
||||
|
||||
if (businessObject
|
||||
&& isLabelExternal(businessObject)
|
||||
&& oldShape.label
|
||||
&& newShape.label) {
|
||||
newShape.label.x = oldShape.label.x;
|
||||
newShape.label.y = oldShape.label.y;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// move external label after resizing
|
||||
this.postExecute('shape.resize', function(event) {
|
||||
|
||||
var context = event.context,
|
||||
shape = context.shape,
|
||||
newBounds = context.newBounds,
|
||||
oldBounds = context.oldBounds;
|
||||
|
||||
if (hasExternalLabel(shape)) {
|
||||
|
||||
var label = shape.label,
|
||||
labelMid = getMid(label),
|
||||
edges = asEdges(oldBounds);
|
||||
|
||||
// get nearest border point to label as reference point
|
||||
var referencePoint = getReferencePoint(labelMid, edges);
|
||||
|
||||
var delta = getReferencePointDelta(referencePoint, oldBounds, newBounds);
|
||||
|
||||
modeling.moveShape(label, delta);
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
inherits(LabelBehavior, CommandInterceptor);
|
||||
|
||||
LabelBehavior.$inject = [
|
||||
'eventBus',
|
||||
'modeling',
|
||||
'bpmnFactory',
|
||||
'textRenderer'
|
||||
];
|
||||
|
||||
// helpers //////////////////////
|
||||
|
||||
/**
|
||||
* Calculates a reference point delta relative to a new position
|
||||
* of a certain element's bounds
|
||||
*
|
||||
* @param {Point} point
|
||||
* @param {Bounds} oldBounds
|
||||
* @param {Bounds} newBounds
|
||||
*
|
||||
* @return {Delta} delta
|
||||
*/
|
||||
export function getReferencePointDelta(referencePoint, oldBounds, newBounds) {
|
||||
|
||||
var newReferencePoint = getNewAttachPoint(referencePoint, oldBounds, newBounds);
|
||||
|
||||
return roundPoint(delta(newReferencePoint, referencePoint));
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates the nearest point (reference point) for a given point
|
||||
* onto given set of lines
|
||||
*
|
||||
* @param {Array<Point, Point>} lines
|
||||
* @param {Point} point
|
||||
*
|
||||
* @param {Point}
|
||||
*/
|
||||
export function getReferencePoint(point, lines) {
|
||||
|
||||
if (!lines.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
var nearestLine = getNearestLine(point, lines);
|
||||
|
||||
return perpendicularFoot(point, nearestLine);
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert the given bounds to a lines array containing all edges
|
||||
*
|
||||
* @param {Bounds|Point} bounds
|
||||
*
|
||||
* @return Array<Point>
|
||||
*/
|
||||
export function asEdges(bounds) {
|
||||
return [
|
||||
[ // top
|
||||
{
|
||||
x: bounds.x,
|
||||
y: bounds.y
|
||||
},
|
||||
{
|
||||
x: bounds.x + (bounds.width || 0),
|
||||
y: bounds.y
|
||||
}
|
||||
],
|
||||
[ // right
|
||||
{
|
||||
x: bounds.x + (bounds.width || 0),
|
||||
y: bounds.y
|
||||
},
|
||||
{
|
||||
x: bounds.x + (bounds.width || 0),
|
||||
y: bounds.y + (bounds.height || 0)
|
||||
}
|
||||
],
|
||||
[ // bottom
|
||||
{
|
||||
x: bounds.x,
|
||||
y: bounds.y + (bounds.height || 0)
|
||||
},
|
||||
{
|
||||
x: bounds.x + (bounds.width || 0),
|
||||
y: bounds.y + (bounds.height || 0)
|
||||
}
|
||||
],
|
||||
[ // left
|
||||
{
|
||||
x: bounds.x,
|
||||
y: bounds.y
|
||||
},
|
||||
{
|
||||
x: bounds.x,
|
||||
y: bounds.y + (bounds.height || 0)
|
||||
}
|
||||
]
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the nearest line for a given point by distance
|
||||
* @param {Point} point
|
||||
* @param Array<Point> lines
|
||||
*
|
||||
* @return Array<Point>
|
||||
*/
|
||||
function getNearestLine(point, lines) {
|
||||
|
||||
var distances = lines.map(function(l) {
|
||||
return {
|
||||
line: l,
|
||||
distance: getDistancePointLine(point, l)
|
||||
};
|
||||
});
|
||||
|
||||
var sorted = sortBy(distances, 'distance');
|
||||
|
||||
return sorted[0].line;
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import { is } from '../../../util/ModelUtil';
|
||||
|
||||
var COLLAB_ERR_MSG = 'flow elements must be children of pools/participants',
|
||||
PROCESS_ERR_MSG = 'participants cannot be pasted onto a non-empty process diagram';
|
||||
|
||||
|
||||
export default function ModelingFeedback(eventBus, tooltips, translate) {
|
||||
|
||||
function showError(position, message, timeout) {
|
||||
tooltips.add({
|
||||
position: {
|
||||
x: position.x + 5,
|
||||
y: position.y + 5
|
||||
},
|
||||
type: 'error',
|
||||
timeout: timeout || 2000,
|
||||
html: '<div>' + message + '</div>'
|
||||
});
|
||||
}
|
||||
|
||||
eventBus.on([ 'shape.move.rejected', 'create.rejected' ], function(event) {
|
||||
var context = event.context,
|
||||
shape = context.shape,
|
||||
target = context.target;
|
||||
|
||||
if (is(target, 'bpmn:Collaboration') && is(shape, 'bpmn:FlowNode')) {
|
||||
showError(event, translate(COLLAB_ERR_MSG));
|
||||
}
|
||||
});
|
||||
|
||||
eventBus.on([ 'elements.paste.rejected' ], function(event) {
|
||||
var context = event.context,
|
||||
position = context.position,
|
||||
target = context.target;
|
||||
|
||||
if (is(target, 'bpmn:Collaboration')) {
|
||||
showError(position, translate(COLLAB_ERR_MSG));
|
||||
}
|
||||
|
||||
if (is(target, 'bpmn:Process')) {
|
||||
showError(position, translate(PROCESS_ERR_MSG), 3000);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ModelingFeedback.$inject = [
|
||||
'eventBus',
|
||||
'tooltips',
|
||||
'translate'
|
||||
];
|
||||
@@ -0,0 +1,82 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import { is } from '../../../util/ModelUtil';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
import lineIntersect from './util/LineIntersect';
|
||||
|
||||
|
||||
export default function RemoveElementBehavior(eventBus, bpmnRules, modeling) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
/**
|
||||
* Combine sequence flows when deleting an element
|
||||
* if there is one incoming and one outgoing
|
||||
* sequence flow
|
||||
*/
|
||||
this.preExecute('shape.delete', function(e) {
|
||||
|
||||
var shape = e.context.shape;
|
||||
|
||||
// only handle [a] -> [shape] -> [b] patterns
|
||||
if (shape.incoming.length !== 1 || shape.outgoing.length !== 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
var inConnection = shape.incoming[0],
|
||||
outConnection = shape.outgoing[0];
|
||||
|
||||
// only handle sequence flows
|
||||
if (!is(inConnection, 'bpmn:SequenceFlow') || !is(outConnection, 'bpmn:SequenceFlow')) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (bpmnRules.canConnect(inConnection.source, outConnection.target, inConnection)) {
|
||||
|
||||
// compute new, combined waypoints
|
||||
var newWaypoints = getNewWaypoints(inConnection.waypoints, outConnection.waypoints);
|
||||
|
||||
modeling.reconnectEnd(inConnection, outConnection.target, newWaypoints);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
inherits(RemoveElementBehavior, CommandInterceptor);
|
||||
|
||||
RemoveElementBehavior.$inject = [
|
||||
'eventBus',
|
||||
'bpmnRules',
|
||||
'modeling'
|
||||
];
|
||||
|
||||
|
||||
// helpers //////////////////////
|
||||
|
||||
function getDocking(point) {
|
||||
return point.original || point;
|
||||
}
|
||||
|
||||
|
||||
function getNewWaypoints(inWaypoints, outWaypoints) {
|
||||
|
||||
var intersection = lineIntersect(
|
||||
getDocking(inWaypoints[inWaypoints.length - 2]),
|
||||
getDocking(inWaypoints[inWaypoints.length - 1]),
|
||||
getDocking(outWaypoints[1]),
|
||||
getDocking(outWaypoints[0]));
|
||||
|
||||
if (intersection) {
|
||||
return [].concat(
|
||||
inWaypoints.slice(0, inWaypoints.length - 1),
|
||||
[ intersection ],
|
||||
outWaypoints.slice(1));
|
||||
} else {
|
||||
return [
|
||||
getDocking(inWaypoints[0]),
|
||||
getDocking(outWaypoints[outWaypoints.length - 1])
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
import { is } from '../../../util/ModelUtil';
|
||||
|
||||
|
||||
/**
|
||||
* BPMN specific remove behavior
|
||||
*/
|
||||
export default function RemoveParticipantBehavior(eventBus, modeling) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
|
||||
/**
|
||||
* morph collaboration diagram into process diagram
|
||||
* after the last participant has been removed
|
||||
*/
|
||||
|
||||
this.preExecute('shape.delete', function(context) {
|
||||
|
||||
var shape = context.shape,
|
||||
parent = shape.parent;
|
||||
|
||||
// activate the behavior if the shape to be removed
|
||||
// is a participant
|
||||
if (is(shape, 'bpmn:Participant')) {
|
||||
context.collaborationRoot = parent;
|
||||
}
|
||||
}, true);
|
||||
|
||||
this.postExecute('shape.delete', function(context) {
|
||||
|
||||
var collaborationRoot = context.collaborationRoot;
|
||||
|
||||
if (collaborationRoot && !collaborationRoot.businessObject.participants.length) {
|
||||
// replace empty collaboration with process diagram
|
||||
modeling.makeProcess();
|
||||
}
|
||||
}, true);
|
||||
|
||||
}
|
||||
|
||||
RemoveParticipantBehavior.$inject = [ 'eventBus', 'modeling' ];
|
||||
|
||||
inherits(RemoveParticipantBehavior, CommandInterceptor);
|
||||
@@ -0,0 +1,187 @@
|
||||
import {
|
||||
forEach,
|
||||
find,
|
||||
matchPattern
|
||||
} from 'min-dash';
|
||||
|
||||
import inherits from 'inherits';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
import { is } from '../../../util/ModelUtil';
|
||||
|
||||
|
||||
export default function ReplaceConnectionBehavior(eventBus, modeling, bpmnRules, injector) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
var dragging = injector.get('dragging', false);
|
||||
|
||||
function fixConnection(connection) {
|
||||
|
||||
var source = connection.source,
|
||||
target = connection.target,
|
||||
parent = connection.parent;
|
||||
|
||||
// do not do anything if connection
|
||||
// is already deleted (may happen due to other
|
||||
// behaviors plugged-in before)
|
||||
if (!parent) {
|
||||
return;
|
||||
}
|
||||
|
||||
var replacementType,
|
||||
remove;
|
||||
|
||||
/**
|
||||
* Check if incoming or outgoing connections
|
||||
* can stay or could be substituted with an
|
||||
* appropriate replacement.
|
||||
*
|
||||
* This holds true for SequenceFlow <> MessageFlow.
|
||||
*/
|
||||
|
||||
if (is(connection, 'bpmn:SequenceFlow')) {
|
||||
if (!bpmnRules.canConnectSequenceFlow(source, target)) {
|
||||
remove = true;
|
||||
}
|
||||
|
||||
if (bpmnRules.canConnectMessageFlow(source, target)) {
|
||||
replacementType = 'bpmn:MessageFlow';
|
||||
}
|
||||
}
|
||||
|
||||
// transform message flows into sequence flows, if possible
|
||||
|
||||
if (is(connection, 'bpmn:MessageFlow')) {
|
||||
|
||||
if (!bpmnRules.canConnectMessageFlow(source, target)) {
|
||||
remove = true;
|
||||
}
|
||||
|
||||
if (bpmnRules.canConnectSequenceFlow(source, target)) {
|
||||
replacementType = 'bpmn:SequenceFlow';
|
||||
}
|
||||
}
|
||||
|
||||
if (is(connection, 'bpmn:Association') && !bpmnRules.canConnectAssociation(source, target)) {
|
||||
remove = true;
|
||||
}
|
||||
|
||||
|
||||
// remove invalid connection,
|
||||
// unless it has been removed already
|
||||
if (remove) {
|
||||
modeling.removeConnection(connection);
|
||||
}
|
||||
|
||||
// replace SequenceFlow <> MessageFlow
|
||||
|
||||
if (replacementType) {
|
||||
modeling.connect(source, target, {
|
||||
type: replacementType,
|
||||
waypoints: connection.waypoints.slice()
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function replaceReconnectedConnection(event) {
|
||||
|
||||
var context = event.context,
|
||||
connection = context.connection,
|
||||
source = context.newSource || connection.source,
|
||||
target = context.newTarget || connection.target,
|
||||
allowed,
|
||||
replacement;
|
||||
|
||||
allowed = bpmnRules.canConnect(source, target);
|
||||
|
||||
if (!allowed || allowed.type === connection.type) {
|
||||
return;
|
||||
}
|
||||
|
||||
replacement = modeling.connect(source, target, {
|
||||
type: allowed.type,
|
||||
waypoints: connection.waypoints.slice()
|
||||
});
|
||||
|
||||
// remove old connection
|
||||
modeling.removeConnection(connection);
|
||||
|
||||
// replace connection in context to reconnect end/start
|
||||
context.connection = replacement;
|
||||
|
||||
if (dragging) {
|
||||
cleanDraggingSelection(connection, replacement);
|
||||
}
|
||||
}
|
||||
|
||||
// monkey-patch selection saved in dragging in order to not re-select non-existing connection
|
||||
function cleanDraggingSelection(oldConnection, newConnection) {
|
||||
var context = dragging.context(),
|
||||
previousSelection = context && context.payload.previousSelection,
|
||||
index;
|
||||
|
||||
// do nothing if not dragging or no selection was present
|
||||
if (!previousSelection || !previousSelection.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
index = previousSelection.indexOf(oldConnection);
|
||||
|
||||
if (index === -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
previousSelection.splice(index, 1, newConnection);
|
||||
}
|
||||
|
||||
// lifecycle hooks
|
||||
|
||||
this.postExecuted('elements.move', function(context) {
|
||||
|
||||
var closure = context.closure,
|
||||
allConnections = closure.allConnections;
|
||||
|
||||
forEach(allConnections, fixConnection);
|
||||
}, true);
|
||||
|
||||
this.preExecute([
|
||||
'connection.reconnectStart',
|
||||
'connection.reconnectEnd'
|
||||
], replaceReconnectedConnection);
|
||||
|
||||
this.postExecuted('element.updateProperties', function(event) {
|
||||
var context = event.context,
|
||||
properties = context.properties,
|
||||
element = context.element,
|
||||
businessObject = element.businessObject,
|
||||
connection;
|
||||
|
||||
// remove condition expression when morphing to default flow
|
||||
if (properties.default) {
|
||||
connection = find(
|
||||
element.outgoing,
|
||||
matchPattern({ id: element.businessObject.default.id })
|
||||
);
|
||||
|
||||
if (connection) {
|
||||
modeling.updateProperties(connection, { conditionExpression: undefined });
|
||||
}
|
||||
}
|
||||
|
||||
// remove default property from source when morphing to conditional flow
|
||||
if (properties.conditionExpression && businessObject.sourceRef.default === businessObject) {
|
||||
modeling.updateProperties(element.source, { default: undefined });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
inherits(ReplaceConnectionBehavior, CommandInterceptor);
|
||||
|
||||
ReplaceConnectionBehavior.$inject = [
|
||||
'eventBus',
|
||||
'modeling',
|
||||
'bpmnRules',
|
||||
'injector'
|
||||
];
|
||||
@@ -0,0 +1,127 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
import {
|
||||
forEach
|
||||
} from 'min-dash';
|
||||
|
||||
import {
|
||||
isEventSubProcess
|
||||
} from '../../../util/DiUtil';
|
||||
|
||||
import { is } from '../../../util/ModelUtil';
|
||||
|
||||
|
||||
/**
|
||||
* Defines the behaviour of what happens to the elements inside a container
|
||||
* that morphs into another BPMN element
|
||||
*/
|
||||
export default function ReplaceElementBehaviour(
|
||||
eventBus, bpmnReplace, bpmnRules,
|
||||
elementRegistry, selection, modeling) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
this._bpmnReplace = bpmnReplace;
|
||||
this._elementRegistry = elementRegistry;
|
||||
this._selection = selection;
|
||||
this._modeling = modeling;
|
||||
|
||||
this.postExecuted([ 'elements.move' ], 500, function(event) {
|
||||
|
||||
var context = event.context,
|
||||
target = context.newParent,
|
||||
newHost = context.newHost,
|
||||
elements = [];
|
||||
|
||||
forEach(context.closure.topLevel, function(topLevelElements) {
|
||||
if (isEventSubProcess(topLevelElements)) {
|
||||
elements = elements.concat(topLevelElements.children);
|
||||
} else {
|
||||
elements = elements.concat(topLevelElements);
|
||||
}
|
||||
});
|
||||
|
||||
// Change target to host when the moving element is a `bpmn:BoundaryEvent`
|
||||
if (elements.length === 1 && newHost) {
|
||||
target = newHost;
|
||||
}
|
||||
|
||||
var canReplace = bpmnRules.canReplace(elements, target);
|
||||
|
||||
if (canReplace) {
|
||||
this.replaceElements(elements, canReplace.replacements, newHost);
|
||||
}
|
||||
}, this);
|
||||
|
||||
// update attachments if the host is replaced
|
||||
this.postExecute([ 'shape.replace' ], 1500, function(e) {
|
||||
|
||||
var context = e.context,
|
||||
oldShape = context.oldShape,
|
||||
newShape = context.newShape,
|
||||
attachers = oldShape.attachers,
|
||||
canReplace;
|
||||
|
||||
if (attachers && attachers.length) {
|
||||
canReplace = bpmnRules.canReplace(attachers, newShape);
|
||||
|
||||
this.replaceElements(attachers, canReplace.replacements);
|
||||
}
|
||||
|
||||
}, this);
|
||||
|
||||
this.postExecuted([ 'shape.replace' ], 1500, function(e) {
|
||||
var context = e.context,
|
||||
oldShape = context.oldShape,
|
||||
newShape = context.newShape;
|
||||
|
||||
modeling.unclaimId(oldShape.businessObject.id, oldShape.businessObject);
|
||||
modeling.updateProperties(newShape, { id: oldShape.id });
|
||||
});
|
||||
}
|
||||
|
||||
inherits(ReplaceElementBehaviour, CommandInterceptor);
|
||||
|
||||
|
||||
ReplaceElementBehaviour.prototype.replaceElements = function(elements, newElements, newHost) {
|
||||
var elementRegistry = this._elementRegistry,
|
||||
bpmnReplace = this._bpmnReplace,
|
||||
selection = this._selection,
|
||||
modeling = this._modeling;
|
||||
|
||||
forEach(newElements, function(replacement) {
|
||||
|
||||
var newElement = {
|
||||
type: replacement.newElementType
|
||||
};
|
||||
|
||||
var oldElement = elementRegistry.get(replacement.oldElementId);
|
||||
|
||||
if (newHost && is(oldElement, 'bpmn:BoundaryEvent')) {
|
||||
modeling.updateAttachment(oldElement, null);
|
||||
}
|
||||
|
||||
var idx = elements.indexOf(oldElement);
|
||||
|
||||
elements[idx] = bpmnReplace.replaceElement(oldElement, newElement, { select: false });
|
||||
|
||||
if (newHost && is(elements[idx], 'bpmn:BoundaryEvent')) {
|
||||
modeling.updateAttachment(elements[idx], newHost);
|
||||
}
|
||||
});
|
||||
|
||||
if (newElements) {
|
||||
selection.select(elements);
|
||||
}
|
||||
};
|
||||
|
||||
ReplaceElementBehaviour.$inject = [
|
||||
'eventBus',
|
||||
'bpmnReplace',
|
||||
'bpmnRules',
|
||||
'elementRegistry',
|
||||
'selection',
|
||||
'modeling'
|
||||
];
|
||||
@@ -0,0 +1,44 @@
|
||||
import { is } from '../../../util/ModelUtil';
|
||||
|
||||
import { isExpanded } from '../../../util/DiUtil';
|
||||
|
||||
import { getParticipantResizeConstraints } from './util/ResizeUtil';
|
||||
|
||||
var HIGH_PRIORITY = 1500;
|
||||
|
||||
var PARTICIPANT_MIN_DIMENSIONS = { width: 300, height: 150 },
|
||||
SUB_PROCESS_MIN_DIMENSIONS = { width: 140, height: 120 },
|
||||
TEXT_ANNOTATION_MIN_DIMENSIONS = { width: 50, height: 30 };
|
||||
|
||||
|
||||
/**
|
||||
* Set minimum bounds/resize constraints on resize.
|
||||
*
|
||||
* @param {EventBus} eventBus
|
||||
*/
|
||||
export default function ResizeBehavior(eventBus) {
|
||||
eventBus.on('resize.start', HIGH_PRIORITY, function(event) {
|
||||
var context = event.context,
|
||||
shape = context.shape,
|
||||
direction = context.direction,
|
||||
balanced = context.balanced;
|
||||
|
||||
if (is(shape, 'bpmn:Lane') || is(shape, 'bpmn:Participant')) {
|
||||
context.resizeConstraints = getParticipantResizeConstraints(shape, direction, balanced);
|
||||
}
|
||||
|
||||
if (is(shape, 'bpmn:Participant')) {
|
||||
context.minDimensions = PARTICIPANT_MIN_DIMENSIONS;
|
||||
}
|
||||
|
||||
if (is(shape, 'bpmn:SubProcess') && isExpanded(shape)) {
|
||||
context.minDimensions = SUB_PROCESS_MIN_DIMENSIONS;
|
||||
}
|
||||
|
||||
if (is(shape, 'bpmn:TextAnnotation')) {
|
||||
context.minDimensions = TEXT_ANNOTATION_MIN_DIMENSIONS;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ResizeBehavior.$inject = [ 'eventBus' ];
|
||||
@@ -0,0 +1,62 @@
|
||||
import { is } from '../../../util/ModelUtil';
|
||||
|
||||
import {
|
||||
roundBounds
|
||||
} from 'diagram-js/lib/layout/LayoutUtil';
|
||||
|
||||
import {
|
||||
hasPrimaryModifier
|
||||
} from 'diagram-js/lib/util/Mouse';
|
||||
|
||||
var SLIGHTLY_HIGHER_PRIORITY = 1001;
|
||||
|
||||
|
||||
/**
|
||||
* Invoke {@link Modeling#resizeLane} instead of
|
||||
* {@link Modeling#resizeShape} when resizing a Lane
|
||||
* or Participant shape.
|
||||
*/
|
||||
export default function ResizeLaneBehavior(eventBus, modeling) {
|
||||
|
||||
eventBus.on('resize.start', SLIGHTLY_HIGHER_PRIORITY + 500, function(event) {
|
||||
var context = event.context,
|
||||
shape = context.shape;
|
||||
|
||||
if (is(shape, 'bpmn:Lane') || is(shape, 'bpmn:Participant')) {
|
||||
|
||||
// should we resize the opposite lane(s) in
|
||||
// order to compensate for the resize operation?
|
||||
context.balanced = !hasPrimaryModifier(event);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Intercept resize end and call resize lane function instead.
|
||||
*/
|
||||
eventBus.on('resize.end', SLIGHTLY_HIGHER_PRIORITY, function(event) {
|
||||
var context = event.context,
|
||||
shape = context.shape,
|
||||
canExecute = context.canExecute,
|
||||
newBounds = context.newBounds;
|
||||
|
||||
if (is(shape, 'bpmn:Lane') || is(shape, 'bpmn:Participant')) {
|
||||
|
||||
if (canExecute) {
|
||||
// ensure we have actual pixel values for new bounds
|
||||
// (important when zoom level was > 1 during move)
|
||||
newBounds = roundBounds(newBounds);
|
||||
|
||||
// perform the actual resize
|
||||
modeling.resizeLane(shape, newBounds, context.balanced);
|
||||
}
|
||||
|
||||
// stop propagation
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ResizeLaneBehavior.$inject = [
|
||||
'eventBus',
|
||||
'modeling'
|
||||
];
|
||||
@@ -0,0 +1,69 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
import { is } from '../../../util/ModelUtil';
|
||||
import { isExpanded } from '../../../util/DiUtil.js';
|
||||
|
||||
/**
|
||||
* Add start event child by default when creating an expanded subprocess
|
||||
* with create.start or replacing a task with an expanded subprocess.
|
||||
*/
|
||||
export default function SubProcessStartEventBehavior(eventBus, modeling) {
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
eventBus.on('create.start', function(event) {
|
||||
var shape = event.context.shape,
|
||||
hints = event.context.hints;
|
||||
|
||||
hints.shouldAddStartEvent = is(shape, 'bpmn:SubProcess') && isExpanded(shape);
|
||||
});
|
||||
|
||||
this.postExecuted('shape.create', function(event) {
|
||||
var shape = event.context.shape,
|
||||
hints = event.context.hints,
|
||||
position;
|
||||
|
||||
if (!hints.shouldAddStartEvent) {
|
||||
return;
|
||||
}
|
||||
|
||||
position = calculatePositionRelativeToShape(shape);
|
||||
|
||||
modeling.createShape({ type: 'bpmn:StartEvent' }, position, shape);
|
||||
});
|
||||
|
||||
this.postExecuted('shape.replace', function(event) {
|
||||
var oldShape = event.context.oldShape,
|
||||
newShape = event.context.newShape,
|
||||
position;
|
||||
|
||||
if (
|
||||
!is(newShape, 'bpmn:SubProcess') ||
|
||||
!is(oldShape, 'bpmn:Task') ||
|
||||
!isExpanded(newShape)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
position = calculatePositionRelativeToShape(newShape);
|
||||
|
||||
modeling.createShape({ type: 'bpmn:StartEvent' }, position, newShape);
|
||||
});
|
||||
}
|
||||
|
||||
SubProcessStartEventBehavior.$inject = [
|
||||
'eventBus',
|
||||
'modeling'
|
||||
];
|
||||
|
||||
inherits(SubProcessStartEventBehavior, CommandInterceptor);
|
||||
|
||||
// helpers //////////
|
||||
|
||||
function calculatePositionRelativeToShape(shape) {
|
||||
return {
|
||||
x: shape.x + shape.width / 6,
|
||||
y: shape.y + shape.height / 2
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
import {
|
||||
getBusinessObject,
|
||||
is
|
||||
} from '../../../util/ModelUtil';
|
||||
|
||||
import {
|
||||
computeChildrenBBox
|
||||
} from 'diagram-js/lib/features/resize/ResizeUtil';
|
||||
|
||||
|
||||
var LOW_PRIORITY = 500;
|
||||
|
||||
|
||||
export default function ToggleElementCollapseBehaviour(
|
||||
eventBus, elementFactory, modeling,
|
||||
resize) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
|
||||
function hideEmptyLables(children) {
|
||||
if (children.length) {
|
||||
children.forEach(function(child) {
|
||||
if (child.type === 'label' && !child.businessObject.name) {
|
||||
child.hidden = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function expandedBounds(shape, defaultSize) {
|
||||
var children = shape.children,
|
||||
newBounds = defaultSize,
|
||||
visibleElements,
|
||||
visibleBBox;
|
||||
|
||||
visibleElements = filterVisible(children).concat([ shape ]);
|
||||
|
||||
visibleBBox = computeChildrenBBox(visibleElements);
|
||||
|
||||
if (visibleBBox) {
|
||||
// center to visibleBBox with max(defaultSize, childrenBounds)
|
||||
newBounds.width = Math.max(visibleBBox.width, newBounds.width);
|
||||
newBounds.height = Math.max(visibleBBox.height, newBounds.height);
|
||||
|
||||
newBounds.x = visibleBBox.x + (visibleBBox.width - newBounds.width) / 2;
|
||||
newBounds.y = visibleBBox.y + (visibleBBox.height - newBounds.height) / 2;
|
||||
} else {
|
||||
// center to collapsed shape with defaultSize
|
||||
newBounds.x = shape.x + (shape.width - newBounds.width) / 2;
|
||||
newBounds.y = shape.y + (shape.height - newBounds.height) / 2;
|
||||
}
|
||||
|
||||
return newBounds;
|
||||
}
|
||||
|
||||
function collapsedBounds(shape, defaultSize) {
|
||||
|
||||
return {
|
||||
x: shape.x + (shape.width - defaultSize.width) / 2,
|
||||
y: shape.y + (shape.height - defaultSize.height) / 2,
|
||||
width: defaultSize.width,
|
||||
height: defaultSize.height
|
||||
};
|
||||
}
|
||||
|
||||
this.executed([ 'shape.toggleCollapse' ], LOW_PRIORITY, function(e) {
|
||||
|
||||
var context = e.context,
|
||||
shape = context.shape;
|
||||
|
||||
if (!is(shape, 'bpmn:SubProcess')) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!shape.collapsed) {
|
||||
// all children got made visible through djs, hide empty labels
|
||||
hideEmptyLables(shape.children);
|
||||
|
||||
// remove collapsed marker
|
||||
getBusinessObject(shape).di.isExpanded = true;
|
||||
} else {
|
||||
// place collapsed marker
|
||||
getBusinessObject(shape).di.isExpanded = false;
|
||||
}
|
||||
});
|
||||
|
||||
this.reverted([ 'shape.toggleCollapse' ], LOW_PRIORITY, function(e) {
|
||||
|
||||
var context = e.context;
|
||||
var shape = context.shape;
|
||||
|
||||
|
||||
// revert removing/placing collapsed marker
|
||||
if (!shape.collapsed) {
|
||||
getBusinessObject(shape).di.isExpanded = true;
|
||||
|
||||
} else {
|
||||
getBusinessObject(shape).di.isExpanded = false;
|
||||
}
|
||||
});
|
||||
|
||||
this.postExecuted([ 'shape.toggleCollapse' ], LOW_PRIORITY, function(e) {
|
||||
var shape = e.context.shape,
|
||||
defaultSize = elementFactory._getDefaultSize(shape),
|
||||
newBounds;
|
||||
|
||||
if (shape.collapsed) {
|
||||
|
||||
// resize to default size of collapsed shapes
|
||||
newBounds = collapsedBounds(shape, defaultSize);
|
||||
} else {
|
||||
|
||||
// resize to bounds of max(visible children, defaultSize)
|
||||
newBounds = expandedBounds(shape, defaultSize);
|
||||
}
|
||||
|
||||
modeling.resizeShape(shape, newBounds, null, {
|
||||
autoResize: shape.collapsed ? false : 'nwse'
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
inherits(ToggleElementCollapseBehaviour, CommandInterceptor);
|
||||
|
||||
ToggleElementCollapseBehaviour.$inject = [
|
||||
'eventBus',
|
||||
'elementFactory',
|
||||
'modeling'
|
||||
];
|
||||
|
||||
|
||||
// helpers //////////////////////
|
||||
|
||||
function filterVisible(elements) {
|
||||
return elements.filter(function(e) {
|
||||
return !e.hidden;
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import {
|
||||
forEach
|
||||
} from 'min-dash';
|
||||
|
||||
import inherits from 'inherits';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
|
||||
/**
|
||||
* Unclaims model IDs on element deletion.
|
||||
*
|
||||
* @param {EventBus} eventBus
|
||||
* @param {Modeling} modeling
|
||||
*/
|
||||
export default function UnclaimIdBehavior(eventBus, modeling) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
this.preExecute('elements.delete', function(event) {
|
||||
var context = event.context,
|
||||
elements = context.elements;
|
||||
|
||||
forEach(elements, function(element) {
|
||||
modeling.unclaimId(element.businessObject.id, element.businessObject);
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
inherits(UnclaimIdBehavior, CommandInterceptor);
|
||||
|
||||
UnclaimIdBehavior.$inject = [ 'eventBus', 'modeling' ];
|
||||
@@ -0,0 +1,57 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
import {
|
||||
getBusinessObject,
|
||||
is
|
||||
} from '../../../util/ModelUtil';
|
||||
|
||||
|
||||
/**
|
||||
* A behavior that unsets the Default property of
|
||||
* sequence flow source on element delete, if the
|
||||
* removed element is the Gateway or Task's default flow.
|
||||
*
|
||||
* @param {EventBus} eventBus
|
||||
* @param {Modeling} modeling
|
||||
*/
|
||||
export default function DeleteSequenceFlowBehavior(eventBus, modeling) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
|
||||
this.preExecute('connection.delete', function(event) {
|
||||
var context = event.context,
|
||||
connection = context.connection,
|
||||
source = connection.source;
|
||||
|
||||
if (isDefaultFlow(connection, source)) {
|
||||
modeling.updateProperties(source, {
|
||||
'default': null
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
inherits(DeleteSequenceFlowBehavior, CommandInterceptor);
|
||||
|
||||
DeleteSequenceFlowBehavior.$inject = [
|
||||
'eventBus',
|
||||
'modeling'
|
||||
];
|
||||
|
||||
|
||||
// helpers //////////////////////
|
||||
|
||||
function isDefaultFlow(connection, source) {
|
||||
|
||||
if (!is(connection, 'bpmn:SequenceFlow')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var sourceBo = getBusinessObject(source),
|
||||
sequenceFlow = getBusinessObject(connection);
|
||||
|
||||
return sourceBo.get('default') === sequenceFlow;
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
import {
|
||||
is
|
||||
} from '../../../util/ModelUtil';
|
||||
|
||||
var LOW_PRIORITY = 500,
|
||||
HIGH_PRIORITY = 5000;
|
||||
|
||||
|
||||
/**
|
||||
* BPMN specific delete lane behavior
|
||||
*/
|
||||
export default function UpdateFlowNodeRefsBehavior(eventBus, modeling, translate) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
/**
|
||||
* Ok, this is it:
|
||||
*
|
||||
* We have to update the Lane#flowNodeRefs _and_
|
||||
* FlowNode#lanes with every FlowNode move/resize and
|
||||
* Lane move/resize.
|
||||
*
|
||||
* We want to group that stuff to recompute containments
|
||||
* as efficient as possible.
|
||||
*
|
||||
* Yea!
|
||||
*/
|
||||
|
||||
// the update context
|
||||
var context;
|
||||
|
||||
|
||||
function initContext() {
|
||||
context = context || new UpdateContext();
|
||||
context.enter();
|
||||
|
||||
return context;
|
||||
}
|
||||
|
||||
function getContext() {
|
||||
if (!context) {
|
||||
throw new Error(translate('out of bounds release'));
|
||||
}
|
||||
|
||||
return context;
|
||||
}
|
||||
|
||||
function releaseContext() {
|
||||
|
||||
if (!context) {
|
||||
throw new Error(translate('out of bounds release'));
|
||||
}
|
||||
|
||||
var triggerUpdate = context.leave();
|
||||
|
||||
if (triggerUpdate) {
|
||||
modeling.updateLaneRefs(context.flowNodes, context.lanes);
|
||||
|
||||
context = null;
|
||||
}
|
||||
|
||||
return triggerUpdate;
|
||||
}
|
||||
|
||||
|
||||
var laneRefUpdateEvents = [
|
||||
'spaceTool',
|
||||
'lane.add',
|
||||
'lane.resize',
|
||||
'lane.split',
|
||||
'elements.move',
|
||||
'elements.delete',
|
||||
'shape.create',
|
||||
'shape.delete',
|
||||
'shape.move',
|
||||
'shape.resize'
|
||||
];
|
||||
|
||||
|
||||
// listen to a lot of stuff to group lane updates
|
||||
|
||||
this.preExecute(laneRefUpdateEvents, HIGH_PRIORITY, function(event) {
|
||||
initContext();
|
||||
});
|
||||
|
||||
this.postExecuted(laneRefUpdateEvents, LOW_PRIORITY, function(event) {
|
||||
releaseContext();
|
||||
});
|
||||
|
||||
|
||||
// Mark flow nodes + lanes that need an update
|
||||
|
||||
this.preExecute([
|
||||
'shape.create',
|
||||
'shape.move',
|
||||
'shape.delete',
|
||||
'shape.resize'
|
||||
], function(event) {
|
||||
|
||||
var context = event.context,
|
||||
shape = context.shape;
|
||||
|
||||
var updateContext = getContext();
|
||||
|
||||
// no need to update labels
|
||||
if (shape.labelTarget) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (is(shape, 'bpmn:Lane')) {
|
||||
updateContext.addLane(shape);
|
||||
}
|
||||
|
||||
if (is(shape, 'bpmn:FlowNode')) {
|
||||
updateContext.addFlowNode(shape);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
UpdateFlowNodeRefsBehavior.$inject = [
|
||||
'eventBus',
|
||||
'modeling' ,
|
||||
'translate'
|
||||
];
|
||||
|
||||
inherits(UpdateFlowNodeRefsBehavior, CommandInterceptor);
|
||||
|
||||
|
||||
function UpdateContext() {
|
||||
|
||||
this.flowNodes = [];
|
||||
this.lanes = [];
|
||||
|
||||
this.counter = 0;
|
||||
|
||||
this.addLane = function(lane) {
|
||||
this.lanes.push(lane);
|
||||
};
|
||||
|
||||
this.addFlowNode = function(flowNode) {
|
||||
this.flowNodes.push(flowNode);
|
||||
};
|
||||
|
||||
this.enter = function() {
|
||||
this.counter++;
|
||||
};
|
||||
|
||||
this.leave = function() {
|
||||
this.counter--;
|
||||
|
||||
return !this.counter;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import AdaptiveLabelPositioningBehavior from './AdaptiveLabelPositioningBehavior';
|
||||
import AppendBehavior from './AppendBehavior';
|
||||
import AttachEventBehavior from './AttachEventBehavior';
|
||||
import BoundaryEventBehavior from './BoundaryEventBehavior';
|
||||
import CopyPasteBehavior from './CopyPasteBehavior';
|
||||
import FixHoverBehavior from './FixHoverBehavior';
|
||||
import CreateBoundaryEventBehavior from './CreateBoundaryEventBehavior';
|
||||
import CreateDataObjectBehavior from './CreateDataObjectBehavior';
|
||||
import CreateParticipantBehavior from './CreateParticipantBehavior';
|
||||
import DataInputAssociationBehavior from './DataInputAssociationBehavior';
|
||||
import DataStoreBehavior from './DataStoreBehavior';
|
||||
import DeleteLaneBehavior from './DeleteLaneBehavior';
|
||||
import DetachEventBehavior from './DetachEventBehavior';
|
||||
import DropOnFlowBehavior from './DropOnFlowBehavior';
|
||||
import EventBasedGatewayBehavior from './EventBasedGatewayBehavior';
|
||||
import GroupBehavior from './GroupBehavior';
|
||||
import ImportDockingFix from './ImportDockingFix';
|
||||
import IsHorizontalFix from './IsHorizontalFix';
|
||||
import LabelBehavior from './LabelBehavior';
|
||||
import ModelingFeedback from './ModelingFeedback';
|
||||
import ReplaceConnectionBehavior from './ReplaceConnectionBehavior';
|
||||
import RemoveParticipantBehavior from './RemoveParticipantBehavior';
|
||||
import ReplaceElementBehaviour from './ReplaceElementBehaviour';
|
||||
import ResizeBehavior from './ResizeBehavior';
|
||||
import ResizeLaneBehavior from './ResizeLaneBehavior';
|
||||
import RemoveElementBehavior from './RemoveElementBehavior';
|
||||
import SubProcessStartEventBehavior from './SubProcessStartEventBehavior';
|
||||
import ToggleElementCollapseBehaviour from './ToggleElementCollapseBehaviour';
|
||||
import UnclaimIdBehavior from './UnclaimIdBehavior';
|
||||
import UpdateFlowNodeRefsBehavior from './UpdateFlowNodeRefsBehavior';
|
||||
import UnsetDefaultFlowBehavior from './UnsetDefaultFlowBehavior';
|
||||
|
||||
export default {
|
||||
__init__: [
|
||||
'adaptiveLabelPositioningBehavior',
|
||||
'appendBehavior',
|
||||
'attachEventBehavior',
|
||||
'boundaryEventBehavior',
|
||||
'copyPasteBehavior',
|
||||
'fixHoverBehavior',
|
||||
'createBoundaryEventBehavior',
|
||||
'createDataObjectBehavior',
|
||||
'createParticipantBehavior',
|
||||
'dataStoreBehavior',
|
||||
'dataInputAssociationBehavior',
|
||||
'deleteLaneBehavior',
|
||||
'detachEventBehavior',
|
||||
'dropOnFlowBehavior',
|
||||
'eventBasedGatewayBehavior',
|
||||
'groupBehavior',
|
||||
'importDockingFix',
|
||||
'isHorizontalFix',
|
||||
'labelBehavior',
|
||||
'modelingFeedback',
|
||||
'removeElementBehavior',
|
||||
'removeParticipantBehavior',
|
||||
'replaceConnectionBehavior',
|
||||
'replaceElementBehaviour',
|
||||
'resizeBehavior',
|
||||
'resizeLaneBehavior',
|
||||
'toggleElementCollapseBehaviour',
|
||||
'subProcessStartEventBehavior',
|
||||
'unclaimIdBehavior',
|
||||
'unsetDefaultFlowBehavior',
|
||||
'updateFlowNodeRefsBehavior'
|
||||
],
|
||||
adaptiveLabelPositioningBehavior: [ 'type', AdaptiveLabelPositioningBehavior ],
|
||||
appendBehavior: [ 'type', AppendBehavior ],
|
||||
attachEventBehavior: [ 'type', AttachEventBehavior ],
|
||||
boundaryEventBehavior: [ 'type', BoundaryEventBehavior ],
|
||||
copyPasteBehavior: [ 'type', CopyPasteBehavior ],
|
||||
fixHoverBehavior: [ 'type', FixHoverBehavior ],
|
||||
createBoundaryEventBehavior: [ 'type', CreateBoundaryEventBehavior ],
|
||||
createDataObjectBehavior: [ 'type', CreateDataObjectBehavior ],
|
||||
createParticipantBehavior: [ 'type', CreateParticipantBehavior ],
|
||||
dataInputAssociationBehavior: [ 'type', DataInputAssociationBehavior ],
|
||||
dataStoreBehavior: [ 'type', DataStoreBehavior ],
|
||||
deleteLaneBehavior: [ 'type', DeleteLaneBehavior ],
|
||||
detachEventBehavior: [ 'type', DetachEventBehavior ],
|
||||
dropOnFlowBehavior: [ 'type', DropOnFlowBehavior ],
|
||||
eventBasedGatewayBehavior: [ 'type', EventBasedGatewayBehavior ],
|
||||
groupBehavior: [ 'type', GroupBehavior ],
|
||||
importDockingFix: [ 'type', ImportDockingFix ],
|
||||
isHorizontalFix: [ 'type', IsHorizontalFix ],
|
||||
labelBehavior: [ 'type', LabelBehavior ],
|
||||
modelingFeedback: [ 'type', ModelingFeedback ],
|
||||
replaceConnectionBehavior: [ 'type', ReplaceConnectionBehavior ],
|
||||
removeParticipantBehavior: [ 'type', RemoveParticipantBehavior ],
|
||||
replaceElementBehaviour: [ 'type', ReplaceElementBehaviour ],
|
||||
resizeBehavior: [ 'type', ResizeBehavior ],
|
||||
resizeLaneBehavior: [ 'type', ResizeLaneBehavior ],
|
||||
removeElementBehavior: [ 'type', RemoveElementBehavior ],
|
||||
toggleElementCollapseBehaviour : [ 'type', ToggleElementCollapseBehaviour ],
|
||||
subProcessStartEventBehavior: [ 'type', SubProcessStartEventBehavior ],
|
||||
unclaimIdBehavior: [ 'type', UnclaimIdBehavior ],
|
||||
updateFlowNodeRefsBehavior: [ 'type', UpdateFlowNodeRefsBehavior ],
|
||||
unsetDefaultFlowBehavior: [ 'type', UnsetDefaultFlowBehavior ]
|
||||
};
|
||||
@@ -0,0 +1,30 @@
|
||||
import {
|
||||
add as collectionAdd
|
||||
} from 'diagram-js/lib/util/Collections';
|
||||
|
||||
import {
|
||||
getBusinessObject
|
||||
} from '../../../../util/ModelUtil';
|
||||
|
||||
/**
|
||||
* Creates a new bpmn:CategoryValue inside a new bpmn:Category
|
||||
*
|
||||
* @param {ModdleElement} definitions
|
||||
* @param {BpmnFactory} bpmnFactory
|
||||
*
|
||||
* @return {ModdleElement} categoryValue.
|
||||
*/
|
||||
export function createCategoryValue(definitions, bpmnFactory) {
|
||||
var categoryValue = bpmnFactory.create('bpmn:CategoryValue'),
|
||||
category = bpmnFactory.create('bpmn:Category', {
|
||||
categoryValue: [ categoryValue ]
|
||||
});
|
||||
|
||||
// add to correct place
|
||||
collectionAdd(definitions.get('rootElements'), category);
|
||||
getBusinessObject(category).$parent = definitions;
|
||||
getBusinessObject(categoryValue).$parent = category;
|
||||
|
||||
return categoryValue;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
/**
|
||||
* Returns the length of a vector
|
||||
*
|
||||
* @param {Vector}
|
||||
* @return {Float}
|
||||
*/
|
||||
export function vectorLength(v) {
|
||||
return Math.sqrt(Math.pow(v.x, 2) + Math.pow(v.y, 2));
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Calculates the angle between a line a the yAxis
|
||||
*
|
||||
* @param {Array}
|
||||
* @return {Float}
|
||||
*/
|
||||
export function getAngle(line) {
|
||||
// return value is between 0, 180 and -180, -0
|
||||
// @janstuemmel: maybe replace return a/b with b/a
|
||||
return Math.atan((line[1].y - line[0].y) / (line[1].x - line[0].x));
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Rotates a vector by a given angle
|
||||
*
|
||||
* @param {Vector}
|
||||
* @param {Float} Angle in radians
|
||||
* @return {Vector}
|
||||
*/
|
||||
export function rotateVector(vector, angle) {
|
||||
return (!angle) ? vector : {
|
||||
x: Math.cos(angle) * vector.x - Math.sin(angle) * vector.y,
|
||||
y: Math.sin(angle) * vector.x + Math.cos(angle) * vector.y
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Solves a 2D equation system
|
||||
* a + r*b = c, where a,b,c are 2D vectors
|
||||
*
|
||||
* @param {Vector}
|
||||
* @param {Vector}
|
||||
* @param {Vector}
|
||||
* @return {Float}
|
||||
*/
|
||||
function solveLambaSystem(a, b, c) {
|
||||
|
||||
// the 2d system
|
||||
var system = [
|
||||
{ n: a[0] - c[0], lambda: b[0] },
|
||||
{ n: a[1] - c[1], lambda: b[1] }
|
||||
];
|
||||
|
||||
// solve
|
||||
var n = system[0].n * b[0] + system[1].n * b[1],
|
||||
l = system[0].lambda * b[0] + system[1].lambda * b[1];
|
||||
|
||||
return -n/l;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Position of perpendicular foot
|
||||
*
|
||||
* @param {Point}
|
||||
* @param [ {Point}, {Point} ] line defined throug two points
|
||||
* @return {Point} the perpendicular foot position
|
||||
*/
|
||||
export function perpendicularFoot(point, line) {
|
||||
|
||||
var a = line[0], b = line[1];
|
||||
|
||||
// relative position of b from a
|
||||
var bd = { x: b.x - a.x, y: b.y - a.y };
|
||||
|
||||
// solve equation system to the parametrized vectors param real value
|
||||
var r = solveLambaSystem([ a.x, a.y ], [ bd.x, bd.y ], [ point.x, point.y ]);
|
||||
|
||||
return { x: a.x + r*bd.x, y: a.y + r*bd.y };
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Calculates the distance between a point and a line
|
||||
*
|
||||
* @param {Point}
|
||||
* @param [ {Point}, {Point} ] line defined throug two points
|
||||
* @return {Float} distance
|
||||
*/
|
||||
export function getDistancePointLine(point, line) {
|
||||
|
||||
var pfPoint = perpendicularFoot(point, line);
|
||||
|
||||
// distance vector
|
||||
var connectionVector = {
|
||||
x: pfPoint.x - point.x,
|
||||
y: pfPoint.y - point.y
|
||||
};
|
||||
|
||||
return vectorLength(connectionVector);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Calculates the distance between two points
|
||||
*
|
||||
* @param {Point}
|
||||
* @param {Point}
|
||||
* @return {Float} distance
|
||||
*/
|
||||
export function getDistancePointPoint(point1, point2) {
|
||||
|
||||
return vectorLength({
|
||||
x: point1.x - point2.x,
|
||||
y: point1.y - point2.y
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,222 @@
|
||||
import {
|
||||
getDistancePointPoint,
|
||||
rotateVector,
|
||||
getAngle
|
||||
} from './GeometricUtil';
|
||||
|
||||
import {
|
||||
getAttachment
|
||||
} from './LineAttachmentUtil';
|
||||
|
||||
import {
|
||||
roundPoint
|
||||
} from 'diagram-js/lib/layout/LayoutUtil';
|
||||
|
||||
|
||||
export function findNewLabelLineStartIndex(oldWaypoints, newWaypoints, attachment, hints) {
|
||||
|
||||
var index = attachment.segmentIndex;
|
||||
|
||||
var offset = newWaypoints.length - oldWaypoints.length;
|
||||
|
||||
// segmentMove happend
|
||||
if (hints.segmentMove) {
|
||||
|
||||
var oldSegmentStartIndex = hints.segmentMove.segmentStartIndex,
|
||||
newSegmentStartIndex = hints.segmentMove.newSegmentStartIndex;
|
||||
|
||||
// if label was on moved segment return new segment index
|
||||
if (index === oldSegmentStartIndex) {
|
||||
return newSegmentStartIndex;
|
||||
}
|
||||
|
||||
// label is after new segment index
|
||||
if (index >= newSegmentStartIndex) {
|
||||
return (index+offset < newSegmentStartIndex) ? newSegmentStartIndex : index+offset;
|
||||
}
|
||||
|
||||
// if label is before new segment index
|
||||
return index;
|
||||
}
|
||||
|
||||
// bendpointMove happend
|
||||
if (hints.bendpointMove) {
|
||||
|
||||
var insert = hints.bendpointMove.insert,
|
||||
bendpointIndex = hints.bendpointMove.bendpointIndex,
|
||||
newIndex;
|
||||
|
||||
// waypoints length didnt change
|
||||
if (offset === 0) {
|
||||
return index;
|
||||
}
|
||||
|
||||
// label behind new/removed bendpoint
|
||||
if (index >= bendpointIndex) {
|
||||
newIndex = insert ? index + 1 : index - 1;
|
||||
}
|
||||
|
||||
// label before new/removed bendpoint
|
||||
if (index < bendpointIndex) {
|
||||
|
||||
newIndex = index;
|
||||
|
||||
// decide label should take right or left segment
|
||||
if (insert && attachment.type !== 'bendpoint' && bendpointIndex-1 === index) {
|
||||
|
||||
var rel = relativePositionMidWaypoint(newWaypoints, bendpointIndex);
|
||||
|
||||
if (rel < attachment.relativeLocation) {
|
||||
newIndex++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return newIndex;
|
||||
}
|
||||
|
||||
// start/end changed
|
||||
if (offset === 0) {
|
||||
return index;
|
||||
}
|
||||
|
||||
if (hints.connectionStart) {
|
||||
return (index === 0) ? 0 : null;
|
||||
}
|
||||
|
||||
if (hints.connectionEnd) {
|
||||
return (index === oldWaypoints.length - 2) ? newWaypoints.length - 2 : null;
|
||||
}
|
||||
|
||||
// if nothing fits, return null
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Calculate the required adjustment (move delta) for the given label
|
||||
* after the connection waypoints got updated.
|
||||
*
|
||||
* @param {djs.model.Label} label
|
||||
* @param {Array<Point>} newWaypoints
|
||||
* @param {Array<Point>} oldWaypoints
|
||||
* @param {Object} hints
|
||||
*
|
||||
* @return {Point} delta
|
||||
*/
|
||||
export function getLabelAdjustment(label, newWaypoints, oldWaypoints, hints) {
|
||||
|
||||
var x = 0,
|
||||
y = 0;
|
||||
|
||||
var labelPosition = getLabelMid(label);
|
||||
|
||||
// get closest attachment
|
||||
var attachment = getAttachment(labelPosition, oldWaypoints),
|
||||
oldLabelLineIndex = attachment.segmentIndex,
|
||||
newLabelLineIndex = findNewLabelLineStartIndex(oldWaypoints, newWaypoints, attachment, hints);
|
||||
|
||||
if (newLabelLineIndex === null) {
|
||||
return { x: x, y: y };
|
||||
}
|
||||
|
||||
// should never happen
|
||||
// TODO(@janstuemmel): throw an error here when connectionSegmentMove is refactored
|
||||
if (newLabelLineIndex < 0 ||
|
||||
newLabelLineIndex > newWaypoints.length - 2) {
|
||||
return { x: x, y: y };
|
||||
}
|
||||
|
||||
var oldLabelLine = getLine(oldWaypoints, oldLabelLineIndex),
|
||||
newLabelLine = getLine(newWaypoints, newLabelLineIndex),
|
||||
oldFoot = attachment.position;
|
||||
|
||||
var relativeFootPosition = getRelativeFootPosition(oldLabelLine, oldFoot),
|
||||
angleDelta = getAngleDelta(oldLabelLine, newLabelLine);
|
||||
|
||||
// special rule if label on bendpoint
|
||||
if (attachment.type === 'bendpoint') {
|
||||
|
||||
var offset = newWaypoints.length - oldWaypoints.length,
|
||||
oldBendpointIndex = attachment.bendpointIndex,
|
||||
oldBendpoint = oldWaypoints[oldBendpointIndex];
|
||||
|
||||
// bendpoint position hasnt changed, return same position
|
||||
if (newWaypoints.indexOf(oldBendpoint) !== -1) {
|
||||
return { x: x, y: y };
|
||||
}
|
||||
|
||||
// new bendpoint and old bendpoint have same index, then just return the offset
|
||||
if (offset === 0) {
|
||||
var newBendpoint = newWaypoints[oldBendpointIndex];
|
||||
|
||||
return {
|
||||
x: newBendpoint.x - attachment.position.x,
|
||||
y: newBendpoint.y - attachment.position.y
|
||||
};
|
||||
}
|
||||
|
||||
// if bendpoints get removed
|
||||
if (offset < 0 && oldBendpointIndex !== 0 && oldBendpointIndex < oldWaypoints.length - 1) {
|
||||
relativeFootPosition = relativePositionMidWaypoint(oldWaypoints, oldBendpointIndex);
|
||||
}
|
||||
}
|
||||
|
||||
var newFoot = {
|
||||
x: (newLabelLine[1].x - newLabelLine[0].x) * relativeFootPosition + newLabelLine[0].x,
|
||||
y: (newLabelLine[1].y - newLabelLine[0].y) * relativeFootPosition + newLabelLine[0].y
|
||||
};
|
||||
|
||||
// the rotated vector to label
|
||||
var newLabelVector = rotateVector({
|
||||
x: labelPosition.x - oldFoot.x,
|
||||
y: labelPosition.y - oldFoot.y
|
||||
}, angleDelta);
|
||||
|
||||
// the new relative position
|
||||
x = newFoot.x + newLabelVector.x - labelPosition.x;
|
||||
y = newFoot.y + newLabelVector.y - labelPosition.y;
|
||||
|
||||
return roundPoint({
|
||||
x: x,
|
||||
y: y
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// HELPERS //////////////////////
|
||||
|
||||
function relativePositionMidWaypoint(waypoints, idx) {
|
||||
|
||||
var distanceSegment1 = getDistancePointPoint(waypoints[idx-1], waypoints[idx]),
|
||||
distanceSegment2 = getDistancePointPoint(waypoints[idx], waypoints[idx+1]);
|
||||
|
||||
var relativePosition = distanceSegment1 / (distanceSegment1 + distanceSegment2);
|
||||
|
||||
return relativePosition;
|
||||
}
|
||||
|
||||
function getLabelMid(label) {
|
||||
return {
|
||||
x: label.x + label.width / 2,
|
||||
y: label.y + label.height / 2
|
||||
};
|
||||
}
|
||||
|
||||
function getAngleDelta(l1, l2) {
|
||||
var a1 = getAngle(l1),
|
||||
a2 = getAngle(l2);
|
||||
return a2 - a1;
|
||||
}
|
||||
|
||||
function getLine(waypoints, idx) {
|
||||
return [ waypoints[idx], waypoints[idx+1] ];
|
||||
}
|
||||
|
||||
function getRelativeFootPosition(line, foot) {
|
||||
|
||||
var length = getDistancePointPoint(line[0], line[1]),
|
||||
lengthToFoot = getDistancePointPoint(line[0], foot);
|
||||
|
||||
return length === 0 ? 0 : lengthToFoot / length;
|
||||
}
|
||||
@@ -0,0 +1,229 @@
|
||||
var sqrt = Math.sqrt,
|
||||
min = Math.min,
|
||||
max = Math.max,
|
||||
abs = Math.abs;
|
||||
|
||||
/**
|
||||
* Calculate the square (power to two) of a number.
|
||||
*
|
||||
* @param {Number} n
|
||||
*
|
||||
* @return {Number}
|
||||
*/
|
||||
function sq(n) {
|
||||
return Math.pow(n, 2);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get distance between two points.
|
||||
*
|
||||
* @param {Point} p1
|
||||
* @param {Point} p2
|
||||
*
|
||||
* @return {Number}
|
||||
*/
|
||||
function getDistance(p1, p2) {
|
||||
return sqrt(sq(p1.x - p2.x) + sq(p1.y - p2.y));
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the attachment of the given point on the specified line.
|
||||
*
|
||||
* The attachment is either a bendpoint (attached to the given point)
|
||||
* or segment (attached to a location on a line segment) attachment:
|
||||
*
|
||||
* ```javascript
|
||||
* var pointAttachment = {
|
||||
* type: 'bendpoint',
|
||||
* bendpointIndex: 3,
|
||||
* position: { x: 10, y: 10 } // the attach point on the line
|
||||
* };
|
||||
*
|
||||
* var segmentAttachment = {
|
||||
* type: 'segment',
|
||||
* segmentIndex: 2,
|
||||
* relativeLocation: 0.31, // attach point location between 0 (at start) and 1 (at end)
|
||||
* position: { x: 10, y: 10 } // the attach point on the line
|
||||
* };
|
||||
* ```
|
||||
*
|
||||
* @param {Point} point
|
||||
* @param {Array<Point>} line
|
||||
*
|
||||
* @return {Object} attachment
|
||||
*/
|
||||
export function getAttachment(point, line) {
|
||||
|
||||
var idx = 0,
|
||||
segmentStart,
|
||||
segmentEnd,
|
||||
segmentStartDistance,
|
||||
segmentEndDistance,
|
||||
attachmentPosition,
|
||||
minDistance,
|
||||
intersections,
|
||||
attachment,
|
||||
attachmentDistance,
|
||||
closestAttachmentDistance,
|
||||
closestAttachment;
|
||||
|
||||
for (idx = 0; idx < line.length - 1; idx++) {
|
||||
|
||||
segmentStart = line[idx];
|
||||
segmentEnd = line[idx + 1];
|
||||
|
||||
if (pointsEqual(segmentStart, segmentEnd)) {
|
||||
intersections = [ segmentStart ];
|
||||
} else {
|
||||
segmentStartDistance = getDistance(point, segmentStart);
|
||||
segmentEndDistance = getDistance(point, segmentEnd);
|
||||
|
||||
minDistance = min(segmentStartDistance, segmentEndDistance);
|
||||
|
||||
intersections = getCircleSegmentIntersections(segmentStart, segmentEnd, point, minDistance);
|
||||
}
|
||||
|
||||
if (intersections.length < 1) {
|
||||
throw new Error('expected between [1, 2] circle -> line intersections');
|
||||
}
|
||||
|
||||
// one intersection -> bendpoint attachment
|
||||
if (intersections.length === 1) {
|
||||
attachment = {
|
||||
type: 'bendpoint',
|
||||
position: intersections[0],
|
||||
segmentIndex: idx,
|
||||
bendpointIndex: pointsEqual(segmentStart, intersections[0]) ? idx : idx + 1
|
||||
};
|
||||
}
|
||||
|
||||
// two intersections -> segment attachment
|
||||
if (intersections.length === 2) {
|
||||
|
||||
attachmentPosition = mid(intersections[0], intersections[1]);
|
||||
|
||||
attachment = {
|
||||
type: 'segment',
|
||||
position: attachmentPosition,
|
||||
segmentIndex: idx,
|
||||
relativeLocation: getDistance(segmentStart, attachmentPosition) / getDistance(segmentStart, segmentEnd)
|
||||
};
|
||||
}
|
||||
|
||||
attachmentDistance = getDistance(attachment.position, point);
|
||||
|
||||
if (!closestAttachment || closestAttachmentDistance > attachmentDistance) {
|
||||
closestAttachment = attachment;
|
||||
closestAttachmentDistance = attachmentDistance;
|
||||
}
|
||||
}
|
||||
|
||||
return closestAttachment;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the intersection between a circle and a line segment.
|
||||
*
|
||||
* @param {Point} s1 segment start
|
||||
* @param {Point} s2 segment end
|
||||
* @param {Point} cc circle center
|
||||
* @param {Number} cr circle radius
|
||||
*
|
||||
* @return {Array<Point>} intersections
|
||||
*/
|
||||
function getCircleSegmentIntersections(s1, s2, cc, cr) {
|
||||
|
||||
var baX = s2.x - s1.x;
|
||||
var baY = s2.y - s1.y;
|
||||
var caX = cc.x - s1.x;
|
||||
var caY = cc.y - s1.y;
|
||||
|
||||
var a = baX * baX + baY * baY;
|
||||
var bBy2 = baX * caX + baY * caY;
|
||||
var c = caX * caX + caY * caY - cr * cr;
|
||||
|
||||
var pBy2 = bBy2 / a;
|
||||
var q = c / a;
|
||||
|
||||
var disc = pBy2 * pBy2 - q;
|
||||
|
||||
// check against negative value to work around
|
||||
// negative, very close to zero results (-4e-15)
|
||||
// being produced in some environments
|
||||
if (disc < 0 && disc > -0.000001) {
|
||||
disc = 0;
|
||||
}
|
||||
|
||||
if (disc < 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// if disc == 0 ... dealt with later
|
||||
var tmpSqrt = sqrt(disc);
|
||||
var abScalingFactor1 = -pBy2 + tmpSqrt;
|
||||
var abScalingFactor2 = -pBy2 - tmpSqrt;
|
||||
|
||||
var i1 = {
|
||||
x: s1.x - baX * abScalingFactor1,
|
||||
y: s1.y - baY * abScalingFactor1
|
||||
};
|
||||
|
||||
if (disc === 0) { // abScalingFactor1 == abScalingFactor2
|
||||
return [ i1 ];
|
||||
}
|
||||
|
||||
var i2 = {
|
||||
x: s1.x - baX * abScalingFactor2,
|
||||
y: s1.y - baY * abScalingFactor2
|
||||
};
|
||||
|
||||
// return only points on line segment
|
||||
return [ i1, i2 ].filter(function(p) {
|
||||
return isPointInSegment(p, s1, s2);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function isPointInSegment(p, segmentStart, segmentEnd) {
|
||||
return (
|
||||
fenced(p.x, segmentStart.x, segmentEnd.x) &&
|
||||
fenced(p.y, segmentStart.y, segmentEnd.y)
|
||||
);
|
||||
}
|
||||
|
||||
function fenced(n, rangeStart, rangeEnd) {
|
||||
|
||||
// use matching threshold to work around
|
||||
// precisison errors in intersection computation
|
||||
|
||||
return (
|
||||
n >= min(rangeStart, rangeEnd) - EQUAL_THRESHOLD &&
|
||||
n <= max(rangeStart, rangeEnd) + EQUAL_THRESHOLD
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate mid of two points.
|
||||
*
|
||||
* @param {Point} p1
|
||||
* @param {Point} p2
|
||||
*
|
||||
* @return {Point}
|
||||
*/
|
||||
function mid(p1, p2) {
|
||||
|
||||
return {
|
||||
x: (p1.x + p2.x) / 2,
|
||||
y: (p1.y + p2.y) / 2
|
||||
};
|
||||
}
|
||||
|
||||
var EQUAL_THRESHOLD = 0.1;
|
||||
|
||||
function pointsEqual(p1, p2) {
|
||||
|
||||
return (
|
||||
abs(p1.x - p2.x) <= EQUAL_THRESHOLD &&
|
||||
abs(p1.y - p2.y) <= EQUAL_THRESHOLD
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
/**
|
||||
* Returns the intersection between two line segments a and b.
|
||||
*
|
||||
* @param {Point} l1s
|
||||
* @param {Point} l1e
|
||||
* @param {Point} l2s
|
||||
* @param {Point} l2e
|
||||
*
|
||||
* @return {Point}
|
||||
*/
|
||||
export default function lineIntersect(l1s, l1e, l2s, l2e) {
|
||||
// if the lines intersect, the result contains the x and y of the
|
||||
// intersection (treating the lines as infinite) and booleans for
|
||||
// whether line segment 1 or line segment 2 contain the point
|
||||
var denominator, a, b, c, numerator;
|
||||
|
||||
denominator = ((l2e.y - l2s.y) * (l1e.x - l1s.x)) - ((l2e.x - l2s.x) * (l1e.y - l1s.y));
|
||||
|
||||
if (denominator == 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
a = l1s.y - l2s.y;
|
||||
b = l1s.x - l2s.x;
|
||||
numerator = ((l2e.x - l2s.x) * a) - ((l2e.y - l2s.y) * b);
|
||||
|
||||
c = numerator / denominator;
|
||||
|
||||
// if we cast these lines infinitely in
|
||||
// both directions, they intersect here
|
||||
return {
|
||||
x: Math.round(l1s.x + (c * (l1e.x - l1s.x))),
|
||||
y: Math.round(l1s.y + (c * (l1e.y - l1s.y)))
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
import { is } from '../../../../util/ModelUtil';
|
||||
|
||||
import {
|
||||
asTRBL
|
||||
} from 'diagram-js/lib/layout/LayoutUtil';
|
||||
|
||||
import {
|
||||
collectLanes,
|
||||
getLanesRoot
|
||||
} from '../../../modeling/util/LaneUtil';
|
||||
|
||||
var abs = Math.abs,
|
||||
min = Math.min,
|
||||
max = Math.max;
|
||||
|
||||
|
||||
function addToTrbl(trbl, attr, value, choice) {
|
||||
var current = trbl[attr];
|
||||
|
||||
// make sure to set the value if it does not exist
|
||||
// or apply the correct value by comparing against
|
||||
// choice(value, currentValue)
|
||||
trbl[attr] = current === undefined ? value : choice(value, current);
|
||||
}
|
||||
|
||||
function addMin(trbl, attr, value) {
|
||||
return addToTrbl(trbl, attr, value, min);
|
||||
}
|
||||
|
||||
function addMax(trbl, attr, value) {
|
||||
return addToTrbl(trbl, attr, value, max);
|
||||
}
|
||||
|
||||
var LANE_MIN_HEIGHT = 60,
|
||||
LANE_MIN_WIDTH = 300,
|
||||
LANE_RIGHT_PADDING = 20,
|
||||
LANE_LEFT_PADDING = 50,
|
||||
LANE_TOP_PADDING = 20,
|
||||
LANE_BOTTOM_PADDING = 20;
|
||||
|
||||
|
||||
export function getParticipantResizeConstraints(laneShape, resizeDirection, balanced) {
|
||||
var lanesRoot = getLanesRoot(laneShape);
|
||||
|
||||
var isFirst = true,
|
||||
isLast = true;
|
||||
|
||||
// max top/bottom size for lanes
|
||||
var allLanes = collectLanes(lanesRoot, [ lanesRoot ]);
|
||||
|
||||
var laneTrbl = asTRBL(laneShape);
|
||||
|
||||
var maxTrbl = {},
|
||||
minTrbl = {};
|
||||
|
||||
if (/e/.test(resizeDirection)) {
|
||||
minTrbl.right = laneTrbl.left + LANE_MIN_WIDTH;
|
||||
} else
|
||||
if (/w/.test(resizeDirection)) {
|
||||
minTrbl.left = laneTrbl.right - LANE_MIN_WIDTH;
|
||||
}
|
||||
|
||||
allLanes.forEach(function(other) {
|
||||
|
||||
var otherTrbl = asTRBL(other);
|
||||
|
||||
if (/n/.test(resizeDirection)) {
|
||||
|
||||
if (otherTrbl.top < (laneTrbl.top - 10)) {
|
||||
isFirst = false;
|
||||
}
|
||||
|
||||
// max top size (based on next element)
|
||||
if (balanced && abs(laneTrbl.top - otherTrbl.bottom) < 10) {
|
||||
addMax(maxTrbl, 'top', otherTrbl.top + LANE_MIN_HEIGHT);
|
||||
}
|
||||
|
||||
// min top size (based on self or nested element)
|
||||
if (abs(laneTrbl.top - otherTrbl.top) < 5) {
|
||||
addMin(minTrbl, 'top', otherTrbl.bottom - LANE_MIN_HEIGHT);
|
||||
}
|
||||
}
|
||||
|
||||
if (/s/.test(resizeDirection)) {
|
||||
|
||||
if (otherTrbl.bottom > (laneTrbl.bottom + 10)) {
|
||||
isLast = false;
|
||||
}
|
||||
|
||||
// max bottom size (based on previous element)
|
||||
if (balanced && abs(laneTrbl.bottom - otherTrbl.top) < 10) {
|
||||
addMin(maxTrbl, 'bottom', otherTrbl.bottom - LANE_MIN_HEIGHT);
|
||||
}
|
||||
|
||||
// min bottom size (based on self or nested element)
|
||||
if (abs(laneTrbl.bottom - otherTrbl.bottom) < 5) {
|
||||
addMax(minTrbl, 'bottom', otherTrbl.top + LANE_MIN_HEIGHT);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// max top/bottom/left/right size based on flow nodes
|
||||
var flowElements = lanesRoot.children.filter(function(s) {
|
||||
return !s.hidden && !s.waypoints && (is(s, 'bpmn:FlowElement') || is(s, 'bpmn:Artifact'));
|
||||
});
|
||||
|
||||
flowElements.forEach(function(flowElement) {
|
||||
|
||||
var flowElementTrbl = asTRBL(flowElement);
|
||||
|
||||
if (isFirst && /n/.test(resizeDirection)) {
|
||||
addMin(minTrbl, 'top', flowElementTrbl.top - LANE_TOP_PADDING);
|
||||
}
|
||||
|
||||
if (/e/.test(resizeDirection)) {
|
||||
addMax(minTrbl, 'right', flowElementTrbl.right + LANE_RIGHT_PADDING);
|
||||
}
|
||||
|
||||
if (isLast && /s/.test(resizeDirection)) {
|
||||
addMax(minTrbl, 'bottom', flowElementTrbl.bottom + LANE_BOTTOM_PADDING);
|
||||
}
|
||||
|
||||
if (/w/.test(resizeDirection)) {
|
||||
addMin(minTrbl, 'left', flowElementTrbl.left - LANE_LEFT_PADDING);
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
min: minTrbl,
|
||||
max: maxTrbl
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
import {
|
||||
filter
|
||||
} from 'min-dash';
|
||||
|
||||
import {
|
||||
eachElement
|
||||
} from 'diagram-js/lib/util/Elements';
|
||||
|
||||
import {
|
||||
getLanesRoot,
|
||||
getChildLanes,
|
||||
LANE_INDENTATION
|
||||
} from '../util/LaneUtil';
|
||||
|
||||
|
||||
/**
|
||||
* A handler that allows us to add a new lane
|
||||
* above or below an existing one.
|
||||
*
|
||||
* @param {Modeling} modeling
|
||||
*/
|
||||
export default function AddLaneHandler(modeling, spaceTool) {
|
||||
this._modeling = modeling;
|
||||
this._spaceTool = spaceTool;
|
||||
}
|
||||
|
||||
AddLaneHandler.$inject = [
|
||||
'modeling',
|
||||
'spaceTool'
|
||||
];
|
||||
|
||||
|
||||
AddLaneHandler.prototype.preExecute = function(context) {
|
||||
|
||||
var spaceTool = this._spaceTool,
|
||||
modeling = this._modeling;
|
||||
|
||||
var shape = context.shape,
|
||||
location = context.location;
|
||||
|
||||
var lanesRoot = getLanesRoot(shape);
|
||||
|
||||
var isRoot = lanesRoot === shape,
|
||||
laneParent = isRoot ? shape : shape.parent;
|
||||
|
||||
var existingChildLanes = getChildLanes(laneParent);
|
||||
|
||||
// (0) add a lane if we currently got none and are adding to root
|
||||
if (!existingChildLanes.length) {
|
||||
modeling.createShape({ type: 'bpmn:Lane' }, {
|
||||
x: shape.x + LANE_INDENTATION,
|
||||
y: shape.y,
|
||||
width: shape.width - LANE_INDENTATION,
|
||||
height: shape.height
|
||||
}, laneParent);
|
||||
}
|
||||
|
||||
// (1) collect affected elements to create necessary space
|
||||
var allAffected = [];
|
||||
|
||||
eachElement(lanesRoot, function(element) {
|
||||
allAffected.push(element);
|
||||
|
||||
if (element === shape) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return filter(element.children, function(c) {
|
||||
return c !== shape;
|
||||
});
|
||||
});
|
||||
|
||||
var offset = location === 'top' ? -120 : 120,
|
||||
lanePosition = location === 'top' ? shape.y : shape.y + shape.height,
|
||||
spacePos = lanePosition + (location === 'top' ? 10 : -10),
|
||||
direction = location === 'top' ? 'n' : 's';
|
||||
|
||||
var adjustments = spaceTool.calculateAdjustments(allAffected, 'y', offset, spacePos);
|
||||
|
||||
spaceTool.makeSpace(adjustments.movingShapes, adjustments.resizingShapes, { x: 0, y: offset }, direction);
|
||||
|
||||
// (2) create new lane at open space
|
||||
context.newLane = modeling.createShape({ type: 'bpmn:Lane' }, {
|
||||
x: shape.x + (isRoot ? LANE_INDENTATION : 0),
|
||||
y: lanePosition - (location === 'top' ? 120 : 0),
|
||||
width: shape.width - (isRoot ? LANE_INDENTATION : 0),
|
||||
height: 120
|
||||
}, laneParent);
|
||||
};
|
||||
@@ -0,0 +1,36 @@
|
||||
export default function IdClaimHandler(moddle) {
|
||||
this._moddle = moddle;
|
||||
}
|
||||
|
||||
IdClaimHandler.$inject = [ 'moddle' ];
|
||||
|
||||
|
||||
IdClaimHandler.prototype.execute = function(context) {
|
||||
var ids = this._moddle.ids,
|
||||
id = context.id,
|
||||
element = context.element,
|
||||
claiming = context.claiming;
|
||||
|
||||
if (claiming) {
|
||||
ids.claim(id, element);
|
||||
} else {
|
||||
ids.unclaim(id);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Command revert implementation.
|
||||
*/
|
||||
IdClaimHandler.prototype.revert = function(context) {
|
||||
var ids = this._moddle.ids,
|
||||
id = context.id,
|
||||
element = context.element,
|
||||
claiming = context.claiming;
|
||||
|
||||
if (claiming) {
|
||||
ids.unclaim(id);
|
||||
} else {
|
||||
ids.claim(id, element);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -0,0 +1,134 @@
|
||||
import { is } from '../../../util/ModelUtil';
|
||||
|
||||
import {
|
||||
getLanesRoot,
|
||||
computeLanesResize
|
||||
} from '../util/LaneUtil';
|
||||
|
||||
import {
|
||||
eachElement
|
||||
} from 'diagram-js/lib/util/Elements';
|
||||
|
||||
import {
|
||||
asTRBL
|
||||
} from 'diagram-js/lib/layout/LayoutUtil';
|
||||
|
||||
import {
|
||||
substractTRBL
|
||||
} from 'diagram-js/lib/features/resize/ResizeUtil';
|
||||
|
||||
|
||||
/**
|
||||
* A handler that resizes a lane.
|
||||
*
|
||||
* @param {Modeling} modeling
|
||||
*/
|
||||
export default function ResizeLaneHandler(modeling, spaceTool) {
|
||||
this._modeling = modeling;
|
||||
this._spaceTool = spaceTool;
|
||||
}
|
||||
|
||||
ResizeLaneHandler.$inject = [
|
||||
'modeling',
|
||||
'spaceTool'
|
||||
];
|
||||
|
||||
|
||||
ResizeLaneHandler.prototype.preExecute = function(context) {
|
||||
|
||||
var shape = context.shape,
|
||||
newBounds = context.newBounds,
|
||||
balanced = context.balanced;
|
||||
|
||||
if (balanced !== false) {
|
||||
this.resizeBalanced(shape, newBounds);
|
||||
} else {
|
||||
this.resizeSpace(shape, newBounds);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Resize balanced, adjusting next / previous lane sizes.
|
||||
*
|
||||
* @param {djs.model.Shape} shape
|
||||
* @param {Bounds} newBounds
|
||||
*/
|
||||
ResizeLaneHandler.prototype.resizeBalanced = function(shape, newBounds) {
|
||||
|
||||
var modeling = this._modeling;
|
||||
|
||||
var resizeNeeded = computeLanesResize(shape, newBounds);
|
||||
|
||||
// resize the lane
|
||||
modeling.resizeShape(shape, newBounds);
|
||||
|
||||
// resize other lanes as needed
|
||||
resizeNeeded.forEach(function(r) {
|
||||
modeling.resizeShape(r.shape, r.newBounds);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Resize, making actual space and moving below / above elements.
|
||||
*
|
||||
* @param {djs.model.Shape} shape
|
||||
* @param {Bounds} newBounds
|
||||
*/
|
||||
ResizeLaneHandler.prototype.resizeSpace = function(shape, newBounds) {
|
||||
var spaceTool = this._spaceTool;
|
||||
|
||||
var shapeTrbl = asTRBL(shape),
|
||||
newTrbl = asTRBL(newBounds);
|
||||
|
||||
var trblDiff = substractTRBL(newTrbl, shapeTrbl);
|
||||
|
||||
var lanesRoot = getLanesRoot(shape);
|
||||
|
||||
var allAffected = [],
|
||||
allLanes = [];
|
||||
|
||||
eachElement(lanesRoot, function(element) {
|
||||
allAffected.push(element);
|
||||
|
||||
if (is(element, 'bpmn:Lane') || is(element, 'bpmn:Participant')) {
|
||||
allLanes.push(element);
|
||||
}
|
||||
|
||||
return element.children;
|
||||
});
|
||||
|
||||
var change,
|
||||
spacePos,
|
||||
direction,
|
||||
offset,
|
||||
adjustments;
|
||||
|
||||
if (trblDiff.bottom || trblDiff.top) {
|
||||
|
||||
change = trblDiff.bottom || trblDiff.top;
|
||||
spacePos = shape.y + (trblDiff.bottom ? shape.height : 0) + (trblDiff.bottom ? -10 : 10);
|
||||
direction = trblDiff.bottom ? 's' : 'n';
|
||||
|
||||
offset = trblDiff.top > 0 || trblDiff.bottom < 0 ? -change : change;
|
||||
|
||||
adjustments = spaceTool.calculateAdjustments(allAffected, 'y', offset, spacePos);
|
||||
|
||||
spaceTool.makeSpace(adjustments.movingShapes, adjustments.resizingShapes, { x: 0, y: change }, direction);
|
||||
}
|
||||
|
||||
|
||||
if (trblDiff.left || trblDiff.right) {
|
||||
|
||||
change = trblDiff.right || trblDiff.left;
|
||||
spacePos = shape.x + (trblDiff.right ? shape.width : 0) + (trblDiff.right ? -10 : 100);
|
||||
direction = trblDiff.right ? 'e' : 'w';
|
||||
|
||||
offset = trblDiff.left > 0 || trblDiff.right < 0 ? -change : change;
|
||||
|
||||
adjustments = spaceTool.calculateAdjustments(allLanes, 'x', offset, spacePos);
|
||||
|
||||
spaceTool.makeSpace(adjustments.movingShapes, adjustments.resizingShapes, { x: change, y: 0 }, direction);
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,48 @@
|
||||
import {
|
||||
assign,
|
||||
forEach
|
||||
} from 'min-dash';
|
||||
|
||||
|
||||
var DEFAULT_COLORS = {
|
||||
fill: undefined,
|
||||
stroke: undefined
|
||||
};
|
||||
|
||||
|
||||
export default function SetColorHandler(commandStack) {
|
||||
this._commandStack = commandStack;
|
||||
}
|
||||
|
||||
SetColorHandler.$inject = [
|
||||
'commandStack'
|
||||
];
|
||||
|
||||
|
||||
SetColorHandler.prototype.postExecute = function(context) {
|
||||
var elements = context.elements,
|
||||
colors = context.colors || DEFAULT_COLORS;
|
||||
|
||||
var self = this;
|
||||
|
||||
var di = {};
|
||||
|
||||
if ('fill' in colors) {
|
||||
assign(di, { fill: colors.fill });
|
||||
}
|
||||
|
||||
if ('stroke' in colors) {
|
||||
assign(di, { stroke: colors.stroke });
|
||||
}
|
||||
|
||||
forEach(elements, function(element) {
|
||||
|
||||
self._commandStack.execute('element.updateProperties', {
|
||||
element: element,
|
||||
properties: {
|
||||
di: di
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
};
|
||||
@@ -0,0 +1,83 @@
|
||||
import {
|
||||
getChildLanes,
|
||||
LANE_INDENTATION
|
||||
} from '../util/LaneUtil';
|
||||
|
||||
|
||||
/**
|
||||
* A handler that splits a lane into a number of sub-lanes,
|
||||
* creating new sub lanes, if neccessary.
|
||||
*
|
||||
* @param {Modeling} modeling
|
||||
*/
|
||||
export default function SplitLaneHandler(modeling, translate) {
|
||||
this._modeling = modeling;
|
||||
this._translate = translate;
|
||||
}
|
||||
|
||||
SplitLaneHandler.$inject = [
|
||||
'modeling',
|
||||
'translate'
|
||||
];
|
||||
|
||||
|
||||
SplitLaneHandler.prototype.preExecute = function(context) {
|
||||
|
||||
var modeling = this._modeling,
|
||||
translate = this._translate;
|
||||
|
||||
var shape = context.shape,
|
||||
newLanesCount = context.count;
|
||||
|
||||
var childLanes = getChildLanes(shape),
|
||||
existingLanesCount = childLanes.length;
|
||||
|
||||
if (existingLanesCount > newLanesCount) {
|
||||
throw new Error(translate('more than {count} child lanes', { count: newLanesCount }));
|
||||
}
|
||||
|
||||
var newLanesHeight = Math.round(shape.height / newLanesCount);
|
||||
|
||||
// Iterate from top to bottom in child lane order,
|
||||
// resizing existing lanes and creating new ones
|
||||
// so that they split the parent proportionally.
|
||||
//
|
||||
// Due to rounding related errors, the bottom lane
|
||||
// needs to take up all the remaining space.
|
||||
var laneY,
|
||||
laneHeight,
|
||||
laneBounds,
|
||||
newLaneAttrs,
|
||||
idx;
|
||||
|
||||
for (idx = 0; idx < newLanesCount; idx++) {
|
||||
|
||||
laneY = shape.y + idx * newLanesHeight;
|
||||
|
||||
// if bottom lane
|
||||
if (idx === newLanesCount - 1) {
|
||||
laneHeight = shape.height - (newLanesHeight * idx);
|
||||
} else {
|
||||
laneHeight = newLanesHeight;
|
||||
}
|
||||
|
||||
laneBounds = {
|
||||
x: shape.x + LANE_INDENTATION,
|
||||
y: laneY,
|
||||
width: shape.width - LANE_INDENTATION,
|
||||
height: laneHeight
|
||||
};
|
||||
|
||||
if (idx < existingLanesCount) {
|
||||
// resize existing lane
|
||||
modeling.resizeShape(childLanes[idx], laneBounds);
|
||||
} else {
|
||||
// create a new lane at position
|
||||
newLaneAttrs = {
|
||||
type: 'bpmn:Lane'
|
||||
};
|
||||
|
||||
modeling.createShape(newLaneAttrs, laneBounds, shape);
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,81 @@
|
||||
import {
|
||||
add as collectionAdd,
|
||||
remove as collectionRemove
|
||||
} from 'diagram-js/lib/util/Collections';
|
||||
|
||||
|
||||
export default function UpdateCanvasRootHandler(canvas, modeling) {
|
||||
this._canvas = canvas;
|
||||
this._modeling = modeling;
|
||||
}
|
||||
|
||||
UpdateCanvasRootHandler.$inject = [
|
||||
'canvas',
|
||||
'modeling'
|
||||
];
|
||||
|
||||
|
||||
UpdateCanvasRootHandler.prototype.execute = function(context) {
|
||||
|
||||
var canvas = this._canvas;
|
||||
|
||||
var newRoot = context.newRoot,
|
||||
newRootBusinessObject = newRoot.businessObject,
|
||||
oldRoot = canvas.getRootElement(),
|
||||
oldRootBusinessObject = oldRoot.businessObject,
|
||||
bpmnDefinitions = oldRootBusinessObject.$parent,
|
||||
diPlane = oldRootBusinessObject.di;
|
||||
|
||||
// (1) replace process old <> new root
|
||||
canvas.setRootElement(newRoot, true);
|
||||
|
||||
// (2) update root elements
|
||||
collectionAdd(bpmnDefinitions.rootElements, newRootBusinessObject);
|
||||
newRootBusinessObject.$parent = bpmnDefinitions;
|
||||
|
||||
collectionRemove(bpmnDefinitions.rootElements, oldRootBusinessObject);
|
||||
oldRootBusinessObject.$parent = null;
|
||||
|
||||
// (3) wire di
|
||||
oldRootBusinessObject.di = null;
|
||||
|
||||
diPlane.bpmnElement = newRootBusinessObject;
|
||||
newRootBusinessObject.di = diPlane;
|
||||
|
||||
context.oldRoot = oldRoot;
|
||||
|
||||
// TODO(nikku): return changed elements?
|
||||
// return [ newRoot, oldRoot ];
|
||||
};
|
||||
|
||||
|
||||
UpdateCanvasRootHandler.prototype.revert = function(context) {
|
||||
|
||||
var canvas = this._canvas;
|
||||
|
||||
var newRoot = context.newRoot,
|
||||
newRootBusinessObject = newRoot.businessObject,
|
||||
oldRoot = context.oldRoot,
|
||||
oldRootBusinessObject = oldRoot.businessObject,
|
||||
bpmnDefinitions = newRootBusinessObject.$parent,
|
||||
diPlane = newRootBusinessObject.di;
|
||||
|
||||
// (1) replace process old <> new root
|
||||
canvas.setRootElement(oldRoot, true);
|
||||
|
||||
// (2) update root elements
|
||||
collectionRemove(bpmnDefinitions.rootElements, newRootBusinessObject);
|
||||
newRootBusinessObject.$parent = null;
|
||||
|
||||
collectionAdd(bpmnDefinitions.rootElements, oldRootBusinessObject);
|
||||
oldRootBusinessObject.$parent = bpmnDefinitions;
|
||||
|
||||
// (3) wire di
|
||||
newRootBusinessObject.di = null;
|
||||
|
||||
diPlane.bpmnElement = oldRootBusinessObject;
|
||||
oldRootBusinessObject.di = diPlane;
|
||||
|
||||
// TODO(nikku): return changed elements?
|
||||
// return [ newRoot, oldRoot ];
|
||||
};
|
||||
@@ -0,0 +1,193 @@
|
||||
import {
|
||||
collectLanes,
|
||||
getLanesRoot
|
||||
} from '../util/LaneUtil';
|
||||
|
||||
import {
|
||||
is
|
||||
} from '../../../util/ModelUtil';
|
||||
|
||||
import {
|
||||
add as collectionAdd,
|
||||
remove as collectionRemove
|
||||
} from 'diagram-js/lib/util/Collections';
|
||||
|
||||
import {
|
||||
asTRBL
|
||||
} from 'diagram-js/lib/layout/LayoutUtil';
|
||||
|
||||
var FLOW_NODE_REFS_ATTR = 'flowNodeRef',
|
||||
LANES_ATTR = 'lanes';
|
||||
|
||||
|
||||
/**
|
||||
* A handler that updates lane refs on changed elements
|
||||
*/
|
||||
export default function UpdateFlowNodeRefsHandler(elementRegistry) {
|
||||
this._elementRegistry = elementRegistry;
|
||||
}
|
||||
|
||||
UpdateFlowNodeRefsHandler.$inject = [
|
||||
'elementRegistry'
|
||||
];
|
||||
|
||||
|
||||
UpdateFlowNodeRefsHandler.prototype.computeUpdates = function(flowNodeShapes, laneShapes) {
|
||||
|
||||
var handledNodes = {};
|
||||
|
||||
var updates = [];
|
||||
|
||||
var participantCache = {};
|
||||
|
||||
var allFlowNodeShapes = [];
|
||||
|
||||
function isInLaneShape(element, laneShape) {
|
||||
|
||||
var laneTrbl = asTRBL(laneShape);
|
||||
|
||||
var elementMid = {
|
||||
x: element.x + element.width / 2,
|
||||
y: element.y + element.height / 2
|
||||
};
|
||||
|
||||
return elementMid.x > laneTrbl.left &&
|
||||
elementMid.x < laneTrbl.right &&
|
||||
elementMid.y > laneTrbl.top &&
|
||||
elementMid.y < laneTrbl.bottom;
|
||||
}
|
||||
|
||||
function addFlowNodeShape(flowNodeShape) {
|
||||
if (!handledNodes[flowNodeShape.id]) {
|
||||
allFlowNodeShapes.push(flowNodeShape);
|
||||
handledNodes[flowNodeShape.id] = flowNodeShape;
|
||||
}
|
||||
}
|
||||
|
||||
function getAllLaneShapes(flowNodeShape) {
|
||||
|
||||
var root = getLanesRoot(flowNodeShape);
|
||||
|
||||
if (!participantCache[root.id]) {
|
||||
participantCache[root.id] = collectLanes(root);
|
||||
}
|
||||
|
||||
return participantCache[root.id];
|
||||
}
|
||||
|
||||
function getNewLanes(flowNodeShape) {
|
||||
if (!flowNodeShape.parent) {
|
||||
return [];
|
||||
}
|
||||
|
||||
var allLaneShapes = getAllLaneShapes(flowNodeShape);
|
||||
|
||||
return allLaneShapes.filter(function(l) {
|
||||
return isInLaneShape(flowNodeShape, l);
|
||||
}).map(function(shape) {
|
||||
return shape.businessObject;
|
||||
});
|
||||
}
|
||||
|
||||
laneShapes.forEach(function(laneShape) {
|
||||
var root = getLanesRoot(laneShape);
|
||||
|
||||
if (!root || handledNodes[root.id]) {
|
||||
return;
|
||||
}
|
||||
|
||||
var children = root.children.filter(function(c) {
|
||||
return is(c, 'bpmn:FlowNode');
|
||||
});
|
||||
|
||||
children.forEach(addFlowNodeShape);
|
||||
|
||||
handledNodes[root.id] = root;
|
||||
});
|
||||
|
||||
flowNodeShapes.forEach(addFlowNodeShape);
|
||||
|
||||
|
||||
allFlowNodeShapes.forEach(function(flowNodeShape) {
|
||||
|
||||
var flowNode = flowNodeShape.businessObject;
|
||||
|
||||
var lanes = flowNode.get(LANES_ATTR),
|
||||
remove = lanes.slice(),
|
||||
add = getNewLanes(flowNodeShape);
|
||||
|
||||
updates.push({ flowNode: flowNode, remove: remove, add: add });
|
||||
});
|
||||
|
||||
laneShapes.forEach(function(laneShape) {
|
||||
|
||||
var lane = laneShape.businessObject;
|
||||
|
||||
// lane got removed XX-)
|
||||
if (!laneShape.parent) {
|
||||
lane.get(FLOW_NODE_REFS_ATTR).forEach(function(flowNode) {
|
||||
updates.push({ flowNode: flowNode, remove: [ lane ], add: [] });
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return updates;
|
||||
};
|
||||
|
||||
UpdateFlowNodeRefsHandler.prototype.execute = function(context) {
|
||||
|
||||
var updates = context.updates;
|
||||
|
||||
if (!updates) {
|
||||
updates = context.updates = this.computeUpdates(context.flowNodeShapes, context.laneShapes);
|
||||
}
|
||||
|
||||
|
||||
updates.forEach(function(update) {
|
||||
|
||||
var flowNode = update.flowNode,
|
||||
lanes = flowNode.get(LANES_ATTR);
|
||||
|
||||
// unwire old
|
||||
update.remove.forEach(function(oldLane) {
|
||||
collectionRemove(lanes, oldLane);
|
||||
collectionRemove(oldLane.get(FLOW_NODE_REFS_ATTR), flowNode);
|
||||
});
|
||||
|
||||
// wire new
|
||||
update.add.forEach(function(newLane) {
|
||||
collectionAdd(lanes, newLane);
|
||||
collectionAdd(newLane.get(FLOW_NODE_REFS_ATTR), flowNode);
|
||||
});
|
||||
});
|
||||
|
||||
// TODO(nikku): return changed elements
|
||||
// return [ ... ];
|
||||
};
|
||||
|
||||
|
||||
UpdateFlowNodeRefsHandler.prototype.revert = function(context) {
|
||||
|
||||
var updates = context.updates;
|
||||
|
||||
updates.forEach(function(update) {
|
||||
|
||||
var flowNode = update.flowNode,
|
||||
lanes = flowNode.get(LANES_ATTR);
|
||||
|
||||
// unwire new
|
||||
update.add.forEach(function(newLane) {
|
||||
collectionRemove(lanes, newLane);
|
||||
collectionRemove(newLane.get(FLOW_NODE_REFS_ATTR), flowNode);
|
||||
});
|
||||
|
||||
// wire old
|
||||
update.remove.forEach(function(oldLane) {
|
||||
collectionAdd(lanes, oldLane);
|
||||
collectionAdd(oldLane.get(FLOW_NODE_REFS_ATTR), flowNode);
|
||||
});
|
||||
});
|
||||
|
||||
// TODO(nikku): return changed elements
|
||||
// return [ ... ];
|
||||
};
|
||||
@@ -0,0 +1,234 @@
|
||||
import {
|
||||
reduce,
|
||||
keys,
|
||||
forEach,
|
||||
assign
|
||||
} from 'min-dash';
|
||||
|
||||
import {
|
||||
getBusinessObject
|
||||
} from '../../../util/ModelUtil';
|
||||
|
||||
var DEFAULT_FLOW = 'default',
|
||||
ID = 'id',
|
||||
DI = 'di';
|
||||
|
||||
var NULL_DIMENSIONS = {
|
||||
width: 0,
|
||||
height: 0
|
||||
};
|
||||
|
||||
/**
|
||||
* A handler that implements a BPMN 2.0 property update.
|
||||
*
|
||||
* This should be used to set simple properties on elements with
|
||||
* an underlying BPMN business object.
|
||||
*
|
||||
* Use respective diagram-js provided handlers if you would
|
||||
* like to perform automated modeling.
|
||||
*/
|
||||
export default function UpdatePropertiesHandler(
|
||||
elementRegistry, moddle, translate,
|
||||
modeling, textRenderer) {
|
||||
|
||||
this._elementRegistry = elementRegistry;
|
||||
this._moddle = moddle;
|
||||
this._translate = translate;
|
||||
this._modeling = modeling;
|
||||
this._textRenderer = textRenderer;
|
||||
}
|
||||
|
||||
UpdatePropertiesHandler.$inject = [
|
||||
'elementRegistry',
|
||||
'moddle',
|
||||
'translate',
|
||||
'modeling',
|
||||
'textRenderer'
|
||||
];
|
||||
|
||||
|
||||
// api //////////////////////
|
||||
|
||||
/**
|
||||
* Updates a BPMN element with a list of new properties
|
||||
*
|
||||
* @param {Object} context
|
||||
* @param {djs.model.Base} context.element the element to update
|
||||
* @param {Object} context.properties a list of properties to set on the element's
|
||||
* businessObject (the BPMN model element)
|
||||
*
|
||||
* @return {Array<djs.model.Base>} the updated element
|
||||
*/
|
||||
UpdatePropertiesHandler.prototype.execute = function(context) {
|
||||
|
||||
var element = context.element,
|
||||
changed = [ element ],
|
||||
translate = this._translate;
|
||||
|
||||
if (!element) {
|
||||
throw new Error(translate('element required'));
|
||||
}
|
||||
|
||||
var elementRegistry = this._elementRegistry,
|
||||
ids = this._moddle.ids;
|
||||
|
||||
var businessObject = element.businessObject,
|
||||
properties = unwrapBusinessObjects(context.properties),
|
||||
oldProperties = context.oldProperties || getProperties(businessObject, properties);
|
||||
|
||||
if (isIdChange(properties, businessObject)) {
|
||||
ids.unclaim(businessObject[ID]);
|
||||
|
||||
elementRegistry.updateId(element, properties[ID]);
|
||||
|
||||
ids.claim(properties[ID], businessObject);
|
||||
}
|
||||
|
||||
// correctly indicate visual changes on default flow updates
|
||||
if (DEFAULT_FLOW in properties) {
|
||||
|
||||
if (properties[DEFAULT_FLOW]) {
|
||||
changed.push(elementRegistry.get(properties[DEFAULT_FLOW].id));
|
||||
}
|
||||
|
||||
if (businessObject[DEFAULT_FLOW]) {
|
||||
changed.push(elementRegistry.get(businessObject[DEFAULT_FLOW].id));
|
||||
}
|
||||
}
|
||||
|
||||
// update properties
|
||||
setProperties(businessObject, properties);
|
||||
|
||||
// store old values
|
||||
context.oldProperties = oldProperties;
|
||||
context.changed = changed;
|
||||
|
||||
// indicate changed on objects affected by the update
|
||||
return changed;
|
||||
};
|
||||
|
||||
|
||||
UpdatePropertiesHandler.prototype.postExecute = function(context) {
|
||||
var element = context.element,
|
||||
label = element.label;
|
||||
|
||||
var text = label && getBusinessObject(label).name;
|
||||
|
||||
if (!text) {
|
||||
return;
|
||||
}
|
||||
|
||||
// get layouted text bounds and resize external
|
||||
// external label accordingly
|
||||
var newLabelBounds = this._textRenderer.getExternalLabelBounds(label, text);
|
||||
|
||||
this._modeling.resizeShape(label, newLabelBounds, NULL_DIMENSIONS);
|
||||
};
|
||||
|
||||
/**
|
||||
* Reverts the update on a BPMN elements properties.
|
||||
*
|
||||
* @param {Object} context
|
||||
*
|
||||
* @return {djs.model.Base} the updated element
|
||||
*/
|
||||
UpdatePropertiesHandler.prototype.revert = function(context) {
|
||||
|
||||
var element = context.element,
|
||||
properties = context.properties,
|
||||
oldProperties = context.oldProperties,
|
||||
businessObject = element.businessObject,
|
||||
elementRegistry = this._elementRegistry,
|
||||
ids = this._moddle.ids;
|
||||
|
||||
// update properties
|
||||
setProperties(businessObject, oldProperties);
|
||||
|
||||
if (isIdChange(properties, businessObject)) {
|
||||
ids.unclaim(properties[ID]);
|
||||
|
||||
elementRegistry.updateId(element, oldProperties[ID]);
|
||||
|
||||
ids.claim(oldProperties[ID], businessObject);
|
||||
}
|
||||
|
||||
return context.changed;
|
||||
};
|
||||
|
||||
|
||||
function isIdChange(properties, businessObject) {
|
||||
return ID in properties && properties[ID] !== businessObject[ID];
|
||||
}
|
||||
|
||||
|
||||
function getProperties(businessObject, properties) {
|
||||
var propertyNames = keys(properties);
|
||||
|
||||
return reduce(propertyNames, function(result, key) {
|
||||
|
||||
// handle DI seperately
|
||||
if (key !== DI) {
|
||||
result[key] = businessObject.get(key);
|
||||
} else {
|
||||
result[key] = getDiProperties(businessObject.di, keys(properties.di));
|
||||
}
|
||||
|
||||
return result;
|
||||
}, {});
|
||||
}
|
||||
|
||||
|
||||
function getDiProperties(di, propertyNames) {
|
||||
return reduce(propertyNames, function(result, key) {
|
||||
result[key] = di.get(key);
|
||||
|
||||
return result;
|
||||
}, {});
|
||||
}
|
||||
|
||||
|
||||
function setProperties(businessObject, properties) {
|
||||
forEach(properties, function(value, key) {
|
||||
|
||||
if (key !== DI) {
|
||||
businessObject.set(key, value);
|
||||
} else {
|
||||
// only update, if businessObject.di exists
|
||||
if (businessObject.di) {
|
||||
setDiProperties(businessObject.di, value);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function setDiProperties(di, properties) {
|
||||
forEach(properties, function(value, key) {
|
||||
di.set(key, value);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
var referencePropertyNames = [ 'default' ];
|
||||
|
||||
/**
|
||||
* Make sure we unwrap the actual business object
|
||||
* behind diagram element that may have been
|
||||
* passed as arguments.
|
||||
*
|
||||
* @param {Object} properties
|
||||
*
|
||||
* @return {Object} unwrappedProps
|
||||
*/
|
||||
function unwrapBusinessObjects(properties) {
|
||||
|
||||
var unwrappedProps = assign({}, properties);
|
||||
|
||||
referencePropertyNames.forEach(function(name) {
|
||||
if (name in properties) {
|
||||
unwrappedProps[name] = getBusinessObject(unwrappedProps[name]);
|
||||
}
|
||||
});
|
||||
|
||||
return unwrappedProps;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
export default function UpdateSemanticParentHandler(bpmnUpdater) {
|
||||
this._bpmnUpdater = bpmnUpdater;
|
||||
}
|
||||
|
||||
UpdateSemanticParentHandler.$inject = [ 'bpmnUpdater' ];
|
||||
|
||||
|
||||
UpdateSemanticParentHandler.prototype.execute = function(context) {
|
||||
var dataStoreBo = context.dataStoreBo,
|
||||
newSemanticParent = context.newSemanticParent,
|
||||
newDiParent = context.newDiParent;
|
||||
|
||||
context.oldSemanticParent = dataStoreBo.$parent;
|
||||
context.oldDiParent = dataStoreBo.di.$parent;
|
||||
|
||||
// update semantic parent
|
||||
this._bpmnUpdater.updateSemanticParent(dataStoreBo, newSemanticParent);
|
||||
|
||||
// update DI parent
|
||||
this._bpmnUpdater.updateDiParent(dataStoreBo.di, newDiParent);
|
||||
};
|
||||
|
||||
UpdateSemanticParentHandler.prototype.revert = function(context) {
|
||||
var dataStoreBo = context.dataStoreBo,
|
||||
oldSemanticParent = context.oldSemanticParent,
|
||||
oldDiParent = context.oldDiParent;
|
||||
|
||||
// update semantic parent
|
||||
this._bpmnUpdater.updateSemanticParent(dataStoreBo, oldSemanticParent);
|
||||
|
||||
// update DI parent
|
||||
this._bpmnUpdater.updateDiParent(dataStoreBo.di, oldDiParent);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
import BehaviorModule from './behavior';
|
||||
import RulesModule from '../rules';
|
||||
import OrderingModule from '../ordering';
|
||||
import ReplaceModule from '../replace';
|
||||
|
||||
import CommandModule from 'diagram-js/lib/command';
|
||||
import TooltipsModule from 'diagram-js/lib/features/tooltips';
|
||||
import LabelSupportModule from 'diagram-js/lib/features/label-support';
|
||||
import AttachSupportModule from 'diagram-js/lib/features/attach-support';
|
||||
import SelectionModule from 'diagram-js/lib/features/selection';
|
||||
import ChangeSupportModule from 'diagram-js/lib/features/change-support';
|
||||
import SpaceToolModule from 'diagram-js/lib/features/space-tool';
|
||||
|
||||
import BpmnFactory from './BpmnFactory';
|
||||
import BpmnUpdater from './BpmnUpdater';
|
||||
import ElementFactory from './ElementFactory';
|
||||
import Modeling from './Modeling';
|
||||
import BpmnLayouter from './BpmnLayouter';
|
||||
import CroppingConnectionDocking from 'diagram-js/lib/layout/CroppingConnectionDocking';
|
||||
|
||||
|
||||
export default {
|
||||
__init__: [
|
||||
'modeling',
|
||||
'bpmnUpdater'
|
||||
],
|
||||
__depends__: [
|
||||
BehaviorModule,
|
||||
RulesModule,
|
||||
OrderingModule,
|
||||
ReplaceModule,
|
||||
CommandModule,
|
||||
TooltipsModule,
|
||||
LabelSupportModule,
|
||||
AttachSupportModule,
|
||||
SelectionModule,
|
||||
ChangeSupportModule,
|
||||
SpaceToolModule
|
||||
],
|
||||
bpmnFactory: [ 'type', BpmnFactory ],
|
||||
bpmnUpdater: [ 'type', BpmnUpdater ],
|
||||
elementFactory: [ 'type', ElementFactory ],
|
||||
modeling: [ 'type', Modeling ],
|
||||
layouter: [ 'type', BpmnLayouter ],
|
||||
connectionDocking: [ 'type', CroppingConnectionDocking ]
|
||||
};
|
||||
@@ -0,0 +1,154 @@
|
||||
import { is } from '../../../util/ModelUtil';
|
||||
|
||||
import {
|
||||
getParent
|
||||
} from './ModelingUtil';
|
||||
|
||||
import {
|
||||
asTRBL
|
||||
} from 'diagram-js/lib/layout/LayoutUtil';
|
||||
|
||||
import {
|
||||
substractTRBL,
|
||||
resizeTRBL
|
||||
} from 'diagram-js/lib/features/resize/ResizeUtil';
|
||||
|
||||
var abs = Math.abs;
|
||||
|
||||
|
||||
function getTRBLResize(oldBounds, newBounds) {
|
||||
return substractTRBL(asTRBL(newBounds), asTRBL(oldBounds));
|
||||
}
|
||||
|
||||
|
||||
var LANE_PARENTS = [
|
||||
'bpmn:Participant',
|
||||
'bpmn:Process',
|
||||
'bpmn:SubProcess'
|
||||
];
|
||||
|
||||
export var LANE_INDENTATION = 30;
|
||||
|
||||
|
||||
/**
|
||||
* Collect all lane shapes in the given paren
|
||||
*
|
||||
* @param {djs.model.Shape} shape
|
||||
* @param {Array<djs.model.Base>} [collectedShapes]
|
||||
*
|
||||
* @return {Array<djs.model.Base>}
|
||||
*/
|
||||
export function collectLanes(shape, collectedShapes) {
|
||||
|
||||
collectedShapes = collectedShapes || [];
|
||||
|
||||
shape.children.filter(function(s) {
|
||||
if (is(s, 'bpmn:Lane')) {
|
||||
collectLanes(s, collectedShapes);
|
||||
|
||||
collectedShapes.push(s);
|
||||
}
|
||||
});
|
||||
|
||||
return collectedShapes;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Return the lane children of the given element.
|
||||
*
|
||||
* @param {djs.model.Shape} shape
|
||||
*
|
||||
* @return {Array<djs.model.Shape>}
|
||||
*/
|
||||
export function getChildLanes(shape) {
|
||||
return shape.children.filter(function(c) {
|
||||
return is(c, 'bpmn:Lane');
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Return the root element containing the given lane shape
|
||||
*
|
||||
* @param {djs.model.Shape} shape
|
||||
*
|
||||
* @return {djs.model.Shape}
|
||||
*/
|
||||
export function getLanesRoot(shape) {
|
||||
return getParent(shape, LANE_PARENTS) || shape;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Compute the required resize operations for lanes
|
||||
* adjacent to the given shape, assuming it will be
|
||||
* resized to the given new bounds.
|
||||
*
|
||||
* @param {djs.model.Shape} shape
|
||||
* @param {Bounds} newBounds
|
||||
*
|
||||
* @return {Array<Object>}
|
||||
*/
|
||||
export function computeLanesResize(shape, newBounds) {
|
||||
|
||||
var rootElement = getLanesRoot(shape);
|
||||
|
||||
var initialShapes = is(rootElement, 'bpmn:Process') ? [] : [ rootElement ];
|
||||
|
||||
var allLanes = collectLanes(rootElement, initialShapes),
|
||||
shapeTrbl = asTRBL(shape),
|
||||
shapeNewTrbl = asTRBL(newBounds),
|
||||
trblResize = getTRBLResize(shape, newBounds),
|
||||
resizeNeeded = [];
|
||||
|
||||
allLanes.forEach(function(other) {
|
||||
|
||||
if (other === shape) {
|
||||
return;
|
||||
}
|
||||
|
||||
var topResize = 0,
|
||||
rightResize = trblResize.right,
|
||||
bottomResize = 0,
|
||||
leftResize = trblResize.left;
|
||||
|
||||
var otherTrbl = asTRBL(other);
|
||||
|
||||
if (trblResize.top) {
|
||||
if (abs(otherTrbl.bottom - shapeTrbl.top) < 10) {
|
||||
bottomResize = shapeNewTrbl.top - otherTrbl.bottom;
|
||||
}
|
||||
|
||||
if (abs(otherTrbl.top - shapeTrbl.top) < 5) {
|
||||
topResize = shapeNewTrbl.top - otherTrbl.top;
|
||||
}
|
||||
}
|
||||
|
||||
if (trblResize.bottom) {
|
||||
if (abs(otherTrbl.top - shapeTrbl.bottom) < 10) {
|
||||
topResize = shapeNewTrbl.bottom - otherTrbl.top;
|
||||
}
|
||||
|
||||
if (abs(otherTrbl.bottom - shapeTrbl.bottom) < 5) {
|
||||
bottomResize = shapeNewTrbl.bottom - otherTrbl.bottom;
|
||||
}
|
||||
}
|
||||
|
||||
if (topResize || rightResize || bottomResize || leftResize) {
|
||||
|
||||
resizeNeeded.push({
|
||||
shape: other,
|
||||
newBounds: resizeTRBL(other, {
|
||||
top: topResize,
|
||||
right: rightResize,
|
||||
bottom: bottomResize,
|
||||
left: leftResize
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
return resizeNeeded;
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import {
|
||||
some
|
||||
} from 'min-dash';
|
||||
|
||||
import { is } from '../../../util/ModelUtil';
|
||||
|
||||
|
||||
/**
|
||||
* Return true if element has any of the given types.
|
||||
*
|
||||
* @param {djs.model.Base} element
|
||||
* @param {Array<String>} types
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
export function isAny(element, types) {
|
||||
return some(types, function(t) {
|
||||
return is(element, t);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Return the parent of the element with any of the given types.
|
||||
*
|
||||
* @param {djs.model.Base} element
|
||||
* @param {String|Array<String>} anyType
|
||||
*
|
||||
* @return {djs.model.Base}
|
||||
*/
|
||||
export function getParent(element, anyType) {
|
||||
|
||||
if (typeof anyType === 'string') {
|
||||
anyType = [ anyType ];
|
||||
}
|
||||
|
||||
while ((element = element.parent)) {
|
||||
if (isAny(element, anyType)) {
|
||||
return element;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
@@ -0,0 +1,179 @@
|
||||
import inherits from 'inherits';
|
||||
|
||||
import OrderingProvider from 'diagram-js/lib/features/ordering/OrderingProvider';
|
||||
|
||||
import {
|
||||
isAny
|
||||
} from '../modeling/util/ModelingUtil';
|
||||
|
||||
import {
|
||||
findIndex,
|
||||
find
|
||||
} from 'min-dash';
|
||||
|
||||
|
||||
/**
|
||||
* a simple ordering provider that makes sure:
|
||||
*
|
||||
* (0) labels and groups are rendered always on top
|
||||
* (1) elements are ordered by a {level} property
|
||||
*/
|
||||
export default function BpmnOrderingProvider(eventBus, canvas, translate) {
|
||||
|
||||
OrderingProvider.call(this, eventBus);
|
||||
|
||||
var orders = [
|
||||
{ type: 'bpmn:SubProcess', order: { level: 6 } },
|
||||
{
|
||||
type: 'bpmn:SequenceFlow',
|
||||
order: {
|
||||
level: 3,
|
||||
containers: [
|
||||
'bpmn:Participant',
|
||||
'bpmn:FlowElementsContainer'
|
||||
]
|
||||
}
|
||||
},
|
||||
// handle DataAssociation(s) like message flows and render them always on top
|
||||
{
|
||||
type: 'bpmn:DataAssociation',
|
||||
order: {
|
||||
level: 9,
|
||||
containers: [
|
||||
'bpmn:Collaboration',
|
||||
'bpmn:Process'
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'bpmn:MessageFlow', order: {
|
||||
level: 9,
|
||||
containers: [ 'bpmn:Collaboration' ]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'bpmn:Association',
|
||||
order: {
|
||||
level: 6,
|
||||
containers: [
|
||||
'bpmn:Participant',
|
||||
'bpmn:FlowElementsContainer',
|
||||
'bpmn:Collaboration'
|
||||
]
|
||||
}
|
||||
},
|
||||
{ type: 'bpmn:BoundaryEvent', order: { level: 8 } },
|
||||
{
|
||||
type: 'bpmn:Group',
|
||||
order: {
|
||||
level: 10,
|
||||
containers: [
|
||||
'bpmn:Collaboration',
|
||||
'bpmn:Process'
|
||||
]
|
||||
}
|
||||
},
|
||||
{ type: 'bpmn:FlowElement', order: { level: 5 } },
|
||||
{ type: 'bpmn:Participant', order: { level: -2 } },
|
||||
{ type: 'bpmn:Lane', order: { level: -1 } }
|
||||
];
|
||||
|
||||
function computeOrder(element) {
|
||||
if (element.labelTarget) {
|
||||
return { level: 10 };
|
||||
}
|
||||
|
||||
var entry = find(orders, function(o) {
|
||||
return isAny(element, [ o.type ]);
|
||||
});
|
||||
|
||||
return entry && entry.order || { level: 1 };
|
||||
}
|
||||
|
||||
function getOrder(element) {
|
||||
|
||||
var order = element.order;
|
||||
|
||||
if (!order) {
|
||||
element.order = order = computeOrder(element);
|
||||
}
|
||||
|
||||
return order;
|
||||
}
|
||||
|
||||
function findActualParent(element, newParent, containers) {
|
||||
|
||||
var actualParent = newParent;
|
||||
|
||||
while (actualParent) {
|
||||
|
||||
if (isAny(actualParent, containers)) {
|
||||
break;
|
||||
}
|
||||
|
||||
actualParent = actualParent.parent;
|
||||
}
|
||||
|
||||
if (!actualParent) {
|
||||
throw new Error(translate('no parent for {element} in {parent}', {
|
||||
element: element.id,
|
||||
parent: newParent.id
|
||||
}));
|
||||
}
|
||||
|
||||
return actualParent;
|
||||
}
|
||||
|
||||
this.getOrdering = function(element, newParent) {
|
||||
|
||||
// render labels always on top
|
||||
if (element.labelTarget) {
|
||||
return {
|
||||
parent: canvas.getRootElement(),
|
||||
index: -1
|
||||
};
|
||||
}
|
||||
|
||||
var elementOrder = getOrder(element);
|
||||
|
||||
|
||||
if (elementOrder.containers) {
|
||||
newParent = findActualParent(element, newParent, elementOrder.containers);
|
||||
}
|
||||
|
||||
|
||||
var currentIndex = newParent.children.indexOf(element);
|
||||
|
||||
var insertIndex = findIndex(newParent.children, function(child) {
|
||||
|
||||
// do not compare with labels, they are created
|
||||
// in the wrong order (right after elements) during import and
|
||||
// mess up the positioning.
|
||||
if (!element.labelTarget && child.labelTarget) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return elementOrder.level < getOrder(child).level;
|
||||
});
|
||||
|
||||
|
||||
// if the element is already in the child list at
|
||||
// a smaller index, we need to adjust the insert index.
|
||||
// this takes into account that the element is being removed
|
||||
// before being re-inserted
|
||||
if (insertIndex !== -1) {
|
||||
if (currentIndex !== -1 && currentIndex < insertIndex) {
|
||||
insertIndex -= 1;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
index: insertIndex,
|
||||
parent: newParent
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
BpmnOrderingProvider.$inject = [ 'eventBus', 'canvas', 'translate' ];
|
||||
|
||||
inherits(BpmnOrderingProvider, OrderingProvider);
|
||||
@@ -0,0 +1,11 @@
|
||||
import translate from 'diagram-js/lib/i18n/translate';
|
||||
|
||||
import BpmnOrderingProvider from './BpmnOrderingProvider';
|
||||
|
||||
export default {
|
||||
__depends__: [
|
||||
translate
|
||||
],
|
||||
__init__: [ 'bpmnOrderingProvider' ],
|
||||
bpmnOrderingProvider: [ 'type', BpmnOrderingProvider ]
|
||||
};
|
||||
@@ -0,0 +1,171 @@
|
||||
import {
|
||||
assign
|
||||
} from 'min-dash';
|
||||
|
||||
|
||||
/**
|
||||
* A palette provider for BPMN 2.0 elements.
|
||||
*/
|
||||
export default function PaletteProvider(
|
||||
palette, create, elementFactory,
|
||||
spaceTool, lassoTool, handTool,
|
||||
globalConnect, translate) {
|
||||
|
||||
this._palette = palette;
|
||||
this._create = create;
|
||||
this._elementFactory = elementFactory;
|
||||
this._spaceTool = spaceTool;
|
||||
this._lassoTool = lassoTool;
|
||||
this._handTool = handTool;
|
||||
this._globalConnect = globalConnect;
|
||||
this._translate = translate;
|
||||
|
||||
palette.registerProvider(this);
|
||||
}
|
||||
|
||||
PaletteProvider.$inject = [
|
||||
'palette',
|
||||
'create',
|
||||
'elementFactory',
|
||||
'spaceTool',
|
||||
'lassoTool',
|
||||
'handTool',
|
||||
'globalConnect',
|
||||
'translate'
|
||||
];
|
||||
|
||||
|
||||
PaletteProvider.prototype.getPaletteEntries = function(element) {
|
||||
|
||||
var actions = {},
|
||||
create = this._create,
|
||||
elementFactory = this._elementFactory,
|
||||
spaceTool = this._spaceTool,
|
||||
lassoTool = this._lassoTool,
|
||||
handTool = this._handTool,
|
||||
globalConnect = this._globalConnect,
|
||||
translate = this._translate;
|
||||
|
||||
function createAction(type, group, className, title, options) {
|
||||
|
||||
function createListener(event) {
|
||||
var shape = elementFactory.createShape(assign({ type: type }, options));
|
||||
|
||||
if (options) {
|
||||
shape.businessObject.di.isExpanded = options.isExpanded;
|
||||
}
|
||||
|
||||
create.start(event, shape);
|
||||
}
|
||||
|
||||
var shortType = type.replace(/^bpmn:/, '');
|
||||
|
||||
return {
|
||||
group: group,
|
||||
className: className,
|
||||
title: title || translate('Create {type}', { type: shortType }),
|
||||
action: {
|
||||
dragstart: createListener,
|
||||
click: createListener
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function createParticipant(event, collapsed) {
|
||||
create.start(event, elementFactory.createParticipantShape(collapsed));
|
||||
}
|
||||
|
||||
assign(actions, {
|
||||
'hand-tool': {
|
||||
group: 'tools',
|
||||
className: 'bpmn-icon-hand-tool',
|
||||
title: translate('Activate the hand tool'),
|
||||
action: {
|
||||
click: function(event) {
|
||||
handTool.activateHand(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
'lasso-tool': {
|
||||
group: 'tools',
|
||||
className: 'bpmn-icon-lasso-tool',
|
||||
title: translate('Activate the lasso tool'),
|
||||
action: {
|
||||
click: function(event) {
|
||||
lassoTool.activateSelection(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
'space-tool': {
|
||||
group: 'tools',
|
||||
className: 'bpmn-icon-space-tool',
|
||||
title: translate('Activate the create/remove space tool'),
|
||||
action: {
|
||||
click: function(event) {
|
||||
spaceTool.activateSelection(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
'global-connect-tool': {
|
||||
group: 'tools',
|
||||
className: 'bpmn-icon-connection-multi',
|
||||
title: translate('Activate the global connect tool'),
|
||||
action: {
|
||||
click: function(event) {
|
||||
globalConnect.toggle(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
'tool-separator': {
|
||||
group: 'tools',
|
||||
separator: true
|
||||
},
|
||||
'create.start-event': createAction(
|
||||
'bpmn:StartEvent', 'event', 'bpmn-icon-start-event-none',
|
||||
translate('Create StartEvent')
|
||||
),
|
||||
'create.intermediate-event': createAction(
|
||||
'bpmn:IntermediateThrowEvent', 'event', 'bpmn-icon-intermediate-event-none',
|
||||
translate('Create Intermediate/Boundary Event')
|
||||
),
|
||||
'create.end-event': createAction(
|
||||
'bpmn:EndEvent', 'event', 'bpmn-icon-end-event-none',
|
||||
translate('Create EndEvent')
|
||||
),
|
||||
'create.exclusive-gateway': createAction(
|
||||
'bpmn:ExclusiveGateway', 'gateway', 'bpmn-icon-gateway-none',
|
||||
translate('Create Gateway')
|
||||
),
|
||||
'create.task': createAction(
|
||||
'bpmn:Task', 'activity', 'bpmn-icon-task',
|
||||
translate('Create Task')
|
||||
),
|
||||
'create.data-object': createAction(
|
||||
'bpmn:DataObjectReference', 'data-object', 'bpmn-icon-data-object',
|
||||
translate('Create DataObjectReference')
|
||||
),
|
||||
'create.data-store': createAction(
|
||||
'bpmn:DataStoreReference', 'data-store', 'bpmn-icon-data-store',
|
||||
translate('Create DataStoreReference')
|
||||
),
|
||||
'create.subprocess-expanded': createAction(
|
||||
'bpmn:SubProcess', 'activity', 'bpmn-icon-subprocess-expanded',
|
||||
translate('Create expanded SubProcess'),
|
||||
{ isExpanded: true }
|
||||
),
|
||||
'create.participant-expanded': {
|
||||
group: 'collaboration',
|
||||
className: 'bpmn-icon-participant',
|
||||
title: translate('Create Pool/Participant'),
|
||||
action: {
|
||||
dragstart: createParticipant,
|
||||
click: createParticipant
|
||||
}
|
||||
},
|
||||
'create.group': createAction(
|
||||
'bpmn:Group', 'artifact', 'bpmn-icon-group'
|
||||
),
|
||||
});
|
||||
|
||||
return actions;
|
||||
};
|
||||
@@ -0,0 +1,23 @@
|
||||
import PaletteModule from 'diagram-js/lib/features/palette';
|
||||
import CreateModule from 'diagram-js/lib/features/create';
|
||||
import SpaceToolModule from 'diagram-js/lib/features/space-tool';
|
||||
import LassoToolModule from 'diagram-js/lib/features/lasso-tool';
|
||||
import HandToolModule from 'diagram-js/lib/features/hand-tool';
|
||||
import GlobalConnectModule from 'diagram-js/lib/features/global-connect';
|
||||
import translate from 'diagram-js/lib/i18n/translate';
|
||||
|
||||
import PaletteProvider from './PaletteProvider';
|
||||
|
||||
export default {
|
||||
__depends__: [
|
||||
PaletteModule,
|
||||
CreateModule,
|
||||
SpaceToolModule,
|
||||
LassoToolModule,
|
||||
HandToolModule,
|
||||
GlobalConnectModule,
|
||||
translate
|
||||
],
|
||||
__init__: [ 'paletteProvider' ],
|
||||
paletteProvider: [ 'type', PaletteProvider ]
|
||||
};
|
||||
@@ -0,0 +1,493 @@
|
||||
import {
|
||||
getBusinessObject,
|
||||
is
|
||||
} from '../../util/ModelUtil';
|
||||
|
||||
import {
|
||||
isEventSubProcess,
|
||||
isExpanded
|
||||
} from '../../util/DiUtil';
|
||||
|
||||
import {
|
||||
isDifferentType
|
||||
} from './util/TypeUtil';
|
||||
|
||||
import {
|
||||
forEach,
|
||||
filter
|
||||
} from 'min-dash';
|
||||
|
||||
import * as replaceOptions from '../replace/ReplaceOptions';
|
||||
|
||||
|
||||
/**
|
||||
* This module is an element agnostic replace menu provider for the popup menu.
|
||||
*/
|
||||
export default function ReplaceMenuProvider(
|
||||
popupMenu, modeling, moddle,
|
||||
bpmnReplace, rules, translate) {
|
||||
|
||||
this._popupMenu = popupMenu;
|
||||
this._modeling = modeling;
|
||||
this._moddle = moddle;
|
||||
this._bpmnReplace = bpmnReplace;
|
||||
this._rules = rules;
|
||||
this._translate = translate;
|
||||
|
||||
this.register();
|
||||
}
|
||||
|
||||
ReplaceMenuProvider.$inject = [
|
||||
'popupMenu',
|
||||
'modeling',
|
||||
'moddle',
|
||||
'bpmnReplace',
|
||||
'rules',
|
||||
'translate'
|
||||
];
|
||||
|
||||
|
||||
/**
|
||||
* Register replace menu provider in the popup menu
|
||||
*/
|
||||
ReplaceMenuProvider.prototype.register = function() {
|
||||
this._popupMenu.registerProvider('bpmn-replace', this);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get all entries from replaceOptions for the given element and apply filters
|
||||
* on them. Get for example only elements, which are different from the current one.
|
||||
*
|
||||
* @param {djs.model.Base} element
|
||||
*
|
||||
* @return {Array<Object>} a list of menu entry items
|
||||
*/
|
||||
ReplaceMenuProvider.prototype.getEntries = function(element) {
|
||||
|
||||
var businessObject = element.businessObject;
|
||||
|
||||
var rules = this._rules;
|
||||
|
||||
var entries;
|
||||
|
||||
if (!rules.allowed('shape.replace', { element: element })) {
|
||||
return [];
|
||||
}
|
||||
|
||||
var differentType = isDifferentType(element);
|
||||
|
||||
// start events outside event sub processes
|
||||
if (is(businessObject, 'bpmn:StartEvent') && !isEventSubProcess(businessObject.$parent)) {
|
||||
|
||||
entries = filter(replaceOptions.START_EVENT, differentType);
|
||||
|
||||
return this._createEntries(element, entries);
|
||||
}
|
||||
|
||||
// expanded/collapsed pools
|
||||
if (is(businessObject, 'bpmn:Participant')) {
|
||||
|
||||
entries = filter(replaceOptions.PARTICIPANT, function(entry) {
|
||||
return isExpanded(businessObject) !== entry.target.isExpanded;
|
||||
});
|
||||
|
||||
return this._createEntries(element, entries);
|
||||
}
|
||||
|
||||
// start events inside event sub processes
|
||||
if (is(businessObject, 'bpmn:StartEvent') && isEventSubProcess(businessObject.$parent)) {
|
||||
|
||||
entries = filter(replaceOptions.EVENT_SUB_PROCESS_START_EVENT, function(entry) {
|
||||
|
||||
var target = entry.target;
|
||||
|
||||
var isInterrupting = target.isInterrupting !== false;
|
||||
|
||||
var isInterruptingEqual = getBusinessObject(element).isInterrupting === isInterrupting;
|
||||
|
||||
// filters elements which types and event definition are equal but have have different interrupting types
|
||||
return differentType(entry) || !differentType(entry) && !isInterruptingEqual;
|
||||
|
||||
});
|
||||
|
||||
return this._createEntries(element, entries);
|
||||
}
|
||||
|
||||
// end events
|
||||
if (is(businessObject, 'bpmn:EndEvent')) {
|
||||
|
||||
entries = filter(replaceOptions.END_EVENT, function(entry) {
|
||||
var target = entry.target;
|
||||
|
||||
// hide cancel end events outside transactions
|
||||
if (target.eventDefinitionType == 'bpmn:CancelEventDefinition' && !is(businessObject.$parent, 'bpmn:Transaction')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return differentType(entry);
|
||||
});
|
||||
|
||||
return this._createEntries(element, entries);
|
||||
}
|
||||
|
||||
// boundary events
|
||||
if (is(businessObject, 'bpmn:BoundaryEvent')) {
|
||||
|
||||
entries = filter(replaceOptions.BOUNDARY_EVENT, function(entry) {
|
||||
|
||||
var target = entry.target;
|
||||
|
||||
if (target.eventDefinition == 'bpmn:CancelEventDefinition' &&
|
||||
!is(businessObject.attachedToRef, 'bpmn:Transaction')) {
|
||||
return false;
|
||||
}
|
||||
var cancelActivity = target.cancelActivity !== false;
|
||||
|
||||
var isCancelActivityEqual = businessObject.cancelActivity == cancelActivity;
|
||||
|
||||
return differentType(entry) || !differentType(entry) && !isCancelActivityEqual;
|
||||
});
|
||||
|
||||
return this._createEntries(element, entries);
|
||||
}
|
||||
|
||||
// intermediate events
|
||||
if (is(businessObject, 'bpmn:IntermediateCatchEvent') ||
|
||||
is(businessObject, 'bpmn:IntermediateThrowEvent')) {
|
||||
|
||||
entries = filter(replaceOptions.INTERMEDIATE_EVENT, differentType);
|
||||
|
||||
return this._createEntries(element, entries);
|
||||
}
|
||||
|
||||
// gateways
|
||||
if (is(businessObject, 'bpmn:Gateway')) {
|
||||
|
||||
entries = filter(replaceOptions.GATEWAY, differentType);
|
||||
|
||||
return this._createEntries(element, entries);
|
||||
}
|
||||
|
||||
// transactions
|
||||
if (is(businessObject, 'bpmn:Transaction')) {
|
||||
|
||||
entries = filter(replaceOptions.TRANSACTION, differentType);
|
||||
|
||||
return this._createEntries(element, entries);
|
||||
}
|
||||
|
||||
// expanded event sub processes
|
||||
if (isEventSubProcess(businessObject) && isExpanded(businessObject)) {
|
||||
|
||||
entries = filter(replaceOptions.EVENT_SUB_PROCESS, differentType);
|
||||
|
||||
return this._createEntries(element, entries);
|
||||
}
|
||||
|
||||
// expanded sub processes
|
||||
if (is(businessObject, 'bpmn:SubProcess') && isExpanded(businessObject)) {
|
||||
|
||||
entries = filter(replaceOptions.SUBPROCESS_EXPANDED, differentType);
|
||||
|
||||
return this._createEntries(element, entries);
|
||||
}
|
||||
|
||||
// collapsed ad hoc sub processes
|
||||
if (is(businessObject, 'bpmn:AdHocSubProcess') && !isExpanded(businessObject)) {
|
||||
|
||||
entries = filter(replaceOptions.TASK, function(entry) {
|
||||
|
||||
var target = entry.target;
|
||||
|
||||
var isTargetSubProcess = target.type === 'bpmn:SubProcess';
|
||||
|
||||
var isTargetExpanded = target.isExpanded === true;
|
||||
|
||||
return isDifferentType(element, target) && (!isTargetSubProcess || isTargetExpanded);
|
||||
});
|
||||
|
||||
return this._createEntries(element, entries);
|
||||
}
|
||||
|
||||
// sequence flows
|
||||
if (is(businessObject, 'bpmn:SequenceFlow')) {
|
||||
return this._createSequenceFlowEntries(element, replaceOptions.SEQUENCE_FLOW);
|
||||
}
|
||||
|
||||
// flow nodes
|
||||
if (is(businessObject, 'bpmn:FlowNode')) {
|
||||
entries = filter(replaceOptions.TASK, differentType);
|
||||
|
||||
// collapsed SubProcess can not be replaced with itself
|
||||
if (is(businessObject, 'bpmn:SubProcess') && !isExpanded(businessObject)) {
|
||||
entries = filter(entries, function(entry) {
|
||||
return entry.label !== 'Sub Process (collapsed)';
|
||||
});
|
||||
}
|
||||
|
||||
return this._createEntries(element, entries);
|
||||
}
|
||||
|
||||
return [];
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get a list of header items for the given element. This includes buttons
|
||||
* for multi instance markers and for the ad hoc marker.
|
||||
*
|
||||
* @param {djs.model.Base} element
|
||||
*
|
||||
* @return {Array<Object>} a list of menu entry items
|
||||
*/
|
||||
ReplaceMenuProvider.prototype.getHeaderEntries = function(element) {
|
||||
|
||||
var headerEntries = [];
|
||||
|
||||
if (is(element, 'bpmn:Activity') && !isEventSubProcess(element)) {
|
||||
headerEntries = headerEntries.concat(this._getLoopEntries(element));
|
||||
}
|
||||
|
||||
if (is(element, 'bpmn:SubProcess') &&
|
||||
!is(element, 'bpmn:Transaction') &&
|
||||
!isEventSubProcess(element)) {
|
||||
headerEntries.push(this._getAdHocEntry(element));
|
||||
}
|
||||
|
||||
return headerEntries;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Creates an array of menu entry objects for a given element and filters the replaceOptions
|
||||
* according to a filter function.
|
||||
*
|
||||
* @param {djs.model.Base} element
|
||||
* @param {Object} replaceOptions
|
||||
*
|
||||
* @return {Array<Object>} a list of menu items
|
||||
*/
|
||||
ReplaceMenuProvider.prototype._createEntries = function(element, replaceOptions) {
|
||||
var menuEntries = [];
|
||||
|
||||
var self = this;
|
||||
|
||||
forEach(replaceOptions, function(definition) {
|
||||
var entry = self._createMenuEntry(definition, element);
|
||||
|
||||
menuEntries.push(entry);
|
||||
});
|
||||
|
||||
return menuEntries;
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates an array of menu entry objects for a given sequence flow.
|
||||
*
|
||||
* @param {djs.model.Base} element
|
||||
* @param {Object} replaceOptions
|
||||
|
||||
* @return {Array<Object>} a list of menu items
|
||||
*/
|
||||
ReplaceMenuProvider.prototype._createSequenceFlowEntries = function(element, replaceOptions) {
|
||||
|
||||
var businessObject = getBusinessObject(element);
|
||||
|
||||
var menuEntries = [];
|
||||
|
||||
var modeling = this._modeling,
|
||||
moddle = this._moddle;
|
||||
|
||||
var self = this;
|
||||
|
||||
forEach(replaceOptions, function(entry) {
|
||||
|
||||
switch (entry.actionName) {
|
||||
case 'replace-with-default-flow':
|
||||
if (businessObject.sourceRef.default !== businessObject &&
|
||||
(is(businessObject.sourceRef, 'bpmn:ExclusiveGateway') ||
|
||||
is(businessObject.sourceRef, 'bpmn:InclusiveGateway') ||
|
||||
is(businessObject.sourceRef, 'bpmn:ComplexGateway') ||
|
||||
is(businessObject.sourceRef, 'bpmn:Activity'))) {
|
||||
|
||||
menuEntries.push(self._createMenuEntry(entry, element, function() {
|
||||
modeling.updateProperties(element.source, { default: businessObject });
|
||||
}));
|
||||
}
|
||||
break;
|
||||
case 'replace-with-conditional-flow':
|
||||
if (!businessObject.conditionExpression && is(businessObject.sourceRef, 'bpmn:Activity')) {
|
||||
|
||||
menuEntries.push(self._createMenuEntry(entry, element, function() {
|
||||
var conditionExpression = moddle.create('bpmn:FormalExpression', { body: '' });
|
||||
|
||||
modeling.updateProperties(element, { conditionExpression: conditionExpression });
|
||||
}));
|
||||
}
|
||||
break;
|
||||
default:
|
||||
// default flows
|
||||
if (is(businessObject.sourceRef, 'bpmn:Activity') && businessObject.conditionExpression) {
|
||||
return menuEntries.push(self._createMenuEntry(entry, element, function() {
|
||||
modeling.updateProperties(element, { conditionExpression: undefined });
|
||||
}));
|
||||
}
|
||||
// conditional flows
|
||||
if ((is(businessObject.sourceRef, 'bpmn:ExclusiveGateway') ||
|
||||
is(businessObject.sourceRef, 'bpmn:InclusiveGateway') ||
|
||||
is(businessObject.sourceRef, 'bpmn:ComplexGateway') ||
|
||||
is(businessObject.sourceRef, 'bpmn:Activity')) &&
|
||||
businessObject.sourceRef.default === businessObject) {
|
||||
|
||||
return menuEntries.push(self._createMenuEntry(entry, element, function() {
|
||||
modeling.updateProperties(element.source, { default: undefined });
|
||||
}));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return menuEntries;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Creates and returns a single menu entry item.
|
||||
*
|
||||
* @param {Object} definition a single replace options definition object
|
||||
* @param {djs.model.Base} element
|
||||
* @param {Function} [action] an action callback function which gets called when
|
||||
* the menu entry is being triggered.
|
||||
*
|
||||
* @return {Object} menu entry item
|
||||
*/
|
||||
ReplaceMenuProvider.prototype._createMenuEntry = function(definition, element, action) {
|
||||
var translate = this._translate;
|
||||
var replaceElement = this._bpmnReplace.replaceElement;
|
||||
|
||||
var replaceAction = function() {
|
||||
return replaceElement(element, definition.target);
|
||||
};
|
||||
|
||||
action = action || replaceAction;
|
||||
|
||||
var menuEntry = {
|
||||
label: translate(definition.label),
|
||||
className: definition.className,
|
||||
id: definition.actionName,
|
||||
action: action
|
||||
};
|
||||
|
||||
return menuEntry;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get a list of menu items containing buttons for multi instance markers
|
||||
*
|
||||
* @param {djs.model.Base} element
|
||||
*
|
||||
* @return {Array<Object>} a list of menu items
|
||||
*/
|
||||
ReplaceMenuProvider.prototype._getLoopEntries = function(element) {
|
||||
|
||||
var self = this;
|
||||
var translate = this._translate;
|
||||
|
||||
function toggleLoopEntry(event, entry) {
|
||||
var loopCharacteristics;
|
||||
|
||||
if (entry.active) {
|
||||
loopCharacteristics = undefined;
|
||||
} else {
|
||||
loopCharacteristics = self._moddle.create(entry.options.loopCharacteristics);
|
||||
|
||||
if (entry.options.isSequential) {
|
||||
loopCharacteristics.isSequential = entry.options.isSequential;
|
||||
}
|
||||
}
|
||||
self._modeling.updateProperties(element, { loopCharacteristics: loopCharacteristics });
|
||||
}
|
||||
|
||||
var businessObject = getBusinessObject(element),
|
||||
loopCharacteristics = businessObject.loopCharacteristics;
|
||||
|
||||
var isSequential,
|
||||
isLoop,
|
||||
isParallel;
|
||||
|
||||
if (loopCharacteristics) {
|
||||
isSequential = loopCharacteristics.isSequential;
|
||||
isLoop = loopCharacteristics.isSequential === undefined;
|
||||
isParallel = loopCharacteristics.isSequential !== undefined && !loopCharacteristics.isSequential;
|
||||
}
|
||||
|
||||
|
||||
var loopEntries = [
|
||||
{
|
||||
id: 'toggle-parallel-mi',
|
||||
className: 'bpmn-icon-parallel-mi-marker',
|
||||
title: translate('Parallel Multi Instance'),
|
||||
active: isParallel,
|
||||
action: toggleLoopEntry,
|
||||
options: {
|
||||
loopCharacteristics: 'bpmn:MultiInstanceLoopCharacteristics',
|
||||
isSequential: false
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'toggle-sequential-mi',
|
||||
className: 'bpmn-icon-sequential-mi-marker',
|
||||
title: translate('Sequential Multi Instance'),
|
||||
active: isSequential,
|
||||
action: toggleLoopEntry,
|
||||
options: {
|
||||
loopCharacteristics: 'bpmn:MultiInstanceLoopCharacteristics',
|
||||
isSequential: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'toggle-loop',
|
||||
className: 'bpmn-icon-loop-marker',
|
||||
title: translate('Loop'),
|
||||
active: isLoop,
|
||||
action: toggleLoopEntry,
|
||||
options: {
|
||||
loopCharacteristics: 'bpmn:StandardLoopCharacteristics'
|
||||
}
|
||||
}
|
||||
];
|
||||
return loopEntries;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the menu items containing a button for the ad hoc marker
|
||||
*
|
||||
* @param {djs.model.Base} element
|
||||
*
|
||||
* @return {Object} a menu item
|
||||
*/
|
||||
ReplaceMenuProvider.prototype._getAdHocEntry = function(element) {
|
||||
var translate = this._translate;
|
||||
var businessObject = getBusinessObject(element);
|
||||
|
||||
var isAdHoc = is(businessObject, 'bpmn:AdHocSubProcess');
|
||||
|
||||
var replaceElement = this._bpmnReplace.replaceElement;
|
||||
|
||||
var adHocEntry = {
|
||||
id: 'toggle-adhoc',
|
||||
className: 'bpmn-icon-ad-hoc-marker',
|
||||
title: translate('Ad-hoc'),
|
||||
active: isAdHoc,
|
||||
action: function(event, entry) {
|
||||
if (isAdHoc) {
|
||||
return replaceElement(element, { type: 'bpmn:SubProcess' });
|
||||
} else {
|
||||
return replaceElement(element, { type: 'bpmn:AdHocSubProcess' });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return adHocEntry;
|
||||
};
|
||||
@@ -0,0 +1,14 @@
|
||||
import PopupMenuModule from 'diagram-js/lib/features/popup-menu';
|
||||
import ReplaceModule from '../replace';
|
||||
|
||||
import ReplaceMenuProvider from './ReplaceMenuProvider';
|
||||
|
||||
|
||||
export default {
|
||||
__depends__: [
|
||||
PopupMenuModule,
|
||||
ReplaceModule
|
||||
],
|
||||
__init__: [ 'replaceMenuProvider' ],
|
||||
replaceMenuProvider: [ 'type', ReplaceMenuProvider ]
|
||||
};
|
||||
@@ -0,0 +1,44 @@
|
||||
import {
|
||||
getBusinessObject
|
||||
} from '../../../util/ModelUtil';
|
||||
|
||||
import {
|
||||
isExpanded
|
||||
} from '../../../util/DiUtil';
|
||||
|
||||
|
||||
/**
|
||||
* Returns true, if an element is from a different type
|
||||
* than a target definition. Takes into account the type,
|
||||
* event definition type and triggeredByEvent property.
|
||||
*
|
||||
* @param {djs.model.Base} element
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
export function isDifferentType(element) {
|
||||
|
||||
return function(entry) {
|
||||
var target = entry.target;
|
||||
|
||||
var businessObject = getBusinessObject(element),
|
||||
eventDefinition = businessObject.eventDefinitions && businessObject.eventDefinitions[0];
|
||||
|
||||
var isTypeEqual = businessObject.$type === target.type;
|
||||
|
||||
var isEventDefinitionEqual = (
|
||||
(eventDefinition && eventDefinition.$type) === target.eventDefinitionType
|
||||
);
|
||||
|
||||
var isTriggeredByEventEqual = (
|
||||
businessObject.triggeredByEvent === target.triggeredByEvent
|
||||
);
|
||||
|
||||
var isExpandedEqual = (
|
||||
target.isExpanded === undefined ||
|
||||
target.isExpanded === isExpanded(businessObject)
|
||||
);
|
||||
|
||||
return !isTypeEqual || !isEventDefinitionEqual || !isTriggeredByEventEqual || !isExpandedEqual;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
|
||||
|
||||
import inherits from 'inherits';
|
||||
|
||||
import cssEscape from 'css.escape';
|
||||
|
||||
import {
|
||||
assign,
|
||||
forEach
|
||||
} from 'min-dash';
|
||||
|
||||
import {
|
||||
query as domQuery
|
||||
} from 'min-dom';
|
||||
|
||||
import {
|
||||
attr as svgAttr
|
||||
} from 'tiny-svg';
|
||||
|
||||
var LOW_PRIORITY = 250;
|
||||
|
||||
|
||||
export default function BpmnReplacePreview(
|
||||
eventBus, elementRegistry, elementFactory,
|
||||
canvas, previewSupport) {
|
||||
|
||||
CommandInterceptor.call(this, eventBus);
|
||||
|
||||
/**
|
||||
* Replace the visuals of all elements in the context which can be replaced
|
||||
*
|
||||
* @param {Object} context
|
||||
*/
|
||||
function replaceVisual(context) {
|
||||
|
||||
var replacements = context.canExecute.replacements;
|
||||
|
||||
forEach(replacements, function(replacement) {
|
||||
|
||||
var id = replacement.oldElementId;
|
||||
|
||||
var newElement = {
|
||||
type: replacement.newElementType
|
||||
};
|
||||
|
||||
// if the visual of the element is already replaced
|
||||
if (context.visualReplacements[id]) {
|
||||
return;
|
||||
}
|
||||
|
||||
var element = elementRegistry.get(id);
|
||||
|
||||
assign(newElement, { x: element.x, y: element.y });
|
||||
|
||||
// create a temporary shape
|
||||
var tempShape = elementFactory.createShape(newElement);
|
||||
|
||||
canvas.addShape(tempShape, element.parent);
|
||||
|
||||
// select the original SVG element related to the element and hide it
|
||||
var gfx = domQuery('[data-element-id="' + cssEscape(element.id) + '"]', context.dragGroup);
|
||||
|
||||
if (gfx) {
|
||||
svgAttr(gfx, { display: 'none' });
|
||||
}
|
||||
|
||||
// clone the gfx of the temporary shape and add it to the drag group
|
||||
var dragger = previewSupport.addDragger(tempShape, context.dragGroup);
|
||||
|
||||
context.visualReplacements[id] = dragger;
|
||||
|
||||
canvas.removeShape(tempShape);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the original visuals of the previously replaced elements
|
||||
*
|
||||
* @param {Object} context
|
||||
*/
|
||||
function restoreVisual(context) {
|
||||
|
||||
var visualReplacements = context.visualReplacements;
|
||||
|
||||
forEach(visualReplacements, function(dragger, id) {
|
||||
|
||||
var originalGfx = domQuery('[data-element-id="' + cssEscape(id) + '"]', context.dragGroup);
|
||||
|
||||
if (originalGfx) {
|
||||
svgAttr(originalGfx, { display: 'inline' });
|
||||
}
|
||||
|
||||
dragger.remove();
|
||||
|
||||
if (visualReplacements[id]) {
|
||||
delete visualReplacements[id];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
eventBus.on('shape.move.move', LOW_PRIORITY, function(event) {
|
||||
|
||||
var context = event.context,
|
||||
canExecute = context.canExecute;
|
||||
|
||||
if (!context.visualReplacements) {
|
||||
context.visualReplacements = {};
|
||||
}
|
||||
|
||||
if (canExecute && canExecute.replacements) {
|
||||
replaceVisual(context);
|
||||
} else {
|
||||
restoreVisual(context);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
BpmnReplacePreview.$inject = [
|
||||
'eventBus',
|
||||
'elementRegistry',
|
||||
'elementFactory',
|
||||
'canvas',
|
||||
'previewSupport'
|
||||
];
|
||||
|
||||
inherits(BpmnReplacePreview, CommandInterceptor);
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user