Posso inserire JointJS come un modulo AngularJS come qualsiasi altra libreria?

Question

Ho un'app con angolare e ho bisogno di usare questa libreria http://www.jointjs.com/, quindi ho scaricato i file joint.min.js e joint.min.css e ho inserito i loro percorsi nell'index.html ma non so cosa mettere in app.js per iniettarlo e continuo a ricevere errore di iniezione da angolare. È possibile che questo non sia il modo di farlo? Ho cercato spesso su Google ma non ho trovato alcun approccio. Apprezzerò qualsiasi aiuto, grazie in anticipo!

Answer 1

Se si desidera eseguire il rendering di un diagramma Jointj nella propria applicazione angolare, è molto semplice farlo. Nel mio caso ho incapsulato il codice Jointjs all'interno di una direttiva angolare e passato nell'oggetto grafico Jointjs. L'(semplificato) direttiva si presenta così:

(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 e.g. select the element 

      }); 

      diagram.on('blank:pointerclick', function (evt, x, y) { 

       // your logic here e.g. unselect the element by clicking on a blank part of the diagram 
      }); 

      diagram.on('link:options', function (evt, cellView, x, y) { 

       // your logic here: e.g. 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; 
     } 

    }]); 

})(); 

Se avete bisogno di interagire con il modello attraverso il diagramma, utilizzare i gestori di eventi Jointjs e li collegare a funzioni sul vostro campo di applicazione della direttiva (come mostrato nella codice sopra).

Per utilizzare questa secondo lei:

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

Nel mio caso ho creato il grafico nel primo caso utilizzando la funzione Jointjs graph.fromJSON dal mio controller (in senso stretto, questo è in un componente di servizio dati che viene chiamato dal mio controller) e quindi basta aggiungerlo allo scope.

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

Questo approccio funziona correttamente per aggiungere e rimuovere elementi e collegamenti dal diagramma e per trascinare le cose. Il codice del controller funziona solo sull'oggetto grafico e tutti gli aggiornamenti del rendering diagramma vengono gestiti da 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 è una grande libreria, ma è basata su Backbone.js per l'associazione dei dati. L'unico problema che ho riscontrato è che non suona particolarmente bene con angolare nei casi in cui si desidera modificare le proprietà degli elementi del diagramma (ad esempio il testo contenuto) usando angolare. Ad esempio, ho un riquadro delle proprietà (una vista angolare) che viene utilizzato per modificare le proprietà degli elementi del diagramma selezionati.

Ho fatto una soluzione hacky per questo che mi vergogno troppo di mettere su SO; o) Sto ancora imparando su angolare/joint/backbone quindi spero di avere un approccio migliore per il momento in cui finisco il mio progetto. Se lo faccio, lo posterò qui. Forse qualcuno più esperto di me potrebbe già fare meglio - sarei felice di vedere un approccio migliore pubblicato qui.

Nel complesso, questa direttiva funziona come approccio, ma sembra un'integrazione superficiale tra Angular e Jointjs. Essenzialmente la direttiva crea una "isola di jointjs" all'interno dell'applicazione angolare. Mi piacerebbe trovare un modo più "angolare nativo" per farlo, ma forse ciò richiederebbe una riscrittura di Jointjs per utilizzare angolare invece di backbone ...

P.s. Se hai già jquery nell'applicazione, è possibile ottenere una versione di giunto che esclude jQuery dalla pagina di download Jointjs:

http://www.jointjs.com/download

Answer 2

Abbiamo trovato un ottimo GitHub repo che cerca di fare proprio ciò che il vostro richiesto. Se non è esattamente quello che volevi, è ancora una grande fonte d'ispirazione!