469,277 Members | 2,357 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,277 developers. It's quick & easy.

create drag drop flowchart then save to file on client

Hi

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


Thanks
Mar 11 '08 #1
17 4455
acoder
16,027 Expert Mod 8TB
Search for javascript drag drop.
Mar 11 '08 #2
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
Mar 12 '08 #3
acoder
16,027 Expert Mod 8TB
It should be possible. Show what code you have so far.
Mar 12 '08 #4
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
Mar 13 '08 #5
acoder
16,027 Expert Mod 8TB
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?
Mar 13 '08 #6
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(rectangular) is being called.... So im not able to proceed further..Can you please help.

Thank You
Mar 13 '08 #7
acoder
16,027 Expert Mod 8TB
Do you want to save this on the local filesystem or on the server?

Post your code using [code] tags.
Mar 13 '08 #8
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
Mar 24 '08 #9
some problem in giving the code .....i will try to post it..
Mar 24 '08 #10
acoder
16,027 Expert Mod 8TB
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.
Mar 24 '08 #11
[Here is the code of which im telling ..Please go through it and guide me accordingly.

Flowchart.js

Expand|Select|Wrap|Line Numbers
  1. Flowchart = Class.create();
  2. var varText;
  3. Flowchart.prototype.initialize=function(conf)
  4.  {this.conf=conf;
  5. window.flowchart=this; 
  6.   this.objects={};
  7.   this.objectsConnection=[];
  8.   this.editObjectIndex=false;
  9.   this.language();
  10.   this.initKeylistener();
  11. Event.observe(window.document, 'click', this.clickListener.bindAsEventListener(this));
  12.   Event.observe(window.document, 'contextmenu', this.customContext.bindAsEventListener(this));
  13.  
  14.   Event.observe(window.document, "dblclick", function (e) {
  15.     var target=(e.target) ? e.target : e.srcElement;
  16.  
  17.     if(target.tagName.toLowerCase()=="body" || target.tagName.toLowerCase()=="html")
  18.       this.addObject(1, {x: Event.pointerX(e), y: Event.pointerY(e)});
  19.   }.bindAsEventListener(this), false);
  20.  
  21.   Event.observe(window, "load", function () {
  22.     this.loadImages();
  23.     this.loadText();
  24.   }.bind(this), false);
  25. };
  26. Flowchart.prototype.loadText=function() {
  27.   var objs=document.getElementsByClassName('trans');
  28.   objs.each(function(obj, index) {
  29.     obj.parentNode.innerHTML=this.getText(obj.innerHTML);
  30.   }.bind(this));
  31. };
  32.  
  33. Flowchart.prototype.getObjectIndex=function() {
  34.   return 'fj_'+String((new Date()).getTime()).substr(8, 5);
  35. };
  36.  
  37. Flowchart.prototype.getObjectsLength=function() {
  38.   var counter = 0;
  39.   for(var key in this.objects) {
  40.     counter++;
  41.   }
  42.   return counter;
  43. };
  44. Flowchart.prototype.language=function(lang) {
  45.   this.lang = typeof(this.language[bw.lang]) == 'object' ? bw.lang : 'en';
  46. };
  47.  
  48. Flowchart.prototype.loadImages=function() {
  49.   var index=0;
  50.   var img=[];
  51.   var imgPath=['arrow_down.gif',
  52.            'arrow_left.gif',
  53.            'arrow_right.gif',
  54.            'arrow_up.gif',
  55.            'corners.gif',
  56.            'corners_on.gif',
  57.            'mouse_connect.gif',
  58.            'mouse_connect_on.gif']
  59.  
  60.   imgPath.each(function(path) {
  61.     img.push(new Image());
  62.     img.last().src="images/"+path;
  63.   });
  64. };
  65. Flowchart.prototype.customContext=function(e) {
  66.   var target=(e.target) ? e.target : e.srcElement;
  67.  
  68.   if(target.tagName.toLowerCase()==(bw.ie ? 'body' : 'html')) {    
  69.     // show flowchart menu    
  70.     this.showContextMenu(false, e);
  71.   }
  72.  
  73.   e.cancelBubble=true;
  74.   e.returnValue=false;
  75. };
  76.  
  77.  
  78.  
  79. Flowchart.prototype.clickListener=function(e) {
  80.  var target=(e.target) ? e.target : e.srcElement;
  81.  
  82.   // nothing clicked
  83.   if(target.tagName.toLowerCase()==(bw.ie ? 'body' : 'html')) {
  84.     this.setMouseMode();
  85.  
  86.     // unmark all flowchart objects
  87.     if(!e.ctrlKey)
  88.       this.unmarkAllObjects();
  89.  
  90.     // hide flowchart menu
  91.     this.hideContextMenu();
  92.     this.disableEdit();
  93.   }
  94.   else if((target.index || target.index===0) && this.mouseMode=="connect") {
  95.     this.setMouseMode("connect");
  96.   }
  97. };
  98. Flowchart.prototype.initKeylistener=function() {
  99.  
  100.  
  101.   // new keylistener object
  102.   this.keyListener = new Key.listener();
  103.  
  104.   // moving objects with up/down/left/right
  105.   this.keyListener.add('down', 37, function(e, direction) { 
  106.     this.moveObjectByKey(e, 'left'); 
  107.   }.bindAsEventListener(this));
  108.  
  109.   this.keyListener.add('down', 39, function(e, direction) { 
  110.     this.moveObjectByKey(e, 'right'); 
  111.   }.bindAsEventListener(this));
  112.  
  113.   this.keyListener.add('down', 38, function(e, direction) {
  114.     this.moveObjectByKey(e, 'up');
  115.   }.bindAsEventListener(this));
  116.  
  117.   this.keyListener.add('down', 40, function(e, direction) { 
  118.     this.moveObjectByKey(e, 'down');
  119.   }.bindAsEventListener(this));
  120.  
  121.   // delete object
  122.   this.keyListener.add('down', 46, this.removeMarkedObjects.bind(this));
  123. };
  124. Flowchart.prototype.addObject=function(type, pos) {
  125.   var index=this.getObjectIndex();
  126.  
  127.   alert("index "+index)
  128.   if($("grid").checked) {
  129.     pos=this.getSnapPos(pos);
  130.   }
  131.   else if(!pos) {
  132.     pos=this.getFlowchartObjectStartPosition();//gets the start position
  133.   }
  134.   alert("u called getFlowchartObjectStartPosition------rcame  back to addOObject");
  135.   // create new layer object
  136.   var myTemp=new Layer.object(index, {x:pos.x, y:pos.y, width:160, height:70, vis:1});
  137.   this.objects[index]=myTemp
  138.  
  139.   if(bw.ie)
  140.   this.objects[index].element.style.overflow="hidden";
  141.  
  142.   // save index
  143.   this.objects[index].index=index;
  144.  
  145.   var varTemp1='<div class="top_left" id="flowchart_top_left_'+index+'"></div>'+
  146.                 '<div class="top_right" id="flowchart_top_right_'+index+'"></div>'+
  147.                 '<div class="inside" id="flowchart_inside_'+index+'"></div>'+
  148.                 '<div class="resize" id="flowchart_resize_'+index+'"></div>'+
  149.                 '<div class="bottom_left" id="flowchart_bottom_left_'+index+'"></div>'+
  150.                 '<div class="bottom_right" id="flowchart_bottom_right_'+index+'"></div>';
  151.   alert("------varTemp1 in addObject ----"+varTemp1);
  152.   alert("--- varText before adding---"+varText);
  153. //    varText=varText+varTemp1;
  154. varText=varTemp1;
  155.   alert("addObject------varText"+varText);
  156.   this.objects[index].write(varTemp1);
  157.  
  158.     alert("addObject------object formed");
  159.  
  160.   var resizeDiv=$("flowchart_resize_"+index);
  161.   resizeDiv.index=index;
  162.  
  163.   Event.observe(resizeDiv, "mousedown", this.enableResize.bindAsEventListener(this), false);
  164. // add write method
  165.   this.objects[index].write=function(content){this.element.childNodes[2].innerHTML=content};
  166.  
  167.   // add mark method
  168.   this.objects[index].setStyle=function(mode) {
  169.     var inside=$('flowchart_inside_'+this.index);
  170.     var top_left=$('flowchart_top_left_'+this.index);
  171.     var top_right=$('flowchart_top_right_'+this.index);    
  172.     var bottom_left=$('flowchart_bottom_left_'+this.index);
  173.     var bottom_right=$('flowchart_bottom_right_'+this.index);
  174.  
  175.     if(mode=='marked' && inside.className!='inside_on') {
  176.       inside.className='inside_on';
  177.       top_left.className='top_left_on';
  178.       top_right.className='top_right_on';
  179.       bottom_left.className='bottom_left_on';
  180.       bottom_right.className='bottom_right_on';
  181.     }
  182.     else if(mode!='marked' && inside.className=='inside_on') {
  183.       inside.className='inside';
  184.       top_left.className='top_left';
  185.       top_right.className='top_right';
  186.       bottom_left.className='bottom_left';
  187.       bottom_right.className='bottom_right';
  188.     }
  189.   };
  190.  
  191.   var inside=$('flowchart_inside_'+index);
  192.       alert("----addObject----inside---"+inside);
  193.  
  194.   inside.index=index;
  195.  
  196.   Event.observe(inside, "dblclick", function(e){
  197.     var target=(e.target) ? e.target : e.srcElement;    
  198.     if(target.index || target.index===0)
  199.       this.enableEdit(e, target.index);
  200.   }.bindAsEventListener(this), false);
  201.  
  202.   // make object draggable
  203.   this.setDraggable(index, true);
  204.   return false;
  205. };
Expand|Select|Wrap|Line Numbers
  1. Flowchart.prototype.enableResize=function(e) {  
  2.   var target=e.target ? e.target : e.srcElement;
  3.  
  4.   this.disableEdit();
  5.  
  6.   // set dragging off
  7.   this.setDraggable(target.index, false);
  8.  
  9.   this.resize=[];
  10.   this.resize.index=target.index;
  11.   this.resize.startPosition={x: Event.pointerX(e), y: Event.pointerY(e)};
  12.   this.resize.startSize={width: this.objects[target.index].width, height: this.objects[target.index].height}
  13.  
  14.   this.mouseMoveListenerFnc = this.mouseMoveListenerFnc ? this.mouseMoveListenerFnc : this.mouseMoveListener.bindAsEventListener(this);
  15.   this.mouseUpListenerFnc = this.mouseUpListenerFnc ? this.mouseUpListenerFnc : this.disableResize.bindAsEventListener(this);
  16.  
  17.   Event.observe(window.document, "mouseup", this.mouseUpListenerFnc, false);
  18.   Event.observe(window.document, "mousemove", this.mouseMoveListenerFnc, false);
  19. };
  20. Flowchart.prototype.disableResize=function(e) {
  21.   this.setDraggable(this.resize.index, true);
  22.   Event.stopObserving(window.document, 'mousemove', this.mouseMoveListenerFnc, false);
  23.   Event.stopObserving(window.document, "mouseup", this.mouseUpListenerFnc, false);
  24. }
  25.  
  26. Flowchart.prototype.mouseMoveListener=function(e) {
  27.   var width=Math.round(this.resize.startSize.width+Event.pointerX(e)-this.resize.startPosition.x);
  28.   var height=Math.round(this.resize.startSize.height+Event.pointerY(e)-this.resize.startPosition.y);
  29.  
  30.   if(height < 40)
  31.   height=40;
  32.   else if(height > 400)
  33.   height=400;
  34.  
  35.   if(width < 50)
  36.   width=50;
  37.   else if(width > 600)
  38.   width=600;
  39.  
  40.   // resize object
  41.   this.objects[this.resize.index].resize(width, height);
  42.   this.objects[this.resize.index].element.childNodes[2].style.height=(height-20)+'px';
  43.  
  44.   // adjust connected objects
  45.   this.connectAllObjects();
  46.   return false;
  47. };
  48. Flowchart.prototype.setDraggable=function(index, mode) {
  49.   if(!mode) {
  50.     this.objects[index].draggable();
  51.   }
  52.   else {
  53.     // set draggable
  54.     this.objects[index].draggable(true, true, {down:function(obj, x, y, e) {
  55.       if(!e)
  56.       e=window.event;
  57.  
  58.       if(!this.checkDragTarget(e)) {
  59.     if((e.button ? e.button : e.which)==2)
  60.       this.showContextMenu(obj, e);
  61.     else
  62.       {
  63.         this.startDrag(e, obj);
  64.         this.hideContextMenu();
  65.       }
  66.       }
  67.  
  68.       return false;
  69.     }.bind(this), move: function(obj, x, y, e) {
  70.       if(!e)
  71.       e=window.event;
  72.  
  73.       if(!this.checkDragTarget(e))
  74.       this.drag(obj);
  75.  
  76.       return false;
  77.     }.bind(this), up:function(obj) {
  78.       return this.endDrag(obj);
  79.     }.bind(this)});
  80.   }
  81. };
  82.  
  83.  
  84.  
  85. Flowchart.prototype.createContextMenu=function() {
  86.   this.contextMenu=new Layer.object('flowchart_context_menu', {x: -100, y:-100, width:120, height:80, zindex: 100});
  87.   this.contextMenu.setOpacity(95);
  88. }
  89. Flowchart.prototype.hideContextMenu=function() {
  90.   if(!this.contextMenu) {
  91.     this.createContextMenu();
  92.   }
  93.  
  94.   this.contextMenu.show();
  95.   var varTemp2='';
  96.   varText=varText+varTemp2;
  97.   //alert("---- varText in createContextMenu ----"+varText);
  98.   this.contextMenu.write(varTemp2);
  99.   this.contextMenu.move(-100, -100);
  100. }

Expand|Select|Wrap|Line Numbers
  1. Flowchart.prototype.showContextMenu=function(obj, e) {     
  2.   alert(" ----- entered  showContextMenu---");
  3.   var html='';
  4.   var found=false;
  5.   var markedObjects=this.getMarkedObjects();
  6. //   alert(" ----- entered  showContextMenu--- condition ---"+!this.contextMenu);
  7.   if(!this.contextMenu) {
  8.     this.createContextMenu();
  9.   }
  10.  
  11.   // 2 objects are connected
  12.   if(markedObjects.length==2) {
  13.     if(this.checkConnection(markedObjects[0], markedObjects[1])) {
  14.       html+='<li onclick="return flowchart.command(event, \'unconnect\', \''+obj.index+'\', this)">'+this.getText('c9')+'</li>';
  15.       this.contextMenu.resize(160, 80);                
  16.     }
  17.     else
  18.       html+='<li onclick="return flowchart.command(event, \'connect\', \''+obj.index+'\', this)">'+this.getText('c8')+'</li>';
  19.  
  20.     html+='<li onclick="return flowchart.command(event, \'remove\', \''+obj.index+'\', this)">'+this.getText('c4')+'</li>';
  21.   }
  22.  
  23.   // more than 2 connected
  24.   else if(markedObjects.length>2) {
  25.     html+='<li onclick="return flowchart.command(event, \'remove\', \''+obj.index+'\', this)">'+this.getText('c4')+'</li>';
  26.     html+='<li onclick="return flowchart.command(event, \'color\', \''+obj.index+'\', this)">'+this.getText('c7')+'</li>';
  27.   }
  28.    // clicked on arrows
  29.   else if(obj && obj.id && (String(obj.id).indexOf("snap")!=-1 || String(obj.id).indexOf("arrow")!=-1)) {    
  30.     html+='<li onclick="return flowchart.command(event, \'changeArrow\', \''+obj.index+'\', this)">'+this.getText('c6')+'</li>';
  31.     html+='<li onclick="return flowchart.command(event, \'drag_arrow\', \''+obj.index+'\', this)">'+this.getText('c5')+'</li>';
  32.  
  33.     this.contextMenu.resize(160, 80);
  34.     }
  35.  
  36.   // 1 object selected
  37.   else if(obj) {
  38.     html+='<li onclick="return flowchart.command(event, \'remove\', \''+obj.index+'\', this)">'+this.getText('c4')+'</li>';
  39.     html+='<li onclick="return flowchart.command(event, \'connect\', \''+obj.index+'\', this)">'+this.getText('c8')+'</li>';
  40.     html+='<li onclick="return flowchart.command(event, \'edit\', \''+obj.index+'\', this)">'+this.getText('c3')+'</li>';
  41.     html+='<li onclick="return flowchart.command(event, \'color\', \''+obj.index+'\', this)">'+this.getText('c7')+'</li>';
  42.     html+='<li onclick="return flowchart.command(event, \'save\', \''+obj.index+'\', this)">'+this.getText('c16')+'</li>';
  43.  
  44.   }
  45.  
  46.   // nothing selected
  47.   else {
  48.     html+='<li onclick="return flowchart.command(event, \'add\', \''+obj.index+'\', this)">'+this.getText('c10')+'</li>';
  49.     alert(" ----- entered  showContextMenu---new object  called ----"+html);
  50.   }
  51.   var varTemp3='<ul>'+html+'</ul>';
  52.   varText=varText+varTemp3
  53.      alert("---- varText in showContextMenu ----"+varText);
  54.   this.contextMenu.write(varTemp3);
  55.   this.contextMenu.move(Event.pointerX(e),   Event.pointerY(e)); 
  56.   this.contextMenu.show(true);
  57.  
  58.   this.checkClickedObject(e, obj.index);
  59. };
  60.  
  61.  
  62. Flowchart.prototype.checkClickedObject=function(e, index) {
  63.   var markedObjects = this.getMarkedObjects();
  64.  
  65.   // if no object is marked then mark the just clickt object
  66.   if(markedObjects.length==0 && this.objects[index]) {
  67.     this.markObject(e, this.objects[index]);
  68.   }
  69.   else if(markedObjects.length==1 && markedObjects[0] != this.objects[index]) {
  70.     this.unmarkAllObjects();
  71.     this.markObject(e, this.objects[index]);
  72.   }
  73. }
  74.  
  75.  
  76.  
  77. Flowchart.prototype.command=function(e, action, index, obj) {
  78.   if(!e)
  79.   e=window.event;
  80.  
  81.   if(obj)
  82.   obj.blur();
  83.  
  84.   if(action=='remove')
  85.   this.removeMarkedObjects();
  86.   else if(action=='edit')
  87.   this.enableEdit(e, index);
  88.   else if(action=='add') {
  89.     alert("------add called----");
  90.     var pos=false;
  91.     alert("------add called----pos"+pos);
  92.     //alert("------add called----condition---"+this.contextMenu && this.contextMenu.visible);
  93.     if(this.contextMenu && this.contextMenu.visible)
  94.       pos={x: this.contextMenu.x, y: this.contextMenu.y};
  95.          alert("------add called----going to addObject");
  96.  
  97.     this.addObject(1, pos);
  98.   }
  99.   else if(action=='connect')
  100.   this.connect();
  101.   else if(action=='unconnect')
  102.   this.unconnectMarkedObjects();
  103.   else if(action=='grid')
  104.   this.setGrid();
  105.   else if(action=='changeArrow')
  106.   this.swapSnappoint(index);
  107.   else if(action=='export')
  108.   this.exportAll();
  109.   else if(action=='view_source')
  110.       this.viewSource();
  111.     else if(action=='save')
  112.       this.save();
  113.  
  114.   this.hideContextMenu();
  115.   return false;
  116. };
  117. Flowchart.prototype.exportAll=function() {
  118.   for(var key in this.objects) {
  119.     console.log(this.exportObject(this.objects[key]));
  120.   };
  121. };
  122.  
  123. Flowchart.prototype.viewSource=function() {
  124.   for(var key in this.objects) {
  125.  
  126. var varTest='<html><body>'+varText+'</body></html>';
  127.     alert("varTest = "+varTest)
  128.  };
  129. };
  130. Flowchart.prototype.exportObject=function(object) {
  131.   return {width:object.width, height:object.height, x:object.x, y:object.y, id: object.id, connections: this.exportObjectConnections(object)};
  132. };
  133.  
  134. Flowchart.prototype.exportObjectConnections=function(object) {
  135.   var objects = [];
  136.   this.objectsConnection.each(function(connection) {
  137.     if(connection.objectA == object)
  138.       objects.push(connection.objectB.id);
  139.     else if(connection.objectB == object)
  140.       objects.push(connection.objectA.id);
  141.   }.bind(this));
  142.  
  143.   return objects;
  144. };


Expand|Select|Wrap|Line Numbers
  1. Flowchart.prototype.checkDragTarget=function(e) {
  2.   var target=(e.target) ? e.target : e.srcElement;   
  3.   return (target && target.getAttribute('ignore')) ? true : false;
  4. };
  5. Flowchart.prototype.enableEdit=function(e, index) {
  6.   this.disableEdit();
  7.   this.unmarkAllObjects();
  8.   this.markObject(e, this.objects[index]);
  9.  
  10.   var resizeDiv=$('flowchart_resize_'+index);
  11.  
  12.   this.enableResizeFnc = this.enableResizeFnc ? this.enableResizeFnc : this.enableResize.bindAsEventListener(this);
  13.  
  14.   if(this.editObjectIndex!==index) {
  15.     this.editObjectIndex=index;
  16.     var value=this.objects[index].element.childNodes[2].innerHTML;
  17.     var varTemp4='<textarea ignore="true" id="edit_'+index+'" class="inputarea">'+this.parseText(value)+'</textarea>';
  18.     varText=varText+varTemp4;
  19.   alert("---- varText in enableEdit ----"+varText);
  20.     this.objects[index].write(varTemp4);
  21.  
  22.     var textarea=$('edit_'+index);
  23.     textarea.style.width=(this.objects[index].element.offsetWidth-22)+'px';
  24.     textarea.style.height=(this.objects[index].element.offsetHeight-22)+'px';
  25.     textarea.focus();
  26.  
  27.     setTimeout(function() {
  28.       $('edit_'+this.editObjectIndex).focus();
  29.     }.bind(this), 100);
  30.  
  31.     resizeDiv.style.cursor='default';
  32.     Event.stopObserving(resizeDiv, 'mousedown', this.enableResizeFnc, false);
  33.   }
  34. };
  35.  
  36.  
  37. Flowchart.prototype.disableEdit=function(index) {
  38.   if(this.editObjectIndex!==false) {
  39.     var editObject = $('edit_'+this.editObjectIndex);
  40.     var resizeDiv  = $('flowchart_resize_'+this.editObjectIndex);
  41.  
  42.     if(editObject) {
  43.         varTemp5=this.parseText(editObject.value, true);
  44.         varText=varText+varTemp5
  45.     alert("---- varText in disableEdit ----"+varText);
  46.       this.objects[this.editObjectIndex].write(varTemp5);
  47.  
  48.       // is draggable again
  49.       this.setDraggable(this.editObjectIndex, true);
  50.  
  51.       Event.observe(resizeDiv, 'mousedown', this.enableResizeFnc, false);
  52.       resizeDiv.style.cursor='se-resize';
  53.  
  54.       this.editObjectIndex=false;
  55.     }
  56.   }
  57. }
  58. Flowchart.prototype.parseText=function(str, mode) {
  59.   return (mode) ? str.replace(/\n/gi, '<br>') : str.replace(/<br>/gi, '\n');
  60. };
  61.  
  62.  
  63. Flowchart.prototype.removeMarkedObjects=function() {
  64.   var markedObjects=this.getMarkedObjects();
  65.   var ask;
  66.  
  67.   if(markedObjects.length==1)
  68.   this.removeObject(markedObjects[0].index);
  69.   else {  
  70.     ask=confirm(this.getText('c1')+' '+markedObjects.length+' '+this.getText('c2'));
  71.  
  72.     if(ask) {
  73.       markedObjects.each(function(object) {
  74.     this.removeObject(object.index);
  75.       }.bind(this));
  76.     }
  77.   }
  78. }
  79.  
  80.  
  81. Flowchart.prototype.removeObject=function(index) {
  82.   this.unmarkAllObjects();
  83.   this.objects[index].show(0);
  84.  
  85.   // loop connected objects  
  86.   this.objectsConnection.each(function(object, counter) {
  87.     if(object.objectA==this.objects[index] || object.objectB==this.objects[index]) {
  88.       this.removeConnectionByIndex(counter);
  89.     }
  90.   }.bind(this));
  91. };
  92.  
Mar 26 '08 #12
Since the full code was not sufficient so im posting in parts Here is the 2nd part of Flowchart.js
Expand|Select|Wrap|Line Numbers
  1. Flowchart.prototype.removeObject=function(index) 
  2.   this.unmarkAllObjects();
  3.   this.objects[index].show(0);
  4.  
  5.   // loop connected objects  
  6.   this.objectsConnection.each(function(object, counter) {
  7.     if(object.objectA==this.objects[index] || object.objectB==this.objects[index]) {
  8.       this.removeConnectionByIndex(counter);
  9.     }
  10.   }.bind(this));
  11. };
  12. Flowchart.prototype.createConnectionObjects=function(markedObjects) {
  13.   if(!this.arrowParts)
  14.   this.arrowParts=[];
  15.  
  16.   var index=this.arrowParts.length;
  17.  
  18.   // new array
  19.   this.arrowParts[index]=[];
  20.   this.arrowParts[index][0]=new Layer.object('arrow_part_0_'+index, {x:0, y:0, width:9, height:1});
  21.     var varTemp6="<div style='position:absolute;left:4px;width:1px;height:100%;background-color:black'></div>";
  22.     varText=varText+varTemp6;
  23.   alert("---- varText in createConnectionObjects ----"+varText);
  24.   this.arrowParts[index][0].write(varTemp6);
  25.   this.arrowParts[index][0].element.style.overflow='hidden';
  26.   this.arrowParts[index][0].element.style.cursor='w-resize';
  27.  
  28.   this.arrowParts[index][0].draggable(true, true, {down: function(obj) {
  29.     this.startMoveLine(obj); return false; }.bind(this), move: function(obj)  { 
  30.       this.moveLine(obj); return false;
  31.     }.bind(this)});
  32.  
  33.   this.arrowParts[index][1]=new Layer.object('arrow_part_1_'+index, {x:0, y:0, width:1, height:1});
  34.   this.arrowParts[index][1].setBgColor('black');
  35.  
  36.   this.arrowParts[index][2]=new Layer.object('arrow_part_2_'+index, {x:0, y:0, width:1, height:1});
  37.   this.arrowParts[index][2].setBgColor('black');
  38.  
  39.   this.arrowParts[index][3]=new Layer.object('snap_1_'+index, {x:0, y:0, width:13, height:13, parent:this.arrowParts[index][1].element});
  40.  
  41.     var varTemp7='<img src="images/0.gif" id="arrow_3_'+index+'" />';
  42.     varText=varText+varTemp7;
  43.   alert("---- varText in createConnectionObjects 2nd time ----"+varText);
  44.   this.arrowParts[index][3].write(varTemp7);
  45.   this.arrowParts[index][3].element.style.overflow='hidden';
  46.   this.arrowParts[index][3].element.index=index;
  47.   this.arrowParts[index][3].element.snap_index=1;
  48.  
  49.  
  50.   Event.observe(this.arrowParts[index][3].element, 'mousedown', function(e) {
  51.     if((e.button ? e.button : e.which) == 2)
  52.       this.showContextMenu(e.target ? e.target : e.srcElement, e);
  53.   }.bindAsEventListener(this), false);
  54. Event.observe(this.arrowParts[index][3].element, 'dblclick', function(e) {
  55.     var target=e.target ? e.target : e.srcElement;
  56.  
  57.     if(!target.index && target.index!==0)
  58.       target=target.parentNode;    
  59.  
  60.     this.swapSnappoint(target.index);
  61.   }.bindAsEventListener(this), false);
  62.  
  63.  
  64.   $('arrow_3_'+index).index=index;
  65.  
  66.   this.arrowParts[index][4]=new Layer.object('snap_2_'+index, {x:0, y:0, width:13, height:13, parent:this.arrowParts[index][2].element});
  67.   var varTemp8='<img src="images/0.gif" id="arrow_4_'+index+'" />';
  68.   varText=varText+varTemp8;
  69.   alert("---- varText in createConnectionObjects 3rd time----"+varText);
  70.   this.arrowParts[index][4].write(varTemp8);
  71.   this.arrowParts[index][4].element.style.overflow='hidden';
  72.   this.arrowParts[index][4].element.index=index;
  73.   this.arrowParts[index][4].element.snap_index=2;
  74.  
  75.   Event.observe(this.arrowParts[index][4].element, 'mousedown', function(e) {    
  76.     if((e.button ? e.button : e.which) == 2)
  77.       this.showContextMenu(e.target ? e.target : e.srcElement, e);
  78.   }.bindAsEventListener(this), false);
  79.  
  80.  
  81.   Event.observe(this.arrowParts[index][4].element, 'dblclick', function(e) {
  82.     var target=e.target ? e.target : e.srcElement;
  83.  
  84.     if(!target.index && target.index!==0)
  85.       target=target.parentNode;    
  86.  
  87.     this.swapSnappoint(target.index);
  88.   }.bindAsEventListener(this), false);
  89.  
  90.  
  91.   $('arrow_4_'+index).index=index;
  92.  
  93.   this.swapSnappoint(index);
  94.  
  95.   // save connected objects
  96.   this.objectsConnection.push({objectB: markedObjects[0], objectA: markedObjects[1], arrow: this.arrowParts[index]});
  97.  
  98.   // save twin elementents to draggable line
  99.   this.arrowParts[index][0].lines=[this.arrowParts[index][1], this.arrowParts[index][2]];
  100. };
  101.  
  102.  
  103.  
  104. Flowchart.prototype.checkConnection=function(objectsA, objectsB) {
  105.   var foundObject = false;
  106.  
  107.   this.objectsConnection.each(function(object) {
  108.     if(object) {
  109.       if((objectsA==object.objectA && objectsB==object.objectB) || (objectsA==object.objectB && objectsB==object.objectA)) {
  110.     foundObject = true;
  111.     throw $break;
  112.       }
  113.     }
  114.   }.bind(this));
  115.  
  116.   return foundObject;
  117. };
  118.  
  119.  
  120.  
  121. Flowchart.prototype.unconnectMarkedObjects=function() {
  122.   var markedObjects=this.getMarkedObjects();
  123.  
  124.   if(markedObjects.length==2) {
  125.     this.objectsConnection.each(function(object, index) {
  126.       if(this.checkConnection(markedObjects[0], markedObjects[1])) {
  127.     this.removeConnectionByIndex(index);
  128.     throw $break;
  129.       }
  130.     }.bind(this));
  131.   }
  132. };

Expand|Select|Wrap|Line Numbers
  1. // to remove empty layers
  2. Flowchart.prototype.removeConnectionByIndex=function(index) {
  3.   if(this.objectsConnection[index] && this.objectsConnection[index].arrow) {
  4.     (5).times(function(i) {
  5.       this.objectsConnection[index].arrow[i].show();
  6.     }.bind(this));
  7.  
  8.     if(!this.garbageCollection)
  9.     this.garbageCollection=[];
  10.  
  11.     if(this.garbageCollection.indexOf(index)<0) {
  12.       this.garbageCollection.push(index);
  13.     }
  14.   }
  15.  
  16.   clearTimeout(this.clearGarbageTimeout);
  17.  
  18.   this.clearGarbageTimeout = setTimeout(function() {
  19.     this.clearGarbage();
  20.   }.bind(this), 100);
  21. };
  22.  
  23.  
  24. // remove unused layers
  25. Flowchart.prototype.clearGarbage=function() {
  26.   if(this.garbageCollection) {
  27.     var newConnectedObjects = [];
  28.  
  29.     for(var i=0; i<this.garbageCollection.length; i++) {
  30.       if(this.objectsConnection[this.garbageCollection[i]]) {
  31.     for(var key in this.objectsConnection[this.garbageCollection[i]])
  32.       delete this.objectsConnection[this.garbageCollection[i]][key];
  33.  
  34.     delete this.objectsConnection[this.garbageCollection[i]];
  35.       }
  36.     }
  37.  
  38.     this.objectsConnection.each(function(connection, index) {
  39.       if(this.objectsConnection[index]) {
  40.     newConnectedObjects.push(this.objectsConnection[index]);
  41.       }
  42.     }.bind(this));
  43.  
  44.     delete this.objectsConnection;
  45.     this.objectsConnection = newConnectedObjects;
  46.   }
  47. };
  48.  
  49.  
  50.  
  51. Flowchart.prototype.startDrag=function(e, obj) {
  52.   if(e.ctrlKey && obj.marked) {
  53.     // ctrl key pressed, click on a marked object -> unmark object
  54.     this.unmarkObject(obj);
  55.   }
  56.   else if((e.ctrlKey && !obj.marked) || this.mouseMode=='connect') {
  57.     // ctrl key pressed, click on a not marked object -> mark object
  58.     this.markObject(e, obj);
  59.   }
  60.   else if(!e.ctrlKey) {
  61.     var markedObjects = this.getMarkedObjects()
  62.     if(markedObjects.length != 1 || markedObjects[0] != obj) {
  63.       this.unmarkAllObjects();
  64.     }
  65.     this.markObject(e, obj);
  66.   }
  67.  
  68.   var markedObjects=this.getMarkedObjects();
  69.   this.startPosition={x:obj.x, y:obj.y};
  70.  
  71.   if(this.mouseMode=='connect') {
  72.     if(markedObjects.length==2)
  73.       this.connect();
  74.  
  75.     if(markedObjects.length>=2) {
  76.       this.setMouseMode();
  77.       this.unmarkAllObjects();
  78.     }
  79.   }
  80. };
  81.  
  82.  
  83. Flowchart.prototype.drag=function(dragObject) {
  84.   dragObject.setOpacity(80);
  85.   dragObject.marked=true;
  86.   dragObject.setStyle('marked');
  87.  
  88.   var x=(dragObject.x-this.startPosition.x);
  89.   var y=(dragObject.y-this.startPosition.y);
  90.  
  91.   var markedObjects=this.getMarkedObjects();
  92.  
  93.   // move all connected objects
  94.   markedObjects.each(function(markedObject) {
  95.     if(dragObject!=markedObject)
  96.       markedObject.move(markedObject.startPosition.x+x, markedObject.startPosition.y+y);
  97.   }.bind(this));
  98.  
  99.   this.connectAllObjects();
  100. };
  101.  
  102.  
  103. Flowchart.prototype.endDrag=function(obj) {
  104.   if($("grid").checked) {
  105.     this.snapToGrid(obj);
  106.  
  107.     // ajust connected objects
  108.     this.connectAllObjects();
  109.   }
  110.  
  111.   return obj.setOpacity(100);
  112. };
  113.  
  114. Flowchart.prototype.snapAllToGrid=function() {
  115.   for(var key in this.objects) {
  116.     this.snapToGrid(this.objects[key]);
  117.   }
  118.  
  119.   // ajust connected objects
  120.   this.connectAllObjects();
  121. };
  122.  
  123.  
  124. Flowchart.prototype.snapToGrid=function(obj) {
  125.   var pos = this.getSnapPos({x: obj.x, y:obj.y});
  126.   return obj.move(pos.x, pos.y);
  127. };
  128.  
  129. Flowchart.prototype.getSnapPos=function(pos) {
  130.   for(var x=i=0; true; i++) {
  131.     x = i*30;
  132.     if(x >= pos.x-15) {
  133.       break;
  134.     }
  135.   }
  136.  
  137.   for(var y=i=0; true; i++) {
  138.     y = i*30;
  139.     if(y >= pos.y-15) {
  140.       break;
  141.     }
  142.   }
  143.  
  144.   return {x: x, y: y};
  145. }
  146.  
  147. Flowchart.prototype.getFlowchartObjectStartPosition=function() {
  148.   alert("u called getFlowchartObjectStartPosition");
  149.   var pos={x: 10, y: 30};
  150.   alert("pos-----"+pos);
  151.   // loop all objects
  152.   for(var key in this.objects) {
  153.     if(pos.x==this.objects[key].x && pos.y==this.objects[key].y && this.objects[key].visible) {
  154.       pos.x+=10;
  155.       pos.y+=10;
  156.     }
  157.   }
  158.     alert("u called getFlowchartObjectStartPosition------returning back to addOObject");
  159.  
  160.   return pos;
  161. };
  162.  
  163. // connect 2 objects together
  164.  
  165. Flowchart.prototype.connect=function() {
  166.   markedObjects=this.getMarkedObjects();
  167.  
  168.   if(this.checkConnection(markedObjects[0], markedObjects[1])) {
  169.     alert(this.getText('c11'));
  170.   }
  171.   else {    
  172.     if(markedObjects.length!=2) {
  173.       if(this.getObjectsLength()>=2) {
  174.     this.setMouseMode("connect");
  175.       }
  176.       else {
  177.     alert(this.getText('c12'));
  178.       }
  179.     }
  180.     else {
  181.       this.createConnectionObjects(markedObjects);
  182.     }
  183.  
  184.     this.connectAllObjects();
  185.   }
  186. };
  187.  
  188.  
  189. Flowchart.prototype.setMouseMode=function(mode) {
  190.   this.mouseMode=mode;
  191.  
  192.   if(!this.mouseFollow) {
  193.     this.mouseFollow=new Layer.object('mouseFollow', {x:0, y:0, width:16, height:13, zindex: 1000000});
  194.   }
  195.  
  196.   this.followMouseFnc = this.followMouseFnc ? this.followMouseFnc : this.followMouse.bindAsEventListener(this)
  197.  
  198.   if(mode) { 
  199.     var markedObjects=this.getMarkedObjects();
  200.  
  201.     if(markedObjects.length==1) {
  202.       var on=true;
  203.       this.firstMarked=markedObjects[0];
  204.     }
  205.  
  206.     this.mouseFollow.write('<img src="images/mouse_'+mode+(on ? '_on' : '')+'.gif" width="16" height="13" id="mouseFollow_img" />');
  207.     Event.observe(window.document, 'mousemove', this.followMouseFnc, false);
  208.   }
  209.   else {
  210.     this.mouseFollow.show(0);
  211.     Event.stopObserving(window.document, 'mousemove', this.followMouseFnc, false);
  212.   }
  213. };
  214.  
  215.  
  216. Flowchart.prototype.followMouse=function(e) {  
  217.   if(this.mouseMode) {
  218.     var pos={x: Event.pointerX(e), y: Event.pointerY(e)};
  219.     var winHeight=(window.innerHeight) ? window.innerHeight : document.body.offsetHeight;
  220.  
  221.     if(pos.x+10>0 && pos.y-10>0)
  222.     this.mouseFollow.move(pos.x+10, pos.y-10);
  223.  
  224.     this.mouseFollow.show(pos.x <= 11 || pos.y <= 20 || pos.y+15 > winHeight ? 0 : 1);
  225.   }
  226. };


Expand|Select|Wrap|Line Numbers
  1. Flowchart.prototype.swapSnappoint=function(index) {
  2.   var markedObjects=this.getMarkedObjects();
  3.  
  4.   if(!this.arrowParts[index].arrowDirection && this.firstMarked) {
  5.     this.secondMarked=(markedObjects[0].index==this.firstMarked.index) ? markedObjects[1] : markedObjects[0];    
  6.     this.arrowParts[index].arrowDirection=(this.firstMarked.x<this.secondMarked.x) ? 1 : 2;
  7.   }
  8.   else     
  9.   this.arrowParts[index].arrowDirection = (this.arrowParts[index].arrowDirection==1) ? 2 : 1;
  10.  
  11.   this.setArrowDirections();     
  12. };
  13.  
  14.  
  15. Flowchart.prototype.setArrowDirections=function() {
  16.   // set arrows
  17.   this.arrowParts.each(function(part, index) {
  18.     var direction = (part[3].x > part[4].x && part.arrowDirection == 1) || (part[3].x < part[4].x && part.arrowDirection == 2) ? 'right' : 'left';
  19.  
  20.     if(part.arrowDirection == 1) {
  21.       $('arrow_3_'+index).src='images/arrow_'+direction+'.gif';
  22.       $('arrow_4_'+index).src='images/0.gif';
  23.     }
  24.     else {
  25.       $('arrow_3_'+index).src='images/0.gif';
  26.       $('arrow_4_'+index).src='images/arrow_'+direction+'.gif';
  27.     }
  28.   }.bind(this));
  29. };
  30.  
  31.  
  32. Flowchart.prototype.startMoveLine=function(obj) {
  33.   obj.startPosition={y: obj.y, x: obj.x};
  34.   obj.lines[0].startSize={width: obj.lines[0].width, height: obj.lines[0].height};
  35.   obj.lines[1].startSize={width: obj.lines[1].width, height: obj.lines[1].height};
  36.   obj.lines[0].startPosition={x: obj.lines[0].x, y: obj.lines[0].y};
  37.   obj.lines[1].startPosition={x: obj.lines[1].x, y: obj.lines[1].y};
  38. };
  39.  
  40.  
  41. Flowchart.prototype.moveLine=function(obj) {
  42.   if(obj.lines[0].startSize.width-(obj.startPosition.x-obj.x) <= 5 || obj.lines[0].startSize.width+(obj.startPosition.x-obj.x) <= 5) {
  43.     obj.move(obj.lastPos, obj.startPosition.y);
  44.     return false;
  45.   }
  46.  
  47.   obj.move(obj.x, obj.startPosition.y);
  48.   obj.lastPosX=obj.x;
  49.  
  50.   if(obj.lines[1].startPosition.x < obj.lines[0].startPosition.x) {
  51.     obj.lines[0].resize(obj.lines[0].startSize.width+(obj.startPosition.x-obj.x), 1);
  52.     obj.lines[0].move(obj.lines[0].startPosition.x-(obj.startPosition.x-obj.x), obj.lines[0].y);
  53.     obj.lines[1].resize(obj.lines[1].startSize.width-(obj.startPosition.x-obj.x), 1);
  54.   }
  55.   else {
  56.     obj.lines[0].resize(obj.lines[0].startSize.width-(obj.startPosition.x-obj.x), 1);
  57.     obj.lines[1].resize(obj.lines[1].startSize.width+(obj.startPosition.x-obj.x), 1);
  58.     obj.lines[1].move(obj.lines[1].startPosition.x-(obj.startPosition.x-obj.x), obj.lines[1].y);
  59.   }
  60. };
  61.  
  62.  
  63.  
  64. Flowchart.prototype.moveObjectByKey=function(e, direction) {
  65.   if(this.editObjectIndex!==false)
  66.   return false;
  67.  
  68.   var markedObjects=this.getMarkedObjects();
  69.   var speed=(e.ctrlKey) ? 10 : 1;
  70.  
  71.   // move all connected objects
  72.   if(direction=='left') {
  73.     markedObjects.each(function(markedObject) {
  74.       markedObject.shift(-speed,0);
  75.     }.bind(this));
  76.   }
  77.   else if(direction=='right') {
  78.     markedObjects.each(function(markedObject) {
  79.       markedObject.shift(speed,0);
  80.     }.bind(this));
  81.   }
  82.   else if(direction=='up') {
  83.     markedObjects.each(function(markedObject) {
  84.       markedObject.shift(0,-speed);
  85.     }.bind(this));
  86.   }
  87.   else if(direction=='down') {
  88.     markedObjects.each(function(markedObject) {
  89.       markedObject.shift(0,speed);
  90.     }.bind(this));
  91.   }
  92.  
  93.   // ajust connected objects
  94.   this.connectAllObjects();
  95.  
  96.   return false;
  97. };
  98.  
  99.  
  100.  
  101. Flowchart.prototype.connectAllObjects=function() {
  102.   this.objectsConnection.each(function(object) {
  103.     this.connectObject(object);
  104.   }.bind(this));
  105. };
  106.  
  107.  
  108. Flowchart.prototype.connectObject=function(obj) {
  109.   var width=0;
  110.   var height=0;
  111.   var x_0=0;
  112.   var y_0=0;
  113.   var x_1=0;
  114.   var y_1=0;
  115.   var x_2=0;
  116.   var y_2=0;
  117.   var diff=2;
  118.  
  119.   if(obj.objectA.x>obj.objectB.x) {
  120.     width=obj.objectA.x-(obj.objectB.x+obj.objectB.width);
  121.     x_1=obj.objectA.x-Math.floor(width/diff);
  122.     x_2=obj.objectB.x+obj.objectB.width;
  123.  
  124.     y_1=obj.objectA.y+Math.floor(obj.objectA.height/2);
  125.     y_2=obj.objectB.y+Math.floor(obj.objectB.height/2);
  126.  
  127.     obj.arrow[3].move(Math.floor(width/diff)-12, -6);
  128.     obj.arrow[3].show(1);
  129.  
  130.     obj.arrow[4].move(0, -6);
  131.     obj.arrow[4].show(1);
  132.   }
  133.   else {    
  134.     width=obj.objectB.x-(obj.objectA.x+obj.objectA.width);
  135.     x_2=obj.objectB.x-Math.floor(width/diff);
  136.     x_1=obj.objectA.x+obj.objectA.width;
  137.  
  138.     y_1=obj.objectA.y+Math.floor(obj.objectA.height/2);
  139.     y_2=obj.objectB.y+Math.floor(obj.objectB.height/2);
  140.  
  141.     obj.arrow[3].move(0, -6);
  142.     obj.arrow[3].show(1);
  143.  
  144.     obj.arrow[4].move(Math.floor(width/diff)-12, -6);
  145.     obj.arrow[4].show(1);
  146.   }
  147.  
  148.   x_0= (x_2>x_1 ? x_1 : x_2)+Math.floor(width/diff)-4;
  149.   y_0= y_2>y_1 ? y_1 : y_2;
  150.   height=(y_2>y_1 ? y_2-y_1 : y_1-y_2)+1;
  151.  
  152.   obj.arrow[0].resize(9, height);
  153.   obj.arrow[0].move(x_0, y_0);
  154.   obj.arrow[0].show(1);
  155.  
  156.   obj.arrow[1].resize(Math.floor(width/diff), 1);
  157.   obj.arrow[1].move(x_1, y_1);
  158.   obj.arrow[1].show(1);
  159.  
  160.   obj.arrow[2].resize(Math.floor(width/diff), 1);     
  161.   obj.arrow[2].move(x_2, y_2);
  162.   obj.arrow[2].show(1);
  163.  
  164.   this.setArrowDirections();
  165. };
  166.  
  167.  
  168. Flowchart.prototype.markObject=function(e, obj) {
  169.   if(obj) {
  170.     obj.setStyle('marked');
  171.     obj.marked=true;
  172.   }
  173.  
  174.   return false;
  175. };
  176.  
  177.  
  178. Flowchart.prototype.unmarkObject=function(obj) {
  179.   obj.setStyle('unmarked');
  180.   obj.marked=false;
  181.   return false;
  182. };
  183.  
  184.  
  185. Flowchart.prototype.unmarkAllObjects=function() {
  186.   for(var key in this.objects) {
  187.     this.unmarkObject(this.objects[key]);
  188.   }
  189. };
  190.  
  191.  
  192. Flowchart.prototype.getMarkedObjects=function() {
  193.   var markedObjects=[];
  194.  
  195.   for(var key in this.objects) {
  196.     if(this.objects[key].marked) {
  197.       this.objects[key].startPosition={x:this.objects[key].x, y:this.objects[key].y};
  198.       markedObjects.push(this.objects[key]);
  199.     }
  200.   }
  201.  
  202.   return markedObjects;
  203. };
  204.  
  205.  
  206. Flowchart.prototype.setGrid=function() {
  207.   if($("grid").checked) {
  208.     this.snapAllToGrid();
  209.   }
  210. };
  211.  
  212.  
  213. Flowchart.prototype.error=function(error) {
  214.   alert(error);
  215.   return false;
  216. };
  217. {


Sir
there are still supporting files of this file.Shall i post them also????
Mar 26 '08 #13
acoder
16,027 Expert Mod 8TB
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)?
Mar 26 '08 #14
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(rectangle) 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

Expand|Select|Wrap|Line Numbers
  1. var varTemp1='<div class="top_left" id="flowchart_top_left_'+index+'"></div>'+
  2.                 '<div class="top_right" id="flowchart_top_right_'+index+'"></div>'+
  3.                 '<div class="inside" id="flowchart_inside_'+index+'"></div>'+
  4.                 '<div class="resize" id="flowchart_resize_'+index+'"></div>'+
  5.                 '<div class="bottom_left" id="flowchart_bottom_left_'+index+'"></div>'+
  6.                 '<div class="bottom_right" id="flowchart_bottom_right_'+index+'"></div>';
  7.   alert("------varTemp1 in addObject ----"+varTemp1);
  8.   alert("--- varText before adding---"+varText);
  9. //    varText=varText+varTemp1;
  10. varText=varTemp1;
  11.   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
Mar 27 '08 #15
acoder
16,027 Expert Mod 8TB
Since this is for IE only, try saving using execCommand("saveas") - check it up.

PS. changed the thread title.
Mar 27 '08 #16
Since this is for IE only, try saving using execCommand("saveas") - check it up.

PS. changed the thread title.
Sir
Can you please explain saving using execCommand("saveas") ...

Thank You
Mar 28 '08 #17
acoder
16,027 Expert Mod 8TB
A simple search would've found you some good links, but here's one.
Mar 31 '08 #18

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

6 posts views Thread by jojobar | last post: by
1 post views Thread by Darren | last post: by
3 posts views Thread by daveward10 | last post: by
reply views Thread by bassi.carlo | last post: by
reply views Thread by Truevision .Net | last post: by
1 post views Thread by CARIGAR | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.