Table of Contents

Getting started with TMS FNC Blox Control

TTMSFNCBloxControl is the canvas component at the heart of TMS FNC Blox. You drop it on a form, add blocks and lines to its Blox collection, and the control takes care of hit-testing, selection, moving, resizing, rotating, connecting, zooming, and serialization. This page gets a diagram on screen in a few steps; the chapter guides go deeper on every feature.

Prerequisites

  • TMS FNC Core installed and its runtime package added to the project.
  • TMS FNC Blox installed.
Note

The separate TTMSFNCBloxToolBar component (drag-free visual editing) lives in a bridge package that depends on the TMS FNC UI Pack. The blox control itself does not require it — see Blox ToolBar.

Add the control

  1. Drop TTMSFNCBloxControl from the TMS FNC Blox palette page onto a form.
  2. Set Align := TAlignLayout.Client (FMX) or Align := alClient (VCL) to fill the form.
  3. The control is ready to host diagram elements at runtime.

Add a block programmatically

Elements are plain objects: create one, set its properties, and add it to the control's Blox collection. The control owns the element once added.

procedure TForm1.AddBlockButtonClick(Sender: TObject);
var
  LBlock: TTMSFNCBloxBlock;
begin
  LBlock := TTMSFNCBloxBlock.Create;
  LBlock.Left := 40;
  LBlock.Top := 40;
  LBlock.Width := 160;
  LBlock.Height := 80;
  LBlock.Shape := RoundRect;
  LBlock.Text := 'Hello Blox';
  LBlock.FillColor := MakeGraphicsColor(74, 144, 217);
  LBlock.TextColor := gcWhite;
  BloxControl1.Blox.Add(LBlock);
end;

Connect two blocks with a line

A line connects two blocks through their link points — anchor positions a line can attach to. Use TTMSFNCBloxLinkableBlock, which ships four default link points (top, bottom, left, right), create a TTMSFNCBloxLine, and anchor its SourceLinkPoint and TargetLinkPoint to those points:

procedure TForm1.ConnectButtonClick(Sender: TObject);
var
  LSource, LTarget: TTMSFNCBloxLinkableBlock;
  LLine: TTMSFNCBloxLine;
begin
  { TTMSFNCBloxLinkableBlock ships four default link points: 0=top, 1=bottom, 2=left, 3=right. }
  LSource := TTMSFNCBloxLinkableBlock.Create;
  LSource.Left := 40;
  LSource.Top := 40;
  LSource.Width := 140;
  LSource.Height := 70;
  LSource.Text := 'Source';
  BloxControl1.Blox.Add(LSource);

  LTarget := TTMSFNCBloxLinkableBlock.Create;
  LTarget.Left := 40;
  LTarget.Top := 220;
  LTarget.Width := 140;
  LTarget.Height := 70;
  LTarget.Text := 'Target';
  BloxControl1.Blox.Add(LTarget);

  LLine := TTMSFNCBloxLine.Create;
  LLine.SourceLinkPoint.AnchorLink := LSource.LinkPoints[1]; { bottom of source }
  LLine.TargetLinkPoint.AnchorLink := LTarget.LinkPoints[0]; { top of target }
  LLine.TargetArrow.Shape := asSolidArrow;
  BloxControl1.Blox.Add(LLine);
end;

For full control over link points, arrow shapes, line styles, and required connections, see Lines and linking.

Next steps

  • Guides — elements & libraries, blocks, lines, appearance, interaction, persistence, custom elements, and events.
  • API reference — full class reference.