Skip to main content
Connections are visual lines linking nodes together in TeeTree. Like nodes, connections are full components with extensive customization options.

​
Understanding Connections

Connections:
  • Link a FromShape (source node) to a ToShape (destination node)
  • Are components with properties, methods, and events
  • Can have custom styles, arrows, colors, and text
  • Support multiple connection points for complex routing

​
Creating Connections

​
Programmatic Creation

// Simple connection between two nodes
var Connection: TTreeConnection;
begin
  Connection := NodeA.AddConnection(NodeC);
end;

​
Interactive Creation

Allow users to create connections by clicking: 
procedure ButtonConnectClick(Sender: TObject);
var Connection: TTreeConnection;
begin
  if SpeedButton1.Down then
  begin
    // Change cursor to indicate connection mode
    Tree1.Cursor := crCross;
    Tree1.OriginalCursor := crCross;
    
    // Start interactive connection
    Connection := Tree1.StartConnecting;
    
    // If user connected two nodes
    if Assigned(Connection) then
    begin
      Connection.Style := csLine;
      Connection.Border.Color := clRed;
    end;
    
    SpeedButton1.Down := False;
  end
  else
    Tree1.StopConnecting;  // Cancel connection
  
  // Restore cursor
  Tree1.Cursor := crDefault;
  Tree1.OriginalCursor := crDefault;
end;
Call Tree1.StopConnecting to cancel an in-progress connection, such as when the user presses Escape.

​
Connection Styles

TeeTree supports multiple connection line styles: 
type
  TTreeConnectionStyle = (
    csAuto,        // Automatic based on tree layout
    csLine,        // Direct straight line
    csHoriz,       // Horizontal then vertical
    csVert,        // Vertical then horizontal  
    csSegments,    // Multiple segments with connection points
    csCurve        // Bezier curve
  );

​
Using Styles

// Straight line connection
Connection.Style := csLine;
Connection.Border.Color := clBlue;
Connection.Border.Width := 2;

​
Connection Appearance

​
Border Properties

// Line color and width
Connection.Border.Color := clRed;
Connection.Border.Width := 3;

// Line style
Connection.Border.Style := psSolid;     // Solid line
Connection.Border.Style := psDash;      // Dashed line
Connection.Border.Style := psDot;       // Dotted line
Connection.Border.Style := psDashDot;   // Dash-dot pattern

// Hide connection
Connection.Border.Visible := False;

​
Arrows

Connections can have arrows at the start, end, or both ends.
1

Enable Arrows

// Arrow at destination (end)
Connection.ArrowTo.Visible := True;

// Arrow at source (start)
Connection.ArrowFrom.Visible := True;
2

Configure Arrow Style

type
  TConnectionArrowStyle = (
    casNone,      // No arrow
    casSolid,     // Filled triangle
    casLines,     // Line arrows (>)
    casSquare,    // Square cap
    casCircle,    // Circle cap
    casDiamond    // Diamond cap
  );

Connection.ArrowTo.Style := casSolid;
Connection.ArrowFrom.Style := casLines;
3

Customize Arrow Appearance

// Arrow size
Connection.ArrowTo.Size := 8;  // Default is 4

// Arrow colors
Connection.ArrowTo.Border.Color := clRed;
Connection.ArrowTo.Brush.Color := clYellow;

// Arrow angle (width)
Connection.ArrowTo.Angle := 45;  // Degrees

​
Example Configurations

Connection.Style := csLine;
Connection.Border.Color := clBlue;
Connection.Border.Width := 2;
Connection.ArrowTo.Visible := True;
Connection.ArrowTo.Style := casSolid;
Connection.ArrowTo.Size := 8;

​
Connection Text

Connections can display text labels: 
// Add text to connection
Connection.Text.Add('Label');
Connection.Text.Add('Multi-line');
Connection.Text.Add('Supported');

// Or simple text
Connection.SimpleText := 'Connection Label';

// Text formatting
Connection.Font.Color := clBlue;
Connection.Font.Style := [fsBold];
Connection.HorizTextAlign := htaCenter;
Connection.VertTextAlign := vtaCenter;

// Text visibility
Connection.Text.Visible := True;

​
Connection Points

For complex routing, use connection points to create multi-segment paths.

​
Adding Points

// Set style to use points
Connection.Style := csSegments;

// Add connection points
Connection.Points.Add(150, 100);  // X, Y coordinates
Connection.Points.Add(200, 150);
Connection.Points.Add(250, 150);

​
Point Styles

Connection points support various positioning modes: 
type
  TConnectionPointStyle = (
    cpsAutoFrom,      // Auto position on source node
    cpsAutoTo,        // Auto position on destination node
    cpsFromPercent,   // Percentage of source size
    cpsToPercent,     // Percentage of destination size
    cpsFromRel,       // Relative to source origin
    cpsToRel,         // Relative to destination origin
    cpsPrevious,      // Relative to previous point
    cpsNext,          // Relative to next point
    cpsFixed          // Fixed pixel position
  );

​
Advanced Point Usage

// Add point with style
Connection.Points.Add(cpsFromPercent, 50,  // 50% from source width
                      cpsFromPercent, 100); // 100% from source height

// Relative to previous point
Connection.Points.AddFromPrevious(20, 0);  // 20 pixels right

// Move point
Connection.Points.Move(0, 10, 5);  // Move point 0 by delta X,Y

// Delete point
Connection.Points.Delete(1);  // Remove point at index 1

// Clear all points
Connection.Points.Clear;

​
Finding Connections

​
From Node

var i: Integer;
begin
  // Iterate all connections from a node
  for i := 0 to MyNode.Connections.Count - 1 do
    ProcessConnection(MyNode.Connections[i]);
  
  // Find connection to specific node
  Connection := MyNode.Connections.ToShape(TargetNode);
  if Assigned(Connection) then
    ShowMessage('Found connection');
end;

​
From Tree

var i: Integer;
begin
  // All connections in tree
  for i := 0 to Tree1.Connections.Count - 1 do
  begin
    Connection := Tree1.Connections[i];
    ShowMessage(Connection.FromShape.SimpleText + ' -> ' +
                Connection.ToShape.SimpleText);
  end;
end;

​
By Click

procedure Tree1MouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer);
var Connection: TTreeConnection;
begin
  Connection := Tree1.Connections.Clicked(X, Y);
  if Assigned(Connection) then
    Label1.Caption := 'Connection: ' + Connection.FromShape.SimpleText + 
                      ' -> ' + Connection.ToShape.SimpleText
  else
    Label1.Caption := '';
end;

​
Deleting Connections

// Delete specific connection
Connection.Free;

// Delete connection from node
MyNode.Connections.DeleteConnection(Connection);

// Delete all connections to a node
MyNode.Connections.DeleteAllTo(TargetNode);

​
Connection Events

​
Click Events

procedure Tree1ClickConnection(Sender: TTreeConnection; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
  // User clicked a connection
  ShowMessage('Clicked: ' + Sender.FromShape.SimpleText + 
              ' to ' + Sender.ToShape.SimpleText);
  
  // Select the connection
  Tree1.Connections.Selected := Sender;
end;

​
Delete Events

procedure Tree1ConnectionDeleting(Sender: TTreeConnection; 
  var AllowDelete: Boolean);
begin
  // Confirm before deleting
  AllowDelete := MessageDlg('Delete connection?', mtConfirmation, 
                            [mbYes, mbNo], 0) = mrYes;
end;

​
Connection Visibility

// Hide single connection
Connection.Visible := False;

// Hide all connections from a node
MyNode.Connections.Visible := False;

// Show all connections
for i := 0 to Tree1.Connections.Count - 1 do
  Tree1.Connections[i].Visible := True;

​
Cursor

Customize the cursor when hovering over connections: 
// Set global connection cursor
TeeConnectionCursor := crHandPoint;

// Set for specific connection
Connection.Cursor := crCross;

​
Editing Connections

// Open connection editor dialog
EditTreeConnection(Self, Connection);

​
Magnetic Connections

When creating connections interactively, you can configure magnetic snapping: 
// Control magnetic handle snapping
Tree1.Connections.MagneticHandle := rcRightTop;

​
Connection Selection

// Select a connection
Tree1.Connections.Selected := Connection;

// Get selected connection
if Assigned(Tree1.Connections.Selected) then
  ShowMessage('Selected: ' + Tree1.Connections.Selected.SimpleText);

// Clear selection
Tree1.Connections.Selected := nil;

​
Practical Examples

procedure CreateFlowchart;
var 
  Start, Process, Decision, End_: TTreeNodeShape;
  Conn: TTreeConnection;
begin
  // Create nodes
  Start := Tree1.Add('Start');
  Process := Tree1.Add('Process Data');
  Decision := Tree1.Add('Valid?');
  End_ := Tree1.Add('End');
  
  // Connect with arrows
  Conn := Start.AddConnection(Process);
  Conn.Style := csLine;
  Conn.ArrowTo.Visible := True;
  
  Conn := Process.AddConnection(Decision);
  Conn.Style := csLine;
  Conn.ArrowTo.Visible := True;
  
  Conn := Decision.AddConnection(End_);
  Conn.Style := csLine;
  Conn.ArrowTo.Visible := True;
  Conn.SimpleText := 'Yes';
end;

procedure CreateNetworkDiagram;
var 
  Server, PC1, PC2, PC3: TTreeNodeShape;
  Conn: TTreeConnection;
begin
  Server := Tree1.Add('Server');
  PC1 := Tree1.Add('PC1');
  PC2 := Tree1.Add('PC2');
  PC3 := Tree1.Add('PC3');
  
  // Bidirectional connections
  Conn := Server.AddConnection(PC1);
  Conn.Style := csLine;
  Conn.Border.Color := clGreen;
  Conn.Border.Width := 2;
  Conn.ArrowFrom.Visible := True;
  Conn.ArrowTo.Visible := True;
  
  // Repeat for other PCs
end;

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us