feat(frontend): 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 "ed2e674cb774153e852cab29f197e8f40ac143d0"}
+                        :sha "19d7a87725bdd621084dc6e5e160f57bf2534d5a"}
 
         cljsjs/react-dom-server {:mvn/version "16.8.6-0"}
 

frontend/src/uxbox/builtins/icons.cljs

@@ -6,7 +6,7 @@
 ;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 (ns uxbox.builtins.icons
-  (:require [rumext.core :refer-macros [html]]))
+  (:require [rumext.alpha :refer-macros [html]]))
 
 (def logo
   (html

frontend/src/uxbox/main/ui.cljs

@@ -12,7 +12,7 @@
    [lentes.core :as l]
    [potok.core :as ptk]
    [rumext.core :as mx]
-   [rumext.func :as mf]
+   [rumext.alpha :as mf]
    [uxbox.builtins.icons :as i]
    [uxbox.main.data.auth :refer [logout]]
    [uxbox.main.data.projects :as dp]
@@ -96,7 +96,7 @@
      :type type}))
 
 
-(mx/def app
+(mf/def app
   :mixins [mx/reactive]
 
   :init

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

@@ -11,7 +11,7 @@
    [cuerdas.core :as str]
    [lentes.core :as l]
    [rumext.core :as mx]
-   [rumext.func :as mf]
+   [rumext.alpha :as mf]
    [uxbox.builtins.icons :as i]
    [uxbox.config :as cfg]
    [uxbox.main.data.auth :as da]

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

@@ -9,7 +9,8 @@
   (:require
    [cuerdas.core :as str]
    [lentes.core :as l]
-   [rumext.core :as mx :include-macros true]
+   [rumext.core :as mx]
+   [rumext.alpha :as mf]
    [uxbox.builtins.icons :as i]
    [uxbox.main.data.colors :as dc]
    [uxbox.main.data.dashboard :as dd]
@@ -39,11 +40,11 @@
 
 ;; --- Page Title
 
-(mx/def page-title
+(mf/def page-title
-  :mixins [(mx/local) mx/static mx/reactive]
+  :mixins [(mf/local) mf/static mf/reactive]
 
   :render
-  (fn [{:keys [::mx/local] :as own}
+  (fn [{:keys [::mf/local] :as own}
        {:keys [id] :as coll}]
     (let [own? (= :own (:type coll))
           edit? (:edit @local)]
@@ -91,11 +92,11 @@
 
 ;; --- Nav
 
-(mx/def nav-item
+(mf/def nav-item
-  :mixins [(mx/local) mx/static]
+  :mixins [(mf/local) mf/static]
 
   :render
-  (fn [{:keys [::mx/local] :as own}
+  (fn [{:keys [::mf/local] :as own}
        {:keys [id type name ::selected?] :as coll}]
     (let [colors (count (:colors coll))
           editable? (= type :own)]
@@ -132,14 +133,14 @@
          [:span.element-subtitle
           (tr "ds.num-elements" (t/c colors))]]))))
 
-(mx/def nav
+(mf/def nav
-  :mixins [mx/static mx/reactive]
+  :mixins [mf/static mf/reactive]
 
   :render
   (fn [own {:keys [id type] :as props}]
     (let [own? (= type :own)
           builtin? (= type :builtin)
-          colls (mx/react collections-ref)
+          colls (mf/react collections-ref)
           select-tab (fn [type]
                        (if-let [coll (->> (vals colls)
                                           (filter #(= type (:type %)))
@@ -177,15 +178,15 @@
    {:on-click #(udl/open! :color-form {:coll coll-id})}
    [:span (tr "ds.color-new")]])
 
-(mx/def grid-options-tooltip
+(mf/def grid-options-tooltip
-  :mixins [mx/reactive mx/static]
+  :mixins [mf/reactive mf/static]
 
   :render
   (fn [own {:keys [selected on-select title]}]
     {:pre [(uuid? selected)
            (fn? on-select)
            (string? title)]}
-    (let [colls (mx/react collections-ref)
+    (let [colls (mf/react collections-ref)
           colls (->> (vals colls)
                      (filter #(= :own (:type %)))
                      (remove #(= selected (:id %)))
@@ -200,11 +201,11 @@
          [:li {:key (str id)}
           [:a {:on-click #(on-select % id)} name]])])))
 
-(mx/def grid-options
+(mf/def grid-options
-  :mixins [mx/static (mx/local)]
+  :mixins [mf/static (mf/local)]
 
   :render
-  (fn [{:keys [::mx/local] :as own}
+  (fn [{:keys [::mf/local] :as own}
        {:keys [type id] :as coll}]
     (letfn [(delete [event]
               (st/emit! (dc/delete-selected-colors)))
@@ -264,9 +265,9 @@
                                     :on-select on-copy}))
            i/organize]])])))
 
-(mx/def grid-item
+(mf/def grid-item
   :key-fn :color
-  :mixins [mx/static]
+  :mixins [mf/static]
 
   :render
   (fn [own {:keys [color selected?] :as props}]
@@ -283,8 +284,8 @@
        [:span.color-data color]
        [:span.color-data (apply str "RGB " (interpose ", " (hex->rgb color)))]])))
 
-(mx/def grid
+(mf/def grid
-  :mixins [mx/static]
+  :mixins [mf/static]
 
   :render
   (fn [own {:keys [selected ::coll] :as props}]
@@ -299,8 +300,8 @@
           (let [selected? (contains? selected color)]
             (grid-item {:color color :selected? selected?})))]])))
 
-(mx/def content
+(mf/def content
-  :mixins [mx/reactive mx/static]
+  :mixins [mf/reactive mf/static]
 
   :init
   (fn [own {:keys [id] :as props}]
@@ -309,8 +310,8 @@
 
   :render
   (fn [own props]
-    (let [opts (mx/react opts-ref)
+    (let [opts (mf/react opts-ref)
-          coll (mx/react (::coll-ref own))
+          coll (mf/react (::coll-ref own))
           props (merge opts props)]
       [:section.dashboard-grid.library
        (page-title coll)
@@ -320,13 +321,13 @@
 
 ;; --- Colors Page
 
-(mx/def colors-page
+(mf/def colors-page
   :key-fn identity
-  :mixins #{mx/static mx/reactive}
+  :mixins #{mf/static mf/reactive}
 
   :init
   (fn [own props]
-    (let [{:keys [type id]} (::mx/props own)]
+    (let [{:keys [type id]} (::mf/props own)]
       (st/emit! (dc/initialize type id))
       own))
 

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

@@ -6,22 +6,24 @@
 ;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 (ns uxbox.main.ui.dashboard.header
-  (:require [lentes.core :as l]
+  (:require
-            [uxbox.main.store :as st]
+   [lentes.core :as l]
-            [uxbox.main.data.projects :as dp]
+   [rumext.core :as mx]
-            [uxbox.main.ui.navigation :as nav]
+   [rumext.alpha :as mf]
-            [uxbox.builtins.icons :as i]
+   [uxbox.builtins.icons :as i]
-            [uxbox.main.ui.users :as ui.u]
+   [uxbox.main.data.projects :as dp]
-            [uxbox.util.i18n :refer (tr)]
+   [uxbox.main.store :as st]
-            [uxbox.util.router :as rt]
+   [uxbox.main.ui.navigation :as nav]
-            [rumext.core :as mx :include-macros true]))
+   [uxbox.main.ui.users :as ui.u]
+   [uxbox.util.i18n :refer (tr)]
+   [uxbox.util.router :as rt]))
 
 (mx/defc header-link
   [{:keys [section content] :as props}]
   (let [on-click #(st/emit! (rt/navigate section))]
     [:a {:on-click on-click} content]))
 
-(mx/def header
+(mf/def header
   :mixins [mx/static mx/reactive]
   :init
   (fn [own props]

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

@@ -10,7 +10,8 @@
    [cuerdas.core :as str]
    [lentes.core :as l]
    [potok.core :as ptk]
-   [rumext.core :as mx :include-macros true]
+   [rumext.core :as mx]
+   [rumext.alpha :as mf]
    [uxbox.builtins.icons :as i]
    [uxbox.main.data.icons :as di]
    [uxbox.main.data.lightbox :as udl]
@@ -71,11 +72,11 @@
 
 ;; --- Page Title
 
-(mx/def page-title
+(mf/def page-title
-  :mixins [(mx/local) mx/static]
+  :mixins [(mf/local) mf/static]
 
   :render
-  (fn [{:keys [::mx/local] :as own} {:keys [id type] :as coll}]
+  (fn [{:keys [::mf/local] :as own} {:keys [id type] :as coll}]
     (let [own? (= :own (:type coll))
           edit? (:edit @local)]
       (letfn [(on-save [e]
@@ -131,18 +132,18 @@
               (l/lens selector))
         (l/derive st/state))))
 
-(mx/def nav-item
+(mf/def nav-item
   :key-fn :id
-  :mixins [(mx/local) mx/static mx/reactive]
+  :mixins [(mf/local) mf/static mf/reactive]
 
   :init
   (fn [own {:keys [id] :as props}]
     (assoc own ::num-icons-ref (num-icons-ref id)))
 
   :render
-  (fn [{:keys [::mx/local] :as own}
+  (fn [{:keys [::mf/local] :as own}
        {:keys [id type name num-icons ::selected?] :as coll}]
-    (let [num-icons (or num-icons (mx/react (::num-icons-ref own)))
+    (let [num-icons (or num-icons (mf/react (::num-icons-ref own)))
           editable? (= type :own)]
       (letfn [(on-click [event]
                 (let [type (or type :own)]
@@ -178,14 +179,14 @@
          [:span.element-subtitle
           (tr "ds.num-elements" (t/c num-icons))]]))))
 
-(mx/def nav
+(mf/def nav
-  :mixins [mx/static mx/reactive]
+  :mixins [mf/static mf/reactive]
 
   :render
   (fn [own {:keys [id type] :as props}]
     (let [own? (= type :own)
           builtin? (= type :builtin)
-          colls (mx/react collections-ref)
+          colls (mf/react collections-ref)
           select-tab (fn [type]
                        (if-let [coll (->> (vals colls)
                                           (filter #(= type (:type %)))
@@ -237,15 +238,15 @@
        :type "file"
        :on-change on-file-selected}]]))
 
-(mx/def grid-options-tooltip
+(mf/def grid-options-tooltip
-  :mixins [mx/reactive mx/static]
+  :mixins [mf/reactive mf/static]
 
   :render
   (fn [own {:keys [selected on-select title]}]
     {:pre [(uuid? selected)
            (fn? on-select)
            (string? title)]}
-    (let [colls (mx/react collections-ref)
+    (let [colls (mf/react collections-ref)
           colls (->> (vals colls)
                      (filter #(= :own (:type %)))
                      (remove #(= selected (:id %)))
@@ -262,11 +263,11 @@
          [:li {:key (pr-str id)}
           [:a {:on-click #(on-select % id)} name]])])))
 
-(mx/def grid-options
+(mf/def grid-options
-  :mixins [(mx/local) mx/static]
+  :mixins [(mf/local) mf/static]
 
   :render
-  (fn [{:keys [::mx/local] :as own}
+  (fn [{:keys [::mf/local] :as own}
        {:keys [id type selected] :as props}]
     (letfn [(delete []
               (st/emit! (di/delete-selected)))
@@ -332,9 +333,9 @@
                                     :on-select on-copy}))
            i/organize]])])))
 
-(mx/def grid-item
+(mf/def grid-item
   :key-fn :id
-  :mixins [mx/static]
+  :mixins [mf/static]
   :render
   (fn [own {:keys [id created-at ::selected? ::edition?] :as icon}]
     (letfn [(toggle-selection [event]
@@ -375,8 +376,8 @@
            (:name icon)])
         (str (tr "ds.uploaded-at" (dt/format created-at "DD/MM/YYYY")))]])))
 
-(mx/def grid
+(mf/def grid
-  :mixins [mx/reactive]
+  :mixins [mf/reactive]
   :init
   (fn [own {:keys [id] :as props}]
     (let [selector (fn [icons]
@@ -389,7 +390,7 @@
   :render
   (fn [own {:keys [selected edition id type] :as props}]
     (let [editable? (or (= type :own) (nil? id))
-          icons (->> (mx/react (::icons-ref own))
+          icons (->> (mf/react (::icons-ref own))
                      (filter-icons-by (:filter props ""))
                      (sort-icons-by (:order props :name)))]
 
@@ -403,8 +404,8 @@
 
 ;; --- Menu
 
-(mx/def menu
+(mf/def menu
-  :mixins [mx/static mx/reactive]
+  :mixins [mf/static mf/reactive]
 
   :init
   (fn [own {:keys [id] :as props}]
@@ -413,7 +414,7 @@
   :render
   (fn [own props]
     (let [{:keys [id num-icons] :as coll} (::coll props)
-          num-icons (or num-icons (mx/react (::num-icons-ref own)))]
+          num-icons (or num-icons (mf/react (::num-icons-ref own)))]
       (letfn [(on-term-change [event]
                 (let [term (-> (dom/get-target event)
                                (dom/get-value))]
@@ -447,8 +448,8 @@
            [:div.clear-search {:on-click on-clear}
             i/close]]]]))))
 
-(mx/def content
+(mf/def content
-  :mixins [mx/reactive mx/static]
+  :mixins [mf/reactive mf/static]
 
   :init
   (fn [own {:keys [id] :as props}]
@@ -457,8 +458,8 @@
 
   :render
   (fn [own props]
-    (let [opts (mx/react opts-ref)
+    (let [opts (mf/react opts-ref)
-          coll (mx/react (::coll-ref own))
+          coll (mf/react (::coll-ref own))
           props (merge opts props)]
       [:*
        (menu (assoc props ::coll coll))
@@ -471,13 +472,13 @@
 
 ;; --- Icons Page
 
-(mx/def icons-page
+(mf/def icons-page
   :key-fn identity
-  :mixins #{mx/static mx/reactive}
+  :mixins #{mf/static mf/reactive}
 
   :init
   (fn [own props]
-    (let [{:keys [type id]} (::mx/props own)]
+    (let [{:keys [type id]} (::mf/props own)]
       (st/emit! (di/initialize type id))
       own))
 

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

@@ -9,7 +9,8 @@
   (:require
    [cuerdas.core :as str]
    [lentes.core :as l]
-   [rumext.core :as mx :include-macros true]
+   [rumext.core :as mx]
+   [rumext.alpha :as mf]
    [uxbox.builtins.icons :as i]
    [uxbox.main.data.images :as di]
    [uxbox.main.data.lightbox :as udl]
@@ -59,11 +60,11 @@
 
 ;; --- Page Title
 
-(mx/def page-title
+(mf/def page-title
-  :mixins [(mx/local) mx/reactive]
+  :mixins [(mf/local) mf/reactive]
 
   :render
-  (fn [{:keys [::mx/local] :as own}
+  (fn [{:keys [::mf/local] :as own}
        {:keys [id type] :as coll}]
     (let [own? (= :own (:type coll))
           edit? (:edit @local)]
@@ -120,16 +121,16 @@
               (l/lens selector))
         (l/derive st/state))))
 
-(mx/def nav-item
+(mf/def nav-item
   :key-fn :id
-  :mixins [(mx/local) mx/static mx/reactive]
+  :mixins [(mf/local) mf/static mf/reactive]
 
   :init
   (fn [own {:keys [id] :as props}]
     (assoc own ::num-images-ref (num-images-ref id)))
 
   :render
-  (fn [{:keys [::mx/local] :as own}
+  (fn [{:keys [::mf/local] :as own}
        {:keys [id type name num-images selected?] :as coll}]
     (letfn [(on-click [event]
             (let [type (or type :own)]
@@ -163,16 +164,16 @@
          [:span.element-title {}
           (if id name "Storage")])
        [:span.element-subtitle
-        (tr "ds.num-elements" (t/c (or num-images (mx/react (::num-images-ref own)))))]])))
+        (tr "ds.num-elements" (t/c (or num-images (mf/react (::num-images-ref own)))))]])))
 
-(mx/def nav
+(mf/def nav
-  :mixins [mx/static mx/reactive]
+  :mixins [mf/static mf/reactive]
 
   :render
   (fn [own {:keys [id type] :as props}]
     (let [own? (= type :own)
           builtin? (= type :builtin)
-          colls (mx/react collections-ref)
+          colls (mf/react collections-ref)
           select-tab (fn [type]
                        (if-let [coll (->> (vals colls)
                                           (filter #(= type (:type %)))
@@ -207,17 +208,17 @@
 
 ;; --- Grid
 
-(mx/def grid-form
+(mf/def grid-form
-  :mixins #{mx/static}
+  :mixins #{mf/static}
 
   :init
   (fn [own props]
-    (assoc own ::file-input (mx/create-ref)))
+    (assoc own ::file-input (mf/create-ref)))
 
   :render
   (fn [own {:keys [id] :as props}]
     (letfn [(forward-click [event]
-              (dom/click (mx/ref-node (::file-input own))))
+              (dom/click (mf/ref-node (::file-input own))))
             (on-file-selected [event]
               (let [files (dom/get-event-files event)
                     files (jscoll->vec files)]
@@ -236,15 +237,15 @@
          :type "file"
          :on-change on-file-selected}]]))))
 
-(mx/def grid-options-tooltip
+(mf/def grid-options-tooltip
-  :mixins [mx/reactive mx/static]
+  :mixins [mf/reactive mf/static]
 
   :render
   (fn [own {:keys [selected on-select title]}]
     {:pre [(uuid? selected)
            (fn? on-select)
            (string? title)]}
-    (let [colls (mx/react collections-ref)
+    (let [colls (mf/react collections-ref)
           colls (->> (vals colls)
                      (filter #(= :own (:type %)))
                      (remove #(= selected (:id %)))
@@ -261,11 +262,11 @@
          [:li {:key (pr-str id)}
           [:a {:on-click #(on-select % id)} name]])])))
 
-(mx/def grid-options
+(mf/def grid-options
-  :mixins [(mx/local)]
+  :mixins [(mf/local)]
 
   :render
-  (fn [{:keys [::mx/local] :as own}
+  (fn [{:keys [::mf/local] :as own}
        {:keys [id type selected] :as props}]
     (letfn [(delete []
               (st/emit! (di/delete-selected)))
@@ -330,9 +331,9 @@
                                     :on-select on-copy}))
            ^:inline i/organize]])])))
 
-(mx/def grid-item
+(mf/def grid-item
   :key-fn :id
-  :mixins [mx/static]
+  :mixins [mf/static]
 
   :render
   (fn [own {:keys [id created-at ::selected? ::edition?] :as image}]
@@ -369,8 +370,8 @@
           [:h3 {:on-double-click on-edit} (:name image)])
         [:span.date (str (tr "ds.uploaded-at" (dt/format created-at "DD/MM/YYYY")))]]])))
 
-(mx/def grid
+(mf/def grid
-  :mixins [mx/reactive]
+  :mixins [mf/reactive]
   :init
   (fn [own {:keys [id] :as props}]
     (let [selector (fn [images]
@@ -383,7 +384,7 @@
   :render
   (fn [own {:keys [selected edition id type] :as props}]
     (let [editable? (or (= type :own) (nil? id))
-          images (->> (mx/react (::images-ref own))
+          images (->> (mf/react (::images-ref own))
                       (filter-images-by (:filter props ""))
                       (sort-images-by (:order props :name)))]
       [:div.dashboard-grid-content
@@ -397,8 +398,8 @@
 
 ;; --- Menu
 
-(mx/def menu
+(mf/def menu
-  :mixins [mx/reactive mx/static]
+  :mixins [mf/reactive mf/static]
 
   ;; :init
   ;; (fn [own {:keys [id] :as props}]
@@ -446,8 +447,8 @@
            [:div.clear-search {:on-click on-clear}
             i/close]]]]))))
 
-(mx/def content
+(mf/def content
-  :mixins [mx/reactive mx/static]
+  :mixins [mf/reactive mf/static]
 
   :init
   (fn [own {:keys [id] :as props}]
@@ -456,8 +457,8 @@
 
   :render
   (fn [own props]
-    (let [opts (mx/react opts-ref)
+    (let [opts (mf/react opts-ref)
-          coll (mx/react (::coll-ref own))
+          coll (mf/react (::coll-ref own))
           props (merge opts props)]
       [:*
        (menu (assoc props ::coll coll))
@@ -469,13 +470,13 @@
 
 ;; --- Images Page
 
-(mx/def images-page
+(mf/def images-page
   :key-fn identity
-  :mixins #{mx/static mx/reactive}
+  :mixins #{mf/static mf/reactive}
 
   :init
   (fn [own props]
-    (let [{:keys [type id]} (::mx/props own)]
+    (let [{:keys [type id]} (::mf/props own)]
       (st/emit! (di/initialize type id))
       own))
 

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

@@ -10,7 +10,7 @@
    [cuerdas.core :as str]
    [lentes.core :as l]
    [rumext.core :as mx]
-   [rumext.func :as mxf]
+   [rumext.alpha :as mf]
    [uxbox.builtins.icons :as i]
    [uxbox.main.constants :as c]
    [uxbox.main.data.lightbox :as udl]
@@ -60,8 +60,8 @@
 
 ;; --- Menu (Filter & Sort)
 
-(mx/def menu
+(mf/def menu
-  :mixins #{mx/static mx/reactive}
+  :mixins #{mf/static mf/reactive}
   :init
   (fn [own props]
     (assoc own ::num-projects (-> (comp (l/key :projects)
@@ -71,7 +71,7 @@
   (fn [own props]
     (let [ordering (:order props :created)
           filtering (:filter props "")
-          num-projects (mx/react (::num-projects own))]
+          num-projects (mf/react (::num-projects own))]
       (letfn [(on-term-change [event]
                 (let [term (-> (dom/get-target event)
                                (dom/get-value))]
@@ -110,8 +110,8 @@
 
 ;; --- Grid Item Thumbnail
 
-(mx/def grid-item-thumbnail
+(mf/def grid-item-thumbnail
-  :mixins #{mx/static}
+  :mixins #{mf/static}
 
   :init
   (fn [own project]
@@ -138,12 +138,12 @@
 
 ;; --- Grid Item
 
-(mx/def grid-item
+(mf/def grid-item
   :key-fn :id
-  :mixins #{mx/static (mx/local)}
+  :mixins #{mf/static (mf/local)}
 
   :render
-  (fn [{:keys [::mx/local] :as own} project]
+  (fn [{:keys [::mf/local] :as own} project]
     (letfn [(on-navigate [event]
               (st/emit! (udp/go-to (:id project))))
             (delete []
@@ -193,8 +193,8 @@
 
 ;; --- Grid
 
-(mx/def grid
+(mf/def grid
-  :mixins #{mx/static mx/reactive}
+  :mixins #{mf/static mf/reactive}
 
   :init
   (fn [own props]
@@ -205,7 +205,7 @@
   (fn [own props]
     (let [ordering (:order props :created)
           filtering (:filter props "")
-          projects (->> (vals (mx/react (::projects own)))
+          projects (->> (vals (mf/react (::projects own)))
                         (filter-projects-by filtering)
                         (sort-projects-by ordering))]
       [:section.dashboard-grid
@@ -221,8 +221,8 @@
 
 ;; --- Projects Page
 
-(mx/def projects-page
+(mf/def projects-page
-  :mixins [mx/static mx/reactive]
+  :mixins [mf/static mf/reactive]
 
   :init
   (fn [own props]
@@ -231,7 +231,7 @@
 
   :render
   (fn [own props]
-    (let [opts (mx/react opts-ref)
+    (let [opts (mf/react opts-ref)
           props (merge opts props)]
       [:section.dashboard-content
        (menu props)

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

@@ -7,11 +7,11 @@
 
 (ns uxbox.main.ui.dashboard.projects-createform
   (:require
-   [cljs.spec.alpha :as s :include-macros true]
+   [cljs.spec.alpha :as s]
    [cuerdas.core :as str]
    [lentes.core :as l]
    [rumext.core :as mx]
-   [rumext.func :as mxf]
+   [rumext.alpha :as mf]
    [uxbox.builtins.icons :as i]
    [uxbox.main.constants :as c]
    [uxbox.main.data.lightbox :as udl]
@@ -43,7 +43,7 @@
 
 ;; --- Create Project Form
 
-(mxf/defc layout-input
+(mx/defc layout-input
   [{:keys [::layout-id] :as data}]
   (let [layout (get c/page-layouts layout-id)]
     [:div
@@ -60,7 +60,7 @@
               :for layout-id}
       (:name layout)]]))
 
-(mxf/defc layout-selector
+(mx/defc layout-selector
   [props]
   [:div.input-radio.radio-primary
    (layout-input (assoc props ::layout-id "mobile"))
@@ -68,11 +68,11 @@
    (layout-input (assoc props ::layout-id "notebook"))
    (layout-input (assoc props ::layout-id "desktop"))])
 
-(mx/def create-project-form
+(mf/def create-project-form
-  :mixins #{mx/reactive}
+  :mixins #{mf/reactive}
   :render
   (fn [own props]
-    (let [data (merge c/project-defaults (mx/react form-data))
+    (let [data (merge c/project-defaults (mf/react form-data))
           valid? (fm/valid? ::project-form data)]
       (letfn [(on-submit [event]
                 (dom/prevent-default event)
@@ -131,7 +131,7 @@
 
 ;; --- Create Project Lightbox
 
-(mx/def create-project-lightbox
+(mf/def create-project-lightbox
   :will-unmount
   (fn [own]
     (st/emit! (fm/clear-form :create-project))

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

@@ -3,6 +3,7 @@
    [goog.events :as events]
    [lentes.core :as l]
    [rumext.core :as mx]
+   [rumext.alpha :as mf]
    [uxbox.main.data.lightbox :as udl]
    [uxbox.main.store :as st]
    [uxbox.main.ui.keyboard :as k]
@@ -29,20 +30,20 @@
 
 (defn- on-out-clicked
   [own event]
-  (let [parent (mx/ref-node (::parent own))
+  (let [parent (mf/ref-node (::parent own))
         current (dom/get-target event)]
     (when (dom/equals? parent current)
       (st/emit! (udl/hide-lightbox)))))
 
-(mx/def lightbox
+(mf/def lightbox
-  :mixins #{mx/reactive}
+  :mixins #{mf/reactive}
 
   :init
   (fn [own props]
     (let [key (events/listen js/document EventType.KEYDOWN on-esc-clicked)]
       (assoc own
              ::key-listener key
-             ::parent (mx/create-ref))))
+             ::parent (mf/create-ref))))
 
   :will-unmount
   (fn [own]
@@ -51,7 +52,7 @@
 
   :render
   (fn [own props]
-    (let [data (mx/react lightbox-ref)
+    (let [data (mf/react lightbox-ref)
           classes (classnames
                    :hide (nil? data)
                    :transparent (:transparent? data))]

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

@@ -1,5 +1,5 @@
 (ns uxbox.main.ui.navigation
-  (:require [rumext.core :refer-macros [html]]
+  (:require [rumext.alpha :refer-macros [html]]
             [goog.events :as events]
             [uxbox.util.dom :as dom]))
 

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

@@ -12,7 +12,7 @@
    [lentes.core :as l]
    [potok.core :as ptk]
    [rumext.core :as mx]
-   [rumext.func :as mf]
+   [rumext.alpha :as mf]
    [uxbox.builtins.icons :as i]
    [uxbox.main.data.users :as udu]
    [uxbox.main.store :as st]
@@ -62,14 +62,14 @@
     (st/emit! (assoc-value field value))))
 
 ;; --- Profile Form
-(mx/def profile-form
+(mf/def profile-form
-  :mixins [mx/static mx/reactive mx/sync-render (fm/clear-mixin st/store :profile)]
+  :mixins [mf/static mf/reactive mf/sync-render (fm/clear-mixin st/store :profile)]
   :render
   (fn [own props]
     (let [data (merge {:theme "light"}
-                      (mx/react profile-ref)
+                      (mf/react profile-ref)
-                      (mx/react form-data))
+                      (mf/react form-data))
-          errors (mx/react form-errors)
+          errors (mf/react form-errors)
           valid? (fm/valid? ::profile-form data)
           theme (:theme data)
           on-success #(st/emit! (clear-form))

frontend/src/uxbox/main/ui/shapes/selection.cljs

@@ -19,7 +19,8 @@
             [uxbox.main.data.shapes :as uds]
             [uxbox.main.ui.shapes.common :as scommon]
             [uxbox.main.geom :as geom]
-            [rumext.core :as mx :include-macros true]
+            [rumext.core :as mx]
+            [rumext.alpha :as mf]
             [uxbox.util.geom.matrix :as gmt]
             [uxbox.util.geom.point :as gpt]
             [uxbox.util.dom :as dom]))
@@ -245,17 +246,17 @@
                           :stroke-opacity "0.5"
                           :fill "transparent"}}]]))
 
-(mx/def selection-handlers
+(mf/def selection-handlers
-  :mixins [mx/reactive mx/static]
+  :mixins [mf/reactive mf/static]
   :render
   (fn [own props]
-    (let [shapes (mx/react selected-shapes-ref)
+    (let [shapes (mf/react selected-shapes-ref)
-          modifiers (mx/react selected-modifers-ref)
+          modifiers (mf/react selected-modifers-ref)
           ;; Edition is a workspace global flag
           ;; because only one shape can be on
           ;; the edition mode.
-          edition? (mx/react refs/selected-edition)
+          edition? (mf/react refs/selected-edition)
-          zoom (mx/react refs/selected-zoom)
+          zoom (mf/react refs/selected-zoom)
           num (count shapes)
           {:keys [id type] :as shape} (first shapes)]
 

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

@@ -9,7 +9,8 @@
   (:require
    [beicon.core :as rx]
    [lentes.core :as l]
-   [rumext.core :as mx :include-macros true]
+   [rumext.core :as mx]
+   [rumext.alpha :as mf]
    [uxbox.main.constants :as c]
    [uxbox.main.data.history :as udh]
    [uxbox.main.data.pages :as udp]
@@ -49,7 +50,7 @@
   [own event]
   (when (kbd/ctrl? event)
     (let [prev-zoom @refs/selected-zoom
-          dom (mx/ref-node own "workspace-canvas")
+          dom (mf/ref-node (::canvas own))
           scroll-position (scroll/get-current-position-absolute dom)
           mouse-point @refs/viewport-mouse-position]
       (dom/prevent-default event)
@@ -63,22 +64,22 @@
   (-> (l/key :page)
       (l/derive refs/workspace)))
 
-(mx/def workspace
+(mf/def workspace
   :key-fn vector
-  :mixins #{mx/static
+  :mixins #{mf/static
-            mx/reactive
+            mf/reactive
             shortcuts-mixin}
 
   :init
   (fn [own {:keys [project page] :as props}]
     (st/emit! (dw/initialize project page))
-    (assoc own ::canvas (mx/create-ref)))
+    (assoc own ::canvas (mf/create-ref)))
 
   :did-mount
   (fn [own]
-    (let [{:keys [project page]} (::mx/props own)
+    (let [{:keys [project page]} (::mf/props own)
-          ;; dom (mx/ref-node own "workspace-canvas")
+          ;; dom (mf/ref-node own "workspace-canvas")
-          dom (mx/ref-node (::canvas own))
+          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)]
       (scroll-to-page-center)
@@ -94,10 +95,9 @@
 
   :render
   (fn [own props]
-    ;; [own project-id page-id]
+    (let [flags (mf/react refs/flags)
-    (let [flags (mx/react refs/flags)
+          project-id (get props :project)
-          project-id (get-in own [::mx/props :project])
+          page-id (get props :page)
-          page-id (get-in own [::mx/props :page])
           left-sidebar? (not (empty? (keep flags [:layers :sitemap
                                                   :document-history])))
           right-sidebar? (not (empty? (keep flags [:icons :drawtools

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

@@ -6,57 +6,61 @@
 ;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 (ns uxbox.main.ui.workspace.canvas
-  (:require [beicon.core :as rx]
+  (:require
-            [lentes.core :as l]
+   [beicon.core :as rx]
-            [goog.events :as events]
+   [goog.events :as events]
-            [potok.core :as ptk]
+   [lentes.core :as l]
-            [uxbox.main.store :as st]
+   [potok.core :as ptk]
-            [uxbox.main.constants :as c]
+   [rumext.core :as mx]
-            [uxbox.main.refs :as refs]
+   [rumext.alpha :as mf]
-            [uxbox.main.streams :as streams]
+   [uxbox.main.constants :as c]
-            [uxbox.main.user-events :as uev]
+   [uxbox.main.data.projects :as dp]
-            [uxbox.main.geom :as geom]
+   [uxbox.main.data.shapes :as uds]
-            [uxbox.main.data.projects :as dp]
+   [uxbox.main.data.workspace :as udw]
-            [uxbox.main.data.workspace :as udw]
+   [uxbox.main.geom :as geom]
-            [uxbox.main.data.shapes :as uds]
+   [uxbox.main.refs :as refs]
-            [uxbox.main.ui.keyboard :as kbd]
+   [uxbox.main.store :as st]
-            [uxbox.main.ui.shapes :as uus]
+   [uxbox.main.streams :as streams]
-            [uxbox.main.ui.shapes.selection :refer [selection-handlers]]
+   [uxbox.main.ui.keyboard :as kbd]
-            [uxbox.main.ui.workspace.scroll :as scroll]
+   [uxbox.main.ui.shapes :as uus]
-            [uxbox.main.ui.workspace.drawarea :refer [draw-area]]
+   [uxbox.main.ui.shapes.selection :refer [selection-handlers]]
-            [uxbox.main.ui.workspace.ruler :refer [ruler]]
+   [uxbox.main.ui.workspace.drawarea :refer [draw-area]]
-            [uxbox.main.ui.workspace.grid :refer [grid]]
+   [uxbox.main.ui.workspace.grid :refer [grid]]
-            [uxbox.util.geom.point :as gpt]
+   [uxbox.main.ui.workspace.ruler :refer [ruler]]
-            [uxbox.util.dom :as dom]
+   [uxbox.main.ui.workspace.scroll :as scroll]
-            [uxbox.util.data :refer [parse-int]]
+   [uxbox.main.user-events :as uev]
-            [rumext.core :as mx :include-macros true])
+   [uxbox.util.data :refer [parse-int]]
+   [uxbox.util.dom :as dom]
+   [uxbox.util.geom.point :as gpt])
   (:import goog.events.EventType))
 
 ;; --- Background
 
-(mx/defc background
+(mf/def background
-  {:mixins [mx/static]}
+  :mixins [mf/static]
-  [{:keys [background] :as metadata}]
+  :render
-  [:rect
+  (fn [own {:keys [background] :as metadata}]
-   {:x 0 :y 0
+    [:rect
-    :width "100%"
+     {:x 0 :y 0
-    :height "100%"
+      :width "100%"
-    :fill (or background "#ffffff")}])
+      :height "100%"
+      :fill (or background "#ffffff")}]))
 
 ;; --- Coordinates Widget
 
-(mx/defc coordinates
+(mf/def coordinates
-  {:mixins [mx/reactive mx/static]}
+  :mixins [mf/reactive mf/static]
-  []
+  :render
-  (let [zoom (mx/react refs/selected-zoom)
+  (fn [own props]
-        coords (some-> (mx/react refs/canvas-mouse-position)
+    (let [zoom (mf/react refs/selected-zoom)
-                       (gpt/divide zoom)
+          coords (some-> (mf/react refs/canvas-mouse-position)
-                       (gpt/round 0))]
+                         (gpt/divide zoom)
-   [:ul.coordinates {}
+                         (gpt/round 0))]
-    [:span {:alt "x"}
+      [:ul.coordinates {}
-     (str "X: " (:x coords "-"))]
+       [:span {:alt "x"}
-    [:span {:alt "y"}
+        (str "X: " (:x coords "-"))]
-     (str "Y: " (:y coords "-"))]]))
+       [:span {:alt "y"}
+        (str "Y: " (:y coords "-"))]])))
 
 ;; --- Selection Rect
 
@@ -64,16 +68,17 @@
   (-> (l/key :selrect)
       (l/derive refs/workspace)))
 
-(mx/defc selrect
+(mf/def selrect
-  {:mixins [mx/static mx/reactive]}
+  :mixins [mf/static mf/reactive]
-  []
+  :render
-  (when-let [rect (mx/react selrect-ref)]
+  (fn [own props]
-    (let [{:keys [x1 y1 width height]} (geom/size rect)]
+    (when-let [rect (mf/react selrect-ref)]
-      [:rect.selection-rect
+      (let [{:keys [x1 y1 width height]} (geom/size rect)]
-       {:x x1
+        [:rect.selection-rect
-        :y y1
+         {:x x1
-        :width width
+          :y y1
-        :height height}])))
+          :width width
+          :height height}]))))
 
 ;; --- Cursor tooltip
 
@@ -89,182 +94,189 @@
     :circle "Drag to draw a Circle"
     nil))
 
-(mx/defc cursor-tooltip
+(mf/def cursor-tooltip
-  {:mixins [mx/reactive mx/static]}
+  :mixins [mf/reactive mf/static]
-  [tooltip]
+  :render
-  (let [coords (mx/react refs/window-mouse-position)]
+  (fn [own tooltip]
-    [:span.cursor-tooltip
+    (let [coords (mf/react refs/window-mouse-position)]
-     {:style
+      [:span.cursor-tooltip
-      {:position "fixed"
+       {:style
-       :left (str (+ (:x coords) 5) "px")
+        {:position "fixed"
-       :top (str (- (:y coords) 25) "px")}}
+         :left (str (+ (:x coords) 5) "px")
-     tooltip]))
+         :top (str (- (:y coords) 25) "px")}}
+       tooltip])))
 
 ;; --- Canvas
 
-(mx/defc canvas
+(mf/def canvas
-  {:mixins [mx/static mx/reactive]}
+  :mixins [mf/static mf/reactive]
-  [{:keys [metadata id] :as page} zoom]
+  :render
-  (let [width (:width metadata)
+  (fn [own {:keys [page zoom] :as props}]
-        height (:height metadata)]
+    (let [{:keys [metadata id]} page
-    [:svg.page-canvas {:x c/canvas-start-x
+          width (:width metadata)
-                       :y c/canvas-start-y
+          height (:height metadata)]
-                       :ref (str "canvas" id)
+      [:svg.page-canvas {:x c/canvas-start-x
-                       :width width
+                         :y c/canvas-start-y
-                       :height height}
+                         :ref (str "canvas" id)
-     (background metadata)
+                         :width width
-     [:svg.page-layout {}
+                         :height height}
-      [:g.main {}
+       (background metadata)
-       (for [item (reverse (:shapes page))]
+       [:svg.page-layout
-         (-> (uus/shape item)
+        [:g.main
-             (mx/with-key (str item))))
+         (for [item (reverse (:shapes page))]
-       (selection-handlers)
+           (-> (uus/shape item)
-       (draw-area zoom)]]]))
+               (mf/with-key (str item))))
+         (selection-handlers)
+         (draw-area zoom)]]])))
 
 ;; --- Viewport
 
-(defn- viewport-did-mount
+(mf/def viewport
-  [own]
+  :mixins [mf/reactive]
-  (letfn [(translate-point-to-viewport [pt]
-            (let [viewport (mx/ref-node own "viewport")
-                  brect (.getBoundingClientRect viewport)
-                  brect (gpt/point (parse-int (.-left brect))
-                                   (parse-int (.-top brect)))]
-              (gpt/subtract pt brect)))
 
-          (translate-point-to-canvas [pt]
+  :init
-            (let [viewport (mx/ref-node own "viewport")]
+  (fn [own props]
-              (when-let [canvas (dom/get-element-by-class "page-canvas" viewport)]
+    (assoc own ::viewport-ref (mf/create-ref)))
-                (let [brect (.getBoundingClientRect canvas)
-                      bbox (.getBBox canvas)
-                      brect (gpt/point (parse-int (.-left brect))
-                                       (parse-int (.-top brect)))
-                      bbox (gpt/point (.-x bbox) (.-y bbox))]
-                  (-> (gpt/add pt bbox)
-                      (gpt/subtract brect))))))
 
-          (on-key-down [event]
+  :did-mount
-            (let [key (.-keyCode event)
+  (fn [own]
-                  ctrl? (kbd/ctrl? event)
+    (letfn [(translate-point-to-viewport [pt]
-                  shift? (kbd/shift? event)
+              (let [viewport (mf/ref-node (::viewport-ref own))
-                  opts {:key key
+                    brect (.getBoundingClientRect viewport)
-                        :shift? shift?
+                    brect (gpt/point (parse-int (.-left brect))
-                        :ctrl? ctrl?}]
+                                     (parse-int (.-top brect)))]
-              (st/emit! (uev/keyboard-event :down key ctrl? shift?))
+                (gpt/subtract pt brect)))
-              (when (kbd/space? event)
-                (st/emit! (udw/start-viewport-positioning)))))
 
-          (on-key-up [event]
+            (translate-point-to-canvas [pt]
-            (let [key (.-keyCode event)
+              (let [viewport (mf/ref-node (::viewport-ref own))]
-                  ctrl? (kbd/ctrl? event)
+                (when-let [canvas (dom/get-element-by-class "page-canvas" viewport)]
-                  shift? (kbd/shift? event)
+                  (let [brect (.getBoundingClientRect canvas)
-                  opts {:key key
+                        bbox (.getBBox canvas)
-                        :shift? shift?
+                        brect (gpt/point (parse-int (.-left brect))
-                        :ctrl? ctrl?}]
+                                         (parse-int (.-top brect)))
-              (when (kbd/space? event)
+                        bbox (gpt/point (.-x bbox) (.-y bbox))]
-                (st/emit! (udw/stop-viewport-positioning)))
+                    (-> (gpt/add pt bbox)
-              (st/emit! (uev/keyboard-event :up key ctrl? shift?))))
+                        (gpt/subtract brect))))))
 
-          (on-mousemove [event]
+            (on-key-down [event]
-            (let [wpt (gpt/point (.-clientX event)
+              (let [key (.-keyCode event)
-                                 (.-clientY event))
+                    ctrl? (kbd/ctrl? event)
-                  vpt (translate-point-to-viewport wpt)
-                  cpt (translate-point-to-canvas wpt)
-                  ctrl? (kbd/ctrl? event)
-                  shift? (kbd/shift? event)
-                  event {:ctrl ctrl?
-                         :shift shift?
-                         :window-coords wpt
-                         :viewport-coords vpt
-                         :canvas-coords cpt}]
-              (st/emit! (uev/pointer-event wpt vpt cpt ctrl? shift?))))]
-
-    (let [key1 (events/listen js/document EventType.MOUSEMOVE on-mousemove)
-          key2 (events/listen js/document EventType.KEYDOWN on-key-down)
-          key3 (events/listen js/document EventType.KEYUP on-key-up)]
-      (assoc own
-             ::key1 key1
-             ::key2 key2
-             ::key3 key3))))
-
-(defn- viewport-will-unmount
-  [own]
-  (events/unlistenByKey (::key1 own))
-  (events/unlistenByKey (::key2 own))
-  (events/unlistenByKey (::key3 own))
-  (dissoc own ::key1 ::key2 ::key3))
-
-(mx/defc viewport
-  {:did-mount viewport-did-mount
-   :will-unmount viewport-will-unmount
-   :mixins [mx/reactive]}
-  []
-  (let [page (mx/react refs/selected-page)
-        flags (mx/react refs/flags)
-        drawing (mx/react refs/selected-drawing-tool)
-        tooltip (or (mx/react refs/selected-tooltip)
-                    (get-shape-tooltip drawing))
-        zoom (or (mx/react refs/selected-zoom) 1)]
-    (letfn [(on-mouse-down [event]
-              (dom/stop-propagation event)
-              (let [ctrl? (kbd/ctrl? event)
                     shift? (kbd/shift? event)
-                    opts {:shift? shift?
+                    opts {:key key
+                          :shift? shift?
                           :ctrl? ctrl?}]
-                (st/emit! (uev/mouse-event :down ctrl? shift?)))
+                (st/emit! (uev/keyboard-event :down key ctrl? shift?))
-              (if drawing
+                (when (kbd/space? event)
-                (st/emit! (udw/start-drawing drawing))
+                  (st/emit! (udw/start-viewport-positioning)))))
-                (st/emit! ::uev/interrupt (udw/start-selrect))))
+
-            (on-context-menu [event]
+            (on-key-up [event]
-              (dom/prevent-default event)
+              (let [key (.-keyCode event)
-              (dom/stop-propagation event)
+                    ctrl? (kbd/ctrl? event)
-              (let [ctrl? (kbd/ctrl? event)
                     shift? (kbd/shift? event)
-                    opts {:shift? shift?
+                    opts {:key key
+                          :shift? shift?
                           :ctrl? ctrl?}]
-                (st/emit! (uev/mouse-event :context-menu ctrl? shift?))))
+                (when (kbd/space? event)
-            (on-mouse-up [event]
+                  (st/emit! (udw/stop-viewport-positioning)))
-              (dom/stop-propagation event)
+                (st/emit! (uev/keyboard-event :up key ctrl? shift?))))
-              (let [ctrl? (kbd/ctrl? event)
+
+            (on-mousemove [event]
+              (let [wpt (gpt/point (.-clientX event)
+                                   (.-clientY event))
+                    vpt (translate-point-to-viewport wpt)
+                    cpt (translate-point-to-canvas wpt)
+                    ctrl? (kbd/ctrl? event)
                     shift? (kbd/shift? event)
-                    opts {:shift? shift?
+                    event {:ctrl ctrl?
-                          :ctrl? ctrl?}]
+                           :shift shift?
-                (st/emit! (uev/mouse-event :up ctrl? shift?))))
+                           :window-coords wpt
-            (on-click [event]
+                           :viewport-coords vpt
-              (dom/stop-propagation event)
+                           :canvas-coords cpt}]
-              (let [ctrl? (kbd/ctrl? event)
+                (st/emit! (uev/pointer-event wpt vpt cpt ctrl? shift?))))]
-                    shift? (kbd/shift? event)
+
-                    opts {:shift? shift?
+      (let [key1 (events/listen js/document EventType.MOUSEMOVE on-mousemove)
-                          :ctrl? ctrl?}]
+            key2 (events/listen js/document EventType.KEYDOWN on-key-down)
-                (st/emit! (uev/mouse-event :click ctrl? shift?))))
+            key3 (events/listen js/document EventType.KEYUP on-key-up)]
-            (on-double-click [event]
+        (assoc own
-              (dom/stop-propagation event)
+               ::key1 key1
-              (let [ctrl? (kbd/ctrl? event)
+               ::key2 key2
-                    shift? (kbd/shift? event)
+               ::key3 key3))))
-                    opts {:shift? shift?
+
-                          :ctrl? ctrl?}]
+  :will-unmount
-                (st/emit! (uev/mouse-event :double-click ctrl? shift?))))]
+  (fn [own]
-      [:*
+    (events/unlistenByKey (::key1 own))
-       (coordinates)
+    (events/unlistenByKey (::key2 own))
-       [:div.tooltip-container {}
+    (events/unlistenByKey (::key3 own))
-        (when tooltip
+    (dissoc own ::key1 ::key2 ::key3))
-          (cursor-tooltip tooltip))]
+
-       [:svg.viewport {:width (* c/viewport-width zoom)
+  :render
-                       :height (* c/viewport-height zoom)
+  (fn [own props]
-                       :ref "viewport"
+    (let [page (mf/react refs/selected-page)
-                       :class (when drawing "drawing")
+          flags (mf/react refs/flags)
-                       :on-context-menu on-context-menu
+          drawing (mf/react refs/selected-drawing-tool)
-                       :on-click on-click
+          tooltip (or (mf/react refs/selected-tooltip)
-                       :on-double-click on-double-click
+                      (get-shape-tooltip drawing))
-                       :on-mouse-down on-mouse-down
+          zoom (or (mf/react refs/selected-zoom) 1)]
-                       :on-mouse-up on-mouse-up}
+      (letfn [(on-mouse-down [event]
-        [:g.zoom {:transform (str "scale(" zoom ", " zoom ")")}
+                (dom/stop-propagation event)
-         (when page
+                (let [ctrl? (kbd/ctrl? event)
-           (canvas page zoom))
+                      shift? (kbd/shift? event)
-         (if (contains? flags :grid)
+                      opts {:shift? shift?
-           (grid))]
+                            :ctrl? ctrl?}]
-        (when (contains? flags :ruler)
+                  (st/emit! (uev/mouse-event :down ctrl? shift?)))
-          (ruler zoom))
+                (if drawing
-        (selrect)]])))
+                  (st/emit! (udw/start-drawing drawing))
+                  (st/emit! ::uev/interrupt (udw/start-selrect))))
+              (on-context-menu [event]
+                (dom/prevent-default event)
+                (dom/stop-propagation event)
+                (let [ctrl? (kbd/ctrl? event)
+                      shift? (kbd/shift? event)
+                      opts {:shift? shift?
+                            :ctrl? ctrl?}]
+                  (st/emit! (uev/mouse-event :context-menu ctrl? shift?))))
+              (on-mouse-up [event]
+                (dom/stop-propagation event)
+                (let [ctrl? (kbd/ctrl? event)
+                      shift? (kbd/shift? event)
+                      opts {:shift? shift?
+                            :ctrl? ctrl?}]
+                  (st/emit! (uev/mouse-event :up ctrl? shift?))))
+              (on-click [event]
+                (dom/stop-propagation event)
+                (let [ctrl? (kbd/ctrl? event)
+                      shift? (kbd/shift? event)
+                      opts {:shift? shift?
+                            :ctrl? ctrl?}]
+                  (st/emit! (uev/mouse-event :click ctrl? shift?))))
+              (on-double-click [event]
+                (dom/stop-propagation event)
+                (let [ctrl? (kbd/ctrl? event)
+                      shift? (kbd/shift? event)
+                      opts {:shift? shift?
+                            :ctrl? ctrl?}]
+                  (st/emit! (uev/mouse-event :double-click ctrl? shift?))))]
+        [:*
+         (coordinates)
+         [:div.tooltip-container
+          (when tooltip
+            (cursor-tooltip tooltip))]
+         [:svg.viewport {:width (* c/viewport-width zoom)
+                         :height (* c/viewport-height zoom)
+                         :ref (::viewport-ref own)
+                         :class (when drawing "drawing")
+                         :on-context-menu on-context-menu
+                         :on-click on-click
+                         :on-double-click on-double-click
+                         :on-mouse-down on-mouse-down
+                         :on-mouse-up on-mouse-up}
+          [:g.zoom {:transform (str "scale(" zoom ", " zoom ")")}
+           (when page
+             (canvas {:page page :zoom zoom}))
+           (if (contains? flags :grid)
+             (grid))]
+          (when (contains? flags :ruler)
+            (ruler zoom))
+          (selrect)]]))))
 
 

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

@@ -9,7 +9,7 @@
   (:require
    [beicon.core :as rx]
    [cuerdas.core :as str]
-   [rumext.core :as mx]
+   [rumext.alpha :as mf]
    [uxbox.main.constants :as c]
    [uxbox.main.refs :as refs]
    [uxbox.main.store :as s]
@@ -66,7 +66,7 @@
 
 ;; --- Horizontal Text Label
 
-(mx/def horizontal-text-label
+(mf/def horizontal-text-label
   :key-fn second
   :render
   (fn [own [zoom value]]
@@ -85,7 +85,7 @@
 
 ;; --- Horizontal Text Label
 
-(mx/def vertical-text-label
+(mf/def vertical-text-label
   :key-fn second
   :render
   (fn [own [zoom value]]
@@ -104,8 +104,8 @@
 
 ;; --- Horizontal Rule Ticks (Component)
 
-(mx/def horizontal-rule-ticks
+(mf/def horizontal-rule-ticks
-  :mixins #{mx/static}
+  :mixins #{mf/static}
   :render
   (fn [own zoom]
     (let [zoom (or zoom 1)
@@ -117,8 +117,8 @@
 
 ;; --- Vertical Rule Ticks (Component)
 
-(mx/def vertical-rule-ticks
+(mf/def vertical-rule-ticks
-  :mixins #{mx/static}
+  :mixins #{mf/static}
   :render
   (fn [own zoom]
     (let [zoom (or zoom 1)
@@ -130,12 +130,12 @@
 
 ;; --- Horizontal Rule (Component)
 
-(mx/def horizontal-rule
+(mf/def horizontal-rule
-  :mixins #{mx/static mx/reactive}
+  :mixins #{mf/static mf/reactive}
   :render
   (fn [own props]
-    (let [scroll (mx/react refs/workspace-scroll)
+    (let [scroll (mf/react refs/workspace-scroll)
-          zoom (mx/react refs/selected-zoom)
+          zoom (mf/react refs/selected-zoom)
           scroll-x (:x scroll)
           translate-x (- (- c/canvas-scroll-padding) (:x scroll))]
       [:svg.horizontal-rule
@@ -148,12 +148,12 @@
 
 ;; --- Vertical Rule (Component)
 
-(mx/def vertical-rule
+(mf/def vertical-rule
-  :mixins #{mx/static mx/reactive}
+  :mixins #{mf/static mf/reactive}
   :render
   (fn [own props]
-    (let [scroll (mx/react refs/workspace-scroll)
+    (let [scroll (mf/react refs/workspace-scroll)
-          zoom (mx/react refs/selected-zoom)
+          zoom (mf/react refs/selected-zoom)
           scroll-y (:y scroll)
           translate-y (- (- c/canvas-scroll-padding) (:y scroll))]
       [:svg.vertical-rule

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

@@ -15,14 +15,14 @@
             [uxbox.util.data :refer [read-string]]
             [uxbox.util.dom :as dom]
             [uxbox.util.i18n :refer [tr]]
-            [rumext.core :as mx :include-macros true]
+            [rumext.alpha :as mf]
             [uxbox.util.router :as r]
             [uxbox.util.time :as dt]))
 
 ;; --- History Item (Component)
 
-(mx/def history-item
+(mf/def history-item
-  :mixins [mx/static]
+  :mixins [mf/static]
   :key-fn :id
   :render
   (fn [own {:keys [::selected] :as item}]
@@ -46,12 +46,12 @@
 
 ;; --- History List (Component)
 
-(mx/def history-list
+(mf/def history-list
-  :mixins [mx/static mx/reactive]
+  :mixins [mf/static mf/reactive]
   :render
   (fn [own {:keys [selected items min-version] :as history}]
     (let [items (reverse (sort-by :version items))
-          page (mx/react refs/selected-page)
+          page (mf/react refs/selected-page)
           show-more? (pos? min-version)
           load-more #(st/emit! (udh/load-more))]
       [:ul.history-content
@@ -64,8 +64,8 @@
 
 ;; --- History Pinned List (Component)
 
-(mx/def history-pinned-list
+(mf/def history-pinned-list
-  :mixins [mx/static]
+  :mixins [mf/static]
   :render
   (fn [own {:keys [pinned selected] :as history}]
     [:ul.history-content
@@ -75,8 +75,8 @@
 
 ;; --- History Toolbox (Component)
 
-(mx/def history-toolbox
+(mf/def history-toolbox
-  :mixins [mx/static mx/reactive]
+  :mixins [mf/static mf/reactive]
 
   :init
   (fn [own page-id]
@@ -90,7 +90,7 @@
 
   :render
   (fn [own page-id]
-    (let [history (mx/react refs/history)
+    (let [history (mf/react refs/history)
           section (:section history :main)
 
           close #(st/emit! (dw/toggle-flag :document-history))
@@ -118,11 +118,11 @@
 
 ;; --- History Dialog
 
-(mx/def history-dialog
+(mf/def history-dialog
-  :mixins [mx/static mx/reactive]
+  :mixins [mf/static mf/reactive]
   :render
   (fn [own]
-    (let [history (mx/react refs/history)
+    (let [history (mf/react refs/history)
           version (:selected history)
           on-accept #(st/emit! (udh/apply-selected-history))
           on-cancel #(st/emit! (udh/deselect-page-history))]

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

@@ -19,7 +19,8 @@
             [uxbox.main.ui.keyboard :as kbd]
             [uxbox.util.data :refer (read-string classnames)]
             [uxbox.util.router :as r]
-            [rumext.core :as mx :include-macros true]
+            [rumext.core :as mx]
+            [rumext.alpha :as mf]
             [uxbox.util.dom.dnd :as dnd]
             [uxbox.util.dom :as dom])
   (:import goog.events.EventType))
@@ -89,10 +90,10 @@
 
 ;; --- Shape Name (Component)
 
-(mx/def shape-name
+(mf/def shape-name
-  :mixins [mx/static (mx/local)]
+  :mixins [mf/static (mf/local)]
   :render
-  (fn [{:keys [::mx/local] :as own} {:keys [id] :as shape}]
+  (fn [{:keys [::mf/local] :as own} {:keys [id] :as shape}]
     (letfn [(on-blur [event]
               (let [target (dom/event->target event)
                     parent (.-parentNode target)

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

@@ -9,7 +9,7 @@
   (:require
    [cuerdas.core :as str]
    [lentes.core :as l]
-   [rumext.core :as mx :include-macros true]
+   [rumext.alpha :as mf]
    [uxbox.builtins.icons :as i]
    [uxbox.main.data.lightbox :as udl]
    [uxbox.main.data.pages :as udp]
@@ -25,12 +25,12 @@
    [uxbox.util.i18n :refer (tr)]
    [uxbox.util.router :as r]))
 
-(mx/def page-item
+(mf/def page-item
-  :mixins [(mx/local) mx/static mx/reactive]
+  :mixins [(mf/local) mf/static mf/reactive]
   :key-fn :id
 
   :render
-  (fn [{:keys [::mx/local] :as own}
+  (fn [{:keys [::mf/local] :as own}
        {:keys [::deletable? ::selected?] :as page}]
     (let [body-classes (classnames
                         :selected selected?
@@ -106,13 +106,13 @@
            (when deletable?
              [:a {:on-click on-delete} i/trash])]]]))))
 
-(mx/def sitemap-toolbox
+(mf/def sitemap-toolbox
-  :mixins [mx/static mx/reactive]
+  :mixins [mf/static mf/reactive]
 
   :render
   (fn [own current-page-id]
-    (let [project (mx/react refs/selected-project)
+    (let [project (mf/react refs/selected-project)
-          pages (mx/react refs/selected-project-pages)
+          pages (mf/react refs/selected-project-pages)
           create #(udl/open! :page-form {:page {:project (:id project)}})
           close #(st/emit! (dw/toggle-flag :sitemap))
           deletable? (> (count pages) 1)]

frontend/tools.clj

@@ -52,6 +52,7 @@
                     (when (= name "worker")
                       {:target :webworker})
                     {:optimizations :advanced
+                     :pretty-print false
                      :static-fns true
                      :elide-asserts true})))