uhhhhh

diff --git a/graph.js b/graph.js
index 9d7e0d6acc11b8f0275e3ae4e281189c99d738be..587b7f4780a5dce3cabb6e2e5a27dcd602541d1a 100644 (file)
--- 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 34e56c83568932f3628c972ecd6ee40ac20d8d09..00b8e1035d9ebda8646a80da3504041c65dfa913 100644 (file)
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
   </head>
   <body>
     <div id="canvas">
-      <canvas id="surface"></canvas>
+      <canvas id="surface" width="1000" height="300"></canvas>
     </div>
     <div id="buttons">
       <button onclick="mode = 'v'">Place Vertices</button>