just another inlet to tributary

inlet.js

var pathWay = [[173,409,'M',173,409],[333,233,'Q',333,233],[433,400,'Q',433,400],[338,517,'Q',338,517],[124,463,'Q',124,463]];
var drawing = false;

var canvasWidth = 1000;
var canvasHeight = 1000 ;   
var strokeWidth = 2;
var strokeFill = "#000000";
var dotSize = 4;
var dotFill = "#FFF846";
var dotFillHover = "#11656D";

var canvas = g.append('g')
    			.attr('width',canvasWidth)
        	    .attr('height',canvasHeight) 

var rect = canvas.append('rect')
    			.attr('width',canvasWidth)
        	    .attr('height',canvasHeight) 
            	.attr('x',25)
        	    .attr('y',72)
            	.attr('fill',"#A0B9C7")
 
var circleHandlerGroup = g.append('g')
    			
     
    
var path = canvas.append('path')
            .attr('stroke',strokeFill)
            .attr('stroke-width',strokeWidth)
            .attr('fill',"none")
            .attr('id','path')
            .attr('fill-opacity','0.5')
            .attr('class','drawit')
            .attr('transform','scale(1)')
            .attr('id','pathWay')

drawCharacter(pathWay,path)    


canvas.on('click',function(){
  var point = {x:d3.event.pageX ,y:d3.event.pageY-75,type: 'Q',nr:(pathWay.length-1)}
  
      
      
  if(pathWay.length == 0){
    point.type = 'M';
    drawing = true;
    setLine(1,'var drawing = true;')
  }
  

  	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+"',"+point.x+","+point.y+"]";
    }else{
	     add = ",["+point.x+","+point.y+",'"+point.type+"',"+point.x+","+point.y+"]";
    }  
    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];
  	 var handler = createCircle(point)
         handler.node().setAttributeNS(null, 'hello', 10)
       
    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[3]+','+point[4];
        createBezierHandle([point[3],point[4]])
    }
    

     if(i == (pathArray.length-1) && !drawing)
       curve += 'Z'
    
  }
  path.attr('d',curve)
  if(!drawing)
    path.attr('fill','black')
}


var removeText = function(elem) {
  setLine(0,'var pathWay = [];'); 
  path.attr('d','')
  d3.selectAll('.circleHandle').remove();
 //var text = tribView.code_editor.setLine(0,'var pathWay = []; ') 
}  
var button2 = createButton('Remove path', removeText)
  .attr('transform','translate('+[126,9]+')')    


    
function createCircle(pointD){
  var moving = function(){
  		var x = d3.event.x;
        var y = d3.event.y;
    
    	d3.this()
  
  }
  
  var drag = d3.behavior.drag().on("drag", moving)    

  
  var circle = circleHandlerGroup.append('circle')
    .attr('r',dotSize)
    .attr('fill',dotFill)
    .attr('cx',pointD[0])
    .attr('cy',pointD[1])
    .attr('class','circleHandle')  
    .on('mouseover',function(){
        if(drawing == true)
          d3.select(this).attr('fill',dotFillHover)
     })
    .on('mouseout',function(){
        if(drawing == true)
        d3.select(this).attr('fill',dotFill)
     })      
     .on('click',function(){
       
        if(drawing == true){
        var pathSoFar = path.attr('d')
          //path.attr('d',pathSoFar+'Z')
          drawing = false;
          setLine(1,'var drawing = false;');   
         
        }else{
          console.log(path.attr('d'))
        }
        
     }).call(drag) 
    return circle;
}

function createBezierHandle(pointD,color){
	var circle = createCircle(pointD,color)
  					.attr('r',dotSize-2)	
  					.attr('fill','black')
        			.attr('class','bezierHandler')
  
  
}
 
    

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);
}

function createButton(name,callback){
    
      var buttonGroup = d3.select('svg').append('g')
      .on('click', function(d,i){
              callback(this)
            })
            .on('mousedown',function(){
               d3.select(this).select('#buttonBG')
               .attr('fill','url(#g3201)')
                   .attr('stroke-width',3)
                   .attr('stroke','url(#g3202)')  
            })  
      .on('mouseover',function(){
                d3.select(this).select('#buttonBG')
          .attr('fill','url(#g3203)')
                    .attr('stroke-width',3)  
                    .attr('stroke','url(#g3204)')  
            })
            .on('mouseout',function(){
                d3.select(this).select('#buttonBG')
                  .attr('fill','url(#g3203)')
                  .attr('stroke','url(#g3202)')  
                   .attr('stroke-width',3)  
            })
            .on('mouseup',function(){
                d3.select(this).select('#buttonBG')
                  .attr('fill','url(#g3203)')
                  .attr('stroke','url(#g3202)')  
                   .attr('stroke-width',3)  
            })
            
        var rect = buttonGroup.append('rect')
            .attr('width',122)
            .attr('height',45)
            .attr('fill',"#922F2F")
            .attr('rx',10)
            .attr('ry',10)
            .attr('id','buttonBG')
            .attr('height',45)
            .attr('fill','url(#g3203)')
            .attr('stroke','url(#g3202)')
            .attr('stroke-width',3)

          
            
         var text = buttonGroup.append('text')
              .attr('id','pathWay')
            .attr('font-size',10)
              .attr('fill',"#FFFFFF")
              .style('text-shadow','1px 1px 2px'+"#000000")
              .text(name)
              .attr('transform','translate('+[10,rect.attr('width')/4.5]+')')  
         var textLength =  text.node().getBBox().width;
        rect.attr('width',textLength+20)
    return buttonGroup;
}