SVG test 4

Drawing Board

by Jayson Buquia

HTML

<div class="button-groups">
    <div class="color-buttons">
        <span class="btn" data-color="red" style="background-color:red"></span>
        <span class="btn" data-color="blue" style="background-color:blue"></span>
        <span class="btn" data-color="green" style="background-color:green"></span>
        <span class="btn" data-color="black" style="background-color:black"></span>
        <span class="btn" data-color="khaki" style="background-color:khaki"></span>
        <span class="btn" data-color="yellow" style="background-color:yellow"></span>
    </div>
    <div class="buttons">
        <button id="btn-c" data-shape="circle">circle</button>
        <button id="btn-r" data-shape="rect">rectangle</button>
        <button id="btn-e" data-shape="ellipse">ellipse</button>
    </div>    
    <div class="taskButtons">
        <button id="delBtn">remove</button>
    </div>
</div>

<svg id="svg1" width="350" height="350">
    
    <!-- elems here -->
    
</svg>


<div class="status">
    <div id="currentshape">
        
    </div>
</div>

SCSS

@keyframes hover {
    from {
        fill: black;
    }
    to {
       fill: yellow;
    }
}

#svg1 {
    background: #eee;
    margin-top: 10px;
    margin-left: 5px;
}

#circ1 {    
    
    -webkit-transform: all 0.3s ease;
    -moz-transform: all 0.3s ease;
    -ms-transform: all 0.3s ease;
    -o-transform: all 0.3s ease;
    transform: all 0.3s ease;
    fill : black;  

    &:hover {
        
    }
}

svg:not(.drawing-active) .draggable {
    cursor : move;
    transition: all 0.3s ease;
    stroke-width: 0;
    
    &:hover {
        opacity : 0.7;
        stroke: #000;
        stoke-opacity: 0.3;
        stroke-width: 3;
    }
    
}

svg.remove-active .draggable {
    cursor : default; 
    transition: all 0.3s ease;
    stroke-width: 0;
    
    &:hover {        
        opacity : 0.7;  
        stroke: red; 
        stoke-opacity: 0.3;
        stroke-width: 3;
    }
    
}


.drawing-active {
    cursor: crosshair;
}

.button-groups {
    display: inline-block;
    vertical-align: top;
}

.buttons {
    display : block;      
    
    button {
        display: inline-block;
        margin-bottom: 10px;
        border-radius : 5px;        
    }  
    
}

button.active-shape {
    background-color: green;
    color: white;
}

.taskButtons {
    display : block;
    padding: 10px 0;
}

.color-buttons {
    
    .btn {
        width: 25px;
        height: 25px;
        display: inline-block;
        margin-left: 2px;
        margin-bottom: 2px;
    }
    
    
}

JavaScript

var Board = (function(){
    
    var obj = {};
    
    // main drawing canvas
    obj.canvas = $('#svg1');
    
    // holder for all the elements inside the canvas
    obj.canvasElements = {
        list : {},
        remove : function(elem){
            console.log(obj.canvasElements.list[elem.id]);
            delete obj.canvasElements.list[elem.id];
            obj.canvas[0].removeChild(elem.element);
        }    
    };   
   
    
    // buttons set
    obj.shapeButtons = (function(){
    
        var btnGrpObj = {},
            btnGrp = $('.buttons');        
        
        btnGrp.find('button').map(function(i,elem){
            
            var btnId = elem.id,
                shape = $(elem).attr('data-shape');            
       
            btnGrpObj[shape] = $('#'+btnId);
            
        
        });
        
        return btnGrpObj;
    
    })(); 
    
    

    // current board status
    obj.status = {
    
        drawing : false,
        remove : false,
        shape : null,
        color: null,
        activeBtn : null,        
        disable : function(){
            obj.status.drawing = false;
            obj.status.shape = null;
            
            if ( obj.status.activeBtn )
            {
                obj.status.activeBtn.removeClass('active-shape');
            }            
            
            obj.status.activeBtn = null;
            obj.pen.enabled = false;
            
            //remove drawing-active class if it has
            if ( obj.canvas.attr('class') && obj.canvas.attr('class').match(/drawing[-]active/gi) )
            {                               obj.canvas.attr('class',obj.canvas.attr('class').replace(/drawing[-]active/gi,''));
            }
            
        },
        activate : function(shape,activeBtn){
            
            // disable if same active button
            if ( obj.status.activeBtn && obj.status.activeBtn.attr('id') === activeBtn.attr('id') )
            {
               ...