From 0ff04e4014dc0d24fc21ad97df890df674d1588b Mon Sep 17 00:00:00 2001 From: eli173 Date: Fri, 28 Aug 2015 17:07:45 -0500 Subject: [PATCH] uhhhhh --- graph.js | 50 +++++++++++++++++++++++++++++++++----------------- index.html | 2 +- 2 files changed, 34 insertions(+), 18 deletions(-) diff --git a/graph.js b/graph.js index 9d7e0d6..587b7f4 100644 --- a/graph.js +++ b/graph.js @@ -9,6 +9,8 @@ e_color = 'black' mode = 'v' curr_vert = null; +evt = null; + main = function() { var canvas = new fabric.Canvas("surface",{backgroundColor:'white'}); // canvas.add(Edge({x1:44,y1:44,x2:88,y2:88,fill:'red',stroke:'red'})) @@ -17,18 +19,20 @@ main = function() { var mousedown = function(options,canvas) { - console.log(options.target); + evt = options switch(mode) { case 'v': if(!options.target) { - var vert = new Vertex({x:options.e.clientX, - y:options.e.clientY}); + var vert = new Vertex({x:options.e.pageX, + y:options.e.pageY}); canvas.add(vert); + canvas.bringToFront(vert); + console.log(vert) + console.log(options.e.pageY-v_radius) } break; case 'e': if(options.target && options.target.type=='Vertex') { - console.log(curr_vert) if(curr_vert==null) { curr_vert = options.target; } @@ -39,16 +43,25 @@ var mousedown = function(options,canvas) { x2:options.target.left, y2:options.target.top, vertices:vertices}); - console.log(edge.x2) + canvas.add(new fabric.Rect({ + left:Math.min(curr_vert.left,options.target.left), + top:Math.min(curr_vert.top,options.target.top), + width:Math.abs(curr_vert.left-options.target.left), + height:Math.abs(curr_vert.top-options.target.top), + fill:'green' + })); curr_vert = null; canvas.add(edge); + canvas.sendToBack(edge); + console.log(edge); + console.log(options.target.left) } } break; default: break; - } + }; canvas.renderAll(); }; @@ -60,12 +73,12 @@ var Vertex = fabric.util.createClass(fabric.Circle, { options || (options = { }); this.callSuper('initialize',{radius:v_radius,fill:v_color, originX:'center',originY:'center'}); - this.set('top',options.y || 0); - this.set('left',options.x || 0); - this.set('label',options.label||''); - this.set('edges',options.edges||[]); - this.set('hasControls',false); - this.set('hasBorders',false); + this.set({'top':(options.y || 0)-v_radius}); + this.set({'left':(options.x || 0)-v_radius}); + this.set({'label':options.label||''}); + this.set({'edges':options.edges||[]}); + this.set({'hasControls':false}); + this.set({'hasBorders':false}); }, toObject: function() { return fabric.util.object.extend(this.callSuper('toObject'), { @@ -81,11 +94,14 @@ var Edge = fabric.util.createClass(fabric.Line, { type: 'Edge', initialize: function(options) { options || (options = { }); - this.callSuper('initialize',{x1:options.x1||0,y1:options.y1||0, - x2:options.x2||0,y2:options.y2||0, - stroke:e_color, - strokeWidth:e_width}); - this.set('vertices',options.vertices||[]); + this.callSuper('initialize', + {stroke:e_color,strokeWidth:e_width, + selectable:false}); + // this.set({'vertices':options.vertices||[]}); + // this.set({'x1':options.x1||0}); + // this.set({'x2':options.x2||0}); + // this.set({'y1':options.y1||0}); + // this.set({'y2':options.y2||0}); }, toObject: function() { return fabric.util.object.extend(this.callSuper('toObject'), { diff --git a/index.html b/index.html index 34e56c8..00b8e10 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@

-- 2.39.2