just another inlet to tributary

inlet.js

var pathWay = []; 
//DONT REMOVE LINE BELOW
var lineWidth = 1414
var lineStart = 80
var lineDistance = 160    
    
var d = []
var hinweg = []    
var rueck = [] 

var path = g.append('path')
    		.attr('stroke','blue')
            .attr('stroke-width',5)
            .attr('fill','none')

var curve = '';
        
d3.select('svg').on('click',function(){
  var point1 = {x:d3.event.pageX ,y:d3.event.pageY-75}
   d.push(point1)
     

})  


// -------- Adding Helper Lines -----------------------
var y1 = lineStart
var xheight = createLine(1,lineWidth,y1,y1)
    
var y2 = y1+ lineDistance    
var baseline = createLine(1,lineWidth,y2,y2)

var y3 = y2 + lineDistance    
var descentline = createLine(1,lineWidth,y3,y3)
    
function createLine(x,x1,y,y1){
	g.append('line')
      .attr("x1",x)
      .attr("y1",y)
      .attr("x2",x1)
      .attr("y2",y1)
      .style("stroke-width", 3)
      .style("stroke", "black")
}	   
      
var defs = d3.select('svg').append('defs')
var pattern = defs.append('pattern')
    .attr('id','pattern1')
    .attr('pattermTransform','')
    .attr('height',40)
    .attr('width',40)
    .attr('patternUnits','userSpaceOnUse')
    
var line = pattern.append('line')
      .attr('x1',0)
  	  .attr('x2',40)
      .attr('y1',0)
      .attr('y2',0)
  	  .attr('fill',"#4D8891")
      .style("stroke-width", 2)
      .style("stroke", "steelblue")  
    
var line = pattern.append('line')
      .attr('x1',0)
  	  .attr('x2',0)
      .attr('y1',0)
      .attr('y2',40)
  	  .attr('fill',"#4D8891")
      .style("stroke-width", 2)
      .style("stroke", "steelblue")      
    
d3.select('svg').append('rect')
        .attr('height',779)
      .attr('width',1442)
  	  .attr('fill','url(#pattern1)')
//---------------------- Button- and Add-to-editor-logic ----------------
var addText = function(){
   var text = d3.select('#pathWay')
   var textValue = tribView.code_editor.getLine(0);    
   var search = /var pathWay = \[(.*)\]/;
   var result = search.exec(textValue); 	    
	 
    if(textValue == 'var pathWay = [];')
       add ='[1,2]';
    else
       add = ',[1,2]';           
    var modify = result[1]+add;
  	var finalString = 'var pathWay = ['+(modify)+'];';
  	//console.log('String',finalString);
	var test = text.text(finalString);
  	test = test.text();
    tribView.code_editor.setLine(0,test);
    
  
}  

    
var button1 = createButton('Add path', addText)
    .attr('transform','translate('+[32,9]+')')    

var removeText = function(elem){
 var text = tribView.code_editor.setLine(0,'var pathWay = []; ') 
}  
var button2 = createButton('Remove path', removeText)
  .attr('transform','translate('+[126,9]+')')    
    
    
function createButton(name,callback){
    
    	var buttonGroup = g.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)
            })  
			.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)  
            })
            
        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;
  }

// -------------------------------------

var gradient = defs.append('linearGradient')
    .attr('id','g3201')
    .attr('gradientUnits','userSpaceOnUse')
    .attr('x1','0%')
    .attr('x2','0%')
    .attr('y1','0%')
    .attr('y2',46)    
    gradient.append('stop')
    	.attr('stop-color',"#363636")
	    .attr('offset','0')
     gradient.append('stop')
    	.attr('stop-color',"#5B6B65")
	    .attr('offset','1') 
       
var gradient = defs.append('linearGradient')
    .attr('id','g3202')
    .attr('gradientUnits','userSpaceOnUse')
    .attr('x1','0%')
    .attr('x2','0%')
    .attr('y1','0%')
    .attr('y2',46)    
 gradient.append('stop')
    	.attr('stop-color',"#5B6B65")
	    .attr('offset','0')    
    gradient.append('stop')
    	.attr('stop-color',"#363636")
	    .attr('offset','1')
      
var gradient = defs.append('linearGradient')
    .attr('id','g3203')
    .attr('gradientUnits','userSpaceOnUse')
    .attr('x1','0%')
    .attr('x2','0%')
    .attr('y1','0%')
    .attr('y2',46)    

 gradient.append('stop')
    	.attr('stop-color',"#FFF368")
	    .attr('offset','0')    
    gradient.append('stop')
    	.attr('stop-color',"#418041")
	    .attr('offset','1')  
      
var gradient = defs.append('linearGradient')
    .attr('id','g3204')
    .attr('gradientUnits','userSpaceOnUse')
    .attr('x1','0%')
    .attr('x2','0%')
    .attr('y1','0%')
    .attr('y2',46)    
    gradient.append('stop')
    	.attr('stop-color',"#0085FF")
	    .attr('offset','0')  
 gradient.append('stop')
    	.attr('stop-color',"#1073A2")
	    .attr('offset','1')