3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-31 11:56:12 +02:00
Code Issues Projects Releases Packages Wiki Activity

Move all react/rum related stuff under one unique ns.

Browse source
This commit is contained in:
Andrey Antukh 2016-01-12 19:30:04 +02:00
parent 8151faf15e
commit 809ac8cbc7
27 changed files with 137 additions and 156 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/uxbox/ui.cljs
View file

@ -10,7 +10,6 @@
[uxbox.ui.users :as users] [uxbox.ui.users :as users]
[uxbox.ui.dashboard :as dashboard] [uxbox.ui.dashboard :as dashboard]
[uxbox.ui.workspace :refer (workspace)] [uxbox.ui.workspace :refer (workspace)]
[uxbox.ui.util :as util]
[uxbox.ui.mixins :as mx] [uxbox.ui.mixins :as mx]
[uxbox.ui.shapes])) [uxbox.ui.shapes]))
@ -34,9 +33,9 @@
))) )))
(def app (def app
(util/component {:render app-render (mx/component {:render app-render
:mixins [rum/reactive] :mixins [rum/reactive]
:name "app"})) :name "app"}))
(defn init (defn init
[] []
(let [app-dom (gdom/getElement "app") (let [app-dom (gdom/getElement "app")

11
src/uxbox/ui/colorpicker.cljs
View file

@ -3,8 +3,7 @@
[rum.core :as rum] [rum.core :as rum]
[cats.labs.lens :as l] [cats.labs.lens :as l]
[goog.events :as events] [goog.events :as events]
[uxbox.ui.mixins :as mx] [uxbox.ui.mixins :as mx])
[uxbox.ui.util :as util])
(:import goog.events.EventType)) (:import goog.events.EventType))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@ -13,7 +12,7 @@
(defn on-click-handler (defn on-click-handler
[e own callback] [e own callback]
(let [canvas (util/get-ref-dom own "colorpicker") (let [canvas (mx/get-ref-dom own "colorpicker")
context (.getContext canvas "2d") context (.getContext canvas "2d")
brect (.getBoundingClientRect canvas) brect (.getBoundingClientRect canvas)
x (- (.-pageX e) (.-left brect)) x (- (.-pageX e) (.-left brect))
@ -22,7 +21,7 @@
r (aget (.-data image) 0) r (aget (.-data image) 0)
g (aget (.-data image) 1) g (aget (.-data image) 1)
b (aget (.-data image) 2)] b (aget (.-data image) 2)]
(callback {:hex (util/rgb->hex [r g b]) (callback {:hex (mx/rgb->hex [r g b])
:rgb [r g b]}))) :rgb [r g b]})))
(defn colorpicker-render (defn colorpicker-render
@ -38,7 +37,7 @@
(defn colorpicker-did-mount (defn colorpicker-did-mount
[own] [own]
(let [canvas (util/get-ref-dom own "colorpicker") (let [canvas (mx/get-ref-dom own "colorpicker")
context (.getContext canvas "2d") context (.getContext canvas "2d")
img (js/Image.)] img (js/Image.)]
(set! (.-src img) "/images/colorspecrum-400x300.png") (set! (.-src img) "/images/colorspecrum-400x300.png")
@ -51,7 +50,7 @@
(events/unlistenByKey key))) (events/unlistenByKey key)))
(def ^:static colorpicker (def ^:static colorpicker
(util/component (mx/component
{:render colorpicker-render {:render colorpicker-render
:did-mount colorpicker-did-mount :did-mount colorpicker-did-mount
:will-unmout colorpicker-will-unmout :will-unmout colorpicker-will-unmout

12
src/uxbox/ui/dashboard.cljs
View file

@ -6,15 +6,13 @@
[uxbox.ui.icons :as i] [uxbox.ui.icons :as i]
[uxbox.ui.mixins :as mx] [uxbox.ui.mixins :as mx]
[uxbox.ui.dom :as dom] [uxbox.ui.dom :as dom]
[uxbox.ui.util :as util]
[uxbox.data.dashboard :as dd] [uxbox.data.dashboard :as dd]
[uxbox.ui.library-bar :as ui.library-bar] [uxbox.ui.library-bar :as ui.library-bar]
[uxbox.ui.dashboard.header :refer (header)] [uxbox.ui.dashboard.header :refer (header)]
[uxbox.ui.dashboard.projects :as projects] [uxbox.ui.dashboard.projects :as projects]
[uxbox.ui.dashboard.elements :as elements] [uxbox.ui.dashboard.elements :as elements]
[uxbox.ui.dashboard.icons :as icons] [uxbox.ui.dashboard.icons :as icons]
[uxbox.ui.dashboard.colors :as colors] [uxbox.ui.dashboard.colors :as colors]))
))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Page: projects ;; Page: projects
@ -40,7 +38,7 @@
state) state)
(def ^:static projects-page (def ^:static projects-page
(util/component (mx/component
{:render projects-page-render {:render projects-page-render
:will-mount projects-page-will-mount :will-mount projects-page-will-mount
:transfer-state projects-page-transfer-state :transfer-state projects-page-transfer-state
@ -73,7 +71,7 @@
state) state)
(def ^:static elements-page (def ^:static elements-page
(util/component (mx/component
{:render elements-page-render {:render elements-page-render
:will-mount elements-page-will-mount :will-mount elements-page-will-mount
:transfer-state elements-page-transfer-state :transfer-state elements-page-transfer-state
@ -104,7 +102,7 @@
state) state)
(def ^:static icons-page (def ^:static icons-page
(util/component (mx/component
{:render icons-page-render {:render icons-page-render
:will-mount icons-page-will-mount :will-mount icons-page-will-mount
:transfer-state icons-page-transfer-state :transfer-state icons-page-transfer-state
@ -135,7 +133,7 @@
state) state)
(def ^:static colors-page (def ^:static colors-page
(util/component (mx/component
{:render colors-page-render {:render colors-page-render
:will-mount colors-page-will-mount :will-mount colors-page-will-mount
:transfer-state colors-page-transfer-state :transfer-state colors-page-transfer-state

14
src/uxbox/ui/dashboard/colors.cljs
View file

@ -10,13 +10,13 @@
[uxbox.library :as library] [uxbox.library :as library]
[uxbox.data.dashboard :as dd] [uxbox.data.dashboard :as dd]
[uxbox.util.lens :as ul] [uxbox.util.lens :as ul]
[uxbox.util.color :refer (hex->rgb)]
[uxbox.ui.icons :as i] [uxbox.ui.icons :as i]
[uxbox.ui.form :as form] [uxbox.ui.form :as form]
[uxbox.ui.lightbox :as lightbox] [uxbox.ui.lightbox :as lightbox]
[uxbox.ui.colorpicker :refer (colorpicker)] [uxbox.ui.colorpicker :refer (colorpicker)]
[uxbox.ui.dom :as dom] [uxbox.ui.dom :as dom]
[uxbox.ui.mixins :as mx] [uxbox.ui.mixins :as mx]))
[uxbox.ui.util :as util]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Lenses ;; Lenses
@ -63,7 +63,7 @@
[:span {:on-click on-delete} i/trash]])])))) [:span {:on-click on-delete} i/trash]])]))))
(def ^:static page-title (def ^:static page-title
(util/component (mx/component
{:render page-title-render {:render page-title-render
:name "page-title" :name "page-title"
:mixins [mx/static rum/reactive]})) :mixins [mx/static rum/reactive]}))
@ -109,7 +109,7 @@
(tr "ds.num-elements" (t/c num))]])]]]))) (tr "ds.num-elements" (t/c num))]])]]])))
(def ^:static nav (def ^:static nav
(util/component (mx/component
{:render nav-render {:render nav-render
:name "nav" :name "nav"
:mixins [rum/reactive]})) :mixins [rum/reactive]}))
@ -137,7 +137,7 @@
{:on-click #(lightbox/open! :color-form {:coll coll})} {:on-click #(lightbox/open! :color-form {:coll coll})}
[:span "+ New color"]]) [:span "+ New color"]])
(for [color (remove nil? (:colors coll)) (for [color (remove nil? (:colors coll))
:let [color-rgb (util/hex->rgb color)]] :let [color-rgb (hex->rgb color)]]
[:div.grid-item.small-item.project-th {:key color} [:div.grid-item.small-item.project-th {:key color}
[:span.color-swatch {:style {:background-color color}}] [:span.color-swatch {:style {:background-color color}}]
[:span.color-data color] [:span.color-data color]
@ -151,7 +151,7 @@
i/trash]])])]])))) i/trash]])])]]))))
(def grid (def grid
(util/component (mx/component
{:render grid-render {:render grid-render
:name "grid" :name "grid"
:mixins [mx/static rum/reactive]})) :mixins [mx/static rum/reactive]}))
@ -197,7 +197,7 @@
i/close]])))) i/close]]))))
(def color-lightbox (def color-lightbox
(util/component (mx/component
{:render color-lightbox-render {:render color-lightbox-render
:name "color-lightbox" :name "color-lightbox"
:mixins [(rum/local {}) :mixins [(rum/local {})

9
src/uxbox/ui/dashboard/elements.cljs
View file

@ -5,8 +5,7 @@
[uxbox.ui.icons :as i] [uxbox.ui.icons :as i]
[uxbox.ui.lightbox :as lightbox] [uxbox.ui.lightbox :as lightbox]
[uxbox.ui.dom :as dom] [uxbox.ui.dom :as dom]
[uxbox.ui.mixins :as mx] [uxbox.ui.mixins :as mx]))
[uxbox.ui.util :as util]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Page Title ;; Page Title
@ -22,7 +21,7 @@
[:span i/trash]]])) [:span i/trash]]]))
(def ^:static page-title (def ^:static page-title
(util/component (mx/component
{:render page-title-render {:render page-title-render
:name "page-title" :name "page-title"
:mixins [mx/static]})) :mixins [mx/static]}))
@ -118,7 +117,7 @@
[:div.project-th-icon.delete i/trash]]]])) [:div.project-th-icon.delete i/trash]]]]))
(def ^:static grid (def ^:static grid
(util/component (mx/component
{:render grid-render {:render grid-render
:name "grid" :name "grid"
:mixins [mx/static]})) :mixins [mx/static]}))
@ -145,7 +144,7 @@
i/close]])) i/close]]))
(def new-element-lightbox (def new-element-lightbox
(util/component (mx/component
{:render new-element-lightbox-render {:render new-element-lightbox-render
:name "new-element-lightbox"})) :name "new-element-lightbox"}))

4
src/uxbox/ui/dashboard/header.cljs
View file

@ -10,7 +10,7 @@
[uxbox.ui.navigation :as nav] [uxbox.ui.navigation :as nav]
[uxbox.ui.icons :as i] [uxbox.ui.icons :as i]
[uxbox.ui.users :as ui.u] [uxbox.ui.users :as ui.u]
[uxbox.ui.util :as util])) [uxbox.ui.mixins :as mx]))
(def ^:static header-l (def ^:static header-l
(as-> (l/in [:dashboard]) $ (as-> (l/in [:dashboard]) $
@ -45,7 +45,7 @@
(ui.u/user)]))) (ui.u/user)])))
(def ^:static header (def ^:static header
(util/component (mx/component
{:render header-render {:render header-render
:name "header" :name "header"
:mixins [rum/static :mixins [rum/static

11
src/uxbox/ui/dashboard/icons.cljs
View file

@ -14,8 +14,7 @@
[uxbox.ui.form :as form] [uxbox.ui.form :as form]
[uxbox.ui.lightbox :as lightbox] [uxbox.ui.lightbox :as lightbox]
[uxbox.ui.dom :as dom] [uxbox.ui.dom :as dom]
[uxbox.ui.mixins :as mx] [uxbox.ui.mixins :as mx]))
[uxbox.ui.util :as util]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Lenses ;; Lenses
@ -46,7 +45,7 @@
i/trash]])]))) i/trash]])])))
(def ^:static page-title (def ^:static page-title
(util/component (mx/component
{:render page-title-render {:render page-title-render
:name "page-title" :name "page-title"
:mixins [mx/static rum/reactive]})) :mixins [mx/static rum/reactive]}))
@ -89,7 +88,7 @@
(str (count (:icons props)) " elements")]])]]]))) (str (count (:icons props)) " elements")]])]]])))
(def ^:static nav (def ^:static nav
(util/component (mx/component
{:render nav-render {:render nav-render
:name "nav" :name "nav"
:mixins [rum/reactive]})) :mixins [rum/reactive]}))
@ -125,7 +124,7 @@
[:div.project-th-icon.delete i/trash]]])]])))) [:div.project-th-icon.delete i/trash]]])]]))))
(def grid (def grid
(util/component (mx/component
{:render grid-render {:render grid-render
:name "grid" :name "grid"
:mixins [mx/static rum/reactive]})) :mixins [mx/static rum/reactive]}))
@ -155,6 +154,6 @@
i/close]])) i/close]]))
(def new-icon-lightbox (def new-icon-lightbox
(util/component (mx/component
{:render new-icon-lightbox-render {:render new-icon-lightbox-render
:name "new-icon-lightbox"})) :name "new-icon-lightbox"}))

10
src/uxbox/ui/dashboard/projects.cljs
View file

@ -13,7 +13,7 @@
[uxbox.ui.dom :as dom] [uxbox.ui.dom :as dom]
[uxbox.ui.dashboard.header :as dsh.header] [uxbox.ui.dashboard.header :as dsh.header]
[uxbox.ui.lightbox :as lightbox] [uxbox.ui.lightbox :as lightbox]
[uxbox.ui.util :as util])) [uxbox.ui.mixins :as mx]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Helpers & Constants ;; Helpers & Constants
@ -136,7 +136,7 @@
i/close]]))) i/close]])))
(def new-project-lightbox (def new-project-lightbox
(util/component (mx/component
{:render new-project-lightbox-render {:render new-project-lightbox-render
:name "new-project-lightbox" :name "new-project-lightbox"
:mixins [(rum/local +project-defaults+)]})) :mixins [(rum/local +project-defaults+)]}))
@ -177,7 +177,7 @@
i/search]]))) i/search]])))
(def menu (def menu
(util/component (mx/component
{:render menu-render {:render menu-render
:name "projects-menu" :name "projects-menu"
:mixins [rum/reactive]})) :mixins [rum/reactive]}))
@ -210,7 +210,7 @@
i/trash]]]))) i/trash]]])))
(def project-item (def project-item
(util/component (mx/component
{:render project-item-render {:render project-item-render
:name "project" :name "project"
:mixins [rum/static]})) :mixins [rum/static]}))
@ -246,7 +246,7 @@
(rum/with-key (project-item item) (:id item)))]])))) (rum/with-key (project-item item) (:id item)))]]))))
(def grid (def grid
(util/component (mx/component
{:render grid-render {:render grid-render
:name "grid" :name "grid"
:mixins [rum/reactive]})) :mixins [rum/reactive]}))

3
src/uxbox/ui/library_bar.cljs
View file

@ -1,7 +1,6 @@
(ns uxbox.ui.library-bar (ns uxbox.ui.library-bar
(:require [sablono.core :as html :refer-macros [html]] (:require [sablono.core :as html :refer-macros [html]]
[rum.core :as rum] [rum.core :as rum]
[uxbox.ui.util :as ui]
[uxbox.ui.mixins :as mx] [uxbox.ui.mixins :as mx]
[uxbox.ui.icons :as i])) [uxbox.ui.icons :as i]))
@ -79,7 +78,7 @@
])) ]))
(def ^:static library-bar (def ^:static library-bar
(ui/component (mx/component
{:render library-bar-render {:render library-bar-render
:name "library-bar" :name "library-bar"
:mixins [mx/static]})) :mixins [mx/static]}))

4
src/uxbox/ui/lightbox.cljs
View file

@ -1,7 +1,7 @@
(ns uxbox.ui.lightbox (ns uxbox.ui.lightbox
(:require [sablono.core :as html :refer-macros [html]] (:require [sablono.core :as html :refer-macros [html]]
[rum.core :as rum] [rum.core :as rum]
[uxbox.ui.util :as util] [uxbox.ui.mixins :as mx]
[uxbox.ui.keyboard :as k] [uxbox.ui.keyboard :as k]
[goog.events :as events]) [goog.events :as events])
(:import goog.events.EventType)) (:import goog.events.EventType))
@ -59,7 +59,7 @@
(render-lightbox params)]))) (render-lightbox params)])))
(def ^:static lightbox (def ^:static lightbox
(util/component (mx/component
{:name "lightbox" {:name "lightbox"
:render lightbox-render :render lightbox-render
:transfer-state lightbox-transfer-state :transfer-state lightbox-transfer-state

45
src/uxbox/ui/mixins.cljs
View file

@ -4,8 +4,43 @@
[cats.labs.lens :as l] [cats.labs.lens :as l]
[goog.dom.forms :as gforms])) [goog.dom.forms :as gforms]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Rum Sugar
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn component
[spec]
(let [name (or (:name spec)
(str (gensym "rum-")))
mixins (or (:mixins spec)
[])
spec (merge (dissoc spec :name :mixins)
(when-let [rfn (:render spec)]
{:render (fn [state]
[(apply rfn state (:rum/props state)) state])}))
cls (rum/build-class (conj mixins spec) name)
ctr (fn self
([] (self {}))
([& props]
(let [state {:rum/props props}]
(rum/element cls state nil))))]
(with-meta ctr {:rum/class cls})))
(defn ref-value
[own ref]
(let [component (-> own :rum/react-component)
ref-node (aget (.-refs component) ref)
dom-node (.findDOMNode js/ReactDOM ref-node)]
(.-value dom-node)))
(defn get-ref-dom
[own ref]
(let [component (-> own :rum/react-component)
ref-node (aget (.-refs component) ref)]
(.findDOMNode js/ReactDOM ref-node)))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Cursored & Lenses ;; Cursored Mixin
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn- cursored-key (defn- cursored-key
@ -63,6 +98,10 @@
{:did-mount cursored-did-mount {:did-mount cursored-did-mount
:will-unmount cursored-will-unmount}) :will-unmount cursored-will-unmount})
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Local Mixin
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn local (defn local
"Adds an atom to component’s state that can be used as local state. "Adds an atom to component’s state that can be used as local state.
Atom is stored under key `:rum/local`. Atom is stored under key `:rum/local`.
@ -85,6 +124,10 @@
(assoc state key local-state))) (assoc state key local-state)))
})) }))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Static Mixin
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(def static (def static
{:should-update {:should-update
(fn [old-state new-state] (fn [old-state new-state]

6
src/uxbox/ui/users.cljs
View file

@ -6,7 +6,7 @@
[uxbox.state :as s] [uxbox.state :as s]
[uxbox.ui.icons :as icons] [uxbox.ui.icons :as icons]
[uxbox.ui.navigation :as nav] [uxbox.ui.navigation :as nav]
[uxbox.ui.util :as util])) [uxbox.ui.mixins :as mx]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Menu ;; Menu
@ -34,7 +34,7 @@
[:span "Save & Exit"]]])) [:span "Save & Exit"]]]))
(def user-menu (def user-menu
(util/component (mx/component
{:render menu-render {:render menu-render
:name "user-menu" :name "user-menu"
:mixins []})) :mixins []}))
@ -65,7 +65,7 @@
(user-menu (:open @local))]))) (user-menu (:open @local))])))
(def user (def user
(util/component (mx/component
{:render user-render {:render user-render
:name "user" :name "user"
:mixins [rum/reactive (rum/local {:open false})]})) :mixins [rum/reactive (rum/local {:open false})]}))

62
src/uxbox/ui/util.cljs
View file

@ -1,62 +0,0 @@
(ns uxbox.ui.util
"A collection of sugar syntax for define react
components using rum libary."
(:refer-clojure :exclude [derive])
(:require [rum.core :as rum]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Rum Sugar
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn component
[spec]
(let [name (or (:name spec)
(str (gensym "rum-")))
mixins (or (:mixins spec)
[])
spec (merge (dissoc spec :name :mixins)
(when-let [rfn (:render spec)]
{:render (fn [state]
[(apply rfn state (:rum/props state)) state])}))
cls (rum/build-class (conj mixins spec) name)
ctr (fn self
([] (self {}))
([& props]
(let [state {:rum/props props}]
(rum/element cls state nil))))]
(with-meta ctr {:rum/class cls})))
(defn ref-value
[own ref]
(let [component (-> own :rum/react-component)
ref-node (aget (.-refs component) ref)
dom-node (.findDOMNode js/ReactDOM ref-node)]
(.-value dom-node)))
(defn get-ref-dom
[own ref]
(let [component (-> own :rum/react-component)
ref-node (aget (.-refs component) ref)]
(.findDOMNode js/ReactDOM ref-node)))
(def mount rum/mount)
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Color Conversion
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn hex->rgb
[^string data]
(some->> (re-find #"^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$" data)
(rest)
(mapv #(js/parseInt % 16))))
(defn rgb->hex
[[r g b]]
(letfn [(to-hex [c]
(let [hexdata (.toString c 16)]
(if (= (count hexdata) 1)
(str "0" hexdata)
hexdata)))]
(str "#" (to-hex r) (to-hex g) (to-hex b))))

5
src/uxbox/ui/workspace.cljs
View file

@ -7,7 +7,6 @@
[uxbox.state :as st] [uxbox.state :as st]
[uxbox.data.workspace :as dw] [uxbox.data.workspace :as dw]
[uxbox.ui.icons :as i] [uxbox.ui.icons :as i]
[uxbox.ui.util :as util]
[uxbox.ui.mixins :as mx] [uxbox.ui.mixins :as mx]
[uxbox.ui.workspace.base :as wb] [uxbox.ui.workspace.base :as wb]
[uxbox.ui.workspace.options :refer (element-opts)] [uxbox.ui.workspace.options :refer (element-opts)]
@ -35,7 +34,7 @@
[:tr [:td "y="] [:td y]]]]]))) [:tr [:td "y="] [:td y]]]]])))
(def coordinates (def coordinates
(util/component (mx/component
{:render coordenates-render {:render coordenates-render
:name "coordenates" :name "coordenates"
:mixins [rum/reactive]})) :mixins [rum/reactive]}))
@ -100,7 +99,7 @@
state)) state))
(def ^:static workspace (def ^:static workspace
(util/component (mx/component
{:render workspace-render {:render workspace-render
:will-mount workspace-will-mount :will-mount workspace-will-mount
:transfer-state workspace-transfer-state :transfer-state workspace-transfer-state

1
src/uxbox/ui/workspace/base.cljs
View file

@ -7,7 +7,6 @@
[uxbox.data.projects :as dp] [uxbox.data.projects :as dp]
[uxbox.data.workspace :as dw] [uxbox.data.workspace :as dw]
[uxbox.util.lens :as ul] [uxbox.util.lens :as ul]
[uxbox.ui.util :as util]
[goog.events :as events]) [goog.events :as events])
(:import goog.events.EventType)) (:import goog.events.EventType))

13
src/uxbox/ui/workspace/canvas.cljs
View file

@ -14,7 +14,6 @@
[uxbox.data.workspace :as dw] [uxbox.data.workspace :as dw]
[uxbox.ui.mixins :as mx] [uxbox.ui.mixins :as mx]
[uxbox.ui.dom :as dom] [uxbox.ui.dom :as dom]
[uxbox.ui.util :as util]
[uxbox.ui.workspace.base :as wb] [uxbox.ui.workspace.base :as wb]
[uxbox.ui.workspace.grid :refer (grid)] [uxbox.ui.workspace.grid :refer (grid)]
[uxbox.ui.workspace.options :refer (element-opts)]) [uxbox.ui.workspace.options :refer (element-opts)])
@ -39,7 +38,7 @@
{:x 0 :y 0 :width "100%" :height "100%" :fill "white"}])) {:x 0 :y 0 :width "100%" :height "100%" :fill "white"}]))
(def background (def background
(util/component (mx/component
{:render background-render {:render background-render
:name "background" :name "background"
:mixins [mx/static]})) :mixins [mx/static]}))
@ -60,7 +59,7 @@
:height height}])))) :height height}]))))
(def ^:static selrect (def ^:static selrect
(util/component (mx/component
{:render selrect-render {:render selrect-render
:name "selrect" :name "selrect"
:mixins [mx/static rum/reactive]})) :mixins [mx/static rum/reactive]}))
@ -117,7 +116,7 @@
{:cx (+ x width) :cy (+ y height)})]]])))) {:cx (+ x width) :cy (+ y height)})]]]))))
(def selected-shapes (def selected-shapes
(util/component (mx/component
{:render selected-shapes-render {:render selected-shapes-render
:name "selected-shapes" :name "selected-shapes"
:mixins [mx/static rum/reactive (mx/local {})]})) :mixins [mx/static rum/reactive (mx/local {})]}))
@ -169,7 +168,7 @@
{:cx (+ x width) :cy (+ y height)})]])])))) {:cx (+ x width) :cy (+ y height)})]])]))))
(def shape (def shape
(util/component (mx/component
{:render shape-render {:render shape-render
:name "shape" :name "shape"
:mixins [mx/static (mx/local {})]})) :mixins [mx/static (mx/local {})]}))
@ -188,7 +187,7 @@
(- y offset-y)]}] (- y offset-y)]}]
(rx/push! wb/mouse-b event)))] (rx/push! wb/mouse-b event)))]
(let [[page] (:rum/props own) (let [[page] (:rum/props own)
canvas (util/get-ref-dom own (str "canvas" (:id page))) canvas (mx/get-ref-dom own (str "canvas" (:id page)))
brect (.getBoundingClientRect canvas) brect (.getBoundingClientRect canvas)
brect [(.-left brect) (.-top brect)] brect [(.-left brect) (.-top brect)]
key (events/listen js/document EventType.MOUSEMOVE key (events/listen js/document EventType.MOUSEMOVE
@ -251,7 +250,7 @@
(selrect)]])))) (selrect)]]))))
(def canvas (def canvas
(util/component (mx/component
{:render canvas-render {:render canvas-render
:did-mount canvas-did-mount :did-mount canvas-did-mount
:will-unmount canvas-will-unmount :will-unmount canvas-will-unmount

6
src/uxbox/ui/workspace/colorpalette.cljs
View file

@ -9,10 +9,10 @@
[uxbox.data.workspace :as dw] [uxbox.data.workspace :as dw]
[uxbox.util.lens :as ul] [uxbox.util.lens :as ul]
[uxbox.util.data :refer (read-string)] [uxbox.util.data :refer (read-string)]
[uxbox.util.color :refer (hex->rgb)]
[uxbox.ui.workspace.base :as wb] [uxbox.ui.workspace.base :as wb]
[uxbox.ui.icons :as i] [uxbox.ui.icons :as i]
[uxbox.ui.dom :as dom] [uxbox.ui.dom :as dom]
[uxbox.ui.util :as util]
[uxbox.ui.mixins :as mx])) [uxbox.ui.mixins :as mx]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@ -65,7 +65,7 @@
[:span.left-arrow i/arrow-slide] [:span.left-arrow i/arrow-slide]
[:div.color-palette-content [:div.color-palette-content
(for [hex-color (:colors collection) (for [hex-color (:colors collection)
:let [rgb-vec (util/hex->rgb hex-color) :let [rgb-vec (hex->rgb hex-color)
rgb-color (apply str "" (interpose ", " rgb-vec))]] rgb-color (apply str "" (interpose ", " rgb-vec))]]
[:div.color-cell {:key (str hex-color) [:div.color-cell {:key (str hex-color)
:on-click #(select-color hex-color %)} :on-click #(select-color hex-color %)}
@ -139,7 +139,7 @@
;; [:span.color-text "+ Add color"]]] ;; [:span.color-text "+ Add color"]]]
(def ^:static colorpalette (def ^:static colorpalette
(util/component (mx/component
{:render colorpalette-render {:render colorpalette-render
:name "colorpalette" :name "colorpalette"
:mixins [mx/static rum/reactive :mixins [mx/static rum/reactive

3
src/uxbox/ui/workspace/grid.cljs
View file

@ -2,7 +2,6 @@
(:require [sablono.core :as html :refer-macros [html]] (:require [sablono.core :as html :refer-macros [html]]
[rum.core :as rum] [rum.core :as rum]
[uxbox.ui.mixins :as mx] [uxbox.ui.mixins :as mx]
[uxbox.ui.util :as util]
[uxbox.ui.workspace.base :as wb])) [uxbox.ui.workspace.base :as wb]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@ -78,7 +77,7 @@
(rum/with-key line (str "tick-" tick))))])))) (rum/with-key line (str "tick-" tick))))]))))
(def grid (def grid
(util/component (mx/component
{:render grid-render {:render grid-render
:name "grid" :name "grid"
:mixins [mx/static rum/reactive]})) :mixins [mx/static rum/reactive]}))

4
src/uxbox/ui/workspace/header.cljs
View file

@ -9,7 +9,7 @@
[uxbox.ui.icons :as i] [uxbox.ui.icons :as i]
[uxbox.ui.users :as ui.u] [uxbox.ui.users :as ui.u]
[uxbox.ui.navigation :as nav] [uxbox.ui.navigation :as nav]
[uxbox.ui.util :as util])) [uxbox.ui.mixins :as mx]))
(defn on-download-clicked (defn on-download-clicked
[event page] [event page]
@ -73,7 +73,7 @@
(ui.u/user)]))) (ui.u/user)])))
(def header (def header
(util/component (mx/component
{:render header-render {:render header-render
:name "workspace-header" :name "workspace-header"
:mixins [rum/reactive]})) :mixins [rum/reactive]}))

4
src/uxbox/ui/workspace/lateralmenu.cljs
View file

@ -7,7 +7,7 @@
[uxbox.data.workspace :as dw] [uxbox.data.workspace :as dw]
[uxbox.ui.workspace.base :as wb] [uxbox.ui.workspace.base :as wb]
[uxbox.ui.icons :as i] [uxbox.ui.icons :as i]
[uxbox.ui.util :as util])) [uxbox.ui.mixins :as mx]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Lateral Menu ;; Lateral Menu
@ -45,7 +45,7 @@
i/chat]]]]))) i/chat]]]])))
(def ^:static lateralmenu (def ^:static lateralmenu
(util/component (mx/component
{:render lateralmenu-render {:render lateralmenu-render
:name "lateralmenu" :name "lateralmenu"
:mixins [rum/reactive]})) :mixins [rum/reactive]}))

3
src/uxbox/ui/workspace/options.cljs
View file

@ -5,7 +5,6 @@
[uxbox.shapes :as shapes] [uxbox.shapes :as shapes]
[uxbox.data.workspace :as dw] [uxbox.data.workspace :as dw]
[uxbox.ui.icons :as i] [uxbox.ui.icons :as i]
[uxbox.ui.util :as util]
[uxbox.ui.mixins :as mx] [uxbox.ui.mixins :as mx]
[uxbox.ui.dom :as dom] [uxbox.ui.dom :as dom]
[uxbox.ui.workspace.base :as wb] [uxbox.ui.workspace.base :as wb]
@ -186,7 +185,7 @@
(-render-menu menu own shape))]))) (-render-menu menu own shape))])))
(def ^:static element-opts (def ^:static element-opts
(util/component (mx/component
{:render element-opts-render {:render element-opts-render
:name "element-opts" :name "element-opts"
:mixins [rum/reactive (mx/local {})]})) :mixins [rum/reactive (mx/local {})]}))

13
src/uxbox/ui/workspace/pagesmngr.cljs
View file

@ -5,12 +5,11 @@
[uxbox.rstore :as rs] [uxbox.rstore :as rs]
[uxbox.data.projects :as dp] [uxbox.data.projects :as dp]
[uxbox.data.workspace :as dw] [uxbox.data.workspace :as dw]
[uxbox.ui.workspace.base :as wb]
[uxbox.ui.keyboard :as k] [uxbox.ui.keyboard :as k]
[uxbox.ui.icons :as i] [uxbox.ui.icons :as i]
[uxbox.ui.mixins :as mx] [uxbox.ui.mixins :as mx]
[uxbox.ui.workspace.base :as wb] [uxbox.ui.dom :as dom]))
[uxbox.ui.dom :as dom]
[uxbox.ui.util :as util]))
(defn- page-item-render (defn- page-item-render
[own parent page numpages] [own parent page numpages]
@ -37,7 +36,7 @@
i/trash]]])))) i/trash]]]))))
(def page-item (def page-item
(util/component (mx/component
{:render page-item-render {:render page-item-render
:name "page-item" :name "page-item"
:mixins [rum/reactive]})) :mixins [rum/reactive]}))
@ -59,7 +58,7 @@
"+ Add new page"]]))) "+ Add new page"]])))
(def page-list (def page-list
(util/component (mx/component
{:render page-list-render {:render page-list-render
:name "page-list" :name "page-list"
:mixins [rum/reactive]})) :mixins [rum/reactive]}))
@ -108,7 +107,7 @@
"Cancel"]])))) "Cancel"]]))))
(def page-form (def page-form
(util/component (mx/component
{:render page-form-render {:render page-form-render
:name "page-form" :name "page-form"
:mixins [rum/reactive]})) :mixins [rum/reactive]}))
@ -127,7 +126,7 @@
(page-list local))]))) (page-list local))])))
(def pagesmngr (def pagesmngr
(util/component (mx/component
{:render pagesmngr-render {:render pagesmngr-render
:name "pagesmngr" :name "pagesmngr"
:mixins [rum/reactive (mx/local {:edit false :form {}})]})) :mixins [rum/reactive (mx/local {:edit false :form {}})]}))

7
src/uxbox/ui/workspace/rules.cljs
View file

@ -6,8 +6,7 @@
[uxbox.state :as s] [uxbox.state :as s]
[uxbox.ui.dom :as dom] [uxbox.ui.dom :as dom]
[uxbox.ui.workspace.base :as wb] [uxbox.ui.workspace.base :as wb]
[uxbox.ui.mixins :as mx] [uxbox.ui.mixins :as mx]))
[uxbox.ui.util :as util]))
(def ^:static zoom 1) (def ^:static zoom 1)
(def ^:static padding 20) (def ^:static padding 20)
@ -91,7 +90,7 @@
(h-line pos tick))]]))) (h-line pos tick))]])))
(def h-rule (def h-rule
(util/component (mx/component
{:render h-rule-render {:render h-rule-render
:name "h-rule" :name "h-rule"
:mixins [mx/static rum/reactive]})) :mixins [mx/static rum/reactive]}))
@ -113,7 +112,7 @@
(v-line pos tick))]]))) (v-line pos tick))]])))
(def v-rule (def v-rule
(util/component (mx/component
{:render v-rule-render {:render v-rule-render
:name "v-rule" :name "v-rule"
:mixins [mx/static rum/reactive]})) :mixins [mx/static rum/reactive]}))

3
src/uxbox/ui/workspace/sidebar.cljs
View file

@ -6,7 +6,6 @@
[uxbox.router :as r] [uxbox.router :as r]
[uxbox.rstore :as rs] [uxbox.rstore :as rs]
[uxbox.ui.mixins :as mx] [uxbox.ui.mixins :as mx]
[uxbox.ui.util :as util]
[uxbox.ui.workspace.base :as wb] [uxbox.ui.workspace.base :as wb]
[uxbox.ui.workspace.toolboxes :as toolboxes])) [uxbox.ui.workspace.toolboxes :as toolboxes]))
@ -29,7 +28,7 @@
(toolboxes/layers))]]))) (toolboxes/layers))]])))
(def aside (def aside
(util/component (mx/component
{:render aside-render {:render aside-render
:name "aside" :name "aside"
:mixins [rum/reactive mx/static]})) :mixins [rum/reactive mx/static]}))

13
src/uxbox/ui/workspace/toolboxes.cljs
View file

@ -12,8 +12,7 @@
[uxbox.ui.workspace.base :as wb] [uxbox.ui.workspace.base :as wb]
[uxbox.ui.icons :as i] [uxbox.ui.icons :as i]
[uxbox.ui.mixins :as mx] [uxbox.ui.mixins :as mx]
[uxbox.ui.dom :as dom] [uxbox.ui.dom :as dom]))
[uxbox.ui.util :as util]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Lenses ;; Lenses
@ -79,7 +78,7 @@
(:icon props)])]]))) (:icon props)])]])))
(def ^:static draw-tools (def ^:static draw-tools
(util/component (mx/component
{:render draw-tools-render {:render draw-tools-render
:name "draw-tools" :name "draw-tools"
:mixins [mx/static rum/reactive]})) :mixins [mx/static rum/reactive]}))
@ -102,7 +101,7 @@
(:id item))]]))) (:id item))]])))
(def ^:static ^:private layer-element (def ^:static ^:private layer-element
(util/component (mx/component
{:render layer-element-render {:render layer-element-render
:name "layer-element" :name "layer-element"
:mixins [mx/static]})) :mixins [mx/static]}))
@ -171,7 +170,7 @@
(def ^:static layers (def ^:static layers
(util/component (mx/component
{:render layers-render {:render layers-render
:name "layers" :name "layers"
:mixins [rum/reactive]})) :mixins [rum/reactive]}))
@ -198,7 +197,7 @@
(shapes/render icon)) (shapes/render icon))
(def ^:static ^:private icon-wrapper (def ^:static ^:private icon-wrapper
(util/component (mx/component
{:render icon-wrapper-render {:render icon-wrapper-render
:name "icon-wrapper" :name "icon-wrapper"
:mixins [mx/static]})) :mixins [mx/static]}))
@ -236,7 +235,7 @@
(icon-wrapper icon)])]]))) (icon-wrapper icon)])]])))
(def ^:static icons (def ^:static icons
(util/component (mx/component
{:render icons-render {:render icons-render
:name "icons-toolbox" :name "icons-toolbox"
:mixins [rum/reactive :mixins [rum/reactive

3
src/uxbox/ui/workspace/workarea.cljs
View file

@ -5,7 +5,6 @@
[uxbox.rstore :as rs] [uxbox.rstore :as rs]
[uxbox.state :as s] [uxbox.state :as s]
[uxbox.ui.mixins :as mx] [uxbox.ui.mixins :as mx]
[uxbox.ui.util :as util]
[uxbox.data.workspace :as dw] [uxbox.data.workspace :as dw]
[uxbox.ui.workspace.canvas :refer (canvas)] [uxbox.ui.workspace.canvas :refer (canvas)]
[uxbox.ui.workspace.grid :refer (grid)] [uxbox.ui.workspace.grid :refer (grid)]
@ -45,7 +44,7 @@
(canvas page))]]))) (canvas page))]])))
(def viewport (def viewport
(util/component (mx/component
{:render viewport-render {:render viewport-render
:name "viewport" :name "viewport"
:mixins [rum/reactive]})) :mixins [rum/reactive]}))

17
src/uxbox/util/color.cljs Normal file
View file

@ -0,0 +1,17 @@
(ns uxbox.util.color
"Color conversion utils.")
(defn hex->rgb
[^string data]
(some->> (re-find #"^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$" data)
(rest)
(mapv #(js/parseInt % 16))))
(defn rgb->hex
[[r g b]]
(letfn [(to-hex [c]
(let [hexdata (.toString c 16)]
(if (= (count hexdata) 1)
(str "0" hexdata)
hexdata)))]
(str "#" (to-hex r) (to-hex g) (to-hex b))))