naetverkjs/naetverk

JavaScript framework for visual programming

Naetverk.js

---

---

JavaScript framework for visual programming

Warning

Do not use this framework before version 1 is released. It is currently still in development and not all updates will be compatible.

Introduction

Naetverk is a modular framework for visual programming. Naetverk is forked from the fantastic rete.js framework, that allows you to create node-based editor directly in the browser.

Why a different branch? - I have some ideas that I follow which are in conflict with the original implementation. We decided to move the individual plugins in to one mono repository to have a tighter connection between them. They also follow the same version number on release. So it should be easier to manage your dependencies.

Plugins

Name	Version	Description	Extends	Readme / Docs
@naetverkjs/naetverk		Base library that allows the creation of node-based editors for visually programming or sequential scripting	-	Readme
@naetverkjs/connections		Plugin to render the connections between nodes	@naetverkjs/naetverk	Readme
@naetverkjs/area		Plugin to draw the network on a configurable background with limited zoom and grid snapping	@naetverkjs/naetverk	Readme
@naetverkjs/lifecycle		Registers additional events that can be used while working with a component	@naetverkjs/naetverk	Readme
@naetverkjs/keyboard		Registers keyboard input and maps them to events	@naetverkjs/naetverk	Readme
@naetverkjs/arrange		Rearranges the node based on their size on the board	@naetverkjs/naetverk	Readme
@naetverkjs/history		Plugin that adds the ability to revert actions	@naetverkjs/naetverk	Readme
@naetverkjs/selection		Plugin that adds the ability to multiselect nodes with a selection rectangle	@naetverkjs/naetverk	Readme
@naetverkjs/comments		Plugin that allows the creation of comments and groups around nodes	@naetverkjs/naetverk	Readme

Framework Renderers

Name	Description	Extends	Readme / Docs
Angular
@naetverkjs/angular-renderer	Angular Module to render basic nodes		Readme
React
@naetverkjs/react-renderer	React Module to render basic nodes		Readme

Documentation:

https://naetverkjs.github.io/documentation/

naetverk's Issues

React e2e does not run in CI

It looks like that in travis the React e2e test does not use the locally available naetverkjs library but looks for it in node_modules.

Bug: SelectionPlugin prevents input changes

The Selection Plugin stops the default handling and the propagation:

 e.preventDefault();
 e.stopPropagation();

This results in the bug that when active - the input values can not be changed.

Add Comment Plugin

Add a title to nodes instead of the component name

A node should provide a name. Instead of just a key

Enabled the dragging of multiple selected nodes

   /**
     * Enabled the dragging of multiple selected nodes
     */
    editor.on('nodeselect', (node) => {
      editor.trigger('nodeselected', node);
      if (editor.selected.contains(node)) {
        return false;
      }
    });

Should be included in to the SelectionPlugin

Update Peer dependency

Some libraries and renderer do have peerDependencies that should be updated.

Code Coverge in CI is not reported correctly.

It seems like that SonarCloud does not read the code coverage report correctly. Let's investigate.

Collaboration Plugin

history-plugin - Add component changes to history

Currently, the history plugin is only recording changes for node movement, node creation / deletion and connection changes. There is the need to add the change on components to the history.

Inline Comments are scaled up to 100% when zoomed out

Cleanup Tools

In tools, we have scripts for building and publishing that should share code and have some functions that are not used anymore. Also the build.config.js is not used since we use the build in nx build methods.

Update Library builds from 0.8.50 to 0.8.52

Comment Plugin - Enable Resize of frame comments

Add frame categories

Frames are currently only a comment. To allow a broader use case - they could be renamed, and a category should be added.

Selection plugin selects whole board after selection was made

Fix typing issues in engine.ts

In the engine.ts file are two methods - abort() and lock() that lead to errors:

public async abort() {
    return new Promise((ret) => {
      if (this.state === State.PROCESSED) {
        this.state = State.ABORT;
        this.onAbort = ret;
      } else if (this.state === State.ABORT) {
        this.onAbort();
        this.onAbort = ret;
      } else ret();
    });
  }

 private async lock(node: EngineNode) {
    return new Promise((res) => {
      node.unlockPool = node.unlockPool || [];
      if (node.busy && !node.outputData) node.unlockPool.push(res);
      else res();

      node.busy = true;
    });
  }

They both handle the Promise execution in a way that is not familiar to me, so I need to investigate. But I also do not want to forget it - thats the reason why I created this issue.

Update Comment Plugin

Todos

• Work with other plugins
  • Selection
• Enable resize
• Update naming

Update default design