feat(connection-preview): support general connection preview

Closes #744
This commit is contained in:
Maciej Barelkowski 2019-05-13 16:09:14 +02:00 committed by Philipp Fromme
parent 654fa067d4
commit 87bfe23ff8
8 changed files with 77 additions and 157 deletions

View File

@ -16,10 +16,11 @@ 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 './features/connect';
import ConnectModule from 'diagram-js/lib/features/connect';
import ConnectionPreviewModule from './features/connection-preview';
import ContextPadModule from './features/context-pad';
import CopyPasteModule from './features/copy-paste';
import CreateModule from './features/create';
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';
@ -210,6 +211,7 @@ Modeler.prototype._modelingModules = [
AutoResizeModule,
BendpointsModule,
ConnectModule,
ConnectionPreviewModule,
ContextPadModule,
CopyPasteModule,
CreateModule,

View File

@ -1,67 +0,0 @@
import inherits from 'inherits';
import ConnectPreview from 'diagram-js/lib/features/connect/ConnectPreview';
/**
* Shows connection preview during connect.
*
* @param {Canvas} canvas
* @param {BpmnRules} bpmnRules
* @param {ElementFactory} elementFactory
* @param {EventBus} eventBus
* @param {GraphicsFactory} graphicsFactory
* @param {didi.Injector} injector
*/
export default function BpmnConnectPreview(
bpmnRules,
canvas,
elementFactory,
eventBus,
graphicsFactory,
injector
) {
ConnectPreview.call(
this,
canvas,
elementFactory,
eventBus,
graphicsFactory,
injector
);
this._bpmnRules = bpmnRules;
}
inherits(BpmnConnectPreview, ConnectPreview);
BpmnConnectPreview.$inject = [
'bpmnRules',
'canvas',
'elementFactory',
'eventBus',
'graphicsFactory',
'injector'
];
/**
* Get connection that connect source and target once connect is finished.
*
* @param {Object|boolean} canConnect
* @param {djs.model.shape} source
* @param {djs.model.shape} target
*
* @returns {djs.model.connection}
*/
BpmnConnectPreview.prototype.getConnection = function(canConnect, source, target) {
var attrs = canConnect;
if (!attrs || !attrs.type) {
attrs = this._bpmnRules.canConnect(source, target);
}
if (!attrs) {
return;
}
return this._elementFactory.createConnection(attrs);
};

View File

@ -1,8 +0,0 @@
import BpmnConnectPreview from './BpmnConnectPreview';
import ConnectModule from 'diagram-js/lib/features/connect';
export default {
__depends__: [ ConnectModule ],
__init__: [ 'connectPreview' ],
connectPreview: [ 'type', BpmnConnectPreview ]
};

View File

@ -0,0 +1,48 @@
import inherits from 'inherits';
import ConnectionPreview from 'diagram-js/lib/features/connection-preview/ConnectionPreview';
/**
* Shows connection preview.
*
* @param {didi.Injector} injector
* @param {ElementFactory} elementFactory
* @param {BpmnRules} bpmnRules
*/
export default function BpmnConnectionPreview(injector, elementFactory, bpmnRules) {
injector.invoke(ConnectionPreview, this);
this._elementFactory = elementFactory;
this._bpmnRules = bpmnRules;
}
inherits(BpmnConnectionPreview, ConnectionPreview);
BpmnConnectionPreview.$inject = [
'injector',
'elementFactory',
'bpmnRules'
];
/**
* Get connection that connect source and target once connect is finished.
*
* @param {Object|boolean} canConnect
* @param {djs.model.shape} source
* @param {djs.model.shape} target
*
* @returns {djs.model.connection}
*/
BpmnConnectionPreview.prototype.getConnection = function(canConnect, source, target) {
var attrs = canConnect;
if (!attrs || !attrs.type) {
attrs = this._bpmnRules.canConnect(source, target);
}
if (!attrs) {
return;
}
return this._elementFactory.createConnection(attrs);
};

View File

@ -0,0 +1,8 @@
import BpmnConnectionPreview from './BpmnConnectionPreview';
import ConnectionPreviewModule from 'diagram-js/lib/features/connection-preview';
export default {
__depends__: [ ConnectionPreviewModule ],
__init__: [ 'connectionPreview' ],
connectionPreview: [ 'type', BpmnConnectionPreview ]
};

View File

@ -1,67 +0,0 @@
import inherits from 'inherits';
import CreateConnectPreview from 'diagram-js/lib/features/create/CreateConnectPreview';
/**
* Shows connection preview during create.
*
* @param {Canvas} canvas
* @param {BpmnRules} bpmnRules
* @param {ElementFactory} elementFactory
* @param {EventBus} eventBus
* @param {GraphicsFactory} graphicsFactory
* @param {didi.Injector} injector
*/
export default function BpmnCreateConnectPreview(
bpmnRules,
canvas,
elementFactory,
eventBus,
graphicsFactory,
injector
) {
CreateConnectPreview.call(
this,
canvas,
elementFactory,
eventBus,
graphicsFactory,
injector
);
this._bpmnRules = bpmnRules;
}
inherits(BpmnCreateConnectPreview, CreateConnectPreview);
BpmnCreateConnectPreview.$inject = [
'bpmnRules',
'canvas',
'elementFactory',
'eventBus',
'graphicsFactory',
'injector'
];
/**
* Get connection that connect source and target once connect is finished.
*
* @param {Object|boolean} canConnect
* @param {djs.model.shape} source
* @param {djs.model.shape} target
*
* @returns {djs.model.connection}
*/
BpmnCreateConnectPreview.prototype.getConnection = function(canConnect, source, target) {
var attrs = canConnect;
if (!attrs || !attrs.type) {
attrs = this._bpmnRules.canConnect(source, target);
}
if (!attrs) {
return;
}
return this._elementFactory.createConnection(attrs);
};

View File

@ -1,8 +0,0 @@
import BpmnCreateConnectPreview from './BpmnCreateConnectPreview';
import CreateModule from 'diagram-js/lib/features/create';
export default {
__depends__: [ CreateModule ],
__init__: [ 'createConnectPreview' ],
createConnectPreview: [ 'type', BpmnCreateConnectPreview ]
};

View File

@ -5,10 +5,11 @@ import {
import modelingModule from 'lib/features/modeling';
import coreModule from 'lib/core';
import connectModule from 'lib/features/connect';
import createModule from 'lib/features/create';
import connectionPreviewModule from 'lib/features/connection-preview';
import bendpointsModule from 'diagram-js/lib/features/bendpoints';
import connectModule from 'diagram-js/lib/features/connect';
import createModule from 'diagram-js/lib/features/create';
import {
createCanvasEvent as canvasEvent
@ -25,7 +26,8 @@ describe('features/modeling - layout connection', function() {
modelingModule,
connectModule,
createModule,
bendpointsModule
bendpointsModule,
connectionPreviewModule
]
}));
@ -282,7 +284,12 @@ describe('features/modeling - layout connection', function() {
var ctx = dragging.context();
var context = ctx.data.context;
var connectionPreview = context.connection;
var connectionPreview = context.getConnection(
context.allowed,
context.source,
context.target
);
var waypointsPreview = connectionPreview.waypoints.slice();
dragging.end();
@ -312,7 +319,12 @@ describe('features/modeling - layout connection', function() {
var ctx = dragging.context();
var context = ctx.data.context;
var connectionPreview = context.connection;
var connectionPreview = context.getConnection(
context.allowed,
context.source,
context.target
);
var waypointsPreview = connectionPreview.waypoints.slice();
dragging.end();