NodeCanvas

Remarks

Zoom is arithmetic, not a transform. Nothing in Vixen.Ui scales a subtree — there is no transform property and adding one is a change to the layout tree, the hit test and the draw list at once. So the canvas converts graph coordinates to screen coordinates itself and writes the answer as a position and a size, and the node's font-size goes with it so that its insides scale too. Everything in the theme below a node is therefore written in em, which is what makes one number carry the whole scale.

⚠ A wire's endpoint is arithmetic too, from the node's rectangle and the port's index rather than from a laid-out port's box. A graph is mostly off screen, the node at the far end of a wire usually has no elements at all, and an endpoint read from layout would collapse to the origin exactly when the wire leaves the viewport. It also means a wire is never a frame behind the node it is attached to, which a laid-out endpoint always is.

Culled by a pool, like TreeView's rows: the elements are the nodes that intersect the viewport plus a margin, rebound as the canvas pans. Ten thousand nodes is ten thousand GraphNodes and a few dozen NodeItems.

A resize is noticed rather than announced. What the canvas realises is what its own box reaches, which is a result of the layout pass — so Control.WhenResized hangs Refresh on LayoutFinished and it runs on the passes where the box actually moved. Panning and zooming realise for themselves, because those are writes this control makes and can see.

Fields and properties (39)

• public const float Overscan

  How much of the canvas beyond each edge is still realised, as a fraction of it.

• protected override string TagName

  The element name this type answers to when a caller does not choose one.

• protected override bool AcceptsFocus

  Whether the focus can rest on this kind of control at all.

• public NodeGraph Graph

  The nodes, wires and groups being shown.

• public UiElement Surface

  Where the nodes go.

• public UiElement GroupLayer

  Where the group boxes go, under the wires.

• public NodeWireLayer WireLayer

  The layer the wires are drawn on.

• public UiElement Marquee

  The rubber band, hidden unless one is being dragged.

• public NodeMinimap Minimap

  The overview in the corner.

• public IReadOnlyList<NodeItem> Items

  The node elements that exist, including the parked ones.

• public IReadOnlyList<GraphNode> Visible

  The nodes that are realised, in order.

• public IReadOnlyCollection<GraphNode> Selection

  What is selected.

• public Vector2 Pan
• public float Zoom
• public float MinimumZoom
• public float MaximumZoom
• public float GridSize
• public bool SnapToGrid
• public bool MultiSelect
• public float WireThickness
• public float WireCurvature
• public GraphPort? PendingPort

  The port a wire is being dragged from, if one is.

• public Vector2 PendingPoint

  Where that wire's loose end is, in document space.

• public Color4 WireColor

  The colour of a wire, from --wire-color.

• public Color4 WireActiveColor

  The colour of a selected or pending one, from --wire-active-color.

• public float HeaderHeight

  How tall a node's title bar is, in graph units, from --node-header.

• public float PortPitch

  How far apart the ports are down a node's side, from --port-pitch.

• public float NodePadding

  How much room is left under the last port, from --node-padding.

• public float NodeFontSize

  A node's font size at a zoom of one, from --node-font-size.

• public Rectangle View

  What the canvas can see, in graph units.

• public static readonly UiPropertyKey PanProperty

  Identity for Pan.

• public static readonly UiPropertyKey ZoomProperty

  Identity for Zoom.

• public static readonly UiPropertyKey MinimumZoomProperty

  Identity for MinimumZoom.

• public static readonly UiPropertyKey MaximumZoomProperty

  Identity for MaximumZoom.

• public static readonly UiPropertyKey GridSizeProperty

  Identity for GridSize.

• public static readonly UiPropertyKey SnapToGridProperty

  Identity for SnapToGrid.

• public static readonly UiPropertyKey MultiSelectProperty

  Identity for MultiSelect.

• public static readonly UiPropertyKey WireThicknessProperty

  Identity for WireThickness.

• public static readonly UiPropertyKey WireCurvatureProperty

  Identity for WireCurvature.

Events (5)

• public Action<NodeCanvas>? SelectionChanged

  Raised when the selection changes.

• public Action<NodeCanvas>? NodesMoved

  Raised after a drag has moved some nodes.

• public Action<NodeCanvas, GraphNode>? Activated

  Raised when a node is double-clicked.

• public Action<NodeCanvas, GraphWire>? Connected

  Raised after a wire is made by dragging.

• public Action<NodeCanvas, GraphPort>? PortEdited

  Raised after a value was typed into a port's inline editor.

Methods (24)

• protected override void OnCreated()

  Builds whatever this element is made of, once, as it joins a document.

• protected override void OnDraw(DrawContext context)

  Draws the grid, under everything.

• public Vector2 ToScreen(Vector2 point)

  Where a graph point is, in document space.

• public Vector2 ToGraph(float x, float y)

  Where a document-space point is, in graph units.

• public float HeightOf(GraphNode node)

  How tall a node is, in graph units.

• public Rectangle RectOf(GraphNode node)

  Where a node is, in graph units.

• public Rectangle RectOf(GraphGroup group)

  Where a group's box is, in graph units.

• public Vector2 AnchorOf(GraphPort port)

  Where a wire attaches to a port, in graph units.

• public NodeItem? ItemOf(GraphNode node)

  The element showing a node, if it has one.

• public NodeGroupView? ViewOf(GraphGroup group)

  The element showing a group, if there is one.

• public void Refresh()

  Brings the elements back into agreement with the graph and the view.

• public void Select(GraphNode? node, ModifierKeys modifiers = None)

  Selects a node, or adds it to or removes it from the selection.

• public void SelectAll()

  Selects everything.

• public void ClearSelection()

  Selects nothing.

• public void ZoomToFit(bool selectionOnly = false, float margin = 32)

  Pans and zooms until everything fits, or until the selection does.

• public void ClearPan()

  Unsets Pan, so it takes its default or its ancestor's value again.

• public void ClearZoom()

  Unsets Zoom, so it takes its default or its ancestor's value again.

• public void ClearMinimumZoom()

  Unsets MinimumZoom, so it takes its default or its ancestor's value again.

• public void ClearMaximumZoom()

  Unsets MaximumZoom, so it takes its default or its ancestor's value again.

• public void ClearGridSize()

  Unsets GridSize, so it takes its default or its ancestor's value again.

• public void ClearSnapToGrid()

  Unsets SnapToGrid, so it takes its default or its ancestor's value again.

• public void ClearMultiSelect()

  Unsets MultiSelect, so it takes its default or its ancestor's value again.

• public void ClearWireThickness()

  Unsets WireThickness, so it takes its default or its ancestor's value again.

• public void ClearWireCurvature()

  Unsets WireCurvature, so it takes its default or its ancestor's value again.

Used by (9)

• NodeCanvasTestsVixen.Ui.Controls.Advanced.Tests
• NodeMinimapVixen.Ui.Controls.Advanced
• NodeWireLayerVixen.Ui.Controls.Advanced
• ResizeTestsVixen.Ui.Controls.Advanced.Tests
• NodeGraphViewVixen.Editor.NodeGraph
• NodePreviewLayerVixen.Editor.NodeGraph
• PortValueTestsVixen.Editor.NodeGraph.Tests
• ViewFixtureVixen.Editor.NodeGraph.Tests
• ViewTestsVixen.Editor.NodeGraph.Tests