[.Net] WPF NodeNetwork 기본 개념과 특징 알아보기

소개

지난 포스팅에서 Node Editor UI에 대해 소개를 했었습니다. Node Editor는 모듈 단위인 노드(Node)를 드래그 앤 드롭으로 연결해 주는 편집 기능입니다.

[.Net] Node Editor UI 프레임워크 소개 - NodeNetwork

[.Net] Node Editor UI 프레임워크 소개 - NodeNetwork

이번 포스팅에서는 Node Editor UI 프레임워크 중 하나인 WPF Node Network를 사용하기 위한 기본 개념에 대해 알아보겠습니다.

본문의 내용은 NodeNetwork Documentation을 참고하여 작성했습니다.

https://wouterdek.me/NodeNetwork/doc

NodeNetwork

NodeNetwork 특징

지난 포스팅에서 소개했던 내용 중 중요한 특징을 다시 보겠습니다.

• .Net Framework 4.7.2와 .Net Core 3.1 이상
• WPF 기반
• MVVM 구조로 대화형 컨트롤 구축
• 패닝(panning), 확대/축소(zooming) 지원
• 레이아웃 자동 제어
• 커스터마이징 가능 (색상, 포트 모양, 컨트롤 추가, 그룹화 등)
• 아파치(Apache) 2.0 라이선스

해당 라이브러리는 아쉽게도 WPF에서만 제공됩니다. 저는 WPF가 익숙하지 않아 WinForm에서 사용하고 싶었지만 지원되지 않더군요. 만약 WPF 모듈을 WinForm에 끌고 올 수 있다면 가능할 수 있다곤 합니다.

그리고 해당 라이브러리는 MVVM(Model-View-ViewModel) 패턴을 사용합니다. MVVM 패턴에 대한 이해가 부족하다면 라이브러리 사용에 어려움이 있습니다. MVVM 패턴에 대한 내용은 아래 링크를 참고하세요.

https://www.codeproject.com/Articles/100175/Model-View-ViewModel-MVVM-Explained

Model-View-ViewModel (MVVM) Explained

NodeNetwork 기본 개념

본문의 설명을 이해하기 위해 우선 GUI 컨트롤의 용어를 숙지해야 합니다. 일반적인 구조는 다음과 같습니다.

• 네트워크(Network)
  • 노드(Node)
    • 입력(Input)
      • 에디터(Editor, 제어 파라미터)
      • 포트(Port, 연결 지점)
    • 출력
      
      • Editor
      • Port
  • 연결(Connection)
  • 보류 중인 연결(Pending connection)
  • 절단(Cutline)
  • 영역 선택(Selection rectanlge)

각 용어가 무엇을 나타내는지 알아보겠습니다.

Node components

노드는 함수(function)이며 입력과 출력(end point)을 드래그할 수 있는 컨테이너입니다. 입력과 출력은 연결을 생성하거나 제거하는 데 사용되는 포트(port)를 가지고 있습니다. 입력은 노드의 동작을 제어하는 데 사용되는 에디터(editor)를 포함할 수 있습니다. 어찌 보면 에디터는 제어할 수 있는 파라미터입니다. 출력에도 에디터를 포함할 수 있으나 입력에서 출력을 결정짓는 것이 더 낫습니다. 말로 설명했지만, 아래의 그림을 보면 바로 이해가 될 겁니다.

노드 컴포넌트의 구성

Connections

연결(connection)은 입력과 출력으로 구성된 튜플입니다. 연결은 서로 다른 노드 간에만 형성될 수 있습니다. 기본적으로 각 입력에는 1개의 연결만 있을 수 있지만 출력에는 무제한일 수 있습니다. 이것은 설정으로 변경할 수 있습니다.

보류 중인 연결(pending connection)은 포트를 클릭하여 드래그 중인 상태를 의미합니다. 아직 연결이 결정되지 않은 것이죠.

연결과 보류 중인 연결 상태

Cutline

절단(cutline)은 오른쪽 마우스 버튼을 클릭하고 드래그하면 나타나는 선입니다. 이 선과 교차되는 모든 연결이 강조 표시되며 마우스 버튼을 떼면 연결이 끊어집니다.

절단 표시

Selection rectangle

사용자가 Shift 키를 누른 상태에서 왼쪽 마우스 버튼을 클릭하고 드래그하면 사각형이 표시됩니다. 이 사각형에 포함되거나 교차하는 모든 노드가 선택되고, 다른 모든 노드는 선택 해제됩니다.

영역 선택 표시