Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-24 08:44:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #13 from kriffe/master

Browse Source 
Updated npm publish structure
This commit is contained in:
Javi Agenjo
2018-01-01 17:55:02 +01:00
committed by GitHub
parent 355ebe6d80 766dfe2b83
commit 2e16b6560a
9 changed files with 12221 additions and 2814 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
build/README.md
View File

@@ -1,103 +0,0 @@
# 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.
![Node Graph](imgs/node_graph_example.PNG "WebGLStudio")
## 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)
![WebGLStudio](imgs/webglstudio.gif "WebGLStudio")
### [MOI Elephant](http://moiscript.weebly.com/elephant-systegraveme-nodal.html)
![MOI Elephant](imgs/elephant.gif "MOI Elephant")
### [Mynodes.NET](http://www.mynodes.net)
![MyNodes.NET](imgs/mynodes.png "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

4280
build/litegraph.js
View File

File diff suppressed because it is too large Load Diff

6945
build/litegraph.min.js vendored
View File

File diff suppressed because it is too large Load Diff

9
build/package.json
View File

@@ -1,9 +0,0 @@
{
"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": {}
}

45
gruntfile.js
View File

@@ -20,19 +20,6 @@ module.exports = function (grunt) {
dest: 'build/litegraph.js'
}
},
copy: {
parts: {
files: [
{
expand: true,
flatten: true,
cwd: '',
src: ['README.md'],
dest: 'build/'
}
]
}
},
clean: {
build: {src: ['build/*']}
},
@@ -55,28 +42,28 @@ module.exports = function (grunt) {
}
})
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.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.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'])
grunt.registerTask('build', ['concat:build', 'closureCompiler'])
}

3367
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

13
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@skymaker/litegraph.js",
"version": "0.2.1",
"name": "litegraph.js",
"version": "0.3.0",
"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": {
@@ -10,6 +10,7 @@
"scripts": {
"prebuild": "grunt clean:build",
"build": "grunt build",
"start": "npx nodemon utils/server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
@@ -18,16 +19,22 @@
},
"author": "jagenjo",
"license": "MIT",
"files": [
"build",
"css/litegraph.css"
],
"bugs": {
"url": "https://github.com/jagenjo/litegraph.js/issues"
},
"homepage": "https://github.com/kriffe/litegraph.js#readme",
"devDependencies": {
"express": "^4.16.2",
"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"
"grunt-contrib-copy": "^1.0.0",
"nodemon": "^1.14.7"
}
}

261
src/litegraph.js
View File

@@ -4,12 +4,12 @@
// *************************************************************
/* FYI: links are stored in graph.links with this structure per object
{
{
id: number
type: string,
origin_id: number,
origin_slot: number,
target_id: number,
origin_id: number,
origin_slot: number,
target_id: number,
target_slot: number,
data: *
};
@@ -41,8 +41,8 @@ var LiteGraph = global.LiteGraph = {
node_images_path: "",
//enums
INPUT: 1,
OUTPUT: 2,
INPUT: 1,
OUTPUT: 2,
EVENT: -1, //for outputs
ACTION: -1, //for inputs
@@ -162,7 +162,7 @@ var LiteGraph = global.LiteGraph = {
if(options)
{
for(var i in options)
node[i] = options[i];
node[i] = options[i];
}
return node;
@@ -206,7 +206,7 @@ var LiteGraph = global.LiteGraph = {
/**
* Returns a list with all the node type categories
* @method getNodeTypesCategories
* @return {Array} array with all the names of the categories
* @return {Array} array with all the names of the categories
*/
getNodeTypesCategories: function()
@@ -262,7 +262,7 @@ var LiteGraph = global.LiteGraph = {
if(LiteGraph.debug)
console.log("Nodes reloaded");
},
//separated just to improve if it doesnt work
cloneObject: function(obj, target)
{
@@ -294,10 +294,10 @@ else
//*********************************************************************************
// LGraph CLASS
// LGraph CLASS
//*********************************************************************************
/**
@@ -376,7 +376,7 @@ LGraph.prototype.clear = function()
/**
* Attach Canvas to this graph
* @method attachCanvas
* @param {GraphCanvas} graph_canvas
* @param {GraphCanvas} graph_canvas
*/
LGraph.prototype.attachCanvas = function(graphcanvas)
@@ -395,7 +395,7 @@ LGraph.prototype.attachCanvas = function(graphcanvas)
/**
* Detach Canvas from this graph
* @method detachCanvas
* @param {GraphCanvas} graph_canvas
* @param {GraphCanvas} graph_canvas
*/
LGraph.prototype.detachCanvas = function(graphcanvas)
@@ -430,11 +430,11 @@ LGraph.prototype.start = function(interval)
//launch
this.starttime = LiteGraph.getTime();
interval = interval || 1;
var that = this;
var that = this;
this.execution_timer_id = setInterval( function() {
this.execution_timer_id = setInterval( function() {
//execute
that.runStep(1, !this.catch_errors );
that.runStep(1, !this.catch_errors );
},interval);
}
@@ -561,7 +561,7 @@ LGraph.prototype.computeExecutionOrder = function( only_onExecute )
var M = {};
var visited_links = {}; //to avoid repeating links
var remaining_links = {}; //to a
//search for the nodes without inputs (starting nodes)
for (var i = 0, l = this._nodes.length; i < l; ++i)
{
@@ -579,7 +579,7 @@ LGraph.prototype.computeExecutionOrder = function( only_onExecute )
if(num == 0) //is a starting node
S.push(n);
else //num of input links
else //num of input links
remaining_links[n.id] = num;
}
@@ -587,12 +587,12 @@ LGraph.prototype.computeExecutionOrder = function( only_onExecute )
{
if(S.length == 0)
break;
//get an starting node
var n = S.shift();
L.push(n); //add to ordered list
delete M[n.id]; //remove from the pending nodes
//for every output
if(n.outputs)
for(var i = 0; i < n.outputs.length; i++)
@@ -627,18 +627,18 @@ LGraph.prototype.computeExecutionOrder = function( only_onExecute )
}
}
}
//the remaining ones (loops)
for(var i in M)
L.push( M[i] );
if( L.length != this._nodes.length && LiteGraph.debug )
console.warn("something went wrong, nodes missing");
//save order number in the node
for(var i = 0; i < L.length; ++i)
L[i].order = i;
return L;
}
@@ -709,7 +709,7 @@ LGraph.prototype.sendEventToAllNodes = function( eventname, params, mode )
LGraph.prototype.sendActionToCanvas = function(action, params)
{
if(!this.list_of_graphcanvas)
if(!this.list_of_graphcanvas)
return;
for(var i = 0; i < this.list_of_graphcanvas.length; ++i)
@@ -746,7 +746,7 @@ LGraph.prototype.add = function(node, skip_compute_order)
this._nodes_by_id[node.id] = node;
/*
// rendering stuf...
// rendering stuf...
if(node.bgImageUrl)
node.bgImage = node.loadImage(node.bgImageUrl);
*/
@@ -782,7 +782,7 @@ LGraph.prototype.remove = function(node)
if(this._nodes_by_id[node.id] == null)
return; //not found
if(node.ignore_remove)
if(node.ignore_remove)
return; //cannot be removed
//disconnect inputs
@@ -1215,7 +1215,7 @@ LGraph.prototype.serialize = function()
/**
* Configure a graph from a JSON string
* Configure a graph from a JSON string
* @method configure
* @param {String} str configure a graph from a JSON string
*/
@@ -1280,7 +1280,7 @@ LGraph.prototype.load = function(url)
{
var that = this;
var req = new XMLHttpRequest();
req.open('GET', url, true);
req.open('GET', url, true);
req.send(null);
req.onload = function (oEvent) {
if(req.status !== 200)
@@ -1319,7 +1319,7 @@ LGraph.prototype.onNodeTrace = function(node, msg, color)
+ clip_area
+ unsafe_execution: not allowed for safe execution
supported callbacks:
supported callbacks:
+ onAdded: when added to graph
+ onRemoved: when removed from graph
+ onStart: when the graph starts playing
@@ -1468,7 +1468,7 @@ LGraphNode.prototype.configure = function(info)
if(typeof(link) != "object")
continue;
input.link = link[0];
this.graph.links[ link[0] ] = {
this.graph.links[ link[0] ] = {
id: link[0],
origin_id: link[1],
origin_slot: link[2],
@@ -1603,12 +1603,12 @@ LGraphNode.prototype.getTitle = function()
*/
LGraphNode.prototype.setOutputData = function(slot, data)
{
if(!this.outputs)
if(!this.outputs)
return;
if(slot == -1 || slot >= this.outputs.length)
return;
var output_info = this.outputs[slot];
if(!output_info)
return;
@@ -1636,7 +1636,7 @@ LGraphNode.prototype.setOutputData = function(slot, data)
*/
LGraphNode.prototype.getInputData = function( slot, force_update )
{
if(!this.inputs)
if(!this.inputs)
return; //undefined;
if(slot >= this.inputs.length || this.inputs[slot].link == null)
@@ -1665,11 +1665,11 @@ LGraphNode.prototype.getInputData = function( slot, force_update )
* tells you if there is a connection in one input slot
* @method isInputConnected
* @param {number} slot
* @return {boolean}
* @return {boolean}
*/
LGraphNode.prototype.isInputConnected = function(slot)
{
if(!this.inputs)
if(!this.inputs)
return false;
return (slot < this.inputs.length && this.inputs[slot].link != null);
}
@@ -1748,7 +1748,7 @@ LGraphNode.prototype.getOutputInfo = function(slot)
* tells you if there is a connection in one output slot
* @method isOutputConnected
* @param {number} slot
* @return {boolean}
* @return {boolean}
*/
LGraphNode.prototype.isOutputConnected = function(slot)
{
@@ -1761,7 +1761,7 @@ LGraphNode.prototype.isOutputConnected = function(slot)
* retrieves all the nodes connected to this output slot
* @method getOutputNodes
* @param {number} slot
* @return {array}
* @return {array}
*/
LGraphNode.prototype.getOutputNodes = function(slot)
{
@@ -2001,7 +2001,7 @@ LGraphNode.prototype.removeInput = function(slot)
*/
LGraphNode.prototype.addConnection = function(name,type,pos,direction)
{
var o = {
var o = {
name: name,
type: type,
pos: pos,
@@ -2078,7 +2078,7 @@ LGraphNode.prototype.getBounding = function()
* @method isPointInsideNode
* @param {number} x
* @param {number} y
* @return {boolean}
* @return {boolean}
*/
LGraphNode.prototype.isPointInsideNode = function(x,y, margin)
{
@@ -2131,7 +2131,7 @@ LGraphNode.prototype.getSlotInPosition = function( x, y )
/**
* returns the input slot with a given name (used for dynamic slots), -1 if not found
* @method findInputSlot
* @param {string} name the name of the slot
* @param {string} name the name of the slot
* @return {number} the slot (-1 if not found)
*/
LGraphNode.prototype.findInputSlot = function(name)
@@ -2147,7 +2147,7 @@ LGraphNode.prototype.findInputSlot = function(name)
/**
* returns the output slot with a given name (used for dynamic slots), -1 if not found
* @method findOutputSlot
* @param {string} name the name of the slot
* @param {string} name the name of the slot
* @return {number} the slot (-1 if not found)
*/
LGraphNode.prototype.findOutputSlot = function(name)
@@ -2163,7 +2163,7 @@ LGraphNode.prototype.findOutputSlot = function(name)
* connect this node output to the input of another node
* @method connect
* @param {number_or_string} slot (could be the number of the slot or the string with the name of the slot)
* @param {LGraphNode} node the target node
* @param {LGraphNode} node the target node
* @param {number_or_string} target_slot the input slot of the target node (could be the number of the slot or the string with the name of the slot, or -1 to connect a trigger)
* @return {boolean} if it was connected succesfully
*/
@@ -2182,7 +2182,7 @@ LGraphNode.prototype.connect = function( slot, target_node, target_slot )
return false;
}
}
else if(!this.outputs || slot >= this.outputs.length)
else if(!this.outputs || slot >= this.outputs.length)
{
if(LiteGraph.debug)
console.log("Connect: Error, slot number not found");
@@ -2196,7 +2196,7 @@ LGraphNode.prototype.connect = function( slot, target_node, target_slot )
//avoid loopback
if(target_node == this)
return false;
return false;
//you can specify the slot by name
if(target_slot.constructor === String)
@@ -2220,7 +2220,7 @@ LGraphNode.prototype.connect = function( slot, target_node, target_slot )
*/
return false;
}
else if( !target_node.inputs || target_slot >= target_node.inputs.length )
else if( !target_node.inputs || target_slot >= target_node.inputs.length )
{
if(LiteGraph.debug)
console.log("Connect: Error, slot number not found");
@@ -2234,10 +2234,10 @@ LGraphNode.prototype.connect = function( slot, target_node, target_slot )
//why here??
this.setDirtyCanvas(false,true);
this.graph.connectionChange( this );
var output = this.outputs[slot];
//allows nodes to block connection
//allows nodes to block connection
if(target_node.onConnectInput)
if( target_node.onConnectInput( target_slot, output.type, output ) === false)
return false;
@@ -2246,12 +2246,12 @@ LGraphNode.prototype.connect = function( slot, target_node, target_slot )
if( LiteGraph.isValidConnection( output.type, input.type ) )
{
var link_info = {
var link_info = {
id: this.graph.last_link_id++,
type: input.type,
origin_id: this.id,
origin_slot: slot,
target_id: target_node.id,
origin_id: this.id,
origin_slot: slot,
target_id: target_node.id,
target_slot: target_slot
};
@@ -2296,7 +2296,7 @@ LGraphNode.prototype.disconnectOutput = function( slot, target_node )
return false;
}
}
else if(!this.outputs || slot >= this.outputs.length)
else if(!this.outputs || slot >= this.outputs.length)
{
if(LiteGraph.debug)
console.log("Connect: Error, slot number not found");
@@ -2384,7 +2384,7 @@ LGraphNode.prototype.disconnectInput = function( slot )
return false;
}
}
else if(!this.inputs || slot >= this.inputs.length)
else if(!this.inputs || slot >= this.inputs.length)
{
if(LiteGraph.debug)
console.log("Connect: Error, slot number not found");
@@ -2407,7 +2407,7 @@ LGraphNode.prototype.disconnectInput = function( slot )
return false;
var output = target_node.outputs[ link_info.origin_slot ];
if(!output || !output.links || output.links.length == 0)
if(!output || !output.links || output.links.length == 0)
return false;
//search in the inputs list for this link
@@ -2498,11 +2498,11 @@ LGraphNode.prototype.setDirtyCanvas = function(dirty_foreground, dirty_backgroun
LGraphNode.prototype.loadImage = function(url)
{
var img = new Image();
img.src = LiteGraph.node_images_path + url;
img.src = LiteGraph.node_images_path + url;
img.ready = false;
var that = this;
img.onload = function() {
img.onload = function() {
this.ready = true;
that.setDirtyCanvas(true);
}
@@ -2603,7 +2603,7 @@ LGraphNode.prototype.localToScreen = function(x,y, graphcanvas)
//*********************************************************************************
// LGraphCanvas: LGraph renderer CLASS
// LGraphCanvas: LGraph renderer CLASS
//*********************************************************************************
/**
@@ -2621,7 +2621,8 @@ global.LGraphCanvas = LiteGraph.LGraphCanvas = function LGraphCanvas( canvas, gr
options = options || {};
//if(graph === undefined)
// throw ("No graph assigned");
// throw ("No graph assigned");
this.background_image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQBJREFUeNrs1rEKwjAUhlETUkj3vP9rdmr1Ysammk2w5wdxuLgcMHyptfawuZX4pJSWZTnfnu/lnIe/jNNxHHGNn//HNbbv+4dr6V+11uF527arU7+u63qfa/bnmh8sWLBgwYJlqRf8MEptXPBXJXa37BSl3ixYsGDBMliwFLyCV/DeLIMFCxYsWLBMwSt4Be/NggXLYMGCBUvBK3iNruC9WbBgwYJlsGApeAWv4L1ZBgsWLFiwYJmCV/AK3psFC5bBggULloJX8BpdwXuzYMGCBctgwVLwCl7Be7MMFixYsGDBsu8FH1FaSmExVfAxBa/gvVmwYMGCZbBg/W4vAQYA5tRF9QYlv/QAAAAASUVORK5CYII='
if(canvas && canvas.constructor === String )
canvas = document.querySelector( canvas );
@@ -2646,7 +2647,7 @@ global.LGraphCanvas = LiteGraph.LGraphCanvas = function LGraphCanvas( canvas, gr
this.allow_dragnodes = true;
this.allow_interaction = true; //allow to control widgets, buttons, collapse, etc
this.always_render_background = false;
this.always_render_background = false;
this.render_connections_shadows = false; //too much cpu
this.render_connections_border = true;
this.render_curved_connections = true;
@@ -2744,7 +2745,7 @@ LGraphCanvas.prototype.setGraph = function( graph, skip_clear )
*/
LGraphCanvas.prototype.openSubgraph = function(graph)
{
if(!graph)
if(!graph)
throw("graph cannot be null");
if(this.graph == graph)
@@ -2764,7 +2765,7 @@ LGraphCanvas.prototype.openSubgraph = function(graph)
}
/**
* closes a subgraph contained inside a node
* closes a subgraph contained inside a node
*
* @method closeSubgraph
* @param {LGraph} assigns a graph
@@ -2795,7 +2796,7 @@ LGraphCanvas.prototype.setCanvas = function( canvas, skip_events )
canvas = document.getElementById(canvas);
if(!canvas)
throw("Error creating LiteGraph canvas: Canvas not found");
}
}
}
if(canvas === this.canvas)
@@ -2878,7 +2879,7 @@ LGraphCanvas.prototype.bindEvents = function()
canvas.addEventListener("touchstart", this.touchHandler, true);
canvas.addEventListener("touchmove", this.touchHandler, true);
canvas.addEventListener("touchend", this.touchHandler, true);
canvas.addEventListener("touchcancel", this.touchHandler, true);
canvas.addEventListener("touchcancel", this.touchHandler, true);
}
//Keyboard ******************
@@ -2934,10 +2935,10 @@ LGraphCanvas.getFileExtension = function (url)
if(question != -1)
url = url.substr(0,question);
var point = url.lastIndexOf(".");
if(point == -1)
if(point == -1)
return "";
return url.substr(point+1).toLowerCase();
}
}
//this file allows to render the canvas using WebGL instead of Canvas2D
//this is useful if you plant to render 3D objects inside your nodes
@@ -2973,7 +2974,7 @@ LGraphCanvas.prototype.UIinit = function()
var node = that.node_in_panel;
if(!node)
return;
node.trace("] " + e.target.value, "#333");
if(node.onConsoleCommand)
{
@@ -3004,14 +3005,14 @@ LGraphCanvas.prototype.UIinit = function()
node.trace("error: " + err, "#A33");
}
}
this.value = "";
});
}
*/
/**
* marks as dirty the canvas, this way it will be rendered again
* marks as dirty the canvas, this way it will be rendered again
*
* @class LGraphCanvas
* @method setDirty
@@ -3088,7 +3089,7 @@ LGraphCanvas.prototype.processMouseDown = function(e)
return;
this.adjustMouseEvent(e);
var ref_window = this.getCanvasWindow();
var document = ref_window.document;
LGraphCanvas.active_canvas = this;
@@ -3100,7 +3101,7 @@ LGraphCanvas.prototype.processMouseDown = function(e)
var n = this.graph.getNodeOnPos( e.canvasX, e.canvasY, this.visible_nodes );
var skip_dragging = false;
LiteGraph.closeAllContextMenus( ref_window );
if(e.which == 1) //left button mouse
@@ -3123,7 +3124,7 @@ LGraphCanvas.prototype.processMouseDown = function(e)
//when clicked on top of a node
//and it is not interactive
if(n && this.allow_interaction )
if(n && this.allow_interaction )
{
if(!this.live_mode && !n.flags.pinned)
this.bringToFront(n); //if it wasnt selected?
@@ -3184,7 +3185,7 @@ LGraphCanvas.prototype.processMouseDown = function(e)
}
//it wasnt clicked on the links boxes
if(!skip_action)
if(!skip_action)
{
var block_drag_node = false;
@@ -3208,7 +3209,7 @@ LGraphCanvas.prototype.processMouseDown = function(e)
clicking_canvas_bg = true;
block_drag_node = true;
}
if(!block_drag_node)
{
if(this.allow_dragnodes)
@@ -3248,7 +3249,7 @@ LGraphCanvas.prototype.processMouseDown = function(e)
this.canvas_mouse = [e.canvasX, e.canvasY];
/*
if( (this.dirty_canvas || this.dirty_bgcanvas) && this.rendering_timer_id == null)
if( (this.dirty_canvas || this.dirty_bgcanvas) && this.rendering_timer_id == null)
this.draw();
*/
@@ -3329,7 +3330,7 @@ LGraphCanvas.prototype.processMouseMove = function(e)
if(this.connecting_node)
{
var pos = this._highlight_input || [0,0]; //to store the output of isOverNodeInput
if( this.isOverNodeBox( n, e.canvasX, e.canvasY ) )
{
//mouse on top of the corner box, dont know what to do
@@ -3338,7 +3339,7 @@ LGraphCanvas.prototype.processMouseMove = function(e)
{
var slot = this.isOverNodeInput( n, e.canvasX, e.canvasY, pos );
if(slot != -1 && n.inputs[slot])
{
{
var slot_type = n.inputs[slot].type;
if( LiteGraph.isValidConnection( this.connecting_output.type, slot_type ) )
this._highlight_input = pos;
@@ -3371,17 +3372,17 @@ LGraphCanvas.prototype.processMouseMove = function(e)
this.node_dragged.pos[0] = Math.round(this.node_dragged.pos[0]);
this.node_dragged.pos[1] = Math.round(this.node_dragged.pos[1]);
*/
for(var i in this.selected_nodes)
{
var n = this.selected_nodes[i];
n.pos[0] += delta[0] / this.scale;
n.pos[1] += delta[1] / this.scale;
//n.pos[0] = Math.round(n.pos[0]);
//n.pos[1] = Math.round(n.pos[1]);
}
this.dirty_canvas = true;
this.dirty_bgcanvas = true;
}
@@ -3403,7 +3404,7 @@ LGraphCanvas.prototype.processMouseMove = function(e)
}
/*
if((this.dirty_canvas || this.dirty_bgcanvas) && this.rendering_timer_id == null)
if((this.dirty_canvas || this.dirty_bgcanvas) && this.rendering_timer_id == null)
this.draw();
*/
@@ -3527,7 +3528,7 @@ LGraphCanvas.prototype.processMouseUp = function(e)
}
LGraphCanvas.prototype.processMouseWheel = function(e)
LGraphCanvas.prototype.processMouseWheel = function(e)
{
if(!this.graph || !this.allow_dragcanvas)
return;
@@ -3574,7 +3575,7 @@ LGraphCanvas.prototype.isOverNodeInput = function(node, canvasx, canvasy, slot_p
if( isInsideRectangle(canvasx, canvasy, link_pos[0] - 10, link_pos[1] - 5, 20,10) )
{
if(slot_pos)
{
{
slot_pos[0] = link_pos[0];
slot_pos[1] = link_pos[1];
}
@@ -3584,7 +3585,7 @@ LGraphCanvas.prototype.isOverNodeInput = function(node, canvasx, canvasy, slot_p
return -1;
}
LGraphCanvas.prototype.processKey = function(e)
LGraphCanvas.prototype.processKey = function(e)
{
if(!this.graph)
return;
@@ -3611,7 +3612,7 @@ LGraphCanvas.prototype.processKey = function(e)
//...
//TODO
if(this.selected_nodes)
if(this.selected_nodes)
for (var i in this.selected_nodes)
if(this.selected_nodes[i].onKeyDown)
this.selected_nodes[i].onKeyDown(e);
@@ -3638,7 +3639,7 @@ LGraphCanvas.prototype.processDrop = function(e)
e.preventDefault();
this.adjustMouseEvent(e);
var pos = [e.canvasX,e.canvasY];
var node = this.graph.getNodeOnPos(pos[0],pos[1]);
@@ -3727,7 +3728,7 @@ LGraphCanvas.prototype.processNodeSelected = function(n,e)
n.selected = true;
if (n.onSelected)
n.onSelected();
if(e && e.shiftKey) //add to selection
this.selected_nodes[n.id] = n;
else
@@ -3735,7 +3736,7 @@ LGraphCanvas.prototype.processNodeSelected = function(n,e)
this.selected_nodes = {};
this.selected_nodes[ n.id ] = n;
}
this.dirty_canvas = true;
if(this.onNodeSelected)
@@ -3749,7 +3750,7 @@ LGraphCanvas.prototype.processNodeDeselected = function(n)
n.selected = false;
if(n.onDeselected)
n.onDeselected();
delete this.selected_nodes[n.id];
if(this.onNodeDeselected)
@@ -3852,7 +3853,7 @@ LGraphCanvas.prototype.setZoom = function(value, zooming_center)
this.scale = this.max_zoom;
else if(this.scale < this.min_zoom)
this.scale = this.min_zoom;
var new_center = this.convertOffsetToCanvas( zooming_center );
var delta_offset = [new_center[0] - center[0], new_center[1] - center[1]];
@@ -3870,7 +3871,7 @@ LGraphCanvas.prototype.convertOffsetToCanvas = function(pos)
LGraphCanvas.prototype.convertCanvasToOffset = function(pos)
{
return [(pos[0] + this.offset[0]) * this.scale,
return [(pos[0] + this.offset[0]) * this.scale,
(pos[1] + this.offset[1]) * this.scale ];
}
@@ -3884,7 +3885,7 @@ LGraphCanvas.prototype.bringToFront = function(n)
{
var i = this.graph._nodes.indexOf(n);
if(i == -1) return;
this.graph._nodes.splice(i,1);
this.graph._nodes.push(n);
}
@@ -3893,11 +3894,11 @@ LGraphCanvas.prototype.sendToBack = function(n)
{
var i = this.graph._nodes.indexOf(n);
if(i == -1) return;
this.graph._nodes.splice(i,1);
this.graph._nodes.unshift(n);
}
/* Interaction */
@@ -4022,7 +4023,7 @@ LGraphCanvas.prototype.drawFrontCanvas = function()
//Restore
ctx.restore();
}
//connections ontop?
if(this.graph.config.links_ontop)
if(!this.live_mode)
@@ -4133,10 +4134,10 @@ LGraphCanvas.prototype.drawBackCanvas = function()
if(!this._bg_img || this._bg_img.name != this.background_image)
{
this._bg_img = new Image();
this._bg_img.name = this.background_image;
this._bg_img.name = this.background_image;
this._bg_img.src = this.background_image;
var that = this;
this._bg_img.onload = function() {
this._bg_img.onload = function() {
that.draw(true,true);
}
}
@@ -4196,7 +4197,7 @@ LGraphCanvas.prototype.drawBackCanvas = function()
ctx.finish();
this.dirty_bgcanvas = false;
this.dirty_canvas = true; //to force to repaint the front canvas with the bgcanvas
this.dirty_canvas = true; //to force to repaint the front canvas with the bgcanvas
}
/* Renders the LGraphNode on the canvas */
@@ -4215,7 +4216,7 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
//shadow and glow
if (node.mouseOver) glow = true;
if(node.selected)
{
/*
@@ -4340,7 +4341,7 @@ LGraphCanvas.prototype.drawNode = function(node, ctx )
var text = slot.label != null ? slot.label : slot.name;
if(text)
{
ctx.fillStyle = color;
ctx.fillStyle = color;
ctx.fillText(text,pos[0] + 10,pos[1] + 5);
}
}
@@ -4580,7 +4581,7 @@ LGraphCanvas.prototype.drawConnections = function(ctx)
for(var i = 0; i < node.inputs.length; ++i)
{
var input = node.inputs[i];
if(!input || input.link == null)
if(!input || input.link == null)
continue;
var link_id = input.link;
var link = this.graph.links[ link_id ];
@@ -4635,7 +4636,7 @@ LGraphCanvas.prototype.renderLink = function( ctx, a, b, link, skip_border, flow
//begin line shape
ctx.beginPath();
if(this.render_curved_connections) //splines
{
ctx.moveTo(a[0],a[1]);
@@ -4811,7 +4812,7 @@ LGraphCanvas.prototype.touchHandler = function(event)
switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove": type="mousemove"; break;
case "touchmove": type="mousemove"; break;
case "touchend": type="mouseup"; break;
default: return;
}
@@ -4822,7 +4823,7 @@ LGraphCanvas.prototype.touchHandler = function(event)
var window = this.getCanvasWindow();
var document = window.document;
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
@@ -5021,7 +5022,7 @@ LGraphCanvas.onShowMenuNodeProperties = function( value, options, e, prev_menu,
{
var value = node.properties[i] !== undefined ? node.properties[i] : " ";
//value could contain invalid html characters, clean that
value = LGraphCanvas.decodeHTML(value);
value = LGraphCanvas.decodeHTML(value);
entries.push({content: "<span class='property_name'>" + i + "</span>" + "<span class='property_value'>" + value + "</span>", value: i});
}
if(!entries.length)
@@ -5125,7 +5126,7 @@ LGraphCanvas.prototype.showEditPropertyValue = function( node, property, options
var that = this;
var type = "string";
if(node.properties[ property ] !== null)
type = typeof(node.properties[ property ]);
@@ -5148,7 +5149,7 @@ LGraphCanvas.prototype.showEditPropertyValue = function( node, property, options
type = info.type;
var input_html = "";
if(type == "string" || type == "number")
input_html = "<input autofocus type='text' class='value'/>";
else if(type == "enum" && info.values)
@@ -5219,7 +5220,7 @@ LGraphCanvas.prototype.showEditPropertyValue = function( node, property, options
{
offsetx += options.position[0];
offsety += options.position[1];
}
}
else if( options.event )
{
offsetx += options.event.pageX;
@@ -5281,7 +5282,7 @@ LGraphCanvas.onMenuNodeMode = function( value, options, e, menu, node )
{
case "On Event": node.mode = LiteGraph.ON_EVENT; break;
case "Never": node.mode = LiteGraph.NEVER; break;
case "Always":
case "Always":
default:
node.mode = LiteGraph.ALWAYS; break;
}
@@ -5558,7 +5559,7 @@ function isInsideRectangle( x,y, left, top, width, height)
{
if (left < x && (left + width) > x &&
top < y && (top + height) > y)
return true;
return true;
return false;
}
LiteGraph.isInsideRectangle = isInsideRectangle;
@@ -5581,9 +5582,9 @@ LiteGraph.growBounding = growBounding;
//point inside boundin box
function isInsideBounding(p,bb)
{
if (p[0] < bb[0][0] ||
p[1] < bb[0][1] ||
p[0] > bb[1][0] ||
if (p[0] < bb[0][0] ||
p[1] < bb[0][1] ||
p[0] > bb[1][0] ||
p[1] > bb[1][1])
return false;
return true;
@@ -5614,7 +5615,7 @@ function hex2num(hex) {
var int1,int2;
for(var i=0;i<6;i+=2) {
int1 = hex_alphabets.indexOf(hex.charAt(i));
int2 = hex_alphabets.indexOf(hex.charAt(i+1));
int2 = hex_alphabets.indexOf(hex.charAt(i+1));
value[k] = (int1 * 16) + int2;
k++;
}
@@ -5633,7 +5634,7 @@ function num2hex(triplet) {
int1 = triplet[i] / 16;
int2 = triplet[i] % 16;
hex += hex_alphabets.charAt(int1) + hex_alphabets.charAt(int2);
hex += hex_alphabets.charAt(int1) + hex_alphabets.charAt(int2);
}
return(hex);
}
@@ -5645,13 +5646,13 @@ LiteGraph.num2hex = num2hex;
/**
* ContextMenu from LiteGUI
*
* @class ContextMenu
* @class ContextMenu
* @constructor
* @param {Array} values (allows object { title: "Nice text", callback: function ... })
* @param {Object} options [optional] Some options:\
* - title: title to show on top of the menu
* - callback: function to call when an option is clicked, it receives the item information
* - ignore_item_callbacks: ignores the callback inside the item, it just calls the options.callback
* - ignore_item_callbacks: ignores the callback inside the item, it just calls the options.callback
* - event: you can pass a MouseEvent, this way the ContextMenu appears in that position
*/
function ContextMenu( values, options )
@@ -5689,22 +5690,22 @@ function ContextMenu( values, options )
root.style.pointerEvents = "none";
setTimeout( function() { root.style.pointerEvents = "auto"; },100); //delay so the mouse up event is not caugh by this element
//this prevents the default context browser menu to open in case this menu was created when pressing right button
root.addEventListener("mouseup", function(e){
e.preventDefault(); return true;
//this prevents the default context browser menu to open in case this menu was created when pressing right button
root.addEventListener("mouseup", function(e){
e.preventDefault(); return true;
}, true);
root.addEventListener("contextmenu", function(e) {
root.addEventListener("contextmenu", function(e) {
if(e.button != 2) //right button
return false;
e.preventDefault();
e.preventDefault();
return false;
},true);
root.addEventListener("mousedown", function(e){
root.addEventListener("mousedown", function(e){
if(e.button == 2)
{
that.close();
e.preventDefault(); return true;
e.preventDefault(); return true;
}
}, true);
@@ -5742,7 +5743,7 @@ function ContextMenu( values, options )
//insert before checking position
var root_document = document;
if(options.event)
root_document = options.event.target.ownerDocument;
root_document = options.event.target.ownerDocument;
if(!root_document)
root_document = document;
@@ -5841,7 +5842,7 @@ ContextMenu.prototype.addItem = function( name, value, options )
that.current_submenu.close(e);
//global callback
if(options.callback)
if(options.callback)
{
var r = options.callback.call( this, value, options, e, that, options.node );
if(r === true)
@@ -5872,7 +5873,7 @@ ContextMenu.prototype.addItem = function( name, value, options )
close_parent = false;
}
}
if(close_parent && !that.lock)
that.close();
}
@@ -5980,23 +5981,23 @@ LiteGraph.extendClass = function ( target, origin )
if(origin.prototype) //copy prototype properties
for(var i in origin.prototype) //only enumerables
{
if(!origin.prototype.hasOwnProperty(i))
if(!origin.prototype.hasOwnProperty(i))
continue;
if(target.prototype.hasOwnProperty(i)) //avoid overwritting existing ones
continue;
//copy getters
//copy getters
if(origin.prototype.__lookupGetter__(i))
target.prototype.__defineGetter__(i, origin.prototype.__lookupGetter__(i));
else
else
target.prototype[i] = origin.prototype[i];
//and setters
if(origin.prototype.__lookupSetter__(i))
target.prototype.__defineSetter__(i, origin.prototype.__lookupSetter__(i));
}
}
}
/*
LiteGraph.createNodetypeWrapper = function( class_object )

12
utils/server.js Normal file
View File

@@ -0,0 +1,12 @@
const express = require('express')
const app = express()
// app.get('/hello', (req, res) => res.send('Hello World!'))
app.use('/css', express.static('css'))
app.use('/src', express.static('src'))
app.use('/external', express.static('external'))
app.use('/demo', express.static('demo'))
app.use('/', express.static('demo'))
app.listen(80, () => console.log('Example app listening on port 80!'))