mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-06 16:10:09 +00:00
Merge branch 'master' of https://github.com/jagenjo/litegraph.js
Conflicts: build/litegraph.min.js
This commit is contained in:
tamat
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
node_modules/
|
||||
node_modules/*
|
||||
npm-debug.log
|
||||
48
README.md
48
README.md
@@ -4,20 +4,43 @@ A library in Javascript to create graphs in the browser similar to [PureData](ht
|
||||
|
||||
It can be integrated easily in any existing web applications and graphs can be run without the need of the editor.
|
||||
|
||||
## Creating a Graph ##
|
||||
|
||||
|
||||
You can create graphs from the editor (and store them in JSON) or directly from code:
|
||||
## Installation
|
||||
|
||||
```javascript
|
||||
```
|
||||
npm install litegraph.js
|
||||
```
|
||||
|
||||
## First project ##
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<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 node = LiteGraph.createNode("basic/const");
|
||||
var node2 = LiteGraph.createNode("basic/watch");
|
||||
graph.add( node );
|
||||
graph.add( node2 );
|
||||
node.connect(0, node2, 0); //connect node slot 0 to node2 slot 0
|
||||
|
||||
graph.runStep(1); //execute one cycle
|
||||
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>
|
||||
```
|
||||
|
||||
## How to code a new Node type
|
||||
@@ -78,3 +101,10 @@ It includes several commands in the utils folder to generate doc, check errors a
|
||||
--------
|
||||
|
||||
You can write any feedback to javi.agenjo@gmail.com
|
||||
|
||||
## Contributors
|
||||
|
||||
- kriffe
|
||||
|
||||
|
||||
|
||||
|
||||
103
build/README.md
Normal file
103
build/README.md
Normal file
@@ -0,0 +1,103 @@
|
||||
# litegraph.js
|
||||
|
||||
A library in Javascript to create graphs in the browser similar to [PureData](https://puredata.info/). Nodes can be programmed easily and it includes an editor to construct the graphs.
|
||||
|
||||
It can be integrated easily in any existing web applications and graphs can be run without the need of the editor.
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
```
|
||||
npm install litegraph.js
|
||||
```
|
||||
|
||||
## First project ##
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<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>
|
||||
```
|
||||
|
||||
## How to code a new Node type
|
||||
|
||||
Here is an example of how to build a node that sums two inputs:
|
||||
|
||||
```javascript
|
||||
//node constructor class
|
||||
function MyAddNode()
|
||||
{
|
||||
this.addInput("A","number");
|
||||
this.addInput("B","number");
|
||||
this.addOutput("A+B","number");
|
||||
}
|
||||
|
||||
//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 );
|
||||
|
||||
```
|
||||
|
||||
|
||||
## Projects using it
|
||||
|
||||
### [webglstudio.org](http://webglstudio.org)
|
||||
|
||||
|
||||
|
||||
### [MOI Elephant](http://moiscript.weebly.com/elephant-systegraveme-nodal.html)
|
||||
|
||||
|
||||
|
||||
### [Mynodes.NET](http://www.mynodes.net)
|
||||
|
||||
|
||||
|
||||
## Utils
|
||||
-----
|
||||
|
||||
It includes several commands in the utils folder to generate doc, check errors and build minifyed version.
|
||||
|
||||
|
||||
## Feedback
|
||||
--------
|
||||
|
||||
You can write any feedback to javi.agenjo@gmail.com
|
||||
4018
build/litegraph.js
4018
build/litegraph.js
File diff suppressed because it is too large
Load Diff
6545
build/litegraph.min.js
vendored
6545
build/litegraph.min.js
vendored
File diff suppressed because it is too large
Load Diff
9
build/package.json
Normal file
9
build/package.json
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"version": "0.2.1",
|
||||
"name": "litegraph.js",
|
||||
"main": "litegraph.js",
|
||||
"description": "A graph node editor similar to PD or UDK Blueprints, it works in a HTML5 Canvas and allow to exported graphs to be included in applications.",
|
||||
"author": "jagenjo",
|
||||
"license": "MIT",
|
||||
"scripts": {}
|
||||
}
|
||||
82
gruntfile.js
Normal file
82
gruntfile.js
Normal file
@@ -0,0 +1,82 @@
|
||||
module.exports = function (grunt) {
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
projectFiles: ['src/litegraph.js',
|
||||
'src/nodes/base.js',
|
||||
'src/nodes/events.js',
|
||||
'src/nodes/interface.js',
|
||||
'src/nodes/input.js',
|
||||
'src/nodes/math.js',
|
||||
'src/nodes/logic.js',
|
||||
'src/nodes/image.js',
|
||||
'src/nodes/gltextures.js',
|
||||
'src/nodes/glfx.js',
|
||||
'src/nodes/midi.js',
|
||||
'src/nodes/audio.js'
|
||||
],
|
||||
concat: {
|
||||
build: {
|
||||
src: '<%= projectFiles %>',
|
||||
dest: 'build/litegraph.js'
|
||||
}
|
||||
},
|
||||
copy: {
|
||||
parts: {
|
||||
files: [
|
||||
{
|
||||
expand: true,
|
||||
flatten: true,
|
||||
cwd: '',
|
||||
src: ['README.md'],
|
||||
dest: 'build/'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
clean: {
|
||||
build: {src: ['build/*']}
|
||||
},
|
||||
closureCompiler: {
|
||||
|
||||
options: {
|
||||
compilerFile: 'node_modules/google-closure-compiler/compiler.jar',
|
||||
compilerOpts: {
|
||||
formatting: 'pretty_print',
|
||||
warning_level: 'default'
|
||||
},
|
||||
d32: false, // will use 'java -client -d32 -jar compiler.jar'
|
||||
TieredCompilation: false// will use 'java -server -XX:+TieredCompilation -jar compiler.jar',
|
||||
// ,output_wrapper: '"var LiteGraph = (function(){%output% return LiteGraph;}).call(this);"' //* Make container for all
|
||||
},
|
||||
targetName: {
|
||||
src: '<%= projectFiles %>',
|
||||
dest: 'build/litegraph.min.js'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
grunt.registerTask('buildPackage', function () {
|
||||
var pkg = grunt.config.data.pkg
|
||||
var newPackage = {
|
||||
version: pkg.version,
|
||||
name: 'litegraph.js', //* Static name without ogranisation
|
||||
main: 'litegraph.js',
|
||||
description: pkg.description,
|
||||
dependencies: pkg.dependencies,
|
||||
author: pkg.author,
|
||||
license: 'MIT',
|
||||
scripts: {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
grunt.file.write('build/package.json', JSON.stringify(newPackage, undefined, 2))
|
||||
})
|
||||
|
||||
grunt.loadNpmTasks('grunt-contrib-concat')
|
||||
grunt.loadNpmTasks('grunt-contrib-copy')
|
||||
grunt.loadNpmTasks('grunt-closure-tools')
|
||||
grunt.loadNpmTasks('grunt-contrib-clean')
|
||||
|
||||
grunt.registerTask('build', ['buildPackage', 'copy:parts', 'concat:build', 'closureCompiler'])
|
||||
}
|
||||
BIN
imgs/node_graph_example.PNG
Normal file
BIN
imgs/node_graph_example.PNG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
33
package.json
Normal file
33
package.json
Normal file
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "@skymaker/litegraph.js",
|
||||
"version": "0.2.1",
|
||||
"description": "A graph node editor similar to PD or UDK Blueprints, it works in a HTML5 Canvas and allow to exported graphs to be included in applications.",
|
||||
"main": "build/litegraph.js",
|
||||
"directories": {
|
||||
"doc": "doc"
|
||||
},
|
||||
"private": false,
|
||||
"scripts": {
|
||||
"prebuild": "grunt clean:build",
|
||||
"build": "grunt build",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/jagenjo/litegraph.js.git"
|
||||
},
|
||||
"author": "jagenjo",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/jagenjo/litegraph.js/issues"
|
||||
},
|
||||
"homepage": "https://github.com/kriffe/litegraph.js#readme",
|
||||
"devDependencies": {
|
||||
"google-closure-compiler": "^20171112.0.0",
|
||||
"grunt": "^1.0.1",
|
||||
"grunt-closure-tools": "^1.0.0",
|
||||
"grunt-contrib-clean": "^1.1.0",
|
||||
"grunt-contrib-concat": "^1.0.1",
|
||||
"grunt-contrib-copy": "^1.0.0"
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,8 @@
|
||||
//Works with Litegl.js to create WebGL nodes
|
||||
var LGraphTexture
|
||||
if(typeof(LiteGraph) != "undefined")
|
||||
{
|
||||
function LGraphTexture()
|
||||
LGraphTexture = function()
|
||||
{
|
||||
this.addOutput("Texture","Texture");
|
||||
this.properties = { name:"", filter: true };
|
||||
|
||||
@@ -313,7 +313,7 @@ LiteGraph.registerNodeType("visualization/graph", {
|
||||
function ImageFade()
|
||||
{
|
||||
this.addInputs([["img1","image"],["img2","image"],["fade","number"]]);
|
||||
this.addInput("","image");
|
||||
this.addOutput("","image");
|
||||
this.properties = {fade:0.5,width:512,height:512};
|
||||
}
|
||||
|
||||
@@ -714,4 +714,4 @@ ImageWebcam.prototype.onDrawBackground = function(ctx)
|
||||
LiteGraph.registerNodeType("graphics/webcam", ImageWebcam );
|
||||
|
||||
|
||||
})();
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user