From bc1372c2f95b8c2da73f60baeafaaba4902677c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Wed, 22 Sep 2021 14:18:41 +0200 Subject: [PATCH] :tada: Add 'toggle overlay' action (and some fixes) --- common/src/app/common/types/interactions.cljc | 25 +++++++---- frontend/src/app/main/data/viewer.cljs | 43 ++++++++++++++++++- frontend/src/app/main/ui/viewer/shapes.cljs | 28 +++++++++--- .../sidebar/options/menus/interactions.cljs | 8 +++- .../ui/workspace/viewport/interactions.cljs | 5 ++- frontend/translations/en.po | 8 ++++ frontend/translations/es.po | 8 ++++ 7 files changed, 107 insertions(+), 18 deletions(-) diff --git a/common/src/app/common/types/interactions.cljc b/common/src/app/common/types/interactions.cljc index f506ea7ea..9ac6edebf 100644 --- a/common/src/app/common/types/interactions.cljc +++ b/common/src/app/common/types/interactions.cljc @@ -40,6 +40,7 @@ (s/def ::action-type #{:navigate :open-overlay + :toggle-overlay :close-overlay :prev-screen :open-url}) @@ -70,6 +71,13 @@ :opt-un [::close-click-outside ::background-overlay])) +(defmethod action-opts-spec :toggle-overlay [_] + (s/keys :req-un [::destination + ::overlay-position + ::overlay-pos-type] + :opt-un [::close-click-outside + ::background-overlay])) + (defmethod action-opts-spec :close-overlay [_] (s/keys :req-un [::destination])) @@ -137,7 +145,7 @@ :action-type action-type :destination (get interaction :destination)) - :open-overlay + (:open-overlay :toggle-overlay) (let [destination (get interaction :destination) overlay-pos-type (get interaction :overlay-pos-type :center) overlay-position (get interaction @@ -174,12 +182,13 @@ (us/verify ::destination destination) (assert (or (nil? destination) (some? (get objects destination)))) - (assert #(:navigate :open-overlay :close-overlay) (:action-type interaction)) + (assert (#{:navigate :open-overlay :toggle-overlay :close-overlay} (:action-type interaction))) (cond-> interaction :always (assoc :destination destination) - (= (:action-type interaction) :open-overlay) + (or (= (:action-type interaction) :open-overlay) + (= (:action-type interaction) :toggle-overlay)) (assoc :overlay-pos-type :center :overlay-position (calc-overlay-position destination interaction @@ -191,7 +200,7 @@ [interaction overlay-pos-type shape objects] (us/verify ::interaction interaction) (us/verify ::overlay-pos-type overlay-pos-type) - (assert #(= :open-overlay (:action-type interaction))) + (assert (#{:open-overlay :toggle-overlay} (:action-type interaction))) (assoc interaction :overlay-pos-type overlay-pos-type :overlay-position (calc-overlay-position (:destination interaction) @@ -204,7 +213,7 @@ [interaction overlay-pos-type shape objects] (us/verify ::interaction interaction) (us/verify ::overlay-pos-type overlay-pos-type) - (assert #(= :open-overlay (:action-type interaction))) + (assert (#{:open-overlay :toggle-overlay} (:action-type interaction))) (let [new-pos-type (if (= (:overlay-pos-type interaction) overlay-pos-type) :manual overlay-pos-type)] @@ -220,7 +229,7 @@ [interaction overlay-position] (us/verify ::interaction interaction) (us/verify ::overlay-position overlay-position) - (assert #(= :open-overlay (:action-type interaction))) + (assert (#{:open-overlay :toggle-overlay} (:action-type interaction))) (assoc interaction :overlay-pos-type :manual :overlay-position overlay-position)) @@ -229,14 +238,14 @@ [interaction close-click-outside] (us/verify ::interaction interaction) (us/verify ::us/boolean close-click-outside) - (assert #(= :open-overlay (:action-type interaction))) + (assert (#{:open-overlay :toggle-overlay} (:action-type 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 (:action-type interaction))) + (assert (#{:open-overlay :toggle-overlay} (:action-type interaction))) (assoc interaction :background-overlay background-overlay)) (defn- calc-overlay-position diff --git a/frontend/src/app/main/data/viewer.cljs b/frontend/src/app/main/data/viewer.cljs index 75063ce04..0ccf53049 100644 --- a/frontend/src/app/main/data/viewer.cljs +++ b/frontend/src/app/main/data/viewer.cljs @@ -292,6 +292,10 @@ (defn go-to-frame-by-index [index] (ptk/reify ::go-to-frame-by-index + ptk/UpdateEvent + (update [_ state] + (assoc-in state [:viewer-local :overlays] [])) + ptk/WatchEvent (watch [_ state _] (let [route (:route state) @@ -304,6 +308,10 @@ [frame-id] (us/verify ::us/uuid frame-id) (ptk/reify ::go-to-frame + ptk/UpdateEvent + (update [_ state] + (assoc-in state [:viewer-local :overlays] [])) + ptk/WatchEvent (watch [_ state _] (let [route (:route state) @@ -318,6 +326,10 @@ (defn go-to-section [section] (ptk/reify ::go-to-section + ptk/UpdateEvent + (update [_ state] + (assoc-in state [:viewer-local :overlays] [])) + ptk/WatchEvent (watch [_ state _] (let [route (:route state) @@ -342,7 +354,7 @@ frames (get-in state [:viewer :pages page-id :frames]) frame (d/seek #(= (:id %) frame-id) frames) overlays (get-in state [:viewer-local :overlays])] - (if-not (some #(= % frame) overlays) + (if-not (some #(= (:frame %) frame) overlays) (update-in state [:viewer-local :overlays] conj {:frame frame :position position @@ -350,6 +362,31 @@ :background-overlay background-overlay}) state))))) +(defn toggle-overlay + [frame-id position close-click-outside background-overlay] + (us/verify ::us/uuid frame-id) + (us/verify ::us/point position) + (us/verify (s/nilable ::us/boolean) close-click-outside) + (us/verify (s/nilable ::us/boolean) background-overlay) + (ptk/reify ::toggle-overlay + ptk/UpdateEvent + (update [_ state] + (let [route (:route state) + qparams (:query-params route) + page-id (:page-id qparams) + frames (get-in state [:viewer :pages page-id :frames]) + frame (d/seek #(= (:id %) frame-id) frames) + overlays (get-in state [:viewer-local :overlays])] + (if-not (some #(= (:frame %) frame) overlays) + (update-in state [:viewer-local :overlays] conj + {:frame frame + :position position + :close-click-outside close-click-outside + :background-overlay background-overlay}) + (update-in state [:viewer-local :overlays] + (fn [overlays] + (remove #(= (:id (:frame %)) frame-id) overlays)))))))) + (defn close-overlay [frame-id] (ptk/reify ::close-overlay @@ -448,6 +485,10 @@ (defn go-to-page [page-id] (ptk/reify ::go-to-page + ptk/UpdateEvent + (update [_ state] + (assoc-in state [:viewer-local :overlays] [])) + ptk/WatchEvent (watch [_ state _] (let [route (:route state) diff --git a/frontend/src/app/main/ui/viewer/shapes.cljs b/frontend/src/app/main/ui/viewer/shapes.cljs index a39d11894..7552503a3 100644 --- a/frontend/src/app/main/ui/viewer/shapes.cljs +++ b/frontend/src/app/main/ui/viewer/shapes.cljs @@ -36,7 +36,8 @@ :navigate (let [frame-id (:destination interaction)] (dom/stop-propagation event) - (st/emit! (dv/go-to-frame frame-id))) + (when frame-id + (st/emit! (dv/go-to-frame frame-id)))) :open-overlay (let [frame-id (:destination interaction) @@ -44,14 +45,29 @@ close-click-outside (:close-click-outside interaction) background-overlay (:background-overlay interaction)] (dom/stop-propagation event) - (st/emit! (dv/open-overlay frame-id - position - close-click-outside - background-overlay))) + (when frame-id + (st/emit! (dv/open-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) - (:frame-id shape))] + (if (= (:type shape) :frame) + (:id shape) + (:frame-id shape)))] (dom/stop-propagation event) (st/emit! (dv/close-overlay frame-id))) 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 545eea731..a547a87d6 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 @@ -31,6 +31,7 @@ [] {:navigate (tr "workspace.options.interaction-navigate-to") :open-overlay (tr "workspace.options.interaction-open-overlay") + :toggle-overlay (tr "workspace.options.interaction-toggle-overlay") :close-overlay (tr "workspace.options.interaction-close-overlay") :prev-screen (tr "workspace.options.interaction-prev-screen")}) @@ -41,6 +42,8 @@ (get destination :name (tr "workspace.options.interaction-none"))) :open-overlay (tr "workspace.options.interaction-open-overlay-dest" (get destination :name (tr "workspace.options.interaction-none"))) + :toggle-overlay (tr "workspace.options.interaction-toggle-overlay-dest" + (get destination :name (tr "workspace.options.interaction-none"))) :close-overlay (tr "workspace.options.interaction-close-overlay-dest" (get destination :name (tr "workspace.options.interaction-self"))) "--")) @@ -131,7 +134,7 @@ :on-change change-action-type} (for [[value name] (action-type-names)] [:option {:value (str value)} name])]] - (when (#{:navigate :open-overlay :close-overlay} action-type) + (when (#{:navigate :open-overlay :toggle-overlay :close-overlay} action-type) [:div.interactions-element [:span.element-set-subtitle.wide (tr "workspace.options.interaction-destination")] [:select.input-select @@ -142,7 +145,8 @@ (when (and (not= (:id frame) (:id shape)) ; A frame cannot navigate to itself (not= (:id frame) (:frame-id shape))) ; nor a shape to its container frame [:option {:value (str (:id frame))} (:name frame)]))]]) - (when (= action-type :open-overlay) + (when (or (= action-type :open-overlay) + (= action-type :toggle-overlay)) [:* [:div.interactions-element [:span.element-set-subtitle.wide (tr "workspace.options.interaction-position")] diff --git a/frontend/src/app/main/ui/workspace/viewport/interactions.cljs b/frontend/src/app/main/ui/workspace/viewport/interactions.cljs index 6d8c9f6cf..80a4f0a5e 100644 --- a/frontend/src/app/main/ui/workspace/viewport/interactions.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/interactions.cljs @@ -90,6 +90,8 @@ :open-overlay "M-5 -5 h7 v7 h-7 z M2 -2 h3.5 v7 h-7 v-2.5" + :toggle-overlay "M-5 -5 h7 v7 h-7 z M2 -2 h3.5 v7 h-7 v-2.5" + :close-overlay "M -5 -5 L 5 5 M -5 5 L 5 -5" nil) @@ -288,7 +290,8 @@ :selected? true :action-type (:action-type interaction) :zoom zoom}] - (when (= (:action-type interaction) :open-overlay) + (when (or (= (:action-type interaction) :open-overlay) + (= (:action-type interaction) :toggle-overlay)) (if (and (some? move-overlay-to) (= move-overlay-index index)) [:& overlay-marker {:key (str "pos" (:id shape) "-" index) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 2a28ffd7a..2ec40c3e1 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -2445,10 +2445,18 @@ msgstr "On Click" msgid "workspace.options.interaction-open-overlay" msgstr "Open overlay" +#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +msgid "workspace.options.interaction-toggle-overlay" +msgstr "Toggle overlay" + #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs msgid "workspace.options.interaction-open-overlay-dest" msgstr "Open overlay: %s" +#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +msgid "workspace.options.interaction-toggle-overlay-dest" +msgstr "Toggle overlay: %s" + #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs msgid "workspace.options.interaction-pos-manual" msgstr "Manual" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 344baeabd..2a3b21013 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -2328,10 +2328,18 @@ msgstr "On Click" msgid "workspace.options.interaction-open-overlay" msgstr "Open overlay" +#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +msgid "workspace.options.interaction-toggle-overlay" +msgstr "Toggle overlay" + #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs msgid "workspace.options.interaction-open-overlay-dest" msgstr "Open overlay: %s" +#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +msgid "workspace.options.interaction-toggle-overlay-dest" +msgstr "Toggle overlay: %s" + #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs msgid "workspace.options.interaction-pos-manual" msgstr "Manual"