GRAPH EDITOR


 
 
 
 

Graph Editor is the Java based graph editing software, that aims at users who need to display and manipulate, graphs with different types of nodes, carrying various data. We chose Java for development of this program, because it is object oriented, portable, and has functionality necessary to develop graphic user interface.  Basic idea behind this program is to develop an extendible graph editing application, which will allow users/programmers to easily develop and incorporate new types of nodes, edges and new graph layout algorithms in the framework of Graph Editor.

At this time, few nodes and edge examples are available, as well as basic graph manipulation algorithms, whose only purpose is to demonstrate basic functionality of the editor, and inspire other programmers (in Java) to develop new kinds of nodes or implement new algorithms for manipulation/layout (or  improve framework, by adding extra functionality, without compromising open ended nature of this graph editor).

For those who are interested in framework, please refer to the Graph package documentation (generated by javadoc), which should give you good picture of the organization of framework. If you wish to investigate further, you can download code, and if you wish to make suggestion or report a bug or strange behavior of application on your platform, please send an e-mail to: geditor@krcko.co.yu

 
 
 

When you first activate program (or load the page, containing the applet), two windows, will appear. The first one, containing the working space is called Graph Edit Frame, and other with icons representing tools will be referred to as Toolbox.
 

(note: You can move toolbox by pressing the mouse button on the border of the toolbox, and while holding the button down move the toolbox, to the desired position.)

Toolbox, at this time contains four tools:
 

Node draw tool
Edge draw tool
Selection tool
Movement tool
 

Node draw tool
 

This tool is used for node drawing, you can chose which node type you want to draw from the Node menu in the Graph Edit Frame. Please click on the Node menu to see which node types are currently available, you should see three types:
 
• NodeOneField. This node contains only one text field, which is used for entering some short text.
• NodeTwoFields. Same as the above, only it contains two fields, again used for shorter texts.
• NodeProfile. More complex type of node, consisting of both labels explaining text fields to the right of each label. You can enter some basic data about your friends of colleagues in this type of node.

Once you selected one of the node types, rectangle that approximately shows the size of the node of selected type will appear, move this rectangle, by dragging the mouse to location where you would like to place new node and then click the mouse button. You can place nodes anywhere in the Graph Panel (working surface in the Graph Edit Frame), except over another Node.

 If you place node so that it lies beyond the edge of the Graph Panel, Graph Panel will be extended so that whole node lies inside of the Graph
Panel.  You can use the scroll bars in the Graph Edit Frame window to make sure, that your node is inside of the Graph Panel. Try placing your nodes
so that part of nodes lies outside the Graph Panel, and see what happens.

You can change the node type in any time, by clicking on the Node menu.

Try this: put one of each node types on the Graph Panel.

If you want to clear the panel, click on the File and New, and all of the nodes will be erased.

You may experience, short delay between clicking on the surface and the time that a node is placed on the Graph Panel, after you have switched to a new type of node, for the first time (especially if you are using graph editor applet). This delay is due to Java Virtual Machine class loader, which loads the class from the disk or the remote host on the net.
 
 

Edge draw tool
 
 

Edge draw is used for drawing an edge between two nodes (no reflexive nodes at this time, but again this constraint can be easily lifted, and if you are interested in doing so, take a look at the package documentation.)

(if you have erased all of the nodes, before coming to this point, please place couple of nodes on the panel, before continuing)

As with Nodes, you have to chose the type of the edge you are going to draw, at this time there are two types of the edges:
 

• EdgeLine.Line between two nodes, with a small rectangle in the middle of the Line. (This rectangle is empty, but can carry any kind of information, and it is called Edge Attribute, in future versions you will be able to assign different types of attributes to each edge).
• EdgeDirecte.An arrow with the edge attribute rectangle in the middle. It is called directed, because you can determine the source and the target (or the beginning and the end) of the edge.

 
To draw an edge, try this: select one of the edge types, drag your mouse so that it points to the part of the node, that is not occupied by the text fields, or other editable components (this means empty area around text fields, or a label). Press a button, and holding the button drag the mouse away from the node, towards another node.  You will see that, there is a line from the center of the source node, ending in the position of the pointer on the screen. Drag the mouse, in the area of another node, again, that area should not be occupied by editable components, and release the mouse. There should be an edge between these two nodes.

Try this: drawing different edges between different nodes.

Again if you notice some delay, after you have switched to new edge type, and you are drawing the edge of that type for the first time, this is because the JVM is loading new class.

Try this: draw a node so that it lies, almost beyond left edge of the graph panel, and another so that it lies, almost beyond the right edge of the graph. Scroll the graph Panel, so that left node is not visible. Try drawing edge from the right node to the left node, by moving the mouse pointer beyond the left edge of the graph panel. Scroll bar, will scroll towards the left side, until it reach the end, or you move the mouse pointer inside of the graph panel. You can use this feature, for drawing edges between, two distant nodes in the graph.

Selection tool

This is one of the most important tools in the framework, since most of the manipulation over the graph, relies on the selection tool. Selection tool, allows you to select nodes and edges, by rubber band technique of direct clicking on the nodes and edges (to be more precise, Edge Attributes, this is why we needed Edge Attributes, although they do not carry any useful information)

Rubber band, is the usual technique used for selecting objects in drawing application, the basic idea is that user anchors one point on the panel, and then extends "imaginary" rubber band rectangle over the objects she wants to select. All objects that are inside the rubber band are selected and accordingly marked.

There are couple things to remember about our rubber band selection:

• only nodes that are completely inside of the rubber band will be selected
• only edges between selected nodes are marked selected, edges between selected and not-selected node, will not be selected
• you can extend rubber band, only to right and down, so when you chose where to start extending rubber band rectangle from, please chose the upper left corner

Try this: Move mouse pointer, so that it is to the left and above the node(s) you want to select, press the button, and while holding the button pressed drag the mouse, so that rectangle includes whole node(s). Once you are sure that all of the nodes you wanted to select, are inside the rectangle, release the button, and notice that those nodes and edges between them, are now marked. Notice the different way that nodes, and edge attributes are marked.

Another way, for selecting nodes and/or edges is simply clicking on them (again, you should not click on the editable components, but only on the labels and the empty area around the components).

Try to deselect, some of the nodes or edges that you selected by the rubber band.
 
From this point, it is possible to transfer control over selected nodes and edges, to other tools that will manipulate them (copy, delete, cut, transform, etc.)

If you look in the Edit menu in the Graph Edit Frame, you will notice the standard edit menu options:

• Copy - Copies the selected nodes and edges to the clipboard.
• Paste - Pastes the selected nodes and edges from the clipboard, to the upper left corner of the graph panel.
• Delete - Deletes the selected nodes and edges from the graph panel.

Movement tool
 

Movement tool is special kind of tool, that is launched on the top of the Selection tool (you can launch it all by itself, but will not be able to do anything useful).
It assumes that Selection tool and takes over from the Selection tool. User can move the nodes that have been previously selected using Selection tool. Once you start the Movement Tool, it estimates the surface that selected nodes cover and gives user control over the rectangle representing that surface. From this point on, you manipulate nodes through rectangle that represents surface covered by selected nodes (note: that only selected edges and nodes are moved, other nodes stay in place) When you click on the Panel, you are placing the upper left corner of the rectangle on that spot. By pressing the mouse button, and holding it while dragging the mouse, you will make this rectangle visible and you will be able to move it around, again when you release the mouse button upper left corner of the rectangle will be placed on that spot.

Try this: Select several nodes, and switch to movemen tool. Move the pointer to the part of the graph panel that is empty, and click the mouse button. Selected nodes and edges should have moved, edges between selected and not selected nodes, will adapt to the new position of the nodes. Now try dragging the mouse, while holding the mouse button down, again move the pointer to the empty part of the panel, and release the button.
 
 

If you are interested in implementing your own manipulation/transformation algorithms, take a look at the Graph package documentation.

This is the basic editing functionality, available in this graph editor. If you think that there are other important basic editing operations, that should be implemented please send  geditor@krcko.co.yu

1. Why are those small rectangles in the middle of each edge? Can they be hidden?

2. How can I create my own nodes? Are there any guidelines?

3. I created a new node, how can I incorporate it in my application?

4. How can I save my graphs!

5. 3D graph editor?

6. Does node have to be rectangular?

7. I think that <tool> should support <feature>!  Interactive layout, dynamic drawing, fish eye ... wish list?

8. I loaded the graph editor on <platform>, and it did not work properly!

9. There is some strange output on my screen (java console), and does not  look like standard java virtual machine output!

10. Traces of the node drawing rectangles appear, after I click on the graph panel. How can I remove them?

11. I have copied graph in the clipboard, but when I try to paste it in another application it does not work?

12. Documentation is not clear about <question>. Could you be more precise?

13. Will graph editor turn into a bean, can I incorporate it in my program?

14. There is another graph editor, that offers the same functionality as graph editor!
 
 
1. Why are those small rectangles in the middle of each edge? Can they be hidden?

Small rectangles in the middle of each edge are called edge attributes.  There are two reasons for their existence:
a) they can carry additional data about the edge, and can be used for placing controls for editing attributes of the edge.
b) they are used for selecting nodes for copying or deleting. (this approach greatly reduces amount of calculation)

These rectangles can be hidden -- Edit/Hide Attributes and shown with Edit/Show Attributes. Note that Movement tool functions faster
with hidden attributes (while with shown attributes it is known to mess up the screen, this will be taken care of in next version, planned for the late
June)

2. How can I create my own nodes? Are there any guidelines?

Creating nodes is quite simple (as opposed to creating edges, or tools -- collectors). Take a look at the javadoc generated documents.

3. I created a new node, how can I incorporate it in graph editor?

You should put your new node class in the directory with other classes from Graph package, and add new option to menu bar, and modify actionPerformed in the GraphEditFrame so that node type can be switched, and there you go.

4. How can I save my graphs!
 
 Serialization support is available, but not in the applet version, application version will be made available on the separate page. If you want to be notified when this happend send an e-mail to geditor@krcko.co.yu

5. 3D graph editor?

We are waiting for the Java 3D api, to become fully functional, and then we will start implementing 3D graph layout and drawing algorithms.

6. Does node have to be rectangular?
 
At this time: Yes (because all nodes inherit Panel). In future nodes will not have to be rectangular, but probably most of the interest will still be in the Panel based Nodes, since they are useful in form displaying.

7. I think that <tool> should support <feature>!  Interactive layouts, dynamic drawing, fish eye ... wish list?

If you have ides or references that you think I should know of, please send me an e-mail to geditor@krcko.co.yu
In next couple of months I will concentrate on speeding up the application (removing multiple updates, changing from hashtable to some faster data structures, etc) so do not expect me to start working on what you think is "a great tool" right away.

8. I ran graph editor on/in <platform/browser>, and it does not work properly!

The only <platform> that I think of as stable is Visual Age for Java appletviewer (I am amazed by the number of bugs I discovered in other browsers/appletviewers, that are not reproducible in the VAJ appletviewer ?!). I will take a look at all different browsers, once that I am satisfied with the framework (since there is still many things that have to be corrected), by that time, most of the bugs will be removed anyway.

9. There is some strange output on my screen (java console), and does not  look like standard java virtual machine output!

Ok.

10. Traces of the node drawing rectangles appear, after I click on the graph panel. How can I remove them?

Refresh from File menu or by resizing the Window. If you do have "ghosts" on your screen, please try to reproduce them and when you are sure how and when they appear tell me about it  geditor@krcko.co.yu

11. I have copied graph in the clipboard, but when I try to paste it in another application it does not work?

Clipboard that is used in graph editor is an internal clipboard. Exporting of graphs to other applications is a matter of some complexity (although) very interested, and I will devote time and effor to it, once I finish more important (and boring) parts.

12. Documentation is not clear about <question>. Could you be more precise?

Yes, send an e-mail to geditor@krcko.co.yu

13. Will graph editor turn into a bean, can I incorporate it in my program?

One day, maybe, probably ... actually what happens with graph editor, greatly depends on the interest of other people, and if somebody wants to invest some time in developing (implementing) algorithm for graph editor, it would be great, and I would do my best to help out ...

14. There is another graph editor, that offers the same functionality as graph editor!

Ok, send me the URL.