@lumen5/lottie-web 5.14.0

package/player/js/renderers/CanvasRendererBase.js

@@ -0,0 +1,318 @@
+import {
+  extendPrototype,
+} from '../utils/functionExtensions';
+import {
+  createSizedArray,
+} from '../utils/helpers/arrays';
+import createTag from '../utils/helpers/html_elements';
+import SVGRenderer from './SVGRenderer';
+import BaseRenderer from './BaseRenderer';
+import CVShapeElement from '../elements/canvasElements/CVShapeElement';
+import CVTextElement from '../elements/canvasElements/CVTextElement';
+import CVImageElement from '../elements/canvasElements/CVImageElement';
+import CVSolidElement from '../elements/canvasElements/CVSolidElement';
+
+function CanvasRendererBase() {
+}
+extendPrototype([BaseRenderer], CanvasRendererBase);
+
+CanvasRendererBase.prototype.createShape = function (data) {
+  return new CVShapeElement(data, this.globalData, this);
+};
+
+CanvasRendererBase.prototype.createText = function (data) {
+  return new CVTextElement(data, this.globalData, this);
+};
+
+CanvasRendererBase.prototype.createImage = function (data) {
+  return new CVImageElement(data, this.globalData, this);
+};
+
+CanvasRendererBase.prototype.createSolid = function (data) {
+  return new CVSolidElement(data, this.globalData, this);
+};
+
+CanvasRendererBase.prototype.createNull = SVGRenderer.prototype.createNull;
+
+CanvasRendererBase.prototype.ctxTransform = function (props) {
+  if (props[0] === 1 && props[1] === 0 && props[4] === 0 && props[5] === 1 && props[12] === 0 && props[13] === 0) {
+    return;
+  }
+  this.canvasContext.transform(props[0], props[1], props[4], props[5], props[12], props[13]);
+};
+
+CanvasRendererBase.prototype.ctxOpacity = function (op) {
+  this.canvasContext.globalAlpha *= op < 0 ? 0 : op;
+};
+
+CanvasRendererBase.prototype.ctxFillStyle = function (value) {
+  this.canvasContext.fillStyle = value;
+};
+
+CanvasRendererBase.prototype.ctxStrokeStyle = function (value) {
+  this.canvasContext.strokeStyle = value;
+};
+
+CanvasRendererBase.prototype.ctxLineWidth = function (value) {
+  this.canvasContext.lineWidth = value;
+};
+
+CanvasRendererBase.prototype.ctxLineCap = function (value) {
+  this.canvasContext.lineCap = value;
+};
+
+CanvasRendererBase.prototype.ctxLineJoin = function (value) {
+  this.canvasContext.lineJoin = value;
+};
+
+CanvasRendererBase.prototype.ctxMiterLimit = function (value) {
+  this.canvasContext.miterLimit = value;
+};
+
+CanvasRendererBase.prototype.ctxFill = function (rule) {
+  this.canvasContext.fill(rule);
+};
+
+CanvasRendererBase.prototype.ctxFillRect = function (x, y, w, h) {
+  this.canvasContext.fillRect(x, y, w, h);
+};
+
+CanvasRendererBase.prototype.ctxStroke = function () {
+  this.canvasContext.stroke();
+};
+
+CanvasRendererBase.prototype.reset = function () {
+  if (!this.renderConfig.clearCanvas) {
+    this.canvasContext.restore();
+    return;
+  }
+  this.contextData.reset();
+};
+
+CanvasRendererBase.prototype.save = function () {
+  this.canvasContext.save();
+};
+
+CanvasRendererBase.prototype.restore = function (actionFlag) {
+  if (!this.renderConfig.clearCanvas) {
+    this.canvasContext.restore();
+    return;
+  }
+  if (actionFlag) {
+    this.globalData.blendMode = 'source-over';
+  }
+  this.contextData.restore(actionFlag);
+};
+
+CanvasRendererBase.prototype.configAnimation = function (animData) {
+  if (this.animationItem.wrapper) {
+    this.animationItem.container = createTag('canvas');
+    var containerStyle = this.animationItem.container.style;
+    containerStyle.width = '100%';
+    containerStyle.height = '100%';
+    var origin = '0px 0px 0px';
+    containerStyle.transformOrigin = origin;
+    containerStyle.mozTransformOrigin = origin;
+    containerStyle.webkitTransformOrigin = origin;
+    containerStyle['-webkit-transform'] = origin;
+    containerStyle.contentVisibility = this.renderConfig.contentVisibility;
+    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.contextData.setContext(this.canvasContext);
+  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();
+};
+
+CanvasRendererBase.prototype.updateContainerSize = function (width, height) {
+  this.reset();
+  var elementWidth;
+  var elementHeight;
+  if (width) {
+    elementWidth = width;
+    elementHeight = height;
+    this.canvasContext.canvas.width = elementWidth;
+    this.canvasContext.canvas.height = elementHeight;
+  } else {
+    if (this.animationItem.wrapper && this.animationItem.container) {
+      elementWidth = this.animationItem.wrapper.offsetWidth;
+      elementHeight = this.animationItem.wrapper.offsetHeight;
+    } else {
+      elementWidth = this.canvasContext.canvas.width;
+      elementHeight = this.canvasContext.canvas.height;
+    }
+    this.canvasContext.canvas.width = elementWidth * this.renderConfig.dpr;
+    this.canvasContext.canvas.height = elementHeight * this.renderConfig.dpr;
+  }
+
+  var elementRel;
+  var 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);
+};
+
+CanvasRendererBase.prototype.destroy = function () {
+  if (this.renderConfig.clearCanvas && this.animationItem.wrapper) {
+    this.animationItem.wrapper.innerText = '';
+  }
+  var i;
+  var 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[i].destroy();
+    }
+  }
+  this.elements.length = 0;
+  this.globalData.canvasContext = null;
+  this.animationItem.container = null;
+  this.destroyed = true;
+};
+
+CanvasRendererBase.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;
+  var len = this.layers.length;
+  if (!this.completeLayers) {
+    this.checkLayers(num);
+  }
+
+  for (i = len - 1; i >= 0; i -= 1) {
+    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();
+    }
+  }
+  this.renderConfig.bufferManager.releaseAll();
+};
+
+CanvasRendererBase.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);
+    } */
+};
+
+CanvasRendererBase.prototype.checkPendingElements = function () {
+  while (this.pendingElements.length) {
+    var element = this.pendingElements.pop();
+    element.checkParenting();
+  }
+};
+
+CanvasRendererBase.prototype.hide = function () {
+  this.animationItem.container.style.display = 'none';
+};
+
+CanvasRendererBase.prototype.show = function () {
+  this.animationItem.container.style.display = 'block';
+};
+
+export default CanvasRendererBase;

package/player/js/renderers/CanvasRendererWorkerOverride.js

@@ -0,0 +1,54 @@
+import {
+  createSizedArray,
+} from '../utils/helpers/arrays';
+import CanvasRenderer from './CanvasRenderer';
+import createTag from '../utils/helpers/html_elements';
+
+CanvasRenderer.prototype.configAnimation = function (animData) {
+  if (this.animationItem.wrapper) {
+    this.animationItem.container = createTag('canvas');
+    var containerStyle = this.animationItem.container.style;
+    containerStyle.width = '100%';
+    containerStyle.height = '100%';
+    var origin = '0px 0px 0px';
+    containerStyle.transformOrigin = origin;
+    containerStyle.mozTransformOrigin = origin;
+    containerStyle.webkitTransformOrigin = origin;
+    containerStyle['-webkit-transform'] = origin;
+    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);
+    }
+  } 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.globalData.frameId = 0;
+  this.globalData.frameRate = animData.fr;
+  this.globalData.nm = animData.nm;
+  this.globalData.compSize = {
+    w: animData.w,
+    h: animData.h,
+  };
+  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();
+};
+
+// TODO: review export
+export default CanvasRenderer;

package/player/js/renderers/HybridRenderer.js

@@ -0,0 +1,47 @@
+import {
+  extendPrototype,
+} from '../utils/functionExtensions';
+import HybridRendererBase from './HybridRendererBase';
+import HCompElement from '../elements/htmlElements/HCompElement';
+import SVGCompElement from '../elements/svgElements/SVGCompElement';
+
+function HybridRenderer(animationItem, config) {
+  this.animationItem = animationItem;
+  this.layers = null;
+  this.renderedFrame = -1;
+  this.renderConfig = {
+    className: (config && config.className) || '',
+    imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
+    hideOnTransparent: !(config && config.hideOnTransparent === false),
+    filterSize: {
+      width: (config && config.filterSize && config.filterSize.width) || '400%',
+      height: (config && config.filterSize && config.filterSize.height) || '400%',
+      x: (config && config.filterSize && config.filterSize.x) || '-100%',
+      y: (config && config.filterSize && config.filterSize.y) || '-100%',
+    },
+    runExpressions: !config || config.runExpressions === undefined || config.runExpressions,
+  };
+  this.globalData = {
+    _mdf: false,
+    frameNum: -1,
+    renderConfig: this.renderConfig,
+  };
+  this.pendingElements = [];
+  this.elements = [];
+  this.threeDElements = [];
+  this.destroyed = false;
+  this.camera = null;
+  this.supports3d = true;
+  this.rendererType = 'html';
+}
+
+extendPrototype([HybridRendererBase], HybridRenderer);
+
+HybridRenderer.prototype.createComp = function (data) {
+  if (!this.supports3d) {
+    return new SVGCompElement(data, this.globalData, this);
+  }
+  return new HCompElement(data, this.globalData, this);
+};
+
+export default HybridRenderer;