2016-05-09 5 views
5

Ich versuche, jsplumb zu verwenden, um Verbindungen zwischen zwei Komponenten anzuzeigen.JsPlumb mit Angular2

Was ich am Ende mache, ist mit jQuery, um das Handle auf das UI-Element zu erhalten und es zu verwenden, um Verbindungen mit jsplumb-Bibliothek zu rendern. Etwas wie folgt:

JsPlumb Konfiguration

if(typeof jsPlumb !== 'undefined' && jsPlumb !== null) { 
    jsPlumb.ready(function() { 
    jsPlumb.deleteEveryEndpoint(); 
    jsPlumb.setContainer(this._container); 
    jsPlumb.Defaults.PaintStyle = { strokeStyle:'#339900', lineWidth:2, dashstyle: '3 3'}; 
    jsPlumb.Defaults.EndpointStyle = { radius:7, fillStyle:'#339900' }; 
    jsPlumb.importDefaults({ 
     Connector : [ 'Flowchart', { curviness:0 } ], 
     ConnectionsDetachable:true, 
     ReattachConnections:true 
    }); 
    jsPlumb.endpointClass = 'endpointClass'; 
    jsPlumb.connectorClass = 'connectorClass'; 
    }); 
} 

JsPlumb Nutzungs

jsPlumb.connect({ 
    source: $('#'+entityFrom+'Panel'), 
    target: $('#'+entityTo+'Panel'), 
    anchors: ['RightMiddle', 'LeftMiddle'] 
}); 

Von verschiedenen Blogs auf angular2, ich verstehe, dass jQuery mit NG2 mit ein Anti-Muster.

Kann jemand eine Alternative oder einen besseren Entwurf Ansatz zur Verwendung von jsPlumb mit Angular2 oder einer anderen ähnlichen Bibliothek bieten.

Antwort

1

Ich bin in einer ähnlichen Situation, wo ich JSplumb mit Winkel 2 verwenden muss. Der Ansatz, den ich nahm, ist die Typoskript-Wrapper von jsplumb und integrieren mit eckigen 2 mit Standard-Tools bietet. Dies ist der Ansatz, der bei der Integration anderer ähnlicher Bibliotheken funktioniert hat, aber nicht für jsplumb funktioniert, da kein gültiger typisierter Wrapper für die jsplumb-Bibliothek zur Verfügung steht.

I JSplumb Team für eine gültige Wrapper Kontakt 2 in Winkel verwendet werden, aber sie weigerte sich zu sagen Winkel 2

+0

Es gibt es hier nicht ihre unmittelbare Pipeline ist ein Typoskript Wrapper: https://github.com/DefinitelyTyped/ DefinitivTyped/blob/master/jsplumb/index.d.ts, haben Sie Ideen, wie Sie es verwenden würden? – user760226

+0

Ich habe es lange zurück versucht. Es funktionierte nicht mit eckigen 2, genauso wie andere Bibliotheken arbeiten. Sie exportieren das Modul nicht –