TTreeNodeShape

Overview

TTreeNodeShape is the main class representing individual nodes in a TeeTree. Each node is a full component with its own properties, methods, and events. Nodes can have parent-child relationships, visual formatting, text, images, and connections to other nodes.

Class Hierarchy

TComponent
  └─ TCustomTreeElement
      └─ TTreeNodeShape

Key Features

Parent-child hierarchy support
Multiple visual styles (rectangle, circle, diamond, etc.)
Text with multi-line support and alignment
Image support
Gradient fills and shadows
Border and brush customization
Automatic sizing and positioning
Connection management
Expand/collapse functionality

Properties

Position and Size

Integer

Left coordinate of the node.

Integer

Top coordinate of the node.

Integer

Right coordinate of the node.

Integer

Bottom coordinate of the node.

Left

Integer

Alias for X0. Left coordinate of the node.

Top

Integer

Alias for Y0. Top coordinate of the node.

Width

Integer

Width of the node in pixels.

Height

Integer

Height of the node in pixels.

AutoSize

Boolean

default:"True"

When True, node size is determined by text size.

AutoPosition

TTreeShapeAutoPosition

Determines which coordinates are automatically calculated. Has Left and Top boolean properties.

Visual Appearance

Style

TTreeShapeStyle

default:"tssRectangle"

Visual style of the node:

tssRectangle - Rectangle shape
tssCircle - Circle/ellipse
tssRoundRectangle - Rounded rectangle
tssDiamond - Diamond shape
tssTriangleTop - Triangle pointing up
tssTriangleBottom - Triangle pointing down
tssTriangleLeft - Triangle pointing left
tssTriangleRight - Triangle pointing right
tssVertLine - Vertical line
tssHorizLine - Horizontal line
tssLine - Diagonal line
tssInvertLine - Inverted diagonal line
tssChamfer - Chamfered rectangle
tssCustom - Custom shape

Color

TColor

default:"clWhite"

Background color of the node.

BackColor

TColor

default:"clNone"

Alternative background color.

Border

TTreePen

Pen used to draw the node border.

Brush

TTreeShapeBrush

Brush used to fill the node interior.

Transparent

Boolean

default:"False"

When True, node interior is not filled.

Transparency

TTeeTransparency

default:"0"

Transparency level from 0 to 100%.

RoundSize

Integer

default:"3"

Radius for rounded corners when Style is tssRoundRectangle or tssChamfer.

Gradient and Shadow

Gradient

TShapeGradient

Gradient fill settings.

GradientClip

Boolean

default:"True"

When False, draws gradient in shape rectangle bounds instead of clipping to shape.

Shadow

TTeeShadow

Shadow settings for the node.

Text

TTreeStrings

Multi-line text displayed in the node. Supports:

Angle - Text rotation (0-360 degrees)
HorizAlign - Horizontal alignment (Center, Left, Right)
VertAlign - Vertical alignment (Center, Top, Bottom)
HorizOffset - Horizontal pixel offset
VertOffset - Vertical pixel offset
ClipText - Clips text outside node bounds
Transparency - Text transparency
Visible - Show or hide text

SimpleText

String

Simple string property to get/set the first line of text.

Font

TTeeFont

Font used for text display.

HorizTextAlign

THorizTextAlign

Horizontal text alignment: htaCenter, htaLeft, or htaRight.

VertTextAlign

TVertTextAlign

Vertical text alignment.

Images

Image

TTreePicture

Custom picture to display with the node.

ImageIndex

TTreeNodeImageIndex

Index of default stock image:

tiNone - No image
tiFolderClose - Closed folder
tiFolderOpen - Open folder
tiFolderOpenClose - Auto open/close folder
tiDesktop, tiMyPC, tiNetworkNei, etc.
tiChecked, tiUnChecked - Checkboxes
tiRadioChecked, tiRadioUnChecked - Radio buttons

ImageListIndex

Integer

default:"-1"

Index in the Tree’s ImageList.

ImageAlignment

TTreeImageAlignment

default:"iaAutomatic"

Position of image:

iaAutomatic - Auto-positioned
iaLeftTop, iaRightBottom, iaLeftBottom, iaRightTop
iaLeft, iaTop, iaRight, iaBottom
iaCenter - Centered

ImageWidth

Integer

default:"0"

Width of image. 0 = automatic.

ImageHeight

Integer

default:"0"

Height of image. 0 = automatic.

ImageRect

TRect

Read-only rectangle returning image position.

Hierarchy

Parent

TTreeNodeShape

Parent node. When assigned, this node becomes a child.

Children

TTreeChildrenList

List of child nodes.

Childs

TTreeChildrenList

Obsolete. Use Children instead.

Parents

TNodeShapeList

List of additional parent nodes (for multi-parent scenarios).

Root

TTreeNodeShape

Read-only. Returns the root node of this hierarchy.

BrotherIndex

Integer

Index among sibling nodes. -1 when node has no parent.

PreviousBrother

TTreeNodeShape

Read-only. Returns the previous sibling node.

Expand/Collapse

Expanded

Boolean

default:"False"

When True, child nodes are visible.

ShowCross

TTreeNodeShapeShowCross

default:"scAuto"

Cross-box display style:

scAuto - Displayed only when node has children
scAlways - Always displayed
scNever - Never displayed

Connections

TNodeConnectionList

List of connections from this node to other nodes.

State

Visible

Boolean

default:"True"

When True, node is visible (parent must also be expanded).

Selected

Boolean

default:"False"

When True, node is selected.

Checked

Boolean

default:"False"

When True, checkbox/radio image is checked.

Other

Cursor

TCursor

default:"crDefault"

Mouse cursor when hovering over node.

Data

Pointer

User-defined data pointer.

TagObject

TObject

User-defined object reference.

Tree

TCustomTree

Reference to the parent Tree component.

AdjustedRectangle

TRect

Read-only. Total bounds including image.

Methods

Adding Children

AddChild

function

Adds a new child node.

function AddChild(const AText: String): TTreeNodeShape;

Parameters:

AText - Text for the new child

Returns: The newly created child node

Add

function

Alias for AddChild.

function Add(const AText: String): TTreeNodeShape;

AddChildFirst

function

Adds a child at the first position.

function AddChildFirst(const AText: String): TTreeNodeShape;

AddBrother

function

Adds a sibling node.

function AddBrother(const AText: String): TTreeNodeShape;

AddChildObject

function

Adds a child with associated data.

function AddChildObject(const AText: String; const Data: Pointer): TTreeNodeShape;

Insert

function

Inserts a child at specific index.

function Insert(Index: Integer; const AText: String): TTreeNodeShape;

Connections

AddConnection

function

Creates a connection to another node.

function AddConnection(const AToShape: TTreeNodeShape): TTreeConnection;

Returns: The newly created connection

AddConnectionObject

function

Creates a connection with associated data.

function AddConnectionObject(const AToShape: TTreeNodeShape; const Data: Pointer): TTreeConnection;

Expand/Collapse

Toggle

procedure

Toggles expand/collapse state.

procedure Toggle;

Collapse

procedure

Collapses node and optionally all descendants.

procedure Collapse(Recursive: Boolean);

ToggleCheck

procedure

Toggles checkbox state.

procedure ToggleCheck;

Visibility

Show

procedure

Makes node visible.

procedure Show;

Hide

procedure

Hides node.

procedure Hide;

Drawing

Draw

procedure

Draws the node.

procedure Draw; virtual;

DrawHandles

procedure

Draws resize handles when selected.

procedure DrawHandles; override;

Repaint

procedure

Repaints the node.

procedure Repaint;

Geometry

Bounds

function

Returns the node’s bounding rectangle.

function Bounds: TRect;

XCenter

function

Returns X coordinate of center.

function XCenter: TCoordinate;

YCenter

function

Returns Y coordinate of center.

function YCenter: TCoordinate;

Clicked

function

Tests if coordinates are inside node.

function Clicked(const x, y: Integer): Boolean; overload;
function Clicked(const x, y: Single): Boolean; overload;

Returns: True if point is inside node

ClickedImage

function

Tests if coordinates are inside node’s image.

function ClickedImage(x, y: Integer): Boolean;

CrossBoxClicked

function

Tests if coordinates are inside cross-box.

function CrossBoxClicked(x, y: Integer): Boolean;

Movement and Resizing

MoveRelative

procedure

Moves node by offset.

procedure MoveRelative(OfsX, OfsY: Integer; MoveChilds: Boolean); dynamic;

Resize

procedure

Resizes node from a corner.

procedure Resize(ACorner: TTreeShapeHandle; DeltaX, DeltaY: Integer); dynamic;

RecalcSize

procedure

Recalculates node size based on text.

procedure RecalcSize(const ACanvas: TCanvas3D); virtual;

Hierarchy Operations

Level

function

Returns the depth level in hierarchy (0 for root).

function Level: Integer;

Count

function

Returns the number of child nodes.

function Count: Integer;

HasChildren

function

Returns True if node has children.

function HasChildren: Boolean;

SelectChilds

procedure

Selects all child nodes.

procedure SelectChilds;

SortChildsText

procedure

Sorts children alphabetically.

procedure SortChildsText(AscendingOrder, IgnoreCase: Boolean);

Z-Order

BringToFront

procedure

Moves node to front of drawing order.

procedure BringToFront;

SendToBack

procedure

Moves node to back of drawing order.

procedure SendToBack;

Other

Clear

procedure

Removes all child nodes.

procedure Clear;

Assign

procedure

Copies properties from another node.

procedure Assign(Source: TPersistent); override;

AssignFormat

procedure

Copies only visual format from another node.

procedure AssignFormat(const ANode: TTreeNodeShape);

SaveToTextFile

procedure

Saves node and children to text file.

procedure SaveToTextFile(const FileName: String);

Events

OnClick

TClickShapeEvent

Fired when node is clicked.

property OnClick: TClickShapeEvent;
// procedure(Sender: TTreeNodeShape; Button: TMouseButton; Shift: TShiftState; X, Y: Integer)

OnDblClick

TClickShapeEvent

Fired when node is double-clicked.

OnMouseEnter

TMouseShapeEvent

Fired when mouse enters node.

property OnMouseEnter: TMouseShapeEvent;
// procedure(Sender: TTreeNodeShape; Shift: TShiftState; X, Y: Integer)

OnMouseLeave

TMouseShapeEvent

Fired when mouse leaves node.

OnMouseMove

TMouseShapeEvent

Fired when mouse moves over node.

Usage Examples

Creating a Node Hierarchy

var
  Root, Child1, Child2, GrandChild: TTreeNodeShape;
begin
  Root := Tree1.AddRoot('Root');
  
  Child1 := Root.AddChild('Child 1');
  Child2 := Root.AddChild('Child 2');
  
  GrandChild := Child1.AddChild('GrandChild');
  
  Root.Expanded := True;
  Child1.Expanded := True;
end;

Customizing Node Appearance

var
  Node: TTreeNodeShape;
begin
  Node := Tree1.AddRoot('Custom');
  
  // Shape
  Node.Style := tssRoundRectangle;
  Node.RoundSize := 10;
  
  // Colors
  Node.Color := clSkyBlue;
  Node.Border.Color := clNavy;
  Node.Border.Width := 2;
  
  // Text
  Node.Font.Size := 12;
  Node.Font.Style := [fsBold];
  Node.Text.HorizAlign := htaLeft;
  
  // Shadow
  Node.Shadow.Visible := True;
  Node.Shadow.Size := 5;
  
  // Gradient
  Node.Gradient.Visible := True;
  Node.Gradient.StartColor := clWhite;
  Node.Gradient.EndColor := clSkyBlue;
end;

Adding Images

var
  Node: TTreeNodeShape;
begin
  // Using stock images
  Node := Tree1.AddRoot('Folder');
  Node.ImageIndex := tiFolderClose;
  
  // Using ImageList
  Node := Tree1.AddRoot('Custom Icon');
  Node.ImageListIndex := 0;
  
  // Custom picture
  Node := Tree1.AddRoot('Picture');
  Node.Image.LoadFromFile('icon.png');
  Node.ImageAlignment := iaLeft;
end;

Working with Connections

var
  Node1, Node2: TTreeNodeShape;
  Conn: TTreeConnection;
begin
  Node1 := Tree1.Add(100, 100, 'Start', nil);
  Node2 := Tree1.Add(300, 100, 'End', nil);
  
  Conn := Node1.AddConnection(Node2);
  Conn.Border.Color := clRed;
  Conn.Border.Width := 2;
end;

Handling Node Events

procedure TForm1.NodeClick(Sender: TTreeNodeShape; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
  if Button = mbLeft then
    Sender.Selected := True
  else if Button = mbRight then
    Sender.Toggle;
end;

begin
  Node := Tree1.AddRoot('Interactive');
  Node.OnClick := NodeClick;
end;

Dynamic Node Creation

var
  i: Integer;
  Node: TTreeNodeShape;
begin
  Tree1.BeginUpdate;
  try
    Node := Tree1.AddRoot('Dynamic Root');
    for i := 1 to 10 do
    begin
      Node.AddChild('Child ' + IntToStr(i));
    end;
    Node.Expanded := True;
  finally
    Tree1.EndUpdate;
  end;
end;

Components

Shapes

Child Managers

Utilities

Overview

Class Hierarchy

Key Features

Properties

Position and Size

Visual Appearance

Gradient and Shadow

Text

Images

Hierarchy

Expand/Collapse

Connections

State

Other

Methods

Adding Children

Connections

Expand/Collapse

Visibility

Drawing

Geometry

Movement and Resizing

Hierarchy Operations

Z-Order

Other

Events

Usage Examples

Creating a Node Hierarchy

Customizing Node Appearance

Adding Images

Working with Connections

Handling Node Events

Dynamic Node Creation

See Also

Build docs developers (and LLMs) love

Components

Shapes

Child Managers

Utilities

​Overview

​Class Hierarchy

​Key Features

​Properties

​Position and Size

​Visual Appearance

​Gradient and Shadow

​Text

​Images

​Hierarchy

​Expand/Collapse

​Connections

​State

​Other

​Methods

​Adding Children

​Connections

​Expand/Collapse

​Visibility

​Drawing

​Geometry

​Movement and Resizing

​Hierarchy Operations

​Z-Order

​Other

​Events

​Usage Examples

​Creating a Node Hierarchy

​Customizing Node Appearance

​Adding Images

​Working with Connections

​Handling Node Events

​Dynamic Node Creation

​See Also

Build docs developers (and LLMs) love

Overview

Class Hierarchy

Key Features

Properties

Position and Size

Visual Appearance

Gradient and Shadow

Text

Images

Hierarchy

Expand/Collapse

Connections

State

Other

Methods

Adding Children

Connections

Expand/Collapse

Visibility

Drawing

Geometry

Movement and Resizing

Hierarchy Operations

Z-Order

Other

Events

Usage Examples

Creating a Node Hierarchy

Customizing Node Appearance

Adding Images

Working with Connections

Handling Node Events

Dynamic Node Creation

See Also