mirror of
https://github.com/penpot/penpot.git
synced 2025-05-29 12:56:10 +02:00
✨ Revisit render flow of toplevel workspace components.
This commit is contained in:
Andrey Antukh
Alonso Torres
parent
38a645ad49
commit
dbb1e6a890
4 changed files with 118 additions and 91 deletions
|
|
@ -29,6 +29,7 @@
|
|||
[app.main.ui.workspace.rules :refer [horizontal-rule vertical-rule]]
|
||||
[app.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]]
|
||||
[app.main.ui.workspace.viewport :refer [viewport viewport-actions coordinates]]
|
||||
[app.util.object :as obj]
|
||||
[app.util.dom :as dom]
|
||||
[beicon.core :as rx]
|
||||
[cuerdas.core :as str]
|
||||
|
|
@ -38,49 +39,59 @@
|
|||
;; --- Workspace
|
||||
|
||||
(mf/defc workspace-rules
|
||||
{::mf/wrap-props false}
|
||||
{::mf/wrap-props false
|
||||
::mf/wrap [mf/memo]}
|
||||
[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]
|
||||
[:& horizontal-rule {:zoom (:zoom local)
|
||||
:vbox (:vbox local)
|
||||
:vport (:vport local)}]
|
||||
[:& vertical-rule {:zoom (:zoom local 1)
|
||||
:vbox (:vbox local)
|
||||
:vport (:vport local)}]
|
||||
[:& horizontal-rule {:zoom zoom
|
||||
:vbox vbox
|
||||
:vport vport}]
|
||||
[:& vertical-rule {:zoom zoom
|
||||
:vbox vbox
|
||||
:vport vport}]
|
||||
[:& coordinates]]))
|
||||
|
||||
(mf/defc workspace-content
|
||||
[{:keys [file layout local] :as params}]
|
||||
[:*
|
||||
;; TODO: left-sidebar option is obsolete because left-sidebar now
|
||||
;; is always visible.
|
||||
(when (:colorpalette layout)
|
||||
[:& colorpalette {:left-sidebar? true}])
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [local (mf/deref refs/workspace-local)
|
||||
file (obj/get props "file")
|
||||
layout (obj/get props "layout")]
|
||||
[:*
|
||||
;; 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-viewport
|
||||
(when (contains? layout :rules)
|
||||
[:& workspace-rules {:local local}])
|
||||
[:section.workspace-content
|
||||
[:section.workspace-viewport
|
||||
(when (contains? layout :rules)
|
||||
[:& workspace-rules {:zoom (:zoom local)
|
||||
:vbox (:vbox local)
|
||||
:vport (:vport local)}])
|
||||
|
||||
[:& viewport-actions]
|
||||
[:& viewport {:file file
|
||||
:local local
|
||||
:layout layout}]]]
|
||||
[:& viewport-actions]
|
||||
[:& viewport {:file file
|
||||
:local local
|
||||
:layout layout}]]]
|
||||
|
||||
[:& left-toolbar {:layout layout}]
|
||||
[:& left-toolbar {:layout layout}]
|
||||
|
||||
;; Aside
|
||||
[:& left-sidebar {:layout layout}]
|
||||
[:& right-sidebar {:local local}]])
|
||||
;; Aside
|
||||
[:& left-sidebar {:layout layout}]
|
||||
[:& right-sidebar {:section (:options-mode local)
|
||||
:selected (:selected local)}]]))
|
||||
|
||||
(def trimmed-page-ref (l/derived :trimmed-page st/state =))
|
||||
|
||||
(mf/defc workspace-page
|
||||
[{:keys [file layout page-id] :as props}]
|
||||
(let [local (mf/deref refs/workspace-local)
|
||||
page (mf/deref trimmed-page-ref)]
|
||||
(let [page (mf/deref trimmed-page-ref)]
|
||||
(mf/use-layout-effect
|
||||
(mf/deps page-id)
|
||||
(fn []
|
||||
|
|
@ -90,8 +101,7 @@
|
|||
(when page
|
||||
[:& workspace-content {:key page-id
|
||||
:file file
|
||||
:layout layout
|
||||
:local local}])))
|
||||
:layout layout}])))
|
||||
|
||||
(mf/defc workspace-loader
|
||||
[]
|
||||
|
|
@ -99,6 +109,7 @@
|
|||
i/loader-pencil])
|
||||
|
||||
(mf/defc workspace
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [project-id file-id page-id layout-name] :as props}]
|
||||
(mf/use-effect
|
||||
(mf/deps layout-name)
|
||||
|
|
|
|||
|
|
@ -15,94 +15,105 @@
|
|||
[app.main.data.workspace :as dw]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.file-uploader :refer [file-uploader]]
|
||||
[app.util.object :as obj]
|
||||
[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]))
|
||||
|
||||
;; --- 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
|
||||
[{:keys [layout] :as props}]
|
||||
(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-click
|
||||
(mf/use-callback #(dom/click (mf/ref-val ref)))
|
||||
|
||||
on-uploaded
|
||||
(fn [{:keys [id name] :as image}]
|
||||
(let [shape {:name name
|
||||
:width (:width image)
|
||||
:height (:height image)
|
||||
:metadata {:width (:width image)
|
||||
:height (:height image)
|
||||
:id (:id image)
|
||||
:path (:path image)}}
|
||||
aspect-ratio (/ (:width image) (:height image))]
|
||||
(st/emit! (dw/create-and-add-shape :image 0 0 shape))))
|
||||
(mf/use-callback
|
||||
(fn [{:keys [id name] :as image}]
|
||||
(let [shape {:name name
|
||||
:width (:width image)
|
||||
:height (:height image)
|
||||
:metadata {:width (:width image)
|
||||
:height (:height image)
|
||||
:id (:id image)
|
||||
:path (:path image)}}
|
||||
aspect-ratio (/ (:width image) (:height image))]
|
||||
(st/emit! (dw/create-and-add-shape :image 0 0 shape)))))
|
||||
|
||||
on-files-selected
|
||||
(fn [js-files]
|
||||
(st/emit! (dw/upload-media-objects
|
||||
(with-meta {:file-id (:id file)
|
||||
:local? true
|
||||
:js-files js-files}
|
||||
{:on-success on-uploaded}))))]
|
||||
(mf/use-callback
|
||||
(mf/deps file)
|
||||
(fn [js-files]
|
||||
(st/emit! (dw/upload-media-objects
|
||||
(with-meta {:file-id (:id file)
|
||||
: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
|
||||
[:div.left-toolbar-inside
|
||||
[:ul.left-toolbar-options
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt (t locale "workspace.toolbar.move")
|
||||
{:alt (tr "workspace.toolbar.move")
|
||||
:class (when (nil? selected-drawtool) "selected")
|
||||
:on-click #(st/emit! :interrupt)}
|
||||
:on-click (st/emitf :interrupt)}
|
||||
i/pointer-inner]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt (t locale "workspace.toolbar.frame")
|
||||
{:alt (tr "workspace.toolbar.frame")
|
||||
:class (when (= selected-drawtool :frame) "selected")
|
||||
:on-click (partial select-drawtool :frame)}
|
||||
i/artboard]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt (t locale "workspace.toolbar.rect")
|
||||
{:alt (tr "workspace.toolbar.rect")
|
||||
:class (when (= selected-drawtool :rect) "selected")
|
||||
:on-click (partial select-drawtool :rect)}
|
||||
i/box]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt (t locale "workspace.toolbar.ellipse")
|
||||
{:alt (tr "workspace.toolbar.ellipse")
|
||||
:class (when (= selected-drawtool :circle) "selected")
|
||||
:on-click (partial select-drawtool :circle)}
|
||||
i/circle]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt (t locale "workspace.toolbar.text")
|
||||
{:alt (tr "workspace.toolbar.text")
|
||||
:class (when (= selected-drawtool :text) "selected")
|
||||
:on-click (partial select-drawtool :text)}
|
||||
i/text]
|
||||
|
||||
[:& image-upload]
|
||||
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt (t locale "workspace.toolbar.image")
|
||||
: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")
|
||||
{:alt (tr "workspace.toolbar.curve")
|
||||
:class (when (= selected-drawtool :curve) "selected")
|
||||
:on-click (partial select-drawtool :curve)}
|
||||
i/pencil]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt (t locale "workspace.toolbar.path")
|
||||
{:alt (tr "workspace.toolbar.path")
|
||||
:class (when (= selected-drawtool :path) "selected")
|
||||
:on-click (partial select-drawtool :path)}
|
||||
i/pen]
|
||||
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt (t locale "workspace.toolbar.comments")
|
||||
{:alt (tr "workspace.toolbar.comments")
|
||||
:class (when (= selected-drawtool :comments) "selected")
|
||||
:on-click (partial select-drawtool :comments)}
|
||||
i/chat]]
|
||||
|
|
@ -114,7 +125,7 @@
|
|||
:on-click (st/emitf (dw/go-to-layout :layers))}
|
||||
i/layers]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt (t locale "workspace.toolbar.assets")
|
||||
{:alt (tr "workspace.toolbar.assets")
|
||||
:class (when (contains? layout :assets) "selected")
|
||||
:on-click (st/emitf (dw/go-to-layout :assets))}
|
||||
i/library]
|
||||
|
|
@ -124,7 +135,7 @@
|
|||
:on-click (st/emitf (dw/go-to-layout :document-history))}
|
||||
i/undo-history]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt (t locale "workspace.toolbar.color-palette")
|
||||
{:alt (tr "workspace.toolbar.color-palette")
|
||||
:class (when (contains? layout :colorpalette) "selected")
|
||||
:on-click (st/emitf (dw/toggle-layout-flags :colorpalette))}
|
||||
i/palette]]]]))
|
||||
|
|
|
|||
|
|
@ -41,10 +41,12 @@
|
|||
;; --- Right Sidebar (Component)
|
||||
|
||||
(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))]
|
||||
[:aside.settings-bar
|
||||
[:div.settings-bar-inside
|
||||
(if (= drawing-tool :comments)
|
||||
[:& comments-sidebar]
|
||||
[:& options-toolbox {:local local}])]]))
|
||||
[:> options-toolbox props])]]))
|
||||
|
|
|
|||
|
|
@ -9,8 +9,6 @@
|
|||
|
||||
(ns app.main.ui.workspace.sidebar.options
|
||||
(:require
|
||||
[beicon.core :as rx]
|
||||
[rumext.alpha :as mf]
|
||||
[app.common.spec :as us]
|
||||
[app.main.data.workspace :as udw]
|
||||
[app.main.refs :as refs]
|
||||
|
|
@ -25,14 +23,17 @@
|
|||
[app.main.ui.workspace.sidebar.options.group :as group]
|
||||
[app.main.ui.workspace.sidebar.options.icon :as icon]
|
||||
[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.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.rect :as rect]
|
||||
[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
|
||||
|
||||
|
|
@ -88,15 +89,17 @@
|
|||
;; need on multiple selection in majority of cases
|
||||
|
||||
(mf/defc options-toolbox
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [local] :as props}]
|
||||
(let [section (:options-mode local)
|
||||
{::mf/wrap [mf/memo]
|
||||
::mf/wrap-props false}
|
||||
[props]
|
||||
(let [section (obj/get props "section")
|
||||
selected (obj/get props "selected")
|
||||
page-id (mf/use-ctx ctx/current-page-id)
|
||||
file-id (mf/use-ctx ctx/current-file-id)
|
||||
shapes (mf/deref refs/selected-objects)
|
||||
shapes-with-children (mf/deref refs/selected-objects-with-children)]
|
||||
[:& options-content {:shapes shapes
|
||||
:selected (:selected local)
|
||||
:selected selected
|
||||
:shapes-with-children shapes-with-children
|
||||
:file-id file-id
|
||||
:page-id page-id
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue