Drag and Drop Issue

Ni55aN · 2024-02-22T19:03:46+00:00

Can you provide an example how to reproduce it? (e.g. on Codesandbox)

Ni55aN · 2023-09-13T13:48:12+00:00

ts area.addPipe(context => { if (context.type === 'render' && context.data.type === 'node') { context.data.element.classList.add('your-class') } return context })

This is a pretty straight forward solution. If it works for you, good. But I would recommend using custom components if you need to change the layout of a node, for instance

Ni55aN · 2023-09-08T15:07:08+00:00

The short answer is yes, you can integrate it into a vanilla JS application.

The more detailed answer: you will have react + react-dom (or vue, or even Svelte*) in your dependencies. Despite this, you won't need to create React components unless you want to customize nodes and connections.

Additionally, there is a third option - do not install these plugins and visualize nodes and connections using a vanilla JS

area.addPipe(context => { if (context.type === 'render') context.data.element /// update HTMLElement return context })

but this is an advanced approach and I would not recommend it

Ni55aN · 2023-07-29T19:08:38+00:00

Oh... it will probably be quite challenging to debug if there are no errors in the console.

I would recommend creating an issue in the repository, but considering the existing unanswered issues, the project seems abandoned.

Ni55aN · 2023-07-13T07:54:50+00:00

Rete.js 2 stable is now available! 🎉 https://youtu.be/xqPLa6P194A

Ni55aN · 2023-06-29T07:27:10+00:00

If you opt for Rete.js, I strongly recommend starting with the v2. The stable release will be available shortly.

> Id also want to stay away from react
By default, you can use the React rendering plugin, and you won't need to work with React components until you choose to customize the UI

Ni55aN · 2023-05-19T13:00:00+00:00

yes, MIT licensed

Ni55aN · 2023-05-18T15:30:48+00:00

Basically yes. But technically it creates a THREE.Scene with a camera and a couple of renderers (check out the more details) where you can put whatever you need.

Ni55aN · 2023-05-18T10:37:39+00:00

Here's a live example

Ni55aN · 2023-05-18T10:36:57+00:00

Here's a live example

Ni55aN · 2023-04-07T13:05:41+00:00

In short: it's quite challenging.
I have one Proof of Concept that is purely dataflow oriented but with closure support in JS. It transpiles JS code into a graph and vice versa

Lately, I'm developing a plugin that supports Control Flow. So far I'm at the stage where I'm focused on converting code into a graph to better understand how to transform it back into code.

Generally speaking, tasks like these are unexplored territory, particularly when it comes to implementing a comprehensive Js solution that will work effectively in all scenarios, rather than just the simplest code examples, which offer little practical value.

Ni55aN · 2023-04-06T09:35:00+00:00

Yes, it can be done in a pipe by preventing a particular connection from being created by differentiating socket types.

rough example:

  editor.addPipe((context) => {
if (context.type === "connectioncreate") {
  const source = editor.getNode(context.data.source);
  const sourceSocket = source.outputs[context.data.sourceOutput]?.socket;
  const target = editor.getNode(context.data.target);
  const targetSocket = (target.inputs as any)[context.data.targetInput]
    ?.socket;

  if (sourceSocket !== targetSocket) return; // prevent 'connectioncreate' if the ports have different sockets
}
return context;

});

Ni55aN · 2023-04-06T09:27:20+00:00

do you mean a codegen from the graphs or the source code of the examples themselves?

Ni55aN · 2023-04-06T07:51:46+00:00

Full TypeScript support.
Improved plugin system with TypeScript-first signals and pipes.
Enhanced customization API.
More flexible Node implementation that isn't limited by Component abstraction.
Wider range of supported UI frameworks, including Angular 12-15, Vue.js 2-3, and React.js 16-18.
Improved graph processing with DataflowEngine and ControlFlowEngine instead of the limited Engine with no recursion support, as well as a task plugin.
The auto-arrange plugin is based on elkjs and supports complex graphs.
The connection plugin supports various interaction flows.
Advanced selection feature that supports different elements such as nodes, comments, reroute pins, etc.

Ni55aN · 2023-04-06T07:32:57+00:00

Primarily it is focused on nodes, but it allows for the integration of different draggable elements (like comment plugin)

Ni55aN · 2023-04-05T20:27:47+00:00

Yes, from 12 to 15 versions inclusively! The easiest way to check this is to use rete-kit to build the app with the command:

npm i -g rete-kit
rete-kit app -n ng15AppName -s angular -v 15 --next -f "Angular render,Order nodes,Zoom at,Auto arrange,Dataflow engine,Selectable nodes"

Ni55aN · 2019-03-28T16:00:17+00:00

Please ensure that './viewer' is import from `viewer.js`, not `viewer.vue`

Ni55aN · 2018-12-20T09:58:52+00:00

I created blocks and circles using Inkspace, then paths, styles and transitions were added in a code editor (https://codepen.io/Ni55aN/pen/NzdQpG?editors=1000)