gimelstudio/gsnodegraph

Powerful node graph widget for wxPython GUIs

gsnodegraph

Powerful custom node graph widget for wxPython.

Highly inspired by the overall look of the nodes in Blender 3D, if you couldn't tell. So if you've always wanted to find a node editor similar to Blender's, this is likely your repo. ;)

It is specifically aimed towards an image-editing node editor setup and is setup with styling specific to Gimel Studio by default. However, many colors and settings can be changed via the constants.py file and/or it can be adapted and changed for other node graph use-cases with a little knowlege of wxPython.

Usage

Simply pip install gsnodegraph and run the main.py found in this repo to see the node graph demo. The nodegraph.py file shows how you can customize and override the node graph. The nodes.py file in the nodes folder gives a demo of how to setup nodes to work with the node graph.

For a real-life example of this node graph in action, see Gimel Studio a node-based 2D image editor for which this node graph is originally intended.

Status & Roadmap

Most of the functionality for a basic node graph is already here, with more features and fixes planned.

Roadmap/TODO

• Zoom/pan canvas (still buggy)
• Basic node drag n' drop
• Box selection
• Multi-selection (still buggy)
• Sockets and wires
• Properties-based
• Multi-input and outputs
• PYPI package
• Node delete, duplicate and mute
• Refactor out context menu so that it can be created/edited outside of this package
• Ctrl+LMB to set node connected to Output #98
• Support for image thumbnails with expand and collapse functionality #24
• Support for different input datatypes #83
• Auto connect nodes when dropped/dragged over a wire
• Keyboard shortcuts
• Configurable settings via constants.py
• Lock zoom to a predefined range
• Node groups (or "nodes inside of a node") #81
• Swap node inputs functionality

Extra possiblities (may or may not happen...or may not be included in this package)

• Nodegraph minimap?
• Support for multiple output nodes?
• Auto-arrange nodes in node graph (organize the nodes)?
• Set image as background of node graph (WIP)

Contributing

All contributions are welcome! Feel free to open a PR or ask questions. :)

Releasing on PyPI

Navigate to the root directory

Run py -m build

Then run twine upload dist/* and follow the prompts.

License

gsnodegraph is licensed under the Apache 2.0 license. Feel free to use this as a starting point, etc for your own projects.

gsnodegraph's Issues

Rework multiple select for nodes

Currently, the multiple node select functionality feels buggy due to the way that multi select is implement.

This issue should fix the bugs to provide a better multi select experience.

Ctrl+click does not validate datatypes

Ctrl+clicking a node does not validate that the datatypes are compatible.

Create new checkerboard bitmap to better match the new interface colors

Create a new checkerboard bitmap to better match the new interface colors and generate it as a pyembeddedimage.

Generalize code to not be so opinionated

Right now, the nodegraph is very opinionated for Gimel Studio's purpose. We should move the non-general code to Gimel Studio itself and change the api to allow gsnodegraph to be used for other projects.

A few rough ideas:

• Make "hooks" to allow custom stuff to be drawn on nodes, etc
• Make the widget to not be so opinionated in how it reads properties, how the registry is setup, etc

Ctrl + Clicking should cycle through outputs

Ctrl + clicking should cycle through outputs of the node (like in blender)

Node socket snapping

Similar to other node graphs found in software like blender, etc the wires should snap to sockets when they are dragged close to an input socket.

Add Ability to set node wire curvature

Add the ability to set node wire curvature.

Optimizations

Cache last node and only send node property panel update event if the node selection has changed

Add label cutoff with ellipse and/or resize node for nodes with long names

Fix this:

Auto connect nodes when dropped

When a node is dropped between two connected nodes, auto-connect the node in-between them. This is similar to Blender's interaction.