@belvo-finance/belvo-vue-components
Version:
## Project setup ``` npm install ```
332 lines (306 loc) • 14 kB
JavaScript
function CanvasRenderer(animationItem, config){
this.animationItem = animationItem;
this.renderConfig = {
clearCanvas: (config && config.clearCanvas !== undefined) ? config.clearCanvas : true,
context: (config && config.context) || null,
progressiveLoad: (config && config.progressiveLoad) || false,
preserveAspectRatio: (config && config.preserveAspectRatio) || 'xMidYMid meet',
imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
className: (config && config.className) || '',
id: (config && config.id) || '',
};
this.renderConfig.dpr = (config && config.dpr) || 1;
if (this.animationItem.wrapper) {
this.renderConfig.dpr = (config && config.dpr) || window.devicePixelRatio || 1;
}
this.renderedFrame = -1;
this.globalData = {
frameNum: -1,
_mdf: false,
renderConfig: this.renderConfig,
currentGlobalAlpha: -1
};
this.contextData = new CVContextData();
this.elements = [];
this.pendingElements = [];
this.transformMat = new Matrix();
this.completeLayers = false;
this.rendererType = 'canvas';
}
extendPrototype([BaseRenderer],CanvasRenderer);
CanvasRenderer.prototype.createShape = function (data) {
return new CVShapeElement(data, this.globalData, this);
};
CanvasRenderer.prototype.createText = function (data) {
return new CVTextElement(data, this.globalData, this);
};
CanvasRenderer.prototype.createImage = function (data) {
return new CVImageElement(data, this.globalData, this);
};
CanvasRenderer.prototype.createComp = function (data) {
return new CVCompElement(data, this.globalData, this);
};
CanvasRenderer.prototype.createSolid = function (data) {
return new CVSolidElement(data, this.globalData, this);
};
CanvasRenderer.prototype.createNull = SVGRenderer.prototype.createNull;
CanvasRenderer.prototype.ctxTransform = function(props){
if(props[0] === 1 && props[1] === 0 && props[4] === 0 && props[5] === 1 && props[12] === 0 && props[13] === 0){
return;
}
if(!this.renderConfig.clearCanvas){
this.canvasContext.transform(props[0],props[1],props[4],props[5],props[12],props[13]);
return;
}
this.transformMat.cloneFromProps(props);
var cProps = this.contextData.cTr.props;
this.transformMat.transform(cProps[0],cProps[1],cProps[2],cProps[3],cProps[4],cProps[5],cProps[6],cProps[7],cProps[8],cProps[9],cProps[10],cProps[11],cProps[12],cProps[13],cProps[14],cProps[15]);
//this.contextData.cTr.transform(props[0],props[1],props[2],props[3],props[4],props[5],props[6],props[7],props[8],props[9],props[10],props[11],props[12],props[13],props[14],props[15]);
this.contextData.cTr.cloneFromProps(this.transformMat.props);
var trProps = this.contextData.cTr.props;
this.canvasContext.setTransform(trProps[0],trProps[1],trProps[4],trProps[5],trProps[12],trProps[13]);
};
CanvasRenderer.prototype.ctxOpacity = function(op){
/*if(op === 1){
return;
}*/
if(!this.renderConfig.clearCanvas){
this.canvasContext.globalAlpha *= op < 0 ? 0 : op;
this.globalData.currentGlobalAlpha = this.contextData.cO;
return;
}
this.contextData.cO *= op < 0 ? 0 : op;
if(this.globalData.currentGlobalAlpha !== this.contextData.cO) {
this.canvasContext.globalAlpha = this.contextData.cO;
this.globalData.currentGlobalAlpha = this.contextData.cO;
}
};
CanvasRenderer.prototype.reset = function(){
if(!this.renderConfig.clearCanvas){
this.canvasContext.restore();
return;
}
this.contextData.reset();
};
CanvasRenderer.prototype.save = function(actionFlag){
if(!this.renderConfig.clearCanvas){
this.canvasContext.save();
return;
}
if(actionFlag){
this.canvasContext.save();
}
var props = this.contextData.cTr.props;
if(this.contextData._length <= this.contextData.cArrPos) {
this.contextData.duplicate();
}
var i, arr = this.contextData.saved[this.contextData.cArrPos];
for (i = 0; i < 16; i += 1) {
arr[i] = props[i];
}
this.contextData.savedOp[this.contextData.cArrPos] = this.contextData.cO;
this.contextData.cArrPos += 1;
};
CanvasRenderer.prototype.restore = function(actionFlag){
if(!this.renderConfig.clearCanvas){
this.canvasContext.restore();
return;
}
if(actionFlag){
this.canvasContext.restore();
this.globalData.blendMode = 'source-over';
}
this.contextData.cArrPos -= 1;
var popped = this.contextData.saved[this.contextData.cArrPos];
var i,arr = this.contextData.cTr.props;
for(i=0;i<16;i+=1){
arr[i] = popped[i];
}
this.canvasContext.setTransform(popped[0],popped[1],popped[4],popped[5],popped[12],popped[13]);
popped = this.contextData.savedOp[this.contextData.cArrPos];
this.contextData.cO = popped;
if(this.globalData.currentGlobalAlpha !== popped) {
this.canvasContext.globalAlpha = popped;
this.globalData.currentGlobalAlpha = popped;
}
};
CanvasRenderer.prototype.configAnimation = function(animData){
if(this.animationItem.wrapper){
this.animationItem.container = createTag('canvas');
this.animationItem.container.style.width = '100%';
this.animationItem.container.style.height = '100%';
//this.animationItem.container.style.transform = 'translate3d(0,0,0)';
//this.animationItem.container.style.webkitTransform = 'translate3d(0,0,0)';
this.animationItem.container.style.transformOrigin = this.animationItem.container.style.mozTransformOrigin = this.animationItem.container.style.webkitTransformOrigin = this.animationItem.container.style['-webkit-transform'] = "0px 0px 0px";
this.animationItem.wrapper.appendChild(this.animationItem.container);
this.canvasContext = this.animationItem.container.getContext('2d');
if(this.renderConfig.className) {
this.animationItem.container.setAttribute('class', this.renderConfig.className);
}
if(this.renderConfig.id) {
this.animationItem.container.setAttribute('id', this.renderConfig.id);
}
}else{
this.canvasContext = this.renderConfig.context;
}
this.data = animData;
this.layers = animData.layers;
this.transformCanvas = {
w: animData.w,
h:animData.h,
sx:0,
sy:0,
tx:0,
ty:0
};
this.setupGlobalData(animData, document.body);
this.globalData.canvasContext = this.canvasContext;
this.globalData.renderer = this;
this.globalData.isDashed = false;
this.globalData.progressiveLoad = this.renderConfig.progressiveLoad;
this.globalData.transformCanvas = this.transformCanvas;
this.elements = createSizedArray(animData.layers.length);
this.updateContainerSize();
};
CanvasRenderer.prototype.updateContainerSize = function () {
this.reset();
var elementWidth,elementHeight;
if(this.animationItem.wrapper && this.animationItem.container){
elementWidth = this.animationItem.wrapper.offsetWidth;
elementHeight = this.animationItem.wrapper.offsetHeight;
this.animationItem.container.setAttribute('width',elementWidth * this.renderConfig.dpr );
this.animationItem.container.setAttribute('height',elementHeight * this.renderConfig.dpr);
}else{
elementWidth = this.canvasContext.canvas.width * this.renderConfig.dpr;
elementHeight = this.canvasContext.canvas.height * this.renderConfig.dpr;
}
var elementRel,animationRel;
if(this.renderConfig.preserveAspectRatio.indexOf('meet') !== -1 || this.renderConfig.preserveAspectRatio.indexOf('slice') !== -1){
var par = this.renderConfig.preserveAspectRatio.split(' ');
var fillType = par[1] || 'meet';
var pos = par[0] || 'xMidYMid';
var xPos = pos.substr(0,4);
var yPos = pos.substr(4);
elementRel = elementWidth/elementHeight;
animationRel = this.transformCanvas.w/this.transformCanvas.h;
if(animationRel>elementRel && fillType === 'meet' || animationRel<elementRel && fillType === 'slice'){
this.transformCanvas.sx = elementWidth/(this.transformCanvas.w/this.renderConfig.dpr);
this.transformCanvas.sy = elementWidth/(this.transformCanvas.w/this.renderConfig.dpr);
}else{
this.transformCanvas.sx = elementHeight/(this.transformCanvas.h / this.renderConfig.dpr);
this.transformCanvas.sy = elementHeight/(this.transformCanvas.h / this.renderConfig.dpr);
}
if(xPos === 'xMid' && ((animationRel<elementRel && fillType==='meet') || (animationRel>elementRel && fillType === 'slice'))){
this.transformCanvas.tx = (elementWidth-this.transformCanvas.w*(elementHeight/this.transformCanvas.h))/2*this.renderConfig.dpr;
} else if(xPos === 'xMax' && ((animationRel<elementRel && fillType==='meet') || (animationRel>elementRel && fillType === 'slice'))){
this.transformCanvas.tx = (elementWidth-this.transformCanvas.w*(elementHeight/this.transformCanvas.h))*this.renderConfig.dpr;
} else {
this.transformCanvas.tx = 0;
}
if(yPos === 'YMid' && ((animationRel>elementRel && fillType==='meet') || (animationRel<elementRel && fillType === 'slice'))){
this.transformCanvas.ty = ((elementHeight-this.transformCanvas.h*(elementWidth/this.transformCanvas.w))/2)*this.renderConfig.dpr;
} else if(yPos === 'YMax' && ((animationRel>elementRel && fillType==='meet') || (animationRel<elementRel && fillType === 'slice'))){
this.transformCanvas.ty = ((elementHeight-this.transformCanvas.h*(elementWidth/this.transformCanvas.w)))*this.renderConfig.dpr;
} else {
this.transformCanvas.ty = 0;
}
}else if(this.renderConfig.preserveAspectRatio == 'none'){
this.transformCanvas.sx = elementWidth/(this.transformCanvas.w/this.renderConfig.dpr);
this.transformCanvas.sy = elementHeight/(this.transformCanvas.h/this.renderConfig.dpr);
this.transformCanvas.tx = 0;
this.transformCanvas.ty = 0;
}else{
this.transformCanvas.sx = this.renderConfig.dpr;
this.transformCanvas.sy = this.renderConfig.dpr;
this.transformCanvas.tx = 0;
this.transformCanvas.ty = 0;
}
this.transformCanvas.props = [this.transformCanvas.sx,0,0,0,0,this.transformCanvas.sy,0,0,0,0,1,0,this.transformCanvas.tx,this.transformCanvas.ty,0,1];
/*var i, len = this.elements.length;
for(i=0;i<len;i+=1){
if(this.elements[i] && this.elements[i].data.ty === 0){
this.elements[i].resize(this.globalData.transformCanvas);
}
}*/
this.ctxTransform(this.transformCanvas.props);
this.canvasContext.beginPath();
this.canvasContext.rect(0,0,this.transformCanvas.w,this.transformCanvas.h);
this.canvasContext.closePath();
this.canvasContext.clip();
this.renderFrame(this.renderedFrame, true);
};
CanvasRenderer.prototype.destroy = function () {
if(this.renderConfig.clearCanvas) {
this.animationItem.wrapper.innerHTML = '';
}
var i, len = this.layers ? this.layers.length : 0;
for (i = len - 1; i >= 0; i-=1) {
if(this.elements[i]) {
this.elements[i].destroy();
}
}
this.elements.length = 0;
this.globalData.canvasContext = null;
this.animationItem.container = null;
this.destroyed = true;
};
CanvasRenderer.prototype.renderFrame = function(num, forceRender){
if((this.renderedFrame === num && this.renderConfig.clearCanvas === true && !forceRender) || this.destroyed || num === -1){
return;
}
this.renderedFrame = num;
this.globalData.frameNum = num - this.animationItem._isFirstFrame;
this.globalData.frameId += 1;
this.globalData._mdf = !this.renderConfig.clearCanvas || forceRender;
this.globalData.projectInterface.currentFrame = num;
// console.log('--------');
// console.log('NEW: ',num);
var i, len = this.layers.length;
if(!this.completeLayers){
this.checkLayers(num);
}
for (i = 0; i < len; i++) {
if(this.completeLayers || this.elements[i]){
this.elements[i].prepareFrame(num - this.layers[i].st);
}
}
if(this.globalData._mdf) {
if(this.renderConfig.clearCanvas === true){
this.canvasContext.clearRect(0, 0, this.transformCanvas.w, this.transformCanvas.h);
}else{
this.save();
}
for (i = len - 1; i >= 0; i-=1) {
if(this.completeLayers || this.elements[i]){
this.elements[i].renderFrame();
}
}
if(this.renderConfig.clearCanvas !== true){
this.restore();
}
}
};
CanvasRenderer.prototype.buildItem = function(pos){
var elements = this.elements;
if(elements[pos] || this.layers[pos].ty == 99){
return;
}
var element = this.createItem(this.layers[pos], this,this.globalData);
elements[pos] = element;
element.initExpressions();
/*if(this.layers[pos].ty === 0){
element.resize(this.globalData.transformCanvas);
}*/
};
CanvasRenderer.prototype.checkPendingElements = function(){
while(this.pendingElements.length){
var element = this.pendingElements.pop();
element.checkParenting();
}
};
CanvasRenderer.prototype.hide = function(){
this.animationItem.container.style.display = 'none';
};
CanvasRenderer.prototype.show = function(){
this.animationItem.container.style.display = 'block';
};