JointJS 2.2.1

package.json

@@ -44,8 +44,8 @@
     "postinstall": "postinstall-build --only-as-dependency dist \"npm run build && node postinstall.js\""
   },
   "dependencies": {
-    "codemirror-minified": "5.37.0",
-    "jointjs": "2.1.4",
+    "codemirror-minified": "5.44.0",
+    "jointjs": "2.2.1",
     "postinstall-build": "5.0.3",
     "ts-disposables": "2.2.3"
   },
@@ -69,18 +69,18 @@
     "@types/codemirror": "0.0.64",
     "@types/jasmine": "2.5.36",
     "@types/jquery": "3.3.4",
-    "@types/lodash": "3.10.2",
+    "@types/lodash": "4.14.123",
     "@types/node": "6.0.46",
     "camelcase": "4.0.0",
     "chalk": "2.4.1",
-    "codemirror-minified": "5.37.0",
+    "codemirror-minified": "5.44.0",
     "concurrently": "4.0.1",
     "core-js": "2.6.5",
     "glob": "7.1.1",
     "gulp": "3.9.1",
     "gulp-inline-ng2-template": "5.0.1",
     "jasmine-core": "2.5.2",
-    "jointjs": "2.1.4",
+    "jointjs": "2.2.1",
     "jquery": "3.1.1",
     "jshint": "2.6.3",
     "karma": "1.5.0",

src/lib/shared/shapes.ts

@@ -32,7 +32,7 @@ DECORATION_ICON_MAP.set(ERROR, 'icons/error.svg');
 
 
 joint.util.cloneDeep = (obj: any) => {
-  return _.cloneDeep(obj, (o) => {
+  return _.cloneDeepWith(obj, (o) => {
     if (_.isObject(o) && !_.isPlainObject(o)) {
       return o;
     }
@@ -239,52 +239,52 @@ joint.shapes.flo.ElementView = joint.dia.ElementView.extend({
   _tempOpacity: 1.0,
   _hovering: false,
 
-  dragMagnetStart: function(evt: any, x: number, y: number) {
-
-    if (!this.can('addLinkFromMagnet')) {
-      return;
-    }
+  dragLinkStart: function(evt, magnet, x, y) {
 
     this.model.startBatch('add-link');
 
+    const linkView = this.addLinkFromMagnet(magnet, x, y);
+
+    // backwards compatiblity events
+    joint.dia.CellView.prototype.pointerdown.apply(linkView, [evt, x, y]);
+    linkView.notify('link:pointerdown', evt, x, y);
+
+    /*** START MAIN DIFF ***/
+    const sourceOrTarget = $(magnet).attr('port') === 'input' ? 'source' : 'target';
+    linkView.eventData(evt, linkView.startArrowheadMove(sourceOrTarget, { whenNotAllowed: 'remove' }));
+    /*** END MAIN DIFF ***/
+
+    this.eventData(evt, { linkView: linkView });
+  },
+
+  addLinkFromMagnet: function(magnet, x, y) {
+
     const paper = this.paper;
     const graph = paper.model;
-    const magnet = evt.target;
+
     const link = paper.getDefaultLink(this, magnet);
 
-    let sourceEnd, targetEnd;
+    let sourceEnd, targetEnd: any;
 
-    if ($(evt.target).attr('port') === 'input') {
+    /*** START MAIN DIFF ***/
+    if ($(magnet).attr('port') === 'input') {
       sourceEnd = { x: x, y: y };
       targetEnd = this.getLinkEnd(magnet, x, y, link, 'target');
     } else {
       sourceEnd = this.getLinkEnd(magnet, x, y, link, 'source');
       targetEnd = { x: x, y: y };
     }
+    /*** END MAIN DIFF ***/
 
-    link.set({ source: sourceEnd, target: targetEnd });
-    link.addTo(graph, { async: false, ui: true });
-
-    const linkView = link.findView(paper);
-    joint.dia.CellView.prototype.pointerdown.apply(linkView, arguments);
-    linkView.notify('link:pointerdown', evt, x, y);
-    // const data = linkView.startArrowheadMove('target', { whenNotAllowed: 'remove' });
-    let data;
-    if ($(evt.target).attr('port') === 'input') {
-      data = linkView.startArrowheadMove('source', { whenNotAllowed: 'remove' });
-    } else {
-      data = linkView.startArrowheadMove('target', { whenNotAllowed: 'remove' });
-    }
-
-    linkView.eventData(evt, data);
-
-    this.eventData(evt, {
-      action: 'magnet',
-      linkView: linkView,
-      stopPropagation: true
+    link.set({
+      source: sourceEnd,
+      target: targetEnd
+    }).addTo(graph, {
+      async: false,
+      ui: true
     });
 
-    this.paper.delegateDragEvents(this, evt.data);
+    return link.findView(paper);
   },
 
   // pointerdown: function(evt: any, x: number, y: number) {