Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-26 08:29:42 -05:00
Code Issues Activity

Merge pull request #2850 from penpot/alotor-fix-frame-overlay

Browse source 
🐛 Fix frame overlays in workspace
This commit is contained in:
Alejandro 2023-01-30 07:19:08 +01:00 • committed by GitHub
commit a3a88d7a0a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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? (when show-prototypes?
[:& interactions/interactions [:& interactions/interactions
{:selected selected {:selected selected
:page-id page-id
:zoom zoom :zoom zoom
:objects objects-modified :objects objects-modified
:current-transform transform :current-transform transform

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

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