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

feat(frontend): add many adaptations to rumext breaking changes

Browse source
This commit is contained in:
Andrey Antukh 2019-07-18 12:30:20 +02:00
parent 9ddd9f317d
commit 321c8d14e1
14 changed files with 149 additions and 174 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -68,7 +68,7 @@
(defn- on-navigate (defn- on-navigate
[router path] [router path]
(let [match (rt/match router path)] (let [match (rt/match router path)]
(prn "on-navigate" path match) ;; (prn "on-navigate" path match)
(cond (cond
(and (= path "") (nil? match)) (and (= path "") (nil? match))
(html-history/set-path! "/dashboard/projects") (html-history/set-path! "/dashboard/projects")

50
frontend/src/uxbox/main/data/workspace.cljs
View file

@ -5,31 +5,31 @@
;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz> ;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
(ns uxbox.main.data.workspace (ns uxbox.main.data.workspace
(:require [cljs.spec.alpha :as s] (:require
[beicon.core :as rx] [beicon.core :as rx]
[potok.core :as ptk] [potok.core :as ptk]
[uxbox.main.store :as st] [uxbox.main.store :as st]
[uxbox.main.constants :as c] [uxbox.main.constants :as c]
[uxbox.main.lenses :as ul] [uxbox.main.lenses :as ul]
[uxbox.main.workers :as uwrk] [uxbox.main.workers :as uwrk]
[uxbox.main.data.projects :as dp] [uxbox.main.data.projects :as dp]
[uxbox.main.data.pages :as udp] [uxbox.main.data.pages :as udp]
[uxbox.main.data.shapes :as uds] [uxbox.main.data.shapes :as uds]
[uxbox.main.data.icons :as udi] [uxbox.main.data.icons :as udi]
[uxbox.main.data.shapes-impl :as shimpl] [uxbox.main.data.shapes-impl :as shimpl]
[uxbox.main.data.lightbox :as udl] [uxbox.main.data.lightbox :as udl]
[uxbox.main.data.history :as udh] [uxbox.main.data.history :as udh]
[uxbox.main.data.workspace.scroll :as wscroll] [uxbox.main.data.workspace.scroll :as wscroll]
[uxbox.main.data.workspace.drawing :as wdrawing] [uxbox.main.data.workspace.drawing :as wdrawing]
[uxbox.main.data.workspace.selrect :as wselrect] [uxbox.main.data.workspace.selrect :as wselrect]
[uxbox.main.data.workspace.ruler :as wruler] [uxbox.main.data.workspace.ruler :as wruler]
[uxbox.util.uuid :as uuid] [uxbox.util.uuid :as uuid]
[uxbox.util.spec :as us] [uxbox.util.spec :as us]
[uxbox.util.forms :as sc] [uxbox.util.forms :as sc]
[uxbox.util.geom.point :as gpt] [uxbox.util.geom.point :as gpt]
[uxbox.util.time :as dt] [uxbox.util.time :as dt]
[uxbox.util.math :as mth] [uxbox.util.math :as mth]
[uxbox.util.data :refer (index-of)])) [uxbox.util.data :refer (index-of)]))
;; --- Expose inner functions ;; --- Expose inner functions

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

@ -31,12 +31,6 @@
[uxbox.util.router :as rt] [uxbox.util.router :as rt]
[uxbox.util.timers :as ts])) [uxbox.util.timers :as ts]))
;; --- Refs
(def route-ref
(-> (l/key :route)
(l/derive st/state)))
;; --- Routes ;; --- Routes
(def routes (def routes
@ -59,56 +53,53 @@
;; --- Main App (Component) ;; --- Main App (Component)
(mx/defc app (defn- parse-dashboard-params
{:mixins [mx/reactive]} [route section]
[] (let [{:keys [id type]} (get-in route [:params :query])
(let [route (mx/react route-ref)] id (cond
(case (get-in route [:data :name]) (str/digits? id) (parse-int id)
:auth/login (auth/login-page) (uuid-str? id) (uuid id)
:auth/register (auth/register-page) :else nil)
:auth/recovery-request (auth/recovery-request-page) type (when (str/alpha? type) (keyword type))]
{:section section
:id id
:type type}))
:auth/recovery
(let [token (get-in route [:params :path :token])]
(auth/recovery-page token))
:dashboard/projects (dashboard/projects-page) (mx/def app
:settings/profile (settings/profile-page) :mixins [mx/reactive]
:settings/password (settings/password-page)
:settings/notifications (settings/notifications-page)
;; ;; :dashboard/elements (dashboard/elements-page)
:dashboard/icons :init
(let [{:keys [id type]} (get-in route [:params :query]) (fn [own props]
id (cond (assoc own ::route-ref (l/derive (l/key :route) st/state)))
(str/digits? id) (parse-int id)
(uuid-str? id) (uuid id)
:else nil)
type (when (str/alpha? type) (keyword type))]
(dashboard/icons-page type id))
:dashboard/images :render
(let [{:keys [id type]} (get-in route [:params :query]) (fn [own props]
id (cond (let [route (mx/react (::route-ref own))]
(str/digits? id) (parse-int id) (case (get-in route [:data :name])
(uuid-str? id) (uuid id) :auth/login (auth/login-page)
:else nil) :auth/register (auth/register-page)
type (when (str/alpha? type) (keyword type))] :auth/recovery-request (auth/recovery-request-page)
(dashboard/images-page type id))
:dashboard/colors :auth/recovery
(let [{:keys [id type]} (get-in route [:params :query]) (let [token (get-in route [:params :path :token])]
type (when (str/alpha? type) (keyword type)) (auth/recovery-page token))
id (cond
(str/digits? id) (parse-int id)
(uuid-str? id) (uuid id)
:else nil)]
(dashboard/colors-page type id))
:workspace/page :settings/profile (settings/profile-page)
(let [projectid (uuid (get-in route [:params :path :project])) :settings/password (settings/password-page)
pageid (uuid (get-in route [:params :path :page]))] :settings/notifications (settings/notifications-page)
(workspace projectid pageid))
nil :dashboard/projects (dashboard/dashboard {:section :projects})
))) :dashboard/icons (-> (parse-dashboard-params route :icons)
(dashboard/dashboard))
:dashboard/images (-> (parse-dashboard-params route :images)
(dashboard/dashboard))
:dashboard/colors (-> (parse-dashboard-params route :colors)
(dashboard/dashboard))
:workspace/page
(let [project (uuid (get-in route [:params :path :project]))
page (uuid (get-in route [:params :path :page]))]
(workspace {:project project :page page}))
nil
))))

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

@ -89,7 +89,7 @@
(mx/defc login-page (mx/defc login-page
{:mixins [mx/static (fm/clear-mixin st/store :login)] {:mixins [mx/static (fm/clear-mixin st/store :login)]
:will-mount (fn [own] :init (fn [own]
(when @st/auth-ref (when @st/auth-ref
(st/emit! (rt/navigate :dashboard/projects))) (st/emit! (rt/navigate :dashboard/projects)))
own)} own)}

35
frontend/src/uxbox/main/ui/auth/recovery.cljs
View file

@ -2,23 +2,24 @@
;; License, v. 2.0. If a copy of the MPL was not distributed with this ;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/. ;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;; ;;
;; Copyright (c) 2015-2017 Andrey Antukh <niwi@niwi.nz>
;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com> ;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
;; Copyright (c) 2015-2019 Andrey Antukh <niwi@niwi.nz>
(ns uxbox.main.ui.auth.recovery (ns uxbox.main.ui.auth.recovery
(:require [cljs.spec.alpha :as s :include-macros true] (:require
[lentes.core :as l] [cljs.spec.alpha :as s :include-macros true]
[cuerdas.core :as str] [cuerdas.core :as str]
[uxbox.builtins.icons :as i] [lentes.core :as l]
[uxbox.main.store :as st] [rumext.core :as mx :include-macros true]
[uxbox.main.data.auth :as uda] [uxbox.builtins.icons :as i]
[uxbox.main.ui.messages :refer [messages-widget]] [uxbox.main.data.auth :as uda]
[uxbox.main.ui.navigation :as nav] [uxbox.main.store :as st]
[uxbox.util.i18n :refer (tr)] [uxbox.main.ui.messages :refer [messages-widget]]
[uxbox.util.dom :as dom] [uxbox.main.ui.navigation :as nav]
[uxbox.util.forms :as fm] [uxbox.util.dom :as dom]
[rumext.core :as mx :include-macros true] [uxbox.util.forms :as fm]
[uxbox.util.router :as rt])) [uxbox.util.i18n :refer (tr)]
[uxbox.util.router :as rt]))
(def form-data (fm/focus-data :recovery st/state)) (def form-data (fm/focus-data :recovery st/state))
(def form-errors (fm/focus-errors :recovery st/state)) (def form-errors (fm/focus-errors :recovery st/state))
@ -64,15 +65,15 @@
;; --- Recovery Page ;; --- Recovery Page
(defn- recovery-page-will-mount (defn- recovery-page-init
[own] [own]
(let [[token] (:rum/args own)] (let [[token] (::mx/args own)]
(st/emit! (uda/validate-recovery-token token)) (st/emit! (uda/validate-recovery-token token))
own)) own))
(mx/defc recovery-page (mx/defc recovery-page
{:mixins [mx/static (fm/clear-mixin st/store :recovery)] {:mixins [mx/static (fm/clear-mixin st/store :recovery)]
:will-mount recovery-page-will-mount} :init recovery-page-init}
[token] [token]
[:div.login [:div.login
[:div.login-body [:div.login-body

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

@ -102,7 +102,7 @@
(mx/defcs colorpicker (mx/defcs colorpicker
{:mixins [mx/static (mx/local)]} {:mixins [mx/static (mx/local)]}
[{:keys [rum/local] :as own} & {:keys [value on-change theme] [{:keys [::mx/local] :as own} & {:keys [value on-change theme]
:or {value "#d4edfb" theme :default}}] :or {value "#d4edfb" theme :default}}]
(let [value-rgb (color/hex->rgb value) (let [value-rgb (color/hex->rgb value)
classes (case theme classes (case theme

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

@ -33,7 +33,7 @@
(when (dom/equals? parent current) (when (dom/equals? parent current)
(udl/close!)))) (udl/close!))))
(defn- lightbox-will-mount (defn- lightbox-init
[own] [own]
(let [key (events/listen js/document (let [key (events/listen js/document
EventType.KEYDOWN EventType.KEYDOWN
@ -47,7 +47,7 @@
(mx/defcs lightbox (mx/defcs lightbox
{:mixins [mx/reactive] {:mixins [mx/reactive]
:will-mount lightbox-will-mount :init lightbox-init
:will-unmount lightbox-will-umount} :will-unmount lightbox-will-umount}
[own] [own]
(let [data (mx/react lightbox-ref) (let [data (mx/react lightbox-ref)

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

@ -31,10 +31,10 @@
(mx/defcs image-component (mx/defcs image-component
{:mixins [mx/static mx/reactive] {:mixins [mx/static mx/reactive]
:will-mount (fn [own] :init (fn [own]
;; TODO: maybe do it conditionally ;; TODO: maybe do it conditionally
;; (only fetch when it's not fetched) ;; (only fetch when it's not fetched)
(when-let [id (-> own :rum/args first :image)] (when-let [id (-> own ::mx/props first :image)]
(st/emit! (udi/fetch-image id))) (st/emit! (udi/fetch-image id)))
own)} own)}
[own {:keys [id image] :as shape}] [own {:keys [id image] :as shape}]

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

@ -120,7 +120,6 @@
:cy cy}]) :cy cy}])
(mx/defc controls (mx/defc controls
{:mixins [mx/static]}
[{:keys [x1 y1 width height] :as shape} zoom on-mouse-down] [{:keys [x1 y1 width height] :as shape} zoom on-mouse-down]
(let [radius (if (> (max width height) handler-size-threshold) 6.0 4.0)] (let [radius (if (> (max width height) handler-size-threshold) 6.0 4.0)]
[:g.controls [:g.controls
@ -226,7 +225,6 @@
(controls selection zoom on-click))) (controls selection zoom on-click)))
(mx/defc single-selection-handlers (mx/defc single-selection-handlers
{:mixins [mx/static]}
[{:keys [id] :as shape} zoom] [{:keys [id] :as shape} zoom]
(let [on-click #(do (dom/stop-propagation %2) (let [on-click #(do (dom/stop-propagation %2)
(start-resize %1 #{id} shape)) (start-resize %1 #{id} shape))
@ -247,35 +245,37 @@
:stroke-opacity "0.5" :stroke-opacity "0.5"
:fill "transparent"}}]])) :fill "transparent"}}]]))
(mx/defc selection-handlers (mx/def selection-handlers
{:mixins [mx/reactive mx/static]} :mixins [mx/reactive mx/static]
[] :render
(let [shapes (mx/react selected-shapes-ref) (fn [own props]
modifiers (mx/react selected-modifers-ref) (let [shapes (mx/react selected-shapes-ref)
;; Edition is a workspace global flag modifiers (mx/react selected-modifers-ref)
;; because only one shape can be on ;; Edition is a workspace global flag
;; the edition mode. ;; because only one shape can be on
edition? (mx/react refs/selected-edition) ;; the edition mode.
zoom (mx/react refs/selected-zoom) edition? (mx/react refs/selected-edition)
num (count shapes) zoom (mx/react refs/selected-zoom)
{:keys [id type] :as shape} (first shapes)] num (count shapes)
(cond {:keys [id type] :as shape} (first shapes)]
(zero? num)
nil
(> num 1) (cond
(multiple-selection-handlers shapes modifiers zoom) (zero? num)
nil
(and (= type :text) edition?) (> num 1)
(-> (assoc shape :modifiers (get modifiers id)) (multiple-selection-handlers shapes modifiers zoom)
(text-edition-selection-handlers zoom))
(= type :path) (and (= type :text) edition?)
(if (= @refs/selected-edition (:id shape))
(path-edition-selection-handlers shape zoom)
(-> (assoc shape :modifiers (get modifiers id)) (-> (assoc shape :modifiers (get modifiers id))
(single-selection-handlers zoom))) (text-edition-selection-handlers zoom))
:else (= type :path)
(-> (assoc shape :modifiers (get modifiers id)) (if (= @refs/selected-edition (:id shape))
(single-selection-handlers zoom))))) (path-edition-selection-handlers shape zoom)
(-> (assoc shape :modifiers (get modifiers id))
(single-selection-handlers zoom)))
:else
(-> (assoc shape :modifiers (get modifiers id))
(single-selection-handlers zoom))))))

18
frontend/src/uxbox/main/ui/shapes/text.cljs
View file

@ -106,7 +106,7 @@
(defn- text-shape-edit-did-mount (defn- text-shape-edit-did-mount
[own] [own]
(let [[shape] (:rum/args own) (let [[shape] (::mx/props own)
dom (mx/ref-node own "container")] dom (mx/ref-node own "container")]
(set! (.-textContent dom) (:content shape "")) (set! (.-textContent dom) (:content shape ""))
(.focus dom) (.focus dom)
@ -140,25 +140,15 @@
(defn text-shape-wrapper-did-mount (defn text-shape-wrapper-did-mount
[own] [own]
(let [[shape] (:rum/args own) (let [[shape] (::mx/props own)
dom (mx/ref-node own "fobject") dom (mx/ref-node own "fobject")
html (dom/render-to-html (text-shape-html shape))] html (dom/render-to-html (text-shape-html shape))]
(set! (.-innerHTML dom) html)) (set! (.-innerHTML dom) html))
own) own)
(defn text-shape-wrapper-did-remount
[old own]
(let [[old-shape] (:rum/args old)
[shape] (:rum/args own)]
(when (not= shape old-shape)
(let [dom (mx/ref-node own "fobject")
html (dom/render-to-html (text-shape-html shape))]
(set! (.-innerHTML dom) html)))
own))
(mx/defc text-shape-wrapper (mx/defc text-shape-wrapper
{:did-mount text-shape-wrapper-did-mount {:did-mount text-shape-wrapper-did-mount
:did-remount text-shape-wrapper-did-remount} :key-fn #(pr-str %1)}
[{:keys [id modifiers] :as shape}] [{:keys [id modifiers] :as shape}]
(let [{:keys [displacement resize]} modifiers (let [{:keys [displacement resize]} modifiers
xfmt (cond-> (gmt/matrix) xfmt (cond-> (gmt/matrix)
@ -188,7 +178,7 @@
(mx/defc text-shape (mx/defc text-shape
{:mixins [mx/static] {:mixins [mx/static]
:did-mount text-shape-wrapper-did-mount :did-mount text-shape-wrapper-did-mount
:did-remount text-shape-wrapper-did-remount} :key-fn #(pr-str %1)}
[{:keys [id content modifiers] :as shape}] [{:keys [id content modifiers] :as shape}]
(let [{:keys [displacement resize]} modifiers (let [{:keys [displacement resize]} modifiers
xfmt (cond-> (gmt/matrix) xfmt (cond-> (gmt/matrix)

27
frontend/src/uxbox/main/ui/users.cljs
View file

@ -2,20 +2,21 @@
;; License, v. 2.0. If a copy of the MPL was not distributed with this ;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/. ;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;; ;;
;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz> ;; Copyright (c) 2016-2019 Andrey Antukh <niwi@niwi.nz>
(ns uxbox.main.ui.users (ns uxbox.main.ui.users
(:require [cuerdas.core :as str] (:require
[lentes.core :as l] [cuerdas.core :as str]
[potok.core :as ptk] [lentes.core :as l]
[uxbox.main.store :as st] [potok.core :as ptk]
[uxbox.main.data.auth :as da] [rumext.core :as mx :include-macros true]
[uxbox.main.data.lightbox :as udl] [uxbox.builtins.icons :as i]
[uxbox.builtins.icons :as i] [uxbox.main.data.auth :as da]
[uxbox.main.ui.navigation :as nav] [uxbox.main.data.lightbox :as udl]
[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.util.i18n :refer (tr)]
[uxbox.util.router :as rt]))
;; --- User Menu ;; --- User Menu
@ -46,7 +47,7 @@
{:mixins [mx/static mx/reactive (mx/local {:open false})]} {:mixins [mx/static mx/reactive (mx/local {:open false})]}
[own] [own]
(let [profile (mx/react profile-ref) (let [profile (mx/react profile-ref)
local (:rum/local own) local (::mx/local own)
photo (if (str/empty? (:photo profile "")) photo (if (str/empty? (:photo profile ""))
"/images/avatar.jpg" "/images/avatar.jpg"
(:photo profile))] (:photo profile))]

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

@ -39,7 +39,7 @@
(when (dom/equals? parent current) (when (dom/equals? parent current)
(udl/close!)))) (udl/close!))))
(defn- lightbox-will-mount (defn- lightbox-init
[own] [own]
(let [key (events/listen js/document (let [key (events/listen js/document
EventType.KEYDOWN EventType.KEYDOWN
@ -53,7 +53,7 @@
(mx/defcs lightbox (mx/defcs lightbox
{:mixins [mx/reactive] {:mixins [mx/reactive]
:will-mount lightbox-will-mount :init lightbox-init
:will-unmount lightbox-will-umount} :will-unmount lightbox-will-umount}
[own] [own]
(let [data (mx/react lightbox-ref) (let [data (mx/react lightbox-ref)

16
frontend/src/uxbox/view/ui/viewer.cljs
View file

@ -31,24 +31,16 @@
;; --- Component ;; --- Component
(defn- viewer-page-will-mount (defn- viewer-page-init
[own] [own]
(let [[token] (:rum/args own)] (let [[token] (::mx/args own)]
(st/emit! (dv/initialize token)) (st/emit! (dv/initialize token))
own)) own))
(defn- viewer-page-did-remount
[oldown own]
(let [[old-token] (:rum/args oldown)
[new-token] (:rum/args own)]
(when (not= old-token new-token)
(st/emit! (dv/initialize new-token)))
own))
(mx/defc viewer-page (mx/defc viewer-page
{:mixins [mx/static mx/reactive] {:mixins [mx/static mx/reactive]
:will-mount viewer-page-will-mount :init viewer-page-init
:did-remount viewer-page-did-remount} :key-fn vector}
[token index id] [token index id]
(let [{:keys [project pages flags]} (mx/react state-ref) (let [{:keys [project pages flags]} (mx/react state-ref)
sitemap? (contains? flags :sitemap)] sitemap? (contains? flags :sitemap)]

6
frontend/src/uxbox/view/ui/viewer/shapes.cljs
View file

@ -36,7 +36,7 @@
(defn- interactions-wrapper-did-mount (defn- interactions-wrapper-did-mount
[own] [own]
(let [dom (mx/dom-node own) (let [dom (mx/dom-node own)
shape (first (:rum/args own)) shape (first (::mx/args own))
evnts (itx/build-events shape) evnts (itx/build-events shape)
keys (reduce (fn [acc [evt callback]] keys (reduce (fn [acc [evt callback]]
(conj acc (events/listen dom evt callback))) (conj acc (events/listen dom evt callback)))
@ -81,8 +81,8 @@
(mx/defc image-shape-wrapper (mx/defc image-shape-wrapper
{:mixins [mx/static mx/reactive] {:mixins [mx/static mx/reactive]
:will-mount (fn [own] :init (fn [own]
(when-let [image-id (-> own :rum/args first :image)] (when-let [image-id (-> own ::mx/args first :image)]
(st/emit! (udv/fetch-image image-id))) (st/emit! (udv/fetch-image image-id)))
own)} own)}
[{:keys [image] :as item}] [{:keys [image] :as item}]