Develop and Download Open Source Software

iSlideMaker

Browse Subversion Repository

/[islidemaker]/SvgEditor.js

Diff of /SvgEditor.js

Parent Directory Parent Directory | Revision Log Revision Log | View Patch Patch

revision 24 by isao-hara, Thu Jul 22 01:23:35 2010 UTC revision 25 by isao-hara, Thu Jul 22 06:21:29 2010 UTC
# Line 55  var svg_top = null; Line 55  var svg_top = null;
55  var svg_select = null;  var svg_select = null;
56  var svg_defs = null;  var svg_defs = null;
57    
58    var svg_font_size = 24;
59    var svg_font_family = 'Helvetica';
60    var svg_color = '#000000';
61    var svg_fill_color = '#ffffff';
62    var svg_line_width = 1;
63    
64  ///// Color  ///// Color
65  var colors=new Array('none', '#ffffff',  var colors=new Array('none', '#ffffff',
66    '#000000', '#3f3f3f', '#7f7f7f', '#bfbfbf',    '#000000', '#3f3f3f', '#7f7f7f', '#bfbfbf',
# Line 92  function restoreValues(){ Line 98  function restoreValues(){
98    MgrPath = localStorage.getItem('MgrPath') ? localStorage.getItem('MgrPath')  : "";    MgrPath = localStorage.getItem('MgrPath') ? localStorage.getItem('MgrPath')  : "";
99    window.onbeforeuload=function(){ return saveChanges(); }    window.onbeforeuload=function(){ return saveChanges(); }
100  }  }
101    
102  function clearAll(){  function clearAll(){
103    localsStorage.clear();    localsStorage.clear();
104    restoreValudes();    restoreValudes();
# Line 534  function createMenuBar(){ Line 541  function createMenuBar(){
541    menu += "<li><button onClick='createNewFile()'>Create New File</button></li>";    menu += "<li><button onClick='createNewFile()'>Create New File</button></li>";
542    menu += "<li><button onClick='deleteAllFile()'>Delete All</button></li>";    menu += "<li><button onClick='deleteAllFile()'>Delete All</button></li>";
543    menu += "<li><button onClick='getRemoteFileList()'>File List on a Server</button></li>";    menu += "<li><button onClick='getRemoteFileList()'>File List on a Server</button></li>";
544      menu += "<li><button onClick='configServer()'>Server Configuration</button></li>";
545    menu += "</ul><p class='cls'>";    menu += "</ul><p class='cls'>";
546    return menu;    return menu;
547  }  }
548    
549    //// Config
550    function setConfig(){
551      var ele = document.getElementById('ServerURL');
552      MgrPath=ele.value;
553      alert("Done");
554    }
555    
556    function configServer(){
557      var popupDiv = document.getElementById('popup');
558      var string = "";
559    
560      string += "<H1 class='title'>Server Configration</H1>\n";
561      string += "<div class=\"input_form\">\n";
562      string += "Filename:<input id='ServerURL' name='url' value=\""+MgrPath+"\" size=\"80\"/><br>\n";
563      string += "<button onClick=\"setConfig();hideItemById('popup'); \">Done</button>\n";
564      string += "<button onClick=\"hideItemById('popup'); \">Cancel</button>\n";
565      string += "</div>\n";
566    
567      popupDiv.innerHTML=string;
568      popupDiv.style.display='block';
569    }
570    
571  ////  ////
572  function createNewFile(){  function createNewFile(){
573    var popupDiv = document.getElementById('popup');    var popupDiv = document.getElementById('popup');
# Line 702  function updateShowMenu(){ Line 732  function updateShowMenu(){
732    updateToolBar();    updateToolBar();
733  }  }
734    
735    function showColorPalette(val){
736      var palette = document.getElementById('color-palette');
737      var ele;
738      var current = palette.getAttribute("targetType");
739    
740      if(palette.style.display=='block' && current == val){
741        palette.style.display='none';
742        return;
743      }
744    
745      if(val == 'fill'){
746       ele = document.getElementById('toolFill');
747      }else{
748       ele = document.getElementById('toolStroke');
749      }
750      
751      var pos= ele.offsetTop + 110;
752      palette.style.top = pos +"px";
753      palette.style.display='block';
754      palette.setAttribute("targetType", val);
755    
756    }
757    
758  function updateToolBar(){  function updateToolBar(){
759    var toolbar = document.getElementById('toolBar');    var toolbar = document.getElementById('toolBar');
760      var str = "";
761    if(!toolbar.innerHTML){    if(!toolbar.innerHTML){
762      toolbar.innerHTML= "<ul>";      str += "<li><button id=\"b_selector\" onClick=\"setSVGMode('selector');\"><img src=\"images/arrow.png\" /></button> </li>\n";
763      toolbar.innerHTML+= "<li><button id=\"b_selector\" onClick=\"setSVGMode('selector');\"><img src=\"images/arrow.png\" /></button> </li>\n";      str += "<li><button id=\"b_newPath\" onClick=\"setSVGMode('newPath'); \"><img src=\"images/path.png\" /></button></li> \n";
764      toolbar.innerHTML+= "<li><button id=\"b_newPath\" onClick=\"setSVGMode('newPath'); \"><img src=\"images/path.png\" /></button></li> \n";      str += "<li><button id=\"b_newLine\" onClick=\"setSVGMode('newLine'); \"><img src=\"images/line.png\" /> </button></li> \n";
765      toolbar.innerHTML+= "<li><button id=\"b_newLine\" onClick=\"setSVGMode('newLine'); \"><img src=\"images/line.png\" /> </button></li> \n";      str += "<li><button id=\"b_text\" onClick=\"setSVGMode('text'); \"><img src=\"images/text.png\" /></button> </li>\n";
766      toolbar.innerHTML+= "<li><button id=\"b_text\" onClick=\"setSVGMode('text'); \"><img src=\"images/text.png\" /></button> </li>\n";      str += "<li><button id=\"b_rect\" onClick=\"setSVGMode('rect'); \"> <img src=\"images/rect.png\" />  </button></li> \n";
767      toolbar.innerHTML+= "<li><button id=\"b_rect\" onClick=\"setSVGMode('rect'); \"> <img src=\"images/rect.png\" />  </button></li> \n";      str += "<li><button id=\"b_circle\" onClick=\"setSVGMode('circle'); \"> <img src=\"images/circle.png\" /> </button></li> \n";
768      toolbar.innerHTML+= "<li><button id=\"b_circle\" onClick=\"setSVGMode('circle'); \"> <img src=\"images/circle.png\" /> </button></li> \n";      str += "<li><button id=\"b_ellipse\" onClick=\"setSVGMode('ellipse'); \"> <img src=\"images/ellipse.png\" /> </button></li> \n";
769      toolbar.innerHTML+= "<li><button id=\"b_ellipse\" onClick=\"setSVGMode('ellipse'); \"> <img src=\"images/ellipse.png\" /> </button></li> \n";      str += "<li><button id=\"b_image\" onClick=\"setSVGMode('image'); \"> <img src=\"images/img.png\" /> </button></li> \n";
770      toolbar.innerHTML+= "<li><button id=\"b_image\" onClick=\"setSVGMode('image'); \"> <img src=\"images/img.png\" /> </button></li> \n";      str += "<li>&nbsp;</li>";
771      toolbar.innerHTML+= "</ul>";      str += "<li><button id=\"b_fillColor\" onClick=\"showColorPalette('fill');\"><img src=\"images/Fill.png\" /><div id=\"toolFill\"></div></button></li> \n";
772        str += "<li><button id=\"b_strokeColor\" onClick=\"showColorPalette('stroke');\"><img src=\"images/Stroke.png\" /><div id=\"toolStroke\"></div></button></li> \n";
773        toolbar.innerHTML= "<ul>"+str+"</ul>";
774    }    }
775    
776    toolbar.style.display='block';    toolbar.style.display='block';
   
777  }  }
778    
779  function setMode(m){  function setMode(m){
# Line 744  function setMode(m){ Line 799  function setMode(m){
799        showItemById('preview');        showItemById('preview');
800        hideItemById('editDiv');        hideItemById('editDiv');
801        hideItemById('popup');        hideItemById('popup');
802        showItemById('color-palette');        hideItemById('color-palette');
803        showItemById('menuDiv');        showItemById('menuDiv');
804        showItemById('toolBar');        showItemById('toolBar');
805        break;        break;
# Line 824  function previewFile(data){ Line 879  function previewFile(data){
879    appendSVGObj(svg_select);    appendSVGObj(svg_select);
880  }  }
881    
   
   
882  function mkColorPalette(){  function mkColorPalette(){
883    var palette = document.getElementById('color-palette');    var palette = document.getElementById('color-palette');
884    if(!palette) return;    if(!palette) return;
# Line 834  function mkColorPalette(){ Line 887  function mkColorPalette(){
887    palette.innerHTML="";    palette.innerHTML="";
888    palette.addEventListener("touchstart", onTouchStartColor, false);    palette.addEventListener("touchstart", onTouchStartColor, false);
889    
890    palette.innerHTML="<select id=\"color_sel\"><option value=\"fill\">Fill</option><option value=\"stroke\">Color</option></select>";  //  palette.innerHTML="<select id=\"color_sel\"><option value=\"fill\">Fill</option><option value=\"stroke\">Color</option></select>";
891    for(var i=0; i<colors.length ;i++){    for(var i=0; i<colors.length ;i++){
892      if(colors[i] == 'none')      if(colors[i] == 'none')
893        palette.innerHTML +="<div class=\"item\" style=\"background-color:"+colors[i]+";\" color-val=\""+colors[i]+"\">X</div>";        palette.innerHTML +="<div class=\"item\" style=\"background-color:"+colors[i]+";\" color-val=\""+colors[i]+"\">X</div>";
894      else      else
895        palette.innerHTML +="<div class=\"item\" style=\"background-color:"+colors[i]+";\" color-val=\""+colors[i]+"\"> </div>";        palette.innerHTML +="<div class=\"item\" style=\"background-color:"+colors[i]+";\" color-val=\""+colors[i]+"\"> </div>";
896    }    }
897      palette.style.width='120px';
898  }  }
899    
900  ////// for SVG object  ////// for SVG object
# Line 856  function updateSVGObjMenu(){ Line 910  function updateSVGObjMenu(){
910       if(selectedItems[0]){       if(selectedItems[0]){
911         res += setSVGObjectProp(selectedItems[0]);         res += setSVGObjectProp(selectedItems[0]);
912       }else{       }else{
913         res += propSVGText("", 24, '#000000');         res += propSVGText("", svg_font_size, svg_color);
914       }       }
915       break;       break;
916      case 'rect':      case 'rect':
# Line 871  function updateSVGObjMenu(){ Line 925  function updateSVGObjMenu(){
925       if(selectedItems[0]){       if(selectedItems[0]){
926         res += setSVGObjectProp(selectedItems[0]);         res += setSVGObjectProp(selectedItems[0]);
927       }else{       }else{
928         res += propSVGObj(tag+":", 1, '#000000', '#ffffff');         res += propSVGObj(tag+":", svg_line_width, svg_color, svg_fill_color);
929       }       }
930       break;       break;
931      case 'image':      case 'image':
# Line 895  function propSVGText(str, size, color){ Line 949  function propSVGText(str, size, color){
949    res += "<input type=\"text\" id=\"svg_text\" value=\""+str+"\"/>";    res += "<input type=\"text\" id=\"svg_text\" value=\""+str+"\"/>";
950    res += "Color:<input type=\"text\" id=\"svg_color\" value=\""+color+"\" size=\"8\"/>";    res += "Color:<input type=\"text\" id=\"svg_color\" value=\""+color+"\" size=\"8\"/>";
951    res += "Size:<input type=\"text\" id=\"svg_size\" value=\""+size+"\" size=\"4\"/>";    res += "Size:<input type=\"text\" id=\"svg_size\" value=\""+size+"\" size=\"4\"/>";
952    
953      document.getElementById('toolFill').style.backgroundColor=color;
954    return res;    return res;
955  }  }
956    
# Line 906  function propSVGObj(type, stroke, color, Line 962  function propSVGObj(type, stroke, color,
962    res += "Fill:<input type=\"text\" id=\"svg_fill\" value=\""+fill+"\" size=\"8\"/>";    res += "Fill:<input type=\"text\" id=\"svg_fill\" value=\""+fill+"\" size=\"8\"/>";
963    res += "Color:<input type=\"text\" id=\"svg_color\" value=\""+color+"\" size=\"8\"/>";    res += "Color:<input type=\"text\" id=\"svg_color\" value=\""+color+"\" size=\"8\"/>";
964    res += "L:<input type=\"text\" id=\"svg_stroke\" value=\""+stroke+"\" size=\"2\"/>";    res += "L:<input type=\"text\" id=\"svg_stroke\" value=\""+stroke+"\" size=\"2\"/>";
965    
966      document.getElementById('toolFill').style.backgroundColor=fill;
967      document.getElementById('toolStroke').style.backgroundColor=color;
968    return res;    return res;
969  }  }
970    
# Line 924  function propSVGLine(type, stroke, color Line 983  function propSVGLine(type, stroke, color
983    }else{    }else{
984      res += "<button class=\"tool\" onClick=\"setRightArrow();\"><img src=\"images/rarrow.png\" /></button>";      res += "<button class=\"tool\" onClick=\"setRightArrow();\"><img src=\"images/rarrow.png\" /></button>";
985    }    }
986    
987      document.getElementById('toolFill').style.backgroundColor=fill;
988      document.getElementById('toolStroke').style.backgroundColor=color;
989    
990    return res;    return res;
991  }  }
992    
# Line 1708  function onTouchStartCore(){ Line 1771  function onTouchStartCore(){
1771     }     }
1772  }  }
1773    
1774    var editingTextObj = null;
1775    
1776    function onDoubleTap(e){
1777      if(selectedItems.length == 1 ){
1778        var obj = selectedItems[0];
1779        switch(obj.tagName){
1780          case 'svg:text':
1781            var txt = trim(obj.textContent);
1782            var size = parseInt(obj.getAttribute("font-size"));
1783            var x = parseInt(obj.getAttribute("x"));
1784            var y = parseInt(obj.getAttribute("y"));
1785            x = x-20;
1786            y = y-size*0.8 -10;
1787            putInputForm(x, y, txt, size, obj.id);
1788            obj.style.display = 'none';
1789            editingTextObj = obj;
1790            break;
1791          default:
1792            break;
1793        }
1794      }
1795    }
1796    
1797  function getPoints(d){  function getPoints(d){
1798    var p = d.split(' ');    var p = d.split(' ');
1799    var res = new Array();    var res = new Array();
# Line 1908  function svgInputTextExec(e){ Line 1994  function svgInputTextExec(e){
1994    setSVGMode('selector');    setSVGMode('selector');
1995  }  }
1996    
1997    function svgModifyTextExec(e){
1998      var inputform = document.getElementById('svg_input');
1999      editingTextObj.textContent = inputform.value;
2000      inputform.setAttribute("type", "hidden");
2001      editingTextObj.style.display='block';
2002      setSVGMode('selector');
2003    }
2004    
2005  function svgInputFormAdjust(e){  function svgInputFormAdjust(e){
2006    var inputform = document.getElementById('svg_input');    var inputform = document.getElementById('svg_input');
2007    inputform.size = jstrlen(inputform.value) + 1;    inputform.size = jstrlen(inputform.value) + 1;
# Line 1928  function jstrlen(str) { Line 2022  function jstrlen(str) {
2022     return len;     return len;
2023  }  }
2024    
2025  function putInputForm(x, y, txt, size){  function putInputForm(x, y, txt, size, id){
2026    var inputform = document.getElementById('svg_input');    var inputform = document.getElementById('svg_input');
2027    if(!inputform){    if(!inputform){
2028      inputform = document.createElement('input');      inputform = document.createElement('input');
2029      inputform.setAttribute("id", "svg_input");      inputform.setAttribute("id", "svg_input");
2030      inputform.setAttribute("style", "position:absolute;top:0px;left:0px; border:0px none");      inputform.setAttribute("style", "position:absolute;top:0px;left:0px; border:0px none");
2031      if(document.addEventListner){      if(document.addEventListner){
2032        inputform.addEventListener("onChange", svgInputTextExec,false);        if(id){
2033            inputform.addEventListener("onChange", svgModifyTextExec,false);
2034          }else{
2035            inputform.addEventListener("onChange", svgInputTextExec,false);
2036          }
2037        inputform.addEventListener("onkeydown", svgInputFormAdjust,false);        inputform.addEventListener("onkeydown", svgInputFormAdjust,false);
2038      }else{      }else{
2039        inputform.setAttribute("onChange", "svgInputTextExec()");        if(id){
2040            inputform.setAttribute("onChange", "svgModifyTextExec()");
2041          }else{
2042            inputform.setAttribute("onChange", "svgInputTextExec()");
2043          }
2044        inputform.setAttribute("onkeydown", "svgInputFormAdjust()");        inputform.setAttribute("onkeydown", "svgInputFormAdjust()");
2045      }      }
2046      preview.appendChild(inputform);      preview.appendChild(inputform);
# Line 1950  function putInputForm(x, y, txt, size){ Line 2052  function putInputForm(x, y, txt, size){
2052    inputform.style.fontSize=size+'px';    inputform.style.fontSize=size+'px';
2053    inputform.style.background='none';    inputform.style.background='none';
2054    inputform.value = txt;    inputform.value = txt;
2055    inputform.size = txt.length+1;    inputform.size = jstrlen(txt) + 1;
2056    inputform.focus();    inputform.focus();
2057  }  }
2058    
2059  ///// EventHandler for iPad  ///// EventHandler for iPad
2060    var firstTouch = new Date();
2061    
2062  function onTouchStart(e){  function onTouchStart(e){
2063    //e.preventDefault();    //e.preventDefault();
2064    sx=e.touches[0].pageX;    sx=e.touches[0].pageX;
# Line 1963  function onTouchStart(e){ Line 2067  function onTouchStart(e){
2067    ey=e.touches[0].pageY;    ey=e.touches[0].pageY;
2068    
2069    if (e.touches.length == 1){    if (e.touches.length == 1){
2070      onTouchStartCore();      var touchtime = new Date();
2071   }      var dt = touchtime.getTime() - firstTouch.getTime();
2072    
2073        if(dt < 300 ){
2074          onDoubleTap();
2075        }else{
2076          onTouchStartCore();
2077        }
2078        firstTouch = touchtime;
2079      }
2080    
2081   updateSelectedRectangle();   updateSelectedRectangle();
2082  }  }
2083    
2084  function onTouchMove(e){  function onTouchMove(e){
   e.preventDefault();  
2085    
2086    if (e.touches.length == 1){    if (e.touches.length == 1){
2087        e.preventDefault();
2088      onTouchMoveCode1(e.touches[0].pageX, e.touches[0].pageY);      onTouchMoveCode1(e.touches[0].pageX, e.touches[0].pageY);
2089    }else if (e.touches.length == 2){    }else if (e.touches.length == 2){
2090        e.preventDefault();
2091      var dx = e.touches[0].pageX-e.touches[1].pageX;      var dx = e.touches[0].pageX-e.touches[1].pageX;
2092      var dy = e.touches[0].pageY-e.touches[1].pageY;      var dy = e.touches[0].pageY-e.touches[1].pageY;
2093      var th = Math.abs(Math.atan2(dy , dx)/Math.PI *180);      var th = Math.abs(Math.atan2(dy , dx)/Math.PI *180);
# Line 2062  function onGestureEnd(e){ Line 2175  function onGestureEnd(e){
2175  function onTouchStartColor(e){  function onTouchStartColor(e){
2176    if(e.touches.length == 1){    if(e.touches.length == 1){
2177      var ele = e.touches[0].target;      var ele = e.touches[0].target;
2178      var color = ele.getAttribute("color-val");      var color;
2179      var color_sel = document.getElementById('color_sel');      try{
2180         color = ele.getAttribute("color-val");
2181        }catch(err){  hideItemById('color-palette'); return;}
2182        var palette = document.getElementById('color-palette');
2183        var color_sel = palette.getAttribute("targetType");
2184      var fill_input = document.getElementById('svg_fill');      var fill_input = document.getElementById('svg_fill');
2185      var color_input = document.getElementById('svg_color');      var color_input = document.getElementById('svg_color');
2186      if(color) {      if(color) {
2187        for(var i=0;selectedItems.length; i++){        for(var i=0;i < selectedItems.length; i++){
2188          selectedItems[i].setAttribute(color_sel.value, color);          selectedItems[i].setAttribute(color_sel, color);
2189          if(color_sel.value == 'fill'){          if(color_sel == 'fill'){
2190             fill_input.value=color;             if(fill_input) fill_input.value=color;
2191               document.getElementById('toolFill').style.backgroundColor=color;
2192          }else{          }else{
2193             color_input.value=color;             color_input.value=color;
2194         }             document.getElementById('toolStroke').style.backgroundColor=color;
2195            }
2196        }        }
2197      }      }
2198        palette.style.display='none';
2199    }    }
2200  }  }
2201  ///// For Safari  ///// For Safari
Legend:
Removed from v.24  
changed lines
  Added in v.25
Back to OSDN">Back to OSDN
 ViewVC Help
Powered by ViewVC 1.1.26  
About OSDN
Find Software
Develop Software
Help