From 4df96b03eb7af1912c72dda7678486f7a49d5b1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Mon, 27 Sep 2021 16:13:50 +0200 Subject: [PATCH] :sparkles: Change overlay position algorithm and some refactor --- common/src/app/common/types/interactions.cljc | 125 +++++++----- frontend/src/app/main/data/workspace.cljs | 8 +- frontend/src/app/main/refs.cljs | 3 + frontend/src/app/main/ui/viewer.cljs | 14 +- .../src/app/main/ui/viewer/interactions.cljs | 39 ++-- frontend/src/app/main/ui/viewer/shapes.cljs | 193 ++++++++++-------- .../sidebar/options/menus/interactions.cljs | 15 +- .../ui/workspace/viewport/interactions.cljs | 15 +- 8 files changed, 225 insertions(+), 187 deletions(-) diff --git a/common/src/app/common/types/interactions.cljc b/common/src/app/common/types/interactions.cljc index 868d617c5..b793e293b 100644 --- a/common/src/app/common/types/interactions.cljc +++ b/common/src/app/common/types/interactions.cljc @@ -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 diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index 7b5028fef..4c8ab2b0d 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/frontend/src/app/main/data/workspace.cljs @@ -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) diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index 7f880572a..94994bcf1 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -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)) diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs index e84fc0361..a9eccfee9 100644 --- a/frontend/src/app/main/ui/viewer.cljs +++ b/frontend/src/app/main/ui/viewer.cljs @@ -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 diff --git a/frontend/src/app/main/ui/viewer/interactions.cljs b/frontend/src/app/main/ui/viewer/interactions.cljs index 15846eca9..1716dc7f8 100644 --- a/frontend/src/app/main/ui/viewer/interactions.cljs +++ b/frontend/src/app/main/ui/viewer/interactions.cljs @@ -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 diff --git a/frontend/src/app/main/ui/viewer/shapes.cljs b/frontend/src/app/main/ui/viewer/shapes.cljs index 5a2b88d73..ceb7e86de 100644 --- a/frontend/src/app/main/ui/viewer/shapes.cljs +++ b/frontend/src/app/main/ui/viewer/shapes.cljs @@ -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 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}]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs index 0da0941bd..4ff90f210 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/viewport/interactions.cljs b/frontend/src/app/main/ui/workspace/viewport/interactions.cljs index f39a52387..99454dce1 100644 --- a/frontend/src/app/main/ui/workspace/viewport/interactions.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/interactions.cljs @@ -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)