Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-13 15:31:26 -05:00
Code Issues Activity

🎉 Add new triggers for interactions

Browse source
This commit is contained in:
Andrés Moya 2021-09-22 15:57:28 +02:00
parent bc1372c2f9
commit 38a84d4598
5 changed files with 148 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -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

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

@ -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]

12
frontend/translations/en.po
View file

@ -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"

12
frontend/translations/es.po
View file

@ -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"