3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-22 02:26:12 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Add interaction overlays

Browse source
This commit is contained in:
Andrés Moya 2021-09-10 10:34:43 +02:00 • committed by Andrey Antukh
parent c7252a950b
commit b4b2f91363
5 changed files with 209 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

32
frontend/src/app/main/ui/viewer.cljs
View file

@ -13,6 +13,7 @@
[app.main.store :as st]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i]
[app.main.ui.shapes.filters :as filters]
[app.main.ui.share-link]
[app.main.ui.static :as static]
[app.main.ui.viewer.comments :refer [comments-layer]]
@ -27,9 +28,15 @@
(defn- calculate-size
[frame zoom]
{:width (* (:width frame) zoom)
:height (* (:height frame) zoom)
:vbox (str "0 0 " (:width frame 0) " " (:height frame 0))})
(let [{:keys [_ _ width height]} (filters/get-filters-bounds frame)]
{:width (* width zoom)
:height (* height zoom)
:vbox (str "0 0 " width " " height)}))
(defn- position-overlay
[size size-over]
{:x (/ (- (:width size) (:width size-over)) 2)
:y (/ (- (:height size) (:height size-over)) 2)})
(mf/defc viewer
[{:keys [params data]}]
@ -137,7 +144,24 @@
:page page
:file file
:users users
:local local}]]))]]]))
:local local}]
(for [overlay (:overlays local)]
(let [size-over (calculate-size overlay zoom)
pos-over (position-overlay size size-over)]
[:div.viewport-container
{:style {:width (:width size-over)
:height (:height size-over)
:position "absolute"
:left (:x pos-over)
:top (:y pos-over)}}
[:& interactions/viewport
{:frame overlay
:size size-over
:page page
:file file
:users users
:local local}]]))]))]]]))
;; --- Component: Viewer Page