Zimon - POC

by Paulo Ávila

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<div id="raphaelContainer"></div>

JavaScript

var paper = Raphael('raphaelContainer', 300, 300);

var path = paper.path("M10 10L90 90");
var pathArray = path.attr("path");
var handleGlow;

handle = paper.circle(90,90,5).attr({
    fill: "black",
    cursor: "pointer",
    "stroke-width": 10,
    stroke: "transparent"
});

var start = function () {
  this.cx = this.attr("cx"),
  this.cy = this.attr("cy");
},
move = function (dx, dy) {
   var X = this.cx + dx,
       Y = this.cy + dy;
   this.attr({cx: X, cy: Y});
   pathArray[1][1] = X;
   pathArray[1][2] = Y;
   path.attr({path: pathArray});;
},
up = function () {
   this.dx = this.dy = 0;
};

handle.drag(move, start, up);

handle.hover(function () {
    handleGlow = this.glow({
        width: 5,
        color: 'red'
    });
}, function () {
    handleGlow.remove();
});


/*
var group = paper.set();
group.push();

paper.add([
    {
        type: "circle",
        cx: 10,
        cy: 10,
        r: 5
    },
    {
        type: "rect",
        x: 10,
        y: 10,
        width: 10,
        height: 10,
        fill: "#fc0"
    }
]);
//*/