Another Inlet

_.md

[ Launch Inlet ]
Gist #4261996 [ Launch Inlet ]
Gist #4261983 [ Launch Inlet ]
Gist #4261973 [ Launch Inlet ]
Gist #4261961 [ Launch Inlet ]
Gist #4261954 [ Launch Inlet ]
Gist #4261945 [ Launch Inlet ]
Gist #4261939 [ Launch Inlet ]
Gist #4261919 [ Launch Inlet ]
Gist #4261899 [ Launch Inlet ]
Gist #4261892 [ Launch Inlet ]
Gist #4261857 [ Launch Inlet ]
Gist #4261845 [ Launch Inlet ]
Gist #4261101 [ Launch Inlet ]
Gist #4261044 [ Launch Inlet ]
Gist #3200444

config.json

{"description":"Another Inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.45625000000000027,"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}

inlet.js

var svg =  d3.select("svg");

console.log(tributary)

  svg.append("svg:rect")
     	.attr("width",tributary.sw)
     	.attr("height",tributary.sh)
     	.attr("fill","#ddd")
    	.attr('class','background-canvas');
     



function SVGInputField(wrapper){
  //For the first creation of a input field intiailze some
  //global flags
  if(!SVGInputField.globalVariablesInitialized){

        SVGInputField.initializeGlobalVariables()
	    SVGInputField.globalVariablesInitialized = true;

  }
  
  	
  this.history = [];
  this.wrapper = wrapper;
  this.bgRect  = wrapper.select('.svg-input-bgRect');
  this.textInput = wrapper.select('.text-input');
  this.nrInst = SVGInputField.nrOfInstances;
  
  
    // Bind all the neccessary keyevents
  	// to create a textarea experience in svg
  	this.bindEvents();
  
  
  
  	//Some necceary 
  	
  	var ENTER_KEY = 13;
    var BACKSPACE_KEY = 50;
    var LEFT_KEY = 37;
    var RIGHT_KEY = 39;
    var ESC_KEY = 27;
  	
	
}

SVGInputField.nrOfInstances = 0;
SVGInputField.globalVariablesInitialized = false;


SVGInputField.initializeGlobalVariables = function(){
	window.activeTexInput = null;
	window.isInWritingMode = false;

    d3.select(window)
      .on('keypress',SVGInputField.keypress_event);
  
  
  
  	d3.select('.background-canvas')
      .on('click',SVGInputField.mousedown_svg);
  	
   
}
  


SVGInputField.prototype.enterWritingMode = function(){
  	if(window.isInWritingMode &&(window.activeTexInput.nrInst != this.nrInst)){
  		window.activeTexInput.disableWritingMode();
    }
  
    window.isInWritingMode = true;
  	var that = this;
	window.activeTexInput = that;
    this.bgRect.attr('fill','#9ABEB6');
    console.log('Writing mode for this text label now active!');
  	
}
  
SVGInputField.prototype.disableWritingMode = function(){
    window.isInWritingMode = false;
	window.activeTexInput = null;
    d3.selectAll('.svg-input-bgRect')
      .attr('fill','#888');
    console.log('Left writing mode');
}


SVGInputField.mousedown_event = function(svgInputInstance){
 	return function(){
    console.log('Mousedown')
    svgInputInstance.enterWritingMode();
    }   
    
};

SVGInputField.keypress_event = function(){

      if(window.isInWritingMode){
      	console.log('this is the active lable',window.activeTexInput)
      
      }
		
    
};


SVGInputField.blur_event = function(){
  return function(svgInputInstance){
    
      console.log('blur_event');
      
   }
}; 

SVGInputField.select_event = function(svgInputInstance){
  return function(){
    	
      console.log('select_event');
       
  }
};

SVGInputField.selectstart_event = function(svgInputInstance){
  return function(){
      console.log('select_event');
  }
};

SVGInputField.mousedown_svg = function(){

      //console.log('Click on svg',window.isInWritingMode,window.activeTexInput);
  
  if(window.isInWritingMode){
	window.activeTexInput.disableWritingMode();

  }
	
  
};


SVGInputField.prototype.bindEvents = function(){
  	var that = this;

  
  

  
	this.wrapper
      .on('mousedown',SVGInputField.mousedown_event(that))
      .on('blur',     SVGInputField.blur_event(that));
  
   this.textInput
     .on('select',SVGInputField.select_event(that))
     .on('selectstart',SVGInputField.selectstart_event(that));
 
}

SVGInputField.createInputfield = function(width, height,x,y){
    
  try{
    SVGInputField.nrOfInstances+= 1;
    
    var wrapper = d3.select("svg").append('g')
        .attr('id','svg-input-field-wrapper-'+SVGInputField.nrOfInstances)
        .attr('class','part-of-input')
	    .attr("transform","translate("+[x,y]+")");
    
    var rect    = wrapper.append('rect')
        .attr({'width': width,
               'height' : height,
               'x': 0,
               'y': 0,
               'fill':'#888',
               'class':'svg-input-bgRect part-of-input'});
    
   var text_input = wrapper.append('svg:text')
	.text('Hello World')
    .attr({'font-size':20,
           'class':'text-input part-of-input'})
    .attr("transform","translate("+[0,20]+")");;
    
    
   return new SVGInputField(wrapper);
      
  }catch(e){
      
  	console.log('Could not create text input field.',e)
  
  }
  
  
  
 
  
};

SVGInputField.prototype.toString = function()
{
  console.log('Ausagebe: ', this.bgRect.node(), this.textInput.node());
};


var x = SVGInputField.createInputfield(100,100,100,100);

var x1 = SVGInputField.createInputfield(100,100,101,257);
  
console.log('dsfds',isInWritingMode)