diff --git a/frontend/src/uxbox/main.cljs b/frontend/src/uxbox/main.cljs index 636fdc30f..bd3bed18a 100644 --- a/frontend/src/uxbox/main.cljs +++ b/frontend/src/uxbox/main.cljs @@ -68,7 +68,7 @@ (defn- on-navigate [router path] (let [match (rt/match router path)] - (prn "on-navigate" path match) + ;; (prn "on-navigate" path match) (cond (and (= path "") (nil? match)) (html-history/set-path! "/dashboard/projects") diff --git a/frontend/src/uxbox/main/data/workspace.cljs b/frontend/src/uxbox/main/data/workspace.cljs index 13fa78366..e540a9f92 100644 --- a/frontend/src/uxbox/main/data/workspace.cljs +++ b/frontend/src/uxbox/main/data/workspace.cljs @@ -5,31 +5,31 @@ ;; Copyright (c) 2015-2016 Andrey Antukh (ns uxbox.main.data.workspace - (:require [cljs.spec.alpha :as s] - [beicon.core :as rx] - [potok.core :as ptk] - [uxbox.main.store :as st] - [uxbox.main.constants :as c] - [uxbox.main.lenses :as ul] - [uxbox.main.workers :as uwrk] - [uxbox.main.data.projects :as dp] - [uxbox.main.data.pages :as udp] - [uxbox.main.data.shapes :as uds] - [uxbox.main.data.icons :as udi] - [uxbox.main.data.shapes-impl :as shimpl] - [uxbox.main.data.lightbox :as udl] - [uxbox.main.data.history :as udh] - [uxbox.main.data.workspace.scroll :as wscroll] - [uxbox.main.data.workspace.drawing :as wdrawing] - [uxbox.main.data.workspace.selrect :as wselrect] - [uxbox.main.data.workspace.ruler :as wruler] - [uxbox.util.uuid :as uuid] - [uxbox.util.spec :as us] - [uxbox.util.forms :as sc] - [uxbox.util.geom.point :as gpt] - [uxbox.util.time :as dt] - [uxbox.util.math :as mth] - [uxbox.util.data :refer (index-of)])) + (:require + [beicon.core :as rx] + [potok.core :as ptk] + [uxbox.main.store :as st] + [uxbox.main.constants :as c] + [uxbox.main.lenses :as ul] + [uxbox.main.workers :as uwrk] + [uxbox.main.data.projects :as dp] + [uxbox.main.data.pages :as udp] + [uxbox.main.data.shapes :as uds] + [uxbox.main.data.icons :as udi] + [uxbox.main.data.shapes-impl :as shimpl] + [uxbox.main.data.lightbox :as udl] + [uxbox.main.data.history :as udh] + [uxbox.main.data.workspace.scroll :as wscroll] + [uxbox.main.data.workspace.drawing :as wdrawing] + [uxbox.main.data.workspace.selrect :as wselrect] + [uxbox.main.data.workspace.ruler :as wruler] + [uxbox.util.uuid :as uuid] + [uxbox.util.spec :as us] + [uxbox.util.forms :as sc] + [uxbox.util.geom.point :as gpt] + [uxbox.util.time :as dt] + [uxbox.util.math :as mth] + [uxbox.util.data :refer (index-of)])) ;; --- Expose inner functions diff --git a/frontend/src/uxbox/main/ui.cljs b/frontend/src/uxbox/main/ui.cljs index 1fe385448..dd682e4a9 100644 --- a/frontend/src/uxbox/main/ui.cljs +++ b/frontend/src/uxbox/main/ui.cljs @@ -31,12 +31,6 @@ [uxbox.util.router :as rt] [uxbox.util.timers :as ts])) -;; --- Refs - -(def route-ref - (-> (l/key :route) - (l/derive st/state))) - ;; --- Routes (def routes @@ -59,56 +53,53 @@ ;; --- Main App (Component) -(mx/defc app - {:mixins [mx/reactive]} - [] - (let [route (mx/react route-ref)] - (case (get-in route [:data :name]) - :auth/login (auth/login-page) - :auth/register (auth/register-page) - :auth/recovery-request (auth/recovery-request-page) +(defn- parse-dashboard-params + [route section] + (let [{:keys [id type]} (get-in route [:params :query]) + id (cond + (str/digits? id) (parse-int id) + (uuid-str? id) (uuid id) + :else nil) + type (when (str/alpha? type) (keyword type))] + {:section section + :id id + :type type})) - :auth/recovery - (let [token (get-in route [:params :path :token])] - (auth/recovery-page token)) - :dashboard/projects (dashboard/projects-page) - :settings/profile (settings/profile-page) - :settings/password (settings/password-page) - :settings/notifications (settings/notifications-page) - ;; ;; :dashboard/elements (dashboard/elements-page) +(mx/def app + :mixins [mx/reactive] - :dashboard/icons - (let [{:keys [id type]} (get-in route [:params :query]) - id (cond - (str/digits? id) (parse-int id) - (uuid-str? id) (uuid id) - :else nil) - type (when (str/alpha? type) (keyword type))] - (dashboard/icons-page type id)) + :init + (fn [own props] + (assoc own ::route-ref (l/derive (l/key :route) st/state))) - :dashboard/images - (let [{:keys [id type]} (get-in route [:params :query]) - id (cond - (str/digits? id) (parse-int id) - (uuid-str? id) (uuid id) - :else nil) - type (when (str/alpha? type) (keyword type))] - (dashboard/images-page type id)) + :render + (fn [own props] + (let [route (mx/react (::route-ref own))] + (case (get-in route [:data :name]) + :auth/login (auth/login-page) + :auth/register (auth/register-page) + :auth/recovery-request (auth/recovery-request-page) - :dashboard/colors - (let [{:keys [id type]} (get-in route [:params :query]) - type (when (str/alpha? type) (keyword type)) - id (cond - (str/digits? id) (parse-int id) - (uuid-str? id) (uuid id) - :else nil)] - (dashboard/colors-page type id)) + :auth/recovery + (let [token (get-in route [:params :path :token])] + (auth/recovery-page token)) - :workspace/page - (let [projectid (uuid (get-in route [:params :path :project])) - pageid (uuid (get-in route [:params :path :page]))] - (workspace projectid pageid)) + :settings/profile (settings/profile-page) + :settings/password (settings/password-page) + :settings/notifications (settings/notifications-page) - nil - ))) + :dashboard/projects (dashboard/dashboard {:section :projects}) + :dashboard/icons (-> (parse-dashboard-params route :icons) + (dashboard/dashboard)) + :dashboard/images (-> (parse-dashboard-params route :images) + (dashboard/dashboard)) + :dashboard/colors (-> (parse-dashboard-params route :colors) + (dashboard/dashboard)) + :workspace/page + (let [project (uuid (get-in route [:params :path :project])) + page (uuid (get-in route [:params :path :page]))] + (workspace {:project project :page page})) + + nil + )))) diff --git a/frontend/src/uxbox/main/ui/auth/login.cljs b/frontend/src/uxbox/main/ui/auth/login.cljs index a81eb6cc9..9c3e22567 100644 --- a/frontend/src/uxbox/main/ui/auth/login.cljs +++ b/frontend/src/uxbox/main/ui/auth/login.cljs @@ -89,7 +89,7 @@ (mx/defc login-page {:mixins [mx/static (fm/clear-mixin st/store :login)] - :will-mount (fn [own] + :init (fn [own] (when @st/auth-ref (st/emit! (rt/navigate :dashboard/projects))) own)} diff --git a/frontend/src/uxbox/main/ui/auth/recovery.cljs b/frontend/src/uxbox/main/ui/auth/recovery.cljs index 003335da4..d333b91e5 100644 --- a/frontend/src/uxbox/main/ui/auth/recovery.cljs +++ b/frontend/src/uxbox/main/ui/auth/recovery.cljs @@ -2,23 +2,24 @@ ;; License, v. 2.0. If a copy of the MPL was not distributed with this ;; file, You can obtain one at http://mozilla.org/MPL/2.0/. ;; -;; Copyright (c) 2015-2017 Andrey Antukh ;; Copyright (c) 2015-2017 Juan de la Cruz +;; Copyright (c) 2015-2019 Andrey Antukh (ns uxbox.main.ui.auth.recovery - (:require [cljs.spec.alpha :as s :include-macros true] - [lentes.core :as l] - [cuerdas.core :as str] - [uxbox.builtins.icons :as i] - [uxbox.main.store :as st] - [uxbox.main.data.auth :as uda] - [uxbox.main.ui.messages :refer [messages-widget]] - [uxbox.main.ui.navigation :as nav] - [uxbox.util.i18n :refer (tr)] - [uxbox.util.dom :as dom] - [uxbox.util.forms :as fm] - [rumext.core :as mx :include-macros true] - [uxbox.util.router :as rt])) + (:require + [cljs.spec.alpha :as s :include-macros true] + [cuerdas.core :as str] + [lentes.core :as l] + [rumext.core :as mx :include-macros true] + [uxbox.builtins.icons :as i] + [uxbox.main.data.auth :as uda] + [uxbox.main.store :as st] + [uxbox.main.ui.messages :refer [messages-widget]] + [uxbox.main.ui.navigation :as nav] + [uxbox.util.dom :as dom] + [uxbox.util.forms :as fm] + [uxbox.util.i18n :refer (tr)] + [uxbox.util.router :as rt])) (def form-data (fm/focus-data :recovery st/state)) (def form-errors (fm/focus-errors :recovery st/state)) @@ -64,15 +65,15 @@ ;; --- Recovery Page -(defn- recovery-page-will-mount +(defn- recovery-page-init [own] - (let [[token] (:rum/args own)] + (let [[token] (::mx/args own)] (st/emit! (uda/validate-recovery-token token)) own)) (mx/defc recovery-page {:mixins [mx/static (fm/clear-mixin st/store :recovery)] - :will-mount recovery-page-will-mount} + :init recovery-page-init} [token] [:div.login [:div.login-body diff --git a/frontend/src/uxbox/main/ui/colorpicker.cljs b/frontend/src/uxbox/main/ui/colorpicker.cljs index c8553d083..18ef766f0 100644 --- a/frontend/src/uxbox/main/ui/colorpicker.cljs +++ b/frontend/src/uxbox/main/ui/colorpicker.cljs @@ -102,7 +102,7 @@ (mx/defcs colorpicker {:mixins [mx/static (mx/local)]} - [{:keys [rum/local] :as own} & {:keys [value on-change theme] + [{:keys [::mx/local] :as own} & {:keys [value on-change theme] :or {value "#d4edfb" theme :default}}] (let [value-rgb (color/hex->rgb value) classes (case theme diff --git a/frontend/src/uxbox/main/ui/lightbox.cljs b/frontend/src/uxbox/main/ui/lightbox.cljs index 7aba81c7c..8b9f6cde6 100644 --- a/frontend/src/uxbox/main/ui/lightbox.cljs +++ b/frontend/src/uxbox/main/ui/lightbox.cljs @@ -33,7 +33,7 @@ (when (dom/equals? parent current) (udl/close!)))) -(defn- lightbox-will-mount +(defn- lightbox-init [own] (let [key (events/listen js/document EventType.KEYDOWN @@ -47,7 +47,7 @@ (mx/defcs lightbox {:mixins [mx/reactive] - :will-mount lightbox-will-mount + :init lightbox-init :will-unmount lightbox-will-umount} [own] (let [data (mx/react lightbox-ref) diff --git a/frontend/src/uxbox/main/ui/shapes/image.cljs b/frontend/src/uxbox/main/ui/shapes/image.cljs index 78b75b6e5..ce60dc8b8 100644 --- a/frontend/src/uxbox/main/ui/shapes/image.cljs +++ b/frontend/src/uxbox/main/ui/shapes/image.cljs @@ -31,10 +31,10 @@ (mx/defcs image-component {:mixins [mx/static mx/reactive] - :will-mount (fn [own] + :init (fn [own] ;; TODO: maybe do it conditionally ;; (only fetch when it's not fetched) - (when-let [id (-> own :rum/args first :image)] + (when-let [id (-> own ::mx/props first :image)] (st/emit! (udi/fetch-image id))) own)} [own {:keys [id image] :as shape}] diff --git a/frontend/src/uxbox/main/ui/shapes/selection.cljs b/frontend/src/uxbox/main/ui/shapes/selection.cljs index 9b84a19dd..75bd98449 100644 --- a/frontend/src/uxbox/main/ui/shapes/selection.cljs +++ b/frontend/src/uxbox/main/ui/shapes/selection.cljs @@ -120,7 +120,6 @@ :cy cy}]) (mx/defc controls - {:mixins [mx/static]} [{:keys [x1 y1 width height] :as shape} zoom on-mouse-down] (let [radius (if (> (max width height) handler-size-threshold) 6.0 4.0)] [:g.controls @@ -226,7 +225,6 @@ (controls selection zoom on-click))) (mx/defc single-selection-handlers - {:mixins [mx/static]} [{:keys [id] :as shape} zoom] (let [on-click #(do (dom/stop-propagation %2) (start-resize %1 #{id} shape)) @@ -247,35 +245,37 @@ :stroke-opacity "0.5" :fill "transparent"}}]])) -(mx/defc selection-handlers - {:mixins [mx/reactive mx/static]} - [] - (let [shapes (mx/react selected-shapes-ref) - modifiers (mx/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) - num (count shapes) - {:keys [id type] :as shape} (first shapes)] - (cond - (zero? num) - nil +(mx/def selection-handlers + :mixins [mx/reactive mx/static] + :render + (fn [own props] + (let [shapes (mx/react selected-shapes-ref) + modifiers (mx/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) + num (count shapes) + {:keys [id type] :as shape} (first shapes)] - (> num 1) - (multiple-selection-handlers shapes modifiers zoom) + (cond + (zero? num) + nil - (and (= type :text) edition?) - (-> (assoc shape :modifiers (get modifiers id)) - (text-edition-selection-handlers zoom)) + (> num 1) + (multiple-selection-handlers shapes modifiers zoom) - (= type :path) - (if (= @refs/selected-edition (:id shape)) - (path-edition-selection-handlers shape zoom) + (and (= type :text) edition?) (-> (assoc shape :modifiers (get modifiers id)) - (single-selection-handlers zoom))) + (text-edition-selection-handlers zoom)) - :else - (-> (assoc shape :modifiers (get modifiers id)) - (single-selection-handlers zoom))))) + (= type :path) + (if (= @refs/selected-edition (:id shape)) + (path-edition-selection-handlers shape zoom) + (-> (assoc shape :modifiers (get modifiers id)) + (single-selection-handlers zoom))) + + :else + (-> (assoc shape :modifiers (get modifiers id)) + (single-selection-handlers zoom)))))) diff --git a/frontend/src/uxbox/main/ui/shapes/text.cljs b/frontend/src/uxbox/main/ui/shapes/text.cljs index eb28bbe40..9a2bd511f 100644 --- a/frontend/src/uxbox/main/ui/shapes/text.cljs +++ b/frontend/src/uxbox/main/ui/shapes/text.cljs @@ -106,7 +106,7 @@ (defn- text-shape-edit-did-mount [own] - (let [[shape] (:rum/args own) + (let [[shape] (::mx/props own) dom (mx/ref-node own "container")] (set! (.-textContent dom) (:content shape "")) (.focus dom) @@ -140,25 +140,15 @@ (defn text-shape-wrapper-did-mount [own] - (let [[shape] (:rum/args own) + (let [[shape] (::mx/props own) dom (mx/ref-node own "fobject") html (dom/render-to-html (text-shape-html shape))] (set! (.-innerHTML dom) html)) own) -(defn text-shape-wrapper-did-remount - [old own] - (let [[old-shape] (:rum/args old) - [shape] (:rum/args own)] - (when (not= shape old-shape) - (let [dom (mx/ref-node own "fobject") - html (dom/render-to-html (text-shape-html shape))] - (set! (.-innerHTML dom) html))) - own)) - (mx/defc text-shape-wrapper {:did-mount text-shape-wrapper-did-mount - :did-remount text-shape-wrapper-did-remount} + :key-fn #(pr-str %1)} [{:keys [id modifiers] :as shape}] (let [{:keys [displacement resize]} modifiers xfmt (cond-> (gmt/matrix) @@ -188,7 +178,7 @@ (mx/defc text-shape {:mixins [mx/static] :did-mount text-shape-wrapper-did-mount - :did-remount text-shape-wrapper-did-remount} + :key-fn #(pr-str %1)} [{:keys [id content modifiers] :as shape}] (let [{:keys [displacement resize]} modifiers xfmt (cond-> (gmt/matrix) diff --git a/frontend/src/uxbox/main/ui/users.cljs b/frontend/src/uxbox/main/ui/users.cljs index b357399a4..0dd1fe01e 100644 --- a/frontend/src/uxbox/main/ui/users.cljs +++ b/frontend/src/uxbox/main/ui/users.cljs @@ -2,20 +2,21 @@ ;; License, v. 2.0. If a copy of the MPL was not distributed with this ;; file, You can obtain one at http://mozilla.org/MPL/2.0/. ;; -;; Copyright (c) 2016 Andrey Antukh +;; Copyright (c) 2016-2019 Andrey Antukh (ns uxbox.main.ui.users - (:require [cuerdas.core :as str] - [lentes.core :as l] - [potok.core :as ptk] - [uxbox.main.store :as st] - [uxbox.main.data.auth :as da] - [uxbox.main.data.lightbox :as udl] - [uxbox.builtins.icons :as i] - [uxbox.main.ui.navigation :as nav] - [uxbox.util.i18n :refer (tr)] - [uxbox.util.router :as rt] - [rumext.core :as mx :include-macros true])) + (:require + [cuerdas.core :as str] + [lentes.core :as l] + [potok.core :as ptk] + [rumext.core :as mx :include-macros true] + [uxbox.builtins.icons :as i] + [uxbox.main.data.auth :as da] + [uxbox.main.data.lightbox :as udl] + [uxbox.main.store :as st] + [uxbox.main.ui.navigation :as nav] + [uxbox.util.i18n :refer (tr)] + [uxbox.util.router :as rt])) ;; --- User Menu @@ -46,7 +47,7 @@ {:mixins [mx/static mx/reactive (mx/local {:open false})]} [own] (let [profile (mx/react profile-ref) - local (:rum/local own) + local (::mx/local own) photo (if (str/empty? (:photo profile "")) "/images/avatar.jpg" (:photo profile))] diff --git a/frontend/src/uxbox/view/ui/lightbox.cljs b/frontend/src/uxbox/view/ui/lightbox.cljs index 162466be0..f13a4fb78 100644 --- a/frontend/src/uxbox/view/ui/lightbox.cljs +++ b/frontend/src/uxbox/view/ui/lightbox.cljs @@ -39,7 +39,7 @@ (when (dom/equals? parent current) (udl/close!)))) -(defn- lightbox-will-mount +(defn- lightbox-init [own] (let [key (events/listen js/document EventType.KEYDOWN @@ -53,7 +53,7 @@ (mx/defcs lightbox {:mixins [mx/reactive] - :will-mount lightbox-will-mount + :init lightbox-init :will-unmount lightbox-will-umount} [own] (let [data (mx/react lightbox-ref) diff --git a/frontend/src/uxbox/view/ui/viewer.cljs b/frontend/src/uxbox/view/ui/viewer.cljs index 132ee95a1..83ef7e5f7 100644 --- a/frontend/src/uxbox/view/ui/viewer.cljs +++ b/frontend/src/uxbox/view/ui/viewer.cljs @@ -31,24 +31,16 @@ ;; --- Component -(defn- viewer-page-will-mount +(defn- viewer-page-init [own] - (let [[token] (:rum/args own)] + (let [[token] (::mx/args own)] (st/emit! (dv/initialize token)) own)) -(defn- viewer-page-did-remount - [oldown own] - (let [[old-token] (:rum/args oldown) - [new-token] (:rum/args own)] - (when (not= old-token new-token) - (st/emit! (dv/initialize new-token))) - own)) - (mx/defc viewer-page {:mixins [mx/static mx/reactive] - :will-mount viewer-page-will-mount - :did-remount viewer-page-did-remount} + :init viewer-page-init + :key-fn vector} [token index id] (let [{:keys [project pages flags]} (mx/react state-ref) sitemap? (contains? flags :sitemap)] diff --git a/frontend/src/uxbox/view/ui/viewer/shapes.cljs b/frontend/src/uxbox/view/ui/viewer/shapes.cljs index 6ca05e672..ec69c13de 100644 --- a/frontend/src/uxbox/view/ui/viewer/shapes.cljs +++ b/frontend/src/uxbox/view/ui/viewer/shapes.cljs @@ -36,7 +36,7 @@ (defn- interactions-wrapper-did-mount [own] (let [dom (mx/dom-node own) - shape (first (:rum/args own)) + shape (first (::mx/args own)) evnts (itx/build-events shape) keys (reduce (fn [acc [evt callback]] (conj acc (events/listen dom evt callback))) @@ -81,8 +81,8 @@ (mx/defc image-shape-wrapper {:mixins [mx/static mx/reactive] - :will-mount (fn [own] - (when-let [image-id (-> own :rum/args first :image)] + :init (fn [own] + (when-let [image-id (-> own ::mx/args first :image)] (st/emit! (udv/fetch-image image-id))) own)} [{:keys [image] :as item}]