{"id":13662960,"url":"https://github.com/cemuka/UnityRuntimeNodeEditor","last_synced_at":"2025-04-25T13:30:54.791Z","repository":{"id":38350733,"uuid":"324561096","full_name":"cemuka/UnityRuntimeNodeEditor","owner":"cemuka","description":"Unity runtime node editor using with Unity UI.","archived":false,"fork":false,"pushed_at":"2023-06-20T05:55:20.000Z","size":9234,"stargazers_count":433,"open_issues_count":0,"forks_count":64,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-05T12:04:13.583Z","etag":null,"topics":["editor","framework","graph","node","node-editor","runtime","unity","unity3d","unity3d-plugin"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cemuka.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-12-26T13:28:51.000Z","updated_at":"2025-04-04T09:29:44.000Z","dependencies_parsed_at":"2024-01-14T15:21:47.398Z","dependency_job_id":"80faf979-1048-45ee-b57a-ec96be11462a","html_url":"https://github.com/cemuka/UnityRuntimeNodeEditor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cemuka%2FUnityRuntimeNodeEditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cemuka%2FUnityRuntimeNodeEditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cemuka%2FUnityRuntimeNodeEditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cemuka%2FUnityRuntimeNodeEditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cemuka","download_url":"https://codeload.github.com/cemuka/UnityRuntimeNodeEditor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250824872,"owners_count":21493355,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editor","framework","graph","node","node-editor","runtime","unity","unity3d","unity3d-plugin"],"created_at":"2024-08-02T05:02:13.367Z","updated_at":"2025-04-25T13:30:51.091Z","avatar_url":"https://github.com/cemuka.png","language":"C#","funding_links":[],"categories":["Open Source Repositories","C\\#"],"sub_categories":["Node Graph"],"readme":"![node editor](./img/node_gif1.gif)\n\n## Runtime Node Editor\nAlmost every node editor made in unity is using unity editor to make it.  \nMy goal was make it in runtime with unity ui.\n\n- Socket based connection\n- Load and save a graph using node serializer\n- Context Menu for graph, nodes and connections\n- Event based notification\n- Pan and zoom\n- Multiple editors can be spawned in a scene\n- Create graph by api or custom prefab\n- Legacy and new Input System \n\nUnity version 2021.3.3f1\n\n![node editor](./img/node_gif2.gif)\n\nRGB color display example\n\n![node editor](./img/color.png)\n\n## Example\nSimply extend the `NodeEditor`.\n\n```c#\npublic class ExampleNodeEditor : NodeEditor\n{\n    public override void StartEditor(NodeGraph graph)\n    {\n        base.StartEditor(graph);\n\n        //  make your custom initialization here\n    }\n}\n```\n\nCreate graph using the api, graph will stretch to holder object. (no prefab involves)\n\n```c#\npublic class ApplicationStartup : MonoBehaviour\n{\n    public RectTransform        editorHolder;\n    public ExampleNodeEditor    editor;    //  asigned in unity from hierarchy\n\n    private void Start()\n    {\n        var graph = editor.CreateGraph\u003cNodeGraph\u003e(editorHolder);\n        // var graph = editor.CreateGraph\u003cNodeGraph\u003e(editorHolder, bgColor, connColor);\n        editor.StartEditor(graph);\n    }\n}\n\n```\nYou may want to use your own custom graph and prefab as well.\n\n```c#\npublic class ApplicationStartup : MonoBehaviour\n{\n    public RectTransform        editorHolder;\n    public ExampleNodeEditor    editor;\n\n    private void Start()\n    {\n        editor.StartEditor(graph);\n    }\n}\n```  \nGraph actions are event based.  \n\n![node editor](./img/events.png)\n\n\n\nYou'll find a complete example in the Example folder. Let's walkthrough over.\n\nListen events from editor\n```c#\npublic class ExampleNodeEditor : NodeEditor\n{\n    private string _savePath;\n\n    public override void StartEditor(NodeGraph graph)\n    {\n        base.StartEditor(graph);\n\n        _savePath = Application.dataPath + \"/Example/Resources/graph.json\";\n        \n        Events.OnGraphPointerClickEvent           += OnGraphPointerClick;\n        Events.OnGraphPointerDragEvent            += OnGraphPointerDrag;\n        Events.OnNodePointerClickEvent            += OnNodePointerClick;\n        Events.OnConnectionPointerClickEvent      += OnNodeConnectionPointerClick;\n    }\n}\n```\n- graph context menu\n```c#\nprotected override void OnGraphPointerClick(PointerEventData eventData)\n{\n    switch (eventData.button)\n    {\n        case PointerEventData.InputButton.Right: \n        {\n            var ctx = new ContextMenuBuilder()\n            .Add(\"nodes/float\",          CreateFloatNode)\n            .Add(\"nodes/math op\",       CreateMatOpNode)\n            .Add(\"graph/load\",          ()=\u003eLoadGraph(_savePath))\n            .Add(\"graph/save\",          ()=\u003eSaveGraph(_savePath))\n            .Build();\n\n            SetContextMenu(ctx);\n            DisplayContextMenu(); \n        }\n        break;\n        case PointerEventData.InputButton.Left: CloseContextMenu(); break;\n    }\n}\n```\n- node context menu\n```c#\nprotected override void OnNodePointerClick(Node node, PointerEventData eventData)\n{\n    if (eventData.button == PointerEventData.InputButton.Right)\n    {\n            var ctx = new ContextMenuBuilder()\n            .Add(\"duplicate\",            () =\u003e DuplicateNode(node))\n            .Add(\"clear connections\",    () =\u003e ClearConnections(node))\n            .Add(\"delete\",               () =\u003e DeleteNode(node))\n            .Build();\n\n        SetContextMenu(ctx);\n        DisplayContextMenu();\n    }\n}\n```\n- connection context menu\n```c#\nprotected override void OnNodeConnectionPointerClick(string connId, PointerEventData eventData)\n{\n    if (eventData.button == PointerEventData.InputButton.Right)\n    {\n        var ctx = new ContextMenuBuilder()\n        .Add(\"clear connection\", () =\u003e DisconnectConnection(connId))\n        .Build();\n\n        SetContextMenu(ctx);\n        DisplayContextMenu();\n    }\n}\n```\n\n\nThat's been said, to create a new node:\n```c#\npublic class MyAwesomeNode : Node\n{\n    public TMP_InputField valueField;   //  added from editor\n    public SocketOutput outputSocket;   //  added from editor\n    public SocketInput inputSocket;     //  added from editor\n\n    public override void Setup()\n    {\n        Register(outputSocket);\n        Register(inputSocket);\n\n        SetHeader(\"float\");\n    }\n\n    public override void OnSerialize(Serializer serializer)\n    {\n        //  save values on graph save\n        serializer.Add(\"floatValue\", valueField.text);\n\n        //  it would be good idea to use JsonUtility for complex data\n    }\n\n    public override void OnDeserialize(Serializer serializer)\n    {\n        //  load values on graph load\n        var value = serializer.Get(\"floatValue\");\n        valueField.SetTextWithoutNotify(value);\n    }\n}\n```\nTo create a node from your editor, pass its path from `Resources` folder.\n```c#\n//  context item actions\nprivate void CreateMyNode()\n{\n    graph.Create(\"Prefabs/Nodes/MyAwesomeNode\");    //  your prefab path in resources\n}\n```\n\nCheck out the complete expample in `ExampleScene` for more details.\n\n\nThis project is actively in development. \nFeel free to drop an issue for any suggestion or feedback.  \n\n\n### LICENSE  \nMIT  \nCopyright (c) 2022 Cem Ugur Karacam\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcemuka%2FUnityRuntimeNodeEditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcemuka%2FUnityRuntimeNodeEditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcemuka%2FUnityRuntimeNodeEditor/lists"}