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 35 by isao-hara, Mon Jul 26 00:46:07 2010 UTC revision 36 by isao-hara, Mon Jul 26 04:24:20 2010 UTC
# Line 721  function editCurrentFile(){ Line 721  function editCurrentFile(){
721    editFile(name);    editFile(name);
722  }  }
723    
724    function downItem(){
725      if(selectedItems.length != 1) return;
726      var itm = selectedItems[0];
727      
728      var nodes = svg_top.childNodes;
729      for(var i=0; i< nodes.length; i++){
730        if(nodes[i] == itm) break;
731      }
732      if (i > 0)
733        svg_top.insertBefore(itm, nodes[i-1]);
734    }
735    
736    function upItem(){
737      if(selectedItems.length != 1) return;
738      var itm = selectedItems[0];
739    
740      var nodes = svg_top.childNodes;
741      for(var i=0; i< nodes.length; i++){
742        if(nodes[i] == itm) break;
743      }
744    
745      if (i == nodes.length-2){
746        svg_top.appendChild(itm);
747      }else if (i < nodes.length-1){
748        svg_top.insertBefore(itm, nodes[i+2]);
749      }
750    }
751    
752  //  Show File  //  Show File
753  function updateShowMenu(){  function updateShowMenu(){
754    var menuDiv = document.getElementById('menuDiv');    var menuDiv = document.getElementById('menuDiv');
# Line 729  function updateShowMenu(){ Line 757  function updateShowMenu(){
757    menuDiv.innerHTML+= "<button onClick=\"saveData();\"> Save </button>\n";    menuDiv.innerHTML+= "<button onClick=\"saveData();\"> Save </button>\n";
758    menuDiv.innerHTML+= "<button onClick=\"fileSelector();\"> File List </button>\n";    menuDiv.innerHTML+= "<button onClick=\"fileSelector();\"> File List </button>\n";
759    menuDiv.innerHTML+= "<button onClick=\"showSVGSource();\"> &lt;SVG &gt; </button>\n";    menuDiv.innerHTML+= "<button onClick=\"showSVGSource();\"> &lt;SVG &gt; </button>\n";
760      menuDiv.innerHTML+= "<button onClick=\"upItem();\">Up</button>\n";
761      menuDiv.innerHTML+= "<button onClick=\"downItem();\">Down</button>\n";
762    menuDiv.innerHTML+= updateSVGObjMenu();    menuDiv.innerHTML+= updateSVGObjMenu();
763    menuDiv.style.display='block';    menuDiv.style.display='block';
764    updateToolBar();    updateToolBar();
# Line 911  function updateSVGObjMenu(){ Line 941  function updateSVGObjMenu(){
941       if(selectedItems[0]){       if(selectedItems[0]){
942         res += setSVGObjectProp(selectedItems[0]);         res += setSVGObjectProp(selectedItems[0]);
943       }else{       }else{
944         res += propSVGText("", svg_font_size, svg_color);         res += propSVGText("", svg_font_size, svg_color, 0);
945       }       }
946       break;       break;
947      case 'rect':      case 'rect':
# Line 926  function updateSVGObjMenu(){ Line 956  function updateSVGObjMenu(){
956       if(selectedItems[0]){       if(selectedItems[0]){
957         res += setSVGObjectProp(selectedItems[0]);         res += setSVGObjectProp(selectedItems[0]);
958       }else{       }else{
959         res += propSVGObj(tag+":", svg_line_width, svg_color, svg_fill_color);         res += propSVGObj(tag+":", svg_line_width, svg_color, svg_fill_color, 0);
960       }       }
961       break;       break;
962      case 'image':      case 'image':
963       if(selectedItems[0]){       if(selectedItems[0]){
964         res += setSVGObjectProp(selectedItems[0]);         res += setSVGObjectProp(selectedItems[0]);
965       }else{       }else{
966         res += propSVGImage("", 100, 100);         res += propSVGImage("", 100, 100, 0);
967       }       }
968       break;       break;
969      default:      default:
# Line 942  function updateSVGObjMenu(){ Line 972  function updateSVGObjMenu(){
972    return res;    return res;
973  }  }
974    
975  function propSVGText(str, size, color){  function propSVGText(str, size, color, rot){
976    if(!size) size = 24;    if(!size) size = 24;
977    if(!color) color = '#000000';    if(!color) color = '#000000';
978      if(!rot) rot = 0;
979    
980    var res = "Text:";    var res = "Text:";
981    res += "<input type=\"hidden\" id=\"svg_text\" value=\""+str+"\"/>";    res += "<input type=\"hidden\" id=\"svg_text\" value=\""+str+"\"/>";
982    res += "<input type=\"hidden\" id=\"svg_color\" value=\""+color+"\" size=\"8\"/>";    res += "<input type=\"hidden\" id=\"svg_color\" value=\""+color+"\" size=\"8\"/>";
983      res += "Rot:<input type=\"text\" id=\"svg_rotate\" value=\""+rot+"\" size=\"4\"/>";
984      
985    res += "Size:<input type=\"text\" id=\"svg_size\" value=\""+size+"\" size=\"4\"/>";    res += "Size:<input type=\"text\" id=\"svg_size\" value=\""+size+"\" size=\"4\"/>";
986    
987    document.getElementById('toolFill').style.backgroundColor=color;    document.getElementById('toolFill').style.backgroundColor=color;
988    return res;    return res;
989  }  }
990    
991  function propSVGObj(type, stroke, color, fill){  function propSVGObj(type, stroke, color, fill, rot){
992    var res = type;    var res = type;
993    if(!stroke) stroke = 1;    if(!stroke) stroke = 1;
994    if(!color) color = '#000000';    if(!color) color = '#000000';
995    if(!fill) fill = '#ffffff';    if(!fill) fill = '#ffffff';
996      if(!rot) rot = 0;
997    res += "<input type=\"hidden\" id=\"svg_fill\" value=\""+fill+"\" size=\"8\"/>";    res += "<input type=\"hidden\" id=\"svg_fill\" value=\""+fill+"\" size=\"8\"/>";
998    res += "<input type=\"hidden\" id=\"svg_color\" value=\""+color+"\" size=\"8\"/>";    res += "<input type=\"hidden\" id=\"svg_color\" value=\""+color+"\" size=\"8\"/>";
999    res += "Width:<input type=\"text\" id=\"svg_stroke\" value=\""+stroke+"\" size=\"2\"/>";    res += "Width:<input type=\"text\" id=\"svg_stroke\" value=\""+stroke+"\" size=\"2\"/>";
1000      res += "Rot:<input type=\"text\" id=\"svg_rotate\" value=\""+rot+"\" size=\"4\"/>";
1001    
1002    document.getElementById('toolFill').style.backgroundColor=fill;    document.getElementById('toolFill').style.backgroundColor=fill;
1003    document.getElementById('toolStroke').style.backgroundColor=color;    document.getElementById('toolStroke').style.backgroundColor=color;
1004    return res;    return res;
1005  }  }
1006    
1007  function propSVGLine(type, stroke, color, fill, style){  function propSVGLine(type, stroke, color, fill, style, rot){
1008    var res =  propSVGObj(type, stroke, color, fill);    var res =  propSVGObj(type, stroke, color, fill, rot);
1009      if(!rot) rot = 0;
1010    if(style==null) style="";    if(style==null) style="";
1011    res += "Type:<input type=\"text\" id=\"svg_stroke_type\" value=\""+style+"\" size=\"8\"/>";    res += "Type:<input type=\"text\" id=\"svg_stroke_type\" value=\""+style+"\" size=\"8\"/>";
1012    res += "Arrow:";    res += "Arrow:";
1013    
1014    if(hasArrow('start')){    if(hasArrow('start')){
1015      res += "<button class=\"tool\" onClick=\"removeLeftArrow();\"><img src=\"images/normal.png\" /></button>";      res += "<button class=\"tool\" onClick=\"removeLeftArrow();\"><img src=\"images/normal.png\" /></button>";
1016    }else{    }else{
# Line 991  function propSVGLine(type, stroke, color Line 1028  function propSVGLine(type, stroke, color
1028    return res;    return res;
1029  }  }
1030    
1031  function propSVGImage(str, w, h){  function propSVGImage(str, w, h, rot){
1032    var res = "image:";    var res = "image:";
1033      if(!rot) rot = 0;
1034    res += "<input type=\"text\" id=\"svg_text\" value=\""+str+"\" />";    res += "<input type=\"text\" id=\"svg_text\" value=\""+str+"\" />";
1035    res += "Width:<input type=\"text\" id=\"svg_w\" value=\""+w+"\" size=\"4\"/>";    res += "Width:<input type=\"text\" id=\"svg_w\" value=\""+w+"\" size=\"4\"/>";
1036    res += "Height:<input type=\"text\" id=\"svg_h\" value=\""+h+"\" size=\"4\"/>";    res += "Height:<input type=\"text\" id=\"svg_h\" value=\""+h+"\" size=\"4\"/>";
1037      res += "Rot:<input type=\"text\" id=\"svg_rotate\" value=\""+rot+"\" size=\"4\"/>";
1038    return res;    return res;
1039  }  }
1040    
# Line 1152  function createSVGMarker(pid, id, child) Line 1191  function createSVGMarker(pid, id, child)
1191  function setLeftArrow(){  function setLeftArrow(){
1192   if( selectedItems.length == 1 ){   if( selectedItems.length == 1 ){
1193      setArrow(selectedItems[0], 'start', '');      setArrow(selectedItems[0], 'start', '');
1194        updateShowMenu();
1195   }   }
1196  }  }
1197    
1198  function setRightArrow(){  function setRightArrow(){
1199   if( selectedItems.length == 1 ){   if( selectedItems.length == 1 ){
1200      setArrow(selectedItems[0], 'end', '');      setArrow(selectedItems[0], 'end', '');
1201        updateShowMenu();
1202   }   }
1203  }  }
1204    
# Line 1168  function removeLeftArrow(){ Line 1209  function removeLeftArrow(){
1209     var marker = document.getElementById(pid+'_startarrow');     var marker = document.getElementById(pid+'_startarrow');
1210     svg_defs.removeChild(marker);     svg_defs.removeChild(marker);
1211     selectedItems[0].removeAttribute('marker-start');     selectedItems[0].removeAttribute('marker-start');
1212       updateShowMenu();
1213   }   }
1214  }  }
1215    
# Line 1446  function setSVGObjectProp(obj){ Line 1488  function setSVGObjectProp(obj){
1488    var res ="";    var res ="";
1489    switch(tag){    switch(tag){
1490      case 'text':      case 'text':
1491        res = propSVGText(obj.textContent, obj.getAttribute("font-size"), obj.getAttribute("fill"));        res = propSVGText(obj.textContent, obj.getAttribute("font-size"), obj.getAttribute("fill"),getRotateAngle(obj));
1492        break;        break;
1493      case 'rect':      case 'rect':
1494      case 'circle':      case 'circle':
1495      case 'ellipse':      case 'ellipse':
1496       res =  propSVGObj(tag+":", obj.getAttribute("stroke-width"), obj.getAttribute("stroke"), obj.getAttribute("fill"));       res =  propSVGObj(tag+":", obj.getAttribute("stroke-width"), obj.getAttribute("stroke"), obj.getAttribute("fill"),getRotateAngle(obj));
1497       break;       break;
1498      case 'path':      case 'path':
1499      case 'line':      case 'line':
1500       res =  propSVGLine(tag+":",obj.getAttribute("stroke-width"),       res =  propSVGLine(tag+":",obj.getAttribute("stroke-width"),
1501         obj.getAttribute("stroke"),obj.getAttribute("fill"), obj.getAttribute("stroke-dasharray"));         obj.getAttribute("stroke"),obj.getAttribute("fill"), obj.getAttribute("stroke-dasharray"),getRotateAngle(obj));
1502       break;       break;
1503      case 'image':      case 'image':
1504       res =  propSVGImage(obj.getAttribute("xlink:href"),obj.getAttribute("width"),obj.getAttribute("height"));       res =  propSVGImage(obj.getAttribute("xlink:href"),obj.getAttribute("width"),obj.getAttribute("height"),getRotateAngle(obj));
1505       break;       break;
1506      default:      default:
1507       break;       break;
# Line 1476  function updateSVGObj(){ Line 1518  function updateSVGObj(){
1518    if(selectedItems.length != 1) return;    if(selectedItems.length != 1) return;
1519    var obj = selectedItems[0];    var obj = selectedItems[0];
1520    var tag = getElementTag(obj);    var tag = getElementTag(obj);
1521      var deg=document.getElementById('svg_rotate');
1522    var res ="";    var res ="";
1523    switch(tag){    switch(tag){
1524      case 'text':      case 'text':
# Line 1485  function updateSVGObj(){ Line 1528  function updateSVGObj(){
1528        obj.textContent = txt.value;        obj.textContent = txt.value;
1529        obj.setAttribute("fill", color.value);        obj.setAttribute("fill", color.value);
1530        obj.setAttribute("font-size", size.value);        obj.setAttribute("font-size", size.value);
1531          setRotate(obj,deg.value);
1532        break;        break;
1533      case 'rect':      case 'rect':
1534      case 'circle':      case 'circle':
# Line 1495  function updateSVGObj(){ Line 1539  function updateSVGObj(){
1539        obj.setAttribute("fill", fill.value);        obj.setAttribute("fill", fill.value);
1540        obj.setAttribute("stroke", color.value);        obj.setAttribute("stroke", color.value);
1541        obj.setAttribute("stroke-width", L.value);        obj.setAttribute("stroke-width", L.value);
1542          setRotate(obj,deg.value);
1543       break;       break;
1544      case 'path':      case 'path':
1545      case 'line':      case 'line':
# Line 1505  function updateSVGObj(){ Line 1550  function updateSVGObj(){
1550        obj.setAttribute("fill", fill.value);        obj.setAttribute("fill", fill.value);
1551        obj.setAttribute("stroke", color.value);        obj.setAttribute("stroke", color.value);
1552        obj.setAttribute("stroke-width", L.value);        obj.setAttribute("stroke-width", L.value);
1553          setRotate(obj,deg.value);
1554        if(dash) obj.setAttribute("stroke-dasharray", dash.value);        if(dash) obj.setAttribute("stroke-dasharray", dash.value);
1555        var id = obj.getAttribute("id");        var id = obj.getAttribute("id");
1556        var marker = document.getElementById(id+'_startarrow');        var marker = document.getElementById(id+'_startarrow');
# Line 1519  function updateSVGObj(){ Line 1565  function updateSVGObj(){
1565        obj.setAttribute("xlink:href", fname.value);        obj.setAttribute("xlink:href", fname.value);
1566        obj.setAttribute("width", w.value);        obj.setAttribute("width", w.value);
1567        obj.setAttribute("height", h.value);        obj.setAttribute("height", h.value);
1568          setRotate(obj,deg.value);
1569       break;       break;
1570      default:      default:
1571       break;       break;
# Line 1880  function updateTransform(obj){ Line 1927  function updateTransform(obj){
1927          default:          default:
1928            break;            break;
1929        }        }
1930        obj.removeAttribute("transform");  //      obj.removeAttribute("transform");
1931          replaceTranslate(obj, 0, 0);
1932          updateRotate(obj);
1933      }      }
1934    }catch (e){    }catch (e){
1935    }    }
# Line 1904  function clearSelectedItems(){ Line 1953  function clearSelectedItems(){
1953    for(i in selectedItems) delete selectedItems[i];    for(i in selectedItems) delete selectedItems[i];
1954  }  }
1955    
1956    
1957    function replaceTranslate(obj, dx, dy){
1958      var trans = obj.getAttribute("transform");
1959      if(trans && trans.indexOf("translate")>=0){
1960        var strs = trans.split(' ');
1961        trans = "";
1962        for(var i=0; i<strs.length; i++){
1963          if(strs[i].indexOf("translate")>=0){ strs[i] = "translate("+dx+","+dy+")"; }
1964          trans += strs[i]+" ";
1965        }
1966        obj.setAttribute("transform", trim(trans));
1967      }else{
1968        if(trans){
1969          trans += " translate("+dx+","+dy+")";
1970          obj.setAttribute("transform", trans);
1971        }else{
1972          obj.setAttribute("transform","translate("+dx+","+dy+")");
1973        }
1974      }
1975      switch(getElementTag(obj)){
1976        case 'text':
1977        case 'ellipse':
1978        case 'path':
1979          updateRotate(obj,dx,dy);
1980          break;
1981        case 'polygon':
1982        case 'polyline':
1983        case 'line':
1984        default:
1985          updateRotate(obj);
1986          break;
1987      }
1988    }
1989    
1990    function updateRotate(obj,dx,dy){
1991      var trans = obj.getAttribute("transform");
1992    
1993      if(!trans || trans.indexOf("rotate") < 0) return;
1994      var bbox = obj.getBBox();
1995      var x = bbox.x+bbox.width/2;
1996      var y = bbox.y+bbox.height/2;
1997      var strs = trans.split(' ');
1998      trans = "";
1999    
2000      for(var i=0; i<strs.length ;i++){
2001        if(strs[i].indexOf("rotate") >= 0){
2002           var deg = strs[i].substr(7, strs[i].indexOf(",")-7);
2003           if(dx) x += dx;
2004           if(dy) y += dy;
2005           strs[i] = "rotate("+deg+","+x+","+y+")";
2006        }
2007        trans += strs[i]+" ";
2008      }
2009      obj.setAttribute("transform",trim(trans));
2010    }
2011    
2012    function getRotateAngle(obj){
2013      var trans = obj.getAttribute("transform");
2014      if(!trans || trans.indexOf("rotate") < 0) return 0;
2015      var strs = trans.split(' ');
2016      for(var i=0; i<strs.length ;i++){
2017        if(strs[i].indexOf("rotate") >= 0){
2018           var deg = strs[i].substr(7, strs[i].indexOf(",")-7);
2019           return parseInt(deg);
2020        }
2021      }
2022      return 0;
2023    }
2024    
2025    function setRotate(obj,deg){
2026      var trans = obj.getAttribute("transform");
2027      var bbox = obj.getBBox();
2028      var x = bbox.x+bbox.width/2;
2029      var y = bbox.y+bbox.height/2;
2030    
2031      if(!trans) trans="";
2032      if(trans.indexOf("rotate") < 0){
2033        trans = "rotate("+deg+","+x+","+y+")";
2034        obj.setAttribute("transform", trans);
2035      }else{
2036        var strs = trans.split(' ');
2037        trans = "";
2038        for(var i=0; i<strs.length ;i++){
2039          if(strs[i].indexOf("rotate") >= 0){ strs[i] = "rotate("+deg+","+x+","+y+")"; }
2040          trans += strs[i]+" ";
2041        }
2042        obj.setAttribute("transform",trim(trans));
2043      }
2044    }
2045    
2046  function onTouchMoveCode1(pageX, pageY){  function onTouchMoveCode1(pageX, pageY){
2047    if(targetItem || selectedItems.length > 0){    if(targetItem || selectedItems.length > 0){
2048      switch(modeSVG){      switch(modeSVG){
# Line 1955  function onTouchMoveCode1(pageX, pageY){ Line 2094  function onTouchMoveCode1(pageX, pageY){
2094              selectedItems[0].setAttribute("y2",ly );              selectedItems[0].setAttribute("y2",ly );
2095              setSelectBox();              setSelectBox();
2096            }else{            }else{
2097              selectedItems[0].setAttribute("transform","translate("+dx+","+dy+")");              replaceTranslate(selectedItems[0], dx, dy);
2098    //            selectedItems[0].setAttribute("transform","translate("+dx+","+dy+")");
2099              moveSelectedRectangle(dx, dy);              moveSelectedRectangle(dx, dy);
2100            }            }
2101          }else{          }else{
2102            for(var i=0; i<selectedItems.length;i++){            for(var i=0; i<selectedItems.length;i++){
2103              if(selectedItems[i]) selectedItems[i].setAttribute("transform","translate("+dx+","+dy+")");              if(selectedItems[i]){
2104    //              selectedItems[i].setAttribute("transform","translate("+dx+","+dy+")");
2105                  replaceTranslate(selectedItems[i], dx, dy);
2106                }
2107            }            }
2108            moveSelectedRectangle(dx, dy);            moveSelectedRectangle(dx, dy);
2109          }          }
# Line 2084  function onTouchStart(e){ Line 2227  function onTouchStart(e){
2227      }      }
2228      if(dt < 300 ){ onDoubleTap(); }else{ onTouchStartCore(); }      if(dt < 300 ){ onDoubleTap(); }else{ onTouchStartCore(); }
2229      firstTouch = touchtime;      firstTouch = touchtime;
     updateSelectedRectangle();  
2230    }    }
2231        updateSelectedRectangle();
2232  }  }
2233    
2234  function onTouchMove(e){  function onTouchMove(e){
# Line 2258  function onMouseDown(e){ Line 2401  function onMouseDown(e){
2401        for(var i=0;i < selectedItems.length; i++){        for(var i=0;i < selectedItems.length; i++){
2402          selectedItems[i].setAttribute(color_sel, color);          selectedItems[i].setAttribute(color_sel, color);
2403          if(color_sel == 'fill'){          if(color_sel == 'fill'){
2404            fill_input.value=color;            if(fill_input) fill_input.value=color;
2405             document.getElementById('toolFill').style.backgroundColor=color;            document.getElementById('toolFill').style.backgroundColor=color;
2406          }else{          }else{
2407            color_input.value=color;            color_input.value=color;
2408             document.getElementById('toolStroke').style.backgroundColor=color;             document.getElementById('toolStroke').style.backgroundColor=color;
Legend:
Removed from v.35  
changed lines
  Added in v.36
Back to OSDN">Back to OSDN
 ViewVC Help
Powered by ViewVC 1.1.26  
About OSDN
Find Software
Develop Software
Help