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.

Add a block to the canvasPascalC++

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;

void __fastcall TForm1::AddBlockButtonClick(TObject *Sender)
{
  TTMSFNCBloxBlock *LBlock = new TTMSFNCBloxBlock();
  LBlock->Left = 40;
  LBlock->Top = 40;
  LBlock->Width = 160;
  LBlock->Height = 80;
  LBlock->Shape = Fmx::Tmsfncbloxcoreblock::RoundRect;
  LBlock->Text = "Hello Blox";
  LBlock->FillColor = MakeGraphicsColor(74, 144, 217);
  LBlock->TextColor = gcWhite;
  BloxControl1->Blox->Add(LBlock);
}

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:

Connect two blocks with a linePascalC++

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;

void __fastcall TForm1::ConnectButtonClick(TObject *Sender)
{
  // TTMSFNCBloxLinkableBlock ships four default link points: 0=top, 1=bottom, 2=left, 3=right.
  TTMSFNCBloxLinkableBlock *LSource = new TTMSFNCBloxLinkableBlock();
  LSource->Left = 40;
  LSource->Top = 40;
  LSource->Width = 140;
  LSource->Height = 70;
  LSource->Text = "Source";
  BloxControl1->Blox->Add(LSource);

  TTMSFNCBloxLinkableBlock *LTarget = new TTMSFNCBloxLinkableBlock();
  LTarget->Left = 40;
  LTarget->Top = 220;
  LTarget->Width = 140;
  LTarget->Height = 70;
  LTarget->Text = "Target";
  BloxControl1->Blox->Add(LTarget);

  TTMSFNCBloxLine *LLine = new TTMSFNCBloxLine();
  LLine->SourceLinkPoint->AnchorLink = LSource->LinkPoints->Items[1]; // bottom of source
  LLine->TargetLinkPoint->AnchorLink = LTarget->LinkPoints->Items[0]; // top of target
  LLine->TargetArrow->Shape = Fmx::Tmsfncbloxcorelinearrow::asSolidArrow;
  BloxControl1->Blox->Add(LLine);
}

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.