Path

_.md

[ Launch: An inlet to Tributary ] 4567142 by roundrobin

config.json

{"description":"Path","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.7,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"hidepanel":false,"fullscreen":false,"thumbnail":"http://i.imgur.com/IcpmqUJ.png"}

inlet.js

var pathWay = [[403,167,'M'],[192,171,'Q'],[141,285,'Q'],[197,406,'M'],[411,379,'Q'],[381,236,'Q'],[437,232,'Q'],[507,319,'Q'],[424,186,'Q'],[507,115,'Q'],[488,342,'Q'],[440,466,'Q'],[394,118,'Q'],[303,82,'Q'],[262,286,'Q'],[377,337,'Q'],[521,361,'Q'],[208,238,'Q'],[272,126,'Q'],[623,157,'Q'],[726,111,'Q'],[208,88,'Q'],[291,467,'Q'],[651,248,'Q'],[202,248,'Q']];
var drawing = false;

    
var path = g.append('path')
            .attr('stroke','blue')
            .attr('stroke-width',5)
            .attr('fill',"#000000")
            .attr('id','path')
            .attr('fill-opacity','0.5')
            .attr('class','drawit')
            .attr('transform','scale(1)')
            .attr('id','pathWay')

drawCharacter(pathWay,path)    

    
g.on('click',function(){
  var point = {x:d3.event.pageX ,y:d3.event.pageY-75,type: 'Q'}
  if(pathWay.length == 0)
    point.type = 'M';
  
  
  addToArray(point);
  
 drawCharacter(pathWay,path);    
    
});

function addToArray(point){
   var text = d3.select('#pathWay')
   var textValue = getLine(0);    
     var search = /var pathWay = \[(.*)\]/;
     var result = search.exec(textValue);       
    if(textValue == 'var pathWay = [];'){
         add = "["+point.x+","+point.y+",'"+point.type+"']";
    }else{
	     add = ",["+point.x+","+point.y+",'"+point.type+"']";
    }  
    var modify = result[1]+add;
    var finalString = 'var pathWay = ['+(modify)+'];';
    var test = text.text(finalString);
    test = test.text();
    setLine(0,test);
  

}


function drawCharacter(pathArray,path){
	var curve = '';
  
  	
  for( i in pathArray){
     var point = pathArray[i];
  	 createCircle(point,'red')
    if(i > 1 && point[2] == 'M')
       curve += 'Z '
    
     if(point[2] == 'M')
     	curve += point[2]+''+point[0]+','+point[1];
	 if(point[2] == 'Q')
     	curve += ' '+point[2]+''+point[0]+','+point[1]+' '+point[0]+','+point[1];

     if(i == (pathArray.length-1))
       curve += 'Z'
    
  }
  console.log(curve)
  path.attr('d',curve)
}


    
function createCircle(pointD,color){
  
  if(!color){
    color = "#000000";
  } 
  g.append('circle')
    .attr('r',5)
    .attr('stroke',color)
    .attr('stroke-width',2)
    .attr('fill',color)
    .attr('cx',pointD[0])
    .attr('cy',pointD[1])
    .attr('class','circleHandle')  
    .on('mouseover',function(){
        if(drawing == true)
        d3.select(this).attr('fill','yellow')
     })
    .on('mouseout',function(){
        if(drawing == true)
        d3.select(this).attr('fill','red')
     })      
     .on('click',function(){
       console.log('d','Hello',drawing)
        if(drawing == true){
        var pathSoFar = path.attr('d')
          
          path.attr('d',pathSoFar+'Z')      
          drawing = false;
          drawing = getLine(2);
          drawing = 'var drawing = false;'
          setLine(2,drawing);   
         
        }else{
          console.log(path.attr('d'))
        }
       
        
     }) 
    
}   
 
    

var defs =  d3.select('svg').append('defs')
addGradient("#363636", "#5B6B65", 46, 'g3201')
addGradient("#5B6B65", "#363636", 46, 'g3202')  
addGradient("#FFF368", "#418041", 46, 'g3203')  
addGradient("#0085FF", "#1073A2", 46, 'g3204')  



function addGradient(color1,color2,stopPX,id){
  
  var gradient = defs.append('linearGradient')
      .attr('id',id)
      .attr('gradientUnits','userSpaceOnUse')
      .attr('x1','0%')
      .attr('x2','0%')
      .attr('y1','0%')
      .attr('y2',stopPX)    
    gradient.append('stop').attr('stop-color',color1).attr('offset','0')
    gradient.append('stop').attr('stop-color',color2).attr('offset','1') 
}


function getLine(line){
  return tribView.code_editor.getLine(line);    
}

function setLine(line,content){
  return tribView.code_editor.setLine(line,content);
}