Created
July 20, 2012 01:20
-
-
Save roundrobin/3148060 to your computer and use it in GitHub Desktop.
just another inlet to tributary
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var pathWay = [[354,245],[292,162],[160,162],[132,251],[151,391],[318,426]]; | |
var currentPreviewChar = 'c'; | |
var drawing = true; | |
var translatet = [0,0]; | |
//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 = []; | |
//Creating Background Pattern | |
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') | |
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 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) | |
currentPreviewChar = changePreviewChar(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 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) | |
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)') | |
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(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) | |
} | |
} | |
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){ | |
var drawing = tribView.code_editor.getLine(2); | |
drawing = 'var drawing = true;' | |
setLine(2,drawing); | |
drawing = true | |
createCircle(point,'red'); | |
draw2(point) | |
} | |
}); | |
// --------------------------------------------------- | |
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]+')') | |
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 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 zoomIn = createButton('+', zoomInCallback).attr('transform','translate('+[630,89]+')') | |
var zoomOut = createButton('-', zoomOutCallback).attr('transform','translate('+[670,89]+')') | |
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]+')') | |
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(){ | |
if(drawing == true){ | |
var pathSoFar = path.attr('d') | |
console.log(pathSoFar) | |
path.attr('d',pathSoFar+'Z') | |
drawing = false; | |
var drawing = tribView.code_editor.getLine(2); | |
drawing = 'var drawing = false;' | |
setLine(2,drawing); | |
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 = 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); | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment