From: eli173 Date: Fri, 28 Aug 2015 07:13:52 +0000 (-0500) Subject: first commit, many things X-Git-Url: https://git.eli173.com/?a=commitdiff_plain;h=acac7543199fea3732ffd7c14f4d452974a4e9dc;p=graphbyhand first commit, many things current problem initializing lines, everything else is ok so far I think --- acac7543199fea3732ffd7c14f4d452974a4e9dc diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9db346a --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +/graph.js~ +/index.html~ +/style.css~ diff --git a/graph.js b/graph.js new file mode 100644 index 0000000..9d7e0d6 --- /dev/null +++ b/graph.js @@ -0,0 +1,103 @@ + + + +v_radius = 10; +v_color = 'red' +e_width = 5 +e_color = 'black' + +mode = 'v' +curr_vert = 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'})) + canvas.on('mouse:down',function(o){mousedown(o,canvas)}); +} + + +var mousedown = function(options,canvas) { + console.log(options.target); + switch(mode) { + case 'v': + if(!options.target) { + var vert = new Vertex({x:options.e.clientX, + y:options.e.clientY}); + canvas.add(vert); + } + break; + case 'e': + if(options.target && options.target.type=='Vertex') { + console.log(curr_vert) + if(curr_vert==null) { + curr_vert = options.target; + } + else { + vertices = [options.target, curr_vert] + var edge = new Edge({x1:curr_vert.left, + y1:curr_vert.top, + x2:options.target.left, + y2:options.target.top, + vertices:vertices}); + console.log(edge.x2) + curr_vert = null; + canvas.add(edge); + } + } + break; + default: + break; + + } + canvas.renderAll(); +}; + + + +var Vertex = fabric.util.createClass(fabric.Circle, { + type: 'Vertex', + initialize: function(options) { + 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); + }, + toObject: function() { + return fabric.util.object.extend(this.callSuper('toObject'), { + label: this.get('label'), edges: this.get('edges') + }); + }, + _render: function(ctx) { + this.callSuper('_render',ctx); + } +}); + +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||[]); + }, + toObject: function() { + return fabric.util.object.extend(this.callSuper('toObject'), { + vertices: this.get('vertices') + }); + }, + _render: function(ctx) { + this.callSuper('_render',ctx); + } + +}); + + + +window.onload = main; diff --git a/index.html b/index.html new file mode 100644 index 0000000..34e56c8 --- /dev/null +++ b/index.html @@ -0,0 +1,22 @@ + + + + + Input graphs easily! + + + + + + +
+ +
+
+ + + + +
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..e7b89c1 --- /dev/null +++ b/style.css @@ -0,0 +1,7 @@ + + +#surface { + border: 1px solid #000; + /* width: 100%; */ + /* height: 75%; */ +} \ No newline at end of file