player/js/elements/domElements/DBaseElement.js

var DBaseElement = function (data, animationItem){
    this.animationItem = animationItem;
    this.data = data;
    this.transformChanged = false;
    this.forceRender = false;
    this.init();
};

DBaseElement.prototype.init = function(){
    this.createElements();
    if(this.data.hasMask){
        this.addMasks(this.data);
    }
    if(this.data.eff){
        this.createEffectsManager(this.data);
    }
};

DBaseElement.prototype.createElements = function(){
    this.layerElement = document.createElementNS(svgNS,'svg');
    this.layerElement.style.position = 'absolute';
    this.layerElement.style.top = 0;
    this.layerElement.style.left = 0;
    this.layerElement.style.backfaceVisibility  = this.layerElement.style.webkitBackfaceVisibility = 'hidden';
    this.layerElement.style.transformOrigin = "0 0";
    this.layerElement.setAttribute('id',this.data.layerName);


    this.maskingGroup = this.layerElement;

    this.maskedElement = this.layerElement;
    this.mainElement = this.layerElement;

};

DBaseElement.prototype.prepareFrame = function(num){
    this.currentAnimData = this.data.renderedData[num].an;
    if(this.data.renderedFrame.tr !== this.currentAnimData.matrixValue){
        this.transformChanged = true;
        this.data.renderedFrame.tr = this.currentAnimData.matrixValue;
    }else{
        this.transformChanged = false;
    }
};

DBaseElement.prototype.renderFrame = function(num){
    if(this.data.inPoint - this.data.startTime <= num && this.data.outPoint - this.data.startTime > num)
    {
        if(this.isVisible !== true){
            this.isVisible = true;
            this.forceRender = true;
            this.mainElement.style.opacity=1;
        }
    }else{
        if(this.isVisible !== false){
            this.isVisible = false;
            this.mainElement.style.opacity=0;
        }
    }

    if(this.data.eff){
        this.effectsManager.renderFrame(num,this.currentAnimData.mk);
    }

    if(num === this.data.renderedFrame.num){
        return this.isVisible;
    }

    if(this.data.hasMask){
        this.maskManager.renderFrame(num);
    }

    if(this.data.renderedFrame.o !== this.currentAnimData.tr.o){
        this.data.renderedFrame.o = this.currentAnimData.tr.o;
        if(this.isVisible){
            this.layerElement.style.opacity = this.currentAnimData.tr.o;
        }
    }

    var transformValue = '';


    if(this.data.parents){
        var changedFlag = false;
        var i = 0, len = this.data.parents.length, parentAnimData;
        if(!this.transformChanged){
            while(i<len){
                if(this.data.parents[i].elem.element.transformChanged){
                    changedFlag = true;
                    break;
                }
                i+=1;
            }
        }else{
            changedFlag = true;
        }
        if(changedFlag){
            for(i=len-1;i>=0;i-=1){
                parentAnimData = this.data.parents[i].elem.element.currentAnimData;
                transformValue += parentAnimData.matrixValue + ' ';
            }
            transformValue += this.currentAnimData.matrixValue;
            if(this.isVisible){
                this.layerElement.style.transform = transformValue;
            }
            this.fullTransform = transformValue;
        }
    }else if(this.transformChanged){
        transformValue += this.currentAnimData.matrixValue;
        if(this.isVisible){
            this.layerElement.style.transform = transformValue;
        }
        this.fullTransform = transformValue;
    }
    if(this.forceRender){
        this.forceRender = false;
        this.layerElement.style.opacity = this.currentAnimData.tr.o;
        this.layerElement.style.transform = this.fullTransform;
    }


    return this.isVisible;
};

DBaseElement.prototype.getDomElement = function(){
    return this.layerElement;
};
DBaseElement.prototype.setMainElement = function(value){
    this.mainElement = value;
};
DBaseElement.prototype.getMaskManager = function(){
    return this.maskManager;
};
DBaseElement.prototype.addMasks = function(data){
    var params = {
        'data':{value:data},
        'element':{value:this}
    };
    this.maskManager = createElement(MaskElement,null,params);
};
DBaseElement.prototype.createEffectsManager = function(data){
    var params = {
        'effects':{value:data.eff},
        'element':{value:this}
    };
    this.effectsManager = createElement(EffectsManager,null,params);
};
DBaseElement.prototype.getType = function(){
    return this.type;
};

DBaseElement.prototype.getLayerSize = function(){
    if(this.data.type == 'TextLayer'){
        return {w:this.data.textData.width,h:this.data.textData.height};
    }else{
        return {w:this.data.width,h:this.data.height};
    }
};