Skip to content

Overview

TMS FNC Blox is a set of cross-platform, cross-framework components for Delphi and C++ Builder to easily add feature-rich and user friendly diagramming, flowcharting & graphing capabilities to your applications.

TMS FNC Blox provides TTMSFNCBloxControl component, a panel-like control where user can build diagrams by inserting blocks, lines and link them together. The TTMSFNCBloxSelector component is also provided to allow insert blox by dragging and dropping them on the TTMSFNCBloxControl canvas. The blocks can be customized by changing dozens of available properties. User can change shapes of blocks, shadow, bitmaps, among other features. Blocks can be rotated and resized. TMS FNC Blox provides an open architecture to allow users to building their own blocks by inheriting from TTMSFNCBloxBlock class and registering them by using OnRegisterElements event.

Among the many features that make TMS FNC Blox the ultimate cross-platform and cross-framework diagramming and flowcharting component set are:

  • High-quality (anti-aliasing) drawing of blocks and lines
  • Open architecture for building custom blocks and lines inherited from base classes
  • Ready-to-use flowchart, arrow and electric blocks
  • Linking system allow customizable link points and information retrieval of connected blocks
  • Block gradient, shadow and bitmap
  • Full block customization: pen, brush, color, selection color, minimum width and height
  • Block text customization: horizontal and vertical alignment, font, word wrap, clipping
  • Customizable link points in blocks
  • Full line (link) customization: pen, source arrow shape, target arrow shape
  • Arc & bezier lines, polygon objects
  • Block rotation supported (including text, bitmap and gradient)
  • Separate TTMSFNCBloxToolBar component for easy editing with no line of code (needs TMS FNC UI Pack)
  • Snap grid
  • Rulers
  • Saving / loading to/from file and stream
  • Zoom in / out
  • Panning
  • Helper classes TTMSFNCBloxBlockDrawer for easy custom drawing on custom blocks
  • Clipboard operations, object deletion and inserting, zooming, and more.

Availability

Supported frameworks and platforms

  • VCL Win32/Win64
  • FMX Win32/Win64, macOS, iOS, Android, Linux
  • LCL Win32/Win64, macOS, iOS, Android, numerous Linux variants including Raspbian
  • WEB: Chrome, Edge, Firefox, …

Supported IDE’s

  • Delphi XE7 and C++ Builder XE7 or newer releases
  • Lazarus 1.4.4 with FPC 2.6.4 or newer official releases
  • TMS WEB Core for Visual Studio Code 1.3 or newer releases

Important notice

TMS FNC Blox requires TMS FNC Core (separately available at the My Products page)

Quick start

The main component in TMS FNC Blox is the TTMSFNCBloxControl component. The TTMSFNCBloxControl component is a visual control which holds and displays the diagram or flow chart, and allows editing of it. Additionally, the TTMSFNCBloxSelector component that displays all the available blocks in a single categorized list can be used to quickly insert blocks by dragging and dropping them on to the blox control.

Another helpful component is the TTMSFNCBloxToolBar. Although TTMSFNCBloxControl component does not require the TTMSFNCBloxToolBar component to work, the toolbar component is very useful to quickly get started, since it allows easy insertion and editing of blocks without requiring a single line of code.

Note

TTMSFNCBloxToolBar needs to be installed manually via a separate package that requires the TMS FNC UI Pack dependency, more information about this can be found in the Installing the TTMSFNCBloxToolBar component chapter

Getting started with TMS FNC Blox is as quick as dropping both TTMSFNCBloxControl and TTMSFNCBloxToolBar/TTMSFNCBloxSelector components in a form, and linking the toolbar to the blox control, by setting the BloxControl property of the TTMSFNCBloxToolBar/TTMSFNCBloxSelector component to make reference to the TTMSFNCBloxControl component. When the TTMSFNCBloxToolBar/TTMSFNCBloxSelector detects a TTMSFNCBloxControl on the form, the BloxControl will automatically be assigned with the first instance it encounters during creation.

With this setting, and with no line of code, you will have a running application with already provides diagramming and flowcharting capabilities. Just choose an object from the toolbar/selector and click the blox control to insert objects, and you can start editing, resizing, moving and deleting them. Below is a screenshot of the TTMSFNCBloxToolBar (left), the TTMSFNCBloxSelector (middle) and the TTMSFNCBloxControl (right).

Getting Started

Diagram Objects

There are two types of diagram objects: blocks and lines. All blocks descend from TTMSFNCBloxBlock class, and all lines descend from TTMSFNCBloxLine block. TTMSFNCBloxElement class is the ancestor for both classes.

TTMSFNCBloxElement

  • TTMSFNCBloxLine
  • TTMSFNCBloxBlock

Basic objects

By default, TMS FNC Blox provides some basic blocks and lines, which descend from both TTMSFNCBloxBlock and TTMSFNCBloxLine classes.

Getting Started1

  • TTMSFNCBloxArc: a TTMSFNCBloxLine descendant, configured as a curved line.
  • TTMSFNCBloxBezier: a TTMSFNCBloxLine descendant, configured as a Bezier-like line.
  • TTMSFNCBloxBlock: a basic diagram block. Descends from TTMSFNCBloxElement and published all of its properties, so this block is full-featured, allow setting colors, shadows, gradients, pictures, linkpoints, shapes, … .
  • TTMSFNCBloxImageBlock: a TTMSFNCBloxBlock descendant which sets some properties to look more like an image block. (TTMSFNCBloxBlock aslo provides imaging capabilities, along all other blox objects)
  • TTMSFNCBloxLine: a single line (one segment).
  • TTMSFNCBloxLineJoin: a TTMSFNCBloxBlock descendant which is just a link point container. You can attach lines to this block.
  • TTMSFNCBloxLinkableBlock: a TTMSFNCBloxBlock descendant that adds 4 default link points.
  • TTMSFNCBloxSideLine: a TTMSFNCBloxLine descendant, configured with several perpendicular segments. The number of segments is calculated automatically.
  • TTMSFNCBloxTextBlock: a TTMSFNCBloxBlock descendant which sets some properties to look more like a text block (TTMSFNCBloxBlock also provides text capabilities, along all other blox objects).
  • TTMSFNCBloxTriangle: a TTMSFNCBloxBlock descendant, shaped as a triangle.

Extra Objects

TMS FNC Blox provides extra objects to be used inside the TTMSFNCBloxControl component. These extra objects are included for instant usage, but also as samples that demonstrate how to extend TMS FNC Blox by creating more blocks. The extra objects in TMS FNC Blox are grouped in the following categories:

  • Flowchart blocks: Provides some basic blocks for flowcharting diagrams such as action, start, end, decision …
  • Electric blocks: Provides some basic blocks for electric diagrams such as resistor, capacitor, voltage source, ground …
  • Arrow blocks: Provides some arrow-shaped blocks.
  • DFD blocks: Provides some data flow diagram blocks.
  • UML blocks: Provides some Unified Modeling Language blocks.

All extra objects are registered by the TTMSFNCBloxControl and appear in the TTMSFNCBloxSelector component at runtime. Below is an overview of the types that are registered for each category.

Getting Started2

  • TTMSFNCBloxFlowActionBlock
  • TTMSFNCBloxFlowCommentBlock
  • TTMSFNCBloxFlowDataBlock
  • TTMSFNCBloxFlowDatabaseBlock
  • TTMSFNCBloxFlowDecisionBlock
  • TTMSFNCBloxFlowDocumentBlock
  • TTMSFNCBloxFlowInputBlock
  • TTMSFNCBloxFlowListBlock
  • TTMSFNCBloxFlowTerminalBlock

Getting Started3

  • TTMSFNCBloxCapacitorBlock
  • TTMSFNCBloxComparatorBlock
  • TTMSFNCBloxDCCurrentSourceBlock
  • TTMSFNCBloxDCVoltageSourceBlock
  • TTMSFNCBloxDiodeBlock
  • TTMSFNCBloxDuoCoilXFormBlock
  • TTMSFNCBloxGroundBlock
  • TTMSFNCBloxInductorBlock
  • TTMSFNCBloxLampBlock
  • TTMSFNCBloxMosfetBlock
  • TTMSFNCBloxNonLinearInductorBlock
  • TTMSFNCBloxNPNTransistorBlock
  • TTMSFNCBloxNPTIGBTBlock
  • TTMSFNCBloxPINBlock
  • TTMSFNCBloxPNPTransistorBlock
  • TTMSFNCBloxPTIGBTBlock
  • TTMSFNCBloxResistorBlock
  • TTMSFNCBloxSwitchBlock
  • TTMSFNCBloxThyristorBlock
  • TTMSFNCBloxTriCoilXFormBlock
  • TTMSFNCBloxZenerDiodeBlock

Getting Started4

  • TTMSFNCBloxBlockDoubleArrowBlock
  • TTMSFNCBloxBlockSingleArrowBlock
  • TTMSFNCBloxChevronArrowBlock
  • TTMSFNCBloxCornerDoubleArrowBlock
  • TTMSFNCBloxCornerSingleArrowBlock
  • TTMSFNCBloxDoubleArrowBlock
  • TTMSFNCBloxQuadArrowBlock
  • TTMSFNCBloxStandardArrowBlock
  • TTMSFNCBloxTripleArrowBlock

Getting Started5

  • TTMSFNCBloxDFDDataFlowLine
  • TTMSFNCBloxDFDDataStoreBlock
  • TTMSFNCBloxDFDInterfaceBlock
  • TTMSFNCBloxDFDProcessBlock

Getting Started6

  • TTMSFNCBloxUMLActionStateBlock
  • TTMSFNCBloxUMLConstraintBlock
  • TTMSFNCBloxUMLGenericLine (Control Flow)
  • TTMSFNCBloxUMLDecisionBlock
  • TTMSFNCBloxUMLFinalStateBlock
  • TTMSFNCBloxUMLInitialStateBlock
  • TTMSFNCBloxUMLNoteBlock
  • TTMSFNCBloxUMLGenericLine (Object Flow)
  • TTMSFNCBloxUMLObjectInStateBlock
  • TTMSFNCBloxUMLSignalReceiptBlock
  • TTMSFNCBloxUMLSignalSendBlock
  • TTMSFNCBloxUMLStateBlock
  • TTMSFNCBloxUMLTransitionForkBlock
  • TTMSFNCBloxUMLTransitionJoinBlock

Getting Started7

  • TTMSFNCBloxUMLComponentBlock
  • TTMSFNCBloxUMLContraintBlock
  • TTMSFNCBloxUMLGenericLine (Dependency)
  • TTMSFNCBloxUMLNodeBlock
  • TTMSFNCBloxUMLNoteBlock
  • TTMSFNCBloxUMLPackageBlock

Getting Started8

  • TTMSFNCBloxUMLActivationBlock
  • TTMSFNCBloxUMLConstraintBlock
  • TTMSFNCBloxUMLGenericLine (Message)
  • TTMSFNCBloxUMLGenericLine (Message async)
  • TTMSFNCBloxUMLGenericLine (Message call)
  • TTMSFNCBloxUMLGenericLine (Message return)
  • TTMSFNCBloxUMLNoteBlock
  • TTMSFNCBloxUMLObjectLifelineBlock

Getting Started9

  • TTMSFNCBloxUMLActorBlock
  • TTMSFNCBloxUMLGenericLine (Communicates)
  • TTMSFNCBloxUMLConstraintBlock
  • TTMSFNCBloxUMLGenericLine (Extends)
  • TTMSFNCBloxUMLNoteBlock
  • TTMSFNCBloxUMLPackageBlock
  • TTMSFNCBloxUMLUseCaseBlock
  • TTMSFNCBloxUMLGenericLine (Uses)

Getting Started10

  • TTMSFNCBloxUMLAssociationClassBlock
  • TTMSFNCBloxUMLAssociation
  • TTMSFNCBloxUMLGenericLine (Binding)
  • TTMSFNCBloxUMLBoundElementBlock
  • TTMSFNCBloxUMLClassBlock
  • TTMSFNCBloxUMLComposition
  • TTMSFNCBloxUMLConstraintBlock
  • TTMSFNCBloxUMLDataTypeBlock
  • TTMSFNCBloxUMLGenericLine (Dependency)
  • TTMSFNCBloxUMLExceptionBlock
  • TTMSFNCBloxUMLGenericLine (Generalization)
  • TTMSFNCBloxUMLInterfaceBlock
  • TTMSFNCBloxUMLLink
  • TTMSFNCBloxUMLMetaclassBlock
  • TTMSFNCBloxUMLNoteBlock
  • TTMSFNCBloxUMLObjectBlock
  • TTMSFNCBloxUMLPackageBlock
  • TTMSFNCBloxUMLParamClassBlock
  • TTMSFNCBloxUMLGenericLine (Refinement)
  • TTMSFNCBloxUMLSignalBlock
  • TTMSFNCBloxUMLSubsystemBlock
  • TTMSFNCBloxUMLGenericLine (Trace)
  • TTMSFNCBloxUMLGenericLine (Usage)
  • TTMSFNCBloxUMLUtilityBlock

Controlling visual editing of diagram

The toolbar component makes it easier to allow visual editing of diagram: end-user just click the toolbar to choose a block, and then click on the blox control to insert the selected block. However there are several methods in the TTMSFNCBloxControl component that allows you to control visual editing of the diagram. In summary, TTMSFNCBloxControl implements the concept of “state”, so depending on the state of the TTMSFNCBloxControl component the end-user is able to do something with the current diagram.

States

The TTMSFNCBloxControl component can be in any of these states:

  • Browsing: end-user is able to select, move, resize and rotate blocks. This is the default state.
  • Inserting: end-user is able to insert a block in the TTMSFNCBloxControl component.
  • Panning: end-user is panning the diagram (dragging inside the TTMSFNCBloxControl component).
  • Zooming: end-user is zooming the diagram in or out.

These are the basic four states. They define what end-user actions do in the diagram, in terms of visual editing. For example, what happens if the end-user left-clicks the diagram, keeps the left button of the mouse, finger pressed, moves the mouse, finger some pixels and then release the button, finger? It depends on the state of the TTMSFNCBloxControl component. If the state is "browsing", then the end-user action will select some diagram objects. If state is inserting, it will insert an object in the TTMSFNCBloxControl component. If state is panning, it will move the diagram some pixels in the mouse, finger direction. If state is zooming, it will zoom the diagram. The default state is browsing. So, to put the diagram in the other four states, you can use some key methods.

Insert mode (state)

Call StartInsertingElement method to put the TTMSFNCBloxControl component in insert mode. After calling this method, any mouse, or touch operation like clicking or dragging will insert a new object. The object to be inserted is the first parameter of the StartInsertElement, and must be identified by its control id. The second parameter (AKeepInserting) specifies if the TTMSFNCBloxControl component should go back to browsing mod after the object is inserted (false), or if the TTMSFNCBloxControl component will continue in the insert mode (true), allowing the same object to be inserted multiple times. At any time, the TTMSFNCBloxControl component can be put back in browsing mode by calling CancelInsertingBlock method.

procedure TForm1.NewBlockButtonClick(Sender: TObject);
begin
 TMSFNCBloxControl1.Presenter.StartInsertingElement('TTMSFNCBloxBlock');
//Insert the TDiagramBlock object once
end;
procedure TForm1.NewTextButtonClick(Sender: TObject);
begin

TMSFNCBloxControl1.Presenter.StartInsertingElement('TTMSFNCBloxTextBlock',
true); //Insert the TTextBlock object multiple times
end;
procedure TForm1.CancelInsertButtonClick(Sender: TObject);
begin
 TMSFNCBloxControl1.Presenter.CancelInsertingBlock;
end;
procedure TForm1.NewBlockButtonClick(Sender: TObject);
begin
 TMSFNCBloxControl1.Presenter.StartInsertingElement('TTMSFNCBloxBlock');
//Insert the TDiagramBlock object once
end;
procedure TForm1.NewTextButtonClick(Sender: TObject);
begin

TMSFNCBloxControl1.Presenter.StartInsertingElement('TTMSFNCBloxTextBlock',
true); //Insert the TTextBlock object multiple times
end;
procedure TForm1.CancelInsertButtonClick(Sender: TObject);
begin
 TMSFNCBloxControl1.Presenter.CancelInsertingBlock;
end;

Panning mode (state)

To put the TTMSFNCBloxControl component in panning mode, just call StartPanning method. To bring the TTMSFNCBloxControl component back to browsing state, call CancelPanning.

procedure TForm1.StartPanningButtonClick(Sender: TObject);
begin
 TMSFNCBloxControl1.Presenter.StartPanning;
end;
procedure TForm1.CancelPanningButtonClick(Sender: TObject);
begin
 TMSFNCBloxControl1.Presenter.CancelPanning;
end;

Zooming mode (state)

To put the TTMSFNCBloxControl component in zooming mode, call StartZooming. You must inform if the zoom is in (more zoom) or out (less zoom). To bring the TTMSFNCBloxControl component back to browsing state, call CancelZooming.

procedure TForm1.ZoomInButtonClick(Sender: TObject);
begin
 TMSFNCBloxControl1.Presenter.StartZooming(zsZoomIn);
end;
procedure TForm1.ZoomOutButtonClick(Sender: TObject);
begin
 TMSFNCBloxControl1.Presenter.StartZooming(zsZoomOut);
end;
procedure TForm1.CancelZoomButtonClick(Sender: TObject);
begin
 TMSFNCBloxControl1.Presenter.CancelZooming;
end;

Loading and saving a diagram

Saving and loading a diagram is a very simple task, and you can do that just by using the methods SaveToFile and LoadFromFile.

TMSFNCBloxControl1.SaveToFile('MyBlox1.blox');
TMSFNCBloxControl1.LoadFromFile('MyBlox2.blox');
As an alternative, you can load/save from/to a stream. This can be useful for saving diagrams in different storages, such as databases.
TMSFNCBloxControl1.SaveToStream(AStream);
TMSFNCBloxControl1.LoadFromStream(AStream);

Registering new blocks

To register new blocks, you can use the OnRegisterElements event from TTMSFNCBloxControl and use the RegisterElement call located in the *.TMSFNCUIRegistration unit (* can be FMX. VCL. or LCL depending on the chosen framework). After registering the new block the selector / toolbar will automatically pick up the new category and block. If for some reason the selector does not refresh itself or doesn’t show the newly registered block, call Rebuild on both the toolbar and the selector. Below is a sample of how to add a new block.

type
 TMyBlock = class(TTMSFNCBloxBlock)
 protected
 procedure GetBlockPath(APath: TTMSFNCBloxPath; {%H-}ADrawer:
TTMSFNCBloxBlockDrawer); override;
 end;

implementation

procedure TForm1.TMSFNCBloxControl1RegisterElements(Sender: TObject);
begin
 RegisterElement(TMyBlock, '', 'My Block', 'My Blocks');
end;

{ TMyBlock }

procedure TMyBlock.GetBlockPath(APath: TTMSFNCBloxPath;
 ADrawer: TTMSFNCBloxBlockDrawer);
var
 poly: TTMSFNCBloxPointArray;
 an1, an2, sin1, sin2, cos1, cos2, inr, outr: Single;
 I: Integer;
begin
 inherited;
 APath.Reset;
 an1 := PI / 5.0;
 an2 := 2.0 * an1;

 sin1 := Sin(an1);
 sin2 := Sin(an2);

cos1 := Cos(an1);
 cos2 := Cos(an2);
 if Width > Height then
 begin
 outr := Height / 2;
 inr := Height / 4;
 end
 else
 begin
 outr := Width / 2;
 inr := Width / 4;
 end;

 SetLength(poly, 11);

 for I := 0 to length(poly) - 1 do
 begin
 poly[i] := TMSFNCBloxPoint(Width / 2, Height / 2);
 end;

 poly[0].Y := poly[0].Y - outr;
 poly[1].X := poly[1].X + inr * sin1;
 poly[1].Y := poly[1].Y - inr * cos1;
 poly[2].X := poly[2].X + outr * Sin2;
 poly[2].Y := poly[2].Y - outr * cos2;
 poly[3].X := poly[3].X + inr * sin2;
 poly[3].Y := poly[3].Y + inr * cos2;
 poly[4].X := poly[4].X + outr * sin1;
 poly[4].Y := poly[4].Y + outr * cos1;
 poly[5].Y := poly[5].Y + inr;
 poly[6].X := poly[6].X + poly[6].X - poly[4].X;
 poly[6].Y := poly[4].Y;
 poly[7].X := poly[7].X + poly[7].X - poly[3].X;
 poly[7].Y := poly[3].Y;
 poly[8].X := poly[8].X + poly[8].X - poly[2].X;
 poly[8].Y := poly[2].Y;
 poly[9].X := poly[9].X + poly[9].X - poly[1].X;
 poly[9].Y := poly[1].Y;
 poly[10] := poly[0];

 APath.AddPolygon(poly);
end;

Registering new blocks

Registering new blocks1

Installing the TTMSFNCBloxToolBar component

The TTMSFNCBloxToolBar component is not installed by default, which means it needs to be installed separately, via a separate package. The TTMSFNCBloxToolBar relies on the TMS FNC UI Pack, with a minimum version of 1.7.4.0. Depending on the framework you are working with, you’ll need to install a package following the guidelines below.

1. Install the latest versions of the TMS FNC Core, TMS FNC UI Pack and TMS FNC Blox

FMX

2. Create a new package called FMXTMSFNCBloxBridgePkgD*.dproj

3. Add the units FMX.TMSFNCBloxToolBar.pas and FMX.TMSFNCBloxToolBarReg.pas

4. Build your package which automatically prompts for adding the dependencies to TMS FNC Blox and TMS FNC UI Pack FMX versions (FMXTMSFNCBloxPkgD*.dcp and FMXTMSFNCUIPackPkgD*.dcp)

5. Install the package

VCL

2. Create a new package called VCLTMSFNCBloxBridgePkgD*.dproj

3. Add the units VCL.TMSFNCBloxToolBar.pas and VCL.TMSFNCBloxToolBarReg.pas

4. Build your package which automatically prompts for adding the dependencies to TMS FNC Blox and TMS FNC UI Pack VCL versions (VCLTMSFNCBloxPkgD*.dcp and FMXTMSFNCUIPackPkgD*.dcp)

5. Install the package

LCL

2. Create a new package called LCLTMSFNCBloxBridgePkg.dproj

3. Add the units LCLTMSFNCBloxToolBar.pas and LCLTMSFNCBloxToolBarReg.pas

4. Check “Register Unit” for the LCLTMSFNCBloxToolBarReg.pas file in the file properties section of the package window

5. Add a dependency to LCLTMSFNCBloxPkg and LCLTMSFNCUIPackPkg

6. Install the package

*The full package name depends on the chosen IDE: XE7 (RAD Studio XE7), XE8 (RAD Studio XE8), XE9 (RAD Studio 10 Seattle), XE10 (RAD Studio 10.1 Berlin) or XE11 (RAD Studio 10.2 Tokyo)