jagenjo / litegraph.js Goto Github PK

When scrolled, mouse event position is wrong and dont touch a slot in node.

After scaling the canvas out there is a dark blue border around the initial rectangle (same size as the canvas). It is probably intentional, but I can't seem to find a way to remove or modify it. After looking through the code for the last hour, maybe someone could point me in the right direction?

I would realy appreciate it if the demo would include a complete example on how to realize something like the panel in webglstudio or mui3d nodeeditor that appears when you select a node and you can change the values/properties of each node and more

Thank you for this awesome library (Y)!

Hello and good day. Sorry if the question is silly but can you give an advice about the mistake i've got?
I've installed library throw command "npm install litegraph.js" and now i see it's folder inside of my modules folder. I imported it like this " import LGraph from 'litegraph.js' ". React shows me an error

ReferenceError: LGraph is not defined

My code:

import React, { Component } from 'react';
import {Layer, Rect, Stage, Group} from 'react-konva';
import LiteGraph from 'litegraph.js'
import LGraph from 'litegraph.js'

class MyRect extends Component
{
render()
{
var graph = new LGraph();

    return(
        <canvas id='mycanvas' width={1024} height={720}></canvas>
    );
}

}

export default MyRect;

on LGraphCanvas

and LGraphCanvas.clear are not resets the last_mouse_position

may need some refactor

Is it possible to group nodes so they can be moved together and collapse etc...?

Hi,

I can succesfully export the graph using serialize(), however it doesn't draw the connections PLUS it doesn't allow any (event) connections anymore AFTER loading the result of serialize() using configure():

Ever seen this before / any advice?
I'm not getting any errors in the errorconsole (turning on LiteGraph's debug flag doesn't provide more info either)

Leon

The resize method (just like autoresize method) just make the canvas viewport larger and larger, those its inaccurate and doesnt stay on one new size:

Try to run it on the console in a div with fixed dimensions, everytime you run resize() on the graph canvas its getting only larger and larger, so it must be not accurate.

It even works in the demo.

there should be something like a node but without any functionality and only a title to comment whole zones: This zone does this, this zone does that, example:
https://blueprintue.com/blueprint/2ti4oh1s/

"Jump" is the title of the comment section

Since google-closure-compiler is included in package.json as a dependency the global reference still remaining in the old python build script can be removed (if python build is still beeing used?)

https://github.com/jagenjo/litegraph.js/blob/master/utils/builder.py#L7

Should be replacable with reference to local node_modules. Needs testing first

compiler_path = "node_modules/google-closure-compiler/compiler.jar"

I would like to add websocket support, so it would imply at least 2 more nodes:

• websocket server ip, port, a ws/wss toggle, connect button
• websocket sender

Eventually a websocket receiver.

What do yo think?

hello,
i'd like to tell upfront that i have no expertise with node.js, so 99.99% my problems come out of this.

i tried to add a new file riccardo.js in the same directory as math.js

the content of that file is

(function(global) {
    var LiteGraph = global.LiteGraph;
    
    //******************************************************************* */
    function FirstTest() {
        this.addInput("in", "number");
        this.addOutput("out", "number");
        this.size = [80, 30];
    }

    FirstTest.title = "FirstTest";
    FirstTest.desc = "trying to add a new node";

    FirstTest.prototype.onExecute = function() {
        var v = this.getInputData(0);
        if (v == null) {
            return;
        }
        this.setOutputData(0, 5000.0);
    };

    LiteGraph.registerNodeType("riccardo/FirstTest", FirstTest);
}ricc //glMatrix
)(this);

unfortunately when i try to add a node i cannot see that in the list.

i did also add the riccardo.js in the gruntfile.js, and reinstalled the stuff before reopening it...but so far with no luck...

can u see anything obviously wrong?

btw, if yo

Hi, im currently playing with litegraph (to embed in a project).
I need async, and since onExecute() is synchronous i need to hack some async magic in there.

Looking at the source, it seems that i can simply monkeypatch the runStep function:

It seems it just loops through the nodes synchronously, so i can replace that with an async loop.

Can you let me know if my logic makes sense?

Hola jagenjo, me impresiona tu trabajo pero tengo una duda, yo tambien ando creando un Motor y le quiero implementar tambien unas "blueprints" pero llego un punto al que necesito un input de texto pero que de un output, como puedo hacer eso??

Modern node editors allow to cut/copy/paste nodes to reuse existing nodes

Removing a slot above another which has a link connected leaves an invalid link behind that is "floating" on the graph. When moving the canvas and causing a render update it also throws this error:

Uncaught TypeError: Cannot read property 'dir' of undefined
    at LGraphCanvas.drawConnections (D:\_Projects_Node\PluginBlueprint\node_modules\litegraph.js\build\litegraph.js:5809)
    at LGraphCanvas.drawBackCanvas (D:\_Projects_Node\PluginBlueprint\node_modules\litegraph.js\build\litegraph.js:5287)
    at LGraphCanvas.draw (D:\_Projects_Node\PluginBlueprint\node_modules\litegraph.js\build\litegraph.js:4990)
    at LGraphCanvas.renderFrame (D:\_Projects_Node\PluginBlueprint\node_modules\litegraph.js\build\litegraph.js:3739)
    at wrapped (D:\_Projects_Node\PluginBlueprint\node_modules\@sentry\browser\dist\index.js:3117)

I'm guessing this is caused due to the old slot index still stored in graph.links

Running the example code from the index.html produces an error in chrome. I know that this should work on the latest chrome since the demo code runs just fine. So the example should work too...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lite Graph Editor</title>
</head>
<body>
<div id="editor"></div>

<script type="text/javascript" src="litegraph.js"></script>
<script>
    var graph = new LGraph();
    var canvas = new LGraphCanvas("#editor");

    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);

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

Chrome version 61

Hi,

Firefox v66.0.5. If you press the full-screen icon at the top-right corner and then right mouse button you won't see the context menu. But if you hit F11 and enter into the full-window mode, it will work well.

Hey,

I know @kriffe is maintaing the NPM, so I'm wondering why is the NPM package not complete?

The editor.js and editor.css is not included, and the demo node files are missing.

Can you please include them?

Thanks

Where is this help defined? maybe it should be helper?

Ya que he visto que eres de Barcelona, así que me voy a tomar la licencia de relatarte el problema que he hayado en castellano. (If you prefer that I speak in English, just tell me.)

Lo primero de todo, soy fan de esta librería. Mil veces mejor que la conocida Rete.js en todo lo relacionado con la interfaz gráfica, además de que es sencilla de programar y modificar.

El caso es que quiero hacer un lenguaje de programación basado en nodos y necesito imitar el comportamiento de los bucles for, while, do-while, etc.

He intentado codificarlo usando tu demo de LiteGraph y el resultado no ha sido el esperado:

Como puedes ver, el contador se para en 8 cuando debería detenerse en 7. Aún no he encontrado el motivo por el cual esto ocurre así.

Para no tener que andar a colocar nodos y replicar mi programa, puedes cargarlo desde la consola:

graph.configure(JSON.parse("{\"last_node_id\":19,\"last_link_id\":29,\"nodes\":[{\"id\":10,\"type\":\"events/trigger\",\"pos\":[512,340],\"size\":{\"0\":140,\"1\":46},\"flags\":{},\"mode\":0,\"inputs\":[{\"name\":\"in\",\"type\":0,\"link\":25}],\"outputs\":[{\"name\":\"true\",\"type\":-1,\"links\":[13]},{\"name\":\"change\",\"type\":-1,\"links\":null}],\"properties\":{}},{\"id\":15,\"type\":\"events/trigger\",\"pos\":[840,50],\"size\":{\"0\":140,\"1\":46},\"flags\":{},\"mode\":0,\"inputs\":[{\"name\":\"in\",\"type\":0,\"link\":26}],\"outputs\":[{\"name\":\"true\",\"type\":-1,\"links\":[12]},{\"name\":\"change\",\"type\":-1,\"links\":null}],\"properties\":{}},{\"id\":19,\"type\":\"widget/button\",\"pos\":[285,297],\"size\":[164,84],\"flags\":{},\"mode\":0,\"outputs\":[{\"name\":\"\",\"type\":-1,\"links\":[27]},{\"name\":\"\",\"type\":\"boolean\",\"links\":null}],\"properties\":{\"text\":\"Reset\",\"font_size\":30,\"message\":\"\"}},{\"id\":2,\"type\":\"widget/button\",\"pos\":[103,297],\"size\":[164,84],\"flags\":{},\"mode\":0,\"outputs\":[{\"name\":\"\",\"type\":-1,\"links\":[4]},{\"name\":\"\",\"type\":\"boolean\",\"links\":null}],\"properties\":{\"text\":\"Start\",\"font_size\":30,\"message\":\"\"}},{\"id\":1,\"type\":\"events/sequencer\",\"pos\":[329,105],\"size\":{\"0\":140,\"1\":126},\"flags\":{\"horizontal\":true,\"render_box\":false,\"collapsed\":false},\"mode\":0,\"inputs\":[{\"name\":\"\",\"type\":-1,\"link\":4},{\"name\":\"\",\"type\":-1,\"link\":13},{\"name\":\"\",\"type\":-1,\"link\":null},{\"name\":\"\",\"type\":-1,\"link\":null},{\"name\":\"\",\"type\":-1,\"link\":null},{\"name\":\"\",\"type\":-1,\"link\":null}],\"outputs\":[{\"name\":\"\",\"type\":-1,\"links\":[]},{\"name\":\"\",\"type\":-1,\"links\":[28]},{\"name\":\"\",\"type\":-1,\"links\":null},{\"name\":\"\",\"type\":-1,\"links\":null},{\"name\":\"\",\"type\":-1,\"links\":null},{\"name\":\"\",\"type\":-1,\"links\":null}],\"properties\":{}},{\"id\":5,\"type\":\"events/counter\",\"pos\":[510,38],\"size\":{\"0\":140,\"1\":66},\"flags\":{},\"mode\":0,\"inputs\":[{\"name\":\"inc\",\"type\":-1,\"link\":28},{\"name\":\"dec\",\"type\":-1,\"link\":null},{\"name\":\"reset\",\"type\":-1,\"link\":27}],\"outputs\":[{\"name\":\"change\",\"type\":-1,\"links\":null},{\"name\":\"num\",\"type\":\"number\",\"links\":[19,23]}],\"properties\":{}},{\"id\":7,\"type\":\"widget/number\",\"pos\":[533,165],\"size\":[80,60],\"flags\":{\"collapsed\":false},\"mode\":0,\"outputs\":[{\"name\":\"\",\"type\":\"number\",\"links\":[20,24]}],\"properties\":{\"min\":-1000,\"max\":1000,\"value\":6,\"step\":1}},{\"id\":18,\"type\":\"math/condition\",\"pos\":[731,168],\"size\":[80,60],\"flags\":{\"collapsed\":false},\"mode\":0,\"inputs\":[{\"name\":\"A\",\"type\":\"number\",\"link\":23},{\"name\":\"B\",\"type\":\"number\",\"link\":24}],\"outputs\":[{\"name\":\"out\",\"type\":\"boolean\",\"links\":[25]}],\"properties\":{\"A\":8,\"B\":6,\"OP\":\"<=\"}},{\"id\":17,\"type\":\"math/condition\",\"pos\":[729,53],\"size\":[80,60],\"flags\":{\"collapsed\":false},\"mode\":0,\"inputs\":[{\"name\":\"A\",\"type\":\"number\",\"link\":19},{\"name\":\"B\",\"type\":\"number\",\"link\":20}],\"outputs\":[{\"name\":\"out\",\"type\":\"boolean\",\"links\":[26]}],\"properties\":{\"A\":8,\"B\":6,\"OP\":\">\"}},{\"id\":9,\"type\":\"basic/watch\",\"pos\":[1056,50],\"size\":{\"0\":140,\"1\":26},\"flags\":{},\"mode\":0,\"inputs\":[{\"name\":\"value\",\"type\":0,\"link\":12,\"label\":\"null\"}],\"properties\":{}}],\"links\":[[4,2,0,1,0,-1],[12,15,0,9,0,0],[13,10,0,1,1,-1],[19,5,1,17,0,\"number\"],[20,7,0,17,1,\"number\"],[23,5,1,18,0,\"number\"],[24,7,0,18,1,\"number\"],[25,18,0,10,0,0],[26,17,0,15,0,0],[27,19,0,5,2,-1],[28,1,1,5,0,-1]],\"groups\":[],\"config\":{},\"version\":0.4}"));

Muchísimas gracias de antemano por todo, 🚀

Hi!

I have two questions.

Why is it necessary to set the node.id to -1 in LGraph.prototype.remove = function(node)?
I have implemented a onNodeRemoved(node) in my editor and the id is set to -1 my editor does not more find the particular node in it's own node collections.

Why does onNodeDeselected() not have a parameter? I changed it to onNodeDeselected(n) in all calling parts in litegraph.js in order to have my editor to be able to react on deselection of particular nodes.

Well, great work by the way. I think I will soon add some minor pull requests once I understand your intentions a little better.

Thanks
Sebastian

And LLink.serialize never used?

Perhaps the toposort library could be used for automatic node placement (if not already implemented)?

Or perhaps it could be useful in some other way.

https://www.npmjs.com/package/toposort

Used in https://github.com/GooTechnologies/shader-graph

Hola. Me gustaria saber como hacer para obtener un JSON del metodo serialize, pues intente con toString, hice que escribiera en consola y lo unico que hace es poner [object Object] lo mismo hice pasa cuando guardo una variable con el metodo serialize e intento ponerlo en JSON me pone lo mismo... PS:Uso JSON.stringify

I'm thinking of using this similar model to the Unreal Engine to create a Schema editor for Dgraph. But I need to import to React-JS.

Cheers.

Hi
I've written a rotation function
How can I rotate the cube with this node?

Hello,
i wanted to ask what is the best way to create a list of objects.

so far i am creating an empty list and pushing it back to it as shown in the picture ... but it is a little verbose. Any better way of achieving it?

thanks in advance for any help. (and compliments, the lib is very well structured!)

The first link in the chart is made with id = 0. The link id is stored in the node input, which is 0. When I call getInputNode(0), there is some code:

if(!input || !input.link)
		return null;

The second case !input.link evaluates to !0, which evaluates to true.

Solution:

change the id of the first link to 1, or change the code to

if(!input)
    return null;
if(input.link == null)
    return null;

Olà!
I run litegraph demo on my local machine in Chrome 64.
I'm trying to use my nanoKontrol2, it is seen, but I don't see the midi messages.
And slot is undefined as seen on the image.

Congratulations for this software!

Would it be possible to move the litegraph editor example into a separate repo? Feels like it could be separated for better modularisation

I'm not finding any information regarding removing the default double-click functionality in empty areas on the node graph. Is it possible? I'd like to remove access to the search bar.

How can I add event listener on LiteGraphNode ? And can you also tell how to remove register node types

Hi there,

Is there a way or a method where I can work out a read-only mode for the graph?

For large and complicated graphs, it would be helpful to have the link highlighted at mouseover/hover.

There is many tools can be used in a open source project
I suggest to use these tools to improve code maintianbility:

• linter: eslint
  for style check
• formatter: prettier + lint-staged
  for code formatting
• changelog: standard-version
  for generate changelog from git commit messages
• CI: circle-ci / travis-ci
  for automatic build any deploy
• web hosting: github pages
  for host project home page
• core review: codeclimate / lgtm
  for discover matianbility isssues
• static type check: typescript
  replace eslint with tslint if choose to use typescript

Hola, Que tal?
Me gustaria saber como hago para cambiar el shape por defecto de los nodes, intente cambiar el "this._shape" pero no dio ningun resultado...

If you go to the demo application and make a few nodes and link them together and serialize the graph (graph.serialize()), look at the amount of links that were made. Then go and change and change a few of the links around but keep the amount of visible links the same, when you go and serialize the graph again the number of links from the serialized objecct has increased but the actual links on the graph is still the same.

https://imgur.com/DG6i027

Should a link not be discarded when it is invalidated?

Right now we have categories, but I think types are missing.

Types can be defined at creating nodes and could be used to better destinguish how to represent them visualy in the following ways (similar to unreal engine 4 blueprints):

Better context approach
Nodes that act as "Variables"
Types can have icons, those appear left to node name
Different context colors, if you work with events, functions, variables, widgets or something other

Example:
https://blueprintue.com/blueprint/_dqx9spf/

Events are red, variables have their own styling, functions are clearly visible as functions.

adding touch drag events alongside the mouse events would allow mobile compatibility.

Have started an experimental branch for a modular structured project. https://github.com/kriffe/litegraph.js/tree/1712125_ES6_experiment

• Separate LGraph, LGraphCanvas, LGraphNode into separate files
  Untangle dependencies

• Add all calls to container
  LITEGRAPH.LGraphNode... etc

• Possibility to import project as ES6 Module (fully supported in 2018)
  Limit API from outside (what is really needed?)
  Add webpack for bundling of projcet
  Include as: import LITEGRAPH from 'litegraph.js'

This will need to be a major release and break backward compatibility.
@jagenjo How will this impact https://github.com/jagenjo/webglstudio.js ?

I want to know how I can use the right mouse button to open the menu that creates the node in the visual editor.
I tried to do this, but nothing happened.
document.getElementById("Graph_Edit").addEventListener("mousedown",eventHandler,false); function eventHandler(event) { graphCanvas.processMouseDown(event); }
I saw your Demo, in which i can right click to create or delete a node.
Thank you very much for helping me solve this problem.

First I connect an output to an input and that works.
Then I connect another output to the same input.
The second connection is created but this causes the first connection to break.

Is it possible to connect two outputs to one input?

The input data of connected nodes are not updated until after the onAction event. I have even tried moving the trigger to after I set the output data of the node.

Lachee Console Node

//Show value inside the debug console
function LConsole()
{
	//this.mode = LiteGraph.ON_EVENT;
	this.size = [80,30];
	this.addInput("log", LiteGraph.EVENT);
    this.addInput("cnt", 0, { label: "Message"});
    this.cnt = "";
}

LConsole.title = "Lachee Console";
LConsole.desc = "Show value inside the console";

LConsole.prototype.onAction = function(action, param)
{
    console.log("Action:", action );
    console.log("Params:", param );
    console.log("Self:", this );
    console.log("CNT: " + this.cnt );
    console.log("A: ", this.getInputData(0));
    console.log("B: ", this.getInputData(1));	
    
	this.inputs[1].label = this.cnt;
}

LConsole.prototype.onExecute = function()
{
    if (this.inputs[1])
        this.cnt = this.getInputData(1);
}

LConsole.prototype.onDrawBackground = function(ctx)
{
	//show the current value
	this.inputs[1].label = this.cnt;
}

LiteGraph.registerNodeType("basic/lconsole", LConsole );

On Message Node

function OnMessageEvent()
{
	this.addOutput("on_message", LiteGraph.EVENT);
	this.addOutput("author", 0);
    this.addOutput("content", 0);
    this.author = "Lachee";
    this.content = ".ping";
    this.triggered = false;
    this.clonable = false;
    this.resizable = false;
    this.color = LGraphCanvas.node_colors.purple.color;
    this.bgcolor = LGraphCanvas.node_colors.purple.bgcolor;
}

OnMessageEvent.title = "On Message";
OnMessageEvent.desc = "Occurs when a message is sent";

OnMessageEvent.on_color = "#AAA";
OnMessageEvent.off_color = "#222";


OnMessageEvent.prototype.onStart = function() {}

OnMessageEvent.prototype.onDrawBackground = function()
{
	this.boxcolor = this.triggered ? OnMessageEvent.on_color : OnMessageEvent.off_color;
	this.triggered = false;
}

OnMessageEvent.prototype.onExecute = function()
{
	var dt = this.graph.elapsed_time * 1000; //in ms
	var trigger = message_queue.length != 0;

    if (trigger)
    {
        console.log("TRIGGER");
        this.setOutputData(1, "Lachee");
        this.setOutputData(2, message_queue[0]);
        this.trigger("on_message", message_queue[0]);
        message_queue = [];
        this.triggered = true;
    }
}

A feature comparison with the other popular node editor?

Like in unreal engine 4 blueprints, a user should be able to do the following:

Click on a point in the graph, hold left click and move the mouse to create a select area to select multiple nodes easily trough the select area

This way you can manage multiple nodes much more easily.

First, sorry for my english, but it's not my natural tongue, and I'm pretty bad at writing it.
I tried your code example in the README and it doesn't work.
I think the bug come from this instruction

node_const.setValue(4.5); 

The second problem come from the popup navigation that appears at the bottom of the page
I can't add a simple basic node.

I've tried on chromium

Chromium | 70.0.3538.77 (Build officiel) Built on Ubuntu , running on Ubuntu 16.04 (32 bits)