From abc743a08e4f9a239cfe2f23a3e637ff7c53561e Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 7 Jan 2016 17:33:40 +0200 Subject: [PATCH] Improve performance related to workspace rendering when icon toolboxes is open. --- frontend/uxbox/data/workspace.cljs | 15 +++------ frontend/uxbox/ui/workspace/base.cljs | 4 +++ frontend/uxbox/ui/workspace/canvas.cljs | 3 +- frontend/uxbox/ui/workspace/lateralmenu.cljs | 8 ++--- frontend/uxbox/ui/workspace/sidebar.cljs | 14 ++++++--- frontend/uxbox/ui/workspace/toolboxes.cljs | 32 +++++++++++++++++--- 6 files changed, 51 insertions(+), 25 deletions(-) diff --git a/frontend/uxbox/data/workspace.cljs b/frontend/uxbox/data/workspace.cljs index 55e76d627..0dc383a6c 100644 --- a/frontend/uxbox/data/workspace.cljs +++ b/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 "#")))) + (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." diff --git a/frontend/uxbox/ui/workspace/base.cljs b/frontend/uxbox/ui/workspace/base.cljs index f46863e6e..f64531be0 100644 --- a/frontend/uxbox/ui/workspace/base.cljs +++ b/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 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; diff --git a/frontend/uxbox/ui/workspace/canvas.cljs b/frontend/uxbox/ui/workspace/canvas.cljs index 6c5ceb982..5ded2eff4 100644 --- a/frontend/uxbox/ui/workspace/canvas.cljs +++ b/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)) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; diff --git a/frontend/uxbox/ui/workspace/lateralmenu.cljs b/frontend/uxbox/ui/workspace/lateralmenu.cljs index 542c0da7b..f81e2262d 100644 --- a/frontend/uxbox/ui/workspace/lateralmenu.cljs +++ b/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 diff --git a/frontend/uxbox/ui/workspace/sidebar.cljs b/frontend/uxbox/ui/workspace/sidebar.cljs index 0dca9b357..601d41112 100644 --- a/frontend/uxbox/ui/workspace/sidebar.cljs +++ b/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]})) diff --git a/frontend/uxbox/ui/workspace/toolboxes.cljs b/frontend/uxbox/ui/workspace/toolboxes.cljs index aca2dcc63..ac2d91d51 100644 --- a/frontend/uxbox/ui/workspace/toolboxes.cljs +++ b/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