SVG circle+line clicking

by janeklb

HTML

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

CSS

.container { position: relative; }
.container img, #paper{
    z-index: 0;
    width: 500px;
    height: 500px;
}
.container div,
.container img {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid black;
}
.container div {
    z-index: 4;
}


.container circle,
.container line{
    stroke: #00fe22;
    stroke-width: 2px;
    stroke-opacity: 0.5;
    fill-opacity: 0.2;
    fill: #ff0013;
}

JavaScript

var STATE = {
    reset: -1,
    waiting: 0,
    drawing_circle: 1,
    drawing_line: 2,
    dragging_circle: 3
};

var CIRCLE_STYLE = {fill: '#ff0013', 'fill-opacity': 0.2, stroke: '#00fe22', 'stroke-width': '2px', 'stroke-opactiy': 0.5};

window._state = STATE.waiting;

var $paperEl = $('#paper'),
    clickEvents = [],
    circle = null,
    line = null,
    paper = null,
    width = 500, height = 500,
    rect = null;



$paperEl.mousemove(function(evt) {
    handler_mousemove(evt, evt.pageX, evt.pageY);
}).click(function(evt) {
    console.log('cliiiiick state:', window._state);
    handler_click(evt, evt.pageX, evt.pageY);
    console.log('cliiiiick state:', window._state);
});

paper = Raphael($paperEl[0], width, height);

rect = paper.rect(0, 0, width, height).attr({'opactiy': 0, 'stroke-width': 0, 'fill': '#ffffff'});

circle = paper.circle(40, 123, 50);
//circle.attr(CIRCLE_STYLE);
circle.mouseover(function() {
    this.attr('fill-opacity', 1);
});

function handler_fix_event(handler) {
    return function(evt, x, y) {
        evt = $.event.fix(evt);
        return handler(evt, evt.offsetX, evt.offsetY);
    }
}

function handler_click(evt, x, y) {
    
    clickEvents[window._state] = evt;
    
    switch (window._state) {
        case STATE.reset:
            window._state = STATE.waiting;
            break;
        case STATE.waiting:
                    
            circle = paper.circle(x, y, 0);
            //circle.attr(CIRCLE_STYLE);
            
            window._state = STATE.drawing_circle;
            
            break;
            
        case STATE.drawing_circle:
            window._state = STATE.waiting;
            
            // attach move listeners
            circle.mousedown(function() {
                window._state = STATE.dragging_circle;
                circle = this;
            });
            circle.mouseup(function() {
                window._state = STATE.reset;
                circle = null; 
            });
         ...