Improve performance related to workspace rendering when icon toolboxes is open.

frontend/uxbox/data/workspace.cljs

@@ -60,16 +60,11 @@
   (reify
     rs/UpdateEvent
     (-apply-update [_ state]
-      (let [key (keyword (str (name toolname) "-toolbox-enabled"))
-            val (get-in state [:workspace key] false)
-            state (assoc-in state [:workspace key] (not val))]
-        (if val
-          (update-in state [:workspace :toolboxes] disj toolname)
-          (update-in state [:workspace :toolboxes] conj toolname))))
-
-    IPrintWithWriter
-    (-pr-writer [mv writer _]
-      (-write writer "#<event:u.d.w/toggle-toolbox>"))))
+      (let [toolboxes (get-in state [:workspace :toolboxes])]
+        (assoc-in state [:workspace :toolboxes]
+                  (if (contains? toolboxes toolname)
+                    (disj toolboxes toolname)
+                    (conj toolboxes toolname)))))))
 
 (defn select-for-drawing
   "Mark a shape selected for drawing in the canvas."

frontend/uxbox/ui/workspace/base.cljs

@@ -31,6 +31,10 @@
   (as-> (l/in [:workspace]) $
     (l/focus-atom $ st/state)))
 
+(def ^:static active-toolboxes-state
+  (as-> (l/in [:workspace :toolboxes]) $
+    (l/focus-atom $ st/state)))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Scroll Stream
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

frontend/uxbox/ui/workspace/canvas.cljs

@@ -17,8 +17,7 @@
             [uxbox.ui.util :as util]
             [uxbox.ui.workspace.base :as wb]
             [uxbox.ui.workspace.grid :refer (grid)]
-            [uxbox.ui.workspace.options :refer (element-opts)]
-            [uxbox.ui.workspace.toolboxes :as toolboxes])
+            [uxbox.ui.workspace.options :refer (element-opts)])
   (:import goog.events.EventType))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

frontend/uxbox/ui/workspace/lateralmenu.cljs

@@ -19,7 +19,7 @@
 
 (defn lateralmenu-render
   [own]
-  (let [workspace (rum/react wb/workspace-state)
+  (let [toolboxes (rum/react wb/active-toolboxes-state)
         toggle #(rs/emit! (dw/toggle-toolbox %))]
     (html
      [:div#tool-bar.tool-bar
@@ -27,17 +27,17 @@
        [:ul.main-tools
         [:li.tooltip
          {:alt "Shapes (Ctrl + Shift + F)"
-          :class (when (:draw-toolbox-enabled workspace false) "current")
+          :class (when (contains? toolboxes :draw) "current")
           :on-click (partial toggle :draw)}
          i/shapes]
         [:li.tooltip
          {:alt "Icons (Ctrl + Shift + I)"
-          :class (when (:icons-toolbox-enabled workspace false) "current")
+          :class (when (contains? toolboxes :icons) "current")
           :on-click (partial toggle :icons)}
          i/icon-set]
         [:li.tooltip
          {:alt "Elements (Ctrl + Shift + L)"
-          :class (when (:layers-toolbox-enabled workspace false) "current")
+          :class (when (contains? toolboxes :layers) "current")
           :on-click (partial toggle :layers)}
          i/layers]
         [:li.tooltip

frontend/uxbox/ui/workspace/sidebar.cljs

@@ -1,6 +1,8 @@
 (ns uxbox.ui.workspace.sidebar
   (:require [sablono.core :as html :refer-macros [html]]
             [rum.core :as rum]
+            [cats.labs.lens :as l]
+            [uxbox.state :as st]
             [uxbox.router :as r]
             [uxbox.rstore :as rs]
             [uxbox.ui.mixins :as mx]
@@ -8,26 +10,28 @@
             [uxbox.ui.workspace.base :as wb]
             [uxbox.ui.workspace.toolboxes :as toolboxes]))
 
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Aside
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defn aside-render
   [own]
-  (let [workspace (rum/react wb/workspace-state)]
+  (println "aside-render")
+  (let [toolboxes (rum/react wb/active-toolboxes-state)]
     (html
      [:aside#settings-bar.settings-bar
       [:div.settings-bar-inside
-       (when (:draw-toolbox-enabled workspace false)
+       (when (contains? toolboxes :draw)
          (toolboxes/draw-tools))
-       (when (:icons-toolbox-enabled workspace false)
+       (when (contains? toolboxes :icons)
          (toolboxes/icons))
-       (when (:layers-toolbox-enabled workspace false)
+       (when (contains? toolboxes :layers)
          (toolboxes/layers))]])))
 
 (def aside
   (util/component
    {:render aside-render
     :name "aside"
-    :mixins [rum/reactive]}))
+    :mixins [rum/reactive mx/static]}))
 

frontend/uxbox/ui/workspace/toolboxes.cljs

@@ -1,9 +1,10 @@
 (ns uxbox.ui.workspace.toolboxes
   (:require [sablono.core :as html :refer-macros [html]]
             [rum.core :as rum]
+            [cats.labs.lens :as l]
             [uxbox.router :as r]
             [uxbox.rstore :as rs]
-            [uxbox.state :as s]
+            [uxbox.state :as st]
             [uxbox.shapes :as shapes]
             [uxbox.library :as library]
             [uxbox.util.data :refer (read-string)]
@@ -14,6 +15,18 @@
             [uxbox.ui.dom :as dom]
             [uxbox.ui.util :as util]))
 
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Lenses
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(def ^:private ^:static drawing-shape
+  "A focused vision of the drawing property
+  of the workspace status. This avoids
+  rerender the whole toolbox on each workspace
+  change."
+  (as-> (l/in [:workspace :drawing]) $
+    (l/focus-atom $ st/state)))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Draw Tools
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -119,10 +132,21 @@
     (swap! local assoc :collid value)
     (rs/emit! (dw/select-for-drawing nil))))
 
+(defn- icon-wrapper-render
+  [own icon]
+  (shapes/render icon))
+
+(def ^:static ^:private icon-wrapper
+  (util/component
+   {:render icon-wrapper-render
+    :name "icon-wrapper"
+    :mixins [mx/static]}))
+
 (defn icons-render
   [own]
+  (println "icons-render")
   (let [local (:rum/local own)
-        workspace (rum/react wb/workspace-state)
+        drawing (rum/react drawing-shape)
         collid (:collid @local)
         icons (get-in library/+icon-collections-by-id+ [collid :icons])
         on-close #(rs/emit! (dw/toggle-toolbox :icons))
@@ -144,11 +168,11 @@
                      :value (pr-str (:id icon-coll))}
             (:name icon-coll)])]]
        (for [icon icons
-             :let [selected? (= (:drawing workspace) icon)]]
+             :let [selected? (= drawing icon)]]
          [:div.figure-btn {:key (str (:id icon))
                            :class (when selected? "selected")
                            :on-click #(on-select icon)}
-          (shapes/render icon)])]])))
+          (icon-wrapper icon)])]])))
 
 (def ^:static icons
   (util/component