0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-15 01:01:30 -05:00

feat(frontend): adapt to rumext changes

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -19,7 +19,8 @@
[uxbox.main.ui.keyboard :as kbd] [uxbox.main.ui.keyboard :as kbd]
[uxbox.util.data :refer (read-string classnames)] [uxbox.util.data :refer (read-string classnames)]
[uxbox.util.router :as r] [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.dnd :as dnd]
[uxbox.util.dom :as dom]) [uxbox.util.dom :as dom])
(:import goog.events.EventType)) (:import goog.events.EventType))
@ -89,10 +90,10 @@
;; --- Shape Name (Component) ;; --- Shape Name (Component)
(mx/def shape-name (mf/def shape-name
:mixins [mx/static (mx/local)] :mixins [mf/static (mf/local)]
:render :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] (letfn [(on-blur [event]
(let [target (dom/event->target event) (let [target (dom/event->target event)
parent (.-parentNode target) parent (.-parentNode target)

View file

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

View file

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