github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-06-11 09:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Migrate viewer/interactions viewport components to modern syntax (#9442)

Browse Source 
Signed-off-by: Andrey Antukh <niwi@niwi.nz>
Co-authored-by: Andrey Antukh <niwi@niwi.nz>
This commit is contained in:
Dexterity 2026-06-10 07:46:25 -04:00 committed by GitHub
parent 6937e70dab
commit 5d2e0cb7cb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 30 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/app/main/ui/viewer.cljs
View File

@ -186,7 +186,7 @@
:style {:width (:width size)
:height (:height size)
:position "fixed"}}
[:& interactions/viewport
[:> interactions/viewport*
{:frame overlay-frame
:base-frame frame
:frame-offset overlay-position
@ -201,7 +201,7 @@
:height (:height size)
:left (* (:x overlay-position) zoom)
:top (* (:y overlay-position) zoom)}}
[:& interactions/viewport
[:> interactions/viewport*
{:frame overlay-frame
:base-frame frame
:frame-offset overlay-position
@ -236,7 +236,7 @@
:height (:height orig-size)
:position "relative"}}
[:& interactions/viewport
[:> interactions/viewport*
{:frame orig-frame
:base-frame orig-frame
:frame-offset (gpt/point 0 0)
@ -251,7 +251,7 @@
:height (:height size)
:position "relative"}}
[:& interactions/viewport
[:> interactions/viewport*
{:frame frame
:base-frame frame
:frame-offset (gpt/point 0 0)

60
frontend/src/app/main/ui/viewer/interactions.cljs
View File

@ -29,23 +29,16 @@
[goog.events :as events]
[rumext.v2 :as mf]))
(mf/defc viewport-svg
{::mf/wrap [mf/memo]
::mf/wrap-props false}
[props]
(let [page (unchecked-get props "page")
frame (unchecked-get props "frame")
base (unchecked-get props "base")
offset (unchecked-get props "offset")
size (unchecked-get props "size")
fixed? (unchecked-get props "fixed?")
delta (or (unchecked-get props "delta") (gpt/point 0 0))
(mf/defc viewport-svg*
{::mf/wrap [mf/memo]}
[{:keys [page frame base offset size is-fixed delta]}]
(let [delta (or delta (gpt/point 0 0))
vbox (:vbox size)
frame (cond-> frame fixed? (assoc :fixed-scroll true))
frame (cond-> frame is-fixed (assoc :fixed-scroll true))
objects (:objects page)
objects (cond-> objects fixed? (assoc-in [(:id frame) :fixed-scroll] true))
objects (cond-> objects is-fixed (assoc-in [(:id frame) :fixed-scroll] true))
fixed-ids (vpc/get-fixed-ids objects)
@ -96,7 +89,7 @@
[:& (mf/provider shapes/base-frame-ctx) {:value base}
[:& (mf/provider shapes/frame-offset-ctx) {:value offset}
(if fixed?
(if is-fixed
[:svg {:class (stl/css :fixed)
:view-box vbox
:width (:width size)
@ -132,23 +125,22 @@
:fill "none"}
[:& wrapper-not-fixed {:shape frame :view-box vbox}]]])]]))
(mf/defc viewport
{::mf/wrap [mf/memo]
::mf/wrap-props false}
[props]
(mf/defc viewport*
{::mf/wrap [mf/memo]}
[{:keys [interactions-mode frame-offset size delta page frame base-frame is-fixed]}]
(let [;; NOTE: with `use-equal-memo` hook we ensure that all values
;; conserves the reference identity for avoid unnecessary
;; dummy rerenders.
mode (h/use-equal-memo (unchecked-get props "interactions-mode"))
offset (h/use-equal-memo (unchecked-get props "frame-offset"))
size (h/use-equal-memo (unchecked-get props "size"))
delta (unchecked-get props "delta")
mode (h/use-equal-memo interactions-mode)
offset (h/use-equal-memo frame-offset)
size (h/use-equal-memo size)
delta (h/use-equal-memo delta)
page (unchecked-get props "page")
frame (unchecked-get props "frame")
base (unchecked-get props "base-frame")
fixed? (unchecked-get props "fixed?")
page (h/use-equal-memo page)
frame (h/use-equal-memo frame)
base (h/use-equal-memo base-frame)
is-fixed (h/use-equal-memo is-fixed)
render-wasm? (and (features/use-feature "render-wasm/v1")
(contains? cf/flags :available-viewer-wasm))]
@ -193,14 +185,14 @@
:offset offset
:size size
:delta delta
:fixed? fixed?}]
[:& viewport-svg {:page page
:frame frame
:base base
:offset offset
:size size
:delta delta
:fixed? fixed?}])))
:fixed? is-fixed}]
[:> viewport-svg* {:page page
:frame frame
:base base
:offset offset
:size size
:delta delta
:is-fixed is-fixed}])))
(mf/defc flows-menu*
{::mf/wrap [mf/memo]}