player/js/elements/ShapeItemElement.js

function ShapeItemElement(data,parentElement){
    this.stylesList = [];
    this.currentMatrix = new Matrix();
    this.shape = parentElement;
    this.data = data;
    this.searchShapes(this.data);
    styleUnselectableDiv(this.shape);
}

ShapeItemElement.prototype.searchShapes = function(arr){
    var i, len = arr.length - 1;
    var j, jLen;
    var pathNode;
    var ownArrays = [];
    for(i=len;i>=0;i-=1){
        if(arr[i].ty == 'fl' || arr[i].ty == 'st'){
            arr[i].renderedFrames = [];
            arr[i].lastData = {
                c: '',
                o:'',
                w: ''
            };
            this.stylesList.push({
                elements: [],
                type: arr[i].ty,
                d: ''
            });
            arr[i].style = this.stylesList[this.stylesList.length - 1];
            ownArrays.push(arr[i].style);
        }else if(arr[i].ty == 'gr'){
            this.searchShapes(arr[i].it);
        }else if(arr[i].ty == 'tr'){
            arr[i].transform = {
                mat: new Matrix(),
                opacity: 1
            };
        }else if(arr[i].ty == 'sh'){
            arr[i].elements = [];
            arr[i].renderedFrames = [];
            arr[i].lastData = {
                d: '',
                o:'',
                tr:''
            };
            jLen = this.stylesList.length;
            for(j=0;j<jLen;j+=1){
                if(!this.stylesList[j].closed){
                    pathNode = document.createElementNS(svgNS, "path");
                    arr[i].elements.push(pathNode);
                    this.shape.appendChild(pathNode);
                    this.stylesList[j].elements.push(pathNode);
                    if(this.stylesList[j].type == 'st'){
                        pathNode.setAttribute('fill-opacity',0);
                        pathNode.setAttribute('stroke-linejoin','round');
                        pathNode.setAttribute('stroke-linecap','round');
                    }
                }
            }

        }else if(arr[i].ty == 'rc'){
            arr[i].elements = [];
            arr[i].renderedFrames = [];
            arr[i].lastData = {
                roundness: '',
                w: '',
                h: '',
                x: '',
                y:'',
                o:'',
                tr:''
            };
            arr[i].renderedFrames = [];
            jLen = this.stylesList.length;
            for(j=0;j<jLen;j+=1){
                if(!this.stylesList[j].closed){
                    pathNode = document.createElementNS(svgNS, "rect");
                    arr[i].elements.push(pathNode);
                    this.shape.appendChild(pathNode);
                    this.stylesList[j].elements.push(pathNode);
                    if(this.stylesList[j].type == 'st'){
                        pathNode.setAttribute('fill-opacity',0);
                    }
                }
            }

        }else if(arr[i].ty == 'el'){
            arr[i].elements = [];
            arr[i].renderedFrames = [];
            arr[i].lastData = {
                cx: '',
                cy: '',
                rx: '',
                ry: '',
                o:'',
                tr:''
            };
            jLen = this.stylesList.length;
            for(j=0;j<jLen;j+=1){
                if(!this.stylesList[j].closed){
                    pathNode = document.createElementNS(svgNS, "ellipse");
                    arr[i].elements.push(pathNode);
                    this.shape.appendChild(pathNode);
                    this.stylesList[j].elements.push(pathNode);
                    if(this.stylesList[j].type == 'st'){
                        pathNode.setAttribute('fill-opacity',0);
                    }
                }
            }

        }
    }
    len = ownArrays.length;
    for(i=0;i<len;i+=1){
        ownArrays[i].closed = true;
    }
};

ShapeItemElement.prototype.getElement = function(){
    return this.shape;
};

ShapeItemElement.prototype.hideShape = function(){
    var i, len = this.stylesList.length;
    var j, jLen;
    var elements;
    for(i=0;i<len;i+=1){
        elements = this.stylesList[i].elements;
        jLen = elements.length;
        for(j=0;j<jLen;j+=1){
            elements[j].setAttribute('opacity','0');
        }
    }
};

ShapeItemElement.prototype.renderShape = function(num,parentTransform,items){
    if(!items){
        items = this.data;
    }
    this.posCount = 0;
    this.frameNum = num;
    var i, len;
    len = items.length - 1;
    var groupTransform,groupMatrix;
    for(i=len;i>=0;i-=1){
        if(items[i].ty == 'tr'){
            var props = parentTransform.mat.props;
            var mtArr = items[i].renderedData[num].mtArr;
            groupTransform = items[i].transform;
            groupTransform.opacity = parentTransform.opacity;
            groupTransform.opacity *= items[i].renderedData[num].o;
            groupMatrix = groupTransform.mat;
            groupMatrix.reset().transform(props[0],props[1],props[2],props[3],props[4],props[5]).transform(mtArr[0],mtArr[1],mtArr[2],mtArr[3],mtArr[4],mtArr[5]).translate(-items[i].renderedData[num].a[0],-items[i].renderedData[num].a[1]);
        }else if(items[i].ty == 'sh'){
            this.renderPath(items[i],num,groupTransform);
        }else if(items[i].ty == 'el'){
            this.renderEllipse(items[i],num,groupTransform);
        }else if(items[i].ty == 'rc'){
            this.renderRect(items[i],num,groupTransform);
        }else if(items[i].ty == 'fl'){
            this.renderFill(items[i],num);
        }else if(items[i].ty == 'st'){
            this.renderStroke(items[i],num);
        }else if(items[i].ty == 'gr'){
            this.renderShape(num,groupTransform,items[i].it);
        }
    }
};

ShapeItemElement.prototype.renderPath = function(pathData,num,transform){
    if(!pathData.renderedFrames[num]){
        pathData.renderedFrames[num] = {
            d: pathData.renderedData[num].path.pathString,
            tr: 'matrix('+transform.mat.props.join(',')+')',
            o: transform.opacity
        };
    }
    var pathString = pathData.renderedFrames[num].d;
    var transformString = pathData.renderedFrames[num].tr;
    var opacity = pathData.renderedFrames[num].o;
    var elements = pathData.elements;
    var i, len = elements.length;
    for(i=0;i<len;i+=1){
        if(pathData.lastData.d != pathString){
            elements[i].setAttribute('d',pathString);
        }
        if(pathData.lastData.tr != transformString){
            elements[i].setAttribute('transform',transformString);
        }
        if(pathData.lastData.o != opacity){
            elements[i].setAttribute('opacity',opacity);
        }
    }
    pathData.lastData.d = pathString;
    pathData.lastData.tr = transformString;
    pathData.lastData.o = opacity;
};


ShapeItemElement.prototype.renderEllipse = function(ellipseData,num,transform){
    var ellipseAttrs = ellipseData.renderedData[num];
    if(!ellipseData.renderedFrames[num]){
        ellipseData.renderedFrames[num] = {
            cx: ellipseAttrs.p[0],
            cy: ellipseAttrs.p[1],
            rx: ellipseAttrs.size[0]/2,
            ry: ellipseAttrs.size[1]/2,
            tr: 'matrix('+transform.mat.props.join(',')+')',
            o: transform.opacity
        };
    }
    var cx = ellipseData.renderedFrames[num].cx;
    var cy = ellipseData.renderedFrames[num].cy;
    var rx = ellipseData.renderedFrames[num].rx;
    var ry = ellipseData.renderedFrames[num].ry;
    var tr = ellipseData.renderedFrames[num].tr;
    var o = ellipseData.renderedFrames[num].o;

    var elements = ellipseData.elements;
    var i, len = elements.length;
    for(i=0;i<len;i+=1){
        if(ellipseData.lastData.cx != cx){
            elements[i].setAttribute('cx',cx);
        }
        if(ellipseData.lastData.cy != cy){
            elements[i].setAttribute('cy',cy);
        }
        if(ellipseData.lastData.rx != rx){
            elements[i].setAttribute('rx',rx);
        }
        if(ellipseData.lastData.ry != ry){
            elements[i].setAttribute('ry',ry);
        }
        if(ellipseData.lastData.tr != tr){
            elements[i].setAttribute('transform',tr);
        }
        if(ellipseData.lastData.o != o){
            elements[i].setAttribute('opacity',o);
        }
    }
    ellipseData.lastData.cx = cx;
    ellipseData.lastData.cy = cy;
    ellipseData.lastData.rx = rx;
    ellipseData.lastData.ry = ry;
    ellipseData.lastData.tr = tr;
    ellipseData.lastData.o = o;
};

ShapeItemElement.prototype.renderRect = function(rectData,num,transform){
    var elements = rectData.elements;
    var rectAttrs = rectData.renderedData[num];
    var roundness;
    if(!rectData.renderedFrames[num]){
        roundness = rectAttrs.roundness;

        if(roundness > rectAttrs.size[0]/2){
            roundness = rectAttrs.size[0]/2;
        }
        if(roundness > rectAttrs.size[1]/2){
            roundness = rectAttrs.size[1]/2;
        }
        rectData.renderedFrames[num] = {
            round: roundness,
            w: rectAttrs.size[0],
            h: rectAttrs.size[1],
            x: rectAttrs.position[0] - rectAttrs.size[0]/2,
            y: rectAttrs.position[1] - rectAttrs.size[1]/2,
            tr: 'matrix('+transform.mat.props.join(',')+')',
            o: transform.opacity
        };
    }
    roundness = rectData.renderedFrames[num].round;
    var w = rectData.renderedFrames[num].w;
    var h = rectData.renderedFrames[num].h;
    var x = rectData.renderedFrames[num].x;
    var y = rectData.renderedFrames[num].y;
    var tr = rectData.renderedFrames[num].tr;
    var o = rectData.renderedFrames[num].o;
    var i, len = elements.length;
    for(i=0;i<len;i+=1){
        if(rectData.lastData.roundness != roundness){
            elements[i].setAttribute('rx',roundness);
            elements[i].setAttribute('ry',roundness);
        }
        if(rectData.lastData.w != w){
            elements[i].setAttribute('width',w);
        }
        if(rectData.lastData.h != h){
            elements[i].setAttribute('height',h);
        }
        if(rectData.lastData.x != x){
            elements[i].setAttribute('x',x);
        }
        if(rectData.lastData.y != y){
            elements[i].setAttribute('y',y);
        }
        if(rectData.lastData.tr != tr){
            elements[i].setAttribute('transform',tr);
        }
        if(rectData.lastData.o != o){
            elements[i].setAttribute('opacity',o);
        }
    }
    rectData.lastData.roundness = roundness;
    rectData.lastData.w = w;
    rectData.lastData.h = h;
    rectData.lastData.x = x;
    rectData.lastData.y = y;
    rectData.lastData.o = o;
};

ShapeItemElement.prototype.renderFill = function(styleData,num){
    var fillData = styleData.renderedData[num];
    var styleElem = styleData.style;
    if(!styleData.renderedFrames[num]){
        styleData.renderedFrames[num] = {
            c: fillData.color,
            o: fillData.opacity
        }
    }

    var c = styleData.renderedFrames[num].c;
    var o = styleData.renderedFrames[num].o;

    var elements = styleElem.elements;
    var i, len = elements.length;
    for(i=0;i<len;i+=1){
        if(styleData.lastData.c != c){
            elements[i].setAttribute('fill',c);
        }
        if(styleData.lastData.o != o){
            elements[i].setAttribute('fill-opacity',o);
        }
    }
    styleData.lastData.c = c;
    styleData.lastData.o = o;
};

ShapeItemElement.prototype.renderStroke = function(styleData,num){
    var fillData = styleData.renderedData[num];
    var styleElem = styleData.style;
    if(!styleData.renderedFrames[num]){
        styleData.renderedFrames[num] = {
            c: fillData.color,
            o: fillData.opacity,
            w: fillData.width
        }
    }

    var c = styleData.renderedFrames[num].c;
    var o = styleData.renderedFrames[num].o;
    var w = styleData.renderedFrames[num].w;

    var elements = styleElem.elements;
    var i, len = elements.length;
    for(i=0;i<len;i+=1){
        if(styleData.lastData.c != c){
            elements[i].setAttribute('stroke',c);
        }
        if(styleData.lastData.o != o){
            elements[i].setAttribute('stroke-opacity',o);
        }
        if(styleData.lastData.o != o){
            elements[i].setAttribute('stroke-width',w);
        }
    }
    styleData.lastData.c = c;
    styleData.lastData.o = o;
    styleData.lastData.w = w;
};

ShapeItemElement.prototype.renderTransform = function(num){
    var animData = this.currentData;
    if(animData.tr){
        var tr = animData.tr;
        if(this.renderedFrame.tr.o !== tr.o){
            this.renderedFrame.tr.o = tr.o;
            this.shapeG.setAttribute('opacity',tr.o);
        }
        if(this.renderedFrame.tr.mt !== tr.mt){
            this.renderedFrame.tr.mt = tr.mt;
            this.shapeG.setAttribute('transform',tr.mt);
        }
        if(this.renderedFrame.tr.a[0] !== tr.a[0] || this.renderedFrame.tr.a[1] !== tr.a[1]){
            this.renderedFrame.tr.a[0] = tr.a[0];
            this.renderedFrame.tr.a[1] = tr.a[1];
            this.shape.setAttribute('transform', 'translate('+(-tr.a[0])+', '+(-tr.a[1])+')');
        }
    }
};

ShapeItemElement.prototype.adjustTrim = function(){
    var trimData = this.data.trim;
    var i, len = trimData.length;
    for(i=0;i<len;i+=1){
        if(trimData[i].o){
            trimData[i].o -= 90;
        }
    }
};

ShapeItemElement.prototype.renderTrim = function(num){
    var trimData = this.currentData.trim;
    if(this.pathLength === 0){
        this.shape.setAttribute('stroke-opacity',0);
    }else{
        if(this.renderedFrame.trim.e == trimData.e && this.renderedFrame.trim.s == trimData.s && this.renderedFrame.trim.o == trimData.o){
            //return;
        }
        this.renderedFrame.trim.e = trimData.e;
        this.renderedFrame.trim.s = trimData.s;
        this.renderedFrame.trim.o = trimData.o;

        var dashLength = this.pathLength*(trimData.e - trimData.s)/100;
        var dashSpace = this.pathLength - dashLength;
        var dashOffset = this.pathLength*(trimData.s)/100+(this.pathLength*(trimData.o))/360;
        var strokeDashArray = dashLength+" , "+dashSpace;
        this.shape.setAttribute('stroke-dasharray',strokeDashArray);
        this.shape.setAttribute('stroke-dashoffset',this.pathLength - dashOffset);
        if(trimData.e == trimData.s){
            this.shape.setAttribute('stroke-opacity',0);
        }else{
            if(this.currentData.stroke){
                if(this.data.strokeEnabled!==false){
                    this.shape.setAttribute('stroke-opacity',this.currentData.stroke.opacity);
                }else{
                    this.shape.setAttribute('stroke-opacity',0);
                }
            }
        }
    }
};