create drag drop flowchart then save to file on client

[radhikams]

Hi

I want to create a drag drop tool box using javascript... Can anyone please guide me in this regard


Thanks

[acoder]

Search for javascript drag drop.

[radhikams]

Search for javascript drag drop.

Hi
Will it be possible to embed a textarea over drawRect using javascript.... Actually my requirement is to write some text dynamically that is whenever the user needs into that rectangle. please suggest me if there is some solution to this ......

Thanks

[acoder]

It should be possible. Show what code you have so far.

[radhikams]

It should be possible. Show what code you have so far.

Sir
can you help me in writing a code for writing the text into some .txt/html file and save in some location...

Thanks

[acoder]

Sir
can you help me in writing a code for writing the text into some .txt/html file and save in some location...

Thanks

If you mean on the client, that's not possible with standard JavaScript supported by most browsers. There are solutions, but they're specific to browsers, e.g. ActiveX/XUL.

Anyway, what has this got to do with your original question?

[radhikams]

If you mean on the client, that's not possible with standard JavaScript supported by most browsers. There are solutions, but they're specific to browsers, e.g. ActiveX/XUL.

Anyway, what has this got to do with your original question?

Hi Sir
Actually the problem is that i need to develop a html page such that the page provides a drag drop tool bix ( jus with a rectagular box and a connector). I srffed the net and got a link
[HTML] http://www.minus3.ch/jsflowchart/demo/[/HTML]
]when we save this page into our local system it gives us all the related files.From this im asked to modify it such that whatever flowchart i draw i could be able to write that into a file and save it as an html file by clicking some button.
But now im stuck with the flow in that code.Im not able to get from where the object(rectangu lar) is being called.... So im not able to proceed further..Can you please help.

Thank You

[acoder]

Do you want to save this on the local filesystem or on the server?

Post your code using [code] tags.

[radhikams]

drag drop

Do you want to save this on the local filesystem or on the server?

Post your code using [code] tags.

I want to save to the local system

[radhikams]

some problem in giving the code .....i will try to post it..

[acoder]

I want to save to the local system

If you want to save to the local system, you will need to use specific solutions for each browser unless you use only one browser. You will also need to change the default settings to allow the script to run.

[radhikams]

drag drop -- code 2

[Here is the code of which im telling ..Please go through it and guide me accordingly.

Flowchart.js

Flowchart = Class.create();
var varText;
Flowchart.prototype.initialize=function(conf)
 {this.conf=conf;
window.flowchart=this; 
  this.objects={};
  this.objectsConnection=[];
  this.editObjectIndex=false;
  this.language();
  this.initKeylistener();
Event.observe(window.document, 'click', this.clickListener.bindAsEventListener(this));
  Event.observe(window.document, 'contextmenu', this.customContext.bindAsEventListener(this));
  
  Event.observe(window.document, "dblclick", function (e) {
    var target=(e.target) ? e.target : e.srcElement;
    
    if(target.tagName.toLowerCase()=="body" || target.tagName.toLowerCase()=="html")
      this.addObject(1, {x: Event.pointerX(e), y: Event.pointerY(e)});
  }.bindAsEventListener(this), false);

  Event.observe(window, "load", function () {
    this.loadImages();
    this.loadText();
  }.bind(this), false);
};
Flowchart.prototype.loadText=function() {
  var objs=document.getElementsByClassName('trans');
  objs.each(function(obj, index) {
    obj.parentNode.innerHTML=this.getText(obj.innerHTML);
  }.bind(this));
};

Flowchart.prototype.getObjectIndex=function() {
  return 'fj_'+String((new Date()).getTime()).substr(8, 5);
};

Flowchart.prototype.getObjectsLength=function() {
  var counter = 0;
  for(var key in this.objects) {
    counter++;
  }
  return counter;
};
Flowchart.prototype.language=function(lang) {
  this.lang = typeof(this.language[bw.lang]) == 'object' ? bw.lang : 'en';
};

Flowchart.prototype.loadImages=function() {
  var index=0;
  var img=[];
  var imgPath=['arrow_down.gif',
	       'arrow_left.gif',
	       'arrow_right.gif',
	       'arrow_up.gif',
	       'corners.gif',
	       'corners_on.gif',
	       'mouse_connect.gif',
	       'mouse_connect_on.gif']
  
  imgPath.each(function(path) {
    img.push(new Image());
    img.last().src="images/"+path;
  });
};
Flowchart.prototype.customContext=function(e) {
  var target=(e.target) ? e.target : e.srcElement;
  
  if(target.tagName.toLowerCase()==(bw.ie ? 'body' : 'html')) {    
    // show flowchart menu    
    this.showContextMenu(false, e);
  }
  
  e.cancelBubble=true;
  e.returnValue=false;
};



Flowchart.prototype.clickListener=function(e) {
 var target=(e.target) ? e.target : e.srcElement;
  
  // nothing clicked
  if(target.tagName.toLowerCase()==(bw.ie ? 'body' : 'html')) {
    this.setMouseMode();
    
    // unmark all flowchart objects
    if(!e.ctrlKey)
      this.unmarkAllObjects();
    
    // hide flowchart menu
    this.hideContextMenu();
    this.disableEdit();
  }
  else if((target.index || target.index===0) && this.mouseMode=="connect") {
    this.setMouseMode("connect");
  }
};
Flowchart.prototype.initKeylistener=function() {

	
  // new keylistener object
  this.keyListener = new Key.listener();
  
  // moving objects with up/down/left/right
  this.keyListener.add('down', 37, function(e, direction) { 
    this.moveObjectByKey(e, 'left'); 
  }.bindAsEventListener(this));

  this.keyListener.add('down', 39, function(e, direction) { 
    this.moveObjectByKey(e, 'right'); 
  }.bindAsEventListener(this));

  this.keyListener.add('down', 38, function(e, direction) {
    this.moveObjectByKey(e, 'up');
  }.bindAsEventListener(this));
  
  this.keyListener.add('down', 40, function(e, direction) { 
    this.moveObjectByKey(e, 'down');
  }.bindAsEventListener(this));
  
  // delete object
  this.keyListener.add('down', 46, this.removeMarkedObjects.bind(this));
};
Flowchart.prototype.addObject=function(type, pos) {
  var index=this.getObjectIndex();
  
  alert("index "+index)
  if($("grid").checked) {
    pos=this.getSnapPos(pos);
  }
  else if(!pos) {
    pos=this.getFlowchartObjectStartPosition();//gets the start position
  }
  alert("u called getFlowchartObjectStartPosition------rcame  back to addOObject");
  // create new layer object
  var myTemp=new Layer.object(index, {x:pos.x, y:pos.y, width:160, height:70, vis:1});
  this.objects[index]=myTemp
  
  if(bw.ie)
  this.objects[index].element.style.overflow="hidden";
  
  // save index
  this.objects[index].index=index;
  
  var varTemp1='<div class="top_left" id="flowchart_top_left_'+index+'"></div>'+
			    '<div class="top_right" id="flowchart_top_right_'+index+'"></div>'+
			    '<div class="inside" id="flowchart_inside_'+index+'"></div>'+
			    '<div class="resize" id="flowchart_resize_'+index+'"></div>'+
			    '<div class="bottom_left" id="flowchart_bottom_left_'+index+'"></div>'+
			    '<div class="bottom_right" id="flowchart_bottom_right_'+index+'"></div>';
  alert("------varTemp1 in addObject ----"+varTemp1);
  alert("--- varText before adding---"+varText);
//	varText=varText+varTemp1;
varText=varTemp1;
  alert("addObject------varText"+varText);
  this.objects[index].write(varTemp1);
  
    alert("addObject------object formed");

  var resizeDiv=$("flowchart_resize_"+index);
  resizeDiv.index=index;

  Event.observe(resizeDiv, "mousedown", this.enableResize.bindAsEventListener(this), false);
// add write method
  this.objects[index].write=function(content){this.element.childNodes[2].innerHTML=content};
  
  // add mark method
  this.objects[index].setStyle=function(mode) {
    var inside=$('flowchart_inside_'+this.index);
    var top_left=$('flowchart_top_left_'+this.index);
    var top_right=$('flowchart_top_right_'+this.index);	
    var bottom_left=$('flowchart_bottom_left_'+this.index);
    var bottom_right=$('flowchart_bottom_right_'+this.index);
    
    if(mode=='marked' && inside.className!='inside_on') {
      inside.className='inside_on';
      top_left.className='top_left_on';
      top_right.className='top_right_on';
      bottom_left.className='bottom_left_on';
      bottom_right.className='bottom_right_on';
    }
    else if(mode!='marked' && inside.className=='inside_on') {
      inside.className='inside';
      top_left.className='top_left';
      top_right.className='top_right';
      bottom_left.className='bottom_left';
      bottom_right.className='bottom_right';
    }
  };
  
  var inside=$('flowchart_inside_'+index);
      alert("----addObject----inside---"+inside);

  inside.index=index;
  
  Event.observe(inside, "dblclick", function(e){
    var target=(e.target) ? e.target : e.srcElement;    
    if(target.index || target.index===0)
      this.enableEdit(e, target.index);
  }.bindAsEventListener(this), false);
  
  // make object draggable
  this.setDraggable(index, true);
  return false;
};

[code=javascript]Flowchart.proto type.enableResi ze=function(e) {
var target=e.target ? e.target : e.srcElement;

this.disableEdi t();

// set dragging off
this.setDraggab le(target.index , false);

this.resize=[];
this.resize.ind ex=target.index ;
this.resize.sta rtPosition={x: Event.pointerX( e), y: Event.pointerY( e)};
this.resize.sta rtSize={width: this.objects[target.index].width, height: this.objects[target.index].height}

this.mouseMoveL istenerFnc = this.mouseMoveL istenerFnc ? this.mouseMoveL istenerFnc : this.mouseMoveL istener.bindAsE ventListener(th is);
this.mouseUpLis tenerFnc = this.mouseUpLis tenerFnc ? this.mouseUpLis tenerFnc : this.disableRes ize.bindAsEvent Listener(this);

Event.observe(w indow.document, "mouseup", this.mouseUpLis tenerFnc, false);
Event.observe(w indow.document, "mousemove" , this.mouseMoveL istenerFnc, false);
};
Flowchart.proto type.disableRes ize=function(e) {
this.setDraggab le(this.resize. index, true);
Event.stopObser ving(window.doc ument, 'mousemove', this.mouseMoveL istenerFnc, false);
Event.stopObser ving(window.doc ument, "mouseup", this.mouseUpLis tenerFnc, false);
}

Flowchart.proto type.mouseMoveL istener=functio n(e) {
var width=Math.roun d(this.resize.s tartSize.width+ Event.pointerX( e)-this.resize.sta rtPosition.x);
var height=Math.rou nd(this.resize. startSize.heigh t+Event.pointer Y(e)-this.resize.sta rtPosition.y);

if(height < 40)
height=40;
else if(height > 400)
height=400;

if(width < 50)
width=50;
else if(width > 600)
width=600;

// resize object
this.objects[this.resize.ind ex].resize(width, height);
this.objects[this.resize.ind ex].element.childN odes[2].style.height=( height-20)+'px';

// adjust connected objects
this.connectAll Objects();
return false;
};
Flowchart.proto type.setDraggab le=function(ind ex, mode) {
if(!mode) {
this.objects[index].draggable();
}
else {
// set draggable
this.objects[index].draggable(true , true, {down:function( obj, x, y, e) {
if(!e)
e=window.event;

if(!this.checkD ragTarget(e)) {
if((e.button ? e.button : e.which)==2)
this.showContex tMenu(obj, e);
else
{
this.startDrag( e, obj);
this.hideContex tMenu();
}
}

return false;
}.bind(this), move: function(obj, x, y, e) {
if(!e)
e=window.event;

if(!this.checkD ragTarget(e))
this.drag(obj);

return false;
}.bind(this), up:function(obj ) {
return this.endDrag(ob j);
}.bind(this)});
}
};



Flowchart.proto type.createCont extMenu=functio n() {
this.contextMen u=new Layer.object('f lowchart_contex t_menu', {x: -100, y:-100, width:120, height:80, zindex: 100});
this.contextMen u.setOpacity(95 );
}
Flowchart.proto type.hideContex tMenu=function( ) {
if(!this.contex tMenu) {
this.createCont extMenu();
}

this.contextMen u.show();
var varTemp2='';
varText=varText +varTemp2;
//alert("---- varText in createContextMe nu ----"+varText);
this.contextMen u.write(varTemp 2);
this.contextMen u.move(-100, -100);
}[/code]


[code=javascript]Flowchart.proto type.showContex tMenu=function( obj, e) {
alert(" ----- entered showContextMenu---");
var html='';
var found=false;
var markedObjects=t his.getMarkedOb jects();
// alert(" ----- entered showContextMenu--- condition ---"+!this.context Menu);
if(!this.contex tMenu) {
this.createCont extMenu();
}

// 2 objects are connected
if(markedObject s.length==2) {
if(this.checkCo nnection(marked Objects[0], markedObjects[1])) {
html+='<li onclick="return flowchart.comma nd(event, \'unconnect\', \''+obj.index+' \', this)">'+this.g etText('c9')+'</li>';
this.contextMen u.resize(160, 80);
}
else
html+='<li onclick="return flowchart.comma nd(event, \'connect\', \''+obj.index+' \', this)">'+this.g etText('c8')+'</li>';

html+='<li onclick="return flowchart.comma nd(event, \'remove\', \''+obj.index+' \', this)">'+this.g etText('c4')+'</li>';
}

// more than 2 connected
else if(markedObject s.length>2) {
html+='<li onclick="return flowchart.comma nd(event, \'remove\', \''+obj.index+' \', this)">'+this.g etText('c4')+'</li>';
html+='<li onclick="return flowchart.comma nd(event, \'color\', \''+obj.index+' \', this)">'+this.g etText('c7')+'</li>';
}
// clicked on arrows
else if(obj && obj.id && (String(obj.id) .indexOf("snap" )!=-1 || String(obj.id). indexOf("arrow" )!=-1)) {
html+='<li onclick="return flowchart.comma nd(event, \'changeArrow\' , \''+obj.index+' \', this)">'+this.g etText('c6')+'</li>';
html+='<li onclick="return flowchart.comma nd(event, \'drag_arrow\', \''+obj.index+' \', this)">'+this.g etText('c5')+'</li>';

this.contextMen u.resize(160, 80);
}

// 1 object selected
else if(obj) {
html+='<li onclick="return flowchart.comma nd(event, \'remove\', \''+obj.index+' \', this)">'+this.g etText('c4')+'</li>';
html+='<li onclick="return flowchart.comma nd(event, \'connect\', \''+obj.index+' \', this)">'+this.g etText('c8')+'</li>';
html+='<li onclick="return flowchart.comma nd(event, \'edit\', \''+obj.index+' \', this)">'+this.g etText('c3')+'</li>';
html+='<li onclick="return flowchart.comma nd(event, \'color\', \''+obj.index+' \', this)">'+this.g etText('c7')+'</li>';
html+='<li onclick="return flowchart.comma nd(event, \'save\', \''+obj.index+' \', this)">'+this.g etText('c16')+' </li>';

}

// nothing selected
else {
html+='<li onclick="return flowchart.comma nd(event, \'add\', \''+obj.index+' \', this)">'+this.g etText('c10')+' </li>';
alert(" ----- entered showContextMenu---new object called ----"+html);
}
var varTemp3='<ul>' +html+'</ul>';
varText=varText +varTemp3
alert("---- varText in showContextMenu ----"+varText);
this.contextMen u.write(varTemp 3);
this.contextMen u.move(Event.po interX(e), Event.pointerY( e));
this.contextMen u.show(true);

this.checkClick edObject(e, obj.index);
};


Flowchart.proto type.checkClick edObject=functi on(e, index) {
var markedObjects = this.getMarkedO bjects();

// if no object is marked then mark the just clickt object
if(markedObject s.length==0 && this.objects[index]) {
this.markObject (e, this.objects[index]);
}
else if(markedObject s.length==1 && markedObjects[0] != this.objects[index]) {
this.unmarkAllO bjects();
this.markObject (e, this.objects[index]);
}
}



Flowchart.proto type.command=fu nction(e, action, index, obj) {
if(!e)
e=window.event;

if(obj)
obj.blur();

if(action=='rem ove')
this.removeMark edObjects();
else if(action=='edi t')
this.enableEdit (e, index);
else if(action=='add ') {
alert("------add called----");
var pos=false;
alert("------add called----pos"+pos);
//alert("------add called----condition---"+this.contextM enu && this.contextMen u.visible);
if(this.context Menu && this.contextMen u.visible)
pos={x: this.contextMen u.x, y: this.contextMen u.y};
alert("------add called----going to addObject");

this.addObject( 1, pos);
}
else if(action=='con nect')
this.connect();
else if(action=='unc onnect')
this.unconnectM arkedObjects();
else if(action=='gri d')
this.setGrid();
else if(action=='cha ngeArrow')
this.swapSnappo int(index);
else if(action=='exp ort')
this.exportAll( );
else if(action=='vie w_source')
this.viewSource ();
else if(action=='sav e')
this.save();

this.hideContex tMenu();
return false;
};
Flowchart.proto type.exportAll= function() {
for(var key in this.objects) {
console.log(thi s.exportObject( this.objects[key]));
};
};

Flowchart.proto type.viewSource =function() {
for(var key in this.objects) {

var varTest='<html> <body>'+varText +'</body></html>';
alert("varTest = "+varTest)
};
};
Flowchart.proto type.exportObje ct=function(obj ect) {
return {width:object.w idth, height:object.h eight, x:object.x, y:object.y, id: object.id, connections: this.exportObje ctConnections(o bject)};
};

Flowchart.proto type.exportObje ctConnections=f unction(object) {
var objects = [];
this.objectsCon nection.each(fu nction(connecti on) {
if(connection.o bjectA == object)
objects.push(co nnection.object B.id);
else if(connection.o bjectB == object)
objects.push(co nnection.object A.id);
}.bind(this));

return objects;
};[/code]



[code=javascript]Flowchart.proto type.checkDragT arget=function( e) {
var target=(e.targe t) ? e.target : e.srcElement;
return (target && target.getAttri bute('ignore')) ? true : false;
};
Flowchart.proto type.enableEdit =function(e, index) {
this.disableEdi t();
this.unmarkAllO bjects();
this.markObject (e, this.objects[index]);

var resizeDiv=$('fl owchart_resize_ '+index);

this.enableResi zeFnc = this.enableResi zeFnc ? this.enableResi zeFnc : this.enableResi ze.bindAsEventL istener(this);

if(this.editObj ectIndex!==inde x) {
this.editObject Index=index;
var value=this.obje cts[index].element.childN odes[2].innerHTML;
var varTemp4='<text area ignore="true" id="edit_'+inde x+'" class="inputare a">'+this.parse Text(value)+'</textarea>';
varText=varText +varTemp4;
alert("---- varText in enableEdit ----"+varText);
this.objects[index].write(varTemp4 );

var textarea=$('edi t_'+index);
textarea.style. width=(this.obj ects[index].element.offset Width-22)+'px';
textarea.style. height=(this.ob jects[index].element.offset Height-22)+'px';
textarea.focus( );

setTimeout(func tion() {
$('edit_'+this. editObjectIndex ).focus();
}.bind(this), 100);

resizeDiv.style .cursor='defaul t';
Event.stopObser ving(resizeDiv, 'mousedown', this.enableResi zeFnc, false);
}
};


Flowchart.proto type.disableEdi t=function(inde x) {
if(this.editObj ectIndex!==fals e) {
var editObject = $('edit_'+this. editObjectIndex );
var resizeDiv = $('flowchart_re size_'+this.edi tObjectIndex);

if(editObject) {
varTemp5=this.p arseText(editOb ject.value, true);
varText=varText +varTemp5
alert("---- varText in disableEdit ----"+varText);
this.objects[this.editObject Index].write(varTemp5 );

// is draggable again
this.setDraggab le(this.editObj ectIndex, true);

Event.observe(r esizeDiv, 'mousedown', this.enableResi zeFnc, false);
resizeDiv.style .cursor='se-resize';

this.editObject Index=false;
}
}
}
Flowchart.proto type.parseText= function(str, mode) {
return (mode) ? str.replace(/\n/gi, '<br>') : str.replace(/<br>/gi, '\n');
};


Flowchart.proto type.removeMark edObjects=funct ion() {
var markedObjects=t his.getMarkedOb jects();
var ask;

if(markedObject s.length==1)
this.removeObje ct(markedObject s[0].index);
else {
ask=confirm(thi s.getText('c1') +' '+markedObjects .length+' '+this.getText( 'c2'));

if(ask) {
markedObjects.e ach(function(ob ject) {
this.removeObje ct(object.index );
}.bind(this));
}
}
}


Flowchart.proto type.removeObje ct=function(ind ex) {
this.unmarkAllO bjects();
this.objects[index].show(0);

// loop connected objects
this.objectsCon nection.each(fu nction(object, counter) {
if(object.objec tA==this.object s[index] || object.objectB= =this.objects[index]) {
this.removeConn ectionByIndex(c ounter);
}
}.bind(this));
};
[/CODE]

[radhikams]

code exists still

Since the full code was not sufficient so im posting in parts Here is the 2nd part of Flowchart.js
[CODE=javascript]Flowchart.proto type.removeObje ct=function(ind ex)
this.unmarkAllO bjects();
this.objects[index].show(0);

// loop connected objects
this.objectsCon nection.each(fu nction(object, counter) {
if(object.objec tA==this.object s[index] || object.objectB= =this.objects[index]) {
this.removeConn ectionByIndex(c ounter);
}
}.bind(this));
};
Flowchart.proto type.createConn ectionObjects=f unction(markedO bjects) {
if(!this.arrowP arts)
this.arrowParts =[];

var index=this.arro wParts.length;

// new array
this.arrowParts[index]=[];
this.arrowParts[index][0]=new Layer.object('a rrow_part_0_'+i ndex, {x:0, y:0, width:9, height:1});
var varTemp6="<div style='position :absolute;left: 4px;width:1px;h eight:100%;back ground-color:black'></div>";
varText=varText +varTemp6;
alert("---- varText in createConnectio nObjects ----"+varText);
this.arrowParts[index][0].write(varTemp6 );
this.arrowParts[index][0].element.style. overflow='hidde n';
this.arrowParts[index][0].element.style. cursor='w-resize';

this.arrowParts[index][0].draggable(true , true, {down: function(obj) {
this.startMoveL ine(obj); return false; }.bind(this), move: function(obj) {
this.moveLine(o bj); return false;
}.bind(this)});

this.arrowParts[index][1]=new Layer.object('a rrow_part_1_'+i ndex, {x:0, y:0, width:1, height:1});
this.arrowParts[index][1].setBgColor('bl ack');

this.arrowParts[index][2]=new Layer.object('a rrow_part_2_'+i ndex, {x:0, y:0, width:1, height:1});
this.arrowParts[index][2].setBgColor('bl ack');

this.arrowParts[index][3]=new Layer.object('s nap_1_'+index, {x:0, y:0, width:13, height:13, parent:this.arr owParts[index][1].element});

var varTemp7='<img src="images/0.gif" id="arrow_3_'+i ndex+'" />';
varText=varText +varTemp7;
alert("---- varText in createConnectio nObjects 2nd time ----"+varText);
this.arrowParts[index][3].write(varTemp7 );
this.arrowParts[index][3].element.style. overflow='hidde n';
this.arrowParts[index][3].element.index= index;
this.arrowParts[index][3].element.snap_i ndex=1;


Event.observe(t his.arrowParts[index][3].element, 'mousedown', function(e) {
if((e.button ? e.button : e.which) == 2)
this.showContex tMenu(e.target ? e.target : e.srcElement, e);
}.bindAsEventLi stener(this), false);
Event.observe(t his.arrowParts[index][3].element, 'dblclick', function(e) {
var target=e.target ? e.target : e.srcElement;

if(!target.inde x && target.index!== 0)
target=target.p arentNode;

this.swapSnappo int(target.inde x);
}.bindAsEventLi stener(this), false);


$('arrow_3_'+in dex).index=inde x;

this.arrowParts[index][4]=new Layer.object('s nap_2_'+index, {x:0, y:0, width:13, height:13, parent:this.arr owParts[index][2].element});
var varTemp8='<img src="images/0.gif" id="arrow_4_'+i ndex+'" />';
varText=varText +varTemp8;
alert("---- varText in createConnectio nObjects 3rd time----"+varText);
this.arrowParts[index][4].write(varTemp8 );
this.arrowParts[index][4].element.style. overflow='hidde n';
this.arrowParts[index][4].element.index= index;
this.arrowParts[index][4].element.snap_i ndex=2;

Event.observe(t his.arrowParts[index][4].element, 'mousedown', function(e) {
if((e.button ? e.button : e.which) == 2)
this.showContex tMenu(e.target ? e.target : e.srcElement, e);
}.bindAsEventLi stener(this), false);


Event.observe(t his.arrowParts[index][4].element, 'dblclick', function(e) {
var target=e.target ? e.target : e.srcElement;

if(!target.inde x && target.index!== 0)
target=target.p arentNode;

this.swapSnappo int(target.inde x);
}.bindAsEventLi stener(this), false);


$('arrow_4_'+in dex).index=inde x;

this.swapSnappo int(index);

// save connected objects
this.objectsCon nection.push({o bjectB: markedObjects[0], objectA: markedObjects[1], arrow: this.arrowParts[index]});

// save twin elementents to draggable line
this.arrowParts[index][0].lines=[this.arrowParts[index][1], this.arrowParts[index][2]];
};



Flowchart.proto type.checkConne ction=function( objectsA, objectsB) {
var foundObject = false;

this.objectsCon nection.each(fu nction(object) {
if(object) {
if((objectsA==o bject.objectA && objectsB==objec t.objectB) || (objectsA==obje ct.objectB && objectsB==objec t.objectA)) {
foundObject = true;
throw $break;
}
}
}.bind(this));

return foundObject;
};



Flowchart.proto type.unconnectM arkedObjects=fu nction() {
var markedObjects=t his.getMarkedOb jects();

if(markedObject s.length==2) {
this.objectsCon nection.each(fu nction(object, index) {
if(this.checkCo nnection(marked Objects[0], markedObjects[1])) {
this.removeConn ectionByIndex(i ndex);
throw $break;
}
}.bind(this));
}
};[/code]


[code=javascript]// to remove empty layers
Flowchart.proto type.removeConn ectionByIndex=f unction(index) {
if(this.objects Connection[index] && this.objectsCon nection[index].arrow) {
(5).times(funct ion(i) {
this.objectsCon nection[index].arrow[i].show();
}.bind(this));

if(!this.garbag eCollection)
this.garbageCol lection=[];

if(this.garbage Collection.inde xOf(index)<0) {
this.garbageCol lection.push(in dex);
}
}

clearTimeout(th is.clearGarbage Timeout);

this.clearGarba geTimeout = setTimeout(func tion() {
this.clearGarba ge();
}.bind(this), 100);
};


// remove unused layers
Flowchart.proto type.clearGarba ge=function() {
if(this.garbage Collection) {
var newConnectedObj ects = [];

for(var i=0; i<this.garbageC ollection.lengt h; i++) {
if(this.objects Connection[this.garbageCol lection[i]]) {
for(var key in this.objectsCon nection[this.garbageCol lection[i]])
delete this.objectsCon nection[this.garbageCol lection[i]][key];

delete this.objectsCon nection[this.garbageCol lection[i]];
}
}

this.objectsCon nection.each(fu nction(connecti on, index) {
if(this.objects Connection[index]) {
newConnectedObj ects.push(this. objectsConnecti on[index]);
}
}.bind(this));

delete this.objectsCon nection;
this.objectsCon nection = newConnectedObj ects;
}
};



Flowchart.proto type.startDrag= function(e, obj) {
if(e.ctrlKey && obj.marked) {
// ctrl key pressed, click on a marked object -> unmark object
this.unmarkObje ct(obj);
}
else if((e.ctrlKey && !obj.marked) || this.mouseMode= ='connect') {
// ctrl key pressed, click on a not marked object -> mark object
this.markObject (e, obj);
}
else if(!e.ctrlKey) {
var markedObjects = this.getMarkedO bjects()
if(markedObject s.length != 1 || markedObjects[0] != obj) {
this.unmarkAllO bjects();
}
this.markObject (e, obj);
}

var markedObjects=t his.getMarkedOb jects();
this.startPosit ion={x:obj.x, y:obj.y};

if(this.mouseMo de=='connect') {
if(markedObject s.length==2)
this.connect();

if(markedObject s.length>=2) {
this.setMouseMo de();
this.unmarkAllO bjects();
}
}
};


Flowchart.proto type.drag=funct ion(dragObject) {
dragObject.setO pacity(80);
dragObject.mark ed=true;
dragObject.setS tyle('marked');

var x=(dragObject.x-this.startPosit ion.x);
var y=(dragObject.y-this.startPosit ion.y);

var markedObjects=t his.getMarkedOb jects();

// move all connected objects
markedObjects.e ach(function(ma rkedObject) {
if(dragObject!= markedObject)
markedObject.mo ve(markedObject .startPosition. x+x, markedObject.st artPosition.y+y );
}.bind(this));

this.connectAll Objects();
};


Flowchart.proto type.endDrag=fu nction(obj) {
if($("grid").ch ecked) {
this.snapToGrid (obj);

// ajust connected objects
this.connectAll Objects();
}

return obj.setOpacity( 100);
};

Flowchart.proto type.snapAllToG rid=function() {
for(var key in this.objects) {
this.snapToGrid (this.objects[key]);
}

// ajust connected objects
this.connectAll Objects();
};


Flowchart.proto type.snapToGrid =function(obj) {
var pos = this.getSnapPos ({x: obj.x, y:obj.y});
return obj.move(pos.x, pos.y);
};

Flowchart.proto type.getSnapPos =function(pos) {
for(var x=i=0; true; i++) {
x = i*30;
if(x >= pos.x-15) {
break;
}
}

for(var y=i=0; true; i++) {
y = i*30;
if(y >= pos.y-15) {
break;
}
}

return {x: x, y: y};
}

Flowchart.proto type.getFlowcha rtObjectStartPo sition=function () {
alert("u called getFlowchartObj ectStartPositio n");
var pos={x: 10, y: 30};
alert("pos-----"+pos);
// loop all objects
for(var key in this.objects) {
if(pos.x==this. objects[key].x && pos.y==this.obj ects[key].y && this.objects[key].visible) {
pos.x+=10;
pos.y+=10;
}
}
alert("u called getFlowchartObj ectStartPositio n------returning back to addOObject");

return pos;
};

// connect 2 objects together

Flowchart.proto type.connect=fu nction() {
markedObjects=t his.getMarkedOb jects();

if(this.checkCo nnection(marked Objects[0], markedObjects[1])) {
alert(this.getT ext('c11'));
}
else {
if(markedObject s.length!=2) {
if(this.getObje ctsLength()>=2) {
this.setMouseMo de("connect");
}
else {
alert(this.getT ext('c12'));
}
}
else {
this.createConn ectionObjects(m arkedObjects);
}

this.connectAll Objects();
}
};


Flowchart.proto type.setMouseMo de=function(mod e) {
this.mouseMode= mode;

if(!this.mouseF ollow) {
this.mouseFollo w=new Layer.object('m ouseFollow', {x:0, y:0, width:16, height:13, zindex: 1000000});
}

this.followMous eFnc = this.followMous eFnc ? this.followMous eFnc : this.followMous e.bindAsEventLi stener(this)

if(mode) {
var markedObjects=t his.getMarkedOb jects();

if(markedObject s.length==1) {
var on=true;
this.firstMarke d=markedObjects[0];
}

this.mouseFollo w.write('<img src="images/mouse_'+mode+(o n ? '_on' : '')+'.gif" width="16" height="13" id="mouseFollow _img" />');
Event.observe(w indow.document, 'mousemove', this.followMous eFnc, false);
}
else {
this.mouseFollo w.show(0);
Event.stopObser ving(window.doc ument, 'mousemove', this.followMous eFnc, false);
}
};


Flowchart.proto type.followMous e=function(e) {
if(this.mouseMo de) {
var pos={x: Event.pointerX( e), y: Event.pointerY( e)};
var winHeight=(wind ow.innerHeight) ? window.innerHei ght : document.body.o ffsetHeight;

if(pos.x+10>0 && pos.y-10>0)
this.mouseFollo w.move(pos.x+10 , pos.y-10);

this.mouseFollo w.show(pos.x <= 11 || pos.y <= 20 || pos.y+15 > winHeight ? 0 : 1);
}
};[/code]



[code=javascript]
Flowchart.proto type.swapSnappo int=function(in dex) {
var markedObjects=t his.getMarkedOb jects();

if(!this.arrowP arts[index].arrowDirection && this.firstMarke d) {
this.secondMark ed=(markedObjec ts[0].index==this.fi rstMarked.index ) ? markedObjects[1] : markedObjects[0];
this.arrowParts[index].arrowDirection =(this.firstMar ked.x<this.seco ndMarked.x) ? 1 : 2;
}
else
this.arrowParts[index].arrowDirection = (this.arrowPart s[index].arrowDirection ==1) ? 2 : 1;

this.setArrowDi rections();
};


Flowchart.proto type.setArrowDi rections=functi on() {
// set arrows
this.arrowParts .each(function( part, index) {
var direction = (part[3].x > part[4].x && part.arrowDirec tion == 1) || (part[3].x < part[4].x && part.arrowDirec tion == 2) ? 'right' : 'left';

if(part.arrowDi rection == 1) {
$('arrow_3_'+in dex).src='image s/arrow_'+directi on+'.gif';
$('arrow_4_'+in dex).src='image s/0.gif';
}
else {
$('arrow_3_'+in dex).src='image s/0.gif';
$('arrow_4_'+in dex).src='image s/arrow_'+directi on+'.gif';
}
}.bind(this));
};


Flowchart.proto type.startMoveL ine=function(ob j) {
obj.startPositi on={y: obj.y, x: obj.x};
obj.lines[0].startSize={wid th: obj.lines[0].width, height: obj.lines[0].height};
obj.lines[1].startSize={wid th: obj.lines[1].width, height: obj.lines[1].height};
obj.lines[0].startPosition= {x: obj.lines[0].x, y: obj.lines[0].y};
obj.lines[1].startPosition= {x: obj.lines[1].x, y: obj.lines[1].y};
};


Flowchart.proto type.moveLine=f unction(obj) {
if(obj.lines[0].startSize.widt h-(obj.startPosit ion.x-obj.x) <= 5 || obj.lines[0].startSize.widt h+(obj.startPos ition.x-obj.x) <= 5) {
obj.move(obj.la stPos, obj.startPositi on.y);
return false;
}

obj.move(obj.x, obj.startPositi on.y);
obj.lastPosX=ob j.x;

if(obj.lines[1].startPosition. x < obj.lines[0].startPosition. x) {
obj.lines[0].resize(obj.lin es[0].startSize.widt h+(obj.startPos ition.x-obj.x), 1);
obj.lines[0].move(obj.lines[0].startPosition. x-(obj.startPosit ion.x-obj.x), obj.lines[0].y);
obj.lines[1].resize(obj.lin es[1].startSize.widt h-(obj.startPosit ion.x-obj.x), 1);
}
else {
obj.lines[0].resize(obj.lin es[0].startSize.widt h-(obj.startPosit ion.x-obj.x), 1);
obj.lines[1].resize(obj.lin es[1].startSize.widt h+(obj.startPos ition.x-obj.x), 1);
obj.lines[1].move(obj.lines[1].startPosition. x-(obj.startPosit ion.x-obj.x), obj.lines[1].y);
}
};



Flowchart.proto type.moveObject ByKey=function( e, direction) {
if(this.editObj ectIndex!==fals e)
return false;

var markedObjects=t his.getMarkedOb jects();
var speed=(e.ctrlKe y) ? 10 : 1;

// move all connected objects
if(direction==' left') {
markedObjects.e ach(function(ma rkedObject) {
markedObject.sh ift(-speed,0);
}.bind(this));
}
else if(direction==' right') {
markedObjects.e ach(function(ma rkedObject) {
markedObject.sh ift(speed,0);
}.bind(this));
}
else if(direction==' up') {
markedObjects.e ach(function(ma rkedObject) {
markedObject.sh ift(0,-speed);
}.bind(this));
}
else if(direction==' down') {
markedObjects.e ach(function(ma rkedObject) {
markedObject.sh ift(0,speed);
}.bind(this));
}

// ajust connected objects
this.connectAll Objects();

return false;
};



Flowchart.proto type.connectAll Objects=functio n() {
this.objectsCon nection.each(fu nction(object) {
this.connectObj ect(object);
}.bind(this));
};


Flowchart.proto type.connectObj ect=function(ob j) {
var width=0;
var height=0;
var x_0=0;
var y_0=0;
var x_1=0;
var y_1=0;
var x_2=0;
var y_2=0;
var diff=2;

if(obj.objectA. x>obj.objectB.x ) {
width=obj.objec tA.x-(obj.objectB.x+ obj.objectB.wid th);
x_1=obj.objectA .x-Math.floor(widt h/diff);
x_2=obj.objectB .x+obj.objectB. width;

y_1=obj.objectA .y+Math.floor(o bj.objectA.heig ht/2);
y_2=obj.objectB .y+Math.floor(o bj.objectB.heig ht/2);

obj.arrow[3].move(Math.floo r(width/diff)-12, -6);
obj.arrow[3].show(1);

obj.arrow[4].move(0, -6);
obj.arrow[4].show(1);
}
else {
width=obj.objec tB.x-(obj.objectA.x+ obj.objectA.wid th);
x_2=obj.objectB .x-Math.floor(widt h/diff);
x_1=obj.objectA .x+obj.objectA. width;

y_1=obj.objectA .y+Math.floor(o bj.objectA.heig ht/2);
y_2=obj.objectB .y+Math.floor(o bj.objectB.heig ht/2);

obj.arrow[3].move(0, -6);
obj.arrow[3].show(1);

obj.arrow[4].move(Math.floo r(width/diff)-12, -6);
obj.arrow[4].show(1);
}

x_0= (x_2>x_1 ? x_1 : x_2)+Math.floor (width/diff)-4;
y_0= y_2>y_1 ? y_1 : y_2;
height=(y_2>y_1 ? y_2-y_1 : y_1-y_2)+1;

obj.arrow[0].resize(9, height);
obj.arrow[0].move(x_0, y_0);
obj.arrow[0].show(1);

obj.arrow[1].resize(Math.fl oor(width/diff), 1);
obj.arrow[1].move(x_1, y_1);
obj.arrow[1].show(1);

obj.arrow[2].resize(Math.fl oor(width/diff), 1);
obj.arrow[2].move(x_2, y_2);
obj.arrow[2].show(1);

this.setArrowDi rections();
};


Flowchart.proto type.markObject =function(e, obj) {
if(obj) {
obj.setStyle('m arked');
obj.marked=true ;
}

return false;
};


Flowchart.proto type.unmarkObje ct=function(obj ) {
obj.setStyle('u nmarked');
obj.marked=fals e;
return false;
};


Flowchart.proto type.unmarkAllO bjects=function () {
for(var key in this.objects) {
this.unmarkObje ct(this.objects[key]);
}
};


Flowchart.proto type.getMarkedO bjects=function () {
var markedObjects=[];

for(var key in this.objects) {
if(this.objects[key].marked) {
this.objects[key].startPosition= {x:this.objects[key].x, y:this.objects[key].y};
markedObjects.p ush(this.object s[key]);
}
}

return markedObjects;
};


Flowchart.proto type.setGrid=fu nction() {
if($("grid").ch ecked) {
this.snapAllToG rid();
}
};


Flowchart.proto type.error=func tion(error) {
alert(error);
return false;
};
{[/CODE]



Sir
there are still supporting files of this file.Shall i post them also????

[acoder]

Sir
there are still supporting files of this file.Shall i post them also????

No, that's quite enough. If there was so much code, you could've just linked to it instead or only post the most relevant parts.

As I said with regards to saving to the local file system, are you only supporting one browser (e.g. a specific user group in an intranet environment)?

[radhikams]

continue drag drop

No, that's quite enough. If there was so much code, you could've just linked to it instead or only post the most relevant parts.

As I said with regards to saving to the local file system, are you only supporting one browser (e.g. a specific user group in an intranet environment)?

Hi Sir
With regard to the browser we are using the normal internet explorer....
And below is the link where actually the demo exists. If you can please check it out and guide me that would be more helpful for me... Actually the problem is in the Flowchart.js file im able to print the object(rectangl e) but when im trying to make a html code for the display of that page nothing is getting displayed...

[HTML]http://www.minus3.ch/jsflowchart/demo/[/HTML]

in that addObject function

var varTemp1='<div class="top_left" id="flowchart_top_left_'+index+'"></div>'+
			    '<div class="top_right" id="flowchart_top_right_'+index+'"></div>'+
			    '<div class="inside" id="flowchart_inside_'+index+'"></div>'+
			    '<div class="resize" id="flowchart_resize_'+index+'"></div>'+
			    '<div class="bottom_left" id="flowchart_bottom_left_'+index+'"></div>'+
			    '<div class="bottom_right" id="flowchart_bottom_right_'+index+'"></div>';
  alert("------varTemp1 in addObject ----"+varTemp1);
  alert("--- varText before adding---"+varText);
//	varText=varText+varTemp1;
varText=varTemp1;
  alert("addObject------varText"+varText);

As per my understanding the above is the code which is showing the object(i.e.,. the rectangle) .Using "alert" im able to print the code into varText(a variable) ... but when im trying to make a html page using the above code nothing is getting displayed..... At this point im stuck now......
Im confused whether is this the part of code which is printing the rectangle or not.......Can you please help me...
I hope that im not troubling you

Thank You