Premium Addons for Elementor - Version 4.8.7

Version Description

  • Tweak: Added option to insert Premium Templates without media files (images, videos, etc.) to prevent overloading website's Media Library.
  • Tweak: Responsive styling improved for Quick View Modal in WooCommerce Products Listing widget.
  • Tweak: Make sure View Cart string is translated to the current langugage in WooCommerce Products Listing widget.
  • Tweak: Added Scotland and Wales countries for IP Location Display Condition.
  • Fixed: Inserting Premium Templates sometimes causes Elementor placeholder image to be inserted multiple times into the media library.
  • Fixed: Close sticky video causes the original video to play in Videobox Widget
Download this release

Release Info

Developer leap13
Plugin Icon 128x128 Premium Addons for Elementor
Version 4.8.7
Comparing to
See all releases

Code changes from version 4.8.6 to 4.8.7

Files changed (10) hide show
  1. admin/assets/js/pa-notice.js +66 -66
  2. admin/includes/admin-notices.php +406 -406
  3. admin/includes/templates/modules-settings.php +2 -2
  4. assets/editor/js/editor.js +327 -327
  5. assets/editor/templates/css/editor-rtl.css +578 -489
  6. assets/editor/templates/css/editor.css +580 -489
  7. assets/editor/templates/js/editor.js +1051 -1045
  8. assets/frontend/css/premium-addons-rtl.css +30 -13
  9. assets/frontend/css/premium-addons.css +22 -13
  10. assets/frontend/js/lottie.js +3844 -15576
admin/assets/js/pa-notice.js CHANGED
@@ -1,66 +1,66 @@
1
- (function ($) {
2
-
3
- var $noticeWrap = $(".pa-notice-wrap"),
4
- notice = $noticeWrap.data('notice');
5
-
6
- var adminNotices = {
7
- 'radius': 'radius_notice',
8
- 'woo': 'woo_notice',
9
- };
10
-
11
- if (undefined !== notice) {
12
-
13
- $noticeWrap.find('.pa-notice-reset').on(
14
- "click",
15
- function () {
16
-
17
- $noticeWrap.css('display', 'none');
18
-
19
- $.ajax(
20
- {
21
- url: ajaxurl,
22
- type: 'POST',
23
- data: {
24
- action: 'pa_reset_admin_notice',
25
- notice: $noticeWrap.data('notice'),
26
- nonce: PaNoticeSettings.nonce,
27
- }
28
- }
29
- );
30
-
31
- }
32
- );
33
- }
34
-
35
- $(".pa-notice-close").on(
36
- "click",
37
- function () {
38
-
39
- var noticeID = $(this).data('notice');
40
-
41
- if (noticeID) {
42
- $(this).closest('.pa-new-feature-notice').remove();
43
-
44
- $.ajax(
45
- {
46
- url: ajaxurl,
47
- type: 'POST',
48
- data: {
49
- action: 'pa_dismiss_admin_notice',
50
- notice: adminNotices[noticeID],
51
- nonce: PaNoticeSettings.nonce,
52
- },
53
- success: function (res) {
54
- console.log(res);
55
- },
56
- error: function (err) {
57
- console.log(err);
58
- }
59
- }
60
- );
61
- }
62
-
63
- }
64
- );
65
-
66
- })(jQuery);
1
+ (function ($) {
2
+
3
+ var $noticeWrap = $(".pa-notice-wrap"),
4
+ notice = $noticeWrap.data('notice');
5
+
6
+ var adminNotices = {
7
+ 'radius': 'radius_notice',
8
+ 'woo': 'woo_notice',
9
+ };
10
+
11
+ if (undefined !== notice) {
12
+
13
+ $noticeWrap.find('.pa-notice-reset').on(
14
+ "click",
15
+ function () {
16
+
17
+ $noticeWrap.css('display', 'none');
18
+
19
+ $.ajax(
20
+ {
21
+ url: ajaxurl,
22
+ type: 'POST',
23
+ data: {
24
+ action: 'pa_reset_admin_notice',
25
+ notice: $noticeWrap.data('notice'),
26
+ nonce: PaNoticeSettings.nonce,
27
+ }
28
+ }
29
+ );
30
+
31
+ }
32
+ );
33
+ }
34
+
35
+ $(".pa-notice-close").on(
36
+ "click",
37
+ function () {
38
+
39
+ var noticeID = $(this).data('notice');
40
+
41
+ if (noticeID) {
42
+ $(this).closest('.pa-new-feature-notice').remove();
43
+
44
+ $.ajax(
45
+ {
46
+ url: ajaxurl,
47
+ type: 'POST',
48
+ data: {
49
+ action: 'pa_dismiss_admin_notice',
50
+ notice: adminNotices[noticeID],
51
+ nonce: PaNoticeSettings.nonce,
52
+ },
53
+ success: function (res) {
54
+ console.log(res);
55
+ },
56
+ error: function (err) {
57
+ console.log(err);
58
+ }
59
+ }
60
+ );
61
+ }
62
+
63
+ }
64
+ );
65
+
66
+ })(jQuery);
admin/includes/admin-notices.php CHANGED
@@ -1,406 +1,406 @@
1
- <?php
2
- /**
3
- * PA Admin Notices.
4
- */
5
-
6
- namespace PremiumAddons\Admin\Includes;
7
-
8
- use PremiumAddons\Includes\Helper_Functions;
9
-
10
- if ( ! defined( 'ABSPATH' ) ) {
11
- exit();
12
- }
13
-
14
- /**
15
- * Class Admin_Notices
16
- */
17
- class Admin_Notices {
18
-
19
- /**
20
- * Class object
21
- *
22
- * @var instance
23
- */
24
- private static $instance = null;
25
-
26
- /**
27
- * Elementor slug
28
- *
29
- * @var elementor
30
- */
31
- private static $elementor = 'elementor';
32
-
33
- /**
34
- * PAPRO Slug
35
- *
36
- * @var papro
37
- */
38
- private static $papro = 'premium-addons-pro';
39
-
40
- /**
41
- * Notices Keys
42
- *
43
- * @var notices
44
- */
45
- private static $notices = null;
46
-
47
- /**
48
- * Constructor for the class
49
- */
50
- public function __construct() {
51
-
52
- add_action( 'admin_init', array( $this, 'init' ) );
53
-
54
- add_action( 'admin_notices', array( $this, 'admin_notices' ) );
55
-
56
- add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue_scripts' ) );
57
-
58
- add_action( 'wp_ajax_pa_reset_admin_notice', array( $this, 'reset_admin_notice' ) );
59
-
60
- add_action( 'wp_ajax_pa_dismiss_admin_notice', array( $this, 'dismiss_admin_notice' ) );
61
-
62
- self::$notices = array(
63
- 'pa-review',
64
- 'woo_notice',
65
- );
66
-
67
- delete_option( 'cursor_notice' );
68
-
69
- }
70
-
71
- /**
72
- * Init
73
- *
74
- * Init required functions
75
- *
76
- * @since 1.0.0
77
- * @access public
78
- */
79
- public function init() {
80
-
81
- $this->handle_review_notice();
82
-
83
- }
84
-
85
- /**
86
- * init notices check functions
87
- */
88
- public function admin_notices() {
89
-
90
- $this->required_plugins_check();
91
-
92
- $cache_key = 'premium_notice_' . PREMIUM_ADDONS_VERSION;
93
-
94
- $response = get_transient( $cache_key );
95
-
96
- $show_review = get_option( 'pa_review_notice' );
97
-
98
- // Make sure Already did was not clicked before.
99
- if ( '1' !== $show_review ) {
100
- if ( false == $response ) {
101
- $this->get_review_notice();
102
- }
103
- }
104
-
105
- $this->get_woo_notice();
106
-
107
- }
108
-
109
- /**
110
- * Handle Review Notice
111
- *
112
- * Checks if review message is dismissed.
113
- *
114
- * @access public
115
- * @return void
116
- */
117
- public function handle_review_notice() {
118
-
119
- if ( ! isset( $_GET['pa_review'] ) ) {
120
- return;
121
- }
122
-
123
- if ( 'opt_out' === $_GET['pa_review'] ) {
124
- check_admin_referer( 'opt_out' );
125
-
126
- update_option( 'pa_review_notice', '1' );
127
- }
128
-
129
- wp_safe_redirect( remove_query_arg( 'pa_review' ) );
130
-
131
- exit;
132
- }
133
-
134
- /**
135
- * Required plugin check
136
- *
137
- * Shows an admin notice when Elementor is missing.
138
- *
139
- * @since 1.0.0
140
- * @access public
141
- */
142
- public function required_plugins_check() {
143
-
144
- $elementor_path = sprintf( '%1$s/%1$s.php', self::$elementor );
145
-
146
- if ( ! defined( 'ELEMENTOR_VERSION' ) ) {
147
-
148
- if ( ! Helper_Functions::is_plugin_installed( $elementor_path ) ) {
149
-
150
- if ( Admin_Helper::check_user_can( 'install_plugins' ) ) {
151
-
152
- $install_url = wp_nonce_url( self_admin_url( sprintf( 'update.php?action=install-plugin&plugin=%s', self::$elementor ) ), 'install-plugin_elementor' );
153
-
154
- $message = sprintf( '<p>%s</p>', __( 'Premium Addons for Elementor is not working because you need to Install Elementor plugin.', 'premium-addons-for-elementor' ) );
155
-
156
- $message .= sprintf( '<p><a href="%s" class="button-primary">%s</a></p>', $install_url, __( 'Install Now', 'premium-addons-for-elementor' ) );
157
-
158
- }
159
- } else {
160
-
161
- if ( Admin_Helper::check_user_can( 'activate_plugins' ) ) {
162
-
163
- $activation_url = wp_nonce_url( 'plugins.php?action=activate&amp;plugin=' . $elementor_path . '&amp;plugin_status=all&amp;paged=1&amp;s', 'activate-plugin_' . $elementor_path );
164
-
165
- $message = '<p>' . __( 'Premium Addons for Elementor is not working because you need to activate Elementor plugin.', 'premium-addons-for-elementor' ) . '</p>';
166
-
167
- $message .= '<p>' . sprintf( '<a href="%s" class="button-primary">%s</a>', $activation_url, __( 'Activate Now', 'premium-addons-for-elementor' ) ) . '</p>';
168
-
169
- }
170
- }
171
- $this->render_admin_notices( $message );
172
- }
173
- }
174
-
175
- /**
176
- * Get Review Text
177
- *
178
- * Gets admin review notice HTML.
179
- *
180
- * @since 2.8.4
181
- * @access public
182
- *
183
- * @param string $review_url plugin page.
184
- * @param string $optout_url redirect url.
185
- */
186
- public function get_review_text( $review_url, $optout_url ) {
187
-
188
- $notice = sprintf(
189
- '<p>' . __( 'Can we take only 2 minutes of your time? We would be really grateful it if you give ', 'premium-addons-for-elementor' ) .
190
- '<b>' . __( 'Premium Addons for Elementor', 'premium-addons-for-elementor' ) . '</b> a 5 Stars Rating on WordPress.org. By speading the love, we can create even greater free stuff in the future!</p>
191
- <div>
192
- <a class="button button-primary" href="%s" target="_blank"><span>' . __( 'Sure, leave a Review', 'premium-addons-for-elementor' ) . '</span></a>
193
- <a class="button" href="%2$s"><span>' . __( 'I Already Did', 'premium-addons-for-elementor' ) . '</span></a>
194
- <a class="button button-secondary pa-notice-reset"><span>' . __( 'Maybe Later', 'premium-addons-for-elementor' ) . '</span></a>
195
- </div>',
196
- $review_url,
197
- $optout_url
198
- );
199
-
200
- return $notice;
201
- }
202
-
203
- /**
204
- * Checks if review admin notice is dismissed
205
- *
206
- * @since 2.6.8
207
- * @return void
208
- */
209
- public function get_review_notice() {
210
-
211
- $review_url = 'https://wordpress.org/support/plugin/premium-addons-for-elementor/reviews/?filter=5';
212
-
213
- $optout_url = wp_nonce_url( add_query_arg( 'pa_review', 'opt_out' ), 'opt_out' );
214
- ?>
215
-
216
- <div class="error pa-notice-wrap pa-review-notice" data-notice="pa-review">
217
- <div class="pa-img-wrap">
218
- <img src="<?php echo esc_url( PREMIUM_ADDONS_URL . 'admin/images/pa-logo-symbol.png' ); ?>">
219
- </div>
220
- <div class="pa-text-wrap">
221
- <?php echo wp_kses_post( $this->get_review_text( $review_url, $optout_url ) ); ?>
222
- </div>
223
- <div class="pa-notice-close">
224
- <a href="<?php echo esc_url( $optout_url ); ?>"><span class="dashicons dashicons-dismiss"></span></a>
225
- </div>
226
- </div>
227
-
228
- <?php
229
-
230
- }
231
-
232
- /**
233
- *
234
- * Shows admin notice for Premium WooCommerce Skins.
235
- *
236
- * @since 4.3.5
237
- * @access public
238
- *
239
- * @return void
240
- */
241
- public function get_woo_notice() {
242
-
243
- $woo_notice = get_option( 'woo_notice' );
244
-
245
- if ( '1' === $woo_notice ) {
246
- return;
247
- }
248
-
249
- $notice_url = Helper_Functions::get_campaign_link( 'https://premiumaddons.com/elementor-woocommerce-products/', 'woo-skins-notification', 'wp-dash', 'woo-skins' );
250
-
251
- ?>
252
-
253
- <div class="error pa-notice-wrap pa-new-feature-notice">
254
- <div class="pa-img-wrap">
255
- <img src="<?php echo PREMIUM_ADDONS_URL . 'admin/images/pa-logo-symbol.png'; ?>">
256
- </div>
257
- <div class="pa-text-wrap">
258
- <p>
259
- <?php echo __( 'Five NEW skins for ', 'premium-addons-for-elementor' ); ?>
260
- <strong><?php echo __( 'Premium WooCommerce Products Listing widget', 'premium-addons-for-elemetor' ); ?></strong>
261
- <?php echo sprintf( __( 'are now available in Premium Addons Pro. <a href="%s" target="_blank">Check it out now!</a>', 'premium-addons-for-elementor' ), $notice_url ); ?>
262
- </p>
263
- </div>
264
- <div class="pa-notice-close" data-notice="woo">
265
- <span class="dashicons dashicons-dismiss"></span>
266
- </div>
267
- </div>
268
-
269
- <?php
270
- }
271
-
272
-
273
-
274
- /**
275
- * Renders an admin notice error message
276
- *
277
- * @since 1.0.0
278
- * @access private
279
- *
280
- * @param string $message notice text.
281
- * @param string $class notice class.
282
- * @param string $handle notice handle.
283
- *
284
- * @return void
285
- */
286
- private function render_admin_notices( $message, $class = '', $handle = '' ) {
287
- ?>
288
- <div class="error pa-new-feature-notice <?php echo esc_attr( $class ); ?>" data-notice="<?php echo esc_attr( $handle ); ?>">
289
- <?php echo wp_kses_post( $message ); ?>
290
- </div>
291
- <?php
292
- }
293
-
294
- /**
295
- * Register admin scripts
296
- *
297
- * @since 3.2.8
298
- * @access public
299
- */
300
- public function admin_enqueue_scripts() {
301
-
302
- wp_enqueue_script(
303
- 'pa-notice',
304
- PREMIUM_ADDONS_URL . 'admin/assets/js/pa-notice.js',
305
- array( 'jquery' ),
306
- PREMIUM_ADDONS_VERSION,
307
- true
308
- );
309
-
310
- wp_localize_script(
311
- 'pa-notice',
312
- 'PaNoticeSettings',
313
- array(
314
- 'ajaxurl' => esc_url( admin_url( 'admin-ajax.php' ) ),
315
- 'nonce' => wp_create_nonce( 'pa-notice-nonce' ),
316
- )
317
- );
318
-
319
- }
320
-
321
- /**
322
- * Set transient for admin notice
323
- *
324
- * @since 3.2.8
325
- * @access public
326
- *
327
- * @return void
328
- */
329
- public function reset_admin_notice() {
330
-
331
- check_ajax_referer( 'pa-notice-nonce', 'nonce' );
332
-
333
- if ( ! Admin_Helper::check_user_can( 'manage_options' ) ) {
334
- wp_send_json_error();
335
- }
336
-
337
- $key = isset( $_POST['notice'] ) ? sanitize_text_field( wp_unslash( $_POST['notice'] ) ) : '';
338
-
339
- if ( ! empty( $key ) && in_array( $key, self::$notices, true ) ) {
340
-
341
- $cache_key = 'premium_notice_' . PREMIUM_ADDONS_VERSION;
342
-
343
- set_transient( $cache_key, true, WEEK_IN_SECONDS );
344
-
345
- wp_send_json_success();
346
-
347
- } else {
348
-
349
- wp_send_json_error();
350
-
351
- }
352
-
353
- }
354
-
355
- /**
356
- * Dismiss admin notice
357
- *
358
- * @since 3.11.7
359
- * @access public
360
- *
361
- * @return void
362
- */
363
- public function dismiss_admin_notice() {
364
-
365
- check_ajax_referer( 'pa-notice-nonce', 'nonce' );
366
-
367
- if ( ! current_user_can( 'manage_options' ) ) {
368
- wp_send_json_error();
369
- }
370
-
371
- $key = isset( $_POST['notice'] ) ? sanitize_text_field( wp_unslash( $_POST['notice'] ) ) : '';
372
-
373
- if ( ! empty( $key ) && in_array( $key, self::$notices, true ) ) {
374
-
375
- update_option( $key, '1' );
376
-
377
- wp_send_json_success();
378
-
379
- } else {
380
-
381
- wp_send_json_error();
382
-
383
- }
384
-
385
- }
386
-
387
- /**
388
- * Creates and returns an instance of the class
389
- *
390
- * @since 2.8.4
391
- * @access public
392
- *
393
- * @return object
394
- */
395
- public static function get_instance() {
396
-
397
- if ( ! isset( self::$instance ) ) {
398
-
399
- self::$instance = new self();
400
-
401
- }
402
-
403
- return self::$instance;
404
- }
405
-
406
- }
1
+ <?php
2
+ /**
3
+ * PA Admin Notices.
4
+ */
5
+
6
+ namespace PremiumAddons\Admin\Includes;
7
+
8
+ use PremiumAddons\Includes\Helper_Functions;
9
+
10
+ if ( ! defined( 'ABSPATH' ) ) {
11
+ exit();
12
+ }
13
+
14
+ /**
15
+ * Class Admin_Notices
16
+ */
17
+ class Admin_Notices {
18
+
19
+ /**
20
+ * Class object
21
+ *
22
+ * @var instance
23
+ */
24
+ private static $instance = null;
25
+
26
+ /**
27
+ * Elementor slug
28
+ *
29
+ * @var elementor
30
+ */
31
+ private static $elementor = 'elementor';
32
+
33
+ /**
34
+ * PAPRO Slug
35
+ *
36
+ * @var papro
37
+ */
38
+ private static $papro = 'premium-addons-pro';
39
+
40
+ /**
41
+ * Notices Keys
42
+ *
43
+ * @var notices
44
+ */
45
+ private static $notices = null;
46
+
47
+ /**
48
+ * Constructor for the class
49
+ */
50
+ public function __construct() {
51
+
52
+ add_action( 'admin_init', array( $this, 'init' ) );
53
+
54
+ add_action( 'admin_notices', array( $this, 'admin_notices' ) );
55
+
56
+ add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue_scripts' ) );
57
+
58
+ add_action( 'wp_ajax_pa_reset_admin_notice', array( $this, 'reset_admin_notice' ) );
59
+
60
+ add_action( 'wp_ajax_pa_dismiss_admin_notice', array( $this, 'dismiss_admin_notice' ) );
61
+
62
+ self::$notices = array(
63
+ 'pa-review',
64
+ 'woo_notice',
65
+ );
66
+
67
+ delete_option( 'cursor_notice' );
68
+
69
+ }
70
+
71
+ /**
72
+ * Init
73
+ *
74
+ * Init required functions
75
+ *
76
+ * @since 1.0.0
77
+ * @access public
78
+ */
79
+ public function init() {
80
+
81
+ $this->handle_review_notice();
82
+
83
+ }
84
+
85
+ /**
86
+ * init notices check functions
87
+ */
88
+ public function admin_notices() {
89
+
90
+ $this->required_plugins_check();
91
+
92
+ $cache_key = 'premium_notice_' . PREMIUM_ADDONS_VERSION;
93
+
94
+ $response = get_transient( $cache_key );
95
+
96
+ $show_review = get_option( 'pa_review_notice' );
97
+
98
+ // Make sure Already did was not clicked before.
99
+ if ( '1' !== $show_review ) {
100
+ if ( false == $response ) {
101
+ $this->get_review_notice();
102
+ }
103
+ }
104
+
105
+ $this->get_woo_notice();
106
+
107
+ }
108
+
109
+ /**
110
+ * Handle Review Notice
111
+ *
112
+ * Checks if review message is dismissed.
113
+ *
114
+ * @access public
115
+ * @return void
116
+ */
117
+ public function handle_review_notice() {
118
+
119
+ if ( ! isset( $_GET['pa_review'] ) ) {
120
+ return;
121
+ }
122
+
123
+ if ( 'opt_out' === $_GET['pa_review'] ) {
124
+ check_admin_referer( 'opt_out' );
125
+
126
+ update_option( 'pa_review_notice', '1' );
127
+ }
128
+
129
+ wp_safe_redirect( remove_query_arg( 'pa_review' ) );
130
+
131
+ exit;
132
+ }
133
+
134
+ /**
135
+ * Required plugin check
136
+ *
137
+ * Shows an admin notice when Elementor is missing.
138
+ *
139
+ * @since 1.0.0
140
+ * @access public
141
+ */
142
+ public function required_plugins_check() {
143
+
144
+ $elementor_path = sprintf( '%1$s/%1$s.php', self::$elementor );
145
+
146
+ if ( ! defined( 'ELEMENTOR_VERSION' ) ) {
147
+
148
+ if ( ! Helper_Functions::is_plugin_installed( $elementor_path ) ) {
149
+
150
+ if ( Admin_Helper::check_user_can( 'install_plugins' ) ) {
151
+
152
+ $install_url = wp_nonce_url( self_admin_url( sprintf( 'update.php?action=install-plugin&plugin=%s', self::$elementor ) ), 'install-plugin_elementor' );
153
+
154
+ $message = sprintf( '<p>%s</p>', __( 'Premium Addons for Elementor is not working because you need to Install Elementor plugin.', 'premium-addons-for-elementor' ) );
155
+
156
+ $message .= sprintf( '<p><a href="%s" class="button-primary">%s</a></p>', $install_url, __( 'Install Now', 'premium-addons-for-elementor' ) );
157
+
158
+ }
159
+ } else {
160
+
161
+ if ( Admin_Helper::check_user_can( 'activate_plugins' ) ) {
162
+
163
+ $activation_url = wp_nonce_url( 'plugins.php?action=activate&amp;plugin=' . $elementor_path . '&amp;plugin_status=all&amp;paged=1&amp;s', 'activate-plugin_' . $elementor_path );
164
+
165
+ $message = '<p>' . __( 'Premium Addons for Elementor is not working because you need to activate Elementor plugin.', 'premium-addons-for-elementor' ) . '</p>';
166
+
167
+ $message .= '<p>' . sprintf( '<a href="%s" class="button-primary">%s</a>', $activation_url, __( 'Activate Now', 'premium-addons-for-elementor' ) ) . '</p>';
168
+
169
+ }
170
+ }
171
+ $this->render_admin_notices( $message );
172
+ }
173
+ }
174
+
175
+ /**
176
+ * Get Review Text
177
+ *
178
+ * Gets admin review notice HTML.
179
+ *
180
+ * @since 2.8.4
181
+ * @access public
182
+ *
183
+ * @param string $review_url plugin page.
184
+ * @param string $optout_url redirect url.
185
+ */
186
+ public function get_review_text( $review_url, $optout_url ) {
187
+
188
+ $notice = sprintf(
189
+ '<p>' . __( 'Can we take only 2 minutes of your time? We would be really grateful it if you give ', 'premium-addons-for-elementor' ) .
190
+ '<b>' . __( 'Premium Addons for Elementor', 'premium-addons-for-elementor' ) . '</b> a 5 Stars Rating on WordPress.org. By speading the love, we can create even greater free stuff in the future!</p>
191
+ <div>
192
+ <a class="button button-primary" href="%s" target="_blank"><span>' . __( 'Sure, leave a Review', 'premium-addons-for-elementor' ) . '</span></a>
193
+ <a class="button" href="%2$s"><span>' . __( 'I Already Did', 'premium-addons-for-elementor' ) . '</span></a>
194
+ <a class="button button-secondary pa-notice-reset"><span>' . __( 'Maybe Later', 'premium-addons-for-elementor' ) . '</span></a>
195
+ </div>',
196
+ $review_url,
197
+ $optout_url
198
+ );
199
+
200
+ return $notice;
201
+ }
202
+
203
+ /**
204
+ * Checks if review admin notice is dismissed
205
+ *
206
+ * @since 2.6.8
207
+ * @return void
208
+ */
209
+ public function get_review_notice() {
210
+
211
+ $review_url = 'https://wordpress.org/support/plugin/premium-addons-for-elementor/reviews/?filter=5';
212
+
213
+ $optout_url = wp_nonce_url( add_query_arg( 'pa_review', 'opt_out' ), 'opt_out' );
214
+ ?>
215
+
216
+ <div class="error pa-notice-wrap pa-review-notice" data-notice="pa-review">
217
+ <div class="pa-img-wrap">
218
+ <img src="<?php echo esc_url( PREMIUM_ADDONS_URL . 'admin/images/pa-logo-symbol.png' ); ?>">
219
+ </div>
220
+ <div class="pa-text-wrap">
221
+ <?php echo wp_kses_post( $this->get_review_text( $review_url, $optout_url ) ); ?>
222
+ </div>
223
+ <div class="pa-notice-close">
224
+ <a href="<?php echo esc_url( $optout_url ); ?>"><span class="dashicons dashicons-dismiss"></span></a>
225
+ </div>
226
+ </div>
227
+
228
+ <?php
229
+
230
+ }
231
+
232
+ /**
233
+ *
234
+ * Shows admin notice for Premium WooCommerce Skins.
235
+ *
236
+ * @since 4.3.5
237
+ * @access public
238
+ *
239
+ * @return void
240
+ */
241
+ public function get_woo_notice() {
242
+
243
+ $woo_notice = get_option( 'woo_notice' );
244
+
245
+ if ( '1' === $woo_notice ) {
246
+ return;
247
+ }
248
+
249
+ $notice_url = Helper_Functions::get_campaign_link( 'https://premiumaddons.com/elementor-woocommerce-products/', 'woo-skins-notification', 'wp-dash', 'woo-skins' );
250
+
251
+ ?>
252
+
253
+ <div class="error pa-notice-wrap pa-new-feature-notice">
254
+ <div class="pa-img-wrap">
255
+ <img src="<?php echo PREMIUM_ADDONS_URL . 'admin/images/pa-logo-symbol.png'; ?>">
256
+ </div>
257
+ <div class="pa-text-wrap">
258
+ <p>
259
+ <?php echo __( 'Five NEW skins for ', 'premium-addons-for-elementor' ); ?>
260
+ <strong><?php echo __( 'Premium WooCommerce Products Listing widget', 'premium-addons-for-elemetor' ); ?></strong>
261
+ <?php echo sprintf( __( 'are now available in Premium Addons Pro. <a href="%s" target="_blank">Check it out now!</a>', 'premium-addons-for-elementor' ), $notice_url ); ?>
262
+ </p>
263
+ </div>
264
+ <div class="pa-notice-close" data-notice="woo">
265
+ <span class="dashicons dashicons-dismiss"></span>
266
+ </div>
267
+ </div>
268
+
269
+ <?php
270
+ }
271
+
272
+
273
+
274
+ /**
275
+ * Renders an admin notice error message
276
+ *
277
+ * @since 1.0.0
278
+ * @access private
279
+ *
280
+ * @param string $message notice text.
281
+ * @param string $class notice class.
282
+ * @param string $handle notice handle.
283
+ *
284
+ * @return void
285
+ */
286
+ private function render_admin_notices( $message, $class = '', $handle = '' ) {
287
+ ?>
288
+ <div class="error pa-new-feature-notice <?php echo esc_attr( $class ); ?>" data-notice="<?php echo esc_attr( $handle ); ?>">
289
+ <?php echo wp_kses_post( $message ); ?>
290
+ </div>
291
+ <?php
292
+ }
293
+
294
+ /**
295
+ * Register admin scripts
296
+ *
297
+ * @since 3.2.8
298
+ * @access public
299
+ */
300
+ public function admin_enqueue_scripts() {
301
+
302
+ wp_enqueue_script(
303
+ 'pa-notice',
304
+ PREMIUM_ADDONS_URL . 'admin/assets/js/pa-notice.js',
305
+ array( 'jquery' ),
306
+ PREMIUM_ADDONS_VERSION,
307
+ true
308
+ );
309
+
310
+ wp_localize_script(
311
+ 'pa-notice',
312
+ 'PaNoticeSettings',
313
+ array(
314
+ 'ajaxurl' => esc_url( admin_url( 'admin-ajax.php' ) ),
315
+ 'nonce' => wp_create_nonce( 'pa-notice-nonce' ),
316
+ )
317
+ );
318
+
319
+ }
320
+
321
+ /**
322
+ * Set transient for admin notice
323
+ *
324
+ * @since 3.2.8
325
+ * @access public
326
+ *
327
+ * @return void
328
+ */
329
+ public function reset_admin_notice() {
330
+
331
+ check_ajax_referer( 'pa-notice-nonce', 'nonce' );
332
+
333
+ if ( ! Admin_Helper::check_user_can( 'manage_options' ) ) {
334
+ wp_send_json_error();
335
+ }
336
+
337
+ $key = isset( $_POST['notice'] ) ? sanitize_text_field( wp_unslash( $_POST['notice'] ) ) : '';
338
+
339
+ if ( ! empty( $key ) && in_array( $key, self::$notices, true ) ) {
340
+
341
+ $cache_key = 'premium_notice_' . PREMIUM_ADDONS_VERSION;
342
+
343
+ set_transient( $cache_key, true, WEEK_IN_SECONDS );
344
+
345
+ wp_send_json_success();
346
+
347
+ } else {
348
+
349
+ wp_send_json_error();
350
+
351
+ }
352
+
353
+ }
354
+
355
+ /**
356
+ * Dismiss admin notice
357
+ *
358
+ * @since 3.11.7
359
+ * @access public
360
+ *
361
+ * @return void
362
+ */
363
+ public function dismiss_admin_notice() {
364
+
365
+ check_ajax_referer( 'pa-notice-nonce', 'nonce' );
366
+
367
+ if ( ! current_user_can( 'manage_options' ) ) {
368
+ wp_send_json_error();
369
+ }
370
+
371
+ $key = isset( $_POST['notice'] ) ? sanitize_text_field( wp_unslash( $_POST['notice'] ) ) : '';
372
+
373
+ if ( ! empty( $key ) && in_array( $key, self::$notices, true ) ) {
374
+
375
+ update_option( $key, '1' );
376
+
377
+ wp_send_json_success();
378
+
379
+ } else {
380
+
381
+ wp_send_json_error();
382
+
383
+ }
384
+
385
+ }
386
+
387
+ /**
388
+ * Creates and returns an instance of the class
389
+ *
390
+ * @since 2.8.4
391
+ * @access public
392
+ *
393
+ * @return object
394
+ */
395
+ public static function get_instance() {
396
+
397
+ if ( ! isset( self::$instance ) ) {
398
+
399
+ self::$instance = new self();
400
+
401
+ }
402
+
403
+ return self::$instance;
404
+ }
405
+
406
+ }
admin/includes/templates/modules-settings.php CHANGED
@@ -36,9 +36,9 @@ $row_meta = Helper_Functions::is_hide_row_meta();
36
  <div class="pa-btn-group">
37
  <button type="button" class="pa-btn pa-btn-enable <?php echo esc_attr( $enable_btn ); ?>"><?php echo __( 'Switch On', 'premium-addons-for-elementor' ); ?></button>
38
  <button type="button" class="pa-btn pa-btn-disable <?php echo esc_attr( $disable_btn ); ?>"><?php echo __( 'Switch Off', 'premium-addons-for-elementor' ); ?></button>
39
- <?php if ( $used_widgets ) { ?>
40
  <button type="button" class="pa-btn-unused"><?php echo __( 'Disable Unused Widgets', 'premium-addons-for-elementor' ); ?></button>
41
- <?php } ?>
42
  </div>
43
  </div>
44
 
36
  <div class="pa-btn-group">
37
  <button type="button" class="pa-btn pa-btn-enable <?php echo esc_attr( $enable_btn ); ?>"><?php echo __( 'Switch On', 'premium-addons-for-elementor' ); ?></button>
38
  <button type="button" class="pa-btn pa-btn-disable <?php echo esc_attr( $disable_btn ); ?>"><?php echo __( 'Switch Off', 'premium-addons-for-elementor' ); ?></button>
39
+ <?php if ( false !== $used_widgets ) { ?>
40
  <button type="button" class="pa-btn-unused"><?php echo __( 'Disable Unused Widgets', 'premium-addons-for-elementor' ); ?></button>
41
+ <?php } ?>
42
  </div>
43
  </div>
44
 
assets/editor/js/editor.js CHANGED
@@ -1,328 +1,328 @@
1
- (function () {
2
- var $ = jQuery;
3
-
4
- var selectOptions = elementor.modules.controls.Select2.extend({
5
-
6
- onBeforeRender: function () {
7
- console.log(this.container.type);
8
- if (this.container && ("section" === this.container.type || "container" === this.container.type)) {
9
- var widgetObj = elementor.widgetsCache || elementor.config.widgets,
10
- optionsToUpdate = {};
11
-
12
- this.container.children.forEach(function (child) {
13
-
14
- child.view.$childViewContainer.children("[data-widget_type]").each(function (index, widget) {
15
- var name = $(widget).data("widget_type").split('.')[0];
16
-
17
- if ('undefined' !== typeof widgetObj[name]) {
18
- optionsToUpdate[".elementor-widget-" + widgetObj[name].widget_type + " .elementor-widget-container"] = widgetObj[name].title;
19
- }
20
- });
21
- });
22
-
23
- this.model.set("options", optionsToUpdate);
24
- }
25
- },
26
- });
27
-
28
- elementor.addControlView("premium-select", selectOptions);
29
-
30
- var filterOptions = elementor.modules.controls.Select2.extend({
31
-
32
- isUpdated: false,
33
-
34
- onReady: function () {
35
- var self = this,
36
- type = self.options.elementSettingsModel.attributes.post_type_filter;
37
-
38
- if ('post' !== type) {
39
- var options = (0 === this.model.get('options').length);
40
-
41
- if (options) {
42
- self.fetchData(type);
43
- }
44
- }
45
-
46
- elementor.channels.editor.on('change', function (view) {
47
- var changed = view.elementSettingsModel.changed;
48
-
49
- if (undefined !== changed.post_type_filter && 'post' !== changed.post_type_filter && !self.isUpdated) {
50
- self.isUpdated = true;
51
- self.fetchData(changed.post_type_filter);
52
- }
53
- });
54
- },
55
-
56
- fetchData: function (type) {
57
- var self = this;
58
- $.ajax({
59
- url: PremiumSettings.ajaxurl,
60
- dataType: 'json',
61
- type: 'POST',
62
- data: {
63
- nonce: PremiumSettings.nonce,
64
- action: 'premium_update_filter',
65
- post_type: type
66
- },
67
- success: function (res) {
68
- self.updateFilterOptions(JSON.parse(res.data));
69
- self.isUpdated = false;
70
-
71
- self.render();
72
- },
73
- error: function (err) {
74
- console.log(err);
75
- },
76
- });
77
- },
78
-
79
- updateFilterOptions: function (options) {
80
- this.model.set("options", options);
81
- },
82
-
83
- onBeforeDestroy: function () {
84
- if (this.ui.select.data('select2')) {
85
- this.ui.select.select2('destroy');
86
- }
87
-
88
- this.$el.remove();
89
- }
90
- });
91
-
92
- elementor.addControlView("premium-post-filter", filterOptions);
93
-
94
- var taxOptions = elementor.modules.controls.Select.extend({
95
-
96
- isUpdated: false,
97
-
98
- onReady: function () {
99
- var self = this,
100
- type = self.options.elementSettingsModel.attributes.post_type_filter,
101
- options = (0 === this.model.get('options').length);
102
-
103
- if (options) {
104
- self.fetchData(type);
105
- }
106
-
107
- elementor.channels.editor.on('change', function (view) {
108
- var changed = view.elementSettingsModel.changed;
109
-
110
- if (undefined !== changed.post_type_filter && !self.isUpdated) {
111
- self.isUpdated = true;
112
- self.fetchData(changed.post_type_filter);
113
- }
114
- });
115
- },
116
-
117
- fetchData: function (type) {
118
- var self = this;
119
- $.ajax({
120
- url: PremiumSettings.ajaxurl,
121
- dataType: 'json',
122
- type: 'POST',
123
- data: {
124
- nonce: PremiumSettings.nonce,
125
- action: 'premium_update_tax',
126
- post_type: type
127
- },
128
- success: function (res) {
129
- var options = JSON.parse(res.data);
130
- self.updateTaxOptions(options);
131
- self.isUpdated = false;
132
-
133
- if (0 !== options.length) {
134
- var $tax = Object.keys(options);
135
- self.container.settings.setExternalChange({ 'filter_tabs_type': $tax[0] });
136
- self.container.render();
137
- self.render();
138
- }
139
- },
140
- error: function (err) {
141
- console.log(err);
142
- },
143
- });
144
- },
145
-
146
- updateTaxOptions: function (options) {
147
- this.model.set("options", options);
148
- },
149
- });
150
-
151
- elementor.addControlView("premium-tax-filter", taxOptions);
152
-
153
- var acfOptions = elementor.modules.controls.Select2.extend({
154
-
155
- isUpdated: false,
156
-
157
- onReady: function () {
158
- var self = this;
159
-
160
- if (!self.isUpdated) {
161
- self.fetchData();
162
- }
163
- },
164
-
165
- fetchData: function () {
166
- var self = this;
167
-
168
- $.ajax({
169
- url: PremiumSettings.ajaxurl,
170
- dataType: 'json',
171
- type: 'POST',
172
- data: {
173
- nonce: PremiumSettings.nonce,
174
- action: 'pa_acf_options',
175
- query_options: self.model.get('query_options'),
176
- },
177
- success: function (res) {
178
- self.isUpdated = true;
179
- self.updateAcfOptions(JSON.parse(res.data));
180
- self.render();
181
- },
182
- error: function (err) {
183
- console.log(err);
184
- },
185
- });
186
- },
187
-
188
- updateAcfOptions: function (options) {
189
- this.model.set("options", options);
190
- },
191
-
192
- onBeforeDestroy: function () {
193
- if (this.ui.select.data('select2')) {
194
- this.ui.select.select2('destroy');
195
- }
196
-
197
- this.$el.remove();
198
- }
199
- });
200
-
201
- elementor.addControlView("premium-acf-selector", acfOptions);
202
-
203
- elementor.hooks.addFilter("panel/elements/regionViews", function (panel) {
204
-
205
- if (PremiumPanelSettings.papro_installed || PremiumPanelSettings.papro_widgets.length <= 0)
206
- return panel;
207
-
208
-
209
- var paWidgetsPromoHandler, proCategoryIndex,
210
- elementsView = panel.elements.view,
211
- categoriesView = panel.categories.view,
212
- widgets = panel.elements.options.collection,
213
- categories = panel.categories.options.collection,
214
- premiumProCategory = [];
215
-
216
- _.each(PremiumPanelSettings.papro_widgets, function (widget, index) {
217
- widgets.add({
218
- name: widget.key,
219
- title: wp.i18n.__('Premium ', 'premium-addons-for-elementor') + widget.title,
220
- icon: widget.icon,
221
- categories: ["premium-elements-pro"],
222
- editable: false
223
- })
224
- });
225
-
226
- widgets.each(function (widget) {
227
- "premium-elements-pro" === widget.get("categories")[0] && premiumProCategory.push(widget)
228
- });
229
-
230
- proCategoryIndex = categories.findIndex({
231
- name: "premium-elements"
232
- });
233
-
234
- proCategoryIndex && categories.add({
235
- name: "premium-elements-pro",
236
- title: "Premium Addons Pro",
237
- defaultActive: !1,
238
- items: premiumProCategory
239
- }, {
240
- at: proCategoryIndex + 1
241
- });
242
-
243
-
244
- paWidgetsPromoHandler = {
245
- className: function () {
246
-
247
- var className = 'elementor-element-wrapper';
248
-
249
- if (!this.isEditable()) {
250
- className += ' elementor-element--promotion';
251
- }
252
-
253
- if (this.model.get("name")) {
254
- if (0 === this.model.get("name").indexOf("premium-"))
255
- className += ' premium-promotion-element';
256
- }
257
-
258
- return className;
259
-
260
- },
261
-
262
- isPremiumWidget: function () {
263
- return 0 === this.model.get("name").indexOf("premium-");
264
- },
265
-
266
- getElementObj: function (key) {
267
-
268
- var widgetObj = PremiumPanelSettings.papro_widgets.find(function (widget, index) {
269
- if (widget.key == key)
270
- return true;
271
- });
272
-
273
- return widgetObj;
274
-
275
- },
276
-
277
- onMouseDown: function () {
278
-
279
- if (!this.isPremiumWidget())
280
- return;
281
-
282
- elementor.promotion.dialog.buttons[0].removeClass("premium-promotion-btn");
283
- void this.constructor.__super__.onMouseDown.call(this);
284
-
285
- var widgetObject = this.getElementObj(this.model.get("name")),
286
- actonURL = widgetObject.action_url;
287
-
288
- // console.log(widgetObject.action_url.indexOf('/?utm_source'));
289
-
290
- elementor.promotion.dialog.buttons[0].addClass("premium-promotion-btn").closest('#elementor-element--promotion__dialog').addClass('premium-promotion-dialog');
291
-
292
- $(".premium-promotion-pro-btn").remove();
293
-
294
- var goProCta = 'https://premiumaddons.com/pro' + actonURL.substring(actonURL.indexOf('/?utm_source'));
295
-
296
- var $goProBtn = $('<a>', { text: wp.i18n.__('Go Pro', 'elementor'), href: goProCta, class: 'premium-promotion-pro-btn dialog-button elementor-button', target: '_blank' });
297
-
298
- elementor.promotion.dialog.buttons[0].after($goProBtn);
299
-
300
- elementor.promotion.showDialog({
301
- headerMessage: sprintf(wp.i18n.__('%s', 'elementor'), this.model.get("title")),
302
- message: sprintf(wp.i18n.__('Use %s widget and dozens more pro features to extend your toolbox and build sites faster and better.', 'elementor'), this.model.get("title")),
303
- top: "-7",
304
- element: this.el,
305
- actionURL: widgetObject.action_url
306
- })
307
- }
308
- }
309
-
310
- // setTimeout(function () {
311
- panel.elements.view = elementsView.extend({
312
- childView: elementsView.prototype.childView.extend(paWidgetsPromoHandler)
313
- });
314
-
315
- panel.categories.view = categoriesView.extend({
316
- childView: categoriesView.prototype.childView.extend({
317
- childView: categoriesView.prototype.childView.prototype.childView.extend(paWidgetsPromoHandler)
318
- })
319
- });
320
- // }, 2000);
321
-
322
-
323
- return panel;
324
-
325
-
326
- });
327
-
328
  })(jQuery);
1
+ (function () {
2
+ var $ = jQuery;
3
+
4
+ var selectOptions = elementor.modules.controls.Select2.extend({
5
+
6
+ onBeforeRender: function () {
7
+ console.log(this.container.type);
8
+ if (this.container && ("section" === this.container.type || "container" === this.container.type)) {
9
+ var widgetObj = elementor.widgetsCache || elementor.config.widgets,
10
+ optionsToUpdate = {};
11
+
12
+ this.container.children.forEach(function (child) {
13
+
14
+ child.view.$childViewContainer.children("[data-widget_type]").each(function (index, widget) {
15
+ var name = $(widget).data("widget_type").split('.')[0];
16
+
17
+ if ('undefined' !== typeof widgetObj[name]) {
18
+ optionsToUpdate[".elementor-widget-" + widgetObj[name].widget_type + " .elementor-widget-container"] = widgetObj[name].title;
19
+ }
20
+ });
21
+ });
22
+
23
+ this.model.set("options", optionsToUpdate);
24
+ }
25
+ },
26
+ });
27
+
28
+ elementor.addControlView("premium-select", selectOptions);
29
+
30
+ var filterOptions = elementor.modules.controls.Select2.extend({
31
+
32
+ isUpdated: false,
33
+
34
+ onReady: function () {
35
+ var self = this,
36
+ type = self.options.elementSettingsModel.attributes.post_type_filter;
37
+
38
+ if ('post' !== type) {
39
+ var options = (0 === this.model.get('options').length);
40
+
41
+ if (options) {
42
+ self.fetchData(type);
43
+ }
44
+ }
45
+
46
+ elementor.channels.editor.on('change', function (view) {
47
+ var changed = view.elementSettingsModel.changed;
48
+
49
+ if (undefined !== changed.post_type_filter && 'post' !== changed.post_type_filter && !self.isUpdated) {
50
+ self.isUpdated = true;
51
+ self.fetchData(changed.post_type_filter);
52
+ }
53
+ });
54
+ },
55
+
56
+ fetchData: function (type) {
57
+ var self = this;
58
+ $.ajax({
59
+ url: PremiumSettings.ajaxurl,
60
+ dataType: 'json',
61
+ type: 'POST',
62
+ data: {
63
+ nonce: PremiumSettings.nonce,
64
+ action: 'premium_update_filter',
65
+ post_type: type
66
+ },
67
+ success: function (res) {
68
+ self.updateFilterOptions(JSON.parse(res.data));
69
+ self.isUpdated = false;
70
+
71
+ self.render();
72
+ },
73
+ error: function (err) {
74
+ console.log(err);
75
+ },
76
+ });
77
+ },
78
+
79
+ updateFilterOptions: function (options) {
80
+ this.model.set("options", options);
81
+ },
82
+
83
+ onBeforeDestroy: function () {
84
+ if (this.ui.select.data('select2')) {
85
+ this.ui.select.select2('destroy');
86
+ }
87
+
88
+ this.$el.remove();
89
+ }
90
+ });
91
+
92
+ elementor.addControlView("premium-post-filter", filterOptions);
93
+
94
+ var taxOptions = elementor.modules.controls.Select.extend({
95
+
96
+ isUpdated: false,
97
+
98
+ onReady: function () {
99
+ var self = this,
100
+ type = self.options.elementSettingsModel.attributes.post_type_filter,
101
+ options = (0 === this.model.get('options').length);
102
+
103
+ if (options) {
104
+ self.fetchData(type);
105
+ }
106
+
107
+ elementor.channels.editor.on('change', function (view) {
108
+ var changed = view.elementSettingsModel.changed;
109
+
110
+ if (undefined !== changed.post_type_filter && !self.isUpdated) {
111
+ self.isUpdated = true;
112
+ self.fetchData(changed.post_type_filter);
113
+ }
114
+ });
115
+ },
116
+
117
+ fetchData: function (type) {
118
+ var self = this;
119
+ $.ajax({
120
+ url: PremiumSettings.ajaxurl,
121
+ dataType: 'json',
122
+ type: 'POST',
123
+ data: {
124
+ nonce: PremiumSettings.nonce,
125
+ action: 'premium_update_tax',
126
+ post_type: type
127
+ },
128
+ success: function (res) {
129
+ var options = JSON.parse(res.data);
130
+ self.updateTaxOptions(options);
131
+ self.isUpdated = false;
132
+
133
+ if (0 !== options.length) {
134
+ var $tax = Object.keys(options);
135
+ self.container.settings.setExternalChange({ 'filter_tabs_type': $tax[0] });
136
+ self.container.render();
137
+ self.render();
138
+ }
139
+ },
140
+ error: function (err) {
141
+ console.log(err);
142
+ },
143
+ });
144
+ },
145
+
146
+ updateTaxOptions: function (options) {
147
+ this.model.set("options", options);
148
+ },
149
+ });
150
+
151
+ elementor.addControlView("premium-tax-filter", taxOptions);
152
+
153
+ var acfOptions = elementor.modules.controls.Select2.extend({
154
+
155
+ isUpdated: false,
156
+
157
+ onReady: function () {
158
+ var self = this;
159
+
160
+ if (!self.isUpdated) {
161
+ self.fetchData();
162
+ }
163
+ },
164
+
165
+ fetchData: function () {
166
+ var self = this;
167
+
168
+ $.ajax({
169
+ url: PremiumSettings.ajaxurl,
170
+ dataType: 'json',
171
+ type: 'POST',
172
+ data: {
173
+ nonce: PremiumSettings.nonce,
174
+ action: 'pa_acf_options',
175
+ query_options: self.model.get('query_options'),
176
+ },
177
+ success: function (res) {
178
+ self.isUpdated = true;
179
+ self.updateAcfOptions(JSON.parse(res.data));
180
+ self.render();
181
+ },
182
+ error: function (err) {
183
+ console.log(err);
184
+ },
185
+ });
186
+ },
187
+
188
+ updateAcfOptions: function (options) {
189
+ this.model.set("options", options);
190
+ },
191
+
192
+ onBeforeDestroy: function () {
193
+ if (this.ui.select.data('select2')) {
194
+ this.ui.select.select2('destroy');
195
+ }
196
+
197
+ this.$el.remove();
198
+ }
199
+ });
200
+
201
+ elementor.addControlView("premium-acf-selector", acfOptions);
202
+
203
+ elementor.hooks.addFilter("panel/elements/regionViews", function (panel) {
204
+
205
+ if (PremiumPanelSettings.papro_installed || PremiumPanelSettings.papro_widgets.length <= 0)
206
+ return panel;
207
+
208
+
209
+ var paWidgetsPromoHandler, proCategoryIndex,
210
+ elementsView = panel.elements.view,
211
+ categoriesView = panel.categories.view,
212
+ widgets = panel.elements.options.collection,
213
+ categories = panel.categories.options.collection,
214
+ premiumProCategory = [];
215
+
216
+ _.each(PremiumPanelSettings.papro_widgets, function (widget, index) {
217
+ widgets.add({
218
+ name: widget.key,
219
+ title: wp.i18n.__('Premium ', 'premium-addons-for-elementor') + widget.title,
220
+ icon: widget.icon,
221
+ categories: ["premium-elements-pro"],
222
+ editable: false
223
+ })
224
+ });
225
+
226
+ widgets.each(function (widget) {
227
+ "premium-elements-pro" === widget.get("categories")[0] && premiumProCategory.push(widget)
228
+ });
229
+
230
+ proCategoryIndex = categories.findIndex({
231
+ name: "premium-elements"
232
+ });
233
+
234
+ proCategoryIndex && categories.add({
235
+ name: "premium-elements-pro",
236
+ title: "Premium Addons Pro",
237
+ defaultActive: !1,
238
+ items: premiumProCategory
239
+ }, {
240
+ at: proCategoryIndex + 1
241
+ });
242
+
243
+
244
+ paWidgetsPromoHandler = {
245
+ className: function () {
246
+
247
+ var className = 'elementor-element-wrapper';
248
+
249
+ if (!this.isEditable()) {
250
+ className += ' elementor-element--promotion';
251
+ }
252
+
253
+ if (this.model.get("name")) {
254
+ if (0 === this.model.get("name").indexOf("premium-"))
255
+ className += ' premium-promotion-element';
256
+ }
257
+
258
+ return className;
259
+
260
+ },
261
+
262
+ isPremiumWidget: function () {
263
+ return 0 === this.model.get("name").indexOf("premium-");
264
+ },
265
+
266
+ getElementObj: function (key) {
267
+
268
+ var widgetObj = PremiumPanelSettings.papro_widgets.find(function (widget, index) {
269
+ if (widget.key == key)
270
+ return true;
271
+ });
272
+
273
+ return widgetObj;
274
+
275
+ },
276
+
277
+ onMouseDown: function () {
278
+
279
+ if (!this.isPremiumWidget())
280
+ return;
281
+
282
+ elementor.promotion.dialog.buttons[0].removeClass("premium-promotion-btn");
283
+ void this.constructor.__super__.onMouseDown.call(this);
284
+
285
+ var widgetObject = this.getElementObj(this.model.get("name")),
286
+ actonURL = widgetObject.action_url;
287
+
288
+ // console.log(widgetObject.action_url.indexOf('/?utm_source'));
289
+
290
+ elementor.promotion.dialog.buttons[0].addClass("premium-promotion-btn").closest('#elementor-element--promotion__dialog').addClass('premium-promotion-dialog');
291
+
292
+ $(".premium-promotion-pro-btn").remove();
293
+
294
+ var goProCta = 'https://premiumaddons.com/pro' + actonURL.substring(actonURL.indexOf('/?utm_source'));
295
+
296
+ var $goProBtn = $('<a>', { text: wp.i18n.__('Go Pro', 'elementor'), href: goProCta, class: 'premium-promotion-pro-btn dialog-button elementor-button', target: '_blank' });
297
+
298
+ elementor.promotion.dialog.buttons[0].after($goProBtn);
299
+
300
+ elementor.promotion.showDialog({
301
+ headerMessage: sprintf(wp.i18n.__('%s', 'elementor'), this.model.get("title")),
302
+ message: sprintf(wp.i18n.__('Use %s widget and dozens more pro features to extend your toolbox and build sites faster and better.', 'elementor'), this.model.get("title")),
303
+ top: "-7",
304
+ element: this.el,
305
+ actionURL: widgetObject.action_url
306
+ })
307
+ }
308
+ }
309
+
310
+ // setTimeout(function () {
311
+ panel.elements.view = elementsView.extend({
312
+ childView: elementsView.prototype.childView.extend(paWidgetsPromoHandler)
313
+ });
314
+
315
+ panel.categories.view = categoriesView.extend({
316
+ childView: categoriesView.prototype.childView.extend({
317
+ childView: categoriesView.prototype.childView.prototype.childView.extend(paWidgetsPromoHandler)
318
+ })
319
+ });
320
+ // }, 2000);
321
+
322
+
323
+ return panel;
324
+
325
+
326
+ });
327
+
328
  })(jQuery);
assets/editor/templates/css/editor-rtl.css CHANGED
@@ -1,489 +1,578 @@
1
- #premium-template-modal .dialog-widget-content {
2
- background-color: #f1f3f5;
3
- width: 100%;
4
- }
5
- @media (max-width: 1439px) {
6
- #premium-template-modal .dialog-widget-content {
7
- max-width: 990px;
8
- }
9
- }
10
- @media (min-width: 1440px) {
11
- #premium-template-modal .dialog-widget-content {
12
- max-width: 1200px;
13
- }
14
- }
15
- #premium-template-modal .dialog-widget-header,
16
- #premium-template-modal .dialog-header {
17
- padding: 0;
18
- background-color: #fff;
19
- -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
20
- box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
21
- position: relative;
22
- z-index: 1;
23
- }
24
- #premium-template-modal .dialog-buttons-wrapper {
25
- display: none;
26
- }
27
- #premium-template-modal a,
28
- #premium-template-modal a:hover {
29
- color: inherit;
30
- }
31
- #premium-template-modal a.elementor-template-library-blank-footer-link {
32
- -webkit-transition: color 0.5s;
33
- transition: color 0.5s;
34
- }
35
- #premium-template-modal a.elementor-template-library-blank-footer-link:hover {
36
- color: #9b0a46;
37
- }
38
- #premium-template-modal .elementor-button {
39
- text-transform: uppercase;
40
- }
41
- #premium-template-modal ::-webkit-scrollbar {
42
- width: 6px;
43
- height: 0;
44
- border-radius: 3px;
45
- }
46
- #premium-template-modal ::-webkit-scrollbar-button {
47
- width: 0;
48
- height: 10px;
49
- }
50
- #premium-template-modal ::-webkit-scrollbar-thumb {
51
- background-color: #d5dadf;
52
- border: 0 none #d5dadf;
53
- border-radius: 0;
54
- border-radius: 3px;
55
- }
56
- #premium-template-modal ::-webkit-scrollbar-track {
57
- border: 0 none #fff;
58
- border-radius: 0;
59
- }
60
- #premium-template-modal ::-webkit-scrollbar-corner {
61
- background: transparent;
62
- }
63
- #premium-template-modal-header {
64
- display: -webkit-box;
65
- display: -ms-flexbox;
66
- display: flex;
67
- -webkit-box-pack: justify;
68
- -ms-flex-pack: justify;
69
- display: -webkit-box;
70
- display: -webkit-flex;
71
- display: -ms-flexbox;
72
- display: flex;
73
- -webkit-box-align: center;
74
- -webkit-align-items: center;
75
- -ms-flex-align: center;
76
- align-items: center;
77
- -webkit-box-pack: justify;
78
- -ms-flex-pack: justify;
79
-
80
- height: 50px;
81
- }
82
- #premium-template-modal-header .premium-template-modal-back {
83
- background: none;
84
- border: none;
85
- border-left: 1px solid #e6e9ec;
86
- padding: 15px 15px 15px 20px;
87
- line-height: 20px;
88
- font-size: 13px;
89
- font-weight: 700;
90
- outline: none;
91
- -webkit-transition: all 200ms linear;
92
- transition: all 200ms linear;
93
- cursor: pointer;
94
- color: #6d7882;
95
- }
96
- #premium-template-modal-header .premium-template-modal-back:not(:hover) {
97
- color: #a4afb7;
98
- }
99
- #premium-template-modal-header .elementor-button {
100
- padding: 8px 10px;
101
- }
102
- #premium-template-modal-header-close-modal {
103
- width: 45px;
104
- border-right: 1px solid #e6e9ec;
105
- display: -webkit-box;
106
- display: -ms-flexbox;
107
- display: flex;
108
- -webkit-box-align: center;
109
- -ms-flex-align: center;
110
- align-items: center;
111
- -webkit-box-pack: center;
112
- -ms-flex-pack: center;
113
- justify-content: center;
114
- cursor: pointer;
115
- -webkit-transition: all 200ms linear;
116
- transition: all 200ms linear;
117
- }
118
- #premium-template-modal-header-close-modal i {
119
- color: #a4afb7;
120
- font-size: 16px;
121
- }
122
- #premium-template-modal-header-close-modal:hover i {
123
- color: #6d7882;
124
- }
125
- #premium-template-modal-header-actions .template-library-activate-license {
126
- display: block;
127
- padding: 8px 10px;
128
- color: #fff;
129
- }
130
- #premium-template-modal-header-actions .template-library-activate-license:hover {
131
- color: #fff;
132
- opacity: 0.85;
133
- -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
134
- box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
135
- }
136
- #premium-template-modal .elementor-library-error {
137
- margin: 18% 0 0;
138
- }
139
- #premium-template-modal .elementor-library-error-message {
140
- font-size: 18px;
141
- padding: 0 0 20px;
142
- }
143
- #premium-template-modal .elementor-library-error-link a {
144
- display: inline-block;
145
- color: #fff;
146
- background-image: none;
147
- background: #f47216;
148
- font-size: 13px;
149
- font-weight: 400;
150
- font-style: normal;
151
- text-transform: uppercase;
152
- line-height: 1;
153
- height: 40px;
154
- line-height: 40px;
155
- min-width: 170px;
156
- padding: 0 20px;
157
- border: none;
158
- border-radius: 3px;
159
- cursor: pointer;
160
- -webkit-transition: all 0.5s;
161
- transition: all 0.5s;
162
- }
163
- #premium-template-modal .elementor-library-error-link a:hover {
164
- opacity: 0.85;
165
- -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
166
- box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
167
- }
168
- #premium-modal-tabs-items {
169
- display: none;
170
- }
171
- #premium-template-modal-header-tabs {
172
- display: -webkit-box;
173
- display: -webkit-flex;
174
- display: -ms-flexbox;
175
- display: flex;
176
- flex: 2;
177
- -webkit-box-align: center;
178
- -webkit-align-items: center;
179
- -ms-flex-align: center;
180
- align-items: center;
181
- -webkit-box-pack: justify;
182
- -webkit-justify-content: space-between;
183
- -ms-flex-pack: justify;
184
- justify-content: space-between;
185
- }
186
- #premium-template-modal-header-logo-area {
187
- text-align: right;
188
- padding-right: 15px;
189
- }
190
- #premium-template-modal-header-logo-area > * {
191
- display: -webkit-box;
192
- display: -webkit-flex;
193
- display: -ms-flexbox;
194
- display: flex;
195
- -webkit-box-align: center;
196
- -webkit-align-items: center;
197
- -ms-flex-align: center;
198
- align-items: center;
199
- }
200
- #premium-template-modal-header-logo .premium-template-modal-header-logo-icon {
201
- margin-left: 5px;
202
- }
203
- #premium-template-modal-header-logo .premium-template-modal-header-logo-icon img {
204
- width: 30px;
205
- height: 30px;
206
- }
207
- #premium-template-modal-header-logo {
208
- color: #495157;
209
- line-height: 1;
210
- text-transform: uppercase;
211
- font-weight: 700;
212
- cursor: pointer;
213
- }
214
- #premium-template-library-content {
215
- display: -webkit-box;
216
- display: -ms-flexbox;
217
- display: flex;
218
- height: calc(100% - 20px);
219
- }
220
- #premium-template-library-content .premium-filters-list {
221
- width: 18%;
222
- padding: 0px 0px 10px 10px;
223
- height: 100%;
224
- overflow: auto;
225
- }
226
- #premium-template-library-content .premium-templates-wrap {
227
- width: 85%;
228
- }
229
- #premium-template-library-content .premium-templates-list {
230
- height: 100%;
231
- overflow: auto;
232
- margin-top: 12px;
233
- }
234
- #premium-template-library-content .premium-keywords-list {
235
- padding-right: 10px;
236
- }
237
- #elementor-template-library-filter {
238
- display: -webkit-box;
239
- display: -ms-flexbox;
240
- display: flex;
241
- align-items: center;
242
- }
243
- #elementor-template-library-filter label {
244
- color: #6d7882;
245
- font-size: 14px;
246
- font-weight: 500;
247
- margin-left: 0.5em;
248
- }
249
- #premium-template-modal .elementor-loader {
250
- position: relative;
251
- background-color: hsla(0, 0%, 100%, 0.9);
252
- }
253
- #premium-template-modal .elementor-loader .elementor-loader-box:first-of-type {
254
- left: 40px;
255
- top: 40px;
256
- width: 14px;
257
- height: 70px;
258
- }
259
- #premium-template-modal .elementor-loader .elementor-loader-box:nth-of-type(2) {
260
- top: 40px;
261
- }
262
- #premium-template-modal .elementor-loader .elementor-loader-box:nth-of-type(3) {
263
- top: 68px;
264
- }
265
- #premium-template-modal .elementor-loader .elementor-loader-box:nth-of-type(4) {
266
- bottom: 40px;
267
- }
268
- #premium-template-modal .elementor-loader .elementor-loader-box:not(:first-of-type) {
269
- right: 40px;
270
- height: 14px;
271
- width: 42px;
272
- }
273
- #premium-template-library-content .premium-template-filter-label {
274
- display: block;
275
- position: relative;
276
- text-align: right;
277
- padding: 9px 0;
278
- }
279
- #premium-template-library-content .premium-template-filter-label input[type="radio"] {
280
- position: absolute;
281
- right: 0;
282
- top: 0;
283
- left: 0;
284
- bottom: 0;
285
- margin: 0;
286
- opacity: 0;
287
- display: block;
288
- width: 100%;
289
- height: 100%;
290
- cursor: pointer;
291
- }
292
- .premium-template-filter-label span {
293
- color: #6d7882;
294
- }
295
- #premium-template-library-content .premium-template-filter-label:hover span,
296
- #premium-template-library-content .premium-template-filter-label input:checked + span {
297
- color: #f47216;
298
- }
299
- #premium-template-library-content .premium-template-filter-item {
300
- border-top: 1px solid rgba(213, 218, 223, 0.5);
301
- }
302
- #premium-template-library-content .premium-template-filter-item:first-child {
303
- border-top: none;
304
- }
305
- #premium-template-library-content .premium-templates-wrap {
306
- width: 100%;
307
- }
308
- #premium-template-library-content .premium-template-insert {
309
- padding: 5px 12px;
310
- }
311
- #premium-template-library-content .premium-template-insert i {
312
- margin-left: 2px;
313
- }
314
- #premium-template-library-content .premium-template-insert span {
315
- font-size: 11px;
316
- }
317
- #premium-template-library-content .elementor-template-library-template-name {
318
- width: 200px;
319
- }
320
- #premium-modal-templates-container {
321
- display: -webkit-box;
322
- display: -ms-flexbox;
323
- display: flex;
324
- -ms-flex-wrap: wrap;
325
- flex-wrap: wrap;
326
- -webkit-box-align: start;
327
- -ms-flex-align: start;
328
- align-items: flex-start;
329
- }
330
- #premium-modal-templates-container .elementor-template-library-template {
331
- position: relative;
332
- background: #fff;
333
- }
334
- #premium-modal-templates-container .premium-template-pro::before {
335
- position: absolute;
336
- left: -76px;
337
- top: 2px;
338
- content: "PRO";
339
- z-index: 10;
340
- width: 180px;
341
- height: 20px;
342
- padding: 0 20px;
343
- font-size: 12px;
344
- line-height: 10px;
345
- text-align: center;
346
- color: #fff;
347
- font-weight: bold;
348
- box-shadow: 0px 1px 3px #888888;
349
- background: #f47216;
350
- border-top: 5px solid #f47216;
351
- border-bottom: 5px solid #f47216;
352
- -webkit-transform: rotate(-35deg);
353
- transform: rotate(-35deg);
354
- }
355
- #premium-modal-templates-container .elementor-template-library-template-remote {
356
- width: calc(33.3333% - 30px);
357
- }
358
- #premium-template-library-content #premium-modal-templates-container .elementor-template-library-template-controls {
359
- position: absolute;
360
- background-color: #fff;
361
- right: 0;
362
- bottom: -15px;
363
- left: 0;
364
- display: -webkit-box;
365
- display: -ms-flexbox;
366
- display: flex;
367
- -webkit-box-pack: justify;
368
- -ms-flex-pack: justify;
369
- -webkit-transition: all 0.3s ease;
370
- transition: all 0.3s ease;
371
- justify-content: center;
372
- padding: 9px 8px 9px 10px;
373
- z-index: 10;
374
- }
375
- #premium-template-library-content
376
- #premium-modal-templates-container
377
- .elementor-template-library-template:hover
378
- .elementor-template-library-template-controls {
379
- bottom: 0;
380
- }
381
- #premium-template-library-content #premium-modal-templates-container .premium-template-insert {
382
- padding: 0;
383
- margin: 0;
384
- color: #39b54a;
385
- background: none;
386
- text-transform: none;
387
- font-size: 12px;
388
- }
389
- #premium-template-library-content #premium-modal-templates-container .premium-clone-template {
390
- background: none;
391
- border: none;
392
- padding: 0;
393
- margin: 0;
394
- color: #9b0a46;
395
- cursor: pointer;
396
- display: none;
397
- font-size: 12px;
398
- -webkit-box-shadow: none;
399
- box-shadow: none;
400
- outline: none;
401
- font-weight: bold;
402
- }
403
- div.premium-template-has-url:hover .premium-clone-template {
404
- display: block !important;
405
- }
406
- #premium-template-library-content #premium-modal-templates-container .premium-template-insert:hover {
407
- -webkit-box-shadow: none;
408
- box-shadow: none;
409
- }
410
- #premium-template-library-content #premium-modal-templates-container .elementor-template-library-template-name {
411
- padding: 5px 0 0;
412
- text-align: center;
413
- display: block !important;
414
- }
415
- #premium-template-library-content #premium-modal-templates-container .elementor-template-library-template-name-holder {
416
- height: 23px;
417
- }
418
- #premium-template-library-content #premium-modal-templates-container .template-library-activate-license {
419
- display: none;
420
- color: #fcb92c;
421
- font-size: 12px;
422
- }
423
- #premium-template-library-content #premium-modal-templates-container .template-library-activate-license:hover {
424
- color: #d89403;
425
- }
426
- #premium-template-library-content
427
- #premium-modal-templates-container
428
- .elementor-template-library-template:hover
429
- .elementor-template-library-template-name {
430
- opacity: 0;
431
- }
432
- .library-tab-premium_page #premium-modal-templates-container .elementor-template-library-template-remote {
433
- width: calc(25% - 20px);
434
- margin: 10px;
435
- }
436
- .library-tab-premium_page
437
- #premium-modal-templates-container
438
- .elementor-template-library-template-remote
439
- .elementor-template-library-template-action {
440
- padding: 8px;
441
- }
442
- #premium-modal-templates-container .premium-template-no-url .elementor-template-library-template-preview {
443
- cursor: default !important;
444
- opacity: 0 !important;
445
- }
446
- #premium-modal-templates-container .premium-template-no-url .fa-search-plus {
447
- display: none !important;
448
- }
449
- #premium-modal-templates-container .elementor-template-library-template:hover .template-library-activate-license {
450
- display: block !important;
451
- }
452
- .elementor-template-library-template-screenshot img {
453
- width: 100%;
454
- max-width: 100%;
455
- height: auto;
456
- display: block;
457
- }
458
- /* * Preview Iframe */
459
- #premium-templatate-item-preview-wrap,
460
- #premium-templatate-item-preview-wrap .premium-template-item-preview-iframe {
461
- height: 100%;
462
- overflow: hidden;
463
- }
464
- #premium-templatate-item-preview-wrap iframe {
465
- height: 140%;
466
- -webkit-transform: scale(0.666) translateX(25%) translateY(-25%);
467
- -ms-transform: scale(0.666) translateX(25%) translateY(-25%);
468
- transform: scale(0.666) translateX(25%) translateY(-25%);
469
- }
470
- @media (max-width: 1439px) {
471
- #premium-templatate-item-preview-wrap iframe {
472
- width: 1440px;
473
- }
474
- }
475
- @media (min-width: 1440px) {
476
- #premium-templatate-item-preview-wrap iframe {
477
- width: 1710px;
478
- }
479
- }
480
- .premium-template-item-notice div {
481
- color: #31708f;
482
- background-color: #d9edf7;
483
- border-color: #bcdff1;
484
- padding: 15px;
485
- border-right: 5px solid #bcdff1;
486
- position: relative;
487
- text-align: right;
488
- margin-bottom: 8px;
489
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ #premium-template-modal .dialog-widget-content {
2
+ background-color: #f1f3f5;
3
+ width: 100%;
4
+ }
5
+
6
+ @media (max-width: 1439px) {
7
+ #premium-template-modal .dialog-widget-content {
8
+ max-width: 990px;
9
+ }
10
+ }
11
+
12
+ @media (min-width: 1440px) {
13
+ #premium-template-modal .dialog-widget-content {
14
+ max-width: 1200px;
15
+ }
16
+ }
17
+
18
+ #premium-template-modal .dialog-widget-header,
19
+ #premium-template-modal .dialog-header {
20
+ padding: 0;
21
+ background-color: #fff;
22
+ -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
23
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
24
+ position: relative;
25
+ z-index: 1;
26
+ }
27
+
28
+ #premium-template-modal .dialog-buttons-wrapper {
29
+ display: none;
30
+ }
31
+
32
+ #premium-template-modal a,
33
+ #premium-template-modal a:hover {
34
+ color: inherit;
35
+ }
36
+
37
+ #premium-template-modal a.elementor-template-library-blank-footer-link {
38
+ -webkit-transition: color 0.5s;
39
+ transition: color 0.5s;
40
+ }
41
+
42
+ #premium-template-modal a.elementor-template-library-blank-footer-link:hover {
43
+ color: #9b0a46;
44
+ }
45
+
46
+ #premium-template-modal .elementor-button {
47
+ text-transform: uppercase;
48
+ }
49
+
50
+ #premium-template-modal ::-webkit-scrollbar {
51
+ width: 6px;
52
+ height: 0;
53
+ border-radius: 3px;
54
+ }
55
+
56
+ #premium-template-modal ::-webkit-scrollbar-button {
57
+ width: 0;
58
+ height: 10px;
59
+ }
60
+
61
+ #premium-template-modal ::-webkit-scrollbar-thumb {
62
+ background-color: #d5dadf;
63
+ border: 0 none #d5dadf;
64
+ border-radius: 0;
65
+ border-radius: 3px;
66
+ }
67
+
68
+ #premium-template-modal ::-webkit-scrollbar-track {
69
+ border: 0 none #fff;
70
+ border-radius: 0;
71
+ }
72
+
73
+ #premium-template-modal ::-webkit-scrollbar-corner {
74
+ background: transparent;
75
+ }
76
+
77
+ #premium-template-modal-header {
78
+ display: -webkit-box;
79
+ display: -ms-flexbox;
80
+ display: flex;
81
+ -webkit-box-pack: justify;
82
+ -ms-flex-pack: justify;
83
+ display: -webkit-box;
84
+ display: -webkit-flex;
85
+ display: -ms-flexbox;
86
+ display: flex;
87
+ -webkit-box-align: center;
88
+ -webkit-align-items: center;
89
+ -ms-flex-align: center;
90
+ align-items: center;
91
+ -webkit-box-pack: justify;
92
+ -ms-flex-pack: justify;
93
+
94
+ height: 50px;
95
+ }
96
+
97
+ #premium-template-modal-header .premium-template-modal-back {
98
+ background: none;
99
+ border: none;
100
+ border-left: 1px solid #e6e9ec;
101
+ padding: 15px 15px 15px 20px;
102
+ line-height: 20px;
103
+ font-size: 13px;
104
+ font-weight: 700;
105
+ outline: none;
106
+ -webkit-transition: all 200ms linear;
107
+ transition: all 200ms linear;
108
+ cursor: pointer;
109
+ color: #6d7882;
110
+ }
111
+
112
+ #premium-template-modal-header .premium-template-modal-back:not(:hover) {
113
+ color: #a4afb7;
114
+ }
115
+
116
+ #premium-template-modal-header .elementor-button {
117
+ padding: 8px 10px;
118
+ }
119
+
120
+ #premium-template-modal-header-close-modal {
121
+ width: 45px;
122
+ border-right: 1px solid #e6e9ec;
123
+ display: -webkit-box;
124
+ display: -ms-flexbox;
125
+ display: flex;
126
+ -webkit-box-align: center;
127
+ -ms-flex-align: center;
128
+ align-items: center;
129
+ -webkit-box-pack: center;
130
+ -ms-flex-pack: center;
131
+ justify-content: center;
132
+ cursor: pointer;
133
+ -webkit-transition: all 200ms linear;
134
+ transition: all 200ms linear;
135
+ }
136
+
137
+ #premium-template-modal-header-close-modal i {
138
+ color: #a4afb7;
139
+ font-size: 16px;
140
+ }
141
+
142
+ #premium-template-modal-header-close-modal:hover i {
143
+ color: #6d7882;
144
+ }
145
+
146
+ #premium-template-modal-header-actions .template-library-activate-license {
147
+ display: block;
148
+ padding: 8px 10px;
149
+ color: #fff;
150
+ }
151
+
152
+ #premium-template-modal-header-actions .template-library-activate-license:hover {
153
+ color: #fff;
154
+ opacity: 0.85;
155
+ -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
156
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
157
+ }
158
+
159
+ #premium-template-modal-header-actions .premium-template-insert-no-media {
160
+ background-color: #a4afb7;
161
+ color: #fff;
162
+ }
163
+
164
+ #premium-template-modal .elementor-library-error {
165
+ margin: 18% 0 0;
166
+ }
167
+
168
+ #premium-template-modal .elementor-library-error-message {
169
+ font-size: 18px;
170
+ padding: 0 0 20px;
171
+ }
172
+
173
+ #premium-template-modal .elementor-library-error-link a {
174
+ display: inline-block;
175
+ color: #fff;
176
+ background-image: none;
177
+ background: #f47216;
178
+ font-size: 13px;
179
+ font-weight: 400;
180
+ font-style: normal;
181
+ text-transform: uppercase;
182
+ line-height: 1;
183
+ height: 40px;
184
+ line-height: 40px;
185
+ min-width: 170px;
186
+ padding: 0 20px;
187
+ border: none;
188
+ border-radius: 3px;
189
+ cursor: pointer;
190
+ -webkit-transition: all 0.5s;
191
+ transition: all 0.5s;
192
+ }
193
+
194
+ #premium-template-modal .elementor-library-error-link a:hover {
195
+ opacity: 0.85;
196
+ -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
197
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
198
+ }
199
+
200
+ #premium-modal-tabs-items {
201
+ display: none;
202
+ }
203
+
204
+ #premium-template-modal-header-tabs {
205
+ display: -webkit-box;
206
+ display: -webkit-flex;
207
+ display: -ms-flexbox;
208
+ display: flex;
209
+ flex: 2;
210
+ -webkit-box-align: center;
211
+ -webkit-align-items: center;
212
+ -ms-flex-align: center;
213
+ align-items: center;
214
+ -webkit-box-pack: justify;
215
+ -webkit-justify-content: space-between;
216
+ -ms-flex-pack: justify;
217
+ justify-content: space-between;
218
+ }
219
+
220
+ #premium-template-modal-header-logo-area {
221
+ text-align: right;
222
+ padding-right: 15px;
223
+ }
224
+
225
+ #premium-template-modal-header-logo-area>* {
226
+ display: -webkit-box;
227
+ display: -webkit-flex;
228
+ display: -ms-flexbox;
229
+ display: flex;
230
+ -webkit-box-align: center;
231
+ -webkit-align-items: center;
232
+ -ms-flex-align: center;
233
+ align-items: center;
234
+ }
235
+
236
+ #premium-template-modal-header-logo .premium-template-modal-header-logo-icon {
237
+ margin-left: 5px;
238
+ }
239
+
240
+ #premium-template-modal-header-logo .premium-template-modal-header-logo-icon img {
241
+ width: 30px;
242
+ height: 30px;
243
+ }
244
+
245
+ #premium-template-modal-header-logo {
246
+ color: #495157;
247
+ line-height: 1;
248
+ text-transform: uppercase;
249
+ font-weight: 700;
250
+ cursor: pointer;
251
+ }
252
+
253
+ #premium-template-library-content {
254
+ display: -webkit-box;
255
+ display: -ms-flexbox;
256
+ display: flex;
257
+ height: calc(100% - 20px);
258
+ }
259
+
260
+ #premium-template-library-content .premium-filters-list {
261
+ width: 18%;
262
+ padding: 0px 0px 10px 10px;
263
+ height: 100%;
264
+ overflow: auto;
265
+ }
266
+
267
+ #premium-template-library-content .premium-templates-wrap {
268
+ width: 85%;
269
+ }
270
+
271
+ #premium-template-library-content .premium-templates-list {
272
+ height: 100%;
273
+ overflow: auto;
274
+ margin-top: 12px;
275
+ }
276
+
277
+ #premium-template-library-content .premium-keywords-list {
278
+ padding-right: 10px;
279
+ }
280
+
281
+ #elementor-template-library-filter {
282
+ display: -webkit-box;
283
+ display: -ms-flexbox;
284
+ display: flex;
285
+ align-items: center;
286
+ }
287
+
288
+ #elementor-template-library-filter label {
289
+ color: #6d7882;
290
+ font-size: 14px;
291
+ font-weight: 500;
292
+ margin-left: 0.5em;
293
+ }
294
+
295
+ #premium-template-modal .elementor-loader {
296
+ position: relative;
297
+ background-color: hsla(0, 0%, 100%, 0.9);
298
+ }
299
+
300
+ #premium-template-modal .elementor-loader .elementor-loader-box:first-of-type {
301
+ left: 40px;
302
+ top: 40px;
303
+ width: 14px;
304
+ height: 70px;
305
+ }
306
+
307
+ #premium-template-modal .elementor-loader .elementor-loader-box:nth-of-type(2) {
308
+ top: 40px;
309
+ }
310
+
311
+ #premium-template-modal .elementor-loader .elementor-loader-box:nth-of-type(3) {
312
+ top: 68px;
313
+ }
314
+
315
+ #premium-template-modal .elementor-loader .elementor-loader-box:nth-of-type(4) {
316
+ bottom: 40px;
317
+ }
318
+
319
+ #premium-template-modal .elementor-loader .elementor-loader-box:not(:first-of-type) {
320
+ right: 40px;
321
+ height: 14px;
322
+ width: 42px;
323
+ }
324
+
325
+ #premium-template-library-content .premium-template-filter-label {
326
+ display: block;
327
+ position: relative;
328
+ text-align: right;
329
+ padding: 9px 0;
330
+ }
331
+
332
+ #premium-template-library-content .premium-template-filter-label input[type="radio"] {
333
+ position: absolute;
334
+ right: 0;
335
+ top: 0;
336
+ left: 0;
337
+ bottom: 0;
338
+ margin: 0;
339
+ opacity: 0;
340
+ display: block;
341
+ width: 100%;
342
+ height: 100%;
343
+ cursor: pointer;
344
+ }
345
+
346
+ .premium-template-filter-label span {
347
+ color: #6d7882;
348
+ }
349
+
350
+ #premium-template-library-content .premium-template-filter-label:hover span,
351
+ #premium-template-library-content .premium-template-filter-label input:checked+span {
352
+ color: #f47216;
353
+ }
354
+
355
+ #premium-template-library-content .premium-template-filter-item {
356
+ border-top: 1px solid rgba(213, 218, 223, 0.5);
357
+ }
358
+
359
+ #premium-template-library-content .premium-template-filter-item:first-child {
360
+ border-top: none;
361
+ }
362
+
363
+ #premium-template-library-content .premium-templates-wrap {
364
+ width: 100%;
365
+ }
366
+
367
+ #premium-template-library-content .premium-template-insert,
368
+ #premium-template-library-content .premium-template-insert-no-media {
369
+ padding: 5px 12px;
370
+ }
371
+
372
+ #premium-template-library-content .premium-template-insert-no-media {
373
+ color: #6d7882 !important;
374
+ margin-right: 8px !important;
375
+ }
376
+
377
+ /* #premium-template-library-content .premium-template-insert i,
378
+ #premium-template-library-content .premium-template-insert-no-media i {
379
+ margin-right: 2px;
380
+ } */
381
+
382
+ #premium-template-library-content .premium-template-insert span,
383
+ #premium-template-library-content .premium-template-insert-no-media span {
384
+ font-size: 11px;
385
+ }
386
+
387
+ #premium-template-library-content .elementor-template-library-template-name {
388
+ width: 200px;
389
+ }
390
+
391
+ #premium-modal-templates-container {
392
+ display: -webkit-box;
393
+ display: -ms-flexbox;
394
+ display: flex;
395
+ -ms-flex-wrap: wrap;
396
+ flex-wrap: wrap;
397
+ -webkit-box-align: start;
398
+ -ms-flex-align: start;
399
+ align-items: flex-start;
400
+ }
401
+
402
+ #premium-modal-templates-container .elementor-template-library-template {
403
+ position: relative;
404
+ background: #fff;
405
+ }
406
+
407
+ #premium-modal-templates-container .premium-template-pro::before {
408
+ position: absolute;
409
+ left: -76px;
410
+ top: 2px;
411
+ content: "PRO";
412
+ z-index: 10;
413
+ width: 180px;
414
+ height: 20px;
415
+ padding: 0 20px;
416
+ font-size: 12px;
417
+ line-height: 10px;
418
+ text-align: center;
419
+ color: #fff;
420
+ font-weight: bold;
421
+ box-shadow: 0px 1px 3px #888888;
422
+ background: #f47216;
423
+ border-top: 5px solid #f47216;
424
+ border-bottom: 5px solid #f47216;
425
+ -webkit-transform: rotate(-35deg);
426
+ transform: rotate(-35deg);
427
+ }
428
+
429
+ #premium-modal-templates-container .elementor-template-library-template-remote {
430
+ width: calc(33.3333% - 30px);
431
+ }
432
+
433
+ #premium-template-library-content #premium-modal-templates-container .elementor-template-library-template-controls {
434
+ position: absolute;
435
+ background-color: #fff;
436
+ right: 0;
437
+ bottom: -15px;
438
+ left: 0;
439
+ display: -webkit-box;
440
+ display: -ms-flexbox;
441
+ display: flex;
442
+ -webkit-box-pack: justify;
443
+ -ms-flex-pack: justify;
444
+ -webkit-transition: all 0.3s ease;
445
+ transition: all 0.3s ease;
446
+ justify-content: center;
447
+ padding: 9px 8px 9px 10px;
448
+ z-index: 10;
449
+ }
450
+
451
+ #premium-template-library-content #premium-modal-templates-container .elementor-template-library-template:hover .elementor-template-library-template-controls {
452
+ bottom: 0;
453
+ }
454
+
455
+ #premium-template-library-content #premium-modal-templates-container .premium-template-insert,
456
+ #premium-template-library-content #premium-modal-templates-container .premium-template-insert-no-media {
457
+ padding: 0;
458
+ margin: 0;
459
+ color: #39b54a;
460
+ background: none;
461
+ text-transform: none;
462
+ font-size: 12px;
463
+ }
464
+
465
+ #premium-template-library-content #premium-modal-templates-container .premium-clone-template {
466
+ background: none;
467
+ border: none;
468
+ padding: 0;
469
+ margin: 0;
470
+ color: #9b0a46;
471
+ cursor: pointer;
472
+ display: none;
473
+ font-size: 12px;
474
+ -webkit-box-shadow: none;
475
+ box-shadow: none;
476
+ outline: none;
477
+ font-weight: bold;
478
+ }
479
+
480
+ div.premium-template-has-url:hover .premium-clone-template {
481
+ display: block !important;
482
+ }
483
+
484
+ #premium-template-library-content #premium-modal-templates-container .premium-template-insert:hover,
485
+ #premium-template-library-content #premium-modal-templates-container .premium-template-insert-no-media:hover {
486
+ -webkit-box-shadow: none;
487
+ box-shadow: none;
488
+ }
489
+
490
+ #premium-template-library-content #premium-modal-templates-container .elementor-template-library-template-name {
491
+ padding: 5px 0 0;
492
+ text-align: center;
493
+ display: block !important;
494
+ }
495
+
496
+ #premium-template-library-content #premium-modal-templates-container .elementor-template-library-template-name-holder {
497
+ height: 23px;
498
+ }
499
+
500
+ #premium-template-library-content #premium-modal-templates-container .template-library-activate-license {
501
+ display: none;
502
+ color: #fcb92c;
503
+ font-size: 12px;
504
+ }
505
+
506
+ #premium-template-library-content #premium-modal-templates-container .template-library-activate-license:hover {
507
+ color: #d89403;
508
+ }
509
+
510
+ #premium-template-library-content #premium-modal-templates-container .elementor-template-library-template:hover .elementor-template-library-template-name {
511
+ opacity: 0;
512
+ }
513
+
514
+ .library-tab-premium_page #premium-modal-templates-container .elementor-template-library-template-remote {
515
+ width: calc(25% - 20px);
516
+ margin: 10px;
517
+ }
518
+
519
+ .library-tab-premium_page #premium-modal-templates-container .elementor-template-library-template-remote .elementor-template-library-template-action {
520
+ padding: 8px;
521
+ }
522
+
523
+ #premium-modal-templates-container .premium-template-no-url .elementor-template-library-template-preview {
524
+ cursor: default !important;
525
+ opacity: 0 !important;
526
+ }
527
+
528
+ #premium-modal-templates-container .premium-template-no-url .fa-search-plus {
529
+ display: none !important;
530
+ }
531
+
532
+ #premium-modal-templates-container .elementor-template-library-template:hover .template-library-activate-license {
533
+ display: block !important;
534
+ }
535
+
536
+ .elementor-template-library-template-screenshot img {
537
+ width: 100%;
538
+ max-width: 100%;
539
+ height: auto;
540
+ display: block;
541
+ }
542
+
543
+ /* * Preview Iframe */
544
+ #premium-templatate-item-preview-wrap,
545
+ #premium-templatate-item-preview-wrap .premium-template-item-preview-iframe {
546
+ height: 100%;
547
+ overflow: hidden;
548
+ }
549
+
550
+ #premium-templatate-item-preview-wrap iframe {
551
+ height: 140%;
552
+ -webkit-transform: scale(0.666) translateX(25%) translateY(-25%);
553
+ -ms-transform: scale(0.666) translateX(25%) translateY(-25%);
554
+ transform: scale(0.666) translateX(25%) translateY(-25%);
555
+ }
556
+
557
+ @media (max-width: 1439px) {
558
+ #premium-templatate-item-preview-wrap iframe {
559
+ width: 1440px;
560
+ }
561
+ }
562
+
563
+ @media (min-width: 1440px) {
564
+ #premium-templatate-item-preview-wrap iframe {
565
+ width: 1710px;
566
+ }
567
+ }
568
+
569
+ .premium-template-item-notice div {
570
+ color: #31708f;
571
+ background-color: #d9edf7;
572
+ border-color: #bcdff1;
573
+ padding: 15px;
574
+ border-right: 5px solid #bcdff1;
575
+ position: relative;
576
+ text-align: right;
577
+ margin-bottom: 8px;
578
+ }
assets/editor/templates/css/editor.css CHANGED
@@ -1,489 +1,580 @@
1
- #premium-template-modal .dialog-widget-content {
2
- background-color: #f1f3f5;
3
- width: 100%;
4
- }
5
- @media (max-width: 1439px) {
6
- #premium-template-modal .dialog-widget-content {
7
- max-width: 990px;
8
- }
9
- }
10
- @media (min-width: 1440px) {
11
- #premium-template-modal .dialog-widget-content {
12
- max-width: 1200px;
13
- }
14
- }
15
- #premium-template-modal .dialog-widget-header,
16
- #premium-template-modal .dialog-header {
17
- padding: 0;
18
- background-color: #fff;
19
- -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
20
- box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
21
- position: relative;
22
- z-index: 1;
23
- }
24
- #premium-template-modal .dialog-buttons-wrapper {
25
- display: none;
26
- }
27
- #premium-template-modal a,
28
- #premium-template-modal a:hover {
29
- color: inherit;
30
- }
31
- #premium-template-modal a.elementor-template-library-blank-footer-link {
32
- -webkit-transition: color 0.5s;
33
- transition: color 0.5s;
34
- }
35
- #premium-template-modal a.elementor-template-library-blank-footer-link:hover {
36
- color: #9b0a46;
37
- }
38
- #premium-template-modal .elementor-button {
39
- text-transform: uppercase;
40
- }
41
- #premium-template-modal ::-webkit-scrollbar {
42
- width: 6px;
43
- height: 0;
44
- border-radius: 3px;
45
- }
46
- #premium-template-modal ::-webkit-scrollbar-button {
47
- width: 0;
48
- height: 10px;
49
- }
50
- #premium-template-modal ::-webkit-scrollbar-thumb {
51
- background-color: #d5dadf;
52
- border: 0 none #d5dadf;
53
- border-radius: 0;
54
- border-radius: 3px;
55
- }
56
- #premium-template-modal ::-webkit-scrollbar-track {
57
- border: 0 none #fff;
58
- border-radius: 0;
59
- }
60
- #premium-template-modal ::-webkit-scrollbar-corner {
61
- background: transparent;
62
- }
63
- #premium-template-modal-header {
64
- display: -webkit-box;
65
- display: -ms-flexbox;
66
- display: flex;
67
- -webkit-box-pack: justify;
68
- -ms-flex-pack: justify;
69
- display: -webkit-box;
70
- display: -webkit-flex;
71
- display: -ms-flexbox;
72
- display: flex;
73
- -webkit-box-align: center;
74
- -webkit-align-items: center;
75
- -ms-flex-align: center;
76
- align-items: center;
77
- -webkit-box-pack: justify;
78
- -ms-flex-pack: justify;
79
-
80
- height: 50px;
81
- }
82
- #premium-template-modal-header .premium-template-modal-back {
83
- background: none;
84
- border: none;
85
- border-right: 1px solid #e6e9ec;
86
- padding: 15px 20px 15px 15px;
87
- line-height: 20px;
88
- font-size: 13px;
89
- font-weight: 700;
90
- outline: none;
91
- -webkit-transition: all 200ms linear;
92
- transition: all 200ms linear;
93
- cursor: pointer;
94
- color: #6d7882;
95
- }
96
- #premium-template-modal-header .premium-template-modal-back:not(:hover) {
97
- color: #a4afb7;
98
- }
99
- #premium-template-modal-header .elementor-button {
100
- padding: 8px 10px;
101
- }
102
- #premium-template-modal-header-close-modal {
103
- width: 45px;
104
- border-left: 1px solid #e6e9ec;
105
- display: -webkit-box;
106
- display: -ms-flexbox;
107
- display: flex;
108
- -webkit-box-align: center;
109
- -ms-flex-align: center;
110
- align-items: center;
111
- -webkit-box-pack: center;
112
- -ms-flex-pack: center;
113
- justify-content: center;
114
- cursor: pointer;
115
- -webkit-transition: all 200ms linear;
116
- transition: all 200ms linear;
117
- }
118
- #premium-template-modal-header-close-modal i {
119
- color: #a4afb7;
120
- font-size: 16px;
121
- }
122
- #premium-template-modal-header-close-modal:hover i {
123
- color: #6d7882;
124
- }
125
- #premium-template-modal-header-actions .template-library-activate-license {
126
- display: block;
127
- padding: 8px 10px;
128
- color: #fff;
129
- }
130
- #premium-template-modal-header-actions .template-library-activate-license:hover {
131
- color: #fff;
132
- opacity: 0.85;
133
- -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
134
- box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
135
- }
136
- #premium-template-modal .elementor-library-error {
137
- margin: 18% 0 0;
138
- }
139
- #premium-template-modal .elementor-library-error-message {
140
- font-size: 18px;
141
- padding: 0 0 20px;
142
- }
143
- #premium-template-modal .elementor-library-error-link a {
144
- display: inline-block;
145
- color: #fff;
146
- background-image: none;
147
- background: #f47216;
148
- font-size: 13px;
149
- font-weight: 400;
150
- font-style: normal;
151
- text-transform: uppercase;
152
- line-height: 1;
153
- height: 40px;
154
- line-height: 40px;
155
- min-width: 170px;
156
- padding: 0 20px;
157
- border: none;
158
- border-radius: 3px;
159
- cursor: pointer;
160
- -webkit-transition: all 0.5s;
161
- transition: all 0.5s;
162
- }
163
- #premium-template-modal .elementor-library-error-link a:hover {
164
- opacity: 0.85;
165
- -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
166
- box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
167
- }
168
- #premium-modal-tabs-items {
169
- display: none;
170
- }
171
- #premium-template-modal-header-tabs {
172
- display: -webkit-box;
173
- display: -webkit-flex;
174
- display: -ms-flexbox;
175
- display: flex;
176
- flex: 2;
177
- -webkit-box-align: center;
178
- -webkit-align-items: center;
179
- -ms-flex-align: center;
180
- align-items: center;
181
- -webkit-box-pack: justify;
182
- -webkit-justify-content: space-between;
183
- -ms-flex-pack: justify;
184
- justify-content: space-between;
185
- }
186
- #premium-template-modal-header-logo-area {
187
- text-align: left;
188
- padding-left: 15px;
189
- }
190
- #premium-template-modal-header-logo-area > * {
191
- display: -webkit-box;
192
- display: -webkit-flex;
193
- display: -ms-flexbox;
194
- display: flex;
195
- -webkit-box-align: center;
196
- -webkit-align-items: center;
197
- -ms-flex-align: center;
198
- align-items: center;
199
- }
200
- #premium-template-modal-header-logo .premium-template-modal-header-logo-icon {
201
- margin-right: 5px;
202
- }
203
- #premium-template-modal-header-logo .premium-template-modal-header-logo-icon img {
204
- width: 30px;
205
- height: 30px;
206
- }
207
- #premium-template-modal-header-logo {
208
- color: #495157;
209
- line-height: 1;
210
- text-transform: uppercase;
211
- font-weight: 700;
212
- cursor: pointer;
213
- }
214
- #premium-template-library-content {
215
- display: -webkit-box;
216
- display: -ms-flexbox;
217
- display: flex;
218
- height: calc(100% - 20px);
219
- }
220
- #premium-template-library-content .premium-filters-list {
221
- width: 18%;
222
- padding: 0px 10px 10px 0px;
223
- height: 100%;
224
- overflow: auto;
225
- }
226
- #premium-template-library-content .premium-templates-wrap {
227
- width: 85%;
228
- }
229
- #premium-template-library-content .premium-templates-list {
230
- height: 100%;
231
- overflow: auto;
232
- margin-top: 12px;
233
- }
234
- #premium-template-library-content .premium-keywords-list {
235
- padding-left: 10px;
236
- }
237
- #elementor-template-library-filter {
238
- display: -webkit-box;
239
- display: -ms-flexbox;
240
- display: flex;
241
- align-items: center;
242
- }
243
- #elementor-template-library-filter label {
244
- color: #6d7882;
245
- font-size: 14px;
246
- font-weight: 500;
247
- margin-right: 0.5em;
248
- }
249
- #premium-template-modal .elementor-loader {
250
- position: relative;
251
- background-color: hsla(0, 0%, 100%, 0.9);
252
- }
253
- #premium-template-modal .elementor-loader .elementor-loader-box:first-of-type {
254
- left: 40px;
255
- top: 40px;
256
- width: 14px;
257
- height: 70px;
258
- }
259
- #premium-template-modal .elementor-loader .elementor-loader-box:nth-of-type(2) {
260
- top: 40px;
261
- }
262
- #premium-template-modal .elementor-loader .elementor-loader-box:nth-of-type(3) {
263
- top: 68px;
264
- }
265
- #premium-template-modal .elementor-loader .elementor-loader-box:nth-of-type(4) {
266
- bottom: 40px;
267
- }
268
- #premium-template-modal .elementor-loader .elementor-loader-box:not(:first-of-type) {
269
- right: 40px;
270
- height: 14px;
271
- width: 42px;
272
- }
273
- #premium-template-library-content .premium-template-filter-label {
274
- display: block;
275
- position: relative;
276
- text-align: left;
277
- padding: 9px 0;
278
- }
279
- #premium-template-library-content .premium-template-filter-label input[type="radio"] {
280
- position: absolute;
281
- left: 0;
282
- top: 0;
283
- right: 0;
284
- bottom: 0;
285
- margin: 0;
286
- opacity: 0;
287
- display: block;
288
- width: 100%;
289
- height: 100%;
290
- cursor: pointer;
291
- }
292
- .premium-template-filter-label span {
293
- color: #6d7882;
294
- }
295
- #premium-template-library-content .premium-template-filter-label:hover span,
296
- #premium-template-library-content .premium-template-filter-label input:checked + span {
297
- color: #f47216;
298
- }
299
- #premium-template-library-content .premium-template-filter-item {
300
- border-top: 1px solid rgba(213, 218, 223, 0.5);
301
- }
302
- #premium-template-library-content .premium-template-filter-item:first-child {
303
- border-top: none;
304
- }
305
- #premium-template-library-content .premium-templates-wrap {
306
- width: 100%;
307
- }
308
- #premium-template-library-content .premium-template-insert {
309
- padding: 5px 12px;
310
- }
311
- #premium-template-library-content .premium-template-insert i {
312
- margin-right: 2px;
313
- }
314
- #premium-template-library-content .premium-template-insert span {
315
- font-size: 11px;
316
- }
317
- #premium-template-library-content .elementor-template-library-template-name {
318
- width: 200px;
319
- }
320
- #premium-modal-templates-container {
321
- display: -webkit-box;
322
- display: -ms-flexbox;
323
- display: flex;
324
- -ms-flex-wrap: wrap;
325
- flex-wrap: wrap;
326
- -webkit-box-align: start;
327
- -ms-flex-align: start;
328
- align-items: flex-start;
329
- }
330
- #premium-modal-templates-container .elementor-template-library-template {
331
- position: relative;
332
- background: #fff;
333
- }
334
- #premium-modal-templates-container .premium-template-pro::before {
335
- position: absolute;
336
- right: -76px;
337
- top: 2px;
338
- content: "PRO";
339
- z-index: 10;
340
- width: 180px;
341
- height: 20px;
342
- padding: 0 20px;
343
- font-size: 12px;
344
- line-height: 10px;
345
- text-align: center;
346
- color: #fff;
347
- font-weight: bold;
348
- box-shadow: 0px 1px 3px #888888;
349
- background: #f47216;
350
- border-top: 5px solid #f47216;
351
- border-bottom: 5px solid #f47216;
352
- -webkit-transform: rotate(35deg);
353
- transform: rotate(35deg);
354
- }
355
- #premium-modal-templates-container .elementor-template-library-template-remote {
356
- width: calc(33.3333% - 30px);
357
- }
358
- #premium-template-library-content #premium-modal-templates-container .elementor-template-library-template-controls {
359
- position: absolute;
360
- background-color: #fff;
361
- left: 0;
362
- bottom: -15px;
363
- right: 0;
364
- display: -webkit-box;
365
- display: -ms-flexbox;
366
- display: flex;
367
- -webkit-box-pack: justify;
368
- -ms-flex-pack: justify;
369
- -webkit-transition: all 0.3s ease;
370
- transition: all 0.3s ease;
371
- justify-content: center;
372
- padding: 9px 10px 9px 8px;
373
- z-index: 10;
374
- }
375
- #premium-template-library-content
376
- #premium-modal-templates-container
377
- .elementor-template-library-template:hover
378
- .elementor-template-library-template-controls {
379
- bottom: 0;
380
- }
381
- #premium-template-library-content #premium-modal-templates-container .premium-template-insert {
382
- padding: 0;
383
- margin: 0;
384
- color: #39b54a;
385
- background: none;
386
- text-transform: none;
387
- font-size: 12px;
388
- }
389
- #premium-template-library-content #premium-modal-templates-container .premium-clone-template {
390
- background: none;
391
- border: none;
392
- padding: 0;
393
- margin: 0;
394
- color: #9b0a46;
395
- cursor: pointer;
396
- display: none;
397
- font-size: 12px;
398
- -webkit-box-shadow: none;
399
- box-shadow: none;
400
- outline: none;
401
- font-weight: bold;
402
- }
403
- div.premium-template-has-url:hover .premium-clone-template {
404
- display: block !important;
405
- }
406
- #premium-template-library-content #premium-modal-templates-container .premium-template-insert:hover {
407
- -webkit-box-shadow: none;
408
- box-shadow: none;
409
- }
410
- #premium-template-library-content #premium-modal-templates-container .elementor-template-library-template-name {
411
- padding: 5px 0 0;
412
- text-align: center;
413
- display: block !important;
414
- }
415
- #premium-template-library-content #premium-modal-templates-container .elementor-template-library-template-name-holder {
416
- height: 23px;
417
- }
418
- #premium-template-library-content #premium-modal-templates-container .template-library-activate-license {
419
- display: none;
420
- color: #fcb92c;
421
- font-size: 12px;
422
- }
423
- #premium-template-library-content #premium-modal-templates-container .template-library-activate-license:hover {
424
- color: #d89403;
425
- }
426
- #premium-template-library-content
427
- #premium-modal-templates-container
428
- .elementor-template-library-template:hover
429
- .elementor-template-library-template-name {
430
- opacity: 0;
431
- }
432
- .library-tab-premium_page #premium-modal-templates-container .elementor-template-library-template-remote {
433
- width: calc(25% - 20px);
434
- margin: 10px;
435
- }
436
- .library-tab-premium_page
437
- #premium-modal-templates-container
438
- .elementor-template-library-template-remote
439
- .elementor-template-library-template-action {
440
- padding: 8px;
441
- }
442
- #premium-modal-templates-container .premium-template-no-url .elementor-template-library-template-preview {
443
- cursor: default !important;
444
- opacity: 0 !important;
445
- }
446
- #premium-modal-templates-container .premium-template-no-url .fa-search-plus {
447
- display: none !important;
448
- }
449
- #premium-modal-templates-container .elementor-template-library-template:hover .template-library-activate-license {
450
- display: block !important;
451
- }
452
- .elementor-template-library-template-screenshot img {
453
- width: 100%;
454
- max-width: 100%;
455
- height: auto;
456
- display: block;
457
- }
458
- /* * Preview Iframe */
459
- #premium-templatate-item-preview-wrap,
460
- #premium-templatate-item-preview-wrap .premium-template-item-preview-iframe {
461
- height: 100%;
462
- overflow: hidden;
463
- }
464
- #premium-templatate-item-preview-wrap iframe {
465
- height: 140%;
466
- -webkit-transform: scale(0.666) translateX(-25%) translateY(-25%);
467
- -ms-transform: scale(0.666) translateX(-25%) translateY(-25%);
468
- transform: scale(0.666) translateX(-25%) translateY(-25%);
469
- }
470
- @media (max-width: 1439px) {
471
- #premium-templatate-item-preview-wrap iframe {
472
- width: 1440px;
473
- }
474
- }
475
- @media (min-width: 1440px) {
476
- #premium-templatate-item-preview-wrap iframe {
477
- width: 1710px;
478
- }
479
- }
480
- .premium-template-item-notice div {
481
- color: #31708f;
482
- background-color: #d9edf7;
483
- border-color: #bcdff1;
484
- padding: 15px;
485
- border-left: 5px solid #bcdff1;
486
- position: relative;
487
- text-align: left;
488
- margin-bottom: 8px;
489
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ #premium-template-modal .dialog-widget-content {
2
+ background-color: #f1f3f5;
3
+ width: 100%;
4
+ }
5
+
6
+ @media (max-width: 1439px) {
7
+ #premium-template-modal .dialog-widget-content {
8
+ max-width: 990px;
9
+ }
10
+ }
11
+
12
+ @media (min-width: 1440px) {
13
+ #premium-template-modal .dialog-widget-content {
14
+ max-width: 1200px;
15
+ }
16
+ }
17
+
18
+ #premium-template-modal .dialog-widget-header,
19
+ #premium-template-modal .dialog-header {
20
+ padding: 0;
21
+ background-color: #fff;
22
+ -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
23
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
24
+ position: relative;
25
+ z-index: 1;
26
+ }
27
+
28
+ #premium-template-modal .dialog-buttons-wrapper {
29
+ display: none;
30
+ }
31
+
32
+ #premium-template-modal a,
33
+ #premium-template-modal a:hover {
34
+ color: inherit;
35
+ }
36
+
37
+ #premium-template-modal a.elementor-template-library-blank-footer-link {
38
+ -webkit-transition: color 0.5s;
39
+ transition: color 0.5s;
40
+ }
41
+
42
+ #premium-template-modal a.elementor-template-library-blank-footer-link:hover {
43
+ color: #9b0a46;
44
+ }
45
+
46
+ #premium-template-modal .elementor-button {
47
+ text-transform: uppercase;
48
+ }
49
+
50
+ #premium-template-modal ::-webkit-scrollbar {
51
+ width: 6px;
52
+ height: 0;
53
+ border-radius: 3px;
54
+ }
55
+
56
+ #premium-template-modal ::-webkit-scrollbar-button {
57
+ width: 0;
58
+ height: 10px;
59
+ }
60
+
61
+ #premium-template-modal ::-webkit-scrollbar-thumb {
62
+ background-color: #d5dadf;
63
+ border: 0 none #d5dadf;
64
+ border-radius: 0;
65
+ border-radius: 3px;
66
+ }
67
+
68
+ #premium-template-modal ::-webkit-scrollbar-track {
69
+ border: 0 none #fff;
70
+ border-radius: 0;
71
+ }
72
+
73
+ #premium-template-modal ::-webkit-scrollbar-corner {
74
+ background: transparent;
75
+ }
76
+
77
+ #premium-template-modal-header {
78
+ display: -webkit-box;
79
+ display: -ms-flexbox;
80
+ display: flex;
81
+ -webkit-box-pack: justify;
82
+ -ms-flex-pack: justify;
83
+ display: -webkit-box;
84
+ display: -webkit-flex;
85
+ display: -ms-flexbox;
86
+ display: flex;
87
+ -webkit-box-align: center;
88
+ -webkit-align-items: center;
89
+ -ms-flex-align: center;
90
+ align-items: center;
91
+ -webkit-box-pack: justify;
92
+ -ms-flex-pack: justify;
93
+
94
+ height: 50px;
95
+ }
96
+
97
+ #premium-template-modal-header .premium-template-modal-back {
98
+ background: none;
99
+ border: none;
100
+ border-right: 1px solid #e6e9ec;
101
+ padding: 15px 20px 15px 15px;
102
+ line-height: 20px;
103
+ font-size: 13px;
104
+ font-weight: 700;
105
+ outline: none;
106
+ -webkit-transition: all 200ms linear;
107
+ transition: all 200ms linear;
108
+ cursor: pointer;
109
+ color: #6d7882;
110
+ }
111
+
112
+ #premium-template-modal-header .premium-template-modal-back:not(:hover) {
113
+ color: #a4afb7;
114
+ }
115
+
116
+ #premium-template-modal-header .elementor-button {
117
+ padding: 8px 10px;
118
+ }
119
+
120
+ #premium-template-modal-header-close-modal {
121
+ width: 45px;
122
+ border-left: 1px solid #e6e9ec;
123
+ display: -webkit-box;
124
+ display: -ms-flexbox;
125
+ display: flex;
126
+ -webkit-box-align: center;
127
+ -ms-flex-align: center;
128
+ align-items: center;
129
+ -webkit-box-pack: center;
130
+ -ms-flex-pack: center;
131
+ justify-content: center;
132
+ cursor: pointer;
133
+ -webkit-transition: all 200ms linear;
134
+ transition: all 200ms linear;
135
+ }
136
+
137
+ #premium-template-modal-header-close-modal i {
138
+ color: #a4afb7;
139
+ font-size: 16px;
140
+ }
141
+
142
+ #premium-template-modal-header-close-modal:hover i {
143
+ color: #6d7882;
144
+ }
145
+
146
+ #premium-template-modal-header-actions .template-library-activate-license {
147
+ display: block;
148
+ padding: 8px 10px;
149
+ color: #fff;
150
+ }
151
+
152
+ #premium-template-modal-header-actions .template-library-activate-license:hover {
153
+ color: #fff;
154
+ opacity: 0.85;
155
+ -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
156
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
157
+ }
158
+
159
+ #premium-template-modal-header-actions .premium-template-insert-no-media {
160
+ background-color: #a4afb7;
161
+ color: #fff;
162
+ }
163
+
164
+
165
+ #premium-template-modal .elementor-library-error {
166
+ margin: 18% 0 0;
167
+ }
168
+
169
+ #premium-template-modal .elementor-library-error-message {
170
+ font-size: 18px;
171
+ padding: 0 0 20px;
172
+ }
173
+
174
+ #premium-template-modal .elementor-library-error-link a {
175
+ display: inline-block;
176
+ color: #fff;
177
+ background-image: none;
178
+ background: #f47216;
179
+ font-size: 13px;
180
+ font-weight: 400;
181
+ font-style: normal;
182
+ text-transform: uppercase;
183
+ line-height: 1;
184
+ height: 40px;
185
+ line-height: 40px;
186
+ min-width: 170px;
187
+ padding: 0 20px;
188
+ border: none;
189
+ border-radius: 3px;
190
+ cursor: pointer;
191
+ -webkit-transition: all 0.5s;
192
+ transition: all 0.5s;
193
+ }
194
+
195
+ #premium-template-modal .elementor-library-error-link a:hover {
196
+ opacity: 0.85;
197
+ -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
198
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
199
+ }
200
+
201
+ #premium-modal-tabs-items {
202
+ display: none;
203
+ }
204
+
205
+ #premium-template-modal-header-tabs {
206
+ display: -webkit-box;
207
+ display: -webkit-flex;
208
+ display: -ms-flexbox;
209
+ display: flex;
210
+ flex: 2;
211
+ -webkit-box-align: center;
212
+ -webkit-align-items: center;
213
+ -ms-flex-align: center;
214
+ align-items: center;
215
+ -webkit-box-pack: justify;
216
+ -webkit-justify-content: space-between;
217
+ -ms-flex-pack: justify;
218
+ justify-content: space-between;
219
+ }
220
+
221
+ #premium-template-modal-header-logo-area {
222
+ text-align: left;
223
+ padding-left: 15px;
224
+ }
225
+
226
+ #premium-template-modal-header-logo-area>* {
227
+ display: -webkit-box;
228
+ display: -webkit-flex;
229
+ display: -ms-flexbox;
230
+ display: flex;
231
+ -webkit-box-align: center;
232
+ -webkit-align-items: center;
233
+ -ms-flex-align: center;
234
+ align-items: center;
235
+ }
236
+
237
+ #premium-template-modal-header-logo .premium-template-modal-header-logo-icon {
238
+ margin-right: 5px;
239
+ }
240
+
241
+ #premium-template-modal-header-logo .premium-template-modal-header-logo-icon img {
242
+ width: 30px;
243
+ height: 30px;
244
+ }
245
+
246
+ #premium-template-modal-header-logo {
247
+ color: #495157;
248
+ line-height: 1;
249
+ text-transform: uppercase;
250
+ font-weight: 700;
251
+ cursor: pointer;
252
+ }
253
+
254
+ #premium-template-library-content {
255
+ display: -webkit-box;
256
+ display: -ms-flexbox;
257
+ display: flex;
258
+ height: calc(100% - 20px);
259
+ }
260
+
261
+ #premium-template-library-content .premium-filters-list {
262
+ width: 18%;
263
+ padding: 0px 10px 10px 0px;
264
+ height: 100%;
265
+ overflow: auto;
266
+ }
267
+
268
+ #premium-template-library-content .premium-templates-wrap {
269
+ width: 85%;
270
+ }
271
+
272
+ #premium-template-library-content .premium-templates-list {
273
+ height: 100%;
274
+ overflow: auto;
275
+ margin-top: 12px;
276
+ }
277
+
278
+ #premium-template-library-content .premium-keywords-list {
279
+ padding-left: 10px;
280
+ }
281
+
282
+ #elementor-template-library-filter {
283
+ display: -webkit-box;
284
+ display: -ms-flexbox;
285
+ display: flex;
286
+ align-items: center;
287
+ }
288
+
289
+ #elementor-template-library-filter label {
290
+ color: #6d7882;
291
+ font-size: 14px;
292
+ font-weight: 500;
293
+ margin-right: 0.5em;
294
+ }
295
+
296
+ #premium-template-modal .elementor-loader {
297
+ position: relative;
298
+ background-color: hsla(0, 0%, 100%, 0.9);
299
+ }
300
+
301
+ #premium-template-modal .elementor-loader .elementor-loader-box:first-of-type {
302
+ left: 40px;
303
+ top: 40px;
304
+ width: 14px;
305
+ height: 70px;
306
+ }
307
+
308
+ #premium-template-modal .elementor-loader .elementor-loader-box:nth-of-type(2) {
309
+ top: 40px;
310
+ }
311
+
312
+ #premium-template-modal .elementor-loader .elementor-loader-box:nth-of-type(3) {
313
+ top: 68px;
314
+ }
315
+
316
+ #premium-template-modal .elementor-loader .elementor-loader-box:nth-of-type(4) {
317
+ bottom: 40px;
318
+ }
319
+
320
+ #premium-template-modal .elementor-loader .elementor-loader-box:not(:first-of-type) {
321
+ right: 40px;
322
+ height: 14px;
323
+ width: 42px;
324
+ }
325
+
326
+ #premium-template-library-content .premium-template-filter-label {
327
+ display: block;
328
+ position: relative;
329
+ text-align: left;
330
+ padding: 9px 0;
331
+ }
332
+
333
+ #premium-template-library-content .premium-template-filter-label input[type="radio"] {
334
+ position: absolute;
335
+ left: 0;
336
+ top: 0;
337
+ right: 0;
338
+ bottom: 0;
339
+ margin: 0;
340
+ opacity: 0;
341
+ display: block;
342
+ width: 100%;
343
+ height: 100%;
344
+ cursor: pointer;
345
+ }
346
+
347
+ .premium-template-filter-label span {
348
+ color: #6d7882;
349
+ }
350
+
351
+ #premium-template-library-content .premium-template-filter-label:hover span,
352
+ #premium-template-library-content .premium-template-filter-label input:checked+span {
353
+ color: #f47216;
354
+ }
355
+
356
+ #premium-template-library-content .premium-template-filter-item {
357
+ border-top: 1px solid rgba(213, 218, 223, 0.5);
358
+ }
359
+
360
+ #premium-template-library-content .premium-template-filter-item:first-child {
361
+ border-top: none;
362
+ }
363
+
364
+ #premium-template-library-content .premium-templates-wrap {
365
+ width: 100%;
366
+ }
367
+
368
+ #premium-template-library-content .premium-template-insert,
369
+ #premium-template-library-content .premium-template-insert-no-media {
370
+ padding: 5px 12px;
371
+ }
372
+
373
+ #premium-template-library-content .premium-template-insert-no-media {
374
+ color: #6d7882 !important;
375
+ margin-right: 8px !important;
376
+ }
377
+
378
+ /* #premium-template-library-content .premium-template-insert i,
379
+ #premium-template-library-content .premium-template-insert-no-media i {
380
+ margin-right: 2px;
381
+ } */
382
+
383
+ #premium-template-library-content .premium-template-insert span,
384
+ #premium-template-library-content .premium-template-insert-no-media span {
385
+ font-size: 11px;
386
+ }
387
+
388
+ #premium-template-library-content .elementor-template-library-template-name {
389
+ width: 200px;
390
+ }
391
+
392
+ #premium-modal-templates-container {
393
+ display: -webkit-box;
394
+ display: -ms-flexbox;
395
+ display: flex;
396
+ -ms-flex-wrap: wrap;
397
+ flex-wrap: wrap;
398
+ -webkit-box-align: start;
399
+ -ms-flex-align: start;
400
+ align-items: flex-start;
401
+ }
402
+
403
+ #premium-modal-templates-container .elementor-template-library-template {
404
+ position: relative;
405
+ background: #fff;
406
+ }
407
+
408
+ #premium-modal-templates-container .premium-template-pro::before {
409
+ position: absolute;
410
+ right: -76px;
411
+ top: 2px;
412
+ content: "PRO";
413
+ z-index: 10;
414
+ width: 180px;
415
+ height: 20px;
416
+ padding: 0 20px;
417
+ font-size: 12px;
418
+ line-height: 10px;
419
+ text-align: center;
420
+ color: #fff;
421
+ font-weight: bold;
422
+ box-shadow: 0px 1px 3px #888888;
423
+ background: #f47216;
424
+ border-top: 5px solid #f47216;
425
+ border-bottom: 5px solid #f47216;
426
+ -webkit-transform: rotate(35deg);
427
+ transform: rotate(35deg);
428
+ }
429
+
430
+ #premium-modal-templates-container .elementor-template-library-template-remote {
431
+ width: calc(33.3333% - 30px);
432
+ }
433
+
434
+ #premium-template-library-content #premium-modal-templates-container .elementor-template-library-template-controls {
435
+ position: absolute;
436
+ background-color: #fff;
437
+ left: 0;
438
+ bottom: -15px;
439
+ right: 0;
440
+ display: -webkit-box;
441
+ display: -ms-flexbox;
442
+ display: flex;
443
+ -webkit-box-pack: justify;
444
+ -ms-flex-pack: justify;
445
+ align-items: center;
446
+ -webkit-transition: all 0.3s ease;
447
+ transition: all 0.3s ease;
448
+ justify-content: center;
449
+ padding: 9px 10px 9px 8px;
450
+ z-index: 10;
451
+ }
452
+
453
+ #premium-template-library-content #premium-modal-templates-container .elementor-template-library-template:hover .elementor-template-library-template-controls {
454
+ bottom: 0;
455
+ }
456
+
457
+ #premium-template-library-content #premium-modal-templates-container .premium-template-insert,
458
+ #premium-template-library-content #premium-modal-templates-container .premium-template-insert-no-media {
459
+ padding: 0;
460
+ margin: 0;
461
+ color: #39b54a;
462
+ background: none;
463
+ text-transform: none;
464
+ font-size: 12px;
465
+ }
466
+
467
+ #premium-template-library-content #premium-modal-templates-container .premium-clone-template {
468
+ background: none;
469
+ border: none;
470
+ padding: 0;
471
+ margin: 0;
472
+ color: #9b0a46;
473
+ cursor: pointer;
474
+ display: none;
475
+ font-size: 12px;
476
+ -webkit-box-shadow: none;
477
+ box-shadow: none;
478
+ outline: none;
479
+ font-weight: bold;
480
+ }
481
+
482
+ div.premium-template-has-url:hover .premium-clone-template {
483
+ display: block !important;
484
+ }
485
+
486
+ #premium-template-library-content #premium-modal-templates-container .premium-template-insert:hover,
487
+ #premium-template-library-content #premium-modal-templates-container .premium-template-insert-no-media:hover {
488
+ -webkit-box-shadow: none;
489
+ box-shadow: none;
490
+ }
491
+
492
+ #premium-template-library-content #premium-modal-templates-container .elementor-template-library-template-name {
493
+ padding: 5px 0 0;
494
+ text-align: center;
495
+ display: block !important;
496
+ }
497
+
498
+ #premium-template-library-content #premium-modal-templates-container .elementor-template-library-template-name-holder {
499
+ height: 23px;
500
+ }
501
+
502
+ #premium-template-library-content #premium-modal-templates-container .template-library-activate-license {
503
+ display: none;
504
+ color: #fcb92c;
505
+ font-size: 12px;
506
+ }
507
+
508
+ #premium-template-library-content #premium-modal-templates-container .template-library-activate-license:hover {
509
+ color: #d89403;
510
+ }
511
+
512
+ #premium-template-library-content #premium-modal-templates-container .elementor-template-library-template:hover .elementor-template-library-template-name {
513
+ opacity: 0;
514
+ }
515
+
516
+ .library-tab-premium_page #premium-modal-templates-container .elementor-template-library-template-remote {
517
+ width: calc(25% - 20px);
518
+ margin: 10px;
519
+ }
520
+
521
+ .library-tab-premium_page #premium-modal-templates-container .elementor-template-library-template-remote .elementor-template-library-template-action {
522
+ padding: 8px;
523
+ }
524
+
525
+ #premium-modal-templates-container .premium-template-no-url .elementor-template-library-template-preview {
526
+ cursor: default !important;
527
+ opacity: 0 !important;
528
+ }
529
+
530
+ #premium-modal-templates-container .premium-template-no-url .fa-search-plus {
531
+ display: none !important;
532
+ }
533
+
534
+ #premium-modal-templates-container .elementor-template-library-template:hover .template-library-activate-license {
535
+ display: block !important;
536
+ }
537
+
538
+ .elementor-template-library-template-screenshot img {
539
+ width: 100%;
540
+ max-width: 100%;
541
+ height: auto;
542
+ display: block;
543
+ }
544
+
545
+ /* * Preview Iframe */
546
+ #premium-templatate-item-preview-wrap,
547
+ #premium-templatate-item-preview-wrap .premium-template-item-preview-iframe {
548
+ height: 100%;
549
+ overflow: hidden;
550
+ }
551
+
552
+ #premium-templatate-item-preview-wrap iframe {
553
+ height: 140%;
554
+ -webkit-transform: scale(0.666) translateX(-25%) translateY(-25%);
555
+ -ms-transform: scale(0.666) translateX(-25%) translateY(-25%);
556
+ transform: scale(0.666) translateX(-25%) translateY(-25%);
557
+ }
558
+
559
+ @media (max-width: 1439px) {
560
+ #premium-templatate-item-preview-wrap iframe {
561
+ width: 1440px;
562
+ }
563
+ }
564
+
565
+ @media (min-width: 1440px) {
566
+ #premium-templatate-item-preview-wrap iframe {
567
+ width: 1710px;
568
+ }
569
+ }
570
+
571
+ .premium-template-item-notice div {
572
+ color: #31708f;
573
+ background-color: #d9edf7;
574
+ border-color: #bcdff1;
575
+ padding: 15px;
576
+ border-left: 5px solid #bcdff1;
577
+ position: relative;
578
+ text-align: left;
579
+ margin-bottom: 8px;
580
+ }
assets/editor/templates/js/editor.js CHANGED
@@ -1,1046 +1,1052 @@
1
- (function ($) {
2
-
3
- 'use strict';
4
-
5
- var PremiumTempsData = window.PremiumTempsData || {},
6
- PremiumEditor,
7
- PremiumEditorViews,
8
- PremiumControlsViews,
9
- PremiumModules;
10
-
11
- PremiumEditorViews = {
12
-
13
- ModalLayoutView: null,
14
- ModalHeaderView: null,
15
- ModalHeaderInsertButton: null,
16
- ModalLoadingView: null,
17
- ModalBodyView: null,
18
- ModalErrorView: null,
19
- LibraryCollection: null,
20
- KeywordsModel: null,
21
- ModalCollectionView: null,
22
- ModalTabsCollection: null,
23
- ModalTabsCollectionView: null,
24
- FiltersCollectionView: null,
25
- FiltersItemView: null,
26
- ModalTabsItemView: null,
27
- ModalTemplateItemView: null,
28
- ModalInsertTemplateBehavior: null,
29
- ModalTemplateModel: null,
30
- CategoriesCollection: null,
31
- ModalPreviewView: null,
32
- ModalHeaderBack: null,
33
- ModalHeaderLogo: null,
34
- KeywordsView: null,
35
- TabModel: null,
36
- CategoryModel: null,
37
-
38
- init: function () {
39
- var self = this;
40
-
41
- self.ModalTemplateModel = Backbone.Model.extend({
42
- defaults: {
43
- template_id: 0,
44
- name: '',
45
- title: '',
46
- thumbnail: '',
47
- preview: '',
48
- source: '',
49
- categories: [],
50
- keywords: []
51
- }
52
- });
53
-
54
- self.ModalHeaderView = Marionette.LayoutView.extend({
55
-
56
- id: 'premium-template-modal-header',
57
- template: '#tmpl-premium-template-modal-header',
58
-
59
- ui: {
60
- closeModal: '#premium-template-modal-header-close-modal'
61
- },
62
-
63
- events: {
64
- 'click @ui.closeModal': 'onCloseModalClick'
65
- },
66
-
67
- regions: {
68
- headerLogo: '#premium-template-modal-header-logo-area',
69
- headerTabs: '#premium-template-modal-header-tabs',
70
- headerActions: '#premium-template-modal-header-actions'
71
- },
72
-
73
- onCloseModalClick: function () {
74
- PremiumEditor.closeModal();
75
- }
76
-
77
- });
78
-
79
- self.TabModel = Backbone.Model.extend({
80
- defaults: {
81
- slug: '',
82
- title: ''
83
- }
84
- });
85
-
86
- self.LibraryCollection = Backbone.Collection.extend({
87
- model: self.ModalTemplateModel
88
- });
89
-
90
- self.ModalTabsCollection = Backbone.Collection.extend({
91
- model: self.TabModel
92
- });
93
-
94
- self.CategoryModel = Backbone.Model.extend({
95
- defaults: {
96
- slug: '',
97
- title: ''
98
- }
99
- });
100
-
101
- self.KeywordsModel = Backbone.Model.extend({
102
- defaults: {
103
- keywords: {}
104
- }
105
- });
106
-
107
- self.CategoriesCollection = Backbone.Collection.extend({
108
- model: self.CategoryModel
109
- });
110
-
111
- self.KeywordsView = Marionette.ItemView.extend({
112
- id: 'elementor-template-library-filter',
113
- template: '#tmpl-premium-template-modal-keywords',
114
- ui: {
115
- keywords: '.premium-library-keywords'
116
- },
117
-
118
- events: {
119
- 'change @ui.keywords': 'onSelectKeyword'
120
- },
121
-
122
- onSelectKeyword: function (event) {
123
- var selected = event.currentTarget.selectedOptions[0].value;
124
- PremiumEditor.setFilter('keyword', selected);
125
- },
126
-
127
- onRender: function () {
128
- var $filters = this.$('.premium-library-keywords');
129
- $filters.select2({
130
- placeholder: 'Choose Widget',
131
- allowClear: true,
132
- width: 250,
133
- dropdownParent: this.$el
134
- });
135
- }
136
- });
137
-
138
- self.ModalPreviewView = Marionette.ItemView.extend({
139
-
140
- template: '#tmpl-premium-template-modal-preview',
141
-
142
- id: 'premium-templatate-item-preview-wrap',
143
-
144
- ui: {
145
- iframe: 'iframe',
146
- notice: '.premium-template-item-notice'
147
- },
148
-
149
-
150
- onRender: function () {
151
-
152
- if (null !== this.getOption('notice')) {
153
- if (this.getOption('notice').length) {
154
- var message = "";
155
- if (-1 !== this.getOption('notice').indexOf("facebook")) {
156
- message += "<p>Please login with your Facebook account in order to get your Facebook Reviews.</p>";
157
- } else if (-1 !== this.getOption('notice').indexOf("google")) {
158
- message += "<p>You need to add your Google API key from Dashboard -> Premium Add-ons for Elementor -> Google Maps</p>";
159
- } else if (-1 !== this.getOption('notice').indexOf("form")) {
160
- message += "<p>You need to have <a href='https://wordpress.org/plugins/contact-form-7/' target='_blank'>Contact Form 7 plugin</a> installed and active.</p>";
161
- }
162
-
163
- this.ui.notice.html('<div><p><strong>Important!</strong></p>' + message + '</div>');
164
- }
165
- }
166
-
167
- this.ui.iframe.attr('src', this.getOption('url'));
168
-
169
- }
170
- });
171
-
172
- self.ModalHeaderBack = Marionette.ItemView.extend({
173
-
174
- template: '#tmpl-premium-template-modal-header-back',
175
-
176
- id: 'premium-template-modal-header-back',
177
-
178
- ui: {
179
- button: 'button'
180
- },
181
-
182
- events: {
183
- 'click @ui.button': 'onBackClick',
184
- },
185
-
186
- onBackClick: function () {
187
- PremiumEditor.setPreview('back');
188
- }
189
-
190
- });
191
-
192
- self.ModalHeaderLogo = Marionette.ItemView.extend({
193
-
194
- template: '#tmpl-premium-template-modal-header-logo',
195
-
196
- id: 'premium-template-modal-header-logo'
197
-
198
- });
199
-
200
- self.ModalBodyView = Marionette.LayoutView.extend({
201
-
202
- id: 'premium-template-library-content',
203
-
204
- className: function () {
205
- return 'library-tab-' + PremiumEditor.getTab();
206
- },
207
-
208
- template: '#tmpl-premium-template-modal-content',
209
-
210
- regions: {
211
- contentTemplates: '.premium-templates-list',
212
- contentFilters: '.premium-filters-list',
213
- contentKeywords: '.premium-keywords-list'
214
- }
215
-
216
- });
217
-
218
- self.ModalInsertTemplateBehavior = Marionette.Behavior.extend({
219
- ui: {
220
- insertButton: '.premium-template-insert'
221
- },
222
-
223
- events: {
224
- 'click @ui.insertButton': 'onInsertButtonClick'
225
- },
226
-
227
- onInsertButtonClick: function () {
228
-
229
- var templateModel = this.view.model,
230
- innerTemplates = templateModel.attributes.dependencies,
231
- isPro = templateModel.attributes.pro,
232
- innerTemplatesLength = Object.keys(innerTemplates).length,
233
- options = {};
234
-
235
- PremiumEditor.layout.showLoadingView();
236
- if (innerTemplatesLength > 0) {
237
- for (var key in innerTemplates) {
238
- $.ajax({
239
- url: ajaxurl,
240
- type: 'post',
241
- dataType: 'json',
242
- data: {
243
- action: 'premium_inner_template',
244
- template: innerTemplates[key],
245
- tab: PremiumEditor.getTab()
246
- }
247
- });
248
- }
249
- }
250
-
251
- if ("valid" === PremiumTempsData.license.status || !isPro) {
252
-
253
- elementor.templates.requestTemplateContent(
254
- templateModel.get('source'),
255
- templateModel.get('template_id'), {
256
- data: {
257
- tab: PremiumEditor.getTab(),
258
- page_settings: false
259
- },
260
- success: function (data) {
261
-
262
- if (!data.license) {
263
- PremiumEditor.layout.showLicenseError();
264
- return;
265
- }
266
-
267
- console.log("%c Template Inserted Successfully!!", "color: #7a7a7a; background-color: #eee;");
268
-
269
- PremiumEditor.closeModal();
270
-
271
- elementor.channels.data.trigger('template:before:insert', templateModel);
272
-
273
- if (null !== PremiumEditor.atIndex) {
274
- options.at = PremiumEditor.atIndex;
275
- }
276
-
277
- elementor.previewView.addChildModel(data.content, options);
278
-
279
- elementor.channels.data.trigger('template:after:insert', templateModel);
280
- jQuery("#elementor-panel-saver-button-save-options, #elementor-panel-saver-button-publish").removeClass("elementor-disabled");
281
- PremiumEditor.atIndex = null;
282
-
283
- },
284
- error: function (err) {
285
- console.log(err);
286
- }
287
- }
288
- );
289
- } else {
290
- PremiumEditor.layout.showLicenseError();
291
- }
292
- }
293
- });
294
-
295
- self.ModalHeaderInsertButton = Marionette.ItemView.extend({
296
-
297
- template: '#tmpl-premium-template-modal-insert-button',
298
-
299
- id: 'premium-template-modal-insert-button',
300
-
301
- behaviors: {
302
- insertTemplate: {
303
- behaviorClass: self.ModalInsertTemplateBehavior
304
- }
305
- }
306
-
307
- });
308
-
309
- self.FiltersItemView = Marionette.ItemView.extend({
310
-
311
- template: '#tmpl-premium-template-modal-filters-item',
312
-
313
- className: function () {
314
- return 'premium-template-filter-item';
315
- },
316
-
317
- ui: function () {
318
- return {
319
- filterLabels: '.premium-template-filter-label'
320
- };
321
- },
322
-
323
- events: function () {
324
- return {
325
- 'click @ui.filterLabels': 'onFilterClick'
326
- };
327
- },
328
-
329
- onFilterClick: function (event) {
330
-
331
- var $clickedInput = jQuery(event.target);
332
- jQuery('.premium-library-keywords').val('');
333
- PremiumEditor.setFilter('category', $clickedInput.val());
334
- PremiumEditor.setFilter('keyword', '');
335
- }
336
-
337
- });
338
-
339
- self.ModalTabsItemView = Marionette.ItemView.extend({
340
-
341
- template: '#tmpl-premium-template-modal-tabs-item',
342
-
343
- className: function () {
344
- return 'elementor-template-library-menu-item';
345
- },
346
-
347
- ui: function () {
348
- return {
349
- tabsLabels: 'label',
350
- tabsInput: 'input'
351
- };
352
- },
353
-
354
- events: function () {
355
- return {
356
- 'click @ui.tabsLabels': 'onTabClick'
357
- };
358
- },
359
-
360
- onRender: function () {
361
- if (this.model.get('slug') === PremiumEditor.getTab()) {
362
- this.ui.tabsInput.attr('checked', 'checked');
363
- }
364
- },
365
-
366
- onTabClick: function (event) {
367
-
368
- var $clickedInput = jQuery(event.target);
369
- PremiumEditor.setTab($clickedInput.val());
370
- PremiumEditor.setFilter('keyword', '');
371
- }
372
-
373
- });
374
-
375
- self.FiltersCollectionView = Marionette.CompositeView.extend({
376
-
377
- id: 'premium-template-library-filters',
378
-
379
- template: '#tmpl-premium-template-modal-filters',
380
-
381
- childViewContainer: '#premium-modal-filters-container',
382
-
383
- getChildView: function (childModel) {
384
- return self.FiltersItemView;
385
- }
386
-
387
- });
388
-
389
- self.ModalTabsCollectionView = Marionette.CompositeView.extend({
390
-
391
- template: '#tmpl-premium-template-modal-tabs',
392
-
393
- childViewContainer: '#premium-modal-tabs-items',
394
-
395
- initialize: function () {
396
- this.listenTo(PremiumEditor.channels.layout, 'tamplate:cloned', this._renderChildren);
397
- },
398
-
399
- getChildView: function (childModel) {
400
- return self.ModalTabsItemView;
401
- }
402
-
403
- });
404
-
405
- self.ModalTemplateItemView = Marionette.ItemView.extend({
406
-
407
- template: '#tmpl-premium-template-modal-item',
408
-
409
- className: function () {
410
-
411
- var urlClass = ' premium-template-has-url',
412
- sourceClass = ' elementor-template-library-template-',
413
- proTemplate = '';
414
-
415
- if ('' === this.model.get('preview')) {
416
- urlClass = ' premium-template-no-url';
417
- }
418
-
419
- sourceClass += 'remote';
420
-
421
- if (this.model.get('pro')) {
422
- proTemplate = ' premium-template-pro';
423
- }
424
-
425
- return 'elementor-template-library-template' + sourceClass + urlClass + proTemplate;
426
- },
427
-
428
- ui: function () {
429
- return {
430
- previewButton: '.elementor-template-library-template-preview',
431
- };
432
- },
433
-
434
- events: function () {
435
- return {
436
- 'click @ui.previewButton': 'onPreviewButtonClick',
437
- };
438
- },
439
-
440
- onPreviewButtonClick: function () {
441
-
442
- if ('' === this.model.get('url')) {
443
- return;
444
- }
445
-
446
- PremiumEditor.setPreview(this.model);
447
- },
448
-
449
- behaviors: {
450
- insertTemplate: {
451
- behaviorClass: self.ModalInsertTemplateBehavior
452
- }
453
- }
454
- });
455
-
456
- self.ModalCollectionView = Marionette.CompositeView.extend({
457
-
458
- template: '#tmpl-premium-template-modal-templates',
459
-
460
- id: 'premium-template-library-templates',
461
-
462
- childViewContainer: '#premium-modal-templates-container',
463
-
464
- initialize: function () {
465
-
466
- this.listenTo(PremiumEditor.channels.templates, 'filter:change', this._renderChildren);
467
- },
468
-
469
- filter: function (childModel) {
470
-
471
- var filter = PremiumEditor.getFilter('category'),
472
- keyword = PremiumEditor.getFilter('keyword');
473
-
474
- if (!filter && !keyword) {
475
- return true;
476
- }
477
-
478
- if (keyword && !filter) {
479
- return _.contains(childModel.get('keywords'), keyword);
480
- }
481
-
482
- if (filter && !keyword) {
483
- return _.contains(childModel.get('categories'), filter);
484
- }
485
-
486
- return _.contains(childModel.get('categories'), filter) && _.contains(childModel.get('keywords'), keyword);
487
-
488
- },
489
-
490
- getChildView: function (childModel) {
491
- return self.ModalTemplateItemView;
492
- },
493
-
494
- onRenderCollection: function () {
495
-
496
- var container = this.$childViewContainer,
497
- items = this.$childViewContainer.children(),
498
- tab = PremiumEditor.getTab();
499
-
500
- if ('premium_page' === tab || 'local' === tab) {
501
- return;
502
- }
503
-
504
- // Wait for thumbnails to be loaded
505
- container.imagesLoaded(function () { }).done(function () {
506
- self.masonry.init({
507
- container: container,
508
- items: items
509
- });
510
- });
511
- }
512
-
513
- });
514
-
515
- self.ModalLayoutView = Marionette.LayoutView.extend({
516
-
517
- el: '#premium-template-modal',
518
-
519
- regions: PremiumTempsData.modalRegions,
520
-
521
- initialize: function () {
522
-
523
- this.getRegion('modalHeader').show(new self.ModalHeaderView());
524
- this.listenTo(PremiumEditor.channels.tabs, 'filter:change', this.switchTabs);
525
- this.listenTo(PremiumEditor.channels.layout, 'preview:change', this.switchPreview);
526
-
527
- },
528
-
529
- switchTabs: function () {
530
- this.showLoadingView();
531
- PremiumEditor.setFilter('keyword', '');
532
- PremiumEditor.requestTemplates(PremiumEditor.getTab());
533
- },
534
-
535
- switchPreview: function () {
536
-
537
- var header = this.getHeaderView(),
538
- preview = PremiumEditor.getPreview();
539
-
540
- var filter = PremiumEditor.getFilter('category'),
541
- keyword = PremiumEditor.getFilter('keyword');
542
-
543
- if ('back' === preview) {
544
- header.headerLogo.show(new self.ModalHeaderLogo());
545
- header.headerTabs.show(new self.ModalTabsCollectionView({
546
- collection: PremiumEditor.collections.tabs
547
- }));
548
-
549
- header.headerActions.empty();
550
- PremiumEditor.setTab(PremiumEditor.getTab());
551
-
552
- if ('' != filter) {
553
- PremiumEditor.setFilter('category', filter);
554
- jQuery('#premium-modal-filters-container').find("input[value='" + filter + "']").prop('checked', true);
555
-
556
- }
557
-
558
- if ('' != keyword) {
559
- PremiumEditor.setFilter('keyword', keyword);
560
- }
561
-
562
- return;
563
- }
564
-
565
- if ('initial' === preview) {
566
- header.headerActions.empty();
567
- header.headerLogo.show(new self.ModalHeaderLogo());
568
- return;
569
- }
570
-
571
- this.getRegion('modalContent').show(new self.ModalPreviewView({
572
- 'preview': preview.get('preview'),
573
- 'url': preview.get('url'),
574
- 'notice': preview.get('notice')
575
- }));
576
-
577
- header.headerLogo.empty();
578
- header.headerTabs.show(new self.ModalHeaderBack());
579
- header.headerActions.show(new self.ModalHeaderInsertButton({
580
- model: preview
581
- }));
582
-
583
- },
584
-
585
- getHeaderView: function () {
586
- return this.getRegion('modalHeader').currentView;
587
- },
588
-
589
- getContentView: function () {
590
- return this.getRegion('modalContent').currentView;
591
- },
592
-
593
- showLoadingView: function () {
594
- this.modalContent.show(new self.ModalLoadingView());
595
- },
596
-
597
- showLicenseError: function () {
598
- this.modalContent.show(new self.ModalErrorView());
599
- },
600
-
601
- showTemplatesView: function (templatesCollection, categoriesCollection, keywords) {
602
-
603
- this.getRegion('modalContent').show(new self.ModalBodyView());
604
-
605
- var contentView = this.getContentView(),
606
- header = this.getHeaderView(),
607
- keywordsModel = new self.KeywordsModel({
608
- keywords: keywords
609
- });
610
-
611
- PremiumEditor.collections.tabs = new self.ModalTabsCollection(PremiumEditor.getTabs());
612
-
613
- header.headerTabs.show(new self.ModalTabsCollectionView({
614
- collection: PremiumEditor.collections.tabs
615
- }));
616
-
617
- contentView.contentTemplates.show(new self.ModalCollectionView({
618
- collection: templatesCollection
619
- }));
620
-
621
- contentView.contentFilters.show(new self.FiltersCollectionView({
622
- collection: categoriesCollection
623
- }));
624
-
625
- contentView.contentKeywords.show(new self.KeywordsView({
626
- model: keywordsModel
627
- }));
628
-
629
- }
630
-
631
- });
632
-
633
- self.ModalLoadingView = Marionette.ItemView.extend({
634
- id: 'premium-template-modal-loading',
635
- template: '#tmpl-premium-template-modal-loading'
636
- });
637
-
638
- self.ModalErrorView = Marionette.ItemView.extend({
639
- id: 'premium-template-modal-loading',
640
- template: '#tmpl-premium-template-modal-error'
641
- });
642
-
643
- },
644
-
645
- masonry: {
646
-
647
- self: {},
648
- elements: {},
649
-
650
- init: function (settings) {
651
-
652
- var self = this;
653
- self.settings = $.extend(self.getDefaultSettings(), settings);
654
- self.elements = self.getDefaultElements();
655
-
656
- self.run();
657
- },
658
-
659
- getSettings: function (key) {
660
- if (key) {
661
- return this.settings[key];
662
- } else {
663
- return this.settings;
664
- }
665
- },
666
-
667
- getDefaultSettings: function () {
668
- return {
669
- container: null,
670
- items: null,
671
- columnsCount: 3,
672
- verticalSpaceBetween: 30
673
- };
674
- },
675
-
676
- getDefaultElements: function () {
677
- return {
678
- $container: jQuery(this.getSettings('container')),
679
- $items: jQuery(this.getSettings('items'))
680
- };
681
- },
682
-
683
- run: function () {
684
- var heights = [],
685
- distanceFromTop = this.elements.$container.position().top,
686
- settings = this.getSettings(),
687
- columnsCount = settings.columnsCount;
688
-
689
- distanceFromTop += parseInt(this.elements.$container.css('margin-top'), 10);
690
-
691
- this.elements.$container.height('');
692
-
693
- this.elements.$items.each(function (index) {
694
- var row = Math.floor(index / columnsCount),
695
- indexAtRow = index % columnsCount,
696
- $item = jQuery(this),
697
- itemPosition = $item.position(),
698
- itemHeight = $item[0].getBoundingClientRect().height + settings.verticalSpaceBetween;
699
-
700
- if (row) {
701
- var pullHeight = itemPosition.top - distanceFromTop - heights[indexAtRow];
702
- pullHeight -= parseInt($item.css('margin-top'), 10);
703
- pullHeight *= -1;
704
- $item.css('margin-top', pullHeight + 'px');
705
- heights[indexAtRow] += itemHeight;
706
- } else {
707
- heights.push(itemHeight);
708
- }
709
- });
710
-
711
- this.elements.$container.height(Math.max.apply(Math, heights));
712
- }
713
- }
714
-
715
- };
716
-
717
- PremiumControlsViews = {
718
-
719
- PremiumSearchView: null,
720
-
721
- init: function () {
722
-
723
- var self = this;
724
-
725
- self.PremiumSearchView = window.elementor.modules.controls.BaseData.extend({
726
-
727
- onReady: function () {
728
-
729
- var action = this.model.attributes.action,
730
- queryParams = this.model.attributes.query_params;
731
-
732
- this.ui.select.find('option').each(function (index, el) {
733
- $(this).attr('selected', true);
734
- });
735
-
736
- this.ui.select.select2({
737
- ajax: {
738
- url: function () {
739
-
740
- var query = '';
741
-
742
- if (queryParams.length > 0) {
743
- $.each(queryParams, function (index, param) {
744
-
745
- if (window.elementor.settings.page.model.attributes[param]) {
746
- query += '&' + param + '=' + window.elementor.settings.page.model.attributes[param];
747
- }
748
- });
749
- }
750
-
751
- return ajaxurl + '?action=' + action + query;
752
- },
753
- dataType: 'json'
754
- },
755
- placeholder: 'Please enter 3 or more characters',
756
- minimumInputLength: 3
757
- });
758
-
759
- },
760
-
761
- onBeforeDestroy: function () {
762
-
763
- if (this.ui.select.data('select2')) {
764
- this.ui.select.select2('destroy');
765
- }
766
-
767
- this.$el.remove();
768
- }
769
-
770
- });
771
-
772
- window.elementor.addControlView('premium_search', self.PremiumSearchView);
773
-
774
- }
775
-
776
- };
777
-
778
-
779
- PremiumModules = {
780
-
781
- getDataToSave: function (data) {
782
- data.id = window.elementor.config.post_id;
783
- return data;
784
- },
785
-
786
- init: function () {
787
- if (window.elementor.settings.premium_template) {
788
- window.elementor.settings.premium_template.getDataToSave = this.getDataToSave;
789
- }
790
-
791
- if (window.elementor.settings.premium_page) {
792
- window.elementor.settings.premium_page.getDataToSave = this.getDataToSave;
793
- window.elementor.settings.premium_page.changeCallbacks = {
794
- custom_header: function () {
795
- this.save(function () {
796
- elementor.reloadPreview();
797
-
798
- elementor.once('preview:loaded', function () {
799
- elementor.getPanelView().setPage('premium_page_settings');
800
- });
801
- });
802
- },
803
- custom_footer: function () {
804
- this.save(function () {
805
- elementor.reloadPreview();
806
-
807
- elementor.once('preview:loaded', function () {
808
- elementor.getPanelView().setPage('premium_page_settings');
809
- });
810
- });
811
- }
812
- };
813
- }
814
-
815
- }
816
-
817
- };
818
-
819
- PremiumEditor = {
820
-
821
- modal: false,
822
- layout: false,
823
- collections: {},
824
- tabs: {},
825
- defaultTab: '',
826
- channels: {},
827
- atIndex: null,
828
-
829
- init: function () {
830
-
831
- window.elementor.on(
832
- 'document:loaded',
833
- window._.bind(PremiumEditor.onPreviewLoaded, PremiumEditor)
834
- );
835
-
836
- PremiumEditorViews.init();
837
- PremiumControlsViews.init();
838
- PremiumModules.init();
839
-
840
- },
841
-
842
- onPreviewLoaded: function () {
843
-
844
- this.initPremTempsButton();
845
-
846
- window.elementor.$previewContents.on(
847
- 'click.addPremiumTemplate',
848
- '.pa-add-section-btn',
849
- _.bind(this.showTemplatesModal, this)
850
- );
851
-
852
- this.channels = {
853
- templates: Backbone.Radio.channel('PREMIUM_EDITOR:templates'),
854
- tabs: Backbone.Radio.channel('PREMIUM_EDITOR:tabs'),
855
- layout: Backbone.Radio.channel('PREMIUM_EDITOR:layout'),
856
- };
857
-
858
- this.tabs = PremiumTempsData.tabs;
859
- this.defaultTab = PremiumTempsData.defaultTab;
860
-
861
- },
862
-
863
- initPremTempsButton: function () {
864
-
865
- var $addNewSection = window.elementor.$previewContents.find('.elementor-add-new-section'),
866
- addPremiumTemplate = "<div class='elementor-add-section-area-button pa-add-section-btn' title='Add Premium Template'><i class='eicon-star'></i></div>",
867
- $addPremiumTemplate;
868
-
869
- if ($addNewSection.length && PremiumTempsData.PremiumTemplatesBtn) {
870
- $addPremiumTemplate = $(addPremiumTemplate).prependTo($addNewSection);
871
- }
872
-
873
- window.elementor.$previewContents.on(
874
- 'click.addPremiumTemplate',
875
- '.elementor-editor-section-settings .elementor-editor-element-add',
876
- function () {
877
-
878
- var $this = $(this),
879
- $section = $this.closest('.elementor-top-section'),
880
- modelID = $section.data('model-cid');
881
-
882
- if (elementor.previewView.collection.length) {
883
- $.each(elementor.previewView.collection.models, function (index, model) {
884
- if (modelID === model.cid) {
885
- PremiumEditor.atIndex = index;
886
- }
887
- });
888
- }
889
-
890
- if (PremiumTempsData.PremiumTemplatesBtn) {
891
- setTimeout(function () {
892
- var $addNew = $section.prev('.elementor-add-section').find('.elementor-add-new-section');
893
- $addNew.prepend(addPremiumTemplate);
894
- }, 100);
895
- }
896
-
897
- }
898
- );
899
-
900
- },
901
-
902
- getFilter: function (name) {
903
-
904
- return this.channels.templates.request('filter:' + name);
905
- },
906
-
907
- setFilter: function (name, value) {
908
- this.channels.templates.reply('filter:' + name, value);
909
- this.channels.templates.trigger('filter:change');
910
- },
911
-
912
- getTab: function () {
913
- return this.channels.tabs.request('filter:tabs');
914
- },
915
-
916
- setTab: function (value, silent) {
917
-
918
- this.channels.tabs.reply('filter:tabs', value);
919
-
920
- if (!silent) {
921
- this.channels.tabs.trigger('filter:change');
922
- }
923
-
924
- },
925
-
926
- getTabs: function () {
927
-
928
- var tabs = [];
929
-
930
- _.each(this.tabs, function (item, slug) {
931
- tabs.push({
932
- slug: slug,
933
- title: item.title
934
- });
935
- });
936
-
937
- return tabs;
938
- },
939
-
940
- getPreview: function (name) {
941
- return this.channels.layout.request('preview');
942
- },
943
-
944
- setPreview: function (value, silent) {
945
-
946
- this.channels.layout.reply('preview', value);
947
-
948
- if (!silent) {
949
- this.channels.layout.trigger('preview:change');
950
- }
951
- },
952
-
953
- getKeywords: function () {
954
-
955
- var keywords = [];
956
-
957
- _.each(this.keywords, function (title, slug) {
958
- tabs.push({
959
- slug: slug,
960
- title: title
961
- });
962
- });
963
-
964
- return keywords;
965
- },
966
-
967
- showTemplatesModal: function () {
968
-
969
- this.getModal().show();
970
-
971
- if (!this.layout) {
972
- this.layout = new PremiumEditorViews.ModalLayoutView();
973
- this.layout.showLoadingView();
974
- }
975
-
976
- this.setTab(this.defaultTab, true);
977
- this.requestTemplates(this.defaultTab);
978
- this.setPreview('initial');
979
-
980
- },
981
-
982
- requestTemplates: function (tabName) {
983
-
984
- var self = this,
985
- tab = self.tabs[tabName];
986
-
987
- self.setFilter('category', false);
988
-
989
- if (tab.data.templates && tab.data.categories) {
990
- self.layout.showTemplatesView(tab.data.templates, tab.data.categories, tab.data.keywords);
991
- } else {
992
- $.ajax({
993
- url: ajaxurl,
994
- type: 'get',
995
- dataType: 'json',
996
- data: {
997
- action: 'premium_get_templates',
998
- tab: tabName
999
- },
1000
- success: function (response) {
1001
-
1002
- console.log("%cTemplates Retrieved Successfully!!", "color: #7a7a7a; background-color: #eee;");
1003
-
1004
- var templates = new PremiumEditorViews.LibraryCollection(response.data.templates),
1005
- categories = new PremiumEditorViews.CategoriesCollection(response.data.categories);
1006
-
1007
- self.tabs[tabName].data = {
1008
- templates: templates,
1009
- categories: categories,
1010
- keywords: response.data.keywords
1011
- };
1012
-
1013
- self.layout.showTemplatesView(templates, categories, response.data.keywords);
1014
-
1015
- },
1016
- error: function (err) {
1017
- console.log(err);
1018
- }
1019
- });
1020
- }
1021
-
1022
- },
1023
-
1024
- closeModal: function () {
1025
- this.getModal().hide();
1026
- },
1027
-
1028
- getModal: function () {
1029
-
1030
- if (!this.modal) {
1031
- this.modal = elementor.dialogsManager.createWidget('lightbox', {
1032
- id: 'premium-template-modal',
1033
- className: 'elementor-templates-modal',
1034
- closeButton: false
1035
- });
1036
- }
1037
-
1038
- return this.modal;
1039
-
1040
- }
1041
-
1042
- };
1043
-
1044
- $(window).on('elementor:init', PremiumEditor.init);
1045
-
 
 
 
 
 
 
1046
  })(jQuery);
1
+ (function ($) {
2
+
3
+ 'use strict';
4
+
5
+ var PremiumTempsData = window.PremiumTempsData || {},
6
+ PremiumEditor,
7
+ PremiumEditorViews,
8
+ PremiumControlsViews,
9
+ PremiumModules;
10
+
11
+ PremiumEditorViews = {
12
+
13
+ ModalLayoutView: null,
14
+ ModalHeaderView: null,
15
+ ModalHeaderInsertButton: null,
16
+ ModalLoadingView: null,
17
+ ModalBodyView: null,
18
+ ModalErrorView: null,
19
+ LibraryCollection: null,
20
+ KeywordsModel: null,
21
+ ModalCollectionView: null,
22
+ ModalTabsCollection: null,
23
+ ModalTabsCollectionView: null,
24
+ FiltersCollectionView: null,
25
+ FiltersItemView: null,
26
+ ModalTabsItemView: null,
27
+ ModalTemplateItemView: null,
28
+ ModalInsertTemplateBehavior: null,
29
+ ModalTemplateModel: null,
30
+ CategoriesCollection: null,
31
+ ModalPreviewView: null,
32
+ ModalHeaderBack: null,
33
+ ModalHeaderLogo: null,
34
+ KeywordsView: null,
35
+ TabModel: null,
36
+ CategoryModel: null,
37
+
38
+ init: function () {
39
+ var self = this;
40
+
41
+ self.ModalTemplateModel = Backbone.Model.extend({
42
+ defaults: {
43
+ template_id: 0,
44
+ name: '',
45
+ title: '',
46
+ thumbnail: '',
47
+ preview: '',
48
+ source: '',
49
+ categories: [],
50
+ keywords: []
51
+ }
52
+ });
53
+
54
+ self.ModalHeaderView = Marionette.LayoutView.extend({
55
+
56
+ id: 'premium-template-modal-header',
57
+ template: '#tmpl-premium-template-modal-header',
58
+
59
+ ui: {
60
+ closeModal: '#premium-template-modal-header-close-modal'
61
+ },
62
+
63
+ events: {
64
+ 'click @ui.closeModal': 'onCloseModalClick'
65
+ },
66
+
67
+ regions: {
68
+ headerLogo: '#premium-template-modal-header-logo-area',
69
+ headerTabs: '#premium-template-modal-header-tabs',
70
+ headerActions: '#premium-template-modal-header-actions'
71
+ },
72
+
73
+ onCloseModalClick: function () {
74
+ PremiumEditor.closeModal();
75
+ }
76
+
77
+ });
78
+
79
+ self.TabModel = Backbone.Model.extend({
80
+ defaults: {
81
+ slug: '',
82
+ title: ''
83
+ }
84
+ });
85
+
86
+ self.LibraryCollection = Backbone.Collection.extend({
87
+ model: self.ModalTemplateModel
88
+ });
89
+
90
+ self.ModalTabsCollection = Backbone.Collection.extend({
91
+ model: self.TabModel
92
+ });
93
+
94
+ self.CategoryModel = Backbone.Model.extend({
95
+ defaults: {
96
+ slug: '',
97
+ title: ''
98
+ }
99
+ });
100
+
101
+ self.KeywordsModel = Backbone.Model.extend({
102
+ defaults: {
103
+ keywords: {}
104
+ }
105
+ });
106
+
107
+ self.CategoriesCollection = Backbone.Collection.extend({
108
+ model: self.CategoryModel
109
+ });
110
+
111
+ self.KeywordsView = Marionette.ItemView.extend({
112
+ id: 'elementor-template-library-filter',
113
+ template: '#tmpl-premium-template-modal-keywords',
114
+ ui: {
115
+ keywords: '.premium-library-keywords'
116
+ },
117
+
118
+ events: {
119
+ 'change @ui.keywords': 'onSelectKeyword'
120
+ },
121
+
122
+ onSelectKeyword: function (event) {
123
+ var selected = event.currentTarget.selectedOptions[0].value;
124
+ PremiumEditor.setFilter('keyword', selected);
125
+ },
126
+
127
+ onRender: function () {
128
+ var $filters = this.$('.premium-library-keywords');
129
+ $filters.select2({
130
+ placeholder: 'Choose Widget',
131
+ allowClear: true,
132
+ width: 250,
133
+ dropdownParent: this.$el
134
+ });
135
+ }
136
+ });
137
+
138
+ self.ModalPreviewView = Marionette.ItemView.extend({
139
+
140
+ template: '#tmpl-premium-template-modal-preview',
141
+
142
+ id: 'premium-templatate-item-preview-wrap',
143
+
144
+ ui: {
145
+ iframe: 'iframe',
146
+ notice: '.premium-template-item-notice'
147
+ },
148
+
149
+
150
+ onRender: function () {
151
+
152
+ if (null !== this.getOption('notice')) {
153
+ if (this.getOption('notice').length) {
154
+ var message = "";
155
+ if (-1 !== this.getOption('notice').indexOf("facebook")) {
156
+ message += "<p>Please login with your Facebook account in order to get your Facebook Reviews.</p>";
157
+ } else if (-1 !== this.getOption('notice').indexOf("google")) {
158
+ message += "<p>You need to add your Google API key from Dashboard -> Premium Add-ons for Elementor -> Google Maps</p>";
159
+ } else if (-1 !== this.getOption('notice').indexOf("form")) {
160
+ message += "<p>You need to have <a href='https://wordpress.org/plugins/contact-form-7/' target='_blank'>Contact Form 7 plugin</a> installed and active.</p>";
161
+ }
162
+
163
+ this.ui.notice.html('<div><p><strong>Important!</strong></p>' + message + '</div>');
164
+ }
165
+ }
166
+
167
+ this.ui.iframe.attr('src', this.getOption('url'));
168
+
169
+ }
170
+ });
171
+
172
+ self.ModalHeaderBack = Marionette.ItemView.extend({
173
+
174
+ template: '#tmpl-premium-template-modal-header-back',
175
+
176
+ id: 'premium-template-modal-header-back',
177
+
178
+ ui: {
179
+ button: 'button'
180
+ },
181
+
182
+ events: {
183
+ 'click @ui.button': 'onBackClick',
184
+ },
185
+
186
+ onBackClick: function () {
187
+ PremiumEditor.setPreview('back');
188
+ }
189
+
190
+ });
191
+
192
+ self.ModalHeaderLogo = Marionette.ItemView.extend({
193
+
194
+ template: '#tmpl-premium-template-modal-header-logo',
195
+
196
+ id: 'premium-template-modal-header-logo'
197
+
198
+ });
199
+
200
+ self.ModalBodyView = Marionette.LayoutView.extend({
201
+
202
+ id: 'premium-template-library-content',
203
+
204
+ className: function () {
205
+ return 'library-tab-' + PremiumEditor.getTab();
206
+ },
207
+
208
+ template: '#tmpl-premium-template-modal-content',
209
+
210
+ regions: {
211
+ contentTemplates: '.premium-templates-list',
212
+ contentFilters: '.premium-filters-list',
213
+ contentKeywords: '.premium-keywords-list'
214
+ }
215
+
216
+ });
217
+
218
+ self.ModalInsertTemplateBehavior = Marionette.Behavior.extend({
219
+ ui: {
220
+ insertButtons: ['.premium-template-insert', '.premium-template-insert-no-media'],
221
+ },
222
+
223
+ events: {
224
+ 'click @ui.insertButtons': 'onInsertButtonClick'
225
+ },
226
+
227
+ onInsertButtonClick: function (event) {
228
+
229
+ var templateModel = this.view.model,
230
+ innerTemplates = templateModel.attributes.dependencies,
231
+ isPro = templateModel.attributes.pro,
232
+ innerTemplatesLength = Object.keys(innerTemplates).length,
233
+ options = {},
234
+ insertMedia = !$(event.currentTarget).hasClass("premium-template-insert-no-media");
235
+
236
+ console.log(insertMedia);
237
+
238
+ PremiumEditor.layout.showLoadingView();
239
+ if (innerTemplatesLength > 0) {
240
+ for (var key in innerTemplates) {
241
+ $.ajax({
242
+ url: ajaxurl,
243
+ type: 'post',
244
+ dataType: 'json',
245
+ data: {
246
+ action: 'premium_inner_template',
247
+ template: innerTemplates[key],
248
+ tab: PremiumEditor.getTab(),
249
+ withMedia: insertMedia
250
+ }
251
+ });
252
+ }
253
+ }
254
+
255
+ if ("valid" === PremiumTempsData.license.status || !isPro) {
256
+
257
+ elementor.templates.requestTemplateContent(
258
+ templateModel.get('source'),
259
+ templateModel.get('template_id'), {
260
+ data: {
261
+ tab: PremiumEditor.getTab(),
262
+ page_settings: false,
263
+ withMedia: insertMedia
264
+ },
265
+ success: function (data) {
266
+
267
+ if (!data.license) {
268
+ PremiumEditor.layout.showLicenseError();
269
+ return;
270
+ }
271
+
272
+ console.log("%c Template Inserted Successfully!!", "color: #7a7a7a; background-color: #eee;");
273
+
274
+ PremiumEditor.closeModal();
275
+
276
+ console.log(data.content);
277
+ elementor.channels.data.trigger('template:before:insert', templateModel);
278
+
279
+ if (null !== PremiumEditor.atIndex) {
280
+ options.at = PremiumEditor.atIndex;
281
+ }
282
+
283
+ elementor.previewView.addChildModel(data.content, options);
284
+
285
+ elementor.channels.data.trigger('template:after:insert', templateModel);
286
+ jQuery("#elementor-panel-saver-button-save-options, #elementor-panel-saver-button-publish").removeClass("elementor-disabled");
287
+ PremiumEditor.atIndex = null;
288
+
289
+ },
290
+ error: function (err) {
291
+ console.log(err);
292
+ }
293
+ }
294
+ );
295
+ } else {
296
+ PremiumEditor.layout.showLicenseError();
297
+ }
298
+ }
299
+ });
300
+
301
+ self.ModalHeaderInsertButton = Marionette.ItemView.extend({
302
+
303
+ template: '#tmpl-premium-template-modal-insert-button',
304
+
305
+ id: 'premium-template-modal-insert-button',
306
+
307
+ behaviors: {
308
+ insertTemplate: {
309
+ behaviorClass: self.ModalInsertTemplateBehavior
310
+ }
311
+ }
312
+
313
+ });
314
+
315
+ self.FiltersItemView = Marionette.ItemView.extend({
316
+
317
+ template: '#tmpl-premium-template-modal-filters-item',
318
+
319
+ className: function () {
320
+ return 'premium-template-filter-item';
321
+ },
322
+
323
+ ui: function () {
324
+ return {
325
+ filterLabels: '.premium-template-filter-label'
326
+ };
327
+ },
328
+
329
+ events: function () {
330
+ return {
331
+ 'click @ui.filterLabels': 'onFilterClick'
332
+ };
333
+ },
334
+
335
+ onFilterClick: function (event) {
336
+
337
+ var $clickedInput = jQuery(event.target);
338
+ jQuery('.premium-library-keywords').val('');
339
+ PremiumEditor.setFilter('category', $clickedInput.val());
340
+ PremiumEditor.setFilter('keyword', '');
341
+ }
342
+
343
+ });
344
+
345
+ self.ModalTabsItemView = Marionette.ItemView.extend({
346
+
347
+ template: '#tmpl-premium-template-modal-tabs-item',
348
+
349
+ className: function () {
350
+ return 'elementor-template-library-menu-item';
351
+ },
352
+
353
+ ui: function () {
354
+ return {
355
+ tabsLabels: 'label',
356
+ tabsInput: 'input'
357
+ };
358
+ },
359
+
360
+ events: function () {
361
+ return {
362
+ 'click @ui.tabsLabels': 'onTabClick'
363
+ };
364
+ },
365
+
366
+ onRender: function () {
367
+ if (this.model.get('slug') === PremiumEditor.getTab()) {
368
+ this.ui.tabsInput.attr('checked', 'checked');
369
+ }
370
+ },
371
+
372
+ onTabClick: function (event) {
373
+
374
+ var $clickedInput = jQuery(event.target);
375
+ PremiumEditor.setTab($clickedInput.val());
376
+ PremiumEditor.setFilter('keyword', '');
377
+ }
378
+
379
+ });
380
+
381
+ self.FiltersCollectionView = Marionette.CompositeView.extend({
382
+
383
+ id: 'premium-template-library-filters',
384
+
385
+ template: '#tmpl-premium-template-modal-filters',
386
+
387
+ childViewContainer: '#premium-modal-filters-container',
388
+
389
+ getChildView: function (childModel) {
390
+ return self.FiltersItemView;
391
+ }
392
+
393
+ });
394
+
395
+ self.ModalTabsCollectionView = Marionette.CompositeView.extend({
396
+
397
+ template: '#tmpl-premium-template-modal-tabs',
398
+
399
+ childViewContainer: '#premium-modal-tabs-items',
400
+
401
+ initialize: function () {
402
+ this.listenTo(PremiumEditor.channels.layout, 'tamplate:cloned', this._renderChildren);
403
+ },
404
+
405
+ getChildView: function (childModel) {
406
+ return self.ModalTabsItemView;
407
+ }
408
+
409
+ });
410
+
411
+ self.ModalTemplateItemView = Marionette.ItemView.extend({
412
+
413
+ template: '#tmpl-premium-template-modal-item',
414
+
415
+ className: function () {
416
+
417
+ var urlClass = ' premium-template-has-url',
418
+ sourceClass = ' elementor-template-library-template-',
419
+ proTemplate = '';
420
+
421
+ if ('' === this.model.get('preview')) {
422
+ urlClass = ' premium-template-no-url';
423
+ }
424
+
425
+ sourceClass += 'remote';
426
+
427
+ if (this.model.get('pro')) {
428
+ proTemplate = ' premium-template-pro';
429
+ }
430
+
431
+ return 'elementor-template-library-template' + sourceClass + urlClass + proTemplate;
432
+ },
433
+
434
+ ui: function () {
435
+ return {
436
+ previewButton: '.elementor-template-library-template-preview',
437
+ };
438
+ },
439
+
440
+ events: function () {
441
+ return {
442
+ 'click @ui.previewButton': 'onPreviewButtonClick',
443
+ };
444
+ },
445
+
446
+ onPreviewButtonClick: function () {
447
+
448
+ if ('' === this.model.get('url')) {
449
+ return;
450
+ }
451
+
452
+ PremiumEditor.setPreview(this.model);
453
+ },
454
+
455
+ behaviors: {
456
+ insertTemplate: {
457
+ behaviorClass: self.ModalInsertTemplateBehavior
458
+ }
459
+ }
460
+ });
461
+
462
+ self.ModalCollectionView = Marionette.CompositeView.extend({
463
+
464
+ template: '#tmpl-premium-template-modal-templates',
465
+
466
+ id: 'premium-template-library-templates',
467
+
468
+ childViewContainer: '#premium-modal-templates-container',
469
+
470
+ initialize: function () {
471
+
472
+ this.listenTo(PremiumEditor.channels.templates, 'filter:change', this._renderChildren);
473
+ },
474
+
475
+ filter: function (childModel) {
476
+
477
+ var filter = PremiumEditor.getFilter('category'),
478
+ keyword = PremiumEditor.getFilter('keyword');
479
+
480
+ if (!filter && !keyword) {
481
+ return true;
482
+ }
483
+
484
+ if (keyword && !filter) {
485
+ return _.contains(childModel.get('keywords'), keyword);
486
+ }
487
+
488
+ if (filter && !keyword) {
489
+ return _.contains(childModel.get('categories'), filter);
490
+ }
491
+
492
+ return _.contains(childModel.get('categories'), filter) && _.contains(childModel.get('keywords'), keyword);
493
+
494
+ },
495
+
496
+ getChildView: function (childModel) {
497
+ return self.ModalTemplateItemView;
498
+ },
499
+
500
+ onRenderCollection: function () {
501
+
502
+ var container = this.$childViewContainer,
503
+ items = this.$childViewContainer.children(),
504
+ tab = PremiumEditor.getTab();
505
+
506
+ if ('premium_page' === tab || 'local' === tab) {
507
+ return;
508
+ }
509
+
510
+ // Wait for thumbnails to be loaded
511
+ container.imagesLoaded(function () { }).done(function () {
512
+ self.masonry.init({
513
+ container: container,
514
+ items: items
515
+ });
516
+ });
517
+ }
518
+
519
+ });
520
+
521
+ self.ModalLayoutView = Marionette.LayoutView.extend({
522
+
523
+ el: '#premium-template-modal',
524
+
525
+ regions: PremiumTempsData.modalRegions,
526
+
527
+ initialize: function () {
528
+
529
+ this.getRegion('modalHeader').show(new self.ModalHeaderView());
530
+ this.listenTo(PremiumEditor.channels.tabs, 'filter:change', this.switchTabs);
531
+ this.listenTo(PremiumEditor.channels.layout, 'preview:change', this.switchPreview);
532
+
533
+ },
534
+
535
+ switchTabs: function () {
536
+ this.showLoadingView();
537
+ PremiumEditor.setFilter('keyword', '');
538
+ PremiumEditor.requestTemplates(PremiumEditor.getTab());
539
+ },
540
+
541
+ switchPreview: function () {
542
+
543
+ var header = this.getHeaderView(),
544
+ preview = PremiumEditor.getPreview();
545
+
546
+ var filter = PremiumEditor.getFilter('category'),
547
+ keyword = PremiumEditor.getFilter('keyword');
548
+
549
+ if ('back' === preview) {
550
+ header.headerLogo.show(new self.ModalHeaderLogo());
551
+ header.headerTabs.show(new self.ModalTabsCollectionView({
552
+ collection: PremiumEditor.collections.tabs
553
+ }));
554
+
555
+ header.headerActions.empty();
556
+ PremiumEditor.setTab(PremiumEditor.getTab());
557
+
558
+ if ('' != filter) {
559
+ PremiumEditor.setFilter('category', filter);
560
+ jQuery('#premium-modal-filters-container').find("input[value='" + filter + "']").prop('checked', true);
561
+
562
+ }
563
+
564
+ if ('' != keyword) {
565
+ PremiumEditor.setFilter('keyword', keyword);
566
+ }
567
+
568
+ return;
569
+ }
570
+
571
+ if ('initial' === preview) {
572
+ header.headerActions.empty();
573
+ header.headerLogo.show(new self.ModalHeaderLogo());
574
+ return;
575
+ }
576
+
577
+ this.getRegion('modalContent').show(new self.ModalPreviewView({
578
+ 'preview': preview.get('preview'),
579
+ 'url': preview.get('url'),
580
+ 'notice': preview.get('notice')
581
+ }));
582
+
583
+ header.headerLogo.empty();
584
+ header.headerTabs.show(new self.ModalHeaderBack());
585
+ header.headerActions.show(new self.ModalHeaderInsertButton({
586
+ model: preview
587
+ }));
588
+
589
+ },
590
+
591
+ getHeaderView: function () {
592
+ return this.getRegion('modalHeader').currentView;
593
+ },
594
+
595
+ getContentView: function () {
596
+ return this.getRegion('modalContent').currentView;
597
+ },
598
+
599
+ showLoadingView: function () {
600
+ this.modalContent.show(new self.ModalLoadingView());
601
+ },
602
+
603
+ showLicenseError: function () {
604
+ this.modalContent.show(new self.ModalErrorView());
605
+ },
606
+
607
+ showTemplatesView: function (templatesCollection, categoriesCollection, keywords) {
608
+
609
+ this.getRegion('modalContent').show(new self.ModalBodyView());
610
+
611
+ var contentView = this.getContentView(),
612
+ header = this.getHeaderView(),
613
+ keywordsModel = new self.KeywordsModel({
614
+ keywords: keywords
615
+ });
616
+
617
+ PremiumEditor.collections.tabs = new self.ModalTabsCollection(PremiumEditor.getTabs());
618
+
619
+ header.headerTabs.show(new self.ModalTabsCollectionView({
620
+ collection: PremiumEditor.collections.tabs
621
+ }));
622
+
623
+ contentView.contentTemplates.show(new self.ModalCollectionView({
624
+ collection: templatesCollection
625
+ }));
626
+
627
+ contentView.contentFilters.show(new self.FiltersCollectionView({
628
+ collection: categoriesCollection
629
+ }));
630
+
631
+ contentView.contentKeywords.show(new self.KeywordsView({
632
+ model: keywordsModel
633
+ }));
634
+
635
+ }
636
+
637
+ });
638
+
639
+ self.ModalLoadingView = Marionette.ItemView.extend({
640
+ id: 'premium-template-modal-loading',
641
+ template: '#tmpl-premium-template-modal-loading'
642
+ });
643
+
644
+ self.ModalErrorView = Marionette.ItemView.extend({
645
+ id: 'premium-template-modal-loading',
646
+ template: '#tmpl-premium-template-modal-error'
647
+ });
648
+
649
+ },
650
+
651
+ masonry: {
652
+
653
+ self: {},
654
+ elements: {},
655
+
656
+ init: function (settings) {
657
+
658
+ var self = this;
659
+ self.settings = $.extend(self.getDefaultSettings(), settings);
660
+ self.elements = self.getDefaultElements();
661
+
662
+ self.run();
663
+ },
664
+
665
+ getSettings: function (key) {
666
+ if (key) {
667
+ return this.settings[key];
668
+ } else {
669
+ return this.settings;
670
+ }
671
+ },
672
+
673
+ getDefaultSettings: function () {
674
+ return {
675
+ container: null,
676
+ items: null,
677
+ columnsCount: 3,
678
+ verticalSpaceBetween: 30
679
+ };
680
+ },
681
+
682
+ getDefaultElements: function () {
683
+ return {
684
+ $container: jQuery(this.getSettings('container')),
685
+ $items: jQuery(this.getSettings('items'))
686
+ };
687
+ },
688
+
689
+ run: function () {
690
+ var heights = [],
691
+ distanceFromTop = this.elements.$container.position().top,
692
+ settings = this.getSettings(),
693
+ columnsCount = settings.columnsCount;
694
+
695
+ distanceFromTop += parseInt(this.elements.$container.css('margin-top'), 10);
696
+
697
+ this.elements.$container.height('');
698
+
699
+ this.elements.$items.each(function (index) {
700
+ var row = Math.floor(index / columnsCount),
701
+ indexAtRow = index % columnsCount,
702
+ $item = jQuery(this),
703
+ itemPosition = $item.position(),
704
+ itemHeight = $item[0].getBoundingClientRect().height + settings.verticalSpaceBetween;
705
+
706
+ if (row) {
707
+ var pullHeight = itemPosition.top - distanceFromTop - heights[indexAtRow];
708
+ pullHeight -= parseInt($item.css('margin-top'), 10);
709
+ pullHeight *= -1;
710
+ $item.css('margin-top', pullHeight + 'px');
711
+ heights[indexAtRow] += itemHeight;
712
+ } else {
713
+ heights.push(itemHeight);
714
+ }
715
+ });
716
+
717
+ this.elements.$container.height(Math.max.apply(Math, heights));
718
+ }
719
+ }
720
+
721
+ };
722
+
723
+ PremiumControlsViews = {
724
+
725
+ PremiumSearchView: null,
726
+
727
+ init: function () {
728
+
729
+ var self = this;
730
+
731
+ self.PremiumSearchView = window.elementor.modules.controls.BaseData.extend({
732
+
733
+ onReady: function () {
734
+
735
+ var action = this.model.attributes.action,
736
+ queryParams = this.model.attributes.query_params;
737
+
738
+ this.ui.select.find('option').each(function (index, el) {
739
+ $(this).attr('selected', true);
740
+ });
741
+
742
+ this.ui.select.select2({
743
+ ajax: {
744
+ url: function () {
745
+
746
+ var query = '';
747
+
748
+ if (queryParams.length > 0) {
749
+ $.each(queryParams, function (index, param) {
750
+
751
+ if (window.elementor.settings.page.model.attributes[param]) {
752
+ query += '&' + param + '=' + window.elementor.settings.page.model.attributes[param];
753
+ }
754
+ });
755
+ }
756
+
757
+ return ajaxurl + '?action=' + action + query;
758
+ },
759
+ dataType: 'json'
760
+ },
761
+ placeholder: 'Please enter 3 or more characters',
762
+ minimumInputLength: 3
763
+ });
764
+
765
+ },
766
+
767
+ onBeforeDestroy: function () {
768
+
769
+ if (this.ui.select.data('select2')) {
770
+ this.ui.select.select2('destroy');
771
+ }
772
+
773
+ this.$el.remove();
774
+ }
775
+
776
+ });
777
+
778
+ window.elementor.addControlView('premium_search', self.PremiumSearchView);
779
+
780
+ }
781
+
782
+ };
783
+
784
+
785
+ PremiumModules = {
786
+
787
+ getDataToSave: function (data) {
788
+ data.id = window.elementor.config.post_id;
789
+ return data;
790
+ },
791
+
792
+ init: function () {
793
+ if (window.elementor.settings.premium_template) {
794
+ window.elementor.settings.premium_template.getDataToSave = this.getDataToSave;
795
+ }
796
+
797
+ if (window.elementor.settings.premium_page) {
798
+ window.elementor.settings.premium_page.getDataToSave = this.getDataToSave;
799
+ window.elementor.settings.premium_page.changeCallbacks = {
800
+ custom_header: function () {
801
+ this.save(function () {
802
+ elementor.reloadPreview();
803
+
804
+ elementor.once('preview:loaded', function () {
805
+ elementor.getPanelView().setPage('premium_page_settings');
806
+ });
807
+ });
808
+ },
809
+ custom_footer: function () {
810
+ this.save(function () {
811
+ elementor.reloadPreview();
812
+
813
+ elementor.once('preview:loaded', function () {
814
+ elementor.getPanelView().setPage('premium_page_settings');
815
+ });
816
+ });
817
+ }
818
+ };
819
+ }
820
+
821
+ }
822
+
823
+ };
824
+
825
+ PremiumEditor = {
826
+
827
+ modal: false,
828
+ layout: false,
829
+ collections: {},
830
+ tabs: {},
831
+ defaultTab: '',
832
+ channels: {},
833
+ atIndex: null,
834
+
835
+ init: function () {
836
+
837
+ window.elementor.on(
838
+ 'document:loaded',
839
+ window._.bind(PremiumEditor.onPreviewLoaded, PremiumEditor)
840
+ );
841
+
842
+ PremiumEditorViews.init();
843
+ PremiumControlsViews.init();
844
+ PremiumModules.init();
845
+
846
+ },
847
+
848
+ onPreviewLoaded: function () {
849
+
850
+ this.initPremTempsButton();
851
+
852
+ window.elementor.$previewContents.on(
853
+ 'click.addPremiumTemplate',
854
+ '.pa-add-section-btn',
855
+ _.bind(this.showTemplatesModal, this)
856
+ );
857
+
858
+ this.channels = {
859
+ templates: Backbone.Radio.channel('PREMIUM_EDITOR:templates'),
860
+ tabs: Backbone.Radio.channel('PREMIUM_EDITOR:tabs'),
861
+ layout: Backbone.Radio.channel('PREMIUM_EDITOR:layout'),
862
+ };
863
+
864
+ this.tabs = PremiumTempsData.tabs;
865
+ this.defaultTab = PremiumTempsData.defaultTab;
866
+
867
+ },
868
+
869
+ initPremTempsButton: function () {
870
+
871
+ var $addNewSection = window.elementor.$previewContents.find('.elementor-add-new-section'),
872
+ addPremiumTemplate = "<div class='elementor-add-section-area-button pa-add-section-btn' title='Add Premium Template'><i class='eicon-star'></i></div>",
873
+ $addPremiumTemplate;
874
+
875
+ if ($addNewSection.length && PremiumTempsData.PremiumTemplatesBtn) {
876
+ $addPremiumTemplate = $(addPremiumTemplate).prependTo($addNewSection);
877
+ }
878
+
879
+ window.elementor.$previewContents.on(
880
+ 'click.addPremiumTemplate',
881
+ '.elementor-editor-section-settings .elementor-editor-element-add',
882
+ function () {
883
+
884
+ var $this = $(this),
885
+ $section = $this.closest('.elementor-top-section'),
886
+ modelID = $section.data('model-cid');
887
+
888
+ if (elementor.previewView.collection.length) {
889
+ $.each(elementor.previewView.collection.models, function (index, model) {
890
+ if (modelID === model.cid) {
891
+ PremiumEditor.atIndex = index;
892
+ }
893
+ });
894
+ }
895
+
896
+ if (PremiumTempsData.PremiumTemplatesBtn) {
897
+ setTimeout(function () {
898
+ var $addNew = $section.prev('.elementor-add-section').find('.elementor-add-new-section');
899
+ $addNew.prepend(addPremiumTemplate);
900
+ }, 100);
901
+ }
902
+
903
+ }
904
+ );
905
+
906
+ },
907
+
908
+ getFilter: function (name) {
909
+
910
+ return this.channels.templates.request('filter:' + name);
911
+ },
912
+
913
+ setFilter: function (name, value) {
914
+ this.channels.templates.reply('filter:' + name, value);
915
+ this.channels.templates.trigger('filter:change');
916
+ },
917
+
918
+ getTab: function () {
919
+ return this.channels.tabs.request('filter:tabs');
920
+ },
921
+
922
+ setTab: function (value, silent) {
923
+
924
+ this.channels.tabs.reply('filter:tabs', value);
925
+
926
+ if (!silent) {
927
+ this.channels.tabs.trigger('filter:change');
928
+ }
929
+
930
+ },
931
+
932
+ getTabs: function () {
933
+
934
+ var tabs = [];
935
+
936
+ _.each(this.tabs, function (item, slug) {
937
+ tabs.push({
938
+ slug: slug,
939
+ title: item.title
940
+ });
941
+ });
942
+
943
+ return tabs;
944
+ },
945
+
946
+ getPreview: function (name) {
947
+ return this.channels.layout.request('preview');
948
+ },
949
+
950
+ setPreview: function (value, silent) {
951
+
952
+ this.channels.layout.reply('preview', value);
953
+
954
+ if (!silent) {
955
+ this.channels.layout.trigger('preview:change');
956
+ }
957
+ },
958
+
959
+ getKeywords: function () {
960
+
961
+ var keywords = [];
962
+
963
+ _.each(this.keywords, function (title, slug) {
964
+ tabs.push({
965
+ slug: slug,
966
+ title: title
967
+ });
968
+ });
969
+
970
+ return keywords;
971
+ },
972
+
973
+ showTemplatesModal: function () {
974
+
975
+ this.getModal().show();
976
+
977
+ if (!this.layout) {
978
+ this.layout = new PremiumEditorViews.ModalLayoutView();
979
+ this.layout.showLoadingView();
980
+ }
981
+
982
+ this.setTab(this.defaultTab, true);
983
+ this.requestTemplates(this.defaultTab);
984
+ this.setPreview('initial');
985
+
986
+ },
987
+
988
+ requestTemplates: function (tabName) {
989
+
990
+ var self = this,
991
+ tab = self.tabs[tabName];
992
+
993
+ self.setFilter('category', false);
994
+
995
+ if (tab.data.templates && tab.data.categories) {
996
+ self.layout.showTemplatesView(tab.data.templates, tab.data.categories, tab.data.keywords);
997
+ } else {
998
+ $.ajax({
999
+ url: ajaxurl,
1000
+ type: 'get',
1001
+ dataType: 'json',
1002
+ data: {
1003
+ action: 'premium_get_templates',
1004
+ tab: tabName
1005
+ },
1006
+ success: function (response) {
1007
+
1008
+ console.log("%cTemplates Retrieved Successfully!!", "color: #7a7a7a; background-color: #eee;");
1009
+
1010
+ var templates = new PremiumEditorViews.LibraryCollection(response.data.templates),
1011
+ categories = new PremiumEditorViews.CategoriesCollection(response.data.categories);
1012
+
1013
+ self.tabs[tabName].data = {
1014
+ templates: templates,
1015
+ categories: categories,
1016
+ keywords: response.data.keywords
1017
+ };
1018
+
1019
+ self.layout.showTemplatesView(templates, categories, response.data.keywords);
1020
+
1021
+ },
1022
+ error: function (err) {
1023
+ console.log(err);
1024
+ }
1025
+ });
1026
+ }
1027
+
1028
+ },
1029
+
1030
+ closeModal: function () {
1031
+ this.getModal().hide();
1032
+ },
1033
+
1034
+ getModal: function () {
1035
+
1036
+ if (!this.modal) {
1037
+ this.modal = elementor.dialogsManager.createWidget('lightbox', {
1038
+ id: 'premium-template-modal',
1039
+ className: 'elementor-templates-modal',
1040
+ closeButton: false
1041
+ });
1042
+ }
1043
+
1044
+ return this.modal;
1045
+
1046
+ }
1047
+
1048
+ };
1049
+
1050
+ $(window).on('elementor:init', PremiumEditor.init);
1051
+
1052
  })(jQuery);
assets/frontend/css/premium-addons-rtl.css CHANGED
@@ -8344,7 +8344,7 @@ ul[data-list-animation*="animated-"] .premium-bullet-list-divider-inline {
8344
  line-height: 1.3;
8345
  }
8346
 
8347
- .premium-woocommerce .woocommerce-loop-product__title {
8348
  margin-bottom: 0.5em;
8349
  font-size: 1em;
8350
  -webkit-transition: all 0.3s ease-in-out;
@@ -8999,7 +8999,7 @@ ul[data-list-animation*="animated-"] .premium-bullet-list-divider-inline {
8999
  .premium-woo-product-align-left .premium-woo-skin-grid-6 li.product .premium-woo-product-info .star-rating,
9000
  .premium-woo-product-align-right .premium-woo-skin-grid-7 li.product .premium-woo-product-info .star-rating,
9001
  .premium-woo-product-align-left .premium-woo-skin-grid-7 li.product .premium-woo-product-info .star-rating {
9002
- margin: 0;
9003
  }
9004
 
9005
  .premium-woo-skin-grid-6 li.product .premium-woo-product-info {
@@ -9162,17 +9162,13 @@ html.premium-woo-qv-opened body {
9162
  right: 0;
9163
  text-align: center;
9164
  padding: 30px;
9165
- -js-display: flex;
9166
- display: -webkit-box;
9167
- display: -webkit-flex;
9168
- display: -moz-box;
9169
- display: -ms-flexbox;
9170
- display: flex;
9171
- -webkit-box-align: center;
9172
- -webkit-align-items: center;
9173
- -moz-box-align: center;
9174
- -ms-flex-align: center;
9175
- align-items: center;
9176
  }
9177
 
9178
  #premium-woo-quick-view-modal .premium-woo-content-main {
@@ -9190,6 +9186,8 @@ html.premium-woo-qv-opened body {
9190
  transition: transform 0.5s, opacity 0.3s;
9191
  transition: transform 0.5s, opacity 0.3s, -webkit-transform 0.5s;
9192
  margin: 0 auto;
 
 
9193
  }
9194
 
9195
  #premium-woo-quick-view-modal .premium-woo-lightbox-content {
@@ -9367,6 +9365,25 @@ html.premium-woo-qv-opened body {
9367
  vertical-align: baseline;
9368
  }
9369
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9370
  .premium-error-notice {
9371
  width: 100%;
9372
  padding: 10px;
8344
  line-height: 1.3;
8345
  }
8346
 
8347
+ .premium-woocommerce .woocommerce-loop-product__title {
8348
  margin-bottom: 0.5em;
8349
  font-size: 1em;
8350
  -webkit-transition: all 0.3s ease-in-out;
8999
  .premium-woo-product-align-left .premium-woo-skin-grid-6 li.product .premium-woo-product-info .star-rating,
9000
  .premium-woo-product-align-right .premium-woo-skin-grid-7 li.product .premium-woo-product-info .star-rating,
9001
  .premium-woo-product-align-left .premium-woo-skin-grid-7 li.product .premium-woo-product-info .star-rating {
9002
+ margin: 0;
9003
  }
9004
 
9005
  .premium-woo-skin-grid-6 li.product .premium-woo-product-info {
9162
  right: 0;
9163
  text-align: center;
9164
  padding: 30px;
9165
+ }
9166
+
9167
+ #premium-woo-quick-view-modal .premium-woo-content-main-wrapper::before {
9168
+ content: "";
9169
+ display: inline-block;
9170
+ vertical-align: middle;
9171
+ height: 100%;
 
 
 
 
9172
  }
9173
 
9174
  #premium-woo-quick-view-modal .premium-woo-content-main {
9186
  transition: transform 0.5s, opacity 0.3s;
9187
  transition: transform 0.5s, opacity 0.3s, -webkit-transform 0.5s;
9188
  margin: 0 auto;
9189
+ display: inline-block;
9190
+ vertical-align: middle;
9191
  }
9192
 
9193
  #premium-woo-quick-view-modal .premium-woo-lightbox-content {
9365
  vertical-align: baseline;
9366
  }
9367
 
9368
+ @media (min-width: 545px) {
9369
+ #premium-woo-quick-view-content div.summary {
9370
+ content: "544";
9371
+ overflow-y: auto;
9372
+ }
9373
+ }
9374
+
9375
+ @media (max-width: 544px) {
9376
+ #premium-woo-quick-view-content .premium-woo-lightbox-content {
9377
+ display: block;
9378
+ }
9379
+
9380
+ #premium-woo-quick-view-content div.images,
9381
+ #premium-woo-quick-view-content div.summary {
9382
+ width: 100%;
9383
+ float: none;
9384
+ }
9385
+ }
9386
+
9387
  .premium-error-notice {
9388
  width: 100%;
9389
  padding: 10px;
assets/frontend/css/premium-addons.css CHANGED
@@ -7552,18 +7552,12 @@ html.premium-woo-qv-opened body {
7552
  top: 0;
7553
  left: 0;
7554
  text-align: center;
7555
- padding: 30px;
7556
- -js-display: flex;
7557
- display: -webkit-box;
7558
- display: -webkit-flex;
7559
- display: -moz-box;
7560
- display: -ms-flexbox;
7561
- display: flex;
7562
- -webkit-box-align: center;
7563
- -webkit-align-items: center;
7564
- -moz-box-align: center;
7565
- -ms-flex-align: center;
7566
- align-items: center; }
7567
  #premium-woo-quick-view-modal .premium-woo-content-main {
7568
  position: relative;
7569
  pointer-events: none;
@@ -7578,7 +7572,9 @@ html.premium-woo-qv-opened body {
7578
  transition: opacity 0.3s, -webkit-transform 0.5s;
7579
  transition: transform 0.5s, opacity 0.3s;
7580
  transition: transform 0.5s, opacity 0.3s, -webkit-transform 0.5s;
7581
- margin: 0 auto; }
 
 
7582
  #premium-woo-quick-view-modal .premium-woo-lightbox-content {
7583
  position: relative;
7584
  display: table;
@@ -7717,6 +7713,19 @@ html.premium-woo-qv-opened body {
7717
  margin-left: 5px;
7718
  vertical-align: baseline; }
7719
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7720
  .premium-error-notice {
7721
  width: 100%;
7722
  padding: 10px;
7552
  top: 0;
7553
  left: 0;
7554
  text-align: center;
7555
+ padding: 30px; }
7556
+ #premium-woo-quick-view-modal .premium-woo-content-main-wrapper::before {
7557
+ content: "";
7558
+ display: inline-block;
7559
+ vertical-align: middle;
7560
+ height: 100%; }
 
 
 
 
 
 
7561
  #premium-woo-quick-view-modal .premium-woo-content-main {
7562
  position: relative;
7563
  pointer-events: none;
7572
  transition: opacity 0.3s, -webkit-transform 0.5s;
7573
  transition: transform 0.5s, opacity 0.3s;
7574
  transition: transform 0.5s, opacity 0.3s, -webkit-transform 0.5s;
7575
+ margin: 0 auto;
7576
+ display: inline-block;
7577
+ vertical-align: middle; }
7578
  #premium-woo-quick-view-modal .premium-woo-lightbox-content {
7579
  position: relative;
7580
  display: table;
7713
  margin-left: 5px;
7714
  vertical-align: baseline; }
7715
 
7716
+ @media (min-width: 545px) {
7717
+ #premium-woo-quick-view-content div.summary {
7718
+ content: "544";
7719
+ overflow-y: auto; } }
7720
+
7721
+ @media (max-width: 544px) {
7722
+ #premium-woo-quick-view-content .premium-woo-lightbox-content {
7723
+ display: block; }
7724
+ #premium-woo-quick-view-content div.images,
7725
+ #premium-woo-quick-view-content div.summary {
7726
+ width: 100%;
7727
+ float: none; } }
7728
+
7729
  .premium-error-notice {
7730
  width: 100%;
7731
  padding: 10px;
assets/frontend/js/lottie.js CHANGED
@@ -1,15577 +1,15577 @@
1
- (function ($) {
2
-
3
- (typeof navigator !== "undefined") && (function (root, factory) {
4
-
5
- if (typeof define === "function" && define.amd) {
6
- define(function () {
7
- return factory(root);
8
- });
9
- } else if (typeof module === "object" && module.exports) {
10
- module.exports = factory(root);
11
- } else {
12
- root.lottie = factory(root);
13
- root.bodymovin = root.lottie;
14
- }
15
- }((window || {}), function (window) {
16
- "use strict";
17
- var svgNS = "http://www.w3.org/2000/svg";
18
-
19
- var locationHref = '';
20
-
21
- var initialDefaultFrame = -999999;
22
-
23
- var subframeEnabled = true;
24
- var expressionsPlugin;
25
- var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
26
- var cachedColors = {};
27
- var bm_rounder = Math.round;
28
- var bm_rnd;
29
- var bm_pow = Math.pow;
30
- var bm_sqrt = Math.sqrt;
31
- var bm_abs = Math.abs;
32
- var bm_floor = Math.floor;
33
- var bm_max = Math.max;
34
- var bm_min = Math.min;
35
- var blitter = 10;
36
-
37
- var BMMath = {};
38
- (function () {
39
- 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"];
40
- var i, len = propertyNames.length;
41
- for (i = 0; i < len; i += 1) {
42
- BMMath[propertyNames[i]] = Math[propertyNames[i]];
43
- }
44
- }());
45
-
46
- function ProjectInterface() {
47
- return {};
48
- }
49
-
50
- BMMath.random = Math.random;
51
- BMMath.abs = function (val) {
52
- var tOfVal = typeof val;
53
- if (tOfVal === 'object' && val.length) {
54
- var absArr = createSizedArray(val.length);
55
- var i, len = val.length;
56
- for (i = 0; i < len; i += 1) {
57
- absArr[i] = Math.abs(val[i]);
58
- }
59
- return absArr;
60
- }
61
- return Math.abs(val);
62
-
63
- };
64
- var defaultCurveSegments = 150;
65
- var degToRads = Math.PI / 180;
66
- var roundCorner = 0.5519;
67
-
68
- function roundValues(flag) {
69
- if (flag) {
70
- bm_rnd = Math.round;
71
- } else {
72
- bm_rnd = function (val) {
73
- return val;
74
- };
75
- }
76
- }
77
- roundValues(false);
78
-
79
- function styleDiv(element) {
80
- element.style.position = 'absolute';
81
- element.style.top = 0;
82
- element.style.left = 0;
83
- element.style.display = 'block';
84
- element.style.transformOrigin = element.style.webkitTransformOrigin = '0 0';
85
- element.style.backfaceVisibility = element.style.webkitBackfaceVisibility = 'visible';
86
- element.style.transformStyle = element.style.webkitTransformStyle = element.style.mozTransformStyle = "preserve-3d";
87
- }
88
-
89
- function BMEnterFrameEvent(type, currentTime, totalTime, frameMultiplier) {
90
- this.type = type;
91
- this.currentTime = currentTime;
92
- this.totalTime = totalTime;
93
- this.direction = frameMultiplier < 0 ? -1 : 1;
94
- }
95
-
96
- function BMCompleteEvent(type, frameMultiplier) {
97
- this.type = type;
98
- this.direction = frameMultiplier < 0 ? -1 : 1;
99
- }
100
-
101
- function BMCompleteLoopEvent(type, totalLoops, currentLoop, frameMultiplier) {
102
- this.type = type;
103
- this.currentLoop = currentLoop;
104
- this.totalLoops = totalLoops;
105
- this.direction = frameMultiplier < 0 ? -1 : 1;
106
- }
107
-
108
- function BMSegmentStartEvent(type, firstFrame, totalFrames) {
109
- this.type = type;
110
- this.firstFrame = firstFrame;
111
- this.totalFrames = totalFrames;
112
- }
113
-
114
- function BMDestroyEvent(type, target) {
115
- this.type = type;
116
- this.target = target;
117
- }
118
-
119
- function BMRenderFrameErrorEvent(nativeError, currentTime) {
120
- this.type = 'renderFrameError';
121
- this.nativeError = nativeError;
122
- this.currentTime = currentTime;
123
- }
124
-
125
- function BMConfigErrorEvent(nativeError) {
126
- this.type = 'configError';
127
- this.nativeError = nativeError;
128
- }
129
-
130
- function BMAnimationConfigErrorEvent(type, nativeError) {
131
- this.type = type;
132
- this.nativeError = nativeError;
133
- this.currentTime = currentTime;
134
- }
135
-
136
- var createElementID = (function () {
137
- var _count = 0;
138
- return function createID() {
139
- return '__lottie_element_' + ++_count
140
- }
141
- }())
142
-
143
- function HSVtoRGB(h, s, v) {
144
- var r, g, b, i, f, p, q, t;
145
- i = Math.floor(h * 6);
146
- f = h * 6 - i;
147
- p = v * (1 - s);
148
- q = v * (1 - f * s);
149
- t = v * (1 - (1 - f) * s);
150
- switch (i % 6) {
151
- case 0:
152
- r = v;
153
- g = t;
154
- b = p;
155
- break;
156
- case 1:
157
- r = q;
158
- g = v;
159
- b = p;
160
- break;
161
- case 2:
162
- r = p;
163
- g = v;
164
- b = t;
165
- break;
166
- case 3:
167
- r = p;
168
- g = q;
169
- b = v;
170
- break;
171
- case 4:
172
- r = t;
173
- g = p;
174
- b = v;
175
- break;
176
- case 5:
177
- r = v;
178
- g = p;
179
- b = q;
180
- break;
181
- }
182
- return [r,
183
- g,
184
- b
185
- ];
186
- }
187
-
188
- function RGBtoHSV(r, g, b) {
189
- var max = Math.max(r, g, b),
190
- min = Math.min(r, g, b),
191
- d = max - min,
192
- h,
193
- s = (max === 0 ? 0 : d / max),
194
- v = max / 255;
195
-
196
- switch (max) {
197
- case min:
198
- h = 0;
199
- break;
200
- case r:
201
- h = (g - b) + d * (g < b ? 6 : 0);
202
- h /= 6 * d;
203
- break;
204
- case g:
205
- h = (b - r) + d * 2;
206
- h /= 6 * d;
207
- break;
208
- case b:
209
- h = (r - g) + d * 4;
210
- h /= 6 * d;
211
- break;
212
- }
213
-
214
- return [
215
- h,
216
- s,
217
- v
218
- ];
219
- }
220
-
221
- function addSaturationToRGB(color, offset) {
222
- var hsv = RGBtoHSV(color[0] * 255, color[1] * 255, color[2] * 255);
223
- hsv[1] += offset;
224
- if (hsv[1] > 1) {
225
- hsv[1] = 1;
226
- } else if (hsv[1] <= 0) {
227
- hsv[1] = 0;
228
- }
229
- return HSVtoRGB(hsv[0], hsv[1], hsv[2]);
230
- }
231
-
232
- function addBrightnessToRGB(color, offset) {
233
- var hsv = RGBtoHSV(color[0] * 255, color[1] * 255, color[2] * 255);
234
- hsv[2] += offset;
235
- if (hsv[2] > 1) {
236
- hsv[2] = 1;
237
- } else if (hsv[2] < 0) {
238
- hsv[2] = 0;
239
- }
240
- return HSVtoRGB(hsv[0], hsv[1], hsv[2]);
241
- }
242
-
243
- function addHueToRGB(color, offset) {
244
- var hsv = RGBtoHSV(color[0] * 255, color[1] * 255, color[2] * 255);
245
- hsv[0] += offset / 360;
246
- if (hsv[0] > 1) {
247
- hsv[0] -= 1;
248
- } else if (hsv[0] < 0) {
249
- hsv[0] += 1;
250
- }
251
- return HSVtoRGB(hsv[0], hsv[1], hsv[2]);
252
- }
253
-
254
- var rgbToHex = (function () {
255
- var colorMap = [];
256
- var i;
257
- var hex;
258
- for (i = 0; i < 256; i += 1) {
259
- hex = i.toString(16);
260
- colorMap[i] = hex.length == 1 ? '0' + hex : hex;
261
- }
262
-
263
- return function (r, g, b) {
264
- if (r < 0) {
265
- r = 0;
266
- }
267
- if (g < 0) {
268
- g = 0;
269
- }
270
- if (b < 0) {
271
- b = 0;
272
- }
273
- return '#' + colorMap[r] + colorMap[g] + colorMap[b];
274
- };
275
- }());
276
-
277
- function BaseEvent() { }
278
- BaseEvent.prototype = {
279
- triggerEvent: function (eventName, args) {
280
- if (this._cbs[eventName]) {
281
- var len = this._cbs[eventName].length;
282
- for (var i = 0; i < len; i++) {
283
- this._cbs[eventName][i](args);
284
- }
285
- }
286
- },
287
- addEventListener: function (eventName, callback) {
288
- if (!this._cbs[eventName]) {
289
- this._cbs[eventName] = [];
290
- }
291
- this._cbs[eventName].push(callback);
292
-
293
- return function () {
294
- this.removeEventListener(eventName, callback);
295
- }.bind(this);
296
- },
297
- removeEventListener: function (eventName, callback) {
298
- if (!callback) {
299
- this._cbs[eventName] = null;
300
- } else if (this._cbs[eventName]) {
301
- var i = 0,
302
- len = this._cbs[eventName].length;
303
- while (i < len) {
304
- if (this._cbs[eventName][i] === callback) {
305
- this._cbs[eventName].splice(i, 1);
306
- i -= 1;
307
- len -= 1;
308
- }
309
- i += 1;
310
- }
311
- if (!this._cbs[eventName].length) {
312
- this._cbs[eventName] = null;
313
- }
314
- }
315
- }
316
- };
317
- var createTypedArray = (function () {
318
- function createRegularArray(type, len) {
319
- var i = 0,
320
- arr = [],
321
- value;
322
- switch (type) {
323
- case 'int16':
324
- case 'uint8c':
325
- value = 1;
326
- break;
327
- default:
328
- value = 1.1;
329
- break;
330
- }
331
- for (i = 0; i < len; i += 1) {
332
- arr.push(value);
333
- }
334
- return arr;
335
- }
336
-
337
- function createTypedArray(type, len) {
338
- if (type === 'float32') {
339
- return new Float32Array(len);
340
- } else if (type === 'int16') {
341
- return new Int16Array(len);
342
- } else if (type === 'uint8c') {
343
- return new Uint8ClampedArray(len);
344
- }
345
- }
346
- if (typeof Uint8ClampedArray === 'function' && typeof Float32Array === 'function') {
347
- return createTypedArray;
348
- } else {
349
- return createRegularArray;
350
- }
351
- }());
352
-
353
- function createSizedArray(len) {
354
- return Array.apply(null, {
355
- length: len
356
- });
357
- }
358
-
359
- function createNS(type) {
360
- //return {appendChild:function(){},setAttribute:function(){},style:{}}
361
- return document.createElementNS(svgNS, type);
362
- }
363
-
364
- function createTag(type) {
365
- //return {appendChild:function(){},setAttribute:function(){},style:{}}
366
- return document.createElement(type);
367
- }
368
-
369
- function DynamicPropertyContainer() { };
370
- DynamicPropertyContainer.prototype = {
371
- addDynamicProperty: function (prop) {
372
- if (this.dynamicProperties.indexOf(prop) === -1) {
373
- this.dynamicProperties.push(prop);
374
- this.container.addDynamicProperty(this);
375
- this._isAnimated = true;
376
- }
377
- },
378
- iterateDynamicProperties: function () {
379
- this._mdf = false;
380
- var i, len = this.dynamicProperties.length;
381
- for (i = 0; i < len; i += 1) {
382
- this.dynamicProperties[i].getValue();
383
- if (this.dynamicProperties[i]._mdf) {
384
- this._mdf = true;
385
- }
386
- }
387
- },
388
- initDynamicPropertyContainer: function (container) {
389
- this.container = container;
390
- this.dynamicProperties = [];
391
- this._mdf = false;
392
- this._isAnimated = false;
393
- }
394
- }
395
- var getBlendMode = (function () {
396
-
397
- var blendModeEnums = {
398
- 0: 'source-over',
399
- 1: 'multiply',
400
- 2: 'screen',
401
- 3: 'overlay',
402
- 4: 'darken',
403
- 5: 'lighten',
404
- 6: 'color-dodge',
405
- 7: 'color-burn',
406
- 8: 'hard-light',
407
- 9: 'soft-light',
408
- 10: 'difference',
409
- 11: 'exclusion',
410
- 12: 'hue',
411
- 13: 'saturation',
412
- 14: 'color',
413
- 15: 'luminosity'
414
- }
415
-
416
- return function (mode) {
417
- return blendModeEnums[mode] || '';
418
- }
419
- }())
420
- /*!
421
- Transformation Matrix v2.0
422
- (c) Epistemex 2014-2015
423
- www.epistemex.com
424
- By Ken Fyrstenberg
425
- Contributions by leeoniya.
426
- License: MIT, header required.
427
- */
428
-
429
- /**
430
- * 2D transformation matrix object initialized with identity matrix.
431
- *
432
- * The matrix can synchronize a canvas context by supplying the context
433
- * as an argument, or later apply current absolute transform to an
434
- * existing context.
435
- *
436
- * All values are handled as floating point values.
437
- *
438
- * @param {CanvasRenderingContext2D} [context] - Optional context to sync with Matrix
439
- * @prop {number} a - scale x
440
- * @prop {number} b - shear y
441
- * @prop {number} c - shear x
442
- * @prop {number} d - scale y
443
- * @prop {number} e - translate x
444
- * @prop {number} f - translate y
445
- * @prop {CanvasRenderingContext2D|null} [context=null] - set or get current canvas context
446
- * @constructor
447
- */
448
-
449
- var Matrix = (function () {
450
-
451
- var _cos = Math.cos;
452
- var _sin = Math.sin;
453
- var _tan = Math.tan;
454
- var _rnd = Math.round;
455
-
456
- function reset() {
457
- this.props[0] = 1;
458
- this.props[1] = 0;
459
- this.props[2] = 0;
460
- this.props[3] = 0;
461
- this.props[4] = 0;
462
- this.props[5] = 1;
463
- this.props[6] = 0;
464
- this.props[7] = 0;
465
- this.props[8] = 0;
466
- this.props[9] = 0;
467
- this.props[10] = 1;
468
- this.props[11] = 0;
469
- this.props[12] = 0;
470
- this.props[13] = 0;
471
- this.props[14] = 0;
472
- this.props[15] = 1;
473
- return this;
474
- }
475
-
476
- function rotate(angle) {
477
- if (angle === 0) {
478
- return this;
479
- }
480
- var mCos = _cos(angle);
481
- var mSin = _sin(angle);
482
- return this._t(mCos, -mSin, 0, 0, mSin, mCos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
483
- }
484
-
485
- function rotateX(angle) {
486
- if (angle === 0) {
487
- return this;
488
- }
489
- var mCos = _cos(angle);
490
- var mSin = _sin(angle);
491
- return this._t(1, 0, 0, 0, 0, mCos, -mSin, 0, 0, mSin, mCos, 0, 0, 0, 0, 1);
492
- }
493
-
494
- function rotateY(angle) {
495
- if (angle === 0) {
496
- return this;
497
- }
498
- var mCos = _cos(angle);
499
- var mSin = _sin(angle);
500
- return this._t(mCos, 0, mSin, 0, 0, 1, 0, 0, -mSin, 0, mCos, 0, 0, 0, 0, 1);
501
- }
502
-
503
- function rotateZ(angle) {
504
- if (angle === 0) {
505
- return this;
506
- }
507
- var mCos = _cos(angle);
508
- var mSin = _sin(angle);
509
- return this._t(mCos, -mSin, 0, 0, mSin, mCos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
510
- }
511
-
512
- function shear(sx, sy) {
513
- return this._t(1, sy, sx, 1, 0, 0);
514
- }
515
-
516
- function skew(ax, ay) {
517
- return this.shear(_tan(ax), _tan(ay));
518
- }
519
-
520
- function skewFromAxis(ax, angle) {
521
- var mCos = _cos(angle);
522
- var mSin = _sin(angle);
523
- return this._t(mCos, mSin, 0, 0, -mSin, mCos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
524
- ._t(1, 0, 0, 0, _tan(ax), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
525
- ._t(mCos, -mSin, 0, 0, mSin, mCos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
526
- //return this._t(mCos, mSin, -mSin, mCos, 0, 0)._t(1, 0, _tan(ax), 1, 0, 0)._t(mCos, -mSin, mSin, mCos, 0, 0);
527
- }
528
-
529
- function scale(sx, sy, sz) {
530
- if (!sz && sz !== 0) {
531
- sz = 1;
532
- }
533
- if (sx === 1 && sy === 1 && sz === 1) {
534
- return this;
535
- }
536
- return this._t(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1);
537
- }
538
-
539
- function setTransform(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p) {
540
- this.props[0] = a;
541
- this.props[1] = b;
542
- this.props[2] = c;
543
- this.props[3] = d;
544
- this.props[4] = e;
545
- this.props[5] = f;
546
- this.props[6] = g;
547
- this.props[7] = h;
548
- this.props[8] = i;
549
- this.props[9] = j;
550
- this.props[10] = k;
551
- this.props[11] = l;
552
- this.props[12] = m;
553
- this.props[13] = n;
554
- this.props[14] = o;
555
- this.props[15] = p;
556
- return this;
557
- }
558
-
559
- function translate(tx, ty, tz) {
560
- tz = tz || 0;
561
- if (tx !== 0 || ty !== 0 || tz !== 0) {
562
- return this._t(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, tx, ty, tz, 1);
563
- }
564
- return this;
565
- }
566
-
567
- function transform(a2, b2, c2, d2, e2, f2, g2, h2, i2, j2, k2, l2, m2, n2, o2, p2) {
568
-
569
- var _p = this.props;
570
-
571
- 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) {
572
- //NOTE: commenting this condition because TurboFan deoptimizes code when present
573
- //if(m2 !== 0 || n2 !== 0 || o2 !== 0){
574
- _p[12] = _p[12] * a2 + _p[15] * m2;
575
- _p[13] = _p[13] * f2 + _p[15] * n2;
576
- _p[14] = _p[14] * k2 + _p[15] * o2;
577
- _p[15] = _p[15] * p2;
578
- //}
579
- this._identityCalculated = false;
580
- return this;
581
- }
582
-
583
- var a1 = _p[0];
584
- var b1 = _p[1];
585
- var c1 = _p[2];
586
- var d1 = _p[3];
587
- var e1 = _p[4];
588
- var f1 = _p[5];
589
- var g1 = _p[6];
590
- var h1 = _p[7];
591
- var i1 = _p[8];
592
- var j1 = _p[9];
593
- var k1 = _p[10];
594
- var l1 = _p[11];
595
- var m1 = _p[12];
596
- var n1 = _p[13];
597
- var o1 = _p[14];
598
- var p1 = _p[15];
599
-
600
- /* matrix order (canvas compatible):
601
- * ace
602
- * bdf
603
- * 001
604
- */
605
- _p[0] = a1 * a2 + b1 * e2 + c1 * i2 + d1 * m2;
606
- _p[1] = a1 * b2 + b1 * f2 + c1 * j2 + d1 * n2;
607
- _p[2] = a1 * c2 + b1 * g2 + c1 * k2 + d1 * o2;
608
- _p[3] = a1 * d2 + b1 * h2 + c1 * l2 + d1 * p2;
609
-
610
- _p[4] = e1 * a2 + f1 * e2 + g1 * i2 + h1 * m2;
611
- _p[5] = e1 * b2 + f1 * f2 + g1 * j2 + h1 * n2;
612
- _p[6] = e1 * c2 + f1 * g2 + g1 * k2 + h1 * o2;
613
- _p[7] = e1 * d2 + f1 * h2 + g1 * l2 + h1 * p2;
614
-
615
- _p[8] = i1 * a2 + j1 * e2 + k1 * i2 + l1 * m2;
616
- _p[9] = i1 * b2 + j1 * f2 + k1 * j2 + l1 * n2;
617
- _p[10] = i1 * c2 + j1 * g2 + k1 * k2 + l1 * o2;
618
- _p[11] = i1 * d2 + j1 * h2 + k1 * l2 + l1 * p2;
619
-
620
- _p[12] = m1 * a2 + n1 * e2 + o1 * i2 + p1 * m2;
621
- _p[13] = m1 * b2 + n1 * f2 + o1 * j2 + p1 * n2;
622
- _p[14] = m1 * c2 + n1 * g2 + o1 * k2 + p1 * o2;
623
- _p[15] = m1 * d2 + n1 * h2 + o1 * l2 + p1 * p2;
624
-
625
- this._identityCalculated = false;
626
- return this;
627
- }
628
-
629
- function isIdentity() {
630
- if (!this._identityCalculated) {
631
- 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);
632
- this._identityCalculated = true;
633
- }
634
- return this._identity;
635
- }
636
-
637
- function equals(matr) {
638
- var i = 0;
639
- while (i < 16) {
640
- if (matr.props[i] !== this.props[i]) {
641
- return false;
642
- }
643
- i += 1;
644
- }
645
- return true;
646
- }
647
-
648
- function clone(matr) {
649
- var i;
650
- for (i = 0; i < 16; i += 1) {
651
- matr.props[i] = this.props[i];
652
- }
653
- }
654
-
655
- function cloneFromProps(props) {
656
- var i;
657
- for (i = 0; i < 16; i += 1) {
658
- this.props[i] = props[i];
659
- }
660
- }
661
-
662
- function applyToPoint(x, y, z) {
663
-
664
- return {
665
- x: x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12],
666
- y: x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13],
667
- z: x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14]
668
- };
669
- /*return {
670
- x: x * me.a + y * me.c + me.e,
671
- y: x * me.b + y * me.d + me.f
672
- };*/
673
- }
674
-
675
- function applyToX(x, y, z) {
676
- return x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12];
677
- }
678
-
679
- function applyToY(x, y, z) {
680
- return x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13];
681
- }
682
-
683
- function applyToZ(x, y, z) {
684
- return x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14];
685
- }
686
-
687
- function getInverseMatrix() {
688
- var determinant = this.props[0] * this.props[5] - this.props[1] * this.props[4];
689
- var a = this.props[5] / determinant;
690
- var b = -this.props[1] / determinant;
691
- var c = -this.props[4] / determinant;
692
- var d = this.props[0] / determinant;
693
- var e = (this.props[4] * this.props[13] - this.props[5] * this.props[12]) / determinant;
694
- var f = -(this.props[0] * this.props[13] - this.props[1] * this.props[12]) / determinant;
695
- var inverseMatrix = new Matrix();
696
- inverseMatrix.props[0] = a;
697
- inverseMatrix.props[1] = b;
698
- inverseMatrix.props[4] = c;
699
- inverseMatrix.props[5] = d;
700
- inverseMatrix.props[12] = e;
701
- inverseMatrix.props[13] = f;
702
- return inverseMatrix;
703
- }
704
-
705
- function inversePoint(pt) {
706
- var inverseMatrix = this.getInverseMatrix();
707
- return inverseMatrix.applyToPointArray(pt[0], pt[1], pt[2] || 0)
708
- }
709
-
710
- function inversePoints(pts) {
711
- var i, len = pts.length,
712
- retPts = [];
713
- for (i = 0; i < len; i += 1) {
714
- retPts[i] = inversePoint(pts[i]);
715
- }
716
- return retPts;
717
- }
718
-
719
- function applyToTriplePoints(pt1, pt2, pt3) {
720
- var arr = createTypedArray('float32', 6);
721
- if (this.isIdentity()) {
722
- arr[0] = pt1[0];
723
- arr[1] = pt1[1];
724
- arr[2] = pt2[0];
725
- arr[3] = pt2[1];
726
- arr[4] = pt3[0];
727
- arr[5] = pt3[1];
728
- } else {
729
- var p0 = this.props[0],
730
- p1 = this.props[1],
731
- p4 = this.props[4],
732
- p5 = this.props[5],
733
- p12 = this.props[12],
734
- p13 = this.props[13];
735
- arr[0] = pt1[0] * p0 + pt1[1] * p4 + p12;
736
- arr[1] = pt1[0] * p1 + pt1[1] * p5 + p13;
737
- arr[2] = pt2[0] * p0 + pt2[1] * p4 + p12;
738
- arr[3] = pt2[0] * p1 + pt2[1] * p5 + p13;
739
- arr[4] = pt3[0] * p0 + pt3[1] * p4 + p12;
740
- arr[5] = pt3[0] * p1 + pt3[1] * p5 + p13;
741
- }
742
- return arr;
743
- }
744
-
745
- function applyToPointArray(x, y, z) {
746
- var arr;
747
- if (this.isIdentity()) {
748
- arr = [x, y, z];
749
- } else {
750
- 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]];
751
- }
752
- return arr;
753
- }
754
-
755
- function applyToPointStringified(x, y) {
756
- if (this.isIdentity()) {
757
- return x + ',' + y;
758
- }
759
- var _p = this.props;
760
- 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;
761
- }
762
-
763
- function toCSS() {
764
- //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.
765
- /*if(this.isIdentity()) {
766
- return '';
767
- }*/
768
- var i = 0;
769
- var props = this.props;
770
- var cssValue = 'matrix3d(';
771
- var v = 10000;
772
- while (i < 16) {
773
- cssValue += _rnd(props[i] * v) / v;
774
- cssValue += i === 15 ? ')' : ',';
775
- i += 1;
776
- }
777
- return cssValue;
778
- }
779
-
780
- function roundMatrixProperty(val) {
781
- var v = 10000;
782
- if ((val < 0.000001 && val > 0) || (val > -0.000001 && val < 0)) {
783
- return _rnd(val * v) / v;
784
- }
785
- return val;
786
- }
787
-
788
- function to2dCSS() {
789
- //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.
790
- /*if(this.isIdentity()) {
791
- return '';
792
- }*/
793
- var props = this.props;
794
- var _a = roundMatrixProperty(props[0]);
795
- var _b = roundMatrixProperty(props[1]);
796
- var _c = roundMatrixProperty(props[4]);
797
- var _d = roundMatrixProperty(props[5]);
798
- var _e = roundMatrixProperty(props[12]);
799
- var _f = roundMatrixProperty(props[13]);
800
- return "matrix(" + _a + ',' + _b + ',' + _c + ',' + _d + ',' + _e + ',' + _f + ")";
801
- }
802
-
803
- return function () {
804
- this.reset = reset;
805
- this.rotate = rotate;
806
- this.rotateX = rotateX;
807
- this.rotateY = rotateY;
808
- this.rotateZ = rotateZ;
809
- this.skew = skew;
810
- this.skewFromAxis = skewFromAxis;
811
- this.shear = shear;
812
- this.scale = scale;
813
- this.setTransform = setTransform;
814
- this.translate = translate;
815
- this.transform = transform;
816
- this.applyToPoint = applyToPoint;
817
- this.applyToX = applyToX;
818
- this.applyToY = applyToY;
819
- this.applyToZ = applyToZ;
820
- this.applyToPointArray = applyToPointArray;
821
- this.applyToTriplePoints = applyToTriplePoints;
822
- this.applyToPointStringified = applyToPointStringified;
823
- this.toCSS = toCSS;
824
- this.to2dCSS = to2dCSS;
825
- this.clone = clone;
826
- this.cloneFromProps = cloneFromProps;
827
- this.equals = equals;
828
- this.inversePoints = inversePoints;
829
- this.inversePoint = inversePoint;
830
- this.getInverseMatrix = getInverseMatrix;
831
- this._t = this.transform;
832
- this.isIdentity = isIdentity;
833
- this._identity = true;
834
- this._identityCalculated = false;
835
-
836
- this.props = createTypedArray('float32', 16);
837
- this.reset();
838
- };
839
- }());
840
-
841
- /*
842
- Copyright 2014 David Bau.
843
-
844
- Permission is hereby granted, free of charge, to any person obtaining
845
- a copy of this software and associated documentation files (the
846
- "Software"), to deal in the Software without restriction, including
847
- without limitation the rights to use, copy, modify, merge, publish,
848
- distribute, sublicense, and/or sell copies of the Software, and to
849
- permit persons to whom the Software is furnished to do so, subject to
850
- the following conditions:
851
-
852
- The above copyright notice and this permission notice shall be
853
- included in all copies or substantial portions of the Software.
854
-
855
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
856
- EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
857
- MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
858
- IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
859
- CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
860
- TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
861
- SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
862
-
863
- */
864
-
865
- (function (pool, math) {
866
- //
867
- // The following constants are related to IEEE 754 limits.
868
- //
869
- var global = this,
870
- width = 256, // each RC4 output is 0 <= x < 256
871
- chunks = 6, // at least six RC4 outputs for each double
872
- digits = 52, // there are 52 significant digits in a double
873
- rngname = 'random', // rngname: name for Math.random and Math.seedrandom
874
- startdenom = math.pow(width, chunks),
875
- significance = math.pow(2, digits),
876
- overflow = significance * 2,
877
- mask = width - 1,
878
- nodecrypto; // node.js crypto module, initialized at the bottom.
879
-
880
- //
881
- // seedrandom()
882
- // This is the seedrandom function described above.
883
- //
884
- function seedrandom(seed, options, callback) {
885
- var key = [];
886
- options = (options === true) ? {
887
- entropy: true
888
- } : (options || {});
889
-
890
- // Flatten the seed string or build one from local entropy if needed.
891
- var shortseed = mixkey(flatten(
892
- options.entropy ? [seed, tostring(pool)] :
893
- (seed === null) ? autoseed() : seed, 3), key);
894
-
895
- // Use the seed to initialize an ARC4 generator.
896
- var arc4 = new ARC4(key);
897
-
898
- // This function returns a random double in [0, 1) that contains
899
- // randomness in every bit of the mantissa of the IEEE 754 value.
900
- var prng = function () {
901
- var n = arc4.g(chunks), // Start with a numerator n < 2 ^ 48
902
- d = startdenom, // and denominator d = 2 ^ 48.
903
- x = 0; // and no 'extra last byte'.
904
- while (n < significance) { // Fill up all significant digits by
905
- n = (n + x) * width; // shifting numerator and
906
- d *= width; // denominator and generating a
907
- x = arc4.g(1); // new least-significant-byte.
908
- }
909
- while (n >= overflow) { // To avoid rounding up, before adding
910
- n /= 2; // last byte, shift everything
911
- d /= 2; // right using integer math until
912
- x >>>= 1; // we have exactly the desired bits.
913
- }
914
- return (n + x) / d; // Form the number within [0, 1).
915
- };
916
-
917
- prng.int32 = function () {
918
- return arc4.g(4) | 0;
919
- };
920
- prng.quick = function () {
921
- return arc4.g(4) / 0x100000000;
922
- };
923
- prng.double = prng;
924
-
925
- // Mix the randomness into accumulated entropy.
926
- mixkey(tostring(arc4.S), pool);
927
-
928
- // Calling convention: what to return as a function of prng, seed, is_math.
929
- return (options.pass || callback ||
930
- function (prng, seed, is_math_call, state) {
931
- if (state) {
932
- // Load the arc4 state from the given state if it has an S array.
933
- if (state.S) {
934
- copy(state, arc4);
935
- }
936
- // Only provide the .state method if requested via options.state.
937
- prng.state = function () {
938
- return copy(arc4, {});
939
- };
940
- }
941
-
942
- // If called as a method of Math (Math.seedrandom()), mutate
943
- // Math.random because that is how seedrandom.js has worked since v1.0.
944
- if (is_math_call) {
945
- math[rngname] = prng;
946
- return seed;
947
- }
948
-
949
- // Otherwise, it is a newer calling convention, so return the
950
- // prng directly.
951
- else return prng;
952
- })(
953
- prng,
954
- shortseed,
955
- 'global' in options ? options.global : (this == math),
956
- options.state);
957
- }
958
- math['seed' + rngname] = seedrandom;
959
-
960
- //
961
- // ARC4
962
- //
963
- // An ARC4 implementation. The constructor takes a key in the form of
964
- // an array of at most (width) integers that should be 0 <= x < (width).
965
- //
966
- // The g(count) method returns a pseudorandom integer that concatenates
967
- // the next (count) outputs from ARC4. Its return value is a number x
968
- // that is in the range 0 <= x < (width ^ count).
969
- //
970
- function ARC4(key) {
971
- var t, keylen = key.length,
972
- me = this,
973
- i = 0,
974
- j = me.i = me.j = 0,
975
- s = me.S = [];
976
-
977
- // The empty key [] is treated as [0].
978
- if (!keylen) {
979
- key = [keylen++];
980
- }
981
-
982
- // Set up S using the standard key scheduling algorithm.
983
- while (i < width) {
984
- s[i] = i++;
985
- }
986
- for (i = 0; i < width; i++) {
987
- s[i] = s[j = mask & (j + key[i % keylen] + (t = s[i]))];
988
- s[j] = t;
989
- }
990
-
991
- // The "g" method returns the next (count) outputs as one number.
992
- me.g = function (count) {
993
- // Using instance members instead of closure state nearly doubles speed.
994
- var t, r = 0,
995
- i = me.i,
996
- j = me.j,
997
- s = me.S;
998
- while (count--) {
999
- t = s[i = mask & (i + 1)];
1000
- r = r * width + s[mask & ((s[i] = s[j = mask & (j + t)]) + (s[j] = t))];
1001
- }
1002
- me.i = i;
1003
- me.j = j;
1004
- return r;
1005
- // For robust unpredictability, the function call below automatically
1006
- // discards an initial batch of values. This is called RC4-drop[256].
1007
- // See http://google.com/search?q=rsa+fluhrer+response&btnI
1008
- };
1009
- }
1010
-
1011
- //
1012
- // copy()
1013
- // Copies internal state of ARC4 to or from a plain object.
1014
- //
1015
- function copy(f, t) {
1016
- t.i = f.i;
1017
- t.j = f.j;
1018
- t.S = f.S.slice();
1019
- return t;
1020
- }
1021
-
1022
- //
1023
- // flatten()
1024
- // Converts an object tree to nested arrays of strings.
1025
- //
1026
- function flatten(obj, depth) {
1027
- var result = [],
1028
- typ = (typeof obj),
1029
- prop;
1030
- if (depth && typ == 'object') {
1031
- for (prop in obj) {
1032
- try {
1033
- result.push(flatten(obj[prop], depth - 1));
1034
- } catch (e) { }
1035
- }
1036
- }
1037
- return (result.length ? result : typ == 'string' ? obj : obj + '\0');
1038
- }
1039
-
1040
- //
1041
- // mixkey()
1042
- // Mixes a string seed into a key that is an array of integers, and
1043
- // returns a shortened string seed that is equivalent to the result key.
1044
- //
1045
- function mixkey(seed, key) {
1046
- var stringseed = seed + '',
1047
- smear, j = 0;
1048
- while (j < stringseed.length) {
1049
- key[mask & j] =
1050
- mask & ((smear ^= key[mask & j] * 19) + stringseed.charCodeAt(j++));
1051
- }
1052
- return tostring(key);
1053
- }
1054
-
1055
- //
1056
- // autoseed()
1057
- // Returns an object for autoseeding, using window.crypto and Node crypto
1058
- // module if available.
1059
- //
1060
- function autoseed() {
1061
- try {
1062
- if (nodecrypto) {
1063
- return tostring(nodecrypto.randomBytes(width));
1064
- }
1065
- var out = new Uint8Array(width);
1066
- (global.crypto || global.msCrypto).getRandomValues(out);
1067
- return tostring(out);
1068
- } catch (e) {
1069
- var browser = global.navigator,
1070
- plugins = browser && browser.plugins;
1071
- return [+new Date(), global, plugins, global.screen, tostring(pool)];
1072
- }
1073
- }
1074
-
1075
- //
1076
- // tostring()
1077
- // Converts an array of charcodes to a string
1078
- //
1079
- function tostring(a) {
1080
- return String.fromCharCode.apply(0, a);
1081
- }
1082
-
1083
- //
1084
- // When seedrandom.js is loaded, we immediately mix a few bits
1085
- // from the built-in RNG into the entropy pool. Because we do
1086
- // not want to interfere with deterministic PRNG state later,
1087
- // seedrandom will not call math.random on its own again after
1088
- // initialization.
1089
- //
1090
- mixkey(math.random(), pool);
1091
-
1092
- //
1093
- // Nodejs and AMD support: export the implementation as a module using
1094
- // either convention.
1095
- //
1096
-
1097
- // End anonymous scope, and pass initial values.
1098
- })(
1099
- [], // pool: entropy pool starts empty
1100
- BMMath // math: package containing random, pow, and seedrandom
1101
- );
1102
- var BezierFactory = (function () {
1103
- /**
1104
- * BezierEasing - use bezier curve for transition easing function
1105
- * by Gaëtan Renaudeau 2014 - 2015 – MIT License
1106
- *
1107
- * Credits: is based on Firefox's nsSMILKeySpline.cpp
1108
- * Usage:
1109
- * var spline = BezierEasing([ 0.25, 0.1, 0.25, 1.0 ])
1110
- * spline.get(x) => returns the easing value | x must be in [0, 1] range
1111
- *
1112
- */
1113
-
1114
- var ob = {};
1115
- ob.getBezierEasing = getBezierEasing;
1116
- var beziers = {};
1117
-
1118
- function getBezierEasing(a, b, c, d, nm) {
1119
- var str = nm || ('bez_' + a + '_' + b + '_' + c + '_' + d).replace(/\./g, 'p');
1120
- if (beziers[str]) {
1121
- return beziers[str];
1122
- }
1123
- var bezEasing = new BezierEasing([a, b, c, d]);
1124
- beziers[str] = bezEasing;
1125
- return bezEasing;
1126
- }
1127
-
1128
- // These values are established by empiricism with tests (tradeoff: performance VS precision)
1129
- var NEWTON_ITERATIONS = 4;
1130
- var NEWTON_MIN_SLOPE = 0.001;
1131
- var SUBDIVISION_PRECISION = 0.0000001;
1132
- var SUBDIVISION_MAX_ITERATIONS = 10;
1133
-
1134
- var kSplineTableSize = 11;
1135
- var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
1136
-
1137
- var float32ArraySupported = typeof Float32Array === "function";
1138
-
1139
- function A(aA1, aA2) {
1140
- return 1.0 - 3.0 * aA2 + 3.0 * aA1;
1141
- }
1142
-
1143
- function B(aA1, aA2) {
1144
- return 3.0 * aA2 - 6.0 * aA1;
1145
- }
1146
-
1147
- function C(aA1) {
1148
- return 3.0 * aA1;
1149
- }
1150
-
1151
- // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
1152
- function calcBezier(aT, aA1, aA2) {
1153
- return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT;
1154
- }
1155
-
1156
- // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
1157
- function getSlope(aT, aA1, aA2) {
1158
- return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
1159
- }
1160
-
1161
- function binarySubdivide(aX, aA, aB, mX1, mX2) {
1162
- var currentX, currentT, i = 0;
1163
- do {
1164
- currentT = aA + (aB - aA) / 2.0;
1165
- currentX = calcBezier(currentT, mX1, mX2) - aX;
1166
- if (currentX > 0.0) {
1167
- aB = currentT;
1168
- } else {
1169
- aA = currentT;
1170
- }
1171
- } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
1172
- return currentT;
1173
- }
1174
-
1175
- function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {
1176
- for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
1177
- var currentSlope = getSlope(aGuessT, mX1, mX2);
1178
- if (currentSlope === 0.0) return aGuessT;
1179
- var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
1180
- aGuessT -= currentX / currentSlope;
1181
- }
1182
- return aGuessT;
1183
- }
1184
-
1185
- /**
1186
- * points is an array of [ mX1, mY1, mX2, mY2 ]
1187
- */
1188
- function BezierEasing(points) {
1189
- this._p = points;
1190
- this._mSampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
1191
- this._precomputed = false;
1192
-
1193
- this.get = this.get.bind(this);
1194
- }
1195
-
1196
- BezierEasing.prototype = {
1197
-
1198
- get: function (x) {
1199
- var mX1 = this._p[0],
1200
- mY1 = this._p[1],
1201
- mX2 = this._p[2],
1202
- mY2 = this._p[3];
1203
- if (!this._precomputed) this._precompute();
1204
- if (mX1 === mY1 && mX2 === mY2) return x; // linear
1205
- // Because JavaScript number are imprecise, we should guarantee the extremes are right.
1206
- if (x === 0) return 0;
1207
- if (x === 1) return 1;
1208
- return calcBezier(this._getTForX(x), mY1, mY2);
1209
- },
1210
-
1211
- // Private part
1212
-
1213
- _precompute: function () {
1214
- var mX1 = this._p[0],
1215
- mY1 = this._p[1],
1216
- mX2 = this._p[2],
1217
- mY2 = this._p[3];
1218
- this._precomputed = true;
1219
- if (mX1 !== mY1 || mX2 !== mY2)
1220
- this._calcSampleValues();
1221
- },
1222
-
1223
- _calcSampleValues: function () {
1224
- var mX1 = this._p[0],
1225
- mX2 = this._p[2];
1226
- for (var i = 0; i < kSplineTableSize; ++i) {
1227
- this._mSampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
1228
- }
1229
- },
1230
-
1231
- /**
1232
- * getTForX chose the fastest heuristic to determine the percentage value precisely from a given X projection.
1233
- */
1234
- _getTForX: function (aX) {
1235
- var mX1 = this._p[0],
1236
- mX2 = this._p[2],
1237
- mSampleValues = this._mSampleValues;
1238
-
1239
- var intervalStart = 0.0;
1240
- var currentSample = 1;
1241
- var lastSample = kSplineTableSize - 1;
1242
-
1243
- for (; currentSample !== lastSample && mSampleValues[currentSample] <= aX; ++currentSample) {
1244
- intervalStart += kSampleStepSize;
1245
- }
1246
- --currentSample;
1247
-
1248
- // Interpolate to provide an initial guess for t
1249
- var dist = (aX - mSampleValues[currentSample]) / (mSampleValues[currentSample + 1] - mSampleValues[currentSample]);
1250
- var guessForT = intervalStart + dist * kSampleStepSize;
1251
-
1252
- var initialSlope = getSlope(guessForT, mX1, mX2);
1253
- if (initialSlope >= NEWTON_MIN_SLOPE) {
1254
- return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
1255
- } else if (initialSlope === 0.0) {
1256
- return guessForT;
1257
- } else {
1258
- return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
1259
- }
1260
- }
1261
- };
1262
-
1263
- return ob;
1264
-
1265
- }());
1266
- (function () {
1267
- var lastTime = 0;
1268
- var vendors = ['ms', 'moz', 'webkit', 'o'];
1269
- for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
1270
- window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
1271
- window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
1272
- }
1273
- if (!window.requestAnimationFrame)
1274
- window.requestAnimationFrame = function (callback, element) {
1275
- var currTime = new Date().getTime();
1276
- var timeToCall = Math.max(0, 16 - (currTime - lastTime));
1277
- var id = setTimeout(function () {
1278
- callback(currTime + timeToCall);
1279
- },
1280
- timeToCall);
1281
- lastTime = currTime + timeToCall;
1282
- return id;
1283
- };
1284
- if (!window.cancelAnimationFrame)
1285
- window.cancelAnimationFrame = function (id) {
1286
- clearTimeout(id);
1287
- };
1288
- }());
1289
-
1290
- function extendPrototype(sources, destination) {
1291
- var i, len = sources.length,
1292
- sourcePrototype;
1293
- for (i = 0; i < len; i += 1) {
1294
- sourcePrototype = sources[i].prototype;
1295
- for (var attr in sourcePrototype) {
1296
- if (sourcePrototype.hasOwnProperty(attr)) destination.prototype[attr] = sourcePrototype[attr];
1297
- }
1298
- }
1299
- }
1300
-
1301
- function getDescriptor(object, prop) {
1302
- return Object.getOwnPropertyDescriptor(object, prop);
1303
- }
1304
-
1305
- function createProxyFunction(prototype) {
1306
- function ProxyFunction() { }
1307
- ProxyFunction.prototype = prototype;
1308
- return ProxyFunction;
1309
- }
1310
-
1311
- function bezFunction() {
1312
-
1313
- var easingFunctions = [];
1314
- var math = Math;
1315
-
1316
- function pointOnLine2D(x1, y1, x2, y2, x3, y3) {
1317
- var det1 = (x1 * y2) + (y1 * x3) + (x2 * y3) - (x3 * y2) - (y3 * x1) - (x2 * y1);
1318
- return det1 > -0.001 && det1 < 0.001;
1319
- }
1320
-
1321
- function pointOnLine3D(x1, y1, z1, x2, y2, z2, x3, y3, z3) {
1322
- if (z1 === 0 && z2 === 0 && z3 === 0) {
1323
- return pointOnLine2D(x1, y1, x2, y2, x3, y3);
1324
- }
1325
- var dist1 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2) + Math.pow(z2 - z1, 2));
1326
- var dist2 = Math.sqrt(Math.pow(x3 - x1, 2) + Math.pow(y3 - y1, 2) + Math.pow(z3 - z1, 2));
1327
- var dist3 = Math.sqrt(Math.pow(x3 - x2, 2) + Math.pow(y3 - y2, 2) + Math.pow(z3 - z2, 2));
1328
- var diffDist;
1329
- if (dist1 > dist2) {
1330
- if (dist1 > dist3) {
1331
- diffDist = dist1 - dist2 - dist3;
1332
- } else {
1333
- diffDist = dist3 - dist2 - dist1;
1334
- }
1335
- } else if (dist3 > dist2) {
1336
- diffDist = dist3 - dist2 - dist1;
1337
- } else {
1338
- diffDist = dist2 - dist1 - dist3;
1339
- }
1340
- return diffDist > -0.0001 && diffDist < 0.0001;
1341
- }
1342
-
1343
- var getBezierLength = (function () {
1344
-
1345
- return function (pt1, pt2, pt3, pt4) {
1346
- var curveSegments = defaultCurveSegments;
1347
- var k;
1348
- var i, len;
1349
- var ptCoord, perc, addedLength = 0;
1350
- var ptDistance;
1351
- var point = [],
1352
- lastPoint = [];
1353
- var lengthData = bezier_length_pool.newElement();
1354
- len = pt3.length;
1355
- for (k = 0; k < curveSegments; k += 1) {
1356
- perc = k / (curveSegments - 1);
1357
- ptDistance = 0;
1358
- for (i = 0; i < len; i += 1) {
1359
- ptCoord = bm_pow(1 - perc, 3) * pt1[i] + 3 * bm_pow(1 - perc, 2) * perc * pt3[i] + 3 * (1 - perc) * bm_pow(perc, 2) * pt4[i] + bm_pow(perc, 3) * pt2[i];
1360
- point[i] = ptCoord;
1361
- if (lastPoint[i] !== null) {
1362
- ptDistance += bm_pow(point[i] - lastPoint[i], 2);
1363
- }
1364
- lastPoint[i] = point[i];
1365
- }
1366
- if (ptDistance) {
1367
- ptDistance = bm_sqrt(ptDistance);
1368
- addedLength += ptDistance;
1369
- }
1370
- lengthData.percents[k] = perc;
1371
- lengthData.lengths[k] = addedLength;
1372
- }
1373
- lengthData.addedLength = addedLength;
1374
- return lengthData;
1375
- };
1376
- }());
1377
-
1378
- function getSegmentsLength(shapeData) {
1379
- var segmentsLength = segments_length_pool.newElement();
1380
- var closed = shapeData.c;
1381
- var pathV = shapeData.v;
1382
- var pathO = shapeData.o;
1383
- var pathI = shapeData.i;
1384
- var i, len = shapeData._length;
1385
- var lengths = segmentsLength.lengths;
1386
- var totalLength = 0;
1387
- for (i = 0; i < len - 1; i += 1) {
1388
- lengths[i] = getBezierLength(pathV[i], pathV[i + 1], pathO[i], pathI[i + 1]);
1389
- totalLength += lengths[i].addedLength;
1390
- }
1391
- if (closed && len) {
1392
- lengths[i] = getBezierLength(pathV[i], pathV[0], pathO[i], pathI[0]);
1393
- totalLength += lengths[i].addedLength;
1394
- }
1395
- segmentsLength.totalLength = totalLength;
1396
- return segmentsLength;
1397
- }
1398
-
1399
- function BezierData(length) {
1400
- this.segmentLength = 0;
1401
- this.points = new Array(length);
1402
- }
1403
-
1404
- function PointData(partial, point) {
1405
- this.partialLength = partial;
1406
- this.point = point;
1407
- }
1408
-
1409
- var buildBezierData = (function () {
1410
-
1411
- var storedData = {};
1412
-
1413
- return function (pt1, pt2, pt3, pt4) {
1414
- var bezierName = (pt1[0] + '_' + pt1[1] + '_' + pt2[0] + '_' + pt2[1] + '_' + pt3[0] + '_' + pt3[1] + '_' + pt4[0] + '_' + pt4[1]).replace(/\./g, 'p');
1415
- if (!storedData[bezierName]) {
1416
- var curveSegments = defaultCurveSegments;
1417
- var k, i, len;
1418
- var ptCoord, perc, addedLength = 0;
1419
- var ptDistance;
1420
- var point, lastPoint = null;
1421
- 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])) {
1422
- curveSegments = 2;
1423
- }
1424
- var bezierData = new BezierData(curveSegments);
1425
- len = pt3.length;
1426
- for (k = 0; k < curveSegments; k += 1) {
1427
- point = createSizedArray(len);
1428
- perc = k / (curveSegments - 1);
1429
- ptDistance = 0;
1430
- for (i = 0; i < len; i += 1) {
1431
- ptCoord = bm_pow(1 - perc, 3) * pt1[i] + 3 * bm_pow(1 - perc, 2) * perc * (pt1[i] + pt3[i]) + 3 * (1 - perc) * bm_pow(perc, 2) * (pt2[i] + pt4[i]) + bm_pow(perc, 3) * pt2[i];
1432
- point[i] = ptCoord;
1433
- if (lastPoint !== null) {
1434
- ptDistance += bm_pow(point[i] - lastPoint[i], 2);
1435
- }
1436
- }
1437
- ptDistance = bm_sqrt(ptDistance);
1438
- addedLength += ptDistance;
1439
- bezierData.points[k] = new PointData(ptDistance, point);
1440
- lastPoint = point;
1441
- }
1442
- bezierData.segmentLength = addedLength;
1443
- storedData[bezierName] = bezierData;
1444
- }
1445
- return storedData[bezierName];
1446
- };
1447
- }());
1448
-
1449
- function getDistancePerc(perc, bezierData) {
1450
- var percents = bezierData.percents;
1451
- var lengths = bezierData.lengths;
1452
- var len = percents.length;
1453
- var initPos = bm_floor((len - 1) * perc);
1454
- var lengthPos = perc * bezierData.addedLength;
1455
- var lPerc = 0;
1456
- if (initPos === len - 1 || initPos === 0 || lengthPos === lengths[initPos]) {
1457
- return percents[initPos];
1458
- } else {
1459
- var dir = lengths[initPos] > lengthPos ? -1 : 1;
1460
- var flag = true;
1461
- while (flag) {
1462
- if (lengths[initPos] <= lengthPos && lengths[initPos + 1] > lengthPos) {
1463
- lPerc = (lengthPos - lengths[initPos]) / (lengths[initPos + 1] - lengths[initPos]);
1464
- flag = false;
1465
- } else {
1466
- initPos += dir;
1467
- }
1468
- if (initPos < 0 || initPos >= len - 1) {
1469
- //FIX for TypedArrays that don't store floating point values with enough accuracy
1470
- if (initPos === len - 1) {
1471
- return percents[initPos];
1472
- }
1473
- flag = false;
1474
- }
1475
- }
1476
- return percents[initPos] + (percents[initPos + 1] - percents[initPos]) * lPerc;
1477
- }
1478
- }
1479
-
1480
- function getPointInSegment(pt1, pt2, pt3, pt4, percent, bezierData) {
1481
- var t1 = getDistancePerc(percent, bezierData);
1482
- var u0 = 1;
1483
- var u1 = 1 - t1;
1484
- 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;
1485
- 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;
1486
- return [ptX, ptY];
1487
- }
1488
-
1489
- function getSegmentArray() {
1490
-
1491
- }
1492
-
1493
- var bezier_segment_points = createTypedArray('float32', 8);
1494
-
1495
- function getNewSegment(pt1, pt2, pt3, pt4, startPerc, endPerc, bezierData) {
1496
-
1497
- startPerc = startPerc < 0 ? 0 : startPerc > 1 ? 1 : startPerc;
1498
- var t0 = getDistancePerc(startPerc, bezierData);
1499
- endPerc = endPerc > 1 ? 1 : endPerc;
1500
- var t1 = getDistancePerc(endPerc, bezierData);
1501
- var i, len = pt1.length;
1502
- var u0 = 1 - t0;
1503
- var u1 = 1 - t1;
1504
- var u0u0u0 = u0 * u0 * u0;
1505
- var t0u0u0_3 = t0 * u0 * u0 * 3;
1506
- var t0t0u0_3 = t0 * t0 * u0 * 3;
1507
- var t0t0t0 = t0 * t0 * t0;
1508
- //
1509
- var u0u0u1 = u0 * u0 * u1;
1510
- var t0u0u1_3 = t0 * u0 * u1 + u0 * t0 * u1 + u0 * u0 * t1;
1511
- var t0t0u1_3 = t0 * t0 * u1 + u0 * t0 * t1 + t0 * u0 * t1;
1512
- var t0t0t1 = t0 * t0 * t1;
1513
- //
1514
- var u0u1u1 = u0 * u1 * u1;
1515
- var t0u1u1_3 = t0 * u1 * u1 + u0 * t1 * u1 + u0 * u1 * t1;
1516
- var t0t1u1_3 = t0 * t1 * u1 + u0 * t1 * t1 + t0 * u1 * t1;
1517
- var t0t1t1 = t0 * t1 * t1;
1518
- //
1519
- var u1u1u1 = u1 * u1 * u1;
1520
- var t1u1u1_3 = t1 * u1 * u1 + u1 * t1 * u1 + u1 * u1 * t1;
1521
- var t1t1u1_3 = t1 * t1 * u1 + u1 * t1 * t1 + t1 * u1 * t1;
1522
- var t1t1t1 = t1 * t1 * t1;
1523
- for (i = 0; i < len; i += 1) {
1524
- bezier_segment_points[i * 4] = Math.round((u0u0u0 * pt1[i] + t0u0u0_3 * pt3[i] + t0t0u0_3 * pt4[i] + t0t0t0 * pt2[i]) * 1000) / 1000;
1525
- bezier_segment_points[i * 4 + 1] = Math.round((u0u0u1 * pt1[i] + t0u0u1_3 * pt3[i] + t0t0u1_3 * pt4[i] + t0t0t1 * pt2[i]) * 1000) / 1000;
1526
- bezier_segment_points[i * 4 + 2] = Math.round((u0u1u1 * pt1[i] + t0u1u1_3 * pt3[i] + t0t1u1_3 * pt4[i] + t0t1t1 * pt2[i]) * 1000) / 1000;
1527
- bezier_segment_points[i * 4 + 3] = Math.round((u1u1u1 * pt1[i] + t1u1u1_3 * pt3[i] + t1t1u1_3 * pt4[i] + t1t1t1 * pt2[i]) * 1000) / 1000;
1528
- }
1529
-
1530
- return bezier_segment_points;
1531
- }
1532
-
1533
- return {
1534
- getSegmentsLength: getSegmentsLength,
1535
- getNewSegment: getNewSegment,
1536
- getPointInSegment: getPointInSegment,
1537
- buildBezierData: buildBezierData,
1538
- pointOnLine2D: pointOnLine2D,
1539
- pointOnLine3D: pointOnLine3D
1540
- };
1541
- }
1542
-
1543
- var bez = bezFunction();
1544
-
1545
- function dataFunctionManager() {
1546
-
1547
- //var tCanvasHelper = createTag('canvas').getContext('2d');
1548
-
1549
- function completeLayers(layers, comps, fontManager) {
1550
- var layerData;
1551
- var animArray, lastFrame;
1552
- var i, len = layers.length;
1553
- var j, jLen, k, kLen;
1554
- for (i = 0; i < len; i += 1) {
1555
- layerData = layers[i];
1556
- if (!('ks' in layerData) || layerData.completed) {
1557
- continue;
1558
- }
1559
- layerData.completed = true;
1560
- if (layerData.tt) {
1561
- layers[i - 1].td = layerData.tt;
1562
- }
1563
- animArray = [];
1564
- lastFrame = -1;
1565
- if (layerData.hasMask) {
1566
- var maskProps = layerData.masksProperties;
1567
- jLen = maskProps.length;
1568
- for (j = 0; j < jLen; j += 1) {
1569
- if (maskProps[j].pt.k.i) {
1570
- convertPathsToAbsoluteValues(maskProps[j].pt.k);
1571
- } else {
1572
- kLen = maskProps[j].pt.k.length;
1573
- for (k = 0; k < kLen; k += 1) {
1574
- if (maskProps[j].pt.k[k].s) {
1575
- convertPathsToAbsoluteValues(maskProps[j].pt.k[k].s[0]);
1576
- }
1577
- if (maskProps[j].pt.k[k].e) {
1578
- convertPathsToAbsoluteValues(maskProps[j].pt.k[k].e[0]);
1579
- }
1580
- }
1581
- }
1582
- }
1583
- }
1584
- if (layerData.ty === 0) {
1585
- layerData.layers = findCompLayers(layerData.refId, comps);
1586
- completeLayers(layerData.layers, comps, fontManager);
1587
- } else if (layerData.ty === 4) {
1588
- completeShapes(layerData.shapes);
1589
- } else if (layerData.ty == 5) {
1590
- completeText(layerData, fontManager);
1591
- }
1592
- }
1593
- }
1594
-
1595
- function findCompLayers(id, comps) {
1596
- var i = 0,
1597
- len = comps.length;
1598
- while (i < len) {
1599
- if (comps[i].id === id) {
1600
- if (!comps[i].layers.__used) {
1601
- comps[i].layers.__used = true;
1602
- return comps[i].layers;
1603
- }
1604
- return JSON.parse(JSON.stringify(comps[i].layers));
1605
- }
1606
- i += 1;
1607
- }
1608
- }
1609
-
1610
- function completeShapes(arr) {
1611
- var i, len = arr.length;
1612
- var j, jLen;
1613
- var hasPaths = false;
1614
- for (i = len - 1; i >= 0; i -= 1) {
1615
- if (arr[i].ty == 'sh') {
1616
- if (arr[i].ks.k.i) {
1617
- convertPathsToAbsoluteValues(arr[i].ks.k);
1618
- } else {
1619
- jLen = arr[i].ks.k.length;
1620
- for (j = 0; j < jLen; j += 1) {
1621
- if (arr[i].ks.k[j].s) {
1622
- convertPathsToAbsoluteValues(arr[i].ks.k[j].s[0]);
1623
- }
1624
- if (arr[i].ks.k[j].e) {
1625
- convertPathsToAbsoluteValues(arr[i].ks.k[j].e[0]);
1626
- }
1627
- }
1628
- }
1629
- hasPaths = true;
1630
- } else if (arr[i].ty == 'gr') {
1631
- completeShapes(arr[i].it);
1632
- }
1633
- }
1634
- /*if(hasPaths){
1635
- //mx: distance
1636
- //ss: sensitivity
1637
- //dc: decay
1638
- arr.splice(arr.length-1,0,{
1639
- "ty": "ms",
1640
- "mx":20,
1641
- "ss":10,
1642
- "dc":0.001,
1643
- "maxDist":200
1644
- });
1645
- }*/
1646
- }
1647
-
1648
- function convertPathsToAbsoluteValues(path) {
1649
- var i, len = path.i.length;
1650
- for (i = 0; i < len; i += 1) {
1651
- path.i[i][0] += path.v[i][0];
1652
- path.i[i][1] += path.v[i][1];
1653
- path.o[i][0] += path.v[i][0];
1654
- path.o[i][1] += path.v[i][1];
1655
- }
1656
- }
1657
-
1658
- function checkVersion(minimum, animVersionString) {
1659
- var animVersion = animVersionString ? animVersionString.split('.') : [100, 100, 100];
1660
- if (minimum[0] > animVersion[0]) {
1661
- return true;
1662
- } else if (animVersion[0] > minimum[0]) {
1663
- return false;
1664
- }
1665
- if (minimum[1] > animVersion[1]) {
1666
- return true;
1667
- } else if (animVersion[1] > minimum[1]) {
1668
- return false;
1669
- }
1670
- if (minimum[2] > animVersion[2]) {
1671
- return true;
1672
- } else if (animVersion[2] > minimum[2]) {
1673
- return false;
1674
- }
1675
- }
1676
-
1677
- var checkText = (function () {
1678
- var minimumVersion = [4, 4, 14];
1679
-
1680
- function updateTextLayer(textLayer) {
1681
- var documentData = textLayer.t.d;
1682
- textLayer.t.d = {
1683
- k: [{
1684
- s: documentData,
1685
- t: 0
1686
- }]
1687
- };
1688
- }
1689
-
1690
- function iterateLayers(layers) {
1691
- var i, len = layers.length;
1692
- for (i = 0; i < len; i += 1) {
1693
- if (layers[i].ty === 5) {
1694
- updateTextLayer(layers[i]);
1695
- }
1696
- }
1697
- }
1698
-
1699
- return function (animationData) {
1700
- if (checkVersion(minimumVersion, animationData.v)) {
1701
- iterateLayers(animationData.layers);
1702
- if (animationData.assets) {
1703
- var i, len = animationData.assets.length;
1704
- for (i = 0; i < len; i += 1) {
1705
- if (animationData.assets[i].layers) {
1706
- iterateLayers(animationData.assets[i].layers);
1707
-
1708
- }
1709
- }
1710
- }
1711
- }
1712
- };
1713
- }());
1714
-
1715
- var checkChars = (function () {
1716
- var minimumVersion = [4, 7, 99];
1717
- return function (animationData) {
1718
- if (animationData.chars && !checkVersion(minimumVersion, animationData.v)) {
1719
- var i, len = animationData.chars.length,
1720
- j, jLen, k, kLen;
1721
- var pathData, paths;
1722
- for (i = 0; i < len; i += 1) {
1723
- if (animationData.chars[i].data && animationData.chars[i].data.shapes) {
1724
- paths = animationData.chars[i].data.shapes[0].it;
1725
- jLen = paths.length;
1726
-
1727
- for (j = 0; j < jLen; j += 1) {
1728
- pathData = paths[j].ks.k;
1729
- if (!pathData.__converted) {
1730
- convertPathsToAbsoluteValues(paths[j].ks.k);
1731
- pathData.__converted = true;
1732
- }
1733
- }
1734
- }
1735
- }
1736
- }
1737
- };
1738
- }());
1739
-
1740
- var checkColors = (function () {
1741
- var minimumVersion = [4, 1, 9];
1742
-
1743
- function iterateShapes(shapes) {
1744
- var i, len = shapes.length;
1745
- var j, jLen;
1746
- for (i = 0; i < len; i += 1) {
1747
- if (shapes[i].ty === 'gr') {
1748
- iterateShapes(shapes[i].it);
1749
- } else if (shapes[i].ty === 'fl' || shapes[i].ty === 'st') {
1750
- if (shapes[i].c.k && shapes[i].c.k[0].i) {
1751
- jLen = shapes[i].c.k.length;
1752
- for (j = 0; j < jLen; j += 1) {
1753
- if (shapes[i].c.k[j].s) {
1754
- shapes[i].c.k[j].s[0] /= 255;
1755
- shapes[i].c.k[j].s[1] /= 255;
1756
- shapes[i].c.k[j].s[2] /= 255;
1757
- shapes[i].c.k[j].s[3] /= 255;
1758
- }
1759
- if (shapes[i].c.k[j].e) {
1760
- shapes[i].c.k[j].e[0] /= 255;
1761
- shapes[i].c.k[j].e[1] /= 255;
1762
- shapes[i].c.k[j].e[2] /= 255;
1763
- shapes[i].c.k[j].e[3] /= 255;
1764
- }
1765
- }
1766
- } else {
1767
- shapes[i].c.k[0] /= 255;
1768
- shapes[i].c.k[1] /= 255;
1769
- shapes[i].c.k[2] /= 255;
1770
- shapes[i].c.k[3] /= 255;
1771
- }
1772
- }
1773
- }
1774
- }
1775
-
1776
- function iterateLayers(layers) {
1777
- var i, len = layers.length;
1778
- for (i = 0; i < len; i += 1) {
1779
- if (layers[i].ty === 4) {
1780
- iterateShapes(layers[i].shapes);
1781
- }
1782
- }
1783
- }
1784
-
1785
- return function (animationData) {
1786
- if (checkVersion(minimumVersion, animationData.v)) {
1787
- iterateLayers(animationData.layers);
1788
- if (animationData.assets) {
1789
- var i, len = animationData.assets.length;
1790
- for (i = 0; i < len; i += 1) {
1791
- if (animationData.assets[i].layers) {
1792
- iterateLayers(animationData.assets[i].layers);
1793
-
1794
- }
1795
- }
1796
- }
1797
- }
1798
- };
1799
- }());
1800
-
1801
- var checkShapes = (function () {
1802
- var minimumVersion = [4, 4, 18];
1803
-
1804
-
1805
-
1806
- function completeShapes(arr) {
1807
- var i, len = arr.length;
1808
- var j, jLen;
1809
- var hasPaths = false;
1810
- for (i = len - 1; i >= 0; i -= 1) {
1811
- if (arr[i].ty == 'sh') {
1812
- if (arr[i].ks.k.i) {
1813
- arr[i].ks.k.c = arr[i].closed;
1814
- } else {
1815
- jLen = arr[i].ks.k.length;
1816
- for (j = 0; j < jLen; j += 1) {
1817
- if (arr[i].ks.k[j].s) {
1818
- arr[i].ks.k[j].s[0].c = arr[i].closed;
1819
- }
1820
- if (arr[i].ks.k[j].e) {
1821
- arr[i].ks.k[j].e[0].c = arr[i].closed;
1822
- }
1823
- }
1824
- }
1825
- hasPaths = true;
1826
- } else if (arr[i].ty == 'gr') {
1827
- completeShapes(arr[i].it);
1828
- }
1829
- }
1830
- }
1831
-
1832
- function iterateLayers(layers) {
1833
- var layerData;
1834
- var i, len = layers.length;
1835
- var j, jLen, k, kLen;
1836
- for (i = 0; i < len; i += 1) {
1837
- layerData = layers[i];
1838
- if (layerData.hasMask) {
1839
- var maskProps = layerData.masksProperties;
1840
- jLen = maskProps.length;
1841
- for (j = 0; j < jLen; j += 1) {
1842
- if (maskProps[j].pt.k.i) {
1843
- maskProps[j].pt.k.c = maskProps[j].cl;
1844
- } else {
1845
- kLen = maskProps[j].pt.k.length;
1846
- for (k = 0; k < kLen; k += 1) {
1847
- if (maskProps[j].pt.k[k].s) {
1848
- maskProps[j].pt.k[k].s[0].c = maskProps[j].cl;
1849
- }
1850
- if (maskProps[j].pt.k[k].e) {
1851
- maskProps[j].pt.k[k].e[0].c = maskProps[j].cl;
1852
- }
1853
- }
1854
- }
1855
- }
1856
- }
1857
- if (layerData.ty === 4) {
1858
- completeShapes(layerData.shapes);
1859
- }
1860
- }
1861
- }
1862
-
1863
- return function (animationData) {
1864
- if (checkVersion(minimumVersion, animationData.v)) {
1865
- iterateLayers(animationData.layers);
1866
- if (animationData.assets) {
1867
- var i, len = animationData.assets.length;
1868
- for (i = 0; i < len; i += 1) {
1869
- if (animationData.assets[i].layers) {
1870
- iterateLayers(animationData.assets[i].layers);
1871
-
1872
- }
1873
- }
1874
- }
1875
- }
1876
- };
1877
- }());
1878
-
1879
- function completeData(animationData, fontManager) {
1880
- if (animationData.__complete) {
1881
- return;
1882
- }
1883
- checkColors(animationData);
1884
- checkText(animationData);
1885
- checkChars(animationData);
1886
- checkShapes(animationData);
1887
- completeLayers(animationData.layers, animationData.assets, fontManager);
1888
- animationData.__complete = true;
1889
- //blitAnimation(animationData, animationData.assets, fontManager);
1890
- }
1891
-
1892
- function completeText(data, fontManager) {
1893
- if (data.t.a.length === 0 && !('m' in data.t.p)) {
1894
- data.singleShape = true;
1895
- }
1896
- }
1897
-
1898
- var moduleOb = {};
1899
- moduleOb.completeData = completeData;
1900
- moduleOb.checkColors = checkColors;
1901
- moduleOb.checkChars = checkChars;
1902
- moduleOb.checkShapes = checkShapes;
1903
- moduleOb.completeLayers = completeLayers;
1904
-
1905
- return moduleOb;
1906
- }
1907
-
1908
- var dataManager = dataFunctionManager();
1909
-
1910
- var FontManager = (function () {
1911
-
1912
- var maxWaitingTime = 5000;
1913
- var emptyChar = {
1914
- w: 0,
1915
- size: 0,
1916
- shapes: []
1917
- };
1918
- var combinedCharacters = [];
1919
- //Hindi characters
1920
- 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]);
1921
-
1922
- function setUpNode(font, family) {
1923
- var parentNode = createTag('span');
1924
- parentNode.style.fontFamily = family;
1925
- var node = createTag('span');
1926
- // Characters that vary significantly among different fonts
1927
- node.innerHTML = 'giItT1WQy@!-/#';
1928
- // Visible - so we can measure it - but not on the screen
1929
- parentNode.style.position = 'absolute';
1930
- parentNode.style.left = '-10000px';
1931
- parentNode.style.top = '-10000px';
1932
- // Large font size makes even subtle changes obvious
1933
- parentNode.style.fontSize = '300px';
1934
- // Reset any font properties
1935
- parentNode.style.fontVariant = 'normal';
1936
- parentNode.style.fontStyle = 'normal';
1937
- parentNode.style.fontWeight = 'normal';
1938
- parentNode.style.letterSpacing = '0';
1939
- parentNode.appendChild(node);
1940
- document.body.appendChild(parentNode);
1941
-
1942
- // Remember width with no applied web font
1943
- var width = node.offsetWidth;
1944
- node.style.fontFamily = font + ', ' + family;
1945
- return {
1946
- node: node,
1947
- w: width,
1948
- parent: parentNode
1949
- };
1950
- }
1951
-
1952
- function checkLoadedFonts() {
1953
- var i, len = this.fonts.length;
1954
- var node, w;
1955
- var loadedCount = len;
1956
- for (i = 0; i < len; i += 1) {
1957
- if (this.fonts[i].loaded) {
1958
- loadedCount -= 1;
1959
- continue;
1960
- }
1961
- if (this.fonts[i].fOrigin === 'n' || this.fonts[i].origin === 0) {
1962
- this.fonts[i].loaded = true;
1963
- } else {
1964
- node = this.fonts[i].monoCase.node;
1965
- w = this.fonts[i].monoCase.w;
1966
- if (node.offsetWidth !== w) {
1967
- loadedCount -= 1;
1968
- this.fonts[i].loaded = true;
1969
- } else {
1970
- node = this.fonts[i].sansCase.node;
1971
- w = this.fonts[i].sansCase.w;
1972
- if (node.offsetWidth !== w) {
1973
- loadedCount -= 1;
1974
- this.fonts[i].loaded = true;
1975
- }
1976
- }
1977
- if (this.fonts[i].loaded) {
1978
- this.fonts[i].sansCase.parent.parentNode.removeChild(this.fonts[i].sansCase.parent);
1979
- this.fonts[i].monoCase.parent.parentNode.removeChild(this.fonts[i].monoCase.parent);
1980
- }
1981
- }
1982
- }
1983
-
1984
- if (loadedCount !== 0 && Date.now() - this.initTime < maxWaitingTime) {
1985
- setTimeout(this.checkLoadedFonts.bind(this), 20);
1986
- } else {
1987
- setTimeout(function () {
1988
- this.isLoaded = true;
1989
- }.bind(this), 0);
1990
-
1991
- }
1992
- }
1993
-
1994
- function createHelper(def, fontData) {
1995
- var tHelper = createNS('text');
1996
- tHelper.style.fontSize = '100px';
1997
- //tHelper.style.fontFamily = fontData.fFamily;
1998
- tHelper.setAttribute('font-family', fontData.fFamily);
1999
- tHelper.setAttribute('font-style', fontData.fStyle);
2000
- tHelper.setAttribute('font-weight', fontData.fWeight);
2001
- tHelper.textContent = '1';
2002
- if (fontData.fClass) {
2003
- tHelper.style.fontFamily = 'inherit';
2004
- tHelper.setAttribute('class', fontData.fClass);
2005
- } else {
2006
- tHelper.style.fontFamily = fontData.fFamily;
2007
- }
2008
- def.appendChild(tHelper);
2009
- var tCanvasHelper = createTag('canvas').getContext('2d');
2010
- tCanvasHelper.font = fontData.fWeight + ' ' + fontData.fStyle + ' 100px ' + fontData.fFamily;
2011
- //tCanvasHelper.font = ' 100px '+ fontData.fFamily;
2012
- return tHelper;
2013
- }
2014
-
2015
- function addFonts(fontData, defs) {
2016
- if (!fontData) {
2017
- this.isLoaded = true;
2018
- return;
2019
- }
2020
- if (this.chars) {
2021
- this.isLoaded = true;
2022
- this.fonts = fontData.list;
2023
- return;
2024
- }
2025
-
2026
-
2027
- var fontArr = fontData.list;
2028
- var i, len = fontArr.length;
2029
- var _pendingFonts = len;
2030
- for (i = 0; i < len; i += 1) {
2031
- var shouldLoadFont = true;
2032
- var loadedSelector;
2033
- var j;
2034
- fontArr[i].loaded = false;
2035
- fontArr[i].monoCase = setUpNode(fontArr[i].fFamily, 'monospace');
2036
- fontArr[i].sansCase = setUpNode(fontArr[i].fFamily, 'sans-serif');
2037
- if (!fontArr[i].fPath) {
2038
- fontArr[i].loaded = true;
2039
- _pendingFonts -= 1;
2040
- } else if (fontArr[i].fOrigin === 'p' || fontArr[i].origin === 3) {
2041
- loadedSelector = document.querySelectorAll('style[f-forigin="p"][f-family="' + fontArr[i].fFamily + '"], style[f-origin="3"][f-family="' + fontArr[i].fFamily + '"]');
2042
-
2043
- if (loadedSelector.length > 0) {
2044
- shouldLoadFont = false;
2045
- }
2046
-
2047
- if (shouldLoadFont) {
2048
- var s = createTag('style');
2049
- s.setAttribute('f-forigin', fontArr[i].fOrigin);
2050
- s.setAttribute('f-origin', fontArr[i].origin);
2051
- s.setAttribute('f-family', fontArr[i].fFamily);
2052
- s.type = "text/css";
2053
- s.innerHTML = "@font-face {" + "font-family: " + fontArr[i].fFamily + "; font-style: normal; src: url('" + fontArr[i].fPath + "');}";
2054
- defs.appendChild(s);
2055
- }
2056
- } else if (fontArr[i].fOrigin === 'g' || fontArr[i].origin === 1) {
2057
- loadedSelector = document.querySelectorAll('link[f-forigin="g"], link[f-origin="1"]');
2058
-
2059
- for (j = 0; j < loadedSelector.length; j++) {
2060
- if (loadedSelector[j].href.indexOf(fontArr[i].fPath) !== -1) {
2061
- // Font is already loaded
2062
- shouldLoadFont = false;
2063
- }
2064
- }
2065
-
2066
- if (shouldLoadFont) {
2067
- var l = createTag('link');
2068
- l.setAttribute('f-forigin', fontArr[i].fOrigin);
2069
- l.setAttribute('f-origin', fontArr[i].origin);
2070
- l.type = "text/css";
2071
- l.rel = "stylesheet";
2072
- l.href = fontArr[i].fPath;
2073
- document.body.appendChild(l);
2074
- }
2075
- } else if (fontArr[i].fOrigin === 't' || fontArr[i].origin === 2) {
2076
- loadedSelector = document.querySelectorAll('script[f-forigin="t"], script[f-origin="2"]');
2077
-
2078
- for (j = 0; j < loadedSelector.length; j++) {
2079
- if (fontArr[i].fPath === loadedSelector[j].src) {
2080
- // Font is already loaded
2081
- shouldLoadFont = false;
2082
- }
2083
- }
2084
-
2085
- if (shouldLoadFont) {
2086
- var sc = createTag('link');
2087
- sc.setAttribute('f-forigin', fontArr[i].fOrigin);
2088
- sc.setAttribute('f-origin', fontArr[i].origin);
2089
- sc.setAttribute('rel', 'stylesheet');
2090
- sc.setAttribute('href', fontArr[i].fPath);
2091
- defs.appendChild(sc);
2092
- }
2093
- }
2094
- fontArr[i].helper = createHelper(defs, fontArr[i]);
2095
- fontArr[i].cache = {};
2096
- this.fonts.push(fontArr[i]);
2097
- }
2098
- if (_pendingFonts === 0) {
2099
- this.isLoaded = true;
2100
- } else {
2101
- //On some cases even if the font is loaded, it won't load correctly when measuring text on canvas.
2102
- //Adding this timeout seems to fix it
2103
- setTimeout(this.checkLoadedFonts.bind(this), 100);
2104
- }
2105
- }
2106
-
2107
- function addChars(chars) {
2108
- if (!chars) {
2109
- return;
2110
- }
2111
- if (!this.chars) {
2112
- this.chars = [];
2113
- }
2114
- var i, len = chars.length;
2115
- var j, jLen = this.chars.length,
2116
- found;
2117
- for (i = 0; i < len; i += 1) {
2118
- j = 0;
2119
- found = false;
2120
- while (j < jLen) {
2121
- if (this.chars[j].style === chars[i].style && this.chars[j].fFamily === chars[i].fFamily && this.chars[j].ch === chars[i].ch) {
2122
- found = true;
2123
- }
2124
- j += 1;
2125
- }
2126
- if (!found) {
2127
- this.chars.push(chars[i]);
2128
- jLen += 1;
2129
- }
2130
- }
2131
- }
2132
-
2133
- function getCharData(char, style, font) {
2134
- var i = 0,
2135
- len = this.chars.length;
2136
- while (i < len) {
2137
- if (this.chars[i].ch === char && this.chars[i].style === style && this.chars[i].fFamily === font) {
2138
-
2139
- return this.chars[i];
2140
- }
2141
- i += 1;
2142
- }
2143
- if ((typeof char === 'string' && char.charCodeAt(0) !== 13 || !char) && console && console.warn) {
2144
- // console.warn('Missing character from exported characters list: ', char, style, font);
2145
- }
2146
- return emptyChar;
2147
- }
2148
-
2149
- function measureText(char, fontName, size) {
2150
- var fontData = this.getFontByName(fontName);
2151
- var index = char.charCodeAt(0);
2152
- if (!fontData.cache[index + 1]) {
2153
- var tHelper = fontData.helper;
2154
- //Canvas version
2155
- //fontData.cache[index] = tHelper.measureText(char).width / 100;
2156
- //SVG version
2157
- //console.log(tHelper.getBBox().width)
2158
- if (char === ' ') {
2159
- tHelper.textContent = '|' + char + '|';
2160
- var doubleSize = tHelper.getComputedTextLength();
2161
- tHelper.textContent = '||';
2162
- var singleSize = tHelper.getComputedTextLength();
2163
- fontData.cache[index + 1] = (doubleSize - singleSize) / 100;
2164
- } else {
2165
- tHelper.textContent = char;
2166
- fontData.cache[index + 1] = (tHelper.getComputedTextLength()) / 100;
2167
- }
2168
- }
2169
- return fontData.cache[index + 1] * size;
2170
- }
2171
-
2172
- function getFontByName(name) {
2173
- var i = 0,
2174
- len = this.fonts.length;
2175
- while (i < len) {
2176
- if (this.fonts[i].fName === name) {
2177
- return this.fonts[i];
2178
- }
2179
- i += 1;
2180
- }
2181
- return this.fonts[0];
2182
- }
2183
-
2184
- function getCombinedCharacterCodes() {
2185
- return combinedCharacters;
2186
- }
2187
-
2188
- function loaded() {
2189
- return this.isLoaded;
2190
- }
2191
-
2192
- var Font = function () {
2193
- this.fonts = [];
2194
- this.chars = null;
2195
- this.typekitLoaded = 0;
2196
- this.isLoaded = false;
2197
- this.initTime = Date.now();
2198
- };
2199
- //TODO: for now I'm adding these methods to the Class and not the prototype. Think of a better way to implement it.
2200
- Font.getCombinedCharacterCodes = getCombinedCharacterCodes;
2201
-
2202
- Font.prototype.addChars = addChars;
2203
- Font.prototype.addFonts = addFonts;
2204
- Font.prototype.getCharData = getCharData;
2205
- Font.prototype.getFontByName = getFontByName;
2206
- Font.prototype.measureText = measureText;
2207
- Font.prototype.checkLoadedFonts = checkLoadedFonts;
2208
- Font.prototype.loaded = loaded;
2209
-
2210
- return Font;
2211
-
2212
- }());
2213
- var PropertyFactory = (function () {
2214
-
2215
- var initFrame = initialDefaultFrame;
2216
- var math_abs = Math.abs;
2217
-
2218
- function interpolateValue(frameNum, caching) {
2219
- var offsetTime = this.offsetTime;
2220
- var newValue;
2221
- if (this.propType === 'multidimensional') {
2222
- newValue = createTypedArray('float32', this.pv.length);
2223
- }
2224
- var iterationIndex = caching.lastIndex;
2225
- var i = iterationIndex;
2226
- var len = this.keyframes.length - 1,
2227
- flag = true;
2228
- var keyData, nextKeyData;
2229
-
2230
- while (flag) {
2231
- keyData = this.keyframes[i];
2232
- nextKeyData = this.keyframes[i + 1];
2233
- if (i === len - 1 && frameNum >= nextKeyData.t - offsetTime) {
2234
- if (keyData.h) {
2235
- keyData = nextKeyData;
2236
- }
2237
- iterationIndex = 0;
2238
- break;
2239
- }
2240
- if ((nextKeyData.t - offsetTime) > frameNum) {
2241
- iterationIndex = i;
2242
- break;
2243
- }
2244
- if (i < len - 1) {
2245
- i += 1;
2246
- } else {
2247
- iterationIndex = 0;
2248
- flag = false;
2249
- }
2250
- }
2251
-
2252
- var k, kLen, perc, jLen, j, fnc;
2253
- var nextKeyTime = nextKeyData.t - offsetTime;
2254
- var keyTime = keyData.t - offsetTime;
2255
- var endValue;
2256
- if (keyData.to) {
2257
- if (!keyData.bezierData) {
2258
- keyData.bezierData = bez.buildBezierData(keyData.s, nextKeyData.s || keyData.e, keyData.to, keyData.ti);
2259
- }
2260
- var bezierData = keyData.bezierData;
2261
- if (frameNum >= nextKeyTime || frameNum < keyTime) {
2262
- var ind = frameNum >= nextKeyTime ? bezierData.points.length - 1 : 0;
2263
- kLen = bezierData.points[ind].point.length;
2264
- for (k = 0; k < kLen; k += 1) {
2265
- newValue[k] = bezierData.points[ind].point[k];
2266
- }
2267
- // caching._lastKeyframeIndex = -1;
2268
- } else {
2269
- if (keyData.__fnct) {
2270
- fnc = keyData.__fnct;
2271
- } else {
2272
- fnc = BezierFactory.getBezierEasing(keyData.o.x, keyData.o.y, keyData.i.x, keyData.i.y, keyData.n).get;
2273
- keyData.__fnct = fnc;
2274
- }
2275
- perc = fnc((frameNum - keyTime) / (nextKeyTime - keyTime));
2276
- var distanceInLine = bezierData.segmentLength * perc;
2277
-
2278
- var segmentPerc;
2279
- var addedLength = (caching.lastFrame < frameNum && caching._lastKeyframeIndex === i) ? caching._lastAddedLength : 0;
2280
- j = (caching.lastFrame < frameNum && caching._lastKeyframeIndex === i) ? caching._lastPoint : 0;
2281
- flag = true;
2282
- jLen = bezierData.points.length;
2283
- while (flag) {
2284
- addedLength += bezierData.points[j].partialLength;
2285
- if (distanceInLine === 0 || perc === 0 || j === bezierData.points.length - 1) {
2286
- kLen = bezierData.points[j].point.length;
2287
- for (k = 0; k < kLen; k += 1) {
2288
- newValue[k] = bezierData.points[j].point[k];
2289
- }
2290
- break;
2291
- } else if (distanceInLine >= addedLength && distanceInLine < addedLength + bezierData.points[j + 1].partialLength) {
2292
- segmentPerc = (distanceInLine - addedLength) / bezierData.points[j + 1].partialLength;
2293
- kLen = bezierData.points[j].point.length;
2294
- for (k = 0; k < kLen; k += 1) {
2295
- newValue[k] = bezierData.points[j].point[k] + (bezierData.points[j + 1].point[k] - bezierData.points[j].point[k]) * segmentPerc;
2296
- }
2297
- break;
2298
- }
2299
- if (j < jLen - 1) {
2300
- j += 1;
2301
- } else {
2302
- flag = false;
2303
- }
2304
- }
2305
- caching._lastPoint = j;
2306
- caching._lastAddedLength = addedLength - bezierData.points[j].partialLength;
2307
- caching._lastKeyframeIndex = i;
2308
- }
2309
- } else {
2310
- var outX, outY, inX, inY, keyValue;
2311
- len = keyData.s.length;
2312
- endValue = nextKeyData.s || keyData.e;
2313
- if (this.sh && keyData.h !== 1) {
2314
- if (frameNum >= nextKeyTime) {
2315
- newValue[0] = endValue[0];
2316
- newValue[1] = endValue[1];
2317
- newValue[2] = endValue[2];
2318
- } else if (frameNum <= keyTime) {
2319
- newValue[0] = keyData.s[0];
2320
- newValue[1] = keyData.s[1];
2321
- newValue[2] = keyData.s[2];
2322
- } else {
2323
- var quatStart = createQuaternion(keyData.s);
2324
- var quatEnd = createQuaternion(endValue);
2325
- var time = (frameNum - keyTime) / (nextKeyTime - keyTime);
2326
- quaternionToEuler(newValue, slerp(quatStart, quatEnd, time));
2327
- }
2328
-
2329
- } else {
2330
- for (i = 0; i < len; i += 1) {
2331
- if (keyData.h !== 1) {
2332
- if (frameNum >= nextKeyTime) {
2333
- perc = 1;
2334
- } else if (frameNum < keyTime) {
2335
- perc = 0;
2336
- } else {
2337
- if (keyData.o.x.constructor === Array) {
2338
- if (!keyData.__fnct) {
2339
- keyData.__fnct = [];
2340
- }
2341
- if (!keyData.__fnct[i]) {
2342
- outX = (typeof keyData.o.x[i] === 'undefined') ? keyData.o.x[0] : keyData.o.x[i];
2343
- outY = (typeof keyData.o.y[i] === 'undefined') ? keyData.o.y[0] : keyData.o.y[i];
2344
- inX = (typeof keyData.i.x[i] === 'undefined') ? keyData.i.x[0] : keyData.i.x[i];
2345
- inY = (typeof keyData.i.y[i] === 'undefined') ? keyData.i.y[0] : keyData.i.y[i];
2346
- fnc = BezierFactory.getBezierEasing(outX, outY, inX, inY).get;
2347
- keyData.__fnct[i] = fnc;
2348
- } else {
2349
- fnc = keyData.__fnct[i];
2350
- }
2351
- } else {
2352
- if (!keyData.__fnct) {
2353
- outX = keyData.o.x;
2354
- outY = keyData.o.y;
2355
- inX = keyData.i.x;
2356
- inY = keyData.i.y;
2357
- fnc = BezierFactory.getBezierEasing(outX, outY, inX, inY).get;
2358
- keyData.__fnct = fnc;
2359
- } else {
2360
- fnc = keyData.__fnct;
2361
- }
2362
- }
2363
- perc = fnc((frameNum - keyTime) / (nextKeyTime - keyTime));
2364
- }
2365
- }
2366
-
2367
- endValue = nextKeyData.s || keyData.e;
2368
- keyValue = keyData.h === 1 ? keyData.s[i] : keyData.s[i] + (endValue[i] - keyData.s[i]) * perc;
2369
-
2370
- if (this.propType === 'multidimensional') {
2371
- newValue[i] = keyValue;
2372
- } else {
2373
- newValue = keyValue;
2374
- }
2375
- }
2376
- }
2377
- }
2378
- caching.lastIndex = iterationIndex;
2379
- return newValue;
2380
- }
2381
-
2382
- //based on @Toji's https://github.com/toji/gl-matrix/
2383
- function slerp(a, b, t) {
2384
- var out = [];
2385
- var ax = a[0],
2386
- ay = a[1],
2387
- az = a[2],
2388
- aw = a[3],
2389
- bx = b[0],
2390
- by = b[1],
2391
- bz = b[2],
2392
- bw = b[3]
2393
-
2394
- var omega, cosom, sinom, scale0, scale1;
2395
-
2396
- cosom = ax * bx + ay * by + az * bz + aw * bw;
2397
- if (cosom < 0.0) {
2398
- cosom = -cosom;
2399
- bx = -bx;
2400
- by = -by;
2401
- bz = -bz;
2402
- bw = -bw;
2403
- }
2404
- if ((1.0 - cosom) > 0.000001) {
2405
- omega = Math.acos(cosom);
2406
- sinom = Math.sin(omega);
2407
- scale0 = Math.sin((1.0 - t) * omega) / sinom;
2408
- scale1 = Math.sin(t * omega) / sinom;
2409
- } else {
2410
- scale0 = 1.0 - t;
2411
- scale1 = t;
2412
- }
2413
- out[0] = scale0 * ax + scale1 * bx;
2414
- out[1] = scale0 * ay + scale1 * by;
2415
- out[2] = scale0 * az + scale1 * bz;
2416
- out[3] = scale0 * aw + scale1 * bw;
2417
-
2418
- return out;
2419
- }
2420
-
2421
- function quaternionToEuler(out, quat) {
2422
- var qx = quat[0];
2423
- var qy = quat[1];
2424
- var qz = quat[2];
2425
- var qw = quat[3];
2426
- var heading = Math.atan2(2 * qy * qw - 2 * qx * qz, 1 - 2 * qy * qy - 2 * qz * qz)
2427
- var attitude = Math.asin(2 * qx * qy + 2 * qz * qw)
2428
- var bank = Math.atan2(2 * qx * qw - 2 * qy * qz, 1 - 2 * qx * qx - 2 * qz * qz);
2429
- out[0] = heading / degToRads;
2430
- out[1] = attitude / degToRads;
2431
- out[2] = bank / degToRads;
2432
- }
2433
-
2434
- function createQuaternion(values) {
2435
- var heading = values[0] * degToRads;
2436
- var attitude = values[1] * degToRads;
2437
- var bank = values[2] * degToRads;
2438
- var c1 = Math.cos(heading / 2);
2439
- var c2 = Math.cos(attitude / 2);
2440
- var c3 = Math.cos(bank / 2);
2441
- var s1 = Math.sin(heading / 2);
2442
- var s2 = Math.sin(attitude / 2);
2443
- var s3 = Math.sin(bank / 2);
2444
- var w = c1 * c2 * c3 - s1 * s2 * s3;
2445
- var x = s1 * s2 * c3 + c1 * c2 * s3;
2446
- var y = s1 * c2 * c3 + c1 * s2 * s3;
2447
- var z = c1 * s2 * c3 - s1 * c2 * s3;
2448
-
2449
- return [x, y, z, w];
2450
- }
2451
-
2452
- function getValueAtCurrentTime() {
2453
- var frameNum = this.comp.renderedFrame - this.offsetTime;
2454
- var initTime = this.keyframes[0].t - this.offsetTime;
2455
- var endTime = this.keyframes[this.keyframes.length - 1].t - this.offsetTime;
2456
- if (!(frameNum === this._caching.lastFrame || (this._caching.lastFrame !== initFrame && ((this._caching.lastFrame >= endTime && frameNum >= endTime) || (this._caching.lastFrame < initTime && frameNum < initTime))))) {
2457
- if (this._caching.lastFrame >= frameNum) {
2458
- this._caching._lastKeyframeIndex = -1;
2459
- this._caching.lastIndex = 0;
2460
- }
2461
-
2462
- var renderResult = this.interpolateValue(frameNum, this._caching);
2463
- this.pv = renderResult;
2464
- }
2465
- this._caching.lastFrame = frameNum;
2466
- return this.pv;
2467
- }
2468
-
2469
- function setVValue(val) {
2470
- var multipliedValue;
2471
- if (this.propType === 'unidimensional') {
2472
- multipliedValue = val * this.mult;
2473
- if (math_abs(this.v - multipliedValue) > 0.00001) {
2474
- this.v = multipliedValue;
2475
- this._mdf = true;
2476
- }
2477
- } else {
2478
- var i = 0,
2479
- len = this.v.length;
2480
- while (i < len) {
2481
- multipliedValue = val[i] * this.mult;
2482
- if (math_abs(this.v[i] - multipliedValue) > 0.00001) {
2483
- this.v[i] = multipliedValue;
2484
- this._mdf = true;
2485
- }
2486
- i += 1;
2487
- }
2488
- }
2489
- }
2490
-
2491
- function processEffectsSequence() {
2492
- if (this.elem.globalData.frameId === this.frameId || !this.effectsSequence.length) {
2493
- return;
2494
- }
2495
- if (this.lock) {
2496
- this.setVValue(this.pv);
2497
- return;
2498
- }
2499
- this.lock = true;
2500
- this._mdf = this._isFirstFrame;
2501
- var multipliedValue;
2502
- var i, len = this.effectsSequence.length;
2503
- var finalValue = this.kf ? this.pv : this.data.k;
2504
- for (i = 0; i < len; i += 1) {
2505
- finalValue = this.effectsSequence[i](finalValue);
2506
- }
2507
- this.setVValue(finalValue);
2508
- this._isFirstFrame = false;
2509
- this.lock = false;
2510
- this.frameId = this.elem.globalData.frameId;
2511
- }
2512
-
2513
- function addEffect(effectFunction) {
2514
- this.effectsSequence.push(effectFunction);
2515
- this.container.addDynamicProperty(this);
2516
- }
2517
-
2518
- function ValueProperty(elem, data, mult, container) {
2519
- this.propType = 'unidimensional';
2520
- this.mult = mult || 1;
2521
- this.data = data;
2522
- this.v = mult ? data.k * mult : data.k;
2523
- this.pv = data.k;
2524
- this._mdf = false;
2525
- this.elem = elem;
2526
- this.container = container;
2527
- this.comp = elem.comp;
2528
- this.k = false;
2529
- this.kf = false;
2530
- this.vel = 0;
2531
- this.effectsSequence = [];
2532
- this._isFirstFrame = true;
2533
- this.getValue = processEffectsSequence;
2534
- this.setVValue = setVValue;
2535
- this.addEffect = addEffect;
2536
- }
2537
-
2538
- function MultiDimensionalProperty(elem, data, mult, container) {
2539
- this.propType = 'multidimensional';
2540
- this.mult = mult || 1;
2541
- this.data = data;
2542
- this._mdf = false;
2543
- this.elem = elem;
2544
- this.container = container;
2545
- this.comp = elem.comp;
2546
- this.k = false;
2547
- this.kf = false;
2548
- this.frameId = -1;
2549
- var i, len = data.k.length;
2550
- this.v = createTypedArray('float32', len);
2551
- this.pv = createTypedArray('float32', len);
2552
- var arr = createTypedArray('float32', len);
2553
- this.vel = createTypedArray('float32', len);
2554
- for (i = 0; i < len; i += 1) {
2555
- this.v[i] = data.k[i] * this.mult;
2556
- this.pv[i] = data.k[i];
2557
- }
2558
- this._isFirstFrame = true;
2559
- this.effectsSequence = [];
2560
- this.getValue = processEffectsSequence;
2561
- this.setVValue = setVValue;
2562
- this.addEffect = addEffect;
2563
- }
2564
-
2565
- function KeyframedValueProperty(elem, data, mult, container) {
2566
- this.propType = 'unidimensional';
2567
- this.keyframes = data.k;
2568
- this.offsetTime = elem.data.st;
2569
- this.frameId = -1;
2570
- this._caching = {
2571
- lastFrame: initFrame,
2572
- lastIndex: 0,
2573
- value: 0,
2574
- _lastKeyframeIndex: -1
2575
- };
2576
- this.k = true;
2577
- this.kf = true;
2578
- this.data = data;
2579
- this.mult = mult || 1;
2580
- this.elem = elem;
2581
- this.container = container;
2582
- this.comp = elem.comp;
2583
- this.v = initFrame;
2584
- this.pv = initFrame;
2585
- this._isFirstFrame = true;
2586
- this.getValue = processEffectsSequence;
2587
- this.setVValue = setVValue;
2588
- this.interpolateValue = interpolateValue;
2589
- this.effectsSequence = [getValueAtCurrentTime.bind(this)];
2590
- this.addEffect = addEffect;
2591
- }
2592
-
2593
- function KeyframedMultidimensionalProperty(elem, data, mult, container) {
2594
- this.propType = 'multidimensional';
2595
- var i, len = data.k.length;
2596
- var s, e, to, ti;
2597
- for (i = 0; i < len - 1; i += 1) {
2598
- if (data.k[i].to && data.k[i].s && data.k[i + 1] && data.k[i + 1].s) {
2599
- s = data.k[i].s;
2600
- e = data.k[i + 1].s;
2601
- to = data.k[i].to;
2602
- ti = data.k[i].ti;
2603
- 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]))) {
2604
- data.k[i].to = null;
2605
- data.k[i].ti = null;
2606
- }
2607
- if (s[0] === e[0] && s[1] === e[1] && to[0] === 0 && to[1] === 0 && ti[0] === 0 && ti[1] === 0) {
2608
- if (s.length === 2 || (s[2] === e[2] && to[2] === 0 && ti[2] === 0)) {
2609
- data.k[i].to = null;
2610
- data.k[i].ti = null;
2611
- }
2612
- }
2613
- }
2614
- }
2615
- this.effectsSequence = [getValueAtCurrentTime.bind(this)];
2616
- this.keyframes = data.k;
2617
- this.offsetTime = elem.data.st;
2618
- this.k = true;
2619
- this.kf = true;
2620
- this._isFirstFrame = true;
2621
- this.mult = mult || 1;
2622
- this.elem = elem;
2623
- this.container = container;
2624
- this.comp = elem.comp;
2625
- this.getValue = processEffectsSequence;
2626
- this.setVValue = setVValue;
2627
- this.interpolateValue = interpolateValue;
2628
- this.frameId = -1;
2629
- var arrLen = data.k[0].s.length;
2630
- this.v = createTypedArray('float32', arrLen);
2631
- this.pv = createTypedArray('float32', arrLen);
2632
- for (i = 0; i < arrLen; i += 1) {
2633
- this.v[i] = initFrame;
2634
- this.pv[i] = initFrame;
2635
- }
2636
- this._caching = {
2637
- lastFrame: initFrame,
2638
- lastIndex: 0,
2639
- value: createTypedArray('float32', arrLen)
2640
- };
2641
- this.addEffect = addEffect;
2642
- }
2643
-
2644
- function getProp(elem, data, type, mult, container) {
2645
- var p;
2646
- if (!data.k.length) {
2647
- p = new ValueProperty(elem, data, mult, container);
2648
- } else if (typeof (data.k[0]) === 'number') {
2649
- p = new MultiDimensionalProperty(elem, data, mult, container);
2650
- } else {
2651
- switch (type) {
2652
- case 0:
2653
- p = new KeyframedValueProperty(elem, data, mult, container);
2654
- break;
2655
- case 1:
2656
- p = new KeyframedMultidimensionalProperty(elem, data, mult, container);
2657
- break;
2658
- }
2659
- }
2660
- if (p.effectsSequence.length) {
2661
- container.addDynamicProperty(p);
2662
- }
2663
- return p;
2664
- }
2665
-
2666
- var ob = {
2667
- getProp: getProp
2668
- };
2669
- return ob;
2670
- }());
2671
- var TransformPropertyFactory = (function () {
2672
-
2673
- var defaultVector = [0, 0]
2674
-
2675
- function applyToMatrix(mat) {
2676
- var _mdf = this._mdf;
2677
- this.iterateDynamicProperties();
2678
- this._mdf = this._mdf || _mdf;
2679
- if (this.a) {
2680
- mat.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]);
2681
- }
2682
- if (this.s) {
2683
- mat.scale(this.s.v[0], this.s.v[1], this.s.v[2]);
2684
- }
2685
- if (this.sk) {
2686
- mat.skewFromAxis(-this.sk.v, this.sa.v);
2687
- }
2688
- if (this.r) {
2689
- mat.rotate(-this.r.v);
2690
- } else {
2691
- 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]);
2692
- }
2693
- if (this.data.p.s) {
2694
- if (this.data.p.z) {
2695
- mat.translate(this.px.v, this.py.v, -this.pz.v);
2696
- } else {
2697
- mat.translate(this.px.v, this.py.v, 0);
2698
- }
2699
- } else {
2700
- mat.translate(this.p.v[0], this.p.v[1], -this.p.v[2]);
2701
- }
2702
- }
2703
-
2704
- function processKeys(forceRender) {
2705
- if (this.elem.globalData.frameId === this.frameId) {
2706
- return;
2707
- }
2708
- if (this._isDirty) {
2709
- this.precalculateMatrix();
2710
- this._isDirty = false;
2711
- }
2712
-
2713
- this.iterateDynamicProperties();
2714
-
2715
- if (this._mdf || forceRender) {
2716
- this.v.cloneFromProps(this.pre.props);
2717
- if (this.appliedTransformations < 1) {
2718
- this.v.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]);
2719
- }
2720
- if (this.appliedTransformations < 2) {
2721
- this.v.scale(this.s.v[0], this.s.v[1], this.s.v[2]);
2722
- }
2723
- if (this.sk && this.appliedTransformations < 3) {
2724
- this.v.skewFromAxis(-this.sk.v, this.sa.v);
2725
- }
2726
- if (this.r && this.appliedTransformations < 4) {
2727
- this.v.rotate(-this.r.v);
2728
- } else if (!this.r && this.appliedTransformations < 4) {
2729
- 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]);
2730
- }
2731
- if (this.autoOriented) {
2732
- var v1, v2, frameRate = this.elem.globalData.frameRate;
2733
- if (this.p && this.p.keyframes && this.p.getValueAtTime) {
2734
- if (this.p._caching.lastFrame + this.p.offsetTime <= this.p.keyframes[0].t) {
2735
- v1 = this.p.getValueAtTime((this.p.keyframes[0].t + 0.01) / frameRate, 0);
2736
- v2 = this.p.getValueAtTime(this.p.keyframes[0].t / frameRate, 0);
2737
- } else if (this.p._caching.lastFrame + this.p.offsetTime >= this.p.keyframes[this.p.keyframes.length - 1].t) {
2738
- v1 = this.p.getValueAtTime((this.p.keyframes[this.p.keyframes.length - 1].t / frameRate), 0);
2739
- v2 = this.p.getValueAtTime((this.p.keyframes[this.p.keyframes.length - 1].t - 0.05) / frameRate, 0);
2740
- } else {
2741
- v1 = this.p.pv;
2742
- v2 = this.p.getValueAtTime((this.p._caching.lastFrame + this.p.offsetTime - 0.01) / frameRate, this.p.offsetTime);
2743
- }
2744
- } else if (this.px && this.px.keyframes && this.py.keyframes && this.px.getValueAtTime && this.py.getValueAtTime) {
2745
- v1 = [];
2746
- v2 = [];
2747
- var px = this.px,
2748
- py = this.py,
2749
- frameRate;
2750
- if (px._caching.lastFrame + px.offsetTime <= px.keyframes[0].t) {
2751
- v1[0] = px.getValueAtTime((px.keyframes[0].t + 0.01) / frameRate, 0);
2752
- v1[1] = py.getValueAtTime((py.keyframes[0].t + 0.01) / frameRate, 0);
2753
- v2[0] = px.getValueAtTime((px.keyframes[0].t) / frameRate, 0);
2754
- v2[1] = py.getValueAtTime((py.keyframes[0].t) / frameRate, 0);
2755
- } else if (px._caching.lastFrame + px.offsetTime >= px.keyframes[px.keyframes.length - 1].t) {
2756
- v1[0] = px.getValueAtTime((px.keyframes[px.keyframes.length - 1].t / frameRate), 0);
2757
- v1[1] = py.getValueAtTime((py.keyframes[py.keyframes.length - 1].t / frameRate), 0);
2758
- v2[0] = px.getValueAtTime((px.keyframes[px.keyframes.length - 1].t - 0.01) / frameRate, 0);
2759
- v2[1] = py.getValueAtTime((py.keyframes[py.keyframes.length - 1].t - 0.01) / frameRate, 0);
2760
- } else {
2761
- v1 = [px.pv, py.pv];
2762
- v2[0] = px.getValueAtTime((px._caching.lastFrame + px.offsetTime - 0.01) / frameRate, px.offsetTime);
2763
- v2[1] = py.getValueAtTime((py._caching.lastFrame + py.offsetTime - 0.01) / frameRate, py.offsetTime);
2764
- }
2765
- } else {
2766
- v1 = v2 = defaultVector
2767
- }
2768
- this.v.rotate(-Math.atan2(v1[1] - v2[1], v1[0] - v2[0]));
2769
- }
2770
- if (this.data.p && this.data.p.s) {
2771
- if (this.data.p.z) {
2772
- this.v.translate(this.px.v, this.py.v, -this.pz.v);
2773
- } else {
2774
- this.v.translate(this.px.v, this.py.v, 0);
2775
- }
2776
- } else {
2777
- this.v.translate(this.p.v[0], this.p.v[1], -this.p.v[2]);
2778
- }
2779
- }
2780
- this.frameId = this.elem.globalData.frameId;
2781
- }
2782
-
2783
- function precalculateMatrix() {
2784
- if (!this.a.k) {
2785
- this.pre.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]);
2786
- this.appliedTransformations = 1;
2787
- } else {
2788
- return;
2789
- }
2790
- if (!this.s.effectsSequence.length) {
2791
- this.pre.scale(this.s.v[0], this.s.v[1], this.s.v[2]);
2792
- this.appliedTransformations = 2;
2793
- } else {
2794
- return;
2795
- }
2796
- if (this.sk) {
2797
- if (!this.sk.effectsSequence.length && !this.sa.effectsSequence.length) {
2798
- this.pre.skewFromAxis(-this.sk.v, this.sa.v);
2799
- this.appliedTransformations = 3;
2800
- } else {
2801
- return;
2802
- }
2803
- }
2804
- if (this.r) {
2805
- if (!this.r.effectsSequence.length) {
2806
- this.pre.rotate(-this.r.v);
2807
- this.appliedTransformations = 4;
2808
- } else {
2809
- return;
2810
- }
2811
- } else if (!this.rz.effectsSequence.length && !this.ry.effectsSequence.length && !this.rx.effectsSequence.length && !this.or.effectsSequence.length) {
2812
- 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]);
2813
- this.appliedTransformations = 4;
2814
- }
2815
- }
2816
-
2817
- function autoOrient() {
2818
- //
2819
- //var prevP = this.getValueAtTime();
2820
- }
2821
-
2822
- function addDynamicProperty(prop) {
2823
- this._addDynamicProperty(prop);
2824
- this.elem.addDynamicProperty(prop);
2825
- this._isDirty = true;
2826
- }
2827
-
2828
- function TransformProperty(elem, data, container) {
2829
- this.elem = elem;
2830
- this.frameId = -1;
2831
- this.propType = 'transform';
2832
- this.data = data;
2833
- this.v = new Matrix();
2834
- //Precalculated matrix with non animated properties
2835
- this.pre = new Matrix();
2836
- this.appliedTransformations = 0;
2837
- this.initDynamicPropertyContainer(container || elem);
2838
- if (data.p && data.p.s) {
2839
- this.px = PropertyFactory.getProp(elem, data.p.x, 0, 0, this);
2840
- this.py = PropertyFactory.getProp(elem, data.p.y, 0, 0, this);
2841
- if (data.p.z) {
2842
- this.pz = PropertyFactory.getProp(elem, data.p.z, 0, 0, this);
2843
- }
2844
- } else {
2845
- this.p = PropertyFactory.getProp(elem, data.p || {
2846
- k: [0, 0, 0]
2847
- }, 1, 0, this);
2848
- }
2849
- if (data.rx) {
2850
- this.rx = PropertyFactory.getProp(elem, data.rx, 0, degToRads, this);
2851
- this.ry = PropertyFactory.getProp(elem, data.ry, 0, degToRads, this);
2852
- this.rz = PropertyFactory.getProp(elem, data.rz, 0, degToRads, this);
2853
- if (data.or.k[0].ti) {
2854
- var i, len = data.or.k.length;
2855
- for (i = 0; i < len; i += 1) {
2856
- data.or.k[i].to = data.or.k[i].ti = null;
2857
- }
2858
- }
2859
- this.or = PropertyFactory.getProp(elem, data.or, 1, degToRads, this);
2860
- //sh Indicates it needs to be capped between -180 and 180
2861
- this.or.sh = true;
2862
- } else {
2863
- this.r = PropertyFactory.getProp(elem, data.r || {
2864
- k: 0
2865
- }, 0, degToRads, this);
2866
- }
2867
- if (data.sk) {
2868
- this.sk = PropertyFactory.getProp(elem, data.sk, 0, degToRads, this);
2869
- this.sa = PropertyFactory.getProp(elem, data.sa, 0, degToRads, this);
2870
- }
2871
- this.a = PropertyFactory.getProp(elem, data.a || {
2872
- k: [0, 0, 0]
2873
- }, 1, 0, this);
2874
- this.s = PropertyFactory.getProp(elem, data.s || {
2875
- k: [100, 100, 100]
2876
- }, 1, 0.01, this);
2877
- // 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.
2878
- if (data.o) {
2879
- this.o = PropertyFactory.getProp(elem, data.o, 0, 0.01, elem);
2880
- } else {
2881
- this.o = {
2882
- _mdf: false,
2883
- v: 1
2884
- };
2885
- }
2886
- this._isDirty = true;
2887
- if (!this.dynamicProperties.length) {
2888
- this.getValue(true);
2889
- }
2890
- }
2891
-
2892
- TransformProperty.prototype = {
2893
- applyToMatrix: applyToMatrix,
2894
- getValue: processKeys,
2895
- precalculateMatrix: precalculateMatrix,
2896
- autoOrient: autoOrient
2897
- }
2898
-
2899
- extendPrototype([DynamicPropertyContainer], TransformProperty);
2900
- TransformProperty.prototype.addDynamicProperty = addDynamicProperty;
2901
- TransformProperty.prototype._addDynamicProperty = DynamicPropertyContainer.prototype.addDynamicProperty;
2902
-
2903
- function getTransformProperty(elem, data, container) {
2904
- return new TransformProperty(elem, data, container);
2905
- }
2906
-
2907
- return {
2908
- getTransformProperty: getTransformProperty
2909
- };
2910
-
2911
- }());
2912
-
2913
- function ShapePath() {
2914
- this.c = false;
2915
- this._length = 0;
2916
- this._maxLength = 8;
2917
- this.v = createSizedArray(this._maxLength);
2918
- this.o = createSizedArray(this._maxLength);
2919
- this.i = createSizedArray(this._maxLength);
2920
- }
2921
-
2922
- ShapePath.prototype.setPathData = function (closed, len) {
2923
- this.c = closed;
2924
- this.setLength(len);
2925
- var i = 0;
2926
- while (i < len) {
2927
- this.v[i] = point_pool.newElement();
2928
- this.o[i] = point_pool.newElement();
2929
- this.i[i] = point_pool.newElement();
2930
- i += 1;
2931
- }
2932
- };
2933
-
2934
- ShapePath.prototype.setLength = function (len) {
2935
- while (this._maxLength < len) {
2936
- this.doubleArrayLength();
2937
- }
2938
- this._length = len;
2939
- };
2940
-
2941
- ShapePath.prototype.doubleArrayLength = function () {
2942
- this.v = this.v.concat(createSizedArray(this._maxLength));
2943
- this.i = this.i.concat(createSizedArray(this._maxLength));
2944
- this.o = this.o.concat(createSizedArray(this._maxLength));
2945
- this._maxLength *= 2;
2946
- };
2947
-
2948
- ShapePath.prototype.setXYAt = function (x, y, type, pos, replace) {
2949
- var arr;
2950
- this._length = Math.max(this._length, pos + 1);
2951
- if (this._length >= this._maxLength) {
2952
- this.doubleArrayLength();
2953
- }
2954
- switch (type) {
2955
- case 'v':
2956
- arr = this.v;
2957
- break;
2958
- case 'i':
2959
- arr = this.i;
2960
- break;
2961
- case 'o':
2962
- arr = this.o;
2963
- break;
2964
- }
2965
- if (!arr[pos] || (arr[pos] && !replace)) {
2966
- arr[pos] = point_pool.newElement();
2967
- }
2968
- arr[pos][0] = x;
2969
- arr[pos][1] = y;
2970
- };
2971
-
2972
- ShapePath.prototype.setTripleAt = function (vX, vY, oX, oY, iX, iY, pos, replace) {
2973
- this.setXYAt(vX, vY, 'v', pos, replace);
2974
- this.setXYAt(oX, oY, 'o', pos, replace);
2975
- this.setXYAt(iX, iY, 'i', pos, replace);
2976
- };
2977
-
2978
- ShapePath.prototype.reverse = function () {
2979
- var newPath = new ShapePath();
2980
- newPath.setPathData(this.c, this._length);
2981
- var vertices = this.v,
2982
- outPoints = this.o,
2983
- inPoints = this.i;
2984
- var init = 0;
2985
- if (this.c) {
2986
- newPath.setTripleAt(vertices[0][0], vertices[0][1], inPoints[0][0], inPoints[0][1], outPoints[0][0], outPoints[0][1], 0, false);
2987
- init = 1;
2988
- }
2989
- var cnt = this._length - 1;
2990
- var len = this._length;
2991
-
2992
- var i;
2993
- for (i = init; i < len; i += 1) {
2994
- newPath.setTripleAt(vertices[cnt][0], vertices[cnt][1], inPoints[cnt][0], inPoints[cnt][1], outPoints[cnt][0], outPoints[cnt][1], i, false);
2995
- cnt -= 1;
2996
- }
2997
- return newPath;
2998
- };
2999
- var ShapePropertyFactory = (function () {
3000
-
3001
- var initFrame = -999999;
3002
-
3003
- function interpolateShape(frameNum, previousValue, caching) {
3004
- var iterationIndex = caching.lastIndex;
3005
- var keyPropS, keyPropE, isHold, j, k, jLen, kLen, perc, vertexValue;
3006
- var kf = this.keyframes;
3007
- if (frameNum < kf[0].t - this.offsetTime) {
3008
- keyPropS = kf[0].s[0];
3009
- isHold = true;
3010
- iterationIndex = 0;
3011
- } else if (frameNum >= kf[kf.length - 1].t - this.offsetTime) {
3012
- keyPropS = kf[kf.length - 1].s ? kf[kf.length - 1].s[0] : kf[kf.length - 2].e[0];
3013
- /*if(kf[kf.length - 1].s){
3014
- keyPropS = kf[kf.length - 1].s[0];
3015
- }else{
3016
- keyPropS = kf[kf.length - 2].e[0];
3017
- }*/
3018
- isHold = true;
3019
- } else {
3020
- var i = iterationIndex;
3021
- var len = kf.length - 1,
3022
- flag = true,
3023
- keyData, nextKeyData;
3024
- while (flag) {
3025
- keyData = kf[i];
3026
- nextKeyData = kf[i + 1];
3027
- if ((nextKeyData.t - this.offsetTime) > frameNum) {
3028
- break;
3029
- }
3030
- if (i < len - 1) {
3031
- i += 1;
3032
- } else {
3033
- flag = false;
3034
- }
3035
- }
3036
- isHold = keyData.h === 1;
3037
- iterationIndex = i;
3038
- if (!isHold) {
3039
- if (frameNum >= nextKeyData.t - this.offsetTime) {
3040
- perc = 1;
3041
- } else if (frameNum < keyData.t - this.offsetTime) {
3042
- perc = 0;
3043
- } else {
3044
- var fnc;
3045
- if (keyData.__fnct) {
3046
- fnc = keyData.__fnct;
3047
- } else {
3048
- fnc = BezierFactory.getBezierEasing(keyData.o.x, keyData.o.y, keyData.i.x, keyData.i.y).get;
3049
- keyData.__fnct = fnc;
3050
- }
3051
- perc = fnc((frameNum - (keyData.t - this.offsetTime)) / ((nextKeyData.t - this.offsetTime) - (keyData.t - this.offsetTime)));
3052
- }
3053
- keyPropE = nextKeyData.s ? nextKeyData.s[0] : keyData.e[0];
3054
- }
3055
- keyPropS = keyData.s[0];
3056
- }
3057
- jLen = previousValue._length;
3058
- kLen = keyPropS.i[0].length;
3059
- caching.lastIndex = iterationIndex;
3060
-
3061
- for (j = 0; j < jLen; j += 1) {
3062
- for (k = 0; k < kLen; k += 1) {
3063
- vertexValue = isHold ? keyPropS.i[j][k] : keyPropS.i[j][k] + (keyPropE.i[j][k] - keyPropS.i[j][k]) * perc;
3064
- previousValue.i[j][k] = vertexValue;
3065
- vertexValue = isHold ? keyPropS.o[j][k] : keyPropS.o[j][k] + (keyPropE.o[j][k] - keyPropS.o[j][k]) * perc;
3066
- previousValue.o[j][k] = vertexValue;
3067
- vertexValue = isHold ? keyPropS.v[j][k] : keyPropS.v[j][k] + (keyPropE.v[j][k] - keyPropS.v[j][k]) * perc;
3068
- previousValue.v[j][k] = vertexValue;
3069
- }
3070
- }
3071
- }
3072
-
3073
- function interpolateShapeCurrentTime() {
3074
- var frameNum = this.comp.renderedFrame - this.offsetTime;
3075
- var initTime = this.keyframes[0].t - this.offsetTime;
3076
- var endTime = this.keyframes[this.keyframes.length - 1].t - this.offsetTime;
3077
- var lastFrame = this._caching.lastFrame;
3078
- if (!(lastFrame !== initFrame && ((lastFrame < initTime && frameNum < initTime) || (lastFrame > endTime && frameNum > endTime)))) {
3079
- ////
3080
- this._caching.lastIndex = lastFrame < frameNum ? this._caching.lastIndex : 0;
3081
- this.interpolateShape(frameNum, this.pv, this._caching);
3082
- ////
3083
- }
3084
- this._caching.lastFrame = frameNum;
3085
- return this.pv;
3086
- }
3087
-
3088
- function resetShape() {
3089
- this.paths = this.localShapeCollection;
3090
- }
3091
-
3092
- function shapesEqual(shape1, shape2) {
3093
- if (shape1._length !== shape2._length || shape1.c !== shape2.c) {
3094
- return false;
3095
- }
3096
- var i, len = shape1._length;
3097
- for (i = 0; i < len; i += 1) {
3098
- if (shape1.v[i][0] !== shape2.v[i][0] ||
3099
- shape1.v[i][1] !== shape2.v[i][1] ||
3100
- shape1.o[i][0] !== shape2.o[i][0] ||
3101
- shape1.o[i][1] !== shape2.o[i][1] ||
3102
- shape1.i[i][0] !== shape2.i[i][0] ||
3103
- shape1.i[i][1] !== shape2.i[i][1]) {
3104
- return false;
3105
- }
3106
- }
3107
- return true;
3108
- }
3109
-
3110
- function setVValue(newPath) {
3111
- if (!shapesEqual(this.v, newPath)) {
3112
- this.v = shape_pool.clone(newPath);
3113
- this.localShapeCollection.releaseShapes();
3114
- this.localShapeCollection.addShape(this.v);
3115
- this._mdf = true;
3116
- this.paths = this.localShapeCollection;
3117
- }
3118
- }
3119
-
3120
- function processEffectsSequence() {
3121
- if (this.elem.globalData.frameId === this.frameId) {
3122
- return;
3123
- } else if (!this.effectsSequence.length) {
3124
- this._mdf = false;
3125
- return;
3126
- }
3127
- if (this.lock) {
3128
- this.setVValue(this.pv);
3129
- return;
3130
- }
3131
- this.lock = true;
3132
- this._mdf = false;
3133
- var finalValue = this.kf ? this.pv : this.data.ks ? this.data.ks.k : this.data.pt.k;
3134
- var i, len = this.effectsSequence.length;
3135
- for (i = 0; i < len; i += 1) {
3136
- finalValue = this.effectsSequence[i](finalValue);
3137
- }
3138
- this.setVValue(finalValue);
3139
- this.lock = false;
3140
- this.frameId = this.elem.globalData.frameId;
3141
- };
3142
-
3143
- function ShapeProperty(elem, data, type) {
3144
- this.propType = 'shape';
3145
- this.comp = elem.comp;
3146
- this.container = elem;
3147
- this.elem = elem;
3148
- this.data = data;
3149
- this.k = false;
3150
- this.kf = false;
3151
- this._mdf = false;
3152
- var pathData = type === 3 ? data.pt.k : data.ks.k;
3153
- this.v = shape_pool.clone(pathData);
3154
- this.pv = shape_pool.clone(this.v);
3155
- this.localShapeCollection = shapeCollection_pool.newShapeCollection();
3156
- this.paths = this.localShapeCollection;
3157
- this.paths.addShape(this.v);
3158
- this.reset = resetShape;
3159
- this.effectsSequence = [];
3160
- }
3161
-
3162
- function addEffect(effectFunction) {
3163
- this.effectsSequence.push(effectFunction);
3164
- this.container.addDynamicProperty(this);
3165
- }
3166
-
3167
- ShapeProperty.prototype.interpolateShape = interpolateShape;
3168
- ShapeProperty.prototype.getValue = processEffectsSequence;
3169
- ShapeProperty.prototype.setVValue = setVValue;
3170
- ShapeProperty.prototype.addEffect = addEffect;
3171
-
3172
- function KeyframedShapeProperty(elem, data, type) {
3173
- this.propType = 'shape';
3174
- this.comp = elem.comp;
3175
- this.elem = elem;
3176
- this.container = elem;
3177
- this.offsetTime = elem.data.st;
3178
- this.keyframes = type === 3 ? data.pt.k : data.ks.k;
3179
- this.k = true;
3180
- this.kf = true;
3181
- var i, len = this.keyframes[0].s[0].i.length;
3182
- var jLen = this.keyframes[0].s[0].i[0].length;
3183
- this.v = shape_pool.newElement();
3184
- this.v.setPathData(this.keyframes[0].s[0].c, len);
3185
- this.pv = shape_pool.clone(this.v);
3186
- this.localShapeCollection = shapeCollection_pool.newShapeCollection();
3187
- this.paths = this.localShapeCollection;
3188
- this.paths.addShape(this.v);
3189
- this.lastFrame = initFrame;
3190
- this.reset = resetShape;
3191
- this._caching = {
3192
- lastFrame: initFrame,
3193
- lastIndex: 0
3194
- };
3195
- this.effectsSequence = [interpolateShapeCurrentTime.bind(this)];
3196
- }
3197
- KeyframedShapeProperty.prototype.getValue = processEffectsSequence;
3198
- KeyframedShapeProperty.prototype.interpolateShape = interpolateShape;
3199
- KeyframedShapeProperty.prototype.setVValue = setVValue;
3200
- KeyframedShapeProperty.prototype.addEffect = addEffect;
3201
-
3202
- var EllShapeProperty = (function () {
3203
-
3204
- var cPoint = roundCorner;
3205
-
3206
- function EllShapeProperty(elem, data) {
3207
- /*this.v = {
3208
- v: createSizedArray(4),
3209
- i: createSizedArray(4),
3210
- o: createSizedArray(4),
3211
- c: true
3212
- };*/
3213
- this.v = shape_pool.newElement();
3214
- this.v.setPathData(true, 4);
3215
- this.localShapeCollection = shapeCollection_pool.newShapeCollection();
3216
- this.paths = this.localShapeCollection;
3217
- this.localShapeCollection.addShape(this.v);
3218
- this.d = data.d;
3219
- this.elem = elem;
3220
- this.comp = elem.comp;
3221
- this.frameId = -1;
3222
- this.initDynamicPropertyContainer(elem);
3223
- this.p = PropertyFactory.getProp(elem, data.p, 1, 0, this);
3224
- this.s = PropertyFactory.getProp(elem, data.s, 1, 0, this);
3225
- if (this.dynamicProperties.length) {
3226
- this.k = true;
3227
- } else {
3228
- this.k = false;
3229
- this.convertEllToPath();
3230
- }
3231
- };
3232
-
3233
- EllShapeProperty.prototype = {
3234
- reset: resetShape,
3235
- getValue: function () {
3236
- if (this.elem.globalData.frameId === this.frameId) {
3237
- return;
3238
- }
3239
- this.frameId = this.elem.globalData.frameId;
3240
- this.iterateDynamicProperties();
3241
-
3242
- if (this._mdf) {
3243
- this.convertEllToPath();
3244
- }
3245
- },
3246
- convertEllToPath: function () {
3247
- var p0 = this.p.v[0],
3248
- p1 = this.p.v[1],
3249
- s0 = this.s.v[0] / 2,
3250
- s1 = this.s.v[1] / 2;
3251
- var _cw = this.d !== 3;
3252
- var _v = this.v;
3253
- _v.v[0][0] = p0;
3254
- _v.v[0][1] = p1 - s1;
3255
- _v.v[1][0] = _cw ? p0 + s0 : p0 - s0;
3256
- _v.v[1][1] = p1;
3257
- _v.v[2][0] = p0;
3258
- _v.v[2][1] = p1 + s1;
3259
- _v.v[3][0] = _cw ? p0 - s0 : p0 + s0;
3260
- _v.v[3][1] = p1;
3261
- _v.i[0][0] = _cw ? p0 - s0 * cPoint : p0 + s0 * cPoint;
3262
- _v.i[0][1] = p1 - s1;
3263
- _v.i[1][0] = _cw ? p0 + s0 : p0 - s0;
3264
- _v.i[1][1] = p1 - s1 * cPoint;
3265
- _v.i[2][0] = _cw ? p0 + s0 * cPoint : p0 - s0 * cPoint;
3266
- _v.i[2][1] = p1 + s1;
3267
- _v.i[3][0] = _cw ? p0 - s0 : p0 + s0;
3268
- _v.i[3][1] = p1 + s1 * cPoint;
3269
- _v.o[0][0] = _cw ? p0 + s0 * cPoint : p0 - s0 * cPoint;
3270
- _v.o[0][1] = p1 - s1;
3271
- _v.o[1][0] = _cw ? p0 + s0 : p0 - s0;
3272
- _v.o[1][1] = p1 + s1 * cPoint;
3273
- _v.o[2][0] = _cw ? p0 - s0 * cPoint : p0 + s0 * cPoint;
3274
- _v.o[2][1] = p1 + s1;
3275
- _v.o[3][0] = _cw ? p0 - s0 : p0 + s0;
3276
- _v.o[3][1] = p1 - s1 * cPoint;
3277
- }
3278
- }
3279
-
3280
- extendPrototype([DynamicPropertyContainer], EllShapeProperty);
3281
-
3282
- return EllShapeProperty;
3283
- }());
3284
-
3285
- var StarShapeProperty = (function () {
3286
-
3287
- function StarShapeProperty(elem, data) {
3288
- this.v = shape_pool.newElement();
3289
- this.v.setPathData(true, 0);
3290
- this.elem = elem;
3291
- this.comp = elem.comp;
3292
- this.data = data;
3293
- this.frameId = -1;
3294
- this.d = data.d;
3295
- this.initDynamicPropertyContainer(elem);
3296
- if (data.sy === 1) {
3297
- this.ir = PropertyFactory.getProp(elem, data.ir, 0, 0, this);
3298
- this.is = PropertyFactory.getProp(elem, data.is, 0, 0.01, this);
3299
- this.convertToPath = this.convertStarToPath;
3300
- } else {
3301
- this.convertToPath = this.convertPolygonToPath;
3302
- }
3303
- this.pt = PropertyFactory.getProp(elem, data.pt, 0, 0, this);
3304
- this.p = PropertyFactory.getProp(elem, data.p, 1, 0, this);
3305
- this.r = PropertyFactory.getProp(elem, data.r, 0, degToRads, this);
3306
- this.or = PropertyFactory.getProp(elem, data.or, 0, 0, this);
3307
- this.os = PropertyFactory.getProp(elem, data.os, 0, 0.01, this);
3308
- this.localShapeCollection = shapeCollection_pool.newShapeCollection();
3309
- this.localShapeCollection.addShape(this.v);
3310
- this.paths = this.localShapeCollection;
3311
- if (this.dynamicProperties.length) {
3312
- this.k = true;
3313
- } else {
3314
- this.k = false;
3315
- this.convertToPath();
3316
- }
3317
- };
3318
-
3319
- StarShapeProperty.prototype = {
3320
- reset: resetShape,
3321
- getValue: function () {
3322
- if (this.elem.globalData.frameId === this.frameId) {
3323
- return;
3324
- }
3325
- this.frameId = this.elem.globalData.frameId;
3326
- this.iterateDynamicProperties();
3327
- if (this._mdf) {
3328
- this.convertToPath();
3329
- }
3330
- },
3331
- convertStarToPath: function () {
3332
- var numPts = Math.floor(this.pt.v) * 2;
3333
- var angle = Math.PI * 2 / numPts;
3334
- /*this.v.v.length = numPts;
3335
- this.v.i.length = numPts;
3336
- this.v.o.length = numPts;*/
3337
- var longFlag = true;
3338
- var longRad = this.or.v;
3339
- var shortRad = this.ir.v;
3340
- var longRound = this.os.v;
3341
- var shortRound = this.is.v;
3342
- var longPerimSegment = 2 * Math.PI * longRad / (numPts * 2);
3343
- var shortPerimSegment = 2 * Math.PI * shortRad / (numPts * 2);
3344
- var i, rad, roundness, perimSegment, currentAng = -Math.PI / 2;
3345
- currentAng += this.r.v;
3346
- var dir = this.data.d === 3 ? -1 : 1;
3347
- this.v._length = 0;
3348
- for (i = 0; i < numPts; i += 1) {
3349
- rad = longFlag ? longRad : shortRad;
3350
- roundness = longFlag ? longRound : shortRound;
3351
- perimSegment = longFlag ? longPerimSegment : shortPerimSegment;
3352
- var x = rad * Math.cos(currentAng);
3353
- var y = rad * Math.sin(currentAng);
3354
- var ox = x === 0 && y === 0 ? 0 : y / Math.sqrt(x * x + y * y);
3355
- var oy = x === 0 && y === 0 ? 0 : -x / Math.sqrt(x * x + y * y);
3356
- x += +this.p.v[0];
3357
- y += +this.p.v[1];
3358
- 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);
3359
-
3360
- /*this.v.v[i] = [x,y];
3361
- this.v.i[i] = [x+ox*perimSegment*roundness*dir,y+oy*perimSegment*roundness*dir];
3362
- this.v.o[i] = [x-ox*perimSegment*roundness*dir,y-oy*perimSegment*roundness*dir];
3363
- this.v._length = numPts;*/
3364
- longFlag = !longFlag;
3365
- currentAng += angle * dir;
3366
- }
3367
- },
3368
- convertPolygonToPath: function () {
3369
- var numPts = Math.floor(this.pt.v);
3370
- var angle = Math.PI * 2 / numPts;
3371
- var rad = this.or.v;
3372
- var roundness = this.os.v;
3373
- var perimSegment = 2 * Math.PI * rad / (numPts * 4);
3374
- var i, currentAng = -Math.PI / 2;
3375
- var dir = this.data.d === 3 ? -1 : 1;
3376
- currentAng += this.r.v;
3377
- this.v._length = 0;
3378
- for (i = 0; i < numPts; i += 1) {
3379
- var x = rad * Math.cos(currentAng);
3380
- var y = rad * Math.sin(currentAng);
3381
- var ox = x === 0 && y === 0 ? 0 : y / Math.sqrt(x * x + y * y);
3382
- var oy = x === 0 && y === 0 ? 0 : -x / Math.sqrt(x * x + y * y);
3383
- x += +this.p.v[0];
3384
- y += +this.p.v[1];
3385
- 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);
3386
- currentAng += angle * dir;
3387
- }
3388
- this.paths.length = 0;
3389
- this.paths[0] = this.v;
3390
- }
3391
-
3392
- }
3393
- extendPrototype([DynamicPropertyContainer], StarShapeProperty);
3394
-
3395
- return StarShapeProperty;
3396
- }());
3397
-
3398
- var RectShapeProperty = (function () {
3399
-
3400
- function RectShapeProperty(elem, data) {
3401
- this.v = shape_pool.newElement();
3402
- this.v.c = true;
3403
- this.localShapeCollection = shapeCollection_pool.newShapeCollection();
3404
- this.localShapeCollection.addShape(this.v);
3405
- this.paths = this.localShapeCollection;
3406
- this.elem = elem;
3407
- this.comp = elem.comp;
3408
- this.frameId = -1;
3409
- this.d = data.d;
3410
- this.initDynamicPropertyContainer(elem);
3411
- this.p = PropertyFactory.getProp(elem, data.p, 1, 0, this);
3412
- this.s = PropertyFactory.getProp(elem, data.s, 1, 0, this);
3413
- this.r = PropertyFactory.getProp(elem, data.r, 0, 0, this);
3414
- if (this.dynamicProperties.length) {
3415
- this.k = true;
3416
- } else {
3417
- this.k = false;
3418
- this.convertRectToPath();
3419
- }
3420
- };
3421
-
3422
- RectShapeProperty.prototype = {
3423
- convertRectToPath: function () {
3424
- var p0 = this.p.v[0],
3425
- p1 = this.p.v[1],
3426
- v0 = this.s.v[0] / 2,
3427
- v1 = this.s.v[1] / 2;
3428
- var round = bm_min(v0, v1, this.r.v);
3429
- var cPoint = round * (1 - roundCorner);
3430
- this.v._length = 0;
3431
-
3432
- if (this.d === 2 || this.d === 1) {
3433
- this.v.setTripleAt(p0 + v0, p1 - v1 + round, p0 + v0, p1 - v1 + round, p0 + v0, p1 - v1 + cPoint, 0, true);
3434
- this.v.setTripleAt(p0 + v0, p1 + v1 - round, p0 + v0, p1 + v1 - cPoint, p0 + v0, p1 + v1 - round, 1, true);
3435
- if (round !== 0) {
3436
- this.v.setTripleAt(p0 + v0 - round, p1 + v1, p0 + v0 - round, p1 + v1, p0 + v0 - cPoint, p1 + v1, 2, true);
3437
- this.v.setTripleAt(p0 - v0 + round, p1 + v1, p0 - v0 + cPoint, p1 + v1, p0 - v0 + round, p1 + v1, 3, true);
3438
- this.v.setTripleAt(p0 - v0, p1 + v1 - round, p0 - v0, p1 + v1 - round, p0 - v0, p1 + v1 - cPoint, 4, true);
3439
- this.v.setTripleAt(p0 - v0, p1 - v1 + round, p0 - v0, p1 - v1 + cPoint, p0 - v0, p1 - v1 + round, 5, true);
3440
- this.v.setTripleAt(p0 - v0 + round, p1 - v1, p0 - v0 + round, p1 - v1, p0 - v0 + cPoint, p1 - v1, 6, true);
3441
- this.v.setTripleAt(p0 + v0 - round, p1 - v1, p0 + v0 - cPoint, p1 - v1, p0 + v0 - round, p1 - v1, 7, true);
3442
- } else {
3443
- this.v.setTripleAt(p0 - v0, p1 + v1, p0 - v0 + cPoint, p1 + v1, p0 - v0, p1 + v1, 2);
3444
- this.v.setTripleAt(p0 - v0, p1 - v1, p0 - v0, p1 - v1 + cPoint, p0 - v0, p1 - v1, 3);
3445
- }
3446
- } else {
3447
- this.v.setTripleAt(p0 + v0, p1 - v1 + round, p0 + v0, p1 - v1 + cPoint, p0 + v0, p1 - v1 + round, 0, true);
3448
- if (round !== 0) {
3449
- this.v.setTripleAt(p0 + v0 - round, p1 - v1, p0 + v0 - round, p1 - v1, p0 + v0 - cPoint, p1 - v1, 1, true);
3450
- this.v.setTripleAt(p0 - v0 + round, p1 - v1, p0 - v0 + cPoint, p1 - v1, p0 - v0 + round, p1 - v1, 2, true);
3451
- this.v.setTripleAt(p0 - v0, p1 - v1 + round, p0 - v0, p1 - v1 + round, p0 - v0, p1 - v1 + cPoint, 3, true);
3452
- this.v.setTripleAt(p0 - v0, p1 + v1 - round, p0 - v0, p1 + v1 - cPoint, p0 - v0, p1 + v1 - round, 4, true);
3453
- this.v.setTripleAt(p0 - v0 + round, p1 + v1, p0 - v0 + round, p1 + v1, p0 - v0 + cPoint, p1 + v1, 5, true);
3454
- this.v.setTripleAt(p0 + v0 - round, p1 + v1, p0 + v0 - cPoint, p1 + v1, p0 + v0 - round, p1 + v1, 6, true);
3455
- this.v.setTripleAt(p0 + v0, p1 + v1 - round, p0 + v0, p1 + v1 - round, p0 + v0, p1 + v1 - cPoint, 7, true);
3456
- } else {
3457
- this.v.setTripleAt(p0 - v0, p1 - v1, p0 - v0 + cPoint, p1 - v1, p0 - v0, p1 - v1, 1, true);
3458
- this.v.setTripleAt(p0 - v0, p1 + v1, p0 - v0, p1 + v1 - cPoint, p0 - v0, p1 + v1, 2, true);
3459
- this.v.setTripleAt(p0 + v0, p1 + v1, p0 + v0 - cPoint, p1 + v1, p0 + v0, p1 + v1, 3, true);
3460
-
3461
- }
3462
- }
3463
- },
3464
- getValue: function (frameNum) {
3465
- if (this.elem.globalData.frameId === this.frameId) {
3466
- return;
3467
- }
3468
- this.frameId = this.elem.globalData.frameId;
3469
- this.iterateDynamicProperties();
3470
- if (this._mdf) {
3471
- this.convertRectToPath();
3472
- }
3473
-
3474
- },
3475
- reset: resetShape
3476
- }
3477
- extendPrototype([DynamicPropertyContainer], RectShapeProperty);
3478
-
3479
- return RectShapeProperty;
3480
- }());
3481
-
3482
- function getShapeProp(elem, data, type) {
3483
- var prop;
3484
- if (type === 3 || type === 4) {
3485
- var dataProp = type === 3 ? data.pt : data.ks;
3486
- var keys = dataProp.k;
3487
- if (keys.length) {
3488
- prop = new KeyframedShapeProperty(elem, data, type);
3489
- } else {
3490
- prop = new ShapeProperty(elem, data, type);
3491
- }
3492
- } else if (type === 5) {
3493
- prop = new RectShapeProperty(elem, data);
3494
- } else if (type === 6) {
3495
- prop = new EllShapeProperty(elem, data);
3496
- } else if (type === 7) {
3497
- prop = new StarShapeProperty(elem, data);
3498
- }
3499
- if (prop.k) {
3500
- elem.addDynamicProperty(prop);
3501
- }
3502
- return prop;
3503
- }
3504
-
3505
- function getConstructorFunction() {
3506
- return ShapeProperty;
3507
- }
3508
-
3509
- function getKeyframedConstructorFunction() {
3510
- return KeyframedShapeProperty;
3511
- }
3512
-
3513
- var ob = {};
3514
- ob.getShapeProp = getShapeProp;
3515
- ob.getConstructorFunction = getConstructorFunction;
3516
- ob.getKeyframedConstructorFunction = getKeyframedConstructorFunction;
3517
- return ob;
3518
- }());
3519
- var ShapeModifiers = (function () {
3520
- var ob = {};
3521
- var modifiers = {};
3522
- ob.registerModifier = registerModifier;
3523
- ob.getModifier = getModifier;
3524
-
3525
- function registerModifier(nm, factory) {
3526
- if (!modifiers[nm]) {
3527
- modifiers[nm] = factory;
3528
- }
3529
- }
3530
-
3531
- function getModifier(nm, elem, data) {
3532
- return new modifiers[nm](elem, data);
3533
- }
3534
-
3535
- return ob;
3536
- }());
3537
-
3538
- function ShapeModifier() { }
3539
- ShapeModifier.prototype.initModifierProperties = function () { };
3540
- ShapeModifier.prototype.addShapeToModifier = function () { };
3541
- ShapeModifier.prototype.addShape = function (data) {
3542
- if (!this.closed) {
3543
- // 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.
3544
- data.sh.container.addDynamicProperty(data.sh);
3545
- var shapeData = {
3546
- shape: data.sh,
3547
- data: data,
3548
- localShapeCollection: shapeCollection_pool.newShapeCollection()
3549
- };
3550
- this.shapes.push(shapeData);
3551
- this.addShapeToModifier(shapeData);
3552
- if (this._isAnimated) {
3553
- data.setAsAnimated();
3554
- }
3555
- }
3556
- };
3557
- ShapeModifier.prototype.init = function (elem, data) {
3558
- this.shapes = [];
3559
- this.elem = elem;
3560
- this.initDynamicPropertyContainer(elem);
3561
- this.initModifierProperties(elem, data);
3562
- this.frameId = initialDefaultFrame;
3563
- this.closed = false;
3564
- this.k = false;
3565
- if (this.dynamicProperties.length) {
3566
- this.k = true;
3567
- } else {
3568
- this.getValue(true);
3569
- }
3570
- };
3571
- ShapeModifier.prototype.processKeys = function () {
3572
- if (this.elem.globalData.frameId === this.frameId) {
3573
- return;
3574
- }
3575
- this.frameId = this.elem.globalData.frameId;
3576
- this.iterateDynamicProperties();
3577
- };
3578
-
3579
- extendPrototype([DynamicPropertyContainer], ShapeModifier);
3580
-
3581
- function TrimModifier() { }
3582
- extendPrototype([ShapeModifier], TrimModifier);
3583
- TrimModifier.prototype.initModifierProperties = function (elem, data) {
3584
- this.s = PropertyFactory.getProp(elem, data.s, 0, 0.01, this);
3585
- this.e = PropertyFactory.getProp(elem, data.e, 0, 0.01, this);
3586
- this.o = PropertyFactory.getProp(elem, data.o, 0, 0, this);
3587
- this.sValue = 0;
3588
- this.eValue = 0;
3589
- this.getValue = this.processKeys;
3590
- this.m = data.m;
3591
- this._isAnimated = !!this.s.effectsSequence.length || !!this.e.effectsSequence.length || !!this.o.effectsSequence.length;
3592
- };
3593
-
3594
- TrimModifier.prototype.addShapeToModifier = function (shapeData) {
3595
- shapeData.pathsData = [];
3596
- };
3597
-
3598
- TrimModifier.prototype.calculateShapeEdges = function (s, e, shapeLength, addedLength, totalModifierLength) {
3599
- var segments = [];
3600
- if (e <= 1) {
3601
- segments.push({
3602
- s: s,
3603
- e: e
3604
- });
3605
- } else if (s >= 1) {
3606
- segments.push({
3607
- s: s - 1,
3608
- e: e - 1
3609
- });
3610
- } else {
3611
- segments.push({
3612
- s: s,
3613
- e: 1
3614
- });
3615
- segments.push({
3616
- s: 0,
3617
- e: e - 1
3618
- });
3619
- }
3620
- var shapeSegments = [];
3621
- var i, len = segments.length,
3622
- segmentOb;
3623
- for (i = 0; i < len; i += 1) {
3624
- segmentOb = segments[i];
3625
- if (segmentOb.e * totalModifierLength < addedLength || segmentOb.s * totalModifierLength > addedLength + shapeLength) {
3626
-
3627
- } else {
3628
- var shapeS, shapeE;
3629
- if (segmentOb.s * totalModifierLength <= addedLength) {
3630
- shapeS = 0;
3631
- } else {
3632
- shapeS = (segmentOb.s * totalModifierLength - addedLength) / shapeLength;
3633
- }
3634
- if (segmentOb.e * totalModifierLength >= addedLength + shapeLength) {
3635
- shapeE = 1;
3636
- } else {
3637
- shapeE = ((segmentOb.e * totalModifierLength - addedLength) / shapeLength);
3638
- }
3639
- shapeSegments.push([shapeS, shapeE]);
3640
- }
3641
- }
3642
- if (!shapeSegments.length) {
3643
- shapeSegments.push([0, 0]);
3644
- }
3645
- return shapeSegments;
3646
- };
3647
-
3648
- TrimModifier.prototype.releasePathsData = function (pathsData) {
3649
- var i, len = pathsData.length;
3650
- for (i = 0; i < len; i += 1) {
3651
- segments_length_pool.release(pathsData[i]);
3652
- }
3653
- pathsData.length = 0;
3654
- return pathsData;
3655
- };
3656
-
3657
- TrimModifier.prototype.processShapes = function (_isFirstFrame) {
3658
- var s, e;
3659
- if (this._mdf || _isFirstFrame) {
3660
- var o = (this.o.v % 360) / 360;
3661
- if (o < 0) {
3662
- o += 1;
3663
- }
3664
- s = (this.s.v > 1 ? 1 : this.s.v < 0 ? 0 : this.s.v) + o;
3665
- e = (this.e.v > 1 ? 1 : this.e.v < 0 ? 0 : this.e.v) + o;
3666
- if (s === e) {
3667
-
3668
- }
3669
- if (s > e) {
3670
- var _s = s;
3671
- s = e;
3672
- e = _s;
3673
- }
3674
- s = Math.round(s * 10000) * 0.0001;
3675
- e = Math.round(e * 10000) * 0.0001;
3676
- this.sValue = s;
3677
- this.eValue = e;
3678
- } else {
3679
- s = this.sValue;
3680
- e = this.eValue;
3681
- }
3682
- var shapePaths;
3683
- var i, len = this.shapes.length,
3684
- j, jLen;
3685
- var pathsData, pathData, totalShapeLength, totalModifierLength = 0;
3686
-
3687
- if (e === s) {
3688
- for (i = 0; i < len; i += 1) {
3689
- this.shapes[i].localShapeCollection.releaseShapes();
3690
- this.shapes[i].shape._mdf = true;
3691
- this.shapes[i].shape.paths = this.shapes[i].localShapeCollection;
3692
- }
3693
- } else if (!((e === 1 && s === 0) || (e === 0 && s === 1))) {
3694
- var segments = [],
3695
- shapeData, localShapeCollection;
3696
- for (i = 0; i < len; i += 1) {
3697
- shapeData = this.shapes[i];
3698
- // if shape hasn't changed and trim properties haven't changed, cached previous path can be used
3699
- if (!shapeData.shape._mdf && !this._mdf && !_isFirstFrame && this.m !== 2) {
3700
- shapeData.shape.paths = shapeData.localShapeCollection;
3701
- } else {
3702
- shapePaths = shapeData.shape.paths;
3703
- jLen = shapePaths._length;
3704
- totalShapeLength = 0;
3705
- if (!shapeData.shape._mdf && shapeData.pathsData.length) {
3706
- totalShapeLength = shapeData.totalShapeLength;
3707
- } else {
3708
- pathsData = this.releasePathsData(shapeData.pathsData);
3709
- for (j = 0; j < jLen; j += 1) {
3710
- pathData = bez.getSegmentsLength(shapePaths.shapes[j]);
3711
- pathsData.push(pathData);
3712
- totalShapeLength += pathData.totalLength;
3713
- }
3714
- shapeData.totalShapeLength = totalShapeLength;
3715
- shapeData.pathsData = pathsData;
3716
- }
3717
-
3718
- totalModifierLength += totalShapeLength;
3719
- shapeData.shape._mdf = true;
3720
- }
3721
- }
3722
- var shapeS = s,
3723
- shapeE = e,
3724
- addedLength = 0,
3725
- edges;
3726
- for (i = len - 1; i >= 0; i -= 1) {
3727
- shapeData = this.shapes[i];
3728
- if (shapeData.shape._mdf) {
3729
- localShapeCollection = shapeData.localShapeCollection;
3730
- localShapeCollection.releaseShapes();
3731
- //if m === 2 means paths are trimmed individually so edges need to be found for this specific shape relative to whoel group
3732
- if (this.m === 2 && len > 1) {
3733
- edges = this.calculateShapeEdges(s, e, shapeData.totalShapeLength, addedLength, totalModifierLength);
3734
- addedLength += shapeData.totalShapeLength;
3735
- } else {
3736
- edges = [
3737
- [shapeS, shapeE]
3738
- ];
3739
- }
3740
- jLen = edges.length;
3741
- for (j = 0; j < jLen; j += 1) {
3742
- shapeS = edges[j][0];
3743
- shapeE = edges[j][1];
3744
- segments.length = 0;
3745
- if (shapeE <= 1) {
3746
- segments.push({
3747
- s: shapeData.totalShapeLength * shapeS,
3748
- e: shapeData.totalShapeLength * shapeE
3749
- });
3750
- } else if (shapeS >= 1) {
3751
- segments.push({
3752
- s: shapeData.totalShapeLength * (shapeS - 1),
3753
- e: shapeData.totalShapeLength * (shapeE - 1)
3754
- });
3755
- } else {
3756
- segments.push({
3757
- s: shapeData.totalShapeLength * shapeS,
3758
- e: shapeData.totalShapeLength
3759
- });
3760
- segments.push({
3761
- s: 0,
3762
- e: shapeData.totalShapeLength * (shapeE - 1)
3763
- });
3764
- }
3765
- var newShapesData = this.addShapes(shapeData, segments[0]);
3766
- if (segments[0].s !== segments[0].e) {
3767
- if (segments.length > 1) {
3768
- var lastShapeInCollection = shapeData.shape.paths.shapes[shapeData.shape.paths._length - 1];
3769
- if (lastShapeInCollection.c) {
3770
- var lastShape = newShapesData.pop();
3771
- this.addPaths(newShapesData, localShapeCollection);
3772
- newShapesData = this.addShapes(shapeData, segments[1], lastShape);
3773
- } else {
3774
- this.addPaths(newShapesData, localShapeCollection);
3775
- newShapesData = this.addShapes(shapeData, segments[1]);
3776
- }
3777
- }
3778
- this.addPaths(newShapesData, localShapeCollection);
3779
- }
3780
-
3781
- }
3782
- shapeData.shape.paths = localShapeCollection;
3783
- }
3784
- }
3785
- } else if (this._mdf) {
3786
- for (i = 0; i < len; i += 1) {
3787
- //Releasign Trim Cached paths data when no trim applied in case shapes are modified inbetween.
3788
- //Don't remove this even if it's losing cached info.
3789
- this.shapes[i].pathsData.length = 0;
3790
- this.shapes[i].shape._mdf = true;
3791
- }
3792
- }
3793
- };
3794
-
3795
- TrimModifier.prototype.addPaths = function (newPaths, localShapeCollection) {
3796
- var i, len = newPaths.length;
3797
- for (i = 0; i < len; i += 1) {
3798
- localShapeCollection.addShape(newPaths[i]);
3799
- }
3800
- };
3801
-
3802
- TrimModifier.prototype.addSegment = function (pt1, pt2, pt3, pt4, shapePath, pos, newShape) {
3803
- shapePath.setXYAt(pt2[0], pt2[1], 'o', pos);
3804
- shapePath.setXYAt(pt3[0], pt3[1], 'i', pos + 1);
3805
- if (newShape) {
3806
- shapePath.setXYAt(pt1[0], pt1[1], 'v', pos);
3807
- }
3808
- shapePath.setXYAt(pt4[0], pt4[1], 'v', pos + 1);
3809
- };
3810
-
3811
- TrimModifier.prototype.addSegmentFromArray = function (points, shapePath, pos, newShape) {
3812
- shapePath.setXYAt(points[1], points[5], 'o', pos);
3813
- shapePath.setXYAt(points[2], points[6], 'i', pos + 1);
3814
- if (newShape) {
3815
- shapePath.setXYAt(points[0], points[4], 'v', pos);
3816
- }
3817
- shapePath.setXYAt(points[3], points[7], 'v', pos + 1);
3818
- };
3819
-
3820
- TrimModifier.prototype.addShapes = function (shapeData, shapeSegment, shapePath) {
3821
- var pathsData = shapeData.pathsData;
3822
- var shapePaths = shapeData.shape.paths.shapes;
3823
- var i, len = shapeData.shape.paths._length,
3824
- j, jLen;
3825
- var addedLength = 0;
3826
- var currentLengthData, segmentCount;
3827
- var lengths;
3828
- var segment;
3829
- var shapes = [];
3830
- var initPos;
3831
- var newShape = true;
3832
- if (!shapePath) {
3833
- shapePath = shape_pool.newElement();
3834
- segmentCount = 0;
3835
- initPos = 0;
3836
- } else {
3837
- segmentCount = shapePath._length;
3838
- initPos = shapePath._length;
3839
- }
3840
- shapes.push(shapePath);
3841
- for (i = 0; i < len; i += 1) {
3842
- lengths = pathsData[i].lengths;
3843
- shapePath.c = shapePaths[i].c;
3844
- jLen = shapePaths[i].c ? lengths.length : lengths.length + 1;
3845
- for (j = 1; j < jLen; j += 1) {
3846
- currentLengthData = lengths[j - 1];
3847
- if (addedLength + currentLengthData.addedLength < shapeSegment.s) {
3848
- addedLength += currentLengthData.addedLength;
3849
- shapePath.c = false;
3850
- } else if (addedLength > shapeSegment.e) {
3851
- shapePath.c = false;
3852
- break;
3853
- } else {
3854
- if (shapeSegment.s <= addedLength && shapeSegment.e >= addedLength + currentLengthData.addedLength) {
3855
- this.addSegment(shapePaths[i].v[j - 1], shapePaths[i].o[j - 1], shapePaths[i].i[j], shapePaths[i].v[j], shapePath, segmentCount, newShape);
3856
- newShape = false;
3857
- } else {
3858
- 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]);
3859
- this.addSegmentFromArray(segment, shapePath, segmentCount, newShape);
3860
- // this.addSegment(segment.pt1, segment.pt3, segment.pt4, segment.pt2, shapePath, segmentCount, newShape);
3861
- newShape = false;
3862
- shapePath.c = false;
3863
- }
3864
- addedLength += currentLengthData.addedLength;
3865
- segmentCount += 1;
3866
- }
3867
- }
3868
- if (shapePaths[i].c && lengths.length) {
3869
- currentLengthData = lengths[j - 1];
3870
- if (addedLength <= shapeSegment.e) {
3871
- var segmentLength = lengths[j - 1].addedLength;
3872
- if (shapeSegment.s <= addedLength && shapeSegment.e >= addedLength + segmentLength) {
3873
- this.addSegment(shapePaths[i].v[j - 1], shapePaths[i].o[j - 1], shapePaths[i].i[0], shapePaths[i].v[0], shapePath, segmentCount, newShape);
3874
- newShape = false;
3875
- } else {
3876
- 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]);
3877
- this.addSegmentFromArray(segment, shapePath, segmentCount, newShape);
3878
- // this.addSegment(segment.pt1, segment.pt3, segment.pt4, segment.pt2, shapePath, segmentCount, newShape);
3879
- newShape = false;
3880
- shapePath.c = false;
3881
- }
3882
- } else {
3883
- shapePath.c = false;
3884
- }
3885
- addedLength += currentLengthData.addedLength;
3886
- segmentCount += 1;
3887
- }
3888
- if (shapePath._length) {
3889
- shapePath.setXYAt(shapePath.v[initPos][0], shapePath.v[initPos][1], 'i', initPos);
3890
- shapePath.setXYAt(shapePath.v[shapePath._length - 1][0], shapePath.v[shapePath._length - 1][1], 'o', shapePath._length - 1);
3891
- }
3892
- if (addedLength > shapeSegment.e) {
3893
- break;
3894
- }
3895
- if (i < len - 1) {
3896
- shapePath = shape_pool.newElement();
3897
- newShape = true;
3898
- shapes.push(shapePath);
3899
- segmentCount = 0;
3900
- }
3901
- }
3902
- return shapes;
3903
- };
3904
-
3905
-
3906
- ShapeModifiers.registerModifier('tm', TrimModifier);
3907
-
3908
- function RoundCornersModifier() { }
3909
- extendPrototype([ShapeModifier], RoundCornersModifier);
3910
- RoundCornersModifier.prototype.initModifierProperties = function (elem, data) {
3911
- this.getValue = this.processKeys;
3912
- this.rd = PropertyFactory.getProp(elem, data.r, 0, null, this);
3913
- this._isAnimated = !!this.rd.effectsSequence.length;
3914
- };
3915
-
3916
- RoundCornersModifier.prototype.processPath = function (path, round) {
3917
- var cloned_path = shape_pool.newElement();
3918
- cloned_path.c = path.c;
3919
- var i, len = path._length;
3920
- var currentV, currentI, currentO, closerV, newV, newO, newI, distance, newPosPerc, index = 0;
3921
- var vX, vY, oX, oY, iX, iY;
3922
- for (i = 0; i < len; i += 1) {
3923
- currentV = path.v[i];
3924
- currentO = path.o[i];
3925
- currentI = path.i[i];
3926
- if (currentV[0] === currentO[0] && currentV[1] === currentO[1] && currentV[0] === currentI[0] && currentV[1] === currentI[1]) {
3927
- if ((i === 0 || i === len - 1) && !path.c) {
3928
- cloned_path.setTripleAt(currentV[0], currentV[1], currentO[0], currentO[1], currentI[0], currentI[1], index);
3929
- /*cloned_path.v[index] = currentV;
3930
- cloned_path.o[index] = currentO;
3931
- cloned_path.i[index] = currentI;*/
3932
- index += 1;
3933
- } else {
3934
- if (i === 0) {
3935
- closerV = path.v[len - 1];
3936
- } else {
3937
- closerV = path.v[i - 1];
3938
- }
3939
- distance = Math.sqrt(Math.pow(currentV[0] - closerV[0], 2) + Math.pow(currentV[1] - closerV[1], 2));
3940
- newPosPerc = distance ? Math.min(distance / 2, round) / distance : 0;
3941
- vX = iX = currentV[0] + (closerV[0] - currentV[0]) * newPosPerc;
3942
- vY = iY = currentV[1] - (currentV[1] - closerV[1]) * newPosPerc;
3943
- oX = vX - (vX - currentV[0]) * roundCorner;
3944
- oY = vY - (vY - currentV[1]) * roundCorner;
3945
- cloned_path.setTripleAt(vX, vY, oX, oY, iX, iY, index);
3946
- index += 1;
3947
-
3948
- if (i === len - 1) {
3949
- closerV = path.v[0];
3950
- } else {
3951
- closerV = path.v[i + 1];
3952
- }
3953
- distance = Math.sqrt(Math.pow(currentV[0] - closerV[0], 2) + Math.pow(currentV[1] - closerV[1], 2));
3954
- newPosPerc = distance ? Math.min(distance / 2, round) / distance : 0;
3955
- vX = oX = currentV[0] + (closerV[0] - currentV[0]) * newPosPerc;
3956
- vY = oY = currentV[1] + (closerV[1] - currentV[1]) * newPosPerc;
3957
- iX = vX - (vX - currentV[0]) * roundCorner;
3958
- iY = vY - (vY - currentV[1]) * roundCorner;
3959
- cloned_path.setTripleAt(vX, vY, oX, oY, iX, iY, index);
3960
- index += 1;
3961
- }
3962
- } else {
3963
- cloned_path.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);
3964
- index += 1;
3965
- }
3966
- }
3967
- return cloned_path;
3968
- };
3969
-
3970
- RoundCornersModifier.prototype.processShapes = function (_isFirstFrame) {
3971
- var shapePaths;
3972
- var i, len = this.shapes.length;
3973
- var j, jLen;
3974
- var rd = this.rd.v;
3975
-
3976
- if (rd !== 0) {
3977
- var shapeData, newPaths, localShapeCollection;
3978
- for (i = 0; i < len; i += 1) {
3979
- shapeData = this.shapes[i];
3980
- newPaths = shapeData.shape.paths;
3981
- localShapeCollection = shapeData.localShapeCollection;
3982
- if (!(!shapeData.shape._mdf && !this._mdf && !_isFirstFrame)) {
3983
- localShapeCollection.releaseShapes();
3984
- shapeData.shape._mdf = true;
3985
- shapePaths = shapeData.shape.paths.shapes;
3986
- jLen = shapeData.shape.paths._length;
3987
- for (j = 0; j < jLen; j += 1) {
3988
- localShapeCollection.addShape(this.processPath(shapePaths[j], rd));
3989
- }
3990
- }
3991
- shapeData.shape.paths = shapeData.localShapeCollection;
3992
- }
3993
-
3994
- }
3995
- if (!this.dynamicProperties.length) {
3996
- this._mdf = false;
3997
- }
3998
- };
3999
-
4000
- ShapeModifiers.registerModifier('rd', RoundCornersModifier);
4001
-
4002
- function RepeaterModifier() { }
4003
- extendPrototype([ShapeModifier], RepeaterModifier);
4004
-
4005
- RepeaterModifier.prototype.initModifierProperties = function (elem, data) {
4006
- this.getValue = this.processKeys;
4007
- this.c = PropertyFactory.getProp(elem, data.c, 0, null, this);
4008
- this.o = PropertyFactory.getProp(elem, data.o, 0, null, this);
4009
- this.tr = TransformPropertyFactory.getTransformProperty(elem, data.tr, this);
4010
- this.so = PropertyFactory.getProp(elem, data.tr.so, 0, 0.01, this);
4011
- this.eo = PropertyFactory.getProp(elem, data.tr.eo, 0, 0.01, this);
4012
- this.data = data;
4013
- if (!this.dynamicProperties.length) {
4014
- this.getValue(true);
4015
- }
4016
- this._isAnimated = !!this.dynamicProperties.length;
4017
- this.pMatrix = new Matrix();
4018
- this.rMatrix = new Matrix();
4019
- this.sMatrix = new Matrix();
4020
- this.tMatrix = new Matrix();
4021
- this.matrix = new Matrix();
4022
- };
4023
-
4024
- RepeaterModifier.prototype.applyTransforms = function (pMatrix, rMatrix, sMatrix, transform, perc, inv) {
4025
- var dir = inv ? -1 : 1;
4026
- var scaleX = transform.s.v[0] + (1 - transform.s.v[0]) * (1 - perc);
4027
- var scaleY = transform.s.v[1] + (1 - transform.s.v[1]) * (1 - perc);
4028
- pMatrix.translate(transform.p.v[0] * dir * perc, transform.p.v[1] * dir * perc, transform.p.v[2]);
4029
- rMatrix.translate(-transform.a.v[0], -transform.a.v[1], transform.a.v[2]);
4030
- rMatrix.rotate(-transform.r.v * dir * perc);
4031
- rMatrix.translate(transform.a.v[0], transform.a.v[1], transform.a.v[2]);
4032
- sMatrix.translate(-transform.a.v[0], -transform.a.v[1], transform.a.v[2]);
4033
- sMatrix.scale(inv ? 1 / scaleX : scaleX, inv ? 1 / scaleY : scaleY);
4034
- sMatrix.translate(transform.a.v[0], transform.a.v[1], transform.a.v[2]);
4035
- };
4036
-
4037
- RepeaterModifier.prototype.init = function (elem, arr, pos, elemsData) {
4038
- this.elem = elem;
4039
- this.arr = arr;
4040
- this.pos = pos;
4041
- this.elemsData = elemsData;
4042
- this._currentCopies = 0;
4043
- this._elements = [];
4044
- this._groups = [];
4045
- this.frameId = -1;
4046
- this.initDynamicPropertyContainer(elem);
4047
- this.initModifierProperties(elem, arr[pos]);
4048
- var cont = 0;
4049
- while (pos > 0) {
4050
- pos -= 1;
4051
- //this._elements.unshift(arr.splice(pos,1)[0]);
4052
- this._elements.unshift(arr[pos]);
4053
- cont += 1;
4054
- }
4055
- if (this.dynamicProperties.length) {
4056
- this.k = true;
4057
- } else {
4058
- this.getValue(true);
4059
- }
4060
- };
4061
-
4062
- RepeaterModifier.prototype.resetElements = function (elements) {
4063
- var i, len = elements.length;
4064
- for (i = 0; i < len; i += 1) {
4065
- elements[i]._processed = false;
4066
- if (elements[i].ty === 'gr') {
4067
- this.resetElements(elements[i].it);
4068
- }
4069
- }
4070
- };
4071
-
4072
- RepeaterModifier.prototype.cloneElements = function (elements) {
4073
- var i, len = elements.length;
4074
- var newElements = JSON.parse(JSON.stringify(elements));
4075
- this.resetElements(newElements);
4076
- return newElements;
4077
- };
4078
-
4079
- RepeaterModifier.prototype.changeGroupRender = function (elements, renderFlag) {
4080
- var i, len = elements.length;
4081
- for (i = 0; i < len; i += 1) {
4082
- elements[i]._render = renderFlag;
4083
- if (elements[i].ty === 'gr') {
4084
- this.changeGroupRender(elements[i].it, renderFlag);
4085
- }
4086
- }
4087
- };
4088
-
4089
- RepeaterModifier.prototype.processShapes = function (_isFirstFrame) {
4090
- var items, itemsTransform, i, dir, cont;
4091
- if (this._mdf || _isFirstFrame) {
4092
- var copies = Math.ceil(this.c.v);
4093
- if (this._groups.length < copies) {
4094
- while (this._groups.length < copies) {
4095
- var group = {
4096
- it: this.cloneElements(this._elements),
4097
- ty: 'gr'
4098
- };
4099
- group.it.push({
4100
- "a": {
4101
- "a": 0,
4102
- "ix": 1,
4103
- "k": [0, 0]
4104
- },
4105
- "nm": "Transform",
4106
- "o": {
4107
- "a": 0,
4108
- "ix": 7,
4109
- "k": 100
4110
- },
4111
- "p": {
4112
- "a": 0,
4113
- "ix": 2,
4114
- "k": [0, 0]
4115
- },
4116
- "r": {
4117
- "a": 1,
4118
- "ix": 6,
4119
- "k": [{
4120
- s: 0,
4121
- e: 0,
4122
- t: 0
4123
- }, {
4124
- s: 0,
4125
- e: 0,
4126
- t: 1
4127
- }]
4128
- },
4129
- "s": {
4130
- "a": 0,
4131
- "ix": 3,
4132
- "k": [100, 100]
4133
- },
4134
- "sa": {
4135
- "a": 0,
4136
- "ix": 5,
4137
- "k": 0
4138
- },
4139
- "sk": {
4140
- "a": 0,
4141
- "ix": 4,
4142
- "k": 0
4143
- },
4144
- "ty": "tr"
4145
- });
4146
-
4147
- this.arr.splice(0, 0, group);
4148
- this._groups.splice(0, 0, group);
4149
- this._currentCopies += 1;
4150
- }
4151
- this.elem.reloadShapes();
4152
- }
4153
- cont = 0;
4154
- var renderFlag;
4155
- for (i = 0; i <= this._groups.length - 1; i += 1) {
4156
- renderFlag = cont < copies;
4157
- this._groups[i]._render = renderFlag;
4158
- this.changeGroupRender(this._groups[i].it, renderFlag);
4159
- cont += 1;
4160
- }
4161
-
4162
- this._currentCopies = copies;
4163
- ////
4164
-
4165
- var offset = this.o.v;
4166
- var offsetModulo = offset % 1;
4167
- var roundOffset = offset > 0 ? Math.floor(offset) : Math.ceil(offset);
4168
- var k;
4169
- var tMat = this.tr.v.props;
4170
- var pProps = this.pMatrix.props;
4171
- var rProps = this.rMatrix.props;
4172
- var sProps = this.sMatrix.props;
4173
- this.pMatrix.reset();
4174
- this.rMatrix.reset();
4175
- this.sMatrix.reset();
4176
- this.tMatrix.reset();
4177
- this.matrix.reset();
4178
- var iteration = 0;
4179
-
4180
- if (offset > 0) {
4181
- while (iteration < roundOffset) {
4182
- this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, 1, false);
4183
- iteration += 1;
4184
- }
4185
- if (offsetModulo) {
4186
- this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, offsetModulo, false);
4187
- iteration += offsetModulo;
4188
- }
4189
- } else if (offset < 0) {
4190
- while (iteration > roundOffset) {
4191
- this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, 1, true);
4192
- iteration -= 1;
4193
- }
4194
- if (offsetModulo) {
4195
- this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, -offsetModulo, true);
4196
- iteration -= offsetModulo;
4197
- }
4198
- }
4199
- i = this.data.m === 1 ? 0 : this._currentCopies - 1;
4200
- dir = this.data.m === 1 ? 1 : -1;
4201
- cont = this._currentCopies;
4202
- var j, jLen;
4203
- while (cont) {
4204
- items = this.elemsData[i].it;
4205
- itemsTransform = items[items.length - 1].transform.mProps.v.props;
4206
- jLen = itemsTransform.length;
4207
- items[items.length - 1].transform.mProps._mdf = true;
4208
- items[items.length - 1].transform.op._mdf = true;
4209
- items[items.length - 1].transform.op.v = this.so.v + (this.eo.v - this.so.v) * (i / (this._currentCopies - 1));
4210
- if (iteration !== 0) {
4211
- if ((i !== 0 && dir === 1) || (i !== this._currentCopies - 1 && dir === -1)) {
4212
- this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, 1, false);
4213
- }
4214
- 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]);
4215
- 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]);
4216
- 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]);
4217
-
4218
- for (j = 0; j < jLen; j += 1) {
4219
- itemsTransform[j] = this.matrix.props[j];
4220
- }
4221
- this.matrix.reset();
4222
- } else {
4223
- this.matrix.reset();
4224
- for (j = 0; j < jLen; j += 1) {
4225
- itemsTransform[j] = this.matrix.props[j];
4226
- }
4227
- }
4228
- iteration += 1;
4229
- cont -= 1;
4230
- i += dir;
4231
- }
4232
- } else {
4233
- cont = this._currentCopies;
4234
- i = 0;
4235
- dir = 1;
4236
- while (cont) {
4237
- items = this.elemsData[i].it;
4238
- itemsTransform = items[items.length - 1].transform.mProps.v.props;
4239
- items[items.length - 1].transform.mProps._mdf = false;
4240
- items[items.length - 1].transform.op._mdf = false;
4241
- cont -= 1;
4242
- i += dir;
4243
- }
4244
- }
4245
- };
4246
-
4247
- RepeaterModifier.prototype.addShape = function () { };
4248
-
4249
- ShapeModifiers.registerModifier('rp', RepeaterModifier);
4250
-
4251
- function ShapeCollection() {
4252
- this._length = 0;
4253
- this._maxLength = 4;
4254
- this.shapes = createSizedArray(this._maxLength);
4255
- }
4256
-
4257
- ShapeCollection.prototype.addShape = function (shapeData) {
4258
- if (this._length === this._maxLength) {
4259
- this.shapes = this.shapes.concat(createSizedArray(this._maxLength));
4260
- this._maxLength *= 2;
4261
- }
4262
- this.shapes[this._length] = shapeData;
4263
- this._length += 1;
4264
- };
4265
-
4266
- ShapeCollection.prototype.releaseShapes = function () {
4267
- var i;
4268
- for (i = 0; i < this._length; i += 1) {
4269
- shape_pool.release(this.shapes[i]);
4270
- }
4271
- this._length = 0;
4272
- };
4273
-
4274
- function DashProperty(elem, data, renderer, container) {
4275
- this.elem = elem;
4276
- this.frameId = -1;
4277
- this.dataProps = createSizedArray(data.length);
4278
- this.renderer = renderer;
4279
- this.k = false;
4280
- this.dashStr = '';
4281
- this.dashArray = createTypedArray('float32', data.length ? data.length - 1 : 0);
4282
- this.dashoffset = createTypedArray('float32', 1);
4283
- this.initDynamicPropertyContainer(container);
4284
- var i, len = data.length || 0,
4285
- prop;
4286
- for (i = 0; i < len; i += 1) {
4287
- prop = PropertyFactory.getProp(elem, data[i].v, 0, 0, this);
4288
- this.k = prop.k || this.k;
4289
- this.dataProps[i] = {
4290
- n: data[i].n,
4291
- p: prop
4292
- };
4293
- }
4294
- if (!this.k) {
4295
- this.getValue(true);
4296
- }
4297
- this._isAnimated = this.k;
4298
- }
4299
-
4300
- DashProperty.prototype.getValue = function (forceRender) {
4301
- if (this.elem.globalData.frameId === this.frameId && !forceRender) {
4302
- return;
4303
- }
4304
- this.frameId = this.elem.globalData.frameId;
4305
- this.iterateDynamicProperties();
4306
- this._mdf = this._mdf || forceRender;
4307
- if (this._mdf) {
4308
- var i = 0,
4309
- len = this.dataProps.length;
4310
- if (this.renderer === 'svg') {
4311
- this.dashStr = '';
4312
- }
4313
- for (i = 0; i < len; i += 1) {
4314
- if (this.dataProps[i].n != 'o') {
4315
- if (this.renderer === 'svg') {
4316
- this.dashStr += ' ' + this.dataProps[i].p.v;
4317
- } else {
4318
- this.dashArray[i] = this.dataProps[i].p.v;
4319
- }
4320
- } else {
4321
- this.dashoffset[0] = this.dataProps[i].p.v;
4322
- }
4323
- }
4324
- }
4325
- };
4326
- extendPrototype([DynamicPropertyContainer], DashProperty);
4327
-
4328
- function GradientProperty(elem, data, container) {
4329
- this.data = data;
4330
- this.c = createTypedArray('uint8c', data.p * 4);
4331
- var cLength = data.k.k[0].s ? (data.k.k[0].s.length - data.p * 4) : data.k.k.length - data.p * 4;
4332
- this.o = createTypedArray('float32', cLength);
4333
- this._cmdf = false;
4334
- this._omdf = false;
4335
- this._collapsable = this.checkCollapsable();
4336
- this._hasOpacity = cLength;
4337
- this.initDynamicPropertyContainer(container);
4338
- this.prop = PropertyFactory.getProp(elem, data.k, 1, null, this);
4339
- this.k = this.prop.k;
4340
- this.getValue(true);
4341
- }
4342
-
4343
- GradientProperty.prototype.comparePoints = function (values, points) {
4344
- var i = 0,
4345
- len = this.o.length / 2,
4346
- diff;
4347
- while (i < len) {
4348
- diff = Math.abs(values[i * 4] - values[points * 4 + i * 2]);
4349
- if (diff > 0.01) {
4350
- return false;
4351
- }
4352
- i += 1;
4353
- }
4354
- return true;
4355
- };
4356
-
4357
- GradientProperty.prototype.checkCollapsable = function () {
4358
- if (this.o.length / 2 !== this.c.length / 4) {
4359
- return false;
4360
- }
4361
- if (this.data.k.k[0].s) {
4362
- var i = 0,
4363
- len = this.data.k.k.length;
4364
- while (i < len) {
4365
- if (!this.comparePoints(this.data.k.k[i].s, this.data.p)) {
4366
- return false;
4367
- }
4368
- i += 1;
4369
- }
4370
- } else if (!this.comparePoints(this.data.k.k, this.data.p)) {
4371
- return false;
4372
- }
4373
- return true;
4374
- };
4375
-
4376
- GradientProperty.prototype.getValue = function (forceRender) {
4377
- this.prop.getValue();
4378
- this._mdf = false;
4379
- this._cmdf = false;
4380
- this._omdf = false;
4381
- if (this.prop._mdf || forceRender) {
4382
- var i, len = this.data.p * 4;
4383
- var mult, val;
4384
- for (i = 0; i < len; i += 1) {
4385
- mult = i % 4 === 0 ? 100 : 255;
4386
- val = Math.round(this.prop.v[i] * mult);
4387
- if (this.c[i] !== val) {
4388
- this.c[i] = val;
4389
- this._cmdf = !forceRender;
4390
- }
4391
- }
4392
- if (this.o.length) {
4393
- len = this.prop.v.length;
4394
- for (i = this.data.p * 4; i < len; i += 1) {
4395
- mult = i % 2 === 0 ? 100 : 1;
4396
- val = i % 2 === 0 ? Math.round(this.prop.v[i] * 100) : this.prop.v[i];
4397
- if (this.o[i - this.data.p * 4] !== val) {
4398
- this.o[i - this.data.p * 4] = val;
4399
- this._omdf = !forceRender;
4400
- }
4401
- }
4402
- }
4403
- this._mdf = !forceRender;
4404
- }
4405
- };
4406
-
4407
- extendPrototype([DynamicPropertyContainer], GradientProperty);
4408
- var buildShapeString = function (pathNodes, length, closed, mat) {
4409
- if (length === 0) {
4410
- return '';
4411
- }
4412
- var _o = pathNodes.o;
4413
- var _i = pathNodes.i;
4414
- var _v = pathNodes.v;
4415
- var i, shapeString = " M" + mat.applyToPointStringified(_v[0][0], _v[0][1]);
4416
- for (i = 1; i < length; i += 1) {
4417
- 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]);
4418
- }
4419
- if (closed && length) {
4420
- 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]);
4421
- shapeString += 'z';
4422
- }
4423
- return shapeString;
4424
- }
4425
- var ImagePreloader = (function () {
4426
-
4427
- var proxyImage = (function () {
4428
- var canvas = createTag('canvas');
4429
- canvas.width = 1;
4430
- canvas.height = 1;
4431
- var ctx = canvas.getContext('2d');
4432
- ctx.fillStyle = 'rgba(0,0,0,0)';
4433
- ctx.fillRect(0, 0, 1, 1);
4434
- return canvas;
4435
- }())
4436
-
4437
- function imageLoaded() {
4438
- this.loadedAssets += 1;
4439
- if (this.loadedAssets === this.totalImages) {
4440
- if (this.imagesLoadedCb) {
4441
- this.imagesLoadedCb(null);
4442
- }
4443
- }
4444
- }
4445
-
4446
- function getAssetsPath(assetData, assetsPath, original_path) {
4447
- var path = '';
4448
- if (assetData.e) {
4449
- path = assetData.p;
4450
- } else if (assetsPath) {
4451
- var imagePath = assetData.p;
4452
- if (imagePath.indexOf('images/') !== -1) {
4453
- imagePath = imagePath.split('/')[1];
4454
- }
4455
- path = assetsPath + imagePath;
4456
- } else {
4457
- path = original_path;
4458
- path += assetData.u ? assetData.u : '';
4459
- path += assetData.p;
4460
- }
4461
- return path;
4462
- }
4463
-
4464
- function createImageData(assetData) {
4465
- var path = getAssetsPath(assetData, this.assetsPath, this.path);
4466
- var img = createTag('img');
4467
- img.crossOrigin = 'anonymous';
4468
- img.addEventListener('load', this._imageLoaded.bind(this), false);
4469
- img.addEventListener('error', function () {
4470
- ob.img = proxyImage;
4471
- this._imageLoaded();
4472
- }.bind(this), false);
4473
- img.src = path;
4474
- var ob = {
4475
- img: img,
4476
- assetData: assetData
4477
- }
4478
- return ob;
4479
- }
4480
-
4481
- function loadAssets(assets, cb) {
4482
- this.imagesLoadedCb = cb;
4483
- var i, len = assets.length;
4484
- for (i = 0; i < len; i += 1) {
4485
- if (!assets[i].layers) {
4486
- this.totalImages += 1;
4487
- this.images.push(this._createImageData(assets[i]));
4488
- }
4489
- }
4490
- }
4491
-
4492
- function setPath(path) {
4493
- this.path = path || '';
4494
- }
4495
-
4496
- function setAssetsPath(path) {
4497
- this.assetsPath = path || '';
4498
- }
4499
-
4500
- function getImage(assetData) {
4501
- var i = 0,
4502
- len = this.images.length;
4503
- while (i < len) {
4504
- if (this.images[i].assetData === assetData) {
4505
- return this.images[i].img;
4506
- }
4507
- i += 1;
4508
- }
4509
- }
4510
-
4511
- function destroy() {
4512
- this.imagesLoadedCb = null;
4513
- this.images.length = 0;
4514
- }
4515
-
4516
- function loaded() {
4517
- return this.totalImages === this.loadedAssets;
4518
- }
4519
-
4520
- return function ImagePreloader() {
4521
- this.loadAssets = loadAssets;
4522
- this.setAssetsPath = setAssetsPath;
4523
- this.setPath = setPath;
4524
- this.loaded = loaded;
4525
- this.destroy = destroy;
4526
- this.getImage = getImage;
4527
- this._createImageData = createImageData;
4528
- this._imageLoaded = imageLoaded;
4529
- this.assetsPath = '';
4530
- this.path = '';
4531
- this.totalImages = 0;
4532
- this.loadedAssets = 0;
4533
- this.imagesLoadedCb = null;
4534
- this.images = [];
4535
- };
4536
- }());
4537
- var featureSupport = (function () {
4538
- var ob = {
4539
- maskType: true
4540
- };
4541
- 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)) {
4542
- ob.maskType = false;
4543
- }
4544
- return ob;
4545
- }());
4546
- var filtersFactory = (function () {
4547
- var ob = {};
4548
- ob.createFilter = createFilter;
4549
- ob.createAlphaToLuminanceFilter = createAlphaToLuminanceFilter;
4550
-
4551
- function createFilter(filId) {
4552
- var fil = createNS('filter');
4553
- fil.setAttribute('id', filId);
4554
- fil.setAttribute('filterUnits', 'objectBoundingBox');
4555
- fil.setAttribute('x', '0%');
4556
- fil.setAttribute('y', '0%');
4557
- fil.setAttribute('width', '100%');
4558
- fil.setAttribute('height', '100%');
4559
- return fil;
4560
- }
4561
-
4562
- function createAlphaToLuminanceFilter() {
4563
- var feColorMatrix = createNS('feColorMatrix');
4564
- feColorMatrix.setAttribute('type', 'matrix');
4565
- feColorMatrix.setAttribute('color-interpolation-filters', 'sRGB');
4566
- feColorMatrix.setAttribute('values', '0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1');
4567
- return feColorMatrix;
4568
- }
4569
-
4570
- return ob;
4571
- }());
4572
- var assetLoader = (function () {
4573
-
4574
- function formatResponse(xhr) {
4575
- if (xhr.response && typeof xhr.response === 'object') {
4576
- return xhr.response;
4577
- } else if (xhr.response && typeof xhr.response === 'string') {
4578
- return JSON.parse(xhr.response);
4579
- } else if (xhr.responseText) {
4580
- return JSON.parse(xhr.responseText);
4581
- }
4582
- }
4583
-
4584
- function loadAsset(path, callback, errorCallback) {
4585
- var response;
4586
- var xhr = new XMLHttpRequest();
4587
- xhr.open('GET', path, true);
4588
- // set responseType after calling open or IE will break.
4589
- try {
4590
- // This crashes on Android WebView prior to KitKat
4591
- xhr.responseType = "json";
4592
- } catch (err) { }
4593
- xhr.send();
4594
- xhr.onreadystatechange = function () {
4595
- if (xhr.readyState == 4) {
4596
- if (xhr.status == 200) {
4597
- response = formatResponse(xhr);
4598
- callback(response);
4599
- } else {
4600
- try {
4601
- response = formatResponse(xhr);
4602
- callback(response);
4603
- } catch (err) {
4604
- if (errorCallback) {
4605
- errorCallback(err);
4606
- }
4607
- }
4608
- }
4609
- }
4610
- };
4611
- }
4612
- return {
4613
- load: loadAsset
4614
- }
4615
- }())
4616
-
4617
- function TextAnimatorProperty(textData, renderType, elem) {
4618
- this._isFirstFrame = true;
4619
- this._hasMaskedPath = false;
4620
- this._frameId = -1;
4621
- this._textData = textData;
4622
- this._renderType = renderType;
4623
- this._elem = elem;
4624
- this._animatorsData = createSizedArray(this._textData.a.length);
4625
- this._pathData = {};
4626
- this._moreOptions = {
4627
- alignment: {}
4628
- };
4629
- this.renderedLetters = [];
4630
- this.lettersChangedFlag = false;
4631
- this.initDynamicPropertyContainer(elem);
4632
-
4633
- }
4634
-
4635
- TextAnimatorProperty.prototype.searchProperties = function () {
4636
- var i, len = this._textData.a.length,
4637
- animatorProps;
4638
- var getProp = PropertyFactory.getProp;
4639
- for (i = 0; i < len; i += 1) {
4640
- animatorProps = this._textData.a[i];
4641
- this._animatorsData[i] = new TextAnimatorDataProperty(this._elem, animatorProps, this);
4642
- }
4643
- if (this._textData.p && 'm' in this._textData.p) {
4644
- this._pathData = {
4645
- f: getProp(this._elem, this._textData.p.f, 0, 0, this),
4646
- l: getProp(this._elem, this._textData.p.l, 0, 0, this),
4647
- r: this._textData.p.r,
4648
- m: this._elem.maskManager.getMaskProperty(this._textData.p.m)
4649
- };
4650
- this._hasMaskedPath = true;
4651
- } else {
4652
- this._hasMaskedPath = false;
4653
- }
4654
- this._moreOptions.alignment = getProp(this._elem, this._textData.m.a, 1, 0, this);
4655
- };
4656
-
4657
- TextAnimatorProperty.prototype.getMeasures = function (documentData, lettersChangedFlag) {
4658
- this.lettersChangedFlag = lettersChangedFlag;
4659
- if (!this._mdf && !this._isFirstFrame && !lettersChangedFlag && (!this._hasMaskedPath || !this._pathData.m._mdf)) {
4660
- return;
4661
- }
4662
- this._isFirstFrame = false;
4663
- var alignment = this._moreOptions.alignment.v;
4664
- var animators = this._animatorsData;
4665
- var textData = this._textData;
4666
- var matrixHelper = this.mHelper;
4667
- var renderType = this._renderType;
4668
- var renderedLettersCount = this.renderedLetters.length;
4669
- var data = this.data;
4670
- var xPos, yPos;
4671
- var i, len;
4672
- var letters = documentData.l,
4673
- pathInfo, currentLength, currentPoint, segmentLength, flag, pointInd, segmentInd, prevPoint, points, segments, partialLength, totalLength, perc, tanAngle, mask;
4674
- if (this._hasMaskedPath) {
4675
- mask = this._pathData.m;
4676
- if (!this._pathData.n || this._pathData._mdf) {
4677
- var paths = mask.v;
4678
- if (this._pathData.r) {
4679
- paths = paths.reverse();
4680
- }
4681
- // TODO: release bezier data cached from previous pathInfo: this._pathData.pi
4682
- pathInfo = {
4683
- tLength: 0,
4684
- segments: []
4685
- };
4686
- len = paths._length - 1;
4687
- var bezierData;
4688
- totalLength = 0;
4689
- for (i = 0; i < len; i += 1) {
4690
- 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]]);
4691
- pathInfo.tLength += bezierData.segmentLength;
4692
- pathInfo.segments.push(bezierData);
4693
- totalLength += bezierData.segmentLength;
4694
- }
4695
- i = len;
4696
- if (mask.v.c) {
4697
- 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]]);
4698
- pathInfo.tLength += bezierData.segmentLength;
4699
- pathInfo.segments.push(bezierData);
4700
- totalLength += bezierData.segmentLength;
4701
- }
4702
- this._pathData.pi = pathInfo;
4703
- }
4704
- pathInfo = this._pathData.pi;
4705
-
4706
- currentLength = this._pathData.f.v;
4707
- segmentInd = 0;
4708
- pointInd = 1;
4709
- segmentLength = 0;
4710
- flag = true;
4711
- segments = pathInfo.segments;
4712
- if (currentLength < 0 && mask.v.c) {
4713
- if (pathInfo.tLength < Math.abs(currentLength)) {
4714
- currentLength = -Math.abs(currentLength) % pathInfo.tLength;
4715
- }
4716
- segmentInd = segments.length - 1;
4717
- points = segments[segmentInd].points;
4718
- pointInd = points.length - 1;
4719
- while (currentLength < 0) {
4720
- currentLength += points[pointInd].partialLength;
4721
- pointInd -= 1;
4722
- if (pointInd < 0) {
4723
- segmentInd -= 1;
4724
- points = segments[segmentInd].points;
4725
- pointInd = points.length - 1;
4726
- }
4727
- }
4728
-
4729
- }
4730
- points = segments[segmentInd].points;
4731
- prevPoint = points[pointInd - 1];
4732
- currentPoint = points[pointInd];
4733
- partialLength = currentPoint.partialLength;
4734
- }
4735
-
4736
-
4737
- len = letters.length;
4738
- xPos = 0;
4739
- yPos = 0;
4740
- var yOff = documentData.finalSize * 1.2 * 0.714;
4741
- var firstLine = true;
4742
- var animatorProps, animatorSelector;
4743
- var j, jLen;
4744
- var letterValue;
4745
-
4746
- jLen = animators.length;
4747
- var lastLetter;
4748
-
4749
- var mult, ind = -1,
4750
- offf, xPathPos, yPathPos;
4751
- var initPathPos = currentLength,
4752
- initSegmentInd = segmentInd,
4753
- initPointInd = pointInd,
4754
- currentLine = -1;
4755
- var elemOpacity;
4756
- var sc, sw, fc, k;
4757
- var lineLength = 0;
4758
- var letterSw, letterSc, letterFc, letterM = '',
4759
- letterP = this.defaultPropsArray,
4760
- letterO;
4761
-
4762
- //
4763
- if (documentData.j === 2 || documentData.j === 1) {
4764
- var animatorJustifyOffset = 0;
4765
- var animatorFirstCharOffset = 0;
4766
- var justifyOffsetMult = documentData.j === 2 ? -0.5 : -1;
4767
- var lastIndex = 0;
4768
- var isNewLine = true;
4769
-
4770
- for (i = 0; i < len; i += 1) {
4771
- if (letters[i].n) {
4772
- if (animatorJustifyOffset) {
4773
- animatorJustifyOffset += animatorFirstCharOffset;
4774
- }
4775
- while (lastIndex < i) {
4776
- letters[lastIndex].animatorJustifyOffset = animatorJustifyOffset;
4777
- lastIndex += 1;
4778
- }
4779
- animatorJustifyOffset = 0;
4780
- isNewLine = true;
4781
- } else {
4782
- for (j = 0; j < jLen; j += 1) {
4783
- animatorProps = animators[j].a;
4784
- if (animatorProps.t.propType) {
4785
- if (isNewLine && documentData.j === 2) {
4786
- animatorFirstCharOffset += animatorProps.t.v * justifyOffsetMult;
4787
- }
4788
- animatorSelector = animators[j].s;
4789
- mult = animatorSelector.getMult(letters[i].anIndexes[j], textData.a[j].s.totalChars);
4790
- if (mult.length) {
4791
- animatorJustifyOffset += animatorProps.t.v * mult[0] * justifyOffsetMult;
4792
- } else {
4793
- animatorJustifyOffset += animatorProps.t.v * mult * justifyOffsetMult;
4794
- }
4795
- }
4796
- }
4797
- isNewLine = false;
4798
- }
4799
- }
4800
- if (animatorJustifyOffset) {
4801
- animatorJustifyOffset += animatorFirstCharOffset;
4802
- }
4803
- while (lastIndex < i) {
4804
- letters[lastIndex].animatorJustifyOffset = animatorJustifyOffset;
4805
- lastIndex += 1;
4806
- }
4807
- }
4808
- //
4809
-
4810
- for (i = 0; i < len; i += 1) {
4811
-
4812
- matrixHelper.reset();
4813
- elemOpacity = 1;
4814
- if (letters[i].n) {
4815
- xPos = 0;
4816
- yPos += documentData.yOffset;
4817
- yPos += firstLine ? 1 : 0;
4818
- currentLength = initPathPos;
4819
- firstLine = false;
4820
- lineLength = 0;
4821
- if (this._hasMaskedPath) {
4822
- segmentInd = initSegmentInd;
4823
- pointInd = initPointInd;
4824
- points = segments[segmentInd].points;
4825
- prevPoint = points[pointInd - 1];
4826
- currentPoint = points[pointInd];
4827
- partialLength = currentPoint.partialLength;
4828
- segmentLength = 0;
4829
- }
4830
- letterO = letterSw = letterFc = letterM = '';
4831
- letterP = this.defaultPropsArray;
4832
- } else {
4833
- if (this._hasMaskedPath) {
4834
- if (currentLine !== letters[i].line) {
4835
- switch (documentData.j) {
4836
- case 1:
4837
- currentLength += totalLength - documentData.lineWidths[letters[i].line];
4838
- break;
4839
- case 2:
4840
- currentLength += (totalLength - documentData.lineWidths[letters[i].line]) / 2;
4841
- break;
4842
- }
4843
- currentLine = letters[i].line;
4844
- }
4845
- if (ind !== letters[i].ind) {
4846
- if (letters[ind]) {
4847
- currentLength += letters[ind].extra;
4848
- }
4849
- currentLength += letters[i].an / 2;
4850
- ind = letters[i].ind;
4851
- }
4852
- currentLength += alignment[0] * letters[i].an / 200;
4853
- var animatorOffset = 0;
4854
- for (j = 0; j < jLen; j += 1) {
4855
- animatorProps = animators[j].a;
4856
- if (animatorProps.p.propType) {
4857
- animatorSelector = animators[j].s;
4858
- mult = animatorSelector.getMult(letters[i].anIndexes[j], textData.a[j].s.totalChars);
4859
- if (mult.length) {
4860
- animatorOffset += animatorProps.p.v[0] * mult[0];
4861
- } else {
4862
- animatorOffset += animatorProps.p.v[0] * mult;
4863
- }
4864
-
4865
- }
4866
- if (animatorProps.a.propType) {
4867
- animatorSelector = animators[j].s;
4868
- mult = animatorSelector.getMult(letters[i].anIndexes[j], textData.a[j].s.totalChars);
4869
- if (mult.length) {
4870
- animatorOffset += animatorProps.a.v[0] * mult[0];
4871
- } else {
4872
- animatorOffset += animatorProps.a.v[0] * mult;
4873
- }
4874
-
4875
- }
4876
- }
4877
- flag = true;
4878
- while (flag) {
4879
- if (segmentLength + partialLength >= currentLength + animatorOffset || !points) {
4880
- perc = (currentLength + animatorOffset - segmentLength) / currentPoint.partialLength;
4881
- xPathPos = prevPoint.point[0] + (currentPoint.point[0] - prevPoint.point[0]) * perc;
4882
- yPathPos = prevPoint.point[1] + (currentPoint.point[1] - prevPoint.point[1]) * perc;
4883
- matrixHelper.translate(-alignment[0] * letters[i].an / 200, -(alignment[1] * yOff / 100));
4884
- flag = false;
4885
- } else if (points) {
4886
- segmentLength += currentPoint.partialLength;
4887
- pointInd += 1;
4888
- if (pointInd >= points.length) {
4889
- pointInd = 0;
4890
- segmentInd += 1;
4891
- if (!segments[segmentInd]) {
4892
- if (mask.v.c) {
4893
- pointInd = 0;
4894
- segmentInd = 0;
4895
- points = segments[segmentInd].points;
4896
- } else {
4897
- segmentLength -= currentPoint.partialLength;
4898
- points = null;
4899
- }
4900
- } else {
4901
- points = segments[segmentInd].points;
4902
- }
4903
- }
4904
- if (points) {
4905
- prevPoint = currentPoint;
4906
- currentPoint = points[pointInd];
4907
- partialLength = currentPoint.partialLength;
4908
- }
4909
- }
4910
- }
4911
- offf = letters[i].an / 2 - letters[i].add;
4912
- matrixHelper.translate(-offf, 0, 0);
4913
- } else {
4914
- offf = letters[i].an / 2 - letters[i].add;
4915
- matrixHelper.translate(-offf, 0, 0);
4916
-
4917
- // Grouping alignment
4918
- matrixHelper.translate(-alignment[0] * letters[i].an / 200, -alignment[1] * yOff / 100, 0);
4919
- }
4920
-
4921
- lineLength += letters[i].l / 2;
4922
- for (j = 0; j < jLen; j += 1) {
4923
- animatorProps = animators[j].a;
4924
- if (animatorProps.t.propType) {
4925
- animatorSelector = animators[j].s;
4926
- mult = animatorSelector.getMult(letters[i].anIndexes[j], textData.a[j].s.totalChars);
4927
- //This condition is to prevent applying tracking to first character in each line. Might be better to use a boolean "isNewLine"
4928
- if (xPos !== 0 || documentData.j !== 0) {
4929
- if (this._hasMaskedPath) {
4930
- if (mult.length) {
4931
- currentLength += animatorProps.t.v * mult[0];
4932
- } else {
4933
- currentLength += animatorProps.t.v * mult;
4934
- }
4935
- } else {
4936
- if (mult.length) {
4937
- xPos += animatorProps.t.v * mult[0];
4938
- } else {
4939
- xPos += animatorProps.t.v * mult;
4940
- }
4941
- }
4942
- }
4943
- }
4944
- }
4945
- lineLength += letters[i].l / 2;
4946
- if (documentData.strokeWidthAnim) {
4947
- sw = documentData.sw || 0;
4948
- }
4949
- if (documentData.strokeColorAnim) {
4950
- if (documentData.sc) {
4951
- sc = [documentData.sc[0], documentData.sc[1], documentData.sc[2]];
4952
- } else {
4953
- sc = [0, 0, 0];
4954
- }
4955
- }
4956
- if (documentData.fillColorAnim && documentData.fc) {
4957
- fc = [documentData.fc[0], documentData.fc[1], documentData.fc[2]];
4958
- }
4959
- for (j = 0; j < jLen; j += 1) {
4960
- animatorProps = animators[j].a;
4961
- if (animatorProps.a.propType) {
4962
- animatorSelector = animators[j].s;
4963
- mult = animatorSelector.getMult(letters[i].anIndexes[j], textData.a[j].s.totalChars);
4964
-
4965
- if (mult.length) {
4966
- matrixHelper.translate(-animatorProps.a.v[0] * mult[0], -animatorProps.a.v[1] * mult[1], animatorProps.a.v[2] * mult[2]);
4967
- } else {
4968
- matrixHelper.translate(-animatorProps.a.v[0] * mult, -animatorProps.a.v[1] * mult, animatorProps.a.v[2] * mult);
4969
- }
4970
- }
4971
- }
4972
- for (j = 0; j < jLen; j += 1) {
4973
- animatorProps = animators[j].a;
4974
- if (animatorProps.s.propType) {
4975
- animatorSelector = animators[j].s;
4976
- mult = animatorSelector.getMult(letters[i].anIndexes[j], textData.a[j].s.totalChars);
4977
- if (mult.length) {
4978
- matrixHelper.scale(1 + ((animatorProps.s.v[0] - 1) * mult[0]), 1 + ((animatorProps.s.v[1] - 1) * mult[1]), 1);
4979
- } else {
4980
- matrixHelper.scale(1 + ((animatorProps.s.v[0] - 1) * mult), 1 + ((animatorProps.s.v[1] - 1) * mult), 1);
4981
- }
4982
- }
4983
- }
4984
- for (j = 0; j < jLen; j += 1) {
4985
- animatorProps = animators[j].a;
4986
- animatorSelector = animators[j].s;
4987
- mult = animatorSelector.getMult(letters[i].anIndexes[j], textData.a[j].s.totalChars);
4988
- if (animatorProps.sk.propType) {
4989
- if (mult.length) {
4990
- matrixHelper.skewFromAxis(-animatorProps.sk.v * mult[0], animatorProps.sa.v * mult[1]);
4991
- } else {
4992
- matrixHelper.skewFromAxis(-animatorProps.sk.v * mult, animatorProps.sa.v * mult);
4993
- }
4994
- }
4995
- if (animatorProps.r.propType) {
4996
- if (mult.length) {
4997
- matrixHelper.rotateZ(-animatorProps.r.v * mult[2]);
4998
- } else {
4999
- matrixHelper.rotateZ(-animatorProps.r.v * mult);
5000
- }
5001
- }
5002
- if (animatorProps.ry.propType) {
5003
-
5004
- if (mult.length) {
5005
- matrixHelper.rotateY(animatorProps.ry.v * mult[1]);
5006
- } else {
5007
- matrixHelper.rotateY(animatorProps.ry.v * mult);
5008
- }
5009
- }
5010
- if (animatorProps.rx.propType) {
5011
- if (mult.length) {
5012
- matrixHelper.rotateX(animatorProps.rx.v * mult[0]);
5013
- } else {
5014
- matrixHelper.rotateX(animatorProps.rx.v * mult);
5015
- }
5016
- }
5017
- if (animatorProps.o.propType) {
5018
- if (mult.length) {
5019
- elemOpacity += ((animatorProps.o.v) * mult[0] - elemOpacity) * mult[0];
5020
- } else {
5021
- elemOpacity += ((animatorProps.o.v) * mult - elemOpacity) * mult;
5022
- }
5023
- }
5024
- if (documentData.strokeWidthAnim && animatorProps.sw.propType) {
5025
- if (mult.length) {
5026
- sw += animatorProps.sw.v * mult[0];
5027
- } else {
5028
- sw += animatorProps.sw.v * mult;
5029
- }
5030
- }
5031
- if (documentData.strokeColorAnim && animatorProps.sc.propType) {
5032
- for (k = 0; k < 3; k += 1) {
5033
- if (mult.length) {
5034
- sc[k] = sc[k] + (animatorProps.sc.v[k] - sc[k]) * mult[0];
5035
- } else {
5036
- sc[k] = sc[k] + (animatorProps.sc.v[k] - sc[k]) * mult;
5037
- }
5038
- }
5039
- }
5040
- if (documentData.fillColorAnim && documentData.fc) {
5041
- if (animatorProps.fc.propType) {
5042
- for (k = 0; k < 3; k += 1) {
5043
- if (mult.length) {
5044
- fc[k] = fc[k] + (animatorProps.fc.v[k] - fc[k]) * mult[0];
5045
- } else {
5046
- fc[k] = fc[k] + (animatorProps.fc.v[k] - fc[k]) * mult;
5047
- }
5048
- }
5049
- }
5050
- if (animatorProps.fh.propType) {
5051
- if (mult.length) {
5052
- fc = addHueToRGB(fc, animatorProps.fh.v * mult[0]);
5053
- } else {
5054
- fc = addHueToRGB(fc, animatorProps.fh.v * mult);
5055
- }
5056
- }
5057
- if (animatorProps.fs.propType) {
5058
- if (mult.length) {
5059
- fc = addSaturationToRGB(fc, animatorProps.fs.v * mult[0]);
5060
- } else {
5061
- fc = addSaturationToRGB(fc, animatorProps.fs.v * mult);
5062
- }
5063
- }
5064
- if (animatorProps.fb.propType) {
5065
- if (mult.length) {
5066
- fc = addBrightnessToRGB(fc, animatorProps.fb.v * mult[0]);
5067
- } else {
5068
- fc = addBrightnessToRGB(fc, animatorProps.fb.v * mult);
5069
- }
5070
- }
5071
- }
5072
- }
5073
-
5074
- for (j = 0; j < jLen; j += 1) {
5075
- animatorProps = animators[j].a;
5076
-
5077
- if (animatorProps.p.propType) {
5078
- animatorSelector = animators[j].s;
5079
- mult = animatorSelector.getMult(letters[i].anIndexes[j], textData.a[j].s.totalChars);
5080
- if (this._hasMaskedPath) {
5081
- if (mult.length) {
5082
- matrixHelper.translate(0, animatorProps.p.v[1] * mult[0], -animatorProps.p.v[2] * mult[1]);
5083
- } else {
5084
- matrixHelper.translate(0, animatorProps.p.v[1] * mult, -animatorProps.p.v[2] * mult);
5085
- }
5086
- } else {
5087
- if (mult.length) {
5088
- matrixHelper.translate(animatorProps.p.v[0] * mult[0], animatorProps.p.v[1] * mult[1], -animatorProps.p.v[2] * mult[2]);
5089
- } else {
5090
- matrixHelper.translate(animatorProps.p.v[0] * mult, animatorProps.p.v[1] * mult, -animatorProps.p.v[2] * mult);
5091
-
5092
- }
5093
- }
5094
- }
5095
- }
5096
- if (documentData.strokeWidthAnim) {
5097
- letterSw = sw < 0 ? 0 : sw;
5098
- }
5099
- if (documentData.strokeColorAnim) {
5100
- letterSc = 'rgb(' + Math.round(sc[0] * 255) + ',' + Math.round(sc[1] * 255) + ',' + Math.round(sc[2] * 255) + ')';
5101
- }
5102
- if (documentData.fillColorAnim && documentData.fc) {
5103
- letterFc = 'rgb(' + Math.round(fc[0] * 255) + ',' + Math.round(fc[1] * 255) + ',' + Math.round(fc[2] * 255) + ')';
5104
- }
5105
-
5106
- if (this._hasMaskedPath) {
5107
- matrixHelper.translate(0, -documentData.ls);
5108
-
5109
- matrixHelper.translate(0, alignment[1] * yOff / 100 + yPos, 0);
5110
- if (textData.p.p) {
5111
- tanAngle = (currentPoint.point[1] - prevPoint.point[1]) / (currentPoint.point[0] - prevPoint.point[0]);
5112
- var rot = Math.atan(tanAngle) * 180 / Math.PI;
5113
- if (currentPoint.point[0] < prevPoint.point[0]) {
5114
- rot += 180;
5115
- }
5116
- matrixHelper.rotate(-rot * Math.PI / 180);
5117
- }
5118
- matrixHelper.translate(xPathPos, yPathPos, 0);
5119
- currentLength -= alignment[0] * letters[i].an / 200;
5120
- if (letters[i + 1] && ind !== letters[i + 1].ind) {
5121
- currentLength += letters[i].an / 2;
5122
- currentLength += documentData.tr / 1000 * documentData.finalSize;
5123
- }
5124
- } else {
5125
-
5126
- matrixHelper.translate(xPos, yPos, 0);
5127
-
5128
- if (documentData.ps) {
5129
- //matrixHelper.translate(documentData.ps[0],documentData.ps[1],0);
5130
- matrixHelper.translate(documentData.ps[0], documentData.ps[1] + documentData.ascent, 0);
5131
- }
5132
- switch (documentData.j) {
5133
- case 1:
5134
- matrixHelper.translate(letters[i].animatorJustifyOffset + documentData.justifyOffset + (documentData.boxWidth - documentData.lineWidths[letters[i].line]), 0, 0);
5135
- break;
5136
- case 2:
5137
- matrixHelper.translate(letters[i].animatorJustifyOffset + documentData.justifyOffset + (documentData.boxWidth - documentData.lineWidths[letters[i].line]) / 2, 0, 0);
5138
- break;
5139
- }
5140
- matrixHelper.translate(0, -documentData.ls);
5141
- matrixHelper.translate(offf, 0, 0);
5142
- matrixHelper.translate(alignment[0] * letters[i].an / 200, alignment[1] * yOff / 100, 0);
5143
- xPos += letters[i].l + documentData.tr / 1000 * documentData.finalSize;
5144
- }
5145
- if (renderType === 'html') {
5146
- letterM = matrixHelper.toCSS();
5147
- } else if (renderType === 'svg') {
5148
- letterM = matrixHelper.to2dCSS();
5149
- } else {
5150
- 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]];
5151
- }
5152
- letterO = elemOpacity;
5153
- }
5154
-
5155
- if (renderedLettersCount <= i) {
5156
- letterValue = new LetterProps(letterO, letterSw, letterSc, letterFc, letterM, letterP);
5157
- this.renderedLetters.push(letterValue);
5158
- renderedLettersCount += 1;
5159
- this.lettersChangedFlag = true;
5160
- } else {
5161
- letterValue = this.renderedLetters[i];
5162
- this.lettersChangedFlag = letterValue.update(letterO, letterSw, letterSc, letterFc, letterM, letterP) || this.lettersChangedFlag;
5163
- }
5164
- }
5165
- };
5166
-
5167
- TextAnimatorProperty.prototype.getValue = function () {
5168
- if (this._elem.globalData.frameId === this._frameId) {
5169
- return;
5170
- }
5171
- this._frameId = this._elem.globalData.frameId;
5172
- this.iterateDynamicProperties();
5173
- };
5174
-
5175
- TextAnimatorProperty.prototype.mHelper = new Matrix();
5176
- TextAnimatorProperty.prototype.defaultPropsArray = [];
5177
- extendPrototype([DynamicPropertyContainer], TextAnimatorProperty);
5178
-
5179
- function TextAnimatorDataProperty(elem, animatorProps, container) {
5180
- var defaultData = {
5181
- propType: false
5182
- };
5183
- var getProp = PropertyFactory.getProp;
5184
- var textAnimator_animatables = animatorProps.a;
5185
- this.a = {
5186
- r: textAnimator_animatables.r ? getProp(elem, textAnimator_animatables.r, 0, degToRads, container) : defaultData,
5187
- rx: textAnimator_animatables.rx ? getProp(elem, textAnimator_animatables.rx, 0, degToRads, container) : defaultData,
5188
- ry: textAnimator_animatables.ry ? getProp(elem, textAnimator_animatables.ry, 0, degToRads, container) : defaultData,
5189
- sk: textAnimator_animatables.sk ? getProp(elem, textAnimator_animatables.sk, 0, degToRads, container) : defaultData,
5190
- sa: textAnimator_animatables.sa ? getProp(elem, textAnimator_animatables.sa, 0, degToRads, container) : defaultData,
5191
- s: textAnimator_animatables.s ? getProp(elem, textAnimator_animatables.s, 1, 0.01, container) : defaultData,
5192
- a: textAnimator_animatables.a ? getProp(elem, textAnimator_animatables.a, 1, 0, container) : defaultData,
5193
- o: textAnimator_animatables.o ? getProp(elem, textAnimator_animatables.o, 0, 0.01, container) : defaultData,
5194
- p: textAnimator_animatables.p ? getProp(elem, textAnimator_animatables.p, 1, 0, container) : defaultData,
5195
- sw: textAnimator_animatables.sw ? getProp(elem, textAnimator_animatables.sw, 0, 0, container) : defaultData,
5196
- sc: textAnimator_animatables.sc ? getProp(elem, textAnimator_animatables.sc, 1, 0, container) : defaultData,
5197
- fc: textAnimator_animatables.fc ? getProp(elem, textAnimator_animatables.fc, 1, 0, container) : defaultData,
5198
- fh: textAnimator_animatables.fh ? getProp(elem, textAnimator_animatables.fh, 0, 0, container) : defaultData,
5199
- fs: textAnimator_animatables.fs ? getProp(elem, textAnimator_animatables.fs, 0, 0.01, container) : defaultData,
5200
- fb: textAnimator_animatables.fb ? getProp(elem, textAnimator_animatables.fb, 0, 0.01, container) : defaultData,
5201
- t: textAnimator_animatables.t ? getProp(elem, textAnimator_animatables.t, 0, 0, container) : defaultData
5202
- };
5203
-
5204
- this.s = TextSelectorProp.getTextSelectorProp(elem, animatorProps.s, container);
5205
- this.s.t = animatorProps.s.t;
5206
- }
5207
-
5208
- function LetterProps(o, sw, sc, fc, m, p) {
5209
- this.o = o;
5210
- this.sw = sw;
5211
- this.sc = sc;
5212
- this.fc = fc;
5213
- this.m = m;
5214
- this.p = p;
5215
- this._mdf = {
5216
- o: true,
5217
- sw: !!sw,
5218
- sc: !!sc,
5219
- fc: !!fc,
5220
- m: true,
5221
- p: true
5222
- };
5223
- }
5224
-
5225
- LetterProps.prototype.update = function (o, sw, sc, fc, m, p) {
5226
- this._mdf.o = false;
5227
- this._mdf.sw = false;
5228
- this._mdf.sc = false;
5229
- this._mdf.fc = false;
5230
- this._mdf.m = false;
5231
- this._mdf.p = false;
5232
- var updated = false;
5233
-
5234
- if (this.o !== o) {
5235
- this.o = o;
5236
- this._mdf.o = true;
5237
- updated = true;
5238
- }
5239
- if (this.sw !== sw) {
5240
- this.sw = sw;
5241
- this._mdf.sw = true;
5242
- updated = true;
5243
- }
5244
- if (this.sc !== sc) {
5245
- this.sc = sc;
5246
- this._mdf.sc = true;
5247
- updated = true;
5248
- }
5249
- if (this.fc !== fc) {
5250
- this.fc = fc;
5251
- this._mdf.fc = true;
5252
- updated = true;
5253
- }
5254
- if (this.m !== m) {
5255
- this.m = m;
5256
- this._mdf.m = true;
5257
- updated = true;
5258
- }
5259
- 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])) {
5260
- this.p = p;
5261
- this._mdf.p = true;
5262
- updated = true;
5263
- }
5264
- return updated;
5265
- };
5266
-
5267
- function TextProperty(elem, data) {
5268
- this._frameId = initialDefaultFrame;
5269
- this.pv = '';
5270
- this.v = '';
5271
- this.kf = false;
5272
- this._isFirstFrame = true;
5273
- this._mdf = false;
5274
- this.data = data;
5275
- this.elem = elem;
5276
- this.comp = this.elem.comp;
5277
- this.keysIndex = 0;
5278
- this.canResize = false;
5279
- this.minimumFontSize = 1;
5280
- this.effectsSequence = [];
5281
- this.currentData = {
5282
- ascent: 0,
5283
- boxWidth: this.defaultBoxWidth,
5284
- f: '',
5285
- fStyle: '',
5286
- fWeight: '',
5287
- fc: '',
5288
- j: '',
5289
- justifyOffset: '',
5290
- l: [],
5291
- lh: 0,
5292
- lineWidths: [],
5293
- ls: '',
5294
- of: '',
5295
- s: '',
5296
- sc: '',
5297
- sw: 0,
5298
- t: 0,
5299
- tr: 0,
5300
- sz: 0,
5301
- ps: null,
5302
- fillColorAnim: false,
5303
- strokeColorAnim: false,
5304
- strokeWidthAnim: false,
5305
- yOffset: 0,
5306
- finalSize: 0,
5307
- finalText: [],
5308
- finalLineHeight: 0,
5309
- __complete: false
5310
-
5311
- };
5312
- this.copyData(this.currentData, this.data.d.k[0].s);
5313
-
5314
- if (!this.searchProperty()) {
5315
- this.completeTextData(this.currentData);
5316
- }
5317
- }
5318
-
5319
- TextProperty.prototype.defaultBoxWidth = [0, 0];
5320
-
5321
- TextProperty.prototype.copyData = function (obj, data) {
5322
- for (var s in data) {
5323
- if (data.hasOwnProperty(s)) {
5324
- obj[s] = data[s];
5325
- }
5326
- }
5327
- return obj;
5328
- }
5329
-
5330
- TextProperty.prototype.setCurrentData = function (data) {
5331
- if (!data.__complete) {
5332
- this.completeTextData(data);
5333
- }
5334
- this.currentData = data;
5335
- this.currentData.boxWidth = this.currentData.boxWidth || this.defaultBoxWidth;
5336
- this._mdf = true;
5337
- };
5338
-
5339
- TextProperty.prototype.searchProperty = function () {
5340
- return this.searchKeyframes();
5341
- };
5342
-
5343
- TextProperty.prototype.searchKeyframes = function () {
5344
- this.kf = this.data.d.k.length > 1;
5345
- if (this.kf) {
5346
- this.addEffect(this.getKeyframeValue.bind(this));
5347
- }
5348
- return this.kf;
5349
- }
5350
-
5351
- TextProperty.prototype.addEffect = function (effectFunction) {
5352
- this.effectsSequence.push(effectFunction);
5353
- this.elem.addDynamicProperty(this);
5354
- };
5355
-
5356
- TextProperty.prototype.getValue = function (_finalValue) {
5357
- if ((this.elem.globalData.frameId === this.frameId || !this.effectsSequence.length) && !_finalValue) {
5358
- return;
5359
- }
5360
- this.currentData.t = this.data.d.k[this.keysIndex].s.t;
5361
- var currentValue = this.currentData;
5362
- var currentIndex = this.keysIndex;
5363
- if (this.lock) {
5364
- this.setCurrentData(this.currentData);
5365
- return;
5366
- }
5367
- this.lock = true;
5368
- this._mdf = false;
5369
- var multipliedValue;
5370
- var i, len = this.effectsSequence.length;
5371
- var finalValue = _finalValue || this.data.d.k[this.keysIndex].s;
5372
- for (i = 0; i < len; i += 1) {
5373
- //Checking if index changed to prevent creating a new object every time the expression updates.
5374
- if (currentIndex !== this.keysIndex) {
5375
- finalValue = this.effectsSequence[i](finalValue, finalValue.t);
5376
- } else {
5377
- finalValue = this.effectsSequence[i](this.currentData, finalValue.t);
5378
- }
5379
- }
5380
- if (currentValue !== finalValue) {
5381
- this.setCurrentData(finalValue);
5382
- }
5383
- this.pv = this.v = this.currentData;
5384
- this.lock = false;
5385
- this.frameId = this.elem.globalData.frameId;
5386
- }
5387
-
5388
- TextProperty.prototype.getKeyframeValue = function () {
5389
- var textKeys = this.data.d.k,
5390
- textDocumentData;
5391
- var frameNum = this.elem.comp.renderedFrame;
5392
- var i = 0,
5393
- len = textKeys.length;
5394
- while (i <= len - 1) {
5395
- textDocumentData = textKeys[i].s;
5396
- if (i === len - 1 || textKeys[i + 1].t > frameNum) {
5397
- break;
5398
- }
5399
- i += 1;
5400
- }
5401
- if (this.keysIndex !== i) {
5402
- this.keysIndex = i;
5403
- }
5404
- return this.data.d.k[this.keysIndex].s;
5405
- };
5406
-
5407
- TextProperty.prototype.buildFinalText = function (text) {
5408
- var combinedCharacters = FontManager.getCombinedCharacterCodes();
5409
- var charactersArray = [];
5410
- var i = 0,
5411
- len = text.length;
5412
- var charCode;
5413
- while (i < len) {
5414
- charCode = text.charCodeAt(i);
5415
- if (combinedCharacters.indexOf(charCode) !== -1) {
5416
- charactersArray[charactersArray.length - 1] += text.charAt(i);
5417
- } else {
5418
- if (charCode >= 0xD800 && charCode <= 0xDBFF) {
5419
- charCode = text.charCodeAt(i + 1);
5420
- if (charCode >= 0xDC00 && charCode <= 0xDFFF) {
5421
- charactersArray.push(text.substr(i, 2));
5422
- ++i;
5423
- } else {
5424
- charactersArray.push(text.charAt(i));
5425
- }
5426
- } else {
5427
- charactersArray.push(text.charAt(i));
5428
- }
5429
- }
5430
- i += 1;
5431
- }
5432
- return charactersArray;
5433
- }
5434
-
5435
- TextProperty.prototype.completeTextData = function (documentData) {
5436
- documentData.__complete = true;
5437
- var fontManager = this.elem.globalData.fontManager;
5438
- var data = this.data;
5439
- var letters = [];
5440
- var i, len;
5441
- var newLineFlag, index = 0,
5442
- val;
5443
- var anchorGrouping = data.m.g;
5444
- var currentSize = 0,
5445
- currentPos = 0,
5446
- currentLine = 0,
5447
- lineWidths = [];
5448
- var lineWidth = 0;
5449
- var maxLineWidth = 0;
5450
- var j, jLen;
5451
- var fontData = fontManager.getFontByName(documentData.f);
5452
- var charData, cLength = 0;
5453
- var styles = fontData.fStyle ? fontData.fStyle.split(' ') : [];
5454
-
5455
- var fWeight = 'normal',
5456
- fStyle = 'normal';
5457
- len = styles.length;
5458
- var styleName;
5459
- for (i = 0; i < len; i += 1) {
5460
- styleName = styles[i].toLowerCase();
5461
- switch (styleName) {
5462
- case 'italic':
5463
- fStyle = 'italic';
5464
- break;
5465
- case 'bold':
5466
- fWeight = '700';
5467
- break;
5468
- case 'black':
5469
- fWeight = '900';
5470
- break;
5471
- case 'medium':
5472
- fWeight = '500';
5473
- break;
5474
- case 'regular':
5475
- case 'normal':
5476
- fWeight = '400';
5477
- break;
5478
- case 'light':
5479
- case 'thin':
5480
- fWeight = '200';
5481
- break;
5482
- }
5483
- }
5484
- documentData.fWeight = fontData.fWeight || fWeight;
5485
- documentData.fStyle = fStyle;
5486
- documentData.finalSize = documentData.s;
5487
- documentData.finalText = this.buildFinalText(documentData.t);
5488
- len = documentData.finalText.length;
5489
- documentData.finalLineHeight = documentData.lh;
5490
- var trackingOffset = documentData.tr / 1000 * documentData.finalSize;
5491
- var charCode;
5492
- if (documentData.sz) {
5493
- var flag = true;
5494
- var boxWidth = documentData.sz[0];
5495
- var boxHeight = documentData.sz[1];
5496
- var currentHeight, finalText;
5497
- while (flag) {
5498
- finalText = this.buildFinalText(documentData.t);
5499
- currentHeight = 0;
5500
- lineWidth = 0;
5501
- len = finalText.length;
5502
- trackingOffset = documentData.tr / 1000 * documentData.finalSize;
5503
- var lastSpaceIndex = -1;
5504
- for (i = 0; i < len; i += 1) {
5505
- charCode = finalText[i].charCodeAt(0);
5506
- newLineFlag = false;
5507
- if (finalText[i] === ' ') {
5508
- lastSpaceIndex = i;
5509
- } else if (charCode === 13 || charCode === 3) {
5510
- lineWidth = 0;
5511
- newLineFlag = true;
5512
- currentHeight += documentData.finalLineHeight || documentData.finalSize * 1.2;
5513
- }
5514
- if (fontManager.chars) {
5515
- charData = fontManager.getCharData(finalText[i], fontData.fStyle, fontData.fFamily);
5516
- cLength = newLineFlag ? 0 : charData.w * documentData.finalSize / 100;
5517
- } else {
5518
- //tCanvasHelper.font = documentData.s + 'px '+ fontData.fFamily;
5519
- cLength = fontManager.measureText(finalText[i], documentData.f, documentData.finalSize);
5520
- }
5521
- if (lineWidth + cLength > boxWidth && finalText[i] !== ' ') {
5522
- if (lastSpaceIndex === -1) {
5523
- len += 1;
5524
- } else {
5525
- i = lastSpaceIndex;
5526
- }
5527
- currentHeight += documentData.finalLineHeight || documentData.finalSize * 1.2;
5528
- finalText.splice(i, lastSpaceIndex === i ? 1 : 0, "\r");
5529
- //finalText = finalText.substr(0,i) + "\r" + finalText.substr(i === lastSpaceIndex ? i + 1 : i);
5530
- lastSpaceIndex = -1;
5531
- lineWidth = 0;
5532
- } else {
5533
- lineWidth += cLength;
5534
- lineWidth += trackingOffset;
5535
- }
5536
- }
5537
- currentHeight += fontData.ascent * documentData.finalSize / 100;
5538
- if (this.canResize && documentData.finalSize > this.minimumFontSize && boxHeight < currentHeight) {
5539
- documentData.finalSize -= 1;
5540
- documentData.finalLineHeight = documentData.finalSize * documentData.lh / documentData.s;
5541
- } else {
5542
- documentData.finalText = finalText;
5543
- len = documentData.finalText.length;
5544
- flag = false;
5545
- }
5546
- }
5547
-
5548
- }
5549
- lineWidth = -trackingOffset;
5550
- cLength = 0;
5551
- var uncollapsedSpaces = 0;
5552
- var currentChar;
5553
- for (i = 0; i < len; i += 1) {
5554
- newLineFlag = false;
5555
- currentChar = documentData.finalText[i];
5556
- charCode = currentChar.charCodeAt(0);
5557
- if (currentChar === ' ') {
5558
- val = '\u00A0';
5559
- } else if (charCode === 13 || charCode === 3) {
5560
- uncollapsedSpaces = 0;
5561
- lineWidths.push(lineWidth);
5562
- maxLineWidth = lineWidth > maxLineWidth ? lineWidth : maxLineWidth;
5563
- lineWidth = -2 * trackingOffset;
5564
- val = '';
5565
- newLineFlag = true;
5566
- currentLine += 1;
5567
- } else {
5568
- val = documentData.finalText[i];
5569
- }
5570
- if (fontManager.chars) {
5571
- charData = fontManager.getCharData(currentChar, fontData.fStyle, fontManager.getFontByName(documentData.f).fFamily);
5572
- cLength = newLineFlag ? 0 : charData.w * documentData.finalSize / 100;
5573
- } else {
5574
- //var charWidth = fontManager.measureText(val, documentData.f, documentData.finalSize);
5575
- //tCanvasHelper.font = documentData.finalSize + 'px '+ fontManager.getFontByName(documentData.f).fFamily;
5576
- cLength = fontManager.measureText(val, documentData.f, documentData.finalSize);
5577
- }
5578
-
5579
- //
5580
- if (currentChar === ' ') {
5581
- uncollapsedSpaces += cLength + trackingOffset;
5582
- } else {
5583
- lineWidth += cLength + trackingOffset + uncollapsedSpaces;
5584
- uncollapsedSpaces = 0;
5585
- }
5586
- letters.push({
5587
- l: cLength,
5588
- an: cLength,
5589
- add: currentSize,
5590
- n: newLineFlag,
5591
- anIndexes: [],
5592
- val: val,
5593
- line: currentLine,
5594
- animatorJustifyOffset: 0
5595
- });
5596
- if (anchorGrouping == 2) {
5597
- currentSize += cLength;
5598
- if (val === '' || val === '\u00A0' || i === len - 1) {
5599
- if (val === '' || val === '\u00A0') {
5600
- currentSize -= cLength;
5601
- }
5602
- while (currentPos <= i) {
5603
- letters[currentPos].an = currentSize;
5604
- letters[currentPos].ind = index;
5605
- letters[currentPos].extra = cLength;
5606
- currentPos += 1;
5607
- }
5608
- index += 1;
5609
- currentSize = 0;
5610
- }
5611
- } else if (anchorGrouping == 3) {
5612
- currentSize += cLength;
5613
- if (val === '' || i === len - 1) {
5614
- if (val === '') {
5615
- currentSize -= cLength;
5616
- }
5617
- while (currentPos <= i) {
5618
- letters[currentPos].an = currentSize;
5619
- letters[currentPos].ind = index;
5620
- letters[currentPos].extra = cLength;
5621
- currentPos += 1;
5622
- }
5623
- currentSize = 0;
5624
- index += 1;
5625
- }
5626
- } else {
5627
- letters[index].ind = index;
5628
- letters[index].extra = 0;
5629
- index += 1;
5630
- }
5631
- }
5632
- documentData.l = letters;
5633
- maxLineWidth = lineWidth > maxLineWidth ? lineWidth : maxLineWidth;
5634
- lineWidths.push(lineWidth);
5635
- if (documentData.sz) {
5636
- documentData.boxWidth = documentData.sz[0];
5637
- documentData.justifyOffset = 0;
5638
- } else {
5639
- documentData.boxWidth = maxLineWidth;
5640
- switch (documentData.j) {
5641
- case 1:
5642
- documentData.justifyOffset = -documentData.boxWidth;
5643
- break;
5644
- case 2:
5645
- documentData.justifyOffset = -documentData.boxWidth / 2;
5646
- break;
5647
- default:
5648
- documentData.justifyOffset = 0;
5649
- }
5650
- }
5651
- documentData.lineWidths = lineWidths;
5652
-
5653
- var animators = data.a,
5654
- animatorData, letterData;
5655
- jLen = animators.length;
5656
- var based, ind, indexes = [];
5657
- for (j = 0; j < jLen; j += 1) {
5658
- animatorData = animators[j];
5659
- if (animatorData.a.sc) {
5660
- documentData.strokeColorAnim = true;
5661
- }
5662
- if (animatorData.a.sw) {
5663
- documentData.strokeWidthAnim = true;
5664
- }
5665
- if (animatorData.a.fc || animatorData.a.fh || animatorData.a.fs || animatorData.a.fb) {
5666
- documentData.fillColorAnim = true;
5667
- }
5668
- ind = 0;
5669
- based = animatorData.s.b;
5670
- for (i = 0; i < len; i += 1) {
5671
- letterData = letters[i];
5672
- letterData.anIndexes[j] = ind;
5673
- if ((based == 1 && letterData.val !== '') || (based == 2 && letterData.val !== '' && letterData.val !== '\u00A0') || (based == 3 && (letterData.n || letterData.val == '\u00A0' || i == len - 1)) || (based == 4 && (letterData.n || i == len - 1))) {
5674
- if (animatorData.s.rn === 1) {
5675
- indexes.push(ind);
5676
- }
5677
- ind += 1;
5678
- }
5679
- }
5680
- data.a[j].s.totalChars = ind;
5681
- var currentInd = -1,
5682
- newInd;
5683
- if (animatorData.s.rn === 1) {
5684
- for (i = 0; i < len; i += 1) {
5685
- letterData = letters[i];
5686
- if (currentInd != letterData.anIndexes[j]) {
5687
- currentInd = letterData.anIndexes[j];
5688
- newInd = indexes.splice(Math.floor(Math.random() * indexes.length), 1)[0];
5689
- }
5690
- letterData.anIndexes[j] = newInd;
5691
- }
5692
- }
5693
- }
5694
- documentData.yOffset = documentData.finalLineHeight || documentData.finalSize * 1.2;
5695
- documentData.ls = documentData.ls || 0;
5696
- documentData.ascent = fontData.ascent * documentData.finalSize / 100;
5697
- };
5698
-
5699
- TextProperty.prototype.updateDocumentData = function (newData, index) {
5700
- index = index === undefined ? this.keysIndex : index;
5701
- var dData = this.copyData({}, this.data.d.k[index].s);
5702
- dData = this.copyData(dData, newData);
5703
- this.data.d.k[index].s = dData;
5704
- this.recalculate(index);
5705
- this.elem.addDynamicProperty(this);
5706
- };
5707
-
5708
- TextProperty.prototype.recalculate = function (index) {
5709
- var dData = this.data.d.k[index].s;
5710
- dData.__complete = false;
5711
- this.keysIndex = 0;
5712
- this._isFirstFrame = true;
5713
- this.getValue(dData);
5714
- }
5715
-
5716
- TextProperty.prototype.canResizeFont = function (_canResize) {
5717
- this.canResize = _canResize;
5718
- this.recalculate(this.keysIndex);
5719
- this.elem.addDynamicProperty(this);
5720
- };
5721
-
5722
- TextProperty.prototype.setMinimumFontSize = function (_fontValue) {
5723
- this.minimumFontSize = Math.floor(_fontValue) || 1;
5724
- this.recalculate(this.keysIndex);
5725
- this.elem.addDynamicProperty(this);
5726
- };
5727
-
5728
- var TextSelectorProp = (function () {
5729
- var max = Math.max;
5730
- var min = Math.min;
5731
- var floor = Math.floor;
5732
-
5733
- function TextSelectorProp(elem, data) {
5734
- this._currentTextLength = -1;
5735
- this.k = false;
5736
- this.data = data;
5737
- this.elem = elem;
5738
- this.comp = elem.comp;
5739
- this.finalS = 0;
5740
- this.finalE = 0;
5741
- this.initDynamicPropertyContainer(elem);
5742
- this.s = PropertyFactory.getProp(elem, data.s || {
5743
- k: 0
5744
- }, 0, 0, this);
5745
- if ('e' in data) {
5746
- this.e = PropertyFactory.getProp(elem, data.e, 0, 0, this);
5747
- } else {
5748
- this.e = {
5749
- v: 100
5750
- };
5751
- }
5752
- this.o = PropertyFactory.getProp(elem, data.o || {
5753
- k: 0
5754
- }, 0, 0, this);
5755
- this.xe = PropertyFactory.getProp(elem, data.xe || {
5756
- k: 0
5757
- }, 0, 0, this);
5758
- this.ne = PropertyFactory.getProp(elem, data.ne || {
5759
- k: 0
5760
- }, 0, 0, this);
5761
- this.a = PropertyFactory.getProp(elem, data.a, 0, 0.01, this);
5762
- if (!this.dynamicProperties.length) {
5763
- this.getValue();
5764
- }
5765
- }
5766
-
5767
- TextSelectorProp.prototype = {
5768
- getMult: function (ind) {
5769
- if (this._currentTextLength !== this.elem.textProperty.currentData.l.length) {
5770
- this.getValue();
5771
- }
5772
- //var easer = bez.getEasingCurve(this.ne.v/100,0,1-this.xe.v/100,1);
5773
- var x1 = 0;
5774
- var y1 = 0;
5775
- var x2 = 1;
5776
- var y2 = 1;
5777
- if (this.ne.v > 0) {
5778
- x1 = this.ne.v / 100.0;
5779
- } else {
5780
- y1 = -this.ne.v / 100.0;
5781
- }
5782
- if (this.xe.v > 0) {
5783
- x2 = 1.0 - this.xe.v / 100.0;
5784
- } else {
5785
- y2 = 1.0 + this.xe.v / 100.0;
5786
- }
5787
- var easer = BezierFactory.getBezierEasing(x1, y1, x2, y2).get;
5788
-
5789
- var mult = 0;
5790
- var s = this.finalS;
5791
- var e = this.finalE;
5792
- var type = this.data.sh;
5793
- if (type === 2) {
5794
- if (e === s) {
5795
- mult = ind >= e ? 1 : 0;
5796
- } else {
5797
- mult = max(0, min(0.5 / (e - s) + (ind - s) / (e - s), 1));
5798
- }
5799
- mult = easer(mult);
5800
- } else if (type === 3) {
5801
- if (e === s) {
5802
- mult = ind >= e ? 0 : 1;
5803
- } else {
5804
- mult = 1 - max(0, min(0.5 / (e - s) + (ind - s) / (e - s), 1));
5805
- }
5806
-
5807
- mult = easer(mult);
5808
- } else if (type === 4) {
5809
- if (e === s) {
5810
- mult = 0;
5811
- } else {
5812
- mult = max(0, min(0.5 / (e - s) + (ind - s) / (e - s), 1));
5813
- if (mult < 0.5) {
5814
- mult *= 2;
5815
- } else {
5816
- mult = 1 - 2 * (mult - 0.5);
5817
- }
5818
- }
5819
- mult = easer(mult);
5820
- } else if (type === 5) {
5821
- if (e === s) {
5822
- mult = 0;
5823
- } else {
5824
- var tot = e - s;
5825
- /*ind += 0.5;
5826
- mult = -4/(tot*tot)*(ind*ind)+(4/tot)*ind;*/
5827
- ind = min(max(0, ind + 0.5 - s), e - s);
5828
- var x = -tot / 2 + ind;
5829
- var a = tot / 2;
5830
- mult = Math.sqrt(1 - (x * x) / (a * a));
5831
- }
5832
- mult = easer(mult);
5833
- } else if (type === 6) {
5834
- if (e === s) {
5835
- mult = 0;
5836
- } else {
5837
- ind = min(max(0, ind + 0.5 - s), e - s);
5838
- mult = (1 + (Math.cos((Math.PI + Math.PI * 2 * (ind) / (e - s))))) / 2;
5839
- }
5840
- mult = easer(mult);
5841
- } else {
5842
- if (ind >= floor(s)) {
5843
- if (ind - s < 0) {
5844
- mult = max(0, min(min(e, 1) - (s - ind), 1));
5845
- } else {
5846
- mult = max(0, min(e - ind, 1));
5847
- }
5848
- }
5849
- mult = easer(mult);
5850
- }
5851
- return mult * this.a.v;
5852
- },
5853
- getValue: function (newCharsFlag) {
5854
- this.iterateDynamicProperties();
5855
- this._mdf = newCharsFlag || this._mdf;
5856
- this._currentTextLength = this.elem.textProperty.currentData.l.length || 0;
5857
- if (newCharsFlag && this.data.r === 2) {
5858
- this.e.v = this._currentTextLength;
5859
- }
5860
- var divisor = this.data.r === 2 ? 1 : 100 / this.data.totalChars;
5861
- var o = this.o.v / divisor;
5862
- var s = this.s.v / divisor + o;
5863
- var e = (this.e.v / divisor) + o;
5864
- if (s > e) {
5865
- var _s = s;
5866
- s = e;
5867
- e = _s;
5868
- }
5869
- this.finalS = s;
5870
- this.finalE = e;
5871
- }
5872
- }
5873
- extendPrototype([DynamicPropertyContainer], TextSelectorProp);
5874
-
5875
- function getTextSelectorProp(elem, data, arr) {
5876
- return new TextSelectorProp(elem, data, arr);
5877
- }
5878
-
5879
- return {
5880
- getTextSelectorProp: getTextSelectorProp
5881
- };
5882
- }());
5883
-
5884
-
5885
- var pool_factory = (function () {
5886
- return function (initialLength, _create, _release, _clone) {
5887
-
5888
- var _length = 0;
5889
- var _maxLength = initialLength;
5890
- var pool = createSizedArray(_maxLength);
5891
-
5892
- var ob = {
5893
- newElement: newElement,
5894
- release: release
5895
- };
5896
-
5897
- function newElement() {
5898
- var element;
5899
- if (_length) {
5900
- _length -= 1;
5901
- element = pool[_length];
5902
- } else {
5903
- element = _create();
5904
- }
5905
- return element;
5906
- }
5907
-
5908
- function release(element) {
5909
- if (_length === _maxLength) {
5910
- pool = pooling.double(pool);
5911
- _maxLength = _maxLength * 2;
5912
- }
5913
- if (_release) {
5914
- _release(element);
5915
- }
5916
- pool[_length] = element;
5917
- _length += 1;
5918
- }
5919
-
5920
- function clone() {
5921
- var clonedElement = newElement();
5922
- return _clone(clonedElement);
5923
- }
5924
-
5925
- return ob;
5926
- };
5927
- }());
5928
-
5929
- var pooling = (function () {
5930
-
5931
- function double(arr) {
5932
- return arr.concat(createSizedArray(arr.length));
5933
- }
5934
-
5935
- return {
5936
- double: double
5937
- };
5938
- }());
5939
- var point_pool = (function () {
5940
-
5941
- function create() {
5942
- return createTypedArray('float32', 2);
5943
- }
5944
- return pool_factory(8, create);
5945
- }());
5946
- var shape_pool = (function () {
5947
-
5948
- function create() {
5949
- return new ShapePath();
5950
- }
5951
-
5952
- function release(shapePath) {
5953
- var len = shapePath._length,
5954
- i;
5955
- for (i = 0; i < len; i += 1) {
5956
- point_pool.release(shapePath.v[i]);
5957
- point_pool.release(shapePath.i[i]);
5958
- point_pool.release(shapePath.o[i]);
5959
- shapePath.v[i] = null;
5960
- shapePath.i[i] = null;
5961
- shapePath.o[i] = null;
5962
- }
5963
- shapePath._length = 0;
5964
- shapePath.c = false;
5965
- }
5966
-
5967
- function clone(shape) {
5968
- var cloned = factory.newElement();
5969
- var i, len = shape._length === undefined ? shape.v.length : shape._length;
5970
- cloned.setLength(len);
5971
- cloned.c = shape.c;
5972
- var pt;
5973
-
5974
- for (i = 0; i < len; i += 1) {
5975
- 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);
5976
- }
5977
- return cloned;
5978
- }
5979
-
5980
- var factory = pool_factory(4, create, release);
5981
- factory.clone = clone;
5982
-
5983
- return factory;
5984
- }());
5985
- var shapeCollection_pool = (function () {
5986
- var ob = {
5987
- newShapeCollection: newShapeCollection,
5988
- release: release
5989
- };
5990
-
5991
- var _length = 0;
5992
- var _maxLength = 4;
5993
- var pool = createSizedArray(_maxLength);
5994
-
5995
- function newShapeCollection() {
5996
- var shapeCollection;
5997
- if (_length) {
5998
- _length -= 1;
5999
- shapeCollection = pool[_length];
6000
- } else {
6001
- shapeCollection = new ShapeCollection();
6002
- }
6003
- return shapeCollection;
6004
- }
6005
-
6006
- function release(shapeCollection) {
6007
- var i, len = shapeCollection._length;
6008
- for (i = 0; i < len; i += 1) {
6009
- shape_pool.release(shapeCollection.shapes[i]);
6010
- }
6011
- shapeCollection._length = 0;
6012
-
6013
- if (_length === _maxLength) {
6014
- pool = pooling.double(pool);
6015
- _maxLength = _maxLength * 2;
6016
- }
6017
- pool[_length] = shapeCollection;
6018
- _length += 1;
6019
- }
6020
-
6021
- return ob;
6022
- }());
6023
- var segments_length_pool = (function () {
6024
-
6025
- function create() {
6026
- return {
6027
- lengths: [],
6028
- totalLength: 0
6029
- };
6030
- }
6031
-
6032
- function release(element) {
6033
- var i, len = element.lengths.length;
6034
- for (i = 0; i < len; i += 1) {
6035
- bezier_length_pool.release(element.lengths[i]);
6036
- }
6037
- element.lengths.length = 0;
6038
- }
6039
-
6040
- return pool_factory(8, create, release);
6041
- }());
6042
- var bezier_length_pool = (function () {
6043
-
6044
- function create() {
6045
- return {
6046
- addedLength: 0,
6047
- percents: createTypedArray('float32', defaultCurveSegments),
6048
- lengths: createTypedArray('float32', defaultCurveSegments),
6049
- };
6050
- }
6051
- return pool_factory(8, create);
6052
- }());
6053
-
6054
- function BaseRenderer() { }
6055
- BaseRenderer.prototype.checkLayers = function (num) {
6056
- var i, len = this.layers.length,
6057
- data;
6058
- this.completeLayers = true;
6059
- for (i = len - 1; i >= 0; i--) {
6060
- if (!this.elements[i]) {
6061
- data = this.layers[i];
6062
- if (data.ip - data.st <= (num - this.layers[i].st) && data.op - data.st > (num - this.layers[i].st)) {
6063
- this.buildItem(i);
6064
- }
6065
- }
6066
- this.completeLayers = this.elements[i] ? this.completeLayers : false;
6067
- }
6068
- this.checkPendingElements();
6069
- };
6070
-
6071
- BaseRenderer.prototype.createItem = function (layer) {
6072
- switch (layer.ty) {
6073
- case 2:
6074
- return this.createImage(layer);
6075
- case 0:
6076
- return this.createComp(layer);
6077
- case 1:
6078
- return this.createSolid(layer);
6079
- case 3:
6080
- return this.createNull(layer);
6081
- case 4:
6082
- return this.createShape(layer);
6083
- case 5:
6084
- return this.createText(layer);
6085
- case 13:
6086
- return this.createCamera(layer);
6087
- }
6088
- return this.createNull(layer);
6089
- };
6090
-
6091
- BaseRenderer.prototype.createCamera = function () {
6092
- throw new Error('You\'re using a 3d camera. Try the html renderer.');
6093
- };
6094
-
6095
- BaseRenderer.prototype.buildAllItems = function () {
6096
- var i, len = this.layers.length;
6097
- for (i = 0; i < len; i += 1) {
6098
- this.buildItem(i);
6099
- }
6100
- this.checkPendingElements();
6101
- };
6102
-
6103
- BaseRenderer.prototype.includeLayers = function (newLayers) {
6104
- this.completeLayers = false;
6105
- var i, len = newLayers.length;
6106
- var j, jLen = this.layers.length;
6107
- for (i = 0; i < len; i += 1) {
6108
- j = 0;
6109
- while (j < jLen) {
6110
- if (this.layers[j].id == newLayers[i].id) {
6111
- this.layers[j] = newLayers[i];
6112
- break;
6113
- }
6114
- j += 1;
6115
- }
6116
- }
6117
- };
6118
-
6119
- BaseRenderer.prototype.setProjectInterface = function (pInterface) {
6120
- this.globalData.projectInterface = pInterface;
6121
- };
6122
-
6123
- BaseRenderer.prototype.initItems = function () {
6124
- if (!this.globalData.progressiveLoad) {
6125
- this.buildAllItems();
6126
- }
6127
- };
6128
- BaseRenderer.prototype.buildElementParenting = function (element, parentName, hierarchy) {
6129
- var elements = this.elements;
6130
- var layers = this.layers;
6131
- var i = 0,
6132
- len = layers.length;
6133
- while (i < len) {
6134
- if (layers[i].ind == parentName) {
6135
- if (!elements[i] || elements[i] === true) {
6136
- this.buildItem(i);
6137
- this.addPendingElement(element);
6138
- } else {
6139
- hierarchy.push(elements[i]);
6140
- elements[i].setAsParent();
6141
- if (layers[i].parent !== undefined) {
6142
- this.buildElementParenting(element, layers[i].parent, hierarchy);
6143
- } else {
6144
- element.setHierarchy(hierarchy);
6145
- }
6146
- }
6147
- }
6148
- i += 1;
6149
- }
6150
- };
6151
-
6152
- BaseRenderer.prototype.addPendingElement = function (element) {
6153
- this.pendingElements.push(element);
6154
- };
6155
-
6156
- BaseRenderer.prototype.searchExtraCompositions = function (assets) {
6157
- var i, len = assets.length;
6158
- for (i = 0; i < len; i += 1) {
6159
- if (assets[i].xt) {
6160
- var comp = this.createComp(assets[i]);
6161
- comp.initExpressions();
6162
- this.globalData.projectInterface.registerComposition(comp);
6163
- }
6164
- }
6165
- };
6166
-
6167
- BaseRenderer.prototype.setupGlobalData = function (animData, fontsContainer) {
6168
- this.globalData.fontManager = new FontManager();
6169
- this.globalData.fontManager.addChars(animData.chars);
6170
- this.globalData.fontManager.addFonts(animData.fonts, fontsContainer);
6171
- this.globalData.getAssetData = this.animationItem.getAssetData.bind(this.animationItem);
6172
- this.globalData.getAssetsPath = this.animationItem.getAssetsPath.bind(this.animationItem);
6173
- this.globalData.imageLoader = this.animationItem.imagePreloader;
6174
- this.globalData.frameId = 0;
6175
- this.globalData.frameRate = animData.fr;
6176
- this.globalData.nm = animData.nm;
6177
- this.globalData.compSize = {
6178
- w: animData.w,
6179
- h: animData.h
6180
- }
6181
- }
6182
-
6183
- function SVGRenderer(animationItem, config) {
6184
- this.animationItem = animationItem;
6185
- this.layers = null;
6186
- this.renderedFrame = -1;
6187
- this.svgElement = createNS('svg');
6188
- var ariaLabel = '';
6189
- if (config && config.title) {
6190
- var titleElement = createNS('title');
6191
- var titleId = createElementID();
6192
- titleElement.setAttribute('id', titleId);
6193
- titleElement.textContent = config.title;
6194
- this.svgElement.appendChild(titleElement);
6195
- ariaLabel += titleId;
6196
- }
6197
- if (config && config.description) {
6198
- var descElement = createNS('desc');
6199
- var descId = createElementID();
6200
- descElement.setAttribute('id', descId);
6201
- descElement.textContent = config.description;
6202
- this.svgElement.appendChild(descElement);
6203
- ariaLabel += ' ' + descId;
6204
- }
6205
- if (ariaLabel) {
6206
- this.svgElement.setAttribute('aria-labelledby', ariaLabel)
6207
- }
6208
- var defs = createNS('defs');
6209
- this.svgElement.appendChild(defs);
6210
- var maskElement = createNS('g');
6211
- this.svgElement.appendChild(maskElement);
6212
- this.layerElement = maskElement;
6213
- this.renderConfig = {
6214
- preserveAspectRatio: (config && config.preserveAspectRatio) || 'xMidYMid meet',
6215
- imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
6216
- progressiveLoad: (config && config.progressiveLoad) || false,
6217
- hideOnTransparent: (config && config.hideOnTransparent === false) ? false : true,
6218
- viewBoxOnly: true,
6219
- viewBoxSize: (config && config.viewBoxSize) || false,
6220
- className: (config && config.className) || '',
6221
- id: (config && config.id) || '',
6222
- focusable: config && config.focusable,
6223
- filterSize: {
6224
- width: config && config.filterSize && config.filterSize.width || '100%',
6225
- height: config && config.filterSize && config.filterSize.height || '100%',
6226
- x: config && config.filterSize && config.filterSize.x || '0%',
6227
- y: config && config.filterSize && config.filterSize.y || '0%',
6228
- }
6229
- };
6230
-
6231
- this.globalData = {
6232
- _mdf: false,
6233
- frameNum: -1,
6234
- defs: defs,
6235
- renderConfig: this.renderConfig
6236
- };
6237
- this.elements = [];
6238
- this.pendingElements = [];
6239
- this.destroyed = false;
6240
- this.rendererType = 'svg';
6241
-
6242
- }
6243
-
6244
- extendPrototype([BaseRenderer], SVGRenderer);
6245
-
6246
- SVGRenderer.prototype.createNull = function (data) {
6247
- return new NullElement(data, this.globalData, this);
6248
- };
6249
-
6250
- SVGRenderer.prototype.createShape = function (data) {
6251
- return new SVGShapeElement(data, this.globalData, this);
6252
- };
6253
-
6254
- SVGRenderer.prototype.createText = function (data) {
6255
- return new SVGTextElement(data, this.globalData, this);
6256
-
6257
- };
6258
-
6259
- SVGRenderer.prototype.createImage = function (data) {
6260
- return new IImageElement(data, this.globalData, this);
6261
- };
6262
-
6263
- SVGRenderer.prototype.createComp = function (data) {
6264
- return new SVGCompElement(data, this.globalData, this);
6265
-
6266
- };
6267
-
6268
- SVGRenderer.prototype.createSolid = function (data) {
6269
- return new ISolidElement(data, this.globalData, this);
6270
- };
6271
-
6272
- SVGRenderer.prototype.configAnimation = function (animData) {
6273
- this.svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
6274
- if (this.renderConfig.viewBoxSize) {
6275
- this.svgElement.setAttribute('viewBox', this.renderConfig.viewBoxSize);
6276
- } else {
6277
- this.svgElement.setAttribute('viewBox', '0 0 ' + animData.w + ' ' + animData.h);
6278
- }
6279
-
6280
- if (!this.renderConfig.viewBoxOnly) {
6281
- this.svgElement.setAttribute('width', animData.w);
6282
- this.svgElement.setAttribute('height', animData.h);
6283
- this.svgElement.style.width = '100%';
6284
- this.svgElement.style.height = '100%';
6285
- this.svgElement.style.transform = 'translate3d(0,0,0)';
6286
- }
6287
- if (this.renderConfig.className) {
6288
- this.svgElement.setAttribute('class', this.renderConfig.className);
6289
- }
6290
- if (this.renderConfig.id) {
6291
- this.svgElement.setAttribute('id', this.renderConfig.id);
6292
- }
6293
- if (this.renderConfig.focusable !== undefined) {
6294
- this.svgElement.setAttribute('focusable', this.renderConfig.focusable);
6295
- }
6296
- this.svgElement.setAttribute('preserveAspectRatio', this.renderConfig.preserveAspectRatio);
6297
- //this.layerElement.style.transform = 'translate3d(0,0,0)';
6298
- //this.layerElement.style.transformOrigin = this.layerElement.style.mozTransformOrigin = this.layerElement.style.webkitTransformOrigin = this.layerElement.style['-webkit-transform'] = "0px 0px 0px";
6299
- this.animationItem.wrapper.appendChild(this.svgElement);
6300
- //Mask animation
6301
- var defs = this.globalData.defs;
6302
-
6303
- this.setupGlobalData(animData, defs);
6304
- this.globalData.progressiveLoad = this.renderConfig.progressiveLoad;
6305
- this.data = animData;
6306
-
6307
- var maskElement = createNS('clipPath');
6308
- var rect = createNS('rect');
6309
- rect.setAttribute('width', animData.w);
6310
- rect.setAttribute('height', animData.h);
6311
- rect.setAttribute('x', 0);
6312
- rect.setAttribute('y', 0);
6313
- var maskId = createElementID();
6314
- maskElement.setAttribute('id', maskId);
6315
- maskElement.appendChild(rect);
6316
- this.layerElement.setAttribute("clip-path", "url(" + locationHref + "#" + maskId + ")");
6317
-
6318
- defs.appendChild(maskElement);
6319
- this.layers = animData.layers;
6320
- this.elements = createSizedArray(animData.layers.length);
6321
- };
6322
-
6323
-
6324
- SVGRenderer.prototype.destroy = function () {
6325
- this.animationItem.wrapper.innerHTML = '';
6326
- this.layerElement = null;
6327
- this.globalData.defs = null;
6328
- var i, len = this.layers ? this.layers.length : 0;
6329
- for (i = 0; i < len; i++) {
6330
- if (this.elements[i]) {
6331
- this.elements[i].destroy();
6332
- }
6333
- }
6334
- this.elements.length = 0;
6335
- this.destroyed = true;
6336
- this.animationItem = null;
6337
- };
6338
-
6339
- SVGRenderer.prototype.updateContainerSize = function () { };
6340
-
6341
- SVGRenderer.prototype.buildItem = function (pos) {
6342
- var elements = this.elements;
6343
- if (elements[pos] || this.layers[pos].ty == 99) {
6344
- return;
6345
- }
6346
- elements[pos] = true;
6347
- var element = this.createItem(this.layers[pos]);
6348
-
6349
- elements[pos] = element;
6350
- if (expressionsPlugin) {
6351
- if (this.layers[pos].ty === 0) {
6352
- this.globalData.projectInterface.registerComposition(element);
6353
- }
6354
- element.initExpressions();
6355
- }
6356
- this.appendElementInPos(element, pos);
6357
- if (this.layers[pos].tt) {
6358
- if (!this.elements[pos - 1] || this.elements[pos - 1] === true) {
6359
- this.buildItem(pos - 1);
6360
- this.addPendingElement(element);
6361
- } else {
6362
- element.setMatte(elements[pos - 1].layerId);
6363
- }
6364
- }
6365
- };
6366
-
6367
- SVGRenderer.prototype.checkPendingElements = function () {
6368
- while (this.pendingElements.length) {
6369
- var element = this.pendingElements.pop();
6370
- element.checkParenting();
6371
- if (element.data.tt) {
6372
- var i = 0,
6373
- len = this.elements.length;
6374
- while (i < len) {
6375
- if (this.elements[i] === element) {
6376
- element.setMatte(this.elements[i - 1].layerId);
6377
- break;
6378
- }
6379
- i += 1;
6380
- }
6381
- }
6382
- }
6383
- };
6384
-
6385
- SVGRenderer.prototype.renderFrame = function (num) {
6386
- if (this.renderedFrame === num || this.destroyed) {
6387
- return;
6388
- }
6389
- if (num === null) {
6390
- num = this.renderedFrame;
6391
- } else {
6392
- this.renderedFrame = num;
6393
- }
6394
- // console.log('-------');
6395
- // console.log('FRAME ',num);
6396
- this.globalData.frameNum = num;
6397
- this.globalData.frameId += 1;
6398
- this.globalData.projectInterface.currentFrame = num;
6399
- this.globalData._mdf = false;
6400
- var i, len = this.layers.length;
6401
- if (!this.completeLayers) {
6402
- this.checkLayers(num);
6403
- }
6404
- for (i = len - 1; i >= 0; i--) {
6405
- if (this.completeLayers || this.elements[i]) {
6406
- this.elements[i].prepareFrame(num - this.layers[i].st);
6407
- }
6408
- }
6409
- if (this.globalData._mdf) {
6410
- for (i = 0; i < len; i += 1) {
6411
- if (this.completeLayers || this.elements[i]) {
6412
- this.elements[i].renderFrame();
6413
- }
6414
- }
6415
- }
6416
- };
6417
-
6418
- SVGRenderer.prototype.appendElementInPos = function (element, pos) {
6419
- var newElement = element.getBaseElement();
6420
- if (!newElement) {
6421
- return;
6422
- }
6423
- var i = 0;
6424
- var nextElement;
6425
- while (i < pos) {
6426
- if (this.elements[i] && this.elements[i] !== true && this.elements[i].getBaseElement()) {
6427
- nextElement = this.elements[i].getBaseElement();
6428
- }
6429
- i += 1;
6430
- }
6431
- if (nextElement) {
6432
- this.layerElement.insertBefore(newElement, nextElement);
6433
- } else {
6434
- this.layerElement.appendChild(newElement);
6435
- }
6436
- };
6437
-
6438
- SVGRenderer.prototype.hide = function () {
6439
- this.layerElement.style.display = 'none';
6440
- };
6441
-
6442
- SVGRenderer.prototype.show = function () {
6443
- this.layerElement.style.display = 'block';
6444
- };
6445
-
6446
- function CanvasRenderer(animationItem, config) {
6447
- this.animationItem = animationItem;
6448
- this.renderConfig = {
6449
- clearCanvas: (config && config.clearCanvas !== undefined) ? config.clearCanvas : true,
6450
- context: (config && config.context) || null,
6451
- progressiveLoad: (config && config.progressiveLoad) || false,
6452
- preserveAspectRatio: (config && config.preserveAspectRatio) || 'xMidYMid meet',
6453
- imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
6454
- className: (config && config.className) || '',
6455
- id: (config && config.id) || '',
6456
- };
6457
- this.renderConfig.dpr = (config && config.dpr) || 1;
6458
- if (this.animationItem.wrapper) {
6459
- this.renderConfig.dpr = (config && config.dpr) || window.devicePixelRatio || 1;
6460
- }
6461
- this.renderedFrame = -1;
6462
- this.globalData = {
6463
- frameNum: -1,
6464
- _mdf: false,
6465
- renderConfig: this.renderConfig,
6466
- currentGlobalAlpha: -1
6467
- };
6468
- this.contextData = new CVContextData();
6469
- this.elements = [];
6470
- this.pendingElements = [];
6471
- this.transformMat = new Matrix();
6472
- this.completeLayers = false;
6473
- this.rendererType = 'canvas';
6474
- }
6475
- extendPrototype([BaseRenderer], CanvasRenderer);
6476
-
6477
- CanvasRenderer.prototype.createShape = function (data) {
6478
- return new CVShapeElement(data, this.globalData, this);
6479
- };
6480
-
6481
- CanvasRenderer.prototype.createText = function (data) {
6482
- return new CVTextElement(data, this.globalData, this);
6483
- };
6484
-
6485
- CanvasRenderer.prototype.createImage = function (data) {
6486
- return new CVImageElement(data, this.globalData, this);
6487
- };
6488
-
6489
- CanvasRenderer.prototype.createComp = function (data) {
6490
- return new CVCompElement(data, this.globalData, this);
6491
- };
6492
-
6493
- CanvasRenderer.prototype.createSolid = function (data) {
6494
- return new CVSolidElement(data, this.globalData, this);
6495
- };
6496
-
6497
- CanvasRenderer.prototype.createNull = SVGRenderer.prototype.createNull;
6498
-
6499
- CanvasRenderer.prototype.ctxTransform = function (props) {
6500
- if (props[0] === 1 && props[1] === 0 && props[4] === 0 && props[5] === 1 && props[12] === 0 && props[13] === 0) {
6501
- return;
6502
- }
6503
- if (!this.renderConfig.clearCanvas) {
6504
- this.canvasContext.transform(props[0], props[1], props[4], props[5], props[12], props[13]);
6505
- return;
6506
- }
6507
- this.transformMat.cloneFromProps(props);
6508
- var cProps = this.contextData.cTr.props;
6509
- this.transformMat.transform(cProps[0], cProps[1], cProps[2], cProps[3], cProps[4], cProps[5], cProps[6], cProps[7], cProps[8], cProps[9], cProps[10], cProps[11], cProps[12], cProps[13], cProps[14], cProps[15]);
6510
- //this.contextData.cTr.transform(props[0],props[1],props[2],props[3],props[4],props[5],props[6],props[7],props[8],props[9],props[10],props[11],props[12],props[13],props[14],props[15]);
6511
- this.contextData.cTr.cloneFromProps(this.transformMat.props);
6512
- var trProps = this.contextData.cTr.props;
6513
- this.canvasContext.setTransform(trProps[0], trProps[1], trProps[4], trProps[5], trProps[12], trProps[13]);
6514
- };
6515
-
6516
- CanvasRenderer.prototype.ctxOpacity = function (op) {
6517
- /*if(op === 1){
6518
- return;
6519
- }*/
6520
- if (!this.renderConfig.clearCanvas) {
6521
- this.canvasContext.globalAlpha *= op < 0 ? 0 : op;
6522
- this.globalData.currentGlobalAlpha = this.contextData.cO;
6523
- return;
6524
- }
6525
- this.contextData.cO *= op < 0 ? 0 : op;
6526
- if (this.globalData.currentGlobalAlpha !== this.contextData.cO) {
6527
- this.canvasContext.globalAlpha = this.contextData.cO;
6528
- this.globalData.currentGlobalAlpha = this.contextData.cO;
6529
- }
6530
- };
6531
-
6532
- CanvasRenderer.prototype.reset = function () {
6533
- if (!this.renderConfig.clearCanvas) {
6534
- this.canvasContext.restore();
6535
- return;
6536
- }
6537
- this.contextData.reset();
6538
- };
6539
-
6540
- CanvasRenderer.prototype.save = function (actionFlag) {
6541
- if (!this.renderConfig.clearCanvas) {
6542
- this.canvasContext.save();
6543
- return;
6544
- }
6545
- if (actionFlag) {
6546
- this.canvasContext.save();
6547
- }
6548
- var props = this.contextData.cTr.props;
6549
- if (this.contextData._length <= this.contextData.cArrPos) {
6550
- this.contextData.duplicate();
6551
- }
6552
- var i, arr = this.contextData.saved[this.contextData.cArrPos];
6553
- for (i = 0; i < 16; i += 1) {
6554
- arr[i] = props[i];
6555
- }
6556
- this.contextData.savedOp[this.contextData.cArrPos] = this.contextData.cO;
6557
- this.contextData.cArrPos += 1;
6558
- };
6559
-
6560
- CanvasRenderer.prototype.restore = function (actionFlag) {
6561
- if (!this.renderConfig.clearCanvas) {
6562
- this.canvasContext.restore();
6563
- return;
6564
- }
6565
- if (actionFlag) {
6566
- this.canvasContext.restore();
6567
- this.globalData.blendMode = 'source-over';
6568
- }
6569
- this.contextData.cArrPos -= 1;
6570
- var popped = this.contextData.saved[this.contextData.cArrPos];
6571
- var i, arr = this.contextData.cTr.props;
6572
- for (i = 0; i < 16; i += 1) {
6573
- arr[i] = popped[i];
6574
- }
6575
- this.canvasContext.setTransform(popped[0], popped[1], popped[4], popped[5], popped[12], popped[13]);
6576
- popped = this.contextData.savedOp[this.contextData.cArrPos];
6577
- this.contextData.cO = popped;
6578
- if (this.globalData.currentGlobalAlpha !== popped) {
6579
- this.canvasContext.globalAlpha = popped;
6580
- this.globalData.currentGlobalAlpha = popped;
6581
- }
6582
- };
6583
-
6584
- CanvasRenderer.prototype.configAnimation = function (animData) {
6585
- if (this.animationItem.wrapper) {
6586
- this.animationItem.container = createTag('canvas');
6587
- this.animationItem.container.style.width = '100%';
6588
- this.animationItem.container.style.height = '100%';
6589
- //this.animationItem.container.style.transform = 'translate3d(0,0,0)';
6590
- //this.animationItem.container.style.webkitTransform = 'translate3d(0,0,0)';
6591
- this.animationItem.container.style.transformOrigin = this.animationItem.container.style.mozTransformOrigin = this.animationItem.container.style.webkitTransformOrigin = this.animationItem.container.style['-webkit-transform'] = "0px 0px 0px";
6592
- this.animationItem.wrapper.appendChild(this.animationItem.container);
6593
- this.canvasContext = this.animationItem.container.getContext('2d');
6594
- if (this.renderConfig.className) {
6595
- this.animationItem.container.setAttribute('class', this.renderConfig.className);
6596
- }
6597
- if (this.renderConfig.id) {
6598
- this.animationItem.container.setAttribute('id', this.renderConfig.id);
6599
- }
6600
- } else {
6601
- this.canvasContext = this.renderConfig.context;
6602
- }
6603
- this.data = animData;
6604
- this.layers = animData.layers;
6605
- this.transformCanvas = {
6606
- w: animData.w,
6607
- h: animData.h,
6608
- sx: 0,
6609
- sy: 0,
6610
- tx: 0,
6611
- ty: 0
6612
- };
6613
- this.setupGlobalData(animData, document.body);
6614
- this.globalData.canvasContext = this.canvasContext;
6615
- this.globalData.renderer = this;
6616
- this.globalData.isDashed = false;
6617
- this.globalData.progressiveLoad = this.renderConfig.progressiveLoad;
6618
- this.globalData.transformCanvas = this.transformCanvas;
6619
- this.elements = createSizedArray(animData.layers.length);
6620
-
6621
- this.updateContainerSize();
6622
- };
6623
-
6624
- CanvasRenderer.prototype.updateContainerSize = function () {
6625
- this.reset();
6626
- var elementWidth, elementHeight;
6627
- if (this.animationItem.wrapper && this.animationItem.container) {
6628
- elementWidth = this.animationItem.wrapper.offsetWidth;
6629
- elementHeight = this.animationItem.wrapper.offsetHeight;
6630
- this.animationItem.container.setAttribute('width', elementWidth * this.renderConfig.dpr);
6631
- this.animationItem.container.setAttribute('height', elementHeight * this.renderConfig.dpr);
6632
- } else {
6633
- elementWidth = this.canvasContext.canvas.width * this.renderConfig.dpr;
6634
- elementHeight = this.canvasContext.canvas.height * this.renderConfig.dpr;
6635
- }
6636
- var elementRel, animationRel;
6637
- if (this.renderConfig.preserveAspectRatio.indexOf('meet') !== -1 || this.renderConfig.preserveAspectRatio.indexOf('slice') !== -1) {
6638
- var par = this.renderConfig.preserveAspectRatio.split(' ');
6639
- var fillType = par[1] || 'meet';
6640
- var pos = par[0] || 'xMidYMid';
6641
- var xPos = pos.substr(0, 4);
6642
- var yPos = pos.substr(4);
6643
- elementRel = elementWidth / elementHeight;
6644
- animationRel = this.transformCanvas.w / this.transformCanvas.h;
6645
- if (animationRel > elementRel && fillType === 'meet' || animationRel < elementRel && fillType === 'slice') {
6646
- this.transformCanvas.sx = elementWidth / (this.transformCanvas.w / this.renderConfig.dpr);
6647
- this.transformCanvas.sy = elementWidth / (this.transformCanvas.w / this.renderConfig.dpr);
6648
- } else {
6649
- this.transformCanvas.sx = elementHeight / (this.transformCanvas.h / this.renderConfig.dpr);
6650
- this.transformCanvas.sy = elementHeight / (this.transformCanvas.h / this.renderConfig.dpr);
6651
- }
6652
-
6653
- if (xPos === 'xMid' && ((animationRel < elementRel && fillType === 'meet') || (animationRel > elementRel && fillType === 'slice'))) {
6654
- this.transformCanvas.tx = (elementWidth - this.transformCanvas.w * (elementHeight / this.transformCanvas.h)) / 2 * this.renderConfig.dpr;
6655
- } else if (xPos === 'xMax' && ((animationRel < elementRel && fillType === 'meet') || (animationRel > elementRel && fillType === 'slice'))) {
6656
- this.transformCanvas.tx = (elementWidth - this.transformCanvas.w * (elementHeight / this.transformCanvas.h)) * this.renderConfig.dpr;
6657
- } else {
6658
- this.transformCanvas.tx = 0;
6659
- }
6660
- if (yPos === 'YMid' && ((animationRel > elementRel && fillType === 'meet') || (animationRel < elementRel && fillType === 'slice'))) {
6661
- this.transformCanvas.ty = ((elementHeight - this.transformCanvas.h * (elementWidth / this.transformCanvas.w)) / 2) * this.renderConfig.dpr;
6662
- } else if (yPos === 'YMax' && ((animationRel > elementRel && fillType === 'meet') || (animationRel < elementRel && fillType === 'slice'))) {
6663
- this.transformCanvas.ty = ((elementHeight - this.transformCanvas.h * (elementWidth / this.transformCanvas.w))) * this.renderConfig.dpr;
6664
- } else {
6665
- this.transformCanvas.ty = 0;
6666
- }
6667
-
6668
- } else if (this.renderConfig.preserveAspectRatio == 'none') {
6669
- this.transformCanvas.sx = elementWidth / (this.transformCanvas.w / this.renderConfig.dpr);
6670
- this.transformCanvas.sy = elementHeight / (this.transformCanvas.h / this.renderConfig.dpr);
6671
- this.transformCanvas.tx = 0;
6672
- this.transformCanvas.ty = 0;
6673
- } else {
6674
- this.transformCanvas.sx = this.renderConfig.dpr;
6675
- this.transformCanvas.sy = this.renderConfig.dpr;
6676
- this.transformCanvas.tx = 0;
6677
- this.transformCanvas.ty = 0;
6678
- }
6679
- 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];
6680
- /*var i, len = this.elements.length;
6681
- for(i=0;i<len;i+=1){
6682
- if(this.elements[i] && this.elements[i].data.ty === 0){
6683
- this.elements[i].resize(this.globalData.transformCanvas);
6684
- }
6685
- }*/
6686
- this.ctxTransform(this.transformCanvas.props);
6687
- this.canvasContext.beginPath();
6688
- this.canvasContext.rect(0, 0, this.transformCanvas.w, this.transformCanvas.h);
6689
- this.canvasContext.closePath();
6690
- this.canvasContext.clip();
6691
-
6692
- this.renderFrame(this.renderedFrame, true);
6693
- };
6694
-
6695
- CanvasRenderer.prototype.destroy = function () {
6696
- if (this.renderConfig.clearCanvas) {
6697
- this.animationItem.wrapper.innerHTML = '';
6698
- }
6699
- var i, len = this.layers ? this.layers.length : 0;
6700
- for (i = len - 1; i >= 0; i -= 1) {
6701
- if (this.elements[i]) {
6702
- this.elements[i].destroy();
6703
- }
6704
- }
6705
- this.elements.length = 0;
6706
- this.globalData.canvasContext = null;
6707
- this.animationItem.container = null;
6708
- this.destroyed = true;
6709
- };
6710
-
6711
- CanvasRenderer.prototype.renderFrame = function (num, forceRender) {
6712
- if ((this.renderedFrame === num && this.renderConfig.clearCanvas === true && !forceRender) || this.destroyed || num === -1) {
6713
- return;
6714
- }
6715
- this.renderedFrame = num;
6716
- this.globalData.frameNum = num - this.animationItem._isFirstFrame;
6717
- this.globalData.frameId += 1;
6718
- this.globalData._mdf = !this.renderConfig.clearCanvas || forceRender;
6719
- this.globalData.projectInterface.currentFrame = num;
6720
-
6721
- // console.log('--------');
6722
- // console.log('NEW: ',num);
6723
- var i, len = this.layers.length;
6724
- if (!this.completeLayers) {
6725
- this.checkLayers(num);
6726
- }
6727
-
6728
- for (i = 0; i < len; i++) {
6729
- if (this.completeLayers || this.elements[i]) {
6730
- this.elements[i].prepareFrame(num - this.layers[i].st);
6731
- }
6732
- }
6733
- if (this.globalData._mdf) {
6734
- if (this.renderConfig.clearCanvas === true) {
6735
- this.canvasContext.clearRect(0, 0, this.transformCanvas.w, this.transformCanvas.h);
6736
- } else {
6737
- this.save();
6738
- }
6739
- for (i = len - 1; i >= 0; i -= 1) {
6740
- if (this.completeLayers || this.elements[i]) {
6741
- this.elements[i].renderFrame();
6742
- }
6743
- }
6744
- if (this.renderConfig.clearCanvas !== true) {
6745
- this.restore();
6746
- }
6747
- }
6748
- };
6749
-
6750
- CanvasRenderer.prototype.buildItem = function (pos) {
6751
- var elements = this.elements;
6752
- if (elements[pos] || this.layers[pos].ty == 99) {
6753
- return;
6754
- }
6755
- var element = this.createItem(this.layers[pos], this, this.globalData);
6756
- elements[pos] = element;
6757
- element.initExpressions();
6758
- /*if(this.layers[pos].ty === 0){
6759
- element.resize(this.globalData.transformCanvas);
6760
- }*/
6761
- };
6762
-
6763
- CanvasRenderer.prototype.checkPendingElements = function () {
6764
- while (this.pendingElements.length) {
6765
- var element = this.pendingElements.pop();
6766
- element.checkParenting();
6767
- }
6768
- };
6769
-
6770
- CanvasRenderer.prototype.hide = function () {
6771
- this.animationItem.container.style.display = 'none';
6772
- };
6773
-
6774
- CanvasRenderer.prototype.show = function () {
6775
- this.animationItem.container.style.display = 'block';
6776
- };
6777
-
6778
- function HybridRenderer(animationItem, config) {
6779
- this.animationItem = animationItem;
6780
- this.layers = null;
6781
- this.renderedFrame = -1;
6782
- this.renderConfig = {
6783
- className: (config && config.className) || '',
6784
- imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
6785
- hideOnTransparent: (config && config.hideOnTransparent === false) ? false : true,
6786
- filterSize: {
6787
- width: config && config.filterSize && config.filterSize.width || '400%',
6788
- height: config && config.filterSize && config.filterSize.height || '400%',
6789
- x: config && config.filterSize && config.filterSize.x || '-100%',
6790
- y: config && config.filterSize && config.filterSize.y || '-100%',
6791
- }
6792
- };
6793
- this.globalData = {
6794
- _mdf: false,
6795
- frameNum: -1,
6796
- renderConfig: this.renderConfig
6797
- };
6798
- this.pendingElements = [];
6799
- this.elements = [];
6800
- this.threeDElements = [];
6801
- this.destroyed = false;
6802
- this.camera = null;
6803
- this.supports3d = true;
6804
- this.rendererType = 'html';
6805
-
6806
- }
6807
-
6808
- extendPrototype([BaseRenderer], HybridRenderer);
6809
-
6810
- HybridRenderer.prototype.buildItem = SVGRenderer.prototype.buildItem;
6811
-
6812
- HybridRenderer.prototype.checkPendingElements = function () {
6813
- while (this.pendingElements.length) {
6814
- var element = this.pendingElements.pop();
6815
- element.checkParenting();
6816
- }
6817
- };
6818
-
6819
- HybridRenderer.prototype.appendElementInPos = function (element, pos) {
6820
- var newDOMElement = element.getBaseElement();
6821
- if (!newDOMElement) {
6822
- return;
6823
- }
6824
- var layer = this.layers[pos];
6825
- if (!layer.ddd || !this.supports3d) {
6826
- if (this.threeDElements) {
6827
- this.addTo3dContainer(newDOMElement, pos);
6828
- } else {
6829
- var i = 0;
6830
- var nextDOMElement, nextLayer, tmpDOMElement;
6831
- while (i < pos) {
6832
- if (this.elements[i] && this.elements[i] !== true && this.elements[i].getBaseElement) {
6833
- nextLayer = this.elements[i];
6834
- tmpDOMElement = this.layers[i].ddd ? this.getThreeDContainerByPos(i) : nextLayer.getBaseElement();
6835
- nextDOMElement = tmpDOMElement || nextDOMElement;
6836
- }
6837
- i += 1;
6838
- }
6839
- if (nextDOMElement) {
6840
- if (!layer.ddd || !this.supports3d) {
6841
- this.layerElement.insertBefore(newDOMElement, nextDOMElement);
6842
- }
6843
- } else {
6844
- if (!layer.ddd || !this.supports3d) {
6845
- this.layerElement.appendChild(newDOMElement);
6846
- }
6847
- }
6848
- }
6849
-
6850
- } else {
6851
- this.addTo3dContainer(newDOMElement, pos);
6852
- }
6853
- };
6854
-
6855
- HybridRenderer.prototype.createShape = function (data) {
6856
- if (!this.supports3d) {
6857
- return new SVGShapeElement(data, this.globalData, this);
6858
- }
6859
- return new HShapeElement(data, this.globalData, this);
6860
- };
6861
-
6862
- HybridRenderer.prototype.createText = function (data) {
6863
- if (!this.supports3d) {
6864
- return new SVGTextElement(data, this.globalData, this);
6865
- }
6866
- return new HTextElement(data, this.globalData, this);
6867
- };
6868
-
6869
- HybridRenderer.prototype.createCamera = function (data) {
6870
- this.camera = new HCameraElement(data, this.globalData, this);
6871
- return this.camera;
6872
- };
6873
-
6874
- HybridRenderer.prototype.createImage = function (data) {
6875
- if (!this.supports3d) {
6876
- return new IImageElement(data, this.globalData, this);
6877
- }
6878
- return new HImageElement(data, this.globalData, this);
6879
- };
6880
-
6881
- HybridRenderer.prototype.createComp = function (data) {
6882
- if (!this.supports3d) {
6883
- return new SVGCompElement(data, this.globalData, this);
6884
- }
6885
- return new HCompElement(data, this.globalData, this);
6886
-
6887
- };
6888
-
6889
- HybridRenderer.prototype.createSolid = function (data) {
6890
- if (!this.supports3d) {
6891
- return new ISolidElement(data, this.globalData, this);
6892
- }
6893
- return new HSolidElement(data, this.globalData, this);
6894
- };
6895
-
6896
- HybridRenderer.prototype.createNull = SVGRenderer.prototype.createNull;
6897
-
6898
- HybridRenderer.prototype.getThreeDContainerByPos = function (pos) {
6899
- var i = 0,
6900
- len = this.threeDElements.length;
6901
- while (i < len) {
6902
- if (this.threeDElements[i].startPos <= pos && this.threeDElements[i].endPos >= pos) {
6903
- return this.threeDElements[i].perspectiveElem;
6904
- }
6905
- i += 1;
6906
- }
6907
- };
6908
-
6909
- HybridRenderer.prototype.createThreeDContainer = function (pos, type) {
6910
- var perspectiveElem = createTag('div');
6911
- styleDiv(perspectiveElem);
6912
- var container = createTag('div');
6913
- styleDiv(container);
6914
- if (type === '3d') {
6915
- perspectiveElem.style.width = this.globalData.compSize.w + 'px';
6916
- perspectiveElem.style.height = this.globalData.compSize.h + 'px';
6917
- perspectiveElem.style.transformOrigin = perspectiveElem.style.mozTransformOrigin = perspectiveElem.style.webkitTransformOrigin = "50% 50%";
6918
- container.style.transform = container.style.webkitTransform = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)';
6919
- }
6920
-
6921
- perspectiveElem.appendChild(container);
6922
- //this.resizerElem.appendChild(perspectiveElem);
6923
- var threeDContainerData = {
6924
- container: container,
6925
- perspectiveElem: perspectiveElem,
6926
- startPos: pos,
6927
- endPos: pos,
6928
- type: type
6929
- };
6930
- this.threeDElements.push(threeDContainerData);
6931
- return threeDContainerData;
6932
- };
6933
-
6934
- HybridRenderer.prototype.build3dContainers = function () {
6935
- var i, len = this.layers.length;
6936
- var lastThreeDContainerData;
6937
- var currentContainer = '';
6938
- for (i = 0; i < len; i += 1) {
6939
- if (this.layers[i].ddd && this.layers[i].ty !== 3) {
6940
- if (currentContainer !== '3d') {
6941
- currentContainer = '3d';
6942
- lastThreeDContainerData = this.createThreeDContainer(i, '3d');
6943
- }
6944
- lastThreeDContainerData.endPos = Math.max(lastThreeDContainerData.endPos, i);
6945
- } else {
6946
- if (currentContainer !== '2d') {
6947
- currentContainer = '2d';
6948
- lastThreeDContainerData = this.createThreeDContainer(i, '2d');
6949
- }
6950
- lastThreeDContainerData.endPos = Math.max(lastThreeDContainerData.endPos, i);
6951
- }
6952
- }
6953
- len = this.threeDElements.length;
6954
- for (i = len - 1; i >= 0; i--) {
6955
- this.resizerElem.appendChild(this.threeDElements[i].perspectiveElem);
6956
- }
6957
- };
6958
-
6959
- HybridRenderer.prototype.addTo3dContainer = function (elem, pos) {
6960
- var i = 0,
6961
- len = this.threeDElements.length;
6962
- while (i < len) {
6963
- if (pos <= this.threeDElements[i].endPos) {
6964
- var j = this.threeDElements[i].startPos;
6965
- var nextElement;
6966
- while (j < pos) {
6967
- if (this.elements[j] && this.elements[j].getBaseElement) {
6968
- nextElement = this.elements[j].getBaseElement();
6969
- }
6970
- j += 1;
6971
- }
6972
- if (nextElement) {
6973
- this.threeDElements[i].container.insertBefore(elem, nextElement);
6974
- } else {
6975
- this.threeDElements[i].container.appendChild(elem);
6976
- }
6977
- break;
6978
- }
6979
- i += 1;
6980
- }
6981
- };
6982
-
6983
- HybridRenderer.prototype.configAnimation = function (animData) {
6984
- var resizerElem = createTag('div');
6985
- var wrapper = this.animationItem.wrapper;
6986
- resizerElem.style.width = animData.w + 'px';
6987
- resizerElem.style.height = animData.h + 'px';
6988
- this.resizerElem = resizerElem;
6989
- styleDiv(resizerElem);
6990
- resizerElem.style.transformStyle = resizerElem.style.webkitTransformStyle = resizerElem.style.mozTransformStyle = "flat";
6991
- if (this.renderConfig.className) {
6992
- resizerElem.setAttribute('class', this.renderConfig.className);
6993
- }
6994
- wrapper.appendChild(resizerElem);
6995
-
6996
- resizerElem.style.overflow = 'hidden';
6997
- var svg = createNS('svg');
6998
- svg.setAttribute('width', '1');
6999
- svg.setAttribute('height', '1');
7000
- styleDiv(svg);
7001
- this.resizerElem.appendChild(svg);
7002
- var defs = createNS('defs');
7003
- svg.appendChild(defs);
7004
- this.data = animData;
7005
- //Mask animation
7006
- this.setupGlobalData(animData, svg);
7007
- this.globalData.defs = defs;
7008
- this.layers = animData.layers;
7009
- this.layerElement = this.resizerElem;
7010
- this.build3dContainers();
7011
- this.updateContainerSize();
7012
- };
7013
-
7014
- HybridRenderer.prototype.destroy = function () {
7015
- this.animationItem.wrapper.innerHTML = '';
7016
- this.animationItem.container = null;
7017
- this.globalData.defs = null;
7018
- var i, len = this.layers ? this.layers.length : 0;
7019
- for (i = 0; i < len; i++) {
7020
- this.elements[i].destroy();
7021
- }
7022
- this.elements.length = 0;
7023
- this.destroyed = true;
7024
- this.animationItem = null;
7025
- };
7026
-
7027
- HybridRenderer.prototype.updateContainerSize = function () {
7028
- var elementWidth = this.animationItem.wrapper.offsetWidth;
7029
- var elementHeight = this.animationItem.wrapper.offsetHeight;
7030
- var elementRel = elementWidth / elementHeight;
7031
- var animationRel = this.globalData.compSize.w / this.globalData.compSize.h;
7032
- var sx, sy, tx, ty;
7033
- if (animationRel > elementRel) {
7034
- sx = elementWidth / (this.globalData.compSize.w);
7035
- sy = elementWidth / (this.globalData.compSize.w);
7036
- tx = 0;
7037
- ty = ((elementHeight - this.globalData.compSize.h * (elementWidth / this.globalData.compSize.w)) / 2);
7038
- } else {
7039
- sx = elementHeight / (this.globalData.compSize.h);
7040
- sy = elementHeight / (this.globalData.compSize.h);
7041
- tx = (elementWidth - this.globalData.compSize.w * (elementHeight / this.globalData.compSize.h)) / 2;
7042
- ty = 0;
7043
- }
7044
- this.resizerElem.style.transform = this.resizerElem.style.webkitTransform = 'matrix3d(' + sx + ',0,0,0,0,' + sy + ',0,0,0,0,1,0,' + tx + ',' + ty + ',0,1)';
7045
- };
7046
-
7047
- HybridRenderer.prototype.renderFrame = SVGRenderer.prototype.renderFrame;
7048
-
7049
- HybridRenderer.prototype.hide = function () {
7050
- this.resizerElem.style.display = 'none';
7051
- };
7052
-
7053
- HybridRenderer.prototype.show = function () {
7054
- this.resizerElem.style.display = 'block';
7055
- };
7056
-
7057
- HybridRenderer.prototype.initItems = function () {
7058
- this.buildAllItems();
7059
- if (this.camera) {
7060
- this.camera.setup();
7061
- } else {
7062
- var cWidth = this.globalData.compSize.w;
7063
- var cHeight = this.globalData.compSize.h;
7064
- var i, len = this.threeDElements.length;
7065
- for (i = 0; i < len; i += 1) {
7066
- this.threeDElements[i].perspectiveElem.style.perspective = this.threeDElements[i].perspectiveElem.style.webkitPerspective = Math.sqrt(Math.pow(cWidth, 2) + Math.pow(cHeight, 2)) + 'px';
7067
- }
7068
- }
7069
- };
7070
-
7071
- HybridRenderer.prototype.searchExtraCompositions = function (assets) {
7072
- var i, len = assets.length;
7073
- var floatingContainer = createTag('div');
7074
- for (i = 0; i < len; i += 1) {
7075
- if (assets[i].xt) {
7076
- var comp = this.createComp(assets[i], floatingContainer, this.globalData.comp, null);
7077
- comp.initExpressions();
7078
- this.globalData.projectInterface.registerComposition(comp);
7079
- }
7080
- }
7081
- };
7082
-
7083
- function MaskElement(data, element, globalData) {
7084
- this.data = data;
7085
- this.element = element;
7086
- this.globalData = globalData;
7087
- this.storedData = [];
7088
- this.masksProperties = this.data.masksProperties || [];
7089
- this.maskElement = null;
7090
- var defs = this.globalData.defs;
7091
- var i, len = this.masksProperties ? this.masksProperties.length : 0;
7092
- this.viewData = createSizedArray(len);
7093
- this.solidPath = '';
7094
-
7095
-
7096
- var path, properties = this.masksProperties;
7097
- var count = 0;
7098
- var currentMasks = [];
7099
- var j, jLen;
7100
- var layerId = createElementID();
7101
- var rect, expansor, feMorph, x;
7102
- var maskType = 'clipPath',
7103
- maskRef = 'clip-path';
7104
- for (i = 0; i < len; i++) {
7105
- if ((properties[i].mode !== 'a' && properties[i].mode !== 'n') || properties[i].inv || properties[i].o.k !== 100 || properties[i].o.x) {
7106
- maskType = 'mask';
7107
- maskRef = 'mask';
7108
- }
7109
-
7110
- if ((properties[i].mode == 's' || properties[i].mode == 'i') && count === 0) {
7111
- rect = createNS('rect');
7112
- rect.setAttribute('fill', '#ffffff');
7113
- rect.setAttribute('width', this.element.comp.data.w || 0);
7114
- rect.setAttribute('height', this.element.comp.data.h || 0);
7115
- currentMasks.push(rect);
7116
- } else {
7117
- rect = null;
7118
- }
7119
-
7120
- path = createNS('path');
7121
- if (properties[i].mode == 'n') {
7122
- // TODO move this to a factory or to a constructor
7123
- this.viewData[i] = {
7124
- op: PropertyFactory.getProp(this.element, properties[i].o, 0, 0.01, this.element),
7125
- prop: ShapePropertyFactory.getShapeProp(this.element, properties[i], 3),
7126
- elem: path,
7127
- lastPath: ''
7128
- };
7129
- defs.appendChild(path);
7130
- continue;
7131
- }
7132
- count += 1;
7133
-
7134
- path.setAttribute('fill', properties[i].mode === 's' ? '#000000' : '#ffffff');
7135
- path.setAttribute('clip-rule', 'nonzero');
7136
- var filterID;
7137
-
7138
- if (properties[i].x.k !== 0) {
7139
- maskType = 'mask';
7140
- maskRef = 'mask';
7141
- x = PropertyFactory.getProp(this.element, properties[i].x, 0, null, this.element);
7142
- filterID = createElementID();
7143
- expansor = createNS('filter');
7144
- expansor.setAttribute('id', filterID);
7145
- feMorph = createNS('feMorphology');
7146
- feMorph.setAttribute('operator', 'erode');
7147
- feMorph.setAttribute('in', 'SourceGraphic');
7148
- feMorph.setAttribute('radius', '0');
7149
- expansor.appendChild(feMorph);
7150
- defs.appendChild(expansor);
7151
- path.setAttribute('stroke', properties[i].mode === 's' ? '#000000' : '#ffffff');
7152
- } else {
7153
- feMorph = null;
7154
- x = null;
7155
- }
7156
-
7157
- // TODO move this to a factory or to a constructor
7158
- this.storedData[i] = {
7159
- elem: path,
7160
- x: x,
7161
- expan: feMorph,
7162
- lastPath: '',
7163
- lastOperator: '',
7164
- filterId: filterID,
7165
- lastRadius: 0
7166
- };
7167
- if (properties[i].mode == 'i') {
7168
- jLen = currentMasks.length;
7169
- var g = createNS('g');
7170
- for (j = 0; j < jLen; j += 1) {
7171
- g.appendChild(currentMasks[j]);
7172
- }
7173
- var mask = createNS('mask');
7174
- mask.setAttribute('mask-type', 'alpha');
7175
- mask.setAttribute('id', layerId + '_' + count);
7176
- mask.appendChild(path);
7177
- defs.appendChild(mask);
7178
- g.setAttribute('mask', 'url(' + locationHref + '#' + layerId + '_' + count + ')');
7179
-
7180
- currentMasks.length = 0;
7181
- currentMasks.push(g);
7182
- } else {
7183
- currentMasks.push(path);
7184
- }
7185
- if (properties[i].inv && !this.solidPath) {
7186
- this.solidPath = this.createLayerSolidPath();
7187
- }
7188
- // TODO move this to a factory or to a constructor
7189
- this.viewData[i] = {
7190
- elem: path,
7191
- lastPath: '',
7192
- op: PropertyFactory.getProp(this.element, properties[i].o, 0, 0.01, this.element),
7193
- prop: ShapePropertyFactory.getShapeProp(this.element, properties[i], 3),
7194
- invRect: rect
7195
- };
7196
- if (!this.viewData[i].prop.k) {
7197
- this.drawPath(properties[i], this.viewData[i].prop.v, this.viewData[i]);
7198
- }
7199
- }
7200
-
7201
- this.maskElement = createNS(maskType);
7202
-
7203
- len = currentMasks.length;
7204
- for (i = 0; i < len; i += 1) {
7205
- this.maskElement.appendChild(currentMasks[i]);
7206
- }
7207
-
7208
- if (count > 0) {
7209
- this.maskElement.setAttribute('id', layerId);
7210
- this.element.maskedElement.setAttribute(maskRef, "url(" + locationHref + "#" + layerId + ")");
7211
- defs.appendChild(this.maskElement);
7212
- }
7213
- if (this.viewData.length) {
7214
- this.element.addRenderableComponent(this);
7215
- }
7216
-
7217
- }
7218
-
7219
- MaskElement.prototype.getMaskProperty = function (pos) {
7220
- return this.viewData[pos].prop;
7221
- };
7222
-
7223
- MaskElement.prototype.renderFrame = function (isFirstFrame) {
7224
- var finalMat = this.element.finalTransform.mat;
7225
- var i, len = this.masksProperties.length;
7226
- for (i = 0; i < len; i++) {
7227
- if (this.viewData[i].prop._mdf || isFirstFrame) {
7228
- this.drawPath(this.masksProperties[i], this.viewData[i].prop.v, this.viewData[i]);
7229
- }
7230
- if (this.viewData[i].op._mdf || isFirstFrame) {
7231
- this.viewData[i].elem.setAttribute('fill-opacity', this.viewData[i].op.v);
7232
- }
7233
- if (this.masksProperties[i].mode !== 'n') {
7234
- if (this.viewData[i].invRect && (this.element.finalTransform.mProp._mdf || isFirstFrame)) {
7235
- this.viewData[i].invRect.setAttribute('transform', finalMat.getInverseMatrix().to2dCSS())
7236
- }
7237
- if (this.storedData[i].x && (this.storedData[i].x._mdf || isFirstFrame)) {
7238
- var feMorph = this.storedData[i].expan;
7239
- if (this.storedData[i].x.v < 0) {
7240
- if (this.storedData[i].lastOperator !== 'erode') {
7241
- this.storedData[i].lastOperator = 'erode';
7242
- this.storedData[i].elem.setAttribute('filter', 'url(' + locationHref + '#' + this.storedData[i].filterId + ')');
7243
- }
7244
- feMorph.setAttribute('radius', -this.storedData[i].x.v);
7245
- } else {
7246
- if (this.storedData[i].lastOperator !== 'dilate') {
7247
- this.storedData[i].lastOperator = 'dilate';
7248
- this.storedData[i].elem.setAttribute('filter', null);
7249
- }
7250
- this.storedData[i].elem.setAttribute('stroke-width', this.storedData[i].x.v * 2);
7251
-
7252
- }
7253
- }
7254
- }
7255
- }
7256
- };
7257
-
7258
- MaskElement.prototype.getMaskelement = function () {
7259
- return this.maskElement;
7260
- };
7261
-
7262
- MaskElement.prototype.createLayerSolidPath = function () {
7263
- var path = 'M0,0 ';
7264
- path += ' h' + this.globalData.compSize.w;
7265
- path += ' v' + this.globalData.compSize.h;
7266
- path += ' h-' + this.globalData.compSize.w;
7267
- path += ' v-' + this.globalData.compSize.h + ' ';
7268
- return path;
7269
- };
7270
-
7271
- MaskElement.prototype.drawPath = function (pathData, pathNodes, viewData) {
7272
- var pathString = " M" + pathNodes.v[0][0] + ',' + pathNodes.v[0][1];
7273
- var i, len;
7274
- len = pathNodes._length;
7275
- for (i = 1; i < len; i += 1) {
7276
- //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];
7277
- 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];
7278
- }
7279
- //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];
7280
- if (pathNodes.c && len > 1) {
7281
- 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];
7282
- }
7283
- //pathNodes.__renderedString = pathString;
7284
-
7285
- if (viewData.lastPath !== pathString) {
7286
- var pathShapeValue = '';
7287
- if (viewData.elem) {
7288
- if (pathNodes.c) {
7289
- pathShapeValue = pathData.inv ? this.solidPath + pathString : pathString;
7290
- }
7291
- viewData.elem.setAttribute('d', pathShapeValue);
7292
- }
7293
- viewData.lastPath = pathString;
7294
- }
7295
- };
7296
-
7297
- MaskElement.prototype.destroy = function () {
7298
- this.element = null;
7299
- this.globalData = null;
7300
- this.maskElement = null;
7301
- this.data = null;
7302
- this.masksProperties = null;
7303
- };
7304
-
7305
- /**
7306
- * @file
7307
- * Handles AE's layer parenting property.
7308
- *
7309
- */
7310
-
7311
- function HierarchyElement() { }
7312
-
7313
- HierarchyElement.prototype = {
7314
- /**
7315
- * @function
7316
- * Initializes hierarchy properties
7317
- *
7318
- */
7319
- initHierarchy: function () {
7320
- //element's parent list
7321
- this.hierarchy = [];
7322
- //if element is parent of another layer _isParent will be true
7323
- this._isParent = false;
7324
- this.checkParenting();
7325
- },
7326
- /**
7327
- * @function
7328
- * Sets layer's hierarchy.
7329
- * @param {array} hierarch
7330
- * layer's parent list
7331
- *
7332
- */
7333
- setHierarchy: function (hierarchy) {
7334
- this.hierarchy = hierarchy;
7335
- },
7336
- /**
7337
- * @function
7338
- * Sets layer as parent.
7339
- *
7340
- */
7341
- setAsParent: function () {
7342
- this._isParent = true;
7343
- },
7344
- /**
7345
- * @function
7346
- * Searches layer's parenting chain
7347
- *
7348
- */
7349
- checkParenting: function () {
7350
- if (this.data.parent !== undefined) {
7351
- this.comp.buildElementParenting(this, this.data.parent, []);
7352
- }
7353
- }
7354
- };
7355
- /**
7356
- * @file
7357
- * Handles element's layer frame update.
7358
- * Checks layer in point and out point
7359
- *
7360
- */
7361
-
7362
- function FrameElement() { }
7363
-
7364
- FrameElement.prototype = {
7365
- /**
7366
- * @function
7367
- * Initializes frame related properties.
7368
- *
7369
- */
7370
- initFrame: function () {
7371
- //set to true when inpoint is rendered
7372
- this._isFirstFrame = false;
7373
- //list of animated properties
7374
- this.dynamicProperties = [];
7375
- // If layer has been modified in current tick this will be true
7376
- this._mdf = false;
7377
- },
7378
- /**
7379
- * @function
7380
- * Calculates all dynamic values
7381
- *
7382
- * @param {number} num
7383
- * current frame number in Layer's time
7384
- * @param {boolean} isVisible
7385
- * if layers is currently in range
7386
- *
7387
- */
7388
- prepareProperties: function (num, isVisible) {
7389
- var i, len = this.dynamicProperties.length;
7390
- for (i = 0; i < len; i += 1) {
7391
- if (isVisible || (this._isParent && this.dynamicProperties[i].propType === 'transform')) {
7392
- this.dynamicProperties[i].getValue();
7393
- if (this.dynamicProperties[i]._mdf) {
7394
- this.globalData._mdf = true;
7395
- this._mdf = true;
7396
- }
7397
- }
7398
- }
7399
- },
7400
- addDynamicProperty: function (prop) {
7401
- if (this.dynamicProperties.indexOf(prop) === -1) {
7402
- this.dynamicProperties.push(prop);
7403
- }
7404
- }
7405
- };
7406
-
7407
- function TransformElement() { }
7408
-
7409
- TransformElement.prototype = {
7410
- initTransform: function () {
7411
- this.finalTransform = {
7412
- mProp: this.data.ks ? TransformPropertyFactory.getTransformProperty(this, this.data.ks, this) : {
7413
- o: 0
7414
- },
7415
- _matMdf: false,
7416
- _opMdf: false,
7417
- mat: new Matrix()
7418
- };
7419
- if (this.data.ao) {
7420
- this.finalTransform.mProp.autoOriented = true;
7421
- }
7422
-
7423
- //TODO: check TYPE 11: Guided elements
7424
- if (this.data.ty !== 11) {
7425
- //this.createElements();
7426
- }
7427
- },
7428
- renderTransform: function () {
7429
-
7430
- this.finalTransform._opMdf = this.finalTransform.mProp.o._mdf || this._isFirstFrame;
7431
- this.finalTransform._matMdf = this.finalTransform.mProp._mdf || this._isFirstFrame;
7432
-
7433
- if (this.hierarchy) {
7434
- var mat;
7435
- var finalMat = this.finalTransform.mat;
7436
- var i = 0,
7437
- len = this.hierarchy.length;
7438
- //Checking if any of the transformation matrices in the hierarchy chain has changed.
7439
- if (!this.finalTransform._matMdf) {
7440
- while (i < len) {
7441
- if (this.hierarchy[i].finalTransform.mProp._mdf) {
7442
- this.finalTransform._matMdf = true;
7443
- break;
7444
- }
7445
- i += 1;
7446
- }
7447
- }
7448
-
7449
- if (this.finalTransform._matMdf) {
7450
- mat = this.finalTransform.mProp.v.props;
7451
- finalMat.cloneFromProps(mat);
7452
- for (i = 0; i < len; i += 1) {
7453
- mat = this.hierarchy[i].finalTransform.mProp.v.props;
7454
- finalMat.transform(mat[0], mat[1], mat[2], mat[3], mat[4], mat[5], mat[6], mat[7], mat[8], mat[9], mat[10], mat[11], mat[12], mat[13], mat[14], mat[15]);
7455
- }
7456
- }
7457
- }
7458
- },
7459
- globalToLocal: function (pt) {
7460
- var transforms = [];
7461
- transforms.push(this.finalTransform);
7462
- var flag = true;
7463
- var comp = this.comp;
7464
- while (flag) {
7465
- if (comp.finalTransform) {
7466
- if (comp.data.hasMask) {
7467
- transforms.splice(0, 0, comp.finalTransform);
7468
- }
7469
- comp = comp.comp;
7470
- } else {
7471
- flag = false;
7472
- }
7473
- }
7474
- var i, len = transforms.length,
7475
- ptNew;
7476
- for (i = 0; i < len; i += 1) {
7477
- ptNew = transforms[i].mat.applyToPointArray(0, 0, 0);
7478
- //ptNew = transforms[i].mat.applyToPointArray(pt[0],pt[1],pt[2]);
7479
- pt = [pt[0] - ptNew[0], pt[1] - ptNew[1], 0];
7480
- }
7481
- return pt;
7482
- },
7483
- mHelper: new Matrix()
7484
- };
7485
-
7486
- function RenderableElement() {
7487
-
7488
- }
7489
-
7490
- RenderableElement.prototype = {
7491
- initRenderable: function () {
7492
- //layer's visibility related to inpoint and outpoint. Rename isVisible to isInRange
7493
- this.isInRange = false;
7494
- //layer's display state
7495
- this.hidden = false;
7496
- // If layer's transparency equals 0, it can be hidden
7497
- this.isTransparent = false;
7498
- //list of animated components
7499
- this.renderableComponents = [];
7500
- },
7501
- addRenderableComponent: function (component) {
7502
- if (this.renderableComponents.indexOf(component) === -1) {
7503
- this.renderableComponents.push(component);
7504
- }
7505
- },
7506
- removeRenderableComponent: function (component) {
7507
- if (this.renderableComponents.indexOf(component) !== -1) {
7508
- this.renderableComponents.splice(this.renderableComponents.indexOf(component), 1);
7509
- }
7510
- },
7511
- prepareRenderableFrame: function (num) {
7512
- this.checkLayerLimits(num);
7513
- },
7514
- checkTransparency: function () {
7515
- if (this.finalTransform.mProp.o.v <= 0) {
7516
- if (!this.isTransparent && this.globalData.renderConfig.hideOnTransparent) {
7517
- this.isTransparent = true;
7518
- this.hide();
7519
- }
7520
- } else if (this.isTransparent) {
7521
- this.isTransparent = false;
7522
- this.show();
7523
- }
7524
- },
7525
- /**
7526
- * @function
7527
- * Initializes frame related properties.
7528
- *
7529
- * @param {number} num
7530
- * current frame number in Layer's time
7531
- *
7532
- */
7533
- checkLayerLimits: function (num) {
7534
- if (this.data.ip - this.data.st <= num && this.data.op - this.data.st > num) {
7535
- if (this.isInRange !== true) {
7536
- this.globalData._mdf = true;
7537
- this._mdf = true;
7538
- this.isInRange = true;
7539
- this.show();
7540
- }
7541
- } else {
7542
- if (this.isInRange !== false) {
7543
- this.globalData._mdf = true;
7544
- this.isInRange = false;
7545
- this.hide();
7546
- }
7547
- }
7548
- },
7549
- renderRenderable: function () {
7550
- var i, len = this.renderableComponents.length;
7551
- for (i = 0; i < len; i += 1) {
7552
- this.renderableComponents[i].renderFrame(this._isFirstFrame);
7553
- }
7554
- /*this.maskManager.renderFrame(this.finalTransform.mat);
7555
- this.renderableEffectsManager.renderFrame(this._isFirstFrame);*/
7556
- },
7557
- sourceRectAtTime: function () {
7558
- return {
7559
- top: 0,
7560
- left: 0,
7561
- width: 100,
7562
- height: 100
7563
- };
7564
- },
7565
- getLayerSize: function () {
7566
- if (this.data.ty === 5) {
7567
- return {
7568
- w: this.data.textData.width,
7569
- h: this.data.textData.height
7570
- };
7571
- } else {
7572
- return {
7573
- w: this.data.width,
7574
- h: this.data.height
7575
- };
7576
- }
7577
- }
7578
- };
7579
-
7580
- function RenderableDOMElement() { }
7581
-
7582
- (function () {
7583
- var _prototype = {
7584
- initElement: function (data, globalData, comp) {
7585
- this.initFrame();
7586
- this.initBaseData(data, globalData, comp);
7587
- this.initTransform(data, globalData, comp);
7588
- this.initHierarchy();
7589
- this.initRenderable();
7590
- this.initRendererElement();
7591
- this.createContainerElements();
7592
- this.createRenderableComponents();
7593
- this.createContent();
7594
- this.hide();
7595
- },
7596
- hide: function () {
7597
- if (!this.hidden && (!this.isInRange || this.isTransparent)) {
7598
- var elem = this.baseElement || this.layerElement;
7599
- elem.style.display = 'none';
7600
- this.hidden = true;
7601
- }
7602
- },
7603
- show: function () {
7604
- if (this.isInRange && !this.isTransparent) {
7605
- if (!this.data.hd) {
7606
- var elem = this.baseElement || this.layerElement;
7607
- elem.style.display = 'block';
7608
- }
7609
- this.hidden = false;
7610
- this._isFirstFrame = true;
7611
- }
7612
- },
7613
- renderFrame: function () {
7614
- //If it is exported as hidden (data.hd === true) no need to render
7615
- //If it is not visible no need to render
7616
- if (this.data.hd || this.hidden) {
7617
- return;
7618
- }
7619
- this.renderTransform();
7620
- this.renderRenderable();
7621
- this.renderElement();
7622
- this.renderInnerContent();
7623
- if (this._isFirstFrame) {
7624
- this._isFirstFrame = false;
7625
- }
7626
- },
7627
- renderInnerContent: function () { },
7628
- prepareFrame: function (num) {
7629
- this._mdf = false;
7630
- this.prepareRenderableFrame(num);
7631
- this.prepareProperties(num, this.isInRange);
7632
- this.checkTransparency();
7633
- },
7634
- destroy: function () {
7635
- this.innerElem = null;
7636
- this.destroyBaseElement();
7637
- }
7638
- };
7639
- extendPrototype([RenderableElement, createProxyFunction(_prototype)], RenderableDOMElement);
7640
- }());
7641
-
7642
- function ProcessedElement(element, position) {
7643
- this.elem = element;
7644
- this.pos = position;
7645
- }
7646
-
7647
- function SVGStyleData(data, level) {
7648
- this.data = data;
7649
- this.type = data.ty;
7650
- this.d = '';
7651
- this.lvl = level;
7652
- this._mdf = false;
7653
- this.closed = data.hd === true;
7654
- this.pElem = createNS('path');
7655
- this.msElem = null;
7656
- }
7657
-
7658
- SVGStyleData.prototype.reset = function () {
7659
- this.d = '';
7660
- this._mdf = false;
7661
- };
7662
-
7663
- function SVGShapeData(transformers, level, shape) {
7664
- this.caches = [];
7665
- this.styles = [];
7666
- this.transformers = transformers;
7667
- this.lStr = '';
7668
- this.sh = shape;
7669
- this.lvl = level;
7670
- //TODO find if there are some cases where _isAnimated can be false.
7671
- // For now, since shapes add up with other shapes. They have to be calculated every time.
7672
- // One way of finding out is checking if all styles associated to this shape depend only of this shape
7673
- this._isAnimated = !!shape.k;
7674
- // TODO: commenting this for now since all shapes are animated
7675
- var i = 0,
7676
- len = transformers.length;
7677
- while (i < len) {
7678
- if (transformers[i].mProps.dynamicProperties.length) {
7679
- this._isAnimated = true;
7680
- break;
7681
- }
7682
- i += 1;
7683
- }
7684
- }
7685
-
7686
- SVGShapeData.prototype.setAsAnimated = function () {
7687
- this._isAnimated = true;
7688
- }
7689
-
7690
- function SVGTransformData(mProps, op, container) {
7691
- this.transform = {
7692
- mProps: mProps,
7693
- op: op,
7694
- container: container
7695
- };
7696
- this.elements = [];
7697
- this._isAnimated = this.transform.mProps.dynamicProperties.length || this.transform.op.effectsSequence.length;
7698
- }
7699
-
7700
- function SVGStrokeStyleData(elem, data, styleOb) {
7701
- this.initDynamicPropertyContainer(elem);
7702
- this.getValue = this.iterateDynamicProperties;
7703
- this.o = PropertyFactory.getProp(elem, data.o, 0, 0.01, this);
7704
- this.w = PropertyFactory.getProp(elem, data.w, 0, null, this);
7705
- this.d = new DashProperty(elem, data.d || {}, 'svg', this);
7706
- this.c = PropertyFactory.getProp(elem, data.c, 1, 255, this);
7707
- this.style = styleOb;
7708
- this._isAnimated = !!this._isAnimated;
7709
- }
7710
-
7711
- extendPrototype([DynamicPropertyContainer], SVGStrokeStyleData);
7712
-
7713
- function SVGFillStyleData(elem, data, styleOb) {
7714
- this.initDynamicPropertyContainer(elem);
7715
- this.getValue = this.iterateDynamicProperties;
7716
- this.o = PropertyFactory.getProp(elem, data.o, 0, 0.01, this);
7717
- this.c = PropertyFactory.getProp(elem, data.c, 1, 255, this);
7718
- this.style = styleOb;
7719
- }
7720
-
7721
- extendPrototype([DynamicPropertyContainer], SVGFillStyleData);
7722
-
7723
- function SVGGradientFillStyleData(elem, data, styleOb) {
7724
- this.initDynamicPropertyContainer(elem);
7725
- this.getValue = this.iterateDynamicProperties;
7726
- this.initGradientData(elem, data, styleOb);
7727
- }
7728
-
7729
- SVGGradientFillStyleData.prototype.initGradientData = function (elem, data, styleOb) {
7730
- this.o = PropertyFactory.getProp(elem, data.o, 0, 0.01, this);
7731
- this.s = PropertyFactory.getProp(elem, data.s, 1, null, this);
7732
- this.e = PropertyFactory.getProp(elem, data.e, 1, null, this);
7733
- this.h = PropertyFactory.getProp(elem, data.h || {
7734
- k: 0
7735
- }, 0, 0.01, this);
7736
- this.a = PropertyFactory.getProp(elem, data.a || {
7737
- k: 0
7738
- }, 0, degToRads, this);
7739
- this.g = new GradientProperty(elem, data.g, this);
7740
- this.style = styleOb;
7741
- this.stops = [];
7742
- this.setGradientData(styleOb.pElem, data);
7743
- this.setGradientOpacity(data, styleOb);
7744
- this._isAnimated = !!this._isAnimated;
7745
-
7746
- };
7747
-
7748
- SVGGradientFillStyleData.prototype.setGradientData = function (pathElement, data) {
7749
-
7750
- var gradientId = createElementID();
7751
- var gfill = createNS(data.t === 1 ? 'linearGradient' : 'radialGradient');
7752
- gfill.setAttribute('id', gradientId);
7753
- gfill.setAttribute('spreadMethod', 'pad');
7754
- gfill.setAttribute('gradientUnits', 'userSpaceOnUse');
7755
- var stops = [];
7756
- var stop, j, jLen;
7757
- jLen = data.g.p * 4;
7758
- for (j = 0; j < jLen; j += 4) {
7759
- stop = createNS('stop');
7760
- gfill.appendChild(stop);
7761
- stops.push(stop);
7762
- }
7763
- pathElement.setAttribute(data.ty === 'gf' ? 'fill' : 'stroke', 'url(' + locationHref + '#' + gradientId + ')');
7764
-
7765
- this.gf = gfill;
7766
- this.cst = stops;
7767
- };
7768
-
7769
- SVGGradientFillStyleData.prototype.setGradientOpacity = function (data, styleOb) {
7770
- if (this.g._hasOpacity && !this.g._collapsable) {
7771
- var stop, j, jLen;
7772
- var mask = createNS("mask");
7773
- var maskElement = createNS('path');
7774
- mask.appendChild(maskElement);
7775
- var opacityId = createElementID();
7776
- var maskId = createElementID();
7777
- mask.setAttribute('id', maskId);
7778
- var opFill = createNS(data.t === 1 ? 'linearGradient' : 'radialGradient');
7779
- opFill.setAttribute('id', opacityId);
7780
- opFill.setAttribute('spreadMethod', 'pad');
7781
- opFill.setAttribute('gradientUnits', 'userSpaceOnUse');
7782
- jLen = data.g.k.k[0].s ? data.g.k.k[0].s.length : data.g.k.k.length;
7783
- var stops = this.stops;
7784
- for (j = data.g.p * 4; j < jLen; j += 2) {
7785
- stop = createNS('stop');
7786
- stop.setAttribute('stop-color', 'rgb(255,255,255)');
7787
- opFill.appendChild(stop);
7788
- stops.push(stop);
7789
- }
7790
- maskElement.setAttribute(data.ty === 'gf' ? 'fill' : 'stroke', 'url(' + locationHref + '#' + opacityId + ')');
7791
- this.of = opFill;
7792
- this.ms = mask;
7793
- this.ost = stops;
7794
- this.maskId = maskId;
7795
- styleOb.msElem = maskElement;
7796
- }
7797
- };
7798
-
7799
- extendPrototype([DynamicPropertyContainer], SVGGradientFillStyleData);
7800
-
7801
- function SVGGradientStrokeStyleData(elem, data, styleOb) {
7802
- this.initDynamicPropertyContainer(elem);
7803
- this.getValue = this.iterateDynamicProperties;
7804
- this.w = PropertyFactory.getProp(elem, data.w, 0, null, this);
7805
- this.d = new DashProperty(elem, data.d || {}, 'svg', this);
7806
- this.initGradientData(elem, data, styleOb);
7807
- this._isAnimated = !!this._isAnimated;
7808
- }
7809
-
7810
- extendPrototype([SVGGradientFillStyleData, DynamicPropertyContainer], SVGGradientStrokeStyleData);
7811
-
7812
- function ShapeGroupData() {
7813
- this.it = [];
7814
- this.prevViewData = [];
7815
- this.gr = createNS('g');
7816
- }
7817
- var SVGElementsRenderer = (function () {
7818
- var _identityMatrix = new Matrix();
7819
- var _matrixHelper = new Matrix();
7820
-
7821
- var ob = {
7822
- createRenderFunction: createRenderFunction
7823
- }
7824
-
7825
- function createRenderFunction(data) {
7826
- var ty = data.ty;
7827
- switch (data.ty) {
7828
- case 'fl':
7829
- return renderFill;
7830
- case 'gf':
7831
- return renderGradient;
7832
- case 'gs':
7833
- return renderGradientStroke;
7834
- case 'st':
7835
- return renderStroke;
7836
- case 'sh':
7837
- case 'el':
7838
- case 'rc':
7839
- case 'sr':
7840
- return renderPath;
7841
- case 'tr':
7842
- return renderContentTransform;
7843
- }
7844
- }
7845
-
7846
- function renderContentTransform(styleData, itemData, isFirstFrame) {
7847
- if (isFirstFrame || itemData.transform.op._mdf) {
7848
- itemData.transform.container.setAttribute('opacity', itemData.transform.op.v);
7849
- }
7850
- if (isFirstFrame || itemData.transform.mProps._mdf) {
7851
- itemData.transform.container.setAttribute('transform', itemData.transform.mProps.v.to2dCSS());
7852
- }
7853
- }
7854
-
7855
- function renderPath(styleData, itemData, isFirstFrame) {
7856
- var j, jLen, pathStringTransformed, redraw, pathNodes, l, lLen = itemData.styles.length;
7857
- var lvl = itemData.lvl;
7858
- var paths, mat, props, iterations, k;
7859
- for (l = 0; l < lLen; l += 1) {
7860
- redraw = itemData.sh._mdf || isFirstFrame;
7861
- if (itemData.styles[l].lvl < lvl) {
7862
- mat = _matrixHelper.reset();
7863
- iterations = lvl - itemData.styles[l].lvl;
7864
- k = itemData.transformers.length - 1;
7865
- while (!redraw && iterations > 0) {
7866
- redraw = itemData.transformers[k].mProps._mdf || redraw;
7867
- iterations--;
7868
- k--;
7869
- }
7870
- if (redraw) {
7871
- iterations = lvl - itemData.styles[l].lvl;
7872
- k = itemData.transformers.length - 1;
7873
- while (iterations > 0) {
7874
- props = itemData.transformers[k].mProps.v.props;
7875
- mat.transform(props[0], props[1], props[2], props[3], props[4], props[5], props[6], props[7], props[8], props[9], props[10], props[11], props[12], props[13], props[14], props[15]);
7876
- iterations--;
7877
- k--;
7878
- }
7879
- }
7880
- } else {
7881
- mat = _identityMatrix;
7882
- }
7883
- paths = itemData.sh.paths;
7884
- jLen = paths._length;
7885
- if (redraw) {
7886
- pathStringTransformed = '';
7887
- for (j = 0; j < jLen; j += 1) {
7888
- pathNodes = paths.shapes[j];
7889
- if (pathNodes && pathNodes._length) {
7890
- pathStringTransformed += buildShapeString(pathNodes, pathNodes._length, pathNodes.c, mat);
7891
- }
7892
- }
7893
- itemData.caches[l] = pathStringTransformed;
7894
- } else {
7895
- pathStringTransformed = itemData.caches[l];
7896
- }
7897
- itemData.styles[l].d += styleData.hd === true ? '' : pathStringTransformed;
7898
- itemData.styles[l]._mdf = redraw || itemData.styles[l]._mdf;
7899
- }
7900
- }
7901
-
7902
- function renderFill(styleData, itemData, isFirstFrame) {
7903
- var styleElem = itemData.style;
7904
-
7905
- if (itemData.c._mdf || isFirstFrame) {
7906
- styleElem.pElem.setAttribute('fill', 'rgb(' + bm_floor(itemData.c.v[0]) + ',' + bm_floor(itemData.c.v[1]) + ',' + bm_floor(itemData.c.v[2]) + ')');
7907
- }
7908
- if (itemData.o._mdf || isFirstFrame) {
7909
- styleElem.pElem.setAttribute('fill-opacity', itemData.o.v);
7910
- }
7911
- };
7912
-
7913
- function renderGradientStroke(styleData, itemData, isFirstFrame) {
7914
- renderGradient(styleData, itemData, isFirstFrame);
7915
- renderStroke(styleData, itemData, isFirstFrame);
7916
- }
7917
-
7918
- function renderGradient(styleData, itemData, isFirstFrame) {
7919
- var gfill = itemData.gf;
7920
- var hasOpacity = itemData.g._hasOpacity;
7921
- var pt1 = itemData.s.v,
7922
- pt2 = itemData.e.v;
7923
-
7924
- if (itemData.o._mdf || isFirstFrame) {
7925
- var attr = styleData.ty === 'gf' ? 'fill-opacity' : 'stroke-opacity';
7926
- itemData.style.pElem.setAttribute(attr, itemData.o.v);
7927
- }
7928
- if (itemData.s._mdf || isFirstFrame) {
7929
- var attr1 = styleData.t === 1 ? 'x1' : 'cx';
7930
- var attr2 = attr1 === 'x1' ? 'y1' : 'cy';
7931
- gfill.setAttribute(attr1, pt1[0]);
7932
- gfill.setAttribute(attr2, pt1[1]);
7933
- if (hasOpacity && !itemData.g._collapsable) {
7934
- itemData.of.setAttribute(attr1, pt1[0]);
7935
- itemData.of.setAttribute(attr2, pt1[1]);
7936
- }
7937
- }
7938
- var stops, i, len, stop;
7939
- if (itemData.g._cmdf || isFirstFrame) {
7940
- stops = itemData.cst;
7941
- var cValues = itemData.g.c;
7942
- len = stops.length;
7943
- for (i = 0; i < len; i += 1) {
7944
- stop = stops[i];
7945
- stop.setAttribute('offset', cValues[i * 4] + '%');
7946
- stop.setAttribute('stop-color', 'rgb(' + cValues[i * 4 + 1] + ',' + cValues[i * 4 + 2] + ',' + cValues[i * 4 + 3] + ')');
7947
- }
7948
- }
7949
- if (hasOpacity && (itemData.g._omdf || isFirstFrame)) {
7950
- var oValues = itemData.g.o;
7951
- if (itemData.g._collapsable) {
7952
- stops = itemData.cst;
7953
- } else {
7954
- stops = itemData.ost;
7955
- }
7956
- len = stops.length;
7957
- for (i = 0; i < len; i += 1) {
7958
- stop = stops[i];
7959
- if (!itemData.g._collapsable) {
7960
- stop.setAttribute('offset', oValues[i * 2] + '%');
7961
- }
7962
- stop.setAttribute('stop-opacity', oValues[i * 2 + 1]);
7963
- }
7964
- }
7965
- if (styleData.t === 1) {
7966
- if (itemData.e._mdf || isFirstFrame) {
7967
- gfill.setAttribute('x2', pt2[0]);
7968
- gfill.setAttribute('y2', pt2[1]);
7969
- if (hasOpacity && !itemData.g._collapsable) {
7970
- itemData.of.setAttribute('x2', pt2[0]);
7971
- itemData.of.setAttribute('y2', pt2[1]);
7972
- }
7973
- }
7974
- } else {
7975
- var rad;
7976
- if (itemData.s._mdf || itemData.e._mdf || isFirstFrame) {
7977
- rad = Math.sqrt(Math.pow(pt1[0] - pt2[0], 2) + Math.pow(pt1[1] - pt2[1], 2));
7978
- gfill.setAttribute('r', rad);
7979
- if (hasOpacity && !itemData.g._collapsable) {
7980
- itemData.of.setAttribute('r', rad);
7981
- }
7982
- }
7983
- if (itemData.e._mdf || itemData.h._mdf || itemData.a._mdf || isFirstFrame) {
7984
- if (!rad) {
7985
- rad = Math.sqrt(Math.pow(pt1[0] - pt2[0], 2) + Math.pow(pt1[1] - pt2[1], 2));
7986
- }
7987
- var ang = Math.atan2(pt2[1] - pt1[1], pt2[0] - pt1[0]);
7988
-
7989
- var percent = itemData.h.v >= 1 ? 0.99 : itemData.h.v <= -1 ? -0.99 : itemData.h.v;
7990
- var dist = rad * percent;
7991
- var x = Math.cos(ang + itemData.a.v) * dist + pt1[0];
7992
- var y = Math.sin(ang + itemData.a.v) * dist + pt1[1];
7993
- gfill.setAttribute('fx', x);
7994
- gfill.setAttribute('fy', y);
7995
- if (hasOpacity && !itemData.g._collapsable) {
7996
- itemData.of.setAttribute('fx', x);
7997
- itemData.of.setAttribute('fy', y);
7998
- }
7999
- }
8000
- //gfill.setAttribute('fy','200');
8001
- }
8002
- };
8003
-
8004
- function renderStroke(styleData, itemData, isFirstFrame) {
8005
- var styleElem = itemData.style;
8006
- var d = itemData.d;
8007
- if (d && (d._mdf || isFirstFrame) && d.dashStr) {
8008
- styleElem.pElem.setAttribute('stroke-dasharray', d.dashStr);
8009
- styleElem.pElem.setAttribute('stroke-dashoffset', d.dashoffset[0]);
8010
- }
8011
- if (itemData.c && (itemData.c._mdf || isFirstFrame)) {
8012
- styleElem.pElem.setAttribute('stroke', 'rgb(' + bm_floor(itemData.c.v[0]) + ',' + bm_floor(itemData.c.v[1]) + ',' + bm_floor(itemData.c.v[2]) + ')');
8013
- }
8014
- if (itemData.o._mdf || isFirstFrame) {
8015
- styleElem.pElem.setAttribute('stroke-opacity', itemData.o.v);
8016
- }
8017
- if (itemData.w._mdf || isFirstFrame) {
8018
- styleElem.pElem.setAttribute('stroke-width', itemData.w.v);
8019
- if (styleElem.msElem) {
8020
- styleElem.msElem.setAttribute('stroke-width', itemData.w.v);
8021
- }
8022
- }
8023
- };
8024
-
8025
- return ob;
8026
- }())
8027
-
8028
- function ShapeTransformManager() {
8029
- this.sequences = {};
8030
- this.sequenceList = [];
8031
- this.transform_key_count = 0;
8032
- }
8033
-
8034
- ShapeTransformManager.prototype = {
8035
- addTransformSequence: function (transforms) {
8036
- var i, len = transforms.length;
8037
- var key = '_';
8038
- for (i = 0; i < len; i += 1) {
8039
- key += transforms[i].transform.key + '_';
8040
- }
8041
- var sequence = this.sequences[key];
8042
- if (!sequence) {
8043
- sequence = {
8044
- transforms: [].concat(transforms),
8045
- finalTransform: new Matrix(),
8046
- _mdf: false
8047
- };
8048
- this.sequences[key] = sequence;
8049
- this.sequenceList.push(sequence);
8050
- }
8051
- return sequence;
8052
- },
8053
- processSequence: function (sequence, isFirstFrame) {
8054
- var i = 0,
8055
- len = sequence.transforms.length,
8056
- _mdf = isFirstFrame;
8057
- while (i < len && !isFirstFrame) {
8058
- if (sequence.transforms[i].transform.mProps._mdf) {
8059
- _mdf = true;
8060
- break;
8061
- }
8062
- i += 1
8063
- }
8064
- if (_mdf) {
8065
- var props;
8066
- sequence.finalTransform.reset();
8067
- for (i = len - 1; i >= 0; i -= 1) {
8068
- props = sequence.transforms[i].transform.mProps.v.props;
8069
- sequence.finalTransform.transform(props[0], props[1], props[2], props[3], props[4], props[5], props[6], props[7], props[8], props[9], props[10], props[11], props[12], props[13], props[14], props[15]);
8070
- }
8071
- }
8072
- sequence._mdf = _mdf;
8073
-
8074
- },
8075
- processSequences: function (isFirstFrame) {
8076
- var i, len = this.sequenceList.length;
8077
- for (i = 0; i < len; i += 1) {
8078
- this.processSequence(this.sequenceList[i], isFirstFrame);
8079
- }
8080
-
8081
- },
8082
- getNewKey: function () {
8083
- return '_' + this.transform_key_count++;
8084
- }
8085
- }
8086
-
8087
- function CVShapeData(element, data, styles, transformsManager) {
8088
- this.styledShapes = [];
8089
- this.tr = [0, 0, 0, 0, 0, 0];
8090
- var ty = 4;
8091
- if (data.ty == 'rc') {
8092
- ty = 5;
8093
- } else if (data.ty == 'el') {
8094
- ty = 6;
8095
- } else if (data.ty == 'sr') {
8096
- ty = 7;
8097
- }
8098
- this.sh = ShapePropertyFactory.getShapeProp(element, data, ty, element);
8099
- var i, len = styles.length,
8100
- styledShape;
8101
- for (i = 0; i < len; i += 1) {
8102
- if (!styles[i].closed) {
8103
- styledShape = {
8104
- transforms: transformsManager.addTransformSequence(styles[i].transforms),
8105
- trNodes: []
8106
- }
8107
- this.styledShapes.push(styledShape);
8108
- styles[i].elements.push(styledShape);
8109
- }
8110
- }
8111
- }
8112
-
8113
- CVShapeData.prototype.setAsAnimated = SVGShapeData.prototype.setAsAnimated;
8114
-
8115
- function BaseElement() { }
8116
-
8117
- BaseElement.prototype = {
8118
- checkMasks: function () {
8119
- if (!this.data.hasMask) {
8120
- return false;
8121
- }
8122
- var i = 0,
8123
- len = this.data.masksProperties.length;
8124
- while (i < len) {
8125
- if ((this.data.masksProperties[i].mode !== 'n' && this.data.masksProperties[i].cl !== false)) {
8126
- return true;
8127
- }
8128
- i += 1;
8129
- }
8130
- return false;
8131
- },
8132
- initExpressions: function () {
8133
- this.layerInterface = LayerExpressionInterface(this);
8134
- if (this.data.hasMask && this.maskManager) {
8135
- this.layerInterface.registerMaskInterface(this.maskManager);
8136
- }
8137
- var effectsInterface = EffectsExpressionInterface.createEffectsInterface(this, this.layerInterface);
8138
- this.layerInterface.registerEffectsInterface(effectsInterface);
8139
-
8140
- if (this.data.ty === 0 || this.data.xt) {
8141
- this.compInterface = CompExpressionInterface(this);
8142
- } else if (this.data.ty === 4) {
8143
- this.layerInterface.shapeInterface = ShapeExpressionInterface(this.shapesData, this.itemsData, this.layerInterface);
8144
- this.layerInterface.content = this.layerInterface.shapeInterface;
8145
- } else if (this.data.ty === 5) {
8146
- this.layerInterface.textInterface = TextExpressionInterface(this);
8147
- this.layerInterface.text = this.layerInterface.textInterface;
8148
- }
8149
- },
8150
- setBlendMode: function () {
8151
- var blendModeValue = getBlendMode(this.data.bm);
8152
- var elem = this.baseElement || this.layerElement;
8153
-
8154
- elem.style['mix-blend-mode'] = blendModeValue;
8155
- },
8156
- initBaseData: function (data, globalData, comp) {
8157
- this.globalData = globalData;
8158
- this.comp = comp;
8159
- this.data = data;
8160
- this.layerId = createElementID();
8161
-
8162
- //Stretch factor for old animations missing this property.
8163
- if (!this.data.sr) {
8164
- this.data.sr = 1;
8165
- }
8166
- // effects manager
8167
- this.effectsManager = new EffectsManager(this.data, this, this.dynamicProperties);
8168
-
8169
- },
8170
- getType: function () {
8171
- return this.type;
8172
- },
8173
- sourceRectAtTime: function () { }
8174
- }
8175
-
8176
- function NullElement(data, globalData, comp) {
8177
- this.initFrame();
8178
- this.initBaseData(data, globalData, comp);
8179
- this.initFrame();
8180
- this.initTransform(data, globalData, comp);
8181
- this.initHierarchy();
8182
- }
8183
-
8184
- NullElement.prototype.prepareFrame = function (num) {
8185
- this.prepareProperties(num, true);
8186
- };
8187
-
8188
- NullElement.prototype.renderFrame = function () { };
8189
-
8190
- NullElement.prototype.getBaseElement = function () {
8191
- return null;
8192
- };
8193
-
8194
- NullElement.prototype.destroy = function () { };
8195
-
8196
- NullElement.prototype.sourceRectAtTime = function () { };
8197
-
8198
- NullElement.prototype.hide = function () { };
8199
-
8200
- extendPrototype([BaseElement, TransformElement, HierarchyElement, FrameElement], NullElement);
8201
-
8202
- function SVGBaseElement() { }
8203
-
8204
- SVGBaseElement.prototype = {
8205
- initRendererElement: function () {
8206
- this.layerElement = createNS('g');
8207
- },
8208
- createContainerElements: function () {
8209
- this.matteElement = createNS('g');
8210
- this.transformedElement = this.layerElement;
8211
- this.maskedElement = this.layerElement;
8212
- this._sizeChanged = false;
8213
- var layerElementParent = null;
8214
- //If this layer acts as a mask for the following layer
8215
- var filId, fil, gg;
8216
- if (this.data.td) {
8217
- if (this.data.td == 3 || this.data.td == 1) {
8218
- var masker = createNS('mask');
8219
- masker.setAttribute('id', this.layerId);
8220
- masker.setAttribute('mask-type', this.data.td == 3 ? 'luminance' : 'alpha');
8221
- masker.appendChild(this.layerElement);
8222
- layerElementParent = masker;
8223
- this.globalData.defs.appendChild(masker);
8224
- // This is only for IE and Edge when mask if of type alpha
8225
- if (!featureSupport.maskType && this.data.td == 1) {
8226
- masker.setAttribute('mask-type', 'luminance');
8227
- filId = createElementID();
8228
- fil = filtersFactory.createFilter(filId);
8229
- this.globalData.defs.appendChild(fil);
8230
- fil.appendChild(filtersFactory.createAlphaToLuminanceFilter());
8231
- gg = createNS('g');
8232
- gg.appendChild(this.layerElement);
8233
- layerElementParent = gg;
8234
- masker.appendChild(gg);
8235
- gg.setAttribute('filter', 'url(' + locationHref + '#' + filId + ')');
8236
- }
8237
- } else if (this.data.td == 2) {
8238
- var maskGroup = createNS('mask');
8239
- maskGroup.setAttribute('id', this.layerId);
8240
- maskGroup.setAttribute('mask-type', 'alpha');
8241
- var maskGrouper = createNS('g');
8242
- maskGroup.appendChild(maskGrouper);
8243
- filId = createElementID();
8244
- fil = filtersFactory.createFilter(filId);
8245
- ////
8246
-
8247
- // This solution doesn't work on Android when meta tag with viewport attribute is set
8248
- /*var feColorMatrix = createNS('feColorMatrix');
8249
- feColorMatrix.setAttribute('type', 'matrix');
8250
- feColorMatrix.setAttribute('color-interpolation-filters', 'sRGB');
8251
- feColorMatrix.setAttribute('values','1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 -1 1');
8252
- fil.appendChild(feColorMatrix);*/
8253
- ////
8254
- var feCTr = createNS('feComponentTransfer');
8255
- feCTr.setAttribute('in', 'SourceGraphic');
8256
- fil.appendChild(feCTr);
8257
- var feFunc = createNS('feFuncA');
8258
- feFunc.setAttribute('type', 'table');
8259
- feFunc.setAttribute('tableValues', '1.0 0.0');
8260
- feCTr.appendChild(feFunc);
8261
- ////
8262
- this.globalData.defs.appendChild(fil);
8263
- var alphaRect = createNS('rect');
8264
- alphaRect.setAttribute('width', this.comp.data.w);
8265
- alphaRect.setAttribute('height', this.comp.data.h);
8266
- alphaRect.setAttribute('x', '0');
8267
- alphaRect.setAttribute('y', '0');
8268
- alphaRect.setAttribute('fill', '#ffffff');
8269
- alphaRect.setAttribute('opacity', '0');
8270
- maskGrouper.setAttribute('filter', 'url(' + locationHref + '#' + filId + ')');
8271
- maskGrouper.appendChild(alphaRect);
8272
- maskGrouper.appendChild(this.layerElement);
8273
- layerElementParent = maskGrouper;
8274
- if (!featureSupport.maskType) {
8275
- maskGroup.setAttribute('mask-type', 'luminance');
8276
- fil.appendChild(filtersFactory.createAlphaToLuminanceFilter());
8277
- gg = createNS('g');
8278
- maskGrouper.appendChild(alphaRect);
8279
- gg.appendChild(this.layerElement);
8280
- layerElementParent = gg;
8281
- maskGrouper.appendChild(gg);
8282
- }
8283
- this.globalData.defs.appendChild(maskGroup);
8284
- }
8285
- } else if (this.data.tt) {
8286
- this.matteElement.appendChild(this.layerElement);
8287
- layerElementParent = this.matteElement;
8288
- this.baseElement = this.matteElement;
8289
- } else {
8290
- this.baseElement = this.layerElement;
8291
- }
8292
- if (this.data.ln) {
8293
- this.layerElement.setAttribute('id', this.data.ln);
8294
- }
8295
- if (this.data.cl) {
8296
- this.layerElement.setAttribute('class', this.data.cl);
8297
- }
8298
- //Clipping compositions to hide content that exceeds boundaries. If collapsed transformations is on, component should not be clipped
8299
- if (this.data.ty === 0 && !this.data.hd) {
8300
- var cp = createNS('clipPath');
8301
- var pt = createNS('path');
8302
- pt.setAttribute('d', 'M0,0 L' + this.data.w + ',0' + ' L' + this.data.w + ',' + this.data.h + ' L0,' + this.data.h + 'z');
8303
- var clipId = createElementID();
8304
- cp.setAttribute('id', clipId);
8305
- cp.appendChild(pt);
8306
- this.globalData.defs.appendChild(cp);
8307
-
8308
- if (this.checkMasks()) {
8309
- var cpGroup = createNS('g');
8310
- cpGroup.setAttribute('clip-path', 'url(' + locationHref + '#' + clipId + ')');
8311
- cpGroup.appendChild(this.layerElement);
8312
- this.transformedElement = cpGroup;
8313
- if (layerElementParent) {
8314
- layerElementParent.appendChild(this.transformedElement);
8315
- } else {
8316
- this.baseElement = this.transformedElement;
8317
- }
8318
- } else {
8319
- this.layerElement.setAttribute('clip-path', 'url(' + locationHref + '#' + clipId + ')');
8320
- }
8321
-
8322
- }
8323
- if (this.data.bm !== 0) {
8324
- this.setBlendMode();
8325
- }
8326
-
8327
- },
8328
- renderElement: function () {
8329
- if (this.finalTransform._matMdf) {
8330
- this.transformedElement.setAttribute('transform', this.finalTransform.mat.to2dCSS());
8331
- }
8332
- if (this.finalTransform._opMdf) {
8333
- this.transformedElement.setAttribute('opacity', this.finalTransform.mProp.o.v);
8334
- }
8335
- },
8336
- destroyBaseElement: function () {
8337
- this.layerElement = null;
8338
- this.matteElement = null;
8339
- this.maskManager.destroy();
8340
- },
8341
- getBaseElement: function () {
8342
- if (this.data.hd) {
8343
- return null;
8344
- }
8345
- return this.baseElement;
8346
- },
8347
- createRenderableComponents: function () {
8348
- this.maskManager = new MaskElement(this.data, this, this.globalData);
8349
- this.renderableEffectsManager = new SVGEffects(this);
8350
- },
8351
- setMatte: function (id) {
8352
- if (!this.matteElement) {
8353
- return;
8354
- }
8355
- this.matteElement.setAttribute("mask", "url(" + locationHref + "#" + id + ")");
8356
- }
8357
- };
8358
-
8359
- function IShapeElement() { }
8360
-
8361
- IShapeElement.prototype = {
8362
- addShapeToModifiers: function (data) {
8363
- var i, len = this.shapeModifiers.length;
8364
- for (i = 0; i < len; i += 1) {
8365
- this.shapeModifiers[i].addShape(data);
8366
- }
8367
- },
8368
- isShapeInAnimatedModifiers: function (data) {
8369
- var i = 0,
8370
- len = this.shapeModifiers.length;
8371
- while (i < len) {
8372
- if (this.shapeModifiers[i].isAnimatedWithShape(data)) {
8373
- return true;
8374
- }
8375
- }
8376
- return false;
8377
- },
8378
- renderModifiers: function () {
8379
- if (!this.shapeModifiers.length) {
8380
- return;
8381
- }
8382
- var i, len = this.shapes.length;
8383
- for (i = 0; i < len; i += 1) {
8384
- this.shapes[i].sh.reset();
8385
- }
8386
-
8387
- len = this.shapeModifiers.length;
8388
- for (i = len - 1; i >= 0; i -= 1) {
8389
- this.shapeModifiers[i].processShapes(this._isFirstFrame);
8390
- }
8391
- },
8392
- lcEnum: {
8393
- '1': 'butt',
8394
- '2': 'round',
8395
- '3': 'square'
8396
- },
8397
- ljEnum: {
8398
- '1': 'miter',
8399
- '2': 'round',
8400
- '3': 'bevel'
8401
- },
8402
- searchProcessedElement: function (elem) {
8403
- var elements = this.processedElements;
8404
- var i = 0,
8405
- len = elements.length;
8406
- while (i < len) {
8407
- if (elements[i].elem === elem) {
8408
- return elements[i].pos;
8409
- }
8410
- i += 1;
8411
- }
8412
- return 0;
8413
- },
8414
- addProcessedElement: function (elem, pos) {
8415
- var elements = this.processedElements;
8416
- var i = elements.length;
8417
- while (i) {
8418
- i -= 1;
8419
- if (elements[i].elem === elem) {
8420
- elements[i].pos = pos;
8421
- return;
8422
- }
8423
- }
8424
- elements.push(new ProcessedElement(elem, pos));
8425
- },
8426
- prepareFrame: function (num) {
8427
- this.prepareRenderableFrame(num);
8428
- this.prepareProperties(num, this.isInRange);
8429
- }
8430
- };
8431
-
8432
- function ITextElement() { }
8433
-
8434
- ITextElement.prototype.initElement = function (data, globalData, comp) {
8435
- this.lettersChangedFlag = true;
8436
- this.initFrame();
8437
- this.initBaseData(data, globalData, comp);
8438
- this.textProperty = new TextProperty(this, data.t, this.dynamicProperties);
8439
- this.textAnimator = new TextAnimatorProperty(data.t, this.renderType, this);
8440
- this.initTransform(data, globalData, comp);
8441
- this.initHierarchy();
8442
- this.initRenderable();
8443
- this.initRendererElement();
8444
- this.createContainerElements();
8445
- this.createRenderableComponents();
8446
- this.createContent();
8447
- this.hide();
8448
- this.textAnimator.searchProperties(this.dynamicProperties);
8449
- };
8450
-
8451
- ITextElement.prototype.prepareFrame = function (num) {
8452
- this._mdf = false;
8453
- this.prepareRenderableFrame(num);
8454
- this.prepareProperties(num, this.isInRange);
8455
- if (this.textProperty._mdf || this.textProperty._isFirstFrame) {
8456
- this.buildNewText();
8457
- this.textProperty._isFirstFrame = false;
8458
- this.textProperty._mdf = false;
8459
- }
8460
- };
8461
-
8462
- ITextElement.prototype.createPathShape = function (matrixHelper, shapes) {
8463
- var j, jLen = shapes.length;
8464
- var k, kLen, pathNodes;
8465
- var shapeStr = '';
8466
- for (j = 0; j < jLen; j += 1) {
8467
- pathNodes = shapes[j].ks.k;
8468
- shapeStr += buildShapeString(pathNodes, pathNodes.i.length, true, matrixHelper);
8469
- }
8470
- return shapeStr;
8471
- };
8472
-
8473
- ITextElement.prototype.updateDocumentData = function (newData, index) {
8474
- this.textProperty.updateDocumentData(newData, index);
8475
- };
8476
-
8477
- ITextElement.prototype.canResizeFont = function (_canResize) {
8478
- this.textProperty.canResizeFont(_canResize);
8479
- };
8480
-
8481
- ITextElement.prototype.setMinimumFontSize = function (_fontSize) {
8482
- this.textProperty.setMinimumFontSize(_fontSize);
8483
- };
8484
-
8485
- ITextElement.prototype.applyTextPropertiesToMatrix = function (documentData, matrixHelper, lineNumber, xPos, yPos) {
8486
- if (documentData.ps) {
8487
- matrixHelper.translate(documentData.ps[0], documentData.ps[1] + documentData.ascent, 0);
8488
- }
8489
- matrixHelper.translate(0, -documentData.ls, 0);
8490
- switch (documentData.j) {
8491
- case 1:
8492
- matrixHelper.translate(documentData.justifyOffset + (documentData.boxWidth - documentData.lineWidths[lineNumber]), 0, 0);
8493
- break;
8494
- case 2:
8495
- matrixHelper.translate(documentData.justifyOffset + (documentData.boxWidth - documentData.lineWidths[lineNumber]) / 2, 0, 0);
8496
- break;
8497
- }
8498
- matrixHelper.translate(xPos, yPos, 0);
8499
- };
8500
-
8501
-
8502
- ITextElement.prototype.buildColor = function (colorData) {
8503
- return 'rgb(' + Math.round(colorData[0] * 255) + ',' + Math.round(colorData[1] * 255) + ',' + Math.round(colorData[2] * 255) + ')';
8504
- };
8505
-
8506
- ITextElement.prototype.emptyProp = new LetterProps();
8507
-
8508
- ITextElement.prototype.destroy = function () {
8509
-
8510
- };
8511
-
8512
- function ICompElement() { }
8513
-
8514
- extendPrototype([BaseElement, TransformElement, HierarchyElement, FrameElement, RenderableDOMElement], ICompElement);
8515
-
8516
- ICompElement.prototype.initElement = function (data, globalData, comp) {
8517
- this.initFrame();
8518
- this.initBaseData(data, globalData, comp);
8519
- this.initTransform(data, globalData, comp);
8520
- this.initRenderable();
8521
- this.initHierarchy();
8522
- this.initRendererElement();
8523
- this.createContainerElements();
8524
- this.createRenderableComponents();
8525
- if (this.data.xt || !globalData.progressiveLoad) {
8526
- this.buildAllItems();
8527
- }
8528
- this.hide();
8529
- };
8530
-
8531
- /*ICompElement.prototype.hide = function(){
8532
- if(!this.hidden){
8533
- this.hideElement();
8534
- var i,len = this.elements.length;
8535
- for( i = 0; i < len; i+=1 ){
8536
- if(this.elements[i]){
8537
- this.elements[i].hide();
8538
- }
8539
- }
8540
- }
8541
- };*/
8542
-
8543
- ICompElement.prototype.prepareFrame = function (num) {
8544
- this._mdf = false;
8545
- this.prepareRenderableFrame(num);
8546
- this.prepareProperties(num, this.isInRange);
8547
- if (!this.isInRange && !this.data.xt) {
8548
- return;
8549
- }
8550
-
8551
- if (!this.tm._placeholder) {
8552
- var timeRemapped = this.tm.v;
8553
- if (timeRemapped === this.data.op) {
8554
- timeRemapped = this.data.op - 1;
8555
- }
8556
- this.renderedFrame = timeRemapped;
8557
- } else {
8558
- this.renderedFrame = num / this.data.sr;
8559
- }
8560
- var i, len = this.elements.length;
8561
- if (!this.completeLayers) {
8562
- this.checkLayers(this.renderedFrame);
8563
- }
8564
- //This iteration needs to be backwards because of how expressions connect between each other
8565
- for (i = len - 1; i >= 0; i -= 1) {
8566
- if (this.completeLayers || this.elements[i]) {
8567
- this.elements[i].prepareFrame(this.renderedFrame - this.layers[i].st);
8568
- if (this.elements[i]._mdf) {
8569
- this._mdf = true;
8570
- }
8571
- }
8572
- }
8573
- };
8574
-
8575
- ICompElement.prototype.renderInnerContent = function () {
8576
- var i, len = this.layers.length;
8577
- for (i = 0; i < len; i += 1) {
8578
- if (this.completeLayers || this.elements[i]) {
8579
- this.elements[i].renderFrame();
8580
- }
8581
- }
8582
- };
8583
-
8584
- ICompElement.prototype.setElements = function (elems) {
8585
- this.elements = elems;
8586
- };
8587
-
8588
- ICompElement.prototype.getElements = function () {
8589
- return this.elements;
8590
- };
8591
-
8592
- ICompElement.prototype.destroyElements = function () {
8593
- var i, len = this.layers.length;
8594
- for (i = 0; i < len; i += 1) {
8595
- if (this.elements[i]) {
8596
- this.elements[i].destroy();
8597
- }
8598
- }
8599
- };
8600
-
8601
- ICompElement.prototype.destroy = function () {
8602
- this.destroyElements();
8603
- this.destroyBaseElement();
8604
- };
8605
-
8606
- function IImageElement(data, globalData, comp) {
8607
- this.assetData = globalData.getAssetData(data.refId);
8608
- this.initElement(data, globalData, comp);
8609
- this.sourceRect = {
8610
- top: 0,
8611
- left: 0,
8612
- width: this.assetData.w,
8613
- height: this.assetData.h
8614
- };
8615
- }
8616
-
8617
- extendPrototype([BaseElement, TransformElement, SVGBaseElement, HierarchyElement, FrameElement, RenderableDOMElement], IImageElement);
8618
-
8619
- IImageElement.prototype.createContent = function () {
8620
-
8621
- var assetPath = this.globalData.getAssetsPath(this.assetData);
8622
-
8623
- this.innerElem = createNS('image');
8624
- this.innerElem.setAttribute('width', this.assetData.w + "px");
8625
- this.innerElem.setAttribute('height', this.assetData.h + "px");
8626
- this.innerElem.setAttribute('preserveAspectRatio', this.assetData.pr || this.globalData.renderConfig.imagePreserveAspectRatio);
8627
- this.innerElem.setAttributeNS('http://www.w3.org/1999/xlink', 'href', assetPath);
8628
-
8629
- this.layerElement.appendChild(this.innerElem);
8630
- };
8631
-
8632
- IImageElement.prototype.sourceRectAtTime = function () {
8633
- return this.sourceRect;
8634
- }
8635
-
8636
- function ISolidElement(data, globalData, comp) {
8637
- this.initElement(data, globalData, comp);
8638
- }
8639
- extendPrototype([IImageElement], ISolidElement);
8640
-
8641
- ISolidElement.prototype.createContent = function () {
8642
-
8643
- var rect = createNS('rect');
8644
- ////rect.style.width = this.data.sw;
8645
- ////rect.style.height = this.data.sh;
8646
- ////rect.style.fill = this.data.sc;
8647
- rect.setAttribute('width', this.data.sw);
8648
- rect.setAttribute('height', this.data.sh);
8649
- rect.setAttribute('fill', this.data.sc);
8650
- this.layerElement.appendChild(rect);
8651
- };
8652
-
8653
- function SVGCompElement(data, globalData, comp) {
8654
- this.layers = data.layers;
8655
- this.supports3d = true;
8656
- this.completeLayers = false;
8657
- this.pendingElements = [];
8658
- this.elements = this.layers ? createSizedArray(this.layers.length) : [];
8659
- //this.layerElement = createNS('g');
8660
- this.initElement(data, globalData, comp);
8661
- this.tm = data.tm ? PropertyFactory.getProp(this, data.tm, 0, globalData.frameRate, this) : {
8662
- _placeholder: true
8663
- };
8664
- }
8665
-
8666
- extendPrototype([SVGRenderer, ICompElement, SVGBaseElement], SVGCompElement);
8667
-
8668
- function SVGTextElement(data, globalData, comp) {
8669
- this.textSpans = [];
8670
- this.renderType = 'svg';
8671
- this.initElement(data, globalData, comp);
8672
- }
8673
-
8674
- extendPrototype([BaseElement, TransformElement, SVGBaseElement, HierarchyElement, FrameElement, RenderableDOMElement, ITextElement], SVGTextElement);
8675
-
8676
- SVGTextElement.prototype.createContent = function () {
8677
-
8678
- if (this.data.singleShape && !this.globalData.fontManager.chars) {
8679
- this.textContainer = createNS('text');
8680
- }
8681
- };
8682
-
8683
- SVGTextElement.prototype.buildTextContents = function (textArray) {
8684
- var i = 0,
8685
- len = textArray.length;
8686
- var textContents = [],
8687
- currentTextContent = '';
8688
- while (i < len) {
8689
- if (textArray[i] === String.fromCharCode(13) || textArray[i] === String.fromCharCode(3)) {
8690
- textContents.push(currentTextContent);
8691
- currentTextContent = '';
8692
- } else {
8693
- currentTextContent += textArray[i];
8694
- }
8695
- i += 1;
8696
- }
8697
- textContents.push(currentTextContent);
8698
- return textContents;
8699
- }
8700
-
8701
- SVGTextElement.prototype.buildNewText = function () {
8702
- var i, len;
8703
-
8704
- var documentData = this.textProperty.currentData;
8705
- this.renderedLetters = createSizedArray(documentData ? documentData.l.length : 0);
8706
- if (documentData.fc) {
8707
- this.layerElement.setAttribute('fill', this.buildColor(documentData.fc));
8708
- } else {
8709
- this.layerElement.setAttribute('fill', 'rgba(0,0,0,0)');
8710
- }
8711
- if (documentData.sc) {
8712
- this.layerElement.setAttribute('stroke', this.buildColor(documentData.sc));
8713
- this.layerElement.setAttribute('stroke-width', documentData.sw);
8714
- }
8715
- this.layerElement.setAttribute('font-size', documentData.finalSize);
8716
- var fontData = this.globalData.fontManager.getFontByName(documentData.f);
8717
- if (fontData.fClass) {
8718
- this.layerElement.setAttribute('class', fontData.fClass);
8719
- } else {
8720
- this.layerElement.setAttribute('font-family', fontData.fFamily);
8721
- var fWeight = documentData.fWeight,
8722
- fStyle = documentData.fStyle;
8723
- this.layerElement.setAttribute('font-style', fStyle);
8724
- this.layerElement.setAttribute('font-weight', fWeight);
8725
- }
8726
- this.layerElement.setAttribute('aria-label', documentData.t);
8727
-
8728
- var letters = documentData.l || [];
8729
- var usesGlyphs = !!this.globalData.fontManager.chars;
8730
- len = letters.length;
8731
-
8732
- var tSpan;
8733
- var matrixHelper = this.mHelper;
8734
- var shapes, shapeStr = '',
8735
- singleShape = this.data.singleShape;
8736
- var xPos = 0,
8737
- yPos = 0,
8738
- firstLine = true;
8739
- var trackingOffset = documentData.tr / 1000 * documentData.finalSize;
8740
- if (singleShape && !usesGlyphs && !documentData.sz) {
8741
- var tElement = this.textContainer;
8742
- var justify = 'start';
8743
- switch (documentData.j) {
8744
- case 1:
8745
- justify = 'end';
8746
- break;
8747
- case 2:
8748
- justify = 'middle';
8749
- break;
8750
- }
8751
- tElement.setAttribute('text-anchor', justify);
8752
- tElement.setAttribute('letter-spacing', trackingOffset);
8753
- var textContent = this.buildTextContents(documentData.finalText);
8754
- len = textContent.length;
8755
- yPos = documentData.ps ? documentData.ps[1] + documentData.ascent : 0;
8756
- for (i = 0; i < len; i += 1) {
8757
- tSpan = this.textSpans[i] || createNS('tspan');
8758
- tSpan.textContent = textContent[i];
8759
- tSpan.setAttribute('x', 0);
8760
- tSpan.setAttribute('y', yPos);
8761
- tSpan.style.display = 'inherit';
8762
- tElement.appendChild(tSpan);
8763
- this.textSpans[i] = tSpan;
8764
- yPos += documentData.finalLineHeight;
8765
- }
8766
-
8767
- this.layerElement.appendChild(tElement);
8768
- } else {
8769
- var cachedSpansLength = this.textSpans.length;
8770
- var shapeData, charData;
8771
- for (i = 0; i < len; i += 1) {
8772
- if (!usesGlyphs || !singleShape || i === 0) {
8773
- tSpan = cachedSpansLength > i ? this.textSpans[i] : createNS(usesGlyphs ? 'path' : 'text');
8774
- if (cachedSpansLength <= i) {
8775
- tSpan.setAttribute('stroke-linecap', 'butt');
8776
- tSpan.setAttribute('stroke-linejoin', 'round');
8777
- tSpan.setAttribute('stroke-miterlimit', '4');
8778
- this.textSpans[i] = tSpan;
8779
- this.layerElement.appendChild(tSpan);
8780
- }
8781
- tSpan.style.display = 'inherit';
8782
- }
8783
-
8784
- matrixHelper.reset();
8785
- matrixHelper.scale(documentData.finalSize / 100, documentData.finalSize / 100);
8786
- if (singleShape) {
8787
- if (letters[i].n) {
8788
- xPos = -trackingOffset;
8789
- yPos += documentData.yOffset;
8790
- yPos += firstLine ? 1 : 0;
8791
- firstLine = false;
8792
- }
8793
- this.applyTextPropertiesToMatrix(documentData, matrixHelper, letters[i].line, xPos, yPos);
8794
- xPos += letters[i].l || 0;
8795
- //xPos += letters[i].val === ' ' ? 0 : trackingOffset;
8796
- xPos += trackingOffset;
8797
- }
8798
- if (usesGlyphs) {
8799
- charData = this.globalData.fontManager.getCharData(documentData.finalText[i], fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);
8800
- shapeData = charData && charData.data || {};
8801
- shapes = shapeData.shapes ? shapeData.shapes[0].it : [];
8802
- if (!singleShape) {
8803
- tSpan.setAttribute('d', this.createPathShape(matrixHelper, shapes));
8804
- } else {
8805
- shapeStr += this.createPathShape(matrixHelper, shapes);
8806
- }
8807
- } else {
8808
- if (singleShape) {
8809
- tSpan.setAttribute("transform", "translate(" + matrixHelper.props[12] + "," + matrixHelper.props[13] + ")");
8810
- }
8811
- tSpan.textContent = letters[i].val;
8812
- tSpan.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space", "preserve");
8813
- }
8814
- //
8815
- }
8816
- if (singleShape && tSpan) {
8817
- tSpan.setAttribute('d', shapeStr);
8818
- }
8819
- }
8820
- while (i < this.textSpans.length) {
8821
- this.textSpans[i].style.display = 'none';
8822
- i += 1;
8823
- }
8824
-
8825
- this._sizeChanged = true;
8826
- };
8827
-
8828
- SVGTextElement.prototype.sourceRectAtTime = function (time) {
8829
- this.prepareFrame(this.comp.renderedFrame - this.data.st);
8830
- this.renderInnerContent();
8831
- if (this._sizeChanged) {
8832
- this._sizeChanged = false;
8833
- var textBox = this.layerElement.getBBox();
8834
- this.bbox = {
8835
- top: textBox.y,
8836
- left: textBox.x,
8837
- width: textBox.width,
8838
- height: textBox.height
8839
- };
8840
- }
8841
- return this.bbox;
8842
- };
8843
-
8844
- SVGTextElement.prototype.renderInnerContent = function () {
8845
-
8846
- if (!this.data.singleShape) {
8847
- this.textAnimator.getMeasures(this.textProperty.currentData, this.lettersChangedFlag);
8848
- if (this.lettersChangedFlag || this.textAnimator.lettersChangedFlag) {
8849
- this._sizeChanged = true;
8850
- var i, len;
8851
- var renderedLetters = this.textAnimator.renderedLetters;
8852
-
8853
- var letters = this.textProperty.currentData.l;
8854
-
8855
- len = letters.length;
8856
- var renderedLetter, textSpan;
8857
- for (i = 0; i < len; i += 1) {
8858
- if (letters[i].n) {
8859
- continue;
8860
- }
8861
- renderedLetter = renderedLetters[i];
8862
- textSpan = this.textSpans[i];
8863
- if (renderedLetter._mdf.m) {
8864
- textSpan.setAttribute('transform', renderedLetter.m);
8865
- }
8866
- if (renderedLetter._mdf.o) {
8867
- textSpan.setAttribute('opacity', renderedLetter.o);
8868
- }
8869
- if (renderedLetter._mdf.sw) {
8870
- textSpan.setAttribute('stroke-width', renderedLetter.sw);
8871
- }
8872
- if (renderedLetter._mdf.sc) {
8873
- textSpan.setAttribute('stroke', renderedLetter.sc);
8874
- }
8875
- if (renderedLetter._mdf.fc) {
8876
- textSpan.setAttribute('fill', renderedLetter.fc);
8877
- }
8878
- }
8879
- }
8880
- }
8881
- };
8882
-
8883
- function SVGShapeElement(data, globalData, comp) {
8884
- //List of drawable elements
8885
- this.shapes = [];
8886
- // Full shape data
8887
- this.shapesData = data.shapes;
8888
- //List of styles that will be applied to shapes
8889
- this.stylesList = [];
8890
- //List of modifiers that will be applied to shapes
8891
- this.shapeModifiers = [];
8892
- //List of items in shape tree
8893
- this.itemsData = [];
8894
- //List of items in previous shape tree
8895
- this.processedElements = [];
8896
- // List of animated components
8897
- this.animatedContents = [];
8898
- this.initElement(data, globalData, comp);
8899
- //Moving any property that doesn't get too much access after initialization because of v8 way of handling more than 10 properties.
8900
- // List of elements that have been created
8901
- this.prevViewData = [];
8902
- //Moving any property that doesn't get too much access after initialization because of v8 way of handling more than 10 properties.
8903
- }
8904
-
8905
- extendPrototype([BaseElement, TransformElement, SVGBaseElement, IShapeElement, HierarchyElement, FrameElement, RenderableDOMElement], SVGShapeElement);
8906
-
8907
- SVGShapeElement.prototype.initSecondaryElement = function () { };
8908
-
8909
- SVGShapeElement.prototype.identityMatrix = new Matrix();
8910
-
8911
- SVGShapeElement.prototype.buildExpressionInterface = function () { };
8912
-
8913
- SVGShapeElement.prototype.createContent = function () {
8914
- this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, this.layerElement, 0, [], true);
8915
- this.filterUniqueShapes();
8916
- };
8917
-
8918
- /*
8919
- This method searches for multiple shapes that affect a single element and one of them is animated
8920
- */
8921
- SVGShapeElement.prototype.filterUniqueShapes = function () {
8922
- var i, len = this.shapes.length,
8923
- shape;
8924
- var j, jLen = this.stylesList.length;
8925
- var style, count = 0;
8926
- var tempShapes = [];
8927
- var areAnimated = false;
8928
- for (j = 0; j < jLen; j += 1) {
8929
- style = this.stylesList[j];
8930
- areAnimated = false;
8931
- tempShapes.length = 0;
8932
- for (i = 0; i < len; i += 1) {
8933
- shape = this.shapes[i];
8934
- if (shape.styles.indexOf(style) !== -1) {
8935
- tempShapes.push(shape);
8936
- areAnimated = shape._isAnimated || areAnimated;
8937
- }
8938
- }
8939
- if (tempShapes.length > 1 && areAnimated) {
8940
- this.setShapesAsAnimated(tempShapes);
8941
- }
8942
- }
8943
- }
8944
-
8945
- SVGShapeElement.prototype.setShapesAsAnimated = function (shapes) {
8946
- var i, len = shapes.length;
8947
- for (i = 0; i < len; i += 1) {
8948
- shapes[i].setAsAnimated();
8949
- }
8950
- }
8951
-
8952
- SVGShapeElement.prototype.createStyleElement = function (data, level) {
8953
- //TODO: prevent drawing of hidden styles
8954
- var elementData;
8955
- var styleOb = new SVGStyleData(data, level);
8956
-
8957
- var pathElement = styleOb.pElem;
8958
- if (data.ty === 'st') {
8959
- elementData = new SVGStrokeStyleData(this, data, styleOb);
8960
- } else if (data.ty === 'fl') {
8961
- elementData = new SVGFillStyleData(this, data, styleOb);
8962
- } else if (data.ty === 'gf' || data.ty === 'gs') {
8963
- var gradientConstructor = data.ty === 'gf' ? SVGGradientFillStyleData : SVGGradientStrokeStyleData;
8964
- elementData = new gradientConstructor(this, data, styleOb);
8965
- this.globalData.defs.appendChild(elementData.gf);
8966
- if (elementData.maskId) {
8967
- this.globalData.defs.appendChild(elementData.ms);
8968
- this.globalData.defs.appendChild(elementData.of);
8969
- pathElement.setAttribute('mask', 'url(' + locationHref + '#' + elementData.maskId + ')');
8970
- }
8971
- }
8972
-
8973
- if (data.ty === 'st' || data.ty === 'gs') {
8974
- pathElement.setAttribute('stroke-linecap', this.lcEnum[data.lc] || 'round');
8975
- pathElement.setAttribute('stroke-linejoin', this.ljEnum[data.lj] || 'round');
8976
- pathElement.setAttribute('fill-opacity', '0');
8977
- if (data.lj === 1) {
8978
- pathElement.setAttribute('stroke-miterlimit', data.ml);
8979
- }
8980
- }
8981
-
8982
- if (data.r === 2) {
8983
- pathElement.setAttribute('fill-rule', 'evenodd');
8984
- }
8985
-
8986
- if (data.ln) {
8987
- pathElement.setAttribute('id', data.ln);
8988
- }
8989
- if (data.cl) {
8990
- pathElement.setAttribute('class', data.cl);
8991
- }
8992
- if (data.bm) {
8993
- pathElement.style['mix-blend-mode'] = getBlendMode(data.bm);
8994
- }
8995
- this.stylesList.push(styleOb);
8996
- this.addToAnimatedContents(data, elementData);
8997
- return elementData;
8998
- };
8999
-
9000
- SVGShapeElement.prototype.createGroupElement = function (data) {
9001
- var elementData = new ShapeGroupData();
9002
- if (data.ln) {
9003
- elementData.gr.setAttribute('id', data.ln);
9004
- }
9005
- if (data.cl) {
9006
- elementData.gr.setAttribute('class', data.cl);
9007
- }
9008
- if (data.bm) {
9009
- elementData.gr.style['mix-blend-mode'] = getBlendMode(data.bm);
9010
- }
9011
- return elementData;
9012
- };
9013
-
9014
- SVGShapeElement.prototype.createTransformElement = function (data, container) {
9015
- var transformProperty = TransformPropertyFactory.getTransformProperty(this, data, this);
9016
- var elementData = new SVGTransformData(transformProperty, transformProperty.o, container);
9017
- this.addToAnimatedContents(data, elementData);
9018
- return elementData;
9019
- };
9020
-
9021
- SVGShapeElement.prototype.createShapeElement = function (data, ownTransformers, level) {
9022
- var ty = 4;
9023
- if (data.ty === 'rc') {
9024
- ty = 5;
9025
- } else if (data.ty === 'el') {
9026
- ty = 6;
9027
- } else if (data.ty === 'sr') {
9028
- ty = 7;
9029
- }
9030
- var shapeProperty = ShapePropertyFactory.getShapeProp(this, data, ty, this);
9031
- var elementData = new SVGShapeData(ownTransformers, level, shapeProperty);
9032
- this.shapes.push(elementData);
9033
- this.addShapeToModifiers(elementData);
9034
- this.addToAnimatedContents(data, elementData);
9035
- return elementData;
9036
- };
9037
-
9038
- SVGShapeElement.prototype.addToAnimatedContents = function (data, element) {
9039
- var i = 0,
9040
- len = this.animatedContents.length;
9041
- while (i < len) {
9042
- if (this.animatedContents[i].element === element) {
9043
- return;
9044
- }
9045
- i += 1;
9046
- }
9047
- this.animatedContents.push({
9048
- fn: SVGElementsRenderer.createRenderFunction(data),
9049
- element: element,
9050
- data: data
9051
- });
9052
- };
9053
-
9054
- SVGShapeElement.prototype.setElementStyles = function (elementData) {
9055
- var arr = elementData.styles;
9056
- var j, jLen = this.stylesList.length;
9057
- for (j = 0; j < jLen; j += 1) {
9058
- if (!this.stylesList[j].closed) {
9059
- arr.push(this.stylesList[j]);
9060
- }
9061
- }
9062
- };
9063
-
9064
- SVGShapeElement.prototype.reloadShapes = function () {
9065
- this._isFirstFrame = true;
9066
- var i, len = this.itemsData.length;
9067
- for (i = 0; i < len; i += 1) {
9068
- this.prevViewData[i] = this.itemsData[i];
9069
- }
9070
- this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, this.layerElement, 0, [], true);
9071
- this.filterUniqueShapes();
9072
- len = this.dynamicProperties.length;
9073
- for (i = 0; i < len; i += 1) {
9074
- this.dynamicProperties[i].getValue();
9075
- }
9076
- this.renderModifiers();
9077
- };
9078
-
9079
- SVGShapeElement.prototype.searchShapes = function (arr, itemsData, prevViewData, container, level, transformers, render) {
9080
- var ownTransformers = [].concat(transformers);
9081
- var i, len = arr.length - 1;
9082
- var j, jLen;
9083
- var ownStyles = [],
9084
- ownModifiers = [],
9085
- styleOb, currentTransform, modifier, processedPos;
9086
- for (i = len; i >= 0; i -= 1) {
9087
- processedPos = this.searchProcessedElement(arr[i]);
9088
- if (!processedPos) {
9089
- arr[i]._render = render;
9090
- } else {
9091
- itemsData[i] = prevViewData[processedPos - 1];
9092
- }
9093
- if (arr[i].ty == 'fl' || arr[i].ty == 'st' || arr[i].ty == 'gf' || arr[i].ty == 'gs') {
9094
- if (!processedPos) {
9095
- itemsData[i] = this.createStyleElement(arr[i], level);
9096
- } else {
9097
- itemsData[i].style.closed = false;
9098
- }
9099
- if (arr[i]._render) {
9100
- container.appendChild(itemsData[i].style.pElem);
9101
- }
9102
- ownStyles.push(itemsData[i].style);
9103
- } else if (arr[i].ty == 'gr') {
9104
- if (!processedPos) {
9105
- itemsData[i] = this.createGroupElement(arr[i]);
9106
- } else {
9107
- jLen = itemsData[i].it.length;
9108
- for (j = 0; j < jLen; j += 1) {
9109
- itemsData[i].prevViewData[j] = itemsData[i].it[j];
9110
- }
9111
- }
9112
- this.searchShapes(arr[i].it, itemsData[i].it, itemsData[i].prevViewData, itemsData[i].gr, level + 1, ownTransformers, render);
9113
- if (arr[i]._render) {
9114
- container.appendChild(itemsData[i].gr);
9115
- }
9116
- } else if (arr[i].ty == 'tr') {
9117
- if (!processedPos) {
9118
- itemsData[i] = this.createTransformElement(arr[i], container);
9119
- }
9120
- currentTransform = itemsData[i].transform;
9121
- ownTransformers.push(currentTransform);
9122
- } else if (arr[i].ty == 'sh' || arr[i].ty == 'rc' || arr[i].ty == 'el' || arr[i].ty == 'sr') {
9123
- if (!processedPos) {
9124
- itemsData[i] = this.createShapeElement(arr[i], ownTransformers, level);
9125
- }
9126
- this.setElementStyles(itemsData[i]);
9127
-
9128
- } else if (arr[i].ty == 'tm' || arr[i].ty == 'rd' || arr[i].ty == 'ms') {
9129
- if (!processedPos) {
9130
- modifier = ShapeModifiers.getModifier(arr[i].ty);
9131
- modifier.init(this, arr[i]);
9132
- itemsData[i] = modifier;
9133
- this.shapeModifiers.push(modifier);
9134
- } else {
9135
- modifier = itemsData[i];
9136
- modifier.closed = false;
9137
- }
9138
- ownModifiers.push(modifier);
9139
- } else if (arr[i].ty == 'rp') {
9140
- if (!processedPos) {
9141
- modifier = ShapeModifiers.getModifier(arr[i].ty);
9142
- itemsData[i] = modifier;
9143
- modifier.init(this, arr, i, itemsData);
9144
- this.shapeModifiers.push(modifier);
9145
- render = false;
9146
- } else {
9147
- modifier = itemsData[i];
9148
- modifier.closed = true;
9149
- }
9150
- ownModifiers.push(modifier);
9151
- }
9152
- this.addProcessedElement(arr[i], i + 1);
9153
- }
9154
- len = ownStyles.length;
9155
- for (i = 0; i < len; i += 1) {
9156
- ownStyles[i].closed = true;
9157
- }
9158
- len = ownModifiers.length;
9159
- for (i = 0; i < len; i += 1) {
9160
- ownModifiers[i].closed = true;
9161
- }
9162
- };
9163
-
9164
- SVGShapeElement.prototype.renderInnerContent = function () {
9165
- this.renderModifiers();
9166
- var i, len = this.stylesList.length;
9167
- for (i = 0; i < len; i += 1) {
9168
- this.stylesList[i].reset();
9169
- }
9170
- this.renderShape();
9171
-
9172
- for (i = 0; i < len; i += 1) {
9173
- if (this.stylesList[i]._mdf || this._isFirstFrame) {
9174
- if (this.stylesList[i].msElem) {
9175
- this.stylesList[i].msElem.setAttribute('d', this.stylesList[i].d);
9176
- //Adding M0 0 fixes same mask bug on all browsers
9177
- this.stylesList[i].d = 'M0 0' + this.stylesList[i].d;
9178
- }
9179
- this.stylesList[i].pElem.setAttribute('d', this.stylesList[i].d || 'M0 0');
9180
- }
9181
- }
9182
- };
9183
-
9184
- SVGShapeElement.prototype.renderShape = function () {
9185
- var i, len = this.animatedContents.length;
9186
- var animatedContent;
9187
- for (i = 0; i < len; i += 1) {
9188
- animatedContent = this.animatedContents[i];
9189
- if ((this._isFirstFrame || animatedContent.element._isAnimated) && animatedContent.data !== true) {
9190
- animatedContent.fn(animatedContent.data, animatedContent.element, this._isFirstFrame);
9191
- }
9192
- }
9193
- }
9194
-
9195
- SVGShapeElement.prototype.destroy = function () {
9196
- this.destroyBaseElement();
9197
- this.shapesData = null;
9198
- this.itemsData = null;
9199
- };
9200
-
9201
- function SVGTintFilter(filter, filterManager) {
9202
- this.filterManager = filterManager;
9203
- var feColorMatrix = createNS('feColorMatrix');
9204
- feColorMatrix.setAttribute('type', 'matrix');
9205
- feColorMatrix.setAttribute('color-interpolation-filters', 'linearRGB');
9206
- feColorMatrix.setAttribute('values', '0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0');
9207
- feColorMatrix.setAttribute('result', 'f1');
9208
- filter.appendChild(feColorMatrix);
9209
- feColorMatrix = createNS('feColorMatrix');
9210
- feColorMatrix.setAttribute('type', 'matrix');
9211
- feColorMatrix.setAttribute('color-interpolation-filters', 'sRGB');
9212
- feColorMatrix.setAttribute('values', '1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0');
9213
- feColorMatrix.setAttribute('result', 'f2');
9214
- filter.appendChild(feColorMatrix);
9215
- this.matrixFilter = feColorMatrix;
9216
- if (filterManager.effectElements[2].p.v !== 100 || filterManager.effectElements[2].p.k) {
9217
- var feMerge = createNS('feMerge');
9218
- filter.appendChild(feMerge);
9219
- var feMergeNode;
9220
- feMergeNode = createNS('feMergeNode');
9221
- feMergeNode.setAttribute('in', 'SourceGraphic');
9222
- feMerge.appendChild(feMergeNode);
9223
- feMergeNode = createNS('feMergeNode');
9224
- feMergeNode.setAttribute('in', 'f2');
9225
- feMerge.appendChild(feMergeNode);
9226
- }
9227
- }
9228
-
9229
- SVGTintFilter.prototype.renderFrame = function (forceRender) {
9230
- if (forceRender || this.filterManager._mdf) {
9231
- var colorBlack = this.filterManager.effectElements[0].p.v;
9232
- var colorWhite = this.filterManager.effectElements[1].p.v;
9233
- var opacity = this.filterManager.effectElements[2].p.v / 100;
9234
- this.matrixFilter.setAttribute('values', (colorWhite[0] - colorBlack[0]) + ' 0 0 0 ' + colorBlack[0] + ' ' + (colorWhite[1] - colorBlack[1]) + ' 0 0 0 ' + colorBlack[1] + ' ' + (colorWhite[2] - colorBlack[2]) + ' 0 0 0 ' + colorBlack[2] + ' 0 0 0 ' + opacity + ' 0');
9235
- }
9236
- };
9237
-
9238
- function SVGFillFilter(filter, filterManager) {
9239
- this.filterManager = filterManager;
9240
- var feColorMatrix = createNS('feColorMatrix');
9241
- feColorMatrix.setAttribute('type', 'matrix');
9242
- feColorMatrix.setAttribute('color-interpolation-filters', 'sRGB');
9243
- feColorMatrix.setAttribute('values', '1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0');
9244
- filter.appendChild(feColorMatrix);
9245
- this.matrixFilter = feColorMatrix;
9246
- }
9247
- SVGFillFilter.prototype.renderFrame = function (forceRender) {
9248
- if (forceRender || this.filterManager._mdf) {
9249
- var color = this.filterManager.effectElements[2].p.v;
9250
- var opacity = this.filterManager.effectElements[6].p.v;
9251
- this.matrixFilter.setAttribute('values', '0 0 0 0 ' + color[0] + ' 0 0 0 0 ' + color[1] + ' 0 0 0 0 ' + color[2] + ' 0 0 0 ' + opacity + ' 0');
9252
- }
9253
- };
9254
-
9255
- function SVGGaussianBlurEffect(filter, filterManager) {
9256
- // Outset the filter region by 100% on all sides to accommodate blur expansion.
9257
- filter.setAttribute('x', '-100%');
9258
- filter.setAttribute('y', '-100%');
9259
- filter.setAttribute('width', '300%');
9260
- filter.setAttribute('height', '300%');
9261
-
9262
- this.filterManager = filterManager;
9263
- var feGaussianBlur = createNS('feGaussianBlur');
9264
- filter.appendChild(feGaussianBlur);
9265
- this.feGaussianBlur = feGaussianBlur;
9266
- }
9267
-
9268
- SVGGaussianBlurEffect.prototype.renderFrame = function (forceRender) {
9269
- if (forceRender || this.filterManager._mdf) {
9270
- // Empirical value, matching AE's blur appearance.
9271
- var kBlurrinessToSigma = 0.3;
9272
- var sigma = this.filterManager.effectElements[0].p.v * kBlurrinessToSigma;
9273
-
9274
- // Dimensions mapping:
9275
- //
9276
- // 1 -> horizontal & vertical
9277
- // 2 -> horizontal only
9278
- // 3 -> vertical only
9279
- //
9280
- var dimensions = this.filterManager.effectElements[1].p.v;
9281
- var sigmaX = (dimensions == 3) ? 0 : sigma;
9282
- var sigmaY = (dimensions == 2) ? 0 : sigma;
9283
-
9284
- this.feGaussianBlur.setAttribute('stdDeviation', sigmaX + " " + sigmaY);
9285
-
9286
- // Repeat edges mapping:
9287
- //
9288
- // 0 -> off -> duplicate
9289
- // 1 -> on -> wrap
9290
- var edgeMode = (this.filterManager.effectElements[2].p.v == 1) ? 'wrap' : 'duplicate';
9291
- this.feGaussianBlur.setAttribute('edgeMode', edgeMode);
9292
- }
9293
- }
9294
-
9295
- function SVGStrokeEffect(elem, filterManager) {
9296
- this.initialized = false;
9297
- this.filterManager = filterManager;
9298
- this.elem = elem;
9299
- this.paths = [];
9300
- }
9301
-
9302
- SVGStrokeEffect.prototype.initialize = function () {
9303
-
9304
- var elemChildren = this.elem.layerElement.children || this.elem.layerElement.childNodes;
9305
- var path, groupPath, i, len;
9306
- if (this.filterManager.effectElements[1].p.v === 1) {
9307
- len = this.elem.maskManager.masksProperties.length;
9308
- i = 0;
9309
- } else {
9310
- i = this.filterManager.effectElements[0].p.v - 1;
9311
- len = i + 1;
9312
- }
9313
- groupPath = createNS('g');
9314
- groupPath.setAttribute('fill', 'none');
9315
- groupPath.setAttribute('stroke-linecap', 'round');
9316
- groupPath.setAttribute('stroke-dashoffset', 1);
9317
- for (i; i < len; i += 1) {
9318
- path = createNS('path');
9319
- groupPath.appendChild(path);
9320
- this.paths.push({
9321
- p: path,
9322
- m: i
9323
- });
9324
- }
9325
- if (this.filterManager.effectElements[10].p.v === 3) {
9326
- var mask = createNS('mask');
9327
- var id = createElementID();
9328
- mask.setAttribute('id', id);
9329
- mask.setAttribute('mask-type', 'alpha');
9330
- mask.appendChild(groupPath);
9331
- this.elem.globalData.defs.appendChild(mask);
9332
- var g = createNS('g');
9333
- g.setAttribute('mask', 'url(' + locationHref + '#' + id + ')');
9334
- while (elemChildren[0]) {
9335
- g.appendChild(elemChildren[0]);
9336
- }
9337
- this.elem.layerElement.appendChild(g);
9338
- this.masker = mask;
9339
- groupPath.setAttribute('stroke', '#fff');
9340
- } else if (this.filterManager.effectElements[10].p.v === 1 || this.filterManager.effectElements[10].p.v === 2) {
9341
- if (this.filterManager.effectElements[10].p.v === 2) {
9342
- elemChildren = this.elem.layerElement.children || this.elem.layerElement.childNodes;
9343
- while (elemChildren.length) {
9344
- this.elem.layerElement.removeChild(elemChildren[0]);
9345
- }
9346
- }
9347
- this.elem.layerElement.appendChild(groupPath);
9348
- this.elem.layerElement.removeAttribute('mask');
9349
- groupPath.setAttribute('stroke', '#fff');
9350
- }
9351
- this.initialized = true;
9352
- this.pathMasker = groupPath;
9353
- };
9354
-
9355
- SVGStrokeEffect.prototype.renderFrame = function (forceRender) {
9356
- if (!this.initialized) {
9357
- this.initialize();
9358
- }
9359
- var i, len = this.paths.length;
9360
- var mask, path;
9361
- for (i = 0; i < len; i += 1) {
9362
- if (this.paths[i].m === -1) {
9363
- continue;
9364
- }
9365
- mask = this.elem.maskManager.viewData[this.paths[i].m];
9366
- path = this.paths[i].p;
9367
- if (forceRender || this.filterManager._mdf || mask.prop._mdf) {
9368
- path.setAttribute('d', mask.lastPath);
9369
- }
9370
- if (forceRender || this.filterManager.effectElements[9].p._mdf || this.filterManager.effectElements[4].p._mdf || this.filterManager.effectElements[7].p._mdf || this.filterManager.effectElements[8].p._mdf || mask.prop._mdf) {
9371
- var dasharrayValue;
9372
- if (this.filterManager.effectElements[7].p.v !== 0 || this.filterManager.effectElements[8].p.v !== 100) {
9373
- var s = Math.min(this.filterManager.effectElements[7].p.v, this.filterManager.effectElements[8].p.v) / 100;
9374
- var e = Math.max(this.filterManager.effectElements[7].p.v, this.filterManager.effectElements[8].p.v) / 100;
9375
- var l = path.getTotalLength();
9376
- dasharrayValue = '0 0 0 ' + l * s + ' ';
9377
- var lineLength = l * (e - s);
9378
- var segment = 1 + this.filterManager.effectElements[4].p.v * 2 * this.filterManager.effectElements[9].p.v / 100;
9379
- var units = Math.floor(lineLength / segment);
9380
- var j;
9381
- for (j = 0; j < units; j += 1) {
9382
- dasharrayValue += '1 ' + this.filterManager.effectElements[4].p.v * 2 * this.filterManager.effectElements[9].p.v / 100 + ' ';
9383
- }
9384
- dasharrayValue += '0 ' + l * 10 + ' 0 0';
9385
- } else {
9386
- dasharrayValue = '1 ' + this.filterManager.effectElements[4].p.v * 2 * this.filterManager.effectElements[9].p.v / 100;
9387
- }
9388
- path.setAttribute('stroke-dasharray', dasharrayValue);
9389
- }
9390
- }
9391
- if (forceRender || this.filterManager.effectElements[4].p._mdf) {
9392
- this.pathMasker.setAttribute('stroke-width', this.filterManager.effectElements[4].p.v * 2);
9393
- }
9394
-
9395
- if (forceRender || this.filterManager.effectElements[6].p._mdf) {
9396
- this.pathMasker.setAttribute('opacity', this.filterManager.effectElements[6].p.v);
9397
- }
9398
- if (this.filterManager.effectElements[10].p.v === 1 || this.filterManager.effectElements[10].p.v === 2) {
9399
- if (forceRender || this.filterManager.effectElements[3].p._mdf) {
9400
- var color = this.filterManager.effectElements[3].p.v;
9401
- this.pathMasker.setAttribute('stroke', 'rgb(' + bm_floor(color[0] * 255) + ',' + bm_floor(color[1] * 255) + ',' + bm_floor(color[2] * 255) + ')');
9402
- }
9403
- }
9404
- };
9405
-
9406
- function SVGTritoneFilter(filter, filterManager) {
9407
- this.filterManager = filterManager;
9408
- var feColorMatrix = createNS('feColorMatrix');
9409
- feColorMatrix.setAttribute('type', 'matrix');
9410
- feColorMatrix.setAttribute('color-interpolation-filters', 'linearRGB');
9411
- feColorMatrix.setAttribute('values', '0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0');
9412
- feColorMatrix.setAttribute('result', 'f1');
9413
- filter.appendChild(feColorMatrix);
9414
- var feComponentTransfer = createNS('feComponentTransfer');
9415
- feComponentTransfer.setAttribute('color-interpolation-filters', 'sRGB');
9416
- filter.appendChild(feComponentTransfer);
9417
- this.matrixFilter = feComponentTransfer;
9418
- var feFuncR = createNS('feFuncR');
9419
- feFuncR.setAttribute('type', 'table');
9420
- feComponentTransfer.appendChild(feFuncR);
9421
- this.feFuncR = feFuncR;
9422
- var feFuncG = createNS('feFuncG');
9423
- feFuncG.setAttribute('type', 'table');
9424
- feComponentTransfer.appendChild(feFuncG);
9425
- this.feFuncG = feFuncG;
9426
- var feFuncB = createNS('feFuncB');
9427
- feFuncB.setAttribute('type', 'table');
9428
- feComponentTransfer.appendChild(feFuncB);
9429
- this.feFuncB = feFuncB;
9430
- }
9431
-
9432
- SVGTritoneFilter.prototype.renderFrame = function (forceRender) {
9433
- if (forceRender || this.filterManager._mdf) {
9434
- var color1 = this.filterManager.effectElements[0].p.v;
9435
- var color2 = this.filterManager.effectElements[1].p.v;
9436
- var color3 = this.filterManager.effectElements[2].p.v;
9437
- var tableR = color3[0] + ' ' + color2[0] + ' ' + color1[0];
9438
- var tableG = color3[1] + ' ' + color2[1] + ' ' + color1[1];
9439
- var tableB = color3[2] + ' ' + color2[2] + ' ' + color1[2];
9440
- this.feFuncR.setAttribute('tableValues', tableR);
9441
- this.feFuncG.setAttribute('tableValues', tableG);
9442
- this.feFuncB.setAttribute('tableValues', tableB);
9443
- //var opacity = this.filterManager.effectElements[2].p.v/100;
9444
- //this.matrixFilter.setAttribute('values',(colorWhite[0]- colorBlack[0])+' 0 0 0 '+ colorBlack[0] +' '+ (colorWhite[1]- colorBlack[1]) +' 0 0 0 '+ colorBlack[1] +' '+ (colorWhite[2]- colorBlack[2]) +' 0 0 0 '+ colorBlack[2] +' 0 0 0 ' + opacity + ' 0');
9445
- }
9446
- };
9447
-
9448
- function SVGProLevelsFilter(filter, filterManager) {
9449
- this.filterManager = filterManager;
9450
- var effectElements = this.filterManager.effectElements;
9451
- var feComponentTransfer = createNS('feComponentTransfer');
9452
- var feFuncR, feFuncG, feFuncB;
9453
-
9454
- if (effectElements[10].p.k || effectElements[10].p.v !== 0 || effectElements[11].p.k || effectElements[11].p.v !== 1 || effectElements[12].p.k || effectElements[12].p.v !== 1 || effectElements[13].p.k || effectElements[13].p.v !== 0 || effectElements[14].p.k || effectElements[14].p.v !== 1) {
9455
- this.feFuncR = this.createFeFunc('feFuncR', feComponentTransfer);
9456
- }
9457
- if (effectElements[17].p.k || effectElements[17].p.v !== 0 || effectElements[18].p.k || effectElements[18].p.v !== 1 || effectElements[19].p.k || effectElements[19].p.v !== 1 || effectElements[20].p.k || effectElements[20].p.v !== 0 || effectElements[21].p.k || effectElements[21].p.v !== 1) {
9458
- this.feFuncG = this.createFeFunc('feFuncG', feComponentTransfer);
9459
- }
9460
- if (effectElements[24].p.k || effectElements[24].p.v !== 0 || effectElements[25].p.k || effectElements[25].p.v !== 1 || effectElements[26].p.k || effectElements[26].p.v !== 1 || effectElements[27].p.k || effectElements[27].p.v !== 0 || effectElements[28].p.k || effectElements[28].p.v !== 1) {
9461
- this.feFuncB = this.createFeFunc('feFuncB', feComponentTransfer);
9462
- }
9463
- if (effectElements[31].p.k || effectElements[31].p.v !== 0 || effectElements[32].p.k || effectElements[32].p.v !== 1 || effectElements[33].p.k || effectElements[33].p.v !== 1 || effectElements[34].p.k || effectElements[34].p.v !== 0 || effectElements[35].p.k || effectElements[35].p.v !== 1) {
9464
- this.feFuncA = this.createFeFunc('feFuncA', feComponentTransfer);
9465
- }
9466
-
9467
- if (this.feFuncR || this.feFuncG || this.feFuncB || this.feFuncA) {
9468
- feComponentTransfer.setAttribute('color-interpolation-filters', 'sRGB');
9469
- filter.appendChild(feComponentTransfer);
9470
- feComponentTransfer = createNS('feComponentTransfer');
9471
- }
9472
-
9473
- if (effectElements[3].p.k || effectElements[3].p.v !== 0 || effectElements[4].p.k || effectElements[4].p.v !== 1 || effectElements[5].p.k || effectElements[5].p.v !== 1 || effectElements[6].p.k || effectElements[6].p.v !== 0 || effectElements[7].p.k || effectElements[7].p.v !== 1) {
9474
-
9475
- feComponentTransfer.setAttribute('color-interpolation-filters', 'sRGB');
9476
- filter.appendChild(feComponentTransfer);
9477
- this.feFuncRComposed = this.createFeFunc('feFuncR', feComponentTransfer);
9478
- this.feFuncGComposed = this.createFeFunc('feFuncG', feComponentTransfer);
9479
- this.feFuncBComposed = this.createFeFunc('feFuncB', feComponentTransfer);
9480
- }
9481
- }
9482
-
9483
- SVGProLevelsFilter.prototype.createFeFunc = function (type, feComponentTransfer) {
9484
- var feFunc = createNS(type);
9485
- feFunc.setAttribute('type', 'table');
9486
- feComponentTransfer.appendChild(feFunc);
9487
- return feFunc;
9488
- };
9489
-
9490
- SVGProLevelsFilter.prototype.getTableValue = function (inputBlack, inputWhite, gamma, outputBlack, outputWhite) {
9491
- var cnt = 0;
9492
- var segments = 256;
9493
- var perc;
9494
- var min = Math.min(inputBlack, inputWhite);
9495
- var max = Math.max(inputBlack, inputWhite);
9496
- var table = Array.call(null, {
9497
- length: segments
9498
- });
9499
- var colorValue;
9500
- var pos = 0;
9501
- var outputDelta = outputWhite - outputBlack;
9502
- var inputDelta = inputWhite - inputBlack;
9503
- while (cnt <= 256) {
9504
- perc = cnt / 256;
9505
- if (perc <= min) {
9506
- colorValue = inputDelta < 0 ? outputWhite : outputBlack;
9507
- } else if (perc >= max) {
9508
- colorValue = inputDelta < 0 ? outputBlack : outputWhite;
9509
- } else {
9510
- colorValue = (outputBlack + outputDelta * Math.pow((perc - inputBlack) / inputDelta, 1 / gamma));
9511
- }
9512
- table[pos++] = colorValue;
9513
- cnt += 256 / (segments - 1);
9514
- }
9515
- return table.join(' ');
9516
- };
9517
-
9518
- SVGProLevelsFilter.prototype.renderFrame = function (forceRender) {
9519
- if (forceRender || this.filterManager._mdf) {
9520
- var val, cnt, perc, bezier;
9521
- var effectElements = this.filterManager.effectElements;
9522
- if (this.feFuncRComposed && (forceRender || effectElements[3].p._mdf || effectElements[4].p._mdf || effectElements[5].p._mdf || effectElements[6].p._mdf || effectElements[7].p._mdf)) {
9523
- val = this.getTableValue(effectElements[3].p.v, effectElements[4].p.v, effectElements[5].p.v, effectElements[6].p.v, effectElements[7].p.v);
9524
- this.feFuncRComposed.setAttribute('tableValues', val);
9525
- this.feFuncGComposed.setAttribute('tableValues', val);
9526
- this.feFuncBComposed.setAttribute('tableValues', val);
9527
- }
9528
-
9529
-
9530
- if (this.feFuncR && (forceRender || effectElements[10].p._mdf || effectElements[11].p._mdf || effectElements[12].p._mdf || effectElements[13].p._mdf || effectElements[14].p._mdf)) {
9531
- val = this.getTableValue(effectElements[10].p.v, effectElements[11].p.v, effectElements[12].p.v, effectElements[13].p.v, effectElements[14].p.v);
9532
- this.feFuncR.setAttribute('tableValues', val);
9533
- }
9534
-
9535
- if (this.feFuncG && (forceRender || effectElements[17].p._mdf || effectElements[18].p._mdf || effectElements[19].p._mdf || effectElements[20].p._mdf || effectElements[21].p._mdf)) {
9536
- val = this.getTableValue(effectElements[17].p.v, effectElements[18].p.v, effectElements[19].p.v, effectElements[20].p.v, effectElements[21].p.v);
9537
- this.feFuncG.setAttribute('tableValues', val);
9538
- }
9539
-
9540
- if (this.feFuncB && (forceRender || effectElements[24].p._mdf || effectElements[25].p._mdf || effectElements[26].p._mdf || effectElements[27].p._mdf || effectElements[28].p._mdf)) {
9541
- val = this.getTableValue(effectElements[24].p.v, effectElements[25].p.v, effectElements[26].p.v, effectElements[27].p.v, effectElements[28].p.v);
9542
- this.feFuncB.setAttribute('tableValues', val);
9543
- }
9544
-
9545
- if (this.feFuncA && (forceRender || effectElements[31].p._mdf || effectElements[32].p._mdf || effectElements[33].p._mdf || effectElements[34].p._mdf || effectElements[35].p._mdf)) {
9546
- val = this.getTableValue(effectElements[31].p.v, effectElements[32].p.v, effectElements[33].p.v, effectElements[34].p.v, effectElements[35].p.v);
9547
- this.feFuncA.setAttribute('tableValues', val);
9548
- }
9549
-
9550
- }
9551
- };
9552
-
9553
- function SVGDropShadowEffect(filter, filterManager) {
9554
- var filterSize = filterManager.container.globalData.renderConfig.filterSize
9555
- filter.setAttribute('x', filterSize.x);
9556
- filter.setAttribute('y', filterSize.y);
9557
- filter.setAttribute('width', filterSize.width);
9558
- filter.setAttribute('height', filterSize.height);
9559
- this.filterManager = filterManager;
9560
-
9561
- var feGaussianBlur = createNS('feGaussianBlur');
9562
- feGaussianBlur.setAttribute('in', 'SourceAlpha');
9563
- feGaussianBlur.setAttribute('result', 'drop_shadow_1');
9564
- feGaussianBlur.setAttribute('stdDeviation', '0');
9565
- this.feGaussianBlur = feGaussianBlur;
9566
- filter.appendChild(feGaussianBlur);
9567
-
9568
- var feOffset = createNS('feOffset');
9569
- feOffset.setAttribute('dx', '25');
9570
- feOffset.setAttribute('dy', '0');
9571
- feOffset.setAttribute('in', 'drop_shadow_1');
9572
- feOffset.setAttribute('result', 'drop_shadow_2');
9573
- this.feOffset = feOffset;
9574
- filter.appendChild(feOffset);
9575
- var feFlood = createNS('feFlood');
9576
- feFlood.setAttribute('flood-color', '#00ff00');
9577
- feFlood.setAttribute('flood-opacity', '1');
9578
- feFlood.setAttribute('result', 'drop_shadow_3');
9579
- this.feFlood = feFlood;
9580
- filter.appendChild(feFlood);
9581
-
9582
- var feComposite = createNS('feComposite');
9583
- feComposite.setAttribute('in', 'drop_shadow_3');
9584
- feComposite.setAttribute('in2', 'drop_shadow_2');
9585
- feComposite.setAttribute('operator', 'in');
9586
- feComposite.setAttribute('result', 'drop_shadow_4');
9587
- filter.appendChild(feComposite);
9588
-
9589
-
9590
- var feMerge = createNS('feMerge');
9591
- filter.appendChild(feMerge);
9592
- var feMergeNode;
9593
- feMergeNode = createNS('feMergeNode');
9594
- feMerge.appendChild(feMergeNode);
9595
- feMergeNode = createNS('feMergeNode');
9596
- feMergeNode.setAttribute('in', 'SourceGraphic');
9597
- this.feMergeNode = feMergeNode;
9598
- this.feMerge = feMerge;
9599
- this.originalNodeAdded = false;
9600
- feMerge.appendChild(feMergeNode);
9601
- }
9602
-
9603
- SVGDropShadowEffect.prototype.renderFrame = function (forceRender) {
9604
- if (forceRender || this.filterManager._mdf) {
9605
- if (forceRender || this.filterManager.effectElements[4].p._mdf) {
9606
- this.feGaussianBlur.setAttribute('stdDeviation', this.filterManager.effectElements[4].p.v / 4);
9607
- }
9608
- if (forceRender || this.filterManager.effectElements[0].p._mdf) {
9609
- var col = this.filterManager.effectElements[0].p.v;
9610
- this.feFlood.setAttribute('flood-color', rgbToHex(Math.round(col[0] * 255), Math.round(col[1] * 255), Math.round(col[2] * 255)));
9611
- }
9612
- if (forceRender || this.filterManager.effectElements[1].p._mdf) {
9613
- this.feFlood.setAttribute('flood-opacity', this.filterManager.effectElements[1].p.v / 255);
9614
- }
9615
- if (forceRender || this.filterManager.effectElements[2].p._mdf || this.filterManager.effectElements[3].p._mdf) {
9616
- var distance = this.filterManager.effectElements[3].p.v;
9617
- var angle = (this.filterManager.effectElements[2].p.v - 90) * degToRads;
9618
- var x = distance * Math.cos(angle);
9619
- var y = distance * Math.sin(angle);
9620
- this.feOffset.setAttribute('dx', x);
9621
- this.feOffset.setAttribute('dy', y);
9622
- }
9623
- /*if(forceRender || this.filterManager.effectElements[5].p._mdf){
9624
- if(this.filterManager.effectElements[5].p.v === 1 && this.originalNodeAdded) {
9625
- this.feMerge.removeChild(this.feMergeNode);
9626
- this.originalNodeAdded = false;
9627
- } else if(this.filterManager.effectElements[5].p.v === 0 && !this.originalNodeAdded) {
9628
- this.feMerge.appendChild(this.feMergeNode);
9629
- this.originalNodeAdded = true;
9630
- }
9631
- }*/
9632
- }
9633
- };
9634
- var _svgMatteSymbols = [];
9635
-
9636
- function SVGMatte3Effect(filterElem, filterManager, elem) {
9637
- this.initialized = false;
9638
- this.filterManager = filterManager;
9639
- this.filterElem = filterElem;
9640
- this.elem = elem;
9641
- elem.matteElement = createNS('g');
9642
- elem.matteElement.appendChild(elem.layerElement);
9643
- elem.matteElement.appendChild(elem.transformedElement);
9644
- elem.baseElement = elem.matteElement;
9645
- }
9646
-
9647
- SVGMatte3Effect.prototype.findSymbol = function (mask) {
9648
- var i = 0,
9649
- len = _svgMatteSymbols.length;
9650
- while (i < len) {
9651
- if (_svgMatteSymbols[i] === mask) {
9652
- return _svgMatteSymbols[i];
9653
- }
9654
- i += 1;
9655
- }
9656
- return null;
9657
- };
9658
-
9659
- SVGMatte3Effect.prototype.replaceInParent = function (mask, symbolId) {
9660
- var parentNode = mask.layerElement.parentNode;
9661
- if (!parentNode) {
9662
- return;
9663
- }
9664
- var children = parentNode.children;
9665
- var i = 0,
9666
- len = children.length;
9667
- while (i < len) {
9668
- if (children[i] === mask.layerElement) {
9669
- break;
9670
- }
9671
- i += 1;
9672
- }
9673
- var nextChild;
9674
- if (i <= len - 2) {
9675
- nextChild = children[i + 1];
9676
- }
9677
- var useElem = createNS('use');
9678
- useElem.setAttribute('href', '#' + symbolId);
9679
- if (nextChild) {
9680
- parentNode.insertBefore(useElem, nextChild);
9681
- } else {
9682
- parentNode.appendChild(useElem);
9683
- }
9684
- };
9685
-
9686
- SVGMatte3Effect.prototype.setElementAsMask = function (elem, mask) {
9687
- if (!this.findSymbol(mask)) {
9688
- var symbolId = createElementID();
9689
- var masker = createNS('mask');
9690
- masker.setAttribute('id', mask.layerId);
9691
- masker.setAttribute('mask-type', 'alpha');
9692
- _svgMatteSymbols.push(mask);
9693
- var defs = elem.globalData.defs;
9694
- defs.appendChild(masker);
9695
- var symbol = createNS('symbol');
9696
- symbol.setAttribute('id', symbolId);
9697
- this.replaceInParent(mask, symbolId);
9698
- symbol.appendChild(mask.layerElement);
9699
- defs.appendChild(symbol);
9700
- var useElem = createNS('use');
9701
- useElem.setAttribute('href', '#' + symbolId);
9702
- masker.appendChild(useElem);
9703
- mask.data.hd = false;
9704
- mask.show();
9705
- }
9706
- elem.setMatte(mask.layerId);
9707
- };
9708
-
9709
- SVGMatte3Effect.prototype.initialize = function () {
9710
- var ind = this.filterManager.effectElements[0].p.v;
9711
- var elements = this.elem.comp.elements;
9712
- var i = 0,
9713
- len = elements.length;
9714
- while (i < len) {
9715
- if (elements[i] && elements[i].data.ind === ind) {
9716
- this.setElementAsMask(this.elem, elements[i]);
9717
- }
9718
- i += 1;
9719
- }
9720
- this.initialized = true;
9721
- };
9722
-
9723
- SVGMatte3Effect.prototype.renderFrame = function () {
9724
- if (!this.initialized) {
9725
- this.initialize();
9726
- }
9727
- };
9728
-
9729
- function SVGEffects(elem) {
9730
- var i, len = elem.data.ef ? elem.data.ef.length : 0;
9731
- var filId = createElementID();
9732
- var fil = filtersFactory.createFilter(filId);
9733
- var count = 0;
9734
- this.filters = [];
9735
- var filterManager;
9736
- for (i = 0; i < len; i += 1) {
9737
- filterManager = null;
9738
- if (elem.data.ef[i].ty === 20) {
9739
- count += 1;
9740
- filterManager = new SVGTintFilter(fil, elem.effectsManager.effectElements[i]);
9741
- } else if (elem.data.ef[i].ty === 21) {
9742
- count += 1;
9743
- filterManager = new SVGFillFilter(fil, elem.effectsManager.effectElements[i]);
9744
- } else if (elem.data.ef[i].ty === 22) {
9745
- filterManager = new SVGStrokeEffect(elem, elem.effectsManager.effectElements[i]);
9746
- } else if (elem.data.ef[i].ty === 23) {
9747
- count += 1;
9748
- filterManager = new SVGTritoneFilter(fil, elem.effectsManager.effectElements[i]);
9749
- } else if (elem.data.ef[i].ty === 24) {
9750
- count += 1;
9751
- filterManager = new SVGProLevelsFilter(fil, elem.effectsManager.effectElements[i]);
9752
- } else if (elem.data.ef[i].ty === 25) {
9753
- count += 1;
9754
- filterManager = new SVGDropShadowEffect(fil, elem.effectsManager.effectElements[i]);
9755
- } else if (elem.data.ef[i].ty === 28) {
9756
- //count += 1;
9757
- filterManager = new SVGMatte3Effect(fil, elem.effectsManager.effectElements[i], elem);
9758
- } else if (elem.data.ef[i].ty === 29) {
9759
- count += 1;
9760
- filterManager = new SVGGaussianBlurEffect(fil, elem.effectsManager.effectElements[i]);
9761
- }
9762
- if (filterManager) {
9763
- this.filters.push(filterManager);
9764
- }
9765
- }
9766
- if (count) {
9767
- elem.globalData.defs.appendChild(fil);
9768
- elem.layerElement.setAttribute('filter', 'url(' + locationHref + '#' + filId + ')');
9769
- }
9770
- if (this.filters.length) {
9771
- elem.addRenderableComponent(this);
9772
- }
9773
- }
9774
-
9775
- SVGEffects.prototype.renderFrame = function (_isFirstFrame) {
9776
- var i, len = this.filters.length;
9777
- for (i = 0; i < len; i += 1) {
9778
- this.filters[i].renderFrame(_isFirstFrame);
9779
- }
9780
- };
9781
-
9782
- function CVContextData() {
9783
- this.saved = [];
9784
- this.cArrPos = 0;
9785
- this.cTr = new Matrix();
9786
- this.cO = 1;
9787
- var i, len = 15;
9788
- this.savedOp = createTypedArray('float32', len);
9789
- for (i = 0; i < len; i += 1) {
9790
- this.saved[i] = createTypedArray('float32', 16);
9791
- }
9792
- this._length = len;
9793
- }
9794
-
9795
- CVContextData.prototype.duplicate = function () {
9796
- var newLength = this._length * 2;
9797
- var currentSavedOp = this.savedOp;
9798
- this.savedOp = createTypedArray('float32', newLength);
9799
- this.savedOp.set(currentSavedOp);
9800
- var i = 0;
9801
- for (i = this._length; i < newLength; i += 1) {
9802
- this.saved[i] = createTypedArray('float32', 16);
9803
- }
9804
- this._length = newLength;
9805
- };
9806
-
9807
- CVContextData.prototype.reset = function () {
9808
- this.cArrPos = 0;
9809
- this.cTr.reset();
9810
- this.cO = 1;
9811
- };
9812
-
9813
- function CVBaseElement() { }
9814
-
9815
- CVBaseElement.prototype = {
9816
- createElements: function () { },
9817
- initRendererElement: function () { },
9818
- createContainerElements: function () {
9819
- this.canvasContext = this.globalData.canvasContext;
9820
- this.renderableEffectsManager = new CVEffects(this);
9821
- },
9822
- createContent: function () { },
9823
- setBlendMode: function () {
9824
- var globalData = this.globalData;
9825
- if (globalData.blendMode !== this.data.bm) {
9826
- globalData.blendMode = this.data.bm;
9827
- var blendModeValue = getBlendMode(this.data.bm);
9828
- globalData.canvasContext.globalCompositeOperation = blendModeValue;
9829
- }
9830
- },
9831
- createRenderableComponents: function () {
9832
- this.maskManager = new CVMaskElement(this.data, this);
9833
- },
9834
- hideElement: function () {
9835
- if (!this.hidden && (!this.isInRange || this.isTransparent)) {
9836
- this.hidden = true;
9837
- }
9838
- },
9839
- showElement: function () {
9840
- if (this.isInRange && !this.isTransparent) {
9841
- this.hidden = false;
9842
- this._isFirstFrame = true;
9843
- this.maskManager._isFirstFrame = true;
9844
- }
9845
- },
9846
- renderFrame: function () {
9847
- if (this.hidden || this.data.hd) {
9848
- return;
9849
- }
9850
- this.renderTransform();
9851
- this.renderRenderable();
9852
- this.setBlendMode();
9853
- var forceRealStack = this.data.ty === 0;
9854
- this.globalData.renderer.save(forceRealStack);
9855
- this.globalData.renderer.ctxTransform(this.finalTransform.mat.props);
9856
- this.globalData.renderer.ctxOpacity(this.finalTransform.mProp.o.v);
9857
- this.renderInnerContent();
9858
- this.globalData.renderer.restore(forceRealStack);
9859
- if (this.maskManager.hasMasks) {
9860
- this.globalData.renderer.restore(true);
9861
- }
9862
- if (this._isFirstFrame) {
9863
- this._isFirstFrame = false;
9864
- }
9865
- },
9866
- destroy: function () {
9867
- this.canvasContext = null;
9868
- this.data = null;
9869
- this.globalData = null;
9870
- this.maskManager.destroy();
9871
- },
9872
- mHelper: new Matrix()
9873
- };
9874
- CVBaseElement.prototype.hide = CVBaseElement.prototype.hideElement;
9875
- CVBaseElement.prototype.show = CVBaseElement.prototype.showElement;
9876
-
9877
- function CVImageElement(data, globalData, comp) {
9878
- this.assetData = globalData.getAssetData(data.refId);
9879
- this.img = globalData.imageLoader.getImage(this.assetData);
9880
- this.initElement(data, globalData, comp);
9881
- }
9882
- extendPrototype([BaseElement, TransformElement, CVBaseElement, HierarchyElement, FrameElement, RenderableElement], CVImageElement);
9883
-
9884
- CVImageElement.prototype.initElement = SVGShapeElement.prototype.initElement;
9885
- CVImageElement.prototype.prepareFrame = IImageElement.prototype.prepareFrame;
9886
-
9887
- CVImageElement.prototype.createContent = function () {
9888
-
9889
- if (this.img.width && (this.assetData.w !== this.img.width || this.assetData.h !== this.img.height)) {
9890
- var canvas = createTag('canvas');
9891
- canvas.width = this.assetData.w;
9892
- canvas.height = this.assetData.h;
9893
- var ctx = canvas.getContext('2d');
9894
-
9895
- var imgW = this.img.width;
9896
- var imgH = this.img.height;
9897
- var imgRel = imgW / imgH;
9898
- var canvasRel = this.assetData.w / this.assetData.h;
9899
- var widthCrop, heightCrop;
9900
- var par = this.assetData.pr || this.globalData.renderConfig.imagePreserveAspectRatio;
9901
- if ((imgRel > canvasRel && par === 'xMidYMid slice') || (imgRel < canvasRel && par !== 'xMidYMid slice')) {
9902
- heightCrop = imgH;
9903
- widthCrop = heightCrop * canvasRel;
9904
- } else {
9905
- widthCrop = imgW;
9906
- heightCrop = widthCrop / canvasRel;
9907
- }
9908
- ctx.drawImage(this.img, (imgW - widthCrop) / 2, (imgH - heightCrop) / 2, widthCrop, heightCrop, 0, 0, this.assetData.w, this.assetData.h);
9909
- this.img = canvas;
9910
- }
9911
-
9912
- };
9913
-
9914
- CVImageElement.prototype.renderInnerContent = function (parentMatrix) {
9915
- this.canvasContext.drawImage(this.img, 0, 0);
9916
- };
9917
-
9918
- CVImageElement.prototype.destroy = function () {
9919
- this.img = null;
9920
- };
9921
-
9922
- function CVCompElement(data, globalData, comp) {
9923
- this.completeLayers = false;
9924
- this.layers = data.layers;
9925
- this.pendingElements = [];
9926
- this.elements = createSizedArray(this.layers.length);
9927
- this.initElement(data, globalData, comp);
9928
- this.tm = data.tm ? PropertyFactory.getProp(this, data.tm, 0, globalData.frameRate, this) : {
9929
- _placeholder: true
9930
- };
9931
- }
9932
-
9933
- extendPrototype([CanvasRenderer, ICompElement, CVBaseElement], CVCompElement);
9934
-
9935
- CVCompElement.prototype.renderInnerContent = function () {
9936
- var ctx = this.canvasContext;
9937
- ctx.beginPath();
9938
- ctx.moveTo(0, 0);
9939
- ctx.lineTo(this.data.w, 0);
9940
- ctx.lineTo(this.data.w, this.data.h);
9941
- ctx.lineTo(0, this.data.h);
9942
- ctx.lineTo(0, 0);
9943
- ctx.clip();
9944
- var i, len = this.layers.length;
9945
- for (i = len - 1; i >= 0; i -= 1) {
9946
- if (this.completeLayers || this.elements[i]) {
9947
- this.elements[i].renderFrame();
9948
- }
9949
- }
9950
- };
9951
-
9952
- CVCompElement.prototype.destroy = function () {
9953
- var i, len = this.layers.length;
9954
- for (i = len - 1; i >= 0; i -= 1) {
9955
- if (this.elements[i]) {
9956
- this.elements[i].destroy();
9957
- }
9958
- }
9959
- this.layers = null;
9960
- this.elements = null;
9961
- };
9962
-
9963
- function CVMaskElement(data, element) {
9964
- this.data = data;
9965
- this.element = element;
9966
- this.masksProperties = this.data.masksProperties || [];
9967
- this.viewData = createSizedArray(this.masksProperties.length);
9968
- var i, len = this.masksProperties.length,
9969
- hasMasks = false;
9970
- for (i = 0; i < len; i++) {
9971
- if (this.masksProperties[i].mode !== 'n') {
9972
- hasMasks = true;
9973
- }
9974
- this.viewData[i] = ShapePropertyFactory.getShapeProp(this.element, this.masksProperties[i], 3);
9975
- }
9976
- this.hasMasks = hasMasks;
9977
- if (hasMasks) {
9978
- this.element.addRenderableComponent(this);
9979
- }
9980
- }
9981
-
9982
- CVMaskElement.prototype.renderFrame = function () {
9983
- if (!this.hasMasks) {
9984
- return;
9985
- }
9986
- var transform = this.element.finalTransform.mat;
9987
- var ctx = this.element.canvasContext;
9988
- var i, len = this.masksProperties.length;
9989
- var pt, pts, data;
9990
- ctx.beginPath();
9991
- for (i = 0; i < len; i++) {
9992
- if (this.masksProperties[i].mode !== 'n') {
9993
- if (this.masksProperties[i].inv) {
9994
- ctx.moveTo(0, 0);
9995
- ctx.lineTo(this.element.globalData.compSize.w, 0);
9996
- ctx.lineTo(this.element.globalData.compSize.w, this.element.globalData.compSize.h);
9997
- ctx.lineTo(0, this.element.globalData.compSize.h);
9998
- ctx.lineTo(0, 0);
9999
- }
10000
- data = this.viewData[i].v;
10001
- pt = transform.applyToPointArray(data.v[0][0], data.v[0][1], 0);
10002
- ctx.moveTo(pt[0], pt[1]);
10003
- var j, jLen = data._length;
10004
- for (j = 1; j < jLen; j++) {
10005
- pts = transform.applyToTriplePoints(data.o[j - 1], data.i[j], data.v[j]);
10006
- ctx.bezierCurveTo(pts[0], pts[1], pts[2], pts[3], pts[4], pts[5]);
10007
- }
10008
- pts = transform.applyToTriplePoints(data.o[j - 1], data.i[0], data.v[0]);
10009
- ctx.bezierCurveTo(pts[0], pts[1], pts[2], pts[3], pts[4], pts[5]);
10010
- }
10011
- }
10012
- this.element.globalData.renderer.save(true);
10013
- ctx.clip();
10014
- };
10015
-
10016
- CVMaskElement.prototype.getMaskProperty = MaskElement.prototype.getMaskProperty;
10017
-
10018
- CVMaskElement.prototype.destroy = function () {
10019
- this.element = null;
10020
- };
10021
-
10022
- function CVShapeElement(data, globalData, comp) {
10023
- this.shapes = [];
10024
- this.shapesData = data.shapes;
10025
- this.stylesList = [];
10026
- this.itemsData = [];
10027
- this.prevViewData = [];
10028
- this.shapeModifiers = [];
10029
- this.processedElements = [];
10030
- this.transformsManager = new ShapeTransformManager();
10031
- this.initElement(data, globalData, comp);
10032
- }
10033
-
10034
- extendPrototype([BaseElement, TransformElement, CVBaseElement, IShapeElement, HierarchyElement, FrameElement, RenderableElement], CVShapeElement);
10035
-
10036
- CVShapeElement.prototype.initElement = RenderableDOMElement.prototype.initElement;
10037
-
10038
- CVShapeElement.prototype.transformHelper = {
10039
- opacity: 1,
10040
- _opMdf: false
10041
- };
10042
-
10043
- CVShapeElement.prototype.dashResetter = [];
10044
-
10045
- CVShapeElement.prototype.createContent = function () {
10046
- this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, true, []);
10047
- };
10048
-
10049
- CVShapeElement.prototype.createStyleElement = function (data, transforms) {
10050
- var styleElem = {
10051
- data: data,
10052
- type: data.ty,
10053
- preTransforms: this.transformsManager.addTransformSequence(transforms),
10054
- transforms: [],
10055
- elements: [],
10056
- closed: data.hd === true
10057
- };
10058
- var elementData = {};
10059
- if (data.ty == 'fl' || data.ty == 'st') {
10060
- elementData.c = PropertyFactory.getProp(this, data.c, 1, 255, this);
10061
- if (!elementData.c.k) {
10062
- styleElem.co = 'rgb(' + bm_floor(elementData.c.v[0]) + ',' + bm_floor(elementData.c.v[1]) + ',' + bm_floor(elementData.c.v[2]) + ')';
10063
- }
10064
- } else if (data.ty === 'gf' || data.ty === 'gs') {
10065
- elementData.s = PropertyFactory.getProp(this, data.s, 1, null, this);
10066
- elementData.e = PropertyFactory.getProp(this, data.e, 1, null, this);
10067
- elementData.h = PropertyFactory.getProp(this, data.h || {
10068
- k: 0
10069
- }, 0, 0.01, this);
10070
- elementData.a = PropertyFactory.getProp(this, data.a || {
10071
- k: 0
10072
- }, 0, degToRads, this);
10073
- elementData.g = new GradientProperty(this, data.g, this);
10074
- }
10075
- elementData.o = PropertyFactory.getProp(this, data.o, 0, 0.01, this);
10076
- if (data.ty == 'st' || data.ty == 'gs') {
10077
- styleElem.lc = this.lcEnum[data.lc] || 'round';
10078
- styleElem.lj = this.ljEnum[data.lj] || 'round';
10079
- if (data.lj == 1) {
10080
- styleElem.ml = data.ml;
10081
- }
10082
- elementData.w = PropertyFactory.getProp(this, data.w, 0, null, this);
10083
- if (!elementData.w.k) {
10084
- styleElem.wi = elementData.w.v;
10085
- }
10086
- if (data.d) {
10087
- var d = new DashProperty(this, data.d, 'canvas', this);
10088
- elementData.d = d;
10089
- if (!elementData.d.k) {
10090
- styleElem.da = elementData.d.dashArray;
10091
- styleElem.do = elementData.d.dashoffset[0];
10092
- }
10093
- }
10094
- } else {
10095
- styleElem.r = data.r === 2 ? 'evenodd' : 'nonzero';
10096
- }
10097
- this.stylesList.push(styleElem);
10098
- elementData.style = styleElem;
10099
- return elementData;
10100
- };
10101
-
10102
- CVShapeElement.prototype.createGroupElement = function (data) {
10103
- var elementData = {
10104
- it: [],
10105
- prevViewData: []
10106
- };
10107
- return elementData;
10108
- };
10109
-
10110
- CVShapeElement.prototype.createTransformElement = function (data) {
10111
- var elementData = {
10112
- transform: {
10113
- opacity: 1,
10114
- _opMdf: false,
10115
- key: this.transformsManager.getNewKey(),
10116
- op: PropertyFactory.getProp(this, data.o, 0, 0.01, this),
10117
- mProps: TransformPropertyFactory.getTransformProperty(this, data, this)
10118
- }
10119
- };
10120
- return elementData;
10121
- };
10122
-
10123
- CVShapeElement.prototype.createShapeElement = function (data) {
10124
- var elementData = new CVShapeData(this, data, this.stylesList, this.transformsManager);
10125
-
10126
- this.shapes.push(elementData);
10127
- this.addShapeToModifiers(elementData);
10128
- return elementData;
10129
- };
10130
-
10131
- CVShapeElement.prototype.reloadShapes = function () {
10132
- this._isFirstFrame = true;
10133
- var i, len = this.itemsData.length;
10134
- for (i = 0; i < len; i += 1) {
10135
- this.prevViewData[i] = this.itemsData[i];
10136
- }
10137
- this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, true, []);
10138
- len = this.dynamicProperties.length;
10139
- for (i = 0; i < len; i += 1) {
10140
- this.dynamicProperties[i].getValue();
10141
- }
10142
- this.renderModifiers();
10143
- this.transformsManager.processSequences(this._isFirstFrame);
10144
- };
10145
-
10146
- CVShapeElement.prototype.addTransformToStyleList = function (transform) {
10147
- var i, len = this.stylesList.length;
10148
- for (i = 0; i < len; i += 1) {
10149
- if (!this.stylesList[i].closed) {
10150
- this.stylesList[i].transforms.push(transform);
10151
- }
10152
- }
10153
- }
10154
-
10155
- CVShapeElement.prototype.removeTransformFromStyleList = function () {
10156
- var i, len = this.stylesList.length;
10157
- for (i = 0; i < len; i += 1) {
10158
- if (!this.stylesList[i].closed) {
10159
- this.stylesList[i].transforms.pop();
10160
- }
10161
- }
10162
- }
10163
-
10164
- CVShapeElement.prototype.closeStyles = function (styles) {
10165
- var i, len = styles.length,
10166
- j, jLen;
10167
- for (i = 0; i < len; i += 1) {
10168
- styles[i].closed = true;
10169
- }
10170
- }
10171
-
10172
- CVShapeElement.prototype.searchShapes = function (arr, itemsData, prevViewData, shouldRender, transforms) {
10173
- var i, len = arr.length - 1;
10174
- var j, jLen;
10175
- var ownStyles = [],
10176
- ownModifiers = [],
10177
- processedPos, modifier, currentTransform;
10178
- var ownTransforms = [].concat(transforms);
10179
- for (i = len; i >= 0; i -= 1) {
10180
- processedPos = this.searchProcessedElement(arr[i]);
10181
- if (!processedPos) {
10182
- arr[i]._shouldRender = shouldRender;
10183
- } else {
10184
- itemsData[i] = prevViewData[processedPos - 1];
10185
- }
10186
- if (arr[i].ty == 'fl' || arr[i].ty == 'st' || arr[i].ty == 'gf' || arr[i].ty == 'gs') {
10187
- if (!processedPos) {
10188
- itemsData[i] = this.createStyleElement(arr[i], ownTransforms);
10189
- } else {
10190
- itemsData[i].style.closed = false;
10191
- }
10192
-
10193
- ownStyles.push(itemsData[i].style);
10194
- } else if (arr[i].ty == 'gr') {
10195
- if (!processedPos) {
10196
- itemsData[i] = this.createGroupElement(arr[i]);
10197
- } else {
10198
- jLen = itemsData[i].it.length;
10199
- for (j = 0; j < jLen; j += 1) {
10200
- itemsData[i].prevViewData[j] = itemsData[i].it[j];
10201
- }
10202
- }
10203
- this.searchShapes(arr[i].it, itemsData[i].it, itemsData[i].prevViewData, shouldRender, ownTransforms);
10204
- } else if (arr[i].ty == 'tr') {
10205
- if (!processedPos) {
10206
- currentTransform = this.createTransformElement(arr[i]);
10207
- itemsData[i] = currentTransform;
10208
- }
10209
- ownTransforms.push(itemsData[i]);
10210
- this.addTransformToStyleList(itemsData[i]);
10211
- } else if (arr[i].ty == 'sh' || arr[i].ty == 'rc' || arr[i].ty == 'el' || arr[i].ty == 'sr') {
10212
- if (!processedPos) {
10213
- itemsData[i] = this.createShapeElement(arr[i]);
10214
- }
10215
-
10216
- } else if (arr[i].ty == 'tm' || arr[i].ty == 'rd') {
10217
- if (!processedPos) {
10218
- modifier = ShapeModifiers.getModifier(arr[i].ty);
10219
- modifier.init(this, arr[i]);
10220
- itemsData[i] = modifier;
10221
- this.shapeModifiers.push(modifier);
10222
- } else {
10223
- modifier = itemsData[i];
10224
- modifier.closed = false;
10225
- }
10226
- ownModifiers.push(modifier);
10227
- } else if (arr[i].ty == 'rp') {
10228
- if (!processedPos) {
10229
- modifier = ShapeModifiers.getModifier(arr[i].ty);
10230
- itemsData[i] = modifier;
10231
- modifier.init(this, arr, i, itemsData);
10232
- this.shapeModifiers.push(modifier);
10233
- shouldRender = false;
10234
- } else {
10235
- modifier = itemsData[i];
10236
- modifier.closed = true;
10237
- }
10238
- ownModifiers.push(modifier);
10239
- }
10240
- this.addProcessedElement(arr[i], i + 1);
10241
- }
10242
- this.removeTransformFromStyleList();
10243
- this.closeStyles(ownStyles);
10244
- len = ownModifiers.length;
10245
- for (i = 0; i < len; i += 1) {
10246
- ownModifiers[i].closed = true;
10247
- }
10248
- };
10249
-
10250
- CVShapeElement.prototype.renderInnerContent = function () {
10251
- this.transformHelper.opacity = 1;
10252
- this.transformHelper._opMdf = false;
10253
- this.renderModifiers();
10254
- this.transformsManager.processSequences(this._isFirstFrame);
10255
- this.renderShape(this.transformHelper, this.shapesData, this.itemsData, true);
10256
- };
10257
-
10258
- CVShapeElement.prototype.renderShapeTransform = function (parentTransform, groupTransform) {
10259
- var props, groupMatrix;
10260
- if (parentTransform._opMdf || groupTransform.op._mdf || this._isFirstFrame) {
10261
- groupTransform.opacity = parentTransform.opacity;
10262
- groupTransform.opacity *= groupTransform.op.v;
10263
- groupTransform._opMdf = true;
10264
- }
10265
- };
10266
-
10267
- CVShapeElement.prototype.drawLayer = function () {
10268
- var i, len = this.stylesList.length;
10269
- var j, jLen, k, kLen, elems, nodes, renderer = this.globalData.renderer,
10270
- ctx = this.globalData.canvasContext,
10271
- type, currentStyle;
10272
- for (i = 0; i < len; i += 1) {
10273
- currentStyle = this.stylesList[i];
10274
- type = currentStyle.type;
10275
-
10276
- //Skipping style when
10277
- //Stroke width equals 0
10278
- //style should not be rendered (extra unused repeaters)
10279
- //current opacity equals 0
10280
- //global opacity equals 0
10281
- if (((type === 'st' || type === 'gs') && currentStyle.wi === 0) || !currentStyle.data._shouldRender || currentStyle.coOp === 0 || this.globalData.currentGlobalAlpha === 0) {
10282
- continue;
10283
- }
10284
- renderer.save();
10285
- elems = currentStyle.elements;
10286
- if (type === 'st' || type === 'gs') {
10287
- ctx.strokeStyle = type === 'st' ? currentStyle.co : currentStyle.grd;
10288
- ctx.lineWidth = currentStyle.wi;
10289
- ctx.lineCap = currentStyle.lc;
10290
- ctx.lineJoin = currentStyle.lj;
10291
- ctx.miterLimit = currentStyle.ml || 0;
10292
- } else {
10293
- ctx.fillStyle = type === 'fl' ? currentStyle.co : currentStyle.grd;
10294
- }
10295
- renderer.ctxOpacity(currentStyle.coOp);
10296
- if (type !== 'st' && type !== 'gs') {
10297
- ctx.beginPath();
10298
- }
10299
- renderer.ctxTransform(currentStyle.preTransforms.finalTransform.props);
10300
- jLen = elems.length;
10301
- for (j = 0; j < jLen; j += 1) {
10302
- if (type === 'st' || type === 'gs') {
10303
- ctx.beginPath();
10304
- if (currentStyle.da) {
10305
- ctx.setLineDash(currentStyle.da);
10306
- ctx.lineDashOffset = currentStyle.do;
10307
- }
10308
- }
10309
- nodes = elems[j].trNodes;
10310
- kLen = nodes.length;
10311
-
10312
- for (k = 0; k < kLen; k += 1) {
10313
- if (nodes[k].t == 'm') {
10314
- ctx.moveTo(nodes[k].p[0], nodes[k].p[1]);
10315
- } else if (nodes[k].t == 'c') {
10316
- 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]);
10317
- } else {
10318
- ctx.closePath();
10319
- }
10320
- }
10321
- if (type === 'st' || type === 'gs') {
10322
- ctx.stroke();
10323
- if (currentStyle.da) {
10324
- ctx.setLineDash(this.dashResetter);
10325
- }
10326
- }
10327
- }
10328
- if (type !== 'st' && type !== 'gs') {
10329
- ctx.fill(currentStyle.r);
10330
- }
10331
- renderer.restore();
10332
- }
10333
- };
10334
-
10335
- CVShapeElement.prototype.renderShape = function (parentTransform, items, data, isMain) {
10336
- var i, len = items.length - 1;
10337
- var groupTransform;
10338
- groupTransform = parentTransform;
10339
- for (i = len; i >= 0; i -= 1) {
10340
- if (items[i].ty == 'tr') {
10341
- groupTransform = data[i].transform;
10342
- this.renderShapeTransform(parentTransform, groupTransform);
10343
- } else if (items[i].ty == 'sh' || items[i].ty == 'el' || items[i].ty == 'rc' || items[i].ty == 'sr') {
10344
- this.renderPath(items[i], data[i]);
10345
- } else if (items[i].ty == 'fl') {
10346
- this.renderFill(items[i], data[i], groupTransform);
10347
- } else if (items[i].ty == 'st') {
10348
- this.renderStroke(items[i], data[i], groupTransform);
10349
- } else if (items[i].ty == 'gf' || items[i].ty == 'gs') {
10350
- this.renderGradientFill(items[i], data[i], groupTransform);
10351
- } else if (items[i].ty == 'gr') {
10352
- this.renderShape(groupTransform, items[i].it, data[i].it);
10353
- } else if (items[i].ty == 'tm') {
10354
- //
10355
- }
10356
- }
10357
- if (isMain) {
10358
- this.drawLayer();
10359
- }
10360
-
10361
- };
10362
-
10363
- CVShapeElement.prototype.renderStyledShape = function (styledShape, shape) {
10364
- if (this._isFirstFrame || shape._mdf || styledShape.transforms._mdf) {
10365
- var shapeNodes = styledShape.trNodes;
10366
- var paths = shape.paths;
10367
- var i, len, j, jLen = paths._length;
10368
- shapeNodes.length = 0;
10369
- var groupTransformMat = styledShape.transforms.finalTransform;
10370
- for (j = 0; j < jLen; j += 1) {
10371
- var pathNodes = paths.shapes[j];
10372
- if (pathNodes && pathNodes.v) {
10373
- len = pathNodes._length;
10374
- for (i = 1; i < len; i += 1) {
10375
- if (i === 1) {
10376
- shapeNodes.push({
10377
- t: 'm',
10378
- p: groupTransformMat.applyToPointArray(pathNodes.v[0][0], pathNodes.v[0][1], 0)
10379
- });
10380
- }
10381
- shapeNodes.push({
10382
- t: 'c',
10383
- pts: groupTransformMat.applyToTriplePoints(pathNodes.o[i - 1], pathNodes.i[i], pathNodes.v[i])
10384
- });
10385
- }
10386
- if (len === 1) {
10387
- shapeNodes.push({
10388
- t: 'm',
10389
- p: groupTransformMat.applyToPointArray(pathNodes.v[0][0], pathNodes.v[0][1], 0)
10390
- });
10391
- }
10392
- if (pathNodes.c && len) {
10393
- shapeNodes.push({
10394
- t: 'c',
10395
- pts: groupTransformMat.applyToTriplePoints(pathNodes.o[i - 1], pathNodes.i[0], pathNodes.v[0])
10396
- });
10397
- shapeNodes.push({
10398
- t: 'z'
10399
- });
10400
- }
10401
- }
10402
- }
10403
- styledShape.trNodes = shapeNodes;
10404
- }
10405
- }
10406
-
10407
- CVShapeElement.prototype.renderPath = function (pathData, itemData) {
10408
- if (pathData.hd !== true && pathData._shouldRender) {
10409
- var i, len = itemData.styledShapes.length;
10410
- for (i = 0; i < len; i += 1) {
10411
- this.renderStyledShape(itemData.styledShapes[i], itemData.sh);
10412
- }
10413
- }
10414
- };
10415
-
10416
- CVShapeElement.prototype.renderFill = function (styleData, itemData, groupTransform) {
10417
- var styleElem = itemData.style;
10418
-
10419
- if (itemData.c._mdf || this._isFirstFrame) {
10420
- styleElem.co = 'rgb(' +
10421
- bm_floor(itemData.c.v[0]) + ',' +
10422
- bm_floor(itemData.c.v[1]) + ',' +
10423
- bm_floor(itemData.c.v[2]) + ')';
10424
- }
10425
- if (itemData.o._mdf || groupTransform._opMdf || this._isFirstFrame) {
10426
- styleElem.coOp = itemData.o.v * groupTransform.opacity;
10427
- }
10428
- };
10429
-
10430
- CVShapeElement.prototype.renderGradientFill = function (styleData, itemData, groupTransform) {
10431
- var styleElem = itemData.style;
10432
- if (!styleElem.grd || itemData.g._mdf || itemData.s._mdf || itemData.e._mdf || (styleData.t !== 1 && (itemData.h._mdf || itemData.a._mdf))) {
10433
- var ctx = this.globalData.canvasContext;
10434
- var grd;
10435
- var pt1 = itemData.s.v,
10436
- pt2 = itemData.e.v;
10437
- if (styleData.t === 1) {
10438
- grd = ctx.createLinearGradient(pt1[0], pt1[1], pt2[0], pt2[1]);
10439
- } else {
10440
- var rad = Math.sqrt(Math.pow(pt1[0] - pt2[0], 2) + Math.pow(pt1[1] - pt2[1], 2));
10441
- var ang = Math.atan2(pt2[1] - pt1[1], pt2[0] - pt1[0]);
10442
-
10443
- var percent = itemData.h.v >= 1 ? 0.99 : itemData.h.v <= -1 ? -0.99 : itemData.h.v;
10444
- var dist = rad * percent;
10445
- var x = Math.cos(ang + itemData.a.v) * dist + pt1[0];
10446
- var y = Math.sin(ang + itemData.a.v) * dist + pt1[1];
10447
- var grd = ctx.createRadialGradient(x, y, 0, pt1[0], pt1[1], rad);
10448
- }
10449
-
10450
- var i, len = styleData.g.p;
10451
- var cValues = itemData.g.c;
10452
- var opacity = 1;
10453
-
10454
- for (i = 0; i < len; i += 1) {
10455
- if (itemData.g._hasOpacity && itemData.g._collapsable) {
10456
- opacity = itemData.g.o[i * 2 + 1];
10457
- }
10458
- grd.addColorStop(cValues[i * 4] / 100, 'rgba(' + cValues[i * 4 + 1] + ',' + cValues[i * 4 + 2] + ',' + cValues[i * 4 + 3] + ',' + opacity + ')');
10459
- }
10460
- styleElem.grd = grd;
10461
- }
10462
- styleElem.coOp = itemData.o.v * groupTransform.opacity;
10463
-
10464
- };
10465
-
10466
- CVShapeElement.prototype.renderStroke = function (styleData, itemData, groupTransform) {
10467
- var styleElem = itemData.style;
10468
- var d = itemData.d;
10469
- if (d && (d._mdf || this._isFirstFrame)) {
10470
- styleElem.da = d.dashArray;
10471
- styleElem.do = d.dashoffset[0];
10472
- }
10473
- if (itemData.c._mdf || this._isFirstFrame) {
10474
- styleElem.co = 'rgb(' + bm_floor(itemData.c.v[0]) + ',' + bm_floor(itemData.c.v[1]) + ',' + bm_floor(itemData.c.v[2]) + ')';
10475
- }
10476
- if (itemData.o._mdf || groupTransform._opMdf || this._isFirstFrame) {
10477
- styleElem.coOp = itemData.o.v * groupTransform.opacity;
10478
- }
10479
- if (itemData.w._mdf || this._isFirstFrame) {
10480
- styleElem.wi = itemData.w.v;
10481
- }
10482
- };
10483
-
10484
-
10485
- CVShapeElement.prototype.destroy = function () {
10486
- this.shapesData = null;
10487
- this.globalData = null;
10488
- this.canvasContext = null;
10489
- this.stylesList.length = 0;
10490
- this.itemsData.length = 0;
10491
- };
10492
-
10493
-
10494
- function CVSolidElement(data, globalData, comp) {
10495
- this.initElement(data, globalData, comp);
10496
- }
10497
- extendPrototype([BaseElement, TransformElement, CVBaseElement, HierarchyElement, FrameElement, RenderableElement], CVSolidElement);
10498
-
10499
- CVSolidElement.prototype.initElement = SVGShapeElement.prototype.initElement;
10500
- CVSolidElement.prototype.prepareFrame = IImageElement.prototype.prepareFrame;
10501
-
10502
- CVSolidElement.prototype.renderInnerContent = function () {
10503
- var ctx = this.canvasContext;
10504
- ctx.fillStyle = this.data.sc;
10505
- ctx.fillRect(0, 0, this.data.sw, this.data.sh);
10506
- //
10507
- };
10508
-
10509
- function CVTextElement(data, globalData, comp) {
10510
- this.textSpans = [];
10511
- this.yOffset = 0;
10512
- this.fillColorAnim = false;
10513
- this.strokeColorAnim = false;
10514
- this.strokeWidthAnim = false;
10515
- this.stroke = false;
10516
- this.fill = false;
10517
- this.justifyOffset = 0;
10518
- this.currentRender = null;
10519
- this.renderType = 'canvas';
10520
- this.values = {
10521
- fill: 'rgba(0,0,0,0)',
10522
- stroke: 'rgba(0,0,0,0)',
10523
- sWidth: 0,
10524
- fValue: ''
10525
- };
10526
- this.initElement(data, globalData, comp);
10527
- }
10528
- extendPrototype([BaseElement, TransformElement, CVBaseElement, HierarchyElement, FrameElement, RenderableElement, ITextElement], CVTextElement);
10529
-
10530
- CVTextElement.prototype.tHelper = createTag('canvas').getContext('2d');
10531
-
10532
- CVTextElement.prototype.buildNewText = function () {
10533
- var documentData = this.textProperty.currentData;
10534
- this.renderedLetters = createSizedArray(documentData.l ? documentData.l.length : 0);
10535
-
10536
- var hasFill = false;
10537
- if (documentData.fc) {
10538
- hasFill = true;
10539
- this.values.fill = this.buildColor(documentData.fc);
10540
- } else {
10541
- this.values.fill = 'rgba(0,0,0,0)';
10542
- }
10543
- this.fill = hasFill;
10544
- var hasStroke = false;
10545
- if (documentData.sc) {
10546
- hasStroke = true;
10547
- this.values.stroke = this.buildColor(documentData.sc);
10548
- this.values.sWidth = documentData.sw;
10549
- }
10550
- var fontData = this.globalData.fontManager.getFontByName(documentData.f);
10551
- var i, len;
10552
- var letters = documentData.l;
10553
- var matrixHelper = this.mHelper;
10554
- this.stroke = hasStroke;
10555
- this.values.fValue = documentData.finalSize + 'px ' + this.globalData.fontManager.getFontByName(documentData.f).fFamily;
10556
- len = documentData.finalText.length;
10557
- //this.tHelper.font = this.values.fValue;
10558
- var charData, shapeData, k, kLen, shapes, j, jLen, pathNodes, commands, pathArr, singleShape = this.data.singleShape;
10559
- var trackingOffset = documentData.tr / 1000 * documentData.finalSize;
10560
- var xPos = 0,
10561
- yPos = 0,
10562
- firstLine = true;
10563
- var cnt = 0;
10564
- for (i = 0; i < len; i += 1) {
10565
- charData = this.globalData.fontManager.getCharData(documentData.finalText[i], fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);
10566
- shapeData = charData && charData.data || {};
10567
- matrixHelper.reset();
10568
- if (singleShape && letters[i].n) {
10569
- xPos = -trackingOffset;
10570
- yPos += documentData.yOffset;
10571
- yPos += firstLine ? 1 : 0;
10572
- firstLine = false;
10573
- }
10574
-
10575
- shapes = shapeData.shapes ? shapeData.shapes[0].it : [];
10576
- jLen = shapes.length;
10577
- matrixHelper.scale(documentData.finalSize / 100, documentData.finalSize / 100);
10578
- if (singleShape) {
10579
- this.applyTextPropertiesToMatrix(documentData, matrixHelper, letters[i].line, xPos, yPos);
10580
- }
10581
- commands = createSizedArray(jLen);
10582
- for (j = 0; j < jLen; j += 1) {
10583
- kLen = shapes[j].ks.k.i.length;
10584
- pathNodes = shapes[j].ks.k;
10585
- pathArr = [];
10586
- for (k = 1; k < kLen; k += 1) {
10587
- if (k == 1) {
10588
- pathArr.push(matrixHelper.applyToX(pathNodes.v[0][0], pathNodes.v[0][1], 0), matrixHelper.applyToY(pathNodes.v[0][0], pathNodes.v[0][1], 0));
10589
- }
10590
- 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));
10591
- }
10592
- 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));
10593
- commands[j] = pathArr;
10594
- }
10595
- if (singleShape) {
10596
- xPos += letters[i].l;
10597
- xPos += trackingOffset;
10598
- }
10599
- if (this.textSpans[cnt]) {
10600
- this.textSpans[cnt].elem = commands;
10601
- } else {
10602
- this.textSpans[cnt] = {
10603
- elem: commands
10604
- };
10605
- }
10606
- cnt += 1;
10607
- }
10608
- };
10609
-
10610
- CVTextElement.prototype.renderInnerContent = function () {
10611
- var ctx = this.canvasContext;
10612
- var finalMat = this.finalTransform.mat.props;
10613
- ctx.font = this.values.fValue;
10614
- ctx.lineCap = 'butt';
10615
- ctx.lineJoin = 'miter';
10616
- ctx.miterLimit = 4;
10617
-
10618
- if (!this.data.singleShape) {
10619
- this.textAnimator.getMeasures(this.textProperty.currentData, this.lettersChangedFlag);
10620
- }
10621
-
10622
- var i, len, j, jLen, k, kLen;
10623
- var renderedLetters = this.textAnimator.renderedLetters;
10624
-
10625
- var letters = this.textProperty.currentData.l;
10626
-
10627
- len = letters.length;
10628
- var renderedLetter;
10629
- var lastFill = null,
10630
- lastStroke = null,
10631
- lastStrokeW = null,
10632
- commands, pathArr;
10633
- for (i = 0; i < len; i += 1) {
10634
- if (letters[i].n) {
10635
- continue;
10636
- }
10637
- renderedLetter = renderedLetters[i];
10638
- if (renderedLetter) {
10639
- this.globalData.renderer.save();
10640
- this.globalData.renderer.ctxTransform(renderedLetter.p);
10641
- this.globalData.renderer.ctxOpacity(renderedLetter.o);
10642
- }
10643
- if (this.fill) {
10644
- if (renderedLetter && renderedLetter.fc) {
10645
- if (lastFill !== renderedLetter.fc) {
10646
- lastFill = renderedLetter.fc;
10647
- ctx.fillStyle = renderedLetter.fc;
10648
- }
10649
- } else if (lastFill !== this.values.fill) {
10650
- lastFill = this.values.fill;
10651
- ctx.fillStyle = this.values.fill;
10652
- }
10653
- commands = this.textSpans[i].elem;
10654
- jLen = commands.length;
10655
- this.globalData.canvasContext.beginPath();
10656
- for (j = 0; j < jLen; j += 1) {
10657
- pathArr = commands[j];
10658
- kLen = pathArr.length;
10659
- this.globalData.canvasContext.moveTo(pathArr[0], pathArr[1]);
10660
- for (k = 2; k < kLen; k += 6) {
10661
- this.globalData.canvasContext.bezierCurveTo(pathArr[k], pathArr[k + 1], pathArr[k + 2], pathArr[k + 3], pathArr[k + 4], pathArr[k + 5]);
10662
- }
10663
- }
10664
- this.globalData.canvasContext.closePath();
10665
- this.globalData.canvasContext.fill();
10666
- ///ctx.fillText(this.textSpans[i].val,0,0);
10667
- }
10668
- if (this.stroke) {
10669
- if (renderedLetter && renderedLetter.sw) {
10670
- if (lastStrokeW !== renderedLetter.sw) {
10671
- lastStrokeW = renderedLetter.sw;
10672
- ctx.lineWidth = renderedLetter.sw;
10673
- }
10674
- } else if (lastStrokeW !== this.values.sWidth) {
10675
- lastStrokeW = this.values.sWidth;
10676
- ctx.lineWidth = this.values.sWidth;
10677
- }
10678
- if (renderedLetter && renderedLetter.sc) {
10679
- if (lastStroke !== renderedLetter.sc) {
10680
- lastStroke = renderedLetter.sc;
10681
- ctx.strokeStyle = renderedLetter.sc;
10682
- }
10683
- } else if (lastStroke !== this.values.stroke) {
10684
- lastStroke = this.values.stroke;
10685
- ctx.strokeStyle = this.values.stroke;
10686
- }
10687
- commands = this.textSpans[i].elem;
10688
- jLen = commands.length;
10689
- this.globalData.canvasContext.beginPath();
10690
- for (j = 0; j < jLen; j += 1) {
10691
- pathArr = commands[j];
10692
- kLen = pathArr.length;
10693
- this.globalData.canvasContext.moveTo(pathArr[0], pathArr[1]);
10694
- for (k = 2; k < kLen; k += 6) {
10695
- this.globalData.canvasContext.bezierCurveTo(pathArr[k], pathArr[k + 1], pathArr[k + 2], pathArr[k + 3], pathArr[k + 4], pathArr[k + 5]);
10696
- }
10697
- }
10698
- this.globalData.canvasContext.closePath();
10699
- this.globalData.canvasContext.stroke();
10700
- ///ctx.strokeText(letters[i].val,0,0);
10701
- }
10702
- if (renderedLetter) {
10703
- this.globalData.renderer.restore();
10704
- }
10705
- }
10706
- };
10707
-
10708
- function CVEffects() {
10709
-
10710
- }
10711
- CVEffects.prototype.renderFrame = function () { };
10712
-
10713
- function HBaseElement(data, globalData, comp) { }
10714
- HBaseElement.prototype = {
10715
- checkBlendMode: function () { },
10716
- initRendererElement: function () {
10717
- this.baseElement = createTag(this.data.tg || 'div');
10718
- if (this.data.hasMask) {
10719
- this.svgElement = createNS('svg');
10720
- this.layerElement = createNS('g');
10721
- this.maskedElement = this.layerElement;
10722
- this.svgElement.appendChild(this.layerElement);
10723
- this.baseElement.appendChild(this.svgElement);
10724
- } else {
10725
- this.layerElement = this.baseElement;
10726
- }
10727
- styleDiv(this.baseElement);
10728
- },
10729
- createContainerElements: function () {
10730
- this.renderableEffectsManager = new CVEffects(this);
10731
- this.transformedElement = this.baseElement;
10732
- this.maskedElement = this.layerElement;
10733
- if (this.data.ln) {
10734
- this.layerElement.setAttribute('id', this.data.ln);
10735
- }
10736
- if (this.data.cl) {
10737
- this.layerElement.setAttribute('class', this.data.cl);
10738
- }
10739
- if (this.data.bm !== 0) {
10740
- this.setBlendMode();
10741
- }
10742
- },
10743
- renderElement: function () {
10744
- if (this.finalTransform._matMdf) {
10745
- this.transformedElement.style.transform = this.transformedElement.style.webkitTransform = this.finalTransform.mat.toCSS();
10746
- }
10747
- if (this.finalTransform._opMdf) {
10748
- this.transformedElement.style.opacity = this.finalTransform.mProp.o.v;
10749
- }
10750
- },
10751
- renderFrame: function () {
10752
- //If it is exported as hidden (data.hd === true) no need to render
10753
- //If it is not visible no need to render
10754
- if (this.data.hd || this.hidden) {
10755
- return;
10756
- }
10757
- this.renderTransform();
10758
- this.renderRenderable();
10759
- this.renderElement();
10760
- this.renderInnerContent();
10761
- if (this._isFirstFrame) {
10762
- this._isFirstFrame = false;
10763
- }
10764
- },
10765
- destroy: function () {
10766
- this.layerElement = null;
10767
- this.transformedElement = null;
10768
- if (this.matteElement) {
10769
- this.matteElement = null;
10770
- }
10771
- if (this.maskManager) {
10772
- this.maskManager.destroy();
10773
- this.maskManager = null;
10774
- }
10775
- },
10776
- createRenderableComponents: function () {
10777
- this.maskManager = new MaskElement(this.data, this, this.globalData);
10778
- },
10779
- addEffects: function () { },
10780
- setMatte: function () { }
10781
- };
10782
- HBaseElement.prototype.getBaseElement = SVGBaseElement.prototype.getBaseElement;
10783
- HBaseElement.prototype.destroyBaseElement = HBaseElement.prototype.destroy;
10784
- HBaseElement.prototype.buildElementParenting = HybridRenderer.prototype.buildElementParenting;
10785
-
10786
- function HSolidElement(data, globalData, comp) {
10787
- this.initElement(data, globalData, comp);
10788
- }
10789
- extendPrototype([BaseElement, TransformElement, HBaseElement, HierarchyElement, FrameElement, RenderableDOMElement], HSolidElement);
10790
-
10791
- HSolidElement.prototype.createContent = function () {
10792
- var rect;
10793
- if (this.data.hasMask) {
10794
- rect = createNS('rect');
10795
- rect.setAttribute('width', this.data.sw);
10796
- rect.setAttribute('height', this.data.sh);
10797
- rect.setAttribute('fill', this.data.sc);
10798
- this.svgElement.setAttribute('width', this.data.sw);
10799
- this.svgElement.setAttribute('height', this.data.sh);
10800
- } else {
10801
- rect = createTag('div');
10802
- rect.style.width = this.data.sw + 'px';
10803
- rect.style.height = this.data.sh + 'px';
10804
- rect.style.backgroundColor = this.data.sc;
10805
- }
10806
- this.layerElement.appendChild(rect);
10807
- };
10808
-
10809
- function HCompElement(data, globalData, comp) {
10810
- this.layers = data.layers;
10811
- this.supports3d = !data.hasMask;
10812
- this.completeLayers = false;
10813
- this.pendingElements = [];
10814
- this.elements = this.layers ? createSizedArray(this.layers.length) : [];
10815
- this.initElement(data, globalData, comp);
10816
- this.tm = data.tm ? PropertyFactory.getProp(this, data.tm, 0, globalData.frameRate, this) : {
10817
- _placeholder: true
10818
- };
10819
- }
10820
-
10821
- extendPrototype([HybridRenderer, ICompElement, HBaseElement], HCompElement);
10822
- HCompElement.prototype._createBaseContainerElements = HCompElement.prototype.createContainerElements;
10823
-
10824
- HCompElement.prototype.createContainerElements = function () {
10825
- this._createBaseContainerElements();
10826
- //divElement.style.clip = 'rect(0px, '+this.data.w+'px, '+this.data.h+'px, 0px)';
10827
- if (this.data.hasMask) {
10828
- this.svgElement.setAttribute('width', this.data.w);
10829
- this.svgElement.setAttribute('height', this.data.h);
10830
- this.transformedElement = this.baseElement;
10831
- } else {
10832
- this.transformedElement = this.layerElement;
10833
- }
10834
- };
10835
-
10836
- HCompElement.prototype.addTo3dContainer = function (elem, pos) {
10837
- var j = 0;
10838
- var nextElement;
10839
- while (j < pos) {
10840
- if (this.elements[j] && this.elements[j].getBaseElement) {
10841
- nextElement = this.elements[j].getBaseElement();
10842
- }
10843
- j += 1;
10844
- }
10845
- if (nextElement) {
10846
- this.layerElement.insertBefore(elem, nextElement);
10847
- } else {
10848
- this.layerElement.appendChild(elem);
10849
- }
10850
- }
10851
-
10852
- function HShapeElement(data, globalData, comp) {
10853
- //List of drawable elements
10854
- this.shapes = [];
10855
- // Full shape data
10856
- this.shapesData = data.shapes;
10857
- //List of styles that will be applied to shapes
10858
- this.stylesList = [];
10859
- //List of modifiers that will be applied to shapes
10860
- this.shapeModifiers = [];
10861
- //List of items in shape tree
10862
- this.itemsData = [];
10863
- //List of items in previous shape tree
10864
- this.processedElements = [];
10865
- // List of animated components
10866
- this.animatedContents = [];
10867
- this.shapesContainer = createNS('g');
10868
- this.initElement(data, globalData, comp);
10869
- //Moving any property that doesn't get too much access after initialization because of v8 way of handling more than 10 properties.
10870
- // List of elements that have been created
10871
- this.prevViewData = [];
10872
- this.currentBBox = {
10873
- x: 999999,
10874
- y: -999999,
10875
- h: 0,
10876
- w: 0
10877
- };
10878
- }
10879
- extendPrototype([BaseElement, TransformElement, HSolidElement, SVGShapeElement, HBaseElement, HierarchyElement, FrameElement, RenderableElement], HShapeElement);
10880
- HShapeElement.prototype._renderShapeFrame = HShapeElement.prototype.renderInnerContent;
10881
-
10882
- HShapeElement.prototype.createContent = function () {
10883
- var cont;
10884
- this.baseElement.style.fontSize = 0;
10885
- if (this.data.hasMask) {
10886
- this.layerElement.appendChild(this.shapesContainer);
10887
- cont = this.svgElement;
10888
- } else {
10889
- cont = createNS('svg');
10890
- var size = this.comp.data ? this.comp.data : this.globalData.compSize;
10891
- cont.setAttribute('width', size.w);
10892
- cont.setAttribute('height', size.h);
10893
- cont.appendChild(this.shapesContainer);
10894
- this.layerElement.appendChild(cont);
10895
- }
10896
-
10897
- this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, this.shapesContainer, 0, [], true);
10898
- this.filterUniqueShapes();
10899
- this.shapeCont = cont;
10900
- };
10901
-
10902
- HShapeElement.prototype.getTransformedPoint = function (transformers, point) {
10903
- var i, len = transformers.length;
10904
- for (i = 0; i < len; i += 1) {
10905
- point = transformers[i].mProps.v.applyToPointArray(point[0], point[1], 0);
10906
- }
10907
- return point;
10908
- }
10909
-
10910
- HShapeElement.prototype.calculateShapeBoundingBox = function (item, boundingBox) {
10911
- var shape = item.sh.v;
10912
- var transformers = item.transformers;
10913
- var i, len = shape._length,
10914
- vPoint, oPoint, nextIPoint, nextVPoint, bounds;
10915
- if (len <= 1) {
10916
- return;
10917
- }
10918
- for (i = 0; i < len - 1; i += 1) {
10919
- vPoint = this.getTransformedPoint(transformers, shape.v[i]);
10920
- oPoint = this.getTransformedPoint(transformers, shape.o[i]);
10921
- nextIPoint = this.getTransformedPoint(transformers, shape.i[i + 1]);
10922
- nextVPoint = this.getTransformedPoint(transformers, shape.v[i + 1]);
10923
- this.checkBounds(vPoint, oPoint, nextIPoint, nextVPoint, boundingBox);
10924
- }
10925
- if (shape.c) {
10926
- vPoint = this.getTransformedPoint(transformers, shape.v[i]);
10927
- oPoint = this.getTransformedPoint(transformers, shape.o[i]);
10928
- nextIPoint = this.getTransformedPoint(transformers, shape.i[0]);
10929
- nextVPoint = this.getTransformedPoint(transformers, shape.v[0]);
10930
- this.checkBounds(vPoint, oPoint, nextIPoint, nextVPoint, boundingBox);
10931
- }
10932
- }
10933
-
10934
- HShapeElement.prototype.checkBounds = function (vPoint, oPoint, nextIPoint, nextVPoint, boundingBox) {
10935
- this.getBoundsOfCurve(vPoint, oPoint, nextIPoint, nextVPoint);
10936
- var bounds = this.shapeBoundingBox;
10937
- boundingBox.x = bm_min(bounds.left, boundingBox.x);
10938
- boundingBox.xMax = bm_max(bounds.right, boundingBox.xMax);
10939
- boundingBox.y = bm_min(bounds.top, boundingBox.y);
10940
- boundingBox.yMax = bm_max(bounds.bottom, boundingBox.yMax);
10941
- }
10942
-
10943
- HShapeElement.prototype.shapeBoundingBox = {
10944
- left: 0,
10945
- right: 0,
10946
- top: 0,
10947
- bottom: 0,
10948
- }
10949
-
10950
- HShapeElement.prototype.tempBoundingBox = {
10951
- x: 0,
10952
- xMax: 0,
10953
- y: 0,
10954
- yMax: 0,
10955
- width: 0,
10956
- height: 0
10957
- }
10958
-
10959
- HShapeElement.prototype.getBoundsOfCurve = function (p0, p1, p2, p3) {
10960
-
10961
- var bounds = [
10962
- [p0[0], p3[0]],
10963
- [p0[1], p3[1]]
10964
- ];
10965
-
10966
- for (var a, b, c, t, b2ac, t1, t2, i = 0; i < 2; ++i) {
10967
-
10968
- b = 6 * p0[i] - 12 * p1[i] + 6 * p2[i];
10969
- a = -3 * p0[i] + 9 * p1[i] - 9 * p2[i] + 3 * p3[i];
10970
- c = 3 * p1[i] - 3 * p0[i];
10971
-
10972
- b = b | 0;
10973
- a = a | 0;
10974
- c = c | 0;
10975
-
10976
- if (a === 0) {
10977
-
10978
- if (b === 0) {
10979
- continue;
10980
- }
10981
-
10982
- t = -c / b;
10983
-
10984
- if (0 < t && t < 1) {
10985
- bounds[i].push(this.calculateF(t, p0, p1, p2, p3, i));
10986
- }
10987
- continue;
10988
- }
10989
-
10990
- b2ac = b * b - 4 * c * a;
10991
-
10992
- if (b2ac < 0) {
10993
- continue;
10994
- }
10995
-
10996
- t1 = (-b + bm_sqrt(b2ac)) / (2 * a);
10997
- if (0 < t1 && t1 < 1) bounds[i].push(this.calculateF(t1, p0, p1, p2, p3, i));
10998
-
10999
- t2 = (-b - bm_sqrt(b2ac)) / (2 * a);
11000
- if (0 < t2 && t2 < 1) bounds[i].push(this.calculateF(t2, p0, p1, p2, p3, i));
11001
-
11002
- }
11003
-
11004
- this.shapeBoundingBox.left = bm_min.apply(null, bounds[0]);
11005
- this.shapeBoundingBox.top = bm_min.apply(null, bounds[1]);
11006
- this.shapeBoundingBox.right = bm_max.apply(null, bounds[0]);
11007
- this.shapeBoundingBox.bottom = bm_max.apply(null, bounds[1]);
11008
- };
11009
-
11010
- HShapeElement.prototype.calculateF = function (t, p0, p1, p2, p3, i) {
11011
- return bm_pow(1 - t, 3) * p0[i] +
11012
- 3 * bm_pow(1 - t, 2) * t * p1[i] +
11013
- 3 * (1 - t) * bm_pow(t, 2) * p2[i] +
11014
- bm_pow(t, 3) * p3[i];
11015
- }
11016
-
11017
- HShapeElement.prototype.calculateBoundingBox = function (itemsData, boundingBox) {
11018
- var i, len = itemsData.length,
11019
- path;
11020
- for (i = 0; i < len; i += 1) {
11021
- if (itemsData[i] && itemsData[i].sh) {
11022
- this.calculateShapeBoundingBox(itemsData[i], boundingBox)
11023
- } else if (itemsData[i] && itemsData[i].it) {
11024
- this.calculateBoundingBox(itemsData[i].it, boundingBox)
11025
- }
11026
- }
11027
- }
11028
-
11029
- HShapeElement.prototype.currentBoxContains = function (box) {
11030
- return this.currentBBox.x <= box.x &&
11031
- this.currentBBox.y <= box.y &&
11032
- this.currentBBox.width + this.currentBBox.x >= box.x + box.width &&
11033
- this.currentBBox.height + this.currentBBox.y >= box.y + box.height
11034
- }
11035
-
11036
- HShapeElement.prototype.renderInnerContent = function () {
11037
- this._renderShapeFrame();
11038
-
11039
- if (!this.hidden && (this._isFirstFrame || this._mdf)) {
11040
- var tempBoundingBox = this.tempBoundingBox;
11041
- var max = 999999;
11042
- tempBoundingBox.x = max;
11043
- tempBoundingBox.xMax = -max;
11044
- tempBoundingBox.y = max;
11045
- tempBoundingBox.yMax = -max;
11046
- this.calculateBoundingBox(this.itemsData, tempBoundingBox);
11047
- tempBoundingBox.width = tempBoundingBox.xMax < tempBoundingBox.x ? 0 : tempBoundingBox.xMax - tempBoundingBox.x;
11048
- tempBoundingBox.height = tempBoundingBox.yMax < tempBoundingBox.y ? 0 : tempBoundingBox.yMax - tempBoundingBox.y;
11049
- //var tempBoundingBox = this.shapeCont.getBBox();
11050
- if (this.currentBoxContains(tempBoundingBox)) {
11051
- return;
11052
- }
11053
- var changed = false;
11054
- if (this.currentBBox.w !== tempBoundingBox.width) {
11055
- this.currentBBox.w = tempBoundingBox.width;
11056
- this.shapeCont.setAttribute('width', tempBoundingBox.width);
11057
- changed = true;
11058
- }
11059
- if (this.currentBBox.h !== tempBoundingBox.height) {
11060
- this.currentBBox.h = tempBoundingBox.height;
11061
- this.shapeCont.setAttribute('height', tempBoundingBox.height);
11062
- changed = true;
11063
- }
11064
- if (changed || this.currentBBox.x !== tempBoundingBox.x || this.currentBBox.y !== tempBoundingBox.y) {
11065
- this.currentBBox.w = tempBoundingBox.width;
11066
- this.currentBBox.h = tempBoundingBox.height;
11067
- this.currentBBox.x = tempBoundingBox.x;
11068
- this.currentBBox.y = tempBoundingBox.y;
11069
-
11070
- this.shapeCont.setAttribute('viewBox', this.currentBBox.x + ' ' + this.currentBBox.y + ' ' + this.currentBBox.w + ' ' + this.currentBBox.h);
11071
- this.shapeCont.style.transform = this.shapeCont.style.webkitTransform = 'translate(' + this.currentBBox.x + 'px,' + this.currentBBox.y + 'px)';
11072
- }
11073
- }
11074
-
11075
- };
11076
-
11077
- function HTextElement(data, globalData, comp) {
11078
- this.textSpans = [];
11079
- this.textPaths = [];
11080
- this.currentBBox = {
11081
- x: 999999,
11082
- y: -999999,
11083
- h: 0,
11084
- w: 0
11085
- };
11086
- this.renderType = 'svg';
11087
- this.isMasked = false;
11088
- this.initElement(data, globalData, comp);
11089
-
11090
- }
11091
- extendPrototype([BaseElement, TransformElement, HBaseElement, HierarchyElement, FrameElement, RenderableDOMElement, ITextElement], HTextElement);
11092
-
11093
- HTextElement.prototype.createContent = function () {
11094
- this.isMasked = this.checkMasks();
11095
- if (this.isMasked) {
11096
- this.renderType = 'svg';
11097
- this.compW = this.comp.data.w;
11098
- this.compH = this.comp.data.h;
11099
- this.svgElement.setAttribute('width', this.compW);
11100
- this.svgElement.setAttribute('height', this.compH);
11101
- var g = createNS('g');
11102
- this.maskedElement.appendChild(g);
11103
- this.innerElem = g;
11104
- } else {
11105
- this.renderType = 'html';
11106
- this.innerElem = this.layerElement;
11107
- }
11108
-
11109
- this.checkParenting();
11110
-
11111
- };
11112
-
11113
- HTextElement.prototype.buildNewText = function () {
11114
- var documentData = this.textProperty.currentData;
11115
- this.renderedLetters = createSizedArray(documentData.l ? documentData.l.length : 0);
11116
- var innerElemStyle = this.innerElem.style;
11117
- innerElemStyle.color = innerElemStyle.fill = documentData.fc ? this.buildColor(documentData.fc) : 'rgba(0,0,0,0)';
11118
- if (documentData.sc) {
11119
- innerElemStyle.stroke = this.buildColor(documentData.sc);
11120
- innerElemStyle.strokeWidth = documentData.sw + 'px';
11121
- }
11122
- var fontData = this.globalData.fontManager.getFontByName(documentData.f);
11123
- if (!this.globalData.fontManager.chars) {
11124
- innerElemStyle.fontSize = documentData.finalSize + 'px';
11125
- innerElemStyle.lineHeight = documentData.finalSize + 'px';
11126
- if (fontData.fClass) {
11127
- this.innerElem.className = fontData.fClass;
11128
- } else {
11129
- innerElemStyle.fontFamily = fontData.fFamily;
11130
- var fWeight = documentData.fWeight,
11131
- fStyle = documentData.fStyle;
11132
- innerElemStyle.fontStyle = fStyle;
11133
- innerElemStyle.fontWeight = fWeight;
11134
- }
11135
- }
11136
- var i, len;
11137
-
11138
- var letters = documentData.l;
11139
- len = letters.length;
11140
- var tSpan, tParent, tCont;
11141
- var matrixHelper = this.mHelper;
11142
- var shapes, shapeStr = '';
11143
- var cnt = 0;
11144
- for (i = 0; i < len; i += 1) {
11145
- if (this.globalData.fontManager.chars) {
11146
- if (!this.textPaths[cnt]) {
11147
- tSpan = createNS('path');
11148
- tSpan.setAttribute('stroke-linecap', 'butt');
11149
- tSpan.setAttribute('stroke-linejoin', 'round');
11150
- tSpan.setAttribute('stroke-miterlimit', '4');
11151
- } else {
11152
- tSpan = this.textPaths[cnt];
11153
- }
11154
- if (!this.isMasked) {
11155
- if (this.textSpans[cnt]) {
11156
- tParent = this.textSpans[cnt];
11157
- tCont = tParent.children[0];
11158
- } else {
11159
-
11160
- tParent = createTag('div');
11161
- tParent.style.lineHeight = 0;
11162
- tCont = createNS('svg');
11163
- tCont.appendChild(tSpan);
11164
- styleDiv(tParent);
11165
- }
11166
- }
11167
- } else {
11168
- if (!this.isMasked) {
11169
- if (this.textSpans[cnt]) {
11170
- tParent = this.textSpans[cnt];
11171
- tSpan = this.textPaths[cnt];
11172
- } else {
11173
- tParent = createTag('span');
11174
- styleDiv(tParent);
11175
- tSpan = createTag('span');
11176
- styleDiv(tSpan);
11177
- tParent.appendChild(tSpan);
11178
- }
11179
- } else {
11180
- tSpan = this.textPaths[cnt] ? this.textPaths[cnt] : createNS('text');
11181
- }
11182
- }
11183
- //tSpan.setAttribute('visibility', 'hidden');
11184
- if (this.globalData.fontManager.chars) {
11185
- var charData = this.globalData.fontManager.getCharData(documentData.finalText[i], fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);
11186
- var shapeData;
11187
- if (charData) {
11188
- shapeData = charData.data;
11189
- } else {
11190
- shapeData = null;
11191
- }
11192
- matrixHelper.reset();
11193
- if (shapeData && shapeData.shapes) {
11194
- shapes = shapeData.shapes[0].it;
11195
- matrixHelper.scale(documentData.finalSize / 100, documentData.finalSize / 100);
11196
- shapeStr = this.createPathShape(matrixHelper, shapes);
11197
- tSpan.setAttribute('d', shapeStr);
11198
- }
11199
- if (!this.isMasked) {
11200
- this.innerElem.appendChild(tParent);
11201
- if (shapeData && shapeData.shapes) {
11202
-
11203
- //document.body.appendChild is needed to get exact measure of shape
11204
- document.body.appendChild(tCont);
11205
- var boundingBox = tCont.getBBox();
11206
- tCont.setAttribute('width', boundingBox.width + 2);
11207
- tCont.setAttribute('height', boundingBox.height + 2);
11208
- tCont.setAttribute('viewBox', (boundingBox.x - 1) + ' ' + (boundingBox.y - 1) + ' ' + (boundingBox.width + 2) + ' ' + (boundingBox.height + 2));
11209
- tCont.style.transform = tCont.style.webkitTransform = 'translate(' + (boundingBox.x - 1) + 'px,' + (boundingBox.y - 1) + 'px)';
11210
-
11211
- letters[i].yOffset = boundingBox.y - 1;
11212
-
11213
- } else {
11214
- tCont.setAttribute('width', 1);
11215
- tCont.setAttribute('height', 1);
11216
- }
11217
- tParent.appendChild(tCont);
11218
- } else {
11219
- this.innerElem.appendChild(tSpan);
11220
- }
11221
- } else {
11222
- tSpan.textContent = letters[i].val;
11223
- tSpan.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space", "preserve");
11224
- if (!this.isMasked) {
11225
- this.innerElem.appendChild(tParent);
11226
- //
11227
- tSpan.style.transform = tSpan.style.webkitTransform = 'translate3d(0,' + -documentData.finalSize / 1.2 + 'px,0)';
11228
- } else {
11229
- this.innerElem.appendChild(tSpan);
11230
- }
11231
- }
11232
- //
11233
- if (!this.isMasked) {
11234
- this.textSpans[cnt] = tParent;
11235
- } else {
11236
- this.textSpans[cnt] = tSpan;
11237
- }
11238
- this.textSpans[cnt].style.display = 'block';
11239
- this.textPaths[cnt] = tSpan;
11240
- cnt += 1;
11241
- }
11242
- while (cnt < this.textSpans.length) {
11243
- this.textSpans[cnt].style.display = 'none';
11244
- cnt += 1;
11245
- }
11246
- };
11247
-
11248
- HTextElement.prototype.renderInnerContent = function () {
11249
-
11250
- if (this.data.singleShape) {
11251
- if (!this._isFirstFrame && !this.lettersChangedFlag) {
11252
- return;
11253
- } else {
11254
- // Todo Benchmark if using this is better than getBBox
11255
- if (this.isMasked && this.finalTransform._matMdf) {
11256
- this.svgElement.setAttribute('viewBox', -this.finalTransform.mProp.p.v[0] + ' ' + -this.finalTransform.mProp.p.v[1] + ' ' + this.compW + ' ' + this.compH);
11257
- this.svgElement.style.transform = this.svgElement.style.webkitTransform = 'translate(' + -this.finalTransform.mProp.p.v[0] + 'px,' + -this.finalTransform.mProp.p.v[1] + 'px)';
11258
- }
11259
- }
11260
- }
11261
-
11262
- this.textAnimator.getMeasures(this.textProperty.currentData, this.lettersChangedFlag);
11263
- if (!this.lettersChangedFlag && !this.textAnimator.lettersChangedFlag) {
11264
- return;
11265
- }
11266
- var i, len, count = 0;
11267
- var renderedLetters = this.textAnimator.renderedLetters;
11268
-
11269
- var letters = this.textProperty.currentData.l;
11270
-
11271
- len = letters.length;
11272
- var renderedLetter, textSpan, textPath;
11273
- for (i = 0; i < len; i += 1) {
11274
- if (letters[i].n) {
11275
- count += 1;
11276
- continue;
11277
- }
11278
- textSpan = this.textSpans[i];
11279
- textPath = this.textPaths[i];
11280
- renderedLetter = renderedLetters[count];
11281
- count += 1;
11282
- if (renderedLetter._mdf.m) {
11283
- if (!this.isMasked) {
11284
- textSpan.style.transform = textSpan.style.webkitTransform = renderedLetter.m;
11285
- } else {
11286
- textSpan.setAttribute('transform', renderedLetter.m);
11287
- }
11288
- }
11289
- ////textSpan.setAttribute('opacity',renderedLetter.o);
11290
- textSpan.style.opacity = renderedLetter.o;
11291
- if (renderedLetter.sw && renderedLetter._mdf.sw) {
11292
- textPath.setAttribute('stroke-width', renderedLetter.sw);
11293
- }
11294
- if (renderedLetter.sc && renderedLetter._mdf.sc) {
11295
- textPath.setAttribute('stroke', renderedLetter.sc);
11296
- }
11297
- if (renderedLetter.fc && renderedLetter._mdf.fc) {
11298
- textPath.setAttribute('fill', renderedLetter.fc);
11299
- textPath.style.color = renderedLetter.fc;
11300
- }
11301
- }
11302
-
11303
- if (this.innerElem.getBBox && !this.hidden && (this._isFirstFrame || this._mdf)) {
11304
- var boundingBox = this.innerElem.getBBox();
11305
-
11306
- if (this.currentBBox.w !== boundingBox.width) {
11307
- this.currentBBox.w = boundingBox.width;
11308
- this.svgElement.setAttribute('width', boundingBox.width);
11309
- }
11310
- if (this.currentBBox.h !== boundingBox.height) {
11311
- this.currentBBox.h = boundingBox.height;
11312
- this.svgElement.setAttribute('height', boundingBox.height);
11313
- }
11314
-
11315
- var margin = 1;
11316
- if (this.currentBBox.w !== (boundingBox.width + margin * 2) || this.currentBBox.h !== (boundingBox.height + margin * 2) || this.currentBBox.x !== (boundingBox.x - margin) || this.currentBBox.y !== (boundingBox.y - margin)) {
11317
- this.currentBBox.w = boundingBox.width + margin * 2;
11318
- this.currentBBox.h = boundingBox.height + margin * 2;
11319
- this.currentBBox.x = boundingBox.x - margin;
11320
- this.currentBBox.y = boundingBox.y - margin;
11321
-
11322
- this.svgElement.setAttribute('viewBox', this.currentBBox.x + ' ' + this.currentBBox.y + ' ' + this.currentBBox.w + ' ' + this.currentBBox.h);
11323
- this.svgElement.style.transform = this.svgElement.style.webkitTransform = 'translate(' + this.currentBBox.x + 'px,' + this.currentBBox.y + 'px)';
11324
- }
11325
- }
11326
- };
11327
-
11328
- function HImageElement(data, globalData, comp) {
11329
- this.assetData = globalData.getAssetData(data.refId);
11330
- this.initElement(data, globalData, comp);
11331
- }
11332
-
11333
- extendPrototype([BaseElement, TransformElement, HBaseElement, HSolidElement, HierarchyElement, FrameElement, RenderableElement], HImageElement);
11334
-
11335
-
11336
- HImageElement.prototype.createContent = function () {
11337
- var assetPath = this.globalData.getAssetsPath(this.assetData);
11338
- var img = new Image();
11339
-
11340
- if (this.data.hasMask) {
11341
- this.imageElem = createNS('image');
11342
- this.imageElem.setAttribute('width', this.assetData.w + "px");
11343
- this.imageElem.setAttribute('height', this.assetData.h + "px");
11344
- this.imageElem.setAttributeNS('http://www.w3.org/1999/xlink', 'href', assetPath);
11345
- this.layerElement.appendChild(this.imageElem);
11346
- this.baseElement.setAttribute('width', this.assetData.w);
11347
- this.baseElement.setAttribute('height', this.assetData.h);
11348
- } else {
11349
- this.layerElement.appendChild(img);
11350
- }
11351
- img.src = assetPath;
11352
- if (this.data.ln) {
11353
- this.baseElement.setAttribute('id', this.data.ln);
11354
- }
11355
- };
11356
-
11357
- function HCameraElement(data, globalData, comp) {
11358
- this.initFrame();
11359
- this.initBaseData(data, globalData, comp);
11360
- this.initHierarchy();
11361
- var getProp = PropertyFactory.getProp;
11362
- this.pe = getProp(this, data.pe, 0, 0, this);
11363
- if (data.ks.p.s) {
11364
- this.px = getProp(this, data.ks.p.x, 1, 0, this);
11365
- this.py = getProp(this, data.ks.p.y, 1, 0, this);
11366
- this.pz = getProp(this, data.ks.p.z, 1, 0, this);
11367
- } else {
11368
- this.p = getProp(this, data.ks.p, 1, 0, this);
11369
- }
11370
- if (data.ks.a) {
11371
- this.a = getProp(this, data.ks.a, 1, 0, this);
11372
- }
11373
- if (data.ks.or.k.length && data.ks.or.k[0].to) {
11374
- var i, len = data.ks.or.k.length;
11375
- for (i = 0; i < len; i += 1) {
11376
- data.ks.or.k[i].to = null;
11377
- data.ks.or.k[i].ti = null;
11378
- }
11379
- }
11380
- this.or = getProp(this, data.ks.or, 1, degToRads, this);
11381
- this.or.sh = true;
11382
- this.rx = getProp(this, data.ks.rx, 0, degToRads, this);
11383
- this.ry = getProp(this, data.ks.ry, 0, degToRads, this);
11384
- this.rz = getProp(this, data.ks.rz, 0, degToRads, this);
11385
- this.mat = new Matrix();
11386
- this._prevMat = new Matrix();
11387
- this._isFirstFrame = true;
11388
-
11389
- // TODO: find a better way to make the HCamera element to be compatible with the LayerInterface and TransformInterface.
11390
- this.finalTransform = {
11391
- mProp: this
11392
- };
11393
- }
11394
- extendPrototype([BaseElement, FrameElement, HierarchyElement], HCameraElement);
11395
-
11396
- HCameraElement.prototype.setup = function () {
11397
- var i, len = this.comp.threeDElements.length,
11398
- comp;
11399
- for (i = 0; i < len; i += 1) {
11400
- //[perspectiveElem,container]
11401
- comp = this.comp.threeDElements[i];
11402
- if (comp.type === '3d') {
11403
- comp.perspectiveElem.style.perspective = comp.perspectiveElem.style.webkitPerspective = this.pe.v + 'px';
11404
- comp.container.style.transformOrigin = comp.container.style.mozTransformOrigin = comp.container.style.webkitTransformOrigin = "0px 0px 0px";
11405
- comp.perspectiveElem.style.transform = comp.perspectiveElem.style.webkitTransform = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)';
11406
- }
11407
- }
11408
- };
11409
-
11410
- HCameraElement.prototype.createElements = function () { };
11411
-
11412
- HCameraElement.prototype.hide = function () { };
11413
-
11414
- HCameraElement.prototype.renderFrame = function () {
11415
- var _mdf = this._isFirstFrame;
11416
- var i, len;
11417
- if (this.hierarchy) {
11418
- len = this.hierarchy.length;
11419
- for (i = 0; i < len; i += 1) {
11420
- _mdf = this.hierarchy[i].finalTransform.mProp._mdf || _mdf;
11421
- }
11422
- }
11423
- if (_mdf || this.pe._mdf || (this.p && this.p._mdf) || (this.px && (this.px._mdf || this.py._mdf || this.pz._mdf)) || this.rx._mdf || this.ry._mdf || this.rz._mdf || this.or._mdf || (this.a && this.a._mdf)) {
11424
- this.mat.reset();
11425
-
11426
- if (this.hierarchy) {
11427
- var mat;
11428
- len = this.hierarchy.length - 1;
11429
- for (i = len; i >= 0; i -= 1) {
11430
- var mTransf = this.hierarchy[i].finalTransform.mProp;
11431
- this.mat.translate(-mTransf.p.v[0], -mTransf.p.v[1], mTransf.p.v[2]);
11432
- this.mat.rotateX(-mTransf.or.v[0]).rotateY(-mTransf.or.v[1]).rotateZ(mTransf.or.v[2]);
11433
- this.mat.rotateX(-mTransf.rx.v).rotateY(-mTransf.ry.v).rotateZ(mTransf.rz.v);
11434
- this.mat.scale(1 / mTransf.s.v[0], 1 / mTransf.s.v[1], 1 / mTransf.s.v[2]);
11435
- this.mat.translate(mTransf.a.v[0], mTransf.a.v[1], mTransf.a.v[2]);
11436
- }
11437
- }
11438
- if (this.p) {
11439
- this.mat.translate(-this.p.v[0], -this.p.v[1], this.p.v[2]);
11440
- } else {
11441
- this.mat.translate(-this.px.v, -this.py.v, this.pz.v);
11442
- }
11443
- if (this.a) {
11444
- var diffVector
11445
- if (this.p) {
11446
- diffVector = [this.p.v[0] - this.a.v[0], this.p.v[1] - this.a.v[1], this.p.v[2] - this.a.v[2]];
11447
- } else {
11448
- diffVector = [this.px.v - this.a.v[0], this.py.v - this.a.v[1], this.pz.v - this.a.v[2]];
11449
- }
11450
- var mag = Math.sqrt(Math.pow(diffVector[0], 2) + Math.pow(diffVector[1], 2) + Math.pow(diffVector[2], 2));
11451
- //var lookDir = getNormalizedPoint(getDiffVector(this.a.v,this.p.v));
11452
- var lookDir = [diffVector[0] / mag, diffVector[1] / mag, diffVector[2] / mag];
11453
- var lookLengthOnXZ = Math.sqrt(lookDir[2] * lookDir[2] + lookDir[0] * lookDir[0]);
11454
- var m_rotationX = (Math.atan2(lookDir[1], lookLengthOnXZ));
11455
- var m_rotationY = (Math.atan2(lookDir[0], -lookDir[2]));
11456
- this.mat.rotateY(m_rotationY).rotateX(-m_rotationX);
11457
-
11458
- }
11459
- this.mat.rotateX(-this.rx.v).rotateY(-this.ry.v).rotateZ(this.rz.v);
11460
- this.mat.rotateX(-this.or.v[0]).rotateY(-this.or.v[1]).rotateZ(this.or.v[2]);
11461
- this.mat.translate(this.globalData.compSize.w / 2, this.globalData.compSize.h / 2, 0);
11462
- this.mat.translate(0, 0, this.pe.v);
11463
-
11464
-
11465
-
11466
-
11467
- var hasMatrixChanged = !this._prevMat.equals(this.mat);
11468
- if ((hasMatrixChanged || this.pe._mdf) && this.comp.threeDElements) {
11469
- len = this.comp.threeDElements.length;
11470
- var comp;
11471
- for (i = 0; i < len; i += 1) {
11472
- comp = this.comp.threeDElements[i];
11473
- if (comp.type === '3d') {
11474
- if (hasMatrixChanged) {
11475
- comp.container.style.transform = comp.container.style.webkitTransform = this.mat.toCSS();
11476
- }
11477
- if (this.pe._mdf) {
11478
- comp.perspectiveElem.style.perspective = comp.perspectiveElem.style.webkitPerspective = this.pe.v + 'px';
11479
- }
11480
- }
11481
- }
11482
- this.mat.clone(this._prevMat);
11483
- }
11484
- }
11485
- this._isFirstFrame = false;
11486
- };
11487
-
11488
- HCameraElement.prototype.prepareFrame = function (num) {
11489
- this.prepareProperties(num, true);
11490
- };
11491
-
11492
- HCameraElement.prototype.destroy = function () { };
11493
- HCameraElement.prototype.getBaseElement = function () {
11494
- return null;
11495
- };
11496
-
11497
- function HEffects() { }
11498
- HEffects.prototype.renderFrame = function () { };
11499
- var animationManager = (function () {
11500
- var moduleOb = {};
11501
- var registeredAnimations = [];
11502
- var initTime = 0;
11503
- var len = 0;
11504
- var playingAnimationsNum = 0;
11505
- var _stopped = true;
11506
- var _isFrozen = false;
11507
-
11508
- function removeElement(ev) {
11509
- var i = 0;
11510
- var animItem = ev.target;
11511
- while (i < len) {
11512
- if (registeredAnimations[i].animation === animItem) {
11513
- registeredAnimations.splice(i, 1);
11514
- i -= 1;
11515
- len -= 1;
11516
- if (!animItem.isPaused) {
11517
- subtractPlayingCount();
11518
- }
11519
- }
11520
- i += 1;
11521
- }
11522
- }
11523
-
11524
- function registerAnimation(element, animationData) {
11525
- if (!element) {
11526
- return null;
11527
- }
11528
- var i = 0;
11529
- while (i < len) {
11530
- if (registeredAnimations[i].elem == element && registeredAnimations[i].elem !== null) {
11531
- return registeredAnimations[i].animation;
11532
- }
11533
- i += 1;
11534
- }
11535
- var animItem = new AnimationItem();
11536
- setupAnimation(animItem, element);
11537
- animItem.setData(element, animationData);
11538
- return animItem;
11539
- }
11540
-
11541
- function getRegisteredAnimations() {
11542
- var i, len = registeredAnimations.length;
11543
- var animations = [];
11544
- for (i = 0; i < len; i += 1) {
11545
- animations.push(registeredAnimations[i].animation);
11546
- }
11547
- return animations;
11548
- }
11549
-
11550
- function addPlayingCount() {
11551
- playingAnimationsNum += 1;
11552
- activate();
11553
- }
11554
-
11555
- function subtractPlayingCount() {
11556
- playingAnimationsNum -= 1;
11557
- }
11558
-
11559
- function setupAnimation(animItem, element) {
11560
- animItem.addEventListener('destroy', removeElement);
11561
- animItem.addEventListener('_active', addPlayingCount);
11562
- animItem.addEventListener('_idle', subtractPlayingCount);
11563
- registeredAnimations.push({
11564
- elem: element,
11565
- animation: animItem
11566
- });
11567
- len += 1;
11568
- }
11569
-
11570
- function loadAnimation(params) {
11571
- var animItem = new AnimationItem();
11572
- setupAnimation(animItem, null);
11573
- animItem.setParams(params);
11574
- return animItem;
11575
- }
11576
-
11577
-
11578
- function setSpeed(val, animation) {
11579
- var i;
11580
- for (i = 0; i < len; i += 1) {
11581
- registeredAnimations[i].animation.setSpeed(val, animation);
11582
- }
11583
- }
11584
-
11585
- function setDirection(val, animation) {
11586
- var i;
11587
- for (i = 0; i < len; i += 1) {
11588
- registeredAnimations[i].animation.setDirection(val, animation);
11589
- }
11590
- }
11591
-
11592
- function play(animation) {
11593
- var i;
11594
- for (i = 0; i < len; i += 1) {
11595
- registeredAnimations[i].animation.play(animation);
11596
- }
11597
- }
11598
-
11599
- function resume(nowTime) {
11600
- var elapsedTime = nowTime - initTime;
11601
- var i;
11602
- for (i = 0; i < len; i += 1) {
11603
- registeredAnimations[i].animation.advanceTime(elapsedTime);
11604
- }
11605
- initTime = nowTime;
11606
- if (playingAnimationsNum && !_isFrozen) {
11607
- window.requestAnimationFrame(resume);
11608
- } else {
11609
- _stopped = true;
11610
- }
11611
- }
11612
-
11613
- function first(nowTime) {
11614
- initTime = nowTime;
11615
- window.requestAnimationFrame(resume);
11616
- }
11617
-
11618
- function pause(animation) {
11619
- var i;
11620
- for (i = 0; i < len; i += 1) {
11621
- registeredAnimations[i].animation.pause(animation);
11622
- }
11623
- }
11624
-
11625
- function goToAndStop(value, isFrame, animation) {
11626
- var i;
11627
- for (i = 0; i < len; i += 1) {
11628
- registeredAnimations[i].animation.goToAndStop(value, isFrame, animation);
11629
- }
11630
- }
11631
-
11632
- function stop(animation) {
11633
- var i;
11634
- for (i = 0; i < len; i += 1) {
11635
- registeredAnimations[i].animation.stop(animation);
11636
- }
11637
- }
11638
-
11639
- function togglePause(animation) {
11640
- var i;
11641
- for (i = 0; i < len; i += 1) {
11642
- registeredAnimations[i].animation.togglePause(animation);
11643
- }
11644
- }
11645
-
11646
- function destroy(animation) {
11647
- var i;
11648
- for (i = (len - 1); i >= 0; i -= 1) {
11649
- registeredAnimations[i].animation.destroy(animation);
11650
- }
11651
- }
11652
-
11653
- function searchAnimations(animationData, standalone, renderer) {
11654
- var animElements = [].concat([].slice.call(document.getElementsByClassName('lottie')),
11655
- [].slice.call(document.getElementsByClassName('bodymovin')));
11656
- var i, len = animElements.length;
11657
- for (i = 0; i < len; i += 1) {
11658
- if (renderer) {
11659
- animElements[i].setAttribute('data-bm-type', renderer);
11660
- }
11661
- registerAnimation(animElements[i], animationData);
11662
- }
11663
- if (standalone && len === 0) {
11664
- if (!renderer) {
11665
- renderer = 'svg';
11666
- }
11667
- var body = document.getElementsByTagName('body')[0];
11668
- body.innerHTML = '';
11669
- var div = createTag('div');
11670
- div.style.width = '100%';
11671
- div.style.height = '100%';
11672
- div.setAttribute('data-bm-type', renderer);
11673
- body.appendChild(div);
11674
- registerAnimation(div, animationData);
11675
- }
11676
- }
11677
-
11678
- function resize() {
11679
- var i;
11680
- for (i = 0; i < len; i += 1) {
11681
- registeredAnimations[i].animation.resize();
11682
- }
11683
- }
11684
-
11685
- function activate() {
11686
- if (!_isFrozen && playingAnimationsNum) {
11687
- if (_stopped) {
11688
- window.requestAnimationFrame(first);
11689
- _stopped = false;
11690
- }
11691
- }
11692
- }
11693
-
11694
- function freeze() {
11695
- _isFrozen = true;
11696
- }
11697
-
11698
- function unfreeze() {
11699
- _isFrozen = false;
11700
- activate();
11701
- }
11702
-
11703
- moduleOb.registerAnimation = registerAnimation;
11704
- moduleOb.loadAnimation = loadAnimation;
11705
- moduleOb.setSpeed = setSpeed;
11706
- moduleOb.setDirection = setDirection;
11707
- moduleOb.play = play;
11708
- moduleOb.pause = pause;
11709
- moduleOb.stop = stop;
11710
- moduleOb.togglePause = togglePause;
11711
- moduleOb.searchAnimations = searchAnimations;
11712
- moduleOb.resize = resize;
11713
- //moduleOb.start = start;
11714
- moduleOb.goToAndStop = goToAndStop;
11715
- moduleOb.destroy = destroy;
11716
- moduleOb.freeze = freeze;
11717
- moduleOb.unfreeze = unfreeze;
11718
- moduleOb.getRegisteredAnimations = getRegisteredAnimations;
11719
- return moduleOb;
11720
- }());
11721
-
11722
- var AnimationItem = function () {
11723
- this._cbs = [];
11724
- this.name = '';
11725
- this.path = '';
11726
- this.isLoaded = false;
11727
- this.currentFrame = 0;
11728
- this.currentRawFrame = 0;
11729
- this.firstFrame = 0;
11730
- this.totalFrames = 0;
11731
- this.frameRate = 0;
11732
- this.frameMult = 0;
11733
- this.playSpeed = 1;
11734
- this.playDirection = 1;
11735
- this.playCount = 0;
11736
- this.animationData = {};
11737
- this.assets = [];
11738
- this.isPaused = true;
11739
- this.autoplay = false;
11740
- this.loop = true;
11741
- this.renderer = null;
11742
- this.animationID = createElementID();
11743
- this.assetsPath = '';
11744
- this.timeCompleted = 0;
11745
- this.segmentPos = 0;
11746
- this.subframeEnabled = subframeEnabled;
11747
- this.segments = [];
11748
- this._idle = true;
11749
- this._completedLoop = false;
11750
- this.projectInterface = ProjectInterface();
11751
- this.imagePreloader = new ImagePreloader();
11752
- };
11753
-
11754
- extendPrototype([BaseEvent], AnimationItem);
11755
-
11756
- AnimationItem.prototype.setParams = function (params) {
11757
- if (params.context) {
11758
- this.context = params.context;
11759
- }
11760
- if (params.wrapper || params.container) {
11761
- this.wrapper = params.wrapper || params.container;
11762
- }
11763
- var animType = params.animType ? params.animType : params.renderer ? params.renderer : 'svg';
11764
- switch (animType) {
11765
- case 'canvas':
11766
- this.renderer = new CanvasRenderer(this, params.rendererSettings);
11767
- break;
11768
- case 'svg':
11769
- this.renderer = new SVGRenderer(this, params.rendererSettings);
11770
- break;
11771
- default:
11772
- this.renderer = new HybridRenderer(this, params.rendererSettings);
11773
- break;
11774
- }
11775
- this.renderer.setProjectInterface(this.projectInterface);
11776
- this.animType = animType;
11777
-
11778
- if (params.loop === '' || params.loop === null) { } else if (params.loop === false) {
11779
- this.loop = false;
11780
- } else if (params.loop === true) {
11781
- this.loop = true;
11782
- } else {
11783
- this.loop = parseInt(params.loop);
11784
- }
11785
- this.autoplay = 'autoplay' in params ? params.autoplay : true;
11786
- this.name = params.name ? params.name : '';
11787
- this.autoloadSegments = params.hasOwnProperty('autoloadSegments') ? params.autoloadSegments : true;
11788
- this.assetsPath = params.assetsPath;
11789
- if (params.animationData) {
11790
- this.configAnimation(params.animationData);
11791
- } else if (params.path) {
11792
-
11793
- if (params.path.lastIndexOf('\\') !== -1) {
11794
- this.path = params.path.substr(0, params.path.lastIndexOf('\\') + 1);
11795
- } else {
11796
- this.path = params.path.substr(0, params.path.lastIndexOf('/') + 1);
11797
- }
11798
- this.fileName = params.path.substr(params.path.lastIndexOf('/') + 1);
11799
- this.fileName = this.fileName.substr(0, this.fileName.lastIndexOf('.json'));
11800
-
11801
- assetLoader.load(params.path, this.configAnimation.bind(this), function () {
11802
- this.trigger('data_failed');
11803
- }.bind(this));
11804
- }
11805
-
11806
- this.initialSegment = params.initialSegment;
11807
- };
11808
-
11809
- AnimationItem.prototype.setData = function (wrapper, animationData) {
11810
- var params = {
11811
- wrapper: wrapper,
11812
- animationData: animationData ? (typeof animationData === "object") ? animationData : JSON.parse(animationData) : null
11813
- };
11814
- var wrapperAttributes = wrapper.attributes;
11815
-
11816
- params.path = wrapperAttributes.getNamedItem('data-animation-path') ? wrapperAttributes.getNamedItem('data-animation-path').value : wrapperAttributes.getNamedItem('data-bm-path') ? wrapperAttributes.getNamedItem('data-bm-path').value : wrapperAttributes.getNamedItem('bm-path') ? wrapperAttributes.getNamedItem('bm-path').value : '';
11817
- params.animType = wrapperAttributes.getNamedItem('data-anim-type') ? wrapperAttributes.getNamedItem('data-anim-type').value : wrapperAttributes.getNamedItem('data-bm-type') ? wrapperAttributes.getNamedItem('data-bm-type').value : wrapperAttributes.getNamedItem('bm-type') ? wrapperAttributes.getNamedItem('bm-type').value : wrapperAttributes.getNamedItem('data-bm-renderer') ? wrapperAttributes.getNamedItem('data-bm-renderer').value : wrapperAttributes.getNamedItem('bm-renderer') ? wrapperAttributes.getNamedItem('bm-renderer').value : 'canvas';
11818
-
11819
- var loop = wrapperAttributes.getNamedItem('data-anim-loop') ? wrapperAttributes.getNamedItem('data-anim-loop').value : wrapperAttributes.getNamedItem('data-bm-loop') ? wrapperAttributes.getNamedItem('data-bm-loop').value : wrapperAttributes.getNamedItem('bm-loop') ? wrapperAttributes.getNamedItem('bm-loop').value : '';
11820
- if (loop === '') { } else if (loop === 'false') {
11821
- params.loop = false;
11822
- } else if (loop === 'true') {
11823
- params.loop = true;
11824
- } else {
11825
- params.loop = parseInt(loop);
11826
- }
11827
- var autoplay = wrapperAttributes.getNamedItem('data-anim-autoplay') ? wrapperAttributes.getNamedItem('data-anim-autoplay').value : wrapperAttributes.getNamedItem('data-bm-autoplay') ? wrapperAttributes.getNamedItem('data-bm-autoplay').value : wrapperAttributes.getNamedItem('bm-autoplay') ? wrapperAttributes.getNamedItem('bm-autoplay').value : true;
11828
- params.autoplay = autoplay !== "false";
11829
-
11830
- params.name = wrapperAttributes.getNamedItem('data-name') ? wrapperAttributes.getNamedItem('data-name').value : wrapperAttributes.getNamedItem('data-bm-name') ? wrapperAttributes.getNamedItem('data-bm-name').value : wrapperAttributes.getNamedItem('bm-name') ? wrapperAttributes.getNamedItem('bm-name').value : '';
11831
- var prerender = wrapperAttributes.getNamedItem('data-anim-prerender') ? wrapperAttributes.getNamedItem('data-anim-prerender').value : wrapperAttributes.getNamedItem('data-bm-prerender') ? wrapperAttributes.getNamedItem('data-bm-prerender').value : wrapperAttributes.getNamedItem('bm-prerender') ? wrapperAttributes.getNamedItem('bm-prerender').value : '';
11832
-
11833
- if (prerender === 'false') {
11834
- params.prerender = false;
11835
- }
11836
- this.setParams(params);
11837
- };
11838
-
11839
- AnimationItem.prototype.includeLayers = function (data) {
11840
- if (data.op > this.animationData.op) {
11841
- this.animationData.op = data.op;
11842
- this.totalFrames = Math.floor(data.op - this.animationData.ip);
11843
- }
11844
- var layers = this.animationData.layers;
11845
- var i, len = layers.length;
11846
- var newLayers = data.layers;
11847
- var j, jLen = newLayers.length;
11848
- for (j = 0; j < jLen; j += 1) {
11849
- i = 0;
11850
- while (i < len) {
11851
- if (layers[i].id == newLayers[j].id) {
11852
- layers[i] = newLayers[j];
11853
- break;
11854
- }
11855
- i += 1;
11856
- }
11857
- }
11858
- if (data.chars || data.fonts) {
11859
- this.renderer.globalData.fontManager.addChars(data.chars);
11860
- this.renderer.globalData.fontManager.addFonts(data.fonts, this.renderer.globalData.defs);
11861
- }
11862
- if (data.assets) {
11863
- len = data.assets.length;
11864
- for (i = 0; i < len; i += 1) {
11865
- this.animationData.assets.push(data.assets[i]);
11866
- }
11867
- }
11868
- this.animationData.__complete = false;
11869
- dataManager.completeData(this.animationData, this.renderer.globalData.fontManager);
11870
- this.renderer.includeLayers(data.layers);
11871
- if (expressionsPlugin) {
11872
- expressionsPlugin.initExpressions(this);
11873
- }
11874
- this.loadNextSegment();
11875
- };
11876
-
11877
- AnimationItem.prototype.loadNextSegment = function () {
11878
- var segments = this.animationData.segments;
11879
- if (!segments || segments.length === 0 || !this.autoloadSegments) {
11880
- this.trigger('data_ready');
11881
- this.timeCompleted = this.totalFrames;
11882
- return;
11883
- }
11884
- var segment = segments.shift();
11885
- this.timeCompleted = segment.time * this.frameRate;
11886
- var segmentPath = this.path + this.fileName + '_' + this.segmentPos + '.json';
11887
- this.segmentPos += 1;
11888
- assetLoader.load(segmentPath, this.includeLayers.bind(this), function () {
11889
- this.trigger('data_failed');
11890
- }.bind(this));
11891
- };
11892
-
11893
- AnimationItem.prototype.loadSegments = function () {
11894
- var segments = this.animationData.segments;
11895
- if (!segments) {
11896
- this.timeCompleted = this.totalFrames;
11897
- }
11898
- this.loadNextSegment();
11899
- };
11900
-
11901
- AnimationItem.prototype.imagesLoaded = function () {
11902
- this.trigger('loaded_images');
11903
- this.checkLoaded()
11904
- }
11905
-
11906
- AnimationItem.prototype.preloadImages = function () {
11907
- this.imagePreloader.setAssetsPath(this.assetsPath);
11908
- this.imagePreloader.setPath(this.path);
11909
- this.imagePreloader.loadAssets(this.animationData.assets, this.imagesLoaded.bind(this));
11910
- }
11911
-
11912
- AnimationItem.prototype.configAnimation = function (animData) {
11913
- if (!this.renderer) {
11914
- return;
11915
- }
11916
- try {
11917
- this.animationData = animData;
11918
-
11919
- if (this.initialSegment) {
11920
- this.totalFrames = Math.floor(this.initialSegment[1] - this.initialSegment[0]);
11921
- this.firstFrame = Math.round(this.initialSegment[0]);
11922
- } else {
11923
- this.totalFrames = Math.floor(this.animationData.op - this.animationData.ip);
11924
- this.firstFrame = Math.round(this.animationData.ip);
11925
- }
11926
- this.renderer.configAnimation(animData);
11927
- if (!animData.assets) {
11928
- animData.assets = [];
11929
- }
11930
-
11931
- this.assets = this.animationData.assets;
11932
- this.frameRate = this.animationData.fr;
11933
- this.frameMult = this.animationData.fr / 1000;
11934
- this.renderer.searchExtraCompositions(animData.assets);
11935
- this.trigger('config_ready');
11936
- this.preloadImages();
11937
- this.loadSegments();
11938
- this.updaFrameModifier();
11939
- this.waitForFontsLoaded();
11940
- } catch (error) {
11941
- this.triggerConfigError(error);
11942
- }
11943
- };
11944
-
11945
- AnimationItem.prototype.waitForFontsLoaded = function () {
11946
- if (!this.renderer) {
11947
- return;
11948
- }
11949
- if (this.renderer.globalData.fontManager.loaded()) {
11950
- this.checkLoaded();
11951
- } else {
11952
- setTimeout(this.waitForFontsLoaded.bind(this), 20);
11953
- }
11954
- }
11955
-
11956
- AnimationItem.prototype.checkLoaded = function () {
11957
- if (!this.isLoaded && this.renderer.globalData.fontManager.loaded() && (this.imagePreloader.loaded() || this.renderer.rendererType !== 'canvas')) {
11958
- this.isLoaded = true;
11959
- dataManager.completeData(this.animationData, this.renderer.globalData.fontManager);
11960
- if (expressionsPlugin) {
11961
- expressionsPlugin.initExpressions(this);
11962
- }
11963
- this.renderer.initItems();
11964
- setTimeout(function () {
11965
- this.trigger('DOMLoaded');
11966
- }.bind(this), 0);
11967
- this.gotoFrame();
11968
- if (this.autoplay) {
11969
- this.play();
11970
- }
11971
- }
11972
- };
11973
-
11974
- AnimationItem.prototype.resize = function () {
11975
- this.renderer.updateContainerSize();
11976
- };
11977
-
11978
- AnimationItem.prototype.setSubframe = function (flag) {
11979
- this.subframeEnabled = flag ? true : false;
11980
- };
11981
-
11982
- AnimationItem.prototype.gotoFrame = function () {
11983
- this.currentFrame = this.subframeEnabled ? this.currentRawFrame : ~~this.currentRawFrame;
11984
-
11985
- if (this.timeCompleted !== this.totalFrames && this.currentFrame > this.timeCompleted) {
11986
- this.currentFrame = this.timeCompleted;
11987
- }
11988
- this.trigger('enterFrame');
11989
- this.renderFrame();
11990
- };
11991
-
11992
- AnimationItem.prototype.renderFrame = function () {
11993
- if (this.isLoaded === false) {
11994
- return;
11995
- }
11996
- try {
11997
- this.renderer.renderFrame(this.currentFrame + this.firstFrame);
11998
- } catch (error) {
11999
- this.triggerRenderFrameError(error);
12000
- }
12001
- };
12002
-
12003
- AnimationItem.prototype.play = function (name) {
12004
- if (name && this.name != name) {
12005
- return;
12006
- }
12007
- if (this.isPaused === true) {
12008
- this.isPaused = false;
12009
- if (this._idle) {
12010
- this._idle = false;
12011
- this.trigger('_active');
12012
- }
12013
- }
12014
- };
12015
-
12016
- AnimationItem.prototype.pause = function (name) {
12017
- if (name && this.name != name) {
12018
- return;
12019
- }
12020
- if (this.isPaused === false) {
12021
- this.isPaused = true;
12022
- this._idle = true;
12023
- this.trigger('_idle');
12024
- }
12025
- };
12026
-
12027
- AnimationItem.prototype.togglePause = function (name) {
12028
- if (name && this.name != name) {
12029
- return;
12030
- }
12031
- if (this.isPaused === true) {
12032
- this.play();
12033
- } else {
12034
- this.pause();
12035
- }
12036
- };
12037
-
12038
- AnimationItem.prototype.stop = function (name) {
12039
- if (name && this.name != name) {
12040
- return;
12041
- }
12042
- this.pause();
12043
- this.playCount = 0;
12044
- this._completedLoop = false;
12045
- this.setCurrentRawFrameValue(0);
12046
- };
12047
-
12048
- AnimationItem.prototype.goToAndStop = function (value, isFrame, name) {
12049
- if (name && this.name != name) {
12050
- return;
12051
- }
12052
- if (isFrame) {
12053
- this.setCurrentRawFrameValue(value);
12054
- } else {
12055
- this.setCurrentRawFrameValue(value * this.frameModifier);
12056
- }
12057
- this.pause();
12058
- };
12059
-
12060
- AnimationItem.prototype.goToAndPlay = function (value, isFrame, name) {
12061
- this.goToAndStop(value, isFrame, name);
12062
- this.play();
12063
- };
12064
-
12065
- AnimationItem.prototype.advanceTime = function (value) {
12066
- if (this.isPaused === true || this.isLoaded === false) {
12067
- return;
12068
- }
12069
- var nextValue = this.currentRawFrame + value * this.frameModifier;
12070
- var _isComplete = false;
12071
- // Checking if nextValue > totalFrames - 1 for addressing non looping and looping animations.
12072
- // If animation won't loop, it should stop at totalFrames - 1. If it will loop it should complete the last frame and then loop.
12073
- if (nextValue >= this.totalFrames - 1 && this.frameModifier > 0) {
12074
- if (!this.loop || this.playCount === this.loop) {
12075
- if (!this.checkSegments(nextValue > this.totalFrames ? nextValue % this.totalFrames : 0)) {
12076
- _isComplete = true;
12077
- nextValue = this.totalFrames - 1;
12078
- }
12079
- } else if (nextValue >= this.totalFrames) {
12080
- this.playCount += 1;
12081
- if (!this.checkSegments(nextValue % this.totalFrames)) {
12082
- this.setCurrentRawFrameValue(nextValue % this.totalFrames);
12083
- this._completedLoop = true;
12084
- this.trigger('loopComplete');
12085
- }
12086
- } else {
12087
- this.setCurrentRawFrameValue(nextValue);
12088
- }
12089
- } else if (nextValue < 0) {
12090
- if (!this.checkSegments(nextValue % this.totalFrames)) {
12091
- if (this.loop && !(this.playCount-- <= 0 && this.loop !== true)) {
12092
- this.setCurrentRawFrameValue(this.totalFrames + (nextValue % this.totalFrames));
12093
- if (!this._completedLoop) {
12094
- this._completedLoop = true;
12095
- } else {
12096
- this.trigger('loopComplete');
12097
- }
12098
- } else {
12099
- _isComplete = true;
12100
- nextValue = 0;
12101
- }
12102
- }
12103
- } else {
12104
- this.setCurrentRawFrameValue(nextValue);
12105
- }
12106
- if (_isComplete) {
12107
- this.setCurrentRawFrameValue(nextValue);
12108
- this.pause();
12109
- this.trigger('complete');
12110
- }
12111
- };
12112
-
12113
- AnimationItem.prototype.adjustSegment = function (arr, offset) {
12114
- this.playCount = 0;
12115
- if (arr[1] < arr[0]) {
12116
- if (this.frameModifier > 0) {
12117
- if (this.playSpeed < 0) {
12118
- this.setSpeed(-this.playSpeed);
12119
- } else {
12120
- this.setDirection(-1);
12121
- }
12122
- }
12123
- this.timeCompleted = this.totalFrames = arr[0] - arr[1];
12124
- this.firstFrame = arr[1];
12125
- this.setCurrentRawFrameValue(this.totalFrames - 0.001 - offset);
12126
- } else if (arr[1] > arr[0]) {
12127
- if (this.frameModifier < 0) {
12128
- if (this.playSpeed < 0) {
12129
- this.setSpeed(-this.playSpeed);
12130
- } else {
12131
- this.setDirection(1);
12132
- }
12133
- }
12134
- this.timeCompleted = this.totalFrames = arr[1] - arr[0];
12135
- this.firstFrame = arr[0];
12136
- this.setCurrentRawFrameValue(0.001 + offset);
12137
- }
12138
- this.trigger('segmentStart');
12139
- };
12140
- AnimationItem.prototype.setSegment = function (init, end) {
12141
- var pendingFrame = -1;
12142
- if (this.isPaused) {
12143
- if (this.currentRawFrame + this.firstFrame < init) {
12144
- pendingFrame = init;
12145
- } else if (this.currentRawFrame + this.firstFrame > end) {
12146
- pendingFrame = end - init;
12147
- }
12148
- }
12149
-
12150
- this.firstFrame = init;
12151
- this.timeCompleted = this.totalFrames = end - init;
12152
- if (pendingFrame !== -1) {
12153
- this.goToAndStop(pendingFrame, true);
12154
- }
12155
- };
12156
-
12157
- AnimationItem.prototype.playSegments = function (arr, forceFlag) {
12158
- if (forceFlag) {
12159
- this.segments.length = 0;
12160
- }
12161
- if (typeof arr[0] === 'object') {
12162
- var i, len = arr.length;
12163
- for (i = 0; i < len; i += 1) {
12164
- this.segments.push(arr[i]);
12165
- }
12166
- } else {
12167
- this.segments.push(arr);
12168
- }
12169
- if (this.segments.length && forceFlag) {
12170
- this.adjustSegment(this.segments.shift(), 0);
12171
- }
12172
- if (this.isPaused) {
12173
- this.play();
12174
- }
12175
- };
12176
-
12177
- AnimationItem.prototype.resetSegments = function (forceFlag) {
12178
- this.segments.length = 0;
12179
- this.segments.push([this.animationData.ip, this.animationData.op]);
12180
- //this.segments.push([this.animationData.ip*this.frameRate,Math.floor(this.animationData.op - this.animationData.ip+this.animationData.ip*this.frameRate)]);
12181
- if (forceFlag) {
12182
- this.checkSegments(0);
12183
- }
12184
- };
12185
- AnimationItem.prototype.checkSegments = function (offset) {
12186
- if (this.segments.length) {
12187
- this.adjustSegment(this.segments.shift(), offset);
12188
- return true;
12189
- }
12190
- return false;
12191
- };
12192
-
12193
- AnimationItem.prototype.destroy = function (name) {
12194
- if ((name && this.name != name) || !this.renderer) {
12195
- return;
12196
- }
12197
- this.renderer.destroy();
12198
- this.imagePreloader.destroy();
12199
- this.trigger('destroy');
12200
- this._cbs = null;
12201
- this.onEnterFrame = this.onLoopComplete = this.onComplete = this.onSegmentStart = this.onDestroy = null;
12202
- this.renderer = null;
12203
- };
12204
-
12205
- AnimationItem.prototype.setCurrentRawFrameValue = function (value) {
12206
- this.currentRawFrame = value;
12207
- this.gotoFrame();
12208
- };
12209
-
12210
- AnimationItem.prototype.setSpeed = function (val) {
12211
- this.playSpeed = val;
12212
- this.updaFrameModifier();
12213
- };
12214
-
12215
- AnimationItem.prototype.setDirection = function (val) {
12216
- this.playDirection = val < 0 ? -1 : 1;
12217
- this.updaFrameModifier();
12218
- };
12219
-
12220
- AnimationItem.prototype.updaFrameModifier = function () {
12221
- this.frameModifier = this.frameMult * this.playSpeed * this.playDirection;
12222
- };
12223
-
12224
- AnimationItem.prototype.getPath = function () {
12225
- return this.path;
12226
- };
12227
-
12228
- AnimationItem.prototype.getAssetsPath = function (assetData) {
12229
- var path = '';
12230
- if (assetData.e) {
12231
- path = assetData.p;
12232
- } else if (this.assetsPath) {
12233
- var imagePath = assetData.p;
12234
- if (imagePath.indexOf('images/') !== -1) {
12235
- imagePath = imagePath.split('/')[1];
12236
- }
12237
- path = this.assetsPath + imagePath;
12238
- } else {
12239
- path = this.path;
12240
- path += assetData.u ? assetData.u : '';
12241
- path += assetData.p;
12242
- }
12243
- return path;
12244
- };
12245
-
12246
- AnimationItem.prototype.getAssetData = function (id) {
12247
- var i = 0,
12248
- len = this.assets.length;
12249
- while (i < len) {
12250
- if (id == this.assets[i].id) {
12251
- return this.assets[i];
12252
- }
12253
- i += 1;
12254
- }
12255
- };
12256
-
12257
- AnimationItem.prototype.hide = function () {
12258
- this.renderer.hide();
12259
- };
12260
-
12261
- AnimationItem.prototype.show = function () {
12262
- this.renderer.show();
12263
- };
12264
-
12265
- AnimationItem.prototype.getDuration = function (isFrame) {
12266
- return isFrame ? this.totalFrames : this.totalFrames / this.frameRate;
12267
- };
12268
-
12269
- AnimationItem.prototype.trigger = function (name) {
12270
- if (this._cbs && this._cbs[name]) {
12271
- switch (name) {
12272
- case 'enterFrame':
12273
- this.triggerEvent(name, new BMEnterFrameEvent(name, this.currentFrame, this.totalFrames, this.frameModifier));
12274
- break;
12275
- case 'loopComplete':
12276
- this.triggerEvent(name, new BMCompleteLoopEvent(name, this.loop, this.playCount, this.frameMult));
12277
- break;
12278
- case 'complete':
12279
- this.triggerEvent(name, new BMCompleteEvent(name, this.frameMult));
12280
- break;
12281
- case 'segmentStart':
12282
- this.triggerEvent(name, new BMSegmentStartEvent(name, this.firstFrame, this.totalFrames));
12283
- break;
12284
- case 'destroy':
12285
- this.triggerEvent(name, new BMDestroyEvent(name, this));
12286
- break;
12287
- default:
12288
- this.triggerEvent(name);
12289
- }
12290
- }
12291
- if (name === 'enterFrame' && this.onEnterFrame) {
12292
- this.onEnterFrame.call(this, new BMEnterFrameEvent(name, this.currentFrame, this.totalFrames, this.frameMult));
12293
- }
12294
- if (name === 'loopComplete' && this.onLoopComplete) {
12295
- this.onLoopComplete.call(this, new BMCompleteLoopEvent(name, this.loop, this.playCount, this.frameMult));
12296
- }
12297
- if (name === 'complete' && this.onComplete) {
12298
- this.onComplete.call(this, new BMCompleteEvent(name, this.frameMult));
12299
- }
12300
- if (name === 'segmentStart' && this.onSegmentStart) {
12301
- this.onSegmentStart.call(this, new BMSegmentStartEvent(name, this.firstFrame, this.totalFrames));
12302
- }
12303
- if (name === 'destroy' && this.onDestroy) {
12304
- this.onDestroy.call(this, new BMDestroyEvent(name, this));
12305
- }
12306
- };
12307
-
12308
- AnimationItem.prototype.triggerRenderFrameError = function (nativeError) {
12309
-
12310
- var error = new BMRenderFrameErrorEvent(nativeError, this.currentFrame);
12311
- this.triggerEvent('error', error);
12312
-
12313
- if (this.onError) {
12314
- this.onError.call(this, error);
12315
- }
12316
- }
12317
-
12318
- AnimationItem.prototype.triggerConfigError = function (nativeError) {
12319
-
12320
- var error = new BMConfigErrorEvent(nativeError, this.currentFrame);
12321
- this.triggerEvent('error', error);
12322
-
12323
- if (this.onError) {
12324
- this.onError.call(this, error);
12325
- }
12326
- }
12327
- var Expressions = (function () {
12328
- var ob = {};
12329
- ob.initExpressions = initExpressions;
12330
-
12331
-
12332
- function initExpressions(animation) {
12333
-
12334
- var stackCount = 0;
12335
- var registers = [];
12336
-
12337
- function pushExpression() {
12338
- stackCount += 1;
12339
- }
12340
-
12341
- function popExpression() {
12342
- stackCount -= 1;
12343
- if (stackCount === 0) {
12344
- releaseInstances();
12345
- }
12346
- }
12347
-
12348
- function registerExpressionProperty(expression) {
12349
- if (registers.indexOf(expression) === -1) {
12350
- registers.push(expression)
12351
- }
12352
- }
12353
-
12354
- function releaseInstances() {
12355
- var i, len = registers.length;
12356
- for (i = 0; i < len; i += 1) {
12357
- registers[i].release();
12358
- }
12359
- registers.length = 0;
12360
- }
12361
-
12362
- animation.renderer.compInterface = CompExpressionInterface(animation.renderer);
12363
- animation.renderer.globalData.projectInterface.registerComposition(animation.renderer);
12364
- animation.renderer.globalData.pushExpression = pushExpression;
12365
- animation.renderer.globalData.popExpression = popExpression;
12366
- animation.renderer.globalData.registerExpressionProperty = registerExpressionProperty;
12367
- }
12368
- return ob;
12369
- }());
12370
-
12371
- expressionsPlugin = Expressions;
12372
-
12373
- var ExpressionManager = (function () {
12374
- 'use strict';
12375
- var ob = {};
12376
- var Math = BMMath;
12377
- var window = null;
12378
- var document = null;
12379
-
12380
- function $bm_isInstanceOfArray(arr) {
12381
- return arr.constructor === Array || arr.constructor === Float32Array;
12382
- }
12383
-
12384
- function isNumerable(tOfV, v) {
12385
- return tOfV === 'number' || tOfV === 'boolean' || tOfV === 'string' || v instanceof Number;
12386
- }
12387
-
12388
- function $bm_neg(a) {
12389
- var tOfA = typeof a;
12390
- if (tOfA === 'number' || tOfA === 'boolean' || a instanceof Number) {
12391
- return -a;
12392
- }
12393
- if ($bm_isInstanceOfArray(a)) {
12394
- var i, lenA = a.length;
12395
- var retArr = [];
12396
- for (i = 0; i < lenA; i += 1) {
12397
- retArr[i] = -a[i];
12398
- }
12399
- return retArr;
12400
- }
12401
- if (a.propType) {
12402
- return a.v;
12403
- }
12404
- }
12405
-
12406
- var easeInBez = BezierFactory.getBezierEasing(0.333, 0, .833, .833, 'easeIn').get;
12407
- var easeOutBez = BezierFactory.getBezierEasing(0.167, 0.167, .667, 1, 'easeOut').get;
12408
- var easeInOutBez = BezierFactory.getBezierEasing(.33, 0, .667, 1, 'easeInOut').get;
12409
-
12410
- function sum(a, b) {
12411
- var tOfA = typeof a;
12412
- var tOfB = typeof b;
12413
- if (tOfA === 'string' || tOfB === 'string') {
12414
- return a + b;
12415
- }
12416
- if (isNumerable(tOfA, a) && isNumerable(tOfB, b)) {
12417
- return a + b;
12418
- }
12419
- if ($bm_isInstanceOfArray(a) && isNumerable(tOfB, b)) {
12420
- a = a.slice(0);
12421
- a[0] = a[0] + b;
12422
- return a;
12423
- }
12424
- if (isNumerable(tOfA, a) && $bm_isInstanceOfArray(b)) {
12425
- b = b.slice(0);
12426
- b[0] = a + b[0];
12427
- return b;
12428
- }
12429
- if ($bm_isInstanceOfArray(a) && $bm_isInstanceOfArray(b)) {
12430
-
12431
- var i = 0,
12432
- lenA = a.length,
12433
- lenB = b.length;
12434
- var retArr = [];
12435
- while (i < lenA || i < lenB) {
12436
- if ((typeof a[i] === 'number' || a[i] instanceof Number) && (typeof b[i] === 'number' || b[i] instanceof Number)) {
12437
- retArr[i] = a[i] + b[i];
12438
- } else {
12439
- retArr[i] = b[i] === undefined ? a[i] : a[i] || b[i];
12440
- }
12441
- i += 1;
12442
- }
12443
- return retArr;
12444
- }
12445
- return 0;
12446
- }
12447
- var add = sum;
12448
-
12449
- function sub(a, b) {
12450
- var tOfA = typeof a;
12451
- var tOfB = typeof b;
12452
- if (isNumerable(tOfA, a) && isNumerable(tOfB, b)) {
12453
- if (tOfA === 'string') {
12454
- a = parseInt(a);
12455
- }
12456
- if (tOfB === 'string') {
12457
- b = parseInt(b);
12458
- }
12459
- return a - b;
12460
- }
12461
- if ($bm_isInstanceOfArray(a) && isNumerable(tOfB, b)) {
12462
- a = a.slice(0);
12463
- a[0] = a[0] - b;
12464
- return a;
12465
- }
12466
- if (isNumerable(tOfA, a) && $bm_isInstanceOfArray(b)) {
12467
- b = b.slice(0);
12468
- b[0] = a - b[0];
12469
- return b;
12470
- }
12471
- if ($bm_isInstanceOfArray(a) && $bm_isInstanceOfArray(b)) {
12472
- var i = 0,
12473
- lenA = a.length,
12474
- lenB = b.length;
12475
- var retArr = [];
12476
- while (i < lenA || i < lenB) {
12477
- if ((typeof a[i] === 'number' || a[i] instanceof Number) && (typeof b[i] === 'number' || b[i] instanceof Number)) {
12478
- retArr[i] = a[i] - b[i];
12479
- } else {
12480
- retArr[i] = b[i] === undefined ? a[i] : a[i] || b[i];
12481
- }
12482
- i += 1;
12483
- }
12484
- return retArr;
12485
- }
12486
- return 0;
12487
- }
12488
-
12489
- function mul(a, b) {
12490
- var tOfA = typeof a;
12491
- var tOfB = typeof b;
12492
- var arr;
12493
- if (isNumerable(tOfA, a) && isNumerable(tOfB, b)) {
12494
- return a * b;
12495
- }
12496
-
12497
- var i, len;
12498
- if ($bm_isInstanceOfArray(a) && isNumerable(tOfB, b)) {
12499
- len = a.length;
12500
- arr = createTypedArray('float32', len);
12501
- for (i = 0; i < len; i += 1) {
12502
- arr[i] = a[i] * b;
12503
- }
12504
- return arr;
12505
- }
12506
- if (isNumerable(tOfA, a) && $bm_isInstanceOfArray(b)) {
12507
- len = b.length;
12508
- arr = createTypedArray('float32', len);
12509
- for (i = 0; i < len; i += 1) {
12510
- arr[i] = a * b[i];
12511
- }
12512
- return arr;
12513
- }
12514
- return 0;
12515
- }
12516
-
12517
- function div(a, b) {
12518
- var tOfA = typeof a;
12519
- var tOfB = typeof b;
12520
- var arr;
12521
- if (isNumerable(tOfA, a) && isNumerable(tOfB, b)) {
12522
- return a / b;
12523
- }
12524
- var i, len;
12525
- if ($bm_isInstanceOfArray(a) && isNumerable(tOfB, b)) {
12526
- len = a.length;
12527
- arr = createTypedArray('float32', len);
12528
- for (i = 0; i < len; i += 1) {
12529
- arr[i] = a[i] / b;
12530
- }
12531
- return arr;
12532
- }
12533
- if (isNumerable(tOfA, a) && $bm_isInstanceOfArray(b)) {
12534
- len = b.length;
12535
- arr = createTypedArray('float32', len);
12536
- for (i = 0; i < len; i += 1) {
12537
- arr[i] = a / b[i];
12538
- }
12539
- return arr;
12540
- }
12541
- return 0;
12542
- }
12543
-
12544
- function mod(a, b) {
12545
- if (typeof a === 'string') {
12546
- a = parseInt(a);
12547
- }
12548
- if (typeof b === 'string') {
12549
- b = parseInt(b);
12550
- }
12551
- return a % b;
12552
- }
12553
- var $bm_sum = sum;
12554
- var $bm_sub = sub;
12555
- var $bm_mul = mul;
12556
- var $bm_div = div;
12557
- var $bm_mod = mod;
12558
-
12559
- function clamp(num, min, max) {
12560
- if (min > max) {
12561
- var mm = max;
12562
- max = min;
12563
- min = mm;
12564
- }
12565
- return Math.min(Math.max(num, min), max);
12566
- }
12567
-
12568
- function radiansToDegrees(val) {
12569
- return val / degToRads;
12570
- }
12571
- var radians_to_degrees = radiansToDegrees;
12572
-
12573
- function degreesToRadians(val) {
12574
- return val * degToRads;
12575
- }
12576
- var degrees_to_radians = radiansToDegrees;
12577
-
12578
- var helperLengthArray = [0, 0, 0, 0, 0, 0];
12579
-
12580
- function length(arr1, arr2) {
12581
- if (typeof arr1 === 'number' || arr1 instanceof Number) {
12582
- arr2 = arr2 || 0;
12583
- return Math.abs(arr1 - arr2);
12584
- }
12585
- if (!arr2) {
12586
- arr2 = helperLengthArray;
12587
- }
12588
- var i, len = Math.min(arr1.length, arr2.length);
12589
- var addedLength = 0;
12590
- for (i = 0; i < len; i += 1) {
12591
- addedLength += Math.pow(arr2[i] - arr1[i], 2);
12592
- }
12593
- return Math.sqrt(addedLength);
12594
- }
12595
-
12596
- function normalize(vec) {
12597
- return div(vec, length(vec));
12598
- }
12599
-
12600
- function rgbToHsl(val) {
12601
- var r = val[0];
12602
- var g = val[1];
12603
- var b = val[2];
12604
- var max = Math.max(r, g, b),
12605
- min = Math.min(r, g, b);
12606
- var h, s, l = (max + min) / 2;
12607
-
12608
- if (max == min) {
12609
- h = s = 0; // achromatic
12610
- } else {
12611
- var d = max - min;
12612
- s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
12613
- switch (max) {
12614
- case r:
12615
- h = (g - b) / d + (g < b ? 6 : 0);
12616
- break;
12617
- case g:
12618
- h = (b - r) / d + 2;
12619
- break;
12620
- case b:
12621
- h = (r - g) / d + 4;
12622
- break;
12623
- }
12624
- h /= 6;
12625
- }
12626
-
12627
- return [h, s, l, val[3]];
12628
- }
12629
-
12630
- function hue2rgb(p, q, t) {
12631
- if (t < 0) t += 1;
12632
- if (t > 1) t -= 1;
12633
- if (t < 1 / 6) return p + (q - p) * 6 * t;
12634
- if (t < 1 / 2) return q;
12635
- if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
12636
- return p;
12637
- }
12638
-
12639
- function hslToRgb(val) {
12640
- var h = val[0];
12641
- var s = val[1];
12642
- var l = val[2];
12643
-
12644
- var r, g, b;
12645
-
12646
- if (s === 0) {
12647
- r = g = b = l; // achromatic
12648
- } else {
12649
-
12650
- var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
12651
- var p = 2 * l - q;
12652
- r = hue2rgb(p, q, h + 1 / 3);
12653
- g = hue2rgb(p, q, h);
12654
- b = hue2rgb(p, q, h - 1 / 3);
12655
- }
12656
-
12657
- return [r, g, b, val[3]];
12658
- }
12659
-
12660
- function linear(t, tMin, tMax, value1, value2) {
12661
- if (value1 === undefined || value2 === undefined) {
12662
- value1 = tMin;
12663
- value2 = tMax;
12664
- tMin = 0;
12665
- tMax = 1;
12666
- }
12667
- if (tMax < tMin) {
12668
- var _tMin = tMax;
12669
- tMax = tMin;
12670
- tMin = _tMin;
12671
- }
12672
- if (t <= tMin) {
12673
- return value1;
12674
- } else if (t >= tMax) {
12675
- return value2;
12676
- }
12677
- var perc = tMax === tMin ? 0 : (t - tMin) / (tMax - tMin);
12678
- if (!value1.length) {
12679
- return value1 + (value2 - value1) * perc;
12680
- }
12681
- var i, len = value1.length;
12682
- var arr = createTypedArray('float32', len);
12683
- for (i = 0; i < len; i += 1) {
12684
- arr[i] = value1[i] + (value2[i] - value1[i]) * perc;
12685
- }
12686
- return arr;
12687
- }
12688
-
12689
- function random(min, max) {
12690
- if (max === undefined) {
12691
- if (min === undefined) {
12692
- min = 0;
12693
- max = 1;
12694
- } else {
12695
- max = min;
12696
- min = undefined;
12697
- }
12698
- }
12699
- if (max.length) {
12700
- var i, len = max.length;
12701
- if (!min) {
12702
- min = createTypedArray('float32', len);
12703
- }
12704
- var arr = createTypedArray('float32', len);
12705
- var rnd = BMMath.random();
12706
- for (i = 0; i < len; i += 1) {
12707
- arr[i] = min[i] + rnd * (max[i] - min[i]);
12708
- }
12709
- return arr;
12710
- }
12711
- if (min === undefined) {
12712
- min = 0;
12713
- }
12714
- var rndm = BMMath.random();
12715
- return min + rndm * (max - min);
12716
- }
12717
-
12718
- function createPath(points, inTangents, outTangents, closed) {
12719
- var i, len = points.length;
12720
- var path = shape_pool.newElement();
12721
- path.setPathData(!!closed, len);
12722
- var arrPlaceholder = [0, 0],
12723
- inVertexPoint, outVertexPoint;
12724
- for (i = 0; i < len; i += 1) {
12725
- inVertexPoint = (inTangents && inTangents[i]) ? inTangents[i] : arrPlaceholder;
12726
- outVertexPoint = (outTangents && outTangents[i]) ? outTangents[i] : arrPlaceholder;
12727
- path.setTripleAt(points[i][0], points[i][1], outVertexPoint[0] + points[i][0], outVertexPoint[1] + points[i][1], inVertexPoint[0] + points[i][0], inVertexPoint[1] + points[i][1], i, true);
12728
- }
12729
- return path;
12730
- }
12731
-
12732
- function initiateExpression(elem, data, property) {
12733
- var val = data.x;
12734
- var needsVelocity = /velocity(?![\w\d])/.test(val);
12735
- var _needsRandom = val.indexOf('random') !== -1;
12736
- var elemType = elem.data.ty;
12737
- var transform, $bm_transform, content, effect;
12738
- var thisProperty = property;
12739
- thisProperty.valueAtTime = thisProperty.getValueAtTime;
12740
- Object.defineProperty(thisProperty, 'value', {
12741
- get: function () {
12742
- return thisProperty.v
12743
- }
12744
- })
12745
- elem.comp.frameDuration = 1 / elem.comp.globalData.frameRate;
12746
- elem.comp.displayStartTime = 0;
12747
- var inPoint = elem.data.ip / elem.comp.globalData.frameRate;
12748
- var outPoint = elem.data.op / elem.comp.globalData.frameRate;
12749
- var width = elem.data.sw ? elem.data.sw : 0;
12750
- var height = elem.data.sh ? elem.data.sh : 0;
12751
- var name = elem.data.nm;
12752
- var loopIn, loop_in, loopOut, loop_out, smooth;
12753
- var toWorld, fromWorld, fromComp, toComp, fromCompToSurface, position, rotation, anchorPoint, scale, thisLayer, thisComp, mask, valueAtTime, velocityAtTime;
12754
- var __expression_functions = [];
12755
- if (data.xf) {
12756
- var i, len = data.xf.length;
12757
- for (i = 0; i < len; i += 1) {
12758
- __expression_functions[i] = eval('(function(){ return ' + data.xf[i] + '}())');
12759
- }
12760
- }
12761
-
12762
- var scoped_bm_rt;
12763
- var expression_function = eval('[function _expression_function(){' + val + ';scoped_bm_rt=$bm_rt}' + ']')[0];
12764
- var numKeys = property.kf ? data.k.length : 0;
12765
-
12766
- var active = !this.data || this.data.hd !== true;
12767
-
12768
- var wiggle = function wiggle(freq, amp) {
12769
- var i, j, len = this.pv.length ? this.pv.length : 1;
12770
- var addedAmps = createTypedArray('float32', len);
12771
- freq = 5;
12772
- var iterations = Math.floor(time * freq);
12773
- i = 0;
12774
- j = 0;
12775
- while (i < iterations) {
12776
- //var rnd = BMMath.random();
12777
- for (j = 0; j < len; j += 1) {
12778
- addedAmps[j] += -amp + amp * 2 * BMMath.random();
12779
- //addedAmps[j] += -amp + amp*2*rnd;
12780
- }
12781
- i += 1;
12782
- }
12783
- //var rnd2 = BMMath.random();
12784
- var periods = time * freq;
12785
- var perc = periods - Math.floor(periods);
12786
- var arr = createTypedArray('float32', len);
12787
- if (len > 1) {
12788
- for (j = 0; j < len; j += 1) {
12789
- arr[j] = this.pv[j] + addedAmps[j] + (-amp + amp * 2 * BMMath.random()) * perc;
12790
- //arr[j] = this.pv[j] + addedAmps[j] + (-amp + amp*2*rnd)*perc;
12791
- //arr[i] = this.pv[i] + addedAmp + amp1*perc + amp2*(1-perc);
12792
- }
12793
- return arr;
12794
- } else {
12795
- return this.pv + addedAmps[0] + (-amp + amp * 2 * BMMath.random()) * perc;
12796
- }
12797
- }.bind(this);
12798
-
12799
- if (thisProperty.loopIn) {
12800
- loopIn = thisProperty.loopIn.bind(thisProperty);
12801
- loop_in = loopIn;
12802
- }
12803
-
12804
- if (thisProperty.loopOut) {
12805
- loopOut = thisProperty.loopOut.bind(thisProperty);
12806
- loop_out = loopOut;
12807
- }
12808
-
12809
- if (thisProperty.smooth) {
12810
- smooth = thisProperty.smooth.bind(thisProperty);
12811
- }
12812
-
12813
- function loopInDuration(type, duration) {
12814
- return loopIn(type, duration, true);
12815
- }
12816
-
12817
- function loopOutDuration(type, duration) {
12818
- return loopOut(type, duration, true);
12819
- }
12820
-
12821
- if (this.getValueAtTime) {
12822
- valueAtTime = this.getValueAtTime.bind(this);
12823
- }
12824
-
12825
- if (this.getVelocityAtTime) {
12826
- velocityAtTime = this.getVelocityAtTime.bind(this);
12827
- }
12828
-
12829
- var comp = elem.comp.globalData.projectInterface.bind(elem.comp.globalData.projectInterface);
12830
-
12831
- function lookAt(elem1, elem2) {
12832
- var fVec = [elem2[0] - elem1[0], elem2[1] - elem1[1], elem2[2] - elem1[2]];
12833
- var pitch = Math.atan2(fVec[0], Math.sqrt(fVec[1] * fVec[1] + fVec[2] * fVec[2])) / degToRads;
12834
- var yaw = -Math.atan2(fVec[1], fVec[2]) / degToRads;
12835
- return [yaw, pitch, 0];
12836
- }
12837
-
12838
- function easeOut(t, tMin, tMax, val1, val2) {
12839
- return applyEase(easeOutBez, t, tMin, tMax, val1, val2);
12840
- }
12841
-
12842
- function easeIn(t, tMin, tMax, val1, val2) {
12843
- return applyEase(easeInBez, t, tMin, tMax, val1, val2);
12844
- }
12845
-
12846
- function ease(t, tMin, tMax, val1, val2) {
12847
- return applyEase(easeInOutBez, t, tMin, tMax, val1, val2);
12848
- }
12849
-
12850
- function applyEase(fn, t, tMin, tMax, val1, val2) {
12851
- if (val1 === undefined) {
12852
- val1 = tMin;
12853
- val2 = tMax;
12854
- } else {
12855
- t = (t - tMin) / (tMax - tMin);
12856
- }
12857
- t = t > 1 ? 1 : t < 0 ? 0 : t;
12858
- var mult = fn(t);
12859
- if ($bm_isInstanceOfArray(val1)) {
12860
- var i, len = val1.length;
12861
- var arr = createTypedArray('float32', len);
12862
- for (i = 0; i < len; i += 1) {
12863
- arr[i] = (val2[i] - val1[i]) * mult + val1[i];
12864
- }
12865
- return arr;
12866
- } else {
12867
- return (val2 - val1) * mult + val1;
12868
- }
12869
- }
12870
-
12871
- function nearestKey(time) {
12872
- var i, len = data.k.length,
12873
- index, keyTime;
12874
- if (!data.k.length || typeof (data.k[0]) === 'number') {
12875
- index = 0;
12876
- keyTime = 0;
12877
- } else {
12878
- index = -1;
12879
- time *= elem.comp.globalData.frameRate;
12880
- if (time < data.k[0].t) {
12881
- index = 1;
12882
- keyTime = data.k[0].t;
12883
- } else {
12884
- for (i = 0; i < len - 1; i += 1) {
12885
- if (time === data.k[i].t) {
12886
- index = i + 1;
12887
- keyTime = data.k[i].t;
12888
- break;
12889
- } else if (time > data.k[i].t && time < data.k[i + 1].t) {
12890
- if (time - data.k[i].t > data.k[i + 1].t - time) {
12891
- index = i + 2;
12892
- keyTime = data.k[i + 1].t;
12893
- } else {
12894
- index = i + 1;
12895
- keyTime = data.k[i].t;
12896
- }
12897
- break;
12898
- }
12899
- }
12900
- if (index === -1) {
12901
- index = i + 1;
12902
- keyTime = data.k[i].t;
12903
- }
12904
- }
12905
-
12906
- }
12907
- var ob = {};
12908
- ob.index = index;
12909
- ob.time = keyTime / elem.comp.globalData.frameRate;
12910
- return ob;
12911
- }
12912
-
12913
- function key(ind) {
12914
- var ob, i, len;
12915
- if (!data.k.length || typeof (data.k[0]) === 'number') {
12916
- throw new Error('The property has no keyframe at index ' + ind);
12917
- }
12918
- ind -= 1;
12919
- ob = {
12920
- time: data.k[ind].t / elem.comp.globalData.frameRate,
12921
- value: []
12922
- };
12923
- var arr = data.k[ind].hasOwnProperty('s') ? data.k[ind].s : data.k[ind - 1].e;
12924
-
12925
- len = arr.length;
12926
- for (i = 0; i < len; i += 1) {
12927
- ob[i] = arr[i];
12928
- ob.value[i] = arr[i]
12929
- }
12930
- return ob;
12931
- }
12932
-
12933
- function framesToTime(frames, fps) {
12934
- if (!fps) {
12935
- fps = elem.comp.globalData.frameRate;
12936
- }
12937
- return frames / fps;
12938
- }
12939
-
12940
- function timeToFrames(t, fps) {
12941
- if (!t && t !== 0) {
12942
- t = time;
12943
- }
12944
- if (!fps) {
12945
- fps = elem.comp.globalData.frameRate;
12946
- }
12947
- return t * fps;
12948
- }
12949
-
12950
- function seedRandom(seed) {
12951
- BMMath.seedrandom(randSeed + seed);
12952
- }
12953
-
12954
- function sourceRectAtTime() {
12955
- return elem.sourceRectAtTime();
12956
- }
12957
-
12958
- function substring(init, end) {
12959
- if (typeof value === 'string') {
12960
- if (end === undefined) {
12961
- return value.substring(init)
12962
- }
12963
- return value.substring(init, end)
12964
- }
12965
- return '';
12966
- }
12967
-
12968
- function substr(init, end) {
12969
- if (typeof value === 'string') {
12970
- if (end === undefined) {
12971
- return value.substr(init)
12972
- }
12973
- return value.substr(init, end)
12974
- }
12975
- return '';
12976
- }
12977
-
12978
- function posterizeTime(framesPerSecond) {
12979
- time = framesPerSecond === 0 ? 0 : Math.floor(time * framesPerSecond) / framesPerSecond
12980
- value = valueAtTime(time)
12981
- }
12982
-
12983
- var time, velocity, value, text, textIndex, textTotal, selectorValue;
12984
- var index = elem.data.ind;
12985
- var hasParent = !!(elem.hierarchy && elem.hierarchy.length);
12986
- var parent;
12987
- var randSeed = Math.floor(Math.random() * 1000000);
12988
- var globalData = elem.globalData;
12989
-
12990
- function executeExpression(_value) {
12991
- // globalData.pushExpression();
12992
- value = _value;
12993
- if (_needsRandom) {
12994
- seedRandom(randSeed);
12995
- }
12996
- if (this.frameExpressionId === elem.globalData.frameId && this.propType !== 'textSelector') {
12997
- return value;
12998
- }
12999
- if (this.propType === 'textSelector') {
13000
- textIndex = this.textIndex;
13001
- textTotal = this.textTotal;
13002
- selectorValue = this.selectorValue;
13003
- }
13004
- if (!thisLayer) {
13005
- text = elem.layerInterface.text;
13006
- thisLayer = elem.layerInterface;
13007
- thisComp = elem.comp.compInterface;
13008
- toWorld = thisLayer.toWorld.bind(thisLayer);
13009
- fromWorld = thisLayer.fromWorld.bind(thisLayer);
13010
- fromComp = thisLayer.fromComp.bind(thisLayer);
13011
- toComp = thisLayer.toComp.bind(thisLayer);
13012
- mask = thisLayer.mask ? thisLayer.mask.bind(thisLayer) : null;
13013
- fromCompToSurface = fromComp;
13014
- }
13015
- if (!transform) {
13016
- transform = elem.layerInterface("ADBE Transform Group");
13017
- $bm_transform = transform;
13018
- if (transform) {
13019
- anchorPoint = transform.anchorPoint;
13020
- /*position = transform.position;
13021
- rotation = transform.rotation;
13022
- scale = transform.scale;*/
13023
- }
13024
- }
13025
-
13026
- if (elemType === 4 && !content) {
13027
- content = thisLayer("ADBE Root Vectors Group");
13028
- }
13029
- if (!effect) {
13030
- effect = thisLayer(4);
13031
- }
13032
- hasParent = !!(elem.hierarchy && elem.hierarchy.length);
13033
- if (hasParent && !parent) {
13034
- parent = elem.hierarchy[0].layerInterface;
13035
- }
13036
- time = this.comp.renderedFrame / this.comp.globalData.frameRate;
13037
- if (needsVelocity) {
13038
- velocity = velocityAtTime(time);
13039
- }
13040
- expression_function();
13041
- this.frameExpressionId = elem.globalData.frameId;
13042
-
13043
-
13044
- //TODO: Check if it's possible to return on ShapeInterface the .v value
13045
- if (scoped_bm_rt.propType === "shape") {
13046
- scoped_bm_rt = scoped_bm_rt.v;
13047
- }
13048
- // globalData.popExpression();
13049
- return scoped_bm_rt;
13050
- }
13051
- return executeExpression;
13052
- }
13053
-
13054
- ob.initiateExpression = initiateExpression;
13055
- return ob;
13056
- }());
13057
- var expressionHelpers = (function () {
13058
-
13059
- function searchExpressions(elem, data, prop) {
13060
- if (data.x) {
13061
- prop.k = true;
13062
- prop.x = true;
13063
- prop.initiateExpression = ExpressionManager.initiateExpression;
13064
- prop.effectsSequence.push(prop.initiateExpression(elem, data, prop).bind(prop));
13065
- }
13066
- }
13067
-
13068
- function getValueAtTime(frameNum) {
13069
- frameNum *= this.elem.globalData.frameRate;
13070
- frameNum -= this.offsetTime;
13071
- if (frameNum !== this._cachingAtTime.lastFrame) {
13072
- this._cachingAtTime.lastIndex = this._cachingAtTime.lastFrame < frameNum ? this._cachingAtTime.lastIndex : 0;
13073
- this._cachingAtTime.value = this.interpolateValue(frameNum, this._cachingAtTime);
13074
- this._cachingAtTime.lastFrame = frameNum;
13075
- }
13076
- return this._cachingAtTime.value;
13077
-
13078
- }
13079
-
13080
- function getSpeedAtTime(frameNum) {
13081
- var delta = -0.01;
13082
- var v1 = this.getValueAtTime(frameNum);
13083
- var v2 = this.getValueAtTime(frameNum + delta);
13084
- var speed = 0;
13085
- if (v1.length) {
13086
- var i;
13087
- for (i = 0; i < v1.length; i += 1) {
13088
- speed += Math.pow(v2[i] - v1[i], 2);
13089
- }
13090
- speed = Math.sqrt(speed) * 100;
13091
- } else {
13092
- speed = 0;
13093
- }
13094
- return speed;
13095
- }
13096
-
13097
- function getVelocityAtTime(frameNum) {
13098
- if (this.vel !== undefined) {
13099
- return this.vel;
13100
- }
13101
- var delta = -0.001;
13102
- //frameNum += this.elem.data.st;
13103
- var v1 = this.getValueAtTime(frameNum);
13104
- var v2 = this.getValueAtTime(frameNum + delta);
13105
- var velocity;
13106
- if (v1.length) {
13107
- velocity = createTypedArray('float32', v1.length);
13108
- var i;
13109
- for (i = 0; i < v1.length; i += 1) {
13110
- //removing frameRate
13111
- //if needed, don't add it here
13112
- //velocity[i] = this.elem.globalData.frameRate*((v2[i] - v1[i])/delta);
13113
- velocity[i] = (v2[i] - v1[i]) / delta;
13114
- }
13115
- } else {
13116
- velocity = (v2 - v1) / delta;
13117
- }
13118
- return velocity;
13119
- }
13120
-
13121
- function getStaticValueAtTime() {
13122
- return this.pv;
13123
- }
13124
-
13125
- function setGroupProperty(propertyGroup) {
13126
- this.propertyGroup = propertyGroup;
13127
- }
13128
-
13129
- return {
13130
- searchExpressions: searchExpressions,
13131
- getSpeedAtTime: getSpeedAtTime,
13132
- getVelocityAtTime: getVelocityAtTime,
13133
- getValueAtTime: getValueAtTime,
13134
- getStaticValueAtTime: getStaticValueAtTime,
13135
- setGroupProperty: setGroupProperty,
13136
- }
13137
- }());
13138
- (function addPropertyDecorator() {
13139
-
13140
- function loopOut(type, duration, durationFlag) {
13141
- if (!this.k || !this.keyframes) {
13142
- return this.pv;
13143
- }
13144
- type = type ? type.toLowerCase() : '';
13145
- var currentFrame = this.comp.renderedFrame;
13146
- var keyframes = this.keyframes;
13147
- var lastKeyFrame = keyframes[keyframes.length - 1].t;
13148
- if (currentFrame <= lastKeyFrame) {
13149
- return this.pv;
13150
- } else {
13151
- var cycleDuration, firstKeyFrame;
13152
- if (!durationFlag) {
13153
- if (!duration || duration > keyframes.length - 1) {
13154
- duration = keyframes.length - 1;
13155
- }
13156
- firstKeyFrame = keyframes[keyframes.length - 1 - duration].t;
13157
- cycleDuration = lastKeyFrame - firstKeyFrame;
13158
- } else {
13159
- if (!duration) {
13160
- cycleDuration = Math.max(0, lastKeyFrame - this.elem.data.ip);
13161
- } else {
13162
- cycleDuration = Math.abs(lastKeyFrame - elem.comp.globalData.frameRate * duration);
13163
- }
13164
- firstKeyFrame = lastKeyFrame - cycleDuration;
13165
- }
13166
- var i, len, ret;
13167
- if (type === 'pingpong') {
13168
- var iterations = Math.floor((currentFrame - firstKeyFrame) / cycleDuration);
13169
- if (iterations % 2 !== 0) {
13170
- return this.getValueAtTime(((cycleDuration - (currentFrame - firstKeyFrame) % cycleDuration + firstKeyFrame)) / this.comp.globalData.frameRate, 0);
13171
- }
13172
- } else if (type === 'offset') {
13173
- var initV = this.getValueAtTime(firstKeyFrame / this.comp.globalData.frameRate, 0);
13174
- var endV = this.getValueAtTime(lastKeyFrame / this.comp.globalData.frameRate, 0);
13175
- var current = this.getValueAtTime(((currentFrame - firstKeyFrame) % cycleDuration + firstKeyFrame) / this.comp.globalData.frameRate, 0);
13176
- var repeats = Math.floor((currentFrame - firstKeyFrame) / cycleDuration);
13177
- if (this.pv.length) {
13178
- ret = new Array(initV.length);
13179
- len = ret.length;
13180
- for (i = 0; i < len; i += 1) {
13181
- ret[i] = (endV[i] - initV[i]) * repeats + current[i];
13182
- }
13183
- return ret;
13184
- }
13185
- return (endV - initV) * repeats + current;
13186
- } else if (type === 'continue') {
13187
- var lastValue = this.getValueAtTime(lastKeyFrame / this.comp.globalData.frameRate, 0);
13188
- var nextLastValue = this.getValueAtTime((lastKeyFrame - 0.001) / this.comp.globalData.frameRate, 0);
13189
- if (this.pv.length) {
13190
- ret = new Array(lastValue.length);
13191
- len = ret.length;
13192
- for (i = 0; i < len; i += 1) {
13193
- ret[i] = lastValue[i] + (lastValue[i] - nextLastValue[i]) * ((currentFrame - lastKeyFrame) / this.comp.globalData.frameRate) / 0.0005;
13194
- }
13195
- return ret;
13196
- }
13197
- return lastValue + (lastValue - nextLastValue) * (((currentFrame - lastKeyFrame)) / 0.001);
13198
- }
13199
- return this.getValueAtTime((((currentFrame - firstKeyFrame) % cycleDuration + firstKeyFrame)) / this.comp.globalData.frameRate, 0);
13200
- }
13201
- }
13202
-
13203
- function loopIn(type, duration, durationFlag) {
13204
- if (!this.k) {
13205
- return this.pv;
13206
- }
13207
- type = type ? type.toLowerCase() : '';
13208
- var currentFrame = this.comp.renderedFrame;
13209
- var keyframes = this.keyframes;
13210
- var firstKeyFrame = keyframes[0].t;
13211
- if (currentFrame >= firstKeyFrame) {
13212
- return this.pv;
13213
- } else {
13214
- var cycleDuration, lastKeyFrame;
13215
- if (!durationFlag) {
13216
- if (!duration || duration > keyframes.length - 1) {
13217
- duration = keyframes.length - 1;
13218
- }
13219
- lastKeyFrame = keyframes[duration].t;
13220
- cycleDuration = lastKeyFrame - firstKeyFrame;
13221
- } else {
13222
- if (!duration) {
13223
- cycleDuration = Math.max(0, this.elem.data.op - firstKeyFrame);
13224
- } else {
13225
- cycleDuration = Math.abs(elem.comp.globalData.frameRate * duration);
13226
- }
13227
- lastKeyFrame = firstKeyFrame + cycleDuration;
13228
- }
13229
- var i, len, ret;
13230
- if (type === 'pingpong') {
13231
- var iterations = Math.floor((firstKeyFrame - currentFrame) / cycleDuration);
13232
- if (iterations % 2 === 0) {
13233
- return this.getValueAtTime((((firstKeyFrame - currentFrame) % cycleDuration + firstKeyFrame)) / this.comp.globalData.frameRate, 0);
13234
- }
13235
- } else if (type === 'offset') {
13236
- var initV = this.getValueAtTime(firstKeyFrame / this.comp.globalData.frameRate, 0);
13237
- var endV = this.getValueAtTime(lastKeyFrame / this.comp.globalData.frameRate, 0);
13238
- var current = this.getValueAtTime((cycleDuration - (firstKeyFrame - currentFrame) % cycleDuration + firstKeyFrame) / this.comp.globalData.frameRate, 0);
13239
- var repeats = Math.floor((firstKeyFrame - currentFrame) / cycleDuration) + 1;
13240
- if (this.pv.length) {
13241
- ret = new Array(initV.length);
13242
- len = ret.length;
13243
- for (i = 0; i < len; i += 1) {
13244
- ret[i] = current[i] - (endV[i] - initV[i]) * repeats;
13245
- }
13246
- return ret;
13247
- }
13248
- return current - (endV - initV) * repeats;
13249
- } else if (type === 'continue') {
13250
- var firstValue = this.getValueAtTime(firstKeyFrame / this.comp.globalData.frameRate, 0);
13251
- var nextFirstValue = this.getValueAtTime((firstKeyFrame + 0.001) / this.comp.globalData.frameRate, 0);
13252
- if (this.pv.length) {
13253
- ret = new Array(firstValue.length);
13254
- len = ret.length;
13255
- for (i = 0; i < len; i += 1) {
13256
- ret[i] = firstValue[i] + (firstValue[i] - nextFirstValue[i]) * (firstKeyFrame - currentFrame) / 0.001;
13257
- }
13258
- return ret;
13259
- }
13260
- return firstValue + (firstValue - nextFirstValue) * (firstKeyFrame - currentFrame) / 0.001;
13261
- }
13262
- return this.getValueAtTime(((cycleDuration - (firstKeyFrame - currentFrame) % cycleDuration + firstKeyFrame)) / this.comp.globalData.frameRate, 0);
13263
- }
13264
- }
13265
-
13266
- function smooth(width, samples) {
13267
- if (!this.k) {
13268
- return this.pv;
13269
- }
13270
- width = (width || 0.4) * 0.5;
13271
- samples = Math.floor(samples || 5);
13272
- if (samples <= 1) {
13273
- return this.pv;
13274
- }
13275
- var currentTime = this.comp.renderedFrame / this.comp.globalData.frameRate;
13276
- var initFrame = currentTime - width;
13277
- var endFrame = currentTime + width;
13278
- var sampleFrequency = samples > 1 ? (endFrame - initFrame) / (samples - 1) : 1;
13279
- var i = 0,
13280
- j = 0;
13281
- var value;
13282
- if (this.pv.length) {
13283
- value = createTypedArray('float32', this.pv.length);
13284
- } else {
13285
- value = 0;
13286
- }
13287
- var sampleValue;
13288
- while (i < samples) {
13289
- sampleValue = this.getValueAtTime(initFrame + i * sampleFrequency);
13290
- if (this.pv.length) {
13291
- for (j = 0; j < this.pv.length; j += 1) {
13292
- value[j] += sampleValue[j];
13293
- }
13294
- } else {
13295
- value += sampleValue;
13296
- }
13297
- i += 1;
13298
- }
13299
- if (this.pv.length) {
13300
- for (j = 0; j < this.pv.length; j += 1) {
13301
- value[j] /= samples;
13302
- }
13303
- } else {
13304
- value /= samples;
13305
- }
13306
- return value;
13307
- }
13308
-
13309
- function getValueAtTime(frameNum) {
13310
- frameNum *= this.elem.globalData.frameRate;
13311
- frameNum -= this.offsetTime;
13312
- if (frameNum !== this._cachingAtTime.lastFrame) {
13313
- this._cachingAtTime.lastIndex = this._cachingAtTime.lastFrame < frameNum ? this._cachingAtTime.lastIndex : 0;
13314
- this._cachingAtTime.value = this.interpolateValue(frameNum, this._cachingAtTime);
13315
- this._cachingAtTime.lastFrame = frameNum;
13316
- }
13317
- return this._cachingAtTime.value;
13318
-
13319
- }
13320
-
13321
- function getTransformValueAtTime(time) {
13322
- console.warn('Transform at time not supported');
13323
- }
13324
-
13325
- function getTransformStaticValueAtTime(time) {
13326
-
13327
- }
13328
-
13329
- var getTransformProperty = TransformPropertyFactory.getTransformProperty;
13330
- TransformPropertyFactory.getTransformProperty = function (elem, data, container) {
13331
- var prop = getTransformProperty(elem, data, container);
13332
- if (prop.dynamicProperties.length) {
13333
- prop.getValueAtTime = getTransformValueAtTime.bind(prop);
13334
- } else {
13335
- prop.getValueAtTime = getTransformStaticValueAtTime.bind(prop);
13336
- }
13337
- prop.setGroupProperty = expressionHelpers.setGroupProperty;
13338
- return prop;
13339
- };
13340
-
13341
- var propertyGetProp = PropertyFactory.getProp;
13342
- PropertyFactory.getProp = function (elem, data, type, mult, container) {
13343
- var prop = propertyGetProp(elem, data, type, mult, container);
13344
- //prop.getVelocityAtTime = getVelocityAtTime;
13345
- //prop.loopOut = loopOut;
13346
- //prop.loopIn = loopIn;
13347
- if (prop.kf) {
13348
- prop.getValueAtTime = expressionHelpers.getValueAtTime.bind(prop);
13349
- } else {
13350
- prop.getValueAtTime = expressionHelpers.getStaticValueAtTime.bind(prop);
13351
- }
13352
- prop.setGroupProperty = expressionHelpers.setGroupProperty;
13353
- prop.loopOut = loopOut;
13354
- prop.loopIn = loopIn;
13355
- prop.smooth = smooth;
13356
- prop.getVelocityAtTime = expressionHelpers.getVelocityAtTime.bind(prop);
13357
- prop.getSpeedAtTime = expressionHelpers.getSpeedAtTime.bind(prop);
13358
- prop.numKeys = data.a === 1 ? data.k.length : 0;
13359
- prop.propertyIndex = data.ix;
13360
- var value = 0;
13361
- if (type !== 0) {
13362
- value = createTypedArray('float32', data.a === 1 ? data.k[0].s.length : data.k.length);
13363
- }
13364
- prop._cachingAtTime = {
13365
- lastFrame: initialDefaultFrame,
13366
- lastIndex: 0,
13367
- value: value
13368
- };
13369
- expressionHelpers.searchExpressions(elem, data, prop);
13370
- if (prop.k) {
13371
- container.addDynamicProperty(prop);
13372
- }
13373
-
13374
- return prop;
13375
- };
13376
-
13377
- function getShapeValueAtTime(frameNum) {
13378
- //For now this caching object is created only when needed instead of creating it when the shape is initialized.
13379
- if (!this._cachingAtTime) {
13380
- this._cachingAtTime = {
13381
- shapeValue: shape_pool.clone(this.pv),
13382
- lastIndex: 0,
13383
- lastTime: initialDefaultFrame
13384
- };
13385
- }
13386
-
13387
- frameNum *= this.elem.globalData.frameRate;
13388
- frameNum -= this.offsetTime;
13389
- if (frameNum !== this._cachingAtTime.lastTime) {
13390
- this._cachingAtTime.lastIndex = this._cachingAtTime.lastTime < frameNum ? this._caching.lastIndex : 0;
13391
- this._cachingAtTime.lastTime = frameNum;
13392
- this.interpolateShape(frameNum, this._cachingAtTime.shapeValue, this._cachingAtTime);
13393
- }
13394
- return this._cachingAtTime.shapeValue;
13395
- }
13396
-
13397
- var ShapePropertyConstructorFunction = ShapePropertyFactory.getConstructorFunction();
13398
- var KeyframedShapePropertyConstructorFunction = ShapePropertyFactory.getKeyframedConstructorFunction();
13399
-
13400
- function ShapeExpressions() { }
13401
- ShapeExpressions.prototype = {
13402
- vertices: function (prop, time) {
13403
- if (this.k) {
13404
- this.getValue();
13405
- }
13406
- var shapePath = this.v;
13407
- if (time !== undefined) {
13408
- shapePath = this.getValueAtTime(time, 0);
13409
- }
13410
- var i, len = shapePath._length;
13411
- var vertices = shapePath[prop];
13412
- var points = shapePath.v;
13413
- var arr = createSizedArray(len);
13414
- for (i = 0; i < len; i += 1) {
13415
- if (prop === 'i' || prop === 'o') {
13416
- arr[i] = [vertices[i][0] - points[i][0], vertices[i][1] - points[i][1]];
13417
- } else {
13418
- arr[i] = [vertices[i][0], vertices[i][1]];
13419
- }
13420
-
13421
- }
13422
- return arr;
13423
- },
13424
- points: function (time) {
13425
- return this.vertices('v', time);
13426
- },
13427
- inTangents: function (time) {
13428
- return this.vertices('i', time);
13429
- },
13430
- outTangents: function (time) {
13431
- return this.vertices('o', time);
13432
- },
13433
- isClosed: function () {
13434
- return this.v.c;
13435
- },
13436
- pointOnPath: function (perc, time) {
13437
- var shapePath = this.v;
13438
- if (time !== undefined) {
13439
- shapePath = this.getValueAtTime(time, 0);
13440
- }
13441
- if (!this._segmentsLength) {
13442
- this._segmentsLength = bez.getSegmentsLength(shapePath);
13443
- }
13444
-
13445
- var segmentsLength = this._segmentsLength;
13446
- var lengths = segmentsLength.lengths;
13447
- var lengthPos = segmentsLength.totalLength * perc;
13448
- var i = 0,
13449
- len = lengths.length;
13450
- var j = 0,
13451
- jLen;
13452
- var accumulatedLength = 0,
13453
- pt;
13454
- while (i < len) {
13455
- if (accumulatedLength + lengths[i].addedLength > lengthPos) {
13456
- var initIndex = i;
13457
- var endIndex = (shapePath.c && i === len - 1) ? 0 : i + 1;
13458
- var segmentPerc = (lengthPos - accumulatedLength) / lengths[i].addedLength;
13459
- pt = bez.getPointInSegment(shapePath.v[initIndex], shapePath.v[endIndex], shapePath.o[initIndex], shapePath.i[endIndex], segmentPerc, lengths[i]);
13460
- break;
13461
- } else {
13462
- accumulatedLength += lengths[i].addedLength;
13463
- }
13464
- i += 1;
13465
- }
13466
- if (!pt) {
13467
- pt = shapePath.c ? [shapePath.v[0][0], shapePath.v[0][1]] : [shapePath.v[shapePath._length - 1][0], shapePath.v[shapePath._length - 1][1]];
13468
- }
13469
- return pt;
13470
- },
13471
- vectorOnPath: function (perc, time, vectorType) {
13472
- //perc doesn't use triple equality because it can be a Number object as well as a primitive.
13473
- perc = perc == 1 ? this.v.c ? 0 : 0.999 : perc;
13474
- var pt1 = this.pointOnPath(perc, time);
13475
- var pt2 = this.pointOnPath(perc + 0.001, time);
13476
- var xLength = pt2[0] - pt1[0];
13477
- var yLength = pt2[1] - pt1[1];
13478
- var magnitude = Math.sqrt(Math.pow(xLength, 2) + Math.pow(yLength, 2));
13479
- if (magnitude === 0) {
13480
- return [0, 0];
13481
- }
13482
- var unitVector = vectorType === 'tangent' ? [xLength / magnitude, yLength / magnitude] : [-yLength / magnitude, xLength / magnitude];
13483
- return unitVector;
13484
- },
13485
- tangentOnPath: function (perc, time) {
13486
- return this.vectorOnPath(perc, time, 'tangent');
13487
- },
13488
- normalOnPath: function (perc, time) {
13489
- return this.vectorOnPath(perc, time, 'normal');
13490
- },
13491
- setGroupProperty: expressionHelpers.setGroupProperty,
13492
- getValueAtTime: expressionHelpers.getStaticValueAtTime
13493
- };
13494
- extendPrototype([ShapeExpressions], ShapePropertyConstructorFunction);
13495
- extendPrototype([ShapeExpressions], KeyframedShapePropertyConstructorFunction);
13496
- KeyframedShapePropertyConstructorFunction.prototype.getValueAtTime = getShapeValueAtTime;
13497
- KeyframedShapePropertyConstructorFunction.prototype.initiateExpression = ExpressionManager.initiateExpression;
13498
-
13499
- var propertyGetShapeProp = ShapePropertyFactory.getShapeProp;
13500
- ShapePropertyFactory.getShapeProp = function (elem, data, type, arr, trims) {
13501
- var prop = propertyGetShapeProp(elem, data, type, arr, trims);
13502
- prop.propertyIndex = data.ix;
13503
- prop.lock = false;
13504
- if (type === 3) {
13505
- expressionHelpers.searchExpressions(elem, data.pt, prop);
13506
- } else if (type === 4) {
13507
- expressionHelpers.searchExpressions(elem, data.ks, prop);
13508
- }
13509
- if (prop.k) {
13510
- elem.addDynamicProperty(prop);
13511
- }
13512
- return prop;
13513
- };
13514
- }());
13515
- (function addDecorator() {
13516
-
13517
- function searchExpressions() {
13518
- if (this.data.d.x) {
13519
- this.calculateExpression = ExpressionManager.initiateExpression.bind(this)(this.elem, this.data.d, this);
13520
- this.addEffect(this.getExpressionValue.bind(this));
13521
- return true;
13522
- }
13523
- }
13524
-
13525
- TextProperty.prototype.getExpressionValue = function (currentValue, text) {
13526
- var newValue = this.calculateExpression(text);
13527
- if (currentValue.t !== newValue) {
13528
- var newData = {};
13529
- this.copyData(newData, currentValue);
13530
- newData.t = newValue.toString();
13531
- newData.__complete = false;
13532
- return newData;
13533
- }
13534
- return currentValue;
13535
- }
13536
-
13537
- TextProperty.prototype.searchProperty = function () {
13538
-
13539
- var isKeyframed = this.searchKeyframes();
13540
- var hasExpressions = this.searchExpressions();
13541
- this.kf = isKeyframed || hasExpressions;
13542
- return this.kf;
13543
- };
13544
-
13545
- TextProperty.prototype.searchExpressions = searchExpressions;
13546
-
13547
- }());
13548
- var ShapeExpressionInterface = (function () {
13549
-
13550
- function iterateElements(shapes, view, propertyGroup) {
13551
- var arr = [];
13552
- var i, len = shapes ? shapes.length : 0;
13553
- for (i = 0; i < len; i += 1) {
13554
- if (shapes[i].ty == 'gr') {
13555
- arr.push(groupInterfaceFactory(shapes[i], view[i], propertyGroup));
13556
- } else if (shapes[i].ty == 'fl') {
13557
- arr.push(fillInterfaceFactory(shapes[i], view[i], propertyGroup));
13558
- } else if (shapes[i].ty == 'st') {
13559
- arr.push(strokeInterfaceFactory(shapes[i], view[i], propertyGroup));
13560
- } else if (shapes[i].ty == 'tm') {
13561
- arr.push(trimInterfaceFactory(shapes[i], view[i], propertyGroup));
13562
- } else if (shapes[i].ty == 'tr') {
13563
- //arr.push(transformInterfaceFactory(shapes[i],view[i],propertyGroup));
13564
- } else if (shapes[i].ty == 'el') {
13565
- arr.push(ellipseInterfaceFactory(shapes[i], view[i], propertyGroup));
13566
- } else if (shapes[i].ty == 'sr') {
13567
- arr.push(starInterfaceFactory(shapes[i], view[i], propertyGroup));
13568
- } else if (shapes[i].ty == 'sh') {
13569
- arr.push(pathInterfaceFactory(shapes[i], view[i], propertyGroup));
13570
- } else if (shapes[i].ty == 'rc') {
13571
- arr.push(rectInterfaceFactory(shapes[i], view[i], propertyGroup));
13572
- } else if (shapes[i].ty == 'rd') {
13573
- arr.push(roundedInterfaceFactory(shapes[i], view[i], propertyGroup));
13574
- } else if (shapes[i].ty == 'rp') {
13575
- arr.push(repeaterInterfaceFactory(shapes[i], view[i], propertyGroup));
13576
- }
13577
- }
13578
- return arr;
13579
- }
13580
-
13581
- function contentsInterfaceFactory(shape, view, propertyGroup) {
13582
- var interfaces;
13583
- var interfaceFunction = function _interfaceFunction(value) {
13584
- var i = 0,
13585
- len = interfaces.length;
13586
- while (i < len) {
13587
- if (interfaces[i]._name === value || interfaces[i].mn === value || interfaces[i].propertyIndex === value || interfaces[i].ix === value || interfaces[i].ind === value) {
13588
- return interfaces[i];
13589
- }
13590
- i += 1;
13591
- }
13592
- if (typeof value === 'number') {
13593
- return interfaces[value - 1];
13594
- }
13595
- };
13596
- interfaceFunction.propertyGroup = function (val) {
13597
- if (val === 1) {
13598
- return interfaceFunction;
13599
- } else {
13600
- return propertyGroup(val - 1);
13601
- }
13602
- };
13603
- interfaces = iterateElements(shape.it, view.it, interfaceFunction.propertyGroup);
13604
- interfaceFunction.numProperties = interfaces.length;
13605
- interfaceFunction.propertyIndex = shape.cix;
13606
- interfaceFunction._name = shape.nm;
13607
-
13608
- return interfaceFunction;
13609
- }
13610
-
13611
- function groupInterfaceFactory(shape, view, propertyGroup) {
13612
- var interfaceFunction = function _interfaceFunction(value) {
13613
- switch (value) {
13614
- case 'ADBE Vectors Group':
13615
- case 'Contents':
13616
- case 2:
13617
- return interfaceFunction.content;
13618
- //Not necessary for now. Keeping them here in case a new case appears
13619
- //case 'ADBE Vector Transform Group':
13620
- //case 3:
13621
- default:
13622
- return interfaceFunction.transform;
13623
- }
13624
- };
13625
- interfaceFunction.propertyGroup = function (val) {
13626
- if (val === 1) {
13627
- return interfaceFunction;
13628
- } else {
13629
- return propertyGroup(val - 1);
13630
- }
13631
- };
13632
- var content = contentsInterfaceFactory(shape, view, interfaceFunction.propertyGroup);
13633
- var transformInterface = transformInterfaceFactory(shape.it[shape.it.length - 1], view.it[view.it.length - 1], interfaceFunction.propertyGroup);
13634
- interfaceFunction.content = content;
13635
- interfaceFunction.transform = transformInterface;
13636
- Object.defineProperty(interfaceFunction, '_name', {
13637
- get: function () {
13638
- return shape.nm;
13639
- }
13640
- });
13641
- //interfaceFunction.content = interfaceFunction;
13642
- interfaceFunction.numProperties = shape.np;
13643
- interfaceFunction.propertyIndex = shape.ix;
13644
- interfaceFunction.nm = shape.nm;
13645
- interfaceFunction.mn = shape.mn;
13646
- return interfaceFunction;
13647
- }
13648
-
13649
- function fillInterfaceFactory(shape, view, propertyGroup) {
13650
- function interfaceFunction(val) {
13651
- if (val === 'Color' || val === 'color') {
13652
- return interfaceFunction.color;
13653
- } else if (val === 'Opacity' || val === 'opacity') {
13654
- return interfaceFunction.opacity;
13655
- }
13656
- }
13657
- Object.defineProperties(interfaceFunction, {
13658
- 'color': {
13659
- get: ExpressionPropertyInterface(view.c)
13660
- },
13661
- 'opacity': {
13662
- get: ExpressionPropertyInterface(view.o)
13663
- },
13664
- '_name': {
13665
- value: shape.nm
13666
- },
13667
- 'mn': {
13668
- value: shape.mn
13669
- }
13670
- });
13671
-
13672
- view.c.setGroupProperty(propertyGroup);
13673
- view.o.setGroupProperty(propertyGroup);
13674
- return interfaceFunction;
13675
- }
13676
-
13677
- function strokeInterfaceFactory(shape, view, propertyGroup) {
13678
- function _propertyGroup(val) {
13679
- if (val === 1) {
13680
- return ob;
13681
- } else {
13682
- return propertyGroup(val - 1);
13683
- }
13684
- }
13685
-
13686
- function _dashPropertyGroup(val) {
13687
- if (val === 1) {
13688
- return dashOb;
13689
- } else {
13690
- return _propertyGroup(val - 1);
13691
- }
13692
- }
13693
-
13694
- function addPropertyToDashOb(i) {
13695
- Object.defineProperty(dashOb, shape.d[i].nm, {
13696
- get: ExpressionPropertyInterface(view.d.dataProps[i].p)
13697
- });
13698
- }
13699
- var i, len = shape.d ? shape.d.length : 0;
13700
- var dashOb = {};
13701
- for (i = 0; i < len; i += 1) {
13702
- addPropertyToDashOb(i);
13703
- view.d.dataProps[i].p.setGroupProperty(_dashPropertyGroup);
13704
- }
13705
-
13706
- function interfaceFunction(val) {
13707
- if (val === 'Color' || val === 'color') {
13708
- return interfaceFunction.color;
13709
- } else if (val === 'Opacity' || val === 'opacity') {
13710
- return interfaceFunction.opacity;
13711
- } else if (val === 'Stroke Width' || val === 'stroke width') {
13712
- return interfaceFunction.strokeWidth;
13713
- }
13714
- }
13715
- Object.defineProperties(interfaceFunction, {
13716
- 'color': {
13717
- get: ExpressionPropertyInterface(view.c)
13718
- },
13719
- 'opacity': {
13720
- get: ExpressionPropertyInterface(view.o)
13721
- },
13722
- 'strokeWidth': {
13723
- get: ExpressionPropertyInterface(view.w)
13724
- },
13725
- 'dash': {
13726
- get: function () {
13727
- return dashOb;
13728
- }
13729
- },
13730
- '_name': {
13731
- value: shape.nm
13732
- },
13733
- 'mn': {
13734
- value: shape.mn
13735
- }
13736
- });
13737
-
13738
- view.c.setGroupProperty(_propertyGroup);
13739
- view.o.setGroupProperty(_propertyGroup);
13740
- view.w.setGroupProperty(_propertyGroup);
13741
- return interfaceFunction;
13742
- }
13743
-
13744
- function trimInterfaceFactory(shape, view, propertyGroup) {
13745
- function _propertyGroup(val) {
13746
- if (val == 1) {
13747
- return interfaceFunction;
13748
- } else {
13749
- return propertyGroup(--val);
13750
- }
13751
- }
13752
- interfaceFunction.propertyIndex = shape.ix;
13753
-
13754
- view.s.setGroupProperty(_propertyGroup);
13755
- view.e.setGroupProperty(_propertyGroup);
13756
- view.o.setGroupProperty(_propertyGroup);
13757
-
13758
- function interfaceFunction(val) {
13759
- if (val === shape.e.ix || val === 'End' || val === 'end') {
13760
- return interfaceFunction.end;
13761
- }
13762
- if (val === shape.s.ix) {
13763
- return interfaceFunction.start;
13764
- }
13765
- if (val === shape.o.ix) {
13766
- return interfaceFunction.offset;
13767
- }
13768
- }
13769
- interfaceFunction.propertyIndex = shape.ix;
13770
- interfaceFunction.propertyGroup = propertyGroup;
13771
-
13772
- Object.defineProperties(interfaceFunction, {
13773
- 'start': {
13774
- get: ExpressionPropertyInterface(view.s)
13775
- },
13776
- 'end': {
13777
- get: ExpressionPropertyInterface(view.e)
13778
- },
13779
- 'offset': {
13780
- get: ExpressionPropertyInterface(view.o)
13781
- },
13782
- '_name': {
13783
- value: shape.nm
13784
- }
13785
- });
13786
- interfaceFunction.mn = shape.mn;
13787
- return interfaceFunction;
13788
- }
13789
-
13790
- function transformInterfaceFactory(shape, view, propertyGroup) {
13791
- function _propertyGroup(val) {
13792
- if (val == 1) {
13793
- return interfaceFunction;
13794
- } else {
13795
- return propertyGroup(--val);
13796
- }
13797
- }
13798
- view.transform.mProps.o.setGroupProperty(_propertyGroup);
13799
- view.transform.mProps.p.setGroupProperty(_propertyGroup);
13800
- view.transform.mProps.a.setGroupProperty(_propertyGroup);
13801
- view.transform.mProps.s.setGroupProperty(_propertyGroup);
13802
- view.transform.mProps.r.setGroupProperty(_propertyGroup);
13803
- if (view.transform.mProps.sk) {
13804
- view.transform.mProps.sk.setGroupProperty(_propertyGroup);
13805
- view.transform.mProps.sa.setGroupProperty(_propertyGroup);
13806
- }
13807
- view.transform.op.setGroupProperty(_propertyGroup);
13808
-
13809
- function interfaceFunction(value) {
13810
- if (shape.a.ix === value || value === 'Anchor Point') {
13811
- return interfaceFunction.anchorPoint;
13812
- }
13813
- if (shape.o.ix === value || value === 'Opacity') {
13814
- return interfaceFunction.opacity;
13815
- }
13816
- if (shape.p.ix === value || value === 'Position') {
13817
- return interfaceFunction.position;
13818
- }
13819
- if (shape.r.ix === value || value === 'Rotation' || value === 'ADBE Vector Rotation') {
13820
- return interfaceFunction.rotation;
13821
- }
13822
- if (shape.s.ix === value || value === 'Scale') {
13823
- return interfaceFunction.scale;
13824
- }
13825
- if (shape.sk && shape.sk.ix === value || value === 'Skew') {
13826
- return interfaceFunction.skew;
13827
- }
13828
- if (shape.sa && shape.sa.ix === value || value === 'Skew Axis') {
13829
- return interfaceFunction.skewAxis;
13830
- }
13831
-
13832
- }
13833
- Object.defineProperties(interfaceFunction, {
13834
- 'opacity': {
13835
- get: ExpressionPropertyInterface(view.transform.mProps.o)
13836
- },
13837
- 'position': {
13838
- get: ExpressionPropertyInterface(view.transform.mProps.p)
13839
- },
13840
- 'anchorPoint': {
13841
- get: ExpressionPropertyInterface(view.transform.mProps.a)
13842
- },
13843
- 'scale': {
13844
- get: ExpressionPropertyInterface(view.transform.mProps.s)
13845
- },
13846
- 'rotation': {
13847
- get: ExpressionPropertyInterface(view.transform.mProps.r)
13848
- },
13849
- 'skew': {
13850
- get: ExpressionPropertyInterface(view.transform.mProps.sk)
13851
- },
13852
- 'skewAxis': {
13853
- get: ExpressionPropertyInterface(view.transform.mProps.sa)
13854
- },
13855
- '_name': {
13856
- value: shape.nm
13857
- }
13858
- });
13859
- interfaceFunction.ty = 'tr';
13860
- interfaceFunction.mn = shape.mn;
13861
- interfaceFunction.propertyGroup = propertyGroup;
13862
- return interfaceFunction;
13863
- }
13864
-
13865
- function ellipseInterfaceFactory(shape, view, propertyGroup) {
13866
- function _propertyGroup(val) {
13867
- if (val == 1) {
13868
- return interfaceFunction;
13869
- } else {
13870
- return propertyGroup(--val);
13871
- }
13872
- }
13873
- interfaceFunction.propertyIndex = shape.ix;
13874
- var prop = view.sh.ty === 'tm' ? view.sh.prop : view.sh;
13875
- prop.s.setGroupProperty(_propertyGroup);
13876
- prop.p.setGroupProperty(_propertyGroup);
13877
-
13878
- function interfaceFunction(value) {
13879
- if (shape.p.ix === value) {
13880
- return interfaceFunction.position;
13881
- }
13882
- if (shape.s.ix === value) {
13883
- return interfaceFunction.size;
13884
- }
13885
- }
13886
-
13887
- Object.defineProperties(interfaceFunction, {
13888
- 'size': {
13889
- get: ExpressionPropertyInterface(prop.s)
13890
- },
13891
- 'position': {
13892
- get: ExpressionPropertyInterface(prop.p)
13893
- },
13894
- '_name': {
13895
- value: shape.nm
13896
- }
13897
- });
13898
- interfaceFunction.mn = shape.mn;
13899
- return interfaceFunction;
13900
- }
13901
-
13902
- function starInterfaceFactory(shape, view, propertyGroup) {
13903
- function _propertyGroup(val) {
13904
- if (val == 1) {
13905
- return interfaceFunction;
13906
- } else {
13907
- return propertyGroup(--val);
13908
- }
13909
- }
13910
- var prop = view.sh.ty === 'tm' ? view.sh.prop : view.sh;
13911
- interfaceFunction.propertyIndex = shape.ix;
13912
- prop.or.setGroupProperty(_propertyGroup);
13913
- prop.os.setGroupProperty(_propertyGroup);
13914
- prop.pt.setGroupProperty(_propertyGroup);
13915
- prop.p.setGroupProperty(_propertyGroup);
13916
- prop.r.setGroupProperty(_propertyGroup);
13917
- if (shape.ir) {
13918
- prop.ir.setGroupProperty(_propertyGroup);
13919
- prop.is.setGroupProperty(_propertyGroup);
13920
- }
13921
-
13922
- function interfaceFunction(value) {
13923
- if (shape.p.ix === value) {
13924
- return interfaceFunction.position;
13925
- }
13926
- if (shape.r.ix === value) {
13927
- return interfaceFunction.rotation;
13928
- }
13929
- if (shape.pt.ix === value) {
13930
- return interfaceFunction.points;
13931
- }
13932
- if (shape.or.ix === value || 'ADBE Vector Star Outer Radius' === value) {
13933
- return interfaceFunction.outerRadius;
13934
- }
13935
- if (shape.os.ix === value) {
13936
- return interfaceFunction.outerRoundness;
13937
- }
13938
- if (shape.ir && (shape.ir.ix === value || 'ADBE Vector Star Inner Radius' === value)) {
13939
- return interfaceFunction.innerRadius;
13940
- }
13941
- if (shape.is && shape.is.ix === value) {
13942
- return interfaceFunction.innerRoundness;
13943
- }
13944
-
13945
- }
13946
-
13947
- Object.defineProperties(interfaceFunction, {
13948
- 'position': {
13949
- get: ExpressionPropertyInterface(prop.p)
13950
- },
13951
- 'rotation': {
13952
- get: ExpressionPropertyInterface(prop.r)
13953
- },
13954
- 'points': {
13955
- get: ExpressionPropertyInterface(prop.pt)
13956
- },
13957
- 'outerRadius': {
13958
- get: ExpressionPropertyInterface(prop.or)
13959
- },
13960
- 'outerRoundness': {
13961
- get: ExpressionPropertyInterface(prop.os)
13962
- },
13963
- 'innerRadius': {
13964
- get: ExpressionPropertyInterface(prop.ir)
13965
- },
13966
- 'innerRoundness': {
13967
- get: ExpressionPropertyInterface(prop.is)
13968
- },
13969
- '_name': {
13970
- value: shape.nm
13971
- }
13972
- });
13973
- interfaceFunction.mn = shape.mn;
13974
- return interfaceFunction;
13975
- }
13976
-
13977
- function rectInterfaceFactory(shape, view, propertyGroup) {
13978
- function _propertyGroup(val) {
13979
- if (val == 1) {
13980
- return interfaceFunction;
13981
- } else {
13982
- return propertyGroup(--val);
13983
- }
13984
- }
13985
- var prop = view.sh.ty === 'tm' ? view.sh.prop : view.sh;
13986
- interfaceFunction.propertyIndex = shape.ix;
13987
- prop.p.setGroupProperty(_propertyGroup);
13988
- prop.s.setGroupProperty(_propertyGroup);
13989
- prop.r.setGroupProperty(_propertyGroup);
13990
-
13991
- function interfaceFunction(value) {
13992
- if (shape.p.ix === value) {
13993
- return interfaceFunction.position;
13994
- }
13995
- if (shape.r.ix === value) {
13996
- return interfaceFunction.roundness;
13997
- }
13998
- if (shape.s.ix === value || value === 'Size' || value === 'ADBE Vector Rect Size') {
13999
- return interfaceFunction.size;
14000
- }
14001
-
14002
- }
14003
- Object.defineProperties(interfaceFunction, {
14004
- 'position': {
14005
- get: ExpressionPropertyInterface(prop.p)
14006
- },
14007
- 'roundness': {
14008
- get: ExpressionPropertyInterface(prop.r)
14009
- },
14010
- 'size': {
14011
- get: ExpressionPropertyInterface(prop.s)
14012
- },
14013
- '_name': {
14014
- value: shape.nm
14015
- }
14016
- });
14017
- interfaceFunction.mn = shape.mn;
14018
- return interfaceFunction;
14019
- }
14020
-
14021
- function roundedInterfaceFactory(shape, view, propertyGroup) {
14022
- function _propertyGroup(val) {
14023
- if (val == 1) {
14024
- return interfaceFunction;
14025
- } else {
14026
- return propertyGroup(--val);
14027
- }
14028
- }
14029
- var prop = view;
14030
- interfaceFunction.propertyIndex = shape.ix;
14031
- prop.rd.setGroupProperty(_propertyGroup);
14032
-
14033
- function interfaceFunction(value) {
14034
- if (shape.r.ix === value || 'Round Corners 1' === value) {
14035
- return interfaceFunction.radius;
14036
- }
14037
-
14038
- }
14039
- Object.defineProperties(interfaceFunction, {
14040
- 'radius': {
14041
- get: ExpressionPropertyInterface(prop.rd)
14042
- },
14043
- '_name': {
14044
- value: shape.nm
14045
- }
14046
- });
14047
- interfaceFunction.mn = shape.mn;
14048
- return interfaceFunction;
14049
- }
14050
-
14051
- function repeaterInterfaceFactory(shape, view, propertyGroup) {
14052
- function _propertyGroup(val) {
14053
- if (val == 1) {
14054
- return interfaceFunction;
14055
- } else {
14056
- return propertyGroup(--val);
14057
- }
14058
- }
14059
- var prop = view;
14060
- interfaceFunction.propertyIndex = shape.ix;
14061
- prop.c.setGroupProperty(_propertyGroup);
14062
- prop.o.setGroupProperty(_propertyGroup);
14063
-
14064
- function interfaceFunction(value) {
14065
- if (shape.c.ix === value || 'Copies' === value) {
14066
- return interfaceFunction.copies;
14067
- } else if (shape.o.ix === value || 'Offset' === value) {
14068
- return interfaceFunction.offset;
14069
- }
14070
-
14071
- }
14072
- Object.defineProperties(interfaceFunction, {
14073
- 'copies': {
14074
- get: ExpressionPropertyInterface(prop.c)
14075
- },
14076
- 'offset': {
14077
- get: ExpressionPropertyInterface(prop.o)
14078
- },
14079
- '_name': {
14080
- value: shape.nm
14081
- }
14082
- });
14083
- interfaceFunction.mn = shape.mn;
14084
- return interfaceFunction;
14085
- }
14086
-
14087
- function pathInterfaceFactory(shape, view, propertyGroup) {
14088
- var prop = view.sh;
14089
-
14090
- function _propertyGroup(val) {
14091
- if (val == 1) {
14092
- return interfaceFunction;
14093
- } else {
14094
- return propertyGroup(--val);
14095
- }
14096
- }
14097
- prop.setGroupProperty(_propertyGroup);
14098
-
14099
- function interfaceFunction(val) {
14100
- if (val === 'Shape' || val === 'shape' || val === 'Path' || val === 'path' || val === 'ADBE Vector Shape' || val === 2) {
14101
- return interfaceFunction.path;
14102
- }
14103
- }
14104
- Object.defineProperties(interfaceFunction, {
14105
- 'path': {
14106
- get: function () {
14107
- if (prop.k) {
14108
- prop.getValue();
14109
- }
14110
- return prop;
14111
- }
14112
- },
14113
- 'shape': {
14114
- get: function () {
14115
- if (prop.k) {
14116
- prop.getValue();
14117
- }
14118
- return prop;
14119
- }
14120
- },
14121
- '_name': {
14122
- value: shape.nm
14123
- },
14124
- 'ix': {
14125
- value: shape.ix
14126
- },
14127
- 'propertyIndex': {
14128
- value: shape.ix
14129
- },
14130
- 'mn': {
14131
- value: shape.mn
14132
- }
14133
- });
14134
- return interfaceFunction;
14135
- }
14136
-
14137
- return function (shapes, view, propertyGroup) {
14138
- var interfaces;
14139
-
14140
- function _interfaceFunction(value) {
14141
- if (typeof value === 'number') {
14142
- return interfaces[value - 1];
14143
- } else {
14144
- var i = 0,
14145
- len = interfaces.length;
14146
- while (i < len) {
14147
- if (interfaces[i]._name === value) {
14148
- return interfaces[i];
14149
- }
14150
- i += 1;
14151
- }
14152
- }
14153
- }
14154
- _interfaceFunction.propertyGroup = propertyGroup;
14155
- interfaces = iterateElements(shapes, view, _interfaceFunction);
14156
- _interfaceFunction.numProperties = interfaces.length;
14157
- return _interfaceFunction;
14158
- };
14159
- }());
14160
-
14161
- var TextExpressionInterface = (function () {
14162
- return function (elem) {
14163
- var _prevValue, _sourceText;
14164
-
14165
- function _thisLayerFunction() { }
14166
- Object.defineProperty(_thisLayerFunction, "sourceText", {
14167
- get: function () {
14168
- elem.textProperty.getValue()
14169
- var stringValue = elem.textProperty.currentData.t;
14170
- if (stringValue !== _prevValue) {
14171
- elem.textProperty.currentData.t = _prevValue;
14172
- _sourceText = new String(stringValue);
14173
- //If stringValue is an empty string, eval returns undefined, so it has to be returned as a String primitive
14174
- _sourceText.value = stringValue ? stringValue : new String(stringValue);
14175
- }
14176
- return _sourceText;
14177
- }
14178
- });
14179
- return _thisLayerFunction;
14180
- };
14181
- }());
14182
- var LayerExpressionInterface = (function () {
14183
- function toWorld(arr, time) {
14184
- var toWorldMat = new Matrix();
14185
- toWorldMat.reset();
14186
- var transformMat;
14187
- if (time) {
14188
- //Todo implement value at time on transform properties
14189
- //transformMat = this._elem.finalTransform.mProp.getValueAtTime(time);
14190
- transformMat = this._elem.finalTransform.mProp;
14191
- } else {
14192
- transformMat = this._elem.finalTransform.mProp;
14193
- }
14194
- transformMat.applyToMatrix(toWorldMat);
14195
- if (this._elem.hierarchy && this._elem.hierarchy.length) {
14196
- var i, len = this._elem.hierarchy.length;
14197
- for (i = 0; i < len; i += 1) {
14198
- this._elem.hierarchy[i].finalTransform.mProp.applyToMatrix(toWorldMat);
14199
- }
14200
- return toWorldMat.applyToPointArray(arr[0], arr[1], arr[2] || 0);
14201
- }
14202
- return toWorldMat.applyToPointArray(arr[0], arr[1], arr[2] || 0);
14203
- }
14204
-
14205
- function fromWorld(arr, time) {
14206
- var toWorldMat = new Matrix();
14207
- toWorldMat.reset();
14208
- var transformMat;
14209
- if (time) {
14210
- //Todo implement value at time on transform properties
14211
- //transformMat = this._elem.finalTransform.mProp.getValueAtTime(time);
14212
- transformMat = this._elem.finalTransform.mProp;
14213
- } else {
14214
- transformMat = this._elem.finalTransform.mProp;
14215
- }
14216
- transformMat.applyToMatrix(toWorldMat);
14217
- if (this._elem.hierarchy && this._elem.hierarchy.length) {
14218
- var i, len = this._elem.hierarchy.length;
14219
- for (i = 0; i < len; i += 1) {
14220
- this._elem.hierarchy[i].finalTransform.mProp.applyToMatrix(toWorldMat);
14221
- }
14222
- return toWorldMat.inversePoint(arr);
14223
- }
14224
- return toWorldMat.inversePoint(arr);
14225
- }
14226
-
14227
- function fromComp(arr) {
14228
- var toWorldMat = new Matrix();
14229
- toWorldMat.reset();
14230
- this._elem.finalTransform.mProp.applyToMatrix(toWorldMat);
14231
- if (this._elem.hierarchy && this._elem.hierarchy.length) {
14232
- var i, len = this._elem.hierarchy.length;
14233
- for (i = 0; i < len; i += 1) {
14234
- this._elem.hierarchy[i].finalTransform.mProp.applyToMatrix(toWorldMat);
14235
- }
14236
- return toWorldMat.inversePoint(arr);
14237
- }
14238
- return toWorldMat.inversePoint(arr);
14239
- }
14240
-
14241
- function sampleImage() {
14242
- return [1, 1, 1, 1];
14243
- }
14244
-
14245
-
14246
- return function (elem) {
14247
-
14248
- var transformInterface;
14249
-
14250
- function _registerMaskInterface(maskManager) {
14251
- _thisLayerFunction.mask = new MaskManagerInterface(maskManager, elem);
14252
- }
14253
-
14254
- function _registerEffectsInterface(effects) {
14255
- _thisLayerFunction.effect = effects;
14256
- }
14257
-
14258
- function _thisLayerFunction(name) {
14259
- switch (name) {
14260
- case "ADBE Root Vectors Group":
14261
- case "Contents":
14262
- case 2:
14263
- return _thisLayerFunction.shapeInterface;
14264
- case 1:
14265
- case 6:
14266
- case "Transform":
14267
- case "transform":
14268
- case "ADBE Transform Group":
14269
- return transformInterface;
14270
- case 4:
14271
- case "ADBE Effect Parade":
14272
- case "effects":
14273
- case "Effects":
14274
- return _thisLayerFunction.effect;
14275
- }
14276
- }
14277
- _thisLayerFunction.toWorld = toWorld;
14278
- _thisLayerFunction.fromWorld = fromWorld;
14279
- _thisLayerFunction.toComp = toWorld;
14280
- _thisLayerFunction.fromComp = fromComp;
14281
- _thisLayerFunction.sampleImage = sampleImage;
14282
- _thisLayerFunction.sourceRectAtTime = elem.sourceRectAtTime.bind(elem);
14283
- _thisLayerFunction._elem = elem;
14284
- transformInterface = TransformExpressionInterface(elem.finalTransform.mProp);
14285
- var anchorPointDescriptor = getDescriptor(transformInterface, 'anchorPoint');
14286
- Object.defineProperties(_thisLayerFunction, {
14287
- hasParent: {
14288
- get: function () {
14289
- return elem.hierarchy.length;
14290
- }
14291
- },
14292
- parent: {
14293
- get: function () {
14294
- return elem.hierarchy[0].layerInterface;
14295
- }
14296
- },
14297
- rotation: getDescriptor(transformInterface, 'rotation'),
14298
- scale: getDescriptor(transformInterface, 'scale'),
14299
- position: getDescriptor(transformInterface, 'position'),
14300
- opacity: getDescriptor(transformInterface, 'opacity'),
14301
- anchorPoint: anchorPointDescriptor,
14302
- anchor_point: anchorPointDescriptor,
14303
- transform: {
14304
- get: function () {
14305
- return transformInterface;
14306
- }
14307
- },
14308
- active: {
14309
- get: function () {
14310
- return elem.isInRange;
14311
- }
14312
- }
14313
- });
14314
-
14315
- _thisLayerFunction.startTime = elem.data.st;
14316
- _thisLayerFunction.index = elem.data.ind;
14317
- _thisLayerFunction.source = elem.data.refId;
14318
- _thisLayerFunction.height = elem.data.ty === 0 ? elem.data.h : 100;
14319
- _thisLayerFunction.width = elem.data.ty === 0 ? elem.data.w : 100;
14320
- _thisLayerFunction.inPoint = elem.data.ip / elem.comp.globalData.frameRate;
14321
- _thisLayerFunction.outPoint = elem.data.op / elem.comp.globalData.frameRate;
14322
- _thisLayerFunction._name = elem.data.nm;
14323
-
14324
- _thisLayerFunction.registerMaskInterface = _registerMaskInterface;
14325
- _thisLayerFunction.registerEffectsInterface = _registerEffectsInterface;
14326
- return _thisLayerFunction;
14327
- };
14328
- }());
14329
-
14330
- var CompExpressionInterface = (function () {
14331
- return function (comp) {
14332
- function _thisLayerFunction(name) {
14333
- var i = 0,
14334
- len = comp.layers.length;
14335
- while (i < len) {
14336
- if (comp.layers[i].nm === name || comp.layers[i].ind === name) {
14337
- return comp.elements[i].layerInterface;
14338
- }
14339
- i += 1;
14340
- }
14341
- return null;
14342
- //return {active:false};
14343
- }
14344
- Object.defineProperty(_thisLayerFunction, "_name", {
14345
- value: comp.data.nm
14346
- });
14347
- _thisLayerFunction.layer = _thisLayerFunction;
14348
- _thisLayerFunction.pixelAspect = 1;
14349
- _thisLayerFunction.height = comp.data.h || comp.globalData.compSize.h;
14350
- _thisLayerFunction.width = comp.data.w || comp.globalData.compSize.w;
14351
- _thisLayerFunction.pixelAspect = 1;
14352
- _thisLayerFunction.frameDuration = 1 / comp.globalData.frameRate;
14353
- _thisLayerFunction.displayStartTime = 0;
14354
- _thisLayerFunction.numLayers = comp.layers.length;
14355
- return _thisLayerFunction;
14356
- };
14357
- }());
14358
- var TransformExpressionInterface = (function () {
14359
- return function (transform) {
14360
- function _thisFunction(name) {
14361
- switch (name) {
14362
- case "scale":
14363
- case "Scale":
14364
- case "ADBE Scale":
14365
- case 6:
14366
- return _thisFunction.scale;
14367
- case "rotation":
14368
- case "Rotation":
14369
- case "ADBE Rotation":
14370
- case "ADBE Rotate Z":
14371
- case 10:
14372
- return _thisFunction.rotation;
14373
- case "ADBE Rotate X":
14374
- return _thisFunction.xRotation;
14375
- case "ADBE Rotate Y":
14376
- return _thisFunction.yRotation;
14377
- case "position":
14378
- case "Position":
14379
- case "ADBE Position":
14380
- case 2:
14381
- return _thisFunction.position;
14382
- case 'ADBE Position_0':
14383
- return _thisFunction.xPosition;
14384
- case 'ADBE Position_1':
14385
- return _thisFunction.yPosition;
14386
- case 'ADBE Position_2':
14387
- return _thisFunction.zPosition;
14388
- case "anchorPoint":
14389
- case "AnchorPoint":
14390
- case "Anchor Point":
14391
- case "ADBE AnchorPoint":
14392
- case 1:
14393
- return _thisFunction.anchorPoint;
14394
- case "opacity":
14395
- case "Opacity":
14396
- case 11:
14397
- return _thisFunction.opacity;
14398
- }
14399
- }
14400
-
14401
- Object.defineProperty(_thisFunction, "rotation", {
14402
- get: ExpressionPropertyInterface(transform.r || transform.rz)
14403
- });
14404
-
14405
- Object.defineProperty(_thisFunction, "zRotation", {
14406
- get: ExpressionPropertyInterface(transform.rz || transform.r)
14407
- });
14408
-
14409
- Object.defineProperty(_thisFunction, "xRotation", {
14410
- get: ExpressionPropertyInterface(transform.rx)
14411
- });
14412
-
14413
- Object.defineProperty(_thisFunction, "yRotation", {
14414
- get: ExpressionPropertyInterface(transform.ry)
14415
- });
14416
- Object.defineProperty(_thisFunction, "scale", {
14417
- get: ExpressionPropertyInterface(transform.s)
14418
- });
14419
-
14420
- if (transform.p) {
14421
- var _transformFactory = ExpressionPropertyInterface(transform.p);
14422
- }
14423
- Object.defineProperty(_thisFunction, "position", {
14424
- get: function () {
14425
- if (transform.p) {
14426
- return _transformFactory();
14427
- } else {
14428
- return [transform.px.v, transform.py.v, transform.pz ? transform.pz.v : 0];
14429
- }
14430
- }
14431
- });
14432
-
14433
- Object.defineProperty(_thisFunction, "xPosition", {
14434
- get: ExpressionPropertyInterface(transform.px)
14435
- });
14436
-
14437
- Object.defineProperty(_thisFunction, "yPosition", {
14438
- get: ExpressionPropertyInterface(transform.py)
14439
- });
14440
-
14441
- Object.defineProperty(_thisFunction, "zPosition", {
14442
- get: ExpressionPropertyInterface(transform.pz)
14443
- });
14444
-
14445
- Object.defineProperty(_thisFunction, "anchorPoint", {
14446
- get: ExpressionPropertyInterface(transform.a)
14447
- });
14448
-
14449
- Object.defineProperty(_thisFunction, "opacity", {
14450
- get: ExpressionPropertyInterface(transform.o)
14451
- });
14452
-
14453
- Object.defineProperty(_thisFunction, "skew", {
14454
- get: ExpressionPropertyInterface(transform.sk)
14455
- });
14456
-
14457
- Object.defineProperty(_thisFunction, "skewAxis", {
14458
- get: ExpressionPropertyInterface(transform.sa)
14459
- });
14460
-
14461
- Object.defineProperty(_thisFunction, "orientation", {
14462
- get: ExpressionPropertyInterface(transform.or)
14463
- });
14464
-
14465
- return _thisFunction;
14466
- };
14467
- }());
14468
- var ProjectInterface = (function () {
14469
-
14470
- function registerComposition(comp) {
14471
- this.compositions.push(comp);
14472
- }
14473
-
14474
- return function () {
14475
- function _thisProjectFunction(name) {
14476
- var i = 0,
14477
- len = this.compositions.length;
14478
- while (i < len) {
14479
- if (this.compositions[i].data && this.compositions[i].data.nm === name) {
14480
- if (this.compositions[i].prepareFrame && this.compositions[i].data.xt) {
14481
- this.compositions[i].prepareFrame(this.currentFrame);
14482
- }
14483
- return this.compositions[i].compInterface;
14484
- }
14485
- i += 1;
14486
- }
14487
- }
14488
-
14489
- _thisProjectFunction.compositions = [];
14490
- _thisProjectFunction.currentFrame = 0;
14491
-
14492
- _thisProjectFunction.registerComposition = registerComposition;
14493
-
14494
-
14495
-
14496
- return _thisProjectFunction;
14497
- };
14498
- }());
14499
- var EffectsExpressionInterface = (function () {
14500
- var ob = {
14501
- createEffectsInterface: createEffectsInterface
14502
- };
14503
-
14504
- function createEffectsInterface(elem, propertyGroup) {
14505
- if (elem.effectsManager) {
14506
-
14507
- var effectElements = [];
14508
- var effectsData = elem.data.ef;
14509
- var i, len = elem.effectsManager.effectElements.length;
14510
- for (i = 0; i < len; i += 1) {
14511
- effectElements.push(createGroupInterface(effectsData[i], elem.effectsManager.effectElements[i], propertyGroup, elem));
14512
- }
14513
-
14514
- return function (name) {
14515
- var effects = elem.data.ef || [],
14516
- i = 0,
14517
- len = effects.length;
14518
- while (i < len) {
14519
- if (name === effects[i].nm || name === effects[i].mn || name === effects[i].ix) {
14520
- return effectElements[i];
14521
- }
14522
- i += 1;
14523
- }
14524
- };
14525
- }
14526
- }
14527
-
14528
- function createGroupInterface(data, elements, propertyGroup, elem) {
14529
- var effectElements = [];
14530
- var i, len = data.ef.length;
14531
- for (i = 0; i < len; i += 1) {
14532
- if (data.ef[i].ty === 5) {
14533
- effectElements.push(createGroupInterface(data.ef[i], elements.effectElements[i], elements.effectElements[i].propertyGroup, elem));
14534
- } else {
14535
- effectElements.push(createValueInterface(elements.effectElements[i], data.ef[i].ty, elem, _propertyGroup));
14536
- }
14537
- }
14538
-
14539
- function _propertyGroup(val) {
14540
- if (val === 1) {
14541
- return groupInterface;
14542
- } else {
14543
- return propertyGroup(val - 1);
14544
- }
14545
- }
14546
-
14547
- var groupInterface = function (name) {
14548
- var effects = data.ef,
14549
- i = 0,
14550
- len = effects.length;
14551
- while (i < len) {
14552
- if (name === effects[i].nm || name === effects[i].mn || name === effects[i].ix) {
14553
- if (effects[i].ty === 5) {
14554
- return effectElements[i];
14555
- } else {
14556
- return effectElements[i]();
14557
- }
14558
- }
14559
- i += 1;
14560
- }
14561
- return effectElements[0]();
14562
- };
14563
-
14564
- groupInterface.propertyGroup = _propertyGroup;
14565
-
14566
- if (data.mn === 'ADBE Color Control') {
14567
- Object.defineProperty(groupInterface, 'color', {
14568
- get: function () {
14569
- return effectElements[0]();
14570
- }
14571
- });
14572
- }
14573
- Object.defineProperty(groupInterface, 'numProperties', {
14574
- get: function () {
14575
- return data.np;
14576
- }
14577
- });
14578
- groupInterface.active = groupInterface.enabled = data.en !== 0;
14579
- return groupInterface;
14580
- }
14581
-
14582
- function createValueInterface(element, type, elem, propertyGroup) {
14583
- var expressionProperty = ExpressionPropertyInterface(element.p);
14584
-
14585
- function interfaceFunction() {
14586
- if (type === 10) {
14587
- return elem.comp.compInterface(element.p.v);
14588
- }
14589
- return expressionProperty();
14590
- }
14591
-
14592
- if (element.p.setGroupProperty) {
14593
- element.p.setGroupProperty(propertyGroup);
14594
- }
14595
-
14596
- return interfaceFunction;
14597
- }
14598
-
14599
- return ob;
14600
-
14601
- }());
14602
- var MaskManagerInterface = (function () {
14603
-
14604
- function MaskInterface(mask, data) {
14605
- this._mask = mask;
14606
- this._data = data;
14607
- }
14608
- Object.defineProperty(MaskInterface.prototype, 'maskPath', {
14609
- get: function () {
14610
- if (this._mask.prop.k) {
14611
- this._mask.prop.getValue();
14612
- }
14613
- return this._mask.prop;
14614
- }
14615
- });
14616
- Object.defineProperty(MaskInterface.prototype, 'maskOpacity', {
14617
- get: function () {
14618
- if (this._mask.op.k) {
14619
- this._mask.op.getValue();
14620
- }
14621
- return this._mask.op.v * 100;
14622
- }
14623
- });
14624
-
14625
- var MaskManager = function (maskManager, elem) {
14626
- var _maskManager = maskManager;
14627
- var _elem = elem;
14628
- var _masksInterfaces = createSizedArray(maskManager.viewData.length);
14629
- var i, len = maskManager.viewData.length;
14630
- for (i = 0; i < len; i += 1) {
14631
- _masksInterfaces[i] = new MaskInterface(maskManager.viewData[i], maskManager.masksProperties[i]);
14632
- }
14633
-
14634
- var maskFunction = function (name) {
14635
- i = 0;
14636
- while (i < len) {
14637
- if (maskManager.masksProperties[i].nm === name) {
14638
- return _masksInterfaces[i];
14639
- }
14640
- i += 1;
14641
- }
14642
- };
14643
- return maskFunction;
14644
- };
14645
- return MaskManager;
14646
- }());
14647
-
14648
- var ExpressionPropertyInterface = (function () {
14649
-
14650
- var defaultUnidimensionalValue = {
14651
- pv: 0,
14652
- v: 0,
14653
- mult: 1
14654
- }
14655
- var defaultMultidimensionalValue = {
14656
- pv: [0, 0, 0],
14657
- v: [0, 0, 0],
14658
- mult: 1
14659
- }
14660
-
14661
- function completeProperty(expressionValue, property, type) {
14662
- Object.defineProperty(expressionValue, 'velocity', {
14663
- get: function () {
14664
- return property.getVelocityAtTime(property.comp.currentFrame);
14665
- }
14666
- });
14667
- expressionValue.numKeys = property.keyframes ? property.keyframes.length : 0;
14668
- expressionValue.key = function (pos) {
14669
- if (!expressionValue.numKeys) {
14670
- return 0;
14671
- } else {
14672
- var value = '';
14673
- if ('s' in property.keyframes[pos - 1]) {
14674
- value = property.keyframes[pos - 1].s;
14675
- } else if ('e' in property.keyframes[pos - 2]) {
14676
- value = property.keyframes[pos - 2].e;
14677
- } else {
14678
- value = property.keyframes[pos - 2].s;
14679
- }
14680
- var valueProp = type === 'unidimensional' ? new Number(value) : Object.assign({}, value);
14681
- valueProp.time = property.keyframes[pos - 1].t / property.elem.comp.globalData.frameRate;
14682
- return valueProp;
14683
- }
14684
- };
14685
- expressionValue.valueAtTime = property.getValueAtTime;
14686
- expressionValue.speedAtTime = property.getSpeedAtTime;
14687
- expressionValue.velocityAtTime = property.getVelocityAtTime;
14688
- expressionValue.propertyGroup = property.propertyGroup;
14689
- }
14690
-
14691
- function UnidimensionalPropertyInterface(property) {
14692
- if (!property || !('pv' in property)) {
14693
- property = defaultUnidimensionalValue;
14694
- }
14695
- var mult = 1 / property.mult;
14696
- var val = property.pv * mult;
14697
- var expressionValue = new Number(val);
14698
- expressionValue.value = val;
14699
- completeProperty(expressionValue, property, 'unidimensional');
14700
-
14701
- return function () {
14702
- if (property.k) {
14703
- property.getValue();
14704
- }
14705
- val = property.v * mult;
14706
- if (expressionValue.value !== val) {
14707
- expressionValue = new Number(val);
14708
- expressionValue.value = val;
14709
- completeProperty(expressionValue, property, 'unidimensional');
14710
- }
14711
- return expressionValue;
14712
- }
14713
- }
14714
-
14715
- function MultidimensionalPropertyInterface(property) {
14716
- if (!property || !('pv' in property)) {
14717
- property = defaultMultidimensionalValue;
14718
- }
14719
- var mult = 1 / property.mult;
14720
- var len = property.pv.length;
14721
- var expressionValue = createTypedArray('float32', len);
14722
- var arrValue = createTypedArray('float32', len);
14723
- expressionValue.value = arrValue;
14724
- completeProperty(expressionValue, property, 'multidimensional');
14725
-
14726
- return function () {
14727
- if (property.k) {
14728
- property.getValue();
14729
- }
14730
- for (var i = 0; i < len; i += 1) {
14731
- expressionValue[i] = arrValue[i] = property.v[i] * mult;
14732
- }
14733
- return expressionValue;
14734
- }
14735
- }
14736
-
14737
- //TODO: try to avoid using this getter
14738
- function defaultGetter() {
14739
- return defaultUnidimensionalValue;
14740
- }
14741
-
14742
- return function (property) {
14743
- if (!property) {
14744
- return defaultGetter;
14745
- } else if (property.propType === 'unidimensional') {
14746
- return UnidimensionalPropertyInterface(property);
14747
- } else {
14748
- return MultidimensionalPropertyInterface(property);
14749
- }
14750
- }
14751
- }());
14752
-
14753
- (function () {
14754
-
14755
- var TextExpressionSelectorProp = (function () {
14756
-
14757
- function getValueProxy(index, total) {
14758
- this.textIndex = index + 1;
14759
- this.textTotal = total;
14760
- this.v = this.getValue() * this.mult;
14761
- return this.v;
14762
- }
14763
-
14764
- return function TextExpressionSelectorProp(elem, data) {
14765
- this.pv = 1;
14766
- this.comp = elem.comp;
14767
- this.elem = elem;
14768
- this.mult = 0.01;
14769
- this.propType = 'textSelector';
14770
- this.textTotal = data.totalChars;
14771
- this.selectorValue = 100;
14772
- this.lastValue = [1, 1, 1];
14773
- this.k = true;
14774
- this.x = true;
14775
- this.getValue = ExpressionManager.initiateExpression.bind(this)(elem, data, this);
14776
- this.getMult = getValueProxy;
14777
- this.getVelocityAtTime = expressionHelpers.getVelocityAtTime;
14778
- if (this.kf) {
14779
- this.getValueAtTime = expressionHelpers.getValueAtTime.bind(this);
14780
- } else {
14781
- this.getValueAtTime = expressionHelpers.getStaticValueAtTime.bind(this);
14782
- }
14783
- this.setGroupProperty = expressionHelpers.setGroupProperty;
14784
- };
14785
- }());
14786
-
14787
- var propertyGetTextProp = TextSelectorProp.getTextSelectorProp;
14788
- TextSelectorProp.getTextSelectorProp = function (elem, data, arr) {
14789
- if (data.t === 1) {
14790
- return new TextExpressionSelectorProp(elem, data, arr);
14791
- } else {
14792
- return propertyGetTextProp(elem, data, arr);
14793
- }
14794
- };
14795
- }());
14796
-
14797
- function SliderEffect(data, elem, container) {
14798
- this.p = PropertyFactory.getProp(elem, data.v, 0, 0, container);
14799
- }
14800
-
14801
- function AngleEffect(data, elem, container) {
14802
- this.p = PropertyFactory.getProp(elem, data.v, 0, 0, container);
14803
- }
14804
-
14805
- function ColorEffect(data, elem, container) {
14806
- this.p = PropertyFactory.getProp(elem, data.v, 1, 0, container);
14807
- }
14808
-
14809
- function PointEffect(data, elem, container) {
14810
- this.p = PropertyFactory.getProp(elem, data.v, 1, 0, container);
14811
- }
14812
-
14813
- function LayerIndexEffect(data, elem, container) {
14814
- this.p = PropertyFactory.getProp(elem, data.v, 0, 0, container);
14815
- }
14816
-
14817
- function MaskIndexEffect(data, elem, container) {
14818
- this.p = PropertyFactory.getProp(elem, data.v, 0, 0, container);
14819
- }
14820
-
14821
- function CheckboxEffect(data, elem, container) {
14822
- this.p = PropertyFactory.getProp(elem, data.v, 0, 0, container);
14823
- }
14824
-
14825
- function NoValueEffect() {
14826
- this.p = {};
14827
- }
14828
-
14829
- function EffectsManager() { }
14830
-
14831
- function EffectsManager(data, element) {
14832
- var effects = data.ef || [];
14833
- this.effectElements = [];
14834
- var i, len = effects.length;
14835
- var effectItem;
14836
- for (i = 0; i < len; i++) {
14837
- effectItem = new GroupEffect(effects[i], element);
14838
- this.effectElements.push(effectItem);
14839
- }
14840
- }
14841
-
14842
- function GroupEffect(data, element) {
14843
- this.init(data, element);
14844
- }
14845
-
14846
- extendPrototype([DynamicPropertyContainer], GroupEffect);
14847
-
14848
- GroupEffect.prototype.getValue = GroupEffect.prototype.iterateDynamicProperties;
14849
-
14850
- GroupEffect.prototype.init = function (data, element) {
14851
- this.data = data;
14852
- this.effectElements = [];
14853
- this.initDynamicPropertyContainer(element);
14854
- var i, len = this.data.ef.length;
14855
- var eff, effects = this.data.ef;
14856
- for (i = 0; i < len; i += 1) {
14857
- eff = null;
14858
- switch (effects[i].ty) {
14859
- case 0:
14860
- eff = new SliderEffect(effects[i], element, this);
14861
- break;
14862
- case 1:
14863
- eff = new AngleEffect(effects[i], element, this);
14864
- break;
14865
- case 2:
14866
- eff = new ColorEffect(effects[i], element, this);
14867
- break;
14868
- case 3:
14869
- eff = new PointEffect(effects[i], element, this);
14870
- break;
14871
- case 4:
14872
- case 7:
14873
- eff = new CheckboxEffect(effects[i], element, this);
14874
- break;
14875
- case 10:
14876
- eff = new LayerIndexEffect(effects[i], element, this);
14877
- break;
14878
- case 11:
14879
- eff = new MaskIndexEffect(effects[i], element, this);
14880
- break;
14881
- case 5:
14882
- eff = new EffectsManager(effects[i], element, this);
14883
- break;
14884
- //case 6:
14885
- default:
14886
- eff = new NoValueEffect(effects[i], element, this);
14887
- break;
14888
- }
14889
- if (eff) {
14890
- this.effectElements.push(eff);
14891
- }
14892
- }
14893
- };
14894
-
14895
- var lottie = {};
14896
-
14897
- var _isFrozen = false;
14898
-
14899
- function setLocationHref(href) {
14900
- locationHref = href;
14901
- }
14902
-
14903
- function searchAnimations() {
14904
- if (standalone === true) {
14905
- animationManager.searchAnimations(animationData, standalone, renderer);
14906
- } else {
14907
- animationManager.searchAnimations();
14908
- }
14909
- }
14910
-
14911
- function setSubframeRendering(flag) {
14912
- subframeEnabled = flag;
14913
- }
14914
-
14915
- function loadAnimation(params) {
14916
- if (standalone === true) {
14917
- params.animationData = JSON.parse(animationData);
14918
- }
14919
- return animationManager.loadAnimation(params);
14920
- }
14921
-
14922
- function setQuality(value) {
14923
- if (typeof value === 'string') {
14924
- switch (value) {
14925
- case 'high':
14926
- defaultCurveSegments = 200;
14927
- break;
14928
- case 'medium':
14929
- defaultCurveSegments = 50;
14930
- break;
14931
- case 'low':
14932
- defaultCurveSegments = 10;
14933
- break;
14934
- }
14935
- } else if (!isNaN(value) && value > 1) {
14936
- defaultCurveSegments = value;
14937
- }
14938
- if (defaultCurveSegments >= 50) {
14939
- roundValues(false);
14940
- } else {
14941
- roundValues(true);
14942
- }
14943
- }
14944
-
14945
- function inBrowser() {
14946
- return typeof navigator !== 'undefined';
14947
- }
14948
-
14949
- function installPlugin(type, plugin) {
14950
- if (type === 'expressions') {
14951
- expressionsPlugin = plugin;
14952
- }
14953
- }
14954
-
14955
- function getFactory(name) {
14956
- switch (name) {
14957
- case "propertyFactory":
14958
- return PropertyFactory;
14959
- case "shapePropertyFactory":
14960
- return ShapePropertyFactory;
14961
- case "matrix":
14962
- return Matrix;
14963
- }
14964
- }
14965
-
14966
- lottie.play = animationManager.play;
14967
- lottie.pause = animationManager.pause;
14968
- lottie.setLocationHref = setLocationHref;
14969
- lottie.togglePause = animationManager.togglePause;
14970
- lottie.setSpeed = animationManager.setSpeed;
14971
- lottie.setDirection = animationManager.setDirection;
14972
- lottie.stop = animationManager.stop;
14973
- lottie.searchAnimations = searchAnimations;
14974
- lottie.registerAnimation = animationManager.registerAnimation;
14975
- lottie.loadAnimation = loadAnimation;
14976
- lottie.setSubframeRendering = setSubframeRendering;
14977
- lottie.resize = animationManager.resize;
14978
- //lottie.start = start;
14979
- lottie.goToAndStop = animationManager.goToAndStop;
14980
- lottie.destroy = animationManager.destroy;
14981
- lottie.setQuality = setQuality;
14982
- lottie.inBrowser = inBrowser;
14983
- lottie.installPlugin = installPlugin;
14984
- lottie.freeze = animationManager.freeze;
14985
- lottie.unfreeze = animationManager.unfreeze;
14986
- lottie.getRegisteredAnimations = animationManager.getRegisteredAnimations;
14987
- lottie.__getFactory = getFactory;
14988
- lottie.version = '5.6.6';
14989
-
14990
- function checkReady() {
14991
- if (document.readyState === "complete") {
14992
- clearInterval(readyStateCheckInterval);
14993
- searchAnimations();
14994
- }
14995
- }
14996
-
14997
- function getQueryVariable(variable) {
14998
- var vars = queryString.split('&');
14999
- for (var i = 0; i < vars.length; i++) {
15000
- var pair = vars[i].split('=');
15001
- if (decodeURIComponent(pair[0]) == variable) {
15002
- return decodeURIComponent(pair[1]);
15003
- }
15004
- }
15005
- }
15006
- var standalone = '__[STANDALONE]__';
15007
- var animationData = '__[ANIMATIONDATA]__';
15008
- var renderer = '';
15009
- if (standalone) {
15010
- var scripts = document.getElementsByTagName('script');
15011
- var index = scripts.length - 1;
15012
- var myScript = scripts[index] || {
15013
- src: ''
15014
- };
15015
- var queryString = myScript.src.replace(/^[^\?]+\??/, '');
15016
- renderer = getQueryVariable('renderer');
15017
- }
15018
- var readyStateCheckInterval = setInterval(checkReady, 100);
15019
-
15020
- return lottie;
15021
- }));
15022
-
15023
- var PremiumLottieHandler = function ($scope, $) {
15024
-
15025
- var $lottieIcons = $scope.find(".premium-lottie-animation");
15026
-
15027
- if (!$lottieIcons.length)
15028
- return;
15029
-
15030
- $lottieIcons.each(function (index, item) {
15031
- var $item = $(item);
15032
-
15033
- if ($item.data("box-tilt")) {
15034
- var reverse = $item.data("box-tilt-reverse");
15035
- UniversalTilt.init({
15036
- elements: $item.parent(),
15037
- settings: {
15038
- reverse: reverse
15039
- },
15040
- callbacks: {
15041
- onMouseLeave: function (el) {
15042
- el.style.boxShadow = "0 45px 100px rgba(255, 255, 255, 0)";
15043
- },
15044
- onDeviceMove: function (el) {
15045
- el.style.boxShadow = "0 45px 100px rgba(255, 255, 255, 0.3)";
15046
- }
15047
- }
15048
- });
15049
- }
15050
-
15051
- instance = new premiumLottieAnimations($item);
15052
- instance.init();
15053
- });
15054
- };
15055
-
15056
- var PremiumLottieAddonHandler = function ($scope) {
15057
-
15058
- if (!$scope.hasClass("premium-lottie-yes"))
15059
- return;
15060
-
15061
- var target = $scope,
15062
- sectionId = target.data("id"),
15063
- settings = {},
15064
- tempTarget = target.find('#premium-lottie-' + sectionId),
15065
- isEditor = elementorFrontend.isEditMode() && tempTarget.length > 0,
15066
- targetID = isEditor ? target.find('#premium-lottie-' + sectionId) : target;
15067
-
15068
- settings = generateSettings(targetID);
15069
-
15070
- if (!settings) {
15071
- return false;
15072
- }
15073
-
15074
- generateLottieAnimation();
15075
-
15076
- if (isEditor) {
15077
-
15078
- var freeHandSettings = {
15079
- repeater: 'premium_lottie_repeater',
15080
- item: '.premium-lottie-layer',
15081
- hor: 'premium_lottie_hor',
15082
- ver: 'premium_lottie_ver',
15083
- width: 'premium_lottie_size',
15084
- tab: 'section_premium_lottie',
15085
- offset: 0,
15086
- widgets: ["drag"]
15087
- },
15088
- instance = null;
15089
-
15090
- instance = new premiumEditorBehavior(target, freeHandSettings);
15091
-
15092
- instance.init();
15093
-
15094
- }
15095
-
15096
- function generateSettings(target) {
15097
-
15098
- var lottieSettings = target.data("pa-lottie");
15099
-
15100
- if (!lottieSettings) {
15101
- return false;
15102
- }
15103
-
15104
- settings.lottieLayers = [];
15105
-
15106
- $.each(lottieSettings, function (index, layer) {
15107
- settings.lottieLayers.push(layer);
15108
- });
15109
-
15110
- if (0 !== Object.keys(settings).length) {
15111
- return settings;
15112
- }
15113
- }
15114
-
15115
- function generateLottieAnimation() {
15116
-
15117
- var currentDevice = elementorFrontend.getCurrentDeviceMode();
15118
-
15119
- if (isEditor) {
15120
- target.find(".premium-lottie-layer svg, .premium-lottie-layer canvas").remove();
15121
- }
15122
-
15123
- var layout = "";
15124
-
15125
- $.each(settings.lottieLayers, function (index, layer) {
15126
-
15127
- layer.lottie_url = 'url' === layer.source ? layer.lottie_url : layer.lottie_file.url;
15128
-
15129
- if ("" === layer.lottie_url || !layer.show_layer_on.includes(currentDevice))
15130
- return;
15131
-
15132
- var renderer = layer.lottie_renderer;
15133
-
15134
- if (!isEditor) {
15135
-
15136
- layout +=
15137
- '<div class="premium-lottie-layer premium-lottie-animation premium-lottie-' + renderer + ' elementor-repeater-item-' + layer._id + '"></div>';
15138
-
15139
- target.prepend(layout);
15140
-
15141
- layout = "";
15142
-
15143
- }
15144
-
15145
- var $layer = jQuery('.elementor-repeater-item-' + layer._id);
15146
-
15147
- var loop = layer.lottie_loop,
15148
- reverse = layer.lottie_reverse,
15149
- trigger = layer.hover_action;
15150
-
15151
- if ("play" !== trigger) {
15152
- var scrollStart = layer.start_on_visible;
15153
- }
15154
-
15155
- var animItem = lottie.loadAnimation({
15156
- wrapper: $layer[0],
15157
- renderer: renderer || 'svg',
15158
- loop: loop ? true : false,
15159
- path: layer.lottie_url,
15160
- autoplay: true
15161
- });
15162
-
15163
- if (layer.lottie_speed && 1 !== layer.lottie_speed) {
15164
- animItem.setSpeed(layer.lottie_speed);
15165
- }
15166
-
15167
- if (reverse) {
15168
- animItem.setDirection(-1);
15169
- }
15170
-
15171
- animItem.addEventListener('DOMLoaded', function () {
15172
-
15173
- if ("play" === trigger || ("play" !== trigger && scrollStart)) {
15174
- animItem.pause();
15175
- if ("play" !== trigger) {
15176
- initLottie("load");
15177
- $(window).on("scroll", initLottie);
15178
- }
15179
- }
15180
-
15181
- if ("none" !== trigger) {
15182
- $layer.hover(function () {
15183
- if ("play" === trigger) {
15184
- animItem.play();
15185
- } else if ("pause" === trigger) {
15186
- animItem.pause();
15187
- }
15188
- }, function () {
15189
- if ("play" === trigger) {
15190
- animItem.pause();
15191
- } else if ("pause" === trigger) {
15192
- animItem.play();
15193
- }
15194
- });
15195
- }
15196
-
15197
- if ("yes" === layer.premium_lottie_parallax || layer.animate_on_scroll) {
15198
-
15199
- var effects = [];
15200
-
15201
- if ("yes" === layer.premium_lottie_parallax)
15202
- effects.push("translateY");
15203
-
15204
-
15205
- if (layer.animate_on_scroll) {
15206
- animItem.pause();
15207
- effects.push("animate");
15208
- }
15209
-
15210
- var parallaxSettings = {
15211
- elType: 'SECTION',
15212
- effects: effects
15213
- },
15214
- parallaxInstance = null;
15215
-
15216
-
15217
- if (effects.includes('animate')) {
15218
- parallaxSettings.animate = {
15219
- speed: layer.premium_lottie_animate_speed.size,
15220
- range: {
15221
- start: layer.premium_lottie_animate_view.sizes.start,
15222
- end: layer.premium_lottie_animate_view.sizes.end
15223
- }
15224
- };
15225
- }
15226
-
15227
-
15228
- if (effects.includes('translateY')) {
15229
-
15230
- parallaxSettings.vscroll = {
15231
- speed: layer.premium_lottie_parallax_speed.size || 4,
15232
- direction: layer.premium_lottie_parallax_direction,
15233
- range: {
15234
- start: layer.premium_lottie_parallax_view.sizes.start,
15235
- end: layer.premium_lottie_parallax_view.sizes.end
15236
- }
15237
- };
15238
-
15239
- }
15240
-
15241
- parallaxInstance = new premiumEffects($layer[0], parallaxSettings, animItem);
15242
-
15243
- parallaxInstance.init();
15244
- }
15245
-
15246
- });
15247
-
15248
- function initLottie(event) {
15249
-
15250
- var vpHeight = $(window).outerHeight(),
15251
- clientSize = true;
15252
-
15253
- if (typeof $layer[0].getBoundingClientRect === "function") {
15254
-
15255
- var rec = $layer[0].getBoundingClientRect();
15256
-
15257
- var tViz = rec.top >= 0 && rec.top < vpHeight,
15258
- bViz = rec.bottom > 0 && rec.bottom <= vpHeight,
15259
- vVisible = false ? tViz || bViz : tViz && bViz,
15260
- vVisible = rec.top < 0 && rec.bottom > vpHeight ? true : vVisible;
15261
-
15262
- clientSize && vVisible ? animItem.play() : animItem.pause();
15263
-
15264
- }
15265
-
15266
- }
15267
-
15268
- });
15269
-
15270
- }
15271
-
15272
- };
15273
-
15274
- window.premiumLottieAnimations = function ($elem) {
15275
-
15276
- var self = this,
15277
- $lottie = null;
15278
-
15279
- if ($elem.hasClass("premium-lottie-animation")) {
15280
- $lottie = $elem;
15281
- } else {
15282
- $lottie = $elem.find(".premium-lottie-animation");
15283
- }
15284
-
15285
- self.init = function () {
15286
-
15287
- //Check if widget has been initialized before
15288
- if ($lottie.data('initialized')) {
15289
- return;
15290
- }
15291
-
15292
- //Mark widget as initialized
15293
- $lottie.data('initialized', true);
15294
-
15295
- // Search for elements with the .lottie and/or .bodymovin class
15296
- //lottie.searchAnimations();
15297
-
15298
- var loop = $lottie.data("lottie-loop"),
15299
- reverse = $lottie.data("lottie-reverse"),
15300
- trigger = $lottie.data("lottie-hover"),
15301
- speed = $lottie.data("lottie-speed"),
15302
- scroll = $lottie.data("lottie-scroll"),
15303
- viewPort = $lottie.data("lottie-viewport"),
15304
- renderer = $lottie.data("lottie-render");
15305
-
15306
- var animItem = lottie.loadAnimation({
15307
- container: $lottie[0],
15308
- renderer: renderer || 'svg',
15309
- loop: loop ? true : false,
15310
- path: $lottie.data("lottie-url"),
15311
- autoplay: true,
15312
- });
15313
-
15314
- if (reverse) {
15315
- animItem.setDirection(-1);
15316
- }
15317
-
15318
- if (speed && 1 !== speed) {
15319
- animItem.setSpeed(speed);
15320
- }
15321
-
15322
- animItem.addEventListener('DOMLoaded', function () {
15323
-
15324
- if (scroll || viewPort) {
15325
-
15326
- var animateInstance = null,
15327
- scrollSpeed = $lottie.data("scroll-speed"),
15328
- scrollStart = $lottie.data("scroll-start"),
15329
- scrollEnd = $lottie.data("scroll-end");
15330
-
15331
- animItem.pause();
15332
-
15333
- var animateSettings = {
15334
- elType: 'SECTION',
15335
- animate: {
15336
- speed: viewPort ? "viewport" : scrollSpeed,
15337
- range: {
15338
- start: scrollStart,
15339
- end: scrollEnd
15340
- }
15341
- },
15342
- effects: ['animate']
15343
- };
15344
-
15345
- animateInstance = new premiumEffects($lottie[0], animateSettings, animItem);
15346
-
15347
- animateInstance.init();
15348
-
15349
- }
15350
-
15351
- if (trigger) {
15352
- animItem.pause();
15353
- $elem.hover(function () {
15354
- animItem.play();
15355
- }, function () {
15356
- animItem.pause();
15357
- });
15358
- }
15359
-
15360
-
15361
- });
15362
-
15363
-
15364
- };
15365
-
15366
- };
15367
-
15368
- $(window).on("elementor/frontend/init", function () {
15369
-
15370
- elementorFrontend.hooks.addAction("frontend/element_ready/widget", PremiumLottieHandler);
15371
-
15372
- elementorFrontend.hooks.addAction("frontend/element_ready/section", PremiumLottieAddonHandler);
15373
- elementorFrontend.hooks.addAction("frontend/element_ready/container", PremiumLottieAddonHandler);
15374
-
15375
- });
15376
-
15377
- window.premiumEffects = function (element, settings, lottieInstance) {
15378
-
15379
- var self = this,
15380
- $el = $(element),
15381
- scrolls = $el.data("scrolls"),
15382
- elementSettings = settings,
15383
- elType = elementSettings.elType;
15384
-
15385
- self.elementRules = {};
15386
-
15387
- self.init = function () {
15388
-
15389
- if (scrolls || 'SECTION' === elType) {
15390
-
15391
- if (!elementSettings.effects.length) {
15392
- return;
15393
- }
15394
-
15395
- self.setDefaults();
15396
-
15397
- elementorFrontend.elements.$window.on('scroll load', self.initScroll);
15398
- } else {
15399
- elementorFrontend.elements.$window.off('scroll load', self.initScroll);
15400
- return;
15401
- }
15402
-
15403
- };
15404
-
15405
- self.setDefaults = function () {
15406
-
15407
- elementSettings.defaults = {};
15408
- elementSettings.defaults.axis = 'y';
15409
-
15410
- };
15411
-
15412
- self.getPercents = function () {
15413
-
15414
- var dimensions = self.getDimensions();
15415
-
15416
- elementTopWindowPoint = dimensions.elementTop - pageYOffset,
15417
- elementEntrancePoint = elementTopWindowPoint - innerHeight;
15418
-
15419
- passedRangePercents = 100 / dimensions.range * (elementEntrancePoint * -1);
15420
-
15421
- return passedRangePercents;
15422
-
15423
- };
15424
-
15425
- self.initScroll = function () {
15426
-
15427
- self.initScrollEffects();
15428
-
15429
- };
15430
-
15431
- self.initScrollEffects = function () {
15432
-
15433
- var percents = self.getPercents();
15434
-
15435
- var elemSettings = $el.closest(".elementor-element").data("settings");
15436
-
15437
- if (elemSettings && "fixed" === elemSettings._position) {
15438
-
15439
- percents = self.getLottieViewportHeightPercentage();
15440
-
15441
- }
15442
-
15443
- if (elementSettings.effects.includes('animate')) {
15444
- self.animate(percents, elementSettings.animate);
15445
- }
15446
-
15447
- if (elementSettings.effects.includes('translateY')) {
15448
- self.transform('translateY', percents, elementSettings.vscroll);
15449
- }
15450
-
15451
- };
15452
-
15453
- self.getLottieViewportHeightPercentage = function () {
15454
-
15455
- var offsetObj = elementSettings.animate.range;
15456
- var limitPageHeight = window.innerHeight;
15457
- var offsetStart = offsetObj.start || 0,
15458
- offsetEnd = offsetObj.end || 0,
15459
- initialPageHeight = limitPageHeight || document.documentElement.scrollHeight - document.documentElement.clientHeight,
15460
- heightOffset = initialPageHeight * offsetStart / 100,
15461
- pageRange = initialPageHeight + heightOffset + initialPageHeight * offsetEnd / 100,
15462
- scrollPos = document.documentElement.scrollTop + document.body.scrollTop + heightOffset;
15463
-
15464
- return scrollPos / pageRange * 100;
15465
-
15466
- };
15467
-
15468
- self.getDimensions = function () {
15469
-
15470
- var elementOffset = $el.offset();
15471
-
15472
- var dimensions = {
15473
- elementHeight: $el.outerHeight(),
15474
- elementWidth: $el.outerWidth(),
15475
- elementTop: elementOffset.top,
15476
- elementLeft: elementOffset.left
15477
- };
15478
-
15479
- dimensions.range = dimensions.elementHeight + innerHeight;
15480
-
15481
- return dimensions;
15482
-
15483
- };
15484
-
15485
- self.getStep = function (percents, options) {
15486
- return -(percents - 50) * options.speed;
15487
-
15488
- };
15489
-
15490
- self.animate = function (percents, data) {
15491
-
15492
- var stopFrame = lottieInstance.totalFrames;
15493
-
15494
- if (data.range) {
15495
-
15496
- if (data.range.start > percents) {
15497
- percents = data.range.start;
15498
- }
15499
-
15500
- if (data.range.end < percents) {
15501
- percents = data.range.end;
15502
- }
15503
-
15504
- }
15505
-
15506
- var currframe = ((percents) / 100) * (stopFrame);
15507
-
15508
- //Check if element is visible
15509
- if (data.speed === "viewport") {
15510
- if (data.range.start !== percents && data.range.end !== percents) {
15511
- lottieInstance.play();
15512
- } else {
15513
- lottieInstance.pause();
15514
- }
15515
- } else {
15516
- lottieInstance.goToAndStop(currframe, true);
15517
- }
15518
-
15519
- };
15520
-
15521
- self.transform = function (action, percents, data) {
15522
-
15523
- if ('down' === data.direction) {
15524
- percents = 100 - percents;
15525
- }
15526
-
15527
- if (data.range) {
15528
-
15529
- if (data.range.start > percents) {
15530
- percents = data.range.start;
15531
- }
15532
-
15533
- if (data.range.end < percents) {
15534
- percents = data.range.end;
15535
- }
15536
-
15537
- }
15538
-
15539
- elementSettings.defaults.unit = 'px';
15540
-
15541
- self.updateElement('transform', action, self.getStep(percents, data) + elementSettings.defaults.unit);
15542
-
15543
- };
15544
-
15545
- self.updateElement = function (propName, key, value) {
15546
-
15547
- if (!self.elementRules[propName]) {
15548
- self.elementRules[propName] = {};
15549
- }
15550
-
15551
- if (!self.elementRules[propName][key]) {
15552
- self.elementRules[propName][key] = true;
15553
-
15554
- self.updateElementRule(propName);
15555
- }
15556
-
15557
- var cssVarKey = '--' + key;
15558
-
15559
- element.style.setProperty(cssVarKey, value);
15560
-
15561
- };
15562
-
15563
- self.updateElementRule = function (rule) {
15564
-
15565
- var cssValue = '';
15566
-
15567
- $.each(self.elementRules[rule], function (variableKey) {
15568
- cssValue += variableKey + '(var(--' + variableKey + '))';
15569
- });
15570
-
15571
- $el.css(rule, cssValue);
15572
-
15573
- };
15574
-
15575
- };
15576
-
1
+ (function ($) {
2
+
3
+ (typeof navigator !== "undefined") && (function (root, factory) {
4
+
5
+ if (typeof define === "function" && define.amd) {
6
+ define(function () {
7
+ return factory(root);
8
+ });
9
+ } else if (typeof module === "object" && module.exports) {
10
+ module.exports = factory(root);
11
+ } else {
12
+ root.lottie = factory(root);
13
+ root.bodymovin = root.lottie;
14
+ }
15
+ }((window || {}), function (window) {
16
+ "use strict";
17
+ var svgNS = "http://www.w3.org/2000/svg";
18
+
19
+ var locationHref = '';
20
+
21
+ var initialDefaultFrame = -999999;
22
+
23
+ var subframeEnabled = true;
24
+ var expressionsPlugin;
25
+ var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
26
+ var cachedColors = {};
27
+ var bm_rounder = Math.round;
28
+ var bm_rnd;
29
+ var bm_pow = Math.pow;
30
+ var bm_sqrt = Math.sqrt;
31
+ var bm_abs = Math.abs;
32
+ var bm_floor = Math.floor;
33
+ var bm_max = Math.max;
34
+ var bm_min = Math.min;
35
+ var blitter = 10;
36
+
37
+ var BMMath = {};
38
+ (function () {
39
+ 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"];
40
+ var i, len = propertyNames.length;
41
+ for (i = 0; i < len; i += 1) {
42
+ BMMath[propertyNames[i]] = Math[propertyNames[i]];
43
+ }
44
+ }());
45
+
46
+ function ProjectInterface() {
47
+ return {};
48
+ }
49
+
50
+ BMMath.random = Math.random;
51
+ BMMath.abs = function (val) {
52
+ var tOfVal = typeof val;
53
+ if (tOfVal === 'object' && val.length) {
54
+ var absArr = createSizedArray(val.length);
55
+ var i, len = val.length;
56
+ for (i = 0; i < len; i += 1) {
57
+ absArr[i] = Math.abs(val[i]);
58
+ }
59
+ return absArr;
60
+ }
61
+ return Math.abs(val);
62
+
63
+ };
64
+ var defaultCurveSegments = 150;
65
+ var degToRads = Math.PI / 180;
66
+ var roundCorner = 0.5519;
67
+
68
+ function roundValues(flag) {
69
+ if (flag) {
70
+ bm_rnd = Math.round;
71
+ } else {
72
+ bm_rnd = function (val) {
73
+ return val;
74
+ };
75
+ }
76
+ }
77
+ roundValues(false);
78
+
79
+ function styleDiv(element) {
80
+ element.style.position = 'absolute';
81
+ element.style.top = 0;
82
+ element.style.left = 0;
83
+ element.style.display = 'block';
84
+ element.style.transformOrigin = element.style.webkitTransformOrigin = '0 0';
85
+ element.style.backfaceVisibility = element.style.webkitBackfaceVisibility = 'visible';
86
+ element.style.transformStyle = element.style.webkitTransformStyle = element.style.mozTransformStyle = "preserve-3d";
87
+ }
88
+
89
+ function BMEnterFrameEvent(type, currentTime, totalTime, frameMultiplier) {
90
+ this.type = type;
91
+ this.currentTime = currentTime;
92
+ this.totalTime = totalTime;
93
+ this.direction = frameMultiplier < 0 ? -1 : 1;
94
+ }
95
+
96
+ function BMCompleteEvent(type, frameMultiplier) {
97
+ this.type = type;
98
+ this.direction = frameMultiplier < 0 ? -1 : 1;
99
+ }
100
+
101
+ function BMCompleteLoopEvent(type, totalLoops, currentLoop, frameMultiplier) {
102
+ this.type = type;
103
+ this.currentLoop = currentLoop;
104
+ this.totalLoops = totalLoops;
105
+ this.direction = frameMultiplier < 0 ? -1 : 1;
106
+ }
107
+
108
+ function BMSegmentStartEvent(type, firstFrame, totalFrames) {
109
+ this.type = type;
110
+ this.firstFrame = firstFrame;
111
+ this.totalFrames = totalFrames;
112
+ }
113
+
114
+ function BMDestroyEvent(type, target) {
115
+ this.type = type;
116
+ this.target = target;
117
+ }
118
+
119
+ function BMRenderFrameErrorEvent(nativeError, currentTime) {
120
+ this.type = 'renderFrameError';
121
+ this.nativeError = nativeError;
122
+ this.currentTime = currentTime;
123
+ }
124
+
125
+ function BMConfigErrorEvent(nativeError) {
126
+ this.type = 'configError';
127
+ this.nativeError = nativeError;
128
+ }
129
+
130
+ function BMAnimationConfigErrorEvent(type, nativeError) {
131
+ this.type = type;
132
+ this.nativeError = nativeError;
133
+ this.currentTime = currentTime;
134
+ }
135
+
136
+ var createElementID = (function () {
137
+ var _count = 0;
138
+ return function createID() {
139
+ return '__lottie_element_' + ++_count
140
+ }
141
+ }())
142
+
143
+ function HSVtoRGB(h, s, v) {
144
+ var r, g, b, i, f, p, q, t;
145
+ i = Math.floor(h * 6);
146
+ f = h * 6 - i;
147
+ p = v * (1 - s);
148
+ q = v * (1 - f * s);
149
+ t = v * (1 - (1 - f) * s);
150
+ switch (i % 6) {
151
+ case 0:
152
+ r = v;
153
+ g = t;
154
+ b = p;
155
+ break;
156
+ case 1:
157
+ r = q;
158
+ g = v;
159
+ b = p;
160
+ break;
161
+ case 2:
162
+ r = p;
163
+ g = v;
164
+ b = t;
165
+ break;
166
+ case 3:
167
+ r = p;
168
+ g = q;
169
+ b = v;
170
+ break;
171
+ case 4:
172
+ r = t;
173
+ g = p;
174
+ b = v;
175
+ break;
176
+ case 5:
177
+ r = v;
178
+ g = p;
179
+ b = q;
180
+ break;
181
+ }
182
+ return [r,
183
+ g,
184
+ b
185
+ ];
186
+ }
187
+
188
+ function RGBtoHSV(r, g, b) {
189
+ var max = Math.max(r, g, b),
190
+ min = Math.min(r, g, b),
191
+ d = max - min,
192
+ h,
193
+ s = (max === 0 ? 0 : d / max),
194
+ v = max / 255;
195
+
196
+ switch (max) {
197
+ case min:
198
+ h = 0;
199
+ break;
200
+ case r:
201
+ h = (g - b) + d * (g < b ? 6 : 0);
202
+ h /= 6 * d;
203
+ break;
204
+ case g:
205
+ h = (b - r) + d * 2;
206
+ h /= 6 * d;
207
+ break;
208
+ case b:
209
+ h = (r - g) + d * 4;
210
+ h /= 6 * d;
211
+ break;
212
+ }
213
+
214
+ return [
215
+ h,
216
+ s,
217
+ v
218
+ ];
219
+ }
220
+
221
+ function addSaturationToRGB(color, offset) {
222
+ var hsv = RGBtoHSV(color[0] * 255, color[1] * 255, color[2] * 255);
223
+ hsv[1] += offset;
224
+ if (hsv[1] > 1) {
225
+ hsv[1] = 1;
226
+ } else if (hsv[1] <= 0) {
227
+ hsv[1] = 0;
228
+ }
229
+ return HSVtoRGB(hsv[0], hsv[1], hsv[2]);
230
+ }
231
+
232
+ function addBrightnessToRGB(color, offset) {
233
+ var hsv = RGBtoHSV(color[0] * 255, color[1] * 255, color[2] * 255);
234
+ hsv[2] += offset;
235
+ if (hsv[2] > 1) {
236
+ hsv[2] = 1;
237
+ } else if (hsv[2] < 0) {
238
+ hsv[2] = 0;
239
+ }
240
+ return HSVtoRGB(hsv[0], hsv[1], hsv[2]);
241
+ }
242
+
243
+ function addHueToRGB(color, offset) {
244
+ var hsv = RGBtoHSV(color[0] * 255, color[1] * 255, color[2] * 255);
245
+ hsv[0] += offset / 360;
246
+ if (hsv[0] > 1) {
247
+ hsv[0] -= 1;
248
+ } else if (hsv[0] < 0) {
249
+ hsv[0] += 1;
250
+ }
251
+ return HSVtoRGB(hsv[0], hsv[1], hsv[2]);
252
+ }
253
+
254
+ var rgbToHex = (function () {
255
+ var colorMap = [];
256
+ var i;
257
+ var hex;
258
+ for (i = 0; i < 256; i += 1) {
259
+ hex = i.toString(16);
260
+ colorMap[i] = hex.length == 1 ? '0' + hex : hex;
261
+ }
262
+
263
+ return function (r, g, b) {
264
+ if (r < 0) {
265
+ r = 0;
266
+ }
267
+ if (g < 0) {
268
+ g = 0;
269
+ }
270
+ if (b < 0) {
271
+ b = 0;
272
+ }
273
+ return '#' + colorMap[r] + colorMap[g] + colorMap[b];
274
+ };
275
+ }());
276
+
277
+ function BaseEvent() { }
278
+ BaseEvent.prototype = {
279
+ triggerEvent: function (eventName, args) {
280
+ if (this._cbs[eventName]) {
281
+ var len = this._cbs[eventName].length;
282
+ for (var i = 0; i < len; i++) {
283
+ this._cbs[eventName][i](args);
284
+ }
285
+ }
286
+ },
287
+ addEventListener: function (eventName, callback) {
288
+ if (!this._cbs[eventName]) {
289
+ this._cbs[eventName] = [];
290
+ }
291
+ this._cbs[eventName].push(callback);
292
+
293
+ return function () {
294
+ this.removeEventListener(eventName, callback);
295
+ }.bind(this);
296
+ },
297
+ removeEventListener: function (eventName, callback) {
298
+ if (!callback) {
299
+ this._cbs[eventName] = null;
300
+ } else if (this._cbs[eventName]) {
301
+ var i = 0,
302
+ len = this._cbs[eventName].length;
303
+ while (i < len) {
304
+ if (this._cbs[eventName][i] === callback) {
305
+ this._cbs[eventName].splice(i, 1);
306
+ i -= 1;
307
+ len -= 1;
308
+ }
309
+ i += 1;
310
+ }
311
+ if (!this._cbs[eventName].length) {
312
+ this._cbs[eventName] = null;
313
+ }
314
+ }
315
+ }
316
+ };
317
+ var createTypedArray = (function () {
318
+ function createRegularArray(type, len) {
319
+ var i = 0,
320
+ arr = [],
321
+ value;
322
+ switch (type) {
323
+ case 'int16':
324
+ case 'uint8c':
325
+ value = 1;
326
+ break;
327
+ default:
328
+ value = 1.1;
329
+ break;
330
+ }
331
+ for (i = 0; i < len; i += 1) {
332
+ arr.push(value);
333
+ }
334
+ return arr;
335
+ }
336
+
337
+ function createTypedArray(type, len) {
338
+ if (type === 'float32') {
339
+ return new Float32Array(len);
340
+ } else if (type === 'int16') {
341
+ return new Int16Array(len);
342
+ } else if (type === 'uint8c') {
343
+ return new Uint8ClampedArray(len);
344
+ }
345
+ }
346
+ if (typeof Uint8ClampedArray === 'function' && typeof Float32Array === 'function') {
347
+ return createTypedArray;
348
+ } else {
349
+ return createRegularArray;
350
+ }
351
+ }());
352
+
353
+ function createSizedArray(len) {
354
+ return Array.apply(null, {
355
+ length: len
356
+ });
357
+ }
358
+
359
+ function createNS(type) {
360
+ //return {appendChild:function(){},setAttribute:function(){},style:{}}
361
+ return document.createElementNS(svgNS, type);
362
+ }
363
+
364
+ function createTag(type) {
365
+ //return {appendChild:function(){},setAttribute:function(){},style:{}}
366
+ return document.createElement(type);
367
+ }
368
+
369
+ function DynamicPropertyContainer() { };
370
+ DynamicPropertyContainer.prototype = {
371
+ addDynamicProperty: function (prop) {
372
+ if (this.dynamicProperties.indexOf(prop) === -1) {
373
+ this.dynamicProperties.push(prop);
374
+ this.container.addDynamicProperty(this);
375
+ this._isAnimated = true;
376
+ }
377
+ },
378
+ iterateDynamicProperties: function () {
379
+ this._mdf = false;
380
+ var i, len = this.dynamicProperties.length;
381
+ for (i = 0; i < len; i += 1) {
382
+ this.dynamicProperties[i].getValue();
383
+ if (this.dynamicProperties[i]._mdf) {
384
+ this._mdf = true;
385
+ }
386
+ }
387
+ },
388
+ initDynamicPropertyContainer: function (container) {
389
+ this.container = container;
390
+ this.dynamicProperties = [];
391
+ this._mdf = false;
392
+ this._isAnimated = false;
393
+ }
394
+ }
395
+ var getBlendMode = (function () {
396
+
397
+ var blendModeEnums = {
398
+ 0: 'source-over',
399
+ 1: 'multiply',
400
+ 2: 'screen',
401
+ 3: 'overlay',
402
+ 4: 'darken',
403
+ 5: 'lighten',
404
+ 6: 'color-dodge',
405
+ 7: 'color-burn',
406
+ 8: 'hard-light',
407
+ 9: 'soft-light',
408
+ 10: 'difference',
409
+ 11: 'exclusion',
410
+ 12: 'hue',
411
+ 13: 'saturation',
412
+ 14: 'color',
413
+ 15: 'luminosity'
414
+ }
415
+
416
+ return function (mode) {
417
+ return blendModeEnums[mode] || '';
418
+ }
419
+ }())
420
+ /*!
421
+ Transformation Matrix v2.0
422
+ (c) Epistemex 2014-2015
423
+ www.epistemex.com
424
+ By Ken Fyrstenberg
425
+ Contributions by leeoniya.
426
+ License: MIT, header required.
427
+ */
428
+
429
+ /**
430
+ * 2D transformation matrix object initialized with identity matrix.
431
+ *
432
+ * The matrix can synchronize a canvas context by supplying the context
433
+ * as an argument, or later apply current absolute transform to an
434
+ * existing context.
435
+ *
436
+ * All values are handled as floating point values.
437
+ *
438
+ * @param {CanvasRenderingContext2D} [context] - Optional context to sync with Matrix
439
+ * @prop {number} a - scale x
440
+ * @prop {number} b - shear y
441
+ * @prop {number} c - shear x
442
+ * @prop {number} d - scale y
443
+ * @prop {number} e - translate x
444
+ * @prop {number} f - translate y
445
+ * @prop {CanvasRenderingContext2D|null} [context=null] - set or get current canvas context
446
+ * @constructor
447
+ */
448
+
449
+ var Matrix = (function () {
450
+
451
+ var _cos = Math.cos;
452
+ var _sin = Math.sin;
453
+ var _tan = Math.tan;
454
+ var _rnd = Math.round;
455
+
456
+ function reset() {
457
+ this.props[0] = 1;
458
+ this.props[1] = 0;
459
+ this.props[2] = 0;
460
+ this.props[3] = 0;
461
+ this.props[4] = 0;
462
+ this.props[5] = 1;
463
+ this.props[6] = 0;
464
+ this.props[7] = 0;
465
+ this.props[8] = 0;
466
+ this.props[9] = 0;
467
+ this.props[10] = 1;
468
+ this.props[11] = 0;
469
+ this.props[12] = 0;
470
+ this.props[13] = 0;
471
+ this.props[14] = 0;
472
+ this.props[15] = 1;
473
+ return this;
474
+ }
475
+
476
+ function rotate(angle) {
477
+ if (angle === 0) {
478
+ return this;
479
+ }
480
+ var mCos = _cos(angle);
481
+ var mSin = _sin(angle);
482
+ return this._t(mCos, -mSin, 0, 0, mSin, mCos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
483
+ }
484
+
485
+ function rotateX(angle) {
486
+ if (angle === 0) {
487
+ return this;
488
+ }
489
+ var mCos = _cos(angle);
490
+ var mSin = _sin(angle);
491
+ return this._t(1, 0, 0, 0, 0, mCos, -mSin, 0, 0, mSin, mCos, 0, 0, 0, 0, 1);
492
+ }
493
+
494
+ function rotateY(angle) {
495
+ if (angle === 0) {
496
+ return this;
497
+ }
498
+ var mCos = _cos(angle);
499
+ var mSin = _sin(angle);
500
+ return this._t(mCos, 0, mSin, 0, 0, 1, 0, 0, -mSin, 0, mCos, 0, 0, 0, 0, 1);
501
+ }
502
+
503
+ function rotateZ(angle) {
504
+ if (angle === 0) {
505
+ return this;
506
+ }
507
+ var mCos = _cos(angle);
508
+ var mSin = _sin(angle);
509
+ return this._t(mCos, -mSin, 0, 0, mSin, mCos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
510
+ }
511
+
512
+ function shear(sx, sy) {
513
+ return this._t(1, sy, sx, 1, 0, 0);
514
+ }
515
+
516
+ function skew(ax, ay) {
517
+ return this.shear(_tan(ax), _tan(ay));
518
+ }
519
+
520
+ function skewFromAxis(ax, angle) {
521
+ var mCos = _cos(angle);
522
+ var mSin = _sin(angle);
523
+ return this._t(mCos, mSin, 0, 0, -mSin, mCos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
524
+ ._t(1, 0, 0, 0, _tan(ax), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
525
+ ._t(mCos, -mSin, 0, 0, mSin, mCos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
526
+ //return this._t(mCos, mSin, -mSin, mCos, 0, 0)._t(1, 0, _tan(ax), 1, 0, 0)._t(mCos, -mSin, mSin, mCos, 0, 0);
527
+ }
528
+
529
+ function scale(sx, sy, sz) {
530
+ if (!sz && sz !== 0) {
531
+ sz = 1;
532
+ }
533
+ if (sx === 1 && sy === 1 && sz === 1) {
534
+ return this;
535
+ }
536
+ return this._t(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1);
537
+ }
538
+
539
+ function setTransform(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p) {
540
+ this.props[0] = a;
541
+ this.props[1] = b;
542
+ this.props[2] = c;
543
+ this.props[3] = d;
544
+ this.props[4] = e;
545
+ this.props[5] = f;
546
+ this.props[6] = g;
547
+ this.props[7] = h;
548
+ this.props[8] = i;
549
+ this.props[9] = j;
550
+ this.props[10] = k;
551
+ this.props[11] = l;
552
+ this.props[12] = m;
553
+ this.props[13] = n;
554
+ this.props[14] = o;
555
+ this.props[15] = p;
556
+ return this;
557
+ }
558
+
559
+ function translate(tx, ty, tz) {
560
+ tz = tz || 0;
561
+ if (tx !== 0 || ty !== 0 || tz !== 0) {
562
+ return this._t(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, tx, ty, tz, 1);
563
+ }
564
+ return this;
565
+ }
566
+
567
+ function transform(a2, b2, c2, d2, e2, f2, g2, h2, i2, j2, k2, l2, m2, n2, o2, p2) {
568
+
569
+ var _p = this.props;
570
+
571
+ 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) {
572
+ //NOTE: commenting this condition because TurboFan deoptimizes code when present
573
+ //if(m2 !== 0 || n2 !== 0 || o2 !== 0){
574
+ _p[12] = _p[12] * a2 + _p[15] * m2;
575
+ _p[13] = _p[13] * f2 + _p[15] * n2;
576
+ _p[14] = _p[14] * k2 + _p[15] * o2;
577
+ _p[15] = _p[15] * p2;
578
+ //}
579
+ this._identityCalculated = false;
580
+ return this;
581
+ }
582
+
583
+ var a1 = _p[0];
584
+ var b1 = _p[1];
585
+ var c1 = _p[2];
586
+ var d1 = _p[3];
587
+ var e1 = _p[4];
588
+ var f1 = _p[5];
589
+ var g1 = _p[6];
590
+ var h1 = _p[7];
591
+ var i1 = _p[8];
592
+ var j1 = _p[9];
593
+ var k1 = _p[10];
594
+ var l1 = _p[11];
595
+ var m1 = _p[12];
596
+ var n1 = _p[13];
597
+ var o1 = _p[14];
598
+ var p1 = _p[15];
599
+
600
+ /* matrix order (canvas compatible):
601
+ * ace
602
+ * bdf
603
+ * 001
604
+ */
605
+ _p[0] = a1 * a2 + b1 * e2 + c1 * i2 + d1 * m2;
606
+ _p[1] = a1 * b2 + b1 * f2 + c1 * j2 + d1 * n2;
607
+ _p[2] = a1 * c2 + b1 * g2 + c1 * k2 + d1 * o2;
608
+ _p[3] = a1 * d2 + b1 * h2 + c1 * l2 + d1 * p2;
609
+
610
+ _p[4] = e1 * a2 + f1 * e2 + g1 * i2 + h1 * m2;
611
+ _p[5] = e1 * b2 + f1 * f2 + g1 * j2 + h1 * n2;
612
+ _p[6] = e1 * c2 + f1 * g2 + g1 * k2 + h1 * o2;
613
+ _p[7] = e1 * d2 + f1 * h2 + g1 * l2 + h1 * p2;
614
+
615
+ _p[8] = i1 * a2 + j1 * e2 + k1 * i2 + l1 * m2;
616
+ _p[9] = i1 * b2 + j1 * f2 + k1 * j2 + l1 * n2;
617
+ _p[10] = i1 * c2 + j1 * g2 + k1 * k2 + l1 * o2;
618
+ _p[11] = i1 * d2 + j1 * h2 + k1 * l2 + l1 * p2;
619
+
620
+ _p[12] = m1 * a2 + n1 * e2 + o1 * i2 + p1 * m2;
621
+ _p[13] = m1 * b2 + n1 * f2 + o1 * j2 + p1 * n2;
622
+ _p[14] = m1 * c2 + n1 * g2 + o1 * k2 + p1 * o2;
623
+ _p[15] = m1 * d2 + n1 * h2 + o1 * l2 + p1 * p2;
624
+
625
+ this._identityCalculated = false;
626
+ return this;
627
+ }
628
+
629
+ function isIdentity() {
630
+ if (!this._identityCalculated) {
631
+ 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);
632
+ this._identityCalculated = true;
633
+ }
634
+ return this._identity;
635
+ }
636
+
637
+ function equals(matr) {
638
+ var i = 0;
639
+ while (i < 16) {
640
+ if (matr.props[i] !== this.props[i]) {
641
+ return false;
642
+ }
643
+ i += 1;
644
+ }
645
+ return true;
646
+ }
647
+
648
+ function clone(matr) {
649
+ var i;
650
+ for (i = 0; i < 16; i += 1) {
651
+ matr.props[i] = this.props[i];
652
+ }
653
+ }
654
+
655
+ function cloneFromProps(props) {
656
+ var i;
657
+ for (i = 0; i < 16; i += 1) {
658
+ this.props[i] = props[i];
659
+ }
660
+ }
661
+
662
+ function applyToPoint(x, y, z) {
663
+
664
+ return {
665
+ x: x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12],
666
+ y: x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13],
667
+ z: x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14]
668
+ };
669
+ /*return {
670
+ x: x * me.a + y * me.c + me.e,
671
+ y: x * me.b + y * me.d + me.f
672
+ };*/
673
+ }
674
+
675
+ function applyToX(x, y, z) {
676
+ return x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12];
677
+ }
678
+
679
+ function applyToY(x, y, z) {
680
+ return x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13];
681
+ }
682
+
683
+ function applyToZ(x, y, z) {
684
+ return x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14];
685
+ }
686
+
687
+ function getInverseMatrix() {
688
+ var determinant = this.props[0] * this.props[5] - this.props[1] * this.props[4];
689
+ var a = this.props[5] / determinant;
690
+ var b = -this.props[1] / determinant;
691
+ var c = -this.props[4] / determinant;
692
+ var d = this.props[0] / determinant;
693
+ var e = (this.props[4] * this.props[13] - this.props[5] * this.props[12]) / determinant;
694
+ var f = -(this.props[0] * this.props[13] - this.props[1] * this.props[12]) / determinant;
695
+ var inverseMatrix = new Matrix();
696
+ inverseMatrix.props[0] = a;
697
+ inverseMatrix.props[1] = b;
698
+ inverseMatrix.props[4] = c;
699
+ inverseMatrix.props[5] = d;
700
+ inverseMatrix.props[12] = e;
701
+ inverseMatrix.props[13] = f;
702
+ return inverseMatrix;
703
+ }
704
+
705
+ function inversePoint(pt) {
706
+ var inverseMatrix = this.getInverseMatrix();
707
+ return inverseMatrix.applyToPointArray(pt[0], pt[1], pt[2] || 0)
708
+ }
709
+
710
+ function inversePoints(pts) {
711
+ var i, len = pts.length,
712
+ retPts = [];
713
+ for (i = 0; i < len; i += 1) {
714
+ retPts[i] = inversePoint(pts[i]);
715
+ }
716
+ return retPts;
717
+ }
718
+
719
+ function applyToTriplePoints(pt1, pt2, pt3) {
720
+ var arr = createTypedArray('float32', 6);
721
+ if (this.isIdentity()) {
722
+ arr[0] = pt1[0];
723
+ arr[1] = pt1[1];
724
+ arr[2] = pt2[0];
725
+ arr[3] = pt2[1];
726
+ arr[4] = pt3[0];
727
+ arr[5] = pt3[1];
728
+ } else {
729
+ var p0 = this.props[0],
730
+ p1 = this.props[1],
731
+ p4 = this.props[4],
732
+ p5 = this.props[5],
733
+ p12 = this.props[12],
734
+ p13 = this.props[13];
735
+ arr[0] = pt1[0] * p0 + pt1[1] * p4 + p12;
736
+ arr[1] = pt1[0] * p1 + pt1[1] * p5 + p13;
737
+ arr[2] = pt2[0] * p0 + pt2[1] * p4 + p12;
738
+ arr[3] = pt2[0] * p1 + pt2[1] * p5 + p13;
739
+ arr[4] = pt3[0] * p0 + pt3[1] * p4 + p12;
740
+ arr[5] = pt3[0] * p1 + pt3[1] * p5 + p13;
741
+ }
742
+ return arr;
743
+ }
744
+
745
+ function applyToPointArray(x, y, z) {
746
+ var arr;
747
+ if (this.isIdentity()) {
748
+ arr = [x, y, z];
749
+ } else {
750
+ 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]];
751
+ }
752
+ return arr;
753
+ }
754
+
755
+ function applyToPointStringified(x, y) {
756
+ if (this.isIdentity()) {
757
+ return x + ',' + y;
758
+ }
759
+ var _p = this.props;
760
+ 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;
761
+ }
762
+
763
+ function toCSS() {
764
+ //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.
765
+ /*if(this.isIdentity()) {
766
+ return '';
767
+ }*/
768
+ var i = 0;
769
+ var props = this.props;
770
+ var cssValue = 'matrix3d(';
771
+ var v = 10000;
772
+ while (i < 16) {
773
+ cssValue += _rnd(props[i] * v) / v;
774
+ cssValue += i === 15 ? ')' : ',';
775
+ i += 1;
776
+ }
777
+ return cssValue;
778
+ }
779
+
780
+ function roundMatrixProperty(val) {
781
+ var v = 10000;
782
+ if ((val < 0.000001 && val > 0) || (val > -0.000001 && val < 0)) {
783
+ return _rnd(val * v) / v;
784
+ }
785
+ return val;
786
+ }
787
+
788
+ function to2dCSS() {
789
+ //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.
790
+ /*if(this.isIdentity()) {
791
+ return '';
792
+ }*/
793
+ var props = this.props;
794
+ var _a = roundMatrixProperty(props[0]);
795
+ var _b = roundMatrixProperty(props[1]);
796
+ var _c = roundMatrixProperty(props[4]);
797
+ var _d = roundMatrixProperty(props[5]);
798
+ var _e = roundMatrixProperty(props[12]);
799
+ var _f = roundMatrixProperty(props[13]);
800
+ return "matrix(" + _a + ',' + _b + ',' + _c + ',' + _d + ',' + _e + ',' + _f + ")";
801
+ }
802
+
803
+ return function () {
804
+ this.reset = reset;
805
+ this.rotate = rotate;
806
+ this.rotateX = rotateX;
807
+ this.rotateY = rotateY;
808
+ this.rotateZ = rotateZ;
809
+ this.skew = skew;
810
+ this.skewFromAxis = skewFromAxis;
811
+ this.shear = shear;
812
+ this.scale = scale;
813
+ this.setTransform = setTransform;
814
+ this.translate = translate;
815
+ this.transform = transform;
816
+ this.applyToPoint = applyToPoint;
817
+ this.applyToX = applyToX;
818
+ this.applyToY = applyToY;
819
+ this.applyToZ = applyToZ;
820
+ this.applyToPointArray = applyToPointArray;
821
+ this.applyToTriplePoints = applyToTriplePoints;
822
+ this.applyToPointStringified = applyToPointStringified;
823
+ this.toCSS = toCSS;
824
+ this.to2dCSS = to2dCSS;
825
+ this.clone = clone;
826
+ this.cloneFromProps = cloneFromProps;
827
+ this.equals = equals;
828
+ this.inversePoints = inversePoints;
829
+ this.inversePoint = inversePoint;
830
+ this.getInverseMatrix = getInverseMatrix;
831
+ this._t = this.transform;
832
+ this.isIdentity = isIdentity;
833
+ this._identity = true;
834
+ this._identityCalculated = false;
835
+
836
+ this.props = createTypedArray('float32', 16);
837
+ this.reset();
838
+ };
839
+ }());
840
+
841
+ /*
842
+ Copyright 2014 David Bau.
843
+
844
+ Permission is hereby granted, free of charge, to any person obtaining
845
+ a copy of this software and associated documentation files (the
846
+ "Software"), to deal in the Software without restriction, including
847
+ without limitation the rights to use, copy, modify, merge, publish,
848
+ distribute, sublicense, and/or sell copies of the Software, and to
849
+ permit persons to whom the Software is furnished to do so, subject to
850
+ the following conditions:
851
+
852
+ The above copyright notice and this permission notice shall be
853
+ included in all copies or substantial portions of the Software.
854
+
855
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
856
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
857
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
858
+ IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
859
+ CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
860
+ TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
861
+ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
862
+
863
+ */
864
+
865
+ (function (pool, math) {
866
+ //
867
+ // The following constants are related to IEEE 754 limits.
868
+ //
869
+ var global = this,
870
+ width = 256, // each RC4 output is 0 <= x < 256
871
+ chunks = 6, // at least six RC4 outputs for each double
872
+ digits = 52, // there are 52 significant digits in a double
873
+ rngname = 'random', // rngname: name for Math.random and Math.seedrandom
874
+ startdenom = math.pow(width, chunks),
875
+ significance = math.pow(2, digits),
876
+ overflow = significance * 2,
877
+ mask = width - 1,
878
+ nodecrypto; // node.js crypto module, initialized at the bottom.
879
+
880
+ //
881
+ // seedrandom()
882
+ // This is the seedrandom function described above.
883
+ //
884
+ function seedrandom(seed, options, callback) {
885
+ var key = [];
886
+ options = (options === true) ? {
887
+ entropy: true
888
+ } : (options || {});
889
+
890
+ // Flatten the seed string or build one from local entropy if needed.
891
+ var shortseed = mixkey(flatten(
892
+ options.entropy ? [seed, tostring(pool)] :
893
+ (seed === null) ? autoseed() : seed, 3), key);
894
+
895
+ // Use the seed to initialize an ARC4 generator.
896
+ var arc4 = new ARC4(key);
897
+
898
+ // This function returns a random double in [0, 1) that contains
899
+ // randomness in every bit of the mantissa of the IEEE 754 value.
900
+ var prng = function () {
901
+ var n = arc4.g(chunks), // Start with a numerator n < 2 ^ 48
902
+ d = startdenom, // and denominator d = 2 ^ 48.
903
+ x = 0; // and no 'extra last byte'.
904
+ while (n < significance) { // Fill up all significant digits by
905
+ n = (n + x) * width; // shifting numerator and
906
+ d *= width; // denominator and generating a
907
+ x = arc4.g(1); // new least-significant-byte.
908
+ }
909
+ while (n >= overflow) { // To avoid rounding up, before adding
910
+ n /= 2; // last byte, shift everything
911
+ d /= 2; // right using integer math until
912
+ x >>>= 1; // we have exactly the desired bits.
913
+ }
914
+ return (n + x) / d; // Form the number within [0, 1).
915
+ };
916
+
917
+ prng.int32 = function () {
918
+ return arc4.g(4) | 0;
919
+ };
920
+ prng.quick = function () {
921
+ return arc4.g(4) / 0x100000000;
922
+ };
923
+ prng.double = prng;
924
+
925
+ // Mix the randomness into accumulated entropy.
926
+ mixkey(tostring(arc4.S), pool);
927
+
928
+ // Calling convention: what to return as a function of prng, seed, is_math.
929
+ return (options.pass || callback ||
930
+ function (prng, seed, is_math_call, state) {
931
+ if (state) {
932
+ // Load the arc4 state from the given state if it has an S array.
933
+ if (state.S) {
934
+ copy(state, arc4);
935
+ }
936
+ // Only provide the .state method if requested via options.state.
937
+ prng.state = function () {
938
+ return copy(arc4, {});
939
+ };
940
+ }
941
+
942
+ // If called as a method of Math (Math.seedrandom()), mutate
943
+ // Math.random because that is how seedrandom.js has worked since v1.0.
944
+ if (is_math_call) {
945
+ math[rngname] = prng;
946
+ return seed;
947
+ }
948
+
949
+ // Otherwise, it is a newer calling convention, so return the
950
+ // prng directly.
951
+ else return prng;
952
+ })(
953
+ prng,
954
+ shortseed,
955
+ 'global' in options ? options.global : (this == math),
956
+ options.state);
957
+ }
958
+ math['seed' + rngname] = seedrandom;
959
+
960
+ //
961
+ // ARC4
962
+ //
963
+ // An ARC4 implementation. The constructor takes a key in the form of
964
+ // an array of at most (width) integers that should be 0 <= x < (width).
965
+ //
966
+ // The g(count) method returns a pseudorandom integer that concatenates
967
+ // the next (count) outputs from ARC4. Its return value is a number x
968
+ // that is in the range 0 <= x < (width ^ count).
969
+ //
970
+ function ARC4(key) {
971
+ var t, keylen = key.length,
972
+ me = this,
973
+ i = 0,
974
+ j = me.i = me.j = 0,
975
+ s = me.S = [];
976
+
977
+ // The empty key [] is treated as [0].
978
+ if (!keylen) {
979
+ key = [keylen++];
980
+ }
981
+
982
+ // Set up S using the standard key scheduling algorithm.
983
+ while (i < width) {
984
+ s[i] = i++;
985
+ }
986
+ for (i = 0; i < width; i++) {
987
+ s[i] = s[j = mask & (j + key[i % keylen] + (t = s[i]))];
988
+ s[j] = t;
989
+ }
990
+
991
+ // The "g" method returns the next (count) outputs as one number.
992
+ me.g = function (count) {
993
+ // Using instance members instead of closure state nearly doubles speed.
994
+ var t, r = 0,
995
+ i = me.i,
996
+ j = me.j,
997
+ s = me.S;
998
+ while (count--) {
999
+ t = s[i = mask & (i + 1)];
1000
+ r = r * width + s[mask & ((s[i] = s[j = mask & (j + t)]) + (s[j] = t))];
1001
+ }
1002
+ me.i = i;
1003
+ me.j = j;
1004
+ return r;
1005
+ // For robust unpredictability, the function call below automatically
1006
+ // discards an initial batch of values. This is called RC4-drop[256].
1007
+ // See http://google.com/search?q=rsa+fluhrer+response&btnI
1008
+ };
1009
+ }
1010
+
1011
+ //
1012
+ // copy()
1013
+ // Copies internal state of ARC4 to or from a plain object.
1014
+ //
1015
+ function copy(f, t) {
1016
+ t.i = f.i;
1017
+ t.j = f.j;
1018
+ t.S = f.S.slice();
1019
+ return t;
1020
+ }
1021
+
1022
+ //
1023
+ // flatten()
1024
+ // Converts an object tree to nested arrays of strings.
1025
+ //
1026
+ function flatten(obj, depth) {
1027
+ var result = [],
1028
+ typ = (typeof obj),
1029
+ prop;
1030
+ if (depth && typ == 'object') {
1031
+ for (prop in obj) {
1032
+ try {
1033
+ result.push(flatten(obj[prop], depth - 1));
1034
+ } catch (e) { }
1035
+ }
1036
+ }
1037
+ return (result.length ? result : typ == 'string' ? obj : obj + '\0');
1038
+ }
1039
+
1040
+ //
1041
+ // mixkey()
1042
+ // Mixes a string seed into a key that is an array of integers, and
1043
+ // returns a shortened string seed that is equivalent to the result key.
1044
+ //
1045
+ function mixkey(seed, key) {
1046
+ var stringseed = seed + '',
1047
+ smear, j = 0;
1048
+ while (j < stringseed.length) {
1049
+ key[mask & j] =
1050
+ mask & ((smear ^= key[mask & j] * 19) + stringseed.charCodeAt(j++));
1051
+ }
1052
+ return tostring(key);
1053
+ }
1054
+
1055
+ //
1056
+ // autoseed()
1057
+ // Returns an object for autoseeding, using window.crypto and Node crypto
1058
+ // module if available.
1059
+ //
1060
+ function autoseed() {
1061
+ try {
1062
+ if (nodecrypto) {
1063
+ return tostring(nodecrypto.randomBytes(width));
1064
+ }
1065
+ var out = new Uint8Array(width);
1066
+ (global.crypto || global.msCrypto).getRandomValues(out);
1067
+ return tostring(out);
1068
+ } catch (e) {
1069
+ var browser = global.navigator,
1070
+ plugins = browser && browser.plugins;
1071
+ return [+new Date(), global, plugins, global.screen, tostring(pool)];
1072
+ }
1073
+ }
1074
+
1075
+ //
1076
+ // tostring()
1077
+ // Converts an array of charcodes to a string
1078
+ //
1079
+ function tostring(a) {
1080
+ return String.fromCharCode.apply(0, a);
1081
+ }
1082
+
1083
+ //
1084
+ // When seedrandom.js is loaded, we immediately mix a few bits
1085
+ // from the built-in RNG into the entropy pool. Because we do
1086
+ // not want to interfere with deterministic PRNG state later,
1087
+ // seedrandom will not call math.random on its own again after
1088
+ // initialization.
1089
+ //
1090
+ mixkey(math.random(), pool);
1091
+
1092
+ //
1093
+ // Nodejs and AMD support: export the implementation as a module using
1094
+ // either convention.
1095
+ //
1096
+
1097
+ // End anonymous scope, and pass initial values.
1098
+ })(
1099
+ [], // pool: entropy pool starts empty
1100
+ BMMath // math: package containing random, pow, and seedrandom
1101
+ );
1102
+ var BezierFactory = (function () {
1103
+ /**
1104
+ * BezierEasing - use bezier curve for transition easing function
1105
+ * by Gaëtan Renaudeau 2014 - 2015 – MIT License
1106
+ *
1107
+ * Credits: is based on Firefox's nsSMILKeySpline.cpp
1108
+ * Usage:
1109
+ * var spline = BezierEasing([ 0.25, 0.1, 0.25, 1.0 ])
1110
+ * spline.get(x) => returns the easing value | x must be in [0, 1] range
1111
+ *
1112
+ */
1113
+
1114
+ var ob = {};
1115
+ ob.getBezierEasing = getBezierEasing;
1116
+ var beziers = {};
1117
+
1118
+ function getBezierEasing(a, b, c, d, nm) {
1119
+ var str = nm || ('bez_' + a + '_' + b + '_' + c + '_' + d).replace(/\./g, 'p');
1120
+ if (beziers[str]) {
1121
+ return beziers[str];
1122
+ }
1123
+ var bezEasing = new BezierEasing([a, b, c, d]);
1124
+ beziers[str] = bezEasing;
1125
+ return bezEasing;
1126
+ }
1127
+
1128
+ // These values are established by empiricism with tests (tradeoff: performance VS precision)
1129
+ var NEWTON_ITERATIONS = 4;
1130
+ var NEWTON_MIN_SLOPE = 0.001;
1131
+ var SUBDIVISION_PRECISION = 0.0000001;
1132
+ var SUBDIVISION_MAX_ITERATIONS = 10;
1133
+
1134
+ var kSplineTableSize = 11;
1135
+ var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
1136
+
1137
+ var float32ArraySupported = typeof Float32Array === "function";
1138
+
1139
+ function A(aA1, aA2) {
1140
+ return 1.0 - 3.0 * aA2 + 3.0 * aA1;
1141
+ }
1142
+
1143
+ function B(aA1, aA2) {
1144
+ return 3.0 * aA2 - 6.0 * aA1;
1145
+ }
1146
+
1147
+ function C(aA1) {
1148
+ return 3.0 * aA1;
1149
+ }
1150
+
1151
+ // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
1152
+ function calcBezier(aT, aA1, aA2) {
1153
+ return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT;
1154
+ }
1155
+
1156
+ // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
1157
+ function getSlope(aT, aA1, aA2) {
1158
+ return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
1159
+ }
1160
+
1161
+ function binarySubdivide(aX, aA, aB, mX1, mX2) {
1162
+ var currentX, currentT, i = 0;
1163
+ do {
1164
+ currentT = aA + (aB - aA) / 2.0;
1165
+ currentX = calcBezier(currentT, mX1, mX2) - aX;
1166
+ if (currentX > 0.0) {
1167
+ aB = currentT;
1168
+ } else {
1169
+ aA = currentT;
1170
+ }
1171
+ } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
1172
+ return currentT;
1173
+ }
1174
+
1175
+ function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {
1176
+ for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
1177
+ var currentSlope = getSlope(aGuessT, mX1, mX2);
1178
+ if (currentSlope === 0.0) return aGuessT;
1179
+ var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
1180
+ aGuessT -= currentX / currentSlope;
1181
+ }
1182
+ return aGuessT;
1183
+ }
1184
+
1185
+ /**
1186
+ * points is an array of [ mX1, mY1, mX2, mY2 ]
1187
+ */
1188
+ function BezierEasing(points) {
1189
+ this._p = points;
1190
+ this._mSampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
1191
+ this._precomputed = false;
1192
+
1193
+ this.get = this.get.bind(this);
1194
+ }
1195
+
1196
+ BezierEasing.prototype = {
1197
+
1198
+ get: function (x) {
1199
+ var mX1 = this._p[0],
1200
+ mY1 = this._p[1],
1201
+ mX2 = this._p[2],
1202
+ mY2 = this._p[3];
1203
+ if (!this._precomputed) this._precompute();
1204
+ if (mX1 === mY1 && mX2 === mY2) return x; // linear
1205
+ // Because JavaScript number are imprecise, we should guarantee the extremes are right.
1206
+ if (x === 0) return 0;
1207
+ if (x === 1) return 1;
1208
+ return calcBezier(this._getTForX(x), mY1, mY2);
1209
+ },
1210
+
1211
+ // Private part
1212
+
1213
+ _precompute: function () {
1214
+ var mX1 = this._p[0],
1215
+ mY1 = this._p[1],
1216
+ mX2 = this._p[2],
1217
+ mY2 = this._p[3];
1218
+ this._precomputed = true;
1219
+ if (mX1 !== mY1 || mX2 !== mY2)
1220
+ this._calcSampleValues();
1221
+ },
1222
+
1223
+ _calcSampleValues: function () {
1224
+ var mX1 = this._p[0],
1225
+ mX2 = this._p[2];
1226
+ for (var i = 0; i < kSplineTableSize; ++i) {
1227
+ this._mSampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
1228
+ }
1229
+ },
1230
+
1231
+ /**
1232
+ * getTForX chose the fastest heuristic to determine the percentage value precisely from a given X projection.
1233
+ */
1234
+ _getTForX: function (aX) {
1235
+ var mX1 = this._p[0],
1236
+ mX2 = this._p[2],
1237
+ mSampleValues = this._mSampleValues;
1238
+
1239
+ var intervalStart = 0.0;
1240
+ var currentSample = 1;
1241
+ var lastSample = kSplineTableSize - 1;
1242
+
1243
+ for (; currentSample !== lastSample && mSampleValues[currentSample] <= aX; ++currentSample) {
1244
+ intervalStart += kSampleStepSize;
1245
+ }
1246
+ --currentSample;
1247
+
1248
+ // Interpolate to provide an initial guess for t
1249
+ var dist = (aX - mSampleValues[currentSample]) / (mSampleValues[currentSample + 1] - mSampleValues[currentSample]);
1250
+ var guessForT = intervalStart + dist * kSampleStepSize;
1251
+
1252
+ var initialSlope = getSlope(guessForT, mX1, mX2);
1253
+ if (initialSlope >= NEWTON_MIN_SLOPE) {
1254
+ return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
1255
+ } else if (initialSlope === 0.0) {
1256
+ return guessForT;
1257
+ } else {
1258
+ return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
1259
+ }
1260
+ }
1261
+ };
1262
+
1263
+ return ob;
1264
+
1265
+ }());
1266
+ (function () {
1267
+ var lastTime = 0;
1268
+ var vendors = ['ms', 'moz', 'webkit', 'o'];
1269
+ for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
1270
+ window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
1271
+ window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
1272
+ }
1273
+ if (!window.requestAnimationFrame)
1274
+ window.requestAnimationFrame = function (callback, element) {
1275
+ var currTime = new Date().getTime();
1276
+ var timeToCall = Math.max(0, 16 - (currTime - lastTime));
1277
+ var id = setTimeout(function () {
1278
+ callback(currTime + timeToCall);
1279
+ },
1280
+ timeToCall);
1281
+ lastTime = currTime + timeToCall;
1282
+ return id;
1283
+ };
1284
+ if (!window.cancelAnimationFrame)
1285
+ window.cancelAnimationFrame = function (id) {
1286
+ clearTimeout(id);
1287
+ };
1288
+ }());
1289
+
1290
+ function extendPrototype(sources, destination) {
1291
+ var i, len = sources.length,
1292
+ sourcePrototype;
1293
+ for (i = 0; i < len; i += 1) {
1294
+ sourcePrototype = sources[i].prototype;
1295
+ for (var attr in sourcePrototype) {
1296
+ if (sourcePrototype.hasOwnProperty(attr)) destination.prototype[attr] = sourcePrototype[attr];
1297
+ }
1298
+ }
1299
+ }
1300
+
1301
+ function getDescriptor(object, prop) {
1302
+ return Object.getOwnPropertyDescriptor(object, prop);
1303
+ }
1304
+
1305
+ function createProxyFunction(prototype) {
1306
+ function ProxyFunction() { }
1307
+ ProxyFunction.prototype = prototype;
1308
+ return ProxyFunction;
1309
+ }
1310
+
1311
+ function bezFunction() {
1312
+
1313
+ var easingFunctions = [];
1314
+ var math = Math;
1315
+
1316
+ function pointOnLine2D(x1, y1, x2, y2, x3, y3) {
1317
+ var det1 = (x1 * y2) + (y1 * x3) + (x2 * y3) - (x3 * y2) - (y3 * x1) - (x2 * y1);
1318
+ return det1 > -0.001 && det1 < 0.001;
1319
+ }
1320
+
1321
+ function pointOnLine3D(x1, y1, z1, x2, y2, z2, x3, y3, z3) {
1322
+ if (z1 === 0 && z2 === 0 && z3 === 0) {
1323
+ return pointOnLine2D(x1, y1, x2, y2, x3, y3);
1324
+ }
1325
+ var dist1 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2) + Math.pow(z2 - z1, 2));
1326
+ var dist2 = Math.sqrt(Math.pow(x3 - x1, 2) + Math.pow(y3 - y1, 2) + Math.pow(z3 - z1, 2));
1327
+ var dist3 = Math.sqrt(Math.pow(x3 - x2, 2) + Math.pow(y3 - y2, 2) + Math.pow(z3 - z2, 2));
1328
+ var diffDist;
1329
+ if (dist1 > dist2) {
1330
+ if (dist1 > dist3) {
1331
+ diffDist = dist1 - dist2 - dist3;
1332
+ } else {
1333
+ diffDist = dist3 - dist2 - dist1;
1334
+ }
1335
+ } else if (dist3 > dist2) {
1336
+ diffDist = dist3 - dist2 - dist1;
1337
+ } else {
1338
+ diffDist = dist2 - dist1 - dist3;
1339
+ }
1340
+ return diffDist > -0.0001 && diffDist < 0.0001;
1341
+ }
1342
+
1343
+ var getBezierLength = (function () {
1344
+
1345
+ return function (pt1, pt2, pt3, pt4) {
1346
+ var curveSegments = defaultCurveSegments;
1347
+ var k;
1348
+ var i, len;
1349
+ var ptCoord, perc, addedLength = 0;
1350
+ var ptDistance;
1351
+ var point = [],
1352
+ lastPoint = [];
1353
+ var lengthData = bezier_length_pool.newElement();
1354
+ len = pt3.length;
1355
+ for (k = 0; k < curveSegments; k += 1) {
1356
+ perc = k / (curveSegments - 1);
1357
+ ptDistance = 0;
1358
+ for (i = 0; i < len; i += 1) {
1359
+ ptCoord = bm_pow(1 - perc, 3) * pt1[i] + 3 * bm_pow(1 - perc, 2) * perc * pt3[i] + 3 * (1 - perc) * bm_pow(perc, 2) * pt4[i] + bm_pow(perc, 3) * pt2[i];
1360
+ point[i] = ptCoord;
1361
+ if (lastPoint[i] !== null) {
1362
+ ptDistance += bm_pow(point[i] - lastPoint[i], 2);
1363
+ }
1364
+ lastPoint[i] = point[i];
1365
+ }
1366
+ if (ptDistance) {
1367
+ ptDistance = bm_sqrt(ptDistance);
1368
+ addedLength += ptDistance;
1369
+ }
1370
+ lengthData.percents[k] = perc;
1371
+ lengthData.lengths[k] = addedLength;
1372
+ }
1373
+ lengthData.addedLength = addedLength;
1374
+ return lengthData;
1375
+ };
1376
+ }());
1377
+
1378
+ function getSegmentsLength(shapeData) {
1379
+ var segmentsLength = segments_length_pool.newElement();
1380
+ var closed = shapeData.c;
1381
+ var pathV = shapeData.v;
1382
+ var pathO = shapeData.o;
1383
+ var pathI = shapeData.i;
1384
+ var i, len = shapeData._length;
1385
+ var lengths = segmentsLength.lengths;
1386
+ var totalLength = 0;
1387
+ for (i = 0; i < len - 1; i += 1) {
1388
+ lengths[i] = getBezierLength(pathV[i], pathV[i + 1], pathO[i], pathI[i + 1]);
1389
+ totalLength += lengths[i].addedLength;
1390
+ }
1391
+ if (closed && len) {
1392
+ lengths[i] = getBezierLength(pathV[i], pathV[0], pathO[i], pathI[0]);
1393
+ totalLength += lengths[i].addedLength;
1394
+ }
1395
+ segmentsLength.totalLength = totalLength;
1396
+ return segmentsLength;
1397
+ }
1398
+
1399
+ function BezierData(length) {
1400
+ this.segmentLength = 0;
1401
+ this.points = new Array(length);
1402
+ }
1403
+
1404
+ function PointData(partial, point) {
1405
+ this.partialLength = partial;
1406
+ this.point = point;
1407
+ }
1408
+
1409
+ var buildBezierData = (function () {
1410
+
1411
+ var storedData = {};
1412
+
1413
+ return function (pt1, pt2, pt3, pt4) {
1414
+ var bezierName = (pt1[0] + '_' + pt1[1] + '_' + pt2[0] + '_' + pt2[1] + '_' + pt3[0] + '_' + pt3[1] + '_' + pt4[0] + '_' + pt4[1]).replace(/\./g, 'p');
1415
+ if (!storedData[bezierName]) {
1416
+ var curveSegments = defaultCurveSegments;
1417
+ var k, i, len;
1418
+ var ptCoord, perc, addedLength = 0;
1419
+ var ptDistance;
1420
+ var point, lastPoint = null;
1421
+ 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])) {
1422
+ curveSegments = 2;
1423
+ }
1424
+ var bezierData = new BezierData(curveSegments);
1425
+ len = pt3.length;
1426
+ for (k = 0; k < curveSegments; k += 1) {
1427
+ point = createSizedArray(len);
1428
+ perc = k / (curveSegments - 1);
1429
+ ptDistance = 0;
1430
+ for (i = 0; i < len; i += 1) {
1431
+ ptCoord = bm_pow(1 - perc, 3) * pt1[i] + 3 * bm_pow(1 - perc, 2) * perc * (pt1[i] + pt3[i]) + 3 * (1 - perc) * bm_pow(perc, 2) * (pt2[i] + pt4[i]) + bm_pow(perc, 3) * pt2[i];
1432
+ point[i] = ptCoord;
1433
+ if (lastPoint !== null) {
1434
+ ptDistance += bm_pow(point[i] - lastPoint[i], 2);
1435
+ }
1436
+ }
1437
+ ptDistance = bm_sqrt(ptDistance);
1438
+ addedLength += ptDistance;
1439
+ bezierData.points[k] = new PointData(ptDistance, point);
1440
+ lastPoint = point;
1441
+ }
1442
+ bezierData.segmentLength = addedLength;
1443
+ storedData[bezierName] = bezierData;
1444
+ }
1445
+ return storedData[bezierName];
1446
+ };
1447
+ }());
1448
+
1449
+ function getDistancePerc(perc, bezierData) {
1450
+ var percents = bezierData.percents;
1451
+ var lengths = bezierData.lengths;
1452
+ var len = percents.length;
1453
+ var initPos = bm_floor((len - 1) * perc);
1454
+ var lengthPos = perc * bezierData.addedLength;
1455
+ var lPerc = 0;
1456
+ if (initPos === len - 1 || initPos === 0 || lengthPos === lengths[initPos]) {
1457
+ return percents[initPos];
1458
+ } else {
1459
+ var dir = lengths[initPos] > lengthPos ? -1 : 1;
1460
+ var flag = true;
1461
+ while (flag) {
1462
+ if (lengths[initPos] <= lengthPos && lengths[initPos + 1] > lengthPos) {
1463
+ lPerc = (lengthPos - lengths[initPos]) / (lengths[initPos + 1] - lengths[initPos]);
1464
+ flag = false;
1465
+ } else {
1466
+ initPos += dir;
1467
+ }
1468
+ if (initPos < 0 || initPos >= len - 1) {
1469
+ //FIX for TypedArrays that don't store floating point values with enough accuracy
1470
+ if (initPos === len - 1) {
1471
+ return percents[initPos];
1472
+ }
1473
+ flag = false;
1474
+ }
1475
+ }
1476
+ return percents[initPos] + (percents[initPos + 1] - percents[initPos]) * lPerc;
1477
+ }
1478
+ }
1479
+
1480
+ function getPointInSegment(pt1, pt2, pt3, pt4, percent, bezierData) {
1481
+ var t1 = getDistancePerc(percent, bezierData);
1482
+ var u0 = 1;
1483
+ var u1 = 1 - t1;
1484
+ 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;
1485
+ 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;
1486
+ return [ptX, ptY];
1487
+ }
1488
+
1489
+ function getSegmentArray() {
1490
+
1491
+ }
1492
+
1493
+ var bezier_segment_points = createTypedArray('float32', 8);
1494
+
1495
+ function getNewSegment(pt1, pt2, pt3, pt4, startPerc, endPerc, bezierData) {
1496
+
1497
+ startPerc = startPerc < 0 ? 0 : startPerc > 1 ? 1 : startPerc;
1498
+ var t0 = getDistancePerc(startPerc, bezierData);
1499
+ endPerc = endPerc > 1 ? 1 : endPerc;
1500
+ var t1 = getDistancePerc(endPerc, bezierData);
1501
+ var i, len = pt1.length;
1502
+ var u0 = 1 - t0;
1503
+ var u1 = 1 - t1;
1504
+ var u0u0u0 = u0 * u0 * u0;
1505
+ var t0u0u0_3 = t0 * u0 * u0 * 3;
1506
+ var t0t0u0_3 = t0 * t0 * u0 * 3;
1507
+ var t0t0t0 = t0 * t0 * t0;
1508
+ //
1509
+ var u0u0u1 = u0 * u0 * u1;
1510
+ var t0u0u1_3 = t0 * u0 * u1 + u0 * t0 * u1 + u0 * u0 * t1;
1511
+ var t0t0u1_3 = t0 * t0 * u1 + u0 * t0 * t1 + t0 * u0 * t1;
1512
+ var t0t0t1 = t0 * t0 * t1;
1513
+ //
1514
+ var u0u1u1 = u0 * u1 * u1;
1515
+ var t0u1u1_3 = t0 * u1 * u1 + u0 * t1 * u1 + u0 * u1 * t1;
1516
+ var t0t1u1_3 = t0 * t1 * u1 + u0 * t1 * t1 + t0 * u1 * t1;
1517
+ var t0t1t1 = t0 * t1 * t1;
1518
+ //
1519
+ var u1u1u1 = u1 * u1 * u1;
1520
+ var t1u1u1_3 = t1 * u1 * u1 + u1 * t1 * u1 + u1 * u1 * t1;
1521
+ var t1t1u1_3 = t1 * t1 * u1 + u1 * t1 * t1 + t1 * u1 * t1;
1522
+ var t1t1t1 = t1 * t1 * t1;
1523
+ for (i = 0; i < len; i += 1) {
1524
+ bezier_segment_points[i * 4] = Math.round((u0u0u0 * pt1[i] + t0u0u0_3 * pt3[i] + t0t0u0_3 * pt4[i] + t0t0t0 * pt2[i]) * 1000) / 1000;
1525
+ bezier_segment_points[i * 4 + 1] = Math.round((u0u0u1 * pt1[i] + t0u0u1_3 * pt3[i] + t0t0u1_3 * pt4[i] + t0t0t1 * pt2[i]) * 1000) / 1000;
1526
+ bezier_segment_points[i * 4 + 2] = Math.round((u0u1u1 * pt1[i] + t0u1u1_3 * pt3[i] + t0t1u1_3 * pt4[i] + t0t1t1 * pt2[i]) * 1000) / 1000;
1527
+ bezier_segment_points[i * 4 + 3] = Math.round((u1u1u1 * pt1[i] + t1u1u1_3 * pt3[i] + t1t1u1_3 * pt4[i] + t1t1t1 * pt2[i]) * 1000) / 1000;
1528
+ }
1529
+
1530
+ return bezier_segment_points;
1531
+ }
1532
+
1533
+ return {
1534
+ getSegmentsLength: getSegmentsLength,
1535
+ getNewSegment: getNewSegment,
1536
+ getPointInSegment: getPointInSegment,
1537
+ buildBezierData: buildBezierData,
1538
+ pointOnLine2D: pointOnLine2D,
1539
+ pointOnLine3D: pointOnLine3D
1540
+ };
1541
+ }
1542
+
1543
+ var bez = bezFunction();
1544
+
1545
+ function dataFunctionManager() {
1546
+
1547
+ //var tCanvasHelper = createTag('canvas').getContext('2d');
1548
+
1549
+ function completeLayers(layers, comps, fontManager) {
1550
+ var layerData;
1551
+ var animArray, lastFrame;
1552
+ var i, len = layers.length;
1553
+ var j, jLen, k, kLen;
1554
+ for (i = 0; i < len; i += 1) {
1555
+ layerData = layers[i];
1556
+ if (!('ks' in layerData) || layerData.completed) {
1557
+ continue;
1558
+ }
1559
+ layerData.completed = true;
1560
+ if (layerData.tt) {
1561
+ layers[i - 1].td = layerData.tt;
1562
+ }
1563
+ animArray = [];
1564
+ lastFrame = -1;
1565
+ if (layerData.hasMask) {
1566
+ var maskProps = layerData.masksProperties;
1567
+ jLen = maskProps.length;
1568
+ for (j = 0; j < jLen; j += 1) {
1569
+ if (maskProps[j].pt.k.i) {
1570
+ convertPathsToAbsoluteValues(maskProps[j].pt.k);
1571
+ } else {
1572
+ kLen = maskProps[j].pt.k.length;
1573
+ for (k = 0; k < kLen; k += 1) {
1574
+ if (maskProps[j].pt.k[k].s) {
1575
+ convertPathsToAbsoluteValues(maskProps[j].pt.k[k].s[0]);
1576
+ }
1577
+ if (maskProps[j].pt.k[k].e) {
1578
+ convertPathsToAbsoluteValues(maskProps[j].pt.k[k].e[0]);
1579
+ }
1580
+ }
1581
+ }
1582
+ }
1583
+ }
1584
+ if (layerData.ty === 0) {
1585
+ layerData.layers = findCompLayers(layerData.refId, comps);
1586
+ completeLayers(layerData.layers, comps, fontManager);
1587
+ } else if (layerData.ty === 4) {
1588
+ completeShapes(layerData.shapes);
1589
+ } else if (layerData.ty == 5) {
1590
+ completeText(layerData, fontManager);
1591
+ }
1592
+ }
1593
+ }
1594
+
1595
+ function findCompLayers(id, comps) {
1596
+ var i = 0,
1597
+ len = comps.length;
1598
+ while (i < len) {
1599
+ if (comps[i].id === id) {
1600
+ if (!comps[i].layers.__used) {
1601
+ comps[i].layers.__used = true;
1602
+ return comps[i].layers;
1603
+ }
1604
+ return JSON.parse(JSON.stringify(comps[i].layers));
1605
+ }
1606
+ i += 1;
1607
+ }
1608
+ }
1609
+
1610
+ function completeShapes(arr) {
1611
+ var i, len = arr.length;
1612
+ var j, jLen;
1613
+ var hasPaths = false;
1614
+ for (i = len - 1; i >= 0; i -= 1) {
1615
+ if (arr[i].ty == 'sh') {
1616
+ if (arr[i].ks.k.i) {
1617
+ convertPathsToAbsoluteValues(arr[i].ks.k);
1618
+ } else {
1619
+ jLen = arr[i].ks.k.length;
1620
+ for (j = 0; j < jLen; j += 1) {
1621
+ if (arr[i].ks.k[j].s) {
1622
+ convertPathsToAbsoluteValues(arr[i].ks.k[j].s[0]);
1623
+ }
1624
+ if (arr[i].ks.k[j].e) {
1625
+ convertPathsToAbsoluteValues(arr[i].ks.k[j].e[0]);
1626
+ }
1627
+ }
1628
+ }
1629
+ hasPaths = true;
1630
+ } else if (arr[i].ty == 'gr') {
1631
+ completeShapes(arr[i].it);
1632
+ }
1633
+ }
1634
+ /*if(hasPaths){
1635
+ //mx: distance
1636
+ //ss: sensitivity
1637
+ //dc: decay
1638
+ arr.splice(arr.length-1,0,{
1639
+ "ty": "ms",
1640
+ "mx":20,
1641
+ "ss":10,
1642
+ "dc":0.001,
1643
+ "maxDist":200
1644
+ });
1645
+ }*/
1646
+ }
1647
+
1648
+ function convertPathsToAbsoluteValues(path) {
1649
+ var i, len = path.i.length;
1650
+ for (i = 0; i < len; i += 1) {
1651
+ path.i[i][0] += path.v[i][0];
1652
+ path.i[i][1] += path.v[i][1];
1653
+ path.o[i][0] += path.v[i][0];
1654
+ path.o[i][1] += path.v[i][1];
1655
+ }
1656
+ }
1657
+
1658
+ function checkVersion(minimum, animVersionString) {
1659
+ var animVersion = animVersionString ? animVersionString.split('.') : [100, 100, 100];
1660
+ if (minimum[0] > animVersion[0]) {
1661
+ return true;
1662
+ } else if (animVersion[0] > minimum[0]) {
1663
+ return false;
1664
+ }
1665
+ if (minimum[1] > animVersion[1]) {
1666
+ return true;
1667
+ } else if (animVersion[1] > minimum[1]) {
1668
+ return false;
1669
+ }
1670
+ if (minimum[2] > animVersion[2]) {
1671
+ return true;
1672
+ } else if (animVersion[2] > minimum[2]) {
1673
+ return false;
1674
+ }
1675
+ }
1676
+
1677
+ var checkText = (function () {
1678
+ var minimumVersion = [4, 4, 14];
1679
+
1680
+ function updateTextLayer(textLayer) {
1681
+ var documentData = textLayer.t.d;
1682
+ textLayer.t.d = {
1683
+ k: [{
1684
+ s: documentData,
1685
+ t: 0
1686
+ }]
1687
+ };
1688
+ }
1689
+
1690
+ function iterateLayers(layers) {
1691
+ var i, len = layers.length;
1692
+ for (i = 0; i < len; i += 1) {
1693
+ if (layers[i].ty === 5) {
1694
+ updateTextLayer(layers[i]);
1695
+ }
1696
+ }
1697
+ }
1698
+
1699
+ return function (animationData) {
1700
+ if (checkVersion(minimumVersion, animationData.v)) {
1701
+ iterateLayers(animationData.layers);
1702
+ if (animationData.assets) {
1703
+ var i, len = animationData.assets.length;
1704
+ for (i = 0; i < len; i += 1) {
1705
+ if (animationData.assets[i].layers) {
1706
+ iterateLayers(animationData.assets[i].layers);
1707
+
1708
+ }
1709
+ }
1710
+ }
1711
+ }
1712
+ };
1713
+ }());
1714
+
1715
+ var checkChars = (function () {
1716
+ var minimumVersion = [4, 7, 99];
1717
+ return function (animationData) {
1718
+ if (animationData.chars && !checkVersion(minimumVersion, animationData.v)) {
1719
+ var i, len = animationData.chars.length,
1720
+ j, jLen, k, kLen;
1721
+ var pathData, paths;
1722
+ for (i = 0; i < len; i += 1) {
1723
+ if (animationData.chars[i].data && animationData.chars[i].data.shapes) {
1724
+ paths = animationData.chars[i].data.shapes[0].it;
1725
+ jLen = paths.length;
1726
+
1727
+ for (j = 0; j < jLen; j += 1) {
1728
+ pathData = paths[j].ks.k;
1729
+ if (!pathData.__converted) {
1730
+ convertPathsToAbsoluteValues(paths[j].ks.k);
1731
+ pathData.__converted = true;
1732
+ }
1733
+ }
1734
+ }
1735
+ }
1736
+ }
1737
+ };
1738
+ }());
1739
+
1740
+ var checkColors = (function () {
1741
+ var minimumVersion = [4, 1, 9];
1742
+
1743
+ function iterateShapes(shapes) {
1744
+ var i, len = shapes.length;
1745
+ var j, jLen;
1746
+ for (i = 0; i < len; i += 1) {
1747
+ if (shapes[i].ty === 'gr') {
1748
+ iterateShapes(shapes[i].it);
1749
+ } else if (shapes[i].ty === 'fl' || shapes[i].ty === 'st') {
1750
+ if (shapes[i].c.k && shapes[i].c.k[0].i) {
1751
+ jLen = shapes[i].c.k.length;
1752
+ for (j = 0; j < jLen; j += 1) {
1753
+ if (shapes[i].c.k[j].s) {
1754
+ shapes[i].c.k[j].s[0] /= 255;
1755
+ shapes[i].c.k[j].s[1] /= 255;
1756
+ shapes[i].c.k[j].s[2] /= 255;
1757
+ shapes[i].c.k[j].s[3] /= 255;
1758
+ }
1759
+ if (shapes[i].c.k[j].e) {
1760
+ shapes[i].c.k[j].e[0] /= 255;
1761
+ shapes[i].c.k[j].e[1] /= 255;
1762
+ shapes[i].c.k[j].e[2] /= 255;
1763
+ shapes[i].c.k[j].e[3] /= 255;
1764
+ }
1765
+ }
1766
+ } else {
1767
+ shapes[i].c.k[0] /= 255;
1768
+ shapes[i].c.k[1] /= 255;
1769
+ shapes[i].c.k[2] /= 255;
1770
+ shapes[i].c.k[3] /= 255;
1771
+ }
1772
+ }
1773
+ }
1774
+ }
1775
+
1776
+ function iterateLayers(layers) {
1777
+ var i, len = layers.length;
1778
+ for (i = 0; i < len; i += 1) {
1779
+ if (layers[i].ty === 4) {
1780
+ iterateShapes(layers[i].shapes);
1781
+ }
1782
+ }
1783
+ }
1784
+
1785
+ return function (animationData) {
1786
+ if (checkVersion(minimumVersion, animationData.v)) {
1787
+ iterateLayers(animationData.layers);
1788
+ if (animationData.assets) {
1789
+ var i, len = animationData.assets.length;
1790
+ for (i = 0; i < len; i += 1) {
1791
+ if (animationData.assets[i].layers) {
1792
+ iterateLayers(animationData.assets[i].layers);
1793
+
1794
+ }
1795
+ }
1796
+ }
1797
+ }
1798
+ };
1799
+ }());
1800
+
1801
+ var checkShapes = (function () {
1802
+ var minimumVersion = [4, 4, 18];
1803
+
1804
+
1805
+
1806
+ function completeShapes(arr) {
1807
+ var i, len = arr.length;
1808
+ var j, jLen;
1809
+ var hasPaths = false;
1810
+ for (i = len - 1; i >= 0; i -= 1) {
1811
+ if (arr[i].ty == 'sh') {
1812
+ if (arr[i].ks.k.i) {
1813
+ arr[i].ks.k.c = arr[i].closed;
1814
+ } else {
1815
+ jLen = arr[i].ks.k.length;
1816
+ for (j = 0; j < jLen; j += 1) {
1817
+ if (arr[i].ks.k[j].s) {
1818
+ arr[i].ks.k[j].s[0].c = arr[i].closed;
1819
+ }
1820
+ if (arr[i].ks.k[j].e) {
1821
+ arr[i].ks.k[j].e[0].c = arr[i].closed;
1822
+ }
1823
+ }
1824
+ }
1825
+ hasPaths = true;
1826
+ } else if (arr[i].ty == 'gr') {
1827
+ completeShapes(arr[i].it);
1828
+ }
1829
+ }
1830
+ }
1831
+
1832
+ function iterateLayers(layers) {
1833
+ var layerData;
1834
+ var i, len = layers.length;
1835
+ var j, jLen, k, kLen;
1836
+ for (i = 0; i < len; i += 1) {
1837
+ layerData = layers[i];
1838
+ if (layerData.hasMask) {
1839
+ var maskProps = layerData.masksProperties;
1840
+ jLen = maskProps.length;
1841
+ for (j = 0; j < jLen; j += 1) {
1842
+ if (maskProps[j].pt.k.i) {
1843
+ maskProps[j].pt.k.c = maskProps[j].cl;
1844
+ } else {
1845
+ kLen = maskProps[j].pt.k.length;
1846
+ for (k = 0; k < kLen; k += 1) {
1847
+ if (maskProps[j].pt.k[k].s) {
1848
+ maskProps[j].pt.k[k].s[0].c = maskProps[j].cl;
1849
+ }
1850
+ if (maskProps[j].pt.k[k].e) {
1851
+ maskProps[j].pt.k[k].e[0].c = maskProps[j].cl;
1852
+ }
1853
+ }
1854
+ }
1855
+ }
1856
+ }
1857
+ if (layerData.ty === 4) {
1858
+ completeShapes(layerData.shapes);
1859
+ }
1860
+ }
1861
+ }
1862
+
1863
+ return function (animationData) {
1864
+ if (checkVersion(minimumVersion, animationData.v)) {
1865
+ iterateLayers(animationData.layers);
1866
+ if (animationData.assets) {
1867
+ var i, len = animationData.assets.length;
1868
+ for (i = 0; i < len; i += 1) {
1869
+ if (animationData.assets[i].layers) {
1870
+ iterateLayers(animationData.assets[i].layers);
1871
+
1872
+ }
1873
+ }
1874
+ }
1875
+ }
1876
+ };
1877
+ }());
1878
+
1879
+ function completeData(animationData, fontManager) {
1880
+ if (animationData.__complete) {
1881
+ return;
1882
+ }
1883
+ checkColors(animationData);
1884
+ checkText(animationData);
1885
+ checkChars(animationData);
1886
+ checkShapes(animationData);
1887
+ completeLayers(animationData.layers, animationData.assets, fontManager);
1888
+ animationData.__complete = true;
1889
+ //blitAnimation(animationData, animationData.assets, fontManager);
1890
+ }
1891
+
1892
+ function completeText(data, fontManager) {
1893
+ if (data.t.a.length === 0 && !('m' in data.t.p)) {
1894
+ data.singleShape = true;
1895
+ }
1896
+ }
1897
+
1898
+ var moduleOb = {};
1899
+ moduleOb.completeData = completeData;
1900
+ moduleOb.checkColors = checkColors;
1901
+ moduleOb.checkChars = checkChars;
1902
+ moduleOb.checkShapes = checkShapes;
1903
+ moduleOb.completeLayers = completeLayers;
1904
+
1905
+ return moduleOb;
1906
+ }
1907
+
1908
+ var dataManager = dataFunctionManager();
1909
+
1910
+ var FontManager = (function () {
1911
+
1912
+ var maxWaitingTime = 5000;
1913
+ var emptyChar = {
1914
+ w: 0,
1915
+ size: 0,
1916
+ shapes: []
1917
+ };
1918
+ var combinedCharacters = [];
1919
+ //Hindi characters
1920
+ 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]);
1921
+
1922
+ function setUpNode(font, family) {
1923
+ var parentNode = createTag('span');
1924
+ parentNode.style.fontFamily = family;
1925
+ var node = createTag('span');
1926
+ // Characters that vary significantly among different fonts
1927
+ node.innerHTML = 'giItT1WQy@!-/#';
1928
+ // Visible - so we can measure it - but not on the screen
1929
+ parentNode.style.position = 'absolute';
1930
+ parentNode.style.left = '-10000px';
1931
+ parentNode.style.top = '-10000px';
1932
+ // Large font size makes even subtle changes obvious
1933
+ parentNode.style.fontSize = '300px';
1934
+ // Reset any font properties
1935
+ parentNode.style.fontVariant = 'normal';
1936
+ parentNode.style.fontStyle = 'normal';
1937
+ parentNode.style.fontWeight = 'normal';
1938
+ parentNode.style.letterSpacing = '0';
1939
+ parentNode.appendChild(node);
1940
+ document.body.appendChild(parentNode);
1941
+
1942
+ // Remember width with no applied web font
1943
+ var width = node.offsetWidth;
1944
+ node.style.fontFamily = font + ', ' + family;
1945
+ return {
1946
+ node: node,
1947
+ w: width,
1948
+ parent: parentNode
1949
+ };
1950
+ }
1951
+
1952
+ function checkLoadedFonts() {
1953
+ var i, len = this.fonts.length;
1954
+ var node, w;
1955
+ var loadedCount = len;
1956
+ for (i = 0; i < len; i += 1) {
1957
+ if (this.fonts[i].loaded) {
1958
+ loadedCount -= 1;
1959
+ continue;
1960
+ }
1961
+ if (this.fonts[i].fOrigin === 'n' || this.fonts[i].origin === 0) {
1962
+ this.fonts[i].loaded = true;
1963
+ } else {
1964
+ node = this.fonts[i].monoCase.node;
1965
+ w = this.fonts[i].monoCase.w;
1966
+ if (node.offsetWidth !== w) {
1967
+ loadedCount -= 1;
1968
+ this.fonts[i].loaded = true;
1969
+ } else {
1970
+ node = this.fonts[i].sansCase.node;
1971
+ w = this.fonts[i].sansCase.w;
1972
+ if (node.offsetWidth !== w) {
1973
+ loadedCount -= 1;
1974
+ this.fonts[i].loaded = true;
1975
+ }
1976
+ }
1977
+ if (this.fonts[i].loaded) {
1978
+ this.fonts[i].sansCase.parent.parentNode.removeChild(this.fonts[i].sansCase.parent);
1979
+ this.fonts[i].monoCase.parent.parentNode.removeChild(this.fonts[i].monoCase.parent);
1980
+ }
1981
+ }
1982
+ }
1983
+
1984
+ if (loadedCount !== 0 && Date.now() - this.initTime < maxWaitingTime) {
1985
+ setTimeout(this.checkLoadedFonts.bind(this), 20);
1986
+ } else {
1987
+ setTimeout(function () {
1988
+ this.isLoaded = true;
1989
+ }.bind(this), 0);
1990
+
1991
+ }
1992
+ }
1993
+
1994
+ function createHelper(def, fontData) {
1995
+ var tHelper = createNS('text');
1996
+ tHelper.style.fontSize = '100px';
1997
+ //tHelper.style.fontFamily = fontData.fFamily;
1998
+ tHelper.setAttribute('font-family', fontData.fFamily);
1999
+ tHelper.setAttribute('font-style', fontData.fStyle);
2000
+ tHelper.setAttribute('font-weight', fontData.fWeight);
2001
+ tHelper.textContent = '1';
2002
+ if (fontData.fClass) {
2003
+ tHelper.style.fontFamily = 'inherit';
2004
+ tHelper.setAttribute('class', fontData.fClass);
2005
+ } else {
2006
+ tHelper.style.fontFamily = fontData.fFamily;
2007
+ }
2008
+ def.appendChild(tHelper);
2009
+ var tCanvasHelper = createTag('canvas').getContext('2d');
2010
+ tCanvasHelper.font = fontData.fWeight + ' ' + fontData.fStyle + ' 100px ' + fontData.fFamily;
2011
+ //tCanvasHelper.font = ' 100px '+ fontData.fFamily;
2012
+ return tHelper;
2013
+ }
2014
+
2015
+ function addFonts(fontData, defs) {
2016
+ if (!fontData) {
2017
+ this.isLoaded = true;
2018
+ return;
2019
+ }
2020
+ if (this.chars) {
2021
+ this.isLoaded = true;
2022
+ this.fonts = fontData.list;
2023
+ return;
2024
+ }
2025
+
2026
+
2027
+ var fontArr = fontData.list;
2028
+ var i, len = fontArr.length;
2029
+ var _pendingFonts = len;
2030
+ for (i = 0; i < len; i += 1) {
2031
+ var shouldLoadFont = true;
2032
+ var loadedSelector;
2033
+ var j;
2034
+ fontArr[i].loaded = false;
2035
+ fontArr[i].monoCase = setUpNode(fontArr[i].fFamily, 'monospace');
2036
+ fontArr[i].sansCase = setUpNode(fontArr[i].fFamily, 'sans-serif');
2037
+ if (!fontArr[i].fPath) {
2038
+ fontArr[i].loaded = true;
2039
+ _pendingFonts -= 1;
2040
+ } else if (fontArr[i].fOrigin === 'p' || fontArr[i].origin === 3) {
2041
+ loadedSelector = document.querySelectorAll('style[f-forigin="p"][f-family="' + fontArr[i].fFamily + '"], style[f-origin="3"][f-family="' + fontArr[i].fFamily + '"]');
2042
+
2043
+ if (loadedSelector.length > 0) {
2044
+ shouldLoadFont = false;
2045
+ }
2046
+
2047
+ if (shouldLoadFont) {
2048
+ var s = createTag('style');
2049
+ s.setAttribute('f-forigin', fontArr[i].fOrigin);
2050
+ s.setAttribute('f-origin', fontArr[i].origin);
2051
+ s.setAttribute('f-family', fontArr[i].fFamily);
2052
+ s.type = "text/css";
2053
+ s.innerHTML = "@font-face {" + "font-family: " + fontArr[i].fFamily + "; font-style: normal; src: url('" + fontArr[i].fPath + "');}";
2054
+ defs.appendChild(s);
2055
+ }
2056
+ } else if (fontArr[i].fOrigin === 'g' || fontArr[i].origin === 1) {
2057
+ loadedSelector = document.querySelectorAll('link[f-forigin="g"], link[f-origin="1"]');
2058
+
2059
+ for (j = 0; j < loadedSelector.length; j++) {
2060
+ if (loadedSelector[j].href.indexOf(fontArr[i].fPath) !== -1) {
2061
+ // Font is already loaded
2062
+ shouldLoadFont = false;
2063
+ }
2064
+ }
2065
+
2066
+ if (shouldLoadFont) {
2067
+ var l = createTag('link');
2068
+ l.setAttribute('f-forigin', fontArr[i].fOrigin);
2069
+ l.setAttribute('f-origin', fontArr[i].origin);
2070
+ l.type = "text/css";
2071
+ l.rel = "stylesheet";
2072
+ l.href = fontArr[i].fPath;
2073
+ document.body.appendChild(l);
2074
+ }
2075
+ } else if (fontArr[i].fOrigin === 't' || fontArr[i].origin === 2) {
2076
+ loadedSelector = document.querySelectorAll('script[f-forigin="t"], script[f-origin="2"]');
2077
+
2078
+ for (j = 0; j < loadedSelector.length; j++) {
2079
+ if (fontArr[i].fPath === loadedSelector[j].src) {
2080
+ // Font is already loaded
2081
+ shouldLoadFont = false;
2082
+ }
2083
+ }
2084
+
2085
+ if (shouldLoadFont) {
2086
+ var sc = createTag('link');
2087
+ sc.setAttribute('f-forigin', fontArr[i].fOrigin);
2088
+ sc.setAttribute('f-origin', fontArr[i].origin);
2089
+ sc.setAttribute('rel', 'stylesheet');
2090
+ sc.setAttribute('href', fontArr[i].fPath);
2091
+ defs.appendChild(sc);
2092
+ }
2093
+ }
2094
+ fontArr[i].helper = createHelper(defs, fontArr[i]);
2095
+ fontArr[i].cache = {};
2096
+ this.fonts.push(fontArr[i]);
2097
+ }
2098
+ if (_pendingFonts === 0) {
2099
+ this.isLoaded = true;
2100
+ } else {
2101
+ //On some cases even if the font is loaded, it won't load correctly when measuring text on canvas.
2102
+ //Adding this timeout seems to fix it
2103
+ setTimeout(this.checkLoadedFonts.bind(this), 100);
2104
+ }
2105
+ }
2106
+
2107
+ function addChars(chars) {
2108
+ if (!chars) {
2109
+ return;
2110
+ }
2111
+ if (!this.chars) {
2112
+ this.chars = [];
2113
+ }
2114
+ var i, len = chars.length;
2115
+ var j, jLen = this.chars.length,
2116
+ found;
2117
+ for (i = 0; i < len; i += 1) {
2118
+ j = 0;
2119
+ found = false;
2120
+ while (j < jLen) {
2121
+ if (this.chars[j].style === chars[i].style && this.chars[j].fFamily === chars[i].fFamily && this.chars[j].ch === chars[i].ch) {
2122
+ found = true;
2123
+ }
2124
+ j += 1;
2125
+ }
2126
+ if (!found) {
2127
+ this.chars.push(chars[i]);
2128
+ jLen += 1;
2129
+ }
2130
+ }
2131
+ }
2132
+
2133
+ function getCharData(char, style, font) {
2134
+ var i = 0,
2135
+ len = this.chars.length;
2136
+ while (i < len) {
2137
+ if (this.chars[i].ch === char && this.chars[i].style === style && this.chars[i].fFamily === font) {
2138
+
2139
+ return this.chars[i];
2140
+ }
2141
+ i += 1;
2142
+ }
2143
+ if ((typeof char === 'string' && char.charCodeAt(0) !== 13 || !char) && console && console.warn) {
2144
+ // console.warn('Missing character from exported characters list: ', char, style, font);
2145
+ }
2146
+ return emptyChar;
2147
+ }
2148
+
2149
+ function measureText(char, fontName, size) {
2150
+ var fontData = this.getFontByName(fontName);
2151
+ var index = char.charCodeAt(0);
2152
+ if (!fontData.cache[index + 1]) {
2153
+ var tHelper = fontData.helper;
2154
+ //Canvas version
2155
+ //fontData.cache[index] = tHelper.measureText(char).width / 100;
2156
+ //SVG version
2157
+ //console.log(tHelper.getBBox().width)
2158
+ if (char === ' ') {
2159
+ tHelper.textContent = '|' + char + '|';
2160
+ var doubleSize = tHelper.getComputedTextLength();
2161
+ tHelper.textContent = '||';
2162
+ var singleSize = tHelper.getComputedTextLength();
2163
+ fontData.cache[index + 1] = (doubleSize - singleSize) / 100;
2164
+ } else {
2165
+ tHelper.textContent = char;
2166
+ fontData.cache[index + 1] = (tHelper.getComputedTextLength()) / 100;
2167
+ }
2168
+ }
2169
+ return fontData.cache[index + 1] * size;
2170
+ }
2171
+
2172
+ function getFontByName(name) {
2173
+ var i = 0,
2174
+ len = this.fonts.length;
2175
+ while (i < len) {
2176
+ if (this.fonts[i].fName === name) {
2177
+ return this.fonts[i];
2178
+ }
2179
+ i += 1;
2180
+ }
2181
+ return this.fonts[0];
2182
+ }
2183
+
2184
+ function getCombinedCharacterCodes() {
2185
+ return combinedCharacters;
2186
+ }
2187
+
2188
+ function loaded() {
2189
+ return this.isLoaded;
2190
+ }
2191
+
2192
+ var Font = function () {
2193
+ this.fonts = [];
2194
+ this.chars = null;
2195
+ this.typekitLoaded = 0;
2196
+ this.isLoaded = false;
2197
+ this.initTime = Date.now();
2198
+ };
2199
+ //TODO: for now I'm adding these methods to the Class and not the prototype. Think of a better way to implement it.
2200
+ Font.getCombinedCharacterCodes = getCombinedCharacterCodes;
2201
+
2202
+ Font.prototype.addChars = addChars;
2203
+ Font.prototype.addFonts = addFonts;
2204
+ Font.prototype.getCharData = getCharData;
2205
+ Font.prototype.getFontByName = getFontByName;
2206
+ Font.prototype.measureText = measureText;
2207
+ Font.prototype.checkLoadedFonts = checkLoadedFonts;
2208
+ Font.prototype.loaded = loaded;
2209
+
2210
+ return Font;
2211
+
2212
+ }());
2213
+ var PropertyFactory = (function () {
2214
+
2215
+ var initFrame = initialDefaultFrame;
2216
+ var math_abs = Math.abs;
2217
+
2218
+ function interpolateValue(frameNum, caching) {
2219
+ var offsetTime = this.offsetTime;
2220
+ var newValue;
2221
+ if (this.propType === 'multidimensional') {
2222
+ newValue = createTypedArray('float32', this.pv.length);
2223
+ }
2224
+ var iterationIndex = caching.lastIndex;
2225
+ var i = iterationIndex;
2226
+ var len = this.keyframes.length - 1,
2227
+ flag = true;
2228
+ var keyData, nextKeyData;
2229
+
2230
+ while (flag) {
2231
+ keyData = this.keyframes[i];
2232
+ nextKeyData = this.keyframes[i + 1];
2233
+ if (i === len - 1 && frameNum >= nextKeyData.t - offsetTime) {
2234
+ if (keyData.h) {
2235
+ keyData = nextKeyData;
2236
+ }
2237
+ iterationIndex = 0;
2238
+ break;
2239
+ }
2240
+ if ((nextKeyData.t - offsetTime) > frameNum) {
2241
+ iterationIndex = i;
2242
+ break;
2243
+ }
2244
+ if (i < len - 1) {
2245
+ i += 1;
2246
+ } else {
2247
+ iterationIndex = 0;
2248
+ flag = false;
2249
+ }
2250
+ }
2251
+
2252
+ var k, kLen, perc, jLen, j, fnc;
2253
+ var nextKeyTime = nextKeyData.t - offsetTime;
2254
+ var keyTime = keyData.t - offsetTime;
2255
+ var endValue;
2256
+ if (keyData.to) {
2257
+ if (!keyData.bezierData) {
2258
+ keyData.bezierData = bez.buildBezierData(keyData.s, nextKeyData.s || keyData.e, keyData.to, keyData.ti);
2259
+ }
2260
+ var bezierData = keyData.bezierData;
2261
+ if (frameNum >= nextKeyTime || frameNum < keyTime) {
2262
+ var ind = frameNum >= nextKeyTime ? bezierData.points.length - 1 : 0;
2263
+ kLen = bezierData.points[ind].point.length;
2264
+ for (k = 0; k < kLen; k += 1) {
2265
+ newValue[k] = bezierData.points[ind].point[k];
2266
+ }
2267
+ // caching._lastKeyframeIndex = -1;
2268
+ } else {
2269
+ if (keyData.__fnct) {
2270
+ fnc = keyData.__fnct;
2271
+ } else {
2272
+ fnc = BezierFactory.getBezierEasing(keyData.o.x, keyData.o.y, keyData.i.x, keyData.i.y, keyData.n).get;
2273
+ keyData.__fnct = fnc;
2274
+ }
2275
+ perc = fnc((frameNum - keyTime) / (nextKeyTime - keyTime));
2276
+ var distanceInLine = bezierData.segmentLength * perc;
2277
+
2278
+ var segmentPerc;
2279
+ var addedLength = (caching.lastFrame < frameNum && caching._lastKeyframeIndex === i) ? caching._lastAddedLength : 0;
2280
+ j = (caching.lastFrame < frameNum && caching._lastKeyframeIndex === i) ? caching._lastPoint : 0;
2281
+ flag = true;
2282
+ jLen = bezierData.points.length;
2283
+ while (flag) {
2284
+ addedLength += bezierData.points[j].partialLength;
2285
+ if (distanceInLine === 0 || perc === 0 || j === bezierData.points.length - 1) {
2286
+ kLen = bezierData.points[j].point.length;
2287
+ for (k = 0; k < kLen; k += 1) {
2288
+ newValue[k] = bezierData.points[j].point[k];
2289
+ }
2290
+ break;
2291
+ } else if (distanceInLine >= addedLength && distanceInLine < addedLength + bezierData.points[j + 1].partialLength) {
2292
+ segmentPerc = (distanceInLine - addedLength) / bezierData.points[j + 1].partialLength;
2293
+ kLen = bezierData.points[j].point.length;
2294
+ for (k = 0; k < kLen; k += 1) {
2295
+ newValue[k] = bezierData.points[j].point[k] + (bezierData.points[j + 1].point[k] - bezierData.points[j].point[k]) * segmentPerc;
2296
+ }
2297
+ break;
2298
+ }
2299
+ if (j < jLen - 1) {
2300
+ j += 1;
2301
+ } else {
2302
+ flag = false;
2303
+ }
2304
+ }
2305
+ caching._lastPoint = j;
2306
+ caching._lastAddedLength = addedLength - bezierData.points[j].partialLength;
2307
+ caching._lastKeyframeIndex = i;
2308
+ }
2309
+ } else {
2310
+ var outX, outY, inX, inY, keyValue;
2311
+ len = keyData.s.length;
2312
+ endValue = nextKeyData.s || keyData.e;
2313
+ if (this.sh && keyData.h !== 1) {
2314
+ if (frameNum >= nextKeyTime) {
2315
+ newValue[0] = endValue[0];
2316
+ newValue[1] = endValue[1];
2317
+ newValue[2] = endValue[2];
2318
+ } else if (frameNum <= keyTime) {
2319
+ newValue[0] = keyData.s[0];
2320
+ newValue[1] = keyData.s[1];
2321
+ newValue[2] = keyData.s[2];
2322
+ } else {
2323
+ var quatStart = createQuaternion(keyData.s);
2324
+ var quatEnd = createQuaternion(endValue);
2325
+ var time = (frameNum - keyTime) / (nextKeyTime - keyTime);
2326
+ quaternionToEuler(newValue, slerp(quatStart, quatEnd, time));
2327
+ }
2328
+
2329
+ } else {
2330
+ for (i = 0; i < len; i += 1) {
2331
+ if (keyData.h !== 1) {
2332
+ if (frameNum >= nextKeyTime) {
2333
+ perc = 1;
2334
+ } else if (frameNum < keyTime) {
2335
+ perc = 0;
2336
+ } else {
2337
+ if (keyData.o.x.constructor === Array) {
2338
+ if (!keyData.__fnct) {
2339
+ keyData.__fnct = [];
2340
+ }
2341
+ if (!keyData.__fnct[i]) {
2342
+ outX = (typeof keyData.o.x[i] === 'undefined') ? keyData.o.x[0] : keyData.o.x[i];
2343
+ outY = (typeof keyData.o.y[i] === 'undefined') ? keyData.o.y[0] : keyData.o.y[i];
2344
+ inX = (typeof keyData.i.x[i] === 'undefined') ? keyData.i.x[0] : keyData.i.x[i];
2345
+ inY = (typeof keyData.i.y[i] === 'undefined') ? keyData.i.y[0] : keyData.i.y[i];
2346
+ fnc = BezierFactory.getBezierEasing(outX, outY, inX, inY).get;
2347
+ keyData.__fnct[i] = fnc;
2348
+ } else {
2349
+ fnc = keyData.__fnct[i];
2350
+ }
2351
+ } else {
2352
+ if (!keyData.__fnct) {
2353
+ outX = keyData.o.x;
2354
+ outY = keyData.o.y;
2355
+ inX = keyData.i.x;
2356
+ inY = keyData.i.y;
2357
+ fnc = BezierFactory.getBezierEasing(outX, outY, inX, inY).get;
2358
+ keyData.__fnct = fnc;
2359
+ } else {
2360
+ fnc = keyData.__fnct;
2361
+ }
2362
+ }
2363
+ perc = fnc((frameNum - keyTime) / (nextKeyTime - keyTime));
2364
+ }
2365
+ }
2366
+
2367
+ endValue = nextKeyData.s || keyData.e;
2368
+ keyValue = keyData.h === 1 ? keyData.s[i] : keyData.s[i] + (endValue[i] - keyData.s[i]) * perc;
2369
+
2370
+ if (this.propType === 'multidimensional') {
2371
+ newValue[i] = keyValue;
2372
+ } else {
2373
+ newValue = keyValue;
2374
+ }
2375
+ }
2376
+ }
2377
+ }
2378
+ caching.lastIndex = iterationIndex;
2379
+ return newValue;
2380
+ }
2381
+
2382
+ //based on @Toji's https://github.com/toji/gl-matrix/
2383
+ function slerp(a, b, t) {
2384
+ var out = [];
2385
+ var ax = a[0],
2386
+ ay = a[1],
2387
+ az = a[2],
2388
+ aw = a[3],
2389
+ bx = b[0],
2390
+ by = b[1],
2391
+ bz = b[2],
2392
+ bw = b[3]
2393
+
2394
+ var omega, cosom, sinom, scale0, scale1;
2395
+
2396
+ cosom = ax * bx + ay * by + az * bz + aw * bw;
2397
+ if (cosom < 0.0) {
2398
+ cosom = -cosom;
2399
+ bx = -bx;
2400
+ by = -by;
2401
+ bz = -bz;
2402
+ bw = -bw;
2403
+ }
2404
+ if ((1.0 - cosom) > 0.000001) {
2405
+ omega = Math.acos(cosom);
2406
+ sinom = Math.sin(omega);
2407
+ scale0 = Math.sin((1.0 - t) * omega) / sinom;
2408
+ scale1 = Math.sin(t * omega) / sinom;
2409
+ } else {
2410
+ scale0 = 1.0 - t;
2411
+ scale1 = t;
2412
+ }
2413
+ out[0] = scale0 * ax + scale1 * bx;
2414
+ out[1] = scale0 * ay + scale1 * by;
2415
+ out[2] = scale0 * az + scale1 * bz;
2416
+ out[3] = scale0 * aw + scale1 * bw;
2417
+
2418
+ return out;
2419
+ }
2420
+
2421
+ function quaternionToEuler(out, quat) {
2422
+ var qx = quat[0];
2423
+ var qy = quat[1];
2424
+ var qz = quat[2];
2425
+ var qw = quat[3];
2426
+ var heading = Math.atan2(2 * qy * qw - 2 * qx * qz, 1 - 2 * qy * qy - 2 * qz * qz)
2427
+ var attitude = Math.asin(2 * qx * qy + 2 * qz * qw)
2428
+ var bank = Math.atan2(2 * qx * qw - 2 * qy * qz, 1 - 2 * qx * qx - 2 * qz * qz);
2429
+ out[0] = heading / degToRads;
2430
+ out[1] = attitude / degToRads;
2431
+ out[2] = bank / degToRads;
2432
+ }
2433
+
2434
+ function createQuaternion(values) {
2435
+ var heading = values[0] * degToRads;
2436
+ var attitude = values[1] * degToRads;
2437
+ var bank = values[2] * degToRads;
2438
+ var c1 = Math.cos(heading / 2);
2439
+ var c2 = Math.cos(attitude / 2);
2440
+ var c3 = Math.cos(bank / 2);
2441
+ var s1 = Math.sin(heading / 2);
2442
+ var s2 = Math.sin(attitude / 2);
2443
+ var s3 = Math.sin(bank / 2);
2444
+ var w = c1 * c2 * c3 - s1 * s2 * s3;
2445
+ var x = s1 * s2 * c3 + c1 * c2 * s3;
2446
+ var y = s1 * c2 * c3 + c1 * s2 * s3;
2447
+ var z = c1 * s2 * c3 - s1 * c2 * s3;
2448
+
2449
+ return [x, y, z, w];
2450
+ }
2451
+
2452
+ function getValueAtCurrentTime() {
2453
+ var frameNum = this.comp.renderedFrame - this.offsetTime;
2454
+ var initTime = this.keyframes[0].t - this.offsetTime;
2455
+ var endTime = this.keyframes[this.keyframes.length - 1].t - this.offsetTime;
2456
+ if (!(frameNum === this._caching.lastFrame || (this._caching.lastFrame !== initFrame && ((this._caching.lastFrame >= endTime && frameNum >= endTime) || (this._caching.lastFrame < initTime && frameNum < initTime))))) {
2457
+ if (this._caching.lastFrame >= frameNum) {
2458
+ this._caching._lastKeyframeIndex = -1;
2459
+ this._caching.lastIndex = 0;
2460
+ }
2461
+
2462
+ var renderResult = this.interpolateValue(frameNum, this._caching);
2463
+ this.pv = renderResult;
2464
+ }
2465
+ this._caching.lastFrame = frameNum;
2466
+ return this.pv;
2467
+ }
2468
+
2469
+ function setVValue(val) {
2470
+ var multipliedValue;
2471
+ if (this.propType === 'unidimensional') {
2472
+ multipliedValue = val * this.mult;
2473
+ if (math_abs(this.v - multipliedValue) > 0.00001) {
2474
+ this.v = multipliedValue;
2475
+ this._mdf = true;
2476
+ }
2477
+ } else {
2478
+ var i = 0,
2479
+ len = this.v.length;
2480
+ while (i < len) {
2481
+ multipliedValue = val[i] * this.mult;
2482
+ if (math_abs(this.v[i] - multipliedValue) > 0.00001) {
2483
+ this.v[i] = multipliedValue;
2484
+ this._mdf = true;
2485
+ }
2486
+ i += 1;
2487
+ }
2488
+ }
2489
+ }
2490
+
2491
+ function processEffectsSequence() {
2492
+ if (this.elem.globalData.frameId === this.frameId || !this.effectsSequence.length) {
2493
+ return;
2494
+ }
2495
+ if (this.lock) {
2496
+ this.setVValue(this.pv);
2497
+ return;
2498
+ }
2499
+ this.lock = true;
2500
+ this._mdf = this._isFirstFrame;
2501
+ var multipliedValue;
2502
+ var i, len = this.effectsSequence.length;
2503
+ var finalValue = this.kf ? this.pv : this.data.k;
2504
+ for (i = 0; i < len; i += 1) {
2505
+ finalValue = this.effectsSequence[i](finalValue);
2506
+ }
2507
+ this.setVValue(finalValue);
2508
+ this._isFirstFrame = false;
2509
+ this.lock = false;
2510
+ this.frameId = this.elem.globalData.frameId;
2511
+ }
2512
+
2513
+ function addEffect(effectFunction) {
2514
+ this.effectsSequence.push(effectFunction);
2515
+ this.container.addDynamicProperty(this);
2516
+ }
2517
+
2518
+ function ValueProperty(elem, data, mult, container) {
2519
+ this.propType = 'unidimensional';
2520
+ this.mult = mult || 1;
2521
+ this.data = data;
2522
+ this.v = mult ? data.k * mult : data.k;
2523
+ this.pv = data.k;
2524
+ this._mdf = false;
2525
+ this.elem = elem;
2526
+ this.container = container;
2527
+ this.comp = elem.comp;
2528
+ this.k = false;
2529
+ this.kf = false;
2530
+ this.vel = 0;
2531
+ this.effectsSequence = [];
2532
+ this._isFirstFrame = true;
2533
+ this.getValue = processEffectsSequence;
2534
+ this.setVValue = setVValue;
2535
+ this.addEffect = addEffect;
2536
+ }
2537
+
2538
+ function MultiDimensionalProperty(elem, data, mult, container) {
2539
+ this.propType = 'multidimensional';
2540
+ this.mult = mult || 1;
2541
+ this.data = data;
2542
+ this._mdf = false;
2543
+ this.elem = elem;
2544
+ this.container = container;
2545
+ this.comp = elem.comp;
2546
+ this.k = false;
2547
+ this.kf = false;
2548
+ this.frameId = -1;
2549
+ var i, len = data.k.length;
2550
+ this.v = createTypedArray('float32', len);
2551
+ this.pv = createTypedArray('float32', len);
2552
+ var arr = createTypedArray('float32', len);
2553
+ this.vel = createTypedArray('float32', len);
2554
+ for (i = 0; i < len; i += 1) {
2555
+ this.v[i] = data.k[i] * this.mult;
2556
+ this.pv[i] = data.k[i];
2557
+ }
2558
+ this._isFirstFrame = true;
2559
+ this.effectsSequence = [];
2560
+ this.getValue = processEffectsSequence;
2561
+ this.setVValue = setVValue;
2562
+ this.addEffect = addEffect;
2563
+ }
2564
+
2565
+ function KeyframedValueProperty(elem, data, mult, container) {
2566
+ this.propType = 'unidimensional';
2567
+ this.keyframes = data.k;
2568
+ this.offsetTime = elem.data.st;
2569
+ this.frameId = -1;
2570
+ this._caching = {
2571
+ lastFrame: initFrame,
2572
+ lastIndex: 0,
2573
+ value: 0,
2574
+ _lastKeyframeIndex: -1
2575
+ };
2576
+ this.k = true;
2577
+ this.kf = true;
2578
+ this.data = data;
2579
+ this.mult = mult || 1;
2580
+ this.elem = elem;
2581
+ this.container = container;
2582
+ this.comp = elem.comp;
2583
+ this.v = initFrame;
2584
+ this.pv = initFrame;
2585
+ this._isFirstFrame = true;
2586
+ this.getValue = processEffectsSequence;
2587
+ this.setVValue = setVValue;
2588
+ this.interpolateValue = interpolateValue;
2589
+ this.effectsSequence = [getValueAtCurrentTime.bind(this)];
2590
+ this.addEffect = addEffect;
2591
+ }
2592
+
2593
+ function KeyframedMultidimensionalProperty(elem, data, mult, container) {
2594
+ this.propType = 'multidimensional';
2595
+ var i, len = data.k.length;
2596
+ var s, e, to, ti;
2597
+ for (i = 0; i < len - 1; i += 1) {
2598
+ if (data.k[i].to && data.k[i].s && data.k[i + 1] && data.k[i + 1].s) {
2599
+ s = data.k[i].s;
2600
+ e = data.k[i + 1].s;
2601
+ to = data.k[i].to;
2602
+ ti = data.k[i].ti;
2603
+ 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]))) {
2604
+ data.k[i].to = null;
2605
+ data.k[i].ti = null;
2606
+ }
2607
+ if (s[0] === e[0] && s[1] === e[1] && to[0] === 0 && to[1] === 0 && ti[0] === 0 && ti[1] === 0) {
2608
+ if (s.length === 2 || (s[2] === e[2] && to[2] === 0 && ti[2] === 0)) {
2609
+ data.k[i].to = null;
2610
+ data.k[i].ti = null;
2611
+ }
2612
+ }
2613
+ }
2614
+ }
2615
+ this.effectsSequence = [getValueAtCurrentTime.bind(this)];
2616
+ this.keyframes = data.k;
2617
+ this.offsetTime = elem.data.st;
2618
+ this.k = true;
2619
+ this.kf = true;
2620
+ this._isFirstFrame = true;
2621
+ this.mult = mult || 1;
2622
+ this.elem = elem;
2623
+ this.container = container;
2624
+ this.comp = elem.comp;
2625
+ this.getValue = processEffectsSequence;
2626
+ this.setVValue = setVValue;
2627
+ this.interpolateValue = interpolateValue;
2628
+ this.frameId = -1;
2629
+ var arrLen = data.k[0].s.length;
2630
+ this.v = createTypedArray('float32', arrLen);
2631
+ this.pv = createTypedArray('float32', arrLen);
2632
+ for (i = 0; i < arrLen; i += 1) {
2633
+ this.v[i] = initFrame;
2634
+ this.pv[i] = initFrame;
2635
+ }
2636
+ this._caching = {
2637
+ lastFrame: initFrame,
2638
+ lastIndex: 0,
2639
+ value: createTypedArray('float32', arrLen)
2640
+ };
2641
+ this.addEffect = addEffect;
2642
+ }
2643
+
2644
+ function getProp(elem, data, type, mult, container) {
2645
+ var p;
2646
+ if (!data.k.length) {
2647
+ p = new ValueProperty(elem, data, mult, container);
2648
+ } else if (typeof (data.k[0]) === 'number') {
2649
+ p = new MultiDimensionalProperty(elem, data, mult, container);
2650
+ } else {
2651
+ switch (type) {
2652
+ case 0:
2653
+ p = new KeyframedValueProperty(elem, data, mult, container);
2654
+ break;
2655
+ case 1:
2656
+ p = new KeyframedMultidimensionalProperty(elem, data, mult, container);
2657
+ break;
2658
+ }
2659
+ }
2660
+ if (p.effectsSequence.length) {
2661
+ container.addDynamicProperty(p);
2662
+ }
2663
+ return p;
2664
+ }
2665
+
2666
+ var ob = {
2667
+ getProp: getProp
2668
+ };
2669
+ return ob;
2670
+ }());
2671
+ var TransformPropertyFactory = (function () {
2672
+
2673
+ var defaultVector = [0, 0]
2674
+
2675
+ function applyToMatrix(mat) {
2676
+ var _mdf = this._mdf;
2677
+ this.iterateDynamicProperties();
2678
+ this._mdf = this._mdf || _mdf;
2679
+ if (this.a) {
2680
+ mat.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]);
2681
+ }
2682
+ if (this.s) {
2683
+ mat.scale(this.s.v[0], this.s.v[1], this.s.v[2]);
2684
+ }
2685
+ if (this.sk) {
2686
+ mat.skewFromAxis(-this.sk.v, this.sa.v);
2687
+ }
2688
+ if (this.r) {
2689
+ mat.rotate(-this.r.v);
2690
+ } else {
2691
+ 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]);
2692
+ }
2693
+ if (this.data.p.s) {
2694
+ if (this.data.p.z) {
2695
+ mat.translate(this.px.v, this.py.v, -this.pz.v);
2696
+ } else {
2697
+ mat.translate(this.px.v, this.py.v, 0);
2698
+ }
2699
+ } else {
2700
+ mat.translate(this.p.v[0], this.p.v[1], -this.p.v[2]);
2701
+ }
2702
+ }
2703
+
2704
+ function processKeys(forceRender) {
2705
+ if (this.elem.globalData.frameId === this.frameId) {
2706
+ return;
2707
+ }
2708
+ if (this._isDirty) {
2709
+ this.precalculateMatrix();
2710
+ this._isDirty = false;
2711
+ }
2712
+
2713
+ this.iterateDynamicProperties();
2714
+
2715
+ if (this._mdf || forceRender) {
2716
+ this.v.cloneFromProps(this.pre.props);
2717
+ if (this.appliedTransformations < 1) {
2718
+ this.v.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]);
2719
+ }
2720
+ if (this.appliedTransformations < 2) {
2721
+ this.v.scale(this.s.v[0], this.s.v[1], this.s.v[2]);
2722
+ }
2723
+ if (this.sk && this.appliedTransformations < 3) {
2724
+ this.v.skewFromAxis(-this.sk.v, this.sa.v);
2725
+ }
2726
+ if (this.r && this.appliedTransformations < 4) {
2727
+ this.v.rotate(-this.r.v);
2728
+ } else if (!this.r && this.appliedTransformations < 4) {
2729
+ 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]);
2730
+ }
2731
+ if (this.autoOriented) {
2732
+ var v1, v2, frameRate = this.elem.globalData.frameRate;
2733
+ if (this.p && this.p.keyframes && this.p.getValueAtTime) {
2734
+ if (this.p._caching.lastFrame + this.p.offsetTime <= this.p.keyframes[0].t) {
2735
+ v1 = this.p.getValueAtTime((this.p.keyframes[0].t + 0.01) / frameRate, 0);
2736
+ v2 = this.p.getValueAtTime(this.p.keyframes[0].t / frameRate, 0);
2737
+ } else if (this.p._caching.lastFrame + this.p.offsetTime >= this.p.keyframes[this.p.keyframes.length - 1].t) {
2738
+ v1 = this.p.getValueAtTime((this.p.keyframes[this.p.keyframes.length - 1].t / frameRate), 0);
2739
+ v2 = this.p.getValueAtTime((this.p.keyframes[this.p.keyframes.length - 1].t - 0.05) / frameRate, 0);
2740
+ } else {
2741
+ v1 = this.p.pv;
2742
+ v2 = this.p.getValueAtTime((this.p._caching.lastFrame + this.p.offsetTime - 0.01) / frameRate, this.p.offsetTime);
2743
+ }
2744
+ } else if (this.px && this.px.keyframes && this.py.keyframes && this.px.getValueAtTime && this.py.getValueAtTime) {
2745
+ v1 = [];
2746
+ v2 = [];
2747
+ var px = this.px,
2748
+ py = this.py,
2749
+ frameRate;
2750
+ if (px._caching.lastFrame + px.offsetTime <= px.keyframes[0].t) {
2751
+ v1[0] = px.getValueAtTime((px.keyframes[0].t + 0.01) / frameRate, 0);
2752
+ v1[1] = py.getValueAtTime((py.keyframes[0].t + 0.01) / frameRate, 0);
2753
+ v2[0] = px.getValueAtTime((px.keyframes[0].t) / frameRate, 0);
2754
+ v2[1] = py.getValueAtTime((py.keyframes[0].t) / frameRate, 0);
2755
+ } else if (px._caching.lastFrame + px.offsetTime >= px.keyframes[px.keyframes.length - 1].t) {
2756
+ v1[0] = px.getValueAtTime((px.keyframes[px.keyframes.length - 1].t / frameRate), 0);
2757
+ v1[1] = py.getValueAtTime((py.keyframes[py.keyframes.length - 1].t / frameRate), 0);
2758
+ v2[0] = px.getValueAtTime((px.keyframes[px.keyframes.length - 1].t - 0.01) / frameRate, 0);
2759
+ v2[1] = py.getValueAtTime((py.keyframes[py.keyframes.length - 1].t - 0.01) / frameRate, 0);
2760
+ } else {
2761
+ v1 = [px.pv, py.pv];
2762
+ v2[0] = px.getValueAtTime((px._caching.lastFrame + px.offsetTime - 0.01) / frameRate, px.offsetTime);
2763
+ v2[1] = py.getValueAtTime((py._caching.lastFrame + py.offsetTime - 0.01) / frameRate, py.offsetTime);
2764
+ }
2765
+ } else {
2766
+ v1 = v2 = defaultVector
2767
+ }
2768
+ this.v.rotate(-Math.atan2(v1[1] - v2[1], v1[0] - v2[0]));
2769
+ }
2770
+ if (this.data.p && this.data.p.s) {
2771
+ if (this.data.p.z) {
2772
+ this.v.translate(this.px.v, this.py.v, -this.pz.v);
2773
+ } else {
2774
+ this.v.translate(this.px.v, this.py.v, 0);
2775
+ }
2776
+ } else {
2777
+ this.v.translate(this.p.v[0], this.p.v[1], -this.p.v[2]);
2778
+ }
2779
+ }
2780
+ this.frameId = this.elem.globalData.frameId;
2781
+ }
2782
+
2783
+ function precalculateMatrix() {
2784
+ if (!this.a.k) {
2785
+ this.pre.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]);
2786
+ this.appliedTransformations = 1;
2787
+ } else {
2788
+ return;
2789
+ }
2790
+ if (!this.s.effectsSequence.length) {
2791
+ this.pre.scale(this.s.v[0], this.s.v[1], this.s.v[2]);
2792
+ this.appliedTransformations = 2;
2793
+ } else {
2794
+ return;
2795
+ }
2796
+ if (this.sk) {
2797
+ if (!this.sk.effectsSequence.length && !this.sa.effectsSequence.length) {
2798
+ this.pre.skewFromAxis(-this.sk.v, this.sa.v);
2799
+ this.appliedTransformations = 3;
2800
+ } else {
2801
+ return;
2802
+ }
2803
+ }
2804
+ if (this.r) {
2805
+ if (!this.r.effectsSequence.length) {
2806
+ this.pre.rotate(-this.r.v);
2807
+ this.appliedTransformations = 4;
2808
+ } else {
2809
+ return;
2810
+ }
2811
+ } else if (!this.rz.effectsSequence.length && !this.ry.effectsSequence.length && !this.rx.effectsSequence.length && !this.or.effectsSequence.length) {
2812
+ 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]);
2813
+ this.appliedTransformations = 4;
2814
+ }
2815
+ }
2816
+
2817
+ function autoOrient() {
2818
+ //
2819
+ //var prevP = this.getValueAtTime();
2820
+ }
2821
+
2822
+ function addDynamicProperty(prop) {
2823
+ this._addDynamicProperty(prop);
2824
+ this.elem.addDynamicProperty(prop);
2825
+ this._isDirty = true;
2826
+ }
2827
+
2828
+ function TransformProperty(elem, data, container) {
2829
+ this.elem = elem;
2830
+ this.frameId = -1;
2831
+ this.propType = 'transform';
2832
+ this.data = data;
2833
+ this.v = new Matrix();
2834
+ //Precalculated matrix with non animated properties
2835
+ this.pre = new Matrix();
2836
+ this.appliedTransformations = 0;
2837
+ this.initDynamicPropertyContainer(container || elem);
2838
+ if (data.p && data.p.s) {
2839
+ this.px = PropertyFactory.getProp(elem, data.p.x, 0, 0, this);
2840
+ this.py = PropertyFactory.getProp(elem, data.p.y, 0, 0, this);
2841
+ if (data.p.z) {
2842
+ this.pz = PropertyFactory.getProp(elem, data.p.z, 0, 0, this);
2843
+ }
2844
+ } else {
2845
+ this.p = PropertyFactory.getProp(elem, data.p || {
2846
+ k: [0, 0, 0]
2847
+ }, 1, 0, this);
2848
+ }
2849
+ if (data.rx) {
2850
+ this.rx = PropertyFactory.getProp(elem, data.rx, 0, degToRads, this);
2851
+ this.ry = PropertyFactory.getProp(elem, data.ry, 0, degToRads, this);
2852
+ this.rz = PropertyFactory.getProp(elem, data.rz, 0, degToRads, this);
2853
+ if (data.or.k[0].ti) {
2854
+ var i, len = data.or.k.length;
2855
+ for (i = 0; i < len; i += 1) {
2856
+ data.or.k[i].to = data.or.k[i].ti = null;
2857
+ }
2858
+ }
2859
+ this.or = PropertyFactory.getProp(elem, data.or, 1, degToRads, this);
2860
+ //sh Indicates it needs to be capped between -180 and 180
2861
+ this.or.sh = true;
2862
+ } else {
2863
+ this.r = PropertyFactory.getProp(elem, data.r || {
2864
+ k: 0
2865
+ }, 0, degToRads, this);
2866
+ }
2867
+ if (data.sk) {
2868
+ this.sk = PropertyFactory.getProp(elem, data.sk, 0, degToRads, this);
2869
+ this.sa = PropertyFactory.getProp(elem, data.sa, 0, degToRads, this);
2870
+ }
2871
+ this.a = PropertyFactory.getProp(elem, data.a || {
2872
+ k: [0, 0, 0]
2873
+ }, 1, 0, this);
2874
+ this.s = PropertyFactory.getProp(elem, data.s || {
2875
+ k: [100, 100, 100]
2876
+ }, 1, 0.01, this);
2877
+ // 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.
2878
+ if (data.o) {
2879
+ this.o = PropertyFactory.getProp(elem, data.o, 0, 0.01, elem);
2880
+ } else {
2881
+ this.o = {
2882
+ _mdf: false,
2883
+ v: 1
2884
+ };
2885
+ }
2886
+ this._isDirty = true;
2887
+ if (!this.dynamicProperties.length) {
2888
+ this.getValue(true);
2889
+ }
2890
+ }
2891
+
2892
+ TransformProperty.prototype = {
2893
+ applyToMatrix: applyToMatrix,
2894
+ getValue: processKeys,
2895
+ precalculateMatrix: precalculateMatrix,
2896
+ autoOrient: autoOrient
2897
+ }
2898
+
2899
+ extendPrototype([DynamicPropertyContainer], TransformProperty);
2900
+ TransformProperty.prototype.addDynamicProperty = addDynamicProperty;
2901
+ TransformProperty.prototype._addDynamicProperty = DynamicPropertyContainer.prototype.addDynamicProperty;
2902
+
2903
+ function getTransformProperty(elem, data, container) {
2904
+ return new TransformProperty(elem, data, container);
2905
+ }
2906
+
2907
+ return {
2908
+ getTransformProperty: getTransformProperty
2909
+ };
2910
+
2911
+ }());
2912
+
2913
+ function ShapePath() {
2914
+ this.c = false;
2915
+ this._length = 0;
2916
+ this._maxLength = 8;
2917
+ this.v = createSizedArray(this._maxLength);
2918
+ this.o = createSizedArray(this._maxLength);
2919
+ this.i = createSizedArray(this._maxLength);
2920
+ }
2921
+
2922
+ ShapePath.prototype.setPathData = function (closed, len) {
2923
+ this.c = closed;
2924
+ this.setLength(len);
2925
+ var i = 0;
2926
+ while (i < len) {
2927
+ this.v[i] = point_pool.newElement();
2928
+ this.o[i] = point_pool.newElement();
2929
+ this.i[i] = point_pool.newElement();
2930
+ i += 1;
2931
+ }
2932
+ };
2933
+
2934
+ ShapePath.prototype.setLength = function (len) {
2935
+ while (this._maxLength < len) {
2936
+ this.doubleArrayLength();
2937
+ }
2938
+ this._length = len;
2939
+ };
2940
+
2941
+ ShapePath.prototype.doubleArrayLength = function () {
2942
+ this.v = this.v.concat(createSizedArray(this._maxLength));
2943
+ this.i = this.i.concat(createSizedArray(this._maxLength));
2944
+ this.o = this.o.concat(createSizedArray(this._maxLength));
2945
+ this._maxLength *= 2;
2946
+ };
2947
+
2948
+ ShapePath.prototype.setXYAt = function (x, y, type, pos, replace) {
2949
+ var arr;
2950
+ this._length = Math.max(this._length, pos + 1);
2951
+ if (this._length >= this._maxLength) {
2952
+ this.doubleArrayLength();
2953
+ }
2954
+ switch (type) {
2955
+ case 'v':
2956
+ arr = this.v;
2957
+ break;
2958
+ case 'i':
2959
+ arr = this.i;
2960
+ break;
2961
+ case 'o':
2962
+ arr = this.o;
2963
+ break;
2964
+ }
2965
+ if (!arr[pos] || (arr[pos] && !replace)) {
2966
+ arr[pos] = point_pool.newElement();
2967
+ }
2968
+ arr[pos][0] = x;
2969
+ arr[pos][1] = y;
2970
+ };
2971
+
2972
+ ShapePath.prototype.setTripleAt = function (vX, vY, oX, oY, iX, iY, pos, replace) {
2973
+ this.setXYAt(vX, vY, 'v', pos, replace);
2974
+ this.setXYAt(oX, oY, 'o', pos, replace);
2975
+ this.setXYAt(iX, iY, 'i', pos, replace);
2976
+ };
2977
+
2978
+ ShapePath.prototype.reverse = function () {
2979
+ var newPath = new ShapePath();
2980
+ newPath.setPathData(this.c, this._length);
2981
+ var vertices = this.v,
2982
+ outPoints = this.o,
2983
+ inPoints = this.i;
2984
+ var init = 0;
2985
+ if (this.c) {
2986
+ newPath.setTripleAt(vertices[0][0], vertices[0][1], inPoints[0][0], inPoints[0][1], outPoints[0][0], outPoints[0][1], 0, false);
2987
+ init = 1;
2988
+ }
2989
+ var cnt = this._length - 1;
2990
+ var len = this._length;
2991
+
2992
+ var i;
2993
+ for (i = init; i < len; i += 1) {
2994
+ newPath.setTripleAt(vertices[cnt][0], vertices[cnt][1], inPoints[cnt][0], inPoints[cnt][1], outPoints[cnt][0], outPoints[cnt][1], i, false);
2995
+ cnt -= 1;
2996
+ }
2997
+ return newPath;
2998
+ };
2999
+ var ShapePropertyFactory = (function () {
3000
+
3001
+ var initFrame = -999999;
3002
+
3003
+ function interpolateShape(frameNum, previousValue, caching) {
3004
+ var iterationIndex = caching.lastIndex;
3005
+ var keyPropS, keyPropE, isHold, j, k, jLen, kLen, perc, vertexValue;
3006
+ var kf = this.keyframes;
3007
+ if (frameNum < kf[0].t - this.offsetTime) {
3008
+ keyPropS = kf[0].s[0];
3009
+ isHold = true;
3010
+ iterationIndex = 0;
3011
+ } else if (frameNum >= kf[kf.length - 1].t - this.offsetTime) {
3012
+ keyPropS = kf[kf.length - 1].s ? kf[kf.length - 1].s[0] : kf[kf.length - 2].e[0];
3013
+ /*if(kf[kf.length - 1].s){
3014
+ keyPropS = kf[kf.length - 1].s[0];
3015
+ }else{
3016
+ keyPropS = kf[kf.length - 2].e[0];
3017
+ }*/
3018
+ isHold = true;
3019
+ } else {
3020
+ var i = iterationIndex;
3021
+ var len = kf.length - 1,
3022
+ flag = true,
3023
+ keyData, nextKeyData;
3024
+ while (flag) {
3025
+ keyData = kf[i];
3026
+ nextKeyData = kf[i + 1];
3027
+ if ((nextKeyData.t - this.offsetTime) > frameNum) {
3028
+ break;
3029
+ }
3030
+ if (i < len - 1) {
3031
+ i += 1;
3032
+ } else {
3033
+ flag = false;
3034
+ }
3035
+ }
3036
+ isHold = keyData.h === 1;
3037
+ iterationIndex = i;
3038
+ if (!isHold) {
3039
+ if (frameNum >= nextKeyData.t - this.offsetTime) {
3040
+ perc = 1;
3041
+ } else if (frameNum < keyData.t - this.offsetTime) {
3042
+ perc = 0;
3043
+ } else {
3044
+ var fnc;
3045
+ if (keyData.__fnct) {
3046
+ fnc = keyData.__fnct;
3047
+ } else {
3048
+ fnc = BezierFactory.getBezierEasing(keyData.o.x, keyData.o.y, keyData.i.x, keyData.i.y).get;
3049
+ keyData.__fnct = fnc;
3050
+ }
3051
+ perc = fnc((frameNum - (keyData.t - this.offsetTime)) / ((nextKeyData.t - this.offsetTime) - (keyData.t - this.offsetTime)));
3052
+ }
3053
+ keyPropE = nextKeyData.s ? nextKeyData.s[0] : keyData.e[0];
3054
+ }
3055
+ keyPropS = keyData.s[0];
3056
+ }
3057
+ jLen = previousValue._length;
3058
+ kLen = keyPropS.i[0].length;
3059
+ caching.lastIndex = iterationIndex;
3060
+
3061
+ for (j = 0; j < jLen; j += 1) {
3062
+ for (k = 0; k < kLen; k += 1) {
3063
+ vertexValue = isHold ? keyPropS.i[j][k] : keyPropS.i[j][k] + (keyPropE.i[j][k] - keyPropS.i[j][k]) * perc;
3064
+ previousValue.i[j][k] = vertexValue;
3065
+ vertexValue = isHold ? keyPropS.o[j][k] : keyPropS.o[j][k] + (keyPropE.o[j][k] - keyPropS.o[j][k]) * perc;
3066
+ previousValue.o[j][k] = vertexValue;
3067
+ vertexValue = isHold ? keyPropS.v[j][k] : keyPropS.v[j][k] + (keyPropE.v[j][k] - keyPropS.v[j][k]) * perc;
3068
+ previousValue.v[j][k] = vertexValue;
3069
+ }
3070
+ }
3071
+ }
3072
+
3073
+ function interpolateShapeCurrentTime() {
3074
+ var frameNum = this.comp.renderedFrame - this.offsetTime;
3075
+ var initTime = this.keyframes[0].t - this.offsetTime;
3076
+ var endTime = this.keyframes[this.keyframes.length - 1].t - this.offsetTime;
3077
+ var lastFrame = this._caching.lastFrame;
3078
+ if (!(lastFrame !== initFrame && ((lastFrame < initTime && frameNum < initTime) || (lastFrame > endTime && frameNum > endTime)))) {
3079
+ ////
3080
+ this._caching.lastIndex = lastFrame < frameNum ? this._caching.lastIndex : 0;
3081
+ this.interpolateShape(frameNum, this.pv, this._caching);
3082
+ ////
3083
+ }
3084
+ this._caching.lastFrame = frameNum;
3085
+ return this.pv;
3086
+ }
3087
+
3088
+ function resetShape() {
3089
+ this.paths = this.localShapeCollection;
3090
+ }
3091
+
3092
+ function shapesEqual(shape1, shape2) {
3093
+ if (shape1._length !== shape2._length || shape1.c !== shape2.c) {
3094
+ return false;
3095
+ }
3096
+ var i, len = shape1._length;
3097
+ for (i = 0; i < len; i += 1) {
3098
+ if (shape1.v[i][0] !== shape2.v[i][0] ||
3099
+ shape1.v[i][1] !== shape2.v[i][1] ||
3100
+ shape1.o[i][0] !== shape2.o[i][0] ||
3101
+ shape1.o[i][1] !== shape2.o[i][1] ||
3102
+ shape1.i[i][0] !== shape2.i[i][0] ||
3103
+ shape1.i[i][1] !== shape2.i[i][1]) {
3104
+ return false;
3105
+ }
3106
+ }
3107
+ return true;
3108
+ }
3109
+
3110
+ function setVValue(newPath) {
3111
+ if (!shapesEqual(this.v, newPath)) {
3112
+ this.v = shape_pool.clone(newPath);
3113
+ this.localShapeCollection.releaseShapes();
3114
+ this.localShapeCollection.addShape(this.v);
3115
+ this._mdf = true;
3116
+ this.paths = this.localShapeCollection;
3117
+ }
3118
+ }
3119
+
3120
+ function processEffectsSequence() {
3121
+ if (this.elem.globalData.frameId === this.frameId) {
3122
+ return;
3123
+ } else if (!this.effectsSequence.length) {
3124
+ this._mdf = false;
3125
+ return;
3126
+ }
3127
+ if (this.lock) {
3128
+ this.setVValue(this.pv);
3129
+ return;
3130
+ }
3131
+ this.lock = true;
3132
+ this._mdf = false;
3133
+ var finalValue = this.kf ? this.pv : this.data.ks ? this.data.ks.k : this.data.pt.k;
3134
+ var i, len = this.effectsSequence.length;
3135
+ for (i = 0; i < len; i += 1) {
3136
+ finalValue = this.effectsSequence[i](finalValue);
3137
+ }
3138
+ this.setVValue(finalValue);
3139
+ this.lock = false;
3140
+ this.frameId = this.elem.globalData.frameId;
3141
+ };
3142
+
3143
+ function ShapeProperty(elem, data, type) {
3144
+ this.propType = 'shape';
3145
+ this.comp = elem.comp;
3146
+ this.container = elem;
3147
+ this.elem = elem;
3148
+ this.data = data;
3149
+ this.k = false;
3150
+ this.kf = false;
3151
+ this._mdf = false;
3152
+ var pathData = type === 3 ? data.pt.k : data.ks.k;
3153
+ this.v = shape_pool.clone(pathData);
3154
+ this.pv = shape_pool.clone(this.v);
3155
+ this.localShapeCollection = shapeCollection_pool.newShapeCollection();
3156
+ this.paths = this.localShapeCollection;
3157
+ this.paths.addShape(this.v);
3158
+ this.reset = resetShape;
3159
+ this.effectsSequence = [];
3160
+ }
3161
+
3162
+ function addEffect(effectFunction) {
3163
+ this.effectsSequence.push(effectFunction);
3164
+ this.container.addDynamicProperty(this);
3165
+ }
3166
+
3167
+ ShapeProperty.prototype.interpolateShape = interpolateShape;
3168
+ ShapeProperty.prototype.getValue = processEffectsSequence;
3169
+ ShapeProperty.prototype.setVValue = setVValue;
3170
+ ShapeProperty.prototype.addEffect = addEffect;
3171
+
3172
+ function KeyframedShapeProperty(elem, data, type) {
3173
+ this.propType = 'shape';
3174
+ this.comp = elem.comp;
3175
+ this.elem = elem;
3176
+ this.container = elem;
3177
+ this.offsetTime = elem.data.st;
3178
+ this.keyframes = type === 3 ? data.pt.k : data.ks.k;
3179
+ this.k = true;
3180
+ this.kf = true;
3181
+ var i, len = this.keyframes[0].s[0].i.length;
3182
+ var jLen = this.keyframes[0].s[0].i[0].length;
3183
+ this.v = shape_pool.newElement();
3184
+ this.v.setPathData(this.keyframes[0].s[0].c, len);
3185
+ this.pv = shape_pool.clone(this.v);
3186
+ this.localShapeCollection = shapeCollection_pool.newShapeCollection();
3187
+ this.paths = this.localShapeCollection;
3188
+ this.paths.addShape(this.v);
3189
+ this.lastFrame = initFrame;
3190
+ this.reset = resetShape;
3191
+ this._caching = {
3192
+ lastFrame: initFrame,
3193
+ lastIndex: 0
3194
+ };
3195
+ this.effectsSequence = [interpolateShapeCurrentTime.bind(this)];
3196
+ }
3197
+ KeyframedShapeProperty.prototype.getValue = processEffectsSequence;
3198
+ KeyframedShapeProperty.prototype.interpolateShape = interpolateShape;
3199
+ KeyframedShapeProperty.prototype.setVValue = setVValue;
3200
+ KeyframedShapeProperty.prototype.addEffect = addEffect;
3201
+
3202
+ var EllShapeProperty = (function () {
3203
+
3204
+ var cPoint = roundCorner;
3205
+
3206
+ function EllShapeProperty(elem, data) {
3207
+ /*this.v = {
3208
+ v: createSizedArray(4),
3209
+ i: createSizedArray(4),
3210
+ o: createSizedArray(4),
3211
+ c: true
3212
+ };*/
3213
+ this.v = shape_pool.newElement();
3214
+ this.v.setPathData(true, 4);
3215
+ this.localShapeCollection = shapeCollection_pool.newShapeCollection();
3216
+ this.paths = this.localShapeCollection;
3217
+ this.localShapeCollection.addShape(this.v);
3218
+ this.d = data.d;
3219
+ this.elem = elem;
3220
+ this.comp = elem.comp;
3221
+ this.frameId = -1;
3222
+ this.initDynamicPropertyContainer(elem);
3223
+ this.p = PropertyFactory.getProp(elem, data.p, 1, 0, this);
3224
+ this.s = PropertyFactory.getProp(elem, data.s, 1, 0, this);
3225
+ if (this.dynamicProperties.length) {
3226
+ this.k = true;
3227
+ } else {
3228
+ this.k = false;
3229
+ this.convertEllToPath();
3230
+ }
3231
+ };
3232
+
3233
+ EllShapeProperty.prototype = {
3234
+ reset: resetShape,
3235
+ getValue: function () {
3236
+ if (this.elem.globalData.frameId === this.frameId) {
3237
+ return;
3238
+ }
3239
+ this.frameId = this.elem.globalData.frameId;
3240
+ this.iterateDynamicProperties();
3241
+
3242
+ if (this._mdf) {
3243
+ this.convertEllToPath();
3244
+ }
3245
+ },
3246
+ convertEllToPath: function () {
3247
+ var p0 = this.p.v[0],
3248
+ p1 = this.p.v[1],
3249
+ s0 = this.s.v[0] / 2,
3250
+ s1 = this.s.v[1] / 2;
3251
+ var _cw = this.d !== 3;
3252
+ var _v = this.v;
3253
+ _v.v[0][0] = p0;
3254
+ _v.v[0][1] = p1 - s1;
3255
+ _v.v[1][0] = _cw ? p0 + s0 : p0 - s0;
3256
+ _v.v[1][1] = p1;
3257
+ _v.v[2][0] = p0;
3258
+ _v.v[2][1] = p1 + s1;
3259
+ _v.v[3][0] = _cw ? p0 - s0 : p0 + s0;
3260
+ _v.v[3][1] = p1;
3261
+ _v.i[0][0] = _cw ? p0 - s0 * cPoint : p0 + s0 * cPoint;
3262
+ _v.i[0][1] = p1 - s1;
3263
+ _v.i[1][0] = _cw ? p0 + s0 : p0 - s0;
3264
+ _v.i[1][1] = p1 - s1 * cPoint;
3265
+ _v.i[2][0] = _cw ? p0 + s0 * cPoint : p0 - s0 * cPoint;
3266
+ _v.i[2][1] = p1 + s1;
3267
+ _v.i[3][0] = _cw ? p0 - s0 : p0 + s0;
3268
+ _v.i[3][1] = p1 + s1 * cPoint;
3269
+ _v.o[0][0] = _cw ? p0 + s0 * cPoint : p0 - s0 * cPoint;
3270
+ _v.o[0][1] = p1 - s1;
3271
+ _v.o[1][0] = _cw ? p0 + s0 : p0 - s0;
3272
+ _v.o[1][1] = p1 + s1 * cPoint;
3273
+ _v.o[2][0] = _cw ? p0 - s0 * cPoint : p0 + s0 * cPoint;
3274
+ _v.o[2][1] = p1 + s1;
3275
+ _v.o[3][0] = _cw ? p0 - s0 : p0 + s0;
3276
+ _v.o[3][1] = p1 - s1 * cPoint;
3277
+ }
3278
+ }
3279
+
3280
+ extendPrototype([DynamicPropertyContainer], EllShapeProperty);
3281
+
3282
+ return EllShapeProperty;
3283
+ }());
3284
+
3285
+ var StarShapeProperty = (function () {
3286
+
3287
+ function StarShapeProperty(elem, data) {
3288
+ this.v = shape_pool.newElement();
3289
+ this.v.setPathData(true, 0);
3290
+ this.elem = elem;
3291
+ this.comp = elem.comp;
3292
+ this.data = data;
3293
+ this.frameId = -1;
3294
+ this.d = data.d;
3295
+ this.initDynamicPropertyContainer(elem);
3296
+ if (data.sy === 1) {
3297
+ this.ir = PropertyFactory.getProp(elem, data.ir, 0, 0, this);
3298
+ this.is = PropertyFactory.getProp(elem, data.is, 0, 0.01, this);
3299
+ this.convertToPath = this.convertStarToPath;
3300
+ } else {
3301
+ this.convertToPath = this.convertPolygonToPath;
3302
+ }
3303
+ this.pt = PropertyFactory.getProp(elem, data.pt, 0, 0, this);
3304
+ this.p = PropertyFactory.getProp(elem, data.p, 1, 0, this);
3305
+ this.r = PropertyFactory.getProp(elem, data.r, 0, degToRads, this);
3306
+ this.or = PropertyFactory.getProp(elem, data.or, 0, 0, this);
3307
+ this.os = PropertyFactory.getProp(elem, data.os, 0, 0.01, this);
3308
+ this.localShapeCollection = shapeCollection_pool.newShapeCollection();
3309
+ this.localShapeCollection.addShape(this.v);
3310
+ this.paths = this.localShapeCollection;
3311
+ if (this.dynamicProperties.length) {
3312
+ this.k = true;
3313
+ } else {
3314
+ this.k = false;
3315
+ this.convertToPath();
3316
+ }
3317
+ };
3318
+
3319
+ StarShapeProperty.prototype = {
3320
+ reset: resetShape,
3321
+ getValue: function () {
3322
+ if (this.elem.globalData.frameId === this.frameId) {
3323
+ return;
3324
+ }
3325
+ this.frameId = this.elem.globalData.frameId;
3326
+ this.iterateDynamicProperties();
3327
+ if (this._mdf) {
3328
+ this.convertToPath();
3329
+ }
3330
+ },
3331
+ convertStarToPath: function () {
3332
+ var numPts = Math.floor(this.pt.v) * 2;
3333
+ var angle = Math.PI * 2 / numPts;
3334
+ /*this.v.v.length = numPts;
3335
+ this.v.i.length = numPts;
3336
+ this.v.o.length = numPts;*/
3337
+ var longFlag = true;
3338
+ var longRad = this.or.v;
3339
+ var shortRad = this.ir.v;
3340
+ var longRound = this.os.v;
3341
+ var shortRound = this.is.v;
3342
+ var longPerimSegment = 2 * Math.PI * longRad / (numPts * 2);
3343
+ var shortPerimSegment = 2 * Math.PI * shortRad / (numPts * 2);
3344
+ var i, rad, roundness, perimSegment, currentAng = -Math.PI / 2;
3345
+ currentAng += this.r.v;
3346
+ var dir = this.data.d === 3 ? -1 : 1;
3347
+ this.v._length = 0;
3348
+ for (i = 0; i < numPts; i += 1) {
3349
+ rad = longFlag ? longRad : shortRad;
3350
+ roundness = longFlag ? longRound : shortRound;
3351
+ perimSegment = longFlag ? longPerimSegment : shortPerimSegment;
3352
+ var x = rad * Math.cos(currentAng);
3353
+ var y = rad * Math.sin(currentAng);
3354
+ var ox = x === 0 && y === 0 ? 0 : y / Math.sqrt(x * x + y * y);
3355
+ var oy = x === 0 && y === 0 ? 0 : -x / Math.sqrt(x * x + y * y);
3356
+ x += +this.p.v[0];
3357
+ y += +this.p.v[1];
3358
+ 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);
3359
+
3360
+ /*this.v.v[i] = [x,y];
3361
+ this.v.i[i] = [x+ox*perimSegment*roundness*dir,y+oy*perimSegment*roundness*dir];
3362
+ this.v.o[i] = [x-ox*perimSegment*roundness*dir,y-oy*perimSegment*roundness*dir];
3363
+ this.v._length = numPts;*/
3364
+ longFlag = !longFlag;
3365
+ currentAng += angle * dir;
3366
+ }
3367
+ },
3368
+ convertPolygonToPath: function () {
3369
+ var numPts = Math.floor(this.pt.v);
3370
+ var angle = Math.PI * 2 / numPts;
3371
+ var rad = this.or.v;
3372
+ var roundness = this.os.v;
3373
+ var perimSegment = 2 * Math.PI * rad / (numPts * 4);
3374
+ var i, currentAng = -Math.PI / 2;
3375
+ var dir = this.data.d === 3 ? -1 : 1;
3376
+ currentAng += this.r.v;
3377
+ this.v._length = 0;
3378
+ for (i = 0; i < numPts; i += 1) {
3379
+ var x = rad * Math.cos(currentAng);
3380
+ var y = rad * Math.sin(currentAng);
3381
+ var ox = x === 0 && y === 0 ? 0 : y / Math.sqrt(x * x + y * y);
3382
+ var oy = x === 0 && y === 0 ? 0 : -x / Math.sqrt(x * x + y * y);
3383
+ x += +this.p.v[0];
3384
+ y += +this.p.v[1];
3385
+ 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);
3386
+ currentAng += angle * dir;
3387
+ }
3388
+ this.paths.length = 0;
3389
+ this.paths[0] = this.v;
3390
+ }
3391
+
3392
+ }
3393
+ extendPrototype([DynamicPropertyContainer], StarShapeProperty);
3394
+
3395
+ return StarShapeProperty;
3396
+ }());
3397
+
3398
+ var RectShapeProperty = (function () {
3399
+
3400
+ function RectShapeProperty(elem, data) {
3401
+ this.v = shape_pool.newElement();
3402
+ this.v.c = true;
3403
+ this.localShapeCollection = shapeCollection_pool.newShapeCollection();
3404
+ this.localShapeCollection.addShape(this.v);
3405
+ this.paths = this.localShapeCollection;
3406
+ this.elem = elem;
3407
+ this.comp = elem.comp;
3408
+ this.frameId = -1;
3409
+ this.d = data.d;
3410
+ this.initDynamicPropertyContainer(elem);
3411
+ this.p = PropertyFactory.getProp(elem, data.p, 1, 0, this);
3412
+ this.s = PropertyFactory.getProp(elem, data.s, 1, 0, this);
3413
+ this.r = PropertyFactory.getProp(elem, data.r, 0, 0, this);
3414
+ if (this.dynamicProperties.length) {
3415
+ this.k = true;
3416
+ } else {
3417
+ this.k = false;
3418
+ this.convertRectToPath();
3419
+ }
3420
+ };
3421
+
3422
+ RectShapeProperty.prototype = {
3423
+ convertRectToPath: function () {
3424
+ var p0 = this.p.v[0],
3425
+ p1 = this.p.v[1],
3426
+ v0 = this.s.v[0] / 2,
3427
+ v1 = this.s.v[1] / 2;
3428
+ var round = bm_min(v0, v1, this.r.v);
3429
+ var cPoint = round * (1 - roundCorner);
3430
+ this.v._length = 0;
3431
+
3432
+ if (this.d === 2 || this.d === 1) {
3433
+ this.v.setTripleAt(p0 + v0, p1 - v1 + round, p0 + v0, p1 - v1 + round, p0 + v0, p1 - v1 + cPoint, 0, true);
3434
+ this.v.setTripleAt(p0 + v0, p1 + v1 - round, p0 + v0, p1 + v1 - cPoint, p0 + v0, p1 + v1 - round, 1, true);
3435
+ if (round !== 0) {
3436
+ this.v.setTripleAt(p0 + v0 - round, p1 + v1, p0 + v0 - round, p1 + v1, p0 + v0 - cPoint, p1 + v1, 2, true);
3437
+ this.v.setTripleAt(p0 - v0 + round, p1 + v1, p0 - v0 + cPoint, p1 + v1, p0 - v0 + round, p1 + v1, 3, true);
3438
+ this.v.setTripleAt(p0 - v0, p1 + v1 - round, p0 - v0, p1 + v1 - round, p0 - v0, p1 + v1 - cPoint, 4, true);
3439
+ this.v.setTripleAt(p0 - v0, p1 - v1 + round, p0 - v0, p1 - v1 + cPoint, p0 - v0, p1 - v1 + round, 5, true);
3440
+ this.v.setTripleAt(p0 - v0 + round, p1 - v1, p0 - v0 + round, p1 - v1, p0 - v0 + cPoint, p1 - v1, 6, true);
3441
+ this.v.setTripleAt(p0 + v0 - round, p1 - v1, p0 + v0 - cPoint, p1 - v1, p0 + v0 - round, p1 - v1, 7, true);
3442
+ } else {
3443
+ this.v.setTripleAt(p0 - v0, p1 + v1, p0 - v0 + cPoint, p1 + v1, p0 - v0, p1 + v1, 2);
3444
+ this.v.setTripleAt(p0 - v0, p1 - v1, p0 - v0, p1 - v1 + cPoint, p0 - v0, p1 - v1, 3);
3445
+ }
3446
+ } else {
3447
+ this.v.setTripleAt(p0 + v0, p1 - v1 + round, p0 + v0, p1 - v1 + cPoint, p0 + v0, p1 - v1 + round, 0, true);
3448
+ if (round !== 0) {
3449
+ this.v.setTripleAt(p0 + v0 - round, p1 - v1, p0 + v0 - round, p1 - v1, p0 + v0 - cPoint, p1 - v1, 1, true);
3450
+ this.v.setTripleAt(p0 - v0 + round, p1 - v1, p0 - v0 + cPoint, p1 - v1, p0 - v0 + round, p1 - v1, 2, true);
3451
+ this.v.setTripleAt(p0 - v0, p1 - v1 + round, p0 - v0, p1 - v1 + round, p0 - v0, p1 - v1 + cPoint, 3, true);
3452
+ this.v.setTripleAt(p0 - v0, p1 + v1 - round, p0 - v0, p1 + v1 - cPoint, p0 - v0, p1 + v1 - round, 4, true);
3453
+ this.v.setTripleAt(p0 - v0 + round, p1 + v1, p0 - v0 + round, p1 + v1, p0 - v0 + cPoint, p1 + v1, 5, true);
3454
+ this.v.setTripleAt(p0 + v0 - round, p1 + v1, p0 + v0 - cPoint, p1 + v1, p0 + v0 - round, p1 + v1, 6, true);
3455
+ this.v.setTripleAt(p0 + v0, p1 + v1 - round, p0 + v0, p1 + v1 - round, p0 + v0, p1 + v1 - cPoint, 7, true);
3456
+ } else {
3457
+ this.v.setTripleAt(p0 - v0, p1 - v1, p0 - v0 + cPoint, p1 - v1, p0 - v0, p1 - v1, 1, true);
3458
+ this.v.setTripleAt(p0 - v0, p1 + v1, p0 - v0, p1 + v1 - cPoint, p0 - v0, p1 + v1, 2, true);
3459
+ this.v.setTripleAt(p0 + v0, p1 + v1, p0 + v0 - cPoint, p1 + v1, p0 + v0, p1 + v1, 3, true);
3460
+
3461
+ }
3462
+ }
3463
+ },
3464
+ getValue: function (frameNum) {
3465
+ if (this.elem.globalData.frameId === this.frameId) {
3466
+ return;
3467
+ }
3468
+ this.frameId = this.elem.globalData.frameId;
3469
+ this.iterateDynamicProperties();
3470
+ if (this._mdf) {
3471
+ this.convertRectToPath();
3472
+ }
3473
+
3474
+ },
3475
+ reset: resetShape
3476
+ }
3477
+ extendPrototype([DynamicPropertyContainer], RectShapeProperty);
3478
+
3479
+ return RectShapeProperty;
3480
+ }());
3481
+
3482
+ function getShapeProp(elem, data, type) {
3483
+ var prop;
3484
+ if (type === 3 || type === 4) {
3485
+ var dataProp = type === 3 ? data.pt : data.ks;
3486
+ var keys = dataProp.k;
3487
+ if (keys.length) {
3488
+ prop = new KeyframedShapeProperty(elem, data, type);
3489
+ } else {
3490
+ prop = new ShapeProperty(elem, data, type);
3491
+ }
3492
+ } else if (type === 5) {
3493
+ prop = new RectShapeProperty(elem, data);
3494
+ } else if (type === 6) {
3495
+ prop = new EllShapeProperty(elem, data);
3496
+ } else if (type === 7) {
3497
+ prop = new StarShapeProperty(elem, data);
3498
+ }
3499
+ if (prop.k) {
3500
+ elem.addDynamicProperty(prop);
3501
+ }
3502
+ return prop;
3503
+ }
3504
+
3505
+ function getConstructorFunction() {
3506
+ return ShapeProperty;
3507
+ }
3508
+
3509
+ function getKeyframedConstructorFunction() {
3510
+ return KeyframedShapeProperty;
3511
+ }
3512
+
3513
+ var ob = {};
3514
+ ob.getShapeProp = getShapeProp;
3515
+ ob.getConstructorFunction = getConstructorFunction;
3516
+ ob.getKeyframedConstructorFunction = getKeyframedConstructorFunction;
3517
+ return ob;
3518
+ }());
3519
+ var ShapeModifiers = (function () {
3520
+ var ob = {};
3521
+ var modifiers = {};
3522
+ ob.registerModifier = registerModifier;
3523
+ ob.getModifier = getModifier;
3524
+
3525
+ function registerModifier(nm, factory) {
3526
+ if (!modifiers[nm]) {
3527
+ modifiers[nm] = factory;
3528
+ }
3529
+ }
3530
+
3531
+ function getModifier(nm, elem, data) {
3532
+ return new modifiers[nm](elem, data);
3533
+ }
3534
+
3535
+ return ob;
3536
+ }());
3537
+
3538
+ function ShapeModifier() { }
3539
+ ShapeModifier.prototype.initModifierProperties = function () { };
3540
+ ShapeModifier.prototype.addShapeToModifier = function () { };
3541
+ ShapeModifier.prototype.addShape = function (data) {
3542
+ if (!this.closed) {
3543
+ // 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.
3544
+ data.sh.container.addDynamicProperty(data.sh);
3545
+ var shapeData = {
3546
+ shape: data.sh,
3547
+ data: data,
3548
+ localShapeCollection: shapeCollection_pool.newShapeCollection()
3549
+ };
3550
+ this.shapes.push(shapeData);
3551
+ this.addShapeToModifier(shapeData);
3552
+ if (this._isAnimated) {
3553
+ data.setAsAnimated();
3554
+ }
3555
+ }
3556
+ };
3557
+ ShapeModifier.prototype.init = function (elem, data) {
3558
+ this.shapes = [];
3559
+ this.elem = elem;
3560
+ this.initDynamicPropertyContainer(elem);
3561
+ this.initModifierProperties(elem, data);
3562
+ this.frameId = initialDefaultFrame;
3563
+ this.closed = false;
3564
+ this.k = false;
3565
+ if (this.dynamicProperties.length) {
3566
+ this.k = true;
3567
+ } else {
3568
+ this.getValue(true);
3569
+ }
3570
+ };
3571
+ ShapeModifier.prototype.processKeys = function () {
3572
+ if (this.elem.globalData.frameId === this.frameId) {
3573
+ return;
3574
+ }
3575
+ this.frameId = this.elem.globalData.frameId;
3576
+ this.iterateDynamicProperties();
3577
+ };
3578
+
3579
+ extendPrototype([DynamicPropertyContainer], ShapeModifier);
3580
+
3581
+ function TrimModifier() { }
3582
+ extendPrototype([ShapeModifier], TrimModifier);
3583
+ TrimModifier.prototype.initModifierProperties = function (elem, data) {
3584
+ this.s = PropertyFactory.getProp(elem, data.s, 0, 0.01, this);
3585
+ this.e = PropertyFactory.getProp(elem, data.e, 0, 0.01, this);
3586
+ this.o = PropertyFactory.getProp(elem, data.o, 0, 0, this);
3587
+ this.sValue = 0;
3588
+ this.eValue = 0;
3589
+ this.getValue = this.processKeys;
3590
+ this.m = data.m;
3591
+ this._isAnimated = !!this.s.effectsSequence.length || !!this.e.effectsSequence.length || !!this.o.effectsSequence.length;
3592
+ };
3593
+
3594
+ TrimModifier.prototype.addShapeToModifier = function (shapeData) {
3595
+ shapeData.pathsData = [];
3596
+ };
3597
+
3598
+ TrimModifier.prototype.calculateShapeEdges = function (s, e, shapeLength, addedLength, totalModifierLength) {
3599
+ var segments = [];
3600
+ if (e <= 1) {
3601
+ segments.push({
3602
+ s: s,
3603
+ e: e
3604
+ });
3605
+ } else if (s >= 1) {
3606
+ segments.push({
3607
+ s: s - 1,
3608
+ e: e - 1
3609
+ });
3610
+ } else {
3611
+ segments.push({
3612
+ s: s,
3613
+ e: 1
3614
+ });
3615
+ segments.push({
3616
+ s: 0,
3617
+ e: e - 1
3618
+ });
3619
+ }
3620
+ var shapeSegments = [];
3621
+ var i, len = segments.length,
3622
+ segmentOb;
3623
+ for (i = 0; i < len; i += 1) {
3624
+ segmentOb = segments[i];
3625
+ if (segmentOb.e * totalModifierLength < addedLength || segmentOb.s * totalModifierLength > addedLength + shapeLength) {
3626
+
3627
+ } else {
3628
+ var shapeS, shapeE;
3629
+ if (segmentOb.s * totalModifierLength <= addedLength) {
3630
+ shapeS = 0;
3631
+ } else {
3632
+ shapeS = (segmentOb.s * totalModifierLength - addedLength) / shapeLength;
3633
+ }
3634
+ if (segmentOb.e * totalModifierLength >= addedLength + shapeLength) {
3635
+ shapeE = 1;
3636
+ } else {
3637
+ shapeE = ((segmentOb.e * totalModifierLength - addedLength) / shapeLength);
3638
+ }
3639
+ shapeSegments.push([shapeS, shapeE]);
3640
+ }
3641
+ }
3642
+ if (!shapeSegments.length) {
3643
+ shapeSegments.push([0, 0]);
3644
+ }
3645
+ return shapeSegments;
3646
+ };
3647
+
3648
+ TrimModifier.prototype.releasePathsData = function (pathsData) {
3649
+ var i, len = pathsData.length;
3650
+ for (i = 0; i < len; i += 1) {
3651
+ segments_length_pool.release(pathsData[i]);
3652
+ }
3653
+ pathsData.length = 0;
3654
+ return pathsData;
3655
+ };
3656
+
3657
+ TrimModifier.prototype.processShapes = function (_isFirstFrame) {
3658
+ var s, e;
3659
+ if (this._mdf || _isFirstFrame) {
3660
+ var o = (this.o.v % 360) / 360;
3661
+ if (o < 0) {
3662
+ o += 1;
3663
+ }
3664
+ s = (this.s.v > 1 ? 1 : this.s.v < 0 ? 0 : this.s.v) + o;
3665
+ e = (this.e.v > 1 ? 1 : this.e.v < 0 ? 0 : this.e.v) + o;
3666
+ if (s === e) {
3667
+
3668
+ }
3669
+ if (s > e) {
3670
+ var _s = s;
3671
+ s = e;
3672
+ e = _s;
3673
+ }
3674
+ s = Math.round(s * 10000) * 0.0001;
3675
+ e = Math.round(e * 10000) * 0.0001;
3676
+ this.sValue = s;
3677
+ this.eValue = e;
3678
+ } else {
3679
+ s = this.sValue;
3680
+ e = this.eValue;
3681
+ }
3682
+ var shapePaths;
3683
+ var i, len = this.shapes.length,
3684
+ j, jLen;
3685
+ var pathsData, pathData, totalShapeLength, totalModifierLength = 0;
3686
+
3687
+ if (e === s) {
3688
+ for (i = 0; i < len; i += 1) {
3689
+ this.shapes[i].localShapeCollection.releaseShapes();
3690
+ this.shapes[i].shape._mdf = true;
3691
+ this.shapes[i].shape.paths = this.shapes[i].localShapeCollection;
3692
+ }
3693
+ } else if (!((e === 1 && s === 0) || (e === 0 && s === 1))) {
3694
+ var segments = [],
3695
+ shapeData, localShapeCollection;
3696
+ for (i = 0; i < len; i += 1) {
3697
+ shapeData = this.shapes[i];
3698
+ // if shape hasn't changed and trim properties haven't changed, cached previous path can be used
3699
+ if (!shapeData.shape._mdf && !this._mdf && !_isFirstFrame && this.m !== 2) {
3700
+ shapeData.shape.paths = shapeData.localShapeCollection;
3701
+ } else {
3702
+ shapePaths = shapeData.shape.paths;
3703
+ jLen = shapePaths._length;
3704
+ totalShapeLength = 0;
3705
+ if (!shapeData.shape._mdf && shapeData.pathsData.length) {
3706
+ totalShapeLength = shapeData.totalShapeLength;
3707
+ } else {
3708
+ pathsData = this.releasePathsData(shapeData.pathsData);
3709
+ for (j = 0; j < jLen; j += 1) {
3710
+ pathData = bez.getSegmentsLength(shapePaths.shapes[j]);
3711
+ pathsData.push(pathData);
3712
+ totalShapeLength += pathData.totalLength;
3713
+ }
3714
+ shapeData.totalShapeLength = totalShapeLength;
3715
+ shapeData.pathsData = pathsData;
3716
+ }
3717
+
3718
+ totalModifierLength += totalShapeLength;
3719
+ shapeData.shape._mdf = true;
3720
+ }
3721
+ }
3722
+ var shapeS = s,
3723
+ shapeE = e,
3724
+ addedLength = 0,
3725
+ edges;
3726
+ for (i = len - 1; i >= 0; i -= 1) {
3727
+ shapeData = this.shapes[i];
3728
+ if (shapeData.shape._mdf) {
3729
+ localShapeCollection = shapeData.localShapeCollection;
3730
+ localShapeCollection.releaseShapes();
3731
+ //if m === 2 means paths are trimmed individually so edges need to be found for this specific shape relative to whoel group
3732
+ if (this.m === 2 && len > 1) {
3733
+ edges = this.calculateShapeEdges(s, e, shapeData.totalShapeLength, addedLength, totalModifierLength);
3734
+ addedLength += shapeData.totalShapeLength;
3735
+ } else {
3736
+ edges = [
3737
+ [shapeS, shapeE]
3738
+ ];
3739
+ }
3740
+ jLen = edges.length;
3741
+ for (j = 0; j < jLen; j += 1) {
3742
+ shapeS = edges[j][0];
3743
+ shapeE = edges[j][1];
3744
+ segments.length = 0;
3745
+ if (shapeE <= 1) {
3746
+ segments.push({
3747
+ s: shapeData.totalShapeLength * shapeS,
3748
+ e: shapeData.totalShapeLength * shapeE
3749
+ });
3750
+ } else if (shapeS >= 1) {
3751
+ segments.push({
3752
+ s: shapeData.totalShapeLength * (shapeS - 1),
3753
+ e: shapeData.totalShapeLength * (shapeE - 1)
3754
+ });
3755
+ } else {
3756
+ segments.push({
3757
+ s: shapeData.totalShapeLength * shapeS,
3758
+ e: shapeData.totalShapeLength
3759
+ });
3760
+ segments.push({
3761
+ s: 0,
3762
+ e: shapeData.totalShapeLength * (shapeE - 1)
3763
+ });
3764
+ }
3765
+ var newShapesData = this.addShapes(shapeData, segments[0]);
3766
+ if (segments[0].s !== segments[0].e) {
3767
+ if (segments.length > 1) {
3768
+ var lastShapeInCollection = shapeData.shape.paths.shapes[shapeData.shape.paths._length - 1];
3769
+ if (lastShapeInCollection.c) {
3770
+ var lastShape = newShapesData.pop();
3771
+ this.addPaths(newShapesData, localShapeCollection);
3772
+ newShapesData = this.addShapes(shapeData, segments[1], lastShape);
3773
+ } else {
3774
+ this.addPaths(newShapesData, localShapeCollection);
3775
+ newShapesData = this.addShapes(shapeData, segments[1]);
3776
+ }
3777
+ }
3778
+ this.addPaths(newShapesData, localShapeCollection);
3779
+ }
3780
+
3781
+ }
3782
+ shapeData.shape.paths = localShapeCollection;
3783
+ }
3784
+ }
3785
+ } else if (this._mdf) {
3786
+ for (i = 0; i < len; i += 1) {
3787
+ //Releasign Trim Cached paths data when no trim applied in case shapes are modified inbetween.
3788
+ //Don't remove this even if it's losing cached info.
3789
+ this.shapes[i].pathsData.length = 0;
3790
+ this.shapes[i].shape._mdf = true;
3791
+ }
3792
+ }
3793
+ };
3794
+
3795
+ TrimModifier.prototype.addPaths = function (newPaths, localShapeCollection) {
3796
+ var i, len = newPaths.length;
3797
+ for (i = 0; i < len; i += 1) {
3798
+ localShapeCollection.addShape(newPaths[i]);
3799
+ }
3800
+ };
3801
+
3802
+ TrimModifier.prototype.addSegment = function (pt1, pt2, pt3, pt4, shapePath, pos, newShape) {
3803
+ shapePath.setXYAt(pt2[0], pt2[1], 'o', pos);
3804
+ shapePath.setXYAt(pt3[0], pt3[1], 'i', pos + 1);
3805
+ if (newShape) {
3806
+ shapePath.setXYAt(pt1[0], pt1[1], 'v', pos);
3807
+ }
3808
+ shapePath.setXYAt(pt4[0], pt4[1], 'v', pos + 1);
3809
+ };
3810
+
3811
+ TrimModifier.prototype.addSegmentFromArray = function (points, shapePath, pos, newShape) {
3812
+ shapePath.setXYAt(points[1], points[5], 'o', pos);
3813
+ shapePath.setXYAt(points[2], points[6], 'i', pos + 1);
3814
+ if (newShape) {
3815
+ shapePath.setXYAt(points[0], points[4], 'v', pos);
3816
+ }
3817
+ shapePath.setXYAt(points[3], points[7], 'v', pos + 1);
3818
+ };
3819
+
3820
+ TrimModifier.prototype.addShapes = function (shapeData, shapeSegment, shapePath) {
3821
+ var pathsData = shapeData.pathsData;
3822
+ var shapePaths = shapeData.shape.paths.shapes;
3823
+ var i, len = shapeData.shape.paths._length,
3824
+ j, jLen;
3825
+ var addedLength = 0;
3826
+ var currentLengthData, segmentCount;
3827
+ var lengths;
3828
+ var segment;
3829
+ var shapes = [];
3830
+ var initPos;
3831
+ var newShape = true;
3832
+ if (!shapePath) {
3833
+ shapePath = shape_pool.newElement();
3834
+ segmentCount = 0;
3835
+ initPos = 0;
3836
+ } else {
3837
+ segmentCount = shapePath._length;
3838
+ initPos = shapePath._length;
3839
+ }
3840
+ shapes.push(shapePath);
3841
+ for (i = 0; i < len; i += 1) {
3842
+ lengths = pathsData[i].lengths;
3843
+ shapePath.c = shapePaths[i].c;
3844
+