easyDesign2

by enginustun

HTML

<div class="row">
    <div class="col-md-1">
    </div>
    <div class="col-md-10">
        <div class="drawing-menu">
            <ul class="di drawing-menu-items">
                <li class="di-pointer active">
                    <span class="glyphicons glyphicons-direction fa-2x"></span>
                </li>
                <li class="di-rect" data-pen="rectangle">
                    <span class="glyphicons glyphicons-vector_path_square fa-2x"></span>
                </li>
                <li class="di-circle" data-pen="circle">
                    <span class="glyphicons glyphicons-vector_path_circle fa-2x"></span>
                </li>
                <li class="di-circle" data-pen="polygon">
                    <span class="glyphicons glyphicons-vector_path_polygon fa-2x"></span>
                </li>
                <li class="di-text" data-pen="text">
                    <span class="glyphicons glyphicons-font fa-2x"></span>
                </li>
                <li class="di-line" data-pen="line">
                    <span class="glyphicons glyphicons-vector_path_line fa-2x"></span>
                </li>
                <li class="di-curve" data-pen="curve">
                    <span class="glyphicons glyphicons-vector_path_curve fa-2x"></span>
                </li>

            </ul>
            <ul class="oi">
                <li class="show-grid active">
                    <span class="glyphicons glyphicons-show_thumbnails fa-2x"></span>
                </li>
            </ul>
            <div class="clearfix"></div>
        </div>
        <div id="drawing-svg">
            <svg class="svg">
                <pattern id="img1" patternUnits="objectBoundingBox" width="64" height="64">
                        <image xlink:href="http://icons.iconarchive.com/icons/indeepop/fun/256/Rave-Diamond-magenta-icon.png" x="0" y="0" width="64" height="64" />
                    </pattern>
            </svg>
        </div>
    </div>
    <div...

CSS

.drawing-menu {
    margin-top: 30px;
}

    .drawing-menu ul {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
        float: left;
    }

        .drawing-menu ul li {
            display: inline-block;
            padding: 10px 7px 5px 5px;
            border: 1px solid #ccc;
            background: #eee;
            float: left;
            margin-right: 5px;
            cursor: pointer;
        }

        .drawing-menu ul.di li:hover {
            background: #55BADF;
            color: #fff;
        }

        .drawing-menu ul.di li.active {
            background: #27A2CF;
            color: #fff;
        }

        .drawing-menu ul li.oi:hover a {
            background: #85D27A;
            color: #fff;
        }

#drawing-canvas {
    margin-top: 30px;
    width: 100%;
    height: 599px;
}

.show-grid.active {
    background: #5BC24C !important;
    color: #fff;
}


#drawing-svg {
    width: 100%;
    height: 600px;
    background: #555;
    position: relative;
}

#selected-shapes:hover {
    cursor: move;
}

[data-curoen="pointer"] [data-type="editable-shape"]:hover {
    cursor: pointer;
}

[data-selected="true"] {
    outline: 1px dashed #5BC24C;
}

[data-type="editable-shape"][data-selected="true"]:hover {
    cursor: move;
}

[data-which="tl"] {
    cursor: nw-resize;
}

[data-which="t"] {
    cursor: n-resize;
}

[data-which="tr"] {
    cursor: ne-resize;
}

[data-which="r"] {
    cursor: w-resize;
}

[data-which="br"] {
    cursor: se-resize;
}

[data-which="b"] {
    cursor: s-resize;
}

[data-which="bl"] {
    cursor: sw-resize;
}

[data-which="l"] {
    cursor: e-resize;
}

.ngn-selected {
    outline: 1px dashed #5BC24C;
}

[data-type*="modify-shape"] {
    cursor: pointer;
        //opacity:0.6;
}

    [data-type*="modify-shape"].selected {
        fill: #F2636F;
        stroke: #732735;
    }

.clearfix{
    clear:both;
}

JavaScript

(function ($) {
    /*all behaviors*/
    var methods = {
        init: function (options) {
            var defaults = {
                'xmlns': 'http://www.w3.org/2000/svg', //use to creating svg elements

                sizeViewerId: 'size-viewer',

                sceneContainerId: 'bounds',
                sceneWidth: 320, //drawing scene width
                sceneHeight: 480, //drawing scene height
                boundStroke: 'yellow',
                boundStrokeWidth: 1,
                boundFill: 'none',
                snapToGrid: 1,
                gridStep: 16,
                gridDashArray: '2,2',
                gridStroke: '#eee',
                gridStrokeWidth: 1,


                shapesContainerId: 'shapes',

                curPen: 'pointer',

                pointRadius: 4,
                pointStrokeWidth: 1,
                pointFillColor: '#F7FF70',
                pointStrokeColor: '#E8A331',
                pointCFillColor: '#1A9BD4',
                pointCStrokeColor: '#22618C',
                pointLineColor: '#F7FF70',
                pointMoveValue: 1
            }

            return this.each(function () {
                options = $.extend(true, defaults, options);
                var $this = $(this);
                var isMouseSSDown = false,
                    isMouseSSMoving = false,
                    isMouseSSMoved = false,
                    isResizing = false,
                    isModifying = false,
                    ctrl = false,
                    shift = false,
                    aKey = false,
                    mouseStartPoints = {},
                    mouseCurPoints = {},
                    coordViewer,
                    selectedPoint,
                    selectedPointCount = 0;

                functions.setNonSelectable($this);
                if (!$(document).data('ngn-svg-index')) {
                    $(document).data('ngn-svg-index', '1');
                } else {
                    var...