-
-
-
-
 Saad Pasta |
-  Kartik Choudhary |
-  Naveen M K |
-  Muhammad Hasham |
-
-
-
- );
-}
-
-export default App;
diff --git a/src/App.scss b/src/App.scss
deleted file mode 100644
index 620a069529..0000000000
--- a/src/App.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-@import "./globalColor";
-
-.App {
- text-align: center;
- width: 100%;
- overflow-x: hidden;
-}
-
-.App-logo {
- height: 40vmin;
-}
-
-.App-header {
- background-color: $appHeaderBG;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(0.625rem + 2vmin);
- color: $textColorDark;
-}
-
-.App-link {
- color: $appLink;
-}
-
-.subTitle {
- color: $subTitle;
-}
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 2d62c1b3c2..0000000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
-
-Object.defineProperty(window, "matchMedia", {
- writable: true,
- value: jest.fn().mockImplementation(query => ({
- matches: false,
- media: query,
- onchange: null,
- addListener: jest.fn(), // Deprecated
- removeListener: jest.fn(), // Deprecated
- addEventListener: jest.fn(),
- removeEventListener: jest.fn(),
- dispatchEvent: jest.fn()
- }))
-});
-
-it("renders without crashing", () => {
- const div = document.createElement("div");
- ReactDOM.render(
-
- );
-}
diff --git a/src/components/achievementCard/AchievementCard.scss b/src/components/achievementCard/AchievementCard.scss
deleted file mode 100644
index 2d41b0de15..0000000000
--- a/src/components/achievementCard/AchievementCard.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-@import "../../_globalColor";
-
-.card-image {
- max-width: 100%;
- height: auto;
- width: 250px;
-}
-.card-title {
- color: $titleColor;
- font-size: 1.375rem;
- line-height: 24px;
- font-weight: 700;
- margin: 15px 0 0 0;
-}
-.card-subtitle {
- color: $cardSubtitle;
- font-size: 1.063rem;
- line-height: 1.5rem;
-}
-.certificate-card {
- background-color: $lightBackground2;
- box-shadow: $lightBoxShadowDark 0px 10px 30px -15px;
- padding: 1.5rem;
- border-radius: 10px;
- border: 1px solid $lightBorder1;
- -webkit-transition: all 0.3s ease;
- -o-transition: all 0.3s ease;
- transition: all 0.3s ease;
-}
-.certificate-detail-div {
- text-align: center;
-}
-.certificate-card:hover {
- box-shadow: $lightBoxShadowDark 0px 20px 30px -10px;
-}
-.dark-mode.certificate-card:hover {
- box-shadow: $achievementCertificateCardHoverDark 0px 20px 30px -10px;
-}
-.certificate-image-div {
- position: relative;
- height: 250px;
- overflow: hidden;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-.achievement-cards-div {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
- gap: 1rem 1rem;
-}
-.certificate-card-footer {
- display: flex;
- align-items: center;
- flex-wrap: wrap;
- justify-content: center;
-}
-.certificate-card-footer span.certificate-tag {
- background: $buttonColor;
- color: $lightBackground3;
- vertical-align: middle;
- align-items: center;
- border-radius: 4px;
- display: inline-flex;
- font-size: 0.75rem;
- height: 2em;
- justify-content: center;
- white-space: nowrap;
- line-height: 1.5;
- margin: 0 0.5rem 0.5rem 0;
- padding: 0 0.75em;
- cursor: pointer;
- transition: 0.2s ease-in;
-}
-span.certificate-tag:hover {
- background: $buttonHover;
-}
diff --git a/src/components/blogCard/BlogCard.js b/src/components/blogCard/BlogCard.js
deleted file mode 100644
index c74e64aa50..0000000000
--- a/src/components/blogCard/BlogCard.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react";
-import "./BlogCard.scss";
-
-export default function BlogCard({blog, isDark}) {
- function openUrlInNewTab(url, name) {
- if (!url) {
- console.log(`URL for ${name} not found`);
- return;
- }
- var win = window.open(url, "_blank");
- win.focus();
- }
-
- return (
-
- 
-
-
-
- - {cardInfo.title} -
-- {cardInfo.description} -
-
- {cardInfo.footer.map((v, i) => {
- return (
- openUrlInNewTab(v.url, v.name)}
- >
- {v.name}
-
- );
- })}
-
- openUrlInNewTab(blog.url, blog.title)}>
-
-
- );
-}
diff --git a/src/components/blogCard/BlogCard.scss b/src/components/blogCard/BlogCard.scss
deleted file mode 100644
index 2f804c1ea8..0000000000
--- a/src/components/blogCard/BlogCard.scss
+++ /dev/null
@@ -1,149 +0,0 @@
-@import "../../_globalColor";
-
-.small-dark {
- color: $textColorDark !important;
-}
-
-.blog-container {
- border-radius: 10px;
- color: $blogCardContainerColor;
- background-color: $lightBackground1;
- box-shadow: 0 0 36px $lightBoxShadow;
- cursor: pointer;
- height: 200px;
-}
-
-.blog-title {
- color: $blogCardTitleColor;
- font-size: 1.375rem;
- line-height: 24px;
- font-weight: 700;
- margin-left: 20px;
- margin-right: 20px;
- margin-bottom: 14px;
- margin-top: 32px;
- overflow: hidden;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
-}
-
-.small {
- font-size: 1.063rem;
- font-weight: 400;
- line-height: 1.5rem;
- color: $cardSubtitle;
- padding: 0px 20px;
- overflow: hidden;
- display: -webkit-box;
- -webkit-line-clamp: 4;
- -webkit-box-orient: vertical;
- margin: 0px;
-}
-
-.go-corner {
- display: flex;
- align-items: center;
- justify-content: center;
- position: absolute;
- width: 32px;
- height: 32px;
- overflow: hidden;
- top: 0;
- right: 0;
- background-color: $buttonColor;
- border-radius: 0 4px 0 32px;
-}
-
-.go-arrow {
- margin-top: -4px;
- margin-right: -4px;
- color: $textColorDark;
- font-family: courier, sans;
-}
-
-.blog-card {
- display: block;
- position: relative;
- background-color: transparent;
- border-radius: 4px;
- text-decoration: none;
- z-index: 0;
- overflow: hidden;
- height: 100%;
-}
-
-.blog-card::before {
- content: "";
- position: absolute;
- z-index: -1;
- top: -16px;
- right: -16px;
- background: $buttonColor;
- height: 32px;
- width: 32px;
- border-radius: 32px;
- transform: scale(1);
- transform-origin: 50% 50%;
- transition: transform 0.4s ease-out;
-}
-
-.blog-card:hover::before {
- transform: scale(30);
-}
-
-.blog-card:hover > .small {
- transition: all 0.3s ease-out;
- color: $blogCardHoverSmallColor;
-}
-
-.blog-card:hover > h3 {
- transition: all 0.3s ease-out;
- color: $darkBoxShadow2;
-}
-
-@media screen and (max-width: 480px) and (min-width: 300px),
- (min-width: 925px) and (max-width: 1024px),
- (min-width: 1405px) and (max-width: 1550px) {
- .blog-card:hover::before {
- transform: scale(30);
- }
-}
-
-@media screen and (min-width: 481px) and (max-width: 675px),
- (min-width: 1025px) and (max-width: 1404px),
- (min-width: 1551px) {
- .blog-card:hover::before {
- transform: scale(40);
- }
- .blog-card::before {
- transition: transform 0.45s ease-out;
- }
-}
-
-@media screen and (min-width: 675px) and (max-width: 860px) {
- .blog-card:hover::before {
- transform: scale(50);
- }
- .blog-card::before {
- transition: transform 0.5s ease-out;
- }
-}
-
-@media screen and (min-width: 860px) and (max-width: 924px) {
- .blog-card:hover::before {
- transform: scale(60);
- }
- .blog-card::before {
- transition: transform 0.5s ease-out;
- }
-}
-
-@media screen and (max-width: 480px) and (min-width: 300px) {
- .blog-title {
- font-size: 1.125rem;
- }
-}
-.blog-card-shadow {
- box-shadow: 1px 0px 20px $darkBoxShadow2;
-}
diff --git a/src/components/button/Button.js b/src/components/button/Button.js
deleted file mode 100644
index c0f1d1d3d9..0000000000
--- a/src/components/button/Button.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-import "./Button.scss";
-
-export default function Button({text, className, href, newTab}) {
- return (
-
-
- {text}
-
-
- );
-}
diff --git a/src/components/button/Button.scss b/src/components/button/Button.scss
deleted file mode 100644
index e9058b69dd..0000000000
--- a/src/components/button/Button.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-@import "../../_globalColor";
-
-.main-button {
- background-color: $buttonColor;
- border: solid 1px $buttonColor;
- color: $textColorDark;
- font-weight: 700;
- width: max-content;
- padding: 13px 22px;
- margin-right: 50px;
- text-transform: uppercase;
- border-radius: 6px;
- text-align: center;
- text-decoration: none;
- display: block;
- margin-top: 20px;
- font-size: 1rem;
- cursor: pointer;
- transition: all 0.3s ease-in-out 0s;
-}
-.main-button:hover {
- background-color: $darkBoxShadow2;
- color: $buttonColor;
- transition: all 0.3s ease 0s;
- transform: translateY(-3px);
-}
-.project-button {
- display: flex;
- justify-content: center;
- margin-top: 20px;
-}
-.project-button > .main-button {
- margin-right: 0 !important;
-}
-/* Media Query */
-@media (max-width: 768px) {
- .main-button {
- font-size: 0.938rem;
- padding: 12px 18px;
- margin-right: 0px;
- }
-}
-@media (max-width: 320px) {
- .main-button {
- font-size: 0.75rem;
- }
-}
diff --git a/src/components/displayLottie/DisplayLottie.js b/src/components/displayLottie/DisplayLottie.js
deleted file mode 100644
index 7313bad7db..0000000000
--- a/src/components/displayLottie/DisplayLottie.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React, {Component, Suspense} from "react";
-import Lottie from "lottie-react";
-import Loading from "../../containers/loading/Loading";
-
-export default class DisplayLottie extends Component {
- render() {
- const animationData = this.props.animationData;
- const defaultOptions = {
- loop: true,
- autoplay: true,
- animationData: animationData
- };
-
- return (
-
-
-
-
-
-
-
- );
-}
diff --git a/src/components/educationCard/EducationCard.scss b/src/components/educationCard/EducationCard.scss
deleted file mode 100644
index b385c09b59..0000000000
--- a/src/components/educationCard/EducationCard.scss
+++ /dev/null
@@ -1,134 +0,0 @@
-@import "../../_globalColor";
-
-.education-card {
- display: flex;
- flex-direction: row;
-}
-
-.education-card:hover + .education-card-border {
- border-color: $educationCardBorder;
- width: 100%;
- -webkit-transition: width 0.6s ease-in-out;
- -moz-transition: width 0.6s ease-in-out;
- -o-transition: width 0.6s ease-in-out;
- transition: width 0.6s ease-in-out;
-}
-
-.education-card-border {
- height: 30px;
- width: 80%;
- border-top: 2px solid $lightBorder1;
- margin-bottom: 20px;
- -webkit-transition: width 0.6s ease-in-out;
- -moz-transition: width 0.6s ease-in-out;
- -o-transition: width 0.6s ease-in-out;
- transition: width 0.6s ease-in-out;
-}
-
-.education-head {
- display: flex;
- flex-direction: row;
-}
-
-.education-text-school {
- margin: 0;
- font-size: 28px;
- font-weight: 700;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- height: 27px;
-}
-
-.education-roundedimg {
- object-fit: cover;
- margin-right: 2rem;
- width: 6rem;
- height: 6rem;
- box-shadow: 0 0.5rem 1rem $lightBoxShadowDarker;
- border-radius: 50%;
-}
-
-.education-card-right {
- max-width: 70%;
-}
-
-.education-text-subHeader {
- color: $textColor;
- font-weight: 700;
- font-size: 19px;
- margin: 0px;
- padding-top: 0.8rem;
- line-height: normal;
-}
-
-.education-text-duration {
- color: $titleColor;
- font-size: 19px;
- margin: 0px;
- padding-top: 0.5rem;
-}
-
-.education-text-desc {
- margin-top: 0.5rem;
- margin-bottom: 0.5rem;
-}
-
-.education-text-bullets > ul {
- margin-top: 0.5rem;
-}
-
-/* Media Query */
-
-@media (max-width: 1380px) {
- .education-card {
- flex-direction: column;
- padding-bottom: 10px;
- }
- .education-card-right {
- max-width: 90%;
- }
- .education-card-border {
- width: 90%;
- }
- .education-text-subHeader {
- padding-top: 0.5rem;
- font-size: 16px;
- }
- .education-text-school {
- font-size: 20px;
- height: 23px;
- }
- .education-text-duration {
- font-size: 16px;
- }
- .education-roundedimg {
- width: 4rem;
- height: 4rem;
- margin-bottom: 0.5rem;
- margin-right: 0px;
- }
-}
-
-@media (max-width: 768px) {
- .education-card {
- text-align: center;
- }
- .education-card-right {
- max-width: 100%;
- }
- .education-card-border {
- width: 100%;
- }
- .education-roundedimg {
- margin-top: 10px;
- width: 4rem;
- height: 4rem;
- margin-bottom: 1rem;
- margin-right: 0;
- }
- .education-text-bullets > ul {
- max-width: 80%;
- margin: auto;
- }
-}
diff --git a/src/components/experienceCard/ExperienceCard.js b/src/components/experienceCard/ExperienceCard.js
deleted file mode 100644
index 5a4ef76247..0000000000
--- a/src/components/experienceCard/ExperienceCard.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, {useState, createRef} from "react";
-import "./ExperienceCard.scss";
-import ColorThief from "colorthief";
-
-export default function ExperienceCard({cardInfo, isDark}) {
- const [colorArrays, setColorArrays] = useState([]);
- const imgRef = createRef();
-
- function getColorArrays() {
- const colorThief = new ColorThief();
- setColorArrays(colorThief.getColor(imgRef.current));
- }
-
- function rgb(values) {
- return typeof values === "undefined"
- ? null
- : "rgb(" + values.join(", ") + ")";
- }
-
- const GetDescBullets = ({descBullets, isDark}) => {
- return descBullets
- ? descBullets.map((item, i) => (
-
- {school.logo && (
-
-
- 
-
- )}
-
-
- {school.schoolName}
- -
-
- - {school.subHeader} -
-- {school.duration} -
-{school.desc}
-
-
- -
-
-
- );
-}
diff --git a/src/components/experienceCard/ExperienceCard.scss b/src/components/experienceCard/ExperienceCard.scss
deleted file mode 100644
index 1d63c93039..0000000000
--- a/src/components/experienceCard/ExperienceCard.scss
+++ /dev/null
@@ -1,156 +0,0 @@
-@import "../../_globalColor";
-
-.experience-card {
- position: relative;
- background-color: $lightBackground2;
- box-shadow: $lightBoxShadowDark 0px 10px 30px -15px;
- border-radius: 10px;
- border: 1px solid $lightBorder1;
-}
-
-.experience-card-dark {
- position: relative;
- background-color: $darkBackground;
- box-shadow: $lightBoxShadowDark 0px 10px 30px -15px;
- border-radius: 10px;
- border: 1px solid $lightBorder1;
-}
-
-.experience-card:hover {
- box-shadow: $lightBoxShadowDark 0px 20px 30px -10px;
-}
-
-.experience-banner {
- background-position: center;
- background-repeat: no-repeat;
- background-size: 150%;
- background: $experienceCardBannerLG;
- border-radius: 10px 10px 0px 0px;
- -webkit-filter: blur(0px);
- -moz-filter: blur(0px);
- -o-filter: blur(0px);
- -ms-filter: blur(0px);
- filter: blur(0px);
- height: 11rem;
- display: flex;
- align-items: flex-end;
- justify-content: center;
-}
-
-.experience-blurred_div {
- position: absolute;
- background: $experienceCardBlurredDivLG;
- -webkit-filter: blur(5px);
- -moz-filter: blur(5px);
- -o-filter: blur(5px);
- -ms-filter: blur(5px);
- filter: blur(5px);
- height: 11rem;
- top: 0;
- left: 0;
- width: 100%;
- border-radius: 10px 10px 0px 0px;
-}
-
-.experience-div-company {
- position: absolute;
- background: transparent;
- height: 9rem;
- top: 0;
- left: 0;
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.experience-text-company {
- text-align: center;
- padding: 1.5rem;
- margin: 0;
- color: $lightBackground1;
- font-size: 25px;
- text-align: center;
- font-weight: 700;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-}
-
-.experience-roundedimg {
- position: absolute;
- object-fit: cover;
- left: 0;
- right: 0;
- top: 7rem;
- margin-left: auto;
- margin-right: auto;
- width: 8rem;
- height: 8rem;
- box-shadow: 0 0.5rem 1rem $lightBoxShadowDarker;
- border-radius: 50%;
-}
-
-.experience-text-role {
- text-align: center;
- color: $textColor;
- font-weight: 700;
- font-size: 25px;
- margin: 0px;
- padding-top: 1.5rem;
- line-height: normal;
-}
-.dark-mode-text {
- color: $textColorDark !important;
-}
-.experience-text-date {
- text-align: center;
- color: $textColor;
- font-size: 20px;
- margin: 0px;
- padding-top: 1rem;
- font-weight: 600;
-}
-
-.experience-text-desc {
- text-align: center;
-}
-
-.experience-text-details {
- padding: 1.5rem;
- margin-top: 2rem;
-}
-
-/* Media Query */
-
-@media (max-width: 1380px) {
- .experience-text-role {
- padding-top: 0.5rem;
- font-size: 22px;
- }
- .experience-text-company {
- font-size: 22px;
- }
- .experience-text-date {
- font-size: 18px;
- }
- .experience-roundedimg {
- width: 6.5rem;
- height: 6.5rem;
- }
-}
-
-@media (max-width: 768px) {
- .experience-text-role {
- font-size: 22px;
- }
- .experience-text-company {
- font-size: 22px;
- }
- .experience-text-date {
- font-size: 18px;
- }
- .experience-text-desc {
- font-size: 16px;
- }
-}
diff --git a/src/components/footer/Footer.js b/src/components/footer/Footer.js
deleted file mode 100644
index 0035053712..0000000000
--- a/src/components/footer/Footer.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, {useContext} from "react";
-import "./Footer.scss";
-import {Fade} from "react-reveal";
-import emoji from "react-easy-emoji";
-import StyleContext from "../../contexts/StyleContext";
-
-export default function Footer() {
- const {isDark} = useContext(StyleContext);
- return (
-
-
- 
getColorArrays()}
- />
-
-
-
-
- {cardInfo.company}
-
-
- - {cardInfo.role} -
-- {cardInfo.date} -
-- {cardInfo.desc} -
--
-
-
- - {emoji("Made with ❤️ by DeveloperFolio Team")} -
-- Theme by{" "} - - developerFolio - -
-
-
- Reach Out to me!
-
-
-
-
-
-
- {contactInfo.subtitle}
-"{emoji(String(prof.bio))}"
- {prof.location !== null && ( -
-
-
- {prof.location}
-
-
- )}
-
-
- Open for opportunities: {prof.hireable}
-
-
-
- 
-
-
-
- openUrlInNewTab(repo.node.url, repo.node.name)}
- >
-
-
-
-
- {repo.node.name}
-{repo.node.description}
-
-
-
- {repo.node.primaryLanguage !== null && (
-
-
-
- {repo.node.primaryLanguage.name}
- - )} - - -{repo.node.forkCount}
- - - -{repo.node.stargazers.totalCount}
- -
-
- {formatFileSizeDisplay(repo.node.diskUsage)}
--
- {viewSkills && (
-
- - Skills - - )} - {viewExperience && ( -
- - Work Experiences - - )} - {viewOpenSource && ( -
- - Open Source - - )} - {viewAchievement && ( -
- - Achievements - - )} - {viewBlog && ( -
- - Blogs - - )} - {viewTalks && ( -
- - Talks - - )} -
- - Contact Me - -
-
- {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-
-
- -
-
- {socialMediaLinks.github ? (
-
-
-
-
- ) : null}
-
- {socialMediaLinks.linkedin ? (
-
-
-
-
- ) : null}
-
- {socialMediaLinks.gmail ? (
-
-
-
-
- ) : null}
-
- {socialMediaLinks.gitlab ? (
-
-
-
-
- ) : null}
-
- {socialMediaLinks.facebook ? (
-
-
-
-
- ) : null}
-
- {socialMediaLinks.instagram ? (
-
-
-
-
- ) : null}
-
- {socialMediaLinks.twitter ? (
-
-
-
-
- ) : null}
-
- {socialMediaLinks.medium ? (
-
-
-
-
- ) : null}
-
- {socialMediaLinks.stackoverflow ? (
-
-
-
-
- ) : null}
-
- {socialMediaLinks.kaggle ? (
-
-
-
-
- ) : null}
-
- );
-}
diff --git a/src/components/socialMedia/SocialMedia.scss b/src/components/socialMedia/SocialMedia.scss
deleted file mode 100644
index aec6fc0b9f..0000000000
--- a/src/components/socialMedia/SocialMedia.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-@import "../../_globalColor";
-
-.social-media-div {
- font-size: 2em;
-}
-
-.icon-button {
- margin-bottom: 10px;
-}
-
-.icon-button i {
- color: $textColorDark;
- border-radius: 2.6rem;
- cursor: pointer;
- display: inline-block;
- font-size: 1.3rem;
- height: 2.6rem;
- line-height: 2.6rem;
- margin: 0 5px;
- position: relative;
- text-align: center;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- width: 2.6rem;
- margin-bottom: 10px;
- transition: 0.2s ease-in;
-}
-
-.facebook i {
- background-color: $faceBook;
-}
-
-.linkedin i {
- background-color: $linkedin;
-}
-
-.github i {
- background-color: $github;
-}
-
-.gitlab i {
- background-color: $gitlab;
-}
-
-.google i {
- background-color: $google;
-}
-
-.twitter i {
- background-color: $twitter;
-}
-
-.medium i {
- background-color: $medium;
-}
-
-.stack-overflow i {
- background-color: $stackoverflow;
-}
-
-.kaggle i {
- background-color: $kaggle;
-}
-
-.instagram i {
- background-color: $instagram;
-}
-
-/* Hover Transition */
-.twitter i:hover,
-.google i:hover,
-.gitlab i:hover,
-.github i:hover,
-.linkedin i:hover,
-.facebook i:hover,
-.instagram i:hover,
-.stack-overflow i:hover,
-.kaggle i:hover,
-.medium i:hover {
- background-color: $textColor;
-}
-
-/* Media Query */
-@media (max-width: 768px) {
- .social-media-div {
- text-align: center;
- }
-}
diff --git a/src/components/softwareSkills/SoftwareSkill.js b/src/components/softwareSkills/SoftwareSkill.js
deleted file mode 100644
index f4239a178c..0000000000
--- a/src/components/softwareSkills/SoftwareSkill.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-import "./SoftwareSkill.scss";
-import {skillsSection} from "../../portfolio";
-
-export default function SoftwareSkill() {
- return (
-
-
- );
-}
diff --git a/src/components/softwareSkills/SoftwareSkill.scss b/src/components/softwareSkills/SoftwareSkill.scss
deleted file mode 100644
index 4d302a1b4d..0000000000
--- a/src/components/softwareSkills/SoftwareSkill.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@import "../../_globalColor";
-
-.dev-icons {
- padding-left: 0;
- list-style: none;
- font-size: 3rem;
- margin-bottom: 0px;
- margin-top: 0px;
- text-align: center;
-}
-
-.software-skill-inline {
- display: inline-block;
- margin-right: 20px;
- margin-bottom: 20px;
-}
-
-.software-skill-inline > i {
- color: $subTitle;
-}
-
-.software-skill-inline > i:hover {
- color: $skillsColor;
-}
-.software-skill-inline > p {
- color: $subTitle;
- font-size: 10px;
-}
-.software-skill-inline > i:hover ~ p {
- color: $skillsColor;
-}
diff --git a/src/components/talkCard/TalkCard.js b/src/components/talkCard/TalkCard.js
deleted file mode 100644
index 49ff5285b3..0000000000
--- a/src/components/talkCard/TalkCard.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-import "./TalkCard.scss";
-
-export default function TalkCard({talkDetails}) {
- return (
-
-
- -
- {skillsSection.softwareSkills.map((skills, i) => {
- return (
-
-
-
-
{skills.skillName}
-
- );
- })}
-
-
- );
-}
diff --git a/src/components/talkCard/TalkCard.scss b/src/components/talkCard/TalkCard.scss
deleted file mode 100644
index 0fc003de83..0000000000
--- a/src/components/talkCard/TalkCard.scss
+++ /dev/null
@@ -1,125 +0,0 @@
-@import "../../_globalColor";
-
-.container {
- display: flex;
- justify-content: center;
-}
-
-/* Rectangle Card Layout */
-.rectangle {
- background: url(../../assets/images/talksCardBack.svg);
- width: 380px;
- height: 300px;
- border-radius: 4px;
- box-shadow: 0px 20px 50px $darkBoxShadow;
- -webkit-transition: all 0.3s ease;
- -o-transition: all 0.3s ease;
- transition: all 0.3s ease;
- margin-top: 50px;
-}
-.rectangle:hover {
- box-shadow: 0 20px 40px $textColorDark;
-}
-.dark-rectangle {
- box-shadow: 0px 0px 20px 0px;
-}
-.mask {
- clip: rect(0px, 460px, 220px, 0px);
- border-radius: 4px;
- position: absolute;
-}
-
-/* Card Styling */
-.talk-card-title {
- color: $textColorDark;
- margin: auto;
- text-align: left;
- margin-top: 25px;
- padding: 0px 0px 40px 30px;
- font-size: 30px;
- line-height: normal;
- overflow: hidden;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
-}
-.talk-card-subtitle {
- margin-top: 35px;
- text-align: justify;
- padding-left: 30px;
- padding-right: 30px;
- font-size: 16px;
- color: $talkCardSubTitle;
- line-height: 18px;
- overflow: hidden;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
-}
-.talk-button {
- background-color: $buttonColor;
- color: $textColorDark;
- width: 90px;
- padding: 10px 18px;
- border-radius: 3px;
- text-align: center;
- text-decoration: none;
- display: block;
- margin-top: 20px;
- font-size: 14px;
- cursor: pointer;
-}
-.talk-button:hover {
- background: $buttonHover;
-}
-.card-footer-button-div {
- display: flex;
- justify-content: space-around;
-}
-
-/* Media Query */
-@media (max-width: 1380px) {
- .card-title {
- font-size: 25px;
- }
-}
-@media (max-width: 768px) {
- .mask {
- clip-path: none;
- position: relative;
- }
- .talk-card-title {
- margin-top: 30px;
- }
- .talk-card-image {
- width: 100%;
- }
-
- .talk-button {
- background-color: $buttonColor;
- color: $textColorDark;
- width: 90px;
- padding: 10px 18px;
- border-radius: 3px;
- text-align: center;
- text-decoration: none;
- display: block;
- margin-top: 20px;
- font-size: 14px;
- cursor: pointer;
- transition: 0.2s ease-in;
- }
- .talk-button:hover {
- background: $buttonHover;
- }
- .card-footer-button-div {
- display: flex;
- justify-content: space-around;
- }
-
- .square {
- width: 100%;
- height: auto;
- padding-bottom: 30px;
- }
-}
diff --git a/src/containers/Main.js b/src/containers/Main.js
deleted file mode 100644
index 30701b2705..0000000000
--- a/src/containers/Main.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React, {useEffect, useState} from "react";
-import Header from "../components/header/Header";
-import Greeting from "./greeting/Greeting";
-import Skills from "./skills/Skills";
-import StackProgress from "./skillProgress/skillProgress";
-import WorkExperience from "./workExperience/WorkExperience";
-import Projects from "./projects/Projects";
-import StartupProject from "./StartupProjects/StartupProject";
-import Achievement from "./achievement/Achievement";
-import Blogs from "./blogs/Blogs";
-import Footer from "../components/footer/Footer";
-import Talks from "./talks/Talks";
-import Podcast from "./podcast/Podcast";
-import Education from "./education/Education";
-import ScrollToTopButton from "./topbutton/Top";
-import Twitter from "./twitter-embed/twitter";
-import Profile from "./profile/Profile";
-import SplashScreen from "./splashScreen/SplashScreen";
-import {splashScreen} from "../portfolio";
-import {StyleProvider} from "../contexts/StyleContext";
-import {useLocalStorage} from "../hooks/useLocalStorage";
-import "./Main.scss";
-
-const Main = () => {
- const darkPref = window.matchMedia("(prefers-color-scheme: dark)");
- const [isDark, setIsDark] = useLocalStorage("isDark", darkPref.matches);
- const [isShowingSplashAnimation, setIsShowingSplashAnimation] =
- useState(true);
-
- useEffect(() => {
- if (splashScreen.enabled) {
- const splashTimer = setTimeout(
- () => setIsShowingSplashAnimation(false),
- splashScreen.duration
- );
- return () => {
- clearTimeout(splashTimer);
- };
- }
- }, []);
-
- const changeTheme = () => {
- setIsDark(!isDark);
- };
-
- return (
-
-
-
-
-
- {isShowingSplashAnimation && splashScreen.enabled ? (
-
-
- );
-};
-
-export default Main;
diff --git a/src/containers/Main.scss b/src/containers/Main.scss
deleted file mode 100644
index 9081d3f1b9..0000000000
--- a/src/containers/Main.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import "../_globalColor";
-
-.dark-mode {
- background-color: $darkBackground;
- color: white;
- transition: "0.1s";
-}
diff --git a/src/containers/StartupProjects/StartupProject.js b/src/containers/StartupProjects/StartupProject.js
deleted file mode 100644
index 2ca1743e39..0000000000
--- a/src/containers/StartupProjects/StartupProject.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import React, {useContext} from "react";
-import "./StartupProjects.scss";
-import {bigProjects} from "../../portfolio";
-import {Fade} from "react-reveal";
-import StyleContext from "../../contexts/StyleContext";
-
-export default function StartupProject() {
- function openUrlInNewTab(url) {
- if (!url) {
- return;
- }
- var win = window.open(url, "_blank");
- win.focus();
- }
-
- const {isDark} = useContext(StyleContext);
- if (!bigProjects.display) {
- return null;
- }
- return (
-
-
-
-
- {bigProjects.title}
-- {bigProjects.subtitle} -
- -
- {bigProjects.projects.map((project, i) => {
- return (
-
-
- {project.image ? (
-
- );
- })}
-
- 
-
- ) : null}
-
-
- - {project.projectName} -
-- {project.projectDesc} -
- {project.footerLink ? ( -
- {project.footerLink.map((link, i) => {
- return (
- openUrlInNewTab(link.url)}
- >
- {link.name}
-
- );
- })}
-
- ) : null}
-
-
-
-
-
-
- - {achievementSection.title} -
-- {achievementSection.subtitle} -
-
- {achievementSection.achievementsCards.map((card, i) => {
- return (
-
-
-
-
-
- {blogSection.title}
-- {blogSection.subtitle} -
-
-
-
- {blogSection.displayMediumBlogs !== "true" ||
- mediumBlogs === "Error"
- ? blogSection.blogs.map((blog, i) => {
- return (
-
-
-
-
-
-
-
- {contactInfo.title}
-- {contactInfo.subtitle} -
-
- {contactInfo.number && (
- <>
-
- {contactInfo.number}
-
-
-
- - )} - - {contactInfo.email_address} - -
-
-
- -
- - )} - - {contactInfo.email_address} - -
-
-
- {illustration.animated ? (
- ![Man working]({require("../../assets/images/contactMailDark.svg")})
- )}
-
-
- )}
-
-
- );
- }
- return null;
-}
diff --git a/src/containers/education/Education.scss b/src/containers/education/Education.scss
deleted file mode 100644
index e3fa564e10..0000000000
--- a/src/containers/education/Education.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-.education-heading {
- font-size: 56px;
- font-weight: 400;
-}
-
-.education-section {
- display: flex;
- flex-direction: column;
- width: 90%;
- padding: 20px 0px;
- margin: 0px auto;
- margin-top: 2rem;
-}
-
-.education-section > * {
- flex: 1;
- margin-bottom: 30px;
-}
-
-.education-card-container {
- display: flex;
- flex-direction: column;
- padding-top: 20px;
-}
-
-@media (max-width: 1380px) {
- .education-card-container {
- padding-top: 0px;
- }
- .education-heading {
- font-size: 40px;
- }
- .education-text-subtitle {
- font-size: 18px;
- text-align: center;
- }
-}
-
-@media (max-width: 768px) {
- .education-card-container {
- padding-top: 0px;
- }
- .education-heading {
- font-size: 30px;
- text-align: center;
- }
- .education-text-subtitle {
- font-size: 16px;
- }
-}
diff --git a/src/containers/greeting/Greeting.js b/src/containers/greeting/Greeting.js
deleted file mode 100644
index a2bc8eefc1..0000000000
--- a/src/containers/greeting/Greeting.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React, {useContext} from "react";
-import {Fade} from "react-reveal";
-import emoji from "react-easy-emoji";
-import "./Greeting.scss";
-import landingPerson from "../../assets/lottie/landingPerson";
-import DisplayLottie from "../../components/displayLottie/DisplayLottie";
-import SocialMedia from "../../components/socialMedia/SocialMedia";
-import Button from "../../components/button/Button";
-
-import {illustration, greeting} from "../../portfolio";
-import StyleContext from "../../contexts/StyleContext";
-
-export default function Greeting() {
- const {isDark} = useContext(StyleContext);
- if (!greeting.displayGreeting) {
- return null;
- }
- return (
- Education
-
- {educationInfo.schools.map((school, index) => (
-
-
-
-
-
-
-
-
-
- - {" "} - {greeting.title}{" "} - {emoji("👋")} -
-- {greeting.subTitle} -
-
-
- {greeting.resumeLink && (
-
- )}
-
-
- {illustration.animated ? (
- ![man sitting on table]({require("../../assets/images/manOnTable.svg")})
- )}
-
-
- )}
-
-
- );
-}
diff --git a/src/containers/loading/loading.scss b/src/containers/loading/loading.scss
deleted file mode 100644
index a81fb75da1..0000000000
--- a/src/containers/loading/loading.scss
+++ /dev/null
@@ -1,151 +0,0 @@
-@import "../../_globalColor";
-
-.sk-circle {
- margin: 100px auto;
- width: 40px;
- height: 40px;
- position: relative;
-}
-.sk-circle .sk-child {
- width: 100%;
- height: 100%;
- position: absolute;
- left: 0;
- top: 0;
-}
-.sk-circle .sk-child:before {
- content: "";
- display: block;
- margin: 0 auto;
- width: 15%;
- height: 15%;
- background-color: $iconBackground;
- border-radius: 100%;
- -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
- animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
-}
-.sk-circle .sk-circle2 {
- -webkit-transform: rotate(30deg);
- -ms-transform: rotate(30deg);
- transform: rotate(30deg);
-}
-.sk-circle .sk-circle3 {
- -webkit-transform: rotate(60deg);
- -ms-transform: rotate(60deg);
- transform: rotate(60deg);
-}
-.sk-circle .sk-circle4 {
- -webkit-transform: rotate(90deg);
- -ms-transform: rotate(90deg);
- transform: rotate(90deg);
-}
-.sk-circle .sk-circle5 {
- -webkit-transform: rotate(120deg);
- -ms-transform: rotate(120deg);
- transform: rotate(120deg);
-}
-.sk-circle .sk-circle6 {
- -webkit-transform: rotate(150deg);
- -ms-transform: rotate(150deg);
- transform: rotate(150deg);
-}
-.sk-circle .sk-circle7 {
- -webkit-transform: rotate(180deg);
- -ms-transform: rotate(180deg);
- transform: rotate(180deg);
-}
-.sk-circle .sk-circle8 {
- -webkit-transform: rotate(210deg);
- -ms-transform: rotate(210deg);
- transform: rotate(210deg);
-}
-.sk-circle .sk-circle9 {
- -webkit-transform: rotate(240deg);
- -ms-transform: rotate(240deg);
- transform: rotate(240deg);
-}
-.sk-circle .sk-circle10 {
- -webkit-transform: rotate(270deg);
- -ms-transform: rotate(270deg);
- transform: rotate(270deg);
-}
-.sk-circle .sk-circle11 {
- -webkit-transform: rotate(300deg);
- -ms-transform: rotate(300deg);
- transform: rotate(300deg);
-}
-.sk-circle .sk-circle12 {
- -webkit-transform: rotate(330deg);
- -ms-transform: rotate(330deg);
- transform: rotate(330deg);
-}
-.sk-circle .sk-circle2:before {
- -webkit-animation-delay: -1.1s;
- animation-delay: -1.1s;
-}
-.sk-circle .sk-circle3:before {
- -webkit-animation-delay: -1s;
- animation-delay: -1s;
-}
-.sk-circle .sk-circle4:before {
- -webkit-animation-delay: -0.9s;
- animation-delay: -0.9s;
-}
-.sk-circle .sk-circle5:before {
- -webkit-animation-delay: -0.8s;
- animation-delay: -0.8s;
-}
-.sk-circle .sk-circle6:before {
- -webkit-animation-delay: -0.7s;
- animation-delay: -0.7s;
-}
-.sk-circle .sk-circle7:before {
- -webkit-animation-delay: -0.6s;
- animation-delay: -0.6s;
-}
-.sk-circle .sk-circle8:before {
- -webkit-animation-delay: -0.5s;
- animation-delay: -0.5s;
-}
-.sk-circle .sk-circle9:before {
- -webkit-animation-delay: -0.4s;
- animation-delay: -0.4s;
-}
-.sk-circle .sk-circle10:before {
- -webkit-animation-delay: -0.3s;
- animation-delay: -0.3s;
-}
-.sk-circle .sk-circle11:before {
- -webkit-animation-delay: -0.2s;
- animation-delay: -0.2s;
-}
-.sk-circle .sk-circle12:before {
- -webkit-animation-delay: -0.1s;
- animation-delay: -0.1s;
-}
-
-@-webkit-keyframes sk-circleBounceDelay {
- 0%,
- 80%,
- 100% {
- -webkit-transform: scale(0);
- transform: scale(0);
- }
- 40% {
- -webkit-transform: scale(1);
- transform: scale(1);
- }
-}
-
-@keyframes sk-circleBounceDelay {
- 0%,
- 80%,
- 100% {
- -webkit-transform: scale(0);
- transform: scale(0);
- }
- 40% {
- -webkit-transform: scale(1);
- transform: scale(1);
- }
-}
diff --git a/src/containers/podcast/Podcast.js b/src/containers/podcast/Podcast.js
deleted file mode 100644
index 911de1e10b..0000000000
--- a/src/containers/podcast/Podcast.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, {useContext} from "react";
-import "./Podcast.scss";
-import {podcastSection} from "../../portfolio";
-import {Fade} from "react-reveal";
-import StyleContext from "../../contexts/StyleContext";
-
-export default function Podcast() {
- const {isDark} = useContext(StyleContext);
-
- if (!podcastSection)
- console.error("podcastSection object for Podcast section is missing");
-
- if (!podcastSection.display) {
- return null;
- }
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {podcastSection.title}
-- {podcastSection.subtitle} -
-
- {podcastSection.podcast.map((podcastLink, i) => {
- if (!podcastLink) {
- console.log(
- `Podcast link for ${podcastSection.title} is missing`
- );
- }
- return (
-
-
-
-
- );
- })}
-
-
- Open Source Projects
-
- {repo.map((v, i) => {
- if (!v) {
- console.error(
- `Github Object for repository number : ${i} is undefined`
- );
- }
- return (
-
-
-
-
-
-
-
- Proficiency
- {techStack.experience.map((exp, i) => { - const progressStyle = { - width: exp.progressPercentage - }; - return ( -
-
- );
- })}
- {exp.Stack}
-
-
-
-
- {illustration.animated ? (
- ![Skills]({require("../../assets/images/skill.svg")})
- )}
-
-
- )}
-
-
- );
-}
diff --git a/src/containers/skills/Skills.scss b/src/containers/skills/Skills.scss
deleted file mode 100644
index 0bfa2ef4a3..0000000000
--- a/src/containers/skills/Skills.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-@import "../../_globalColor";
-
-.skills-main-div {
- display: flex;
- width: 100%;
- overflow: hidden;
-}
-
-.skills-text-div {
- margin-left: 50px;
-}
-
-.skills-main-div > * {
- flex: 1;
- margin-bottom: 30px;
-}
-
-.skills-image-div > img {
- max-width: 100%;
- height: auto;
-}
-
-.skills-heading {
- font-size: 56px;
- font-weight: 400;
-}
-.subTitle {
- color: $subTitle;
-}
-
-/* Media Query */
-@media (max-width: 1380px) {
- .skills-heading {
- font-size: 40px;
- }
-}
-@media (max-width: 768px) {
- .skills-heading {
- font-size: 30px;
- text-align: center;
- }
- .greeting-text-p {
- font-size: 16px;
- line-height: normal;
- }
- .skills-main-div {
- flex-direction: column;
- }
- .skills-text-div {
- margin-left: 0px;
- margin: 20px;
- }
- .skills-text {
- font-size: 16px;
- }
- .skills-text-subtitle {
- font-size: 16px;
- text-align: center;
- }
- .skills-image-div {
- /* display: none; */
- order: 2;
- }
-}
diff --git a/src/containers/splashScreen/SplashScreen.css b/src/containers/splashScreen/SplashScreen.css
deleted file mode 100644
index 52499fa822..0000000000
--- a/src/containers/splashScreen/SplashScreen.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.splash-container {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- min-height: 100vh;
-}
-
-.splash-animation-container {
- height: 50vh;
-}
-
-.splash-title-container {
- font-size: 2.5rem;
- text-decoration: none;
-}
-.splash-title {
- font-family: "Agustina Regular", cursive;
- font-weight: bold;
- font-variant-ligatures: no-common-ligatures;
- -webkit-font-variant-ligatures: no-common-ligatures;
- padding: 0 20px;
-}
diff --git a/src/containers/splashScreen/SplashScreen.js b/src/containers/splashScreen/SplashScreen.js
deleted file mode 100644
index 33ba1f2e6b..0000000000
--- a/src/containers/splashScreen/SplashScreen.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React, {useContext} from "react";
-import "./SplashScreen.css";
-import DisplayLottie from "../../components/displayLottie/DisplayLottie";
-import {greeting, splashScreen} from "../../portfolio";
-import StyleContext from "../../contexts/StyleContext";
-
-export default function SplashScreen() {
- const {isDark} = useContext(StyleContext);
- return (
-
-
-
-
-
-
-
- {illustration.animated ? (
- ![Man Working]({require("../../assets/images/developerActivity.svg")})
- )}
-
-
- )}
-
-
- - {skillsSection.title}{" "} -
-- {skillsSection.subTitle} -
-
- {skillsSection.skills.map((skills, i) => {
- return (
-
- - {skills} -
- ); - })} -
-
- );
-}
diff --git a/src/containers/talks/Talks.js b/src/containers/talks/Talks.js
deleted file mode 100644
index ba90547675..0000000000
--- a/src/containers/talks/Talks.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React, {useContext} from "react";
-import "./Talks.scss";
-import TalkCard from "../../components/talkCard/TalkCard";
-import {talkSection} from "../../portfolio";
-import {Fade} from "react-reveal";
-import StyleContext from "../../contexts/StyleContext";
-
-export default function Talks() {
- const {isDark} = useContext(StyleContext);
- if (!talkSection.display) {
- return null;
- }
- return (
-
-
-
- <
- {greeting.username}
- />
-
-
-
-
-
- {talkSection.title}
-- {talkSection.subtitle} -
- {talkSection.talks.map((talk, i) => { - return ( -Can't load? Check privacy protection settings
-
-
-
-
-
-
-
- );
- }
- return null;
-}
diff --git a/src/containers/workExperience/WorkExperience.scss b/src/containers/workExperience/WorkExperience.scss
deleted file mode 100644
index 69e64e2638..0000000000
--- a/src/containers/workExperience/WorkExperience.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-.experience-cards-div {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
- gap: 1rem 1rem;
-}
-
-.experience-heading {
- font-size: 56px;
- font-weight: 400;
-}
-
-.experience-container {
- display: flex;
- width: 90%;
- padding: 20px 10px;
- margin: 0px auto;
- margin-top: 2rem;
-}
-
-.experience-container > * {
- flex: 1;
-}
-
-/* Media Query */
-
-@media (max-width: 1380px) {
- .experience-heading {
- font-size: 40px;
- }
-}
-
-@media (max-width: 768px) {
- .experience-heading {
- font-size: 30px;
- text-align: center;
- }
-}
diff --git a/src/contexts/StyleContext.js b/src/contexts/StyleContext.js
deleted file mode 100644
index 6a948b5343..0000000000
--- a/src/contexts/StyleContext.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-
-const StyleContext = React.createContext();
-
-export const StyleProvider = StyleContext.Provider;
-export const StyleConsumer = StyleContext.Consumer;
-
-export default StyleContext;
diff --git a/src/hooks/useLocalStorage.js b/src/hooks/useLocalStorage.js
deleted file mode 100644
index d61e097d68..0000000000
--- a/src/hooks/useLocalStorage.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import {useState} from "react";
-
-export const useLocalStorage = (key, initialValue) => {
- // State to store our value
- // Pass initial state function to useState so logic is only executed once
- const [storedValue, setStoredValue] = useState(() => {
- try {
- // Get from local storage by key
- const item = window.localStorage.getItem(key);
- // Parse stored json or if none return initialValue
- return item ? JSON.parse(item) : initialValue;
- } catch (error) {
- // If error also return initialValue
- console.log(error);
- return initialValue;
- }
- });
-
- // Return a wrapped version of useState's setter function that ...
- // ... persists the new value to localStorage.
- const setValue = value => {
- try {
- // Allow value to be a function so we have same API as useState
- const valueToStore =
- value instanceof Function ? value(storedValue) : value;
- // Save state
- setStoredValue(valueToStore);
- // Save to local storage
- window.localStorage.setItem(key, JSON.stringify(valueToStore));
- } catch (error) {
- // A more advanced implementation would handle the error case
- console.log(error);
- }
- };
-
- return [storedValue, setValue];
-};
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index d3dbe8f04a..0000000000
--- a/src/index.css
+++ /dev/null
@@ -1,36 +0,0 @@
-@font-face {
- font-family: "Agustina Regular";
- font-style: normal;
- font-weight: normal;
- src: local("Agustina Regular"),
- url("./assets/fonts/Agustina.woff") format("woff");
- font-display: swap;
-}
-@font-face {
- font-family: "Montserrat";
- src: local("Montserrat"),
- url("./assets/fonts/Montserrat-Regular.ttf") format("woff");
- font-display: swap;
-}
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
- monospace;
-}
-html,
-body {
- scroll-behavior: smooth;
-}
-body {
- margin: 0;
- font: 19px / 23px Montserrat, "Montserrat", sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-/* Media Query */
-@media (max-width: 1380px) {
- html,
- body {
- font-size: rem;
- line-height: normal;
- }
-}
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index 48da9f652b..0000000000
--- a/src/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import "./index.css";
-import App from "./App";
-import * as serviceWorker from "./serviceWorker";
-
-ReactDOM.render(
-
-
-
- Experiences
-
- {workExperiences.experience.map((card, i) => {
- return (
-
- \n openUrlInNewTab(repo.node.url, repo.node.name)}\n >\n
\n \n \n \n \n \n \n
\n {repo.node.name}
\n{repo.node.description}
\n\n \n \n \n \n \n \n \n \n \n
\n \n {repo.node.primaryLanguage !== null && (\n \n
\n {repo.node.primaryLanguage.name}
\n \n )}\n \n{repo.node.forkCount}
\n{repo.node.stargazers.totalCount}
\n\n
\n {formatFileSizeDisplay(repo.node.diskUsage)}
\n\n
\n Reach Out to me!
\n\n
\n \n
\n \n
\n {contactInfo.subtitle}
\n\"{emoji(String(prof.bio))}\"
\n {prof.location !== null && (\n\n \n \n \n \n {prof.location}\n \n
\n )}\n \n \n Open for opportunities: {prof.hireable}\n \n
\n \n
\n Can't load? Check privacy protection settings
\n {socialMediaLinks.github ? (\n \n \n \n \n ) : null}\n\n {socialMediaLinks.linkedin ? (\n \n \n \n \n ) : null}\n\n {socialMediaLinks.gmail ? (\n \n \n \n \n ) : null}\n\n {socialMediaLinks.gitlab ? (\n \n \n \n \n ) : null}\n\n {socialMediaLinks.facebook ? (\n \n \n \n \n ) : null}\n\n {socialMediaLinks.instagram ? (\n \n \n \n \n ) : null}\n\n {socialMediaLinks.twitter ? (\n \n \n \n \n ) : null}\n\n {socialMediaLinks.medium ? (\n \n \n \n \n ) : null}\n\n {socialMediaLinks.stackoverflow ? (\n \n \n \n \n ) : null}\n\n {socialMediaLinks.kaggle ? (\n \n \n \n \n ) : null}\n
\n );\n}\n","/* Change this file to get your personal Portfolio */\n\n// To change portfolio colors globally go to the _globalColor.scss file\n\nimport emoji from \"react-easy-emoji\";\nimport splashAnimation from \"./assets/lottie/splashAnimation\"; // Rename to your file name for custom animation\n\n\n// Splash Screen\n\nconst splashScreen = {\n enabled: true, // set false to disable splash screen\n animation: splashAnimation,\n duration: 2000 // Set animation duration as per your animation\n};\n\n// Summary And Greeting Section\n\nconst illustration = {\n animated: true // Set to false to use static SVG\n};\n\nconst greeting = {\n username: \"Aniket Mishra\",\n title: \"Hi all, I'm Aniket\",\n subTitle: emoji(\n \"A passionate Android Developer 🚀 having an experience of building Mobile applications with Koltin Jetpack Compose, and yes I am also a pythonist 🐍.\"\n ),\n resumeLink:\n \"\", // Set to empty to hide the button\n displayGreeting: true // Set false to hide this section, defaults to true\n};\n\n// Social Media Links\n\nconst socialMediaLinks = {\n github: \"https://github.com/aniketmishr\",\n linkedin: \"https://www.linkedin.com/in/aniketmishr/\",\n gmail: \"aniketmishra3476@gmail.com\",\n gitlab: \"\",\n facebook: \"\",\n medium: \"https://medium.com/@aniket_mishr\",\n stackoverflow: \"\",\n twitter: \"https://twitter.com/@aniket_mishr\",\n // Instagram, Twitter and Kaggle are also supported in the links!\n // To customize icons and social links, tweak src/components/SocialMedia\n display: true // Set true to display this section, defaults to false\n};\n\n// Skills Section\n\nconst skillsSection = {\n title: \"What I do\",\n subTitle: \"A Developer wwho loves crafting exceptional products and seeks to venture into a vast world of technology\",\n skills: [\n emoji(\n \"⚡ Develop innovative and interactive mobile application\"\n ),\n emoji(\"⚡ Building services and products from first principle\"),\n emoji(\n \"⚡ Develop Desktop app with python\"\n )\n ],\n\n /* Make Sure to include correct Font Awesome Classname to view your icon\nhttps://fontawesome.com/icons?d=gallery */\n\n softwareSkills: [\n {\n skillName: \"Android\",\n fontAwesomeClassname: \"fab fa-android\"\n },\n {\n skillName: \"sql-database\",\n fontAwesomeClassname: \"fas fa-database\"\n },\n {\n skillName: \"python\",\n fontAwesomeClassname: \"fab fa-python\"\n },\n ],\n display: true // Set false to hide this section, defaults to true\n};\n\n// Education Section\n\nconst educationInfo = {\n display: true, // Set false to hide this section, defaults to true\n schools: [\n {\n schoolName: \"College of Technology and Engineering\",\n logo: require(\"./assets/images/ctae-logo.png\"),\n subHeader: \"Bachelors in Artifical Intelligence & Data Science Engineering\",\n duration: \"August 2023 - September 2027\",\n desc: \"Currently in 1st year \",\n descBullets: []\n }\n ]\n};\n\n// Your top 3 proficient stacks/tech experience\n\nconst techStack = {\n viewSkillBars: true, //Set it to true to show Proficiency Section\n experience: [\n {\n Stack: \"Frontend/Design\", //Insert stack or technology you have experience in\n progressPercentage: \"90%\" //Insert relative proficiency in percentage\n },\n {\n Stack: \"Backend\",\n progressPercentage: \"70%\"\n },\n {\n Stack: \"Programming\",\n progressPercentage: \"60%\"\n }\n ],\n displayCodersrank: false // Set true to display codersrank badges section need to changes your username in src/containers/skillProgress/skillProgress.js:17:62, defaults to false\n};\n\n// Work experience section\n\nconst workExperiences = {\n display: false, //Set it to true to show workExperiences Section\n experience: [\n {\n role: \"Software Engineer\",\n company: \"Facebook\",\n companylogo: require(\"./assets/images/facebookLogo.png\"),\n date: \"June 2018 – Present\",\n desc: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\",\n descBullets: [\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit\",\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit\"\n ]\n },\n {\n role: \"Front-End Developer\",\n company: \"Quora\",\n companylogo: require(\"./assets/images/quoraLogo.png\"),\n date: \"May 2017 – May 2018\",\n desc: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\"\n },\n {\n role: \"Software Engineer Intern\",\n company: \"Airbnb\",\n companylogo: require(\"./assets/images/airbnbLogo.png\"),\n date: \"Jan 2015 – Sep 2015\",\n desc: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\"\n }\n ]\n};\n\n/* Your Open Source Section to View Your Github Pinned Projects\nTo know how to get github key look at readme.md */\n\nconst openSource = {\n showGithubProfile: \"true\", // Set true or false to show Contact profile using Github, defaults to true\n display: true // Set false to hide this section, defaults to true\n};\n\n// Some big projects you have worked on\n\nconst bigProjects = {\n title: \"Big Projects\",\n subtitle: \"SOME STARTUPS AND COMPANIES THAT I HELPED TO CREATE THEIR TECH\",\n projects: [\n {\n image: require(\"./assets/images/saayaHealthLogo.webp\"),\n projectName: \"Saayahealth\",\n projectDesc: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit\",\n footerLink: [\n {\n name: \"Visit Website\",\n url: \"http://saayahealth.com/\"\n }\n // you can add extra buttons here.\n ]\n },\n {\n image: require(\"./assets/images/nextuLogo.webp\"),\n projectName: \"Nextu\",\n projectDesc: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit\",\n footerLink: [\n {\n name: \"Visit Website\",\n url: \"http://nextu.se/\"\n }\n ]\n }\n ],\n display: false // Set false to hide this section, defaults to true\n};\n\n// Achievement Section\n// Include certificates, talks etc\n\nconst achievementSection = {\n title: emoji(\"Achievements And Certifications 🏆 \"),\n subtitle:\n \"Achievements, Certifications, Award Letters and Some Cool Stuff that I have done !\",\n\n achievementsCards: [\n {\n title: \"Google Code-In Finalist\",\n subtitle:\n \"First Pakistani to be selected as Google Code-in Finalist from 4000 students from 77 different countries.\",\n image: require(\"./assets/images/codeInLogo.webp\"),\n imageAlt: \"Google Code-In Logo\",\n footerLink: [\n {\n name: \"Certification\",\n url: \"https://drive.google.com/file/d/0B7kazrtMwm5dYkVvNjdNWjNybWJrbndFSHpNY2NFV1p4YmU0/view?usp=sharing\"\n },\n {\n name: \"Award Letter\",\n url: \"https://drive.google.com/file/d/0B7kazrtMwm5dekxBTW5hQkg2WXUyR3QzQmR0VERiLXlGRVdF/view?usp=sharing\"\n },\n {\n name: \"Google Code-in Blog\",\n url: \"https://opensource.googleblog.com/2019/01/google-code-in-2018-winners.html\"\n }\n ]\n },\n {\n title: \"Google Assistant Action\",\n subtitle:\n \"Developed a Google Assistant Action JavaScript Guru that is available on 2 Billion devices world wide.\",\n image: require(\"./assets/images/googleAssistantLogo.webp\"),\n imageAlt: \"Google Assistant Action Logo\",\n footerLink: [\n {\n name: \"View Google Assistant Action\",\n url: \"https://assistant.google.com/services/a/uid/000000100ee688ee?hl=en\"\n }\n ]\n },\n\n {\n title: \"PWA Web App Developer\",\n subtitle: \"Completed Certifcation from SMIT for PWA Web App Development\",\n image: require(\"./assets/images/pwaLogo.webp\"),\n imageAlt: \"PWA Logo\",\n footerLink: [\n {name: \"Certification\", url: \"\"},\n {\n name: \"Final Project\",\n url: \"https://pakistan-olx-1.firebaseapp.com/\"\n }\n ]\n }\n ],\n display: false // Set false to hide this section, defaults to true\n};\n\n// Blogs Section\n\nconst blogSection = {\n title: \"Blogs\",\n subtitle:\n \"With Love for Developing cool stuff, I love to write and teach others what I have learnt.\",\n displayMediumBlogs: \"true\", // Set true to display fetched medium blogs instead of hardcoded ones\n blogs: [\n {\n url: \"https://blog.usejournal.com/create-a-google-assistant-action-and-win-a-google-t-shirt-and-cloud-credits-4a8d86d76eae\",\n title: \"Win a Google Assistant Tshirt and $200 in Google Cloud Credits\",\n description:\n \"Do you want to win $200 and Google Assistant Tshirt by creating a Google Assistant Action in less then 30 min?\"\n },\n {\n url: \"https://medium.com/@saadpasta/why-react-is-the-best-5a97563f423e\",\n title: \"Why REACT is The Best?\",\n description:\n \"React is a JavaScript library for building User Interface. It is maintained by Facebook and a community of individual developers and companies.\"\n }\n ],\n display: false // Set false to hide this section, defaults to true\n};\n\n// Talks Sections\n\nconst talkSection = {\n title: \"TALKS\",\n subtitle: emoji(\n \"I LOVE TO SHARE MY LIMITED KNOWLEDGE AND GET A SPEAKER BADGE 😅\"\n ),\n\n talks: [\n {\n title: \"Build Actions For Google Assistant\",\n subtitle: \"Codelab at GDG DevFest Karachi 2019\",\n slides_url: \"https://bit.ly/saadpasta-slides\",\n event_url: \"https://www.facebook.com/events/2339906106275053/\"\n }\n ],\n display: false // Set false to hide this section, defaults to true\n};\n\n// Podcast Section\n\nconst podcastSection = {\n title: emoji(\"Podcast 🎙️\"),\n subtitle: \"I LOVE TO TALK ABOUT MYSELF AND TECHNOLOGY\",\n\n // Please Provide with Your Podcast embeded Link\n podcast: [\n \"https://anchor.fm/codevcast/embed/episodes/DevStory---Saad-Pasta-from-Karachi--Pakistan-e9givv/a-a15itvo\"\n ],\n display: false // Set false to hide this section, defaults to true\n};\n\nconst contactInfo = {\n title: emoji(\"Contact Me ☎️\"),\n subtitle:\n \"Discuss a project or just want to say hi? My Inbox is open for all.\",\n number: \"\",\n email_address: \"aniketmishra3476@gmail.com\"\n};\n\n// Twitter Section\n\nconst twitterDetails = {\n userName: \"aniket_mishr\", //Replace \"twitter\" with your twitter username without @\n display: true // Set true to display this section, defaults to false\n};\n\nconst isHireable = true; // Set false if you are not looking for a job. Also isHireable will be display as Open for opportunities: Yes/No in the GitHub footer\n\nexport {\n illustration,\n greeting,\n socialMediaLinks,\n splashScreen,\n skillsSection,\n educationInfo,\n techStack,\n workExperiences,\n openSource,\n bigProjects,\n achievementSection,\n blogSection,\n talkSection,\n podcastSection,\n contactInfo,\n twitterDetails,\n isHireable\n};\n","/*!\n Copyright (c) 2015 Jed Watson.\n Based on code that is Copyright 2013-2015, Facebook, Inc.\n All rights reserved.\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar canUseDOM = !!(\n\t\ttypeof window !== 'undefined' &&\n\t\twindow.document &&\n\t\twindow.document.createElement\n\t);\n\n\tvar ExecutionEnvironment = {\n\n\t\tcanUseDOM: canUseDOM,\n\n\t\tcanUseWorkers: typeof Worker !== 'undefined',\n\n\t\tcanUseEventListeners:\n\t\t\tcanUseDOM && !!(window.addEventListener || window.attachEvent),\n\n\t\tcanUseViewport: canUseDOM && !!window.screen\n\n\t};\n\n\tif (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\tdefine(function () {\n\t\t\treturn ExecutionEnvironment;\n\t\t});\n\t} else if (typeof module !== 'undefined' && module.exports) {\n\t\tmodule.exports = ExecutionEnvironment;\n\t} else {\n\t\twindow.ExecutionEnvironment = ExecutionEnvironment;\n\t}\n\n}());\n","import lottie from \"lottie-web\";\nimport React, { useEffect, useRef, useState, } from \"react\";\nconst useLottie = (props, style) => {\n const { animationData, loop, autoplay, initialSegment, onComplete, onLoopComplete, onEnterFrame, onSegmentStart, onConfigReady, onDataReady, onDataFailed, onLoadedImages, onDOMLoaded, onDestroy, \n // Specified here to take them out from the 'rest'\n lottieRef, renderer, name, assetsPath, rendererSettings, \n // TODO: find a better way to extract the html props to avoid specifying\n // all the props that we want to exclude (as you can see above)\n ...rest } = props;\n const [animationLoaded, setAnimationLoaded] = useState(false);\n const animationInstanceRef = useRef();\n const animationContainer = useRef(null);\n /*\n ======================================\n INTERACTION METHODS\n ======================================\n */\n /**\n * Play\n */\n const play = () => {\n var _a;\n (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.play();\n };\n /**\n * Stop\n */\n const stop = () => {\n var _a;\n (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.stop();\n };\n /**\n * Pause\n */\n const pause = () => {\n var _a;\n (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.pause();\n };\n /**\n * Set animation speed\n * @param speed\n */\n const setSpeed = (speed) => {\n var _a;\n (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setSpeed(speed);\n };\n /**\n * Got to frame and play\n * @param value\n * @param isFrame\n */\n const goToAndPlay = (value, isFrame) => {\n var _a;\n (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.goToAndPlay(value, isFrame);\n };\n /**\n * Got to frame and stop\n * @param value\n * @param isFrame\n */\n const goToAndStop = (value, isFrame) => {\n var _a;\n (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.goToAndStop(value, isFrame);\n };\n /**\n * Set animation direction\n * @param direction\n */\n const setDirection = (direction) => {\n var _a;\n (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setDirection(direction);\n };\n /**\n * Play animation segments\n * @param segments\n * @param forceFlag\n */\n const playSegments = (segments, forceFlag) => {\n var _a;\n (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.playSegments(segments, forceFlag);\n };\n /**\n * Set sub frames\n * @param useSubFrames\n */\n const setSubframe = (useSubFrames) => {\n var _a;\n (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setSubframe(useSubFrames);\n };\n /**\n * Get animation duration\n * @param inFrames\n */\n const getDuration = (inFrames) => { var _a; return (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.getDuration(inFrames); };\n /**\n * Destroy animation\n */\n const destroy = () => {\n var _a;\n (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();\n // Removing the reference to the animation so separate cleanups are skipped.\n // Without it the internal `lottie-react` instance throws exceptions as it already cleared itself on destroy.\n animationInstanceRef.current = undefined;\n };\n /*\n ======================================\n LOTTIE\n ======================================\n */\n /**\n * Load a new animation, and if it's the case, destroy the previous one\n * @param {Object} forcedConfigs\n */\n const loadAnimation = (forcedConfigs = {}) => {\n var _a;\n // Return if the container ref is null\n if (!animationContainer.current) {\n return;\n }\n // Destroy any previous instance\n (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();\n // Build the animation configuration\n const config = {\n ...props,\n ...forcedConfigs,\n container: animationContainer.current,\n };\n // Save the animation instance\n animationInstanceRef.current = lottie.loadAnimation(config);\n setAnimationLoaded(!!animationInstanceRef.current);\n // Return a function that will clean up\n return () => {\n var _a;\n (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();\n animationInstanceRef.current = undefined;\n };\n };\n /**\n * (Re)Initialize when animation data changed\n */\n useEffect(() => {\n const onUnmount = loadAnimation();\n // Clean up on unmount\n return () => onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [animationData, loop]);\n // Update the autoplay state\n useEffect(() => {\n if (!animationInstanceRef.current) {\n return;\n }\n animationInstanceRef.current.autoplay = !!autoplay;\n }, [autoplay]);\n // Update the initial segment state\n useEffect(() => {\n if (!animationInstanceRef.current) {\n return;\n }\n // When null should reset to default animation length\n if (!initialSegment) {\n animationInstanceRef.current.resetSegments(true);\n return;\n }\n // If it's not a valid segment, do nothing\n if (!Array.isArray(initialSegment) || !initialSegment.length) {\n return;\n }\n // If the current position it's not in the new segment\n // set the current position to start\n if (animationInstanceRef.current.currentRawFrame < initialSegment[0] ||\n animationInstanceRef.current.currentRawFrame > initialSegment[1]) {\n animationInstanceRef.current.currentRawFrame = initialSegment[0];\n }\n // Update the segment\n animationInstanceRef.current.setSegment(initialSegment[0], initialSegment[1]);\n }, [initialSegment]);\n /*\n ======================================\n EVENTS\n ======================================\n */\n /**\n * Reinitialize listener on change\n */\n useEffect(() => {\n const partialListeners = [\n { name: \"complete\", handler: onComplete },\n { name: \"loopComplete\", handler: onLoopComplete },\n { name: \"enterFrame\", handler: onEnterFrame },\n { name: \"segmentStart\", handler: onSegmentStart },\n { name: \"config_ready\", handler: onConfigReady },\n { name: \"data_ready\", handler: onDataReady },\n { name: \"data_failed\", handler: onDataFailed },\n { name: \"loaded_images\", handler: onLoadedImages },\n { name: \"DOMLoaded\", handler: onDOMLoaded },\n { name: \"destroy\", handler: onDestroy },\n ];\n const listeners = partialListeners.filter((listener) => listener.handler != null);\n if (!listeners.length) {\n return;\n }\n const deregisterList = listeners.map(\n /**\n * Handle the process of adding an event listener\n * @param {Listener} listener\n * @return {Function} Function that deregister the listener\n */\n (listener) => {\n var _a;\n (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener(listener.name, listener.handler);\n // Return a function to deregister this listener\n return () => {\n var _a;\n (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(listener.name, listener.handler);\n };\n });\n // Deregister listeners on unmount\n return () => {\n deregisterList.forEach((deregister) => deregister());\n };\n }, [\n onComplete,\n onLoopComplete,\n onEnterFrame,\n onSegmentStart,\n onConfigReady,\n onDataReady,\n onDataFailed,\n onLoadedImages,\n onDOMLoaded,\n onDestroy,\n ]);\n /**\n * Build the animation view\n */\n const View = React.createElement(\"div\", { style: style, ref: animationContainer, ...rest });\n return {\n View,\n play,\n stop,\n pause,\n setSpeed,\n goToAndStop,\n goToAndPlay,\n setDirection,\n playSegments,\n setSubframe,\n getDuration,\n destroy,\n animationContainerRef: animationContainer,\n animationLoaded,\n animationItem: animationInstanceRef.current,\n };\n};\nexport default useLottie;\n","import { useEffect } from \"react\";\n// helpers\nexport function getContainerVisibility(container) {\n const { top, height } = container.getBoundingClientRect();\n const current = window.innerHeight - top;\n const max = window.innerHeight + height;\n return current / max;\n}\nexport function getContainerCursorPosition(container, cursorX, cursorY) {\n const { top, left, width, height } = container.getBoundingClientRect();\n const x = (cursorX - left) / width;\n const y = (cursorY - top) / height;\n return { x, y };\n}\nexport const useInitInteractivity = ({ wrapperRef, animationItem, mode, actions, }) => {\n useEffect(() => {\n const wrapper = wrapperRef.current;\n if (!wrapper || !animationItem || !actions.length) {\n return;\n }\n animationItem.stop();\n const scrollModeHandler = () => {\n let assignedSegment = null;\n const scrollHandler = () => {\n const currentPercent = getContainerVisibility(wrapper);\n // Find the first action that satisfies the current position conditions\n const action = actions.find(({ visibility }) => visibility &&\n currentPercent >= visibility[0] &&\n currentPercent <= visibility[1]);\n // Skip if no matching action was found!\n if (!action) {\n return;\n }\n if (action.type === \"seek\" &&\n action.visibility &&\n action.frames.length === 2) {\n // Seek: Go to a frame based on player scroll position action\n const frameToGo = action.frames[0] +\n Math.ceil(((currentPercent - action.visibility[0]) /\n (action.visibility[1] - action.visibility[0])) *\n action.frames[1]);\n //! goToAndStop must be relative to the start of the current segment\n animationItem.goToAndStop(frameToGo - animationItem.firstFrame - 1, true);\n }\n if (action.type === \"loop\") {\n // Loop: Loop a given frames\n if (assignedSegment === null) {\n // if not playing any segments currently. play those segments and save to state\n animationItem.playSegments(action.frames, true);\n assignedSegment = action.frames;\n }\n else {\n // if playing any segments currently.\n //check if segments in state are equal to the frames selected by action\n if (assignedSegment !== action.frames) {\n // if they are not equal. new segments are to be loaded\n animationItem.playSegments(action.frames, true);\n assignedSegment = action.frames;\n }\n else if (animationItem.isPaused) {\n // if they are equal the play method must be called only if lottie is paused\n animationItem.playSegments(action.frames, true);\n assignedSegment = action.frames;\n }\n }\n }\n if (action.type === \"play\" && animationItem.isPaused) {\n // Play: Reset segments and continue playing full animation from current position\n animationItem.resetSegments(true);\n animationItem.play();\n }\n if (action.type === \"stop\") {\n // Stop: Stop playback\n animationItem.goToAndStop(action.frames[0] - animationItem.firstFrame - 1, true);\n }\n };\n document.addEventListener(\"scroll\", scrollHandler);\n return () => {\n document.removeEventListener(\"scroll\", scrollHandler);\n };\n };\n const cursorModeHandler = () => {\n const handleCursor = (_x, _y) => {\n let x = _x;\n let y = _y;\n // Resolve cursor position if cursor is inside container\n if (x !== -1 && y !== -1) {\n // Get container cursor position\n const pos = getContainerCursorPosition(wrapper, x, y);\n // Use the resolved position\n x = pos.x;\n y = pos.y;\n }\n // Find the first action that satisfies the current position conditions\n const action = actions.find(({ position }) => {\n if (position &&\n Array.isArray(position.x) &&\n Array.isArray(position.y)) {\n return (x >= position.x[0] &&\n x <= position.x[1] &&\n y >= position.y[0] &&\n y <= position.y[1]);\n }\n if (position &&\n !Number.isNaN(position.x) &&\n !Number.isNaN(position.y)) {\n return x === position.x && y === position.y;\n }\n return false;\n });\n // Skip if no matching action was found!\n if (!action) {\n return;\n }\n // Process action types:\n if (action.type === \"seek\" &&\n action.position &&\n Array.isArray(action.position.x) &&\n Array.isArray(action.position.y) &&\n action.frames.length === 2) {\n // Seek: Go to a frame based on player scroll position action\n const xPercent = (x - action.position.x[0]) /\n (action.position.x[1] - action.position.x[0]);\n const yPercent = (y - action.position.y[0]) /\n (action.position.y[1] - action.position.y[0]);\n animationItem.playSegments(action.frames, true);\n animationItem.goToAndStop(Math.ceil(((xPercent + yPercent) / 2) *\n (action.frames[1] - action.frames[0])), true);\n }\n if (action.type === \"loop\") {\n animationItem.playSegments(action.frames, true);\n }\n if (action.type === \"play\") {\n // Play: Reset segments and continue playing full animation from current position\n if (animationItem.isPaused) {\n animationItem.resetSegments(false);\n }\n animationItem.playSegments(action.frames);\n }\n if (action.type === \"stop\") {\n animationItem.goToAndStop(action.frames[0], true);\n }\n };\n const mouseMoveHandler = (ev) => {\n handleCursor(ev.clientX, ev.clientY);\n };\n const mouseOutHandler = () => {\n handleCursor(-1, -1);\n };\n wrapper.addEventListener(\"mousemove\", mouseMoveHandler);\n wrapper.addEventListener(\"mouseout\", mouseOutHandler);\n return () => {\n wrapper.removeEventListener(\"mousemove\", mouseMoveHandler);\n wrapper.removeEventListener(\"mouseout\", mouseOutHandler);\n };\n };\n switch (mode) {\n case \"scroll\":\n return scrollModeHandler();\n case \"cursor\":\n return cursorModeHandler();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [mode, animationItem]);\n};\nconst useLottieInteractivity = ({ actions, mode, lottieObj, }) => {\n const { animationItem, View, animationContainerRef } = lottieObj;\n useInitInteractivity({\n actions,\n animationItem,\n mode,\n wrapperRef: animationContainerRef,\n });\n return View;\n};\nexport default useLottieInteractivity;\n","import { useEffect } from \"react\";\nimport useLottie from \"../hooks/useLottie\";\nimport useLottieInteractivity from \"../hooks/useLottieInteractivity\";\nconst Lottie = (props) => {\n var _a, _b, _c;\n const { style, interactivity, ...lottieProps } = props;\n /**\n * Initialize the 'useLottie' hook\n */\n const { View, play, stop, pause, setSpeed, goToAndStop, goToAndPlay, setDirection, playSegments, setSubframe, getDuration, destroy, animationContainerRef, animationLoaded, animationItem, } = useLottie(lottieProps, style);\n /**\n * Make the hook variables/methods available through the provided 'lottieRef'\n */\n useEffect(() => {\n if (props.lottieRef) {\n props.lottieRef.current = {\n play,\n stop,\n pause,\n setSpeed,\n goToAndPlay,\n goToAndStop,\n setDirection,\n playSegments,\n setSubframe,\n getDuration,\n destroy,\n animationContainerRef,\n animationLoaded,\n animationItem,\n };\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [(_a = props.lottieRef) === null || _a === void 0 ? void 0 : _a.current]);\n return useLottieInteractivity({\n lottieObj: {\n View,\n play,\n stop,\n pause,\n setSpeed,\n goToAndStop,\n goToAndPlay,\n setDirection,\n playSegments,\n setSubframe,\n getDuration,\n destroy,\n animationContainerRef,\n animationLoaded,\n animationItem,\n },\n actions: (_b = interactivity === null || interactivity === void 0 ? void 0 : interactivity.actions) !== null && _b !== void 0 ? _b : [],\n mode: (_c = interactivity === null || interactivity === void 0 ? void 0 : interactivity.mode) !== null && _c !== void 0 ? _c : \"scroll\",\n });\n};\nexport default Lottie;\n","(typeof navigator !== \"undefined\") && (function (global, factory) {\n typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :\n typeof define === 'function' && define.amd ? define(factory) :\n (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lottie = factory());\n})(this, (function () { 'use strict';\n\n var svgNS = 'http://www.w3.org/2000/svg';\n var locationHref = '';\n var _useWebWorker = false;\n var initialDefaultFrame = -999999;\n\n var setWebWorker = function setWebWorker(flag) {\n _useWebWorker = !!flag;\n };\n\n var getWebWorker = function getWebWorker() {\n return _useWebWorker;\n };\n\n var setLocationHref = function setLocationHref(value) {\n locationHref = value;\n };\n\n var getLocationHref = function getLocationHref() {\n return locationHref;\n };\n\n function createTag(type) {\n // return {appendChild:function(){},setAttribute:function(){},style:{}}\n return document.createElement(type);\n }\n\n function extendPrototype(sources, destination) {\n var i;\n var len = sources.length;\n var sourcePrototype;\n\n for (i = 0; i < len; i += 1) {\n sourcePrototype = sources[i].prototype;\n\n for (var attr in sourcePrototype) {\n if (Object.prototype.hasOwnProperty.call(sourcePrototype, attr)) destination.prototype[attr] = sourcePrototype[attr];\n }\n }\n }\n\n function getDescriptor(object, prop) {\n return Object.getOwnPropertyDescriptor(object, prop);\n }\n\n function createProxyFunction(prototype) {\n function ProxyFunction() {}\n\n ProxyFunction.prototype = prototype;\n return ProxyFunction;\n }\n\n // import Howl from '../../3rd_party/howler';\n var audioControllerFactory = function () {\n function AudioController(audioFactory) {\n this.audios = [];\n this.audioFactory = audioFactory;\n this._volume = 1;\n this._isMuted = false;\n }\n\n AudioController.prototype = {\n addAudio: function addAudio(audio) {\n this.audios.push(audio);\n },\n pause: function pause() {\n var i;\n var len = this.audios.length;\n\n for (i = 0; i < len; i += 1) {\n this.audios[i].pause();\n }\n },\n resume: function resume() {\n var i;\n var len = this.audios.length;\n\n for (i = 0; i < len; i += 1) {\n this.audios[i].resume();\n }\n },\n setRate: function setRate(rateValue) {\n var i;\n var len = this.audios.length;\n\n for (i = 0; i < len; i += 1) {\n this.audios[i].setRate(rateValue);\n }\n },\n createAudio: function createAudio(assetPath) {\n if (this.audioFactory) {\n return this.audioFactory(assetPath);\n }\n\n if (window.Howl) {\n return new window.Howl({\n src: [assetPath]\n });\n }\n\n return {\n isPlaying: false,\n play: function play() {\n this.isPlaying = true;\n },\n seek: function seek() {\n this.isPlaying = false;\n },\n playing: function playing() {},\n rate: function rate() {},\n setVolume: function setVolume() {}\n };\n },\n setAudioFactory: function setAudioFactory(audioFactory) {\n this.audioFactory = audioFactory;\n },\n setVolume: function setVolume(value) {\n this._volume = value;\n\n this._updateVolume();\n },\n mute: function mute() {\n this._isMuted = true;\n\n this._updateVolume();\n },\n unmute: function unmute() {\n this._isMuted = false;\n\n this._updateVolume();\n },\n getVolume: function getVolume() {\n return this._volume;\n },\n _updateVolume: function _updateVolume() {\n var i;\n var len = this.audios.length;\n\n for (i = 0; i < len; i += 1) {\n this.audios[i].volume(this._volume * (this._isMuted ? 0 : 1));\n }\n }\n };\n return function () {\n return new AudioController();\n };\n }();\n\n var createTypedArray = function () {\n function createRegularArray(type, len) {\n var i = 0;\n var arr = [];\n var value;\n\n switch (type) {\n case 'int16':\n case 'uint8c':\n value = 1;\n break;\n\n default:\n value = 1.1;\n break;\n }\n\n for (i = 0; i < len; i += 1) {\n arr.push(value);\n }\n\n return arr;\n }\n\n function createTypedArrayFactory(type, len) {\n if (type === 'float32') {\n return new Float32Array(len);\n }\n\n if (type === 'int16') {\n return new Int16Array(len);\n }\n\n if (type === 'uint8c') {\n return new Uint8ClampedArray(len);\n }\n\n return createRegularArray(type, len);\n }\n\n if (typeof Uint8ClampedArray === 'function' && typeof Float32Array === 'function') {\n return createTypedArrayFactory;\n }\n\n return createRegularArray;\n }();\n\n function createSizedArray(len) {\n return Array.apply(null, {\n length: len\n });\n }\n\n function _typeof$6(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof$6 = function _typeof(obj) { return typeof obj; }; } else { _typeof$6 = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof$6(obj); }\n var subframeEnabled = true;\n var expressionsPlugin = null;\n var expressionsInterfaces = null;\n var idPrefix$1 = '';\n var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n var _shouldRoundValues = false;\n var bmPow = Math.pow;\n var bmSqrt = Math.sqrt;\n var bmFloor = Math.floor;\n var bmMax = Math.max;\n var bmMin = Math.min;\n var BMMath = {};\n\n (function () {\n var propertyNames = ['abs', 'acos', 'acosh', 'asin', 'asinh', 'atan', 'atanh', 'atan2', 'ceil', 'cbrt', 'expm1', 'clz32', 'cos', 'cosh', 'exp', 'floor', 'fround', 'hypot', 'imul', 'log', 'log1p', 'log2', 'log10', 'max', 'min', 'pow', 'random', 'round', 'sign', 'sin', 'sinh', 'sqrt', 'tan', 'tanh', 'trunc', 'E', 'LN10', 'LN2', 'LOG10E', 'LOG2E', 'PI', 'SQRT1_2', 'SQRT2'];\n var i;\n var len = propertyNames.length;\n\n for (i = 0; i < len; i += 1) {\n BMMath[propertyNames[i]] = Math[propertyNames[i]];\n }\n })();\n\n function ProjectInterface$1() {\n return {};\n }\n\n BMMath.random = Math.random;\n\n BMMath.abs = function (val) {\n var tOfVal = _typeof$6(val);\n\n if (tOfVal === 'object' && val.length) {\n var absArr = createSizedArray(val.length);\n var i;\n var len = val.length;\n\n for (i = 0; i < len; i += 1) {\n absArr[i] = Math.abs(val[i]);\n }\n\n return absArr;\n }\n\n return Math.abs(val);\n };\n\n var defaultCurveSegments = 150;\n var degToRads = Math.PI / 180;\n var roundCorner = 0.5519;\n\n function roundValues(flag) {\n _shouldRoundValues = !!flag;\n }\n\n function bmRnd(value) {\n if (_shouldRoundValues) {\n return Math.round(value);\n }\n\n return value;\n }\n\n function styleDiv(element) {\n element.style.position = 'absolute';\n element.style.top = 0;\n element.style.left = 0;\n element.style.display = 'block';\n element.style.transformOrigin = '0 0';\n element.style.webkitTransformOrigin = '0 0';\n element.style.backfaceVisibility = 'visible';\n element.style.webkitBackfaceVisibility = 'visible';\n element.style.transformStyle = 'preserve-3d';\n element.style.webkitTransformStyle = 'preserve-3d';\n element.style.mozTransformStyle = 'preserve-3d';\n }\n\n function BMEnterFrameEvent(type, currentTime, totalTime, frameMultiplier) {\n this.type = type;\n this.currentTime = currentTime;\n this.totalTime = totalTime;\n this.direction = frameMultiplier < 0 ? -1 : 1;\n }\n\n function BMCompleteEvent(type, frameMultiplier) {\n this.type = type;\n this.direction = frameMultiplier < 0 ? -1 : 1;\n }\n\n function BMCompleteLoopEvent(type, totalLoops, currentLoop, frameMultiplier) {\n this.type = type;\n this.currentLoop = currentLoop;\n this.totalLoops = totalLoops;\n this.direction = frameMultiplier < 0 ? -1 : 1;\n }\n\n function BMSegmentStartEvent(type, firstFrame, totalFrames) {\n this.type = type;\n this.firstFrame = firstFrame;\n this.totalFrames = totalFrames;\n }\n\n function BMDestroyEvent(type, target) {\n this.type = type;\n this.target = target;\n }\n\n function BMRenderFrameErrorEvent(nativeError, currentTime) {\n this.type = 'renderFrameError';\n this.nativeError = nativeError;\n this.currentTime = currentTime;\n }\n\n function BMConfigErrorEvent(nativeError) {\n this.type = 'configError';\n this.nativeError = nativeError;\n }\n\n function BMAnimationConfigErrorEvent(type, nativeError) {\n this.type = type;\n this.nativeError = nativeError;\n }\n\n var createElementID = function () {\n var _count = 0;\n return function createID() {\n _count += 1;\n return idPrefix$1 + '__lottie_element_' + _count;\n };\n }();\n\n function HSVtoRGB(h, s, v) {\n var r;\n var g;\n var b;\n var i;\n var f;\n var p;\n var q;\n var t;\n i = Math.floor(h * 6);\n f = h * 6 - i;\n p = v * (1 - s);\n q = v * (1 - f * s);\n t = v * (1 - (1 - f) * s);\n\n switch (i % 6) {\n case 0:\n r = v;\n g = t;\n b = p;\n break;\n\n case 1:\n r = q;\n g = v;\n b = p;\n break;\n\n case 2:\n r = p;\n g = v;\n b = t;\n break;\n\n case 3:\n r = p;\n g = q;\n b = v;\n break;\n\n case 4:\n r = t;\n g = p;\n b = v;\n break;\n\n case 5:\n r = v;\n g = p;\n b = q;\n break;\n\n default:\n break;\n }\n\n return [r, g, b];\n }\n\n function RGBtoHSV(r, g, b) {\n var max = Math.max(r, g, b);\n var min = Math.min(r, g, b);\n var d = max - min;\n var h;\n var s = max === 0 ? 0 : d / max;\n var v = max / 255;\n\n switch (max) {\n case min:\n h = 0;\n break;\n\n case r:\n h = g - b + d * (g < b ? 6 : 0);\n h /= 6 * d;\n break;\n\n case g:\n h = b - r + d * 2;\n h /= 6 * d;\n break;\n\n case b:\n h = r - g + d * 4;\n h /= 6 * d;\n break;\n\n default:\n break;\n }\n\n return [h, s, v];\n }\n\n function addSaturationToRGB(color, offset) {\n var hsv = RGBtoHSV(color[0] * 255, color[1] * 255, color[2] * 255);\n hsv[1] += offset;\n\n if (hsv[1] > 1) {\n hsv[1] = 1;\n } else if (hsv[1] <= 0) {\n hsv[1] = 0;\n }\n\n return HSVtoRGB(hsv[0], hsv[1], hsv[2]);\n }\n\n function addBrightnessToRGB(color, offset) {\n var hsv = RGBtoHSV(color[0] * 255, color[1] * 255, color[2] * 255);\n hsv[2] += offset;\n\n if (hsv[2] > 1) {\n hsv[2] = 1;\n } else if (hsv[2] < 0) {\n hsv[2] = 0;\n }\n\n return HSVtoRGB(hsv[0], hsv[1], hsv[2]);\n }\n\n function addHueToRGB(color, offset) {\n var hsv = RGBtoHSV(color[0] * 255, color[1] * 255, color[2] * 255);\n hsv[0] += offset / 360;\n\n if (hsv[0] > 1) {\n hsv[0] -= 1;\n } else if (hsv[0] < 0) {\n hsv[0] += 1;\n }\n\n return HSVtoRGB(hsv[0], hsv[1], hsv[2]);\n }\n\n var rgbToHex = function () {\n var colorMap = [];\n var i;\n var hex;\n\n for (i = 0; i < 256; i += 1) {\n hex = i.toString(16);\n colorMap[i] = hex.length === 1 ? '0' + hex : hex;\n }\n\n return function (r, g, b) {\n if (r < 0) {\n r = 0;\n }\n\n if (g < 0) {\n g = 0;\n }\n\n if (b < 0) {\n b = 0;\n }\n\n return '#' + colorMap[r] + colorMap[g] + colorMap[b];\n };\n }();\n\n var setSubframeEnabled = function setSubframeEnabled(flag) {\n subframeEnabled = !!flag;\n };\n\n var getSubframeEnabled = function getSubframeEnabled() {\n return subframeEnabled;\n };\n\n var setExpressionsPlugin = function setExpressionsPlugin(value) {\n expressionsPlugin = value;\n };\n\n var getExpressionsPlugin = function getExpressionsPlugin() {\n return expressionsPlugin;\n };\n\n var setExpressionInterfaces = function setExpressionInterfaces(value) {\n expressionsInterfaces = value;\n };\n\n var getExpressionInterfaces = function getExpressionInterfaces() {\n return expressionsInterfaces;\n };\n\n var setDefaultCurveSegments = function setDefaultCurveSegments(value) {\n defaultCurveSegments = value;\n };\n\n var getDefaultCurveSegments = function getDefaultCurveSegments() {\n return defaultCurveSegments;\n };\n\n var setIdPrefix = function setIdPrefix(value) {\n idPrefix$1 = value;\n };\n\n var getIdPrefix = function getIdPrefix() {\n return idPrefix$1;\n };\n\n function createNS(type) {\n // return {appendChild:function(){},setAttribute:function(){},style:{}}\n return document.createElementNS(svgNS, type);\n }\n\n function _typeof$5(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof$5 = function _typeof(obj) { return typeof obj; }; } else { _typeof$5 = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof$5(obj); }\n\n var dataManager = function () {\n var _counterId = 1;\n var processes = [];\n var workerFn;\n var workerInstance;\n var workerProxy = {\n onmessage: function onmessage() {},\n postMessage: function postMessage(path) {\n workerFn({\n data: path\n });\n }\n };\n var _workerSelf = {\n postMessage: function postMessage(data) {\n workerProxy.onmessage({\n data: data\n });\n }\n };\n\n function createWorker(fn) {\n if (window.Worker && window.Blob && getWebWorker()) {\n var blob = new Blob(['var _workerSelf = self; self.onmessage = ', fn.toString()], {\n type: 'text/javascript'\n }); // var blob = new Blob(['self.onmessage = ', fn.toString()], { type: 'text/javascript' });\n\n var url = URL.createObjectURL(blob);\n return new Worker(url);\n }\n\n workerFn = fn;\n return workerProxy;\n }\n\n function setupWorker() {\n if (!workerInstance) {\n workerInstance = createWorker(function workerStart(e) {\n function dataFunctionManager() {\n function completeLayers(layers, comps) {\n var layerData;\n var i;\n var len = layers.length;\n var j;\n var jLen;\n var k;\n var kLen;\n\n for (i = 0; i < len; i += 1) {\n layerData = layers[i];\n\n if ('ks' in layerData && !layerData.completed) {\n layerData.completed = true;\n\n if (layerData.hasMask) {\n var maskProps = layerData.masksProperties;\n jLen = maskProps.length;\n\n for (j = 0; j < jLen; j += 1) {\n if (maskProps[j].pt.k.i) {\n convertPathsToAbsoluteValues(maskProps[j].pt.k);\n } else {\n kLen = maskProps[j].pt.k.length;\n\n for (k = 0; k < kLen; k += 1) {\n if (maskProps[j].pt.k[k].s) {\n convertPathsToAbsoluteValues(maskProps[j].pt.k[k].s[0]);\n }\n\n if (maskProps[j].pt.k[k].e) {\n convertPathsToAbsoluteValues(maskProps[j].pt.k[k].e[0]);\n }\n }\n }\n }\n }\n\n if (layerData.ty === 0) {\n layerData.layers = findCompLayers(layerData.refId, comps);\n completeLayers(layerData.layers, comps);\n } else if (layerData.ty === 4) {\n completeShapes(layerData.shapes);\n } else if (layerData.ty === 5) {\n completeText(layerData);\n }\n }\n }\n }\n\n function completeChars(chars, assets) {\n if (chars) {\n var i = 0;\n var len = chars.length;\n\n for (i = 0; i < len; i += 1) {\n if (chars[i].t === 1) {\n // var compData = findComp(chars[i].data.refId, assets);\n chars[i].data.layers = findCompLayers(chars[i].data.refId, assets); // chars[i].data.ip = 0;\n // chars[i].data.op = 99999;\n // chars[i].data.st = 0;\n // chars[i].data.sr = 1;\n // chars[i].w = compData.w;\n // chars[i].data.ks = {\n // a: { k: [0, 0, 0], a: 0 },\n // p: { k: [0, -compData.h, 0], a: 0 },\n // r: { k: 0, a: 0 },\n // s: { k: [100, 100], a: 0 },\n // o: { k: 100, a: 0 },\n // };\n\n completeLayers(chars[i].data.layers, assets);\n }\n }\n }\n }\n\n function findComp(id, comps) {\n var i = 0;\n var len = comps.length;\n\n while (i < len) {\n if (comps[i].id === id) {\n return comps[i];\n }\n\n i += 1;\n }\n\n return null;\n }\n\n function findCompLayers(id, comps) {\n var comp = findComp(id, comps);\n\n if (comp) {\n if (!comp.layers.__used) {\n comp.layers.__used = true;\n return comp.layers;\n }\n\n return JSON.parse(JSON.stringify(comp.layers));\n }\n\n return null;\n }\n\n function completeShapes(arr) {\n var i;\n var len = arr.length;\n var j;\n var jLen;\n\n for (i = len - 1; i >= 0; i -= 1) {\n if (arr[i].ty === 'sh') {\n if (arr[i].ks.k.i) {\n convertPathsToAbsoluteValues(arr[i].ks.k);\n } else {\n jLen = arr[i].ks.k.length;\n\n for (j = 0; j < jLen; j += 1) {\n if (arr[i].ks.k[j].s) {\n convertPathsToAbsoluteValues(arr[i].ks.k[j].s[0]);\n }\n\n if (arr[i].ks.k[j].e) {\n convertPathsToAbsoluteValues(arr[i].ks.k[j].e[0]);\n }\n }\n }\n } else if (arr[i].ty === 'gr') {\n completeShapes(arr[i].it);\n }\n }\n }\n\n function convertPathsToAbsoluteValues(path) {\n var i;\n var len = path.i.length;\n\n for (i = 0; i < len; i += 1) {\n path.i[i][0] += path.v[i][0];\n path.i[i][1] += path.v[i][1];\n path.o[i][0] += path.v[i][0];\n path.o[i][1] += path.v[i][1];\n }\n }\n\n function checkVersion(minimum, animVersionString) {\n var animVersion = animVersionString ? animVersionString.split('.') : [100, 100, 100];\n\n if (minimum[0] > animVersion[0]) {\n return true;\n }\n\n if (animVersion[0] > minimum[0]) {\n return false;\n }\n\n if (minimum[1] > animVersion[1]) {\n return true;\n }\n\n if (animVersion[1] > minimum[1]) {\n return false;\n }\n\n if (minimum[2] > animVersion[2]) {\n return true;\n }\n\n if (animVersion[2] > minimum[2]) {\n return false;\n }\n\n return null;\n }\n\n var checkText = function () {\n var minimumVersion = [4, 4, 14];\n\n function updateTextLayer(textLayer) {\n var documentData = textLayer.t.d;\n textLayer.t.d = {\n k: [{\n s: documentData,\n t: 0\n }]\n };\n }\n\n function iterateLayers(layers) {\n var i;\n var len = layers.length;\n\n for (i = 0; i < len; i += 1) {\n if (layers[i].ty === 5) {\n updateTextLayer(layers[i]);\n }\n }\n }\n\n return function (animationData) {\n if (checkVersion(minimumVersion, animationData.v)) {\n iterateLayers(animationData.layers);\n\n if (animationData.assets) {\n var i;\n var len = animationData.assets.length;\n\n for (i = 0; i < len; i += 1) {\n if (animationData.assets[i].layers) {\n iterateLayers(animationData.assets[i].layers);\n }\n }\n }\n }\n };\n }();\n\n var checkChars = function () {\n var minimumVersion = [4, 7, 99];\n return function (animationData) {\n if (animationData.chars && !checkVersion(minimumVersion, animationData.v)) {\n var i;\n var len = animationData.chars.length;\n\n for (i = 0; i < len; i += 1) {\n var charData = animationData.chars[i];\n\n if (charData.data && charData.data.shapes) {\n completeShapes(charData.data.shapes);\n charData.data.ip = 0;\n charData.data.op = 99999;\n charData.data.st = 0;\n charData.data.sr = 1;\n charData.data.ks = {\n p: {\n k: [0, 0],\n a: 0\n },\n s: {\n k: [100, 100],\n a: 0\n },\n a: {\n k: [0, 0],\n a: 0\n },\n r: {\n k: 0,\n a: 0\n },\n o: {\n k: 100,\n a: 0\n }\n };\n\n if (!animationData.chars[i].t) {\n charData.data.shapes.push({\n ty: 'no'\n });\n charData.data.shapes[0].it.push({\n p: {\n k: [0, 0],\n a: 0\n },\n s: {\n k: [100, 100],\n a: 0\n },\n a: {\n k: [0, 0],\n a: 0\n },\n r: {\n k: 0,\n a: 0\n },\n o: {\n k: 100,\n a: 0\n },\n sk: {\n k: 0,\n a: 0\n },\n sa: {\n k: 0,\n a: 0\n },\n ty: 'tr'\n });\n }\n }\n }\n }\n };\n }();\n\n var checkPathProperties = function () {\n var minimumVersion = [5, 7, 15];\n\n function updateTextLayer(textLayer) {\n var pathData = textLayer.t.p;\n\n if (typeof pathData.a === 'number') {\n pathData.a = {\n a: 0,\n k: pathData.a\n };\n }\n\n if (typeof pathData.p === 'number') {\n pathData.p = {\n a: 0,\n k: pathData.p\n };\n }\n\n if (typeof pathData.r === 'number') {\n pathData.r = {\n a: 0,\n k: pathData.r\n };\n }\n }\n\n function iterateLayers(layers) {\n var i;\n var len = layers.length;\n\n for (i = 0; i < len; i += 1) {\n if (layers[i].ty === 5) {\n updateTextLayer(layers[i]);\n }\n }\n }\n\n return function (animationData) {\n if (checkVersion(minimumVersion, animationData.v)) {\n iterateLayers(animationData.layers);\n\n if (animationData.assets) {\n var i;\n var len = animationData.assets.length;\n\n for (i = 0; i < len; i += 1) {\n if (animationData.assets[i].layers) {\n iterateLayers(animationData.assets[i].layers);\n }\n }\n }\n }\n };\n }();\n\n var checkColors = function () {\n var minimumVersion = [4, 1, 9];\n\n function iterateShapes(shapes) {\n var i;\n var len = shapes.length;\n var j;\n var jLen;\n\n for (i = 0; i < len; i += 1) {\n if (shapes[i].ty === 'gr') {\n iterateShapes(shapes[i].it);\n } else if (shapes[i].ty === 'fl' || shapes[i].ty === 'st') {\n if (shapes[i].c.k && shapes[i].c.k[0].i) {\n jLen = shapes[i].c.k.length;\n\n for (j = 0; j < jLen; j += 1) {\n if (shapes[i].c.k[j].s) {\n shapes[i].c.k[j].s[0] /= 255;\n shapes[i].c.k[j].s[1] /= 255;\n shapes[i].c.k[j].s[2] /= 255;\n shapes[i].c.k[j].s[3] /= 255;\n }\n\n if (shapes[i].c.k[j].e) {\n shapes[i].c.k[j].e[0] /= 255;\n shapes[i].c.k[j].e[1] /= 255;\n shapes[i].c.k[j].e[2] /= 255;\n shapes[i].c.k[j].e[3] /= 255;\n }\n }\n } else {\n shapes[i].c.k[0] /= 255;\n shapes[i].c.k[1] /= 255;\n shapes[i].c.k[2] /= 255;\n shapes[i].c.k[3] /= 255;\n }\n }\n }\n }\n\n function iterateLayers(layers) {\n var i;\n var len = layers.length;\n\n for (i = 0; i < len; i += 1) {\n if (layers[i].ty === 4) {\n iterateShapes(layers[i].shapes);\n }\n }\n }\n\n return function (animationData) {\n if (checkVersion(minimumVersion, animationData.v)) {\n iterateLayers(animationData.layers);\n\n if (animationData.assets) {\n var i;\n var len = animationData.assets.length;\n\n for (i = 0; i < len; i += 1) {\n if (animationData.assets[i].layers) {\n iterateLayers(animationData.assets[i].layers);\n }\n }\n }\n }\n };\n }();\n\n var checkShapes = function () {\n var minimumVersion = [4, 4, 18];\n\n function completeClosingShapes(arr) {\n var i;\n var len = arr.length;\n var j;\n var jLen;\n\n for (i = len - 1; i >= 0; i -= 1) {\n if (arr[i].ty === 'sh') {\n if (arr[i].ks.k.i) {\n arr[i].ks.k.c = arr[i].closed;\n } else {\n jLen = arr[i].ks.k.length;\n\n for (j = 0; j < jLen; j += 1) {\n if (arr[i].ks.k[j].s) {\n arr[i].ks.k[j].s[0].c = arr[i].closed;\n }\n\n if (arr[i].ks.k[j].e) {\n arr[i].ks.k[j].e[0].c = arr[i].closed;\n }\n }\n }\n } else if (arr[i].ty === 'gr') {\n completeClosingShapes(arr[i].it);\n }\n }\n }\n\n function iterateLayers(layers) {\n var layerData;\n var i;\n var len = layers.length;\n var j;\n var jLen;\n var k;\n var kLen;\n\n for (i = 0; i < len; i += 1) {\n layerData = layers[i];\n\n if (layerData.hasMask) {\n var maskProps = layerData.masksProperties;\n jLen = maskProps.length;\n\n for (j = 0; j < jLen; j += 1) {\n if (maskProps[j].pt.k.i) {\n maskProps[j].pt.k.c = maskProps[j].cl;\n } else {\n kLen = maskProps[j].pt.k.length;\n\n for (k = 0; k < kLen; k += 1) {\n if (maskProps[j].pt.k[k].s) {\n maskProps[j].pt.k[k].s[0].c = maskProps[j].cl;\n }\n\n if (maskProps[j].pt.k[k].e) {\n maskProps[j].pt.k[k].e[0].c = maskProps[j].cl;\n }\n }\n }\n }\n }\n\n if (layerData.ty === 4) {\n completeClosingShapes(layerData.shapes);\n }\n }\n }\n\n return function (animationData) {\n if (checkVersion(minimumVersion, animationData.v)) {\n iterateLayers(animationData.layers);\n\n if (animationData.assets) {\n var i;\n var len = animationData.assets.length;\n\n for (i = 0; i < len; i += 1) {\n if (animationData.assets[i].layers) {\n iterateLayers(animationData.assets[i].layers);\n }\n }\n }\n }\n };\n }();\n\n function completeData(animationData) {\n if (animationData.__complete) {\n return;\n }\n\n checkColors(animationData);\n checkText(animationData);\n checkChars(animationData);\n checkPathProperties(animationData);\n checkShapes(animationData);\n completeLayers(animationData.layers, animationData.assets);\n completeChars(animationData.chars, animationData.assets);\n animationData.__complete = true;\n }\n\n function completeText(data) {\n if (data.t.a.length === 0 && !('m' in data.t.p)) {// data.singleShape = true;\n }\n }\n\n var moduleOb = {};\n moduleOb.completeData = completeData;\n moduleOb.checkColors = checkColors;\n moduleOb.checkChars = checkChars;\n moduleOb.checkPathProperties = checkPathProperties;\n moduleOb.checkShapes = checkShapes;\n moduleOb.completeLayers = completeLayers;\n return moduleOb;\n }\n\n if (!_workerSelf.dataManager) {\n _workerSelf.dataManager = dataFunctionManager();\n }\n\n if (!_workerSelf.assetLoader) {\n _workerSelf.assetLoader = function () {\n function formatResponse(xhr) {\n // using typeof doubles the time of execution of this method,\n // so if available, it's better to use the header to validate the type\n var contentTypeHeader = xhr.getResponseHeader('content-type');\n\n if (contentTypeHeader && xhr.responseType === 'json' && contentTypeHeader.indexOf('json') !== -1) {\n return xhr.response;\n }\n\n if (xhr.response && _typeof$5(xhr.response) === 'object') {\n return xhr.response;\n }\n\n if (xhr.response && typeof xhr.response === 'string') {\n return JSON.parse(xhr.response);\n }\n\n if (xhr.responseText) {\n return JSON.parse(xhr.responseText);\n }\n\n return null;\n }\n\n function loadAsset(path, fullPath, callback, errorCallback) {\n var response;\n var xhr = new XMLHttpRequest(); // set responseType after calling open or IE will break.\n\n try {\n // This crashes on Android WebView prior to KitKat\n xhr.responseType = 'json';\n } catch (err) {} // eslint-disable-line no-empty\n\n\n xhr.onreadystatechange = function () {\n if (xhr.readyState === 4) {\n if (xhr.status === 200) {\n response = formatResponse(xhr);\n callback(response);\n } else {\n try {\n response = formatResponse(xhr);\n callback(response);\n } catch (err) {\n if (errorCallback) {\n errorCallback(err);\n }\n }\n }\n }\n };\n\n try {\n // Hack to workaround banner validation\n xhr.open(['G', 'E', 'T'].join(''), path, true);\n } catch (error) {\n // Hack to workaround banner validation\n xhr.open(['G', 'E', 'T'].join(''), fullPath + '/' + path, true);\n }\n\n xhr.send();\n }\n\n return {\n load: loadAsset\n };\n }();\n }\n\n if (e.data.type === 'loadAnimation') {\n _workerSelf.assetLoader.load(e.data.path, e.data.fullPath, function (data) {\n _workerSelf.dataManager.completeData(data);\n\n _workerSelf.postMessage({\n id: e.data.id,\n payload: data,\n status: 'success'\n });\n }, function () {\n _workerSelf.postMessage({\n id: e.data.id,\n status: 'error'\n });\n });\n } else if (e.data.type === 'complete') {\n var animation = e.data.animation;\n\n _workerSelf.dataManager.completeData(animation);\n\n _workerSelf.postMessage({\n id: e.data.id,\n payload: animation,\n status: 'success'\n });\n } else if (e.data.type === 'loadData') {\n _workerSelf.assetLoader.load(e.data.path, e.data.fullPath, function (data) {\n _workerSelf.postMessage({\n id: e.data.id,\n payload: data,\n status: 'success'\n });\n }, function () {\n _workerSelf.postMessage({\n id: e.data.id,\n status: 'error'\n });\n });\n }\n });\n\n workerInstance.onmessage = function (event) {\n var data = event.data;\n var id = data.id;\n var process = processes[id];\n processes[id] = null;\n\n if (data.status === 'success') {\n process.onComplete(data.payload);\n } else if (process.onError) {\n process.onError();\n }\n };\n }\n }\n\n function createProcess(onComplete, onError) {\n _counterId += 1;\n var id = 'processId_' + _counterId;\n processes[id] = {\n onComplete: onComplete,\n onError: onError\n };\n return id;\n }\n\n function loadAnimation(path, onComplete, onError) {\n setupWorker();\n var processId = createProcess(onComplete, onError);\n workerInstance.postMessage({\n type: 'loadAnimation',\n path: path,\n fullPath: window.location.origin + window.location.pathname,\n id: processId\n });\n }\n\n function loadData(path, onComplete, onError) {\n setupWorker();\n var processId = createProcess(onComplete, onError);\n workerInstance.postMessage({\n type: 'loadData',\n path: path,\n fullPath: window.location.origin + window.location.pathname,\n id: processId\n });\n }\n\n function completeAnimation(anim, onComplete, onError) {\n setupWorker();\n var processId = createProcess(onComplete, onError);\n workerInstance.postMessage({\n type: 'complete',\n animation: anim,\n id: processId\n });\n }\n\n return {\n loadAnimation: loadAnimation,\n loadData: loadData,\n completeAnimation: completeAnimation\n };\n }();\n\n var ImagePreloader = function () {\n var proxyImage = function () {\n var canvas = createTag('canvas');\n canvas.width = 1;\n canvas.height = 1;\n var ctx = canvas.getContext('2d');\n ctx.fillStyle = 'rgba(0,0,0,0)';\n ctx.fillRect(0, 0, 1, 1);\n return canvas;\n }();\n\n function imageLoaded() {\n this.loadedAssets += 1;\n\n if (this.loadedAssets === this.totalImages && this.loadedFootagesCount === this.totalFootages) {\n if (this.imagesLoadedCb) {\n this.imagesLoadedCb(null);\n }\n }\n }\n\n function footageLoaded() {\n this.loadedFootagesCount += 1;\n\n if (this.loadedAssets === this.totalImages && this.loadedFootagesCount === this.totalFootages) {\n if (this.imagesLoadedCb) {\n this.imagesLoadedCb(null);\n }\n }\n }\n\n function getAssetsPath(assetData, assetsPath, originalPath) {\n var path = '';\n\n if (assetData.e) {\n path = assetData.p;\n } else if (assetsPath) {\n var imagePath = assetData.p;\n\n if (imagePath.indexOf('images/') !== -1) {\n imagePath = imagePath.split('/')[1];\n }\n\n path = assetsPath + imagePath;\n } else {\n path = originalPath;\n path += assetData.u ? assetData.u : '';\n path += assetData.p;\n }\n\n return path;\n }\n\n function testImageLoaded(img) {\n var _count = 0;\n var intervalId = setInterval(function () {\n var box = img.getBBox();\n\n if (box.width || _count > 500) {\n this._imageLoaded();\n\n clearInterval(intervalId);\n }\n\n _count += 1;\n }.bind(this), 50);\n }\n\n function createImageData(assetData) {\n var path = getAssetsPath(assetData, this.assetsPath, this.path);\n var img = createNS('image');\n\n if (isSafari) {\n this.testImageLoaded(img);\n } else {\n img.addEventListener('load', this._imageLoaded, false);\n }\n\n img.addEventListener('error', function () {\n ob.img = proxyImage;\n\n this._imageLoaded();\n }.bind(this), false);\n img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', path);\n\n if (this._elementHelper.append) {\n this._elementHelper.append(img);\n } else {\n this._elementHelper.appendChild(img);\n }\n\n var ob = {\n img: img,\n assetData: assetData\n };\n return ob;\n }\n\n function createImgData(assetData) {\n var path = getAssetsPath(assetData, this.assetsPath, this.path);\n var img = createTag('img');\n img.crossOrigin = 'anonymous';\n img.addEventListener('load', this._imageLoaded, false);\n img.addEventListener('error', function () {\n ob.img = proxyImage;\n\n this._imageLoaded();\n }.bind(this), false);\n img.src = path;\n var ob = {\n img: img,\n assetData: assetData\n };\n return ob;\n }\n\n function createFootageData(data) {\n var ob = {\n assetData: data\n };\n var path = getAssetsPath(data, this.assetsPath, this.path);\n dataManager.loadData(path, function (footageData) {\n ob.img = footageData;\n\n this._footageLoaded();\n }.bind(this), function () {\n ob.img = {};\n\n this._footageLoaded();\n }.bind(this));\n return ob;\n }\n\n function loadAssets(assets, cb) {\n this.imagesLoadedCb = cb;\n var i;\n var len = assets.length;\n\n for (i = 0; i < len; i += 1) {\n if (!assets[i].layers) {\n if (!assets[i].t || assets[i].t === 'seq') {\n this.totalImages += 1;\n this.images.push(this._createImageData(assets[i]));\n } else if (assets[i].t === 3) {\n this.totalFootages += 1;\n this.images.push(this.createFootageData(assets[i]));\n }\n }\n }\n }\n\n function setPath(path) {\n this.path = path || '';\n }\n\n function setAssetsPath(path) {\n this.assetsPath = path || '';\n }\n\n function getAsset(assetData) {\n var i = 0;\n var len = this.images.length;\n\n while (i < len) {\n if (this.images[i].assetData === assetData) {\n return this.images[i].img;\n }\n\n i += 1;\n }\n\n return null;\n }\n\n function destroy() {\n this.imagesLoadedCb = null;\n this.images.length = 0;\n }\n\n function loadedImages() {\n return this.totalImages === this.loadedAssets;\n }\n\n function loadedFootages() {\n return this.totalFootages === this.loadedFootagesCount;\n }\n\n function setCacheType(type, elementHelper) {\n if (type === 'svg') {\n this._elementHelper = elementHelper;\n this._createImageData = this.createImageData.bind(this);\n } else {\n this._createImageData = this.createImgData.bind(this);\n }\n }\n\n function ImagePreloaderFactory() {\n this._imageLoaded = imageLoaded.bind(this);\n this._footageLoaded = footageLoaded.bind(this);\n this.testImageLoaded = testImageLoaded.bind(this);\n this.createFootageData = createFootageData.bind(this);\n this.assetsPath = '';\n this.path = '';\n this.totalImages = 0;\n this.totalFootages = 0;\n this.loadedAssets = 0;\n this.loadedFootagesCount = 0;\n this.imagesLoadedCb = null;\n this.images = [];\n }\n\n ImagePreloaderFactory.prototype = {\n loadAssets: loadAssets,\n setAssetsPath: setAssetsPath,\n setPath: setPath,\n loadedImages: loadedImages,\n loadedFootages: loadedFootages,\n destroy: destroy,\n getAsset: getAsset,\n createImgData: createImgData,\n createImageData: createImageData,\n imageLoaded: imageLoaded,\n footageLoaded: footageLoaded,\n setCacheType: setCacheType\n };\n return ImagePreloaderFactory;\n }();\n\n function BaseEvent() {}\n\n BaseEvent.prototype = {\n triggerEvent: function triggerEvent(eventName, args) {\n if (this._cbs[eventName]) {\n var callbacks = this._cbs[eventName];\n\n for (var i = 0; i < callbacks.length; i += 1) {\n callbacks[i](args);\n }\n }\n },\n addEventListener: function addEventListener(eventName, callback) {\n if (!this._cbs[eventName]) {\n this._cbs[eventName] = [];\n }\n\n this._cbs[eventName].push(callback);\n\n return function () {\n this.removeEventListener(eventName, callback);\n }.bind(this);\n },\n removeEventListener: function removeEventListener(eventName, callback) {\n if (!callback) {\n this._cbs[eventName] = null;\n } else if (this._cbs[eventName]) {\n var i = 0;\n var len = this._cbs[eventName].length;\n\n while (i < len) {\n if (this._cbs[eventName][i] === callback) {\n this._cbs[eventName].splice(i, 1);\n\n i -= 1;\n len -= 1;\n }\n\n i += 1;\n }\n\n if (!this._cbs[eventName].length) {\n this._cbs[eventName] = null;\n }\n }\n }\n };\n\n var markerParser = function () {\n function parsePayloadLines(payload) {\n var lines = payload.split('\\r\\n');\n var keys = {};\n var line;\n var keysCount = 0;\n\n for (var i = 0; i < lines.length; i += 1) {\n line = lines[i].split(':');\n\n if (line.length === 2) {\n keys[line[0]] = line[1].trim();\n keysCount += 1;\n }\n }\n\n if (keysCount === 0) {\n throw new Error();\n }\n\n return keys;\n }\n\n return function (_markers) {\n var markers = [];\n\n for (var i = 0; i < _markers.length; i += 1) {\n var _marker = _markers[i];\n var markerData = {\n time: _marker.tm,\n duration: _marker.dr\n };\n\n try {\n markerData.payload = JSON.parse(_markers[i].cm);\n } catch (_) {\n try {\n markerData.payload = parsePayloadLines(_markers[i].cm);\n } catch (__) {\n markerData.payload = {\n name: _markers[i].cm\n };\n }\n }\n\n markers.push(markerData);\n }\n\n return markers;\n };\n }();\n\n var ProjectInterface = function () {\n function registerComposition(comp) {\n this.compositions.push(comp);\n }\n\n return function () {\n function _thisProjectFunction(name) {\n var i = 0;\n var len = this.compositions.length;\n\n while (i < len) {\n if (this.compositions[i].data && this.compositions[i].data.nm === name) {\n if (this.compositions[i].prepareFrame && this.compositions[i].data.xt) {\n this.compositions[i].prepareFrame(this.currentFrame);\n }\n\n return this.compositions[i].compInterface;\n }\n\n i += 1;\n }\n\n return null;\n }\n\n _thisProjectFunction.compositions = [];\n _thisProjectFunction.currentFrame = 0;\n _thisProjectFunction.registerComposition = registerComposition;\n return _thisProjectFunction;\n };\n }();\n\n var renderers = {};\n\n var registerRenderer = function registerRenderer(key, value) {\n renderers[key] = value;\n };\n\n function getRenderer(key) {\n return renderers[key];\n }\n\n function getRegisteredRenderer() {\n // Returns canvas by default for compatibility\n if (renderers.canvas) {\n return 'canvas';\n } // Returns any renderer that is registered\n\n\n for (var key in renderers) {\n if (renderers[key]) {\n return key;\n }\n }\n\n return '';\n }\n\n function _typeof$4(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof$4 = function _typeof(obj) { return typeof obj; }; } else { _typeof$4 = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof$4(obj); }\n\n var AnimationItem = function AnimationItem() {\n this._cbs = [];\n this.name = '';\n this.path = '';\n this.isLoaded = false;\n this.currentFrame = 0;\n this.currentRawFrame = 0;\n this.firstFrame = 0;\n this.totalFrames = 0;\n this.frameRate = 0;\n this.frameMult = 0;\n this.playSpeed = 1;\n this.playDirection = 1;\n this.playCount = 0;\n this.animationData = {};\n this.assets = [];\n this.isPaused = true;\n this.autoplay = false;\n this.loop = true;\n this.renderer = null;\n this.animationID = createElementID();\n this.assetsPath = '';\n this.timeCompleted = 0;\n this.segmentPos = 0;\n this.isSubframeEnabled = getSubframeEnabled();\n this.segments = [];\n this._idle = true;\n this._completedLoop = false;\n this.projectInterface = ProjectInterface();\n this.imagePreloader = new ImagePreloader();\n this.audioController = audioControllerFactory();\n this.markers = [];\n this.configAnimation = this.configAnimation.bind(this);\n this.onSetupError = this.onSetupError.bind(this);\n this.onSegmentComplete = this.onSegmentComplete.bind(this);\n this.drawnFrameEvent = new BMEnterFrameEvent('drawnFrame', 0, 0, 0);\n this.expressionsPlugin = getExpressionsPlugin();\n };\n\n extendPrototype([BaseEvent], AnimationItem);\n\n AnimationItem.prototype.setParams = function (params) {\n if (params.wrapper || params.container) {\n this.wrapper = params.wrapper || params.container;\n }\n\n var animType = 'svg';\n\n if (params.animType) {\n animType = params.animType;\n } else if (params.renderer) {\n animType = params.renderer;\n }\n\n var RendererClass = getRenderer(animType);\n this.renderer = new RendererClass(this, params.rendererSettings);\n this.imagePreloader.setCacheType(animType, this.renderer.globalData.defs);\n this.renderer.setProjectInterface(this.projectInterface);\n this.animType = animType;\n\n if (params.loop === '' || params.loop === null || params.loop === undefined || params.loop === true) {\n this.loop = true;\n } else if (params.loop === false) {\n this.loop = false;\n } else {\n this.loop = parseInt(params.loop, 10);\n }\n\n this.autoplay = 'autoplay' in params ? params.autoplay : true;\n this.name = params.name ? params.name : '';\n this.autoloadSegments = Object.prototype.hasOwnProperty.call(params, 'autoloadSegments') ? params.autoloadSegments : true;\n this.assetsPath = params.assetsPath;\n this.initialSegment = params.initialSegment;\n\n if (params.audioFactory) {\n this.audioController.setAudioFactory(params.audioFactory);\n }\n\n if (params.animationData) {\n this.setupAnimation(params.animationData);\n } else if (params.path) {\n if (params.path.lastIndexOf('\\\\') !== -1) {\n this.path = params.path.substr(0, params.path.lastIndexOf('\\\\') + 1);\n } else {\n this.path = params.path.substr(0, params.path.lastIndexOf('/') + 1);\n }\n\n this.fileName = params.path.substr(params.path.lastIndexOf('/') + 1);\n this.fileName = this.fileName.substr(0, this.fileName.lastIndexOf('.json'));\n dataManager.loadAnimation(params.path, this.configAnimation, this.onSetupError);\n }\n };\n\n AnimationItem.prototype.onSetupError = function () {\n this.trigger('data_failed');\n };\n\n AnimationItem.prototype.setupAnimation = function (data) {\n dataManager.completeAnimation(data, this.configAnimation);\n };\n\n AnimationItem.prototype.setData = function (wrapper, animationData) {\n if (animationData) {\n if (_typeof$4(animationData) !== 'object') {\n animationData = JSON.parse(animationData);\n }\n }\n\n var params = {\n wrapper: wrapper,\n animationData: animationData\n };\n var wrapperAttributes = wrapper.attributes;\n params.path = wrapperAttributes.getNamedItem('data-animation-path') // eslint-disable-line no-nested-ternary\n ? wrapperAttributes.getNamedItem('data-animation-path').value : wrapperAttributes.getNamedItem('data-bm-path') // eslint-disable-line no-nested-ternary\n ? wrapperAttributes.getNamedItem('data-bm-path').value : wrapperAttributes.getNamedItem('bm-path') ? wrapperAttributes.getNamedItem('bm-path').value : '';\n params.animType = wrapperAttributes.getNamedItem('data-anim-type') // eslint-disable-line no-nested-ternary\n ? wrapperAttributes.getNamedItem('data-anim-type').value : wrapperAttributes.getNamedItem('data-bm-type') // eslint-disable-line no-nested-ternary\n ? wrapperAttributes.getNamedItem('data-bm-type').value : wrapperAttributes.getNamedItem('bm-type') // eslint-disable-line no-nested-ternary\n ? wrapperAttributes.getNamedItem('bm-type').value : wrapperAttributes.getNamedItem('data-bm-renderer') // eslint-disable-line no-nested-ternary\n ? wrapperAttributes.getNamedItem('data-bm-renderer').value : wrapperAttributes.getNamedItem('bm-renderer') ? wrapperAttributes.getNamedItem('bm-renderer').value : getRegisteredRenderer() || 'canvas';\n var loop = wrapperAttributes.getNamedItem('data-anim-loop') // eslint-disable-line no-nested-ternary\n ? wrapperAttributes.getNamedItem('data-anim-loop').value : wrapperAttributes.getNamedItem('data-bm-loop') // eslint-disable-line no-nested-ternary\n ? wrapperAttributes.getNamedItem('data-bm-loop').value : wrapperAttributes.getNamedItem('bm-loop') ? wrapperAttributes.getNamedItem('bm-loop').value : '';\n\n if (loop === 'false') {\n params.loop = false;\n } else if (loop === 'true') {\n params.loop = true;\n } else if (loop !== '') {\n params.loop = parseInt(loop, 10);\n }\n\n var autoplay = wrapperAttributes.getNamedItem('data-anim-autoplay') // eslint-disable-line no-nested-ternary\n ? wrapperAttributes.getNamedItem('data-anim-autoplay').value : wrapperAttributes.getNamedItem('data-bm-autoplay') // eslint-disable-line no-nested-ternary\n ? wrapperAttributes.getNamedItem('data-bm-autoplay').value : wrapperAttributes.getNamedItem('bm-autoplay') ? wrapperAttributes.getNamedItem('bm-autoplay').value : true;\n params.autoplay = autoplay !== 'false';\n params.name = wrapperAttributes.getNamedItem('data-name') // eslint-disable-line no-nested-ternary\n ? wrapperAttributes.getNamedItem('data-name').value : wrapperAttributes.getNamedItem('data-bm-name') // eslint-disable-line no-nested-ternary\n ? wrapperAttributes.getNamedItem('data-bm-name').value : wrapperAttributes.getNamedItem('bm-name') ? wrapperAttributes.getNamedItem('bm-name').value : '';\n var prerender = wrapperAttributes.getNamedItem('data-anim-prerender') // eslint-disable-line no-nested-ternary\n ? wrapperAttributes.getNamedItem('data-anim-prerender').value : wrapperAttributes.getNamedItem('data-bm-prerender') // eslint-disable-line no-nested-ternary\n ? wrapperAttributes.getNamedItem('data-bm-prerender').value : wrapperAttributes.getNamedItem('bm-prerender') ? wrapperAttributes.getNamedItem('bm-prerender').value : '';\n\n if (prerender === 'false') {\n params.prerender = false;\n }\n\n if (!params.path) {\n this.trigger('destroy');\n } else {\n this.setParams(params);\n }\n };\n\n AnimationItem.prototype.includeLayers = function (data) {\n if (data.op > this.animationData.op) {\n this.animationData.op = data.op;\n this.totalFrames = Math.floor(data.op - this.animationData.ip);\n }\n\n var layers = this.animationData.layers;\n var i;\n var len = layers.length;\n var newLayers = data.layers;\n var j;\n var jLen = newLayers.length;\n\n for (j = 0; j < jLen; j += 1) {\n i = 0;\n\n while (i < len) {\n if (layers[i].id === newLayers[j].id) {\n layers[i] = newLayers[j];\n break;\n }\n\n i += 1;\n }\n }\n\n if (data.chars || data.fonts) {\n this.renderer.globalData.fontManager.addChars(data.chars);\n this.renderer.globalData.fontManager.addFonts(data.fonts, this.renderer.globalData.defs);\n }\n\n if (data.assets) {\n len = data.assets.length;\n\n for (i = 0; i < len; i += 1) {\n this.animationData.assets.push(data.assets[i]);\n }\n }\n\n this.animationData.__complete = false;\n dataManager.completeAnimation(this.animationData, this.onSegmentComplete);\n };\n\n AnimationItem.prototype.onSegmentComplete = function (data) {\n this.animationData = data;\n var expressionsPlugin = getExpressionsPlugin();\n\n if (expressionsPlugin) {\n expressionsPlugin.initExpressions(this);\n }\n\n this.loadNextSegment();\n };\n\n AnimationItem.prototype.loadNextSegment = function () {\n var segments = this.animationData.segments;\n\n if (!segments || segments.length === 0 || !this.autoloadSegments) {\n this.trigger('data_ready');\n this.timeCompleted = this.totalFrames;\n return;\n }\n\n var segment = segments.shift();\n this.timeCompleted = segment.time * this.frameRate;\n var segmentPath = this.path + this.fileName + '_' + this.segmentPos + '.json';\n this.segmentPos += 1;\n dataManager.loadData(segmentPath, this.includeLayers.bind(this), function () {\n this.trigger('data_failed');\n }.bind(this));\n };\n\n AnimationItem.prototype.loadSegments = function () {\n var segments = this.animationData.segments;\n\n if (!segments) {\n this.timeCompleted = this.totalFrames;\n }\n\n this.loadNextSegment();\n };\n\n AnimationItem.prototype.imagesLoaded = function () {\n this.trigger('loaded_images');\n this.checkLoaded();\n };\n\n AnimationItem.prototype.preloadImages = function () {\n this.imagePreloader.setAssetsPath(this.assetsPath);\n this.imagePreloader.setPath(this.path);\n this.imagePreloader.loadAssets(this.animationData.assets, this.imagesLoaded.bind(this));\n };\n\n AnimationItem.prototype.configAnimation = function (animData) {\n if (!this.renderer) {\n return;\n }\n\n try {\n this.animationData = animData;\n\n if (this.initialSegment) {\n this.totalFrames = Math.floor(this.initialSegment[1] - this.initialSegment[0]);\n this.firstFrame = Math.round(this.initialSegment[0]);\n } else {\n this.totalFrames = Math.floor(this.animationData.op - this.animationData.ip);\n this.firstFrame = Math.round(this.animationData.ip);\n }\n\n this.renderer.configAnimation(animData);\n\n if (!animData.assets) {\n animData.assets = [];\n }\n\n this.assets = this.animationData.assets;\n this.frameRate = this.animationData.fr;\n this.frameMult = this.animationData.fr / 1000;\n this.renderer.searchExtraCompositions(animData.assets);\n this.markers = markerParser(animData.markers || []);\n this.trigger('config_ready');\n this.preloadImages();\n this.loadSegments();\n this.updaFrameModifier();\n this.waitForFontsLoaded();\n\n if (this.isPaused) {\n this.audioController.pause();\n }\n } catch (error) {\n this.triggerConfigError(error);\n }\n };\n\n AnimationItem.prototype.waitForFontsLoaded = function () {\n if (!this.renderer) {\n return;\n }\n\n if (this.renderer.globalData.fontManager.isLoaded) {\n this.checkLoaded();\n } else {\n setTimeout(this.waitForFontsLoaded.bind(this), 20);\n }\n };\n\n AnimationItem.prototype.checkLoaded = function () {\n if (!this.isLoaded && this.renderer.globalData.fontManager.isLoaded && (this.imagePreloader.loadedImages() || this.renderer.rendererType !== 'canvas') && this.imagePreloader.loadedFootages()) {\n this.isLoaded = true;\n var expressionsPlugin = getExpressionsPlugin();\n\n if (expressionsPlugin) {\n expressionsPlugin.initExpressions(this);\n }\n\n this.renderer.initItems();\n setTimeout(function () {\n this.trigger('DOMLoaded');\n }.bind(this), 0);\n this.gotoFrame();\n\n if (this.autoplay) {\n this.play();\n }\n }\n };\n\n AnimationItem.prototype.resize = function (width, height) {\n // Adding this validation for backwards compatibility in case an event object was being passed down\n var _width = typeof width === 'number' ? width : undefined;\n\n var _height = typeof height === 'number' ? height : undefined;\n\n this.renderer.updateContainerSize(_width, _height);\n };\n\n AnimationItem.prototype.setSubframe = function (flag) {\n this.isSubframeEnabled = !!flag;\n };\n\n AnimationItem.prototype.gotoFrame = function () {\n this.currentFrame = this.isSubframeEnabled ? this.currentRawFrame : ~~this.currentRawFrame; // eslint-disable-line no-bitwise\n\n if (this.timeCompleted !== this.totalFrames && this.currentFrame > this.timeCompleted) {\n this.currentFrame = this.timeCompleted;\n }\n\n this.trigger('enterFrame');\n this.renderFrame();\n this.trigger('drawnFrame');\n };\n\n AnimationItem.prototype.renderFrame = function () {\n if (this.isLoaded === false || !this.renderer) {\n return;\n }\n\n try {\n if (this.expressionsPlugin) {\n this.expressionsPlugin.resetFrame();\n }\n\n this.renderer.renderFrame(this.currentFrame + this.firstFrame);\n } catch (error) {\n this.triggerRenderFrameError(error);\n }\n };\n\n AnimationItem.prototype.play = function (name) {\n if (name && this.name !== name) {\n return;\n }\n\n if (this.isPaused === true) {\n this.isPaused = false;\n this.trigger('_play');\n this.audioController.resume();\n\n if (this._idle) {\n this._idle = false;\n this.trigger('_active');\n }\n }\n };\n\n AnimationItem.prototype.pause = function (name) {\n if (name && this.name !== name) {\n return;\n }\n\n if (this.isPaused === false) {\n this.isPaused = true;\n this.trigger('_pause');\n this._idle = true;\n this.trigger('_idle');\n this.audioController.pause();\n }\n };\n\n AnimationItem.prototype.togglePause = function (name) {\n if (name && this.name !== name) {\n return;\n }\n\n if (this.isPaused === true) {\n this.play();\n } else {\n this.pause();\n }\n };\n\n AnimationItem.prototype.stop = function (name) {\n if (name && this.name !== name) {\n return;\n }\n\n this.pause();\n this.playCount = 0;\n this._completedLoop = false;\n this.setCurrentRawFrameValue(0);\n };\n\n AnimationItem.prototype.getMarkerData = function (markerName) {\n var marker;\n\n for (var i = 0; i < this.markers.length; i += 1) {\n marker = this.markers[i];\n\n if (marker.payload && marker.payload.name === markerName) {\n return marker;\n }\n }\n\n return null;\n };\n\n AnimationItem.prototype.goToAndStop = function (value, isFrame, name) {\n if (name && this.name !== name) {\n return;\n }\n\n var numValue = Number(value);\n\n if (isNaN(numValue)) {\n var marker = this.getMarkerData(value);\n\n if (marker) {\n this.goToAndStop(marker.time, true);\n }\n } else if (isFrame) {\n this.setCurrentRawFrameValue(value);\n } else {\n this.setCurrentRawFrameValue(value * this.frameModifier);\n }\n\n this.pause();\n };\n\n AnimationItem.prototype.goToAndPlay = function (value, isFrame, name) {\n if (name && this.name !== name) {\n return;\n }\n\n var numValue = Number(value);\n\n if (isNaN(numValue)) {\n var marker = this.getMarkerData(value);\n\n if (marker) {\n if (!marker.duration) {\n this.goToAndStop(marker.time, true);\n } else {\n this.playSegments([marker.time, marker.time + marker.duration], true);\n }\n }\n } else {\n this.goToAndStop(numValue, isFrame, name);\n }\n\n this.play();\n };\n\n AnimationItem.prototype.advanceTime = function (value) {\n if (this.isPaused === true || this.isLoaded === false) {\n return;\n }\n\n var nextValue = this.currentRawFrame + value * this.frameModifier;\n var _isComplete = false; // Checking if nextValue > totalFrames - 1 for addressing non looping and looping animations.\n // If animation won't loop, it should stop at totalFrames - 1. If it will loop it should complete the last frame and then loop.\n\n if (nextValue >= this.totalFrames - 1 && this.frameModifier > 0) {\n if (!this.loop || this.playCount === this.loop) {\n if (!this.checkSegments(nextValue > this.totalFrames ? nextValue % this.totalFrames : 0)) {\n _isComplete = true;\n nextValue = this.totalFrames - 1;\n }\n } else if (nextValue >= this.totalFrames) {\n this.playCount += 1;\n\n if (!this.checkSegments(nextValue % this.totalFrames)) {\n this.setCurrentRawFrameValue(nextValue % this.totalFrames);\n this._completedLoop = true;\n this.trigger('loopComplete');\n }\n } else {\n this.setCurrentRawFrameValue(nextValue);\n }\n } else if (nextValue < 0) {\n if (!this.checkSegments(nextValue % this.totalFrames)) {\n if (this.loop && !(this.playCount-- <= 0 && this.loop !== true)) {\n // eslint-disable-line no-plusplus\n this.setCurrentRawFrameValue(this.totalFrames + nextValue % this.totalFrames);\n\n if (!this._completedLoop) {\n this._completedLoop = true;\n } else {\n this.trigger('loopComplete');\n }\n } else {\n _isComplete = true;\n nextValue = 0;\n }\n }\n } else {\n this.setCurrentRawFrameValue(nextValue);\n }\n\n if (_isComplete) {\n this.setCurrentRawFrameValue(nextValue);\n this.pause();\n this.trigger('complete');\n }\n };\n\n AnimationItem.prototype.adjustSegment = function (arr, offset) {\n this.playCount = 0;\n\n if (arr[1] < arr[0]) {\n if (this.frameModifier > 0) {\n if (this.playSpeed < 0) {\n this.setSpeed(-this.playSpeed);\n } else {\n this.setDirection(-1);\n }\n }\n\n this.totalFrames = arr[0] - arr[1];\n this.timeCompleted = this.totalFrames;\n this.firstFrame = arr[1];\n this.setCurrentRawFrameValue(this.totalFrames - 0.001 - offset);\n } else if (arr[1] > arr[0]) {\n if (this.frameModifier < 0) {\n if (this.playSpeed < 0) {\n this.setSpeed(-this.playSpeed);\n } else {\n this.setDirection(1);\n }\n }\n\n this.totalFrames = arr[1] - arr[0];\n this.timeCompleted = this.totalFrames;\n this.firstFrame = arr[0];\n this.setCurrentRawFrameValue(0.001 + offset);\n }\n\n this.trigger('segmentStart');\n };\n\n AnimationItem.prototype.setSegment = function (init, end) {\n var pendingFrame = -1;\n\n if (this.isPaused) {\n if (this.currentRawFrame + this.firstFrame < init) {\n pendingFrame = init;\n } else if (this.currentRawFrame + this.firstFrame > end) {\n pendingFrame = end - init;\n }\n }\n\n this.firstFrame = init;\n this.totalFrames = end - init;\n this.timeCompleted = this.totalFrames;\n\n if (pendingFrame !== -1) {\n this.goToAndStop(pendingFrame, true);\n }\n };\n\n AnimationItem.prototype.playSegments = function (arr, forceFlag) {\n if (forceFlag) {\n this.segments.length = 0;\n }\n\n if (_typeof$4(arr[0]) === 'object') {\n var i;\n var len = arr.length;\n\n for (i = 0; i < len; i += 1) {\n this.segments.push(arr[i]);\n }\n } else {\n this.segments.push(arr);\n }\n\n if (this.segments.length && forceFlag) {\n this.adjustSegment(this.segments.shift(), 0);\n }\n\n if (this.isPaused) {\n this.play();\n }\n };\n\n AnimationItem.prototype.resetSegments = function (forceFlag) {\n this.segments.length = 0;\n this.segments.push([this.animationData.ip, this.animationData.op]);\n\n if (forceFlag) {\n this.checkSegments(0);\n }\n };\n\n AnimationItem.prototype.checkSegments = function (offset) {\n if (this.segments.length) {\n this.adjustSegment(this.segments.shift(), offset);\n return true;\n }\n\n return false;\n };\n\n AnimationItem.prototype.destroy = function (name) {\n if (name && this.name !== name || !this.renderer) {\n return;\n }\n\n this.renderer.destroy();\n this.imagePreloader.destroy();\n this.trigger('destroy');\n this._cbs = null;\n this.onEnterFrame = null;\n this.onLoopComplete = null;\n this.onComplete = null;\n this.onSegmentStart = null;\n this.onDestroy = null;\n this.renderer = null;\n this.expressionsPlugin = null;\n this.imagePreloader = null;\n this.projectInterface = null;\n };\n\n AnimationItem.prototype.setCurrentRawFrameValue = function (value) {\n this.currentRawFrame = value;\n this.gotoFrame();\n };\n\n AnimationItem.prototype.setSpeed = function (val) {\n this.playSpeed = val;\n this.updaFrameModifier();\n };\n\n AnimationItem.prototype.setDirection = function (val) {\n this.playDirection = val < 0 ? -1 : 1;\n this.updaFrameModifier();\n };\n\n AnimationItem.prototype.setLoop = function (isLooping) {\n this.loop = isLooping;\n };\n\n AnimationItem.prototype.setVolume = function (val, name) {\n if (name && this.name !== name) {\n return;\n }\n\n this.audioController.setVolume(val);\n };\n\n AnimationItem.prototype.getVolume = function () {\n return this.audioController.getVolume();\n };\n\n AnimationItem.prototype.mute = function (name) {\n if (name && this.name !== name) {\n return;\n }\n\n this.audioController.mute();\n };\n\n AnimationItem.prototype.unmute = function (name) {\n if (name && this.name !== name) {\n return;\n }\n\n this.audioController.unmute();\n };\n\n AnimationItem.prototype.updaFrameModifier = function () {\n this.frameModifier = this.frameMult * this.playSpeed * this.playDirection;\n this.audioController.setRate(this.playSpeed * this.playDirection);\n };\n\n AnimationItem.prototype.getPath = function () {\n return this.path;\n };\n\n AnimationItem.prototype.getAssetsPath = function (assetData) {\n var path = '';\n\n if (assetData.e) {\n path = assetData.p;\n } else if (this.assetsPath) {\n var imagePath = assetData.p;\n\n if (imagePath.indexOf('images/') !== -1) {\n imagePath = imagePath.split('/')[1];\n }\n\n path = this.assetsPath + imagePath;\n } else {\n path = this.path;\n path += assetData.u ? assetData.u : '';\n path += assetData.p;\n }\n\n return path;\n };\n\n AnimationItem.prototype.getAssetData = function (id) {\n var i = 0;\n var len = this.assets.length;\n\n while (i < len) {\n if (id === this.assets[i].id) {\n return this.assets[i];\n }\n\n i += 1;\n }\n\n return null;\n };\n\n AnimationItem.prototype.hide = function () {\n this.renderer.hide();\n };\n\n AnimationItem.prototype.show = function () {\n this.renderer.show();\n };\n\n AnimationItem.prototype.getDuration = function (isFrame) {\n return isFrame ? this.totalFrames : this.totalFrames / this.frameRate;\n };\n\n AnimationItem.prototype.updateDocumentData = function (path, documentData, index) {\n try {\n var element = this.renderer.getElementByPath(path);\n element.updateDocumentData(documentData, index);\n } catch (error) {// TODO: decide how to handle catch case\n }\n };\n\n AnimationItem.prototype.trigger = function (name) {\n if (this._cbs && this._cbs[name]) {\n switch (name) {\n case 'enterFrame':\n this.triggerEvent(name, new BMEnterFrameEvent(name, this.currentFrame, this.totalFrames, this.frameModifier));\n break;\n\n case 'drawnFrame':\n this.drawnFrameEvent.currentTime = this.currentFrame;\n this.drawnFrameEvent.totalTime = this.totalFrames;\n this.drawnFrameEvent.direction = this.frameModifier;\n this.triggerEvent(name, this.drawnFrameEvent);\n break;\n\n case 'loopComplete':\n this.triggerEvent(name, new BMCompleteLoopEvent(name, this.loop, this.playCount, this.frameMult));\n break;\n\n case 'complete':\n this.triggerEvent(name, new BMCompleteEvent(name, this.frameMult));\n break;\n\n case 'segmentStart':\n this.triggerEvent(name, new BMSegmentStartEvent(name, this.firstFrame, this.totalFrames));\n break;\n\n case 'destroy':\n this.triggerEvent(name, new BMDestroyEvent(name, this));\n break;\n\n default:\n this.triggerEvent(name);\n }\n }\n\n if (name === 'enterFrame' && this.onEnterFrame) {\n this.onEnterFrame.call(this, new BMEnterFrameEvent(name, this.currentFrame, this.totalFrames, this.frameMult));\n }\n\n if (name === 'loopComplete' && this.onLoopComplete) {\n this.onLoopComplete.call(this, new BMCompleteLoopEvent(name, this.loop, this.playCount, this.frameMult));\n }\n\n if (name === 'complete' && this.onComplete) {\n this.onComplete.call(this, new BMCompleteEvent(name, this.frameMult));\n }\n\n if (name === 'segmentStart' && this.onSegmentStart) {\n this.onSegmentStart.call(this, new BMSegmentStartEvent(name, this.firstFrame, this.totalFrames));\n }\n\n if (name === 'destroy' && this.onDestroy) {\n this.onDestroy.call(this, new BMDestroyEvent(name, this));\n }\n };\n\n AnimationItem.prototype.triggerRenderFrameError = function (nativeError) {\n var error = new BMRenderFrameErrorEvent(nativeError, this.currentFrame);\n this.triggerEvent('error', error);\n\n if (this.onError) {\n this.onError.call(this, error);\n }\n };\n\n AnimationItem.prototype.triggerConfigError = function (nativeError) {\n var error = new BMConfigErrorEvent(nativeError, this.currentFrame);\n this.triggerEvent('error', error);\n\n if (this.onError) {\n this.onError.call(this, error);\n }\n };\n\n var animationManager = function () {\n var moduleOb = {};\n var registeredAnimations = [];\n var initTime = 0;\n var len = 0;\n var playingAnimationsNum = 0;\n var _stopped = true;\n var _isFrozen = false;\n\n function removeElement(ev) {\n var i = 0;\n var animItem = ev.target;\n\n while (i < len) {\n if (registeredAnimations[i].animation === animItem) {\n registeredAnimations.splice(i, 1);\n i -= 1;\n len -= 1;\n\n if (!animItem.isPaused) {\n subtractPlayingCount();\n }\n }\n\n i += 1;\n }\n }\n\n function registerAnimation(element, animationData) {\n if (!element) {\n return null;\n }\n\n var i = 0;\n\n while (i < len) {\n if (registeredAnimations[i].elem === element && registeredAnimations[i].elem !== null) {\n return registeredAnimations[i].animation;\n }\n\n i += 1;\n }\n\n var animItem = new AnimationItem();\n setupAnimation(animItem, element);\n animItem.setData(element, animationData);\n return animItem;\n }\n\n function getRegisteredAnimations() {\n var i;\n var lenAnims = registeredAnimations.length;\n var animations = [];\n\n for (i = 0; i < lenAnims; i += 1) {\n animations.push(registeredAnimations[i].animation);\n }\n\n return animations;\n }\n\n function addPlayingCount() {\n playingAnimationsNum += 1;\n activate();\n }\n\n function subtractPlayingCount() {\n playingAnimationsNum -= 1;\n }\n\n function setupAnimation(animItem, element) {\n animItem.addEventListener('destroy', removeElement);\n animItem.addEventListener('_active', addPlayingCount);\n animItem.addEventListener('_idle', subtractPlayingCount);\n registeredAnimations.push({\n elem: element,\n animation: animItem\n });\n len += 1;\n }\n\n function loadAnimation(params) {\n var animItem = new AnimationItem();\n setupAnimation(animItem, null);\n animItem.setParams(params);\n return animItem;\n }\n\n function setSpeed(val, animation) {\n var i;\n\n for (i = 0; i < len; i += 1) {\n registeredAnimations[i].animation.setSpeed(val, animation);\n }\n }\n\n function setDirection(val, animation) {\n var i;\n\n for (i = 0; i < len; i += 1) {\n registeredAnimations[i].animation.setDirection(val, animation);\n }\n }\n\n function play(animation) {\n var i;\n\n for (i = 0; i < len; i += 1) {\n registeredAnimations[i].animation.play(animation);\n }\n }\n\n function resume(nowTime) {\n var elapsedTime = nowTime - initTime;\n var i;\n\n for (i = 0; i < len; i += 1) {\n registeredAnimations[i].animation.advanceTime(elapsedTime);\n }\n\n initTime = nowTime;\n\n if (playingAnimationsNum && !_isFrozen) {\n window.requestAnimationFrame(resume);\n } else {\n _stopped = true;\n }\n }\n\n function first(nowTime) {\n initTime = nowTime;\n window.requestAnimationFrame(resume);\n }\n\n function pause(animation) {\n var i;\n\n for (i = 0; i < len; i += 1) {\n registeredAnimations[i].animation.pause(animation);\n }\n }\n\n function goToAndStop(value, isFrame, animation) {\n var i;\n\n for (i = 0; i < len; i += 1) {\n registeredAnimations[i].animation.goToAndStop(value, isFrame, animation);\n }\n }\n\n function stop(animation) {\n var i;\n\n for (i = 0; i < len; i += 1) {\n registeredAnimations[i].animation.stop(animation);\n }\n }\n\n function togglePause(animation) {\n var i;\n\n for (i = 0; i < len; i += 1) {\n registeredAnimations[i].animation.togglePause(animation);\n }\n }\n\n function destroy(animation) {\n var i;\n\n for (i = len - 1; i >= 0; i -= 1) {\n registeredAnimations[i].animation.destroy(animation);\n }\n }\n\n function searchAnimations(animationData, standalone, renderer) {\n var animElements = [].concat([].slice.call(document.getElementsByClassName('lottie')), [].slice.call(document.getElementsByClassName('bodymovin')));\n var i;\n var lenAnims = animElements.length;\n\n for (i = 0; i < lenAnims; i += 1) {\n if (renderer) {\n animElements[i].setAttribute('data-bm-type', renderer);\n }\n\n registerAnimation(animElements[i], animationData);\n }\n\n if (standalone && lenAnims === 0) {\n if (!renderer) {\n renderer = 'svg';\n }\n\n var body = document.getElementsByTagName('body')[0];\n body.innerText = '';\n var div = createTag('div');\n div.style.width = '100%';\n div.style.height = '100%';\n div.setAttribute('data-bm-type', renderer);\n body.appendChild(div);\n registerAnimation(div, animationData);\n }\n }\n\n function resize() {\n var i;\n\n for (i = 0; i < len; i += 1) {\n registeredAnimations[i].animation.resize();\n }\n }\n\n function activate() {\n if (!_isFrozen && playingAnimationsNum) {\n if (_stopped) {\n window.requestAnimationFrame(first);\n _stopped = false;\n }\n }\n }\n\n function freeze() {\n _isFrozen = true;\n }\n\n function unfreeze() {\n _isFrozen = false;\n activate();\n }\n\n function setVolume(val, animation) {\n var i;\n\n for (i = 0; i < len; i += 1) {\n registeredAnimations[i].animation.setVolume(val, animation);\n }\n }\n\n function mute(animation) {\n var i;\n\n for (i = 0; i < len; i += 1) {\n registeredAnimations[i].animation.mute(animation);\n }\n }\n\n function unmute(animation) {\n var i;\n\n for (i = 0; i < len; i += 1) {\n registeredAnimations[i].animation.unmute(animation);\n }\n }\n\n moduleOb.registerAnimation = registerAnimation;\n moduleOb.loadAnimation = loadAnimation;\n moduleOb.setSpeed = setSpeed;\n moduleOb.setDirection = setDirection;\n moduleOb.play = play;\n moduleOb.pause = pause;\n moduleOb.stop = stop;\n moduleOb.togglePause = togglePause;\n moduleOb.searchAnimations = searchAnimations;\n moduleOb.resize = resize; // moduleOb.start = start;\n\n moduleOb.goToAndStop = goToAndStop;\n moduleOb.destroy = destroy;\n moduleOb.freeze = freeze;\n moduleOb.unfreeze = unfreeze;\n moduleOb.setVolume = setVolume;\n moduleOb.mute = mute;\n moduleOb.unmute = unmute;\n moduleOb.getRegisteredAnimations = getRegisteredAnimations;\n return moduleOb;\n }();\n\n /* eslint-disable */\n var BezierFactory = function () {\n /**\r\n * BezierEasing - use bezier curve for transition easing function\r\n * by Gaëtan Renaudeau 2014 - 2015 – MIT License\r\n *\r\n * Credits: is based on Firefox's nsSMILKeySpline.cpp\r\n * Usage:\r\n * var spline = BezierEasing([ 0.25, 0.1, 0.25, 1.0 ])\r\n * spline.get(x) => returns the easing value | x must be in [0, 1] range\r\n *\r\n */\n var ob = {};\n ob.getBezierEasing = getBezierEasing;\n var beziers = {};\n\n function getBezierEasing(a, b, c, d, nm) {\n var str = nm || ('bez_' + a + '_' + b + '_' + c + '_' + d).replace(/\\./g, 'p');\n\n if (beziers[str]) {\n return beziers[str];\n }\n\n var bezEasing = new BezierEasing([a, b, c, d]);\n beziers[str] = bezEasing;\n return bezEasing;\n } // These values are established by empiricism with tests (tradeoff: performance VS precision)\n\n\n var NEWTON_ITERATIONS = 4;\n var NEWTON_MIN_SLOPE = 0.001;\n var SUBDIVISION_PRECISION = 0.0000001;\n var SUBDIVISION_MAX_ITERATIONS = 10;\n var kSplineTableSize = 11;\n var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);\n var float32ArraySupported = typeof Float32Array === 'function';\n\n function A(aA1, aA2) {\n return 1.0 - 3.0 * aA2 + 3.0 * aA1;\n }\n\n function B(aA1, aA2) {\n return 3.0 * aA2 - 6.0 * aA1;\n }\n\n function C(aA1) {\n return 3.0 * aA1;\n } // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.\n\n\n function calcBezier(aT, aA1, aA2) {\n return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT;\n } // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.\n\n\n function getSlope(aT, aA1, aA2) {\n return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1);\n }\n\n function binarySubdivide(aX, aA, aB, mX1, mX2) {\n var currentX,\n currentT,\n i = 0;\n\n do {\n currentT = aA + (aB - aA) / 2.0;\n currentX = calcBezier(currentT, mX1, mX2) - aX;\n\n if (currentX > 0.0) {\n aB = currentT;\n } else {\n aA = currentT;\n }\n } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);\n\n return currentT;\n }\n\n function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {\n for (var i = 0; i < NEWTON_ITERATIONS; ++i) {\n var currentSlope = getSlope(aGuessT, mX1, mX2);\n if (currentSlope === 0.0) return aGuessT;\n var currentX = calcBezier(aGuessT, mX1, mX2) - aX;\n aGuessT -= currentX / currentSlope;\n }\n\n return aGuessT;\n }\n /**\r\n * points is an array of [ mX1, mY1, mX2, mY2 ]\r\n */\n\n\n function BezierEasing(points) {\n this._p = points;\n this._mSampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);\n this._precomputed = false;\n this.get = this.get.bind(this);\n }\n\n BezierEasing.prototype = {\n get: function get(x) {\n var mX1 = this._p[0],\n mY1 = this._p[1],\n mX2 = this._p[2],\n mY2 = this._p[3];\n if (!this._precomputed) this._precompute();\n if (mX1 === mY1 && mX2 === mY2) return x; // linear\n // Because JavaScript number are imprecise, we should guarantee the extremes are right.\n\n if (x === 0) return 0;\n if (x === 1) return 1;\n return calcBezier(this._getTForX(x), mY1, mY2);\n },\n // Private part\n _precompute: function _precompute() {\n var mX1 = this._p[0],\n mY1 = this._p[1],\n mX2 = this._p[2],\n mY2 = this._p[3];\n this._precomputed = true;\n\n if (mX1 !== mY1 || mX2 !== mY2) {\n this._calcSampleValues();\n }\n },\n _calcSampleValues: function _calcSampleValues() {\n var mX1 = this._p[0],\n mX2 = this._p[2];\n\n for (var i = 0; i < kSplineTableSize; ++i) {\n this._mSampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);\n }\n },\n\n /**\r\n * getTForX chose the fastest heuristic to determine the percentage value precisely from a given X projection.\r\n */\n _getTForX: function _getTForX(aX) {\n var mX1 = this._p[0],\n mX2 = this._p[2],\n mSampleValues = this._mSampleValues;\n var intervalStart = 0.0;\n var currentSample = 1;\n var lastSample = kSplineTableSize - 1;\n\n for (; currentSample !== lastSample && mSampleValues[currentSample] <= aX; ++currentSample) {\n intervalStart += kSampleStepSize;\n }\n\n --currentSample; // Interpolate to provide an initial guess for t\n\n var dist = (aX - mSampleValues[currentSample]) / (mSampleValues[currentSample + 1] - mSampleValues[currentSample]);\n var guessForT = intervalStart + dist * kSampleStepSize;\n var initialSlope = getSlope(guessForT, mX1, mX2);\n\n if (initialSlope >= NEWTON_MIN_SLOPE) {\n return newtonRaphsonIterate(aX, guessForT, mX1, mX2);\n }\n\n if (initialSlope === 0.0) {\n return guessForT;\n }\n\n return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);\n }\n };\n return ob;\n }();\n\n var pooling = function () {\n function _double(arr) {\n return arr.concat(createSizedArray(arr.length));\n }\n\n return {\n \"double\": _double\n };\n }();\n\n var poolFactory = function () {\n return function (initialLength, _create, _release) {\n var _length = 0;\n var _maxLength = initialLength;\n var pool = createSizedArray(_maxLength);\n var ob = {\n newElement: newElement,\n release: release\n };\n\n function newElement() {\n var element;\n\n if (_length) {\n _length -= 1;\n element = pool[_length];\n } else {\n element = _create();\n }\n\n return element;\n }\n\n function release(element) {\n if (_length === _maxLength) {\n pool = pooling[\"double\"](pool);\n _maxLength *= 2;\n }\n\n if (_release) {\n _release(element);\n }\n\n pool[_length] = element;\n _length += 1;\n }\n\n return ob;\n };\n }();\n\n var bezierLengthPool = function () {\n function create() {\n return {\n addedLength: 0,\n percents: createTypedArray('float32', getDefaultCurveSegments()),\n lengths: createTypedArray('float32', getDefaultCurveSegments())\n };\n }\n\n return poolFactory(8, create);\n }();\n\n var segmentsLengthPool = function () {\n function create() {\n return {\n lengths: [],\n totalLength: 0\n };\n }\n\n function release(element) {\n var i;\n var len = element.lengths.length;\n\n for (i = 0; i < len; i += 1) {\n bezierLengthPool.release(element.lengths[i]);\n }\n\n element.lengths.length = 0;\n }\n\n return poolFactory(8, create, release);\n }();\n\n function bezFunction() {\n var math = Math;\n\n function pointOnLine2D(x1, y1, x2, y2, x3, y3) {\n var det1 = x1 * y2 + y1 * x3 + x2 * y3 - x3 * y2 - y3 * x1 - x2 * y1;\n return det1 > -0.001 && det1 < 0.001;\n }\n\n function pointOnLine3D(x1, y1, z1, x2, y2, z2, x3, y3, z3) {\n if (z1 === 0 && z2 === 0 && z3 === 0) {\n return pointOnLine2D(x1, y1, x2, y2, x3, y3);\n }\n\n var dist1 = math.sqrt(math.pow(x2 - x1, 2) + math.pow(y2 - y1, 2) + math.pow(z2 - z1, 2));\n var dist2 = math.sqrt(math.pow(x3 - x1, 2) + math.pow(y3 - y1, 2) + math.pow(z3 - z1, 2));\n var dist3 = math.sqrt(math.pow(x3 - x2, 2) + math.pow(y3 - y2, 2) + math.pow(z3 - z2, 2));\n var diffDist;\n\n if (dist1 > dist2) {\n if (dist1 > dist3) {\n diffDist = dist1 - dist2 - dist3;\n } else {\n diffDist = dist3 - dist2 - dist1;\n }\n } else if (dist3 > dist2) {\n diffDist = dist3 - dist2 - dist1;\n } else {\n diffDist = dist2 - dist1 - dist3;\n }\n\n return diffDist > -0.0001 && diffDist < 0.0001;\n }\n\n var getBezierLength = function () {\n return function (pt1, pt2, pt3, pt4) {\n var curveSegments = getDefaultCurveSegments();\n var k;\n var i;\n var len;\n var ptCoord;\n var perc;\n var addedLength = 0;\n var ptDistance;\n var point = [];\n var lastPoint = [];\n var lengthData = bezierLengthPool.newElement();\n len = pt3.length;\n\n for (k = 0; k < curveSegments; k += 1) {\n perc = k / (curveSegments - 1);\n ptDistance = 0;\n\n for (i = 0; i < len; i += 1) {\n ptCoord = bmPow(1 - perc, 3) * pt1[i] + 3 * bmPow(1 - perc, 2) * perc * pt3[i] + 3 * (1 - perc) * bmPow(perc, 2) * pt4[i] + bmPow(perc, 3) * pt2[i];\n point[i] = ptCoord;\n\n if (lastPoint[i] !== null) {\n ptDistance += bmPow(point[i] - lastPoint[i], 2);\n }\n\n lastPoint[i] = point[i];\n }\n\n if (ptDistance) {\n ptDistance = bmSqrt(ptDistance);\n addedLength += ptDistance;\n }\n\n lengthData.percents[k] = perc;\n lengthData.lengths[k] = addedLength;\n }\n\n lengthData.addedLength = addedLength;\n return lengthData;\n };\n }();\n\n function getSegmentsLength(shapeData) {\n var segmentsLength = segmentsLengthPool.newElement();\n var closed = shapeData.c;\n var pathV = shapeData.v;\n var pathO = shapeData.o;\n var pathI = shapeData.i;\n var i;\n var len = shapeData._length;\n var lengths = segmentsLength.lengths;\n var totalLength = 0;\n\n for (i = 0; i < len - 1; i += 1) {\n lengths[i] = getBezierLength(pathV[i], pathV[i + 1], pathO[i], pathI[i + 1]);\n totalLength += lengths[i].addedLength;\n }\n\n if (closed && len) {\n lengths[i] = getBezierLength(pathV[i], pathV[0], pathO[i], pathI[0]);\n totalLength += lengths[i].addedLength;\n }\n\n segmentsLength.totalLength = totalLength;\n return segmentsLength;\n }\n\n function BezierData(length) {\n this.segmentLength = 0;\n this.points = new Array(length);\n }\n\n function PointData(partial, point) {\n this.partialLength = partial;\n this.point = point;\n }\n\n var buildBezierData = function () {\n var storedData = {};\n return function (pt1, pt2, pt3, pt4) {\n var bezierName = (pt1[0] + '_' + pt1[1] + '_' + pt2[0] + '_' + pt2[1] + '_' + pt3[0] + '_' + pt3[1] + '_' + pt4[0] + '_' + pt4[1]).replace(/\\./g, 'p');\n\n if (!storedData[bezierName]) {\n var curveSegments = getDefaultCurveSegments();\n var k;\n var i;\n var len;\n var ptCoord;\n var perc;\n var addedLength = 0;\n var ptDistance;\n var point;\n var lastPoint = null;\n\n if (pt1.length === 2 && (pt1[0] !== pt2[0] || pt1[1] !== pt2[1]) && pointOnLine2D(pt1[0], pt1[1], pt2[0], pt2[1], pt1[0] + pt3[0], pt1[1] + pt3[1]) && pointOnLine2D(pt1[0], pt1[1], pt2[0], pt2[1], pt2[0] + pt4[0], pt2[1] + pt4[1])) {\n curveSegments = 2;\n }\n\n var bezierData = new BezierData(curveSegments);\n len = pt3.length;\n\n for (k = 0; k < curveSegments; k += 1) {\n point = createSizedArray(len);\n perc = k / (curveSegments - 1);\n ptDistance = 0;\n\n for (i = 0; i < len; i += 1) {\n ptCoord = bmPow(1 - perc, 3) * pt1[i] + 3 * bmPow(1 - perc, 2) * perc * (pt1[i] + pt3[i]) + 3 * (1 - perc) * bmPow(perc, 2) * (pt2[i] + pt4[i]) + bmPow(perc, 3) * pt2[i];\n point[i] = ptCoord;\n\n if (lastPoint !== null) {\n ptDistance += bmPow(point[i] - lastPoint[i], 2);\n }\n }\n\n ptDistance = bmSqrt(ptDistance);\n addedLength += ptDistance;\n bezierData.points[k] = new PointData(ptDistance, point);\n lastPoint = point;\n }\n\n bezierData.segmentLength = addedLength;\n storedData[bezierName] = bezierData;\n }\n\n return storedData[bezierName];\n };\n }();\n\n function getDistancePerc(perc, bezierData) {\n var percents = bezierData.percents;\n var lengths = bezierData.lengths;\n var len = percents.length;\n var initPos = bmFloor((len - 1) * perc);\n var lengthPos = perc * bezierData.addedLength;\n var lPerc = 0;\n\n if (initPos === len - 1 || initPos === 0 || lengthPos === lengths[initPos]) {\n return percents[initPos];\n }\n\n var dir = lengths[initPos] > lengthPos ? -1 : 1;\n var flag = true;\n\n while (flag) {\n if (lengths[initPos] <= lengthPos && lengths[initPos + 1] > lengthPos) {\n lPerc = (lengthPos - lengths[initPos]) / (lengths[initPos + 1] - lengths[initPos]);\n flag = false;\n } else {\n initPos += dir;\n }\n\n if (initPos < 0 || initPos >= len - 1) {\n // FIX for TypedArrays that don't store floating point values with enough accuracy\n if (initPos === len - 1) {\n return percents[initPos];\n }\n\n flag = false;\n }\n }\n\n return percents[initPos] + (percents[initPos + 1] - percents[initPos]) * lPerc;\n }\n\n function getPointInSegment(pt1, pt2, pt3, pt4, percent, bezierData) {\n var t1 = getDistancePerc(percent, bezierData);\n var u1 = 1 - t1;\n var ptX = math.round((u1 * u1 * u1 * pt1[0] + (t1 * u1 * u1 + u1 * t1 * u1 + u1 * u1 * t1) * pt3[0] + (t1 * t1 * u1 + u1 * t1 * t1 + t1 * u1 * t1) * pt4[0] + t1 * t1 * t1 * pt2[0]) * 1000) / 1000;\n var ptY = math.round((u1 * u1 * u1 * pt1[1] + (t1 * u1 * u1 + u1 * t1 * u1 + u1 * u1 * t1) * pt3[1] + (t1 * t1 * u1 + u1 * t1 * t1 + t1 * u1 * t1) * pt4[1] + t1 * t1 * t1 * pt2[1]) * 1000) / 1000;\n return [ptX, ptY];\n }\n\n var bezierSegmentPoints = createTypedArray('float32', 8);\n\n function getNewSegment(pt1, pt2, pt3, pt4, startPerc, endPerc, bezierData) {\n if (startPerc < 0) {\n startPerc = 0;\n } else if (startPerc > 1) {\n startPerc = 1;\n }\n\n var t0 = getDistancePerc(startPerc, bezierData);\n endPerc = endPerc > 1 ? 1 : endPerc;\n var t1 = getDistancePerc(endPerc, bezierData);\n var i;\n var len = pt1.length;\n var u0 = 1 - t0;\n var u1 = 1 - t1;\n var u0u0u0 = u0 * u0 * u0;\n var t0u0u0_3 = t0 * u0 * u0 * 3; // eslint-disable-line camelcase\n\n var t0t0u0_3 = t0 * t0 * u0 * 3; // eslint-disable-line camelcase\n\n var t0t0t0 = t0 * t0 * t0; //\n\n var u0u0u1 = u0 * u0 * u1;\n var t0u0u1_3 = t0 * u0 * u1 + u0 * t0 * u1 + u0 * u0 * t1; // eslint-disable-line camelcase\n\n var t0t0u1_3 = t0 * t0 * u1 + u0 * t0 * t1 + t0 * u0 * t1; // eslint-disable-line camelcase\n\n var t0t0t1 = t0 * t0 * t1; //\n\n var u0u1u1 = u0 * u1 * u1;\n var t0u1u1_3 = t0 * u1 * u1 + u0 * t1 * u1 + u0 * u1 * t1; // eslint-disable-line camelcase\n\n var t0t1u1_3 = t0 * t1 * u1 + u0 * t1 * t1 + t0 * u1 * t1; // eslint-disable-line camelcase\n\n var t0t1t1 = t0 * t1 * t1; //\n\n var u1u1u1 = u1 * u1 * u1;\n var t1u1u1_3 = t1 * u1 * u1 + u1 * t1 * u1 + u1 * u1 * t1; // eslint-disable-line camelcase\n\n var t1t1u1_3 = t1 * t1 * u1 + u1 * t1 * t1 + t1 * u1 * t1; // eslint-disable-line camelcase\n\n var t1t1t1 = t1 * t1 * t1;\n\n for (i = 0; i < len; i += 1) {\n bezierSegmentPoints[i * 4] = math.round((u0u0u0 * pt1[i] + t0u0u0_3 * pt3[i] + t0t0u0_3 * pt4[i] + t0t0t0 * pt2[i]) * 1000) / 1000; // eslint-disable-line camelcase\n\n bezierSegmentPoints[i * 4 + 1] = math.round((u0u0u1 * pt1[i] + t0u0u1_3 * pt3[i] + t0t0u1_3 * pt4[i] + t0t0t1 * pt2[i]) * 1000) / 1000; // eslint-disable-line camelcase\n\n bezierSegmentPoints[i * 4 + 2] = math.round((u0u1u1 * pt1[i] + t0u1u1_3 * pt3[i] + t0t1u1_3 * pt4[i] + t0t1t1 * pt2[i]) * 1000) / 1000; // eslint-disable-line camelcase\n\n bezierSegmentPoints[i * 4 + 3] = math.round((u1u1u1 * pt1[i] + t1u1u1_3 * pt3[i] + t1t1u1_3 * pt4[i] + t1t1t1 * pt2[i]) * 1000) / 1000; // eslint-disable-line camelcase\n }\n\n return bezierSegmentPoints;\n }\n\n return {\n getSegmentsLength: getSegmentsLength,\n getNewSegment: getNewSegment,\n getPointInSegment: getPointInSegment,\n buildBezierData: buildBezierData,\n pointOnLine2D: pointOnLine2D,\n pointOnLine3D: pointOnLine3D\n };\n }\n\n var bez = bezFunction();\n\n var initFrame = initialDefaultFrame;\n var mathAbs = Math.abs;\n\n function interpolateValue(frameNum, caching) {\n var offsetTime = this.offsetTime;\n var newValue;\n\n if (this.propType === 'multidimensional') {\n newValue = createTypedArray('float32', this.pv.length);\n }\n\n var iterationIndex = caching.lastIndex;\n var i = iterationIndex;\n var len = this.keyframes.length - 1;\n var flag = true;\n var keyData;\n var nextKeyData;\n var keyframeMetadata;\n\n while (flag) {\n keyData = this.keyframes[i];\n nextKeyData = this.keyframes[i + 1];\n\n if (i === len - 1 && frameNum >= nextKeyData.t - offsetTime) {\n if (keyData.h) {\n keyData = nextKeyData;\n }\n\n iterationIndex = 0;\n break;\n }\n\n if (nextKeyData.t - offsetTime > frameNum) {\n iterationIndex = i;\n break;\n }\n\n if (i < len - 1) {\n i += 1;\n } else {\n iterationIndex = 0;\n flag = false;\n }\n }\n\n keyframeMetadata = this.keyframesMetadata[i] || {};\n var k;\n var kLen;\n var perc;\n var jLen;\n var j;\n var fnc;\n var nextKeyTime = nextKeyData.t - offsetTime;\n var keyTime = keyData.t - offsetTime;\n var endValue;\n\n if (keyData.to) {\n if (!keyframeMetadata.bezierData) {\n keyframeMetadata.bezierData = bez.buildBezierData(keyData.s, nextKeyData.s || keyData.e, keyData.to, keyData.ti);\n }\n\n var bezierData = keyframeMetadata.bezierData;\n\n if (frameNum >= nextKeyTime || frameNum < keyTime) {\n var ind = frameNum >= nextKeyTime ? bezierData.points.length - 1 : 0;\n kLen = bezierData.points[ind].point.length;\n\n for (k = 0; k < kLen; k += 1) {\n newValue[k] = bezierData.points[ind].point[k];\n } // caching._lastKeyframeIndex = -1;\n\n } else {\n if (keyframeMetadata.__fnct) {\n fnc = keyframeMetadata.__fnct;\n } else {\n fnc = BezierFactory.getBezierEasing(keyData.o.x, keyData.o.y, keyData.i.x, keyData.i.y, keyData.n).get;\n keyframeMetadata.__fnct = fnc;\n }\n\n perc = fnc((frameNum - keyTime) / (nextKeyTime - keyTime));\n var distanceInLine = bezierData.segmentLength * perc;\n var segmentPerc;\n var addedLength = caching.lastFrame < frameNum && caching._lastKeyframeIndex === i ? caching._lastAddedLength : 0;\n j = caching.lastFrame < frameNum && caching._lastKeyframeIndex === i ? caching._lastPoint : 0;\n flag = true;\n jLen = bezierData.points.length;\n\n while (flag) {\n addedLength += bezierData.points[j].partialLength;\n\n if (distanceInLine === 0 || perc === 0 || j === bezierData.points.length - 1) {\n kLen = bezierData.points[j].point.length;\n\n for (k = 0; k < kLen; k += 1) {\n newValue[k] = bezierData.points[j].point[k];\n }\n\n break;\n } else if (distanceInLine >= addedLength && distanceInLine < addedLength + bezierData.points[j + 1].partialLength) {\n segmentPerc = (distanceInLine - addedLength) / bezierData.points[j + 1].partialLength;\n kLen = bezierData.points[j].point.length;\n\n for (k = 0; k < kLen; k += 1) {\n newValue[k] = bezierData.points[j].point[k] + (bezierData.points[j + 1].point[k] - bezierData.points[j].point[k]) * segmentPerc;\n }\n\n break;\n }\n\n if (j < jLen - 1) {\n j += 1;\n } else {\n flag = false;\n }\n }\n\n caching._lastPoint = j;\n caching._lastAddedLength = addedLength - bezierData.points[j].partialLength;\n caching._lastKeyframeIndex = i;\n }\n } else {\n var outX;\n var outY;\n var inX;\n var inY;\n var keyValue;\n len = keyData.s.length;\n endValue = nextKeyData.s || keyData.e;\n\n if (this.sh && keyData.h !== 1) {\n if (frameNum >= nextKeyTime) {\n newValue[0] = endValue[0];\n newValue[1] = endValue[1];\n newValue[2] = endValue[2];\n } else if (frameNum <= keyTime) {\n newValue[0] = keyData.s[0];\n newValue[1] = keyData.s[1];\n newValue[2] = keyData.s[2];\n } else {\n var quatStart = createQuaternion(keyData.s);\n var quatEnd = createQuaternion(endValue);\n var time = (frameNum - keyTime) / (nextKeyTime - keyTime);\n quaternionToEuler(newValue, slerp(quatStart, quatEnd, time));\n }\n } else {\n for (i = 0; i < len; i += 1) {\n if (keyData.h !== 1) {\n if (frameNum >= nextKeyTime) {\n perc = 1;\n } else if (frameNum < keyTime) {\n perc = 0;\n } else {\n if (keyData.o.x.constructor === Array) {\n if (!keyframeMetadata.__fnct) {\n keyframeMetadata.__fnct = [];\n }\n\n if (!keyframeMetadata.__fnct[i]) {\n outX = keyData.o.x[i] === undefined ? keyData.o.x[0] : keyData.o.x[i];\n outY = keyData.o.y[i] === undefined ? keyData.o.y[0] : keyData.o.y[i];\n inX = keyData.i.x[i] === undefined ? keyData.i.x[0] : keyData.i.x[i];\n inY = keyData.i.y[i] === undefined ? keyData.i.y[0] : keyData.i.y[i];\n fnc = BezierFactory.getBezierEasing(outX, outY, inX, inY).get;\n keyframeMetadata.__fnct[i] = fnc;\n } else {\n fnc = keyframeMetadata.__fnct[i];\n }\n } else if (!keyframeMetadata.__fnct) {\n outX = keyData.o.x;\n outY = keyData.o.y;\n inX = keyData.i.x;\n inY = keyData.i.y;\n fnc = BezierFactory.getBezierEasing(outX, outY, inX, inY).get;\n keyData.keyframeMetadata = fnc;\n } else {\n fnc = keyframeMetadata.__fnct;\n }\n\n perc = fnc((frameNum - keyTime) / (nextKeyTime - keyTime));\n }\n }\n\n endValue = nextKeyData.s || keyData.e;\n keyValue = keyData.h === 1 ? keyData.s[i] : keyData.s[i] + (endValue[i] - keyData.s[i]) * perc;\n\n if (this.propType === 'multidimensional') {\n newValue[i] = keyValue;\n } else {\n newValue = keyValue;\n }\n }\n }\n }\n\n caching.lastIndex = iterationIndex;\n return newValue;\n } // based on @Toji's https://github.com/toji/gl-matrix/\n\n\n function slerp(a, b, t) {\n var out = [];\n var ax = a[0];\n var ay = a[1];\n var az = a[2];\n var aw = a[3];\n var bx = b[0];\n var by = b[1];\n var bz = b[2];\n var bw = b[3];\n var omega;\n var cosom;\n var sinom;\n var scale0;\n var scale1;\n cosom = ax * bx + ay * by + az * bz + aw * bw;\n\n if (cosom < 0.0) {\n cosom = -cosom;\n bx = -bx;\n by = -by;\n bz = -bz;\n bw = -bw;\n }\n\n if (1.0 - cosom > 0.000001) {\n omega = Math.acos(cosom);\n sinom = Math.sin(omega);\n scale0 = Math.sin((1.0 - t) * omega) / sinom;\n scale1 = Math.sin(t * omega) / sinom;\n } else {\n scale0 = 1.0 - t;\n scale1 = t;\n }\n\n out[0] = scale0 * ax + scale1 * bx;\n out[1] = scale0 * ay + scale1 * by;\n out[2] = scale0 * az + scale1 * bz;\n out[3] = scale0 * aw + scale1 * bw;\n return out;\n }\n\n function quaternionToEuler(out, quat) {\n var qx = quat[0];\n var qy = quat[1];\n var qz = quat[2];\n var qw = quat[3];\n var heading = Math.atan2(2 * qy * qw - 2 * qx * qz, 1 - 2 * qy * qy - 2 * qz * qz);\n var attitude = Math.asin(2 * qx * qy + 2 * qz * qw);\n var bank = Math.atan2(2 * qx * qw - 2 * qy * qz, 1 - 2 * qx * qx - 2 * qz * qz);\n out[0] = heading / degToRads;\n out[1] = attitude / degToRads;\n out[2] = bank / degToRads;\n }\n\n function createQuaternion(values) {\n var heading = values[0] * degToRads;\n var attitude = values[1] * degToRads;\n var bank = values[2] * degToRads;\n var c1 = Math.cos(heading / 2);\n var c2 = Math.cos(attitude / 2);\n var c3 = Math.cos(bank / 2);\n var s1 = Math.sin(heading / 2);\n var s2 = Math.sin(attitude / 2);\n var s3 = Math.sin(bank / 2);\n var w = c1 * c2 * c3 - s1 * s2 * s3;\n var x = s1 * s2 * c3 + c1 * c2 * s3;\n var y = s1 * c2 * c3 + c1 * s2 * s3;\n var z = c1 * s2 * c3 - s1 * c2 * s3;\n return [x, y, z, w];\n }\n\n function getValueAtCurrentTime() {\n var frameNum = this.comp.renderedFrame - this.offsetTime;\n var initTime = this.keyframes[0].t - this.offsetTime;\n var endTime = this.keyframes[this.keyframes.length - 1].t - this.offsetTime;\n\n if (!(frameNum === this._caching.lastFrame || this._caching.lastFrame !== initFrame && (this._caching.lastFrame >= endTime && frameNum >= endTime || this._caching.lastFrame < initTime && frameNum < initTime))) {\n if (this._caching.lastFrame >= frameNum) {\n this._caching._lastKeyframeIndex = -1;\n this._caching.lastIndex = 0;\n }\n\n var renderResult = this.interpolateValue(frameNum, this._caching);\n this.pv = renderResult;\n }\n\n this._caching.lastFrame = frameNum;\n return this.pv;\n }\n\n function setVValue(val) {\n var multipliedValue;\n\n if (this.propType === 'unidimensional') {\n multipliedValue = val * this.mult;\n\n if (mathAbs(this.v - multipliedValue) > 0.00001) {\n this.v = multipliedValue;\n this._mdf = true;\n }\n } else {\n var i = 0;\n var len = this.v.length;\n\n while (i < len) {\n multipliedValue = val[i] * this.mult;\n\n if (mathAbs(this.v[i] - multipliedValue) > 0.00001) {\n this.v[i] = multipliedValue;\n this._mdf = true;\n }\n\n i += 1;\n }\n }\n }\n\n function processEffectsSequence() {\n if (this.elem.globalData.frameId === this.frameId || !this.effectsSequence.length) {\n return;\n }\n\n if (this.lock) {\n this.setVValue(this.pv);\n return;\n }\n\n this.lock = true;\n this._mdf = this._isFirstFrame;\n var i;\n var len = this.effectsSequence.length;\n var finalValue = this.kf ? this.pv : this.data.k;\n\n for (i = 0; i < len; i += 1) {\n finalValue = this.effectsSequence[i](finalValue);\n }\n\n this.setVValue(finalValue);\n this._isFirstFrame = false;\n this.lock = false;\n this.frameId = this.elem.globalData.frameId;\n }\n\n function addEffect(effectFunction) {\n this.effectsSequence.push(effectFunction);\n this.container.addDynamicProperty(this);\n }\n\n function ValueProperty(elem, data, mult, container) {\n this.propType = 'unidimensional';\n this.mult = mult || 1;\n this.data = data;\n this.v = mult ? data.k * mult : data.k;\n this.pv = data.k;\n this._mdf = false;\n this.elem = elem;\n this.container = container;\n this.comp = elem.comp;\n this.k = false;\n this.kf = false;\n this.vel = 0;\n this.effectsSequence = [];\n this._isFirstFrame = true;\n this.getValue = processEffectsSequence;\n this.setVValue = setVValue;\n this.addEffect = addEffect;\n }\n\n function MultiDimensionalProperty(elem, data, mult, container) {\n this.propType = 'multidimensional';\n this.mult = mult || 1;\n this.data = data;\n this._mdf = false;\n this.elem = elem;\n this.container = container;\n this.comp = elem.comp;\n this.k = false;\n this.kf = false;\n this.frameId = -1;\n var i;\n var len = data.k.length;\n this.v = createTypedArray('float32', len);\n this.pv = createTypedArray('float32', len);\n this.vel = createTypedArray('float32', len);\n\n for (i = 0; i < len; i += 1) {\n this.v[i] = data.k[i] * this.mult;\n this.pv[i] = data.k[i];\n }\n\n this._isFirstFrame = true;\n this.effectsSequence = [];\n this.getValue = processEffectsSequence;\n this.setVValue = setVValue;\n this.addEffect = addEffect;\n }\n\n function KeyframedValueProperty(elem, data, mult, container) {\n this.propType = 'unidimensional';\n this.keyframes = data.k;\n this.keyframesMetadata = [];\n this.offsetTime = elem.data.st;\n this.frameId = -1;\n this._caching = {\n lastFrame: initFrame,\n lastIndex: 0,\n value: 0,\n _lastKeyframeIndex: -1\n };\n this.k = true;\n this.kf = true;\n this.data = data;\n this.mult = mult || 1;\n this.elem = elem;\n this.container = container;\n this.comp = elem.comp;\n this.v = initFrame;\n this.pv = initFrame;\n this._isFirstFrame = true;\n this.getValue = processEffectsSequence;\n this.setVValue = setVValue;\n this.interpolateValue = interpolateValue;\n this.effectsSequence = [getValueAtCurrentTime.bind(this)];\n this.addEffect = addEffect;\n }\n\n function KeyframedMultidimensionalProperty(elem, data, mult, container) {\n this.propType = 'multidimensional';\n var i;\n var len = data.k.length;\n var s;\n var e;\n var to;\n var ti;\n\n for (i = 0; i < len - 1; i += 1) {\n if (data.k[i].to && data.k[i].s && data.k[i + 1] && data.k[i + 1].s) {\n s = data.k[i].s;\n e = data.k[i + 1].s;\n to = data.k[i].to;\n ti = data.k[i].ti;\n\n if (s.length === 2 && !(s[0] === e[0] && s[1] === e[1]) && bez.pointOnLine2D(s[0], s[1], e[0], e[1], s[0] + to[0], s[1] + to[1]) && bez.pointOnLine2D(s[0], s[1], e[0], e[1], e[0] + ti[0], e[1] + ti[1]) || s.length === 3 && !(s[0] === e[0] && s[1] === e[1] && s[2] === e[2]) && bez.pointOnLine3D(s[0], s[1], s[2], e[0], e[1], e[2], s[0] + to[0], s[1] + to[1], s[2] + to[2]) && bez.pointOnLine3D(s[0], s[1], s[2], e[0], e[1], e[2], e[0] + ti[0], e[1] + ti[1], e[2] + ti[2])) {\n data.k[i].to = null;\n data.k[i].ti = null;\n }\n\n if (s[0] === e[0] && s[1] === e[1] && to[0] === 0 && to[1] === 0 && ti[0] === 0 && ti[1] === 0) {\n if (s.length === 2 || s[2] === e[2] && to[2] === 0 && ti[2] === 0) {\n data.k[i].to = null;\n data.k[i].ti = null;\n }\n }\n }\n }\n\n this.effectsSequence = [getValueAtCurrentTime.bind(this)];\n this.data = data;\n this.keyframes = data.k;\n this.keyframesMetadata = [];\n this.offsetTime = elem.data.st;\n this.k = true;\n this.kf = true;\n this._isFirstFrame = true;\n this.mult = mult || 1;\n this.elem = elem;\n this.container = container;\n this.comp = elem.comp;\n this.getValue = processEffectsSequence;\n this.setVValue = setVValue;\n this.interpolateValue = interpolateValue;\n this.frameId = -1;\n var arrLen = data.k[0].s.length;\n this.v = createTypedArray('float32', arrLen);\n this.pv = createTypedArray('float32', arrLen);\n\n for (i = 0; i < arrLen; i += 1) {\n this.v[i] = initFrame;\n this.pv[i] = initFrame;\n }\n\n this._caching = {\n lastFrame: initFrame,\n lastIndex: 0,\n value: createTypedArray('float32', arrLen)\n };\n this.addEffect = addEffect;\n }\n\n var PropertyFactory = function () {\n function getProp(elem, data, type, mult, container) {\n if (data.sid) {\n data = elem.globalData.slotManager.getProp(data);\n }\n\n var p;\n\n if (!data.k.length) {\n p = new ValueProperty(elem, data, mult, container);\n } else if (typeof data.k[0] === 'number') {\n p = new MultiDimensionalProperty(elem, data, mult, container);\n } else {\n switch (type) {\n case 0:\n p = new KeyframedValueProperty(elem, data, mult, container);\n break;\n\n case 1:\n p = new KeyframedMultidimensionalProperty(elem, data, mult, container);\n break;\n\n default:\n break;\n }\n }\n\n if (p.effectsSequence.length) {\n container.addDynamicProperty(p);\n }\n\n return p;\n }\n\n var ob = {\n getProp: getProp\n };\n return ob;\n }();\n\n function DynamicPropertyContainer() {}\n\n DynamicPropertyContainer.prototype = {\n addDynamicProperty: function addDynamicProperty(prop) {\n if (this.dynamicProperties.indexOf(prop) === -1) {\n this.dynamicProperties.push(prop);\n this.container.addDynamicProperty(this);\n this._isAnimated = true;\n }\n },\n iterateDynamicProperties: function iterateDynamicProperties() {\n this._mdf = false;\n var i;\n var len = this.dynamicProperties.length;\n\n for (i = 0; i < len; i += 1) {\n this.dynamicProperties[i].getValue();\n\n if (this.dynamicProperties[i]._mdf) {\n this._mdf = true;\n }\n }\n },\n initDynamicPropertyContainer: function initDynamicPropertyContainer(container) {\n this.container = container;\n this.dynamicProperties = [];\n this._mdf = false;\n this._isAnimated = false;\n }\n };\n\n var pointPool = function () {\n function create() {\n return createTypedArray('float32', 2);\n }\n\n return poolFactory(8, create);\n }();\n\n function ShapePath() {\n this.c = false;\n this._length = 0;\n this._maxLength = 8;\n this.v = createSizedArray(this._maxLength);\n this.o = createSizedArray(this._maxLength);\n this.i = createSizedArray(this._maxLength);\n }\n\n ShapePath.prototype.setPathData = function (closed, len) {\n this.c = closed;\n this.setLength(len);\n var i = 0;\n\n while (i < len) {\n this.v[i] = pointPool.newElement();\n this.o[i] = pointPool.newElement();\n this.i[i] = pointPool.newElement();\n i += 1;\n }\n };\n\n ShapePath.prototype.setLength = function (len) {\n while (this._maxLength < len) {\n this.doubleArrayLength();\n }\n\n this._length = len;\n };\n\n ShapePath.prototype.doubleArrayLength = function () {\n this.v = this.v.concat(createSizedArray(this._maxLength));\n this.i = this.i.concat(createSizedArray(this._maxLength));\n this.o = this.o.concat(createSizedArray(this._maxLength));\n this._maxLength *= 2;\n };\n\n ShapePath.prototype.setXYAt = function (x, y, type, pos, replace) {\n var arr;\n this._length = Math.max(this._length, pos + 1);\n\n if (this._length >= this._maxLength) {\n this.doubleArrayLength();\n }\n\n switch (type) {\n case 'v':\n arr = this.v;\n break;\n\n case 'i':\n arr = this.i;\n break;\n\n case 'o':\n arr = this.o;\n break;\n\n default:\n arr = [];\n break;\n }\n\n if (!arr[pos] || arr[pos] && !replace) {\n arr[pos] = pointPool.newElement();\n }\n\n arr[pos][0] = x;\n arr[pos][1] = y;\n };\n\n ShapePath.prototype.setTripleAt = function (vX, vY, oX, oY, iX, iY, pos, replace) {\n this.setXYAt(vX, vY, 'v', pos, replace);\n this.setXYAt(oX, oY, 'o', pos, replace);\n this.setXYAt(iX, iY, 'i', pos, replace);\n };\n\n ShapePath.prototype.reverse = function () {\n var newPath = new ShapePath();\n newPath.setPathData(this.c, this._length);\n var vertices = this.v;\n var outPoints = this.o;\n var inPoints = this.i;\n var init = 0;\n\n if (this.c) {\n newPath.setTripleAt(vertices[0][0], vertices[0][1], inPoints[0][0], inPoints[0][1], outPoints[0][0], outPoints[0][1], 0, false);\n init = 1;\n }\n\n var cnt = this._length - 1;\n var len = this._length;\n var i;\n\n for (i = init; i < len; i += 1) {\n newPath.setTripleAt(vertices[cnt][0], vertices[cnt][1], inPoints[cnt][0], inPoints[cnt][1], outPoints[cnt][0], outPoints[cnt][1], i, false);\n cnt -= 1;\n }\n\n return newPath;\n };\n\n ShapePath.prototype.length = function () {\n return this._length;\n };\n\n var shapePool = function () {\n function create() {\n return new ShapePath();\n }\n\n function release(shapePath) {\n var len = shapePath._length;\n var i;\n\n for (i = 0; i < len; i += 1) {\n pointPool.release(shapePath.v[i]);\n pointPool.release(shapePath.i[i]);\n pointPool.release(shapePath.o[i]);\n shapePath.v[i] = null;\n shapePath.i[i] = null;\n shapePath.o[i] = null;\n }\n\n shapePath._length = 0;\n shapePath.c = false;\n }\n\n function clone(shape) {\n var cloned = factory.newElement();\n var i;\n var len = shape._length === undefined ? shape.v.length : shape._length;\n cloned.setLength(len);\n cloned.c = shape.c;\n\n for (i = 0; i < len; i += 1) {\n cloned.setTripleAt(shape.v[i][0], shape.v[i][1], shape.o[i][0], shape.o[i][1], shape.i[i][0], shape.i[i][1], i);\n }\n\n return cloned;\n }\n\n var factory = poolFactory(4, create, release);\n factory.clone = clone;\n return factory;\n }();\n\n function ShapeCollection() {\n this._length = 0;\n this._maxLength = 4;\n this.shapes = createSizedArray(this._maxLength);\n }\n\n ShapeCollection.prototype.addShape = function (shapeData) {\n if (this._length === this._maxLength) {\n this.shapes = this.shapes.concat(createSizedArray(this._maxLength));\n this._maxLength *= 2;\n }\n\n this.shapes[this._length] = shapeData;\n this._length += 1;\n };\n\n ShapeCollection.prototype.releaseShapes = function () {\n var i;\n\n for (i = 0; i < this._length; i += 1) {\n shapePool.release(this.shapes[i]);\n }\n\n this._length = 0;\n };\n\n var shapeCollectionPool = function () {\n var ob = {\n newShapeCollection: newShapeCollection,\n release: release\n };\n var _length = 0;\n var _maxLength = 4;\n var pool = createSizedArray(_maxLength);\n\n function newShapeCollection() {\n var shapeCollection;\n\n if (_length) {\n _length -= 1;\n shapeCollection = pool[_length];\n } else {\n shapeCollection = new ShapeCollection();\n }\n\n return shapeCollection;\n }\n\n function release(shapeCollection) {\n var i;\n var len = shapeCollection._length;\n\n for (i = 0; i < len; i += 1) {\n shapePool.release(shapeCollection.shapes[i]);\n }\n\n shapeCollection._length = 0;\n\n if (_length === _maxLength) {\n pool = pooling[\"double\"](pool);\n _maxLength *= 2;\n }\n\n pool[_length] = shapeCollection;\n _length += 1;\n }\n\n return ob;\n }();\n\n var ShapePropertyFactory = function () {\n var initFrame = -999999;\n\n function interpolateShape(frameNum, previousValue, caching) {\n var iterationIndex = caching.lastIndex;\n var keyPropS;\n var keyPropE;\n var isHold;\n var j;\n var k;\n var jLen;\n var kLen;\n var perc;\n var vertexValue;\n var kf = this.keyframes;\n\n if (frameNum < kf[0].t - this.offsetTime) {\n keyPropS = kf[0].s[0];\n isHold = true;\n iterationIndex = 0;\n } else if (frameNum >= kf[kf.length - 1].t - this.offsetTime) {\n keyPropS = kf[kf.length - 1].s ? kf[kf.length - 1].s[0] : kf[kf.length - 2].e[0];\n /* if(kf[kf.length - 1].s){\r\n keyPropS = kf[kf.length - 1].s[0];\r\n }else{\r\n keyPropS = kf[kf.length - 2].e[0];\r\n } */\n\n isHold = true;\n } else {\n var i = iterationIndex;\n var len = kf.length - 1;\n var flag = true;\n var keyData;\n var nextKeyData;\n var keyframeMetadata;\n\n while (flag) {\n keyData = kf[i];\n nextKeyData = kf[i + 1];\n\n if (nextKeyData.t - this.offsetTime > frameNum) {\n break;\n }\n\n if (i < len - 1) {\n i += 1;\n } else {\n flag = false;\n }\n }\n\n keyframeMetadata = this.keyframesMetadata[i] || {};\n isHold = keyData.h === 1;\n iterationIndex = i;\n\n if (!isHold) {\n if (frameNum >= nextKeyData.t - this.offsetTime) {\n perc = 1;\n } else if (frameNum < keyData.t - this.offsetTime) {\n perc = 0;\n } else {\n var fnc;\n\n if (keyframeMetadata.__fnct) {\n fnc = keyframeMetadata.__fnct;\n } else {\n fnc = BezierFactory.getBezierEasing(keyData.o.x, keyData.o.y, keyData.i.x, keyData.i.y).get;\n keyframeMetadata.__fnct = fnc;\n }\n\n perc = fnc((frameNum - (keyData.t - this.offsetTime)) / (nextKeyData.t - this.offsetTime - (keyData.t - this.offsetTime)));\n }\n\n keyPropE = nextKeyData.s ? nextKeyData.s[0] : keyData.e[0];\n }\n\n keyPropS = keyData.s[0];\n }\n\n jLen = previousValue._length;\n kLen = keyPropS.i[0].length;\n caching.lastIndex = iterationIndex;\n\n for (j = 0; j < jLen; j += 1) {\n for (k = 0; k < kLen; k += 1) {\n vertexValue = isHold ? keyPropS.i[j][k] : keyPropS.i[j][k] + (keyPropE.i[j][k] - keyPropS.i[j][k]) * perc;\n previousValue.i[j][k] = vertexValue;\n vertexValue = isHold ? keyPropS.o[j][k] : keyPropS.o[j][k] + (keyPropE.o[j][k] - keyPropS.o[j][k]) * perc;\n previousValue.o[j][k] = vertexValue;\n vertexValue = isHold ? keyPropS.v[j][k] : keyPropS.v[j][k] + (keyPropE.v[j][k] - keyPropS.v[j][k]) * perc;\n previousValue.v[j][k] = vertexValue;\n }\n }\n }\n\n function interpolateShapeCurrentTime() {\n var frameNum = this.comp.renderedFrame - this.offsetTime;\n var initTime = this.keyframes[0].t - this.offsetTime;\n var endTime = this.keyframes[this.keyframes.length - 1].t - this.offsetTime;\n var lastFrame = this._caching.lastFrame;\n\n if (!(lastFrame !== initFrame && (lastFrame < initTime && frameNum < initTime || lastFrame > endTime && frameNum > endTime))) {\n /// /\n this._caching.lastIndex = lastFrame < frameNum ? this._caching.lastIndex : 0;\n this.interpolateShape(frameNum, this.pv, this._caching); /// /\n }\n\n this._caching.lastFrame = frameNum;\n return this.pv;\n }\n\n function resetShape() {\n this.paths = this.localShapeCollection;\n }\n\n function shapesEqual(shape1, shape2) {\n if (shape1._length !== shape2._length || shape1.c !== shape2.c) {\n return false;\n }\n\n var i;\n var len = shape1._length;\n\n for (i = 0; i < len; i += 1) {\n if (shape1.v[i][0] !== shape2.v[i][0] || shape1.v[i][1] !== shape2.v[i][1] || shape1.o[i][0] !== shape2.o[i][0] || shape1.o[i][1] !== shape2.o[i][1] || shape1.i[i][0] !== shape2.i[i][0] || shape1.i[i][1] !== shape2.i[i][1]) {\n return false;\n }\n }\n\n return true;\n }\n\n function setVValue(newPath) {\n if (!shapesEqual(this.v, newPath)) {\n this.v = shapePool.clone(newPath);\n this.localShapeCollection.releaseShapes();\n this.localShapeCollection.addShape(this.v);\n this._mdf = true;\n this.paths = this.localShapeCollection;\n }\n }\n\n function processEffectsSequence() {\n if (this.elem.globalData.frameId === this.frameId) {\n return;\n }\n\n if (!this.effectsSequence.length) {\n this._mdf = false;\n return;\n }\n\n if (this.lock) {\n this.setVValue(this.pv);\n return;\n }\n\n this.lock = true;\n this._mdf = false;\n var finalValue;\n\n if (this.kf) {\n finalValue = this.pv;\n } else if (this.data.ks) {\n finalValue = this.data.ks.k;\n } else {\n finalValue = this.data.pt.k;\n }\n\n var i;\n var len = this.effectsSequence.length;\n\n for (i = 0; i < len; i += 1) {\n finalValue = this.effectsSequence[i](finalValue);\n }\n\n this.setVValue(finalValue);\n this.lock = false;\n this.frameId = this.elem.globalData.frameId;\n }\n\n function ShapeProperty(elem, data, type) {\n this.propType = 'shape';\n this.comp = elem.comp;\n this.container = elem;\n this.elem = elem;\n this.data = data;\n this.k = false;\n this.kf = false;\n this._mdf = false;\n var pathData = type === 3 ? data.pt.k : data.ks.k;\n this.v = shapePool.clone(pathData);\n this.pv = shapePool.clone(this.v);\n this.localShapeCollection = shapeCollectionPool.newShapeCollection();\n this.paths = this.localShapeCollection;\n this.paths.addShape(this.v);\n this.reset = resetShape;\n this.effectsSequence = [];\n }\n\n function addEffect(effectFunction) {\n this.effectsSequence.push(effectFunction);\n this.container.addDynamicProperty(this);\n }\n\n ShapeProperty.prototype.interpolateShape = interpolateShape;\n ShapeProperty.prototype.getValue = processEffectsSequence;\n ShapeProperty.prototype.setVValue = setVValue;\n ShapeProperty.prototype.addEffect = addEffect;\n\n function KeyframedShapeProperty(elem, data, type) {\n this.propType = 'shape';\n this.comp = elem.comp;\n this.elem = elem;\n this.container = elem;\n this.offsetTime = elem.data.st;\n this.keyframes = type === 3 ? data.pt.k : data.ks.k;\n this.keyframesMetadata = [];\n this.k = true;\n this.kf = true;\n var len = this.keyframes[0].s[0].i.length;\n this.v = shapePool.newElement();\n this.v.setPathData(this.keyframes[0].s[0].c, len);\n this.pv = shapePool.clone(this.v);\n this.localShapeCollection = shapeCollectionPool.newShapeCollection();\n this.paths = this.localShapeCollection;\n this.paths.addShape(this.v);\n this.lastFrame = initFrame;\n this.reset = resetShape;\n this._caching = {\n lastFrame: initFrame,\n lastIndex: 0\n };\n this.effectsSequence = [interpolateShapeCurrentTime.bind(this)];\n }\n\n KeyframedShapeProperty.prototype.getValue = processEffectsSequence;\n KeyframedShapeProperty.prototype.interpolateShape = interpolateShape;\n KeyframedShapeProperty.prototype.setVValue = setVValue;\n KeyframedShapeProperty.prototype.addEffect = addEffect;\n\n var EllShapeProperty = function () {\n var cPoint = roundCorner;\n\n function EllShapePropertyFactory(elem, data) {\n this.v = shapePool.newElement();\n this.v.setPathData(true, 4);\n this.localShapeCollection = shapeCollectionPool.newShapeCollection();\n this.paths = this.localShapeCollection;\n this.localShapeCollection.addShape(this.v);\n this.d = data.d;\n this.elem = elem;\n this.comp = elem.comp;\n this.frameId = -1;\n this.initDynamicPropertyContainer(elem);\n this.p = PropertyFactory.getProp(elem, data.p, 1, 0, this);\n this.s = PropertyFactory.getProp(elem, data.s, 1, 0, this);\n\n if (this.dynamicProperties.length) {\n this.k = true;\n } else {\n this.k = false;\n this.convertEllToPath();\n }\n }\n\n EllShapePropertyFactory.prototype = {\n reset: resetShape,\n getValue: function getValue() {\n if (this.elem.globalData.frameId === this.frameId) {\n return;\n }\n\n this.frameId = this.elem.globalData.frameId;\n this.iterateDynamicProperties();\n\n if (this._mdf) {\n this.convertEllToPath();\n }\n },\n convertEllToPath: function convertEllToPath() {\n var p0 = this.p.v[0];\n var p1 = this.p.v[1];\n var s0 = this.s.v[0] / 2;\n var s1 = this.s.v[1] / 2;\n\n var _cw = this.d !== 3;\n\n var _v = this.v;\n _v.v[0][0] = p0;\n _v.v[0][1] = p1 - s1;\n _v.v[1][0] = _cw ? p0 + s0 : p0 - s0;\n _v.v[1][1] = p1;\n _v.v[2][0] = p0;\n _v.v[2][1] = p1 + s1;\n _v.v[3][0] = _cw ? p0 - s0 : p0 + s0;\n _v.v[3][1] = p1;\n _v.i[0][0] = _cw ? p0 - s0 * cPoint : p0 + s0 * cPoint;\n _v.i[0][1] = p1 - s1;\n _v.i[1][0] = _cw ? p0 + s0 : p0 - s0;\n _v.i[1][1] = p1 - s1 * cPoint;\n _v.i[2][0] = _cw ? p0 + s0 * cPoint : p0 - s0 * cPoint;\n _v.i[2][1] = p1 + s1;\n _v.i[3][0] = _cw ? p0 - s0 : p0 + s0;\n _v.i[3][1] = p1 + s1 * cPoint;\n _v.o[0][0] = _cw ? p0 + s0 * cPoint : p0 - s0 * cPoint;\n _v.o[0][1] = p1 - s1;\n _v.o[1][0] = _cw ? p0 + s0 : p0 - s0;\n _v.o[1][1] = p1 + s1 * cPoint;\n _v.o[2][0] = _cw ? p0 - s0 * cPoint : p0 + s0 * cPoint;\n _v.o[2][1] = p1 + s1;\n _v.o[3][0] = _cw ? p0 - s0 : p0 + s0;\n _v.o[3][1] = p1 - s1 * cPoint;\n }\n };\n extendPrototype([DynamicPropertyContainer], EllShapePropertyFactory);\n return EllShapePropertyFactory;\n }();\n\n var StarShapeProperty = function () {\n function StarShapePropertyFactory(elem, data) {\n this.v = shapePool.newElement();\n this.v.setPathData(true, 0);\n this.elem = elem;\n this.comp = elem.comp;\n this.data = data;\n this.frameId = -1;\n this.d = data.d;\n this.initDynamicPropertyContainer(elem);\n\n if (data.sy === 1) {\n this.ir = PropertyFactory.getProp(elem, data.ir, 0, 0, this);\n this.is = PropertyFactory.getProp(elem, data.is, 0, 0.01, this);\n this.convertToPath = this.convertStarToPath;\n } else {\n this.convertToPath = this.convertPolygonToPath;\n }\n\n this.pt = PropertyFactory.getProp(elem, data.pt, 0, 0, this);\n this.p = PropertyFactory.getProp(elem, data.p, 1, 0, this);\n this.r = PropertyFactory.getProp(elem, data.r, 0, degToRads, this);\n this.or = PropertyFactory.getProp(elem, data.or, 0, 0, this);\n this.os = PropertyFactory.getProp(elem, data.os, 0, 0.01, this);\n this.localShapeCollection = shapeCollectionPool.newShapeCollection();\n this.localShapeCollection.addShape(this.v);\n this.paths = this.localShapeCollection;\n\n if (this.dynamicProperties.length) {\n this.k = true;\n } else {\n this.k = false;\n this.convertToPath();\n }\n }\n\n StarShapePropertyFactory.prototype = {\n reset: resetShape,\n getValue: function getValue() {\n if (this.elem.globalData.frameId === this.frameId) {\n return;\n }\n\n this.frameId = this.elem.globalData.frameId;\n this.iterateDynamicProperties();\n\n if (this._mdf) {\n this.convertToPath();\n }\n },\n convertStarToPath: function convertStarToPath() {\n var numPts = Math.floor(this.pt.v) * 2;\n var angle = Math.PI * 2 / numPts;\n /* this.v.v.length = numPts;\r\n this.v.i.length = numPts;\r\n this.v.o.length = numPts; */\n\n var longFlag = true;\n var longRad = this.or.v;\n var shortRad = this.ir.v;\n var longRound = this.os.v;\n var shortRound = this.is.v;\n var longPerimSegment = 2 * Math.PI * longRad / (numPts * 2);\n var shortPerimSegment = 2 * Math.PI * shortRad / (numPts * 2);\n var i;\n var rad;\n var roundness;\n var perimSegment;\n var currentAng = -Math.PI / 2;\n currentAng += this.r.v;\n var dir = this.data.d === 3 ? -1 : 1;\n this.v._length = 0;\n\n for (i = 0; i < numPts; i += 1) {\n rad = longFlag ? longRad : shortRad;\n roundness = longFlag ? longRound : shortRound;\n perimSegment = longFlag ? longPerimSegment : shortPerimSegment;\n var x = rad * Math.cos(currentAng);\n var y = rad * Math.sin(currentAng);\n var ox = x === 0 && y === 0 ? 0 : y / Math.sqrt(x * x + y * y);\n var oy = x === 0 && y === 0 ? 0 : -x / Math.sqrt(x * x + y * y);\n x += +this.p.v[0];\n y += +this.p.v[1];\n this.v.setTripleAt(x, y, x - ox * perimSegment * roundness * dir, y - oy * perimSegment * roundness * dir, x + ox * perimSegment * roundness * dir, y + oy * perimSegment * roundness * dir, i, true);\n /* this.v.v[i] = [x,y];\r\n this.v.i[i] = [x+ox*perimSegment*roundness*dir,y+oy*perimSegment*roundness*dir];\r\n this.v.o[i] = [x-ox*perimSegment*roundness*dir,y-oy*perimSegment*roundness*dir];\r\n this.v._length = numPts; */\n\n longFlag = !longFlag;\n currentAng += angle * dir;\n }\n },\n convertPolygonToPath: function convertPolygonToPath() {\n var numPts = Math.floor(this.pt.v);\n var angle = Math.PI * 2 / numPts;\n var rad = this.or.v;\n var roundness = this.os.v;\n var perimSegment = 2 * Math.PI * rad / (numPts * 4);\n var i;\n var currentAng = -Math.PI * 0.5;\n var dir = this.data.d === 3 ? -1 : 1;\n currentAng += this.r.v;\n this.v._length = 0;\n\n for (i = 0; i < numPts; i += 1) {\n var x = rad * Math.cos(currentAng);\n var y = rad * Math.sin(currentAng);\n var ox = x === 0 && y === 0 ? 0 : y / Math.sqrt(x * x + y * y);\n var oy = x === 0 && y === 0 ? 0 : -x / Math.sqrt(x * x + y * y);\n x += +this.p.v[0];\n y += +this.p.v[1];\n this.v.setTripleAt(x, y, x - ox * perimSegment * roundness * dir, y - oy * perimSegment * roundness * dir, x + ox * perimSegment * roundness * dir, y + oy * perimSegment * roundness * dir, i, true);\n currentAng += angle * dir;\n }\n\n this.paths.length = 0;\n this.paths[0] = this.v;\n }\n };\n extendPrototype([DynamicPropertyContainer], StarShapePropertyFactory);\n return StarShapePropertyFactory;\n }();\n\n var RectShapeProperty = function () {\n function RectShapePropertyFactory(elem, data) {\n this.v = shapePool.newElement();\n this.v.c = true;\n this.localShapeCollection = shapeCollectionPool.newShapeCollection();\n this.localShapeCollection.addShape(this.v);\n this.paths = this.localShapeCollection;\n this.elem = elem;\n this.comp = elem.comp;\n this.frameId = -1;\n this.d = data.d;\n this.initDynamicPropertyContainer(elem);\n this.p = PropertyFactory.getProp(elem, data.p, 1, 0, this);\n this.s = PropertyFactory.getProp(elem, data.s, 1, 0, this);\n this.r = PropertyFactory.getProp(elem, data.r, 0, 0, this);\n\n if (this.dynamicProperties.length) {\n this.k = true;\n } else {\n this.k = false;\n this.convertRectToPath();\n }\n }\n\n RectShapePropertyFactory.prototype = {\n convertRectToPath: function convertRectToPath() {\n var p0 = this.p.v[0];\n var p1 = this.p.v[1];\n var v0 = this.s.v[0] / 2;\n var v1 = this.s.v[1] / 2;\n var round = bmMin(v0, v1, this.r.v);\n var cPoint = round * (1 - roundCorner);\n this.v._length = 0;\n\n if (this.d === 2 || this.d === 1) {\n this.v.setTripleAt(p0 + v0, p1 - v1 + round, p0 + v0, p1 - v1 + round, p0 + v0, p1 - v1 + cPoint, 0, true);\n this.v.setTripleAt(p0 + v0, p1 + v1 - round, p0 + v0, p1 + v1 - cPoint, p0 + v0, p1 + v1 - round, 1, true);\n\n if (round !== 0) {\n this.v.setTripleAt(p0 + v0 - round, p1 + v1, p0 + v0 - round, p1 + v1, p0 + v0 - cPoint, p1 + v1, 2, true);\n this.v.setTripleAt(p0 - v0 + round, p1 + v1, p0 - v0 + cPoint, p1 + v1, p0 - v0 + round, p1 + v1, 3, true);\n this.v.setTripleAt(p0 - v0, p1 + v1 - round, p0 - v0, p1 + v1 - round, p0 - v0, p1 + v1 - cPoint, 4, true);\n this.v.setTripleAt(p0 - v0, p1 - v1 + round, p0 - v0, p1 - v1 + cPoint, p0 - v0, p1 - v1 + round, 5, true);\n this.v.setTripleAt(p0 - v0 + round, p1 - v1, p0 - v0 + round, p1 - v1, p0 - v0 + cPoint, p1 - v1, 6, true);\n this.v.setTripleAt(p0 + v0 - round, p1 - v1, p0 + v0 - cPoint, p1 - v1, p0 + v0 - round, p1 - v1, 7, true);\n } else {\n this.v.setTripleAt(p0 - v0, p1 + v1, p0 - v0 + cPoint, p1 + v1, p0 - v0, p1 + v1, 2);\n this.v.setTripleAt(p0 - v0, p1 - v1, p0 - v0, p1 - v1 + cPoint, p0 - v0, p1 - v1, 3);\n }\n } else {\n this.v.setTripleAt(p0 + v0, p1 - v1 + round, p0 + v0, p1 - v1 + cPoint, p0 + v0, p1 - v1 + round, 0, true);\n\n if (round !== 0) {\n this.v.setTripleAt(p0 + v0 - round, p1 - v1, p0 + v0 - round, p1 - v1, p0 + v0 - cPoint, p1 - v1, 1, true);\n this.v.setTripleAt(p0 - v0 + round, p1 - v1, p0 - v0 + cPoint, p1 - v1, p0 - v0 + round, p1 - v1, 2, true);\n this.v.setTripleAt(p0 - v0, p1 - v1 + round, p0 - v0, p1 - v1 + round, p0 - v0, p1 - v1 + cPoint, 3, true);\n this.v.setTripleAt(p0 - v0, p1 + v1 - round, p0 - v0, p1 + v1 - cPoint, p0 - v0, p1 + v1 - round, 4, true);\n this.v.setTripleAt(p0 - v0 + round, p1 + v1, p0 - v0 + round, p1 + v1, p0 - v0 + cPoint, p1 + v1, 5, true);\n this.v.setTripleAt(p0 + v0 - round, p1 + v1, p0 + v0 - cPoint, p1 + v1, p0 + v0 - round, p1 + v1, 6, true);\n this.v.setTripleAt(p0 + v0, p1 + v1 - round, p0 + v0, p1 + v1 - round, p0 + v0, p1 + v1 - cPoint, 7, true);\n } else {\n this.v.setTripleAt(p0 - v0, p1 - v1, p0 - v0 + cPoint, p1 - v1, p0 - v0, p1 - v1, 1, true);\n this.v.setTripleAt(p0 - v0, p1 + v1, p0 - v0, p1 + v1 - cPoint, p0 - v0, p1 + v1, 2, true);\n this.v.setTripleAt(p0 + v0, p1 + v1, p0 + v0 - cPoint, p1 + v1, p0 + v0, p1 + v1, 3, true);\n }\n }\n },\n getValue: function getValue() {\n if (this.elem.globalData.frameId === this.frameId) {\n return;\n }\n\n this.frameId = this.elem.globalData.frameId;\n this.iterateDynamicProperties();\n\n if (this._mdf) {\n this.convertRectToPath();\n }\n },\n reset: resetShape\n };\n extendPrototype([DynamicPropertyContainer], RectShapePropertyFactory);\n return RectShapePropertyFactory;\n }();\n\n function getShapeProp(elem, data, type) {\n var prop;\n\n if (type === 3 || type === 4) {\n var dataProp = type === 3 ? data.pt : data.ks;\n var keys = dataProp.k;\n\n if (keys.length) {\n prop = new KeyframedShapeProperty(elem, data, type);\n } else {\n prop = new ShapeProperty(elem, data, type);\n }\n } else if (type === 5) {\n prop = new RectShapeProperty(elem, data);\n } else if (type === 6) {\n prop = new EllShapeProperty(elem, data);\n } else if (type === 7) {\n prop = new StarShapeProperty(elem, data);\n }\n\n if (prop.k) {\n elem.addDynamicProperty(prop);\n }\n\n return prop;\n }\n\n function getConstructorFunction() {\n return ShapeProperty;\n }\n\n function getKeyframedConstructorFunction() {\n return KeyframedShapeProperty;\n }\n\n var ob = {};\n ob.getShapeProp = getShapeProp;\n ob.getConstructorFunction = getConstructorFunction;\n ob.getKeyframedConstructorFunction = getKeyframedConstructorFunction;\n return ob;\n }();\n\n /*!\r\n Transformation Matrix v2.0\r\n (c) Epistemex 2014-2015\r\n www.epistemex.com\r\n By Ken Fyrstenberg\r\n Contributions by leeoniya.\r\n License: MIT, header required.\r\n */\n\n /**\r\n * 2D transformation matrix object initialized with identity matrix.\r\n *\r\n * The matrix can synchronize a canvas context by supplying the context\r\n * as an argument, or later apply current absolute transform to an\r\n * existing context.\r\n *\r\n * All values are handled as floating point values.\r\n *\r\n * @param {CanvasRenderingContext2D} [context] - Optional context to sync with Matrix\r\n * @prop {number} a - scale x\r\n * @prop {number} b - shear y\r\n * @prop {number} c - shear x\r\n * @prop {number} d - scale y\r\n * @prop {number} e - translate x\r\n * @prop {number} f - translate y\r\n * @prop {CanvasRenderingContext2D|null} [context=null] - set or get current canvas context\r\n * @constructor\r\n */\n\n var Matrix = function () {\n var _cos = Math.cos;\n var _sin = Math.sin;\n var _tan = Math.tan;\n var _rnd = Math.round;\n\n function reset() {\n this.props[0] = 1;\n this.props[1] = 0;\n this.props[2] = 0;\n this.props[3] = 0;\n this.props[4] = 0;\n this.props[5] = 1;\n this.props[6] = 0;\n this.props[7] = 0;\n this.props[8] = 0;\n this.props[9] = 0;\n this.props[10] = 1;\n this.props[11] = 0;\n this.props[12] = 0;\n this.props[13] = 0;\n this.props[14] = 0;\n this.props[15] = 1;\n return this;\n }\n\n function rotate(angle) {\n if (angle === 0) {\n return this;\n }\n\n var mCos = _cos(angle);\n\n var mSin = _sin(angle);\n\n return this._t(mCos, -mSin, 0, 0, mSin, mCos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n\n function rotateX(angle) {\n if (angle === 0) {\n return this;\n }\n\n var mCos = _cos(angle);\n\n var mSin = _sin(angle);\n\n return this._t(1, 0, 0, 0, 0, mCos, -mSin, 0, 0, mSin, mCos, 0, 0, 0, 0, 1);\n }\n\n function rotateY(angle) {\n if (angle === 0) {\n return this;\n }\n\n var mCos = _cos(angle);\n\n var mSin = _sin(angle);\n\n return this._t(mCos, 0, mSin, 0, 0, 1, 0, 0, -mSin, 0, mCos, 0, 0, 0, 0, 1);\n }\n\n function rotateZ(angle) {\n if (angle === 0) {\n return this;\n }\n\n var mCos = _cos(angle);\n\n var mSin = _sin(angle);\n\n return this._t(mCos, -mSin, 0, 0, mSin, mCos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n\n function shear(sx, sy) {\n return this._t(1, sy, sx, 1, 0, 0);\n }\n\n function skew(ax, ay) {\n return this.shear(_tan(ax), _tan(ay));\n }\n\n function skewFromAxis(ax, angle) {\n var mCos = _cos(angle);\n\n var mSin = _sin(angle);\n\n return this._t(mCos, mSin, 0, 0, -mSin, mCos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)._t(1, 0, 0, 0, _tan(ax), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)._t(mCos, -mSin, 0, 0, mSin, mCos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); // return this._t(mCos, mSin, -mSin, mCos, 0, 0)._t(1, 0, _tan(ax), 1, 0, 0)._t(mCos, -mSin, mSin, mCos, 0, 0);\n }\n\n function scale(sx, sy, sz) {\n if (!sz && sz !== 0) {\n sz = 1;\n }\n\n if (sx === 1 && sy === 1 && sz === 1) {\n return this;\n }\n\n return this._t(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1);\n }\n\n function setTransform(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p) {\n this.props[0] = a;\n this.props[1] = b;\n this.props[2] = c;\n this.props[3] = d;\n this.props[4] = e;\n this.props[5] = f;\n this.props[6] = g;\n this.props[7] = h;\n this.props[8] = i;\n this.props[9] = j;\n this.props[10] = k;\n this.props[11] = l;\n this.props[12] = m;\n this.props[13] = n;\n this.props[14] = o;\n this.props[15] = p;\n return this;\n }\n\n function translate(tx, ty, tz) {\n tz = tz || 0;\n\n if (tx !== 0 || ty !== 0 || tz !== 0) {\n return this._t(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, tx, ty, tz, 1);\n }\n\n return this;\n }\n\n function transform(a2, b2, c2, d2, e2, f2, g2, h2, i2, j2, k2, l2, m2, n2, o2, p2) {\n var _p = this.props;\n\n if (a2 === 1 && b2 === 0 && c2 === 0 && d2 === 0 && e2 === 0 && f2 === 1 && g2 === 0 && h2 === 0 && i2 === 0 && j2 === 0 && k2 === 1 && l2 === 0) {\n // NOTE: commenting this condition because TurboFan deoptimizes code when present\n // if(m2 !== 0 || n2 !== 0 || o2 !== 0){\n _p[12] = _p[12] * a2 + _p[15] * m2;\n _p[13] = _p[13] * f2 + _p[15] * n2;\n _p[14] = _p[14] * k2 + _p[15] * o2;\n _p[15] *= p2; // }\n\n this._identityCalculated = false;\n return this;\n }\n\n var a1 = _p[0];\n var b1 = _p[1];\n var c1 = _p[2];\n var d1 = _p[3];\n var e1 = _p[4];\n var f1 = _p[5];\n var g1 = _p[6];\n var h1 = _p[7];\n var i1 = _p[8];\n var j1 = _p[9];\n var k1 = _p[10];\n var l1 = _p[11];\n var m1 = _p[12];\n var n1 = _p[13];\n var o1 = _p[14];\n var p1 = _p[15];\n /* matrix order (canvas compatible):\r\n * ace\r\n * bdf\r\n * 001\r\n */\n\n _p[0] = a1 * a2 + b1 * e2 + c1 * i2 + d1 * m2;\n _p[1] = a1 * b2 + b1 * f2 + c1 * j2 + d1 * n2;\n _p[2] = a1 * c2 + b1 * g2 + c1 * k2 + d1 * o2;\n _p[3] = a1 * d2 + b1 * h2 + c1 * l2 + d1 * p2;\n _p[4] = e1 * a2 + f1 * e2 + g1 * i2 + h1 * m2;\n _p[5] = e1 * b2 + f1 * f2 + g1 * j2 + h1 * n2;\n _p[6] = e1 * c2 + f1 * g2 + g1 * k2 + h1 * o2;\n _p[7] = e1 * d2 + f1 * h2 + g1 * l2 + h1 * p2;\n _p[8] = i1 * a2 + j1 * e2 + k1 * i2 + l1 * m2;\n _p[9] = i1 * b2 + j1 * f2 + k1 * j2 + l1 * n2;\n _p[10] = i1 * c2 + j1 * g2 + k1 * k2 + l1 * o2;\n _p[11] = i1 * d2 + j1 * h2 + k1 * l2 + l1 * p2;\n _p[12] = m1 * a2 + n1 * e2 + o1 * i2 + p1 * m2;\n _p[13] = m1 * b2 + n1 * f2 + o1 * j2 + p1 * n2;\n _p[14] = m1 * c2 + n1 * g2 + o1 * k2 + p1 * o2;\n _p[15] = m1 * d2 + n1 * h2 + o1 * l2 + p1 * p2;\n this._identityCalculated = false;\n return this;\n }\n\n function multiply(matrix) {\n var matrixProps = matrix.props;\n return this.transform(matrixProps[0], matrixProps[1], matrixProps[2], matrixProps[3], matrixProps[4], matrixProps[5], matrixProps[6], matrixProps[7], matrixProps[8], matrixProps[9], matrixProps[10], matrixProps[11], matrixProps[12], matrixProps[13], matrixProps[14], matrixProps[15]);\n }\n\n function isIdentity() {\n if (!this._identityCalculated) {\n this._identity = !(this.props[0] !== 1 || this.props[1] !== 0 || this.props[2] !== 0 || this.props[3] !== 0 || this.props[4] !== 0 || this.props[5] !== 1 || this.props[6] !== 0 || this.props[7] !== 0 || this.props[8] !== 0 || this.props[9] !== 0 || this.props[10] !== 1 || this.props[11] !== 0 || this.props[12] !== 0 || this.props[13] !== 0 || this.props[14] !== 0 || this.props[15] !== 1);\n this._identityCalculated = true;\n }\n\n return this._identity;\n }\n\n function equals(matr) {\n var i = 0;\n\n while (i < 16) {\n if (matr.props[i] !== this.props[i]) {\n return false;\n }\n\n i += 1;\n }\n\n return true;\n }\n\n function clone(matr) {\n var i;\n\n for (i = 0; i < 16; i += 1) {\n matr.props[i] = this.props[i];\n }\n\n return matr;\n }\n\n function cloneFromProps(props) {\n var i;\n\n for (i = 0; i < 16; i += 1) {\n this.props[i] = props[i];\n }\n }\n\n function applyToPoint(x, y, z) {\n return {\n x: x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12],\n y: x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13],\n z: x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14]\n };\n /* return {\r\n x: x * me.a + y * me.c + me.e,\r\n y: x * me.b + y * me.d + me.f\r\n }; */\n }\n\n function applyToX(x, y, z) {\n return x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12];\n }\n\n function applyToY(x, y, z) {\n return x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13];\n }\n\n function applyToZ(x, y, z) {\n return x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14];\n }\n\n function getInverseMatrix() {\n var determinant = this.props[0] * this.props[5] - this.props[1] * this.props[4];\n var a = this.props[5] / determinant;\n var b = -this.props[1] / determinant;\n var c = -this.props[4] / determinant;\n var d = this.props[0] / determinant;\n var e = (this.props[4] * this.props[13] - this.props[5] * this.props[12]) / determinant;\n var f = -(this.props[0] * this.props[13] - this.props[1] * this.props[12]) / determinant;\n var inverseMatrix = new Matrix();\n inverseMatrix.props[0] = a;\n inverseMatrix.props[1] = b;\n inverseMatrix.props[4] = c;\n inverseMatrix.props[5] = d;\n inverseMatrix.props[12] = e;\n inverseMatrix.props[13] = f;\n return inverseMatrix;\n }\n\n function inversePoint(pt) {\n var inverseMatrix = this.getInverseMatrix();\n return inverseMatrix.applyToPointArray(pt[0], pt[1], pt[2] || 0);\n }\n\n function inversePoints(pts) {\n var i;\n var len = pts.length;\n var retPts = [];\n\n for (i = 0; i < len; i += 1) {\n retPts[i] = inversePoint(pts[i]);\n }\n\n return retPts;\n }\n\n function applyToTriplePoints(pt1, pt2, pt3) {\n var arr = createTypedArray('float32', 6);\n\n if (this.isIdentity()) {\n arr[0] = pt1[0];\n arr[1] = pt1[1];\n arr[2] = pt2[0];\n arr[3] = pt2[1];\n arr[4] = pt3[0];\n arr[5] = pt3[1];\n } else {\n var p0 = this.props[0];\n var p1 = this.props[1];\n var p4 = this.props[4];\n var p5 = this.props[5];\n var p12 = this.props[12];\n var p13 = this.props[13];\n arr[0] = pt1[0] * p0 + pt1[1] * p4 + p12;\n arr[1] = pt1[0] * p1 + pt1[1] * p5 + p13;\n arr[2] = pt2[0] * p0 + pt2[1] * p4 + p12;\n arr[3] = pt2[0] * p1 + pt2[1] * p5 + p13;\n arr[4] = pt3[0] * p0 + pt3[1] * p4 + p12;\n arr[5] = pt3[0] * p1 + pt3[1] * p5 + p13;\n }\n\n return arr;\n }\n\n function applyToPointArray(x, y, z) {\n var arr;\n\n if (this.isIdentity()) {\n arr = [x, y, z];\n } else {\n arr = [x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12], x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13], x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14]];\n }\n\n return arr;\n }\n\n function applyToPointStringified(x, y) {\n if (this.isIdentity()) {\n return x + ',' + y;\n }\n\n var _p = this.props;\n return Math.round((x * _p[0] + y * _p[4] + _p[12]) * 100) / 100 + ',' + Math.round((x * _p[1] + y * _p[5] + _p[13]) * 100) / 100;\n }\n\n function toCSS() {\n // Doesn't make much sense to add this optimization. If it is an identity matrix, it's very likely this will get called only once since it won't be keyframed.\n\n /* if(this.isIdentity()) {\r\n return '';\r\n } */\n var i = 0;\n var props = this.props;\n var cssValue = 'matrix3d(';\n var v = 10000;\n\n while (i < 16) {\n cssValue += _rnd(props[i] * v) / v;\n cssValue += i === 15 ? ')' : ',';\n i += 1;\n }\n\n return cssValue;\n }\n\n function roundMatrixProperty(val) {\n var v = 10000;\n\n if (val < 0.000001 && val > 0 || val > -0.000001 && val < 0) {\n return _rnd(val * v) / v;\n }\n\n return val;\n }\n\n function to2dCSS() {\n // Doesn't make much sense to add this optimization. If it is an identity matrix, it's very likely this will get called only once since it won't be keyframed.\n\n /* if(this.isIdentity()) {\r\n return '';\r\n } */\n var props = this.props;\n\n var _a = roundMatrixProperty(props[0]);\n\n var _b = roundMatrixProperty(props[1]);\n\n var _c = roundMatrixProperty(props[4]);\n\n var _d = roundMatrixProperty(props[5]);\n\n var _e = roundMatrixProperty(props[12]);\n\n var _f = roundMatrixProperty(props[13]);\n\n return 'matrix(' + _a + ',' + _b + ',' + _c + ',' + _d + ',' + _e + ',' + _f + ')';\n }\n\n return function () {\n this.reset = reset;\n this.rotate = rotate;\n this.rotateX = rotateX;\n this.rotateY = rotateY;\n this.rotateZ = rotateZ;\n this.skew = skew;\n this.skewFromAxis = skewFromAxis;\n this.shear = shear;\n this.scale = scale;\n this.setTransform = setTransform;\n this.translate = translate;\n this.transform = transform;\n this.multiply = multiply;\n this.applyToPoint = applyToPoint;\n this.applyToX = applyToX;\n this.applyToY = applyToY;\n this.applyToZ = applyToZ;\n this.applyToPointArray = applyToPointArray;\n this.applyToTriplePoints = applyToTriplePoints;\n this.applyToPointStringified = applyToPointStringified;\n this.toCSS = toCSS;\n this.to2dCSS = to2dCSS;\n this.clone = clone;\n this.cloneFromProps = cloneFromProps;\n this.equals = equals;\n this.inversePoints = inversePoints;\n this.inversePoint = inversePoint;\n this.getInverseMatrix = getInverseMatrix;\n this._t = this.transform;\n this.isIdentity = isIdentity;\n this._identity = true;\n this._identityCalculated = false;\n this.props = createTypedArray('float32', 16);\n this.reset();\n };\n }();\n\n function _typeof$3(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof$3 = function _typeof(obj) { return typeof obj; }; } else { _typeof$3 = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof$3(obj); }\n var lottie = {};\n var standalone = '__[STANDALONE]__';\n var animationData = '__[ANIMATIONDATA]__';\n var renderer = '';\n\n function setLocation(href) {\n setLocationHref(href);\n }\n\n function searchAnimations() {\n if (standalone === true) {\n animationManager.searchAnimations(animationData, standalone, renderer);\n } else {\n animationManager.searchAnimations();\n }\n }\n\n function setSubframeRendering(flag) {\n setSubframeEnabled(flag);\n }\n\n function setPrefix(prefix) {\n setIdPrefix(prefix);\n }\n\n function loadAnimation(params) {\n if (standalone === true) {\n params.animationData = JSON.parse(animationData);\n }\n\n return animationManager.loadAnimation(params);\n }\n\n function setQuality(value) {\n if (typeof value === 'string') {\n switch (value) {\n case 'high':\n setDefaultCurveSegments(200);\n break;\n\n default:\n case 'medium':\n setDefaultCurveSegments(50);\n break;\n\n case 'low':\n setDefaultCurveSegments(10);\n break;\n }\n } else if (!isNaN(value) && value > 1) {\n setDefaultCurveSegments(value);\n }\n\n if (getDefaultCurveSegments() >= 50) {\n roundValues(false);\n } else {\n roundValues(true);\n }\n }\n\n function inBrowser() {\n return typeof navigator !== 'undefined';\n }\n\n function installPlugin(type, plugin) {\n if (type === 'expressions') {\n setExpressionsPlugin(plugin);\n }\n }\n\n function getFactory(name) {\n switch (name) {\n case 'propertyFactory':\n return PropertyFactory;\n\n case 'shapePropertyFactory':\n return ShapePropertyFactory;\n\n case 'matrix':\n return Matrix;\n\n default:\n return null;\n }\n }\n\n lottie.play = animationManager.play;\n lottie.pause = animationManager.pause;\n lottie.setLocationHref = setLocation;\n lottie.togglePause = animationManager.togglePause;\n lottie.setSpeed = animationManager.setSpeed;\n lottie.setDirection = animationManager.setDirection;\n lottie.stop = animationManager.stop;\n lottie.searchAnimations = searchAnimations;\n lottie.registerAnimation = animationManager.registerAnimation;\n lottie.loadAnimation = loadAnimation;\n lottie.setSubframeRendering = setSubframeRendering;\n lottie.resize = animationManager.resize; // lottie.start = start;\n\n lottie.goToAndStop = animationManager.goToAndStop;\n lottie.destroy = animationManager.destroy;\n lottie.setQuality = setQuality;\n lottie.inBrowser = inBrowser;\n lottie.installPlugin = installPlugin;\n lottie.freeze = animationManager.freeze;\n lottie.unfreeze = animationManager.unfreeze;\n lottie.setVolume = animationManager.setVolume;\n lottie.mute = animationManager.mute;\n lottie.unmute = animationManager.unmute;\n lottie.getRegisteredAnimations = animationManager.getRegisteredAnimations;\n lottie.useWebWorker = setWebWorker;\n lottie.setIDPrefix = setPrefix;\n lottie.__getFactory = getFactory;\n lottie.version = '5.12.2';\n\n function checkReady() {\n if (document.readyState === 'complete') {\n clearInterval(readyStateCheckInterval);\n searchAnimations();\n }\n }\n\n function getQueryVariable(variable) {\n var vars = queryString.split('&');\n\n for (var i = 0; i < vars.length; i += 1) {\n var pair = vars[i].split('=');\n\n if (decodeURIComponent(pair[0]) == variable) {\n // eslint-disable-line eqeqeq\n return decodeURIComponent(pair[1]);\n }\n }\n\n return null;\n }\n\n var queryString = '';\n\n if (standalone) {\n var scripts = document.getElementsByTagName('script');\n var index = scripts.length - 1;\n var myScript = scripts[index] || {\n src: ''\n };\n queryString = myScript.src ? myScript.src.replace(/^[^\\?]+\\??/, '') : ''; // eslint-disable-line no-useless-escape\n\n renderer = getQueryVariable('renderer');\n }\n\n var readyStateCheckInterval = setInterval(checkReady, 100); // this adds bodymovin to the window object for backwards compatibility\n\n try {\n if (!((typeof exports === \"undefined\" ? \"undefined\" : _typeof$3(exports)) === 'object' && typeof module !== 'undefined') && !(typeof define === 'function' && define.amd) // eslint-disable-line no-undef\n ) {\n window.bodymovin = lottie;\n }\n } catch (err) {//\n }\n\n var ShapeModifiers = function () {\n var ob = {};\n var modifiers = {};\n ob.registerModifier = registerModifier;\n ob.getModifier = getModifier;\n\n function registerModifier(nm, factory) {\n if (!modifiers[nm]) {\n modifiers[nm] = factory;\n }\n }\n\n function getModifier(nm, elem, data) {\n return new modifiers[nm](elem, data);\n }\n\n return ob;\n }();\n\n function ShapeModifier() {}\n\n ShapeModifier.prototype.initModifierProperties = function () {};\n\n ShapeModifier.prototype.addShapeToModifier = function () {};\n\n ShapeModifier.prototype.addShape = function (data) {\n if (!this.closed) {\n // Adding shape to dynamic properties. It covers the case where a shape has no effects applied, to reset it's _mdf state on every tick.\n data.sh.container.addDynamicProperty(data.sh);\n var shapeData = {\n shape: data.sh,\n data: data,\n localShapeCollection: shapeCollectionPool.newShapeCollection()\n };\n this.shapes.push(shapeData);\n this.addShapeToModifier(shapeData);\n\n if (this._isAnimated) {\n data.setAsAnimated();\n }\n }\n };\n\n ShapeModifier.prototype.init = function (elem, data) {\n this.shapes = [];\n this.elem = elem;\n this.initDynamicPropertyContainer(elem);\n this.initModifierProperties(elem, data);\n this.frameId = initialDefaultFrame;\n this.closed = false;\n this.k = false;\n\n if (this.dynamicProperties.length) {\n this.k = true;\n } else {\n this.getValue(true);\n }\n };\n\n ShapeModifier.prototype.processKeys = function () {\n if (this.elem.globalData.frameId === this.frameId) {\n return;\n }\n\n this.frameId = this.elem.globalData.frameId;\n this.iterateDynamicProperties();\n };\n\n extendPrototype([DynamicPropertyContainer], ShapeModifier);\n\n function TrimModifier() {}\n\n extendPrototype([ShapeModifier], TrimModifier);\n\n TrimModifier.prototype.initModifierProperties = function (elem, data) {\n this.s = PropertyFactory.getProp(elem, data.s, 0, 0.01, this);\n this.e = PropertyFactory.getProp(elem, data.e, 0, 0.01, this);\n this.o = PropertyFactory.getProp(elem, data.o, 0, 0, this);\n this.sValue = 0;\n this.eValue = 0;\n this.getValue = this.processKeys;\n this.m = data.m;\n this._isAnimated = !!this.s.effectsSequence.length || !!this.e.effectsSequence.length || !!this.o.effectsSequence.length;\n };\n\n TrimModifier.prototype.addShapeToModifier = function (shapeData) {\n shapeData.pathsData = [];\n };\n\n TrimModifier.prototype.calculateShapeEdges = function (s, e, shapeLength, addedLength, totalModifierLength) {\n var segments = [];\n\n if (e <= 1) {\n segments.push({\n s: s,\n e: e\n });\n } else if (s >= 1) {\n segments.push({\n s: s - 1,\n e: e - 1\n });\n } else {\n segments.push({\n s: s,\n e: 1\n });\n segments.push({\n s: 0,\n e: e - 1\n });\n }\n\n var shapeSegments = [];\n var i;\n var len = segments.length;\n var segmentOb;\n\n for (i = 0; i < len; i += 1) {\n segmentOb = segments[i];\n\n if (!(segmentOb.e * totalModifierLength < addedLength || segmentOb.s * totalModifierLength > addedLength + shapeLength)) {\n var shapeS;\n var shapeE;\n\n if (segmentOb.s * totalModifierLength <= addedLength) {\n shapeS = 0;\n } else {\n shapeS = (segmentOb.s * totalModifierLength - addedLength) / shapeLength;\n }\n\n if (segmentOb.e * totalModifierLength >= addedLength + shapeLength) {\n shapeE = 1;\n } else {\n shapeE = (segmentOb.e * totalModifierLength - addedLength) / shapeLength;\n }\n\n shapeSegments.push([shapeS, shapeE]);\n }\n }\n\n if (!shapeSegments.length) {\n shapeSegments.push([0, 0]);\n }\n\n return shapeSegments;\n };\n\n TrimModifier.prototype.releasePathsData = function (pathsData) {\n var i;\n var len = pathsData.length;\n\n for (i = 0; i < len; i += 1) {\n segmentsLengthPool.release(pathsData[i]);\n }\n\n pathsData.length = 0;\n return pathsData;\n };\n\n TrimModifier.prototype.processShapes = function (_isFirstFrame) {\n var s;\n var e;\n\n if (this._mdf || _isFirstFrame) {\n var o = this.o.v % 360 / 360;\n\n if (o < 0) {\n o += 1;\n }\n\n if (this.s.v > 1) {\n s = 1 + o;\n } else if (this.s.v < 0) {\n s = 0 + o;\n } else {\n s = this.s.v + o;\n }\n\n if (this.e.v > 1) {\n e = 1 + o;\n } else if (this.e.v < 0) {\n e = 0 + o;\n } else {\n e = this.e.v + o;\n }\n\n if (s > e) {\n var _s = s;\n s = e;\n e = _s;\n }\n\n s = Math.round(s * 10000) * 0.0001;\n e = Math.round(e * 10000) * 0.0001;\n this.sValue = s;\n this.eValue = e;\n } else {\n s = this.sValue;\n e = this.eValue;\n }\n\n var shapePaths;\n var i;\n var len = this.shapes.length;\n var j;\n var jLen;\n var pathsData;\n var pathData;\n var totalShapeLength;\n var totalModifierLength = 0;\n\n if (e === s) {\n for (i = 0; i < len; i += 1) {\n this.shapes[i].localShapeCollection.releaseShapes();\n this.shapes[i].shape._mdf = true;\n this.shapes[i].shape.paths = this.shapes[i].localShapeCollection;\n\n if (this._mdf) {\n this.shapes[i].pathsData.length = 0;\n }\n }\n } else if (!(e === 1 && s === 0 || e === 0 && s === 1)) {\n var segments = [];\n var shapeData;\n var localShapeCollection;\n\n for (i = 0; i < len; i += 1) {\n shapeData = this.shapes[i]; // if shape hasn't changed and trim properties haven't changed, cached previous path can be used\n\n if (!shapeData.shape._mdf && !this._mdf && !_isFirstFrame && this.m !== 2) {\n shapeData.shape.paths = shapeData.localShapeCollection;\n } else {\n shapePaths = shapeData.shape.paths;\n jLen = shapePaths._length;\n totalShapeLength = 0;\n\n if (!shapeData.shape._mdf && shapeData.pathsData.length) {\n totalShapeLength = shapeData.totalShapeLength;\n } else {\n pathsData = this.releasePathsData(shapeData.pathsData);\n\n for (j = 0; j < jLen; j += 1) {\n pathData = bez.getSegmentsLength(shapePaths.shapes[j]);\n pathsData.push(pathData);\n totalShapeLength += pathData.totalLength;\n }\n\n shapeData.totalShapeLength = totalShapeLength;\n shapeData.pathsData = pathsData;\n }\n\n totalModifierLength += totalShapeLength;\n shapeData.shape._mdf = true;\n }\n }\n\n var shapeS = s;\n var shapeE = e;\n var addedLength = 0;\n var edges;\n\n for (i = len - 1; i >= 0; i -= 1) {\n shapeData = this.shapes[i];\n\n if (shapeData.shape._mdf) {\n localShapeCollection = shapeData.localShapeCollection;\n localShapeCollection.releaseShapes(); // if m === 2 means paths are trimmed individually so edges need to be found for this specific shape relative to whoel group\n\n if (this.m === 2 && len > 1) {\n edges = this.calculateShapeEdges(s, e, shapeData.totalShapeLength, addedLength, totalModifierLength);\n addedLength += shapeData.totalShapeLength;\n } else {\n edges = [[shapeS, shapeE]];\n }\n\n jLen = edges.length;\n\n for (j = 0; j < jLen; j += 1) {\n shapeS = edges[j][0];\n shapeE = edges[j][1];\n segments.length = 0;\n\n if (shapeE <= 1) {\n segments.push({\n s: shapeData.totalShapeLength * shapeS,\n e: shapeData.totalShapeLength * shapeE\n });\n } else if (shapeS >= 1) {\n segments.push({\n s: shapeData.totalShapeLength * (shapeS - 1),\n e: shapeData.totalShapeLength * (shapeE - 1)\n });\n } else {\n segments.push({\n s: shapeData.totalShapeLength * shapeS,\n e: shapeData.totalShapeLength\n });\n segments.push({\n s: 0,\n e: shapeData.totalShapeLength * (shapeE - 1)\n });\n }\n\n var newShapesData = this.addShapes(shapeData, segments[0]);\n\n if (segments[0].s !== segments[0].e) {\n if (segments.length > 1) {\n var lastShapeInCollection = shapeData.shape.paths.shapes[shapeData.shape.paths._length - 1];\n\n if (lastShapeInCollection.c) {\n var lastShape = newShapesData.pop();\n this.addPaths(newShapesData, localShapeCollection);\n newShapesData = this.addShapes(shapeData, segments[1], lastShape);\n } else {\n this.addPaths(newShapesData, localShapeCollection);\n newShapesData = this.addShapes(shapeData, segments[1]);\n }\n }\n\n this.addPaths(newShapesData, localShapeCollection);\n }\n }\n\n shapeData.shape.paths = localShapeCollection;\n }\n }\n } else if (this._mdf) {\n for (i = 0; i < len; i += 1) {\n // Releasign Trim Cached paths data when no trim applied in case shapes are modified inbetween.\n // Don't remove this even if it's losing cached info.\n this.shapes[i].pathsData.length = 0;\n this.shapes[i].shape._mdf = true;\n }\n }\n };\n\n TrimModifier.prototype.addPaths = function (newPaths, localShapeCollection) {\n var i;\n var len = newPaths.length;\n\n for (i = 0; i < len; i += 1) {\n localShapeCollection.addShape(newPaths[i]);\n }\n };\n\n TrimModifier.prototype.addSegment = function (pt1, pt2, pt3, pt4, shapePath, pos, newShape) {\n shapePath.setXYAt(pt2[0], pt2[1], 'o', pos);\n shapePath.setXYAt(pt3[0], pt3[1], 'i', pos + 1);\n\n if (newShape) {\n shapePath.setXYAt(pt1[0], pt1[1], 'v', pos);\n }\n\n shapePath.setXYAt(pt4[0], pt4[1], 'v', pos + 1);\n };\n\n TrimModifier.prototype.addSegmentFromArray = function (points, shapePath, pos, newShape) {\n shapePath.setXYAt(points[1], points[5], 'o', pos);\n shapePath.setXYAt(points[2], points[6], 'i', pos + 1);\n\n if (newShape) {\n shapePath.setXYAt(points[0], points[4], 'v', pos);\n }\n\n shapePath.setXYAt(points[3], points[7], 'v', pos + 1);\n };\n\n TrimModifier.prototype.addShapes = function (shapeData, shapeSegment, shapePath) {\n var pathsData = shapeData.pathsData;\n var shapePaths = shapeData.shape.paths.shapes;\n var i;\n var len = shapeData.shape.paths._length;\n var j;\n var jLen;\n var addedLength = 0;\n var currentLengthData;\n var segmentCount;\n var lengths;\n var segment;\n var shapes = [];\n var initPos;\n var newShape = true;\n\n if (!shapePath) {\n shapePath = shapePool.newElement();\n segmentCount = 0;\n initPos = 0;\n } else {\n segmentCount = shapePath._length;\n initPos = shapePath._length;\n }\n\n shapes.push(shapePath);\n\n for (i = 0; i < len; i += 1) {\n lengths = pathsData[i].lengths;\n shapePath.c = shapePaths[i].c;\n jLen = shapePaths[i].c ? lengths.length : lengths.length + 1;\n\n for (j = 1; j < jLen; j += 1) {\n currentLengthData = lengths[j - 1];\n\n if (addedLength + currentLengthData.addedLength < shapeSegment.s) {\n addedLength += currentLengthData.addedLength;\n shapePath.c = false;\n } else if (addedLength > shapeSegment.e) {\n shapePath.c = false;\n break;\n } else {\n if (shapeSegment.s <= addedLength && shapeSegment.e >= addedLength + currentLengthData.addedLength) {\n this.addSegment(shapePaths[i].v[j - 1], shapePaths[i].o[j - 1], shapePaths[i].i[j], shapePaths[i].v[j], shapePath, segmentCount, newShape);\n newShape = false;\n } else {\n segment = bez.getNewSegment(shapePaths[i].v[j - 1], shapePaths[i].v[j], shapePaths[i].o[j - 1], shapePaths[i].i[j], (shapeSegment.s - addedLength) / currentLengthData.addedLength, (shapeSegment.e - addedLength) / currentLengthData.addedLength, lengths[j - 1]);\n this.addSegmentFromArray(segment, shapePath, segmentCount, newShape); // this.addSegment(segment.pt1, segment.pt3, segment.pt4, segment.pt2, shapePath, segmentCount, newShape);\n\n newShape = false;\n shapePath.c = false;\n }\n\n addedLength += currentLengthData.addedLength;\n segmentCount += 1;\n }\n }\n\n if (shapePaths[i].c && lengths.length) {\n currentLengthData = lengths[j - 1];\n\n if (addedLength <= shapeSegment.e) {\n var segmentLength = lengths[j - 1].addedLength;\n\n if (shapeSegment.s <= addedLength && shapeSegment.e >= addedLength + segmentLength) {\n this.addSegment(shapePaths[i].v[j - 1], shapePaths[i].o[j - 1], shapePaths[i].i[0], shapePaths[i].v[0], shapePath, segmentCount, newShape);\n newShape = false;\n } else {\n segment = bez.getNewSegment(shapePaths[i].v[j - 1], shapePaths[i].v[0], shapePaths[i].o[j - 1], shapePaths[i].i[0], (shapeSegment.s - addedLength) / segmentLength, (shapeSegment.e - addedLength) / segmentLength, lengths[j - 1]);\n this.addSegmentFromArray(segment, shapePath, segmentCount, newShape); // this.addSegment(segment.pt1, segment.pt3, segment.pt4, segment.pt2, shapePath, segmentCount, newShape);\n\n newShape = false;\n shapePath.c = false;\n }\n } else {\n shapePath.c = false;\n }\n\n addedLength += currentLengthData.addedLength;\n segmentCount += 1;\n }\n\n if (shapePath._length) {\n shapePath.setXYAt(shapePath.v[initPos][0], shapePath.v[initPos][1], 'i', initPos);\n shapePath.setXYAt(shapePath.v[shapePath._length - 1][0], shapePath.v[shapePath._length - 1][1], 'o', shapePath._length - 1);\n }\n\n if (addedLength > shapeSegment.e) {\n break;\n }\n\n if (i < len - 1) {\n shapePath = shapePool.newElement();\n newShape = true;\n shapes.push(shapePath);\n segmentCount = 0;\n }\n }\n\n return shapes;\n };\n\n function PuckerAndBloatModifier() {}\n\n extendPrototype([ShapeModifier], PuckerAndBloatModifier);\n\n PuckerAndBloatModifier.prototype.initModifierProperties = function (elem, data) {\n this.getValue = this.processKeys;\n this.amount = PropertyFactory.getProp(elem, data.a, 0, null, this);\n this._isAnimated = !!this.amount.effectsSequence.length;\n };\n\n PuckerAndBloatModifier.prototype.processPath = function (path, amount) {\n var percent = amount / 100;\n var centerPoint = [0, 0];\n var pathLength = path._length;\n var i = 0;\n\n for (i = 0; i < pathLength; i += 1) {\n centerPoint[0] += path.v[i][0];\n centerPoint[1] += path.v[i][1];\n }\n\n centerPoint[0] /= pathLength;\n centerPoint[1] /= pathLength;\n var clonedPath = shapePool.newElement();\n clonedPath.c = path.c;\n var vX;\n var vY;\n var oX;\n var oY;\n var iX;\n var iY;\n\n for (i = 0; i < pathLength; i += 1) {\n vX = path.v[i][0] + (centerPoint[0] - path.v[i][0]) * percent;\n vY = path.v[i][1] + (centerPoint[1] - path.v[i][1]) * percent;\n oX = path.o[i][0] + (centerPoint[0] - path.o[i][0]) * -percent;\n oY = path.o[i][1] + (centerPoint[1] - path.o[i][1]) * -percent;\n iX = path.i[i][0] + (centerPoint[0] - path.i[i][0]) * -percent;\n iY = path.i[i][1] + (centerPoint[1] - path.i[i][1]) * -percent;\n clonedPath.setTripleAt(vX, vY, oX, oY, iX, iY, i);\n }\n\n return clonedPath;\n };\n\n PuckerAndBloatModifier.prototype.processShapes = function (_isFirstFrame) {\n var shapePaths;\n var i;\n var len = this.shapes.length;\n var j;\n var jLen;\n var amount = this.amount.v;\n\n if (amount !== 0) {\n var shapeData;\n var localShapeCollection;\n\n for (i = 0; i < len; i += 1) {\n shapeData = this.shapes[i];\n localShapeCollection = shapeData.localShapeCollection;\n\n if (!(!shapeData.shape._mdf && !this._mdf && !_isFirstFrame)) {\n localShapeCollection.releaseShapes();\n shapeData.shape._mdf = true;\n shapePaths = shapeData.shape.paths.shapes;\n jLen = shapeData.shape.paths._length;\n\n for (j = 0; j < jLen; j += 1) {\n localShapeCollection.addShape(this.processPath(shapePaths[j], amount));\n }\n }\n\n shapeData.shape.paths = shapeData.localShapeCollection;\n }\n }\n\n if (!this.dynamicProperties.length) {\n this._mdf = false;\n }\n };\n\n var TransformPropertyFactory = function () {\n var defaultVector = [0, 0];\n\n function applyToMatrix(mat) {\n var _mdf = this._mdf;\n this.iterateDynamicProperties();\n this._mdf = this._mdf || _mdf;\n\n if (this.a) {\n mat.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]);\n }\n\n if (this.s) {\n mat.scale(this.s.v[0], this.s.v[1], this.s.v[2]);\n }\n\n if (this.sk) {\n mat.skewFromAxis(-this.sk.v, this.sa.v);\n }\n\n if (this.r) {\n mat.rotate(-this.r.v);\n } else {\n mat.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]);\n }\n\n if (this.data.p.s) {\n if (this.data.p.z) {\n mat.translate(this.px.v, this.py.v, -this.pz.v);\n } else {\n mat.translate(this.px.v, this.py.v, 0);\n }\n } else {\n mat.translate(this.p.v[0], this.p.v[1], -this.p.v[2]);\n }\n }\n\n function processKeys(forceRender) {\n if (this.elem.globalData.frameId === this.frameId) {\n return;\n }\n\n if (this._isDirty) {\n this.precalculateMatrix();\n this._isDirty = false;\n }\n\n this.iterateDynamicProperties();\n\n if (this._mdf || forceRender) {\n var frameRate;\n this.v.cloneFromProps(this.pre.props);\n\n if (this.appliedTransformations < 1) {\n this.v.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]);\n }\n\n if (this.appliedTransformations < 2) {\n this.v.scale(this.s.v[0], this.s.v[1], this.s.v[2]);\n }\n\n if (this.sk && this.appliedTransformations < 3) {\n this.v.skewFromAxis(-this.sk.v, this.sa.v);\n }\n\n if (this.r && this.appliedTransformations < 4) {\n this.v.rotate(-this.r.v);\n } else if (!this.r && this.appliedTransformations < 4) {\n this.v.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]);\n }\n\n if (this.autoOriented) {\n var v1;\n var v2;\n frameRate = this.elem.globalData.frameRate;\n\n if (this.p && this.p.keyframes && this.p.getValueAtTime) {\n if (this.p._caching.lastFrame + this.p.offsetTime <= this.p.keyframes[0].t) {\n v1 = this.p.getValueAtTime((this.p.keyframes[0].t + 0.01) / frameRate, 0);\n v2 = this.p.getValueAtTime(this.p.keyframes[0].t / frameRate, 0);\n } else if (this.p._caching.lastFrame + this.p.offsetTime >= this.p.keyframes[this.p.keyframes.length - 1].t) {\n v1 = this.p.getValueAtTime(this.p.keyframes[this.p.keyframes.length - 1].t / frameRate, 0);\n v2 = this.p.getValueAtTime((this.p.keyframes[this.p.keyframes.length - 1].t - 0.05) / frameRate, 0);\n } else {\n v1 = this.p.pv;\n v2 = this.p.getValueAtTime((this.p._caching.lastFrame + this.p.offsetTime - 0.01) / frameRate, this.p.offsetTime);\n }\n } else if (this.px && this.px.keyframes && this.py.keyframes && this.px.getValueAtTime && this.py.getValueAtTime) {\n v1 = [];\n v2 = [];\n var px = this.px;\n var py = this.py;\n\n if (px._caching.lastFrame + px.offsetTime <= px.keyframes[0].t) {\n v1[0] = px.getValueAtTime((px.keyframes[0].t + 0.01) / frameRate, 0);\n v1[1] = py.getValueAtTime((py.keyframes[0].t + 0.01) / frameRate, 0);\n v2[0] = px.getValueAtTime(px.keyframes[0].t / frameRate, 0);\n v2[1] = py.getValueAtTime(py.keyframes[0].t / frameRate, 0);\n } else if (px._caching.lastFrame + px.offsetTime >= px.keyframes[px.keyframes.length - 1].t) {\n v1[0] = px.getValueAtTime(px.keyframes[px.keyframes.length - 1].t / frameRate, 0);\n v1[1] = py.getValueAtTime(py.keyframes[py.keyframes.length - 1].t / frameRate, 0);\n v2[0] = px.getValueAtTime((px.keyframes[px.keyframes.length - 1].t - 0.01) / frameRate, 0);\n v2[1] = py.getValueAtTime((py.keyframes[py.keyframes.length - 1].t - 0.01) / frameRate, 0);\n } else {\n v1 = [px.pv, py.pv];\n v2[0] = px.getValueAtTime((px._caching.lastFrame + px.offsetTime - 0.01) / frameRate, px.offsetTime);\n v2[1] = py.getValueAtTime((py._caching.lastFrame + py.offsetTime - 0.01) / frameRate, py.offsetTime);\n }\n } else {\n v2 = defaultVector;\n v1 = v2;\n }\n\n this.v.rotate(-Math.atan2(v1[1] - v2[1], v1[0] - v2[0]));\n }\n\n if (this.data.p && this.data.p.s) {\n if (this.data.p.z) {\n this.v.translate(this.px.v, this.py.v, -this.pz.v);\n } else {\n this.v.translate(this.px.v, this.py.v, 0);\n }\n } else {\n this.v.translate(this.p.v[0], this.p.v[1], -this.p.v[2]);\n }\n }\n\n this.frameId = this.elem.globalData.frameId;\n }\n\n function precalculateMatrix() {\n this.appliedTransformations = 0;\n this.pre.reset();\n\n if (!this.a.effectsSequence.length) {\n this.pre.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]);\n this.appliedTransformations = 1;\n } else {\n return;\n }\n\n if (!this.s.effectsSequence.length) {\n this.pre.scale(this.s.v[0], this.s.v[1], this.s.v[2]);\n this.appliedTransformations = 2;\n } else {\n return;\n }\n\n if (this.sk) {\n if (!this.sk.effectsSequence.length && !this.sa.effectsSequence.length) {\n this.pre.skewFromAxis(-this.sk.v, this.sa.v);\n this.appliedTransformations = 3;\n } else {\n return;\n }\n }\n\n if (this.r) {\n if (!this.r.effectsSequence.length) {\n this.pre.rotate(-this.r.v);\n this.appliedTransformations = 4;\n }\n } else if (!this.rz.effectsSequence.length && !this.ry.effectsSequence.length && !this.rx.effectsSequence.length && !this.or.effectsSequence.length) {\n this.pre.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]);\n this.appliedTransformations = 4;\n }\n }\n\n function autoOrient() {//\n // var prevP = this.getValueAtTime();\n }\n\n function addDynamicProperty(prop) {\n this._addDynamicProperty(prop);\n\n this.elem.addDynamicProperty(prop);\n this._isDirty = true;\n }\n\n function TransformProperty(elem, data, container) {\n this.elem = elem;\n this.frameId = -1;\n this.propType = 'transform';\n this.data = data;\n this.v = new Matrix(); // Precalculated matrix with non animated properties\n\n this.pre = new Matrix();\n this.appliedTransformations = 0;\n this.initDynamicPropertyContainer(container || elem);\n\n if (data.p && data.p.s) {\n this.px = PropertyFactory.getProp(elem, data.p.x, 0, 0, this);\n this.py = PropertyFactory.getProp(elem, data.p.y, 0, 0, this);\n\n if (data.p.z) {\n this.pz = PropertyFactory.getProp(elem, data.p.z, 0, 0, this);\n }\n } else {\n this.p = PropertyFactory.getProp(elem, data.p || {\n k: [0, 0, 0]\n }, 1, 0, this);\n }\n\n if (data.rx) {\n this.rx = PropertyFactory.getProp(elem, data.rx, 0, degToRads, this);\n this.ry = PropertyFactory.getProp(elem, data.ry, 0, degToRads, this);\n this.rz = PropertyFactory.getProp(elem, data.rz, 0, degToRads, this);\n\n if (data.or.k[0].ti) {\n var i;\n var len = data.or.k.length;\n\n for (i = 0; i < len; i += 1) {\n data.or.k[i].to = null;\n data.or.k[i].ti = null;\n }\n }\n\n this.or = PropertyFactory.getProp(elem, data.or, 1, degToRads, this); // sh Indicates it needs to be capped between -180 and 180\n\n this.or.sh = true;\n } else {\n this.r = PropertyFactory.getProp(elem, data.r || {\n k: 0\n }, 0, degToRads, this);\n }\n\n if (data.sk) {\n this.sk = PropertyFactory.getProp(elem, data.sk, 0, degToRads, this);\n this.sa = PropertyFactory.getProp(elem, data.sa, 0, degToRads, this);\n }\n\n this.a = PropertyFactory.getProp(elem, data.a || {\n k: [0, 0, 0]\n }, 1, 0, this);\n this.s = PropertyFactory.getProp(elem, data.s || {\n k: [100, 100, 100]\n }, 1, 0.01, this); // Opacity is not part of the transform properties, that's why it won't use this.dynamicProperties. That way transforms won't get updated if opacity changes.\n\n if (data.o) {\n this.o = PropertyFactory.getProp(elem, data.o, 0, 0.01, elem);\n } else {\n this.o = {\n _mdf: false,\n v: 1\n };\n }\n\n this._isDirty = true;\n\n if (!this.dynamicProperties.length) {\n this.getValue(true);\n }\n }\n\n TransformProperty.prototype = {\n applyToMatrix: applyToMatrix,\n getValue: processKeys,\n precalculateMatrix: precalculateMatrix,\n autoOrient: autoOrient\n };\n extendPrototype([DynamicPropertyContainer], TransformProperty);\n TransformProperty.prototype.addDynamicProperty = addDynamicProperty;\n TransformProperty.prototype._addDynamicProperty = DynamicPropertyContainer.prototype.addDynamicProperty;\n\n function getTransformProperty(elem, data, container) {\n return new TransformProperty(elem, data, container);\n }\n\n return {\n getTransformProperty: getTransformProperty\n };\n }();\n\n function RepeaterModifier() {}\n\n extendPrototype([ShapeModifier], RepeaterModifier);\n\n RepeaterModifier.prototype.initModifierProperties = function (elem, data) {\n this.getValue = this.processKeys;\n this.c = PropertyFactory.getProp(elem, data.c, 0, null, this);\n this.o = PropertyFactory.getProp(elem, data.o, 0, null, this);\n this.tr = TransformPropertyFactory.getTransformProperty(elem, data.tr, this);\n this.so = PropertyFactory.getProp(elem, data.tr.so, 0, 0.01, this);\n this.eo = PropertyFactory.getProp(elem, data.tr.eo, 0, 0.01, this);\n this.data = data;\n\n if (!this.dynamicProperties.length) {\n this.getValue(true);\n }\n\n this._isAnimated = !!this.dynamicProperties.length;\n this.pMatrix = new Matrix();\n this.rMatrix = new Matrix();\n this.sMatrix = new Matrix();\n this.tMatrix = new Matrix();\n this.matrix = new Matrix();\n };\n\n RepeaterModifier.prototype.applyTransforms = function (pMatrix, rMatrix, sMatrix, transform, perc, inv) {\n var dir = inv ? -1 : 1;\n var scaleX = transform.s.v[0] + (1 - transform.s.v[0]) * (1 - perc);\n var scaleY = transform.s.v[1] + (1 - transform.s.v[1]) * (1 - perc);\n pMatrix.translate(transform.p.v[0] * dir * perc, transform.p.v[1] * dir * perc, transform.p.v[2]);\n rMatrix.translate(-transform.a.v[0], -transform.a.v[1], transform.a.v[2]);\n rMatrix.rotate(-transform.r.v * dir * perc);\n rMatrix.translate(transform.a.v[0], transform.a.v[1], transform.a.v[2]);\n sMatrix.translate(-transform.a.v[0], -transform.a.v[1], transform.a.v[2]);\n sMatrix.scale(inv ? 1 / scaleX : scaleX, inv ? 1 / scaleY : scaleY);\n sMatrix.translate(transform.a.v[0], transform.a.v[1], transform.a.v[2]);\n };\n\n RepeaterModifier.prototype.init = function (elem, arr, pos, elemsData) {\n this.elem = elem;\n this.arr = arr;\n this.pos = pos;\n this.elemsData = elemsData;\n this._currentCopies = 0;\n this._elements = [];\n this._groups = [];\n this.frameId = -1;\n this.initDynamicPropertyContainer(elem);\n this.initModifierProperties(elem, arr[pos]);\n\n while (pos > 0) {\n pos -= 1; // this._elements.unshift(arr.splice(pos,1)[0]);\n\n this._elements.unshift(arr[pos]);\n }\n\n if (this.dynamicProperties.length) {\n this.k = true;\n } else {\n this.getValue(true);\n }\n };\n\n RepeaterModifier.prototype.resetElements = function (elements) {\n var i;\n var len = elements.length;\n\n for (i = 0; i < len; i += 1) {\n elements[i]._processed = false;\n\n if (elements[i].ty === 'gr') {\n this.resetElements(elements[i].it);\n }\n }\n };\n\n RepeaterModifier.prototype.cloneElements = function (elements) {\n var newElements = JSON.parse(JSON.stringify(elements));\n this.resetElements(newElements);\n return newElements;\n };\n\n RepeaterModifier.prototype.changeGroupRender = function (elements, renderFlag) {\n var i;\n var len = elements.length;\n\n for (i = 0; i < len; i += 1) {\n elements[i]._render = renderFlag;\n\n if (elements[i].ty === 'gr') {\n this.changeGroupRender(elements[i].it, renderFlag);\n }\n }\n };\n\n RepeaterModifier.prototype.processShapes = function (_isFirstFrame) {\n var items;\n var itemsTransform;\n var i;\n var dir;\n var cont;\n var hasReloaded = false;\n\n if (this._mdf || _isFirstFrame) {\n var copies = Math.ceil(this.c.v);\n\n if (this._groups.length < copies) {\n while (this._groups.length < copies) {\n var group = {\n it: this.cloneElements(this._elements),\n ty: 'gr'\n };\n group.it.push({\n a: {\n a: 0,\n ix: 1,\n k: [0, 0]\n },\n nm: 'Transform',\n o: {\n a: 0,\n ix: 7,\n k: 100\n },\n p: {\n a: 0,\n ix: 2,\n k: [0, 0]\n },\n r: {\n a: 1,\n ix: 6,\n k: [{\n s: 0,\n e: 0,\n t: 0\n }, {\n s: 0,\n e: 0,\n t: 1\n }]\n },\n s: {\n a: 0,\n ix: 3,\n k: [100, 100]\n },\n sa: {\n a: 0,\n ix: 5,\n k: 0\n },\n sk: {\n a: 0,\n ix: 4,\n k: 0\n },\n ty: 'tr'\n });\n this.arr.splice(0, 0, group);\n\n this._groups.splice(0, 0, group);\n\n this._currentCopies += 1;\n }\n\n this.elem.reloadShapes();\n hasReloaded = true;\n }\n\n cont = 0;\n var renderFlag;\n\n for (i = 0; i <= this._groups.length - 1; i += 1) {\n renderFlag = cont < copies;\n this._groups[i]._render = renderFlag;\n this.changeGroupRender(this._groups[i].it, renderFlag);\n\n if (!renderFlag) {\n var elems = this.elemsData[i].it;\n var transformData = elems[elems.length - 1];\n\n if (transformData.transform.op.v !== 0) {\n transformData.transform.op._mdf = true;\n transformData.transform.op.v = 0;\n } else {\n transformData.transform.op._mdf = false;\n }\n }\n\n cont += 1;\n }\n\n this._currentCopies = copies; /// /\n\n var offset = this.o.v;\n var offsetModulo = offset % 1;\n var roundOffset = offset > 0 ? Math.floor(offset) : Math.ceil(offset);\n var pProps = this.pMatrix.props;\n var rProps = this.rMatrix.props;\n var sProps = this.sMatrix.props;\n this.pMatrix.reset();\n this.rMatrix.reset();\n this.sMatrix.reset();\n this.tMatrix.reset();\n this.matrix.reset();\n var iteration = 0;\n\n if (offset > 0) {\n while (iteration < roundOffset) {\n this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, 1, false);\n iteration += 1;\n }\n\n if (offsetModulo) {\n this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, offsetModulo, false);\n iteration += offsetModulo;\n }\n } else if (offset < 0) {\n while (iteration > roundOffset) {\n this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, 1, true);\n iteration -= 1;\n }\n\n if (offsetModulo) {\n this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, -offsetModulo, true);\n iteration -= offsetModulo;\n }\n }\n\n i = this.data.m === 1 ? 0 : this._currentCopies - 1;\n dir = this.data.m === 1 ? 1 : -1;\n cont = this._currentCopies;\n var j;\n var jLen;\n\n while (cont) {\n items = this.elemsData[i].it;\n itemsTransform = items[items.length - 1].transform.mProps.v.props;\n jLen = itemsTransform.length;\n items[items.length - 1].transform.mProps._mdf = true;\n items[items.length - 1].transform.op._mdf = true;\n items[items.length - 1].transform.op.v = this._currentCopies === 1 ? this.so.v : this.so.v + (this.eo.v - this.so.v) * (i / (this._currentCopies - 1));\n\n if (iteration !== 0) {\n if (i !== 0 && dir === 1 || i !== this._currentCopies - 1 && dir === -1) {\n this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, 1, false);\n }\n\n this.matrix.transform(rProps[0], rProps[1], rProps[2], rProps[3], rProps[4], rProps[5], rProps[6], rProps[7], rProps[8], rProps[9], rProps[10], rProps[11], rProps[12], rProps[13], rProps[14], rProps[15]);\n this.matrix.transform(sProps[0], sProps[1], sProps[2], sProps[3], sProps[4], sProps[5], sProps[6], sProps[7], sProps[8], sProps[9], sProps[10], sProps[11], sProps[12], sProps[13], sProps[14], sProps[15]);\n this.matrix.transform(pProps[0], pProps[1], pProps[2], pProps[3], pProps[4], pProps[5], pProps[6], pProps[7], pProps[8], pProps[9], pProps[10], pProps[11], pProps[12], pProps[13], pProps[14], pProps[15]);\n\n for (j = 0; j < jLen; j += 1) {\n itemsTransform[j] = this.matrix.props[j];\n }\n\n this.matrix.reset();\n } else {\n this.matrix.reset();\n\n for (j = 0; j < jLen; j += 1) {\n itemsTransform[j] = this.matrix.props[j];\n }\n }\n\n iteration += 1;\n cont -= 1;\n i += dir;\n }\n } else {\n cont = this._currentCopies;\n i = 0;\n dir = 1;\n\n while (cont) {\n items = this.elemsData[i].it;\n itemsTransform = items[items.length - 1].transform.mProps.v.props;\n items[items.length - 1].transform.mProps._mdf = false;\n items[items.length - 1].transform.op._mdf = false;\n cont -= 1;\n i += dir;\n }\n }\n\n return hasReloaded;\n };\n\n RepeaterModifier.prototype.addShape = function () {};\n\n function RoundCornersModifier() {}\n\n extendPrototype([ShapeModifier], RoundCornersModifier);\n\n RoundCornersModifier.prototype.initModifierProperties = function (elem, data) {\n this.getValue = this.processKeys;\n this.rd = PropertyFactory.getProp(elem, data.r, 0, null, this);\n this._isAnimated = !!this.rd.effectsSequence.length;\n };\n\n RoundCornersModifier.prototype.processPath = function (path, round) {\n var clonedPath = shapePool.newElement();\n clonedPath.c = path.c;\n var i;\n var len = path._length;\n var currentV;\n var currentI;\n var currentO;\n var closerV;\n var distance;\n var newPosPerc;\n var index = 0;\n var vX;\n var vY;\n var oX;\n var oY;\n var iX;\n var iY;\n\n for (i = 0; i < len; i += 1) {\n currentV = path.v[i];\n currentO = path.o[i];\n currentI = path.i[i];\n\n if (currentV[0] === currentO[0] && currentV[1] === currentO[1] && currentV[0] === currentI[0] && currentV[1] === currentI[1]) {\n if ((i === 0 || i === len - 1) && !path.c) {\n clonedPath.setTripleAt(currentV[0], currentV[1], currentO[0], currentO[1], currentI[0], currentI[1], index);\n /* clonedPath.v[index] = currentV;\r\n clonedPath.o[index] = currentO;\r\n clonedPath.i[index] = currentI; */\n\n index += 1;\n } else {\n if (i === 0) {\n closerV = path.v[len - 1];\n } else {\n closerV = path.v[i - 1];\n }\n\n distance = Math.sqrt(Math.pow(currentV[0] - closerV[0], 2) + Math.pow(currentV[1] - closerV[1], 2));\n newPosPerc = distance ? Math.min(distance / 2, round) / distance : 0;\n iX = currentV[0] + (closerV[0] - currentV[0]) * newPosPerc;\n vX = iX;\n iY = currentV[1] - (currentV[1] - closerV[1]) * newPosPerc;\n vY = iY;\n oX = vX - (vX - currentV[0]) * roundCorner;\n oY = vY - (vY - currentV[1]) * roundCorner;\n clonedPath.setTripleAt(vX, vY, oX, oY, iX, iY, index);\n index += 1;\n\n if (i === len - 1) {\n closerV = path.v[0];\n } else {\n closerV = path.v[i + 1];\n }\n\n distance = Math.sqrt(Math.pow(currentV[0] - closerV[0], 2) + Math.pow(currentV[1] - closerV[1], 2));\n newPosPerc = distance ? Math.min(distance / 2, round) / distance : 0;\n oX = currentV[0] + (closerV[0] - currentV[0]) * newPosPerc;\n vX = oX;\n oY = currentV[1] + (closerV[1] - currentV[1]) * newPosPerc;\n vY = oY;\n iX = vX - (vX - currentV[0]) * roundCorner;\n iY = vY - (vY - currentV[1]) * roundCorner;\n clonedPath.setTripleAt(vX, vY, oX, oY, iX, iY, index);\n index += 1;\n }\n } else {\n clonedPath.setTripleAt(path.v[i][0], path.v[i][1], path.o[i][0], path.o[i][1], path.i[i][0], path.i[i][1], index);\n index += 1;\n }\n }\n\n return clonedPath;\n };\n\n RoundCornersModifier.prototype.processShapes = function (_isFirstFrame) {\n var shapePaths;\n var i;\n var len = this.shapes.length;\n var j;\n var jLen;\n var rd = this.rd.v;\n\n if (rd !== 0) {\n var shapeData;\n var localShapeCollection;\n\n for (i = 0; i < len; i += 1) {\n shapeData = this.shapes[i];\n localShapeCollection = shapeData.localShapeCollection;\n\n if (!(!shapeData.shape._mdf && !this._mdf && !_isFirstFrame)) {\n localShapeCollection.releaseShapes();\n shapeData.shape._mdf = true;\n shapePaths = shapeData.shape.paths.shapes;\n jLen = shapeData.shape.paths._length;\n\n for (j = 0; j < jLen; j += 1) {\n localShapeCollection.addShape(this.processPath(shapePaths[j], rd));\n }\n }\n\n shapeData.shape.paths = shapeData.localShapeCollection;\n }\n }\n\n if (!this.dynamicProperties.length) {\n this._mdf = false;\n }\n };\n\n function floatEqual(a, b) {\n return Math.abs(a - b) * 100000 <= Math.min(Math.abs(a), Math.abs(b));\n }\n\n function floatZero(f) {\n return Math.abs(f) <= 0.00001;\n }\n\n function lerp(p0, p1, amount) {\n return p0 * (1 - amount) + p1 * amount;\n }\n\n function lerpPoint(p0, p1, amount) {\n return [lerp(p0[0], p1[0], amount), lerp(p0[1], p1[1], amount)];\n }\n\n function quadRoots(a, b, c) {\n // no root\n if (a === 0) return [];\n var s = b * b - 4 * a * c; // Complex roots\n\n if (s < 0) return [];\n var singleRoot = -b / (2 * a); // 1 root\n\n if (s === 0) return [singleRoot];\n var delta = Math.sqrt(s) / (2 * a); // 2 roots\n\n return [singleRoot - delta, singleRoot + delta];\n }\n\n function polynomialCoefficients(p0, p1, p2, p3) {\n return [-p0 + 3 * p1 - 3 * p2 + p3, 3 * p0 - 6 * p1 + 3 * p2, -3 * p0 + 3 * p1, p0];\n }\n\n function singlePoint(p) {\n return new PolynomialBezier(p, p, p, p, false);\n }\n\n function PolynomialBezier(p0, p1, p2, p3, linearize) {\n if (linearize && pointEqual(p0, p1)) {\n p1 = lerpPoint(p0, p3, 1 / 3);\n }\n\n if (linearize && pointEqual(p2, p3)) {\n p2 = lerpPoint(p0, p3, 2 / 3);\n }\n\n var coeffx = polynomialCoefficients(p0[0], p1[0], p2[0], p3[0]);\n var coeffy = polynomialCoefficients(p0[1], p1[1], p2[1], p3[1]);\n this.a = [coeffx[0], coeffy[0]];\n this.b = [coeffx[1], coeffy[1]];\n this.c = [coeffx[2], coeffy[2]];\n this.d = [coeffx[3], coeffy[3]];\n this.points = [p0, p1, p2, p3];\n }\n\n PolynomialBezier.prototype.point = function (t) {\n return [((this.a[0] * t + this.b[0]) * t + this.c[0]) * t + this.d[0], ((this.a[1] * t + this.b[1]) * t + this.c[1]) * t + this.d[1]];\n };\n\n PolynomialBezier.prototype.derivative = function (t) {\n return [(3 * t * this.a[0] + 2 * this.b[0]) * t + this.c[0], (3 * t * this.a[1] + 2 * this.b[1]) * t + this.c[1]];\n };\n\n PolynomialBezier.prototype.tangentAngle = function (t) {\n var p = this.derivative(t);\n return Math.atan2(p[1], p[0]);\n };\n\n PolynomialBezier.prototype.normalAngle = function (t) {\n var p = this.derivative(t);\n return Math.atan2(p[0], p[1]);\n };\n\n PolynomialBezier.prototype.inflectionPoints = function () {\n var denom = this.a[1] * this.b[0] - this.a[0] * this.b[1];\n if (floatZero(denom)) return [];\n var tcusp = -0.5 * (this.a[1] * this.c[0] - this.a[0] * this.c[1]) / denom;\n var square = tcusp * tcusp - 1 / 3 * (this.b[1] * this.c[0] - this.b[0] * this.c[1]) / denom;\n if (square < 0) return [];\n var root = Math.sqrt(square);\n\n if (floatZero(root)) {\n if (root > 0 && root < 1) return [tcusp];\n return [];\n }\n\n return [tcusp - root, tcusp + root].filter(function (r) {\n return r > 0 && r < 1;\n });\n };\n\n PolynomialBezier.prototype.split = function (t) {\n if (t <= 0) return [singlePoint(this.points[0]), this];\n if (t >= 1) return [this, singlePoint(this.points[this.points.length - 1])];\n var p10 = lerpPoint(this.points[0], this.points[1], t);\n var p11 = lerpPoint(this.points[1], this.points[2], t);\n var p12 = lerpPoint(this.points[2], this.points[3], t);\n var p20 = lerpPoint(p10, p11, t);\n var p21 = lerpPoint(p11, p12, t);\n var p3 = lerpPoint(p20, p21, t);\n return [new PolynomialBezier(this.points[0], p10, p20, p3, true), new PolynomialBezier(p3, p21, p12, this.points[3], true)];\n };\n\n function extrema(bez, comp) {\n var min = bez.points[0][comp];\n var max = bez.points[bez.points.length - 1][comp];\n\n if (min > max) {\n var e = max;\n max = min;\n min = e;\n } // Derivative roots to find min/max\n\n\n var f = quadRoots(3 * bez.a[comp], 2 * bez.b[comp], bez.c[comp]);\n\n for (var i = 0; i < f.length; i += 1) {\n if (f[i] > 0 && f[i] < 1) {\n var val = bez.point(f[i])[comp];\n if (val < min) min = val;else if (val > max) max = val;\n }\n }\n\n return {\n min: min,\n max: max\n };\n }\n\n PolynomialBezier.prototype.bounds = function () {\n return {\n x: extrema(this, 0),\n y: extrema(this, 1)\n };\n };\n\n PolynomialBezier.prototype.boundingBox = function () {\n var bounds = this.bounds();\n return {\n left: bounds.x.min,\n right: bounds.x.max,\n top: bounds.y.min,\n bottom: bounds.y.max,\n width: bounds.x.max - bounds.x.min,\n height: bounds.y.max - bounds.y.min,\n cx: (bounds.x.max + bounds.x.min) / 2,\n cy: (bounds.y.max + bounds.y.min) / 2\n };\n };\n\n function intersectData(bez, t1, t2) {\n var box = bez.boundingBox();\n return {\n cx: box.cx,\n cy: box.cy,\n width: box.width,\n height: box.height,\n bez: bez,\n t: (t1 + t2) / 2,\n t1: t1,\n t2: t2\n };\n }\n\n function splitData(data) {\n var split = data.bez.split(0.5);\n return [intersectData(split[0], data.t1, data.t), intersectData(split[1], data.t, data.t2)];\n }\n\n function boxIntersect(b1, b2) {\n return Math.abs(b1.cx - b2.cx) * 2 < b1.width + b2.width && Math.abs(b1.cy - b2.cy) * 2 < b1.height + b2.height;\n }\n\n function intersectsImpl(d1, d2, depth, tolerance, intersections, maxRecursion) {\n if (!boxIntersect(d1, d2)) return;\n\n if (depth >= maxRecursion || d1.width <= tolerance && d1.height <= tolerance && d2.width <= tolerance && d2.height <= tolerance) {\n intersections.push([d1.t, d2.t]);\n return;\n }\n\n var d1s = splitData(d1);\n var d2s = splitData(d2);\n intersectsImpl(d1s[0], d2s[0], depth + 1, tolerance, intersections, maxRecursion);\n intersectsImpl(d1s[0], d2s[1], depth + 1, tolerance, intersections, maxRecursion);\n intersectsImpl(d1s[1], d2s[0], depth + 1, tolerance, intersections, maxRecursion);\n intersectsImpl(d1s[1], d2s[1], depth + 1, tolerance, intersections, maxRecursion);\n }\n\n PolynomialBezier.prototype.intersections = function (other, tolerance, maxRecursion) {\n if (tolerance === undefined) tolerance = 2;\n if (maxRecursion === undefined) maxRecursion = 7;\n var intersections = [];\n intersectsImpl(intersectData(this, 0, 1), intersectData(other, 0, 1), 0, tolerance, intersections, maxRecursion);\n return intersections;\n };\n\n PolynomialBezier.shapeSegment = function (shapePath, index) {\n var nextIndex = (index + 1) % shapePath.length();\n return new PolynomialBezier(shapePath.v[index], shapePath.o[index], shapePath.i[nextIndex], shapePath.v[nextIndex], true);\n };\n\n PolynomialBezier.shapeSegmentInverted = function (shapePath, index) {\n var nextIndex = (index + 1) % shapePath.length();\n return new PolynomialBezier(shapePath.v[nextIndex], shapePath.i[nextIndex], shapePath.o[index], shapePath.v[index], true);\n };\n\n function crossProduct(a, b) {\n return [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]];\n }\n\n function lineIntersection(start1, end1, start2, end2) {\n var v1 = [start1[0], start1[1], 1];\n var v2 = [end1[0], end1[1], 1];\n var v3 = [start2[0], start2[1], 1];\n var v4 = [end2[0], end2[1], 1];\n var r = crossProduct(crossProduct(v1, v2), crossProduct(v3, v4));\n if (floatZero(r[2])) return null;\n return [r[0] / r[2], r[1] / r[2]];\n }\n\n function polarOffset(p, angle, length) {\n return [p[0] + Math.cos(angle) * length, p[1] - Math.sin(angle) * length];\n }\n\n function pointDistance(p1, p2) {\n return Math.hypot(p1[0] - p2[0], p1[1] - p2[1]);\n }\n\n function pointEqual(p1, p2) {\n return floatEqual(p1[0], p2[0]) && floatEqual(p1[1], p2[1]);\n }\n\n function ZigZagModifier() {}\n\n extendPrototype([ShapeModifier], ZigZagModifier);\n\n ZigZagModifier.prototype.initModifierProperties = function (elem, data) {\n this.getValue = this.processKeys;\n this.amplitude = PropertyFactory.getProp(elem, data.s, 0, null, this);\n this.frequency = PropertyFactory.getProp(elem, data.r, 0, null, this);\n this.pointsType = PropertyFactory.getProp(elem, data.pt, 0, null, this);\n this._isAnimated = this.amplitude.effectsSequence.length !== 0 || this.frequency.effectsSequence.length !== 0 || this.pointsType.effectsSequence.length !== 0;\n };\n\n function setPoint(outputBezier, point, angle, direction, amplitude, outAmplitude, inAmplitude) {\n var angO = angle - Math.PI / 2;\n var angI = angle + Math.PI / 2;\n var px = point[0] + Math.cos(angle) * direction * amplitude;\n var py = point[1] - Math.sin(angle) * direction * amplitude;\n outputBezier.setTripleAt(px, py, px + Math.cos(angO) * outAmplitude, py - Math.sin(angO) * outAmplitude, px + Math.cos(angI) * inAmplitude, py - Math.sin(angI) * inAmplitude, outputBezier.length());\n }\n\n function getPerpendicularVector(pt1, pt2) {\n var vector = [pt2[0] - pt1[0], pt2[1] - pt1[1]];\n var rot = -Math.PI * 0.5;\n var rotatedVector = [Math.cos(rot) * vector[0] - Math.sin(rot) * vector[1], Math.sin(rot) * vector[0] + Math.cos(rot) * vector[1]];\n return rotatedVector;\n }\n\n function getProjectingAngle(path, cur) {\n var prevIndex = cur === 0 ? path.length() - 1 : cur - 1;\n var nextIndex = (cur + 1) % path.length();\n var prevPoint = path.v[prevIndex];\n var nextPoint = path.v[nextIndex];\n var pVector = getPerpendicularVector(prevPoint, nextPoint);\n return Math.atan2(0, 1) - Math.atan2(pVector[1], pVector[0]);\n }\n\n function zigZagCorner(outputBezier, path, cur, amplitude, frequency, pointType, direction) {\n var angle = getProjectingAngle(path, cur);\n var point = path.v[cur % path._length];\n var prevPoint = path.v[cur === 0 ? path._length - 1 : cur - 1];\n var nextPoint = path.v[(cur + 1) % path._length];\n var prevDist = pointType === 2 ? Math.sqrt(Math.pow(point[0] - prevPoint[0], 2) + Math.pow(point[1] - prevPoint[1], 2)) : 0;\n var nextDist = pointType === 2 ? Math.sqrt(Math.pow(point[0] - nextPoint[0], 2) + Math.pow(point[1] - nextPoint[1], 2)) : 0;\n setPoint(outputBezier, path.v[cur % path._length], angle, direction, amplitude, nextDist / ((frequency + 1) * 2), prevDist / ((frequency + 1) * 2), pointType);\n }\n\n function zigZagSegment(outputBezier, segment, amplitude, frequency, pointType, direction) {\n for (var i = 0; i < frequency; i += 1) {\n var t = (i + 1) / (frequency + 1);\n var dist = pointType === 2 ? Math.sqrt(Math.pow(segment.points[3][0] - segment.points[0][0], 2) + Math.pow(segment.points[3][1] - segment.points[0][1], 2)) : 0;\n var angle = segment.normalAngle(t);\n var point = segment.point(t);\n setPoint(outputBezier, point, angle, direction, amplitude, dist / ((frequency + 1) * 2), dist / ((frequency + 1) * 2), pointType);\n direction = -direction;\n }\n\n return direction;\n }\n\n ZigZagModifier.prototype.processPath = function (path, amplitude, frequency, pointType) {\n var count = path._length;\n var clonedPath = shapePool.newElement();\n clonedPath.c = path.c;\n\n if (!path.c) {\n count -= 1;\n }\n\n if (count === 0) return clonedPath;\n var direction = -1;\n var segment = PolynomialBezier.shapeSegment(path, 0);\n zigZagCorner(clonedPath, path, 0, amplitude, frequency, pointType, direction);\n\n for (var i = 0; i < count; i += 1) {\n direction = zigZagSegment(clonedPath, segment, amplitude, frequency, pointType, -direction);\n\n if (i === count - 1 && !path.c) {\n segment = null;\n } else {\n segment = PolynomialBezier.shapeSegment(path, (i + 1) % count);\n }\n\n zigZagCorner(clonedPath, path, i + 1, amplitude, frequency, pointType, direction);\n }\n\n return clonedPath;\n };\n\n ZigZagModifier.prototype.processShapes = function (_isFirstFrame) {\n var shapePaths;\n var i;\n var len = this.shapes.length;\n var j;\n var jLen;\n var amplitude = this.amplitude.v;\n var frequency = Math.max(0, Math.round(this.frequency.v));\n var pointType = this.pointsType.v;\n\n if (amplitude !== 0) {\n var shapeData;\n var localShapeCollection;\n\n for (i = 0; i < len; i += 1) {\n shapeData = this.shapes[i];\n localShapeCollection = shapeData.localShapeCollection;\n\n if (!(!shapeData.shape._mdf && !this._mdf && !_isFirstFrame)) {\n localShapeCollection.releaseShapes();\n shapeData.shape._mdf = true;\n shapePaths = shapeData.shape.paths.shapes;\n jLen = shapeData.shape.paths._length;\n\n for (j = 0; j < jLen; j += 1) {\n localShapeCollection.addShape(this.processPath(shapePaths[j], amplitude, frequency, pointType));\n }\n }\n\n shapeData.shape.paths = shapeData.localShapeCollection;\n }\n }\n\n if (!this.dynamicProperties.length) {\n this._mdf = false;\n }\n };\n\n function linearOffset(p1, p2, amount) {\n var angle = Math.atan2(p2[0] - p1[0], p2[1] - p1[1]);\n return [polarOffset(p1, angle, amount), polarOffset(p2, angle, amount)];\n }\n\n function offsetSegment(segment, amount) {\n var p0;\n var p1a;\n var p1b;\n var p2b;\n var p2a;\n var p3;\n var e;\n e = linearOffset(segment.points[0], segment.points[1], amount);\n p0 = e[0];\n p1a = e[1];\n e = linearOffset(segment.points[1], segment.points[2], amount);\n p1b = e[0];\n p2b = e[1];\n e = linearOffset(segment.points[2], segment.points[3], amount);\n p2a = e[0];\n p3 = e[1];\n var p1 = lineIntersection(p0, p1a, p1b, p2b);\n if (p1 === null) p1 = p1a;\n var p2 = lineIntersection(p2a, p3, p1b, p2b);\n if (p2 === null) p2 = p2a;\n return new PolynomialBezier(p0, p1, p2, p3);\n }\n\n function joinLines(outputBezier, seg1, seg2, lineJoin, miterLimit) {\n var p0 = seg1.points[3];\n var p1 = seg2.points[0]; // Bevel\n\n if (lineJoin === 3) return p0; // Connected, they don't need a joint\n\n if (pointEqual(p0, p1)) return p0; // Round\n\n if (lineJoin === 2) {\n var angleOut = -seg1.tangentAngle(1);\n var angleIn = -seg2.tangentAngle(0) + Math.PI;\n var center = lineIntersection(p0, polarOffset(p0, angleOut + Math.PI / 2, 100), p1, polarOffset(p1, angleOut + Math.PI / 2, 100));\n var radius = center ? pointDistance(center, p0) : pointDistance(p0, p1) / 2;\n var tan = polarOffset(p0, angleOut, 2 * radius * roundCorner);\n outputBezier.setXYAt(tan[0], tan[1], 'o', outputBezier.length() - 1);\n tan = polarOffset(p1, angleIn, 2 * radius * roundCorner);\n outputBezier.setTripleAt(p1[0], p1[1], p1[0], p1[1], tan[0], tan[1], outputBezier.length());\n return p1;\n } // Miter\n\n\n var t0 = pointEqual(p0, seg1.points[2]) ? seg1.points[0] : seg1.points[2];\n var t1 = pointEqual(p1, seg2.points[1]) ? seg2.points[3] : seg2.points[1];\n var intersection = lineIntersection(t0, p0, p1, t1);\n\n if (intersection && pointDistance(intersection, p0) < miterLimit) {\n outputBezier.setTripleAt(intersection[0], intersection[1], intersection[0], intersection[1], intersection[0], intersection[1], outputBezier.length());\n return intersection;\n }\n\n return p0;\n }\n\n function getIntersection(a, b) {\n var intersect = a.intersections(b);\n if (intersect.length && floatEqual(intersect[0][0], 1)) intersect.shift();\n if (intersect.length) return intersect[0];\n return null;\n }\n\n function pruneSegmentIntersection(a, b) {\n var outa = a.slice();\n var outb = b.slice();\n var intersect = getIntersection(a[a.length - 1], b[0]);\n\n if (intersect) {\n outa[a.length - 1] = a[a.length - 1].split(intersect[0])[0];\n outb[0] = b[0].split(intersect[1])[1];\n }\n\n if (a.length > 1 && b.length > 1) {\n intersect = getIntersection(a[0], b[b.length - 1]);\n\n if (intersect) {\n return [[a[0].split(intersect[0])[0]], [b[b.length - 1].split(intersect[1])[1]]];\n }\n }\n\n return [outa, outb];\n }\n\n function pruneIntersections(segments) {\n var e;\n\n for (var i = 1; i < segments.length; i += 1) {\n e = pruneSegmentIntersection(segments[i - 1], segments[i]);\n segments[i - 1] = e[0];\n segments[i] = e[1];\n }\n\n if (segments.length > 1) {\n e = pruneSegmentIntersection(segments[segments.length - 1], segments[0]);\n segments[segments.length - 1] = e[0];\n segments[0] = e[1];\n }\n\n return segments;\n }\n\n function offsetSegmentSplit(segment, amount) {\n /*\r\n We split each bezier segment into smaller pieces based\r\n on inflection points, this ensures the control point\r\n polygon is convex.\r\n (A cubic bezier can have none, one, or two inflection points)\r\n */\n var flex = segment.inflectionPoints();\n var left;\n var right;\n var split;\n var mid;\n\n if (flex.length === 0) {\n return [offsetSegment(segment, amount)];\n }\n\n if (flex.length === 1 || floatEqual(flex[1], 1)) {\n split = segment.split(flex[0]);\n left = split[0];\n right = split[1];\n return [offsetSegment(left, amount), offsetSegment(right, amount)];\n }\n\n split = segment.split(flex[0]);\n left = split[0];\n var t = (flex[1] - flex[0]) / (1 - flex[0]);\n split = split[1].split(t);\n mid = split[0];\n right = split[1];\n return [offsetSegment(left, amount), offsetSegment(mid, amount), offsetSegment(right, amount)];\n }\n\n function OffsetPathModifier() {}\n\n extendPrototype([ShapeModifier], OffsetPathModifier);\n\n OffsetPathModifier.prototype.initModifierProperties = function (elem, data) {\n this.getValue = this.processKeys;\n this.amount = PropertyFactory.getProp(elem, data.a, 0, null, this);\n this.miterLimit = PropertyFactory.getProp(elem, data.ml, 0, null, this);\n this.lineJoin = data.lj;\n this._isAnimated = this.amount.effectsSequence.length !== 0;\n };\n\n OffsetPathModifier.prototype.processPath = function (inputBezier, amount, lineJoin, miterLimit) {\n var outputBezier = shapePool.newElement();\n outputBezier.c = inputBezier.c;\n var count = inputBezier.length();\n\n if (!inputBezier.c) {\n count -= 1;\n }\n\n var i;\n var j;\n var segment;\n var multiSegments = [];\n\n for (i = 0; i < count; i += 1) {\n segment = PolynomialBezier.shapeSegment(inputBezier, i);\n multiSegments.push(offsetSegmentSplit(segment, amount));\n }\n\n if (!inputBezier.c) {\n for (i = count - 1; i >= 0; i -= 1) {\n segment = PolynomialBezier.shapeSegmentInverted(inputBezier, i);\n multiSegments.push(offsetSegmentSplit(segment, amount));\n }\n }\n\n multiSegments = pruneIntersections(multiSegments); // Add bezier segments to the output and apply line joints\n\n var lastPoint = null;\n var lastSeg = null;\n\n for (i = 0; i < multiSegments.length; i += 1) {\n var multiSegment = multiSegments[i];\n if (lastSeg) lastPoint = joinLines(outputBezier, lastSeg, multiSegment[0], lineJoin, miterLimit);\n lastSeg = multiSegment[multiSegment.length - 1];\n\n for (j = 0; j < multiSegment.length; j += 1) {\n segment = multiSegment[j];\n\n if (lastPoint && pointEqual(segment.points[0], lastPoint)) {\n outputBezier.setXYAt(segment.points[1][0], segment.points[1][1], 'o', outputBezier.length() - 1);\n } else {\n outputBezier.setTripleAt(segment.points[0][0], segment.points[0][1], segment.points[1][0], segment.points[1][1], segment.points[0][0], segment.points[0][1], outputBezier.length());\n }\n\n outputBezier.setTripleAt(segment.points[3][0], segment.points[3][1], segment.points[3][0], segment.points[3][1], segment.points[2][0], segment.points[2][1], outputBezier.length());\n lastPoint = segment.points[3];\n }\n }\n\n if (multiSegments.length) joinLines(outputBezier, lastSeg, multiSegments[0][0], lineJoin, miterLimit);\n return outputBezier;\n };\n\n OffsetPathModifier.prototype.processShapes = function (_isFirstFrame) {\n var shapePaths;\n var i;\n var len = this.shapes.length;\n var j;\n var jLen;\n var amount = this.amount.v;\n var miterLimit = this.miterLimit.v;\n var lineJoin = this.lineJoin;\n\n if (amount !== 0) {\n var shapeData;\n var localShapeCollection;\n\n for (i = 0; i < len; i += 1) {\n shapeData = this.shapes[i];\n localShapeCollection = shapeData.localShapeCollection;\n\n if (!(!shapeData.shape._mdf && !this._mdf && !_isFirstFrame)) {\n localShapeCollection.releaseShapes();\n shapeData.shape._mdf = true;\n shapePaths = shapeData.shape.paths.shapes;\n jLen = shapeData.shape.paths._length;\n\n for (j = 0; j < jLen; j += 1) {\n localShapeCollection.addShape(this.processPath(shapePaths[j], amount, lineJoin, miterLimit));\n }\n }\n\n shapeData.shape.paths = shapeData.localShapeCollection;\n }\n }\n\n if (!this.dynamicProperties.length) {\n this._mdf = false;\n }\n };\n\n function getFontProperties(fontData) {\n var styles = fontData.fStyle ? fontData.fStyle.split(' ') : [];\n var fWeight = 'normal';\n var fStyle = 'normal';\n var len = styles.length;\n var styleName;\n\n for (var i = 0; i < len; i += 1) {\n styleName = styles[i].toLowerCase();\n\n switch (styleName) {\n case 'italic':\n fStyle = 'italic';\n break;\n\n case 'bold':\n fWeight = '700';\n break;\n\n case 'black':\n fWeight = '900';\n break;\n\n case 'medium':\n fWeight = '500';\n break;\n\n case 'regular':\n case 'normal':\n fWeight = '400';\n break;\n\n case 'light':\n case 'thin':\n fWeight = '200';\n break;\n\n default:\n break;\n }\n }\n\n return {\n style: fStyle,\n weight: fontData.fWeight || fWeight\n };\n }\n\n var FontManager = function () {\n var maxWaitingTime = 5000;\n var emptyChar = {\n w: 0,\n size: 0,\n shapes: [],\n data: {\n shapes: []\n }\n };\n var combinedCharacters = []; // Hindi characters\n\n combinedCharacters = combinedCharacters.concat([2304, 2305, 2306, 2307, 2362, 2363, 2364, 2364, 2366, 2367, 2368, 2369, 2370, 2371, 2372, 2373, 2374, 2375, 2376, 2377, 2378, 2379, 2380, 2381, 2382, 2383, 2387, 2388, 2389, 2390, 2391, 2402, 2403]);\n var BLACK_FLAG_CODE_POINT = 127988;\n var CANCEL_TAG_CODE_POINT = 917631;\n var A_TAG_CODE_POINT = 917601;\n var Z_TAG_CODE_POINT = 917626;\n var VARIATION_SELECTOR_16_CODE_POINT = 65039;\n var ZERO_WIDTH_JOINER_CODE_POINT = 8205;\n var REGIONAL_CHARACTER_A_CODE_POINT = 127462;\n var REGIONAL_CHARACTER_Z_CODE_POINT = 127487;\n var surrogateModifiers = ['d83cdffb', 'd83cdffc', 'd83cdffd', 'd83cdffe', 'd83cdfff'];\n\n function trimFontOptions(font) {\n var familyArray = font.split(',');\n var i;\n var len = familyArray.length;\n var enabledFamilies = [];\n\n for (i = 0; i < len; i += 1) {\n if (familyArray[i] !== 'sans-serif' && familyArray[i] !== 'monospace') {\n enabledFamilies.push(familyArray[i]);\n }\n }\n\n return enabledFamilies.join(',');\n }\n\n function setUpNode(font, family) {\n var parentNode = createTag('span'); // Node is invisible to screen readers.\n\n parentNode.setAttribute('aria-hidden', true);\n parentNode.style.fontFamily = family;\n var node = createTag('span'); // Characters that vary significantly among different fonts\n\n node.innerText = 'giItT1WQy@!-/#'; // Visible - so we can measure it - but not on the screen\n\n parentNode.style.position = 'absolute';\n parentNode.style.left = '-10000px';\n parentNode.style.top = '-10000px'; // Large font size makes even subtle changes obvious\n\n parentNode.style.fontSize = '300px'; // Reset any font properties\n\n parentNode.style.fontVariant = 'normal';\n parentNode.style.fontStyle = 'normal';\n parentNode.style.fontWeight = 'normal';\n parentNode.style.letterSpacing = '0';\n parentNode.appendChild(node);\n document.body.appendChild(parentNode); // Remember width with no applied web font\n\n var width = node.offsetWidth;\n node.style.fontFamily = trimFontOptions(font) + ', ' + family;\n return {\n node: node,\n w: width,\n parent: parentNode\n };\n }\n\n function checkLoadedFonts() {\n var i;\n var len = this.fonts.length;\n var node;\n var w;\n var loadedCount = len;\n\n for (i = 0; i < len; i += 1) {\n if (this.fonts[i].loaded) {\n loadedCount -= 1;\n } else if (this.fonts[i].fOrigin === 'n' || this.fonts[i].origin === 0) {\n this.fonts[i].loaded = true;\n } else {\n node = this.fonts[i].monoCase.node;\n w = this.fonts[i].monoCase.w;\n\n if (node.offsetWidth !== w) {\n loadedCount -= 1;\n this.fonts[i].loaded = true;\n } else {\n node = this.fonts[i].sansCase.node;\n w = this.fonts[i].sansCase.w;\n\n if (node.offsetWidth !== w) {\n loadedCount -= 1;\n this.fonts[i].loaded = true;\n }\n }\n\n if (this.fonts[i].loaded) {\n this.fonts[i].sansCase.parent.parentNode.removeChild(this.fonts[i].sansCase.parent);\n this.fonts[i].monoCase.parent.parentNode.removeChild(this.fonts[i].monoCase.parent);\n }\n }\n }\n\n if (loadedCount !== 0 && Date.now() - this.initTime < maxWaitingTime) {\n setTimeout(this.checkLoadedFontsBinded, 20);\n } else {\n setTimeout(this.setIsLoadedBinded, 10);\n }\n }\n\n function createHelper(fontData, def) {\n var engine = document.body && def ? 'svg' : 'canvas';\n var helper;\n var fontProps = getFontProperties(fontData);\n\n if (engine === 'svg') {\n var tHelper = createNS('text');\n tHelper.style.fontSize = '100px'; // tHelper.style.fontFamily = fontData.fFamily;\n\n tHelper.setAttribute('font-family', fontData.fFamily);\n tHelper.setAttribute('font-style', fontProps.style);\n tHelper.setAttribute('font-weight', fontProps.weight);\n tHelper.textContent = '1';\n\n if (fontData.fClass) {\n tHelper.style.fontFamily = 'inherit';\n tHelper.setAttribute('class', fontData.fClass);\n } else {\n tHelper.style.fontFamily = fontData.fFamily;\n }\n\n def.appendChild(tHelper);\n helper = tHelper;\n } else {\n var tCanvasHelper = new OffscreenCanvas(500, 500).getContext('2d');\n tCanvasHelper.font = fontProps.style + ' ' + fontProps.weight + ' 100px ' + fontData.fFamily;\n helper = tCanvasHelper;\n }\n\n function measure(text) {\n if (engine === 'svg') {\n helper.textContent = text;\n return helper.getComputedTextLength();\n }\n\n return helper.measureText(text).width;\n }\n\n return {\n measureText: measure\n };\n }\n\n function addFonts(fontData, defs) {\n if (!fontData) {\n this.isLoaded = true;\n return;\n }\n\n if (this.chars) {\n this.isLoaded = true;\n this.fonts = fontData.list;\n return;\n }\n\n if (!document.body) {\n this.isLoaded = true;\n fontData.list.forEach(function (data) {\n data.helper = createHelper(data);\n data.cache = {};\n });\n this.fonts = fontData.list;\n return;\n }\n\n var fontArr = fontData.list;\n var i;\n var len = fontArr.length;\n var _pendingFonts = len;\n\n for (i = 0; i < len; i += 1) {\n var shouldLoadFont = true;\n var loadedSelector;\n var j;\n fontArr[i].loaded = false;\n fontArr[i].monoCase = setUpNode(fontArr[i].fFamily, 'monospace');\n fontArr[i].sansCase = setUpNode(fontArr[i].fFamily, 'sans-serif');\n\n if (!fontArr[i].fPath) {\n fontArr[i].loaded = true;\n _pendingFonts -= 1;\n } else if (fontArr[i].fOrigin === 'p' || fontArr[i].origin === 3) {\n loadedSelector = document.querySelectorAll('style[f-forigin=\"p\"][f-family=\"' + fontArr[i].fFamily + '\"], style[f-origin=\"3\"][f-family=\"' + fontArr[i].fFamily + '\"]');\n\n if (loadedSelector.length > 0) {\n shouldLoadFont = false;\n }\n\n if (shouldLoadFont) {\n var s = createTag('style');\n s.setAttribute('f-forigin', fontArr[i].fOrigin);\n s.setAttribute('f-origin', fontArr[i].origin);\n s.setAttribute('f-family', fontArr[i].fFamily);\n s.type = 'text/css';\n s.innerText = '@font-face {font-family: ' + fontArr[i].fFamily + \"; font-style: normal; src: url('\" + fontArr[i].fPath + \"');}\";\n defs.appendChild(s);\n }\n } else if (fontArr[i].fOrigin === 'g' || fontArr[i].origin === 1) {\n loadedSelector = document.querySelectorAll('link[f-forigin=\"g\"], link[f-origin=\"1\"]');\n\n for (j = 0; j < loadedSelector.length; j += 1) {\n if (loadedSelector[j].href.indexOf(fontArr[i].fPath) !== -1) {\n // Font is already loaded\n shouldLoadFont = false;\n }\n }\n\n if (shouldLoadFont) {\n var l = createTag('link');\n l.setAttribute('f-forigin', fontArr[i].fOrigin);\n l.setAttribute('f-origin', fontArr[i].origin);\n l.type = 'text/css';\n l.rel = 'stylesheet';\n l.href = fontArr[i].fPath;\n document.body.appendChild(l);\n }\n } else if (fontArr[i].fOrigin === 't' || fontArr[i].origin === 2) {\n loadedSelector = document.querySelectorAll('script[f-forigin=\"t\"], script[f-origin=\"2\"]');\n\n for (j = 0; j < loadedSelector.length; j += 1) {\n if (fontArr[i].fPath === loadedSelector[j].src) {\n // Font is already loaded\n shouldLoadFont = false;\n }\n }\n\n if (shouldLoadFont) {\n var sc = createTag('link');\n sc.setAttribute('f-forigin', fontArr[i].fOrigin);\n sc.setAttribute('f-origin', fontArr[i].origin);\n sc.setAttribute('rel', 'stylesheet');\n sc.setAttribute('href', fontArr[i].fPath);\n defs.appendChild(sc);\n }\n }\n\n fontArr[i].helper = createHelper(fontArr[i], defs);\n fontArr[i].cache = {};\n this.fonts.push(fontArr[i]);\n }\n\n if (_pendingFonts === 0) {\n this.isLoaded = true;\n } else {\n // On some cases even if the font is loaded, it won't load correctly when measuring text on canvas.\n // Adding this timeout seems to fix it\n setTimeout(this.checkLoadedFonts.bind(this), 100);\n }\n }\n\n function addChars(chars) {\n if (!chars) {\n return;\n }\n\n if (!this.chars) {\n this.chars = [];\n }\n\n var i;\n var len = chars.length;\n var j;\n var jLen = this.chars.length;\n var found;\n\n for (i = 0; i < len; i += 1) {\n j = 0;\n found = false;\n\n while (j < jLen) {\n if (this.chars[j].style === chars[i].style && this.chars[j].fFamily === chars[i].fFamily && this.chars[j].ch === chars[i].ch) {\n found = true;\n }\n\n j += 1;\n }\n\n if (!found) {\n this.chars.push(chars[i]);\n jLen += 1;\n }\n }\n }\n\n function getCharData(_char, style, font) {\n var i = 0;\n var len = this.chars.length;\n\n while (i < len) {\n if (this.chars[i].ch === _char && this.chars[i].style === style && this.chars[i].fFamily === font) {\n return this.chars[i];\n }\n\n i += 1;\n }\n\n if ((typeof _char === 'string' && _char.charCodeAt(0) !== 13 || !_char) && console && console.warn // eslint-disable-line no-console\n && !this._warned) {\n this._warned = true;\n console.warn('Missing character from exported characters list: ', _char, style, font); // eslint-disable-line no-console\n }\n\n return emptyChar;\n }\n\n function measureText(_char2, fontName, size) {\n var fontData = this.getFontByName(fontName); // Using the char instead of char.charCodeAt(0)\n // to avoid collisions between equal chars\n\n var index = _char2;\n\n if (!fontData.cache[index]) {\n var tHelper = fontData.helper;\n\n if (_char2 === ' ') {\n var doubleSize = tHelper.measureText('|' + _char2 + '|');\n var singleSize = tHelper.measureText('||');\n fontData.cache[index] = (doubleSize - singleSize) / 100;\n } else {\n fontData.cache[index] = tHelper.measureText(_char2) / 100;\n }\n }\n\n return fontData.cache[index] * size;\n }\n\n function getFontByName(name) {\n var i = 0;\n var len = this.fonts.length;\n\n while (i < len) {\n if (this.fonts[i].fName === name) {\n return this.fonts[i];\n }\n\n i += 1;\n }\n\n return this.fonts[0];\n }\n\n function getCodePoint(string) {\n var codePoint = 0;\n var first = string.charCodeAt(0);\n\n if (first >= 0xD800 && first <= 0xDBFF) {\n var second = string.charCodeAt(1);\n\n if (second >= 0xDC00 && second <= 0xDFFF) {\n codePoint = (first - 0xD800) * 0x400 + second - 0xDC00 + 0x10000;\n }\n }\n\n return codePoint;\n } // Skin tone modifiers\n\n\n function isModifier(firstCharCode, secondCharCode) {\n var sum = firstCharCode.toString(16) + secondCharCode.toString(16);\n return surrogateModifiers.indexOf(sum) !== -1;\n }\n\n function isZeroWidthJoiner(charCode) {\n return charCode === ZERO_WIDTH_JOINER_CODE_POINT;\n } // This codepoint may change the appearance of the preceding character.\n // If that is a symbol, dingbat or emoji, U+FE0F forces it to be rendered\n // as a colorful image as compared to a monochrome text variant.\n\n\n function isVariationSelector(charCode) {\n return charCode === VARIATION_SELECTOR_16_CODE_POINT;\n } // The regional indicator symbols are a set of 26 alphabetic Unicode\n /// characters (A–Z) intended to be used to encode ISO 3166-1 alpha-2\n // two-letter country codes in a way that allows optional special treatment.\n\n\n function isRegionalCode(string) {\n var codePoint = getCodePoint(string);\n\n if (codePoint >= REGIONAL_CHARACTER_A_CODE_POINT && codePoint <= REGIONAL_CHARACTER_Z_CODE_POINT) {\n return true;\n }\n\n return false;\n } // Some Emoji implementations represent combinations of\n // two “regional indicator” letters as a single flag symbol.\n\n\n function isFlagEmoji(string) {\n return isRegionalCode(string.substr(0, 2)) && isRegionalCode(string.substr(2, 2));\n }\n\n function isCombinedCharacter(_char3) {\n return combinedCharacters.indexOf(_char3) !== -1;\n } // Regional flags start with a BLACK_FLAG_CODE_POINT\n // folowed by 5 chars in the TAG range\n // and end with a CANCEL_TAG_CODE_POINT\n\n\n function isRegionalFlag(text, index) {\n var codePoint = getCodePoint(text.substr(index, 2));\n\n if (codePoint !== BLACK_FLAG_CODE_POINT) {\n return false;\n }\n\n var count = 0;\n index += 2;\n\n while (count < 5) {\n codePoint = getCodePoint(text.substr(index, 2));\n\n if (codePoint < A_TAG_CODE_POINT || codePoint > Z_TAG_CODE_POINT) {\n return false;\n }\n\n count += 1;\n index += 2;\n }\n\n return getCodePoint(text.substr(index, 2)) === CANCEL_TAG_CODE_POINT;\n }\n\n function setIsLoaded() {\n this.isLoaded = true;\n }\n\n var Font = function Font() {\n this.fonts = [];\n this.chars = null;\n this.typekitLoaded = 0;\n this.isLoaded = false;\n this._warned = false;\n this.initTime = Date.now();\n this.setIsLoadedBinded = this.setIsLoaded.bind(this);\n this.checkLoadedFontsBinded = this.checkLoadedFonts.bind(this);\n };\n\n Font.isModifier = isModifier;\n Font.isZeroWidthJoiner = isZeroWidthJoiner;\n Font.isFlagEmoji = isFlagEmoji;\n Font.isRegionalCode = isRegionalCode;\n Font.isCombinedCharacter = isCombinedCharacter;\n Font.isRegionalFlag = isRegionalFlag;\n Font.isVariationSelector = isVariationSelector;\n Font.BLACK_FLAG_CODE_POINT = BLACK_FLAG_CODE_POINT;\n var fontPrototype = {\n addChars: addChars,\n addFonts: addFonts,\n getCharData: getCharData,\n getFontByName: getFontByName,\n measureText: measureText,\n checkLoadedFonts: checkLoadedFonts,\n setIsLoaded: setIsLoaded\n };\n Font.prototype = fontPrototype;\n return Font;\n }();\n\n function SlotManager(animationData) {\n this.animationData = animationData;\n }\n\n SlotManager.prototype.getProp = function (data) {\n if (this.animationData.slots && this.animationData.slots[data.sid]) {\n return Object.assign(data, this.animationData.slots[data.sid].p);\n }\n\n return data;\n };\n\n function slotFactory(animationData) {\n return new SlotManager(animationData);\n }\n\n function RenderableElement() {}\n\n RenderableElement.prototype = {\n initRenderable: function initRenderable() {\n // layer's visibility related to inpoint and outpoint. Rename isVisible to isInRange\n this.isInRange = false; // layer's display state\n\n this.hidden = false; // If layer's transparency equals 0, it can be hidden\n\n this.isTransparent = false; // list of animated components\n\n this.renderableComponents = [];\n },\n addRenderableComponent: function addRenderableComponent(component) {\n if (this.renderableComponents.indexOf(component) === -1) {\n this.renderableComponents.push(component);\n }\n },\n removeRenderableComponent: function removeRenderableComponent(component) {\n if (this.renderableComponents.indexOf(component) !== -1) {\n this.renderableComponents.splice(this.renderableComponents.indexOf(component), 1);\n }\n },\n prepareRenderableFrame: function prepareRenderableFrame(num) {\n this.checkLayerLimits(num);\n },\n checkTransparency: function checkTransparency() {\n if (this.finalTransform.mProp.o.v <= 0) {\n if (!this.isTransparent && this.globalData.renderConfig.hideOnTransparent) {\n this.isTransparent = true;\n this.hide();\n }\n } else if (this.isTransparent) {\n this.isTransparent = false;\n this.show();\n }\n },\n\n /**\r\n * @function\r\n * Initializes frame related properties.\r\n *\r\n * @param {number} num\r\n * current frame number in Layer's time\r\n *\r\n */\n checkLayerLimits: function checkLayerLimits(num) {\n if (this.data.ip - this.data.st <= num && this.data.op - this.data.st > num) {\n if (this.isInRange !== true) {\n this.globalData._mdf = true;\n this._mdf = true;\n this.isInRange = true;\n this.show();\n }\n } else if (this.isInRange !== false) {\n this.globalData._mdf = true;\n this.isInRange = false;\n this.hide();\n }\n },\n renderRenderable: function renderRenderable() {\n var i;\n var len = this.renderableComponents.length;\n\n for (i = 0; i < len; i += 1) {\n this.renderableComponents[i].renderFrame(this._isFirstFrame);\n }\n /* this.maskManager.renderFrame(this.finalTransform.mat);\r\n this.renderableEffectsManager.renderFrame(this._isFirstFrame); */\n\n },\n sourceRectAtTime: function sourceRectAtTime() {\n return {\n top: 0,\n left: 0,\n width: 100,\n height: 100\n };\n },\n getLayerSize: function getLayerSize() {\n if (this.data.ty === 5) {\n return {\n w: this.data.textData.width,\n h: this.data.textData.height\n };\n }\n\n return {\n w: this.data.width,\n h: this.data.height\n };\n }\n };\n\n var getBlendMode = function () {\n var blendModeEnums = {\n 0: 'source-over',\n 1: 'multiply',\n 2: 'screen',\n 3: 'overlay',\n 4: 'darken',\n 5: 'lighten',\n 6: 'color-dodge',\n 7: 'color-burn',\n 8: 'hard-light',\n 9: 'soft-light',\n 10: 'difference',\n 11: 'exclusion',\n 12: 'hue',\n 13: 'saturation',\n 14: 'color',\n 15: 'luminosity'\n };\n return function (mode) {\n return blendModeEnums[mode] || '';\n };\n }();\n\n function SliderEffect(data, elem, container) {\n this.p = PropertyFactory.getProp(elem, data.v, 0, 0, container);\n }\n\n function AngleEffect(data, elem, container) {\n this.p = PropertyFactory.getProp(elem, data.v, 0, 0, container);\n }\n\n function ColorEffect(data, elem, container) {\n this.p = PropertyFactory.getProp(elem, data.v, 1, 0, container);\n }\n\n function PointEffect(data, elem, container) {\n this.p = PropertyFactory.getProp(elem, data.v, 1, 0, container);\n }\n\n function LayerIndexEffect(data, elem, container) {\n this.p = PropertyFactory.getProp(elem, data.v, 0, 0, container);\n }\n\n function MaskIndexEffect(data, elem, container) {\n this.p = PropertyFactory.getProp(elem, data.v, 0, 0, container);\n }\n\n function CheckboxEffect(data, elem, container) {\n this.p = PropertyFactory.getProp(elem, data.v, 0, 0, container);\n }\n\n function NoValueEffect() {\n this.p = {};\n }\n\n function EffectsManager(data, element) {\n var effects = data.ef || [];\n this.effectElements = [];\n var i;\n var len = effects.length;\n var effectItem;\n\n for (i = 0; i < len; i += 1) {\n effectItem = new GroupEffect(effects[i], element);\n this.effectElements.push(effectItem);\n }\n }\n\n function GroupEffect(data, element) {\n this.init(data, element);\n }\n\n extendPrototype([DynamicPropertyContainer], GroupEffect);\n GroupEffect.prototype.getValue = GroupEffect.prototype.iterateDynamicProperties;\n\n GroupEffect.prototype.init = function (data, element) {\n this.data = data;\n this.effectElements = [];\n this.initDynamicPropertyContainer(element);\n var i;\n var len = this.data.ef.length;\n var eff;\n var effects = this.data.ef;\n\n for (i = 0; i < len; i += 1) {\n eff = null;\n\n switch (effects[i].ty) {\n case 0:\n eff = new SliderEffect(effects[i], element, this);\n break;\n\n case 1:\n eff = new AngleEffect(effects[i], element, this);\n break;\n\n case 2:\n eff = new ColorEffect(effects[i], element, this);\n break;\n\n case 3:\n eff = new PointEffect(effects[i], element, this);\n break;\n\n case 4:\n case 7:\n eff = new CheckboxEffect(effects[i], element, this);\n break;\n\n case 10:\n eff = new LayerIndexEffect(effects[i], element, this);\n break;\n\n case 11:\n eff = new MaskIndexEffect(effects[i], element, this);\n break;\n\n case 5:\n eff = new EffectsManager(effects[i], element, this);\n break;\n // case 6:\n\n default:\n eff = new NoValueEffect(effects[i], element, this);\n break;\n }\n\n if (eff) {\n this.effectElements.push(eff);\n }\n }\n };\n\n function BaseElement() {}\n\n BaseElement.prototype = {\n checkMasks: function checkMasks() {\n if (!this.data.hasMask) {\n return false;\n }\n\n var i = 0;\n var len = this.data.masksProperties.length;\n\n while (i < len) {\n if (this.data.masksProperties[i].mode !== 'n' && this.data.masksProperties[i].cl !== false) {\n return true;\n }\n\n i += 1;\n }\n\n return false;\n },\n initExpressions: function initExpressions() {\n var expressionsInterfaces = getExpressionInterfaces();\n\n if (!expressionsInterfaces) {\n return;\n }\n\n var LayerExpressionInterface = expressionsInterfaces('layer');\n var EffectsExpressionInterface = expressionsInterfaces('effects');\n var ShapeExpressionInterface = expressionsInterfaces('shape');\n var TextExpressionInterface = expressionsInterfaces('text');\n var CompExpressionInterface = expressionsInterfaces('comp');\n this.layerInterface = LayerExpressionInterface(this);\n\n if (this.data.hasMask && this.maskManager) {\n this.layerInterface.registerMaskInterface(this.maskManager);\n }\n\n var effectsInterface = EffectsExpressionInterface.createEffectsInterface(this, this.layerInterface);\n this.layerInterface.registerEffectsInterface(effectsInterface);\n\n if (this.data.ty === 0 || this.data.xt) {\n this.compInterface = CompExpressionInterface(this);\n } else if (this.data.ty === 4) {\n this.layerInterface.shapeInterface = ShapeExpressionInterface(this.shapesData, this.itemsData, this.layerInterface);\n this.layerInterface.content = this.layerInterface.shapeInterface;\n } else if (this.data.ty === 5) {\n this.layerInterface.textInterface = TextExpressionInterface(this);\n this.layerInterface.text = this.layerInterface.textInterface;\n }\n },\n setBlendMode: function setBlendMode() {\n var blendModeValue = getBlendMode(this.data.bm);\n var elem = this.baseElement || this.layerElement;\n elem.style['mix-blend-mode'] = blendModeValue;\n },\n initBaseData: function initBaseData(data, globalData, comp) {\n this.globalData = globalData;\n this.comp = comp;\n this.data = data;\n this.layerId = createElementID(); // Stretch factor for old animations missing this property.\n\n if (!this.data.sr) {\n this.data.sr = 1;\n } // effects manager\n\n\n this.effectsManager = new EffectsManager(this.data, this, this.dynamicProperties);\n },\n getType: function getType() {\n return this.type;\n },\n sourceRectAtTime: function sourceRectAtTime() {}\n };\n\n /**\r\n * @file\r\n * Handles element's layer frame update.\r\n * Checks layer in point and out point\r\n *\r\n */\n function FrameElement() {}\n\n FrameElement.prototype = {\n /**\r\n * @function\r\n * Initializes frame related properties.\r\n *\r\n */\n initFrame: function initFrame() {\n // set to true when inpoint is rendered\n this._isFirstFrame = false; // list of animated properties\n\n this.dynamicProperties = []; // If layer has been modified in current tick this will be true\n\n this._mdf = false;\n },\n\n /**\r\n * @function\r\n * Calculates all dynamic values\r\n *\r\n * @param {number} num\r\n * current frame number in Layer's time\r\n * @param {boolean} isVisible\r\n * if layers is currently in range\r\n *\r\n */\n prepareProperties: function prepareProperties(num, isVisible) {\n var i;\n var len = this.dynamicProperties.length;\n\n for (i = 0; i < len; i += 1) {\n if (isVisible || this._isParent && this.dynamicProperties[i].propType === 'transform') {\n this.dynamicProperties[i].getValue();\n\n if (this.dynamicProperties[i]._mdf) {\n this.globalData._mdf = true;\n this._mdf = true;\n }\n }\n }\n },\n addDynamicProperty: function addDynamicProperty(prop) {\n if (this.dynamicProperties.indexOf(prop) === -1) {\n this.dynamicProperties.push(prop);\n }\n }\n };\n\n function FootageElement(data, globalData, comp) {\n this.initFrame();\n this.initRenderable();\n this.assetData = globalData.getAssetData(data.refId);\n this.footageData = globalData.imageLoader.getAsset(this.assetData);\n this.initBaseData(data, globalData, comp);\n }\n\n FootageElement.prototype.prepareFrame = function () {};\n\n extendPrototype([RenderableElement, BaseElement, FrameElement], FootageElement);\n\n FootageElement.prototype.getBaseElement = function () {\n return null;\n };\n\n FootageElement.prototype.renderFrame = function () {};\n\n FootageElement.prototype.destroy = function () {};\n\n FootageElement.prototype.initExpressions = function () {\n var expressionsInterfaces = getExpressionInterfaces();\n\n if (!expressionsInterfaces) {\n return;\n }\n\n var FootageInterface = expressionsInterfaces('footage');\n this.layerInterface = FootageInterface(this);\n };\n\n FootageElement.prototype.getFootageData = function () {\n return this.footageData;\n };\n\n function AudioElement(data, globalData, comp) {\n this.initFrame();\n this.initRenderable();\n this.assetData = globalData.getAssetData(data.refId);\n this.initBaseData(data, globalData, comp);\n this._isPlaying = false;\n this._canPlay = false;\n var assetPath = this.globalData.getAssetsPath(this.assetData);\n this.audio = this.globalData.audioController.createAudio(assetPath);\n this._currentTime = 0;\n this.globalData.audioController.addAudio(this);\n this._volumeMultiplier = 1;\n this._volume = 1;\n this._previousVolume = null;\n this.tm = data.tm ? PropertyFactory.getProp(this, data.tm, 0, globalData.frameRate, this) : {\n _placeholder: true\n };\n this.lv = PropertyFactory.getProp(this, data.au && data.au.lv ? data.au.lv : {\n k: [100]\n }, 1, 0.01, this);\n }\n\n AudioElement.prototype.prepareFrame = function (num) {\n this.prepareRenderableFrame(num, true);\n this.prepareProperties(num, true);\n\n if (!this.tm._placeholder) {\n var timeRemapped = this.tm.v;\n this._currentTime = timeRemapped;\n } else {\n this._currentTime = num / this.data.sr;\n }\n\n this._volume = this.lv.v[0];\n var totalVolume = this._volume * this._volumeMultiplier;\n\n if (this._previousVolume !== totalVolume) {\n this._previousVolume = totalVolume;\n this.audio.volume(totalVolume);\n }\n };\n\n extendPrototype([RenderableElement, BaseElement, FrameElement], AudioElement);\n\n AudioElement.prototype.renderFrame = function () {\n if (this.isInRange && this._canPlay) {\n if (!this._isPlaying) {\n this.audio.play();\n this.audio.seek(this._currentTime / this.globalData.frameRate);\n this._isPlaying = true;\n } else if (!this.audio.playing() || Math.abs(this._currentTime / this.globalData.frameRate - this.audio.seek()) > 0.1) {\n this.audio.seek(this._currentTime / this.globalData.frameRate);\n }\n }\n };\n\n AudioElement.prototype.show = function () {// this.audio.play()\n };\n\n AudioElement.prototype.hide = function () {\n this.audio.pause();\n this._isPlaying = false;\n };\n\n AudioElement.prototype.pause = function () {\n this.audio.pause();\n this._isPlaying = false;\n this._canPlay = false;\n };\n\n AudioElement.prototype.resume = function () {\n this._canPlay = true;\n };\n\n AudioElement.prototype.setRate = function (rateValue) {\n this.audio.rate(rateValue);\n };\n\n AudioElement.prototype.volume = function (volumeValue) {\n this._volumeMultiplier = volumeValue;\n this._previousVolume = volumeValue * this._volume;\n this.audio.volume(this._previousVolume);\n };\n\n AudioElement.prototype.getBaseElement = function () {\n return null;\n };\n\n AudioElement.prototype.destroy = function () {};\n\n AudioElement.prototype.sourceRectAtTime = function () {};\n\n AudioElement.prototype.initExpressions = function () {};\n\n function BaseRenderer() {}\n\n BaseRenderer.prototype.checkLayers = function (num) {\n var i;\n var len = this.layers.length;\n var data;\n this.completeLayers = true;\n\n for (i = len - 1; i >= 0; i -= 1) {\n if (!this.elements[i]) {\n data = this.layers[i];\n\n if (data.ip - data.st <= num - this.layers[i].st && data.op - data.st > num - this.layers[i].st) {\n this.buildItem(i);\n }\n }\n\n this.completeLayers = this.elements[i] ? this.completeLayers : false;\n }\n\n this.checkPendingElements();\n };\n\n BaseRenderer.prototype.createItem = function (layer) {\n switch (layer.ty) {\n case 2:\n return this.createImage(layer);\n\n case 0:\n return this.createComp(layer);\n\n case 1:\n return this.createSolid(layer);\n\n case 3:\n return this.createNull(layer);\n\n case 4:\n return this.createShape(layer);\n\n case 5:\n return this.createText(layer);\n\n case 6:\n return this.createAudio(layer);\n\n case 13:\n return this.createCamera(layer);\n\n case 15:\n return this.createFootage(layer);\n\n default:\n return this.createNull(layer);\n }\n };\n\n BaseRenderer.prototype.createCamera = function () {\n throw new Error('You\\'re using a 3d camera. Try the html renderer.');\n };\n\n BaseRenderer.prototype.createAudio = function (data) {\n return new AudioElement(data, this.globalData, this);\n };\n\n BaseRenderer.prototype.createFootage = function (data) {\n return new FootageElement(data, this.globalData, this);\n };\n\n BaseRenderer.prototype.buildAllItems = function () {\n var i;\n var len = this.layers.length;\n\n for (i = 0; i < len; i += 1) {\n this.buildItem(i);\n }\n\n this.checkPendingElements();\n };\n\n BaseRenderer.prototype.includeLayers = function (newLayers) {\n this.completeLayers = false;\n var i;\n var len = newLayers.length;\n var j;\n var jLen = this.layers.length;\n\n for (i = 0; i < len; i += 1) {\n j = 0;\n\n while (j < jLen) {\n if (this.layers[j].id === newLayers[i].id) {\n this.layers[j] = newLayers[i];\n break;\n }\n\n j += 1;\n }\n }\n };\n\n BaseRenderer.prototype.setProjectInterface = function (pInterface) {\n this.globalData.projectInterface = pInterface;\n };\n\n BaseRenderer.prototype.initItems = function () {\n if (!this.globalData.progressiveLoad) {\n this.buildAllItems();\n }\n };\n\n BaseRenderer.prototype.buildElementParenting = function (element, parentName, hierarchy) {\n var elements = this.elements;\n var layers = this.layers;\n var i = 0;\n var len = layers.length;\n\n while (i < len) {\n if (layers[i].ind == parentName) {\n // eslint-disable-line eqeqeq\n if (!elements[i] || elements[i] === true) {\n this.buildItem(i);\n this.addPendingElement(element);\n } else {\n hierarchy.push(elements[i]);\n elements[i].setAsParent();\n\n if (layers[i].parent !== undefined) {\n this.buildElementParenting(element, layers[i].parent, hierarchy);\n } else {\n element.setHierarchy(hierarchy);\n }\n }\n }\n\n i += 1;\n }\n };\n\n BaseRenderer.prototype.addPendingElement = function (element) {\n this.pendingElements.push(element);\n };\n\n BaseRenderer.prototype.searchExtraCompositions = function (assets) {\n var i;\n var len = assets.length;\n\n for (i = 0; i < len; i += 1) {\n if (assets[i].xt) {\n var comp = this.createComp(assets[i]);\n comp.initExpressions();\n this.globalData.projectInterface.registerComposition(comp);\n }\n }\n };\n\n BaseRenderer.prototype.getElementById = function (ind) {\n var i;\n var len = this.elements.length;\n\n for (i = 0; i < len; i += 1) {\n if (this.elements[i].data.ind === ind) {\n return this.elements[i];\n }\n }\n\n return null;\n };\n\n BaseRenderer.prototype.getElementByPath = function (path) {\n var pathValue = path.shift();\n var element;\n\n if (typeof pathValue === 'number') {\n element = this.elements[pathValue];\n } else {\n var i;\n var len = this.elements.length;\n\n for (i = 0; i < len; i += 1) {\n if (this.elements[i].data.nm === pathValue) {\n element = this.elements[i];\n break;\n }\n }\n }\n\n if (path.length === 0) {\n return element;\n }\n\n return element.getElementByPath(path);\n };\n\n BaseRenderer.prototype.setupGlobalData = function (animData, fontsContainer) {\n this.globalData.fontManager = new FontManager();\n this.globalData.slotManager = slotFactory(animData);\n this.globalData.fontManager.addChars(animData.chars);\n this.globalData.fontManager.addFonts(animData.fonts, fontsContainer);\n this.globalData.getAssetData = this.animationItem.getAssetData.bind(this.animationItem);\n this.globalData.getAssetsPath = this.animationItem.getAssetsPath.bind(this.animationItem);\n this.globalData.imageLoader = this.animationItem.imagePreloader;\n this.globalData.audioController = this.animationItem.audioController;\n this.globalData.frameId = 0;\n this.globalData.frameRate = animData.fr;\n this.globalData.nm = animData.nm;\n this.globalData.compSize = {\n w: animData.w,\n h: animData.h\n };\n };\n\n var effectTypes = {\n TRANSFORM_EFFECT: 'transformEFfect'\n };\n\n function TransformElement() {}\n\n TransformElement.prototype = {\n initTransform: function initTransform() {\n var mat = new Matrix();\n this.finalTransform = {\n mProp: this.data.ks ? TransformPropertyFactory.getTransformProperty(this, this.data.ks, this) : {\n o: 0\n },\n _matMdf: false,\n _localMatMdf: false,\n _opMdf: false,\n mat: mat,\n localMat: mat,\n localOpacity: 1\n };\n\n if (this.data.ao) {\n this.finalTransform.mProp.autoOriented = true;\n } // TODO: check TYPE 11: Guided elements\n\n\n if (this.data.ty !== 11) {// this.createElements();\n }\n },\n renderTransform: function renderTransform() {\n this.finalTransform._opMdf = this.finalTransform.mProp.o._mdf || this._isFirstFrame;\n this.finalTransform._matMdf = this.finalTransform.mProp._mdf || this._isFirstFrame;\n\n if (this.hierarchy) {\n var mat;\n var finalMat = this.finalTransform.mat;\n var i = 0;\n var len = this.hierarchy.length; // Checking if any of the transformation matrices in the hierarchy chain has changed.\n\n if (!this.finalTransform._matMdf) {\n while (i < len) {\n if (this.hierarchy[i].finalTransform.mProp._mdf) {\n this.finalTransform._matMdf = true;\n break;\n }\n\n i += 1;\n }\n }\n\n if (this.finalTransform._matMdf) {\n mat = this.finalTransform.mProp.v.props;\n finalMat.cloneFromProps(mat);\n\n for (i = 0; i < len; i += 1) {\n finalMat.multiply(this.hierarchy[i].finalTransform.mProp.v);\n }\n }\n }\n\n if (this.finalTransform._matMdf) {\n this.finalTransform._localMatMdf = this.finalTransform._matMdf;\n }\n\n if (this.finalTransform._opMdf) {\n this.finalTransform.localOpacity = this.finalTransform.mProp.o.v;\n }\n },\n renderLocalTransform: function renderLocalTransform() {\n if (this.localTransforms) {\n var i = 0;\n var len = this.localTransforms.length;\n this.finalTransform._localMatMdf = this.finalTransform._matMdf;\n\n if (!this.finalTransform._localMatMdf || !this.finalTransform._opMdf) {\n while (i < len) {\n if (this.localTransforms[i]._mdf) {\n this.finalTransform._localMatMdf = true;\n }\n\n if (this.localTransforms[i]._opMdf && !this.finalTransform._opMdf) {\n this.finalTransform.localOpacity = this.finalTransform.mProp.o.v;\n this.finalTransform._opMdf = true;\n }\n\n i += 1;\n }\n }\n\n if (this.finalTransform._localMatMdf) {\n var localMat = this.finalTransform.localMat;\n this.localTransforms[0].matrix.clone(localMat);\n\n for (i = 1; i < len; i += 1) {\n var lmat = this.localTransforms[i].matrix;\n localMat.multiply(lmat);\n }\n\n localMat.multiply(this.finalTransform.mat);\n }\n\n if (this.finalTransform._opMdf) {\n var localOp = this.finalTransform.localOpacity;\n\n for (i = 0; i < len; i += 1) {\n localOp *= this.localTransforms[i].opacity * 0.01;\n }\n\n this.finalTransform.localOpacity = localOp;\n }\n }\n },\n searchEffectTransforms: function searchEffectTransforms() {\n if (this.renderableEffectsManager) {\n var transformEffects = this.renderableEffectsManager.getEffects(effectTypes.TRANSFORM_EFFECT);\n\n if (transformEffects.length) {\n this.localTransforms = [];\n this.finalTransform.localMat = new Matrix();\n var i = 0;\n var len = transformEffects.length;\n\n for (i = 0; i < len; i += 1) {\n this.localTransforms.push(transformEffects[i]);\n }\n }\n }\n },\n globalToLocal: function globalToLocal(pt) {\n var transforms = [];\n transforms.push(this.finalTransform);\n var flag = true;\n var comp = this.comp;\n\n while (flag) {\n if (comp.finalTransform) {\n if (comp.data.hasMask) {\n transforms.splice(0, 0, comp.finalTransform);\n }\n\n comp = comp.comp;\n } else {\n flag = false;\n }\n }\n\n var i;\n var len = transforms.length;\n var ptNew;\n\n for (i = 0; i < len; i += 1) {\n ptNew = transforms[i].mat.applyToPointArray(0, 0, 0); // ptNew = transforms[i].mat.applyToPointArray(pt[0],pt[1],pt[2]);\n\n pt = [pt[0] - ptNew[0], pt[1] - ptNew[1], 0];\n }\n\n return pt;\n },\n mHelper: new Matrix()\n };\n\n function MaskElement(data, element, globalData) {\n this.data = data;\n this.element = element;\n this.globalData = globalData;\n this.storedData = [];\n this.masksProperties = this.data.masksProperties || [];\n this.maskElement = null;\n var defs = this.globalData.defs;\n var i;\n var len = this.masksProperties ? this.masksProperties.length : 0;\n this.viewData = createSizedArray(len);\n this.solidPath = '';\n var path;\n var properties = this.masksProperties;\n var count = 0;\n var currentMasks = [];\n var j;\n var jLen;\n var layerId = createElementID();\n var rect;\n var expansor;\n var feMorph;\n var x;\n var maskType = 'clipPath';\n var maskRef = 'clip-path';\n\n for (i = 0; i < len; i += 1) {\n if (properties[i].mode !== 'a' && properties[i].mode !== 'n' || properties[i].inv || properties[i].o.k !== 100 || properties[i].o.x) {\n maskType = 'mask';\n maskRef = 'mask';\n }\n\n if ((properties[i].mode === 's' || properties[i].mode === 'i') && count === 0) {\n rect = createNS('rect');\n rect.setAttribute('fill', '#ffffff');\n rect.setAttribute('width', this.element.comp.data.w || 0);\n rect.setAttribute('height', this.element.comp.data.h || 0);\n currentMasks.push(rect);\n } else {\n rect = null;\n }\n\n path = createNS('path');\n\n if (properties[i].mode === 'n') {\n // TODO move this to a factory or to a constructor\n this.viewData[i] = {\n op: PropertyFactory.getProp(this.element, properties[i].o, 0, 0.01, this.element),\n prop: ShapePropertyFactory.getShapeProp(this.element, properties[i], 3),\n elem: path,\n lastPath: ''\n };\n defs.appendChild(path);\n } else {\n count += 1;\n path.setAttribute('fill', properties[i].mode === 's' ? '#000000' : '#ffffff');\n path.setAttribute('clip-rule', 'nonzero');\n var filterID;\n\n if (properties[i].x.k !== 0) {\n maskType = 'mask';\n maskRef = 'mask';\n x = PropertyFactory.getProp(this.element, properties[i].x, 0, null, this.element);\n filterID = createElementID();\n expansor = createNS('filter');\n expansor.setAttribute('id', filterID);\n feMorph = createNS('feMorphology');\n feMorph.setAttribute('operator', 'erode');\n feMorph.setAttribute('in', 'SourceGraphic');\n feMorph.setAttribute('radius', '0');\n expansor.appendChild(feMorph);\n defs.appendChild(expansor);\n path.setAttribute('stroke', properties[i].mode === 's' ? '#000000' : '#ffffff');\n } else {\n feMorph = null;\n x = null;\n } // TODO move this to a factory or to a constructor\n\n\n this.storedData[i] = {\n elem: path,\n x: x,\n expan: feMorph,\n lastPath: '',\n lastOperator: '',\n filterId: filterID,\n lastRadius: 0\n };\n\n if (properties[i].mode === 'i') {\n jLen = currentMasks.length;\n var g = createNS('g');\n\n for (j = 0; j < jLen; j += 1) {\n g.appendChild(currentMasks[j]);\n }\n\n var mask = createNS('mask');\n mask.setAttribute('mask-type', 'alpha');\n mask.setAttribute('id', layerId + '_' + count);\n mask.appendChild(path);\n defs.appendChild(mask);\n g.setAttribute('mask', 'url(' + getLocationHref() + '#' + layerId + '_' + count + ')');\n currentMasks.length = 0;\n currentMasks.push(g);\n } else {\n currentMasks.push(path);\n }\n\n if (properties[i].inv && !this.solidPath) {\n this.solidPath = this.createLayerSolidPath();\n } // TODO move this to a factory or to a constructor\n\n\n this.viewData[i] = {\n elem: path,\n lastPath: '',\n op: PropertyFactory.getProp(this.element, properties[i].o, 0, 0.01, this.element),\n prop: ShapePropertyFactory.getShapeProp(this.element, properties[i], 3),\n invRect: rect\n };\n\n if (!this.viewData[i].prop.k) {\n this.drawPath(properties[i], this.viewData[i].prop.v, this.viewData[i]);\n }\n }\n }\n\n this.maskElement = createNS(maskType);\n len = currentMasks.length;\n\n for (i = 0; i < len; i += 1) {\n this.maskElement.appendChild(currentMasks[i]);\n }\n\n if (count > 0) {\n this.maskElement.setAttribute('id', layerId);\n this.element.maskedElement.setAttribute(maskRef, 'url(' + getLocationHref() + '#' + layerId + ')');\n defs.appendChild(this.maskElement);\n }\n\n if (this.viewData.length) {\n this.element.addRenderableComponent(this);\n }\n }\n\n MaskElement.prototype.getMaskProperty = function (pos) {\n return this.viewData[pos].prop;\n };\n\n MaskElement.prototype.renderFrame = function (isFirstFrame) {\n var finalMat = this.element.finalTransform.mat;\n var i;\n var len = this.masksProperties.length;\n\n for (i = 0; i < len; i += 1) {\n if (this.viewData[i].prop._mdf || isFirstFrame) {\n this.drawPath(this.masksProperties[i], this.viewData[i].prop.v, this.viewData[i]);\n }\n\n if (this.viewData[i].op._mdf || isFirstFrame) {\n this.viewData[i].elem.setAttribute('fill-opacity', this.viewData[i].op.v);\n }\n\n if (this.masksProperties[i].mode !== 'n') {\n if (this.viewData[i].invRect && (this.element.finalTransform.mProp._mdf || isFirstFrame)) {\n this.viewData[i].invRect.setAttribute('transform', finalMat.getInverseMatrix().to2dCSS());\n }\n\n if (this.storedData[i].x && (this.storedData[i].x._mdf || isFirstFrame)) {\n var feMorph = this.storedData[i].expan;\n\n if (this.storedData[i].x.v < 0) {\n if (this.storedData[i].lastOperator !== 'erode') {\n this.storedData[i].lastOperator = 'erode';\n this.storedData[i].elem.setAttribute('filter', 'url(' + getLocationHref() + '#' + this.storedData[i].filterId + ')');\n }\n\n feMorph.setAttribute('radius', -this.storedData[i].x.v);\n } else {\n if (this.storedData[i].lastOperator !== 'dilate') {\n this.storedData[i].lastOperator = 'dilate';\n this.storedData[i].elem.setAttribute('filter', null);\n }\n\n this.storedData[i].elem.setAttribute('stroke-width', this.storedData[i].x.v * 2);\n }\n }\n }\n }\n };\n\n MaskElement.prototype.getMaskelement = function () {\n return this.maskElement;\n };\n\n MaskElement.prototype.createLayerSolidPath = function () {\n var path = 'M0,0 ';\n path += ' h' + this.globalData.compSize.w;\n path += ' v' + this.globalData.compSize.h;\n path += ' h-' + this.globalData.compSize.w;\n path += ' v-' + this.globalData.compSize.h + ' ';\n return path;\n };\n\n MaskElement.prototype.drawPath = function (pathData, pathNodes, viewData) {\n var pathString = ' M' + pathNodes.v[0][0] + ',' + pathNodes.v[0][1];\n var i;\n var len;\n len = pathNodes._length;\n\n for (i = 1; i < len; i += 1) {\n // pathString += \" C\"+pathNodes.o[i-1][0]+','+pathNodes.o[i-1][1] + \" \"+pathNodes.i[i][0]+','+pathNodes.i[i][1] + \" \"+pathNodes.v[i][0]+','+pathNodes.v[i][1];\n pathString += ' C' + pathNodes.o[i - 1][0] + ',' + pathNodes.o[i - 1][1] + ' ' + pathNodes.i[i][0] + ',' + pathNodes.i[i][1] + ' ' + pathNodes.v[i][0] + ',' + pathNodes.v[i][1];\n } // pathString += \" C\"+pathNodes.o[i-1][0]+','+pathNodes.o[i-1][1] + \" \"+pathNodes.i[0][0]+','+pathNodes.i[0][1] + \" \"+pathNodes.v[0][0]+','+pathNodes.v[0][1];\n\n\n if (pathNodes.c && len > 1) {\n pathString += ' C' + pathNodes.o[i - 1][0] + ',' + pathNodes.o[i - 1][1] + ' ' + pathNodes.i[0][0] + ',' + pathNodes.i[0][1] + ' ' + pathNodes.v[0][0] + ',' + pathNodes.v[0][1];\n } // pathNodes.__renderedString = pathString;\n\n\n if (viewData.lastPath !== pathString) {\n var pathShapeValue = '';\n\n if (viewData.elem) {\n if (pathNodes.c) {\n pathShapeValue = pathData.inv ? this.solidPath + pathString : pathString;\n }\n\n viewData.elem.setAttribute('d', pathShapeValue);\n }\n\n viewData.lastPath = pathString;\n }\n };\n\n MaskElement.prototype.destroy = function () {\n this.element = null;\n this.globalData = null;\n this.maskElement = null;\n this.data = null;\n this.masksProperties = null;\n };\n\n var filtersFactory = function () {\n var ob = {};\n ob.createFilter = createFilter;\n ob.createAlphaToLuminanceFilter = createAlphaToLuminanceFilter;\n\n function createFilter(filId, skipCoordinates) {\n var fil = createNS('filter');\n fil.setAttribute('id', filId);\n\n if (skipCoordinates !== true) {\n fil.setAttribute('filterUnits', 'objectBoundingBox');\n fil.setAttribute('x', '0%');\n fil.setAttribute('y', '0%');\n fil.setAttribute('width', '100%');\n fil.setAttribute('height', '100%');\n }\n\n return fil;\n }\n\n function createAlphaToLuminanceFilter() {\n var feColorMatrix = createNS('feColorMatrix');\n feColorMatrix.setAttribute('type', 'matrix');\n feColorMatrix.setAttribute('color-interpolation-filters', 'sRGB');\n feColorMatrix.setAttribute('values', '0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1');\n return feColorMatrix;\n }\n\n return ob;\n }();\n\n var featureSupport = function () {\n var ob = {\n maskType: true,\n svgLumaHidden: true,\n offscreenCanvas: typeof OffscreenCanvas !== 'undefined'\n };\n\n if (/MSIE 10/i.test(navigator.userAgent) || /MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent) || /Edge\\/\\d./i.test(navigator.userAgent)) {\n ob.maskType = false;\n }\n\n if (/firefox/i.test(navigator.userAgent)) {\n ob.svgLumaHidden = false;\n }\n\n return ob;\n }();\n\n var registeredEffects$1 = {};\n var idPrefix = 'filter_result_';\n\n function SVGEffects(elem) {\n var i;\n var source = 'SourceGraphic';\n var len = elem.data.ef ? elem.data.ef.length : 0;\n var filId = createElementID();\n var fil = filtersFactory.createFilter(filId, true);\n var count = 0;\n this.filters = [];\n var filterManager;\n\n for (i = 0; i < len; i += 1) {\n filterManager = null;\n var type = elem.data.ef[i].ty;\n\n if (registeredEffects$1[type]) {\n var Effect = registeredEffects$1[type].effect;\n filterManager = new Effect(fil, elem.effectsManager.effectElements[i], elem, idPrefix + count, source);\n source = idPrefix + count;\n\n if (registeredEffects$1[type].countsAsEffect) {\n count += 1;\n }\n }\n\n if (filterManager) {\n this.filters.push(filterManager);\n }\n }\n\n if (count) {\n elem.globalData.defs.appendChild(fil);\n elem.layerElement.setAttribute('filter', 'url(' + getLocationHref() + '#' + filId + ')');\n }\n\n if (this.filters.length) {\n elem.addRenderableComponent(this);\n }\n }\n\n SVGEffects.prototype.renderFrame = function (_isFirstFrame) {\n var i;\n var len = this.filters.length;\n\n for (i = 0; i < len; i += 1) {\n this.filters[i].renderFrame(_isFirstFrame);\n }\n };\n\n SVGEffects.prototype.getEffects = function (type) {\n var i;\n var len = this.filters.length;\n var effects = [];\n\n for (i = 0; i < len; i += 1) {\n if (this.filters[i].type === type) {\n effects.push(this.filters[i]);\n }\n }\n\n return effects;\n };\n\n function registerEffect$1(id, effect, countsAsEffect) {\n registeredEffects$1[id] = {\n effect: effect,\n countsAsEffect: countsAsEffect\n };\n }\n\n function SVGBaseElement() {}\n\n SVGBaseElement.prototype = {\n initRendererElement: function initRendererElement() {\n this.layerElement = createNS('g');\n },\n createContainerElements: function createContainerElements() {\n this.matteElement = createNS('g');\n this.transformedElement = this.layerElement;\n this.maskedElement = this.layerElement;\n this._sizeChanged = false;\n var layerElementParent = null; // If this layer acts as a mask for the following layer\n\n if (this.data.td) {\n this.matteMasks = {};\n var gg = createNS('g');\n gg.setAttribute('id', this.layerId);\n gg.appendChild(this.layerElement);\n layerElementParent = gg;\n this.globalData.defs.appendChild(gg);\n } else if (this.data.tt) {\n this.matteElement.appendChild(this.layerElement);\n layerElementParent = this.matteElement;\n this.baseElement = this.matteElement;\n } else {\n this.baseElement = this.layerElement;\n }\n\n if (this.data.ln) {\n this.layerElement.setAttribute('id', this.data.ln);\n }\n\n if (this.data.cl) {\n this.layerElement.setAttribute('class', this.data.cl);\n } // Clipping compositions to hide content that exceeds boundaries. If collapsed transformations is on, component should not be clipped\n\n\n if (this.data.ty === 0 && !this.data.hd) {\n var cp = createNS('clipPath');\n var pt = createNS('path');\n pt.setAttribute('d', 'M0,0 L' + this.data.w + ',0 L' + this.data.w + ',' + this.data.h + ' L0,' + this.data.h + 'z');\n var clipId = createElementID();\n cp.setAttribute('id', clipId);\n cp.appendChild(pt);\n this.globalData.defs.appendChild(cp);\n\n if (this.checkMasks()) {\n var cpGroup = createNS('g');\n cpGroup.setAttribute('clip-path', 'url(' + getLocationHref() + '#' + clipId + ')');\n cpGroup.appendChild(this.layerElement);\n this.transformedElement = cpGroup;\n\n if (layerElementParent) {\n layerElementParent.appendChild(this.transformedElement);\n } else {\n this.baseElement = this.transformedElement;\n }\n } else {\n this.layerElement.setAttribute('clip-path', 'url(' + getLocationHref() + '#' + clipId + ')');\n }\n }\n\n if (this.data.bm !== 0) {\n this.setBlendMode();\n }\n },\n renderElement: function renderElement() {\n if (this.finalTransform._localMatMdf) {\n this.transformedElement.setAttribute('transform', this.finalTransform.localMat.to2dCSS());\n }\n\n if (this.finalTransform._opMdf) {\n this.transformedElement.setAttribute('opacity', this.finalTransform.localOpacity);\n }\n },\n destroyBaseElement: function destroyBaseElement() {\n this.layerElement = null;\n this.matteElement = null;\n this.maskManager.destroy();\n },\n getBaseElement: function getBaseElement() {\n if (this.data.hd) {\n return null;\n }\n\n return this.baseElement;\n },\n createRenderableComponents: function createRenderableComponents() {\n this.maskManager = new MaskElement(this.data, this, this.globalData);\n this.renderableEffectsManager = new SVGEffects(this);\n this.searchEffectTransforms();\n },\n getMatte: function getMatte(matteType) {\n // This should not be a common case. But for backward compatibility, we'll create the matte object.\n // It solves animations that have two consecutive layers marked as matte masks.\n // Which is an undefined behavior in AE.\n if (!this.matteMasks) {\n this.matteMasks = {};\n }\n\n if (!this.matteMasks[matteType]) {\n var id = this.layerId + '_' + matteType;\n var filId;\n var fil;\n var useElement;\n var gg;\n\n if (matteType === 1 || matteType === 3) {\n var masker = createNS('mask');\n masker.setAttribute('id', id);\n masker.setAttribute('mask-type', matteType === 3 ? 'luminance' : 'alpha');\n useElement = createNS('use');\n useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#' + this.layerId);\n masker.appendChild(useElement);\n this.globalData.defs.appendChild(masker);\n\n if (!featureSupport.maskType && matteType === 1) {\n masker.setAttribute('mask-type', 'luminance');\n filId = createElementID();\n fil = filtersFactory.createFilter(filId);\n this.globalData.defs.appendChild(fil);\n fil.appendChild(filtersFactory.createAlphaToLuminanceFilter());\n gg = createNS('g');\n gg.appendChild(useElement);\n masker.appendChild(gg);\n gg.setAttribute('filter', 'url(' + getLocationHref() + '#' + filId + ')');\n }\n } else if (matteType === 2) {\n var maskGroup = createNS('mask');\n maskGroup.setAttribute('id', id);\n maskGroup.setAttribute('mask-type', 'alpha');\n var maskGrouper = createNS('g');\n maskGroup.appendChild(maskGrouper);\n filId = createElementID();\n fil = filtersFactory.createFilter(filId); /// /\n\n var feCTr = createNS('feComponentTransfer');\n feCTr.setAttribute('in', 'SourceGraphic');\n fil.appendChild(feCTr);\n var feFunc = createNS('feFuncA');\n feFunc.setAttribute('type', 'table');\n feFunc.setAttribute('tableValues', '1.0 0.0');\n feCTr.appendChild(feFunc); /// /\n\n this.globalData.defs.appendChild(fil);\n var alphaRect = createNS('rect');\n alphaRect.setAttribute('width', this.comp.data.w);\n alphaRect.setAttribute('height', this.comp.data.h);\n alphaRect.setAttribute('x', '0');\n alphaRect.setAttribute('y', '0');\n alphaRect.setAttribute('fill', '#ffffff');\n alphaRect.setAttribute('opacity', '0');\n maskGrouper.setAttribute('filter', 'url(' + getLocationHref() + '#' + filId + ')');\n maskGrouper.appendChild(alphaRect);\n useElement = createNS('use');\n useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#' + this.layerId);\n maskGrouper.appendChild(useElement);\n\n if (!featureSupport.maskType) {\n maskGroup.setAttribute('mask-type', 'luminance');\n fil.appendChild(filtersFactory.createAlphaToLuminanceFilter());\n gg = createNS('g');\n maskGrouper.appendChild(alphaRect);\n gg.appendChild(this.layerElement);\n maskGrouper.appendChild(gg);\n }\n\n this.globalData.defs.appendChild(maskGroup);\n }\n\n this.matteMasks[matteType] = id;\n }\n\n return this.matteMasks[matteType];\n },\n setMatte: function setMatte(id) {\n if (!this.matteElement) {\n return;\n }\n\n this.matteElement.setAttribute('mask', 'url(' + getLocationHref() + '#' + id + ')');\n }\n };\n\n /**\r\n * @file\r\n * Handles AE's layer parenting property.\r\n *\r\n */\n function HierarchyElement() {}\n\n HierarchyElement.prototype = {\n /**\r\n * @function\r\n * Initializes hierarchy properties\r\n *\r\n */\n initHierarchy: function initHierarchy() {\n // element's parent list\n this.hierarchy = []; // if element is parent of another layer _isParent will be true\n\n this._isParent = false;\n this.checkParenting();\n },\n\n /**\r\n * @function\r\n * Sets layer's hierarchy.\r\n * @param {array} hierarch\r\n * layer's parent list\r\n *\r\n */\n setHierarchy: function setHierarchy(hierarchy) {\n this.hierarchy = hierarchy;\n },\n\n /**\r\n * @function\r\n * Sets layer as parent.\r\n *\r\n */\n setAsParent: function setAsParent() {\n this._isParent = true;\n },\n\n /**\r\n * @function\r\n * Searches layer's parenting chain\r\n *\r\n */\n checkParenting: function checkParenting() {\n if (this.data.parent !== undefined) {\n this.comp.buildElementParenting(this, this.data.parent, []);\n }\n }\n };\n\n function RenderableDOMElement() {}\n\n (function () {\n var _prototype = {\n initElement: function initElement(data, globalData, comp) {\n this.initFrame();\n this.initBaseData(data, globalData, comp);\n this.initTransform(data, globalData, comp);\n this.initHierarchy();\n this.initRenderable();\n this.initRendererElement();\n this.createContainerElements();\n this.createRenderableComponents();\n this.createContent();\n this.hide();\n },\n hide: function hide() {\n // console.log('HIDE', this);\n if (!this.hidden && (!this.isInRange || this.isTransparent)) {\n var elem = this.baseElement || this.layerElement;\n elem.style.display = 'none';\n this.hidden = true;\n }\n },\n show: function show() {\n // console.log('SHOW', this);\n if (this.isInRange && !this.isTransparent) {\n if (!this.data.hd) {\n var elem = this.baseElement || this.layerElement;\n elem.style.display = 'block';\n }\n\n this.hidden = false;\n this._isFirstFrame = true;\n }\n },\n renderFrame: function renderFrame() {\n // If it is exported as hidden (data.hd === true) no need to render\n // If it is not visible no need to render\n if (this.data.hd || this.hidden) {\n return;\n }\n\n this.renderTransform();\n this.renderRenderable();\n this.renderLocalTransform();\n this.renderElement();\n this.renderInnerContent();\n\n if (this._isFirstFrame) {\n this._isFirstFrame = false;\n }\n },\n renderInnerContent: function renderInnerContent() {},\n prepareFrame: function prepareFrame(num) {\n this._mdf = false;\n this.prepareRenderableFrame(num);\n this.prepareProperties(num, this.isInRange);\n this.checkTransparency();\n },\n destroy: function destroy() {\n this.innerElem = null;\n this.destroyBaseElement();\n }\n };\n extendPrototype([RenderableElement, createProxyFunction(_prototype)], RenderableDOMElement);\n })();\n\n function IImageElement(data, globalData, comp) {\n this.assetData = globalData.getAssetData(data.refId);\n\n if (this.assetData && this.assetData.sid) {\n this.assetData = globalData.slotManager.getProp(this.assetData);\n }\n\n this.initElement(data, globalData, comp);\n this.sourceRect = {\n top: 0,\n left: 0,\n width: this.assetData.w,\n height: this.assetData.h\n };\n }\n\n extendPrototype([BaseElement, TransformElement, SVGBaseElement, HierarchyElement, FrameElement, RenderableDOMElement], IImageElement);\n\n IImageElement.prototype.createContent = function () {\n var assetPath = this.globalData.getAssetsPath(this.assetData);\n this.innerElem = createNS('image');\n this.innerElem.setAttribute('width', this.assetData.w + 'px');\n this.innerElem.setAttribute('height', this.assetData.h + 'px');\n this.innerElem.setAttribute('preserveAspectRatio', this.assetData.pr || this.globalData.renderConfig.imagePreserveAspectRatio);\n this.innerElem.setAttributeNS('http://www.w3.org/1999/xlink', 'href', assetPath);\n this.layerElement.appendChild(this.innerElem);\n };\n\n IImageElement.prototype.sourceRectAtTime = function () {\n return this.sourceRect;\n };\n\n function ProcessedElement(element, position) {\n this.elem = element;\n this.pos = position;\n }\n\n function IShapeElement() {}\n\n IShapeElement.prototype = {\n addShapeToModifiers: function addShapeToModifiers(data) {\n var i;\n var len = this.shapeModifiers.length;\n\n for (i = 0; i < len; i += 1) {\n this.shapeModifiers[i].addShape(data);\n }\n },\n isShapeInAnimatedModifiers: function isShapeInAnimatedModifiers(data) {\n var i = 0;\n var len = this.shapeModifiers.length;\n\n while (i < len) {\n if (this.shapeModifiers[i].isAnimatedWithShape(data)) {\n return true;\n }\n }\n\n return false;\n },\n renderModifiers: function renderModifiers() {\n if (!this.shapeModifiers.length) {\n return;\n }\n\n var i;\n var len = this.shapes.length;\n\n for (i = 0; i < len; i += 1) {\n this.shapes[i].sh.reset();\n }\n\n len = this.shapeModifiers.length;\n var shouldBreakProcess;\n\n for (i = len - 1; i >= 0; i -= 1) {\n shouldBreakProcess = this.shapeModifiers[i].processShapes(this._isFirstFrame); // workaround to fix cases where a repeater resets the shape so the following processes get called twice\n // TODO: find a better solution for this\n\n if (shouldBreakProcess) {\n break;\n }\n }\n },\n searchProcessedElement: function searchProcessedElement(elem) {\n var elements = this.processedElements;\n var i = 0;\n var len = elements.length;\n\n while (i < len) {\n if (elements[i].elem === elem) {\n return elements[i].pos;\n }\n\n i += 1;\n }\n\n return 0;\n },\n addProcessedElement: function addProcessedElement(elem, pos) {\n var elements = this.processedElements;\n var i = elements.length;\n\n while (i) {\n i -= 1;\n\n if (elements[i].elem === elem) {\n elements[i].pos = pos;\n return;\n }\n }\n\n elements.push(new ProcessedElement(elem, pos));\n },\n prepareFrame: function prepareFrame(num) {\n this.prepareRenderableFrame(num);\n this.prepareProperties(num, this.isInRange);\n }\n };\n\n var lineCapEnum = {\n 1: 'butt',\n 2: 'round',\n 3: 'square'\n };\n var lineJoinEnum = {\n 1: 'miter',\n 2: 'round',\n 3: 'bevel'\n };\n\n function SVGShapeData(transformers, level, shape) {\n this.caches = [];\n this.styles = [];\n this.transformers = transformers;\n this.lStr = '';\n this.sh = shape;\n this.lvl = level; // TODO find if there are some cases where _isAnimated can be false.\n // For now, since shapes add up with other shapes. They have to be calculated every time.\n // One way of finding out is checking if all styles associated to this shape depend only of this shape\n\n this._isAnimated = !!shape.k; // TODO: commenting this for now since all shapes are animated\n\n var i = 0;\n var len = transformers.length;\n\n while (i < len) {\n if (transformers[i].mProps.dynamicProperties.length) {\n this._isAnimated = true;\n break;\n }\n\n i += 1;\n }\n }\n\n SVGShapeData.prototype.setAsAnimated = function () {\n this._isAnimated = true;\n };\n\n function SVGStyleData(data, level) {\n this.data = data;\n this.type = data.ty;\n this.d = '';\n this.lvl = level;\n this._mdf = false;\n this.closed = data.hd === true;\n this.pElem = createNS('path');\n this.msElem = null;\n }\n\n SVGStyleData.prototype.reset = function () {\n this.d = '';\n this._mdf = false;\n };\n\n function DashProperty(elem, data, renderer, container) {\n this.elem = elem;\n this.frameId = -1;\n this.dataProps = createSizedArray(data.length);\n this.renderer = renderer;\n this.k = false;\n this.dashStr = '';\n this.dashArray = createTypedArray('float32', data.length ? data.length - 1 : 0);\n this.dashoffset = createTypedArray('float32', 1);\n this.initDynamicPropertyContainer(container);\n var i;\n var len = data.length || 0;\n var prop;\n\n for (i = 0; i < len; i += 1) {\n prop = PropertyFactory.getProp(elem, data[i].v, 0, 0, this);\n this.k = prop.k || this.k;\n this.dataProps[i] = {\n n: data[i].n,\n p: prop\n };\n }\n\n if (!this.k) {\n this.getValue(true);\n }\n\n this._isAnimated = this.k;\n }\n\n DashProperty.prototype.getValue = function (forceRender) {\n if (this.elem.globalData.frameId === this.frameId && !forceRender) {\n return;\n }\n\n this.frameId = this.elem.globalData.frameId;\n this.iterateDynamicProperties();\n this._mdf = this._mdf || forceRender;\n\n if (this._mdf) {\n var i = 0;\n var len = this.dataProps.length;\n\n if (this.renderer === 'svg') {\n this.dashStr = '';\n }\n\n for (i = 0; i < len; i += 1) {\n if (this.dataProps[i].n !== 'o') {\n if (this.renderer === 'svg') {\n this.dashStr += ' ' + this.dataProps[i].p.v;\n } else {\n this.dashArray[i] = this.dataProps[i].p.v;\n }\n } else {\n this.dashoffset[0] = this.dataProps[i].p.v;\n }\n }\n }\n };\n\n extendPrototype([DynamicPropertyContainer], DashProperty);\n\n function SVGStrokeStyleData(elem, data, styleOb) {\n this.initDynamicPropertyContainer(elem);\n this.getValue = this.iterateDynamicProperties;\n this.o = PropertyFactory.getProp(elem, data.o, 0, 0.01, this);\n this.w = PropertyFactory.getProp(elem, data.w, 0, null, this);\n this.d = new DashProperty(elem, data.d || {}, 'svg', this);\n this.c = PropertyFactory.getProp(elem, data.c, 1, 255, this);\n this.style = styleOb;\n this._isAnimated = !!this._isAnimated;\n }\n\n extendPrototype([DynamicPropertyContainer], SVGStrokeStyleData);\n\n function SVGFillStyleData(elem, data, styleOb) {\n this.initDynamicPropertyContainer(elem);\n this.getValue = this.iterateDynamicProperties;\n this.o = PropertyFactory.getProp(elem, data.o, 0, 0.01, this);\n this.c = PropertyFactory.getProp(elem, data.c, 1, 255, this);\n this.style = styleOb;\n }\n\n extendPrototype([DynamicPropertyContainer], SVGFillStyleData);\n\n function SVGNoStyleData(elem, data, styleOb) {\n this.initDynamicPropertyContainer(elem);\n this.getValue = this.iterateDynamicProperties;\n this.style = styleOb;\n }\n\n extendPrototype([DynamicPropertyContainer], SVGNoStyleData);\n\n function GradientProperty(elem, data, container) {\n this.data = data;\n this.c = createTypedArray('uint8c', data.p * 4);\n var cLength = data.k.k[0].s ? data.k.k[0].s.length - data.p * 4 : data.k.k.length - data.p * 4;\n this.o = createTypedArray('float32', cLength);\n this._cmdf = false;\n this._omdf = false;\n this._collapsable = this.checkCollapsable();\n this._hasOpacity = cLength;\n this.initDynamicPropertyContainer(container);\n this.prop = PropertyFactory.getProp(elem, data.k, 1, null, this);\n this.k = this.prop.k;\n this.getValue(true);\n }\n\n GradientProperty.prototype.comparePoints = function (values, points) {\n var i = 0;\n var len = this.o.length / 2;\n var diff;\n\n while (i < len) {\n diff = Math.abs(values[i * 4] - values[points * 4 + i * 2]);\n\n if (diff > 0.01) {\n return false;\n }\n\n i += 1;\n }\n\n return true;\n };\n\n GradientProperty.prototype.checkCollapsable = function () {\n if (this.o.length / 2 !== this.c.length / 4) {\n return false;\n }\n\n if (this.data.k.k[0].s) {\n var i = 0;\n var len = this.data.k.k.length;\n\n while (i < len) {\n if (!this.comparePoints(this.data.k.k[i].s, this.data.p)) {\n return false;\n }\n\n i += 1;\n }\n } else if (!this.comparePoints(this.data.k.k, this.data.p)) {\n return false;\n }\n\n return true;\n };\n\n GradientProperty.prototype.getValue = function (forceRender) {\n this.prop.getValue();\n this._mdf = false;\n this._cmdf = false;\n this._omdf = false;\n\n if (this.prop._mdf || forceRender) {\n var i;\n var len = this.data.p * 4;\n var mult;\n var val;\n\n for (i = 0; i < len; i += 1) {\n mult = i % 4 === 0 ? 100 : 255;\n val = Math.round(this.prop.v[i] * mult);\n\n if (this.c[i] !== val) {\n this.c[i] = val;\n this._cmdf = !forceRender;\n }\n }\n\n if (this.o.length) {\n len = this.prop.v.length;\n\n for (i = this.data.p * 4; i < len; i += 1) {\n mult = i % 2 === 0 ? 100 : 1;\n val = i % 2 === 0 ? Math.round(this.prop.v[i] * 100) : this.prop.v[i];\n\n if (this.o[i - this.data.p * 4] !== val) {\n this.o[i - this.data.p * 4] = val;\n this._omdf = !forceRender;\n }\n }\n }\n\n this._mdf = !forceRender;\n }\n };\n\n extendPrototype([DynamicPropertyContainer], GradientProperty);\n\n function SVGGradientFillStyleData(elem, data, styleOb) {\n this.initDynamicPropertyContainer(elem);\n this.getValue = this.iterateDynamicProperties;\n this.initGradientData(elem, data, styleOb);\n }\n\n SVGGradientFillStyleData.prototype.initGradientData = function (elem, data, styleOb) {\n this.o = PropertyFactory.getProp(elem, data.o, 0, 0.01, this);\n this.s = PropertyFactory.getProp(elem, data.s, 1, null, this);\n this.e = PropertyFactory.getProp(elem, data.e, 1, null, this);\n this.h = PropertyFactory.getProp(elem, data.h || {\n k: 0\n }, 0, 0.01, this);\n this.a = PropertyFactory.getProp(elem, data.a || {\n k: 0\n }, 0, degToRads, this);\n this.g = new GradientProperty(elem, data.g, this);\n this.style = styleOb;\n this.stops = [];\n this.setGradientData(styleOb.pElem, data);\n this.setGradientOpacity(data, styleOb);\n this._isAnimated = !!this._isAnimated;\n };\n\n SVGGradientFillStyleData.prototype.setGradientData = function (pathElement, data) {\n var gradientId = createElementID();\n var gfill = createNS(data.t === 1 ? 'linearGradient' : 'radialGradient');\n gfill.setAttribute('id', gradientId);\n gfill.setAttribute('spreadMethod', 'pad');\n gfill.setAttribute('gradientUnits', 'userSpaceOnUse');\n var stops = [];\n var stop;\n var j;\n var jLen;\n jLen = data.g.p * 4;\n\n for (j = 0; j < jLen; j += 4) {\n stop = createNS('stop');\n gfill.appendChild(stop);\n stops.push(stop);\n }\n\n pathElement.setAttribute(data.ty === 'gf' ? 'fill' : 'stroke', 'url(' + getLocationHref() + '#' + gradientId + ')');\n this.gf = gfill;\n this.cst = stops;\n };\n\n SVGGradientFillStyleData.prototype.setGradientOpacity = function (data, styleOb) {\n if (this.g._hasOpacity && !this.g._collapsable) {\n var stop;\n var j;\n var jLen;\n var mask = createNS('mask');\n var maskElement = createNS('path');\n mask.appendChild(maskElement);\n var opacityId = createElementID();\n var maskId = createElementID();\n mask.setAttribute('id', maskId);\n var opFill = createNS(data.t === 1 ? 'linearGradient' : 'radialGradient');\n opFill.setAttribute('id', opacityId);\n opFill.setAttribute('spreadMethod', 'pad');\n opFill.setAttribute('gradientUnits', 'userSpaceOnUse');\n jLen = data.g.k.k[0].s ? data.g.k.k[0].s.length : data.g.k.k.length;\n var stops = this.stops;\n\n for (j = data.g.p * 4; j < jLen; j += 2) {\n stop = createNS('stop');\n stop.setAttribute('stop-color', 'rgb(255,255,255)');\n opFill.appendChild(stop);\n stops.push(stop);\n }\n\n maskElement.setAttribute(data.ty === 'gf' ? 'fill' : 'stroke', 'url(' + getLocationHref() + '#' + opacityId + ')');\n\n if (data.ty === 'gs') {\n maskElement.setAttribute('stroke-linecap', lineCapEnum[data.lc || 2]);\n maskElement.setAttribute('stroke-linejoin', lineJoinEnum[data.lj || 2]);\n\n if (data.lj === 1) {\n maskElement.setAttribute('stroke-miterlimit', data.ml);\n }\n }\n\n this.of = opFill;\n this.ms = mask;\n this.ost = stops;\n this.maskId = maskId;\n styleOb.msElem = maskElement;\n }\n };\n\n extendPrototype([DynamicPropertyContainer], SVGGradientFillStyleData);\n\n function SVGGradientStrokeStyleData(elem, data, styleOb) {\n this.initDynamicPropertyContainer(elem);\n this.getValue = this.iterateDynamicProperties;\n this.w = PropertyFactory.getProp(elem, data.w, 0, null, this);\n this.d = new DashProperty(elem, data.d || {}, 'svg', this);\n this.initGradientData(elem, data, styleOb);\n this._isAnimated = !!this._isAnimated;\n }\n\n extendPrototype([SVGGradientFillStyleData, DynamicPropertyContainer], SVGGradientStrokeStyleData);\n\n function ShapeGroupData() {\n this.it = [];\n this.prevViewData = [];\n this.gr = createNS('g');\n }\n\n function SVGTransformData(mProps, op, container) {\n this.transform = {\n mProps: mProps,\n op: op,\n container: container\n };\n this.elements = [];\n this._isAnimated = this.transform.mProps.dynamicProperties.length || this.transform.op.effectsSequence.length;\n }\n\n var buildShapeString = function buildShapeString(pathNodes, length, closed, mat) {\n if (length === 0) {\n return '';\n }\n\n var _o = pathNodes.o;\n var _i = pathNodes.i;\n var _v = pathNodes.v;\n var i;\n var shapeString = ' M' + mat.applyToPointStringified(_v[0][0], _v[0][1]);\n\n for (i = 1; i < length; i += 1) {\n shapeString += ' C' + mat.applyToPointStringified(_o[i - 1][0], _o[i - 1][1]) + ' ' + mat.applyToPointStringified(_i[i][0], _i[i][1]) + ' ' + mat.applyToPointStringified(_v[i][0], _v[i][1]);\n }\n\n if (closed && length) {\n shapeString += ' C' + mat.applyToPointStringified(_o[i - 1][0], _o[i - 1][1]) + ' ' + mat.applyToPointStringified(_i[0][0], _i[0][1]) + ' ' + mat.applyToPointStringified(_v[0][0], _v[0][1]);\n shapeString += 'z';\n }\n\n return shapeString;\n };\n\n var SVGElementsRenderer = function () {\n var _identityMatrix = new Matrix();\n\n var _matrixHelper = new Matrix();\n\n var ob = {\n createRenderFunction: createRenderFunction\n };\n\n function createRenderFunction(data) {\n switch (data.ty) {\n case 'fl':\n return renderFill;\n\n case 'gf':\n return renderGradient;\n\n case 'gs':\n return renderGradientStroke;\n\n case 'st':\n return renderStroke;\n\n case 'sh':\n case 'el':\n case 'rc':\n case 'sr':\n return renderPath;\n\n case 'tr':\n return renderContentTransform;\n\n case 'no':\n return renderNoop;\n\n default:\n return null;\n }\n }\n\n function renderContentTransform(styleData, itemData, isFirstFrame) {\n if (isFirstFrame || itemData.transform.op._mdf) {\n itemData.transform.container.setAttribute('opacity', itemData.transform.op.v);\n }\n\n if (isFirstFrame || itemData.transform.mProps._mdf) {\n itemData.transform.container.setAttribute('transform', itemData.transform.mProps.v.to2dCSS());\n }\n }\n\n function renderNoop() {}\n\n function renderPath(styleData, itemData, isFirstFrame) {\n var j;\n var jLen;\n var pathStringTransformed;\n var redraw;\n var pathNodes;\n var l;\n var lLen = itemData.styles.length;\n var lvl = itemData.lvl;\n var paths;\n var mat;\n var iterations;\n var k;\n\n for (l = 0; l < lLen; l += 1) {\n redraw = itemData.sh._mdf || isFirstFrame;\n\n if (itemData.styles[l].lvl < lvl) {\n mat = _matrixHelper.reset();\n iterations = lvl - itemData.styles[l].lvl;\n k = itemData.transformers.length - 1;\n\n while (!redraw && iterations > 0) {\n redraw = itemData.transformers[k].mProps._mdf || redraw;\n iterations -= 1;\n k -= 1;\n }\n\n if (redraw) {\n iterations = lvl - itemData.styles[l].lvl;\n k = itemData.transformers.length - 1;\n\n while (iterations > 0) {\n mat.multiply(itemData.transformers[k].mProps.v);\n iterations -= 1;\n k -= 1;\n }\n }\n } else {\n mat = _identityMatrix;\n }\n\n paths = itemData.sh.paths;\n jLen = paths._length;\n\n if (redraw) {\n pathStringTransformed = '';\n\n for (j = 0; j < jLen; j += 1) {\n pathNodes = paths.shapes[j];\n\n if (pathNodes && pathNodes._length) {\n pathStringTransformed += buildShapeString(pathNodes, pathNodes._length, pathNodes.c, mat);\n }\n }\n\n itemData.caches[l] = pathStringTransformed;\n } else {\n pathStringTransformed = itemData.caches[l];\n }\n\n itemData.styles[l].d += styleData.hd === true ? '' : pathStringTransformed;\n itemData.styles[l]._mdf = redraw || itemData.styles[l]._mdf;\n }\n }\n\n function renderFill(styleData, itemData, isFirstFrame) {\n var styleElem = itemData.style;\n\n if (itemData.c._mdf || isFirstFrame) {\n styleElem.pElem.setAttribute('fill', 'rgb(' + bmFloor(itemData.c.v[0]) + ',' + bmFloor(itemData.c.v[1]) + ',' + bmFloor(itemData.c.v[2]) + ')');\n }\n\n if (itemData.o._mdf || isFirstFrame) {\n styleElem.pElem.setAttribute('fill-opacity', itemData.o.v);\n }\n }\n\n function renderGradientStroke(styleData, itemData, isFirstFrame) {\n renderGradient(styleData, itemData, isFirstFrame);\n renderStroke(styleData, itemData, isFirstFrame);\n }\n\n function renderGradient(styleData, itemData, isFirstFrame) {\n var gfill = itemData.gf;\n var hasOpacity = itemData.g._hasOpacity;\n var pt1 = itemData.s.v;\n var pt2 = itemData.e.v;\n\n if (itemData.o._mdf || isFirstFrame) {\n var attr = styleData.ty === 'gf' ? 'fill-opacity' : 'stroke-opacity';\n itemData.style.pElem.setAttribute(attr, itemData.o.v);\n }\n\n if (itemData.s._mdf || isFirstFrame) {\n var attr1 = styleData.t === 1 ? 'x1' : 'cx';\n var attr2 = attr1 === 'x1' ? 'y1' : 'cy';\n gfill.setAttribute(attr1, pt1[0]);\n gfill.setAttribute(attr2, pt1[1]);\n\n if (hasOpacity && !itemData.g._collapsable) {\n itemData.of.setAttribute(attr1, pt1[0]);\n itemData.of.setAttribute(attr2, pt1[1]);\n }\n }\n\n var stops;\n var i;\n var len;\n var stop;\n\n if (itemData.g._cmdf || isFirstFrame) {\n stops = itemData.cst;\n var cValues = itemData.g.c;\n len = stops.length;\n\n for (i = 0; i < len; i += 1) {\n stop = stops[i];\n stop.setAttribute('offset', cValues[i * 4] + '%');\n stop.setAttribute('stop-color', 'rgb(' + cValues[i * 4 + 1] + ',' + cValues[i * 4 + 2] + ',' + cValues[i * 4 + 3] + ')');\n }\n }\n\n if (hasOpacity && (itemData.g._omdf || isFirstFrame)) {\n var oValues = itemData.g.o;\n\n if (itemData.g._collapsable) {\n stops = itemData.cst;\n } else {\n stops = itemData.ost;\n }\n\n len = stops.length;\n\n for (i = 0; i < len; i += 1) {\n stop = stops[i];\n\n if (!itemData.g._collapsable) {\n stop.setAttribute('offset', oValues[i * 2] + '%');\n }\n\n stop.setAttribute('stop-opacity', oValues[i * 2 + 1]);\n }\n }\n\n if (styleData.t === 1) {\n if (itemData.e._mdf || isFirstFrame) {\n gfill.setAttribute('x2', pt2[0]);\n gfill.setAttribute('y2', pt2[1]);\n\n if (hasOpacity && !itemData.g._collapsable) {\n itemData.of.setAttribute('x2', pt2[0]);\n itemData.of.setAttribute('y2', pt2[1]);\n }\n }\n } else {\n var rad;\n\n if (itemData.s._mdf || itemData.e._mdf || isFirstFrame) {\n rad = Math.sqrt(Math.pow(pt1[0] - pt2[0], 2) + Math.pow(pt1[1] - pt2[1], 2));\n gfill.setAttribute('r', rad);\n\n if (hasOpacity && !itemData.g._collapsable) {\n itemData.of.setAttribute('r', rad);\n }\n }\n\n if (itemData.e._mdf || itemData.h._mdf || itemData.a._mdf || isFirstFrame) {\n if (!rad) {\n rad = Math.sqrt(Math.pow(pt1[0] - pt2[0], 2) + Math.pow(pt1[1] - pt2[1], 2));\n }\n\n var ang = Math.atan2(pt2[1] - pt1[1], pt2[0] - pt1[0]);\n var percent = itemData.h.v;\n\n if (percent >= 1) {\n percent = 0.99;\n } else if (percent <= -1) {\n percent = -0.99;\n }\n\n var dist = rad * percent;\n var x = Math.cos(ang + itemData.a.v) * dist + pt1[0];\n var y = Math.sin(ang + itemData.a.v) * dist + pt1[1];\n gfill.setAttribute('fx', x);\n gfill.setAttribute('fy', y);\n\n if (hasOpacity && !itemData.g._collapsable) {\n itemData.of.setAttribute('fx', x);\n itemData.of.setAttribute('fy', y);\n }\n } // gfill.setAttribute('fy','200');\n\n }\n }\n\n function renderStroke(styleData, itemData, isFirstFrame) {\n var styleElem = itemData.style;\n var d = itemData.d;\n\n if (d && (d._mdf || isFirstFrame) && d.dashStr) {\n styleElem.pElem.setAttribute('stroke-dasharray', d.dashStr);\n styleElem.pElem.setAttribute('stroke-dashoffset', d.dashoffset[0]);\n }\n\n if (itemData.c && (itemData.c._mdf || isFirstFrame)) {\n styleElem.pElem.setAttribute('stroke', 'rgb(' + bmFloor(itemData.c.v[0]) + ',' + bmFloor(itemData.c.v[1]) + ',' + bmFloor(itemData.c.v[2]) + ')');\n }\n\n if (itemData.o._mdf || isFirstFrame) {\n styleElem.pElem.setAttribute('stroke-opacity', itemData.o.v);\n }\n\n if (itemData.w._mdf || isFirstFrame) {\n styleElem.pElem.setAttribute('stroke-width', itemData.w.v);\n\n if (styleElem.msElem) {\n styleElem.msElem.setAttribute('stroke-width', itemData.w.v);\n }\n }\n }\n\n return ob;\n }();\n\n function SVGShapeElement(data, globalData, comp) {\n // List of drawable elements\n this.shapes = []; // Full shape data\n\n this.shapesData = data.shapes; // List of styles that will be applied to shapes\n\n this.stylesList = []; // List of modifiers that will be applied to shapes\n\n this.shapeModifiers = []; // List of items in shape tree\n\n this.itemsData = []; // List of items in previous shape tree\n\n this.processedElements = []; // List of animated components\n\n this.animatedContents = [];\n this.initElement(data, globalData, comp); // Moving any property that doesn't get too much access after initialization because of v8 way of handling more than 10 properties.\n // List of elements that have been created\n\n this.prevViewData = []; // Moving any property that doesn't get too much access after initialization because of v8 way of handling more than 10 properties.\n }\n\n extendPrototype([BaseElement, TransformElement, SVGBaseElement, IShapeElement, HierarchyElement, FrameElement, RenderableDOMElement], SVGShapeElement);\n\n SVGShapeElement.prototype.initSecondaryElement = function () {};\n\n SVGShapeElement.prototype.identityMatrix = new Matrix();\n\n SVGShapeElement.prototype.buildExpressionInterface = function () {};\n\n SVGShapeElement.prototype.createContent = function () {\n this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, this.layerElement, 0, [], true);\n this.filterUniqueShapes();\n };\n /*\r\n This method searches for multiple shapes that affect a single element and one of them is animated\r\n */\n\n\n SVGShapeElement.prototype.filterUniqueShapes = function () {\n var i;\n var len = this.shapes.length;\n var shape;\n var j;\n var jLen = this.stylesList.length;\n var style;\n var tempShapes = [];\n var areAnimated = false;\n\n for (j = 0; j < jLen; j += 1) {\n style = this.stylesList[j];\n areAnimated = false;\n tempShapes.length = 0;\n\n for (i = 0; i < len; i += 1) {\n shape = this.shapes[i];\n\n if (shape.styles.indexOf(style) !== -1) {\n tempShapes.push(shape);\n areAnimated = shape._isAnimated || areAnimated;\n }\n }\n\n if (tempShapes.length > 1 && areAnimated) {\n this.setShapesAsAnimated(tempShapes);\n }\n }\n };\n\n SVGShapeElement.prototype.setShapesAsAnimated = function (shapes) {\n var i;\n var len = shapes.length;\n\n for (i = 0; i < len; i += 1) {\n shapes[i].setAsAnimated();\n }\n };\n\n SVGShapeElement.prototype.createStyleElement = function (data, level) {\n // TODO: prevent drawing of hidden styles\n var elementData;\n var styleOb = new SVGStyleData(data, level);\n var pathElement = styleOb.pElem;\n\n if (data.ty === 'st') {\n elementData = new SVGStrokeStyleData(this, data, styleOb);\n } else if (data.ty === 'fl') {\n elementData = new SVGFillStyleData(this, data, styleOb);\n } else if (data.ty === 'gf' || data.ty === 'gs') {\n var GradientConstructor = data.ty === 'gf' ? SVGGradientFillStyleData : SVGGradientStrokeStyleData;\n elementData = new GradientConstructor(this, data, styleOb);\n this.globalData.defs.appendChild(elementData.gf);\n\n if (elementData.maskId) {\n this.globalData.defs.appendChild(elementData.ms);\n this.globalData.defs.appendChild(elementData.of);\n pathElement.setAttribute('mask', 'url(' + getLocationHref() + '#' + elementData.maskId + ')');\n }\n } else if (data.ty === 'no') {\n elementData = new SVGNoStyleData(this, data, styleOb);\n }\n\n if (data.ty === 'st' || data.ty === 'gs') {\n pathElement.setAttribute('stroke-linecap', lineCapEnum[data.lc || 2]);\n pathElement.setAttribute('stroke-linejoin', lineJoinEnum[data.lj || 2]);\n pathElement.setAttribute('fill-opacity', '0');\n\n if (data.lj === 1) {\n pathElement.setAttribute('stroke-miterlimit', data.ml);\n }\n }\n\n if (data.r === 2) {\n pathElement.setAttribute('fill-rule', 'evenodd');\n }\n\n if (data.ln) {\n pathElement.setAttribute('id', data.ln);\n }\n\n if (data.cl) {\n pathElement.setAttribute('class', data.cl);\n }\n\n if (data.bm) {\n pathElement.style['mix-blend-mode'] = getBlendMode(data.bm);\n }\n\n this.stylesList.push(styleOb);\n this.addToAnimatedContents(data, elementData);\n return elementData;\n };\n\n SVGShapeElement.prototype.createGroupElement = function (data) {\n var elementData = new ShapeGroupData();\n\n if (data.ln) {\n elementData.gr.setAttribute('id', data.ln);\n }\n\n if (data.cl) {\n elementData.gr.setAttribute('class', data.cl);\n }\n\n if (data.bm) {\n elementData.gr.style['mix-blend-mode'] = getBlendMode(data.bm);\n }\n\n return elementData;\n };\n\n SVGShapeElement.prototype.createTransformElement = function (data, container) {\n var transformProperty = TransformPropertyFactory.getTransformProperty(this, data, this);\n var elementData = new SVGTransformData(transformProperty, transformProperty.o, container);\n this.addToAnimatedContents(data, elementData);\n return elementData;\n };\n\n SVGShapeElement.prototype.createShapeElement = function (data, ownTransformers, level) {\n var ty = 4;\n\n if (data.ty === 'rc') {\n ty = 5;\n } else if (data.ty === 'el') {\n ty = 6;\n } else if (data.ty === 'sr') {\n ty = 7;\n }\n\n var shapeProperty = ShapePropertyFactory.getShapeProp(this, data, ty, this);\n var elementData = new SVGShapeData(ownTransformers, level, shapeProperty);\n this.shapes.push(elementData);\n this.addShapeToModifiers(elementData);\n this.addToAnimatedContents(data, elementData);\n return elementData;\n };\n\n SVGShapeElement.prototype.addToAnimatedContents = function (data, element) {\n var i = 0;\n var len = this.animatedContents.length;\n\n while (i < len) {\n if (this.animatedContents[i].element === element) {\n return;\n }\n\n i += 1;\n }\n\n this.animatedContents.push({\n fn: SVGElementsRenderer.createRenderFunction(data),\n element: element,\n data: data\n });\n };\n\n SVGShapeElement.prototype.setElementStyles = function (elementData) {\n var arr = elementData.styles;\n var j;\n var jLen = this.stylesList.length;\n\n for (j = 0; j < jLen; j += 1) {\n if (!this.stylesList[j].closed) {\n arr.push(this.stylesList[j]);\n }\n }\n };\n\n SVGShapeElement.prototype.reloadShapes = function () {\n this._isFirstFrame = true;\n var i;\n var len = this.itemsData.length;\n\n for (i = 0; i < len; i += 1) {\n this.prevViewData[i] = this.itemsData[i];\n }\n\n this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, this.layerElement, 0, [], true);\n this.filterUniqueShapes();\n len = this.dynamicProperties.length;\n\n for (i = 0; i < len; i += 1) {\n this.dynamicProperties[i].getValue();\n }\n\n this.renderModifiers();\n };\n\n SVGShapeElement.prototype.searchShapes = function (arr, itemsData, prevViewData, container, level, transformers, render) {\n var ownTransformers = [].concat(transformers);\n var i;\n var len = arr.length - 1;\n var j;\n var jLen;\n var ownStyles = [];\n var ownModifiers = [];\n var currentTransform;\n var modifier;\n var processedPos;\n\n for (i = len; i >= 0; i -= 1) {\n processedPos = this.searchProcessedElement(arr[i]);\n\n if (!processedPos) {\n arr[i]._render = render;\n } else {\n itemsData[i] = prevViewData[processedPos - 1];\n }\n\n if (arr[i].ty === 'fl' || arr[i].ty === 'st' || arr[i].ty === 'gf' || arr[i].ty === 'gs' || arr[i].ty === 'no') {\n if (!processedPos) {\n itemsData[i] = this.createStyleElement(arr[i], level);\n } else {\n itemsData[i].style.closed = false;\n }\n\n if (arr[i]._render) {\n if (itemsData[i].style.pElem.parentNode !== container) {\n container.appendChild(itemsData[i].style.pElem);\n }\n }\n\n ownStyles.push(itemsData[i].style);\n } else if (arr[i].ty === 'gr') {\n if (!processedPos) {\n itemsData[i] = this.createGroupElement(arr[i]);\n } else {\n jLen = itemsData[i].it.length;\n\n for (j = 0; j < jLen; j += 1) {\n itemsData[i].prevViewData[j] = itemsData[i].it[j];\n }\n }\n\n this.searchShapes(arr[i].it, itemsData[i].it, itemsData[i].prevViewData, itemsData[i].gr, level + 1, ownTransformers, render);\n\n if (arr[i]._render) {\n if (itemsData[i].gr.parentNode !== container) {\n container.appendChild(itemsData[i].gr);\n }\n }\n } else if (arr[i].ty === 'tr') {\n if (!processedPos) {\n itemsData[i] = this.createTransformElement(arr[i], container);\n }\n\n currentTransform = itemsData[i].transform;\n ownTransformers.push(currentTransform);\n } else if (arr[i].ty === 'sh' || arr[i].ty === 'rc' || arr[i].ty === 'el' || arr[i].ty === 'sr') {\n if (!processedPos) {\n itemsData[i] = this.createShapeElement(arr[i], ownTransformers, level);\n }\n\n this.setElementStyles(itemsData[i]);\n } else if (arr[i].ty === 'tm' || arr[i].ty === 'rd' || arr[i].ty === 'ms' || arr[i].ty === 'pb' || arr[i].ty === 'zz' || arr[i].ty === 'op') {\n if (!processedPos) {\n modifier = ShapeModifiers.getModifier(arr[i].ty);\n modifier.init(this, arr[i]);\n itemsData[i] = modifier;\n this.shapeModifiers.push(modifier);\n } else {\n modifier = itemsData[i];\n modifier.closed = false;\n }\n\n ownModifiers.push(modifier);\n } else if (arr[i].ty === 'rp') {\n if (!processedPos) {\n modifier = ShapeModifiers.getModifier(arr[i].ty);\n itemsData[i] = modifier;\n modifier.init(this, arr, i, itemsData);\n this.shapeModifiers.push(modifier);\n render = false;\n } else {\n modifier = itemsData[i];\n modifier.closed = true;\n }\n\n ownModifiers.push(modifier);\n }\n\n this.addProcessedElement(arr[i], i + 1);\n }\n\n len = ownStyles.length;\n\n for (i = 0; i < len; i += 1) {\n ownStyles[i].closed = true;\n }\n\n len = ownModifiers.length;\n\n for (i = 0; i < len; i += 1) {\n ownModifiers[i].closed = true;\n }\n };\n\n SVGShapeElement.prototype.renderInnerContent = function () {\n this.renderModifiers();\n var i;\n var len = this.stylesList.length;\n\n for (i = 0; i < len; i += 1) {\n this.stylesList[i].reset();\n }\n\n this.renderShape();\n\n for (i = 0; i < len; i += 1) {\n if (this.stylesList[i]._mdf || this._isFirstFrame) {\n if (this.stylesList[i].msElem) {\n this.stylesList[i].msElem.setAttribute('d', this.stylesList[i].d); // Adding M0 0 fixes same mask bug on all browsers\n\n this.stylesList[i].d = 'M0 0' + this.stylesList[i].d;\n }\n\n this.stylesList[i].pElem.setAttribute('d', this.stylesList[i].d || 'M0 0');\n }\n }\n };\n\n SVGShapeElement.prototype.renderShape = function () {\n var i;\n var len = this.animatedContents.length;\n var animatedContent;\n\n for (i = 0; i < len; i += 1) {\n animatedContent = this.animatedContents[i];\n\n if ((this._isFirstFrame || animatedContent.element._isAnimated) && animatedContent.data !== true) {\n animatedContent.fn(animatedContent.data, animatedContent.element, this._isFirstFrame);\n }\n }\n };\n\n SVGShapeElement.prototype.destroy = function () {\n this.destroyBaseElement();\n this.shapesData = null;\n this.itemsData = null;\n };\n\n function LetterProps(o, sw, sc, fc, m, p) {\n this.o = o;\n this.sw = sw;\n this.sc = sc;\n this.fc = fc;\n this.m = m;\n this.p = p;\n this._mdf = {\n o: true,\n sw: !!sw,\n sc: !!sc,\n fc: !!fc,\n m: true,\n p: true\n };\n }\n\n LetterProps.prototype.update = function (o, sw, sc, fc, m, p) {\n this._mdf.o = false;\n this._mdf.sw = false;\n this._mdf.sc = false;\n this._mdf.fc = false;\n this._mdf.m = false;\n this._mdf.p = false;\n var updated = false;\n\n if (this.o !== o) {\n this.o = o;\n this._mdf.o = true;\n updated = true;\n }\n\n if (this.sw !== sw) {\n this.sw = sw;\n this._mdf.sw = true;\n updated = true;\n }\n\n if (this.sc !== sc) {\n this.sc = sc;\n this._mdf.sc = true;\n updated = true;\n }\n\n if (this.fc !== fc) {\n this.fc = fc;\n this._mdf.fc = true;\n updated = true;\n }\n\n if (this.m !== m) {\n this.m = m;\n this._mdf.m = true;\n updated = true;\n }\n\n if (p.length && (this.p[0] !== p[0] || this.p[1] !== p[1] || this.p[4] !== p[4] || this.p[5] !== p[5] || this.p[12] !== p[12] || this.p[13] !== p[13])) {\n this.p = p;\n this._mdf.p = true;\n updated = true;\n }\n\n return updated;\n };\n\n function TextProperty(elem, data) {\n this._frameId = initialDefaultFrame;\n this.pv = '';\n this.v = '';\n this.kf = false;\n this._isFirstFrame = true;\n this._mdf = false;\n\n if (data.d && data.d.sid) {\n data.d = elem.globalData.slotManager.getProp(data.d);\n }\n\n this.data = data;\n this.elem = elem;\n this.comp = this.elem.comp;\n this.keysIndex = 0;\n this.canResize = false;\n this.minimumFontSize = 1;\n this.effectsSequence = [];\n this.currentData = {\n ascent: 0,\n boxWidth: this.defaultBoxWidth,\n f: '',\n fStyle: '',\n fWeight: '',\n fc: '',\n j: '',\n justifyOffset: '',\n l: [],\n lh: 0,\n lineWidths: [],\n ls: '',\n of: '',\n s: '',\n sc: '',\n sw: 0,\n t: 0,\n tr: 0,\n sz: 0,\n ps: null,\n fillColorAnim: false,\n strokeColorAnim: false,\n strokeWidthAnim: false,\n yOffset: 0,\n finalSize: 0,\n finalText: [],\n finalLineHeight: 0,\n __complete: false\n };\n this.copyData(this.currentData, this.data.d.k[0].s);\n\n if (!this.searchProperty()) {\n this.completeTextData(this.currentData);\n }\n }\n\n TextProperty.prototype.defaultBoxWidth = [0, 0];\n\n TextProperty.prototype.copyData = function (obj, data) {\n for (var s in data) {\n if (Object.prototype.hasOwnProperty.call(data, s)) {\n obj[s] = data[s];\n }\n }\n\n return obj;\n };\n\n TextProperty.prototype.setCurrentData = function (data) {\n if (!data.__complete) {\n this.completeTextData(data);\n }\n\n this.currentData = data;\n this.currentData.boxWidth = this.currentData.boxWidth || this.defaultBoxWidth;\n this._mdf = true;\n };\n\n TextProperty.prototype.searchProperty = function () {\n return this.searchKeyframes();\n };\n\n TextProperty.prototype.searchKeyframes = function () {\n this.kf = this.data.d.k.length > 1;\n\n if (this.kf) {\n this.addEffect(this.getKeyframeValue.bind(this));\n }\n\n return this.kf;\n };\n\n TextProperty.prototype.addEffect = function (effectFunction) {\n this.effectsSequence.push(effectFunction);\n this.elem.addDynamicProperty(this);\n };\n\n TextProperty.prototype.getValue = function (_finalValue) {\n if ((this.elem.globalData.frameId === this.frameId || !this.effectsSequence.length) && !_finalValue) {\n return;\n }\n\n this.currentData.t = this.data.d.k[this.keysIndex].s.t;\n var currentValue = this.currentData;\n var currentIndex = this.keysIndex;\n\n if (this.lock) {\n this.setCurrentData(this.currentData);\n return;\n }\n\n this.lock = true;\n this._mdf = false;\n var i;\n var len = this.effectsSequence.length;\n var finalValue = _finalValue || this.data.d.k[this.keysIndex].s;\n\n for (i = 0; i < len; i += 1) {\n // Checking if index changed to prevent creating a new object every time the expression updates.\n if (currentIndex !== this.keysIndex) {\n finalValue = this.effectsSequence[i](finalValue, finalValue.t);\n } else {\n finalValue = this.effectsSequence[i](this.currentData, finalValue.t);\n }\n }\n\n if (currentValue !== finalValue) {\n this.setCurrentData(finalValue);\n }\n\n this.v = this.currentData;\n this.pv = this.v;\n this.lock = false;\n this.frameId = this.elem.globalData.frameId;\n };\n\n TextProperty.prototype.getKeyframeValue = function () {\n var textKeys = this.data.d.k;\n var frameNum = this.elem.comp.renderedFrame;\n var i = 0;\n var len = textKeys.length;\n\n while (i <= len - 1) {\n if (i === len - 1 || textKeys[i + 1].t > frameNum) {\n break;\n }\n\n i += 1;\n }\n\n if (this.keysIndex !== i) {\n this.keysIndex = i;\n }\n\n return this.data.d.k[this.keysIndex].s;\n };\n\n TextProperty.prototype.buildFinalText = function (text) {\n var charactersArray = [];\n var i = 0;\n var len = text.length;\n var charCode;\n var secondCharCode;\n var shouldCombine = false;\n var shouldCombineNext = false;\n var currentChars = '';\n\n while (i < len) {\n shouldCombine = shouldCombineNext;\n shouldCombineNext = false;\n charCode = text.charCodeAt(i);\n currentChars = text.charAt(i);\n\n if (FontManager.isCombinedCharacter(charCode)) {\n shouldCombine = true; // It's a potential surrogate pair (this is the High surrogate)\n } else if (charCode >= 0xD800 && charCode <= 0xDBFF) {\n if (FontManager.isRegionalFlag(text, i)) {\n currentChars = text.substr(i, 14);\n } else {\n secondCharCode = text.charCodeAt(i + 1); // It's a surrogate pair (this is the Low surrogate)\n\n if (secondCharCode >= 0xDC00 && secondCharCode <= 0xDFFF) {\n if (FontManager.isModifier(charCode, secondCharCode)) {\n currentChars = text.substr(i, 2);\n shouldCombine = true;\n } else if (FontManager.isFlagEmoji(text.substr(i, 4))) {\n currentChars = text.substr(i, 4);\n } else {\n currentChars = text.substr(i, 2);\n }\n }\n }\n } else if (charCode > 0xDBFF) {\n secondCharCode = text.charCodeAt(i + 1);\n\n if (FontManager.isVariationSelector(charCode)) {\n shouldCombine = true;\n }\n } else if (FontManager.isZeroWidthJoiner(charCode)) {\n shouldCombine = true;\n shouldCombineNext = true;\n }\n\n if (shouldCombine) {\n charactersArray[charactersArray.length - 1] += currentChars;\n shouldCombine = false;\n } else {\n charactersArray.push(currentChars);\n }\n\n i += currentChars.length;\n }\n\n return charactersArray;\n };\n\n TextProperty.prototype.completeTextData = function (documentData) {\n documentData.__complete = true;\n var fontManager = this.elem.globalData.fontManager;\n var data = this.data;\n var letters = [];\n var i;\n var len;\n var newLineFlag;\n var index = 0;\n var val;\n var anchorGrouping = data.m.g;\n var currentSize = 0;\n var currentPos = 0;\n var currentLine = 0;\n var lineWidths = [];\n var lineWidth = 0;\n var maxLineWidth = 0;\n var j;\n var jLen;\n var fontData = fontManager.getFontByName(documentData.f);\n var charData;\n var cLength = 0;\n var fontProps = getFontProperties(fontData);\n documentData.fWeight = fontProps.weight;\n documentData.fStyle = fontProps.style;\n documentData.finalSize = documentData.s;\n documentData.finalText = this.buildFinalText(documentData.t);\n len = documentData.finalText.length;\n documentData.finalLineHeight = documentData.lh;\n var trackingOffset = documentData.tr / 1000 * documentData.finalSize;\n var charCode;\n\n if (documentData.sz) {\n var flag = true;\n var boxWidth = documentData.sz[0];\n var boxHeight = documentData.sz[1];\n var currentHeight;\n var finalText;\n\n while (flag) {\n finalText = this.buildFinalText(documentData.t);\n currentHeight = 0;\n lineWidth = 0;\n len = finalText.length;\n trackingOffset = documentData.tr / 1000 * documentData.finalSize;\n var lastSpaceIndex = -1;\n\n for (i = 0; i < len; i += 1) {\n charCode = finalText[i].charCodeAt(0);\n newLineFlag = false;\n\n if (finalText[i] === ' ') {\n lastSpaceIndex = i;\n } else if (charCode === 13 || charCode === 3) {\n lineWidth = 0;\n newLineFlag = true;\n currentHeight += documentData.finalLineHeight || documentData.finalSize * 1.2;\n }\n\n if (fontManager.chars) {\n charData = fontManager.getCharData(finalText[i], fontData.fStyle, fontData.fFamily);\n cLength = newLineFlag ? 0 : charData.w * documentData.finalSize / 100;\n } else {\n // tCanvasHelper.font = documentData.s + 'px '+ fontData.fFamily;\n cLength = fontManager.measureText(finalText[i], documentData.f, documentData.finalSize);\n }\n\n if (lineWidth + cLength > boxWidth && finalText[i] !== ' ') {\n if (lastSpaceIndex === -1) {\n len += 1;\n } else {\n i = lastSpaceIndex;\n }\n\n currentHeight += documentData.finalLineHeight || documentData.finalSize * 1.2;\n finalText.splice(i, lastSpaceIndex === i ? 1 : 0, '\\r'); // finalText = finalText.substr(0,i) + \"\\r\" + finalText.substr(i === lastSpaceIndex ? i + 1 : i);\n\n lastSpaceIndex = -1;\n lineWidth = 0;\n } else {\n lineWidth += cLength;\n lineWidth += trackingOffset;\n }\n }\n\n currentHeight += fontData.ascent * documentData.finalSize / 100;\n\n if (this.canResize && documentData.finalSize > this.minimumFontSize && boxHeight < currentHeight) {\n documentData.finalSize -= 1;\n documentData.finalLineHeight = documentData.finalSize * documentData.lh / documentData.s;\n } else {\n documentData.finalText = finalText;\n len = documentData.finalText.length;\n flag = false;\n }\n }\n }\n\n lineWidth = -trackingOffset;\n cLength = 0;\n var uncollapsedSpaces = 0;\n var currentChar;\n\n for (i = 0; i < len; i += 1) {\n newLineFlag = false;\n currentChar = documentData.finalText[i];\n charCode = currentChar.charCodeAt(0);\n\n if (charCode === 13 || charCode === 3) {\n uncollapsedSpaces = 0;\n lineWidths.push(lineWidth);\n maxLineWidth = lineWidth > maxLineWidth ? lineWidth : maxLineWidth;\n lineWidth = -2 * trackingOffset;\n val = '';\n newLineFlag = true;\n currentLine += 1;\n } else {\n val = currentChar;\n }\n\n if (fontManager.chars) {\n charData = fontManager.getCharData(currentChar, fontData.fStyle, fontManager.getFontByName(documentData.f).fFamily);\n cLength = newLineFlag ? 0 : charData.w * documentData.finalSize / 100;\n } else {\n // var charWidth = fontManager.measureText(val, documentData.f, documentData.finalSize);\n // tCanvasHelper.font = documentData.finalSize + 'px '+ fontManager.getFontByName(documentData.f).fFamily;\n cLength = fontManager.measureText(val, documentData.f, documentData.finalSize);\n } //\n\n\n if (currentChar === ' ') {\n uncollapsedSpaces += cLength + trackingOffset;\n } else {\n lineWidth += cLength + trackingOffset + uncollapsedSpaces;\n uncollapsedSpaces = 0;\n }\n\n letters.push({\n l: cLength,\n an: cLength,\n add: currentSize,\n n: newLineFlag,\n anIndexes: [],\n val: val,\n line: currentLine,\n animatorJustifyOffset: 0\n });\n\n if (anchorGrouping == 2) {\n // eslint-disable-line eqeqeq\n currentSize += cLength;\n\n if (val === '' || val === ' ' || i === len - 1) {\n if (val === '' || val === ' ') {\n currentSize -= cLength;\n }\n\n while (currentPos <= i) {\n letters[currentPos].an = currentSize;\n letters[currentPos].ind = index;\n letters[currentPos].extra = cLength;\n currentPos += 1;\n }\n\n index += 1;\n currentSize = 0;\n }\n } else if (anchorGrouping == 3) {\n // eslint-disable-line eqeqeq\n currentSize += cLength;\n\n if (val === '' || i === len - 1) {\n if (val === '') {\n currentSize -= cLength;\n }\n\n while (currentPos <= i) {\n letters[currentPos].an = currentSize;\n letters[currentPos].ind = index;\n letters[currentPos].extra = cLength;\n currentPos += 1;\n }\n\n currentSize = 0;\n index += 1;\n }\n } else {\n letters[index].ind = index;\n letters[index].extra = 0;\n index += 1;\n }\n }\n\n documentData.l = letters;\n maxLineWidth = lineWidth > maxLineWidth ? lineWidth : maxLineWidth;\n lineWidths.push(lineWidth);\n\n if (documentData.sz) {\n documentData.boxWidth = documentData.sz[0];\n documentData.justifyOffset = 0;\n } else {\n documentData.boxWidth = maxLineWidth;\n\n switch (documentData.j) {\n case 1:\n documentData.justifyOffset = -documentData.boxWidth;\n break;\n\n case 2:\n documentData.justifyOffset = -documentData.boxWidth / 2;\n break;\n\n default:\n documentData.justifyOffset = 0;\n }\n }\n\n documentData.lineWidths = lineWidths;\n var animators = data.a;\n var animatorData;\n var letterData;\n jLen = animators.length;\n var based;\n var ind;\n var indexes = [];\n\n for (j = 0; j < jLen; j += 1) {\n animatorData = animators[j];\n\n if (animatorData.a.sc) {\n documentData.strokeColorAnim = true;\n }\n\n if (animatorData.a.sw) {\n documentData.strokeWidthAnim = true;\n }\n\n if (animatorData.a.fc || animatorData.a.fh || animatorData.a.fs || animatorData.a.fb) {\n documentData.fillColorAnim = true;\n }\n\n ind = 0;\n based = animatorData.s.b;\n\n for (i = 0; i < len; i += 1) {\n letterData = letters[i];\n letterData.anIndexes[j] = ind;\n\n if (based == 1 && letterData.val !== '' || based == 2 && letterData.val !== '' && letterData.val !== ' ' || based == 3 && (letterData.n || letterData.val == ' ' || i == len - 1) || based == 4 && (letterData.n || i == len - 1)) {\n // eslint-disable-line eqeqeq\n if (animatorData.s.rn === 1) {\n indexes.push(ind);\n }\n\n ind += 1;\n }\n }\n\n data.a[j].s.totalChars = ind;\n var currentInd = -1;\n var newInd;\n\n if (animatorData.s.rn === 1) {\n for (i = 0; i < len; i += 1) {\n letterData = letters[i];\n\n if (currentInd != letterData.anIndexes[j]) {\n // eslint-disable-line eqeqeq\n currentInd = letterData.anIndexes[j];\n newInd = indexes.splice(Math.floor(Math.random() * indexes.length), 1)[0];\n }\n\n letterData.anIndexes[j] = newInd;\n }\n }\n }\n\n documentData.yOffset = documentData.finalLineHeight || documentData.finalSize * 1.2;\n documentData.ls = documentData.ls || 0;\n documentData.ascent = fontData.ascent * documentData.finalSize / 100;\n };\n\n TextProperty.prototype.updateDocumentData = function (newData, index) {\n index = index === undefined ? this.keysIndex : index;\n var dData = this.copyData({}, this.data.d.k[index].s);\n dData = this.copyData(dData, newData);\n this.data.d.k[index].s = dData;\n this.recalculate(index);\n this.setCurrentData(dData);\n this.elem.addDynamicProperty(this);\n };\n\n TextProperty.prototype.recalculate = function (index) {\n var dData = this.data.d.k[index].s;\n dData.__complete = false;\n this.keysIndex = 0;\n this._isFirstFrame = true;\n this.getValue(dData);\n };\n\n TextProperty.prototype.canResizeFont = function (_canResize) {\n this.canResize = _canResize;\n this.recalculate(this.keysIndex);\n this.elem.addDynamicProperty(this);\n };\n\n TextProperty.prototype.setMinimumFontSize = function (_fontValue) {\n this.minimumFontSize = Math.floor(_fontValue) || 1;\n this.recalculate(this.keysIndex);\n this.elem.addDynamicProperty(this);\n };\n\n var TextSelectorProp = function () {\n var max = Math.max;\n var min = Math.min;\n var floor = Math.floor;\n\n function TextSelectorPropFactory(elem, data) {\n this._currentTextLength = -1;\n this.k = false;\n this.data = data;\n this.elem = elem;\n this.comp = elem.comp;\n this.finalS = 0;\n this.finalE = 0;\n this.initDynamicPropertyContainer(elem);\n this.s = PropertyFactory.getProp(elem, data.s || {\n k: 0\n }, 0, 0, this);\n\n if ('e' in data) {\n this.e = PropertyFactory.getProp(elem, data.e, 0, 0, this);\n } else {\n this.e = {\n v: 100\n };\n }\n\n this.o = PropertyFactory.getProp(elem, data.o || {\n k: 0\n }, 0, 0, this);\n this.xe = PropertyFactory.getProp(elem, data.xe || {\n k: 0\n }, 0, 0, this);\n this.ne = PropertyFactory.getProp(elem, data.ne || {\n k: 0\n }, 0, 0, this);\n this.sm = PropertyFactory.getProp(elem, data.sm || {\n k: 100\n }, 0, 0, this);\n this.a = PropertyFactory.getProp(elem, data.a, 0, 0.01, this);\n\n if (!this.dynamicProperties.length) {\n this.getValue();\n }\n }\n\n TextSelectorPropFactory.prototype = {\n getMult: function getMult(ind) {\n if (this._currentTextLength !== this.elem.textProperty.currentData.l.length) {\n this.getValue();\n }\n\n var x1 = 0;\n var y1 = 0;\n var x2 = 1;\n var y2 = 1;\n\n if (this.ne.v > 0) {\n x1 = this.ne.v / 100.0;\n } else {\n y1 = -this.ne.v / 100.0;\n }\n\n if (this.xe.v > 0) {\n x2 = 1.0 - this.xe.v / 100.0;\n } else {\n y2 = 1.0 + this.xe.v / 100.0;\n }\n\n var easer = BezierFactory.getBezierEasing(x1, y1, x2, y2).get;\n var mult = 0;\n var s = this.finalS;\n var e = this.finalE;\n var type = this.data.sh;\n\n if (type === 2) {\n if (e === s) {\n mult = ind >= e ? 1 : 0;\n } else {\n mult = max(0, min(0.5 / (e - s) + (ind - s) / (e - s), 1));\n }\n\n mult = easer(mult);\n } else if (type === 3) {\n if (e === s) {\n mult = ind >= e ? 0 : 1;\n } else {\n mult = 1 - max(0, min(0.5 / (e - s) + (ind - s) / (e - s), 1));\n }\n\n mult = easer(mult);\n } else if (type === 4) {\n if (e === s) {\n mult = 0;\n } else {\n mult = max(0, min(0.5 / (e - s) + (ind - s) / (e - s), 1));\n\n if (mult < 0.5) {\n mult *= 2;\n } else {\n mult = 1 - 2 * (mult - 0.5);\n }\n }\n\n mult = easer(mult);\n } else if (type === 5) {\n if (e === s) {\n mult = 0;\n } else {\n var tot = e - s;\n /* ind += 0.5;\r\n mult = -4/(tot*tot)*(ind*ind)+(4/tot)*ind; */\n\n ind = min(max(0, ind + 0.5 - s), e - s);\n var x = -tot / 2 + ind;\n var a = tot / 2;\n mult = Math.sqrt(1 - x * x / (a * a));\n }\n\n mult = easer(mult);\n } else if (type === 6) {\n if (e === s) {\n mult = 0;\n } else {\n ind = min(max(0, ind + 0.5 - s), e - s);\n mult = (1 + Math.cos(Math.PI + Math.PI * 2 * ind / (e - s))) / 2; // eslint-disable-line\n }\n\n mult = easer(mult);\n } else {\n if (ind >= floor(s)) {\n if (ind - s < 0) {\n mult = max(0, min(min(e, 1) - (s - ind), 1));\n } else {\n mult = max(0, min(e - ind, 1));\n }\n }\n\n mult = easer(mult);\n } // Smoothness implementation.\n // The smoothness represents a reduced range of the original [0; 1] range.\n // if smoothness is 25%, the new range will be [0.375; 0.625]\n // Steps are:\n // - find the lower value of the new range (threshold)\n // - if multiplier is smaller than that value, floor it to 0\n // - if it is larger,\n // - subtract the threshold\n // - divide it by the smoothness (this will return the range to [0; 1])\n // Note: If it doesn't work on some scenarios, consider applying it before the easer.\n\n\n if (this.sm.v !== 100) {\n var smoothness = this.sm.v * 0.01;\n\n if (smoothness === 0) {\n smoothness = 0.00000001;\n }\n\n var threshold = 0.5 - smoothness * 0.5;\n\n if (mult < threshold) {\n mult = 0;\n } else {\n mult = (mult - threshold) / smoothness;\n\n if (mult > 1) {\n mult = 1;\n }\n }\n }\n\n return mult * this.a.v;\n },\n getValue: function getValue(newCharsFlag) {\n this.iterateDynamicProperties();\n this._mdf = newCharsFlag || this._mdf;\n this._currentTextLength = this.elem.textProperty.currentData.l.length || 0;\n\n if (newCharsFlag && this.data.r === 2) {\n this.e.v = this._currentTextLength;\n }\n\n var divisor = this.data.r === 2 ? 1 : 100 / this.data.totalChars;\n var o = this.o.v / divisor;\n var s = this.s.v / divisor + o;\n var e = this.e.v / divisor + o;\n\n if (s > e) {\n var _s = s;\n s = e;\n e = _s;\n }\n\n this.finalS = s;\n this.finalE = e;\n }\n };\n extendPrototype([DynamicPropertyContainer], TextSelectorPropFactory);\n\n function getTextSelectorProp(elem, data, arr) {\n return new TextSelectorPropFactory(elem, data, arr);\n }\n\n return {\n getTextSelectorProp: getTextSelectorProp\n };\n }();\n\n function TextAnimatorDataProperty(elem, animatorProps, container) {\n var defaultData = {\n propType: false\n };\n var getProp = PropertyFactory.getProp;\n var textAnimatorAnimatables = animatorProps.a;\n this.a = {\n r: textAnimatorAnimatables.r ? getProp(elem, textAnimatorAnimatables.r, 0, degToRads, container) : defaultData,\n rx: textAnimatorAnimatables.rx ? getProp(elem, textAnimatorAnimatables.rx, 0, degToRads, container) : defaultData,\n ry: textAnimatorAnimatables.ry ? getProp(elem, textAnimatorAnimatables.ry, 0, degToRads, container) : defaultData,\n sk: textAnimatorAnimatables.sk ? getProp(elem, textAnimatorAnimatables.sk, 0, degToRads, container) : defaultData,\n sa: textAnimatorAnimatables.sa ? getProp(elem, textAnimatorAnimatables.sa, 0, degToRads, container) : defaultData,\n s: textAnimatorAnimatables.s ? getProp(elem, textAnimatorAnimatables.s, 1, 0.01, container) : defaultData,\n a: textAnimatorAnimatables.a ? getProp(elem, textAnimatorAnimatables.a, 1, 0, container) : defaultData,\n o: textAnimatorAnimatables.o ? getProp(elem, textAnimatorAnimatables.o, 0, 0.01, container) : defaultData,\n p: textAnimatorAnimatables.p ? getProp(elem, textAnimatorAnimatables.p, 1, 0, container) : defaultData,\n sw: textAnimatorAnimatables.sw ? getProp(elem, textAnimatorAnimatables.sw, 0, 0, container) : defaultData,\n sc: textAnimatorAnimatables.sc ? getProp(elem, textAnimatorAnimatables.sc, 1, 0, container) : defaultData,\n fc: textAnimatorAnimatables.fc ? getProp(elem, textAnimatorAnimatables.fc, 1, 0, container) : defaultData,\n fh: textAnimatorAnimatables.fh ? getProp(elem, textAnimatorAnimatables.fh, 0, 0, container) : defaultData,\n fs: textAnimatorAnimatables.fs ? getProp(elem, textAnimatorAnimatables.fs, 0, 0.01, container) : defaultData,\n fb: textAnimatorAnimatables.fb ? getProp(elem, textAnimatorAnimatables.fb, 0, 0.01, container) : defaultData,\n t: textAnimatorAnimatables.t ? getProp(elem, textAnimatorAnimatables.t, 0, 0, container) : defaultData\n };\n this.s = TextSelectorProp.getTextSelectorProp(elem, animatorProps.s, container);\n this.s.t = animatorProps.s.t;\n }\n\n function TextAnimatorProperty(textData, renderType, elem) {\n this._isFirstFrame = true;\n this._hasMaskedPath = false;\n this._frameId = -1;\n this._textData = textData;\n this._renderType = renderType;\n this._elem = elem;\n this._animatorsData = createSizedArray(this._textData.a.length);\n this._pathData = {};\n this._moreOptions = {\n alignment: {}\n };\n this.renderedLetters = [];\n this.lettersChangedFlag = false;\n this.initDynamicPropertyContainer(elem);\n }\n\n TextAnimatorProperty.prototype.searchProperties = function () {\n var i;\n var len = this._textData.a.length;\n var animatorProps;\n var getProp = PropertyFactory.getProp;\n\n for (i = 0; i < len; i += 1) {\n animatorProps = this._textData.a[i];\n this._animatorsData[i] = new TextAnimatorDataProperty(this._elem, animatorProps, this);\n }\n\n if (this._textData.p && 'm' in this._textData.p) {\n this._pathData = {\n a: getProp(this._elem, this._textData.p.a, 0, 0, this),\n f: getProp(this._elem, this._textData.p.f, 0, 0, this),\n l: getProp(this._elem, this._textData.p.l, 0, 0, this),\n r: getProp(this._elem, this._textData.p.r, 0, 0, this),\n p: getProp(this._elem, this._textData.p.p, 0, 0, this),\n m: this._elem.maskManager.getMaskProperty(this._textData.p.m)\n };\n this._hasMaskedPath = true;\n } else {\n this._hasMaskedPath = false;\n }\n\n this._moreOptions.alignment = getProp(this._elem, this._textData.m.a, 1, 0, this);\n };\n\n TextAnimatorProperty.prototype.getMeasures = function (documentData, lettersChangedFlag) {\n this.lettersChangedFlag = lettersChangedFlag;\n\n if (!this._mdf && !this._isFirstFrame && !lettersChangedFlag && (!this._hasMaskedPath || !this._pathData.m._mdf)) {\n return;\n }\n\n this._isFirstFrame = false;\n var alignment = this._moreOptions.alignment.v;\n var animators = this._animatorsData;\n var textData = this._textData;\n var matrixHelper = this.mHelper;\n var renderType = this._renderType;\n var renderedLettersCount = this.renderedLetters.length;\n var xPos;\n var yPos;\n var i;\n var len;\n var letters = documentData.l;\n var pathInfo;\n var currentLength;\n var currentPoint;\n var segmentLength;\n var flag;\n var pointInd;\n var segmentInd;\n var prevPoint;\n var points;\n var segments;\n var partialLength;\n var totalLength;\n var perc;\n var tanAngle;\n var mask;\n\n if (this._hasMaskedPath) {\n mask = this._pathData.m;\n\n if (!this._pathData.n || this._pathData._mdf) {\n var paths = mask.v;\n\n if (this._pathData.r.v) {\n paths = paths.reverse();\n } // TODO: release bezier data cached from previous pathInfo: this._pathData.pi\n\n\n pathInfo = {\n tLength: 0,\n segments: []\n };\n len = paths._length - 1;\n var bezierData;\n totalLength = 0;\n\n for (i = 0; i < len; i += 1) {\n bezierData = bez.buildBezierData(paths.v[i], paths.v[i + 1], [paths.o[i][0] - paths.v[i][0], paths.o[i][1] - paths.v[i][1]], [paths.i[i + 1][0] - paths.v[i + 1][0], paths.i[i + 1][1] - paths.v[i + 1][1]]);\n pathInfo.tLength += bezierData.segmentLength;\n pathInfo.segments.push(bezierData);\n totalLength += bezierData.segmentLength;\n }\n\n i = len;\n\n if (mask.v.c) {\n bezierData = bez.buildBezierData(paths.v[i], paths.v[0], [paths.o[i][0] - paths.v[i][0], paths.o[i][1] - paths.v[i][1]], [paths.i[0][0] - paths.v[0][0], paths.i[0][1] - paths.v[0][1]]);\n pathInfo.tLength += bezierData.segmentLength;\n pathInfo.segments.push(bezierData);\n totalLength += bezierData.segmentLength;\n }\n\n this._pathData.pi = pathInfo;\n }\n\n pathInfo = this._pathData.pi;\n currentLength = this._pathData.f.v;\n segmentInd = 0;\n pointInd = 1;\n segmentLength = 0;\n flag = true;\n segments = pathInfo.segments;\n\n if (currentLength < 0 && mask.v.c) {\n if (pathInfo.tLength < Math.abs(currentLength)) {\n currentLength = -Math.abs(currentLength) % pathInfo.tLength;\n }\n\n segmentInd = segments.length - 1;\n points = segments[segmentInd].points;\n pointInd = points.length - 1;\n\n while (currentLength < 0) {\n currentLength += points[pointInd].partialLength;\n pointInd -= 1;\n\n if (pointInd < 0) {\n segmentInd -= 1;\n points = segments[segmentInd].points;\n pointInd = points.length - 1;\n }\n }\n }\n\n points = segments[segmentInd].points;\n prevPoint = points[pointInd - 1];\n currentPoint = points[pointInd];\n partialLength = currentPoint.partialLength;\n }\n\n len = letters.length;\n xPos = 0;\n yPos = 0;\n var yOff = documentData.finalSize * 1.2 * 0.714;\n var firstLine = true;\n var animatorProps;\n var animatorSelector;\n var j;\n var jLen;\n var letterValue;\n jLen = animators.length;\n var mult;\n var ind = -1;\n var offf;\n var xPathPos;\n var yPathPos;\n var initPathPos = currentLength;\n var initSegmentInd = segmentInd;\n var initPointInd = pointInd;\n var currentLine = -1;\n var elemOpacity;\n var sc;\n var sw;\n var fc;\n var k;\n var letterSw;\n var letterSc;\n var letterFc;\n var letterM = '';\n var letterP = this.defaultPropsArray;\n var letterO; //\n\n if (documentData.j === 2 || documentData.j === 1) {\n var animatorJustifyOffset = 0;\n var animatorFirstCharOffset = 0;\n var justifyOffsetMult = documentData.j === 2 ? -0.5 : -1;\n var lastIndex = 0;\n var isNewLine = true;\n\n for (i = 0; i < len; i += 1) {\n if (letters[i].n) {\n if (animatorJustifyOffset) {\n animatorJustifyOffset += animatorFirstCharOffset;\n }\n\n while (lastIndex < i) {\n letters[lastIndex].animatorJustifyOffset = animatorJustifyOffset;\n lastIndex += 1;\n }\n\n animatorJustifyOffset = 0;\n isNewLine = true;\n } else {\n for (j = 0; j < jLen; j += 1) {\n animatorProps = animators[j].a;\n\n if (animatorProps.t.propType) {\n if (isNewLine && documentData.j === 2) {\n animatorFirstCharOffset += animatorProps.t.v * justifyOffsetMult;\n }\n\n animatorSelector = animators[j].s;\n mult = animatorSelector.getMult(letters[i].anIndexes[j], textData.a[j].s.totalChars);\n\n if (mult.length) {\n animatorJustifyOffset += animatorProps.t.v * mult[0] * justifyOffsetMult;\n } else {\n animatorJustifyOffset += animatorProps.t.v * mult * justifyOffsetMult;\n }\n }\n }\n\n isNewLine = false;\n }\n }\n\n if (animatorJustifyOffset) {\n animatorJustifyOffset += animatorFirstCharOffset;\n }\n\n while (lastIndex < i) {\n letters[lastIndex].animatorJustifyOffset = animatorJustifyOffset;\n lastIndex += 1;\n }\n } //\n\n\n for (i = 0; i < len; i += 1) {\n matrixHelper.reset();\n elemOpacity = 1;\n\n if (letters[i].n) {\n xPos = 0;\n yPos += documentData.yOffset;\n yPos += firstLine ? 1 : 0;\n currentLength = initPathPos;\n firstLine = false;\n\n if (this._hasMaskedPath) {\n segmentInd = initSegmentInd;\n pointInd = initPointInd;\n points = segments[segmentInd].points;\n prevPoint = points[pointInd - 1];\n currentPoint = points[pointInd];\n partialLength = currentPoint.partialLength;\n segmentLength = 0;\n }\n\n letterM = '';\n letterFc = '';\n letterSw = '';\n letterO = '';\n letterP = this.defaultPropsArray;\n } else {\n if (this._hasMaskedPath) {\n if (currentLine !== letters[i].line) {\n switch (documentData.j) {\n case 1:\n currentLength += totalLength - documentData.lineWidths[letters[i].line];\n break;\n\n case 2:\n currentLength += (totalLength - documentData.lineWidths[letters[i].line]) / 2;\n break;\n\n default:\n break;\n }\n\n currentLine = letters[i].line;\n }\n\n if (ind !== letters[i].ind) {\n if (letters[ind]) {\n currentLength += letters[ind].extra;\n }\n\n currentLength += letters[i].an / 2;\n ind = letters[i].ind;\n }\n\n currentLength += alignment[0] * letters[i].an * 0.005;\n var animatorOffset = 0;\n\n for (j = 0; j < jLen; j += 1) {\n animatorProps = animators[j].a;\n\n if (animatorProps.p.propType) {\n animatorSelector = animators[j].s;\n mult = animatorSelector.getMult(letters[i].anIndexes[j], textData.a[j].s.totalChars);\n\n if (mult.length) {\n animatorOffset += animatorProps.p.v[0] * mult[0];\n } else {\n animatorOffset += animatorProps.p.v[0] * mult;\n }\n }\n\n if (animatorProps.a.propType) {\n animatorSelector = animators[j].s;\n mult = animatorSelector.getMult(letters[i].anIndexes[j], textData.a[j].s.totalChars);\n\n if (mult.length) {\n animatorOffset += animatorProps.a.v[0] * mult[0];\n } else {\n animatorOffset += animatorProps.a.v[0] * mult;\n }\n }\n }\n\n flag = true; // Force alignment only works with a single line for now\n\n if (this._pathData.a.v) {\n currentLength = letters[0].an * 0.5 + (totalLength - this._pathData.f.v - letters[0].an * 0.5 - letters[letters.length - 1].an * 0.5) * ind / (len - 1);\n currentLength += this._pathData.f.v;\n }\n\n while (flag) {\n if (segmentLength + partialLength >= currentLength + animatorOffset || !points) {\n perc = (currentLength + animatorOffset - segmentLength) / currentPoint.partialLength;\n xPathPos = prevPoint.point[0] + (currentPoint.point[0] - prevPoint.point[0]) * perc;\n yPathPos = prevPoint.point[1] + (currentPoint.point[1] - prevPoint.point[1]) * perc;\n matrixHelper.translate(-alignment[0] * letters[i].an * 0.005, -(alignment[1] * yOff) * 0.01);\n flag = false;\n } else if (points) {\n segmentLength += currentPoint.partialLength;\n pointInd += 1;\n\n if (pointInd >= points.length) {\n pointInd = 0;\n segmentInd += 1;\n\n if (!segments[segmentInd]) {\n if (mask.v.c) {\n pointInd = 0;\n segmentInd = 0;\n points = segments[segmentInd].points;\n } else {\n segmentLength -= currentPoint.partialLength;\n points = null;\n }\n } else {\n points = segments[segmentInd].points;\n }\n }\n\n if (points) {\n prevPoint = currentPoint;\n currentPoint = points[pointInd];\n partialLength = currentPoint.partialLength;\n }\n }\n }\n\n offf = letters[i].an / 2 - letters[i].add;\n matrixHelper.translate(-offf, 0, 0);\n } else {\n offf = letters[i].an / 2 - letters[i].add;\n matrixHelper.translate(-offf, 0, 0); // Grouping alignment\n\n matrixHelper.translate(-alignment[0] * letters[i].an * 0.005, -alignment[1] * yOff * 0.01, 0);\n }\n\n for (j = 0; j < jLen; j += 1) {\n animatorProps = animators[j].a;\n\n if (animatorProps.t.propType) {\n animatorSelector = animators[j].s;\n mult = animatorSelector.getMult(letters[i].anIndexes[j], textData.a[j].s.totalChars); // This condition is to prevent applying tracking to first character in each line. Might be better to use a boolean \"isNewLine\"\n\n if (xPos !== 0 || documentData.j !== 0) {\n if (this._hasMaskedPath) {\n if (mult.length) {\n currentLength += animatorProps.t.v * mult[0];\n } else {\n currentLength += animatorProps.t.v * mult;\n }\n } else if (mult.length) {\n xPos += animatorProps.t.v * mult[0];\n } else {\n xPos += animatorProps.t.v * mult;\n }\n }\n }\n }\n\n if (documentData.strokeWidthAnim) {\n sw = documentData.sw || 0;\n }\n\n if (documentData.strokeColorAnim) {\n if (documentData.sc) {\n sc = [documentData.sc[0], documentData.sc[1], documentData.sc[2]];\n } else {\n sc = [0, 0, 0];\n }\n }\n\n if (documentData.fillColorAnim && documentData.fc) {\n fc = [documentData.fc[0], documentData.fc[1], documentData.fc[2]];\n }\n\n for (j = 0; j < jLen; j += 1) {\n animatorProps = animators[j].a;\n\n if (animatorProps.a.propType) {\n animatorSelector = animators[j].s;\n mult = animatorSelector.getMult(letters[i].anIndexes[j], textData.a[j].s.totalChars);\n\n if (mult.length) {\n matrixHelper.translate(-animatorProps.a.v[0] * mult[0], -animatorProps.a.v[1] * mult[1], animatorProps.a.v[2] * mult[2]);\n } else {\n matrixHelper.translate(-animatorProps.a.v[0] * mult, -animatorProps.a.v[1] * mult, animatorProps.a.v[2] * mult);\n }\n }\n }\n\n for (j = 0; j < jLen; j += 1) {\n animatorProps = animators[j].a;\n\n if (animatorProps.s.propType) {\n animatorSelector = animators[j].s;\n mult = animatorSelector.getMult(letters[i].anIndexes[j], textData.a[j].s.totalChars);\n\n if (mult.length) {\n matrixHelper.scale(1 + (animatorProps.s.v[0] - 1) * mult[0], 1 + (animatorProps.s.v[1] - 1) * mult[1], 1);\n } else {\n matrixHelper.scale(1 + (animatorProps.s.v[0] - 1) * mult, 1 + (animatorProps.s.v[1] - 1) * mult, 1);\n }\n }\n }\n\n for (j = 0; j < jLen; j += 1) {\n animatorProps = animators[j].a;\n animatorSelector = animators[j].s;\n mult = animatorSelector.getMult(letters[i].anIndexes[j], textData.a[j].s.totalChars);\n\n if (animatorProps.sk.propType) {\n if (mult.length) {\n matrixHelper.skewFromAxis(-animatorProps.sk.v * mult[0], animatorProps.sa.v * mult[1]);\n } else {\n matrixHelper.skewFromAxis(-animatorProps.sk.v * mult, animatorProps.sa.v * mult);\n }\n }\n\n if (animatorProps.r.propType) {\n if (mult.length) {\n matrixHelper.rotateZ(-animatorProps.r.v * mult[2]);\n } else {\n matrixHelper.rotateZ(-animatorProps.r.v * mult);\n }\n }\n\n if (animatorProps.ry.propType) {\n if (mult.length) {\n matrixHelper.rotateY(animatorProps.ry.v * mult[1]);\n } else {\n matrixHelper.rotateY(animatorProps.ry.v * mult);\n }\n }\n\n if (animatorProps.rx.propType) {\n if (mult.length) {\n matrixHelper.rotateX(animatorProps.rx.v * mult[0]);\n } else {\n matrixHelper.rotateX(animatorProps.rx.v * mult);\n }\n }\n\n if (animatorProps.o.propType) {\n if (mult.length) {\n elemOpacity += (animatorProps.o.v * mult[0] - elemOpacity) * mult[0];\n } else {\n elemOpacity += (animatorProps.o.v * mult - elemOpacity) * mult;\n }\n }\n\n if (documentData.strokeWidthAnim && animatorProps.sw.propType) {\n if (mult.length) {\n sw += animatorProps.sw.v * mult[0];\n } else {\n sw += animatorProps.sw.v * mult;\n }\n }\n\n if (documentData.strokeColorAnim && animatorProps.sc.propType) {\n for (k = 0; k < 3; k += 1) {\n if (mult.length) {\n sc[k] += (animatorProps.sc.v[k] - sc[k]) * mult[0];\n } else {\n sc[k] += (animatorProps.sc.v[k] - sc[k]) * mult;\n }\n }\n }\n\n if (documentData.fillColorAnim && documentData.fc) {\n if (animatorProps.fc.propType) {\n for (k = 0; k < 3; k += 1) {\n if (mult.length) {\n fc[k] += (animatorProps.fc.v[k] - fc[k]) * mult[0];\n } else {\n fc[k] += (animatorProps.fc.v[k] - fc[k]) * mult;\n }\n }\n }\n\n if (animatorProps.fh.propType) {\n if (mult.length) {\n fc = addHueToRGB(fc, animatorProps.fh.v * mult[0]);\n } else {\n fc = addHueToRGB(fc, animatorProps.fh.v * mult);\n }\n }\n\n if (animatorProps.fs.propType) {\n if (mult.length) {\n fc = addSaturationToRGB(fc, animatorProps.fs.v * mult[0]);\n } else {\n fc = addSaturationToRGB(fc, animatorProps.fs.v * mult);\n }\n }\n\n if (animatorProps.fb.propType) {\n if (mult.length) {\n fc = addBrightnessToRGB(fc, animatorProps.fb.v * mult[0]);\n } else {\n fc = addBrightnessToRGB(fc, animatorProps.fb.v * mult);\n }\n }\n }\n }\n\n for (j = 0; j < jLen; j += 1) {\n animatorProps = animators[j].a;\n\n if (animatorProps.p.propType) {\n animatorSelector = animators[j].s;\n mult = animatorSelector.getMult(letters[i].anIndexes[j], textData.a[j].s.totalChars);\n\n if (this._hasMaskedPath) {\n if (mult.length) {\n matrixHelper.translate(0, animatorProps.p.v[1] * mult[0], -animatorProps.p.v[2] * mult[1]);\n } else {\n matrixHelper.translate(0, animatorProps.p.v[1] * mult, -animatorProps.p.v[2] * mult);\n }\n } else if (mult.length) {\n matrixHelper.translate(animatorProps.p.v[0] * mult[0], animatorProps.p.v[1] * mult[1], -animatorProps.p.v[2] * mult[2]);\n } else {\n matrixHelper.translate(animatorProps.p.v[0] * mult, animatorProps.p.v[1] * mult, -animatorProps.p.v[2] * mult);\n }\n }\n }\n\n if (documentData.strokeWidthAnim) {\n letterSw = sw < 0 ? 0 : sw;\n }\n\n if (documentData.strokeColorAnim) {\n letterSc = 'rgb(' + Math.round(sc[0] * 255) + ',' + Math.round(sc[1] * 255) + ',' + Math.round(sc[2] * 255) + ')';\n }\n\n if (documentData.fillColorAnim && documentData.fc) {\n letterFc = 'rgb(' + Math.round(fc[0] * 255) + ',' + Math.round(fc[1] * 255) + ',' + Math.round(fc[2] * 255) + ')';\n }\n\n if (this._hasMaskedPath) {\n matrixHelper.translate(0, -documentData.ls);\n matrixHelper.translate(0, alignment[1] * yOff * 0.01 + yPos, 0);\n\n if (this._pathData.p.v) {\n tanAngle = (currentPoint.point[1] - prevPoint.point[1]) / (currentPoint.point[0] - prevPoint.point[0]);\n var rot = Math.atan(tanAngle) * 180 / Math.PI;\n\n if (currentPoint.point[0] < prevPoint.point[0]) {\n rot += 180;\n }\n\n matrixHelper.rotate(-rot * Math.PI / 180);\n }\n\n matrixHelper.translate(xPathPos, yPathPos, 0);\n currentLength -= alignment[0] * letters[i].an * 0.005;\n\n if (letters[i + 1] && ind !== letters[i + 1].ind) {\n currentLength += letters[i].an / 2;\n currentLength += documentData.tr * 0.001 * documentData.finalSize;\n }\n } else {\n matrixHelper.translate(xPos, yPos, 0);\n\n if (documentData.ps) {\n // matrixHelper.translate(documentData.ps[0],documentData.ps[1],0);\n matrixHelper.translate(documentData.ps[0], documentData.ps[1] + documentData.ascent, 0);\n }\n\n switch (documentData.j) {\n case 1:\n matrixHelper.translate(letters[i].animatorJustifyOffset + documentData.justifyOffset + (documentData.boxWidth - documentData.lineWidths[letters[i].line]), 0, 0);\n break;\n\n case 2:\n matrixHelper.translate(letters[i].animatorJustifyOffset + documentData.justifyOffset + (documentData.boxWidth - documentData.lineWidths[letters[i].line]) / 2, 0, 0);\n break;\n\n default:\n break;\n }\n\n matrixHelper.translate(0, -documentData.ls);\n matrixHelper.translate(offf, 0, 0);\n matrixHelper.translate(alignment[0] * letters[i].an * 0.005, alignment[1] * yOff * 0.01, 0);\n xPos += letters[i].l + documentData.tr * 0.001 * documentData.finalSize;\n }\n\n if (renderType === 'html') {\n letterM = matrixHelper.toCSS();\n } else if (renderType === 'svg') {\n letterM = matrixHelper.to2dCSS();\n } else {\n letterP = [matrixHelper.props[0], matrixHelper.props[1], matrixHelper.props[2], matrixHelper.props[3], matrixHelper.props[4], matrixHelper.props[5], matrixHelper.props[6], matrixHelper.props[7], matrixHelper.props[8], matrixHelper.props[9], matrixHelper.props[10], matrixHelper.props[11], matrixHelper.props[12], matrixHelper.props[13], matrixHelper.props[14], matrixHelper.props[15]];\n }\n\n letterO = elemOpacity;\n }\n\n if (renderedLettersCount <= i) {\n letterValue = new LetterProps(letterO, letterSw, letterSc, letterFc, letterM, letterP);\n this.renderedLetters.push(letterValue);\n renderedLettersCount += 1;\n this.lettersChangedFlag = true;\n } else {\n letterValue = this.renderedLetters[i];\n this.lettersChangedFlag = letterValue.update(letterO, letterSw, letterSc, letterFc, letterM, letterP) || this.lettersChangedFlag;\n }\n }\n };\n\n TextAnimatorProperty.prototype.getValue = function () {\n if (this._elem.globalData.frameId === this._frameId) {\n return;\n }\n\n this._frameId = this._elem.globalData.frameId;\n this.iterateDynamicProperties();\n };\n\n TextAnimatorProperty.prototype.mHelper = new Matrix();\n TextAnimatorProperty.prototype.defaultPropsArray = [];\n extendPrototype([DynamicPropertyContainer], TextAnimatorProperty);\n\n function ITextElement() {}\n\n ITextElement.prototype.initElement = function (data, globalData, comp) {\n this.lettersChangedFlag = true;\n this.initFrame();\n this.initBaseData(data, globalData, comp);\n this.textProperty = new TextProperty(this, data.t, this.dynamicProperties);\n this.textAnimator = new TextAnimatorProperty(data.t, this.renderType, this);\n this.initTransform(data, globalData, comp);\n this.initHierarchy();\n this.initRenderable();\n this.initRendererElement();\n this.createContainerElements();\n this.createRenderableComponents();\n this.createContent();\n this.hide();\n this.textAnimator.searchProperties(this.dynamicProperties);\n };\n\n ITextElement.prototype.prepareFrame = function (num) {\n this._mdf = false;\n this.prepareRenderableFrame(num);\n this.prepareProperties(num, this.isInRange);\n };\n\n ITextElement.prototype.createPathShape = function (matrixHelper, shapes) {\n var j;\n var jLen = shapes.length;\n var pathNodes;\n var shapeStr = '';\n\n for (j = 0; j < jLen; j += 1) {\n if (shapes[j].ty === 'sh') {\n pathNodes = shapes[j].ks.k;\n shapeStr += buildShapeString(pathNodes, pathNodes.i.length, true, matrixHelper);\n }\n }\n\n return shapeStr;\n };\n\n ITextElement.prototype.updateDocumentData = function (newData, index) {\n this.textProperty.updateDocumentData(newData, index);\n };\n\n ITextElement.prototype.canResizeFont = function (_canResize) {\n this.textProperty.canResizeFont(_canResize);\n };\n\n ITextElement.prototype.setMinimumFontSize = function (_fontSize) {\n this.textProperty.setMinimumFontSize(_fontSize);\n };\n\n ITextElement.prototype.applyTextPropertiesToMatrix = function (documentData, matrixHelper, lineNumber, xPos, yPos) {\n if (documentData.ps) {\n matrixHelper.translate(documentData.ps[0], documentData.ps[1] + documentData.ascent, 0);\n }\n\n matrixHelper.translate(0, -documentData.ls, 0);\n\n switch (documentData.j) {\n case 1:\n matrixHelper.translate(documentData.justifyOffset + (documentData.boxWidth - documentData.lineWidths[lineNumber]), 0, 0);\n break;\n\n case 2:\n matrixHelper.translate(documentData.justifyOffset + (documentData.boxWidth - documentData.lineWidths[lineNumber]) / 2, 0, 0);\n break;\n\n default:\n break;\n }\n\n matrixHelper.translate(xPos, yPos, 0);\n };\n\n ITextElement.prototype.buildColor = function (colorData) {\n return 'rgb(' + Math.round(colorData[0] * 255) + ',' + Math.round(colorData[1] * 255) + ',' + Math.round(colorData[2] * 255) + ')';\n };\n\n ITextElement.prototype.emptyProp = new LetterProps();\n\n ITextElement.prototype.destroy = function () {};\n\n ITextElement.prototype.validateText = function () {\n if (this.textProperty._mdf || this.textProperty._isFirstFrame) {\n this.buildNewText();\n this.textProperty._isFirstFrame = false;\n this.textProperty._mdf = false;\n }\n };\n\n var emptyShapeData = {\n shapes: []\n };\n\n function SVGTextLottieElement(data, globalData, comp) {\n this.textSpans = [];\n this.renderType = 'svg';\n this.initElement(data, globalData, comp);\n }\n\n extendPrototype([BaseElement, TransformElement, SVGBaseElement, HierarchyElement, FrameElement, RenderableDOMElement, ITextElement], SVGTextLottieElement);\n\n SVGTextLottieElement.prototype.createContent = function () {\n if (this.data.singleShape && !this.globalData.fontManager.chars) {\n this.textContainer = createNS('text');\n }\n };\n\n SVGTextLottieElement.prototype.buildTextContents = function (textArray) {\n var i = 0;\n var len = textArray.length;\n var textContents = [];\n var currentTextContent = '';\n\n while (i < len) {\n if (textArray[i] === String.fromCharCode(13) || textArray[i] === String.fromCharCode(3)) {\n textContents.push(currentTextContent);\n currentTextContent = '';\n } else {\n currentTextContent += textArray[i];\n }\n\n i += 1;\n }\n\n textContents.push(currentTextContent);\n return textContents;\n };\n\n SVGTextLottieElement.prototype.buildShapeData = function (data, scale) {\n // data should probably be cloned to apply scale separately to each instance of a text on different layers\n // but since text internal content gets only rendered once and then it's never rerendered,\n // it's probably safe not to clone data and reuse always the same instance even if the object is mutated.\n // Avoiding cloning is preferred since cloning each character shape data is expensive\n if (data.shapes && data.shapes.length) {\n var shape = data.shapes[0];\n\n if (shape.it) {\n var shapeItem = shape.it[shape.it.length - 1];\n\n if (shapeItem.s) {\n shapeItem.s.k[0] = scale;\n shapeItem.s.k[1] = scale;\n }\n }\n }\n\n return data;\n };\n\n SVGTextLottieElement.prototype.buildNewText = function () {\n this.addDynamicProperty(this);\n var i;\n var len;\n var documentData = this.textProperty.currentData;\n this.renderedLetters = createSizedArray(documentData ? documentData.l.length : 0);\n\n if (documentData.fc) {\n this.layerElement.setAttribute('fill', this.buildColor(documentData.fc));\n } else {\n this.layerElement.setAttribute('fill', 'rgba(0,0,0,0)');\n }\n\n if (documentData.sc) {\n this.layerElement.setAttribute('stroke', this.buildColor(documentData.sc));\n this.layerElement.setAttribute('stroke-width', documentData.sw);\n }\n\n this.layerElement.setAttribute('font-size', documentData.finalSize);\n var fontData = this.globalData.fontManager.getFontByName(documentData.f);\n\n if (fontData.fClass) {\n this.layerElement.setAttribute('class', fontData.fClass);\n } else {\n this.layerElement.setAttribute('font-family', fontData.fFamily);\n var fWeight = documentData.fWeight;\n var fStyle = documentData.fStyle;\n this.layerElement.setAttribute('font-style', fStyle);\n this.layerElement.setAttribute('font-weight', fWeight);\n }\n\n this.layerElement.setAttribute('aria-label', documentData.t);\n var letters = documentData.l || [];\n var usesGlyphs = !!this.globalData.fontManager.chars;\n len = letters.length;\n var tSpan;\n var matrixHelper = this.mHelper;\n var shapeStr = '';\n var singleShape = this.data.singleShape;\n var xPos = 0;\n var yPos = 0;\n var firstLine = true;\n var trackingOffset = documentData.tr * 0.001 * documentData.finalSize;\n\n if (singleShape && !usesGlyphs && !documentData.sz) {\n var tElement = this.textContainer;\n var justify = 'start';\n\n switch (documentData.j) {\n case 1:\n justify = 'end';\n break;\n\n case 2:\n justify = 'middle';\n break;\n\n default:\n justify = 'start';\n break;\n }\n\n tElement.setAttribute('text-anchor', justify);\n tElement.setAttribute('letter-spacing', trackingOffset);\n var textContent = this.buildTextContents(documentData.finalText);\n len = textContent.length;\n yPos = documentData.ps ? documentData.ps[1] + documentData.ascent : 0;\n\n for (i = 0; i < len; i += 1) {\n tSpan = this.textSpans[i].span || createNS('tspan');\n tSpan.textContent = textContent[i];\n tSpan.setAttribute('x', 0);\n tSpan.setAttribute('y', yPos);\n tSpan.style.display = 'inherit';\n tElement.appendChild(tSpan);\n\n if (!this.textSpans[i]) {\n this.textSpans[i] = {\n span: null,\n glyph: null\n };\n }\n\n this.textSpans[i].span = tSpan;\n yPos += documentData.finalLineHeight;\n }\n\n this.layerElement.appendChild(tElement);\n } else {\n var cachedSpansLength = this.textSpans.length;\n var charData;\n\n for (i = 0; i < len; i += 1) {\n if (!this.textSpans[i]) {\n this.textSpans[i] = {\n span: null,\n childSpan: null,\n glyph: null\n };\n }\n\n if (!usesGlyphs || !singleShape || i === 0) {\n tSpan = cachedSpansLength > i ? this.textSpans[i].span : createNS(usesGlyphs ? 'g' : 'text');\n\n if (cachedSpansLength <= i) {\n tSpan.setAttribute('stroke-linecap', 'butt');\n tSpan.setAttribute('stroke-linejoin', 'round');\n tSpan.setAttribute('stroke-miterlimit', '4');\n this.textSpans[i].span = tSpan;\n\n if (usesGlyphs) {\n var childSpan = createNS('g');\n tSpan.appendChild(childSpan);\n this.textSpans[i].childSpan = childSpan;\n }\n\n this.textSpans[i].span = tSpan;\n this.layerElement.appendChild(tSpan);\n }\n\n tSpan.style.display = 'inherit';\n }\n\n matrixHelper.reset();\n\n if (singleShape) {\n if (letters[i].n) {\n xPos = -trackingOffset;\n yPos += documentData.yOffset;\n yPos += firstLine ? 1 : 0;\n firstLine = false;\n }\n\n this.applyTextPropertiesToMatrix(documentData, matrixHelper, letters[i].line, xPos, yPos);\n xPos += letters[i].l || 0; // xPos += letters[i].val === ' ' ? 0 : trackingOffset;\n\n xPos += trackingOffset;\n }\n\n if (usesGlyphs) {\n charData = this.globalData.fontManager.getCharData(documentData.finalText[i], fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);\n var glyphElement; // t === 1 means the character has been replaced with an animated shaped\n\n if (charData.t === 1) {\n glyphElement = new SVGCompElement(charData.data, this.globalData, this);\n } else {\n var data = emptyShapeData;\n\n if (charData.data && charData.data.shapes) {\n data = this.buildShapeData(charData.data, documentData.finalSize);\n }\n\n glyphElement = new SVGShapeElement(data, this.globalData, this);\n }\n\n if (this.textSpans[i].glyph) {\n var glyph = this.textSpans[i].glyph;\n this.textSpans[i].childSpan.removeChild(glyph.layerElement);\n glyph.destroy();\n }\n\n this.textSpans[i].glyph = glyphElement;\n glyphElement._debug = true;\n glyphElement.prepareFrame(0);\n glyphElement.renderFrame();\n this.textSpans[i].childSpan.appendChild(glyphElement.layerElement); // when using animated shapes, the layer will be scaled instead of replacing the internal scale\n // this might have issues with strokes and might need a different solution\n\n if (charData.t === 1) {\n this.textSpans[i].childSpan.setAttribute('transform', 'scale(' + documentData.finalSize / 100 + ',' + documentData.finalSize / 100 + ')');\n }\n } else {\n if (singleShape) {\n tSpan.setAttribute('transform', 'translate(' + matrixHelper.props[12] + ',' + matrixHelper.props[13] + ')');\n }\n\n tSpan.textContent = letters[i].val;\n tSpan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');\n } //\n\n }\n\n if (singleShape && tSpan) {\n tSpan.setAttribute('d', shapeStr);\n }\n }\n\n while (i < this.textSpans.length) {\n this.textSpans[i].span.style.display = 'none';\n i += 1;\n }\n\n this._sizeChanged = true;\n };\n\n SVGTextLottieElement.prototype.sourceRectAtTime = function () {\n this.prepareFrame(this.comp.renderedFrame - this.data.st);\n this.renderInnerContent();\n\n if (this._sizeChanged) {\n this._sizeChanged = false;\n var textBox = this.layerElement.getBBox();\n this.bbox = {\n top: textBox.y,\n left: textBox.x,\n width: textBox.width,\n height: textBox.height\n };\n }\n\n return this.bbox;\n };\n\n SVGTextLottieElement.prototype.getValue = function () {\n var i;\n var len = this.textSpans.length;\n var glyphElement;\n this.renderedFrame = this.comp.renderedFrame;\n\n for (i = 0; i < len; i += 1) {\n glyphElement = this.textSpans[i].glyph;\n\n if (glyphElement) {\n glyphElement.prepareFrame(this.comp.renderedFrame - this.data.st);\n\n if (glyphElement._mdf) {\n this._mdf = true;\n }\n }\n }\n };\n\n SVGTextLottieElement.prototype.renderInnerContent = function () {\n this.validateText();\n\n if (!this.data.singleShape || this._mdf) {\n this.textAnimator.getMeasures(this.textProperty.currentData, this.lettersChangedFlag);\n\n if (this.lettersChangedFlag || this.textAnimator.lettersChangedFlag) {\n this._sizeChanged = true;\n var i;\n var len;\n var renderedLetters = this.textAnimator.renderedLetters;\n var letters = this.textProperty.currentData.l;\n len = letters.length;\n var renderedLetter;\n var textSpan;\n var glyphElement;\n\n for (i = 0; i < len; i += 1) {\n if (!letters[i].n) {\n renderedLetter = renderedLetters[i];\n textSpan = this.textSpans[i].span;\n glyphElement = this.textSpans[i].glyph;\n\n if (glyphElement) {\n glyphElement.renderFrame();\n }\n\n if (renderedLetter._mdf.m) {\n textSpan.setAttribute('transform', renderedLetter.m);\n }\n\n if (renderedLetter._mdf.o) {\n textSpan.setAttribute('opacity', renderedLetter.o);\n }\n\n if (renderedLetter._mdf.sw) {\n textSpan.setAttribute('stroke-width', renderedLetter.sw);\n }\n\n if (renderedLetter._mdf.sc) {\n textSpan.setAttribute('stroke', renderedLetter.sc);\n }\n\n if (renderedLetter._mdf.fc) {\n textSpan.setAttribute('fill', renderedLetter.fc);\n }\n }\n }\n }\n }\n };\n\n function ISolidElement(data, globalData, comp) {\n this.initElement(data, globalData, comp);\n }\n\n extendPrototype([IImageElement], ISolidElement);\n\n ISolidElement.prototype.createContent = function () {\n var rect = createNS('rect'); /// /rect.style.width = this.data.sw;\n /// /rect.style.height = this.data.sh;\n /// /rect.style.fill = this.data.sc;\n\n rect.setAttribute('width', this.data.sw);\n rect.setAttribute('height', this.data.sh);\n rect.setAttribute('fill', this.data.sc);\n this.layerElement.appendChild(rect);\n };\n\n function NullElement(data, globalData, comp) {\n this.initFrame();\n this.initBaseData(data, globalData, comp);\n this.initFrame();\n this.initTransform(data, globalData, comp);\n this.initHierarchy();\n }\n\n NullElement.prototype.prepareFrame = function (num) {\n this.prepareProperties(num, true);\n };\n\n NullElement.prototype.renderFrame = function () {};\n\n NullElement.prototype.getBaseElement = function () {\n return null;\n };\n\n NullElement.prototype.destroy = function () {};\n\n NullElement.prototype.sourceRectAtTime = function () {};\n\n NullElement.prototype.hide = function () {};\n\n extendPrototype([BaseElement, TransformElement, HierarchyElement, FrameElement], NullElement);\n\n function SVGRendererBase() {}\n\n extendPrototype([BaseRenderer], SVGRendererBase);\n\n SVGRendererBase.prototype.createNull = function (data) {\n return new NullElement(data, this.globalData, this);\n };\n\n SVGRendererBase.prototype.createShape = function (data) {\n return new SVGShapeElement(data, this.globalData, this);\n };\n\n SVGRendererBase.prototype.createText = function (data) {\n return new SVGTextLottieElement(data, this.globalData, this);\n };\n\n SVGRendererBase.prototype.createImage = function (data) {\n return new IImageElement(data, this.globalData, this);\n };\n\n SVGRendererBase.prototype.createSolid = function (data) {\n return new ISolidElement(data, this.globalData, this);\n };\n\n SVGRendererBase.prototype.configAnimation = function (animData) {\n this.svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n this.svgElement.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');\n\n if (this.renderConfig.viewBoxSize) {\n this.svgElement.setAttribute('viewBox', this.renderConfig.viewBoxSize);\n } else {\n this.svgElement.setAttribute('viewBox', '0 0 ' + animData.w + ' ' + animData.h);\n }\n\n if (!this.renderConfig.viewBoxOnly) {\n this.svgElement.setAttribute('width', animData.w);\n this.svgElement.setAttribute('height', animData.h);\n this.svgElement.style.width = '100%';\n this.svgElement.style.height = '100%';\n this.svgElement.style.transform = 'translate3d(0,0,0)';\n this.svgElement.style.contentVisibility = this.renderConfig.contentVisibility;\n }\n\n if (this.renderConfig.width) {\n this.svgElement.setAttribute('width', this.renderConfig.width);\n }\n\n if (this.renderConfig.height) {\n this.svgElement.setAttribute('height', this.renderConfig.height);\n }\n\n if (this.renderConfig.className) {\n this.svgElement.setAttribute('class', this.renderConfig.className);\n }\n\n if (this.renderConfig.id) {\n this.svgElement.setAttribute('id', this.renderConfig.id);\n }\n\n if (this.renderConfig.focusable !== undefined) {\n this.svgElement.setAttribute('focusable', this.renderConfig.focusable);\n }\n\n this.svgElement.setAttribute('preserveAspectRatio', this.renderConfig.preserveAspectRatio); // this.layerElement.style.transform = 'translate3d(0,0,0)';\n // this.layerElement.style.transformOrigin = this.layerElement.style.mozTransformOrigin = this.layerElement.style.webkitTransformOrigin = this.layerElement.style['-webkit-transform'] = \"0px 0px 0px\";\n\n this.animationItem.wrapper.appendChild(this.svgElement); // Mask animation\n\n var defs = this.globalData.defs;\n this.setupGlobalData(animData, defs);\n this.globalData.progressiveLoad = this.renderConfig.progressiveLoad;\n this.data = animData;\n var maskElement = createNS('clipPath');\n var rect = createNS('rect');\n rect.setAttribute('width', animData.w);\n rect.setAttribute('height', animData.h);\n rect.setAttribute('x', 0);\n rect.setAttribute('y', 0);\n var maskId = createElementID();\n maskElement.setAttribute('id', maskId);\n maskElement.appendChild(rect);\n this.layerElement.setAttribute('clip-path', 'url(' + getLocationHref() + '#' + maskId + ')');\n defs.appendChild(maskElement);\n this.layers = animData.layers;\n this.elements = createSizedArray(animData.layers.length);\n };\n\n SVGRendererBase.prototype.destroy = function () {\n if (this.animationItem.wrapper) {\n this.animationItem.wrapper.innerText = '';\n }\n\n this.layerElement = null;\n this.globalData.defs = null;\n var i;\n var len = this.layers ? this.layers.length : 0;\n\n for (i = 0; i < len; i += 1) {\n if (this.elements[i] && this.elements[i].destroy) {\n this.elements[i].destroy();\n }\n }\n\n this.elements.length = 0;\n this.destroyed = true;\n this.animationItem = null;\n };\n\n SVGRendererBase.prototype.updateContainerSize = function () {};\n\n SVGRendererBase.prototype.findIndexByInd = function (ind) {\n var i = 0;\n var len = this.layers.length;\n\n for (i = 0; i < len; i += 1) {\n if (this.layers[i].ind === ind) {\n return i;\n }\n }\n\n return -1;\n };\n\n SVGRendererBase.prototype.buildItem = function (pos) {\n var elements = this.elements;\n\n if (elements[pos] || this.layers[pos].ty === 99) {\n return;\n }\n\n elements[pos] = true;\n var element = this.createItem(this.layers[pos]);\n elements[pos] = element;\n\n if (getExpressionsPlugin()) {\n if (this.layers[pos].ty === 0) {\n this.globalData.projectInterface.registerComposition(element);\n }\n\n element.initExpressions();\n }\n\n this.appendElementInPos(element, pos);\n\n if (this.layers[pos].tt) {\n var elementIndex = 'tp' in this.layers[pos] ? this.findIndexByInd(this.layers[pos].tp) : pos - 1;\n\n if (elementIndex === -1) {\n return;\n }\n\n if (!this.elements[elementIndex] || this.elements[elementIndex] === true) {\n this.buildItem(elementIndex);\n this.addPendingElement(element);\n } else {\n var matteElement = elements[elementIndex];\n var matteMask = matteElement.getMatte(this.layers[pos].tt);\n element.setMatte(matteMask);\n }\n }\n };\n\n SVGRendererBase.prototype.checkPendingElements = function () {\n while (this.pendingElements.length) {\n var element = this.pendingElements.pop();\n element.checkParenting();\n\n if (element.data.tt) {\n var i = 0;\n var len = this.elements.length;\n\n while (i < len) {\n if (this.elements[i] === element) {\n var elementIndex = 'tp' in element.data ? this.findIndexByInd(element.data.tp) : i - 1;\n var matteElement = this.elements[elementIndex];\n var matteMask = matteElement.getMatte(this.layers[i].tt);\n element.setMatte(matteMask);\n break;\n }\n\n i += 1;\n }\n }\n }\n };\n\n SVGRendererBase.prototype.renderFrame = function (num) {\n if (this.renderedFrame === num || this.destroyed) {\n return;\n }\n\n if (num === null) {\n num = this.renderedFrame;\n } else {\n this.renderedFrame = num;\n } // console.log('-------');\n // console.log('FRAME ',num);\n\n\n this.globalData.frameNum = num;\n this.globalData.frameId += 1;\n this.globalData.projectInterface.currentFrame = num;\n this.globalData._mdf = false;\n var i;\n var len = this.layers.length;\n\n if (!this.completeLayers) {\n this.checkLayers(num);\n }\n\n for (i = len - 1; i >= 0; i -= 1) {\n if (this.completeLayers || this.elements[i]) {\n this.elements[i].prepareFrame(num - this.layers[i].st);\n }\n }\n\n if (this.globalData._mdf) {\n for (i = 0; i < len; i += 1) {\n if (this.completeLayers || this.elements[i]) {\n this.elements[i].renderFrame();\n }\n }\n }\n };\n\n SVGRendererBase.prototype.appendElementInPos = function (element, pos) {\n var newElement = element.getBaseElement();\n\n if (!newElement) {\n return;\n }\n\n var i = 0;\n var nextElement;\n\n while (i < pos) {\n if (this.elements[i] && this.elements[i] !== true && this.elements[i].getBaseElement()) {\n nextElement = this.elements[i].getBaseElement();\n }\n\n i += 1;\n }\n\n if (nextElement) {\n this.layerElement.insertBefore(newElement, nextElement);\n } else {\n this.layerElement.appendChild(newElement);\n }\n };\n\n SVGRendererBase.prototype.hide = function () {\n this.layerElement.style.display = 'none';\n };\n\n SVGRendererBase.prototype.show = function () {\n this.layerElement.style.display = 'block';\n };\n\n function ICompElement() {}\n\n extendPrototype([BaseElement, TransformElement, HierarchyElement, FrameElement, RenderableDOMElement], ICompElement);\n\n ICompElement.prototype.initElement = function (data, globalData, comp) {\n this.initFrame();\n this.initBaseData(data, globalData, comp);\n this.initTransform(data, globalData, comp);\n this.initRenderable();\n this.initHierarchy();\n this.initRendererElement();\n this.createContainerElements();\n this.createRenderableComponents();\n\n if (this.data.xt || !globalData.progressiveLoad) {\n this.buildAllItems();\n }\n\n this.hide();\n };\n /* ICompElement.prototype.hide = function(){\r\n if(!this.hidden){\r\n this.hideElement();\r\n var i,len = this.elements.length;\r\n for( i = 0; i < len; i+=1 ){\r\n if(this.elements[i]){\r\n this.elements[i].hide();\r\n }\r\n }\r\n }\r\n }; */\n\n\n ICompElement.prototype.prepareFrame = function (num) {\n this._mdf = false;\n this.prepareRenderableFrame(num);\n this.prepareProperties(num, this.isInRange);\n\n if (!this.isInRange && !this.data.xt) {\n return;\n }\n\n if (!this.tm._placeholder) {\n var timeRemapped = this.tm.v;\n\n if (timeRemapped === this.data.op) {\n timeRemapped = this.data.op - 1;\n }\n\n this.renderedFrame = timeRemapped;\n } else {\n this.renderedFrame = num / this.data.sr;\n }\n\n var i;\n var len = this.elements.length;\n\n if (!this.completeLayers) {\n this.checkLayers(this.renderedFrame);\n } // This iteration needs to be backwards because of how expressions connect between each other\n\n\n for (i = len - 1; i >= 0; i -= 1) {\n if (this.completeLayers || this.elements[i]) {\n this.elements[i].prepareFrame(this.renderedFrame - this.layers[i].st);\n\n if (this.elements[i]._mdf) {\n this._mdf = true;\n }\n }\n }\n };\n\n ICompElement.prototype.renderInnerContent = function () {\n var i;\n var len = this.layers.length;\n\n for (i = 0; i < len; i += 1) {\n if (this.completeLayers || this.elements[i]) {\n this.elements[i].renderFrame();\n }\n }\n };\n\n ICompElement.prototype.setElements = function (elems) {\n this.elements = elems;\n };\n\n ICompElement.prototype.getElements = function () {\n return this.elements;\n };\n\n ICompElement.prototype.destroyElements = function () {\n var i;\n var len = this.layers.length;\n\n for (i = 0; i < len; i += 1) {\n if (this.elements[i]) {\n this.elements[i].destroy();\n }\n }\n };\n\n ICompElement.prototype.destroy = function () {\n this.destroyElements();\n this.destroyBaseElement();\n };\n\n function SVGCompElement(data, globalData, comp) {\n this.layers = data.layers;\n this.supports3d = true;\n this.completeLayers = false;\n this.pendingElements = [];\n this.elements = this.layers ? createSizedArray(this.layers.length) : [];\n this.initElement(data, globalData, comp);\n this.tm = data.tm ? PropertyFactory.getProp(this, data.tm, 0, globalData.frameRate, this) : {\n _placeholder: true\n };\n }\n\n extendPrototype([SVGRendererBase, ICompElement, SVGBaseElement], SVGCompElement);\n\n SVGCompElement.prototype.createComp = function (data) {\n return new SVGCompElement(data, this.globalData, this);\n };\n\n function SVGRenderer(animationItem, config) {\n this.animationItem = animationItem;\n this.layers = null;\n this.renderedFrame = -1;\n this.svgElement = createNS('svg');\n var ariaLabel = '';\n\n if (config && config.title) {\n var titleElement = createNS('title');\n var titleId = createElementID();\n titleElement.setAttribute('id', titleId);\n titleElement.textContent = config.title;\n this.svgElement.appendChild(titleElement);\n ariaLabel += titleId;\n }\n\n if (config && config.description) {\n var descElement = createNS('desc');\n var descId = createElementID();\n descElement.setAttribute('id', descId);\n descElement.textContent = config.description;\n this.svgElement.appendChild(descElement);\n ariaLabel += ' ' + descId;\n }\n\n if (ariaLabel) {\n this.svgElement.setAttribute('aria-labelledby', ariaLabel);\n }\n\n var defs = createNS('defs');\n this.svgElement.appendChild(defs);\n var maskElement = createNS('g');\n this.svgElement.appendChild(maskElement);\n this.layerElement = maskElement;\n this.renderConfig = {\n preserveAspectRatio: config && config.preserveAspectRatio || 'xMidYMid meet',\n imagePreserveAspectRatio: config && config.imagePreserveAspectRatio || 'xMidYMid slice',\n contentVisibility: config && config.contentVisibility || 'visible',\n progressiveLoad: config && config.progressiveLoad || false,\n hideOnTransparent: !(config && config.hideOnTransparent === false),\n viewBoxOnly: config && config.viewBoxOnly || false,\n viewBoxSize: config && config.viewBoxSize || false,\n className: config && config.className || '',\n id: config && config.id || '',\n focusable: config && config.focusable,\n filterSize: {\n width: config && config.filterSize && config.filterSize.width || '100%',\n height: config && config.filterSize && config.filterSize.height || '100%',\n x: config && config.filterSize && config.filterSize.x || '0%',\n y: config && config.filterSize && config.filterSize.y || '0%'\n },\n width: config && config.width,\n height: config && config.height,\n runExpressions: !config || config.runExpressions === undefined || config.runExpressions\n };\n this.globalData = {\n _mdf: false,\n frameNum: -1,\n defs: defs,\n renderConfig: this.renderConfig\n };\n this.elements = [];\n this.pendingElements = [];\n this.destroyed = false;\n this.rendererType = 'svg';\n }\n\n extendPrototype([SVGRendererBase], SVGRenderer);\n\n SVGRenderer.prototype.createComp = function (data) {\n return new SVGCompElement(data, this.globalData, this);\n };\n\n function ShapeTransformManager() {\n this.sequences = {};\n this.sequenceList = [];\n this.transform_key_count = 0;\n }\n\n ShapeTransformManager.prototype = {\n addTransformSequence: function addTransformSequence(transforms) {\n var i;\n var len = transforms.length;\n var key = '_';\n\n for (i = 0; i < len; i += 1) {\n key += transforms[i].transform.key + '_';\n }\n\n var sequence = this.sequences[key];\n\n if (!sequence) {\n sequence = {\n transforms: [].concat(transforms),\n finalTransform: new Matrix(),\n _mdf: false\n };\n this.sequences[key] = sequence;\n this.sequenceList.push(sequence);\n }\n\n return sequence;\n },\n processSequence: function processSequence(sequence, isFirstFrame) {\n var i = 0;\n var len = sequence.transforms.length;\n var _mdf = isFirstFrame;\n\n while (i < len && !isFirstFrame) {\n if (sequence.transforms[i].transform.mProps._mdf) {\n _mdf = true;\n break;\n }\n\n i += 1;\n }\n\n if (_mdf) {\n sequence.finalTransform.reset();\n\n for (i = len - 1; i >= 0; i -= 1) {\n sequence.finalTransform.multiply(sequence.transforms[i].transform.mProps.v);\n }\n }\n\n sequence._mdf = _mdf;\n },\n processSequences: function processSequences(isFirstFrame) {\n var i;\n var len = this.sequenceList.length;\n\n for (i = 0; i < len; i += 1) {\n this.processSequence(this.sequenceList[i], isFirstFrame);\n }\n },\n getNewKey: function getNewKey() {\n this.transform_key_count += 1;\n return '_' + this.transform_key_count;\n }\n };\n\n var lumaLoader = function lumaLoader() {\n var id = '__lottie_element_luma_buffer';\n var lumaBuffer = null;\n var lumaBufferCtx = null;\n var svg = null; // This alternate solution has a slight delay before the filter is applied, resulting in a flicker on the first frame.\n // Keeping this here for reference, and in the future, if offscreen canvas supports url filters, this can be used.\n // For now, neither of them work for offscreen canvas, so canvas workers can't support the luma track matte mask.\n // Naming it solution 2 to mark the extra comment lines.\n\n /*\r\n var svgString = [\r\n '',\r\n ].join('');\r\n var blob = new Blob([svgString], { type: 'image/svg+xml' });\r\n var url = URL.createObjectURL(blob);\r\n */\n\n function createLumaSvgFilter() {\n var _svg = createNS('svg');\n\n var fil = createNS('filter');\n var matrix = createNS('feColorMatrix');\n fil.setAttribute('id', id);\n matrix.setAttribute('type', 'matrix');\n matrix.setAttribute('color-interpolation-filters', 'sRGB');\n matrix.setAttribute('values', '0.3, 0.3, 0.3, 0, 0, 0.3, 0.3, 0.3, 0, 0, 0.3, 0.3, 0.3, 0, 0, 0.3, 0.3, 0.3, 0, 0');\n fil.appendChild(matrix);\n\n _svg.appendChild(fil);\n\n _svg.setAttribute('id', id + '_svg');\n\n if (featureSupport.svgLumaHidden) {\n _svg.style.display = 'none';\n }\n\n return _svg;\n }\n\n function loadLuma() {\n if (!lumaBuffer) {\n svg = createLumaSvgFilter();\n document.body.appendChild(svg);\n lumaBuffer = createTag('canvas');\n lumaBufferCtx = lumaBuffer.getContext('2d'); // lumaBufferCtx.filter = `url('${url}#__lottie_element_luma_buffer')`; // part of solution 2\n\n lumaBufferCtx.filter = 'url(#' + id + ')';\n lumaBufferCtx.fillStyle = 'rgba(0,0,0,0)';\n lumaBufferCtx.fillRect(0, 0, 1, 1);\n }\n }\n\n function getLuma(canvas) {\n if (!lumaBuffer) {\n loadLuma();\n }\n\n lumaBuffer.width = canvas.width;\n lumaBuffer.height = canvas.height; // lumaBufferCtx.filter = `url('${url}#__lottie_element_luma_buffer')`; // part of solution 2\n\n lumaBufferCtx.filter = 'url(#' + id + ')';\n return lumaBuffer;\n }\n\n return {\n load: loadLuma,\n get: getLuma\n };\n };\n\n function createCanvas(width, height) {\n if (featureSupport.offscreenCanvas) {\n return new OffscreenCanvas(width, height);\n }\n\n var canvas = createTag('canvas');\n canvas.width = width;\n canvas.height = height;\n return canvas;\n }\n\n var assetLoader = function () {\n return {\n loadLumaCanvas: lumaLoader.load,\n getLumaCanvas: lumaLoader.get,\n createCanvas: createCanvas\n };\n }();\n\n var registeredEffects = {};\n\n function CVEffects(elem) {\n var i;\n var len = elem.data.ef ? elem.data.ef.length : 0;\n this.filters = [];\n var filterManager;\n\n for (i = 0; i < len; i += 1) {\n filterManager = null;\n var type = elem.data.ef[i].ty;\n\n if (registeredEffects[type]) {\n var Effect = registeredEffects[type].effect;\n filterManager = new Effect(elem.effectsManager.effectElements[i], elem);\n }\n\n if (filterManager) {\n this.filters.push(filterManager);\n }\n }\n\n if (this.filters.length) {\n elem.addRenderableComponent(this);\n }\n }\n\n CVEffects.prototype.renderFrame = function (_isFirstFrame) {\n var i;\n var len = this.filters.length;\n\n for (i = 0; i < len; i += 1) {\n this.filters[i].renderFrame(_isFirstFrame);\n }\n };\n\n CVEffects.prototype.getEffects = function (type) {\n var i;\n var len = this.filters.length;\n var effects = [];\n\n for (i = 0; i < len; i += 1) {\n if (this.filters[i].type === type) {\n effects.push(this.filters[i]);\n }\n }\n\n return effects;\n };\n\n function registerEffect(id, effect) {\n registeredEffects[id] = {\n effect: effect\n };\n }\n\n function CVMaskElement(data, element) {\n this.data = data;\n this.element = element;\n this.masksProperties = this.data.masksProperties || [];\n this.viewData = createSizedArray(this.masksProperties.length);\n var i;\n var len = this.masksProperties.length;\n var hasMasks = false;\n\n for (i = 0; i < len; i += 1) {\n if (this.masksProperties[i].mode !== 'n') {\n hasMasks = true;\n }\n\n this.viewData[i] = ShapePropertyFactory.getShapeProp(this.element, this.masksProperties[i], 3);\n }\n\n this.hasMasks = hasMasks;\n\n if (hasMasks) {\n this.element.addRenderableComponent(this);\n }\n }\n\n CVMaskElement.prototype.renderFrame = function () {\n if (!this.hasMasks) {\n return;\n }\n\n var transform = this.element.finalTransform.mat;\n var ctx = this.element.canvasContext;\n var i;\n var len = this.masksProperties.length;\n var pt;\n var pts;\n var data;\n ctx.beginPath();\n\n for (i = 0; i < len; i += 1) {\n if (this.masksProperties[i].mode !== 'n') {\n if (this.masksProperties[i].inv) {\n ctx.moveTo(0, 0);\n ctx.lineTo(this.element.globalData.compSize.w, 0);\n ctx.lineTo(this.element.globalData.compSize.w, this.element.globalData.compSize.h);\n ctx.lineTo(0, this.element.globalData.compSize.h);\n ctx.lineTo(0, 0);\n }\n\n data = this.viewData[i].v;\n pt = transform.applyToPointArray(data.v[0][0], data.v[0][1], 0);\n ctx.moveTo(pt[0], pt[1]);\n var j;\n var jLen = data._length;\n\n for (j = 1; j < jLen; j += 1) {\n pts = transform.applyToTriplePoints(data.o[j - 1], data.i[j], data.v[j]);\n ctx.bezierCurveTo(pts[0], pts[1], pts[2], pts[3], pts[4], pts[5]);\n }\n\n pts = transform.applyToTriplePoints(data.o[j - 1], data.i[0], data.v[0]);\n ctx.bezierCurveTo(pts[0], pts[1], pts[2], pts[3], pts[4], pts[5]);\n }\n }\n\n this.element.globalData.renderer.save(true);\n ctx.clip();\n };\n\n CVMaskElement.prototype.getMaskProperty = MaskElement.prototype.getMaskProperty;\n\n CVMaskElement.prototype.destroy = function () {\n this.element = null;\n };\n\n function CVBaseElement() {}\n\n var operationsMap = {\n 1: 'source-in',\n 2: 'source-out',\n 3: 'source-in',\n 4: 'source-out'\n };\n CVBaseElement.prototype = {\n createElements: function createElements() {},\n initRendererElement: function initRendererElement() {},\n createContainerElements: function createContainerElements() {\n // If the layer is masked we will use two buffers to store each different states of the drawing\n // This solution is not ideal for several reason. But unfortunately, because of the recursive\n // nature of the render tree, it's the only simple way to make sure one inner mask doesn't override an outer mask.\n // TODO: try to reduce the size of these buffers to the size of the composition contaning the layer\n // It might be challenging because the layer most likely is transformed in some way\n if (this.data.tt >= 1) {\n this.buffers = [];\n var canvasContext = this.globalData.canvasContext;\n var bufferCanvas = assetLoader.createCanvas(canvasContext.canvas.width, canvasContext.canvas.height);\n this.buffers.push(bufferCanvas);\n var bufferCanvas2 = assetLoader.createCanvas(canvasContext.canvas.width, canvasContext.canvas.height);\n this.buffers.push(bufferCanvas2);\n\n if (this.data.tt >= 3 && !document._isProxy) {\n assetLoader.loadLumaCanvas();\n }\n }\n\n this.canvasContext = this.globalData.canvasContext;\n this.transformCanvas = this.globalData.transformCanvas;\n this.renderableEffectsManager = new CVEffects(this);\n this.searchEffectTransforms();\n },\n createContent: function createContent() {},\n setBlendMode: function setBlendMode() {\n var globalData = this.globalData;\n\n if (globalData.blendMode !== this.data.bm) {\n globalData.blendMode = this.data.bm;\n var blendModeValue = getBlendMode(this.data.bm);\n globalData.canvasContext.globalCompositeOperation = blendModeValue;\n }\n },\n createRenderableComponents: function createRenderableComponents() {\n this.maskManager = new CVMaskElement(this.data, this);\n this.transformEffects = this.renderableEffectsManager.getEffects(effectTypes.TRANSFORM_EFFECT);\n },\n hideElement: function hideElement() {\n if (!this.hidden && (!this.isInRange || this.isTransparent)) {\n this.hidden = true;\n }\n },\n showElement: function showElement() {\n if (this.isInRange && !this.isTransparent) {\n this.hidden = false;\n this._isFirstFrame = true;\n this.maskManager._isFirstFrame = true;\n }\n },\n clearCanvas: function clearCanvas(canvasContext) {\n canvasContext.clearRect(this.transformCanvas.tx, this.transformCanvas.ty, this.transformCanvas.w * this.transformCanvas.sx, this.transformCanvas.h * this.transformCanvas.sy);\n },\n prepareLayer: function prepareLayer() {\n if (this.data.tt >= 1) {\n var buffer = this.buffers[0];\n var bufferCtx = buffer.getContext('2d');\n this.clearCanvas(bufferCtx); // on the first buffer we store the current state of the global drawing\n\n bufferCtx.drawImage(this.canvasContext.canvas, 0, 0); // The next four lines are to clear the canvas\n // TODO: Check if there is a way to clear the canvas without resetting the transform\n\n this.currentTransform = this.canvasContext.getTransform();\n this.canvasContext.setTransform(1, 0, 0, 1, 0, 0);\n this.clearCanvas(this.canvasContext);\n this.canvasContext.setTransform(this.currentTransform);\n }\n },\n exitLayer: function exitLayer() {\n if (this.data.tt >= 1) {\n var buffer = this.buffers[1]; // On the second buffer we store the current state of the global drawing\n // that only contains the content of this layer\n // (if it is a composition, it also includes the nested layers)\n\n var bufferCtx = buffer.getContext('2d');\n this.clearCanvas(bufferCtx);\n bufferCtx.drawImage(this.canvasContext.canvas, 0, 0); // We clear the canvas again\n\n this.canvasContext.setTransform(1, 0, 0, 1, 0, 0);\n this.clearCanvas(this.canvasContext);\n this.canvasContext.setTransform(this.currentTransform); // We draw the mask\n\n var mask = this.comp.getElementById('tp' in this.data ? this.data.tp : this.data.ind - 1);\n mask.renderFrame(true); // We draw the second buffer (that contains the content of this layer)\n\n this.canvasContext.setTransform(1, 0, 0, 1, 0, 0); // If the mask is a Luma matte, we need to do two extra painting operations\n // the _isProxy check is to avoid drawing a fake canvas in workers that will throw an error\n\n if (this.data.tt >= 3 && !document._isProxy) {\n // We copy the painted mask to a buffer that has a color matrix filter applied to it\n // that applies the rgb values to the alpha channel\n var lumaBuffer = assetLoader.getLumaCanvas(this.canvasContext.canvas);\n var lumaBufferCtx = lumaBuffer.getContext('2d');\n lumaBufferCtx.drawImage(this.canvasContext.canvas, 0, 0);\n this.clearCanvas(this.canvasContext); // we repaint the context with the mask applied to it\n\n this.canvasContext.drawImage(lumaBuffer, 0, 0);\n }\n\n this.canvasContext.globalCompositeOperation = operationsMap[this.data.tt];\n this.canvasContext.drawImage(buffer, 0, 0); // We finally draw the first buffer (that contains the content of the global drawing)\n // We use destination-over to draw the global drawing below the current layer\n\n this.canvasContext.globalCompositeOperation = 'destination-over';\n this.canvasContext.drawImage(this.buffers[0], 0, 0);\n this.canvasContext.setTransform(this.currentTransform); // We reset the globalCompositeOperation to source-over, the standard type of operation\n\n this.canvasContext.globalCompositeOperation = 'source-over';\n }\n },\n renderFrame: function renderFrame(forceRender) {\n if (this.hidden || this.data.hd) {\n return;\n }\n\n if (this.data.td === 1 && !forceRender) {\n return;\n }\n\n this.renderTransform();\n this.renderRenderable();\n this.renderLocalTransform();\n this.setBlendMode();\n var forceRealStack = this.data.ty === 0;\n this.prepareLayer();\n this.globalData.renderer.save(forceRealStack);\n this.globalData.renderer.ctxTransform(this.finalTransform.localMat.props);\n this.globalData.renderer.ctxOpacity(this.finalTransform.localOpacity);\n this.renderInnerContent();\n this.globalData.renderer.restore(forceRealStack);\n this.exitLayer();\n\n if (this.maskManager.hasMasks) {\n this.globalData.renderer.restore(true);\n }\n\n if (this._isFirstFrame) {\n this._isFirstFrame = false;\n }\n },\n destroy: function destroy() {\n this.canvasContext = null;\n this.data = null;\n this.globalData = null;\n this.maskManager.destroy();\n },\n mHelper: new Matrix()\n };\n CVBaseElement.prototype.hide = CVBaseElement.prototype.hideElement;\n CVBaseElement.prototype.show = CVBaseElement.prototype.showElement;\n\n function CVShapeData(element, data, styles, transformsManager) {\n this.styledShapes = [];\n this.tr = [0, 0, 0, 0, 0, 0];\n var ty = 4;\n\n if (data.ty === 'rc') {\n ty = 5;\n } else if (data.ty === 'el') {\n ty = 6;\n } else if (data.ty === 'sr') {\n ty = 7;\n }\n\n this.sh = ShapePropertyFactory.getShapeProp(element, data, ty, element);\n var i;\n var len = styles.length;\n var styledShape;\n\n for (i = 0; i < len; i += 1) {\n if (!styles[i].closed) {\n styledShape = {\n transforms: transformsManager.addTransformSequence(styles[i].transforms),\n trNodes: []\n };\n this.styledShapes.push(styledShape);\n styles[i].elements.push(styledShape);\n }\n }\n }\n\n CVShapeData.prototype.setAsAnimated = SVGShapeData.prototype.setAsAnimated;\n\n function CVShapeElement(data, globalData, comp) {\n this.shapes = [];\n this.shapesData = data.shapes;\n this.stylesList = [];\n this.itemsData = [];\n this.prevViewData = [];\n this.shapeModifiers = [];\n this.processedElements = [];\n this.transformsManager = new ShapeTransformManager();\n this.initElement(data, globalData, comp);\n }\n\n extendPrototype([BaseElement, TransformElement, CVBaseElement, IShapeElement, HierarchyElement, FrameElement, RenderableElement], CVShapeElement);\n CVShapeElement.prototype.initElement = RenderableDOMElement.prototype.initElement;\n CVShapeElement.prototype.transformHelper = {\n opacity: 1,\n _opMdf: false\n };\n CVShapeElement.prototype.dashResetter = [];\n\n CVShapeElement.prototype.createContent = function () {\n this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, true, []);\n };\n\n CVShapeElement.prototype.createStyleElement = function (data, transforms) {\n var styleElem = {\n data: data,\n type: data.ty,\n preTransforms: this.transformsManager.addTransformSequence(transforms),\n transforms: [],\n elements: [],\n closed: data.hd === true\n };\n var elementData = {};\n\n if (data.ty === 'fl' || data.ty === 'st') {\n elementData.c = PropertyFactory.getProp(this, data.c, 1, 255, this);\n\n if (!elementData.c.k) {\n styleElem.co = 'rgb(' + bmFloor(elementData.c.v[0]) + ',' + bmFloor(elementData.c.v[1]) + ',' + bmFloor(elementData.c.v[2]) + ')';\n }\n } else if (data.ty === 'gf' || data.ty === 'gs') {\n elementData.s = PropertyFactory.getProp(this, data.s, 1, null, this);\n elementData.e = PropertyFactory.getProp(this, data.e, 1, null, this);\n elementData.h = PropertyFactory.getProp(this, data.h || {\n k: 0\n }, 0, 0.01, this);\n elementData.a = PropertyFactory.getProp(this, data.a || {\n k: 0\n }, 0, degToRads, this);\n elementData.g = new GradientProperty(this, data.g, this);\n }\n\n elementData.o = PropertyFactory.getProp(this, data.o, 0, 0.01, this);\n\n if (data.ty === 'st' || data.ty === 'gs') {\n styleElem.lc = lineCapEnum[data.lc || 2];\n styleElem.lj = lineJoinEnum[data.lj || 2];\n\n if (data.lj == 1) {\n // eslint-disable-line eqeqeq\n styleElem.ml = data.ml;\n }\n\n elementData.w = PropertyFactory.getProp(this, data.w, 0, null, this);\n\n if (!elementData.w.k) {\n styleElem.wi = elementData.w.v;\n }\n\n if (data.d) {\n var d = new DashProperty(this, data.d, 'canvas', this);\n elementData.d = d;\n\n if (!elementData.d.k) {\n styleElem.da = elementData.d.dashArray;\n styleElem[\"do\"] = elementData.d.dashoffset[0];\n }\n }\n } else {\n styleElem.r = data.r === 2 ? 'evenodd' : 'nonzero';\n }\n\n this.stylesList.push(styleElem);\n elementData.style = styleElem;\n return elementData;\n };\n\n CVShapeElement.prototype.createGroupElement = function () {\n var elementData = {\n it: [],\n prevViewData: []\n };\n return elementData;\n };\n\n CVShapeElement.prototype.createTransformElement = function (data) {\n var elementData = {\n transform: {\n opacity: 1,\n _opMdf: false,\n key: this.transformsManager.getNewKey(),\n op: PropertyFactory.getProp(this, data.o, 0, 0.01, this),\n mProps: TransformPropertyFactory.getTransformProperty(this, data, this)\n }\n };\n return elementData;\n };\n\n CVShapeElement.prototype.createShapeElement = function (data) {\n var elementData = new CVShapeData(this, data, this.stylesList, this.transformsManager);\n this.shapes.push(elementData);\n this.addShapeToModifiers(elementData);\n return elementData;\n };\n\n CVShapeElement.prototype.reloadShapes = function () {\n this._isFirstFrame = true;\n var i;\n var len = this.itemsData.length;\n\n for (i = 0; i < len; i += 1) {\n this.prevViewData[i] = this.itemsData[i];\n }\n\n this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, true, []);\n len = this.dynamicProperties.length;\n\n for (i = 0; i < len; i += 1) {\n this.dynamicProperties[i].getValue();\n }\n\n this.renderModifiers();\n this.transformsManager.processSequences(this._isFirstFrame);\n };\n\n CVShapeElement.prototype.addTransformToStyleList = function (transform) {\n var i;\n var len = this.stylesList.length;\n\n for (i = 0; i < len; i += 1) {\n if (!this.stylesList[i].closed) {\n this.stylesList[i].transforms.push(transform);\n }\n }\n };\n\n CVShapeElement.prototype.removeTransformFromStyleList = function () {\n var i;\n var len = this.stylesList.length;\n\n for (i = 0; i < len; i += 1) {\n if (!this.stylesList[i].closed) {\n this.stylesList[i].transforms.pop();\n }\n }\n };\n\n CVShapeElement.prototype.closeStyles = function (styles) {\n var i;\n var len = styles.length;\n\n for (i = 0; i < len; i += 1) {\n styles[i].closed = true;\n }\n };\n\n CVShapeElement.prototype.searchShapes = function (arr, itemsData, prevViewData, shouldRender, transforms) {\n var i;\n var len = arr.length - 1;\n var j;\n var jLen;\n var ownStyles = [];\n var ownModifiers = [];\n var processedPos;\n var modifier;\n var currentTransform;\n var ownTransforms = [].concat(transforms);\n\n for (i = len; i >= 0; i -= 1) {\n processedPos = this.searchProcessedElement(arr[i]);\n\n if (!processedPos) {\n arr[i]._shouldRender = shouldRender;\n } else {\n itemsData[i] = prevViewData[processedPos - 1];\n }\n\n if (arr[i].ty === 'fl' || arr[i].ty === 'st' || arr[i].ty === 'gf' || arr[i].ty === 'gs') {\n if (!processedPos) {\n itemsData[i] = this.createStyleElement(arr[i], ownTransforms);\n } else {\n itemsData[i].style.closed = false;\n }\n\n ownStyles.push(itemsData[i].style);\n } else if (arr[i].ty === 'gr') {\n if (!processedPos) {\n itemsData[i] = this.createGroupElement(arr[i]);\n } else {\n jLen = itemsData[i].it.length;\n\n for (j = 0; j < jLen; j += 1) {\n itemsData[i].prevViewData[j] = itemsData[i].it[j];\n }\n }\n\n this.searchShapes(arr[i].it, itemsData[i].it, itemsData[i].prevViewData, shouldRender, ownTransforms);\n } else if (arr[i].ty === 'tr') {\n if (!processedPos) {\n currentTransform = this.createTransformElement(arr[i]);\n itemsData[i] = currentTransform;\n }\n\n ownTransforms.push(itemsData[i]);\n this.addTransformToStyleList(itemsData[i]);\n } else if (arr[i].ty === 'sh' || arr[i].ty === 'rc' || arr[i].ty === 'el' || arr[i].ty === 'sr') {\n if (!processedPos) {\n itemsData[i] = this.createShapeElement(arr[i]);\n }\n } else if (arr[i].ty === 'tm' || arr[i].ty === 'rd' || arr[i].ty === 'pb' || arr[i].ty === 'zz' || arr[i].ty === 'op') {\n if (!processedPos) {\n modifier = ShapeModifiers.getModifier(arr[i].ty);\n modifier.init(this, arr[i]);\n itemsData[i] = modifier;\n this.shapeModifiers.push(modifier);\n } else {\n modifier = itemsData[i];\n modifier.closed = false;\n }\n\n ownModifiers.push(modifier);\n } else if (arr[i].ty === 'rp') {\n if (!processedPos) {\n modifier = ShapeModifiers.getModifier(arr[i].ty);\n itemsData[i] = modifier;\n modifier.init(this, arr, i, itemsData);\n this.shapeModifiers.push(modifier);\n shouldRender = false;\n } else {\n modifier = itemsData[i];\n modifier.closed = true;\n }\n\n ownModifiers.push(modifier);\n }\n\n this.addProcessedElement(arr[i], i + 1);\n }\n\n this.removeTransformFromStyleList();\n this.closeStyles(ownStyles);\n len = ownModifiers.length;\n\n for (i = 0; i < len; i += 1) {\n ownModifiers[i].closed = true;\n }\n };\n\n CVShapeElement.prototype.renderInnerContent = function () {\n this.transformHelper.opacity = 1;\n this.transformHelper._opMdf = false;\n this.renderModifiers();\n this.transformsManager.processSequences(this._isFirstFrame);\n this.renderShape(this.transformHelper, this.shapesData, this.itemsData, true);\n };\n\n CVShapeElement.prototype.renderShapeTransform = function (parentTransform, groupTransform) {\n if (parentTransform._opMdf || groupTransform.op._mdf || this._isFirstFrame) {\n groupTransform.opacity = parentTransform.opacity;\n groupTransform.opacity *= groupTransform.op.v;\n groupTransform._opMdf = true;\n }\n };\n\n CVShapeElement.prototype.drawLayer = function () {\n var i;\n var len = this.stylesList.length;\n var j;\n var jLen;\n var k;\n var kLen;\n var elems;\n var nodes;\n var renderer = this.globalData.renderer;\n var ctx = this.globalData.canvasContext;\n var type;\n var currentStyle;\n\n for (i = 0; i < len; i += 1) {\n currentStyle = this.stylesList[i];\n type = currentStyle.type; // Skipping style when\n // Stroke width equals 0\n // style should not be rendered (extra unused repeaters)\n // current opacity equals 0\n // global opacity equals 0\n\n if (!((type === 'st' || type === 'gs') && currentStyle.wi === 0 || !currentStyle.data._shouldRender || currentStyle.coOp === 0 || this.globalData.currentGlobalAlpha === 0)) {\n renderer.save();\n elems = currentStyle.elements;\n\n if (type === 'st' || type === 'gs') {\n renderer.ctxStrokeStyle(type === 'st' ? currentStyle.co : currentStyle.grd); // ctx.strokeStyle = type === 'st' ? currentStyle.co : currentStyle.grd;\n\n renderer.ctxLineWidth(currentStyle.wi); // ctx.lineWidth = currentStyle.wi;\n\n renderer.ctxLineCap(currentStyle.lc); // ctx.lineCap = currentStyle.lc;\n\n renderer.ctxLineJoin(currentStyle.lj); // ctx.lineJoin = currentStyle.lj;\n\n renderer.ctxMiterLimit(currentStyle.ml || 0); // ctx.miterLimit = currentStyle.ml || 0;\n } else {\n renderer.ctxFillStyle(type === 'fl' ? currentStyle.co : currentStyle.grd); // ctx.fillStyle = type === 'fl' ? currentStyle.co : currentStyle.grd;\n }\n\n renderer.ctxOpacity(currentStyle.coOp);\n\n if (type !== 'st' && type !== 'gs') {\n ctx.beginPath();\n }\n\n renderer.ctxTransform(currentStyle.preTransforms.finalTransform.props);\n jLen = elems.length;\n\n for (j = 0; j < jLen; j += 1) {\n if (type === 'st' || type === 'gs') {\n ctx.beginPath();\n\n if (currentStyle.da) {\n ctx.setLineDash(currentStyle.da);\n ctx.lineDashOffset = currentStyle[\"do\"];\n }\n }\n\n nodes = elems[j].trNodes;\n kLen = nodes.length;\n\n for (k = 0; k < kLen; k += 1) {\n if (nodes[k].t === 'm') {\n ctx.moveTo(nodes[k].p[0], nodes[k].p[1]);\n } else if (nodes[k].t === 'c') {\n 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]);\n } else {\n ctx.closePath();\n }\n }\n\n if (type === 'st' || type === 'gs') {\n // ctx.stroke();\n renderer.ctxStroke();\n\n if (currentStyle.da) {\n ctx.setLineDash(this.dashResetter);\n }\n }\n }\n\n if (type !== 'st' && type !== 'gs') {\n // ctx.fill(currentStyle.r);\n this.globalData.renderer.ctxFill(currentStyle.r);\n }\n\n renderer.restore();\n }\n }\n };\n\n CVShapeElement.prototype.renderShape = function (parentTransform, items, data, isMain) {\n var i;\n var len = items.length - 1;\n var groupTransform;\n groupTransform = parentTransform;\n\n for (i = len; i >= 0; i -= 1) {\n if (items[i].ty === 'tr') {\n groupTransform = data[i].transform;\n this.renderShapeTransform(parentTransform, groupTransform);\n } else if (items[i].ty === 'sh' || items[i].ty === 'el' || items[i].ty === 'rc' || items[i].ty === 'sr') {\n this.renderPath(items[i], data[i]);\n } else if (items[i].ty === 'fl') {\n this.renderFill(items[i], data[i], groupTransform);\n } else if (items[i].ty === 'st') {\n this.renderStroke(items[i], data[i], groupTransform);\n } else if (items[i].ty === 'gf' || items[i].ty === 'gs') {\n this.renderGradientFill(items[i], data[i], groupTransform);\n } else if (items[i].ty === 'gr') {\n this.renderShape(groupTransform, items[i].it, data[i].it);\n } else if (items[i].ty === 'tm') {//\n }\n }\n\n if (isMain) {\n this.drawLayer();\n }\n };\n\n CVShapeElement.prototype.renderStyledShape = function (styledShape, shape) {\n if (this._isFirstFrame || shape._mdf || styledShape.transforms._mdf) {\n var shapeNodes = styledShape.trNodes;\n var paths = shape.paths;\n var i;\n var len;\n var j;\n var jLen = paths._length;\n shapeNodes.length = 0;\n var groupTransformMat = styledShape.transforms.finalTransform;\n\n for (j = 0; j < jLen; j += 1) {\n var pathNodes = paths.shapes[j];\n\n if (pathNodes && pathNodes.v) {\n len = pathNodes._length;\n\n for (i = 1; i < len; i += 1) {\n if (i === 1) {\n shapeNodes.push({\n t: 'm',\n p: groupTransformMat.applyToPointArray(pathNodes.v[0][0], pathNodes.v[0][1], 0)\n });\n }\n\n shapeNodes.push({\n t: 'c',\n pts: groupTransformMat.applyToTriplePoints(pathNodes.o[i - 1], pathNodes.i[i], pathNodes.v[i])\n });\n }\n\n if (len === 1) {\n shapeNodes.push({\n t: 'm',\n p: groupTransformMat.applyToPointArray(pathNodes.v[0][0], pathNodes.v[0][1], 0)\n });\n }\n\n if (pathNodes.c && len) {\n shapeNodes.push({\n t: 'c',\n pts: groupTransformMat.applyToTriplePoints(pathNodes.o[i - 1], pathNodes.i[0], pathNodes.v[0])\n });\n shapeNodes.push({\n t: 'z'\n });\n }\n }\n }\n\n styledShape.trNodes = shapeNodes;\n }\n };\n\n CVShapeElement.prototype.renderPath = function (pathData, itemData) {\n if (pathData.hd !== true && pathData._shouldRender) {\n var i;\n var len = itemData.styledShapes.length;\n\n for (i = 0; i < len; i += 1) {\n this.renderStyledShape(itemData.styledShapes[i], itemData.sh);\n }\n }\n };\n\n CVShapeElement.prototype.renderFill = function (styleData, itemData, groupTransform) {\n var styleElem = itemData.style;\n\n if (itemData.c._mdf || this._isFirstFrame) {\n styleElem.co = 'rgb(' + bmFloor(itemData.c.v[0]) + ',' + bmFloor(itemData.c.v[1]) + ',' + bmFloor(itemData.c.v[2]) + ')';\n }\n\n if (itemData.o._mdf || groupTransform._opMdf || this._isFirstFrame) {\n styleElem.coOp = itemData.o.v * groupTransform.opacity;\n }\n };\n\n CVShapeElement.prototype.renderGradientFill = function (styleData, itemData, groupTransform) {\n var styleElem = itemData.style;\n var grd;\n\n if (!styleElem.grd || itemData.g._mdf || itemData.s._mdf || itemData.e._mdf || styleData.t !== 1 && (itemData.h._mdf || itemData.a._mdf)) {\n var ctx = this.globalData.canvasContext;\n var pt1 = itemData.s.v;\n var pt2 = itemData.e.v;\n\n if (styleData.t === 1) {\n grd = ctx.createLinearGradient(pt1[0], pt1[1], pt2[0], pt2[1]);\n } else {\n var rad = Math.sqrt(Math.pow(pt1[0] - pt2[0], 2) + Math.pow(pt1[1] - pt2[1], 2));\n var ang = Math.atan2(pt2[1] - pt1[1], pt2[0] - pt1[0]);\n var percent = itemData.h.v;\n\n if (percent >= 1) {\n percent = 0.99;\n } else if (percent <= -1) {\n percent = -0.99;\n }\n\n var dist = rad * percent;\n var x = Math.cos(ang + itemData.a.v) * dist + pt1[0];\n var y = Math.sin(ang + itemData.a.v) * dist + pt1[1];\n grd = ctx.createRadialGradient(x, y, 0, pt1[0], pt1[1], rad);\n }\n\n var i;\n var len = styleData.g.p;\n var cValues = itemData.g.c;\n var opacity = 1;\n\n for (i = 0; i < len; i += 1) {\n if (itemData.g._hasOpacity && itemData.g._collapsable) {\n opacity = itemData.g.o[i * 2 + 1];\n }\n\n grd.addColorStop(cValues[i * 4] / 100, 'rgba(' + cValues[i * 4 + 1] + ',' + cValues[i * 4 + 2] + ',' + cValues[i * 4 + 3] + ',' + opacity + ')');\n }\n\n styleElem.grd = grd;\n }\n\n styleElem.coOp = itemData.o.v * groupTransform.opacity;\n };\n\n CVShapeElement.prototype.renderStroke = function (styleData, itemData, groupTransform) {\n var styleElem = itemData.style;\n var d = itemData.d;\n\n if (d && (d._mdf || this._isFirstFrame)) {\n styleElem.da = d.dashArray;\n styleElem[\"do\"] = d.dashoffset[0];\n }\n\n if (itemData.c._mdf || this._isFirstFrame) {\n styleElem.co = 'rgb(' + bmFloor(itemData.c.v[0]) + ',' + bmFloor(itemData.c.v[1]) + ',' + bmFloor(itemData.c.v[2]) + ')';\n }\n\n if (itemData.o._mdf || groupTransform._opMdf || this._isFirstFrame) {\n styleElem.coOp = itemData.o.v * groupTransform.opacity;\n }\n\n if (itemData.w._mdf || this._isFirstFrame) {\n styleElem.wi = itemData.w.v;\n }\n };\n\n CVShapeElement.prototype.destroy = function () {\n this.shapesData = null;\n this.globalData = null;\n this.canvasContext = null;\n this.stylesList.length = 0;\n this.itemsData.length = 0;\n };\n\n function CVTextElement(data, globalData, comp) {\n this.textSpans = [];\n this.yOffset = 0;\n this.fillColorAnim = false;\n this.strokeColorAnim = false;\n this.strokeWidthAnim = false;\n this.stroke = false;\n this.fill = false;\n this.justifyOffset = 0;\n this.currentRender = null;\n this.renderType = 'canvas';\n this.values = {\n fill: 'rgba(0,0,0,0)',\n stroke: 'rgba(0,0,0,0)',\n sWidth: 0,\n fValue: ''\n };\n this.initElement(data, globalData, comp);\n }\n\n extendPrototype([BaseElement, TransformElement, CVBaseElement, HierarchyElement, FrameElement, RenderableElement, ITextElement], CVTextElement);\n CVTextElement.prototype.tHelper = createTag('canvas').getContext('2d');\n\n CVTextElement.prototype.buildNewText = function () {\n var documentData = this.textProperty.currentData;\n this.renderedLetters = createSizedArray(documentData.l ? documentData.l.length : 0);\n var hasFill = false;\n\n if (documentData.fc) {\n hasFill = true;\n this.values.fill = this.buildColor(documentData.fc);\n } else {\n this.values.fill = 'rgba(0,0,0,0)';\n }\n\n this.fill = hasFill;\n var hasStroke = false;\n\n if (documentData.sc) {\n hasStroke = true;\n this.values.stroke = this.buildColor(documentData.sc);\n this.values.sWidth = documentData.sw;\n }\n\n var fontData = this.globalData.fontManager.getFontByName(documentData.f);\n var i;\n var len;\n var letters = documentData.l;\n var matrixHelper = this.mHelper;\n this.stroke = hasStroke;\n this.values.fValue = documentData.finalSize + 'px ' + this.globalData.fontManager.getFontByName(documentData.f).fFamily;\n len = documentData.finalText.length; // this.tHelper.font = this.values.fValue;\n\n var charData;\n var shapeData;\n var k;\n var kLen;\n var shapes;\n var j;\n var jLen;\n var pathNodes;\n var commands;\n var pathArr;\n var singleShape = this.data.singleShape;\n var trackingOffset = documentData.tr * 0.001 * documentData.finalSize;\n var xPos = 0;\n var yPos = 0;\n var firstLine = true;\n var cnt = 0;\n\n for (i = 0; i < len; i += 1) {\n charData = this.globalData.fontManager.getCharData(documentData.finalText[i], fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);\n shapeData = charData && charData.data || {};\n matrixHelper.reset();\n\n if (singleShape && letters[i].n) {\n xPos = -trackingOffset;\n yPos += documentData.yOffset;\n yPos += firstLine ? 1 : 0;\n firstLine = false;\n }\n\n shapes = shapeData.shapes ? shapeData.shapes[0].it : [];\n jLen = shapes.length;\n matrixHelper.scale(documentData.finalSize / 100, documentData.finalSize / 100);\n\n if (singleShape) {\n this.applyTextPropertiesToMatrix(documentData, matrixHelper, letters[i].line, xPos, yPos);\n }\n\n commands = createSizedArray(jLen - 1);\n var commandsCounter = 0;\n\n for (j = 0; j < jLen; j += 1) {\n if (shapes[j].ty === 'sh') {\n kLen = shapes[j].ks.k.i.length;\n pathNodes = shapes[j].ks.k;\n pathArr = [];\n\n for (k = 1; k < kLen; k += 1) {\n if (k === 1) {\n pathArr.push(matrixHelper.applyToX(pathNodes.v[0][0], pathNodes.v[0][1], 0), matrixHelper.applyToY(pathNodes.v[0][0], pathNodes.v[0][1], 0));\n }\n\n 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));\n }\n\n 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));\n commands[commandsCounter] = pathArr;\n commandsCounter += 1;\n }\n }\n\n if (singleShape) {\n xPos += letters[i].l;\n xPos += trackingOffset;\n }\n\n if (this.textSpans[cnt]) {\n this.textSpans[cnt].elem = commands;\n } else {\n this.textSpans[cnt] = {\n elem: commands\n };\n }\n\n cnt += 1;\n }\n };\n\n CVTextElement.prototype.renderInnerContent = function () {\n this.validateText();\n var ctx = this.canvasContext;\n ctx.font = this.values.fValue;\n this.globalData.renderer.ctxLineCap('butt'); // ctx.lineCap = 'butt';\n\n this.globalData.renderer.ctxLineJoin('miter'); // ctx.lineJoin = 'miter';\n\n this.globalData.renderer.ctxMiterLimit(4); // ctx.miterLimit = 4;\n\n if (!this.data.singleShape) {\n this.textAnimator.getMeasures(this.textProperty.currentData, this.lettersChangedFlag);\n }\n\n var i;\n var len;\n var j;\n var jLen;\n var k;\n var kLen;\n var renderedLetters = this.textAnimator.renderedLetters;\n var letters = this.textProperty.currentData.l;\n len = letters.length;\n var renderedLetter;\n var lastFill = null;\n var lastStroke = null;\n var lastStrokeW = null;\n var commands;\n var pathArr;\n var renderer = this.globalData.renderer;\n\n for (i = 0; i < len; i += 1) {\n if (!letters[i].n) {\n renderedLetter = renderedLetters[i];\n\n if (renderedLetter) {\n renderer.save();\n renderer.ctxTransform(renderedLetter.p);\n renderer.ctxOpacity(renderedLetter.o);\n }\n\n if (this.fill) {\n if (renderedLetter && renderedLetter.fc) {\n if (lastFill !== renderedLetter.fc) {\n renderer.ctxFillStyle(renderedLetter.fc);\n lastFill = renderedLetter.fc; // ctx.fillStyle = renderedLetter.fc;\n }\n } else if (lastFill !== this.values.fill) {\n lastFill = this.values.fill;\n renderer.ctxFillStyle(this.values.fill); // ctx.fillStyle = this.values.fill;\n }\n\n commands = this.textSpans[i].elem;\n jLen = commands.length;\n this.globalData.canvasContext.beginPath();\n\n for (j = 0; j < jLen; j += 1) {\n pathArr = commands[j];\n kLen = pathArr.length;\n this.globalData.canvasContext.moveTo(pathArr[0], pathArr[1]);\n\n for (k = 2; k < kLen; k += 6) {\n this.globalData.canvasContext.bezierCurveTo(pathArr[k], pathArr[k + 1], pathArr[k + 2], pathArr[k + 3], pathArr[k + 4], pathArr[k + 5]);\n }\n }\n\n this.globalData.canvasContext.closePath();\n renderer.ctxFill(); // this.globalData.canvasContext.fill();\n /// ctx.fillText(this.textSpans[i].val,0,0);\n }\n\n if (this.stroke) {\n if (renderedLetter && renderedLetter.sw) {\n if (lastStrokeW !== renderedLetter.sw) {\n lastStrokeW = renderedLetter.sw;\n renderer.ctxLineWidth(renderedLetter.sw); // ctx.lineWidth = renderedLetter.sw;\n }\n } else if (lastStrokeW !== this.values.sWidth) {\n lastStrokeW = this.values.sWidth;\n renderer.ctxLineWidth(this.values.sWidth); // ctx.lineWidth = this.values.sWidth;\n }\n\n if (renderedLetter && renderedLetter.sc) {\n if (lastStroke !== renderedLetter.sc) {\n lastStroke = renderedLetter.sc;\n renderer.ctxStrokeStyle(renderedLetter.sc); // ctx.strokeStyle = renderedLetter.sc;\n }\n } else if (lastStroke !== this.values.stroke) {\n lastStroke = this.values.stroke;\n renderer.ctxStrokeStyle(this.values.stroke); // ctx.strokeStyle = this.values.stroke;\n }\n\n commands = this.textSpans[i].elem;\n jLen = commands.length;\n this.globalData.canvasContext.beginPath();\n\n for (j = 0; j < jLen; j += 1) {\n pathArr = commands[j];\n kLen = pathArr.length;\n this.globalData.canvasContext.moveTo(pathArr[0], pathArr[1]);\n\n for (k = 2; k < kLen; k += 6) {\n this.globalData.canvasContext.bezierCurveTo(pathArr[k], pathArr[k + 1], pathArr[k + 2], pathArr[k + 3], pathArr[k + 4], pathArr[k + 5]);\n }\n }\n\n this.globalData.canvasContext.closePath();\n renderer.ctxStroke(); // this.globalData.canvasContext.stroke();\n /// ctx.strokeText(letters[i].val,0,0);\n }\n\n if (renderedLetter) {\n this.globalData.renderer.restore();\n }\n }\n }\n };\n\n function CVImageElement(data, globalData, comp) {\n this.assetData = globalData.getAssetData(data.refId);\n this.img = globalData.imageLoader.getAsset(this.assetData);\n this.initElement(data, globalData, comp);\n }\n\n extendPrototype([BaseElement, TransformElement, CVBaseElement, HierarchyElement, FrameElement, RenderableElement], CVImageElement);\n CVImageElement.prototype.initElement = SVGShapeElement.prototype.initElement;\n CVImageElement.prototype.prepareFrame = IImageElement.prototype.prepareFrame;\n\n CVImageElement.prototype.createContent = function () {\n if (this.img.width && (this.assetData.w !== this.img.width || this.assetData.h !== this.img.height)) {\n var canvas = createTag('canvas');\n canvas.width = this.assetData.w;\n canvas.height = this.assetData.h;\n var ctx = canvas.getContext('2d');\n var imgW = this.img.width;\n var imgH = this.img.height;\n var imgRel = imgW / imgH;\n var canvasRel = this.assetData.w / this.assetData.h;\n var widthCrop;\n var heightCrop;\n var par = this.assetData.pr || this.globalData.renderConfig.imagePreserveAspectRatio;\n\n if (imgRel > canvasRel && par === 'xMidYMid slice' || imgRel < canvasRel && par !== 'xMidYMid slice') {\n heightCrop = imgH;\n widthCrop = heightCrop * canvasRel;\n } else {\n widthCrop = imgW;\n heightCrop = widthCrop / canvasRel;\n }\n\n ctx.drawImage(this.img, (imgW - widthCrop) / 2, (imgH - heightCrop) / 2, widthCrop, heightCrop, 0, 0, this.assetData.w, this.assetData.h);\n this.img = canvas;\n }\n };\n\n CVImageElement.prototype.renderInnerContent = function () {\n this.canvasContext.drawImage(this.img, 0, 0);\n };\n\n CVImageElement.prototype.destroy = function () {\n this.img = null;\n };\n\n function CVSolidElement(data, globalData, comp) {\n this.initElement(data, globalData, comp);\n }\n\n extendPrototype([BaseElement, TransformElement, CVBaseElement, HierarchyElement, FrameElement, RenderableElement], CVSolidElement);\n CVSolidElement.prototype.initElement = SVGShapeElement.prototype.initElement;\n CVSolidElement.prototype.prepareFrame = IImageElement.prototype.prepareFrame;\n\n CVSolidElement.prototype.renderInnerContent = function () {\n // var ctx = this.canvasContext;\n this.globalData.renderer.ctxFillStyle(this.data.sc); // ctx.fillStyle = this.data.sc;\n\n this.globalData.renderer.ctxFillRect(0, 0, this.data.sw, this.data.sh); // ctx.fillRect(0, 0, this.data.sw, this.data.sh);\n //\n };\n\n function CanvasRendererBase() {}\n\n extendPrototype([BaseRenderer], CanvasRendererBase);\n\n CanvasRendererBase.prototype.createShape = function (data) {\n return new CVShapeElement(data, this.globalData, this);\n };\n\n CanvasRendererBase.prototype.createText = function (data) {\n return new CVTextElement(data, this.globalData, this);\n };\n\n CanvasRendererBase.prototype.createImage = function (data) {\n return new CVImageElement(data, this.globalData, this);\n };\n\n CanvasRendererBase.prototype.createSolid = function (data) {\n return new CVSolidElement(data, this.globalData, this);\n };\n\n CanvasRendererBase.prototype.createNull = SVGRenderer.prototype.createNull;\n\n CanvasRendererBase.prototype.ctxTransform = function (props) {\n if (props[0] === 1 && props[1] === 0 && props[4] === 0 && props[5] === 1 && props[12] === 0 && props[13] === 0) {\n return;\n }\n\n this.canvasContext.transform(props[0], props[1], props[4], props[5], props[12], props[13]);\n };\n\n CanvasRendererBase.prototype.ctxOpacity = function (op) {\n this.canvasContext.globalAlpha *= op < 0 ? 0 : op;\n };\n\n CanvasRendererBase.prototype.ctxFillStyle = function (value) {\n this.canvasContext.fillStyle = value;\n };\n\n CanvasRendererBase.prototype.ctxStrokeStyle = function (value) {\n this.canvasContext.strokeStyle = value;\n };\n\n CanvasRendererBase.prototype.ctxLineWidth = function (value) {\n this.canvasContext.lineWidth = value;\n };\n\n CanvasRendererBase.prototype.ctxLineCap = function (value) {\n this.canvasContext.lineCap = value;\n };\n\n CanvasRendererBase.prototype.ctxLineJoin = function (value) {\n this.canvasContext.lineJoin = value;\n };\n\n CanvasRendererBase.prototype.ctxMiterLimit = function (value) {\n this.canvasContext.miterLimit = value;\n };\n\n CanvasRendererBase.prototype.ctxFill = function (rule) {\n this.canvasContext.fill(rule);\n };\n\n CanvasRendererBase.prototype.ctxFillRect = function (x, y, w, h) {\n this.canvasContext.fillRect(x, y, w, h);\n };\n\n CanvasRendererBase.prototype.ctxStroke = function () {\n this.canvasContext.stroke();\n };\n\n CanvasRendererBase.prototype.reset = function () {\n if (!this.renderConfig.clearCanvas) {\n this.canvasContext.restore();\n return;\n }\n\n this.contextData.reset();\n };\n\n CanvasRendererBase.prototype.save = function () {\n this.canvasContext.save();\n };\n\n CanvasRendererBase.prototype.restore = function (actionFlag) {\n if (!this.renderConfig.clearCanvas) {\n this.canvasContext.restore();\n return;\n }\n\n if (actionFlag) {\n this.globalData.blendMode = 'source-over';\n }\n\n this.contextData.restore(actionFlag);\n };\n\n CanvasRendererBase.prototype.configAnimation = function (animData) {\n if (this.animationItem.wrapper) {\n this.animationItem.container = createTag('canvas');\n var containerStyle = this.animationItem.container.style;\n containerStyle.width = '100%';\n containerStyle.height = '100%';\n var origin = '0px 0px 0px';\n containerStyle.transformOrigin = origin;\n containerStyle.mozTransformOrigin = origin;\n containerStyle.webkitTransformOrigin = origin;\n containerStyle['-webkit-transform'] = origin;\n containerStyle.contentVisibility = this.renderConfig.contentVisibility;\n this.animationItem.wrapper.appendChild(this.animationItem.container);\n this.canvasContext = this.animationItem.container.getContext('2d');\n\n if (this.renderConfig.className) {\n this.animationItem.container.setAttribute('class', this.renderConfig.className);\n }\n\n if (this.renderConfig.id) {\n this.animationItem.container.setAttribute('id', this.renderConfig.id);\n }\n } else {\n this.canvasContext = this.renderConfig.context;\n }\n\n this.contextData.setContext(this.canvasContext);\n this.data = animData;\n this.layers = animData.layers;\n this.transformCanvas = {\n w: animData.w,\n h: animData.h,\n sx: 0,\n sy: 0,\n tx: 0,\n ty: 0\n };\n this.setupGlobalData(animData, document.body);\n this.globalData.canvasContext = this.canvasContext;\n this.globalData.renderer = this;\n this.globalData.isDashed = false;\n this.globalData.progressiveLoad = this.renderConfig.progressiveLoad;\n this.globalData.transformCanvas = this.transformCanvas;\n this.elements = createSizedArray(animData.layers.length);\n this.updateContainerSize();\n };\n\n CanvasRendererBase.prototype.updateContainerSize = function (width, height) {\n this.reset();\n var elementWidth;\n var elementHeight;\n\n if (width) {\n elementWidth = width;\n elementHeight = height;\n this.canvasContext.canvas.width = elementWidth;\n this.canvasContext.canvas.height = elementHeight;\n } else {\n if (this.animationItem.wrapper && this.animationItem.container) {\n elementWidth = this.animationItem.wrapper.offsetWidth;\n elementHeight = this.animationItem.wrapper.offsetHeight;\n } else {\n elementWidth = this.canvasContext.canvas.width;\n elementHeight = this.canvasContext.canvas.height;\n }\n\n this.canvasContext.canvas.width = elementWidth * this.renderConfig.dpr;\n this.canvasContext.canvas.height = elementHeight * this.renderConfig.dpr;\n }\n\n var elementRel;\n var animationRel;\n\n if (this.renderConfig.preserveAspectRatio.indexOf('meet') !== -1 || this.renderConfig.preserveAspectRatio.indexOf('slice') !== -1) {\n var par = this.renderConfig.preserveAspectRatio.split(' ');\n var fillType = par[1] || 'meet';\n var pos = par[0] || 'xMidYMid';\n var xPos = pos.substr(0, 4);\n var yPos = pos.substr(4);\n elementRel = elementWidth / elementHeight;\n animationRel = this.transformCanvas.w / this.transformCanvas.h;\n\n if (animationRel > elementRel && fillType === 'meet' || animationRel < elementRel && fillType === 'slice') {\n this.transformCanvas.sx = elementWidth / (this.transformCanvas.w / this.renderConfig.dpr);\n this.transformCanvas.sy = elementWidth / (this.transformCanvas.w / this.renderConfig.dpr);\n } else {\n this.transformCanvas.sx = elementHeight / (this.transformCanvas.h / this.renderConfig.dpr);\n this.transformCanvas.sy = elementHeight / (this.transformCanvas.h / this.renderConfig.dpr);\n }\n\n if (xPos === 'xMid' && (animationRel < elementRel && fillType === 'meet' || animationRel > elementRel && fillType === 'slice')) {\n this.transformCanvas.tx = (elementWidth - this.transformCanvas.w * (elementHeight / this.transformCanvas.h)) / 2 * this.renderConfig.dpr;\n } else if (xPos === 'xMax' && (animationRel < elementRel && fillType === 'meet' || animationRel > elementRel && fillType === 'slice')) {\n this.transformCanvas.tx = (elementWidth - this.transformCanvas.w * (elementHeight / this.transformCanvas.h)) * this.renderConfig.dpr;\n } else {\n this.transformCanvas.tx = 0;\n }\n\n if (yPos === 'YMid' && (animationRel > elementRel && fillType === 'meet' || animationRel < elementRel && fillType === 'slice')) {\n this.transformCanvas.ty = (elementHeight - this.transformCanvas.h * (elementWidth / this.transformCanvas.w)) / 2 * this.renderConfig.dpr;\n } else if (yPos === 'YMax' && (animationRel > elementRel && fillType === 'meet' || animationRel < elementRel && fillType === 'slice')) {\n this.transformCanvas.ty = (elementHeight - this.transformCanvas.h * (elementWidth / this.transformCanvas.w)) * this.renderConfig.dpr;\n } else {\n this.transformCanvas.ty = 0;\n }\n } else if (this.renderConfig.preserveAspectRatio === 'none') {\n this.transformCanvas.sx = elementWidth / (this.transformCanvas.w / this.renderConfig.dpr);\n this.transformCanvas.sy = elementHeight / (this.transformCanvas.h / this.renderConfig.dpr);\n this.transformCanvas.tx = 0;\n this.transformCanvas.ty = 0;\n } else {\n this.transformCanvas.sx = this.renderConfig.dpr;\n this.transformCanvas.sy = this.renderConfig.dpr;\n this.transformCanvas.tx = 0;\n this.transformCanvas.ty = 0;\n }\n\n 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];\n /* var i, len = this.elements.length;\r\n for(i=0;i- \n {viewSkills && (\n
- \n Skills\n \n )}\n {viewExperience && (\n
- \n Work Experiences\n \n )}\n {viewOpenSource && (\n
- \n Open Source\n \n )}\n {viewAchievement && (\n
- \n Achievements\n \n )}\n {viewBlog && (\n
- \n Blogs\n \n )}\n {viewTalks && (\n
- \n Talks\n \n )}\n
- \n Contact Me\n \n
- \n {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}\n \n
\n \n \n
\n
\n );\n}\n","import React, {Component, Suspense} from \"react\";\nimport Lottie from \"lottie-react\";\nimport Loading from \"../../containers/loading/Loading\";\n\nexport default class DisplayLottie extends Component {\n render() {\n const animationData = this.props.animationData;\n const defaultOptions = {\n loop: true,\n autoplay: true,\n animationData: animationData\n };\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n {text}\n \n
\n );\n}\n","import React, {useContext} from \"react\";\nimport {Fade} from \"react-reveal\";\nimport emoji from \"react-easy-emoji\";\nimport \"./Greeting.scss\";\nimport landingPerson from \"../../assets/lottie/landingPerson\";\nimport DisplayLottie from \"../../components/displayLottie/DisplayLottie\";\nimport SocialMedia from \"../../components/socialMedia/SocialMedia\";\nimport Button from \"../../components/button/Button\";\n\nimport {illustration, greeting} from \"../../portfolio\";\nimport StyleContext from \"../../contexts/StyleContext\";\n\nexport default function Greeting() {\n const {isDark} = useContext(StyleContext);\n if (!greeting.displayGreeting) {\n return null;\n }\n return (\n \n
\n \n
\n \n
\n \n \n {\" \"}\n {greeting.title}{\" \"}\n {emoji(\"👋\")}\n \n \n {greeting.subTitle}\n \n
\n \n \n {greeting.resumeLink && (\n
\n \n {illustration.animated ? (\n \n )}\n
\n \n
\n );\n}\n","import React, {useContext} from \"react\";\nimport \"./Skills.scss\";\nimport SoftwareSkill from \"../../components/softwareSkills/SoftwareSkill\";\nimport {illustration, skillsSection} from \"../../portfolio\";\nimport {Fade} from \"react-reveal\";\nimport codingPerson from \"../../assets/lottie/codingPerson\";\nimport DisplayLottie from \"../../components/displayLottie/DisplayLottie\";\nimport StyleContext from \"../../contexts/StyleContext\";\n\nexport default function Skills() {\n const {isDark} = useContext(StyleContext);\n if (!skillsSection.display) {\n return null;\n }\n return (\n \n
\n - \n {skillsSection.softwareSkills.map((skills, i) => {\n return (\n
{skills.skillName}
\n \n );\n })}\n\n
\n );\n}\n","import React from \"react\";\nimport \"./Progress.scss\";\nimport {illustration, techStack} from \"../../portfolio\";\nimport {Fade} from \"react-reveal\";\nimport Build from \"../../assets/lottie/build\";\nimport DisplayLottie from \"../../components/displayLottie/DisplayLottie\";\n\nexport default function StackProgress() {\n if (techStack.viewSkillBars) {\n return (\n \n \n \n \n \n
\n \n {illustration.animated ? (\n \n )}\n
\n \n \n {skillsSection.title}{\" \"}\n \n \n {skillsSection.subTitle}\n \n
\n \n {skillsSection.skills.map((skills, i) => {\n return (\n \n {skills}\n \n );\n })}\n
\n \n
\n \n
\n\n Proficiency
\n {techStack.experience.map((exp, i) => {\n const progressStyle = {\n width: exp.progressPercentage\n };\n return (\n\n
\n );\n })}\n {exp.Stack}
\n\n \n
\n \n {illustration.animated ? (\n
\n \n
\n );\n}\n","import React, {useContext} from \"react\";\nimport \"./WorkExperience.scss\";\nimport ExperienceCard from \"../../components/experienceCard/ExperienceCard\";\nimport {workExperiences} from \"../../portfolio\";\nimport {Fade} from \"react-reveal\";\nimport StyleContext from \"../../contexts/StyleContext\";\n\nexport default function WorkExperience() {\n const {isDark} = useContext(StyleContext);\n if (workExperiences.display) {\n return (\n \n \n getColorArrays()}\n />\n
\n \n
\n\n {cardInfo.company}
\n\n \n {cardInfo.role}\n \n \n {cardInfo.date}\n \n \n {cardInfo.desc}\n \n
\n - \n
\n \n \n
\n );\n }\n return null;\n}\n","import React, {useState, useEffect, useContext, Suspense, lazy} from \"react\";\nimport \"./Project.scss\";\nimport Button from \"../../components/button/Button\";\nimport {openSource, socialMediaLinks} from \"../../portfolio\";\nimport StyleContext from \"../../contexts/StyleContext\";\nimport Loading from \"../../containers/loading/Loading\";\nexport default function Projects() {\n const GithubRepoCard = lazy(() =>\n import(\"../../components/githubRepoCard/GithubRepoCard\")\n );\n const FailedLoading = () => null;\n const renderLoader = () => \n
\n \n
\n Experiences
\n\n {workExperiences.experience.map((card, i) => {\n return (\n
\n \n
\n Open Source Projects
\n\n {repo.map((v, i) => {\n if (!v) {\n console.error(\n `Github Object for repository number : ${i} is undefined`\n );\n }\n return (\n
\n \n
\n \n \n \n {bigProjects.subtitle}\n \n\n
\n {bigProjects.title}
\n\n {bigProjects.projects.map((project, i) => {\n return (\n \n {project.image ? (\n
\n );\n })}\n \n \n
\n ) : null}\n \n \n {project.projectName}\n \n \n {project.projectDesc}\n \n {project.footerLink ? (\n
\n \n {project.footerLink.map((link, i) => {\n return (\n openUrlInNewTab(link.url)}\n >\n {link.name}\n \n );\n })}\n
\n ) : null}\n \n
\n );\n}\n","import React, {useContext} from \"react\";\nimport \"./Achievement.scss\";\nimport AchievementCard from \"../../components/achievementCard/AchievementCard\";\nimport {achievementSection} from \"../../portfolio\";\nimport {Fade} from \"react-reveal\";\nimport StyleContext from \"../../contexts/StyleContext\";\nexport default function Achievement() {\n const {isDark} = useContext(StyleContext);\n if (!achievementSection.display) {\n return null;\n }\n return (\n \n \n
\n \n
\n \n {cardInfo.title}\n
\n\n {cardInfo.description}\n
\n\n {cardInfo.footer.map((v, i) => {\n return (\n openUrlInNewTab(v.url, v.name)}\n >\n {v.name}\n \n );\n })}\n
\n \n
\n \n
\n \n \n {achievementSection.title}\n \n \n {achievementSection.subtitle}\n \n
\n \n {achievementSection.achievementsCards.map((card, i) => {\n return (\n
\n openUrlInNewTab(blog.url, blog.title)}>\n
\n );\n}\n","import React, {useState, useEffect, useContext} from \"react\";\nimport \"./Blog.scss\";\nimport BlogCard from \"../../components/blogCard/BlogCard\";\nimport {blogSection} from \"../../portfolio\";\nimport {Fade} from \"react-reveal\";\nimport StyleContext from \"../../contexts/StyleContext\";\nexport default function Blogs() {\n const {isDark} = useContext(StyleContext);\n const [mediumBlogs, setMediumBlogs] = useState([]);\n function setMediumBlogsFunction(array) {\n setMediumBlogs(array);\n }\n //Medium API returns blogs' content in HTML format. Below function extracts blogs' text content within paragraph tags\n function extractTextContent(html) {\n return typeof html === \"string\"\n ? html\n .split(\"p>\")\n .filter(el => !el.includes(\">\"))\n .map(el => el.replace(\" {\n if (blogSection.displayMediumBlogs === \"true\") {\n const getProfileData = () => {\n fetch(\"/blogs.json\")\n .then(result => {\n if (result.ok) {\n return result.json();\n }\n })\n .then(response => {\n setMediumBlogsFunction(response.items);\n })\n .catch(function (error) {\n console.error(\n `${error} (because of this error Blogs section could not be displayed. Blogs section has reverted to default)`\n );\n setMediumBlogsFunction(\"Error\");\n blogSection.displayMediumBlogs = \"false\";\n });\n };\n getProfileData();\n }\n }, []);\n if (!blogSection.display) {\n return null;\n }\n return (\n \n \n
\n \n {blog.title}\n
\n\n {blog.description}\n
\n\n
\n \n →
\n \n
\n \n \n {blogSection.subtitle}\n \n
\n {blogSection.title}
\n\n
\n \n {blogSection.displayMediumBlogs !== \"true\" ||\n mediumBlogs === \"Error\"\n ? blogSection.blogs.map((blog, i) => {\n return (\n
\n \n
\n \n {emoji(\"Made with ❤️ by DeveloperFolio Team\")}\n
\n\n Theme by{\" \"}\n \n developerFolio\n \n
\n\n
\n \n );\n}\n","import React, {useContext} from \"react\";\nimport \"./Talks.scss\";\nimport TalkCard from \"../../components/talkCard/TalkCard\";\nimport {talkSection} from \"../../portfolio\";\nimport {Fade} from \"react-reveal\";\nimport StyleContext from \"../../contexts/StyleContext\";\n\nexport default function Talks() {\n const {isDark} = useContext(StyleContext);\n if (!talkSection.display) {\n return null;\n }\n return (\n \n \n \n
\n {talkDetails.title}
\n {talkDetails.subtitle}
\n\n\n \n Slides\n \n \n Event\n \n
\n \n
\n \n \n {talkSection.subtitle}\n \n {talkSection.talks.map((talk, i) => {\n return (\n
\n {talkSection.title}
\n\n
\n \n \n {podcastSection.subtitle}\n \n
\n {podcastSection.title}
\n\n {podcastSection.podcast.map((podcastLink, i) => {\n if (!podcastLink) {\n console.log(\n `Podcast link for ${podcastSection.title} is missing`\n );\n }\n return (\n
\n \n \n
\n );\n })}\n \n \n \n \n \n \n
\n );\n}\n","import React from \"react\";\nimport \"./Education.scss\";\nimport EducationCard from \"../../components/educationCard/EducationCard\";\nimport {educationInfo} from \"../../portfolio\";\n\nexport default function Education() {\n if (educationInfo.display) {\n return (\n \n {school.logo && (\n
\n \n
\n )}\n \n
\n {school.schoolName}
\n\n\n \n {school.subHeader}\n \n \n {school.duration}\n \n
\n {school.desc}
\n\n
\n - \n
\n
\n );\n }\n return null;\n}\n","import React from \"react\";\nimport \"./Top.scss\";\n\nexport default function Top() {\n function TopEvent() {\n document.body.scrollTop = 0; // For Safari\n document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera\n }\n // When the user scrolls down 20px from the top of the document, show the button\n function scrollFunction() {\n if (\n document.body.scrollTop > 20 ||\n document.documentElement.scrollTop > 20\n ) {\n document.getElementById(\"topButton\").style.visibility = \"visible\";\n } else {\n document.getElementById(\"topButton\").style.visibility = \"hidden\";\n }\n }\n window.onscroll = function () {\n scrollFunction();\n };\n window.onload = function () {\n scrollFunction();\n }; //To make sure that this button is not visible at starting.\n // When the user clicks on the button, scroll to the top of the document\n return (\n \n );\n}\n","export default function _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}","export default function _typeof(obj) {\n \"@babel/helpers - typeof\";\n\n return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) {\n return typeof obj;\n } : function (obj) {\n return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n }, _typeof(obj);\n}","import _typeof from \"./typeof.js\";\nimport toPrimitive from \"./toPrimitive.js\";\nexport default function _toPropertyKey(arg) {\n var key = toPrimitive(arg, \"string\");\n return _typeof(key) === \"symbol\" ? key : String(key);\n}","import _typeof from \"./typeof.js\";\nexport default function _toPrimitive(input, hint) {\n if (_typeof(input) !== \"object\" || input === null) return input;\n var prim = input[Symbol.toPrimitive];\n if (prim !== undefined) {\n var res = prim.call(input, hint || \"default\");\n if (_typeof(res) !== \"object\") return res;\n throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n }\n return (hint === \"string\" ? String : Number)(input);\n}","import toPropertyKey from \"./toPropertyKey.js\";\nfunction _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, toPropertyKey(descriptor.key), descriptor);\n }\n}\nexport default function _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n Object.defineProperty(Constructor, \"prototype\", {\n writable: false\n });\n return Constructor;\n}","import _typeof from \"./typeof.js\";\nimport assertThisInitialized from \"./assertThisInitialized.js\";\nexport default function _possibleConstructorReturn(self, call) {\n if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) {\n return call;\n } else if (call !== void 0) {\n throw new TypeError(\"Derived constructors may only return object or undefined\");\n }\n return assertThisInitialized(self);\n}","export default function _assertThisInitialized(self) {\n if (self === void 0) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n return self;\n}","export default function _getPrototypeOf(o) {\n _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {\n return o.__proto__ || Object.getPrototypeOf(o);\n };\n return _getPrototypeOf(o);\n}","export default function _setPrototypeOf(o, p) {\n _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n return _setPrototypeOf(o, p);\n}","import setPrototypeOf from \"./setPrototypeOf.js\";\nexport default function _inherits(subClass, superClass) {\n if (typeof superClass !== \"function\" && superClass !== null) {\n throw new TypeError(\"Super expression must either be null or a function\");\n }\n subClass.prototype = Object.create(superClass && superClass.prototype, {\n constructor: {\n value: subClass,\n writable: true,\n configurable: true\n }\n });\n Object.defineProperty(subClass, \"prototype\", {\n writable: false\n });\n if (superClass) setPrototypeOf(subClass, superClass);\n}","import toPropertyKey from \"./toPropertyKey.js\";\nexport default function _defineProperty(obj, key, value) {\n key = toPropertyKey(key);\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n return obj;\n}","const twitterWidgetJs = 'https://platform.twitter.com/widgets.js'\nexport default twitterWidgetJs\n","import React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport isRequiredIf from 'react-proptype-conditional-require'\nimport ExecutionEnvironment from 'exenv'\nimport twitterWidgetJs from './twitter-widget-url'\n\nexport default class TwitterTimelineEmbed extends Component {\n static propTypes = {\n /**\n * This can be either of profile, likes, list, collection, URL, widget\n */\n sourceType: PropTypes.oneOf(['profile', 'likes', 'list', 'collection', 'url', 'widget']).isRequired,\n /**\n * username of twitter handle as String\n */\n screenName: isRequiredIf(PropTypes.string, props => !props.hasOwnProperty('userId') && (props.sourceType === 'profile' || props.sourceType === 'likes')),\n /**\n * UserId of twitter handle as number\n */\n userId: isRequiredIf(PropTypes.number, props => !props.hasOwnProperty('screenName') && (props.sourceType === 'profile' || props.sourceType === 'likes')),\n /**\n * To show list, used along with slug\n */\n ownerScreenName: isRequiredIf(PropTypes.string, props => props.sourceType === 'list' && !props.hasOwnProperty('id')),\n /**\n * To show list, used along with ownerScreenName\n */\n slug: isRequiredIf(PropTypes.string, props => props.sourceType === 'list' && !props.hasOwnProperty('id')),\n /**\n * To show list, unique list id\n * Also used with collections, in that case its valid collection id\n */\n id: isRequiredIf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]), props => (props.sourceType === 'list' && !props.hasOwnProperty('ownerScreenName') && !props.hasOwnProperty('slug')) || props.sourceType === 'collection'),\n /**\n * To show twitter content with url.\n * Supported content includes profiles, likes, lists, and collections.\n */\n url: isRequiredIf(PropTypes.string, props => props.sourceType === 'url'),\n /**\n * To show custom widget\n */\n widgetId: isRequiredIf(PropTypes.string, props => props.sourceType === 'widget'),\n /**\n * Additional options to pass to twitter widget plugin\n */\n options: PropTypes.object,\n /**\n * Automatically fit into parent container height\n */\n autoHeight: PropTypes.bool,\n /**\n * With dark or light theme\n */\n theme: PropTypes.oneOf(['dark', 'light']),\n /**\n * With custom link colors. Note: Only Hex colors are supported.\n */\n linkColor: PropTypes.string,\n /**\n * With custom border colors. Note: Only Hex colors are supported.\n */\n borderColor: PropTypes.string,\n /**\n * Hide the header from timeline\n */\n noHeader: PropTypes.bool,\n /**\n * Hide the footer from timeline\n */\n noFooter: PropTypes.bool,\n /**\n * Hide the border from timeline\n */\n noBorders: PropTypes.bool,\n /**\n * Hide the scrollbars\n */\n noScrollbar: PropTypes.bool,\n /**\n * Enable Transparancy\n */\n transparent: PropTypes.bool,\n /**\n * Custom language code. Supported codes here: https://developer.twitter.com/en/docs/twitter-for-websites/twitter-for-websites-supported-languages/overview.html\n */\n lang: PropTypes.string,\n\n /**\n * Placeholder while tweet is loading\n */\n placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n /**\n * Function to execute after load, return html element\n */\n onLoad: PropTypes.func\n };\n\n constructor(props) {\n super(props)\n this.state = {\n isLoading: true\n }\n }\n\n buildChromeOptions(options) {\n options.chrome = ''\n if (this.props.noHeader) { options.chrome = options.chrome + ' noheader' }\n\n if (this.props.noFooter) { options.chrome = options.chrome + ' nofooter' }\n\n if (this.props.noBorders) { options.chrome = options.chrome + ' noborders' }\n\n if (this.props.noScrollbar) { options.chrome = options.chrome + ' noscrollbar' }\n\n if (this.props.transparent) { options.chrome = options.chrome + ' transparent' }\n\n return options\n }\n\n buildOptions() {\n let options = Object.assign({}, this.props.options)\n if (this.props.autoHeight) { options.height = this.refs.embedContainer.parentNode.offsetHeight }\n\n options = Object.assign({}, options, {\n theme: this.props.theme,\n linkColor: this.props.linkColor,\n borderColor: this.props.borderColor,\n lang: this.props.lang\n })\n\n return options\n }\n\n renderWidget(options) {\n const { onLoad } = this.props\n if (!this.isMountCanceled) {\n window.twttr.widgets.createTimeline(\n {\n sourceType: this.props.sourceType,\n screenName: this.props.screenName,\n userId: this.props.userId,\n ownerScreenName: this.props.ownerScreenName,\n slug: this.props.slug,\n id: this.props.id || this.props.widgetId,\n url: this.props.url\n },\n this.refs.embedContainer,\n options\n ).then((element) => {\n this.setState({\n isLoading: false\n })\n if (onLoad) {\n onLoad(element)\n }\n })\n }\n }\n\n componentDidMount() {\n if (ExecutionEnvironment.canUseDOM) {\n let script = require('scriptjs')\n script(twitterWidgetJs, 'twitter-embed', () => {\n if (!window.twttr) {\n console.error('Failure to load window.twttr in TwitterTimelineEmbed, aborting load.')\n return\n }\n\n let options = this.buildOptions()\n /** Append chrome options */\n options = this.buildChromeOptions(options)\n this.renderWidget(options)\n })\n }\n }\n\n componentWillUnmount() {\n this.isMountCanceled = true\n }\n\n render() {\n const { isLoading } = this.state\n const { placeholder } = this.props\n return (\n Education
\n\n {educationInfo.schools.map((school, index) => (\n
\n Can't load? Check privacy protection settings
\n
\n \n
\n \n
\n \n \n
\n \n \n {contactInfo.subtitle}\n \n \n {contactInfo.number && (\n <>\n \n {contactInfo.number}\n \n
\n
\n \n )}\n\n {contactInfo.email_address}\n \n
\n
\n
\n {contactInfo.title}
\n\n
\n \n )}\n
\n
\n
\n {illustration.animated ? (\n \n )}\n
\n \n
\n );\n}\n","import {useState} from \"react\";\n\nexport const useLocalStorage = (key, initialValue) => {\n // State to store our value\n // Pass initial state function to useState so logic is only executed once\n const [storedValue, setStoredValue] = useState(() => {\n try {\n // Get from local storage by key\n const item = window.localStorage.getItem(key);\n // Parse stored json or if none return initialValue\n return item ? JSON.parse(item) : initialValue;\n } catch (error) {\n // If error also return initialValue\n console.log(error);\n return initialValue;\n }\n });\n\n // Return a wrapped version of useState's setter function that ...\n // ... persists the new value to localStorage.\n const setValue = value => {\n try {\n // Allow value to be a function so we have same API as useState\n const valueToStore =\n value instanceof Function ? value(storedValue) : value;\n // Save state\n setStoredValue(valueToStore);\n // Save to local storage\n window.localStorage.setItem(key, JSON.stringify(valueToStore));\n } catch (error) {\n // A more advanced implementation would handle the error case\n console.log(error);\n }\n };\n\n return [storedValue, setValue];\n};\n","import React, {useEffect, useState} from \"react\";\nimport Header from \"../components/header/Header\";\nimport Greeting from \"./greeting/Greeting\";\nimport Skills from \"./skills/Skills\";\nimport StackProgress from \"./skillProgress/skillProgress\";\nimport WorkExperience from \"./workExperience/WorkExperience\";\nimport Projects from \"./projects/Projects\";\nimport StartupProject from \"./StartupProjects/StartupProject\";\nimport Achievement from \"./achievement/Achievement\";\nimport Blogs from \"./blogs/Blogs\";\nimport Footer from \"../components/footer/Footer\";\nimport Talks from \"./talks/Talks\";\nimport Podcast from \"./podcast/Podcast\";\nimport Education from \"./education/Education\";\nimport ScrollToTopButton from \"./topbutton/Top\";\nimport Twitter from \"./twitter-embed/twitter\";\nimport Profile from \"./profile/Profile\";\nimport SplashScreen from \"./splashScreen/SplashScreen\";\nimport {splashScreen} from \"../portfolio\";\nimport {StyleProvider} from \"../contexts/StyleContext\";\nimport {useLocalStorage} from \"../hooks/useLocalStorage\";\nimport \"./Main.scss\";\n\nconst Main = () => {\n const darkPref = window.matchMedia(\"(prefers-color-scheme: dark)\");\n const [isDark, setIsDark] = useLocalStorage(\"isDark\", darkPref.matches);\n const [isShowingSplashAnimation, setIsShowingSplashAnimation] =\n useState(true);\n\n useEffect(() => {\n if (splashScreen.enabled) {\n const splashTimer = setTimeout(\n () => setIsShowingSplashAnimation(false),\n splashScreen.duration\n );\n return () => {\n clearTimeout(splashTimer);\n };\n }\n }, []);\n\n const changeTheme = () => {\n setIsDark(!isDark);\n };\n\n return (\n \n
\n \n <\n {greeting.username}\n />\n
\n \n \n {isShowingSplashAnimation && splashScreen.enabled ? (\n \n
\n );\n};\n\nexport default Main;\n","import React from \"react\";\nimport \"./App.scss\";\nimport Main from \"./containers/Main\";\n\nfunction App() {\n return (\n \n \n
\n );\n}\n\nexport default App;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.1/8 is considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport \"./index.css\";\nimport App from \"./App\";\nimport * as serviceWorker from \"./serviceWorker\";\n\nReactDOM.render(