Merge pull request #3062 from penpot/alotor-bugfixes-6

Bugfixes

CHANGES.md

@@ -32,6 +32,8 @@
 - Fix problem with board titles misplaced [Taiga #4738](https://tree.taiga.io/project/penpot/issue/4738)
 - Fix problem with alt getting stuck when alt+tab [Taiga #5013](https://tree.taiga.io/project/penpot/issue/5013)
 - Fix problem with z positioning of elements [Taiga #5014](https://tree.taiga.io/project/penpot/issue/5014)
+- Fix problem in Firefox with scroll jumping when changin pages [#3052](https://github.com/penpot/penpot/issues/3052)
+- Fix nested frame interaction created flow in wrong frame [Taiga #5043](https://tree.taiga.io/project/penpot/issue/5043)
 
 ### :heart: Community contributions by (Thank you!)
 - To @ondrejkonec: for contributing to the code with:

backend/src/app/rpc/commands/fonts.clj

@@ -15,7 +15,7 @@
    [app.loggers.webhooks :as-alias webhooks]
    [app.media :as media]
    [app.rpc :as-alias rpc]
-   [app.rpc.climit :as-alias climit]
+   [app.rpc.climit :as climit]
    [app.rpc.commands.files :as files]
    [app.rpc.commands.projects :as projects]
    [app.rpc.commands.teams :as teams]

common/src/app/common/pages/helpers.cljc

@@ -171,6 +171,25 @@
               (get objects)
               (get-frame objects)))))
 
+(defn get-root-frame
+  [objects shape-id]
+
+  (let [frame-id
+        (if (frame-shape? objects shape-id)
+          shape-id
+          (dm/get-in objects [shape-id :frame-id]))
+
+        frame (get objects frame-id)]
+    (cond
+      (or (root? frame) (nil? frame))
+      nil
+
+      (root-frame? frame)
+      frame
+
+      :else
+      (get-root-frame objects (:frame-id frame)))))
+
 (defn valid-frame-target?
   [objects parent-id shape-id]
   (let [shape (get objects shape-id)]

frontend/resources/polyfills/scrollIntoViewIfNeeded.js

@@ -1,29 +1,46 @@
+/*
+  MIT License
+
+Copyright (c) 2021 Tobias Buschor
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+// Polyfill for `scrollIntoViewIfNeeded` function not existing in Firefox.
+// https://github.com/nuxodin/lazyfill
+
+
 ;(function() {
   if (!Element.prototype.scrollIntoViewIfNeeded) {
-    Element.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded) {
-      centerIfNeeded = arguments.length === 0 ? true : !!centerIfNeeded;
-
-      var parent = this.parentNode;
-      if (parent) {
-        var parentComputedStyle = window.getComputedStyle(parent, null),
-          parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width')),
-          parentBorderLeftWidth = parseInt(parentComputedStyle.getPropertyValue('border-left-width')),
-          overTop = this.offsetTop - parent.offsetTop < parent.scrollTop,
-          overBottom = (this.offsetTop - parent.offsetTop + this.clientHeight - parentBorderTopWidth) > (parent.scrollTop + parent.clientHeight),
-          overLeft = this.offsetLeft - parent.offsetLeft < parent.scrollLeft,
-          overRight = (this.offsetLeft - parent.offsetLeft + this.clientWidth - parentBorderLeftWidth) > (parent.scrollLeft + parent.clientWidth),
-          alignWithTop = overTop && !overBottom;
-
-        if ((overTop || overBottom) && centerIfNeeded) {
-          parent.scrollTop = this.offsetTop - parent.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + this.clientHeight / 2;
+    Element.prototype.scrollIntoViewIfNeeded = function ( centerIfNeeded = true ) {
+      const el = this;
+      new IntersectionObserver( function( [entry] ) {
+        const ratio = entry.intersectionRatio;
+        if (ratio < 1) {
+          let place = ratio <= 0 && centerIfNeeded ? 'center' : 'nearest';
+          el.scrollIntoView( {
+            block: place,
+            inline: place,
+          } );
         }
-        if ((overLeft || overRight) && centerIfNeeded) {
-          parent.scrollLeft = this.offsetLeft - parent.offsetLeft - parent.clientWidth / 2 - parentBorderLeftWidth + this.clientWidth / 2;
-        }
-        if ((overTop || overBottom || overLeft || overRight) && !centerIfNeeded) {
-          this.scrollIntoView(alignWithTop);
-        }
-      }
+        this.disconnect();
+      } ).observe(this);
     };
   }
 })()

frontend/src/app/main/data/comments.cljs

@@ -105,7 +105,7 @@
 (defn created-thread-on-viewer
   [{:keys [id comment page-id] :as thread}]
 
-  (ptk/reify ::created-thread-on-workspace
+  (ptk/reify ::created-thread-on-viewer
     ptk/UpdateEvent
     (update [_ state]
       (-> state

frontend/src/app/main/data/workspace/grid_layout/editor.cljs

@@ -24,14 +24,14 @@
 
 (defn select-grid-cell
   [grid-id row column]
-  (ptk/reify ::hover-grid-cell
+  (ptk/reify ::select-grid-cell
     ptk/UpdateEvent
     (update [_ state]
       (assoc-in state [:workspace-grid-edition grid-id :selected] [row column]))))
 
 (defn remove-selection
   [grid-id]
-  (ptk/reify ::hover-grid-cell
+  (ptk/reify ::remove-selection
     ptk/UpdateEvent
     (update [_ state]
       (update-in state [:workspace-grid-edition grid-id] dissoc :selected))))

frontend/src/app/main/data/workspace/interactions.cljs

@@ -112,7 +112,7 @@
      (watch [_ state _]
        (let [page-id  (:current-page-id state)
              objects  (wsh/lookup-page-objects state page-id)
-             frame    (cph/get-frame objects shape)
+             frame    (cph/get-root-frame objects (:id shape))
              flows    (get-in state [:workspace-data
                                      :pages-index
                                      page-id

frontend/src/app/main/data/workspace/selection.cljs

@@ -140,22 +140,14 @@
       (update-in state [:workspace-local :selected] disj id))))
 
 (defn shift-select-shapes
+  ([id]
+   (shift-select-shapes id nil))
+
   ([id objects]
    (ptk/reify ::shift-select-shapes
      ptk/UpdateEvent
      (update [_ state]
-       (let [selection (-> state
-                           wsh/lookup-selected
-                           (conj id))]
-         (-> state
-             (assoc-in [:workspace-local :selected]
-                       (cph/expand-region-selection objects selection)))))))
-  ([id]
-   (ptk/reify ::shift-select-shapes
-     ptk/UpdateEvent
-     (update [_ state]
-       (let [page-id (:current-page-id state)
-             objects (wsh/lookup-page-objects state page-id)
+       (let [objects (or objects (wsh/lookup-page-objects state))
              selection (-> state
                            wsh/lookup-selected
                            (conj id))]