From fdb65331495b13692a70ef231aa28134ff498db0 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 7 Mar 2022 15:01:12 +0100 Subject: [PATCH] :sparkles: Minor improvement on workspace flags and modal event tracing --- frontend/src/app/main/data/events.cljs | 7 +++- frontend/src/app/main/data/modal.cljs | 6 +++ frontend/src/app/main/data/workspace.cljs | 29 ++++++------- .../app/main/data/workspace/shortcuts.cljs | 28 ++++++++----- frontend/src/app/main/ui/workspace.cljs | 2 +- .../app/main/ui/workspace/context_menu.cljs | 9 ++-- .../src/app/main/ui/workspace/header.cljs | 41 +++++++++++-------- .../app/main/ui/workspace/left_toolbar.cljs | 30 +++++++------- .../src/app/main/ui/workspace/sidebar.cljs | 2 +- frontend/src/debug.cljs | 2 +- 10 files changed, 90 insertions(+), 66 deletions(-) diff --git a/frontend/src/app/main/data/events.cljs b/frontend/src/app/main/data/events.cljs index 547a74d50..5104d39fc 100644 --- a/frontend/src/app/main/data/events.cljs +++ b/frontend/src/app/main/data/events.cljs @@ -110,7 +110,9 @@ (derive :app.main.data.workspace.persistence/set-file-shard ::generic-action) (derive :app.main.data.workspace/create-page ::generic-action) (derive :app.main.data.workspace/set-workspace-layout ::generic-action) - +(derive :app.main.data.workspace/toggle-layout-flag ::generic-action) +(derive :app.main.data.modal/show-modal ::generic-action) +(derive :app.main.data.workspace.guides/update-guides ::generic-action) (defmulti process-event ptk/type) (defmethod process-event :default [_] nil) @@ -141,7 +143,8 @@ {:type "action" :name (or (::name mdata) (name type)) - :props (merge data (d/without-nils (::props mdata))) + :props (merge (d/without-nils data) + (d/without-nils (::props mdata))) :context (d/without-nils {:event-origin (::origin mdata) :event-namespace (namespace type) diff --git a/frontend/src/app/main/data/modal.cljs b/frontend/src/app/main/data/modal.cljs index daf3bb1b4..b0a3baf67 100644 --- a/frontend/src/app/main/data/modal.cljs +++ b/frontend/src/app/main/data/modal.cljs @@ -14,6 +14,8 @@ (defonce components (atom {})) +;; TODO: rename `:type` to `:name` + (defn show ([props] (show (uuid/next) (:type props) props)) @@ -21,6 +23,10 @@ (show (uuid/next) type props)) ([id type props] (ptk/reify ::show-modal + IDeref + (-deref [_] + (merge (dissoc props :type) {:name type})) + ptk/UpdateEvent (update [_ state] (assoc state ::modal {:id id diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index b7889b470..7e683ebd1 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/frontend/src/app/main/data/workspace.cljs @@ -417,25 +417,26 @@ ;; Workspace State Manipulation ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; --- Toggle layout flag +;; --- Layout Flags + +(defn toggle-layout-flag + [flag] + (ptk/reify ::toggle-layout-flag + IDeref + (-deref [this] + {:name flag}) -(defn toggle-layout-flags - [& flags] - (ptk/reify ::toggle-layout-flags ptk/UpdateEvent (update [_ state] (update state :workspace-layout - (fn [stored] - (reduce (fn [flags flag] - (if (contains? flags flag) - (disj flags flag) - (conj flags flag))) - stored - (d/concat-set flags))))))) + (fn [flags] + (if (contains? flags flag) + (disj flags flag) + (conj flags flag))))))) -(defn remove-layout-flags - [& flags] - (ptk/reify ::remove-layout-flags +(defn remove-layout-flag + [flag] + (ptk/reify ::remove-layout-flag ptk/UpdateEvent (update [_ state] (update state :workspace-layout diff --git a/frontend/src/app/main/data/workspace/shortcuts.cljs b/frontend/src/app/main/data/workspace/shortcuts.cljs index 64fcba629..bb5a2539b 100644 --- a/frontend/src/app/main/data/workspace/shortcuts.cljs +++ b/frontend/src/app/main/data/workspace/shortcuts.cljs @@ -6,6 +6,7 @@ (ns app.main.data.workspace.shortcuts (:require + [app.main.data.events :as ev] [app.main.data.shortcuts :as ds] [app.main.data.workspace :as dw] [app.main.data.workspace.colors :as mdc] @@ -24,6 +25,11 @@ ;; Shortcuts ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +(defn toggle-layout-flag + [flag] + (-> (dw/toggle-layout-flag flag) + (vary-meta assoc ::ev/origin "workspace-shortcuts"))) + ;; Shortcuts format https://github.com/ccampbell/mousetrap (def base-shortcuts @@ -42,18 +48,18 @@ :toggle-colorpalette {:tooltip (ds/alt "P") :command (ds/a-mod "p") :fn #(do (r/set-resize-type! :bottom) - (st/emit! (dw/remove-layout-flags :textpalette) - (dw/toggle-layout-flags :colorpalette)))} + (st/emit! (dw/remove-layout-flag :textpalette) + (toggle-layout-flag :colorpalette)))} :toggle-textpalette {:tooltip (ds/alt "T") :command (ds/a-mod "t") :fn #(do (r/set-resize-type! :bottom) - (st/emit! (dw/remove-layout-flags :colorpalette) - (dw/toggle-layout-flags :textpalette)))} + (st/emit! (dw/remove-layout-flag :colorpalette) + (toggle-layout-flag :textpalette)))} :toggle-rules {:tooltip (ds/meta-shift "R") :command (ds/c-mod "shift+r") - :fn #(st/emit! (dw/toggle-layout-flags :rules))} + :fn #(st/emit! (toggle-layout-flag :rules))} :select-all {:tooltip (ds/meta "A") :command (ds/c-mod "a") @@ -61,23 +67,23 @@ :toggle-grid {:tooltip (ds/meta "'") :command (ds/c-mod "'") - :fn #(st/emit! (dw/toggle-layout-flags :display-grid))} + :fn #(st/emit! (toggle-layout-flag :display-grid))} :toggle-snap-grid {:tooltip (ds/meta-shift "'") :command (ds/c-mod "shift+'") - :fn #(st/emit! (dw/toggle-layout-flags :snap-grid))} + :fn #(st/emit! (toggle-layout-flag :snap-grid))} :toggle-snap-guide {:tooltip (ds/meta-shift "G") :command (ds/c-mod "shift+G") - :fn #(st/emit! (dw/toggle-layout-flags :snap-guides))} + :fn #(st/emit! (toggle-layout-flag :snap-guides))} :toggle-alignment {:tooltip (ds/meta "\\") :command (ds/c-mod "\\") - :fn #(st/emit! (dw/toggle-layout-flags :dynamic-alignment))} + :fn #(st/emit! (toggle-layout-flag :dynamic-alignment))} :toggle-scale-text {:tooltip "K" :command "k" - :fn #(st/emit! (dw/toggle-layout-flags :scale-text))} + :fn #(st/emit! (toggle-layout-flag :scale-text))} :increase-zoom {:tooltip "+" :command ["+" "="] @@ -354,7 +360,7 @@ :hide-ui {:tooltip "\\" :command "\\" - :fn #(st/emit! (dw/toggle-layout-flags :hide-ui))} + :fn #(st/emit! (toggle-layout-flag :hide-ui))} }) diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index bf9f519c7..e75944d02 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/frontend/src/app/main/ui/workspace.cljs @@ -77,7 +77,7 @@ [:* [:& left-toolbar {:layout layout}] (if (:collapse-left-sidebar layout) - [:button.collapse-sidebar.collapsed {:on-click #(st/emit! (dw/toggle-layout-flags :collapse-left-sidebar))} + [:button.collapse-sidebar.collapsed {:on-click #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar))} i/arrow-slide] [:& left-sidebar {:layout layout}]) [:& right-sidebar {:section options-mode diff --git a/frontend/src/app/main/ui/workspace/context_menu.cljs b/frontend/src/app/main/ui/workspace/context_menu.cljs index f020dc1e4..42d920696 100644 --- a/frontend/src/app/main/ui/workspace/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/context_menu.cljs @@ -9,6 +9,7 @@ (:require [app.common.data :as d] [app.common.spec.page :as csp] + [app.main.data.events :as ev] [app.main.data.modal :as modal] [app.main.data.workspace :as dw] [app.main.data.workspace.interactions :as dwi] @@ -35,9 +36,6 @@ (dom/prevent-default event) (dom/stop-propagation event)) - - - (mf/defc menu-entry [{:keys [title shortcut on-click children selected? icon] :as props}] (let [submenu-ref (mf/use-ref nil) @@ -437,8 +435,9 @@ (mf/defc viewport-context-menu [] - (let [do-paste (st/emitf dw/paste) - do-hide-ui (st/emitf (dw/toggle-layout-flags :hide-ui))] + (let [do-paste #(st/emit! dw/paste) + do-hide-ui #(st/emit! (-> (dw/toggle-layout-flag :hide-ui) + (vary-meta assoc ::ev/origin "workspace-context-menu")))] [:* [:& menu-entry {:title (tr "workspace.shape.menu.paste") :shortcut (sc/get-tooltip :paste) diff --git a/frontend/src/app/main/ui/workspace/header.cljs b/frontend/src/app/main/ui/workspace/header.cljs index 91dbaae85..81b236140 100644 --- a/frontend/src/app/main/ui/workspace/header.cljs +++ b/frontend/src/app/main/ui/workspace/header.cljs @@ -206,7 +206,13 @@ (fn [item] (fn [event] (dom/stop-propagation event) - (reset! show-sub-menu? item))))] + (reset! show-sub-menu? item)))) + + toggle-flag + (mf/use-callback + (fn [flag] + (-> (dw/toggle-layout-flag flag) + (vary-meta assoc ::ev/origin "workspace-menu"))))] (mf/use-effect (mf/deps @editing?) @@ -275,7 +281,7 @@ [:li {:on-click #(st/emit! (dw/select-all))} [:span (tr "workspace.header.menu.select-all")] [:span.shortcut (sc/get-tooltip :select-all)]] - [:li {:on-click #(st/emit! (dw/toggle-layout-flags :scale-text))} + [:li {:on-click #(st/emit! (toggle-flag :scale-text))} [:span (if (contains? layout :scale-text) (tr "workspace.header.menu.disable-scale-text") @@ -285,21 +291,22 @@ [:& dropdown {:show (= @show-sub-menu? :view) :on-close #(reset! show-sub-menu? false)} [:ul.sub-menu.view - [:li {:on-click #(st/emit! (dw/toggle-layout-flags :rules))} + [:li {:on-click #(st/emit! (toggle-flag :rules))} [:span (if (contains? layout :rules) (tr "workspace.header.menu.hide-rules") (tr "workspace.header.menu.show-rules"))] [:span.shortcut (sc/get-tooltip :toggle-rules)]] - [:li {:on-click #(st/emit! (dw/toggle-layout-flags :display-grid))} + [:li {:on-click #(st/emit! (toggle-flag :display-grid))} [:span (if (contains? layout :display-grid) (tr "workspace.header.menu.hide-grid") (tr "workspace.header.menu.show-grid"))] [:span.shortcut (sc/get-tooltip :toggle-grid)]] - [:li {:on-click #(st/emit! (dw/toggle-layout-flags :sitemap :layers))} + [:li {:on-click #(st/emit! (toggle-flag :sitemap) + (toggle-flag :layers))} [:span (if (or (contains? layout :sitemap) (contains? layout :layers)) (tr "workspace.header.menu.hide-layers") @@ -308,8 +315,8 @@ [:li {:on-click (fn [] (r/set-resize-type! :bottom) - (st/emit! (dw/remove-layout-flags :textpalette) - (dw/toggle-layout-flags :colorpalette)))} + (st/emit! (dw/remove-layout-flag :textpalette) + (toggle-flag :colorpalette)))} [:span (if (contains? layout :colorpalette) (tr "workspace.header.menu.hide-palette") @@ -318,28 +325,29 @@ [:li {:on-click (fn [] (r/set-resize-type! :bottom) - (st/emit! (dw/remove-layout-flags :colorpalette) - (dw/toggle-layout-flags :textpalette)))} + (st/emit! (dw/remove-layout-flag :colorpalette) + (toggle-flag :textpalette)))} [:span (if (contains? layout :textpalette) (tr "workspace.header.menu.hide-textpalette") (tr "workspace.header.menu.show-textpalette"))] [:span.shortcut (sc/get-tooltip :toggle-textpalette)]] - [:li {:on-click #(st/emit! (dw/toggle-layout-flags :assets))} + [:li {:on-click #(st/emit! (toggle-flag :assets))} [:span (if (contains? layout :assets) (tr "workspace.header.menu.hide-assets") (tr "workspace.header.menu.show-assets"))] [:span.shortcut (sc/get-tooltip :toggle-assets)]] - [:li {:on-click #(st/emit! (dw/toggle-layout-flags :display-artboard-names))} + [:li {:on-click #(st/emit! (toggle-flag :display-artboard-names))} [:span (if (contains? layout :display-artboard-names) (tr "workspace.header.menu.hide-artboard-names") (tr "workspace.header.menu.show-artboard-names"))]] - [:li {:on-click #(st/emit! (dw/toggle-layout-flags :hide-ui))} + [:li {:on-click #(st/emit! (-> (toggle-flag :hide-ui) + (vary-meta assoc ::ev/origin "workspace-menu")))} [:span (tr "workspace.shape.menu.hide-ui")] [:span.shortcut (sc/get-tooltip :hide-ui)]]]] @@ -347,21 +355,21 @@ [:& dropdown {:show (= @show-sub-menu? :preferences) :on-close #(reset! show-sub-menu? false)} [:ul.sub-menu.preferences - [:li {:on-click #(st/emit! (dw/toggle-layout-flags :snap-guides))} + [:li {:on-click #(st/emit! (toggle-flag :snap-guides))} [:span (if (contains? layout :snap-guides) (tr "workspace.header.menu.disable-snap-guides") (tr "workspace.header.menu.enable-snap-guides"))] [:span.shortcut (sc/get-tooltip :toggle-snap-guide)]] - [:li {:on-click #(st/emit! (dw/toggle-layout-flags :snap-grid))} + [:li {:on-click #(st/emit! (toggle-flag :snap-grid))} [:span (if (contains? layout :snap-grid) (tr "workspace.header.menu.disable-snap-grid") (tr "workspace.header.menu.enable-snap-grid"))] [:span.shortcut (sc/get-tooltip :toggle-snap-grid)]] - [:li {:on-click #(st/emit! (dw/toggle-layout-flags :dynamic-alignment))} + [:li {:on-click #(st/emit! (toggle-flag :dynamic-alignment))} [:span (if (contains? layout :dynamic-alignment) (tr "workspace.header.menu.disable-dynamic-alignment") @@ -410,7 +418,8 @@ [:button.document-history {:alt (tr "workspace.sidebar.history" (sc/get-tooltip :toggle-history)) :class (when (contains? layout :document-history) "selected") - :on-click (st/emitf (dw/toggle-layout-flags :document-history))} + :on-click #(st/emit! (-> (dw/toggle-layout-flag :document-history) + (vary-meta assoc ::ev/origin "workspace-header")))} i/recent]] [:div.options-section diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.cljs b/frontend/src/app/main/ui/workspace/left_toolbar.cljs index dbddf0777..c9c4562af 100644 --- a/frontend/src/app/main/ui/workspace/left_toolbar.cljs +++ b/frontend/src/app/main/ui/workspace/left_toolbar.cljs @@ -45,16 +45,16 @@ :position (gpt/point x y)}] (st/emit! (dw/upload-media-workspace params)))))] - [:li.tooltip.tooltip-right - {:alt (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image)) - :on-click on-click} - [:* - i/image - [:& file-uploader {:input-id "image-upload" - :accept cm/str-image-types - :multi true - :ref ref - :on-selected on-files-selected}]]])) + [:li.tooltip.tooltip-right + {:alt (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image)) + :on-click on-click} + [:* + i/image + [:& file-uploader {:input-id "image-upload" + :accept cm/str-image-types + :multi true + :ref ref + :on-selected on-files-selected}]]])) (mf/defc left-toolbar {::mf/wrap [mf/memo] @@ -124,15 +124,15 @@ :class (when (contains? layout :textpalette) "selected") :on-click (fn [] (r/set-resize-type! :bottom) - (st/emit! (dw/remove-layout-flags :colorpalette) - (dw/toggle-layout-flags :textpalette)))} + (st/emit! (dw/remove-layout-flag :colorpalette) + (dw/toggle-layout-flag :textpalette)))} "Ag"] - + [:li.tooltip.tooltip-right {:alt (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette)) :class (when (contains? layout :colorpalette) "selected") :on-click (fn [] (r/set-resize-type! :bottom) - (st/emit! (dw/remove-layout-flags :textpalette) - (dw/toggle-layout-flags :colorpalette)))} + (st/emit! (dw/remove-layout-flag :textpalette) + (dw/toggle-layout-flag :colorpalette)))} i/palette]]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index 617386201..1b77fd22a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -36,7 +36,7 @@ handle-collapse (fn [] - (st/emit! (dw/toggle-layout-flags :collapse-left-sidebar)))] + (st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))] [:aside.settings-bar.settings-bar-left {:ref parent-ref :class (dom/classnames diff --git a/frontend/src/debug.cljs b/frontend/src/debug.cljs index 9c5cbbe07..8e469a0d4 100644 --- a/frontend/src/debug.cljs +++ b/frontend/src/debug.cljs @@ -282,4 +282,4 @@ (defn ^:export hide-ui [] (st/emit! - (dw/toggle-layout-flags :hide-ui))) + (dw/toggle-layout-flag :hide-ui)))