mirror of
https://github.com/penpot/penpot.git
synced 2025-03-12 15:51:37 -05: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
|
|
@ -113,7 +113,7 @@
|
|||
|
||||
;; -- Helpers for interaction
|
||||
|
||||
(declare calc-overlay-position)
|
||||
(declare calc-overlay-pos-initial)
|
||||
|
||||
(defn set-event-type
|
||||
[interaction event-type shape]
|
||||
|
|
@ -135,7 +135,7 @@
|
|||
|
||||
|
||||
(defn set-action-type
|
||||
[interaction action-type shape objects]
|
||||
[interaction action-type]
|
||||
(us/verify ::interaction interaction)
|
||||
(us/verify ::action-type action-type)
|
||||
(if (= (:action-type interaction) action-type)
|
||||
|
|
@ -148,19 +148,10 @@
|
|||
:destination (get interaction :destination))
|
||||
|
||||
(:open-overlay :toggle-overlay)
|
||||
(let [destination (get interaction :destination)
|
||||
overlay-pos-type (get interaction :overlay-pos-type :center)
|
||||
overlay-position (get interaction
|
||||
:overlay-position
|
||||
(calc-overlay-position
|
||||
destination
|
||||
interaction
|
||||
shape
|
||||
objects
|
||||
overlay-pos-type))]
|
||||
(let [overlay-pos-type (get interaction :overlay-pos-type :center)
|
||||
overlay-position (get interaction :overlay-position (gpt/point 0 0))]
|
||||
(assoc interaction
|
||||
:action-type action-type
|
||||
:destination destination
|
||||
:overlay-pos-type overlay-pos-type
|
||||
:overlay-position overlay-position))
|
||||
|
||||
|
|
@ -178,20 +169,32 @@
|
|||
:action-type action-type
|
||||
:url (get interaction :url "")))))
|
||||
|
||||
(defn has-delay
|
||||
[interaction]
|
||||
(= (:event-type interaction) :after-delay))
|
||||
|
||||
(defn set-delay
|
||||
[interaction delay]
|
||||
(us/verify ::interaction interaction)
|
||||
(us/verify ::delay delay)
|
||||
(assert (= (:event-type interaction) :after-delay))
|
||||
(assert (has-delay interaction))
|
||||
(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
|
||||
[interaction destination shape objects]
|
||||
[interaction destination]
|
||||
(us/verify ::interaction interaction)
|
||||
(us/verify ::destination destination)
|
||||
(assert (or (nil? destination)
|
||||
(some? (get objects destination))))
|
||||
(assert (#{:navigate :open-overlay :toggle-overlay :close-overlay} (:action-type interaction)))
|
||||
(assert (has-destination interaction))
|
||||
(cond-> interaction
|
||||
:always
|
||||
(assoc :destination destination)
|
||||
|
|
@ -199,50 +202,53 @@
|
|||
(or (= (:action-type interaction) :open-overlay)
|
||||
(= (:action-type interaction) :toggle-overlay))
|
||||
(assoc :overlay-pos-type :center
|
||||
:overlay-position (calc-overlay-position destination
|
||||
interaction
|
||||
shape
|
||||
objects
|
||||
:center))))
|
||||
:overlay-position (gpt/point 0 0))))
|
||||
|
||||
(defn has-url
|
||||
[interaction]
|
||||
(= (:action-type interaction) :open-url))
|
||||
|
||||
(defn set-url
|
||||
[interaction url]
|
||||
(us/verify ::interaction interaction)
|
||||
(us/verify ::url url)
|
||||
(assert (= (:action-type interaction) :open-url))
|
||||
(assert (has-url interaction))
|
||||
(assoc interaction :url url))
|
||||
|
||||
(defn has-overlay-opts
|
||||
[interaction]
|
||||
(#{:open-overlay :toggle-overlay} (:action-type interaction)))
|
||||
|
||||
(defn set-overlay-pos-type
|
||||
[interaction overlay-pos-type shape objects]
|
||||
(us/verify ::interaction interaction)
|
||||
(us/verify ::overlay-pos-type overlay-pos-type)
|
||||
(assert (#{:open-overlay :toggle-overlay} (:action-type interaction)))
|
||||
(assert (has-overlay-opts interaction))
|
||||
(assoc interaction
|
||||
:overlay-pos-type overlay-pos-type
|
||||
:overlay-position (calc-overlay-position (:destination interaction)
|
||||
interaction
|
||||
shape
|
||||
objects
|
||||
overlay-pos-type)))
|
||||
:overlay-position (calc-overlay-pos-initial (:destination interaction)
|
||||
shape
|
||||
objects
|
||||
overlay-pos-type)))
|
||||
(defn toggle-overlay-pos-type
|
||||
[interaction overlay-pos-type shape objects]
|
||||
(us/verify ::interaction interaction)
|
||||
(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)
|
||||
:manual
|
||||
overlay-pos-type)]
|
||||
(assoc interaction
|
||||
:overlay-pos-type new-pos-type
|
||||
:overlay-position (calc-overlay-position (:destination interaction)
|
||||
interaction
|
||||
shape
|
||||
objects
|
||||
new-pos-type))))
|
||||
:overlay-position (calc-overlay-pos-initial (:destination interaction)
|
||||
shape
|
||||
objects
|
||||
new-pos-type))))
|
||||
(defn set-overlay-position
|
||||
[interaction overlay-position]
|
||||
(us/verify ::interaction interaction)
|
||||
(us/verify ::overlay-position overlay-position)
|
||||
(assert (#{:open-overlay :toggle-overlay} (:action-type interaction)))
|
||||
(assert (has-overlay-opts interaction))
|
||||
(assoc interaction
|
||||
:overlay-pos-type :manual
|
||||
:overlay-position overlay-position))
|
||||
|
|
@ -251,58 +257,67 @@
|
|||
[interaction close-click-outside]
|
||||
(us/verify ::interaction interaction)
|
||||
(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))
|
||||
|
||||
(defn set-background-overlay
|
||||
[interaction background-overlay]
|
||||
(us/verify ::interaction interaction)
|
||||
(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))
|
||||
|
||||
(defn- calc-overlay-position
|
||||
[destination interaction shape objects overlay-pos-type]
|
||||
(if (nil? destination)
|
||||
(gpt/point 0 0)
|
||||
(defn- calc-overlay-pos-initial
|
||||
[destination shape objects overlay-pos-type]
|
||||
(if (= overlay-pos-type :manual)
|
||||
(let [dest-frame (get objects destination)
|
||||
overlay-size (:selrect dest-frame)
|
||||
orig-frame (if (= (:type shape) :frame)
|
||||
shape
|
||||
(get objects (:frame-id shape)))
|
||||
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
|
||||
(gpt/point (/ (- (:width frame-size) (:width overlay-size)) 2)
|
||||
(/ (- (:height frame-size) (:height overlay-size)) 2))
|
||||
(gpt/point (/ (- (:width base-frame-size) (:width overlay-size)) 2)
|
||||
(/ (- (:height base-frame-size) (:height overlay-size)) 2))
|
||||
|
||||
:top-left
|
||||
(gpt/point 0 0)
|
||||
|
||||
:top-right
|
||||
(gpt/point (- (:width frame-size) (:width overlay-size))
|
||||
(gpt/point (- (:width base-frame-size) (:width overlay-size))
|
||||
0)
|
||||
|
||||
:top-center
|
||||
(gpt/point (/ (- (:width frame-size) (:width overlay-size)) 2)
|
||||
(gpt/point (/ (- (:width base-frame-size) (:width overlay-size)) 2)
|
||||
0)
|
||||
|
||||
:bottom-left
|
||||
(gpt/point 0
|
||||
(- (:height frame-size) (:height overlay-size)))
|
||||
(- (:height base-frame-size) (:height overlay-size)))
|
||||
|
||||
:bottom-right
|
||||
(gpt/point (- (:width frame-size) (:width overlay-size))
|
||||
(- (:height frame-size) (:height overlay-size)))
|
||||
(gpt/point (- (:width base-frame-size) (:width overlay-size))
|
||||
(- (:height base-frame-size) (:height overlay-size)))
|
||||
|
||||
:bottom-center
|
||||
(gpt/point (/ (- (:width frame-size) (:width overlay-size)) 2)
|
||||
(- (:height frame-size) (:height overlay-size)))
|
||||
(gpt/point (/ (- (:width base-frame-size) (:width overlay-size)) 2)
|
||||
(- (:height base-frame-size) (:height overlay-size)))
|
||||
|
||||
:manual
|
||||
(:overlay-position interaction)))))
|
||||
|
||||
(gpt/add (:overlay-position interaction) frame-offset)))))
|
||||
|
||||
;; -- Helpers for interactions
|
||||
|
||||
|
|
|
|||
|
|
@ -1828,14 +1828,12 @@
|
|||
nil ;; Drop onto self frame -> set destination to none
|
||||
frame)]
|
||||
;; Update or create interaction
|
||||
(if index
|
||||
(if (and index (cti/has-destination (get interactions index)))
|
||||
(update interactions index
|
||||
#(cti/set-destination % (:id frame) shape objects))
|
||||
#(cti/set-destination % (:id frame)))
|
||||
(conj (or interactions [])
|
||||
(cti/set-destination cti/default-interaction
|
||||
(:id frame)
|
||||
shape
|
||||
objects)))))))))))))))
|
||||
(:id frame))))))))))))))))
|
||||
|
||||
(declare move-overlay-pos)
|
||||
(declare finish-move-overlay-pos)
|
||||
|
|
|
|||
|
|
@ -338,6 +338,9 @@
|
|||
(def viewer-local
|
||||
(l/derived :viewer-local st/state))
|
||||
|
||||
(def viewer-interactions-show?
|
||||
(l/derived :interactions-show? viewer-local))
|
||||
|
||||
(def comment-threads
|
||||
(l/derived :comment-threads st/state))
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
(ns app.main.ui.viewer
|
||||
(:require
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.main.data.comments :as dcm]
|
||||
[app.main.data.viewer :as dv]
|
||||
[app.main.data.viewer.shortcuts :as sc]
|
||||
|
|
@ -60,6 +61,9 @@
|
|||
(mf/deps frame zoom)
|
||||
(fn [] (calculate-size frame zoom)))
|
||||
|
||||
interactions-mode
|
||||
(:interactions-mode local)
|
||||
|
||||
on-click
|
||||
(mf/use-callback
|
||||
(mf/deps section)
|
||||
|
|
@ -98,7 +102,7 @@
|
|||
:page page
|
||||
:frame frame
|
||||
:permissions perms
|
||||
:zoom (:zoom local)
|
||||
:zoom zoom
|
||||
:section section}]
|
||||
|
||||
[:div.viewer-content
|
||||
|
|
@ -139,11 +143,13 @@
|
|||
|
||||
[:& interactions/viewport
|
||||
{:frame frame
|
||||
:base-frame frame
|
||||
:frame-offset (gpt/point 0 0)
|
||||
:size size
|
||||
:page page
|
||||
:file file
|
||||
:users users
|
||||
:local local}]
|
||||
:interactions-mode interactions-mode}]
|
||||
|
||||
(for [overlay (:overlays local)]
|
||||
(let [size-over (calculate-size (:frame overlay) zoom)]
|
||||
|
|
@ -167,11 +173,13 @@
|
|||
:top (* (:y (:position overlay)) zoom)}}
|
||||
[:& interactions/viewport
|
||||
{:frame (:frame overlay)
|
||||
:base-frame frame
|
||||
:frame-offset (:position overlay)
|
||||
:size size-over
|
||||
:page page
|
||||
:file file
|
||||
:users users
|
||||
:local local}]]]))]))]]]))
|
||||
:interactions-mode interactions-mode}]]]))]))]]]))
|
||||
|
||||
;; --- Component: Viewer Page
|
||||
|
||||
|
|
|
|||
|
|
@ -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}]]))
|
||||
|
||||
|
|
|
|||
|
|
@ -75,8 +75,6 @@
|
|||
frames (mf/use-memo (mf/deps objects)
|
||||
#(cp/select-frames objects))
|
||||
|
||||
event-type (:event-type interaction)
|
||||
action-type (:action-type interaction)
|
||||
overlay-pos-type (:overlay-pos-type interaction)
|
||||
close-click-outside? (:close-click-outside interaction false)
|
||||
background-overlay? (:background-overlay interaction false)
|
||||
|
|
@ -96,7 +94,7 @@
|
|||
change-action-type
|
||||
(fn [event]
|
||||
(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
|
||||
(fn [value]
|
||||
|
|
@ -106,7 +104,7 @@
|
|||
(fn [event]
|
||||
(let [value (-> event dom/get-target dom/get-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
|
||||
(fn [event]
|
||||
|
|
@ -161,7 +159,7 @@
|
|||
name])]]
|
||||
|
||||
; Delay
|
||||
(when (= event-type :after-delay)
|
||||
(when (cti/has-delay interaction)
|
||||
[:div.interactions-element
|
||||
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-delay")]
|
||||
[:div.input-element
|
||||
|
|
@ -181,7 +179,7 @@
|
|||
[:option {:value (str value)} name])]]
|
||||
|
||||
; Destination
|
||||
(when (#{:navigate :open-overlay :toggle-overlay :close-overlay} action-type)
|
||||
(when (cti/has-destination interaction)
|
||||
[:div.interactions-element
|
||||
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-destination")]
|
||||
[:select.input-select
|
||||
|
|
@ -194,14 +192,13 @@
|
|||
[:option {:value (str (:id frame))} (:name frame)]))]])
|
||||
|
||||
; URL
|
||||
(when (= action-type :open-url)
|
||||
(when (cti/has-url interaction)
|
||||
[:div.interactions-element
|
||||
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-url")]
|
||||
[:input.input-text {:default-value (str (:url interaction))
|
||||
:on-blur change-url}]])
|
||||
|
||||
(when (or (= action-type :open-overlay)
|
||||
(= action-type :toggle-overlay))
|
||||
(when (cti/has-overlay-opts interaction)
|
||||
[:*
|
||||
; Overlay position (select)
|
||||
[:div.interactions-element
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.pages.helpers :as cph]
|
||||
[app.common.types.interactions :as cti]
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
|
|
@ -231,8 +232,7 @@
|
|||
[:circle {:cx (+ marker-x (/ width 2))
|
||||
:cy (+ marker-y (/ height 2))
|
||||
:r 8
|
||||
:fill "#31EFB8"}]
|
||||
]))))
|
||||
:fill "#31EFB8"}]]))))
|
||||
|
||||
(mf/defc interactions
|
||||
[{:keys [selected hover-disabled?] :as props}]
|
||||
|
|
@ -258,7 +258,8 @@
|
|||
[:g.non-selected
|
||||
(for [shape active-shapes]
|
||||
(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))
|
||||
level (calc-level index (:interactions shape))]
|
||||
(when-not selected?
|
||||
|
|
@ -286,7 +287,8 @@
|
|||
(if (seq (:interactions shape))
|
||||
(for [[index interaction] (d/enumerate (:interactions shape))]
|
||||
(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))]
|
||||
[:*
|
||||
[:& interaction-path {:key (str (:id shape) "-" index)
|
||||
|
|
@ -298,8 +300,9 @@
|
|||
:selected? true
|
||||
:action-type (:action-type interaction)
|
||||
:zoom zoom}]
|
||||
(when (or (= (:action-type interaction) :open-overlay)
|
||||
(= (:action-type interaction) :toggle-overlay))
|
||||
(when (and (or (= (:action-type interaction) :open-overlay)
|
||||
(= (:action-type interaction) :toggle-overlay))
|
||||
(= (:overlay-pos-type interaction) :manual))
|
||||
(if (and (some? move-overlay-to)
|
||||
(= move-overlay-index index))
|
||||
[:& overlay-marker {:key (str "pos" (:id shape) "-" index)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue