🐛 Fix many issue on workspace rendering (and adapt to rumext changes)

frontend/deps.edn

@@ -4,7 +4,7 @@
         com.cognitect/transit-cljs {:mvn/version "0.8.256"}
 
         funcool/rumext {:git/url "https://github.com/funcool/rumext.git"
-                        :sha "18739f966f12ff7aab3a9bde1fe37a5594f46b8d"}
+                        :sha "ed9bf4c9c19110c6494a0571083a62b3b08eb17b"}
 
         cljsjs/react-dom-server {:mvn/version "16.8.6-0"}
 

frontend/src/uxbox/main/refs.cljs

@@ -50,11 +50,13 @@
   (-> (l/lens resolve-project-pages)
       (l/derive st/state)))
 
+;; DEPRECATED
 (def selected-page
   "Ref to the current selected page."
   (-> (l/lens resolve-page)
       (l/derive st/state)))
 
+;; DEPRECATED
 (def selected-page-id
   "Ref to the current selected page id."
   (-> (l/key :id)

frontend/src/uxbox/main/ui.cljs

@@ -95,7 +95,7 @@
     (let [route (mx/react (::route-ref own))
           route-id (get-in route [:data :name])]
       (case route-id
-        :auth/login (mf/elem auth/login-page)
+        :auth/login (mf/element auth/login-page)
         :auth/register (auth/register-page)
         :auth/recovery-request (auth/recovery-request-page)
 
@@ -106,18 +106,18 @@
         (:settings/profile
          :settings/password
          :settings/notifications)
-        (mf/elem settings/settings {:route route})
+        (mf/element settings/settings {:route route})
 
         (:dashboard/projects
          :dashboard/icons
          :dashboard/images
          :dashboard/colors)
-        (mf/elem dashboard/dashboard {:route route})
+        (mf/element dashboard/dashboard {:route route})
 
         :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}])
 
         nil
         ))))

frontend/src/uxbox/main/ui/auth/login.cljs

@@ -99,7 +99,7 @@
 
 (mf/defc login-page
   []
-  (mf/use-effect :end #(st/emit! (fm/clear-form :login)))
+  (mf/use-effect {:end #(st/emit! (fm/clear-form :login))})
   [:div.login
    [:div.login-body
     (messages-widget)

frontend/src/uxbox/main/ui/dashboard.cljs

@@ -11,12 +11,6 @@
    [uxbox.main.ui.dashboard.colors :as colors]
    [uxbox.main.ui.messages :refer [messages-widget]]))
 
-(def projects-page projects/projects-page)
-;; (def elements-page elements/elements-page)
-(def icons-page icons/icons-page)
-(def images-page images/images-page)
-(def colors-page colors/colors-page)
-
 (defn- parse-route
   [{:keys [params data] :as route}]
   (let [{:keys [id type]} (:query params)
@@ -35,9 +29,9 @@
   (let [{:keys [section] :as props} (parse-route route)]
     [:main.dashboard-main
      (messages-widget)
-     (header) ;; TODO: pass section to header
+     [:& header props]
      (case section
-       :dashboard/icons (icons/icons-page props)
+       :dashboard/icons (mf/element icons/icons-page props)
-       :dashboard/images (images/images-page props)
+       :dashboard/images (mf/element images/images-page props)
-       :dashboard/projects (projects/projects-page props)
+       :dashboard/projects (mf/element projects/projects-page props)
-       :dashboard/colors (colors/colors-page props))]))
+       :dashboard/colors (mf/element colors/colors-page props))]))

frontend/src/uxbox/main/ui/dashboard/header.cljs

@@ -18,45 +18,34 @@
    [uxbox.util.i18n :refer (tr)]
    [uxbox.util.router :as rt]))
 
-(mx/defc header-link
+(mf/defc header-link
   [{:keys [section content] :as props}]
   (let [on-click #(st/emit! (rt/nav section))]
     [:a {:on-click on-click} content]))
 
-(mf/def header
+(mf/defc header
-  :mixins [mx/static mx/reactive]
+  [{:keys [section] :as props}]
-  :init
+  (let [projects? (= section :dashboard/projects)
-  (fn [own props]
-    (assoc own ::section-ref (-> (l/in [:dashboard :section])
-                                 (l/derive st/state))))
-
-  :render
-  (fn [own props]
-    (let [section (mx/react (::section-ref own))
-          projects? (= section :dashboard/projects)
-          elements? (= section :dashboard/elements)
         icons? (= section :dashboard/icons)
         images? (= section :dashboard/images)
         colors? (= section :dashboard/colors)]
     [:header#main-bar.main-bar
      [:div.main-logo
-      (header-link {:section :dashboard/projects
+      [:& header-link {:section :dashboard/projects
-                    :content i/logo})]
+                       :content i/logo}]]
      [:ul.main-nav
       [:li {:class (when projects? "current")}
-       (header-link {:section :dashboard/projects
+       [:& header-link {:section :dashboard/projects
-                     :content (tr "ds.projects")})]
+                        :content (tr "ds.projects")}]]
-      #_[:li {:class (when elements? "current")}
-       (header-link :dashboard/elements (tr "ds.elements"))]
       [:li {:class (when icons? "current")}
-       (header-link {:section :dashboard/icons
+       [:& header-link {:section :dashboard/icons
-                     :content (tr "ds.icons")})]
+                        :content (tr "ds.icons")}]]
       [:li {:class (when images? "current")}
-       (header-link {:section :dashboard/images
+       [:& header-link {:section :dashboard/images
-                     :content (tr "ds.images")})]
+                        :content (tr "ds.images")}]]
       [:li {:class (when colors? "current")}
-       (header-link {:section :dashboard/colors
+       [:& header-link {:section :dashboard/colors
-                     :content (tr "ds.colors")})]]
+                        :content (tr "ds.colors")}]]]
-     [:& user]])))
+     [:& user]]))
 
 

frontend/src/uxbox/main/ui/dashboard/projects.cljs

@@ -38,6 +38,11 @@
   (-> (l/in [:dashboard :projects])
       (l/derive st/state)))
 
+(def projects-ref
+  (-> (l/key :projects)
+      (l/derive st/state)))
+
+
 ;; --- Helpers
 
 (defn sort-projects-by
@@ -110,62 +115,51 @@
 
 ;; --- Grid Item Thumbnail
 
-(mf/def grid-item-thumbnail
+(mf/defc grid-item-thumbnail
-  :mixins #{mf/memo}
+  [{:keys [project] :as props}]
-
+  (let [url (mf/use-state nil)]
-  :init
+    (mf/use-effect
-  (fn [own project]
+     {:watch (:page-id project)
-    (let [svg (exports/render-page (:page-id project))
+      :init (fn []
-          url (some-> svg
+              (when-let [page-id (:page-id project)]
+                (let [svg (exports/render-page page-id)
+                      uri (some-> svg
                                   (blob/create "image/svg+xml")
                                   (blob/create-uri))]
-      (assoc own ::url url)))
+                  (reset! url uri)
-
+                  uri)))
-  :will-unmount
+      :end #(when % (blob/revoke-uri %))})
-  (fn [own]
+    (if @url
-    (let [url (::url own)]
-      (when url (blob/revoke-uri url))
-      own))
-
-  :render
-  (fn [own project]
-    (if-let [url (::url own)]
       [:div.grid-item-th
-       {:style {:background-image (str "url('" url "')")}}]
+       {:style {:background-image (str "url('" @url "')")}}]
       [:div.grid-item-th
        [:img.img-th {:src "/images/project-placeholder.svg"
                      :alt "Project title"}]])))
 
+
+
 ;; --- Grid Item
 
-(mf/def grid-item
+(mf/defc grid-item
-  :key-fn :id
+  [{:keys [project] :as props}]
-  :mixins #{mf/memo (mf/local)}
+  (let [local (mf/use-state {})
-
+        on-navigate #(st/emit! (udp/go-to (:id project)))
-  :render
+        delete #(st/emit! (udp/delete-project project))
-  (fn [{:keys [::mf/local] :as own} project]
+        on-delete #(do
-    (letfn [(on-navigate [event]
+                     (dom/stop-propagation %)
-              (st/emit! (udp/go-to (:id project))))
-            (delete []
-              (st/emit! (udp/delete-project project)))
-            (on-delete [event]
-              (dom/stop-propagation event)
                      (udl/open! :confirm {:on-accept delete}))
-            (on-key-down [event]
+        on-blur #(let [target (dom/event->target %)
-              (when (kbd/enter? event)
-                (on-blur event)))
-            (on-blur [event]
-              (let [target (dom/event->target event)
                        name (dom/get-value target)
                        id (:id project)]
                    (swap! local assoc :edition false)
-                (st/emit! (udp/rename-project id name))))
+                   (st/emit! (udp/rename-project id name)))
-            (on-edit [event]
+        on-key-down #(when (kbd/enter? %) (on-blur %))
-              (dom/stop-propagation event)
+        on-edit #(do
-              (dom/prevent-default event)
+                   (dom/stop-propagation %)
+                   (dom/prevent-default %)
                    (swap! local assoc :edition true))]
     [:div.grid-item.project-th {:on-click on-navigate}
-       (grid-item-thumbnail project)
+     [:& grid-item-thumbnail {:project project :key (select-keys project [:id :page-id])}]
      [:div.item-info
       (if (:edition @local)
         [:input.element-name {:type "text"
@@ -189,51 +183,38 @@
        i/pencil]
       [:div.project-th-icon.delete
        {:on-click on-delete}
-         i/trash]]])))
+       i/trash]]]))
 
 ;; --- Grid
 
-(mf/def grid
+(mf/defc grid
-  :mixins #{mf/memo mf/reactive}
+  {:wrap [mf/reactive*]}
-
+  [{:keys [order filter] :or {order :created filter ""} :as props}]
-  :init
+  (let [projects (->> (vals (mf/deref projects-ref))
-  (fn [own props]
+                      (filter-projects-by filter)
-    (assoc own ::projects (-> (l/key :projects)
+                      (sort-projects-by order))
-                              (l/derive st/state))))
+        on-click #(do
-
+                    (dom/prevent-default %)
-  :render
+                    (udl/open! :create-project))]
-  (fn [own props]
-    (let [ordering (:order props :created)
-          filtering (:filter props "")
-          projects (->> (vals (mf/react (::projects own)))
-                        (filter-projects-by filtering)
-                        (sort-projects-by ordering))]
     [:section.dashboard-grid
      [:h2 (tr "ds.project-title")]
      [:div.dashboard-grid-content
       [:div.dashboard-grid-row
-         [:div.grid-item.add-project {:on-click (fn [e]
+       [:div.grid-item.add-project {:on-click on-click}
-                                                  (dom/prevent-default e)
-                                                  (udl/open! :create-project))}
         [:span (tr "ds.project-new")]]
        (for [item projects]
-           (grid-item item))]]])))
+         [:& grid-item {:project item :key (:id item)}])]]]))
 
 ;; --- Projects Page
 
-(mf/def projects-page
+(mf/defc projects-page
-  :mixins [mf/memo mf/reactive]
+  {:wrap [mf/reactive*]}
-
+  [props]
-  :init
+  (let [opts (mf/deref opts-ref)
-  (fn [own props]
-    (st/emit! (udp/initialize))
-    own)
-
-  :render
-  (fn [own props]
-    (let [opts (mf/react opts-ref)
         props (merge opts props)]
+    (mf/use-effect
+     {:init #(st/emit! (udp/initialize))})
     [:section.dashboard-content
-       (menu props)
+     [:& menu props]
-       (grid props)])))
+     [:& grid props]]))
 

frontend/src/uxbox/main/ui/settings.cljs

@@ -25,9 +25,9 @@
      (messages-widget)
      [:& header {:section section}]
      (case section
-       :settings/profile (mf/elem profile/profile-page)
+       :settings/profile (mf/element profile/profile-page)
-       :settings/password (mf/elem password/password-page)
+       :settings/password (mf/element password/password-page)
-       :settings/notifications (mf/elem notifications/notifications-page))]))
+       :settings/notifications (mf/element notifications/notifications-page))]))
 
 
 

frontend/src/uxbox/main/ui/settings/header.cljs

@@ -13,7 +13,6 @@
    [uxbox.main.data.auth :as da]
    [uxbox.main.data.projects :as dp]
    [uxbox.main.store :as st]
-   [uxbox.main.ui.navigation :as nav]
    [uxbox.main.ui.users :refer [user]]
    [uxbox.util.i18n :refer [tr]]
    [uxbox.util.router :as rt]))
@@ -24,7 +23,6 @@
     [:a {:on-click on-click} content]))
 
 (mf/defc header
-  {:wrap [mf/memo*]}
   [{:keys [section] :as props}]
   (let [profile? (= section :settings/profile)
         password? (= section :settings/password)

frontend/src/uxbox/main/ui/workspace.cljs

@@ -60,12 +60,8 @@
         (st/emit! (dw/increase-zoom)))
       (scroll/scroll-to-point dom mouse-point scroll-position))))
 
-(def ^:private workspace-page-ref
-  (-> (l/key :page)
-      (l/derive refs/workspace)))
-
 (mf/def workspace
-  :key-fn vector
+  :key-fn identity
   :mixins #{mf/memo
             mf/reactive
             shortcuts-mixin}
@@ -78,7 +74,6 @@
   :did-mount
   (fn [own]
     (let [{:keys [project page]} (::mf/props own)
-          ;; dom (mf/ref-node own "workspace-canvas")
           dom (mf/ref-node (::canvas own))
           scroll-to-page-center #(scroll/scroll-to-page-center dom @refs/selected-page)
           sub (rx/subscribe streams/page-id-ref-s scroll-to-page-center)]
@@ -95,7 +90,7 @@
 
   :render
   (fn [own props]
-    (let [flags (mf/react refs/flags)
+    (let [flags (mf/deref refs/flags)
           project-id (get props :project)
           page-id (get props :page)
           left-sidebar? (not (empty? (keep flags [:layers :sitemap
@@ -129,7 +124,9 @@
          ;; Canvas
          [:section.workspace-canvas {:id "workspace-canvas"
                                      :ref (::canvas own)}
-          (viewport)]]
+          [:& viewport {:project project-id
+                        :page page-id
+                        :key [project-id page-id]}]]]
 
         ;; Aside
         (when left-sidebar?

frontend/src/uxbox/main/ui/workspace/canvas.cljs

@@ -135,20 +135,23 @@
   :mixins [mf/reactive]
 
   :init
-  (fn [own props]
+  (fn [own {:keys [page project] :as props}]
-    (assoc own ::viewport-ref (mf/create-ref)))
+    (assoc own
+           ::viewport (mf/create-ref)
+           ::page-ref (-> (l/in [:pages page])
+                          (l/derive st/state))))
 
   :did-mount
   (fn [own]
     (letfn [(translate-point-to-viewport [pt]
-              (let [viewport (mf/ref-node (::viewport-ref own))
+              (let [viewport (mf/ref-node (::viewport own))
                     brect (.getBoundingClientRect viewport)
                     brect (gpt/point (parse-int (.-left brect))
                                      (parse-int (.-top brect)))]
                 (gpt/subtract pt brect)))
 
             (translate-point-to-canvas [pt]
-              (let [viewport (mf/ref-node (::viewport-ref own))]
+              (let [viewport (mf/ref-node (::viewport own))]
                 (when-let [canvas (dom/get-element-by-class "page-canvas" viewport)]
                   (let [brect (.getBoundingClientRect canvas)
                         bbox (.getBBox canvas)
@@ -209,9 +212,11 @@
     (events/unlistenByKey (::key3 own))
     (dissoc own ::key1 ::key2 ::key3))
 
+
+  ;; TODO: use an ad-hoc ref for required keys from workspace state
   :render
   (fn [own props]
-    (let [page (mf/react refs/selected-page)
+    (let [page (mf/deref (::page-ref own))
           flags (mf/react refs/flags)
           drawing (mf/react refs/selected-drawing-tool)
           tooltip (or (mf/react refs/selected-tooltip)
@@ -263,7 +268,7 @@
             (cursor-tooltip tooltip))]
          [:svg.viewport {:width (* c/viewport-width zoom)
                          :height (* c/viewport-height zoom)
-                         :ref (::viewport-ref own)
+                         :ref (::viewport own)
                          :class (when drawing "drawing")
                          :on-context-menu on-context-menu
                          :on-click on-click

frontend/src/uxbox/main/ui/workspace/rules.cljs

@@ -66,10 +66,8 @@
 
 ;; --- Horizontal Text Label
 
-(mf/def horizontal-text-label
+(mf/defc horizontal-text-label
-  :key-fn second
+  [{:keys [zoom value] :as props}]
-  :render
-  (fn [own [zoom value]]
   (let [big-ticks-mod (big-ticks-mod zoom)
         pos (+ (* value zoom)
                rule-padding
@@ -81,14 +79,12 @@
               :key (str pos)
               :fill "#9da2a6"
               :style {:font-size "12px"}}
-         value]))))
+       value])))
 
 ;; --- Horizontal Text Label
 
-(mf/def vertical-text-label
+(mf/defc vertical-text-label
-  :key-fn second
+  [{:keys [zoom value] :as props}]
-  :render
-  (fn [own [zoom value]]
   (let [big-ticks-mod (big-ticks-mod zoom)
         pos (+ (* value zoom)
                (* c/canvas-start-x zoom)
@@ -100,7 +96,7 @@
               :fill "#9da2a6"
               :transform (str/format "rotate(90 0 %s)" pos)
               :style {:font-size "12px"}}
-         value]))))
+       value])))
 
 ;; --- Horizontal Rule Ticks (Component)
 
@@ -113,7 +109,7 @@
       [:g
        [:path {:d (str/join " " path)}]
        (for [tick +ticks+]
-         (horizontal-text-label [zoom tick]))])))
+         [:& horizontal-text-label {:zoom zoom :value tick :key tick}])])))
 
 ;; --- Vertical Rule Ticks (Component)
 
@@ -126,7 +122,7 @@
       [:g
        [:path {:d (str/join " " path)}]
        (for [tick +ticks+]
-         (vertical-text-label [zoom tick]))])))
+         [:& vertical-text-label {:zoom zoom :value tick :key tick}])])))
 
 ;; --- Horizontal Rule (Component)
 

frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs

@@ -25,14 +25,10 @@
    [uxbox.util.i18n :refer (tr)]
    [uxbox.util.router :as r]))
 
-(mf/def page-item
+(mf/defc page-item
-  :mixins [(mf/local) mf/memo mf/reactive]
+  [{:keys [page deletable? selected?] :as props}]
-  :key-fn :id
+  (let [local (mf/use-state {})
-
+        body-classes (classnames
-  :render
-  (fn [{:keys [::mf/local] :as own}
-       {:keys [::deletable? ::selected?] :as page}]
-    (let [body-classes (classnames
                       :selected selected?
                       :drag-active (:dragging @local)
                       :drag-top (= :top (:over @local))
@@ -99,12 +95,12 @@
          :on-drop on-drop
          :draggable true}
 
-          [:div.page-icon {} i/page]
+        [:div.page-icon i/page]
-          [:span {} (:name page)]
+        [:span (:name page)]
         [:div.page-actions {}
          [:a {:on-click on-edit} i/pencil]
          (when deletable?
-             [:a {:on-click on-delete} i/trash])]]]))))
+           [:a {:on-click on-delete} i/trash])]]])))
 
 (mf/def sitemap-toolbox
   :mixins [mf/memo mf/reactive]
@@ -128,4 +124,7 @@
         [:ul.element-list
          (for [page pages]
            (let [selected? (= (:id page) current-page-id)]
-             (page-item (assoc page ::deletable? deletable? ::selected? selected?))))]]])))
+             [:& page-item {:page page
+                            :deletable? deletable?
+                            :selected? selected?
+                            :key (:id page)}]))]]])))