feat(connection-preview): support general connection preview

Closes #744

lib/Modeler.js

@@ -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,

lib/features/connect/BpmnConnectPreview.js

@@ -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);
-};

lib/features/connect/index.js

@@ -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 ]
-};

lib/features/connection-preview/BpmnConnectionPreview.js

@@ -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);
+};

lib/features/connection-preview/index.js

@@ -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 ]
+};

lib/features/create/BpmnCreateConnectPreview.js

@@ -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);
-};

lib/features/create/index.js

@@ -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 ]
-};

test/spec/features/modeling/layout/LayoutConnectionSpec.js

@@ -5,10 +5,11 @@ import {
 
 import modelingModule from 'lib/features/modeling';
 import coreModule from 'lib/core';
-import connectModule from 'lib/features/connect';
+import connectionPreviewModule from 'lib/features/connection-preview';
-import createModule from 'lib/features/create';
 
 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();