Skip to main content

Overview

Basic shapes provide the foundation for creating tree diagrams with simple geometric forms. These shapes inherit from TCustomTreeShape and TTreeNodeShape base classes.

Inheritance Hierarchy

TTreeNodeShape (base class)
  └── TCustomTreeShape
        ├── Geometric shapes (Rectangle, Circle, Diamond, etc.)
        └── Specialized shapes (Triangle variants, Line shapes, etc.)

Common Base Classes

TTreeNodeShape

The fundamental base class for all node shapes in TeeTree. Key Properties:
  • Style: Determines the shape appearance (rectangle, circle, diamond, etc.)
  • Text: Text content displayed in the shape
  • Font: Font properties for text display
  • Border: Pen properties for shape border
  • Brush: Fill properties for shape interior
  • Shadow: Optional shadow effect
  • Gradient: Gradient fill options
  • AutoSize: Automatically adjust size to fit content
  • Transparent: Make shape background transparent
Common Methods:
  • Draw(): Renders the shape
  • Clicked(x, y): Checks if coordinates are within shape bounds
  • AddChild(text): Adds a child node
  • AddConnection(shape): Creates connection to another shape

TCustomTreeShape

Base class for custom geometric shapes, derived from TTreeNodeShape.
TCustomTreeShape = class(TTreeNodeShape);

Rectangle Shapes

Standard Rectangle

TTreeNodeShape with tssRectangle

The most basic rectangular shape.
Usage:
var
  Shape: TTreeNodeShape;
begin
  Shape := TTreeNodeShape.Create(Tree);
  Shape.Style := tssRectangle;
  Shape.Text.Add('Rectangle');
  Shape.X0 := 100;
  Shape.Y0 := 100;
  Shape.X1 := 200;
  Shape.Y1 := 150;
end;

Round Rectangle

Round Rectangle

Rectangle with rounded corners.
Properties:
  • RoundSize: Controls the radius of corner rounding (default: 3)
Usage:
Shape.Style := tssRoundRectangle;
Shape.RoundSize := 10;

Chamfered Rectangle

Chamfer

Rectangle with beveled corners.
Usage:
Shape.Style := tssChamfer;

Circle and Ellipse

Circle

Circular or elliptical shape.
Usage:
Shape.Style := tssCircle;
Shape.Width := 100;  // Same as Height for perfect circle
Shape.Height := 100;

Diamond Shape

Diamond

Diamond/rhombus shape, commonly used for decision points.
Usage:
Shape.Style := tssDiamond;

Triangle Shapes

Triangle Top

Triangle pointing upward

Triangle Bottom

Triangle pointing downward

Triangle Left

Triangle pointing left

Triangle Right

Triangle pointing right
Usage:
// Upward triangle
Shape.Style := tssTriangleTop;

// Downward triangle
Shape.Style := tssTriangleBottom;

// Left triangle
Shape.Style := tssTriangleLeft;

// Right triangle
Shape.Style := tssTriangleRight;

Line Shapes

Vertical Line

Vertical Line

Simple vertical line shape.
Usage:
Shape.Style := tssVertLine;

Horizontal Line

Horizontal Line

Simple horizontal line shape.
Usage:
Shape.Style := tssHorizLine;

Diagonal Lines

Line

Diagonal line from top-left to bottom-right

Inverted Line

Diagonal line from top-right to bottom-left
Usage:
// Forward diagonal
Shape.Style := tssLine;

// Backward diagonal
Shape.Style := tssInvertLine;

Custom Shapes

Custom Shape

Use custom drawing for complete control over shape appearance.
Usage:
Shape.Style := tssCustom;
// Override DrawShapeCanvas method in descendant class

Complete Example

Here’s a comprehensive example creating a tree with various basic shapes:
uses
  TeeTree;

procedure CreateBasicShapesDemo(Tree: TTree);
var
  RectShape, CircleShape, DiamondShape: TTreeNodeShape;
begin
  // Rectangle
  RectShape := TTreeNodeShape.Create(Tree);
  with RectShape do
  begin
    Style := tssRectangle;
    Text.Add('Rectangle');
    X0 := 50;
    Y0 := 50;
    X1 := 150;
    Y1 := 100;
    Brush.Color := clWhite;
    Border.Color := clBlack;
  end;

  // Circle
  CircleShape := TTreeNodeShape.Create(Tree);
  with CircleShape do
  begin
    Style := tssCircle;
    Text.Add('Circle');
    X0 := 200;
    Y0 := 50;
    Width := 80;
    Height := 80;
    Brush.Color := clYellow;
  end;

  // Diamond
  DiamondShape := TTreeNodeShape.Create(Tree);
  with DiamondShape do
  begin
    Style := tssDiamond;
    Text.Add('Decision');
    X0 := 350;
    Y0 := 50;
    Width := 100;
    Height := 80;
    Brush.Color := clRed;
    Font.Color := clWhite;
  end;

  // Connect shapes
  RectShape.AddConnection(CircleShape);
  CircleShape.AddConnection(DiamondShape);
end;

Style Constants

All available TTreeShapeStyle values:
ConstantDescription
tssRectangleStandard rectangle
tssCircleCircle or ellipse
tssVertLineVertical line
tssHorizLineHorizontal line
tssLineDiagonal line (top-left to bottom-right)
tssInvertLineInverted diagonal line
tssDiamondDiamond/rhombus
tssTriangleTopUpward-pointing triangle
tssTriangleBottomDownward-pointing triangle
tssTriangleLeftLeft-pointing triangle
tssTriangleRightRight-pointing triangle
tssRoundRectangleRectangle with rounded corners
tssChamferRectangle with beveled corners
tssCustomCustom shape (override drawing)

See Also

Flowchart Shapes

Specialized shapes for flowcharts and process diagrams

UML Shapes

Shapes for UML diagrams

Electric Shapes

Shapes for circuit and electronic diagrams

Custom Shapes

Create your own custom shapes

Build docs developers (and LLMs) love