feat(append): allow connecting from new shape to source

lib/features/create/Create.js

@@ -49,7 +49,7 @@ export default function Create(
    *
    * @returns {boolean|null|Object}
    */
-  function canCreate(elements, target, position, source) {
+  function canCreate(elements, target, position, source, hints) {
     if (!target) {
       return false;
     }
@@ -98,13 +98,14 @@ export default function Create(
 
     }
 
+    var connectionTarget = hints.connectionTarget;
+
     // (3) appending single shapes
     if (create || attach) {
-
       if (shape && source) {
         connect = rules.allowed('connection.create', {
-          source: source,
-          target: shape,
+          source: connectionTarget === source ? shape : source,
+          target: connectionTarget === source ? source : shape,
           hints: {
             targetParent: target,
             targetAttach: attach
@@ -143,7 +144,8 @@ export default function Create(
     var context = event.context,
         elements = context.elements,
         hover = event.hover,
-        source = context.source;
+        source = context.source,
+        hints = context.hints || {};
 
     if (!hover) {
       context.canExecute = false;
@@ -159,7 +161,7 @@ export default function Create(
       y: event.y
     };
 
-    var canExecute = context.canExecute = hover && canCreate(elements, hover, position, source);
+    var canExecute = context.canExecute = hover && canCreate(elements, hover, position, source, hints);
 
     if (hover && canExecute !== null) {
       context.target = hover;
@@ -186,10 +188,10 @@ export default function Create(
         shape = context.shape,
         elements = context.elements,
         target = context.target,
-        hints = context.hints,
         canExecute = context.canExecute,
         attach = canExecute && canExecute.attach,
-        connect = canExecute && canExecute.connect;
+        connect = canExecute && canExecute.connect,
+        hints = context.hints || {};
 
     if (canExecute === false || !target) {
       return false;
@@ -205,7 +207,8 @@ export default function Create(
     if (connect) {
       shape = modeling.appendShape(source, shape, position, target, {
         attach: attach,
-        connection: connect === true ? {} : connect
+        connection: connect === true ? {} : connect,
+        connectionTarget: hints.connectionTarget
       });
     } else {
       elements = modeling.createElements(elements, position, target, assign({}, hints, {

lib/features/modeling/Modeling.js

@@ -365,7 +365,7 @@ Modeling.prototype.appendShape = function(source, shape, position, target, hints
     shape: shape,
     connection: hints.connection,
     connectionParent: hints.connectionParent,
-    attach: hints.attach
+    hints: hints
   };
 
   this._commandStack.execute('shape.append', context);

lib/features/modeling/cmd/AppendShapeHandler.js

@@ -37,24 +37,30 @@ AppendShapeHandler.prototype.preExecute = function(context) {
   }
 
   var target = context.target || source.parent,
-      shape = context.shape;
+      shape = context.shape,
+      hints = context.hints || {};
 
   shape = context.shape =
     this._modeling.createShape(
       shape,
       context.position,
-      target, { attach: context.attach });
+      target, { attach: hints.attach });
 
   context.shape = shape;
 };
 
 AppendShapeHandler.prototype.postExecute = function(context) {
-  var parent = context.connectionParent || context.shape.parent;
+  var parent = context.connectionParent || context.shape.parent,
+      hints = context.hints || {};
 
   if (!existsConnection(context.source, context.shape)) {
 
     // create connection
-    this._modeling.connect(context.source, context.shape, context.connection, parent);
+    if (hints.connectionTarget === context.source) {
+      this._modeling.connect(context.shape, context.source, context.connection, parent);
+    } else {
+      this._modeling.connect(context.source, context.shape, context.connection, parent);
+    }
   }
 };
 

test/spec/features/create/CreateSpec.js

@@ -216,7 +216,7 @@ describe('features/create - Create', function() {
     ));
 
 
-    it('should append', inject(function(create, dragging, elementRegistry) {
+    it('should append and connect from source to new shape', inject(function(create, dragging, elementRegistry) {
 
       // given
       var rootGfx = elementRegistry.getGraphics('rootShape');
@@ -247,6 +247,40 @@ describe('features/create - Create', function() {
     }));
 
 
+    it('should append and connect from new shape to source', inject(function(create, dragging, elementRegistry) {
+
+      // given
+      var rootGfx = elementRegistry.getGraphics('rootShape');
+
+      // when
+      create.start(canvasEvent({ x: 0, y: 0 }), newShape, {
+        source: childShape,
+        hints: {
+          connectionTarget: childShape
+        }
+      });
+
+      dragging.hover({ element: rootShape, gfx: rootGfx });
+
+      dragging.move(canvasEvent({ x: 500, y: 500 }));
+
+      dragging.end();
+
+      // then
+      var createdShape = elementRegistry.get('newShape');
+
+      expect(createdShape).to.exist;
+      expect(createdShape).to.equal(newShape);
+
+      expect(createdShape.parent).to.equal(rootShape);
+      expect(createdShape.outgoing).to.have.length(1);
+      expect(createdShape.outgoing[0].target).to.equal(childShape);
+
+      expect(childShape.incoming).to.have.length(1);
+      expect(childShape.incoming[0].source).to.equal(createdShape);
+    }));
+
+
     it('should attach', inject(function(create, dragging, elementRegistry) {
 
       // given

test/spec/features/create/rules/CreateRules.js

@@ -30,18 +30,14 @@ CreateRules.prototype.init = function() {
 
   this.addRule('connection.create', function(context) {
     var source = context.source,
-        target = context.target,
         hints = context.hints;
 
-    expect(source.parent).to.exist;
-    expect(target.parent).not.to.exist;
-
     expect(hints).to.have.keys([
       'targetParent',
       'targetAttach'
     ]);
 
-    return /parent|child/.test(source.id);
+    return /parent|child|newShape/.test(source.id);
   });
 
 

test/spec/features/modeling/AppendShapeSpec.js

@@ -143,6 +143,35 @@ describe('features/modeling - append shape', function() {
       expect(newConnection.custom).to.be.true;
     }));
 
+
+    it('should connect from new shape to source', inject(function(elementRegistry, modeling) {
+
+      // when
+      var newShape = modeling.appendShape(
+        childShape,
+        { id: 'appended', width: 50, height: 50 },
+        { x: 200, y: 200 },
+        diagramRoot,
+        {
+          connectionTarget: childShape
+        }
+      );
+
+      // then
+      var connection = find(newShape.outgoing, function(c) {
+        return c.target === childShape;
+      });
+
+      // then
+      expect(connection).to.exist;
+      expect(connection.parent).to.equal(newShape.parent);
+
+      expect(elementRegistry.getGraphics(connection)).to.exist;
+
+      expect(connection.source).to.equal(newShape);
+      expect(connection.target).to.equal(childShape);
+    }));
+
   });