just another inlet to tributary

inlet.js

var pathWay = [[287,217],[468,163],[365,433],[107,360],[108,269]];
var currentPreviewChar = 'b';
var drawing = false;
var translatet = [0,0];
//DONT REMOVE LINE BELOW
var lineWidth    = 1414;
var lineStart    = 80;
var lineDistance = 160;    
     


var curve = '';

//-----------------------------------------------------------------   
//Creating Background Pattern
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 lineVertical  = pattern.append('line').attr('class','drawit').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('class','drawit').attr('x1',0).attr('x2',0).attr('y1',0).attr('y2',40).attr('fill',"#4D8891").style("stroke-width", 2).style("stroke", "steelblue")  
var drawCanvas    = d3.select('svg').append('g').attr('id','drawCanvas')
var mainCharacter = drawCanvas.append('text').attr('font-size',413).attr('fill',"#5E5E5E").attr('x',117).attr('y',91).attr('dominant-baseline',"hanging") .attr('id',"mainCharacter").attr('fill-opacity','0.4').text(currentPreviewChar);     
var handlers      = d3.select('svg').append('g').attr('id','handlers')

    
var backgroundCanvas = drawCanvas.append('rect')
  .attr('height',779).attr('width',1442)
  .attr('x',3).attr('y',81)
  .attr('fill','url(#pattern1)')
  .attr('id','drawArea')
  .attr('class','drawit');
//-----------------------------------------------------------------    
/***
* Creating the Character toolbar
* the user can choose a preview charcter to
* draw based in that a new character
***/
 
//var alphabet = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
var alphabet = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];

//Adding a group for the character toolbar
var characterToolbar = d3.select('svg').append('g').attr('id','characterToolbar');

//Creating a enter selection for putting a characters on the canvas
var characters = characterToolbar.selectAll('.character text')
  .data(alphabet)
  .enter();

//Adding a click event on the characters in order to change the preview 
var group = characters.append('g').on('click',function(d,i){
                  d3.select('#mainCharacter').text(d)
                    currentPreviewChar  = changePreviewChar(d);
              });
//Adding a background rect for each character 
group.append('rect')
  .attr('height',80).attr('width',100)
  .attr('x',function(d,i){ return (i*100)-10;})
  .attr('fill',"#C7C79E")
  .attr('stroke','black')
  .attr('stroke-width','1')  
//Adding the actual character on the canvas
group.append('text')
            .attr('font-size',100)
              .attr('fill',"#2F9675")
              .attr('text-anchor',"start")
        .attr('x',function(d,i){ return i*100;})
              .attr('dominant-baseline',"hanging") 
          .text(function(d,i){ return d;})
characterToolbar.attr('transform','translate(300)');  
//-----------------------------------------------------------------   
/***
* Creating all lines for the background
***/

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)
    
var x4 = 121    
var startCharacter = createLine(x4,x4,481,80)   
var x5 = 390    
var startCharacter = createLine(x5,x5,481,80)    
 
/***
* This is the main path for the new character
* If the pathWay variable is empty there is no character to draw
***/

var path = drawCanvas.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)')
//-----------------------------------------------------------------   
 /***
* Drag and Drop Behavior for the new Character.
* If you drag the character area you will change the position of it
***/

var movePath = function(){
  if(!drawing){
     g.selectAll('.circleHandle').remove()
    var x = d3.event.x-250
    var y = d3.event.y-250
    var scale = path.attr('transform').split('scale(')[1].split(')')[0]
    scale = parseFloat(scale)
  
  
    path.attr('transform','scale('+scale+')translate('+[x,y]+')');
    
    
  }
                         
}          
    
var drag = d3.behavior.drag().on("drag", movePath)    
path.call(drag)

//-----------------------------------------------------------------   
/***
* If the Pathway is not empty draw the existing path
***/
      
if(pathWay.length >= 1){
  var prePath = '';
    
    
  for(i in pathWay){
    createCircle({x:pathWay[i][0],y:pathWay[i][1]})      
    if(pathWay[i] != undefined){
       if(prePath == '')
         prePath = 'M'+pathWay[i][0]+','+pathWay[i][1]+' '
     else
         prePath += 'L'+pathWay[i][0]+','+pathWay[i][1]+' '
           
       
    }
      createCircle({x:pathWay[i][0],y:pathWay[i][1]})      
    path.attr('d',prePath)  
  }
    
  	//If drawing is finished close the Shape
    if((!drawing && pathWay.length >= 1)){
        var pathSoFar = path.attr('d')
        path.attr('d',pathSoFar+'Z')
  }        
  
  
} 
//-----------------------------------------------------------------   
/***
* Adding the Click Behavior to the canvas, in order to draw a new path.
***/
d3.selectAll('.drawit').on('click',function(){
   var point = {x:d3.event.pageX ,y:d3.event.pageY-75}

       //If there is already a element in the pathArray say we are drawing
  // And draw the Shape again. 
  if((!drawing && pathWay.length == 0) || (drawing == true && pathWay.length > 0)){
    drawing = getLine(2);
    drawing = 'var drawing = true;'
    setLine(2,drawing);   
    drawing = true;
    createCircle(point,'red');
    //DRAW THE AREA ON EVERY CLICK NEW
    draw2(point)
  }
  
    if((!drawing && pathWay.length > 0)){
   		
    console.log('Adding a innershape',d)
      
    	  
    
    }
  
  
  
  
 
    
});
  
// ----------- Here are following all interactions with buttons --------
/***
* Here are following all interactions with buttons
***/ 

// ----------- Toogle Handlers --------
var toogleHandlers = 1
var hideHandlers = function(){
  if(toogleHandlers == 1)
  d3.selectAll('.circleHandle').style('opacity','0.000000001');   
  else
  d3.selectAll('.circleHandle').style('opacity','1');   
  
  toogleHandlers *= -1;
}  


// ----------- Remove so far drawed area --------    
var button1 = createButton('Hide Handlers', hideHandlers )
.attr('transform','translate('+[32,9]+')').attr('id','toogleHandlers')

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

 // ----------- Zoom IN character  --------   
var zoomInCallback = function(){
  g.selectAll('.circleHandle').remove()
    var scale = path.attr('transform').split('scale(')[1].split(')')[0]
        scale = parseFloat(scale)
    scale += 0.1
  path.attr('transform','scale('+scale+')')
} 
var zoomIn  = createButton('+', zoomInCallback).attr('transform','translate('+[630,89]+')')    


// ----------- Zoom OUT character  --------     
var zoomOutCallback = function(){
  g.selectAll('.circleHandle').remove()
    var scale = path.attr('transform').split('scale(')[1].split(')')[0]
        scale = parseFloat(scale)
    scale -= 0.1
  path.attr('transform','scale('+scale+')')
}
    
    
var zoomOut = createButton('-', zoomOutCallback).attr('transform','translate('+[670,89]+')')        

// ----------- Toogle Outline  --------       
var toogleOutline = 1    
var showOutlineCallback = function(){
  if(toogleOutline == 1)  
    path.attr('fill','none')
  else
    path.attr('fill','black')

  toogleOutline = toogleOutline * -1    
 
  
}    
var zoomOut = createButton('Show Outline', showOutlineCallback).attr('transform','translate('+[719,89]+')')        
    
// ----------- Create Handler Function  --------  

function createCircle(pointD,color){
  
  if(!color){
    color = "#000000";
  } 
  var circleHandler = handlers
    .append('circle')
    .attr('r',5)
    .attr('stroke',color)
    .attr('stroke-width',2)
    .attr('fill','red')
    .attr('cx',pointD.x)
    .attr('cy',pointD.y)
    .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'))
        }
       
        
     }) 
    
    
}   
 
// ----------- Draw the AREA  --------  

var draw2 = function(point){
   if(point != undefined){
    var n_point1 = {x:point.x-50 ,y:point.y}
    var n_point2 = {x:point.x+50 ,y:point.y}  

  if(curve == '')      
       curve += 'M '+point.x+','+point.y;
      else{
        var q_move = 0
        var q_point1 = {x:point.x-q_move ,y:point.y-q_move}
        curve += ' Q '+(q_point1.x)+','+(q_point1.y)+', '+point.x+','+point.y;   
          
        //createLine(point.x,q_point1.x,point.y,q_point1.y)
        //var previous_element = d[d.length-2]
        //createLine(previous_element.x,q_point1.x,previous_element.y,q_point1.y)  
        createCircle(q_point1,'green',2)
      } 
     
     createCircle(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+']';
    }else{
         add = ',['+point.x+','+point.y+']';
    }  
    var modify = result[1]+add;
    var finalString = 'var pathWay = ['+(modify)+'];';
    //console.log('String',finalString);
  var test = text.text(finalString);
    test = test.text();
    setLine(0,test); 
  
  
  
    
  path.attr('d',curve)
    
  } 
//---------------------------------
    
    function changePreviewChar(d){
    
     var textValue = getLine(0);
     setLine(1,"var currentPreviewChar = '"+d+"';"); 
     return d;
    
    }

// -------- Adding Helper Lines -----------------------
 
function createLine(x,x1,y,y1){
  drawCanvas.append('line')
      .attr("x1",x)
      .attr("y1",y)
      .attr("x2",x1)
      .attr("y2",y1)
      .style("stroke-width", 3)
      .style("stroke", "black")
      .attr('class','drawit')
}    
      


//---------------------- Button- and Add-to-editor-logic ----------------
var addText = function(point){
   var text = d3.select('#pathWay')
   var textValue = 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();
    setLine(0,test);
    
  
}  

addGradient("#363636", "#5B6B65", 46, 'g3201')
addGradient("#5B6B65", "#363636", 46, 'g3202')  
addGradient("#FFF368", "#418041", 46, 'g3203')  
addGradient("#0085FF", "#1073A2", 46, 'g3204')  

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


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