riicchhaarrd/nodes

Quick example of a Node system in Javascript and Canvas

nodes

Quick example of a Node system in Javascript and Canvas.
Uses Vue to create a context menu, but it's a very small part and easily removed. It's mostly written in pure HTML / JS / Canvas.

nodes's Issues

Resize canvas on window resize

Adding JSDoc for improved type checking

Simple example from PlayCanvas:

/**
 * @class
 * @name pc.Vec3
 * @classdesc A 3-dimensional vector.
 * @description Creates a new Vec3 object.
 * @param {number|number[]} [x] - The x value. If x is an array of length 3, the array will be used to populate all components.
 * @param {number} [y] - The y value.
 * @param {number} [z] - The z value.
 * @example
 * var v = new pc.Vec3(1, 2, 3);
 */
function Vec3(x, y, z) {
    if (x && x.length === 3) {
        this.x = x[0];
        this.y = x[1];
        this.z = x[2];
    } else {
        this.x = x || 0;
        this.y = y || 0;
        this.z = z || 0;
    }
}

This allows TypeScript/VSCode to deduce all types for near-perfect type checking/autocompletion

Nodes flip under mouse when dragged, ignoring delta offset

Fix/update graph after deletions

Just working on the JS module structure, so I am currently not sure if this is my bug (because I am not finished with converted to JS modules) or generic bug:

Split code into ES6 modules

It would be nice to have less code in one file, so refactoring/version-control is easier

Only IE doesn't support modules: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

Save graphs in localStorage + reusing

It would be nice to be able to save graphs and repurpose existing graphs like prefab nodes

Scissor to cut/remove links

1. If not on node/signal: Drag/drop showing a line
2. Collision check between Bezier/Line
3. Cut links for every intersection