From 658e3b7aeeb53d4ca50e25c1df238697fa3a50d2 Mon Sep 17 00:00:00 2001 From: Pablo Alba Date: Thu, 21 Apr 2022 13:20:06 +0200 Subject: [PATCH] :bug: Fix mouse leave in handoff close overlay animation breaks --- CHANGES.md | 1 + .../src/app/main/ui/viewer/interactions.cljs | 154 +++++++++--------- 2 files changed, 79 insertions(+), 76 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 1b31faff4..59271cfbd 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -46,6 +46,7 @@ ### :bug: Bugs fixed - Fix internal error when hoverin over shape [Taiga #3237](https://tree.taiga.io/project/penpot/issue/3237) +- Fix mouse leave in handoff close overlay animation breaks [Taiga #3173](https://tree.taiga.io/project/penpot/issue/3173) - Fix different behaviour during image drag [Taiga #2279](https://tree.taiga.io/project/penpot/issue/2279) - Fix hidden file name on import [Taiga #3172](https://tree.taiga.io/project/penpot/issue/3172) - Fix unneccessary scrollbars at the color list [Taiga #3211](https://tree.taiga.io/project/penpot/issue/3211) diff --git a/frontend/src/app/main/ui/viewer/interactions.cljs b/frontend/src/app/main/ui/viewer/interactions.cljs index 449e47aa9..c7a8a7ce3 100644 --- a/frontend/src/app/main/ui/viewer/interactions.cljs +++ b/frontend/src/app/main/ui/viewer/interactions.cljs @@ -406,101 +406,103 @@ (defn animate-open-overlay [animation overlay-viewport wrapper-size overlay-size overlay-position] - (case (:animation-type animation) + (when (some? overlay-viewport) + (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 + :dissolve (dom/animate! overlay-viewport - [#js {:left (str "-" (:width overlay-size) "px")} - #js {:left (str (:x overlay-position) "px")}] + [#js {:opacity "0"} + #js {:opacity "100"}] #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))) + :slide + (case (:direction animation) ;; way and offset-effect are ignored - :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))) + :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))) - :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)))))) + :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) + (when (some? overlay-viewport) + (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 + :dissolve (dom/animate! overlay-viewport - [#js {:left (str (:x overlay-position) "px")} - #js {:left (str (:width wrapper-size) "px")}] + [#js {:opacity "100"} + #js {:opacity "0"}] #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))) + :slide + (case (:direction animation) ;; way and offset-effect are ignored - :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))) + :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))) - :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)))))) + :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)))))))