| 
									
										
										
										
											2023-11-06 15:17:15 +00:00
										 |  |  | /*
 | 
					
						
							| 
									
										
										
										
											2023-11-04 14:04:20 -07:00
										 |  |  |  * Copyright (c) 2023-2024, Matthew Olsson <mattco@serenityos.org> | 
					
						
							| 
									
										
										
										
											2023-11-06 15:17:15 +00:00
										 |  |  |  * | 
					
						
							|  |  |  |  * SPDX-License-Identifier: BSD-2-Clause | 
					
						
							|  |  |  |  */ | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | #pragma once
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | #include <AK/Optional.h>
 | 
					
						
							|  |  |  | #include <AK/String.h>
 | 
					
						
							|  |  |  | #include <AK/Variant.h>
 | 
					
						
							|  |  |  | #include <LibWeb/Bindings/AnimationEffectPrototype.h>
 | 
					
						
							|  |  |  | #include <LibWeb/Bindings/PlatformObject.h>
 | 
					
						
							| 
									
										
										
										
											2023-11-04 14:04:20 -07:00
										 |  |  | #include <LibWeb/CSS/Enums.h>
 | 
					
						
							| 
									
										
										
										
											2024-06-14 21:50:25 -07:00
										 |  |  | #include <LibWeb/CSS/StyleValues/EasingStyleValue.h>
 | 
					
						
							| 
									
										
										
										
											2023-11-06 15:17:15 +00:00
										 |  |  | 
 | 
					
						
							|  |  |  | namespace Web::Animations { | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | // // https://www.w3.org/TR/web-animations-1/#the-effecttiming-dictionaries
 | 
					
						
							|  |  |  | struct OptionalEffectTiming { | 
					
						
							|  |  |  |     Optional<double> delay {}; | 
					
						
							|  |  |  |     Optional<double> end_delay {}; | 
					
						
							|  |  |  |     Optional<Bindings::FillMode> fill {}; | 
					
						
							|  |  |  |     Optional<double> iteration_start {}; | 
					
						
							|  |  |  |     Optional<double> iterations {}; | 
					
						
							|  |  |  |     Optional<Variant<double, String>> duration; | 
					
						
							|  |  |  |     Optional<Bindings::PlaybackDirection> direction {}; | 
					
						
							|  |  |  |     Optional<String> easing {}; | 
					
						
							|  |  |  | }; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | // // https://www.w3.org/TR/web-animations-1/#the-effecttiming-dictionaries
 | 
					
						
							|  |  |  | struct EffectTiming { | 
					
						
							|  |  |  |     double delay { 0 }; | 
					
						
							|  |  |  |     double end_delay { 0 }; | 
					
						
							|  |  |  |     Bindings::FillMode fill { Bindings::FillMode::Auto }; | 
					
						
							|  |  |  |     double iteration_start { 0.0 }; | 
					
						
							|  |  |  |     double iterations { 1.0 }; | 
					
						
							|  |  |  |     Variant<double, String> duration { "auto"_string }; | 
					
						
							|  |  |  |     Bindings::PlaybackDirection direction { Bindings::PlaybackDirection::Normal }; | 
					
						
							|  |  |  |     String easing { "linear"_string }; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     OptionalEffectTiming to_optional_effect_timing() const; | 
					
						
							|  |  |  | }; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | // https://www.w3.org/TR/web-animations-1/#the-computedeffecttiming-dictionary
 | 
					
						
							|  |  |  | struct ComputedEffectTiming : public EffectTiming { | 
					
						
							|  |  |  |     double end_time; | 
					
						
							|  |  |  |     double active_duration; | 
					
						
							|  |  |  |     Optional<double> local_time; | 
					
						
							|  |  |  |     Optional<double> progress; | 
					
						
							|  |  |  |     Optional<double> current_iteration; | 
					
						
							|  |  |  | }; | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-11-04 11:25:29 -07:00
										 |  |  | enum class AnimationDirection { | 
					
						
							|  |  |  |     Forwards, | 
					
						
							|  |  |  |     Backwards, | 
					
						
							|  |  |  | }; | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-11-04 14:04:20 -07:00
										 |  |  | Bindings::FillMode css_fill_mode_to_bindings_fill_mode(CSS::AnimationFillMode mode); | 
					
						
							|  |  |  | Bindings::PlaybackDirection css_animation_direction_to_bindings_playback_direction(CSS::AnimationDirection direction); | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-11-06 15:17:15 +00:00
										 |  |  | // https://www.w3.org/TR/web-animations-1/#the-animationeffect-interface
 | 
					
						
							|  |  |  | class AnimationEffect : public Bindings::PlatformObject { | 
					
						
							|  |  |  |     WEB_PLATFORM_OBJECT(AnimationEffect, Bindings::PlatformObject); | 
					
						
							| 
									
										
										
										
											2024-11-15 04:01:23 +13:00
										 |  |  |     GC_DECLARE_ALLOCATOR(AnimationEffect); | 
					
						
							| 
									
										
										
										
											2023-11-06 15:17:15 +00:00
										 |  |  | 
 | 
					
						
							|  |  |  | public: | 
					
						
							| 
									
										
										
										
											2024-12-05 11:52:43 +00:00
										 |  |  |     static RefPtr<CSS::CSSStyleValue const> parse_easing_string(StringView value); | 
					
						
							| 
									
										
										
										
											2024-02-19 19:11:05 -07:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-11-06 15:17:15 +00:00
										 |  |  |     EffectTiming get_timing() const; | 
					
						
							|  |  |  |     ComputedEffectTiming get_computed_timing() const; | 
					
						
							|  |  |  |     WebIDL::ExceptionOr<void> update_timing(OptionalEffectTiming timing = {}); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     double start_delay() const { return m_start_delay; } | 
					
						
							|  |  |  |     void set_start_delay(double start_delay) { m_start_delay = start_delay; } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     double end_delay() const { return m_end_delay; } | 
					
						
							|  |  |  |     void set_end_delay(double end_delay) { m_end_delay = end_delay; } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     Bindings::FillMode fill_mode() const { return m_fill_mode; } | 
					
						
							|  |  |  |     void set_fill_mode(Bindings::FillMode fill_mode) { m_fill_mode = fill_mode; } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     double iteration_start() const { return m_iteration_start; } | 
					
						
							|  |  |  |     void set_iteration_start(double iteration_start) { m_iteration_start = iteration_start; } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     double iteration_count() const { return m_iteration_count; } | 
					
						
							|  |  |  |     void set_iteration_count(double iteration_count) { m_iteration_count = iteration_count; } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     Variant<double, String> const& iteration_duration() const { return m_iteration_duration; } | 
					
						
							|  |  |  |     void set_iteration_duration(Variant<double, String> iteration_duration) { m_iteration_duration = move(iteration_duration); } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     Bindings::PlaybackDirection playback_direction() const { return m_playback_direction; } | 
					
						
							|  |  |  |     void set_playback_direction(Bindings::PlaybackDirection playback_direction) { m_playback_direction = playback_direction; } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2024-06-14 21:50:25 -07:00
										 |  |  |     CSS::EasingStyleValue::Function const& timing_function() { return m_timing_function; } | 
					
						
							|  |  |  |     void set_timing_function(CSS::EasingStyleValue::Function value) { m_timing_function = move(value); } | 
					
						
							| 
									
										
										
										
											2023-11-04 11:54:08 -07:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2024-11-15 04:01:23 +13:00
										 |  |  |     GC::Ptr<Animation> associated_animation() const { return m_associated_animation; } | 
					
						
							|  |  |  |     void set_associated_animation(GC::Ptr<Animation> value); | 
					
						
							| 
									
										
										
										
											2023-11-04 11:24:21 -07:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-11-04 11:25:29 -07:00
										 |  |  |     AnimationDirection animation_direction() const; | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-11-04 11:29:10 -07:00
										 |  |  |     double end_time() const; | 
					
						
							|  |  |  |     Optional<double> local_time() const; | 
					
						
							|  |  |  |     double active_duration() const; | 
					
						
							| 
									
										
										
										
											2023-11-04 11:38:23 -07:00
										 |  |  |     Optional<double> active_time() const; | 
					
						
							|  |  |  |     Optional<double> active_time_using_fill(Bindings::FillMode) const; | 
					
						
							| 
									
										
										
										
											2024-02-03 18:54:49 -07:00
										 |  |  | 
 | 
					
						
							|  |  |  |     bool is_in_play() const; | 
					
						
							|  |  |  |     bool is_current() const; | 
					
						
							| 
									
										
										
										
											2024-02-03 17:00:59 -07:00
										 |  |  |     bool is_in_effect() const; | 
					
						
							| 
									
										
										
										
											2023-11-04 11:29:10 -07:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-11-04 11:30:59 -07:00
										 |  |  |     double before_active_boundary_time() const; | 
					
						
							|  |  |  |     double after_active_boundary_time() const; | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-11-04 11:35:18 -07:00
										 |  |  |     bool is_in_the_before_phase() const; | 
					
						
							|  |  |  |     bool is_in_the_after_phase() const; | 
					
						
							|  |  |  |     bool is_in_the_active_phase() const; | 
					
						
							|  |  |  |     bool is_in_the_idle_phase() const; | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2024-12-22 18:26:52 -05:00
										 |  |  |     // Keep this enum up to date with CSSTransition::Phase.
 | 
					
						
							| 
									
										
										
										
											2023-11-04 11:35:18 -07:00
										 |  |  |     enum class Phase { | 
					
						
							|  |  |  |         Before, | 
					
						
							|  |  |  |         Active, | 
					
						
							|  |  |  |         After, | 
					
						
							|  |  |  |         Idle, | 
					
						
							|  |  |  |     }; | 
					
						
							|  |  |  |     Phase phase() const; | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-11-04 14:14:28 -07:00
										 |  |  |     Phase previous_phase() const { return m_previous_phase; } | 
					
						
							|  |  |  |     void set_previous_phase(Phase value) { m_previous_phase = value; } | 
					
						
							|  |  |  |     double previous_current_iteration() const { return m_previous_current_iteration; } | 
					
						
							|  |  |  |     void set_previous_current_iteration(double value) { m_previous_current_iteration = value; } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-11-08 05:36:27 -07:00
										 |  |  |     Optional<double> overall_progress() const; | 
					
						
							|  |  |  |     Optional<double> directed_progress() const; | 
					
						
							|  |  |  |     AnimationDirection current_direction() const; | 
					
						
							|  |  |  |     Optional<double> simple_iteration_progress() const; | 
					
						
							|  |  |  |     Optional<double> current_iteration() const; | 
					
						
							| 
									
										
										
										
											2023-11-04 11:55:16 -07:00
										 |  |  |     Optional<double> transformed_progress() const; | 
					
						
							| 
									
										
										
										
											2023-11-08 05:36:27 -07:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2024-02-03 17:08:52 -07:00
										 |  |  |     HashTable<CSS::PropertyID> const& target_properties() const { return m_target_properties; } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-11-04 13:09:57 -07:00
										 |  |  |     virtual DOM::Element* target() const { return {}; } | 
					
						
							| 
									
										
										
										
											2024-02-03 18:21:29 -07:00
										 |  |  |     virtual bool is_keyframe_effect() const { return false; } | 
					
						
							| 
									
										
										
										
											2023-11-04 13:09:57 -07:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2024-12-20 11:32:17 +01:00
										 |  |  |     virtual void update_computed_properties() = 0; | 
					
						
							| 
									
										
										
										
											2024-03-16 07:44:48 +01:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-11-06 15:17:15 +00:00
										 |  |  | protected: | 
					
						
							|  |  |  |     AnimationEffect(JS::Realm&); | 
					
						
							| 
									
										
										
										
											2024-02-04 19:14:22 -07:00
										 |  |  |     virtual ~AnimationEffect() = default; | 
					
						
							| 
									
										
										
										
											2023-11-06 15:17:15 +00:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2024-04-05 20:15:19 +03:00
										 |  |  |     virtual void visit_edges(Visitor&) override; | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-11-06 15:17:15 +00:00
										 |  |  |     virtual void initialize(JS::Realm&) override; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     // https://www.w3.org/TR/web-animations-1/#start-delay
 | 
					
						
							|  |  |  |     double m_start_delay { 0.0 }; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     // https://www.w3.org/TR/web-animations-1/#end-delay
 | 
					
						
							|  |  |  |     double m_end_delay { 0.0 }; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     // https://www.w3.org/TR/web-animations-1/#fill-mode
 | 
					
						
							|  |  |  |     Bindings::FillMode m_fill_mode { Bindings::FillMode::Auto }; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     // https://www.w3.org/TR/web-animations-1/#iteration-start
 | 
					
						
							|  |  |  |     double m_iteration_start { 0.0 }; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     // https://www.w3.org/TR/web-animations-1/#iteration-count
 | 
					
						
							|  |  |  |     double m_iteration_count { 1.0 }; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     // https://www.w3.org/TR/web-animations-1/#iteration-duration
 | 
					
						
							|  |  |  |     Variant<double, String> m_iteration_duration { 0.0 }; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     // https://www.w3.org/TR/web-animations-1/#playback-direction
 | 
					
						
							|  |  |  |     Bindings::PlaybackDirection m_playback_direction { Bindings::PlaybackDirection::Normal }; | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-11-04 11:24:21 -07:00
										 |  |  |     // https://www.w3.org/TR/web-animations-1/#animation-associated-effect
 | 
					
						
							| 
									
										
										
										
											2024-11-15 04:01:23 +13:00
										 |  |  |     GC::Ptr<Animation> m_associated_animation {}; | 
					
						
							| 
									
										
										
										
											2023-11-04 11:54:08 -07:00
										 |  |  | 
 | 
					
						
							|  |  |  |     // https://www.w3.org/TR/web-animations-1/#time-transformations
 | 
					
						
							| 
									
										
										
										
											2024-11-03 14:56:16 +11:00
										 |  |  |     CSS::EasingStyleValue::Function m_timing_function { CSS::EasingStyleValue::Linear::identity() }; | 
					
						
							| 
									
										
										
										
											2023-11-04 14:14:28 -07:00
										 |  |  | 
 | 
					
						
							|  |  |  |     // Used for calculating transitions in StyleComputer
 | 
					
						
							|  |  |  |     Phase m_previous_phase { Phase::Idle }; | 
					
						
							|  |  |  |     double m_previous_current_iteration { 0.0 }; | 
					
						
							| 
									
										
										
										
											2024-02-03 17:08:52 -07:00
										 |  |  | 
 | 
					
						
							|  |  |  |     // https://www.w3.org/TR/web-animations-1/#target-property
 | 
					
						
							|  |  |  |     // Note: Only modified by child classes
 | 
					
						
							|  |  |  |     HashTable<CSS::PropertyID> m_target_properties; | 
					
						
							| 
									
										
										
										
											2023-11-06 15:17:15 +00:00
										 |  |  | }; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | } |