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

♻️ More code refactor on workspace.

Browse source
This commit is contained in:
Andrey Antukh 2019-07-24 11:36:09 +02:00
parent 2a8c1d5f03
commit 980d23c370
8 changed files with 81 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,6 +8,7 @@
(:require (:require
[beicon.core :as rx] [beicon.core :as rx]
[potok.core :as ptk] [potok.core :as ptk]
[uxbox.config :as cfg]
[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]
@ -29,7 +30,7 @@
[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

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

@ -117,7 +117,7 @@
:workspace/page :workspace/page
(let [project (uuid (get-in route [:params :path :project])) (let [project (uuid (get-in route [:params :path :project]))
page (uuid (get-in route [:params :path :page]))] page (uuid (get-in route [:params :path :page]))]
[:& workspace {:project project :page page}]) [:& workspace {:project project :page page :key page}])
nil nil
)))) ))))

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

@ -1,4 +1,6 @@
(ns uxbox.main.ui.navigation (ns uxbox.main.ui.navigation
;; TODO: deprecated
(:require [rumext.alpha :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]))

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

@ -61,15 +61,16 @@
(scroll/scroll-to-point dom mouse-point scroll-position)))) (scroll/scroll-to-point dom mouse-point scroll-position))))
(mf/def workspace (mf/def workspace
:key-fn identity :mixins #{mf/reactive
:mixins #{mf/memo
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 (mf/create-ref))) (assoc own
::canvas (mf/create-ref)
::page-ref (-> (l/in [:pages page])
(l/derive st/state))))
:did-mount :did-mount
(fn [own] (fn [own]
@ -91,8 +92,9 @@
:render :render
(fn [own props] (fn [own props]
(let [flags (mf/deref refs/flags) (let [flags (mf/deref refs/flags)
project-id (get props :project) page (mf/deref (::page-ref own))
page-id (get props :page) ;; project-id (get props :project)
;; page-id (get 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
@ -103,7 +105,9 @@
:scrolling (:viewport-positionig workspace))] :scrolling (:viewport-positionig workspace))]
[:* [:*
(messages-widget) (messages-widget)
(header) [:& header {:page page
:flags flags
:key (:id page)}]
(colorpalette) (colorpalette)
[:main.main-content [:main.main-content
@ -116,20 +120,20 @@
;; Rules ;; Rules
(when (contains? flags :rules) (when (contains? flags :rules)
(horizontal-rule)) [:& horizontal-rule])
(when (contains? flags :rules) (when (contains? flags :rules)
(vertical-rule)) [:& vertical-rule])
;; Canvas ;; Canvas
[:section.workspace-canvas {:id "workspace-canvas" [:section.workspace-canvas {:id "workspace-canvas"
:ref (::canvas own)} :ref (::canvas own)}
[:& viewport {:project project-id [:& viewport {:page page
:page page-id :flags flags
:key [project-id page-id]}]]] :key (:id page)}]]]
;; Aside ;; Aside
(when left-sidebar? (when left-sidebar?
(left-sidebar {:flags flags :page-id page-id})) [:& left-sidebar {:flags flags :page-id (:id page)}])
(when right-sidebar? (when right-sidebar?
(right-sidebar {:flags flags :page-id page-id}))]]))) [:& right-sidebar {:flags flags :page-id (:id page)}])]])))

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

@ -135,11 +135,8 @@
:mixins [mf/reactive] :mixins [mf/reactive]
:init :init
(fn [own {:keys [page project] :as props}] (fn [own props]
(assoc own (assoc own ::viewport (mf/create-ref)))
::viewport (mf/create-ref)
::page-ref (-> (l/in [:pages page])
(l/derive st/state))))
:did-mount :did-mount
(fn [own] (fn [own]
@ -215,10 +212,8 @@
;; TODO: use an ad-hoc ref for required keys from workspace state ;; TODO: use an ad-hoc ref for required keys from workspace state
:render :render
(fn [own props] (fn [own {:keys [page flags] :as props}]
(let [page (mf/deref (::page-ref own)) (let [drawing (mf/react refs/selected-drawing-tool)
flags (mf/react refs/flags)
drawing (mf/react refs/selected-drawing-tool)
tooltip (or (mf/react refs/selected-tooltip) tooltip (or (mf/react refs/selected-tooltip)
(get-shape-tooltip drawing)) (get-shape-tooltip drawing))
zoom (or (mf/react refs/selected-zoom) 1)] zoom (or (mf/react refs/selected-zoom) 1)]

97
frontend/src/uxbox/main/ui/workspace/header.cljs
View file

@ -6,73 +6,59 @@
;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com> ;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
(ns uxbox.main.ui.workspace.header (ns uxbox.main.ui.workspace.header
(:require [beicon.core :as rx] (:require
[uxbox.config :as cfg] [rumext.core :as mx]
[potok.core :as ptk] [rumext.alpha :as mf]
[uxbox.builtins.icons :as i] [uxbox.builtins.icons :as i]
[uxbox.main.store :as st] [uxbox.config :as cfg]
[uxbox.main.refs :as refs] [uxbox.main.data.history :as udh]
[uxbox.main.data.workspace :as dw] [uxbox.main.data.lightbox :as udl]
[uxbox.main.data.pages :as udp] [uxbox.main.data.pages :as udp]
[uxbox.main.data.history :as udh] [uxbox.main.data.undo :as udu]
[uxbox.main.data.undo :as udu] [uxbox.main.data.workspace :as dw]
[uxbox.main.data.lightbox :as udl] [uxbox.main.refs :as refs]
[uxbox.main.ui.workspace.clipboard] [uxbox.main.store :as st]
[uxbox.main.ui.users :refer [user]] [uxbox.main.ui.users :refer [user]]
[uxbox.main.ui.navigation :as nav] [uxbox.main.ui.workspace.clipboard]
[uxbox.util.router :as r] [uxbox.util.data :refer [index-of]]
[uxbox.util.data :refer [index-of]] [uxbox.util.geom.point :as gpt]
[uxbox.util.geom.point :as gpt] [uxbox.util.math :as mth]
[uxbox.util.math :as mth] [uxbox.util.router :as rt]))
[rumext.core :as mx :include-macros true]))
;; --- Zoom Widget ;; --- Zoom Widget
(mx/defc zoom-widget (mf/defc zoom-widget
{:mixins [mx/reactive mx/static]} {:wrap [mf/reactive*]}
[] [props]
(let [zoom (mx/react refs/selected-zoom) (let [zoom (mf/react refs/selected-zoom)
increase #(st/emit! (dw/increase-zoom)) increase #(st/emit! (dw/increase-zoom))
decrease #(st/emit! (dw/decrease-zoom))] decrease #(st/emit! (dw/decrease-zoom))]
[:ul.options-view {} [:ul.options-view
[:li.zoom-input {} [:li.zoom-input
[:span.add-zoom {:on-click decrease} "-"] [:span.add-zoom {:on-click decrease} "-"]
[:span {} (str (mth/round (* 100 zoom)) "%")] [:span {} (str (mth/round (* 100 zoom)) "%")]
[:span.remove-zoom {:on-click increase} "+"]]])) [:span.remove-zoom {:on-click increase} "+"]]]))
;; --- Header Component ;; --- Header Component
(defn on-view-clicked (mf/defc header
[event project page] [{:keys [page flags] :as props}]
(let [token (:share-token project) (let [toggle #(st/emit! (dw/toggle-flag %))
pages (deref refs/selected-project-pages)
index (index-of pages page)
rval (rand-int 1000000)
url (str cfg/viewurl "?v=" rval "#/preview/" token "/" index)]
(st/emit! (udp/persist-page (:id page) #(js/open url "new tab" "")))))
(mx/defc header
{:mixins [mx/static mx/reactive]}
[]
(let [project (mx/react refs/selected-project)
page (mx/react refs/selected-page)
flags (mx/react refs/flags)
toggle #(st/emit! (dw/toggle-flag %))
on-undo #(st/emit! (udu/undo)) on-undo #(st/emit! (udu/undo))
on-redo #(st/emit! (udu/redo)) on-redo #(st/emit! (udu/redo))
on-image #(udl/open! :import-image) on-image #(udl/open! :import-image)
on-download #(udl/open! :download)] on-download #(udl/open! :download)]
[:header#workspace-bar.workspace-bar {} [:header#workspace-bar.workspace-bar
[:div.main-icon {} [:div.main-icon
(nav/link (r/route-for :dashboard/projects) i/logo-icon)] [:a {:on-click #(st/emit! (rt/nav :dashboard/projects))} i/logo-icon]]
[:div.project-tree-btn [:div.project-tree-btn
{:alt "Sitemap (Ctrl + Shift + M)" {:alt "Sitemap (Ctrl + Shift + M)"
:class (when (contains? flags :sitemap) "selected") :class (when (contains? flags :sitemap) "selected")
:on-click (partial toggle :sitemap)} :on-click (partial toggle :sitemap)}
i/project-tree i/project-tree
[:span {} (:name page)]] [:span {} (:name page)]]
[:div.workspace-options {} [:div.workspace-options
[:ul.options-btn {} [:ul.options-btn
[:li.tooltip.tooltip-bottom [:li.tooltip.tooltip-bottom
{:alt "Draw tools (Ctrl + Shift + S)" {:alt "Draw tools (Ctrl + Shift + S)"
:class (when (contains? flags :drawtools) "selected") :class (when (contains? flags :drawtools) "selected")
@ -103,7 +89,7 @@
:class (when (contains? flags :document-history) "selected") :class (when (contains? flags :document-history) "selected")
:on-click (partial toggle :document-history)} :on-click (partial toggle :document-history)}
i/undo-history]] i/undo-history]]
[:ul.options-btn {} [:ul.options-btn
[:li.tooltip.tooltip-bottom [:li.tooltip.tooltip-bottom
{:alt "Undo (Ctrl + Z)" {:alt "Undo (Ctrl + Z)"
:on-click on-undo} :on-click on-undo}
@ -112,7 +98,7 @@
{:alt "Redo (Ctrl + Shift + Z)" {:alt "Redo (Ctrl + Shift + Z)"
:on-click on-redo} :on-click on-redo}
i/redo]] i/redo]]
[:ul.options-btn {} [:ul.options-btn
[:li.tooltip.tooltip-bottom [:li.tooltip.tooltip-bottom
{:alt "Download (Ctrl + E)" {:alt "Download (Ctrl + E)"
:on-click on-download} :on-click on-download}
@ -121,7 +107,7 @@
{:alt "Image (Ctrl + I)" {:alt "Image (Ctrl + I)"
:on-click on-image} :on-click on-image}
i/image]] i/image]]
[:ul.options-btn {} [:ul.options-btn
[:li.tooltip.tooltip-bottom [:li.tooltip.tooltip-bottom
{:alt "Rules" {:alt "Rules"
:class (when (contains? flags :rules) "selected") :class (when (contains? flags :rules) "selected")
@ -137,13 +123,14 @@
:class (when (contains? flags :grid-snap) "selected") :class (when (contains? flags :grid-snap) "selected")
:on-click (partial toggle :grid-snap)} :on-click (partial toggle :grid-snap)}
i/grid-snap]] i/grid-snap]]
;; [:li.tooltip.tooltip-bottom ;; [:li.tooltip.tooltip-bottom
;; {:alt "Align (Ctrl + A)"} ;; {:alt "Align (Ctrl + A)"}
;; i/alignment]] ;; i/alignment]]
[:ul.options-btn {} [:ul.options-btn
[:li.tooltip.tooltip-bottom.view-mode [:li.tooltip.tooltip-bottom.view-mode
{:alt "View mode (Ctrl + P)" {:alt "View mode (Ctrl + P)"
:on-click #(on-view-clicked % project page)} :on-click #(st/emit! (dw/->OpenView (:id page)))
}
i/play]] i/play]]
(zoom-widget)] [:& zoom-widget]]
[:& user]])) [:& user]]))

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

@ -6,18 +6,18 @@
;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com> ;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
(ns uxbox.main.ui.workspace.sidebar (ns uxbox.main.ui.workspace.sidebar
(:require [uxbox.main.refs :as refs] (:require
[uxbox.main.ui.workspace.sidebar.options :refer [options-toolbox]] [rumext.alpha :as mf]
[uxbox.main.ui.workspace.sidebar.layers :refer [layers-toolbox]] [uxbox.main.ui.workspace.sidebar.drawtools :refer [draw-toolbox]]
[uxbox.main.ui.workspace.sidebar.sitemap :refer [sitemap-toolbox]] [uxbox.main.ui.workspace.sidebar.history :refer [history-toolbox]]
[uxbox.main.ui.workspace.sidebar.history :refer [history-toolbox]] [uxbox.main.ui.workspace.sidebar.icons :refer [icons-toolbox]]
[uxbox.main.ui.workspace.sidebar.icons :refer [icons-toolbox]] [uxbox.main.ui.workspace.sidebar.layers :refer [layers-toolbox]]
[uxbox.main.ui.workspace.sidebar.drawtools :refer [draw-toolbox]] [uxbox.main.ui.workspace.sidebar.options :refer [options-toolbox]]
[rumext.core :as mx :include-macros true])) [uxbox.main.ui.workspace.sidebar.sitemap :refer [sitemap-toolbox]]))
;; --- Left Sidebar (Component) ;; --- Left Sidebar (Component)
(mx/defc left-sidebar (mf/defc left-sidebar
[{:keys [flags page-id] :as props}] [{:keys [flags page-id] :as props}]
[:aside#settings-bar.settings-bar.settings-bar-left [:aside#settings-bar.settings-bar.settings-bar-left
[:div.settings-bar-inside [:div.settings-bar-inside
@ -30,7 +30,7 @@
;; --- Right Sidebar (Component) ;; --- Right Sidebar (Component)
(mx/defc right-sidebar (mf/defc right-sidebar
[{:keys [flags page-id] :as props}] [{:keys [flags page-id] :as props}]
[:aside#settings-bar.settings-bar [:aside#settings-bar.settings-bar
[:div.settings-bar-inside [:div.settings-bar-inside

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

@ -102,6 +102,8 @@
(when deletable? (when deletable?
[:a {:on-click on-delete} i/trash])]]]))) [:a {:on-click on-delete} i/trash])]]])))
;; TODO: refactor this to not use global refs
(mf/def sitemap-toolbox (mf/def sitemap-toolbox
:mixins [mf/memo mf/reactive] :mixins [mf/memo mf/reactive]