Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-14 16:51:18 -05:00
Code Issues Activity

feat(frontend): adapt to rumext changes

Browse source
This commit is contained in:
Andrey Antukh 2019-07-19 12:32:31 +02:00
parent bb64655804
commit 56b8922dbb
21 changed files with 442 additions and 421 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/deps.edn
View file

@ -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"}

2
frontend/src/uxbox/builtins/icons.cljs
View file

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

4
frontend/src/uxbox/main/ui.cljs
View file

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

2
frontend/src/uxbox/main/ui/auth/login.cljs
View file

@ -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]

55
frontend/src/uxbox/main/ui/dashboard/colors.cljs
View file

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

22
frontend/src/uxbox/main/ui/dashboard/header.cljs
View file

@ -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]
[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]

65
frontend/src/uxbox/main/ui/dashboard/icons.cljs
View file

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

71
frontend/src/uxbox/main/ui/dashboard/images.cljs
View file

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

30
frontend/src/uxbox/main/ui/dashboard/projects.cljs
View file

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

16
frontend/src/uxbox/main/ui/dashboard/projects_createform.cljs
View file

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

11
frontend/src/uxbox/main/ui/lightbox.cljs
View file

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

2
frontend/src/uxbox/main/ui/navigation.cljs
View file

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

12
frontend/src/uxbox/main/ui/settings/profile.cljs
View file

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

15
frontend/src/uxbox/main/ui/shapes/selection.cljs
View file

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

26
frontend/src/uxbox/main/ui/workspace.cljs
View file

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

444
frontend/src/uxbox/main/ui/workspace/canvas.cljs
View file

@ -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]
[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)]]))))

30
frontend/src/uxbox/main/ui/workspace/rules.cljs
View file

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

28
frontend/src/uxbox/main/ui/workspace/sidebar/history.cljs
View file

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

9
frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs
View file

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

16
frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs
View file

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

1
frontend/tools.clj
View file

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