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 62 by isao-hara, Thu Jul 29 11:42:44 2010 UTC revision 64 by isao-hara, Fri Jul 30 00:37:23 2010 UTC
# Line 754  function showColorPalette(val){ Line 754  function showColorPalette(val){
754  }  }
755    
756  function selectToolBar(idx){  function selectToolBar(idx){
757      clearSelectedItems();
758    var ele=document.getElementById('tool_select');    var ele=document.getElementById('tool_select');
759    var pos = idx *25;    var pos = idx *25;
760    ele.style.top= pos+'px';    ele.style.top= pos+'px';
# Line 953  function topItem(){ Line 954  function topItem(){
954  function updateSVGObjMenu(){  function updateSVGObjMenu(){
955    var res = "";    var res = "";
956    var tag = modeSVG;    var tag = modeSVG;
957    if(selectedItems.length > 1) { return res; }    if(selectedItems.length > 1) return res;
958    if(selectedItems.length == 1) tag = getElementTag(selectedItems[0]);    if(selectedItems.length == 1){
959          tag = getElementTag(selectedItems[0]);
960    switch(tag){        res += setSVGObjectProp(selectedItems[0]);
961      case 'text':    }else{
962       if(selectedItems[0]){      switch(tag){
963         res += setSVGObjectProp(selectedItems[0]);        case 'text':
964       }else{          res += propSVGText("", svg_font_size, svg_color, 0);
965         res += propSVGText("", svg_font_size, svg_color, 0);          break;
966       }        case 'rect':
967       break;        case 'circle':
968      case 'rect':        case 'ellipse':
969      case 'circle':        case 'newPath':
970      case 'ellipse':        case 'newLine':
971      case 'newPath':        case 'path':
972      case 'newLine':        case 'line':
973      case 'path':          res += propSVGObj(tag+":", svg_line_width, svg_color, svg_fill_color, "",  0);
974      case 'line':          break;
975      case 'polyline':        case 'image':
976      case 'polygon':          res += propSVGImage("", 100, 100, 0);
977       if(selectedItems[0]){          break;
978         res += setSVGObjectProp(selectedItems[0]);        default:
979       }else{          break;
980         res += propSVGObj(tag+":", svg_line_width, svg_color, svg_fill_color, "",  0);      }
      }  
      break;  
     case 'image':  
      if(selectedItems[0]){  
        res += setSVGObjectProp(selectedItems[0]);  
      }else{  
        res += propSVGImage("", 100, 100, 0);  
      }  
      break;  
     default:  
      break;  
981    }    }
982    return res;    return res;
983  }  }
# Line 1071  function propSVGLine(type, stroke, color Line 1061  function propSVGLine(type, stroke, color
1061    
1062    res += "<img id=\"path_type\" src=\"images/path_type.png\" usemap=\"#path_type\" />\n";    res += "<img id=\"path_type\" src=\"images/path_type.png\" usemap=\"#path_type\" />\n";
1063    res += "<map name=\"path_type\">";    res += "<map name=\"path_type\">";
1064    res += "<area shape=\"rect\" coords=\"0,0,30,50\"  onClick=\"togglePathType();\">";    res += "<area shape=\"rect\" coords=\"0,0,30,100\"  onClick=\"togglePathType();\">";
1065    res += "</map>";    res += "</map>";
1066    document.getElementById('toolFill').style.backgroundColor=fill;    document.getElementById('toolFill').style.backgroundColor=fill;
1067    document.getElementById('toolStroke').style.backgroundColor=color;    document.getElementById('toolStroke').style.backgroundColor=color;
# Line 1216  function togglePathType(){ Line 1206  function togglePathType(){
1206    
1207    for(var i=0;i<path.length ;i++){    for(var i=0;i<path.length ;i++){
1208      if(path[i] == "L"){ path[i] = "Q"; }      if(path[i] == "L"){ path[i] = "Q"; }
1209      else if("LCQST".indexOf(path[i])> 0){ path[i] = "L"; }      else if(path[i] == "Q"){ path[i] = "S"; }
1210        else if(path[i] == "S"){ path[i] = "T"; }
1211        else if(path[i] == "T"){ path[i] = "L"; }
1212      newpath += path[i] + ' ';      newpath += path[i] + ' ';
1213    }    }
1214    var mm = path.length % 4;    var mm = path.length % 4;
# Line 1284  function propSVGImage(str, w, h, rot){ Line 1276  function propSVGImage(str, w, h, rot){
1276    return res;    return res;
1277  }  }
1278    
1279    
1280  function setSVGMode(m){  function setSVGMode(m){
1281    modeSVG = m;    modeSVG = m;
   updateShowMenu();  
   
1282    switch(m){    switch(m){
1283      case 'selector':      case 'selector':
       targetItem=null;  
       clearSelectedItems();  
1284        selectToolBar(0);        selectToolBar(0);
1285        break;        break;
1286      case 'newPath':      case 'newPath':
# Line 1318  function setSVGMode(m){ Line 1307  function setSVGMode(m){
1307      default:      default:
1308        break;        break;
1309    }    }
1310      updateShowMenu();
1311  }  }
1312    
1313    
# Line 1463  function setRightArrow(){ Line 1453  function setRightArrow(){
1453  function removeLeftArrow(){  function removeLeftArrow(){
1454   if( selectedItems.length == 1 ){   if( selectedItems.length == 1 ){
1455     if(!svg_defs) svg_defs = document.getElementById('svg_defs');     if(!svg_defs) svg_defs = document.getElementById('svg_defs');
1456     var pid = selectedItems[0].getAttribute('id');     try{
1457     var marker = document.getElementById(pid+'_startarrow');       var marker = getArrowMarker(selectedItems[0],'start');
1458     svg_defs.removeChild(marker);       svg_defs.removeChild(marker);
1459     selectedItems[0].removeAttribute('marker-start');       selectedItems[0].removeAttribute('marker-start');
1460       }catch(e){ }
1461     updateShowMenu();     updateShowMenu();
1462   }   }
1463  }  }
# Line 1474  function removeLeftArrow(){ Line 1465  function removeLeftArrow(){
1465  function removeRightArrow(){  function removeRightArrow(){
1466   if( selectedItems.length == 1 ){   if( selectedItems.length == 1 ){
1467     if(!svg_defs) svg_defs = document.getElementById('svg_defs');     if(!svg_defs) svg_defs = document.getElementById('svg_defs');
1468     var pid = selectedItems[0].getAttribute('id');     try{
1469     var marker = document.getElementById(pid+'_endarrow');       var marker = getArrowMarker(selectedItems[0],'end');
1470     svg_defs.removeChild(marker);       svg_defs.removeChild(marker);
1471     selectedItems[0].removeAttribute('marker-end');       selectedItems[0].removeAttribute('marker-end');
1472       }catch(e){ }
1473     updateShowMenu();     updateShowMenu();
1474   }   }
1475  }  }
1476    
1477    function removeAllMarker(obj){
1478      var smarker = getArrowMarker(obj,'start');
1479      if(smarker) svg_defs.removeChild(smarker);
1480      var emarker = getArrowMarker(obj,'end');
1481      if(emarker) svg_defs.removeChild(emarker);
1482      return true;
1483    }
1484    
1485  function hasArrow(pos){  function hasArrow(pos){
1486    var pobj = selectedItems[0];    var pobj = selectedItems[0];
1487    if(!pobj) return false;    if(!pobj) return false;
1488    var pid = pobj.getAttribute('id');    if(getArrowMarker(pobj,pos)) return true;
   var marker = document.getElementById(pid+'_'+pos+'arrow');  
   if(marker) return true;  
1489    return false;    return false;
1490  }  }
1491    
1492  function getArrowMarker(obj,pos){  function getArrowMarker(obj,pos){
1493    if(!obj) return false;    try{
1494    var pid = obj.getAttribute('id');      return document.getElementById(obj.getAttribute('id')+'_'+pos+'arrow');
1495    var marker = document.getElementById(pid+'_'+pos+'arrow');    }catch(e){ return null; }
1496    return false;  
1497  }  }
1498    
1499  function setArrow(pobj, pos, type){  function setArrow(pobj, pos, type){
1500    if(!pobj) return;    if(!pobj) return;
1501    var pid = pobj.getAttribute('id');    var marker = getArrowMarker(pobj,pos);
1502    var marker = document.getElementById(pid+'_'+pos+'arrow');    if(marker){ return; }
   if(marker){  
     popupInfo("marker:"+marker);  
     return;  
   }  
1503    
1504    var obj = createSVGElement('path', 'new');    var obj = createSVGElement('path', 'new');
1505    
1506    var refX = 0;    var refX = 10;
1507    var refY = 0;    var refY = 10;
1508    
1509    switch(pos){    switch(pos){
1510      case 'start':      case 'start':
       refX=10;  
       refY=10;  
1511        setAttributes(obj,'d=M 20 0 L 0 10 20 20 Z');        setAttributes(obj,'d=M 20 0 L 0 10 20 20 Z');
1512        break;        break;
1513      case 'end':      case 'end':
1514        setAttributes(obj,'d=M 0 0 L 20 10 0 20 Z');        setAttributes(obj,'d=M 0 0 L 20 10 0 20 Z');
       refX= 10;  
       refY=10;  
1515        break;        break;
1516      default:      default:
1517        return;        return;
1518    }    }
1519        
1520      var pid = pobj.getAttribute("id");
1521    marker = createSVGMarker(pid, pos+'arrow' , obj);    marker = createSVGMarker(pid, pos+'arrow' , obj);
1522    
1523    setAttributes(marker,'markerWidth=10,markerHeight=10,orient=auto,viewBox=0 0 20 20,markerUnits=strokeWidth,refX='+refX+',refY='+refY);    setAttributes(marker,'markerWidth=10,markerHeight=10,orient=auto,viewBox=0 0 20 20,markerUnits=strokeWidth,refX='+refX+',refY='+refY);
1524    
1525    marker.setAttribute("fill",pobj.getAttribute("stroke"));    marker.setAttribute("fill",pobj.getAttribute("stroke"));
# Line 1540  function setArrow(pobj, pos, type){ Line 1532  function setArrow(pobj, pos, type){
1532    var mid = "url(#"+marker.getAttribute("id")+")";    var mid = "url(#"+marker.getAttribute("id")+")";
1533    var mattr = "marker-"+pos;    var mattr = "marker-"+pos;
1534    pobj.setAttribute(mattr, mid);    pobj.setAttribute(mattr, mid);
1535      updateShowMenu();
1536  }  }
1537    
1538  function scalePath(itm, scale){  function scalePath(itm, scale){
# Line 1952  function delSVGObj(){ Line 1945  function delSVGObj(){
1945    if(!svg_top) return;    if(!svg_top) return;
1946    for(var i=0; i< selectedItems.length; i++){    for(var i=0; i< selectedItems.length; i++){
1947      var obj = selectedItems[i];      var obj = selectedItems[i];
1948        removeAllMarker(obj);
1949      svg_top.removeChild(obj);      svg_top.removeChild(obj);
1950    }    }
1951    hideSelectedRectangle();    hideSelectedRectangle();
# Line 2134  function onTouchStartCore(){ Line 2128  function onTouchStartCore(){
2128        setSVGMode('selector');        setSVGMode('selector');
2129      }else if(selectedItems.length == 1){      }else if(selectedItems.length == 1){
2130        targetItem=selectedItems[0];        targetItem=selectedItems[0];
       setSVGMode(getElementTag(targetItem));  
2131      }else{      }else{
2132        setSVGMode('Group');        setSVGMode('Group');
2133      }      }
# Line 2153  function onTouchStartCore(){ Line 2146  function onTouchStartCore(){
2146           var txt=document.getElementById('svg_text');           var txt=document.getElementById('svg_text');
2147           var size=document.getElementById('svg_size');           var size=document.getElementById('svg_size');
2148           if(txt.value){           if(txt.value){
2149               y = y + parseInt(size.value)*0.8;             y = y + parseInt(size.value)*0.8;
2150               targetItem=createSVGText(txt.value, x, y, size.value, color.value);             targetItem=createSVGText(txt.value, x, y, size.value, color.value);
2151           }else{           }else{
2152              putInputForm(x, y, txt.value, size.value);             putInputForm(x, y, txt.value, size.value);
2153           }           }
2154           break;           break;
2155         case 'rect':         case 'rect':
# Line 2205  function onTouchStartCore(){ Line 2198  function onTouchStartCore(){
2198       if(modeSVG == 'newPath'){       if(modeSVG == 'newPath'){
2199         if(targetItem.tagName == 'path' ){         if(targetItem.tagName == 'path' ){
2200           var path = targetItem.getAttribute("d");           var path = targetItem.getAttribute("d");
   
 /*  
          if(is_newPath){  
            path="M ";  
            var path_arr=path.aplit(' ');  
            path += path_arr[1]+' '+path_arr[2]+' L';  
            is_newPath=false;  
          }  
          */  
2201           path = path + ' '+ getPreviewX(sx) + ' '+ getPreviewY(sy) ;           path = path + ' '+ getPreviewX(sx) + ' '+ getPreviewY(sy) ;
 //       popupInfo(path);  
2202           targetItem.setAttribute("d",path);           targetItem.setAttribute("d",path);
2203         }         }
2204         return;         return;
# Line 2362  function updateSelectedRectangle(){ Line 2345  function updateSelectedRectangle(){
2345  }  }
2346    
2347  function clearSelectedItems(){  function clearSelectedItems(){
2348      targetItem=null;
2349    for(i in selectedItems) delete selectedItems[i];    for(i in selectedItems) delete selectedItems[i];
2350      selectedItems=new Array();
2351      updateSelectedRectangle();
2352  }  }
2353    
2354    
# Line 2477  function setScale(obj,scaleX, scaleY){ Line 2463  function setScale(obj,scaleX, scaleY){
2463      var strs = trans.split(' ');      var strs = trans.split(' ');
2464      trans = "";      trans = "";
2465      for(var i=0; i<strs.length ;i++){      for(var i=0; i<strs.length ;i++){
2466        if(strs[i].indexOf("scale") >= 0){        if(strs[i].indexOf("scale") >= 0){ strs[i] = "scale("+scaleX+","+scaleY+")"; }
2467         if(scaleX==1 && scaleY==1) break;        if(scaleX == 1 && scaleY == 1) continue;
         strs[i] = "scale("+scaleX+","+scaleY+")";  
       }  
2468        trans += strs[i]+" ";        trans += strs[i]+" ";
2469      }      }
2470      obj.setAttribute("transform",trim(trans));      obj.setAttribute("transform",trim(trans));
2471    }    }
2472    replaceTranslate(obj, dx/scaleX, dy/scaleY);    replaceTranslate(obj, dx/scaleX, dy/scaleY);
 //    popupInfo(obj.getAttribute("transform"));  
2473  }  }
2474    
2475  function onTouchMoveCode1(pageX, pageY){  function onTouchMoveCode1(pageX, pageY){
# Line 2714  function onTouchEnd(e){ Line 2697  function onTouchEnd(e){
2697    
2698    setSelectBox();    setSelectBox();
2699    updateShowMenu();    updateShowMenu();
   var btn = document.getElementById('b_'+modeSVG);  
   if(btn){  
     btn.style.border="3px solid red";  
   }  
2700    lineEdit=null;    lineEdit=null;
2701  }  }
2702    
# Line 2741  function onGestureStart(e){ Line 2720  function onGestureStart(e){
2720   }   }
2721  }  }
2722    
2723    function scaleGesture(obj,scale){
2724      switch(getElementTag(obj)){
2725        case 'text':
2726          if(svg_fsize) obj.setAttribute("font-size", Math.round(svg_fsize*scale) );
2727          break;
2728        case 'rect':
2729        case 'image':
2730          if(svg_wo && svg_scale_dir != 'y') obj.setAttribute("width",Math.round(svg_wo*scale ));
2731          if(svg_ho && svg_scale_dir != 'x') obj.setAttribute("height",Math.round(svg_ho*scale ));
2732          break;
2733        case 'circle':
2734         if(svg_ro) obj.setAttribute("r",Math.round(svg_ro*scale ));
2735         break;
2736        case 'ellipse':
2737         if (svg_rxo && svg_scale_dir != 'y') obj.setAttribute("rx",Math.round(svg_rxo*scale) );
2738         if (svg_ryo && svg_scale_dir != 'x') obj.setAttribute("ry",Math.round(svg_ryo*scale) );
2739         break;
2740        case 'path':
2741        case 'line':
2742         var scaleX = scale;
2743         var scaleY = scale;
2744         if(svg_scale_dir == 'x') scaleY=1;
2745         else if(svg_scale_dir == 'y') scaleX=1;
2746         setScale(obj, scaleX, scaleY);
2747    
2748         break;
2749       defult:
2750         break;
2751      }
2752    }
2753    
2754  function onGestureChange(e){  function onGestureChange(e){
2755    var scale = e.scale;    var scale = e.scale;
2756    var rotation = e.rotation;    var rotation = e.rotation;
2757    
2758    if(targetItem){    if(targetItem){
2759      e.preventDefault();      e.preventDefault();
2760      if(!svg_scale_locked){      if(!svg_scale_locked) scaleGesture(targetItem,scale);
2761        switch(getElementTag(targetItem)){      if(!svg_rotate_locked) setRotate(targetItem, rotation);
         case 'text':  
          if (svg_fsize) targetItem.setAttribute("font-size", Math.round(svg_fsize*scale) );  
          break;  
         case 'rect':  
         case 'image':  
          if (svg_wo && svg_scale_dir != 'y') targetItem.setAttribute("width", Math.round(svg_wo*scale ));  
          if (svg_ho && svg_scale_dir != 'x') targetItem.setAttribute("height", Math.round(svg_ho*scale ));  
          break;  
         case 'circle':  
          if (svg_ro) targetItem.setAttribute("r", Math.round(svg_ro*scale ));  
          break;  
         case 'ellipse':  
          if (svg_rxo && svg_scale_dir != 'y') targetItem.setAttribute("rx", Math.round(svg_rxo*scale) );  
          if (svg_ryo && svg_scale_dir != 'x') targetItem.setAttribute("ry", Math.round(svg_ryo*scale) );  
          break;  
         case 'path':  
         case 'line':  
          var scaleX = scale;  
          var scaleY = scale;  
          if(svg_scale_dir == 'x') scaleY=1;  
          else if(svg_scale_dir == 'y') scaleX=1;  
   
          setScale(targetItem, scaleX, scaleY);  
          break;  
         defult:  
          break;  
       }  
     }  
     if (!svg_rotate_locked) setRotate(targetItem, rotation);  
2762    
2763      updateShowMenu();      updateShowMenu();
2764    }    }
2765  }  }
2766    
2767  function onGestureEnd(e){  function updatePathAndLine(){
 //  e.preventDefault();  
   svg_wo = null;  
   svg_ho = null;  
   svg_ro = null;  
   svg_rxo = null;  
   svg_ryo = null;  
   svg_fsize = null;  
   
2768    if(getElementTag(targetItem) == 'path'){    if(getElementTag(targetItem) == 'path'){
2769      var scale = getScale(targetItem);      var scale = getScale(targetItem);
2770      if(scale){      if(scale){
# Line 2807  function onGestureEnd(e){ Line 2780  function onGestureEnd(e){
2780    }    }
2781  }  }
2782    
2783    function onGestureEnd(e){
2784    //  e.preventDefault();
2785      svg_wo = null;
2786      svg_ho = null;
2787      svg_ro = null;
2788      svg_rxo = null;
2789      svg_ryo = null;
2790      svg_fsize = null;
2791    
2792      updatePathAndLine();
2793    }
2794    
2795  function onTouchStartColor(e){  function onTouchStartColor(e){
2796    if(e.touches.length == 1){    if(e.touches.length == 1){
2797      var ele = e.touches[0].target;      var ele = e.touches[0].target;
# Line 2924  function onMouseMove(e){ Line 2909  function onMouseMove(e){
2909      if(scale < 1) scale=1;      if(scale < 1) scale=1;
2910     }else{     }else{
2911      if(scale > -1) scale=1;      if(scale > -1) scale=1;
2912      else{      else scale= -1/scale;
        scale= -1/scale;  
     }  
2913     }     }
2914      if(targetItem && !svg_scale_locked){      if(targetItem && !svg_scale_locked){
2915        switch(getElementTag(targetItem)){        scaleGesture(targetItem,scale);
         case 'text':  
          if (svg_fsize) targetItem.setAttribute("font-size", Math.round(svg_fsize*scale) );  
          break;  
         case 'rect':  
         case 'image':  
          if (svg_wo && svg_scale_dir != 'y') targetItem.setAttribute("width", Math.round(svg_wo*scale ));  
          if (svg_ho && svg_scale_dir != 'x') targetItem.setAttribute("height", Math.round(svg_ho*scale ));  
          break;  
         case 'circle':  
          if (svg_ro) targetItem.setAttribute("r", Math.round(svg_ro*scale ));  
          break;  
         case 'ellipse':  
          if (svg_rxo && svg_scale_dir != 'y') targetItem.setAttribute("rx", Math.round(svg_rxo*scale) );  
          if (svg_ryo && svg_scale_dir != 'x') targetItem.setAttribute("ry", Math.round(svg_ryo*scale) );  
          break;  
         case 'path':  
         case 'line':  
          setScale(targetItem, scale);  
          break;  
         defult:  
          break;  
       }  
2916        updateShowMenu();        updateShowMenu();
2917      }      }
2918    }else if(e.shiftKey){    }else if(e.shiftKey){
# Line 2974  function onMouseUp(e){ Line 2935  function onMouseUp(e){
2935    mouse_state = 0;    mouse_state = 0;
2936   if(!isChildById(e.target, 'preview') && e.target.id != 'preview') { return true; }   if(!isChildById(e.target, 'preview') && e.target.id != 'preview') { return true; }
2937    
2938      updatePathAndLine() ;
2939    for(var i=0; i<selectedItems.length;i++){    for(var i=0; i<selectedItems.length;i++){
2940       updateTransform(selectedItems[i]);       updateTransform(selectedItems[i]);
2941    }    }
# Line 2986  function onMouseUp(e){ Line 2948  function onMouseUp(e){
2948      getSelectedObjects(x1, y1, x2, y2);      getSelectedObjects(x1, y1, x2, y2);
2949    }    }
2950    
2951    
2952    updateSelectedRectangle();    updateSelectedRectangle();
2953    updateTransform(svg_select);    updateTransform(svg_select);
2954    
2955    setSelectBox();    setSelectBox();
2956    updateShowMenu();    updateShowMenu();
   var btn = document.getElementById('b_'+modeSVG);  
   if(btn){  
     btn.style.border="3px solid red";  
   }  
2957    lineEdit=null;    lineEdit=null;
2958    
   if(getElementTag(targetItem) == 'path'){  
     var scale = getScale(targetItem);  
     setScale(targetItem, 1,1);  
     scalePath(targetItem, scale);  
   }else if(getElementTag(targetItem) == 'line'){  
     var scale = getScale(targetItem);  
     setScale(targetItem, 1,1);  
     scaleLine(targetItem, scale);  
   }  
   
2959  }  }
2960    
2961  if(!navigator.userAgent.match("iPad")){  if(!navigator.userAgent.match("iPad")){
Legend:
Removed from v.62  
changed lines
  Added in v.64
Back to OSDN">Back to OSDN
 ViewVC Help
Powered by ViewVC 1.1.26  
About OSDN
Find Software
Develop Software
Help