From 827b8a3aecf4cd00cd801027b225f3b5ac684fc4 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 17 Dec 2015 18:34:15 +0200 Subject: [PATCH] Remove direct lense mutation and eventes recursion on workspace. --- frontend/uxbox/data/projects.cljs | 3 +- frontend/uxbox/data/workspace.cljs | 20 ++---- frontend/uxbox/ui/workspace.cljs | 10 +-- frontend/uxbox/ui/workspace/header.cljs | 91 ++++++++++++------------ frontend/uxbox/ui/workspace/rules.cljs | 41 +++++------ frontend/uxbox/ui/workspace/toolbar.cljs | 22 +++--- 6 files changed, 83 insertions(+), 104 deletions(-) diff --git a/frontend/uxbox/data/projects.cljs b/frontend/uxbox/data/projects.cljs index 2df22b704..b38e474e9 100644 --- a/frontend/uxbox/data/projects.cljs +++ b/frontend/uxbox/data/projects.cljs @@ -125,8 +125,7 @@ rs/UpdateEvent (-apply-update [_ state] (let [s {:project projectid - :page pageid - :toolboxes {}}] + :page pageid}] (update state :workspace merge s))) IPrintWithWriter diff --git a/frontend/uxbox/data/workspace.cljs b/frontend/uxbox/data/workspace.cljs index fd90f10a7..def5bf42d 100644 --- a/frontend/uxbox/data/workspace.cljs +++ b/frontend/uxbox/data/workspace.cljs @@ -10,24 +10,14 @@ ;; Events ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -(defn toggle-pagesbar - [] +(defn toggle-tool + [toolname] (reify rs/UpdateEvent (-apply-update [_ state] - (update-in state [:workspace :pagesbar-enabled] (fnil not false))) + (let [key (keyword (str (name toolname) "-enabled"))] + (update-in state [:workspace key] (fnil not false)))) IPrintWithWriter (-pr-writer [mv writer _] - (-write writer "#")))) - -(defn toggle-grid - [] - (reify - rs/UpdateEvent - (-apply-update [_ state] - (update-in state [:workspace :grid-enabled] (fnil not false))) - - IPrintWithWriter - (-pr-writer [mv writer _] - (-write writer "#")))) + (-write writer "#")))) diff --git a/frontend/uxbox/ui/workspace.cljs b/frontend/uxbox/ui/workspace.cljs index 34aecf0e7..11c528b38 100644 --- a/frontend/uxbox/ui/workspace.cljs +++ b/frontend/uxbox/ui/workspace.cljs @@ -6,6 +6,7 @@ [uxbox.state :as s] [uxbox.data.projects :as dp] [uxbox.ui.util :as util] + [uxbox.ui.mixins :as mx] [uxbox.ui.workspace.base :as wb] [uxbox.ui.workspace.toolbar :as wt] [uxbox.ui.workspace.leftsidebar :as wl] @@ -19,7 +20,6 @@ (defn workspace-render [own projectid] - (println "workspace-render") (html [:div (wh/header) @@ -36,9 +36,9 @@ ;; Canvas (wa/workarea) ;; (working-area conn @open-toolboxes page project shapes (rum/react ws/zoom) (rum/react ws/grid?)) - ;; ;; Aside - ;; (when-not (empty? @open-toolboxes) - ;; (aside conn open-toolboxes page shapes)) + ;; ;; Aside + ;; (when-not (empty? @open-toolboxes) + ;; (aside conn open-toolboxes page shapes)) ]]])) (defn workspace-will-mount @@ -58,5 +58,5 @@ :will-mount workspace-will-mount :transfer-state workspace-transfer-state :name "workspace" - :mixins [rum/static]})) + :mixins [mx/static rum/reactive]})) diff --git a/frontend/uxbox/ui/workspace/header.cljs b/frontend/uxbox/ui/workspace/header.cljs index f1ad0f1b0..8b0f56389 100644 --- a/frontend/uxbox/ui/workspace/header.cljs +++ b/frontend/uxbox/ui/workspace/header.cljs @@ -23,53 +23,50 @@ (defn header-render [own] - (letfn [(toggle-pagesbar [e] - (rs/emit! (dw/toggle-pagesbar))) - (toggle-grid [e] - (rs/emit! (dw/toggle-grid)))] - (let [page (rum/react wb/page-state) - workspace (rum/react wb/workspace-state)] - (html - [:header#workspace-bar.workspace-bar - [:div.main-icon - (nav/link (r/route-for :dashboard/projects) i/logo-icon)] - [:div.project-tree-btn - {:on-click toggle-pagesbar} - i/project-tree - [:span (:name page)]] - [:div.workspace-options - [:ul.options-btn - [:li.tooltip.tooltip-bottom {:alt "Undo (Ctrl + Z)"} - i/undo] - [:li.tooltip.tooltip-bottom {:alt "Redo (Ctrl + Shift + Z)"} - i/redo]] - [:ul.options-btn - ;; TODO: refactor - [:li.tooltip.tooltip-bottom - {:alt "Export (Ctrl + E)"} - ;; page-title - [:a {:download (str (:name page) ".svg") - :href "#" :on-click on-download-clicked} - i/export]] - [:li.tooltip.tooltip-bottom - {:alt "Image (Ctrl + I)"} - i/image]] - [:ul.options-btn - [:li.tooltip.tooltip-bottom - {:alt "Ruler (Ctrl + R)"} - i/ruler] - [:li.tooltip.tooltip-bottom - {:alt "Grid (Ctrl + G)" - :class (when (:grid-enabled workspace) "selected") - :on-click toggle-grid} - i/grid] - [:li.tooltip.tooltip-bottom - {:alt "Align (Ctrl + A)"} - i/alignment] - [:li.tooltip.tooltip-bottom - {:alt "Organize (Ctrl + O)"} - i/organize]]] - (ui.u/user)])))) + (let [page (rum/react wb/page-state) + workspace (rum/react wb/workspace-state) + toggle #(rs/emit! (dw/toggle-tool %))] + (html + [:header#workspace-bar.workspace-bar + [:div.main-icon + (nav/link (r/route-for :dashboard/projects) i/logo-icon)] + [:div.project-tree-btn + {:on-click (partial toggle :pagesbar)} + i/project-tree + [:span (:name page)]] + [:div.workspace-options + [:ul.options-btn + [:li.tooltip.tooltip-bottom {:alt "Undo (Ctrl + Z)"} + i/undo] + [:li.tooltip.tooltip-bottom {:alt "Redo (Ctrl + Shift + Z)"} + i/redo]] + [:ul.options-btn + ;; TODO: refactor + [:li.tooltip.tooltip-bottom + {:alt "Export (Ctrl + E)"} + ;; page-title + [:a {:download (str (:name page) ".svg") + :href "#" :on-click on-download-clicked} + i/export]] + [:li.tooltip.tooltip-bottom + {:alt "Image (Ctrl + I)"} + i/image]] + [:ul.options-btn + [:li.tooltip.tooltip-bottom + {:alt "Ruler (Ctrl + R)"} + i/ruler] + [:li.tooltip.tooltip-bottom + {:alt "Grid (Ctrl + G)" + :class (when (:grid-enabled workspace) "selected") + :on-click (partial toggle :grid)} + i/grid] + [:li.tooltip.tooltip-bottom + {:alt "Align (Ctrl + A)"} + i/alignment] + [:li.tooltip.tooltip-bottom + {:alt "Organize (Ctrl + O)"} + i/organize]]] + (ui.u/user)]))) (def header (util/component diff --git a/frontend/uxbox/ui/workspace/rules.cljs b/frontend/uxbox/ui/workspace/rules.cljs index 2b4488746..936fa2cdc 100644 --- a/frontend/uxbox/ui/workspace/rules.cljs +++ b/frontend/uxbox/ui/workspace/rules.cljs @@ -5,21 +5,15 @@ [beicon.core :as rx] [uxbox.state :as s] [uxbox.ui.dom :as dom] - [uxbox.ui.workspace.base :as wd] + [uxbox.ui.workspace.base :as wb] + [uxbox.ui.mixins :as mx] [uxbox.ui.util :as util])) - -(def viewport-height 3000) -(def viewport-width 3000) - -(def document-start-x 50) -(def document-start-y 50) - (defn h-rule-render - [zoom] - (let [left (rum/react wd/left-scroll) - width viewport-width - start-width document-start-x + [own] + (let [left (or (rum/react wb/left-scroll) 0) + width wb/viewport-width + start-width wb/document-start-x padding 20 zoom 1 big-ticks-mod (/ 100 zoom) @@ -30,10 +24,12 @@ lines (fn [position value padding] (cond (< (mod value big-ticks-mod) step-size) - (html - [:g - [:line {:x1 position :x2 position :y1 5 :y2 padding :stroke "#7f7f7f"}] - [:text {:x (+ position 2) :y 13 :fill "#7f7f7f" :style {:font-size "12px"}} value]]) + (do + (println "foobar") + (html + [:g + [:line {:x1 position :x2 position :y1 5 :y2 padding :stroke "#7f7f7f"}] + [:text {:x (+ position 2) :y 13 :fill "#7f7f7f" :style {:font-size "12px"}} value]])) (< (mod value mid-ticks-mod) step-size) (html [:line {:key position :x1 position :x2 position :y1 10 :y2 padding :stroke "#7f7f7f"}]) @@ -57,14 +53,13 @@ (util/component {:render h-rule-render :name "h-rule" - :mixins [rum/reactive]})) - + :mixins [mx/static rum/reactive]})) (defn v-rule-render - [zoom] - (let [height viewport-height - start-height document-start-y - top (rum/react wd/top-scroll) + [own] + (let [height wb/viewport-height + start-height wb/document-start-y + top (or (rum/react wb/top-scroll) 0) zoom 1 padding 20 big-ticks-mod (/ 100 zoom) @@ -102,4 +97,4 @@ (util/component {:render v-rule-render :name "v-rule" - :mixins [rum/reactive]})) + :mixins [mx/static rum/reactive]})) diff --git a/frontend/uxbox/ui/workspace/toolbar.cljs b/frontend/uxbox/ui/workspace/toolbar.cljs index d559b006f..4cc6a1981 100644 --- a/frontend/uxbox/ui/workspace/toolbar.cljs +++ b/frontend/uxbox/ui/workspace/toolbar.cljs @@ -4,6 +4,8 @@ [cats.labs.lens :as l] [uxbox.rstore :as rs] [uxbox.state :as s] + [uxbox.data.workspace :as dw] + [uxbox.ui.workspace.base :as wb] [uxbox.ui.icons :as i] [uxbox.ui.util :as util])) @@ -11,36 +13,32 @@ ;; Toolbar ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -(def ^:static toolbar-state - (as-> (l/in [:workspace :toolbars]) $ - (l/focus-atom $ s/state))) - (defn- toggle-toolbox [state item] (update state item (fnil not false))) (defn toolbar-render [own] - (let [state (rum/react toolbar-state)] + (let [workspace (rum/react wb/workspace-state) + toggle #(rs/emit! (dw/toggle-tool %))] (html [:div#tool-bar.tool-bar [:div.tool-bar-inside [:ul.main-tools [:li.tooltip {:alt "Shapes (Ctrl + Shift + F)" - :class (when (:tools state) "current") - :on-click #(swap! toolbar-state toggle-toolbox :tools)} + :class (when (:tools-enabled workspace false) "current") + :on-click (partial toggle :tools)} i/shapes] [:li.tooltip {:alt "Icons (Ctrl + Shift + I)" - :class (when (:icons state) "current") - :on-click #(swap! toolbar-state toggle-toolbox :icons)} + :class (when (:icons-enabled workspace false) "current") + :on-click (partial toggle :icons)} i/icon-set] [:li.tooltip {:alt "Elements (Ctrl + Shift + L)" - :class (when (:layers state) - "current") - :on-click #(swap! toolbar-state toggle-toolbox :layers)} + :class (when (:layers-enabled workspace false) "current") + :on-click (partial toggle :layers)} i/layers] [:li.tooltip {:alt "Feedback (Ctrl + Shift + M)"}