litegraph.js

liteGraph.js

Eine Bibliothek in JavaScript, um Grafiken im Browser ähnlich wie unwirkliche Blaupausen zu erstellen. Knoten können leicht programmiert werden und enthält einen Editor zum Konstrukt und Testen der Diagramme.

Es kann problemlos in vorhandene Webanwendungen integriert werden, und Diagramme können ohne Bedarf des Editors ausgeführt werden.

Probieren Sie es auf der Demo -Website aus.

Merkmale

• Renders auf Canvas2D (Zoom in/out und Panning, einfach zu rendere komplexe Schnittstellen, kann in einer WebGltexture verwendet werden)
• Einfach zu verwendender Editor (Searchbox, Tastaturverknüpfungen, Mehrfachauswahl, Kontextmenü, ...)
• Optimiert, um Hunderte von Knoten pro Diagramm zu unterstützen (auf Editor, aber auch bei Ausführung)
• Anpassbares Thema (Farben, Formen, Hintergrund)
• Rückrufe, um jede Aktion/Zeichnung/Ereignis von Knoten zu personalisieren
• Subgraphen (Knoten, die selbst Diagramme enthalten)
• Live -Modus -System (versteckt den Diagramm, ruft jedoch Knoten auf, um alles zu rendern, was sie wollen, nützlich, um Benutzeroberflächen zu erstellen).
• Diagramme können in NodeJs ausgeführt werden
• Hochpassbare Knoten (Farbe, Form, Slots vertikal oder horizontal, Widgets, individuelles Rendering)
• Einfach zu integrieren in eine JS -Anwendung (eine einzige Datei, keine Abhängigkeiten)
• Unterstützung von Typenkript

Knoten zur Verfügung gestellt

Obwohl es einfach ist, neue Knotentypen zu erstellen, verfügt LiteGraph mit einigen Standardknoten, die für viele Fälle nützlich sein könnten:

• Schnittstelle (Widgets)
• Mathematik (Trigonometrie, Mathematikoperationen)
• Audio (Audioapi und MIDI)
• 3D -Grafik (Nachbearbeitung in WebGL)
• Eingabe (Gamepad lesen)

Installation

Sie können es mit NPM installieren

 npm install litegraph.js

Oder Herunterladen der Version build/litegraph.js und css/litegraph.css von diesem Repository.

Erstes Projekt

 < html >
< head >
	< link rel =" stylesheet " type =" text/css " href =" litegraph.css " >
	< script type =" text/javascript " src =" litegraph.js " > </ script >
</ head >
< body style =' width:100%; height:100% ' >
< canvas id =' mycanvas ' width =' 1024 ' height =' 720 ' style =' border: 1px solid ' > </ canvas >
< script >
var graph = new LGraph ( ) ;

var canvas = new LGraphCanvas ( "#mycanvas" , graph ) ;

var node_const = LiteGraph . createNode ( "basic/const" ) ;
node_const . pos = [ 200 , 200 ] ;
graph . add ( node_const ) ;
node_const . setValue ( 4.5 ) ;

var node_watch = LiteGraph . createNode ( "basic/watch" ) ;
node_watch . pos = [ 700 , 200 ] ;
graph . add ( node_watch ) ;

node_const . connect ( 0 , node_watch , 0 ) ;

graph . start ( )
</ script >
</ body >
</ html > 

So codieren Sie einen neuen Knotentyp

Hier ist ein Beispiel dafür, wie man einen Knoten erstellt, der zwei Eingänge zusammenfasst:

 //node constructor class
function MyAddNode ( )
{
  this . addInput ( "A" , "number" ) ;
  this . addInput ( "B" , "number" ) ;
  this . addOutput ( "A+B" , "number" ) ;
  this . properties = { precision : 1 } ;
}

//name to show
MyAddNode . title = "Sum" ;

//function to call when the node is executed
MyAddNode . prototype . onExecute = function ( )
{
  var A = this . getInputData ( 0 ) ;
  if ( A === undefined )
    A = 0 ;
  var B = this . getInputData ( 1 ) ;
  if ( B === undefined )
    B = 0 ;
  this . setOutputData ( 0 , A + B ) ;
}

//register in the system
LiteGraph . registerNodeType ( "basic/sum" , MyAddNode ) ;

oder Sie können eine vorhandene Funktion einwickeln:

 function sum ( a , b )
{
   return a + b ;
}

LiteGraph . wrapFunctionAsNode ( "math/sum" , sum , [ "Number" , "Number" ] , "Number" ) ; 

Serverseite

Es funktioniert auch mit NodeJs serverseitig, obwohl einige Knoten nicht auf dem Server (Audio, Grafik, Eingabe usw.) funktionieren.

 var LiteGraph = require ( "./litegraph.js" ) . LiteGraph ;

var graph = new LiteGraph . LGraph ( ) ;

var node_time = LiteGraph . createNode ( "basic/time" ) ;
graph . add ( node_time ) ;

var node_console = LiteGraph . createNode ( "basic/console" ) ;
node_console . mode = LiteGraph . ALWAYS ;
graph . add ( node_console ) ;

node_time . connect ( 0 , node_console , 1 ) ;

graph . start ( ) 

Projekte, die es verwenden

bequem

webglstudio.org

Moi Elefant

Mynodes

Utils

---

Es enthält mehrere Befehle im Ordner utils, um DOC zu generieren, Fehler zu überprüfen und eine minifikante Version zu erstellen.

Demo

---

Die Demo enthält einige Beispiele für Graphen. Um sie auszuprobieren, können Sie die Demo -Site besuchen oder auf Ihrem lokalen Computer installieren. Dadurch benötigen Sie git , node und npm . Führen Sie angesichts dieser Abhängigkeiten die folgenden Befehle aus, um es auszuprobieren:

$ git clone https://github.com/jagenjo/litegraph.js.git
$ cd litegraph.js
$ npm install
$ node utils/server.js
Example app listening on port 80 !

Öffnen Sie Ihren Browser und richten Sie ihn auf http: // localhost: 8000/. Sie können eine Demo aus der Dropdown -Seite oben auf der Seite auswählen.

Rückmeldung

---

Sie können jedes Feedback an [email protected] schreiben

Mitwirkende

• Atlasan
• Kriffe
• Rappestad
• Erfinderungsevel
• Natescarlet
• Coderofsalvation
• Ilyabesk
• Gausszhou