Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Steema/TeeTree/llms.txt

Use this file to discover all available pages before exploring further.

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