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:
parent
bb64655804
commit
56b8922dbb
21 changed files with 442 additions and 421 deletions
|
@ -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"}
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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]
|
||||||
|
|
|
@ -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))
|
||||||
|
|
||||||
|
|
|
@ -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]
|
||||||
|
|
|
@ -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))
|
||||||
|
|
||||||
|
|
|
@ -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))
|
||||||
|
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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))
|
||||||
|
|
|
@ -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))]
|
||||||
|
|
|
@ -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]))
|
||||||
|
|
||||||
|
|
|
@ -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))
|
||||||
|
|
|
@ -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)]
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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)]]))))
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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))]
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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)]
|
||||||
|
|
|
@ -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})))
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue