Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-14 19:19:09 -05:00
Code Issues Activity

🐛 Fix overlay position with elements fixed when scrolling

Browse source
This commit is contained in:
Andrés Moya 2023-07-11 20:15:20 +02:00
parent 65598aa724
commit 491251f5ce
4 changed files with 48 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

@ -66,6 +66,7 @@
- Fix overlay manual position in nested boards [Taiga #5135](https://tree.taiga.io/project/penpot/issue/5135) - Fix overlay manual position in nested boards [Taiga #5135](https://tree.taiga.io/project/penpot/issue/5135)
- Fix close overlay from a nested board [Taiga #5587](https://tree.taiga.io/project/penpot/issue/5587) - Fix close overlay from a nested board [Taiga #5587](https://tree.taiga.io/project/penpot/issue/5587)
- Fix overlay position when it has shadow or blur [Taiga #4752](https://tree.taiga.io/project/penpot/issue/4752) - Fix overlay position when it has shadow or blur [Taiga #4752](https://tree.taiga.io/project/penpot/issue/4752)
- Fix overlay position when there are elements fixed when scrolling [Taiga #4383](https://tree.taiga.io/project/penpot/issue/4383)
### :arrow_up: Deps updates ### :arrow_up: Deps updates

9
common/src/app/common/types/shape/interactions.cljc
View file

@ -495,8 +495,7 @@
"expected compatible interaction map" "expected compatible interaction map"
(has-overlay-opts interaction)) (has-overlay-opts interaction))
(let [ (let [;; When the interactive item is inside a nested frame we need to add to the offset the position
;; When the interactive item is inside a nested frame we need to add to the offset the position
;; of the parent-frame otherwise the position won't match ;; of the parent-frame otherwise the position won't match
shape-frame (cph/get-frame objects shape) shape-frame (cph/get-frame objects shape)
@ -505,10 +504,10 @@
(cph/root-frame? shape-frame) (cph/root-frame? shape-frame)
(cph/root? shape-frame)) (cph/root? shape-frame))
frame-offset frame-offset
(gpt/add frame-offset (gpt/point shape-frame))) (gpt/add frame-offset (gpt/point shape-frame)))]
]
(if (nil? dest-frame) (if (nil? dest-frame)
(gpt/point 0 0) [(gpt/point 0 0) [:top :left]]
(let [overlay-size (gsb/get-object-bounds objects dest-frame) (let [overlay-size (gsb/get-object-bounds objects dest-frame)
base-frame-size (:selrect base-frame) base-frame-size (:selrect base-frame)
relative-to-shape-size (:selrect relative-to-shape) relative-to-shape-size (:selrect relative-to-shape)

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

@ -71,18 +71,24 @@
(d/index-by :id) (d/index-by :id)
(prepare-objects frame size delta))) (prepare-objects frame size delta)))
wrapper-fixed (mf/with-memo [page frame size] objects-fixed (mf/with-memo [fixed-ids page frame size delta]
(shapes/frame-container-factory (calculate-objects fixed-ids))) (calculate-objects fixed-ids))
objects-not-fixed (mf/with-memo [page frame size] objects-not-fixed (mf/with-memo [not-fixed-ids page frame size delta]
(calculate-objects not-fixed-ids)) (calculate-objects not-fixed-ids))
all-objects (mf/with-memo [objects-fixed objects-not-fixed]
(merge objects-fixed objects-not-fixed))
wrapper-fixed (mf/with-memo [page frame size]
(shapes/frame-container-factory objects-fixed all-objects))
wrapper-not-fixed (mf/with-memo [objects-not-fixed] wrapper-not-fixed (mf/with-memo [objects-not-fixed]
(shapes/frame-container-factory objects-not-fixed)) (shapes/frame-container-factory objects-not-fixed all-objects))
;; Retrieve frames again with correct modifier ;; Retrieve frames again with correct modifier
frame (get objects-not-fixed (:id frame)) frame (get all-objects (:id frame))
base (get objects-not-fixed (:id base)) base (get all-objects (:id base))
non-delay-interactions (->> (:interactions frame) non-delay-interactions (->> (:interactions frame)
(filterv #(not= (:event-type %) :after-delay))) (filterv #(not= (:event-type %) :after-delay)))

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

@ -92,7 +92,7 @@
(if (= (:type shape) :frame) ;; manual interactions are always from "self" (if (= (:type shape) :frame) ;; manual interactions are always from "self"
(:frame-id shape) (:frame-id shape)
(:id shape)) (:id shape))
(:position-relative-to interaction)) (:position-relative-to interaction))
relative-to-shape (or (get objects relative-to-id) base-frame) relative-to-shape (or (get objects relative-to-id) base-frame)
overlays-ids (set (map :id overlays)) overlays-ids (set (map :id overlays))
relative-to-base-frame (find-relative-to-base-frame relative-to-shape objects overlays-ids base-frame) relative-to-base-frame (find-relative-to-base-frame relative-to-shape objects overlays-ids base-frame)
@ -285,6 +285,7 @@
childs (unchecked-get props "childs") childs (unchecked-get props "childs")
frame (unchecked-get props "frame") frame (unchecked-get props "frame")
objects (unchecked-get props "objects") objects (unchecked-get props "objects")
all-objects (or (unchecked-get props "all-objects") objects)
base-frame (mf/use-ctx base-frame-ctx) base-frame (mf/use-ctx base-frame-ctx)
frame-offset (mf/use-ctx frame-offset-ctx) frame-offset (mf/use-ctx frame-offset-ctx)
interactions-show? (mf/deref viewer-interactions-show?) interactions-show? (mf/deref viewer-interactions-show?)
@ -293,25 +294,25 @@
svg-element? (and (= :svg-raw (:type shape)) svg-element? (and (= :svg-raw (:type shape))
(not= :svg (get-in shape [:content :tag]))) (not= :svg (get-in shape [:content :tag])))
;; _ (js/console.log "======" (:name shape)) ;; The objects parameter has the shapes that we must draw. It may be a subset of
;; _ (js/console.log "shape" (clj->js shape)) ;; all-objects in some cases (e.g. if there are fixed elements). But for interactions
;; _ (js/console.log "frame-offset" (clj->js frame-offset)) ;; handling we need access to all objects inside the page.
on-pointer-down on-pointer-down
(mf/use-fn (mf/deps shape base-frame frame-offset objects) (mf/use-fn (mf/deps shape base-frame frame-offset all-objects)
#(on-pointer-down % shape base-frame frame-offset objects overlays)) #(on-pointer-down % shape base-frame frame-offset all-objects overlays))
on-pointer-up on-pointer-up
(mf/use-fn (mf/deps shape base-frame frame-offset objects) (mf/use-fn (mf/deps shape base-frame frame-offset all-objects)
#(on-pointer-up % shape base-frame frame-offset objects overlays)) #(on-pointer-up % shape base-frame frame-offset all-objects overlays))
on-pointer-enter on-pointer-enter
(mf/use-fn (mf/deps shape base-frame frame-offset objects) (mf/use-fn (mf/deps shape base-frame frame-offset all-objects)
#(on-pointer-enter % shape base-frame frame-offset objects overlays)) #(on-pointer-enter % shape base-frame frame-offset all-objects overlays))
on-pointer-leave on-pointer-leave
(mf/use-fn (mf/deps shape base-frame frame-offset objects) (mf/use-fn (mf/deps shape base-frame frame-offset all-objects)
#(on-pointer-leave % shape base-frame frame-offset objects overlays))] #(on-pointer-leave % shape base-frame frame-offset all-objects overlays))]
(mf/with-effect [] (mf/with-effect []
(let [sems (on-load shape base-frame frame-offset objects overlays)] (let [sems (on-load shape base-frame frame-offset objects overlays)]
@ -380,8 +381,8 @@
(declare shape-container-factory) (declare shape-container-factory)
(defn frame-container-factory (defn frame-container-factory
[objects] [objects all-objects]
(let [shape-container (shape-container-factory objects) (let [shape-container (shape-container-factory objects all-objects)
frame-wrapper (frame-wrapper shape-container)] frame-wrapper (frame-wrapper shape-container)]
(mf/fnc frame-container (mf/fnc frame-container
{::mf/wrap-props false} {::mf/wrap-props false}
@ -391,13 +392,14 @@
props (obj/merge! #js {} props props (obj/merge! #js {} props
#js {:shape shape #js {:shape shape
:childs childs :childs childs
:objects objects})] :objects objects
:all-objects all-objects})]
[:> frame-wrapper props])))) [:> frame-wrapper props]))))
(defn group-container-factory (defn group-container-factory
[objects] [objects all-objects]
(let [shape-container (shape-container-factory objects) (let [shape-container (shape-container-factory objects all-objects)
group-wrapper (group-wrapper shape-container)] group-wrapper (group-wrapper shape-container)]
(mf/fnc group-container (mf/fnc group-container
{::mf/wrap-props false} {::mf/wrap-props false}
@ -410,8 +412,8 @@
[:> group-wrapper props]))))) [:> group-wrapper props])))))
(defn bool-container-factory (defn bool-container-factory
[objects] [objects all-objects]
(let [shape-container (shape-container-factory objects) (let [shape-container (shape-container-factory objects all-objects)
bool-wrapper (bool-wrapper shape-container)] bool-wrapper (bool-wrapper shape-container)]
(mf/fnc bool-container (mf/fnc bool-container
{::mf/wrap-props false} {::mf/wrap-props false}
@ -424,8 +426,8 @@
[:> bool-wrapper props])))) [:> bool-wrapper props]))))
(defn svg-raw-container-factory (defn svg-raw-container-factory
[objects] [objects all-objects]
(let [shape-container (shape-container-factory objects) (let [shape-container (shape-container-factory objects all-objects)
svg-raw-wrapper (svg-raw-wrapper shape-container)] svg-raw-wrapper (svg-raw-wrapper shape-container)]
(mf/fnc svg-raw-container (mf/fnc svg-raw-container
{::mf/wrap-props false} {::mf/wrap-props false}
@ -437,7 +439,7 @@
[:> svg-raw-wrapper props])))) [:> svg-raw-wrapper props]))))
(defn shape-container-factory (defn shape-container-factory
[objects] [objects all-objects]
(let [path-wrapper (path-wrapper) (let [path-wrapper (path-wrapper)
text-wrapper (text-wrapper) text-wrapper (text-wrapper)
rect-wrapper (rect-wrapper) rect-wrapper (rect-wrapper)
@ -452,26 +454,27 @@
group-container group-container
(mf/with-memo [objects] (mf/with-memo [objects]
(group-container-factory objects)) (group-container-factory objects all-objects))
frame-container frame-container
(mf/with-memo [objects] (mf/with-memo [objects]
(frame-container-factory objects)) (frame-container-factory objects all-objects))
bool-container bool-container
(mf/with-memo [objects] (mf/with-memo [objects]
(bool-container-factory objects)) (bool-container-factory objects all-objects))
svg-raw-container svg-raw-container
(mf/with-memo [objects] (mf/with-memo [objects]
(svg-raw-container-factory objects))] (svg-raw-container-factory objects all-objects))]
(when (and shape (not (:hidden shape))) (when (and shape (not (:hidden shape)))
(let [shape (-> shape (let [shape (-> shape
#_(gsh/transform-shape) #_(gsh/transform-shape)
(gsh/translate-to-frame frame)) (gsh/translate-to-frame frame))
opts #js {:shape shape opts #js {:shape shape
:objects objects}] :objects objects
:all-objects all-objects}]
(case (:type shape) (case (:type shape)
:frame [:> frame-container opts] :frame [:> frame-container opts]
:text [:> text-wrapper opts] :text [:> text-wrapper opts]