dpzmick/index.html

## index.html
<html>
    <head>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/svg.js/1.0.0-rc.8/svg.min.js"></script>
    </head>

    <body>
        <div id="drawing">
        </div>
    </body>

    <script>

// blaahhhh
var draw = SVG('drawing').size(4000, 1000);

// bunch of globals
box_width = 300;
box_height = 100;
box_percent = 0.7;
dot_padding = 50;

function Arrow(){
    this.mk_string = function(x2,y2) {
        return '' + (x2-25) + ',' + (y2-25) + ' ' + (x2-25) + ',' + (y2+25) + ' ' + x2 + ',' + y2;
    }

    var arrow = draw.group();

    var line = draw.line(0, 100, 100, 100).stroke({ width: 4 });
    arrow.add(line);

    var x2 = 100;
    var y2 = 100;

    var str = this.mk_string(x2, y2);

    var polygon = draw.polygon(str).fill('#0').stroke({width: 3 });

    arrow.add(polygon);

    this.change_points = function(x1, y1, x2, y2) {
        var L = Math.sqrt( Math.pow((x2-x1), 2) + Math.pow((y2-y1), 2) );

        if (y1 < y2 | x1 < x2) {
            var angle = Math.atan( (y2 - y1) / (x2 - x1) );
        }

        angle = (180/Math.PI) * angle;
        arrow.rotate(angle);

        line.size(L);
        polygon.x(L);

        return this;
    }

    return this;
}

function Node( value ) {

    // lots of this logic can be handled by svgjs

    var whole_box = draw.group();

    var rect = draw.rect(box_width, box_height).attr({
        fill: '#FFFFFF',
        'stroke': '#000000'
    });

    whole_box.add(rect);

    var line = draw.line(
        box_width*box_percent,
        0,
        box_width*box_percent,
        box_height
    ).stroke({ width: 1 });

    whole_box.add(line);

    var dot = draw.circle(10);
    dot.move(box_width - dot_padding, box_height/2);

    whole_box.add(dot);

    var value_label = draw.text(value);
    value_label.move(10, box_height/2 - 10);

    // TODO HACK
    if ( value !== "NULL" ) {
        this.arrow = new Arrow();
    }

    whole_box.add(value_label);

    this.x = 0;
    this.y = 0;

    this.move = function(x, y) {
        this.x = x;
        this.y = y;
        whole_box.animate(300).move(x,y);

        return this;
    }

    this.draw_arrow_to = function(other_node) {
        this.arrow.change_points(this.dot_x, this.dot_y, other_node.start_x, other_node.start_y);
    }

    return this;
}

var null_node = Node("NULL").move(800,0);
var node1 = Node("1").move(0,0);
var node2 = new Node("2").move(400,0);
node1.draw_arrow_to(node2);
node2.draw_arrow_to(null_node);

//var arrow = new Arrow();
//arrow.change_points(0,0, 500, 500);

    </script>
</html>
	<html>
	<head>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/svg.js/1.0.0-rc.8/svg.min.js"></script>
	</head>

	<body>
	<div id="drawing">
	</div>
	</body>

	<script>

	// blaahhhh
	var draw = SVG('drawing').size(4000, 1000);

	// bunch of globals
	box_width = 300;
	box_height = 100;
	box_percent = 0.7;
	dot_padding = 50;

	function Arrow(){
	this.mk_string = function(x2,y2) {
	return '' + (x2-25) + ',' + (y2-25) + ' ' + (x2-25) + ',' + (y2+25) + ' ' + x2 + ',' + y2;
	}

	var arrow = draw.group();

	var line = draw.line(0, 100, 100, 100).stroke({ width: 4 });
	arrow.add(line);

	var x2 = 100;
	var y2 = 100;

	var str = this.mk_string(x2, y2);

	var polygon = draw.polygon(str).fill('#0').stroke({width: 3 });

	arrow.add(polygon);

	this.change_points = function(x1, y1, x2, y2) {
	var L = Math.sqrt( Math.pow((x2-x1), 2) + Math.pow((y2-y1), 2) );

	if (y1 < y2 \| x1 < x2) {
	var angle = Math.atan( (y2 - y1) / (x2 - x1) );
	}

	angle = (180/Math.PI) * angle;
	arrow.rotate(angle);

	line.size(L);
	polygon.x(L);

	return this;
	}

	return this;
	}

	function Node( value ) {

	// lots of this logic can be handled by svgjs

	var whole_box = draw.group();

	var rect = draw.rect(box_width, box_height).attr({
	fill: '#FFFFFF',
	'stroke': '#000000'
	});

	whole_box.add(rect);

	var line = draw.line(
	box_width*box_percent,
	0,
	box_width*box_percent,
	box_height
	).stroke({ width: 1 });

	whole_box.add(line);

	var dot = draw.circle(10);
	dot.move(box_width - dot_padding, box_height/2);

	whole_box.add(dot);

	var value_label = draw.text(value);
	value_label.move(10, box_height/2 - 10);

	// TODO HACK
	if ( value !== "NULL" ) {
	this.arrow = new Arrow();
	}

	whole_box.add(value_label);

	this.x = 0;
	this.y = 0;

	this.move = function(x, y) {
	this.x = x;
	this.y = y;
	whole_box.animate(300).move(x,y);

	return this;
	}

	this.draw_arrow_to = function(other_node) {
	this.arrow.change_points(this.dot_x, this.dot_y, other_node.start_x, other_node.start_y);
	}

	return this;
	}

	var null_node = Node("NULL").move(800,0);
	var node1 = Node("1").move(0,0);
	var node2 = new Node("2").move(400,0);
	node1.draw_arrow_to(node2);
	node2.draw_arrow_to(null_node);

	//var arrow = new Arrow();
	//arrow.change_points(0,0, 500, 500);

	</script>
	</html>
No results found