From 480d4572352289d8b2800a434b77cb881e59a6fa Mon Sep 17 00:00:00 2001 From: Andres Gonzalez Date: Fri, 15 May 2026 14:32:21 +0200 Subject: [PATCH] :sparkles: Polish workspace find and replace UX Co-authored-by: Cursor --- frontend/src/app/main/data/workspace.cljs | 47 +++++- .../app/main/data/workspace/highlight.cljs | 26 ++++ .../src/app/main/data/workspace/texts.cljs | 30 ++-- .../app/main/ui/components/search_bar.cljs | 9 +- .../src/app/main/ui/workspace/main_menu.cljs | 4 +- .../main/ui/workspace/sidebar/layer_item.cljs | 5 +- .../app/main/ui/workspace/sidebar/layers.cljs | 141 ++++++++++++++---- .../main/ui/workspace/sidebar/shortcuts.cljs | 3 + frontend/translations/en.po | 18 ++- 9 files changed, 223 insertions(+), 60 deletions(-) diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index d61ed1fded..98d66dc593 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/frontend/src/app/main/data/workspace.cljs @@ -1493,18 +1493,47 @@ (update [_ state] (assoc-in state [:workspace-global :clipboard-style] style)))) -(defn open-layers-search +(defn- layers-search-config [mode] - (ptk/reify ::open-layers-search - ptk/UpdateEvent - (update [_ state] - (assoc-in state [:workspace-local :layers-panel-search] mode)))) + {:open? true + :mode mode + :scope (if (= mode :find-and-replace) :canvas :layers) + :find-replace-mode? (= mode :find-and-replace)}) -(def clear-layers-search - (ptk/reify ::clear-layers-search +(defn- layers-search-active? + [current target] + (and (:open? current false) + (= (:scope current) (:scope target)) + (= (:find-replace-mode? current) (:find-replace-mode? target)))) + +(defn open-layers-search + ([mode] (open-layers-search mode nil)) + ([mode options] + (let [force? (boolean (:force? options))] + (ptk/reify ::open-layers-search + ptk/UpdateEvent + (update [_ state] + (let [target (layers-search-config mode) + current (get-in state [:workspace-local :layers-search])] + (if (and (not force?) + (layers-search-active? current target)) + (update state :workspace-local dissoc :layers-search) + (assoc-in state [:workspace-local :layers-search] target)))))))) + +(def close-layers-search + (ptk/reify ::close-layers-search ptk/UpdateEvent (update [_ state] - (update state :workspace-local dissoc :layers-panel-search)))) + (update state :workspace-local dissoc :layers-search)))) + +(defn update-layers-search-scope + [scope] + (ptk/reify ::update-layers-search-scope + ptk/UpdateEvent + (update [_ state] + (if (get-in state [:workspace-local :layers-search]) + (assoc-in state [:workspace-local :layers-search :scope] scope) + state)))) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Exports @@ -1565,6 +1594,8 @@ ;; Highlight (dm/export dwh/highlight-shape) (dm/export dwh/dehighlight-shape) +(dm/export dwh/set-search-match-highlight) +(dm/export dwh/clear-search-match-highlight) ;; Shape flags (dm/export dwsh/update-shape-flags) diff --git a/frontend/src/app/main/data/workspace/highlight.cljs b/frontend/src/app/main/data/workspace/highlight.cljs index 6f91445bae..4cb252dffd 100644 --- a/frontend/src/app/main/data/workspace/highlight.cljs +++ b/frontend/src/app/main/data/workspace/highlight.cljs @@ -27,3 +27,29 @@ ptk/UpdateEvent (update [_ state] (update-in state [:workspace-local :highlighted] disj id)))) + +(defn set-search-match-highlight + "Highlight the active find/replace match on canvas and sidebar." + [current-id match-ids] + (dm/assert! (uuid? current-id)) + (let [match-ids (set match-ids)] + (ptk/reify ::set-search-match-highlight + ptk/UpdateEvent + (update [_ state] + (let [highlighted (-> (get-in state [:workspace-local :highlighted] #{}) + (set/difference match-ids) + (conj current-id))] + (-> state + (assoc-in [:workspace-local :search-match-highlight] current-id) + (assoc-in [:workspace-local :highlighted] highlighted))))))) + +(defn clear-search-match-highlight + [match-ids] + (let [match-ids (set match-ids)] + (ptk/reify ::clear-search-match-highlight + ptk/UpdateEvent + (update [_ state] + (-> state + (update-in [:workspace-local :highlighted] + #(set/difference (or % #{}) match-ids)) + (update :workspace-local dissoc :search-match-highlight)))))) diff --git a/frontend/src/app/main/data/workspace/texts.cljs b/frontend/src/app/main/data/workspace/texts.cljs index d492a43b4b..6d21a3d129 100644 --- a/frontend/src/app/main/data/workspace/texts.cljs +++ b/frontend/src/app/main/data/workspace/texts.cljs @@ -1206,18 +1206,24 @@ [ids search replacement] (ptk/reify ::replace-text-in-shapes ptk/WatchEvent - (watch [_ _ _] - (let [undo-group (uuid/next)] - (rx/of - (dwsh/update-shapes - ids - (fn [shape] - (if (and (= :text (:type shape)) (some? (:content shape))) - (let [new-content (txt/replace-text-in-content (:content shape) search replacement) - new-name (txt/generate-shape-name (txt/content->text new-content))] - (-> shape (assoc :content new-content) (assoc :name new-name))) - shape)) - {:attrs #{:content :name} :undo-group undo-group})))))) + (watch [_ state _] + (let [undo-group (uuid/next) + update-event + (dwsh/update-shapes + ids + (fn [shape] + (if (and (= :text (:type shape)) (some? (:content shape))) + (let [new-content (txt/replace-text-in-content (:content shape) search replacement) + new-name (txt/generate-shape-name (txt/content->text new-content))] + (-> shape (assoc :content new-content) (assoc :name new-name))) + shape)) + {:attrs #{:content :name} :undo-group undo-group})] + (rx/concat + (rx/of update-event) + (if (features/active-feature? state "render-wasm/v1") + (->> (rx/from ids) + (rx/map #(dwwt/resize-wasm-text-debounce % {:undo-group undo-group}))) + (rx/empty))))))) ;; -- Text Editor v3 diff --git a/frontend/src/app/main/ui/components/search_bar.cljs b/frontend/src/app/main/ui/components/search_bar.cljs index bfd50df0ff..90fe0969ac 100644 --- a/frontend/src/app/main/ui/components/search_bar.cljs +++ b/frontend/src/app/main/ui/components/search_bar.cljs @@ -13,7 +13,8 @@ [rumext.v2 :as mf])) (mf/defc search-bar* - [{:keys [id class value placeholder icon-id auto-focus on-change on-clear on-submit children]}] + [{:keys [id class value placeholder icon-id auto-focus input-ref + on-change on-clear on-submit on-key-down children]}] (let [handle-change (mf/use-fn (mf/deps on-change) @@ -31,8 +32,11 @@ handle-key-down (mf/use-fn - (mf/deps on-submit) + (mf/deps on-submit on-key-down) (fn [event] + (when (fn? on-key-down) + (on-key-down event)) + (let [enter? (kbd/enter? event) esc? (kbd/esc? event) node (dom/get-target event)] @@ -53,6 +57,7 @@ :size "s" :class (stl/css :icon)}]) [:input {:id id + :ref input-ref :class (stl/css :search-input) :on-change handle-change :value value diff --git a/frontend/src/app/main/ui/workspace/main_menu.cljs b/frontend/src/app/main/ui/workspace/main_menu.cljs index 7bdf91fb1f..ecd4b186bc 100644 --- a/frontend/src/app/main/ui/workspace/main_menu.cljs +++ b/frontend/src/app/main/ui/workspace/main_menu.cljs @@ -474,10 +474,10 @@ #(st/emit! (dw/select-all))) find - (mf/use-fn (fn [] (on-close) (st/emit! (dw/open-layers-search :find)))) + (mf/use-fn (fn [] (on-close) (st/emit! (dw/open-layers-search :find {:force? true})))) find-and-replace - (mf/use-fn (fn [] (on-close) (st/emit! (dw/open-layers-search :find-and-replace)))) + (mf/use-fn (fn [] (on-close) (st/emit! (dw/open-layers-search :find-and-replace {:force? true})))) undo (mf/use-fn diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs index 8ba48062fb..3b768a823b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs @@ -48,7 +48,10 @@ (let [{:keys [enter leave]} @sidebar-hover-queue enter (set/difference enter leave) - leave (set/difference leave enter)] + leave (set/difference leave enter) + search-match (get-in @st/state [:workspace-local :search-match-highlight]) + leave (cond-> leave + (some? search-match) (disj search-match))] (reset! sidebar-hover-queue {:enter #{} :leave #{}}) (reset! sidebar-hover-pending? false) diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index df02e1d0d9..ecff028d0f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs @@ -30,6 +30,7 @@ [app.util.keyboard :as kbd] [app.util.rxops :refer [throttle-fn]] [app.util.shape-icon :as usi] + [app.util.timers :as ts] [beicon.v2.core :as rx] [cuerdas.core :as str] [goog.events :as events] @@ -175,14 +176,16 @@ {::mf/wrap [mf/memo #(mf/throttle % 300)] ::mf/private true} [{:keys [objects parent-size]}] - (let [selected (use-selected-shapes) - root (get objects uuid/zero)] + (let [selected (use-selected-shapes) + highlighted (mf/deref ref:highlighted-shapes) + root (get objects uuid/zero)] [:ul {:class (stl/css :element-list)} (for [[index id] (d/enumerate (:shapes root))] (when-let [obj (get objects id)] [:> layer-item* {:item obj :selected selected + :highlighted highlighted :index index :objects objects :key id @@ -208,8 +211,8 @@ ;; --- Layers Toolbox -(def ^:private ref:layers-panel-search - (l/derived (l/key :layers-panel-search) refs/workspace-local)) +(def ^:private ref:layers-search + (l/derived (l/key :layers-search) refs/workspace-local)) ;; FIXME: optimize (defn- match-filters? @@ -254,7 +257,7 @@ :filters #{} :num-items 100 :current-match-idx 0})) - layers-search-request (mf/deref ref:layers-panel-search) + layers-search (mf/deref ref:layers-search) state (deref state*) current-filters (:filters state) current-items (:num-items state) @@ -265,6 +268,7 @@ find-replace-mode? (:find-replace-mode? state) search-scope (:search-scope state) current-match-idx (:current-match-idx state) + search-input-ref (mf/use-ref nil) clear-search-text (mf/use-fn @@ -296,22 +300,41 @@ clear-replace-text (mf/use-fn #(swap! state* assoc :replace-text "")) + f-key? (kbd/is-key-ignore-case? "f") + h-key? (kbd/is-key-ignore-case? "h") + + handle-find-shortcut-keydown + (mf/use-fn + (fn [event] + (when (kbd/mod? event) + (cond + (f-key? event) + (do + (dom/prevent-default event) + (dom/stop-propagation event) + (st/emit! (dw/open-layers-search :find))) + + (h-key? event) + (do + (dom/prevent-default event) + (dom/stop-propagation event) + (st/emit! (dw/open-layers-search :find-and-replace))))))) + set-search-scope (mf/use-fn (fn [scope] - (swap! state* assoc :search-scope scope :num-items 100 :current-match-idx 0))) + (swap! state* assoc :search-scope scope :num-items 100 :current-match-idx 0) + (st/emit! (dw/update-layers-search-scope scope)))) toggle-search (mf/use-fn + (mf/deps show-search?) (fn [event] (let [node (dom/get-current-target event)] (dom/blur! node) - (swap! state* (fn [state] - (-> state - (assoc :search-text "" :replace-text "" :filters #{}) - (assoc :show-menu false :find-replace-mode? false) - (assoc :search-scope :layers :num-items 100 :current-match-idx 0) - (update :show-search not))))))) + (if show-search? + (st/emit! dw/close-layers-search) + (st/emit! (dw/open-layers-search :find {:force? true})))))) remove-filter (mf/use-fn @@ -403,6 +426,24 @@ (st/emit! (dwt/replace-text-in-shapes text-match-ids current-search replace-text)) (st/emit! (dwt/replace-layer-names-in-shapes text-match-ids current-search replace-text)))))) + on-replace-keydown + (mf/use-fn + (mf/deps handle-replace) + (fn [event] + (when (or (kbd/enter? event) (kbd/space? event)) + (dom/prevent-default event) + (dom/stop-propagation event) + (handle-replace event)))) + + on-replace-all-keydown + (mf/use-fn + (mf/deps handle-replace-all) + (fn [event] + (when (or (kbd/enter? event) (kbd/space? event)) + (dom/prevent-default event) + (dom/stop-propagation event) + (handle-replace-all event)))) + filtered-objects (mf/with-memo [active? filtered-objects-all current-items] (when active? @@ -424,15 +465,44 @@ (events/unlistenByKey key1) (events/unlistenByKey key2)))) - (mf/with-effect [layers-search-request] - (when (some? layers-search-request) - (let [replace-mode? (= layers-search-request :find-and-replace)] + (mf/with-effect [layers-search] + (if-let [{:keys [open? find-replace-mode? scope]} layers-search] + (when open? (swap! state* (fn [s] - (-> s - (assoc :show-search true :find-replace-mode? replace-mode?) - (assoc :search-scope (if replace-mode? :canvas :layers)) - (assoc :search-text "" :replace-text "" :current-match-idx 0))))) - (st/emit! dw/clear-layers-search))) + (let [mode-changed? (not= (:find-replace-mode? s) find-replace-mode?) + opening? (not (:show-search s))] + (-> s + (assoc :show-search true + :find-replace-mode? find-replace-mode? + :search-scope scope) + (cond-> (or opening? mode-changed?) + (assoc :search-text "" :replace-text "" :current-match-idx 0))))))) + (swap! state* (fn [state] + (-> state + (assoc :search-text "" :replace-text "" :filters #{}) + (assoc :show-menu false :find-replace-mode? false) + (assoc :search-scope :layers :num-items 100 :current-match-idx 0) + (assoc :show-search false)))))) + + (mf/with-effect [(get layers-search :scope)] + (when (and layers-search (:open? layers-search)) + (swap! state* assoc :search-scope (:scope layers-search)))) + + (mf/with-effect [layers-search show-search?] + (when (and layers-search (:open? layers-search) show-search?) + (ts/raf + (fn [] + (when-let [node (mf/ref-val search-input-ref)] + (dom/focus! node)))))) + + (mf/with-effect [find-replace-mode? show-search? safe-match-idx text-match-ids] + (let [match-ids text-match-ids] + (when (and find-replace-mode? show-search? (seq match-ids)) + (let [current-id (nth match-ids safe-match-idx)] + (st/emit! (dw/set-search-match-highlight current-id match-ids)))) + (fn [] + (when (seq match-ids) + (st/emit! (dw/clear-search-match-highlight match-ids)))))) [filtered-objects handle-show-more @@ -440,9 +510,11 @@ (if show-search? [:* [:div {:class (stl/css :tool-window-bar :search)} - [:> search-bar* {:on-change update-search-text + [:> search-bar* {:input-ref search-input-ref + :on-change update-search-text :value current-search :on-clear clear-search-text + :on-key-down handle-find-shortcut-keydown :placeholder (tr "workspace.sidebar.layers.search")} [:button {:on-click on-toggle-filters-click :class (stl/css-case :filter-button true :opened show-menu? :active active?)} @@ -453,20 +525,20 @@ :icon i/close}]] [:div {:class (stl/css :search-scope-row)} - [:label {:class (stl/css-case :scope-option true :scope-selected (= :canvas search-scope))} - [:span {:class (stl/css-case :scope-radio true :scope-radio-checked (= :canvas search-scope))}] - [:input {:type "radio" :name "search-scope" :class (stl/css :scope-radio-input) - :checked (= :canvas search-scope) - :on-change (fn [_] (set-search-scope :canvas))}] - [:span {:class (stl/css :scope-label)} - (tr "workspace.sidebar.layers.search-scope-canvas")]] [:label {:class (stl/css-case :scope-option true :scope-selected (= :layers search-scope))} [:span {:class (stl/css-case :scope-radio true :scope-radio-checked (= :layers search-scope))}] [:input {:type "radio" :name "search-scope" :class (stl/css :scope-radio-input) :checked (= :layers search-scope) :on-change (fn [_] (set-search-scope :layers))}] [:span {:class (stl/css :scope-label)} - (tr "workspace.sidebar.layers.search-scope-layers")]]] + (tr "workspace.sidebar.layers.search-scope-layers")]] + [:label {:class (stl/css-case :scope-option true :scope-selected (= :canvas search-scope))} + [:span {:class (stl/css-case :scope-radio true :scope-radio-checked (= :canvas search-scope))}] + [:input {:type "radio" :name "search-scope" :class (stl/css :scope-radio-input) + :checked (= :canvas search-scope) + :on-change (fn [_] (set-search-scope :canvas))}] + [:span {:class (stl/css :scope-label)} + (tr "workspace.sidebar.layers.search-scope-canvas")]]] (when ^boolean find-replace-mode? [:* @@ -476,7 +548,8 @@ :value replace-text :placeholder (tr "workspace.sidebar.layers.replace-placeholder") :on-change (fn [event] - (update-replace-text (dom/get-target-val event) event))}] + (update-replace-text (dom/get-target-val event) event)) + :on-key-down handle-find-shortcut-keydown}] (when (not= "" replace-text) [:button {:class (stl/css :clear-icon) :on-click clear-replace-text} [:> icon* {:icon-id i/delete-text :size "s"}]])] @@ -492,12 +565,16 @@ [:span {:class (stl/css :no-matches)} (tr "workspace.sidebar.layers.no-matches")]))] [:div {:class (stl/css :replace-actions-row)} - [:button {:class (stl/css :replace-button) + [:button {:type "button" + :class (stl/css :replace-button) :on-click handle-replace + :on-key-down on-replace-keydown :disabled (or (zero? text-match-count) (str/empty? current-search))} (tr "workspace.sidebar.layers.replace")] - [:button {:class (stl/css :replace-button) + [:button {:type "button" + :class (stl/css :replace-button) :on-click handle-replace-all + :on-key-down on-replace-all-keydown :disabled (or (zero? text-match-count) (str/empty? current-search))} (tr "workspace.sidebar.layers.replace-all")]]]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs index 8a363d56eb..f58ffab8d1 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs @@ -111,6 +111,8 @@ (tr "shortcuts.duplicate") (tr "shortcuts.escape") (tr "shortcuts.export-shapes") + (tr "shortcuts.find") + (tr "shortcuts.find-and-replace") (tr "shortcuts.fit-all") (tr "shortcuts.flip-horizontal") (tr "shortcuts.flip-vertical") @@ -160,6 +162,7 @@ (tr "shortcuts.open-viewer") (tr "shortcuts.open-workspace") (tr "shortcuts.paste") + (tr "shortcuts.paste-replace") (tr "shortcuts.prev-frame") (tr "shortcuts.redo") (tr "shortcuts.rename") diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 4107130ea7..cfe66a096b 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -4662,6 +4662,14 @@ msgstr "Cancel" msgid "shortcuts.export-shapes" msgstr "Export shapes" +#: src/app/main/ui/workspace/sidebar/shortcuts.cljs +msgid "shortcuts.find" +msgstr "Find" + +#: src/app/main/ui/workspace/sidebar/shortcuts.cljs +msgid "shortcuts.find-and-replace" +msgstr "Find and replace" + #: src/app/main/ui/workspace/sidebar/shortcuts.cljs:114 msgid "shortcuts.fit-all" msgstr "Zoom to fit all" @@ -4866,6 +4874,10 @@ msgstr " or " msgid "shortcuts.paste" msgstr "Paste" +#: src/app/main/ui/workspace/sidebar/shortcuts.cljs +msgid "shortcuts.paste-replace" +msgstr "Paste and replace" + #: src/app/main/ui/workspace/sidebar/shortcuts.cljs:111 #, unused msgid "shortcuts.paste-props" @@ -8148,7 +8160,7 @@ msgstr "Masks" #: src/app/main/ui/workspace/sidebar/layers.cljs:293 msgid "workspace.sidebar.layers.search" -msgstr "Search layers" +msgstr "Find…" #: src/app/main/ui/workspace/sidebar/layers.cljs:316, src/app/main/ui/workspace/sidebar/layers.cljs:410 msgid "workspace.sidebar.layers.shapes" @@ -8180,11 +8192,11 @@ msgstr "No matches" #: src/app/main/ui/workspace/sidebar/layers.cljs msgid "workspace.sidebar.layers.search-scope-layers" -msgstr "Search layers" +msgstr "Layer names" #: src/app/main/ui/workspace/sidebar/layers.cljs msgid "workspace.sidebar.layers.search-scope-canvas" -msgstr "Search on canvas" +msgstr "Text content" #: src/app/main/ui/inspect/attributes/svg.cljs:56, src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs:101 msgid "workspace.sidebar.options.svg-attrs.title"