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

✨ Change overlay position algorithm and some refactor

Browse source
This commit is contained in:
Andrés Moya 2021-09-27 16:13:50 +02:00
parent a189dc8243
commit 4df96b03eb
8 changed files with 225 additions and 187 deletions
Download patch file Download diff file Expand all files Collapse all files

125
common/src/app/common/types/interactions.cljc
View file

@ -113,7 +113,7 @@
;; -- Helpers for interaction ;; -- Helpers for interaction
(declare calc-overlay-position) (declare calc-overlay-pos-initial)
(defn set-event-type (defn set-event-type
[interaction event-type shape] [interaction event-type shape]
@ -135,7 +135,7 @@
(defn set-action-type (defn set-action-type
[interaction action-type shape objects] [interaction action-type]
(us/verify ::interaction interaction) (us/verify ::interaction interaction)
(us/verify ::action-type action-type) (us/verify ::action-type action-type)
(if (= (:action-type interaction) action-type) (if (= (:action-type interaction) action-type)
@ -148,19 +148,10 @@
:destination (get interaction :destination)) :destination (get interaction :destination))
(:open-overlay :toggle-overlay) (:open-overlay :toggle-overlay)
(let [destination (get interaction :destination) (let [overlay-pos-type (get interaction :overlay-pos-type :center)
overlay-pos-type (get interaction :overlay-pos-type :center) overlay-position (get interaction :overlay-position (gpt/point 0 0))]
overlay-position (get interaction
:overlay-position
(calc-overlay-position
destination
interaction
shape
objects
overlay-pos-type))]
(assoc interaction (assoc interaction
:action-type action-type :action-type action-type
:destination destination
:overlay-pos-type overlay-pos-type :overlay-pos-type overlay-pos-type
:overlay-position overlay-position)) :overlay-position overlay-position))
@ -178,20 +169,32 @@
:action-type action-type :action-type action-type
:url (get interaction :url ""))))) :url (get interaction :url "")))))
(defn has-delay
[interaction]
(= (:event-type interaction) :after-delay))
(defn set-delay (defn set-delay
[interaction delay] [interaction delay]
(us/verify ::interaction interaction) (us/verify ::interaction interaction)
(us/verify ::delay delay) (us/verify ::delay delay)
(assert (= (:event-type interaction) :after-delay)) (assert (has-delay interaction))
(assoc interaction :delay delay)) (assoc interaction :delay delay))
(defn has-destination
[interaction]
(#{:navigate :open-overlay :toggle-overlay :close-overlay}
(:action-type interaction)))
(defn destination?
[interaction]
(and (has-destination interaction)
(some? (:destination interaction))))
(defn set-destination (defn set-destination
[interaction destination shape objects] [interaction destination]
(us/verify ::interaction interaction) (us/verify ::interaction interaction)
(us/verify ::destination destination) (us/verify ::destination destination)
(assert (or (nil? destination) (assert (has-destination interaction))
(some? (get objects destination))))
(assert (#{:navigate :open-overlay :toggle-overlay :close-overlay} (:action-type interaction)))
(cond-> interaction (cond-> interaction
:always :always
(assoc :destination destination) (assoc :destination destination)
@ -199,50 +202,53 @@
(or (= (:action-type interaction) :open-overlay) (or (= (:action-type interaction) :open-overlay)
(= (:action-type interaction) :toggle-overlay)) (= (:action-type interaction) :toggle-overlay))
(assoc :overlay-pos-type :center (assoc :overlay-pos-type :center
:overlay-position (calc-overlay-position destination :overlay-position (gpt/point 0 0))))
interaction
shape (defn has-url
objects [interaction]
:center)))) (= (:action-type interaction) :open-url))
(defn set-url (defn set-url
[interaction url] [interaction url]
(us/verify ::interaction interaction) (us/verify ::interaction interaction)
(us/verify ::url url) (us/verify ::url url)
(assert (= (:action-type interaction) :open-url)) (assert (has-url interaction))
(assoc interaction :url url)) (assoc interaction :url url))
(defn has-overlay-opts
[interaction]
(#{:open-overlay :toggle-overlay} (:action-type interaction)))
(defn set-overlay-pos-type (defn set-overlay-pos-type
[interaction overlay-pos-type shape objects] [interaction overlay-pos-type shape objects]
(us/verify ::interaction interaction) (us/verify ::interaction interaction)
(us/verify ::overlay-pos-type overlay-pos-type) (us/verify ::overlay-pos-type overlay-pos-type)
(assert (#{:open-overlay :toggle-overlay} (:action-type interaction))) (assert (has-overlay-opts interaction))
(assoc interaction (assoc interaction
:overlay-pos-type overlay-pos-type :overlay-pos-type overlay-pos-type
:overlay-position (calc-overlay-position (:destination interaction) :overlay-position (calc-overlay-pos-initial (:destination interaction)
interaction shape
shape objects
objects overlay-pos-type)))
overlay-pos-type)))
(defn toggle-overlay-pos-type (defn toggle-overlay-pos-type
[interaction overlay-pos-type shape objects] [interaction overlay-pos-type shape objects]
(us/verify ::interaction interaction) (us/verify ::interaction interaction)
(us/verify ::overlay-pos-type overlay-pos-type) (us/verify ::overlay-pos-type overlay-pos-type)
(assert (#{:open-overlay :toggle-overlay} (:action-type interaction))) (assert (has-overlay-opts interaction))
(let [new-pos-type (if (= (:overlay-pos-type interaction) overlay-pos-type) (let [new-pos-type (if (= (:overlay-pos-type interaction) overlay-pos-type)
:manual :manual
overlay-pos-type)] overlay-pos-type)]
(assoc interaction (assoc interaction
:overlay-pos-type new-pos-type :overlay-pos-type new-pos-type
:overlay-position (calc-overlay-position (:destination interaction) :overlay-position (calc-overlay-pos-initial (:destination interaction)
interaction shape
shape objects
objects new-pos-type))))
new-pos-type))))
(defn set-overlay-position (defn set-overlay-position
[interaction overlay-position] [interaction overlay-position]
(us/verify ::interaction interaction) (us/verify ::interaction interaction)
(us/verify ::overlay-position overlay-position) (us/verify ::overlay-position overlay-position)
(assert (#{:open-overlay :toggle-overlay} (:action-type interaction))) (assert (has-overlay-opts interaction))
(assoc interaction (assoc interaction
:overlay-pos-type :manual :overlay-pos-type :manual
:overlay-position overlay-position)) :overlay-position overlay-position))
@ -251,58 +257,67 @@
[interaction close-click-outside] [interaction close-click-outside]
(us/verify ::interaction interaction) (us/verify ::interaction interaction)
(us/verify ::us/boolean close-click-outside) (us/verify ::us/boolean close-click-outside)
(assert (#{:open-overlay :toggle-overlay} (:action-type interaction))) (assert (has-overlay-opts interaction))
(assoc interaction :close-click-outside close-click-outside)) (assoc interaction :close-click-outside close-click-outside))
(defn set-background-overlay (defn set-background-overlay
[interaction background-overlay] [interaction background-overlay]
(us/verify ::interaction interaction) (us/verify ::interaction interaction)
(us/verify ::us/boolean background-overlay) (us/verify ::us/boolean background-overlay)
(assert (#{:open-overlay :toggle-overlay} (:action-type interaction))) (assert (has-overlay-opts interaction))
(assoc interaction :background-overlay background-overlay)) (assoc interaction :background-overlay background-overlay))
(defn- calc-overlay-position (defn- calc-overlay-pos-initial
[destination interaction shape objects overlay-pos-type] [destination shape objects overlay-pos-type]
(if (nil? destination) (if (= overlay-pos-type :manual)
(gpt/point 0 0)
(let [dest-frame (get objects destination) (let [dest-frame (get objects destination)
overlay-size (:selrect dest-frame) overlay-size (:selrect dest-frame)
orig-frame (if (= (:type shape) :frame) orig-frame (if (= (:type shape) :frame)
shape shape
(get objects (:frame-id shape))) (get objects (:frame-id shape)))
frame-size (:selrect orig-frame)] frame-size (:selrect orig-frame)]
(case overlay-pos-type (gpt/point (/ (- (:width frame-size) (:width overlay-size)) 2)
(/ (- (:height frame-size) (:height overlay-size)) 2)))
(gpt/point 0 0)))
(defn calc-overlay-position
[interaction base-frame dest-frame frame-offset]
(us/verify ::interaction interaction)
(assert (has-overlay-opts interaction))
(if (nil? dest-frame)
(gpt/point 0 0)
(let [overlay-size (:selrect dest-frame)
base-frame-size (:selrect base-frame)]
(case (:overlay-pos-type interaction)
:center :center
(gpt/point (/ (- (:width frame-size) (:width overlay-size)) 2) (gpt/point (/ (- (:width base-frame-size) (:width overlay-size)) 2)
(/ (- (:height frame-size) (:height overlay-size)) 2)) (/ (- (:height base-frame-size) (:height overlay-size)) 2))
:top-left :top-left
(gpt/point 0 0) (gpt/point 0 0)
:top-right :top-right
(gpt/point (- (:width frame-size) (:width overlay-size)) (gpt/point (- (:width base-frame-size) (:width overlay-size))
0) 0)
:top-center :top-center
(gpt/point (/ (- (:width frame-size) (:width overlay-size)) 2) (gpt/point (/ (- (:width base-frame-size) (:width overlay-size)) 2)
0) 0)
:bottom-left :bottom-left
(gpt/point 0 (gpt/point 0
(- (:height frame-size) (:height overlay-size))) (- (:height base-frame-size) (:height overlay-size)))
:bottom-right :bottom-right
(gpt/point (- (:width frame-size) (:width overlay-size)) (gpt/point (- (:width base-frame-size) (:width overlay-size))
(- (:height frame-size) (:height overlay-size))) (- (:height base-frame-size) (:height overlay-size)))
:bottom-center :bottom-center
(gpt/point (/ (- (:width frame-size) (:width overlay-size)) 2) (gpt/point (/ (- (:width base-frame-size) (:width overlay-size)) 2)
(- (:height frame-size) (:height overlay-size))) (- (:height base-frame-size) (:height overlay-size)))
:manual :manual
(:overlay-position interaction))))) (gpt/add (:overlay-position interaction) frame-offset)))))
;; -- Helpers for interactions ;; -- Helpers for interactions

8
frontend/src/app/main/data/workspace.cljs
View file

@ -1828,14 +1828,12 @@
nil ;; Drop onto self frame -> set destination to none nil ;; Drop onto self frame -> set destination to none
frame)] frame)]
;; Update or create interaction ;; Update or create interaction
(if index (if (and index (cti/has-destination (get interactions index)))
(update interactions index (update interactions index
#(cti/set-destination % (:id frame) shape objects)) #(cti/set-destination % (:id frame)))
(conj (or interactions []) (conj (or interactions [])
(cti/set-destination cti/default-interaction (cti/set-destination cti/default-interaction
(:id frame) (:id frame))))))))))))))))
shape
objects)))))))))))))))
(declare move-overlay-pos) (declare move-overlay-pos)
(declare finish-move-overlay-pos) (declare finish-move-overlay-pos)

3
frontend/src/app/main/refs.cljs
View file

@ -338,6 +338,9 @@
(def viewer-local (def viewer-local
(l/derived :viewer-local st/state)) (l/derived :viewer-local st/state))
(def viewer-interactions-show?
(l/derived :interactions-show? viewer-local))
(def comment-threads (def comment-threads
(l/derived :comment-threads st/state)) (l/derived :comment-threads st/state))

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

@ -6,6 +6,7 @@
(ns app.main.ui.viewer (ns app.main.ui.viewer
(:require (:require
[app.common.geom.point :as gpt]
[app.main.data.comments :as dcm] [app.main.data.comments :as dcm]
[app.main.data.viewer :as dv] [app.main.data.viewer :as dv]
[app.main.data.viewer.shortcuts :as sc] [app.main.data.viewer.shortcuts :as sc]
@ -60,6 +61,9 @@
(mf/deps frame zoom) (mf/deps frame zoom)
(fn [] (calculate-size frame zoom))) (fn [] (calculate-size frame zoom)))
interactions-mode
(:interactions-mode local)
on-click on-click
(mf/use-callback (mf/use-callback
(mf/deps section) (mf/deps section)
@ -98,7 +102,7 @@
:page page :page page
:frame frame :frame frame
:permissions perms :permissions perms
:zoom (:zoom local) :zoom zoom
:section section}] :section section}]
[:div.viewer-content [:div.viewer-content
@ -139,11 +143,13 @@
[:& interactions/viewport [:& interactions/viewport
{:frame frame {:frame frame
:base-frame frame
:frame-offset (gpt/point 0 0)
:size size :size size
:page page :page page
:file file :file file
:users users :users users
:local local}] :interactions-mode interactions-mode}]
(for [overlay (:overlays local)] (for [overlay (:overlays local)]
(let [size-over (calculate-size (:frame overlay) zoom)] (let [size-over (calculate-size (:frame overlay) zoom)]
@ -167,11 +173,13 @@
:top (* (:y (:position overlay)) zoom)}} :top (* (:y (:position overlay)) zoom)}}
[:& interactions/viewport [:& interactions/viewport
{:frame (:frame overlay) {:frame (:frame overlay)
:base-frame frame
:frame-offset (:position overlay)
:size size-over :size size-over
:page page :page page
:file file :file file
:users users :users users
:local local}]]]))]))]]])) :interactions-mode interactions-mode}]]]))]))]]]))
;; --- Component: Viewer Page ;; --- Component: Viewer Page

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

@ -41,25 +41,23 @@
(mf/defc viewport (mf/defc viewport
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]}
[{:keys [local page frame size]}] [{:keys [page interactions-mode frame base-frame frame-offset size]}]
(let [interactions? (:interactions-show? local) (let [objects (mf/use-memo
objects (mf/use-memo
(mf/deps page frame) (mf/deps page frame)
(prepare-objects page frame)) (prepare-objects page frame))
wrapper (mf/use-memo wrapper (mf/use-memo
(mf/deps objects interactions?) (mf/deps objects)
#(shapes/frame-container-factory objects interactions?)) #(shapes/frame-container-factory objects))
;; Retrieve frame again with correct modifier ;; Retrieve frames again with correct modifier
frame (get objects (:id frame)) frame (get objects (:id frame))
base-frame (get objects (:id base-frame))
on-click on-click
(fn [_] (fn [_]
(let [mode (:interactions-mode local)] (when (= interactions-mode :show-on-click)
(when (= mode :show-on-click) (st/emit! dv/flash-interactions)))
(st/emit! dv/flash-interactions))))
on-mouse-wheel on-mouse-wheel
(fn [event] (fn [event]
@ -77,7 +75,7 @@
(st/emit! (dcm/close-thread))))] (st/emit! (dcm/close-thread))))]
(mf/use-effect (mf/use-effect
(mf/deps local) ;; on-click event depends on local (mf/deps interactions-mode) ;; on-click event depends on interactions-mode
(fn [] (fn []
;; bind with passive=false to allow the event to be cancelled ;; bind with passive=false to allow the event to be cancelled
;; https://stackoverflow.com/a/57582286/3219895 ;; https://stackoverflow.com/a/57582286/3219895
@ -89,15 +87,16 @@
(events/unlistenByKey key2) (events/unlistenByKey key2)
(events/unlistenByKey key3))))) (events/unlistenByKey key3)))))
[:svg {:view-box (:vbox size) [:& (mf/provider shapes/base-frame-ctx) {:value base-frame}
:width (:width size) [:& (mf/provider shapes/frame-offset-ctx) {:value frame-offset}
:height (:height size) [:svg {:view-box (:vbox size)
:version "1.1" :width (:width size)
:xmlnsXlink "http://www.w3.org/1999/xlink" :height (:height size)
:xmlns "http://www.w3.org/2000/svg"} :version "1.1"
[:& wrapper {:shape frame :xmlnsXlink "http://www.w3.org/1999/xlink"
:show-interactions? interactions? :xmlns "http://www.w3.org/2000/svg"}
:view-box (:vbox size)}]])) [:& wrapper {:shape frame
:view-box (:vbox size)}]]]]))
(mf/defc interactions-menu (mf/defc interactions-menu

193
frontend/src/app/main/ui/viewer/shapes.cljs
View file

@ -14,6 +14,7 @@
[app.common.pages :as cp] [app.common.pages :as cp]
[app.common.types.interactions :as cti] [app.common.types.interactions :as cti]
[app.main.data.viewer :as dv] [app.main.data.viewer :as dv]
[app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.shapes.bool :as bool] [app.main.ui.shapes.bool :as bool]
[app.main.ui.shapes.circle :as circle] [app.main.ui.shapes.circle :as circle]
@ -31,20 +32,28 @@
[app.util.timers :as tm] [app.util.timers :as tm]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
(def base-frame-ctx (mf/create-context nil))
(def frame-offset-ctx (mf/create-context nil))
(defn activate-interaction (defn activate-interaction
[interaction shape] [interaction shape base-frame frame-offset objects]
(case (:action-type interaction) (case (:action-type interaction)
:navigate :navigate
(when-let [frame-id (:destination interaction)] (when-let [frame-id (:destination interaction)]
(st/emit! (dv/go-to-frame frame-id))) (st/emit! (dv/go-to-frame frame-id)))
:open-overlay :open-overlay
(let [frame-id (:destination interaction) (let [dest-frame-id (:destination interaction)
position (:overlay-position interaction)
close-click-outside (:close-click-outside interaction) close-click-outside (:close-click-outside interaction)
background-overlay (:background-overlay interaction)] background-overlay (:background-overlay interaction)
(when frame-id
(st/emit! (dv/open-overlay frame-id 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 position
close-click-outside close-click-outside
background-overlay)))) background-overlay))))
@ -77,7 +86,7 @@
;; Perform the opposite action of an interaction, if possible ;; Perform the opposite action of an interaction, if possible
(defn deactivate-interaction (defn deactivate-interaction
[interaction shape] [interaction shape base-frame frame-offset objects]
(case (:action-type interaction) (case (:action-type interaction)
:open-overlay :open-overlay
(let [frame-id (or (:destination interaction) (let [frame-id (or (:destination interaction)
@ -98,48 +107,53 @@
background-overlay)))) background-overlay))))
:close-overlay :close-overlay
(let [frame-id (:destination interaction) (let [dest-frame-id (:destination interaction)
position (:overlay-position interaction)
close-click-outside (:close-click-outside interaction) close-click-outside (:close-click-outside interaction)
background-overlay (:background-overlay interaction)] background-overlay (:background-overlay interaction)
(when frame-id
(st/emit! (dv/open-overlay frame-id 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 position
close-click-outside close-click-outside
background-overlay)))) background-overlay))))
nil)) nil))
(defn on-mouse-down (defn on-mouse-down
[event shape] [event shape base-frame frame-offset objects]
(let [interactions (->> (:interactions shape) (let [interactions (->> (:interactions shape)
(filter #(or (= (:event-type %) :click) (filter #(or (= (:event-type %) :click)
(= (:event-type %) :mouse-press))))] (= (:event-type %) :mouse-press))))]
(when (seq interactions) (when (seq interactions)
(dom/stop-propagation event) (dom/stop-propagation event)
(doseq [interaction interactions] (doseq [interaction interactions]
(activate-interaction interaction shape))))) (activate-interaction interaction shape base-frame frame-offset objects)))))
(defn on-mouse-up (defn on-mouse-up
[event shape] [event shape base-frame frame-offset objects]
(let [interactions (->> (:interactions shape) (let [interactions (->> (:interactions shape)
(filter #(= (:event-type %) :mouse-press)))] (filter #(= (:event-type %) :mouse-press)))]
(when (seq interactions) (when (seq interactions)
(dom/stop-propagation event) (dom/stop-propagation event)
(doseq [interaction interactions] (doseq [interaction interactions]
(deactivate-interaction interaction shape))))) (deactivate-interaction interaction shape base-frame frame-offset objects)))))
(defn on-mouse-enter (defn on-mouse-enter
[event shape] [event shape base-frame frame-offset objects]
(let [interactions (->> (:interactions shape) (let [interactions (->> (:interactions shape)
(filter #(or (= (:event-type %) :mouse-enter) (filter #(or (= (:event-type %) :mouse-enter)
(= (:event-type %) :mouse-over))))] (= (:event-type %) :mouse-over))))]
(when (seq interactions) (when (seq interactions)
(dom/stop-propagation event) (dom/stop-propagation event)
(doseq [interaction interactions] (doseq [interaction interactions]
(activate-interaction interaction shape))))) (activate-interaction interaction shape base-frame frame-offset objects)))))
(defn on-mouse-leave (defn on-mouse-leave
[event shape] [event shape base-frame frame-offset objects]
(let [interactions (->> (:interactions shape) (let [interactions (->> (:interactions shape)
(filter #(= (:event-type %) :mouse-leave))) (filter #(= (:event-type %) :mouse-leave)))
interactions-inv (->> (:interactions shape) interactions-inv (->> (:interactions shape)
@ -147,25 +161,25 @@
(when (or (seq interactions) (seq interactions-inv)) (when (or (seq interactions) (seq interactions-inv))
(dom/stop-propagation event) (dom/stop-propagation event)
(doseq [interaction interactions] (doseq [interaction interactions]
(activate-interaction interaction shape)) (activate-interaction interaction shape base-frame frame-offset objects))
(doseq [interaction interactions-inv] (doseq [interaction interactions-inv]
(deactivate-interaction interaction shape))))) (deactivate-interaction interaction shape base-frame frame-offset objects)))))
(defn on-load (defn on-load
[shape] [shape base-frame frame-offset objects]
(let [interactions (->> (:interactions shape) (let [interactions (->> (:interactions shape)
(filter #(= (:event-type %) :after-delay)))] (filter #(= (:event-type %) :after-delay)))]
(loop [interactions (seq interactions) (loop [interactions (seq interactions)
sems []] sems []]
(if-let [interaction (first interactions)] (if-let [interaction (first interactions)]
(let [sem (tm/schedule (:delay interaction) (let [sem (tm/schedule (:delay interaction)
#(activate-interaction interaction shape))] #(activate-interaction interaction shape base-frame frame-offset objects))]
(recur (next interactions) (recur (next interactions)
(conj sems sem))) (conj sems sem)))
sems)))) sems))))
(mf/defc interaction (mf/defc interaction
[{:keys [shape interactions show-interactions?]}] [{:keys [shape interactions interactions-show?]}]
(let [{:keys [x y width height]} (:selrect shape) (let [{:keys [x y width height]} (:selrect shape)
frame? (= :frame (:type shape))] frame? (= :frame (:type shape))]
(when-not (empty? interactions) (when-not (empty? interactions)
@ -175,20 +189,26 @@
:height (+ height 2) :height (+ height 2)
:fill "#31EFB8" :fill "#31EFB8"
:stroke "#31EFB8" :stroke "#31EFB8"
:stroke-width (if show-interactions? 1 0) :stroke-width (if interactions-show? 1 0)
:fill-opacity (if show-interactions? 0.2 0) :fill-opacity (if interactions-show? 0.2 0)
:style {:pointer-events (when frame? "none")} :style {:pointer-events (when frame? "none")}
:transform (geom/transform-matrix shape)}]))) :transform (geom/transform-matrix shape)}])))
(defn generic-wrapper-factory (defn generic-wrapper-factory
"Wrap some svg shape and add interaction controls" "Wrap some svg shape and add interaction controls"
[component show-interactions?] [component]
(mf/fnc generic-wrapper (mf/fnc generic-wrapper
{::mf/wrap-props false} {::mf/wrap-props false}
[props] [props]
(let [shape (unchecked-get props "shape") (let [shape (unchecked-get props "shape")
childs (unchecked-get props "childs") childs (unchecked-get props "childs")
frame (unchecked-get props "frame") 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) interactions (:interactions shape)
@ -197,16 +217,16 @@
(mf/use-effect (mf/use-effect
(fn [] (fn []
(let [sems (on-load shape)] (let [sems (on-load shape base-frame frame-offset objects)]
#(run! tm/dispose! sems)))) #(run! tm/dispose! sems))))
(if-not svg-element? (if-not svg-element?
[:> shape-container {:shape shape [:> shape-container {:shape shape
:cursor (when (cti/actionable? interactions) "pointer") :cursor (when (cti/actionable? interactions) "pointer")
:on-mouse-down #(on-mouse-down % shape) :on-mouse-down #(on-mouse-down % shape base-frame frame-offset objects)
:on-mouse-up #(on-mouse-up % shape) :on-mouse-up #(on-mouse-up % shape base-frame frame-offset objects)
:on-mouse-enter #(on-mouse-enter % shape) :on-mouse-enter #(on-mouse-enter % shape base-frame frame-offset objects)
:on-mouse-leave #(on-mouse-leave % shape)} :on-mouse-leave #(on-mouse-leave % shape base-frame frame-offset objects)}
[:& component {:shape shape [:& component {:shape shape
:frame frame :frame frame
@ -215,7 +235,7 @@
[:& interaction {:shape shape [:& interaction {:shape shape
:interactions interactions :interactions interactions
:show-interactions? show-interactions?}]] :interactions-show? interactions-show?}]]
;; Don't wrap svg elements inside a <g> otherwise some can break ;; Don't wrap svg elements inside a <g> otherwise some can break
[:& component {:shape shape [:& component {:shape shape
@ -223,64 +243,63 @@
:childs childs}])))) :childs childs}]))))
(defn frame-wrapper (defn frame-wrapper
[shape-container show-interactions?] [shape-container]
(generic-wrapper-factory (frame/frame-shape shape-container) show-interactions?)) (generic-wrapper-factory (frame/frame-shape shape-container)))
(defn group-wrapper (defn group-wrapper
[shape-container show-interactions?] [shape-container]
(generic-wrapper-factory (group/group-shape shape-container) show-interactions?)) (generic-wrapper-factory (group/group-shape shape-container)))
(defn bool-wrapper (defn bool-wrapper
[shape-container show-interactions?] [shape-container]
(generic-wrapper-factory (bool/bool-shape shape-container) show-interactions?)) (generic-wrapper-factory (bool/bool-shape shape-container)))
(defn svg-raw-wrapper (defn svg-raw-wrapper
[shape-container show-interactions?] [shape-container]
(generic-wrapper-factory (svg-raw/svg-raw-shape shape-container) show-interactions?)) (generic-wrapper-factory (svg-raw/svg-raw-shape shape-container)))
(defn rect-wrapper (defn rect-wrapper
[show-interactions?] []
(generic-wrapper-factory rect/rect-shape show-interactions?)) (generic-wrapper-factory rect/rect-shape))
(defn image-wrapper (defn image-wrapper
[show-interactions?] []
(generic-wrapper-factory image/image-shape show-interactions?)) (generic-wrapper-factory image/image-shape))
(defn path-wrapper (defn path-wrapper
[show-interactions?] []
(generic-wrapper-factory path/path-shape show-interactions?)) (generic-wrapper-factory path/path-shape))
(defn text-wrapper (defn text-wrapper
[show-interactions?] []
(generic-wrapper-factory text/text-shape show-interactions?)) (generic-wrapper-factory text/text-shape))
(defn circle-wrapper (defn circle-wrapper
[show-interactions?] []
(generic-wrapper-factory circle/circle-shape show-interactions?)) (generic-wrapper-factory circle/circle-shape))
(declare shape-container-factory) (declare shape-container-factory)
(defn frame-container-factory (defn frame-container-factory
[objects show-interactions?] [objects]
(let [shape-container (shape-container-factory objects show-interactions?) (let [shape-container (shape-container-factory objects)
frame-wrapper (frame-wrapper shape-container show-interactions?)] frame-wrapper (frame-wrapper shape-container)]
(mf/fnc frame-container (mf/fnc frame-container
{::mf/wrap-props false} {::mf/wrap-props false}
[props] [props]
(let [shape (obj/get props "shape") (let [shape (obj/get props "shape")
childs (mapv #(get objects %) (:shapes shape)) childs (mapv #(get objects %) (:shapes shape))
shape (geom/transform-shape shape) shape (geom/transform-shape shape)
props (obj/merge! #js {} props props (obj/merge! #js {} props
#js {:shape shape #js {:shape shape
:childs childs :childs childs
:objects objects :objects objects})]
:show-interactions? show-interactions?})]
[:> frame-wrapper props])))) [:> frame-wrapper props]))))
(defn group-container-factory (defn group-container-factory
[objects show-interactions?] [objects]
(let [shape-container (shape-container-factory objects show-interactions?) (let [shape-container (shape-container-factory objects)
group-wrapper (group-wrapper shape-container show-interactions?)] group-wrapper (group-wrapper shape-container)]
(mf/fnc group-container (mf/fnc group-container
{::mf/wrap-props false} {::mf/wrap-props false}
[props] [props]
@ -288,14 +307,13 @@
childs (mapv #(get objects %) (:shapes shape)) childs (mapv #(get objects %) (:shapes shape))
props (obj/merge! #js {} props props (obj/merge! #js {} props
#js {:childs childs #js {:childs childs
:objects objects :objects objects})]
:show-interactions? show-interactions?})]
[:> group-wrapper props])))) [:> group-wrapper props]))))
(defn bool-container-factory (defn bool-container-factory
[objects show-interactions?] [objects]
(let [shape-container (shape-container-factory objects show-interactions?) (let [shape-container (shape-container-factory objects)
bool-wrapper (bool-wrapper shape-container show-interactions?)] bool-wrapper (bool-wrapper shape-container)]
(mf/fnc bool-container (mf/fnc bool-container
{::mf/wrap-props false} {::mf/wrap-props false}
[props] [props]
@ -303,14 +321,13 @@
childs (select-keys objects (cp/get-children (:id shape) objects)) childs (select-keys objects (cp/get-children (:id shape) objects))
props (obj/merge! #js {} props props (obj/merge! #js {} props
#js {:childs childs #js {:childs childs
:objects objects :objects objects})]
:show-interactions? show-interactions?})]
[:> bool-wrapper props])))) [:> bool-wrapper props]))))
(defn svg-raw-container-factory (defn svg-raw-container-factory
[objects show-interactions?] [objects]
(let [shape-container (shape-container-factory objects show-interactions?) (let [shape-container (shape-container-factory objects)
svg-raw-wrapper (svg-raw-wrapper shape-container show-interactions?)] svg-raw-wrapper (svg-raw-wrapper shape-container)]
(mf/fnc svg-raw-container (mf/fnc svg-raw-container
{::mf/wrap-props false} {::mf/wrap-props false}
[props] [props]
@ -318,31 +335,30 @@
childs (mapv #(get objects %) (:shapes shape)) childs (mapv #(get objects %) (:shapes shape))
props (obj/merge! #js {} props props (obj/merge! #js {} props
#js {:childs childs #js {:childs childs
:objects objects :objects objects})]
:show-interactions? show-interactions?})]
[:> svg-raw-wrapper props])))) [:> svg-raw-wrapper props]))))
(defn shape-container-factory (defn shape-container-factory
[objects show-interactions?] [objects]
(let [path-wrapper (path-wrapper show-interactions?) (let [path-wrapper (path-wrapper)
text-wrapper (text-wrapper show-interactions?) text-wrapper (text-wrapper)
rect-wrapper (rect-wrapper show-interactions?) rect-wrapper (rect-wrapper)
image-wrapper (image-wrapper show-interactions?) image-wrapper (image-wrapper)
circle-wrapper (circle-wrapper show-interactions?)] circle-wrapper (circle-wrapper)]
(mf/fnc shape-container (mf/fnc shape-container
{::mf/wrap-props false} {::mf/wrap-props false}
[props] [props]
(let [group-container (let [group-container
(mf/use-memo (mf/deps objects) (mf/use-memo (mf/deps objects)
#(group-container-factory objects show-interactions?)) #(group-container-factory objects))
bool-container bool-container
(mf/use-memo (mf/deps objects) (mf/use-memo (mf/deps objects)
#(bool-container-factory objects show-interactions?)) #(bool-container-factory objects))
svg-raw-container svg-raw-container
(mf/use-memo (mf/deps objects) (mf/use-memo (mf/deps objects)
#(svg-raw-container-factory objects show-interactions?)) #(svg-raw-container-factory objects))
shape (unchecked-get props "shape") shape (unchecked-get props "shape")
frame (unchecked-get props "frame")] frame (unchecked-get props "frame")]
(when (and shape (not (:hidden shape))) (when (and shape (not (:hidden shape)))
@ -363,7 +379,7 @@
(mf/defc frame-svg (mf/defc frame-svg
{::mf/wrap [mf/memo]} {::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)) (let [modifier (-> (gpt/point (:x frame) (:y frame))
(gpt/negate) (gpt/negate)
(gmt/translate-matrix)) (gmt/translate-matrix))
@ -381,7 +397,7 @@
" " (:height frame 0)) " " (:height frame 0))
wrapper (mf/use-memo wrapper (mf/use-memo
(mf/deps objects) (mf/deps objects)
#(frame-container-factory objects show-interactions?))] #(frame-container-factory objects))]
[:svg {:view-box vbox [:svg {:view-box vbox
:width width :width width
@ -390,6 +406,5 @@
:xmlnsXlink "http://www.w3.org/1999/xlink" :xmlnsXlink "http://www.w3.org/1999/xlink"
:xmlns "http://www.w3.org/2000/svg"} :xmlns "http://www.w3.org/2000/svg"}
[:& wrapper {:shape frame [:& wrapper {:shape frame
:show-interactions? show-interactions?
:view-box vbox}]])) :view-box vbox}]]))

15
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
View file

@ -75,8 +75,6 @@
frames (mf/use-memo (mf/deps objects) frames (mf/use-memo (mf/deps objects)
#(cp/select-frames objects)) #(cp/select-frames objects))
event-type (:event-type interaction)
action-type (:action-type interaction)
overlay-pos-type (:overlay-pos-type interaction) overlay-pos-type (:overlay-pos-type interaction)
close-click-outside? (:close-click-outside interaction false) close-click-outside? (:close-click-outside interaction false)
background-overlay? (:background-overlay interaction false) background-overlay? (:background-overlay interaction false)
@ -96,7 +94,7 @@
change-action-type change-action-type
(fn [event] (fn [event]
(let [value (-> event dom/get-target dom/get-value d/read-string)] (let [value (-> event dom/get-target dom/get-value d/read-string)]
(update-interaction index #(cti/set-action-type % value shape objects)))) (update-interaction index #(cti/set-action-type % value))))
change-delay change-delay
(fn [value] (fn [value]
@ -106,7 +104,7 @@
(fn [event] (fn [event]
(let [value (-> event dom/get-target dom/get-value) (let [value (-> event dom/get-target dom/get-value)
value (when (not= value "") (uuid/uuid value))] value (when (not= value "") (uuid/uuid value))]
(update-interaction index #(cti/set-destination % value shape objects)))) (update-interaction index #(cti/set-destination % value))))
change-url change-url
(fn [event] (fn [event]
@ -161,7 +159,7 @@
name])]] name])]]
; Delay ; Delay
(when (= event-type :after-delay) (when (cti/has-delay interaction)
[:div.interactions-element [:div.interactions-element
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-delay")] [:span.element-set-subtitle.wide (tr "workspace.options.interaction-delay")]
[:div.input-element [:div.input-element
@ -181,7 +179,7 @@
[:option {:value (str value)} name])]] [:option {:value (str value)} name])]]
; Destination ; Destination
(when (#{:navigate :open-overlay :toggle-overlay :close-overlay} action-type) (when (cti/has-destination interaction)
[:div.interactions-element [:div.interactions-element
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-destination")] [:span.element-set-subtitle.wide (tr "workspace.options.interaction-destination")]
[:select.input-select [:select.input-select
@ -194,14 +192,13 @@
[:option {:value (str (:id frame))} (:name frame)]))]]) [:option {:value (str (:id frame))} (:name frame)]))]])
; URL ; URL
(when (= action-type :open-url) (when (cti/has-url interaction)
[:div.interactions-element [:div.interactions-element
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-url")] [:span.element-set-subtitle.wide (tr "workspace.options.interaction-url")]
[:input.input-text {:default-value (str (:url interaction)) [:input.input-text {:default-value (str (:url interaction))
:on-blur change-url}]]) :on-blur change-url}]])
(when (or (= action-type :open-overlay) (when (cti/has-overlay-opts interaction)
(= action-type :toggle-overlay))
[:* [:*
; Overlay position (select) ; Overlay position (select)
[:div.interactions-element [:div.interactions-element

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

@ -9,6 +9,7 @@
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.pages.helpers :as cph] [app.common.pages.helpers :as cph]
[app.common.types.interactions :as cti]
[app.main.data.workspace :as dw] [app.main.data.workspace :as dw]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
@ -231,8 +232,7 @@
[:circle {:cx (+ marker-x (/ width 2)) [:circle {:cx (+ marker-x (/ width 2))
:cy (+ marker-y (/ height 2)) :cy (+ marker-y (/ height 2))
:r 8 :r 8
:fill "#31EFB8"}] :fill "#31EFB8"}]]))))
]))))
(mf/defc interactions (mf/defc interactions
[{:keys [selected hover-disabled?] :as props}] [{:keys [selected hover-disabled?] :as props}]
@ -258,7 +258,8 @@
[:g.non-selected [:g.non-selected
(for [shape active-shapes] (for [shape active-shapes]
(for [[index interaction] (d/enumerate (:interactions shape))] (for [[index interaction] (d/enumerate (:interactions shape))]
(let [dest-shape (get objects (:destination interaction)) (let [dest-shape (when (cti/destination? interaction)
(get objects (:destination interaction)))
selected? (contains? selected (:id shape)) selected? (contains? selected (:id shape))
level (calc-level index (:interactions shape))] level (calc-level index (:interactions shape))]
(when-not selected? (when-not selected?
@ -286,7 +287,8 @@
(if (seq (:interactions shape)) (if (seq (:interactions shape))
(for [[index interaction] (d/enumerate (:interactions shape))] (for [[index interaction] (d/enumerate (:interactions shape))]
(when-not (= index editing-interaction-index) (when-not (= index editing-interaction-index)
(let [dest-shape (get objects (:destination interaction)) (let [dest-shape (when (cti/destination? interaction)
(get objects (:destination interaction)))
level (calc-level index (:interactions shape))] level (calc-level index (:interactions shape))]
[:* [:*
[:& interaction-path {:key (str (:id shape) "-" index) [:& interaction-path {:key (str (:id shape) "-" index)
@ -298,8 +300,9 @@
:selected? true :selected? true
:action-type (:action-type interaction) :action-type (:action-type interaction)
:zoom zoom}] :zoom zoom}]
(when (or (= (:action-type interaction) :open-overlay) (when (and (or (= (:action-type interaction) :open-overlay)
(= (:action-type interaction) :toggle-overlay)) (= (:action-type interaction) :toggle-overlay))
(= (: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 {:key (str "pos" (:id shape) "-" index) [:& overlay-marker {:key (str "pos" (:id shape) "-" index)