Code Monkey home page Code Monkey logo

egui-snarl's Introduction

egui-snarl

Crate for creating and manipulating node-graph UIs. It contains all necessary features and more are planned.

Why "snarl"?

Because that's how any complex visual graph looks like.

Features

  • Typed data-only nodes. Snarl is parametrized by the type of the data nodes hold. This type may be an enum of the node variants or customizeable node constructor type, it's always author's choice.

  • Viewer trait to define behavior and add extra data to UI routine. SnarlViewer trait is parametrized by the type node type. It decides node's title UI, how many pins node has and fills pin's UI content. Demo example showcase how pin can have drag integer value, text input, button or image, there's no limitations since each pin's content is whatever viewer puts in provided egui::Ui.

  • Node layout is divided to five spaces with both pre-defined and custom content.

    1. Header - top of the node, features collapsing button if SnarlStyle::collapsible is true and user-defined content - label with node name by default.
    2. Input pins are placed on the left below the header. Each pin contains a shape on the left edge, shape can be intracted with to connect/disconnect the pin and user-defined content after it.
    3. Body of the node is placed in the center, it is optional but comes in handy for some node kinds. Contains only user-defined content.
    4. Output pins are placed on the right below the header. Same as input pins but pin shape goes to the right edge.
    5. Footer is placed below other spaces, similar to body it is optional and contains only user-defined content.
  • Context menus for nodes and graph background. Right-clicking on node, if configured, opens context menu filled by viewer's method. The method is provided with Snarl reference and node index. It may be used to add menu options to remove node, configure it or anything else. Right-clicking on background, if configured, opens context menu filled by viewer's method. The method is provided with Snarl reference. It may be used to add/remove nodes configure whole graph or anything else.

  • UI scaling. egui does not support UI scaling, but to provide best UX egui-snarl supports scaling via scaling of independent UI elements, this works with some artefacts.

  • User controlled responses for wire connections. When new wire is connected in UI the viewer is notified and decides what happens. It may create that connection, ignore it, add more nodes, play beep sound or send e-mails.

  • Multiconnections. Connect or reconnect many pins at once. When dragging new wire, hover over pin of the same side while holding Shift to add wire from it into bundle. Start dragging from pin while holding Ctrl (Cmd on Macos) to yank existing wires from it and drag in to another pin.

  • Beautiful wires between nodes. egui-snarl use carefuly crafted formula to draw wires that can be customized to scale differently using SnarlStyle.

  • Configurable background pattern. Having blank color background may be desirable, however some faint background with pattern helps filling visual emptiness. Configure background in SnarlStyle, use provided patterns like Grid or custom function.

  • Serialization. Snarl structure stores only the graph with placed nodes and wires between them. This makes it suitable for easy serialization and deserialization. It supports serde so pick your own format.

Example

demo example shows some of the features of the crate.

demo

Web Demo

Noise GUI by @attackgoat

https://attackgoat.github.io/noise_gui/

egui-snarl's People

Contributors

zakarumych avatar nrot avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.