Prototype: help on computing the placement of flowchart elements

hi guys we’re doing a project wherein we have to write the code for the placement of flowchart elements. there is just one problem with the sorting of the elements.

ideally, it should look like this:

but right now it looks like this:

attached is the code. and the function that causes the boxes to sort wrong is this:

	shiftDownElements: function(currentY){
		this.elementsWithPositions.each(function(element){
			var parallelProcess = this.getParallelElements(this._currentElement);
			var tempPos = {};
	
				if (element.value.Y >= currentY) {
						debugger;
						tempPos.X = element.value.X;
						tempPos.Y = element.value.Y + this._flowchart.ELEMENTHEIGHT + this._flowchart.SPACEBTWELEMENT;
						this.elementsWithPositions.set(element.key, tempPos);
					}
		}, this);
	},

anyone help?

Possibly, if I can recreate the bad flowchart in my web browser.

sorry if it isnt visually appealing, our main concern right now really is to get the placement correct. is there anything else i need to post to make it easier for you guys?

A link to a test page, so that we can experience it in our own web browser.

Either that, or enough information (html + css + js) for us to recreate it in our own machine.

ok here you go. the shiftDownElements function i mentioned is on the FlowChartElementsManager2.js file. the flowcharts themselves are just boxes when you view it, we’re determining the placements of the boxes thru firebug.

There seems to be a script file missing from your zip, FlowChartElementsManager.js
Is that file necessary?

hi, no it isnt, i forgot to remove it from the index.html file, please ignore it hehe.

The shiftDownElements gets handed elements in this order:
A9, A10, A11, A5, A6, A7, A8

When A9 is shifted down to make room for A10, that causes A9 to be below A10

I presume that you need the elements passed to that function in this order?
A11, A10, A9, A8, A7, A6, A5

^hi yes that is correct. i need them to be sorted in an ascending way.

So it seems that this function is where the attention should be focused on. Right?



arrangeData: function(data){
    var newData = $A();
    var newHash = $H();
    data.each(function(element){
        newData.push(element.key);
        newData.push(element.value.to);
    }, this);
    newData = newData.flatten().uniq().compact();
    newData.each(function(item){
        newHash.set(item, this._elementsWithRelations.get(item));
    }, this);
    return newHash;
},

Were you aware that objects like Hash sets, cannot guarantee to maintain the relative ordering of its objects?

From the Quirksmode - Associative page.

Note that JavaScript doesn’t guarantee any particular order for the properties. So you cannot expect the property that was defined first to appear first, it might come last.