From dbb1e6a890d89ba591f568202560e9706d1e3da7 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 21 Dec 2020 11:35:34 +0100 Subject: [PATCH] :sparkles: Revisit render flow of toplevel workspace components. --- frontend/src/app/main/ui/workspace.cljs | 71 +++++++----- .../app/main/ui/workspace/left_toolbar.cljs | 109 ++++++++++-------- .../src/app/main/ui/workspace/sidebar.cljs | 6 +- .../main/ui/workspace/sidebar/options.cljs | 23 ++-- 4 files changed, 118 insertions(+), 91 deletions(-) diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index 3995887af..a016cc2b1 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/frontend/src/app/main/ui/workspace.cljs @@ -29,6 +29,7 @@ [app.main.ui.workspace.rules :refer [horizontal-rule vertical-rule]] [app.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]] [app.main.ui.workspace.viewport :refer [viewport viewport-actions coordinates]] + [app.util.object :as obj] [app.util.dom :as dom] [beicon.core :as rx] [cuerdas.core :as str] @@ -38,49 +39,59 @@ ;; --- Workspace (mf/defc workspace-rules - {::mf/wrap-props false} + {::mf/wrap-props false + ::mf/wrap [mf/memo]} [props] - (let [local (unchecked-get props "local")] + (let [zoom (or (obj/get props "zoom") 1) + vbox (obj/get props "vbox") + vport (obj/get props "vport")] + [:* [:div.empty-rule-square] - [:& horizontal-rule {:zoom (:zoom local) - :vbox (:vbox local) - :vport (:vport local)}] - [:& vertical-rule {:zoom (:zoom local 1) - :vbox (:vbox local) - :vport (:vport local)}] + [:& horizontal-rule {:zoom zoom + :vbox vbox + :vport vport}] + [:& vertical-rule {:zoom zoom + :vbox vbox + :vport vport}] [:& coordinates]])) (mf/defc workspace-content - [{:keys [file layout local] :as params}] - [:* - ;; TODO: left-sidebar option is obsolete because left-sidebar now - ;; is always visible. - (when (:colorpalette layout) - [:& colorpalette {:left-sidebar? true}]) + {::mf/wrap-props false} + [props] + (let [local (mf/deref refs/workspace-local) + file (obj/get props "file") + layout (obj/get props "layout")] + [:* + ;; TODO: left-sidebar option is obsolete because left-sidebar now + ;; is always visible. + (when (:colorpalette layout) + [:& colorpalette {:left-sidebar? true}]) - [:section.workspace-content - [:section.workspace-viewport - (when (contains? layout :rules) - [:& workspace-rules {:local local}]) + [:section.workspace-content + [:section.workspace-viewport + (when (contains? layout :rules) + [:& workspace-rules {:zoom (:zoom local) + :vbox (:vbox local) + :vport (:vport local)}]) - [:& viewport-actions] - [:& viewport {:file file - :local local - :layout layout}]]] + [:& viewport-actions] + [:& viewport {:file file + :local local + :layout layout}]]] - [:& left-toolbar {:layout layout}] + [:& left-toolbar {:layout layout}] - ;; Aside - [:& left-sidebar {:layout layout}] - [:& right-sidebar {:local local}]]) + ;; Aside + [:& left-sidebar {:layout layout}] + [:& right-sidebar {:section (:options-mode local) + :selected (:selected local)}]])) (def trimmed-page-ref (l/derived :trimmed-page st/state =)) (mf/defc workspace-page [{:keys [file layout page-id] :as props}] - (let [local (mf/deref refs/workspace-local) - page (mf/deref trimmed-page-ref)] + (let [page (mf/deref trimmed-page-ref)] (mf/use-layout-effect (mf/deps page-id) (fn [] @@ -90,8 +101,7 @@ (when page [:& workspace-content {:key page-id :file file - :layout layout - :local local}]))) + :layout layout}]))) (mf/defc workspace-loader [] @@ -99,6 +109,7 @@ i/loader-pencil]) (mf/defc workspace + {::mf/wrap [mf/memo]} [{:keys [project-id file-id page-id layout-name] :as props}] (mf/use-effect (mf/deps layout-name) diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.cljs b/frontend/src/app/main/ui/workspace/left_toolbar.cljs index 192882c71..fe606453b 100644 --- a/frontend/src/app/main/ui/workspace/left_toolbar.cljs +++ b/frontend/src/app/main/ui/workspace/left_toolbar.cljs @@ -15,94 +15,105 @@ [app.main.data.workspace :as dw] [app.main.store :as st] [app.main.ui.components.file-uploader :refer [file-uploader]] + [app.util.object :as obj] [app.util.dom :as dom] - [app.util.i18n :as i18n :refer [t]] + [app.util.i18n :as i18n :refer [tr]] [app.main.ui.icons :as i])) -;; --- Component: Left toolbar +(mf/defc image-upload + {::mf/wrap [mf/memo]} + [] + (let [ref (mf/use-ref nil) + file (mf/deref refs/workspace-file) -(mf/defc left-toolbar - [{:keys [layout] :as props}] - (let [file-input (mf/use-ref nil) - selected-drawtool (mf/deref refs/selected-drawing-tool) - select-drawtool #(st/emit! :interrupt (dw/select-for-drawing %)) - - file (mf/deref refs/workspace-file) - locale (i18n/use-locale) - - on-image #(dom/click (mf/ref-val file-input)) + on-click + (mf/use-callback #(dom/click (mf/ref-val ref))) on-uploaded - (fn [{:keys [id name] :as image}] - (let [shape {:name name - :width (:width image) - :height (:height image) - :metadata {:width (:width image) - :height (:height image) - :id (:id image) - :path (:path image)}} - aspect-ratio (/ (:width image) (:height image))] - (st/emit! (dw/create-and-add-shape :image 0 0 shape)))) + (mf/use-callback + (fn [{:keys [id name] :as image}] + (let [shape {:name name + :width (:width image) + :height (:height image) + :metadata {:width (:width image) + :height (:height image) + :id (:id image) + :path (:path image)}} + aspect-ratio (/ (:width image) (:height image))] + (st/emit! (dw/create-and-add-shape :image 0 0 shape))))) on-files-selected - (fn [js-files] - (st/emit! (dw/upload-media-objects - (with-meta {:file-id (:id file) - :local? true - :js-files js-files} - {:on-success on-uploaded}))))] + (mf/use-callback + (mf/deps file) + (fn [js-files] + (st/emit! (dw/upload-media-objects + (with-meta {:file-id (:id file) + :local? true + :js-files js-files} + {:on-success on-uploaded})))))] + [:li.tooltip.tooltip-right + {:alt (tr "workspace.toolbar.image") + :on-click on-click} + [:* + i/image + [:& file-uploader {:input-id "image-upload" + :accept cm/str-media-types + :multi true + :input-ref ref + :on-selected on-files-selected}]]])) + +(mf/defc left-toolbar + {::mf/wrap [mf/memo] + ::mf/wrap-props false} + [props] + (let [layout (obj/get props "layout") + selected-drawtool (mf/deref refs/selected-drawing-tool) + select-drawtool #(st/emit! :interrupt (dw/select-for-drawing %))] [:aside.left-toolbar [:div.left-toolbar-inside [:ul.left-toolbar-options [:li.tooltip.tooltip-right - {:alt (t locale "workspace.toolbar.move") + {:alt (tr "workspace.toolbar.move") :class (when (nil? selected-drawtool) "selected") - :on-click #(st/emit! :interrupt)} + :on-click (st/emitf :interrupt)} i/pointer-inner] [:li.tooltip.tooltip-right - {:alt (t locale "workspace.toolbar.frame") + {:alt (tr "workspace.toolbar.frame") :class (when (= selected-drawtool :frame) "selected") :on-click (partial select-drawtool :frame)} i/artboard] [:li.tooltip.tooltip-right - {:alt (t locale "workspace.toolbar.rect") + {:alt (tr "workspace.toolbar.rect") :class (when (= selected-drawtool :rect) "selected") :on-click (partial select-drawtool :rect)} i/box] [:li.tooltip.tooltip-right - {:alt (t locale "workspace.toolbar.ellipse") + {:alt (tr "workspace.toolbar.ellipse") :class (when (= selected-drawtool :circle) "selected") :on-click (partial select-drawtool :circle)} i/circle] [:li.tooltip.tooltip-right - {:alt (t locale "workspace.toolbar.text") + {:alt (tr "workspace.toolbar.text") :class (when (= selected-drawtool :text) "selected") :on-click (partial select-drawtool :text)} i/text] + + [:& image-upload] + [:li.tooltip.tooltip-right - {:alt (t locale "workspace.toolbar.image") - :on-click on-image} - [:* - i/image - [:& file-uploader {:input-id "image-upload" - :accept cm/str-media-types - :multi true - :input-ref file-input - :on-selected on-files-selected}]]] - [:li.tooltip.tooltip-right - {:alt (t locale "workspace.toolbar.curve") + {:alt (tr "workspace.toolbar.curve") :class (when (= selected-drawtool :curve) "selected") :on-click (partial select-drawtool :curve)} i/pencil] [:li.tooltip.tooltip-right - {:alt (t locale "workspace.toolbar.path") + {:alt (tr "workspace.toolbar.path") :class (when (= selected-drawtool :path) "selected") :on-click (partial select-drawtool :path)} i/pen] [:li.tooltip.tooltip-right - {:alt (t locale "workspace.toolbar.comments") + {:alt (tr "workspace.toolbar.comments") :class (when (= selected-drawtool :comments) "selected") :on-click (partial select-drawtool :comments)} i/chat]] @@ -114,7 +125,7 @@ :on-click (st/emitf (dw/go-to-layout :layers))} i/layers] [:li.tooltip.tooltip-right - {:alt (t locale "workspace.toolbar.assets") + {:alt (tr "workspace.toolbar.assets") :class (when (contains? layout :assets) "selected") :on-click (st/emitf (dw/go-to-layout :assets))} i/library] @@ -124,7 +135,7 @@ :on-click (st/emitf (dw/go-to-layout :document-history))} i/undo-history] [:li.tooltip.tooltip-right - {:alt (t locale "workspace.toolbar.color-palette") + {:alt (tr "workspace.toolbar.color-palette") :class (when (contains? layout :colorpalette) "selected") :on-click (st/emitf (dw/toggle-layout-flags :colorpalette))} i/palette]]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index df85defc7..2a6c6d80b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -41,10 +41,12 @@ ;; --- Right Sidebar (Component) (mf/defc right-sidebar - [{:keys [local] :as props}] + {::mf/wrap-props false + ::mf/wrap [mf/memo]} + [props] (let [drawing-tool (:tool (mf/deref refs/workspace-drawing))] [:aside.settings-bar [:div.settings-bar-inside (if (= drawing-tool :comments) [:& comments-sidebar] - [:& options-toolbox {:local local}])]])) + [:> options-toolbox props])]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.cljs b/frontend/src/app/main/ui/workspace/sidebar/options.cljs index affe7bc90..2e61b3da5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options.cljs @@ -9,8 +9,6 @@ (ns app.main.ui.workspace.sidebar.options (:require - [beicon.core :as rx] - [rumext.alpha :as mf] [app.common.spec :as us] [app.main.data.workspace :as udw] [app.main.refs :as refs] @@ -25,14 +23,17 @@ [app.main.ui.workspace.sidebar.options.group :as group] [app.main.ui.workspace.sidebar.options.icon :as icon] [app.main.ui.workspace.sidebar.options.image :as image] - [app.main.ui.workspace.sidebar.options.text :as text] - [app.main.ui.workspace.sidebar.options.page :as page] - [app.main.ui.workspace.sidebar.options.multiple :as multiple] [app.main.ui.workspace.sidebar.options.interactions :refer [interactions-menu]] + [app.main.ui.workspace.sidebar.options.multiple :as multiple] + [app.main.ui.workspace.sidebar.options.page :as page] [app.main.ui.workspace.sidebar.options.path :as path] [app.main.ui.workspace.sidebar.options.rect :as rect] [app.main.ui.workspace.sidebar.options.text :as text] - [app.util.i18n :as i18n :refer [tr t]])) + [app.main.ui.workspace.sidebar.options.text :as text] + [app.util.i18n :as i18n :refer [tr t]] + [app.util.object :as obj] + [beicon.core :as rx] + [rumext.alpha :as mf])) ;; --- Options @@ -88,15 +89,17 @@ ;; need on multiple selection in majority of cases (mf/defc options-toolbox - {::mf/wrap [mf/memo]} - [{:keys [local] :as props}] - (let [section (:options-mode local) + {::mf/wrap [mf/memo] + ::mf/wrap-props false} + [props] + (let [section (obj/get props "section") + selected (obj/get props "selected") page-id (mf/use-ctx ctx/current-page-id) file-id (mf/use-ctx ctx/current-file-id) shapes (mf/deref refs/selected-objects) shapes-with-children (mf/deref refs/selected-objects-with-children)] [:& options-content {:shapes shapes - :selected (:selected local) + :selected selected :shapes-with-children shapes-with-children :file-id file-id :page-id page-id