Implementation

Nuido's architecture is built around a set of core components and their associated models, providing the structure for creating diagrams and workflows. These components work together to manage visual representation, data, and connections within the application.

Core Components

Core Components

Document: This represents the overall workspace – think of it as a "drawing page" where all nodes and connections are arranged. It’s the foundational model upon which all UI elements are built. It manages the document's state, including node arrangement, connection properties, and overall layout.

Node: Represents individual graphical elements within the document, such as shapes, icons, or custom components. Each Node includes ports for establishing connections with other nodes. Nodes are responsible for managing their own visual representation and associated data (e.g., properties, labels).

Edge: Defines the relationships between nodes. Edges utilize paths and joints to manage complex layouts and connection pathways. They represent the flow of information or activity between connected elements.

Port: A crucial element for defining connections. Ports act as input or output points on a Node, facilitating the creation of connections with other ports on different Nodes. They control the directionality and properties of connections.

Path: Represents the route a connection takes across the document.

Joint: A specific location along a Path, used for precise control over connection placement. This allows for intricate layout designs and fine-tuning of connection positioning within complex diagrams.

Underlying Models

Nuido Component Models

Each component is backed by corresponding models (DocumentModel, NodeModel, ConnectionModel, PortModel, PathModel, JointModel) to manage data and logic within Nuido. These models provide the underlying structure for storing and manipulating the properties of each component.

Section Nodes

To support complex node structures, we've introduced SectionedNode and its associated model, SectionedNodeModel. These are derived from Node and NodeModel, allowing users to create nodes with internal subdivisions or sections for organizing data and connections within a single node.

Nuido UI Component

The core components and models described above are managed and orchestrated through a central Owl component: NuidoUi. This component provides the user interface for interacting with and manipulating these elements.

Event Bus

Event bus is used to communicate between components.

• SelectionEventType Triggered on node or edge selection events.
• EdgeTypeEventType Indicates a change in the currently selected edge type.
• NewEdgeEventType Dispatched when a new edge is being created.
• DocumentEventType Used for global document events such as creating or resetting documents.
• AdjustEdgeEndpoint Used along with RecalculateEdgeEndpointsEventType.
• RecalculateEdgeEndpointsEventType Triggered when port positions change, prompting layout recalculations.
• NuidoEventType Manages zooming and coordinate transformations.
• NodeMovedEventType Emitted when nodes are repositioned.

Registries

To promote extensibility and maintainability, Nuido utilizes registries to manage different types of components. These registries allow developers to easily add new node types, port types, edge types, and section types without modifying the core application code.

• NuidoNodeRegistryName Handles registration and lookup of Node types.
• NuidoPortRegistryName Manages different Port types.
• NuidoNodeSectionRegistryName Registers and manages sections within SectionedNode sections.
• NuidoEdgeRegistryName Supports the registration of custom Edge types.

Navigation

Nuido includes built-in support for mouse and keyboard interactions.

NOTE

Nuido is not a full application, i.e., you need to implement your own menu, sidebar, etc. For example on how to use Nuido please see the demo app.

Component Selections

• Single selection: Left-click on a component.
• Multi-selection: Hold Shift, click and drag in a blank area to draw a selection box. All components intersecting the box will be selected.
• Deselecting: Double-click in a blank area or click another component, or drag a selection box that includes no components.

Moving Components

• Move a single node: Click and drag the node’s title bar.
• Move multiple nodes: Select the desired nodes using the selection box, then drag any of the selected node titles.

Removing Components

• Delete node(s): Select the component(s) and press Delete.

CAUTION

Deletion is immediate, i.e., Nuido does not prompt for confirmation or display warnings.

Connecting Nodes

To connect two nodes in Nuido, simply click on an output port of one node and drag the cursor to an input port of another. The connection process depends on how the nodes, specifically their ports, are implemented.

Nuido allows for flexible control over port connections. For example, a port can be configured to accept a single connection or multiple connections, depending on your needs.

You can also define more advanced restrictions using a specification, referred to in Nuido as a spec. A spec is a dictionary provided during port creation that outlines custom rules or metadata. When a connection is attempted, nodes can inspect the spec to determine whether to accept or reject the connection, enabling dynamic and context-aware behaviors.

Sequences

Node Creation Sequence

Edge Creation Sequence

Node Deletion Sequence