Starting help required with block oriented drawing

[Nitorami]

Hi all
I am not entirely new to Lazarus, but need a bit of starting help with my project.
It is a simulation program, the core (in FPC) is finished, and I would now like to integrate it into a GUI. I will need a toolbar which allows to select from various elements and to drop them on the workplace. The workplace as such would be a drawing canvas with a grid, it should be zoomable and probably scrollable for larger drawings. The elements themselves will just be drawn as simple rectangles to start with, but will be linked to Classes within the simulation core of course. They need a context menu to configure parameters, they need to be selectable and movable by the user. There will also be elements (lines) to make connections. Much like an electrical circuit simulation such as spice, or a block oriented drawing program like visio for drawing flowcharts or similar.
Obviously, I need a suitable workplace first. Would I simply use a paintbox ? Can I link it to scrollbars easily or are there better options ? As to the elements, are there any components which already offer properties such as being pickable and moveable ? Or do I need to put this together manually ? Any hint appreciated.

[User137]

How much visuals will there be in the largest projects? TCanvas based drawing has its limitations when it comes to performance, but you can definitely start with TPaintBox or TImage. Is the canvas smaller than 2000x2000? If so, you may get off with problem of scrolling by using TScrollBox as a container for your canvas object. You can make a toolbar using TPanel and placing buttons, dropdowns and other things in it.

But if you plan on having possibility for tens of thousands of objects and lines with vector accuracy for scaling, i'd use OpenGL based approach. I may be biased as developer for suggesting nxPascal, but you can definitely find or use many other choices too. You will need to define what "a line" is. Are you just going to use GL_LINE or a thin rectangle. You would have more control with the rectangle, and make it look like arrow links, animated etc.

Whichever option you choose, the selecting and moving part should come naturally by using the mouse events generated for the graphics context (onMouseDown, onMouseMove...). You know the position of cursor, and the position of each object. Find function that matches a point hit with rectangle, or write a new one.

[Handoko]

I saw nxPascal demo in the Graphics 2017 Contest, impressive. I have tried Allegro.pas recently, the next things in my have to try list are BGRABitmap, GLScene and nxPascal.

TCanvas, TPaintBox and TImage are okay for simple 2D projects. But all of them only offer the basic drawing features, if you need more features you can try BGRABitmap. The thing I like about BGRABitmap is they have a list of tutorials, which is good for beginners:
http://wiki.freepascal.org/BGRABitmap_tutorial

But if the performance is important, you should consider graphics libraries that are hardware accelerated. Like nxPascal, GLScene, Castle Game Engine or direct access the OpenGL using LazOpenGLContext package.

Read more:
http://wiki.freepascal.org/Graphics_libraries
http://wiki.freepascal.org/Developing_with_Graphics

[Akira1364]

If you specifically want something with a large number of pre-existing GUI components that have all of the mouse and keyboard control functionality built in, I'd recommend GLScene.

[Nitorami]

It is a technical program, and nothing fancy required. Simple 2D shapes and lines, plus some text, will suffice. I may consider to add small images or icons, but I don't think this will cause performance problems. There will hardly be more than 100..200 elements on the screen, otherwise it will no longer be legible anyway. If more elements are required I would consider to split it up to different modules selectable by tabs.

Code: Pascal  [Select][+][-]

1. Find function that matches a point hit with rectangle, or write a new one.

Wouldn't I need some object to start with ? If I simply draw a rectangle to the canvas, this won't generate a mouse event. How would get a simple line or rectange to generate a mouse event  ?

[Handoko]

You have to read the mouse position and you need hit-testing.
https://en.wikipedia.org/wiki/Hit-testing

It is not hard but if the screen has multiple objects stacking together, it can be a nightmare. A while ago, here as a great discussion about it. Mr.Madguy gave very detailed explanations and sample codes. I followed the thread but because I was busy and it was too complicated for my little brain, I bookmarked the discussion for reading when I have time. Here it is:

http://forum.lazarus.freepascal.org/index.php/topic,36871

[User137]

Wouldn't I need some object to start with ? If I simply draw a rectangle to the canvas, this won't generate a mouse event. How would get a simple line or rectange to generate a mouse event  ?

The object that owns the canvas will make events when you move mouse over it, click or release mouse. For example if you use TPaintBox, select it and see the Object Inspector. Open Events tab and you can then doubleclick on any event to generate codeblock. Within the new procedure that was generated, you have variable parameters directly for cursor coordinates and mouse button states. You can make a for-loop to go through all the objects for hit testing and break on first match.

[Nitorami]

Ok, understand in principle. However, when I put a TShape on the paintbox, it can generate events by itself and spares me the hit detection. Therefore, can't I make a descendant of TShape to use as basis for my elements ?

[jamie]

Yes, you can use a Tshape for that but, it is based from a TGraphicControl which gives you
no keyboard input functions.

 Build a class that contains the inputs, output connections.
 
 These maybe of various connection points on the objects so you should have an array of
connection points in this class that houses the image object and other items like text to show
etc..
 You could also use a Imagelist as common source of reusable images so not to clutter it all up.

P.S.
 I think I remember seeing an option in the canvas or somewhere in the base controls of assigning a Region so that you can have a special shape.