fix(modeling): create di before rendering

lib/features/modeling/BpmnUpdater.js

@@ -42,15 +42,6 @@ function BpmnUpdater(eventBus, bpmnFactory, connectionDocking) {
 
   ////// BPMN + DI update /////////////////////////
 
-  // create DI
-  this.executed('shape.create', function(e) {
-    self.createShapeDi(e.context.shape);
-  });
-
-  this.executed('connection.create', function(e) {
-    self.createConnectionDi(e.context.connection);
-  });
-
 
   // update parent
   function updateShapeParent(e) {
@@ -95,26 +86,6 @@ BpmnUpdater.$inject = [ 'eventBus', 'bpmnFactory', 'connectionDocking'];
 
 /////// implementation //////////////////////////////////
 
-BpmnUpdater.prototype.createShapeDi = function(shape) {
-
-  var businessObject = shape.businessObject;
-  if (!businessObject.di) {
-    businessObject.di = this._bpmnFactory.createDiShape(businessObject, shape, {
-      id: businessObject.id + '_di'
-    });
-  }
-};
-
-
-BpmnUpdater.prototype.createConnectionDi = function(connection) {
-  var businessObject = connection.businessObject;
-  if (!businessObject.di) {
-    businessObject.di = this._bpmnFactory.createDiEdge(businessObject, connection.waypoints, {
-      id: businessObject.id + '_di'
-    });
-  }
-};
-
 
 BpmnUpdater.prototype.updateShapeParent = function(shape) {
   var parentShape = shape.parent;

lib/features/modeling/ElementFactory.js

@@ -36,6 +36,18 @@ ElementFactory.prototype.createWithBpmn = function(elementType, attrs) {
 
   size = this._getDefaultSize(businessObject);
 
+  if (!businessObject.di) {
+    if (elementType === 'connection') {
+      businessObject.di = this._bpmnFactory.createDiEdge(businessObject, [], {
+        id: businessObject.id + '_di'
+      });
+    } else {
+      businessObject.di = this._bpmnFactory.createDiShape(businessObject, {}, {
+        id: businessObject.id + '_di'
+      });
+    }
+  }
+
   attrs = _.extend({
     businessObject: businessObject,
     id: businessObject.id