Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-12 07:41:43 -05:00
Code Issues Activity

⚡ Add minor performance improvements to workspace left toolbar

Browse source
This commit is contained in:
Andrey Antukh 2023-05-15 15:54:41 +02:00 • committed by Alejandro Alonso
parent 5d8562e072
commit 02fbce13f0
1 changed files with 100 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -20,30 +20,28 @@
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[app.util.object :as obj]
[app.util.timers :as ts] [app.util.timers :as ts]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(mf/defc image-upload (mf/defc image-upload
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]}
[] []
(let [ref (mf/use-ref nil) (let [ref (mf/use-ref nil)
file (mf/deref refs/workspace-file) file-id (mf/use-ctx ctx/current-file-id)
on-click on-click
(mf/use-callback #(dom/click (mf/ref-val ref))) (mf/use-fn #(dom/click (mf/ref-val ref)))
on-files-selected on-selected
(mf/use-callback (mf/use-fn
(mf/deps file) (mf/deps file-id)
(fn [blobs] (fn [blobs]
;; We don't want to add a ref because that redraws the component ;; We don't want to add a ref because that redraws the component
;; for everychange. Better direct access on the callback. ;; for everychange. Better direct access on the callback.
(let [vbox (deref refs/vbox) (let [vbox (deref refs/vbox)
x (+ (:x vbox) (/ (:width vbox) 2)) x (+ (:x vbox) (/ (:width vbox) 2))
y (+ (:y vbox) (/ (:height vbox) 2)) y (+ (:y vbox) (/ (:height vbox) 2))
params {:file-id (:id file) params {:file-id file-id
:blobs (seq blobs) :blobs (seq blobs)
:position (gpt/point x y)}] :position (gpt/point x y)}]
(st/emit! (dwm/upload-media-workspace params)))))] (st/emit! (dwm/upload-media-workspace params)))))]
@ -53,26 +51,84 @@
{:title (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image)) {:title (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image))
:aria-label (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image)) :aria-label (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image))
:on-click on-click} :on-click on-click}
[:* i/image
i/image [:& file-uploader
[:& file-uploader {:input-id "image-upload" {:input-id "image-upload"
:accept cm/str-image-types :accept cm/str-image-types
:multi true :multi true
:ref ref :ref ref
:on-selected on-files-selected}]]]])) :on-selected on-selected}]]]))
(mf/defc left-toolbar (mf/defc left-toolbar
{::mf/wrap [mf/memo] {::mf/wrap [mf/memo]
::mf/wrap-props false} ::mf/wrap-props false}
[props] [{:keys [layout]}]
(let [layout (obj/get props "layout") (let [selected-drawtool (mf/deref refs/selected-drawing-tool)
selected-drawtool (mf/deref refs/selected-drawing-tool)
select-drawtool #(st/emit! :interrupt (dw/select-for-drawing %))
edition (mf/deref refs/selected-edition) edition (mf/deref refs/selected-edition)
workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
new-css-system (mf/use-ctx ctx/new-css-system) new-css? (mf/use-ctx ctx/new-css-system)
show-palette-btn? (and (not workspace-read-only?) (not new-css-system)) read-only? (mf/use-ctx ctx/workspace-read-only?)
show-palette-btn? (and (not ^boolean read-only?) (not ^boolean new-css?))
interrupt
(mf/use-fn #(st/emit! :interrupt))
select-drawtool
(mf/use-fn
(fn [event]
(let [tool (-> (dom/get-current-target event)
(dom/get-data "tool")
(keyword))]
(st/emit! :interrupt (dw/select-for-drawing tool)))))
toggle-text-palette
(mf/use-fn
(fn []
(r/set-resize-type! :bottom)
(-> (dom/get-element-by-class "color-palette")
(dom/add-class! "fade-out-down"))
(ts/schedule 300 #(st/emit! (dw/remove-layout-flag :colorpalette)
(-> (dw/toggle-layout-flag :textpalette)
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))))
toggle-color-palette
(mf/use-fn
(fn []
(r/set-resize-type! :bottom)
(-> (dom/get-element-by-class "color-palette")
(dom/add-class! "fade-out-down"))
(ts/schedule 300 #(st/emit! (dw/remove-layout-flag :textpalette)
(-> (dw/toggle-layout-flag :colorpalette)
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))))
toggle-shortcuts
(mf/use-fn
(mf/deps layout)
(fn []
(let [is-sidebar-closed? (contains? layout :collapse-left-sidebar)]
(when is-sidebar-closed?
(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))
(st/emit!
(dw/remove-layout-flag :debug-panel)
(-> (dw/toggle-layout-flag :shortcuts)
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))))
toggle-debug-panel
(mf/use-fn
(mf/deps layout)
(fn []
(let [is-sidebar-closed? (contains? layout :collapse-left-sidebar)]
(when is-sidebar-closed?
(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))
(st/emit!
(dw/remove-layout-flag :shortcuts)
(-> (dw/toggle-layout-flag :debug-panel)
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))))
] ]
[:aside.left-toolbar [:aside.left-toolbar
[:ul.left-toolbar-options [:ul.left-toolbar-options
[:li [:li
@ -81,16 +137,17 @@
:aria-label (tr "workspace.toolbar.move" (sc/get-tooltip :move)) :aria-label (tr "workspace.toolbar.move" (sc/get-tooltip :move))
:class (when (and (nil? selected-drawtool) :class (when (and (nil? selected-drawtool)
(not edition)) "selected") (not edition)) "selected")
:on-click #(st/emit! :interrupt)} :on-click interrupt}
i/pointer-inner]] i/pointer-inner]]
(when-not workspace-read-only? (when-not ^boolean read-only?
[:* [:*
[:li [:li
[:button [:button
{:title (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame)) {:title (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame))
:aria-label (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame)) :aria-label (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame))
:class (when (= selected-drawtool :frame) "selected") :class (when (= selected-drawtool :frame) "selected")
:on-click (partial select-drawtool :frame) :on-click select-drawtool
:data-tool "frame"
:data-test "artboard-btn"} :data-test "artboard-btn"}
i/artboard]] i/artboard]]
[:li [:li
@ -98,7 +155,8 @@
{:title (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect)) {:title (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect))
:aria-label (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect)) :aria-label (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect))
:class (when (= selected-drawtool :rect) "selected") :class (when (= selected-drawtool :rect) "selected")
:on-click (partial select-drawtool :rect) :on-click select-drawtool
:data-tool "rect"
:data-test "rect-btn"} :data-test "rect-btn"}
i/box]] i/box]]
[:li [:li
@ -106,7 +164,8 @@
{:title (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse)) {:title (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse))
:aria-label (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse)) :aria-label (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse))
:class (when (= selected-drawtool :circle) "selected") :class (when (= selected-drawtool :circle) "selected")
:on-click (partial select-drawtool :circle) :on-click select-drawtool
:data-tool "circle"
:data-test "ellipse-btn"} :data-test "ellipse-btn"}
i/circle]] i/circle]]
[:li [:li
@ -114,7 +173,8 @@
{:title (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text)) {:title (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text))
:aria-label (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text)) :aria-label (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text))
:class (when (= selected-drawtool :text) "selected") :class (when (= selected-drawtool :text) "selected")
:on-click (partial select-drawtool :text)} :on-click select-drawtool
:data-tool "text"}
i/text]] i/text]]
[:& image-upload] [:& image-upload]
@ -124,7 +184,8 @@
{:title (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve)) {:title (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve))
:aria-label (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve)) :aria-label (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve))
:class (when (= selected-drawtool :curve) "selected") :class (when (= selected-drawtool :curve) "selected")
:on-click (partial select-drawtool :curve) :on-click select-drawtool
:data-tool "curve"
:data-test "curve-btn"} :data-test "curve-btn"}
i/pencil]] i/pencil]]
[:li [:li
@ -132,7 +193,8 @@
{:title (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path)) {:title (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path))
:aria-label (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path)) :aria-label (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path))
:class (when (= selected-drawtool :path) "selected") :class (when (= selected-drawtool :path) "selected")
:on-click (partial select-drawtool :path) :on-click select-drawtool
:data-tool "path"
:data-test "path-btn"} :data-test "path-btn"}
i/pen]]]) i/pen]]])
@ -141,23 +203,19 @@
{:title (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment)) {:title (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
:aria-label (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment)) :aria-label (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
:class (when (= selected-drawtool :comments) "selected") :class (when (= selected-drawtool :comments) "selected")
:on-click (partial select-drawtool :comments)} :on-click select-drawtool
:data-tool "comments"}
i/chat]]] i/chat]]]
[:ul.left-toolbar-options.panels [:ul.left-toolbar-options.panels
(when show-palette-btn? (when ^boolean show-palette-btn?
[:* [:*
[:li [:li
[:button [:button
{:title (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette)) {:title (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
:aria-label (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette)) :aria-label (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
:class (when (contains? layout :textpalette) "selected") :class (when (contains? layout :textpalette) "selected")
:on-click (fn [] :on-click toggle-text-palette}
(r/set-resize-type! :bottom)
(dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
(ts/schedule 300 #(st/emit! (dw/remove-layout-flag :colorpalette)
(-> (dw/toggle-layout-flag :textpalette)
(vary-meta assoc ::ev/origin "workspace-left-toolbar")))))}
"Ag"]] "Ag"]]
[:li [:li
@ -165,34 +223,19 @@
{:title (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette)) {:title (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
:aria-label (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette)) :aria-label (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
:class (when (contains? layout :colorpalette) "selected") :class (when (contains? layout :colorpalette) "selected")
:on-click (fn [] :on-click toggle-color-palette}
(r/set-resize-type! :bottom)
(dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
(ts/schedule 300 #(st/emit! (dw/remove-layout-flag :textpalette)
(-> (dw/toggle-layout-flag :colorpalette)
(vary-meta assoc ::ev/origin "workspace-left-toolbar")))))}
i/palette]]]) i/palette]]])
[:li [:li
[:button [:button
{:title (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts)) {:title (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts))
:aria-label (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts)) :aria-label (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts))
:class (when (contains? layout :shortcuts) "selected") :class (when (contains? layout :shortcuts) "selected")
:on-click (fn [] :on-click toggle-shortcuts}
(let [is-sidebar-closed? (contains? layout :collapse-left-sidebar)]
(ts/schedule 300 #(st/emit! (when is-sidebar-closed? (dw/toggle-layout-flag :collapse-left-sidebar))
(dw/remove-layout-flag :debug-panel)
(-> (dw/toggle-layout-flag :shortcuts)
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))))}
i/shortcut] i/shortcut]
(when *assert* (when *assert*
[:button [:button
{:title "Debugging tool" {:title "Debugging tool"
:class (when (contains? layout :debug-panel) "selected") :class (when (contains? layout :debug-panel) "selected")
:on-click (fn [] :on-click toggle-debug-panel}
(let [is-sidebar-closed? (contains? layout :collapse-left-sidebar)]
(ts/schedule 300 #(st/emit! (when is-sidebar-closed? (dw/toggle-layout-flag :collapse-left-sidebar))
(dw/remove-layout-flag :shortcuts)
(-> (dw/toggle-layout-flag :debug-panel)
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))))}
i/bug])]]])) i/bug])]]]))