diff --git a/CHANGES.md b/CHANGES.md index 3189658d0..8a3db46c3 100644 --- a/CHANGES.md +++ b/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: diff --git a/backend/src/app/rpc/commands/fonts.clj b/backend/src/app/rpc/commands/fonts.clj index 67be5f526..6df517e63 100644 --- a/backend/src/app/rpc/commands/fonts.clj +++ b/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] diff --git a/common/src/app/common/pages/helpers.cljc b/common/src/app/common/pages/helpers.cljc index a6ad3bfea..63273414b 100644 --- a/common/src/app/common/pages/helpers.cljc +++ b/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)] diff --git a/frontend/resources/polyfills/scrollIntoViewIfNeeded.js b/frontend/resources/polyfills/scrollIntoViewIfNeeded.js index 16763f504..9460fd2fb 100644 --- a/frontend/resources/polyfills/scrollIntoViewIfNeeded.js +++ b/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); }; } })() diff --git a/frontend/src/app/main/data/comments.cljs b/frontend/src/app/main/data/comments.cljs index aced66cdc..637edce3b 100644 --- a/frontend/src/app/main/data/comments.cljs +++ b/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 diff --git a/frontend/src/app/main/data/workspace/grid_layout/editor.cljs b/frontend/src/app/main/data/workspace/grid_layout/editor.cljs index 7cd464a05..6f9bf9a8e 100644 --- a/frontend/src/app/main/data/workspace/grid_layout/editor.cljs +++ b/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)))) diff --git a/frontend/src/app/main/data/workspace/interactions.cljs b/frontend/src/app/main/data/workspace/interactions.cljs index 9a141f22d..b9f080a8a 100644 --- a/frontend/src/app/main/data/workspace/interactions.cljs +++ b/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 diff --git a/frontend/src/app/main/data/workspace/selection.cljs b/frontend/src/app/main/data/workspace/selection.cljs index 3b5c50bc2..3ac7ffecb 100644 --- a/frontend/src/app/main/data/workspace/selection.cljs +++ b/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))]