Can I embed JointJS in an AngularJS module, like in any other library?

Question

I have an application with angular and I need to use this library http://www.jointjs.com/ , so I uploaded the file joint.min.js and joint.min. css and put my routes in index.html, but I don’t know what to add to app.js to enter it, and I continue to receive an injection error from angular. Is it possible that this is not a way to do this? I walked a lot, but did not find any approach. I will be grateful for any help, thanks in advance!

Answer 1

If you want to display a Jointjs diagram in your angular application, then this is pretty easy to do. In my case, I encapsulated the Jointjs code in the angular directive and passed in the Jointjs graph object. The directive (simplified) is as follows:

(function () { 'use strict'; var app = angular.module('app'); app.directive('jointDiagram', [function () { var directive = { link: link, restrict: 'E', scope: { height: '=', width: '=', gridSize: '=', graph: '=', } }; return directive; function link(scope, element, attrs) { var diagram = newDiagram(scope.height, scope.width, scope.gridSize, scope.graph, element[0]; //add event handlers to interact with the diagram diagram.on('cell:pointerclick', function (cellView, evt, x, y) { //your logic here eg select the element }); diagram.on('blank:pointerclick', function (evt, x, y) { // your logic here eg unselect the element by clicking on a blank part of the diagram }); diagram.on('link:options', function (evt, cellView, x, y) { // your logic here: eg select a link by its options tool }); } function newDiagram(height, width, gridSize, graph, targetElement) { var paper = new joint.dia.Paper({ el: targetElement, width: width, height: height, gridSize: gridSize, model: graph, }); return paper; } }]); })(); 

If you need to interact with your model in a diagram, use Jointjs event handlers and connect them to functions in your scope in a directive (as shown in the code above).

To use this in your view:

 <joint-diagram graph="vm.graph" width="800" height="600" grid-size="1" /> 

In my case, I create a graph in the first case, using the Jointjs graph.fromJSON function from my controller (strictly speaking, this is a component of the data service component that is called from my controller), and then just add this to the scope.

 function getDiagram() { return datacontext.getDiagram($routeParams.diagramId).then(function (data) { vm.graph.fromJSON(JSON.parse(diagramJson)); }); } 

This approach works fine for adding and removing elements and links from the diagram and for moving things around. Your controller code only works with the chart object, and all updates for chart rendering are processed by Jointjs.

 function addCircle(x, y, label) { var cell = new joint.shapes.basic.Circle({ position: { x: x, y: y }, size: { width: 100, height: 100 }, attrs: { text: { text: label } } }); graph.addCell(cell); return cell; }; 

Jointjs is a great library, but it is based on Backbone.js for data binding. The only problem I discovered is that it doesn’t work very well with angular when you want to edit the properties of a chart element (for example, containing text) using angular. For example, I have a properties panel (angular view) that is used to edit selected properties of a chart element.

I made a hacky workaround for this, that I’m too ashamed to put on SO, o) I’m still learning about angular / joint / spine, so I hope that by the time I finish my project, you will get a better approach. If I do, I will post it here. Maybe someone more experienced than me can already do better, though - I would be glad to see the best approach posted here.

In general, this directive works as an approach, but it is similar to the surface integration between angular and Jointjs. Essentially, the directive creates an “island of co-locals” inside an angular application. I would like to find a more “angular native” way to do this, but it may require rewriting Jointjs to use angular instead of the main ...

Ps If you already have jquery in the application, you can get a joint version that excludes jquery from the Jointjs download page:

http://www.jointjs.com/download

Answer 2

Found a great GitHub repository that tries to do exactly what you ask. If this is not exactly what you wanted, this is another source of inspiration!