From aaf8d2a23303866e21597202e4cab3b664bd4878 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Moya?= <andres.moya@kaleidos.net>
Date: Mon, 10 Jan 2022 14:40:12 +0100
Subject: [PATCH] :bug: Correct animations overflow

---
 CHANGES.md                                    |   1 +
 .../styles/main/partials/viewer.scss          |   5 +
 frontend/src/app/main/ui/viewer.cljs          | 114 +++++++++---------
 3 files changed, 64 insertions(+), 56 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 3f41e504e..3c04cfdb5 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -42,6 +42,7 @@
 - Fix decimal numbers in export viewbox [Taiga #2290](https://tree.taiga.io/project/penpot/issue/2290)
 
 ### :arrow_up: Deps updates
+
 ### :heart: Community contributions by (Thank you!)
 
 - Spelling fixes (by @jsoref) [#1340](https://github.com/penpot/penpot/pull/1340).
diff --git a/frontend/resources/styles/main/partials/viewer.scss b/frontend/resources/styles/main/partials/viewer.scss
index 0c496877b..c9ef5bab5 100644
--- a/frontend/resources/styles/main/partials/viewer.scss
+++ b/frontend/resources/styles/main/partials/viewer.scss
@@ -20,11 +20,16 @@
   overflow: auto;
 
   & .viewer-wrapper {
+    position: relative;
+  }
+
+  & .viewer-clipper {
     display: grid;
     grid-template-rows: 1fr;
     grid-template-columns: 1fr;
     justify-items: center;
     align-items: center;
+    overflow: hidden;
 
     .empty-state {
       justify-content: center;
diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs
index 429085899..752c06262 100644
--- a/frontend/src/app/main/ui/viewer.cljs
+++ b/frontend/src/app/main/ui/viewer.cljs
@@ -231,76 +231,78 @@
              {:style {:width (:width wrapper-size)
                       :height (:height wrapper-size)}}
 
-             (when orig-frame
+             [:div.viewer-clipper
+              [:*
+               (when orig-frame
+                 [:div.viewport-container
+                  {:ref orig-viewport-ref
+                   :style {:width (:width orig-size)
+                           :height (:height orig-size)
+                           :position "relative"}}
+
+                  [:& 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}]])
+
                [:div.viewport-container
-                {:ref orig-viewport-ref
-                 :style {:width (:width orig-size)
-                         :height (:height orig-size)
+                {:ref current-viewport-ref
+                 :style {:width (:width size)
+                         :height (:height size)
                          :position "relative"}}
 
                 [:& interactions/viewport
-                 {:frame orig-frame
-                  :base-frame orig-frame
+                 {:frame frame
+                  :base-frame frame
                   :frame-offset (gpt/point 0 0)
-                  :size orig-size
+                  :size size
                   :page page
                   :file file
                   :users users
-                  :interactions-mode :hide}]])
+                  :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}]]]))]]
 
-             [: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}]]]))]]]))]]]))
+                                    :zoom zoom}])]]]))]]]))
 
 ;; --- Component: Viewer Page