🎉 Add new triggers for interactions

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))
+

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
+(defn activate-interaction
-  [event shape]
+  [interaction shape]
-  (doseq [interaction (->> (:interactions shape)
+  (case (:action-type interaction)
-                           (filter #(= (:event-type %) :click)))]
+    :navigate
+    (when-let [frame-id (:destination interaction)]
+      (st/emit! (dv/go-to-frame frame-id)))
 
-    (case (:action-type interaction)
+    :open-overlay
-      :navigate
+    (let [frame-id            (:destination interaction)
-      (let [frame-id (:destination interaction)]
+          position            (:overlay-position interaction)
-        (dom/stop-propagation event)
+          close-click-outside (:close-click-outside interaction)
-        (when frame-id
+          background-overlay  (:background-overlay interaction)]
-          (st/emit! (dv/go-to-frame frame-id))))
+      (when frame-id
+        (st/emit! (dv/open-overlay frame-id
+                                   position
+                                   close-click-outside
+                                   background-overlay))))
 
-      :open-overlay
+    :toggle-overlay
-      (let [frame-id            (:destination interaction)
+    (let [frame-id            (:destination interaction)
-            position            (:overlay-position 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)]
-        (dom/stop-propagation event)
+      (when frame-id
-        (when frame-id
+        (st/emit! (dv/toggle-overlay frame-id
-          (st/emit! (dv/open-overlay frame-id
                                      position
                                      close-click-outside
                                      background-overlay))))
 
-      :toggle-overlay
+    :close-overlay
-      (let [frame-id            (:destination interaction)
+    (let [frame-id (or (:destination interaction)
-            position            (:overlay-position interaction)
+                       (if (= (:type shape) :frame)
-            close-click-outside (:close-click-outside interaction)
+                         (:id shape)
-            background-overlay  (:background-overlay interaction)]
+                         (:frame-id shape)))]
-        (dom/stop-propagation event)
+      (st/emit! (dv/close-overlay frame-id)))
-        (when frame-id
-          (st/emit! (dv/toggle-overlay frame-id
-                                       position
-                                       close-click-outside
-                                       background-overlay))))
 
-      :close-overlay
+    nil))
-      (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)))
+;; 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")
+                             :cursor (when (cti/actionable? interactions) "pointer")
-                             :on-mouse-down on-mouse-down}
+                             :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

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]

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"

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"