mirror of
https://github.com/penpot/penpot.git
synced 2025-03-13 16:21:57 -05:00
♻️ More code refactor on workspace.
This commit is contained in:
Andrey Antukh
parent
2a8c1d5f03
commit
980d23c370
8 changed files with 81 additions and 90 deletions
|
|
@ -8,6 +8,7 @@
|
|||
(:require
|
||||
[beicon.core :as rx]
|
||||
[potok.core :as ptk]
|
||||
[uxbox.config :as cfg]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.constants :as c]
|
||||
[uxbox.main.lenses :as ul]
|
||||
|
|
@ -29,7 +30,7 @@
|
|||
[uxbox.util.geom.point :as gpt]
|
||||
[uxbox.util.time :as dt]
|
||||
[uxbox.util.math :as mth]
|
||||
[uxbox.util.data :refer (index-of)]))
|
||||
[uxbox.util.data :refer [index-of]]))
|
||||
|
||||
;; --- Expose inner functions
|
||||
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@
|
|||
:workspace/page
|
||||
(let [project (uuid (get-in route [:params :path :project]))
|
||||
page (uuid (get-in route [:params :path :page]))]
|
||||
[:& workspace {:project project :page page}])
|
||||
[:& workspace {:project project :page page :key page}])
|
||||
|
||||
nil
|
||||
))))
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
(ns uxbox.main.ui.navigation
|
||||
|
||||
;; TODO: deprecated
|
||||
(:require [rumext.alpha :refer-macros [html]]
|
||||
[goog.events :as events]
|
||||
[uxbox.util.dom :as dom]))
|
||||
|
|
|
|||
|
|
@ -61,15 +61,16 @@
|
|||
(scroll/scroll-to-point dom mouse-point scroll-position))))
|
||||
|
||||
(mf/def workspace
|
||||
:key-fn identity
|
||||
:mixins #{mf/memo
|
||||
mf/reactive
|
||||
:mixins #{mf/reactive
|
||||
shortcuts-mixin}
|
||||
|
||||
:init
|
||||
(fn [own {:keys [project page] :as props}]
|
||||
(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
|
||||
(fn [own]
|
||||
|
|
@ -91,8 +92,9 @@
|
|||
:render
|
||||
(fn [own props]
|
||||
(let [flags (mf/deref refs/flags)
|
||||
project-id (get props :project)
|
||||
page-id (get props :page)
|
||||
page (mf/deref (::page-ref own))
|
||||
;; project-id (get props :project)
|
||||
;; page-id (get props :page)
|
||||
left-sidebar? (not (empty? (keep flags [:layers :sitemap
|
||||
:document-history])))
|
||||
right-sidebar? (not (empty? (keep flags [:icons :drawtools
|
||||
|
|
@ -103,7 +105,9 @@
|
|||
:scrolling (:viewport-positionig workspace))]
|
||||
[:*
|
||||
(messages-widget)
|
||||
(header)
|
||||
[:& header {:page page
|
||||
:flags flags
|
||||
:key (:id page)}]
|
||||
(colorpalette)
|
||||
|
||||
[:main.main-content
|
||||
|
|
@ -116,20 +120,20 @@
|
|||
|
||||
;; Rules
|
||||
(when (contains? flags :rules)
|
||||
(horizontal-rule))
|
||||
[:& horizontal-rule])
|
||||
|
||||
(when (contains? flags :rules)
|
||||
(vertical-rule))
|
||||
[:& vertical-rule])
|
||||
|
||||
;; Canvas
|
||||
[:section.workspace-canvas {:id "workspace-canvas"
|
||||
:ref (::canvas own)}
|
||||
[:& viewport {:project project-id
|
||||
:page page-id
|
||||
:key [project-id page-id]}]]]
|
||||
[:& viewport {:page page
|
||||
:flags flags
|
||||
:key (:id page)}]]]
|
||||
|
||||
;; Aside
|
||||
(when left-sidebar?
|
||||
(left-sidebar {:flags flags :page-id page-id}))
|
||||
[:& left-sidebar {:flags flags :page-id (:id page)}])
|
||||
(when right-sidebar?
|
||||
(right-sidebar {:flags flags :page-id page-id}))]])))
|
||||
[:& right-sidebar {:flags flags :page-id (:id page)}])]])))
|
||||
|
|
|
|||
|
|
@ -135,11 +135,8 @@
|
|||
:mixins [mf/reactive]
|
||||
|
||||
:init
|
||||
(fn [own {:keys [page project] :as props}]
|
||||
(assoc own
|
||||
::viewport (mf/create-ref)
|
||||
::page-ref (-> (l/in [:pages page])
|
||||
(l/derive st/state))))
|
||||
(fn [own props]
|
||||
(assoc own ::viewport (mf/create-ref)))
|
||||
|
||||
:did-mount
|
||||
(fn [own]
|
||||
|
|
@ -215,10 +212,8 @@
|
|||
|
||||
;; TODO: use an ad-hoc ref for required keys from workspace state
|
||||
:render
|
||||
(fn [own props]
|
||||
(let [page (mf/deref (::page-ref own))
|
||||
flags (mf/react refs/flags)
|
||||
drawing (mf/react refs/selected-drawing-tool)
|
||||
(fn [own {:keys [page flags] :as props}]
|
||||
(let [drawing (mf/react refs/selected-drawing-tool)
|
||||
tooltip (or (mf/react refs/selected-tooltip)
|
||||
(get-shape-tooltip drawing))
|
||||
zoom (or (mf/react refs/selected-zoom) 1)]
|
||||
|
|
|
|||
|
|
@ -6,73 +6,59 @@
|
|||
;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.workspace.header
|
||||
(:require [beicon.core :as rx]
|
||||
[uxbox.config :as cfg]
|
||||
[potok.core :as ptk]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.data.workspace :as dw]
|
||||
[uxbox.main.data.pages :as udp]
|
||||
[uxbox.main.data.history :as udh]
|
||||
[uxbox.main.data.undo :as udu]
|
||||
[uxbox.main.data.lightbox :as udl]
|
||||
[uxbox.main.ui.workspace.clipboard]
|
||||
[uxbox.main.ui.users :refer [user]]
|
||||
[uxbox.main.ui.navigation :as nav]
|
||||
[uxbox.util.router :as r]
|
||||
[uxbox.util.data :refer [index-of]]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[uxbox.util.math :as mth]
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
(:require
|
||||
[rumext.core :as mx]
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.config :as cfg]
|
||||
[uxbox.main.data.history :as udh]
|
||||
[uxbox.main.data.lightbox :as udl]
|
||||
[uxbox.main.data.pages :as udp]
|
||||
[uxbox.main.data.undo :as udu]
|
||||
[uxbox.main.data.workspace :as dw]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.users :refer [user]]
|
||||
[uxbox.main.ui.workspace.clipboard]
|
||||
[uxbox.util.data :refer [index-of]]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[uxbox.util.math :as mth]
|
||||
[uxbox.util.router :as rt]))
|
||||
|
||||
;; --- Zoom Widget
|
||||
|
||||
(mx/defc zoom-widget
|
||||
{:mixins [mx/reactive mx/static]}
|
||||
[]
|
||||
(let [zoom (mx/react refs/selected-zoom)
|
||||
(mf/defc zoom-widget
|
||||
{:wrap [mf/reactive*]}
|
||||
[props]
|
||||
(let [zoom (mf/react refs/selected-zoom)
|
||||
increase #(st/emit! (dw/increase-zoom))
|
||||
decrease #(st/emit! (dw/decrease-zoom))]
|
||||
[:ul.options-view {}
|
||||
[:li.zoom-input {}
|
||||
[:ul.options-view
|
||||
[:li.zoom-input
|
||||
[:span.add-zoom {:on-click decrease} "-"]
|
||||
[:span {} (str (mth/round (* 100 zoom)) "%")]
|
||||
[:span.remove-zoom {:on-click increase} "+"]]]))
|
||||
|
||||
;; --- Header Component
|
||||
|
||||
(defn on-view-clicked
|
||||
[event project page]
|
||||
(let [token (:share-token project)
|
||||
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 %))
|
||||
(mf/defc header
|
||||
[{:keys [page flags] :as props}]
|
||||
(let [toggle #(st/emit! (dw/toggle-flag %))
|
||||
on-undo #(st/emit! (udu/undo))
|
||||
on-redo #(st/emit! (udu/redo))
|
||||
on-image #(udl/open! :import-image)
|
||||
on-download #(udl/open! :download)]
|
||||
[:header#workspace-bar.workspace-bar {}
|
||||
[:div.main-icon {}
|
||||
(nav/link (r/route-for :dashboard/projects) i/logo-icon)]
|
||||
[:header#workspace-bar.workspace-bar
|
||||
[:div.main-icon
|
||||
[:a {:on-click #(st/emit! (rt/nav :dashboard/projects))} i/logo-icon]]
|
||||
[:div.project-tree-btn
|
||||
{:alt "Sitemap (Ctrl + Shift + M)"
|
||||
:class (when (contains? flags :sitemap) "selected")
|
||||
:on-click (partial toggle :sitemap)}
|
||||
i/project-tree
|
||||
[:span {} (:name page)]]
|
||||
[:div.workspace-options {}
|
||||
[:ul.options-btn {}
|
||||
[:div.workspace-options
|
||||
[:ul.options-btn
|
||||
[:li.tooltip.tooltip-bottom
|
||||
{:alt "Draw tools (Ctrl + Shift + S)"
|
||||
:class (when (contains? flags :drawtools) "selected")
|
||||
|
|
@ -103,7 +89,7 @@
|
|||
:class (when (contains? flags :document-history) "selected")
|
||||
:on-click (partial toggle :document-history)}
|
||||
i/undo-history]]
|
||||
[:ul.options-btn {}
|
||||
[:ul.options-btn
|
||||
[:li.tooltip.tooltip-bottom
|
||||
{:alt "Undo (Ctrl + Z)"
|
||||
:on-click on-undo}
|
||||
|
|
@ -112,7 +98,7 @@
|
|||
{:alt "Redo (Ctrl + Shift + Z)"
|
||||
:on-click on-redo}
|
||||
i/redo]]
|
||||
[:ul.options-btn {}
|
||||
[:ul.options-btn
|
||||
[:li.tooltip.tooltip-bottom
|
||||
{:alt "Download (Ctrl + E)"
|
||||
:on-click on-download}
|
||||
|
|
@ -121,7 +107,7 @@
|
|||
{:alt "Image (Ctrl + I)"
|
||||
:on-click on-image}
|
||||
i/image]]
|
||||
[:ul.options-btn {}
|
||||
[:ul.options-btn
|
||||
[:li.tooltip.tooltip-bottom
|
||||
{:alt "Rules"
|
||||
:class (when (contains? flags :rules) "selected")
|
||||
|
|
@ -137,13 +123,14 @@
|
|||
:class (when (contains? flags :grid-snap) "selected")
|
||||
:on-click (partial toggle :grid-snap)}
|
||||
i/grid-snap]]
|
||||
;; [:li.tooltip.tooltip-bottom
|
||||
;; {:alt "Align (Ctrl + A)"}
|
||||
;; i/alignment]]
|
||||
[:ul.options-btn {}
|
||||
;; [:li.tooltip.tooltip-bottom
|
||||
;; {:alt "Align (Ctrl + A)"}
|
||||
;; i/alignment]]
|
||||
[:ul.options-btn
|
||||
[:li.tooltip.tooltip-bottom.view-mode
|
||||
{:alt "View mode (Ctrl + P)"
|
||||
:on-click #(on-view-clicked % project page)}
|
||||
:on-click #(st/emit! (dw/->OpenView (:id page)))
|
||||
}
|
||||
i/play]]
|
||||
(zoom-widget)]
|
||||
[:& zoom-widget]]
|
||||
[:& user]]))
|
||||
|
|
|
|||
|
|
@ -6,18 +6,18 @@
|
|||
;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.workspace.sidebar
|
||||
(:require [uxbox.main.refs :as refs]
|
||||
[uxbox.main.ui.workspace.sidebar.options :refer [options-toolbox]]
|
||||
[uxbox.main.ui.workspace.sidebar.layers :refer [layers-toolbox]]
|
||||
[uxbox.main.ui.workspace.sidebar.sitemap :refer [sitemap-toolbox]]
|
||||
[uxbox.main.ui.workspace.sidebar.history :refer [history-toolbox]]
|
||||
[uxbox.main.ui.workspace.sidebar.icons :refer [icons-toolbox]]
|
||||
[uxbox.main.ui.workspace.sidebar.drawtools :refer [draw-toolbox]]
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.main.ui.workspace.sidebar.drawtools :refer [draw-toolbox]]
|
||||
[uxbox.main.ui.workspace.sidebar.history :refer [history-toolbox]]
|
||||
[uxbox.main.ui.workspace.sidebar.icons :refer [icons-toolbox]]
|
||||
[uxbox.main.ui.workspace.sidebar.layers :refer [layers-toolbox]]
|
||||
[uxbox.main.ui.workspace.sidebar.options :refer [options-toolbox]]
|
||||
[uxbox.main.ui.workspace.sidebar.sitemap :refer [sitemap-toolbox]]))
|
||||
|
||||
;; --- Left Sidebar (Component)
|
||||
|
||||
(mx/defc left-sidebar
|
||||
(mf/defc left-sidebar
|
||||
[{:keys [flags page-id] :as props}]
|
||||
[:aside#settings-bar.settings-bar.settings-bar-left
|
||||
[:div.settings-bar-inside
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
;; --- Right Sidebar (Component)
|
||||
|
||||
(mx/defc right-sidebar
|
||||
(mf/defc right-sidebar
|
||||
[{:keys [flags page-id] :as props}]
|
||||
[:aside#settings-bar.settings-bar
|
||||
[:div.settings-bar-inside
|
||||
|
|
|
|||
|
|
@ -102,6 +102,8 @@
|
|||
(when deletable?
|
||||
[:a {:on-click on-delete} i/trash])]]])))
|
||||
|
||||
;; TODO: refactor this to not use global refs
|
||||
|
||||
(mf/def sitemap-toolbox
|
||||
:mixins [mf/memo mf/reactive]
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue