From 980d23c3705b0b2a678c068afcd59d4d0477928f Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 24 Jul 2019 11:36:09 +0200 Subject: [PATCH] :recycle: More code refactor on workspace. --- frontend/src/uxbox/main/data/workspace.cljs | 3 +- frontend/src/uxbox/main/ui.cljs | 2 +- frontend/src/uxbox/main/ui/navigation.cljs | 2 + frontend/src/uxbox/main/ui/workspace.cljs | 32 +++--- .../src/uxbox/main/ui/workspace/canvas.cljs | 13 +-- .../src/uxbox/main/ui/workspace/header.cljs | 97 ++++++++----------- .../src/uxbox/main/ui/workspace/sidebar.cljs | 20 ++-- .../main/ui/workspace/sidebar/sitemap.cljs | 2 + 8 files changed, 81 insertions(+), 90 deletions(-) diff --git a/frontend/src/uxbox/main/data/workspace.cljs b/frontend/src/uxbox/main/data/workspace.cljs index e540a9f920..a6201e4946 100644 --- a/frontend/src/uxbox/main/data/workspace.cljs +++ b/frontend/src/uxbox/main/data/workspace.cljs @@ -8,6 +8,7 @@ (:require [beicon.core :as rx] [potok.core :as ptk] + [uxbox.config :as cfg] [uxbox.main.store :as st] [uxbox.main.constants :as c] [uxbox.main.lenses :as ul] @@ -29,7 +30,7 @@ [uxbox.util.geom.point :as gpt] [uxbox.util.time :as dt] [uxbox.util.math :as mth] - [uxbox.util.data :refer (index-of)])) + [uxbox.util.data :refer [index-of]])) ;; --- Expose inner functions diff --git a/frontend/src/uxbox/main/ui.cljs b/frontend/src/uxbox/main/ui.cljs index fd4806897c..0248533160 100644 --- a/frontend/src/uxbox/main/ui.cljs +++ b/frontend/src/uxbox/main/ui.cljs @@ -117,7 +117,7 @@ :workspace/page (let [project (uuid (get-in route [:params :path :project])) page (uuid (get-in route [:params :path :page]))] - [:& workspace {:project project :page page}]) + [:& workspace {:project project :page page :key page}]) nil )))) diff --git a/frontend/src/uxbox/main/ui/navigation.cljs b/frontend/src/uxbox/main/ui/navigation.cljs index 31636c55e5..e0ccd80f08 100644 --- a/frontend/src/uxbox/main/ui/navigation.cljs +++ b/frontend/src/uxbox/main/ui/navigation.cljs @@ -1,4 +1,6 @@ (ns uxbox.main.ui.navigation + + ;; TODO: deprecated (:require [rumext.alpha :refer-macros [html]] [goog.events :as events] [uxbox.util.dom :as dom])) diff --git a/frontend/src/uxbox/main/ui/workspace.cljs b/frontend/src/uxbox/main/ui/workspace.cljs index b9af26044e..f781c2cf4e 100644 --- a/frontend/src/uxbox/main/ui/workspace.cljs +++ b/frontend/src/uxbox/main/ui/workspace.cljs @@ -61,15 +61,16 @@ (scroll/scroll-to-point dom mouse-point scroll-position)))) (mf/def workspace - :key-fn identity - :mixins #{mf/memo - mf/reactive + :mixins #{mf/reactive shortcuts-mixin} :init (fn [own {:keys [project page] :as props}] (st/emit! (dw/initialize project page)) - (assoc own ::canvas (mf/create-ref))) + (assoc own + ::canvas (mf/create-ref) + ::page-ref (-> (l/in [:pages page]) + (l/derive st/state)))) :did-mount (fn [own] @@ -91,8 +92,9 @@ :render (fn [own props] (let [flags (mf/deref refs/flags) - project-id (get props :project) - page-id (get props :page) + page (mf/deref (::page-ref own)) + ;; project-id (get props :project) + ;; page-id (get props :page) left-sidebar? (not (empty? (keep flags [:layers :sitemap :document-history]))) right-sidebar? (not (empty? (keep flags [:icons :drawtools @@ -103,7 +105,9 @@ :scrolling (:viewport-positionig workspace))] [:* (messages-widget) - (header) + [:& header {:page page + :flags flags + :key (:id page)}] (colorpalette) [:main.main-content @@ -116,20 +120,20 @@ ;; Rules (when (contains? flags :rules) - (horizontal-rule)) + [:& horizontal-rule]) (when (contains? flags :rules) - (vertical-rule)) + [:& vertical-rule]) ;; Canvas [:section.workspace-canvas {:id "workspace-canvas" :ref (::canvas own)} - [:& viewport {:project project-id - :page page-id - :key [project-id page-id]}]]] + [:& viewport {:page page + :flags flags + :key (:id page)}]]] ;; Aside (when left-sidebar? - (left-sidebar {:flags flags :page-id page-id})) + [:& left-sidebar {:flags flags :page-id (:id page)}]) (when right-sidebar? - (right-sidebar {:flags flags :page-id page-id}))]]))) + [:& right-sidebar {:flags flags :page-id (:id page)}])]]))) diff --git a/frontend/src/uxbox/main/ui/workspace/canvas.cljs b/frontend/src/uxbox/main/ui/workspace/canvas.cljs index c36d480037..6ce532e669 100644 --- a/frontend/src/uxbox/main/ui/workspace/canvas.cljs +++ b/frontend/src/uxbox/main/ui/workspace/canvas.cljs @@ -135,11 +135,8 @@ :mixins [mf/reactive] :init - (fn [own {:keys [page project] :as props}] - (assoc own - ::viewport (mf/create-ref) - ::page-ref (-> (l/in [:pages page]) - (l/derive st/state)))) + (fn [own props] + (assoc own ::viewport (mf/create-ref))) :did-mount (fn [own] @@ -215,10 +212,8 @@ ;; TODO: use an ad-hoc ref for required keys from workspace state :render - (fn [own props] - (let [page (mf/deref (::page-ref own)) - flags (mf/react refs/flags) - drawing (mf/react refs/selected-drawing-tool) + (fn [own {:keys [page flags] :as props}] + (let [drawing (mf/react refs/selected-drawing-tool) tooltip (or (mf/react refs/selected-tooltip) (get-shape-tooltip drawing)) zoom (or (mf/react refs/selected-zoom) 1)] diff --git a/frontend/src/uxbox/main/ui/workspace/header.cljs b/frontend/src/uxbox/main/ui/workspace/header.cljs index b4b6031f7d..b0b129b61e 100644 --- a/frontend/src/uxbox/main/ui/workspace/header.cljs +++ b/frontend/src/uxbox/main/ui/workspace/header.cljs @@ -6,73 +6,59 @@ ;; Copyright (c) 2015-2017 Juan de la Cruz (ns uxbox.main.ui.workspace.header - (:require [beicon.core :as rx] - [uxbox.config :as cfg] - [potok.core :as ptk] - [uxbox.builtins.icons :as i] - [uxbox.main.store :as st] - [uxbox.main.refs :as refs] - [uxbox.main.data.workspace :as dw] - [uxbox.main.data.pages :as udp] - [uxbox.main.data.history :as udh] - [uxbox.main.data.undo :as udu] - [uxbox.main.data.lightbox :as udl] - [uxbox.main.ui.workspace.clipboard] - [uxbox.main.ui.users :refer [user]] - [uxbox.main.ui.navigation :as nav] - [uxbox.util.router :as r] - [uxbox.util.data :refer [index-of]] - [uxbox.util.geom.point :as gpt] - [uxbox.util.math :as mth] - [rumext.core :as mx :include-macros true])) + (:require + [rumext.core :as mx] + [rumext.alpha :as mf] + [uxbox.builtins.icons :as i] + [uxbox.config :as cfg] + [uxbox.main.data.history :as udh] + [uxbox.main.data.lightbox :as udl] + [uxbox.main.data.pages :as udp] + [uxbox.main.data.undo :as udu] + [uxbox.main.data.workspace :as dw] + [uxbox.main.refs :as refs] + [uxbox.main.store :as st] + [uxbox.main.ui.users :refer [user]] + [uxbox.main.ui.workspace.clipboard] + [uxbox.util.data :refer [index-of]] + [uxbox.util.geom.point :as gpt] + [uxbox.util.math :as mth] + [uxbox.util.router :as rt])) ;; --- Zoom Widget -(mx/defc zoom-widget - {:mixins [mx/reactive mx/static]} - [] - (let [zoom (mx/react refs/selected-zoom) +(mf/defc zoom-widget + {:wrap [mf/reactive*]} + [props] + (let [zoom (mf/react refs/selected-zoom) increase #(st/emit! (dw/increase-zoom)) decrease #(st/emit! (dw/decrease-zoom))] - [:ul.options-view {} - [:li.zoom-input {} + [:ul.options-view + [:li.zoom-input [:span.add-zoom {:on-click decrease} "-"] [:span {} (str (mth/round (* 100 zoom)) "%")] [:span.remove-zoom {:on-click increase} "+"]]])) ;; --- Header Component -(defn on-view-clicked - [event project page] - (let [token (:share-token project) - pages (deref refs/selected-project-pages) - index (index-of pages page) - rval (rand-int 1000000) - url (str cfg/viewurl "?v=" rval "#/preview/" token "/" index)] - (st/emit! (udp/persist-page (:id page) #(js/open url "new tab" ""))))) - -(mx/defc header - {:mixins [mx/static mx/reactive]} - [] - (let [project (mx/react refs/selected-project) - page (mx/react refs/selected-page) - flags (mx/react refs/flags) - toggle #(st/emit! (dw/toggle-flag %)) +(mf/defc header + [{:keys [page flags] :as props}] + (let [toggle #(st/emit! (dw/toggle-flag %)) on-undo #(st/emit! (udu/undo)) on-redo #(st/emit! (udu/redo)) on-image #(udl/open! :import-image) on-download #(udl/open! :download)] - [:header#workspace-bar.workspace-bar {} - [:div.main-icon {} - (nav/link (r/route-for :dashboard/projects) i/logo-icon)] + [:header#workspace-bar.workspace-bar + [:div.main-icon + [:a {:on-click #(st/emit! (rt/nav :dashboard/projects))} i/logo-icon]] [:div.project-tree-btn {:alt "Sitemap (Ctrl + Shift + M)" :class (when (contains? flags :sitemap) "selected") :on-click (partial toggle :sitemap)} i/project-tree [:span {} (:name page)]] - [:div.workspace-options {} - [:ul.options-btn {} + [:div.workspace-options + [:ul.options-btn [:li.tooltip.tooltip-bottom {:alt "Draw tools (Ctrl + Shift + S)" :class (when (contains? flags :drawtools) "selected") @@ -103,7 +89,7 @@ :class (when (contains? flags :document-history) "selected") :on-click (partial toggle :document-history)} i/undo-history]] - [:ul.options-btn {} + [:ul.options-btn [:li.tooltip.tooltip-bottom {:alt "Undo (Ctrl + Z)" :on-click on-undo} @@ -112,7 +98,7 @@ {:alt "Redo (Ctrl + Shift + Z)" :on-click on-redo} i/redo]] - [:ul.options-btn {} + [:ul.options-btn [:li.tooltip.tooltip-bottom {:alt "Download (Ctrl + E)" :on-click on-download} @@ -121,7 +107,7 @@ {:alt "Image (Ctrl + I)" :on-click on-image} i/image]] - [:ul.options-btn {} + [:ul.options-btn [:li.tooltip.tooltip-bottom {:alt "Rules" :class (when (contains? flags :rules) "selected") @@ -137,13 +123,14 @@ :class (when (contains? flags :grid-snap) "selected") :on-click (partial toggle :grid-snap)} i/grid-snap]] - ;; [:li.tooltip.tooltip-bottom - ;; {:alt "Align (Ctrl + A)"} - ;; i/alignment]] - [:ul.options-btn {} + ;; [:li.tooltip.tooltip-bottom + ;; {:alt "Align (Ctrl + A)"} + ;; i/alignment]] + [:ul.options-btn [:li.tooltip.tooltip-bottom.view-mode {:alt "View mode (Ctrl + P)" - :on-click #(on-view-clicked % project page)} + :on-click #(st/emit! (dw/->OpenView (:id page))) + } i/play]] - (zoom-widget)] + [:& zoom-widget]] [:& user]])) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar.cljs index 2d5e1ed3e6..c1b22f2ca3 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar.cljs @@ -6,18 +6,18 @@ ;; Copyright (c) 2015-2017 Juan de la Cruz (ns uxbox.main.ui.workspace.sidebar - (:require [uxbox.main.refs :as refs] - [uxbox.main.ui.workspace.sidebar.options :refer [options-toolbox]] - [uxbox.main.ui.workspace.sidebar.layers :refer [layers-toolbox]] - [uxbox.main.ui.workspace.sidebar.sitemap :refer [sitemap-toolbox]] - [uxbox.main.ui.workspace.sidebar.history :refer [history-toolbox]] - [uxbox.main.ui.workspace.sidebar.icons :refer [icons-toolbox]] - [uxbox.main.ui.workspace.sidebar.drawtools :refer [draw-toolbox]] - [rumext.core :as mx :include-macros true])) + (:require + [rumext.alpha :as mf] + [uxbox.main.ui.workspace.sidebar.drawtools :refer [draw-toolbox]] + [uxbox.main.ui.workspace.sidebar.history :refer [history-toolbox]] + [uxbox.main.ui.workspace.sidebar.icons :refer [icons-toolbox]] + [uxbox.main.ui.workspace.sidebar.layers :refer [layers-toolbox]] + [uxbox.main.ui.workspace.sidebar.options :refer [options-toolbox]] + [uxbox.main.ui.workspace.sidebar.sitemap :refer [sitemap-toolbox]])) ;; --- Left Sidebar (Component) -(mx/defc left-sidebar +(mf/defc left-sidebar [{:keys [flags page-id] :as props}] [:aside#settings-bar.settings-bar.settings-bar-left [:div.settings-bar-inside @@ -30,7 +30,7 @@ ;; --- Right Sidebar (Component) -(mx/defc right-sidebar +(mf/defc right-sidebar [{:keys [flags page-id] :as props}] [:aside#settings-bar.settings-bar [:div.settings-bar-inside diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs index 6d3cc60f36..c6a2395e1e 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs @@ -102,6 +102,8 @@ (when deletable? [:a {:on-click on-delete} i/trash])]]]))) +;; TODO: refactor this to not use global refs + (mf/def sitemap-toolbox :mixins [mf/memo mf/reactive]