enhance focus behavior

Author: sprocketc

src/renderer/document/events.cljs

@@ -153,7 +153,8 @@
             (element.h/create {:tag :svg
                                :attrs {:width "800" :height "600"}})
             (history.h/finalize "Create document"))
-    :dispatch [:frame/center]}))
+    :fx [[:dispatch [:frame/center]]
+         [:focus nil]]}))
 
 (def file-picker-options
   {:startIn "documents"
@@ -195,7 +196,8 @@
             :always
             (-> (h/add-recent (:path document))
                 (assoc :active-document (:key document))))
-      :dispatch [:frame/center]})))
+      :fx [[:dispatch [:frame/center]]
+           [:focus nil]]})))
 
 (rf/reg-fx
  ::save-as
@@ -223,7 +225,7 @@
    (let [document (save-format db)]
      (if platform/electron?
        {:send-to-main {:action "saveDocument" :data (pr-str document)}}
-       ;; The path is not available when we use web APIs for security reasons, 
+       ;; The path is not available when we use web APIs for security reasons,
        ;; so we always dispatch save-as.
        {::save-as document}))))
 

src/renderer/events.cljs

@@ -7,6 +7,7 @@
    [renderer.handlers :as h]
    [renderer.frame.handlers :as frame-h]
    [renderer.tool.base :as tool]
+   [renderer.utils.dom :as dom]
    [renderer.utils.drop :as drop]
    [renderer.utils.local-storage :as local-storage]
    [renderer.utils.pointer :as pointer]))
@@ -49,10 +50,11 @@
  (fn [db [_ mdn]]
    (assoc db :mdn mdn)))
 
-(rf/reg-event-db
+(rf/reg-event-fx
  :set-tool
- (fn [db [_ tool]]
-   (h/set-tool db tool)))
+ (fn [{:keys [db]} [_ tool]]
+   {:db (h/set-tool db tool)
+    :focus nil}))
 
 (rf/reg-event-db
  :clear-restored
@@ -210,3 +212,9 @@
                                   (js/Blob.
                                    [text-html]
                                    #js {:type ["text/html"]}))})]))))
+
+(rf/reg-fx
+ :focus
+ (fn [id]
+   (when-let [element (if id (.getElementById js/document id) (dom/canvas-element))]
+     (js/setTimeout #(.focus element)))))

src/renderer/frame/events.cljs

@@ -22,21 +22,24 @@
  (fn [db [_ zoom]]
    (h/focus-selection db zoom)))
 
-(rf/reg-event-db
+(rf/reg-event-fx
  :frame/set-zoom
- (fn [{active-document :active-document :as db} [_ zoom]]
-   (let [current-zoom (get-in db [:documents active-document :zoom])]
-     (h/zoom db (/ zoom current-zoom)))))
+ (fn [{:keys [db]} [_ zoom]]
+   (let [current-zoom (get-in db [:documents (:active-document db) :zoom])]
+     {:db (h/zoom db (/ zoom current-zoom))
+      :focus nil})))
 
-(rf/reg-event-db
+(rf/reg-event-fx
  :frame/zoom-in
- (fn [db [_ _]]
-   (h/zoom db (/ 1 (:zoom-sensitivity db)))))
+ (fn [{:keys [db]} [_ _]]
+   {:db (h/zoom db (/ 1 (:zoom-sensitivity db)))
+    :focus nil}))
 
-(rf/reg-event-db
+(rf/reg-event-fx
  :frame/zoom-out
- (fn [db [_ _]]
-   (h/zoom db (:zoom-sensitivity db))))
+ (fn [{:keys [db]} [_ _]]
+   {:db (h/zoom db (:zoom-sensitivity db))
+    :focus nil}))
 
 (rf/reg-event-db
  :frame/pan-to-bounds

src/renderer/menubar/events.cljs

@@ -1,15 +1,8 @@
 (ns renderer.menubar.events
   (:require
-   [re-frame.core :as rf]
-   [renderer.utils.dom :as dom]))
-
-(rf/reg-fx
- ::focus
- (fn [id]
-   (when-let [element (if id (.getElementById js/document id) (dom/canvas-element))]
-     (js/setTimeout #(.focus element)))))
+   [re-frame.core :as rf]))
 
 (rf/reg-event-fx
  :menubar/focus
  (fn [_ [_ id]]
-   {::focus id}))
+   {:focus id}))

src/renderer/tool/shape/text.cljs

@@ -9,7 +9,6 @@
    [renderer.history.handlers :as history.h]
    [renderer.tool.base :as tool]
    [renderer.utils.bounds :as bounds]
-   [renderer.utils.dom :as dom]
    [renderer.utils.element :as element]
    [renderer.utils.units :as units]))
 
@@ -18,9 +17,9 @@
 (defmethod tool/properties :text
   []
   {:icon "text"
-   :description "The SVG <text> element draws a graphics element consisting 
-                 of text. It's possible to apply a gradient, pattern, 
-                 clipping path, mask, or filter to <text>, like any other SVG 
+   :description "The SVG <text> element draws a graphics element consisting
+                 of text. It's possible to apply a gradient, pattern,
+                 clipping path, mask, or filter to <text>, like any other SVG
                  graphics element."
    :attrs [:font-family
            :font-size
@@ -69,7 +68,6 @@
 
 (defn set-text-and-select-element
   [e el-k]
-  (.focus (dom/canvas-element)) ; REVIEW
   (rf/dispatch [:element/set-prop el-k :content (get-text e)])
   (rf/dispatch [:set-tool :select]))