Composition of objects.

The article contains description of the graphic technique enabling to build sets of objects in various fields of knowledge. The technique can be easily developed and transformed depending on specific functionality of the objects. The language of implementation is ActionScript 2.0, for larger projects - Ñ++.
Task description.
We suggest hereby the technique and its implementation in the form of software, enabling to combine visual objects, using the mouse, into a single composition like it is done, for example, in SQL inquiry constructor of Microsoft Access.
Technique demonstration.
You can load the demonstration version of the program right away from here (80 êá).
Let us choose different IC models as objects of composition, and then unite them into a certain node for the sake of demonstrating the technique. It should be noted, however, that the choice of the field to demonstrate the technique is not of great importance, this area is just closer to us.
In the left part of the loaded application there is “Tree” window containing a set of ICs. Select a few ICs (hereinafter referred to as objects) by clicking the mouse at each. Locate the objects at your work desk at your convenience. Pay attention – the objects can be freely dragged as drag-and-drop function is available.
Also, available is context menu that works selectively. If you click with the mouse right button at the empty space of design area, you will see a lot of system menu items. If you click over an object or a link (see below), new submenu items will be added. Choosing item “Delete Component”, you can remove an object from the work desk.
To make a joint of a couple of objects with a link, it is enough just to click the mouse left button at any of contact areas of an object, and then, without releasing the button, to move the mouse to another object and release the mouse button over the right contact area. Thus a link of connection between two ICs will be established. Similarly, any number of objects can be linked by any number of connections. However, the program does not allow repeated links and links between of the same IC.
If the resolution of your monitor is great, making it difficult to work, switch to the right enlargement and the work will get much more convenient to you. This can be done either from the View Flash Player or from the context menu.
It should be noted that any connection line can have any number of component parts (links). To change a line form, it is enough to click it with the mouse left button and then, without releasing the button, and then, without releasing the button, move the mouse to any place to any place of the work desk and release it. Note, that the color of the line being edited undergoes changes. By selecting submenu item “Delete Line” in the context menu you can delete an unnecessary connection line.
An object included into the pattern, can be moved into any place of the design desk and the connection lines will follow it with only the last (first) link of connection undergoing changes. Thus, the construction entity is maintained.
By placing on the screen a certain number of components and linking them we can get approximately a picture like this:

If we take some effort and streamline the components and connections, ñâÿçè, we get a readable node layout.


So we are able to link the objects. But what can we gain with it?
Every object (in this particular case IC model) has its functionality that is implemented as a job class with certain set of properties, methods and event processors. By linking objects the program builds a composition model. In this case we get a node model assembled from IC models, in another case it could be an SQL query, in a third case it could be something else. It depends on the chosen knowledge field and requires creating the relevant program design module.
>

Note. The article describes only the method of uniting objects and in no way concerns the issues of designing IC-based nodes.
How connections are made.
Connections between objects are MovieClip class heirs, they are created dynamically in the process of drawing and have onPress(), onRelease() event handlers and also context menu itemHandler(_obj, menuItem) handler, where:
  • _obj – name, chosen by connection user;
  • menuItem - context menu submenu item.
The number of links in the connection (line) is not limited by anything, in other words the line can be however complicated.


More accurate definition would be like that: “the sophistication of the composition depends on your computer capacity”.

All the connections are saved in two special arrays:

arrayLines({startNameElement, endNameElement, lineObject ,,,,})
arrayPoint({nameLine, x,y });
  • startNameElement – start element;
  • endNameElement - end element;
  • lineObject, nameLine - line name;
  • x,y - line link coordinates.
The first array establishes correspondence between two objects linked and the name of the connection (line). The second array contains all the set of coordinates of change points, through which the line passes, in the format: the line name – point coordinates.
In this implementation there is no need to make the connections directed and identify them according to the types. However, there are no limitations on making the connections directed and various in quality (whenever required). It is possible to assign direction and quality to the connection from the context menu by adding there additional items and handlers to them.
How objects are made.
Objects to be connected are also MovieClip class heirs. They are created dynamically from same name classes at selecting elements within Tree component. For example:

la3 = new la3(nameLa3, numberLayer, numberLa3);

It should be noted, however, that any visual components, provided with onPress(), onRelease(), onMouseUp() handlers can be used as objects, not only MovieClip heirs. But it must be kept in mind that the amount of work may be much larger in this case.
MovieClip items can also be used as “hot areas”. The number of hot areas within the object is not limited in any way. However, their coordinates are defined at creating the object class.
In spite of every object having several “hot areas”, there is only one event handler for all child areas. For example, it is implemented for an onPress event the as follows:
function _onPress(parametr){
var _this = parametr;
var obj:Object;
for(j in _this){
if((typeof (_this[j]) == "movieclip")) {
obj= _this[j];
// Finding the hot area which we mouse-clicked
if (obj.hitTest(_root._xmouse, _root._ymouse, true)) {…}

}
………
}
}
where,
parametr – MovieClip carrying for child areas.
Just a few words about design environment.
The basic program module comprises just few number of functions, some just to mention:
  • onLoad;
  • onEnterFrame.
and some others.
The total size of the program text without considering IC classes contains about 600 lines.
What is not available in the present demo version of the program so far?
Many things, for example:
  • Automatic binding of connections and components with the grid lines, that would facilitate drawing significantly;
  • Grid lines changeable sizing;
  • Select, Copy, Paste items menu implementation;
  • Saving and restoring of the drawn node layout on disk.
Let us consider it as a task for the future.

Best regards, Veresov Eugene.
© Argument Ltd, 2018 ãîä,  òåë: 8-921-215-45-70,   e-mail