From 38a84d4598dee8075621988d75ceb8e702032423 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Wed, 22 Sep 2021 15:57:28 +0200 Subject: [PATCH] :tada: Add new triggers for interactions --- common/src/app/common/types/interactions.cljc | 11 +- frontend/src/app/main/ui/viewer/shapes.cljs | 155 +++++++++++++----- .../sidebar/options/menus/interactions.cljs | 5 +- frontend/translations/en.po | 12 ++ frontend/translations/es.po | 12 ++ 5 files changed, 148 insertions(+), 47 deletions(-) diff --git a/common/src/app/common/types/interactions.cljc b/common/src/app/common/types/interactions.cljc index 9ac6edebf..781a16ac9 100644 --- a/common/src/app/common/types/interactions.cljc +++ b/common/src/app/common/types/interactions.cljc @@ -17,8 +17,8 @@ ;; -- Options depending on event type (s/def ::event-type #{:click - :mouse-over :mouse-press + :mouse-over :mouse-enter :mouse-leave :after-delay}) @@ -111,7 +111,7 @@ (def default-delay 100) -;; -- Helpers +;; -- Helpers for interaction (declare calc-overlay-position) @@ -290,3 +290,10 @@ :manual (:overlay-position interaction))))) + +;; -- Helpers for interactions + +(defn actionable? + [interactions] + (some #(= (:event-type %) :click) interactions)) + diff --git a/frontend/src/app/main/ui/viewer/shapes.cljs b/frontend/src/app/main/ui/viewer/shapes.cljs index 7552503a3..1e328cc89 100644 --- a/frontend/src/app/main/ui/viewer/shapes.cljs +++ b/frontend/src/app/main/ui/viewer/shapes.cljs @@ -12,6 +12,7 @@ [app.common.geom.point :as gpt] [app.common.geom.shapes :as geom] [app.common.pages :as cp] + [app.common.types.interactions :as cti] [app.main.data.viewer :as dv] [app.main.store :as st] [app.main.ui.shapes.circle :as circle] @@ -27,51 +28,119 @@ [app.util.object :as obj] [rumext.alpha :as mf])) -(defn on-mouse-down - [event shape] - (doseq [interaction (->> (:interactions shape) - (filter #(= (:event-type %) :click)))] +(defn activate-interaction + [interaction shape] + (case (:action-type interaction) + :navigate + (when-let [frame-id (:destination interaction)] + (st/emit! (dv/go-to-frame frame-id))) - (case (:action-type interaction) - :navigate - (let [frame-id (:destination interaction)] - (dom/stop-propagation event) - (when frame-id - (st/emit! (dv/go-to-frame frame-id)))) + :open-overlay + (let [frame-id (:destination interaction) + position (:overlay-position interaction) + close-click-outside (:close-click-outside interaction) + background-overlay (:background-overlay interaction)] + (when frame-id + (st/emit! (dv/open-overlay frame-id + position + close-click-outside + background-overlay)))) - :open-overlay - (let [frame-id (:destination interaction) - position (:overlay-position interaction) - close-click-outside (:close-click-outside interaction) - background-overlay (:background-overlay interaction)] - (dom/stop-propagation event) - (when frame-id - (st/emit! (dv/open-overlay frame-id + :toggle-overlay + (let [frame-id (:destination interaction) + position (:overlay-position interaction) + close-click-outside (:close-click-outside interaction) + background-overlay (:background-overlay interaction)] + (when frame-id + (st/emit! (dv/toggle-overlay frame-id position close-click-outside background-overlay)))) - :toggle-overlay - (let [frame-id (:destination interaction) - position (:overlay-position interaction) - close-click-outside (:close-click-outside interaction) - background-overlay (:background-overlay interaction)] - (dom/stop-propagation event) - (when frame-id - (st/emit! (dv/toggle-overlay frame-id - position - close-click-outside - background-overlay)))) + :close-overlay + (let [frame-id (or (:destination interaction) + (if (= (:type shape) :frame) + (:id shape) + (:frame-id shape)))] + (st/emit! (dv/close-overlay frame-id))) - :close-overlay - (let [frame-id (or (:destination interaction) - (if (= (:type shape) :frame) - (:id shape) - (:frame-id shape)))] - (dom/stop-propagation event) - (st/emit! (dv/close-overlay frame-id))) + nil)) - nil))) +;; Perform the opposite action of an interaction, if possible +(defn deactivate-interaction + [interaction shape] + (case (:action-type interaction) + :open-overlay + (let [frame-id (or (:destination interaction) + (if (= (:type shape) :frame) + (:id shape) + (:frame-id shape)))] + (st/emit! (dv/close-overlay frame-id))) + + :toggle-overlay + (let [frame-id (:destination interaction) + position (:overlay-position interaction) + close-click-outside (:close-click-outside interaction) + background-overlay (:background-overlay interaction)] + (when frame-id + (st/emit! (dv/toggle-overlay frame-id + position + close-click-outside + background-overlay)))) + + :close-overlay + (let [frame-id (:destination interaction) + position (:overlay-position interaction) + close-click-outside (:close-click-outside interaction) + background-overlay (:background-overlay interaction)] + (when frame-id + (st/emit! (dv/open-overlay frame-id + position + close-click-outside + background-overlay)))) + nil)) + +(defn on-mouse-down + [event shape] + (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))))) + +(defn on-mouse-up + [event shape] + (let [interactions (->> (:interactions shape) + (filter #(= (:event-type %) :mouse-press)))] + (when (seq interactions) + (dom/stop-propagation event) + (doseq [interaction interactions] + (deactivate-interaction interaction shape))))) + +(defn on-mouse-enter + [event shape] + (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))))) + +(defn on-mouse-leave + [event shape] + (let [interactions (->> (:interactions shape) + (filter #(= (:event-type %) :mouse-leave))) + interactions-inv (->> (:interactions shape) + (filter #(= (:event-type %) :mouse-over)))] + (when (or (seq interactions) (seq interactions-inv)) + (dom/stop-propagation event) + (doseq [interaction interactions] + (activate-interaction interaction shape)) + (doseq [interaction interactions-inv] + (deactivate-interaction interaction shape))))) (mf/defc interaction [{:keys [shape interactions show-interactions?]}] @@ -101,18 +170,16 @@ interactions (:interactions shape) - on-mouse-down (mf/use-callback - (mf/deps shape) - (fn [event] - (on-mouse-down event shape))) - svg-element? (and (= :svg-raw (:type shape)) (not= :svg (get-in shape [:content :tag])))] (if-not svg-element? [:> shape-container {:shape shape - :cursor (when-not (empty? interactions) "pointer") - :on-mouse-down on-mouse-down} + :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)} [:& component {:shape shape :frame frame 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 a547a87d6..73d0040ea 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 @@ -21,7 +21,10 @@ (defn- event-type-names [] {:click (tr "workspace.options.interaction-on-click") - :mouse-over (tr "workspace.options.interaction-while-hovering")}) + :mouse-over (tr "workspace.options.interaction-while-hovering") + :mouse-press (tr "workspace.options.interaction-while-pressing") + :mouse-enter (tr "workspace.options.interaction-mouse-enter") + :mouse-leave (tr "workspace.options.interaction-mouse-leave")}) (defn- event-type-name [interaction] diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 2ec40c3e1..43b367fea 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -2425,6 +2425,14 @@ msgstr "Close overlay: %s" msgid "workspace.options.interaction-destination" msgstr "Destination" +#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +msgid "workspace.options.interaction-mouse-enter" +msgstr "Mouse enter" + +#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +msgid "workspace.options.interaction-mouse-leave" +msgstr "Mouse leave" + #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs msgid "workspace.options.interaction-navigate-to" msgstr "Navigate to" @@ -2505,6 +2513,10 @@ msgstr "Trigger" msgid "workspace.options.interaction-while-hovering" msgstr "While Hovering" +#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +msgid "workspace.options.interaction-while-pressing" +msgstr "While Pressing" + #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs msgid "workspace.options.interactions" msgstr "Interactions" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 2a3b21013..62a513061 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -2308,6 +2308,14 @@ msgstr "Close overlay: %s" msgid "workspace.options.interaction-destination" msgstr "Destino" +#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +msgid "workspace.options.interaction-mouse-enter" +msgstr "Mouse enter" + +#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +msgid "workspace.options.interaction-mouse-leave" +msgstr "Mouse leave" + #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs msgid "workspace.options.interaction-navigate-to" msgstr "Navigate to" @@ -2388,6 +2396,10 @@ msgstr "Trigger" msgid "workspace.options.interaction-while-hovering" msgstr "While Hovering" +#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +msgid "workspace.options.interaction-while-pressing" +msgstr "While Pressing" + #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs msgid "workspace.options.interactions" msgstr "Interacciones"