Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 23:49:45 -05:00
Code Issues Activity

🐛 Fix frame overlays in workspace

Browse source
This commit is contained in:
alonso.torres 2023-01-27 11:26:35 +01:00
parent 545b3860b4
commit f90fda2c90
2 changed files with 31 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/app/main/ui/workspace/viewport.cljs
View file

@ -506,6 +506,7 @@
(when show-prototypes?
[:& interactions/interactions
{:selected selected
:page-id page-id
:zoom zoom
:objects objects-modified
:current-transform transform

39
frontend/src/app/main/ui/workspace/viewport/interactions.cljs
View file

@ -9,11 +9,16 @@
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.geom.matrix :as gmt]
[app.common.geom.point :as gpt]
[app.common.pages.helpers :as cph]
[app.common.types.shape.interactions :as ctsi]
[app.main.data.workspace :as dw]
[app.main.refs :as refs]
[app.main.render :as render]
[app.main.store :as st]
[app.main.ui.context :as muc]
[app.main.ui.shapes.embed :as embed]
[app.main.ui.workspace.viewport.outline :refer [outline]]
[app.util.dom :as dom]
[cuerdas.core :as str]
@ -214,7 +219,7 @@
(mf/defc overlay-marker
[{:keys [index orig-shape dest-shape position objects hover-disabled?] :as props}]
[{:keys [page-id index orig-shape dest-shape position objects hover-disabled?] :as props}]
(let [start-move-position
(fn [_]
(st/emit! (dw/start-move-overlay-pos index)))]
@ -226,13 +231,28 @@
width (:width dest-shape)
height (:height dest-shape)
dest-x (:x dest-shape)
dest-y (:y dest-shape)]
dest-y (:y dest-shape)
shape-wrapper
(mf/use-memo
(mf/deps objects)
#(render/shape-wrapper-factory objects))
dest-shape-id (:id dest-shape)
thumbnail-data-ref (mf/use-memo (mf/deps page-id dest-shape-id) #(refs/thumbnail-frame-data page-id dest-shape-id))
thumbnail-data (mf/deref thumbnail-data-ref)
dest-shape (cond-> dest-shape
(some? thumbnail-data)
(assoc :thumbnail thumbnail-data))]
[:g {:on-mouse-down start-move-position
:on-mouse-enter #(reset! hover-disabled? true)
:on-mouse-leave #(reset! hover-disabled? false)}
[:use {:href (str "#thumbnail-container-" (:id dest-shape))
:x (- marker-x dest-x)
:y (- marker-y dest-y)}]
[:g {:transform (gmt/translate-matrix (gpt/point (- marker-x dest-x) (- marker-y dest-y))) }
[:& (mf/provider muc/render-thumbnails) {:value true}
[:& (mf/provider embed/context) {:value false}
[:& shape-wrapper {:shape dest-shape}]]]]
[:path {:stroke "var(--color-primary)"
:fill "var(--color-black)"
:fill-opacity 0.5
@ -251,7 +271,7 @@
:fill "var(--color-primary)"}]]))))
(mf/defc interactions
[{:keys [current-transform objects zoom selected hover-disabled?] :as props}]
[{:keys [current-transform objects zoom selected hover-disabled? page-id] :as props}]
(let [active-shapes (into []
(comp (filter #(seq (:interactions %))))
(vals objects))
@ -323,13 +343,15 @@
(= (:overlay-pos-type interaction) :manual))
(if (and (some? move-overlay-to)
(= move-overlay-index index))
[:& overlay-marker {:index index
[:& overlay-marker {:page-id page-id
:index index
:orig-shape shape
:dest-shape dest-shape
:position move-overlay-to
:objects objects
:hover-disabled? hover-disabled?}]
[:& overlay-marker {:index index
[:& overlay-marker {:page-id page-id
:index index
:orig-shape shape
:dest-shape dest-shape
:position (:overlay-position interaction)
@ -343,4 +365,3 @@
:shape shape
:selected selected
:zoom zoom}])))]]))