just another inlet to tributary

inlet.js

var pathWay =[[183,246,'M',183,246],[323,203,'Q',323,203],[307,498,'Q',307,498],[236,564,'Q',236,564],[155,507,'Q',155,507],[127,399,'Q',127,399],[246,513,'Q',246,513],[277,342,'Q',277,342],[110,367,'Q',110,367],[207,276,'M',207,276],[164,341,'Q',164,341],[275,324,'Q',275,324],[291,252,'Q',291,252]];
var drawing = false;

var canvasWidth = 1000;
var canvasHeight = 1000 ;   
var strokeWidth = 2;
var strokeFill = "#FFFFFF";
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;')
  }
  
  if(pathWay.length > 0 && !drawing){
    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, 'data-pointNr', i)
       
    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]+20,point[4]])
    }
    

     if(i == (pathArray.length-1) && !drawing)
       curve += ' Z'
    
  }
  path.attr('d',curve)
  console.log('Curve',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]+')')    
var button3 = createButton('Hide Handlers', removeText).attr('transform','translate('+[222,9]+')')    
var button4 = createButton('Hide Outline', removeText).attr('transform','translate('+[317,9]+')')    
var button5 = createButton('Start outlining', removeText).attr('transform','translate('+[412,9]+')')    
var button6 = createButton('Start sketching', removeText).attr('transform','translate('+[514,9]+')')    
var button7 = createButton('Align Points', removeText).attr('transform','translate('+[614,9]+')')    
var button7 = createButton('Undo', removeText).attr('transform','translate('+[707,9]+')')    

    
    
function createCircle(pointD){
  var moving = function(){
  		var x = d3.event.x;
        var y = d3.event.y-77;
    
		var circleHandler = d3.select(this)
          .attr('cx',x)
		  .attr('cy',y)
            
        var nr = circleHandler.node().getAttribute('data-pointNr')    
		
        changeDataArray(nr,[x,y])
          
          
  }
  
  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')
  
  
}
 
function changeDataArray(nr,pointD){
  pathWay[nr][0] = pointD[0]; 
  pathWay[nr][1] = pointD[1];
  pathWay[nr][3] = pointD[0]; 
  pathWay[nr][4] = pointD[1];
 
  var newArray = 'var pathWay =[';
  
  for(i in pathWay){
    var p = pathWay[i];
	
    
    
  	newArray += "["+p[0]+","+p[1]+",'"+p[2]+"',"+p[3]+","+p[4]+"]"
    if(i != (pathWay.length-1))
      newArray += ','
    
  
  }
  console.log(newArray)
  newArray += '];';
  setLine(0,newArray)  
  
  
  drawCharacter(pathWay,path)
  //drawCharacter()

}   

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