conflict fix
diff --git a/package.json b/package.json
index 75fca69..aacfa04 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
"devDependencies": {
"event-stream": "^3.3.4",
"events-stream": "^0.2.0",
- "gulp": "^3.9.0",
+ "gulp": "^3.9.1",
"gulp-batch-replace": "0.0.0",
"gulp-cheerio": "^0.6.2",
"gulp-concat": "^2.6.0",
diff --git a/player/index.html b/player/index.html
index b9c2590..1d59275 100644
--- a/player/index.html
+++ b/player/index.html
@@ -120,6 +120,7 @@
<script src="js/elements/helpers/shapes/SVGGradientStrokeStyleData.js"></script>
<script src="js/elements/helpers/shapes/ShapeGroupData.js"></script>
<script src="js/elements/helpers/shapes/SVGElementsRenderer.js"></script>
+ <script src="js/elements/helpers/shapes/ShapeTransformManager.js"></script>
<script src="js/elements/helpers/shapes/CVShapeData.js" data-light-skip="true"></script>
<script src="js/elements/BaseElement.js"></script>
<script src="js/elements/NullElement.js"></script>
@@ -194,20 +195,15 @@
container: elem,
renderer: 'svg',
loop: true,
- autoplay: false,
+ autoplay: true,
rendererSettings: {
progressiveLoad:false,
+ preserveAspectRatio: 'xMidYMid meet',
imagePreserveAspectRatio: 'xMidYMid meet'
},
- path: 'exports/render/blah_blah_2.json'
+ path: 'exports/render/dna.json'
};
anim = lottie.loadAnimation(animData);
- anim.addEventListener('DOMLoaded', function() {
- setTimeout(function() {
- anim.goToAndStop(400, true);
- }, 100)
- })
- // anim.setSubframe(false);
</script>
</body>
diff --git a/player/js/3rd_party/transformation-matrix.js b/player/js/3rd_party/transformation-matrix.js
index 75ed5e9..6ce724e 100644
--- a/player/js/3rd_party/transformation-matrix.js
+++ b/player/js/3rd_party/transformation-matrix.js
@@ -108,8 +108,10 @@
}
function scale(sx, sy, sz) {
- sz = isNaN(sz) ? 1 : sz;
- if(sx == 1 && sy == 1 && sz == 1){
+ if(!sz && sz !== 0) {
+ sz = 1;
+ }
+ if(sx === 1 && sy === 1 && sz === 1){
return this;
}
return this._t(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1);
diff --git a/player/js/elements/canvasElements/CVShapeElement.js b/player/js/elements/canvasElements/CVShapeElement.js
index d2e5e59..31c4ca3 100644
--- a/player/js/elements/canvasElements/CVShapeElement.js
+++ b/player/js/elements/canvasElements/CVShapeElement.js
@@ -6,6 +6,7 @@
this.prevViewData = [];
this.shapeModifiers = [];
this.processedElements = [];
+ this.transformsManager = new ShapeTransformManager();
this.initElement(data, globalData, comp);
}
@@ -13,18 +14,21 @@
CVShapeElement.prototype.initElement = RenderableDOMElement.prototype.initElement;
-CVShapeElement.prototype.transformHelper = {opacity:1,mat:new Matrix(),_matMdf:false,_opMdf:false};
+CVShapeElement.prototype.transformHelper = {opacity:1,_opMdf:false};
CVShapeElement.prototype.dashResetter = [];
CVShapeElement.prototype.createContent = function(){
- this.searchShapes(this.shapesData,this.itemsData,this.prevViewData, true);
+ this.searchShapes(this.shapesData,this.itemsData,this.prevViewData, true, []);
};
-CVShapeElement.prototype.createStyleElement = function(data){
+CVShapeElement.prototype.createStyleElement = function(data, transforms) {
+ var transformsSequence = this.transformsManager.addTransformSequence(transforms);
var styleElem = {
data: data,
type: data.ty,
+ preTransforms: transformsSequence,
+ transforms: [],
elements: [],
closed: data.hd === true
};
@@ -79,73 +83,75 @@
CVShapeElement.prototype.createTransformElement = function(data) {
var elementData = {
transform : {
- mat: new Matrix(),
opacity: 1,
- _matMdf:false,
_opMdf:false,
+ key: this.transformsManager.getNewKey(),
op: PropertyFactory.getProp(this,data.o,0,0.01,this),
mProps: TransformPropertyFactory.getTransformProperty(this,data,this)
- },
- elements: []
+ }
};
return elementData;
};
CVShapeElement.prototype.createShapeElement = function(data) {
- var elementData = new CVShapeData(this, data);
+ var elementData = new CVShapeData(this, data, this.stylesList, this.transformsManager);
this.shapes.push(elementData);
this.addShapeToModifiers(elementData);
- var j, jLen = this.stylesList.length;
- var hasStrokes = false, hasFills = false;
- for(j=0;j<jLen;j+=1){
- if(!this.stylesList[j].closed){
- this.stylesList[j].elements.push(elementData);
- if(this.stylesList[j].type === 'st'){
- hasStrokes = true;
- }else{
- hasFills = true;
- }
- }
- }
- elementData.st = hasStrokes;
- elementData.fl = hasFills;
return elementData;
};
-CVShapeElement.prototype.reloadShapes = function(){
+CVShapeElement.prototype.reloadShapes = function() {
this._isFirstFrame = true;
var i, len = this.itemsData.length;
for(i=0;i<len;i+=1){
this.prevViewData[i] = this.itemsData[i];
}
- this.searchShapes(this.shapesData,this.itemsData,this.prevViewData, true);
+ this.searchShapes(this.shapesData,this.itemsData,this.prevViewData, true, []);
len = this.dynamicProperties.length;
for(i=0;i<len;i+=1){
this.dynamicProperties[i].getValue();
}
this.renderModifiers();
+ this.transformsManager.processSequences(this._isFirstFrame);
};
-CVShapeElement.prototype.searchShapes = function(arr,itemsData, prevViewData, render){
+CVShapeElement.prototype.addTransformToStyleList = function(transform) {
+ var i, len = this.stylesList.length;
+ for (i = 0; i < len; i += 1) {
+ if(!this.stylesList[i].closed) {
+ this.stylesList[i].transforms.push(transform);
+ }
+ }
+}
+
+CVShapeElement.prototype.closeStyles = function(styles) {
+ var i, len = styles.length, j, jLen;
+ for (i = 0; i < len; i += 1) {
+ styles[i].closed = true;
+ }
+}
+
+CVShapeElement.prototype.searchShapes = function(arr,itemsData, prevViewData, shouldRender, transforms){
var i, len = arr.length - 1;
var j, jLen;
- var ownArrays = [], ownModifiers = [], processedPos, modifier;
+ var ownStyles = [], ownModifiers = [], processedPos, modifier, currentTransform;
+ var ownTransforms = [].concat(transforms);
for(i=len;i>=0;i-=1){
processedPos = this.searchProcessedElement(arr[i]);
if(!processedPos){
- arr[i]._render = render;
+ arr[i]._shouldRender = shouldRender;
} else {
itemsData[i] = prevViewData[processedPos - 1];
}
if(arr[i].ty == 'fl' || arr[i].ty == 'st'|| arr[i].ty == 'gf'|| arr[i].ty == 'gs'){
if(!processedPos){
- itemsData[i] = this.createStyleElement(arr[i]);
+ itemsData[i] = this.createStyleElement(arr[i], ownTransforms);
} else {
itemsData[i].style.closed = false;
}
- ownArrays.push(itemsData[i].style);
+ ownStyles.push(itemsData[i].style);
}else if(arr[i].ty == 'gr'){
if(!processedPos){
itemsData[i] = this.createGroupElement(arr[i]);
@@ -155,10 +161,13 @@
itemsData[i].prevViewData[j] = itemsData[i].it[j];
}
}
- this.searchShapes(arr[i].it,itemsData[i].it,itemsData[i].prevViewData, render);
+ this.searchShapes(arr[i].it,itemsData[i].it,itemsData[i].prevViewData, shouldRender, ownTransforms);
}else if(arr[i].ty == 'tr'){
if(!processedPos){
- itemsData[i] = this.createTransformElement(arr[i]);
+ currentTransform = this.createTransformElement(arr[i]);
+ itemsData[i] = currentTransform;
+ ownTransforms.push(currentTransform);
+ this.addTransformToStyleList(currentTransform);
}
}else if(arr[i].ty == 'sh' || arr[i].ty == 'rc' || arr[i].ty == 'el' || arr[i].ty == 'sr'){
if(!processedPos){
@@ -182,7 +191,7 @@
itemsData[i] = modifier;
modifier.init(this,arr,i,itemsData);
this.shapeModifiers.push(modifier);
- render = false;
+ shouldRender = false;
}else{
modifier = itemsData[i];
modifier.closed = true;
@@ -191,10 +200,7 @@
}
this.addProcessedElement(arr[i], i + 1);
}
- len = ownArrays.length;
- for(i=0;i<len;i+=1){
- ownArrays[i].closed = true;
- }
+ this.closeStyles(ownStyles);
len = ownModifiers.length;
for(i=0;i<len;i+=1){
ownModifiers[i].closed = true;
@@ -202,12 +208,10 @@
};
CVShapeElement.prototype.renderInnerContent = function() {
-
- this.transformHelper.mat.reset();
this.transformHelper.opacity = 1;
- this.transformHelper._matMdf = false;
this.transformHelper._opMdf = false;
this.renderModifiers();
+ this.transformsManager.processSequences(this._isFirstFrame);
this.renderShape(this.transformHelper,this.shapesData,this.itemsData,true);
};
@@ -218,13 +222,6 @@
groupTransform.opacity *= groupTransform.op.v;
groupTransform._opMdf = true;
}
- if(parentTransform._matMdf || groupTransform.mProps._mdf || this._isFirstFrame) {
- groupMatrix = groupTransform.mat;
- groupMatrix.cloneFromProps(groupTransform.mProps.v.props);
- groupTransform._matMdf = true;
- props = parentTransform.mat.props;
- groupMatrix.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]);
- }
};
CVShapeElement.prototype.drawLayer = function() {
@@ -233,7 +230,13 @@
for(i=0;i<len;i+=1){
currentStyle = this.stylesList[i];
type = currentStyle.type;
- if(((type === 'st' || type === 'gs') && currentStyle.wi === 0) || !currentStyle.data._render || currentStyle.coOp === 0){
+
+ //Skipping style when
+ //Stroke width equals 0
+ //style should not be rendered (extra unused repeaters)
+ //current opacity equals 0
+ //global opacity equals 0
+ if(((type === 'st' || type === 'gs') && currentStyle.wi === 0) || !currentStyle.data._shouldRender || currentStyle.coOp === 0 || this.globalData.currentGlobalAlpha === 0){
continue;
}
renderer.save();
@@ -248,42 +251,40 @@
ctx.fillStyle = type === 'fl' ? currentStyle.co : currentStyle.grd;
}
renderer.ctxOpacity(currentStyle.coOp);
- if(this.globalData.currentGlobalAlpha !== 0) {
- if(type !== 'st' && type !== 'gs'){
+ if(type !== 'st' && type !== 'gs'){
+ ctx.beginPath();
+ }
+ renderer.ctxTransform(currentStyle.preTransforms.finalTransform.props);
+ jLen = elems.length;
+ for(j=0;j<jLen;j+=1){
+ if(type === 'st' || type === 'gs'){
ctx.beginPath();
- }
- jLen = elems.length;
- for(j=0;j<jLen;j+=1){
- if(type === 'st' || type === 'gs'){
- ctx.beginPath();
- if(currentStyle.da){
- ctx.setLineDash(currentStyle.da);
- ctx.lineDashOffset = currentStyle.do;
- }
+ if(currentStyle.da){
+ ctx.setLineDash(currentStyle.da);
+ ctx.lineDashOffset = currentStyle.do;
}
- nodes = elems[j].trNodes;
- kLen = nodes.length;
+ }
+ nodes = elems[j].trNodes;
+ kLen = nodes.length;
- for(k=0;k<kLen;k+=1){
- if(nodes[k].t == 'm'){
- ctx.moveTo(nodes[k].p[0],nodes[k].p[1]);
- }else if(nodes[k].t == 'c'){
- ctx.bezierCurveTo(nodes[k].pts[0],nodes[k].pts[1],nodes[k].pts[2],nodes[k].pts[3],nodes[k].pts[4],nodes[k].pts[5]);
- }else{
- ctx.closePath();
- }
- }
- if(type === 'st' || type === 'gs'){
- ctx.stroke();
- if(currentStyle.da){
- ctx.setLineDash(this.dashResetter);
- }
+ for(k=0;k<kLen;k+=1){
+ if(nodes[k].t == 'm'){
+ ctx.moveTo(nodes[k].p[0],nodes[k].p[1]);
+ }else if(nodes[k].t == 'c'){
+ ctx.bezierCurveTo(nodes[k].pts[0],nodes[k].pts[1],nodes[k].pts[2],nodes[k].pts[3],nodes[k].pts[4],nodes[k].pts[5]);
+ }else{
+ ctx.closePath();
}
}
- if(type !== 'st' && type !== 'gs'){
- ctx.fill(currentStyle.r);
+ if(type === 'st' || type === 'gs'){
+ ctx.stroke();
+ if(currentStyle.da){
+ ctx.setLineDash(this.dashResetter);
+ }
}
-
+ }
+ if(type !== 'st' && type !== 'gs'){
+ ctx.fill(currentStyle.r);
}
renderer.restore();
}
@@ -316,68 +317,72 @@
}
};
-CVShapeElement.prototype.renderPath = function(pathData,itemData,groupTransform){
- var len, i, j,jLen;
- var redraw = pathData.hd !== true && (groupTransform._matMdf || itemData.sh._mdf || this._isFirstFrame);
- if(redraw) {
- var paths = itemData.sh.paths, groupTransformMat = groupTransform.mat;
- jLen = pathData._render === false ? 0 : paths._length;
- var pathStringTransformed = itemData.trNodes;
- pathStringTransformed.length = 0;
- for(j=0;j<jLen;j+=1){
+
+CVShapeElement.prototype.renderStyledShape = function(styledShape, shape){
+ if(this._isFirstFrame || shape._mdf || transformSequence._mdf) {
+ var transformSequence = styledShape.transforms;
+ var shapeNodes = styledShape.trNodes;
+ var paths = shape.paths;
+ var j, jLen = paths._length;
+ shapeNodes.length = 0;
+ var groupTransformMat = transformSequence.finalTransform;
+ for (j = 0; j < jLen; j += 1) {
var pathNodes = paths.shapes[j];
if(pathNodes && pathNodes.v){
len = pathNodes._length;
for (i = 1; i < len; i += 1) {
- if (i == 1) {
- pathStringTransformed.push({
+ if (i === 1) {
+ shapeNodes.push({
t: 'm',
p: groupTransformMat.applyToPointArray(pathNodes.v[0][0], pathNodes.v[0][1], 0)
});
}
- pathStringTransformed.push({
+ shapeNodes.push({
t: 'c',
pts: groupTransformMat.applyToTriplePoints(pathNodes.o[i - 1], pathNodes.i[i], pathNodes.v[i])
});
}
- if (len == 1) {
- pathStringTransformed.push({
+ if (len === 1) {
+ shapeNodes.push({
t: 'm',
p: groupTransformMat.applyToPointArray(pathNodes.v[0][0], pathNodes.v[0][1], 0)
});
}
if (pathNodes.c && len) {
- pathStringTransformed.push({
+ shapeNodes.push({
t: 'c',
pts: groupTransformMat.applyToTriplePoints(pathNodes.o[i - 1], pathNodes.i[0], pathNodes.v[0])
});
- pathStringTransformed.push({
+ shapeNodes.push({
t: 'z'
});
}
- itemData.lStr = pathStringTransformed;
- }
-
- }
-
- if (itemData.st) {
- for (i = 0; i < 16; i += 1) {
- itemData.tr[i] = groupTransform.mat.props[i];
}
}
- itemData.trNodes = pathStringTransformed;
+ styledShape.trNodes = shapeNodes;
+ }
+}
+CVShapeElement.prototype.renderPath = function(pathData,itemData,groupTransform){
+ if(pathData.hd !== true && pathData._shouldRender) {
+ var i, len = itemData.styledShapes.length;
+ for (i = 0; i < len; i += 1) {
+ this.renderStyledShape(itemData.styledShapes[i], itemData.sh);
+ }
}
};
CVShapeElement.prototype.renderFill = function(styleData,itemData, groupTransform){
var styleElem = itemData.style;
- if(itemData.c._mdf || this._isFirstFrame){
- styleElem.co = 'rgb('+bm_floor(itemData.c.v[0])+','+bm_floor(itemData.c.v[1])+','+bm_floor(itemData.c.v[2])+')';
+ if (itemData.c._mdf || this._isFirstFrame) {
+ styleElem.co = 'rgb('
+ + bm_floor(itemData.c.v[0]) + ','
+ + bm_floor(itemData.c.v[1]) + ','
+ + bm_floor(itemData.c.v[2]) + ')';
}
- if(itemData.o._mdf || groupTransform._opMdf || this._isFirstFrame){
- styleElem.coOp = itemData.o.v*groupTransform.opacity;
+ if (itemData.o._mdf || groupTransform._opMdf || this._isFirstFrame) {
+ styleElem.coOp = itemData.o.v * groupTransform.opacity;
}
};
@@ -387,20 +392,17 @@
var ctx = this.globalData.canvasContext;
var grd;
var pt1 = itemData.s.v, pt2 = itemData.e.v;
- pt1 = groupTransform.mat.applyToPointArray(pt1[0], pt1[1], 0);
- pt2 = groupTransform.mat.applyToPointArray(pt2[0], pt2[1], 0);
- if(styleData.t === 1) {
- grd=ctx.createLinearGradient(pt1[0],pt1[1],pt2[0],pt2[1]);
+ if (styleData.t === 1) {
+ grd = ctx.createLinearGradient(pt1[0], pt1[1], pt2[0], pt2[1]);
} else {
- var rad;
- rad = Math.sqrt(Math.pow(pt1[0] - pt2[0], 2) + Math.pow(pt1[1] - pt2[1], 2));
+ var rad = Math.sqrt(Math.pow(pt1[0] - pt2[0], 2) + Math.pow(pt1[1] - pt2[1], 2));
var ang = Math.atan2(pt2[1] - pt1[1], pt2[0] - pt1[0]);
var percent = itemData.h.v >= 1 ? 0.99 : itemData.h.v <= -1 ? -0.99: itemData.h.v;
var dist = rad * percent;
var x = Math.cos(ang + itemData.a.v) * dist + pt1[0];
var y = Math.sin(ang + itemData.a.v) * dist + pt1[1];
- var grd=ctx.createRadialGradient(x,y,0,pt1[0],pt1[1],rad);
+ var grd = ctx.createRadialGradient(x, y, 0, pt1[0], pt1[1], rad);
}
var i, len = styleData.g.p;
diff --git a/player/js/elements/helpers/shapes/CVShapeData.js b/player/js/elements/helpers/shapes/CVShapeData.js
index 6eca1f4..3a545a5 100644
--- a/player/js/elements/helpers/shapes/CVShapeData.js
+++ b/player/js/elements/helpers/shapes/CVShapeData.js
@@ -1,6 +1,5 @@
-function CVShapeData(element, data) {
- this.nodes = [];
- this.trNodes = [];
+function CVShapeData(element, data, styles, transformsManager) {
+ this.styledShapes = [];
this.tr = [0,0,0,0,0,0];
var ty = 4;
if(data.ty == 'rc'){
@@ -11,8 +10,17 @@
ty = 7;
}
this.sh = ShapePropertyFactory.getShapeProp(element,data,ty,element);
- this.st = false;
- this.fl = false;
+ var i , len = styles.length,styledShape;
+ for (i = 0; i < len; i += 1) {
+ if (!styles[i].closed) {
+ styledShape = {
+ transforms: transformsManager.addTransformSequence(styles[i].transforms),
+ trNodes: []
+ }
+ this.styledShapes.push(styledShape);
+ styles[i].elements.push(styledShape);
+ }
+ }
}
CVShapeData.prototype.setAsAnimated = SVGShapeData.prototype.setAsAnimated;
\ No newline at end of file
diff --git a/player/js/elements/helpers/shapes/ShapeTransformManager.js b/player/js/elements/helpers/shapes/ShapeTransformManager.js
new file mode 100644
index 0000000..f024144
--- /dev/null
+++ b/player/js/elements/helpers/shapes/ShapeTransformManager.js
@@ -0,0 +1,56 @@
+function ShapeTransformManager() {
+ this.sequences = {};
+ this.sequenceList = [];
+ this.transform_key_count = 0;
+}
+
+ShapeTransformManager.prototype = {
+ addTransformSequence: function(transforms) {
+ var i, len = transforms.length;
+ var key = '_';
+ for(i = 0; i < len; i += 1) {
+ key += transforms[i].transform.key + '_';
+ }
+ var sequence = this.sequences[key];
+ if(!sequence) {
+ sequence = {
+ transforms: [].concat(transforms),
+ finalTransform: new Matrix(),
+ _mdf: false
+ };
+ this.sequences[key] = sequence;
+ this.sequenceList.push(sequence);
+ }
+ return sequence;
+ },
+ processSequence: function(sequence, isFirstFrame) {
+ var i = 0, len = sequence.transforms.length, _mdf = isFirstFrame;
+ while (i < len && !isFirstFrame) {
+ if (sequence.transforms[i].transform.mProps._mdf) {
+ _mdf = true;
+ break;
+ }
+ i += 1
+ }
+ if (_mdf) {
+ var props;
+ sequence.finalTransform.reset();
+ for (i = len - 1; i >= 0; i -= 1) {
+ props = sequence.transforms[i].transform.mProps.v.props;
+ sequence.finalTransform.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]);
+ }
+ }
+ sequence._mdf = _mdf;
+
+ },
+ processSequences: function(isFirstFrame) {
+ var i, len = this.sequenceList.length;
+ for (i = 0; i < len; i += 1) {
+ this.processSequence(this.sequenceList[i], isFirstFrame);
+ }
+
+ },
+ getNewKey: function() {
+ return '_' + this.transform_key_count++;
+ }
+}
\ No newline at end of file
