Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var pathWay = [];
- //DONT REMOVE LINE BELOW
- var lineWidth = 1414;
- var lineStart = 80;
- var lineDistance = 160;
- var defs = d3.select('svg').append('defs');
- var path = g.append('path')
- .attr('stroke','blue')
- .attr('stroke-width',5)
- .attr('fill','none')
- var curves_array = [];
- var curve = '';
- var d = [];
- var drawing = false;
- d3.select('svg').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)
- }
- });
- function createCircle(pointD,color){
- if(!color){
- color = '#000000'
- }
- var circleHandler = g.append('circle')
- .attr('r',5)
- .attr('stroke',color)
- .attr('stroke-width',2)
- .attr('fill','white')
- .attr('cx',pointD.x)
- .attr('cy',pointD.y)
- .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)
- }
- path.attr('d',curve)
- }
- // -------- Adding Helper Lines -----------------------
- 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 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);
- }
- 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)
- })
- 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')
- }
- // ---------------------------------------------------
- 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)
- // ---------------------------------------------------
- addGradient("#363636", "#5B6B65", 46, 'g3201')
- addGradient("#5B6B65", "#363636", 46, 'g3202')
- addGradient("#FFF368", "#418041", 46, 'g3203')
- addGradient("#0085FF", "#1073A2", 46, 'g3204')
- 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]+')')
Add Comment
Please, Sign In to add comment