| function HTextElement(data,globalData,comp){ |
| this.textSpans = []; |
| this.textPaths = []; |
| this.currentBBox = { |
| x:999999, |
| y: -999999, |
| h: 0, |
| w: 0 |
| }; |
| this.renderType = 'svg'; |
| this.isMasked = false; |
| this.initElement(data,globalData,comp); |
| |
| } |
| extendPrototype([BaseElement,TransformElement,HBaseElement,HierarchyElement,FrameElement,RenderableDOMElement,ITextElement], HTextElement); |
| |
| HTextElement.prototype.createContent = function(){ |
| this.isMasked = this.checkMasks(); |
| if(this.isMasked){ |
| this.renderType = 'svg'; |
| this.compW = this.comp.data.w; |
| this.compH = this.comp.data.h; |
| this.svgElement.setAttribute('width',this.compW); |
| this.svgElement.setAttribute('height',this.compH); |
| var g = createNS('g'); |
| this.maskedElement.appendChild(g); |
| this.innerElem = g; |
| } else { |
| this.renderType = 'html'; |
| this.innerElem = this.layerElement; |
| } |
| |
| this.checkParenting(); |
| |
| }; |
| |
| HTextElement.prototype.buildNewText = function(){ |
| var documentData = this.textProperty.currentData; |
| this.renderedLetters = createSizedArray(documentData.l ? documentData.l.length : 0); |
| var innerElemStyle = this.innerElem.style; |
| innerElemStyle.color = innerElemStyle.fill = documentData.fc ? this.buildColor(documentData.fc) : 'rgba(0,0,0,0)'; |
| if(documentData.sc){ |
| innerElemStyle.stroke = this.buildColor(documentData.sc); |
| innerElemStyle.strokeWidth = documentData.sw+'px'; |
| } |
| var fontData = this.globalData.fontManager.getFontByName(documentData.f); |
| if(!this.globalData.fontManager.chars){ |
| innerElemStyle.fontSize = documentData.finalSize+'px'; |
| innerElemStyle.lineHeight = documentData.finalSize+'px'; |
| if(fontData.fClass){ |
| this.innerElem.className = fontData.fClass; |
| } else { |
| innerElemStyle.fontFamily = fontData.fFamily; |
| var fWeight = documentData.fWeight, fStyle = documentData.fStyle; |
| innerElemStyle.fontStyle = fStyle; |
| innerElemStyle.fontWeight = fWeight; |
| } |
| } |
| var i, len; |
| |
| var letters = documentData.l; |
| len = letters.length; |
| var tSpan,tParent,tCont; |
| var matrixHelper = this.mHelper; |
| var shapes, shapeStr = ''; |
| var cnt = 0; |
| for (i = 0;i < len ;i += 1) { |
| if(this.globalData.fontManager.chars){ |
| if(!this.textPaths[cnt]){ |
| tSpan = createNS('path'); |
| tSpan.setAttribute('stroke-linecap', 'butt'); |
| tSpan.setAttribute('stroke-linejoin','round'); |
| tSpan.setAttribute('stroke-miterlimit','4'); |
| } else { |
| tSpan = this.textPaths[cnt]; |
| } |
| if(!this.isMasked){ |
| if(this.textSpans[cnt]){ |
| tParent = this.textSpans[cnt]; |
| tCont = tParent.children[0]; |
| } else { |
| |
| tParent = createTag('div'); |
| tParent.style.lineHeight = 0; |
| tCont = createNS('svg'); |
| tCont.appendChild(tSpan); |
| styleDiv(tParent); |
| } |
| } |
| }else{ |
| if(!this.isMasked){ |
| if(this.textSpans[cnt]){ |
| tParent = this.textSpans[cnt]; |
| tSpan = this.textPaths[cnt]; |
| } else { |
| tParent = createTag('span'); |
| styleDiv(tParent); |
| tSpan = createTag('span'); |
| styleDiv(tSpan); |
| tParent.appendChild(tSpan); |
| } |
| } else { |
| tSpan = this.textPaths[cnt] ? this.textPaths[cnt] : createNS('text'); |
| } |
| } |
| //tSpan.setAttribute('visibility', 'hidden'); |
| if(this.globalData.fontManager.chars){ |
| var charData = this.globalData.fontManager.getCharData(documentData.finalText[i], fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily); |
| var shapeData; |
| if(charData){ |
| shapeData = charData.data; |
| } else { |
| shapeData = null; |
| } |
| matrixHelper.reset(); |
| if(shapeData && shapeData.shapes){ |
| shapes = shapeData.shapes[0].it; |
| matrixHelper.scale(documentData.finalSize/100,documentData.finalSize/100); |
| shapeStr = this.createPathShape(matrixHelper,shapes); |
| tSpan.setAttribute('d',shapeStr); |
| } |
| if(!this.isMasked){ |
| this.innerElem.appendChild(tParent); |
| if(shapeData && shapeData.shapes){ |
| |
| //document.body.appendChild is needed to get exact measure of shape |
| document.body.appendChild(tCont); |
| var boundingBox = tCont.getBBox(); |
| tCont.setAttribute('width',boundingBox.width + 2); |
| tCont.setAttribute('height',boundingBox.height + 2); |
| tCont.setAttribute('viewBox',(boundingBox.x-1)+' '+ (boundingBox.y-1)+' '+ (boundingBox.width+2)+' '+ (boundingBox.height+2)); |
| tCont.style.transform = tCont.style.webkitTransform = 'translate(' + (boundingBox.x-1) + 'px,' + (boundingBox.y-1) + 'px)'; |
| |
| letters[i].yOffset = boundingBox.y-1; |
| |
| } else{ |
| tCont.setAttribute('width',1); |
| tCont.setAttribute('height',1); |
| } |
| tParent.appendChild(tCont); |
| }else{ |
| this.innerElem.appendChild(tSpan); |
| } |
| }else{ |
| tSpan.textContent = letters[i].val; |
| tSpan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space','preserve'); |
| if(!this.isMasked){ |
| this.innerElem.appendChild(tParent); |
| // |
| tSpan.style.transform = tSpan.style.webkitTransform = 'translate3d(0,'+ -documentData.finalSize/1.2+'px,0)'; |
| } else { |
| this.innerElem.appendChild(tSpan); |
| } |
| } |
| // |
| if(!this.isMasked){ |
| this.textSpans[cnt] = tParent; |
| }else{ |
| this.textSpans[cnt] = tSpan; |
| } |
| this.textSpans[cnt].style.display = 'block'; |
| this.textPaths[cnt] = tSpan; |
| cnt += 1; |
| } |
| while(cnt < this.textSpans.length){ |
| this.textSpans[cnt].style.display = 'none'; |
| cnt += 1; |
| } |
| }; |
| |
| HTextElement.prototype.renderInnerContent = function() { |
| |
| if(this.data.singleShape){ |
| if(!this._isFirstFrame && !this.lettersChangedFlag){ |
| return; |
| } else { |
| // Todo Benchmark if using this is better than getBBox |
| if(this.isMasked && this.finalTransform._matMdf){ |
| this.svgElement.setAttribute('viewBox',-this.finalTransform.mProp.p.v[0]+' '+ -this.finalTransform.mProp.p.v[1]+' '+this.compW+' '+this.compH); |
| this.svgElement.style.transform = this.svgElement.style.webkitTransform = 'translate(' + -this.finalTransform.mProp.p.v[0] + 'px,' + -this.finalTransform.mProp.p.v[1] + 'px)'; |
| } |
| } |
| } |
| |
| this.textAnimator.getMeasures(this.textProperty.currentData, this.lettersChangedFlag); |
| if(!this.lettersChangedFlag && !this.textAnimator.lettersChangedFlag){ |
| return; |
| } |
| var i,len, count = 0; |
| var renderedLetters = this.textAnimator.renderedLetters; |
| |
| var letters = this.textProperty.currentData.l; |
| |
| len = letters.length; |
| var renderedLetter, textSpan, textPath; |
| for(i=0;i<len;i+=1){ |
| if(letters[i].n){ |
| count += 1; |
| continue; |
| } |
| textSpan = this.textSpans[i]; |
| textPath = this.textPaths[i]; |
| renderedLetter = renderedLetters[count]; |
| count += 1; |
| if(renderedLetter._mdf.m) { |
| if(!this.isMasked){ |
| textSpan.style.transform = textSpan.style.webkitTransform = renderedLetter.m; |
| }else{ |
| textSpan.setAttribute('transform',renderedLetter.m); |
| } |
| } |
| ////textSpan.setAttribute('opacity',renderedLetter.o); |
| textSpan.style.opacity = renderedLetter.o; |
| if(renderedLetter.sw && renderedLetter._mdf.sw){ |
| textPath.setAttribute('stroke-width',renderedLetter.sw); |
| } |
| if(renderedLetter.sc && renderedLetter._mdf.sc){ |
| textPath.setAttribute('stroke',renderedLetter.sc); |
| } |
| if(renderedLetter.fc && renderedLetter._mdf.fc){ |
| textPath.setAttribute('fill',renderedLetter.fc); |
| textPath.style.color = renderedLetter.fc; |
| } |
| } |
| |
| if(this.innerElem.getBBox && !this.hidden && (this._isFirstFrame || this._mdf)){ |
| var boundingBox = this.innerElem.getBBox(); |
| |
| if(this.currentBBox.w !== boundingBox.width){ |
| this.currentBBox.w = boundingBox.width; |
| this.svgElement.setAttribute('width',boundingBox.width); |
| } |
| if(this.currentBBox.h !== boundingBox.height){ |
| this.currentBBox.h = boundingBox.height; |
| this.svgElement.setAttribute('height',boundingBox.height); |
| } |
| |
| var margin = 1; |
| if(this.currentBBox.w !== (boundingBox.width + margin*2) || this.currentBBox.h !== (boundingBox.height + margin*2) || this.currentBBox.x !== (boundingBox.x - margin) || this.currentBBox.y !== (boundingBox.y - margin)){ |
| this.currentBBox.w = boundingBox.width + margin*2; |
| this.currentBBox.h = boundingBox.height + margin*2; |
| this.currentBBox.x = boundingBox.x - margin; |
| this.currentBBox.y = boundingBox.y - margin; |
| |
| this.svgElement.setAttribute('viewBox',this.currentBBox.x+' '+this.currentBBox.y+' '+this.currentBBox.w+' '+this.currentBBox.h); |
| this.svgElement.style.transform = this.svgElement.style.webkitTransform = 'translate(' + this.currentBBox.x + 'px,' + this.currentBBox.y + 'px)'; |
| } |
| } |
| }; |
