Click here to Skip to main content
15,028,591 members
Articles / Web Development / HTML
Article
Posted 26 Aug 2009

Stats

40.3K views
852 downloads
28 bookmarked

Draw Connecting Lines between Items on a Web Page (Mozilla/Internet Explorer)

Rate me:
Please Sign up or sign in to vote.
5.00/5 (6 votes)
26 Aug 2009CPOL2 min read
GUI allows user to "connect" items shown on a web application; lines are drawn dynamically showing connections
Image 1

Introduction

This simple HTML page displays two columns of items, representing items in two tables in a database. The interface allows the user to "connect" these items in a 1-to-1 format by clicking them. A line is drawn between connected items, giving the user a graphic representation of their connections. Connections can also be removed by the user clicking a connected item again.

Background

This is an extension of a line-drawing method described by Doga Arinir in his article: Drawing Lines in Mozilla Based Browsers and the Internet Explorer.

Using the Code

Everything is in a single HTML file (except the server-side save function, not included). When the user clicks an item in either table, the item is prepared to be connected. If the user then clicks an unconnected item from the other table, a connection is made. A line is drawn to show the connection. The connections are made by the following two functions:

JavaScript
function setSource(oSrc) {
	//if another source was clicked first, unhilite it
	if (oSource != null) {
		if (oSource.className == "treeItem_hi") {
			oSource.className = "treeItem";
		}
		oSource = null;
	}
	//if this source is already set, clear its line and its target
	if (oSrc.className == "treeItem_set") {
		//this source was already set; clear
		clearElementSetting(oSrc.id);
	}
	oSrc.className = "treeItem_hi";
	oSource = oSrc;
	if (oTarget != null) {
		drawLine();  //line is drawn from current Source to current Target
		oSource = null;
		oTarget = null;
	}
}
function setTarget(oTar) {
	if (oTarget != null) {
		if (oTarget.className == "treeItem_hi") {
			oTarget.className = "treeItem";
		}
		oTarget = null;
	}
	if (oTar.className == "treeItem_set") {
		//this target already has a source; clear
		clearElementSetting(oTar.id);
	}
	oTar.className = "treeItem_hi";
	oTarget = oTar;
	if (oSource != null) {
		drawLine();  //line is drawn from current Source to current Target
		oSource = null;
		oTarget = null;
	}
}

When an item is clicked, it clears any previously clicked (but not connected) item in its table. Any existing connections to the clicked item are removed. Then if an item was already clicked in the other table, it connects them. By design, if a connection is made to an item that is already connected, the new connection overrides the old one.

In the HTML, onClick event handlers for the source and target items call the functions respectively:

HTML
<span id="Item0_0" class="treeItem" onclick="setSource(this)">Source Item One</span>
<span id="Item1_0" class="treeItem" onclick="setTarget(this)">Target Item 1</span>

Points of Interest

The only "tricky" part of this project was getting connector lines to disappear when their source or target items were clicked again. Since this model is a 1-to-1 data relationship, multiple connections to a single item are not allowed. (You could allow multiple connections with a little more work on the "Package Up" routine). To accomplish this, I've added two custom attributes to each "line segment" DIV: mySrc and myTar. When an element on the page is clicked, the code checks to see if it was already connected (by checking its current style definition). If it was, the "canvas" where all the lines are contained is searched for the line that connected that item. The line is then removed from the document.

Future Work

I have not yet addressed pre-populating the page with the connections currently stored in the database. This would be necessary if this tool was used to edit existing cross-reference connections between items.

History

  • 26th August, 2009: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Mr. James Love
United States United States
No Biography provided

Comments and Discussions

 
QuestionIs it possible to draw one source row to multiple targets rows. Pin
Member 1073299126-Aug-15 19:58
MemberMember 1073299126-Aug-15 19:58 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey22-Feb-12 0:21
professionalManoj Kumar Choubey22-Feb-12 0:21 
GeneralIt's great!. What changes are needed to reload and edit Pin
sdfor27-May-11 5:32
Membersdfor27-May-11 5:32 
GeneralRe: It's great!. What changes are needed to reload and edit Pin
Mr. James Love27-May-11 7:15
MemberMr. James Love27-May-11 7:15 
Eventually I wrote a routine that did populate the line connections from the database, but I use a different scheme now and don't have it anymore. I realized that there was no good way to use this line structure when you had MANY items on either column, because I could not find a good way to make one side scroll and keep the other side fixed (the lines do not redraw smoothly).

Anyway, to draw the lines, you must first render the tables to the page. I stored the connected item IDs in a 2-dimensional array in the javascript. Then once the body is loaded, you can call a function to iterate through the array, drawing a line for each connected pair of IDs.

For example, the array could look something like this:

([23,642],[65,923])

And the element IDs of the elements in the HTML tables would be something like:
Left table:
ItemLeft_23
ItemLeft_65

Right table:
ItemRight_642
ItemRight_923
etc...

For each item in the array, the function would go:
setSource(document.getElementById('ItemLeft_' + array[i,0]));
setTarget(document.getElementById('ItemRight_' + array[i,1]));

and a line would then be drawn between those 2 connected items.

Again, i haven't used this in a long time so you may have timing/overlap issues you'd have to deal with. But that's the basic idea i used. Good luck!
GeneralAnother graphics lib Pin
gstolarov3-Sep-09 14:01
Membergstolarov3-Sep-09 14:01 
GeneralGreat 5* Pin
Anthony Daly29-Aug-09 9:20
MemberAnthony Daly29-Aug-09 9:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.