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
  • Navigator to show a complete overview
  • Block rotation supported (including text, bitmap and gradient)
  • 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.
  • Separate toolbar components for easy editing with no line of code (needs TMS FNC UI Pack)

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 10 Seattle and C++ Builder 10 Seattle 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.

The TTMSFNCBloxNavigator can be used to get a complete overview of your TMSFNCBloxControl canvas. This visualizes all of the blocks and lines and gives you the ability to navigate through the available canvas space.

Another set of helpful components are the TMS FNC Blox Toolbars. Although the TTMSFNCBloxControl component does not require the toolbars to work, these components are very useful to quickly get started, since it allows easy insertion and editing of blocks without requiring a single line of code.

Note

The TMS FNC Blox Toolbars need 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 TMS FNC Blox Toolbars chapter.

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

Instead of the selector or in addition to it, you can add a TMS FNC Blox ToolBar as well. The toolbars will pick up the Blox Control if it is already on the form, otherwise you will need to link it with the BloxControl property.

If you want to get an overview of your canvas you can add the TTMSFNCBloxNavigator which works in the same way.

With these settings, 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 an overal screenshot.

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

  • 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: Block descendant, which sets some properties to look more like an image block. TTMSFNCBloxBlock aslo provides imaging capabilities, along all other blox objects)
  • TTMSFNCBloxLineJoin: Block descendant, which is just a link point container. You can attach lines to this block.
  • TTMSFNCBloxLinkableBlock: Block descendant, that adds 4 default link points.
  • TTMSFNCBloxTextBlock: Block descendant, which sets some properties to look more like a text block TTMSFNCBloxBlock also provides text capabilities, along all other blox objects).
  • TTMSFNCBloxTriangle: Block descendant, shaped as a triangle.

  • TTMSFNCBloxPolygon: Block descendant, which lets you draw the shape that you want. You add a new point each time you click and close the shape by double-clicking.

  • TTMSFNCBloxLine: a single line (one segment).

  • TTMSFNCBloxArc: Line descendant, configured as a curved line.
  • TTMSFNCBloxBezier: Line descendant, configured as a Bezier-like line.
  • TTMSFNCBloxSideLine: Line descendant, configured with several perpendicular segments. The number of segments is calculated automatically.
  • TTMSFNCBloxPolyLine: Line descendant, which lets you draw the line that you want, similar to the TMSFNCBloxPolygon.

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

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;

Custom In-place text editor

It is possible to edit the text of the blocks by pressing the F2-button. By default this creates a TTMSFNCBloxMemo that automatically gets the existing text and sets the changed text. It is possible to work with another control or change the default behavior in case this is necessary. This is done by the events on TTMSFNCBloxControl level. To change the type of the editor use the OnGetInplaceEditorClass. This will require to also use the following events: * OnSetInplaceEditorSize: which will request the rectangle to draw the editor in. * OnSetInplaceEditorData: will get the existing data from the block to set in the editor. * OnSetInplaceEditorElementData: will set the data from the block when the editor is closed.

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