🎉 Add animations to interactions

common/src/app/common/types/interactions.cljc

@@ -42,6 +42,46 @@
 (s/def ::event-opts
   (s/multi-spec event-opts-spec ::event-type))
 
+;; -- Animation options
+
+(s/def ::animation-type #{:dissolve
+                          :slide
+                          :push})
+(s/def ::duration ::us/safe-integer)
+(s/def ::easing #{:linear
+                  :ease
+                  :ease-in
+                  :ease-out
+                  :ease-in-out})
+(s/def ::way #{:in
+               :out})
+(s/def ::direction #{:right
+                     :left
+                     :up
+                     :down})
+(s/def ::offset-effect ::us/boolean)
+
+(defmulti animation-spec :animation-type)
+
+(defmethod animation-spec :dissolve [_]
+  (s/keys :req-un [::duration
+                   ::easing]))
+
+(defmethod animation-spec :slide [_]
+  (s/keys :req-un [::duration
+                   ::easing
+                   ::way
+                   ::direction
+                   ::offset-effect]))
+
+(defmethod animation-spec :push [_]
+  (s/keys :req-un [::duration
+                   ::easing
+                   ::direction]))
+
+(s/def ::animation
+  (s/multi-spec animation-spec ::animation-type))
+
 ;; -- Options depending on action type
 
 (s/def ::action-type #{:navigate
@@ -69,24 +109,29 @@
 (defmulti action-opts-spec :action-type)
 
 (defmethod action-opts-spec :navigate [_]
-  (s/keys :opt-un [::destination ::preserve-scroll]))
+  (s/keys :opt-un [::destination
+                   ::preserve-scroll
+                     ::animation]))
 
 (defmethod action-opts-spec :open-overlay [_]
   (s/keys :req-un [::overlay-position
                    ::overlay-pos-type]
           :opt-un [::destination
                    ::close-click-outside
-                   ::background-overlay]))
+                   ::background-overlay
+                   ::animation]))
 
 (defmethod action-opts-spec :toggle-overlay [_]
   (s/keys :req-un [::overlay-position
                    ::overlay-pos-type]
           :opt-un [::destination
                    ::close-click-outside
-                   ::background-overlay]))
+                   ::background-overlay
+                   ::animation]))
 
 (defmethod action-opts-spec :close-overlay [_]
-  (s/keys :opt-un [::destination]))
+  (s/keys :opt-un [::destination
+                   ::animation]))
 
 (defmethod action-opts-spec :prev-screen [_]
   (s/keys :req-un []))
@@ -122,6 +167,7 @@
 ;; -- Helpers for interaction
 
 (declare calc-overlay-pos-initial)
+(declare allowed-animation?)
 
 (defn set-event-type
   [interaction event-type shape]
@@ -141,42 +187,46 @@
       (assoc interaction
              :event-type event-type))))
 
-
 (defn set-action-type
   [interaction action-type]
   (us/verify ::interaction interaction)
   (us/verify ::action-type action-type)
-  (if (= (:action-type interaction) action-type)
-    interaction
-    (case action-type
+  (let [new-interaction
+        (if (= (:action-type interaction) action-type)
+          interaction
+          (case action-type
+            :navigate
+            (assoc interaction
+                   :action-type action-type
+                   :destination (get interaction :destination)
+                   :preserve-scroll (get interaction :preserve-scroll false))
 
-      :navigate
-      (assoc interaction
-             :action-type action-type
-             :destination (get interaction :destination)
-             :preserve-scroll (get interaction :preserve-scroll false))
+            (:open-overlay :toggle-overlay)
+            (let [overlay-pos-type (get interaction :overlay-pos-type :center)
+                  overlay-position (get interaction :overlay-position (gpt/point 0 0))]
+              (assoc interaction
+                     :action-type action-type
+                     :overlay-pos-type overlay-pos-type
+                     :overlay-position overlay-position))
 
-      (:open-overlay :toggle-overlay)
-      (let [overlay-pos-type (get interaction :overlay-pos-type :center)
-            overlay-position (get interaction :overlay-position (gpt/point 0 0))]
-        (assoc interaction
-               :action-type action-type
-               :overlay-pos-type overlay-pos-type
-               :overlay-position overlay-position))
+            :close-overlay
+            (assoc interaction
+                   :action-type action-type
+                   :destination (get interaction :destination))
 
-      :close-overlay
-      (assoc interaction
-             :action-type action-type
-             :destination (get interaction :destination))
+            :prev-screen
+            (assoc interaction
+                   :action-type action-type)
 
-      :prev-screen
-      (assoc interaction
-             :action-type action-type)
+            :open-url
+            (assoc interaction
+                   :action-type action-type
+                   :url (get interaction :url ""))))]
 
-      :open-url
-      (assoc interaction
-             :action-type action-type
-             :url (get interaction :url "")))))
+    (cond-> new-interaction
+      (not (allowed-animation? action-type
+                               (-> new-interaction :animation :animation-type)))
+      (dissoc :animation-type :animation))))
 
 (defn has-delay
   [interaction]
@@ -339,6 +389,129 @@
         :manual
         (gpt/add (:overlay-position interaction) frame-offset)))))
 
+(defn has-animation?
+  [interaction]
+  (#{:navigate :open-overlay :close-overlay :toggle-overlay} (:action-type interaction)))
+
+(defn allow-push?
+  [action-type]
+  ; Push animation is not allowed for overlay actions
+  (= :navigate action-type))
+
+(defn allowed-animation?
+  [action-type animation-type]
+  ; Some specific combinations are forbidden, but may occur if the action type
+  ; is changed from a type that allows the animation to another one that doesn't.
+  ; Currently the only case is an overlay action with push animation.
+  (or (not= animation-type :push)
+      (allow-push? action-type)))
+
+(defn set-animation-type
+  [interaction animation-type]
+  (us/verify ::interaction interaction)
+  (us/verify (s/nilable ::animation-type) animation-type)
+  (assert (has-animation? interaction))
+  (assert (allowed-animation? (:action-type interaction) animation-type))
+  (if (= (-> interaction :animation :animation-type) animation-type)
+    interaction
+    (if (nil? animation-type)
+      (dissoc interaction :animation)
+      (cond-> interaction
+        :always
+        (update :animation assoc :animation-type animation-type)
+
+        (= animation-type :dissolve)
+        (update :animation assoc
+                :duration (get-in interaction [:animation :duration] 300)
+                :easing (get-in interaction [:animation :easing] :linear))
+
+        (= animation-type :slide)
+        (update :animation assoc
+                :duration (get-in interaction [:animation :duration] 300)
+                :easing (get-in interaction [:animation :easing] :linear)
+                :way (get-in interaction [:animation :way] :in)
+                :direction (get-in interaction [:animation :direction] :right)
+                :offset-effect (get-in interaction [:animation :offset-effect] false))
+
+        (= animation-type :push)
+        (update :animation assoc
+                :duration (get-in interaction [:animation :duration] 300)
+                :easing (get-in interaction [:animation :easing] :linear)
+                :direction (get-in interaction [:animation :direction] :right))))))
+
+(defn has-duration?
+  [interaction]
+  (#{:dissolve :slide :push} (-> interaction :animation :animation-type)))
+
+(defn set-duration
+  [interaction duration]
+  (us/verify ::interaction interaction)
+  (us/verify ::duration duration)
+  (assert (has-duration? interaction))
+  (update interaction :animation assoc :duration duration))
+
+(defn has-easing?
+  [interaction]
+  (#{:dissolve :slide :push} (-> interaction :animation :animation-type)))
+
+(defn set-easing
+  [interaction easing]
+  (us/verify ::interaction interaction)
+  (us/verify ::easing easing)
+  (assert (has-easing? interaction))
+  (update interaction :animation assoc :easing easing))
+
+(defn has-way?
+  [interaction]
+  ; Way is ignored in slide animations of overlay actions
+  (and (= (:action-type interaction) :navigate)
+       (= (-> interaction :animation :animation-type) :slide)))
+
+(defn set-way
+  [interaction way]
+  (us/verify ::interaction interaction)
+  (us/verify ::way way)
+  (assert (has-way? interaction))
+  (update interaction :animation assoc :way way))
+
+(defn has-direction?
+  [interaction]
+  (#{:slide :push} (-> interaction :animation :animation-type)))
+
+(defn set-direction
+  [interaction direction]
+  (us/verify ::interaction interaction)
+  (us/verify ::direction direction)
+  (assert (has-direction? interaction))
+  (update interaction :animation assoc :direction direction))
+
+(defn invert-direction
+  [animation]
+  (us/verify (s/nilable ::animation) animation)
+  (case (:direction animation)
+    :right
+    (assoc animation :direction :left)
+    :left
+    (assoc animation :direction :right)
+    :up
+    (assoc animation :direction :down)
+    :down
+    (assoc animation :direction :up)
+    animation))
+
+(defn has-offset-effect?
+  [interaction]
+  ; Offset-effect is ignored in slide animations of overlay actions
+  (and (= (:action-type interaction) :navigate)
+       (= (-> interaction :animation :animation-type) :slide)))
+
+(defn set-offset-effect
+  [interaction offset-effect]
+  (us/verify ::interaction interaction)
+  (us/verify ::offset-effect offset-effect)
+  (assert (has-offset-effect? interaction))
+  (update interaction :animation assoc :offset-effect offset-effect))
+
 ;; -- Helpers for interactions
 
 (defn add-interaction

common/test/app/common/types_interactions_test.cljc

@@ -269,12 +269,252 @@
   (t/testing "Set background-overlay"
     (let [new-interaction (cti/set-background-overlay i3 true)]
       (t/is (not (:background-overlay i3)))
-      (t/is (:background-overlay new-interaction))))
-
-  ))
+      (t/is (:background-overlay new-interaction))))))
 
 
-(t/deftest interactions
+(t/deftest animation-checks
+  (let [i1 cti/default-interaction
+        i2 (cti/set-action-type i1 :open-overlay)
+        i3 (cti/set-action-type i1 :toggle-overlay)
+        i4 (cti/set-action-type i1 :close-overlay)
+        i5 (cti/set-action-type i1 :prev-screen)
+        i6 (cti/set-action-type i1 :open-url)]
+
+    (t/testing "Has animation?"
+      (t/is (cti/has-animation? i1))
+      (t/is (cti/has-animation? i2))
+      (t/is (cti/has-animation? i3))
+      (t/is (cti/has-animation? i4))
+      (t/is (not (cti/has-animation? i5)))
+      (t/is (not (cti/has-animation? i6))))
+
+    (t/testing "Valid push?"
+      (t/is (cti/allow-push? (:action-type i1)))
+      (t/is (not (cti/allow-push? (:action-type i2))))
+      (t/is (not (cti/allow-push? (:action-type i3))))
+      (t/is (not (cti/allow-push? (:action-type i4))))
+      (t/is (not (cti/allow-push? (:action-type i5))))
+      (t/is (not (cti/allow-push? (:action-type i6)))))))
+
+
+(t/deftest set-animation-type
+  (let [i1 cti/default-interaction
+        i2 (cti/set-animation-type i1 :dissolve)]
+
+    (t/testing "Set animation type nil"
+      (let [new-interaction
+            (cti/set-animation-type i1 nil)]
+        (t/is (nil? (-> new-interaction :animation :animation-type)))))
+
+    (t/testing "Set animation type unchanged"
+      (let [new-interaction
+            (cti/set-animation-type i2 :dissolve)]
+        (t/is (= :dissolve (-> new-interaction :animation :animation-type)))))
+
+    (t/testing "Set animation type changed"
+      (let [new-interaction
+            (cti/set-animation-type i2 :slide)]
+        (t/is (= :slide (-> new-interaction :animation :animation-type)))))
+
+    (t/testing "Set animation type reset"
+      (let [new-interaction
+            (cti/set-animation-type i2 nil)]
+        (t/is (nil? (-> new-interaction :animation)))))
+
+    (t/testing "Set animation type dissolve"
+      (let [new-interaction
+            (cti/set-animation-type i1 :dissolve)]
+        (t/is (= :dissolve (-> new-interaction :animation :animation-type)))
+        (t/is (= 300 (-> new-interaction :animation :duration)))
+        (t/is (= :linear (-> new-interaction :animation :easing)))))
+
+    (t/testing "Set animation type dissolve with previous data"
+      (let [interaction (assoc i1 :animation {:animation-type :slide
+                                              :duration 1000
+                                              :easing :ease-out
+                                              :way :out
+                                              :direction :left
+                                              :offset-effect true})
+            new-interaction
+            (cti/set-animation-type interaction :dissolve)]
+        (t/is (= :dissolve (-> new-interaction :animation :animation-type)))
+        (t/is (= 1000 (-> new-interaction :animation :duration)))
+        (t/is (= :ease-out (-> new-interaction :animation :easing)))))
+
+    (t/testing "Set animation type slide"
+      (let [new-interaction
+            (cti/set-animation-type i1 :slide)]
+        (t/is (= :slide (-> new-interaction :animation :animation-type)))
+        (t/is (= 300 (-> new-interaction :animation :duration)))
+        (t/is (= :linear (-> new-interaction :animation :easing)))
+        (t/is (= :in (-> new-interaction :animation :way)))
+        (t/is (= :right (-> new-interaction :animation :direction)))
+        (t/is (= false (-> new-interaction :animation :offset-effect)))))
+
+    (t/testing "Set animation type slide with previous data"
+      (let [interaction (assoc i1 :animation {:animation-type :dissolve
+                                              :duration 1000
+                                              :easing :ease-out
+                                              :way :out
+                                              :direction :left
+                                              :offset-effect true})
+            new-interaction
+            (cti/set-animation-type interaction :slide)]
+        (t/is (= :slide (-> new-interaction :animation :animation-type)))
+        (t/is (= 1000 (-> new-interaction :animation :duration)))
+        (t/is (= :ease-out (-> new-interaction :animation :easing)))
+        (t/is (= :out (-> new-interaction :animation :way)))
+        (t/is (= :left (-> new-interaction :animation :direction)))
+        (t/is (= true (-> new-interaction :animation :offset-effect)))))
+
+    (t/testing "Set animation type push"
+      (let [new-interaction
+            (cti/set-animation-type i1 :push)]
+        (t/is (= :push (-> new-interaction :animation :animation-type)))
+        (t/is (= 300 (-> new-interaction :animation :duration)))
+        (t/is (= :linear (-> new-interaction :animation :easing)))
+        (t/is (= :right (-> new-interaction :animation :direction)))))
+
+    (t/testing "Set animation type push with previous data"
+      (let [interaction (assoc i1 :animation {:animation-type :slide
+                                              :duration 1000
+                                              :easing :ease-out
+                                              :way :out
+                                              :direction :left
+                                              :offset-effect true})
+            new-interaction
+            (cti/set-animation-type interaction :push)]
+        (t/is (= :push (-> new-interaction :animation :animation-type)))
+        (t/is (= 1000 (-> new-interaction :animation :duration)))
+        (t/is (= :ease-out (-> new-interaction :animation :easing)))
+        (t/is (= :left (-> new-interaction :animation :direction)))))))
+
+
+(t/deftest allowed-animation
+  (let [i1 (cti/set-action-type cti/default-interaction :open-overlay)
+        i2 (cti/set-action-type cti/default-interaction :close-overlay)
+        i3 (cti/set-action-type cti/default-interaction :toggle-overlay)]
+
+    (t/testing "Cannot use animation push for an overlay action"
+      (let [bad-interaction-1 (assoc i1 :animation {:animation-type :push
+                                                    :duration 1000
+                                                    :easing :ease-out
+                                                    :direction :left})
+            bad-interaction-2 (assoc i2 :animation {:animation-type :push
+                                                    :duration 1000
+                                                    :easing :ease-out
+                                                    :direction :left})
+            bad-interaction-3 (assoc i3 :animation {:animation-type :push
+                                                    :duration 1000
+                                                    :easing :ease-out
+                                                    :direction :left})]
+        (t/is (not (cti/allowed-animation? (:action-type bad-interaction-1)
+                                           (-> bad-interaction-1 :animation :animation-type))))
+        (t/is (not (cti/allowed-animation? (:action-type bad-interaction-2)
+                                           (-> bad-interaction-1 :animation :animation-type))))
+        (t/is (not (cti/allowed-animation? (:action-type bad-interaction-3)
+                                           (-> bad-interaction-1 :animation :animation-type))))))
+
+    (t/testing "Remove animation if moving to an forbidden state"
+      (let [interaction (cti/set-animation-type cti/default-interaction :push)
+            new-interaction (cti/set-action-type interaction :open-overlay)]
+        (t/is (nil? (:animation new-interaction)))))))
+
+
+(t/deftest option-duration
+  (let [i1 cti/default-interaction
+        i2 (cti/set-animation-type cti/default-interaction :dissolve)]
+
+  (t/testing "Has duration?"
+    (t/is (not (cti/has-duration? i1)))
+    (t/is (cti/has-duration? i2)))
+
+  (t/testing "Set duration"
+    (let [new-interaction (cti/set-duration i2 1000)]
+      (t/is (= 1000 (-> new-interaction :animation :duration)))))))
+
+
+(t/deftest option-easing
+  (let [i1 cti/default-interaction
+        i2 (cti/set-animation-type cti/default-interaction :dissolve)]
+
+  (t/testing "Has easing?"
+    (t/is (not (cti/has-easing? i1)))
+    (t/is (cti/has-easing? i2)))
+
+  (t/testing "Set easing"
+    (let [new-interaction (cti/set-easing i2 :ease-in)]
+      (t/is (= :ease-in (-> new-interaction :animation :easing)))))))
+
+
+(t/deftest option-way
+  (let [i1 cti/default-interaction
+        i2 (cti/set-animation-type cti/default-interaction :slide)
+        i3 (cti/set-action-type i2 :open-overlay)]
+
+  (t/testing "Has way?"
+    (t/is (not (cti/has-way? i1)))
+    (t/is (cti/has-way? i2))
+    (t/is (not (cti/has-way? i3)))
+    (t/is (some? (-> i3 :animation :way)))) ; <- it exists but is ignored
+
+  (t/testing "Set way"
+    (let [new-interaction (cti/set-way i2 :out)]
+      (t/is (= :out (-> new-interaction :animation :way)))))))
+
+
+(t/deftest option-direction
+  (let [i1 cti/default-interaction
+        i2 (cti/set-animation-type cti/default-interaction :push)
+        i3 (cti/set-animation-type cti/default-interaction :dissolve)]
+
+  (t/testing "Has direction?"
+    (t/is (not (cti/has-direction? i1)))
+    (t/is (cti/has-direction? i2)))
+
+  (t/testing "Set direction"
+    (let [new-interaction (cti/set-direction i2 :left)]
+      (t/is (= :left (-> new-interaction :animation :direction)))))
+
+  (t/testing "Invert direction"
+    (let [a-none (:animation i3)
+          a-right (:animation i2)
+          a-left (assoc a-right :direction :left)
+          a-up (assoc a-right :direction :up)
+          a-down (assoc a-right :direction :down)
+
+          a-nil' (cti/invert-direction nil)
+          a-none' (cti/invert-direction a-none)
+          a-right' (cti/invert-direction a-right)
+          a-left' (cti/invert-direction a-left)
+          a-up' (cti/invert-direction a-up)
+          a-down' (cti/invert-direction a-down)]
+
+      (t/is (nil? a-nil'))
+      (t/is (nil? (:direction a-none')))
+      (t/is (= :left (:direction a-right')))
+      (t/is (= :right (:direction a-left')))
+      (t/is (= :down (:direction a-up')))
+      (t/is (= :up (:direction a-down')))))))
+
+
+(t/deftest option-offset-effect
+  (let [i1 cti/default-interaction
+        i2 (cti/set-animation-type cti/default-interaction :slide)
+        i3 (cti/set-action-type i2 :open-overlay)]
+
+  (t/testing "Has offset-effect"
+    (t/is (not (cti/has-offset-effect? i1)))
+    (t/is (cti/has-offset-effect? i2))
+    (t/is (not (cti/has-offset-effect? i3)))
+    (t/is (some? (-> i3 :animation :offset-effect)))) ; <- it exists but is ignored
+
+  (t/testing "Set offset-effect"
+    (let [new-interaction (cti/set-offset-effect i2 true)]
+      (t/is (= true (-> new-interaction :animation :offset-effect)))))))
+
+
+(t/deftest modify-interactions
   (let [i1 (cti/set-action-type cti/default-interaction :open-overlay)
         i2 (cti/set-action-type cti/default-interaction :close-overlay)
         i3 (cti/set-action-type cti/default-interaction :prev-screen)
@@ -298,7 +538,37 @@
     (t/testing "Update interaction"
       (let [new-interactions (cti/update-interaction interactions 1 #(cti/set-action-type % :open-url))]
         (t/is (= (count new-interactions) 2))
-        (t/is (= (:action-type (last new-interactions)) :open-url))))
+        (t/is (= (:action-type (last new-interactions)) :open-url))))))
 
-    ))
+
+(t/deftest remap-interactions
+  (let [frame1 (cpi/make-minimal-shape :frame)
+        frame2 (cpi/make-minimal-shape :frame)
+        frame3 (cpi/make-minimal-shape :frame)
+        frame4 (cpi/make-minimal-shape :frame)
+        frame5 (cpi/make-minimal-shape :frame)
+        frame6 (cpi/make-minimal-shape :frame)
+
+        objects {(:id frame3) frame3
+                 (:id frame4) frame4
+                 (:id frame5) frame5}
+
+        ids-map {(:id frame1) (:id frame4)
+                 (:id frame2) (:id frame5)}
+
+        i1 (cti/set-destination cti/default-interaction (:id frame1))
+        i2 (cti/set-destination cti/default-interaction (:id frame2))
+        i3 (cti/set-destination cti/default-interaction (:id frame3))
+        i4 (cti/set-destination cti/default-interaction nil)
+        i5 (cti/set-destination cti/default-interaction (:id frame6))
+
+        interactions [i1 i2 i3 i4 i5]]
+
+    (t/testing "Remap interactions"
+      (let [new-interactions (cti/remap-interactions interactions ids-map objects)]
+        (t/is (= (count new-interactions) 4))
+        (t/is (= (:id frame4) (:destination (get new-interactions 0))))
+        (t/is (= (:id frame5) (:destination (get new-interactions 1))))
+        (t/is (= (:id frame3) (:destination (get new-interactions 2))))
+        (t/is (nil? (:destination (get new-interactions 3))))))))