@lumen5/lottie-web 5.14.0

package/player/js/elements/canvasElements/CVTextElement.js

@@ -0,0 +1,244 @@
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import {
+  createSizedArray,
+} from '../../utils/helpers/arrays';
+import createTag from '../../utils/helpers/html_elements';
+import RenderableElement from '../helpers/RenderableElement';
+import BaseElement from '../BaseElement';
+import TransformElement from '../helpers/TransformElement';
+import HierarchyElement from '../helpers/HierarchyElement';
+import FrameElement from '../helpers/FrameElement';
+import ITextElement from '../TextElement';
+import CVBaseElement from './CVBaseElement';
+
+function CVTextElement(data, globalData, comp) {
+  this.textSpans = [];
+  this.yOffset = 0;
+  this.fillColorAnim = false;
+  this.strokeColorAnim = false;
+  this.strokeWidthAnim = false;
+  this.stroke = false;
+  this.fill = false;
+  this.justifyOffset = 0;
+  this.currentRender = null;
+  this.renderType = 'canvas';
+  this.values = {
+    fill: 'rgba(0,0,0,0)',
+    stroke: 'rgba(0,0,0,0)',
+    sWidth: 0,
+    fValue: '',
+  };
+  this.initElement(data, globalData, comp);
+}
+extendPrototype([BaseElement, TransformElement, CVBaseElement, HierarchyElement, FrameElement, RenderableElement, ITextElement], CVTextElement);
+
+CVTextElement.prototype.tHelper = createTag('canvas').getContext('2d');
+
+CVTextElement.prototype.buildNewText = function () {
+  var documentData = this.textProperty.currentData;
+  this.renderedLetters = createSizedArray(documentData.l ? documentData.l.length : 0);
+
+  var hasFill = false;
+  if (documentData.fc) {
+    hasFill = true;
+    this.values.fill = this.buildColor(documentData.fc);
+  } else {
+    this.values.fill = 'rgba(0,0,0,0)';
+  }
+  this.fill = hasFill;
+  var hasStroke = false;
+  if (documentData.sc) {
+    hasStroke = true;
+    this.values.stroke = this.buildColor(documentData.sc);
+    this.values.sWidth = documentData.sw;
+  }
+  var fontData = this.globalData.fontManager.getFontByName(documentData.f);
+  var i;
+  var len;
+  var letters = documentData.l;
+  var matrixHelper = this.mHelper;
+  this.stroke = hasStroke;
+  this.values.fValue = documentData.finalSize + 'px ' + this.globalData.fontManager.getFontByName(documentData.f).fFamily;
+  len = documentData.finalText.length;
+  // this.tHelper.font = this.values.fValue;
+  var charData;
+  var shapeData;
+  var k;
+  var kLen;
+  var shapes;
+  var j;
+  var jLen;
+  var pathNodes;
+  var commands;
+  var pathArr;
+  var singleShape = this.data.singleShape;
+  var trackingOffset = documentData.tr * 0.001 * documentData.finalSize;
+  var xPos = 0;
+  var yPos = 0;
+  var firstLine = true;
+  var cnt = 0;
+  for (i = 0; i < len; i += 1) {
+    charData = this.globalData.fontManager.getCharData(documentData.finalText[i], fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);
+    shapeData = (charData && charData.data) || {};
+    matrixHelper.reset();
+    if (singleShape && letters[i].n) {
+      xPos = -trackingOffset;
+      yPos += documentData.yOffset;
+      yPos += firstLine ? 1 : 0;
+      firstLine = false;
+    }
+    shapes = shapeData.shapes ? shapeData.shapes[0].it : [];
+    jLen = shapes.length;
+    matrixHelper.scale(documentData.finalSize / 100, documentData.finalSize / 100);
+    if (singleShape) {
+      this.applyTextPropertiesToMatrix(documentData, matrixHelper, letters[i].line, xPos, yPos);
+    }
+    commands = createSizedArray(jLen - 1);
+    var commandsCounter = 0;
+    for (j = 0; j < jLen; j += 1) {
+      if (shapes[j].ty === 'sh') {
+        kLen = shapes[j].ks.k.i.length;
+        pathNodes = shapes[j].ks.k;
+        pathArr = [];
+        for (k = 1; k < kLen; k += 1) {
+          if (k === 1) {
+            pathArr.push(matrixHelper.applyToX(pathNodes.v[0][0], pathNodes.v[0][1], 0), matrixHelper.applyToY(pathNodes.v[0][0], pathNodes.v[0][1], 0));
+          }
+          pathArr.push(matrixHelper.applyToX(pathNodes.o[k - 1][0], pathNodes.o[k - 1][1], 0), matrixHelper.applyToY(pathNodes.o[k - 1][0], pathNodes.o[k - 1][1], 0), matrixHelper.applyToX(pathNodes.i[k][0], pathNodes.i[k][1], 0), matrixHelper.applyToY(pathNodes.i[k][0], pathNodes.i[k][1], 0), matrixHelper.applyToX(pathNodes.v[k][0], pathNodes.v[k][1], 0), matrixHelper.applyToY(pathNodes.v[k][0], pathNodes.v[k][1], 0));
+        }
+        pathArr.push(matrixHelper.applyToX(pathNodes.o[k - 1][0], pathNodes.o[k - 1][1], 0), matrixHelper.applyToY(pathNodes.o[k - 1][0], pathNodes.o[k - 1][1], 0), matrixHelper.applyToX(pathNodes.i[0][0], pathNodes.i[0][1], 0), matrixHelper.applyToY(pathNodes.i[0][0], pathNodes.i[0][1], 0), matrixHelper.applyToX(pathNodes.v[0][0], pathNodes.v[0][1], 0), matrixHelper.applyToY(pathNodes.v[0][0], pathNodes.v[0][1], 0));
+        commands[commandsCounter] = pathArr;
+        commandsCounter += 1;
+      }
+    }
+    if (singleShape) {
+      xPos += letters[i].l;
+      xPos += trackingOffset;
+    }
+    if (this.textSpans[cnt]) {
+      this.textSpans[cnt].elem = commands;
+    } else {
+      this.textSpans[cnt] = { elem: commands };
+    }
+    cnt += 1;
+  }
+};
+
+CVTextElement.prototype.renderInnerContent = function () {
+  this.validateText();
+  var ctx = this.canvasContext;
+  ctx.font = this.values.fValue;
+  this.globalData.renderer.ctxLineCap('butt');
+  // ctx.lineCap = 'butt';
+  this.globalData.renderer.ctxLineJoin('miter');
+  // ctx.lineJoin = 'miter';
+  this.globalData.renderer.ctxMiterLimit(4);
+  // ctx.miterLimit = 4;
+
+  if (!this.data.singleShape) {
+    this.textAnimator.getMeasures(this.textProperty.currentData, this.lettersChangedFlag);
+  }
+
+  var i;
+  var len;
+  var j;
+  var jLen;
+  var k;
+  var kLen;
+  var renderedLetters = this.textAnimator.renderedLetters;
+
+  var letters = this.textProperty.currentData.l;
+
+  len = letters.length;
+  var renderedLetter;
+  var lastFill = null;
+  var lastStroke = null;
+  var lastStrokeW = null;
+  var commands;
+  var pathArr;
+  var renderer = this.globalData.renderer;
+  for (i = 0; i < len; i += 1) {
+    if (!letters[i].n) {
+      renderedLetter = renderedLetters[i];
+      if (renderedLetter) {
+        renderer.save();
+        renderer.ctxTransform(renderedLetter.p);
+        renderer.ctxOpacity(renderedLetter.o);
+      }
+      if (this.fill) {
+        if (renderedLetter && renderedLetter.fc) {
+          if (lastFill !== renderedLetter.fc) {
+            renderer.ctxFillStyle(renderedLetter.fc);
+            lastFill = renderedLetter.fc;
+            // ctx.fillStyle = renderedLetter.fc;
+          }
+        } else if (lastFill !== this.values.fill) {
+          lastFill = this.values.fill;
+          renderer.ctxFillStyle(this.values.fill);
+          // ctx.fillStyle = this.values.fill;
+        }
+        commands = this.textSpans[i].elem;
+        jLen = commands.length;
+        this.globalData.canvasContext.beginPath();
+        for (j = 0; j < jLen; j += 1) {
+          pathArr = commands[j];
+          kLen = pathArr.length;
+          this.globalData.canvasContext.moveTo(pathArr[0], pathArr[1]);
+          for (k = 2; k < kLen; k += 6) {
+            this.globalData.canvasContext.bezierCurveTo(pathArr[k], pathArr[k + 1], pathArr[k + 2], pathArr[k + 3], pathArr[k + 4], pathArr[k + 5]);
+          }
+        }
+        this.globalData.canvasContext.closePath();
+        renderer.ctxFill();
+        // this.globalData.canvasContext.fill();
+        /// ctx.fillText(this.textSpans[i].val,0,0);
+      }
+      if (this.stroke) {
+        if (renderedLetter && renderedLetter.sw) {
+          if (lastStrokeW !== renderedLetter.sw) {
+            lastStrokeW = renderedLetter.sw;
+            renderer.ctxLineWidth(renderedLetter.sw);
+            // ctx.lineWidth = renderedLetter.sw;
+          }
+        } else if (lastStrokeW !== this.values.sWidth) {
+          lastStrokeW = this.values.sWidth;
+          renderer.ctxLineWidth(this.values.sWidth);
+          // ctx.lineWidth = this.values.sWidth;
+        }
+        if (renderedLetter && renderedLetter.sc) {
+          if (lastStroke !== renderedLetter.sc) {
+            lastStroke = renderedLetter.sc;
+            renderer.ctxStrokeStyle(renderedLetter.sc);
+            // ctx.strokeStyle = renderedLetter.sc;
+          }
+        } else if (lastStroke !== this.values.stroke) {
+          lastStroke = this.values.stroke;
+          renderer.ctxStrokeStyle(this.values.stroke);
+          // ctx.strokeStyle = this.values.stroke;
+        }
+        commands = this.textSpans[i].elem;
+        jLen = commands.length;
+        this.globalData.canvasContext.beginPath();
+        for (j = 0; j < jLen; j += 1) {
+          pathArr = commands[j];
+          kLen = pathArr.length;
+          this.globalData.canvasContext.moveTo(pathArr[0], pathArr[1]);
+          for (k = 2; k < kLen; k += 6) {
+            this.globalData.canvasContext.bezierCurveTo(pathArr[k], pathArr[k + 1], pathArr[k + 2], pathArr[k + 3], pathArr[k + 4], pathArr[k + 5]);
+          }
+        }
+        this.globalData.canvasContext.closePath();
+        renderer.ctxStroke();
+        // this.globalData.canvasContext.stroke();
+        /// ctx.strokeText(letters[i].val,0,0);
+      }
+      if (renderedLetter) {
+        this.globalData.renderer.restore();
+      }
+    }
+  }
+};
+
+export default CVTextElement;

package/player/js/elements/canvasElements/effects/CVGaussianBlurEffect.js

@@ -0,0 +1,29 @@
+function CVGaussianBlurEffect(effectElements, elem) {
+  this.filterManager = effectElements;
+  this.globalData = elem.globalData;
+  this.filterString = '';
+}
+
+CVGaussianBlurEffect.prototype.renderFrame = function () {
+  // Empirical value, matching AE's blur appearance.
+  var kBlurrinessToSigma = 0.3;
+  var canvasScale = this.globalData.transformCanvas.sx;
+  var sigma = this.filterManager.effectElements[0].p.v * kBlurrinessToSigma * canvasScale;
+
+  // Dimensions mapping:
+  //
+  //   1 -> horizontal & vertical
+  //   2 -> horizontal only
+  //   3 -> vertical only
+  //
+  // The Canvas API doesn't support separate X/Y blur like SVG,
+  // so we use the maximum sigma.
+  var dimensions = this.filterManager.effectElements[1].p.v;
+  var sigmaX = (dimensions == 3) ? 0 : sigma; // eslint-disable-line eqeqeq
+  var sigmaY = (dimensions == 2) ? 0 : sigma; // eslint-disable-line eqeqeq
+  var maxSigma = Math.max(sigmaX, sigmaY);
+
+  this.filterString = maxSigma > 0 ? 'blur(' + maxSigma + 'px)' : '';
+};
+
+export default CVGaussianBlurEffect;

package/player/js/elements/canvasElements/effects/CVTransformEffect.js

@@ -0,0 +1,9 @@
+import TransformEffect from '../../../effects/TransformEffect';
+import { extendPrototype } from '../../../utils/functionExtensions';
+
+function CVTransformEffect(effectsManager) {
+  this.init(effectsManager);
+}
+extendPrototype([TransformEffect], CVTransformEffect);
+
+export default CVTransformEffect;

package/player/js/elements/helpers/FrameElement.js

@@ -0,0 +1,54 @@
+/**
+ * @file
+ * Handles element's layer frame update.
+ * Checks layer in point and out point
+ *
+ */
+
+function FrameElement() {}
+
+FrameElement.prototype = {
+  /**
+     * @function
+     * Initializes frame related properties.
+     *
+     */
+  initFrame: function () {
+    // set to true when inpoint is rendered
+    this._isFirstFrame = false;
+    // list of animated properties
+    this.dynamicProperties = [];
+    // If layer has been modified in current tick this will be true
+    this._mdf = false;
+  },
+  /**
+     * @function
+     * Calculates all dynamic values
+     *
+     * @param {number} num
+     * current frame number in Layer's time
+     * @param {boolean} isVisible
+     * if layers is currently in range
+     *
+     */
+  prepareProperties: function (num, isVisible) {
+    var i;
+    var len = this.dynamicProperties.length;
+    for (i = 0; i < len; i += 1) {
+      if (isVisible || (this._isParent && this.dynamicProperties[i].propType === 'transform')) {
+        this.dynamicProperties[i].getValue();
+        if (this.dynamicProperties[i]._mdf) {
+          this.globalData._mdf = true;
+          this._mdf = true;
+        }
+      }
+    }
+  },
+  addDynamicProperty: function (prop) {
+    if (this.dynamicProperties.indexOf(prop) === -1) {
+      this.dynamicProperties.push(prop);
+    }
+  },
+};
+
+export default FrameElement;

package/player/js/elements/helpers/HierarchyElement.js

@@ -0,0 +1,52 @@
+/**
+ * @file
+ * Handles AE's layer parenting property.
+ *
+ */
+
+function HierarchyElement() {}
+
+HierarchyElement.prototype = {
+  /**
+     * @function
+     * Initializes hierarchy properties
+     *
+     */
+  initHierarchy: function () {
+    // element's parent list
+    this.hierarchy = [];
+    // if element is parent of another layer _isParent will be true
+    this._isParent = false;
+    this.checkParenting();
+  },
+  /**
+     * @function
+     * Sets layer's hierarchy.
+     * @param {array} hierarch
+     * layer's parent list
+     *
+     */
+  setHierarchy: function (hierarchy) {
+    this.hierarchy = hierarchy;
+  },
+  /**
+     * @function
+     * Sets layer as parent.
+     *
+     */
+  setAsParent: function () {
+    this._isParent = true;
+  },
+  /**
+     * @function
+     * Searches layer's parenting chain
+     *
+     */
+  checkParenting: function () {
+    if (this.data.parent !== undefined) {
+      this.comp.buildElementParenting(this, this.data.parent, []);
+    }
+  },
+};
+
+export default HierarchyElement;

package/player/js/elements/helpers/RenderableDOMElement.js

@@ -0,0 +1,72 @@
+import {
+  extendPrototype,
+  createProxyFunction,
+} from '../../utils/functionExtensions';
+import RenderableElement from './RenderableElement';
+
+function RenderableDOMElement() {}
+
+(function () {
+  var _prototype = {
+    initElement: function (data, globalData, comp) {
+      this.initFrame();
+      this.initBaseData(data, globalData, comp);
+      this.initTransform(data, globalData, comp);
+      this.initHierarchy();
+      this.initRenderable();
+      this.initRendererElement();
+      this.createContainerElements();
+      this.createRenderableComponents();
+      this.createContent();
+      this.hide();
+    },
+    hide: function () {
+      // console.log('HIDE', this);
+      if (!this.hidden && (!this.isInRange || this.isTransparent)) {
+        var elem = this.baseElement || this.layerElement;
+        elem.style.display = 'none';
+        this.hidden = true;
+      }
+    },
+    show: function () {
+      // console.log('SHOW', this);
+      if (this.isInRange && !this.isTransparent) {
+        if (!this.data.hd) {
+          var elem = this.baseElement || this.layerElement;
+          elem.style.display = 'block';
+        }
+        this.hidden = false;
+        this._isFirstFrame = true;
+      }
+    },
+    renderFrame: function () {
+      // If it is exported as hidden (data.hd === true) no need to render
+      // If it is not visible no need to render
+      if (this.data.hd || this.hidden) {
+        return;
+      }
+      this.renderTransform();
+      this.renderRenderable();
+      this.renderLocalTransform();
+      this.renderElement();
+      this.renderInnerContent();
+      if (this._isFirstFrame) {
+        this._isFirstFrame = false;
+      }
+    },
+    renderInnerContent: function () {},
+    prepareFrame: function (num) {
+      this._mdf = false;
+      this.prepareRenderableFrame(num);
+      this.prepareProperties(num, this.isInRange);
+      this.checkTransparency();
+    },
+    destroy: function () {
+      this.innerElem = null;
+      this.destroyBaseElement();
+    },
+  };
+  extendPrototype([RenderableElement, createProxyFunction(_prototype)], RenderableDOMElement);
+}());
+
+export default RenderableDOMElement;

package/player/js/elements/helpers/RenderableElement.js

@@ -0,0 +1,87 @@
+function RenderableElement() {
+
+}
+
+RenderableElement.prototype = {
+  initRenderable: function () {
+    // layer's visibility related to inpoint and outpoint. Rename isVisible to isInRange
+    this.isInRange = false;
+    // layer's display state
+    this.hidden = false;
+    // If layer's transparency equals 0, it can be hidden
+    this.isTransparent = false;
+    // list of animated components
+    this.renderableComponents = [];
+  },
+  addRenderableComponent: function (component) {
+    if (this.renderableComponents.indexOf(component) === -1) {
+      this.renderableComponents.push(component);
+    }
+  },
+  removeRenderableComponent: function (component) {
+    if (this.renderableComponents.indexOf(component) !== -1) {
+      this.renderableComponents.splice(this.renderableComponents.indexOf(component), 1);
+    }
+  },
+  prepareRenderableFrame: function (num) {
+    this.checkLayerLimits(num);
+  },
+  checkTransparency: function () {
+    if (this.finalTransform.mProp.o.v <= 0) {
+      if (!this.isTransparent && this.globalData.renderConfig.hideOnTransparent) {
+        this.isTransparent = true;
+        this.hide();
+      }
+    } else if (this.isTransparent) {
+      this.isTransparent = false;
+      this.show();
+    }
+  },
+  /**
+     * @function
+     * Initializes frame related properties.
+     *
+     * @param {number} num
+     * current frame number in Layer's time
+     *
+     */
+  checkLayerLimits: function (num) {
+    if (this.data.ip - this.data.st <= num && this.data.op - this.data.st > num) {
+      if (this.isInRange !== true) {
+        this.globalData._mdf = true;
+        this._mdf = true;
+        this.isInRange = true;
+        this.show();
+      }
+    } else if (this.isInRange !== false) {
+      this.globalData._mdf = true;
+      this.isInRange = false;
+      this.hide();
+    }
+  },
+  renderRenderable: function () {
+    var i;
+    var len = this.renderableComponents.length;
+    for (i = 0; i < len; i += 1) {
+      this.renderableComponents[i].renderFrame(this._isFirstFrame);
+    }
+    /* this.maskManager.renderFrame(this.finalTransform.mat);
+        this.renderableEffectsManager.renderFrame(this._isFirstFrame); */
+  },
+  sourceRectAtTime: function () {
+    return {
+      top: 0,
+      left: 0,
+      width: 100,
+      height: 100,
+    };
+  },
+  getLayerSize: function () {
+    if (this.data.ty === 5) {
+      return { w: this.data.textData.width, h: this.data.textData.height };
+    }
+    return { w: this.data.width, h: this.data.height };
+  },
+};
+
+export default RenderableElement;

package/player/js/elements/helpers/TransformElement.js

@@ -0,0 +1,140 @@
+import Matrix from '../../3rd_party/transformation-matrix';
+import TransformPropertyFactory from '../../utils/TransformProperty';
+import effectTypes from '../../utils/helpers/effectTypes';
+
+function TransformElement() {}
+
+TransformElement.prototype = {
+  initTransform: function () {
+    var mat = new Matrix();
+    this.finalTransform = {
+      mProp: this.data.ks ? TransformPropertyFactory.getTransformProperty(this, this.data.ks, this) : { o: 0 },
+      _matMdf: false,
+      _localMatMdf: false,
+      _opMdf: false,
+      mat: mat,
+      localMat: mat,
+      localOpacity: 1,
+    };
+    if (this.data.ao) {
+      this.finalTransform.mProp.autoOriented = true;
+    }
+
+    // TODO: check TYPE 11: Guided elements
+    if (this.data.ty !== 11) {
+      // this.createElements();
+    }
+  },
+  renderTransform: function () {
+    this.finalTransform._opMdf = this.finalTransform.mProp.o._mdf || this._isFirstFrame;
+    this.finalTransform._matMdf = this.finalTransform.mProp._mdf || this._isFirstFrame;
+
+    if (this.hierarchy) {
+      var mat;
+      var finalMat = this.finalTransform.mat;
+      var i = 0;
+      var len = this.hierarchy.length;
+      // Checking if any of the transformation matrices in the hierarchy chain has changed.
+      if (!this.finalTransform._matMdf) {
+        while (i < len) {
+          if (this.hierarchy[i].finalTransform.mProp._mdf) {
+            this.finalTransform._matMdf = true;
+            break;
+          }
+          i += 1;
+        }
+      }
+
+      if (this.finalTransform._matMdf) {
+        mat = this.finalTransform.mProp.v.props;
+        finalMat.cloneFromProps(mat);
+        for (i = 0; i < len; i += 1) {
+          finalMat.multiply(this.hierarchy[i].finalTransform.mProp.v);
+        }
+      }
+    }
+    if (!this.localTransforms || this.finalTransform._matMdf) {
+      this.finalTransform._localMatMdf = this.finalTransform._matMdf;
+    }
+    if (this.finalTransform._opMdf) {
+      this.finalTransform.localOpacity = this.finalTransform.mProp.o.v;
+    }
+  },
+  renderLocalTransform: function () {
+    if (this.localTransforms) {
+      var i = 0;
+      var len = this.localTransforms.length;
+      this.finalTransform._localMatMdf = this.finalTransform._matMdf;
+      if (!this.finalTransform._localMatMdf || !this.finalTransform._opMdf) {
+        while (i < len) {
+          if (this.localTransforms[i]._mdf) {
+            this.finalTransform._localMatMdf = true;
+          }
+          if (this.localTransforms[i]._opMdf && !this.finalTransform._opMdf) {
+            this.finalTransform.localOpacity = this.finalTransform.mProp.o.v;
+            this.finalTransform._opMdf = true;
+          }
+          i += 1;
+        }
+      }
+      if (this.finalTransform._localMatMdf) {
+        var localMat = this.finalTransform.localMat;
+        this.localTransforms[0].matrix.clone(localMat);
+        for (i = 1; i < len; i += 1) {
+          var lmat = this.localTransforms[i].matrix;
+          localMat.multiply(lmat);
+        }
+        localMat.multiply(this.finalTransform.mat);
+      }
+      if (this.finalTransform._opMdf) {
+        var localOp = this.finalTransform.localOpacity;
+        for (i = 0; i < len; i += 1) {
+          localOp *= this.localTransforms[i].opacity * 0.01;
+        }
+        this.finalTransform.localOpacity = localOp;
+      }
+    }
+  },
+  searchEffectTransforms: function () {
+    if (this.renderableEffectsManager) {
+      var transformEffects = this.renderableEffectsManager.getEffects(effectTypes.TRANSFORM_EFFECT);
+      if (transformEffects.length) {
+        this.localTransforms = [];
+        this.finalTransform.localMat = new Matrix();
+        var i = 0;
+        var len = transformEffects.length;
+        for (i = 0; i < len; i += 1) {
+          this.localTransforms.push(transformEffects[i]);
+        }
+      }
+    }
+  },
+  globalToLocal: function (pt) {
+    var transforms = [];
+    transforms.push(this.finalTransform);
+    var flag = true;
+    var comp = this.comp;
+    while (flag) {
+      if (comp.finalTransform) {
+        if (comp.data.hasMask) {
+          transforms.splice(0, 0, comp.finalTransform);
+        }
+        comp = comp.comp;
+      } else {
+        flag = false;
+      }
+    }
+    var i;
+    var len = transforms.length;
+    var ptNew;
+    for (i = 0; i < len; i += 1) {
+      ptNew = transforms[i].mat.applyToPointArray(0, 0, 0);
+      // ptNew = transforms[i].mat.applyToPointArray(pt[0],pt[1],pt[2]);
+      pt = [pt[0] - ptNew[0], pt[1] - ptNew[1], 0];
+    }
+    return pt;
+  },
+  mHelper: new Matrix(),
+};
+
+export default TransformElement;