mirror of
https://github.com/penpot/penpot.git
synced 2025-07-29 06:18:57 +02:00
✨ Change overlay position algorithm and some refactor
This commit is contained in:
Andrés Moya
parent
a189dc8243
commit
4df96b03eb
8 changed files with 225 additions and 187 deletions
|
|
@ -41,25 +41,23 @@
|
|||
|
||||
(mf/defc viewport
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [local page frame size]}]
|
||||
(let [interactions? (:interactions-show? local)
|
||||
|
||||
objects (mf/use-memo
|
||||
[{:keys [page interactions-mode frame base-frame frame-offset size]}]
|
||||
(let [objects (mf/use-memo
|
||||
(mf/deps page frame)
|
||||
(prepare-objects page frame))
|
||||
|
||||
wrapper (mf/use-memo
|
||||
(mf/deps objects interactions?)
|
||||
#(shapes/frame-container-factory objects interactions?))
|
||||
(mf/deps objects)
|
||||
#(shapes/frame-container-factory objects))
|
||||
|
||||
;; Retrieve frame again with correct modifier
|
||||
;; Retrieve frames again with correct modifier
|
||||
frame (get objects (:id frame))
|
||||
base-frame (get objects (:id base-frame))
|
||||
|
||||
on-click
|
||||
(fn [_]
|
||||
(let [mode (:interactions-mode local)]
|
||||
(when (= mode :show-on-click)
|
||||
(st/emit! dv/flash-interactions))))
|
||||
(when (= interactions-mode :show-on-click)
|
||||
(st/emit! dv/flash-interactions)))
|
||||
|
||||
on-mouse-wheel
|
||||
(fn [event]
|
||||
|
|
@ -77,7 +75,7 @@
|
|||
(st/emit! (dcm/close-thread))))]
|
||||
|
||||
(mf/use-effect
|
||||
(mf/deps local) ;; on-click event depends on local
|
||||
(mf/deps interactions-mode) ;; on-click event depends on interactions-mode
|
||||
(fn []
|
||||
;; bind with passive=false to allow the event to be cancelled
|
||||
;; https://stackoverflow.com/a/57582286/3219895
|
||||
|
|
@ -89,15 +87,16 @@
|
|||
(events/unlistenByKey key2)
|
||||
(events/unlistenByKey key3)))))
|
||||
|
||||
[:svg {:view-box (:vbox size)
|
||||
:width (:width size)
|
||||
:height (:height size)
|
||||
:version "1.1"
|
||||
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
||||
:xmlns "http://www.w3.org/2000/svg"}
|
||||
[:& wrapper {:shape frame
|
||||
:show-interactions? interactions?
|
||||
:view-box (:vbox size)}]]))
|
||||
[:& (mf/provider shapes/base-frame-ctx) {:value base-frame}
|
||||
[:& (mf/provider shapes/frame-offset-ctx) {:value frame-offset}
|
||||
[:svg {:view-box (:vbox size)
|
||||
:width (:width size)
|
||||
:height (:height size)
|
||||
:version "1.1"
|
||||
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
||||
:xmlns "http://www.w3.org/2000/svg"}
|
||||
[:& wrapper {:shape frame
|
||||
:view-box (:vbox size)}]]]]))
|
||||
|
||||
|
||||
(mf/defc interactions-menu
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
[app.common.pages :as cp]
|
||||
[app.common.types.interactions :as cti]
|
||||
[app.main.data.viewer :as dv]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.shapes.bool :as bool]
|
||||
[app.main.ui.shapes.circle :as circle]
|
||||
|
|
@ -31,20 +32,28 @@
|
|||
[app.util.timers :as tm]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(def base-frame-ctx (mf/create-context nil))
|
||||
(def frame-offset-ctx (mf/create-context nil))
|
||||
|
||||
(defn activate-interaction
|
||||
[interaction shape]
|
||||
[interaction shape base-frame frame-offset objects]
|
||||
(case (:action-type interaction)
|
||||
:navigate
|
||||
(when-let [frame-id (:destination interaction)]
|
||||
(st/emit! (dv/go-to-frame frame-id)))
|
||||
|
||||
:open-overlay
|
||||
(let [frame-id (:destination interaction)
|
||||
position (:overlay-position interaction)
|
||||
(let [dest-frame-id (:destination interaction)
|
||||
close-click-outside (:close-click-outside interaction)
|
||||
background-overlay (:background-overlay interaction)]
|
||||
(when frame-id
|
||||
(st/emit! (dv/open-overlay frame-id
|
||||
background-overlay (:background-overlay interaction)
|
||||
|
||||
dest-frame (get objects dest-frame-id)
|
||||
position (cti/calc-overlay-position interaction
|
||||
base-frame
|
||||
dest-frame
|
||||
frame-offset)]
|
||||
(when dest-frame-id
|
||||
(st/emit! (dv/open-overlay dest-frame-id
|
||||
position
|
||||
close-click-outside
|
||||
background-overlay))))
|
||||
|
|
@ -77,7 +86,7 @@
|
|||
|
||||
;; Perform the opposite action of an interaction, if possible
|
||||
(defn deactivate-interaction
|
||||
[interaction shape]
|
||||
[interaction shape base-frame frame-offset objects]
|
||||
(case (:action-type interaction)
|
||||
:open-overlay
|
||||
(let [frame-id (or (:destination interaction)
|
||||
|
|
@ -98,48 +107,53 @@
|
|||
background-overlay))))
|
||||
|
||||
:close-overlay
|
||||
(let [frame-id (:destination interaction)
|
||||
position (:overlay-position interaction)
|
||||
(let [dest-frame-id (:destination interaction)
|
||||
close-click-outside (:close-click-outside interaction)
|
||||
background-overlay (:background-overlay interaction)]
|
||||
(when frame-id
|
||||
(st/emit! (dv/open-overlay frame-id
|
||||
background-overlay (:background-overlay interaction)
|
||||
|
||||
dest-frame (get objects dest-frame-id)
|
||||
position (cti/calc-overlay-position interaction
|
||||
base-frame
|
||||
dest-frame
|
||||
frame-offset)]
|
||||
(when dest-frame-id
|
||||
(st/emit! (dv/open-overlay dest-frame-id
|
||||
position
|
||||
close-click-outside
|
||||
background-overlay))))
|
||||
nil))
|
||||
|
||||
(defn on-mouse-down
|
||||
[event shape]
|
||||
[event shape base-frame frame-offset objects]
|
||||
(let [interactions (->> (:interactions shape)
|
||||
(filter #(or (= (:event-type %) :click)
|
||||
(= (:event-type %) :mouse-press))))]
|
||||
(when (seq interactions)
|
||||
(dom/stop-propagation event)
|
||||
(doseq [interaction interactions]
|
||||
(activate-interaction interaction shape)))))
|
||||
(activate-interaction interaction shape base-frame frame-offset objects)))))
|
||||
|
||||
(defn on-mouse-up
|
||||
[event shape]
|
||||
[event shape base-frame frame-offset objects]
|
||||
(let [interactions (->> (:interactions shape)
|
||||
(filter #(= (:event-type %) :mouse-press)))]
|
||||
(when (seq interactions)
|
||||
(dom/stop-propagation event)
|
||||
(doseq [interaction interactions]
|
||||
(deactivate-interaction interaction shape)))))
|
||||
(deactivate-interaction interaction shape base-frame frame-offset objects)))))
|
||||
|
||||
(defn on-mouse-enter
|
||||
[event shape]
|
||||
[event shape base-frame frame-offset objects]
|
||||
(let [interactions (->> (:interactions shape)
|
||||
(filter #(or (= (:event-type %) :mouse-enter)
|
||||
(= (:event-type %) :mouse-over))))]
|
||||
(when (seq interactions)
|
||||
(dom/stop-propagation event)
|
||||
(doseq [interaction interactions]
|
||||
(activate-interaction interaction shape)))))
|
||||
(activate-interaction interaction shape base-frame frame-offset objects)))))
|
||||
|
||||
(defn on-mouse-leave
|
||||
[event shape]
|
||||
[event shape base-frame frame-offset objects]
|
||||
(let [interactions (->> (:interactions shape)
|
||||
(filter #(= (:event-type %) :mouse-leave)))
|
||||
interactions-inv (->> (:interactions shape)
|
||||
|
|
@ -147,25 +161,25 @@
|
|||
(when (or (seq interactions) (seq interactions-inv))
|
||||
(dom/stop-propagation event)
|
||||
(doseq [interaction interactions]
|
||||
(activate-interaction interaction shape))
|
||||
(activate-interaction interaction shape base-frame frame-offset objects))
|
||||
(doseq [interaction interactions-inv]
|
||||
(deactivate-interaction interaction shape)))))
|
||||
(deactivate-interaction interaction shape base-frame frame-offset objects)))))
|
||||
|
||||
(defn on-load
|
||||
[shape]
|
||||
[shape base-frame frame-offset objects]
|
||||
(let [interactions (->> (:interactions shape)
|
||||
(filter #(= (:event-type %) :after-delay)))]
|
||||
(loop [interactions (seq interactions)
|
||||
sems []]
|
||||
(if-let [interaction (first interactions)]
|
||||
(let [sem (tm/schedule (:delay interaction)
|
||||
#(activate-interaction interaction shape))]
|
||||
#(activate-interaction interaction shape base-frame frame-offset objects))]
|
||||
(recur (next interactions)
|
||||
(conj sems sem)))
|
||||
sems))))
|
||||
|
||||
(mf/defc interaction
|
||||
[{:keys [shape interactions show-interactions?]}]
|
||||
[{:keys [shape interactions interactions-show?]}]
|
||||
(let [{:keys [x y width height]} (:selrect shape)
|
||||
frame? (= :frame (:type shape))]
|
||||
(when-not (empty? interactions)
|
||||
|
|
@ -175,20 +189,26 @@
|
|||
:height (+ height 2)
|
||||
:fill "#31EFB8"
|
||||
:stroke "#31EFB8"
|
||||
:stroke-width (if show-interactions? 1 0)
|
||||
:fill-opacity (if show-interactions? 0.2 0)
|
||||
:stroke-width (if interactions-show? 1 0)
|
||||
:fill-opacity (if interactions-show? 0.2 0)
|
||||
:style {:pointer-events (when frame? "none")}
|
||||
:transform (geom/transform-matrix shape)}])))
|
||||
|
||||
(defn generic-wrapper-factory
|
||||
"Wrap some svg shape and add interaction controls"
|
||||
[component show-interactions?]
|
||||
[component]
|
||||
(mf/fnc generic-wrapper
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [shape (unchecked-get props "shape")
|
||||
childs (unchecked-get props "childs")
|
||||
frame (unchecked-get props "frame")
|
||||
objects (unchecked-get props "objects")
|
||||
|
||||
base-frame (mf/use-ctx base-frame-ctx)
|
||||
frame-offset (mf/use-ctx frame-offset-ctx)
|
||||
|
||||
interactions-show? (mf/deref refs/viewer-interactions-show?)
|
||||
|
||||
interactions (:interactions shape)
|
||||
|
||||
|
|
@ -197,16 +217,16 @@
|
|||
|
||||
(mf/use-effect
|
||||
(fn []
|
||||
(let [sems (on-load shape)]
|
||||
(let [sems (on-load shape base-frame frame-offset objects)]
|
||||
#(run! tm/dispose! sems))))
|
||||
|
||||
(if-not svg-element?
|
||||
[:> shape-container {:shape shape
|
||||
:cursor (when (cti/actionable? interactions) "pointer")
|
||||
:on-mouse-down #(on-mouse-down % shape)
|
||||
:on-mouse-up #(on-mouse-up % shape)
|
||||
:on-mouse-enter #(on-mouse-enter % shape)
|
||||
:on-mouse-leave #(on-mouse-leave % shape)}
|
||||
:on-mouse-down #(on-mouse-down % shape base-frame frame-offset objects)
|
||||
:on-mouse-up #(on-mouse-up % shape base-frame frame-offset objects)
|
||||
:on-mouse-enter #(on-mouse-enter % shape base-frame frame-offset objects)
|
||||
:on-mouse-leave #(on-mouse-leave % shape base-frame frame-offset objects)}
|
||||
|
||||
[:& component {:shape shape
|
||||
:frame frame
|
||||
|
|
@ -215,7 +235,7 @@
|
|||
|
||||
[:& interaction {:shape shape
|
||||
:interactions interactions
|
||||
:show-interactions? show-interactions?}]]
|
||||
:interactions-show? interactions-show?}]]
|
||||
|
||||
;; Don't wrap svg elements inside a <g> otherwise some can break
|
||||
[:& component {:shape shape
|
||||
|
|
@ -223,64 +243,63 @@
|
|||
:childs childs}]))))
|
||||
|
||||
(defn frame-wrapper
|
||||
[shape-container show-interactions?]
|
||||
(generic-wrapper-factory (frame/frame-shape shape-container) show-interactions?))
|
||||
[shape-container]
|
||||
(generic-wrapper-factory (frame/frame-shape shape-container)))
|
||||
|
||||
(defn group-wrapper
|
||||
[shape-container show-interactions?]
|
||||
(generic-wrapper-factory (group/group-shape shape-container) show-interactions?))
|
||||
[shape-container]
|
||||
(generic-wrapper-factory (group/group-shape shape-container)))
|
||||
|
||||
(defn bool-wrapper
|
||||
[shape-container show-interactions?]
|
||||
(generic-wrapper-factory (bool/bool-shape shape-container) show-interactions?))
|
||||
[shape-container]
|
||||
(generic-wrapper-factory (bool/bool-shape shape-container)))
|
||||
|
||||
(defn svg-raw-wrapper
|
||||
[shape-container show-interactions?]
|
||||
(generic-wrapper-factory (svg-raw/svg-raw-shape shape-container) show-interactions?))
|
||||
[shape-container]
|
||||
(generic-wrapper-factory (svg-raw/svg-raw-shape shape-container)))
|
||||
|
||||
(defn rect-wrapper
|
||||
[show-interactions?]
|
||||
(generic-wrapper-factory rect/rect-shape show-interactions?))
|
||||
[]
|
||||
(generic-wrapper-factory rect/rect-shape))
|
||||
|
||||
(defn image-wrapper
|
||||
[show-interactions?]
|
||||
(generic-wrapper-factory image/image-shape show-interactions?))
|
||||
[]
|
||||
(generic-wrapper-factory image/image-shape))
|
||||
|
||||
(defn path-wrapper
|
||||
[show-interactions?]
|
||||
(generic-wrapper-factory path/path-shape show-interactions?))
|
||||
[]
|
||||
(generic-wrapper-factory path/path-shape))
|
||||
|
||||
(defn text-wrapper
|
||||
[show-interactions?]
|
||||
(generic-wrapper-factory text/text-shape show-interactions?))
|
||||
[]
|
||||
(generic-wrapper-factory text/text-shape))
|
||||
|
||||
(defn circle-wrapper
|
||||
[show-interactions?]
|
||||
(generic-wrapper-factory circle/circle-shape show-interactions?))
|
||||
[]
|
||||
(generic-wrapper-factory circle/circle-shape))
|
||||
|
||||
(declare shape-container-factory)
|
||||
|
||||
(defn frame-container-factory
|
||||
[objects show-interactions?]
|
||||
(let [shape-container (shape-container-factory objects show-interactions?)
|
||||
frame-wrapper (frame-wrapper shape-container show-interactions?)]
|
||||
[objects]
|
||||
(let [shape-container (shape-container-factory objects)
|
||||
frame-wrapper (frame-wrapper shape-container)]
|
||||
(mf/fnc frame-container
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [shape (obj/get props "shape")
|
||||
childs (mapv #(get objects %) (:shapes shape))
|
||||
shape (geom/transform-shape shape)
|
||||
props (obj/merge! #js {} props
|
||||
#js {:shape shape
|
||||
:childs childs
|
||||
:objects objects
|
||||
:show-interactions? show-interactions?})]
|
||||
(let [shape (obj/get props "shape")
|
||||
childs (mapv #(get objects %) (:shapes shape))
|
||||
shape (geom/transform-shape shape)
|
||||
props (obj/merge! #js {} props
|
||||
#js {:shape shape
|
||||
:childs childs
|
||||
:objects objects})]
|
||||
[:> frame-wrapper props]))))
|
||||
|
||||
(defn group-container-factory
|
||||
[objects show-interactions?]
|
||||
(let [shape-container (shape-container-factory objects show-interactions?)
|
||||
group-wrapper (group-wrapper shape-container show-interactions?)]
|
||||
[objects]
|
||||
(let [shape-container (shape-container-factory objects)
|
||||
group-wrapper (group-wrapper shape-container)]
|
||||
(mf/fnc group-container
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
|
|
@ -288,14 +307,13 @@
|
|||
childs (mapv #(get objects %) (:shapes shape))
|
||||
props (obj/merge! #js {} props
|
||||
#js {:childs childs
|
||||
:objects objects
|
||||
:show-interactions? show-interactions?})]
|
||||
:objects objects})]
|
||||
[:> group-wrapper props]))))
|
||||
|
||||
(defn bool-container-factory
|
||||
[objects show-interactions?]
|
||||
(let [shape-container (shape-container-factory objects show-interactions?)
|
||||
bool-wrapper (bool-wrapper shape-container show-interactions?)]
|
||||
[objects]
|
||||
(let [shape-container (shape-container-factory objects)
|
||||
bool-wrapper (bool-wrapper shape-container)]
|
||||
(mf/fnc bool-container
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
|
|
@ -303,14 +321,13 @@
|
|||
childs (select-keys objects (cp/get-children (:id shape) objects))
|
||||
props (obj/merge! #js {} props
|
||||
#js {:childs childs
|
||||
:objects objects
|
||||
:show-interactions? show-interactions?})]
|
||||
:objects objects})]
|
||||
[:> bool-wrapper props]))))
|
||||
|
||||
(defn svg-raw-container-factory
|
||||
[objects show-interactions?]
|
||||
(let [shape-container (shape-container-factory objects show-interactions?)
|
||||
svg-raw-wrapper (svg-raw-wrapper shape-container show-interactions?)]
|
||||
[objects]
|
||||
(let [shape-container (shape-container-factory objects)
|
||||
svg-raw-wrapper (svg-raw-wrapper shape-container)]
|
||||
(mf/fnc svg-raw-container
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
|
|
@ -318,31 +335,30 @@
|
|||
childs (mapv #(get objects %) (:shapes shape))
|
||||
props (obj/merge! #js {} props
|
||||
#js {:childs childs
|
||||
:objects objects
|
||||
:show-interactions? show-interactions?})]
|
||||
:objects objects})]
|
||||
[:> svg-raw-wrapper props]))))
|
||||
|
||||
(defn shape-container-factory
|
||||
[objects show-interactions?]
|
||||
(let [path-wrapper (path-wrapper show-interactions?)
|
||||
text-wrapper (text-wrapper show-interactions?)
|
||||
rect-wrapper (rect-wrapper show-interactions?)
|
||||
image-wrapper (image-wrapper show-interactions?)
|
||||
circle-wrapper (circle-wrapper show-interactions?)]
|
||||
[objects]
|
||||
(let [path-wrapper (path-wrapper)
|
||||
text-wrapper (text-wrapper)
|
||||
rect-wrapper (rect-wrapper)
|
||||
image-wrapper (image-wrapper)
|
||||
circle-wrapper (circle-wrapper)]
|
||||
(mf/fnc shape-container
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [group-container
|
||||
(mf/use-memo (mf/deps objects)
|
||||
#(group-container-factory objects show-interactions?))
|
||||
#(group-container-factory objects))
|
||||
|
||||
bool-container
|
||||
(mf/use-memo (mf/deps objects)
|
||||
#(bool-container-factory objects show-interactions?))
|
||||
#(bool-container-factory objects))
|
||||
|
||||
svg-raw-container
|
||||
(mf/use-memo (mf/deps objects)
|
||||
#(svg-raw-container-factory objects show-interactions?))
|
||||
#(svg-raw-container-factory objects))
|
||||
shape (unchecked-get props "shape")
|
||||
frame (unchecked-get props "frame")]
|
||||
(when (and shape (not (:hidden shape)))
|
||||
|
|
@ -363,7 +379,7 @@
|
|||
|
||||
(mf/defc frame-svg
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [objects frame zoom show-interactions?] :or {zoom 1} :as props}]
|
||||
[{:keys [objects frame zoom] :or {zoom 1} :as props}]
|
||||
(let [modifier (-> (gpt/point (:x frame) (:y frame))
|
||||
(gpt/negate)
|
||||
(gmt/translate-matrix))
|
||||
|
|
@ -381,7 +397,7 @@
|
|||
" " (:height frame 0))
|
||||
wrapper (mf/use-memo
|
||||
(mf/deps objects)
|
||||
#(frame-container-factory objects show-interactions?))]
|
||||
#(frame-container-factory objects))]
|
||||
|
||||
[:svg {:view-box vbox
|
||||
:width width
|
||||
|
|
@ -390,6 +406,5 @@
|
|||
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
||||
:xmlns "http://www.w3.org/2000/svg"}
|
||||
[:& wrapper {:shape frame
|
||||
:show-interactions? show-interactions?
|
||||
:view-box vbox}]]))
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue