Can I aggregate divs?

[Nibbus]

Hi there,

I´m writting a program that simulates an ER model. I´ve managed to draw the entities and relations but I´m stuck now...
I drew the relations using "wz_jsgraphics.js" lib from http://www.c-point.com/javascript_vector_draw.htm .

My problem now is that this lib draws lines by creating tons of divs and combining them together, fact that doesn´t meet my goals, because I wanted to turn the relation "draggable" (with dragdrop lib from YUI). Because I have tones not just one div per relation, I cannot turn them draggable. I tryed to insert them into a collection of draggable objects and go from there, but not only the divs are created with no id, but also I can´t determine how many are there in each relation...

Any ideas to go around this would be greatly welcome.
Thanks

[acoder]

I'm not familiar with the graphics library in question, but why can't you determine the number of divs in a relation?

The id problem is not difficult. You could just set them.

[Nibbus]

Hi acoder,

As far as I can tell, this lib uses the same method of other various drawing libs to draw a line. Pixels are painted by creating small background-colored layers (DIV elements), and arranging these to the desired pattern.

The reason I can´t count the divs created is because they´re created on the fly by the function drawLine(x1 , y1 , x2, y2), being in cache until paint( ) is called, function which actually draws them. I analised the code generated using IEDeveloper toolbar, in which I can see the elements created, dozens of them, all without id, just a tag and it´s height ,width and bg color.

If there was a mean of putting them as just one div element would permit me identifying each relation arrow, letting me turn the element draggable.

Here is some code to elucidate you:

function drawLinks()
       {    
            var jg = new jsGraphics("dropZone");
            for (var i = 0; i < oProcess.length ; i++)
            {                
                var el = oProcess[i].procCode;
                var currentX = getProcessPositionX(el);
                var currentY = getProcessPositionY(el);
 
                for (j = 0; j < oProcess[i].procFinish.length ; j++)
                {
                    var nextEl = oProcess[i].procFinish[j];
                    var nextX = getProcessPositionX(nextEl);
                    var nextY = getProcessPositionY(nextEl);
 
                    jg.drawLine(currentX - 242, currentY - 188, nextX - 242, nextY - 188);     //those number are just because of the offset
                    jg.setStroke(2);  //pencil thickness
 
                }
             }
             jg.paint();
             alert("I´m done!");
         }            
 
 

Thanks for your attention and time

[acoder]

Can you determine where these DIV elements are created? Are there within a parent element or just appended to the body?

You can use getElementsByTagName("div") to get the divs. If you can then determine which ones are the divs, then you can make a collection out of them.

[Nibbus]

Can you determine where these DIV elements are created? Are there within a parent element or just appended to the body?

Yes, they´re being created inside another div called "dropZone" .

You can use getElementsByTagName("div") to get the divs. If you can then determine which ones are the divs, then you can make a collection out of them.

I tried that option, but the divs created to the relations are not the only divs inside dropZone, the divs representing the entities are also inside. Even selecting them (entity divs) by class,I still can´t select the other ones which don´t have any id...

I´m so stuck in this that I´m getting bored... maybe I´ll try another aproach, using an image to represent the relation or so... what do you say?

Once again, thank you for your time and cooperation

[acoder]

I tried that option, but the divs created to the relations are not the only divs inside dropZone, the divs representing the entities are also inside. Even selecting them (entity divs) by class,I still can´t select the other ones which don´t have any id...

You don't need to select by id. Try

var divs = document.getElementById("dropZone").getElementsByTagName("div");
// check not entity divs by checking class...
// if you need ids, just set them for the divs