upgrade to JointJS v0.9.3

Author: kumilingus

Gruntfile.js

@@ -31,6 +31,7 @@ module.exports = function(grunt) {
             'shapes.pn': ['plugins/joint.shapes.pn.js'],
             'shapes.devs': ['plugins/joint.shapes.devs.js'],
             'shapes.uml': ['plugins/joint.shapes.uml.js'],
+            'shapes.logic': ['plugins/joint.shapes.logic.js'],
 
             'layout.DirectedGraph': ['plugins/layout/DirectedGraph/lib/dagre.js', 'plugins/layout/DirectedGraph/joint.layout.DirectedGraph.js']
         }

demo/basic.js

@@ -1,12 +1,12 @@
 var graph = new joint.dia.Graph;
 
 var paper = new joint.dia.Paper({
-
     el: $('#paper'),
     width: 650,
     height: 400,
     gridSize: 20,
-    model: graph
+    model: graph,
+    linkConnectionPoint: joint.util.shapePerimeterConnectionPoint
 });
 
 var rb = new joint.shapes.basic.Rect({
@@ -35,7 +35,7 @@ var ib = new joint.shapes.basic.Image({
     size: { width: 40, height: 40 },
     attrs: {
         text: { text: 'basic.Image' },
-        image: { 'xlink:href': 'https://cdn3.iconfinder.com/data/icons/betelgeuse/96/224386-folder-image-48.png', width: 48, height: 48 }
+        image: { 'xlink:href': 'http://placehold.it/48x48', width: 48, height: 48 }
     }
 });
 graph.addCell(ib);
@@ -166,3 +166,67 @@ rb.on('change:attrs', function(element) {
     element.resize(width + 10, height);
 });
 
+// Image decorated rectangle shape example.
+
+joint.shapes.basic.DecoratedRect = joint.shapes.basic.Generic.extend({
+
+    markup: '<g class="rotatable"><g class="scalable"><rect/></g><image/><text/></g>',
+    
+    defaults: joint.util.deepSupplement({
+    
+        type: 'basic.DecoratedRect',
+        size: { width: 100, height: 60 },
+        attrs: {
+            'rect': { fill: '#FFFFFF', stroke: 'black', width: 100, height: 60 },
+            'text': { 'font-size': 14, text: '', 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle', fill: 'black' },
+            'image': { 'ref-x': 2, 'ref-y': 2, ref: 'rect', width: 16, height: 16 }
+        }
+        
+    }, joint.shapes.basic.Generic.prototype.defaults)
+});
+
+var decoratedRect = new joint.shapes.basic.DecoratedRect({
+    position: { x: 150, y: 80 },
+    size: { width: 100, height: 60 },
+    attrs: { 
+        text: { text: 'My Element' },
+        image: { 'xlink:href': 'http://placehold.it/16x16' }
+    }
+});
+graph.addCell(decoratedRect);
+
+
+joint.shapes.basic.Cylinder = joint.shapes.basic.Generic.extend({
+
+    markup: '<g class="rotatable"><g class="scalable"><path/></g><text/></g>',
+
+    defaults: joint.util.deepSupplement({
+    
+        type: 'basic.Cylinder',
+        size: { width: 40, height: 40 },
+        attrs: {
+            'path': { 
+                fill: '#FFFFFF', stroke: '#cbd2d7', 'stroke-width': 3,
+                d: [
+                    'M 0 10 C 10 5, 30 5, 40 10 C 30 15, 10 15, 0 10',
+                    'L 0 20',
+                    'C 10 25, 30 25, 40 20',
+                    'L 40 10'
+                ].join(' ')
+            },
+            'text': { fill: '#435460', 'font-size': 14, text: '', 'ref-x': .5, 'ref-y': .7, ref: 'path', 'y-alignment': 'middle', 'text-anchor': 'middle', fill: 'black', 'font-family': 'Arial, helvetica, sans-serif' }
+        }
+        
+    }, joint.shapes.basic.Generic.prototype.defaults)
+});
+
+
+var cylinder = new joint.shapes.basic.Cylinder({
+    position: { x: 200, y: 200 },
+    size: { width: 180, height: 150 },
+    attrs: {
+        text: { text: 'SEQUENCE\nLIBRARY' }
+    }
+});
+
+graph.addCell(cylinder);

demo/links-sticky-points.js

@@ -6,21 +6,7 @@ var paper = new joint.dia.Paper({
     gridSize: 10,
     perpendicularLinks: false,
     model: graph,
-    linkConnectionPoint: function(linkView, view, magnet, reference) {
-
-	var bbox = view.getStrokeBBox(magnet);
-
-	if (magnet && magnet.isPointInStroke && _.contains(['path', 'circle', 'rect'], magnet.localName)) {
-
-	    spot = intersection(magnet, reference);
-
-	} else {
-
-	    spot = g.rect(bbox).intersectionWithLineFromCenterToPoint(reference);
-	}
-
-	return spot || g.rect(bbox).center();
-    }
+    linkConnectionPoint: joint.util.shapePerimeterConnectionPoint
 });
 
 // Shortcuts.
@@ -67,7 +53,7 @@ var palm = 'M14.296,27.885v-2.013c0,0-0.402-1.408-1.073-2.013c-0.671-0.604-1.274
 var icons = [cross, star, umbrella, music, thunder, palm];
 
 var d = star;
-var o7 = (new path({ position: { x: 150, y: 370 }, attrs: { text: { text: 'path' }, path: { magnet: true, d: d }}})).addTo(graph);
+var o7 = (new path({ position: { x: 150, y: 370 }, attrs: { text: { text: 'path' }, path: { d: d }}})).addTo(graph);
 var o8 = (new rect({ position: { x: 300, y: 380 }, size: { width: 60, height: 30 } })).addTo(graph);
 var linko7o8 = (new link({ source: { id: o7.id, selector: 'path' }, target: { id: o8.id } })).addTo(graph);
 
@@ -77,6 +63,10 @@ paper.on('cell:pointerdown', function(cellView, evt, x, y) {
     }
 });
 
+var o9 = (new text({ position: { x: 400, y: 50 }, size: { width: 60, height: 30 }, attrs: { text: { text: 'my text' } } })).addTo(graph);
+var o10 = o1.clone().position(500, 50).addTo(graph);
+var linko9o10 = (new link({ source: { id: o9.id, selector: 'text' }, target: { id: o10.id } })).addTo(graph);
+
 function intersection(node, ref) {
 
     var bbox = g.rect(V(node).bbox()).moveAndExpand(g.rect(-5, -5, 10, 10));

demo/links.js

@@ -13,7 +13,12 @@ var paper = new joint.dia.Paper({
 	    if (V(evt.target).hasClass('connection') || V(evt.target).hasClass('connection-wrap')) {
 		this.addVertex({ x: x, y: y });
 	    }
-	}
+	},
+        options: _.extend({}, joint.dia.LinkView.prototype.options, {
+            doubleLinkTools: true,
+            linkToolsOffset: 40,
+            doubleLinkToolsOffset: 60
+        })
     }),
     interactive: function(cellView) {
 	if (cellView.model.get('vertexOnDblClick')) {