tenk svg draw

by enginustun

JavaScript

//GUID generator
function guid() {
    var d = new Date().getTime();
    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = (d + Math.random() * 16) % 16 | 0;
        d = Math.floor(d / 16);
        return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return uuid;
};

// template for each user scenes
var scene = function () {
    var self = this;

    self.id = guid();
    self.name = 'scene';
    self.groups = [];

    // to add group to scene
    self.addGroup = function (group) {
        self.groups.push(group);
    }

    // to remove group from scene
    self.removeGroup = function (group) {
        var delIndex = self.groups.indexOf(group);
        if (delIndex > -1) {
            self.groups.splice(delIndex, 1);
        }
    }
}

// template for each display group in scene
var group = function () {
    var self = this;

    self.id = guid();
    self.name = 'group';
    self.shapes = [];

    // to add shape to group
    self.addShape = function (shape) {
        self.shapes.push(shape);
    }

    // to remove shape from group
    self.removeShape = function (shape) {
        var delIndex = self.shapes.indexOf(shape);
        if (delIndex > -1) {
            self.shapes.splice(delIndex, 1);
        }
    }
}


var shapeService = function () {
    //
    var shape = function (options) {
        var self = this;
        self.id = guid();
        self.type = options.type || 'editable';
        self.name = options.name || 'shape';

        self.drawing = {
            oldRotation: 0, // rotation before change
            rotation: 0, // new and last rotation
            referencePoint: { x: 0, y: 0 }, // shape reference point to rotate
            points: [], // drawing points
            anchor: { x: 0, y: 0 } // auto calculated anchor points based on referencePoint
        }

        self.style = {
            fill: '#ffffff',
            strokeColor: '#cccccc',
            strokeWidth: 1,
       ...