♻️ Refactor workspace initialization.

And fix comment positioning when coment is
in a different page.

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

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))

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
+(mf/defc workspace-rules
-  [{:keys [page-id file layout project] :as params}]
+  {::mf/wrap-props false}
-  (let [local          (mf/deref refs/workspace-local)
+  [props]
-        left-sidebar?  (:left-sidebar? local)
+  (let [local (unchecked-get props "local")]
-        right-sidebar? (:right-sidebar? local)
-        classes        (dom/classnames
-                        :no-tool-bar-right (not right-sidebar?)
-                        :no-tool-bar-left (not left-sidebar?))]
     [:*
-     (when (:colorpalette layout)
+     [:div.empty-rule-square]
-       [:& colorpalette {:left-sidebar? left-sidebar?
+     [:& horizontal-rule {:zoom (:zoom local)
-                         :team-id (:team-id project)}])
+                          :vbox (:vbox local)
+                          :vport (:vport local)}]
+     [:& vertical-rule {:zoom (:zoom local 1)
+                        :vbox (:vbox local)
+                        :vport (:vport local)}]
+     [:& coordinates]]))
 
-     [:section.workspace-content {:class classes}
+(mf/defc workspace-content
-      [:section.workspace-viewport
+  [{:keys [file layout local] :as params}]
-       (when (contains? layout :rules)
+  [:*
-         [:*
+   ;; TODO: left-sidebar option is obsolete because left-sidebar now
-          [:div.empty-rule-square]
+   ;; is always visible.
-          [:& horizontal-rule {:zoom (:zoom local)
+   (when (:colorpalette layout)
-                               :vbox (:vbox local)
+     [:& colorpalette {:left-sidebar? true}])
-                               :vport (:vport local)}]
-          [:& vertical-rule {:zoom (:zoom local 1)
-                             :vbox (:vbox local)
-                             :vport (:vport local)}]
-          [:& coordinates]])
 
+   [:section.workspace-content
+    [:section.workspace-viewport
+     (when (contains? layout :rules)
+       [:& workspace-rules {:local local}])
 
-       [:& viewport {:page-id page-id
+     [:& viewport {:file file
-                     :key (str page-id)
+                   :local local
-                     :file file
+                   :layout layout}]]]
-                     :local local
-                     :layout layout}]]]
 
-     [:& left-toolbar {:layout layout}]
+   [:& left-toolbar {:layout layout}]
 
-     ;; Aside
+   ;; Aside
-     (when left-sidebar?
+   [:& left-sidebar {:layout layout}]
-       [:& left-sidebar
+   [:& right-sidebar {:local local}]])
-        {: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}])]))
 
-(defn trimmed-page-ref
+(def trimmed-page-ref (l/derived :trimmed-page st/state =))
-  [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 =))
 
 (mf/defc workspace-page
-  [{:keys [project file layout page-id] :as props}]
+  [{:keys [file layout page-id] :as props}]
-  (mf/use-effect
+  (let [local (mf/deref refs/workspace-local)
-   (mf/deps page-id)
+        page  (mf/deref trimmed-page-ref)]
-   (fn []
+    (mf/use-layout-effect
-     (st/emit! (dw/initialize-page page-id))
+     (mf/deps page-id)
-     #(st/emit! (dw/finalize-page 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
+      [:& workspace-content {:file file :layout layout :local local}])))
-                             :page-id (:id page)
-                             :project project
-                             :file file
-                             :layout layout}])))
 
 (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
+    [:& (mf/provider ctx/current-file-id) {:value (:id file)}
-     [:& header {:file file
+     [:& (mf/provider ctx/current-team-id) {:value (:team-id project)}
-                 :page-id page-id
+      [:& (mf/provider ctx/current-project-id) {:value (:id project)}
-                 :project project
+       [:& (mf/provider ctx/current-page-id) {:value page-id}
-                 :layout layout}]
 
-     [:& context-menu]
+        [:section#workspace
+         [:& header {:file file
+                     :page-id page-id
+                     :project project
+                     :layout layout}]
 
-     (if (and (and file project)
+         [:& context-menu]
-              (:initialized file))
+
+         (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])]))

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]
+   [beicon.core :as rx]
-   [app.util.i18n :as i18n :refer [t]]))
+   [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]}]
+  [{:keys [left-sidebar?]}]
-  (let [recent-colors (mf/deref refs/workspace-recent-colors)
+  (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)

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)
+         (mf/deps item page-id)
-         (st/emitf (dwcm/center-to-comment-thread item)
+         (fn []
-                   (dwcm/open-thread item)))]
+           (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

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
+       [:& sitemap {:layout layout}]
-                    :page-id page-id
-                    :layout layout}]
        [:& layers-toolbox]])
 
     (when (contains? layout :document-history)
       [:& history-toolbox])
 
     (when (contains? layout :assets)
-      [:& assets-toolbox {:team-id (:team-id project)
+      [:& assets-toolbox])]])
-                          :file file}])]])
 
 ;; --- 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
+        [:& options-toolbox {:local local}])]]))
-         {:page-id page-id
-          :file-id file-id
-          :local local}])]]))

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.context :as ctx]
-   [app.main.ui.components.color-bullet :as bc]
    [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)
+           (let [value (dom/get-target-val event)]
-                           (dom/get-value))]
              (swap! filters assoc :term value))))
 
         on-search-clear-click

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

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}]
+  [{:keys [file] :as props}]
-  (let [pages      (:pages file)
+  (let [pages           (:pages file)
-        deletable? (> (count pages) 1)]
+        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
+        [:& pages-list {:file file :key (:id file)}]])]))
-         {:file file
-          :key (:id file)
-          :current-page-id page-id}]])]))

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)
+        page-id       (mf/use-ctx ctx/current-page-id)
-                          gsh/selection-rect)
+        selrect-orig  (->> (mf/deref refs/selected-objects)
-        selrect (-> selrect-orig
+                           (gsh/selection-rect))
-                    (assoc :modifiers (:modifiers local))
+        selrect       (-> selrect-orig
-                    (gsh/transform-shape))
+                          (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)