Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Martmists-GH/compose-node-editor

Open more actions menu

Repository files navigation

Compose Node Editor

Compose Node Editor is a Compose Multiplatform library for designing Node Editors.

Screenshots

A picture of the library, showing three nodes, and the sidebar for a selected node

Usage

Gradle:

repositories {
    // Available on Maven Central
    mavenCentral()
    
    // Fallback Repository
    maven("https://maven.martmists.com/releases")
}

dependencies {
    implementation("com.martmists.grapheditor:compose-node-editor:1.0.2")
}

Code:

val inputNode = NodeDefinition(
    "Input", 
    ports=listOf(PortDefinition("out", PortKind.Output))  // Nodes are expected to have at least one port
)
val outputNode = NodeDefinition(
    "Output", 
    ports=listOf(PortDefinition("In", PortKind.Input)), 
    properties = listOf(IntProperty("Value", 1, 0, 5))  // Nodes can have properties, which show up in the right sidebar
)
val splitNode = NodeDefinition(
    "Split", 
    ports=listOf(  // Nodes can have both input and output ports, and any number of them
        PortDefinition("In", PortKind.Input), 
        PortDefinition("Out 1", PortKind.Output), 
        PortDefinition("Out 2", PortKind.Output)
    )
)

val allNodes = listOf(inputNode, outputNode, splitNode)

// 1. Create a graph
val graph = Graph<Unit>(allNodes)  // Graphs support storing custom data on nodes, but you can use Unit if you don't need it.

// 2. Add predefined nodes if necessary
val n1 = graph.addNode(inputNode, Offset(100f, 100f))
val n2 = graph.addNode(outputNode, Offset(300f, 200f))

// 3. Add connections if necessary
graph.tryConnect(n1, n1.definition.ports.first(), n2, n2.definition.ports.first())

// 4. Obtain a GraphState and pass it to NodeGraph
singleWindowApplication {
    val state = remember { GraphState(graph) }

    // If you don't want to manually check for updates to the graph state, all changes are published on the `graph.events` Flow.
    // The only exception to this is node names as of right now since they have custom handling.
    LaunchedEffect(Unit) {
        graph.events.collect {
            println(it)
        }
    }
    
    // To customize colors or fonts, you can use the composition-local LocalNodeGraphStyle
    NodeGraph(state)
}

Contributing

Feel free to fix any TODOs you find, or add functionality/features you'd like to see!

About

A Node Graph Editor for Compose Multiplatform

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Morty Proxy This is a proxified and sanitized view of the page, visit original site.