Skip to content

Instantly share code, notes, and snippets.

@roundrobin

roundrobin/inlet.js

Created July 1, 2012 09:04
Show Gist options
  • Save roundrobin/3027618 to your computer and use it in GitHub Desktop.
Save roundrobin/3027618 to your computer and use it in GitHub Desktop.
Download ZIP
just another inlet to tributary
Raw
inlet.js
var pathWay = [[386,400],[273,119],[237,118],[124,400],[254,165],[306,298],[202,297],[190,329],[316,328],[345,400]];
//DONT REMOVE LINE BELOW
var lineWidth = 1414;
var lineStart = 80;
var lineDistance = 160;
var defs = d3.select('svg').append('defs');
var curves_array = [];
var curve = '';
var d = [];
var drawing = false;
//Creating Background Pattern
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('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('A');
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');
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 characterToolbar = d3.select('svg').append('g').attr('id','characterToolbar');
var characters = characterToolbar.selectAll('.character text')
.data(alphabet)
.enter();
var group = characters.append('g').on('click',function(d,i){
d3.select('#mainCharacter').text(d)
});
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')
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)');
var path = drawCanvas.append('path')
.attr('stroke','blue')
.attr('stroke-width',1)
.attr('fill',"#000000")
.attr('id','path')
.attr('fill-opacity','0.9')
.attr('class','drawit')
if(pathWay.length > 1){
var prePath = '';
for(i in pathWay){
if(pathWay[i] != undefined){
if(prePath == '')
prePath = 'M'+pathWay[i][0]+','+pathWay[i][1]+' '
else
prePath += 'L'+pathWay[i][0]+','+pathWay[i][1]+' '
}
console.log(prePath)
path.attr('d',prePath)
}
}
d3.selectAll('.drawit').on('click',function(){
var point = {x:d3.event.pageX ,y:d3.event.pageY-75}
d.push(point);
if((!drawing && curve == '') || drawing == true){
drawing = true;
createCircle(point,'red');
draw2(point)
}
});
// ---------------------------------------------------
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)
// ---------------------------------------------------
addGradient("#363636", "#5B6B65", 46, 'g3201')
addGradient("#5B6B65", "#363636", 46, 'g3202')
addGradient("#FFF368", "#418041", 46, 'g3203')
addGradient("#0085FF", "#1073A2", 46, 'g3204')
var toogle = 1
var hideHandlers = function(){
if(toogle == 1)
d3.selectAll('.circleHandle').style('opacity','0.000000001');
else
d3.selectAll('.circleHandle').style('opacity','1');
toogle *= -1;
}
var button1 = createButton('Hide Handlers', hideHandlers )
.attr('transform','translate('+[32,9]+')')
.attr('id','toogleHandlers')
var removeText = function(elem){
curve = '';
var textValue = tribView.code_editor.getLine(0);
textValue = 'var pathWay = [];'
tribView.code_editor.setLine(0,textValue);
path.attr('d',curve)
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,color){
if(!color){
color = "#000000";
}
var circleHandler = drawCanvas.append('circle')
.attr('r',3)
.attr('stroke',color)
.attr('stroke-width',2)
.attr('fill','white')
.attr('cx',pointD.x)
.attr('cy',pointD.y)
.attr('class','circleHandle')
.on('mouseover',function(){ d3.select(this).attr('fill',"#B6B623")})
.on('mouseout',function(){ d3.select(this).attr('fill',"#FFFFFF") });
if(drawing){
circleHandler.on('click',function(){
curve+= 'Z';
draw2();
drawing = false;
})
}
}
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 = tribView.code_editor.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();
tribView.code_editor.setLine(0,test);
path.attr('d',curve)
}
// -------- 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")
}
//---------------------- Button- and Add-to-editor-logic ----------------
var addText = function(point){
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);
}
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')
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment