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

✨ Revisit render flow of toplevel workspace components.

Browse source
This commit is contained in:
Andrey Antukh 2020-12-21 11:35:34 +01:00 • committed by Alonso Torres
parent 38a645ad49
commit dbb1e6a890
4 changed files with 118 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

71
frontend/src/app/main/ui/workspace.cljs
View file

@ -29,6 +29,7 @@
[app.main.ui.workspace.rules :refer [horizontal-rule vertical-rule]] [app.main.ui.workspace.rules :refer [horizontal-rule vertical-rule]]
[app.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]] [app.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]]
[app.main.ui.workspace.viewport :refer [viewport viewport-actions coordinates]] [app.main.ui.workspace.viewport :refer [viewport viewport-actions coordinates]]
[app.util.object :as obj]
[app.util.dom :as dom] [app.util.dom :as dom]
[beicon.core :as rx] [beicon.core :as rx]
[cuerdas.core :as str] [cuerdas.core :as str]
@ -38,49 +39,59 @@
;; --- Workspace ;; --- Workspace
(mf/defc workspace-rules (mf/defc workspace-rules
{::mf/wrap-props false} {::mf/wrap-props false
::mf/wrap [mf/memo]}
[props] [props]
(let [local (unchecked-get props "local")] (let [zoom (or (obj/get props "zoom") 1)
vbox (obj/get props "vbox")
vport (obj/get props "vport")]
[:* [:*
[:div.empty-rule-square] [:div.empty-rule-square]
[:& horizontal-rule {:zoom (:zoom local) [:& horizontal-rule {:zoom zoom
:vbox (:vbox local) :vbox vbox
:vport (:vport local)}] :vport vport}]
[:& vertical-rule {:zoom (:zoom local 1) [:& vertical-rule {:zoom zoom
:vbox (:vbox local) :vbox vbox
:vport (:vport local)}] :vport vport}]
[:& coordinates]])) [:& coordinates]]))
(mf/defc workspace-content (mf/defc workspace-content
[{:keys [file layout local] :as params}] {::mf/wrap-props false}
[:* [props]
;; TODO: left-sidebar option is obsolete because left-sidebar now (let [local (mf/deref refs/workspace-local)
;; is always visible. file (obj/get props "file")
(when (:colorpalette layout) layout (obj/get props "layout")]
[:& colorpalette {:left-sidebar? true}]) [:*
;; TODO: left-sidebar option is obsolete because left-sidebar now
;; is always visible.
(when (:colorpalette layout)
[:& colorpalette {:left-sidebar? true}])
[:section.workspace-content [:section.workspace-content
[:section.workspace-viewport [:section.workspace-viewport
(when (contains? layout :rules) (when (contains? layout :rules)
[:& workspace-rules {:local local}]) [:& workspace-rules {:zoom (:zoom local)
:vbox (:vbox local)
:vport (:vport local)}])
[:& viewport-actions] [:& viewport-actions]
[:& viewport {:file file [:& viewport {:file file
:local local :local local
:layout layout}]]] :layout layout}]]]
[:& left-toolbar {:layout layout}] [:& left-toolbar {:layout layout}]
;; Aside ;; Aside
[:& left-sidebar {:layout layout}] [:& left-sidebar {:layout layout}]
[:& right-sidebar {:local local}]]) [:& right-sidebar {:section (:options-mode local)
:selected (:selected local)}]]))
(def trimmed-page-ref (l/derived :trimmed-page st/state =)) (def trimmed-page-ref (l/derived :trimmed-page st/state =))
(mf/defc workspace-page (mf/defc workspace-page
[{:keys [file layout page-id] :as props}] [{:keys [file layout page-id] :as props}]
(let [local (mf/deref refs/workspace-local) (let [page (mf/deref trimmed-page-ref)]
page (mf/deref trimmed-page-ref)]
(mf/use-layout-effect (mf/use-layout-effect
(mf/deps page-id) (mf/deps page-id)
(fn [] (fn []
@ -90,8 +101,7 @@
(when page (when page
[:& workspace-content {:key page-id [:& workspace-content {:key page-id
:file file :file file
:layout layout :layout layout}])))
:local local}])))
(mf/defc workspace-loader (mf/defc workspace-loader
[] []
@ -99,6 +109,7 @@
i/loader-pencil]) i/loader-pencil])
(mf/defc workspace (mf/defc workspace
{::mf/wrap [mf/memo]}
[{:keys [project-id file-id page-id layout-name] :as props}] [{:keys [project-id file-id page-id layout-name] :as props}]
(mf/use-effect (mf/use-effect
(mf/deps layout-name) (mf/deps layout-name)

109
frontend/src/app/main/ui/workspace/left_toolbar.cljs
View file

@ -15,94 +15,105 @@
[app.main.data.workspace :as dw] [app.main.data.workspace :as dw]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.file-uploader :refer [file-uploader]] [app.main.ui.components.file-uploader :refer [file-uploader]]
[app.util.object :as obj]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [t]] [app.util.i18n :as i18n :refer [tr]]
[app.main.ui.icons :as i])) [app.main.ui.icons :as i]))
;; --- Component: Left toolbar (mf/defc image-upload
{::mf/wrap [mf/memo]}
[]
(let [ref (mf/use-ref nil)
file (mf/deref refs/workspace-file)
(mf/defc left-toolbar on-click
[{:keys [layout] :as props}] (mf/use-callback #(dom/click (mf/ref-val ref)))
(let [file-input (mf/use-ref nil)
selected-drawtool (mf/deref refs/selected-drawing-tool)
select-drawtool #(st/emit! :interrupt (dw/select-for-drawing %))
file (mf/deref refs/workspace-file)
locale (i18n/use-locale)
on-image #(dom/click (mf/ref-val file-input))
on-uploaded on-uploaded
(fn [{:keys [id name] :as image}] (mf/use-callback
(let [shape {:name name (fn [{:keys [id name] :as image}]
:width (:width image) (let [shape {:name name
:height (:height image) :width (:width image)
:metadata {:width (:width image) :height (:height image)
:height (:height image) :metadata {:width (:width image)
:id (:id image) :height (:height image)
:path (:path image)}} :id (:id image)
aspect-ratio (/ (:width image) (:height image))] :path (:path image)}}
(st/emit! (dw/create-and-add-shape :image 0 0 shape)))) aspect-ratio (/ (:width image) (:height image))]
(st/emit! (dw/create-and-add-shape :image 0 0 shape)))))
on-files-selected on-files-selected
(fn [js-files] (mf/use-callback
(st/emit! (dw/upload-media-objects (mf/deps file)
(with-meta {:file-id (:id file) (fn [js-files]
:local? true (st/emit! (dw/upload-media-objects
:js-files js-files} (with-meta {:file-id (:id file)
{:on-success on-uploaded}))))] :local? true
:js-files js-files}
{:on-success on-uploaded})))))]
[:li.tooltip.tooltip-right
{:alt (tr "workspace.toolbar.image")
:on-click on-click}
[:*
i/image
[:& file-uploader {:input-id "image-upload"
:accept cm/str-media-types
:multi true
:input-ref ref
:on-selected on-files-selected}]]]))
(mf/defc left-toolbar
{::mf/wrap [mf/memo]
::mf/wrap-props false}
[props]
(let [layout (obj/get props "layout")
selected-drawtool (mf/deref refs/selected-drawing-tool)
select-drawtool #(st/emit! :interrupt (dw/select-for-drawing %))]
[:aside.left-toolbar [:aside.left-toolbar
[:div.left-toolbar-inside [:div.left-toolbar-inside
[:ul.left-toolbar-options [:ul.left-toolbar-options
[:li.tooltip.tooltip-right [:li.tooltip.tooltip-right
{:alt (t locale "workspace.toolbar.move") {:alt (tr "workspace.toolbar.move")
:class (when (nil? selected-drawtool) "selected") :class (when (nil? selected-drawtool) "selected")
:on-click #(st/emit! :interrupt)} :on-click (st/emitf :interrupt)}
i/pointer-inner] i/pointer-inner]
[:li.tooltip.tooltip-right [:li.tooltip.tooltip-right
{:alt (t locale "workspace.toolbar.frame") {:alt (tr "workspace.toolbar.frame")
:class (when (= selected-drawtool :frame) "selected") :class (when (= selected-drawtool :frame) "selected")
:on-click (partial select-drawtool :frame)} :on-click (partial select-drawtool :frame)}
i/artboard] i/artboard]
[:li.tooltip.tooltip-right [:li.tooltip.tooltip-right
{:alt (t locale "workspace.toolbar.rect") {:alt (tr "workspace.toolbar.rect")
:class (when (= selected-drawtool :rect) "selected") :class (when (= selected-drawtool :rect) "selected")
:on-click (partial select-drawtool :rect)} :on-click (partial select-drawtool :rect)}
i/box] i/box]
[:li.tooltip.tooltip-right [:li.tooltip.tooltip-right
{:alt (t locale "workspace.toolbar.ellipse") {:alt (tr "workspace.toolbar.ellipse")
:class (when (= selected-drawtool :circle) "selected") :class (when (= selected-drawtool :circle) "selected")
:on-click (partial select-drawtool :circle)} :on-click (partial select-drawtool :circle)}
i/circle] i/circle]
[:li.tooltip.tooltip-right [:li.tooltip.tooltip-right
{:alt (t locale "workspace.toolbar.text") {:alt (tr "workspace.toolbar.text")
:class (when (= selected-drawtool :text) "selected") :class (when (= selected-drawtool :text) "selected")
:on-click (partial select-drawtool :text)} :on-click (partial select-drawtool :text)}
i/text] i/text]
[:& image-upload]
[:li.tooltip.tooltip-right [:li.tooltip.tooltip-right
{:alt (t locale "workspace.toolbar.image") {:alt (tr "workspace.toolbar.curve")
:on-click on-image}
[:*
i/image
[:& file-uploader {:input-id "image-upload"
:accept cm/str-media-types
:multi true
:input-ref file-input
:on-selected on-files-selected}]]]
[:li.tooltip.tooltip-right
{:alt (t locale "workspace.toolbar.curve")
:class (when (= selected-drawtool :curve) "selected") :class (when (= selected-drawtool :curve) "selected")
:on-click (partial select-drawtool :curve)} :on-click (partial select-drawtool :curve)}
i/pencil] i/pencil]
[:li.tooltip.tooltip-right [:li.tooltip.tooltip-right
{:alt (t locale "workspace.toolbar.path") {:alt (tr "workspace.toolbar.path")
:class (when (= selected-drawtool :path) "selected") :class (when (= selected-drawtool :path) "selected")
:on-click (partial select-drawtool :path)} :on-click (partial select-drawtool :path)}
i/pen] i/pen]
[:li.tooltip.tooltip-right [:li.tooltip.tooltip-right
{:alt (t locale "workspace.toolbar.comments") {:alt (tr "workspace.toolbar.comments")
:class (when (= selected-drawtool :comments) "selected") :class (when (= selected-drawtool :comments) "selected")
:on-click (partial select-drawtool :comments)} :on-click (partial select-drawtool :comments)}
i/chat]] i/chat]]
@ -114,7 +125,7 @@
:on-click (st/emitf (dw/go-to-layout :layers))} :on-click (st/emitf (dw/go-to-layout :layers))}
i/layers] i/layers]
[:li.tooltip.tooltip-right [:li.tooltip.tooltip-right
{:alt (t locale "workspace.toolbar.assets") {:alt (tr "workspace.toolbar.assets")
:class (when (contains? layout :assets) "selected") :class (when (contains? layout :assets) "selected")
:on-click (st/emitf (dw/go-to-layout :assets))} :on-click (st/emitf (dw/go-to-layout :assets))}
i/library] i/library]
@ -124,7 +135,7 @@
:on-click (st/emitf (dw/go-to-layout :document-history))} :on-click (st/emitf (dw/go-to-layout :document-history))}
i/undo-history] i/undo-history]
[:li.tooltip.tooltip-right [:li.tooltip.tooltip-right
{:alt (t locale "workspace.toolbar.color-palette") {:alt (tr "workspace.toolbar.color-palette")
:class (when (contains? layout :colorpalette) "selected") :class (when (contains? layout :colorpalette) "selected")
:on-click (st/emitf (dw/toggle-layout-flags :colorpalette))} :on-click (st/emitf (dw/toggle-layout-flags :colorpalette))}
i/palette]]]])) i/palette]]]]))

6
frontend/src/app/main/ui/workspace/sidebar.cljs
View file

@ -41,10 +41,12 @@
;; --- Right Sidebar (Component) ;; --- Right Sidebar (Component)
(mf/defc right-sidebar (mf/defc right-sidebar
[{:keys [local] :as props}] {::mf/wrap-props false
::mf/wrap [mf/memo]}
[props]
(let [drawing-tool (:tool (mf/deref refs/workspace-drawing))] (let [drawing-tool (:tool (mf/deref refs/workspace-drawing))]
[:aside.settings-bar [:aside.settings-bar
[:div.settings-bar-inside [:div.settings-bar-inside
(if (= drawing-tool :comments) (if (= drawing-tool :comments)
[:& comments-sidebar] [:& comments-sidebar]
[:& options-toolbox {:local local}])]])) [:> options-toolbox props])]]))

23
frontend/src/app/main/ui/workspace/sidebar/options.cljs
View file

@ -9,8 +9,6 @@
(ns app.main.ui.workspace.sidebar.options (ns app.main.ui.workspace.sidebar.options
(:require (:require
[beicon.core :as rx]
[rumext.alpha :as mf]
[app.common.spec :as us] [app.common.spec :as us]
[app.main.data.workspace :as udw] [app.main.data.workspace :as udw]
[app.main.refs :as refs] [app.main.refs :as refs]
@ -25,14 +23,17 @@
[app.main.ui.workspace.sidebar.options.group :as group] [app.main.ui.workspace.sidebar.options.group :as group]
[app.main.ui.workspace.sidebar.options.icon :as icon] [app.main.ui.workspace.sidebar.options.icon :as icon]
[app.main.ui.workspace.sidebar.options.image :as image] [app.main.ui.workspace.sidebar.options.image :as image]
[app.main.ui.workspace.sidebar.options.text :as text]
[app.main.ui.workspace.sidebar.options.page :as page]
[app.main.ui.workspace.sidebar.options.multiple :as multiple]
[app.main.ui.workspace.sidebar.options.interactions :refer [interactions-menu]] [app.main.ui.workspace.sidebar.options.interactions :refer [interactions-menu]]
[app.main.ui.workspace.sidebar.options.multiple :as multiple]
[app.main.ui.workspace.sidebar.options.page :as page]
[app.main.ui.workspace.sidebar.options.path :as path] [app.main.ui.workspace.sidebar.options.path :as path]
[app.main.ui.workspace.sidebar.options.rect :as rect] [app.main.ui.workspace.sidebar.options.rect :as rect]
[app.main.ui.workspace.sidebar.options.text :as text] [app.main.ui.workspace.sidebar.options.text :as text]
[app.util.i18n :as i18n :refer [tr t]])) [app.main.ui.workspace.sidebar.options.text :as text]
[app.util.i18n :as i18n :refer [tr t]]
[app.util.object :as obj]
[beicon.core :as rx]
[rumext.alpha :as mf]))
;; --- Options ;; --- Options
@ -88,15 +89,17 @@
;; need on multiple selection in majority of cases ;; need on multiple selection in majority of cases
(mf/defc options-toolbox (mf/defc options-toolbox
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]
[{:keys [local] :as props}] ::mf/wrap-props false}
(let [section (:options-mode local) [props]
(let [section (obj/get props "section")
selected (obj/get props "selected")
page-id (mf/use-ctx ctx/current-page-id) page-id (mf/use-ctx ctx/current-page-id)
file-id (mf/use-ctx ctx/current-file-id) file-id (mf/use-ctx ctx/current-file-id)
shapes (mf/deref refs/selected-objects) shapes (mf/deref refs/selected-objects)
shapes-with-children (mf/deref refs/selected-objects-with-children)] shapes-with-children (mf/deref refs/selected-objects-with-children)]
[:& options-content {:shapes shapes [:& options-content {:shapes shapes
:selected (:selected local) :selected selected
:shapes-with-children shapes-with-children :shapes-with-children shapes-with-children
:file-id file-id :file-id file-id
:page-id page-id :page-id page-id