diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index 0a52acdda..27fb5de7f 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/frontend/src/app/main/data/workspace.cljs @@ -190,9 +190,12 @@ (ptk/reify ::initialize-page ptk/UpdateEvent (update [_ state] - (let [local (get-in state [:workspace-cache page-id] workspace-local-default)] + (let [local (get-in state [:workspace-cache page-id] workspace-local-default) + page (-> (get-in state [:workspace-data :pages-index page-id]) + (select-keys [:id :name]))] (assoc state :current-page-id page-id ; mainly used by events + :trimmed-page page :workspace-local local))))) (defn finalize-page @@ -204,7 +207,7 @@ (let [local (:workspace-local state)] (-> state (assoc-in [:workspace-cache page-id] local) - (dissoc :current-page-id)))))) + (dissoc :current-page-id :workspace-local :trimmed-page)))))) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Workspace Page CRUD diff --git a/frontend/src/app/main/ui/context.cljs b/frontend/src/app/main/ui/context.cljs index 27df726cd..11abc5fdb 100644 --- a/frontend/src/app/main/ui/context.cljs +++ b/frontend/src/app/main/ui/context.cljs @@ -12,5 +12,9 @@ [rumext.alpha :as mf])) (def embed-ctx (mf/create-context false)) - (def render-ctx (mf/create-context nil)) + +(def current-team-id (mf/create-context nil)) +(def current-project-id (mf/create-context nil)) +(def current-page-id (mf/create-context nil)) +(def current-file-id (mf/create-context nil)) diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index a13eb328b..9ffd35b51 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/frontend/src/app/main/ui/workspace.cljs @@ -19,6 +19,7 @@ [app.main.ui.hooks :as hooks] [app.main.ui.icons :as i] [app.main.ui.keyboard :as kbd] + [app.main.ui.context :as ctx] [app.main.ui.workspace.colorpalette :refer [colorpalette]] [app.main.ui.workspace.colorpicker] [app.main.ui.workspace.context-menu :refer [context-menu]] @@ -37,79 +38,57 @@ ;; --- Workspace -(mf/defc workspace-content - [{:keys [page-id file layout project] :as params}] - (let [local (mf/deref refs/workspace-local) - left-sidebar? (:left-sidebar? local) - right-sidebar? (:right-sidebar? local) - classes (dom/classnames - :no-tool-bar-right (not right-sidebar?) - :no-tool-bar-left (not left-sidebar?))] +(mf/defc workspace-rules + {::mf/wrap-props false} + [props] + (let [local (unchecked-get props "local")] [:* - (when (:colorpalette layout) - [:& colorpalette {:left-sidebar? left-sidebar? - :team-id (:team-id project)}]) + [: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)}] + [:& coordinates]])) - [:section.workspace-content {:class classes} - [:section.workspace-viewport - (when (contains? layout :rules) - [:* - [: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)}] - [:& 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}]) + [:section.workspace-content + [:section.workspace-viewport + (when (contains? layout :rules) + [:& workspace-rules {:local local}]) - [:& viewport {:page-id page-id - :key (str page-id) - :file file - :local local - :layout layout}]]] + [:& viewport {:file file + :local local + :layout layout}]]] - [:& left-toolbar {:layout layout}] + [:& left-toolbar {:layout layout}] - ;; Aside - (when left-sidebar? - [:& left-sidebar - {:file file - :page-id page-id - :project project - :layout layout}]) - (when right-sidebar? - [:& right-sidebar - {:page-id page-id - :file-id (:id file) - :local local - :layout layout}])])) + ;; Aside + [:& left-sidebar {:layout layout}] + [:& right-sidebar {:local local}]]) -(defn trimmed-page-ref - [id] - (l/derived (fn [state] - (let [page-id (:current-page-id state) - data (:workspace-data state)] - (select-keys (get-in data [:pages-index page-id]) [:id :name]))) - st/state =)) +(def trimmed-page-ref (l/derived :trimmed-page st/state =)) (mf/defc workspace-page - [{:keys [project file layout page-id] :as props}] - (mf/use-effect - (mf/deps page-id) - (fn [] - (st/emit! (dw/initialize-page page-id)) - #(st/emit! (dw/finalize-page page-id)))) + [{:keys [file layout page-id] :as props}] + (let [local (mf/deref refs/workspace-local) + page (mf/deref trimmed-page-ref)] + (mf/use-layout-effect + (mf/deps page-id) + (fn [] + (st/emit! (dw/initialize-page page-id)) + (st/emitf (dw/finalize-page page-id)))) - (let [page-ref (mf/use-memo (mf/deps page-id) #(trimmed-page-ref page-id)) - page (mf/deref page-ref)] (when page - [:& workspace-content {:page page - :page-id (:id page) - :project project - :file file - :layout layout}]))) + [:& workspace-content {:file file :layout layout :local local}]))) (mf/defc workspace-loader [] @@ -124,7 +103,7 @@ (mf/deps project-id file-id) (fn [] (st/emit! (dw/initialize-file project-id file-id)) - #(st/emit! (dw/finalize-file project-id file-id)))) + (st/emitf (dw/finalize-file project-id file-id)))) (hooks/use-shortcuts dw/shortcuts) @@ -132,19 +111,21 @@ project (mf/deref refs/workspace-project) layout (mf/deref refs/workspace-layout)] - [:section#workspace - [:& header {:file file - :page-id page-id - :project project - :layout layout}] + [:& (mf/provider ctx/current-file-id) {:value (:id file)} + [:& (mf/provider ctx/current-team-id) {:value (:team-id project)} + [:& (mf/provider ctx/current-project-id) {:value (:id project)} + [:& (mf/provider ctx/current-page-id) {:value page-id} - [:& context-menu] + [:section#workspace + [:& header {:file file + :page-id page-id + :project project + :layout layout}] - (if (and (and file project) - (:initialized file)) + [:& context-menu] + + (if (and (and file project) + (:initialized file)) + [:& workspace-page {:page-id page-id :file file :layout layout}] + [:& workspace-loader])]]]]])) - [:& workspace-page {:page-id page-id - :project project - :file file - :layout layout}] - [:& workspace-loader])])) diff --git a/frontend/src/app/main/ui/workspace/colorpalette.cljs b/frontend/src/app/main/ui/workspace/colorpalette.cljs index ac2ef1bb5..2b7525499 100644 --- a/frontend/src/app/main/ui/workspace/colorpalette.cljs +++ b/frontend/src/app/main/ui/workspace/colorpalette.cljs @@ -9,24 +9,25 @@ (ns app.main.ui.workspace.colorpalette (:require - [beicon.core :as rx] - [goog.events :as events] - [okulary.core :as l] - [rumext.alpha :as mf] - [cuerdas.core :as str] [app.common.math :as mth] [app.main.data.colors :as mdc] [app.main.data.workspace :as udw] + [app.main.refs :as refs] [app.main.store :as st] - [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.color-bullet :as cb] + [app.main.ui.components.dropdown :refer [dropdown]] + [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.main.ui.keyboard :as kbd] [app.util.color :refer [hex->rgb]] [app.util.dom :as dom] + [app.util.i18n :as i18n :refer [t]] [app.util.object :as obj] - [app.main.refs :as refs] - [app.util.i18n :as i18n :refer [t]])) + [beicon.core :as rx] + [cuerdas.core :as str] + [goog.events :as events] + [okulary.core :as l] + [rumext.alpha :as mf])) ;; --- Refs @@ -194,8 +195,9 @@ (vals (get-in shared-libs [selected :data :colors])))) (mf/defc colorpalette - [{:keys [left-sidebar? team-id]}] - (let [recent-colors (mf/deref refs/workspace-recent-colors) + [{:keys [left-sidebar?]}] + (let [team-id (mf/use-ctx ctx/current-team-id) + recent-colors (mf/deref refs/workspace-recent-colors) file-colors (mf/deref refs/workspace-file-colors) shared-libs (mf/deref refs/workspace-libraries) selected (or (mf/deref selected-palette-ref) :recent) diff --git a/frontend/src/app/main/ui/workspace/comments.cljs b/frontend/src/app/main/ui/workspace/comments.cljs index 163e0341f..dd9860298 100644 --- a/frontend/src/app/main/ui/workspace/comments.cljs +++ b/frontend/src/app/main/ui/workspace/comments.cljs @@ -8,7 +8,6 @@ ;; Copyright (c) 2020 UXBOX Labs SL (ns app.main.ui.workspace.comments - (:refer-clojure :exclude [comment]) (:require [app.config :as cfg] [app.main.data.workspace :as dw] @@ -17,6 +16,7 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.streams :as ms] + [app.main.ui.context :as ctx] [app.main.ui.components.dropdown :refer [dropdown]] [app.main.data.modal :as modal] [app.main.ui.hooks :as hooks] @@ -25,6 +25,7 @@ [app.main.ui.workspace.colorpicker] [app.main.ui.workspace.context-menu :refer [context-menu]] [app.util.time :as dt] + [app.util.timers :as tm] [app.util.dom :as dom] [app.util.object :as obj] [beicon.core :as rx] @@ -401,11 +402,18 @@ (mf/defc sidebar-group-item [{:keys [item] :as props}] (let [profile (get @refs/workspace-users (:owner-id item)) + page-id (mf/use-ctx ctx/current-page-id) + file-id (mf/use-ctx ctx/current-file-id) + on-click (mf/use-callback - (mf/deps item) - (st/emitf (dwcm/center-to-comment-thread item) - (dwcm/open-thread item)))] + (mf/deps item page-id) + (fn [] + (when (not= page-id (:page-id item)) + (st/emit! (dw/go-to-page (:page-id item)))) + (tm/schedule + (st/emitf (dwcm/center-to-comment-thread item) + (dwcm/open-thread item)))))] [:div.comment {:on-click on-click} [:div.author diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index 7790368cb..df85defc7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -23,34 +23,28 @@ (mf/defc left-sidebar {:wrap [mf/memo]} - [{:keys [layout page-id file project] :as props}] + [{:keys [layout ] :as props}] [:aside.settings-bar.settings-bar-left [:div.settings-bar-inside {:data-layout (str/join "," layout)} (when (contains? layout :layers) [:* - [:& sitemap {:file file - :page-id page-id - :layout layout}] + [:& sitemap {:layout layout}] [:& layers-toolbox]]) (when (contains? layout :document-history) [:& history-toolbox]) (when (contains? layout :assets) - [:& assets-toolbox {:team-id (:team-id project) - :file file}])]]) + [:& assets-toolbox])]]) ;; --- Right Sidebar (Component) (mf/defc right-sidebar - [{:keys [layout page-id file-id local] :as props}] + [{:keys [local] :as props}] (let [drawing-tool (:tool (mf/deref refs/workspace-drawing))] - [:aside#settings-bar.settings-bar + [:aside.settings-bar [:div.settings-bar-inside (if (= drawing-tool :comments) [:& comments-sidebar] - [:& options-toolbox - {:page-id page-id - :file-id file-id - :local local}])]])) + [:& options-toolbox {:local local}])]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs index 098f5beaf..4cf2d1153 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs @@ -17,29 +17,30 @@ [app.common.pages-helpers :as cph] [app.common.uuid :as uuid] [app.config :as cfg] + [app.main.data.colors :as dc] + [app.main.data.modal :as modal] [app.main.data.workspace :as dw] [app.main.data.workspace.libraries :as dwl] [app.main.data.workspace.texts :as dwt] - [app.main.data.colors :as dc] + [app.main.exports :as exports] [app.main.refs :as refs] [app.main.store :as st] - [app.main.exports :as exports] + [app.main.ui.components.color-bullet :as bc] [app.main.ui.components.context-menu :refer [context-menu]] [app.main.ui.components.file-uploader :refer [file-uploader]] [app.main.ui.components.tab-container :refer [tab-container tab-element]] - [app.main.ui.workspace.sidebar.options.typography :refer [typography-entry]] - [app.main.ui.components.color-bullet :as bc] + [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.main.ui.keyboard :as kbd] - [app.main.data.modal :as modal] [app.main.ui.shapes.icon :as icon] + [app.main.ui.workspace.sidebar.options.typography :refer [typography-entry]] [app.util.data :refer [matches-search]] [app.util.dom :as dom] [app.util.dom.dnd :as dnd] [app.util.i18n :as i18n :refer [tr t]] [app.util.router :as rt] - [app.util.timers :as timers] [app.util.text :as ut] + [app.util.timers :as timers] [cuerdas.core :as str] [okulary.core :as l] [rumext.alpha :as mf])) @@ -593,17 +594,18 @@ (mf/defc assets-toolbox - [{:keys [team-id file] :as props}] + [] (let [libraries (mf/deref refs/workspace-libraries) + file (mf/deref refs/workspace-file) locale (mf/deref i18n/locale) + team-id (mf/use-ctx ctx/current-team-id) filters (mf/use-state {:term "" :box :all}) on-search-term-change (mf/use-callback (mf/deps team-id) (fn [event] - (let [value (-> (dom/get-target event) - (dom/get-value))] + (let [value (dom/get-target-val event)] (swap! filters assoc :term value)))) on-search-clear-click diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.cljs b/frontend/src/app/main/ui/workspace/sidebar/options.cljs index bca5a51de..0a4020a8d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options.cljs @@ -16,6 +16,7 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.tab-container :refer [tab-container tab-element]] + [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.align :refer [align-options]] [app.main.ui.workspace.sidebar.options.circle :as circle] @@ -88,8 +89,10 @@ (mf/defc options-toolbox {::mf/wrap [mf/memo]} - [{:keys [page-id file-id local] :as props}] + [{:keys [local] :as props}] (let [section (:options-mode local) + 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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs index cb38b6498..a9e178b3d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs @@ -10,13 +10,14 @@ (ns app.main.ui.workspace.sidebar.sitemap (:require [app.common.data :as d] + [app.main.data.modal :as modal] [app.main.data.workspace :as dw] [app.main.refs :as refs] [app.main.store :as st] + [app.main.ui.context :as ctx] [app.main.ui.hooks :as hooks] [app.main.ui.icons :as i] [app.main.ui.keyboard :as kbd] - [app.main.data.modal :as modal] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [t]] [app.util.router :as rt] @@ -131,9 +132,10 @@ ;; --- Pages List (mf/defc pages-list - [{:keys [file current-page-id] :as props}] - (let [pages (:pages file) - deletable? (> (count pages) 1)] + [{:keys [file] :as props}] + (let [pages (:pages file) + deletable? (> (count pages) 1) + current-page-id (mf/use-ctx ctx/current-page-id)] [:ul.element-list [:& hooks/sortable-container {} (for [[index page-id] (d/enumerate pages)] @@ -147,11 +149,13 @@ ;; --- Sitemap Toolbox (mf/defc sitemap - [{:keys [file page-id layout] :as props}] + [{:keys [layout] :as props}] (let [create (mf/use-callback #(st/emit! dw/create-empty-page)) locale (mf/deref i18n/locale) show-pages? (mf/use-state true) + file (mf/deref refs/workspace-file) + toggle-pages (mf/use-callback #(reset! show-pages? not))] @@ -163,7 +167,4 @@ (when @show-pages? [:div.tool-window-content - [:& pages-list - {:file file - :key (:id file) - :current-page-id page-id}]])])) + [:& pages-list {:file file :key (:id file)}]])])) diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 89f8349b7..4f315a1db 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -24,7 +24,7 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.streams :as ms] - [app.main.ui.context :as muc] + [app.main.ui.context :as ctx] [app.main.ui.cursors :as cur] [app.main.ui.hooks :as hooks] [app.main.ui.icons :as i] @@ -188,7 +188,7 @@ (:height vbox 0)])) (mf/defc viewport - [{:keys [page-id page local layout] :as props}] + [{:keys [local layout file] :as props}] (let [{:keys [options-mode zoom flags @@ -200,21 +200,21 @@ panning picking-color?]} local - selrect-orig (->> (mf/deref refs/selected-objects) - gsh/selection-rect) - selrect (-> selrect-orig - (assoc :modifiers (:modifiers local)) - (gsh/transform-shape)) + page-id (mf/use-ctx ctx/current-page-id) + selrect-orig (->> (mf/deref refs/selected-objects) + (gsh/selection-rect)) + selrect (-> selrect-orig + (assoc :modifiers (:modifiers local)) + (gsh/transform-shape)) - file (mf/deref refs/workspace-file) viewport-ref (mf/use-ref nil) zoom-view-ref (mf/use-ref nil) last-position (mf/use-var nil) drawing (mf/deref refs/workspace-drawing) drawing-tool (:tool drawing) drawing-obj (:object drawing) + zoom (or zoom 1) - zoom (or zoom 1) on-mouse-down (mf/use-callback @@ -226,7 +226,6 @@ shift? (kbd/shift? event) alt? (kbd/alt? event)] (st/emit! (ms/->MouseEvent :down ctrl? shift? alt?)) - (cond (and (= 1 (.-which event))) (if drawing-tool @@ -509,6 +508,7 @@ [:svg.viewport {:preserveAspectRatio "xMidYMid meet" + :key page-id :width (:width vport 0) :height (:height vport 0) :view-box (format-viewbox vbox)