Graph Component | Modular Node/Edge Editor

Hey,
I am working on project that needs an interface for modular components that involves connecting nodes and edges. I have looked at the plugin host demo, but needed some more features.
Searching through this forum, there seem to be an interest in such component, so, I am sharing the one I created.

The code of the component and a demo application is available on Github:

https://github.com/hkarim/JUCE-Graph-Component

Here is a screenshot of the demo application:

Some Features

  • Each node can be scaled individually, zoom-in cmd + '+', zoom-out cmd + '-', or zoom to original scale cmd + '0'
  • Multi-select using keyboard or mouse is supported
  • Special type of node that can host any component
  • Backed by a simple graph that supports communication between nodes
  • Sample application to preview the component and how to use it
  • Very simple theming for changing the overall components look and feel

Comments and feedback are most welcome.

5 Likes

This is almost creepy - I’ve been working on this exact same thing the last week or so. Your solution is more complete than mine, so I’ll look into seeing if I can contribute anything to yours and likely migrate everything over to your system - pending one issue…

You seem to have licensed the code as GPL, so unfortunately that reduces its usefulness for a large number of JUCE devs (such as myself) pursuing commercial applications. Any chance of changing the license to a permissive one, such as MIT or BSD?

I just want to comply with Juce license, if MIT or BSD doesn’t violate the original Juce license then I am OK. Does it?

Using an MIT or BSD license for your work shouldn’t cause any issues.

OK. I changed the license to MIT

2 Likes

I have also written a system like this. However, I’ve never figured out how to serialize it, because XML type structure is not well suited to graphs. Do you have a way to encode the data model for this component in a ValueTree?

How about storing all nodes in a list and all connections in another?

@jzrake Please see the new main branch for recent updates. The demo plugin can save and load the state in a ValueTree now.

Recently updated to the latest JUCE release. Also added a new demo VST3 plugin with some MIDI processors.

1 Like

Thank you for sharing, Hossam. I’m also working on a node editor in JUCE, and I’m curious if it might be possible to integrate node classes directly into JUCE’s core library. There seems to be growing interest in creating node-based applications, and considering the success of tools like Blender’s Geometry Nodes and Shaders, Unreal’s Blueprints, and Godot’s Orchestrator, this could save others from reinventing the wheel. I believe you used the Audio Plugin Host (JUCE/extras/AudioPluginHost/Source/UI at master Ā· juce-framework/JUCE Ā· GitHub) from JUCE as a starting Point. This also maybe a good start to merge it into the JUCE core framework.

1 Like

This looks very nice, Dirk, great job.

Is it some private project of yours?

Hey rbdr, yes this is one of my private projects i am currently working on. i designed it in Figma and started to merge each single Module back into C++ inside JUCE. Some nice details i already added like changing values with wheels and touch gestures in combination with key modifiers.

IkarusValueChanges

There are also some few new Modules and UI changes available.

Unfortunately i don’t have much time to work on it, so i just spend two days on the design and another on the first JUCE implementation. That’s why i asked for a possible Node framework inside JUCE.

Impressive design!
So are those pics only Figma screenshots for the moment?

Still, the design, breaking things into classified parts etc is a big part of the development process.
It goes easier when actually implementing them next (guess, ideally there should be some ā€˜skin’ description ā€˜script’ that gets C++ generated or something like that to make complex controls coding easier)

The second last Screenshot with the changing Values is a real Implementation in C++ and JUCE. And yes it needs a kind of UI Architecture to work systematic in order to easily modularize the Node Modules and share UX and UI behavior over all Components, but that should be easy doable.

Fantastic then! I’d definitely love to see that in action.

I was trying to set up a dynamically configurable system of entities in Juce myself and started doing some research recently and found this thread.

Actually, looking at the nodes and guessing their meaning, there’s some overlapping with my experiments as well.

Nice job, it’s a pity you had to postpone it.

Hi, how to make wires to split? From block timer it goes to note on and delay

It’s not a ā€œsplitā€, you just connect any source to any destination and if you want to remove a connection you hold ctrl and right click and draw through a connection like in Blender.

Hi,how to make such modules with input and output?

do you have some source code? for example timer

Inputs and outputs are sockets. You just create a Socket class with different types like input and output.