Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-04 19:11:20 -05:00
Code Issues Activity

🎉 Add animations to interactions

Browse source
This commit is contained in:
Andrés Moya 2021-10-29 10:43:53 +02:00 • committed by Andrey Antukh
parent 24062beebe
commit 81cbc33dbb
24 changed files with 1479 additions and 160 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

@ -6,6 +6,7 @@
### :sparkles: New features
- Add contrast between component select color and shape select color [Taiga #2121](https://tree.taiga.io/project/penpot/issue/2121).
- Add animations in interactions [Taiga #2244](https://tree.taiga.io/project/penpot/us/2244).
### :bug: Bugs fixed

235
common/src/app/common/types/interactions.cljc
View file

@ -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

282
common/test/app/common/types_interactions_test.cljc
View file

@ -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))))))))

3
frontend/resources/images/icons/animate-down.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="3961.301 2205.5 13.399 13">
<path d="m3974.7 2211.993-.951-1.015-4.989 4.911-.016-10.389h-1.46l-.017 10.39-4.988-4.912-.978.977 6.712 6.545 6.686-6.507Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 214 B

3
frontend/resources/images/icons/animate-left.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="4017.5 2205.301 13 13.399">
<path d="m4024.007 2218.7 1.015-.951-4.911-4.989 10.389-.016v-1.46l-10.39-.017 4.912-4.988-.977-.978-6.545 6.712 6.507 6.686Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 215 B

3
frontend/resources/images/icons/animate-right.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="3905.5 2205.301 13 13.399">
<path d="m3911.993 2205.3-1.015.951 4.911 4.989-10.389.016v1.46l10.39.017-4.912 4.988.977.978 6.545-6.712-6.507-6.686Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 208 B

3
frontend/resources/images/icons/animate-up.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="4073.301 2205.5 13.399 13">
<path d="m4073.3 2212.007.951 1.015 4.989-4.911.016 10.389h1.46l.017-10.39 4.988 4.912.978-.977-6.712-6.545-6.686 6.507Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 210 B

3
frontend/resources/images/icons/easing-ease-in-out.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0.487 -0.209 15.59 16.314">
<path fill-rule="evenodd" d="M5.615 13.526c-1.294 1.5-2.922 2.579-5.128 2.579V14.85c1.692 0 2.987-.803 4.13-2.128 1.16-1.344 2.1-3.155 3.084-5.055l.022-.041c.958-1.852 1.96-3.789 3.227-5.256 1.294-1.5 2.922-2.58 5.127-2.58v1.256c-1.692 0-2.987.803-4.129 2.127-1.16 1.345-2.101 3.155-3.085 5.055l-.021.042c-.959 1.852-1.961 3.788-3.227 5.256Z" clip-rule="evenodd"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 451 B

3
frontend/resources/images/icons/easing-ease-in.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0.227 16.172 16.451">
<path fill-rule="evenodd" d="M6.84 14.112C4.86 15.628 2.563 16.678 0 16.678v-1.297c2.194 0 4.22-.896 6.051-2.299C7.885 11.678 9.49 9.79 10.82 7.876c1.327-1.912 2.365-3.827 3.072-5.267A40.19 40.19 0 0 0 14.897.39c.022-.055.04-.097.05-.125l.013-.03.002-.008.001-.001.605.235.604.235v.001L16.17.7l-.003.01-.015.036-.054.135c-.049.118-.12.29-.214.506a41.486 41.486 0 0 1-.829 1.792 42.597 42.597 0 0 1-3.17 5.436c-1.374 1.977-3.067 3.981-5.045 5.496Z" clip-rule="evenodd"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 552 B

3
frontend/resources/images/icons/easing-ease-out.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0.089 -0.027 15.679 16.027">
<path fill-rule="evenodd" d="m1.216 16-.564-.282-.563-.282.002-.003.004-.009.018-.034.066-.13a55.226 55.226 0 0 1 1.228-2.22 55.64 55.64 0 0 1 3.465-5.257c1.433-1.911 3.123-3.847 4.952-5.31 1.82-1.456 3.848-2.5 5.944-2.5v1.26c-1.683 0-3.435.846-5.157 2.224C8.897 4.827 7.28 6.67 5.88 8.539a54.391 54.391 0 0 0-3.385 5.135 53.973 53.973 0 0 0-1.197 2.164L1.216 16Z" clip-rule="evenodd"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 474 B

3
frontend/resources/images/icons/easing-ease.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.115 0.308 15.287 16.37">
<path fill-rule="evenodd" d="M3.811 13.248c-.694 1.584-1.717 2.941-3.61 3.43l-.316-1.22c1.363-.352 2.153-1.306 2.772-2.717.311-.71.568-1.512.83-2.381.05-.162.099-.327.148-.494a47.12 47.12 0 0 1 .699-2.203C4.978 5.837 5.88 3.976 7.559 2.58 9.25 1.177 11.65.308 15.172.308v1.26c-3.308 0-5.398.813-6.807 1.983-1.42 1.18-2.226 2.786-2.842 4.531a45.01 45.01 0 0 0-.676 2.133l-.153.51c-.263.87-.538 1.736-.883 2.523Z" clip-rule="evenodd"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 520 B

3
frontend/resources/images/icons/easing-linear.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.051 16.051">
<path d="M16.051.893.893 16.051 0 15.158 15.158 0l.893.893"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 140 B

1
frontend/resources/styles/common/framework.scss
View file

@ -597,6 +597,7 @@ input.element-name {
label{
cursor: pointer;
display: flex;
align-items: center;
margin-right: 15px;
font-size: $fs12;

57
frontend/resources/styles/main/partials/sidebar-interactions.scss
View file

@ -80,6 +80,63 @@
}
}
.interactions-way-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
& .input-radio {
margin-bottom: 0;
& label {
color: $color-gray-20;
&:before {
background-color: unset;
}
}
& input[type=radio]:checked {
& + label {
&:before {
background-color: $color-primary;
box-shadow: inset 0 0 0 5px $color-gray-50;
}
}
}
}
}
.interactions-direction-buttons {
margin-top: $size-2;
padding-top: $size-2;
padding-bottom: $size-2;
justify-content: space-around;
.element-set-actions-button {
min-width: 40px;
min-height: 13px;
}
svg {
height: 13px;
width: 13px;
}
}
.interactions-easing-icon {
display: flex;
justify-content: center;
align-items: center;
min-width: 30px;
min-height: 30px;
& svg {
width: 12px;
height: 12px;
stroke: $color-gray-20;
}
}
.flow-element {
display: flex;
align-items: center;

30
frontend/resources/styles/main/partials/viewer.scss
View file

@ -12,19 +12,33 @@
grid-row: 1 / span 2;
grid-column: 1 / span 1;
overflow: auto;
display: flex;
justify-content: center;
align-items: center;
flex-flow: wrap;
.empty-state {
justify-content: center;
align-items: center;
}
overflow: auto;
svg {
transform-origin: center;
& .viewer-wrapper {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
justify-items: center;
align-items: center;
overflow: hidden;
.empty-state {
justify-content: center;
align-items: center;
}
svg {
transform-origin: center;
}
}
}
.viewport-container {
grid-column: 1 / 1;
grid-row: 1 / 1;
}

129
frontend/src/app/main/data/viewer.cljs
View file

@ -9,6 +9,7 @@
[app.common.data :as d]
[app.common.pages :as cp]
[app.common.spec :as us]
[app.common.types.interactions :as cti]
[app.common.uuid :as uuid]
[app.main.constants :as c]
[app.main.data.comments :as dcm]
@ -316,6 +317,12 @@
(update [_ state]
(d/dissoc-in state [:viewer-local :nav-scroll]))))
(defn complete-animation
[]
(ptk/reify ::complete-animation
ptk/UpdateEvent
(update [_ state]
(d/dissoc-in state [:viewer-local :current-animation]))))
;; --- Navigation inside page
@ -335,23 +342,38 @@
(rx/of (rt/nav screen pparams (assoc qparams :index index)))))))
(defn go-to-frame
[frame-id]
(us/verify ::us/uuid frame-id)
(ptk/reify ::go-to-frame
ptk/UpdateEvent
(update [_ state]
(assoc-in state [:viewer-local :overlays] []))
([frame-id] (go-to-frame frame-id nil))
([frame-id animation]
(us/verify ::us/uuid frame-id)
(us/verify (s/nilable ::cti/animation) animation)
(ptk/reify ::go-to-frame
ptk/UpdateEvent
(update [_ state]
(let [route (:route state)
qparams (:query-params route)
page-id (:page-id qparams)
index (:index qparams)
frames (get-in state [:viewer :pages page-id :frames])
frame (get frames index)]
(cond-> state
:always
(assoc-in [:viewer-local :overlays] [])
ptk/WatchEvent
(watch [_ state _]
(let [route (:route state)
qparams (:query-params route)
page-id (:page-id qparams)
(some? animation)
(assoc-in [:viewer-local :current-animation]
{:kind :go-to-frame
:orig-frame-id (:id frame)
:animation animation}))))
frames (get-in state [:viewer :pages page-id :frames])
index (d/index-of-pred frames #(= (:id %) frame-id))]
(when index
(rx/of (go-to-frame-by-index index)))))))
ptk/WatchEvent
(watch [_ state _]
(let [route (:route state)
qparams (:query-params route)
page-id (:page-id qparams)
frames (get-in state [:viewer :pages page-id :frames])
index (d/index-of-pred frames #(= (:id %) frame-id))]
(when index
(rx/of (go-to-frame-by-index index))))))))
(defn go-to-frame-auto
[]
@ -383,12 +405,39 @@
;; --- Overlays
(defn- do-open-overlay
[state frame position close-click-outside background-overlay animation]
(cond-> state
:always
(update-in [:viewer-local :overlays] conj
{:frame frame
:position position
:close-click-outside close-click-outside
:background-overlay background-overlay})
(some? animation)
(assoc-in [:viewer-local :current-animation]
{:kind :open-overlay
:overlay-id (:id frame)
:animation animation})))
(defn- do-close-overlay
[state frame-id animation]
(if (nil? animation)
(update-in state [:viewer-local :overlays]
(fn [overlays]
(d/removev #(= (:id (:frame %)) frame-id) overlays)))
(assoc-in state [:viewer-local :current-animation]
{:kind :close-overlay
:overlay-id frame-id
:animation animation})))
(defn open-overlay
[frame-id position close-click-outside background-overlay]
[frame-id position close-click-outside background-overlay animation]
(us/verify ::us/uuid frame-id)
(us/verify ::us/point position)
(us/verify (s/nilable ::us/boolean) close-click-outside)
(us/verify (s/nilable ::us/boolean) background-overlay)
(us/verify (s/nilable ::cti/animation) animation)
(ptk/reify ::open-overlay
ptk/UpdateEvent
(update [_ state]
@ -399,19 +448,21 @@
frame (d/seek #(= (:id %) frame-id) frames)
overlays (get-in state [:viewer-local :overlays])]
(if-not (some #(= (:frame %) frame) overlays)
(update-in state [:viewer-local :overlays] conj
{:frame frame
:position position
:close-click-outside close-click-outside
:background-overlay background-overlay})
(do-open-overlay state
frame
position
close-click-outside
background-overlay
animation)
state)))))
(defn toggle-overlay
[frame-id position close-click-outside background-overlay]
[frame-id position close-click-outside background-overlay animation]
(us/verify ::us/uuid frame-id)
(us/verify ::us/point position)
(us/verify (s/nilable ::us/boolean) close-click-outside)
(us/verify (s/nilable ::us/boolean) background-overlay)
(us/verify (s/nilable ::cti/animation) animation)
(ptk/reify ::toggle-overlay
ptk/UpdateEvent
(update [_ state]
@ -422,23 +473,27 @@
frame (d/seek #(= (:id %) frame-id) frames)
overlays (get-in state [:viewer-local :overlays])]
(if-not (some #(= (:frame %) frame) overlays)
(update-in state [:viewer-local :overlays] conj
{:frame frame
:position position
:close-click-outside close-click-outside
:background-overlay background-overlay})
(update-in state [:viewer-local :overlays]
(fn [overlays]
(d/removev #(= (:id (:frame %)) frame-id) overlays))))))))
(do-open-overlay state
frame
position
close-click-outside
background-overlay
animation)
(do-close-overlay state
(:id frame)
(cti/invert-direction animation)))))))
(defn close-overlay
[frame-id]
(ptk/reify ::close-overlay
ptk/UpdateEvent
(update [_ state]
(update-in state [:viewer-local :overlays]
(fn [overlays]
(d/removev #(= (:id (:frame %)) frame-id) overlays))))))
([frame-id] (close-overlay frame-id nil))
([frame-id animation]
(us/verify ::us/uuid frame-id)
(us/verify (s/nilable ::cti/animation) animation)
(ptk/reify ::close-overlay
ptk/UpdateEvent
(update [_ state]
(do-close-overlay state
frame-id
animation)))))
;; --- Objects selection

9
frontend/src/app/main/ui/icons.cljs
View file

@ -17,6 +17,10 @@
(def align-middle (icon-xref :align-middle))
(def align-top (icon-xref :align-top))
(def alignment (icon-xref :alignment))
(def animate-down (icon-xref :animate-down))
(def animate-left (icon-xref :animate-left))
(def animate-right (icon-xref :animate-right))
(def animate-up (icon-xref :animate-up))
(def arrow-down (icon-xref :arrow-down))
(def arrow-end (icon-xref :arrow-end))
(def arrow-slide (icon-xref :arrow-slide))
@ -42,6 +46,11 @@
(def copy (icon-xref :copy))
(def curve (icon-xref :curve))
(def download (icon-xref :download))
(def easing-linear (icon-xref :easing-linear))
(def easing-ease (icon-xref :easing-ease))
(def easing-ease-in (icon-xref :easing-ease-in))
(def easing-ease-out (icon-xref :easing-ease-out))
(def easing-ease-in-out (icon-xref :easing-ease-in-out))
(def exit (icon-xref :exit))
(def export (icon-xref :export))
(def eye (icon-xref :eye))

235
frontend/src/app/main/ui/viewer.cljs
View file

@ -6,6 +6,7 @@
(ns app.main.ui.viewer
(:require
[app.common.data :as d]
[app.common.exceptions :as ex]
[app.common.geom.point :as gpt]
[app.main.data.comments :as dcm]
@ -31,9 +32,22 @@
(defn- calculate-size
[frame zoom]
(let [{:keys [_ _ width height]} (filters/get-filters-bounds frame)]
{:width (* width zoom)
:height (* height zoom)
:vbox (str "0 0 " width " " height)}))
{:base-width width
:base-height height
:width (* width zoom)
:height (* height zoom)
:vbox (str "0 0 " width " " height)}))
(defn- calculate-wrapper
[size1 size2 zoom]
(cond
(nil? size1) size2
(nil? size2) size1
:else (let [width (max (:base-width size1) (:base-width size2))
height (max (:base-height size1) (:base-height size2))]
{:width (* width zoom)
:height (* height zoom)
:vbox (str "0 0 " width " " height)})))
(mf/defc viewer
[{:keys [params data]}]
@ -41,24 +55,41 @@
(let [{:keys [page-id section index]} params
{:keys [file users project permissions]} data
local (mf/deref refs/viewer-local)
local (mf/deref refs/viewer-local)
nav-scroll (:nav-scroll local)
orig-viewport-ref (mf/use-ref nil)
current-viewport-ref (mf/use-ref nil)
current-animation (:current-animation local)
page-id (or page-id (-> file :data :pages first))
page (mf/use-memo
(mf/deps data page-id)
(fn []
(get-in data [:pages page-id])))
page (mf/use-memo
(mf/deps data page-id)
(fn []
(get-in data [:pages page-id])))
zoom (:zoom local)
frames (:frames page)
frame (get frames index)
zoom (:zoom local)
frames (:frames page)
frame (get frames index)
size (mf/use-memo
(mf/deps frame zoom)
(fn [] (calculate-size frame zoom)))
overlays (:overlays local)
orig-frame
(when (:orig-frame-id current-animation)
(d/seek #(= (:id %) (:orig-frame-id current-animation)) frames))
size (mf/use-memo
(mf/deps frame zoom)
(fn [] (calculate-size frame zoom)))
orig-size (mf/use-memo
(mf/deps orig-frame zoom)
(fn [] (when orig-frame (calculate-size orig-frame zoom))))
wrapper-size (mf/use-memo
(mf/deps size orig-size zoom)
(fn [] (calculate-wrapper size orig-size zoom)))
interactions-mode
(:interactions-mode local)
@ -96,11 +127,67 @@
(mf/use-layout-effect
(mf/deps nav-scroll)
(fn []
;; Set scroll position after navigate
(when (number? nav-scroll)
(let [viewer-section (dom/get-element "viewer-section")]
(st/emit! (dv/reset-nav-scroll))
(dom/set-scroll-pos! viewer-section nav-scroll)))))
(mf/use-layout-effect
(mf/deps index)
(fn []
;; Navigate animation needs to be started after navigation
;; is complete, and we have the next page index.
(when (and current-animation
(= (:kind current-animation) :go-to-frame))
(let [orig-viewport (mf/ref-val orig-viewport-ref)
current-viewport (mf/ref-val current-viewport-ref)]
(interactions/animate-go-to-frame
(:animation current-animation)
current-viewport
orig-viewport
size
orig-size
wrapper-size)))))
(mf/use-layout-effect
(mf/deps current-animation)
(fn []
;; Overlay animations may be started when needed.
(when current-animation
(case (:kind current-animation)
:open-overlay
(let [overlay-viewport (dom/get-element (str "overlay-" (str (:overlay-id current-animation))))
overlay (d/seek #(= (:id (:frame %)) (:overlay-id current-animation))
overlays)
overlay-size (calculate-size (:frame overlay) zoom)
overlay-position {:x (* (:x (:position overlay)) zoom)
:y (* (:y (:position overlay)) zoom)}]
(interactions/animate-open-overlay
(:animation current-animation)
overlay-viewport
wrapper-size
overlay-size
overlay-position))
:close-overlay
(let [overlay-viewport (dom/get-element (str "overlay-" (str (:overlay-id current-animation))))
overlay (d/seek #(= (:id (:frame %)) (:overlay-id current-animation))
overlays)
overlay-size (calculate-size (:frame overlay) zoom)
overlay-position {:x (* (:x (:position overlay)) zoom)
:y (* (:y (:position overlay)) zoom)}]
(interactions/animate-close-overlay
(:animation current-animation)
overlay-viewport
wrapper-size
overlay-size
overlay-position
(:id (:frame overlay))))
nil))))
[:div {:class (dom/classnames
:force-visible (:show-thumbnails local)
:viewer-layout (not= section :handoff)
@ -139,57 +226,81 @@
:section section
:local local}]
[:div.viewport-container
{:style {:width (:width size)
:height (:height size)
:position "relative"}}
[:*
[:div.viewer-wrapper
{:style {:width (:width wrapper-size)
:height (:height wrapper-size)}}
(when (= section :comments)
[:& comments-layer {:file file
:users users
:frame frame
:page page
:zoom zoom}])
(when orig-frame
[:div.viewport-container
{:ref orig-viewport-ref
:style {:width (:width orig-size)
:height (:height orig-size)
:position "relative"}}
[:& interactions/viewport
{:frame frame
:base-frame frame
:frame-offset (gpt/point 0 0)
:size size
:page page
:file file
:users users
:interactions-mode interactions-mode}]
[:& interactions/viewport
{:frame orig-frame
:base-frame orig-frame
:frame-offset (gpt/point 0 0)
:size orig-size
:page page
:file file
:users users
:interactions-mode :hide}]])
(for [overlay (:overlays local)]
(let [size-over (calculate-size (:frame overlay) zoom)]
[:*
(when (or (:close-click-outside overlay)
(:background-overlay overlay))
[:div.viewer-overlay-background
{:class (dom/classnames
:visible (:background-overlay overlay))
:style {:width (:width frame)
:height (:height frame)
:position "absolute"
:left 0
:top 0}
:on-click #(when (:close-click-outside overlay)
(close-overlay (:frame overlay)))}])
[:div.viewport-container.viewer-overlay
{:style {:width (:width size-over)
:height (:height size-over)
:left (* (:x (:position overlay)) zoom)
:top (* (:y (:position overlay)) zoom)}}
[:& interactions/viewport
{:frame (:frame overlay)
:base-frame frame
:frame-offset (:position overlay)
:size size-over
:page page
:file file
:users users
:interactions-mode interactions-mode}]]]))]))]]]))
[:div.viewport-container
{:ref current-viewport-ref
:style {:width (:width size)
:height (:height size)
:position "relative"}
}
(when (= section :comments)
[:& comments-layer {:file file
:users users
:frame frame
:page page
:zoom zoom}])
[:& interactions/viewport
{:frame frame
:base-frame frame
:frame-offset (gpt/point 0 0)
:size size
:page page
:file file
:users users
:interactions-mode interactions-mode}]
(for [overlay overlays]
(let [size-over (calculate-size (:frame overlay) zoom)]
[:*
(when (or (:close-click-outside overlay)
(:background-overlay overlay))
[:div.viewer-overlay-background
{:class (dom/classnames
:visible (:background-overlay overlay))
:style {:width (:width wrapper-size)
:height (:height wrapper-size)
:position "absolute"
:left 0
:top 0}
:on-click #(when (:close-click-outside overlay)
(close-overlay (:frame overlay)))}])
[:div.viewport-container.viewer-overlay
{:id (str "overlay-" (str (:id (:frame overlay))))
:style {:width (:width size-over)
:height (:height size-over)
:left (* (:x (:position overlay)) zoom)
:top (* (:y (:position overlay)) zoom)}}
[:& interactions/viewport
{:frame (:frame overlay)
:base-frame frame
:frame-offset (:position overlay)
:size size-over
:page page
:file file
:users users
:interactions-mode interactions-mode}]]]))]]]))]]]))
;; --- Component: Viewer Page

335
frontend/src/app/main/ui/viewer/interactions.cljs
View file

@ -169,3 +169,338 @@
[:span.icon i/tick]
[:span.label (tr "viewer.header.show-interactions-on-click")]]]]]))
(defn animate-go-to-frame
[animation current-viewport orig-viewport current-size orig-size wrapper-size]
(case (:animation-type animation)
:dissolve
(do (dom/animate! orig-viewport
[#js {:opacity "100"}
#js {:opacity "0"}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)))
(dom/animate! current-viewport
[#js {:opacity "0"}
#js {:opacity "100"}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}))
:slide
(case (:way animation)
:in
(case (:direction animation)
:right
(let [offset (+ (:width current-size)
(/ (- (:width wrapper-size) (:width current-size)) 2))]
(dom/animate! current-viewport
[#js {:left (str "-" offset "px")}
#js {:left "0"}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)))
(when (:offset-effect animation)
(dom/animate! orig-viewport
[#js {:left "0"
:opacity "100%"}
#js {:left (str (* offset 0.2) "px")
:opacity "0"}]
#js {:duration (:duration animation)
:easing (name (:easing animation))})))
:left
(let [offset (+ (:width current-size)
(/ (- (:width wrapper-size) (:width current-size)) 2))]
(dom/animate! current-viewport
[#js {:right (str "-" offset "px")}
#js {:right "0"}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)))
(when (:offset-effect animation)
(dom/animate! orig-viewport
[#js {:right "0"
:opacity "100%"}
#js {:right (str (* offset 0.2) "px")
:opacity "0"}]
#js {:duration (:duration animation)
:easing (name (:easing animation))})))
:up
(let [offset (+ (:height current-size)
(/ (- (:height wrapper-size) (:height current-size)) 2))]
(dom/animate! current-viewport
[#js {:bottom (str "-" offset "px")}
#js {:bottom "0"}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)))
(when (:offset-effect animation)
(dom/animate! orig-viewport
[#js {:bottom "0"
:opacity "100%"}
#js {:bottom (str (* offset 0.2) "px")
:opacity "0"}]
#js {:duration (:duration animation)
:easing (name (:easing animation))})))
:down
(let [offset (+ (:height current-size)
(/ (- (:height wrapper-size) (:height current-size)) 2))]
(dom/animate! current-viewport
[#js {:top (str "-" offset "px")}
#js {:top "0"}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)))
(when (:offset-effect animation)
(dom/animate! orig-viewport
[#js {:top "0"
:opacity "100%"}
#js {:top (str (* offset 0.2) "px")
:opacity "0"}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}))))
:out
(case (:direction animation)
:right
(let [offset (+ (:width orig-size)
(/ (- (:width wrapper-size) (:width orig-size)) 2))]
(dom/set-css-property! orig-viewport "z-index" 10000)
(dom/animate! orig-viewport
[#js {:right "0"}
#js {:right (str "-" offset "px")}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)))
(when (:offset-effect animation)
(dom/animate! current-viewport
[#js {:right (str (* offset 0.2) "px")
:opacity "0"}
#js {:right "0"
:opacity "100%"}]
#js {:duration (:duration animation)
:easing (name (:easing animation))})))
:left
(let [offset (+ (:width orig-size)
(/ (- (:width wrapper-size) (:width orig-size)) 2))]
(dom/set-css-property! orig-viewport "z-index" 10000)
(dom/animate! orig-viewport
[#js {:left "0"}
#js {:left (str "-" offset "px")}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)))
(when (:offset-effect animation)
(dom/animate! current-viewport
[#js {:left (str (* offset 0.2) "px")
:opacity "0"}
#js {:left "0"
:opacity "100%"}]
#js {:duration (:duration animation)
:easing (name (:easing animation))})))
:up
(let [offset (+ (:height orig-size)
(/ (- (:height wrapper-size) (:height orig-size)) 2))]
(dom/set-css-property! orig-viewport "z-index" 10000)
(dom/animate! orig-viewport
[#js {:top "0"}
#js {:top (str "-" offset "px")}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)))
(when (:offset-effect animation)
(dom/animate! current-viewport
[#js {:top (str (* offset 0.2) "px")
:opacity "0"}
#js {:top "0"
:opacity "100%"}]
#js {:duration (:duration animation)
:easing (name (:easing animation))})))
:down
(let [offset (+ (:height orig-size)
(/ (- (:height wrapper-size) (:height orig-size)) 2))]
(dom/set-css-property! orig-viewport "z-index" 10000)
(dom/animate! orig-viewport
[#js {:bottom "0"}
#js {:bottom (str "-" offset "px")}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)))
(when (:offset-effect animation)
(dom/animate! current-viewport
[#js {:bottom (str (* offset 0.2) "px")
:opacity "0"}
#js {:bottom "0"
:opacity "100%"}]
#js {:duration (:duration animation)
:easing (name (:easing animation))})))))
:push
(case (:direction animation)
:right
(let [offset (:width wrapper-size)]
(dom/animate! current-viewport
[#js {:left (str "-" offset "px")}
#js {:left "0"}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)))
(dom/animate! orig-viewport
[#js {:left "0"}
#js {:left (str offset "px")}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}))
:left
(let [offset (:width wrapper-size)]
(dom/animate! current-viewport
[#js {:right (str "-" offset "px")}
#js {:right "0"}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)))
(dom/animate! orig-viewport
[#js {:right "0"}
#js {:right (str offset "px")}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}))
:up
(let [offset (:height wrapper-size)]
(dom/animate! current-viewport
[#js {:bottom (str "-" offset "px")}
#js {:bottom "0"}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)))
(dom/animate! orig-viewport
[#js {:bottom "0"}
#js {:bottom (str offset "px")}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}))
:down
(let [offset (:height wrapper-size)]
(dom/animate! current-viewport
[#js {:top (str "-" offset "px")}
#js {:top "0"}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)))
(dom/animate! orig-viewport
[#js {:top "0"}
#js {:top (str offset "px")}]
#js {:duration (:duration animation)
:easing (name (:easing animation))})))))
(defn animate-open-overlay
[animation overlay-viewport
wrapper-size overlay-size overlay-position]
(case (:animation-type animation)
:dissolve
(dom/animate! overlay-viewport
[#js {:opacity "0"}
#js {:opacity "100"}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)))
:slide
(case (:direction animation) ;; way and offset-effect are ignored
:right
(dom/animate! overlay-viewport
[#js {:left (str "-" (:width overlay-size) "px")}
#js {:left (str (:x overlay-position) "px")}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)))
:left
(dom/animate! overlay-viewport
[#js {:left (str (:width wrapper-size) "px")}
#js {:left (str (:x overlay-position) "px")}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)))
:up
(dom/animate! overlay-viewport
[#js {:top (str (:height wrapper-size) "px")}
#js {:top (str (:y overlay-position) "px")}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)))
:down
(dom/animate! overlay-viewport
[#js {:top (str "-" (:height overlay-size) "px")}
#js {:top (str (:y overlay-position) "px")}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation))))))
(defn animate-close-overlay
[animation overlay-viewport
wrapper-size overlay-size overlay-position overlay-id]
(case (:animation-type animation)
:dissolve
(dom/animate! overlay-viewport
[#js {:opacity "100"}
#js {:opacity "0"}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)
(dv/close-overlay overlay-id)))
:slide
(case (:direction animation) ;; way and offset-effect are ignored
:right
(dom/animate! overlay-viewport
[#js {:left (str (:x overlay-position) "px")}
#js {:left (str (:width wrapper-size) "px")}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)
(dv/close-overlay overlay-id)))
:left
(dom/animate! overlay-viewport
[#js {:left (str (:x overlay-position) "px")}
#js {:left (str "-" (:width overlay-size) "px")}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)
(dv/close-overlay overlay-id)))
:up
(dom/animate! overlay-viewport
[#js {:top (str (:y overlay-position) "px")}
#js {:top (str "-" (:height overlay-size) "px")}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)
(dv/close-overlay overlay-id)))
:down
(dom/animate! overlay-viewport
[#js {:top (str (:y overlay-position) "px")}
#js {:top (str (:height wrapper-size) "px")}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)
(dv/close-overlay overlay-id))))))

30
frontend/src/app/main/ui/viewer/shapes.cljs
View file

@ -38,7 +38,7 @@
(def viewer-interactions-show?
(l/derived :interactions-show? refs/viewer-local))
(defn activate-interaction
(defn- activate-interaction
[interaction shape base-frame frame-offset objects]
(case (:action-type interaction)
:navigate
@ -48,7 +48,7 @@
(dom/get-scroll-pos viewer-section)
0)]
(st/emit! (dv/set-nav-scroll scroll)
(dv/go-to-frame frame-id))))
(dv/go-to-frame frame-id (:animation interaction)))))
:open-overlay
(let [dest-frame-id (:destination interaction)
@ -64,7 +64,8 @@
(st/emit! (dv/open-overlay dest-frame-id
position
close-click-outside
background-overlay))))
background-overlay
(:animation interaction)))))
:toggle-overlay
(let [frame-id (:destination interaction)
@ -75,14 +76,15 @@
(st/emit! (dv/toggle-overlay frame-id
position
close-click-outside
background-overlay))))
background-overlay
(:animation interaction)))))
:close-overlay
(let [frame-id (or (:destination interaction)
(if (= (:type shape) :frame)
(:id shape)
(:frame-id shape)))]
(st/emit! (dv/close-overlay frame-id)))
(st/emit! (dv/close-overlay frame-id (:animation interaction))))
:prev-screen
(st/emit! (rt/nav-back-local))
@ -93,7 +95,7 @@
nil))
;; Perform the opposite action of an interaction, if possible
(defn deactivate-interaction
(defn- deactivate-interaction
[interaction shape base-frame frame-offset objects]
(case (:action-type interaction)
:open-overlay
@ -112,7 +114,8 @@
(st/emit! (dv/toggle-overlay frame-id
position
close-click-outside
background-overlay))))
background-overlay
(:animation interaction)))))
:close-overlay
(let [dest-frame-id (:destination interaction)
@ -128,10 +131,11 @@
(st/emit! (dv/open-overlay dest-frame-id
position
close-click-outside
background-overlay))))
background-overlay
(:animation interaction)))))
nil))
(defn on-mouse-down
(defn- on-mouse-down
[event shape base-frame frame-offset objects]
(let [interactions (->> (:interactions shape)
(filter #(or (= (:event-type %) :click)
@ -141,7 +145,7 @@
(doseq [interaction interactions]
(activate-interaction interaction shape base-frame frame-offset objects)))))
(defn on-mouse-up
(defn- on-mouse-up
[event shape base-frame frame-offset objects]
(let [interactions (->> (:interactions shape)
(filter #(= (:event-type %) :mouse-press)))]
@ -150,7 +154,7 @@
(doseq [interaction interactions]
(deactivate-interaction interaction shape base-frame frame-offset objects)))))
(defn on-mouse-enter
(defn- on-mouse-enter
[event shape base-frame frame-offset objects]
(let [interactions (->> (:interactions shape)
(filter #(or (= (:event-type %) :mouse-enter)
@ -160,7 +164,7 @@
(doseq [interaction interactions]
(activate-interaction interaction shape base-frame frame-offset objects)))))
(defn on-mouse-leave
(defn- on-mouse-leave
[event shape base-frame frame-offset objects]
(let [interactions (->> (:interactions shape)
(filter #(= (:event-type %) :mouse-leave)))
@ -173,7 +177,7 @@
(doseq [interaction interactions-inv]
(deactivate-interaction interaction shape base-frame frame-offset objects)))))
(defn on-load
(defn- on-load
[shape base-frame frame-offset objects]
(let [interactions (->> (:interactions shape)
(filter #(= (:event-type %) :after-delay)))]

143
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
View file

@ -73,6 +73,23 @@
:bottom-right (tr "workspace.options.interaction-pos-bottom-right")
:bottom-center (tr "workspace.options.interaction-pos-bottom-center")})
(defn- animation-type-names
[interaction]
(cond->
{:dissolve (tr "workspace.options.interaction-animation-dissolve")
:slide (tr "workspace.options.interaction-animation-slide")}
(cti/allow-push? (:action-type interaction))
(assoc :push (tr "workspace.options.interaction-animation-push"))))
(defn- easing-names
[]
{:linear (tr "workspace.options.interaction-easing-linear")
:ease (tr "workspace.options.interaction-easing-ease")
:ease-in (tr "workspace.options.interaction-easing-ease-in")
:ease-out (tr "workspace.options.interaction-easing-ease-out")
:ease-in-out (tr "workspace.options.interaction-easing-ease-in-out")})
(def flow-for-rename-ref
(l/derived (l/in [:workspace-local :flow-for-rename]) st/state))
@ -170,10 +187,13 @@
close-click-outside? (:close-click-outside interaction false)
background-overlay? (:background-overlay interaction false)
preserve-scroll? (:preserve-scroll interaction false)
way (-> interaction :animation :way)
direction (-> interaction :animation :direction)
extended-open? (mf/use-state false)
ext-delay-ref (mf/use-ref nil)
ext-duration-ref (mf/use-ref nil)
select-text
(fn [ref] (fn [_] (dom/select-text! (mf/ref-val ref))))
@ -237,7 +257,36 @@
change-background-overlay
(fn [event]
(let [value (-> event dom/get-target dom/checked?)]
(update-interaction index #(cti/set-background-overlay % value))))]
(update-interaction index #(cti/set-background-overlay % value))))
change-animation-type
(fn [event]
(let [value (-> event dom/get-target dom/get-value d/read-string)]
(update-interaction index #(cti/set-animation-type % value))))
change-duration
(fn [value]
(update-interaction index #(cti/set-duration % value)))
change-easing
(fn [event]
(let [value (-> event dom/get-target dom/get-value d/read-string)]
(update-interaction index #(cti/set-easing % value))))
change-way
(fn [event]
(let [value (-> event dom/get-target dom/get-value d/read-string)]
(update-interaction index #(cti/set-way % value))))
change-direction
(fn [value]
(update-interaction index #(cti/set-direction % value)))
change-offset-effect
(fn [event]
(let [value (-> event dom/get-target dom/checked?)]
(update-interaction index #(cti/set-offset-effect % value))))
]
[:*
[:div.element-set-options-group {:class (dom/classnames
@ -382,7 +431,97 @@
:checked background-overlay?
:on-change change-background-overlay}]
[:label {:for (str "background-" index)}
(tr "workspace.options.interaction-background")]]]])])]]))
(tr "workspace.options.interaction-background")]]]])
; Animation select
[:div.interactions-element.separator
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-animation")]
[:select.input-select
{:value (str (-> interaction :animation :animation-type))
:on-change change-animation-type}
[:option {:value ""} (tr "workspace.options.interaction-animation-none")]
(for [[value name] (animation-type-names interaction)]
[:option {:value (str value)} name])]]
; Direction
(when (cti/has-way? interaction)
[:div.interactions-element.interactions-way-buttons
[:div.input-radio
[:input {:type "radio"
:id "way-in"
:checked (= :in way)
:name "animation-way"
:value ":in"
:on-change change-way}]
[:label {:for "way-in"} (tr "workspace.options.interaction-in")]]
[:div.input-radio
[:input {:type "radio"
:id "way-out"
:checked (= :out way)
:name "animation-way"
:value ":out"
:on-change change-way}]
[:label {:for "way-out"} (tr "workspace.options.interaction-out")]]])
; Direction
(when (cti/has-direction? interaction)
[:div.interactions-element.interactions-direction-buttons
[:div.element-set-actions-button
{:class (dom/classnames :active (= direction :right))
:on-click #(change-direction :right)}
i/animate-right]
[:div.element-set-actions-button
{:class (dom/classnames :active (= direction :down))
:on-click #(change-direction :down)}
i/animate-down]
[:div.element-set-actions-button
{:class (dom/classnames :active (= direction :left))
:on-click #(change-direction :left)}
i/animate-left]
[:div.element-set-actions-button
{:class (dom/classnames :active (= direction :up))
:on-click #(change-direction :up)}
i/animate-up]])
; Duration
(when (cti/has-duration? interaction)
[:div.interactions-element
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-duration")]
[:div.input-element {:title (tr "workspace.options.interaction-ms")}
[:> numeric-input {:ref ext-duration-ref
:on-click (select-text ext-duration-ref)
:on-change change-duration
:value (-> interaction :animation :duration)
:title (tr "workspace.options.interaction-ms")}]
[:span.after (tr "workspace.options.interaction-ms")]]])
; Easing
(when (cti/has-easing? interaction)
[:div.interactions-element
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-easing")]
[:select.input-select
{:value (str (-> interaction :animation :easing))
:on-change change-easing}
(for [[value name] (easing-names)]
[:option {:value (str value)} name])]
[:div.interactions-easing-icon
(case (-> interaction :animation :easing)
:linear i/easing-linear
:ease i/easing-ease
:ease-in i/easing-ease-in
:ease-out i/easing-ease-out
:ease-in-out i/easing-ease-in-out)]])
; Offset effect
(when (cti/has-offset-effect? interaction)
[:div.interactions-element
[:div.input-checkbox
[:input {:type "checkbox"
:id (str "offset-effect-" index)
:checked (-> interaction :animation :offset-effect)
:on-change change-offset-effect}]
[:label {:for (str "offset-effect-" index)}
(tr "workspace.options.interaction-offset-effect")]]])])]]))
(mf/defc interactions-menu
[{:keys [shape] :as props}]

7
frontend/src/app/util/dom.cljs
View file

@ -425,3 +425,10 @@
[]
(.back (.-history js/window)))
(defn animate!
([item keyframes duration] (animate! item keyframes duration nil))
([item keyframes duration onfinish]
(let [animation (.animate item keyframes duration)]
(when onfinish
(set! (.-onfinish animation) onfinish)))))

60
frontend/translations/en.po
View file

@ -2390,6 +2390,26 @@ msgstr "Action"
msgid "workspace.options.interaction-after-delay"
msgstr "After delay"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-animation"
msgstr "Animation"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-animation-none"
msgstr "None"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-animation-dissolve"
msgstr "Dissolve"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-animation-slide"
msgstr "Slide"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-animation-push"
msgstr "Push"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-background"
msgstr "Add background overlay"
@ -2414,6 +2434,42 @@ msgstr "Delay"
msgid "workspace.options.interaction-destination"
msgstr "Destination"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-duration"
msgstr "Duration"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-easing"
msgstr "Easing"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-easing-linear"
msgstr "Linear"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-easing-ease"
msgstr "Ease"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-easing-ease-in"
msgstr "Ease in"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-easing-ease-out"
msgstr "Ease out"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-easing-ease-in-out"
msgstr "Ease in out"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-in"
msgstr "In"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-offset-effect"
msgstr "Offset effect"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-mouse-enter"
msgstr "Mouse enter"
@ -2454,6 +2510,10 @@ msgstr "Open overlay: %s"
msgid "workspace.options.interaction-open-url"
msgstr "Open url"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-out"
msgstr "Out"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-pos-bottom-center"
msgstr "Bottom center"

58
frontend/translations/es.po
View file

@ -2391,6 +2391,22 @@ msgstr "Acción"
msgid "workspace.options.interaction-after-delay"
msgstr "Tiempo"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-animation"
msgstr "Animación"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-animation-dissolve"
msgstr "Disolver"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-animation-slide"
msgstr "Deslizar"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-animation-push"
msgstr "Empujar"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-background"
msgstr "Añadir sombreado de fondo"
@ -2415,6 +2431,42 @@ msgstr "Tiempo"
msgid "workspace.options.interaction-destination"
msgstr "Destino"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-duration"
msgstr "Duración"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-easing"
msgstr "Easing"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-easing-linear"
msgstr "Linear"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-easing-ease"
msgstr "Ease"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-easing-ease-in"
msgstr "Ease in"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-easing-ease-out"
msgstr "Ease out"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-easing-ease-in-out"
msgstr "Ease in out"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-in"
msgstr "Dentro"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-offset-effect"
msgstr "Offset effect"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-mouse-enter"
msgstr "Pasar encima"
@ -2455,6 +2507,10 @@ msgstr "Superposición: %s"
msgid "workspace.options.interaction-open-url"
msgstr "Abrir url"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-out"
msgstr "Fuera"
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
msgid "workspace.options.interaction-pos-bottom-center"
msgstr "Abajo centro"
@ -3248,4 +3304,4 @@ msgid "workspace.updates.update"
msgstr "Actualizar"
msgid "workspace.viewport.click-to-close-path"
msgstr "Pulsar para cerrar la ruta"
msgstr "Pulsar para cerrar la ruta"