From 56b8922dbb0cc8dc5e41d1ceff12236a477806d0 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 19 Jul 2019 12:32:31 +0200 Subject: [PATCH] feat(frontend): adapt to rumext changes --- frontend/deps.edn | 2 +- frontend/src/uxbox/builtins/icons.cljs | 2 +- frontend/src/uxbox/main/ui.cljs | 4 +- frontend/src/uxbox/main/ui/auth/login.cljs | 2 +- .../src/uxbox/main/ui/dashboard/colors.cljs | 55 +-- .../src/uxbox/main/ui/dashboard/header.cljs | 22 +- .../src/uxbox/main/ui/dashboard/icons.cljs | 65 +-- .../src/uxbox/main/ui/dashboard/images.cljs | 71 +-- .../src/uxbox/main/ui/dashboard/projects.cljs | 30 +- .../ui/dashboard/projects_createform.cljs | 16 +- frontend/src/uxbox/main/ui/lightbox.cljs | 11 +- frontend/src/uxbox/main/ui/navigation.cljs | 2 +- .../src/uxbox/main/ui/settings/profile.cljs | 12 +- .../src/uxbox/main/ui/shapes/selection.cljs | 15 +- frontend/src/uxbox/main/ui/workspace.cljs | 26 +- .../src/uxbox/main/ui/workspace/canvas.cljs | 444 +++++++++--------- .../src/uxbox/main/ui/workspace/rules.cljs | 30 +- .../main/ui/workspace/sidebar/history.cljs | 28 +- .../main/ui/workspace/sidebar/layers.cljs | 9 +- .../main/ui/workspace/sidebar/sitemap.cljs | 16 +- frontend/tools.clj | 1 + 21 files changed, 442 insertions(+), 421 deletions(-) diff --git a/frontend/deps.edn b/frontend/deps.edn index 70e7f26a5..a061e97e3 100644 --- a/frontend/deps.edn +++ b/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"} diff --git a/frontend/src/uxbox/builtins/icons.cljs b/frontend/src/uxbox/builtins/icons.cljs index c11f85b9e..73b90c61f 100644 --- a/frontend/src/uxbox/builtins/icons.cljs +++ b/frontend/src/uxbox/builtins/icons.cljs @@ -6,7 +6,7 @@ ;; Copyright (c) 2015-2017 Juan de la Cruz (ns uxbox.builtins.icons - (:require [rumext.core :refer-macros [html]])) + (:require [rumext.alpha :refer-macros [html]])) (def logo (html diff --git a/frontend/src/uxbox/main/ui.cljs b/frontend/src/uxbox/main/ui.cljs index c16acdb18..668676846 100644 --- a/frontend/src/uxbox/main/ui.cljs +++ b/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 diff --git a/frontend/src/uxbox/main/ui/auth/login.cljs b/frontend/src/uxbox/main/ui/auth/login.cljs index 1bb8832ab..ae03e7da5 100644 --- a/frontend/src/uxbox/main/ui/auth/login.cljs +++ b/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] diff --git a/frontend/src/uxbox/main/ui/dashboard/colors.cljs b/frontend/src/uxbox/main/ui/dashboard/colors.cljs index 2cc178fa2..637be4f55 100644 --- a/frontend/src/uxbox/main/ui/dashboard/colors.cljs +++ b/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 - :mixins [(mx/local) mx/static mx/reactive] +(mf/def page-title + :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 - :mixins [(mx/local) mx/static] +(mf/def nav-item + :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 - :mixins [mx/static mx/reactive] +(mf/def nav + :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 - :mixins [mx/reactive mx/static] +(mf/def grid-options-tooltip + :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 - :mixins [mx/static (mx/local)] +(mf/def grid-options + :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 - :mixins [mx/static] +(mf/def grid + :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 - :mixins [mx/reactive mx/static] +(mf/def content + :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) - coll (mx/react (::coll-ref own)) + (let [opts (mf/react opts-ref) + 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)) diff --git a/frontend/src/uxbox/main/ui/dashboard/header.cljs b/frontend/src/uxbox/main/ui/dashboard/header.cljs index 145088704..a48e5600f 100644 --- a/frontend/src/uxbox/main/ui/dashboard/header.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/header.cljs @@ -6,22 +6,24 @@ ;; Copyright (c) 2015-2016 Juan de la Cruz (ns uxbox.main.ui.dashboard.header - (:require [lentes.core :as l] - [uxbox.main.store :as st] - [uxbox.main.data.projects :as dp] - [uxbox.main.ui.navigation :as nav] - [uxbox.builtins.icons :as i] - [uxbox.main.ui.users :as ui.u] - [uxbox.util.i18n :refer (tr)] - [uxbox.util.router :as rt] - [rumext.core :as mx :include-macros true])) + (:require + [lentes.core :as l] + [rumext.core :as mx] + [rumext.alpha :as mf] + [uxbox.builtins.icons :as i] + [uxbox.main.data.projects :as dp] + [uxbox.main.store :as st] + [uxbox.main.ui.navigation :as nav] + [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] diff --git a/frontend/src/uxbox/main/ui/dashboard/icons.cljs b/frontend/src/uxbox/main/ui/dashboard/icons.cljs index 825c12ee5..64ee01526 100644 --- a/frontend/src/uxbox/main/ui/dashboard/icons.cljs +++ b/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 - :mixins [(mx/local) mx/static] +(mf/def page-title + :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 - :mixins [mx/static mx/reactive] +(mf/def nav + :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 - :mixins [mx/reactive mx/static] +(mf/def grid-options-tooltip + :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 - :mixins [(mx/local) mx/static] +(mf/def grid-options + :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 - :mixins [mx/reactive] +(mf/def grid + :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 - :mixins [mx/static mx/reactive] +(mf/def menu + :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 - :mixins [mx/reactive mx/static] +(mf/def content + :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) - coll (mx/react (::coll-ref own)) + (let [opts (mf/react opts-ref) + 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)) diff --git a/frontend/src/uxbox/main/ui/dashboard/images.cljs b/frontend/src/uxbox/main/ui/dashboard/images.cljs index b62bde456..7602a5227 100644 --- a/frontend/src/uxbox/main/ui/dashboard/images.cljs +++ b/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 - :mixins [(mx/local) mx/reactive] +(mf/def page-title + :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 - :mixins [mx/static mx/reactive] +(mf/def nav + :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 - :mixins #{mx/static} +(mf/def grid-form + :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 - :mixins [mx/reactive mx/static] +(mf/def grid-options-tooltip + :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 - :mixins [(mx/local)] +(mf/def grid-options + :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 - :mixins [mx/reactive] +(mf/def grid + :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 - :mixins [mx/reactive mx/static] +(mf/def menu + :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 - :mixins [mx/reactive mx/static] +(mf/def content + :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) - coll (mx/react (::coll-ref own)) + (let [opts (mf/react opts-ref) + 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)) diff --git a/frontend/src/uxbox/main/ui/dashboard/projects.cljs b/frontend/src/uxbox/main/ui/dashboard/projects.cljs index e29073c22..eca78ad26 100644 --- a/frontend/src/uxbox/main/ui/dashboard/projects.cljs +++ b/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 - :mixins #{mx/static mx/reactive} +(mf/def menu + :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 - :mixins #{mx/static} +(mf/def grid-item-thumbnail + :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 - :mixins #{mx/static mx/reactive} +(mf/def grid + :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 - :mixins [mx/static mx/reactive] +(mf/def projects-page + :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) diff --git a/frontend/src/uxbox/main/ui/dashboard/projects_createform.cljs b/frontend/src/uxbox/main/ui/dashboard/projects_createform.cljs index 030b2e91d..483dec174 100644 --- a/frontend/src/uxbox/main/ui/dashboard/projects_createform.cljs +++ b/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 - :mixins #{mx/reactive} +(mf/def create-project-form + :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)) diff --git a/frontend/src/uxbox/main/ui/lightbox.cljs b/frontend/src/uxbox/main/ui/lightbox.cljs index 0b569bdbc..fa6e9da1e 100644 --- a/frontend/src/uxbox/main/ui/lightbox.cljs +++ b/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 - :mixins #{mx/reactive} +(mf/def lightbox + :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))] diff --git a/frontend/src/uxbox/main/ui/navigation.cljs b/frontend/src/uxbox/main/ui/navigation.cljs index 4af4c646d..31636c55e 100644 --- a/frontend/src/uxbox/main/ui/navigation.cljs +++ b/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])) diff --git a/frontend/src/uxbox/main/ui/settings/profile.cljs b/frontend/src/uxbox/main/ui/settings/profile.cljs index 52e1dca3a..9342f0a8f 100644 --- a/frontend/src/uxbox/main/ui/settings/profile.cljs +++ b/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 - :mixins [mx/static mx/reactive mx/sync-render (fm/clear-mixin st/store :profile)] +(mf/def profile-form + :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) - (mx/react form-data)) - errors (mx/react form-errors) + (mf/react profile-ref) + (mf/react form-data)) + errors (mf/react form-errors) valid? (fm/valid? ::profile-form data) theme (:theme data) on-success #(st/emit! (clear-form)) diff --git a/frontend/src/uxbox/main/ui/shapes/selection.cljs b/frontend/src/uxbox/main/ui/shapes/selection.cljs index 75bd98449..059c9e8f1 100644 --- a/frontend/src/uxbox/main/ui/shapes/selection.cljs +++ b/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 - :mixins [mx/reactive mx/static] +(mf/def selection-handlers + :mixins [mf/reactive mf/static] :render (fn [own props] - (let [shapes (mx/react selected-shapes-ref) - modifiers (mx/react selected-modifers-ref) + (let [shapes (mf/react selected-shapes-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) - zoom (mx/react refs/selected-zoom) + edition? (mf/react refs/selected-edition) + zoom (mf/react refs/selected-zoom) num (count shapes) {:keys [id type] :as shape} (first shapes)] diff --git a/frontend/src/uxbox/main/ui/workspace.cljs b/frontend/src/uxbox/main/ui/workspace.cljs index 4c262407e..7f78ba4a6 100644 --- a/frontend/src/uxbox/main/ui/workspace.cljs +++ b/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 - mx/reactive + :mixins #{mf/static + 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) - ;; dom (mx/ref-node own "workspace-canvas") - dom (mx/ref-node (::canvas 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)] (scroll-to-page-center) @@ -94,10 +95,9 @@ :render (fn [own props] - ;; [own project-id page-id] - (let [flags (mx/react refs/flags) - project-id (get-in own [::mx/props :project]) - page-id (get-in own [::mx/props :page]) + (let [flags (mf/react refs/flags) + project-id (get props :project) + page-id (get props :page) left-sidebar? (not (empty? (keep flags [:layers :sitemap :document-history]))) right-sidebar? (not (empty? (keep flags [:icons :drawtools diff --git a/frontend/src/uxbox/main/ui/workspace/canvas.cljs b/frontend/src/uxbox/main/ui/workspace/canvas.cljs index 8bc5a83a8..f9d241206 100644 --- a/frontend/src/uxbox/main/ui/workspace/canvas.cljs +++ b/frontend/src/uxbox/main/ui/workspace/canvas.cljs @@ -6,57 +6,61 @@ ;; Copyright (c) 2015-2016 Juan de la Cruz (ns uxbox.main.ui.workspace.canvas - (:require [beicon.core :as rx] - [lentes.core :as l] - [goog.events :as events] - [potok.core :as ptk] - [uxbox.main.store :as st] - [uxbox.main.constants :as c] - [uxbox.main.refs :as refs] - [uxbox.main.streams :as streams] - [uxbox.main.user-events :as uev] - [uxbox.main.geom :as geom] - [uxbox.main.data.projects :as dp] - [uxbox.main.data.workspace :as udw] - [uxbox.main.data.shapes :as uds] - [uxbox.main.ui.keyboard :as kbd] - [uxbox.main.ui.shapes :as uus] - [uxbox.main.ui.shapes.selection :refer [selection-handlers]] - [uxbox.main.ui.workspace.scroll :as scroll] - [uxbox.main.ui.workspace.drawarea :refer [draw-area]] - [uxbox.main.ui.workspace.ruler :refer [ruler]] - [uxbox.main.ui.workspace.grid :refer [grid]] - [uxbox.util.geom.point :as gpt] - [uxbox.util.dom :as dom] - [uxbox.util.data :refer [parse-int]] - [rumext.core :as mx :include-macros true]) + (:require + [beicon.core :as rx] + [goog.events :as events] + [lentes.core :as l] + [potok.core :as ptk] + [rumext.core :as mx] + [rumext.alpha :as mf] + [uxbox.main.constants :as c] + [uxbox.main.data.projects :as dp] + [uxbox.main.data.shapes :as uds] + [uxbox.main.data.workspace :as udw] + [uxbox.main.geom :as geom] + [uxbox.main.refs :as refs] + [uxbox.main.store :as st] + [uxbox.main.streams :as streams] + [uxbox.main.ui.keyboard :as kbd] + [uxbox.main.ui.shapes :as uus] + [uxbox.main.ui.shapes.selection :refer [selection-handlers]] + [uxbox.main.ui.workspace.drawarea :refer [draw-area]] + [uxbox.main.ui.workspace.grid :refer [grid]] + [uxbox.main.ui.workspace.ruler :refer [ruler]] + [uxbox.main.ui.workspace.scroll :as scroll] + [uxbox.main.user-events :as uev] + [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 - {:mixins [mx/static]} - [{:keys [background] :as metadata}] - [:rect - {:x 0 :y 0 - :width "100%" - :height "100%" - :fill (or background "#ffffff")}]) +(mf/def background + :mixins [mf/static] + :render + (fn [own {:keys [background] :as metadata}] + [:rect + {:x 0 :y 0 + :width "100%" + :height "100%" + :fill (or background "#ffffff")}])) ;; --- Coordinates Widget -(mx/defc coordinates - {:mixins [mx/reactive mx/static]} - [] - (let [zoom (mx/react refs/selected-zoom) - coords (some-> (mx/react refs/canvas-mouse-position) - (gpt/divide zoom) - (gpt/round 0))] - [:ul.coordinates {} - [:span {:alt "x"} - (str "X: " (:x coords "-"))] - [:span {:alt "y"} - (str "Y: " (:y coords "-"))]])) +(mf/def coordinates + :mixins [mf/reactive mf/static] + :render + (fn [own props] + (let [zoom (mf/react refs/selected-zoom) + coords (some-> (mf/react refs/canvas-mouse-position) + (gpt/divide zoom) + (gpt/round 0))] + [:ul.coordinates {} + [:span {:alt "x"} + (str "X: " (:x coords "-"))] + [:span {:alt "y"} + (str "Y: " (:y coords "-"))]]))) ;; --- Selection Rect @@ -64,16 +68,17 @@ (-> (l/key :selrect) (l/derive refs/workspace))) -(mx/defc selrect - {:mixins [mx/static mx/reactive]} - [] - (when-let [rect (mx/react selrect-ref)] - (let [{:keys [x1 y1 width height]} (geom/size rect)] - [:rect.selection-rect - {:x x1 - :y y1 - :width width - :height height}]))) +(mf/def selrect + :mixins [mf/static mf/reactive] + :render + (fn [own props] + (when-let [rect (mf/react selrect-ref)] + (let [{:keys [x1 y1 width height]} (geom/size rect)] + [:rect.selection-rect + {:x x1 + :y y1 + :width width + :height height}])))) ;; --- Cursor tooltip @@ -89,182 +94,189 @@ :circle "Drag to draw a Circle" nil)) -(mx/defc cursor-tooltip - {:mixins [mx/reactive mx/static]} - [tooltip] - (let [coords (mx/react refs/window-mouse-position)] - [:span.cursor-tooltip - {:style - {:position "fixed" - :left (str (+ (:x coords) 5) "px") - :top (str (- (:y coords) 25) "px")}} - tooltip])) +(mf/def cursor-tooltip + :mixins [mf/reactive mf/static] + :render + (fn [own tooltip] + (let [coords (mf/react refs/window-mouse-position)] + [:span.cursor-tooltip + {:style + {:position "fixed" + :left (str (+ (:x coords) 5) "px") + :top (str (- (:y coords) 25) "px")}} + tooltip]))) ;; --- Canvas -(mx/defc canvas - {:mixins [mx/static mx/reactive]} - [{:keys [metadata id] :as page} zoom] - (let [width (:width metadata) - height (:height metadata)] - [:svg.page-canvas {:x c/canvas-start-x - :y c/canvas-start-y - :ref (str "canvas" id) - :width width - :height height} - (background metadata) - [:svg.page-layout {} - [:g.main {} - (for [item (reverse (:shapes page))] - (-> (uus/shape item) - (mx/with-key (str item)))) - (selection-handlers) - (draw-area zoom)]]])) +(mf/def canvas + :mixins [mf/static mf/reactive] + :render + (fn [own {:keys [page zoom] :as props}] + (let [{:keys [metadata id]} page + width (:width metadata) + height (:height metadata)] + [:svg.page-canvas {:x c/canvas-start-x + :y c/canvas-start-y + :ref (str "canvas" id) + :width width + :height height} + (background metadata) + [:svg.page-layout + [:g.main + (for [item (reverse (:shapes page))] + (-> (uus/shape item) + (mf/with-key (str item)))) + (selection-handlers) + (draw-area zoom)]]]))) ;; --- Viewport -(defn- viewport-did-mount - [own] - (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))) +(mf/def viewport + :mixins [mf/reactive] - (translate-point-to-canvas [pt] - (let [viewport (mx/ref-node own "viewport")] - (when-let [canvas (dom/get-element-by-class "page-canvas" viewport)] - (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)))))) + :init + (fn [own props] + (assoc own ::viewport-ref (mf/create-ref))) - (on-key-down [event] - (let [key (.-keyCode event) - ctrl? (kbd/ctrl? event) - shift? (kbd/shift? event) - opts {:key key - :shift? shift? - :ctrl? ctrl?}] - (st/emit! (uev/keyboard-event :down key ctrl? shift?)) - (when (kbd/space? event) - (st/emit! (udw/start-viewport-positioning))))) + :did-mount + (fn [own] + (letfn [(translate-point-to-viewport [pt] + (let [viewport (mf/ref-node (::viewport-ref own)) + brect (.getBoundingClientRect viewport) + brect (gpt/point (parse-int (.-left brect)) + (parse-int (.-top brect)))] + (gpt/subtract pt brect))) - (on-key-up [event] - (let [key (.-keyCode event) - ctrl? (kbd/ctrl? event) - shift? (kbd/shift? event) - opts {:key key - :shift? shift? - :ctrl? ctrl?}] - (when (kbd/space? event) - (st/emit! (udw/stop-viewport-positioning))) - (st/emit! (uev/keyboard-event :up key ctrl? shift?)))) + (translate-point-to-canvas [pt] + (let [viewport (mf/ref-node (::viewport-ref own))] + (when-let [canvas (dom/get-element-by-class "page-canvas" viewport)] + (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-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) - 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) + (on-key-down [event] + (let [key (.-keyCode event) + 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?))) - (if drawing - (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) + (st/emit! (uev/keyboard-event :down key ctrl? shift?)) + (when (kbd/space? event) + (st/emit! (udw/start-viewport-positioning))))) + + (on-key-up [event] + (let [key (.-keyCode event) + 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?)))) - (on-mouse-up [event] - (dom/stop-propagation event) - (let [ctrl? (kbd/ctrl? event) + (when (kbd/space? event) + (st/emit! (udw/stop-viewport-positioning))) + (st/emit! (uev/keyboard-event :up key ctrl? shift?)))) + + (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? - :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" - :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 zoom)) - (if (contains? flags :grid) - (grid))] - (when (contains? flags :ruler) - (ruler zoom)) - (selrect)]]))) + 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)))) + + :will-unmount + (fn [own] + (events/unlistenByKey (::key1 own)) + (events/unlistenByKey (::key2 own)) + (events/unlistenByKey (::key3 own)) + (dissoc own ::key1 ::key2 ::key3)) + + :render + (fn [own props] + (let [page (mf/react refs/selected-page) + flags (mf/react refs/flags) + drawing (mf/react refs/selected-drawing-tool) + tooltip (or (mf/react refs/selected-tooltip) + (get-shape-tooltip drawing)) + zoom (or (mf/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? + :ctrl? ctrl?}] + (st/emit! (uev/mouse-event :down ctrl? shift?))) + (if drawing + (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)]])))) diff --git a/frontend/src/uxbox/main/ui/workspace/rules.cljs b/frontend/src/uxbox/main/ui/workspace/rules.cljs index 5a2cd7959..0345cd7ab 100644 --- a/frontend/src/uxbox/main/ui/workspace/rules.cljs +++ b/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 - :mixins #{mx/static} +(mf/def horizontal-rule-ticks + :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 - :mixins #{mx/static} +(mf/def vertical-rule-ticks + :mixins #{mf/static} :render (fn [own zoom] (let [zoom (or zoom 1) @@ -130,12 +130,12 @@ ;; --- Horizontal Rule (Component) -(mx/def horizontal-rule - :mixins #{mx/static mx/reactive} +(mf/def horizontal-rule + :mixins #{mf/static mf/reactive} :render (fn [own props] - (let [scroll (mx/react refs/workspace-scroll) - zoom (mx/react refs/selected-zoom) + (let [scroll (mf/react refs/workspace-scroll) + 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 - :mixins #{mx/static mx/reactive} +(mf/def vertical-rule + :mixins #{mf/static mf/reactive} :render (fn [own props] - (let [scroll (mx/react refs/workspace-scroll) - zoom (mx/react refs/selected-zoom) + (let [scroll (mf/react refs/workspace-scroll) + zoom (mf/react refs/selected-zoom) scroll-y (:y scroll) translate-y (- (- c/canvas-scroll-padding) (:y scroll))] [:svg.vertical-rule diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/history.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/history.cljs index 8edf0472e..f9be2d0bf 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/history.cljs +++ b/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 - :mixins [mx/static] +(mf/def history-item + :mixins [mf/static] :key-fn :id :render (fn [own {:keys [::selected] :as item}] @@ -46,12 +46,12 @@ ;; --- History List (Component) -(mx/def history-list - :mixins [mx/static mx/reactive] +(mf/def history-list + :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 - :mixins [mx/static] +(mf/def history-pinned-list + :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 - :mixins [mx/static mx/reactive] +(mf/def history-toolbox + :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 - :mixins [mx/static mx/reactive] +(mf/def history-dialog + :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))] diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs index 13562986f..7699e3424 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs +++ b/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 - :mixins [mx/static (mx/local)] +(mf/def shape-name + :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) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs index 43e31b4f6..1ebe2c55a 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs +++ b/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 - :mixins [(mx/local) mx/static mx/reactive] +(mf/def page-item + :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 - :mixins [mx/static mx/reactive] +(mf/def sitemap-toolbox + :mixins [mf/static mf/reactive] :render (fn [own current-page-id] - (let [project (mx/react refs/selected-project) - pages (mx/react refs/selected-project-pages) + (let [project (mf/react refs/selected-project) + 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)] diff --git a/frontend/tools.clj b/frontend/tools.clj index 272adb0e0..617b5f3ee 100644 --- a/frontend/tools.clj +++ b/frontend/tools.clj @@ -52,6 +52,7 @@ (when (= name "worker") {:target :webworker}) {:optimizations :advanced + :pretty-print false :static-fns true :elide-asserts true})))